.scale-library{max-width:1920px;margin:auto;--scale-gutter:clamp(20px,3.5vw,64px);padding:0 var(--scale-gutter) 64px}.scale-library h1{font-size:clamp(1.6rem,4vw,2.5rem);margin:12px 0 20px}.scale-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:end}.scale-controls label{display:grid;gap:6px;font-size:.9rem}.scale-controls select{min-height:44px;background:#172520;color:#f5f5eb;border:1px solid #86a49a;border-radius:6px;padding:8px}.scale-scroll{overflow-x:auto;border:1px solid #849c91;border-radius:12px;margin:24px 0;background:#10160e;padding:20px 12px}.scale-neck{display:block;width:100%;min-width:1320px;height:auto;overflow:visible}.scale-neck text{text-anchor:middle;dominant-baseline:middle;font-family:inherit}.scale-fret-labels,.scale-string-label{fill:#e9eee8;font-size:15px}.scale-neck-edge{fill:#11170f;stroke:#66725b;stroke-width:1}.scale-string{stroke:#929c86}.scale-fret-wire{stroke:#66725b;stroke-width:1.2}.scale-nut{stroke:#dde4d2;stroke-width:4}.scale-note circle{fill:#465b36;stroke:#98b27e;stroke-width:1.5}.scale-note text{fill:#fff;font-size:14px;font-weight:700}.scale-root circle{fill:#d7f48c;stroke:#e9ffc2}.scale-root text{fill:#14200c}.scale-note .scale-character-ring{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:3 2}.scale-note .scale-root-ring{fill:none;stroke:#d7f48c;stroke-width:2}.scale-library table{border-collapse:collapse;width:100%;max-width:700px}.scale-library td,.scale-library th{text-align:left;padding:10px;border-bottom:1px solid #81968b}.scale-library :focus-visible{outline:3px solid #d1e77b;outline-offset:4px}.scale-library details{margin-top:24px}.scale-library summary{cursor:pointer;padding:12px 0;min-height:44px}.scale-library a{color:inherit}@media(max-width:400px){.scale-library{padding:16px 12px}.scale-controls label{flex:1;min-width:130px}.scale-controls select{width:100%}}

.scale-library+footer>span:nth-child(2){position:static;transform:none;max-width:none}

.scale-hero{min-height:154px;margin:0 calc(-1 * var(--scale-gutter)) 24px;padding:24px var(--scale-gutter);display:flex;flex-direction:column;justify-content:center;background:linear-gradient(90deg,#001917ed,#001917bb 40%,#0019173b),url('images/modus-design-landscape.png') center 49%/cover no-repeat;color:#fff;isolation:isolate}
.scale-hero p{margin:0 0 12px}.scale-hero h1{margin:0;text-shadow:0 2px 14px #001917}.scale-workbench{background:#062a25;border:1px solid #1b574d;border-radius:16px;padding:28px}.scale-controls{margin-bottom:26px}.scale-reading h2{font-size:24px;font-weight:500;margin:0 0 20px}.scale-formula{display:flex;align-items:center;gap:24px;flex-wrap:wrap;background:#202b18;border:1px solid #536044;border-radius:8px;padding:16px 20px}.scale-formula>span{font-size:11px;letter-spacing:.12em;color:#c1cbb5}.scale-formula>strong{font-size:22px;font-weight:600;color:#d7e9af;letter-spacing:.04em}.scale-note-chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.scale-note-chips>span{min-width:42px;min-height:40px;display:grid;place-items:center;padding:6px 10px;background:#2c3b22;border:1px solid #697b50;border-radius:5px;color:#eef4e7}.scale-note-chips>.is-root{background:#d7f48c;color:#14200c;border-color:#d7f48c}.scale-fret-band{fill:#1c2618}.scale-inlay{fill:#56624a}.scale-scroll{margin:18px 0 12px;border-color:#536044}.scale-workbench #scale-legend{font-size:13px;color:#c1cbb5;margin:12px 0 0}#scale-summary{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:600px){.scale-library{--scale-gutter:12px;padding:0 12px 44px}.scale-hero{min-height:140px;padding-block:24px;background-position:center 49%}.scale-workbench{padding:18px 12px}.scale-formula{gap:10px;padding:14px}.scale-formula>strong{font-size:18px}.scale-note-chips{gap:6px}.scale-note-chips>span{min-width:32px;padding:5px 8px}.scale-controls{gap:10px}}

/* Approved quiet practice layout; scoped to the scale library only. */
.scale-workbench{border:0;background:transparent;padding:8px 0 20px}.scale-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:16px 0 28px}.scale-toolbar .scale-controls{margin:0;gap:16px}.scale-controls label{font-size:12px;color:#c3cec6;gap:6px;flex:none}.scale-controls select{min-height:36px;padding:5px 10px;font-size:14px;border-color:#718578;background:#12251f}.scale-controls #scale-root{width:90px}.scale-controls #scale-mode{width:170px}.scale-controls #scale-view{width:145px}.scale-controls #scale-range{width:95px}.scale-actions{display:flex;align-items:center;gap:14px}.scale-actions button{min-height:44px;padding:8px 14px;border:1px solid #718578;border-radius:6px;background:transparent;color:#edf2e8;font:inherit;font-size:14px;cursor:pointer}.scale-actions #scale-practice[aria-pressed=true]{border-color:#d7f48c;color:#d7f48c}.scale-reading{display:grid;grid-template-columns:auto minmax(260px,440px) minmax(220px,1fr);grid-template-rows:auto auto;gap:8px 32px;align-items:center;margin:12px 0 24px}.scale-reading h2{grid-column:1;grid-row:1/3;font-size:24px;font-weight:500;margin:0;min-width:130px}.scale-note-chips{grid-column:2;grid-row:1;display:flex;gap:20px;margin:0;flex-wrap:nowrap;align-items:center}.scale-note-chips>span,.scale-note-chips>.is-root{display:block;min-height:0;min-width:0;padding:0;border:0;background:transparent;color:#edf2e8;font-size:15px}.scale-note-chips>.scale-row-label{font-size:13px;color:#c7d79d;min-width:46px}.scale-formula{grid-column:2;grid-row:2;padding:0;gap:20px;background:transparent;border:0;flex-wrap:nowrap}.scale-formula>span{font-size:13px;min-width:46px;letter-spacing:0;color:#c7d79d}.scale-formula>strong{font-size:15px;color:#edf2e8;font-weight:400;letter-spacing:0}.scale-context{grid-column:3;grid-row:1/3;margin:0;max-width:42ch;font-size:14px;line-height:1.5;color:#cbd6cb}.scale-scroll{background:#10160e;border:0;padding:12px 0;margin:0}.scale-neck-edge{fill:#151b10;stroke:#536044}.scale-fret-band{fill:#182014;opacity:.35}.scale-note .scale-root-ring{display:none}.scale-note .scale-character-ring{stroke:#b7c99d;stroke-dasharray:none;stroke-width:1;opacity:.8}.scale-note text{font-size:16px}.scale-hero{min-height:100px;padding-block:18px}.scale-hero h1{font-size:30px}.scale-hero p{font-size:12px;margin-bottom:8px}.scale-library details{margin-top:20px}.scale-practicing>.site-header,.scale-practicing footer,.scale-practicing .scale-hero,.scale-practicing .feedback-widget,.scale-practicing [data-feedback-root]{display:none!important}.scale-practicing .scale-library{padding-top:16px}.scale-library:fullscreen,.scale-fullscreen-fallback{background:#001917;width:100%;max-width:none;height:100%;overflow:auto;padding:18px 3vw;box-sizing:border-box}.scale-library:fullscreen .scale-hero,.scale-fullscreen-fallback .scale-hero{display:none}.scale-fullscreen-fallback{position:fixed;inset:0;z-index:2147483000}.scale-library:fullscreen .scale-neck,.scale-fullscreen-fallback .scale-neck{min-width:1320px}#scale-display-status:empty{display:none}
@media(max-width:1050px){.scale-reading{grid-template-columns:auto 1fr}.scale-context{grid-column:1/3;grid-row:3;max-width:none;margin-top:10px}.scale-toolbar{gap:12px}}
@media(max-width:600px){.scale-workbench{padding:0}.scale-toolbar{margin:12px 0 22px}.scale-controls label{flex:none;min-width:0}.scale-toolbar .scale-controls{gap:12px}.scale-actions{width:100%;justify-content:flex-end}.scale-reading{grid-template-columns:1fr;gap:10px}.scale-reading h2{grid-column:1;grid-row:1;font-size:22px}.scale-note-chips{grid-column:1;grid-row:2}.scale-formula{grid-column:1;grid-row:3}.scale-context{grid-column:1;grid-row:4}.scale-hero{min-height:100px}.scale-hero h1{font-size:28px}}
body:has(.scale-library) .modus-feedback{display:none!important}
.scale-actions #scale-practice{border-color:transparent;display:flex;align-items:center;gap:12px}.scale-actions #scale-practice::after{content:"";display:inline-block;width:34px;height:20px;border-radius:12px;background:radial-gradient(circle at 10px 10px,#e8efe2 0 6px,transparent 6.5px),#3e5345}.scale-actions #scale-practice[aria-pressed=true]::after{background:radial-gradient(circle at 24px 10px,#173326 0 6px,transparent 6.5px),#d7f48c}#scale-fullscreen::before{content:"⛶";font-size:18px;margin-right:7px}body:has(.scale-fullscreen-fallback)>.site-header,body:has(.scale-fullscreen-fallback)>footer{display:none!important}

/* #53/A06 SK-QA-006: alternative scale themes only. Original and note colors stay unchanged. */
html:is([data-theme="readable"],[data-theme="contrast"]) .scale-library {
 color:var(--ink);background-color:var(--bg);
}
html:is([data-theme="readable"],[data-theme="contrast"]) .scale-library .scale-hero {
 background:var(--panel);color:var(--ink);
}
html:is([data-theme="readable"],[data-theme="contrast"]) .scale-library .scale-hero :is(h1,p,a) {
 color:var(--ink);text-shadow:none;
}
html:is([data-theme="readable"],[data-theme="contrast"]) .scale-library .scale-controls label {
 color:var(--ink);
}
html:is([data-theme="readable"],[data-theme="contrast"]) .scale-library .scale-controls :is(select,option) {
 background-color:var(--panel);color:var(--ink);border-color:var(--line);
}
html:is([data-theme="readable"],[data-theme="contrast"]) .scale-library .scale-actions button {
 background:var(--panel);color:var(--ink);border-color:var(--line);
}
html:is([data-theme="readable"],[data-theme="contrast"]) .scale-library .scale-actions #scale-practice[aria-pressed="true"] {
 color:var(--accent);border-color:var(--accent);
}
html:is([data-theme="readable"],[data-theme="contrast"]) .scale-library .scale-actions button:hover:not(:disabled) {
 background:var(--bg);color:var(--ink);border-color:var(--accent);
}
html:is([data-theme="readable"],[data-theme="contrast"]) .scale-library :is(button,select):disabled {
 opacity:1;background-color:var(--panel);color:var(--muted);border-color:var(--line);cursor:default;
}
html:is([data-theme="readable"],[data-theme="contrast"]) .scale-library .scale-note-chips>span,
html:is([data-theme="readable"],[data-theme="contrast"]) .scale-library .scale-formula>strong {
 color:var(--ink);
}
html:is([data-theme="readable"],[data-theme="contrast"]) .scale-library .scale-note-chips>.scale-row-label,
html:is([data-theme="readable"],[data-theme="contrast"]) .scale-library .scale-formula>span,
html:is([data-theme="readable"],[data-theme="contrast"]) .scale-library :is(#scale-context,#scale-legend) {
 color:var(--muted);
}
html:is([data-theme="readable"],[data-theme="contrast"]) .scale-library :is(#scale-name,#scale-explanation,#scale-display-status,summary,caption,th,td,#scale-language) {
 color:var(--ink);
}
/* The fretboard is a dark diagram surface; keep semantic root/tone/ring colors, not a global monochrome conversion. */
html:is([data-theme="readable"],[data-theme="contrast"]) .scale-library .scale-scroll {background:#10160e}
html:is([data-theme="readable"],[data-theme="contrast"]) .scale-library .scale-neck {filter:none}
html:is([data-theme="readable"],[data-theme="contrast"]) .scale-library :is(select,button,a,summary,[tabindex]):focus-visible {
 outline:3px solid var(--accent)!important;outline-offset:4px;
}
html:is([data-theme="readable"],[data-theme="contrast"]) .scale-library .scale-actions #scale-practice::after {
 border:1px solid var(--line);
 background:radial-gradient(circle at 10px 10px,var(--bg) 0 6px,transparent 6.5px),var(--muted);
}
html:is([data-theme="readable"],[data-theme="contrast"]) .scale-library .scale-actions #scale-practice[aria-pressed="true"]::after {
 background:radial-gradient(circle at 24px 10px,var(--bg) 0 6px,transparent 6.5px),var(--accent);
}
html:is([data-theme="readable"],[data-theme="contrast"]) .scale-library:is(:fullscreen,.scale-fullscreen-fallback) {
 background:var(--bg);color:var(--ink);
}