/* This file adds the toggle in light mode. Every color override is dark-only. */
.dark-mode-control{display:flex;align-items:center;gap:8px;font-size:16px;white-space:nowrap;cursor:pointer}
.dark-mode-label-compact{display:none}
@media(max-width:640px){.dark-mode-label-full{display:none}.dark-mode-label-compact{display:inline}}
.waveform-backing{display:none}

html[data-theme=dark]{
 color-scheme:dark;--page:#101927;--ink:#fff;--muted:#c6c6c6;--line:#41536a;
 --general-section-thick-divider-color:#626262;
 --dark-practice-background:#1a1a1a;--svg-canvas:var(--dark-practice-background);
 --theme-heading:#c4cad2;--theme-raised:#101927;--theme-hover:#2a3d54;
 --theme-control-label:#edf1f7;--special-section-divider-color:#3771c8;
 --theme-button:#1c2939;--theme-button-border:#334154;--theme-button-ink:var(--theme-control-label);
 --theme-segment-background:#152030;--theme-segment-border:#334154;--theme-segment-text:var(--theme-control-label);
 --theme-segment-selected-background:#3771c8;--theme-segment-selected-text:#000;
 --theme-accent-background:#3771c8;--theme-accent-text:#000;
 --theme-choice-background:var(--theme-accent-background);--theme-choice-text:var(--theme-accent-text);
 --theme-primary-background:var(--theme-accent-background);--theme-primary-text:var(--theme-accent-text);
 --theme-selected-background:var(--theme-accent-background);--theme-selected-text:var(--theme-accent-text);
 --theme-switch-off-border:#41536a;--theme-switch-off-track:#101927;--theme-switch-off-thumb:#41536a;
 --theme-switch-on-track:#3771c8;--theme-switch-on-thumb:#101927;
 --svg-black:#fff;--svg-white:#000;--svg-outline:#c6c6c6;--svg-fill:#626262;--svg-medium:#a0a0a0;
}
html[data-theme=dark] .waveform-backing{display:inline;opacity:.25}
html[data-theme=dark] .waveform{overflow:visible}
/* The image's existing 0% / 50% / 0% fade becomes 0% / 25% / 0%. */
html[data-theme=dark] .spectrum-colors{opacity:.5}
html[data-theme=dark] :is(.practice-surface,.song-surface,.beat-toolbar,.song-beats,dialog,.popover){background:var(--page);border-color:var(--line)}
/* Empty-state surround only; the inset message keeps its existing surface. */
html[data-theme=dark] :is(.practice-surface[data-empty-routine=true],.song-surface[data-empty-song=true]){background:#202e40}
/* Dark Practice Backgrounds: change surfaces without changing ink or note colors. */
html[data-theme=dark] :is(.board-scroll,.board,.board svg,.song-board,.song-tab-container){background:var(--dark-practice-background);border-color:var(--line)}
/* Chord Progression, Interval List, Next Control, and Beat Marker rows share the canvas. */
html[data-theme=dark] :is(.progression-row,.progression-strip,.exercise-frame,.exercise-bar,.practice-footer,.beat-toolbar,.song-beats){background:var(--dark-practice-background)}
html[data-theme=dark] dialog::backdrop{background:rgb(0 0 0 / 65%)}
html[data-theme=dark] :is(dialog,.popover){color:white;box-shadow:0 20px 80px #0009}
html[data-theme=dark] :is(.board svg,.song-board svg,#song-tab-content svg,#song-vector-defs){fill:var(--svg-black)}
html[data-theme=dark] :is(.board-scroll,.song-tab-scroll,.selector-options,.practice-section-content,.number-picker-list,.preset-list,#practice-routine-list){scrollbar-color:#a0a0a0 var(--page)}
html[data-theme=dark] :is(.board-scroll,.song-tab-scroll){scrollbar-color:#a0a0a0 var(--dark-practice-background)}
html[data-theme=dark] :is(.number-picker-list,.preset-list,.import-dialog .import-confirmations,.progression-draft,.empty-message){background:var(--theme-raised);border-color:var(--line)}
/* Keep the existing thicker separators separate from the thin divider palette. */
html[data-theme=dark] .import-dialog .import-actions{border-top-color:var(--special-section-divider-color)}
html[data-theme=dark] .song-control-divider{border-left-color:var(--general-section-thick-divider-color)}
html[data-theme=dark] :is(input:not([type=checkbox]):not([type=range]),select,textarea){background:var(--page);color:white;border-color:var(--line)}
/* Popup name/file fields and progression containers share an inset surface.
   Main-page Name Fields retain their existing backgrounds. */
html[data-theme=dark] dialog :is(.preset-name,.setup-name-field input,input[type=file],#progression-current,.progression-draft){background:#1a1a1a}
html[data-theme=dark] input::placeholder{color:#a0a0a0}
html[data-theme=dark] :is(dialog p,.help-shapes ul,.page-footer,.context>span){color:var(--muted)}
html[data-theme=dark] :is(h1,.chord-heading,.practice-group-head,.practice-family-title,.dyad-section-head h3,.popover-head strong,.rounds-control,.setup-status,.routine-visibility label,.routine-build-controls label,.routine-duration-control,.dyad-scale-context,.practice-section-toggle,.practice-random-head,.song-summary,#song-title,.song-asset-link,.empty-message,.setups-panel h3,.help-sources a){color:var(--theme-heading);-webkit-text-fill-color:currentColor}
html[data-theme=dark] :is(#help-dialog h3,.help-table tbody th,#practice-guide-dialog h3,#chord-guide-dialog h3,#setup-info-dialog h3,#practice-guide-dialog .guide-context,#chord-guide-dialog .guide-context,#practice-guide-dialog summary,.selector-dialog .dialog-head h2){color:var(--theme-heading)}
html[data-theme=dark] :is(#chord-import-preview,#song-import-preview,#chord-import-notice,.import-missing-info,.rhythm-loading){color:white}
html[data-theme=dark] .help-table tbody tr:nth-child(even){background:var(--theme-raised)}
html[data-theme=dark] :is(.settings-row,.song-setup){border-block-color:var(--special-section-divider-color)}
html[data-theme=dark] :is(.quiet-button,.icon-button,.mobile-number,.setup-load-control,.routine-actions button){background:var(--theme-button);color:var(--theme-button-ink);border-color:var(--theme-button-border);-webkit-text-fill-color:currentColor}
html[data-theme=dark] dialog .icon-button{background:#101927}
html[data-theme=dark] .picker:not(#practice-button){background:var(--theme-button);color:var(--theme-button-ink);border-color:var(--theme-button-border)}
html[data-theme=dark] .picker:not(#practice-button) .label{color:inherit}
html[data-theme=dark] .preset-actions .primary:disabled{background:var(--theme-button);color:var(--theme-button-ink);border-color:var(--theme-button-border)}
html[data-theme=dark] #practice-routine-list .routine-actions button{color:var(--theme-button-ink);-webkit-text-fill-color:var(--theme-button-ink)}
/* Primary actions use blue; the musical Play/Stop controls retain green/red. */
html[data-theme=dark] .primary:where(:not(#song-play):not(#rhythm-start)){background:var(--theme-primary-background);border-color:transparent;color:var(--theme-primary-text);-webkit-text-fill-color:currentColor;box-shadow:none}
/* All segmented controls share one palette, including Mode and Frets Shown. */
html[data-theme=dark] .segmented{background:var(--theme-segment-background);border-color:var(--theme-segment-border);color:var(--theme-segment-text)}
html[data-theme=dark] .segmented button{background:transparent;border-color:transparent;color:var(--theme-segment-text);-webkit-text-fill-color:currentColor;box-shadow:none}
/* Transparent borders retain button geometry without a visible border. */
html[data-theme=dark] .segmented button[aria-pressed=true]{background:var(--theme-segment-selected-background);border-color:transparent;color:var(--theme-segment-selected-text);-webkit-text-fill-color:currentColor;box-shadow:none}
/* Boxed choices and stateful selections share blue, without visible borders. */
html[data-theme=dark] :is(.key-option,.builder-buttons button,button.draft-chord,#practice-panel .practice-choice){background:var(--theme-choice-background);color:var(--theme-choice-text);border-color:transparent;-webkit-text-fill-color:currentColor;box-shadow:none}
html[data-theme=dark] :is(.number-picker-option,.preset-list-item){background:var(--navy);color:white;border-color:white;-webkit-text-fill-color:white}
/* Unselected Stateful Buttons share the Neutral Button palette. */
html[data-theme=dark] :is(#keys-random:not([aria-pressed=true]),.number-picker-none:not([aria-pressed=true]),#settings-button:not([aria-expanded=true]),#rhythm-settings-button:not([aria-expanded=true]),#practice-panel .dialog-head .fretboard-notes-toggle:not([aria-pressed=true])){background:var(--theme-button);color:var(--theme-button-ink);border-color:var(--theme-button-border);-webkit-text-fill-color:currentColor;box-shadow:none}
html[data-theme=dark] :is(.number-picker-option:not([aria-selected=true]),.preset-list-item:not([aria-pressed=true]),.number-picker-none:not([aria-pressed=true])){background:#1a1a1a}
html[data-theme=dark] :is(.number-picker-option:not([aria-selected=true]),.preset-list-item:not([aria-pressed=true]),.number-picker-none:not([aria-pressed=true])){color:#edf1f7;-webkit-text-fill-color:currentColor}
html[data-theme=dark] :is(.key-option[aria-pressed=true],.key-option:has(input:checked),.builder-buttons button[aria-pressed=true],button.draft-chord[aria-pressed=true],.number-picker-option[aria-selected=true],.preset-list-item[aria-pressed=true],#keys-random[aria-pressed=true],.number-picker-none[aria-pressed=true],#settings-button[aria-expanded=true],#rhythm-settings-button[aria-expanded=true],#practice-panel .dialog-head .fretboard-notes-toggle[aria-pressed=true]){background:var(--theme-selected-background);color:var(--theme-selected-text);border-color:transparent;-webkit-text-fill-color:currentColor;box-shadow:none}
html[data-theme=dark] #practice-panel .practice-choice:disabled{background:#262626;color:#a0a0a0;border-color:#626262;-webkit-text-fill-color:#a0a0a0}
html[data-theme=dark] .routine-build-controls.notes-mode label{color:#a0a0a0}
html[data-theme=dark] #practice-routine-list{border-color:color-mix(in srgb,var(--line) 75%,transparent);background:var(--navy);background-clip:padding-box}
html[data-theme=dark] #practice-routine-list li[data-routine-selected=true]{background:var(--theme-selected-background);color:var(--theme-selected-text);-webkit-text-fill-color:currentColor}
html[data-theme=dark] #progression-chord-preview{background:var(--page);color:white;border:4px solid #9bb8e4;padding:2px 6px;box-shadow:none}
html[data-theme=dark] .import-dialog input[type=file]::file-selector-button{background:var(--theme-button);color:var(--theme-button-ink);border-color:var(--theme-button-border)}
html[data-theme=dark] .practice-countdown{color:var(--theme-button-ink)}
html[data-theme=dark] .practice-countdown:disabled{color:var(--theme-button-ink)}
/* Note-related controls retain their existing palette. */
/* One 4 px border, with no halo, retains the previous outer footprint.
   Keep the reserved native border so content and responsive sizing do not move. */
html[data-theme=dark] #practice-button{position:relative;background:#9bb8e4;color:#17191f;border-color:transparent;box-shadow:none}
html[data-theme=dark] #practice-button::after{content:"";position:absolute;inset:-5px;border:4px solid #3771c8;border-radius:10px;pointer-events:none}
html[data-theme=dark] #practice-button .label{color:#646772}
html[data-theme=dark] #practice-button[aria-expanded=true]{background:#9bb8e4}
/* One 4 px note-colored border, with no halo, keeps the shared outer footprint.
   Draw it over the same area without changing chip dimensions or balanced rows. */
html[data-theme=dark] .song-reference-chip{--root-color:var(--song-color);--root-light:var(--song-light);border-radius:8px}
html[data-theme=dark] :is(.targets li:not(.done),.key-note,.song-reference-chip,#exercise-bar .practice-info-button,#exercise-bar .mic-feedback-marker){position:relative;border-color:transparent;box-shadow:none}
html[data-theme=dark] .targets li:not(.done){border-width:2px}
html[data-theme=dark] :is(.targets li:not(.done),.key-note,.song-reference-chip,#exercise-bar .practice-info-button,#exercise-bar .mic-feedback-marker)::after{content:"";position:absolute;inset:-5px;border:4px solid var(--root-color,var(--navy));border-radius:11px;pointer-events:none}
html[data-theme=dark] :is(.key-note,.targets li,#exercise-bar .practice-info-button,.song-reference-chip){color:black}
/* Completed tiles keep the colored state's outer footprint with a 2px white border. */
html[data-theme=dark] #exercise-bar .targets li.done,html[data-theme=dark] #exercise-bar .targets:not(.mic-off) li:not(.current){border:2px solid transparent;background:var(--dark-practice-background);color:white;box-shadow:none}
html[data-theme=dark] #exercise-bar .targets li.done::after,html[data-theme=dark] #exercise-bar .targets:not(.mic-off) li:not(.current)::after{content:"";position:absolute;inset:-5px;border:2px solid white;border-radius:11px;pointer-events:none}
html[data-theme=dark] #exercise-bar .mic-feedback-marker:not(.has-note){--root-color:#626262!important;--root-light:#c6c6c6!important;--root-halo:#a0a0a0!important}
html[data-theme=dark] .chord-chip{box-shadow:0 0 0 3px var(--dark-practice-background)}
html[data-theme=dark] .song-chord-frame-light{display:none}
html[data-theme=dark] .song-chord-frame-dark{display:inline}
/* Direction Badge shares light-mode geometry and weight, with dark-mode colors. */
html[data-theme=dark] #exercise-bar .route-info{background:var(--dark-practice-background);border-color:#3771c8;color:#3771c8;box-shadow:none}
html[data-theme=dark] #exercise-bar .route-info[data-direction=down]{background:#3771c8;border-color:transparent;color:black}
html[data-theme=dark] .rhythm-toggle{box-shadow:0 0 0 3px rgb(33 120 33 / 50%)}
/* Only deselected Play Along merges its 2 px border and 3 px halo. */
html[data-theme=dark] .rhythm-toggle:not([aria-pressed=true]){position:relative;background:#afafaf;border-color:transparent;box-shadow:none}
html[data-theme=dark] .rhythm-toggle:not([aria-pressed=true])::after{content:"";position:absolute;inset:-5px;border:5px solid var(--play-green);border-radius:10px;pointer-events:none}
html[data-theme=dark] .beat-marker{background:var(--dark-practice-background);box-shadow:inset 0 0 0 1px white}
html[data-theme=dark] .beat-marker.active{background:#9bb8e4;border:0;box-shadow:none}
html[data-theme=dark] .song-playhead{background:rgb(255 255 255 / 22%);mix-blend-mode:normal}
/* Neutral actions retain a neutral hover; stateful choices use navy/white hovers. */
@media(any-hover:hover) and (any-pointer:fine){
 html[data-theme=dark]:not(.touch-input) .rhythm-toggle:not([aria-pressed=true]):hover:where(:enabled){background:#e2eee2}
 html[data-theme=dark]:not(.touch-input) .segmented button:not([aria-pressed=true]):hover:where(:enabled){background:var(--theme-hover);border-color:transparent}
 html[data-theme=dark]:not(.touch-input) :is(.quiet-button,.icon-button,.mobile-number,.setup-load-control,.routine-actions button,.practice-section-toggle):hover:where(:enabled){background:var(--theme-hover)}
 html[data-theme=dark]:not(.touch-input) .picker:not(#practice-button):hover:where(:enabled){background:var(--theme-hover)}
 html[data-theme=dark]:not(.touch-input) :is(.key-option,.builder-buttons button,button.draft-chord,#practice-panel .practice-choice):hover:where(:enabled){background:color-mix(in srgb,var(--theme-choice-background) 85%,white);border-color:transparent}
 html[data-theme=dark]:not(.touch-input) :is(.number-picker-option:not([aria-selected=true]),.preset-list-item:not([aria-pressed=true])):hover:where(:enabled){background:var(--navy-hover);border-color:white}
 html[data-theme=dark]:not(.touch-input) :is(#keys-random:not([aria-pressed=true]),.number-picker-none:not([aria-pressed=true]),#settings-button:not([aria-expanded=true]),#rhythm-settings-button:not([aria-expanded=true]),#practice-panel .dialog-head .fretboard-notes-toggle:not([aria-pressed=true])):hover:where(:enabled){background:var(--theme-hover);border-color:var(--theme-button-border)}
 html[data-theme=dark]:not(.touch-input) :is(.number-picker-option[aria-selected=true],.preset-list-item[aria-pressed=true]):hover:where(:enabled){background:var(--theme-selected-background);border-color:transparent}
 html[data-theme=dark]:not(.touch-input) :is(.preset-list-item+.preset-list-item,.number-picker-option+.number-picker-option):hover:where(:enabled){border-top-color:var(--line)}
 html[data-theme=dark]:not(.touch-input) :is(#keys-random[aria-pressed=true],.number-picker-none[aria-pressed=true],#settings-button[aria-expanded=true],#rhythm-settings-button[aria-expanded=true],#practice-panel .dialog-head .fretboard-notes-toggle[aria-pressed=true]):hover:where(:enabled){background:color-mix(in srgb,var(--theme-selected-background) 85%,white);border-color:transparent}
 html[data-theme=dark]:not(.touch-input) .primary:where(:not(#song-play):not(#rhythm-start)):hover:where(:enabled){background:color-mix(in srgb,var(--theme-primary-background) 85%,white);border-color:transparent}
 html[data-theme=dark]:not(.touch-input) .chord-chip.active:hover:where(:enabled){background:var(--dark-practice-background);border-color:white}
 html[data-theme=dark]:not(.touch-input) #practice-button:hover:where(:enabled){background:#e3e8ef}
 html[data-theme=dark]:not(.touch-input) .import-dialog input[type=file]:where(:enabled)::file-selector-button:hover{background:var(--theme-hover)}
}
/* Protected chord chips keep their original neutral lettering as well as colors. */
html[data-theme=dark] .chord-chip:not(.active){color:#17191f}
html[data-theme=dark] .chord-chip small{color:#646772}
html[data-theme=dark] .chord-chip.active small{color:white}
html[data-theme=dark] .progression-row .chord-chip small{color:inherit}
html[data-theme=dark] .mic-button:not([aria-pressed=true]){background:#152030;color:white;border-color:var(--theme-switch-off-border)}
html[data-theme=dark] #help-button{background:var(--page)}
html[data-theme=dark] .rhythm-settings:not(.song-audio-settings){border-block-color:var(--special-section-divider-color)}
html[data-theme=dark] .rhythm-settings input[type=range]{accent-color:var(--theme-accent-background)}
/* The remaining volume track matches the thumb center in both browser engines. */
html[data-theme=dark] .rhythm-settings input[type=range]{--volume-neutral:#626262;appearance:none;-webkit-appearance:none;background:transparent}
html[data-theme=dark] .rhythm-settings input[type=range]::-webkit-slider-runnable-track{height:6px;border:0;border-radius:3px;background:linear-gradient(to right,#3771c8 0 var(--volume-fill,0%),var(--volume-neutral) var(--volume-fill,0%) 100%)}
html[data-theme=dark] .rhythm-settings input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;box-sizing:border-box;width:16px;height:16px;margin-top:-5px;border:4px solid #3771c8;border-radius:50%;background:var(--volume-neutral)}
html[data-theme=dark] .rhythm-settings input[type=range]::-moz-range-track{height:6px;border:0;border-radius:3px;background:var(--volume-neutral)}
html[data-theme=dark] .rhythm-settings input[type=range]::-moz-range-progress{height:6px;border-radius:3px;background:#3771c8}
html[data-theme=dark] .rhythm-settings input[type=range]::-moz-range-thumb{box-sizing:border-box;width:16px;height:16px;border:4px solid #3771c8;border-radius:50%;background:var(--volume-neutral)}
html[data-theme=dark] :is(.song-summary,#song-title){color:white}
html[data-theme=dark] .song-tempo :is(input,.mobile-number){color:white;-webkit-text-fill-color:currentColor}
html[data-theme=dark] .dyad-sequence-table label{background:var(--page)}
@media(any-hover:hover) and (any-pointer:fine){
 html[data-theme=dark]:not(.touch-input) .mic-button:not([aria-pressed=true]):hover:where(:enabled){background:#2a3d54}
 html[data-theme=dark]:not(.touch-input) #help-button:hover:where(:enabled){background:var(--theme-hover)}
}

/* Current Chord Chip is monochrome; upcoming chips keep their note colors. */
html[data-theme=dark] .chord-chip.active{background:var(--dark-practice-background);color:white;border:2px solid white;border-radius:0;box-shadow:none;-webkit-text-fill-color:currentColor}
html[data-theme=dark] .chord-chip.active small{color:inherit}

/* List row separators share the surface palette, including selected rows. */
html[data-theme=dark] :is(.preset-list-item+.preset-list-item,.number-picker-option+.number-picker-option){border-top-color:var(--line)}

/* Titles group: every popup title and the four practice section headings. */
html[data-theme=dark] :is(dialog h2,.popover-head strong,#practice-panel .practice-section-toggle){color:white;-webkit-text-fill-color:currentColor}
/* Routine editing actions keep their exact light-mode palette and geometry. */
html[data-theme=dark] #practice-routine-list .routine-actions button{background:white;border-color:#d5d6dd;color:#17191f;-webkit-text-fill-color:currentColor}
/* Practice additions and unselected Fretboard Notes share the Neutral palette.
   Selected Fretboard Notes uses the shared accent with its reserved 1 px border. */
html[data-theme=dark] #practice-panel :is(.practice-choice:not(.fretboard-notes-toggle),.practice-choice:not(.fretboard-notes-toggle):disabled,.dialog-head .fretboard-notes-toggle[aria-pressed=false]){background:var(--theme-button);border:1px solid var(--theme-button-border);color:var(--theme-button-ink);-webkit-text-fill-color:currentColor;box-shadow:none}
html[data-theme=dark] #practice-panel #routine-fretboard-notes[aria-pressed=true]{background:#3771c8;border:1px solid transparent;color:black;-webkit-text-fill-color:currentColor;box-shadow:none}
/* Key and Chord Choices and read-only imported chips share the same palette. */
html[data-theme=dark] :is(#keys-panel .key-option:not(:has(input:checked)),#progression-dialog .builder-buttons button:not([aria-pressed=true]),#progression-dialog button.draft-chord:not([aria-pressed=true]),#chord-import-dialog .chord-import-chip,#setup-info-progression .chord-import-chip){background:#101927;border:1px solid #9bb8e4;color:white;-webkit-text-fill-color:currentColor;box-shadow:none}
/* Draw the extra border inward by reducing padding equally on each side. */
html[data-theme=dark] :is(#progression-dialog button.draft-chord[aria-pressed],#chord-import-dialog .chord-import-chip,#setup-info-progression .chord-import-chip){border-width:2px;padding:7px 13px}
@media(any-hover:hover) and (any-pointer:fine){
 html[data-theme=dark]:not(.touch-input) #practice-routine-list .routine-actions button:hover:where(:enabled){background:#e3e8ef}
 html[data-theme=dark]:not(.touch-input) #practice-panel :is(.practice-choice:not(.fretboard-notes-toggle),.dialog-head .fretboard-notes-toggle[aria-pressed=false]):hover:where(:enabled){background:var(--theme-hover);border-color:var(--theme-button-border);color:var(--theme-button-ink);-webkit-text-fill-color:currentColor}
 html[data-theme=dark]:not(.touch-input) #keys-panel .key-option:not(:has(input:checked)):hover{background:var(--theme-hover)}
 html[data-theme=dark]:not(.touch-input) :is(#progression-dialog .builder-buttons button:not([aria-pressed=true]),#progression-dialog button.draft-chord:not([aria-pressed=true])):hover:where(:enabled){background:var(--theme-hover);border-color:#9bb8e4;color:white;-webkit-text-fill-color:currentColor}
}

/* Control Labels share the Neutral Button and inactive Segment text color. */
html[data-theme=dark] :is(label:has(:is(.setting-switch,.mobile-number,select,input[type=number],input[type=range])),.view-control>span,.segmented-setting>span,.dyad-scale-context>span,.import-field-label,.label:where(:not(#practice-button .label))){color:var(--theme-control-label);-webkit-text-fill-color:currentColor}

/* Toggle Switch: the background is its track; the moving circle is its thumb. */
html[data-theme=dark] input[type=checkbox].setting-switch{background:var(--theme-switch-off-track);border-color:var(--theme-switch-off-border)}
html[data-theme=dark] input[type=checkbox].setting-switch::before{background:var(--theme-switch-off-thumb)}
html[data-theme=dark] input[type=checkbox].setting-switch:checked{background:var(--theme-switch-on-track);border-color:transparent}
html[data-theme=dark] input[type=checkbox].setting-switch:checked::before{background:var(--theme-switch-on-thumb)}
/* Preserve the existing system-color handling in high-contrast environments. */
@media(forced-colors:active){
 html[data-theme=dark] input[type=checkbox].setting-switch{background:Canvas;border-color:ButtonText}
 html[data-theme=dark] input[type=checkbox].setting-switch::before{background:ButtonText}
 html[data-theme=dark] input[type=checkbox].setting-switch:checked{background:Highlight;border-color:Highlight}
 html[data-theme=dark] input[type=checkbox].setting-switch:checked::before{background:HighlightText}
}

html[data-theme=dark] .triad-shapes-control>span{color:var(--theme-control-label);-webkit-text-fill-color:currentColor}

/* Routine shape settings use the same practice-choice and selected colors. */
html[data-theme=dark] #guide-practice-type-buttons button{background:var(--theme-button);border:1px solid var(--theme-button-border);color:var(--theme-button-ink);-webkit-text-fill-color:currentColor}
html[data-theme=dark] :is(#guide-shape-practice,#guide-shape-all,#guide-practice-type-buttons button)[aria-pressed=true]{background:var(--theme-selected-background);border-color:transparent;color:var(--theme-selected-text);-webkit-text-fill-color:currentColor}
@media(any-hover:hover) and (any-pointer:fine){
 html[data-theme=dark]:not(.touch-input) #guide-practice-type-buttons button:not([aria-pressed=true]):hover{background:var(--theme-hover)}
}

html[data-theme=dark] #guide-practice-type-buttons button[data-has-shapes=true]:not([aria-pressed=true]){border-color:var(--theme-selected-background);box-shadow:inset 0 0 0 2px var(--theme-selected-background)}

html[data-theme=dark] .warning-action{color:var(--theme-control-label);-webkit-text-fill-color:currentColor}

html[data-theme=dark] .segmented.chord-selector-child{background:var(--dark-practice-background)}

/* The progression gear keeps the Foundations action surface with blue outlines. */
html[data-theme=dark] #progression-info-button{background:var(--page);border-color:#3771c8;color:#3771c8;-webkit-text-fill-color:currentColor}
@media(any-hover:hover) and (any-pointer:fine){html[data-theme=dark]:not(.touch-input) #progression-info-button:hover:where(:enabled){background:var(--theme-hover)}}