.screen{height:100vh;height:100dvh;min-height:30rem;padding:0 var(--gutter);background:var(--bg);color:var(--ink);grid-template-rows:auto auto minmax(0,1fr) auto;display:grid;position:relative;overflow:clip}.screen[data-tone=dark]{background:var(--stage);color:var(--on-stage)}.screen__bar{grid-template-columns:var(--tap) minmax(0, 1fr);align-items:center;gap:var(--sp-3);width:100%;max-width:var(--content-w);padding-top:max(var(--sp-2), env(safe-area-inset-top));min-height:calc(var(--tap) + var(--sp-2));grid-template-areas:"close progress";margin-inline:auto;display:grid}.screen__close{width:var(--tap);height:var(--tap);margin-left:calc(-1 * var(--sp-2));border-radius:var(--r-pill);color:inherit;grid-area:close;place-items:center;font-size:1.5rem;display:grid}@media (hover:hover){.screen__close:hover{background:var(--bg-soft)}.screen[data-tone=dark] .screen__close:hover{background:#ffffff1a}}.screen__progress{border-radius:var(--r-pill);background:var(--bg-soft);height:10px;box-shadow:inset 0 0 0 1px var(--line);grid-area:progress;position:relative;overflow:hidden}.screen__progress--none{visibility:hidden}.screen[data-tone=dark] .screen__progress{box-shadow:none;background:#ffffff1f}.screen__progress-fill{border-radius:inherit;background:var(--brand);transform-origin:0;transition:transform var(--dur-slow) var(--ease-out);position:absolute;inset:0}.screen[data-tone=dark] .screen__progress-fill{background:var(--sun)}.screen__title{display:none}@media (min-width:900px){.screen__bar{grid-template-columns:var(--tap) auto minmax(0, 1fr);grid-template-areas:"close title progress"}.screen__title{color:var(--ink-2);font-size:var(--fs-small);font-weight:var(--fw-medium);white-space:nowrap;grid-area:title;display:block}.screen[data-tone=dark] .screen__title{color:var(--on-stage-2)}}.screen__words{width:100%;max-width:var(--text-w);padding-block:var(--sp-3) var(--sp-4);text-align:center;animation:screen-words-in var(--dur-base) var(--ease-out) both;margin-inline:auto}.screen__words[data-hushed]{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.screen__line{font-size:var(--fs-line);font-weight:var(--fw-heavy);line-height:var(--lh-tight)}.screen__sub{margin-top:var(--sp-2);color:var(--ink-2);font-size:var(--fs-body);line-height:var(--lh-snug)}.screen[data-tone=dark] .screen__sub{color:var(--on-stage-2)}@keyframes screen-words-in{0%{opacity:0;translate:0 calc(8px * var(--motion))}}.screen__visual{width:100%;max-width:var(--content-w);min-height:0;margin-inline:auto;position:relative;container-type:size}.screen__visual[data-scroll]{overscroll-behavior:contain;overflow-y:auto;container-type:inline-size}.screen__dock{align-content:end;gap:var(--sp-2);width:100%;max-width:34rem;padding-block:var(--sp-3) max(var(--sp-4), env(safe-area-inset-bottom));animation:screen-dock-in var(--dur-base) var(--ease-out) both;margin-inline:auto;display:grid}.screen__dock:empty{padding-block:0 max(var(--sp-4), env(safe-area-inset-bottom))}.screen__dock[data-dock=one]{min-height:calc(var(--dock-1) + env(safe-area-inset-bottom))}.screen__dock[data-dock=after]{min-height:calc(var(--dock-after) + env(safe-area-inset-bottom))}@keyframes screen-dock-in{0%{opacity:0;translate:0 calc(12px * var(--motion))}}@media (max-height:32rem){.screen{grid-template-rows:auto auto minmax(18rem,1fr) auto;height:auto;min-height:100dvh}}.burst{z-index:0;pointer-events:none;position:absolute;inset:0;overflow:visible;container-type:size}.burst:before{content:"";width:90cqmin;height:90cqmin;animation:burst-glow 1.4s var(--ease-out) both;background:radial-gradient(closest-side,#ffc83d73,#6a2ed81f 60%,#0000);border-radius:50%;position:absolute;top:50%;left:50%;translate:-50% -50%}.burst__bit,.burst__dot{background:var(--c);opacity:0;width:10px;height:16px;animation:burst-fly 1.1s var(--ease-out) var(--d) both;border-radius:3px;margin:-8px 0 0 -5px;position:absolute;top:50%;left:50%}.burst__dot{border-radius:50%;width:12px;height:12px;margin:-6px 0 0 -6px}@keyframes burst-fly{0%{opacity:1;transform:rotate(var(--a)) translateY(0) rotate(0deg) scale(.6)}70%{opacity:1}to{opacity:0;transform:rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(var(--s)) scale(1)}}@keyframes burst-glow{0%{opacity:0;scale:.4}}@media (prefers-reduced-motion:reduce){.burst:before{animation:burst-fade var(--dur-slow) linear both}@keyframes burst-fade{0%{opacity:0}}}
