@layer base,components,variants;@layer variants{.modern-display{background:var(--tk-face-bg, #0a0a0f);border-radius:var(--tk-radius-lg);box-shadow:inset 0 2px 12px #0009,inset 0 0 0 1px #ffffff0a;padding:2rem 2.5rem;position:relative;overflow:hidden;container-type:inline-size;opacity:var(--tk-face-opacity, 1);color:var(--tk-face-text, var(--tk-text))}.modern-display:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.03) 0%,transparent 30%);pointer-events:none;border-radius:inherit}.modern-digits{display:flex;align-items:center;justify-content:center;gap:.35rem}.modern-digits>.modern-digit,.modern-digits>.modern-colon{flex:0 0 auto}.modern-digit{width:48px;height:80px;padding:2px;box-sizing:content-box}.modern-digit svg{width:100%;height:100%;display:block}@container (min-width: 480px){.modern-digit{width:64px;height:106px;padding:3px;box-sizing:content-box}}@container (min-width: 640px){.modern-digit{width:80px;height:133px;padding:4px;box-sizing:content-box}}.modern-seg{fill:#ffffff0a;transition:fill .12s ease,filter .12s ease}.modern-seg--on{fill:var(--tk-accent, #00d4ff)}.modern-display--no-ghost .modern-seg:not(.modern-seg--on){fill:transparent}.modern-display--glow .modern-seg--on{filter:drop-shadow(0 0 calc(var(--tk-modern-glow-strength, .9) * 4px) color-mix(in srgb,var(--tk-accent, #00d4ff) 55%,transparent)) drop-shadow(0 0 calc(var(--tk-modern-glow-strength, .9) * 12px) color-mix(in srgb,var(--tk-accent, #00d4ff) 25%,transparent))}.modern-display--glow .modern-colon-dot{box-shadow:0 0 calc(var(--tk-modern-glow-strength, .9) * 6px) color-mix(in srgb,var(--tk-accent, #00d4ff) 50%,transparent),0 0 calc(var(--tk-modern-glow-strength, .9) * 14px) color-mix(in srgb,var(--tk-accent, #00d4ff) 25%,transparent)}.modern-display--no-glow .modern-seg--on{filter:none}.modern-display--no-glow .modern-colon-dot{box-shadow:none}.modern-display--thin .modern-seg{stroke:var(--tk-face-bg, #0a0a0f);stroke-width:1.5}.modern-display--thick .modern-seg{transform-origin:center}.modern-display--thick .modern-digit svg{transform:scale(1.04)}.modern-colon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;width:18px;padding:0 .15rem}@container (min-width: 480px){.modern-colon{gap:22px;width:24px}}.modern-colon-dot{width:8px;height:8px;border-radius:2px;background:var(--tk-accent, #00d4ff)}@container (min-width: 480px){.modern-colon-dot{width:10px;height:10px}}.modern-colon--blink .modern-colon-dot{animation:modern-blink 1s steps(1) infinite}@keyframes modern-blink{0%,to{opacity:1}50%{opacity:0}}.modern-colon--dot{gap:0;justify-content:flex-end;width:10px;padding:0}.modern-colon-dot--small{width:6px;height:6px}@container (min-width: 480px){.modern-colon-dot--small{width:8px;height:8px}}[data-fullscreen] .modern-display{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:0;padding:clamp(1rem,3vh,2.5rem) clamp(1.25rem,4vh,3rem)}[data-fullscreen] .modern-digit{height:clamp(86px,25vh,320px);width:calc(clamp(86px,25vh,320px)*.603)}.modern-timer__ms-group{display:flex;align-items:flex-end;gap:.25rem;opacity:.75;align-self:flex-end;padding-bottom:.3rem}.modern-timer__ms-group .modern-digit{width:28px;height:46px}@container (min-width: 480px){.modern-timer__ms-group .modern-digit{width:38px;height:63px}}@container (min-width: 640px){.modern-timer__ms-group .modern-digit{width:48px;height:79px}}.modern-display--complete{animation:modern-flash .6s ease-in-out 3}@keyframes modern-flash{0%,to{opacity:1}50%{opacity:.3}}}@layer base,components,variants;@layer components{:root{--dm-dot: 8px;--dm-dot-gap: 2px}.dm-timer{container-type:inline-size;position:relative;display:flex;flex-direction:column;align-items:center}.dm-timer__bezel{border-radius:12px;padding:clamp(12px,3cqi,28px);box-shadow:inset 0 2px 8px #0009,0 4px 24px #00000080;position:relative}.dm-timer__bezel:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(160deg,rgba(255,255,255,.06) 0%,transparent 50%);pointer-events:none;z-index:1}.dm-timer__bezel[data-style=none]{background:transparent!important;box-shadow:none;padding:0}.dm-timer__bezel[data-style=none]:before{display:none}.dm-timer__bezel[data-style=recessed]{box-shadow:inset 0 4px 16px #000c,inset 0 0 0 2px #ffffff0a}.dm-timer__panel{background:var(--tk-face-bg, #0a0d0a);border-radius:6px;padding:2rem 2.5rem;position:relative;overflow:hidden;z-index:2}.dm-timer__panel:after{content:"";position:absolute;inset:0;border-radius:inherit;background-image:radial-gradient(circle,rgba(255,255,255,.015) 1px,transparent 1px);background-size:6px 6px;pointer-events:none}.dm-timer__digits{display:flex;align-items:center;gap:calc(var(--dm-dot) * .75);position:relative;z-index:1}.dm-timer__char{display:grid;grid-template-columns:repeat(5,var(--dm-dot));grid-template-rows:repeat(7,var(--dm-dot));gap:var(--dm-dot-gap)}.dm-timer__colon{display:grid;grid-template-columns:var(--dm-dot);grid-template-rows:repeat(7,var(--dm-dot));gap:var(--dm-dot-gap)}.dm-dot{width:var(--dm-dot);height:var(--dm-dot);border-radius:var(--_dot-radius, 50%);background:color-mix(in srgb,var(--tk-accent, #f5a623) 6%,transparent);box-shadow:inset 0 1px 2px #0006;transition:background .05s,box-shadow .05s}.dm-dot--on{background:var(--tk-accent, #f5a623);box-shadow:0 0 calc(var(--tk-dm-glow, .8) * 4px) var(--tk-accent, #f5a623),0 0 calc(var(--tk-dm-glow, .8) * 10px) color-mix(in srgb,var(--tk-accent, #f5a623) 50%,transparent)}.dm-timer__label{font-family:inherit;letter-spacing:.25em;font-size:clamp(8px,1.8cqi,14px);color:var(--tk-accent, #f5a623);opacity:.7;margin-bottom:.5em;text-align:center;text-transform:uppercase;position:relative;z-index:1}@keyframes dm-c4-drop{0%{opacity:.7;transform:translateY(calc(var(--travel, 0) * (var(--dm-dot) + var(--dm-gap, 2px)) * -1 - 30px))}50%{opacity:1}78%{transform:translateY(2px)}90%{transform:translateY(-1px)}to{opacity:1;transform:translateY(0)}}@keyframes dm-ghost-fade{0%{opacity:0}to{opacity:1}}[data-intro=true] .dm-dot{opacity:0}[data-intro=true] .dm-dot.dm-dot--on{animation:dm-c4-drop .35s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--drop-delay, 0ms)}[data-intro=true] .dm-dot:not(.dm-dot--on){animation:dm-ghost-fade .25s ease forwards;animation-delay:var(--ghost-delay, .8s)}@keyframes dm-flash{0%,to{opacity:1}50%{opacity:.2}}.dm-timer--flash .dm-timer__panel{animation:dm-flash .5s steps(2) 4}@keyframes dm-scroll-in{0%{transform:translateY(-60%);opacity:0}to{transform:translateY(0);opacity:1}}.dm-char--scroll-in{animation:dm-scroll-in .15s var(--tk-ease, ease) both}[data-dot-shape=square] .dm-dot{border-radius:2px}[data-dot-shape=diamond] .dm-dot{border-radius:2px;transform:rotate(45deg) scale(.7)}[data-pixel-size=small]{--dm-dot: 6px;--dm-dot-gap: 1.5px}[data-pixel-size=large]{--dm-dot: 10px;--dm-dot-gap: 2.5px}@container (min-width: 480px){:root,.dm-timer{--dm-dot: 10px;--dm-dot-gap: 2.5px}[data-pixel-size=small]{--dm-dot: 8px;--dm-dot-gap: 2px}[data-pixel-size=large]{--dm-dot: 13px;--dm-dot-gap: 3px}}@container (min-width: 640px){:root,.dm-timer{--dm-dot: 13px;--dm-dot-gap: 3px}[data-pixel-size=small]{--dm-dot: 10px;--dm-dot-gap: 2.5px}[data-pixel-size=large]{--dm-dot: 17px;--dm-dot-gap: 4px}}[data-fullscreen] .dm-timer{width:min(78vw,52vh);max-width:980px}[data-fullscreen] .dm-timer,[data-fullscreen] .dm-timer[data-pixel-size=medium]{--dm-dot: clamp(8px, 1.2vh, 12px);--dm-dot-gap: clamp(2px, .24vh, 3px)}[data-fullscreen] .dm-timer[data-pixel-size=small]{--dm-dot: clamp(6px, 1vh, 10px);--dm-dot-gap: clamp(1.5px, .2vh, 2.5px)}[data-fullscreen] .dm-timer[data-pixel-size=large]{--dm-dot: clamp(10px, 1.35vh, 15px);--dm-dot-gap: clamp(2.5px, .3vh, 4px)}[data-fullscreen] .dm-timer__panel{padding:clamp(1.25rem,2.4vh,2rem) clamp(1.5rem,3vh,2.5rem)}.dm-timer--no-glow .dm-dot--on{box-shadow:inset 0 1px 2px #0006}}
