.classic-examples{margin:24px 0 12px;border-top:1px solid var(--line);padding-top:18px}
.classic-heading,.classic-title{display:flex;align-items:center;justify-content:space-between;gap:14px}
.classic-heading h3{margin:0;font-size:18px;color:var(--deep)}
.classic-heading>span{font-size:12px;color:var(--muted)}
.classic-example{padding:18px 0;border-bottom:1px solid var(--line)}
.classic-title h4{font-size:20px;line-height:1.4;margin:0;color:var(--deep)}
.classic-title p{font-size:13px;color:var(--muted);margin:5px 0 0}
.classic-title button{flex:none;min-height:42px;padding:9px 15px;background:var(--deep);color:white;border-radius:6px;font-size:14px}
.classic-title button[aria-pressed=true]{background:var(--orange)}
.classic-cue,.classic-example details p{font-size:14px;line-height:1.8;max-width:65ch;margin:12px 0}
.classic-example summary{font-size:13px;color:var(--muted);cursor:pointer;padding:4px 0}
.classic-examples a{text-decoration:underline;text-underline-offset:3px}
.classic-controls{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;padding-top:16px;font-size:13px}
.classic-controls label{display:flex;align-items:center;gap:8px}
.classic-controls select{padding:7px 10px;border:1px solid var(--line);border-radius:5px;background:white;color:var(--ink);font:inherit}
.classic-controls input{accent-color:var(--deep)}
.classic-credit{font-size:12px;color:var(--muted);line-height:1.8;margin:14px 0 8px}
[data-classic-note]{min-height:1.5em;font-variant-numeric:tabular-nums}
@media(max-width:560px){.classic-heading{align-items:baseline;flex-wrap:wrap;gap:5px}.classic-title{align-items:start}.classic-title h4{font-size:18px}.classic-title button{font-size:13px;padding:9px 11px}.classic-title p{font-size:12px}.classic-controls{gap:12px}.classic-cue{font-size:14px}}

/* The pitch-class color is the same on white and black piano keys. */
.style-library-page .scale-keyboard .black-key.active:not(.root){background:var(--blue);border-color:var(--blue)}

.style-library-page .scale-keyboard.classic-keyboard{min-width:560px}

.classic-key-guide{margin:12px 0;color:var(--muted);font-size:13px;line-height:1.65}
.classic-key-guide p{margin:6px 0}
.classic-key-guide .sequence-legend{margin:8px 0;gap:16px}
.classic-key-guide [data-classic-note]{color:var(--deep);font-weight:600}
.classic-title>div{min-width:0}

.classic-credit .midi-download{background:none;border:0;border-radius:0;padding:4px 0;color:var(--blue,#174383);text-decoration:underline;text-underline-offset:4px;font:inherit;cursor:pointer;min-height:44px;}

/* Two-level scale directory; musical content stays immediately below it. */
.style-library.scale-catalog-compact{border-top:0;padding:0 0 18px;margin-bottom:18px}
.scale-catalog-title{margin:0 0 10px;font-size:17px;font-weight:700;line-height:24px;color:var(--deep)}
.scale-family-nav{display:flex;flex-wrap:wrap;gap:0 18px;margin-bottom:10px}
.scale-family-nav button{min-height:40px;padding:8px 0;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--muted);font-size:14px;line-height:20px;white-space:nowrap}
.scale-family-nav button:hover{color:var(--deep)}
.scale-family-nav button[aria-pressed=true]{color:var(--deep);border-bottom-color:var(--deep);font-weight:600}
.scale-family-nav button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.scale-family-items{gap:8px;padding-top:4px}
.scale-catalog-compact .scale-family-items button{min-height:44px;padding:10px 14px;border:1px solid var(--line);background:var(--pale,#f3f7fc);font-size:15px;line-height:22px;font-weight:600;border-radius:6px}
.scale-catalog-compact .scale-family-items button:hover{background:#e4edf9;border-color:#9db5d5}
.scale-catalog-compact .scale-family-items button[aria-pressed=true]{background:var(--deep);border-color:var(--deep);color:#fff}
.scale-catalog-compact .scale-family-items button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@media(max-width:560px){
 .scale-family-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 6px;margin-bottom:10px}
 .scale-family-nav button{min-height:44px;font-size:12px;padding:10px 0}
 .scale-family-items{gap:6px}
 .scale-catalog-compact .scale-family-items button{padding:10px;font-size:14px}
}