@layer components{.stage{--stage-x:1rem;--stage-y:.75rem;min-height:100svh;padding:var(--stage-y) var(--stage-x);background:radial-gradient(ellipse at 50% 45%, transparent 60%, color-mix(in srgb, var(--ink) 7%, transparent) 100%), repeating-linear-gradient(180deg, transparent 0 39px, var(--rule-soft) 39px 40px), var(--paper);color:var(--ink);flex-direction:column;display:flex;position:relative}@media (width>=51.25rem){.stage{--stage-x:2.5rem;--stage-y:1.5rem}}.stage:fullscreen{overflow-y:auto}.stage-btn{border-radius:.75rem;width:2.5rem;height:2.5rem}@media (width>=51.25rem){.stage-btn{width:2.75rem;height:2.75rem}}.stage-head{z-index:3;top:var(--stage-y);left:var(--stage-x);align-items:center;gap:.25rem;display:flex;position:absolute}.stage-logo{opacity:.85;border-radius:.625rem;align-items:center;min-height:2.5rem;padding:0 .5rem;display:inline-flex}.stage-logo:hover{opacity:1}@media (width<30rem){.stage-logo>span>span{display:none}}.stage-menu{width:min(42rem, calc(100vw - 2 * var(--stage-x)));overscroll-behavior:contain;border:1px solid var(--rule);background:var(--amb-base,var(--sheet));max-height:calc(100svh - 5.5rem);box-shadow:var(--shadow);text-align:left;border-radius:1rem;padding:.25rem 1.25rem 1.25rem;transition:opacity .15s;position:absolute;top:calc(100% + .5rem);left:0;overflow-y:auto}@starting-style{.stage-menu{opacity:0}}.stage-menu[hidden]{display:none}.stage-tool{flex-direction:column;flex:1;min-height:0;display:flex}.stage-tools{align-self:flex-end;align-items:center;gap:.25rem;display:flex}@media (width>=51.25rem){.stage-tools{gap:.5rem}}.stage-main{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;padding-block:.5rem 1rem;display:flex;container-type:inline-size}.stage-title{color:var(--ink-2);font-family:var(--serif);font-size:clamp(1.125rem,2.6svh,1.5rem);font-weight:500;line-height:1.2}.stage-subject{color:var(--ink-2);flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;margin-top:clamp(.375rem,1.2svh,.75rem);font-size:.9375rem;display:flex}.stage-select{width:12rem;max-width:80vw}.stage-task{max-width:36rem;color:var(--ink);font-family:var(--serif);margin-top:.375rem;font-size:clamp(1.125rem,2.6svh,1.5rem);font-style:italic;line-height:1.3}.stage-digits{--max:min(44svh, calc(100svh - 27rem));font-size:max(4.5rem, min(var(--max), calc(94cqw / var(--w))));margin-block:clamp(.25rem,1.5svh,1rem) -.1em;line-height:1}.stage-status{color:var(--ink-2);margin-top:clamp(.25rem,1svh,.75rem);font-size:clamp(1rem,2.2svh,1.375rem)}.stage-left{background:var(--rule-soft);border-radius:999px;width:min(92%,60rem);height:clamp(.5rem,1.2svh,.75rem);margin-top:clamp(.75rem,2.4svh,1.5rem);overflow:hidden}.stage-left>span{border-radius:inherit;background:var(--subject,var(--accent));width:100%;height:100%;margin-left:auto;transition:width 1s linear;display:block}.stage-lengths{grid-template-columns:repeat(4,minmax(0,1fr));gap:.375rem;width:min(100%,24rem);margin-top:clamp(1rem,3svh,1.75rem);display:grid}.stage-lengths:has(>:nth-child(5)){grid-template-columns:repeat(5,minmax(0,1fr));gap:.25rem}.stage-controls{gap:.625rem;width:min(100%,24rem);margin-top:clamp(.625rem,1.6svh,1rem);display:flex}.stage-start{flex:1;font-size:1.125rem}.stage-foot{color:var(--ink-2);text-align:center;flex-direction:column-reverse;align-items:center;gap:.75rem;font-size:.875rem;line-height:1.45;display:flex}@media (width>=51.25rem){.stage-foot{text-align:left;flex-flow:wrap;justify-content:space-between;align-items:flex-end;gap:.75rem 2rem}}.stage .amb-panel-float{background:var(--amb-base,var(--sheet));-webkit-backdrop-filter:none}.stage-strip{--amb-gap:var(--amb-base,var(--paper))}.stage-keys{display:none}@media (width>=51.25rem){.stage-keys{margin-top:.125rem;display:block}}.stage-toast{z-index:2;top:calc(var(--stage-y) + 3.25rem);right:var(--stage-x);left:var(--stage-x);justify-content:center;display:flex;position:absolute}.stage-chrome{transition:opacity .6s}.stage.is-calm:not(:has([aria-expanded=true]:not(#site-menu *))){cursor:none}.stage.is-calm:not(:has([aria-expanded=true]:not(#site-menu *))) .stage-chrome{opacity:0;pointer-events:none}@media (height<32rem) and (width>=40rem){.stage-main{flex-flow:wrap;align-content:center;column-gap:.75rem}.stage-title,.stage-subject,.stage-lengths,.stage-controls{flex:none}.stage-subject{margin-top:0}.stage-task,.stage-digits,.stage-status{flex-basis:100%}.stage-left{flex-basis:100%;max-width:min(92%,60rem);margin-bottom:.25rem}.stage-digits{--max:calc(100svh - 17rem)}.stage-lengths,.stage-controls{width:18rem;margin-top:clamp(.5rem,2svh,1rem)}}.stage-log{max-width:26rem}}
