@layer base,components,variants;@layer variants{.flip-clock{container-type:inline-size;--flip-h: clamp(56px, 33cqi, 150px);display:flex;align-items:center;justify-content:center;gap:calc(var(--flip-h) * .05);width:100%}.flip-clock--with-hours{--flip-h: clamp(56px, 21cqi, 110px)}.flip-group{display:flex;gap:calc(var(--flip-h) * .035)}.flip-group--ms{--flip-h: calc(clamp(56px, 21cqi, 110px)*.65) ;align-self:flex-end;opacity:.85}.flip-card{position:relative;width:calc(var(--flip-h) * .6875);height:var(--flip-h);perspective:calc(var(--flip-h) * 5);font-family:var(--tk-font-mono);font-size:calc(var(--flip-h) * .5);font-weight:500;color:#fff}.flip-card__top,.flip-card__bottom{position:absolute;left:0;right:0;overflow:hidden;background:var(--tk-card-bg, #1a1a1a);color:var(--tk-face-text, #fff);display:flex;align-items:center;justify-content:center}[data-theme=dark] .flip-card__top,[data-theme=dark] .flip-card__bottom{background:var(--tk-card-bg, #111)}.flip-card__top{top:0;height:50%;border-radius:var(--tk-card-radius, calc(var(--flip-h) * .068)) var(--tk-card-radius, calc(var(--flip-h) * .068)) 0 0;border-bottom:1px solid var(--tk-divider-color, rgba(0,0,0,.4));box-shadow:0 1px 2px #0003;align-items:flex-end;padding-bottom:0}.flip-card__top span{transform:translateY(50%)}.flip-card__bottom{bottom:0;height:50%;border-radius:0 0 var(--tk-card-radius, calc(var(--flip-h) * .068)) var(--tk-card-radius, calc(var(--flip-h) * .068));box-shadow:0 2px 4px #0000004d;align-items:flex-start;padding-top:0}.flip-card__bottom span{transform:translateY(-50%)}.flip-card__flap{position:absolute;left:0;right:0;height:50%;overflow:hidden;backface-visibility:hidden;background:var(--tk-card-bg, #1a1a1a);color:var(--tk-face-text, #fff);display:flex;align-items:center;justify-content:center}[data-theme=dark] .flip-card__flap{background:var(--tk-card-bg, #111)}.flip-card__flap--front{top:0;border-radius:var(--tk-card-radius, calc(var(--flip-h) * .068)) var(--tk-card-radius, calc(var(--flip-h) * .068)) 0 0;transform-origin:bottom center;border-bottom:1px solid var(--tk-divider-color, rgba(0,0,0,.4));align-items:flex-end}.flip-card__flap--front span{transform:translateY(50%)}.flip-card__flap--back{bottom:0;border-radius:0 0 var(--tk-card-radius, calc(var(--flip-h) * .068)) var(--tk-card-radius, calc(var(--flip-h) * .068));transform-origin:top center;transform:rotateX(180deg);align-items:flex-start}.flip-card__flap--back span{transform:translateY(-50%)}.flip-card--flipping .flip-card__flap--front{animation:flip-top var(--tk-flip-speed, .3s) ease-in forwards}.flip-card--flipping .flip-card__flap--back{animation:flip-bottom var(--tk-flip-speed, .3s) .15s ease-out forwards}@keyframes flip-top{0%{transform:rotateX(0)}to{transform:rotateX(-90deg)}}@keyframes flip-bottom{0%{transform:rotateX(180deg)}to{transform:rotateX(0)}}.flip-colon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--flip-h) * .12);padding:0 calc(var(--flip-h) * .02)}.flip-colon__dot{width:calc(var(--flip-h) * .08);height:calc(var(--flip-h) * .08);border-radius:50%;background:var(--tk-text-secondary)}[data-fullscreen] .flip-clock{--flip-h: clamp(80px, 20vh, 220px)}[data-fullscreen] .flip-clock--with-hours{--flip-h: clamp(80px, 15vh, 160px)}.flip-clock--complete .flip-card__top,.flip-clock--complete .flip-card__bottom{animation:flip-flash .6s ease-in-out 3}@keyframes flip-flash{0%,to{opacity:1}50%{opacity:.4}}}@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}}
