:root{color-scheme:dark;--paper:#eee5d2;--gold:#d6af69;--muted:#aba1b8;--line:#433446;--panel:#1b1425}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#31213e 0,#17101f 48%,#100d17 100%);color:var(--paper);font-family:system-ui,sans-serif;min-height:100vh}main{max-width:1280px;margin:auto;padding:27px 38px 20px}header{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:10px;letter-spacing:1.6px}a{color:var(--paper);text-decoration:none}.brand{font-weight:750}.brand span{color:var(--muted);font-weight:400}.candidate{border:1px solid #665072;border-radius:30px;padding:7px 11px;color:#c9b6db;font-size:9px;letter-spacing:1px}.title-row{display:flex;justify-content:space-between;align-items:center;padding:28px 0 25px}.eyebrow{color:var(--gold);font-size:10px;letter-spacing:2.6px;margin:0 0 8px}h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(40px,5vw,66px);letter-spacing:-2.6px;line-height:1;margin:0 0 12px}h1 em{color:var(--gold);font-weight:400}.premise{font-size:13px;color:#c4b9cb;line-height:1.6;margin:0}.serial{font-family:Georgia,serif;font-size:22px;color:#b9a382;text-align:right}.serial span{display:block;font:9px system-ui;letter-spacing:2px;color:var(--muted);margin-top:8px}.mobile-break{display:none}.cabinet{border:1px solid #5a435b;display:grid;grid-template-columns:minmax(0,1fr) 306px;border-radius:10px;overflow:hidden;background:#171020;box-shadow:0 24px 90px #0005}.viewport{position:relative;min-width:0;background:radial-gradient(ellipse at 50% 42%,#322139,#171120 70%);height:505px}canvas{width:100%;height:100%;display:block}.stage-top,.stage-bottom{position:absolute;left:20px;right:20px;display:flex;justify-content:space-between;align-items:center;font:9px system-ui;letter-spacing:1.5px;color:#b6a0bd;pointer-events:none}.stage-top{top:19px}.stage-bottom{bottom:18px;font-size:8px;letter-spacing:1px}.stage-bottom i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#fff6d9;margin-right:6px}.stage-bottom b{padding:0 5px;font-weight:400}aside{border-left:1px solid #4f3a51;padding:24px 22px;background:linear-gradient(155deg,#251b2d,#1b1523)}.instrument-label{font-size:9px;letter-spacing:1.6px;color:#bbabc2;display:flex;justify-content:space-between}.instrument-label span{color:var(--gold)}.seals{display:flex;align-items:center;margin:18px 0 22px}.seals span{display:grid;place-items:center;width:34px;height:34px;border:1px solid #706047;border-radius:50%;font:12px Georgia;color:#b9a075}.seals span.active{color:#fff2c8;border-color:#e8bf70;box-shadow:0 0 18px #e8bf7020}.seals span.done{background:#bda36c;color:#241929}.seals span:last-child{border-radius:5px;font-size:20px}.seals i{height:1px;background:#605040;flex:1}h2{font:25px Georgia;margin:0 0 9px}.help{font-size:11px;color:#c3b4cb;line-height:1.6;min-height:70px;margin:0 0 13px}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #fae5af;outline-offset:3px}button:disabled{opacity:.5;cursor:default}.start{display:flex;width:100%;justify-content:space-between;padding:10px 13px;background:#d8b576;color:#25182e;border:0;border-radius:5px;font-size:12px;font-weight:650;margin-bottom:17px}.start[hidden]{display:none}.direction-heading{font-size:9px;letter-spacing:1px;color:#baa8c2;display:flex;justify-content:space-between;margin-bottom:9px}.direction-heading span{letter-spacing:0;color:#9e8ea8}.directions{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.direction{position:relative;min-height:65px;background:#221929;border:1px solid #5f4c64;border-radius:6px;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:4px;padding:7px 2px}.direction .arrow{font-size:21px;line-height:1}.direction .label{font-size:8px;letter-spacing:.25px}.direction kbd{position:absolute;right:5px;top:4px;font:8px system-ui;color:#b49dbf}.direction[aria-pressed=true]{border-color:#e0b872;background:#5d4238;color:#ffdf9d;box-shadow:inset 0 0 20px #dfb47612}.direction:hover{background:#453044}.readout{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;color:#ad9db7;margin-top:15px}.readout strong{font-weight:500;display:block;color:var(--gold);margin-top:4px;font-size:10px}.speed-track{height:2px;background:#46334b;margin-top:10px}.speed-track div{height:100%;width:0;background:var(--gold)}.tip{font-size:10px;line-height:1.5;color:#ac9bb5;margin:12px 0 0}.utility{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid #392b42;gap:8px}.utility>div{display:flex;gap:8px}.utility button{background:#201828;border:1px solid #493750;border-radius:5px;padding:9px 12px;font-size:11px;min-height:38px}.utility button[aria-pressed=true]{border-color:#d6af69;color:#edcc8b}kbd{font:9px system-ui;color:#bda9c7;margin-left:8px}footer{display:flex;justify-content:space-between;gap:10px;color:#aa94b0;font-size:9px;letter-spacing:1.2px;padding-top:17px}.study-note{font-size:9px;color:#8f7d99;margin:14px 0 0}.banner{position:absolute;bottom:46px;left:50%;transform:translateX(-50%);background:#22172eee;border:1px solid #c2a269;border-radius:7px;text-align:center;padding:14px 22px;width:max-content;max-width:90%;box-shadow:0 10px 40px #0008}.banner strong{display:block;font:25px Georgia;color:#f3d390}.banner span{display:block;font-size:11px;line-height:1.5;margin-top:6px;color:#dacbdc}.sr-only{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}@media(max-width:760px){main{padding:17px 14px}.brand{font-size:9px}.brand span{display:none}.candidate{font-size:7px;padding:6px 8px;letter-spacing:.5px}.title-row{padding:22px 0 19px}.eyebrow{font-size:8px;letter-spacing:1.8px}h1{font-size:43px;letter-spacing:-2px}.premise{font-size:11px}.serial{display:none}.mobile-break{display:block}.cabinet{grid-template-columns:1fr}.viewport{height:345px}.stage-top,.stage-bottom{left:12px;right:12px;letter-spacing:.5px;font-size:7px}.stage-top{top:13px}.stage-bottom{bottom:12px;font-size:6px}aside{border-left:0;border-top:1px solid #4f3a51;padding:16px}.seals{margin:10px 0 15px;max-width:220px}.seals span{height:28px;width:28px;font-size:10px}h2{font-size:23px}.help{min-height:0;font-size:11px;margin-bottom:13px}.start{margin-bottom:16px}.direction{min-height:62px}.direction .label{font-size:9px}.direction kbd{font-size:10px}.utility{flex-wrap:wrap;padding:12px 0}.utility button{font-size:10px;padding:9px}.tip{font-size:10px}footer{font-size:7px;letter-spacing:.7px}.study-note{line-height:1.6;font-size:8px}.banner strong{font-size:22px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* Keep the entire spatial view and all six suggestions together on phones. */
.stage-controls{display:none}
@media(min-width:761px){.viewport{height:584px;min-height:584px}}
@media(max-width:760px){.title-row{padding:17px 0 15px}.viewport{height:300px;position:sticky;top:0;z-index:2}.stage-controls{position:absolute;right:8px;bottom:29px;display:flex;gap:5px}.stage-controls button{width:44px;height:44px;background:#241b2dec;border:1px solid #69546d;border-radius:5px;font-size:18px}.stage-bottom span:last-child{display:none}aside{display:flex;flex-direction:column;padding:12px 16px}.instrument-label{display:none}.seals{order:0;margin:0 0 10px;width:210px}.direction-heading{order:1;margin-bottom:8px}.directions{order:2}.readout{order:3;margin-top:12px}.speed-track{order:4}.start{display:none}h2{order:5;margin-top:17px}.help{order:6;margin-bottom:0}.tip{order:7}.banner{bottom:80px}.direction{min-height:60px}.utility button{min-height:44px}}