:root{color-scheme:dark;--bg: #07090c;--bg-deep: #020306;--ink: #fff5d7;--ink-soft: rgba(255, 245, 215, .5);--amber: #f0b53f;--coral: #ff6b4a;--rose: #d84265;--mint: #61d7a0;--blue: #4b84e6;--stopwatch-bg: #ecdfb6;--stopwatch-ink: #241f15;--stopwatch-gold: #9d6b20;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html,body,#app{width:100%;min-width:320px;height:100%;min-height:100%}body{margin:0;overflow:hidden;background:var(--bg);color:var(--ink);overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none}button,input,textarea,select{font:inherit}.stage{position:relative;isolation:isolate;display:grid;width:100vw;height:100dvh;min-height:420px;overflow:hidden;place-items:center;cursor:pointer;background:radial-gradient(circle at 50% 48%,rgba(240,181,63,.2),transparent 19rem),radial-gradient(circle at 45% 112%,rgba(75,132,230,.2),transparent 24rem),linear-gradient(180deg,#15171d 0%,var(--bg) 58%,var(--bg-deep) 100%)}.stage:before,.stage:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none}.stage:before{opacity:.32;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:74px 74px;-webkit-mask-image:radial-gradient(circle at center,black,transparent 68%);mask-image:radial-gradient(circle at center,black,transparent 68%)}.stage:after{background:linear-gradient(180deg,rgba(2,3,6,.92),transparent 23%,transparent 73%,rgba(2,3,6,.9)),radial-gradient(circle at center,transparent 0 36%,rgba(0,0,0,.46) 100%)}.feed{position:absolute;top:0;right:0;bottom:0;left:0;--feed-active-size: clamp(10rem, min(42dvh, 56vw), 28rem);--feed-flow-distance: clamp(5.5rem, 13dvh, 9.5rem);--feed-flow-overshoot: clamp(.7rem, 2.1dvh, 1.55rem);perspective:900px;transform-style:preserve-3d;will-change:transform}.feed-value{position:absolute;top:50%;left:50%;width:100vw;text-align:center;color:#12100ed1;font-size:var(--feed-active-size);font-weight:1000;line-height:.76;letter-spacing:0;text-shadow:0 .014em 0 rgba(255,245,215,.22),0 .065em .16em rgba(240,181,63,.18),0 .12em .18em rgba(0,0,0,.5);transform-origin:center center;transition:transform var(--selection-transition-ms, .36s) cubic-bezier(.22,1.28,.34,1),opacity var(--selection-transition-ms, .26s) ease,filter var(--selection-transition-ms, .26s) ease,color .22s ease;will-change:transform,opacity,filter}.feed-value.plus{color:#12100ed1}.feed-value[aria-current=true]{color:#fff6d8;text-shadow:0 .018em 0 #ff8a45,0 .055em 0 #993a38,0 .14em .2em rgba(0,0,0,.62),0 -.025em .18em rgba(255,252,224,.3)}.focus-stage{background:radial-gradient(circle at 50% 45%,rgba(255,245,215,.16),transparent 20rem),radial-gradient(circle at 50% 102%,rgba(255,107,74,.28),transparent 26rem),linear-gradient(180deg,#17191f,#07090c 58%,#020306)}.focus-shell{position:relative;display:grid;justify-items:center;transform:translateY(-1vh);transition:transform .36s cubic-bezier(.22,1.28,.34,1),filter .26s ease,opacity .26s ease}.focus-number{min-width:min(100vw,8.5em);padding-inline:.04em;text-align:center;color:#fff6d8;font-size:clamp(9rem,min(60vh,58vw),38rem);font-weight:1000;line-height:.72;letter-spacing:0;transform:translateZ(0);text-shadow:0 .018em 0 #ff8a45,0 .055em 0 #963d38,0 .125em .2em rgba(0,0,0,.62),0 -.025em .14em rgba(255,252,224,.26);transition:color .36s ease,text-shadow .36s ease,transform .36s cubic-bezier(.22,1.28,.34,1)}.sub-time{margin-top:clamp(.35rem,1.6vh,1rem);color:var(--amber);font-size:clamp(1.15rem,4.2vw,2.4rem);font-weight:900;line-height:1;letter-spacing:0;opacity:.86;text-shadow:0 .5rem 1.6rem rgba(240,181,63,.2);transition:color .26s ease,opacity .26s ease,transform .26s ease}.pause-mark{position:absolute;top:calc(100% + clamp(1.2rem,4vh,2.2rem));left:50%;display:flex;gap:.48rem;width:2.6rem;height:2.8rem;justify-content:center;opacity:0;transform:translate(-50%) translateY(-.8rem) scale(.75);transition:opacity .22s ease,transform .26s cubic-bezier(.22,1.28,.34,1)}.pause-mark span{width:.52rem;height:100%;border-radius:99px;background:currentColor;box-shadow:0 .9rem 1.6rem #00000052}[data-paused=true] .focus-shell{filter:saturate(.72) brightness(.82);transform:translateY(-1vh) scaleY(.94)}[data-paused=true] .focus-number{transform:scale(.96,.88)}[data-paused=true] .sub-time{opacity:.48;transform:translateY(.25rem)}[data-paused=true] .pause-mark{opacity:.72;transform:translate(-50%) translateY(0) scale(1)}[data-visual=stopwatch]{color-scheme:light}[data-visual=stopwatch] .stage{background:radial-gradient(circle at 50% 40%,rgba(255,249,228,.6),transparent 17rem),radial-gradient(circle at 50% 115%,rgba(75,132,230,.05),transparent 25rem),linear-gradient(180deg,#f8efd2 0%,var(--stopwatch-bg) 66%,#c0ae7e 100%)}[data-visual=stopwatch] .stage:before{opacity:.2;background-image:linear-gradient(rgba(32,29,25,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(32,29,25,.045) 1px,transparent 1px)}[data-visual=stopwatch] .stage:after{background:linear-gradient(180deg,rgba(255,250,232,.42),transparent 25%,transparent 78%,rgba(112,88,42,.2)),radial-gradient(circle at center,transparent 0 44%,rgba(112,88,42,.16) 100%)}[data-visual=stopwatch] .feed-value{color:#5446284d;text-shadow:0 .014em 0 rgba(255,250,232,.5),0 .075em .16em rgba(180,123,34,.14),0 .12em .2em rgba(116,76,12,.1)}[data-visual=stopwatch] .feed-value[aria-current=true],[data-visual=stopwatch] .focus-number{color:var(--stopwatch-ink);text-shadow:0 .018em 0 rgba(241,192,92,.78),0 .07em .16em rgba(116,76,12,.16)}[data-visual=stopwatch] .sub-time{color:#2c2416;opacity:.94;text-shadow:0 .035em 0 rgba(241,192,92,.52),0 .35rem .9rem rgba(0,0,0,.16)}[data-scrubbing=true] .stage:after{background:linear-gradient(180deg,rgba(2,3,6,.88),transparent 20%,transparent 76%,rgba(2,3,6,.86)),radial-gradient(circle at center,transparent 0 35%,rgba(0,0,0,.38) 100%)}.selection-pulse .feed-value[aria-current=true]{animation:selectPulse .43s cubic-bezier(.18,1.58,.28,1)}.selection-pulse[data-bump=up] .feed,.selection-pulse[data-bump=down] .feed{animation-duration:var(--selection-transition-ms, .43s);animation-timing-function:cubic-bezier(.16,1.22,.2,1);animation-fill-mode:both}.selection-pulse[data-bump=up] .feed{animation-name:feedFlowUp}.selection-pulse[data-bump=down] .feed{animation-name:feedFlowDown}[data-scrubbing=true].selection-pulse[data-bump=up] .feed,[data-scrubbing=true].selection-pulse[data-bump=down] .feed{animation-timing-function:cubic-bezier(.08,.86,.18,1)}.launching .feed-value[aria-current=true]{animation:launchCrush .62s cubic-bezier(.2,1.5,.34,1)}.launching .focus-number{animation:launchFocus .62s cubic-bezier(.2,1.5,.34,1)}.tick-pulse .focus-number{animation:tickPulse .38s cubic-bezier(.24,1.3,.34,1)}.tick-pulse .sub-time{animation:labelPulse .38s ease-out}.resetting .stage{animation:resetFlash .32s ease}.times-up .stage{animation:timesUpFlash 1.4s ease-out}.times-up .focus-shell{animation:timesUpBounce 1.4s cubic-bezier(.22,1.28,.34,1)}[data-bump=edge-up] .feed,[data-bump=edge-down] .feed{animation:edgeNudge .22s ease}[data-bump=edge-down] .feed{animation-direction:reverse}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes selectPulse{0%{transform:translate3d(-50%,calc(-50% + var(--feed-y)),0) scale(.94,1.08)}42%{transform:translate3d(-50%,calc(-50% + var(--feed-y)),0) scale(1.055,.955)}72%{transform:translate3d(-50%,calc(-50% + var(--feed-y)),0) scale(.985,1.018)}to{transform:translate3d(-50%,calc(-50% + var(--feed-y)),0) scale(1)}}@keyframes feedFlowUp{0%{transform:translate3d(0,calc(var(--feed-flow-distance) * -1),0)}62%{transform:translate3d(0,var(--feed-flow-overshoot),0)}82%{transform:translate3d(0,calc(var(--feed-flow-overshoot) * -.32),0)}to{transform:translateZ(0)}}@keyframes feedFlowDown{0%{transform:translate3d(0,var(--feed-flow-distance),0)}62%{transform:translate3d(0,calc(var(--feed-flow-overshoot) * -1),0)}82%{transform:translate3d(0,calc(var(--feed-flow-overshoot) * .32),0)}to{transform:translateZ(0)}}@keyframes launchCrush{0%{transform:translate3d(-50%,calc(-50% + var(--feed-y, 0px)),0) scale(1);filter:brightness(1)}34%{transform:translate3d(-50%,calc(-50% + var(--feed-y, 0px)),0) scale(1.06,.78);filter:brightness(1.24) saturate(1.18)}58%{transform:translate3d(-50%,calc(-50% + var(--feed-y, 0px)),0) scale(.96,1.05);filter:brightness(.94) saturate(1.08)}to{transform:translate3d(-50%,calc(-50% + var(--feed-y, 0px)),0) scale(1);filter:brightness(1)}}@keyframes launchFocus{0%{transform:scale(1);filter:brightness(1)}34%{transform:scale(1.06,.78);filter:brightness(1.24) saturate(1.18)}58%{transform:scale(.96,1.05);filter:brightness(.94) saturate(1.08)}to{transform:scale(1);filter:brightness(1)}}@keyframes tickPulse{0%{transform:translateY(0) scale(1)}30%{transform:translateY(.022em) scale(1.035,.94)}62%{transform:translateY(-.014em) scale(.982,1.035)}to{transform:translateY(0) scale(1)}}@keyframes labelPulse{0%,to{opacity:.86;transform:scale(1)}36%{opacity:1;transform:scale(1.05)}}@keyframes resetFlash{0%{filter:brightness(1)}45%{filter:brightness(1.32)}to{filter:brightness(1)}}@keyframes timesUpFlash{0%,22%,44%{filter:brightness(1.75) saturate(1.15)}11%,33%,58%,to{filter:brightness(1)}}@keyframes timesUpBounce{0%{transform:translateY(-1vh) scale(.62)}34%{transform:translateY(-1vh) scale(1.12)}58%{transform:translateY(-1vh) scale(.96)}76%{transform:translateY(-1vh) scale(1.03)}to{transform:translateY(-1vh) scale(1)}}@keyframes edgeNudge{0%,to{transform:translateY(0)}50%{transform:translateY(-1.2rem)}}@media(max-width:640px){.stage{min-height:100dvh}.focus-number{font-size:clamp(8.5rem,84vw,22rem)}.sub-time{font-size:clamp(1.2rem,6vw,2.1rem)}.pause-mark{top:calc(100% + 1.4rem)}}@media(min-width:1000px){.focus-number{font-size:clamp(13rem,44vw,36rem)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:80ms!important}}
