.scroll-staff-wrapper{box-sizing:border-box;background:#fff;border-radius:8px;width:100%;padding:8px;box-shadow:0 4px 12px #00000026}.scroll-staff-svg{width:100%;height:auto;display:block}.scroll-staff-line,.scroll-staff-ledger{stroke:#000;stroke-width:1.2px}.scroll-staff-system-line{stroke:#000;stroke-width:2.5px}.scroll-staff-clef{fill:#000;-webkit-user-select:none;user-select:none;font-family:serif}.scroll-staff-clef.treble{font-size:92px}.scroll-staff-clef.bass{font-size:60px}.scroll-staff-signature,.scroll-staff-accidental{fill:#000;-webkit-user-select:none;user-select:none;font-family:serif;font-size:22px}.scroll-staff-zone{fill:#d4a0171a;transition:fill .2s}.scroll-staff-zone.waiting{fill:#d4a0173d}.scroll-staff-playhead{stroke:#d4a017;stroke-width:2px}.scroll-staff-playhead.waiting{stroke-width:3px}.scroll-staff-notehead.pending,.scroll-staff-accidental.pending{fill:#1f1f1f}.scroll-staff-stem.pending{stroke:#1f1f1f}.scroll-staff-notehead.matched,.scroll-staff-accidental.matched{fill:#2e9d4f}.scroll-staff-stem.matched{stroke:#2e9d4f}.scroll-staff-notehead.chord-tone{fill:#fff;stroke:#2e9d4f;stroke-width:2px}.scroll-staff-accidental.chord-tone{fill:#2e9d4f}.scroll-staff-stem.chord-tone{stroke:#2e9d4f}.scroll-staff-notehead.ghost,.scroll-staff-accidental.ghost{fill:#2e9d4f;opacity:.4}.scroll-staff-notehead.missed,.scroll-staff-accidental.missed{fill:#dc2626}.scroll-staff-stem.missed{stroke:#dc2626}.scroll-staff-stem{stroke-width:1.4px}.scroll-staff-notehead.skipped,.scroll-staff-accidental.skipped{fill:#b5b5b5}.scroll-staff-stem.skipped{stroke:#b5b5b5}.scroll-staff-notehead.detected,.scroll-staff-accidental.detected{fill:#aa3bff}.scroll-staff-notehead.detected{stroke:#7a1fc4;stroke-width:1px}.scroll-staff-detected-label{fill:#aa3bff;stroke:#fff;stroke-width:3px;paint-order:stroke;font-family:ui-monospace,Consolas,monospace;font-size:13px;font-weight:700}.scroll-staff-wrapper{position:relative}.scroll-staff-range-line{stroke:#000;stroke-width:2px;stroke-linecap:round}.scroll-staff-range-label{fill:#000;font-family:ui-monospace,Consolas,monospace;font-size:13px;font-weight:600}.scroll-staff-barline{stroke:#000;stroke-width:1.2px}.scroll-staff-chord-label{fill:#333;font-family:ui-sans-serif,system-ui,sans-serif;font-size:14px;font-weight:700}.scroll-staff-note-hit{fill:#0000}.scroll-staff-note.clickable{cursor:pointer}.scroll-staff-note.clickable:hover .scroll-staff-notehead{stroke:#aa3bff;stroke-width:2px}.key-intervals-popover{box-sizing:border-box;background:var(--code-bg);width:300px;max-width:calc(100vw - 16px);color:var(--text);border:1px solid var(--accent-border);text-align:left;border-radius:10px;flex-direction:column;gap:12px;margin:0;padding:16px;inset:auto;box-shadow:0 12px 32px #00000059}.key-intervals-popover:popover-open{display:flex}.key-intervals-popover::backdrop{background:0 0}.key-intervals-section{flex-direction:column;gap:6px;display:flex}.key-intervals-section+.key-intervals-section{border-top:1px solid var(--border);padding-top:12px}.key-intervals-label{letter-spacing:.04em;text-transform:uppercase;color:var(--text);margin:0;font-size:12px;font-weight:700}.key-intervals-section select{font:inherit;border:1px solid var(--control-border);background:var(--bg);color:var(--text-h);border-radius:8px;padding:6px 8px;font-size:14px}.key-intervals-option{color:var(--text-h);cursor:pointer;align-items:center;gap:8px;font-size:14px;display:flex}.key-intervals-warning{color:#c2410c;margin:0;font-size:13px}.key-intervals-columns{grid-template-columns:1fr 1fr;grid-auto-rows:21px;column-gap:16px;display:grid}.key-intervals-column-head{color:var(--text);align-self:end;font-size:11px}.key-intervals-columns .key-intervals-option{align-self:center}.key-intervals-name{flex-direction:column;line-height:1.15;display:flex}.key-intervals-name small{color:var(--text);font-size:11px;line-height:1.2}.reading-page{box-sizing:border-box;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:1100px;margin:0 auto;padding:24px 24px 80px;display:flex}.reading-page .capture-btn,.reading-page .cancel-btn{cursor:pointer;border-radius:10px;padding:10px 18px;font-size:14px}.reading-page .capture-btn{border:1px solid var(--accent-border);background:var(--accent-bg);color:var(--text-h)}.reading-page .capture-btn:disabled{opacity:.5;cursor:default}.reading-page .cancel-btn{border:1px solid var(--border);background:var(--code-bg);color:var(--text)}.reading-page .cancel-btn:hover{border-color:var(--accent-border);color:var(--text-h)}.reading-page .practice-actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.reading-options{flex-wrap:wrap;justify-content:center;align-items:center;gap:16px 24px;display:flex}.reading-option{color:var(--text-h);align-items:center;gap:8px;font-size:14px;display:flex}.reading-option select,.reading-option input{font:inherit;border:1px solid var(--border);background:var(--bg);color:var(--text-h);border-radius:8px;padding:6px 8px;font-size:14px}.reading-option input{width:64px}.reading-mode{border:1px solid var(--border);border-radius:10px;display:inline-flex;overflow:hidden}.reading-mode button{font:inherit;background:var(--code-bg);color:var(--text);cursor:pointer;border:none;padding:7px 14px;font-size:14px}.reading-mode button+button{border-left:1px solid var(--border)}.reading-mode button.active{background:var(--accent-bg);color:var(--text-h);font-weight:600}.reading-status{min-height:1.4em;color:var(--text);text-align:center;white-space:pre-wrap;margin:0;font-size:14px}.drone-leak-notice{background:var(--code-bg);max-width:560px;color:var(--text-h);border:1px solid #f59e0b;border-radius:10px;align-items:center;gap:12px;margin:8px auto 0;padding:8px 12px;font-size:14px;display:flex}.drone-leak-notice p{flex:1;margin:0}.drone-leak-notice button{flex:none}.reading-checkbox{cursor:pointer}.reading-checkbox input{width:auto}.reading-volume input[type=range]{width:110px;accent-color:var(--accent);background:0 0;border:none;padding:0}.reading-volume input[type=range]:disabled{opacity:.4}