.practice-entry{appearance:none;font:inherit;font-size:12px;font-weight:700;border:1px solid var(--line);border-radius:999px;padding:7px 11px;color:var(--paper);background:var(--bg-3,#30363a);cursor:pointer;white-space:nowrap}
.ctrl.practice-entry{border-radius:999px;padding:7px 11px;margin-right:4px}
#queuePractice{margin-left:auto;margin-right:10px}
#practiceDialog{box-sizing:border-box;width:min(620px,calc(100% - 24px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--bg-2,#202428);color:var(--paper);box-shadow:0 24px 100px #0009}
#practiceDialog::backdrop{background:#000b}
#practiceDialog h2{font-size:22px;margin:0 0 5px}
.practice-heading{display:flex;justify-content:space-between;align-items:start;gap:12px}
#practiceTrack{margin:0;color:var(--muted);font-size:14px}
#practiceStatus{font-size:14px;line-height:1.5;min-height:42px}
#practiceDialog button,#practiceDialog select{font:inherit;color:var(--paper);background:var(--bg-3,#30363a);border:1px solid var(--line);border-radius:8px;padding:10px;min-height:44px;cursor:pointer}
#practiceDialog button:focus-visible,#practiceDialog select:focus-visible,#practiceDialog input:focus-visible{outline:2px solid #ff9588;outline-offset:3px}
#practiceControls{border:0;padding:0;margin:0;min-width:0}
#practiceControls:disabled{opacity:.4}
#practiceControls label{font-size:13px;display:block}
#practiceControls label span{float:right;color:var(--muted)}
#practiceDialog input[type=range]{display:block;width:100%;margin:8px 0 14px;accent-color:var(--red);min-height:28px;touch-action:pan-y}
.practice-options{display:flex;gap:16px;margin:12px 0 18px}
.practice-options label{flex:1}
.practice-options select{display:block;width:100%;margin-top:5px}
.practice-window{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
#practiceBounds{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:center}
#practiceWave{display:block;width:100%;height:100px;border-radius:8px;touch-action:none;cursor:ew-resize}
#practiceFrets{display:block;width:100%;height:180px;border-radius:8px}
#practiceTheory{font-size:13px;line-height:1.5;margin:8px 0 12px;font-variant-numeric:tabular-nums}
#practiceTime{display:block;text-align:center;font-size:14px;font-variant-numeric:tabular-nums;margin:8px 0 16px}
.practice-buttons{display:flex;gap:10px}.practice-buttons button{flex:1}
#practiceDialog #practiceHold{background:var(--red);color:white;border-color:transparent;flex:2}
#practiceHold[aria-pressed=true]{box-shadow:0 0 0 2px #ff9588}
.practice-hint{font-size:12px;line-height:1.5;color:var(--muted);margin:16px 0}
#practiceResume,#practicePlay{width:100%}#practicePlay{margin-bottom:10px}
@media(max-width:400px){#practiceDialog{padding:16px}.practice-window button{font-size:12px;padding:6px}.practice-options{gap:10px}.practice-buttons{gap:6px}}
@media(max-height:740px){#practiceDialog{padding:16px}#practiceStatus{margin:10px 0;min-height:0}.practice-options{margin:8px 0 10px}#practiceWave{height:80px}#practiceTime{margin:4px 0 10px}.practice-hint{margin:10px 0}#practiceDialog input[type=range]{margin:4px 0 8px}}
#practiceNow{position:sticky;top:-24px;z-index:1;margin:0 -24px 12px;padding:10px 24px 12px;background:var(--bg-2,#202428);border-bottom:1px solid var(--line);text-align:center}
#practiceChord{display:block;font-size:56px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
#practiceNext{display:block;min-height:1.4em;font-size:15px;color:var(--muted)}
@media(max-width:400px),(max-height:740px){#practiceNow{top:-16px;margin:0 -16px 10px;padding:8px 16px 10px}#practiceChord{font-size:44px}}

#practiceTone{display:block;text-align:center;font-size:13px;line-height:1.5;color:var(--paper);margin:8px 0 14px;min-height:3em;font-variant-numeric:tabular-nums}
#practiceHarmony{margin:8px 0 10px}#practiceHarmony select{width:100%;margin:5px 0}
#practiceReading{font-size:15px;line-height:1.5;margin:5px 0}
#practiceShape{font-size:13px;line-height:1.6;margin:8px 0;overflow-wrap:anywhere}
#practiceEvidence{font-size:13px;line-height:1.6;margin:8px 0 14px;color:var(--muted)}
#practiceEvidence summary{cursor:pointer;color:var(--paper);padding:8px 0;min-height:28px}
#practiceEvidence p{margin:6px 0}
/* Keep the instrument anchored while live text wraps or explanations expand.
   A fixed dialog also prevents native vertical centering from moving it. */
#practiceDialog{height:calc(100dvh - 32px);scrollbar-gutter:stable;overflow-anchor:none}
#practiceStatus{box-sizing:border-box;height:42px;min-height:42px;overflow:auto}
#practiceChord{height:1.1em;white-space:nowrap}
#practiceNext{height:1.5em;min-height:1.5em;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#practiceInsights{box-sizing:border-box;height:clamp(150px,22dvh,200px);overflow:auto;scrollbar-gutter:stable;overflow-anchor:none;margin:10px 0 14px;padding:0 8px;border-block:1px solid var(--line)}
#practiceInsights:focus-visible{outline:2px solid #ff9588;outline-offset:2px}
@media(max-width:400px){#practiceStatus{height:63px;min-height:63px}}