:root{--ink: #f2f0ea;--muted: #a9a49a;--faint: #6f6b63;--panel: rgba(12, 12, 16, .78);--edge: rgba(242, 240, 234, .14);--edge-strong: rgba(242, 240, 234, .5)}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#0b0d12;color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}#stage{display:block;width:100vw;height:100vh}.overlay{position:fixed;inset:0;display:grid;place-items:center;padding:20px;background:radial-gradient(120% 90% at 50% 0%,#0000004d,#000000e0);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:opacity .4s ease}.overlay.hidden{opacity:0;pointer-events:none}.card{display:flex;flex-direction:column;gap:18px;width:min(880px,100%);max-height:calc(100dvh - 40px);padding:clamp(20px,3vw,34px);text-align:center;background:var(--panel);border:1px solid var(--edge);border-radius:16px}.masthead{flex:none}.kicker{margin:0 0 4px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--faint)}h1{margin:0;font-size:clamp(30px,5vw,46px);font-weight:600;line-height:1.05}.songs{flex:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.songs:empty{display:none}.songs button{padding:7px 16px;font:inherit;font-size:13px;color:var(--muted);background:transparent;border:1px solid var(--edge);border-radius:999px;cursor:pointer;transition:color .16s ease,border-color .16s ease,background .16s ease}.songs button:hover{color:var(--ink);background:#f2f0ea0f}.songs button[aria-current=true]{color:var(--ink);border-color:var(--edge-strong);background:#f2f0ea1a}.modes{flex:1 1 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;min-height:0;overflow-y:auto}.mode{flex:1 1 150px;max-width:220px;display:flex;flex-direction:column;gap:10px;padding:14px 14px 12px;font:inherit;color:var(--ink);background:transparent;border:1px solid var(--edge);border-radius:13px;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .18s ease}.mode:hover{background:#f2f0ea0f;transform:translateY(-2px)}.mode[aria-checked=true]{border-color:var(--edge-strong);background:#f2f0ea1a}.mode{position:relative}.mode .shot{position:absolute;top:14px;left:14px;width:calc(100% - 28px);aspect-ratio:120 / 76;object-fit:cover;border-radius:8px}.mode .what{font-size:15px;font-weight:600;letter-spacing:.01em}.thumb{width:100%;height:auto;aspect-ratio:120 / 76;border-radius:8px;background:#00000059}.thumb .on{fill:var(--ink);opacity:.9}.thumb .off{fill:none;stroke:var(--ink);stroke-width:1.2;opacity:.22}.thumb .hidden-dot{fill:var(--ink);opacity:.05}.thumb .walk{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-dasharray:2 4;opacity:.45}.thumb .route{fill:none;stroke:var(--ink);stroke-width:1.3;opacity:.3}.thumb .walker{fill:var(--ink);opacity:.95}.thumb .steps rect{fill:var(--ink);opacity:.28;animation:flash 1.2s ease-in-out infinite;animation-delay:calc(var(--i) * .4s)}.thumb .ticks path{fill:none;stroke:var(--ink);stroke-width:1.4;opacity:.3;animation:flash 1.2s ease-in-out infinite;animation-delay:calc(var(--i) * .3s)}.thumb .hop{fill:none;stroke:var(--ink);stroke-width:1.1;stroke-dasharray:2 4;opacity:.3}.thumb .hopper{fill:var(--ink);opacity:.95}.thumb .ghost{fill:var(--ink);opacity:.34}.thumb .ghost.fainter{opacity:.16}.thumb .ping{fill:none;stroke:var(--ink);stroke-width:1.4;transform-origin:74px 38px;animation:ping 3s linear infinite;animation-delay:var(--d)}.mode[data-mode=discover] .thumb .off{animation:wake 4s ease-in-out infinite;animation-delay:calc(var(--i) * .5s)}@keyframes wake{0%,55%{opacity:.22;fill:none}70%,88%{opacity:.9;fill:var(--ink)}to{opacity:.22;fill:none}}@keyframes flash{0%,40%{opacity:.25}55%{opacity:.95}to{opacity:.25}}@keyframes ping{0%{transform:scale(1);opacity:.55}to{transform:scale(4.6);opacity:0}}@media(prefers-reduced-motion:reduce){.thumb .ping,.mode[data-mode=discover] .thumb .off,.thumb .steps rect,.thumb .ticks path{animation:none}.thumb .walker,.thumb .ghost,.thumb .hopper{display:none}}#enter{flex:none;width:100%;padding:14px 20px;font:inherit;font-weight:600;color:#0b0d12;background:var(--ink);border:0;border-radius:10px;cursor:pointer;transition:transform .12s ease,opacity .2s ease}#enter:hover:not(:disabled){transform:translateY(-1px)}#enter:disabled{opacity:.4;cursor:progress}.controls{flex:none;margin:0;font-size:11px;letter-spacing:.02em;color:var(--faint)}.hud{position:fixed;left:20px;bottom:20px;min-width:250px;padding:14px 16px;border:1px solid var(--edge);border-radius:11px;background:var(--panel);font-size:13px;transition:opacity .3s ease}.hud.hidden{opacity:0;pointer-events:none}.stem{display:grid;grid-template-columns:10px 62px 1fr;align-items:center;gap:9px;padding:3px 0;opacity:.6;transition:opacity .2s ease}.stem.strong{opacity:1}.stem.held .name{color:var(--ink);font-weight:600}.stem.held .bar{box-shadow:0 0 0 1px #f2f0ea59}.dot{width:9px;height:9px;border-radius:50%}.name{color:var(--muted)}.bar{height:4px;border-radius:2px;background:#ffffff1c;overflow:hidden}.bar i{display:block;height:100%;transition:width .08s linear}#meta{margin-top:10px;padding-top:9px;border-top:1px solid var(--edge);font-size:11px;letter-spacing:.04em;color:var(--faint)}.pause{width:100%;margin-top:11px;padding:7px 10px;font:inherit;font-size:12px;color:var(--muted);background:transparent;border:1px solid var(--edge);border-radius:7px;cursor:pointer}.pause:hover{color:var(--ink);background:#f2f0ea12}@media(max-height:580px){.card{gap:12px;padding:16px}h1{font-size:clamp(22px,4vw,30px)}.mode{flex:1 1 120px;gap:6px;padding:10px 10px 8px}.mode .what{font-size:13px}.mode .shot{top:10px;left:10px;width:calc(100% - 20px)}#enter{padding:11px 20px}.controls{display:none}}@media(max-width:720px){.mode{flex:1 1 100%;max-width:none;flex-direction:row;align-items:center;text-align:left}.thumb{width:104px;flex:none}.mode .shot{position:static;width:104px;flex:none}.controls{display:none}}.thumb .tabletop{fill:#78a0ff24;stroke:#cfe0ff;stroke-width:1.2}.mode[data-mode=discover] .thumb .falling{animation:fall 4s ease-in infinite}@keyframes fall{0%,60%{transform:translateY(-60px);opacity:0}61%{opacity:1}74%{transform:translateY(0)}78%{transform:translateY(-3px)}82%,92%{transform:translateY(0);opacity:1}to{transform:translateY(0);opacity:0}}.thumb .wire{fill:none;stroke:var(--ink);stroke-width:1.3;opacity:.55}.thumb .puck{stroke:none}.thumb .puck.p1{fill:#9fd3ff}.thumb .puck.p2{fill:#ffd59a}.thumb .puck.p3{fill:#a8f0c6}.thumb .packet{fill:#fff}@media(prefers-reduced-motion:reduce){.mode[data-mode=discover] .thumb .falling{animation:none}.thumb .packet{display:none}}.thumb .word{stroke:none}.thumb .word.w1{fill:#ff9aa2}.thumb .word.w2{fill:#ffd59a}.thumb .word.w3{fill:#a8d8ff}@media(prefers-reduced-motion:reduce){.thumb .word{display:none}}.tutorial{position:fixed;left:50%;bottom:28px;transform:translate(-50%);width:min(560px,calc(100vw - 32px));padding:14px 20px;text-align:center;background:var(--panel);border:1px solid var(--edge-strong);border-radius:14px;transition:opacity .3s ease,border-color .3s ease;pointer-events:none;z-index:5}.tutorial.hidden,.tutorial.away{opacity:0}.tutorial.arrive:not(.hidden):not(.away){animation:step-in .45s ease both}.tutorial.ticked{border-color:#a8f0c6}@keyframes step-in{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%)}}.tutorial-dots{display:flex;justify-content:center;gap:6px;margin-bottom:10px}.tutorial-dots i{width:6px;height:6px;border-radius:50%;background:#f2f0ea2e}.tutorial-dots i.done{background:#f2f0ea8c}.tutorial-dots i.now{background:var(--ink);transform:scale(1.3)}.tutorial-text{margin:0 0 10px;font-size:17px;line-height:1.35;color:var(--ink)}.tutorial-row{display:flex;align-items:center;justify-content:center;gap:14px;font-size:12px;color:var(--faint)}.tutorial-keys{display:inline-flex;gap:5px}.tutorial-count{color:var(--muted);font-variant-numeric:tabular-nums}.tutorial-skip{margin-left:auto}.tutorial-count:empty,.tutorial-keys:empty{display:none}kbd{display:inline-block;min-width:26px;padding:3px 7px;font:600 12px ui-sans-serif,system-ui,sans-serif;color:var(--ink);background:#f2f0ea14;border:1px solid var(--edge-strong);border-bottom-width:2px;border-radius:6px}@media(prefers-reduced-motion:reduce){.tutorial.arrive{animation:none}}body.cinematic #hud,body.cinematic #missions,body.cinematic #tutorial{display:none}.missions{position:fixed;top:20px;right:20px;width:min(330px,calc(100vw - 32px));padding:12px 16px 13px;background:var(--panel);border:1px solid var(--edge-strong);border-radius:14px;transition:opacity .3s ease,border-color .3s ease;pointer-events:none}.missions.hidden{opacity:0}.missions.arrive:not(.hidden){animation:mission-in .45s ease both}.missions.learned{border-color:#ffd86b}@keyframes mission-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.missions-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}.missions-stars{display:inline-flex;align-items:center;gap:2px}.missions-stars i{font-style:normal;font-size:13px;color:#f2f0ea33}.missions-stars i.got{color:#ffd86b}.missions-stars i.new{animation:star-pop .6s ease}.missions-stars span{margin-left:6px;color:var(--muted);letter-spacing:0;font-variant-numeric:tabular-nums}@keyframes star-pop{0%{transform:scale(1)}40%{transform:scale(1.9)}to{transform:scale(1)}}.missions-text{margin:0 0 8px;font-size:15px;line-height:1.35;color:var(--ink)}.missions.learned .missions-text{color:#ffe9a8;font-style:italic;margin-bottom:0}.missions-keys{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--faint)}.missions-keys:empty{display:none}.missions-skip{margin-left:auto}@media(prefers-reduced-motion:reduce){.missions.arrive,.missions-stars i{animation:none!important}}.make{flex:none;display:flex;flex-direction:column;align-items:center;gap:10px}.make[hidden]{display:none}.make-button{padding:7px 16px;font:inherit;font-size:13px;color:var(--ink);background:#ffd86b14;border:1px dashed rgba(255,216,107,.6);border-radius:999px;cursor:pointer}.make-button:hover{background:#ffd86b29}.make-button:disabled{opacity:.5;cursor:default}.make-progress{width:min(420px,100%);text-align:center}.make-progress[hidden]{display:none}.make-step{margin:0 0 6px;font-size:13px;color:var(--muted)}.make-bar{height:4px;border-radius:2px;background:#f2f0ea1f;overflow:hidden}.make-bar i{display:block;height:100%;width:0;background:#ffd86b;transition:width .6s ease}