/* Generated by scripts/build-app-themes.mjs. Edit public/js/app-themes.js. */
[data-theme-preview='classic-light'] {
  color-scheme: light;
  --page-bg: #f5f5f3;
  --panel-bg: #ecebe7;
  --surface-card: #faf9f6;
  --surface-card-muted: #f4f3ef;
  --surface-key-card: #faf9f6;
  --ink: #1f1d1a;
  --muted: #66625b;
  --accent: #a0642f;
  --accent-deep: #a0642f;
  --accent-soft: rgba(160, 100, 47, 0.13);
  --page-glow: rgba(113, 73, 42, 0.12);
  --panel-border: rgba(129, 122, 112, 0.5);
  --picker-border-color: #817a70;
  --theme-card: #faf9f6;
  --theme-control: #f4f3ef;
  --theme-panel: #ecebe7;
  --theme-text: #1f1d1a;
  --theme-muted: #66625b;
  --theme-line: #817a70;
  --theme-accent: #a0642f;
  --theme-on-accent: #fff7ef;
  --theme-action: #477add;
  --theme-on-action: #fff7ef;
  --theme-action-rgb: 71, 122, 221;
  --theme-tempo: #0a84ff;
  --theme-tempo-rgb: 10, 132, 255;
  --theme-playback: #096fbe;
  --theme-playback-rgb: 9, 111, 190;
  --theme-on-playback: #ffffff;
  --theme-secondary: #71492a;
  --theme-on-note: #ffffff;
  --theme-red: #ba2f23;
  --theme-blue: #2676ae;
  --theme-green: #488935;
  --theme-pink: #b63e79;
  --theme-orange: #d57825;
  --theme-teal: #167d7a;
  --theme-purple: #8054b3;
  --theme-card-rgb: 250, 249, 246;
  --theme-control-rgb: 244, 243, 239;
  --theme-panel-rgb: 236, 235, 231;
  --theme-text-rgb: 31, 29, 26;
  --theme-muted-rgb: 102, 98, 91;
  --theme-line-rgb: 129, 122, 112;
  --theme-accent-rgb: 160, 100, 47;
  --theme-secondary-rgb: 113, 73, 42;
  --theme-red-rgb: 186, 47, 35;
  --theme-blue-rgb: 38, 118, 174;
  --theme-green-rgb: 72, 137, 53;
  --theme-pink-rgb: 182, 62, 121;
  --theme-orange-rgb: 213, 120, 37;
  --theme-teal-rgb: 22, 125, 122;
  --theme-purple-rgb: 128, 84, 179;
  --theme-glow: none;
  --chord-tone-root: #ba2f23;
  --chord-tone-second: #2676ae;
  --chord-tone-third: #488935;
  --chord-tone-fourth: #b63e79;
  --chord-tone-fifth: #d57825;
  --chord-tone-sixth: #167d7a;
  --chord-tone-seventh: #8054b3;
  --landing-surface: #ecebe7;
  --landing-surface-strong: #ecebe7;
  --landing-card-surface: #faf9f6;
  --landing-card-surface-strong: #faf9f6;
  --landing-border: rgba(129, 122, 112, 0.5);
  --landing-border-soft: rgba(129, 122, 112, 0.3);
}
:root[data-color-theme='classic-light'] {
  --theme-card: #faf9f6;
  --theme-control: #f4f3ef;
  --theme-panel: #ecebe7;
  --theme-text: #1f1d1a;
  --theme-muted: #66625b;
  --theme-line: #817a70;
  --theme-accent: #a0642f;
  --theme-on-accent: #fff7ef;
  --theme-action: #477add;
  --theme-on-action: #fff7ef;
  --theme-action-rgb: 71, 122, 221;
  --theme-tempo: #0a84ff;
  --theme-tempo-rgb: 10, 132, 255;
  --theme-playback: #096fbe;
  --theme-playback-rgb: 9, 111, 190;
  --theme-on-playback: #ffffff;
  --theme-secondary: #71492a;
  --theme-on-note: #ffffff;
  --theme-red: #ba2f23;
  --theme-blue: #2676ae;
  --theme-green: #488935;
  --theme-pink: #b63e79;
  --theme-orange: #d57825;
  --theme-teal: #167d7a;
  --theme-purple: #8054b3;
  --theme-card-rgb: 250, 249, 246;
  --theme-control-rgb: 244, 243, 239;
  --theme-panel-rgb: 236, 235, 231;
  --theme-text-rgb: 31, 29, 26;
  --theme-muted-rgb: 102, 98, 91;
  --theme-line-rgb: 129, 122, 112;
  --theme-accent-rgb: 160, 100, 47;
  --theme-secondary-rgb: 113, 73, 42;
  --theme-red-rgb: 186, 47, 35;
  --theme-blue-rgb: 38, 118, 174;
  --theme-green-rgb: 72, 137, 53;
  --theme-pink-rgb: 182, 62, 121;
  --theme-orange-rgb: 213, 120, 37;
  --theme-teal-rgb: 22, 125, 122;
  --theme-purple-rgb: 128, 84, 179;
  --theme-glow: none;
}

[data-theme-preview='classic-dark'] {
  color-scheme: dark;
  --page-bg: #12100d;
  --panel-bg: #1b1713;
  --surface-card: #231e18;
  --surface-card-muted: #2b241d;
  --surface-key-card: #231e18;
  --ink: #f4eee6;
  --muted: #c4b8aa;
  --accent: #d28a47;
  --accent-deep: #d28a47;
  --accent-soft: rgba(210, 138, 71, 0.13);
  --page-glow: rgba(240, 181, 111, 0.12);
  --panel-border: rgba(142, 129, 114, 0.5);
  --picker-border-color: #8e8172;
  --theme-card: #231e18;
  --theme-control: #2b241d;
  --theme-panel: #1b1713;
  --theme-text: #f4eee6;
  --theme-muted: #c4b8aa;
  --theme-line: #8e8172;
  --theme-accent: #d28a47;
  --theme-on-accent: #1b1008;
  --theme-action: #5a8df2;
  --theme-on-action: #07111f;
  --theme-action-rgb: 90, 141, 242;
  --theme-tempo: #5aa7ff;
  --theme-tempo-rgb: 90, 167, 255;
  --theme-playback: #58b9ff;
  --theme-playback-rgb: 88, 185, 255;
  --theme-on-playback: #12100d;
  --theme-secondary: #f0b56f;
  --theme-on-note: #12100d;
  --theme-red: #ff7b62;
  --theme-blue: #78baf0;
  --theme-green: #72d492;
  --theme-pink: #f28bbb;
  --theme-orange: #f2a45f;
  --theme-teal: #64cec4;
  --theme-purple: #c3a0ed;
  --theme-card-rgb: 35, 30, 24;
  --theme-control-rgb: 43, 36, 29;
  --theme-panel-rgb: 27, 23, 19;
  --theme-text-rgb: 244, 238, 230;
  --theme-muted-rgb: 196, 184, 170;
  --theme-line-rgb: 142, 129, 114;
  --theme-accent-rgb: 210, 138, 71;
  --theme-secondary-rgb: 240, 181, 111;
  --theme-red-rgb: 255, 123, 98;
  --theme-blue-rgb: 120, 186, 240;
  --theme-green-rgb: 114, 212, 146;
  --theme-pink-rgb: 242, 139, 187;
  --theme-orange-rgb: 242, 164, 95;
  --theme-teal-rgb: 100, 206, 196;
  --theme-purple-rgb: 195, 160, 237;
  --theme-glow: none;
  --chord-tone-root: #ff7b62;
  --chord-tone-second: #78baf0;
  --chord-tone-third: #72d492;
  --chord-tone-fourth: #f28bbb;
  --chord-tone-fifth: #f2a45f;
  --chord-tone-sixth: #64cec4;
  --chord-tone-seventh: #c3a0ed;
  --landing-surface: #1b1713;
  --landing-surface-strong: #1b1713;
  --landing-card-surface: #231e18;
  --landing-card-surface-strong: #231e18;
  --landing-border: rgba(142, 129, 114, 0.5);
  --landing-border-soft: rgba(142, 129, 114, 0.3);
}
:root[data-color-theme='classic-dark'] {
  --theme-card: #231e18;
  --theme-control: #2b241d;
  --theme-panel: #1b1713;
  --theme-text: #f4eee6;
  --theme-muted: #c4b8aa;
  --theme-line: #8e8172;
  --theme-accent: #d28a47;
  --theme-on-accent: #1b1008;
  --theme-action: #5a8df2;
  --theme-on-action: #07111f;
  --theme-action-rgb: 90, 141, 242;
  --theme-tempo: #5aa7ff;
  --theme-tempo-rgb: 90, 167, 255;
  --theme-playback: #58b9ff;
  --theme-playback-rgb: 88, 185, 255;
  --theme-on-playback: #12100d;
  --theme-secondary: #f0b56f;
  --theme-on-note: #12100d;
  --theme-red: #ff7b62;
  --theme-blue: #78baf0;
  --theme-green: #72d492;
  --theme-pink: #f28bbb;
  --theme-orange: #f2a45f;
  --theme-teal: #64cec4;
  --theme-purple: #c3a0ed;
  --theme-card-rgb: 35, 30, 24;
  --theme-control-rgb: 43, 36, 29;
  --theme-panel-rgb: 27, 23, 19;
  --theme-text-rgb: 244, 238, 230;
  --theme-muted-rgb: 196, 184, 170;
  --theme-line-rgb: 142, 129, 114;
  --theme-accent-rgb: 210, 138, 71;
  --theme-secondary-rgb: 240, 181, 111;
  --theme-red-rgb: 255, 123, 98;
  --theme-blue-rgb: 120, 186, 240;
  --theme-green-rgb: 114, 212, 146;
  --theme-pink-rgb: 242, 139, 187;
  --theme-orange-rgb: 242, 164, 95;
  --theme-teal-rgb: 100, 206, 196;
  --theme-purple-rgb: 195, 160, 237;
  --theme-glow: none;
}

[data-theme-preview='chalk'] {
  color-scheme: dark;
  --page-bg: #252624;
  --panel-bg: #292b28;
  --surface-card: #30322f;
  --surface-card-muted: #393c37;
  --surface-key-card: #30322f;
  --ink: #f0ede5;
  --muted: #bdbcb2;
  --accent: #b5d2bd;
  --accent-deep: #b5d2bd;
  --accent-soft: rgba(181, 210, 189, 0.13);
  --page-glow: rgba(193, 182, 217, 0.12);
  --panel-border: rgba(146, 151, 139, 0.5);
  --picker-border-color: #92978b;
  --theme-card: #30322f;
  --theme-control: #393c37;
  --theme-panel: #292b28;
  --theme-text: #f0ede5;
  --theme-muted: #bdbcb2;
  --theme-line: #92978b;
  --theme-accent: #b5d2bd;
  --theme-on-accent: #252624;
  --theme-action: #c1b6d9;
  --theme-on-action: #252624;
  --theme-action-rgb: 193, 182, 217;
  --theme-tempo: #e8a49c;
  --theme-tempo-rgb: 232, 164, 156;
  --theme-playback: #9ccff2;
  --theme-playback-rgb: 156, 207, 242;
  --theme-on-playback: #252624;
  --theme-secondary: #c1b6d9;
  --theme-on-note: #252624;
  --theme-red: #e8a49c;
  --theme-blue: #a8c7df;
  --theme-green: #b7cf8b;
  --theme-pink: #d8a8c7;
  --theme-orange: #e1bc89;
  --theme-teal: #91cec2;
  --theme-purple: #c1b6d9;
  --theme-card-rgb: 48, 50, 47;
  --theme-control-rgb: 57, 60, 55;
  --theme-panel-rgb: 41, 43, 40;
  --theme-text-rgb: 240, 237, 229;
  --theme-muted-rgb: 189, 188, 178;
  --theme-line-rgb: 146, 151, 139;
  --theme-accent-rgb: 181, 210, 189;
  --theme-secondary-rgb: 193, 182, 217;
  --theme-red-rgb: 232, 164, 156;
  --theme-blue-rgb: 168, 199, 223;
  --theme-green-rgb: 183, 207, 139;
  --theme-pink-rgb: 216, 168, 199;
  --theme-orange-rgb: 225, 188, 137;
  --theme-teal-rgb: 145, 206, 194;
  --theme-purple-rgb: 193, 182, 217;
  --theme-glow: none;
  --chord-tone-root: #e8a49c;
  --chord-tone-second: #a8c7df;
  --chord-tone-third: #b7cf8b;
  --chord-tone-fourth: #d8a8c7;
  --chord-tone-fifth: #e1bc89;
  --chord-tone-sixth: #91cec2;
  --chord-tone-seventh: #c1b6d9;
  --landing-surface: #292b28;
  --landing-surface-strong: #292b28;
  --landing-card-surface: #30322f;
  --landing-card-surface-strong: #30322f;
  --landing-border: rgba(146, 151, 139, 0.5);
  --landing-border-soft: rgba(146, 151, 139, 0.3);
}
:root[data-custom-theme][data-color-theme='chalk'] {
  color-scheme: dark;
  --page-bg: #252624;
  --panel-bg: #292b28;
  --surface-card: #30322f;
  --surface-card-muted: #393c37;
  --surface-key-card: #30322f;
  --ink: #f0ede5;
  --muted: #bdbcb2;
  --accent: #b5d2bd;
  --accent-deep: #b5d2bd;
  --accent-soft: rgba(181, 210, 189, 0.13);
  --page-glow: rgba(193, 182, 217, 0.12);
  --panel-border: rgba(146, 151, 139, 0.5);
  --picker-border-color: #92978b;
  --theme-card: #30322f;
  --theme-control: #393c37;
  --theme-panel: #292b28;
  --theme-text: #f0ede5;
  --theme-muted: #bdbcb2;
  --theme-line: #92978b;
  --theme-accent: #b5d2bd;
  --theme-on-accent: #252624;
  --theme-action: #c1b6d9;
  --theme-on-action: #252624;
  --theme-action-rgb: 193, 182, 217;
  --theme-tempo: #e8a49c;
  --theme-tempo-rgb: 232, 164, 156;
  --theme-playback: #9ccff2;
  --theme-playback-rgb: 156, 207, 242;
  --theme-on-playback: #252624;
  --theme-secondary: #c1b6d9;
  --theme-on-note: #252624;
  --theme-red: #e8a49c;
  --theme-blue: #a8c7df;
  --theme-green: #b7cf8b;
  --theme-pink: #d8a8c7;
  --theme-orange: #e1bc89;
  --theme-teal: #91cec2;
  --theme-purple: #c1b6d9;
  --theme-card-rgb: 48, 50, 47;
  --theme-control-rgb: 57, 60, 55;
  --theme-panel-rgb: 41, 43, 40;
  --theme-text-rgb: 240, 237, 229;
  --theme-muted-rgb: 189, 188, 178;
  --theme-line-rgb: 146, 151, 139;
  --theme-accent-rgb: 181, 210, 189;
  --theme-secondary-rgb: 193, 182, 217;
  --theme-red-rgb: 232, 164, 156;
  --theme-blue-rgb: 168, 199, 223;
  --theme-green-rgb: 183, 207, 139;
  --theme-pink-rgb: 216, 168, 199;
  --theme-orange-rgb: 225, 188, 137;
  --theme-teal-rgb: 145, 206, 194;
  --theme-purple-rgb: 193, 182, 217;
  --theme-glow: none;
  --chord-tone-root: #e8a49c;
  --chord-tone-second: #a8c7df;
  --chord-tone-third: #b7cf8b;
  --chord-tone-fourth: #d8a8c7;
  --chord-tone-fifth: #e1bc89;
  --chord-tone-sixth: #91cec2;
  --chord-tone-seventh: #c1b6d9;
  --landing-surface: #292b28;
  --landing-surface-strong: #292b28;
  --landing-card-surface: #30322f;
  --landing-card-surface-strong: #30322f;
  --landing-border: rgba(146, 151, 139, 0.5);
  --landing-border-soft: rgba(146, 151, 139, 0.3);
}

[data-theme-preview='vaporwave'] {
  color-scheme: dark;
  --page-bg: #141024;
  --panel-bg: #19142b;
  --surface-card: #211a35;
  --surface-card-muted: #2b2243;
  --surface-key-card: #211a35;
  --ink: #f5f0ff;
  --muted: #bfb2d3;
  --accent: #54ddff;
  --accent-deep: #54ddff;
  --accent-soft: rgba(84, 221, 255, 0.13);
  --page-glow: rgba(185, 152, 255, 0.12);
  --panel-border: rgba(148, 130, 173, 0.5);
  --picker-border-color: #9482ad;
  --theme-card: #211a35;
  --theme-control: #2b2243;
  --theme-panel: #19142b;
  --theme-text: #f5f0ff;
  --theme-muted: #bfb2d3;
  --theme-line: #9482ad;
  --theme-accent: #54ddff;
  --theme-on-accent: #141024;
  --theme-action: #ff83c8;
  --theme-on-action: #141024;
  --theme-action-rgb: 255, 131, 200;
  --theme-tempo: #b998ff;
  --theme-tempo-rgb: 185, 152, 255;
  --theme-playback: #7cf7ac;
  --theme-playback-rgb: 124, 247, 172;
  --theme-on-playback: #141024;
  --theme-secondary: #b998ff;
  --theme-on-note: #141024;
  --theme-red: #ff83b1;
  --theme-blue: #83beff;
  --theme-green: #7cf7ac;
  --theme-pink: #ff98dc;
  --theme-orange: #ffc077;
  --theme-teal: #71eddf;
  --theme-purple: #c3a2ff;
  --theme-card-rgb: 33, 26, 53;
  --theme-control-rgb: 43, 34, 67;
  --theme-panel-rgb: 25, 20, 43;
  --theme-text-rgb: 245, 240, 255;
  --theme-muted-rgb: 191, 178, 211;
  --theme-line-rgb: 148, 130, 173;
  --theme-accent-rgb: 84, 221, 255;
  --theme-secondary-rgb: 185, 152, 255;
  --theme-red-rgb: 255, 131, 177;
  --theme-blue-rgb: 131, 190, 255;
  --theme-green-rgb: 124, 247, 172;
  --theme-pink-rgb: 255, 152, 220;
  --theme-orange-rgb: 255, 192, 119;
  --theme-teal-rgb: 113, 237, 223;
  --theme-purple-rgb: 195, 162, 255;
  --theme-glow: 0 0 18px rgba(84, 221, 255, 0.15);
  --chord-tone-root: #ff83b1;
  --chord-tone-second: #83beff;
  --chord-tone-third: #7cf7ac;
  --chord-tone-fourth: #ff98dc;
  --chord-tone-fifth: #ffc077;
  --chord-tone-sixth: #71eddf;
  --chord-tone-seventh: #c3a2ff;
  --landing-surface: #19142b;
  --landing-surface-strong: #19142b;
  --landing-card-surface: #211a35;
  --landing-card-surface-strong: #211a35;
  --landing-border: rgba(148, 130, 173, 0.5);
  --landing-border-soft: rgba(148, 130, 173, 0.3);
}
:root[data-custom-theme][data-color-theme='vaporwave'] {
  color-scheme: dark;
  --page-bg: #141024;
  --panel-bg: #19142b;
  --surface-card: #211a35;
  --surface-card-muted: #2b2243;
  --surface-key-card: #211a35;
  --ink: #f5f0ff;
  --muted: #bfb2d3;
  --accent: #54ddff;
  --accent-deep: #54ddff;
  --accent-soft: rgba(84, 221, 255, 0.13);
  --page-glow: rgba(185, 152, 255, 0.12);
  --panel-border: rgba(148, 130, 173, 0.5);
  --picker-border-color: #9482ad;
  --theme-card: #211a35;
  --theme-control: #2b2243;
  --theme-panel: #19142b;
  --theme-text: #f5f0ff;
  --theme-muted: #bfb2d3;
  --theme-line: #9482ad;
  --theme-accent: #54ddff;
  --theme-on-accent: #141024;
  --theme-action: #ff83c8;
  --theme-on-action: #141024;
  --theme-action-rgb: 255, 131, 200;
  --theme-tempo: #b998ff;
  --theme-tempo-rgb: 185, 152, 255;
  --theme-playback: #7cf7ac;
  --theme-playback-rgb: 124, 247, 172;
  --theme-on-playback: #141024;
  --theme-secondary: #b998ff;
  --theme-on-note: #141024;
  --theme-red: #ff83b1;
  --theme-blue: #83beff;
  --theme-green: #7cf7ac;
  --theme-pink: #ff98dc;
  --theme-orange: #ffc077;
  --theme-teal: #71eddf;
  --theme-purple: #c3a2ff;
  --theme-card-rgb: 33, 26, 53;
  --theme-control-rgb: 43, 34, 67;
  --theme-panel-rgb: 25, 20, 43;
  --theme-text-rgb: 245, 240, 255;
  --theme-muted-rgb: 191, 178, 211;
  --theme-line-rgb: 148, 130, 173;
  --theme-accent-rgb: 84, 221, 255;
  --theme-secondary-rgb: 185, 152, 255;
  --theme-red-rgb: 255, 131, 177;
  --theme-blue-rgb: 131, 190, 255;
  --theme-green-rgb: 124, 247, 172;
  --theme-pink-rgb: 255, 152, 220;
  --theme-orange-rgb: 255, 192, 119;
  --theme-teal-rgb: 113, 237, 223;
  --theme-purple-rgb: 195, 162, 255;
  --theme-glow: 0 0 18px rgba(84, 221, 255, 0.15);
  --chord-tone-root: #ff83b1;
  --chord-tone-second: #83beff;
  --chord-tone-third: #7cf7ac;
  --chord-tone-fourth: #ff98dc;
  --chord-tone-fifth: #ffc077;
  --chord-tone-sixth: #71eddf;
  --chord-tone-seventh: #c3a2ff;
  --landing-surface: #19142b;
  --landing-surface-strong: #19142b;
  --landing-card-surface: #211a35;
  --landing-card-surface-strong: #211a35;
  --landing-border: rgba(148, 130, 173, 0.5);
  --landing-border-soft: rgba(148, 130, 173, 0.3);
}

[data-theme-preview='arctic'] {
  color-scheme: dark;
  --page-bg: #2e3440;
  --panel-bg: #333b49;
  --surface-card: #3b4252;
  --surface-card-muted: #414b5e;
  --surface-key-card: #3b4252;
  --ink: #eceff4;
  --muted: #d0d7e2;
  --accent: #9bd2e0;
  --accent-deep: #9bd2e0;
  --accent-soft: rgba(155, 210, 224, 0.13);
  --page-glow: rgba(208, 168, 200, 0.12);
  --panel-border: rgba(154, 168, 188, 0.5);
  --picker-border-color: #9aa8bc;
  --theme-card: #3b4252;
  --theme-control: #414b5e;
  --theme-panel: #333b49;
  --theme-text: #eceff4;
  --theme-muted: #d0d7e2;
  --theme-line: #9aa8bc;
  --theme-accent: #9bd2e0;
  --theme-on-accent: #202631;
  --theme-action: #b6bffd;
  --theme-on-action: #202631;
  --theme-action-rgb: 182, 191, 253;
  --theme-tempo: #d0a8c8;
  --theme-tempo-rgb: 208, 168, 200;
  --theme-playback: #ffd29a;
  --theme-playback-rgb: 255, 210, 154;
  --theme-on-playback: #2e3440;
  --theme-secondary: #d0a8c8;
  --theme-on-note: #2e3440;
  --theme-red: #ffaab6;
  --theme-blue: #a6d4ff;
  --theme-green: #c0dd9f;
  --theme-pink: #edb3dc;
  --theme-orange: #ffd29a;
  --theme-teal: #a2e4dd;
  --theme-purple: #d6bdfa;
  --theme-card-rgb: 59, 66, 82;
  --theme-control-rgb: 65, 75, 94;
  --theme-panel-rgb: 51, 59, 73;
  --theme-text-rgb: 236, 239, 244;
  --theme-muted-rgb: 208, 215, 226;
  --theme-line-rgb: 154, 168, 188;
  --theme-accent-rgb: 155, 210, 224;
  --theme-secondary-rgb: 208, 168, 200;
  --theme-red-rgb: 255, 170, 182;
  --theme-blue-rgb: 166, 212, 255;
  --theme-green-rgb: 192, 221, 159;
  --theme-pink-rgb: 237, 179, 220;
  --theme-orange-rgb: 255, 210, 154;
  --theme-teal-rgb: 162, 228, 221;
  --theme-purple-rgb: 214, 189, 250;
  --theme-glow: none;
  --chord-tone-root: #ffaab6;
  --chord-tone-second: #a6d4ff;
  --chord-tone-third: #c0dd9f;
  --chord-tone-fourth: #edb3dc;
  --chord-tone-fifth: #ffd29a;
  --chord-tone-sixth: #a2e4dd;
  --chord-tone-seventh: #d6bdfa;
  --landing-surface: #333b49;
  --landing-surface-strong: #333b49;
  --landing-card-surface: #3b4252;
  --landing-card-surface-strong: #3b4252;
  --landing-border: rgba(154, 168, 188, 0.5);
  --landing-border-soft: rgba(154, 168, 188, 0.3);
}
:root[data-custom-theme][data-color-theme='arctic'] {
  color-scheme: dark;
  --page-bg: #2e3440;
  --panel-bg: #333b49;
  --surface-card: #3b4252;
  --surface-card-muted: #414b5e;
  --surface-key-card: #3b4252;
  --ink: #eceff4;
  --muted: #d0d7e2;
  --accent: #9bd2e0;
  --accent-deep: #9bd2e0;
  --accent-soft: rgba(155, 210, 224, 0.13);
  --page-glow: rgba(208, 168, 200, 0.12);
  --panel-border: rgba(154, 168, 188, 0.5);
  --picker-border-color: #9aa8bc;
  --theme-card: #3b4252;
  --theme-control: #414b5e;
  --theme-panel: #333b49;
  --theme-text: #eceff4;
  --theme-muted: #d0d7e2;
  --theme-line: #9aa8bc;
  --theme-accent: #9bd2e0;
  --theme-on-accent: #202631;
  --theme-action: #b6bffd;
  --theme-on-action: #202631;
  --theme-action-rgb: 182, 191, 253;
  --theme-tempo: #d0a8c8;
  --theme-tempo-rgb: 208, 168, 200;
  --theme-playback: #ffd29a;
  --theme-playback-rgb: 255, 210, 154;
  --theme-on-playback: #2e3440;
  --theme-secondary: #d0a8c8;
  --theme-on-note: #2e3440;
  --theme-red: #ffaab6;
  --theme-blue: #a6d4ff;
  --theme-green: #c0dd9f;
  --theme-pink: #edb3dc;
  --theme-orange: #ffd29a;
  --theme-teal: #a2e4dd;
  --theme-purple: #d6bdfa;
  --theme-card-rgb: 59, 66, 82;
  --theme-control-rgb: 65, 75, 94;
  --theme-panel-rgb: 51, 59, 73;
  --theme-text-rgb: 236, 239, 244;
  --theme-muted-rgb: 208, 215, 226;
  --theme-line-rgb: 154, 168, 188;
  --theme-accent-rgb: 155, 210, 224;
  --theme-secondary-rgb: 208, 168, 200;
  --theme-red-rgb: 255, 170, 182;
  --theme-blue-rgb: 166, 212, 255;
  --theme-green-rgb: 192, 221, 159;
  --theme-pink-rgb: 237, 179, 220;
  --theme-orange-rgb: 255, 210, 154;
  --theme-teal-rgb: 162, 228, 221;
  --theme-purple-rgb: 214, 189, 250;
  --theme-glow: none;
  --chord-tone-root: #ffaab6;
  --chord-tone-second: #a6d4ff;
  --chord-tone-third: #c0dd9f;
  --chord-tone-fourth: #edb3dc;
  --chord-tone-fifth: #ffd29a;
  --chord-tone-sixth: #a2e4dd;
  --chord-tone-seventh: #d6bdfa;
  --landing-surface: #333b49;
  --landing-surface-strong: #333b49;
  --landing-card-surface: #3b4252;
  --landing-card-surface-strong: #3b4252;
  --landing-border: rgba(154, 168, 188, 0.5);
  --landing-border-soft: rgba(154, 168, 188, 0.3);
}

[data-theme-preview='carbon'] {
  color-scheme: dark;
  --page-bg: #1b1c18;
  --panel-bg: #24251f;
  --surface-card: #2b2d25;
  --surface-card-muted: #34372b;
  --surface-key-card: #2b2d25;
  --ink: #f3f0df;
  --muted: #c0bea7;
  --accent: #8bd5c8;
  --accent-deep: #8bd5c8;
  --accent-soft: rgba(139, 213, 200, 0.13);
  --page-glow: rgba(229, 181, 103, 0.12);
  --panel-border: rgba(140, 148, 120, 0.5);
  --picker-border-color: #8c9478;
  --theme-card: #2b2d25;
  --theme-control: #34372b;
  --theme-panel: #24251f;
  --theme-text: #f3f0df;
  --theme-muted: #c0bea7;
  --theme-line: #8c9478;
  --theme-accent: #8bd5c8;
  --theme-on-accent: #1b1c18;
  --theme-action: #c4e36b;
  --theme-on-action: #1b1c18;
  --theme-action-rgb: 196, 227, 107;
  --theme-tempo: #ff8b9e;
  --theme-tempo-rgb: 255, 139, 158;
  --theme-playback: #f7b45f;
  --theme-playback-rgb: 247, 180, 95;
  --theme-on-playback: #1b1c18;
  --theme-secondary: #e5b567;
  --theme-on-note: #1b1c18;
  --theme-red: #ff7b83;
  --theme-blue: #8ac7f0;
  --theme-green: #bce37a;
  --theme-pink: #f29ac6;
  --theme-orange: #f7b45f;
  --theme-teal: #83d5bc;
  --theme-purple: #c4adf5;
  --theme-card-rgb: 43, 45, 37;
  --theme-control-rgb: 52, 55, 43;
  --theme-panel-rgb: 36, 37, 31;
  --theme-text-rgb: 243, 240, 223;
  --theme-muted-rgb: 192, 190, 167;
  --theme-line-rgb: 140, 148, 120;
  --theme-accent-rgb: 139, 213, 200;
  --theme-secondary-rgb: 229, 181, 103;
  --theme-red-rgb: 255, 123, 131;
  --theme-blue-rgb: 138, 199, 240;
  --theme-green-rgb: 188, 227, 122;
  --theme-pink-rgb: 242, 154, 198;
  --theme-orange-rgb: 247, 180, 95;
  --theme-teal-rgb: 131, 213, 188;
  --theme-purple-rgb: 196, 173, 245;
  --theme-glow: none;
  --chord-tone-root: #ff7b83;
  --chord-tone-second: #8ac7f0;
  --chord-tone-third: #bce37a;
  --chord-tone-fourth: #f29ac6;
  --chord-tone-fifth: #f7b45f;
  --chord-tone-sixth: #83d5bc;
  --chord-tone-seventh: #c4adf5;
  --landing-surface: #24251f;
  --landing-surface-strong: #24251f;
  --landing-card-surface: #2b2d25;
  --landing-card-surface-strong: #2b2d25;
  --landing-border: rgba(140, 148, 120, 0.5);
  --landing-border-soft: rgba(140, 148, 120, 0.3);
}
:root[data-custom-theme][data-color-theme='carbon'] {
  color-scheme: dark;
  --page-bg: #1b1c18;
  --panel-bg: #24251f;
  --surface-card: #2b2d25;
  --surface-card-muted: #34372b;
  --surface-key-card: #2b2d25;
  --ink: #f3f0df;
  --muted: #c0bea7;
  --accent: #8bd5c8;
  --accent-deep: #8bd5c8;
  --accent-soft: rgba(139, 213, 200, 0.13);
  --page-glow: rgba(229, 181, 103, 0.12);
  --panel-border: rgba(140, 148, 120, 0.5);
  --picker-border-color: #8c9478;
  --theme-card: #2b2d25;
  --theme-control: #34372b;
  --theme-panel: #24251f;
  --theme-text: #f3f0df;
  --theme-muted: #c0bea7;
  --theme-line: #8c9478;
  --theme-accent: #8bd5c8;
  --theme-on-accent: #1b1c18;
  --theme-action: #c4e36b;
  --theme-on-action: #1b1c18;
  --theme-action-rgb: 196, 227, 107;
  --theme-tempo: #ff8b9e;
  --theme-tempo-rgb: 255, 139, 158;
  --theme-playback: #f7b45f;
  --theme-playback-rgb: 247, 180, 95;
  --theme-on-playback: #1b1c18;
  --theme-secondary: #e5b567;
  --theme-on-note: #1b1c18;
  --theme-red: #ff7b83;
  --theme-blue: #8ac7f0;
  --theme-green: #bce37a;
  --theme-pink: #f29ac6;
  --theme-orange: #f7b45f;
  --theme-teal: #83d5bc;
  --theme-purple: #c4adf5;
  --theme-card-rgb: 43, 45, 37;
  --theme-control-rgb: 52, 55, 43;
  --theme-panel-rgb: 36, 37, 31;
  --theme-text-rgb: 243, 240, 223;
  --theme-muted-rgb: 192, 190, 167;
  --theme-line-rgb: 140, 148, 120;
  --theme-accent-rgb: 139, 213, 200;
  --theme-secondary-rgb: 229, 181, 103;
  --theme-red-rgb: 255, 123, 131;
  --theme-blue-rgb: 138, 199, 240;
  --theme-green-rgb: 188, 227, 122;
  --theme-pink-rgb: 242, 154, 198;
  --theme-orange-rgb: 247, 180, 95;
  --theme-teal-rgb: 131, 213, 188;
  --theme-purple-rgb: 196, 173, 245;
  --theme-glow: none;
  --chord-tone-root: #ff7b83;
  --chord-tone-second: #8ac7f0;
  --chord-tone-third: #bce37a;
  --chord-tone-fourth: #f29ac6;
  --chord-tone-fifth: #f7b45f;
  --chord-tone-sixth: #83d5bc;
  --chord-tone-seventh: #c4adf5;
  --landing-surface: #24251f;
  --landing-surface-strong: #24251f;
  --landing-card-surface: #2b2d25;
  --landing-card-surface-strong: #2b2d25;
  --landing-border: rgba(140, 148, 120, 0.5);
  --landing-border-soft: rgba(140, 148, 120, 0.3);
}

[data-theme-preview='midnight'] {
  color-scheme: dark;
  --page-bg: #101827;
  --panel-bg: #162035;
  --surface-card: #1c2941;
  --surface-card-muted: #23334f;
  --surface-key-card: #1c2941;
  --ink: #e7edff;
  --muted: #b5c4e5;
  --accent: #bac8ff;
  --accent-deep: #bac8ff;
  --accent-soft: rgba(186, 200, 255, 0.13);
  --page-glow: rgba(187, 166, 242, 0.12);
  --panel-border: rgba(130, 153, 195, 0.5);
  --picker-border-color: #8299c3;
  --theme-card: #1c2941;
  --theme-control: #23334f;
  --theme-panel: #162035;
  --theme-text: #e7edff;
  --theme-muted: #b5c4e5;
  --theme-line: #8299c3;
  --theme-accent: #bac8ff;
  --theme-on-accent: #101827;
  --theme-action: #80adff;
  --theme-on-action: #101827;
  --theme-action-rgb: 128, 173, 255;
  --theme-tempo: #f8a5c2;
  --theme-tempo-rgb: 248, 165, 194;
  --theme-playback: #72e0ca;
  --theme-playback-rgb: 114, 224, 202;
  --theme-on-playback: #101827;
  --theme-secondary: #bba6f2;
  --theme-on-note: #101827;
  --theme-red: #fa9cb0;
  --theme-blue: #8ebcff;
  --theme-green: #9ad79e;
  --theme-pink: #e6a5da;
  --theme-orange: #f3be8a;
  --theme-teal: #72d9dc;
  --theme-purple: #c3aff5;
  --theme-card-rgb: 28, 41, 65;
  --theme-control-rgb: 35, 51, 79;
  --theme-panel-rgb: 22, 32, 53;
  --theme-text-rgb: 231, 237, 255;
  --theme-muted-rgb: 181, 196, 229;
  --theme-line-rgb: 130, 153, 195;
  --theme-accent-rgb: 186, 200, 255;
  --theme-secondary-rgb: 187, 166, 242;
  --theme-red-rgb: 250, 156, 176;
  --theme-blue-rgb: 142, 188, 255;
  --theme-green-rgb: 154, 215, 158;
  --theme-pink-rgb: 230, 165, 218;
  --theme-orange-rgb: 243, 190, 138;
  --theme-teal-rgb: 114, 217, 220;
  --theme-purple-rgb: 195, 175, 245;
  --theme-glow: none;
  --chord-tone-root: #fa9cb0;
  --chord-tone-second: #8ebcff;
  --chord-tone-third: #9ad79e;
  --chord-tone-fourth: #e6a5da;
  --chord-tone-fifth: #f3be8a;
  --chord-tone-sixth: #72d9dc;
  --chord-tone-seventh: #c3aff5;
  --landing-surface: #162035;
  --landing-surface-strong: #162035;
  --landing-card-surface: #1c2941;
  --landing-card-surface-strong: #1c2941;
  --landing-border: rgba(130, 153, 195, 0.5);
  --landing-border-soft: rgba(130, 153, 195, 0.3);
}
:root[data-custom-theme][data-color-theme='midnight'] {
  color-scheme: dark;
  --page-bg: #101827;
  --panel-bg: #162035;
  --surface-card: #1c2941;
  --surface-card-muted: #23334f;
  --surface-key-card: #1c2941;
  --ink: #e7edff;
  --muted: #b5c4e5;
  --accent: #bac8ff;
  --accent-deep: #bac8ff;
  --accent-soft: rgba(186, 200, 255, 0.13);
  --page-glow: rgba(187, 166, 242, 0.12);
  --panel-border: rgba(130, 153, 195, 0.5);
  --picker-border-color: #8299c3;
  --theme-card: #1c2941;
  --theme-control: #23334f;
  --theme-panel: #162035;
  --theme-text: #e7edff;
  --theme-muted: #b5c4e5;
  --theme-line: #8299c3;
  --theme-accent: #bac8ff;
  --theme-on-accent: #101827;
  --theme-action: #80adff;
  --theme-on-action: #101827;
  --theme-action-rgb: 128, 173, 255;
  --theme-tempo: #f8a5c2;
  --theme-tempo-rgb: 248, 165, 194;
  --theme-playback: #72e0ca;
  --theme-playback-rgb: 114, 224, 202;
  --theme-on-playback: #101827;
  --theme-secondary: #bba6f2;
  --theme-on-note: #101827;
  --theme-red: #fa9cb0;
  --theme-blue: #8ebcff;
  --theme-green: #9ad79e;
  --theme-pink: #e6a5da;
  --theme-orange: #f3be8a;
  --theme-teal: #72d9dc;
  --theme-purple: #c3aff5;
  --theme-card-rgb: 28, 41, 65;
  --theme-control-rgb: 35, 51, 79;
  --theme-panel-rgb: 22, 32, 53;
  --theme-text-rgb: 231, 237, 255;
  --theme-muted-rgb: 181, 196, 229;
  --theme-line-rgb: 130, 153, 195;
  --theme-accent-rgb: 186, 200, 255;
  --theme-secondary-rgb: 187, 166, 242;
  --theme-red-rgb: 250, 156, 176;
  --theme-blue-rgb: 142, 188, 255;
  --theme-green-rgb: 154, 215, 158;
  --theme-pink-rgb: 230, 165, 218;
  --theme-orange-rgb: 243, 190, 138;
  --theme-teal-rgb: 114, 217, 220;
  --theme-purple-rgb: 195, 175, 245;
  --theme-glow: none;
  --chord-tone-root: #fa9cb0;
  --chord-tone-second: #8ebcff;
  --chord-tone-third: #9ad79e;
  --chord-tone-fourth: #e6a5da;
  --chord-tone-fifth: #f3be8a;
  --chord-tone-sixth: #72d9dc;
  --chord-tone-seventh: #c3aff5;
  --landing-surface: #162035;
  --landing-surface-strong: #162035;
  --landing-card-surface: #1c2941;
  --landing-card-surface-strong: #1c2941;
  --landing-border: rgba(130, 153, 195, 0.5);
  --landing-border-soft: rgba(130, 153, 195, 0.3);
}

[data-theme-preview='forest'] {
  color-scheme: dark;
  --page-bg: #10221d;
  --panel-bg: #172c25;
  --surface-card: #1e362d;
  --surface-card-muted: #294438;
  --surface-key-card: #1e362d;
  --ink: #edf4e4;
  --muted: #b7cbb9;
  --accent: #e3d5a0;
  --accent-deep: #e3d5a0;
  --accent-soft: rgba(227, 213, 160, 0.13);
  --page-glow: rgba(147, 187, 161, 0.12);
  --panel-border: rgba(140, 169, 145, 0.5);
  --picker-border-color: #8ca991;
  --theme-card: #1e362d;
  --theme-control: #294438;
  --theme-panel: #172c25;
  --theme-text: #edf4e4;
  --theme-muted: #b7cbb9;
  --theme-line: #8ca991;
  --theme-accent: #e3d5a0;
  --theme-on-accent: #10221d;
  --theme-action: #9be1bb;
  --theme-on-action: #10221d;
  --theme-action-rgb: 155, 225, 187;
  --theme-tempo: #eabd78;
  --theme-tempo-rgb: 234, 189, 120;
  --theme-playback: #d1b5f4;
  --theme-playback-rgb: 209, 181, 244;
  --theme-on-playback: #10221d;
  --theme-secondary: #93bba1;
  --theme-on-note: #10221d;
  --theme-red: #f8a5a4;
  --theme-blue: #a1c9f1;
  --theme-green: #b8d88f;
  --theme-pink: #e3afd6;
  --theme-orange: #e8bd87;
  --theme-teal: #8adbc6;
  --theme-purple: #ccb6ec;
  --theme-card-rgb: 30, 54, 45;
  --theme-control-rgb: 41, 68, 56;
  --theme-panel-rgb: 23, 44, 37;
  --theme-text-rgb: 237, 244, 228;
  --theme-muted-rgb: 183, 203, 185;
  --theme-line-rgb: 140, 169, 145;
  --theme-accent-rgb: 227, 213, 160;
  --theme-secondary-rgb: 147, 187, 161;
  --theme-red-rgb: 248, 165, 164;
  --theme-blue-rgb: 161, 201, 241;
  --theme-green-rgb: 184, 216, 143;
  --theme-pink-rgb: 227, 175, 214;
  --theme-orange-rgb: 232, 189, 135;
  --theme-teal-rgb: 138, 219, 198;
  --theme-purple-rgb: 204, 182, 236;
  --theme-glow: none;
  --chord-tone-root: #f8a5a4;
  --chord-tone-second: #a1c9f1;
  --chord-tone-third: #b8d88f;
  --chord-tone-fourth: #e3afd6;
  --chord-tone-fifth: #e8bd87;
  --chord-tone-sixth: #8adbc6;
  --chord-tone-seventh: #ccb6ec;
  --landing-surface: #172c25;
  --landing-surface-strong: #172c25;
  --landing-card-surface: #1e362d;
  --landing-card-surface-strong: #1e362d;
  --landing-border: rgba(140, 169, 145, 0.5);
  --landing-border-soft: rgba(140, 169, 145, 0.3);
}
:root[data-custom-theme][data-color-theme='forest'] {
  color-scheme: dark;
  --page-bg: #10221d;
  --panel-bg: #172c25;
  --surface-card: #1e362d;
  --surface-card-muted: #294438;
  --surface-key-card: #1e362d;
  --ink: #edf4e4;
  --muted: #b7cbb9;
  --accent: #e3d5a0;
  --accent-deep: #e3d5a0;
  --accent-soft: rgba(227, 213, 160, 0.13);
  --page-glow: rgba(147, 187, 161, 0.12);
  --panel-border: rgba(140, 169, 145, 0.5);
  --picker-border-color: #8ca991;
  --theme-card: #1e362d;
  --theme-control: #294438;
  --theme-panel: #172c25;
  --theme-text: #edf4e4;
  --theme-muted: #b7cbb9;
  --theme-line: #8ca991;
  --theme-accent: #e3d5a0;
  --theme-on-accent: #10221d;
  --theme-action: #9be1bb;
  --theme-on-action: #10221d;
  --theme-action-rgb: 155, 225, 187;
  --theme-tempo: #eabd78;
  --theme-tempo-rgb: 234, 189, 120;
  --theme-playback: #d1b5f4;
  --theme-playback-rgb: 209, 181, 244;
  --theme-on-playback: #10221d;
  --theme-secondary: #93bba1;
  --theme-on-note: #10221d;
  --theme-red: #f8a5a4;
  --theme-blue: #a1c9f1;
  --theme-green: #b8d88f;
  --theme-pink: #e3afd6;
  --theme-orange: #e8bd87;
  --theme-teal: #8adbc6;
  --theme-purple: #ccb6ec;
  --theme-card-rgb: 30, 54, 45;
  --theme-control-rgb: 41, 68, 56;
  --theme-panel-rgb: 23, 44, 37;
  --theme-text-rgb: 237, 244, 228;
  --theme-muted-rgb: 183, 203, 185;
  --theme-line-rgb: 140, 169, 145;
  --theme-accent-rgb: 227, 213, 160;
  --theme-secondary-rgb: 147, 187, 161;
  --theme-red-rgb: 248, 165, 164;
  --theme-blue-rgb: 161, 201, 241;
  --theme-green-rgb: 184, 216, 143;
  --theme-pink-rgb: 227, 175, 214;
  --theme-orange-rgb: 232, 189, 135;
  --theme-teal-rgb: 138, 219, 198;
  --theme-purple-rgb: 204, 182, 236;
  --theme-glow: none;
  --chord-tone-root: #f8a5a4;
  --chord-tone-second: #a1c9f1;
  --chord-tone-third: #b8d88f;
  --chord-tone-fourth: #e3afd6;
  --chord-tone-fifth: #e8bd87;
  --chord-tone-sixth: #8adbc6;
  --chord-tone-seventh: #ccb6ec;
  --landing-surface: #172c25;
  --landing-surface-strong: #172c25;
  --landing-card-surface: #1e362d;
  --landing-card-surface-strong: #1e362d;
  --landing-border: rgba(140, 169, 145, 0.5);
  --landing-border-soft: rgba(140, 169, 145, 0.3);
}

[data-theme-preview='dawn'] {
  color-scheme: light;
  --page-bg: #faf4f0;
  --panel-bg: #f1e5e4;
  --surface-card: #fffafb;
  --surface-card-muted: #eadcdf;
  --surface-key-card: #fffafb;
  --ink: #352c45;
  --muted: #66546c;
  --accent: #64447f;
  --accent-deep: #64447f;
  --accent-soft: rgba(100, 68, 127, 0.13);
  --page-glow: rgba(138, 94, 156, 0.12);
  --panel-border: rgba(139, 115, 126, 0.5);
  --picker-border-color: #8b737e;
  --theme-card: #fffafb;
  --theme-control: #eadcdf;
  --theme-panel: #f1e5e4;
  --theme-text: #352c45;
  --theme-muted: #66546c;
  --theme-line: #8b737e;
  --theme-accent: #64447f;
  --theme-on-accent: #ffffff;
  --theme-action: #9b3d68;
  --theme-on-action: #ffffff;
  --theme-action-rgb: 155, 61, 104;
  --theme-tempo: #1d7074;
  --theme-tempo-rgb: 29, 112, 116;
  --theme-playback: #b84291;
  --theme-playback-rgb: 184, 66, 145;
  --theme-on-playback: #ffffff;
  --theme-secondary: #8a5e9c;
  --theme-on-note: #ffffff;
  --theme-red: #a9385e;
  --theme-blue: #236a96;
  --theme-green: #3b6d3f;
  --theme-pink: #9c397b;
  --theme-orange: #8e4c18;
  --theme-teal: #176d68;
  --theme-purple: #7043a1;
  --theme-card-rgb: 255, 250, 251;
  --theme-control-rgb: 234, 220, 223;
  --theme-panel-rgb: 241, 229, 228;
  --theme-text-rgb: 53, 44, 69;
  --theme-muted-rgb: 102, 84, 108;
  --theme-line-rgb: 139, 115, 126;
  --theme-accent-rgb: 100, 68, 127;
  --theme-secondary-rgb: 138, 94, 156;
  --theme-red-rgb: 169, 56, 94;
  --theme-blue-rgb: 35, 106, 150;
  --theme-green-rgb: 59, 109, 63;
  --theme-pink-rgb: 156, 57, 123;
  --theme-orange-rgb: 142, 76, 24;
  --theme-teal-rgb: 23, 109, 104;
  --theme-purple-rgb: 112, 67, 161;
  --theme-glow: none;
  --chord-tone-root: #a9385e;
  --chord-tone-second: #236a96;
  --chord-tone-third: #3b6d3f;
  --chord-tone-fourth: #9c397b;
  --chord-tone-fifth: #8e4c18;
  --chord-tone-sixth: #176d68;
  --chord-tone-seventh: #7043a1;
  --landing-surface: #f1e5e4;
  --landing-surface-strong: #f1e5e4;
  --landing-card-surface: #fffafb;
  --landing-card-surface-strong: #fffafb;
  --landing-border: rgba(139, 115, 126, 0.5);
  --landing-border-soft: rgba(139, 115, 126, 0.3);
}
:root[data-custom-theme][data-color-theme='dawn'] {
  color-scheme: light;
  --page-bg: #faf4f0;
  --panel-bg: #f1e5e4;
  --surface-card: #fffafb;
  --surface-card-muted: #eadcdf;
  --surface-key-card: #fffafb;
  --ink: #352c45;
  --muted: #66546c;
  --accent: #64447f;
  --accent-deep: #64447f;
  --accent-soft: rgba(100, 68, 127, 0.13);
  --page-glow: rgba(138, 94, 156, 0.12);
  --panel-border: rgba(139, 115, 126, 0.5);
  --picker-border-color: #8b737e;
  --theme-card: #fffafb;
  --theme-control: #eadcdf;
  --theme-panel: #f1e5e4;
  --theme-text: #352c45;
  --theme-muted: #66546c;
  --theme-line: #8b737e;
  --theme-accent: #64447f;
  --theme-on-accent: #ffffff;
  --theme-action: #9b3d68;
  --theme-on-action: #ffffff;
  --theme-action-rgb: 155, 61, 104;
  --theme-tempo: #1d7074;
  --theme-tempo-rgb: 29, 112, 116;
  --theme-playback: #b84291;
  --theme-playback-rgb: 184, 66, 145;
  --theme-on-playback: #ffffff;
  --theme-secondary: #8a5e9c;
  --theme-on-note: #ffffff;
  --theme-red: #a9385e;
  --theme-blue: #236a96;
  --theme-green: #3b6d3f;
  --theme-pink: #9c397b;
  --theme-orange: #8e4c18;
  --theme-teal: #176d68;
  --theme-purple: #7043a1;
  --theme-card-rgb: 255, 250, 251;
  --theme-control-rgb: 234, 220, 223;
  --theme-panel-rgb: 241, 229, 228;
  --theme-text-rgb: 53, 44, 69;
  --theme-muted-rgb: 102, 84, 108;
  --theme-line-rgb: 139, 115, 126;
  --theme-accent-rgb: 100, 68, 127;
  --theme-secondary-rgb: 138, 94, 156;
  --theme-red-rgb: 169, 56, 94;
  --theme-blue-rgb: 35, 106, 150;
  --theme-green-rgb: 59, 109, 63;
  --theme-pink-rgb: 156, 57, 123;
  --theme-orange-rgb: 142, 76, 24;
  --theme-teal-rgb: 23, 109, 104;
  --theme-purple-rgb: 112, 67, 161;
  --theme-glow: none;
  --chord-tone-root: #a9385e;
  --chord-tone-second: #236a96;
  --chord-tone-third: #3b6d3f;
  --chord-tone-fourth: #9c397b;
  --chord-tone-fifth: #8e4c18;
  --chord-tone-sixth: #176d68;
  --chord-tone-seventh: #7043a1;
  --landing-surface: #f1e5e4;
  --landing-surface-strong: #f1e5e4;
  --landing-card-surface: #fffafb;
  --landing-card-surface-strong: #fffafb;
  --landing-border: rgba(139, 115, 126, 0.5);
  --landing-border-soft: rgba(139, 115, 126, 0.3);
}

[data-theme-preview='terminal'] {
  color-scheme: dark;
  --page-bg: #030805;
  --panel-bg: #090e0b;
  --surface-card: #0e1310;
  --surface-card-muted: #151917;
  --surface-key-card: #0e1310;
  --ink: #f0f0f0;
  --muted: #a7a9a8;
  --accent: #39ff14;
  --accent-deep: #39ff14;
  --accent-soft: rgba(57, 255, 20, 0.13);
  --page-glow: rgba(57, 255, 20, 0.12);
  --panel-border: rgba(116, 119, 118, 0.5);
  --picker-border-color: #747776;
  --theme-card: #0e1310;
  --theme-control: #151917;
  --theme-panel: #090e0b;
  --theme-text: #f0f0f0;
  --theme-muted: #a7a9a8;
  --theme-line: #747776;
  --theme-accent: #39ff14;
  --theme-on-accent: #030805;
  --theme-action: #39ff14;
  --theme-on-action: #030805;
  --theme-action-rgb: 57, 255, 20;
  --theme-tempo: #39ff14;
  --theme-tempo-rgb: 57, 255, 20;
  --theme-playback: #39ff14;
  --theme-playback-rgb: 57, 255, 20;
  --theme-on-playback: #030805;
  --theme-secondary: #39ff14;
  --theme-on-note: #030805;
  --theme-red: #ef405f;
  --theme-blue: #3289ed;
  --theme-green: #51ad44;
  --theme-pink: #df4faa;
  --theme-orange: #e68a21;
  --theme-teal: #169d9a;
  --theme-purple: #a160e6;
  --theme-card-rgb: 14, 19, 16;
  --theme-control-rgb: 21, 25, 23;
  --theme-panel-rgb: 9, 14, 11;
  --theme-text-rgb: 240, 240, 240;
  --theme-muted-rgb: 167, 169, 168;
  --theme-line-rgb: 116, 119, 118;
  --theme-accent-rgb: 57, 255, 20;
  --theme-secondary-rgb: 57, 255, 20;
  --theme-red-rgb: 239, 64, 95;
  --theme-blue-rgb: 50, 137, 237;
  --theme-green-rgb: 81, 173, 68;
  --theme-pink-rgb: 223, 79, 170;
  --theme-orange-rgb: 230, 138, 33;
  --theme-teal-rgb: 22, 157, 154;
  --theme-purple-rgb: 161, 96, 230;
  --theme-glow: 0 0 18px rgba(57, 255, 20, 0.15);
  --chord-tone-root: #ef405f;
  --chord-tone-second: #3289ed;
  --chord-tone-third: #51ad44;
  --chord-tone-fourth: #df4faa;
  --chord-tone-fifth: #e68a21;
  --chord-tone-sixth: #169d9a;
  --chord-tone-seventh: #a160e6;
  --landing-surface: #090e0b;
  --landing-surface-strong: #090e0b;
  --landing-card-surface: #0e1310;
  --landing-card-surface-strong: #0e1310;
  --landing-border: rgba(116, 119, 118, 0.5);
  --landing-border-soft: rgba(116, 119, 118, 0.3);
}
:root[data-custom-theme][data-color-theme='terminal'] {
  color-scheme: dark;
  --page-bg: #030805;
  --panel-bg: #090e0b;
  --surface-card: #0e1310;
  --surface-card-muted: #151917;
  --surface-key-card: #0e1310;
  --ink: #f0f0f0;
  --muted: #a7a9a8;
  --accent: #39ff14;
  --accent-deep: #39ff14;
  --accent-soft: rgba(57, 255, 20, 0.13);
  --page-glow: rgba(57, 255, 20, 0.12);
  --panel-border: rgba(116, 119, 118, 0.5);
  --picker-border-color: #747776;
  --theme-card: #0e1310;
  --theme-control: #151917;
  --theme-panel: #090e0b;
  --theme-text: #f0f0f0;
  --theme-muted: #a7a9a8;
  --theme-line: #747776;
  --theme-accent: #39ff14;
  --theme-on-accent: #030805;
  --theme-action: #39ff14;
  --theme-on-action: #030805;
  --theme-action-rgb: 57, 255, 20;
  --theme-tempo: #39ff14;
  --theme-tempo-rgb: 57, 255, 20;
  --theme-playback: #39ff14;
  --theme-playback-rgb: 57, 255, 20;
  --theme-on-playback: #030805;
  --theme-secondary: #39ff14;
  --theme-on-note: #030805;
  --theme-red: #ef405f;
  --theme-blue: #3289ed;
  --theme-green: #51ad44;
  --theme-pink: #df4faa;
  --theme-orange: #e68a21;
  --theme-teal: #169d9a;
  --theme-purple: #a160e6;
  --theme-card-rgb: 14, 19, 16;
  --theme-control-rgb: 21, 25, 23;
  --theme-panel-rgb: 9, 14, 11;
  --theme-text-rgb: 240, 240, 240;
  --theme-muted-rgb: 167, 169, 168;
  --theme-line-rgb: 116, 119, 118;
  --theme-accent-rgb: 57, 255, 20;
  --theme-secondary-rgb: 57, 255, 20;
  --theme-red-rgb: 239, 64, 95;
  --theme-blue-rgb: 50, 137, 237;
  --theme-green-rgb: 81, 173, 68;
  --theme-pink-rgb: 223, 79, 170;
  --theme-orange-rgb: 230, 138, 33;
  --theme-teal-rgb: 22, 157, 154;
  --theme-purple-rgb: 161, 96, 230;
  --theme-glow: 0 0 18px rgba(57, 255, 20, 0.15);
  --chord-tone-root: #ef405f;
  --chord-tone-second: #3289ed;
  --chord-tone-third: #51ad44;
  --chord-tone-fourth: #df4faa;
  --chord-tone-fifth: #e68a21;
  --chord-tone-sixth: #169d9a;
  --chord-tone-seventh: #a160e6;
  --landing-surface: #090e0b;
  --landing-surface-strong: #090e0b;
  --landing-card-surface: #0e1310;
  --landing-card-surface-strong: #0e1310;
  --landing-border: rgba(116, 119, 118, 0.5);
  --landing-border-soft: rgba(116, 119, 118, 0.3);
}

[data-theme-preview='blueprint'] {
  color-scheme: dark;
  --page-bg: #0d2b83;
  --panel-bg: #133086;
  --surface-card: #183589;
  --surface-card-muted: #1e3a8c;
  --surface-key-card: #183589;
  --ink: #f0f2f8;
  --muted: #aab5d4;
  --accent: #f5faff;
  --accent-deep: #f5faff;
  --accent-soft: rgba(245, 250, 255, 0.13);
  --page-glow: rgba(245, 250, 255, 0.12);
  --panel-border: rgba(122, 138, 187, 0.5);
  --picker-border-color: #7a8abb;
  --theme-card: #183589;
  --theme-control: #1e3a8c;
  --theme-panel: #133086;
  --theme-text: #f0f2f8;
  --theme-muted: #aab5d4;
  --theme-line: #7a8abb;
  --theme-accent: #f5faff;
  --theme-on-accent: #0d2b83;
  --theme-action: #67e8f9;
  --theme-on-action: #0d2b83;
  --theme-action-rgb: 103, 232, 249;
  --theme-tempo: #ffe59a;
  --theme-tempo-rgb: 255, 229, 154;
  --theme-playback: #9effcf;
  --theme-playback-rgb: 158, 255, 207;
  --theme-on-playback: #0d2b83;
  --theme-secondary: #f5faff;
  --theme-on-note: #0d2b83;
  --theme-red: #f68ea1;
  --theme-blue: #76b0f3;
  --theme-green: #72bd68;
  --theme-pink: #eb8ec9;
  --theme-orange: #ea9a40;
  --theme-teal: #5ebbb9;
  --theme-purple: #c39aef;
  --theme-card-rgb: 24, 53, 137;
  --theme-control-rgb: 30, 58, 140;
  --theme-panel-rgb: 19, 48, 134;
  --theme-text-rgb: 240, 242, 248;
  --theme-muted-rgb: 170, 181, 212;
  --theme-line-rgb: 122, 138, 187;
  --theme-accent-rgb: 245, 250, 255;
  --theme-secondary-rgb: 245, 250, 255;
  --theme-red-rgb: 246, 142, 161;
  --theme-blue-rgb: 118, 176, 243;
  --theme-green-rgb: 114, 189, 104;
  --theme-pink-rgb: 235, 142, 201;
  --theme-orange-rgb: 234, 154, 64;
  --theme-teal-rgb: 94, 187, 185;
  --theme-purple-rgb: 195, 154, 239;
  --theme-glow: none;
  --chord-tone-root: #f68ea1;
  --chord-tone-second: #76b0f3;
  --chord-tone-third: #72bd68;
  --chord-tone-fourth: #eb8ec9;
  --chord-tone-fifth: #ea9a40;
  --chord-tone-sixth: #5ebbb9;
  --chord-tone-seventh: #c39aef;
  --landing-surface: #133086;
  --landing-surface-strong: #133086;
  --landing-card-surface: #183589;
  --landing-card-surface-strong: #183589;
  --landing-border: rgba(122, 138, 187, 0.5);
  --landing-border-soft: rgba(122, 138, 187, 0.3);
}
:root[data-custom-theme][data-color-theme='blueprint'] {
  color-scheme: dark;
  --page-bg: #0d2b83;
  --panel-bg: #133086;
  --surface-card: #183589;
  --surface-card-muted: #1e3a8c;
  --surface-key-card: #183589;
  --ink: #f0f2f8;
  --muted: #aab5d4;
  --accent: #f5faff;
  --accent-deep: #f5faff;
  --accent-soft: rgba(245, 250, 255, 0.13);
  --page-glow: rgba(245, 250, 255, 0.12);
  --panel-border: rgba(122, 138, 187, 0.5);
  --picker-border-color: #7a8abb;
  --theme-card: #183589;
  --theme-control: #1e3a8c;
  --theme-panel: #133086;
  --theme-text: #f0f2f8;
  --theme-muted: #aab5d4;
  --theme-line: #7a8abb;
  --theme-accent: #f5faff;
  --theme-on-accent: #0d2b83;
  --theme-action: #67e8f9;
  --theme-on-action: #0d2b83;
  --theme-action-rgb: 103, 232, 249;
  --theme-tempo: #ffe59a;
  --theme-tempo-rgb: 255, 229, 154;
  --theme-playback: #9effcf;
  --theme-playback-rgb: 158, 255, 207;
  --theme-on-playback: #0d2b83;
  --theme-secondary: #f5faff;
  --theme-on-note: #0d2b83;
  --theme-red: #f68ea1;
  --theme-blue: #76b0f3;
  --theme-green: #72bd68;
  --theme-pink: #eb8ec9;
  --theme-orange: #ea9a40;
  --theme-teal: #5ebbb9;
  --theme-purple: #c39aef;
  --theme-card-rgb: 24, 53, 137;
  --theme-control-rgb: 30, 58, 140;
  --theme-panel-rgb: 19, 48, 134;
  --theme-text-rgb: 240, 242, 248;
  --theme-muted-rgb: 170, 181, 212;
  --theme-line-rgb: 122, 138, 187;
  --theme-accent-rgb: 245, 250, 255;
  --theme-secondary-rgb: 245, 250, 255;
  --theme-red-rgb: 246, 142, 161;
  --theme-blue-rgb: 118, 176, 243;
  --theme-green-rgb: 114, 189, 104;
  --theme-pink-rgb: 235, 142, 201;
  --theme-orange-rgb: 234, 154, 64;
  --theme-teal-rgb: 94, 187, 185;
  --theme-purple-rgb: 195, 154, 239;
  --theme-glow: none;
  --chord-tone-root: #f68ea1;
  --chord-tone-second: #76b0f3;
  --chord-tone-third: #72bd68;
  --chord-tone-fourth: #eb8ec9;
  --chord-tone-fifth: #ea9a40;
  --chord-tone-sixth: #5ebbb9;
  --chord-tone-seventh: #c39aef;
  --landing-surface: #133086;
  --landing-surface-strong: #133086;
  --landing-card-surface: #183589;
  --landing-card-surface-strong: #183589;
  --landing-border: rgba(122, 138, 187, 0.5);
  --landing-border-soft: rgba(122, 138, 187, 0.3);
}

[data-theme-preview='sunburst'] {
  color-scheme: light;
  --page-bg: #fff3d6;
  --panel-bg: #f9edd1;
  --surface-card: #fffbf1;
  --surface-card-muted: #f4e8cc;
  --surface-key-card: #fffbf1;
  --ink: #0f0f0d;
  --muted: #59554b;
  --accent: #87440f;
  --accent-deep: #87440f;
  --accent-soft: rgba(135, 68, 15, 0.13);
  --page-glow: rgba(135, 68, 15, 0.12);
  --panel-border: rgba(139, 133, 117, 0.5);
  --picker-border-color: #8b8575;
  --theme-card: #fffbf1;
  --theme-control: #f4e8cc;
  --theme-panel: #f9edd1;
  --theme-text: #0f0f0d;
  --theme-muted: #59554b;
  --theme-line: #8b8575;
  --theme-accent: #87440f;
  --theme-on-accent: #ffffff;
  --theme-action: #af3e16;
  --theme-on-action: #ffffff;
  --theme-action-rgb: 175, 62, 22;
  --theme-tempo: #646011;
  --theme-tempo-rgb: 100, 96, 17;
  --theme-playback: #a12d50;
  --theme-playback-rgb: 161, 45, 80;
  --theme-on-playback: #ffffff;
  --theme-secondary: #87440f;
  --theme-on-note: #ffffff;
  --theme-red: #bf334c;
  --theme-blue: #2769b6;
  --theme-green: #37762e;
  --theme-pink: #ae3e85;
  --theme-orange: #965a15;
  --theme-teal: #107472;
  --theme-purple: #854cc3;
  --theme-card-rgb: 255, 251, 241;
  --theme-control-rgb: 244, 232, 204;
  --theme-panel-rgb: 249, 237, 209;
  --theme-text-rgb: 15, 15, 13;
  --theme-muted-rgb: 89, 85, 75;
  --theme-line-rgb: 139, 133, 117;
  --theme-accent-rgb: 135, 68, 15;
  --theme-secondary-rgb: 135, 68, 15;
  --theme-red-rgb: 191, 51, 76;
  --theme-blue-rgb: 39, 105, 182;
  --theme-green-rgb: 55, 118, 46;
  --theme-pink-rgb: 174, 62, 133;
  --theme-orange-rgb: 150, 90, 21;
  --theme-teal-rgb: 16, 116, 114;
  --theme-purple-rgb: 133, 76, 195;
  --theme-glow: none;
  --chord-tone-root: #bf334c;
  --chord-tone-second: #2769b6;
  --chord-tone-third: #37762e;
  --chord-tone-fourth: #ae3e85;
  --chord-tone-fifth: #965a15;
  --chord-tone-sixth: #107472;
  --chord-tone-seventh: #854cc3;
  --landing-surface: #f9edd1;
  --landing-surface-strong: #f9edd1;
  --landing-card-surface: #fffbf1;
  --landing-card-surface-strong: #fffbf1;
  --landing-border: rgba(139, 133, 117, 0.5);
  --landing-border-soft: rgba(139, 133, 117, 0.3);
}
:root[data-custom-theme][data-color-theme='sunburst'] {
  color-scheme: light;
  --page-bg: #fff3d6;
  --panel-bg: #f9edd1;
  --surface-card: #fffbf1;
  --surface-card-muted: #f4e8cc;
  --surface-key-card: #fffbf1;
  --ink: #0f0f0d;
  --muted: #59554b;
  --accent: #87440f;
  --accent-deep: #87440f;
  --accent-soft: rgba(135, 68, 15, 0.13);
  --page-glow: rgba(135, 68, 15, 0.12);
  --panel-border: rgba(139, 133, 117, 0.5);
  --picker-border-color: #8b8575;
  --theme-card: #fffbf1;
  --theme-control: #f4e8cc;
  --theme-panel: #f9edd1;
  --theme-text: #0f0f0d;
  --theme-muted: #59554b;
  --theme-line: #8b8575;
  --theme-accent: #87440f;
  --theme-on-accent: #ffffff;
  --theme-action: #af3e16;
  --theme-on-action: #ffffff;
  --theme-action-rgb: 175, 62, 22;
  --theme-tempo: #646011;
  --theme-tempo-rgb: 100, 96, 17;
  --theme-playback: #a12d50;
  --theme-playback-rgb: 161, 45, 80;
  --theme-on-playback: #ffffff;
  --theme-secondary: #87440f;
  --theme-on-note: #ffffff;
  --theme-red: #bf334c;
  --theme-blue: #2769b6;
  --theme-green: #37762e;
  --theme-pink: #ae3e85;
  --theme-orange: #965a15;
  --theme-teal: #107472;
  --theme-purple: #854cc3;
  --theme-card-rgb: 255, 251, 241;
  --theme-control-rgb: 244, 232, 204;
  --theme-panel-rgb: 249, 237, 209;
  --theme-text-rgb: 15, 15, 13;
  --theme-muted-rgb: 89, 85, 75;
  --theme-line-rgb: 139, 133, 117;
  --theme-accent-rgb: 135, 68, 15;
  --theme-secondary-rgb: 135, 68, 15;
  --theme-red-rgb: 191, 51, 76;
  --theme-blue-rgb: 39, 105, 182;
  --theme-green-rgb: 55, 118, 46;
  --theme-pink-rgb: 174, 62, 133;
  --theme-orange-rgb: 150, 90, 21;
  --theme-teal-rgb: 16, 116, 114;
  --theme-purple-rgb: 133, 76, 195;
  --theme-glow: none;
  --chord-tone-root: #bf334c;
  --chord-tone-second: #2769b6;
  --chord-tone-third: #37762e;
  --chord-tone-fourth: #ae3e85;
  --chord-tone-fifth: #965a15;
  --chord-tone-sixth: #107472;
  --chord-tone-seventh: #854cc3;
  --landing-surface: #f9edd1;
  --landing-surface-strong: #f9edd1;
  --landing-card-surface: #fffbf1;
  --landing-card-surface-strong: #fffbf1;
  --landing-border: rgba(139, 133, 117, 0.5);
  --landing-border-soft: rgba(139, 133, 117, 0.3);
}

[data-theme-preview='ink'] {
  color-scheme: light;
  --page-bg: #ffffff;
  --panel-bg: #f9f9f9;
  --surface-card: #ffffff;
  --surface-card-muted: #f4f4f4;
  --surface-key-card: #ffffff;
  --ink: #0f0f0f;
  --muted: #595959;
  --accent: #111111;
  --accent-deep: #111111;
  --accent-soft: rgba(17, 17, 17, 0.13);
  --page-glow: rgba(17, 17, 17, 0.12);
  --panel-border: rgba(140, 140, 140, 0.5);
  --picker-border-color: #8c8c8c;
  --theme-card: #ffffff;
  --theme-control: #f4f4f4;
  --theme-panel: #f9f9f9;
  --theme-text: #0f0f0f;
  --theme-muted: #595959;
  --theme-line: #8c8c8c;
  --theme-accent: #111111;
  --theme-on-accent: #ffffff;
  --theme-action: #282828;
  --theme-on-action: #ffffff;
  --theme-action-rgb: 40, 40, 40;
  --theme-tempo: #454545;
  --theme-tempo-rgb: 69, 69, 69;
  --theme-playback: #606060;
  --theme-playback-rgb: 96, 96, 96;
  --theme-on-playback: #ffffff;
  --theme-secondary: #111111;
  --theme-on-note: #ffffff;
  --theme-red: #cb3651;
  --theme-blue: #2970c2;
  --theme-green: #3b7e32;
  --theme-pink: #b9428d;
  --theme-orange: #a16117;
  --theme-teal: #117c7a;
  --theme-purple: #8d50ce;
  --theme-card-rgb: 255, 255, 255;
  --theme-control-rgb: 244, 244, 244;
  --theme-panel-rgb: 249, 249, 249;
  --theme-text-rgb: 15, 15, 15;
  --theme-muted-rgb: 89, 89, 89;
  --theme-line-rgb: 140, 140, 140;
  --theme-accent-rgb: 17, 17, 17;
  --theme-secondary-rgb: 17, 17, 17;
  --theme-red-rgb: 203, 54, 81;
  --theme-blue-rgb: 41, 112, 194;
  --theme-green-rgb: 59, 126, 50;
  --theme-pink-rgb: 185, 66, 141;
  --theme-orange-rgb: 161, 97, 23;
  --theme-teal-rgb: 17, 124, 122;
  --theme-purple-rgb: 141, 80, 206;
  --theme-glow: none;
  --chord-tone-root: #cb3651;
  --chord-tone-second: #2970c2;
  --chord-tone-third: #3b7e32;
  --chord-tone-fourth: #b9428d;
  --chord-tone-fifth: #a16117;
  --chord-tone-sixth: #117c7a;
  --chord-tone-seventh: #8d50ce;
  --landing-surface: #f9f9f9;
  --landing-surface-strong: #f9f9f9;
  --landing-card-surface: #ffffff;
  --landing-card-surface-strong: #ffffff;
  --landing-border: rgba(140, 140, 140, 0.5);
  --landing-border-soft: rgba(140, 140, 140, 0.3);
}
:root[data-custom-theme][data-color-theme='ink'] {
  color-scheme: light;
  --page-bg: #ffffff;
  --panel-bg: #f9f9f9;
  --surface-card: #ffffff;
  --surface-card-muted: #f4f4f4;
  --surface-key-card: #ffffff;
  --ink: #0f0f0f;
  --muted: #595959;
  --accent: #111111;
  --accent-deep: #111111;
  --accent-soft: rgba(17, 17, 17, 0.13);
  --page-glow: rgba(17, 17, 17, 0.12);
  --panel-border: rgba(140, 140, 140, 0.5);
  --picker-border-color: #8c8c8c;
  --theme-card: #ffffff;
  --theme-control: #f4f4f4;
  --theme-panel: #f9f9f9;
  --theme-text: #0f0f0f;
  --theme-muted: #595959;
  --theme-line: #8c8c8c;
  --theme-accent: #111111;
  --theme-on-accent: #ffffff;
  --theme-action: #282828;
  --theme-on-action: #ffffff;
  --theme-action-rgb: 40, 40, 40;
  --theme-tempo: #454545;
  --theme-tempo-rgb: 69, 69, 69;
  --theme-playback: #606060;
  --theme-playback-rgb: 96, 96, 96;
  --theme-on-playback: #ffffff;
  --theme-secondary: #111111;
  --theme-on-note: #ffffff;
  --theme-red: #cb3651;
  --theme-blue: #2970c2;
  --theme-green: #3b7e32;
  --theme-pink: #b9428d;
  --theme-orange: #a16117;
  --theme-teal: #117c7a;
  --theme-purple: #8d50ce;
  --theme-card-rgb: 255, 255, 255;
  --theme-control-rgb: 244, 244, 244;
  --theme-panel-rgb: 249, 249, 249;
  --theme-text-rgb: 15, 15, 15;
  --theme-muted-rgb: 89, 89, 89;
  --theme-line-rgb: 140, 140, 140;
  --theme-accent-rgb: 17, 17, 17;
  --theme-secondary-rgb: 17, 17, 17;
  --theme-red-rgb: 203, 54, 81;
  --theme-blue-rgb: 41, 112, 194;
  --theme-green-rgb: 59, 126, 50;
  --theme-pink-rgb: 185, 66, 141;
  --theme-orange-rgb: 161, 97, 23;
  --theme-teal-rgb: 17, 124, 122;
  --theme-purple-rgb: 141, 80, 206;
  --theme-glow: none;
  --chord-tone-root: #cb3651;
  --chord-tone-second: #2970c2;
  --chord-tone-third: #3b7e32;
  --chord-tone-fourth: #b9428d;
  --chord-tone-fifth: #a16117;
  --chord-tone-sixth: #117c7a;
  --chord-tone-seventh: #8d50ce;
  --landing-surface: #f9f9f9;
  --landing-surface-strong: #f9f9f9;
  --landing-card-surface: #ffffff;
  --landing-card-surface-strong: #ffffff;
  --landing-border: rgba(140, 140, 140, 0.5);
  --landing-border-soft: rgba(140, 140, 140, 0.3);
}

[data-theme-preview='lagoon'] {
  color-scheme: light;
  --page-bg: #e4faf5;
  --panel-bg: #def4ef;
  --surface-card: #f6fdfc;
  --surface-card-muted: #daefea;
  --surface-key-card: #f6fdfc;
  --ink: #0e0f0f;
  --muted: #505856;
  --accent: #126366;
  --accent-deep: #126366;
  --accent-soft: rgba(18, 99, 102, 0.13);
  --page-glow: rgba(18, 99, 102, 0.12);
  --panel-border: rgba(124, 137, 134, 0.5);
  --picker-border-color: #7c8986;
  --theme-card: #f6fdfc;
  --theme-control: #daefea;
  --theme-panel: #def4ef;
  --theme-text: #0e0f0f;
  --theme-muted: #505856;
  --theme-line: #7c8986;
  --theme-accent: #126366;
  --theme-on-accent: #ffffff;
  --theme-action: #a12e48;
  --theme-on-action: #ffffff;
  --theme-action-rgb: 161, 46, 72;
  --theme-tempo: #6a478d;
  --theme-tempo-rgb: 106, 71, 141;
  --theme-playback: #086b5f;
  --theme-playback-rgb: 8, 107, 95;
  --theme-on-playback: #ffffff;
  --theme-secondary: #126366;
  --theme-on-note: #ffffff;
  --theme-red: #c2344d;
  --theme-blue: #276bb9;
  --theme-green: #38772f;
  --theme-pink: #b03e86;
  --theme-orange: #985b16;
  --theme-teal: #117674;
  --theme-purple: #854cc3;
  --theme-card-rgb: 246, 253, 252;
  --theme-control-rgb: 218, 239, 234;
  --theme-panel-rgb: 222, 244, 239;
  --theme-text-rgb: 14, 15, 15;
  --theme-muted-rgb: 80, 88, 86;
  --theme-line-rgb: 124, 137, 134;
  --theme-accent-rgb: 18, 99, 102;
  --theme-secondary-rgb: 18, 99, 102;
  --theme-red-rgb: 194, 52, 77;
  --theme-blue-rgb: 39, 107, 185;
  --theme-green-rgb: 56, 119, 47;
  --theme-pink-rgb: 176, 62, 134;
  --theme-orange-rgb: 152, 91, 22;
  --theme-teal-rgb: 17, 118, 116;
  --theme-purple-rgb: 133, 76, 195;
  --theme-glow: none;
  --chord-tone-root: #c2344d;
  --chord-tone-second: #276bb9;
  --chord-tone-third: #38772f;
  --chord-tone-fourth: #b03e86;
  --chord-tone-fifth: #985b16;
  --chord-tone-sixth: #117674;
  --chord-tone-seventh: #854cc3;
  --landing-surface: #def4ef;
  --landing-surface-strong: #def4ef;
  --landing-card-surface: #f6fdfc;
  --landing-card-surface-strong: #f6fdfc;
  --landing-border: rgba(124, 137, 134, 0.5);
  --landing-border-soft: rgba(124, 137, 134, 0.3);
}
:root[data-custom-theme][data-color-theme='lagoon'] {
  color-scheme: light;
  --page-bg: #e4faf5;
  --panel-bg: #def4ef;
  --surface-card: #f6fdfc;
  --surface-card-muted: #daefea;
  --surface-key-card: #f6fdfc;
  --ink: #0e0f0f;
  --muted: #505856;
  --accent: #126366;
  --accent-deep: #126366;
  --accent-soft: rgba(18, 99, 102, 0.13);
  --page-glow: rgba(18, 99, 102, 0.12);
  --panel-border: rgba(124, 137, 134, 0.5);
  --picker-border-color: #7c8986;
  --theme-card: #f6fdfc;
  --theme-control: #daefea;
  --theme-panel: #def4ef;
  --theme-text: #0e0f0f;
  --theme-muted: #505856;
  --theme-line: #7c8986;
  --theme-accent: #126366;
  --theme-on-accent: #ffffff;
  --theme-action: #a12e48;
  --theme-on-action: #ffffff;
  --theme-action-rgb: 161, 46, 72;
  --theme-tempo: #6a478d;
  --theme-tempo-rgb: 106, 71, 141;
  --theme-playback: #086b5f;
  --theme-playback-rgb: 8, 107, 95;
  --theme-on-playback: #ffffff;
  --theme-secondary: #126366;
  --theme-on-note: #ffffff;
  --theme-red: #c2344d;
  --theme-blue: #276bb9;
  --theme-green: #38772f;
  --theme-pink: #b03e86;
  --theme-orange: #985b16;
  --theme-teal: #117674;
  --theme-purple: #854cc3;
  --theme-card-rgb: 246, 253, 252;
  --theme-control-rgb: 218, 239, 234;
  --theme-panel-rgb: 222, 244, 239;
  --theme-text-rgb: 14, 15, 15;
  --theme-muted-rgb: 80, 88, 86;
  --theme-line-rgb: 124, 137, 134;
  --theme-accent-rgb: 18, 99, 102;
  --theme-secondary-rgb: 18, 99, 102;
  --theme-red-rgb: 194, 52, 77;
  --theme-blue-rgb: 39, 107, 185;
  --theme-green-rgb: 56, 119, 47;
  --theme-pink-rgb: 176, 62, 134;
  --theme-orange-rgb: 152, 91, 22;
  --theme-teal-rgb: 17, 118, 116;
  --theme-purple-rgb: 133, 76, 195;
  --theme-glow: none;
  --chord-tone-root: #c2344d;
  --chord-tone-second: #276bb9;
  --chord-tone-third: #38772f;
  --chord-tone-fourth: #b03e86;
  --chord-tone-fifth: #985b16;
  --chord-tone-sixth: #117674;
  --chord-tone-seventh: #854cc3;
  --landing-surface: #def4ef;
  --landing-surface-strong: #def4ef;
  --landing-card-surface: #f6fdfc;
  --landing-card-surface-strong: #f6fdfc;
  --landing-border: rgba(124, 137, 134, 0.5);
  --landing-border-soft: rgba(124, 137, 134, 0.3);
}

[data-theme-preview='orchid'] {
  color-scheme: light;
  --page-bg: #f5eaff;
  --panel-bg: #efe4f9;
  --surface-card: #fcf8ff;
  --surface-card-muted: #eadff4;
  --surface-key-card: #fcf8ff;
  --ink: #0f0e0f;
  --muted: #565259;
  --accent: #6a287d;
  --accent-deep: #6a287d;
  --accent-soft: rgba(106, 40, 125, 0.13);
  --page-glow: rgba(106, 40, 125, 0.12);
  --panel-border: rgba(132, 126, 137, 0.5);
  --picker-border-color: #847e89;
  --theme-card: #fcf8ff;
  --theme-control: #eadff4;
  --theme-panel: #efe4f9;
  --theme-text: #0f0e0f;
  --theme-muted: #565259;
  --theme-line: #847e89;
  --theme-accent: #6a287d;
  --theme-on-accent: #ffffff;
  --theme-action: #7739b5;
  --theme-on-action: #ffffff;
  --theme-action-rgb: 119, 57, 181;
  --theme-tempo: #176878;
  --theme-tempo-rgb: 23, 104, 120;
  --theme-playback: #a22c68;
  --theme-playback-rgb: 162, 44, 104;
  --theme-on-playback: #ffffff;
  --theme-secondary: #6a287d;
  --theme-on-note: #ffffff;
  --theme-red: #b83149;
  --theme-blue: #2565af;
  --theme-green: #35722d;
  --theme-pink: #a73b80;
  --theme-orange: #915715;
  --theme-teal: #10716f;
  --theme-purple: #8149bc;
  --theme-card-rgb: 252, 248, 255;
  --theme-control-rgb: 234, 223, 244;
  --theme-panel-rgb: 239, 228, 249;
  --theme-text-rgb: 15, 14, 15;
  --theme-muted-rgb: 86, 82, 89;
  --theme-line-rgb: 132, 126, 137;
  --theme-accent-rgb: 106, 40, 125;
  --theme-secondary-rgb: 106, 40, 125;
  --theme-red-rgb: 184, 49, 73;
  --theme-blue-rgb: 37, 101, 175;
  --theme-green-rgb: 53, 114, 45;
  --theme-pink-rgb: 167, 59, 128;
  --theme-orange-rgb: 145, 87, 21;
  --theme-teal-rgb: 16, 113, 111;
  --theme-purple-rgb: 129, 73, 188;
  --theme-glow: none;
  --chord-tone-root: #b83149;
  --chord-tone-second: #2565af;
  --chord-tone-third: #35722d;
  --chord-tone-fourth: #a73b80;
  --chord-tone-fifth: #915715;
  --chord-tone-sixth: #10716f;
  --chord-tone-seventh: #8149bc;
  --landing-surface: #efe4f9;
  --landing-surface-strong: #efe4f9;
  --landing-card-surface: #fcf8ff;
  --landing-card-surface-strong: #fcf8ff;
  --landing-border: rgba(132, 126, 137, 0.5);
  --landing-border-soft: rgba(132, 126, 137, 0.3);
}
:root[data-custom-theme][data-color-theme='orchid'] {
  color-scheme: light;
  --page-bg: #f5eaff;
  --panel-bg: #efe4f9;
  --surface-card: #fcf8ff;
  --surface-card-muted: #eadff4;
  --surface-key-card: #fcf8ff;
  --ink: #0f0e0f;
  --muted: #565259;
  --accent: #6a287d;
  --accent-deep: #6a287d;
  --accent-soft: rgba(106, 40, 125, 0.13);
  --page-glow: rgba(106, 40, 125, 0.12);
  --panel-border: rgba(132, 126, 137, 0.5);
  --picker-border-color: #847e89;
  --theme-card: #fcf8ff;
  --theme-control: #eadff4;
  --theme-panel: #efe4f9;
  --theme-text: #0f0e0f;
  --theme-muted: #565259;
  --theme-line: #847e89;
  --theme-accent: #6a287d;
  --theme-on-accent: #ffffff;
  --theme-action: #7739b5;
  --theme-on-action: #ffffff;
  --theme-action-rgb: 119, 57, 181;
  --theme-tempo: #176878;
  --theme-tempo-rgb: 23, 104, 120;
  --theme-playback: #a22c68;
  --theme-playback-rgb: 162, 44, 104;
  --theme-on-playback: #ffffff;
  --theme-secondary: #6a287d;
  --theme-on-note: #ffffff;
  --theme-red: #b83149;
  --theme-blue: #2565af;
  --theme-green: #35722d;
  --theme-pink: #a73b80;
  --theme-orange: #915715;
  --theme-teal: #10716f;
  --theme-purple: #8149bc;
  --theme-card-rgb: 252, 248, 255;
  --theme-control-rgb: 234, 223, 244;
  --theme-panel-rgb: 239, 228, 249;
  --theme-text-rgb: 15, 14, 15;
  --theme-muted-rgb: 86, 82, 89;
  --theme-line-rgb: 132, 126, 137;
  --theme-accent-rgb: 106, 40, 125;
  --theme-secondary-rgb: 106, 40, 125;
  --theme-red-rgb: 184, 49, 73;
  --theme-blue-rgb: 37, 101, 175;
  --theme-green-rgb: 53, 114, 45;
  --theme-pink-rgb: 167, 59, 128;
  --theme-orange-rgb: 145, 87, 21;
  --theme-teal-rgb: 16, 113, 111;
  --theme-purple-rgb: 129, 73, 188;
  --theme-glow: none;
  --chord-tone-root: #b83149;
  --chord-tone-second: #2565af;
  --chord-tone-third: #35722d;
  --chord-tone-fourth: #a73b80;
  --chord-tone-fifth: #915715;
  --chord-tone-sixth: #10716f;
  --chord-tone-seventh: #8149bc;
  --landing-surface: #efe4f9;
  --landing-surface-strong: #efe4f9;
  --landing-card-surface: #fcf8ff;
  --landing-card-surface-strong: #fcf8ff;
  --landing-border: rgba(132, 126, 137, 0.5);
  --landing-border-soft: rgba(132, 126, 137, 0.3);
}

[data-theme-preview='cherry'] {
  color-scheme: dark;
  --page-bg: #300916;
  --panel-bg: #350f1c;
  --surface-card: #391420;
  --surface-card-muted: #3e1a26;
  --surface-key-card: #391420;
  --ink: #f3f0f1;
  --muted: #b7a9ad;
  --accent: #ffb4c9;
  --accent-deep: #ffb4c9;
  --accent-soft: rgba(255, 180, 201, 0.13);
  --page-glow: rgba(255, 180, 201, 0.12);
  --panel-border: rgba(141, 120, 127, 0.5);
  --picker-border-color: #8d787f;
  --theme-card: #391420;
  --theme-control: #3e1a26;
  --theme-panel: #350f1c;
  --theme-text: #f3f0f1;
  --theme-muted: #b7a9ad;
  --theme-line: #8d787f;
  --theme-accent: #ffb4c9;
  --theme-on-accent: #300916;
  --theme-action: #ff6489;
  --theme-on-action: #300916;
  --theme-action-rgb: 255, 100, 137;
  --theme-tempo: #f6ce74;
  --theme-tempo-rgb: 246, 206, 116;
  --theme-playback: #ee9fff;
  --theme-playback-rgb: 238, 159, 255;
  --theme-on-playback: #300916;
  --theme-secondary: #ffb4c9;
  --theme-on-note: #300916;
  --theme-red: #f15571;
  --theme-blue: #388dee;
  --theme-green: #51ad44;
  --theme-pink: #e15aaf;
  --theme-orange: #e68a21;
  --theme-teal: #169d9a;
  --theme-purple: #ab70e9;
  --theme-card-rgb: 57, 20, 32;
  --theme-control-rgb: 62, 26, 38;
  --theme-panel-rgb: 53, 15, 28;
  --theme-text-rgb: 243, 240, 241;
  --theme-muted-rgb: 183, 169, 173;
  --theme-line-rgb: 141, 120, 127;
  --theme-accent-rgb: 255, 180, 201;
  --theme-secondary-rgb: 255, 180, 201;
  --theme-red-rgb: 241, 85, 113;
  --theme-blue-rgb: 56, 141, 238;
  --theme-green-rgb: 81, 173, 68;
  --theme-pink-rgb: 225, 90, 175;
  --theme-orange-rgb: 230, 138, 33;
  --theme-teal-rgb: 22, 157, 154;
  --theme-purple-rgb: 171, 112, 233;
  --theme-glow: none;
  --chord-tone-root: #f15571;
  --chord-tone-second: #388dee;
  --chord-tone-third: #51ad44;
  --chord-tone-fourth: #e15aaf;
  --chord-tone-fifth: #e68a21;
  --chord-tone-sixth: #169d9a;
  --chord-tone-seventh: #ab70e9;
  --landing-surface: #350f1c;
  --landing-surface-strong: #350f1c;
  --landing-card-surface: #391420;
  --landing-card-surface-strong: #391420;
  --landing-border: rgba(141, 120, 127, 0.5);
  --landing-border-soft: rgba(141, 120, 127, 0.3);
}
:root[data-custom-theme][data-color-theme='cherry'] {
  color-scheme: dark;
  --page-bg: #300916;
  --panel-bg: #350f1c;
  --surface-card: #391420;
  --surface-card-muted: #3e1a26;
  --surface-key-card: #391420;
  --ink: #f3f0f1;
  --muted: #b7a9ad;
  --accent: #ffb4c9;
  --accent-deep: #ffb4c9;
  --accent-soft: rgba(255, 180, 201, 0.13);
  --page-glow: rgba(255, 180, 201, 0.12);
  --panel-border: rgba(141, 120, 127, 0.5);
  --picker-border-color: #8d787f;
  --theme-card: #391420;
  --theme-control: #3e1a26;
  --theme-panel: #350f1c;
  --theme-text: #f3f0f1;
  --theme-muted: #b7a9ad;
  --theme-line: #8d787f;
  --theme-accent: #ffb4c9;
  --theme-on-accent: #300916;
  --theme-action: #ff6489;
  --theme-on-action: #300916;
  --theme-action-rgb: 255, 100, 137;
  --theme-tempo: #f6ce74;
  --theme-tempo-rgb: 246, 206, 116;
  --theme-playback: #ee9fff;
  --theme-playback-rgb: 238, 159, 255;
  --theme-on-playback: #300916;
  --theme-secondary: #ffb4c9;
  --theme-on-note: #300916;
  --theme-red: #f15571;
  --theme-blue: #388dee;
  --theme-green: #51ad44;
  --theme-pink: #e15aaf;
  --theme-orange: #e68a21;
  --theme-teal: #169d9a;
  --theme-purple: #ab70e9;
  --theme-card-rgb: 57, 20, 32;
  --theme-control-rgb: 62, 26, 38;
  --theme-panel-rgb: 53, 15, 28;
  --theme-text-rgb: 243, 240, 241;
  --theme-muted-rgb: 183, 169, 173;
  --theme-line-rgb: 141, 120, 127;
  --theme-accent-rgb: 255, 180, 201;
  --theme-secondary-rgb: 255, 180, 201;
  --theme-red-rgb: 241, 85, 113;
  --theme-blue-rgb: 56, 141, 238;
  --theme-green-rgb: 81, 173, 68;
  --theme-pink-rgb: 225, 90, 175;
  --theme-orange-rgb: 230, 138, 33;
  --theme-teal-rgb: 22, 157, 154;
  --theme-purple-rgb: 171, 112, 233;
  --theme-glow: none;
  --chord-tone-root: #f15571;
  --chord-tone-second: #388dee;
  --chord-tone-third: #51ad44;
  --chord-tone-fourth: #e15aaf;
  --chord-tone-fifth: #e68a21;
  --chord-tone-sixth: #169d9a;
  --chord-tone-seventh: #ab70e9;
  --landing-surface: #350f1c;
  --landing-surface-strong: #350f1c;
  --landing-card-surface: #391420;
  --landing-card-surface-strong: #391420;
  --landing-border: rgba(141, 120, 127, 0.5);
  --landing-border-soft: rgba(141, 120, 127, 0.3);
}

/* Semantic color coverage follows the source cascade. */
:root[data-custom-theme] .sr-only {
  border: 0;
}
:root[data-custom-theme] body {
  color: var(--ink);
  background: radial-gradient(circle at 50% -14rem, rgba(var(--theme-card-rgb), 0.72), transparent 28rem),
    radial-gradient(circle at 88% 10rem, var(--page-glow), transparent 30rem),
    radial-gradient(circle at 8% 18rem, rgba(var(--theme-accent-rgb), 0.075), transparent 26rem),
    var(--page-bg);
}
:root[data-custom-theme] button:focus-visible,
:root[data-custom-theme] input:focus-visible,
:root[data-custom-theme] select:focus-visible {
  outline: 3px solid rgba(var(--theme-accent-rgb), 0.38);
}
:root[data-custom-theme] .eyebrow,
:root[data-custom-theme] .panel-kicker,
:root[data-custom-theme] .status-label {
  color: var(--accent-deep);
}
:root[data-custom-theme] .status-pill,
:root[data-custom-theme] .panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
}
:root[data-custom-theme] .page-footer {
  color: var(--muted);
}
:root[data-custom-theme] .page-footer a {
  color: inherit;
}
:root[data-custom-theme] .footer-utility-links a {
  color: var(--muted);
}
:root[data-custom-theme] .footer-utility-links a:hover,
:root[data-custom-theme] .footer-utility-links a:focus-visible {
  color: var(--accent-deep);
}
:root[data-custom-theme] .diagram-zoom-overlay {
  background: rgba(23, 16, 11, calc(0.5 * var(--diagram-zoom-backdrop-opacity)));
}
:root[data-custom-theme] .app-info-overlay {
  background: rgba(23, 16, 11, 0.38);
}
:root[data-custom-theme] .app-info-sheet {
  border: 1px solid rgba(var(--theme-line-rgb), 0.14);
  background: rgba(var(--theme-card-rgb), 0.98);
}
:root[data-custom-theme] .app-info-dismiss-handle span {
  background: rgba(var(--theme-control-rgb), 0.2);
}
:root[data-custom-theme] .app-info-close {
  border: 1px solid rgba(var(--theme-line-rgb), 0.14);
  background: rgba(var(--theme-card-rgb), 0.92);
  color: var(--accent-deep);
}
:root[data-custom-theme] .app-info-close svg {
  fill: none;
  stroke: currentColor;
}
:root[data-custom-theme] .app-info-copy {
  color: var(--muted);
}
:root[data-custom-theme] .app-info-overlay[data-app-info-active-panel='how-to'] .app-info-detail-navigation {
  background: var(--theme-card);
  border-bottom: 1px solid var(--panel-border);
}
:root[data-custom-theme] .app-info-overlay[data-app-info-active-panel='how-to'] .app-info-detail-navigation::before {
  background: inherit;
}
:root[data-custom-theme][data-theme='dark'] .app-info-overlay[data-app-info-active-panel='how-to'] .app-info-detail-navigation {
  background: var(--theme-control);
}
:root[data-custom-theme] .app-info-detail-back {
  border: 1px solid rgba(var(--theme-line-rgb), 0.14);
  background: rgba(var(--theme-card-rgb), 0.92);
  color: var(--accent-deep);
}
:root[data-custom-theme] .app-info-detail-back svg {
  fill: none;
  stroke: currentColor;
}
:root[data-custom-theme] .app-info-link {
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-card-rgb), 0.86);
  color: inherit;
}
:root[data-custom-theme] .app-info-link:hover,
:root[data-custom-theme] .app-info-link:focus-visible {
  border-color: rgba(var(--theme-accent-rgb), 0.3);
  color: var(--accent-deep);
}
:root[data-custom-theme] .app-info-link-title {
  color: var(--ink);
}
:root[data-custom-theme] .app-info-link-stars {
  color: var(--theme-accent);
}
:root[data-custom-theme] .app-info-guide-cta {
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-card-rgb), 0.92);
}
:root[data-custom-theme] .app-info-guide-button {
  border: 1px solid rgba(var(--theme-accent-rgb), 0.34);
  background: var(--theme-accent);
  color: var(--theme-on-accent);
}
:root[data-custom-theme] .app-info-guide-button:hover,
:root[data-custom-theme] .app-info-guide-button:focus-visible {
  border-color: rgba(var(--theme-accent-rgb), 0.48);
}
:root[data-custom-theme] .app-info-guide-copy {
  color: var(--muted);
}
:root[data-custom-theme] .app-info-link-body {
  color: var(--muted);
}
:root[data-custom-theme] .app-info-detail-caption,
:root[data-custom-theme] .app-info-detail-copy,
:root[data-custom-theme] .app-info-detail-note,
:root[data-custom-theme] .app-info-detail-list {
  color: var(--muted);
}
:root[data-custom-theme] .premium-progress {
  outline: none;
}
:root[data-custom-theme] .app-info-overlay[data-app-info-active-panel='premium'] .premium-progress:not([hidden]) {
  color: var(--muted);
}
:root[data-custom-theme] .premium-progress-spinner {
  border: 3px solid var(--landing-border);
  border-top-color: var(--accent-deep);
}
:root[data-custom-theme] #app-info-panel-premium-title:focus,
:root[data-custom-theme] #app-premium-account-copy:focus {
  outline: none;
}
:root[data-custom-theme] .premium-feature-list {
  color: var(--muted);
}
:root[data-custom-theme] .premium-web-subtitle {
  color: var(--muted);
}
:root[data-custom-theme] .premium-web-features h4,
:root[data-custom-theme] .premium-web-plan-column h4 {
  color: var(--theme-accent);
}
:root[data-custom-theme] .premium-web-feature-icon {
  background: linear-gradient(145deg, var(--theme-accent), var(--theme-accent));
  color: var(--theme-text);
}
:root[data-custom-theme] .premium-web-feature-icon svg {
  fill: none;
  stroke: currentColor;
}
:root[data-custom-theme] .premium-web-feature strong {
  color: var(--ink);
}
:root[data-custom-theme] .premium-web-feature span span {
  color: var(--muted);
}
:root[data-custom-theme] .premium-web-plan-column {
  border-left: 1px solid rgba(var(--theme-line-rgb), 0.16);
}
:root[data-custom-theme] .premium-web-plan {
  border-top: 1px solid rgba(var(--theme-line-rgb), 0.16);
}
:root[data-custom-theme] .premium-web-plan:first-child {
  border-top: 0;
}
:root[data-custom-theme] .premium-web-plan p {
  color: var(--theme-text);
}
:root[data-custom-theme] .premium-web-plan-note {
  color: var(--theme-accent);
}
:root[data-custom-theme] .premium-web-trust-list {
  color: var(--ink);
}
:root[data-custom-theme] .premium-web-trust-list li::before {
  background: var(--theme-accent);
  color: var(--theme-on-accent);
}
:root[data-custom-theme] .premium-web-plan-continue-button {
  border-color: rgba(var(--theme-accent-rgb), 0.32);
  background: var(--theme-accent);
}
:root[data-custom-theme] #app-premium-status-copy,
:root[data-custom-theme] #app-premium-status-copy[data-web-premium-step='account'],
:root[data-custom-theme] #app-premium-status-copy.premium-lifetime-active {
  color: var(--muted);
}
:root[data-custom-theme] .premium-returning-panel,
:root[data-custom-theme] .premium-access-help {
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
}
:root[data-custom-theme] .premium-returning-panel p {
  color: var(--muted);
}
:root[data-custom-theme] .premium-access-help p {
  color: var(--muted);
}
:root[data-custom-theme] .premium-access-help summary {
  color: var(--accent-deep);
}
:root[data-custom-theme] .premium-help-link {
  border: 0;
  background: transparent;
  color: var(--accent-deep);
}
:root[data-custom-theme] .premium-email-input {
  border: 1px solid rgba(var(--theme-line-rgb), 0.2);
  background: rgba(var(--theme-card-rgb), 0.92);
  color: var(--ink);
}
:root[data-custom-theme] .premium-action-button {
  border: 1px solid rgba(var(--theme-accent-rgb), 0.3);
  background: var(--theme-accent);
  color: var(--theme-on-accent);
}
:root[data-custom-theme] .premium-action-button-secondary {
  background: rgba(var(--theme-card-rgb), 0.92);
  color: var(--accent-deep);
}
:root[data-custom-theme][data-theme='dark'] .premium-action-button-secondary,
:root[data-custom-theme][data-theme='dark'] .premium-email-input {
  background: var(--surface-card);
  border-color: var(--panel-border);
  color: var(--ink);
}
:root[data-custom-theme][data-theme='dark'] .premium-email-input::placeholder {
  color: var(--muted);
}
:root[data-custom-theme] .premium-action-button-danger {
  border-color: rgba(var(--theme-red-rgb), 0.36);
  background: rgba(var(--theme-card-rgb), 0.92);
  color: var(--theme-red);
}
:root[data-custom-theme] .premium-checkout-button {
  border-color: rgba(var(--theme-accent-rgb), 0.28);
  background: var(--theme-accent);
  color: var(--theme-on-accent);
}
:root[data-custom-theme] .provider-signin-button-apple {
  border-color: var(--theme-line);
  background: var(--theme-panel);
  color: var(--theme-text);
}
:root[data-custom-theme] .provider-signin-button-apple .provider-signin-icon {
  fill: currentColor;
}
:root[data-custom-theme] .provider-signin-button-google {
  border-color: var(--theme-line);
  background: var(--theme-card);
  color: var(--theme-muted);
}
:root[data-custom-theme] .settings-premium-unlock-button {
  border: 1px solid rgba(var(--theme-accent-rgb), 0.26);
  background: rgba(var(--theme-accent-rgb), 0.1);
  color: var(--accent-deep);
}
:root[data-custom-theme] .tuner-panel {
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-card-rgb), 0.84);
}
:root[data-custom-theme] .tuner-note {
  color: var(--ink);
}
:root[data-custom-theme] .tuner-meter {
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
  background: linear-gradient(90deg, rgba(var(--theme-accent-rgb), 0.13), transparent 38%, transparent 62%, rgba(var(--theme-accent-rgb), 0.14)),
    var(--tuner-meter-bg);
}
:root[data-custom-theme] .tuner-meter::before {
  background: rgba(var(--theme-control-rgb), 0.16);
}
:root[data-custom-theme] .tuner-meter-label {
  color: var(--muted);
}
:root[data-custom-theme] .tuner-meter-center {
  background: rgba(var(--theme-control-rgb), 0.3);
}
:root[data-custom-theme] .tuner-meter-safe-zone {
  background: var(--tuner-good-soft);
}
:root[data-custom-theme] .tuner-needle {
  background: var(--theme-control);
}
:root[data-custom-theme] .tuner-panel[data-tuner-state='in-tune'] .tuner-needle {
  background: var(--tuner-good);
}
:root[data-custom-theme] .tuner-start-button,
:root[data-custom-theme] .tuner-stop-button {
  border: 1px solid rgba(var(--theme-accent-rgb), 0.32);
  background: var(--theme-accent);
  color: var(--theme-on-accent);
}
:root[data-custom-theme] .tuner-stop-button {
  border-color: rgba(var(--theme-accent-rgb), 0.28);
  background: var(--theme-accent);
}
:root[data-custom-theme] .tuner-status {
  color: var(--muted);
}
:root[data-custom-theme] .tuner-panel[data-tuner-state='error'] .tuner-status {
  color: var(--theme-red);
}
:root[data-custom-theme] .tuner-panel[data-tuner-state='in-tune'] .tuner-status {
  color: var(--tuner-good);
}
:root[data-custom-theme] .practice-icon-button,
:root[data-custom-theme] .practice-period-controls button,
:root[data-custom-theme] .practice-view-tabs button,
:root[data-custom-theme] .practice-secondary-button,
:root[data-custom-theme] .practice-primary-button {
  border: 1px solid rgba(var(--theme-line-rgb), 0.14);
  background: rgba(var(--theme-card-rgb), 0.92);
  color: var(--accent-deep);
}
:root[data-custom-theme] .practice-icon-button svg,
:root[data-custom-theme] .practice-period-controls svg {
  fill: none;
  stroke: currentColor;
}
:root[data-custom-theme] .practice-locked-banner,
:root[data-custom-theme] .practice-settings,
:root[data-custom-theme] .practice-manual-form,
:root[data-custom-theme] .practice-day-detail {
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-card-rgb), 0.84);
}
:root[data-custom-theme] .practice-locked-banner strong,
:root[data-custom-theme] .practice-stat-card strong {
  color: var(--ink);
}
:root[data-custom-theme] .practice-locked-banner span {
  color: var(--muted);
}
:root[data-custom-theme] .practice-primary-button {
  border-color: rgba(var(--theme-accent-rgb), 0.28);
  background: var(--theme-accent);
  color: var(--theme-on-accent);
}
:root[data-custom-theme] .practice-settings-scrim {
  background: rgba(var(--theme-control-rgb), 0.28);
}
:root[data-custom-theme] .practice-settings-popup .practice-settings,
:root[data-custom-theme] .practice-manual-popup .practice-manual-form,
:root[data-custom-theme] .practice-day-detail-popup .practice-day-detail {
  background: var(--theme-card);
}
:root[data-custom-theme] .practice-settings-header strong {
  color: var(--ink);
}
:root[data-custom-theme] .practice-settings-header span {
  color: var(--muted);
}
:root[data-custom-theme] .practice-settings .settings-row {
  background: rgba(var(--theme-card-rgb), 0.7);
}
:root[data-custom-theme] .practice-view-tabs {
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-control-rgb), 0.58);
}
:root[data-custom-theme] .practice-view-tabs button {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}
:root[data-custom-theme] .practice-view-tabs button[aria-pressed='true'] {
  background: rgba(var(--theme-card-rgb), 0.94);
  color: var(--accent-deep);
}
:root[data-custom-theme] .practice-period-controls strong {
  color: var(--ink);
}
:root[data-custom-theme] .practice-heatmap {
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-card-rgb), 0.84);
}
:root[data-custom-theme] .practice-year-day-labels {
  color: var(--muted);
}
:root[data-custom-theme] .practice-year-month {
  color: var(--muted);
}
:root[data-custom-theme] .practice-month-day-labels {
  color: var(--muted);
}
:root[data-custom-theme] .practice-heatmap-cell {
  border: 0;
  background: var(--practice-empty-cell);
}
:root[data-custom-theme] .practice-heatmap-cell.is-outside:not(.has-practice) {
  background: var(--practice-outside-cell);
}
:root[data-custom-theme] .practice-level-1 {
  background: var(--practice-level-1);
}
:root[data-custom-theme] .practice-level-2 {
  background: var(--practice-level-2);
}
:root[data-custom-theme] .practice-level-3 {
  background: var(--practice-level-3);
}
:root[data-custom-theme] .practice-level-4 {
  background: var(--practice-level-4);
}
:root[data-custom-theme] .practice-heatmap-cell.is-selected {
  outline: 0;
}
:root[data-custom-theme] .practice-tooltip {
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-control-rgb), 0.94);
  color: var(--theme-text);
}
:root[data-custom-theme] .practice-tooltip-detail {
  border: 0;
  background: transparent;
  color: var(--theme-text);
}
:root[data-custom-theme] .practice-tooltip-add {
  border: 1px solid rgba(var(--theme-line-rgb), 0.24);
  background: rgba(var(--theme-card-rgb), 0.1);
  color: inherit;
}
:root[data-custom-theme] .practice-tooltip-add svg {
  fill: none;
  stroke: currentColor;
}
:root[data-custom-theme] .practice-stat-card {
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-card-rgb), 0.84);
}
:root[data-custom-theme] .practice-stat-card span {
  color: var(--muted);
}
:root[data-custom-theme] .practice-day-session {
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-card-rgb), 0.78);
}
:root[data-custom-theme] .practice-day-session.is-empty {
  color: var(--muted);
}
:root[data-custom-theme] .practice-day-session-copy span {
  color: var(--muted);
}
:root[data-custom-theme] .practice-manual-grid label {
  color: var(--muted);
}
:root[data-custom-theme] .practice-manual-grid input,
:root[data-custom-theme] .practice-localized-picker,
:root[data-custom-theme] .practice-manual-grid select {
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-card-rgb), 0.88);
  color: var(--ink);
}
:root[data-custom-theme] .practice-manual-grid .practice-localized-native-input {
  border: 0;
}
:root[data-custom-theme] .favorite-folder-create-button {
  border: 1px solid rgba(var(--theme-line-rgb), 0.14);
  background: rgba(var(--theme-card-rgb), 0.88);
  color: var(--accent-deep);
}
:root[data-custom-theme] .favorite-folder-create-button svg {
  fill: none;
  stroke: currentColor;
}
:root[data-custom-theme] .favorite-folder {
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-card-rgb), 0.5);
}
:root[data-custom-theme] .favorite-folder.is-drop-target {
  border-color: rgba(var(--theme-accent-rgb), 0.78);
  background: rgba(var(--theme-accent-rgb), 0.14);
}
:root[data-custom-theme] .favorite-folder-toggle {
  border: 0;
  background: transparent;
  color: var(--ink);
}
:root[data-custom-theme] .favorite-folder-toggle svg {
  fill: none;
  stroke: currentColor;
}
:root[data-custom-theme] .favorite-folder-count {
  background: rgba(var(--theme-control-rgb), 0.1);
  color: var(--muted);
}
:root[data-custom-theme] .favorite-folder-empty {
  color: var(--muted);
}
:root[data-custom-theme] .favorite-row {
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-card-rgb), 0.88);
}
:root[data-custom-theme] .favorite-row-title {
  border: 0;
  background: transparent;
  color: var(--ink);
}
:root[data-custom-theme] .favorite-row-action,
:root[data-custom-theme] .favorite-folder-reorder-handle,
:root[data-custom-theme] .favorite-reorder-handle {
  border: 1px solid rgba(var(--theme-line-rgb), 0.14);
  background: rgba(var(--theme-card-rgb), 0.88);
  color: var(--accent-deep);
}
:root[data-custom-theme] .favorite-row-action svg,
:root[data-custom-theme] .favorite-folder-reorder-handle svg,
:root[data-custom-theme] .favorite-reorder-handle svg {
  fill: none;
  stroke: currentColor;
}
:root[data-custom-theme] .favorite-folder-reorder-handle svg circle,
:root[data-custom-theme] .favorite-reorder-handle svg circle {
  fill: currentColor;
  stroke: none;
}
:root[data-custom-theme] .favorite-dialog-overlay {
  background: rgba(23, 16, 11, 0.42);
}
:root[data-custom-theme] .favorite-dialog {
  border: 1px solid rgba(var(--theme-line-rgb), 0.14);
  background: rgba(var(--theme-card-rgb), 0.98);
}
:root[data-custom-theme] .favorite-dialog-body {
  color: var(--muted);
}
:root[data-custom-theme] .favorite-title-label,
:root[data-custom-theme] .favorite-folder-label,
:root[data-custom-theme] .favorite-new-folder-label {
  color: var(--muted);
}
:root[data-custom-theme] .favorite-title-label input,
:root[data-custom-theme] .favorite-new-folder-label input,
:root[data-custom-theme] .favorite-folder-label select {
  border: 1px solid rgba(var(--theme-line-rgb), 0.2);
  background: var(--theme-card);
  color: var(--ink);
}
:root[data-custom-theme] .favorite-dialog-cancel {
  border: 1px solid rgba(var(--theme-line-rgb), 0.14);
  background: rgba(var(--theme-card-rgb), 0.92);
  color: var(--accent-deep);
}
:root[data-custom-theme] .favorite-dialog-confirm {
  border: 1px solid rgba(var(--theme-accent-rgb), 0.3);
  background: var(--theme-accent);
  color: var(--theme-on-accent);
}
:root[data-custom-theme] .review-prompt-actions .favorite-dialog-confirm {
  border-color: rgba(var(--theme-accent-rgb), 0.32);
  background: var(--theme-accent);
  color: var(--theme-on-accent);
}
:root[data-custom-theme] .monetization-dialog-overlay[data-mode='day4'] .favorite-dialog-confirm,
:root[data-custom-theme] .monetization-dialog-overlay[data-mode='warning-80'] .favorite-dialog-confirm,
:root[data-custom-theme] .monetization-dialog-overlay[data-mode='limit-reached'] .favorite-dialog-confirm {
  border-color: rgba(var(--theme-accent-rgb), 0.32);
  background: var(--theme-accent);
  color: var(--theme-on-accent);
}
:root[data-custom-theme] .app-info-help-page {
  border: 1px solid var(--panel-border);
}
:root[data-custom-theme] .app-info-help-page-summary:focus-visible {
  outline: 2px solid var(--accent-deep);
}
:root[data-custom-theme] .app-info-help-page-title {
  color: var(--ink);
}
:root[data-custom-theme] .app-info-help-page-description {
  color: var(--muted);
}
:root[data-custom-theme] .app-info-help-page-chevron {
  fill: none;
  stroke: var(--muted);
}
:root[data-custom-theme] .app-info-help-row {
  border-top: 1px solid var(--panel-border);
}
:root[data-custom-theme] .app-info-help-icon {
  fill: none;
  stroke: var(--accent-deep);
}
:root[data-custom-theme] .app-info-help-row-copy h5 {
  color: var(--ink);
}
:root[data-custom-theme] .app-info-help-row-copy p {
  color: var(--muted);
}
:root[data-custom-theme] .app-info-detail-note a,
:root[data-custom-theme] .app-info-detail-list a {
  color: var(--accent-deep);
}
:root[data-custom-theme] .app-info-feedback {
  color: var(--accent-deep);
}
:root[data-custom-theme] #app-premium-account-copy.is-error,
:root[data-custom-theme] #app-premium-restore-copy.is-error,
:root[data-custom-theme] .app-info-feedback.is-error {
  color: var(--theme-red);
}
:root[data-custom-theme] .onboarding-overlay {
  background: rgba(21, 15, 10, 0.5);
}
:root[data-custom-theme] #onboarding-overlay {
  background: var(--panel-bg);
}
:root[data-custom-theme] .onboarding-sheet {
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
}
:root[data-custom-theme] #onboarding-overlay .onboarding-sheet {
  border: 0;
  background: var(--panel-bg);
}
:root[data-custom-theme] .onboarding-step-label {
  color: var(--theme-muted);
}
:root[data-custom-theme] .onboarding-progress span {
  background: rgba(var(--theme-control-rgb), 0.16);
}
:root[data-custom-theme] .onboarding-progress span.is-active {
  background: var(--theme-accent);
}
:root[data-custom-theme] .onboarding-progress span.is-complete {
  background: rgba(var(--theme-accent-rgb), 0.5);
}
:root[data-custom-theme] .onboarding-welcome-hero .onboarding-language-label {
  color: var(--ink);
}
:root[data-custom-theme] .onboarding-feature-group li {
  color: var(--ink);
}
:root[data-custom-theme] .onboarding-feature-group li::after {
  background: currentColor;
}
:root[data-custom-theme] .onboarding-free-limit-note {
  color: var(--theme-muted);
}
:root[data-custom-theme] .onboarding-language-label {
  color: var(--theme-muted);
}
:root[data-custom-theme] .onboarding-language-field select {
  border: 1px solid rgba(var(--theme-line-rgb), 0.14);
  background-color: rgba(var(--theme-card-rgb), 0.9);
  color: var(--ink);
}
:root[data-custom-theme] .onboarding-eyebrow {
  color: var(--theme-muted);
}
:root[data-custom-theme] .onboarding-page h2 {
  color: var(--theme-text);
}
:root[data-custom-theme] .onboarding-copy {
  color: var(--muted);
}
:root[data-custom-theme] .scale-practice-update-pro-note,
:root[data-custom-theme] .triad-trainer-update-pro-note,
:root[data-custom-theme] .long-progression-update-pro-note {
  background: rgba(var(--theme-accent-rgb), 0.08);
  color: var(--theme-text);
}
:root[data-custom-theme] .scale-practice-update-pro-note strong,
:root[data-custom-theme] .triad-trainer-update-pro-note strong,
:root[data-custom-theme] .long-progression-update-pro-note strong {
  color: var(--accent-deep);
}
:root[data-custom-theme] .onboarding-highlight-card {
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
  background: var(--surface-card);
}
:root[data-custom-theme] .onboarding-highlight-card h3 {
  color: var(--accent-deep);
}
:root[data-custom-theme] .onboarding-highlight-card p,
:root[data-custom-theme] .onboarding-demo-summary-copy,
:root[data-custom-theme] .onboarding-demo-preview-note {
  color: var(--muted);
}
:root[data-custom-theme] .onboarding-demo-panel {
  border: 1px solid rgba(var(--theme-line-rgb), 0.1);
  background: rgba(var(--theme-card-rgb), 0.92);
}
:root[data-custom-theme] .onboarding-updated-visual .onboarding-static-image {
  border: 1px solid rgba(var(--theme-line-rgb), 0.16);
  background: var(--theme-card);
}
:root[data-custom-theme] .onboarding-static-visual figcaption {
  color: var(--theme-muted);
}
:root[data-custom-theme] .onboarding-rotation-note {
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-card-rgb), 0.88);
}
:root[data-custom-theme] .onboarding-rotation-note-label {
  color: var(--theme-muted);
}
:root[data-custom-theme] .onboarding-rotation-note-value {
  color: var(--theme-text);
}
:root[data-custom-theme] .onboarding-back-button,
:root[data-custom-theme] .onboarding-close-button,
:root[data-custom-theme] .onboarding-next-button,
:root[data-custom-theme] .onboarding-skip-button {
  border: 1px solid rgba(var(--theme-line-rgb), 0.14);
  background: rgba(var(--theme-card-rgb), 0.9);
  color: var(--accent-deep);
}
:root[data-custom-theme] .onboarding-option-group-label {
  color: var(--theme-muted);
}
:root[data-custom-theme] .onboarding-demo-card .onboarding-demo-chord-picker {
  border: 0;
  background: none;
  color: inherit;
}
:root[data-custom-theme] .onboarding-tempo-block {
  background: transparent;
  border: 0;
}
:root[data-custom-theme] .onboarding-close-button {
  color: var(--theme-muted);
  background: rgba(var(--theme-card-rgb), 0.78);
  border-color: rgba(var(--theme-line-rgb), 0.12);
}
:root[data-custom-theme] .onboarding-back-button {
  border-color: rgba(var(--theme-line-rgb), 0.16);
  background: rgba(var(--theme-card-rgb), 0.92);
  color: var(--accent-deep);
}
:root[data-custom-theme] .onboarding-next-button {
  background: var(--theme-accent);
  border-color: rgba(var(--theme-accent-rgb), 0.34);
  color: var(--theme-on-accent);
}
:root[data-custom-theme] .onboarding-start-playing-button {
  border: 0;
  background: transparent;
  color: var(--theme-muted);
}
:root[data-custom-theme] .onboarding-skip-button {
  border: 0;
  background: transparent;
  color: var(--theme-muted);
}
:root[data-custom-theme] .onboarding-back-button:hover,
:root[data-custom-theme] .onboarding-back-button:focus-visible,
:root[data-custom-theme] .onboarding-close-button:hover,
:root[data-custom-theme] .onboarding-close-button:focus-visible,
:root[data-custom-theme] .onboarding-next-button:hover,
:root[data-custom-theme] .onboarding-next-button:focus-visible,
:root[data-custom-theme] .onboarding-start-playing-button:hover,
:root[data-custom-theme] .onboarding-start-playing-button:focus-visible,
:root[data-custom-theme] .onboarding-skip-button:hover,
:root[data-custom-theme] .onboarding-skip-button:focus-visible {
  border-color: rgba(var(--theme-accent-rgb), 0.3);
}
:root[data-custom-theme] .onboarding-start-playing-button:hover,
:root[data-custom-theme] .onboarding-start-playing-button:focus-visible {
  color: var(--theme-accent);
}
:root[data-custom-theme] .diagram-zoom-sheet {
  border: 1px solid rgba(var(--theme-line-rgb), 0.14);
  background: rgba(var(--theme-card-rgb), 0.98);
}
:root[data-custom-theme] .diagram-zoom-dismiss-handle span {
  background: rgba(var(--theme-control-rgb), 0.2);
}
:root[data-custom-theme] .diagram-zoom-close {
  border: 1px solid rgba(var(--theme-line-rgb), 0.14);
  background: rgba(var(--theme-card-rgb), 0.92);
  color: var(--accent-deep);
}
:root[data-custom-theme] .diagram-zoom-close svg {
  fill: none;
  stroke: currentColor;
}
:root[data-custom-theme] .diagram-zoom-nav {
  border: 1px solid rgba(var(--theme-line-rgb), 0.14);
  background: rgba(var(--theme-card-rgb), 0.94);
  color: var(--accent-deep);
}
:root[data-custom-theme] .diagram-zoom-nav svg {
  fill: none;
  stroke: currentColor;
}
:root[data-custom-theme] .tiktok-ios-app-store-note {
  color: var(--muted);
}
:root[data-custom-theme] .noscript-copy {
  background: rgba(var(--theme-card-rgb), 0.94);
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
  color: var(--muted);
}
:root[data-custom-theme] .web-copy-intro,
:root[data-custom-theme] .web-upgrade-section,
:root[data-custom-theme] .web-feature-section,
:root[data-custom-theme] .web-faq {
  background: var(--landing-surface);
  border: 1px solid var(--landing-border);
}
:root[data-custom-theme] .web-social-panel {
  border-left: 1px solid var(--landing-border-soft);
}
:root[data-custom-theme] .web-copy-intro p,
:root[data-custom-theme] .web-copy-card p,
:root[data-custom-theme] .web-feature-list,
:root[data-custom-theme] .web-faq-item p,
:root[data-custom-theme] .web-upgrade-header p,
:root[data-custom-theme] .web-social-header p {
  color: var(--muted);
}
:root[data-custom-theme] .web-upgrade-button {
  border: 1px solid rgba(var(--theme-accent-rgb), 0.28);
  background: var(--theme-accent);
  color: var(--theme-on-accent);
}
:root[data-custom-theme] .web-copy-card {
  background: var(--landing-card-surface);
  border: 1px solid var(--landing-border-soft);
}
:root[data-custom-theme] .web-explore-card {
  background: var(--landing-card-surface);
  border: 1px solid var(--landing-border-soft);
  color: inherit;
}
:root[data-custom-theme] .web-explore-card p {
  color: var(--muted);
}
:root[data-custom-theme] .web-explore-card:hover,
:root[data-custom-theme] .web-explore-card:focus-visible {
  border-color: rgba(var(--theme-accent-rgb), 0.28);
  color: var(--accent-deep);
}
:root[data-custom-theme] .web-faq-item {
  background: var(--landing-card-surface);
  border: 1px solid var(--landing-border-soft);
}
:root[data-custom-theme] .landing-back-link {
  border: 1px solid rgba(var(--theme-line-rgb), 0.14);
  background: var(--landing-surface);
  color: var(--accent-deep);
}
:root[data-custom-theme] .landing-back-link svg {
  fill: none;
  stroke: currentColor;
}
:root[data-custom-theme] .landing-back-link:hover,
:root[data-custom-theme] .landing-back-link:focus-visible {
  color: var(--accent);
}
:root[data-custom-theme] .landing-hero,
:root[data-custom-theme] .landing-section,
:root[data-custom-theme] .landing-cta,
:root[data-custom-theme] .landing-related {
  background: var(--landing-surface);
  border: 1px solid var(--landing-border);
}
:root[data-custom-theme] .landing-hero p,
:root[data-custom-theme] .landing-copy p,
:root[data-custom-theme] .landing-cta p,
:root[data-custom-theme] .landing-card p,
:root[data-custom-theme] .landing-list,
:root[data-custom-theme] .landing-link-row,
:root[data-custom-theme] .landing-related-card p {
  color: var(--muted);
}
:root[data-custom-theme] .landing-card {
  background: var(--landing-card-surface);
  border: 1px solid var(--landing-border-soft);
}
:root[data-custom-theme] .landing-link-row a {
  color: var(--accent-deep);
}
:root[data-custom-theme] .landing-link-row a:hover,
:root[data-custom-theme] .landing-link-row a:focus-visible {
  color: var(--accent);
}
:root[data-custom-theme] .landing-related-card {
  background: var(--landing-card-surface);
  border: 1px solid var(--landing-border-soft);
  color: inherit;
}
:root[data-custom-theme] .landing-related-card:hover,
:root[data-custom-theme] .landing-related-card:focus-visible {
  border-color: rgba(var(--theme-accent-rgb), 0.28);
  color: var(--accent-deep);
}
:root[data-custom-theme] .generator-hero {
  background: var(--landing-surface-strong);
}
:root[data-custom-theme] .generator-eyebrow {
  color: var(--theme-muted);
}
:root[data-custom-theme] .generator-intro {
  color: var(--muted);
}
:root[data-custom-theme] .generator-proof-list li {
  border-top: 1px solid rgba(var(--theme-line-rgb), 0.12);
  color: var(--ink);
}
:root[data-custom-theme] .generator-primary-link {
  background: var(--accent);
  color: var(--theme-text);
}
:root[data-custom-theme] .generator-primary-link:visited {
  color: var(--theme-text);
}
:root[data-custom-theme] .landing-link-row .generator-primary-link,
:root[data-custom-theme] .landing-link-row .generator-primary-link:visited,
:root[data-custom-theme] .generator-actions .generator-primary-link,
:root[data-custom-theme] .generator-actions .generator-primary-link:visited {
  color: var(--theme-text);
}
:root[data-custom-theme] .generator-actions .generator-primary-link:hover,
:root[data-custom-theme] .generator-actions .generator-primary-link:focus-visible,
:root[data-custom-theme] .landing-link-row .generator-primary-link:hover,
:root[data-custom-theme] .landing-link-row .generator-primary-link:focus-visible,
:root[data-custom-theme] .generator-primary-link:hover,
:root[data-custom-theme] .generator-primary-link:focus-visible {
  color: var(--theme-on-accent);
  background: var(--theme-accent);
}
:root[data-custom-theme] .seo-table-wrap {
  border: 1px solid rgba(var(--theme-line-rgb), 0.14);
  background: rgba(var(--theme-card-rgb), 0.72);
}
:root[data-custom-theme] .seo-table th,
:root[data-custom-theme] .seo-table td {
  border-bottom: 1px solid rgba(var(--theme-line-rgb), 0.12);
}
:root[data-custom-theme] .seo-table th {
  color: var(--theme-text);
  background: rgba(var(--theme-control-rgb), 0.28);
}
:root[data-custom-theme] .seo-table tbody tr:last-child td {
  border-bottom: 0;
}
:root[data-custom-theme] .generator-hero-image {
  border: 1px solid var(--landing-border);
  background: rgba(var(--theme-card-rgb), 0.94);
}
:root[data-custom-theme] .generator-hero-media figcaption {
  color: var(--theme-muted);
}
:root[data-custom-theme] .generator-step {
  border-top: 1px solid rgba(var(--theme-line-rgb), 0.12);
}
:root[data-custom-theme] .generator-feature-column {
  border-top: 1px solid rgba(var(--theme-line-rgb), 0.12);
}
:root[data-custom-theme] .generator-feature-list {
  color: var(--muted);
}
:root[data-custom-theme] .generator-example {
  border-top: 1px solid rgba(var(--theme-line-rgb), 0.12);
}
:root[data-custom-theme] .generator-example-label {
  color: var(--theme-muted);
}
:root[data-custom-theme] .generator-example-meta {
  color: var(--muted);
}
:root[data-custom-theme] .example-chord-card {
  background: var(--landing-card-surface-strong);
  border: 1px solid var(--landing-border);
}
:root[data-custom-theme] .example-card-fallback {
  color: var(--ink);
}
:root[data-custom-theme] .generator-use-grid > div,
:root[data-custom-theme] .generator-faq-item {
  border-top: 1px solid rgba(var(--theme-line-rgb), 0.12);
}
:root[data-custom-theme] .generator-use-grid p,
:root[data-custom-theme] .generator-faq-item p {
  color: var(--muted);
}
:root[data-custom-theme] .breadcrumb-nav {
  color: var(--muted);
}
:root[data-custom-theme] .breadcrumb-nav a {
  color: var(--accent-deep);
}
:root[data-custom-theme] .breadcrumb-separator {
  color: var(--theme-muted);
}
:root[data-custom-theme] .seo-longform p {
  color: var(--muted);
}
:root[data-custom-theme] .seo-pill-list li {
  border: 1px solid var(--landing-border-soft);
  background: var(--landing-card-surface);
  color: var(--accent-deep);
}
:root[data-custom-theme] .seo-note {
  color: var(--muted);
}
:root[data-custom-theme] .seo-link-list {
  color: var(--muted);
}
:root[data-custom-theme] .seo-link-list a {
  color: var(--accent-deep);
}
:root[data-custom-theme] .progression-library-item {
  border-top: 1px solid rgba(var(--theme-line-rgb), 0.12);
}
:root[data-custom-theme] .progression-library-meta {
  color: var(--muted);
}
:root[data-custom-theme] .progression-library-meta span + span::before {
  color: var(--theme-muted);
}
:root[data-custom-theme] .progression-library-diagrams .example-chord-card.playing {
  border-color: var(--theme-accent);
}
:root[data-custom-theme] .progression-play-button {
  border: none;
  background: var(--theme-accent);
  color: var(--theme-on-accent);
}
:root[data-custom-theme] .progression-play-button:hover,
:root[data-custom-theme] .progression-play-button:focus-visible {
  background: var(--theme-accent);
}
:root[data-custom-theme] .progression-play-button[aria-pressed='true'] {
  background: var(--theme-accent);
}
:root[data-custom-theme] .theory-callout {
  border: 1px solid var(--landing-border-soft);
  background: var(--landing-card-surface);
}
:root[data-custom-theme] .theory-callout p {
  color: var(--muted);
}
:root[data-custom-theme] .seo-example-list li {
  border-top: 1px solid rgba(var(--theme-line-rgb), 0.12);
}
:root[data-custom-theme] .seo-example-list strong {
  color: var(--ink);
}
:root[data-custom-theme] .seo-example-list span {
  color: var(--muted);
}
:root[data-custom-theme] .practice-hero {
  background: var(--landing-surface-strong);
}
:root[data-custom-theme] .practice-eyebrow,
:root[data-custom-theme] .practice-section-kicker {
  color: var(--accent);
}
:root[data-custom-theme] .practice-intro {
  color: var(--muted);
}
:root[data-custom-theme] .practice-utility-list li {
  color: var(--muted);
}
:root[data-custom-theme] .practice-utility-list li::before {
  background: rgba(var(--theme-accent-rgb), 0.82);
}
:root[data-custom-theme] .practice-secondary-link {
  border: 1px solid rgba(var(--theme-line-rgb), 0.16);
  background: rgba(var(--theme-card-rgb), 0.92);
  color: var(--accent-deep);
}
:root[data-custom-theme] .practice-secondary-link:hover,
:root[data-custom-theme] .practice-secondary-link:focus-visible {
  border-color: rgba(var(--theme-accent-rgb), 0.28);
  color: var(--accent);
}
:root[data-custom-theme] .practice-app-note {
  color: var(--accent-deep);
}
:root[data-custom-theme] .practice-hero-image,
:root[data-custom-theme] .practice-story-media img {
  border: 1px solid var(--landing-border);
  background: rgba(var(--theme-card-rgb), 0.94);
}
:root[data-custom-theme] .practice-hero-media figcaption,
:root[data-custom-theme] .practice-story-media figcaption {
  color: var(--muted);
}
:root[data-custom-theme] .practice-overview-grid > div {
  border-top: 1px solid rgba(var(--theme-line-rgb), 0.12);
}
:root[data-custom-theme] .practice-overview-grid p,
:root[data-custom-theme] .practice-story-copy p,
:root[data-custom-theme] .practice-story-list,
:root[data-custom-theme] .practice-closing-list {
  color: var(--muted);
}
:root[data-custom-theme] .practice-closing-list li {
  border-top: 1px solid rgba(var(--theme-line-rgb), 0.12);
}
@media (prefers-reduced-motion: no-preference) {
:root[data-custom-theme] .generator-example:hover,
:root[data-custom-theme] .generator-example:focus-within,
:root[data-custom-theme] .generator-use-grid > div:hover,
:root[data-custom-theme] .generator-faq-item:hover,
:root[data-custom-theme] .generator-feature-column:hover,
:root[data-custom-theme] .generator-step:hover {
  border-color: rgba(var(--theme-accent-rgb), 0.26);
}
:root[data-custom-theme] .practice-story:hover .practice-story-media img,
:root[data-custom-theme] .practice-story:focus-within .practice-story-media img {
  border-color: rgba(var(--theme-accent-rgb), 0.24);
}
}
:root[data-custom-theme] .app-menu-button,
:root[data-custom-theme] .display-shortcut-button {
  border: 1px solid rgba(var(--theme-line-rgb), 0.16);
  background: rgba(var(--theme-card-rgb), 0.96);
  color: var(--accent-deep);
}
:root[data-custom-theme] .app-menu-button line {
  stroke: currentColor;
}
:root[data-custom-theme] .display-shortcut-button.is-premium-upsell {
  color: var(--theme-muted);
  border-color: rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-card-rgb), 0.72);
}
:root[data-custom-theme] .display-shortcut-button.is-premium-upsell.display-shortcut-button-favorites path {
  fill: var(--theme-accent);
  stroke: currentColor;
}
:root[data-custom-theme] .display-shortcut-button path,
:root[data-custom-theme] .display-shortcut-button circle {
  stroke: currentColor;
}
:root[data-custom-theme] .display-shortcut-button-favorites path {
  fill: var(--theme-accent);
  stroke: var(--theme-accent);
}
:root[data-custom-theme] .display-shortcut-button-dark-mode path,
:root[data-custom-theme] .display-shortcut-button-dark-mode circle,
:root[data-custom-theme] .display-shortcut-button-tuner path,
:root[data-custom-theme] .display-shortcut-button-practice path {
  fill: none;
}
:root[data-custom-theme] .web-app-shortcut-button {
  border-color: rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-card-rgb), 0.78);
}
:root[data-custom-theme] .web-app-menu-button {
  border-color: rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-card-rgb), 0.78);
}
:root[data-custom-theme] .hero-support {
  color: var(--muted);
}
:root[data-custom-theme] .hero-title {
  color: var(--ink);
}
:root[data-custom-theme] .compact-app-title {
  color: var(--accent-deep);
}
:root[data-custom-theme] .generate-button,
:root[data-custom-theme] .reset-button,
:root[data-custom-theme] .transport-button,
:root[data-custom-theme] .swap-shape,
:root[data-custom-theme] .preview-chord {
  border: none;
  background: var(--accent);
  color: var(--theme-text);
}
:root[data-custom-theme] .generate-button {
  background: var(--theme-accent);
}
:root[data-custom-theme] .generate-button:disabled {
  background: var(--theme-control);
  color: var(--theme-text);
}
:root[data-custom-theme] .reset-button {
  border: 1px solid rgba(var(--theme-line-rgb), 0.14);
  background: rgba(var(--theme-card-rgb), 0.92);
  color: var(--accent-deep);
}
:root[data-custom-theme] .reset-button:disabled {
  border-color: rgba(var(--theme-line-rgb), 0.1);
  background: rgba(var(--theme-control-rgb), 0.75);
  color: var(--theme-muted);
}
:root[data-custom-theme] .transport-toggle {
  border: 1px solid rgba(var(--theme-line-rgb), 0.1);
  background: rgba(var(--theme-card-rgb), 0.84);
  color: var(--theme-text);
}
:root[data-custom-theme] .transport-toggle[aria-pressed='true'] {
  border-color: rgba(var(--theme-accent-rgb), 0.18);
  background: var(--theme-accent);
  color: var(--theme-on-accent);
}
:root[data-custom-theme] .transport-toggle[aria-pressed='false'] {
  border-color: rgba(var(--theme-line-rgb), 0.1);
  background: rgba(var(--theme-card-rgb), 0.84);
  color: var(--theme-text);
}
:root[data-custom-theme] .control-block {
  background: rgba(var(--theme-card-rgb), 0.92);
  border: 1px solid rgba(var(--theme-line-rgb), 0.1);
}
:root[data-custom-theme] .control-caption {
  color: var(--muted);
}
:root[data-custom-theme] .key-root-field::after,
:root[data-custom-theme] .select-field::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.25 6 6.25l5-5' stroke='%2321160f' stroke-opacity='.78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
:root[data-custom-theme] .mode-dropdown-trigger {
  border: 1px solid rgba(var(--theme-line-rgb), 0.18);
  background: rgba(var(--theme-card-rgb), 0.75);
  color: var(--ink);
}
:root[data-custom-theme] .mode-dropdown-trigger:focus,
:root[data-custom-theme] .mode-dropdown-trigger:focus-visible {
  outline: none;
}
:root[data-custom-theme] #tempo-number:focus,
:root[data-custom-theme] #tempo-number:focus-visible,
:root[data-custom-theme] #onboarding-language-select:focus,
:root[data-custom-theme] #onboarding-language-select:focus-visible,
:root[data-custom-theme] #app-language-select:focus,
:root[data-custom-theme] #app-language-select:focus-visible,
:root[data-custom-theme] #key-root-select:focus,
:root[data-custom-theme] #key-root-select:focus-visible,
:root[data-custom-theme] #onboarding-demo-key-select:focus,
:root[data-custom-theme] #onboarding-demo-key-select:focus-visible,
:root[data-custom-theme] #style-select:focus,
:root[data-custom-theme] #style-select:focus-visible,
:root[data-custom-theme] #onboarding-demo-display-select:focus,
:root[data-custom-theme] #onboarding-demo-display-select:focus-visible,
:root[data-custom-theme] #meter-select:focus,
:root[data-custom-theme] #meter-select:focus-visible,
:root[data-custom-theme] #onboarding-demo-meter-select:focus,
:root[data-custom-theme] #onboarding-demo-meter-select:focus-visible,
:root[data-custom-theme] #groove-select:focus,
:root[data-custom-theme] #groove-select:focus-visible,
:root[data-custom-theme] #onboarding-demo-groove-select:focus,
:root[data-custom-theme] #onboarding-demo-groove-select:focus-visible,
:root[data-custom-theme] #guitar-select:focus,
:root[data-custom-theme] #guitar-select:focus-visible,
:root[data-custom-theme] [data-triad-root]:focus,
:root[data-custom-theme] [data-triad-root]:focus-visible,
:root[data-custom-theme] [data-triad-guitar]:focus,
:root[data-custom-theme] [data-triad-guitar]:focus-visible,
:root[data-custom-theme] #onboarding-demo-guitar-select:focus,
:root[data-custom-theme] #onboarding-demo-guitar-select:focus-visible,
:root[data-custom-theme] #onboarding-mode-dropdown-cancel:focus,
:root[data-custom-theme] #onboarding-mode-dropdown-cancel:focus-visible,
:root[data-custom-theme] #onboarding-mode-dropdown-apply:focus,
:root[data-custom-theme] #onboarding-mode-dropdown-apply:focus-visible {
  outline: none;
}
:root[data-custom-theme] .keyboard-dropdown-focus #tempo-number:focus,
:root[data-custom-theme] .keyboard-dropdown-focus #onboarding-language-select:focus,
:root[data-custom-theme] .keyboard-dropdown-focus #app-language-select:focus,
:root[data-custom-theme] .keyboard-dropdown-focus #key-root-select:focus,
:root[data-custom-theme] .keyboard-dropdown-focus #onboarding-demo-key-select:focus,
:root[data-custom-theme] .keyboard-dropdown-focus #style-select:focus,
:root[data-custom-theme] .keyboard-dropdown-focus #onboarding-demo-display-select:focus,
:root[data-custom-theme] .keyboard-dropdown-focus #meter-select:focus,
:root[data-custom-theme] .keyboard-dropdown-focus #onboarding-demo-meter-select:focus,
:root[data-custom-theme] .keyboard-dropdown-focus #groove-select:focus,
:root[data-custom-theme] .keyboard-dropdown-focus #onboarding-demo-groove-select:focus,
:root[data-custom-theme] .keyboard-dropdown-focus #guitar-select:focus,
:root[data-custom-theme] .keyboard-dropdown-focus [data-triad-root]:focus,
:root[data-custom-theme] .keyboard-dropdown-focus [data-triad-guitar]:focus,
:root[data-custom-theme] .keyboard-dropdown-focus #onboarding-demo-guitar-select:focus,
:root[data-custom-theme] .keyboard-dropdown-focus .mode-dropdown-trigger:focus,
:root[data-custom-theme] .keyboard-dropdown-focus #onboarding-mode-dropdown-cancel:focus,
:root[data-custom-theme] .keyboard-dropdown-focus #onboarding-mode-dropdown-apply:focus {
  outline: 3px solid rgba(var(--theme-accent-rgb), 0.38);
}
:root[data-custom-theme] .mode-dropdown-panel {
  border: 1px solid rgba(var(--theme-line-rgb), 0.18);
  background: rgba(var(--theme-card-rgb), 0.98);
}
:root[data-custom-theme] .mode-dropdown-options {
  border: 0;
}
:root[data-custom-theme] .mode-dropdown-options label {
  background: rgba(var(--theme-card-rgb), 0.7);
  border: 1px solid rgba(var(--theme-line-rgb), 0.11);
}
:root[data-custom-theme] .key-root-field select,
:root[data-custom-theme] .display-field select,
:root[data-custom-theme] .rhythm-select-field select,
:root[data-custom-theme] .mode-dropdown-trigger,
:root[data-custom-theme] .tempo-box {
  border: 1px solid rgba(var(--theme-line-rgb), 0.18);
  background: rgba(var(--theme-card-rgb), 0.75);
}
:root[data-custom-theme] .mode-dropdown-button {
  border: none;
  background: var(--accent);
  color: var(--theme-text);
}
:root[data-custom-theme] .mode-dropdown-button-secondary {
  border: 1px solid rgba(var(--theme-line-rgb), 0.14);
  background: rgba(var(--theme-card-rgb), 0.8);
  color: var(--ink);
}
:root[data-custom-theme] .segmented-field,
:root[data-custom-theme] .checkbox-field {
  border: 0;
}
:root[data-custom-theme] .control-grid .panel-kicker,
:root[data-custom-theme] .field-label,
:root[data-custom-theme] .segmented-field legend,
:root[data-custom-theme] .checkbox-field legend,
:root[data-custom-theme] .beat-header span {
  color: var(--accent-deep);
}
:root[data-custom-theme] .field-help {
  border: 1px solid rgba(var(--theme-line-rgb), 0.22);
  background: rgba(var(--theme-card-rgb), 0.72);
  color: var(--accent-deep);
}
:root[data-custom-theme] .field-help:focus-visible {
  outline: 2px solid rgba(var(--theme-accent-rgb), 0.38);
}
:root[data-custom-theme] .field-help-tooltip {
  background: rgba(var(--theme-control-rgb), 0.94);
  color: var(--theme-text);
}
:root[data-custom-theme] .field-help-tooltip::after {
  background: rgba(var(--theme-control-rgb), 0.94);
}
:root[data-custom-theme] select,
:root[data-custom-theme] input[type='number'] {
  border: 1px solid rgba(var(--theme-line-rgb), 0.18);
  background: rgba(var(--theme-card-rgb), 0.75);
  color: var(--ink);
}
:root[data-custom-theme] .toggle-row {
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-card-rgb), 0.54);
}
:root[data-custom-theme] .segmented label {
  background: rgba(var(--theme-card-rgb), 0.58);
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
}
:root[data-custom-theme] .checkbox-field label {
  background: rgba(var(--theme-card-rgb), 0.52);
  border: 1px solid rgba(var(--theme-line-rgb), 0.11);
}
:root[data-custom-theme] .rhythm-fields select option[data-premium-locked='true'] {
  color: var(--muted);
}
:root[data-custom-theme] .progression-key-label {
  color: var(--accent-deep);
}
:root[data-custom-theme] .progression-key-title {
  color: var(--ink);
}
:root[data-custom-theme] .progression-share-button,
:root[data-custom-theme] .progression-volume-button,
:root[data-custom-theme] .progression-favorite-button {
  border: 0;
  background: transparent;
  color: var(--theme-text);
}
:root[data-custom-theme] .progression-share-button svg,
:root[data-custom-theme] .progression-volume-button svg,
:root[data-custom-theme] .progression-favorite-button svg {
  fill: transparent;
  stroke: currentColor;
}
:root[data-custom-theme] .progression-share-button svg {
  fill: none;
}
:root[data-custom-theme] .progression-volume-button svg {
  fill: none;
}
:root[data-custom-theme] .progression-favorite-button.is-favorited svg,
:root[data-custom-theme] .ex-star[aria-pressed='true'] svg {
  fill: var(--theme-accent);
  stroke: var(--theme-accent);
}
:root[data-custom-theme] .progression-volume-button.is-premium-upsell,
:root[data-custom-theme] .progression-volume-button.is-app-only-feature,
:root[data-custom-theme] .progression-favorite-button.is-premium-upsell,
:root[data-custom-theme] .progression-favorite-button.is-app-only-feature {
  color: var(--theme-muted);
}
:root[data-custom-theme] .progression-favorite-button.is-premium-upsell svg,
:root[data-custom-theme] .progression-favorite-button.is-app-only-feature svg {
  fill: var(--theme-accent);
}
:root[data-custom-theme] .progression-share-button.is-premium-upsell,
:root[data-custom-theme] .progression-share-button.is-app-only-feature {
  color: var(--theme-muted);
}
:root[data-custom-theme] .volume-control-overlay {
  background: rgba(32, 24, 18, 0.16);
}
:root[data-custom-theme] .volume-control-popover {
  border: 1px solid rgba(var(--theme-line-rgb), 0.14);
  background: rgba(var(--theme-card-rgb), 0.96);
  color: var(--ink);
}
:root[data-custom-theme] .volume-control-title {
  color: var(--ink);
}
:root[data-custom-theme] .volume-control-close {
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-card-rgb), 0.9);
  color: var(--ink);
}
:root[data-custom-theme] .volume-control-close:focus,
:root[data-custom-theme] .volume-control-close:focus-visible {
  outline: none;
}
:root[data-custom-theme] .volume-control-close svg {
  fill: none;
  stroke: currentColor;
}
:root[data-custom-theme] .volume-slider-column {
  color: var(--ink);
}
:root[data-custom-theme] .volume-slider-label {
  color: var(--muted);
}
:root[data-custom-theme] .volume-slider {
  background: transparent;
}
:root[data-custom-theme] .volume-slider::-webkit-slider-runnable-track {
  background: var(--theme-accent);
}
:root[data-custom-theme] .volume-slider::-webkit-slider-thumb {
  border: 2px solid var(--theme-accent);
  background: var(--theme-card);
}
:root[data-custom-theme] .volume-slider::-moz-range-track,
:root[data-custom-theme] .volume-slider::-moz-range-progress {
  border: 0;
  background: var(--theme-accent);
}
:root[data-custom-theme] .volume-slider::-moz-range-thumb {
  border: 2px solid var(--theme-accent);
  background: var(--theme-card);
}
:root[data-custom-theme] .display-shortcut-button-progression path,
:root[data-custom-theme] .display-shortcut-button-progression circle,
:root[data-custom-theme] .display-shortcut-button-triads path,
:root[data-custom-theme] .display-shortcut-button-triads circle {
  stroke: currentColor;
  fill: none;
}
:root[data-custom-theme] .display-shortcut-button-view[aria-pressed='true'] {
  color: var(--theme-text);
  background: var(--accent, var(--theme-accent));
  border-color: var(--accent, var(--theme-accent));
}
:root[data-custom-theme] .panel .main-view-title {
  color: var(--ink);
}
:root[data-custom-theme] .triad-fretboard {
  color: var(--theme-muted);
}
:root[data-custom-theme] .triad-fret-dot-shape-0 circle {
  fill: var(--theme-blue);
}
:root[data-custom-theme] .triad-fret-dot-shape-1 circle {
  fill: var(--theme-green);
}
:root[data-custom-theme] .triad-fret-dot-shape-2 circle {
  fill: var(--theme-accent);
}
:root[data-custom-theme] .progression-scale-card,
:root[data-custom-theme] .progression-scale-carousel {
  background: rgba(var(--theme-card-rgb), 0.96);
  border: 1px solid rgba(var(--theme-line-rgb), 0.1);
}
:root[data-custom-theme] .scale-practice-tempo-select {
  border: 1px solid rgba(var(--theme-line-rgb), 0.48);
  background: rgba(var(--theme-card-rgb), 0.86);
  color: var(--theme-muted);
}
:root[data-custom-theme] .scale-practice-scope-select {
  border: 1px solid rgba(var(--theme-line-rgb), 0.48);
  background: rgba(var(--theme-card-rgb), 0.86);
  color: var(--theme-muted);
}
:root[data-custom-theme] .scale-practice-tempo-select:focus,
:root[data-custom-theme] .scale-practice-tempo-select:focus-visible,
:root[data-custom-theme] .scale-practice-scope-select:focus,
:root[data-custom-theme] .scale-practice-scope-select:focus-visible {
  outline: none;
}
:root[data-custom-theme] .scale-practice-tempo-caret {
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  color: var(--theme-muted);
}
:root[data-custom-theme] .scale-practice-scope-caret {
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  color: var(--theme-muted);
}
:root[data-custom-theme] .scale-practice-icon-button {
  border: 1px solid rgba(var(--theme-line-rgb), 0.48);
  background: rgba(var(--theme-card-rgb), 0.86);
  color: var(--theme-muted);
}
:root[data-custom-theme] .scale-practice-icon-button svg {
  fill: currentColor;
  stroke: currentColor;
}
:root[data-custom-theme] .scale-practice-rhythm-icon path {
  fill: none;
}
:root[data-custom-theme] .scale-variant-button {
  border: 0;
  background: transparent;
  color: var(--theme-text);
}
:root[data-custom-theme] .scale-variant-button::after {
  background: transparent;
}
:root[data-custom-theme] .scale-variant-button.is-active {
  color: var(--accent-deep);
}
:root[data-custom-theme] .scale-variant-button.is-active::after {
  background: rgba(var(--theme-control-rgb), 0.94);
}
:root[data-custom-theme] .scale-marker-label-button {
  border: 1px solid rgba(var(--theme-line-rgb), 0.48);
  background: var(--theme-card);
  color: var(--theme-text);
}
:root[data-custom-theme] .scale-marker-label-button.is-active {
  border-color: rgba(var(--theme-line-rgb), 0.36);
  background: var(--theme-panel);
  color: var(--theme-text);
}
:root[data-custom-theme] .scale-marker-label-button.is-premium-upsell,
:root[data-custom-theme] .scale-marker-label-button.is-app-only-feature,
:root[data-custom-theme] .scale-variant-button.is-premium-upsell,
:root[data-custom-theme] .scale-variant-button.is-app-only-feature {
  color: var(--theme-text);
  border-color: rgba(var(--theme-line-rgb), 0.3);
  background: rgba(var(--theme-card-rgb), 0.62);
}
:root[data-custom-theme] .scale-variant-button.is-premium-upsell.is-active,
:root[data-custom-theme] .scale-variant-button.is-app-only-feature.is-active {
  color: var(--theme-text);
  background: rgba(var(--theme-card-rgb), 0.72);
}
:root[data-custom-theme] .scale-marker-label-button:hover,
:root[data-custom-theme] .scale-marker-label-button:focus-visible {
  border-color: rgba(var(--theme-line-rgb), 0.38);
}
:root[data-custom-theme] .scale-marker-label-button.is-premium-upsell.is-active,
:root[data-custom-theme] .scale-marker-label-button.is-premium-upsell:hover,
:root[data-custom-theme] .scale-marker-label-button.is-premium-upsell:focus-visible,
:root[data-custom-theme] .scale-marker-label-button.is-app-only-feature.is-active,
:root[data-custom-theme] .scale-marker-label-button.is-app-only-feature:hover,
:root[data-custom-theme] .scale-marker-label-button.is-app-only-feature:focus-visible {
  color: var(--theme-text);
  border-color: rgba(var(--theme-line-rgb), 0.3);
  background: rgba(var(--theme-card-rgb), 0.62);
}
:root[data-custom-theme] body:not(.is-native-app) .diagram-zoom-overlay[data-zoom-type='scale'] .progression-scale-diagram-wrap::-webkit-scrollbar-track,
:root[data-custom-theme] body:not(.is-native-app) .diagram-zoom-overlay[data-zoom-type='scale'] .progression-scale-diagram-wrap::-webkit-scrollbar-thumb {
  background: transparent;
}
:root[data-custom-theme] body:not(.is-native-app) .diagram-zoom-overlay[data-zoom-type='scale'] .progression-scale-diagram-wrap.is-user-scrolling::-webkit-scrollbar-thumb {
  background: rgba(var(--theme-control-rgb), 0.45);
}
:root[data-custom-theme] .scale-shape-stepper {
  border: 1px solid rgba(var(--theme-line-rgb), 0.425);
  background: var(--theme-card);
  color: var(--theme-text);
}
:root[data-custom-theme] .scale-shape-stepper svg {
  fill: none;
  stroke: currentColor;
}
:root[data-custom-theme] .scale-shape-stepper:hover,
:root[data-custom-theme] .scale-shape-stepper:focus-visible {
  background: var(--theme-card);
}
:root[data-custom-theme] .scale-shape-dot {
  border: 0;
  background: rgba(var(--theme-control-rgb), 0.22);
  color: transparent;
}
:root[data-custom-theme] .scale-shape-dot.is-active {
  background: rgba(var(--theme-control-rgb), 0.94);
}
:root[data-custom-theme][data-color-theme] .scale-shape-dot:not(.is-active) {
  border: 1.5px solid var(--muted);
  background: transparent;
}
:root[data-custom-theme] .scale-caged-button,
:root[data-custom-theme] .scale-caged-buttons .scale-shape-stepper {
  border: 1px solid rgba(var(--theme-line-rgb), 0.25);
  background: var(--theme-card);
  color: var(--theme-muted);
}
:root[data-custom-theme] .scale-caged-buttons .scale-shape-stepper {
  border-color: transparent;
  background: transparent;
}
:root[data-custom-theme] .scale-caged-button.is-active {
  background: var(--theme-control);
  border-color: var(--theme-accent);
  color: var(--theme-text);
}
:root[data-custom-theme] .scale-caged-button:focus-visible,
:root[data-custom-theme] .scale-caged-buttons .scale-shape-stepper:focus-visible {
  outline: 2px solid var(--theme-line);
}
:root[data-custom-theme] .scale-caged-caption {
  color: var(--muted);
}
:root[data-custom-theme][data-theme='dark'] .scale-caged-button {
  background: var(--theme-control);
  border-color: rgba(var(--theme-line-rgb), 0.25);
  color: var(--ink);
}
:root[data-custom-theme][data-theme='dark'] .scale-caged-button.is-active {
  background: var(--theme-control);
  border-color: var(--theme-accent);
  color: var(--theme-text);
}
:root[data-custom-theme][data-theme='dark'] .scale-caged-button:focus-visible,
:root[data-custom-theme][data-theme='dark'] .scale-caged-buttons .scale-shape-stepper:focus-visible {
  outline-color: var(--theme-line);
}
:root[data-custom-theme] .key-chord-card {
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
  background: var(--surface-key-card);
}
:root[data-custom-theme] .key-chord-card-title {
  color: var(--ink);
}
:root[data-custom-theme] .key-chord-card .card-actions .preview-chord {
  background: rgba(var(--theme-control-rgb), 0.9);
  color: var(--theme-text);
}
:root[data-custom-theme] .key-chord-card .card-actions .preview-chord svg {
  fill: currentColor;
}
:root[data-custom-theme] .story-hero {
  background: var(--landing-surface-strong);
}
:root[data-custom-theme] .feature-hero {
  background: var(--landing-surface-strong);
}
:root[data-custom-theme] .story-eyebrow,
:root[data-custom-theme] .story-section-kicker,
:root[data-custom-theme] .feature-eyebrow,
:root[data-custom-theme] .feature-section-kicker,
:root[data-custom-theme] .feature-card-kicker {
  color: var(--accent);
}
:root[data-custom-theme] .story-intro,
:root[data-custom-theme] .feature-intro {
  color: var(--muted);
}
:root[data-custom-theme] .story-proof-list li,
:root[data-custom-theme] .feature-summary-list li {
  color: var(--muted);
}
:root[data-custom-theme] .story-proof-list li::before,
:root[data-custom-theme] .feature-summary-list li::before {
  background: rgba(var(--theme-accent-rgb), 0.82);
}
:root[data-custom-theme] .story-hero-image,
:root[data-custom-theme] .feature-hero-image {
  border: 1px solid var(--landing-border);
  background: rgba(var(--theme-card-rgb), 0.94);
}
:root[data-custom-theme] .story-hero-media figcaption,
:root[data-custom-theme] .feature-hero-media figcaption {
  color: var(--muted);
}
:root[data-custom-theme] .story-section-intro p,
:root[data-custom-theme] .feature-section-intro p,
:root[data-custom-theme] .story-grid p,
:root[data-custom-theme] .story-prose p,
:root[data-custom-theme] .story-list,
:root[data-custom-theme] .feature-detail-card p {
  color: var(--muted);
}
:root[data-custom-theme] .story-grid > article {
  border-top: 1px solid rgba(var(--theme-line-rgb), 0.12);
}
:root[data-custom-theme] .reviews-hero {
  background: radial-gradient(circle at 92% 12%, rgba(var(--theme-green-rgb), 0.18), transparent 34%),
    linear-gradient(135deg, rgba(var(--theme-card-rgb), 0.98), rgba(var(--theme-card-rgb), 0.9));
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
}
:root[data-custom-theme] .reviews-hero h1 {
  color: var(--reviews-ink);
}
:root[data-custom-theme] .reviews-hero-copy > p {
  color: var(--reviews-muted);
}
:root[data-custom-theme] .reviews-score-card {
  color: var(--theme-text);
  background: linear-gradient(150deg, var(--theme-green), var(--theme-green));
}
:root[data-custom-theme] .reviews-score-card:nth-child(2) {
  background: linear-gradient(150deg, var(--theme-accent), var(--theme-accent));
}
:root[data-custom-theme] .reviews-stars {
  color: var(--theme-accent);
}
:root[data-custom-theme] .reviews-score-card .reviews-stars {
  color: var(--theme-accent);
}
:root[data-custom-theme] .reviews-score-label {
  color: var(--theme-text);
}
:root[data-custom-theme] .reviews-product-shot {
  background: var(--theme-panel);
  border: 1px solid rgba(var(--theme-line-rgb), 0.22);
}
:root[data-custom-theme] .reviews-featured {
  background: var(--theme-card);
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
}
:root[data-custom-theme] .reviews-featured h2 {
  color: var(--reviews-ink);
}
:root[data-custom-theme] .reviews-featured-copy > p:not(.reviews-stars):not(.reviews-source),
:root[data-custom-theme] .reviews-featured-panel p,
:root[data-custom-theme] .review-card blockquote,
:root[data-custom-theme] .reviews-section-header p,
:root[data-custom-theme] .reviews-theme-grid p {
  color: var(--reviews-muted);
}
:root[data-custom-theme] .reviews-featured-panel {
  background: linear-gradient(180deg, rgba(var(--theme-accent-rgb), 0.08), rgba(var(--theme-green-rgb), 0.1)),
    var(--theme-card);
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
}
:root[data-custom-theme] .reviews-featured-panel p {
  color: var(--theme-text);
}
:root[data-custom-theme] .reviews-source {
  color: var(--theme-muted);
}
:root[data-custom-theme] .reviews-section-header h2 {
  color: var(--reviews-ink);
}
:root[data-custom-theme] .review-card {
  background: rgba(var(--theme-card-rgb), 0.86);
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
}
:root[data-custom-theme] .review-card-large {
  background: linear-gradient(135deg, rgba(var(--theme-green-rgb), 0.08), rgba(var(--theme-card-rgb), 0.92)),
    var(--theme-card);
}
:root[data-custom-theme] .review-card blockquote {
  color: var(--theme-text);
}
:root[data-custom-theme] .reviews-theme-grid article {
  border-top: 1px solid rgba(var(--theme-line-rgb), 0.16);
}
:root[data-custom-theme] .reviews-theme-grid span {
  color: var(--reviews-gold);
}
:root[data-custom-theme] .reviews-theme-grid h3 {
  color: var(--reviews-ink);
}
:root[data-custom-theme] .feature-detail-card {
  background: var(--landing-card-surface);
  border: 1px solid var(--landing-border-soft);
}
:root[data-custom-theme] .feature-card-kicker {
  color: var(--theme-muted);
}
@media (prefers-reduced-motion: no-preference) {
:root[data-custom-theme] .story-grid > article:hover,
:root[data-custom-theme] .feature-detail-card:hover,
:root[data-custom-theme] .feature-detail-card:focus-within {
  border-color: rgba(var(--theme-accent-rgb), 0.24);
}
}
:root[data-custom-theme] .progression-scale-page-button {
  border: 0;
  background: transparent;
  color: var(--theme-text);
}
:root[data-custom-theme] .progression-scale-page-button::after {
  background: transparent;
}
:root[data-custom-theme] .progression-scale-page-button.is-active {
  color: var(--accent-deep);
}
:root[data-custom-theme] .progression-scale-page-button.is-active::after {
  background: rgba(var(--theme-control-rgb), 0.94);
}
:root[data-custom-theme] .progression-scale-unavailable-message {
  border: 1px dashed rgba(var(--theme-line-rgb), 0.22);
  background: rgba(var(--theme-card-rgb), 0.88);
  color: var(--theme-muted);
}
:root[data-custom-theme] .progression-scale-choose-button {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--theme-on-accent, var(--theme-text));
}
:root[data-custom-theme] .progression-scale-choose-button > svg {
  fill: none;
  stroke: currentColor;
}
:root[data-custom-theme] .scale-string,
:root[data-custom-theme] .scale-fret,
:root[data-custom-theme] .scale-nut {
  stroke: var(--theme-muted);
}
:root[data-custom-theme] .scale-dot {
  fill: var(--theme-text);
}
:root[data-custom-theme] .scale-dot-root {
  fill: var(--theme-red);
}
:root[data-custom-theme] .scale-dot-blue-note {
  fill: var(--theme-blue);
}
:root[data-custom-theme] .scale-chord-contour,
:root[data-custom-theme] .scale-chord-contour-halo {
  fill: none;
  stroke: var(--theme-accent);
}
:root[data-custom-theme] [data-scale-chord-overlay] .scale-chord-outside {
  fill: var(--surface-card);
  stroke: var(--ink);
}
:root[data-custom-theme] [data-scale-chord-overlay] .scale-chord-outside-label {
  fill: var(--ink);
}
:root[data-custom-theme][data-theme='dark'] .scale-chord-contour,
:root[data-custom-theme][data-theme='dark'] .scale-chord-contour-halo {
  stroke: var(--theme-accent);
}
:root[data-custom-theme] .scale-chord-outlines-option {
  border-top: 1px solid var(--panel-border);
}
:root[data-custom-theme] .scale-chord-outlines-title {
  color: var(--muted);
}
:root[data-custom-theme] .scale-highlight-color-heading {
  border-top: 1px solid var(--panel-border);
  color: var(--muted);
}
:root[data-custom-theme] .scale-highlight-pro-label {
  border: 1px solid currentColor;
  color: var(--accent-deep);
}
:root[data-custom-theme] .scale-dot-third {
  fill: var(--theme-green);
}
:root[data-custom-theme] .scale-dot-fifth {
  fill: var(--theme-accent);
}
:root[data-custom-theme] .scale-dot-modal {
  fill: var(--theme-purple);
}
:root[data-custom-theme] .triad-fret-dot .scale-dot.is-playback-active,
:root[data-custom-theme] .scale-dot.is-practice-active {
  stroke: var(--theme-blue);
}
:root[data-custom-theme] .triad-card [data-diagram-string].is-playback-active {
  stroke: var(--theme-accent);
}
:root[data-custom-theme] .scale-interval-label {
  fill: var(--theme-on-note);
}
:root[data-custom-theme] .scale-fret-label {
  fill: var(--theme-text);
}
:root[data-custom-theme] .chord-card {
  background: var(--surface-card);
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
}
:root[data-custom-theme] .empty-state-card {
  background: var(--surface-card-muted);
}
:root[data-custom-theme] .chord-card.playing,
:root[data-custom-theme] .chord-card.preview-playing,
:root[data-custom-theme] .key-chord-card.preview-playing {
  border-color: var(--theme-accent);
}
:root[data-custom-theme] .chord-picker {
  color: var(--ink);
}
:root[data-custom-theme] .chord-picker-label {
  color: var(--ink);
}
:root[data-custom-theme] .chord-picker-select {
  border: 0;
}
:root[data-custom-theme] .chord-picker-chevron {
  border: 1px solid rgba(var(--theme-line-rgb), 0.425);
  background: var(--theme-card);
  color: var(--theme-text);
}
:root[data-custom-theme] .chord-picker-chevron svg {
  fill: none;
  stroke: currentColor;
}
:root[data-custom-theme] .chord-picker:focus-within .chord-picker-chevron {
  background: var(--theme-card);
}
:root[data-custom-theme] .scale-override-reset {
  border: 0;
  background: transparent;
  color: var(--ink);
}
:root[data-custom-theme] .scale-override-reset svg {
  fill: none;
  stroke: currentColor;
}
:root[data-custom-theme] .scale-override-reset:focus {
  outline: none;
}
:root[data-custom-theme] .keyboard-dropdown-focus .scale-title-picker:focus-within .chord-picker-chevron,
:root[data-custom-theme] .keyboard-dropdown-focus .scale-override-reset:focus-visible {
  outline: 2px solid var(--ink);
}
@media (hover: hover) and (pointer: fine) {
:root[data-custom-theme] .chord-picker:hover .chord-picker-chevron {
  background: var(--theme-card);
}
}
:root[data-custom-theme] .step-chip {
  background: rgba(var(--theme-control-rgb), 0.08);
  color: var(--ink);
}
:root[data-custom-theme] .theory-chip,
:root[data-custom-theme] .voicing-chip {
  background: var(--accent-soft);
  color: var(--accent-deep);
}
:root[data-custom-theme] .diagram-trigger-button {
  border: 0;
  background: none;
  color: inherit;
}
:root[data-custom-theme] .diagram-frame > .diagram-hitbox-button {
  border: 0;
  background: transparent;
}
:root[data-custom-theme] .diagram-trigger-button:focus-visible {
  outline: 2px solid rgba(var(--theme-line-rgb), 0.72);
}
:root[data-custom-theme] .diagram-zoom-button,
:root[data-custom-theme] .diagram-lock-button,
:root[data-custom-theme] .diagram-preview-button {
  border: 1px solid rgba(var(--theme-line-rgb), 0.425);
  background: var(--theme-card);
  color: var(--theme-text);
}
:root[data-custom-theme] .diagram-lock-button {
  border: 0;
  background: transparent;
}
:root[data-custom-theme] .diagram-preview-button {
  border: 0;
  background: transparent;
}
:root[data-custom-theme] .diagram-zoom-button {
  border: 1px solid rgba(var(--theme-line-rgb), 0.14);
  background: rgba(var(--theme-card-rgb), 0.92);
  color: var(--accent-deep);
}
:root[data-custom-theme] .diagram-zoom-button:focus-visible,
:root[data-custom-theme] .diagram-zoom-nav:focus-visible,
:root[data-custom-theme] .diagram-zoom-close:focus-visible {
  background: rgba(var(--theme-card-rgb), 0.98);
}
:root[data-custom-theme] .diagram-zoom-button svg,
:root[data-custom-theme] .diagram-preview-button svg,
:root[data-custom-theme] .diagram-lock-button svg {
  fill: none;
  stroke: currentColor;
}
:root[data-custom-theme] .diagram-preview-button .diagram-preview-button-disc {
  fill: var(--theme-text);
  stroke: var(--theme-muted);
}
:root[data-custom-theme] .diagram-preview-button:focus-visible .diagram-preview-button-disc {
  fill: var(--theme-text);
}
:root[data-custom-theme] .diagram-preview-button .diagram-preview-button-glyph {
  fill: var(--theme-text);
  stroke: none;
}
:root[data-custom-theme] .diagram-lock-button .diagram-lock-button-disc {
  fill: var(--theme-text);
  stroke: var(--theme-muted);
}
:root[data-custom-theme] .diagram-lock-button:focus-visible .diagram-lock-button-disc {
  fill: var(--theme-text);
}
@media (hover: hover) and (pointer: fine) {
:root[data-custom-theme] .diagram-zoom-button:hover,
:root[data-custom-theme] .diagram-zoom-nav:hover,
:root[data-custom-theme] .diagram-zoom-close:hover {
  background: rgba(var(--theme-card-rgb), 0.98);
}
:root[data-custom-theme] .diagram-preview-button:hover .diagram-preview-button-disc,
:root[data-custom-theme] .diagram-lock-button:hover .diagram-lock-button-disc {
  fill: var(--theme-text);
}
}
:root[data-custom-theme] .diagram-lock-button .diagram-lock-button-glyph {
  fill: none;
  stroke: currentColor;
}
:root[data-custom-theme] .diagram-lock-button[aria-pressed='true'] {
  color: var(--theme-text);
}
:root[data-custom-theme] .diagram-lock-button[aria-pressed='true'] .diagram-lock-button-disc {
  background: var(--theme-control);
  fill: var(--theme-muted);
  stroke: var(--theme-muted);
}
:root[data-custom-theme] .diagram-zoom-overlay:is([data-zoom-type='chord'], [data-zoom-type='mode-chord']) .diagram-zoom-card {
  border-color: transparent;
  background: transparent;
}
:root[data-custom-theme] .empty-state-visual {
  background: rgba(var(--theme-control-rgb), 0.58);
}
:root[data-custom-theme] .empty-state-fretboard {
  border: 1px solid rgba(var(--theme-line-rgb), 0.1);
  background: rgba(var(--theme-control-rgb), 0.05);
}
:root[data-custom-theme] .empty-state-fretboard span {
  background: rgba(var(--theme-control-rgb), 0.26);
}
:root[data-custom-theme] .empty-state-pulse {
  background: rgba(var(--theme-accent-rgb), 0.12);
}
:root[data-custom-theme] .diagram-string,
:root[data-custom-theme] .diagram-fret,
:root[data-custom-theme] .diagram-nut {
  stroke: var(--theme-muted);
}
:root[data-custom-theme] .diagram-barre {
  stroke: var(--theme-text);
}
:root[data-custom-theme] .diagram-finger-guide {
  fill: none;
  stroke: var(--theme-text);
}
:root[data-custom-theme] .diagram-dot {
  fill: var(--theme-text);
}
:root[data-custom-theme] .diagram-finger {
  fill: var(--theme-on-note);
}
:root[data-custom-theme] .diagram-basefret {
  fill: var(--theme-text);
}
:root[data-custom-theme] .diagram-state-open,
:root[data-custom-theme] .diagram-state-mute {
  color: var(--theme-text);
}
:root[data-custom-theme] .diagram-state-open-icon,
:root[data-custom-theme] .diagram-state-mute-icon {
  fill: none;
  stroke: currentColor;
}
:root[data-custom-theme] .diagram-finger {
  fill: var(--theme-on-note);
}
:root[data-custom-theme] .diagram-basefret {
  fill: var(--ink);
}
:root[data-custom-theme] .card-actions .swap-shape-stepper {
  border: 1px solid rgba(var(--theme-line-rgb), 0.425);
  background: var(--theme-card);
  color: var(--theme-text);
}
:root[data-custom-theme] .card-actions .swap-shape-stepper svg {
  fill: none;
  stroke: currentColor;
}
:root[data-custom-theme] .card-actions .swap-shape-stepper:hover,
:root[data-custom-theme] .card-actions .swap-shape-stepper:focus-visible {
  background: var(--theme-card);
}
:root[data-custom-theme] .card-actions .swap-shape-status {
  color: var(--theme-text);
}
:root[data-custom-theme] .card-actions .preview-chord {
  border: 1px solid rgba(var(--theme-line-rgb), 0.425);
  background: var(--theme-card);
  color: var(--theme-text);
}
:root[data-custom-theme] .reorder-handle {
  border: 1px solid rgba(var(--theme-line-rgb), 0.425);
  background: var(--theme-card);
  color: var(--theme-text);
}
:root[data-custom-theme] .reorder-handle:hover,
:root[data-custom-theme] .reorder-handle:focus-visible {
  background: var(--theme-card);
}
:root[data-custom-theme] .reorder-handle svg {
  fill: currentColor;
}
:root[data-custom-theme] .drag-placeholder {
  border-style: dashed;
  border-color: rgba(var(--theme-line-rgb), 0.28);
  background: var(--surface-card-muted);
}
:root[data-custom-theme] .drag-placeholder::after {
  color: var(--theme-muted);
}
:root[data-custom-theme] .transport-button:disabled {
  background: var(--theme-control);
  color: var(--theme-text);
}
:root[data-custom-theme] .beat-dot {
  background: rgba(var(--theme-control-rgb), 0.12);
}
:root[data-custom-theme] .beat-dot.active {
  background: var(--accent);
}
@media (max-width: 1040px) {
:root[data-custom-theme] #controls-heading {
  border: 0;
}
}
@media (max-width: 650px) {
:root[data-custom-theme] .web-social-panel {
  border-top: 1px solid var(--landing-border-soft);
  border-left: 0;
}
}
@media (max-width: 700px) {
:root[data-custom-theme] .premium-web-plan-column {
  border-left: 0;
  border-top: 1px solid rgba(var(--theme-line-rgb), 0.16);
}
}
:root[data-custom-theme] .transport-button {
  border: 1px solid rgba(var(--theme-line-rgb), 0.16);
  background: var(--theme-card);
  color: var(--accent-deep);
}
:root[data-custom-theme] .transport-button:hover,
:root[data-custom-theme] .transport-button:focus-visible {
  background: var(--theme-card);
}
:root[data-custom-theme] .transport-button[aria-pressed='true'] {
  background: rgba(var(--theme-control-rgb), 0.12);
}
:root[data-custom-theme] .transport-button svg {
  fill: currentColor;
}
:root[data-custom-theme] .transport-button rect {
  fill: currentColor;
}
:root[data-custom-theme] .transport-button:disabled {
  border-color: rgba(var(--theme-line-rgb), 0.28);
  background: rgba(var(--theme-control-rgb), 0.75);
  color: var(--theme-muted);
}
:root[data-custom-theme] .chord-card .card-actions .preview-chord {
  border: 1px solid rgba(var(--theme-line-rgb), 0.425);
  background: var(--theme-card);
  color: var(--theme-text);
}
:root[data-custom-theme] .chord-card .card-actions .preview-chord .preview-chord-icon::before,
:root[data-custom-theme] .key-chord-card .card-actions .preview-chord .preview-chord-icon::before {
  background: currentColor;
}
:root[data-custom-theme] .key-chord-card .card-actions .preview-chord {
  border: 1px solid rgba(var(--theme-line-rgb), 0.425);
  background: var(--theme-card);
  color: var(--theme-text);
}
:root[data-custom-theme] .control-grid {
  background: rgba(var(--theme-card-rgb), 0.92);
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
}
:root[data-custom-theme] .control-grid > .control-block {
  border: 0;
  background: transparent;
}
:root[data-custom-theme] .tempo-box {
  border: 1px solid rgba(var(--theme-line-rgb), 0.18);
  background: rgba(var(--theme-card-rgb), 0.76);
}
:root[data-custom-theme] .tempo-box::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.25 6 6.25l5-5' stroke='%2321160f' stroke-opacity='.78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
:root[data-custom-theme] .tempo-box select {
  border: 0;
  background: transparent;
}
:root[data-custom-theme] .tempo-box span {
  color: var(--accent-deep);
}
:root[data-custom-theme] .beat-box {
  border-top: 1px solid rgba(var(--theme-line-rgb), 0.12);
}
@media (min-width: 651px) {
:root[data-custom-theme] .tempo-block .tempo-box::before {
  color: var(--accent-deep);
}
}
:root[data-custom-theme] .chord-options-chip-group > label {
  border: 0;
  background: transparent;
}
:root[data-custom-theme] .chord-options-chip-group > label span {
  border: 1px solid rgba(var(--theme-line-rgb), 0.1);
  background: rgba(var(--theme-card-rgb), 0.84);
  color: var(--theme-text);
}
:root[data-custom-theme] .chord-options-chip-group > label input:not(:checked) + span {
  border-color: rgba(var(--theme-line-rgb), 0.15);
  background: rgba(var(--theme-card-rgb), 0.9);
  color: var(--theme-text);
}
:root[data-custom-theme] .chord-options-chip-group > label input:checked + span {
  border-color: rgba(var(--theme-accent-rgb), 0.18);
  background: var(--theme-accent);
  color: var(--theme-on-accent);
}
:root[data-custom-theme] .chord-options-chip-group > label input:focus-visible + span {
  outline: 2px solid rgba(var(--theme-accent-rgb), 0.42);
}
@media (min-width: 651px) and (max-width: 1180px) {
:root[data-custom-theme] .tempo-block {
  border-top: 0;
}
}
@media (max-width: 650px) {
:root[data-custom-theme] .tempo-block {
  border-top: 1px solid rgba(var(--theme-line-rgb), 0.12);
}
}
@media (orientation: landscape) and (hover: none) and (pointer: coarse) and (min-width: 651px) and (max-width: 1180px) and (max-height: 640px) {
:root[data-custom-theme] .tempo-block {
  border-top: 1px solid rgba(var(--theme-line-rgb), 0.12);
}
}
@media (orientation: landscape) and (hover: none) and (pointer: coarse) and (min-width: 651px) and (max-width: 900px) and (max-height: 430px) {
:root[data-custom-theme] .tempo-block {
  border-top: 0;
}
}
@media (max-width: 650px) {
:root[data-custom-theme] .tempo-block .tempo-box::before {
  color: var(--accent-deep);
}
}
@media (orientation: portrait) and (min-width: 651px) and (max-width: 739px) {
:root[data-custom-theme] .tempo-block {
  border-top: 1px solid rgba(var(--theme-line-rgb), 0.12);
}
}
:root[data-custom-theme] .strum-pattern-summary {
  color: var(--muted);
}
:root[data-custom-theme] .strum-pattern-title {
  color: var(--accent-deep);
}
:root[data-custom-theme] .strum-pattern-value {
  color: var(--ink);
}
:root[data-custom-theme] .tempo-value {
  color: var(--ink);
}
:root[data-custom-theme] #tempo-slider,
:root[data-custom-theme] #onboarding-demo-tempo-slider,
:root[data-custom-theme] #triad-tempo-slider,
:root[data-custom-theme] #arp-tempo-slider,
:root[data-custom-theme] #ex-tempo-slider {
  background: transparent;
}
:root[data-custom-theme] #tempo-slider::-webkit-slider-runnable-track,
:root[data-custom-theme] #onboarding-demo-tempo-slider::-webkit-slider-runnable-track,
:root[data-custom-theme] #triad-tempo-slider::-webkit-slider-runnable-track,
:root[data-custom-theme] #arp-tempo-slider::-webkit-slider-runnable-track,
:root[data-custom-theme] #ex-tempo-slider::-webkit-slider-runnable-track {
  background: var(--theme-accent);
}
:root[data-custom-theme] #tempo-slider::-webkit-slider-thumb,
:root[data-custom-theme] #onboarding-demo-tempo-slider::-webkit-slider-thumb,
:root[data-custom-theme] #triad-tempo-slider::-webkit-slider-thumb,
:root[data-custom-theme] #arp-tempo-slider::-webkit-slider-thumb,
:root[data-custom-theme] #ex-tempo-slider::-webkit-slider-thumb {
  border: 2px solid var(--theme-accent);
  background: var(--theme-card);
}
:root[data-custom-theme] #tempo-slider::-moz-range-track,
:root[data-custom-theme] #onboarding-demo-tempo-slider::-moz-range-track,
:root[data-custom-theme] #triad-tempo-slider::-moz-range-track,
:root[data-custom-theme] #arp-tempo-slider::-moz-range-track,
:root[data-custom-theme] #ex-tempo-slider::-moz-range-track {
  border: 0;
  background: var(--theme-accent);
}
:root[data-custom-theme] #tempo-slider::-moz-range-progress,
:root[data-custom-theme] #onboarding-demo-tempo-slider::-moz-range-progress,
:root[data-custom-theme] #triad-tempo-slider::-moz-range-progress,
:root[data-custom-theme] #arp-tempo-slider::-moz-range-progress,
:root[data-custom-theme] #ex-tempo-slider::-moz-range-progress {
  background: var(--theme-accent);
}
:root[data-custom-theme] #tempo-slider::-moz-range-thumb,
:root[data-custom-theme] #onboarding-demo-tempo-slider::-moz-range-thumb,
:root[data-custom-theme] #triad-tempo-slider::-moz-range-thumb,
:root[data-custom-theme] #arp-tempo-slider::-moz-range-thumb,
:root[data-custom-theme] #ex-tempo-slider::-moz-range-thumb {
  border: 2px solid var(--theme-accent);
  background: var(--theme-card);
}
@media (max-width: 650px) {
:root[data-custom-theme] .tempo-block {
  border-top: 1px solid rgba(var(--theme-line-rgb), 0.12);
}
}
@media (min-width: 651px) and (max-width: 739px) {
:root[data-custom-theme] .tempo-block {
  border-top: 1px solid rgba(var(--theme-line-rgb), 0.12);
}
}
@media (orientation: portrait) and (min-width: 651px) and (max-width: 739px) {
:root[data-custom-theme] .tempo-block {
  border-top: 1px solid rgba(var(--theme-line-rgb), 0.12);
}
}
:root[data-custom-theme] .default-settings-subtitle {
  color: var(--muted);
}
:root[data-custom-theme] .display-shortcuts-subtitle {
  color: var(--muted);
}
:root[data-custom-theme] .settings-restore-defaults-button {
  border: 1px solid rgba(var(--theme-line-rgb), 0.14);
  background: rgba(var(--theme-card-rgb), 0.92);
  color: var(--accent-deep);
}
:root[data-custom-theme] .settings-row {
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-card-rgb), 0.86);
}
:root[data-custom-theme] .settings-row-compact {
  background: rgba(var(--theme-card-rgb), 0.68);
}
:root[data-custom-theme] .settings-row-title {
  color: var(--ink);
}
:root[data-custom-theme] .settings-row-body {
  color: var(--muted);
}
:root[data-custom-theme] .settings-select {
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-card-rgb), 0.88);
  color: var(--ink);
}
:root[data-custom-theme] .settings-segmented-control {
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-control-rgb), 0.58);
}
:root[data-custom-theme] .settings-segmented-control span {
  color: var(--muted);
}
:root[data-custom-theme] .settings-segmented-control input:checked + span {
  background: rgba(var(--theme-card-rgb), 0.94);
  color: var(--accent-deep);
}
:root[data-custom-theme] .settings-segmented-control input:focus-visible + span {
  outline: 3px solid rgba(var(--theme-accent-rgb), 0.38);
}
:root[data-custom-theme] .settings-switch-track {
  border: 1px solid rgba(var(--theme-line-rgb), 0.14);
  background: rgba(var(--theme-control-rgb), 0.75);
}
:root[data-custom-theme] .settings-switch-thumb {
  background: var(--theme-card);
}
:root[data-custom-theme] .settings-switch input:checked + .settings-switch-track {
  border-color: rgba(var(--theme-accent-rgb), 0.3);
  background: var(--accent);
}
:root[data-custom-theme] .settings-switch input:focus-visible + .settings-switch-track {
  outline: 3px solid rgba(var(--theme-accent-rgb), 0.38);
}
:root[data-custom-theme] .settings-section {
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-card-rgb), 0.86);
}
:root[data-custom-theme] .settings-section h4 {
  color: var(--ink);
}
:root[data-custom-theme] .default-settings-group {
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-card-rgb), 0.68);
}
:root[data-custom-theme] .default-settings-group summary {
  color: var(--ink);
}
:root[data-custom-theme] .default-settings-caret {
  color: var(--muted);
}
:root[data-custom-theme] .default-settings-summary {
  color: var(--muted);
}
:root[data-custom-theme] .default-settings-option {
  color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
:root[data-custom-theme] .default-settings-option:hover {
  background: rgba(var(--theme-accent-rgb), 0.08);
}
:root[data-custom-theme][data-theme='dark'] .default-settings-option:hover {
  background: rgba(var(--theme-accent-rgb), 0.14);
}
}
:root[data-custom-theme] .default-settings-select-row {
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-card-rgb), 0.68);
}
:root[data-custom-theme] .default-settings-select-row-nested {
  border-color: rgba(var(--theme-line-rgb), 0.1);
  background: rgba(var(--theme-card-rgb), 0.52);
}
:root[data-custom-theme] .default-settings-select-row label {
  color: var(--ink);
}
:root[data-custom-theme] .default-settings-select-row select {
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-card-rgb), 0.88);
  color: var(--ink);
}
:root[data-custom-theme] .control-grid,
:root[data-custom-theme] .progression-scale-card,
:root[data-custom-theme] .progression-scale-carousel {
  background: radial-gradient(circle at 44% 10%, rgba(var(--theme-card-rgb), 0.34), rgba(var(--theme-card-rgb), 0) 42%),
    linear-gradient(145deg, rgba(var(--theme-card-rgb), 0.28), rgba(var(--theme-card-rgb), 0) 42%),
    linear-gradient(315deg, rgba(var(--theme-control-rgb), 0.035), rgba(var(--theme-control-rgb), 0) 34%),
    rgba(var(--theme-card-rgb), 0.92);
}
:root[data-custom-theme] .chord-card {
  border-color: rgba(var(--theme-line-rgb), 0.145);
  border-bottom-color: rgba(var(--theme-line-rgb), 0.2);
}
:root[data-custom-theme] .generate-button,
:root[data-custom-theme] .mode-dropdown-button,
:root[data-custom-theme] .favorite-dialog-confirm,
:root[data-custom-theme] .app-info-guide-button,
:root[data-custom-theme] .onboarding-next-button {
  border-color: rgba(var(--theme-line-rgb), 0.08);
}
:root[data-custom-theme] .generate-button {
  border: 1px solid rgba(var(--theme-accent-rgb), 0.18);
  background: var(--theme-accent);
}
:root[data-custom-theme] .key-root-field select,
:root[data-custom-theme] .display-field select,
:root[data-custom-theme] .rhythm-select-field select,
:root[data-custom-theme] .tempo-box,
:root[data-custom-theme] select,
:root[data-custom-theme] input[type='number'],
:root[data-custom-theme] .toggle-row,
:root[data-custom-theme] .segmented label,
:root[data-custom-theme] .checkbox-field label,
:root[data-custom-theme] .mode-dropdown-options label,
:root[data-custom-theme] .favorite-title-label input,
:root[data-custom-theme] .favorite-new-folder-label input,
:root[data-custom-theme] .favorite-folder-label select,
:root[data-custom-theme] .settings-select,
:root[data-custom-theme] .default-settings-select-row select {
  border-color: rgba(var(--theme-line-rgb), 0.22);
}
:root[data-custom-theme] .scale-practice-tempo-select,
:root[data-custom-theme] .scale-practice-scope-select,
:root[data-custom-theme] .scale-practice-icon-button {
  border-color: rgba(var(--theme-line-rgb), 0.22);
}
:root[data-custom-theme] .progression-scale-page-button,
:root[data-custom-theme] .scale-variant-button {
  background: transparent;
}
:root[data-custom-theme] .progression-scale-page-button.is-active,
:root[data-custom-theme] .scale-variant-button.is-active {
  background: transparent;
}
:root[data-custom-theme] .display-shortcut-button,
:root[data-custom-theme] .app-menu-button,
:root[data-custom-theme] .web-app-shortcut-button,
:root[data-custom-theme] .web-app-menu-button {
  color: var(--theme-muted);
}
@media (hover: hover) and (pointer: fine) {
:root[data-custom-theme] .chord-options-chip-group > label input:not(:checked) + span:hover {
  border-color: rgba(var(--theme-line-rgb), 0.17);
  background: rgba(var(--theme-card-rgb), 0.94);
}
}
:root[data-custom-theme] .progression-scale-page-button,
:root[data-custom-theme] .progression-scale-page-button:hover,
:root[data-custom-theme] .progression-scale-page-button:focus-visible,
:root[data-custom-theme] .progression-scale-page-button.is-active,
:root[data-custom-theme] .scale-variant-button,
:root[data-custom-theme] .scale-variant-button:hover,
:root[data-custom-theme] .scale-variant-button:focus-visible,
:root[data-custom-theme] .scale-variant-button.is-active {
  background: transparent;
}
:root[data-custom-theme][data-theme='dark'] body {
  background: radial-gradient(circle at 50% -20%, rgba(var(--theme-accent-rgb), 0.13), transparent 36rem),
    var(--page-bg);
}
:root[data-custom-theme][data-theme='dark'] .control-grid,
:root[data-custom-theme][data-theme='dark'] .progression-scale-card,
:root[data-custom-theme][data-theme='dark'] .progression-scale-carousel {
  background: radial-gradient(circle at 44% 10%, rgba(var(--theme-card-rgb), 0.045), rgba(var(--theme-card-rgb), 0) 42%),
    linear-gradient(145deg, rgba(var(--theme-card-rgb), 0.04), rgba(var(--theme-card-rgb), 0) 42%),
    linear-gradient(315deg, rgba(var(--theme-panel-rgb), 0.12), rgba(var(--theme-panel-rgb), 0) 34%),
    rgba(var(--theme-control-rgb), 0.96);
}
:root[data-custom-theme][data-theme='dark'] .web-copy-intro,
:root[data-custom-theme][data-theme='dark'] .web-upgrade-section,
:root[data-custom-theme][data-theme='dark'] .web-feature-section,
:root[data-custom-theme][data-theme='dark'] .web-faq,
:root[data-custom-theme][data-theme-dark] .web-copy-intro,
:root[data-custom-theme][data-theme-dark] .web-upgrade-section,
:root[data-custom-theme][data-theme-dark] .web-feature-section,
:root[data-custom-theme][data-theme-dark] .web-faq,
:root[data-custom-theme] body[data-theme-dark] .web-copy-intro,
:root[data-custom-theme] body[data-theme-dark] .web-upgrade-section,
:root[data-custom-theme] body[data-theme-dark] .web-feature-section,
:root[data-custom-theme] body[data-theme-dark] .web-faq {
  border-color: rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-control-rgb), 0.9);
  color: var(--theme-text);
}
:root[data-custom-theme][data-theme='dark'] .web-social-panel,
:root[data-custom-theme][data-theme-dark] .web-social-panel,
:root[data-custom-theme] body[data-theme-dark] .web-social-panel {
  border-color: rgba(var(--theme-line-rgb), 0.1);
}
:root[data-custom-theme][data-theme='dark'] .web-copy-card,
:root[data-custom-theme][data-theme='dark'] .web-explore-card,
:root[data-custom-theme][data-theme='dark'] .web-faq-item,
:root[data-custom-theme][data-theme-dark] .web-copy-card,
:root[data-custom-theme][data-theme-dark] .web-explore-card,
:root[data-custom-theme][data-theme-dark] .web-faq-item,
:root[data-custom-theme] body[data-theme-dark] .web-copy-card,
:root[data-custom-theme] body[data-theme-dark] .web-explore-card,
:root[data-custom-theme] body[data-theme-dark] .web-faq-item {
  border-color: rgba(var(--theme-line-rgb), 0.09);
  background: rgba(var(--theme-control-rgb), 0.72);
  color: var(--theme-text);
}
:root[data-custom-theme][data-theme='dark'] .web-copy-intro p,
:root[data-custom-theme][data-theme='dark'] .web-copy-card p,
:root[data-custom-theme][data-theme='dark'] .web-feature-list,
:root[data-custom-theme][data-theme='dark'] .web-faq-item p,
:root[data-custom-theme][data-theme='dark'] .web-explore-card p,
:root[data-custom-theme][data-theme='dark'] .web-social-header p,
:root[data-custom-theme][data-theme-dark] .web-copy-intro p,
:root[data-custom-theme][data-theme-dark] .web-copy-card p,
:root[data-custom-theme][data-theme-dark] .web-feature-list,
:root[data-custom-theme][data-theme-dark] .web-faq-item p,
:root[data-custom-theme][data-theme-dark] .web-explore-card p,
:root[data-custom-theme][data-theme-dark] .web-social-header p,
:root[data-custom-theme] body[data-theme-dark] .web-copy-intro p,
:root[data-custom-theme] body[data-theme-dark] .web-copy-card p,
:root[data-custom-theme] body[data-theme-dark] .web-feature-list,
:root[data-custom-theme] body[data-theme-dark] .web-faq-item p,
:root[data-custom-theme] body[data-theme-dark] .web-explore-card p,
:root[data-custom-theme] body[data-theme-dark] .web-social-header p {
  color: var(--theme-muted);
}
:root[data-custom-theme][data-theme='dark'] button:focus-visible,
:root[data-custom-theme][data-theme='dark'] input:focus-visible,
:root[data-custom-theme][data-theme='dark'] select:focus-visible {
  outline-color: rgba(var(--theme-accent-rgb), 0.48);
}
:root[data-custom-theme][data-theme='dark'] .app-info-overlay,
:root[data-custom-theme][data-theme='dark'] .favorite-dialog-overlay,
:root[data-custom-theme][data-theme='dark'] .onboarding-overlay,
:root[data-custom-theme][data-theme='dark'] .diagram-zoom-overlay {
  background: rgba(7, 6, 5, 0.66);
}
:root[data-custom-theme][data-theme='dark'] .app-info-sheet,
:root[data-custom-theme][data-theme='dark'] .favorite-dialog,
:root[data-custom-theme][data-theme='dark'] .onboarding-sheet,
:root[data-custom-theme][data-theme='dark'] .diagram-zoom-sheet,
:root[data-custom-theme][data-theme='dark'] .progression-scale-card,
:root[data-custom-theme][data-theme='dark'] .progression-scale-carousel,
:root[data-custom-theme][data-theme='dark'] .progression-panel,
:root[data-custom-theme][data-theme='dark'] .control-deck,
:root[data-custom-theme][data-theme='dark'] .key-chord-card,
:root[data-custom-theme][data-theme='dark'] .chord-card,
:root[data-custom-theme][data-theme='dark'] .onboarding-demo-panel,
:root[data-custom-theme][data-theme='dark'] .onboarding-highlight-card,
:root[data-custom-theme][data-theme='dark'] .onboarding-rotation-panel,
:root[data-custom-theme][data-theme='dark'] .favorite-folder,
:root[data-custom-theme][data-theme='dark'] .favorite-row,
:root[data-custom-theme][data-theme='dark'] .app-info-guide-cta,
:root[data-custom-theme][data-theme='dark'] .settings-row,
:root[data-custom-theme][data-theme='dark'] .settings-section,
:root[data-custom-theme][data-theme='dark'] .default-settings-group,
:root[data-custom-theme][data-theme='dark'] .default-settings-select-row {
  border-color: rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-control-rgb), 0.96);
}
:root[data-custom-theme][data-theme='dark'] .app-info-sheet,
:root[data-custom-theme][data-theme='dark'] .favorite-dialog,
:root[data-custom-theme][data-theme='dark'] .onboarding-sheet,
:root[data-custom-theme][data-theme='dark'] .diagram-zoom-sheet {
  background: rgba(var(--theme-control-rgb), 0.98);
}
:root[data-custom-theme][data-theme='dark'] .premium-web-features h4,
:root[data-custom-theme][data-theme='dark'] .premium-web-plan-column h4 {
  color: var(--theme-accent);
}
:root[data-custom-theme][data-theme='dark'] .premium-web-feature-icon,
:root[data-custom-theme][data-theme='dark'] .premium-web-plan-continue-button {
  background: var(--theme-accent);
}
:root[data-custom-theme][data-theme='dark'] .premium-web-plan-column,
:root[data-custom-theme][data-theme='dark'] .premium-web-plan {
  border-color: rgba(var(--theme-line-rgb), 0.14);
}
:root[data-custom-theme][data-theme='dark'] .premium-web-plan p {
  color: var(--ink);
}
:root[data-custom-theme][data-theme='dark'] .app-info-dismiss-handle span,
:root[data-custom-theme][data-theme='dark'] .diagram-zoom-dismiss-handle span,
:root[data-custom-theme][data-theme='dark'] .onboarding-progress span,
:root[data-custom-theme][data-theme='dark'] .progression-scale-page-button,
:root[data-custom-theme][data-theme='dark'] .scale-shape-dot {
  background: rgba(var(--theme-card-rgb), 0.22);
}
:root[data-custom-theme][data-theme='dark'] .app-info-link,
:root[data-custom-theme][data-theme='dark'] .app-info-close,
:root[data-custom-theme][data-theme='dark'] .app-info-detail-back,
:root[data-custom-theme][data-theme='dark'] .favorite-folder-create-button,
:root[data-custom-theme][data-theme='dark'] .favorite-folder-count,
:root[data-custom-theme][data-theme='dark'] .favorite-row-action,
:root[data-custom-theme][data-theme='dark'] .favorite-folder-reorder-handle,
:root[data-custom-theme][data-theme='dark'] .favorite-reorder-handle,
:root[data-custom-theme][data-theme='dark'] .favorite-dialog-cancel,
:root[data-custom-theme][data-theme='dark'] .onboarding-back-button,
:root[data-custom-theme][data-theme='dark'] .onboarding-close-button,
:root[data-custom-theme][data-theme='dark'] .onboarding-start-playing-button,
:root[data-custom-theme][data-theme='dark'] .onboarding-skip-button,
:root[data-custom-theme][data-theme='dark'] .reset-button,
:root[data-custom-theme][data-theme='dark'] .settings-restore-defaults-button,
:root[data-custom-theme][data-theme='dark'] .field-help,
:root[data-custom-theme][data-theme='dark'] .transport-toggle[aria-pressed='false'],
:root[data-custom-theme][data-theme='dark'] .diagram-zoom-button,
:root[data-custom-theme][data-theme='dark'] .diagram-zoom-close,
:root[data-custom-theme][data-theme='dark'] .diagram-zoom-nav,
:root[data-custom-theme][data-theme='dark'] .scale-shape-stepper,
:root[data-custom-theme][data-theme='dark'] .scale-marker-label-button,
:root[data-custom-theme][data-theme='dark'] .chord-picker-chevron,
:root[data-custom-theme][data-theme='dark'] .mode-dropdown-trigger,
:root[data-custom-theme][data-theme='dark'] select,
:root[data-custom-theme][data-theme='dark'] input[type='number'],
:root[data-custom-theme][data-theme='dark'] .toggle-row,
:root[data-custom-theme][data-theme='dark'] .segmented label,
:root[data-custom-theme][data-theme='dark'] .checkbox-field label,
:root[data-custom-theme][data-theme='dark'] .settings-select,
:root[data-custom-theme][data-theme='dark'] .default-settings-select-row select {
  border-color: rgba(var(--theme-line-rgb), 0.13);
  background: rgba(var(--theme-control-rgb), 0.9);
  color: var(--ink);
}
:root[data-custom-theme][data-theme='dark'] .mode-dropdown-panel {
  border-color: rgba(var(--theme-line-rgb), 0.13);
  background: rgba(var(--theme-control-rgb), 0.98);
}
:root[data-custom-theme][data-theme='dark'] .mode-dropdown-options label,
:root[data-custom-theme][data-theme='dark'] .settings-segmented-control,
:root[data-custom-theme][data-theme='dark'] .mode-dropdown-button-secondary {
  border-color: rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-control-rgb), 0.9);
  color: var(--ink);
}
:root[data-custom-theme][data-theme='dark'] .onboarding-skip-button,
:root[data-custom-theme][data-theme='dark'] .onboarding-start-playing-button,
:root[data-custom-theme][data-theme='dark'] .onboarding-skip-button:hover,
:root[data-custom-theme][data-theme='dark'] .onboarding-start-playing-button:hover,
:root[data-custom-theme][data-theme='dark'] .onboarding-start-playing-button:focus-visible,
:root[data-custom-theme][data-theme='dark'] .onboarding-skip-button:focus-visible {
  border-color: transparent;
  background: transparent;
}
@media (hover: hover) and (pointer: fine) {
:root[data-custom-theme][data-theme='dark'] .mode-dropdown-options label:hover,
:root[data-custom-theme][data-theme='dark'] .mode-dropdown-button-secondary:hover,
:root[data-custom-theme][data-theme='dark'] .mode-dropdown-button-secondary:focus-visible {
  background: rgba(var(--theme-control-rgb), 0.96);
}
}
:root[data-custom-theme][data-theme='dark'] .app-info-link:hover,
:root[data-custom-theme][data-theme='dark'] .app-info-link:focus-visible,
:root[data-custom-theme][data-theme='dark'] .app-info-guide-button:hover,
:root[data-custom-theme][data-theme='dark'] .app-info-guide-button:focus-visible,
:root[data-custom-theme][data-theme='dark'] .onboarding-back-button:hover,
:root[data-custom-theme][data-theme='dark'] .onboarding-back-button:focus-visible,
:root[data-custom-theme][data-theme='dark'] .onboarding-close-button:hover,
:root[data-custom-theme][data-theme='dark'] .onboarding-close-button:focus-visible,
:root[data-custom-theme][data-theme='dark'] .onboarding-skip-button:hover,
:root[data-custom-theme][data-theme='dark'] .onboarding-start-playing-button:hover,
:root[data-custom-theme][data-theme='dark'] .onboarding-start-playing-button:focus-visible,
:root[data-custom-theme][data-theme='dark'] .onboarding-skip-button:focus-visible,
:root[data-custom-theme][data-theme='dark'] .settings-restore-defaults-button:hover,
:root[data-custom-theme][data-theme='dark'] .settings-restore-defaults-button:focus-visible {
  border-color: rgba(var(--theme-accent-rgb), 0.44);
  color: var(--accent-deep);
}
:root[data-custom-theme][data-theme='dark'] .app-info-link:hover,
:root[data-custom-theme][data-theme='dark'] .app-info-link:focus-visible {
  border-color: rgba(var(--theme-line-rgb), 0.13);
  color: inherit;
}
:root[data-custom-theme][data-theme='dark'] .favorite-folder.is-drop-target {
  border-color: rgba(var(--theme-accent-rgb), 0.82);
  background: rgba(var(--theme-accent-rgb), 0.18);
}
:root[data-custom-theme][data-theme='dark'] .generate-button {
  background: var(--theme-accent);
  color: var(--theme-on-accent);
}
:root[data-custom-theme][data-theme='dark'] .monetization-dialog-overlay[data-mode='day4'] .favorite-dialog-confirm,
:root[data-custom-theme][data-theme='dark'] .monetization-dialog-overlay[data-mode='warning-80'] .favorite-dialog-confirm,
:root[data-custom-theme][data-theme='dark'] .monetization-dialog-overlay[data-mode='limit-reached'] .favorite-dialog-confirm {
  border-color: rgba(var(--theme-accent-rgb), 0.38);
  background: var(--theme-accent);
  color: var(--theme-on-accent);
}
:root[data-custom-theme][data-theme='dark'] .app-info-guide-button,
:root[data-custom-theme][data-theme='dark'] .favorite-dialog-confirm,
:root[data-custom-theme][data-theme='dark'] .transport-button,
:root[data-custom-theme][data-theme='dark'] .transport-toggle[aria-pressed='true'],
:root[data-custom-theme][data-theme='dark'] .preview-chord,
:root[data-custom-theme][data-theme='dark'] .swap-shape,
:root[data-custom-theme][data-theme='dark'] .settings-switch input:checked + .settings-switch-track {
  border-color: rgba(var(--theme-accent-rgb), 0.32);
  background: var(--theme-accent);
  color: var(--theme-on-accent);
}
:root[data-custom-theme][data-theme='dark'] .settings-segmented-control input:checked + span {
  background: rgba(var(--theme-card-rgb), 0.12);
  color: var(--accent-deep);
}
:root[data-custom-theme][data-theme='dark'] .app-info-guide-button {
  border-color: rgba(var(--theme-accent-rgb), 0.38);
  background: var(--theme-accent);
  color: var(--theme-on-accent);
}
:root[data-custom-theme][data-theme='dark'] .onboarding-next-button {
  border-color: rgba(var(--theme-accent-rgb), 0.38);
  background: var(--theme-accent);
  color: var(--theme-on-accent);
}
:root[data-custom-theme][data-theme='dark'] .generate-button:disabled,
:root[data-custom-theme][data-theme='dark'] .reset-button:disabled {
  background: rgba(var(--theme-control-rgb), 0.72);
  color: var(--theme-text);
  border-color: rgba(var(--theme-line-rgb), 0.1);
}
:root[data-custom-theme][data-theme='dark'] .app-info-link-stars {
  color: var(--theme-accent);
}
:root[data-custom-theme][data-theme='dark'] #app-premium-account-copy.is-error,
:root[data-custom-theme][data-theme='dark'] #app-premium-restore-copy.is-error,
:root[data-custom-theme][data-theme='dark'] .app-info-feedback.is-error {
  color: var(--theme-accent);
}
:root[data-custom-theme][data-theme='dark'] .favorite-title-label input,
:root[data-custom-theme][data-theme='dark'] .favorite-new-folder-label input,
:root[data-custom-theme][data-theme='dark'] .favorite-folder-label select,
:root[data-custom-theme][data-theme='dark'] .settings-switch-thumb {
  border-color: rgba(var(--theme-line-rgb), 0.14);
  background: var(--theme-card);
  color: var(--theme-text);
}
:root[data-custom-theme][data-theme='dark'] .tuner-panel {
  border-color: rgba(var(--theme-line-rgb), 0.13);
  background: rgba(var(--theme-control-rgb), 0.96);
}
:root[data-custom-theme][data-theme='dark'] .practice-locked-banner,
:root[data-custom-theme][data-theme='dark'] .practice-settings,
:root[data-custom-theme][data-theme='dark'] .practice-manual-form,
:root[data-custom-theme][data-theme='dark'] .practice-day-detail,
:root[data-custom-theme][data-theme='dark'] .practice-heatmap,
:root[data-custom-theme][data-theme='dark'] .practice-stat-card {
  border-color: rgba(var(--theme-line-rgb), 0.13);
  background: rgba(var(--theme-control-rgb), 0.96);
}
:root[data-custom-theme][data-theme='dark'] .practice-settings-popup .practice-settings,
:root[data-custom-theme][data-theme='dark'] .practice-manual-popup .practice-manual-form,
:root[data-custom-theme][data-theme='dark'] .practice-day-detail-popup .practice-day-detail {
  background: var(--theme-control);
}
:root[data-custom-theme][data-theme='dark'] .practice-view-tabs {
  border-color: rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-control-rgb), 0.9);
}
:root[data-custom-theme][data-theme='dark'] .practice-view-tabs button[aria-pressed='true'] {
  background: rgba(var(--theme-card-rgb), 0.12);
  color: var(--accent-deep);
}
:root[data-custom-theme][data-theme='dark'] .practice-icon-button,
:root[data-custom-theme][data-theme='dark'] .practice-period-controls button,
:root[data-custom-theme][data-theme='dark'] .practice-secondary-button {
  border-color: rgba(var(--theme-line-rgb), 0.13);
  background: rgba(var(--theme-control-rgb), 0.9);
  color: var(--ink);
}
:root[data-custom-theme][data-theme='dark'] .practice-primary-button {
  border-color: rgba(var(--theme-accent-rgb), 0.38);
  background: var(--theme-accent);
  color: var(--theme-on-accent);
}
:root[data-custom-theme][data-theme='dark'] .practice-tooltip {
  border-color: rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-card-rgb), 0.95);
  color: var(--theme-text);
}
:root[data-custom-theme][data-theme='dark'] .practice-tooltip-add {
  border-color: rgba(var(--theme-line-rgb), 0.16);
  background: rgba(var(--theme-control-rgb), 0.06);
}
:root[data-custom-theme][data-theme='dark'] .practice-tooltip-detail {
  color: var(--theme-text);
}
:root[data-custom-theme][data-theme='dark'] .tuner-meter {
  border-color: rgba(var(--theme-line-rgb), 0.13);
  background: linear-gradient(90deg, rgba(var(--theme-accent-rgb), 0.15), transparent 38%, transparent 62%, rgba(var(--theme-accent-rgb), 0.16)),
    var(--tuner-meter-bg);
}
:root[data-custom-theme][data-theme='dark'] .tuner-meter::before {
  background: rgba(var(--theme-card-rgb), 0.14);
}
:root[data-custom-theme][data-theme='dark'] .tuner-meter-center {
  background: rgba(var(--theme-card-rgb), 0.28);
}
:root[data-custom-theme][data-theme='dark'] .tuner-needle {
  background: var(--theme-card);
}
:root[data-custom-theme][data-theme='dark'] .tuner-start-button {
  border-color: rgba(var(--theme-accent-rgb), 0.36);
  background: var(--theme-accent);
  color: var(--theme-on-accent);
}
:root[data-custom-theme][data-theme='dark'] .tuner-stop-button {
  border-color: rgba(var(--theme-accent-rgb), 0.32);
  background: var(--theme-accent);
  color: var(--theme-on-accent);
}
:root[data-custom-theme][data-theme='dark'] .tuner-panel[data-tuner-state='error'] .tuner-status {
  color: var(--theme-accent);
}
:root[data-custom-theme][data-theme='dark'] .settings-switch-track {
  border-color: rgba(var(--theme-line-rgb), 0.13);
  background: rgba(var(--theme-control-rgb), 0.72);
}
:root[data-custom-theme][data-theme='dark'] .field-help-tooltip,
:root[data-custom-theme][data-theme='dark'] .field-help-tooltip::after {
  background: rgba(var(--theme-card-rgb), 0.95);
  color: var(--theme-text);
}
:root[data-custom-theme][data-theme='dark'] .step-chip {
  background: rgba(var(--theme-card-rgb), 0.1);
  color: var(--ink);
}
:root[data-custom-theme][data-theme='dark'] .theory-chip,
:root[data-custom-theme][data-theme='dark'] .voicing-chip {
  background: rgba(var(--theme-accent-rgb), 0.18);
  color: var(--accent-deep);
}
:root[data-custom-theme][data-theme='dark'] .empty-state-visual,
:root[data-custom-theme][data-theme='dark'] .progression-scale-unavailable-message {
  border-color: rgba(var(--theme-line-rgb), 0.14);
  background: rgba(var(--theme-control-rgb), 0.7);
  color: var(--muted);
}
:root[data-custom-theme][data-theme='dark'] .empty-state-fretboard {
  border-color: rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-card-rgb), 0.06);
}
:root[data-custom-theme][data-theme='dark'] .empty-state-fretboard span {
  background: rgba(var(--theme-card-rgb), 0.28);
}
:root[data-custom-theme][data-theme='dark'] .empty-state-pulse {
  background: rgba(var(--theme-accent-rgb), 0.16);
}
:root[data-custom-theme][data-theme='dark'] .scale-string,
:root[data-custom-theme][data-theme='dark'] .scale-fret,
:root[data-custom-theme][data-theme='dark'] .scale-nut,
:root[data-custom-theme][data-theme='dark'] .diagram-string,
:root[data-custom-theme][data-theme='dark'] .diagram-fret,
:root[data-custom-theme][data-theme='dark'] .diagram-nut {
  stroke: var(--theme-muted);
}
:root[data-custom-theme][data-theme='dark'] .diagram-barre,
:root[data-custom-theme][data-theme='dark'] .diagram-finger-guide {
  stroke: var(--theme-text);
}
:root[data-custom-theme][data-theme='dark'] .scale-dot,
:root[data-custom-theme][data-theme='dark'] .diagram-dot {
  fill: var(--theme-text);
}
:root[data-custom-theme][data-theme='dark'] .scale-dot-root {
  fill: var(--theme-red);
}
:root[data-custom-theme][data-theme='dark'] .scale-dot-blue-note {
  fill: var(--theme-blue);
}
:root[data-custom-theme][data-theme='dark'] .scale-dot-third {
  fill: var(--theme-green);
}
:root[data-custom-theme][data-theme='dark'] .scale-dot-fifth {
  fill: var(--theme-accent);
}
:root[data-custom-theme][data-theme='dark'] .scale-dot-modal {
  fill: var(--theme-purple);
}
:root[data-custom-theme][data-theme='dark'] .scale-practice-icon-button {
  border-color: rgba(var(--theme-line-rgb), 0.18);
  background: rgba(var(--theme-control-rgb), 0.88);
  color: var(--theme-text);
}
:root[data-custom-theme][data-theme='dark'] .scale-practice-tempo-select,
:root[data-custom-theme][data-theme='dark'] .scale-practice-scope-select {
  border-color: rgba(var(--theme-line-rgb), 0.18);
  background: rgba(var(--theme-control-rgb), 0.88);
  color: var(--theme-text);
}
:root[data-custom-theme][data-theme='dark'] .scale-practice-tempo-caret,
:root[data-custom-theme][data-theme='dark'] .scale-practice-scope-caret {
  color: var(--theme-text);
}
:root[data-custom-theme][data-theme='dark'] .triad-fret-dot .scale-dot.is-playback-active,
:root[data-custom-theme][data-theme='dark'] .scale-dot.is-practice-active {
  stroke: var(--theme-blue);
}
:root[data-custom-theme][data-theme='dark'] .triad-card [data-diagram-string].is-playback-active {
  stroke: var(--theme-accent);
}
:root[data-custom-theme][data-theme='dark'] .diagram-finger,
:root[data-custom-theme][data-theme='dark'] .scale-interval-label {
  fill: var(--theme-on-note);
}
:root[data-custom-theme][data-theme='dark'] .diagram-basefret,
:root[data-custom-theme][data-theme='dark'] .scale-fret-label,
:root[data-custom-theme][data-theme='dark'] .diagram-state-open,
:root[data-custom-theme][data-theme='dark'] .diagram-state-mute {
  color: var(--theme-text);
  fill: var(--theme-text);
}
:root[data-custom-theme][data-theme='dark'] .diagram-preview-button .diagram-preview-button-disc,
:root[data-custom-theme][data-theme='dark'] .diagram-lock-button .diagram-lock-button-disc {
  fill: var(--theme-text);
  stroke: var(--theme-text);
}
:root[data-custom-theme][data-theme='dark'] .diagram-preview-button .diagram-preview-button-glyph {
  color: var(--ink);
  fill: var(--ink);
  stroke: none;
}
:root[data-custom-theme][data-theme='dark'] .diagram-lock-button .diagram-lock-button-glyph {
  color: var(--ink);
  fill: none;
  stroke: var(--ink);
}
:root[data-custom-theme][data-theme='dark'] .chord-card .card-actions .swap-shape-stepper svg {
  color: var(--ink);
  stroke: var(--ink);
}
:root[data-custom-theme][data-theme='dark'] .diagram-lock-button[aria-pressed='true'] .diagram-lock-button-disc {
  fill: var(--theme-accent);
  stroke: var(--theme-accent);
}
:root[data-custom-theme][data-theme='dark'] #tempo-slider::-webkit-slider-runnable-track,
:root[data-custom-theme][data-theme='dark'] #onboarding-demo-tempo-slider::-webkit-slider-runnable-track,
:root[data-custom-theme][data-theme='dark'] #triad-tempo-slider::-webkit-slider-runnable-track,
:root[data-custom-theme][data-theme='dark'] .volume-slider::-webkit-slider-runnable-track {
  background: var(--theme-accent);
}
:root[data-custom-theme][data-theme='dark'] #tempo-slider::-webkit-slider-thumb,
:root[data-custom-theme][data-theme='dark'] #onboarding-demo-tempo-slider::-webkit-slider-thumb,
:root[data-custom-theme][data-theme='dark'] #triad-tempo-slider::-webkit-slider-thumb,
:root[data-custom-theme][data-theme='dark'] .volume-slider::-webkit-slider-thumb {
  border-color: var(--theme-accent);
  background: var(--theme-card);
}
:root[data-custom-theme][data-theme='dark'] #tempo-slider::-moz-range-track,
:root[data-custom-theme][data-theme='dark'] #tempo-slider::-moz-range-progress,
:root[data-custom-theme][data-theme='dark'] #onboarding-demo-tempo-slider::-moz-range-track,
:root[data-custom-theme][data-theme='dark'] #onboarding-demo-tempo-slider::-moz-range-progress,
:root[data-custom-theme][data-theme='dark'] #triad-tempo-slider::-moz-range-track,
:root[data-custom-theme][data-theme='dark'] #triad-tempo-slider::-moz-range-progress,
:root[data-custom-theme][data-theme='dark'] .volume-slider::-moz-range-track,
:root[data-custom-theme][data-theme='dark'] .volume-slider::-moz-range-progress {
  background: var(--theme-accent);
}
:root[data-custom-theme][data-theme='dark'] #tempo-slider::-moz-range-thumb,
:root[data-custom-theme][data-theme='dark'] #onboarding-demo-tempo-slider::-moz-range-thumb,
:root[data-custom-theme][data-theme='dark'] #triad-tempo-slider::-moz-range-thumb,
:root[data-custom-theme][data-theme='dark'] .volume-slider::-moz-range-thumb {
  border-color: var(--theme-accent);
  background: var(--theme-card);
}
:root[data-custom-theme][data-theme='dark'] .control-block {
  border-color: rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-control-rgb), 0.96);
}
:root[data-custom-theme][data-theme='dark'] .control-grid {
  border-color: rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-control-rgb), 0.96);
}
:root[data-custom-theme][data-theme='dark'] .app-menu-button,
:root[data-custom-theme][data-theme='dark'] .display-shortcut-button {
  border-color: rgba(var(--theme-line-rgb), 0.16);
  background: rgba(var(--theme-control-rgb), 0.92);
  color: var(--ink);
}
:root[data-custom-theme][data-theme='dark'] .app-menu-button:hover,
:root[data-custom-theme][data-theme='dark'] .app-menu-button:focus-visible,
:root[data-custom-theme][data-theme='dark'] .display-shortcut-button:hover,
:root[data-custom-theme][data-theme='dark'] .display-shortcut-button:focus-visible {
  background: rgba(var(--theme-control-rgb), 0.96);
}
:root[data-custom-theme][data-theme='dark'] .display-shortcut-button-view[aria-pressed='true'],
:root[data-custom-theme][data-theme='dark'] .display-shortcut-button-view[aria-pressed='true']:hover,
:root[data-custom-theme][data-theme='dark'] .display-shortcut-button-view[aria-pressed='true']:focus-visible {
  border-color: rgba(var(--theme-accent-rgb), 0.32);
  background: var(--theme-accent);
  color: var(--theme-on-accent);
}
:root[data-custom-theme][data-theme='dark'] .chord-card.playing,
:root[data-custom-theme][data-theme='dark'] .chord-card.preview-playing,
:root[data-custom-theme][data-theme='dark'] .key-chord-card.preview-playing {
  border-color: var(--theme-accent);
}
:root[data-custom-theme][data-theme='dark'] .key-root-field::after,
:root[data-custom-theme][data-theme='dark'] .select-field::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.25 6 6.25l5-5' stroke='%23f4eee6' stroke-opacity='.86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
:root[data-custom-theme][data-theme='dark'] .card-actions .swap-shape-status {
  color: var(--muted);
}
:root[data-custom-theme][data-theme='dark'] .card-actions .swap-shape-stepper,
:root[data-custom-theme][data-theme='dark'] .card-actions .preview-chord,
:root[data-custom-theme][data-theme='dark'] .chord-card .card-actions .preview-chord,
:root[data-custom-theme][data-theme='dark'] .reorder-handle {
  border-color: rgba(var(--theme-line-rgb), 0.16);
  background: rgba(var(--theme-control-rgb), 0.92);
  color: var(--ink);
}
:root[data-custom-theme][data-theme='dark'] .card-actions .swap-shape-stepper:hover,
:root[data-custom-theme][data-theme='dark'] .card-actions .swap-shape-stepper:focus-visible,
:root[data-custom-theme][data-theme='dark'] .card-actions .preview-chord:hover,
:root[data-custom-theme][data-theme='dark'] .card-actions .preview-chord:focus-visible,
:root[data-custom-theme][data-theme='dark'] .reorder-handle:hover,
:root[data-custom-theme][data-theme='dark'] .reorder-handle:focus-visible {
  background: rgba(var(--theme-control-rgb), 0.96);
}
:root[data-custom-theme][data-theme='dark'] .card-actions .swap-shape-stepper:disabled {
  color: var(--theme-text);
}
:root[data-custom-theme][data-theme='dark'] .progression-scale-page-button,
:root[data-custom-theme][data-theme='dark'] .progression-scale-page-button.is-active,
:root[data-custom-theme][data-theme='dark'] .scale-variant-button {
  border: 0;
  background: transparent;
}
:root[data-custom-theme][data-theme='dark'] .progression-scale-page-button,
:root[data-custom-theme][data-theme='dark'] .scale-variant-button {
  color: var(--muted);
}
:root[data-custom-theme][data-theme='dark'] .progression-scale-page-button.is-active,
:root[data-custom-theme][data-theme='dark'] .scale-variant-button.is-active {
  color: var(--accent-deep);
}
:root[data-custom-theme][data-theme='dark'] .scale-marker-label-button.is-active {
  border-color: rgba(var(--theme-accent-rgb), 0.32);
  background: var(--theme-accent);
  color: var(--theme-on-accent);
}
:root[data-custom-theme][data-theme='dark'] .scale-marker-label-button:hover,
:root[data-custom-theme][data-theme='dark'] .scale-marker-label-button:focus-visible {
  border-color: rgba(var(--theme-accent-rgb), 0.38);
}
:root[data-custom-theme][data-theme='dark'] .progression-scale-page-button::after,
:root[data-custom-theme][data-theme='dark'] .scale-variant-button::after {
  background: transparent;
}
:root[data-custom-theme][data-theme='dark'] .progression-scale-page-button.is-active::after,
:root[data-custom-theme][data-theme='dark'] .scale-variant-button.is-active::after {
  background: rgba(var(--theme-accent-rgb), 0.72);
}
:root[data-custom-theme][data-theme='dark'] .scale-shape-dot.is-active {
  background: var(--theme-accent);
}
:root[data-custom-theme][data-theme='dark'] .onboarding-page h2,
:root[data-custom-theme][data-theme='dark'] .onboarding-highlight-card h3,
:root[data-custom-theme][data-theme='dark'] .onboarding-rotation-note-value {
  color: var(--ink);
}
:root[data-custom-theme][data-theme='dark'] .onboarding-step-label,
:root[data-custom-theme][data-theme='dark'] .onboarding-eyebrow,
:root[data-custom-theme][data-theme='dark'] .onboarding-option-group-label,
:root[data-custom-theme][data-theme='dark'] .onboarding-rotation-note-label,
:root[data-custom-theme][data-theme='dark'] .onboarding-overlay[data-onboarding-current-page='shape-filters'] .onboarding-options-panel .onboarding-option-group-label,
:root[data-custom-theme][data-theme='dark'] .onboarding-overlay[data-onboarding-current-page='harmonic-direction'] .onboarding-demo-field .field-label {
  color: var(--accent-deep);
}
:root[data-custom-theme][data-theme='dark'] .onboarding-rotation-note {
  border-color: rgba(var(--theme-line-rgb), 0.12);
  background: rgba(var(--theme-control-rgb), 0.9);
}
:root[data-custom-theme][data-theme='dark'] .onboarding-options-panel .chord-options-chip-group > label span {
  border-color: rgba(var(--theme-line-rgb), 0.13);
  background: rgba(var(--theme-control-rgb), 0.9);
  color: var(--ink);
}
:root[data-custom-theme][data-theme='dark'] .onboarding-progress span.is-active {
  background: var(--theme-accent);
}
:root[data-custom-theme][data-theme='dark'] .chord-options-chip-group > label span {
  border-color: rgba(var(--theme-line-rgb), 0.13);
  background: rgba(var(--theme-control-rgb), 0.9);
  color: var(--ink);
}
:root[data-custom-theme][data-theme='dark'] .chord-options-chip-group > label input:not(:checked) + span {
  border-color: rgba(var(--theme-line-rgb), 0.14);
  background: rgba(var(--theme-control-rgb), 0.94);
  color: var(--theme-text);
}
:root[data-custom-theme][data-theme='dark'] .chord-options-chip-group > label input:checked + span {
  border-color: rgba(var(--theme-accent-rgb), 0.32);
  background: var(--theme-accent);
  color: var(--theme-on-accent);
}
:root[data-custom-theme][data-theme='dark'] .progression-share-button,
:root[data-custom-theme][data-theme='dark'] .progression-volume-button,
:root[data-custom-theme][data-theme='dark'] .progression-favorite-button {
  color: var(--theme-text);
}
:root[data-custom-theme][data-theme='dark'] .progression-favorite-button.is-favorited svg,
:root[data-custom-theme][data-theme='dark'] .ex-star[aria-pressed='true'] svg {
  fill: var(--theme-accent);
  stroke: var(--theme-accent);
}
:root[data-custom-theme][data-theme='dark'] .progression-volume-button.is-premium-upsell,
:root[data-custom-theme][data-theme='dark'] .progression-volume-button.is-app-only-feature,
:root[data-custom-theme][data-theme='dark'] .progression-favorite-button.is-premium-upsell,
:root[data-custom-theme][data-theme='dark'] .progression-favorite-button.is-app-only-feature {
  color: var(--theme-accent);
}
:root[data-custom-theme][data-theme='dark'] .volume-control-overlay {
  background: rgba(0, 0, 0, 0.34);
}
:root[data-custom-theme][data-theme='dark'] .volume-control-popover {
  border-color: rgba(var(--theme-line-rgb), 0.14);
  background: rgba(var(--theme-control-rgb), 0.98);
}
:root[data-custom-theme][data-theme='dark'] .volume-control-close {
  border-color: rgba(var(--theme-line-rgb), 0.16);
  background: rgba(var(--theme-control-rgb), 0.94);
  color: var(--ink);
}
:root[data-custom-theme] .triad-fret-dot .scale-dot:not(.is-playback-active),
:root[data-custom-theme] .triad-fret-dot.is-root .scale-dot:not(.is-playback-active) {
  stroke: none;
}
:root[data-custom-theme] .triad-card .diagram-dot {
  fill: var(--triad-shape-color);
}
:root[data-custom-theme] .triad-card .diagram-state-open {
  color: var(--triad-shape-color);
}
:root[data-custom-theme] .triad-card-show-toggle {
  border: 1px solid rgba(var(--theme-line-rgb), 0.2);
  background: rgba(var(--theme-card-rgb), 0.72);
  color: var(--theme-text);
}
:root[data-custom-theme] .triad-card-show-toggle.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--theme-text);
}
:root[data-custom-theme] .triad-card-show-toggle:focus-visible {
  outline: 2px solid rgba(var(--theme-line-rgb), 0.58);
}
:root[data-custom-theme][data-theme='dark'] .triad-card-show-toggle {
  border-color: rgba(var(--theme-line-rgb), 0.2);
  background: rgba(var(--theme-control-rgb), 0.94);
  color: var(--theme-text);
}
:root[data-custom-theme][data-theme='dark'] .triad-card-show-toggle.is-active {
  border-color: var(--theme-accent);
  background: var(--theme-accent);
  color: var(--theme-on-accent);
}
:root[data-custom-theme][data-theme='dark'] .triad-card .diagram-dot {
  fill: var(--triad-shape-color);
}
:root[data-custom-theme][data-theme='dark'] .triad-card .diagram-state-open {
  color: var(--triad-shape-color);
}
:root[data-custom-theme][data-theme='dark'] .triad-fret-dot-shape-0 .scale-dot {
  fill: var(--theme-blue);
}
:root[data-custom-theme][data-theme='dark'] .triad-fret-dot-shape-1 .scale-dot {
  fill: var(--theme-green);
}
:root[data-custom-theme][data-theme='dark'] .triad-fret-dot-shape-2 .scale-dot {
  fill: var(--theme-accent);
}
:root[data-custom-theme] .main-view-theme-switch,
:root[data-custom-theme] .main-view-theme-switch.is-premium-upsell {
  border: 1px solid rgba(var(--theme-line-rgb), 0.18);
  background: var(--theme-control);
  color: var(--theme-muted);
}
:root[data-custom-theme] .main-view-theme-switch-thumb {
  border: 1px solid rgba(var(--theme-line-rgb), 0.42);
  background: var(--theme-control);
}
:root[data-custom-theme] .main-view-theme-switch.is-dark-mode,
:root[data-custom-theme] .main-view-theme-switch.is-dark-mode.is-premium-upsell,
:root[data-custom-theme][data-theme='dark'] .main-view-theme-switch,
:root[data-custom-theme][data-theme='dark'] .main-view-theme-switch.is-premium-upsell {
  border-color: rgba(var(--theme-line-rgb), 0.22);
  background: var(--theme-control);
  color: var(--theme-text);
}
:root[data-custom-theme] .main-view-theme-switch.is-dark-mode .main-view-theme-switch-thumb {
  border-color: rgba(var(--theme-line-rgb), 0.78);
  background: var(--theme-card);
}
:root[data-custom-theme] .main-view-theme-switch:hover,
:root[data-custom-theme] .main-view-theme-switch:focus-visible,
:root[data-custom-theme][data-theme='dark'] .main-view-theme-switch:hover,
:root[data-custom-theme][data-theme='dark'] .main-view-theme-switch:focus-visible {
  border-color: rgba(var(--theme-accent-rgb), 0.38);
  background: var(--theme-control);
}
:root[data-custom-theme] .main-view-theme-switch.is-dark-mode:hover,
:root[data-custom-theme] .main-view-theme-switch.is-dark-mode:focus-visible,
:root[data-custom-theme][data-theme='dark'] .main-view-theme-switch.is-dark-mode:hover,
:root[data-custom-theme][data-theme='dark'] .main-view-theme-switch.is-dark-mode:focus-visible {
  border-color: rgba(var(--theme-accent-rgb), 0.42);
  background: var(--theme-control);
}
:root[data-custom-theme].is-native-app,
:root[data-custom-theme].is-native-app body {
  background: var(--panel-bg);
}
:root[data-custom-theme].is-native-app :is(.control-deck, .progression-panel) {
  background: var(--panel-bg);
  border-color: transparent;
}
:root[data-custom-theme] .videos-link-body {
  background: radial-gradient(circle at 50% -8rem, rgba(var(--theme-card-rgb), 0.84), transparent 28rem),
    radial-gradient(circle at 82% 18%, rgba(var(--theme-accent-rgb), 0.16), transparent 24rem),
    var(--theme-card);
}
:root[data-custom-theme] .videos-link-back {
  border: 1px solid rgba(var(--theme-line-rgb), 0.14);
  color: var(--accent-deep);
  background: rgba(var(--theme-card-rgb), 0.86);
}
:root[data-custom-theme] .videos-link-back svg {
  fill: none;
  stroke: currentColor;
}
:root[data-custom-theme] .videos-link-back:hover,
:root[data-custom-theme] .videos-link-back:focus-visible,
:root[data-custom-theme] .videos-link-home:hover,
:root[data-custom-theme] .videos-link-home:focus-visible {
  color: var(--accent);
}
:root[data-custom-theme] .videos-link-card {
  border: 1px solid rgba(var(--theme-line-rgb), 0.14);
  background: linear-gradient(145deg, rgba(var(--theme-card-rgb), 0.96), rgba(var(--theme-control-rgb), 0.93));
}
:root[data-custom-theme] .videos-link-card::before {
  background: linear-gradient(135deg, transparent 0 44%, rgba(var(--theme-accent-rgb), 0.07) 44% 46%, transparent 46% 100%) 0 0 / 86px 86px,
    linear-gradient(45deg, transparent 0 44%, rgba(var(--theme-accent-rgb), 0.05) 44% 46%, transparent 46% 100%) 0 0 / 86px 86px;
}
:root[data-custom-theme] .videos-link-card::after {
  background: rgba(var(--theme-accent-rgb), 0.12);
}
:root[data-custom-theme] .videos-link-profile-mark {
  border: 1px solid rgba(var(--theme-line-rgb), 0.14);
  background: var(--theme-card);
}
:root[data-custom-theme] .videos-link-eyebrow {
  color: var(--accent);
}
:root[data-custom-theme] .videos-link-intro h1 {
  color: var(--theme-text);
}
:root[data-custom-theme] .videos-link-intro > p:not(.videos-link-eyebrow) {
  color: var(--theme-text);
}
:root[data-custom-theme] .social-store-downloads > p {
  color: var(--theme-text);
}
:root[data-custom-theme] .videos-link-button {
  border: 1px solid rgba(var(--theme-line-rgb), 0.2);
  color: var(--theme-text);
  background: rgba(var(--theme-card-rgb), 0.96);
}
:root[data-custom-theme] .videos-link-button:visited {
  color: var(--theme-text);
}
:root[data-custom-theme] .videos-link-provider-icon {
  border: 1px solid rgba(var(--theme-line-rgb), 0.12);
  background: var(--theme-card);
}
:root[data-custom-theme] .videos-link-provider-icon-tiktok svg {
  fill: var(--theme-text);
}
:root[data-custom-theme] .videos-link-button-copy small {
  color: var(--theme-text);
}
:root[data-custom-theme] .videos-link-arrow {
  fill: none;
  stroke: var(--theme-muted);
}
:root[data-custom-theme] .videos-link-button:hover,
:root[data-custom-theme] .videos-link-button:focus-visible {
  border-color: var(--videos-link-provider-color);
  color: var(--theme-text);
}
:root[data-custom-theme] .videos-link-button:focus-visible {
  outline: 3px solid rgba(var(--theme-accent-rgb), 0.25);
}
:root[data-custom-theme] .videos-link-home {
  color: var(--theme-muted);
}
:root[data-custom-theme] .progression-restore-button {
  border: 1px solid var(--panel-border);
  background: var(--surface-card);
  color: var(--ink);
}
:root[data-custom-theme] .progression-premium-mark {
  color: var(--accent-deep);
}
:root[data-custom-theme] .progression-overview-row {
  border: 1px solid var(--panel-border);
  background: var(--surface-card-muted);
  color: var(--ink);
}
:root[data-custom-theme] .progression-overview-row.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}
:root[data-custom-theme] .progression-overview-row:focus-visible,
:root[data-custom-theme] .progression-restore-button:focus-visible {
  outline: 2px solid var(--theme-accent);
}
:root[data-custom-theme] .long-progression-update-pro-note {
  color: var(--muted);
}
:root[data-custom-theme] .progression-length-picker {
  color: var(--muted);
}
:root[data-custom-theme] .progression-length-picker .chord-picker-label {
  color: inherit;
}
:root[data-custom-theme] .keyboard-dropdown-focus .progression-length-picker:focus-within .chord-picker-chevron {
  outline: 2px solid var(--ink);
}
:root[data-custom-theme] .scale-highlight-toggle {
  border: 0;
  background: transparent;
  color: var(--theme-text);
}
:root[data-custom-theme] .scale-highlight-toggle svg {
  fill: none;
  stroke: currentColor;
}
:root[data-custom-theme] .scale-highlight-toggle circle {
  stroke: none;
}
:root[data-custom-theme] .scale-highlight-toggle .scale-palette-green {
  fill: var(--theme-green);
}
:root[data-custom-theme] .scale-highlight-toggle .scale-palette-orange {
  fill: var(--theme-accent);
}
:root[data-custom-theme] .scale-highlight-toggle .scale-palette-purple {
  fill: var(--theme-purple);
}
:root[data-custom-theme] .scale-highlight-toggle:focus-visible {
  outline: 2px solid currentColor;
}
:root[data-custom-theme] .scale-highlight-menu {
  border: 1px solid var(--theme-line);
  background: var(--theme-card);
  color: var(--theme-text);
}
:root[data-custom-theme] .scale-highlight-menu:focus {
  outline: none;
}
:root[data-custom-theme] .scale-highlight-menu-title > span {
  color: var(--theme-purple);
}
:root[data-custom-theme] .scale-highlight-option {
  border: 0;
  background: transparent;
  color: inherit;
}
:root[data-custom-theme] .scale-highlight-option[aria-checked='true'] {
  background: var(--theme-control);
}
:root[data-custom-theme] .scale-highlight-option:focus-visible {
  outline: 2px solid var(--theme-purple);
}
:root[data-custom-theme] .scale-highlight-swatch-root {
  background: var(--theme-red);
}
:root[data-custom-theme] .scale-highlight-swatch-third {
  background: var(--theme-green);
}
:root[data-custom-theme] .scale-highlight-swatch-fifth {
  background: var(--theme-accent);
}
:root[data-custom-theme] .scale-highlight-swatch-modal {
  background: var(--theme-purple);
}
:root[data-custom-theme] .scale-highlight-menu-note {
  color: var(--theme-muted);
}
:root[data-custom-theme] .scale-highlight-option-detail {
  color: var(--theme-muted);
}
:root[data-custom-theme][data-theme='dark'] .scale-highlight-toggle {
  color: var(--theme-text);
}
:root[data-custom-theme][data-theme='dark'] .scale-highlight-toggle .scale-palette-green {
  fill: var(--theme-green);
}
:root[data-custom-theme][data-theme='dark'] .scale-highlight-toggle .scale-palette-orange {
  fill: var(--theme-accent);
}
:root[data-custom-theme][data-theme='dark'] .scale-highlight-toggle .scale-palette-purple {
  fill: var(--theme-purple);
}
:root[data-custom-theme][data-theme='dark'] .scale-highlight-menu {
  background: var(--theme-control);
  color: var(--theme-text);
  border-color: var(--theme-line);
}
:root[data-custom-theme][data-theme='dark'] .scale-highlight-option[aria-checked='true'] {
  background: var(--theme-control);
}
:root[data-custom-theme][data-theme='dark'] .scale-highlight-option:focus-visible {
  outline-color: var(--theme-purple);
}
:root[data-custom-theme][data-theme='dark'] .scale-highlight-menu-title > span {
  color: var(--theme-purple);
}
:root[data-custom-theme][data-theme='dark'] .scale-highlight-menu-note,
:root[data-custom-theme][data-theme='dark'] .scale-highlight-option-detail {
  color: var(--theme-text);
}
:root[data-custom-theme][data-theme='dark'] .scale-highlight-swatch-root {
  background: var(--theme-red);
}
:root[data-custom-theme][data-theme='dark'] .scale-highlight-swatch-third {
  background: var(--theme-green);
}
:root[data-custom-theme][data-theme='dark'] .scale-highlight-swatch-fifth {
  background: var(--theme-accent);
}
:root[data-custom-theme][data-theme='dark'] .scale-highlight-swatch-modal {
  background: var(--theme-purple);
}
:root[data-custom-theme] .practice-tools-update-content > h2 {
  color: var(--ink);
}
:root[data-custom-theme] .practice-tools-update-list h3 {
  color: var(--ink);
}
:root[data-custom-theme] .practice-tools-update-list p {
  color: var(--muted);
}
:root[data-custom-theme] .seo-voicing-figure {
  border: 1px solid var(--landing-border-soft);
  background: var(--landing-card-surface);
}
:root[data-custom-theme] .seo-voicing-figure figcaption span {
  color: var(--muted);
}
:root[data-custom-theme] .seo-style-intro {
  color: var(--muted);
}
:root[data-custom-theme] .lifetime-reminder {
  border: 1px solid var(--color-border, var(--theme-line));
  background: rgba(var(--theme-accent-rgb), 0.09);
}
:root[data-custom-theme] .has-billing-reminder .app-info-link-title::after {
  color: var(--theme-accent);
}
:root[data-custom-theme] [data-chord-appearance] .is-chord-highlighted {
  fill: var(--chord-tone-color);
}
:root[data-custom-theme] .diagram-chord-open-dot {
  fill: none;
  stroke: var(--theme-text);
}
:root[data-custom-theme][data-theme='dark'] .diagram-chord-open-dot {
  stroke: var(--theme-text);
}
:root[data-custom-theme] [data-chord-appearance]:not([data-chord-labels='fingers']) .diagram-chord-open-dot {
  fill: var(--theme-text);
  stroke: none;
}
:root[data-custom-theme][data-theme='dark'] [data-chord-appearance]:not([data-chord-labels='fingers']) .diagram-chord-open-dot {
  fill: var(--theme-text);
}
:root[data-custom-theme][data-theme='dark'] [data-chord-appearance] .diagram-chord-open-dot.is-chord-highlighted,
:root[data-custom-theme] [data-chord-appearance] .diagram-chord-open-dot.is-chord-highlighted {
  fill: var(--chord-tone-color);
  stroke: none;
}
:root[data-custom-theme] .scale-highlight-toggle.chord-options-toggle circle {
  fill: none;
  stroke: currentColor;
}
:root[data-custom-theme] .chord-options-toggle:focus-visible {
  outline: 2px solid currentColor;
}
:root[data-custom-theme] .chord-appearance-heading > button {
  border: 0;
  background: transparent;
  color: inherit;
}
:root[data-custom-theme] .chord-appearance-choices > button {
  border: 1px solid var(--theme-line);
  background: transparent;
  color: inherit;
}
:root[data-custom-theme] .chord-appearance-choices > button[aria-checked='true'] {
  background: var(--theme-control);
  border-color: var(--theme-purple);
}
:root[data-custom-theme] .chord-appearance-menu button:focus-visible {
  outline: 2px solid var(--theme-purple);
}
:root[data-custom-theme] .chord-appearance-hint {
  color: var(--theme-muted);
}
:root[data-custom-theme] .chord-appearance-share {
  border: 0;
  border-top: 1px solid var(--theme-line);
  background: transparent;
  color: inherit;
}
:root[data-custom-theme] .chord-appearance-share svg {
  fill: none;
  stroke: currentColor;
}
:root[data-custom-theme][data-theme='dark'] .chord-appearance-choices > button {
  border-color: var(--theme-line);
}
:root[data-custom-theme][data-theme='dark'] .chord-appearance-choices > button[aria-checked='true'] {
  background: var(--theme-control);
  border-color: var(--theme-purple);
}
:root[data-custom-theme][data-theme='dark'] .chord-appearance-menu button:focus-visible {
  outline-color: var(--theme-purple);
}
:root[data-custom-theme][data-theme='dark'] .chord-appearance-hint {
  color: var(--theme-text);
}
:root[data-custom-theme] .scale-highlight-dialog,
:root[data-custom-theme] .chord-appearance-dialog,
:root[data-custom-theme] .triad-appearance-dialog {
  border: 0;
  background: transparent;
  color: inherit;
}
:root[data-custom-theme] .scale-highlight-dialog::backdrop,
:root[data-custom-theme] .chord-appearance-dialog::backdrop,
:root[data-custom-theme] .triad-appearance-dialog::backdrop {
  background: rgba(24, 17, 12, .18);
}
:root[data-custom-theme] .triad-card [data-triad-appearance] .diagram-chord-open-dot {
  fill: var(--triad-shape-color);
}
:root[data-custom-theme] .triad-card [data-triad-appearance] .diagram-chord-open-dot:not(.is-playback-active) {
  stroke: none;
}
:root[data-custom-theme] .triad-card [data-triad-appearance] .diagram-barre {
  stroke: var(--triad-shape-color);
}
:root[data-custom-theme] .onboarding-plan-card {
  border: 1px solid var(--panel-border);
  background: var(--surface-card);
}
:root[data-custom-theme] .onboarding-plan-pill {
  background: linear-gradient(120deg, var(--theme-control), var(--theme-control));
  color: var(--theme-text);
}
:root[data-custom-theme] .onboarding-plan-pill-pro {
  background: linear-gradient(120deg, var(--theme-accent), var(--theme-accent));
}
:root[data-custom-theme] .onboarding-account-note {
  color: var(--muted);
}
:root[data-custom-theme] .onboarding-plan-subtitle {
  color: var(--muted);
}
:root[data-custom-theme] .onboarding-plan-features li {
  color: var(--muted);
}
:root[data-custom-theme] .onboarding-plan-check {
  background: linear-gradient(120deg, var(--theme-control), var(--theme-control));
}
:root[data-custom-theme] .onboarding-plan-check::after {
  border-bottom: 2px solid white;
  border-left: 2px solid white;
}
:root[data-custom-theme] .onboarding-plan-next {
  color: var(--muted);
}
:root[data-custom-theme] .chord-outline-update-sheet {
  outline: none;
}
:root[data-custom-theme] .chord-outline-update-copy > h2 {
  color: var(--ink);
}
:root[data-custom-theme] #chord-outline-update-overlay .onboarding-next-button {
  border: 0;
}
:root[data-custom-theme] #chord-outline-update-overlay:not(.is-keyboard-navigation) .onboarding-next-button {
  outline: none;
}
:root[data-custom-theme] #chord-outline-update-overlay.is-keyboard-navigation .onboarding-next-button:focus {
  outline: 3px solid rgba(var(--theme-accent-rgb), 0.6);
}
:root[data-custom-theme] .drum-controls-toggle {
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  color: var(--ink);
}
:root[data-custom-theme] .drum-controls-toggle[aria-expanded='true'] {
  background: var(--panel-bg);
  border-color: var(--ink);
}
:root[data-custom-theme] .drum-controls-toggle:focus-visible,
:root[data-custom-theme] .drum-controls-panel :focus-visible {
  outline: 2px solid var(--accent);
}
:root[data-custom-theme] .drum-controls-panel {
  border: 1px solid var(--panel-border);
  background: linear-gradient(145deg, var(--surface-card), var(--surface-card-muted));
  color: var(--ink);
}
:root[data-custom-theme] .drum-controls-panel.is-floating {
  background-color: var(--panel-bg);
}
:root[data-custom-theme] .drum-panel-heading {
  border-bottom: 1px solid var(--panel-border);
}
:root[data-custom-theme] .drum-panel-heading > [data-drum-close] {
  border: 0;
  background: transparent;
  color: var(--muted);
}
:root[data-custom-theme] .drum-volume-controls {
  border-bottom: 1px solid var(--panel-border);
}
:root[data-custom-theme] .drum-volume-value {
  color: var(--muted);
}
:root[data-custom-theme] .drum-volume-slider {
  background: transparent;
}
:root[data-custom-theme] .drum-volume-slider::-webkit-slider-runnable-track {
  background: var(--drum-slider-blue);
}
:root[data-custom-theme] .drum-volume-slider::-webkit-slider-thumb {
  border: 2px solid var(--drum-slider-blue);
  background: var(--theme-card);
}
:root[data-custom-theme] .drum-volume-slider::-moz-range-track,
:root[data-custom-theme] .drum-volume-slider::-moz-range-progress {
  background: var(--drum-slider-blue);
}
:root[data-custom-theme] .drum-volume-slider::-moz-range-thumb {
  border: 2px solid var(--drum-slider-blue);
  background: var(--theme-card);
}
:root[data-custom-theme][data-theme='dark'] .drum-volume-slider::-webkit-slider-thumb {
  background: var(--theme-card);
}
:root[data-custom-theme][data-theme='dark'] .drum-volume-slider::-moz-range-thumb {
  background: var(--theme-card);
}
:root[data-custom-theme] .drum-parts-section {
  border-top: 1px solid var(--panel-border);
}
:root[data-custom-theme] .drum-controls-panel .drum-reset {
  border: 1px solid var(--panel-border);
  background: transparent;
  color: var(--muted);
}
:root[data-custom-theme] .drum-controls-panel .drum-reset:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--theme-text);
}
:root[data-custom-theme][data-theme='dark'] .drum-controls-panel .drum-reset:not(:disabled) {
  color: var(--theme-text);
}
:root[data-custom-theme] .drum-panel-select select {
  border: 1px solid var(--panel-border);
  background: var(--surface-card);
  color: var(--ink);
}
:root[data-custom-theme] .drum-controls-panel select:focus,
:root[data-custom-theme] .drum-controls-panel select:focus-visible {
  outline: none;
}
:root[data-custom-theme] .keyboard-dropdown-focus #groove-select:focus,
:root[data-custom-theme] .keyboard-dropdown-focus .drum-controls-panel select:focus {
  outline: 2px solid var(--ink);
}
:root[data-custom-theme] .drum-panel-description {
  color: var(--muted);
}
:root[data-custom-theme] .drum-activity-row {
  border: 0;
}
:root[data-custom-theme] .drum-activity-options label > span:not(.sr-only) {
  border: 1px solid var(--panel-border);
  background: var(--surface-card);
  color: var(--muted);
}
:root[data-custom-theme] .drum-activity-options input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--theme-text);
}
:root[data-custom-theme][data-theme='dark'] .drum-activity-options input:checked + span {
  color: var(--theme-text);
}
:root[data-custom-theme] .drum-activity-options input:focus-visible + span {
  outline: 2px solid var(--accent);
}
:root[data-custom-theme] .drum-activity-key {
  color: var(--muted);
}
:root[data-custom-theme] .drum-panel-status {
  color: var(--muted);
}
:root[data-custom-theme] #strum-pattern-summary .chord-picker-chevron {
  border: 0;
  background: none;
}
:root[data-custom-theme] #strum-pattern-summary .chord-picker-chevron::before {
  border: 1px solid rgba(var(--theme-line-rgb), 0.425);
  background: var(--theme-card);
}
:root[data-custom-theme][data-theme='dark'] #strum-pattern-summary .chord-picker-chevron {
  color: var(--ink);
}
:root[data-custom-theme][data-theme='dark'] #strum-pattern-summary .chord-picker-chevron::before {
  border-color: rgba(var(--theme-line-rgb), 0.13);
  background: rgba(var(--theme-control-rgb), 0.9);
}
:root[data-custom-theme] .keyboard-dropdown-focus #strum-pattern-summary:focus-within {
  outline: 2px solid var(--ink);
}
:root[data-custom-theme] .feature-update-sheet {
  outline: none;
}
:root[data-custom-theme] .feature-update-copy h2 {
  color: var(--ink);
}
:root[data-custom-theme] .feature-update-copy p {
  color: var(--muted);
}
:root[data-custom-theme] .feature-update-image img {
  outline: none;
}
:root[data-custom-theme] .feature-update-callout {
  color: var(--muted);
}
:root[data-custom-theme] .feature-update-arrow {
  border: 1px solid var(--panel-border);
  background: transparent;
  color: var(--ink);
}
:root[data-custom-theme] .feature-update-arrow svg {
  fill: none;
  stroke: currentColor;
}
:root[data-custom-theme] .feature-update-dot {
  border: 0;
  background: transparent;
}
:root[data-custom-theme] .feature-update-dot span {
  background: var(--muted);
}
:root[data-custom-theme] .feature-update-dot[aria-current="true"] span {
  background: var(--theme-accent);
}
:root[data-custom-theme] .feature-update-offer {
  color: var(--muted);
}
:root[data-custom-theme] .feature-update-offer button {
  border: 0;
  background: transparent;
  color: var(--ink);
}
:root[data-custom-theme] #feature-update-overlay .onboarding-next-button {
  border: 0;
}
:root[data-custom-theme] #feature-update-overlay:not(.is-keyboard-navigation) button {
  outline: none;
}
:root[data-custom-theme] #feature-update-overlay.is-keyboard-navigation button:focus {
  outline: 3px solid rgba(var(--theme-accent-rgb), 0.7);
}
:root[data-custom-theme] body:not(.is-native-app) .feature-update-overlay {
  background: rgba(21, 15, 10, 0.38);
}
:root[data-custom-theme] .feature-update-counter {
  color: var(--muted);
}
:root[data-custom-theme] .feature-update-skip {
  border: 0;
  color: var(--muted);
  background: transparent;
}
:root[data-custom-theme] .feature-update-primary svg {
  fill: none;
  stroke: currentColor;
}
:root[data-custom-theme] .theme-shortcut-button {
  border: 1px solid var(--panel-border);
  background: var(--surface-card);
}
:root[data-custom-theme] .theme-shortcut-button > svg {
  fill: none;
  stroke: currentColor;
}
:root[data-custom-theme] .theme-shortcut-button > svg circle {
  fill: currentColor;
  stroke: none;
}
:root[data-custom-theme] .settings-row-appearance {
  color: var(--ink);
  background: transparent;
}
:root[data-custom-theme] .settings-row-appearance > [data-current-theme] {
  color: var(--muted);
}
:root[data-custom-theme] .theme-picker {
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  color: var(--ink);
}
:root[data-custom-theme] .theme-picker::backdrop {
  background: rgba(0,0,0,.6);
}
:root[data-custom-theme] .theme-picker-heading button {
  border: 0;
  background: var(--surface-card);
  color: var(--ink);
}
:root[data-custom-theme] #theme-picker-description {
  color: var(--muted);
}
:root[data-custom-theme] .theme-choices {
  border: 0;
}
:root[data-custom-theme] .theme-choice {
  border: 1px solid var(--panel-border);
  background: var(--surface-card);
  color: var(--ink);
}
:root[data-custom-theme] .theme-choice.is-selected,
:root[data-custom-theme] .theme-choice:focus-within {
  border-color: var(--accent);
}
:root[data-custom-theme] .theme-pro {
  color: var(--muted);
}
:root[data-custom-theme] .theme-choice-description {
  color: var(--muted);
}
:root[data-custom-theme] .theme-palette {
  background: var(--page-bg);
}
:root[data-custom-theme] .theme-palette > .theme-palette-surface {
  background: var(--surface-card);
  border: 1px solid var(--theme-line);
}
:root[data-custom-theme] .theme-palette-accent {
  background: var(--theme-accent);
}
:root[data-custom-theme] .theme-palette-action {
  background: var(--theme-action);
}
:root[data-custom-theme] .theme-palette-tempo {
  background: var(--theme-tempo);
}
:root[data-custom-theme] .theme-palette-playback {
  background: var(--theme-playback);
}
:root[data-custom-theme] .theme-picker-actions button {
  border: 1px solid var(--theme-line);
  background: var(--surface-card);
  color: var(--ink);
}
:root[data-custom-theme] .theme-picker-actions .theme-picker-apply {
  border-color: var(--theme-action);
  background: var(--theme-action);
  color: var(--theme-on-action);
}
:root[data-custom-theme][data-color-theme] :is(select, .mode-dropdown-trigger, .ex-picker-value) {
  border-color: var(--picker-border-color);
}
:root[data-custom-theme][data-color-theme] .beat-dot.active {
  background: var(--theme-playback);
}
:root[data-custom-theme][data-color-theme] .metro-beat.is-current {
  background: var(--theme-playback);
  color: var(--theme-on-playback);
  outline-color: var(--theme-playback);
}
:root[data-custom-theme][data-color-theme] :is(.chord-card.playing, .chord-card.preview-playing, .key-chord-card.preview-playing) {
  border-color: var(--theme-playback);
}
:root[data-custom-theme][data-color-theme]:not([data-color-theme='classic-light']) :is(.triad-fret-dot .scale-dot.is-playback-active, .triad-card [data-diagram-string].is-playback-active, .scale-dot.is-practice-active) {
  stroke: var(--theme-playback);
}
:root[data-custom-theme][data-color-theme]:not([data-color-theme='classic-light']) :is(.arp-tab-note, .ex-tab-event).is-active .arp-tab-number-bg {
  fill: var(--theme-playback);
}
:root[data-custom-theme][data-color-theme]:not([data-color-theme='classic-light']) :is(.arp-tab-note, .ex-tab-event).is-active .arp-tab-number {
  fill: var(--theme-on-playback);
}
:root[data-custom-theme][data-color-theme]:not([data-color-theme='classic-light']) :is(.arp-tab-note.is-active .arp-tab-column, .ex-tab-event.is-active .ex-event-hit) {
  fill: var(--theme-playback);
}
:root[data-custom-theme][data-color-theme]:not([data-color-theme='classic-light']) .ex-playhead {
  background: var(--theme-playback);
}
:root[data-custom-theme][data-color-theme] :is(#tempo-slider, #onboarding-demo-tempo-slider, #triad-tempo-slider, #arp-tempo-slider, #ex-tempo-slider, [data-metro-tempo-slider])::-webkit-slider-runnable-track {
  background: var(--theme-tempo);
}
:root[data-custom-theme][data-color-theme] :is(#tempo-slider, #onboarding-demo-tempo-slider, #triad-tempo-slider, #arp-tempo-slider, #ex-tempo-slider, [data-metro-tempo-slider])::-webkit-slider-thumb {
  background: var(--theme-tempo);
  border-color: var(--theme-tempo);
}
:root[data-custom-theme][data-color-theme] :is(#tempo-slider, #onboarding-demo-tempo-slider, #triad-tempo-slider, #arp-tempo-slider, #ex-tempo-slider, [data-metro-tempo-slider])::-moz-range-track {
  background: var(--theme-tempo);
}
:root[data-custom-theme][data-color-theme] :is(#tempo-slider, #onboarding-demo-tempo-slider, #triad-tempo-slider, #arp-tempo-slider, #ex-tempo-slider, [data-metro-tempo-slider])::-moz-range-progress {
  background: var(--theme-tempo);
}
:root[data-custom-theme][data-color-theme] :is(#tempo-slider, #onboarding-demo-tempo-slider, #triad-tempo-slider, #arp-tempo-slider, #ex-tempo-slider, [data-metro-tempo-slider])::-moz-range-thumb {
  background: var(--theme-tempo);
  border-color: var(--theme-tempo);
}
:root[data-custom-theme][data-color-theme] :is(#favorites-shortcut-button, #web-favorites-shortcut-button) path {
  fill: none;
  stroke: currentColor;
}
:root[data-custom-theme][data-color-theme]:not([data-color-theme='classic-light']) :is(.scale-chord-contour, .scale-chord-contour-halo, [data-scale-chord-overlay] .scale-chord-outside) {
  stroke: var(--theme-playback);
}
:root[data-custom-theme][data-color-theme]:not([data-color-theme='classic-light']) .arp-dot:focus-visible .scale-dot:not(.is-practice-active) {
  stroke: var(--theme-playback);
}
:root[data-custom-theme][data-color-theme] [data-metro-tempo-slider] {
  background: transparent;
}
:root[data-custom-theme][data-color-theme] [data-metro-tempo-slider]::-webkit-slider-thumb {
  border: 2px solid var(--theme-tempo);
}
:root[data-custom-theme][data-color-theme] [data-metro-tempo-slider]::-moz-range-thumb {
  border: 2px solid var(--theme-tempo);
}
:root[data-custom-theme][data-input-modality='pointer'] :focus,
:root[data-custom-theme][data-input-modality='pointer'] input:focus-visible + :is(span, .settings-switch-track) {
  outline: none !important;
}
:root[data-custom-theme] .harmony-picker-dialog {
  border: 0;
  background: transparent;
  color: var(--ink);
}
:root[data-custom-theme] .harmony-picker-dialog::backdrop {
  background: rgba(24, 17, 12, .32);
}
:root[data-custom-theme] .harmony-picker-panel {
  border: 1px solid var(--panel-border);
  background: var(--surface-card);
  color: var(--ink);
}
:root[data-custom-theme] .harmony-picker-header {
  border-bottom: 1px solid var(--panel-border);
}
:root[data-custom-theme] .harmony-picker-header h2 {
  color: var(--muted);
}
:root[data-custom-theme] .harmony-picker-panel button {
  border: 1px solid var(--panel-border);
  background: var(--surface-card-muted);
  color: var(--ink);
}
:root[data-custom-theme] .harmony-picker-panel button:focus-visible {
  outline: 2px solid var(--accent);
}
:root[data-custom-theme] .harmony-picker-panel button[aria-checked='true'],
:root[data-custom-theme] .harmony-picker-panel button[aria-pressed='true'] {
  background: var(--accent-soft);
  border-color: var(--accent);
}
:root[data-custom-theme] .harmony-picker-panel .harmony-picker-close {
  background: transparent;
  border-color: transparent;
}
:root[data-custom-theme] .harmony-picker-section-heading h3 {
  color: var(--muted);
}
:root[data-custom-theme] .harmony-picker-roots small {
  color: var(--muted);
}
:root[data-custom-theme] .harmony-picker-roots > button[aria-checked='true'] small {
  color: inherit;
}
:root[data-custom-theme] .harmony-picker-unavailable {
  color: var(--muted);
}
:root[data-custom-theme] .harmony-picker-footer {
  border-top: 1px solid var(--panel-border);
}
:root[data-custom-theme] .harmony-picker-footer p {
  color: var(--muted);
}
:root[data-custom-theme] .harmony-picker-footer [data-harmony-apply] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--theme-on-accent, var(--theme-text));
}
@media (hover: hover) {
:root[data-custom-theme] .harmony-picker-panel button:not(:disabled):hover {
  border-color: var(--accent);
}
}
:root[data-custom-theme] .chord-options-picker-panel .harmony-picker-header h2 {
  color: var(--ink);
}
:root[data-custom-theme] .chord-options-description {
  color: var(--muted);
}
:root[data-custom-theme] .chord-options-families small {
  color: var(--muted);
}
:root[data-custom-theme] .chord-options-qualities small {
  color: var(--muted);
}
:root[data-custom-theme] .chord-options-qualities button[aria-pressed='true'] small {
  color: inherit;
}
:root[data-custom-theme] .chord-options-picker-panel [data-options-apply] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--theme-on-accent, var(--theme-text));
}

:root[data-custom-theme] .display-shortcut-button-arpeggios svg {
  fill: none;
}
:root[data-custom-theme] .display-shortcut-button-arpeggios .arpeggio-note-stems {
  stroke: currentColor;
}
:root[data-custom-theme] .display-shortcut-button-arpeggios .arpeggio-note-heads {
  fill: currentColor;
  stroke: none;
}
:root[data-custom-theme]:not(.keyboard-dropdown-focus) .arp-field select:focus {
  outline: none;
}
:root[data-custom-theme] #arp-tempo {
  border: 0;
  border-bottom: 1px solid var(--panel-border);
  background: transparent;
  color: var(--ink);
}
:root[data-custom-theme] .arp-tempo-number > span {
  color: var(--muted);
}
:root[data-custom-theme] .arp-formula {
  color: var(--muted);
}
:root[data-custom-theme] .arp-fret-number,
:root[data-custom-theme] .arp-string-name {
  fill: var(--muted);
}
:root[data-custom-theme] .arp-note-label {
  fill: var(--theme-on-note);
}
:root[data-custom-theme][data-theme='dark'] .arp-dot:not(.arp-root) .arp-note-label {
  fill: var(--theme-on-note);
}
:root[data-custom-theme] .arp-note-hitbox {
  fill: transparent;
  stroke: none;
}
:root[data-custom-theme] .arp-dot {
  outline: none;
}
:root[data-custom-theme] .arp-dot .scale-dot-seventh {
  fill: var(--chord-tone-seventh);
}
:root[data-custom-theme] :is(#arpeggio-highlight-menu, #exercise-scale-appearance) .scale-highlight-swatch-seventh {
  background: var(--chord-tone-seventh);
}
:root[data-custom-theme] .arp-dot:focus-visible .scale-dot:not(.is-practice-active) {
  stroke: var(--theme-blue);
}
:root[data-custom-theme] .arp-caption {
  color: var(--muted);
}
:root[data-custom-theme] .arp-check {
  color: var(--ink);
}
:root[data-custom-theme] .arp-status {
  color: var(--muted);
}
:root[data-custom-theme] .arp-layout :is(button, input, select, summary, a):focus-visible {
  outline: 2px solid var(--accent);
}
:root[data-custom-theme] .arp-tab-panel {
  border-top: 1px solid var(--panel-border);
}
:root[data-custom-theme] .arp-tab-title {
  color: var(--ink);
}
:root[data-custom-theme] .arp-tab-chevron {
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
}
:root[data-custom-theme] .arp-tab-viewport:focus-visible {
  outline: 2px solid var(--theme-accent);
}
:root[data-custom-theme] .arp-tab-string {
  stroke: var(--muted);
}
:root[data-custom-theme] .arp-tab-string-name {
  fill: var(--muted);
}
:root[data-custom-theme] .arp-tab-number-bg {
  fill: var(--surface-card);
}
:root[data-custom-theme] .arp-tab-number {
  fill: var(--ink);
}
:root[data-custom-theme] .arp-tab-column {
  fill: var(--theme-accent);
}
:root[data-custom-theme] .arp-tab-note {
  outline: none;
}
:root[data-custom-theme] .arp-tab-hitbox {
  fill: transparent;
}
:root[data-custom-theme] .arp-tab-note:focus-visible .arp-tab-number-bg {
  stroke: var(--theme-accent);
}
:root[data-custom-theme] .arp-tab-note.is-active .arp-tab-number-bg {
  fill: var(--theme-accent);
}
:root[data-custom-theme] .arp-tab-note.is-active .arp-tab-number {
  fill: var(--theme-text);
}

:root[data-custom-theme] .ex-result-count {
  color: var(--muted);
}
:root[data-custom-theme] .ex-picker-value {
  border: 1px solid rgba(var(--theme-line-rgb), 0.22);
  background: rgba(var(--theme-card-rgb), 0.75) var(--picker-chevron-image) right var(--picker-chevron-inset,9px) center / var(--picker-chevron-width,12px) 8px no-repeat;
  color: var(--ink);
}
:root[data-custom-theme].keyboard-dropdown-focus :is(.ex-exercise-picker,.ex-key-picker):has(select:focus-visible:not([data-ex-committed])) .ex-picker-value {
  outline: 2px solid var(--accent);
}
:root[data-custom-theme][data-theme='dark'] .ex-picker-value {
  border-color: rgba(var(--theme-line-rgb), 0.13);
  background-color: rgba(var(--theme-control-rgb), 0.9);
}
:root[data-custom-theme]:not(.keyboard-dropdown-focus) #exercise-trainer-section select:focus {
  outline: none;
}
:root[data-custom-theme] #exercise-trainer-section .ex-layout select[data-ex-committed]:focus {
  outline: none;
}
:root[data-custom-theme]:not(.keyboard-dropdown-focus) #exercise-trainer-section .ex-filter-trigger:focus {
  outline: none;
}
:root[data-custom-theme] .ex-filter-panel .mode-dropdown-actions {
  border-top: 1px solid var(--panel-border);
}
:root[data-custom-theme] .ex-filter-panel .ex-filter-action {
  border: 1px solid var(--panel-border);
  background: var(--surface-card-muted);
  color: var(--ink);
}
:root[data-custom-theme] .ex-filter-panel .ex-filter-action-apply {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--theme-on-accent,var(--page-bg));
}
:root[data-custom-theme] .ex-filter-panel .ex-filter-action:disabled {
  border-color: var(--panel-border);
  background: var(--surface-card-muted);
  color: var(--muted);
}
:root[data-custom-theme] .ex-goal {
  color: var(--muted);
}
:root[data-custom-theme] .ex-creator-link {
  color: var(--accent);
}
:root[data-custom-theme] .ex-creator-link:hover {
  color: var(--accent-deep);
}
:root[data-custom-theme] .ex-creator-link:focus-visible {
  outline: 2px solid var(--accent);
}
:root[data-custom-theme] .ex-icon-button {
  background: transparent;
  border: 1px solid var(--panel-border);
  color: var(--ink);
}
:root[data-custom-theme] .ex-icon-button svg {
  fill: none;
  stroke: currentColor;
}
:root[data-custom-theme] .scale-highlight-toggle.ex-icon-button {
  color: var(--ink);
}
:root[data-custom-theme] .scale-highlight-toggle.ex-icon-button circle {
  fill: none;
  stroke: currentColor;
}
:root[data-custom-theme] .ex-icon-button:not(.ex-exercise-step):hover:not(:disabled) {
  background: var(--surface-card-muted);
  border-color: var(--muted);
}
@media (hover:hover) and (pointer:fine) {
:root[data-custom-theme] .ex-exercise-step:hover:not(:disabled) {
  background: var(--surface-card-muted);
  border-color: var(--muted);
}
}
:root[data-custom-theme] .ex-random.ex-icon-button {
  border-color: color-mix(in srgb,var(--accent) 34%,transparent);
  background: color-mix(in srgb,var(--accent) 6%,transparent);
  color: var(--accent);
}
:root[data-custom-theme] .ex-random.ex-icon-button:hover:not(:disabled) {
  border-color: color-mix(in srgb,var(--accent) 34%,transparent);
  background: color-mix(in srgb,var(--accent) 6%,transparent);
}
:root[data-custom-theme]:not(.keyboard-dropdown-focus) :is(.ex-discovery-actions button,.ex-exercise-step):focus {
  outline: none;
}
:root[data-custom-theme]:not(.keyboard-dropdown-focus) [data-ex-appearance]:focus {
  outline: none;
}
:root[data-custom-theme] .ex-playback {
  border-top: 1px solid var(--panel-border);
}
:root[data-custom-theme] .ex-play svg {
  fill: currentColor;
}
:root[data-custom-theme] #exercise-trainer-section .ex-bpm {
  background: transparent;
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid var(--panel-border);
}
:root[data-custom-theme] .ex-favorites.arp-check {
  color: var(--muted);
}
:root[data-custom-theme] .ex-stage-heading {
  color: var(--muted);
}
:root[data-custom-theme] .ex-scale-title {
  color: var(--ink);
}
:root[data-custom-theme] .ex-exercise-reference {
  color: var(--muted);
}
:root[data-custom-theme] #exercise-scale-appearance .scale-note-preview {
  background: currentColor;
}
:root[data-custom-theme] #exercise-scale-appearance .scale-highlight-segments {
  border: 1px solid var(--panel-border);
}
:root[data-custom-theme] .ex-string {
  fill: none;
}
:root[data-custom-theme] #exercise-trainer-section .ex-nut {
  stroke: var(--ink);
}
:root[data-custom-theme] .ex-tab-bend {
  fill: none;
  stroke: var(--ink);
}
:root[data-custom-theme] .ex-bend-label {
  fill: var(--ink);
  stroke: var(--surface-card);
}
:root[data-custom-theme] .ex-tab-title {
  fill: var(--ink);
}
:root[data-custom-theme] .ex-tab-viewport {
  border-top: 1px solid var(--panel-border);
}
:root[data-custom-theme] .ex-bar-line,
:root[data-custom-theme] .ex-rhythm-stem {
  stroke: var(--muted);
}
:root[data-custom-theme] .ex-measure,
:root[data-custom-theme] .ex-beat-label {
  fill: var(--muted);
}
:root[data-custom-theme] .ex-event-hit {
  fill: transparent;
  stroke: none;
}
:root[data-custom-theme] .ex-tab-event {
  outline: none;
}
:root[data-custom-theme] .ex-tab-event.is-active .ex-event-hit {
  fill: var(--theme-accent);
}
:root[data-custom-theme] [data-ex-tab-segment].is-current > .arp-tab-number-bg {
  fill: var(--theme-accent);
}
:root[data-custom-theme] [data-ex-tab-segment].is-current > .arp-tab-number {
  fill: white;
}
:root[data-custom-theme] .ex-tab-event:focus-visible .ex-event-hit {
  stroke: var(--theme-accent);
}
:root[data-custom-theme] .ex-rest {
  fill: var(--muted);
}
:root[data-custom-theme] .ex-articulation {
  fill: none;
  stroke: var(--ink);
}
:root[data-custom-theme] .ex-tab-tie {
  fill: none;
  stroke: var(--ink);
}
:root[data-custom-theme] .ex-technique {
  fill: var(--ink);
}
:root[data-custom-theme] .ex-playhead {
  background: var(--theme-accent);
}
:root[data-custom-theme] .ex-phrase-footer {
  color: var(--muted);
}
:root[data-custom-theme] .ex-search-dialog[data-ex-search-fallback][open] {
  background: rgba(var(--theme-panel-rgb), 0.18);
}
:root[data-custom-theme] .ex-search-panel {
  border: 1px solid var(--panel-border);
  background: var(--surface-card);
  color: var(--ink);
}
:root[data-custom-theme] .ex-search-panel input[type='search'] {
  border: 1px solid var(--panel-border);
  background: var(--surface-card-muted);
  color: var(--ink);
}
:root[data-custom-theme] .ex-search-field > .ex-search-icon {
  color: var(--muted);
  fill: none;
  stroke: currentColor;
}
:root[data-custom-theme] .ex-search-results button {
  border: 0;
  background: transparent;
  color: inherit;
}
:root[data-custom-theme] .ex-search-results button:hover {
  background: var(--surface-card-muted);
}
:root[data-custom-theme] .ex-search-results button[aria-current='true'] {
  background: var(--accent-soft);
}
:root[data-custom-theme] .ex-search-results button:focus-visible,
:root[data-custom-theme] .ex-search-panel button:focus-visible,
:root[data-custom-theme] .ex-search-panel input:focus-visible {
  outline: 2px solid var(--accent);
}
:root[data-custom-theme] .ex-search-check {
  color: var(--accent);
}
:root[data-custom-theme] .ex-search-results small {
  color: var(--muted);
}
:root[data-custom-theme] .ex-search-empty {
  color: var(--muted);
}
:root[data-custom-theme] .ex-layout :is(button,input,select,summary):focus-visible {
  outline: 2px solid var(--accent);
}
:root[data-custom-theme] .display-shortcut-button-exercises path {
  fill: none;
  stroke: currentColor;
}

:root[data-custom-theme] .tune-workspace {
  color: var(--ink);
}
:root[data-custom-theme] .tune-stage,
:root[data-custom-theme] .tune-controls {
  border: 1px solid var(--tune-line);
  background: var(--surface-card);
}
:root[data-custom-theme] .tune-stage {
  background: radial-gradient(ellipse at 50% 45%, var(--accent-soft), transparent 70%), var(--surface-card);
}
:root[data-custom-theme] .tune-eyebrow {
  color: var(--muted);
}
:root[data-custom-theme] .tune-input {
  color: var(--muted);
}
:root[data-custom-theme] .tune-input i {
  background: var(--tune-line);
}
:root[data-custom-theme] .tune-input i::before {
  background: var(--tune-good);
}
:root[data-custom-theme] .tune-note-line > sub {
  color: var(--muted);
}
:root[data-custom-theme] .tune-deviation {
  border-left: 1px solid var(--tune-line);
}
:root[data-custom-theme] .tune-deviation > span {
  color: var(--muted);
}
:root[data-custom-theme] .tune-gauge-labels,
:root[data-custom-theme] .tune-gauge-scale {
  color: var(--muted);
}
:root[data-custom-theme] .tune-zero {
  color: var(--tune-good);
}
:root[data-custom-theme] .tune-track {
  background: repeating-linear-gradient(90deg, var(--tune-line) 0 1px, transparent 1px 5%);
}
:root[data-custom-theme] .tune-track::after {
  background: var(--tune-line);
}
:root[data-custom-theme] .tune-tolerance {
  background: color-mix(in srgb, var(--tune-good) 14%, transparent);
}
:root[data-custom-theme] .tune-center {
  background: var(--tune-good);
}
:root[data-custom-theme] .tune-pointer {
  background: var(--accent);
}
:root[data-custom-theme] .tune-pointer::before {
  background: inherit;
}
:root[data-custom-theme] .tune-status {
  color: var(--ink);
}
:root[data-custom-theme] .tune-frequency {
  color: var(--muted);
}
:root[data-custom-theme] [data-tuner-state='in-tune'] .tune-note-line > span,
:root[data-custom-theme] [data-tuner-state='in-tune'] .tune-status,
:root[data-custom-theme] [data-tuner-state='in-tune'] .tune-deviation strong {
  color: var(--tune-good);
}
:root[data-custom-theme] [data-tuner-state='in-tune'] .tune-pointer {
  background: var(--tune-good);
}
:root[data-custom-theme] [data-tuner-state='error'] .tune-status {
  color: var(--accent);
}
:root[data-custom-theme] .tune-settings-row label,
:root[data-custom-theme] .tune-reference {
  color: var(--muted);
}
:root[data-custom-theme] #tuner-section select,
:root[data-custom-theme] #tuner-section input {
  color: var(--ink);
  background-color: var(--surface-card-muted);
  border: 1px solid var(--tune-line);
}
:root[data-custom-theme] #tuner-section :is(button, input, select):focus-visible {
  outline: 2px solid var(--accent);
}
:root[data-custom-theme] .tune-auto {
  border: 1px solid var(--tune-line);
  color: var(--muted);
  background: var(--surface-card-muted);
}
:root[data-custom-theme] .tune-auto[aria-pressed='true'] {
  color: var(--accent-deep);
  border-color: var(--accent);
  background: var(--accent-soft);
}
:root[data-custom-theme] .tune-string {
  border: 1px solid var(--tune-line);
  color: var(--ink);
  background: var(--surface-card-muted);
}
:root[data-custom-theme] .tune-string small {
  color: var(--muted);
}
:root[data-custom-theme] .tune-string[aria-pressed='true'] {
  border-color: var(--accent);
  background: var(--accent-soft);
}
:root[data-custom-theme] .tune-string.is-detected {
  outline: 2px solid var(--accent);
}
:root[data-custom-theme] [data-tuner-state='in-tune'] .tune-string.is-detected {
  outline-color: var(--tune-good);
  color: var(--tune-good);
}
:root[data-custom-theme] .tune-hint,
:root[data-custom-theme] .tune-privacy {
  color: var(--muted);
}
:root[data-custom-theme] .tune-listen {
  background: var(--ink);
  color: var(--page-bg);
  border: 1px solid var(--ink);
}
:root[data-custom-theme] .tune-tone {
  color: var(--ink);
  background: var(--surface-card-muted);
  border: 1px solid var(--tune-line);
}
:root[data-custom-theme] .tune-chromatic-hint {
  color: var(--muted);
}
:root[data-custom-theme] [data-tuner-state='holding'] .tune-status {
  color: var(--muted);
}
:root[data-custom-theme] .tune-reference-help summary {
  border: 1px solid var(--muted);
  color: var(--muted);
}
:root[data-custom-theme] .tune-reference-help summary:focus-visible {
  outline: 2px solid var(--accent);
}
:root[data-custom-theme] .tune-reference-help[open] summary {
  color: var(--accent-deep);
  border-color: var(--accent);
  background: var(--accent-soft);
}
:root[data-custom-theme] .tune-reference-explanation {
  border: 1px solid var(--tune-line);
  background: var(--page-bg);
  color: var(--ink);
}

:root[data-custom-theme] .metro-stage,
:root[data-custom-theme] .metro-card {
  border: 1px solid var(--metro-line);
  background: var(--surface-card);
}
:root[data-custom-theme] .metro-stage {
  background: radial-gradient(ellipse at 50% 25%, var(--accent-soft), transparent 65%), var(--surface-card);
}
:root[data-custom-theme] .metro-eyebrow {
  color: var(--muted);
}
:root[data-custom-theme] .metro-state {
  color: var(--metro-accent);
}
:root[data-custom-theme] .metro-state::before {
  border: 1px solid currentColor;
}
:root[data-custom-theme] .metro-is-playing .metro-state::before {
  background: currentColor;
}
:root[data-custom-theme] .metro-dial-face {
  fill: var(--surface-card);
  stroke: var(--metro-line);
}
:root[data-custom-theme] .metro-dial-marks {
  stroke: var(--muted);
}
:root[data-custom-theme] .metro-dial-major {
  stroke: var(--metro-accent);
}
:root[data-custom-theme] .metro-dial-track {
  stroke: var(--metro-line);
  fill: none;
}
:root[data-custom-theme] .metro-dial-orbit {
  fill: var(--metro-accent);
  stroke: var(--surface-card);
}
:root[data-custom-theme] #metro-tempo {
  color: var(--ink);
}
:root[data-custom-theme] .metro-pulse-unit {
  color: var(--muted);
}
:root[data-custom-theme] .metronome-view-section button:focus-visible,
:root[data-custom-theme] .metronome-view-section input:focus-visible,
:root[data-custom-theme] .metronome-view-section select:focus-visible {
  outline: 2px solid var(--accent);
}
:root[data-custom-theme] .metro-tempo-controls button,
:root[data-custom-theme] .metro-tap,
:root[data-custom-theme] .metro-reset-tempo,
:root[data-custom-theme] .metro-preset-save button {
  border: 1px solid var(--metro-line);
  background: var(--surface-card-muted);
  color: var(--ink);
}
:root[data-custom-theme] .metro-tap[aria-pressed='true'] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--metro-accent);
}
:root[data-custom-theme] .metronome-view-section input[type='range'] {
  background: transparent;
}
:root[data-custom-theme] .metro-beat {
  border: 1px solid var(--metro-line);
  background: var(--surface-card);
  color: var(--ink);
}
:root[data-custom-theme] .metro-beat small {
  color: var(--muted);
}
:root[data-custom-theme] .metro-beat[data-accent='2'] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--metro-accent);
}
:root[data-custom-theme] .metro-beat[data-accent='2'] small {
  color: var(--metro-accent);
}
:root[data-custom-theme] .metro-beat[data-accent='0'] {
  border-style: dashed;
  color: var(--muted);
}
:root[data-custom-theme] .metro-beat.is-current {
  outline: 2px solid var(--accent);
  background: var(--accent);
  color: var(--page-bg);
}
:root[data-custom-theme] .metro-beat.is-current small {
  color: inherit;
}
:root[data-custom-theme] .metro-hint {
  color: var(--muted);
}
:root[data-custom-theme] .metro-transport .metro-play {
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--page-bg);
}
:root[data-custom-theme] .metro-session {
  border-top: 1px solid var(--metro-line);
  color: var(--muted);
}
:root[data-custom-theme] .metro-status {
  border: 1px solid var(--metro-line);
  background: var(--surface-card);
  color: var(--muted);
}
:root[data-custom-theme] .metro-card h3 {
  color: var(--ink);
}
:root[data-custom-theme] .metro-card h4 {
  color: var(--ink);
}
:root[data-custom-theme] .metro-field {
  color: var(--muted);
}
:root[data-custom-theme] .metro-field input:not([type='range']),
:root[data-custom-theme] .metro-field select,
:root[data-custom-theme] .metro-preset-save input {
  border: 1px solid var(--metro-line);
  background: var(--surface-card-muted);
  color: var(--ink);
}
:root[data-custom-theme] .metro-field small,
:root[data-custom-theme] .metro-swing small {
  color: var(--muted);
}
:root[data-custom-theme] .metro-subdivision-field {
  border: 0;
}
:root[data-custom-theme] .metro-subdivision-field legend {
  color: var(--muted);
}
:root[data-custom-theme] .metro-subdivisions button {
  background: var(--surface-card-muted);
  border: 1px solid var(--metro-line);
  color: var(--ink);
}
:root[data-custom-theme] .metro-subdivisions button[aria-pressed='true'] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--metro-accent);
}
:root[data-custom-theme] .metro-swing {
  color: var(--muted);
}
:root[data-custom-theme] .metro-card-heading .metro-text-button {
  border: 1px solid var(--metro-line);
  background: transparent;
  color: var(--muted);
}
:root[data-custom-theme] .metro-text-button[aria-pressed='true'] {
  background: var(--accent-soft);
  color: var(--metro-accent);
  border-color: var(--accent);
}
:root[data-custom-theme] .metro-section-heading p {
  color: var(--muted);
}
:root[data-custom-theme] .metro-detail-content {
  border-top: 1px solid var(--metro-line);
}
:root[data-custom-theme] .metro-preset {
  border: 1px solid var(--metro-line);
}
:root[data-custom-theme] .metro-preset button {
  border: 0;
  background: transparent;
  color: var(--ink);
}
:root[data-custom-theme] .metro-preset small {
  color: var(--muted);
}
:root[data-custom-theme] .metro-footnote {
  color: var(--muted);
}
:root[data-custom-theme] .display-shortcut-button-metronome svg {
  fill: none;
  stroke: currentColor;
}
:root[data-custom-theme] .metronome-view-section.metro-pointer-input :is(input, select, button):focus {
  outline: none;
}
:root[data-custom-theme] .metro-preset.is-selected {
  border-color: var(--accent);
  outline: 1px solid var(--accent);
  background: var(--accent-soft);
}
:root[data-custom-theme] .metro-preset.is-selected strong {
  color: var(--metro-accent);
}
/* Authored semantic overrides, included in generated themes.css. */
.theme-picker-content { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 3px; padding-inline-end: 12px; margin-block: -3px; }
.theme-picker-content .theme-choices { overflow: visible; margin: 0; padding: 0; }
.theme-picker [hidden] { display: none; }
.theme-customize-button, .theme-editor-actions button { min-height: 44px; padding: 10px 12px; border: 1px solid var(--theme-line); border-radius: 10px; background: var(--surface-card); color: var(--ink); box-shadow: none; font: inherit; font-size: 13px; }
.theme-picker-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; padding: 12px 3px 3px; padding-inline-end: 12px; border-top: 1px solid var(--panel-border); }
.theme-picker-actions button, .theme-editor-actions button { min-width: 0; width: 100%; margin: 0; white-space: normal; overflow-wrap: anywhere; }
.theme-selection-actions { display: flex; gap: 8px; grid-column: 1 / -1; }
.theme-selection-actions button { flex: 1; }
.theme-editor { min-width: 0; padding: 0; margin: 0; border: 0; }
.theme-editor legend { font-weight: 700; font-size: 16px; }
.theme-editor p { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 8px 0 14px; }
.theme-color-field { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--panel-border); font-size: 14px; }
.theme-color-field > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.theme-color-field output { color: var(--muted); font: 12px ui-monospace, monospace; direction: ltr; unicode-bidi: isolate; }
.theme-color-field input[type='color'] { box-sizing: border-box; width: 48px; height: 44px; min-width: 48px; padding: 3px; border: 1px solid var(--theme-line); border-radius: 8px; background: var(--surface-card); cursor: pointer; }
.theme-editor-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.theme-name-field { display: grid; gap: 7px; margin: 14px 0 5px; font-size: 14px; }
.theme-name-field input { box-sizing: border-box; min-width: 0; width: 100%; min-height: 44px; padding: 10px; border: 1px solid var(--theme-line); border-radius: 8px; background: var(--surface-card); color: var(--ink); font: inherit; }
.theme-editor-actions [data-theme-delete] { grid-column: 1 / -1; }
.theme-library-heading { margin: 12px 2px 4px; color: var(--muted); font-size: 13px; font-weight: 700; }
.theme-library-notice { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.theme-picker button:disabled { opacity: .5; cursor: default; }
/* A filled accent contrasts with the inactive rings, including light palettes
   where the legacy active fill would be classified as another surface. */
:root[data-custom-theme][data-color-theme] .scale-shape-dot.is-active {
  background: var(--accent);
}
:root[data-custom-theme] body {
  background: radial-gradient(ellipse at 88% 0, var(--page-glow), transparent 32rem), var(--page-bg);
}
/* Shared Exercises and progression-scale menu sections need an opaque line
   to stay distinct from the menu surface in every custom palette. */
:root[data-custom-theme] :is(.scale-highlight-color-heading, .scale-chord-outlines-option) {
  border-top-color: var(--theme-line);
}
/* Dark legacy menu and selection fills map to the same control color. Keep
   the menu on the card surface so selected rows retain their subtle fill. */
:root[data-custom-theme][data-color-theme] .scale-highlight-menu {
  background: var(--theme-card);
}
:root[data-custom-theme][data-color-theme] :is(input:not([type='range']):not([type='checkbox']):not([type='radio']), select, textarea, .mode-dropdown-trigger, .ex-picker-value) {
  color: var(--ink);
  border-color: var(--picker-border-color);
}
:root[data-custom-theme] :is(input, textarea)::placeholder {
  color: var(--muted); opacity: 1;
}
:root[data-custom-theme] :is(button, input, select, textarea, a):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
:root[data-custom-theme] :is(.diagram-string, .diagram-fret, .diagram-nut, .scale-string, .scale-fret, .scale-nut) { stroke: var(--muted); }
:root[data-custom-theme] :is(.diagram-finger, .scale-interval-label, .arp-note-label) { fill: var(--theme-on-note); }
:root[data-custom-theme] :is(.diagram-basefret, .scale-fret-label) { fill: var(--ink); }
:root[data-custom-theme] :is(.diagram-dot, .scale-dot) { fill: var(--ink); }
:root[data-custom-theme] .scale-dot-root { fill: var(--chord-tone-root); }
:root[data-custom-theme] .scale-dot-third { fill: var(--chord-tone-third); }
:root[data-custom-theme] .scale-dot-fifth { fill: var(--chord-tone-fifth); }
:root[data-custom-theme] .scale-dot-blue-note { fill: var(--chord-tone-second); }
:root[data-custom-theme] .scale-dot-modal { fill: var(--chord-tone-seventh); }
:root[data-custom-theme] [data-chord-tone].is-chord-highlighted { fill: var(--chord-tone-color); }
:root[data-custom-theme] .diagram-chord-open-dot.is-chord-highlighted { fill: var(--chord-tone-color); }
/* Cards keep inversion colors in a custom property, while the fretboard's
   literal fills are translated by the generated color layer. Use the same
   palette roles for open strings, fretted notes and barres in the cards. */
:root[data-custom-theme] .triad-shape-0 { --triad-shape-color: var(--theme-blue); }
:root[data-custom-theme] .triad-shape-1 { --triad-shape-color: var(--theme-green); }
:root[data-custom-theme] .triad-shape-2 { --triad-shape-color: var(--theme-accent); }
:root[data-custom-theme] #tuner-section { --tune-good: var(--theme-green); --tune-line: var(--theme-line); }
:root[data-custom-theme] .drum-volume-slider { --drum-slider-blue: var(--accent); }
:root[data-custom-theme] .drum-volume-slider::-webkit-slider-thumb { background: var(--ink); }
:root[data-custom-theme] .drum-volume-slider::-moz-range-thumb { background: var(--ink); }
:root[data-custom-theme] .settings-switch input:checked + .settings-switch-track { background: var(--accent); }
:root[data-custom-theme] .settings-switch-thumb { background: var(--theme-on-accent); }
:root[data-custom-theme][data-color-theme] :is(.diagram-preview-button .diagram-preview-button-disc, .diagram-lock-button .diagram-lock-button-disc) { fill: var(--surface-card-muted); stroke: var(--theme-line); }
:root[data-custom-theme][data-color-theme] :is(.diagram-preview-button .diagram-preview-button-glyph, .diagram-lock-button .diagram-lock-button-glyph) { color: var(--ink); }
@media (forced-colors: active) {
  .theme-choice { border-color: CanvasText; }
  .theme-choice.is-selected { outline: 3px solid Highlight; }
}
/* Solid actions always pair their surface with its own foreground. */
:root[data-custom-theme][data-color-theme] :is(.transport-button, .metro-play, .mode-dropdown-button:not(.mode-dropdown-button-secondary), .favorite-dialog-confirm, .app-info-guide-button, .onboarding-next-button):not(:disabled) {
  background: var(--theme-action); color: var(--theme-on-action); border-color: var(--theme-action);
}
:root[data-custom-theme][data-color-theme] .transport-toggle[aria-pressed='true'] {
  background: var(--accent); color: var(--theme-on-accent); border-color: var(--accent);
}
/* Terminal shares one neon green; dark secondary fills retain action hierarchy. */
:root[data-custom-theme][data-color-theme='terminal'] #transport-button:not(:disabled) {
  background: var(--theme-playback); color: var(--theme-on-playback); border-color: var(--theme-playback);
}
:root[data-custom-theme][data-color-theme='terminal'] [data-transport-toggle][aria-pressed='true'] {
  background: var(--accent-soft); color: var(--theme-accent); border-color: var(--theme-accent);
  box-shadow: none;
}
:root[data-custom-theme][data-color-theme='terminal'] :is(#tempo-slider, #onboarding-demo-tempo-slider, #triad-tempo-slider, #arp-tempo-slider, #ex-tempo-slider, [data-metro-tempo-slider]) {
  accent-color: var(--theme-tempo);
}
:root[data-custom-theme][data-color-theme='terminal'] :is(.volume-slider, .drum-volume-slider, [data-metro-setting='volume']) {
  --drum-slider-blue: var(--theme-action); accent-color: var(--theme-action);
}
:root[data-custom-theme][data-color-theme='terminal'] :is(.volume-slider, .drum-volume-slider, [data-metro-setting='volume'])::-webkit-slider-runnable-track {
  background: var(--theme-action);
}
:root[data-custom-theme][data-color-theme='terminal'] :is(.volume-slider, .drum-volume-slider, [data-metro-setting='volume'])::-webkit-slider-thumb {
  background: var(--theme-action); border-color: var(--theme-action);
}
:root[data-custom-theme][data-color-theme='terminal'] :is(.volume-slider, .drum-volume-slider, [data-metro-setting='volume'])::-moz-range-track,
:root[data-custom-theme][data-color-theme='terminal'] :is(.volume-slider, .drum-volume-slider, [data-metro-setting='volume'])::-moz-range-progress {
  background: var(--theme-action);
}
:root[data-custom-theme][data-color-theme='terminal'] :is(.volume-slider, .drum-volume-slider, [data-metro-setting='volume'])::-moz-range-thumb {
  background: var(--theme-action); border-color: var(--theme-action);
}
/* This metronome control otherwise keeps the browser's native range geometry. */
:root[data-custom-theme][data-color-theme='terminal'] [data-metro-setting='volume'] {
  appearance: none; -webkit-appearance: none;
}
:root[data-custom-theme][data-color-theme='terminal'] [data-metro-setting='volume']::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
}
:root[data-custom-theme][data-color-theme='terminal'] [data-metro-setting='volume']::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border: 0; border-radius: 50%;
}
:root[data-custom-theme][data-color-theme='terminal'] [data-metro-setting='volume']::-moz-range-track,
:root[data-custom-theme][data-color-theme='terminal'] [data-metro-setting='volume']::-moz-range-progress {
  height: 4px; border-radius: 999px;
}
:root[data-custom-theme][data-color-theme='terminal'] [data-metro-setting='volume']::-moz-range-thumb {
  width: 18px; height: 18px; border: 0; border-radius: 50%;
}
:root[data-custom-theme][data-color-theme] .triad-card-show-toggle.is-active {
  background: var(--accent); color: var(--theme-on-accent); border-color: var(--accent);
}
:root[data-custom-theme][data-color-theme] .display-shortcut-button-view[aria-pressed='true'] {
  color: var(--theme-on-accent);
}
:root[data-custom-theme] #generate-button:not(:disabled) {
  background: var(--theme-action);
  color: var(--theme-on-action);
  border-color: var(--theme-action);
  box-shadow: 0 4px 15px rgba(var(--theme-action-rgb), 0.30), 0 1px 4px rgba(var(--theme-action-rgb), 0.18), inset 0 1px 0 rgba(255,255,255,0.18);
}
:root[data-custom-theme][data-color-theme] .chord-options-chip-group > label input:checked + span { background: var(--accent); color: var(--theme-on-accent); }
:root[data-custom-theme][data-color-theme] .chord-options-chip-group > label input:not(:checked) + span { background: var(--surface-card-muted); color: var(--ink); }
:root[data-custom-theme][data-color-theme] .scale-marker-label-button:not(.is-active) { background: var(--surface-card); color: var(--muted); }
/* Small chord badges need the same verified foreground/surface pairing as
   normal text; translucent accent fills lose contrast in Arctic. */
:root[data-custom-theme][data-color-theme] :is(.theory-chip, .voicing-chip) {
  background: var(--page-bg); color: var(--accent);
}
:root[data-custom-theme][data-color-theme] .scale-caged-button.is-active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent), inset 0 1px 3px rgba(0, 0, 0, 0.14);
}