@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)}}