:root{color-scheme:dark;--bg: #081625;--panel: #0e2238;--panel-2: #15304c;--line: rgba(221, 236, 247, .14);--text: #f7fbff;--dim: #b5c6d6;--muted: #9fb3c5;--accent: #ff6b6b;--accent-2: #4ecdc4;--good: #54d68b;--warn: #ffd166;--bad: #ff6b6b;--radius: 16px;--shadow: 0 12px 28px rgba(0, 8, 20, .24)}*{box-sizing:border-box}html,body{margin:0;height:100%}body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);overflow:hidden}[hidden]{display:none!important}.skip-link{position:fixed;top:8px;left:8px;z-index:300;padding:9px 12px;border-radius:8px;background:var(--text);color:var(--bg);font-weight:700;transform:translateY(-160%)}.skip-link:focus{transform:translateY(0)}.app{display:grid;grid-template-columns:360px 1fr;height:100vh}.sidebar{background:var(--panel);border-right:1px solid var(--line);padding:20px 18px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;overflow-x:hidden;scrollbar-color:rgba(148,161,182,.45) transparent}.brand{display:flex;align-items:center;gap:12px;margin-bottom:4px}.sidebar-close{display:none;margin-left:auto;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:#0a1322;color:var(--text);font-size:24px;line-height:1}.brand-mark{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:22px;color:#fff;background:var(--accent);box-shadow:var(--shadow)}.brand-name{font-weight:700;font-size:18px;letter-spacing:.2px}.brand-sub{font-size:12px;color:var(--dim)}.side-card{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}.side-card h2,.side-card h3{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--dim)}.library-card{border-color:#ffd16685;background:#193754;gap:12px;padding:16px}.quick-start-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.library-card .quick-start-heading .eyebrow{margin:0 0 5px;color:color-mix(in srgb,var(--accent) 58%,white);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.library-card .quick-start-heading h2{max-width:230px;color:var(--text);font-size:18px;line-height:1.15;letter-spacing:-.02em;text-transform:none}.step-count{flex:none;padding:5px 8px;border:1px solid rgba(124,92,255,.34);border-radius:999px;background:#7c5cff1c;color:color-mix(in srgb,var(--accent) 52%,white);font-size:10px;font-weight:800;letter-spacing:.08em}.library-view{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0;padding:4px;border:1px solid var(--line);border-radius:10px;background:#070b146b}.library-view label{position:relative;cursor:pointer}.library-view input{position:absolute;opacity:0;pointer-events:none}.library-view span{display:block;padding:7px 10px;border-radius:7px;color:var(--dim);font-size:12px;font-weight:750;text-align:center}.library-view input:checked+span{background:#f7c95c;color:#172236}.library-view input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}.instrument-picker{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:0;margin:0;padding:0;border:0}.instrument-picker legend{grid-column:1 / -1;margin-bottom:1px;padding:0;color:var(--dim);font-size:13px}.instrument-option{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:8px;min-width:0;padding:10px;border:1px solid var(--line);border-radius:12px;background:#070b147a;cursor:pointer;transition:transform .12s ease,border-color .15s ease,background .15s ease}.instrument-option input{position:absolute;width:1px;height:1px;opacity:0}.instrument-option:has(input:checked){border-color:color-mix(in srgb,var(--accent) 70%,white);background:color-mix(in srgb,var(--accent) 15%,var(--panel));box-shadow:inset 0 0 0 1px #7c5cff2e}.instrument-option:has(input:focus-visible){outline:2px solid color-mix(in srgb,var(--accent) 62%,white);outline-offset:2px}.instrument-option:has(input:disabled){cursor:not-allowed;opacity:.42}.instrument-option:has(input:disabled):has(input:checked){border-color:var(--line);background:#070b147a;box-shadow:none}.instrument-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#7c5cff47,#5b8cff29);color:#fff;font-size:18px}.instrument-icon.bass-icon{background:linear-gradient(135deg,#2ecc713d,#5b8cff29)}.instrument-option>span:last-child{display:grid;min-width:0;gap:2px}.instrument-option strong{font-size:13px}.instrument-option small{overflow:hidden;color:var(--dim);font-size:9px;text-overflow:ellipsis;white-space:nowrap}.start-button{display:flex;align-items:center;justify-content:center;min-height:48px;gap:8px;font-size:15px}.advanced-settings{min-width:0;border:1px solid var(--line);border-radius:var(--radius);background:#131f3494}.advanced-settings>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:12px 14px;cursor:pointer;list-style:none}.advanced-settings>summary::-webkit-details-marker{display:none}.advanced-settings>summary>span:first-child{display:grid;gap:3px}.advanced-settings>summary strong{color:var(--text);font-size:13px}.advanced-settings>summary small{color:var(--dim);font-size:10px}.advanced-chevron{color:var(--dim);font-size:20px;transition:transform .16s ease}.advanced-settings[open] .advanced-chevron{transform:rotate(180deg)}.advanced-content{display:grid;gap:12px;padding:0 10px 10px}.developer-picker{border-style:dashed}.spotify-card{border-color:#1ed7603d;background:radial-gradient(circle at 100% 0,rgba(30,215,96,.1),transparent 42%),var(--panel-2)}.spotify-quick-source{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.7rem;align-items:center;padding:.75rem;border:1px solid color-mix(in srgb,#1ed760 45%,var(--line));border-radius:14px;background:linear-gradient(135deg,#1ed7601f,#0c121ec7)}.spotify-quick-source>span:nth-child(2){display:grid;min-width:0;gap:.15rem}.spotify-quick-source small{overflow:hidden;color:var(--muted);text-overflow:ellipsis;white-space:nowrap}.spotify-quick-source .btn{min-height:2.35rem;padding-inline:.85rem}.spotify-heading{display:flex;align-items:center;justify-content:space-between}.spotify-heading .eyebrow{margin:0 0 3px;color:#8be8a9;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.spotify-mark{color:#1ed760;font-size:25px;line-height:1;filter:drop-shadow(0 0 8px rgba(30,215,96,.35))}.btn-spotify{background:#1ed760;color:#06120a}.btn-spotify:disabled{background:#1b2a3d;color:#7f8ba0;opacity:1}.spotify-tracks{display:grid;gap:7px}.spotify-track-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:#070b1473}.spotify-track-row>span{display:grid;min-width:0;gap:2px}.spotify-track-row strong{font-size:12px}.spotify-track-row small{overflow:hidden;color:var(--dim);font-size:9px;text-overflow:ellipsis;white-space:nowrap}.spotify-track-row>div{display:flex;align-items:center;gap:5px}.spotify-track-row .btn,.spotify-link{padding:6px 7px;font-size:10px}.spotify-link{border:1px solid var(--line);border-radius:8px;color:#8be8a9;text-decoration:none}.spotify-sync-toggle{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;padding:10px;border:1px solid rgba(30,215,96,.28);border-radius:11px;background:#1ed76011;cursor:pointer}.spotify-sync-toggle:has(input:disabled){cursor:not-allowed;opacity:.58}.spotify-sync-toggle input{width:18px;height:18px;margin:0;accent-color:#1ed760}.spotify-sync-toggle span{display:grid;min-width:0;gap:2px}.spotify-sync-toggle strong{font-size:11px}.spotify-sync-toggle small{color:var(--dim);font-size:9px;line-height:1.35}.spotify-sync-status{min-height:25px;padding:6px 8px;border-radius:8px;background:#070b1473;color:var(--dim);font-size:9px;line-height:1.4}.spotify-sync-status[data-state=active]{background:#1ed7601c;color:#a6f3bd}.spotify-sync-status[data-state=error]{background:#ff5b781c;color:#ffadbd}.quality-badge{width:fit-content;padding:.25rem .55rem;border:1px solid color-mix(in srgb,#53dfad 50%,var(--line));border-radius:999px;background:#1ecd911f;color:#92f0ce;font-size:.72rem;font-weight:800;letter-spacing:.02em}.quality-badge[data-tier=activity-aligned-draft]{border-color:color-mix(in srgb,#f0b45d 55%,var(--line));background:#f0b45d1f;color:#ffd493}.quality-badge[data-tier=review-only],.quality-badge[data-tier=provider-synced],.quality-badge[data-tier=exact-pro-bass]{border-color:#ffd16680;background:#ffd1661a;color:#ffe1a0}.quality-badge[data-tier=studio-ready]{border-color:#54d68b85;background:#54d68b1f;color:#a8efc4}.quality-badge[data-tier=practice-ready]{border-color:#5ea8f68c;background:#5ea8f61f;color:#b6d4ff}.quality-badge[data-tier=community-timed]{border-color:#b394f68c;background:#b394f61f;color:#d6c6ff}.streak-chip b{color:#ffce7a}.streak-chip .streak-flame{margin-left:.2rem;font-size:.85em}.level-chip{gap:.15rem}.level-bar{width:100%;min-width:3rem;height:4px;margin-top:2px;border-radius:999px;background:#ffffff24;overflow:hidden}.level-fill{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,#5ea8f6,#a8efc4);transition:width .5s ease}.result-stars{font-size:1.5rem;letter-spacing:.15rem;color:#ffce7a;line-height:1.1}.result-stars[data-earned="0"]{color:#ffffff4d}.celebration{position:absolute;inset-inline:0;top:18%;margin-inline:auto;width:max-content;max-width:90%;display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:1rem 1.6rem;border-radius:16px;background:#0a101cd1;border:1px solid rgba(168,239,196,.4);box-shadow:0 12px 40px #00000073;text-align:center;z-index:6;animation:celebration-pop .4s ease}.celebration strong{font-size:1.15rem;color:#f2f6ff}.celebration span{font-size:.9rem;color:#e6eefcd1}.celebration-stars{font-size:2rem;letter-spacing:.3rem;color:#ffce7a}@keyframes celebration-pop{0%{transform:scale(.86) translateY(8px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.reduced-motion .celebration,.reduced-motion .level-fill{animation:none;transition:none}.onboarding{margin-top:1.4rem;padding:1rem 1.2rem;max-width:30rem;border-radius:14px;background:#ffffff0a;border:1px solid rgba(255,255,255,.1);text-align:left}.onboarding-steps{list-style:none;margin:0 0 .9rem;padding:0;display:flex;flex-direction:column;gap:.7rem}.onboarding-steps li{display:flex;align-items:flex-start;gap:.65rem;font-size:.92rem;color:#e6eefcdb;line-height:1.35}.onboarding-steps strong{color:#f2f6ff}.onboarding-num{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;font-size:.82rem;font-weight:700;color:#0a101c;background:linear-gradient(135deg,#5ea8f6,#a8efc4)}.onboarding-dismiss{width:100%}.welcome-streak{margin:0 0 .2rem;font-size:.95rem;font-weight:650;color:#ffce7a}.spotify-nudge-field{gap:.45rem;padding:.65rem;border:1px solid var(--line);border-radius:10px;background:#070b146b}.spotify-nudge-control{display:grid;grid-template-columns:minmax(0,1fr) 4.5rem auto;gap:.55rem;align-items:center}.spotify-nudge-control output{color:var(--text);font-variant-numeric:tabular-nums;text-align:right}.catalog-summary{color:var(--dim);font-size:11px;line-height:1.4}.selected-exercise{display:grid;gap:3px;padding:10px;border:1px solid var(--line);border-radius:10px;background:#070b1480;min-width:0}.selected-exercise strong{color:var(--text);font-size:13px;line-height:1.35;overflow-wrap:anywhere}.selected-exercise span{color:var(--dim);font-size:11px;line-height:1.4;overflow-wrap:anywhere}.sync-review-open{width:100%;margin-top:6px}.sync-review-dialog{width:min(680px,calc(100vw - 24px));max-height:min(820px,calc(100dvh - 24px));margin:auto;padding:0;overflow:hidden;border:1px solid #38506e;border-radius:18px;background:#101d2f;color:var(--text);box-shadow:0 24px 80px #0000008c}.sync-review-dialog::backdrop{background:#040911c7;backdrop-filter:blur(6px)}.sync-review-shell{display:grid;gap:18px;max-height:inherit;padding:22px;overflow-y:auto}.sync-review-header,.sync-review-progress,.sync-review-nudge,.sync-review-nav,.sync-review-footer{display:flex;align-items:center;gap:10px}.sync-review-header{justify-content:space-between}.sync-review-header h2,.sync-review-header p{margin:0}.sync-review-header h2{margin-top:3px;font-size:24px}.sync-review-header #sync-review-song{margin-top:4px;color:var(--dim);font-size:13px}.dialog-close{width:38px;height:38px;border:0;border-radius:50%;background:#1a2b42;color:var(--text);font-size:24px;cursor:pointer}.sync-review-progress{display:grid;grid-template-columns:auto minmax(80px,1fr) auto;color:var(--dim);font-size:12px}.sync-review-progress progress{width:100%;accent-color:var(--accent)}.sync-review-line{display:grid;gap:16px;min-height:160px;padding:24px;border:1px solid #38506e;border-radius:14px;background:#172941}.sync-review-line>p{margin:0;font-size:clamp(22px,5vw,34px);font-weight:800;line-height:1.15;letter-spacing:-.025em;text-align:center}.sync-review-words{display:flex;flex-wrap:wrap;justify-content:center;gap:7px}.sync-review-words span{padding:5px 8px;border-radius:7px;background:#0d1929;color:#92a4bb;font-size:13px}.sync-review-words span[data-state=done]{background:#54d68b29;color:#b9f4d0}.sync-review-words span[data-state=next]{background:#f7c95c;color:#172236}.sync-review-actions{display:grid;grid-template-columns:auto 1fr;gap:10px}.sync-review-actions p{grid-column:1 / -1;margin:0;color:var(--dim);font-size:12px;text-align:center}.sync-review-mark{min-height:48px;font-size:15px}.sync-review-nudge output{flex:1;min-width:90px;color:var(--text);font-variant-numeric:tabular-nums;text-align:center}.sync-review-nav{justify-content:space-between}.sync-review-footer{align-items:end;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px}.sync-review-footer .field{flex:1;min-width:220px}.sync-review-footer .hint{flex:1 0 100%;margin:0}@media (max-width: 620px){.sync-review-shell{padding:16px}.sync-review-actions,.sync-review-footer{display:grid;grid-template-columns:1fr}.sync-review-nudge{display:grid;grid-template-columns:1fr 1fr}.sync-review-nudge output{grid-column:1 / -1;grid-row:1}}.field{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--dim)}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.field select,.field input,.speed select{width:100%;min-width:0;max-width:100%;background:#0a1322;color:var(--text);border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:14px}.field input::placeholder{color:#7f8ba0}.button-row{display:flex;gap:8px}.button-row>*{flex:1}.button-row .btn{padding-inline:8px;font-size:12px}.stem-list{display:grid;gap:5px}.stem-row{display:flex;justify-content:space-between;gap:8px;color:var(--dim);font-size:12px}.observation{color:var(--text);font-size:13px;line-height:1.4}.missed-regions{display:grid;gap:6px}.missed-regions button{text-align:left}.compact-list{display:grid;gap:6px}.compact-item{display:grid;gap:3px;border-left:2px solid var(--accent);padding:3px 0 3px 8px;color:var(--text);font-size:12px;line-height:1.35}.compact-item small{color:var(--dim)}.history-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}.history-row .btn{padding:5px 7px;font-size:11px}.check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text)}.generated-backing-card{display:grid;gap:9px;padding:11px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:12px;background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--accent) 11%,transparent),transparent 55%),#070b1475}.generated-backing-toggle{align-items:flex-start}.generated-backing-toggle input{margin-top:3px}.generated-backing-toggle span{display:grid;gap:2px}.generated-backing-toggle strong{font-size:12px}.generated-backing-toggle small{color:var(--dim);font-size:10px;font-weight:450;line-height:1.35}.generated-stems{display:flex;flex-wrap:wrap;gap:6px;padding-left:23px}.generated-stems .check{gap:5px;padding:4px 7px;border:1px solid var(--line);border-radius:999px;background:#0a1322b8;font-size:10px}.instrument-voice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-left:23px}.compact-field{gap:4px;font-size:10px}.compact-field select{min-width:0;padding:7px 8px;border-radius:8px;font-size:11px}.generated-backing-card .hint{margin:0;padding-left:23px;font-size:10px;line-height:1.45}.generated-backing-card .hint[data-state=active]{color:var(--good)}.generated-backing-card .hint[data-state=soundfont]{color:#8de8ff}.generated-backing-card .hint[data-state=procedural]{color:var(--warn)}.generated-backing-card .hint[data-state=off]{color:var(--dim);opacity:.76}@media (max-width: 520px){.instrument-voice-grid{grid-template-columns:1fr}}.side-card h2,.side-card h3{color:var(--text);font-size:13px;letter-spacing:0;text-transform:none}.step-count{display:grid;width:32px;height:32px;padding:0;place-items:center;border-color:#ffd16694;background:#ffd166;color:#122438;font-size:16px}.start-button{min-height:52px;background:#ff6b6b;box-shadow:0 9px 20px #ff6b6b38}.advanced-settings,.side-card,.selected-exercise,.spotify-track-row,.generated-backing-card,.spotify-nudge-field{background-image:none}.advanced-settings{background:#102942}.switch-check{align-items:flex-start;padding:11px;border:1px solid var(--line);border-radius:12px;background:#0e2238}.switch-check>span{display:grid;gap:3px}.switch-check small{color:var(--dim);font-size:11px}.spotify-card,.spotify-quick-source,.karaoke-panel,.stage-empty{background-image:none}.spotify-quick-source{background:#102d31}.spotify-card{background:#132f3d}.stage-empty{border-color:#ffd1666b;background:#0d2238f5}.stage-empty-mark{background:#ffd166;color:#122438;box-shadow:0 12px 30px #ffd1662e}.karaoke-panel{border-color:#ddecf733;background:#09192af0}.karaoke-meta{justify-content:center}.karaoke-meta strong{color:#ffd166;font-size:11px}.chord-overlay{position:absolute;z-index:6;top:16px;left:50%;display:flex;align-items:center;gap:8px;padding:6px;border:1px solid rgba(221,236,247,.15);border-radius:14px;background:#09192ae0;box-shadow:0 8px 22px #00081438;transform:translate(-50%);backdrop-filter:blur(10px)}.chord-cue{min-width:52px;min-height:38px;padding:5px 12px;border:0;border-radius:9px;background:transparent;color:var(--dim);font:inherit;font-size:15px;font-weight:750;cursor:pointer}.chord-cue:hover,.chord-cue:focus-visible{background:#ffffff14;color:var(--text)}.chord-cue-current{background:#ffd166;color:#122438;transform:scale(1.06)}.cue{position:absolute;z-index:5;top:48%;left:50%;display:flex;min-height:48px;align-items:center;justify-content:center;padding:11px 18px;border:1px solid rgba(255,209,102,.38);border-radius:999px;background:#09192adb;box-shadow:0 14px 40px #0008144d;color:#ffe39c;font-size:15px;font-weight:750;letter-spacing:.01em;transform:translate(-50%,-50%);backdrop-filter:blur(8px)}.statusbar .stat:nth-of-type(n+4),#budget-badge{display:none}.statusbar{justify-content:center}#load-status:empty{display:none}@media (max-width: 720px){.chord-overlay{top:76px;max-width:calc(100% - 20px)}.chord-cue{min-width:44px;padding-inline:8px}.statusbar{grid-template-columns:repeat(3,minmax(0,1fr))}}.hint{font-size:12px;color:var(--dim);min-height:15px}.side-foot{margin-top:auto;font-size:12px}.side-foot a,.brand-sub a{color:var(--accent);text-decoration:none}.side-foot a:hover{text-decoration:underline}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 62%,white);outline-offset:2px}.btn{border:none;border-radius:10px;padding:10px 12px;font-size:14px;font-weight:600;cursor:pointer;transition:transform .06s ease,filter .15s ease}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow)}.btn-ghost{background:#0a1322;color:var(--text);border:1px solid var(--line)}.btn-danger{background:#e5484d1f;color:#ffb4b7;border:1px solid rgba(229,72,77,.35)}.btn:disabled{cursor:not-allowed;filter:none;opacity:.45}.btn:hover{filter:brightness(1.08)}.meter{height:8px;border-radius:6px;background:#0a1322;border:1px solid var(--line);overflow:hidden}.meter-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--good),var(--warn));transition:width .08s linear}.stage{display:grid;grid-template-rows:auto 1fr auto;min-width:0;min-height:0}.topbar{display:grid;grid-template-columns:minmax(230px,1fr) auto;align-items:center;padding:12px 20px 11px;border-bottom:1px solid var(--line);background:#0a112099;backdrop-filter:blur(8px);gap:10px 18px}.sidebar-toggle,.mobile-welcome-brand,.mobile-library-button{display:none}.transport{display:flex;align-items:center;gap:10px}.tbtn{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:#0e1930;color:var(--text);font-size:15px;cursor:pointer}.tbtn:disabled{opacity:.4;cursor:not-allowed}.tbtn:not(:disabled):hover{border-color:var(--accent)}.lyrics-quick-toggle{width:auto;padding-inline:11px;color:var(--dim);font-size:11px;font-weight:750}.lyrics-quick-toggle[aria-pressed=true]{border-color:#ffd16680;background:#ffd1661f;color:#ffd166}.transport-state{color:var(--dim);font-size:12px;min-width:72px}.scoreboard{display:flex;gap:10px}.score-chip{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:8px 14px;display:flex;flex-direction:column;align-items:center;min-width:66px}.score-label{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--dim)}.score-chip b{font-size:20px;font-variant-numeric:tabular-nums}.timeline-scrubber{--scrub-progress: 0;grid-column:1 / -1;display:grid;grid-template-columns:42px minmax(120px,1fr) 42px;align-items:center;gap:10px;width:100%}.scrub-time{color:var(--dim);font-size:11px;font-variant-numeric:tabular-nums}.scrub-time:last-of-type{text-align:right}.scrub-track{position:relative;height:32px;border:1px solid var(--line);border-radius:10px;background:#070b14b8;cursor:ew-resize;isolation:isolate}.scrub-track:before{position:absolute;z-index:0;top:50%;right:8px;left:8px;height:3px;border-radius:999px;background:#94a1b633;content:"";transform:translateY(-50%)}.scrub-density{position:absolute;z-index:1;inset:5px 8px;display:flex;align-items:center;gap:1px;opacity:.72;overflow:hidden;pointer-events:none}.scrub-density span{flex:1 1 0;min-width:1px;border-radius:1px;background:#94a1b652}.scrub-progress{position:absolute;z-index:2;top:50%;left:8px;width:calc((100% - 16px) * var(--scrub-progress));height:4px;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 12px #7c5cff85;pointer-events:none;transform:translateY(-50%);transition:width 80ms linear}.scrub-thumb{position:absolute;z-index:3;top:50%;left:calc(8px + (100% - 16px) * var(--scrub-progress));width:14px;height:14px;border:3px solid var(--text);border-radius:50%;background:var(--accent);box-shadow:0 2px 12px #00000073;pointer-events:none;transform:translate(-50%,-50%);transition:left 80ms linear,transform .12s ease}.scrub-input{position:absolute;z-index:5;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}.scrub-track:has(.scrub-input:focus-visible){outline:2px solid color-mix(in srgb,var(--accent) 62%,white);outline-offset:2px}.scrub-preview{position:absolute;z-index:7;bottom:calc(100% + 8px);min-width:42px;padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:#050914;color:var(--text);font-size:10px;font-variant-numeric:tabular-nums;text-align:center;pointer-events:none;transform:translate(-50%)}body.is-scrubbing .scrub-progress,body.is-scrubbing .scrub-thumb{transition:none}body.is-scrubbing .scrub-thumb{transform:translate(-50%,-50%) scale(1.28)}.highway-wrap{position:relative;min-height:0;overflow:hidden;isolation:isolate}#highway{width:100%;height:100%;display:block}.stage-empty{position:absolute;inset:50% auto auto 50%;z-index:4;width:min(540px,calc(100% - 40px));padding:clamp(24px,4vw,42px);border:1px solid rgba(255,209,102,.42);border-radius:24px;background:#0d2238f5;box-shadow:0 22px 70px #00000057;text-align:center;transform:translate(-50%,-50%);backdrop-filter:none}.welcome-visual{position:relative;display:grid;grid-template-columns:repeat(5,auto);align-items:center;justify-content:center;gap:clamp(12px,2.2vw,30px);min-height:86px;margin:0 auto 22px;color:var(--warn)}.welcome-visual:before{position:absolute;right:8%;left:8%;height:2px;border-radius:999px;background:linear-gradient(90deg,transparent,var(--accent-2),var(--accent),transparent);content:"";opacity:.56}.welcome-visual span{position:relative;z-index:1;display:grid;width:clamp(32px,4vw,48px);height:clamp(32px,4vw,48px);place-items:center;border:1px solid rgba(255,255,255,.13);border-radius:50%;background:#112c46;box-shadow:0 12px 36px #00081447;font-size:clamp(14px,1.8vw,22px)}.welcome-visual span:nth-child(2),.welcome-visual span:nth-child(4){width:12px;height:12px;border:3px solid #112c46;background:var(--accent-2);box-shadow:0 0 0 1px #4ecdc466;color:transparent}.welcome-visual span:nth-child(3){width:clamp(50px,6vw,68px);height:clamp(50px,6vw,68px);border-radius:20px;background:var(--warn);color:#122438;transform:translateY(-10px)}body:not(.chart-loaded) .stage{grid-template-rows:1fr}body:not(.chart-loaded) .topbar,body:not(.chart-loaded) .statusbar{display:none}body:not(.chart-loaded) .highway-wrap{background:radial-gradient(circle at 68% 42%,rgba(78,205,196,.09),transparent 28%),radial-gradient(circle at 44% 62%,rgba(255,107,107,.08),transparent 31%),#081625}body:not(.chart-loaded) #highway{opacity:.12}body:not(.chart-loaded) .stage-empty{width:min(690px,calc(100% - 48px));padding:36px 28px;border:0;background:transparent;box-shadow:none}body:not(.chart-loaded) .stage-empty h2{font-size:clamp(34px,5vw,64px);letter-spacing:-.045em}body:not(.chart-loaded) .stage-empty p:not(.eyebrow){max-width:540px;margin-top:18px;color:#c6d5e2;font-size:clamp(14px,1.4vw,18px);line-height:1.55}body:not(.chart-loaded) .stage-empty .eyebrow{margin-bottom:12px;color:#ffd166}.stage-empty-mark{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 14px;border-radius:18px;background:#ffd166;color:#122438;box-shadow:0 12px 30px #ffd1662e;font-size:27px}.stage-empty .eyebrow{margin:0 0 8px;color:color-mix(in srgb,var(--accent) 52%,white);font-size:11px;font-weight:750;letter-spacing:.14em;text-transform:uppercase}.stage-empty h2{margin:0;font-size:clamp(24px,3vw,38px);line-height:1.06;letter-spacing:-.02em;word-spacing:.12em}.stage-empty p:not(.eyebrow){max-width:430px;margin:15px auto 20px;color:var(--dim);font-size:14px;line-height:1.6}.shortcut-hint{margin-top:18px;color:var(--dim);font-size:11px}kbd{display:inline-block;min-width:22px;margin:0 2px;padding:2px 5px;border:1px solid var(--line);border-bottom-color:#ffffff3d;border-radius:5px;background:#111c2e;color:var(--text);font:inherit}.now-playing{position:absolute;z-index:5;top:16px;left:18px;display:grid;max-width:min(42vw,440px);gap:2px;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:#070b14b8;box-shadow:0 10px 26px #00000047;backdrop-filter:blur(10px);pointer-events:none}.now-playing span{color:var(--dim);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.now-playing strong{overflow:hidden;color:var(--text);font-size:13px;text-overflow:ellipsis;white-space:nowrap}.now-playing small{overflow:hidden;color:var(--dim);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.lyric-overlay{position:absolute;inset:0;z-index:7;pointer-events:none}.karaoke-panel{position:absolute;bottom:34px;left:50%;width:min(980px,calc(100% - clamp(36px,8vw,128px)));padding:10px 18px 14px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:linear-gradient(180deg,#080d19c2,#050912eb);box-shadow:0 18px 46px #0000006b;backdrop-filter:blur(12px);pointer-events:auto;transform:translate(-50%);transition:border-color .15s ease,box-shadow .15s ease}.karaoke-panel[data-positioned=true]{right:auto;bottom:auto;transform:none}.karaoke-panel[data-dragging=true]{border-color:color-mix(in srgb,var(--accent) 62%,white);box-shadow:0 22px 54px #00000080,0 0 0 2px color-mix(in srgb,var(--accent) 24%,transparent)}.karaoke-panel-empty{width:min(620px,calc(100% - clamp(36px,8vw,128px)));padding-block:12px}.karaoke-toolbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;margin-bottom:5px}.karaoke-meta{display:flex;justify-content:center;gap:8px;min-width:0;color:var(--dim);font-size:10px;line-height:1.35;text-align:center}.karaoke-meta strong{overflow:hidden;color:var(--text);font-weight:650;text-overflow:ellipsis;white-space:nowrap}.karaoke-meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.karaoke-tools{display:flex;gap:3px}.karaoke-tool{appearance:none;min-height:28px;padding:4px 8px;border:1px solid transparent;border-radius:8px;background:#ffffff09;color:var(--dim);font:inherit;font-size:10px;font-weight:650}.karaoke-tool:hover,.karaoke-tool:focus-visible{border-color:var(--line);background:#ffffff14;color:var(--text)}.karaoke-drag-handle{cursor:grab;touch-action:none;user-select:none}.karaoke-panel[data-dragging=true] .karaoke-drag-handle{cursor:grabbing}.karaoke-icon-tool{width:28px;padding-inline:0;font-size:16px}.karaoke-lines{display:grid;grid-template-rows:22px minmax(42px,auto) 22px;align-items:center;min-height:92px}.karaoke-context,.karaoke-token{appearance:none;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}.karaoke-context{width:100%;overflow:hidden;padding:0;color:var(--dim);font-size:clamp(12px,1.25vw,15px);line-height:1.3;text-align:center;text-overflow:ellipsis;white-space:nowrap;opacity:.68}.karaoke-context:not(.karaoke-spacer):hover,.karaoke-context:not(.karaoke-spacer):focus-visible{color:var(--text);opacity:1}.karaoke-current{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;padding:2px 0 4px;line-height:1.2}.karaoke-token{margin:0 .14em;padding:2px 0;color:#e8edf670;font-size:clamp(22px,3vw,40px);font-weight:750;letter-spacing:-.025em;text-shadow:0 2px 14px rgba(0,0,0,.72)}.karaoke-token-past{color:var(--accent);color:color-mix(in srgb,var(--accent) 78%,white)}.karaoke-token-active{--karaoke-progress: 0%;background:linear-gradient(90deg,var(--accent) 0 var(--karaoke-progress),var(--text) var(--karaoke-progress) 100%);background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 62%,white) 0 var(--karaoke-progress),var(--text) var(--karaoke-progress) 100%);background-clip:text;color:transparent;filter:drop-shadow(0 0 11px color-mix(in srgb,var(--accent) 48%,transparent))}.karaoke-token:hover,.karaoke-token:focus-visible{outline:2px solid var(--accent);outline:2px solid color-mix(in srgb,var(--accent) 70%,white);outline-offset:3px;border-radius:3px}.karaoke-joins-next{margin-right:0}.karaoke-joins-previous{margin-left:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.warnings{position:absolute;top:58px;left:50%;transform:translate(-50%);color:var(--warn);font-size:13px;font-weight:600;max-width:min(680px,calc(100% - 40px));padding:4px 10px;border-radius:8px;background:#070b14b8;text-align:center;pointer-events:none}.warnings:empty{display:none}.statusbar{display:flex;align-items:center;gap:22px;padding:10px 20px;border-top:1px solid var(--line);background:#0a112099;font-size:13px}.stat{display:flex;align-items:baseline;gap:6px;color:var(--dim)}.stat b{color:var(--text);font-variant-numeric:tabular-nums;font-size:14px}.stat-reading{display:inline-flex;align-items:baseline;gap:3px;min-width:0}.stat-reading small{font-size:11px}.badge{margin-left:auto;padding:5px 12px;border-radius:20px;font-size:12px;font-weight:700}.badge.ok{background:#2ecc7129;color:var(--good)}.badge.bad{background:#e5484d2e;color:var(--bad)}.badge.warm{background:#94a1b624;color:var(--dim)}.sidebar-backdrop{display:none}body.high-contrast{--bg: #000000;--panel: #000000;--panel-2: #0a0a0a;--line: rgba(255, 255, 255, .28);--text: #ffffff;--dim: #d0d0d0;--accent: #ffd400;--accent-2: #00e5ff}@media (prefers-reduced-motion: reduce){.meter-fill,.advanced-chevron,.instrument-option,.scrub-progress,.scrub-thumb,.karaoke-panel{transition:none}}@media (max-width: 1180px){.app{display:block;height:100dvh}.sidebar{position:fixed;z-index:120;inset:0 auto 0 0;width:min(90vw,370px);padding-bottom:calc(24px + env(safe-area-inset-bottom));box-shadow:22px 0 70px #0000008c;transform:translate(-105%);transition:transform .18s ease}body.sidebar-open .sidebar{transform:translate(0)}.sidebar-close{display:block}.sidebar-backdrop{position:fixed;z-index:110;inset:0;display:block;width:100%;height:100%;padding:0;border:0;border-radius:0;background:#02050aad;backdrop-filter:blur(3px)}.stage{height:100dvh}.sidebar-toggle{display:grid;place-items:center}body:not(.chart-loaded) .stage{grid-template-rows:auto 1fr}body:not(.chart-loaded) .topbar{display:grid;grid-template-columns:40px minmax(0,1fr);min-height:62px;padding:10px 14px}body:not(.chart-loaded) .topbar .transport,body:not(.chart-loaded) .topbar .scoreboard,body:not(.chart-loaded) .topbar .timeline-scrubber{display:none}body:not(.chart-loaded) .mobile-welcome-brand{display:block;color:var(--text);font-size:16px;font-weight:750;letter-spacing:-.01em}body:not(.chart-loaded) .mobile-library-button{display:inline-flex;width:fit-content;min-height:46px;margin:24px auto 0;align-items:center;justify-content:center;padding-inline:22px}.topbar{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:10px;padding:10px 12px}.transport{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,40px) auto minmax(62px,1fr);gap:8px;width:100%}.transport-state{grid-column:5;min-width:0;text-align:right}.timeline-scrubber{grid-column:1 / -1;grid-template-columns:36px minmax(90px,1fr) 36px;gap:7px}.scoreboard{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:min(100%,318px);min-width:0;justify-self:end}.score-chip{min-width:0;padding:5px 7px}.score-chip b{font-size:16px}.stage-empty{width:min(520px,calc(100% - 28px));padding:26px 20px}.stage-empty p:not(.eyebrow){font-size:13px}.now-playing{top:10px;left:10px;max-width:calc(100% - 20px)}.cue{top:48%}.warnings{top:108px}.karaoke-meta span{display:none}.karaoke-panel{bottom:10px;width:calc(100% - 20px);padding-inline:12px}.karaoke-panel-empty{width:calc(100% - 20px)}.karaoke-drag-handle{padding-inline:6px}.statusbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px 10px;padding:8px 12px calc(8px + env(safe-area-inset-bottom))}.stat{display:grid;gap:0;min-width:0}.stat>span:first-child{overflow:hidden;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.stat-reading{display:flex;gap:3px;overflow:hidden;white-space:nowrap}.stat b{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.badge{margin-left:0;padding:4px 7px;text-align:center}}@media (max-width: 520px){.topbar{gap:8px}.score-label{font-size:8px}.stage-empty-mark,.shortcut-hint{display:none}.stage-empty h2{font-size:25px}.karaoke-lines{grid-template-rows:18px minmax(36px,auto) 18px;min-height:76px}.karaoke-token{font-size:clamp(19px,7vw,28px)}.karaoke-context{font-size:11px}}
