body{margin:0;font-family:var(--font-body);font-size:var(--text-16);line-height:1.5;background:var(--ground);color:var(--text)}.mono{font-family:var(--font-mono)}.skip{position:absolute;left:-9999px;top:8px;background:var(--text);color:var(--ground);padding:8px 12px;z-index:10}.skip:focus{left:8px}.track{height:calc((var(--beats, 4) + 1.6) * 100svh)}.stage{position:sticky;top:0;height:100svh;overflow:hidden;--pad-x: var(--space-9)}.view{position:absolute;inset:0;transition:opacity .18s var(--ease)}.view.cut{opacity:0}#scene{position:absolute;inset:0;width:100%;height:100%;display:block}body.static #scene,body.static .labels{display:none}.fig{display:none;margin:0}body.static .fig{display:block;position:absolute;left:var(--pad-x);right:var(--pad-x);top:72px;max-width:900px}.fig svg{width:100%;height:auto}.fig text{font-family:var(--font-mono);font-size:12px}.fig .t1{fill:var(--text)}.fig .t2{fill:var(--secondary)}.fig .box{fill:none;stroke:var(--control-border)}.fig .dash{stroke-dasharray:3 3}.fig .wire{stroke:var(--lane)}.fig .d{fill:var(--text)}.fig .d2{fill:var(--secondary);opacity:.6}.fig .you{fill:var(--text);stroke:var(--ground);stroke-width:1.5}.fig .lost{fill:none;stroke:var(--secondary);stroke-dasharray:2 2}.top{position:absolute;left:var(--pad-x);right:var(--pad-x);top:24px;display:flex;justify-content:space-between;z-index:3}.top a{font-size:var(--text-12);color:var(--secondary);text-decoration:none}.top a:hover{color:var(--text)}.labels span{position:absolute;left:0;top:0;padding-bottom:6px;font-size:var(--text-12);color:var(--secondary);white-space:nowrap;opacity:0;transition:opacity var(--dur-short) var(--ease);will-change:transform}.labels span.lane{padding:0 10px 0 0;color:var(--text)}.labels span.small{font-size:11px}.labels span.below{padding:6px 0 0}.labels span.trouble,.labels span.you{color:var(--text)}.player{position:absolute;left:var(--pad-x);right:var(--pad-x);bottom:28px;z-index:3}.now{max-width:720px;margin-bottom:18px}.question{margin:0 0 8px;font-family:var(--font-display);font-weight:700;font-size:40px;line-height:1.1;letter-spacing:-.02em}.sub{margin:0;font-size:17px;color:var(--secondary)}.status{margin:12px 0 0;font-size:var(--text-12);color:var(--secondary)}.step-title{margin:0 0 6px;font-size:var(--text-12);color:var(--secondary);text-transform:uppercase;letter-spacing:.06em}.step-title #step-name{color:var(--text)}.narration{margin:0;font-size:18px;line-height:1.45}.narration code{font-family:var(--font-mono);font-size:.9em}.counters{display:flex;flex-wrap:wrap;gap:4px 18px;margin:10px 0 0;font-size:var(--text-12);color:var(--secondary)}.counters b{font-weight:400;color:var(--text);font-variant-numeric:tabular-nums}.how{margin:6px 0 0;font-size:var(--text-12);color:var(--secondary)}.ladder[hidden]{display:none}.ladder{display:grid;gap:2px;margin:10px 0 0;font-size:11px;color:var(--secondary)}.ladder .rung{display:grid;grid-template-columns:64px 240px auto;align-items:center;gap:10px;height:16px}.ladder em{font-style:normal;white-space:nowrap}.ladder .track{position:relative;height:100%}.ladder .track:after{content:"";position:absolute;left:100%;top:-2px;bottom:-2px;border-left:1px solid var(--secondary)}.ladder .head .track b{position:absolute;left:calc(100% + 6px);top:0;font-weight:400;white-space:nowrap}.ladder .rung i{position:absolute;left:0;top:7px;height:2px;background:var(--text)}.end{display:flex;gap:24px;margin:14px 0 0;font-size:13px}.end[hidden]{display:none}.end a{color:var(--accent);text-decoration:none}.end a:hover{text-decoration:underline;text-underline-offset:4px}.controls{display:flex;align-items:center;gap:20px;border-top:1px solid var(--rule);padding-top:16px}.play{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 20px;font-size:13px;cursor:pointer;background:var(--text);color:var(--ground);border:1px solid var(--text)}.play svg{width:12px;height:14px;display:none}.play .i-play{display:block}body.started .play{width:44px;padding:0;background:transparent;color:var(--text);border-color:var(--control-border)}body.started .play-text,body.playing .play .i-play,body.ended .play .i-play{display:none}body.playing .play .i-pause{display:block}body.ended .play .i-replay{display:block;width:14px}.chapters{flex:1;display:flex;gap:6px;list-style:none;margin:0;padding:0;min-width:0}.chapters li{flex-basis:0;min-width:0}.chapters button{width:100%;background:none;border:0;padding:12px 0 4px;margin:0;cursor:pointer;text-align:left;color:var(--secondary);font:inherit}.bar{display:block;height:2px;background:var(--rule);overflow:hidden}.fill{display:block;height:100%;background:var(--text);transform:scaleX(0);transform-origin:left}.lbl{display:block;margin-top:8px;font-size:var(--text-12);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chapters button:hover .lbl,body.started .chapters button[aria-current=step] .lbl{color:var(--text)}.time{flex:none;font-size:var(--text-12);color:var(--secondary);font-variant-numeric:tabular-nums}@media(max-width:767px){.stage{--pad-x: 20px}.top{top:16px}.player{bottom:16px}.question{font-size:28px}.sub,.narration{font-size:15px}.ladder,.how{display:none}.controls{gap:12px;padding-top:12px}.lbl,.time{display:none}body.static .fig{top:56px}.labels span{font-size:11px}}@media(max-height:540px)and (orientation:landscape){.stage{--pad-x: 20px}.now{max-width:48vw;margin-bottom:8px}.question{font-size:22px}.sub,.narration{font-size:14px}.ladder,.how{display:none}.play{height:36px}body.started .play{width:36px}.lbl{display:none}}@media(max-height:360px)and (orientation:landscape){.narration{font-size:13px;line-height:1.4}.counters{display:none}}@media(prefers-reduced-motion:reduce){.view,.labels span{transition:none}}