:root{--bg:#f7f7f5;--panel:#fff;--text:#1f2328;--muted:#6b7280;--border:#e5e7eb;--accent:#3b82f6;--accent-text:#fff;--danger:#dc2626;--mismatch:#dc26261f;--heard:#22c55e;--correct:#15803d;--mismatch-border:#dc262699;--roll-note:#94a3b8;--roll-black-key:#f1f5f9;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{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;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;display:flex;position:sticky;top:0}.topbar h1{margin:0;font-size:1.1rem}.controls{flex-wrap:wrap;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);color:var(--accent-text);border-color:var(--accent)}#play{min-width:6.5em}.speed{color:var(--muted);align-items:center;gap:6px;display:flex}#speed-value{min-width:3.5em}.layout{grid-template-columns:260px 1fr;gap:16px;padding:16px;display:grid}.library,.stage{background:var(--panel);border:1px solid var(--border);border-radius:12px;min-width:0;padding:12px}.library h2{margin:4px 4px 8px;font-size:1rem}.library ul{gap:4px;margin:0;padding:0;list-style:none;display:grid}.library 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{margin-bottom:8px;font-weight:600}.piece-title:empty{display:none}.status{color:var(--muted);padding:8px 0}.playback{color:var(--muted);flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px;font-size:.9em;display:flex}.playback button{padding:4px 10px;font-size:.9em}.check{background:var(--mismatch);border-radius:8px;margin-bottom:8px;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],.playback[hidden],.check[hidden]{display:none}.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:#0000004d}.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-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}#learn[aria-pressed=true],#listen[aria-pressed=true]{background:var(--text);color:var(--panel);border-color:var(--text)}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}body.learning .library,body.learning .stage{overflow:auto}.learn-panel{background:var(--panel);border-top:1px solid var(--border);flex:none;padding:8px 16px 12px}.learn-panel[hidden]{display:none}.learn-bar{flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:8px;font-size:.9em;display:flex}.level{background:var(--border);border-radius:4px;width:60px;height:8px;overflow:hidden}.level span{height:100%;width:calc(var(--level,0) * 100%);background:var(--heard);transition:width 60ms linear;display:block}.listen-status{color:var(--muted);flex:1;min-width:12em}.listen-status.error{color:var(--danger)}.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)}.metronome{align-items:center;gap:4px;display:flex}#metronome[aria-pressed=true]{background:var(--text);color:var(--panel);border-color:var(--text)}.tempo-step{padding:4px 10px}.tempo{color:var(--muted);align-items:center;gap:4px;display:flex}.tempo input{width:4.2em;font:inherit;border:1px solid var(--border);border-radius:6px;padding:4px 6px}.beats{gap:4px;margin-left:4px;display:flex}.beats span{background:var(--border);border-radius:50%;width:10px;height:10px}.beats span.first{width:12px;height:12px}.beats span.on{background:var(--accent)}.practice-bar{flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:8px;font-size:.9em;display:flex}.practice-bar label{color:var(--muted);align-items:center;gap:6px;display:flex}.practice-bar select{font:inherit;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:6px;padding:4px 6px}.practice-status{min-width:14em;color:var(--muted);flex:1}.practice-status strong{color:var(--text)}.ai-toggle{cursor:pointer}.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(--accent);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:#0000004d}.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:max(14px, calc((100vw - 32px) / var(--whites)));height:120px;width:calc(var(--whites) * var(--white-w));-webkit-user-select:none;user-select:none;touch-action:pan-x;display:flex;position:relative}.key{cursor:pointer;color:var(--muted);border-radius:0 0 4px 4px;padding:0;font-size:9px}.key.white{width:var(--white-w);background:#fff;border:1px solid #c9ccd1;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.black{z-index:1;top:0;left:calc(var(--at) * var(--white-w) - var(--white-w) * .3);width:calc(var(--white-w) * .6);background:#1f2328;border:1px solid #1f2328;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.white.music[data-label]:after,.key.white.heard[data-label]:after,.key.white.correct[data-label]:after{color:#fff}@media (width<=720px){.layout{grid-template-columns:1fr}body.learning .library{display:none}.keys{height:96px}}@media (width<=480px){.fields{grid-template-columns:1fr;gap:0}}