:root{color-scheme:dark;--bg: #0a0a0f;--surface: rgba(255, 255, 255, .035);--surface-strong: rgba(255, 255, 255, .07);--line: rgba(255, 255, 255, .09);--line-strong: rgba(255, 255, 255, .16);--text: #f4f4f7;--muted: #8e8ea3;--accent: #8b5cf6;--accent-2: #ec4899;--correct: #22c55e;--wrong: #f0526b;--radius: 14px;--ease: cubic-bezier(.32, .72, .28, 1);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;font-synthesis-weight:none;-webkit-font-smoothing:antialiased}body{margin:0;min-height:100vh;background:radial-gradient(60rem 40rem at 50% -12rem,rgba(139,92,246,.16),transparent 70%),radial-gradient(40rem 30rem at 88% 8%,rgba(236,72,153,.09),transparent 65%),var(--bg);color:var(--text)}main{max-width:30rem;margin:0 auto;padding:2.5rem 1.25rem 4rem}.masthead{display:flex;align-items:center;gap:.6rem;margin-bottom:2rem}.account{position:relative;margin-left:auto}.account-chip{display:flex;align-items:center;gap:.45rem;max-width:11rem;padding:.3rem .6rem .3rem .3rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font:inherit;font-size:.8rem;cursor:pointer;transition:border-color .15s var(--ease),color .15s var(--ease)}.account-chip:hover{border-color:var(--line-strong);color:var(--text)}.avatar{flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:linear-gradient(140deg,var(--accent),var(--accent-2));color:#fff;font-size:.72rem;font-weight:650}.account-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-menu{position:absolute;right:0;top:calc(100% + .4rem);z-index:10;min-width:13rem;padding:.3rem;border:1px solid var(--line-strong);border-radius:12px;background:#16161f;box-shadow:0 18px 44px -18px #000000e6}.account-head{padding:.55rem .6rem .6rem;border-bottom:1px solid var(--line);margin-bottom:.3rem}.account-head p{margin:0}.account-who{font-size:.9rem;font-weight:600;margin-top:.15rem!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-id{font-size:.72rem!important;margin-top:.1rem!important}.account-menu button{display:block;width:100%;text-align:left;padding:.5rem .6rem;border:none;border-radius:8px;background:none;color:var(--text);font:inherit;font-size:.85rem;cursor:pointer}.account-menu button:hover{background:#ffffff14}.account-menu button.danger:hover{background:#f0526b24;color:#ffb3c0}.mark{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:11px;color:#fff;background:linear-gradient(140deg,var(--accent),var(--accent-2));box-shadow:0 6px 20px -6px #8b5cf6b3}h1{margin:0;font-size:1.35rem;font-weight:650;letter-spacing:-.02em}.muted{color:var(--muted);font-size:.85rem;line-height:1.5}.footer{margin-top:2.5rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.78rem}.hero{padding:3rem 0 1rem;text-align:center}.hero h2{margin:0 0 .75rem;font-size:1.5rem;font-weight:620;letter-spacing:-.025em;line-height:1.25}.hero .muted{margin:0 auto 1.75rem;max-width:24rem}.spinner{display:block;width:1.6rem;height:1.6rem;margin:0 auto 1.25rem;border-radius:50%;border:2px solid rgba(255,255,255,.14);border-top-color:var(--accent);animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.button{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.7rem 1.1rem;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface-strong);color:var(--text);font:inherit;font-size:.9rem;font-weight:550;cursor:pointer;text-decoration:none;transition:background .15s var(--ease),border-color .15s var(--ease),transform .12s var(--ease)}.button:hover:not(:disabled){background:#ffffff1f;border-color:#ffffff3d}.button:active:not(:disabled){transform:translateY(1px)}.button:disabled{opacity:.38;cursor:default}.button.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));border-color:transparent;color:#fff;box-shadow:0 8px 22px -10px #8b5cf6e6}.button.primary:hover:not(:disabled){filter:brightness(1.08);background:linear-gradient(135deg,var(--accent),var(--accent-2))}:where(button,input,a):focus-visible{outline:2px solid var(--accent);outline-offset:2px}.track{position:relative;height:10px;border-radius:999px;background:#ffffff0f;border:1px solid var(--line);overflow:hidden;margin-bottom:.55rem}.track-unlocked{position:absolute;inset:0 auto 0 0;background:#ffffff24;transition:width .45s var(--ease)}.track-played{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 14px #8b5cf68c}.tick{position:absolute;top:0;bottom:0;width:1px;background:#ffffff38;transform:translate(-.5px)}.tick.reached{background:#ffffff6b}.track-labels{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums;margin-bottom:1.5rem}.track-now{color:var(--text);font-weight:550}.controls{display:flex;align-items:center;gap:1.1rem;margin-bottom:1.75rem}.play{flex:none;display:grid;place-items:center;width:3.5rem;height:3.5rem;padding:0;border:none;border-radius:50%;color:#fff;background:linear-gradient(140deg,var(--accent),var(--accent-2));box-shadow:0 10px 28px -10px #8b5cf6f2;cursor:pointer;transition:transform .14s var(--ease),filter .14s var(--ease)}.play:hover{filter:brightness(1.09);transform:scale(1.04)}.play:active{transform:scale(.97)}.play.is-loading{cursor:progress;filter:saturate(.5) brightness(.8)}.play-spinner{width:1.1rem;height:1.1rem;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite}.play.is-playing{animation:pulse 1.8s ease-out infinite}@keyframes pulse{0%{box-shadow:0 10px 28px -10px #8b5cf6f2,0 0 #8b5cf673}70%{box-shadow:0 10px 28px -10px #8b5cf6f2,0 0 0 14px #8b5cf600}to{box-shadow:0 10px 28px -10px #8b5cf6f2,0 0 #8b5cf600}}.volume{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0}.icon-button{background:none;border:none;color:var(--muted);font-size:1rem;line-height:1;padding:.3rem;border-radius:6px;cursor:pointer;transition:color .15s var(--ease)}.icon-button:hover{color:var(--text)}.volume input[type=range]{flex:1;min-width:0;height:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ffffff29;border-radius:999px;cursor:pointer}.volume input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;background:var(--text);border:none;transition:transform .12s var(--ease)}.volume input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.18)}.volume input[type=range]::-moz-range-thumb{width:13px;height:13px;border:none;border-radius:50%;background:var(--text)}.guesses{list-style:none;padding:0;margin:0 0 1.25rem;display:flex;flex-direction:column;gap:.4rem}.guess{display:flex;align-items:center;gap:.7rem;padding:.62rem .8rem;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:.86rem;min-height:1.25rem;animation:rise .28s var(--ease)}.guess-icon{flex:none;display:grid;place-items:center;width:1.3rem;height:1.3rem;border-radius:50%;font-size:.72rem;font-weight:600;background:#ffffff12;color:var(--muted)}.guess-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.guess-stage{flex:none;font-size:.72rem;color:#ffffff47;font-variant-numeric:tabular-nums}.guess.empty{border-style:dashed;border-color:#ffffff12;background:none;animation:none}.guess.wrong{border-color:#f0526b5c;background:#f0526b12}.guess.wrong .guess-icon{background:#f0526b29;color:var(--wrong)}.guess.skipped .guess-icon,.guess.skipped .guess-text{color:var(--muted)}.guess.correct{border-color:#22c55e73;background:#22c55e17}.guess.correct .guess-icon{background:#22c55e2e;color:var(--correct)}@keyframes rise{0%{opacity:0;transform:translateY(-3px)}}.guessbox{position:relative}.field{position:relative;display:flex;align-items:center}.field-icon{position:absolute;left:.75rem;display:grid;place-items:center;color:var(--muted);pointer-events:none}.guessbox input{width:100%;box-sizing:border-box;padding:.75rem 2.2rem .75rem 2.35rem;background:var(--surface-strong);border:1px solid var(--line-strong);border-radius:10px;color:var(--text);font:inherit;font-size:.9rem;transition:border-color .15s var(--ease),background .15s var(--ease)}.guessbox input::placeholder{color:var(--muted)}.guessbox input:focus{outline:none;border-color:var(--accent);background:#ffffff1a}.field-clear{position:absolute;right:.55rem;background:none;border:none;color:var(--muted);font-size:.8rem;padding:.3rem;cursor:pointer;border-radius:6px}.field-clear:hover{color:var(--text)}.options{list-style:none;margin:.4rem 0 0;padding:.25rem;border:1px solid var(--line-strong);border-radius:10px;background:#16161f;box-shadow:0 18px 40px -18px #000000e6;max-height:13rem;overflow-y:auto}.options button{display:block;width:100%;text-align:left;padding:.55rem .6rem;background:none;border:none;border-radius:7px;color:var(--text);font:inherit;font-size:.85rem;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.options button:hover{background:#ffffff14}.actions{display:flex;gap:.55rem;margin-top:.75rem}.actions .button{flex:1}.notice{margin:.7rem 0 0;padding:.5rem .7rem;border:1px solid rgba(240,82,107,.35);border-radius:8px;background:#f0526b17;color:#ffb3c0;font-size:.8rem;text-align:center}.result{margin-top:.5rem;padding:1.35rem 1.1rem;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);text-align:center;animation:rise .35s var(--ease)}.result.won{border-color:#22c55e66;background:linear-gradient(180deg,rgba(34,197,94,.1),transparent 65%),var(--surface)}.result.lost{border-color:#f0526b52;background:linear-gradient(180deg,rgba(240,82,107,.08),transparent 65%),var(--surface)}.result-title{margin:0 0 .9rem;font-size:.76rem;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}.result.won .result-title{color:var(--correct)}.result-artist{margin:0;font-size:.88rem;color:var(--muted)}.result-song{margin:.15rem 0 .9rem;font-size:1.15rem;font-weight:620;letter-spacing:-.015em;line-height:1.3}.pill{display:inline-block;padding:.28rem .7rem;margin-bottom:1.1rem;border-radius:999px;border:1px solid var(--line-strong);background:#ffffff0d;font-size:.72rem;color:var(--muted)}.pill.own{border-color:#8b5cf66b;background:#8b5cf624;color:#c9b6ff}.result .button{display:block;width:100%}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}