/* Anthem color themes. Loaded last so palettes remain consistent across every module. */
:root{
 --theme-page:#f3eee4;--theme-surface:#fff;--theme-soft:#f7f1e5;--theme-soft-2:#f1ebdf;
 --theme-ink:#0d1f3c;--theme-text:#314451;--theme-muted:#5c6470;--theme-border:#d8d0c1;--theme-border-strong:#a99f8e;
 --theme-accent:#e85d1a;--theme-accent-deep:#c54a12;--theme-nav:#0d1f3c;--theme-nav-active:#1a3150;
 color-scheme:light;
}

html[data-theme=soft]{
 --theme-page:#edf0ee;--theme-surface:#fbfcfb;--theme-soft:#f1f4f2;--theme-soft-2:#e4e9e6;
 --theme-ink:#263f4a;--theme-text:#40545b;--theme-muted:#68777b;--theme-border:#c9d1ce;--theme-border-strong:#98a5a2;
 --theme-accent:#527a88;--theme-accent-deep:#3e616d;--theme-nav:#263f4a;--theme-nav-active:#365764;
}
html[data-theme^=dark]{
 --theme-page:#151a1d;--theme-surface:#20272b;--theme-soft:#282f33;--theme-soft-2:#1b2226;
 --theme-ink:#edf2f1;--theme-text:#d0d8d7;--theme-muted:#a9b4b3;--theme-border:#465156;--theme-border-strong:#6a767b;
 --theme-accent:#67b8b0;--theme-accent-deep:#85d4cc;--theme-nav:#0d1418;--theme-nav-active:#26343b;
 color-scheme:dark;
}
html[data-theme=dark-rose]{--theme-accent:#c9828d;--theme-accent-deep:#e0a1aa}
html[data-theme=dark-sage]{--theme-accent:#91b89a;--theme-accent-deep:#b6d3bc}
body,.app-shell,.more-view{background:var(--theme-page);color:var(--theme-text)}
.brand .brand-sub{color:var(--theme-accent)}
.header-right #portal{background:var(--theme-accent);color:var(--theme-on-accent)}
header,.chords-content,.objective-tabs,.more-card,.chord-card,.practice-exercise-body,.music-measure,.tuning-panel,.workspace aside{background:var(--theme-surface)}
.chords-hero,.bottom-nav,.practice-exercise>summary,.measure-heading,.more-overview{background:var(--theme-nav);color:#fff}
.bottom-nav .nav-item.active{background:var(--theme-nav-active)}
.instrument-tabs{background:var(--theme-nav)}
.instrument-tabs button{background:var(--theme-nav-active)}
.instrument-tabs button[aria-pressed=true],.chord-selector button[aria-selected=true],.practice-instructions>summary{background:var(--theme-accent);border-color:var(--theme-accent)}
.chords-kicker,.more-overview p,.lesson-summary p,.practice-transition p,.practice-instructions summary small,.progression-summary p,.count-row b,.beat-count-grid b{color:var(--theme-accent-deep)}
.chord-card-heading h2,.chords-intro h2,.practice-transition h2,.more-card>summary,.preview-chord,.lesson-summary h3{color:var(--theme-ink)}
.chord-card,.strum-callout,.practice-drawers,.progression-body,.practice-instructions-body,.uke-path-tabs,.chord-selector button{background:var(--theme-soft)}
.practice-drawers,.uke-path-tabs{background:var(--theme-soft-2)}
.chord-card,.strum-callout,.more-card,.practice-instructions-body,.music-measure,.chord-selector button,.objective-tabs button{border-color:var(--theme-border)}
.chord-card>p,.lesson-expanded ul,.practice-instructions-body,.exercise-copy,.more-card>div,.more-feedback{color:var(--theme-text)}
.fretboard{fill:var(--theme-soft)}.fret{stroke:var(--theme-border)}.string-line,.nut{stroke:var(--theme-ink);fill:var(--theme-ink)}.open{stroke:var(--theme-ink);fill:var(--theme-surface)}.finger,.barre{fill:var(--theme-ink)}
html[data-theme^=dark] header{border-color:var(--theme-border)}
html[data-theme^=dark] .brand,html[data-theme^=dark] .edition,html[data-theme^=dark] h1,html[data-theme^=dark] h2,html[data-theme^=dark] h3,html[data-theme^=dark] strong{color:var(--theme-ink)}
html[data-theme^=dark] .chords-hero h1,html[data-theme^=dark] .chords-hero span,html[data-theme^=dark] .measure-heading .preview-chord,html[data-theme^=dark] .practice-exercise>summary strong,html[data-theme^=dark] .practice-exercise>summary small,html[data-theme^=dark] .more-overview h2,html[data-theme^=dark] .more-overview span{color:#f4f6f5}
html[data-theme^=dark] .objective-tabs button,html[data-theme^=dark] .uke-path-tabs button,html[data-theme^=dark] .chord-selector button{background:#30383c;color:#e7eceb}
html[data-theme^=dark] .objective-tabs button[aria-pressed=true]{background:var(--theme-nav);color:#fff}
html[data-theme^=dark] .practice-instructions .drawer-toggle,html[data-theme^=dark] .practice-exercise .drawer-toggle,html[data-theme^=dark] .lesson-summary:before{background:#eef2f1;color:#172126}
html[data-theme^=dark] .meter{filter:brightness(.82) saturate(.75)}
#pitch-trail{border-color:var(--theme-border);background:linear-gradient(to bottom,color-mix(in srgb,var(--theme-border) 54%,var(--theme-soft)) 0%,var(--theme-soft-2) 16%,var(--theme-surface) 32%,var(--theme-surface) 68%,var(--theme-soft-2) 84%,color-mix(in srgb,var(--theme-border) 54%,var(--theme-soft)) 100%)}
.theme-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:10px}.theme-picker button{display:grid;justify-items:center;gap:6px;min-height:72px;padding:9px 5px;border:2px solid var(--theme-border);border-radius:8px;background:var(--theme-soft);color:var(--theme-ink);font:800 11px/1.15 inherit}.theme-picker button[aria-pressed=true]{border-color:var(--theme-accent);box-shadow:inset 0 -3px var(--theme-accent)}.theme-picker i{display:block;width:34px;height:22px;border-radius:5px;background:linear-gradient(135deg,#0d1f3c 0 48%,#f3eee4 48% 73%,#e85d1a 73%)}.theme-picker [data-theme-choice=soft] i{background:linear-gradient(135deg,#263f4a 0 48%,#edf0ee 48% 73%,#527a88 73%)}.theme-picker [data-theme-choice=dark] i{background:linear-gradient(135deg,#0d1418 0 48%,#282f33 48% 73%,#67b8b0 73%)}.theme-picker [data-theme-choice=dark-rose] i{background:linear-gradient(135deg,#0d1418 0 48%,#282f33 48% 73%,#c9828d 73%)}.theme-picker [data-theme-choice=dark-sage] i{background:linear-gradient(135deg,#0d1418 0 48%,#282f33 48% 73%,#91b89a 73%)}
@media(max-width:420px){.theme-picker{grid-template-columns:1fr}.theme-picker button{grid-template-columns:38px 1fr;align-items:center;justify-items:start;min-height:44px;text-align:left}}
.chord-diagram .string-name{fill:var(--theme-ink)}
html[data-theme^=dark] .chord-diagram .string-name{fill:#edf2f1}
html[data-theme^=dark] .chord-diagram .muted-label{fill:#a9b4b3}
html[data-theme^=dark] .chord-diagram .string-line{stroke:#d7dfde}
html[data-theme^=dark] .chord-diagram .muted-string{stroke:#8e9a9e}
/* Module-specific contrast for Dark Studio. */
html[data-theme^=dark] .panel-top,html[data-theme^=dark] .live-caption,html[data-theme^=dark] .guidance,html[data-theme^=dark] .hint,html[data-theme^=dark] .trail-heading,html[data-theme^=dark] .meter-labels,html[data-theme^=dark] .status-strip,html[data-theme^=dark] .pitch-expectation,html[data-theme^=dark] .string-heading,html[data-theme^=dark] .target-frequency,html[data-theme^=dark] .privacy{color:var(--theme-text)}
html[data-theme^=dark] .panel-top strong,html[data-theme^=dark] .guidance{color:var(--theme-ink)}
html[data-theme^=dark] .metronome-card{background:var(--theme-surface);color:var(--theme-text)}
html[data-theme^=dark] .metronome-card h1,html[data-theme^=dark] .metronome-heading,html[data-theme^=dark] .metronome-status,html[data-theme^=dark] .metronome-volume{color:var(--theme-ink)}
html[data-theme^=dark] .tempo-presets button,html[data-theme^=dark] .tap-tempo,html[data-theme^=dark] .metronome-settings,html[data-theme^=dark] .metronome-options{border-color:var(--theme-border);background:var(--theme-soft);color:var(--theme-ink)}
html[data-theme^=dark] .tempo-presets button strong,html[data-theme^=dark] .tempo-presets button small,html[data-theme^=dark] .tap-tempo span,html[data-theme^=dark] .tap-tempo small{color:var(--theme-ink)}
html[data-theme^=dark] .mic-toggle,html[data-theme^=dark] .mic-toggle span{color:var(--theme-ink)}
html[data-theme^=dark] .status-strip,html[data-theme^=dark] .status-strip strong{color:var(--theme-muted)}

/* Dark Studio chord neck: the same dark-neck language used by the tuner. */
html[data-theme^=dark] .chord-diagram .fretboard{fill:#182e3b;stroke:#4f6570;stroke-width:1}
html[data-theme^=dark] .chord-diagram .fret{stroke:#8d9b9d;stroke-width:1.1}
html[data-theme^=dark] .chord-diagram .string-line{stroke:#ded5c2}
html[data-theme^=dark] .chord-diagram .nut{fill:#d8ccb4;stroke:#f0e7d6;filter:drop-shadow(1px 0 1px #0008)}
html[data-theme^=dark] .chord-diagram .open{fill:#20272b;stroke:#f0e7d6;stroke-width:1.9}
html[data-theme^=dark] .chord-diagram .finger,html[data-theme^=dark] .chord-diagram .barre{fill:#d2b98b;stroke:#f0e7d6;stroke-width:.5}
html[data-theme^=dark] .chord-diagram .finger.anchor{fill:var(--theme-accent)}
html[data-theme^=dark] .chord-diagram .finger-number{fill:#102330}
html[data-theme^=dark] .chord-diagram .mute{fill:var(--theme-accent)}
/* Every selectable/accent state follows the active palette. */
.chords-hero,.strum-callout,.more-overview,.change-card{border-color:var(--theme-accent)}
.objective-tabs button[aria-pressed=true],.uke-path-tabs button[aria-pressed=true]{box-shadow:inset 0 -3px var(--theme-accent)}
.bottom-nav .nav-item.active:after{background:var(--theme-accent)}
.chord-diagram .finger.anchor{fill:var(--theme-accent)}
.chord-diagram .mute{fill:var(--theme-accent)}

/* Dark Studio neck depth: strings sit visibly above the nut and fretboard. */
html[data-theme^=dark] .chord-diagram{filter:drop-shadow(0 3px 3px #0005)}
html[data-theme^=dark] .chord-diagram .fretboard{filter:drop-shadow(0 2px 2px #0007)}
html[data-theme^=dark] .chord-diagram .nut{stroke:#f6efdf;stroke-width:1.15;filter:drop-shadow(2px 1px 1.5px #000c)}
html[data-theme^=dark] .chord-diagram .string-line{filter:drop-shadow(0 1.2px .7px #000c)}
html[data-theme^=dark] .chord-diagram .fret{filter:drop-shadow(1px 0 .5px #0008)}
html[data-theme^=dark] .chord-card{box-shadow:0 5px 13px #0004,inset 0 1px #ffffff0b}

/* Complete palette audit: controls, rhythm marks, and navigation use theme tokens. */
.instrument-tabs .nav-tier-label{color:#fff;opacity:.82}
.instrument-tabs button{border-color:var(--theme-border);background:var(--theme-nav-active)}
.instrument-tabs button[aria-pressed=true]{border-color:var(--theme-accent);background:var(--theme-accent)}
.uke-path-tabs button[aria-pressed=true]{border-color:var(--theme-accent);background:var(--theme-surface);color:var(--theme-ink)}
.chord-selector button[aria-selected=true]{border-color:var(--theme-accent);background:var(--theme-accent)}
.chord-card-heading h2,.change-label,.song-example>p,.pattern-card>div>p,.chord-preview p,.more-feedback a,.metronome-eyebrow,.option-heading span,.tempo-name{color:var(--theme-accent-deep)}
.preview-chord:hover,.preview-chord:focus-visible{border-bottom-color:var(--theme-accent)}
.change-card.essential,.song-example,.chord-preview{border-color:var(--theme-accent)}
.drawer-toggle,.practice-instructions .drawer-toggle{color:var(--theme-accent-deep)}
.stroke-row .down{color:var(--theme-ink)}
.stroke-row .up{color:var(--theme-accent)}
.stroke-row .rest{color:var(--theme-muted)}
.beat-stroke-grid i{color:var(--theme-ink)}
.tempo-slider{accent-color:var(--theme-accent)}
.beat-dot.current,.metronome-start,.accent-option input:checked+i{background:var(--theme-accent)}
.meter-option[aria-pressed=true],.subdivision-options button[aria-pressed=true],.sound-options button[aria-pressed=true],.tempo-presets button[aria-pressed=true]{box-shadow:inset 0 -3px var(--theme-accent)}

/* Chord previews inherit the selected palette. */
.chord-preview{border-color:var(--theme-accent);background:var(--theme-surface);color:var(--theme-text)}
.chord-preview p{color:var(--theme-accent-deep)}
.chord-preview h2{color:var(--theme-ink)}
.chord-preview span{color:var(--theme-text)}
.chord-preview .preview-close{background:var(--theme-nav);color:#fff}
.chord-preview-backdrop{background:#07132977}

/* Theme-aware contrast for light accent colors and clearer navigation tiers. */
:root{--theme-on-accent:#fff}
html[data-theme=soft]{--theme-on-accent:#fff}
html[data-theme^=dark]{--theme-on-accent:#102330}
.instrument-tabs button[aria-pressed=true],.chord-selector button[aria-selected=true],.practice-instructions>summary,.practice-exercise-tab[aria-pressed=true]{color:var(--theme-on-accent)}
.instrument-tabs button[aria-pressed=true] strong,.practice-instructions>summary strong,.practice-instructions>summary small,.practice-exercise-tab[aria-pressed=true] strong,.practice-exercise-tab[aria-pressed=true] small{color:var(--theme-on-accent)}
.instrument-tabs .nav-tier-label,.objective-tabs .nav-tier-label,.uke-path-tabs .nav-tier-label{padding-bottom:2px;line-height:1.2}

/* Navigation step labels share one semantic style across every tier. */
.instrument-tabs .nav-tier-label,.uke-path-tabs .nav-tier-label,.objective-tabs .nav-tier-label{color:var(--theme-accent-deep)!important;opacity:1;font-weight:900;letter-spacing:1.2px}

/* Beta 3.7: finish palette coverage across rhythm and progression modules. */
.pulse-stage{background:linear-gradient(var(--theme-nav-active),var(--theme-nav));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--theme-ink) 15%,transparent)}
.pulse-stage:after{background:linear-gradient(90deg,transparent 0,transparent 78%,color-mix(in srgb,var(--theme-nav) 72%,transparent))}
.tempo-step,.metronome-settings.open,.metronome-start.running,.option-heading button{background:var(--theme-nav);color:#fff}
.tap-tempo,.sound-check,.metronome-settings{border-color:var(--theme-border);background:var(--theme-surface);color:var(--theme-ink)}
.sound-check.ready{border-color:var(--theme-accent);background:var(--theme-soft-2);color:var(--theme-ink)}
.tempo-presets button,.meter-option,.subdivision-options button,.sound-options button{background:var(--theme-soft-2);color:var(--theme-text);border-color:var(--theme-border)}
.meter-option[aria-pressed=true],.subdivision-options button[aria-pressed=true],.sound-options button[aria-pressed=true],.tempo-presets button[aria-pressed=true]{background:var(--theme-nav);color:#fff}
.metronome-options,.accent-option{background:var(--theme-surface);color:var(--theme-text);border-color:var(--theme-border)}
.accent-option small,.metronome-status,.metronome-volume{color:var(--theme-muted)}
.progression-details,.progression-details>summary,.practice-exercise-tab{background:var(--theme-nav);color:#fff}
.progression-body,.song-example{background:var(--theme-soft);color:var(--theme-text)}
.progression-details>summary:before{color:var(--theme-nav)}
.progression-summary p{color:color-mix(in srgb,var(--theme-accent) 58%,white)}
.variant-swipe-cue{margin:1px 0 6px;color:var(--theme-muted);font-size:9px;font-weight:750;text-align:center}
.variant-swipe-cue[hidden]{display:none}

/* SVG-native string depth renders consistently in WebKit, Chromium, and Android WebView. */
.chord-diagram .string-shadow{stroke:#000;opacity:.38;pointer-events:none}
.chord-diagram .muted-string-shadow{opacity:.1}
html[data-theme^=dark] .chord-diagram .string-shadow{stroke:#000;opacity:.72}
html[data-theme^=dark] .chord-diagram .muted-string-shadow{opacity:.22}
html[data-theme^=dark] .chord-diagram .string-line{filter:none}

/* Exercise chord labels keep explicit contrast in every palette and measure layout. */
.measure-heading .preview-chord{color:#fff}
.beat-chord-grid .preview-chord{color:var(--theme-ink)}
.practice-exercise-tab strong{color:#fff}
.practice-exercise-tab small{color:color-mix(in srgb,#fff 72%,var(--theme-muted))}
.practice-exercise-tab[aria-pressed=true] strong,.practice-exercise-tab[aria-pressed=true] small{color:var(--theme-on-accent)}
html[data-theme^=dark] .practice-exercise-panel .music-measure{border-color:var(--theme-border);background:var(--theme-surface)}
html[data-theme^=dark] .beat-chord-grid{border-color:var(--theme-border)}
html[data-theme^=dark] .beat-chord-grid .preview-chord{color:var(--theme-ink)}

/* More-page accordions use flex alignment instead of the inline text baseline. */
.more-card>summary{display:flex;align-items:center;gap:9px;min-height:45px;padding:10px 13px;line-height:1.2}
.more-card>summary:before{display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px;margin:0;line-height:1;transform:none}
.more-card>summary:not([aria-disabled=true]):before{padding-bottom:1px}
.more-card[open]>summary:before{padding-bottom:2px}

/* Dark-palette audit: remove Classic navy from controls, borders, and depth effects. */
html[data-theme^=dark]{--theme-nav-active:#303638}
html[data-theme^=dark] button:focus-visible,html[data-theme^=dark] a:focus-visible,html[data-theme^=dark] select:focus-visible,html[data-theme^=dark] summary:focus-visible{outline-color:var(--theme-accent)}
html[data-theme^=dark] .instrument-tabs button,html[data-theme^=dark] .objective-tabs button,html[data-theme^=dark] .uke-path-tabs button,html[data-theme^=dark] .chord-selector button{border-color:var(--theme-border);background:var(--theme-soft);color:var(--theme-ink)}
html[data-theme^=dark] .instrument-tabs button[aria-pressed=true],html[data-theme^=dark] .objective-tabs button[aria-pressed=true],html[data-theme^=dark] .uke-path-tabs button[aria-pressed=true],html[data-theme^=dark] .chord-selector button[aria-selected=true]{border-color:var(--theme-accent);background:var(--theme-accent);color:var(--theme-on-accent);box-shadow:none}
html[data-theme^=dark] .practice-drawers{border-top-color:var(--theme-border)}
html[data-theme^=dark] .progression-exercise-tab,html[data-theme^=dark] .progression-details,html[data-theme^=dark] .progression-details>summary,html[data-theme^=dark] .practice-exercise-tab{background:var(--theme-nav);border-color:var(--theme-border)}
html[data-theme^=dark] .practice-exercise-tab[aria-pressed=true]{background:var(--theme-accent);border-color:var(--theme-accent)}
html[data-theme^=dark] .music-measure,html[data-theme^=dark] .practice-exercise-panel,html[data-theme^=dark] .chord-variant-nav button{border-color:var(--theme-border)}
html[data-theme^=dark] .drawer-toggle,html[data-theme^=dark] .lesson-summary:before,html[data-theme^=dark] .progression-details>summary:before{box-shadow:0 1px 3px #0008}
html[data-theme^=dark] .chord-preview{box-shadow:0 18px 55px #000b}
html[data-theme^=dark] .chord-preview-backdrop{background:#0009}
html[data-theme^=dark] .more-card>summary:before{background:var(--theme-accent);color:var(--theme-on-accent);box-shadow:0 1px 3px #0008}
html[data-theme^=dark] .callout-mark,html[data-theme^=dark] .change-number,html[data-theme^=dark] .pattern-number{background:var(--theme-accent);color:var(--theme-on-accent)}
html[data-theme^=dark] .listening-mode{background:var(--theme-soft-2)}
html[data-theme^=dark] .listening-mode button{color:var(--theme-text)}
html[data-theme^=dark] .listening-mode button[aria-pressed=true]{background:var(--theme-accent);color:var(--theme-on-accent)}
html[data-theme^=dark] .instruments{background:var(--theme-soft-2)}
html[data-theme^=dark] .instruments button{color:var(--theme-text)}
html[data-theme^=dark] .instruments button[aria-pressed=true],html[data-theme^=dark] .start{background:var(--theme-accent);color:var(--theme-on-accent);box-shadow:none}
html[data-theme^=dark] .string,html[data-theme^=dark] .reference,html[data-theme^=dark] select{border-color:var(--theme-border);background:var(--theme-soft);color:var(--theme-ink)}
html[data-theme^=dark] .string[aria-pressed=true]{border-color:var(--theme-accent);background:var(--theme-accent);color:var(--theme-on-accent);box-shadow:0 0 0 1px var(--theme-accent)}
html[data-theme^=dark] .mic-toggle i{background:var(--theme-border)}
html[data-theme^=dark] .mic-toggle[aria-pressed=true] i{background:var(--theme-accent)}

/* Instrument tier sits on a dark band; keep its label light in every palette. */
.instrument-tabs .nav-tier-label{color:#f3eee4!important;opacity:1}
html[data-theme=soft] .instrument-tabs .nav-tier-label{color:#f5efe4!important}

/* Shared visual grammar: left = guidance, top = a new section, fill = current selection. */
.lesson-details,.strum-callout,.tune-reminder,.more-overview,.metronome-more{border-left-color:var(--theme-accent)}
.practice-drawers,.song-example,.chord-preview{border-top-color:var(--theme-accent)}
.chord-card,.pattern-card,.change-card{border-color:var(--theme-border)}
.change-card.essential{border-left-width:1px;border-left-color:var(--theme-border)}
@media(max-width:740px){body[data-view=chords] .practice-drawers{margin-top:12px}}

/* More-page accordions stay neutral; their expansion control carries the theme accent. */
.more-card>summary:before{background:var(--theme-accent);color:var(--theme-on-accent);box-shadow:0 1px 3px color-mix(in srgb,var(--theme-ink) 28%,transparent)}

/* One expandable-control language: accent icon; guidance also receives a left rail. */
.lesson-details,.practice-instructions{border:1px solid var(--theme-border);border-left:5px solid var(--theme-accent);background:var(--theme-soft);color:var(--theme-ink)}
.lesson-summary:before,.practice-instructions .drawer-toggle{background:var(--theme-accent);color:var(--theme-on-accent);box-shadow:0 1px 3px color-mix(in srgb,var(--theme-ink) 28%,transparent)}
html[data-theme^=dark] .lesson-summary:before{background:var(--theme-accent);color:var(--theme-on-accent)}
.lesson-summary .callout-mark{background:var(--theme-accent);color:var(--theme-on-accent)}
.drawer-toggle{border-color:var(--theme-accent);background:var(--theme-accent);color:var(--theme-on-accent)}
.practice-instructions>summary{background:transparent;color:var(--theme-ink)}
.practice-instructions summary small{color:var(--theme-accent-deep)}
.practice-instructions summary strong{color:var(--theme-ink)}
.practice-instructions-body{border:0;border-top:1px solid var(--theme-border);background:var(--theme-surface)}
@media(max-width:740px){
 body[data-view=chords] .chords-intro h2{font-size:19px;line-height:1.08}
 body[data-view=chords] .chord-card-heading h2{font-size:23px;line-height:1}
 body[data-view=chords] .practice-transition h2{font-size:17px;line-height:1.08}
}

/* Chord playback and a single, legible icon scale for the bottom navigation. */
.play-chord{display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;margin-left:auto;padding:0;border:1px solid var(--theme-border);border-radius:50%;background:var(--theme-surface);color:var(--theme-ink)}
.play-chord svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.play-chord .play-fill{fill:currentColor;stroke:none}
.play-chord.playing{border-color:var(--theme-accent);background:var(--theme-accent);color:var(--theme-on-accent);transform:scale(.96)}
.chord-card-heading{position:relative;padding-right:38px}
.chord-card-heading .play-chord{position:absolute;top:0;right:0;margin:0}
.chord-card-heading .chord-variant-nav{margin-left:auto;margin-right:0}
@media(max-width:740px){.chord-card-heading:has(.chord-variant-nav){padding-right:38px}.chord-card-heading:has(.chord-variant-nav)>div{padding-right:92px}.chord-card-heading .chord-variant-nav{position:absolute;top:2px;right:38px}}
.preview-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-right:34px}
.preview-heading p,.preview-heading h2{margin-right:0}
.preview-heading .play-chord{margin-top:2px}
.exercise-toolbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:7px;margin:0 0 7px}.play-exercise,.groove-toggle{display:flex;align-items:center;gap:6px;width:max-content;margin:0;padding:4px 8px 4px 5px;border:1px solid var(--theme-border);border-radius:999px;background:var(--theme-surface);color:var(--theme-ink);font-family:inherit;font-size:10px;font-weight:900;line-height:1;letter-spacing:.15px}.play-exercise{grid-column:3;grid-row:1;justify-self:end}.groove-toggle{grid-column:2;grid-row:1;justify-self:center;height:32px;padding:4px 6px 4px 9px;gap:7px}.groove-toggle strong{font:inherit;white-space:nowrap}.groove-switch{position:relative;width:29px;height:17px;border-radius:999px;background:#8b9295;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);transition:background .15s}.groove-switch::after{content:"";position:absolute;top:3px;left:3px;width:11px;height:11px;border-radius:50%;background:#202629;box-shadow:0 1px 2px rgba(0,0,0,.35);transition:transform .15s,background .15s}.groove-toggle[aria-pressed="true"] .groove-switch{background:#4f9b67}.groove-toggle[aria-pressed="true"] .groove-switch::after{transform:translateX(12px);background:#fff}
.play-exercise svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.play-exercise .play-fill{fill:currentColor;stroke:none}
.play-exercise.playing{border-color:var(--theme-accent);background:var(--theme-accent);color:var(--theme-on-accent)}
.exercise-tempo{grid-column:1;grid-row:1;justify-self:start;display:grid;grid-template-columns:34px minmax(58px,1fr) 34px;align-items:center;width:140px;height:32px;overflow:hidden;border:1px solid var(--theme-border);border-radius:999px;background:var(--theme-surface);color:var(--theme-ink)}.exercise-tempo button{display:grid;place-items:center;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;color:inherit;font-family:inherit;font-size:18px;font-weight:900;line-height:1}.exercise-tempo label{display:flex;align-items:center;justify-content:center;gap:3px;width:100%;height:100%;padding:0}.exercise-tempo-value{box-sizing:border-box!important;width:27px!important;height:20px!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-bottom:1px dotted var(--theme-border)!important;border-radius:0!important;background:transparent!important;color:inherit!important;text-align:right!important;font-family:inherit!important;font-size:10px!important;font-weight:900!important;line-height:20px!important;letter-spacing:0!important;appearance:textfield!important;-webkit-appearance:none!important}.exercise-tempo-value::-webkit-inner-spin-button,.exercise-tempo-value::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.exercise-tempo label span{font-size:8px;font-weight:900}.exercise-tempo-value:focus{border-bottom-color:var(--theme-accent)!important;outline:0}.exercise-tempo button:active{background:var(--theme-accent);color:var(--theme-on-accent)}.music-measure{transition:border-color .1s,box-shadow .1s}.stroke-row i,.beat-stroke-grid i{transition:color .1s,transform .1s,filter .1s,text-shadow .1s}.count-row b,.beat-count-grid b{position:relative;z-index:3;opacity:1!important;visibility:visible!important;filter:none!important;text-shadow:none!important;transform:none!important;transition:none!important}.measure-heading .preview-chord.cue-active,.beat-chord-grid .preview-chord.cue-active{color:var(--theme-accent);text-shadow:0 0 7px var(--theme-accent);transform:none;background:transparent}
.exercise-toolbar.has-count-in{grid-template-columns:auto auto 1fr auto}.exercise-toolbar.has-count-in .exercise-tempo{grid-column:1}.exercise-toolbar.has-count-in .exercise-count-in{grid-column:2}.exercise-toolbar.has-count-in .groove-toggle{grid-column:3}.exercise-toolbar.has-count-in .play-exercise{grid-column:4}.exercise-count-in{grid-row:1;justify-self:start;display:flex;align-items:center;gap:5px;height:32px;padding:0 7px;border:1px solid var(--theme-border);border-radius:999px;background:var(--theme-surface);color:var(--theme-ink);font:900 8px/1 var(--app-font);letter-spacing:.25px;white-space:nowrap}.exercise-count-in select{min-width:36px;height:24px;padding:1px 3px;border:0;border-radius:5px;background:var(--theme-soft-2);color:var(--theme-ink);font:900 10px/1 var(--app-font)}

@media(max-width:620px){.exercise-toolbar.has-count-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto}.exercise-toolbar.has-count-in .exercise-tempo{grid-column:1;grid-row:1}.exercise-toolbar.has-count-in .exercise-count-in{grid-column:2;grid-row:1;justify-self:end}.exercise-toolbar.has-count-in .groove-toggle{grid-column:1;grid-row:2;justify-self:start}.exercise-toolbar.has-count-in .play-exercise{grid-column:2;grid-row:2;justify-self:end}}
@media(max-width:420px){.exercise-toolbar{gap:5px}.play-exercise,.groove-toggle{padding-right:7px;font-size:9px}.groove-toggle{padding-left:7px;gap:5px}.exercise-tempo{grid-template-columns:30px minmax(55px,1fr) 30px;width:125px}.exercise-tempo-value{width:26px!important}.exercise-count-in{padding-inline:6px;font-size:7px}}
.sound-enable-row{display:none;position:sticky;top:0;z-index:12;justify-content:flex-end;padding:4px 9px;background:var(--theme-soft);border-bottom:1px solid var(--theme-border)}.ios-audio .sound-enable-row{display:flex}.chords-sound-check{max-width:190px;padding:6px 10px;border:1px solid color-mix(in srgb,var(--theme-accent) 55%,#fff);border-radius:999px;background:var(--theme-surface);color:var(--theme-ink);font-family:inherit;font-size:9px;font-weight:900;line-height:1.1}
.chords-sound-check.ready{border-color:var(--theme-accent);background:var(--theme-accent);color:var(--theme-on-accent)}
.chords-sound-check.attention{border-color:#2f9f63;background:#45b978;color:#071b11;animation:sound-attention .24s ease-in-out 4 alternate;box-shadow:0 0 0 3px #45b97855,0 0 12px #45b978aa}@keyframes sound-attention{from{transform:scale(1)}to{transform:scale(1.08)}}
@media(max-width:740px){.chords-sound-check{font-size:8px}}
.bottom-nav .nav-icon{width:26px;height:26px}
.bottom-nav .nav-icon svg{width:24px;height:24px;stroke-width:1.9}
.bottom-nav .nav-icon circle{fill:currentColor;stroke:none}

/* Tuning feedback should tint the selected theme, never replace it. */
.tuning-panel[data-status=tuned]{background:color-mix(in srgb,var(--theme-accent) 7%,var(--theme-surface))}
html[data-theme^=dark] .tuning-panel[data-status=tuned]{background:color-mix(in srgb,var(--theme-accent) 8%,var(--theme-surface))}
.guitar-neck .string[aria-pressed=true],html[data-theme^=dark] .guitar-neck .string[aria-pressed=true]{border-color:transparent;background:color-mix(in srgb,var(--theme-accent) 4%,transparent);color:var(--theme-ink);box-shadow:none}
.guitar-neck .string[aria-pressed=true] .string-name,html[data-theme^=dark] .guitar-neck .string[aria-pressed=true] .string-name{background:color-mix(in srgb,var(--theme-accent) 12%,transparent);color:var(--theme-ink)}
.guitar-neck .string[aria-pressed=true] .string-wire,html[data-theme^=dark] .guitar-neck .string[aria-pressed=true] .string-wire{background:#e5dcc7;box-shadow:0 1px 2px #0008,0 0 3px color-mix(in srgb,var(--theme-accent) 10%,transparent)}
html[data-theme^=dark] .strings.guitar-neck{background:linear-gradient(90deg,var(--theme-soft) 0 56px,transparent 56px)}
html[data-theme^=dark] .guitar-neck:before{border-left-color:var(--theme-border);background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 2px),var(--theme-border) calc(25% - 2px),var(--theme-border) 25%),linear-gradient(100deg,var(--theme-soft-2),var(--theme-surface));box-shadow:inset 0 0 10px #0006}
html[data-theme^=dark] .guitar-neck:after{background:color-mix(in srgb,var(--theme-accent) 58%,var(--theme-muted));box-shadow:0 1px 3px #0008}
html[data-theme^=dark] .guitar-neck .string-pick{background:var(--theme-soft-2);color:var(--theme-accent)}
html[data-theme^=dark] .guitar-neck .string,html[data-theme^=dark] .guitar-neck .string[aria-pressed=true]{background:transparent}
html[data-theme^=dark] .guitar-neck .string[aria-pressed=true] .string-name{background:color-mix(in srgb,var(--theme-accent) 9%,transparent);color:var(--theme-accent-deep);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--theme-accent) 62%,transparent)}
html[data-theme^=dark] .guitar-neck .string[aria-pressed=true] .string-wire{background:#e5dcc7;box-shadow:0 1px 2px #0008}

/* The measure starts with the theme accent, and a quick expanding glow marks beat one. */
.beat-dot{background:var(--theme-soft-2);color:var(--theme-ink)}
.beat-dot.group-start:before{background:var(--theme-muted)}
.beat-dot:first-child{border:2px solid var(--theme-accent);color:var(--theme-accent-deep);background:var(--theme-surface)}
.beat-dot:first-child.current{border-color:var(--theme-accent);background:var(--theme-accent);color:var(--theme-on-accent)}
.beat-dot.beat-one-hit{animation:beat-one-glow .38s ease-out both}
@keyframes beat-one-glow{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--theme-accent) 80%,transparent);filter:brightness(1)}38%{box-shadow:0 0 0 7px color-mix(in srgb,var(--theme-accent) 48%,transparent),0 0 17px 7px color-mix(in srgb,var(--theme-accent) 55%,transparent);filter:brightness(1.25)}100%{box-shadow:0 0 0 13px transparent,0 0 21px transparent;filter:brightness(1)}}
.sound-check.attention{border-color:#2f9f63!important;background:#45b978!important;color:#071b11!important;box-shadow:0 0 0 3px #45b97855,0 0 12px #45b978aa;animation:sound-attention .24s ease-in-out 4 alternate}
@media(prefers-reduced-motion:reduce){.beat-dot.beat-one-hit,.sound-check.attention{animation:none;box-shadow:0 0 0 3px var(--theme-accent)}}

/* A playing arrow changes weight and glow, never its box or font size. */
.stroke-row{--stroke-size:22px}.beat-stroke-grid{--stroke-size:20px}
.stroke-row .cue-active,.beat-stroke-grid .cue-active{color:var(--theme-accent)!important;transform:none!important;-webkit-transform:none!important;font-size:var(--stroke-size)!important;font-weight:1000!important;-webkit-text-stroke:1.4px currentColor;text-shadow:0 0 5px var(--theme-surface),0 0 9px var(--theme-accent);filter:drop-shadow(0 0 4px var(--theme-accent))}
.stroke-row .cue-rest{transform:none!important;-webkit-transform:none!important;font-size:13px!important;-webkit-text-stroke:1px currentColor}
.stroke-row i,.beat-stroke-grid i{display:grid;place-items:center;min-width:0}
.requested-practice{margin:18px 0 0;border:1px solid var(--theme-border);border-left:5px solid var(--theme-accent);border-radius:10px;background:var(--theme-soft);color:var(--theme-ink);overflow:hidden}
.requested-practice>summary{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:9px 12px;list-style:none;color:var(--theme-ink);cursor:pointer}
.requested-practice>summary::-webkit-details-marker{display:none}
.requested-practice summary small{display:block;color:var(--theme-accent-deep);font-size:10px;font-weight:900;letter-spacing:.8px}
.requested-practice summary strong{display:block;font:700 18px/1.2 var(--app-font)}
.requested-practice .drawer-toggle{border:0;background:var(--theme-accent);color:var(--theme-on-accent)}
.requested-practice[open] .drawer-toggle:before{content:'−'}
.requested-practice-body{padding:0 12px 14px;border-top:1px solid var(--theme-border)}
.requested-practice-body>p{margin:10px 0;color:var(--theme-text);font-size:14px;line-height:1.45}
.requested-practice .song-example{margin-top:10px}
@media(max-width:740px){.stroke-row{--stroke-size:18px}.stroke-row .cue-rest{font-size:13px!important}.requested-practice>summary{min-height:46px;padding:8px 10px}.requested-practice summary strong{font-size:17px}.requested-practice-body{padding:0 9px 11px}.requested-practice-body>p{font-size:13px}}

/* Four measures remain visible without horizontal scrolling at tablet widths. */
@media(min-width:741px) and (max-width:900px){.measure-row,.change-card .measure-row,.song-example .measure-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;overflow-x:visible!important}.music-measure,.change-card .music-measure,.song-example .music-measure{min-width:0!important}}
@media(min-width:901px){.song-example .measure-row{grid-template-columns:repeat(var(--bar-count),minmax(0,1fr))!important;overflow-x:visible!important}.song-example .music-measure{min-width:0!important}}

/* Landscape gives the tuner and lesson drawers room to grow and scroll normally. */
@media(orientation:landscape) and (max-height:700px) and (max-width:1099px){
 html,body{height:auto!important;min-height:100%!important;overflow-x:hidden!important;overflow-y:auto!important}
 .app-shell,main,#tuner{height:auto!important;min-height:0!important;overflow:visible!important}
 .workspace{display:flex!important;flex-direction:column!important;overflow:visible!important}
 .tuning-panel{display:block!important;order:1;padding:14px 20px!important}
 .workspace aside{order:2;width:100%;padding:14px 20px!important;overflow:visible!important;border-right:0}
 #pitch-trail{display:block;width:100%!important;height:170px!important;margin:5px 0!important}
 .strings.guitar-neck{grid-template-columns:1fr!important}
 .guitar-neck .string{height:34px!important;min-height:34px!important}
 .status-strip{display:grid;grid-template-columns:1fr;gap:5px;margin:8px 0;padding:8px}
 .tuning-panel .readings{margin:0}
 .chords-view{padding-bottom:calc(max(58px,7dvh) + 24px)}
 .lesson-expanded ul,.practice-instructions-body,.requested-practice-body>p,.more-card>div{font-size:15px!important;line-height:1.5}
 .practice-drawers,.requested-practice,.song-example{overflow:visible}
}
@media(min-width:1100px) and (max-width:1400px) and (pointer:coarse){
 html,body{height:auto!important;overflow-x:hidden!important;overflow-y:auto!important}
 .app-shell,main,#tuner{height:auto!important;overflow:visible!important}
 .workspace{display:flex!important;flex-direction:column!important;overflow:visible!important}
 .tuning-panel{display:block!important;order:1;padding:18px 28px!important}
 .workspace aside{order:2;width:100%;padding:18px 28px!important;overflow:visible!important;border-right:0}
 #pitch-trail{display:block;width:100%!important;height:220px!important;margin:6px 0!important}
 .strings.guitar-neck{grid-template-columns:1fr!important}
 .guitar-neck .string{height:38px!important;min-height:38px!important}
 .lesson-expanded ul,.practice-instructions-body,.requested-practice-body>p,.more-card>div{font-size:16px!important;line-height:1.5}
}
.count-row b,.beat-count-grid b{height:18px;align-self:center;place-items:center;line-height:18px}.count-row b:nth-child(odd),.beat-count-grid b{font-size:12px!important;font-style:normal;font-weight:1000}.count-row b:nth-child(even){font-size:8px!important;font-style:normal;font-weight:800;opacity:.78!important}

/* Tablet safety pass: keep controls flexible and stack the tuner before it becomes cramped. */
.instrument-tabs button,.uke-path-tabs button,.objective-tabs button,.chord-selector button,.practice-exercise-tab,.tempo-presets button,.meter-option,.subdivision-options button,.sound-options button{min-width:0;overflow-wrap:anywhere}
@media(min-width:741px) and (max-width:900px){
 .app-shell{padding-inline:20px}
 .workspace{display:flex!important;flex-direction:column!important;overflow:visible!important}
 .tuning-panel{display:block!important;order:1;padding:18px 24px!important}
 .workspace aside{order:2;width:100%;padding:18px 20px;border-right:0;border-top:1px solid var(--theme-border);border-bottom:0}
 .workspace .strings{grid-template-columns:repeat(var(--string-count,6),minmax(0,1fr))}
 #pitch-trail{display:block;width:100%!important;height:220px!important;margin:6px 0!important}
 body[data-view=chords] .chords-content{padding-inline:18px}
 body[data-view=chords] .chords-intro h2{font-size:23px}
 body[data-view=chords] .chord-card-heading h2{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .more-view .more-menu-body{max-width:720px}
}

/* Requested lesson rows use one compact treatment in every orientation. */
.requested-practice .progression-details{box-sizing:border-box;margin:8px 0 0;padding:0;border:1px solid var(--theme-border);border-radius:8px;background:var(--theme-nav);overflow:hidden}
.requested-practice .progression-details>summary{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:2px;position:relative;width:100%;height:auto;min-height:50px;margin:0;padding:8px 38px 8px 46px;background:var(--theme-nav);color:#fff;overflow:visible}
.requested-practice .progression-details>summary:before{content:'+';position:absolute;left:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--theme-accent);color:var(--theme-on-accent);font:900 18px/1 Arial;box-shadow:none}
.requested-practice .progression-details[open]>summary:before{content:'−'}
.requested-practice .progression-details>summary:after{display:none}
.requested-practice .progression-summary p,.requested-practice .progression-summary h3{display:block;width:100%;margin:0;color:#fff;line-height:1.15}
.requested-practice .progression-summary p{font-size:10px;font-weight:900;letter-spacing:.7px;opacity:.8}
.requested-practice .progression-summary h3{font:700 17px/1.15 var(--app-font)}
.requested-practice .progression-body{padding:8px;background:var(--theme-soft);color:var(--theme-text)}
.measure-heading.beat-chord-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;padding:3px 5px;gap:0}
.measure-heading.beat-chord-grid .preview-chord{min-width:0;padding:3px 0;color:#fff;font-size:clamp(11px,2.5vw,16px);overflow:hidden;text-overflow:ellipsis}
.measure-heading.beat-chord-grid .preview-chord.cue-active{color:var(--theme-accent);text-shadow:0 0 7px var(--theme-accent)}
.beat-chord-measure.paired-chords .beat-chord-grid .preview-chord{grid-column:span 2;font-size:clamp(13px,2.5vw,16px)}
@media(max-width:740px){.measure-heading.beat-chord-grid .preview-chord{font-size:clamp(11px,3vw,13px)}}
@media(max-width:740px){.beat-chord-measure.paired-chords .beat-chord-grid .preview-chord{font-size:clamp(12px,3.3vw,15px)}}

/* The string neck and live tuning grid share the same vertical bounds on wide layouts. */
@media(min-width:901px) and (max-width:1099px){
 .workspace aside .string-heading{min-height:15px;height:15px}
 .workspace #strings.guitar-neck{height:264px;grid-template-rows:repeat(var(--string-count),minmax(0,1fr))}
 .workspace #strings.guitar-neck .string{height:100%;min-height:0}
}
@media(min-width:1100px) and (min-height:620px){
 .workspace #strings.guitar-neck{height:calc(100% - 136px);grid-template-rows:repeat(var(--string-count),minmax(0,1fr))}
 .workspace #strings.guitar-neck .string{height:100%;min-height:0}
}
@media(max-width:740px){body[data-view=chords] .requested-practice .progression-details>summary{height:auto;min-height:50px;padding:8px 38px 8px 46px;overflow:visible}body[data-view=chords] .requested-practice .progression-summary p{font-size:9px;line-height:1.15}body[data-view=chords] .requested-practice .progression-summary h3{font-size:16px;line-height:1.15}}

/* Extended requested exercises wrap into readable four-measure rows on wide screens. */
@media(min-width:901px){.song-example .measure-row.long-progression{grid-template-columns:repeat(4,minmax(0,1fr))!important}}

/* Requested songs stay compact until a student chooses one. */
.requested-song{margin-top:8px;border:1px solid var(--theme-border);border-radius:8px;background:var(--theme-surface);overflow:hidden}
.requested-song>summary{display:flex;align-items:center;gap:12px;min-height:50px;padding:8px 12px;list-style:none;cursor:pointer;color:var(--theme-ink)}
.requested-song>summary::-webkit-details-marker{display:none}
.requested-song>summary:before{content:'›';display:grid;place-items:center;width:25px;height:25px;flex:0 0 25px;border-radius:50%;background:var(--theme-soft-2);color:var(--theme-accent-deep);font:900 24px/1 Arial}
.requested-song[open]>summary:before{transform:rotate(90deg)}
.requested-song>summary strong{font:700 17px/1.2 var(--app-font)}
.requested-song>summary span{margin-left:auto;color:var(--theme-muted);font-size:11px;font-weight:800;white-space:nowrap}
.requested-song-body{padding:2px 9px 10px;border-top:1px solid var(--theme-border);background:var(--theme-soft)}
.requested-song-body .progression-details{margin-top:8px}
@media(max-width:740px){.requested-song>summary{min-height:48px;padding:7px 10px}.requested-song>summary strong{font-size:16px}.requested-song-body{padding:1px 6px 8px}}

/* Selecting a measure starts and repeats playback from that bar. */
.music-measure[role=button]{cursor:pointer}
.music-measure[role=button]:focus-visible{outline:2px solid var(--theme-accent);outline-offset:2px}
.music-measure.is-start-measure{border-color:var(--theme-accent)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--theme-accent) 28%,transparent)}
.start-measure-note{margin:0 0 6px;padding:4px 7px;border-radius:5px;background:var(--theme-soft-2);color:var(--theme-text);font-size:11px;font-weight:800;line-height:1.3}
.start-measure-note[hidden]{display:none}
html[data-theme^=dark] .measure-heading .preview-chord.cue-active{color:var(--theme-accent);text-shadow:0 0 7px var(--theme-accent)}
.country-rhythm{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 10px;padding:8px 10px;border:1px solid var(--theme-border);border-radius:8px;background:var(--theme-surface);color:var(--theme-text)}
.country-rhythm>div:first-child{display:grid;gap:2px;min-width:0}.country-rhythm strong{font-size:12px}.country-rhythm span{font-size:11px;line-height:1.3}.country-rhythm-options{display:flex;gap:4px;flex:0 0 auto}.country-rhythm-options button{min-height:34px;padding:5px 10px;border:1px solid var(--theme-border);border-radius:6px;background:var(--theme-soft-2);color:var(--theme-ink);font-size:11px;font-weight:900;cursor:pointer}.country-rhythm-options button[aria-pressed=true]{border-color:var(--theme-accent);background:var(--theme-accent);color:var(--theme-on-accent)}
@media(max-width:390px){.country-rhythm{align-items:stretch;flex-direction:column;gap:7px}.country-rhythm-options button{flex:1}}
.sixteenth-count,.sixteenth-strokes{grid-template-columns:repeat(16,minmax(0,1fr));gap:0;padding-inline:2px}.count-row.sixteenth-count b{color:var(--theme-muted)!important;font-size:7px!important;letter-spacing:-.3px}.sixteenth-count b:nth-child(4n+3){font-size:9px!important;color:var(--theme-text)!important}.sixteenth-count b:nth-child(4n+1){color:var(--theme-accent-deep)!important;font-size:11px!important}.sixteenth-strokes i{height:20px;line-height:20px;font-size:13px}.sixteenth-strokes .rest{font-size:9px}.sixteenth-strokes .cue-active{font-size:14px!important;-webkit-text-stroke:.8px currentColor}
@media(max-width:390px){.count-row.sixteenth-count b{font-size:6px!important}.sixteenth-count b:nth-child(4n+3){font-size:8px!important}.sixteenth-count b:nth-child(4n+1){font-size:10px!important}.sixteenth-strokes i{font-size:11px}.sixteenth-strokes .cue-active{font-size:12px!important}}
/* Practice progressions share a light outlined treatment in every course and palette. */
body[data-view=chords] .progression-details,body[data-view=chords] .requested-practice .progression-details{box-sizing:border-box;margin-top:7px;border:1.5px solid var(--theme-accent);border-radius:8px;background:var(--theme-surface);overflow:hidden}
body[data-view=chords] .progression-details>summary,body[data-view=chords] .requested-practice .progression-details>summary{box-sizing:border-box;display:grid;grid-template-columns:20px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;column-gap:10px;row-gap:0;width:100%;height:auto;min-height:43px;margin:0;padding:5px 10px;background:var(--theme-surface);color:var(--theme-accent-deep);overflow:visible}
body[data-view=chords] .progression-details:not([open])>summary{padding:5px 10px}
body[data-view=chords] .progression-details>summary:before,body[data-view=chords] .requested-practice .progression-details>summary:before{position:static;grid-column:1;grid-row:2;align-self:center;justify-self:center;display:grid;place-items:center;width:19px;height:19px;margin:0;border:1.5px solid var(--theme-accent);border-radius:50%;background:transparent;color:var(--theme-accent-deep);box-shadow:none;font:700 15px/1 var(--app-font);transform:none;translate:none}
body[data-view=chords] .progression-details[open]>summary:before,body[data-view=chords] .requested-practice .progression-details[open]>summary:before{transform:none;translate:none}
body[data-view=chords] .progression-summary p,body[data-view=chords] .requested-practice .progression-summary p{grid-column:2;grid-row:1;width:auto;margin:0;color:var(--theme-accent-deep);font:750 8px/1.15 var(--app-font);letter-spacing:.5px;opacity:1}
body[data-view=chords] .progression-summary h3,body[data-view=chords] .requested-practice .progression-summary h3{grid-column:2;grid-row:2;width:auto;margin:2px 0 0;color:var(--theme-accent-deep);font:italic 650 15px/1.2 var(--app-font)}
body[data-view=chords] .progression-details .progression-body{border-top:1px solid var(--theme-border)}
body[data-view=chords] .practice-exercise-tabs .practice-exercise-tab{height:48px;min-height:48px;padding:6px 7px 10px}
body[data-view=chords] .practice-exercise-tabs .practice-exercise-tab strong{font:900 clamp(10px,2.8vw,13px)/1.15 var(--app-font)}
body[data-view=chords] .practice-exercise-tabs .practice-exercise-tab small{font:800 8px/1.1 var(--app-font);letter-spacing:.3px}

/* Classic Practice preview: one warm surface, with orange strokes instead of white blocks. */
html[data-theme=classic] body[data-view=chords] .chords-content:has(.objective-panel[data-objective=practice]:not([hidden])){background:var(--theme-soft)}
html[data-theme=classic] body[data-view=chords] .objective-panel[data-objective=practice] .lesson-details,
html[data-theme=classic] body[data-view=chords] .objective-panel[data-objective=practice] .requested-practice,
html[data-theme=classic] body[data-view=chords] .objective-panel[data-objective=practice] .requested-practice-body,
html[data-theme=classic] body[data-view=chords] .objective-panel[data-objective=practice] .progression-details,
html[data-theme=classic] body[data-view=chords] .objective-panel[data-objective=practice] .progression-details>summary,
html[data-theme=classic] body[data-view=chords] .objective-panel[data-objective=practice] .progression-body{background:var(--theme-soft)}
html[data-theme=classic] body[data-view=chords] .objective-panel[data-objective=practice] .chords-intro{margin-bottom:5px}
html[data-theme=classic] body[data-view=chords] .objective-panel[data-objective=practice] .lesson-details{margin-bottom:6px}
html[data-theme=classic] body[data-view=chords] .objective-panel[data-objective=practice] .progression-details{margin-top:5px}
html[data-theme=classic] body[data-view=chords] .objective-panel[data-objective=practice] .progression-details>summary{min-height:39px;padding:3px 8px}
html[data-theme=classic] body[data-view=chords] .objective-panel[data-objective=practice] .progression-details:not([open])>summary{padding:3px 8px}
html[data-theme=classic] body[data-view=chords] .objective-panel[data-objective=practice] .requested-practice{margin-top:12px}
html[data-theme=classic] body[data-view=chords] .objective-panel[data-objective=practice] .requested-practice>summary{min-height:42px;padding:6px 9px}
html[data-theme=classic] body[data-view=chords] .objective-panel[data-objective=practice] .requested-practice-body{padding:0 8px 9px}
html[data-theme=classic] body[data-view=chords] .objective-panel[data-objective=practice] .requested-practice .progression-details{margin-top:5px}
html[data-theme=classic] body[data-view=chords] .objective-panel[data-objective=practice] .lesson-summary:before,
html[data-theme=classic] body[data-view=chords] .objective-panel[data-objective=practice] .progression-details>summary:before,
html[data-theme=classic] body[data-view=chords] .objective-panel[data-objective=practice] .requested-practice .drawer-toggle{border:1.5px solid var(--theme-accent);background:#fff;color:var(--theme-accent-deep);box-shadow:none}
html[data-theme=classic] body[data-view=chords] .objective-panel[data-objective=practice] .lesson-summary:before,
html[data-theme=classic] body[data-view=chords] .objective-panel[data-objective=practice] .progression-details>summary:before,
html[data-theme=classic] body[data-view=chords] .objective-panel[data-objective=practice] .requested-practice .drawer-toggle:before{font-weight:900}

/* The objective overview stays on white; chord shapes and exercises have their own cards. */
body[data-view=chords] .chords-frame{border:1px solid var(--theme-accent);border-radius:14px;background:var(--theme-surface)}
body[data-view=chords] .chords-view,body[data-view=chords] .chords-frame,body[data-view=chords] .chords-content,body[data-view=chords] .objective-panel,body[data-view=chords] .objective-heading-area,body[data-view=chords] .chords-intro,body[data-view=chords] .objective-chords-card{color:var(--theme-text)}
body[data-view=chords] .chords-frame>.chords-hero{border-bottom:1px solid var(--theme-accent);border-radius:12px 12px 0 0}
body[data-view=chords] .chords-frame>.objective-tabs,
body[data-view=chords] .chords-frame>.sound-enable-row{background:var(--theme-surface)}
body[data-view=chords] .chords-frame>.chords-content{border:0;border-radius:0 0 12px 12px;background:var(--theme-surface)}
html[data-theme=classic] body[data-view=chords] .chords-content:has(.objective-panel[data-objective=practice]:not([hidden])){background:var(--theme-surface)}
body[data-view=chords] .objective-heading-area{margin:0 1px 9px;background:var(--theme-surface)}
body[data-view=chords] .objective-heading-area .chords-intro{margin-bottom:0}
body[data-view=chords] .objective-heading-area .chords-kicker{font-size:11px;line-height:1.25;letter-spacing:1px}
body[data-view=chords] .objective-why{max-width:720px;margin:5px 0 0;color:var(--theme-text-muted);font-size:12px;line-height:1.4}
body[data-view=chords] .objective-heading-area .lesson-details{margin:7px 0 0;padding:8px 0;border:0;border-top:1px solid var(--theme-border);border-radius:0;background:transparent}
.lesson-expanded>h3{margin:0;padding:0 0 8px;border-bottom:1px solid var(--theme-border);color:var(--theme-ink)}
.strum-callout .objective-note-why{margin:9px 0 11px;color:var(--theme-text);font-size:12px;font-weight:400;line-height:1.48;letter-spacing:0}
.objective-note-section-label{margin:0 0 5px;color:var(--theme-accent-deep);font-size:9px;font-weight:900;letter-spacing:1.1px}
body[data-view=chords] .objective-chords-card,
body[data-view=chords] .practice-drawers.objective-practice-card,
body[data-view=chords] .objective-library-card{box-sizing:border-box;border:1px solid var(--theme-border);border-top:4px solid var(--theme-accent);border-radius:10px;background:var(--theme-soft);padding:11px 12px}
body[data-view=chords] .objective-chords-card{margin-bottom:10px}
 body[data-view=chords] .practice-drawers.objective-practice-card{margin-top:0;margin-inline:0;overflow:visible}
body[data-view=chords] .objective-practice-disclosure{margin:0;border:1px solid var(--theme-border);border-top:4px solid var(--theme-accent);border-radius:10px;background:var(--theme-soft);overflow:hidden}
body[data-view=chords] .objective-practice-disclosure>summary{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 14px;list-style:none;cursor:pointer;color:var(--theme-ink)}
body[data-view=chords] .objective-practice-disclosure>summary::-webkit-details-marker{display:none}
body[data-view=chords] .objective-practice-disclosure>summary small{display:block;color:var(--theme-accent-deep);font:900 8px/1.1 var(--app-font);letter-spacing:1px}
body[data-view=chords] .objective-practice-disclosure>summary strong{display:block;margin-top:2px;font:750 18px/1.1 var(--app-font)}
body[data-view=chords] .objective-practice-disclosure[open]>summary{border-bottom:1px solid var(--theme-border)}
body[data-view=chords] .objective-practice-disclosure[open]>summary .drawer-toggle:before{content:'−'}
body[data-view=chords] .objective-practice-disclosure-body{padding:10px}
body[data-view=chords] .objective-practice-disclosure .practice-drawers.objective-practice-card{margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
body[data-view=chords] .objective-library-card{overflow:visible}
body[data-view=chords] .objective-library-card>.progression-details:first-child{margin-top:0}
body[data-view=chords] .objective-library-card .progression-details,
body[data-view=chords] .objective-library-card .progression-details>summary{background:var(--theme-soft)}
body[data-view=chords] .strumming-panel .progression-details .measure-row{grid-template-columns:repeat(var(--bar-count),minmax(0,1fr))!important}
body[data-view=chords] .objective-library-card>.requested-practice{border:0;border-top:1px solid var(--theme-border);border-radius:0;background:transparent}
body[data-view=chords] .objective-library-card>.requested-practice>summary{background:transparent}
html[data-theme=classic] body[data-view=chords] .objective-panel[data-objective=practice] .objective-heading-area .lesson-details{margin:7px 0 0;background:transparent}
body[data-view=chords] .objective-chords-card .chord-grid{gap:0}
body[data-view=chords] .objective-chords-card .chord-card,
html[data-theme^=dark] body[data-view=chords] .objective-chords-card .chord-card{border:0;border-radius:0;background:transparent;box-shadow:none}
body[data-view=chords] .objective-chords-card .chord-card:not([data-variant-card]):not(:first-child){border-left:1px solid var(--theme-border)}
body[data-view=chords] .objective-practice-card .practice-transition{border-bottom:1px solid var(--theme-border)}
body[data-view=chords] .objective-practice-card .practice-instructions{margin:7px 0 5px;border:0;border-bottom:1px solid var(--theme-border);border-radius:0;background:transparent}
body[data-view=chords] .objective-practice-card .practice-instructions>summary,
body[data-view=chords] .objective-practice-card .practice-instructions-body{background:transparent}
 body[data-view=chords] .objective-practice-card .practice-exercise-panel{border:0;background:transparent}

 /* One-beat sixteenth-note lessons: the foot tap stays on the large number. */
 .single-beat-sixteenth .sixteenth-beat-guide{margin:8px 0;padding:12px;border:1px solid var(--theme-border);border-radius:9px;background:var(--theme-surface)}
 .single-beat-sixteenth .sixteenth-beat-guide>.preview-chord{display:block;margin:0 0 7px;color:var(--theme-accent-deep);font-size:17px}
 .beat-guide-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
 .beat-guide-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:103px;border:1px solid var(--theme-border);border-radius:7px;background:var(--theme-soft)}
 .beat-guide-number,.beat-guide-count{display:grid;place-items:center;height:31px;color:var(--theme-muted);font:800 18px/1 var(--app-font)}
 .beat-guide-number{width:34px;height:34px;border-radius:50%;background:var(--theme-accent);color:var(--theme-on-accent);font-size:23px}
 .beat-guide-slot i{display:block;height:52px;color:var(--theme-ink);font:900 46px/52px var(--app-font);font-style:normal;transition:transform .1s,color .1s}
 .beat-guide-slot.up i{color:var(--theme-accent)}
 .beat-guide-slot.rest i{color:var(--theme-muted);font-size:27px}
 .beat-guide-slot.cue-active{border-color:var(--theme-accent);background:color-mix(in srgb,var(--theme-accent) 13%,var(--theme-soft))}
 .beat-guide-slot.cue-active i{transform:scale(1.14)}
 .beat-guide-number.cue-beat{animation:beat-guide-pulse .36s ease-out both}
 @keyframes beat-guide-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--theme-accent) 70%,transparent);transform:scale(1)}35%{box-shadow:0 0 0 8px color-mix(in srgb,var(--theme-accent) 30%,transparent);transform:scale(1.3)}100%{box-shadow:0 0 0 0 transparent;transform:scale(1)}}
 .sixteenth-beat-guide>p{margin:8px 1px 0;color:var(--theme-text);font-size:11px;line-height:1.35}
 @media(max-width:740px){.single-beat-sixteenth .sixteenth-beat-guide{padding:8px}.beat-guide-grid{gap:4px}.beat-guide-slot{min-height:89px}.beat-guide-slot i{height:43px;font-size:37px;line-height:43px}.beat-guide-slot.rest i{font-size:23px}.beat-guide-number{width:30px;height:30px;font-size:21px}.beat-guide-count{height:30px;font-size:16px}}
 @media(prefers-reduced-motion:reduce){.beat-guide-number.cue-beat{animation:none;outline:3px solid var(--theme-accent-deep)}.beat-guide-slot i{transition:none}}

 /* Progression and strumming libraries use the same compact rows as chord-pair notes. */
 body[data-view=chords] .objective-panel:is([data-objective=practice],[data-objective=strumming]) .objective-library-card>.progression-details{
  margin:0;border:0;border-bottom:1px solid var(--theme-border);border-radius:0;background:transparent;overflow:visible
 }
 body[data-view=chords] .objective-panel:is([data-objective=practice],[data-objective=strumming]) .objective-library-card>.progression-details:last-of-type{border-bottom:0}
 body[data-view=chords] .objective-panel[data-objective=practice] .objective-library-card>.progression-details:has(+ .requested-practice){border-bottom:0}
 body[data-view=chords] .objective-panel:is([data-objective=practice],[data-objective=strumming]) .objective-library-card>.progression-details>summary,
 html[data-theme=classic] body[data-view=chords] .objective-panel[data-objective=practice] .objective-library-card>.progression-details>summary{
  min-height:47px;margin:0;padding:6px 4px;background:transparent
 }
 body[data-view=chords] .objective-panel:is([data-objective=practice],[data-objective=strumming]) .objective-library-card>.progression-details:not([open])>summary,
 html[data-theme=classic] body[data-view=chords] .objective-panel[data-objective=practice] .objective-library-card>.progression-details:not([open])>summary{padding:6px 4px}
 body[data-view=chords] .objective-panel:is([data-objective=practice],[data-objective=strumming]) .objective-library-card>.progression-details>summary:before,
 html[data-theme=classic] body[data-view=chords] .objective-panel[data-objective=practice] .objective-library-card>.progression-details>summary:before{
  border:0;background:var(--theme-accent);color:var(--theme-on-accent);font:900 16px/1 Arial;box-shadow:none
 }
 body[data-view=chords] .objective-panel:is([data-objective=practice],[data-objective=strumming]) .objective-library-card>.progression-details .progression-summary p{color:var(--theme-accent-deep);font-size:9px}
  body[data-view=chords] .objective-panel:is([data-objective=practice],[data-objective=strumming]) .objective-library-card>.progression-details .progression-summary h3{color:var(--theme-ink);font-style:italic;font-weight:750}
  body[data-view=chords] .objective-panel:is([data-objective=practice],[data-objective=strumming]) .objective-library-card>.progression-details .progression-body{border-top:1px solid var(--theme-border);background:transparent}
  body[data-view=chords] .objective-panel:is([data-objective=practice],[data-objective=strumming]) .objective-library-card>.progression-details:has(+ .first-sixteenth){border-bottom:0}
body[data-view=chords] .objective-panel:is([data-objective=practice],[data-objective=strumming]) .objective-library-card>.progression-details.first-sixteenth{margin-top:9px;padding-top:8px;border-top:2px solid var(--theme-accent)}
body[data-view=chords] .objective-panel[data-objective=practice] .objective-library-card>.requested-practice{margin-top:9px;padding-top:8px;border-top:2px solid var(--theme-accent)}
.strumming-panel .measure-heading{gap:8px}
.strumming-chord-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.strumming-panel .strumming-chord-select{width:68px;min-width:68px;max-width:68px;min-height:29px;padding:3px 22px 3px 8px;border:1px solid var(--theme-accent);border-radius:6px;background:var(--theme-surface);color:var(--theme-ink);font:700 12px var(--app-font);cursor:pointer}
.strumming-panel .strumming-chord-select:focus-visible{outline:2px solid var(--theme-accent);outline-offset:2px}
.single-beat-sixteenth .strumming-chord-row>.preview-chord{margin:0;color:var(--theme-accent-deep);font-size:17px}
 html[data-theme=classic] body[data-view=chords] .objective-panel[data-objective=practice] .objective-heading-area .lesson-summary:before,
  html[data-theme=classic] body[data-view=chords] .objective-panel[data-objective=practice] .objective-library-card>.requested-practice .drawer-toggle{
   border:0;background:var(--theme-accent);color:var(--theme-on-accent);box-shadow:none
  }
  body[data-view=chords]{scrollbar-gutter:stable}
 @media(max-width:740px){
 body[data-view=chords] .objective-chords-card,
 body[data-view=chords] .practice-drawers.objective-practice-card,
 body[data-view=chords] .objective-library-card{padding:9px}
 body[data-view=chords] .objective-chords-card .chord-card:not([data-variant-card]):not(:first-child){border-left:0}
}

/* Tablet layouts: keep strings in rows and use the landscape width for both tuner tools. */
@media (min-width:741px) and (max-width:1400px) and (pointer:coarse){
 header{padding-inline:18px}
 .workspace #strings.guitar-neck{display:grid;grid-template-columns:1fr!important;grid-template-rows:repeat(var(--string-count,6),minmax(34px,1fr));height:auto}
 .workspace #strings.guitar-neck .string{height:38px!important;min-height:38px!important}
 .more-card>summary{min-height:56px;font-size:18px}
 body[data-view=chords] .objective-panel:is([data-objective=practice],[data-objective=strumming]) .objective-library-card>.progression-details>summary{min-height:66px;padding:10px 12px}
 body[data-view=chords] .objective-panel:is([data-objective=practice],[data-objective=strumming]) .objective-library-card>.progression-details:not([open])>summary,
 html[data-theme=classic] body[data-view=chords] .objective-panel[data-objective=practice] .objective-library-card>.progression-details:not([open])>summary{min-height:66px;padding:10px 12px}
 body[data-view=chords] .objective-panel:is([data-objective=practice],[data-objective=strumming]) .objective-library-card>.progression-details .progression-summary p{font-size:12px}
 body[data-view=chords] .objective-panel:is([data-objective=practice],[data-objective=strumming]) .objective-library-card>.progression-details .progression-summary h3{font-size:21px}
 body[data-view=chords] .progression-details>summary:before,body[data-view=chords] .requested-practice .progression-details>summary:before{grid-row:1/3;align-self:center;width:26px;height:26px;font-size:19px}
 body[data-view=chords] .progression-details>summary,body[data-view=chords] .requested-practice .progression-details>summary{grid-template-columns:28px minmax(0,1fr);column-gap:12px}
 body[data-view=chords] .objective-chords-card .chord-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 body[data-view=chords] .objective-chords-card .chord-card:not([data-variant-card]){border-left:0}
 body[data-view=chords] .objective-chords-card .chord-card:not([data-variant-card]):nth-child(even){border-left:1px solid var(--theme-border)}
 body[data-view=chords] .objective-chords-card .chord-card:not([data-variant-card]):nth-child(n+3){border-top:1px solid var(--theme-border)}
}
@media (min-width:741px) and (max-width:1400px) and (pointer:coarse) and (orientation:portrait){
 .workspace{display:flex!important;flex-direction:column!important;overflow:visible!important}
 .tuning-panel{display:block!important;order:1}
 .workspace aside{order:2;width:100%;border-right:0;border-top:1px solid var(--theme-border)}
 #pitch-trail{display:block;width:100%!important;max-width:100%;margin:6px 0!important}
 body[data-view=chords] .objective-chords-card .chord-grid{grid-template-columns:1fr!important}
 body[data-view=chords] .objective-chords-card .chord-card:not([data-variant-card]):not(:first-child){border-left:0;border-top:1px solid var(--theme-border)}
}
@media (min-width:741px) and (max-width:1400px) and (pointer:coarse) and (orientation:landscape){
 html,body{height:auto!important;overflow-x:hidden!important;overflow-y:auto!important}
 .app-shell,main,#tuner{height:auto!important;overflow:visible!important}
 .workspace{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-rows:repeat(8,auto) minmax(250px,auto) repeat(6,auto)!important;overflow:hidden!important}
 .tuning-panel{display:contents!important}
 .workspace aside{grid-column:1;grid-row:8/15;order:initial;width:auto;padding:0 20px 18px!important;border-right:1px solid var(--theme-border)}
 .trail-heading{grid-column:2;grid-row:8;margin:18px 22px 8px}
 #pitch-trail{display:block;grid-column:2;grid-row:9;width:calc(100% - 44px)!important;height:100%!important;min-height:250px;margin:0 22px!important}
 .meter-labels{grid-column:2;grid-row:11}
 .status-strip{grid-column:2;grid-row:12;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin:0 22px}
 .privacy{grid-column:2;grid-row:15}
}

.chord-diagram-with-key{container-type:inline-size;display:grid;grid-template-rows:auto auto;gap:7px;width:100%;min-width:0;--top-string:17.65%;--bottom-string:12.5%}
.chord-diagram-with-key.four-string{--top-string:22.8%;--bottom-string:17.65%}
.chord-diagram-row{display:grid;grid-template-columns:minmax(38px,auto) minmax(210px,1fr) minmax(38px,auto);align-items:stretch;width:100%;min-width:0}
.chord-diagram-slot{grid-column:2;min-width:0;width:100%}
.chord-diagram-slot .chord-diagram{display:block;width:100%;height:auto;max-height:none;margin:0 auto}
.chord-edge-labels{display:grid;grid-template-rows:var(--top-string) 1fr var(--bottom-string);min-width:0;color:var(--theme-accent-deep);font:800 clamp(8px,2.25cqi,11px)/1 var(--app-font);text-transform:uppercase;letter-spacing:.2px}
.chord-edge-labels span:first-child{grid-row:1;align-self:end;transform:translateY(50%)}
.chord-edge-labels span:last-child{grid-row:3;align-self:start;transform:translateY(-50%)}
.chord-edge-left{padding-right:8px;text-align:right}
.chord-edge-right{padding-left:8px;text-align:left}
.chord-guide-notes{display:grid;grid-template-rows:auto auto;gap:6px;min-width:0;color:var(--theme-ink);font:800 clamp(9px,2.45cqi,12px)/1.2 var(--app-font);letter-spacing:.05px}
.finger-list,.chord-mark-key{display:grid;justify-content:center;min-width:0}
.finger-list{grid-template-columns:repeat(4,max-content);gap:clamp(8px,3cqi,22px);text-align:left}
.finger-list b{color:var(--theme-accent-deep)}
.chord-mark-key{grid-template-columns:repeat(2,max-content);gap:clamp(14px,4cqi,30px)}
.chord-mark-key span{display:inline-flex;align-items:center;justify-content:flex-start;gap:6px;min-height:16px;white-space:nowrap;line-height:16px}
.open-string-symbol{box-sizing:border-box;display:block;width:13px;height:13px;flex:0 0 13px;border:2px solid var(--theme-ink);border-radius:50%;background:#fff}
.chord-diagram .open{fill:#fff}
html[data-theme^=dark] .open-string-symbol{background:var(--theme-nav)}
html[data-theme^=dark] .chord-diagram .open{fill:var(--theme-nav)}
.muted-string-symbol{display:inline-grid;place-items:center;width:13px;height:13px;flex:0 0 13px;color:var(--theme-accent);font:900 18px/13px Arial;font-style:normal}
.objective-one-visuals{margin-top:14px;padding-top:12px;border-top:1px solid var(--theme-border)}
.objective-one-visuals>p{margin:0 0 8px;color:var(--theme-accent-deep);font-size:9px;font-weight:900;letter-spacing:1.1px}
.objective-one-visuals>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.objective-one-visuals button{display:grid;place-items:center;min-width:0;min-height:104px;padding:6px 8px;border:1px solid var(--theme-border);border-radius:7px;background:var(--theme-surface);cursor:zoom-in;overflow:hidden}
.objective-one-visuals button:focus-visible{outline:2px solid var(--theme-accent);outline-offset:2px}
.objective-one-visuals img{display:block;width:min(100%,180px);height:auto;max-width:180px;max-height:none;object-fit:initial!important}
.lesson-expanded>.objective-definitions{margin:11px 0 9px;padding:10px 0 5px;border-top:1px solid var(--theme-border);color:var(--theme-text-muted);font-size:11px;line-height:1.42}.objective-definitions>strong{display:block;margin:0 0 5px;color:var(--theme-accent-deep);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:1.1px}.objective-definition{display:block;margin-top:4px}.objective-definition b{color:var(--theme-ink)}
.objective-one-return button{padding:2px 7px;border:1px solid var(--theme-accent);border-radius:999px;background:transparent;color:var(--theme-accent-deep);font:800 11px var(--app-font);cursor:pointer}
.objective-image-dialog{box-sizing:border-box;width:min(92vw,900px);max-height:88vh;padding:42px 18px 16px;border:2px solid var(--theme-accent);border-radius:12px;background:var(--theme-surface);color:var(--theme-ink);box-shadow:0 18px 60px #0008}
.objective-image-dialog::backdrop{background:#071329cc}
.objective-image-dialog img{display:block;width:100%;max-height:68vh;object-fit:contain}
.objective-image-dialog p{margin:10px 0 0;text-align:center;font-size:13px;font-weight:700}
.objective-image-close{position:absolute;top:8px;right:10px;display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--theme-border);border-radius:50%;background:var(--theme-soft);color:var(--theme-ink);font:900 20px/1 Arial;cursor:pointer}
@media(max-width:600px){body[data-view=chords] .objective-why{margin-top:4px;font-size:10px;line-height:1.3}.objective-one-visuals>div{grid-template-columns:1fr}.objective-one-visuals button{min-height:104px;padding:5px 8px}.objective-image-dialog{padding-inline:10px}}
.instrument-info-open{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:28px;padding:4px 9px;border:1px solid var(--theme-border);border-radius:999px;background:var(--theme-soft);color:var(--theme-ink);font:900 9px/1 var(--app-font);letter-spacing:.55px;text-transform:uppercase;white-space:nowrap}.instrument-info-open>span{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--theme-accent);color:var(--theme-on-accent);font:900 11px/1 Georgia,serif;text-transform:none}
.instrument-info-dialog{box-sizing:border-box;width:min(92vw,760px);max-height:88vh;padding:0;border:1px solid var(--theme-border);border-top:5px solid var(--theme-accent);border-radius:12px;background:var(--theme-soft);color:var(--theme-ink);box-shadow:0 18px 60px #0008;overflow:auto}.instrument-info-dialog::backdrop{background:#071329cc}.instrument-info-heading{padding:20px 48px 8px 22px}.instrument-info-heading small{display:block;color:var(--theme-accent-deep);font-size:9px;font-weight:900;letter-spacing:1.2px}.instrument-info-heading h2{margin:3px 0 0;color:var(--theme-ink);font-size:23px}.instrument-info-close{position:absolute;top:10px;right:12px;display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--theme-border);border-radius:50%;background:var(--theme-surface);color:var(--theme-ink);font:900 20px/1 Arial}.tuner-note-body{padding:2px 22px 22px}.tuner-note-body p{margin:8px 0;font-size:13px;line-height:1.55}.tuner-note-image{display:block;width:min(100%,700px);margin:14px auto 0;padding:6px;border:1px solid var(--theme-border);border-radius:8px;background:var(--theme-surface);cursor:zoom-in}.tuner-note-image img{display:block;width:100%;height:auto}.tuner-note-dialog{box-sizing:border-box;width:min(94vw,960px);padding:42px 12px 12px;border:2px solid var(--theme-accent);border-radius:12px;background:var(--theme-surface)}.tuner-note-dialog::backdrop{background:#071329cc}.tuner-note-dialog img{display:block;width:100%;height:auto}.tuner-note-dialog-close{position:absolute;top:8px;right:10px;display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--theme-border);border-radius:50%;background:var(--theme-soft);color:var(--theme-ink);font:900 20px/1 Arial}
.chords-hero .instrument-path-picker{align-self:stretch;display:grid;grid-template-rows:minmax(0,1fr) auto}.chords-hero .instrument-path-details,.chords-hero .instrument-path-details>summary,.chords-hero .instrument-path-caption{height:100%}.chords-hero .instrument-path-caption{min-height:38px}
body[data-view=chords] .chords-intro.has-learning-path-switch{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
body[data-view=chords] .learning-path-switch{align-self:start;min-width:74px;padding:7px 13px;border:1px solid var(--theme-border-strong);border-radius:999px;background:var(--theme-soft);color:var(--theme-ink);font:900 10px/1 var(--app-font);letter-spacing:.55px;text-transform:uppercase;cursor:pointer}
body[data-view=chords] .learning-path-switch:hover,body[data-view=chords] .learning-path-switch:focus-visible{border-color:var(--theme-accent);background:var(--theme-accent);color:var(--theme-on-accent)}
body[data-view=chords] .chord-card-heading:has(.chord-variant-nav){display:grid;grid-template-columns:minmax(0,1fr) auto 34px;gap:6px;padding-right:0}
body[data-view=chords] .chord-card-heading:has(.chord-variant-nav)>div{min-width:0;padding-right:0}
body[data-view=chords] .chord-card-heading:has(.chord-variant-nav) .chord-variant-nav{position:static;margin:0}
body[data-view=chords] .chord-card-heading:has(.chord-variant-nav) .play-chord{position:static;grid-column:3}
@media(max-width:600px){.panel-top{gap:5px}.instrument-info-open{padding-inline:6px;font-size:8px;letter-spacing:.35px}.instrument-info-open>span{width:15px;height:15px}.instrument-info-heading{padding-left:14px}.tuner-note-body{padding-left:14px;padding-right:14px}.chords-hero .instrument-path-caption{min-height:34px}body[data-view=chords] .chords-intro.has-learning-path-switch{gap:7px}body[data-view=chords] .learning-path-switch{min-width:64px;padding:6px 9px;font-size:9px}}

/* More Info belongs to the reference-note card; the two tuner columns share equal space. */
body[data-view=tuner] aside .string-heading{grid-template-columns:minmax(0,1fr) auto}
body[data-view=tuner] aside .string-heading .instrument-info-open{position:static;justify-self:end;align-self:center;min-height:25px;padding:3px 7px;font-size:8px}
@media(min-width:741px){body[data-view=tuner] .workspace{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Keep the iPhone audio recovery action reachable after the original control scrolls away. */
.chords-sound-rescue{position:fixed;z-index:40;left:50%;bottom:calc(max(62px,8dvh) + env(safe-area-inset-bottom) + 10px);transform:translateX(-50%);display:grid;gap:1px;width:min(88vw,310px);padding:10px 16px;border:2px solid #2f9f63;border-radius:999px;background:#45b978;color:#071b11;box-shadow:0 7px 24px #07132966,0 0 0 4px #45b97844;text-align:center;animation:sound-rescue-pulse 1.2s ease-in-out infinite}.chords-sound-rescue[hidden]{display:none}.chords-sound-rescue span{font:750 9px/1.1 var(--app-font);letter-spacing:.7px;text-transform:uppercase}.chords-sound-rescue strong{font:900 13px/1.15 var(--app-font)}@keyframes sound-rescue-pulse{50%{transform:translateX(-50%) scale(1.035);box-shadow:0 7px 24px #07132966,0 0 0 8px #45b97822}}@media(prefers-reduced-motion:reduce){.chords-sound-rescue{animation:none}}

body[data-view=chords] .objective-panel[data-objective=one] .chord-card-heading h2{font-size:clamp(17px,2.15vw,25px);overflow:visible;text-overflow:clip}
body[data-view=chords] .objective-panel[data-objective=one] .chord-grid .chord-card{height:auto;min-height:190px}

/* Requested exercises follow the same section-row language as Practice and Strumming. */
body[data-view=chords] .objective-panel[data-objective=practice] .requested-practice-body .progression-details,
html[data-theme=classic] body[data-view=chords] .objective-panel[data-objective=practice] .requested-practice-body .progression-details{margin:0;border:0;border-bottom:1px solid var(--theme-border);border-radius:0;background:transparent;overflow:visible}
body[data-view=chords] .objective-panel[data-objective=practice] .requested-practice-body .progression-details:last-child{border-bottom:0}
body[data-view=chords] .objective-panel[data-objective=practice] .requested-practice-body .progression-details>summary,
html[data-theme=classic] body[data-view=chords] .objective-panel[data-objective=practice] .requested-practice-body .progression-details>summary,
html[data-theme=classic] body[data-view=chords] .objective-panel[data-objective=practice] .requested-practice-body .progression-details:not([open])>summary{min-height:48px;padding:7px 6px;background:transparent}
body[data-view=chords] .objective-panel[data-objective=practice] .requested-practice-body .progression-details>summary:before,
html[data-theme=classic] body[data-view=chords] .objective-panel[data-objective=practice] .requested-practice-body .progression-details>summary:before{border:0;background:var(--theme-accent);color:var(--theme-on-accent);box-shadow:none}
body[data-view=chords] .objective-panel[data-objective=practice] .requested-practice-body .progression-summary h3{color:var(--theme-ink);font-style:italic;font-weight:750}
body[data-view=chords] .objective-panel[data-objective=practice] .requested-practice-body .progression-body{background:transparent}
body[data-view=chords] .requested-song{margin:0;border:0;border-bottom:1px solid var(--theme-border);border-radius:0;background:transparent;overflow:visible}
body[data-view=chords] .requested-song:last-child{border-bottom:0}
body[data-view=chords] .requested-song>summary{box-sizing:border-box;display:grid;grid-template-columns:34px minmax(0,1fr) auto 30px;align-items:center;width:100%;min-height:58px;padding:8px 2px;gap:10px;background:transparent}
body[data-view=chords] .requested-song>summary:before{content:'+';grid-column:4;grid-row:1;justify-self:center;width:24px;height:24px;display:grid;place-items:center;border:1.5px solid var(--theme-accent);border-radius:50%;background:transparent;color:var(--theme-accent-deep);font:900 17px/1 Arial;transform:none}
body[data-view=chords] .requested-song[open]>summary:before{content:'−';transform:none}
body[data-view=chords] .requested-song>summary .requested-song-number{grid-column:1;grid-row:1;display:grid;place-items:center;width:28px;height:28px;margin:0;border-radius:50%;background:var(--theme-accent);color:var(--theme-on-accent);font:900 12px/1 var(--app-font)}
body[data-view=chords] .requested-song>summary .requested-song-heading{grid-column:2;grid-row:1;display:block;min-width:0;margin:0;white-space:normal}
body[data-view=chords] .requested-song>summary .requested-song-heading small{display:block;margin:0;color:var(--theme-accent-deep);font:900 8px/1.15 var(--app-font);letter-spacing:.7px}
body[data-view=chords] .requested-song>summary .requested-song-heading strong{display:block;margin:3px 0 0;color:var(--theme-ink);font:italic 750 16px/1.15 var(--app-font)}
body[data-view=chords] .requested-song>summary .requested-song-count{grid-column:3;grid-row:1;margin:0;color:var(--theme-muted);font-size:11px;font-weight:800;white-space:nowrap}
body[data-view=chords] .requested-song-body{margin:0 0 10px 34px;padding:4px 8px 8px;border-top:1px solid var(--theme-border);border-radius:0 0 8px 8px;background:var(--theme-soft-2);box-shadow:inset 0 1px #fff7}
body[data-view=chords] .requested-song-body>.progression-details>summary{min-height:54px;padding-inline:4px}
html[data-theme=classic] body[data-view=chords] .objective-panel[data-objective=practice] .objective-library-card>.requested-practice>summary{padding-left:4px}

/* Stable chord-module sizing: switch layouts before cards become too narrow to read. */
@media (min-width:741px){
 body[data-view=chords] .app-shell{width:min(calc(100% - 32px),1440px)!important;max-width:1440px!important;padding-inline:clamp(24px,3vw,42px)}
 body[data-view=chords] .objective-chords-card .chord-grid,
 body[data-view=chords] .objective-chords-card .chord-grid.three-up{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 body[data-view=chords] .objective-panel[data-objective=one] .chord-grid .chord-card{min-width:0;min-height:210px}
 body[data-view=chords] .objective-chords-card .chord-card:not([data-variant-card]){border-left:0}
 body[data-view=chords] .objective-chords-card .chord-card:not([data-variant-card]):nth-child(even){border-left:1px solid var(--theme-border)}
 body[data-view=chords] .objective-chords-card .chord-card:not([data-variant-card]):nth-child(n+3){border-top:1px solid var(--theme-border)}
 body[data-view=chords] .chord-diagram{width:100%;max-height:145px}
}
@media (min-width:1350px) and (pointer:fine){
 body[data-view=chords] .objective-chords-card .chord-grid,
 body[data-view=chords] .objective-chords-card .chord-grid.three-up{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 body[data-view=chords] .objective-panel[data-objective=one] .chord-grid .chord-card{min-height:210px}
 body[data-view=chords] .objective-chords-card .chord-card:not([data-variant-card]):nth-child(n+3){border-top:1px solid var(--theme-border)}
 body[data-view=chords] .objective-chords-card .chord-card:not([data-variant-card]):nth-child(odd){border-left:0}
 body[data-view=chords] .objective-chords-card .chord-card:not([data-variant-card]):nth-child(even){border-left:1px solid var(--theme-border)}
 body[data-view=chords] .chord-diagram{max-height:138px}
}

/* Keep the shared header compact and safely inset at every chord-module width. */
body[data-view=chords] header{box-sizing:border-box;height:72px;padding-inline:18px}
@media(max-width:740px){body[data-view=chords] header{height:65px;padding-inline:12px}}
body[data-view=chords] .brand img{flex:0 0 35px;width:35px;height:39px;max-width:35px;max-height:39px}

/* At portrait-tablet widths, move the whole chord card into the roomy single-card view. */
@media(min-width:741px) and (max-width:960px){
 body[data-view=chords] .objective-chords-card .chord-selector{display:flex;gap:5px;margin:0 0 7px;overflow:hidden}
 body[data-view=chords] .objective-chords-card .chord-selector button{flex:1 1 0;min-width:0;padding:8px 3px;border:1px solid var(--theme-border);border-radius:6px;background:var(--theme-soft);color:var(--theme-ink);font-size:11px;font-weight:900}
 body[data-view=chords] .objective-chords-card .chord-selector button[aria-selected=true]{border-color:var(--theme-accent);background:var(--theme-accent);color:var(--theme-on-accent)}
 body[data-view=chords] .objective-chords-card .chord-grid,
 body[data-view=chords] .objective-chords-card .chord-grid.three-up{display:block;overflow:hidden;touch-action:pan-y}
 body[data-view=chords] .objective-chords-card .chord-grid .chord-card{display:none!important;box-sizing:border-box;width:100%;min-height:235px;padding:12px 16px}
 body[data-view=chords] .objective-chords-card .chord-grid .chord-card.active-chord{display:block!important}
 body[data-view=chords] .objective-chords-card .chord-diagram{width:100%;height:auto;max-height:none;margin:1px auto 0}
 body[data-view=chords] .objective-chords-card .chord-diagram-row{grid-template-columns:minmax(48px,1fr) minmax(300px,520px) minmax(48px,1fr)}
}

/* Two-column tablet cards keep every label in its own bounded cell. */
@media(min-width:961px) and (max-width:1200px){
 body[data-view=chords] .objective-chords-card .chord-card{padding-inline:16px}
 body[data-view=chords] .objective-panel[data-objective=one] .chord-grid .chord-card{min-height:255px}
 body[data-view=chords] .objective-chords-card .chord-diagram-row{grid-template-columns:44px minmax(210px,1fr) 44px}
}
@media(min-width:1201px){
 body[data-view=chords] .objective-chords-card .chord-diagram-row{grid-template-columns:minmax(46px,1fr) minmax(230px,390px) minmax(46px,1fr)}
}

/* Keep real-world progressions as one compact, separately numbered card row. */
body[data-view=chords] .objective-practice-card .practice-progression-heading{margin:11px 0 0;padding:9px 2px 0;border-top:3px solid var(--theme-accent);color:var(--theme-accent-deep);font:800 11px/1.2 var(--app-font);letter-spacing:.8px;text-transform:uppercase}
body[data-view=chords] .objective-practice-card .practice-progression-tabs{grid-template-columns:repeat(var(--exercise-count),minmax(0,1fr));margin-top:6px;padding:0;border:0}
body[data-view=chords] .objective-practice-card .practice-transition h2{margin:0;color:var(--theme-accent-deep);font:800 11px/1.2 var(--app-font);letter-spacing:.8px;text-transform:uppercase}

@media(max-width:740px){
 body[data-view=chords] .objective-chords-card .chord-grid .chord-card{container-type:inline-size}
 body[data-view=chords] .objective-chords-card .chord-diagram-with-key{gap:6px}
 body[data-view=chords] .objective-chords-card .chord-diagram-row{grid-template-columns:32px minmax(180px,1fr) 32px}
 body[data-view=chords] .objective-chords-card .chord-edge-left{padding-right:5px}
 body[data-view=chords] .objective-chords-card .chord-edge-right{padding-left:5px}
 body[data-view=chords] .objective-chords-card .finger-list{gap:clamp(6px,2.5cqi,12px)}
 body[data-view=chords] .objective-chords-card .chord-mark-key{gap:12px}
 body[data-view=chords] .objective-chords-card .open-string-symbol{width:11px;height:11px;flex-basis:11px}
 body[data-view=chords] .objective-chords-card .muted-string-symbol{width:11px;height:11px;flex-basis:11px;font-size:16px}
 body[data-view=chords] .objective-practice-card .practice-pair-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 body[data-view=chords] .objective-practice-card .practice-progression-tabs{grid-template-columns:1fr!important}
 body[data-view=chords] .objective-practice-disclosure>summary{min-height:44px;padding:6px 10px}
 body[data-view=chords] .objective-practice-disclosure>summary strong{font-size:16px}
 body[data-view=chords] .objective-practice-disclosure-body{padding:7px}
}

/* Final sizing safeguards for the tuner diagram, hero copy, and chord options. */
.tuner-note-dialog{max-height:90vh;overflow:auto}
.tuner-note-dialog img{max-height:76vh;object-fit:contain}
.chords-hero .chords-hero-subtitle{white-space:nowrap}
body[data-view=chords] .chord-card-heading:has(.chord-variant-nav) .chord-variant-nav{grid-column:2;grid-row:1;position:static;margin:0}
body[data-view=chords] .chord-card-heading:has(.chord-variant-nav) .play-chord{grid-column:3;grid-row:1;position:static}
@media(max-width:600px){.chords-hero .chords-hero-subtitle{font-size:8px!important;letter-spacing:-.1px}}

/* Keep disclosure marks optically centered and make lesson numbers scannable while closed. */
body[data-view=chords] .objective-panel:is([data-objective=practice],[data-objective=strumming]) .progression-details>summary{position:relative;padding-right:48px}
body[data-view=chords] .objective-panel:is([data-objective=practice],[data-objective=strumming]) .progression-details>summary:before{display:grid;place-items:center;line-height:1!important;text-indent:0;padding:0 0 1px}
.progression-summary-number{position:absolute;right:11px;top:50%;translate:0 -50%;display:grid;place-items:center;width:25px;height:25px;border:1.5px solid var(--theme-accent);border-radius:50%;background:var(--theme-surface);color:var(--theme-accent-deep);font:900 11px/1 var(--app-font)}
html[data-theme^=dark] .progression-summary-number{background:var(--theme-soft)}

/* Practice and Strumming rows lead with their lesson number and scale to the card. */
body[data-view=chords] .objective-panel:is([data-objective=practice],[data-objective=strumming]) .objective-library-card{container-type:inline-size}
body[data-view=chords] .objective-panel:is([data-objective=practice],[data-objective=strumming]) .objective-library-card>.progression-details>summary{grid-template-columns:32px minmax(0,1fr);padding-left:6px;padding-right:8px;column-gap:11px}
body[data-view=chords] .objective-panel:is([data-objective=practice],[data-objective=strumming]) .objective-library-card>.progression-details>summary:before{display:none}
body[data-view=chords] .objective-panel:is([data-objective=practice],[data-objective=strumming]) .progression-summary-number{position:static;grid-column:1;grid-row:1/3;align-self:center;justify-self:center;translate:none;width:27px;height:27px;background:var(--theme-accent);color:var(--theme-on-accent);font-size:12px}
body[data-view=chords] .objective-panel:is([data-objective=practice],[data-objective=strumming]) .progression-summary p,body[data-view=chords] .objective-panel:is([data-objective=practice],[data-objective=strumming]) .progression-summary h3{grid-column:2}
@container (min-width:620px){
 body[data-view=chords] .objective-panel:is([data-objective=practice],[data-objective=strumming]) .objective-library-card>.progression-details>summary{grid-template-columns:42px minmax(0,1fr);min-height:72px;padding:10px 12px;column-gap:15px}
 body[data-view=chords] .objective-panel:is([data-objective=practice],[data-objective=strumming]) .progression-summary-number{width:34px;height:34px;font-size:15px}
 body[data-view=chords] .objective-panel:is([data-objective=practice],[data-objective=strumming]) .objective-library-card>.progression-details .progression-summary p{font-size:12px;letter-spacing:.8px}
 body[data-view=chords] .objective-panel:is([data-objective=practice],[data-objective=strumming]) .objective-library-card>.progression-details .progression-summary h3{margin-top:4px;font-size:24px;line-height:1.1}
}

body[data-view=chords] .strumming-panel .first-three-four{margin-top:18px;padding-top:18px;border-top-width:4px}

/* Build-your-own tools follow the same expandable card language as the lesson libraries. */
body[data-view=chords] .practice-pattern-group,body[data-view=chords] .custom-practice-tools{margin-top:0;padding:0;background:transparent}
body[data-view=chords] .custom-practice-tools{margin-top:18px;padding-top:16px;border-top:1px solid var(--theme-border)}
body[data-view=chords] .practice-group-heading,body[data-view=chords] .custom-practice-heading{padding:2px 2px 11px;border-bottom:1px solid var(--theme-border)}
body[data-view=chords] .practice-group-heading>p,body[data-view=chords] .custom-practice-heading>p{margin:0;color:var(--theme-accent-deep);font-size:10px;font-weight:900;letter-spacing:1.2px}
body[data-view=chords] .practice-group-heading>h2,body[data-view=chords] .custom-practice-heading>h2{margin:3px 0 2px;color:var(--theme-ink);font-size:24px}
body[data-view=chords] .practice-group-heading>span,body[data-view=chords] .custom-practice-heading>span{color:var(--theme-muted);font-size:12px;line-height:1.4}
body[data-view=chords] .custom-progression-builder{margin:0;border-bottom:1px solid var(--theme-border);background:transparent}
body[data-view=chords] .custom-progression-builder:last-child{border-bottom:0}
body[data-view=chords] .custom-progression-builder>summary{display:flex;align-items:center;gap:10px;min-height:58px;padding:9px 4px;list-style:none;cursor:pointer}
body[data-view=chords] .custom-progression-builder>summary::-webkit-details-marker{display:none}
body[data-view=chords] .custom-progression-builder>summary small{display:block;color:var(--theme-accent-deep);font-size:8px;font-weight:900;letter-spacing:1px}
body[data-view=chords] .custom-progression-builder>summary strong{display:block;margin-top:2px;color:var(--theme-ink);font-size:18px}
body[data-view=chords] .custom-progression-body{padding:2px 4px 14px}
body[data-view=chords] .custom-progression-body>p{margin:0;color:var(--theme-muted);font-size:12px;line-height:1.45}
body[data-view=chords] .custom-progression-controls{display:grid;grid-template-columns:minmax(0,2fr) minmax(180px,1fr);gap:12px;margin:14px 0}
body[data-view=chords] .custom-chord-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
body[data-view=chords] .custom-2-chord .custom-chord-controls{grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-view=chords] .custom-dynamic-chord-controls{grid-template-columns:repeat(4,minmax(110px,1fr));align-items:end}
body[data-view=chords] .custom-progression-controls label{display:grid;gap:4px;color:var(--theme-accent-deep);font:900 9px/1.2 var(--app-font);letter-spacing:.7px;text-transform:uppercase}
body[data-view=chords] .custom-progression-controls select{width:100%;min-height:38px;padding:7px;border:1px solid var(--theme-border-strong);border-radius:6px;background:var(--theme-surface);color:var(--theme-ink);font:800 13px var(--app-font)}
body[data-view=chords] .custom-measure-select-row{display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:4px}
body[data-view=chords] .remove-custom-measure{display:grid;place-items:center;min-height:38px;border:1px solid var(--theme-border-strong);border-radius:6px;background:var(--theme-surface);color:var(--theme-accent-deep);font:900 18px/1 Arial;cursor:pointer}
body[data-view=chords] .remove-custom-measure:disabled{cursor:not-allowed;opacity:.35}
body[data-view=chords] .add-custom-measure{display:flex;align-items:center;justify-content:center;gap:6px;min-height:38px;border:1px dashed var(--theme-accent);border-radius:6px;background:var(--theme-surface);color:var(--theme-accent-deep);font:900 10px/1 var(--app-font);letter-spacing:.5px;text-transform:uppercase;cursor:pointer}
body[data-view=chords] .add-custom-measure>span{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--theme-accent);color:var(--theme-on-accent);font:900 15px/1 Arial}
body[data-view=chords] .custom-dynamic-progression .measure-row{grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible}
body[data-view=chords] .custom-dynamic-progression .music-measure{min-width:0}
body[data-view=chords] .custom-progression-body>.change-card{margin-top:0}
body[data-view=chords] .custom-progression-body>.change-card .change-top{display:none}
@media(max-width:760px){body[data-view=chords] .custom-progression-controls{grid-template-columns:1fr}body[data-view=chords] .custom-chord-controls,body[data-view=chords] .custom-dynamic-chord-controls{grid-template-columns:repeat(2,minmax(0,1fr))}body[data-view=chords] .custom-dynamic-progression .measure-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@container (max-width:760px){
 body[data-view=chords] .custom-progression-controls{grid-template-columns:1fr}
 body[data-view=chords] .custom-chord-controls,body[data-view=chords] .custom-dynamic-chord-controls{grid-template-columns:repeat(2,minmax(0,1fr))}
 body[data-view=chords] .custom-dynamic-progression .measure-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 body[data-view=chords] .custom-dynamic-progression .add-custom-measure{grid-column:1/-1;justify-self:start;min-width:110px}
}

body[data-view=chords] .objective-panel[data-objective=practice] .objective-library-card>.requested-practice{margin-top:18px;padding-top:16px;border-top:1px solid var(--theme-border)}
body[data-view=chords] .objective-panel[data-objective=practice] .objective-library-card>.requested-practice>summary{padding-left:2px}
body[data-view=chords] .objective-panel[data-objective=practice] .objective-library-card>.requested-practice summary strong{font-size:21px}
body[data-view=chords] .requested-strum-control{display:grid;gap:4px;margin:8px 0 10px;color:var(--theme-accent-deep);font:900 9px/1.2 var(--app-font);letter-spacing:.7px;text-transform:uppercase}
body[data-view=chords] .requested-strum-control select{box-sizing:border-box;width:100%;min-height:38px;padding:7px;border:1px solid var(--theme-border-strong);border-radius:6px;background:var(--theme-surface);color:var(--theme-ink);font:800 13px var(--app-font);text-transform:none}
@container (min-width:620px){body[data-view=chords] .custom-progression-builder>summary strong,body[data-view=chords] .objective-panel[data-objective=practice] .objective-library-card>.requested-practice summary strong{font-size:24px}}

/* First Chords UI system: one hierarchy for Practice and Strumming at every size. */
body[data-view=chords] .objective-panel:is([data-objective=practice],[data-objective=strumming]) .objective-library-card{
 display:grid;gap:12px;padding:0;border:0;border-radius:0;background:transparent
}
body[data-view=chords] .library-section{
 display:block;margin:0;padding:0 12px;border:1px solid var(--theme-border);border-top:4px solid var(--theme-accent);border-radius:10px;background:var(--theme-soft);overflow:hidden
}
body[data-view=chords] .library-section>summary{
 box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) 30px;align-items:center;gap:10px;width:100%;min-height:72px;padding:12px 2px;list-style:none;cursor:pointer
}
body[data-view=chords] .library-section>summary::-webkit-details-marker{display:none}
body[data-view=chords] .library-section>summary small{
 display:block;margin:0;color:var(--theme-accent-deep);font:900 9px/1.15 var(--app-font);letter-spacing:1.15px
}
body[data-view=chords] .library-section>summary strong{
 display:block;margin:4px 0 0;color:var(--theme-ink);font:750 23px/1.08 var(--app-font)
}
body[data-view=chords] .library-section>summary em{
 display:block;margin-top:6px;color:var(--theme-muted);font:400 12px/1.4 var(--app-font)
}
body[data-view=chords] .section-toggle{
 display:grid;place-items:center;width:24px;height:24px;border:1.5px solid var(--theme-accent);border-radius:50%;color:var(--theme-accent-deep);font:900 17px/1 Arial
}
body[data-view=chords] .section-toggle:before{content:'+'}
body[data-view=chords] .library-section[open]>summary .section-toggle:before{content:'−'}
body[data-view=chords] .library-section[open]>summary{border-bottom:1px solid var(--theme-border)}
body[data-view=chords] .library-section-body,body[data-view=chords] .requested-practice-body{padding:0 0 8px;border:0;background:transparent}

/* Every teachable item is the same numbered disclosure row. */
body[data-view=chords] .library-section-body>.progression-details,
body[data-view=chords] .requested-practice-body>.progression-details,
body[data-view=chords] .custom-progression-builder{
 margin:0;padding:0;border:0;border-bottom:1px solid var(--theme-border);border-radius:0;background:transparent;overflow:visible
}
body[data-view=chords] .library-section-body>:last-child,
body[data-view=chords] .requested-practice-body>:last-child{border-bottom:0}
body[data-view=chords] .library-section-body>.progression-details>summary,
body[data-view=chords] .requested-practice-body>.progression-details>summary,
body[data-view=chords] .custom-progression-builder>summary{
 position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) 24px;grid-template-rows:auto auto;align-items:center;column-gap:10px;min-height:58px;padding:8px 2px;list-style:none;background:transparent;color:var(--theme-ink);cursor:pointer
}
body[data-view=chords] .library-section-body>.progression-details>summary:before,
body[data-view=chords] .requested-practice-body>.progression-details>summary:before,
html[data-theme=classic] body[data-view=chords] .objective-panel:is([data-objective=practice],[data-objective=strumming]) .objective-library-card .library-section .progression-details>summary:before{display:none!important;content:none!important}
body[data-view=chords] .library-section-body>.progression-details>summary:after,
body[data-view=chords] .requested-practice-body>.progression-details>summary:after,
body[data-view=chords] .custom-progression-builder>summary:after{
 content:'+';position:static;grid-column:3;grid-row:1/3;display:grid;place-items:center;justify-self:end;color:var(--theme-accent-deep);font:900 18px/1 Arial;translate:none
}
body[data-view=chords] .library-section-body>.progression-details[open]>summary:after,
body[data-view=chords] .requested-practice-body>.progression-details[open]>summary:after,
body[data-view=chords] .custom-progression-builder[open]>summary:after{content:'−'}
body[data-view=chords] .library-section .progression-summary-number,
body[data-view=chords] .custom-progression-builder .progression-summary-number{
 position:static;grid-column:1;grid-row:1/3;align-self:center;justify-self:center;translate:none;width:28px;height:28px;border:0;background:var(--theme-accent);color:var(--theme-on-accent);font:900 12px/1 var(--app-font)
}
body[data-view=chords] .library-section .progression-summary p,
body[data-view=chords] .library-section .progression-summary h3,
body[data-view=chords] .custom-progression-builder>summary>span:not(.progression-summary-number){grid-column:2}
body[data-view=chords] .library-section .progression-summary p,
body[data-view=chords] .custom-progression-builder>summary small{
 margin:0;color:var(--theme-accent-deep);font:900 8px/1.15 var(--app-font);letter-spacing:.7px
}
body[data-view=chords] .library-section .progression-summary h3,
body[data-view=chords] .custom-progression-builder>summary strong{
 margin:3px 0 0;color:var(--theme-ink);font:italic 750 16px/1.15 var(--app-font)
}
body[data-view=chords] .library-section .progression-body,
body[data-view=chords] .custom-progression-body{padding:8px 2px 12px;border-top:1px solid var(--theme-border);background:transparent}

@container (min-width:620px){
 body[data-view=chords] .library-section>summary strong{font-size:26px}
 body[data-view=chords] .library-section-body>.progression-details>summary,
 body[data-view=chords] .requested-practice-body>.progression-details>summary,
 body[data-view=chords] .custom-progression-builder>summary{grid-template-columns:42px minmax(0,1fr) 28px;min-height:70px;padding:10px 4px;column-gap:14px}
 body[data-view=chords] .library-section .progression-summary-number,
 body[data-view=chords] .custom-progression-builder .progression-summary-number{width:34px;height:34px;font-size:15px}
 body[data-view=chords] .library-section .progression-summary p,
 body[data-view=chords] .custom-progression-builder>summary small{font-size:10px}
 body[data-view=chords] .library-section .progression-summary h3,
 body[data-view=chords] .custom-progression-builder>summary strong,
 body[data-view=chords] .requested-song>summary .requested-song-heading strong{font-size:20px}
}
@media(max-width:520px){
 body[data-view=chords] .library-section{padding-inline:9px}
 body[data-view=chords] .library-section>summary{min-height:62px;padding-block:9px}
 body[data-view=chords] .library-section>summary strong{font-size:20px}
 body[data-view=chords] .library-section>summary em{font-size:11px}
 body[data-view=chords] .library-section-body>.progression-details>summary,
 body[data-view=chords] .requested-practice-body>.progression-details>summary,
 body[data-view=chords] .custom-progression-builder>summary{min-height:54px}
 body[data-view=chords] .requested-song>summary{grid-template-columns:34px minmax(0,1fr) 30px;grid-template-rows:auto auto;column-gap:8px;row-gap:2px}
 body[data-view=chords] .requested-song>summary:before{grid-column:3;grid-row:1/3}
 body[data-view=chords] .requested-song>summary .requested-song-number{grid-row:1/3}
 body[data-view=chords] .requested-song>summary .requested-song-heading{grid-column:2;grid-row:1}
 body[data-view=chords] .requested-song>summary .requested-song-count{grid-column:2;grid-row:2;font-size:9px}
 body[data-view=chords] .requested-song-body{margin-left:18px;padding-inline:6px}
}

/* Retire the legacy Requested/Custom overrides in favor of the master section card. */
html body[data-view=chords] .objective-panel[data-objective=practice] .objective-library-card>.requested-practice.library-section,
html body[data-view=chords] .objective-panel[data-objective=practice] .objective-library-card>.custom-practice-tools.library-section{
 display:block;margin:0;padding:0 12px;border:1px solid var(--theme-border);border-top:4px solid var(--theme-accent);border-radius:10px;background:var(--theme-soft);overflow:hidden
}
html body[data-view=chords] .objective-panel[data-objective=practice] .objective-library-card>.requested-practice.library-section>summary,
html body[data-view=chords] .objective-panel[data-objective=practice] .objective-library-card>.custom-practice-tools.library-section>summary{
 box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) 30px;align-items:center;gap:10px;width:100%;min-height:72px;padding:12px 2px;background:transparent
}
html body[data-view=chords] .objective-panel[data-objective=practice] .objective-library-card>.requested-practice.library-section summary strong,
html body[data-view=chords] .objective-panel[data-objective=practice] .objective-library-card>.custom-practice-tools.library-section summary strong{
 font:750 23px/1.08 var(--app-font)
}
html body[data-view=chords] .objective-panel[data-objective=practice] .objective-library-card>.requested-practice.library-section .requested-practice-body{
 padding:0 0 8px;border:0;background:transparent
}

/* Objective practice follows the same card and numbered-row hierarchy as Practice and Strumming. */
body[data-view=chords] .objective-practice-disclosure.library-section{display:block;margin:0;padding:0 12px;border:1px solid var(--theme-border);border-top:4px solid var(--theme-accent);border-radius:10px;background:var(--theme-soft);overflow:hidden}
body[data-view=chords] .objective-practice-disclosure.library-section>summary{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) 30px;align-items:center;gap:10px;width:100%;min-height:72px;padding:12px 2px;background:transparent;color:var(--theme-ink);cursor:pointer}
body[data-view=chords] .objective-practice-disclosure.library-section>.objective-practice-disclosure-body{padding:0 0 8px}
body[data-view=chords] .practice-drawers.objective-practice-card-stack{display:grid;grid-template-columns:1fr;gap:12px;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
body[data-view=chords] .objective-practice-group-card{min-width:0}
body[data-view=chords] .objective-practice-notes.lesson-details{margin:0 1px 9px;padding:8px 0;border:0;border-top:1px solid var(--theme-border);border-radius:0;background:transparent;color:var(--theme-ink)}
body[data-view=chords] .objective-practice-notes>.lesson-summary{box-sizing:border-box;width:100%;cursor:pointer}
body[data-view=chords] .objective-practice-notes>.practice-instructions-body{border:0;border-top:1px solid var(--theme-border);background:transparent}
body[data-view=chords] .objective-practice-card .practice-transition{display:block;padding:10px 2px 8px;border-bottom:1px solid var(--theme-border)}
body[data-view=chords] .objective-practice-card .practice-transition p{font:900 8px/1.15 var(--app-font);letter-spacing:.7px}
body[data-view=chords] .objective-practice-card .practice-transition h2{margin:3px 0 0;color:var(--theme-ink);font:750 18px/1.1 var(--app-font);letter-spacing:0;text-transform:none}
body[data-view=chords] .objective-practice-card .practice-transition span{display:block;margin:4px 0 0;color:var(--theme-muted);font:400 11px/1.35 var(--app-font)}
body[data-view=chords] .objective-practice-card .practice-instructions{margin:0;border:0;border-bottom:1px solid var(--theme-border)}
body[data-view=chords] .objective-practice-card .practice-instructions>summary{box-sizing:border-box;width:100%;min-height:50px;padding:7px 2px;background:transparent;color:var(--theme-ink);cursor:pointer}
body[data-view=chords] .objective-practice-card .practice-instructions .drawer-toggle{border-color:var(--theme-accent);background:transparent;color:var(--theme-accent-deep);box-shadow:none}
body[data-view=chords] .objective-practice-card .practice-instructions summary small{color:var(--theme-accent-deep)}
body[data-view=chords] .objective-practice-card .practice-instructions summary strong{color:var(--theme-ink);font-style:italic;font-size:15px}
body[data-view=chords] .objective-practice-card .practice-exercise-tabs{display:block;margin:0}
body[data-view=chords] .objective-practice-card .practice-exercise-tabs .practice-exercise-tab{box-sizing:border-box;display:grid;grid-template-columns:34px minmax(0,1fr) 24px;grid-template-rows:auto auto;align-items:center;column-gap:10px;width:100%;height:auto;min-height:58px;margin:0;padding:8px 2px;border:0;border-bottom:1px solid var(--theme-border);border-radius:0;background:transparent;color:var(--theme-ink);text-align:left;cursor:pointer}
body[data-view=chords] .objective-practice-card .practice-exercise-tabs .practice-exercise-tab:after{content:'+';grid-column:3;grid-row:1/3;justify-self:end;color:var(--theme-accent-deep);font:900 18px/1 Arial}
body[data-view=chords] .objective-practice-card .practice-exercise-tabs .practice-exercise-tab[aria-pressed=true]{border-color:var(--theme-border);background:transparent;color:var(--theme-ink)}
body[data-view=chords] .objective-practice-card .practice-exercise-tabs .practice-exercise-tab[aria-pressed=true]:after{content:'−'}
body[data-view=chords] .objective-practice-card .practice-exercise-tabs .exercise-tab-number{grid-column:1;grid-row:1/3;align-self:center;justify-self:center;width:28px;height:28px;flex-basis:28px;border:0;background:var(--theme-accent);color:var(--theme-on-accent);font:900 12px/1 var(--app-font)}
body[data-view=chords] .objective-practice-card .practice-exercise-tabs .drawer-copy{grid-column:2;grid-row:1/3;min-width:0}
body[data-view=chords] .objective-practice-card .practice-exercise-tabs .practice-exercise-tab small{display:block;color:var(--theme-accent-deep);font:900 8px/1.15 var(--app-font);letter-spacing:.7px}
body[data-view=chords] .objective-practice-card .practice-exercise-tabs .practice-exercise-tab strong{display:block;margin:3px 0 0;color:var(--theme-ink);font:italic 750 16px/1.15 var(--app-font);white-space:normal}
body[data-view=chords] .objective-practice-card .practice-progression-heading{margin:12px 0 0;padding:10px 2px 7px;border-top:3px solid var(--theme-accent);border-bottom:1px solid var(--theme-border);color:var(--theme-ink);font:750 18px/1.1 var(--app-font);letter-spacing:0;text-transform:none}
body[data-view=chords] .objective-practice-card .practice-progression-tabs{margin:0}
body[data-view=chords] .objective-practice-card .practice-exercise-panel{margin:7px 0 10px;padding:8px 2px 10px;border:0;border-bottom:1px solid var(--theme-border);border-radius:0;background:transparent}
body[data-view=chords] .objective-strum-control{margin:0 0 9px}
body[data-view=chords] .objective-strum-control select{width:100%}
@container (min-width:620px){body[data-view=chords] .objective-practice-card .practice-exercise-tabs .practice-exercise-tab{grid-template-columns:42px minmax(0,1fr) 28px;min-height:70px;padding:10px 4px;column-gap:14px}body[data-view=chords] .objective-practice-card .practice-exercise-tabs .exercise-tab-number{width:34px;height:34px;font-size:15px}body[data-view=chords] .objective-practice-card .practice-exercise-tabs .practice-exercise-tab small{font-size:10px}body[data-view=chords] .objective-practice-card .practice-exercise-tabs .practice-exercise-tab strong{font-size:20px}}
@media(max-width:520px){body[data-view=chords] .objective-practice-disclosure.library-section{padding-inline:9px}body[data-view=chords] .objective-practice-disclosure.library-section>summary{min-height:62px;padding-block:9px}body[data-view=chords] .objective-practice-card .practice-exercise-tabs .practice-exercise-tab{min-height:54px}}

/* Chord variations stay anchored to the chord name and use one forward control. */
body[data-view=chords] .chord-card-heading:has(.chord-variant-nav){
  display:flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  padding-right:38px;
}
body[data-view=chords] .chord-card-heading:has(.chord-variant-nav)>div{
  display:grid;
  grid-template-columns:minmax(0,max-content) 28px;
  align-items:center;
  gap:1px 7px;
  min-width:0;
  padding-right:0;
}
body[data-view=chords] .chord-card-heading:has(.chord-variant-nav)>div>span{grid-column:1/-1}
body[data-view=chords] .chord-card-heading:has(.chord-variant-nav) h2{grid-column:1;grid-row:2}
body[data-view=chords] .chord-card-heading:has(.chord-variant-nav) .chord-variant-nav{
  position:static;
  grid-column:2;
  grid-row:2;
  margin:0;
}
body[data-view=chords] .chord-card-heading:has(.chord-variant-nav) .chord-variant-nav button{
  width:27px;
  height:27px;
}
body[data-view=chords] .chord-card-heading:has(.chord-variant-nav) .play-chord{
  position:absolute;
  top:0;
  right:0;
  margin:0;
}
@media(max-width:740px){
  body[data-view=chords] .chord-card-heading,
  body[data-view=chords] .chord-card-heading:has(.chord-variant-nav){min-height:36px}
  body[data-view=chords] .chord-card-heading:has(.chord-variant-nav)>div{padding-right:0}
}
/* Expanded numbered exercises receive a quiet location cue; section-card headers do not. */
body[data-view=chords] .practice-exercise-tab[aria-pressed=true],
body[data-view=chords] .progression-details[open]>summary,
body[data-view=chords] .requested-song[open]>summary,
body[data-view=chords] .custom-progression-builder[open]>summary{
  background:color-mix(in srgb,var(--theme-nav) 11%,var(--theme-soft));
  position:relative;
  z-index:1;
  box-shadow:0 3px 8px color-mix(in srgb,var(--theme-ink) 16%,transparent);
  transition:background-color .15s ease,box-shadow .15s ease;
}
html[data-theme^=dark] body[data-view=chords] .practice-exercise-tab[aria-pressed=true],
html[data-theme^=dark] body[data-view=chords] .progression-details[open]>summary,
html[data-theme^=dark] body[data-view=chords] .requested-song[open]>summary,
html[data-theme^=dark] body[data-view=chords] .custom-progression-builder[open]>summary{
  background:color-mix(in srgb,var(--theme-nav) 28%,var(--theme-soft));
}
body[data-view=chords] .practice-exercise-tab[aria-pressed=true] strong,
body[data-view=chords] .progression-details[open]>summary h3,
body[data-view=chords] .requested-song[open]>summary strong,
body[data-view=chords] .custom-progression-builder[open]>summary strong{color:var(--theme-ink)}
/* Objective exercise details nest directly beneath their numbered row. */
body[data-view=chords] .objective-practice-card .practice-exercise-tabs>.practice-exercise-panel{
  box-sizing:border-box;
  width:calc(100% - 8px);
  margin:0 0 10px 8px;
  padding:9px;
  border:1px solid var(--theme-border);
  border-top:0;
  border-radius:0 0 0 8px;
  background:color-mix(in srgb,var(--theme-soft-2) 90%,var(--theme-ink));
}
html[data-theme^=dark] body[data-view=chords] .objective-practice-card .practice-exercise-tabs>.practice-exercise-panel{background:color-mix(in srgb,var(--theme-soft-2) 84%,var(--theme-page))}
body[data-view=chords] .objective-practice-card .practice-exercise-tabs>.practice-exercise-panel[hidden]{display:none}
body[data-view=chords] .objective-practice-card .practice-exercise-tabs>.practice-exercise-panel .music-measure{background:var(--theme-surface)}
/* The same nested detail surface follows every open numbered exercise. */
body[data-view=chords] .progression-details[open]>.progression-body,
body[data-view=chords] .custom-progression-builder[open]>.custom-progression-body{
  box-sizing:border-box;
  width:calc(100% - 8px);
  margin:0 0 10px 8px;
  padding:9px;
  border:1px solid var(--theme-border);
  border-top:0;
  border-radius:0 0 0 8px;
  background:color-mix(in srgb,var(--theme-soft-2) 90%,var(--theme-ink));
}
html[data-theme^=dark] body[data-view=chords] .progression-details[open]>.progression-body,
html[data-theme^=dark] body[data-view=chords] .custom-progression-builder[open]>.custom-progression-body{
  background:color-mix(in srgb,var(--theme-soft-2) 84%,var(--theme-page));
}
body[data-view=chords] .progression-details[open]>.progression-body .music-measure,
body[data-view=chords] .custom-progression-builder[open]>.custom-progression-body .music-measure{
  background:var(--theme-surface);
}

/* Objective 1 introduces the symbols exactly where students first use the beat grid. */
body[data-view=chords] .objective-rhythm-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;margin:0 0 12px;padding:9px 10px;border-left:3px solid var(--theme-nav);background:var(--theme-soft-2);color:var(--theme-ink);font-size:11px;line-height:1.3}
body[data-view=chords] .objective-rhythm-legend>strong{grid-column:1/-1;color:var(--theme-accent-deep);font-size:9px;letter-spacing:.8px}
body[data-view=chords] .objective-rhythm-legend>span{display:flex;align-items:center;gap:6px}
body[data-view=chords] .objective-rhythm-legend b{min-width:24px;color:var(--theme-nav);font-size:15px;text-align:center}
@media(max-width:430px){body[data-view=chords] .objective-rhythm-legend{grid-template-columns:1fr}}

/* Fully Customizable keeps chord and beat length together in one compact control row. */
body[data-view=chords] .custom-dynamic-progression .custom-measure-select-row{grid-template-columns:minmax(0,1fr) 58px 34px}
body[data-view=chords] .custom-beat-count{padding-inline:4px!important;text-align:center}

/* Guitar adds one focused movable-shapes objective; ukulele paths retain five equal tabs. */
body[data-view=chords] .objective-tabs[data-course-family=guitar]{grid-template-columns:repeat(6,minmax(0,1fr))}
body[data-view=chords] .objective-tabs [data-guitar-only][hidden]{display:none}

/* Movable chord diagrams label the first visible fret instead of forcing high shapes off-card. */
body[data-view=chords] .chord-diagram .fret-position-marker{fill:var(--theme-border);opacity:.72;pointer-events:none}
body[data-view=chords] .chord-title-subheader{display:block;margin:3px 0 0;color:var(--theme-text);font:800 9px/1.2 var(--app-font);letter-spacing:.35px;opacity:.68}
body[data-view=chords] .preview-heading .chord-title-subheader{margin-top:4px;font-size:10px}

/* Fully Customizable uses direct chord tiles and a focused editor instead of dense inline menus. */
body[data-view=chords] .custom-dynamic-progression .custom-dynamic-chord-controls{display:flex;flex-wrap:nowrap;align-items:stretch;gap:7px;margin:14px 0 10px;padding-bottom:3px;overflow-x:auto;scrollbar-width:thin}
body[data-view=chords] .custom-chord-tile{box-sizing:border-box;position:relative;display:grid;grid-template-rows:1fr auto auto;align-content:space-between;flex:0 0 clamp(82px,20%,160px);min-width:82px;min-height:78px;padding:10px 9px 7px;border:1px solid var(--theme-border-strong);border-radius:7px;background:var(--theme-surface);color:var(--theme-ink);text-align:left;cursor:pointer}
body[data-view=chords] .custom-chord-tile:hover,body[data-view=chords] .custom-chord-tile:focus-visible{border-color:#37965c;box-shadow:0 0 0 2px color-mix(in srgb,#37965c 22%,transparent);outline:0}
body[data-view=chords] .custom-chord-tile strong{font:750 23px/1 var(--app-font)}
body[data-view=chords] .custom-chord-tile>span{margin-top:8px;color:var(--theme-muted);font:800 9px/1 var(--app-font);letter-spacing:.35px;text-transform:uppercase}
body[data-view=chords] .custom-chord-tile>i{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:7px}
body[data-view=chords] .custom-chord-tile>i b{height:8px;border-left:1px solid var(--theme-border-strong);opacity:.42}
body[data-view=chords] .custom-chord-tile>i b.active{border-color:#37965c;opacity:1}
body[data-view=chords] .custom-dynamic-progression .add-custom-measure{align-self:stretch;flex:0 0 38px;min-width:38px;min-height:78px;padding:0;border-style:solid;font:500 25px/1 Arial;letter-spacing:0}
body[data-view=chords] .custom-player-options{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px;margin:0 0 12px}
body[data-view=chords] .custom-player-options .custom-strum-control{margin:0}
body[data-view=chords] .custom-strum-overlay-toggle{display:flex;align-items:center;gap:6px;min-height:38px;padding:7px 11px;border:1px solid var(--theme-border-strong);border-radius:7px;background:var(--theme-surface);color:var(--theme-ink);font:800 10px/1 var(--app-font);cursor:pointer}
body[data-view=chords] .custom-strum-overlay-toggle>span{color:#37965c;font-size:17px}
body[data-view=chords] .custom-strum-overlay-toggle[aria-pressed=true]{border-color:#37965c;background:#e7f4eb;color:#195d37}
body[data-view=chords] .custom-dynamic-progression:not(.show-strum-overlay) .measure-row{display:none}
body[data-view=chords] .custom-chord-editor{box-sizing:border-box;width:min(92vw,460px);max-width:460px;padding:0;border:0;border-radius:10px;background:var(--theme-surface);color:var(--theme-ink);box-shadow:0 18px 55px #07132966;overflow:hidden}
body[data-view=chords] .custom-chord-editor::backdrop{background:#07132999}
body[data-view=chords] .custom-chord-editor form{display:grid;gap:16px;padding:18px}
body[data-view=chords] .custom-chord-editor header{display:flex;align-items:start;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--theme-border)}
body[data-view=chords] .custom-chord-editor header small{color:var(--theme-accent-deep);font:900 9px/1 var(--app-font);letter-spacing:.8px}
body[data-view=chords] .custom-chord-editor header h3{margin:4px 0 0;font:750 24px/1.1 var(--app-font)}
body[data-view=chords] .custom-editor-close{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid var(--theme-border-strong);border-radius:50%;background:transparent;color:var(--theme-muted);font-size:20px;cursor:pointer}
body[data-view=chords] .custom-editor-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
body[data-view=chords] .custom-editor-fields label{display:grid;gap:5px;color:var(--theme-accent-deep);font:900 9px/1 var(--app-font);letter-spacing:.6px;text-transform:uppercase}
body[data-view=chords] .custom-editor-fields select{box-sizing:border-box;width:100%;min-height:42px;padding:8px;border:1px solid var(--theme-border-strong);border-radius:6px;background:var(--theme-surface);color:var(--theme-ink);font:800 14px var(--app-font);text-transform:none}
body[data-view=chords] .custom-editor-duration{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:8px;margin:0;padding:12px;border:1px solid var(--theme-border);border-radius:8px}
body[data-view=chords] .custom-editor-duration legend{padding:0 5px;color:var(--theme-accent-deep);font:900 9px/1 var(--app-font);letter-spacing:.6px;text-transform:uppercase}
body[data-view=chords] .custom-editor-duration button{height:38px;border:1px solid var(--theme-border-strong);border-radius:6px;background:var(--theme-soft-2);color:var(--theme-ink);font:900 20px/1 Arial;cursor:pointer}
body[data-view=chords] .custom-editor-duration output{text-align:center;font:850 15px/1 var(--app-font)}
body[data-view=chords] .custom-chord-editor footer{display:flex;justify-content:space-between;gap:10px;padding-top:3px}
body[data-view=chords] .custom-chord-editor footer button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:9px 14px;border:0;border-radius:6px;color:#fff;font:850 11px/1 var(--app-font);cursor:pointer}
body[data-view=chords] .custom-editor-delete{background:#d74636}
body[data-view=chords] .custom-editor-delete:disabled{opacity:.35;cursor:not-allowed}
body[data-view=chords] .custom-editor-save{background:#3d9b5f}
@media(max-width:560px){body[data-view=chords] .custom-player-options{grid-template-columns:1fr}body[data-view=chords] .custom-strum-overlay-toggle{justify-content:center}body[data-view=chords] .custom-editor-fields{grid-template-columns:1fr}}

/* Follow Along is the global green action and cue language. */
body[data-view=chords] .play-exercise{border-color:#37965c;background:var(--theme-surface);color:#2d7f4c}
body[data-view=chords] .play-exercise:hover,body[data-view=chords] .play-exercise:focus-visible{border-color:#2d7f4c;background:#e7f4eb;color:#256b40;outline:0}
body[data-view=chords] .play-exercise.playing{border-color:#2d7f4c;background:#37965c;color:#fff}
body[data-view=chords] .measure-heading .preview-chord.cue-active,body[data-view=chords] .beat-chord-grid .preview-chord.cue-active,body[data-view=chords] .stroke-row .cue-active,body[data-view=chords] .beat-stroke-grid .cue-active{color:#2f9f63!important;text-shadow:0 0 7px #2f9f63!important;filter:drop-shadow(0 0 4px #2f9f63)}
body[data-view=chords] .music-measure.cue-measure{border-color:#37965c!important;box-shadow:0 0 0 2px #37965c33}
body[data-view=chords] .custom-chord-tile.cue-active{border-color:#37965c;background:#e7f4eb;box-shadow:0 0 0 2px #37965c33}

/* Advanced progression builder: ruler row first, optional tools second. */
body[data-view=chords] .custom-dynamic-progression .custom-dynamic-chord-controls{gap:5px;margin:12px 0 8px}
body[data-view=chords] .custom-dynamic-progression .custom-chord-tile{grid-template-rows:1fr auto;flex:1 0 78px;min-width:78px;min-height:58px;height:58px;padding:6px 0 0;border:1px solid #8f9294;border-radius:5px;background:var(--theme-surface);overflow:hidden}
body[data-view=chords] .custom-dynamic-progression .custom-chord-tile strong{align-self:start;padding:0 8px;color:#0d294d;font:750 22px/1 var(--app-font);white-space:nowrap;transform:translateY(-1px)}
body[data-view=chords] .custom-dynamic-progression .custom-chord-tile strong>span{color:inherit}
body[data-view=chords] .custom-dynamic-progression .custom-chord-tile sup{position:relative;top:.12em;margin-left:1px;color:var(--theme-muted);font:800 14px/1 var(--app-font);letter-spacing:0}
body[data-view=chords] .custom-dynamic-progression .custom-chord-tile .minor-quality{display:inline;margin-left:1px;color:#0d294d;font:500 16px/1 var(--app-font);vertical-align:baseline}
body[data-view=chords] .custom-dynamic-progression .custom-chord-tile>i{position:relative;display:block;box-sizing:border-box;width:100%;height:12px;margin:0;border:0;gap:0}
body[data-view=chords] .custom-dynamic-progression .custom-chord-tile>i b{position:absolute;bottom:0;width:1px;height:11px;background:#8f9294;opacity:1}
body[data-view=chords] .custom-dynamic-progression .custom-chord-tile>i b:nth-child(1){left:calc(100% / var(--beat-count))}
body[data-view=chords] .custom-dynamic-progression .custom-chord-tile>i b:nth-child(2){left:calc(200% / var(--beat-count))}
body[data-view=chords] .custom-dynamic-progression .custom-chord-tile>i b:nth-child(3){left:calc(300% / var(--beat-count))}
body[data-view=chords] .custom-dynamic-progression .custom-chord-tile>i b:nth-child(4){left:calc(400% / var(--beat-count))}
body[data-view=chords] .custom-dynamic-progression .custom-chord-tile>i b:nth-child(5){left:calc(500% / var(--beat-count))}
body[data-view=chords] .custom-dynamic-progression .add-custom-measure{min-height:58px;height:58px;flex-basis:34px;min-width:34px}
body[data-view=chords] .custom-dynamic-progression .change-card{margin-top:0;padding:0;background:transparent;border:0;box-shadow:none}
body[data-view=chords] .custom-dynamic-progression .change-top,body[data-view=chords] .custom-dynamic-progression .exercise-copy{display:none}
body[data-view=chords] .custom-dynamic-progression .custom-advanced-controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin:4px 0 12px;padding:3px 0;border:0;border-radius:0;background:transparent}
body[data-view=chords] .custom-dynamic-progression .custom-advanced-controls .exercise-tempo,body[data-view=chords] .custom-dynamic-progression .custom-advanced-controls .exercise-count-in,body[data-view=chords] .custom-dynamic-progression .custom-advanced-controls .groove-toggle{display:none}
body[data-view=chords] .custom-dynamic-progression .custom-advanced-controls .play-exercise,body[data-view=chords] .custom-settings-trigger,body[data-view=chords] .custom-strum-trigger{display:flex;align-items:center;justify-content:center;gap:7px;width:auto;height:38px;min-width:40px;margin:0;padding:0 14px;border:1px solid #8f9294!important;border-radius:6px;background:var(--theme-surface);color:var(--theme-ink);font:850 10px/1 var(--app-font);cursor:pointer}
body[data-view=chords] .custom-dynamic-progression .custom-advanced-controls .play-exercise{grid-column:1;grid-row:1;justify-self:start;padding:0;width:40px;border-color:#37965c!important;background:var(--theme-surface);color:#2d7f4c}
body[data-view=chords] .custom-dynamic-progression .custom-advanced-controls .play-exercise:hover,body[data-view=chords] .custom-dynamic-progression .custom-advanced-controls .play-exercise:focus-visible{background:#e7f4eb;color:#256b40}
body[data-view=chords] .custom-dynamic-progression .custom-advanced-controls .play-exercise.playing{border-color:#2d7f4c!important;background:#37965c;color:#fff}
body[data-view=chords] .custom-dynamic-progression .custom-advanced-controls .play-exercise svg{width:23px;height:23px}
body[data-view=chords] .custom-settings-trigger{grid-column:3;grid-row:1;justify-self:end}
body[data-view=chords] .custom-strum-trigger{grid-column:2;grid-row:1;justify-self:center}
body[data-view=chords] .custom-settings-trigger>span{font-size:15px;line-height:1}
body[data-view=chords] .visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

body[data-view=chords] .custom-settings-editor,body[data-view=chords] .custom-strum-editor{box-sizing:border-box;width:min(94vw,500px);max-width:500px;padding:0;border:1px solid var(--theme-border-strong);border-radius:12px;background:var(--theme-surface);color:var(--theme-ink);box-shadow:0 20px 60px #07132970;overflow:hidden}
body[data-view=chords] .custom-settings-editor::backdrop,body[data-view=chords] .custom-strum-editor::backdrop{background:#07132999}
body[data-view=chords] .custom-settings-editor form,body[data-view=chords] .custom-strum-editor form{display:grid;gap:20px;padding:24px}
body[data-view=chords] .custom-settings-editor header,body[data-view=chords] .custom-strum-editor header{display:flex;align-items:start;justify-content:space-between;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--theme-border)}
body[data-view=chords] .custom-settings-editor header small,body[data-view=chords] .custom-strum-editor header small{color:var(--theme-accent-deep);font:900 10px/1 var(--app-font);letter-spacing:1px}
body[data-view=chords] .custom-settings-editor header h3,body[data-view=chords] .custom-strum-editor header h3{margin:6px 0 0;font:750 28px/1.1 var(--app-font)}
body[data-view=chords] .custom-settings-close,body[data-view=chords] .custom-strum-close{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:var(--theme-accent);color:var(--theme-on-accent);font-size:0;box-shadow:0 1px 3px color-mix(in srgb,var(--theme-ink) 28%,transparent);cursor:pointer}
body[data-view=chords] .custom-settings-close::before,body[data-view=chords] .custom-strum-close::before{content:'×';font:900 17px/1 Arial;transform:translateY(-.5px)}
body[data-view=chords] .custom-settings-grid{display:grid;grid-template-columns:68px 88px 128px 52px;justify-content:space-between;gap:8px;align-items:end}
body[data-view=chords] .custom-settings-grid>label,body[data-view=chords] .custom-strum-dialog-control{position:relative;display:grid;gap:8px;color:var(--theme-accent-deep);font:900 10px/1 var(--app-font);letter-spacing:.75px;text-transform:uppercase}
body[data-view=chords] .custom-settings-grid select,body[data-view=chords] .custom-strum-dialog-control select{box-sizing:border-box;width:100%;height:44px;min-height:44px;padding:8px 9px;border:1px solid var(--theme-border-strong);border-radius:7px;background:var(--theme-surface);color:var(--theme-ink);font:800 14px var(--app-font);text-transform:none}
body[data-view=chords] .custom-tempo-control{box-sizing:border-box;display:grid;grid-template-columns:34px 1fr auto 34px;align-items:center;height:44px;border:1px solid var(--theme-border-strong);border-radius:7px;background:var(--theme-surface);color:var(--theme-ink);overflow:hidden}
body[data-view=chords] .custom-tempo-control button{display:grid;place-items:center;width:34px;height:42px;padding:0;border:0;background:transparent;color:inherit;font:900 18px/1 var(--app-font);cursor:pointer}
body[data-view=chords] .custom-tempo-control button:active{background:var(--theme-accent);color:var(--theme-on-accent)}
body[data-view=chords] .custom-tempo-control output{justify-self:end;font:850 14px/1 var(--app-font)}
body[data-view=chords] .custom-tempo-control em{margin:0 4px;color:var(--theme-muted);font:900 8px/1 var(--app-font);font-style:normal}
body[data-view=chords] .custom-drums-setting{display:grid;gap:8px;min-height:0;padding:0;border:0;background:transparent}
body[data-view=chords] .custom-drums-control{box-sizing:border-box;display:flex;align-items:center;justify-content:center;height:44px;border:0;background:transparent}
body[data-view=chords] .custom-drums-control input{position:absolute;opacity:0}
body[data-view=chords] .custom-drums-setting i{position:relative;width:34px;height:20px;border-radius:99px;background:#8b9295}
body[data-view=chords] .custom-drums-setting i::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .15s}
body[data-view=chords] .custom-drums-setting:has(input:checked) i{background:#37965c}
body[data-view=chords] .custom-drums-setting:has(input:checked) i::after{transform:translateX(14px)}
body[data-view=chords] .custom-show-strums{display:flex;align-items:center;gap:9px;padding:10px;border:1px solid var(--theme-border);border-radius:7px;background:var(--theme-soft-2);font:750 11px/1.3 var(--app-font)}
body[data-view=chords] .custom-settings-editor footer,body[data-view=chords] .custom-strum-editor footer{display:flex;justify-content:flex-end;padding-top:16px;border-top:1px solid var(--theme-border)}
body[data-view=chords] .custom-settings-save,body[data-view=chords] .custom-strum-save{min-height:46px;padding:11px 17px;border:0;border-radius:7px;background:#3d9b5f;color:#fff;font:850 12px/1 var(--app-font);cursor:pointer}
body[data-view=chords] .custom-chord-editor footer>span{display:flex;gap:8px}
body[data-view=chords] .custom-editor-cancel{border:1px solid var(--theme-border-strong)!important;background:var(--theme-surface)!important;color:var(--theme-ink)!important}
@media(max-width:520px){body[data-view=chords] .custom-settings-editor form,body[data-view=chords] .custom-strum-editor form{padding:16px}body[data-view=chords] .custom-settings-grid{grid-template-columns:66px 82px minmax(112px,128px) 48px;gap:6px}body[data-view=chords] .custom-settings-grid>label{gap:6px}body[data-view=chords] .custom-dynamic-progression .custom-chord-tile{flex-basis:82px}}
@media(max-width:390px){body[data-view=chords] .custom-settings-editor form,body[data-view=chords] .custom-strum-editor form{padding:14px}body[data-view=chords] .custom-settings-grid{grid-template-columns:62px 78px minmax(0,1fr) 46px;gap:6px}body[data-view=chords] .custom-settings-grid>label{font-size:8px;letter-spacing:.45px}body[data-view=chords] .custom-settings-grid select{padding-inline:6px;font-size:12px}body[data-view=chords] .custom-tempo-control{grid-template-columns:27px 1fr auto 27px}body[data-view=chords] .custom-tempo-control button{width:27px}body[data-view=chords] .custom-tempo-control output{font-size:12px}body[data-view=chords] .custom-tempo-control em{font-size:7px;margin-inline:2px}}

/* One compact, labeled playback row for every standard exercise. */
body[data-view=chords] .exercise-toolbar.unified-exercise-toolbar{display:grid;grid-template-columns:56px 102px minmax(108px,1fr) 64px 38px;align-items:end;gap:6px;margin:6px 0 10px}
body[data-view=chords] .exercise-toolbar.unified-exercise-toolbar.without-strumming{grid-template-columns:56px 102px 64px 38px;justify-content:start}
body[data-view=chords] .unified-exercise-toolbar .exercise-tool{display:grid;grid-template-rows:auto 34px;align-items:end;gap:4px;min-width:0}
body[data-view=chords] .unified-exercise-toolbar .exercise-tool-label{color:var(--theme-accent-deep);font:900 8px/1 var(--app-font);letter-spacing:.55px;text-transform:uppercase}
body[data-view=chords] .unified-exercise-toolbar .exercise-tool>:not(.exercise-tool-label){grid-column:1;grid-row:2;box-sizing:border-box;margin:0;justify-self:stretch}
body[data-view=chords] .unified-exercise-toolbar .exercise-tempo{width:100%;height:34px;grid-template-columns:27px minmax(42px,1fr) 27px;grid-column:auto;grid-row:auto}
body[data-view=chords] .unified-exercise-toolbar .groove-toggle{width:100%;height:34px;padding:4px 6px;justify-content:center;grid-column:auto;grid-row:auto}
body[data-view=chords] .unified-exercise-toolbar .exercise-count-in{width:100%;height:34px;padding:0 5px;grid-column:auto;grid-row:auto}
body[data-view=chords] .unified-exercise-toolbar .exercise-count-in select{width:100%;min-width:0}
body[data-view=chords] .unified-exercise-toolbar .exercise-tool-strumming select{width:100%;min-width:0;height:34px;min-height:34px;padding:4px 23px 4px 7px;border:1px solid var(--theme-border-strong);border-radius:6px;background:var(--theme-surface);color:var(--theme-ink);font:800 11px/1 var(--app-font)}
body[data-view=chords] .unified-exercise-toolbar .exercise-tool-play .play-exercise{width:38px;height:34px;padding:0;border-radius:7px;justify-content:center;grid-column:auto;grid-row:auto}
body[data-view=chords] .unified-exercise-toolbar .exercise-tool-play .play-exercise svg{width:22px;height:22px}
@media(max-width:390px){
 body[data-view=chords] .exercise-toolbar.unified-exercise-toolbar.has-strumming{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto;gap:8px 6px}
 body[data-view=chords] .unified-exercise-toolbar.has-strumming .exercise-tool-tempo{grid-column:1/3;grid-row:1}
 body[data-view=chords] .unified-exercise-toolbar.has-strumming .exercise-tool-strumming{grid-column:3/5;grid-row:1}
 body[data-view=chords] .unified-exercise-toolbar.has-strumming .exercise-tool-drums{grid-column:1;grid-row:2}
 body[data-view=chords] .unified-exercise-toolbar.has-strumming .exercise-tool-count-in{grid-column:2/4;grid-row:2}
 body[data-view=chords] .unified-exercise-toolbar.has-strumming .exercise-tool-play{grid-column:4;grid-row:2}
 body[data-view=chords] .exercise-toolbar.unified-exercise-toolbar.without-strumming{grid-template-columns:56px minmax(94px,1fr) 64px 38px}
}

/* Practice hierarchy: card title, optional section title, then leaf exercises. */
body[data-view=chords] .custom-practice-tools .custom-progression-builder>summary{display:none}
body[data-view=chords] .custom-practice-tools .custom-progression-builder{border:0}
body[data-view=chords] .custom-practice-tools .custom-progression-builder[open]>.custom-progression-body{width:100%;margin:0;padding:10px 0 12px;border:0;border-radius:0;background:transparent;box-shadow:none}
body[data-view=chords] .practice-pattern-group .library-section-body>.progression-details>summary.progression-summary h3,
body[data-view=chords] .requested-song-body>.progression-details>summary.progression-summary h3{margin-top:3px;color:var(--theme-ink);font:750 16px/1.18 var(--app-font)!important;font-style:normal!important}
body[data-view=chords] .objective-practice-card .practice-exercise-tabs .practice-exercise-tab strong{font-size:16px;font-style:normal}
@container (min-width:620px){body[data-view=chords] .objective-practice-card .practice-exercise-tabs .practice-exercise-tab strong{font-size:18px}}
body[data-view=chords] .requested-song>summary .requested-song-heading strong{color:var(--theme-ink);font:italic 750 18px/1.15 var(--app-font)!important}
body[data-view=chords] .requested-song>summary .requested-song-number{font-size:10px;letter-spacing:-.2px}

/* An expanded item always keeps a dark title, regardless of its tab or card. */
body[data-view=chords] .practice-exercise-tab[aria-pressed=true] .drawer-copy strong,
body[data-view=chords] .library-section-body>.progression-details[open]>summary.progression-summary h3,
body[data-view=chords] .requested-practice-body>.progression-details[open]>summary.progression-summary h3,
body[data-view=chords] .requested-song[open]>summary .requested-song-heading strong{color:var(--theme-ink)!important}

/* Center every toolbar label and distribute the control groups across the row. */
body[data-view=chords] .exercise-toolbar.unified-exercise-toolbar{width:100%;justify-content:space-between;justify-items:stretch;column-gap:8px}
body[data-view=chords] .unified-exercise-toolbar .exercise-tool-label{text-align:center}

/* Minimal rhythm controls: one clear hit target without a second shell. */
body[data-view=chords] .unified-exercise-toolbar .exercise-tool-drums .groove-toggle{width:100%;height:34px;padding:0;border:0;background:transparent;box-shadow:none}
body[data-view=chords] .unified-exercise-toolbar .exercise-tool-drums .groove-toggle:hover{background:transparent}
body[data-view=chords] .unified-exercise-toolbar .exercise-tool-drums .groove-toggle:focus-visible{outline:2px solid #37965c;outline-offset:2px}
body[data-view=chords] .unified-exercise-toolbar .exercise-tool-drums .groove-switch{width:34px;height:20px}
body[data-view=chords] .unified-exercise-toolbar .exercise-tool-drums .groove-switch:after{width:14px;height:14px}
body[data-view=chords] .unified-exercise-toolbar .exercise-tool-drums .groove-toggle[aria-pressed=true] .groove-switch:after{transform:translateX(14px)}
body[data-view=chords] .unified-exercise-toolbar .exercise-tool-count-in .exercise-count-in{position:relative;width:42px;height:34px;justify-self:center;padding:0;border:0;background:transparent}
body[data-view=chords] .unified-exercise-toolbar .exercise-tool-count-in .exercise-count-in:after{content:'⌄';position:absolute;right:5px;top:8px;color:var(--theme-muted);font:900 10px/1 Arial;pointer-events:none}
body[data-view=chords] .unified-exercise-toolbar .exercise-tool-count-in .exercise-count-in select{box-sizing:border-box;appearance:none;width:42px;min-width:42px;height:34px;padding:0 14px 0 8px;border:1px solid var(--theme-border-strong);border-radius:7px;background:var(--theme-surface);color:var(--theme-ink);font:850 11px/1 var(--app-font);text-align:left}

/* Shade the selected dropdown row and its panel; parent card titles stay unchanged. */
body[data-view=chords] .progression-details[open]>summary,
body[data-view=chords] .requested-song[open]>summary,
body[data-view=chords] .lesson-details[open]>summary,
body[data-view=chords] .practice-exercise-tab[aria-pressed=true]{background:color-mix(in srgb,var(--theme-nav) 20%,var(--theme-soft))!important;box-shadow:0 3px 9px color-mix(in srgb,var(--theme-ink) 20%,transparent)!important}
body[data-view=chords] .progression-details[open]>summary strong,
body[data-view=chords] .progression-details[open]>summary h3,
body[data-view=chords] .requested-song[open]>summary strong,
body[data-view=chords] .lesson-details[open]>summary strong,
body[data-view=chords] .practice-exercise-tab[aria-pressed=true] strong{color:var(--theme-ink)!important}
body[data-view=chords] .progression-details[open]>.progression-body,
body[data-view=chords] .requested-song[open]>.requested-song-body,
body[data-view=chords] .practice-exercise-panel:not([hidden]){background:color-mix(in srgb,var(--theme-soft-2) 90%,var(--theme-ink))!important}
html[data-theme^=dark] body[data-view=chords] .progression-details[open]>summary,
html[data-theme^=dark] body[data-view=chords] .requested-song[open]>summary,
html[data-theme^=dark] body[data-view=chords] .lesson-details[open]>summary,
html[data-theme^=dark] body[data-view=chords] .practice-exercise-tab[aria-pressed=true]{background:color-mix(in srgb,var(--theme-nav) 34%,var(--theme-soft))!important}

/* Give the info disclosure icon breathing room from both the card edge and title. */
body[data-view=chords] .objective-panel[data-objective=practice]>.lesson-details>.lesson-summary{padding-left:6px;column-gap:12px}