:root{--bg: #000000;--surface: #0b0b0c;--surface-2: #151517;--line: rgba(255, 255, 255, .1);--line-strong: rgba(255, 255, 255, .22);--text: #f4f4f5;--muted: #8b8b92;--faint: #5c5c64;--good: #4ade80;--good-line: rgba(74, 222, 128, .5);--bad: #f87171;--bad-line: rgba(248, 113, 113, .42);--radius: 14px;--radius-sm: 8px;--font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;min-height:100dvh;background:var(--bg);color:var(--text);font-family:var(--font-display);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}a{color:inherit}.mono,.label{font-family:var(--font-mono)}.app{max-width:1240px;margin:0 auto;padding:0 32px 20px}.site-header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px 28px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line);margin-bottom:16px}.menu-toggle{display:none;width:38px;height:38px;align-items:center;justify-content:center;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:transparent;color:var(--text);cursor:pointer}.menu-toggle:hover{border-color:var(--text)}.mobile-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:50;display:flex;flex-direction:column;min-width:190px;padding:6px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-sm);box-shadow:0 20px 40px -12px #000000b3}.mobile-menu a,.mobile-menu button{padding:11px 12px;border:0;border-radius:6px;background:transparent;color:var(--text);font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-align:left;text-decoration:none;cursor:pointer}.mobile-menu a:hover,.mobile-menu button:hover{background:#ffffff0f}.brand{font-weight:700;font-size:21px;letter-spacing:-.01em;color:var(--text);text-decoration:none;white-space:nowrap}.site-nav{display:flex;gap:26px}.site-nav a{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--muted);text-decoration:none;padding-bottom:3px;border-bottom:1px solid transparent;transition:color .12s ease,border-color .12s ease}.site-nav a:hover,.site-nav a[aria-current=page]{color:var(--text);border-bottom-color:var(--text)}.header-cta{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--text);text-decoration:none;padding:9px 16px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:transparent;white-space:nowrap;cursor:pointer;transition:background .12s ease,border-color .12s ease}.header-cta:hover{background:#ffffff0f;border-color:var(--text)}.layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}.col-side{display:flex;flex-direction:column;gap:14px}.page-title{font-size:clamp(1.8rem,4vw,2.4rem);font-weight:700;line-height:1.05;letter-spacing:-.02em;margin:0}.page-sub{margin:5px 0 12px;color:var(--muted);font-size:.92rem}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px}.card-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line)}.player{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px}.waveform{height:80px;border:1px solid var(--line);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;gap:2px;padding:0 18px;overflow:hidden;transition:height .2s ease}.player.over .waveform{height:44px}.wf-bar{width:3px;border-radius:2px;background:#ffffff24;transition:background .09s linear}.wf-bar.on{background:#ffffffeb}.transport{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px}.transport-time{font-family:var(--font-mono);font-size:12px;color:var(--muted);min-width:34px}.transport-time.right{text-align:right}.transport-mid{display:flex;align-items:center;gap:10px}.play-btn{width:46px;height:46px;flex-shrink:0;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:transparent;color:var(--text);display:grid;place-items:center;cursor:pointer;transition:background .12s ease,border-color .12s ease}.play-btn:hover:not(:disabled){background:#ffffff0f;border-color:var(--text)}.play-btn:disabled{opacity:.4;cursor:not-allowed}.track{position:relative;height:6px;margin:12px 2px 4px;border-radius:999px;background:#ffffff14}.track-fill{position:absolute;inset:0 auto 0 0;border-radius:999px;background:#ffffffd9}.track-tick{position:absolute;top:-3px;width:1px;height:12px;background:#ffffff38;transform:translate(-.5px)}.track-tick.on{background:#ffffff80}.track-handle{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}.player-note{font-family:var(--font-mono);font-size:11px;color:var(--faint);margin-top:7px}.player-note.err{color:var(--text)}.guesses{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}.guess{display:flex;align-items:center;gap:12px;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);font-size:13.5px;color:var(--muted)}.guess-empty{min-height:26px;background:#ffffff04}.guesses.recap{gap:4px}.guesses.recap .guess{min-height:27px;font-size:12.5px}.guess-icon{font-family:var(--font-mono);font-size:12px;width:14px;text-align:center;flex-shrink:0}.guess-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.guess-correct{color:var(--text);font-weight:500;border-color:var(--good-line);background:#4ade8014;box-shadow:inset 3px 0 0 var(--good)}.guess-correct .guess-icon{color:var(--good)}.guess-skip .guess-text{color:var(--faint)}.controls{margin-top:12px}.combo{position:relative}.combo-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--faint);pointer-events:none}.combo-input{width:100%;height:46px;padding:0 14px 0 44px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text);font-family:var(--font-display);font-size:15px;outline:none;transition:border-color .12s ease}.combo-input::placeholder{color:var(--faint)}.combo-input:focus{border-color:var(--line-strong)}.combo-list{position:absolute;z-index:20;left:0;right:0;bottom:calc(100% + 8px);margin:0;padding:6px;list-style:none;background:var(--surface-2);border:1px solid var(--line-strong);border-radius:var(--radius-sm);box-shadow:0 24px 48px -16px #000c;max-height:300px;overflow-y:auto}.combo-opt{padding:10px 12px;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;gap:2px}.combo-opt.is-active{background:#ffffff12}.combo-opt-title{font-size:14px}.combo-opt-sub{font-family:var(--font-mono);font-size:11px;color:var(--muted)}.btn{height:44px;padding:0 18px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:transparent;color:var(--text);font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:background .12s ease,border-color .12s ease,opacity .12s ease}.btn:hover{background:#ffffff0f;border-color:var(--text)}.btn-skip{color:var(--muted)}.btn-primary{background:#fff;border-color:#fff;color:#000}.btn-primary:hover{background:#d8d8d8;border-color:#d8d8d8}.hint-line{margin:10px 0 0;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--muted)}.result{margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2)}.result-win{border-color:var(--good-line);background:#4ade800f;animation:winFlash .9s ease-out}@keyframes winFlash{0%{box-shadow:0 0 0 1px var(--good),0 0 30px #4ade8059}to{box-shadow:0 0 0 1px transparent,0 0 0 transparent}}.result-lose{border-color:var(--bad-line)}.result-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:16px;font-weight:700;margin-bottom:10px}.result-win .result-head>span:first-child{color:var(--good)}.result-lose .result-head>span:first-child{color:var(--bad)}.result-points{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;padding:4px 10px;border:1px solid var(--line-strong);border-radius:999px;white-space:nowrap}.result-win .result-points{border-color:var(--good-line);color:var(--good)}.result-points.is-zero{color:var(--faint);border-color:var(--line)}@media (prefers-reduced-motion: reduce){.result-win{animation:none}}.result-song{display:flex;gap:14px;align-items:center}.result-art{border-radius:6px;object-fit:cover;flex-shrink:0;filter:grayscale(1) contrast(1.05)}.result-title{font-size:16px;font-weight:500}.result-film,.result-singers{color:var(--muted);font-size:13px;margin-top:2px}.result-listen{margin:12px 0 0;font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;color:var(--faint)}.result-listen a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}.result-listen a:hover{color:var(--text);border-bottom-color:var(--text)}.result-total{margin-top:10px;font-family:var(--font-mono);font-size:12px;color:var(--muted)}.result-tip{margin:8px 0 0;font-size:12px;color:var(--muted)}.result-tip a{color:var(--text);text-decoration:underline;text-underline-offset:2px}.result-actions{display:flex;gap:10px;margin-top:14px}.score-banner{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);padding:12px;text-align:center;margin-bottom:10px}.score-banner-value{font-size:30px;font-weight:700;line-height:1;letter-spacing:-.02em}.score-banner-label{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:5px}.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}.stat{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);padding:13px 8px;text-align:center}.stat-value{font-size:1.85rem;font-weight:700;line-height:1;letter-spacing:-.02em}.stat-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:8px}.dist-title{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}.dist{display:flex;flex-direction:column;gap:6px}.dist-row{display:flex;align-items:center;gap:10px}.dist-key{font-family:var(--font-mono);font-size:11px;color:var(--faint);width:10px;text-align:center}.dist-bar{flex:1;display:flex;height:10px;border-radius:3px;background:#ffffff0d;overflow:hidden}.dist-fill{display:block;height:100%;min-width:18px;border-radius:3px;background:var(--text);transition:width .3s ease,background .2s ease}.dist-n{font-family:var(--font-mono);font-size:11px;width:16px;text-align:right;color:var(--faint)}.dist-row.has .dist-key{color:var(--muted)}.dist-row.has .dist-n{color:var(--text);font-weight:700}.dist-row.is-latest .dist-fill{background:var(--good)}.dist-row.is-latest .dist-key,.dist-row.is-latest .dist-n{color:var(--good)}.link-btn{margin-top:14px;background:none;border:none;padding:0;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--muted);text-decoration:underline;text-underline-offset:2px;cursor:pointer}.link-btn:hover{color:var(--text)}.site-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--faint)}.site-footer .foot-brand{color:var(--muted);letter-spacing:.14em;text-transform:uppercase}.foot-links{display:flex;gap:18px}.foot-links a,.foot-linkbtn{color:var(--muted);text-decoration:none}.foot-links a:hover,.foot-linkbtn:hover{color:var(--text)}.foot-linkbtn{background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;cursor:pointer}.linklike{background:none;border:0;padding:0;font:inherit;color:var(--text);text-decoration:underline;text-underline-offset:2px;cursor:pointer}.modal-overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:#0000008c;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);animation:modalFade .15s ease-out}.modal{position:relative;width:100%;max-width:360px;max-height:calc(100dvh - 40px);overflow-y:auto;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);padding:22px;outline:none;animation:modalPop .16s ease-out}.modal-close{position:absolute;top:12px;right:12px;width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--muted);font-size:12px;cursor:pointer}.modal-close:hover{color:var(--text);border-color:var(--text)}.modal h2{margin:0 30px 6px 0;font-size:18px;font-weight:700;letter-spacing:-.01em}.modal-sub{margin:0 0 16px;color:var(--muted);font-size:12.5px;line-height:1.6}.amt-chips{display:flex;gap:8px}.amt-chip{flex:1;padding:10px 0;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:transparent;color:var(--text);font-family:var(--font-mono);font-size:13px;cursor:pointer;transition:background .12s ease,border-color .12s ease}.amt-chip:hover{border-color:var(--text)}.amt-chip.active{background:#fff;border-color:#fff;color:#000}.amt-custom{display:flex;align-items:center;gap:8px;margin-top:10px;font-family:var(--font-mono);font-size:12px;color:var(--muted)}.amt-custom input{width:88px;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2);color:var(--text);font-family:var(--font-mono);font-size:13px;outline:none}.amt-custom input:focus{border-color:var(--line-strong)}.qr-box{width:200px;height:200px;margin:16px auto 0;padding:10px;background:#fff;border-radius:10px}.qr-box img{display:block;width:100%;height:100%;image-rendering:pixelated}.qr-cap{margin:8px 0 0;text-align:center;font-family:var(--font-mono);font-size:11px;color:var(--muted)}@keyframes modalFade{0%{opacity:0}}@keyframes modalPop{0%{opacity:0;transform:translateY(6px) scale(.98)}}@media (prefers-reduced-motion: reduce){.modal-overlay,.modal{animation:none}}@media (max-width: 900px){.layout{grid-template-columns:1fr}}@media (max-width: 600px){.site-nav,.header-cta{display:none}.menu-toggle{display:flex}}@media (max-width: 560px){.app{padding:0 16px 32px}.site-header{margin-bottom:20px}.site-footer{justify-content:flex-start}.result-actions{flex-direction:column}.result-actions .btn{width:100%}}