@layer components{.visual-face{text-align:center;padding:.75rem 1rem 0;position:relative;container-type:inline-size}@media (width>=51.25rem){.visual-face{padding:2rem 1.5rem 0}}.visual-lengths{flex-wrap:wrap;gap:.375rem;margin-bottom:.75rem;display:flex}.visual-lengths>.btn{flex:1 1 0;min-width:max-content}.visual-dial{--disc:var(--margin-ink);--left:1;--ticks:0;aspect-ratio:1;width:min(100%,26.25rem);margin-inline:auto;position:relative}@media (width<51.25rem){.visual-dial{width:min(100%,15rem,max(11rem,100svh - 39rem))}}:where(:root[data-theme=dark]) .visual-dial{--disc:var(--margin)}@media (prefers-color-scheme:dark){:where(:root:not([data-theme=light])) .visual-dial{--disc:var(--margin)}}.visual-disc{background:conic-gradient(var(--disc) calc(var(--left) * 1turn), transparent 0);border-radius:50%;position:absolute;inset:11%}.visual-marks{width:100%;height:100%;position:absolute;inset:0}.visual-rim{fill:none;stroke:var(--control);stroke-width:1.5px;vector-effect:non-scaling-stroke}.visual-mark{opacity:clamp(0, calc(var(--ticks) - var(--i)), 1);stroke:var(--ink-3);stroke-linecap:round;stroke-width:1.5px;transform:rotate(calc(var(--i) * 1turn / var(--ticks)));transform-box:view-box;transform-origin:50%;vector-effect:non-scaling-stroke}.visual-five{stroke:var(--ink-2);stroke-width:2.5px}.visual-digits{--max:4rem;margin-top:.5rem}@media (width>=51.25rem){.visual-digits{--max:5.5rem;margin-top:1.25rem}}.visual-status{color:var(--ink-2);font-size:.9375rem}@media (width>=51.25rem){.visual-status{font-size:1rem}}.visual-view .visual-dial{flex:none;width:max(8rem,min(100%,100dvh - 27rem));margin-top:clamp(.25rem,1dvh,.75rem)}.visual-view .countdown-digits{--max:clamp(2.5rem, 9dvh, 6rem);font-size:min(var(--max), calc(94cqw / var(--w)));margin-top:clamp(.5rem,2dvh,1.25rem)}@media (forced-colors:active){.visual-dial{--disc:Highlight;forced-color-adjust:none}.visual-rim,.visual-mark{stroke:canvastext}}}