.chord-main{padding:0 5%}.builder-panel,.selected-panel{background:var(--modus-c-1a2116,#1a2116);border:1px solid var(--modus-b-3d4c30,#3d4c30);border-radius:13px;padding:28px}.builder-heading,.selected-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.builder-heading .eyebrow,.selected-heading .eyebrow{font-size:9px;margin-bottom:13px}.builder-heading h2{font-size:26px}.builder-help{font-size:12px;color:var(--modus-c-a6b996,#a6b996);line-height:1.8;margin:0 0 22px}.secondary{border:1px solid var(--modus-b-607e44,#607e44);background:var(--modus-c-26371b,#26371b);color:var(--modus-c-e1f3c3,#e1f3c3);border-radius:6px;padding:11px 14px;font-size:11px;white-space:nowrap}.secondary:hover{background:var(--modus-c-354d25,#354d25)}.secondary:disabled{opacity:.5;cursor:not-allowed}.chord-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.chord-slot{border:1px solid var(--modus-b-4b6236,#4b6236);background:var(--modus-c-202e18,#202e18);border-radius:9px;padding:14px;position:relative}.chord-slots:not(.is-playing) .chord-slot.selected,.chord-slot.playing{border-color:var(--accent);background:var(--modus-c-2e4021,#2e4021);box-shadow:0 0 0 1px var(--modus-c-d7f48c33,#d7f48c33)}.slot-head{display:flex;justify-content:space-between;align-items:center;color:var(--modus-c-a1b68d,#a1b68d);font-size:10px}.remove-chord{border:0;color:var(--modus-c-a7bb94,#a7bb94);background:none;font-size:18px;padding:0 3px}.select-chord{border:0;background:none;color:var(--modus-c-f1f6e9,#f1f6e9);display:block;width:100%;text-align:left;padding:13px 0 15px;font-size:28px;font-weight:500;letter-spacing:-1px}.slot-edit{display:grid;grid-template-columns:1fr;gap:7px}.slot-edit select{width:100%;font-size:11px;padding:8px 5px}.slot-edit label{font-size:9px;color:var(--modus-c-b6c9a2,#b6c9a2)}.slot-edit label select{margin-top:5px}.builder-transport{display:flex;align-items:center;gap:22px;flex-wrap:wrap;border-top:1px solid var(--modus-b-3e5430,#3e5430);padding-top:22px;margin-top:22px}.builder-transport label{font-size:11px;color:var(--modus-c-aabd96,#aabd96);display:flex;align-items:center;gap:8px}.builder-transport input{background:var(--modus-c-26371b,#26371b);color:var(--modus-c-eef6e4,#eef6e4);border:1px solid var(--modus-b-587640,#587640);border-radius:5px;width:65px;padding:7px;font:inherit}.builder-transport>span{font-size:10px;color:var(--modus-c-98ad83,#98ad83)}.builder-transport .secondary{margin-left:auto}#chordStatus{font-size:11px;color:var(--modus-c-cbe7a8,#cbe7a8);margin:13px 0 0}#chordStatus:empty{display:none}.selected-panel{margin-top:20px}.selected-heading{padding-bottom:24px;border-bottom:1px solid var(--modus-b-405531,#405531);flex-wrap:wrap}.selected-heading h2{font-size:36px;margin:0}.selected-heading .formula{font-size:17px;margin:0 0 7px}.selected-heading>div:nth-child(2){margin-right:auto}#selectedNotes{font-size:12px;color:var(--modus-c-b1c49f,#b1c49f);letter-spacing:1px}.voicing-grid{display:grid;grid-template-columns:285px minmax(0,1fr);gap:30px;padding-top:26px}.diagram-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:38px}.diagram-heading h3{font:500 20px Manrope,sans-serif;margin:0}.text-button{font-size:10px;background:none;border:0;color:var(--accent);padding:5px 0}.guitar-voicing svg{width:100%;max-width:265px;height:auto;display:block;margin:14px auto 0}.guitar-voicing>p{font-size:11px;color:var(--modus-c-c0d5ab,#c0d5ab);text-align:center}.guitar-voicing>small{font-size:10px;color:var(--modus-c-91a87c,#91a87c);line-height:1.8;display:block;text-align:center}.piano-voicing .diagram-heading label{font-size:10px;color:var(--modus-c-a9c094,#a9c094);display:flex;align-items:center;gap:9px}.piano-voicing select{font-size:11px;padding:8px}.piano-voicing .keyboard-wrap{margin-top:22px}.piano-voicing .keyboard-wrap svg{min-width:570px}#pianoNoteNames{color:var(--modus-c-d7e9c5,#d7e9c5);font-size:13px;letter-spacing:1px;margin-top:19px}.piano-help,.voicing-note{font-size:12px;color:var(--modus-c-aabd96,#aabd96);line-height:1.9}.voicing-note{border-left:2px solid var(--modus-b-718e51,#718e51);padding:8px 15px;background:var(--modus-c-222f19,#222f19);font-size:11px}.chord-bottom{padding:40px 0;text-align:center;color:var(--modus-c-a7be93,#a7be93);font-size:13px}.chord-bottom a{color:var(--accent);font-size:12px}@media(max-width:900px){.voicing-grid{grid-template-columns:230px minmax(0,1fr);gap:22px}.builder-panel,.selected-panel{padding:22px}.chord-slots{gap:8px}.chord-slot{padding:11px}.select-chord{font-size:24px}}@media(max-width:700px){.chord-main{padding:0 20px}.builder-heading{align-items:flex-start;flex-direction:column;gap:13px}.builder-heading h2{font-size:24px}.builder-help{margin-top:16px}.chord-slots{grid-template-columns:repeat(2,minmax(0,1fr))}.builder-panel,.selected-panel{padding:20px 15px}.builder-transport{gap:16px}.builder-transport .secondary{margin-left:0}.selected-heading{gap:18px}.selected-heading>div:nth-child(2){margin-right:0}.selected-heading h2{font-size:30px}.selected-heading .formula{font-size:15px}.voicing-grid{grid-template-columns:1fr;gap:25px}.guitar-voicing{border-bottom:1px solid var(--modus-b-405531,#405531);padding-bottom:22px}.guitar-voicing svg{max-width:250px}.piano-voicing .diagram-heading{align-items:flex-start}.piano-voicing .diagram-heading label{flex-direction:column;align-items:flex-start;gap:5px}.builder-transport>span{font-size:9px}.builder-transport .listen-button{width:100%}}

.jam-transfer{border-top:1px solid var(--modus-b-4c6537,#4c6537);padding-top:23px;margin-top:23px}.jam-transfer h3{font:500 20px Manrope,sans-serif;color:var(--modus-c-e0efcd,#e0efcd);margin:0 0 10px}.jam-transfer p{font-size:12px;line-height:1.8;color:var(--modus-c-aac294,#aac294);margin:0 0 18px}.jam-scale{display:flex;align-items:flex-end;flex-wrap:wrap;gap:16px}.jam-scale label{font-size:10px;color:var(--modus-c-a8c18e,#a8c18e);display:flex;flex-direction:column;gap:7px}.jam-scale .button{padding:9px 17px;font-size:12px;margin-left:auto}.sequence-library{margin-top:24px;border:1px solid var(--modus-b-4b6336,#4b6336);background:var(--modus-c-202d18,#202d18);border-radius:8px;padding:0 17px 17px}.sequence-library summary{cursor:pointer;color:var(--modus-c-cde3b7,#cde3b7);font-size:12px;padding:15px 0;display:flex;justify-content:space-between}.sequence-library:not([open]){padding-bottom:0}.sequence-library p{font-size:10px;color:var(--modus-c-a2ba8a,#a2ba8a);margin:4px 0 18px}.sequence-save-row,.sequence-load-row{display:flex;align-items:flex-end;gap:12px;margin-top:14px}.sequence-library label{flex:1;display:flex;flex-direction:column;font-size:10px;color:var(--modus-c-afc797,#afc797);gap:7px}.sequence-library input,.sequence-library select{width:100%;padding:10px 12px;border:1px solid var(--modus-b-5b7940,#5b7940);border-radius:6px;background:var(--modus-c-17220f,#17220f);color:var(--modus-c-e4f4d6,#e4f4d6);font:12px 'DM Sans',sans-serif}.sequence-library input::placeholder{color:var(--modus-c-839e6d,#839e6d)}@media(max-width:700px){.jam-scale .button{width:100%;justify-content:center;margin-left:0}.jam-scale label{flex:1}.sequence-save-row,.sequence-load-row{align-items:stretch;flex-direction:column}.sequence-library input,.sequence-library select{font-size:16px}.jam-scale select{max-width:100%}}

/* Let the piano scroll inside its panel instead of widening the mobile page. */
.voicing-grid>*{min-width:0}

/* Harmonic context and chord degrees use the selected tonic and scale. */
.harmonic-context{border:1px solid var(--modus-b-4b6236,#4b6236);background:var(--modus-c-202e18,#202e18);border-radius:9px;padding:18px;margin-bottom:20px}.harmonic-context-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}.harmonic-context-heading>span{font-size:9px;letter-spacing:1.5px;color:var(--modus-c-aac294,#aac294)}.harmonic-context-heading>strong{font-size:13px;color:var(--accent);font-weight:500}.harmonic-context-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.harmonic-context-controls label{display:flex;flex-direction:column;gap:7px;font-size:11px;color:var(--modus-c-b6c9a2,#b6c9a2);min-width:0}.harmonic-context-controls select{width:100%;min-height:42px;font-size:14px}.harmonic-context>p{margin:14px 0 0;font-size:11px;line-height:1.8;color:var(--modus-c-aabd96,#aabd96)}.chord-name{display:block}.chord-roman{display:block;font:500 14px/1.4 'DM Sans',sans-serif;letter-spacing:.02em;color:var(--accent);margin-top:5px}.selected-roman{font-size:16px;line-height:1.5;color:var(--accent);margin:7px 0 0}.slot-head{min-height:36px}.remove-chord{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;cursor:pointer;border-radius:6px}.remove-chord:disabled{opacity:.4;cursor:not-allowed}.remove-chord:hover:not(:disabled){background:var(--modus-c-354d25,#354d25)}.chord-slot:focus-within{outline:1px solid var(--accent);outline-offset:2px}.chord-slot .select-chord:focus-visible,.chord-slot .remove-chord:focus-visible,.text-button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.builder-panel,.selected-panel,.harmonic-context-controls>*{min-width:0}
@media(max-width:700px){.harmonic-context{padding:15px}.harmonic-context-controls{gap:10px}.harmonic-context-controls select,.slot-edit select,.builder-transport input,.piano-voicing select{font-size:16px;min-height:44px;box-sizing:border-box}.slot-head{min-height:44px}.remove-chord{min-width:44px;min-height:44px;font-size:21px;margin-right:-6px}.select-chord{padding-top:6px;padding-bottom:14px}.chord-roman{font-size:14px}.text-button{min-height:44px;padding:10px 2px;display:inline-flex;align-items:center}.secondary,.listen-button,.jam-scale .button{min-height:44px;box-sizing:border-box}.builder-transport label{min-height:44px}.piano-voicing .diagram-heading{gap:12px}.slot-edit label{font-size:10px}}

/* MODUS HARMONI · visual alignment with MODUS JAM (no changes to tool logic) */
.chord-main{max-width:1440px;margin-inline:auto;padding:0 5% 55px}
.chord-main .theory-hero{min-height:310px;padding:50px 0 45px;margin-bottom:19px;overflow:hidden;isolation:isolate}
.chord-main .theory-hero>div:first-child{position:relative;z-index:1;max-width:600px}
.chord-main .theory-hero .eyebrow{color:var(--accent);font-size:10px;letter-spacing:2px;margin:0 0 21px}
.chord-main .theory-hero h1{font:500 clamp(38px,4.4vw,62px)/1.12 Manrope,sans-serif;letter-spacing:-.055em;margin:0}
.chord-main .theory-hero h1 em{font-family:Georgia,serif;font-weight:400;color:var(--accent)}
.chord-main .theory-hero p:last-child{font-size:15px;line-height:1.8;max-width:540px;margin:21px 0 0;color:var(--modus-c-aeb6a4,#aeb6a4)}
.chord-main .theory-landscape{inset:0 0 0 27%;opacity:.88;background:linear-gradient(90deg,#111310 0%,rgba(17,19,16,.92) 14%,rgba(17,19,16,.18) 68%),linear-gradient(0deg,#111310 0%,transparent 27%,transparent 78%,rgba(17,19,16,.78) 100%),url('images/mountain-lake.webp') center 50%/cover}
.chord-main .builder-panel,.chord-main .selected-panel{background:var(--modus-c-1a1d18,#1a1d18);border:1px solid var(--modus-b-30342a,#30342a);border-radius:14px;padding:28px}
.chord-main .builder-heading{margin:0 0 15px;align-items:center}
.chord-main .builder-heading h2{font:500 clamp(23px,2.5vw,29px)/1.3 Manrope,sans-serif;letter-spacing:-.035em;margin:0}
.chord-main .builder-heading .eyebrow,.chord-main .selected-heading .eyebrow{font-size:10px;letter-spacing:1.4px;color:var(--modus-c-a5ad9a,#a5ad9a);margin:0 0 15px}
.chord-main .builder-help{font-size:14px;line-height:1.7;color:var(--modus-c-a5ad9a,#a5ad9a);margin:0 0 22px}
.chord-main .harmonic-context{background:var(--modus-c-20251d,#20251d);border:1px solid var(--modus-b-3c4634,#3c4634);border-radius:10px;padding:20px;margin-bottom:20px}
.chord-main .harmonic-context-heading{margin-bottom:18px}
.chord-main .harmonic-context-heading span{color:var(--modus-c-aeb6a4,#aeb6a4)}
.chord-main .harmonic-context>p{font-size:13px;line-height:1.75;color:var(--modus-c-aeb6a4,#aeb6a4)}
.chord-main .harmonic-context-controls label{color:var(--modus-c-aeb6a4,#aeb6a4);font-size:12px}
.chord-main :is(.harmonic-context-controls select,.slot-edit select,.piano-voicing select,.sequence-library select,.sequence-library input){background:var(--modus-c-22271f,#22271f);border:1px solid var(--modus-b-444a3b,#444a3b);border-radius:7px;color:var(--modus-c-f0f0e6,#f0f0e6)}
.chord-main .chord-slots{gap:11px}
.chord-main .chord-slot{background:var(--modus-c-20251d,#20251d);border:1px solid var(--modus-b-30342a,#30342a);border-radius:9px;padding:17px 15px;transition:border-color .16s ease,background .16s ease}
.chord-main .chord-slots:not(.is-playing) .chord-slot.selected,.chord-main .chord-slot.playing{background:var(--modus-c-313e23,#313e23);border-color:var(--accent);box-shadow:none}
.chord-main .slot-head{color:var(--modus-c-9ba797,#9ba797)}
.chord-main .select-chord{font:500 clamp(22px,2.5vw,30px)/1.3 Manrope,sans-serif;letter-spacing:-.035em;min-height:50px}
.chord-main .slot-edit label{font-size:11px;color:var(--modus-c-aeb6a4,#aeb6a4)}
.chord-main .chord-roman{font:400 15px/1.4 Georgia,serif;color:var(--accent)}
.chord-main .builder-transport,.chord-main .jam-transfer,.chord-main .selected-heading{border-color:var(--modus-b-30342a,#30342a)}
.chord-main .listen-button{background:var(--accent);color:#172014;border-color:var(--accent);border-radius:7px;font-weight:700;min-height:44px;padding:12px 19px}
.chord-main .listen-button:hover{filter:brightness(1.06)}
.chord-main .secondary{background:var(--modus-c-22271f,#22271f);border:1px solid var(--modus-b-546244,#546244);border-radius:7px;color:var(--accent);font-size:12px;min-height:40px}
.chord-main .secondary:hover{background:var(--modus-c-313e23,#313e23)}
.chord-main .jam-transfer h3{font:500 22px/1.4 Manrope,sans-serif;color:var(--ink)}
.chord-main .jam-transfer p{font-size:14px;color:var(--modus-c-a5ad9a,#a5ad9a)}
.chord-main .sequence-library{background:var(--modus-c-20251d,#20251d);border-color:var(--modus-b-30342a,#30342a);border-radius:9px}
.chord-main .selected-panel{margin-top:18px}
.chord-main .selected-heading h2{font:500 clamp(27px,3vw,38px)/1.2 Manrope,sans-serif}
.chord-main :is(.guitar-voicing,.piano-voicing){min-width:0}
.chord-main .voicing-grid{gap:26px}
.chord-main .voicing-note{background:var(--modus-c-20251d,#20251d);border-color:var(--modus-b-546244,#546244)}
.chord-main .chord-bottom{padding:34px 0 8px}
@media(max-width:700px){
 .chord-main{padding:0 18px 40px}
 .chord-main .theory-hero{min-height:290px;padding:35px 0 32px;margin-bottom:12px}
 .chord-main .theory-hero>div:first-child{max-width:94%}
 .chord-main .theory-landscape{inset:0;opacity:.48;background:linear-gradient(90deg,#111310 0%,rgba(17,19,16,.73) 58%,rgba(17,19,16,.3) 100%),linear-gradient(0deg,#111310,transparent 40%,#111310),url('images/mountain-lake.webp') center/cover}
 .chord-main .theory-hero p:last-child{font-size:15px;line-height:1.7}
 .chord-main .builder-panel,.chord-main .selected-panel{padding:19px 17px}
 .chord-main .builder-heading{align-items:flex-start}
 .chord-main .harmonic-context{padding:16px}
 .chord-main .chord-slot{padding:13px 11px}
 .chord-main .builder-transport{gap:14px}
 .chord-main .voicing-grid{grid-template-columns:1fr}
}

/* Keep the chord progression and sounding voicing together while practicing.
   Wide screens show a two-column workstation; smaller screens retain the
   familiar vertical flow and horizontal scrolling inside the keyboard. */
.harmony-workbench{display:grid;grid-template-columns:minmax(0,0.94fr) minmax(0,1.06fr);gap:18px;align-items:start}
.harmony-workbench>.builder-panel,.harmony-workbench>.selected-panel{min-width:0;margin-top:0}
.harmony-workbench .selected-panel{position:sticky;top:12px;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.harmony-workbench .chord-slots{grid-template-columns:repeat(2,minmax(0,1fr))}
.harmony-workbench .builder-heading{flex-wrap:wrap}
.harmony-workbench .harmonic-context-controls{grid-template-columns:repeat(2,minmax(0,1fr))}
.harmony-workbench .voicing-grid{grid-template-columns:minmax(0,1fr);gap:20px;padding-top:18px}
.harmony-workbench .guitar-voicing{border-bottom:1px solid var(--modus-b-30342a,#30342a);padding-bottom:14px}
.harmony-workbench .guitar-voicing svg{max-width:205px;margin:5px auto 0}
.harmony-workbench .guitar-voicing>p{margin:6px 0}
.harmony-workbench .guitar-voicing>small{font-size:10px}
.harmony-workbench .piano-voicing .keyboard-wrap{overflow-x:auto;max-width:100%;margin-top:12px}
.harmony-workbench .piano-voicing .keyboard-wrap svg{min-width:570px}
.harmony-workbench .selected-heading{padding-bottom:16px}
.harmony-workbench .selected-heading h2{font-size:30px}
.harmony-workbench .selected-panel{scrollbar-color:var(--modus-b-546244,#546244) transparent}
@media(max-width:1050px){
 .harmony-workbench{grid-template-columns:minmax(0,1fr)}
 .harmony-workbench .selected-panel{position:static;max-height:none;overflow:visible;margin-top:0}
 .harmony-workbench .chord-slots{grid-template-columns:repeat(4,minmax(0,1fr))}
 .harmony-workbench .voicing-grid{grid-template-columns:230px minmax(0,1fr)}
 .harmony-workbench .guitar-voicing{border-bottom:0;padding-bottom:0}
}
@media(max-width:700px){
 .harmony-workbench{gap:16px}
 .harmony-workbench .chord-slots{grid-template-columns:repeat(2,minmax(0,1fr))}
 .harmony-workbench .voicing-grid{grid-template-columns:minmax(0,1fr)}
 .harmony-workbench .guitar-voicing{border-bottom:1px solid var(--modus-b-30342a,#30342a);padding-bottom:18px}
 .harmony-workbench .harmonic-context-controls{grid-template-columns:minmax(0,1fr)}
}

/* Four beats of the progression must read as one horizontal musical phrase.
   Preserve the adjacent live voicing without squeezing the chord selectors. */
@media(min-width:1051px){
 .harmony-workbench{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
 .harmony-workbench .chord-slots{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
 .harmony-workbench .chord-slot{min-width:0;padding:12px 9px}
 .harmony-workbench .select-chord{font-size:clamp(20px,2vw,26px);min-height:45px}
 .harmony-workbench .slot-edit select{box-sizing:border-box;max-width:100%;min-width:0;padding:8px 4px;font-size:12px}
 .harmony-workbench .slot-edit label{min-width:0;font-size:10px}
 .harmony-workbench .slot-head{font-size:9px}
 .harmony-workbench .voicing-grid{min-width:0}
}

/* Desktop: both workbench cards share an exact bottom edge.
   Remove the viewport-height cap that previously shortened the right panel. */
@media(min-width:1051px){
 .harmony-workbench{align-items:stretch}
 .harmony-workbench>.builder-panel,.harmony-workbench>.selected-panel{align-self:stretch;height:100%;box-sizing:border-box}
 .harmony-workbench>.selected-panel{position:static;top:auto;max-height:none;overflow:visible}
}

/* MODUS HARMONI: optional genre progression starter, immediately above the chords */
.chord-main .progression-presets{margin:0 0 19px;padding:18px;border:1px solid var(--modus-b-3c4634,#3c4634);border-radius:10px;background:var(--modus-c-20251d,#20251d)}
.chord-main .progression-presets-heading{margin-bottom:13px}
.chord-main .progression-presets-eyebrow{display:block;color:var(--modus-c-a5ad9a,#a5ad9a);font-size:10px;letter-spacing:1.1px;margin-bottom:7px}
.chord-main .progression-presets h3{font:500 18px/1.35 Manrope,sans-serif;letter-spacing:-.025em;color:var(--ink);margin:0}
.chord-main .progression-presets-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end}
.chord-main .progression-presets-controls label{font-size:12px;color:var(--modus-c-a5ad9a,#a5ad9a);min-width:0}
.chord-main .progression-presets-controls select{display:block;width:100%;max-width:100%;margin-top:7px;min-height:42px;box-sizing:border-box;background:var(--modus-c-22271f,#22271f);border:1px solid var(--modus-b-444a3b,#444a3b);border-radius:7px;padding:9px;color:var(--ink);font-size:13px}
.chord-main .progression-presets-controls button{min-height:42px;white-space:normal}
.chord-main .progression-presets-controls button:disabled{opacity:.45;cursor:not-allowed}
.chord-main .progression-preset-preview{font-size:12px;line-height:1.7;color:var(--modus-c-a5ad9a,#a5ad9a);margin:12px 0 0}
@media(max-width:1250px){.chord-main .progression-presets-controls{grid-template-columns:minmax(0,1fr)}.chord-main .progression-presets-controls button{justify-self:start}}
@media(max-width:700px){.chord-main .progression-presets{padding:15px}.chord-main .progression-presets-controls select{font-size:16px;min-height:44px}.chord-main .progression-presets-controls button{width:100%}}

/* Visible inversion selection alongside the existing accessible dropdown. */
.piano-inversion-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:17px}
.piano-inversion-buttons button{padding:9px 12px;border-radius:7px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:600 12px/1.4 'DM Sans',sans-serif;cursor:pointer}
.piano-inversion-buttons button[aria-pressed='true']{border-color:var(--accent);background:var(--accent);color:var(--bg)}
.piano-inversion-buttons button[hidden]{display:none}
.piano-inversion-buttons button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
html[data-theme='readable'] .piano-inversion-buttons button[aria-pressed='true']{background:#b8d49f;color:#183522;border-color:#638759}

/* Piano inversion choices are direct controls in the heading, not a dropdown. */
.piano-voicing .diagram-heading{flex-wrap:wrap;align-items:center}
.piano-voicing .piano-inversion-buttons{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 0 auto}
@media(max-width:700px){.piano-voicing .piano-inversion-buttons{width:100%;margin:8px 0 0}}


/* MODUS editorial inversion tabs: same restrained type scale as the panel. */
.piano-voicing .piano-inversion-buttons{
  margin:12px 0 0;
  gap:18px;
  align-items:center;
}
.piano-voicing .piano-inversion-buttons button{
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  border:0;
  border-bottom:1px solid transparent;
  border-radius:0;
  padding:7px 1px 9px;
  min-height:34px;
  font:500 12px/1.45 'DM Sans',sans-serif;
  letter-spacing:.015em;
  color:var(--muted);
  box-shadow:none;
  transition:color .15s,border-color .15s;
}
.piano-voicing .piano-inversion-buttons button:hover{
  color:var(--ink);
}
.piano-voicing .piano-inversion-buttons button[aria-pressed='true'],
html[data-theme='readable'] .piano-voicing .piano-inversion-buttons button[aria-pressed='true']{
  background:transparent;
  border:0;
  border-bottom:2px solid var(--accent);
  border-radius:0;
  color:var(--ink);
  font-weight:700;
}
html[data-theme='readable'] .piano-voicing .piano-inversion-buttons button[aria-pressed='true']{
  border-bottom-color:#245b34;
  color:#245b34;
}
@media(max-width:700px){
  .piano-voicing .piano-inversion-buttons{gap:14px;margin:12px 0 0}
  .piano-voicing .piano-inversion-buttons button{font-size:12px}
}

/* Guitar voicing navigation mirrors the understated piano inversion tabs. */
.guitar-voicing .guitar-grip-tabs{display:flex;flex-wrap:wrap;gap:14px;margin:12px 0 0;align-items:center}
.guitar-voicing .guitar-grip-tabs button{appearance:none;-webkit-appearance:none;background:transparent;border:0;border-bottom:1px solid transparent;border-radius:0;padding:7px 1px 9px;min-height:34px;box-shadow:none;color:var(--muted);font:500 12px/1.45 'DM Sans',sans-serif;letter-spacing:.015em;cursor:pointer}
.guitar-voicing .guitar-grip-tabs button:hover{color:var(--ink)}
.guitar-voicing .guitar-grip-tabs button[aria-pressed='true']{border-bottom:2px solid var(--accent);color:var(--ink);font-weight:700}
html[data-theme='readable'] .guitar-voicing .guitar-grip-tabs button[aria-pressed='true']{border-bottom-color:#245b34;color:#245b34}
.guitar-voicing .guitar-grip-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Later workbench rules must retain the reading theme's text contrast. */
html:is([data-theme="readable"],[data-theme="contrast"]) .chord-main {
 --modus-c-aeb6a4:var(--appearance-muted);
 --modus-c-9ba797:var(--appearance-muted);
}
html:is([data-theme="readable"],[data-theme="contrast"]) .chord-main .listen-button {
 color:var(--appearance-panel);
}

.builder-transport #loopProgression{width:1.1rem;min-height:0;height:1.1rem;padding:0;accent-color:var(--accent)}
.builder-transport label[for="loopProgression"]{min-height:44px;cursor:pointer}