:root{--ink:#efe4cf;--ink-dim:#efe4cf94;--ink-faint:#efe4cf47;--amber:#f0a64a;--ember:#c8502c;--panel:#100c09d1;--line:#efe4cf24;--serif:"Didot", "Bodoni 72", "Playfair Display", Georgia, "Times New Roman", serif;--mono:ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;--sans:"Avenir Next", "Futura", "Helvetica Neue", Arial, sans-serif}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;background:#050403;margin:0;overflow:hidden}#scene{touch-action:none;outline:none;width:100%;height:100%;display:block;position:fixed;inset:0}kbd{border:1px solid var(--ink-faint);min-width:1.7em;font:500 .72rem var(--mono);text-align:center;color:var(--ink);background:#efe4cf0d;border-bottom-width:2px;border-radius:4px;margin-right:.3em;padding:.18em .5em;display:inline-block}#hud{pointer-events:none;font:500 .72rem var(--mono);letter-spacing:.08em;text-transform:uppercase;transition:opacity .6s;position:fixed;inset:0}#hud.hidden{opacity:0}#crosshair{background:var(--ink);opacity:0;mix-blend-mode:difference;border-radius:50%;width:5px;height:5px;margin:-2.5px;transition:opacity .3s;position:absolute;top:50%;left:50%}#crosshair.on{opacity:.6}#hint{text-align:center;max-width:min(90vw,44rem);color:var(--ink);border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;white-space:nowrap;background:#0a070580;border-radius:999px;padding:.6em 1.1em;transition:opacity .4s;position:absolute;bottom:9.5rem;left:50%;transform:translate(-50%)}#hint.on{opacity:1}#hint b{color:var(--amber);font-weight:600}#tooltip{background:var(--panel);border:1px solid var(--line);color:var(--ink);white-space:nowrap;opacity:0;border-radius:6px;padding:.4em .7em;transition:opacity .15s;position:absolute;transform:translate(14px,14px)}#tooltip.on{opacity:1}#nowplaying{text-transform:none;letter-spacing:0;width:min(22rem,60vw);position:absolute;bottom:2rem;left:2.2rem}.np-source{font:600 .62rem var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin-bottom:.45rem}.np-title{font:italic 500 1.5rem/1.15 var(--serif);color:var(--ink);text-shadow:0 1px 12px #000c}.np-artist{font:500 .78rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);margin-top:.25rem}.np-bar,.vol-bar{background:var(--ink-faint);height:2px;margin-top:.8rem;position:relative}.np-bar i,.vol-bar i{background:var(--amber);width:0;position:absolute;inset:0 auto 0 0}.np-time{font:500 .66rem var(--mono);color:var(--ink-dim);justify-content:space-between;margin-top:.35rem;display:flex}#volume{width:9rem;color:var(--ink-dim);opacity:0;transition:opacity .5s;position:absolute;bottom:2rem;right:2.2rem}#volume.on{opacity:1}#keys{color:var(--ink-dim);gap:1.2rem;display:flex;position:absolute;top:1.6rem;right:2.2rem}#keys span{white-space:nowrap}#spotify-chip{pointer-events:auto;border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink-dim);font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;background:#0a070580;border-radius:999px;padding:.5em .9em .5em .75em;transition:color .2s,border-color .2s;position:absolute;top:1.4rem;left:2.2rem}#spotify-chip:hover{color:var(--ink);border-color:var(--ink-faint)}#spotify-chip:before{content:"";background:var(--ink-faint);vertical-align:1px;border-radius:50%;width:7px;height:7px;margin-right:.6em;display:inline-block}#spotify-chip[data-state=ready]:before,#spotify-chip[data-state=remote]:before{background:#1db954;box-shadow:0 0 8px #1db954}#spotify-chip[data-state=connecting]:before{background:var(--amber)}#spotify-chip[data-state=error]:before{background:var(--ember)}#toasts{flex-direction:column;align-items:center;gap:.5rem;display:flex;position:absolute;top:4.5rem;left:50%;transform:translate(-50%)}.toast{background:var(--panel);border:1px solid var(--line);color:var(--ink);text-transform:none;letter-spacing:.02em;font:500 .8rem var(--sans);border-radius:8px;padding:.6em 1em;animation:5s forwards toast}@keyframes toast{0%{opacity:0;transform:translateY(-6px)}6%,88%{opacity:1;transform:none}to{opacity:0}}#search,#spotify-panel{background:radial-gradient(at 50% 30%,#05040359,#050403b8);justify-content:center;align-items:flex-start;padding-top:16vh;animation:.18s ease-out fade;display:flex;position:fixed;inset:0}#search[hidden],#spotify-panel[hidden],#nowplaying[hidden],#volume[hidden],#intro[hidden]{display:none}@keyframes fade{0%{opacity:0}}.search-card,.panel-card{background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(18px)saturate(1.2);backdrop-filter:blur(18px)saturate(1.2);border-radius:14px;width:min(38rem,92vw);overflow:hidden;box-shadow:0 30px 80px #0009}.search-row{border-bottom:1px solid var(--line);align-items:center;gap:.8rem;padding:1.05rem 1.3rem;display:flex}.search-icon{color:var(--amber);font-size:1.5rem;line-height:1}#search-input{min-width:0;color:var(--ink);font:italic 500 1.55rem var(--serif);caret-color:var(--amber);background:0 0;border:0;outline:0;flex:1}#search-input::placeholder{color:var(--ink-faint)}.search-src{font:600 .6rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);white-space:nowrap}#results{max-height:46vh;margin:0;padding:.4rem;list-style:none;overflow-y:auto}#results li{cursor:pointer;border-radius:9px;grid-template-columns:44px 1fr auto;align-items:center;gap:.9rem;padding:.5rem .7rem;display:grid}#results li.sel{background:#f0a64a21}#results li .thumb{object-fit:cover;background:#1a1410;border-radius:3px;width:44px;height:44px;box-shadow:0 2px 8px #00000080}#results li .t{font:500 .98rem var(--sans);color:var(--ink);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#results li .a{font:500 .74rem var(--sans);letter-spacing:.06em;color:var(--ink-dim);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#results li .d{font:500 .7rem var(--mono);color:var(--ink-dim)}#results .empty{color:var(--ink-dim);font:italic 1rem var(--serif);cursor:default;padding:1.2rem;display:block}.search-foot{border-top:1px solid var(--line);font:500 .66rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);padding:.65rem 1.3rem}.search-foot kbd{margin-left:.9em}.search-foot kbd:first-child{margin-left:0}.panel-card{padding:1.6rem 1.8rem 1.4rem}.panel-card h2{font:italic 500 1.7rem var(--serif);margin:0 0 .3rem}.panel-status{font:500 .8rem var(--sans);color:var(--amber);min-height:1.1em;margin:0 0 1rem}.panel-card ol{font:400 .88rem/1.55 var(--sans);color:var(--ink-dim);margin:0 0 1.1rem;padding-left:1.2rem}.panel-card li{margin-bottom:.45rem}.panel-card a{color:var(--ink)}.panel-card b{color:var(--ink);font-weight:600}.panel-card code{font:500 .8rem var(--mono);color:var(--amber);-webkit-user-select:all;user-select:all}#sp-client{border:1px solid var(--line);width:100%;color:var(--ink);font:500 .85rem var(--mono);background:#00000059;border-radius:8px;outline:none;padding:.7rem .9rem}#sp-client:focus{border-color:var(--amber)}.panel-actions{justify-content:flex-end;gap:.6rem;margin-top:1.1rem;display:flex}button{font:600 .72rem var(--mono);letter-spacing:.12em;text-transform:uppercase}.panel-actions button,#enter{border:1px solid var(--amber);background:var(--amber);color:#1a1006;cursor:pointer;border-radius:999px;padding:.8em 1.4em;transition:filter .2s,transform .2s}.panel-actions button:hover,#enter:not(:disabled):hover{filter:brightness(1.12)}.panel-actions button.ghost{border-color:var(--line);color:var(--ink-dim);background:0 0}button:focus-visible,#results li:focus-visible{outline:2px solid var(--amber);outline-offset:2px}#intro{background:radial-gradient(at 50% 45%,#0504038c,#050403f0 75%);place-items:center;transition:opacity 1.1s;display:grid;position:fixed;inset:0}#intro.leaving{opacity:0;pointer-events:none}.intro-inner{text-align:center;padding:2rem}.intro-kicker{font:600 .68rem var(--mono);letter-spacing:.34em;color:var(--amber)}#intro h1{font:italic 500 clamp(2.8rem, 8vw, 5.6rem) / 1 var(--serif);letter-spacing:-.01em;color:var(--ink);text-shadow:0 2px 40px #f0a64a40;margin:1.1rem 0 .6rem}.intro-lede{font:400 1rem var(--sans);letter-spacing:.04em;color:var(--ink-dim);margin:0 0 2.2rem}#enter{padding:1em 2.2em;font-size:.78rem}#enter:disabled{border-color:var(--line);color:var(--ink-dim);cursor:default;background:0 0}.intro-keys{font:500 .7rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);flex-wrap:wrap;justify-content:center;gap:.9rem 1.8rem;margin-top:2.6rem;display:flex}.intro-keys span{margin-left:.4em}.intro-note{max-width:34rem;font:400 .8rem/1.5 var(--sans);color:var(--ink-faint);margin:1.8rem auto 0}.intro-credit{max-width:34rem;font:400 .72rem/1.5 var(--sans);color:var(--ink-faint);margin:.8rem auto 0}.intro-credit a{color:var(--ink-dim);text-underline-offset:.2em;text-decoration:underline;transition:color .25s}.intro-credit a:hover,.intro-credit a:focus-visible{color:var(--amber);outline:none}body.deck #scene{cursor:grab}body.deck.grabbing #scene{cursor:grabbing}body.deck.pointing #scene{cursor:pointer}@media (max-width:720px){#keys{display:none}#hint{white-space:normal;border-radius:14px}}@media (prefers-reduced-motion:reduce){#intro,#hud,.toast{transition:none;animation-duration:10ms}}