:root{--ink: #e8e6f0;--muted: #8b88a8;--magenta: #ff8552;--cyan: #21e6ff;--amber: #ff9d4d;--orange: #ff8552;color-scheme:dark}*{box-sizing:border-box}.frame{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:100;box-shadow:inset 0 0 90px #ff85526b,inset 0 0 30px #ff85524d}html,body,#root{margin:0;height:100%;width:100%;background:#07060d;overflow:hidden;font-family:Space Grotesk,system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}canvas{display:block;touch-action:none}.hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10;-webkit-user-select:none;user-select:none}.hud .title{position:absolute;top:28px;left:32px;line-height:1.1}.hud .title h1{margin:0;font-size:22px;font-weight:600;letter-spacing:.02em;text-shadow:0 0 18px rgba(255,133,82,.45)}.hud .title .sub{margin-top:4px;font-family:JetBrains Mono,monospace;font-size:12px;color:var(--muted);letter-spacing:.04em}.hud .hint{position:absolute;bottom:26px;left:50%;transform:translate(-50%);font-family:JetBrains Mono,monospace;font-size:12.5px;color:var(--muted);background:#0c0a1673;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.06);padding:8px 16px;border-radius:999px;white-space:nowrap}.hud .hint b{color:var(--cyan);font-weight:500}@media (max-width: 768px){.hud .hint{white-space:normal;max-width:calc(100vw - 24px);text-align:center;font-size:11px;line-height:1.5;bottom:14px;padding:8px 14px;border-radius:16px}}.controls{position:absolute;top:26px;right:28px;display:flex;flex-direction:column;align-items:stretch;gap:10px;width:220px;pointer-events:auto}.controls .player{display:flex;flex-direction:column;gap:10px;padding:12px 14px;background:#0e0b188c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.07);border-radius:14px}.now-playing{display:flex;flex-direction:column;gap:2px;font-family:JetBrains Mono,monospace;line-height:1.25}.now-playing .np-label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--magenta)}.now-playing .np-track{font-family:Space Grotesk,sans-serif;font-size:14px;font-weight:600;color:var(--ink)}.now-playing .np-artist{font-size:11px;color:var(--muted)}.transport{display:flex;gap:8px}.transport button{flex:0 0 auto;padding:7px 11px}.transport button.play{flex:1}.vol{display:flex;align-items:center;gap:9px;font-family:JetBrains Mono,monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.vol span{flex:0 0 34px}.vol input[type=range]{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:3px;border-radius:3px;background:#ffffff24;cursor:pointer}.vol input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px #21e6ff99}.vol input[type=range]::-moz-range-thumb{width:12px;height:12px;border:none;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px #21e6ff99}.player.rain .rain-toggle{width:100%}.player.rain .rain-toggle.on{color:var(--cyan);border-color:#21e6ff80;box-shadow:0 0 16px #21e6ff33}.controls button{pointer-events:auto;cursor:pointer;font-family:JetBrains Mono,monospace;font-size:12px;color:var(--ink);background:#120f1e99;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:9px 13px;transition:border-color .2s,color .2s,box-shadow .2s}.controls button:hover{border-color:#21e6ff80;box-shadow:0 0 16px #21e6ff2e}.controls button.on{color:var(--magenta);border-color:#ff855280;box-shadow:0 0 16px #ff855238}.loader{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;gap:14px;text-align:center;background:#07060d;z-index:50}.loader .bar{width:220px;height:3px;border-radius:3px;background:#ffffff14;overflow:hidden}.loader .bar span{display:block;height:100%;background:linear-gradient(90deg,var(--magenta),var(--cyan));box-shadow:0 0 12px var(--cyan);transition:width .3s ease}.loader .pct{font-family:JetBrains Mono,monospace;font-size:12px;color:var(--muted)}.loader .big{font-size:15px;letter-spacing:.06em;color:var(--ink)}