:root{--bg:#f6f6f3;--panel:#fff;--text:#1a1d21;--muted:#667085;--border:#e3e5e8;--accent:#3b82f6;--accent-text:#fff;--link:#2563eb;--accent-strong:#2563eb;--accent-soft:#eaf2ff;--accent-soft-border:#bfdbfe;--toggle-on-text:#1d4ed8;--danger:#dc2626;--mismatch:#dc26261f;--heard:#22c55e;--correct:#15803d;--mismatch-border:#dc262699;--roll-note:#94a3b8;--roll-black-key:#f1f5f9;--paper:#fff;--paper-text:#1a1d21;--paper-muted:#667085;--key-white:#fff;--key-white-border:#c9ccd1;--key-black:#1f2328;--key-label:#6b7280;--shadow:0 16px 40px #1018282e;--shadow-small:0 4px 16px #00000026;--scrim:#0000004d;--meter-track:#e5e7eb;--meter-sound:#9ca3af;--meter-level:#16a34a;--meter-cutoff:#1a1d21;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0e1014;--panel:#171a20;--text:#e7e9ec;--muted:#98a2b3;--border:#2a2f39;--link:#60a5fa;--accent-soft:#1e3a6e;--accent-soft-border:#3b82f6;--toggle-on-text:#bfdbfe;--danger:#ef4444;--roll-note:#64748b;--roll-black-key:#1f232b;--paper:#fdfcf8;--key-white:#e4e2dc;--key-white-border:#8b8f97;--key-black:#08090b;--shadow:0 16px 40px #00000080;--shadow-small:0 4px 16px #00000080;--scrim:#0000008c;--meter-track:#05070a;--meter-sound:#6b7484;--meter-level:#4ade80;--meter-cutoff:#f8fafc;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--bg:#0e1014;--panel:#171a20;--text:#e7e9ec;--muted:#98a2b3;--border:#2a2f39;--link:#60a5fa;--accent-soft:#1e3a6e;--accent-soft-border:#3b82f6;--toggle-on-text:#bfdbfe;--danger:#ef4444;--roll-note:#64748b;--roll-black-key:#1f232b;--paper:#fdfcf8;--key-white:#e4e2dc;--key-white-border:#8b8f97;--key-black:#08090b;--shadow:0 16px 40px #00000080;--shadow-small:0 4px 16px #00000080;--scrim:#0000008c;--meter-track:#05070a;--meter-sound:#6b7484;--meter-level:#4ade80;--meter-cutoff:#f8fafc;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif}.topbar{background:var(--panel);border-bottom:1px solid var(--border);z-index:10;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:52px;padding:6px 12px;display:flex;position:sticky;top:0}.brand{letter-spacing:-.01em;white-space:nowrap;align-items:center;gap:8px;margin:0;font-size:1.05rem;font-weight:650;display:flex}.brand img{border-radius:6px;display:block}.icon-button{background:0 0;border-color:#0000;place-items:center;width:38px;height:38px;padding:0;display:inline-grid}.icon-button:hover{background:var(--bg)}.icon-button svg,.picker-button svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px}.icon-button.small{border-color:var(--border);width:30px;height:30px;color:var(--muted);border-radius:999px;font-weight:700}.picker-button{text-align:left;background:0 0;border-color:#0000;align-items:center;gap:8px;min-width:0;max-width:min(360px,40vw);margin-right:auto;padding:4px 10px;display:flex}.picker-button:hover{background:var(--bg);border-color:var(--border)}.picker-text{min-width:0;display:grid}.picker-title{text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.picker-artist{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:.8em;overflow:hidden}.picker-artist:empty{display:none}.picker-button svg{color:var(--muted);flex:none}.picker{border:1px solid var(--border);background:var(--panel);width:min(520px,100vw - 16px);max-height:min(70vh,600px);color:var(--text);box-shadow:var(--shadow);border-radius:12px;margin:0;padding:8px;position:fixed;inset:auto}.picker[open]{flex-direction:column;display:flex}.picker::backdrop{background:0 0}.picker input{font:inherit;border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:8px;padding:10px 12px}.picker-list{flex:1;margin:6px 0;padding:0;list-style:none;overflow:auto}.picker-heading{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:8px 10px 4px;font-size:.75em;font-weight:600}.picker-option{cursor:pointer;border-radius:8px;align-items:center;gap:8px;min-height:48px;padding:4px 4px 4px 10px;display:flex}.option-text{flex:1;min-width:0;display:grid}.option-text .title,.option-text .artist{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.picker-option.unstarred{opacity:.5}.picker-option[aria-selected=true]{background:var(--bg)}.picker-option.current .title:after{content:" ✓";color:var(--link)}.picker-option .title{font-size:15px;font-weight:500}.picker-option .artist{color:var(--muted);font-size:13px}.picker-option mark{color:inherit;text-decoration:underline;-webkit-text-decoration-color:var(--accent);text-decoration-color:var(--accent);text-underline-offset:2px;background:0 0;font-weight:700;text-decoration-thickness:2px}.picker-empty .find-links{margin:8px 0}.picker-empty .empty-actions{flex-wrap:wrap;align-items:center;gap:12px;margin:8px 0 0;display:flex}.picker-empty a{color:var(--link)}.find-online{border:1px solid var(--border);border-radius:8px;margin-top:10px;padding:8px 14px;font-weight:600;text-decoration:none;display:inline-block}.picker-empty{color:var(--muted);padding:12px 10px}.picker-import{border-style:dashed}body.focus .topbar{display:none}body.focus:not(.learning) .layout{min-height:100dvh}.focus-exit{z-index:20;background:var(--panel);width:40px;height:40px;color:var(--muted);box-shadow:var(--shadow-small);opacity:.75;border-radius:999px;place-items:center;padding:0;display:grid;position:fixed;top:8px;right:8px}.focus-exit:hover{opacity:1}.focus-exit[hidden]{display:none}.focus-exit svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px}.drawer{border:none;border-right:1px solid var(--border);background:var(--panel);width:min(360px,90vw);height:100%;max-height:none;color:var(--text);box-shadow:var(--shadow);margin:0;padding:0 16px 16px;position:fixed;inset:0 auto 0 0;overflow:auto}.drawer[open]{animation:.16s ease-out drawer-in}@keyframes drawer-in{0%{transform:translate(-100%)}}.drawer::backdrop{background:var(--scrim)}.drawer-head{z-index:1;background:var(--panel);justify-content:space-between;align-items:center;padding:8px 0;display:flex;position:sticky;top:0}.drawer-section{border-top:1px solid var(--border);padding:12px 0}.drawer-section[hidden]{display:none}.drawer-section h3{text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 8px;font-size:.8rem;font-weight:600}.drawer .sensitivity{color:var(--text);gap:6px;font-size:.95em;display:grid}.drawer .sensitivity input{width:100%}.setting-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.setting-row select{font:inherit;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:6px;padding:6px 8px}.toggle-row{cursor:pointer;align-items:center;gap:8px;display:flex}.drawer .legend{gap:6px;font-size:.9em;display:grid}.legend-popover{border:1px solid var(--border);background:var(--panel);max-width:280px;color:var(--text);box-shadow:var(--shadow-small);border-radius:10px;padding:12px 14px}.legend-popover .legend{color:var(--muted);gap:6px;margin-top:8px;font-size:.9em;display:grid}.controls{align-items:center;gap:8px;display:flex}button{font:inherit;border:1px solid var(--border);background:var(--panel);color:var(--text);cursor:pointer;border-radius:8px;padding:8px 14px}button:disabled{opacity:.5;cursor:default}#play,.primary{background:var(--accent-strong);color:var(--accent-text);border-color:var(--accent-strong);font-weight:600}#play{min-width:5.5em}.layout{display:block}.stage{background:var(--paper);color:var(--paper-text);min-width:0;padding:4px 16px 16px}#pieces{gap:4px;margin:0;padding:0;list-style:none;display:grid}#pieces li{align-items:flex-start;gap:4px;min-width:0;display:flex}.piece{text-align:left;border-color:#0000;flex:1;min-width:0;display:grid}.piece.active{border-color:var(--accent)}.piece .title,.piece .artist{overflow-wrap:anywhere}.piece .artist{color:var(--muted);font-size:.85em}.remove{color:var(--muted);flex:none;padding:4px 10px;font-size:1.1em;line-height:1}.remove:hover{color:var(--danger);border-color:var(--danger)}.import{border-style:dashed;width:100%;margin-top:12px;display:block}.hint{color:var(--muted);margin:8px 4px 0;font-size:.85em}.stage{overflow:auto}.piece-title{color:var(--paper-muted);margin:8px 0;font-size:.9em}.piece-title:empty{display:none}.status{color:var(--paper-muted);padding:8px 0}.status:empty{display:none}.playback{color:var(--muted);justify-items:start;gap:8px;font-size:.9em;display:grid}.playback button{padding:4px 10px;font-size:.9em}.check{background:var(--mismatch);border-radius:8px;margin:8px 0;padding:8px 10px;font-size:.9em}#score{cursor:pointer;touch-action:pan-y;position:relative}.bar-highlight{background:var(--mismatch);border:1px solid var(--mismatch-border);pointer-events:none;border-radius:4px;position:absolute}#score[hidden],#roll[hidden],.status[hidden],.check[hidden]{display:none}.update{margin-left:-4px;position:relative}.update-badge{background:var(--danger);color:#fff;border:none;border-radius:999px;padding:2px 8px;font-size:.75em;font-weight:700}.update-message{z-index:50;border:1px solid var(--border);background:var(--panel);width:max-content;max-width:min(320px,100vw - 32px);color:var(--text);border-radius:8px;padding:10px 12px;font-size:.9em;position:absolute;top:calc(100% + 8px);left:0;box-shadow:0 4px 16px #00000026}.update-message[hidden]{display:none}.update-message a{color:var(--link);font-weight:600}.import-dialog{border:1px solid var(--border);width:min(560px,100vw - 32px);max-height:calc(100vh - 32px);color:var(--text);background:var(--panel);border-radius:12px;padding:20px 20px 0;overflow:auto}.import-dialog::backdrop{background:var(--scrim)}.import-dialog h2{margin:0 0 12px;font-size:1.1rem}.field{gap:4px;margin-bottom:12px;display:grid}.field span{font-size:.9em;font-weight:600}.field em{color:var(--muted);font-weight:400}.field small{color:var(--muted)}.field input[type=text]{font:inherit;border:1px solid var(--border);border-radius:6px;padding:6px 8px}.fields{grid-template-columns:1fr 1fr;gap:12px;display:grid}.import-dialog .hint{margin:-6px 0 12px}.import-dialog .import-tip{margin:-4px 0 16px}.hint a{color:var(--link)}.import-steps{gap:8px;margin:4px 0 12px;padding:0;list-style:none;display:grid}.import-steps li{grid-template-columns:1.4em 1fr;column-gap:6px;display:grid}.import-steps li:before{content:"○";color:var(--muted);grid-row:span 3}.import-steps li.active:before{content:"◐";color:var(--accent)}.import-steps li.done:before{content:"✓";color:#16a34a}.import-steps li.failed:before{content:"✕";color:var(--danger)}.import-steps .label{font-weight:600}.import-steps .detail{color:var(--muted);font-size:.9em}.import-steps li.failed .detail{color:var(--danger)}.import-steps progress{width:100%}.import-summary{background:var(--bg);border-radius:8px;margin-bottom:12px;padding:10px 12px;font-size:.9em}.import-summary p{margin:0}.import-summary ul{color:var(--muted);max-height:160px;margin:8px 0 0;padding-left:18px;overflow:auto}.actions{background:var(--panel);justify-content:flex-end;gap:8px;padding:12px 0 20px;display:flex;position:sticky;bottom:0}body.learning{flex-direction:column;height:100dvh;display:flex;overflow:hidden}body.learning .topbar{flex:none;position:static}body.learning .layout{flex:1;min-height:0;display:flex}body.learning .stage{flex:1;overflow:auto}.learn-panel{background:var(--panel);border-top:1px solid var(--border);flex:none;padding:8px 12px 10px}.learn-panel[hidden]{display:none}.toggle{align-items:center;gap:6px;display:inline-flex}.toggle svg{fill:none;stroke:currentColor;stroke-width:1.9px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:18px;height:18px}.toggle[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent-soft-border);color:var(--toggle-on-text)}.chip:has(input:checked){background:var(--accent-soft);border-color:var(--accent-soft-border);color:var(--toggle-on-text)}.chip{border:1px solid var(--border);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:8px;padding:8px 12px;position:relative}.chip input{opacity:0;pointer-events:none;position:absolute}.chip:has(input:focus-visible){outline:2px solid var(--link);outline-offset:2px}.dock{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px;font-size:.9em;display:flex}.dock-group{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.listen .level{width:64px;height:10px}.level{background:var(--meter-track);width:80px;height:10px;box-shadow:inset 0 0 0 1px var(--border);border-radius:4px;position:relative;overflow:hidden}.level span{height:100%;position:absolute;top:0;left:0}#level-sound{width:calc(var(--sound,0) * 100%);background:var(--meter-sound);transition:width 60ms linear}#level{width:calc(var(--level,0) * 100%);background:var(--meter-level);transition:width 60ms linear}#level-cutoff{left:calc(var(--cutoff,.17) * 100%);background:var(--meter-cutoff);width:2px}.prompt{flex:220px;min-width:0;font-size:1.1em;font-weight:600;line-height:1.3}.prompt .practice-status:not(:empty)+.listen-status{display:none}.prompt strong{font-weight:700}.listen-status.error{color:var(--danger)}.segmented{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:3px;display:inline-flex}.segmented button{white-space:nowrap;color:var(--muted);background:0 0;border:none;border-radius:7px;padding:5px 12px;font-weight:500}.segmented button[aria-checked=true]{background:var(--accent-strong);color:#fff;font-weight:600;box-shadow:0 1px 2px #10182833}.segmented button:disabled{opacity:.6}.legend{color:var(--muted);flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:.85em;display:flex}.swatch{border:1px solid var(--border);border-radius:3px;width:12px;height:12px;margin-left:4px;display:inline-block}.swatch.music{background:var(--accent);border-color:var(--accent)}.swatch.expected{box-shadow:inset 0 0 0 2px var(--accent)}.swatch.heard{background:var(--heard);border-color:var(--heard)}.swatch.correct{background:var(--correct);border-color:var(--correct)}.swatch.wrong{background:var(--danger);border-color:var(--danger)}.beats{gap:3px;display:inline-flex}.beats:empty{display:none}.beats span{background:var(--border);border-radius:50%;width:7px;height:7px}.beats span.first{width:9px;height:9px}.beats span.on{background:var(--accent)}.icon-button svg rect{fill:currentColor;stroke:none}.tempo-chip{font-variant-numeric:tabular-nums;white-space:nowrap}.tempo-chip-speed{color:var(--muted)}.tempo-popover{border:1px solid var(--border);background:var(--panel);width:260px;color:var(--text);box-shadow:var(--shadow);border-radius:12px;margin:0;padding:14px}.tempo-row{justify-content:space-between;align-items:center;gap:8px;display:flex}.tempo-step{min-width:40px;padding:4px 10px;font-size:1.2em}.tempo{color:var(--muted);align-items:center;gap:4px;display:flex}.tempo input{width:4.2em;font:inherit;text-align:center;border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:6px;padding:6px;font-size:1.1em}.speed{color:var(--muted);grid-template-columns:auto 1fr 3.2em;align-items:center;gap:8px;margin-top:12px;display:grid}#speed-value{text-align:right;font-variant-numeric:tabular-nums}.tempo-popover .hint{margin:10px 0 0}.practice-status{color:var(--text)}.ai-toggle{cursor:pointer}.note-name{z-index:2;background:var(--accent);color:var(--accent-text);pointer-events:none;white-space:nowrap;border-radius:4px;padding:0 4px;font:700 13px/18px system-ui,sans-serif;position:absolute;transform:translate(-100%,-50%);box-shadow:0 1px 2px #0003}.ai-advice{background:var(--bg);white-space:pre-wrap;border-radius:8px;padding:10px 12px;line-height:1.45}.ai-status{color:var(--muted);font-size:.9em}.ai-status progress{width:100%}.link-button{color:var(--link);background:0 0;border:none;padding:4px 6px;text-decoration:underline}.bar-highlight.green{background:#22c55e1f;border-color:#22c55e80}.bar-highlight.amber{background:#f59e0b29;border-color:#f59e0b99}.bar-highlight.red{background:var(--mismatch);border-color:var(--mismatch-border)}.report-dialog{border:1px solid var(--border);width:min(640px,100vw - 32px);max-height:calc(100vh - 32px);color:var(--text);background:var(--panel);border-radius:12px;padding:20px 20px 0;overflow:auto}.report-dialog::backdrop{background:var(--scrim)}.report-dialog h2{margin:0 0 12px;font-size:1.1rem}.report-dialog h3{margin:16px 0 8px;font-size:1rem}.scores{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;display:grid}.score{border:1px solid var(--border);text-align:center;border-radius:8px;padding:10px}.score .value{font-size:1.6rem;font-weight:700}.score .name{color:var(--muted);font-size:.85em}.counts{color:var(--muted);margin:8px 0 0;font-size:.9em}.tips,.spots,.history{gap:8px;margin:0;padding:0;list-style:none;display:grid}.tips li,.spots li{background:var(--bg);border-radius:8px;padding:10px 12px}.tips li button,.spots li button{margin-top:6px;padding:4px 10px;font-size:.9em}.history li{border-bottom:1px solid var(--border);justify-content:space-between;gap:8px;padding:4px 0;font-size:.9em;display:flex}.history .bar{background:var(--accent);vertical-align:middle;border-radius:4px;height:8px;margin-right:6px;display:inline-block}.keyboard{overflow:auto hidden}.keys{--white-w:clamp(14px, calc((100vw - 32px) / var(--whites)), 64px);height:var(--keys-h,112px);width:calc(var(--whites) * var(--white-w));-webkit-user-select:none;user-select:none;touch-action:pan-x;margin:0 auto;display:flex;position:relative}.key{cursor:pointer;color:var(--key-label);border-radius:0 0 4px 4px;padding:0;font-size:9px}.key[hidden]{display:none!important}body[data-keyboard=small] .keys{--keys-h:72px}body[data-keyboard=large] .keys{--keys-h:150px}body[data-keyboard=off] .keyboard{display:none}.key.white{width:var(--white-w);background:var(--key-white);border:1px solid var(--key-white-border);flex:none;justify-content:center;align-items:flex-end;height:100%;padding-bottom:4px;display:flex}.key.white[data-label]:after{content:attr(data-label)}.key[data-note]:after{font-size:12px;font-weight:700;content:attr(data-note)!important;color:var(--accent)!important}.key.black[data-note]{justify-content:center;align-items:flex-end;padding-bottom:3px;display:flex}.key.black[data-note]:after,.key.correct[data-note]:after,.key.music[data-note]:after{color:#fff!important}.key.black{z-index:1;top:0;left:calc(var(--at) * var(--white-w) - var(--white-w) * .3);width:calc(var(--white-w) * .6);background:var(--key-black);border:1px solid var(--key-black);height:62%;position:absolute}.key.music{background:var(--accent);border-color:var(--accent)}.key.expected{box-shadow:inset 0 0 0 3px var(--accent)}.key.heard{background:var(--heard);border-color:var(--heard)}.key.correct{background:var(--correct);border-color:var(--correct);box-shadow:none}.key.wrong{background:var(--danger);border-color:var(--danger)}.key.white.music[data-label]:after,.key.white.heard[data-label]:after,.key.white.correct[data-label]:after{color:#fff}@media (width<=720px){.brand span{display:none}.picker-button{flex:1;max-width:none;margin-right:0}.controls{width:100%}.controls #play{flex:1}.learn-panel{padding:6px 8px 8px}.dock{gap:6px}.dock-group{display:contents}.listen{order:1}.listen .label,#metronome .label{display:none}.prompt{flex:calc(100% - 170px);order:2;font-size:1em}#legend-open{order:3}.dock .segmented{flex:auto;order:4}.dock .segmented button{flex:1}#practice-start{flex:120px;order:6}#practice-skip{order:7}#metronome{order:8}.chip{order:9}#practice-history{order:10}.keys{--keys-h:88px}}@media (pointer:coarse){button,.picker-option{min-height:44px}.icon-button{width:44px;height:44px}.icon-button.small{width:36px;height:36px;min-height:36px}.tempo-step{min-width:44px}select{min-height:40px}}@media (width<=480px){.fields{grid-template-columns:1fr;gap:0}}.drawer .legend .swatch,.legend-popover .swatch{vertical-align:-1px;margin:0 8px 0 0}.library-tabs{scrollbar-width:none;margin:8px 0 4px;display:flex;overflow-x:auto}.library-tabs::-webkit-scrollbar{display:none}.library-tabs button{flex:1 0 auto}.library-tabs.searching{opacity:.45}.grades{flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0 2px;display:flex}.grades[hidden]{display:none}.grade-label{color:var(--muted);margin-right:2px;font-size:.8em}.grade-chip{border-radius:999px;min-height:32px;padding:4px 10px;font-size:.85em}.grade-chip[aria-pressed=true]{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff}.star{width:32px;height:32px;color:var(--muted);opacity:.4;background:0 0;border:none;flex:none;place-items:center;padding:0;font-size:20px;line-height:1;display:grid}.picker-option:hover .star,.star:focus-visible,.star[aria-pressed=true]{opacity:1}.star:hover{color:var(--text)}.star[aria-pressed=true]{color:var(--accent)}.star.pop{animation:.15s ease-out star-pop}@keyframes star-pop{50%{transform:scale(1.25)}}.star-top{color:var(--muted);font-size:20px}.star-top[aria-pressed=true]{color:var(--accent)}.star-top[hidden]{display:none}.star-row,.remove-piece{margin:0 0 10px;display:block}.star-row[aria-pressed=true]{color:var(--toggle-on-text);background:var(--accent-soft);border-color:var(--accent-soft-border)}.remove-piece{color:var(--danger);margin:12px 0 0}.remove-piece[hidden]{display:none}.drawer #pieces{max-height:50vh;overflow:auto}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (pointer:coarse){.star{opacity:1;width:44px;height:44px}.picker-option{min-height:56px}.library-tabs button{min-height:44px}.grade-chip{min-height:40px}}@media (width<=720px){.picker{border-radius:12px 12px 0 0;width:100vw;max-width:none;height:auto;max-height:none;bottom:0;left:0!important}.star-top{display:none}}body.focus .star-top{display:none}