:root{--bg:#d7ddd9;--surface:#f4f6f0;--surface-2:#dfe5e1;--border:#8d9a95;--text:#172025;--muted:#4d5a60;--accent:#b45f06;--accent-hover:#98500a;--on-accent:#fff8ea;--accent-text:#7d4306;--ok:#0f7a42;--ok-bg:#0f7a4221;--bad:#b42318;--bad-bg:#b423181f;--focus:#005f73;--wave:#67757a;--shadow:0 18px 42px #1c25272e, 0 3px 8px #1c25271f, inset 0 1px 0 #ffffffb8;--radius:8px;--radius-sm:6px;--maxw:720px}[data-theme=dark]{--bg:#121719;--surface:#252d31;--surface-2:#161d20;--border:#536269;--text:#f5f7ee;--muted:#b5c0bc;--accent:#f6b73c;--accent-hover:#ffd166;--on-accent:#181104;--accent-text:#ffd166;--ok:#53d769;--ok-bg:#53d76924;--bad:#ff756b;--bad-bg:#ff756b21;--focus:#2dd4bf;--wave:#72c9b8;--shadow:0 20px 48px #00000080, 0 4px 12px #0000006b, inset 0 1px 0 #ffffff14}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#121719;--surface:#252d31;--surface-2:#161d20;--border:#536269;--text:#f5f7ee;--muted:#b5c0bc;--accent:#f6b73c;--accent-hover:#ffd166;--on-accent:#181104;--accent-text:#ffd166;--ok:#53d769;--ok-bg:#53d76924;--bad:#ff756b;--bad-bg:#ff756b21;--focus:#2dd4bf;--wave:#72c9b8;--shadow:0 20px 48px #00000080, 0 4px 12px #0000006b, inset 0 1px 0 #ffffff14}}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:linear-gradient(180deg, #ffffff0f, transparent 180px), var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.muted{color:var(--muted)}.error{color:var(--bad)}.center{text-align:center}:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}:focus:not(:focus-visible){outline:none}.skip-link{background:var(--accent);color:var(--on-accent);z-index:50;border-radius:8px;padding:10px 14px;transition:top .15s;position:absolute;top:-48px;left:12px}.skip-link:focus{top:12px}.app{max-width:var(--maxw);margin:0 auto;padding:20px 18px 64px}.site-header{justify-content:space-between;align-items:center;gap:12px;padding:6px 0 22px;display:flex}.brand{flex-direction:column;gap:2px;display:flex}.wordmark{letter-spacing:.04em;color:var(--text);margin:0;font-size:clamp(28px,6vw,44px);font-weight:800;line-height:1}.wordmark-cut{color:var(--accent-text);margin:0 .02em;display:inline-block;transform:translateY(-.04em)}@supports ((-webkit-background-clip:text) or (background-clip:text)){.wordmark{background:linear-gradient(90deg,#e40303 0 14%,#ff8c00 14% 28%,#ffed00 28% 42%,#008026 42% 56%,#2448ff 56% 70%,#732982 70% 84%,#ff7eb6 84% 100%);color:#0000;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.wordmark-cut{color:var(--text);-webkit-text-fill-color:var(--text);background:0 0}}@media (forced-colors:active){.wordmark{color:canvastext;-webkit-text-fill-color:CanvasText;background:0 0}.wordmark-cut{color:canvastext;-webkit-text-fill-color:CanvasText}}.brand-sub{color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-size:12px}.header-actions{align-items:center;gap:6px;display:flex}.tagline{color:var(--muted);max-width:52ch;margin:0 0 22px}.btn{min-height:44px;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;justify-content:center;align-items:center;gap:8px;padding:10px 16px;font-family:inherit;font-size:15px;font-weight:700;transition:transform 80ms,box-shadow 80ms,background .15s,border-color .15s;display:inline-flex;box-shadow:inset 0 1px #ffffff2e,0 3px #00000038}.btn:hover{border-color:var(--accent)}.btn:active{transform:translateY(2px);box-shadow:inset 0 1px #ffffff1f,0 1px #0000003d}.btn svg{flex:none;font-size:18px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:disabled:hover{border-color:var(--border)}.btn--primary{background:var(--accent);color:var(--on-accent);border-color:#0003}.btn--primary:hover{background:var(--accent-hover);border-color:#0000}.btn--ghost{background:var(--surface-2);border-color:var(--border);color:var(--muted)}.btn--ghost:hover{color:var(--text);background:var(--surface);border-color:var(--accent)}.btn--block{width:100%}.link{color:var(--accent-text);cursor:pointer;font:inherit;background:0 0;border:none;border-radius:6px;padding:6px}.link:hover{text-decoration:underline}.link:disabled{opacity:.5;cursor:not-allowed}.link:disabled:hover{text-decoration:none}.icon-btn{width:42px;height:42px;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;place-items:center;font-size:20px;display:inline-grid;box-shadow:inset 0 1px #ffffff24}.icon-btn:hover{color:var(--text);background:var(--surface-2)}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}.panel:before{content:"";background:var(--surface-2);border:1px solid var(--border);border-radius:999px;height:4px;margin:-10px 0 14px;display:block}.bar{justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px;display:flex}.bar-title{letter-spacing:.02em;font-weight:700}.bar-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px;display:flex}.now-playing{align-items:center;gap:12px;margin-bottom:18px;display:flex}.np-art{background:var(--surface-2);border-radius:8px;flex:none;width:52px;height:52px}.np-title{font-size:18px;font-weight:700}.np-artist{color:var(--muted);font-size:14px}.np-meta{color:var(--muted);text-align:right;margin-left:auto;font-size:13px}.guesses{align-items:center;gap:10px;margin-bottom:16px;display:flex}.pips{gap:6px;display:flex}.pip{background:var(--surface-2);border:1px solid var(--border);border-radius:99px;width:22px;height:8px;box-shadow:inset 0 1px 2px #00000059}.pip--used{background:var(--accent);border-color:#0003;box-shadow:0 0 10px #f6b73c66}.pip--lost{background:var(--bad);border-color:#0000}.guesses-text{color:var(--muted);font-size:13px}.mixer-panel{max-width:980px;margin-inline:auto}.mixer-topbar{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px;display:flex}.board-kicker{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-size:12px;font-weight:800}.mixer-title{margin:2px 0 0;font-size:20px;line-height:1.15}.board-meters{align-items:center;gap:10px;display:flex}.solve-timer{font-variant-numeric:tabular-nums;color:var(--text);align-items:center;gap:5px;font-size:16px;font-weight:900;display:inline-flex}.solve-timer svg{color:var(--muted);font-size:16px}.submission-meter{min-width:88px;color:var(--accent-text);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);justify-items:center;padding:8px 10px;display:grid}.submission-meter span:first-child{font-size:22px;font-weight:900;line-height:1}.submission-meter span:last-child{letter-spacing:.06em;text-transform:uppercase;font-size:10px;font-weight:800}.btn--mini{min-height:34px;padding:6px 9px;font-size:13px}.volume-panel{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);margin:0 0 14px;padding:8px}.volume-panel .mixer-slider,.playback-order--compact .mixer-slider{width:100%}.mixer-sliders{grid-template-columns:minmax(0,1fr) minmax(180px,.78fr);gap:8px;margin-top:10px;display:grid}.mixer-slider{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;min-width:0;padding:8px 9px;display:grid;box-shadow:inset 0 1px #ffffff1f,inset 0 -1px 2px #00000024}.mixer-slider-label{min-width:52px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;align-items:center;gap:5px;font-size:12px;font-weight:800;display:inline-flex}.mixer-slider-label svg{font-size:14px}.mixer-slider-value{min-width:42px;color:var(--accent-text);font-variant-numeric:tabular-nums;text-align:right;font-size:12px;font-weight:800}.mixer-range{appearance:none;cursor:pointer;background:0 0;width:100%;min-width:0;height:26px;margin:0}.mixer-range::-webkit-slider-runnable-track{background:var(--surface-2);border:1px solid var(--border);border-radius:999px;height:8px;box-shadow:inset 0 1px 3px #00000057}.mixer-range::-webkit-slider-thumb{appearance:none;background:var(--accent);border:1px solid #00000059;border-radius:4px;width:18px;height:22px;margin-top:-8px;box-shadow:inset 0 1px #ffffff57,0 2px 4px #00000047}.mixer-range::-moz-range-track{background:var(--surface-2);border:1px solid var(--border);border-radius:999px;height:8px;box-shadow:inset 0 1px 3px #00000057}.mixer-range::-moz-range-thumb{background:var(--accent);border:1px solid #00000059;border-radius:4px;width:18px;height:22px;box-shadow:inset 0 1px #ffffff57,0 2px 4px #00000047}.mixer-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--surface), 0 0 0 5px var(--focus)}.mixer-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--surface), 0 0 0 5px var(--focus)}.track-board{gap:10px;margin:0 0 18px;padding:0;list-style:none;display:grid}.track-lane{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);grid-template-columns:104px minmax(0,1fr);align-items:stretch;gap:8px;padding:8px;display:grid}.track-lane--locked{border-color:var(--ok)}.track-lane--graded{border-color:#c99700;box-shadow:0 0 0 1px #c9970073}.track-lane--graded .track-led{background:#c99700;box-shadow:0 0 12px #c9970080}.track-strip{color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);align-content:center;justify-items:center;gap:6px;padding:8px 6px;display:grid}.track-submit{width:100%;min-height:30px;padding:5px 8px;font-size:12px}.track-name{letter-spacing:.06em;text-transform:uppercase;font-size:12px;font-weight:900}.track-led{background:var(--muted);border-radius:50%;width:12px;height:12px}.track-lane--locked .track-led{background:var(--ok);box-shadow:0 0 12px #f6b73c73}.track-status{text-transform:uppercase;font-size:11px;font-weight:800}.vu-meter{align-items:flex-end;gap:3px;height:10px;display:flex}.vu-seg{background:var(--border);opacity:.45;border-radius:1px;width:4px;height:100%;transition:opacity 60ms linear,background 60ms linear}.vu-seg[data-lit=true]{opacity:1;background:var(--ok)}.vu-seg:nth-child(4)[data-lit=true]{background:#c99700}.vu-seg:nth-child(5)[data-lit=true]{background:var(--bad)}.track-main{gap:8px;min-width:0;display:grid}.track-reveal{color:var(--text);background:var(--ok-bg);border:1px solid var(--ok);border-radius:var(--radius-sm);align-items:center;gap:10px;padding:8px 10px;display:flex}.track-reveal-art{border-radius:var(--radius-sm);object-fit:cover;flex:none;width:40px;height:40px}.track-reveal-meta{gap:2px;min-width:0;margin-right:auto;display:grid}.track-reveal-title{white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:900;overflow:hidden}.track-reveal-artist{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:700;overflow:hidden}.track-reveal-badge{color:var(--ok);text-transform:uppercase;flex:none;align-items:center;gap:4px;font-size:11px;font-weight:800;display:inline-flex}.listen-links{flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px;display:flex}.listen-label{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-size:10px;font-weight:800}.listen-link{color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:999px;align-items:center;gap:4px;padding:2px 8px;font-size:11px;font-weight:700;text-decoration:none;display:inline-flex}.listen-link:hover{border-color:var(--accent)}.listen-link svg{opacity:.7;font-size:11px}.track-slots{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;display:grid}.tile{min-width:0;min-height:142px;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);grid-template-rows:auto minmax(50px,1fr) auto;gap:7px;padding:8px;display:grid;position:relative;box-shadow:inset 0 1px #ffffff1f,0 2px #0000002e}.tile-dragging{opacity:.9;box-shadow:0 10px 24px #0000003d}.tile-playing{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent), 0 0 18px #f6b73c38}.tile-locked{cursor:default}.tile-correct{border-color:var(--ok);background:var(--ok-bg);--tile-pulse:#0f7a4280;animation:.55s ease-out tilePulse}.tile-misplaced{--tile-pulse:#c997008c;background:#c9970026;border-color:#c99700;animation:.55s ease-out tilePulse}@keyframes tilePulse{0%{box-shadow:0 0 0 0 var(--tile-pulse)}to{box-shadow:0 0 0 9px #0000}}.tile-grip{min-width:0;min-height:36px;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:grab;font:inherit;justify-content:space-between;align-items:center;gap:8px;padding:6px 7px;display:flex}.tile-grip:active{cursor:grabbing}.tile-grip--locked{cursor:default}.tile-grip-main{align-items:center;gap:7px;min-width:0;display:inline-flex}.tile-position{width:22px;height:22px;color:var(--muted);background:var(--surface);border:1px solid var(--border);font-variant-numeric:tabular-nums;border-radius:50%;place-items:center;font-size:12px;font-weight:900;display:inline-grid}.tile-id{min-width:0;color:var(--muted);align-items:center;gap:5px;font-size:11px;font-weight:700;display:inline-flex}.tile-dot{border-radius:50%;width:13px;height:13px;box-shadow:0 0 0 1px #0000003d}.grip-dots{color:var(--muted);flex:none;font-size:18px}.tile-locked-label{color:var(--muted);text-transform:uppercase;align-items:center;gap:4px;font-size:11px;font-weight:800;display:inline-flex}.tile-wave{min-height:50px;color:var(--wave);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}.waveform{width:100%;height:54px;display:block}.waveform-seek{width:100%;color:inherit;font:inherit;cursor:pointer;touch-action:none;background:0 0;border:0;padding:0;display:block;position:relative}.wave-playhead{background:var(--accent);width:2px;box-shadow:0 0 6px var(--accent);opacity:0;pointer-events:none;position:absolute;top:0;bottom:0;left:0;transform:translate(-1px)}.tile-play{width:100%;min-height:34px;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);font:inherit;cursor:pointer;justify-content:center;align-items:center;gap:6px;font-size:12px;font-weight:900;display:inline-flex}.tile-play:hover{border-color:var(--accent)}.tile-state{border-radius:var(--radius-sm);justify-content:center;align-items:center;gap:5px;min-height:32px;padding:5px 6px;font-size:12px;font-weight:900;display:inline-flex}.tile-state--correct{color:var(--ok);background:var(--ok-bg)}.tile-state--misplaced{color:#8a6500;background:#c9970029}.answer-stack{gap:10px;margin:0 0 16px;display:grid}.answer-row{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);margin:0;padding:10px}.controls{flex-wrap:wrap;gap:10px;display:flex}.controls .btn{letter-spacing:.01em;border-bottom-color:#00000061;min-width:132px}.feedback{border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border);margin:0 0 14px;padding:11px 14px;font-size:15px;box-shadow:inset 0 1px #ffffff14}.result-banner{border-radius:var(--radius-sm);margin:0 0 14px;padding:14px 16px;font-size:16px}.result-banner.is-win{background:var(--ok-bg);border:1px solid var(--ok)}.result-banner.is-loss{background:var(--bad-bg);border:1px solid var(--bad)}.stats-row{grid-template-columns:repeat(5,1fr);gap:8px;margin:4px 0 14px;display:grid}.stat-cell{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);justify-items:center;gap:2px;padding:8px 4px;display:grid}.stat-value{font-variant-numeric:tabular-nums;font-size:22px;font-weight:900;line-height:1}.stat-label{color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-size:10px;font-weight:800}.share-btn{width:100%;margin:4px 0 12px}.countdown{font-variant-numeric:tabular-nums;margin:4px 0 16px}.difficulty{flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px;display:flex}.difficulty-label{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:13px}.chip{background:var(--surface-2);min-height:44px;color:var(--text);border:1px solid var(--border);cursor:pointer;font:inherit;border-radius:10px;flex-direction:column;align-items:center;gap:2px;padding:7px 16px;display:flex}.chip:hover{border-color:var(--accent)}.chip[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent-text)}.chip-sub{color:var(--muted);font-size:11px}.search-input{width:100%;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:10px;outline:none;padding:13px 15px;font-size:16px}.search-input:focus{border-color:var(--accent)}.results{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;max-height:360px;margin:16px 0 0;padding:0;list-style:none;display:grid;overflow-y:auto}.result{text-align:left;background:var(--surface-2);border:1px solid var(--border);cursor:pointer;width:100%;color:var(--text);font:inherit;border-radius:10px;align-items:center;gap:10px;padding:8px;display:flex}.result:hover:not(:disabled){border-color:var(--accent)}.result:disabled{opacity:.5;cursor:default}.art,.art-placeholder{border-radius:6px;flex:none;width:44px;height:44px}.art-placeholder{background:var(--surface);color:var(--muted);place-items:center;display:grid}.result-text{flex-direction:column;display:flex;overflow:hidden}.result-title{white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.result-artist{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}.modal-layer{z-index:40;place-items:center;padding:18px;display:grid;position:fixed;inset:0}.modal-backdrop{cursor:pointer;background:#080a108c;border:none;margin:0;position:absolute;inset:0}.modal{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);width:100%;max-width:460px;padding:22px;position:relative}.modal-head{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.modal h2{margin:0;font-size:20px}.modal ol{margin:0;padding-left:1.2rem;line-height:1.7}.modal li+li{margin-top:6px}.footer{text-align:center;color:var(--muted);margin-top:28px;font-size:13px}.footer a{color:var(--accent-text)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}@media (width<=760px){.app{padding-inline:12px}.mixer-topbar{align-items:stretch}.track-lane{grid-template-columns:1fr}.track-strip{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.track-submit{width:auto}.track-slots{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=520px){.site-header,.bar{align-items:flex-start}.panel{padding:16px}.mixer-topbar{display:grid}.submission-meter{justify-self:start}.mixer-slider{grid-template-columns:64px minmax(0,1fr) 42px}.tile{min-height:132px}.tile-grip{align-items:flex-start}.np-meta{display:none}.controls .btn{flex:calc(50% - 5px);min-width:0}}