:root{color-scheme:light;--accent-ink:#fffefa;--hover:#2a6856;--soft:#eff1e9;--focus:#bb9255;--key-label:#1b5142;--score-line:#c7cec3}
:root[data-theme="sand"]{--bg:#f5f0e7;--paper:#fffcf6;--ink:#483d30;--muted:#7c6d5c;--line:#e6dccc;--green:#826044;--hover:#684b35;--wash:#efe2d2;--soft:#f4ecdf;--gold:#ac783a;--key-label:#684b35;--score-line:#cbbba5}
:root[data-theme="ocean"]{--bg:#edf3f5;--paper:#fbfefe;--ink:#273f4a;--muted:#657e88;--line:#d5e3e8;--green:#356274;--hover:#264f60;--wash:#e0eef2;--soft:#eaf2f5;--gold:#a5814d;--key-label:#264f60;--score-line:#b3c8d0}
:root[data-theme="lavender"]{--bg:#f3f0f6;--paper:#fefbff;--ink:#42354e;--muted:#7a6d84;--line:#e2d9e9;--green:#735784;--hover:#5e426e;--wash:#eee3f3;--soft:#efebf5;--gold:#9a7948;--key-label:#5e426e;--score-line:#c9b9d3}
:root[data-theme="rose"]{--bg:#f7f0ee;--paper:#fffcfa;--ink:#503c3c;--muted:#8a7270;--line:#eadbd7;--green:#96665f;--hover:#7e514b;--wash:#f2e1da;--soft:#f7ece8;--gold:#ac7f4c;--key-label:#7e514b;--score-line:#d4bbb5}
:root[data-theme="night"]{color-scheme:dark;--bg:#19221f;--paper:#222f28;--ink:#edf1e7;--muted:#acb9ab;--line:#3c4a3f;--green:#afcca7;--hover:#c9dfbf;--wash:#374d39;--soft:#29362e;--gold:#d5b17d;--accent-ink:#1c2b21;--focus:#e5bf87;--key-label:#294b38;--score-line:#637668}
.site-banner{display:block;max-width:1140px;margin:24px auto 0;padding:0 20px;line-height:0}
.site-banner img{display:block;width:100%;height:auto;border-radius:10px}
.header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.language-switch{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:7px;padding:2px}
.language-switch button{font-size:11px;padding:5px 9px;background:transparent;border:0;border-radius:4px;line-height:1.5}
.language-switch button[aria-pressed="true"]{background:var(--green);color:var(--accent-ink)}
#themeToggle{display:flex;align-items:center;gap:7px;font-size:12px;padding:7px 10px}
.theme-indicator{width:12px;height:12px;background:var(--green);border:1px solid currentColor;border-radius:50%;display:inline-block}
#themes{width:min(440px,calc(100vw - 28px));padding:24px}
#themes h2{margin:3px 0 18px;font-size:22px}
.theme-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;clear:both}
.theme-choice{padding:12px 7px;font-size:12px;text-align:center;background:var(--paper);border:2px solid var(--line)}
.theme-choice[aria-pressed="true"]{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.theme-preview{display:block;height:44px;border-radius:5px;border:1px solid #8884;margin-bottom:9px;background:linear-gradient(135deg,var(--swatch-bg) 0 60%,var(--swatch-accent) 60%)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
button.active,.primary,.mini-map button.active{color:var(--accent-ink)}
.primary:hover{background:var(--hover);color:var(--accent-ink)}
.search{background:var(--wash)}.search input{color:var(--ink)}
#circle:before,#circle:after{border-color:var(--line)}
nav button b{color:var(--muted)}nav button.active b,.circle-key.active small,.mini-map button.active small{color:inherit;opacity:.8}
.chapter-mark{color:var(--green);opacity:.45}.pill{background:var(--wash)}
.application{color:var(--muted)}.lab-controls select,.playbar select{background:var(--paper)}
.note-chip,.mini-map button{background:var(--soft)}.note-chip small{color:var(--muted)}
.beat{background:var(--soft);border-color:var(--line)}
.score-caption,.audio-note{color:var(--muted)}
#score{color:var(--ink)!important}#score line[stroke="#c7cec3"],#score path[stroke="#aab5a7"]{stroke:var(--score-line)}
#score text[fill]{fill:var(--muted)}#score text[fill="#405448"]{fill:var(--ink)}
#score .note.active{fill:var(--gold);color:var(--gold)}#score .note.active text{fill:var(--gold)}
:root:not([data-theme="sage"]) .white.in-scale{background:linear-gradient(#fff,color-mix(in srgb,var(--green) 20%,#fff));color:var(--key-label)}
:root:not([data-theme="sage"]) .black.in-scale{background:linear-gradient(color-mix(in srgb,var(--green) 65%,#15251d),#15251d);color:#fff}
[lang="en"] .brand{font-size:20px;letter-spacing:.3px}[lang="en"] .brand small{font-size:8px;letter-spacing:1.5px}
[lang="en"] #englishTitle{display:none}[lang="en"] .intro h1{letter-spacing:0;font-size:clamp(29px,3vw,43px)}
[lang="en"] nav button{line-height:1.4}[lang="en"] .article-top{flex-wrap:wrap}
[lang="en"] .lab-head{gap:14px}[lang="en"] .lab-head>span{flex-shrink:0}
[lang="en"] .key-grid button{overflow-wrap:anywhere}
@media(max-width:1100px){header{gap:14px}.header-actions{gap:6px}}
@media(max-width:780px){.site-banner{margin-top:12px;padding:0 16px}.site-banner img{border-radius:7px}header{height:auto;min-height:84px;gap:12px;padding:15px 20px;flex-wrap:wrap}.header-actions{gap:7px}.language-switch button{padding:4px 7px}#soundHelp{font-size:10px;padding:5px 6px}#themeToggle{font-size:11px;padding:5px 7px}.lab-head{flex-wrap:wrap}.intro p{max-width:42em}}
@media(max-width:510px){header{align-items:flex-start;gap:12px}.brand{font-size:22px}.header-actions{margin-left:auto;max-width:100%;gap:6px}#soundHelp{padding-left:0}#themeToggle{font-size:11px}.language-switch button{font-size:10px}[lang="en"] .brand{font-size:18px}[lang="en"] .intro h1{font-size:30px}.theme-grid{gap:8px}.theme-choice{font-size:11px}.key-grid small{line-height:1.4;min-height:25px}}