/* Staff remains readable in narrow windows; swipe horizontally if needed. */
.figure .scale-staff { width:100%; overflow-x:auto; margin:-20px 0 8px; color:#273747; }
.figure .scale-staff svg { display:block; width:100%; min-width:540px; height:auto; }
.figure .scale-staff-note { color:#273747; }
.figure .scale-staff-note.sounding { color:#bd5b18; }
.figure .scale-staff-note text:not(.music-glyph) { fill:currentColor; }
.figure .readout { flex-wrap:wrap; }
@media(max-width:600px) { .figure .scale-staff {margin:0 0 8px;} }

.page details.pedantry {margin:24px 0;padding:0 18px;background:#f4f1e9;border:1px solid #d8cfbd;border-radius:10px;}
.page details.pedantry summary {cursor:pointer;padding:16px 0;font-weight:700;line-height:1.5;}
.page details.pedantry summary:focus-visible {outline:3px solid #245a8b;outline-offset:4px;}
.page details.pedantry p {margin:0 0 18px;}

#fig-pentatonic .pentatonic-panel[hidden] {display:none !important;}
#fig-pentatonic .pentatonic-switch {display:flex;gap:8px;margin:12px 0 4px;}
#fig-pentatonic .pentatonic-switch button {padding:10px 24px;border:1px solid #aaa18e;border-radius:7px;background:#fffdf8;color:#273747;font:inherit;cursor:pointer;}
#fig-pentatonic .pentatonic-switch button[aria-pressed="true"] {background:#285da1;color:white;border-color:#285da1;}
#fig-pentatonic .pentatonic-switch button:focus-visible {outline:3px solid #bb681a;outline-offset:3px;}
#fig-pentatonic .pentatonic-switch button:disabled {opacity:.6;cursor:default;}
#fig-pentatonic .pentatonic-hint {font-size:14px;margin:4px 0 16px;color:#65717a;}
/* Compact review revision: controls, notation and keyboard read as one unit. */
.figure.compact-explorer,.figure:has(.compact-explorer) {padding:16px 18px;margin:22px 0;}
.compact-explorer [hidden] {display:none !important;}
.explorer-toolbar {display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px;}
.explorer-toolbar .keyname {font-size:19px;line-height:1.25;margin-right:auto;}
.explorer-toolbar label {display:flex;align-items:center;gap:5px;font-size:13px;color:#58646b;}
.explorer-toolbar select,.explorer-toolbar button {min-height:36px;border-radius:6px;border:1px solid #b7afa0;padding:5px 9px;background:#fffdf8;color:#263746;font:inherit;font-size:14px;}
.explorer-toolbar button {background:#285da1;color:white;border-color:#285da1;cursor:pointer;}
.explorer-toolbar button:disabled {opacity:.55;}
.explorer-toolbar select:focus-visible,.explorer-toolbar button:focus-visible {outline:3px solid #b96b22;outline-offset:2px;}
.compact-explorer .fig-controls {margin:0;}
.compact-explorer .dirrow {flex-wrap:wrap;margin:4px 0 8px;}
.compact-explorer .dirrow button {font-size:13px;padding:7px 10px;}
.compact-explorer .explorer-music-scroll {overflow-x:auto;}
.compact-explorer .explorer-music {min-width:520px;}
.compact-explorer .explorer-music > svg {margin:0;}
.compact-explorer .scale-staff {margin:0;overflow:visible;}
.compact-explorer .scale-staff svg {margin:0;min-width:0;}
.compact-explorer .compact-facts {gap:10px;margin:2px 0;font-size:12px;}
.compact-explorer .compact-facts .sig,.compact-explorer .compact-facts .aux {font-size:12px;}
.compact-explorer .controls {margin:3px 0;gap:6px;}
.compact-explorer .legend {font-size:11px;}
.compact-explorer .figcaption {margin:6px 0 0;font-size:13px;line-height:1.4;}
#fig-pentatonic > .figlabel {font-size:14px;letter-spacing:.5px;}
#fig-pentatonic .pentatonic-switch {margin:6px 0;}
#fig-pentatonic .pentatonic-switch button {padding:6px 16px;min-height:34px;font-size:14px;}
#fig-pentatonic .pentatonic-hint {margin:4px 0 8px;font-size:12px;}
@media(max-width:600px){
 .figure.compact-explorer,.figure:has(.compact-explorer){padding:12px;margin:18px 0;}
 .explorer-toolbar .keyname {width:100%;font-size:18px;}
 .explorer-toolbar select,.explorer-toolbar button {min-height:40px;}
}
#fig-pentatonic > .figlabel,#fig-pentatonic > .pentatonic-hint {display:none;}
#fig-pentatonic > .pentatonic-switch {margin:0 0 10px;}