/* Palette slots are shared by notation, controls, and both keyboard layouts. */
:root { color-scheme: light; }
:root[data-theme='coast'] {
 --page:#dce5e9; --panel:#f5f8f8; --text:#283f50; --secondary:#566b79;
 --accent:#306b89; --accent-hover:#255a76; --on-accent:#f7fbfc;
 --border:#b7cbd3; --well:#e2ebee; --hover:#d6e7ed;
 --shape-leaf:#9bbcb9; --shape-blue:#a6c4d5; --shape-sand:#d5c79e; --gold:#e9cd8c;
 --success-wash:#bfdbd2; --error-wash:#efd4b4; --success:#387b66; --error:#946137;
 --selected-border:#729eaf; --selected-text:#295a71; --staff-line:#6b8492;
 --switch-off:#b1c5ce; --gold-text:#544524; --gold-hover:#dfbd6b; --disabled:#dedfda;
 --key-dark:#3d6278; --key-edge:#294b60; --key-light:#f4f9fa; --key-light-edge:#b6cbd3;
 --key-unused:#d3e0e4; --key-unused-text:#617783; --key-unused-edge:#b7cad2;
 --key-active:#b5d9da; --key-active-edge:#6ca4ad; --key-active-dark:#477e93; --key-active-dark-edge:#315e75;
 --hint:#98732e; --key-frame:#436b80; --note-tint:#d3e6ec; --backdrop:#182f4666; --piano-c:#306b89;
}
:root[data-theme='clay'] {
 --page:#e6d9ce; --panel:#fff5ec; --text:#4c3932; --secondary:#7a6256;
 --accent:#a14f38; --accent-hover:#873e2c; --on-accent:#fff9f0;
 --border:#d3b9a7; --well:#efdfd0; --hover:#f1d9c8;
 --shape-leaf:#b7b49b; --shape-blue:#c6a690; --shape-sand:#dab883; --gold:#e5bf79;
 --success-wash:#d5ddbc; --error-wash:#efc6b2; --success:#697f45; --error:#a04e37;
 --selected-border:#bd856c; --selected-text:#854730; --staff-line:#957b6c;
 --switch-off:#cfb6a2; --gold-text:#584322; --gold-hover:#dab066; --disabled:#e8d7c2;
 --key-dark:#795849; --key-edge:#5c3e34; --key-light:#fff9ee; --key-light-edge:#ceb79b;
 --key-unused:#e1cfbd; --key-unused-text:#816b5a; --key-unused-edge:#ccb49e;
 --key-active:#e4be9e; --key-active-edge:#bd8665; --key-active-dark:#aa775b; --key-active-dark-edge:#80583f;
 --hint:#a55e26; --key-frame:#87654f; --note-tint:#eed5c3; --backdrop:#47302466; --piano-c:#a14f38;
}
:root[data-theme='midnight'], :root[data-theme='dusk'] {
 color-scheme:dark;
 --piano-white:#e4e8e9; --piano-ink:#263441; --piano-c:#286552;
 --switch-knob:#f0f3f1; --gold-text:#302919; --key-dark-text:#e9eff5;
 --active-text:#182e32;
}
:root[data-theme='midnight'] {
 --page:#141e2b; --panel:#233244; --text:#e4edf3; --secondary:#adbccc;
 --accent:#98d3c5; --accent-hover:#b3e2d7; --on-accent:#163a35;
 --border:#465c70; --well:#192739; --hover:#334c5d;
 --shape-leaf:#2b4a4e; --shape-blue:#29445e; --shape-sand:#4d4940; --gold:#dfbf7f;
 --success-wash:#315448; --error-wash:#644636; --success:#9bd2b7; --error:#edb18b;
 --selected-border:#709e9e; --selected-text:#b2e6d8; --staff-line:#8ea6b9;
 --switch-off:#53687b; --gold-hover:#edce92; --disabled:#3f4b55;
 --key-dark:#182535; --key-edge:#101b27; --key-light:#3d5268; --key-light-edge:#25384b;
 --key-unused:#28394c; --key-unused-text:#9aaabe; --key-unused-edge:#1d2c3d;
 --key-active:#a1d6c9; --key-active-edge:#76b4a6; --key-active-dark:#477f78; --key-active-dark-edge:#335c5b;
 --hint:#edcd8e; --key-frame:#142230; --note-tint:#304c5a; --backdrop:#08121dcc;
}
:root[data-theme='dusk'] {
 --page:#24212e; --panel:#373243; --text:#f1eaf3; --secondary:#c3b6cc;
 --accent:#c5b0e6; --accent-hover:#d7c5f1; --on-accent:#352547;
 --border:#665870; --well:#2b2638; --hover:#4c405a;
 --shape-leaf:#454752; --shape-blue:#4a3c60; --shape-sand:#594741; --gold:#e4b992;
 --success-wash:#40564f; --error-wash:#6e454a; --success:#b4d6ba; --error:#f0b3a5;
 --selected-border:#a28abf; --selected-text:#dcc8f4; --staff-line:#b3a2bf;
 --switch-off:#6c5e78; --gold-hover:#f1caa7; --disabled:#524652;
 --key-dark:#241e31; --key-edge:#191421; --key-light:#5a4d69; --key-light-edge:#3a3048;
 --key-unused:#40364d; --key-unused-text:#b7a9c6; --key-unused-edge:#2d2439;
 --key-active:#cfbce6; --key-active-edge:#a48bc1; --key-active-dark:#7d639b; --key-active-dark-edge:#5c4778;
 --hint:#f0c79f; --key-frame:#261f33; --note-tint:#51415e; --backdrop:#17101dcc;
 --active-text:#352547; --piano-c:#744f89;
}
/* Keep accidental keys legible independently of accent-button text. */
.typing-key.sharp-key, .piano-key.black { color:var(--key-dark-text, #fff9e7); }
.typing-key.sharp-key.active { color:var(--active-text, #34493d); }
.feedback-mark { color:inherit; }
.connection-dot { background:var(--switch-off, #a2b795); }
.progress-dots span { background:var(--border, #e2e9e9); }
.theme-trigger { white-space:nowrap; }
.theme-trigger-swatch { display:flex; align-items:center; width:16px; height:23px; flex-shrink:0; }
.theme-trigger-swatch::before { content:""; width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg,var(--teal) 50%,var(--ochre) 50%); }
#theme-dialog { max-width:480px; }
#theme-title { margin:0 28px 22px 0; }
.theme-options { display:grid; gap:10px; }
.theme-option { display:flex; align-items:center; gap:16px; width:100%; padding:12px; text-align:left; background:transparent; border:1px solid var(--border, #d5d9b8); border-radius:18px; color:var(--ink); }
.theme-option:hover { background:var(--hover, #e3edda); }
.theme-option[aria-pressed='true'] { border-color:var(--teal); background:var(--hover, #e3edda); box-shadow:inset 0 0 0 1px var(--teal); }
.theme-option-info { display:grid; gap:4px; }
.theme-option strong { font-size:15px; font-weight:650; }
.theme-option small { font-size:12px; color:var(--muted); }
.theme-check { margin-left:auto; color:var(--teal); visibility:hidden; }
.theme-option[aria-pressed='true'] .theme-check { visibility:visible; }
.theme-preview { display:flex; align-items:center; width:76px; height:46px; flex-shrink:0; gap:4px; padding:8px; border-radius:12px; background:var(--preview-page); }
.theme-preview i { display:block; width:17px; height:28px; border-radius:7px; background:var(--preview-panel); }
.theme-preview i:nth-child(2) { background:var(--preview-accent); height:23px; }
.theme-preview i:nth-child(3) { background:var(--preview-gold); height:18px; }
.preview-island { --preview-page:#e5dfcf; --preview-panel:#fff5ef; --preview-accent:#367557; --preview-gold:#efd078; }
.preview-coast { --preview-page:#dce5e9; --preview-panel:#f5f8f8; --preview-accent:#306b89; --preview-gold:#e9cd8c; }
.preview-clay { --preview-page:#e6d9ce; --preview-panel:#fff5ec; --preview-accent:#a14f38; --preview-gold:#e5bf79; }
.preview-midnight { --preview-page:#141e2b; --preview-panel:#3d5268; --preview-accent:#98d3c5; --preview-gold:#dfbf7f; }
.preview-dusk { --preview-page:#24212e; --preview-panel:#5a4d69; --preview-accent:#c5b0e6; --preview-gold:#e4b992; }
@media(max-width:850px) { .topbar { flex-wrap:wrap; height:auto; padding-top:20px; padding-bottom:14px; } .header-actions { flex-wrap:wrap; gap:10px; } }
@media(max-width:680px) { .header-actions { justify-content:flex-start; } }