/* The axis is outside the horizontal scroller; every pitch row stays visible. */
#pianoScroll.pitch-chart-shell{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:start;position:relative;height:auto;max-height:none;overflow:visible;border-radius:10px;isolation:isolate}
#pianoAxis{display:block;width:58px;min-height:0;border-right:1px solid #dddfea;border-radius:10px 0 0 10px;background:#fff;position:relative;z-index:2}
.pitch-time-scroll{min-width:0;width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#bcb6d6 #f7f6fa;border-radius:0 10px 10px 0}
.pitch-time-scroll:focus-visible{outline:2px solid #9f94de;outline-offset:-2px}
.pitch-time-scroll #pianoSvg{display:block;min-height:0;max-width:none;overflow:visible;touch-action:pan-x}
.pitch-axis-heading{font-size:10px;fill:#898298;font-weight:600}
.pitch-axis-note{font-size:11px;fill:#838397;font-weight:500;font-variant-numeric:tabular-nums}
.pitch-axis-c{fill:#5b546f;font-weight:750}
.pitch-time-label{font-size:10px;fill:#9294a4;font-variant-numeric:tabular-nums}
.pitch-phrase{cursor:pointer;outline:none}
.pitch-phrase:hover rect,.pitch-phrase:focus-visible rect{stroke:#8774d1;stroke-width:2}
.pitch-view-summary{font-size:11px;line-height:1.65;color:#777086;margin:0 0 9px;min-height:18px}
.pitch-note-lyric text{font-size:12px;font-weight:650;fill:#826329}.pitch-note-lyric line{stroke:#d2b77e;stroke-width:2;opacity:.55}
.pitch-note-lyric-estimate line{stroke-dasharray:5 3}.pitch-note-lyric-estimate text{fill:#927036}
.pitch-note-lyric .pitch-lyric-leader{stroke-width:1;opacity:.35}.pitch-note-lyric circle{fill:#c5a05d;opacity:.7}
.pitch-reference-sequence{margin-top:14px;padding:13px 15px;border:1px solid #e8e4dc;border-radius:10px;background:#fcfbf8}
.pitch-sequence-heading{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 12px;font-size:12px;color:#514a41}.pitch-sequence-heading span{font-size:11px;color:#928b80}
.pitch-sequence-lyric{margin:8px 0 5px;font-size:14px;line-height:1.6;color:#60564b}.pitch-sequence-status{font-size:11px;color:#8b7e6b;margin:0 0 10px;line-height:1.6}
.pitch-sequence-notes{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}.pitch-sequence-note{flex:0 0 auto;min-width:54px;padding:7px 8px;background:#fff;border:1px solid #e8e2d8;border-radius:7px;display:flex;flex-direction:column;align-items:center;gap:4px}
.pitch-sequence-note.pending{border-style:dashed}.pitch-sequence-note strong{font-size:12px;color:#756343}.pitch-sequence-word{font-size:13px;color:#50463c;min-height:18px}.pitch-sequence-note small{font-size:10px;color:#a39887}
.pitch-hover{position:absolute;z-index:5;max-width:240px;background:#302942f0;color:#fff;border-radius:8px;padding:9px 11px;box-shadow:0 5px 16px #28203622;font-size:11px;line-height:1.7;white-space:pre-line;pointer-events:none}
.pitch-panel .plot-tools{flex-wrap:wrap;justify-content:flex-end;gap:7px;flex-shrink:0}
.pitch-panel .plot-tools .pitch-view-button{width:auto;padding:0 9px;font-size:11px;line-height:24px;color:#776b94}
.pitch-panel .plot-tools .pitch-view-button[aria-pressed="true"]{background:#efebfb;border-color:#dcd4f5;color:#6853b6}
.pitch-panel .plot-tools #zoomValue{min-width:32px;text-align:center}
@media(max-width:730px){.pitch-panel .plot-caption{flex-wrap:wrap;gap:8px}.pitch-panel .plot-tools{margin-left:auto}.pitch-view-summary{font-size:10px}}