@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1&display=swap');

:root { --navy:#111c35; --navy2:#172643; --ivory:#f5f0e6; --paper:#fcfaf5; --coral:#ef705f; --gold:#c9a75d; --ink:#152038; --muted:#687083; --line:#d9d5cc; --serif:'DM Serif Display','Songti TC','Noto Serif TC',Georgia,serif; --sans:'DM Sans','PingFang HK','Noto Sans TC',Arial,sans-serif;
  --diatonic-bg:#faf8f2;--diatonic-border:#111c35;--diatonic-backbone:#aa9364;
  --sec-dom-bg:#c08b6c;--sec-dom-border:#80513b;--sec-dom-text:#38271f;--sec-dom-prep-bg:#dfc7b7;--sec-dom-prep-border:#ad826b;--sec-dom-prep-text:#4c3529;
  --sec-dim-bg:#607b7c;--sec-dim-border:#38585a;--sec-dim-text:#f8f5eb;--sec-dim-prep-bg:#bdcbca;--sec-dim-prep-border:#718c8d;--sec-dim-prep-text:#294244;
  --tritone-bg:#716d67;--tritone-border:#45423e;--tritone-text:#fbf7ee;--tritone-prep-bg:#d0ccc5;--tritone-prep-border:#8f8981;--tritone-prep-text:#403d39;
  --mi-lydian:#e8c547;--mi-ionian:#a8c957;--mi-mixolydian:#4faf91;--mi-dorian:#4d91c6;--mi-aeolian:#526da8;--mi-phrygian:#76509a;--mi-locrian:#51346f;--mi-harmonic-minor:#b34f83;--mi-melodic-minor:#c9689c;
  --mi-lydian-soft:#f9efb8;--mi-ionian-soft:#e4edb5;--mi-mixolydian-soft:#cbe4d8;--mi-dorian-soft:#c3dceb;--mi-aeolian-soft:#b9c9e1;--mi-phrygian-soft:#c3b1d3;--mi-locrian-soft:#a996c1;--mi-harmonic-minor-soft:#ddb2c8;--mi-melodic-minor-soft:#e5bdd3;
  --mi-lydian-card-bg:#f8df4f;--mi-lydian-card-fg:#111c35;--mi-ionian-card-bg:#afd666;--mi-ionian-card-fg:#111c35;--mi-mixolydian-card-bg:#449c8c;--mi-mixolydian-card-fg:#111c35;--mi-dorian-card-bg:#3ca2b3;--mi-dorian-card-fg:#111c35;--mi-aeolian-card-bg:#476faa;--mi-aeolian-card-fg:#f8f3e8;--mi-phrygian-card-bg:#4c4a93;--mi-phrygian-card-fg:#f8f3e8;--mi-locrian-card-bg:#52347a;--mi-locrian-card-fg:#f8f3e8;--mi-harmonic-minor-card-bg:#9242ab;--mi-harmonic-minor-card-fg:#f8f3e8;--mi-melodic-minor-card-bg:#d662c4;--mi-melodic-minor-card-fg:#111c35;
  --surface-page:#f2f2ee;--surface-setup:#f7f7f4;--surface-harmony:#343a3d;--surface-card:#faf9f5;--surface-raised:#fdfcf8;--metal-divider:rgba(225,229,226,.18);--metal-divider-strong:rgba(225,229,226,.28);--metal-seam-dark:rgba(11,17,20,.18);--metal-seam-light:rgba(205,215,214,.075);
}

/* RC26.6 dark technical instrument prototype and deterministic map contracts. */
.harmony-section{
  --surface-environment:#0c1218;
  --surface-card:#141d25;
  --surface-card-selected:#1b2a38;
  --text-primary:#f2f2ec;
  --text-secondary:#aeb9bf;
  --text-technical:#d8c077;
  --signal-route:#dbc46f;
  background-color:var(--surface-environment);
  background-image:
    linear-gradient(118deg,rgba(118,132,137,.13) 0%,rgba(118,132,137,.035) 31%,transparent 57%),
    linear-gradient(164deg,transparent 12%,rgba(151,160,159,.07) 46%,transparent 78%),
    linear-gradient(rgba(4,8,12,.62),rgba(4,8,12,.62)),
    url('assets/monchord-section02-slate.jpg');
  background-size:auto,auto,auto,cover;
  background-position:center;
}
.harmony-section .chord-card,.harmony-section .context-card{background:var(--surface-card);color:var(--text-primary);border:1px solid rgba(191,204,209,.28);box-shadow:inset 0 1px rgba(255,255,255,.035)}
.harmony-section .chord-card .roman{color:var(--text-technical)}
.roman-notation{display:inline-flex;align-items:center;gap:.12em;white-space:nowrap}.roman-base{line-height:1}.roman-figure-column{display:inline-grid;grid-auto-rows:min-content;place-items:center;width:.7em;font-size:.64em;font-variant-numeric:tabular-nums;line-height:.72;letter-spacing:0}.roman-figure-column>span{display:block;line-height:.72}
.harmony-section .chord-card .card-notes,.harmony-section .context-card .card-notes{color:var(--text-secondary)}
.harmony-section .chord-card.selected{color:var(--text-primary);background:var(--surface-card-selected);border-color:#d4b75d;box-shadow:inset 0 2px #ef705f,0 0 0 1px rgba(212,183,93,.18)}
.harmony-section .chord-card.selected .roman{color:#efd37f}
.harmony-section .chromatic-card{--identity-signal:#ba7b60;background:color-mix(in srgb,var(--surface-card) 92%,var(--identity-signal));border-color:color-mix(in srgb,var(--identity-signal) 68%,#27323a);color:var(--text-primary);box-shadow:inset 2px 0 var(--identity-signal)}
.harmony-section .branch-secondaryDiminished .chromatic-card{--identity-signal:#6e9a9b}
.harmony-section .branch-tritone .chromatic-card{--identity-signal:#a69b86}
.harmony-section .preparation-card{--identity-signal:#a45b78}
.harmony-section .chromatic-card small,.harmony-section .chromatic-card strong{color:color-mix(in srgb,var(--identity-signal) 72%,white)}
.harmony-section .modal-interchange-card{background:color-mix(in srgb,var(--surface-card) 92%,var(--mi-card-bg));border-color:color-mix(in srgb,var(--mi-card-bg) 72%,#26313a);color:var(--text-primary);box-shadow:inset 0 2px var(--mi-card-bg)}
.harmony-section .modal-interchange-card>small,.harmony-section .modal-interchange-card .roman,.harmony-section .modal-interchange-card strong{color:color-mix(in srgb,var(--mi-card-bg) 74%,white)}
.harmony-section .modal-interchange-card .card-notes{color:var(--text-secondary)}
.harmony-section .modal-interchange-card.same-as-home{background:var(--surface-card);color:var(--text-primary)}
.harmony-section .segmented button.active,.harmony-section .chromatic-options button.active,.harmony-section .preparation-options button.active{color:#f3d77d;border-color:#c9a75d;background:rgba(201,167,93,.10);box-shadow:inset 0 0 10px rgba(201,167,93,.09)}
.harmony-section .modal-interchange-picker .modal-source-option[data-modal-source].active{color:color-mix(in srgb,var(--mi-source) 65%,white);border-color:var(--mi-source);background:color-mix(in srgb,var(--surface-card) 88%,var(--mi-source));box-shadow:inset 0 -1px var(--mi-source)}
.diatonic-backbone line{stroke:var(--signal-route);stroke-width:1;filter:drop-shadow(0 0 2px rgba(219,196,111,.34))}

@media(min-width:700px){
  .harmony-map-shell{display:block!important}
  .harmony-map-shell>.chord-cards{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-flow:row;gap:18px 12px;align-items:start}
  .harmony-map-shell>.chord-cards.chromatic-open{grid-template-columns:repeat(4,minmax(0,1fr))}
  .harmony-map-shell .degree-anchor,.harmony-map-shell .degree-anchor:nth-of-type(n){display:grid!important;grid-column:auto!important;grid-row:auto!important;grid-template-columns:minmax(0,.72fr) minmax(0,.84fr) minmax(0,1fr);grid-template-rows:auto auto;gap:5px 7px;width:100%!important;min-width:0!important;min-height:0!important;padding:0!important}
  .harmony-map-shell .degree-functional-layer,.harmony-map-shell .chromatic-hierarchy,.harmony-map-shell .chromatic-branch{display:contents!important}
  .harmony-map-shell .degree-home-stack{position:relative!important;z-index:3;display:grid!important;grid-column:3;grid-row:1/3;grid-template-rows:auto auto;gap:5px;width:auto!important;margin:0!important}
  .harmony-map-shell>.chord-cards:not(.chromatic-open) .degree-anchor{display:block!important}
  .harmony-map-shell>.chord-cards:not(.chromatic-open) .degree-home-stack{display:grid!important;grid-template-rows:auto auto;gap:5px;width:100%!important}
  .harmony-map-shell .degree-home-stack>.chord-card,.harmony-map-shell .degree-home-stack>.modal-interchange-card{position:relative!important;grid-column:1;justify-self:stretch;width:100%!important;height:auto!important;margin:0!important;overflow:hidden}
  .harmony-map-shell .degree-home-stack>.chord-card{grid-row:1;min-height:104px;padding:13px 10px}
  .harmony-map-shell .degree-home-stack>.modal-interchange-card{grid-row:2;min-height:58px;padding:8px 9px}
  .harmony-map-shell .approach-route,.harmony-map-shell .preparation-route{position:relative!important;inset:auto!important;display:block!important;width:auto!important;height:auto!important;margin:0!important;transform:none!important;align-self:end}
  .harmony-map-shell .preparation-route{grid-column:1;grid-row:1}.harmony-map-shell .approach-route{grid-column:2;grid-row:1}
  .harmony-map-shell .approach-card,.harmony-map-shell .preparation-card{position:relative!important;width:100%!important;height:auto!important;margin:0!important;padding:8px!important;overflow:hidden}
  .harmony-map-shell .approach-card{min-height:82px!important}.harmony-map-shell .preparation-card{min-height:66px!important}
  .harmony-map-shell .chord-card strong{font-size:18px;line-height:1.05}.harmony-map-shell .chromatic-card strong{font-size:14px}.harmony-map-shell .modal-interchange-card strong{font-size:13px}
  .harmony-map-shell>.chromatic-controls,.harmony-map-shell:has(.chord-cards.chromatic-open)>.chromatic-controls{display:grid;grid-column:auto;grid-row:auto;margin:18px 0 0;padding:12px;border:1px solid var(--control-border);background:rgba(5,10,14,.34)}
  .harmony-map-shell:has(.chord-cards.chromatic-open) .chromatic-options{grid-template-columns:repeat(4,minmax(0,1fr))}
  .harmony-map-shell:has(.chord-cards.chromatic-open) .preparation-options{grid-template-columns:repeat(6,minmax(0,1fr))}
  .modal-interchange-picker{width:min(100%,430px);margin-right:auto}
  .modal-source-track{min-width:0;width:auto}
  .modal-source-option{display:none}
  .modal-source-option.active,.modal-source-option:has(+ .active),.modal-source-option.active + .modal-source-option{display:block}
}

@media(max-width:699px){
  .modal-interchange-picker{grid-template-columns:28px minmax(0,1fr) 28px;width:min(100%,330px);margin-inline:auto}
  .modal-interchange-picker>#modal-source-previous,.modal-interchange-picker>#modal-source-next{display:grid!important;place-items:center;min-height:30px!important;padding:0!important;font-size:15px!important}
  .modal-source-track{min-width:0;width:auto;justify-content:center}
  .modal-source-option{display:none!important}
  .modal-source-option.active,.modal-source-option:has(+ .active),.modal-source-option.active + .modal-source-option{display:block!important}
}

/* Final-cascade dark technical material and state language. */
.harmony-section{background-color:#0c1218;background-image:linear-gradient(118deg,rgba(118,132,137,.13),rgba(118,132,137,.035) 31%,transparent 57%),linear-gradient(164deg,transparent 12%,rgba(151,160,159,.07) 46%,transparent 78%),linear-gradient(rgba(4,8,12,.62),rgba(4,8,12,.62)),url('assets/monchord-section02-slate.jpg');background-size:auto,auto,auto,cover;background-position:center}
.harmony-section .chord-card,.harmony-section .context-card{background:#141d25;color:#f2f2ec;border-color:rgba(191,204,209,.28);box-shadow:inset 0 1px rgba(255,255,255,.035)}
.harmony-section .chord-card .roman{color:#d8c077}.harmony-section .chord-card .card-notes,.harmony-section .context-card .card-notes{color:#aeb9bf}
.harmony-section .chord-card.selected{color:#f2f2ec;background:#1b2a38;border-color:#d4b75d;box-shadow:inset 0 2px #ef705f,0 0 0 1px rgba(212,183,93,.18)}
.harmony-section .chromatic-card{--identity-signal:#ba7b60;background:color-mix(in srgb,#141d25 92%,var(--identity-signal));border:1px solid color-mix(in srgb,var(--identity-signal) 68%,#27323a);color:#f2f2ec;box-shadow:inset 2px 0 var(--identity-signal)}
.harmony-section .branch-secondaryDiminished .chromatic-card{--identity-signal:#6e9a9b}.harmony-section .branch-tritone .chromatic-card{--identity-signal:#a69b86}.harmony-section .preparation-card{--identity-signal:#a45b78}
.harmony-section .chromatic-card small,.harmony-section .chromatic-card strong{color:color-mix(in srgb,var(--identity-signal) 72%,white)}
.harmony-section .modal-interchange-card{background:color-mix(in srgb,#141d25 92%,var(--mi-card-bg));border-color:color-mix(in srgb,var(--mi-card-bg) 72%,#26313a);color:#f2f2ec;box-shadow:inset 0 2px var(--mi-card-bg)}
.harmony-section .modal-interchange-card>small,.harmony-section .modal-interchange-card .roman,.harmony-section .modal-interchange-card strong{color:color-mix(in srgb,var(--mi-card-bg) 74%,white)}
.harmony-section .modal-interchange-card .card-notes{color:#aeb9bf}.harmony-section .modal-interchange-card.same-as-home{background:#141d25;color:#f2f2ec}
.harmony-section .segmented button.active,.harmony-section .chromatic-options button.active,.harmony-section .preparation-options button.active{color:#f3d77d;border-color:#c9a75d;background:rgba(201,167,93,.10);box-shadow:inset 0 0 10px rgba(201,167,93,.09)}
.harmony-section .modal-interchange-picker .modal-source-option[data-modal-source].active{color:color-mix(in srgb,var(--mi-source) 65%,white);border-color:var(--mi-source);background:color-mix(in srgb,#141d25 88%,var(--mi-source));box-shadow:inset 0 -1px var(--mi-source)}
.diatonic-backbone line{stroke:#dbc46f;stroke-width:1;filter:drop-shadow(0 0 2px rgba(219,196,111,.34))}
.chord-variation-control>div,.dominant-alteration-control>div{grid-template-columns:repeat(auto-fit,minmax(72px,1fr))}
.dominant-alteration-control button[aria-pressed="true"]{color:var(--coral);background:white}

/* Final authoritative hierarchy dimensions. */
.harmony-map-shell .diatonic-backbone{display:none!important}
.harmony-map-shell .symbol-extension{font-size:.68em;font-weight:650;letter-spacing:-.025em}
.harmony-map-shell .chord-card strong,.harmony-map-shell .context-card strong{display:block;max-width:calc(100% - 14px);white-space:nowrap;overflow:visible;text-overflow:clip;line-height:1}
@media(min-width:700px){
 .harmony-map-shell .degree-anchor{grid-template-columns:minmax(0,.82fr) minmax(0,.89fr) minmax(0,1fr)!important;grid-template-rows:112px auto!important;gap:7px 8px!important;align-items:end!important}
 .harmony-map-shell .degree-home-stack{grid-column:3!important;grid-row:1/3!important;align-self:start!important;gap:5px!important}
 .harmony-map-shell .degree-home-stack>.chord-card{box-sizing:border-box!important;height:112px!important;min-height:112px!important;padding:12px 9px!important}
 .harmony-map-shell .degree-home-stack>.modal-interchange-card{box-sizing:border-box!important;height:70px!important;min-height:70px!important;padding:8px 9px!important}
 .harmony-map-shell .approach-route{grid-column:2!important;grid-row:1!important;align-self:end!important;transform:translateY(8px)!important}
 .harmony-map-shell .preparation-route{grid-column:1!important;grid-row:1!important;align-self:end!important;transform:translateY(16px)!important}
 .harmony-map-shell .approach-card{box-sizing:border-box!important;height:100px!important;min-height:100px!important;padding:9px!important}
 .harmony-map-shell .preparation-card{box-sizing:border-box!important;height:92px!important;min-height:92px!important;padding:8px!important}
 .harmony-map-shell .chord-card strong{font-size:16px!important}.harmony-map-shell .chromatic-card strong{font-size:13px!important}.harmony-map-shell .modal-interchange-card strong{font-size:13px!important}
}
@media(max-width:699px){
 .harmony-map-shell .degree-home-stack>.chord-card{box-sizing:border-box!important;width:62px!important;height:62px!important;min-height:62px!important}
 .harmony-map-shell .approach-card{box-sizing:border-box!important;width:56px!important;height:55px!important;min-height:55px!important;transform:translateY(-4px)!important}
 .harmony-map-shell .preparation-card{box-sizing:border-box!important;width:52px!important;height:50px!important;min-height:50px!important;transform:translateY(3px)!important}
 .harmony-map-shell .degree-home-stack>.modal-interchange-card{box-sizing:border-box!important;height:42px!important;min-height:42px!important;padding:5px 7px!important}
 .harmony-map-shell .modal-interchange-card strong{font-size:10px!important}
 .harmony-map-shell .map-density-modal .degree-anchor,.harmony-map-shell .map-density-chromatic.modal-open .degree-anchor,.harmony-map-shell .map-density-preparation.modal-open .degree-anchor{min-height:110px!important}
}

/* Authoritative RC26.6 hierarchy correction: intentionally last in cascade. */
.harmony-map-shell .diatonic-backbone{display:none!important}
.harmony-map-shell .symbol-extension{font-size:.68em;font-weight:650;letter-spacing:-.025em}
.harmony-map-shell .chord-card strong,.harmony-map-shell .context-card strong{display:block;max-width:calc(100% - 14px);white-space:nowrap;overflow:visible;text-overflow:clip;line-height:1}
.harmony-map-shell .card-unlock-button{position:absolute!important;z-index:20!important;width:20px!important;height:20px!important;padding:0!important;transform:translate(4px,-4px)}
.harmony-map-shell .modal-interchange-card.same-as-home{filter:saturate(.38);border-color:rgba(159,171,176,.2)!important;box-shadow:inset 0 1px rgba(159,171,176,.22)!important}
.harmony-map-shell .modal-interchange-card.same-as-home .roman,.harmony-map-shell .modal-interchange-card.same-as-home strong{color:#849097!important}
@media(min-width:700px){
  .harmony-map-shell .degree-anchor{grid-template-columns:minmax(0,.82fr) minmax(0,.89fr) minmax(0,1fr)!important;grid-template-rows:112px auto!important;gap:7px 8px!important;align-items:end!important}
  .harmony-map-shell .degree-home-stack{grid-column:3!important;grid-row:1/3!important;align-self:start!important;gap:5px!important}
  .harmony-map-shell .degree-home-stack>.chord-card{box-sizing:border-box!important;height:112px!important;min-height:112px!important;padding:12px 9px!important}
  .harmony-map-shell .degree-home-stack>.modal-interchange-card{box-sizing:border-box!important;height:70px!important;min-height:70px!important;padding:8px 9px!important}
  .harmony-map-shell .approach-route{grid-column:2!important;grid-row:1!important;align-self:end!important;transform:translateY(8px)!important}
  .harmony-map-shell .preparation-route{grid-column:1!important;grid-row:1!important;align-self:end!important;transform:translateY(16px)!important}
  .harmony-map-shell .approach-card{box-sizing:border-box!important;height:100px!important;min-height:100px!important;padding:9px!important}
  .harmony-map-shell .preparation-card{box-sizing:border-box!important;height:92px!important;min-height:92px!important;padding:8px!important}
  .harmony-map-shell .chord-card strong{font-size:16px!important}.harmony-map-shell .chromatic-card strong{font-size:13px!important}.harmony-map-shell .modal-interchange-card strong{font-size:13px!important}
  .harmony-map-shell .approach-route::after,.harmony-map-shell .preparation-route::after{top:42%!important;right:-9px!important;width:10px!important;transform:rotate(-16deg)!important;transform-origin:right center}
  .harmony-map-shell .approach-route::before,.harmony-map-shell .preparation-route::before{top:calc(42% - 4px)!important;right:-9px!important}
}
@media(max-width:699px){
  .harmony-map-shell .degree-home-stack>.chord-card{box-sizing:border-box!important;width:62px!important;height:62px!important;min-height:62px!important}
  .harmony-map-shell .approach-card{box-sizing:border-box!important;width:56px!important;height:55px!important;min-height:55px!important;transform:translateY(-4px)!important}
  .harmony-map-shell .preparation-card{box-sizing:border-box!important;width:52px!important;height:50px!important;min-height:50px!important;transform:translateY(3px)!important}
  .harmony-map-shell .degree-home-stack>.modal-interchange-card{box-sizing:border-box!important;height:42px!important;min-height:42px!important;padding:5px 7px!important}
  .harmony-map-shell .modal-interchange-card strong{font-size:10px!important}
  .harmony-map-shell .map-density-modal .degree-anchor,.harmony-map-shell .map-density-chromatic.modal-open .degree-anchor,.harmony-map-shell .map-density-preparation.modal-open .degree-anchor{min-height:110px!important}
}

/* RC26.6 hierarchy and compact instrument-control correction. */
.harmony-map-shell .diatonic-backbone{display:none!important}
.harmony-map-shell .chord-card strong,.harmony-map-shell .context-card strong{display:block;max-width:calc(100% - 18px);overflow:visible;white-space:nowrap;text-overflow:clip;line-height:1}
.harmony-map-shell .symbol-extension{font-size:.68em;font-weight:650;letter-spacing:-.025em}
.harmony-map-shell .card-notes{font-size:9px!important;line-height:1.05;color:#8f9ca3!important}
.harmony-map-shell .modal-interchange-card.same-as-home{filter:saturate(.42);border-color:rgba(159,171,176,.22);box-shadow:inset 0 1px rgba(159,171,176,.25)}
.harmony-map-shell .modal-interchange-card.same-as-home .roman,.harmony-map-shell .modal-interchange-card.same-as-home strong{color:#87939a}
.harmony-map-shell .card-unlock-button{position:absolute!important;z-index:20;width:24px;height:24px;padding:0;border-radius:50%;transform:translate(5px,-5px)}
.harmony-map-shell .compact-context-card{display:block!important}
.harmony-map-shell>.chromatic-controls{border:1px solid var(--control-border)!important;background:rgba(5,10,14,.34)!important}
.harmony-section .chromatic-content,.harmony-section .preparation-controls,.harmony-section .modal-interchange-controls{border:0!important;background:transparent!important}
.harmony-section .chromatic-options,.harmony-section .preparation-options{gap:5px}
.harmony-section .chromatic-options button,.harmony-section .preparation-options button{border-color:transparent;background:transparent;box-shadow:inset 0 -1px rgba(205,215,218,.14)}
.harmony-section .chromatic-options [data-chromatic-toggle="secondaryDominant"],.harmony-section .chromatic-options [data-chromatic-toggle="secondaryDiminished"]{color:#91b7c2}
.harmony-section .chromatic-options [data-chromatic-toggle="tritone"]{color:#aeb99b}
.harmony-section .chromatic-options [data-chromatic-toggle="modalInterchange"]{color:#d6bd79}
.harmony-section .preparation-options button{color:#c8a0af}
.harmony-section .modal-interchange-picker{width:min(100%,390px);min-height:34px}
.harmony-section .modal-source-option{min-height:30px!important;padding:5px 9px!important}

@media(min-width:700px){
  .harmony-map-shell .degree-anchor{grid-template-columns:minmax(0,.82fr) minmax(0,.89fr) minmax(0,1fr)!important;grid-template-rows:112px auto!important;gap:7px 8px!important;align-items:end!important}
  .harmony-map-shell .degree-home-stack{grid-column:3!important;grid-row:1/3!important;align-self:start!important;gap:5px!important}
  .harmony-map-shell .degree-home-stack>.chord-card{height:112px!important;min-height:112px!important;padding:13px 10px!important}
  .harmony-map-shell .degree-home-stack>.modal-interchange-card{height:70px!important;min-height:70px!important;padding:9px 10px!important}
  .harmony-map-shell .approach-route{grid-column:2!important;grid-row:1!important;align-self:end!important;transform:translateY(8px)!important}
  .harmony-map-shell .preparation-route{grid-column:1!important;grid-row:1!important;align-self:end!important;transform:translateY(16px)!important}
  .harmony-map-shell .approach-card{height:100px!important;min-height:100px!important;padding:10px!important}
  .harmony-map-shell .preparation-card{height:92px!important;min-height:92px!important;padding:9px!important}
  .harmony-map-shell .chord-card strong{font-size:17px!important}.harmony-map-shell .chromatic-card strong{font-size:14px!important}.harmony-map-shell .modal-interchange-card strong{font-size:14px!important}
  .harmony-map-shell .approach-route::after,.harmony-map-shell .preparation-route::after{top:42%!important;right:-9px!important;width:10px!important;transform:rotate(-16deg);transform-origin:right center}
  .harmony-map-shell .approach-route::before,.harmony-map-shell .preparation-route::before{top:calc(42% - 4px)!important;right:-9px!important}
  .harmony-map-shell .chromatic-content{grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:8px 14px!important}
  .harmony-map-shell .chromatic-options{grid-column:1!important;grid-row:1!important}
  .harmony-map-shell .preparation-controls,.harmony-map-shell .modal-interchange-controls{grid-column:2!important;grid-row:1!important;margin:0!important;padding:0 0 0 12px!important;border-left:1px solid var(--control-divider)!important}
}

@media(max-width:699px){
  .harmony-map-shell .degree-home-stack>.chord-card{height:62px!important;min-height:62px!important}
  .harmony-map-shell .approach-card{height:55px!important;min-height:55px!important;transform:translateY(-3px)!important}
  .harmony-map-shell .preparation-card{height:50px!important;min-height:50px!important;transform:translateY(3px)!important}
  .harmony-map-shell .degree-home-stack>.modal-interchange-card{height:42px!important;min-height:42px!important;padding:5px 7px!important}
  .harmony-map-shell .modal-interchange-card strong{font-size:10px!important}
  .harmony-map-shell .map-density-modal .degree-anchor,.harmony-map-shell .map-density-chromatic.modal-open .degree-anchor,.harmony-map-shell .map-density-preparation.modal-open .degree-anchor{min-height:110px!important}
  .harmony-map-shell .chromatic-options{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .harmony-section .preparation-options{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;overflow:visible!important}
  .harmony-section .preparation-options button{min-width:0!important;width:auto!important}
}
.harmony-section .branch-secondaryDominant .approach-card{--identity-signal:#ba7b60;color:#f2f2ec!important;border-color:#80513b!important;background:color-mix(in srgb,#141d25 92%,#ba7b60)!important}
.harmony-section .branch-secondaryDiminished .approach-card{--identity-signal:#6e9a9b;color:#f2f2ec!important;border-color:#38585a!important;background:color-mix(in srgb,#141d25 92%,#6e9a9b)!important}
.harmony-section .branch-tritone .approach-card{--identity-signal:#a69b86;color:#f2f2ec!important;border-color:#6f685e!important;background:color-mix(in srgb,#141d25 92%,#a69b86)!important}
.harmony-section .branch-secondaryDominant .preparation-card,.harmony-section .branch-secondaryDiminished .preparation-card,.harmony-section .branch-tritone .preparation-card{--identity-signal:#a45b78;color:#f2f2ec!important;border-color:#7b4059!important;background:color-mix(in srgb,#141d25 92%,#a45b78)!important}
* { box-sizing:border-box; }
[hidden]{display:none!important}
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); }
button,select { font:inherit; }
button { cursor:pointer; }
.site-header { height:78px; padding:0 max(22px,calc((100% - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; color:white; background:var(--navy); border-bottom:1px solid #ffffff1f; }
.brand { display:flex; gap:11px; color:white; text-decoration:none; align-items:center; letter-spacing:.12em; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--gold); border-radius:50%; color:var(--gold); font-family:var(--serif); font-size:23px; }
.brand b,.brand small { display:block; }.brand b{font-size:12px}.brand small{margin-top:3px;color:#b9c0cd;font-size:10px;letter-spacing:.16em}.site-header>p{font-family:var(--serif);font-style:italic;color:#c3c8d1;font-size:14px}
.mobile-nav{display:none}
.hero { padding:72px 22px 82px; text-align:center; color:white; background:radial-gradient(circle at 80% 0,#26395b 0,transparent 38%),var(--navy); }
.eyebrow,.section-heading p,.voicing-copy>span,.card-title span { margin:0 0 12px; color:var(--coral); font-size:11px; font-weight:700; letter-spacing:.2em; }
.hero h1 { margin:0; font:54px/1.02 var(--serif); letter-spacing:-.02em; }.hero h1 em{color:var(--gold);font-weight:400}.hero>p:last-child{max-width:610px;margin:22px auto 0;color:#c2c8d4;line-height:1.7;font-size:15px}
main>section:not(.hero){padding-left:max(22px,calc((100% - 1180px)/2));padding-right:max(22px,calc((100% - 1180px)/2))}
.panel{margin:0 auto}.context-panel{padding-top:50px;padding-bottom:54px;background:var(--paper)}
.section-heading{display:flex;gap:16px;align-items:center;margin-bottom:28px}.section-heading>span{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--gold);border-radius:50%;color:#937437;font-size:11px;font-weight:700}.section-heading p{margin-bottom:4px}.section-heading h2{margin:0;font:30px var(--serif)}
.select-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.select-row label{font-size:11px;text-transform:uppercase;letter-spacing:.14em;font-weight:700}.select-row select{display:block;width:100%;margin-top:9px;padding:15px 44px 15px 16px;border:1px solid var(--line);border-radius:3px;color:var(--ink);background:white}
.scale-strip{display:flex;align-items:center;gap:24px;margin-top:18px;padding:18px 20px;background:var(--ivory)}.scale-strip>span{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.16em}.scale-strip>div{display:flex;gap:10px;flex-wrap:wrap}.scale-strip div span{display:flex;align-items:center;gap:6px;font-family:var(--serif);font-size:18px}.scale-strip small{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;color:#8b713f;background:#e9ddc2;font:9px var(--sans)}
.harmony-section{padding-top:50px;padding-bottom:56px;background:#f0ece3}.chord-cards{display:grid;grid-template-columns:repeat(7,1fr);gap:9px;align-items:start}.target-stack{position:relative;min-width:0}.chord-card{position:relative;width:100%;min-width:0;padding:20px 12px;text-align:left;border:1px solid #d7d0c4;background:#faf8f2;color:var(--ink);transition:.2s}.chord-card:hover{transform:translateY(-2px);border-color:#b9a16d}.chord-card.selected{color:white;background:var(--navy2);border-color:var(--navy2);box-shadow:inset 0 3px var(--coral)}.chord-card .roman{display:block;margin-bottom:15px;color:#9a7b41;font:17px var(--serif)}.chord-card.selected .roman{color:var(--gold)}.chord-card strong{display:block;max-width:100%;min-height:26px;font:24px/26px var(--serif);white-space:nowrap;transform-origin:left center}.card-notes{display:flex;gap:5px;flex-wrap:wrap;margin-top:12px;color:var(--muted);font-size:12px}.chord-card.selected .card-notes{color:#d8dce4}.chord-card>i{position:absolute;right:10px;top:10px;font-style:normal;opacity:.45}
.note-token{display:inline-flex;gap:2px;align-items:flex-start}.note-token i{font-style:normal;font-family:Arial,sans-serif;font-size:.72em;line-height:1;color:#b84639}.chord-card.selected .note-token i{color:#ff9b8d}.chord-summary .note-token i{color:#672c28}.note-token.character i{color:#8b6e2f}.note-legend{display:flex;gap:5px;align-items:center;margin:10px 0 0;color:#747b87;font-size:10px}.note-legend span{color:#b84639;font-family:Arial,sans-serif}.summary-legend{color:#652f29}.summary-legend span{color:#652f29}
.level-control{display:flex;justify-content:space-between;align-items:center;margin-top:24px}.level-control>span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.15em}.segmented{display:flex;background:white;border:1px solid var(--line);padding:4px}.segmented button,.voicing-buttons button{min-width:72px;padding:9px 13px;border:0;color:#5b6270;background:transparent}.segmented button.active,.voicing-buttons button.active{color:white;background:var(--navy)}
.chromatic-controls{display:grid;gap:9px;margin-top:18px;padding-top:16px;border-top:1px solid #d7d0c4}.chromatic-controls>span{color:var(--navy);font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.chromatic-options,.preparation-controls,.preparation-options{display:flex;gap:7px;flex-wrap:wrap}.chromatic-controls button{padding:10px 14px;border:1px solid #cfc7b8;color:#5b6270;background:#faf8f2;font-size:11px;font-weight:700}.chromatic-controls button:hover,.chromatic-controls button.active{color:white;background:var(--navy);border-color:var(--navy)}.chromatic-controls button:disabled{cursor:not-allowed;opacity:.38}.preparation-controls{padding-left:18px;border-left:3px solid var(--coral)}.preparation-options button.active{background:#6d3044;border-color:#6d3044}.chord-cards.chromatic-open{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.chromatic-hierarchy{display:grid;gap:8px;margin-top:7px}.chromatic-branch{position:relative;display:grid;gap:6px;padding:8px 6px 7px 5px;border-left:2px solid var(--coral);background:#e8ddd1;animation:unfold .28s ease-out both;animation-delay:calc(var(--reveal-index)*40ms)}.approach-route,.preparation-route{display:flex;align-items:flex-end;gap:6px}.chromatic-card{display:grid;gap:5px;min-width:0;text-align:left;color:white;border:0}.chromatic-card small{font-size:7px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;opacity:.8}.chromatic-card strong{font:18px var(--serif)}.chromatic-card>span{display:flex;gap:3px;flex-wrap:wrap;font-size:9px}.approach-card{width:64%;margin-left:23%;padding:10px;background:#d35d49}.preparation-card{width:58%;margin-left:5%;padding:9px;background:#6d3044}.chromatic-card:hover,.chromatic-card.selected{outline:2px solid var(--gold);outline-offset:1px}.branch-secondaryDiminished .approach-card{background:#b65054}.branch-tritone .approach-card{background:#c9703f}@keyframes unfold{from{opacity:0;transform:translate(18px,-8px)}to{opacity:1;transform:translate(0,0)}}
.detail-section{padding-top:56px;padding-bottom:64px;color:white;background:var(--navy)}.section-heading.light h2{color:white}.section-heading.light>span{color:var(--gold)}.detail-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:16px}.chord-summary{grid-row:span 2;display:flex;flex-direction:column;padding:36px;background:var(--coral)}.chord-summary .roman{margin:0 0 4px;color:#5b2825;font-size:11px;letter-spacing:.18em}.chord-summary h3{margin:0;font:52px var(--serif)}.chord-summary dl{margin:32px 0}.chord-summary dl div{padding:17px 0;border-top:1px solid #ffffff42}.chord-summary dt{margin-bottom:8px;color:#652f29;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.15em}.chord-summary dd{display:flex;gap:9px;flex-wrap:wrap;margin:0;font-size:18px}.play-button{margin-top:auto;padding:15px;border:1px solid white;color:white;background:transparent;font-weight:700}.play-button:hover{color:var(--coral);background:white}.play-button span{margin-right:8px}
.bass-tone-target{min-width:28px;padding:0;border:0;color:inherit;background:transparent;font:inherit;line-height:inherit;cursor:pointer}.bass-tone-target:hover,.bass-tone-target:focus-visible{color:white}.note-bass-target{display:inline-flex;align-items:flex-start;gap:2px}.chord-summary dl .chord-tone-line{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;padding:0;border:0}.chord-tone-line dd{flex:1}.chord-tone-line #custom-bass-button{flex:0 0 auto;min-height:34px;padding:6px 9px;border:1px solid #ffffff8a;color:white;background:transparent;font-size:9px;font-weight:700;letter-spacing:.06em}.chord-tone-line #custom-bass-button.active{color:var(--coral);background:white}.key.bass-picker-candidate{cursor:crosshair;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--gold) 60%,transparent)}.key.bass-picker-candidate:after{content:'';position:absolute;inset:4px;border:1px dashed color-mix(in srgb,var(--gold) 72%,transparent);pointer-events:none}.key.bass-picker-selected{box-shadow:inset 0 0 0 3px var(--gold)}
.play-actions{margin-top:auto}.play-actions .play-button{width:100%;margin-top:0}.avoid-play-buttons{display:grid;grid-template-columns:1fr 1fr;border:1px solid white}.avoid-play-buttons button{display:grid;grid-template-columns:auto 1fr;column-gap:7px;align-items:center;padding:13px 10px;border:0;color:white;background:transparent;font-size:11px;font-weight:700;line-height:1.25}.avoid-play-buttons button+button{border-left:1px solid #ffffff8a}.avoid-play-buttons button:hover{color:var(--coral);background:white}.avoid-play-buttons button>span{grid-row:1/3;font-size:13px}.avoid-play-buttons small{font-size:8px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;opacity:.75}
.visual-card{padding:24px;color:var(--ink);background:var(--paper)}.card-title{display:flex;justify-content:space-between}.card-title span{display:block;margin:0 0 3px}.card-title h3{margin:0;font:24px var(--serif)}.card-title .badge{height:max-content;padding:5px 7px;color:#8c7140;background:#eee4ce;font:8px var(--sans)}.notation svg{display:block;width:100%;height:230px}.staff-lines line,.staff-note line,.staff-connector{stroke:#303643;stroke-width:1.4}.clef{font-family:serif;fill:#222a3b}.treble{font-size:64px}.bass{font-size:52px}.grand-brace{fill:none;stroke:#303643;stroke-width:2}.staff-note text{font:20px serif}.staff-note ellipse{fill:var(--navy)}.notation-bass-voice ellipse{fill:#b44732}
.notation-card{position:relative}.notation-pitch-badge{position:absolute;top:24px;right:24px;padding:5px 7px;color:#8c7140;background:#eee4ce;font:8px var(--sans)}
.keyboard{margin-top:22px}.keys{position:relative;height:120px;margin-bottom:20px}.key{position:absolute;top:0}.key.white{left:calc(var(--i)*100%/var(--white-count));width:calc(100%/var(--white-count) + 1px);height:116px;border:1px solid #c8c7c2;background:white}.key.black{z-index:2;left:calc((var(--i) + .72)*100%/var(--white-count));width:calc(58%/var(--white-count));height:70px;background:#1d2639}.tone-root{--tone:#cf593d}.tone-core{--tone:#f19a72}.tone-extension{--tone:#e4bc53}.tone-avoid{--tone:#f2b4c1}.key.pitch-class:after{content:'';position:absolute;left:50%;bottom:8px;width:6px;height:6px;transform:translateX(-50%);border-radius:50%;background:var(--tone)}.key.voiced{background:var(--tone)}.key.black.voiced{background:color-mix(in srgb,var(--tone) 82%,#172033)}.key.voiced>i{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);color:white;font-style:normal;font-family:Arial,sans-serif;font-size:9px}.key.tone-avoid.voiced>i{color:#6f3340;font-size:12px}.keyboard-legend{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:10px}.keyboard-legend i{display:inline-block;width:8px;height:8px;margin-right:5px}.root-dot{background:#cf593d}.core-dot{background:#f19a72}.extension-dot{background:#e4bc53}.avoid-dot{background:#f2b4c1}.pc-dot{border:2px solid #aeb2ba;border-radius:50%;background:transparent}
.key{cursor:pointer;touch-action:manipulation;transition:filter .08s,transform .08s}.key.pressed{filter:brightness(.76);transform:translateY(2px)}.key:focus-visible,.note-token.avoid:focus-visible,.staff-note.notation-avoid:focus-visible{outline:2px solid #a84f65;outline-offset:3px}.note-token.avoid,.staff-note.notation-avoid{cursor:help}.avoid-note-tooltip{position:fixed;z-index:1000;width:max-content;max-width:calc(100vw - 24px);padding:10px 13px;border:1px solid #d3919f;border-radius:3px;color:#fff;background:#472a35;box-shadow:0 9px 28px #07102555;font-size:12px;line-height:1.45;pointer-events:none}.avoid-note-tooltip strong,.avoid-note-tooltip span{display:block}.avoid-note-tooltip strong{color:#ffc5d0}.avoid-note-tooltip span{margin-top:2px;color:#f2e1e5}.avoid-note-tooltip[data-pinned="true"]{box-shadow:0 9px 30px #07102580}
.voicing-panel{display:grid;grid-template-columns:1fr 1.5fr;gap:36px;margin-top:16px;padding:26px 30px;border:1px solid #ffffff28;background:#ffffff08}.voicing-copy h3{margin:0 0 6px;font:25px var(--serif)}.voicing-copy p{margin:0;color:#aeb6c5;font-size:12px}.voicing-buttons{display:grid;grid-template-columns:repeat(var(--voicing-count,4),1fr);border:1px solid #ffffff31}.voicing-buttons button{color:#cdd2db;border-right:1px solid #ffffff25}.voicing-buttons button.active{color:var(--navy);background:var(--gold)}.voicing-buttons button:disabled{cursor:not-allowed;opacity:.35}.voiced-line{display:flex;justify-content:space-between;margin:14px 0 0;color:#aeb6c5;font-size:11px}.voiced-line b{color:white;letter-spacing:.08em}
.voice-leading-panel{display:grid;grid-template-columns:1fr auto;gap:18px 28px;margin-top:16px;padding:26px 30px;border:1px solid #d0aa55;background:#172642;color:white}.voice-leading-panel>div>span{color:var(--coral);font-size:10px;font-weight:800;letter-spacing:.14em}.voice-leading-panel h3{margin:6px 0;font:25px var(--serif)}.voice-leading-panel p{margin:5px 0;color:#cbd1db;font-size:12px}.voice-leading-panel>button{align-self:center;padding:14px 20px;color:var(--navy);background:var(--gold);font-weight:800}.voice-leading-panel details{grid-column:1/-1;border-top:1px solid #ffffff25;padding-top:14px}.voice-leading-panel summary{cursor:pointer;color:var(--gold);font-size:11px;font-weight:800}.voice-leading-panel details section{padding:10px 0;border-bottom:1px solid #ffffff18}.voice-leading-panel details h4{margin:0 0 6px;font:19px var(--serif)}
.voicing-play{width:100%;margin-top:14px;padding:11px;border:1px solid var(--gold);color:var(--gold);background:transparent;font-weight:700}.voicing-play:hover{color:var(--navy);background:var(--gold)}.voicing-play span{margin-right:7px}.voicing-play small{margin-left:4px;font-size:7px;letter-spacing:.08em;opacity:.75}
.keyboard-legend .dual-swatch i:first-child{margin-right:2px}
.keyboard-voicing-note{margin:10px 0 0;color:var(--muted);font-size:10px;line-height:1.55}
.symbol-review{margin:7px 0 0;color:#672c28;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em}.symbol-review-card{display:block;margin-top:4px;color:var(--gold);font-size:7px;text-transform:uppercase;letter-spacing:.08em}.transformation-control{margin:0 0 16px}.transformation-control>span{display:block;margin-bottom:7px;color:#652f29;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.12em}.transformation-control>div{display:grid;grid-template-columns:1fr 1fr;border:1px solid #ffffff8a}.transformation-control button{padding:8px;border:0;color:white;background:transparent;font-size:10px;font-weight:700}.transformation-control button+button{border-left:1px solid #ffffff8a}.transformation-control button.active{color:var(--coral);background:white}.transformation-control button:disabled{cursor:not-allowed;opacity:.38}.transformation-control p{min-height:24px;margin:7px 0 0;color:#652f29;font-size:9px;line-height:1.35}.character-play-buttons,.keyboard-character-play{margin-top:10px}.character-play-buttons{border-color:#5e9da7}.character-play-buttons button+button{border-left-color:#ffffff8a}.character-legend-mark{margin-left:10px!important;color:#397f89!important}.note-token.character i{color:#397f89}.tone-character{--tone:#78bcc4}.character-dot{background:#78bcc4}.key.tone-character.voiced>i{font-size:11px}.staff-note.notation-character ellipse{fill:#b4dfe3;stroke:#397f89;stroke-width:1.5}.staff-note .character-marker{fill:#397f89;font:12px Arial,sans-serif}
.staff-note.notation-avoid ellipse{fill:#f2b4c1;stroke:#a84f65;stroke-width:1.5}.staff-note .avoid-marker{fill:#a84f65;font:13px Arial,sans-serif}.notation-footer{display:flex;gap:14px;align-items:center;justify-content:space-between;margin-top:-8px}.notation-footer .note-legend{margin:0}.play-notes-button{padding:9px 12px;border:1px solid var(--coral);color:var(--coral);background:transparent;font-size:10px;font-weight:700}.play-notes-button:hover{color:white;background:var(--coral)}.play-notes-button span{margin-right:6px}
.sus4-equivalence{margin:7px 0 0;color:#672c28;font-size:10px;font-weight:700}.sus4-equivalence-card{display:block;margin-top:4px;color:var(--gold);font-size:8px;letter-spacing:.04em}
.keyboard-play-button{width:100%;margin-top:18px;padding:12px;border:1px solid var(--coral);color:var(--coral);background:transparent;font-size:11px;font-weight:700}.keyboard-play-button:hover{color:white;background:var(--coral)}.keyboard-play-button span{margin-right:7px}
.keyboard-avoid-play{display:grid;grid-template-columns:1fr 1fr;margin-top:18px;border:1px solid var(--coral)}.keyboard-avoid-play button{display:grid;grid-template-columns:auto 1fr;column-gap:7px;align-items:center;padding:12px 10px;border:0;color:var(--coral);background:transparent;font-size:11px;font-weight:700;line-height:1.2}.keyboard-avoid-play button+button{border-left:1px solid var(--coral)}.keyboard-avoid-play button:hover{color:white;background:var(--coral)}.keyboard-avoid-play button>span{grid-row:1/3;font-size:12px}.keyboard-avoid-play small{font-size:8px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;opacity:.75}
footer{display:flex;justify-content:space-between;padding:18px max(22px,calc((100% - 1180px)/2));color:#777f8d;background:#0b1428;font-size:9px;letter-spacing:.12em}
.product-footer{align-items:center;min-height:58px}.footer-brand{display:inline-flex;align-items:center;gap:8px;color:#aeb5c1}.footer-brand img{width:20px;height:22px;opacity:.62}.footer-build{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}
@media(max-width:850px){.chord-cards,.chord-cards.chromatic-open{grid-template-columns:repeat(2,1fr)}.detail-grid{grid-template-columns:1fr}.chord-summary{grid-row:auto}.voicing-panel{grid-template-columns:1fr}.hero h1{font-size:46px}.chromatic-options{display:grid;grid-template-columns:1fr 1fr}.chromatic-options button:last-child{grid-column:1/-1}}
@media(max-width:600px){html{scroll-padding-top:58px}.site-header>p{display:none}.mobile-nav{position:sticky;z-index:10;top:0;display:grid;grid-template-columns:repeat(3,1fr);height:54px;border-bottom:1px solid #ffffff20;background:#0f1a31f2;backdrop-filter:blur(12px)}.mobile-nav a{display:flex;gap:7px;align-items:center;justify-content:center;color:#d6dae2;text-decoration:none;font-size:11px;font-weight:700}.mobile-nav a+a{border-left:1px solid #ffffff18}.mobile-nav span{color:var(--gold);font-size:8px}.hero{padding:54px 22px 62px}.hero h1{font-size:39px}.section-heading h2{font-size:25px}.select-row{grid-template-columns:1fr}.scale-strip{align-items:flex-start;flex-direction:column;gap:12px}.chord-cards,.chord-cards.chromatic-open{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}.target-stack{flex:0 0 78%;scroll-snap-align:start}.approach-card{width:68%;margin-left:18%}.preparation-card{width:62%;margin-left:2%}.level-control{align-items:flex-start;flex-direction:column;gap:12px}.segmented{width:100%}.segmented button{flex:1;min-width:0}.chord-summary{padding:28px}.detail-section{padding-left:16px!important;padding-right:16px!important}.visual-card{padding:18px}.notation svg{height:150px}.voicing-buttons{grid-template-columns:1fr 1fr}.voicing-buttons button{border-bottom:1px solid #ffffff25}.voiced-line{align-items:flex-start;flex-direction:column;gap:8px}.keyboard-legend{flex-wrap:wrap}footer{gap:8px;align-items:flex-start;flex-direction:column;padding-top:16px;padding-bottom:16px}}
@media(prefers-reduced-motion:reduce){.chromatic-branch{animation:none}.chord-card,.chromatic-card{transition:none}}
.chromatic-branch.retracting .preparation-route,.preparation-route.retracting{animation:retract .17s ease-in both}.chromatic-branch.retracting .approach-route{animation:retract .17s .07s ease-in both}@keyframes retract{to{opacity:0;transform:translate(18px,-8px)}}
@media(prefers-reduced-motion:reduce){.chromatic-branch.retracting .preparation-route,.preparation-route.retracting,.chromatic-branch.retracting .approach-route{animation:none}}

/* Chromatic relationship chain grouping. */
.target-stack{overflow:visible}.chromatic-hierarchy{margin-top:10px;overflow:visible}.chromatic-branch{gap:10px;padding:0;border:0;background:transparent}.approach-route,.preparation-route{position:relative;width:100%;align-items:center}.approach-card{width:72%;margin-left:-36%;padding:11px}.preparation-card{width:68%;margin-left:-53%;padding:10px}.preparation-route{animation:unfold-preparation .25s ease-out both}.chromatic-branch{animation-name:unfold-approach}@keyframes unfold-approach{from{opacity:0;transform:translate(34px,-12px)}to{opacity:1;transform:translate(0,0)}}@keyframes unfold-preparation{from{opacity:0;transform:translate(26px,-10px)}to{opacity:1;transform:translate(0,0)}}
@media(max-width:850px){.approach-card{width:70%;margin-left:-28%}.preparation-card{width:66%;margin-left:-42%}}
@media(max-width:600px){.target-stack{flex-basis:82%}.approach-card{width:70%;margin-left:-18%}.preparation-card{width:66%;margin-left:-29%}}
@media(prefers-reduced-motion:reduce){.preparation-route{animation:none}}
@media(max-width:600px){.voice-leading-panel{grid-template-columns:1fr;padding:22px 18px}.voice-leading-panel>button{width:100%}.voice-leading-panel details{grid-column:1}}
@media(max-width:600px){.notation svg.grand-staff{height:220px}}

/* UI hierarchy and responsive journey */
.select-row label{font-size:14px;letter-spacing:.1em}.select-row select{min-height:48px;margin-top:8px;padding-top:11px;padding-bottom:11px;font-size:17px;font-weight:600}
.scale-strip{padding-top:20px;padding-bottom:20px}.scale-strip>span{font-size:11px}.scale-strip>div{gap:14px 18px}.scale-strip div span{gap:7px;font-size:21px}.scale-strip small{font-size:9px}
.level-control{margin-top:0}.level-control>span{font-size:13px}.segmented button{min-height:42px;font-size:14px;font-weight:600}
.chromatic-controls{margin-top:20px;padding-top:20px}.chromatic-controls>span{font-size:12px}.chromatic-controls button{min-height:44px;padding:10px 20px;font-size:14px;font-weight:600}
.chord-cards{margin-top:28px}.card-notes{gap:7px;font-size:14px;line-height:1.45}.chromatic-card strong{font-size:20px}.chromatic-card>span{gap:5px;font-size:11px;line-height:1.4}
.chord-summary h3{font-size:54px;line-height:1.04}.chord-summary dt{margin-bottom:10px;font-size:14px}.chord-summary dd{font-size:20px;line-height:1.35}.chord-summary .summary-legend{font-size:13px;line-height:1.4}.transformation-control>span{margin-bottom:9px;font-size:14px}.transformation-control button{min-height:42px;font-size:15px}.transformation-control p{min-height:34px;margin-top:9px;font-size:13px;line-height:1.45}.chord-summary .play-button{min-height:50px;font-size:16px}.voiced-line b{font-size:13px}.voice-leading-region{padding-top:0;padding-bottom:44px;background:#f0ece3}.voice-leading-region:has(.voice-leading-panel[hidden]){display:none}.voice-leading-panel{margin-top:0}.voice-leading-panel h3{font-size:30px}.voice-leading-panel>div>p{font-size:17px;line-height:1.5}.voice-leading-panel details{font-size:10px}.voice-leading-panel details h4{font-size:14px}

@media(max-width:768px){
  .select-row{grid-template-columns:1fr;gap:18px}.select-row label{font-size:14px}.select-row select{min-height:48px;font-size:17px}
  .scale-strip{align-items:flex-start;flex-direction:column;gap:12px}.scale-strip>div{width:100%;justify-content:space-between}.scale-strip div span{font-size:21px}
  .level-control{align-items:flex-start;flex-direction:column;gap:10px}.segmented{display:grid;grid-template-columns:repeat(5,1fr);width:100%}.segmented button{min-width:0;min-height:44px;padding:9px 5px}
  .chromatic-controls{margin-top:18px;padding-top:18px}.chromatic-options{display:grid;grid-template-columns:1fr 1fr;gap:9px}.chromatic-options button{width:100%;min-height:44px;padding:10px 12px;font-size:14px}.chromatic-options button:last-child{grid-column:1/-1}
  .preparation-controls{display:block;padding:10px 0 0;border-left:0;border-top:2px solid var(--coral)}.preparation-controls>button{width:100%;min-height:44px}.preparation-options{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:8px}.preparation-options button{min-width:0;padding:9px 5px}
  .chord-cards,.chord-cards.chromatic-open{display:grid;grid-template-columns:1fr;gap:10px;overflow:visible;padding-bottom:0}.target-stack,.chord-cards.chromatic-open .target-stack{width:100%;min-width:0}.chord-card{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto;min-height:90px;padding:10px 42px 10px 15px}.chord-card .roman{grid-column:1;margin:0 0 1px;font-size:15px;line-height:1.2}.chord-card strong{grid-column:1;margin:0;font-size:23px;line-height:1.1}.card-notes{grid-column:1/-1;margin-top:5px;font-size:14px;line-height:1.25}.chord-card>i{top:12px;right:15px}
  .chromatic-hierarchy{display:grid;gap:7px;margin:7px 0 3px 18px}.chromatic-branch{gap:7px}.approach-route,.preparation-route{width:100%;gap:7px}.approach-card,.preparation-card{width:calc(100% - 34px);margin-left:0;padding:10px 13px}.preparation-card{margin-left:14px;width:calc(100% - 48px)}.chromatic-card strong{font-size:19px}.chromatic-card>span{font-size:12px}.approach-route i,.preparation-route i{transform:rotate(90deg)}
  .voice-leading-region{padding-left:16px!important;padding-right:16px!important;padding-bottom:38px}.voice-leading-panel{grid-template-columns:1fr;padding:22px 18px}.voice-leading-panel h3{font-size:28px}.voice-leading-panel>div>p{font-size:16px}.voice-leading-panel>button{width:100%;min-height:46px}.voice-leading-panel details{grid-column:1}.detail-section{padding-left:16px!important;padding-right:16px!important}
  .chord-summary h3{font-size:40px}.chord-summary dt{font-size:13px}.chord-summary dd{font-size:18px}.chord-summary .summary-legend{font-size:12px}.transformation-control>span{font-size:13px}.transformation-control button{min-height:44px;font-size:14px}.transformation-control p{font-size:12px}.chord-summary .play-button{font-size:16px}
}

@media(max-width:430px){.chromatic-options{grid-template-columns:1fr}.chromatic-options button:last-child{grid-column:auto}.preparation-options{grid-template-columns:1fr 1fr}.scale-strip>div{justify-content:flex-start}.scale-strip div span{min-width:38px}}

/* Mobile chromatic harmony: Preparation → Dominant → Target diagonal groups. */
@media(max-width:768px){
  .harmony-section{padding-left:12px!important;padding-right:12px!important}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto;gap:9px 7px;padding:9px 0 15px;border-bottom:1px solid #d8d0c2}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy)>.chord-card{grid-column:3;grid-row:1;width:100%;min-height:82px;padding:9px 26px 9px 10px;align-self:start}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy)>.chord-card strong{overflow-wrap:anywhere;font-size:18px}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy)>.chord-card .card-notes{gap:4px;font-size:10px}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy)>.chord-card>i{top:9px;right:9px}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy)>.chromatic-hierarchy,
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .chromatic-branch{display:contents}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .approach-route,
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .preparation-route{position:relative;display:block;width:100%;margin:0;align-self:start}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .approach-route{grid-column:1;grid-row:2}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .chromatic-branch:has(.preparation-route) .approach-route{grid-column:2;grid-row:2}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .preparation-route{grid-column:1;grid-row:3}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .approach-card,
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .preparation-card{width:100%;min-height:76px;margin:0;padding:9px 10px}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .chromatic-card small{font-size:7px}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .chromatic-card strong{overflow-wrap:anywhere;font-size:16px;line-height:1.08}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .chromatic-card>span{gap:3px;font-size:9px;line-height:1.25}
  .chord-cards.chromatic-open .target-stack:not(:has(.chromatic-hierarchy)){display:block}
}

/* Ryui Music V1.0 Closed Beta shell */
.beta-gate{display:grid;min-height:100svh;padding:28px;place-items:center;color:white;background:radial-gradient(circle at 78% 0,#293c60 0,transparent 40%),var(--navy)}
.beta-gate-card{width:min(100%,440px);padding:42px;border:1px solid #ffffff28;background:#172643;box-shadow:0 24px 70px #050b1980}
.beta-wordmark{display:inline-flex;color:white;text-decoration:none;font:34px/1 var(--serif)}.beta-wordmark em{color:var(--coral);font-style:normal}.beta-product{margin:8px 0 0;color:#d2d7e1;font-size:15px;letter-spacing:.12em}.beta-version,.beta-status{display:inline-block;padding:5px 8px;color:var(--navy);background:var(--gold);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.beta-gate-card h1{margin:28px 0 8px;font:34px var(--serif)}.beta-gate-card>p:not(.beta-product):not(.beta-version){color:#c7cdd8;font-size:15px;line-height:1.65}.beta-gate-card form{display:grid;gap:8px;margin-top:24px}.beta-gate-card label,.beta-support-card label{font-size:13px;font-weight:700}.beta-gate-card input,.beta-support-card input,.beta-support-card select,.beta-support-card textarea{width:100%;padding:12px;border:1px solid #ccd0d7;border-radius:0;color:var(--ink);background:white;font:16px var(--sans)}.beta-gate-card button,.beta-support-card button{min-height:46px;padding:11px 16px;border:1px solid var(--coral);color:white;background:var(--coral);font-weight:800}.beta-gate-card input[aria-invalid="true"]{border-color:#ff9d90;outline:2px solid #ff9d9044}.beta-access-error{margin:2px 0 0!important;color:#ffb5aa!important;font-size:13px!important}.beta-gate-card>small{display:block;margin-top:18px;color:#939dac;font-size:11px;line-height:1.5}
.site-header{height:64px}.brand{gap:12px;letter-spacing:0}.brand-wordmark{font:25px/1 var(--serif)}.brand-wordmark b{font-size:inherit;font-weight:400}.brand-wordmark em{color:var(--coral);font-style:normal}.brand>small{margin:0;padding-left:12px;border-left:1px solid #ffffff35;color:#bdc4d0;font-size:10px;letter-spacing:.12em}.site-header>p{display:flex;gap:10px;align-items:center;margin:0}.site-header .beta-status{padding:4px 7px;font-family:var(--sans);font-style:normal;font-size:8px}
.beta-support{padding-top:52px;padding-bottom:58px;background:var(--ivory)}.beta-about{max-width:720px}.beta-about h2{margin:12px 0 6px;font:30px var(--serif)}.beta-about p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}.beta-support-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}.beta-support-card{padding:26px;border:1px solid var(--line);background:var(--paper)}.beta-support-card h3{margin:0 0 8px;font:24px var(--serif)}.beta-support-card>p{margin:0 0 18px;color:var(--muted);font-size:13px;line-height:1.55}.beta-support-card label{display:block;margin:12px 0 6px}.beta-support-card textarea{resize:vertical}.inline-form{display:grid;grid-template-columns:1fr auto}.inline-form button{white-space:nowrap}.beta-support-card>button{width:100%;margin-top:12px}.form-status{min-height:20px;margin:10px 0 0!important;color:#7b6334!important;font-size:12px!important}
.beta-support-grid.feedback-only{grid-template-columns:minmax(0,720px)}.beta-support-card .secondary-feedback-action{color:var(--coral);background:transparent}.reset-beta-access{padding:0;border:0;color:inherit;background:transparent;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

@media(max-width:768px){.beta-gate{padding:18px}.beta-gate-card{padding:30px 24px}.beta-wordmark{font-size:31px}.site-header{height:60px;padding-left:16px;padding-right:16px}.brand-wordmark{font-size:23px}.brand>small{font-size:9px}.site-header>p{display:none}.beta-support{padding:42px 16px}.beta-support-grid{grid-template-columns:1fr}.beta-support-card{padding:22px 18px}.inline-form{grid-template-columns:1fr}.inline-form button{width:100%}}

/* Mobile/tablet harmonic map: seven vertical targets with leftward functional expansion. */
[data-map-chord]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:pan-y}
@media(max-width:1024px){
  .harmony-section{display:flex;flex-direction:column;padding-left:20px!important;padding-right:20px!important}
  .harmony-section>.section-heading{order:1}.harmony-section>.level-control{order:2}.harmony-section>.chromatic-controls{order:3}.harmony-section>.chord-cards{order:4}.harmony-section>.note-legend{order:5}
  .chord-cards,.chord-cards.chromatic-open{display:grid;grid-template-columns:1fr;gap:12px;overflow:visible;padding-bottom:0}
  .target-stack,.chord-cards.chromatic-open .target-stack{width:100%;min-width:0}
  .chord-card{min-height:88px}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy){display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:0 8px;align-items:stretch;padding:10px 0;border-bottom:1px solid #d8d0c2}
  .chord-cards.chromatic-open.with-preparation .target-stack:has(.chromatic-hierarchy){grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr) 22px minmax(0,1fr);gap:0 6px}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy)>.chord-card{grid-column:3;grid-row:1;width:100%;min-height:86px;margin:0;align-self:stretch}
  .chord-cards.chromatic-open.with-preparation .target-stack:has(.chromatic-hierarchy)>.chord-card{grid-column:5}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy)>.chromatic-hierarchy,
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .chromatic-branch,
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .approach-route,
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .preparation-route{display:contents}
  .chord-cards.chromatic-open .approach-card{grid-column:1;grid-row:1;width:100%;min-height:86px;margin:0;padding:12px 14px;align-self:stretch}
  .chord-cards.chromatic-open.with-preparation .approach-card{grid-column:3}
  .chord-cards.chromatic-open.with-preparation .preparation-card{grid-column:1;grid-row:1;width:100%;min-height:86px;margin:0;padding:12px 14px;align-self:stretch}
  .chromatic-card strong{display:block;max-width:100%;white-space:nowrap;transform-origin:left center}
  .chromatic-card small{font-size:9px}.chromatic-card>span{font-size:11px}
  .chromatic-branch{animation:map-expand .24s ease-out both}.preparation-route{animation:map-expand .24s ease-out both}
  .chord-cards[data-transition="swap"] .chromatic-branch{animation-name:map-crossfade}
  .chromatic-controls{margin-top:22px;padding-top:18px}.chromatic-controls>span{order:1}.preparation-controls{order:2}.chromatic-options{order:3}
  @keyframes map-expand{from{opacity:0;transform:translateX(18px) scaleX(.88)}to{opacity:1;transform:translateX(0) scaleX(1)}}
  @keyframes map-crossfade{from{opacity:.15}to{opacity:1}}
}
@media(max-width:600px){
  .harmony-section{padding-left:12px!important;padding-right:12px!important}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy){grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);gap:0 4px}
  .chord-cards.chromatic-open.with-preparation .target-stack:has(.chromatic-hierarchy){grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr) 16px minmax(0,1fr);gap:0 3px}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy)>.chord-card,
  .chord-cards.chromatic-open .approach-card,
  .chord-cards.chromatic-open.with-preparation .preparation-card{min-height:82px;padding:9px 8px}
  .chord-cards.chromatic-open .chord-card>i{top:8px;right:8px}
  .chord-cards.chromatic-open .chord-card .roman{font-size:12px}
  .chord-cards.chromatic-open .chord-card strong{font-size:18px;line-height:1.08}
  .chord-cards.chromatic-open .chromatic-card small{font-size:7px;line-height:1.2}
  .chord-cards.chromatic-open .chromatic-card strong{font-size:16px;line-height:1.08}
  .chord-cards.chromatic-open .chromatic-card>span,.chord-cards.chromatic-open .chord-card .card-notes{display:none}
  .chromatic-options{grid-template-columns:1fr}.chromatic-options button:last-child{grid-column:auto}
}

/* RC26.6 Metro Metal working surfaces: cool architectural panels, no texture. */
body{background:var(--surface-page)}
.context-panel{background:var(--surface-setup)}
.scale-strip{border:1px solid var(--metal-divider);background:var(--surface-raised)}
.harmony-section{background:var(--surface-harmony)}
.chromatic-controls{border-top-color:var(--metal-divider-strong)}
.chromatic-controls .chromatic-disclosure,.chromatic-controls .preparation-disclosure{border-color:var(--metal-divider)}
.chromatic-controls .preparation-disclosure:hover,.chromatic-controls .preparation-disclosure:focus-visible{border-color:var(--metal-divider);background:var(--surface-raised)}
.chromatic-content{border-bottom:1px solid var(--metal-divider);padding-bottom:10px}
.segmented,.chromatic-controls button{background:var(--surface-raised)}
.degree-home-stack>.chord-card{background:var(--surface-card)}
.degree-home-stack>.chord-card.selected{background:var(--navy2)}
.chromatic-card,.modal-interchange-card{background-clip:padding-box}

/* RC26.6 architectural material pass: real slate under broad asymmetric ambient light. */
.harmony-section{
  position:relative;
  isolation:isolate;
  border-top:1px solid rgba(220,226,224,.16);
  border-bottom:1px solid rgba(8,14,18,.34);
  background-color:var(--surface-harmony);
  background-image:linear-gradient(142deg,rgba(75,84,86,.11) 0%,rgba(52,58,61,.025) 48%,rgba(17,23,26,.12) 100%);
}
.harmony-section::before{
  position:absolute;
  z-index:0;
  inset:0;
  background:url("assets/monchord-section02-slate.jpg") center/cover no-repeat;
  content:"";
  opacity:.24;
  pointer-events:none;
}
.harmony-section::after{
  position:absolute;
  z-index:1;
  inset:0;
  background:
    linear-gradient(124deg,rgba(215,222,220,.12) 0%,rgba(173,184,182,.055) 29%,rgba(82,92,94,.012) 58%,rgba(6,11,14,.14) 100%),
    radial-gradient(ellipse 105% 72% at 14% 9%,rgba(226,231,228,.075) 0%,rgba(155,166,164,.022) 45%,transparent 76%);
  content:"";
  pointer-events:none;
}
.harmony-section>*{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){
  .chromatic-branch,.preparation-route,.chord-cards[data-transition="swap"] .chromatic-branch{animation:none}
  html{scroll-behavior:auto}
}

/* Compact Chromatic Harmony controls. */
.chromatic-controls{gap:7px}.chromatic-controls>span,.preparation-controls>span{color:var(--navy);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.chromatic-controls{scroll-margin-top:16px}
.chromatic-options,.preparation-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:min(100%,680px)}
.preparation-controls{display:grid;gap:7px;padding:11px 0 0;border:0;border-top:1px solid #d7d0c4}
.chromatic-controls button{min-height:36px;padding:7px 9px;font-size:12px;line-height:1.15}
.chromatic-controls .disclosure-toggle{display:flex;width:100%;min-height:40px;align-items:center;justify-content:space-between;padding:8px 0;border:0;color:var(--navy);background:transparent;text-align:left;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.chromatic-controls .disclosure-toggle:hover,.chromatic-controls .disclosure-toggle:focus-visible{color:var(--navy);border-color:transparent;background:transparent}
.disclosure-toggle b{display:grid;width:28px;height:28px;flex:0 0 28px;place-items:center;color:var(--navy);font-size:17px;font-weight:500;line-height:1}
.preparation-options button.active{color:white;background:#6d3044;border-color:#6d3044}
@media(max-width:1024px){
  .chromatic-controls>.disclosure-toggle{order:1}.chromatic-content{order:2}.chromatic-content>.chromatic-options{order:1}.chromatic-content>.preparation-controls{order:2}
  .chromatic-options,.preparation-options{grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:5px}
  .chromatic-controls button{min-height:35px;padding:6px 5px;font-size:11px}
}
@media(max-width:430px){
  .chromatic-options,.preparation-options{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* RC17 diagnostic media lifecycle report. */
.ios-audio-element-report{max-height:18rem;overflow:auto;white-space:pre-wrap;font-size:11px;line-height:1.45}

/* Functional labels preserve the literal Substitute prefix casing. */
.chromatic-card small.functional-label{text-transform:none}

/* Chromatic Harmony progressive-disclosure hierarchy. */
.chromatic-controls{gap:12px;padding-top:22px}
.chromatic-content{display:grid;gap:12px}
.chromatic-controls .chromatic-disclosure{min-height:92px;padding:14px 0;border-top:1px solid #d7d0c4;border-bottom:1px solid #d7d0c4;text-transform:none;letter-spacing:0}
.disclosure-copy{display:grid;gap:2px;min-width:0}
.disclosure-copy strong{font:25px/1.1 var(--serif);font-weight:400}
.disclosure-copy>span{font-size:11px;font-weight:800;letter-spacing:.15em}
.disclosure-copy small{margin-top:5px;color:var(--muted);font-size:12px;font-weight:500;letter-spacing:0;line-height:1.45}
.disclosure-action{display:flex;min-height:36px;align-items:center;gap:7px;padding:6px 10px;border:1px solid #c9b77f;color:#80672e;white-space:nowrap;font-size:11px;font-weight:700;letter-spacing:.02em}
.disclosure-symbol{position:relative;display:grid;width:18px;height:18px;place-items:center;font-size:17px;font-weight:400;line-height:1;transition:transform 200ms ease}
.disclosure-symbol::after{position:absolute;left:50%;top:50%;width:8px;height:8px;border:1px solid var(--gold);border-radius:50%;content:"";opacity:0;transform:translate(-50%,-50%) scale(.25);transition:opacity 200ms ease,transform 200ms ease;pointer-events:none}
.preparation-controls{margin-left:22px;padding:10px 0 0;border-top:0;border-left:0}
.chromatic-controls .preparation-disclosure{min-height:50px;padding:8px 8px 8px 12px;border:0;border-top:1px solid #d7d0c4;border-bottom:1px solid #d7d0c4;text-transform:none;font-size:15px;font-weight:700;letter-spacing:.08em}
.chromatic-controls .preparation-disclosure:hover,.chromatic-controls .preparation-disclosure:focus-visible{border-color:#d7d0c4 transparent;background:#f8f4eb}
.preparation-disclosure b{width:34px;height:34px;flex-basis:34px;border:1px solid #c9b77f;color:#80672e;font-size:17px}
@media(hover:hover) and (pointer:fine){
  .chromatic-disclosure:hover .disclosure-symbol{transform:scale(1.06)}
  .chromatic-disclosure:hover .disclosure-symbol::after{opacity:1;transform:translate(-50%,-50%) scale(4.25)}
}
@media(prefers-reduced-motion:reduce){.disclosure-symbol,.disclosure-symbol::after{transition:none}}
@media(max-width:600px){
  .chromatic-controls .chromatic-disclosure{min-height:104px;align-items:flex-start;gap:12px;padding:13px 0}
  .disclosure-copy strong{font-size:22px}.disclosure-copy>span{font-size:10px}.disclosure-copy small{font-size:11px}
  .disclosure-action{min-height:34px;padding:5px 7px}.disclosure-action-label{display:none}
  .preparation-controls{margin-left:14px;padding-left:0}
  .chromatic-controls .preparation-disclosure{min-height:48px;padding-left:10px;font-size:14px;letter-spacing:.07em}
}


/* Tablet relationship mode: compact aligned columns only while Chromatic Harmony is active. */
@media(min-width:769px) and (max-width:1366px){
  .chord-cards.chromatic-open{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy){display:block;padding:0 0 12px;border-bottom:1px solid #d8d0c2}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy)>.chord-card{grid-column:auto;grid-row:auto;width:100%;min-height:88px;padding:14px 10px}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy)>.chromatic-hierarchy{display:grid;gap:7px;margin-top:7px}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .chromatic-branch{display:grid;gap:7px}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .approach-route,
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .preparation-route{display:flex;width:100%;align-items:center;flex-direction:column-reverse;gap:5px}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .approach-card,
  .chord-cards.chromatic-open.with-preparation .target-stack:has(.chromatic-hierarchy) .approach-card,
  .chord-cards.chromatic-open.with-preparation .target-stack:has(.chromatic-hierarchy) .preparation-card{grid-column:auto;grid-row:auto;width:calc(100% - 24px);min-height:76px;margin:0;padding:10px}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .preparation-card{margin-left:12px}
}
@media(min-width:900px) and (max-width:1099px){.chord-cards.chromatic-open{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1100px) and (max-width:1366px){.chord-cards.chromatic-open{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* RC25.3 responsive harmonic layer map. */
@media(min-width:601px){
  .chord-cards.chromatic-open{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:18px 16px;overflow:visible}
  .chord-cards.chromatic-open .target-stack{--layer-card-width:53%;--layer-step-x:47%;--layer-overlap-y:9px;display:block;width:100%;min-width:360px;padding:0 0 10px;overflow:visible}
  .chord-cards.chromatic-open.with-preparation .target-stack{--layer-card-width:36%;--layer-step-x:32%}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy){isolation:isolate}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy)>.chord-card{position:relative;z-index:3;width:var(--layer-card-width);min-height:88px;margin:0 0 0 var(--layer-step-x);padding:14px 12px}
  .chord-cards.chromatic-open.with-preparation .target-stack:has(.chromatic-hierarchy)>.chord-card{margin-left:calc(2*var(--layer-step-x))}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy)>.chromatic-hierarchy{display:block;margin:calc(-1*var(--layer-overlap-y)) 0 0}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .chromatic-branch{display:block;margin:0;padding:0}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .approach-route,
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .preparation-route{display:block;width:100%;margin:0}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .approach-card{position:relative;z-index:2;width:var(--layer-card-width);min-height:82px;margin:0;padding:12px}
  .chord-cards.chromatic-open.with-preparation .target-stack:has(.chromatic-hierarchy) .approach-card{width:var(--layer-card-width);margin:0 0 0 var(--layer-step-x);padding:12px}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .preparation-route{margin-top:calc(-1*var(--layer-overlap-y))}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .preparation-card{position:relative;z-index:1;width:var(--layer-card-width);min-height:82px;margin:0;padding:12px}
  .chord-cards.chromatic-open.with-preparation .target-stack:has(.chromatic-hierarchy) .preparation-card{width:var(--layer-card-width);margin:0;padding:12px}
  .chord-cards.chromatic-open .chromatic-card.selected{z-index:4}
}

/* RC26.6 Modal Interchange: independent parallel layer aligned by Home degree. */
.modal-interchange-controls{display:grid;gap:8px;margin-top:8px;border-top:1px solid #d7d0c4;padding-top:8px}
.modal-interchange-toggle{display:flex;width:100%;min-height:48px;align-items:center;justify-content:space-between;padding:8px 12px;border:1px solid #d7d0c4;color:var(--navy);background:#faf8f2;text-align:left}
.modal-interchange-toggle>span{display:grid;gap:2px}.modal-interchange-toggle strong{font:17px var(--serif)}.modal-interchange-toggle small{color:var(--muted);font-size:11px}.modal-interchange-toggle b{font-size:18px;font-weight:400}.modal-interchange-toggle.active{border-color:#b9a16d;background:#f7f1e5}
.modal-interchange-picker{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;align-items:stretch;border:1px solid #d7d0c4;background:#faf8f2}
.modal-interchange-picker button{min-height:42px;border:0;color:var(--navy);background:transparent;font-size:24px}.modal-interchange-picker button:first-child{border-right:1px solid #d7d0c4}.modal-interchange-picker button:last-child{border-left:1px solid #d7d0c4}.modal-interchange-picker button:disabled{opacity:.25}.modal-interchange-picker output{display:grid;place-items:center;padding:6px 10px;text-align:center;font-size:13px;font-weight:750}
.modal-interchange-card{position:relative;display:grid;width:100%;min-width:0;min-height:82px;align-content:center;padding:12px;border:1px solid #aa9b7b;color:var(--navy);background:#eee6d4;text-align:left;transition:border-color .2s,background-color .2s,transform .2s}
.modal-interchange-card:hover{border-color:#80672e;transform:translateY(-1px)}.modal-interchange-card.selected{color:white;border-color:var(--navy);background:#46536b;box-shadow:inset 0 3px var(--gold)}.modal-interchange-card.same-as-home{border-style:dashed;background:#f5f1e8;color:#687083}.modal-interchange-card.same-as-home.selected{color:white;background:#5b6475}.modal-interchange-card>small{margin-bottom:3px;color:#80672e;font-size:8px;font-weight:800;letter-spacing:.1em}.modal-interchange-card.selected>small{color:#e4c978}.modal-interchange-card .roman{margin:0 0 2px;color:#8b6d32;font:14px var(--serif)}.modal-interchange-card.selected .roman{color:var(--gold)}.modal-interchange-card strong{font:21px/1.1 var(--serif);white-space:nowrap}.modal-interchange-card .card-notes{margin-top:6px}.modal-interchange-card>i{position:absolute;right:9px;top:8px;font-style:normal;opacity:.42}

@media(min-width:601px){
  .chord-cards.modal-open .modal-interchange-card{margin-top:8px}
  .chord-cards.chromatic-open.modal-open .target-stack .modal-interchange-card{width:var(--target-width);margin-left:var(--target-left)}
}

@media(max-width:600px){
  .modal-interchange-controls{margin-top:5px}.modal-interchange-toggle{min-height:46px}.modal-interchange-picker output{font-size:12px}
  .chord-cards.modal-open{display:grid;grid-template-columns:1fr;gap:6px;overflow:visible}
  .chord-cards.modal-open .target-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;gap:6px 8px;width:100%;padding:4px 0 6px;border-bottom:1px solid #d8d0c2}
  .chord-cards.modal-open .target-stack>.chord-card{grid-column:1;grid-row:2;width:100%;min-height:64px;margin:0;padding:6px 8px}
  .chord-cards.modal-open .target-stack>.modal-interchange-card{grid-column:2;grid-row:2;width:100%;min-height:64px;margin:0;padding:6px 8px}
  .chord-cards.modal-open .modal-interchange-card>small{font-size:6px}.chord-cards.modal-open .modal-interchange-card .roman{font-size:11px}.chord-cards.modal-open .modal-interchange-card strong{font-size:18px}.chord-cards.modal-open .modal-interchange-card .card-notes{display:none}
  .chord-cards.chromatic-open.modal-open .target-stack:has(.chromatic-hierarchy),
  .chord-cards.chromatic-open.with-preparation.modal-open .target-stack:has(.chromatic-hierarchy){grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto;gap:6px 8px}
  .chord-cards.chromatic-open.modal-open .target-stack:has(.chromatic-hierarchy)>.chord-card,
  .chord-cards.chromatic-open.with-preparation.modal-open .target-stack:has(.chromatic-hierarchy)>.chord-card{grid-column:1;grid-row:2}
  .chord-cards.chromatic-open.modal-open .target-stack:has(.chromatic-hierarchy)>.modal-interchange-card{grid-column:2;grid-row:2}
  .chord-cards.chromatic-open.modal-open .target-stack:has(.chromatic-hierarchy)>.chromatic-hierarchy,
  .chord-cards.chromatic-open.modal-open .target-stack:has(.chromatic-hierarchy) .chromatic-branch,
  .chord-cards.chromatic-open.modal-open .target-stack:has(.chromatic-hierarchy) .approach-route,
  .chord-cards.chromatic-open.modal-open .target-stack:has(.chromatic-hierarchy) .preparation-route{display:contents}
  .chord-cards.chromatic-open.modal-open .target-stack:has(.chromatic-hierarchy) .approach-card,
  .chord-cards.chromatic-open.with-preparation.modal-open .target-stack:has(.chromatic-hierarchy) .approach-card{grid-column:2;grid-row:1;width:100%;min-height:64px;margin:0}
  .chord-cards.chromatic-open.with-preparation.modal-open .target-stack:has(.chromatic-hierarchy) .preparation-card{grid-column:1;grid-row:1;width:100%;min-height:64px;margin:0}
}

/* RC26.4 Simple Chord Lock: semantic session locks with isolated unlock targets. */
.level-control-heading{display:flex;gap:12px;align-items:center;color:var(--navy);font-size:13px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.unlock-all-button{min-height:32px;padding:5px 9px;border:1px solid #b99a58;color:#785f2d;background:transparent;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:none}
.unlock-all-button:hover,.unlock-all-button:focus-visible{color:white;background:#92763b}
.lock-chord-button{display:flex;width:100%;min-height:44px;margin-top:auto;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border:1px solid white;color:white;background:transparent;font-size:14px;font-weight:700}
.lock-chord-button:hover,.lock-chord-button:focus-visible,.lock-chord-button[aria-pressed="true"]{color:var(--coral);background:white}
.lock-chord-button span{display:grid;width:18px;height:18px;place-items:center}.lock-chord-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card-unlock-button{position:absolute;z-index:12;display:grid;width:44px;height:44px;margin:0;padding:0;place-items:center;border:0;color:var(--gold);background:transparent}
.card-unlock-button span{display:grid;width:20px;height:20px;place-items:center;border:1px solid currentColor;border-radius:50%;background:color-mix(in srgb,var(--navy) 88%,transparent)}
.card-unlock-button svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card-unlock-button:hover span,.card-unlock-button:focus-visible span{color:white;background:var(--navy)}
.card-unlock-button:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}
.chord-card.locked>i,.modal-interchange-card.locked>i{display:none}.chord-card.locked,.chromatic-card.locked,.modal-interchange-card.locked{padding-right:44px!important}
@media(max-width:768px){.level-control-heading{width:100%;justify-content:space-between}.lock-chord-button{min-height:48px;font-size:15px}}

@media(max-width:600px){
  .chromatic-controls{scroll-margin-top:58px}
  .chord-cards.chromatic-open{display:grid;grid-template-columns:1fr;gap:6px;overflow:visible;padding-bottom:0}
  .chord-cards.chromatic-open .target-stack{width:100%;min-width:0;scroll-snap-align:none}
  .chord-cards.chromatic-open .target-stack>.chord-card{min-height:64px;padding:6px 8px;border:2px solid var(--navy)}
  .chord-cards.chromatic-open .target-stack>.chord-card.selected{border-color:var(--navy);box-shadow:inset 0 4px var(--coral)}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr;gap:0 8px;padding:4px 0 6px}
  .chord-cards.chromatic-open.with-preparation .target-stack:has(.chromatic-hierarchy){grid-template-columns:repeat(3,minmax(0,1fr));gap:0 8px}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy)>.chord-card{grid-column:2;grid-row:1;width:100%;min-height:64px;margin:0;padding:6px 8px}
  .chord-cards.chromatic-open.with-preparation .target-stack:has(.chromatic-hierarchy)>.chord-card{grid-column:3}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy)>.chromatic-hierarchy,
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .chromatic-branch,
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .approach-route,
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .preparation-route{display:contents}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .approach-card{grid-column:1;grid-row:1;width:100%;min-height:64px;margin:0;padding:6px 8px;background:rgb(211 93 73 / 70%);opacity:1}
  .chord-cards.chromatic-open.with-preparation .target-stack:has(.chromatic-hierarchy) .approach-card{grid-column:2}
  .chord-cards.chromatic-open.with-preparation .target-stack:has(.chromatic-hierarchy) .preparation-card{grid-column:1;grid-row:1;width:100%;min-height:64px;margin:0;padding:6px 8px;background:rgb(109 48 68 / 50%);opacity:1}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .branch-secondaryDiminished .approach-card{background:rgb(182 80 84 / 70%)}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .branch-tritone .approach-card{background:rgb(201 112 63 / 70%)}
}

/* RC26.6 final responsive override: upper functional pair, lower parallel pair. */
@media(max-width:600px){
  .chord-cards.modal-open{display:grid;grid-template-columns:1fr;gap:6px;overflow:visible}
  .chord-cards.modal-open .target-stack,
  .chord-cards.chromatic-open.modal-open .target-stack:has(.chromatic-hierarchy),
  .chord-cards.chromatic-open.with-preparation.modal-open .target-stack:has(.chromatic-hierarchy){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto;gap:6px 8px;width:100%;padding:4px 0 6px;border-bottom:1px solid #d8d0c2}
  .chord-cards.modal-open .target-stack>.chord-card,
  .chord-cards.chromatic-open.modal-open .target-stack:has(.chromatic-hierarchy)>.chord-card,
  .chord-cards.chromatic-open.with-preparation.modal-open .target-stack:has(.chromatic-hierarchy)>.chord-card{grid-column:1;grid-row:2;width:100%;min-height:64px;margin:0;padding:6px 8px}
  .chord-cards.modal-open .target-stack>.modal-interchange-card,
  .chord-cards.chromatic-open.modal-open .target-stack:has(.chromatic-hierarchy)>.modal-interchange-card{grid-column:2;grid-row:2;width:100%;min-height:64px;margin:0;padding:6px 8px}
  .chord-cards.chromatic-open.modal-open .target-stack:has(.chromatic-hierarchy)>.chromatic-hierarchy,
  .chord-cards.chromatic-open.modal-open .target-stack:has(.chromatic-hierarchy) .chromatic-branch,
  .chord-cards.chromatic-open.modal-open .target-stack:has(.chromatic-hierarchy) .approach-route,
  .chord-cards.chromatic-open.modal-open .target-stack:has(.chromatic-hierarchy) .preparation-route{display:contents}
  .chord-cards.chromatic-open.modal-open .target-stack:has(.chromatic-hierarchy) .approach-card,
  .chord-cards.chromatic-open.with-preparation.modal-open .target-stack:has(.chromatic-hierarchy) .approach-card{grid-column:2;grid-row:1;width:100%;min-height:64px;margin:0}
  .chord-cards.chromatic-open.with-preparation.modal-open .target-stack:has(.chromatic-hierarchy) .preparation-card{grid-column:1;grid-row:1;width:100%;min-height:64px;margin:0}
}

/* RC26.2 MonChord identity: Mong Kok red mosaic dissolving into the working surface. */
.site-header{
  position:relative;
  height:136px;
  overflow:hidden;
  padding-top:20px;
  padding-bottom:20px;
  color:var(--navy);
  background-color:#c92720;
  background-image:url('./assets/monchord-mosaic-texture.png');
  background-repeat:repeat-x;
  background-position:left center;
  background-size:180px 180px;
}
.monchord-identity{
  display:flex;
  align-self:center;
  align-items:center;
  gap:15px;
  color:#fff;
  text-decoration:none;
}
.monchord-symbol{display:block;width:48px;height:54px;flex:0 0 auto;filter:drop-shadow(0 3px 3px rgb(0 0 0 / 30%))}
.monchord-identity-copy{display:flex;align-items:flex-start;flex-direction:column;min-width:0}
.monchord-identity strong{font:800 43px/.92 var(--sans);letter-spacing:-.045em;text-shadow:0 2px 1px rgb(0 0 0 / 60%),0 5px 6px rgb(0 0 0 / 45%)}
.monchord-identity-copy>span{margin-top:8px;color:#fff8ed;font-size:14px;font-weight:700;letter-spacing:.055em;text-shadow:0 1px 1px rgb(0 0 0 / 45%),0 3px 3px rgb(0 0 0 / 30%)}
.monchord-identity small{margin-top:5px;color:#fff3df;font-size:11px;font-style:italic;font-weight:500;letter-spacing:.035em;text-shadow:0 1px 1px rgb(0 0 0 / 45%),0 2px 3px rgb(0 0 0 / 28%)}
.site-header>p{align-self:flex-start;margin-top:2px}
.site-header .beta-status{color:var(--navy);background:rgb(246 221 171 / 80%)}

@media(max-width:1024px){
  .site-header{height:124px;padding-top:18px;padding-bottom:18px}
  .monchord-identity{gap:13px}
  .monchord-symbol{width:43px;height:49px}
  .monchord-identity strong{font-size:38px}
  .monchord-identity-copy>span{margin-top:7px;font-size:13px}
  .monchord-identity small{margin-top:4px;font-size:10px}
}

@media(max-width:600px){
  .site-header{height:112px;padding:13px 22px}
  .monchord-identity{gap:11px}
  .monchord-symbol{width:38px;height:44px}
  .monchord-identity strong{font-size:34px}
  .monchord-identity-copy>span{margin-top:6px;font-size:12px}
  .monchord-identity small{margin-top:4px;font-size:9px}
}

@media(max-width:340px){
  .site-header{height:108px}
  .monchord-identity{gap:9px}
  .monchord-symbol{width:34px;height:40px}
  .monchord-identity strong{font-size:31px}
  .monchord-identity-copy>span{font-size:11px}
  .monchord-identity small{font-size:8.5px}
}

/* RC26.1 desktop/tablet hierarchy: Diatonic backbone with compact related layers. */
@media(min-width:601px){
  .chord-card{border:2px solid var(--navy)}
  .chord-card.selected{border-color:var(--navy);box-shadow:inset 0 4px var(--coral)}
  .chord-cards.chromatic-open .target-stack{--target-width:48%;--approach-width:38%;--target-left:46.2%;--approach-left:12%;--target-approach-overlap-y:60px;--approach-preparation-overlap-y:24px}
  .chord-cards.chromatic-open.with-preparation .target-stack{--target-width:40%;--approach-width:32%;--preparation-width:26%;--target-left:52.2%;--approach-left:23.4%;--preparation-left:0%}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy)>.chord-card{width:var(--target-width);margin-left:var(--target-left)}
  .chord-cards.chromatic-open.with-preparation .target-stack:has(.chromatic-hierarchy)>.chord-card{width:var(--target-width);margin-left:var(--target-left)}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy)>.chromatic-hierarchy{margin-top:calc(-1*var(--target-approach-overlap-y))}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .preparation-route{margin-top:calc(-1*var(--approach-preparation-overlap-y))}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .approach-card,
  .chord-cards.chromatic-open.with-preparation .target-stack:has(.chromatic-hierarchy) .approach-card{width:var(--approach-width);margin-left:var(--approach-left);color:var(--navy);background:rgb(211 93 73 / 70%);opacity:1}
  .chord-cards.chromatic-open.with-preparation .target-stack:has(.chromatic-hierarchy) .preparation-card{width:var(--preparation-width);margin-left:var(--preparation-left);color:var(--navy);background:rgb(109 48 68 / 50%);opacity:1}
  .chord-cards.chromatic-open .chromatic-card small{opacity:1}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .branch-secondaryDiminished .approach-card{background:rgb(182 80 84 / 70%)}
  .chord-cards.chromatic-open .target-stack:has(.chromatic-hierarchy) .branch-tritone .approach-card{background:rgb(201 112 63 / 70%)}
}

/* RC26.6 final chromatic-method and mode-carousel overrides. */
.chromatic-options{grid-template-columns:repeat(4,minmax(0,1fr))}
.modal-interchange-controls{display:grid;gap:6px;margin-top:6px;padding-top:8px}
.modal-interchange-picker{display:grid;grid-template-columns:38px minmax(0,1fr) 38px;min-height:48px;overflow:hidden}
.modal-source-viewport{min-width:0;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scrollbar-width:none;touch-action:pan-x pan-y}
.modal-source-viewport::-webkit-scrollbar{display:none}
.modal-source-track{display:flex;width:max-content;min-width:100%;align-items:stretch;gap:4px;padding:4px}
.modal-interchange-picker .modal-source-option{flex:0 0 auto;min-height:38px;padding:7px 13px;border:1px solid transparent;color:#6a6f78;background:transparent;font-size:11px;scroll-snap-align:center;white-space:nowrap}
.modal-interchange-picker .modal-source-option.active{color:white;border-color:var(--navy);background:var(--navy)}
.chord-cards.modal-open .target-stack>.modal-interchange-card{margin-top:6px}
@media(min-width:601px){
  .chord-cards.chromatic-open.modal-open .target-stack:has(.chromatic-hierarchy)>.chromatic-hierarchy{margin-top:calc(-1*(var(--target-approach-overlap-y) + 88px))}
}
@media(max-width:600px){
  .chromatic-options{grid-template-columns:repeat(2,minmax(0,1fr))}
  .modal-interchange-picker{grid-template-columns:minmax(0,1fr)}
  .modal-interchange-picker>#modal-source-previous,.modal-interchange-picker>#modal-source-next{display:none}
  .chord-cards.modal-open .target-stack,
  .chord-cards.chromatic-open.modal-open .target-stack:has(.chromatic-hierarchy),
  .chord-cards.chromatic-open.with-preparation.modal-open .target-stack:has(.chromatic-hierarchy){display:grid;grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:6px;width:100%}
  .chord-cards.modal-open .target-stack>.chord-card,
  .chord-cards.chromatic-open.modal-open .target-stack:has(.chromatic-hierarchy)>.chord-card,
  .chord-cards.chromatic-open.with-preparation.modal-open .target-stack:has(.chromatic-hierarchy)>.chord-card{grid-column:1;grid-row:1;width:100%;margin:0}
  .chord-cards.modal-open .target-stack>.modal-interchange-card,
  .chord-cards.chromatic-open.modal-open .target-stack:has(.chromatic-hierarchy)>.modal-interchange-card{grid-column:1;grid-row:2;width:100%;margin:0}
  .chord-cards.chromatic-open.modal-open .target-stack:has(.chromatic-hierarchy)>.chromatic-hierarchy{grid-column:1;grid-row:3;display:block}
}

/* RC26.6 stable degree anchors: functional layers never derive geometry from Home/MI stack height. */
.degree-anchor{position:relative;min-width:0}
.degree-home-stack{min-width:0;grid-row:1}
.degree-home-stack>.chord-card,.degree-home-stack>.modal-interchange-card{width:100%;margin-left:0}
.chord-cards.chromatic-open.modal-open .degree-anchor>.degree-home-stack>.modal-interchange-card{width:100%;margin-left:0}
.degree-home-stack>.modal-interchange-card{margin-top:6px}
.degree-functional-layer:empty{display:none}
@media(min-width:601px){
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy){display:grid;grid-template-columns:38% 8% 48%;gap:0;align-items:start;padding:0 0 12px;isolation:isolate}
  .chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy){grid-template-columns:26% 4% 32% 4% 40%}
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy)>.degree-home-stack{z-index:3;grid-column:3;grid-row:1}
  .chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy)>.degree-home-stack{grid-column:5}
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy)>.degree-functional-layer,
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .chromatic-hierarchy,
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .chromatic-branch{display:contents}
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .approach-route{z-index:2;display:block;grid-column:1;grid-row:1;width:100%;margin:0;align-self:start}
  .chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy) .approach-route{grid-column:3}
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .preparation-route{z-index:1;display:block;grid-column:1;grid-row:1;width:100%;margin:0;align-self:start}
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .approach-card,
  .chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy) .approach-card,
  .chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy) .preparation-card{width:100%;min-height:82px;margin:0;padding:12px}
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .approach-card{color:var(--navy);background:rgb(211 93 73 / 70%);opacity:1}
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .branch-secondaryDiminished .approach-card{background:rgb(182 80 84 / 70%)}
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .branch-tritone .approach-card{background:rgb(201 112 63 / 70%)}
  .chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy) .preparation-card{color:var(--navy);background:rgb(109 48 68 / 50%);opacity:1}
}
@media(max-width:1024px) and (min-width:601px){
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy){grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);padding:10px 0;border-bottom:1px solid #d8d0c2}
  .chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy){grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr) 22px minmax(0,1fr)}
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .approach-card,
  .chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy) .preparation-card,
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .degree-home-stack>.chord-card{min-height:86px}
}
@media(max-width:600px){
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy){display:grid;grid-template-columns:minmax(0,1fr) 8px minmax(0,1fr);grid-template-rows:auto;gap:0;padding:4px 0 6px;border-bottom:1px solid #d8d0c2}
  .chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy){grid-template-columns:minmax(0,1fr) 6px minmax(0,1fr) 6px minmax(0,1fr)}
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy)>.degree-home-stack{z-index:3;grid-column:3;grid-row:1}
  .chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy)>.degree-home-stack{grid-column:5}
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy)>.degree-functional-layer,
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .chromatic-hierarchy,
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .chromatic-branch{display:contents}
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .approach-route{z-index:2;display:block;grid-column:1;grid-row:1;width:100%;margin:0}
  .chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy) .approach-route{grid-column:3}
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .preparation-route{z-index:1;display:block;grid-column:1;grid-row:1;width:100%;margin:0}
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .approach-card,
  .chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy) .preparation-card,
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .degree-home-stack>.chord-card{width:100%;min-height:64px;margin:0;padding:6px 8px}
  .chord-cards.modal-open .degree-anchor>.degree-home-stack{display:grid;gap:6px}
  .chord-cards.modal-open .degree-anchor>.degree-home-stack>.chord-card{grid-column:1;grid-row:1}
  .chord-cards.modal-open .degree-anchor>.degree-home-stack>.modal-interchange-card{grid-column:1;grid-row:2;width:100%;min-height:64px;margin:0;padding:6px 8px}
}

/* RC26.6 anchor-relative corner overlap: Preparation -> Approach -> Home. */
@media(min-width:601px){
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy){--corner-overlap-x:12px;--corner-overlap-y:10px;--anchor-card-height:128px;--functional-card-height:82px;--layer-step-y:calc(var(--anchor-card-height) - var(--corner-overlap-y));grid-template-columns:40% 60%;min-height:calc(var(--layer-step-y) + var(--functional-card-height) + 12px)}
  .chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy){grid-template-columns:30% 30% 40%;min-height:calc(var(--layer-step-y) + var(--functional-card-height) + var(--functional-card-height) - var(--corner-overlap-y) + 12px)}
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy)>.degree-home-stack{grid-column:2;grid-row:1;z-index:3}
  .chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy)>.degree-home-stack{grid-column:3}
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .approach-route{grid-column:1;grid-row:1;z-index:2;width:calc(100% + var(--corner-overlap-x));transform:translateY(var(--layer-step-y))}
  .chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy) .approach-route{grid-column:2}
  .chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy) .preparation-route{grid-column:1;grid-row:1;z-index:1;width:calc(100% + var(--corner-overlap-x));transform:translateY(calc(var(--layer-step-y) + var(--functional-card-height) - var(--corner-overlap-y)))}
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .approach-card,
  .chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy) .preparation-card{min-height:var(--functional-card-height)}
  .chord-cards.chromatic-open.modal-open .degree-anchor>.degree-home-stack>.modal-interchange-card{margin-top:12px}
}
@media(max-width:1024px) and (min-width:601px){
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy){--corner-overlap-x:10px;--corner-overlap-y:8px;--anchor-card-height:86px;--functional-card-height:86px;grid-template-columns:1fr 1fr}
  .chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy){grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy){--corner-overlap-x:7px;--corner-overlap-y:7px;--anchor-card-height:64px;--functional-card-height:64px;--layer-step-y:calc(var(--anchor-card-height) - var(--corner-overlap-y));grid-template-columns:1fr 1fr;min-height:calc(var(--layer-step-y) + var(--functional-card-height) + 6px)}
  .chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy){grid-template-columns:repeat(3,minmax(0,1fr));min-height:calc(var(--layer-step-y) + var(--functional-card-height) + var(--functional-card-height) - var(--corner-overlap-y) + 6px)}
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy)>.degree-home-stack{grid-column:2;grid-row:1;z-index:3}
  .chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy)>.degree-home-stack{grid-column:3}
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .approach-route{grid-column:1;grid-row:1;z-index:2;width:calc(100% + var(--corner-overlap-x));transform:translateY(var(--layer-step-y))}
  .chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy) .approach-route{grid-column:2}
  .chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy) .preparation-route{grid-column:1;grid-row:1;z-index:1;width:calc(100% + var(--corner-overlap-x));transform:translateY(calc(var(--layer-step-y) + var(--functional-card-height) - var(--corner-overlap-y)))}
  .chord-cards.chromatic-open.modal-open .degree-anchor>.degree-home-stack>.modal-interchange-card{margin-top:10px}
}

/* RC26.6 final visual system: Home first, function second, colour third. */
.chord-cards{position:relative}
.diatonic-backbone{position:absolute;z-index:0;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.diatonic-backbone line{fill:none;stroke:var(--diatonic-backbone);stroke-width:1.25;stroke-linecap:square;vector-effect:non-scaling-stroke}
.degree-anchor{z-index:1}
.degree-home-stack>.chord-card{color:var(--navy);border:2px solid var(--diatonic-border);background:var(--diatonic-bg)}
.degree-home-stack>.chord-card.selected{color:white;border-color:var(--navy);background:var(--navy2);box-shadow:inset 0 4px var(--coral)}
.branch-secondaryDominant .approach-card{color:var(--sec-dom-text)!important;border:1px solid var(--sec-dom-border)!important;background:var(--sec-dom-bg)!important}
.branch-secondaryDominant .preparation-card{color:var(--sec-dom-prep-text)!important;border:1px solid var(--sec-dom-prep-border)!important;background:var(--sec-dom-prep-bg)!important}
.branch-secondaryDiminished .approach-card{color:var(--sec-dim-text)!important;border:1px solid var(--sec-dim-border)!important;background:var(--sec-dim-bg)!important}
.branch-secondaryDiminished .preparation-card{color:var(--sec-dim-prep-text)!important;border:1px solid var(--sec-dim-prep-border)!important;background:var(--sec-dim-prep-bg)!important}
.branch-tritone .approach-card{color:var(--tritone-text)!important;border:1px solid var(--tritone-border)!important;background:var(--tritone-bg)!important}
.branch-tritone .preparation-card{color:var(--tritone-prep-text)!important;border:1px solid var(--tritone-prep-border)!important;background:var(--tritone-prep-bg)!important}
.chromatic-card,.chromatic-card small{opacity:1}
.modal-interchange-card[data-modal-source-origin="lydian"]{--mi-card-bg:var(--mi-lydian-card-bg);--mi-card-fg:var(--mi-lydian-card-fg)}
.modal-interchange-card[data-modal-source-origin="ionian"]{--mi-card-bg:var(--mi-ionian-card-bg);--mi-card-fg:var(--mi-ionian-card-fg)}
.modal-interchange-card[data-modal-source-origin="mixolydian"]{--mi-card-bg:var(--mi-mixolydian-card-bg);--mi-card-fg:var(--mi-mixolydian-card-fg)}
.modal-interchange-card[data-modal-source-origin="dorian"]{--mi-card-bg:var(--mi-dorian-card-bg);--mi-card-fg:var(--mi-dorian-card-fg)}
.modal-interchange-card[data-modal-source-origin="aeolian"]{--mi-card-bg:var(--mi-aeolian-card-bg);--mi-card-fg:var(--mi-aeolian-card-fg)}
.modal-interchange-card[data-modal-source-origin="phrygian"]{--mi-card-bg:var(--mi-phrygian-card-bg);--mi-card-fg:var(--mi-phrygian-card-fg)}
.modal-interchange-card[data-modal-source-origin="locrian"]{--mi-card-bg:var(--mi-locrian-card-bg);--mi-card-fg:var(--mi-locrian-card-fg)}
.modal-interchange-card[data-modal-source-origin="harmonicMinor"]{--mi-card-bg:var(--mi-harmonic-minor-card-bg);--mi-card-fg:var(--mi-harmonic-minor-card-fg)}
.modal-interchange-card[data-modal-source-origin="melodicMinor"]{--mi-card-bg:var(--mi-melodic-minor-card-bg);--mi-card-fg:var(--mi-melodic-minor-card-fg)}
.modal-source-option[data-modal-source="lydian"]{--mi-source:var(--mi-lydian);--mi-soft:var(--mi-lydian-soft);--mi-on-source:var(--navy)}
.modal-source-option[data-modal-source="ionian"]{--mi-source:var(--mi-ionian);--mi-soft:var(--mi-ionian-soft);--mi-on-source:var(--navy)}
.modal-source-option[data-modal-source="mixolydian"]{--mi-source:var(--mi-mixolydian);--mi-soft:var(--mi-mixolydian-soft);--mi-on-source:var(--navy)}
.modal-source-option[data-modal-source="dorian"]{--mi-source:var(--mi-dorian);--mi-soft:var(--mi-dorian-soft);--mi-on-source:white}
.modal-source-option[data-modal-source="aeolian"]{--mi-source:var(--mi-aeolian);--mi-soft:var(--mi-aeolian-soft);--mi-on-source:white}
.modal-source-option[data-modal-source="phrygian"]{--mi-source:var(--mi-phrygian);--mi-soft:var(--mi-phrygian-soft);--mi-on-source:white}
.modal-source-option[data-modal-source="locrian"]{--mi-source:var(--mi-locrian);--mi-soft:var(--mi-locrian-soft);--mi-on-source:white}
.modal-source-option[data-modal-source="harmonicMinor"]{--mi-source:var(--mi-harmonic-minor);--mi-soft:var(--mi-harmonic-minor-soft);--mi-on-source:white}
.modal-source-option[data-modal-source="melodicMinor"]{--mi-source:var(--mi-melodic-minor);--mi-soft:var(--mi-melodic-minor-soft);--mi-on-source:var(--navy)}
.modal-interchange-card{color:var(--mi-card-fg);border-color:color-mix(in srgb,var(--mi-card-bg) 72%,#111c35);background:var(--mi-card-bg);opacity:1}
.modal-interchange-card>small,.modal-interchange-card .roman,.modal-interchange-card .card-notes,.modal-interchange-card>i{color:var(--mi-card-fg)}
.modal-interchange-card.selected{color:var(--mi-card-fg);border-color:var(--mi-card-fg);background:var(--mi-card-bg);box-shadow:inset 0 3px var(--gold)}
.modal-interchange-card.selected>small,.modal-interchange-card.selected .roman,.modal-interchange-card.selected .card-notes{color:var(--mi-card-fg)}
.modal-interchange-card.locked{background:var(--mi-card-bg);border-color:var(--mi-card-fg);color:var(--mi-card-fg)}
.modal-source-option[data-modal-source]{border-bottom-color:var(--mi-source)}
.modal-source-option[data-modal-source].active{color:var(--mi-on-source);border-color:var(--mi-source);background:var(--mi-source)}
@media(max-width:600px){
  .modal-source-option[data-modal-source]{color:var(--navy);border-color:color-mix(in srgb,var(--mi-source) 45%,transparent);background:var(--mi-soft)}
  .modal-source-option[data-modal-source].active{color:var(--mi-on-source);border-color:var(--mi-source);background:var(--mi-source)}
}

/* RC26.6 local functional clusters: fixed anchor-relative coordinates, independent of Home/MI height. */
.chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy){display:block;isolation:isolate}
.chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy)>.degree-home-stack{position:relative;z-index:3;width:60%;margin-left:40%}
.chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy)>.degree-home-stack{width:40%;margin-left:60%}
.chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy)>.degree-functional-layer{position:absolute;z-index:1;inset:0;display:block;pointer-events:none}
.chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .chromatic-hierarchy,
.chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .chromatic-branch{display:contents}
.chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .approach-route,
.chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .preparation-route{position:absolute;display:block;margin:0;pointer-events:auto;transform:none}
.chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .approach-route{z-index:2;left:0;top:var(--layer-step-y);width:calc(40% + var(--corner-overlap-x))}
.chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy) .approach-route{left:30%;width:calc(30% + var(--corner-overlap-x))}
.chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy) .preparation-route{z-index:1;left:0;top:calc(var(--layer-step-y) + var(--functional-card-height) - var(--corner-overlap-y));width:calc(30% + var(--corner-overlap-x))}
@media(max-width:1024px) and (min-width:601px){
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy)>.degree-home-stack{width:50%;margin-left:50%}
  .chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy)>.degree-home-stack{width:33.333%;margin-left:66.667%}
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .approach-route{left:0;width:calc(50% + var(--corner-overlap-x))}
  .chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy) .approach-route{left:33.333%;width:calc(33.333% + var(--corner-overlap-x))}
  .chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy) .preparation-route{left:0;width:calc(33.333% + var(--corner-overlap-x))}
}
@media(max-width:600px){
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy)>.degree-home-stack{width:50%;margin-left:50%}
  .chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy)>.degree-home-stack{width:33.333%;margin-left:66.667%}
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .approach-route{left:0;width:calc(50% + var(--corner-overlap-x))}
  .chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy) .approach-route{left:33.333%;width:calc(33.333% + var(--corner-overlap-x))}
  .chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy) .preparation-route{left:0;width:calc(33.333% + var(--corner-overlap-x))}
}

/* RC26.6 dark-surface contrast adaptation: existing Section 02 components only. */
.harmony-section>.section-heading h2{color:#f4f1e8}
.harmony-section>.section-heading>span{color:#dfc779;border-color:#c9a75d}
.harmony-section .level-control-heading{color:#ecebe5}
.harmony-section .unlock-all-button{color:#ead38f;border-color:#c9a75d}
.harmony-section .chromatic-controls{border-top-color:rgba(226,230,226,.24)}
.harmony-section .chromatic-controls .chromatic-disclosure,
.harmony-section .chromatic-controls .preparation-disclosure{color:#f1eee6;border-color:rgba(226,230,226,.22)}
.harmony-section .chromatic-controls .chromatic-disclosure:hover,
.harmony-section .chromatic-controls .chromatic-disclosure:focus-visible,
.harmony-section .chromatic-controls .preparation-disclosure:hover,
.harmony-section .chromatic-controls .preparation-disclosure:focus-visible{color:#fffdf7;border-color:rgba(226,230,226,.34);background:rgba(255,255,255,.035)}
.harmony-section .disclosure-copy small{color:#c8cecd}
.harmony-section .disclosure-action{color:#ead38f;border-color:rgba(216,188,111,.72)}
.harmony-section .preparation-disclosure b{color:#ead38f;border-color:rgba(216,188,111,.72)}
.harmony-section .chromatic-content{border-bottom-color:rgba(226,230,226,.18)}
.harmony-section .preparation-controls,
.harmony-section .modal-interchange-controls{border-color:rgba(226,230,226,.18)}
.harmony-section>.note-legend{color:#c8cecd}

/* RC26.6 embedded dark-surface controls: controls recede while harmonic cards remain physical objects. */
.harmony-section{
  --control-surface:rgba(8,14,17,.20);
  --control-surface-hover:rgba(255,255,255,.055);
  --control-border:rgba(231,235,231,.27);
  --control-divider:rgba(231,235,231,.16);
  --control-text:#d5dad8;
  --control-muted:#8e9796;
}
.harmony-section .segmented{border-color:var(--control-border);background:var(--control-surface)}
.harmony-section .segmented button{color:var(--control-text);border-right:1px solid var(--control-divider);background:transparent}
.harmony-section .segmented button:last-child{border-right:0}
.harmony-section .segmented button:hover{color:#fff;background:var(--control-surface-hover)}
.harmony-section .segmented button.active{color:var(--navy);background:var(--gold)}
.harmony-section .chromatic-options button,
.harmony-section .preparation-options button{color:var(--control-text);border-color:var(--control-border);background:rgba(8,14,17,.14)}
.harmony-section .chromatic-options button:hover,
.harmony-section .preparation-options button:hover{color:#fff;border-color:rgba(231,235,231,.42);background:var(--control-surface-hover)}
.harmony-section .chromatic-options button.active{color:var(--navy);border-color:var(--gold);background:var(--gold)}
.harmony-section .preparation-options button.active{color:#fff;border-color:#a76a7c;background:#6d3044}
.harmony-section .chromatic-options button:disabled,
.harmony-section .preparation-options button:disabled{color:var(--control-muted);border-style:dashed;border-color:rgba(192,200,198,.20);background:rgba(8,14,17,.10);opacity:.58}
.harmony-section .modal-interchange-picker{border-color:var(--control-border);background:var(--control-surface)}
.harmony-section .modal-interchange-picker>#modal-source-previous,
.harmony-section .modal-interchange-picker>#modal-source-next{color:var(--control-text);border-color:var(--control-divider);background:transparent}
.harmony-section .modal-interchange-picker>#modal-source-previous:hover,
.harmony-section .modal-interchange-picker>#modal-source-next:hover{color:#fff;background:var(--control-surface-hover)}
.harmony-section .modal-interchange-picker .modal-source-option[data-modal-source]{color:var(--control-text);border-color:transparent;border-bottom-color:color-mix(in srgb,var(--mi-source) 58%,transparent);background:transparent}
.harmony-section .modal-interchange-picker .modal-source-option[data-modal-source]:hover{color:#fff;background:var(--control-surface-hover)}
.harmony-section .modal-interchange-picker .modal-source-option[data-modal-source].active{color:var(--mi-on-source);border-color:var(--mi-source);background:var(--mi-source)}
.harmony-section .segmented button:focus-visible,
.harmony-section .chromatic-options button:focus-visible,
.harmony-section .preparation-options button:focus-visible,
.harmony-section .modal-interchange-picker button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* RC26.6 responsive visual refinement: result first, compact families, semantic detail inspector. */
.harmony-section>.section-heading{order:1}
.harmony-section>.level-control{order:2}
.harmony-section>.chord-cards{order:3}
.harmony-section>.chromatic-controls{order:4;margin-top:30px}
.harmony-section>.note-legend{order:5}
.harmony-section .disclosure-symbol,.harmony-section .preparation-disclosure>b{color:var(--gold)}
.harmony-section .chromatic-controls{border-top:0}

/* Home cards keep an intrinsic visual scale instead of absorbing every grid column. */
.chord-cards{grid-template-columns:repeat(7,minmax(0,158px));gap:12px;justify-content:space-between}
.degree-home-stack{width:min(100%,168px);margin-left:auto}
.degree-home-stack>.chord-card,.degree-home-stack>.modal-interchange-card{width:100%;overflow:hidden}

/* Expanded generators use compact local families anchored to each degree. */
.chord-cards.chromatic-open{grid-template-columns:repeat(3,minmax(310px,1fr));gap:20px 28px;justify-content:stretch}
.chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy){--family-card-width:44%;--family-home-top:0px;--family-approach-top:66px;--family-prep-top:132px;display:block;min-height:224px;padding:0;border:0;isolation:isolate}
.chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy)>.degree-home-stack{position:absolute;z-index:3;top:var(--family-home-top);right:0;width:var(--family-card-width);margin:0}
.chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy)>.degree-functional-layer{position:absolute;z-index:1;inset:0;display:block;pointer-events:none}
.chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .chromatic-hierarchy,
.chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .chromatic-branch{display:contents}
.chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .approach-route,
.chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .preparation-route{position:absolute;display:block;width:var(--family-card-width);margin:0;transform:none;pointer-events:auto}
.chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .approach-route{z-index:2;top:var(--family-approach-top);left:14%}
.chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .preparation-route{z-index:1;top:var(--family-prep-top);left:0}
.chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy) .approach-route{top:var(--family-approach-top);left:30%;width:33%;transform:none}
.chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy) .preparation-route{top:var(--family-prep-top);left:0;width:33%;transform:none}
.chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .approach-card,
.chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .preparation-card{width:100%;min-height:82px;margin:0;padding:11px 12px}
.chord-cards.chromatic-open:not(.with-preparation) .degree-anchor:has(.chromatic-hierarchy){min-height:158px}
.chord-cards.chromatic-open:not(.with-preparation) .degree-anchor:has(.chromatic-hierarchy) .approach-route{left:13%;width:46%}
.chord-cards.chromatic-open.modal-open .degree-anchor>.degree-home-stack>.modal-interchange-card{margin-top:8px}

/* Chord Detail keeps identity controls left and one coherent realization stack right. */
.detail-grid{grid-template-columns:minmax(330px,.82fr) minmax(520px,1.18fr);gap:18px;align-items:start}
.chord-summary{grid-row:auto;padding:30px}
.chord-summary .roman{margin-bottom:7px;font-size:clamp(18px,1.6vw,24px);line-height:1.1;letter-spacing:.08em}
.chord-summary h3{font-size:clamp(42px,4vw,54px)}
.chord-summary dl{margin:22px 0 18px}
.chord-summary dl div{padding:13px 0}
.detail-visual-stack{display:grid;gap:12px;min-width:0}
.detail-visual-stack .visual-card{padding:18px 20px}
.notation svg{height:190px}
.treble{font-size:78px}.bass{font-size:58px}
.notation-footer{justify-content:flex-end;margin-top:-4px}
.play-notes-button{min-width:118px}
.keyboard-card{position:relative}
.keyboard-range-badge{position:absolute;z-index:3;top:14px;right:16px;padding:5px 7px;color:#8c7140;background:#eee4ce;font-size:8px}
.keyboard-card .keyboard{margin-top:2px}
.keyboard-card .keys{margin-bottom:12px}
.keyboard-play-button{width:auto;min-width:150px;margin:8px 0 0 auto;display:block;padding:9px 14px}
.detail-visual-stack .voicing-panel{grid-template-columns:minmax(150px,.7fr) minmax(0,1.3fr);gap:20px;margin:0;padding:20px 22px}
.local-level-control>div{grid-template-columns:repeat(5,1fr)}
.local-level-control button{min-width:0;padding:9px 4px}

@media(max-width:1100px) and (min-width:769px){
  .chord-cards{grid-template-columns:repeat(4,minmax(0,168px));justify-content:space-between}
  .chord-cards.chromatic-open{grid-template-columns:repeat(2,minmax(330px,1fr))}
  .detail-grid{grid-template-columns:minmax(290px,.78fr) minmax(440px,1.22fr)}
  .chord-summary{padding:24px}
  .detail-visual-stack .visual-card{padding:15px 16px}
  .notation svg{height:175px}
  .detail-visual-stack .voicing-panel{grid-template-columns:1fr;gap:12px;padding:16px}
}
@media(max-width:850px){
  .detail-grid{grid-template-columns:1fr}
  .detail-visual-stack{grid-column:1}
}
@media(max-width:768px) and (min-width:601px){
  .chord-cards{grid-template-columns:repeat(2,minmax(0,168px));justify-content:space-around}
  .chord-cards.chromatic-open{grid-template-columns:repeat(2,minmax(300px,1fr));justify-content:stretch}
  .chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy) .approach-route{left:33.333%;width:calc(33.333% + 7px)}
  .chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy) .preparation-route{left:0;width:calc(33.333% + 7px)}
}
@media(max-width:600px){
  .harmony-section>.chord-cards{order:3}
  .harmony-section>.chromatic-controls{order:4;margin-top:22px}
  .chord-cards,.chord-cards.chromatic-open{display:grid;grid-template-columns:1fr;gap:8px;overflow:visible}
  .degree-home-stack{width:100%}
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy){--family-card-width:33.333%;--family-home-top:0px;--family-approach-top:57px;--family-prep-top:114px;min-height:178px}
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy)>.degree-home-stack{right:0;width:var(--family-card-width);margin:0}
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .approach-route{left:33.333%;width:calc(var(--family-card-width) + 7px)}
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .preparation-route{left:0;width:calc(var(--family-card-width) + 7px)}
  .chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy) .approach-route{left:33.333%;width:calc(var(--family-card-width) + 7px)}
  .chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy) .preparation-route{left:0;width:calc(var(--family-card-width) + 7px)}
  .chord-cards.chromatic-open:not(.with-preparation) .degree-anchor:has(.chromatic-hierarchy){min-height:124px}
  .chord-cards.chromatic-open:not(.with-preparation) .degree-anchor:has(.chromatic-hierarchy) .approach-route{left:0;width:calc(50% + 7px)}
  .chord-cards.chromatic-open:not(.with-preparation) .degree-anchor:has(.chromatic-hierarchy)>.degree-home-stack{width:50%}
  .detail-visual-stack .voicing-panel{grid-template-columns:1fr;gap:14px}
  .local-level-control button{font-size:9px}
}

/* RC26.6 consolidated pass: Explore -> decide -> lock -> overview. */
:root{--sec-dom-bg:#603a30;--sec-dom-border:#8a5c4c;--sec-dom-text:#fffaf3}

/* Anchor cards remain full; only semantic Context Cards compact when locked. */
.context-card.compact-context-card{align-content:center;min-height:0!important;padding:8px 38px 8px 10px!important}
.chromatic-card.compact-context-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 9px;align-items:center}
.chromatic-card.compact-context-card .functional-label{grid-column:1;margin:0;font-size:8px;opacity:1}
.chromatic-card.compact-context-card strong{grid-column:2;overflow:visible;text-overflow:clip;font-size:18px;white-space:nowrap}
.chromatic-card.compact-context-card .card-notes{display:none}
.modal-interchange-card.compact-context-card{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;gap:3px;align-content:center;justify-items:center}
.modal-interchange-card.compact-context-card>small,.modal-interchange-card.compact-context-card>i{display:none}
.modal-interchange-card.compact-context-card .roman{grid-column:1;margin:0;font-size:13px;line-height:1}
.modal-interchange-card.compact-context-card strong{grid-column:1;overflow:visible;text-overflow:clip;font-size:18px;line-height:1;white-space:nowrap}
.modal-interchange-card.compact-context-card .card-notes{grid-column:1;margin-top:2px}

/* One state-aware footprint per stable degree anchor. */
.chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy){
  --family-home-height:141px;
  --family-approach-height:124px;
  --family-prep-height:124px;
  --family-mi-height:0px;
  --family-mi-gap:0px;
  --family-approach-top:17px;
  --family-overlap-y:12px;
  --family-prep-top:calc(var(--family-approach-top) + var(--family-approach-height) - var(--family-overlap-y));
  --family-target-height:calc(var(--family-home-height) + var(--family-mi-gap) + var(--family-mi-height));
  min-height:max(var(--family-target-height),calc(var(--family-approach-top) + var(--family-approach-height) + 10px));
}
.chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy){min-height:max(var(--family-target-height),calc(var(--family-prep-top) + var(--family-prep-height) + 10px))}
.chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy):has(.approach-card.compact-context-card){--family-approach-height:54px}
.chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy):has(.preparation-card.compact-context-card){--family-prep-height:42px}
.chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy):has(.modal-interchange-card){--family-mi-gap:8px;--family-mi-height:96px}
.chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy):has(.modal-interchange-card.compact-context-card){--family-mi-height:54px}
.chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .approach-route{top:var(--family-approach-top)}
.chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .preparation-route{top:var(--family-prep-top)}
.chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .approach-card{height:var(--family-approach-height);min-height:0;overflow:hidden}
.chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .preparation-card{height:var(--family-prep-height);min-height:0;overflow:hidden}
.chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .modal-interchange-card{height:var(--family-mi-height);min-height:0}
.chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy){display:block}
.chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy)>.degree-home-stack{right:0;left:auto;width:var(--family-card-width);margin-left:0}
.chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .approach-route,
.chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy) .approach-route,
.chord-cards.chromatic-open.with-preparation .degree-anchor:has(.chromatic-hierarchy) .preparation-route{display:block}
.chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy) .chromatic-branch{position:static}

/* Staff and Keyboard controls share the visualization footprint. */
.detail-visual-stack .notation-card{padding:12px 16px}
.notation-main{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
.notation svg{height:150px}
.treble{font-size:112px}.bass{font-size:58px}
.notation-main .play-notes-button{align-self:center;min-width:108px;margin:0}
.keyboard-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 16px;align-items:end;padding:14px 16px!important}
.keyboard-card .keyboard{display:contents}
.keyboard-card .keys{grid-column:1/-1;margin-bottom:8px}
.keyboard-card .keyboard-legend{grid-column:1;grid-row:2;align-self:center;gap:8px 12px}
.keyboard-card .keyboard-voicing-note{grid-column:1;grid-row:3;margin:0;color:var(--muted);font-size:9px}
.keyboard-card .keyboard-play-button{grid-column:2;grid-row:2/4;align-self:center;margin:0}

@media(max-width:768px) and (min-width:601px){
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy){--family-home-height:97px;--family-approach-height:76px;--family-prep-height:60px;--family-approach-top:15px}
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy):has(.approach-card.compact-context-card){--family-approach-height:48px}
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy):has(.preparation-card.compact-context-card){--family-prep-height:40px}
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy):has(.modal-interchange-card){--family-mi-height:72px}
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy):has(.modal-interchange-card.compact-context-card){--family-mi-height:46px}
}
@media(max-width:600px){
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy){--family-home-height:68px;--family-approach-height:64px;--family-prep-height:56px;--family-approach-top:4px;--family-overlap-y:8px}
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy):has(.approach-card.compact-context-card){--family-approach-height:42px}
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy):has(.preparation-card.compact-context-card){--family-prep-height:38px}
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy):has(.modal-interchange-card){--family-mi-height:64px}
  .chord-cards.chromatic-open .degree-anchor:has(.chromatic-hierarchy):has(.modal-interchange-card.compact-context-card){--family-mi-height:42px}
  .notation-main{grid-template-columns:1fr}
  .notation-main .play-notes-button{justify-self:end}
  .keyboard-card{grid-template-columns:1fr}
  .keyboard-card .keys,.keyboard-card .keyboard-legend,.keyboard-card .keyboard-voicing-note,.keyboard-card .keyboard-play-button{grid-column:1;grid-row:auto}
  .keyboard-card .keyboard-play-button{justify-self:end;margin-top:5px}
}

/* RC26.6 correction: shared semantic tracks, normal-flow Context Cards, 3-3-1 map. */
.harmony-section>.harmony-map-shell{order:3;margin-top:28px}
.harmony-map-shell{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(12,auto) auto;gap:10px 24px;align-items:start}
.harmony-map-shell>.chord-cards{display:contents}
.harmony-map-shell .diatonic-backbone{position:absolute;z-index:0;inset:0;width:100%;height:100%;pointer-events:none}
.harmony-map-shell .degree-anchor{position:relative;z-index:1;display:grid!important;grid-row:span 4;grid-template-rows:subgrid;width:auto!important;min-width:0!important;min-height:0!important;padding:0!important;border:0!important;isolation:isolate}
.harmony-map-shell .degree-anchor:nth-of-type(1){grid-column:1;grid-row:1/span 4}.harmony-map-shell .degree-anchor:nth-of-type(2){grid-column:2;grid-row:1/span 4}.harmony-map-shell .degree-anchor:nth-of-type(3){grid-column:3;grid-row:1/span 4}
.harmony-map-shell .degree-anchor:nth-of-type(4){grid-column:1;grid-row:5/span 4}.harmony-map-shell .degree-anchor:nth-of-type(5){grid-column:2;grid-row:5/span 4}.harmony-map-shell .degree-anchor:nth-of-type(6){grid-column:3;grid-row:5/span 4}
.harmony-map-shell .degree-anchor:nth-of-type(7){grid-column:1;grid-row:9/span 4}
.harmony-map-shell .degree-home-stack,.harmony-map-shell .degree-functional-layer,.harmony-map-shell .chromatic-hierarchy,.harmony-map-shell .chromatic-branch{position:static!important;display:contents!important}
.harmony-map-shell .approach-route,.harmony-map-shell .preparation-route{position:static!important;display:block!important;width:auto!important;height:auto!important;margin:0!important;transform:none!important;pointer-events:auto}
.harmony-map-shell .preparation-route{z-index:1;grid-row:1;align-self:end}.harmony-map-shell .approach-route{z-index:2;grid-row:2;align-self:end}
.harmony-map-shell .degree-home-stack>.chord-card{position:relative;z-index:3;grid-row:3;justify-self:end;width:min(100%,168px);height:auto;min-height:136px;margin:0;padding:16px 12px}
.harmony-map-shell .degree-home-stack>.modal-interchange-card{position:relative;z-index:2;grid-row:4;justify-self:end;width:min(100%,168px);height:auto!important;min-height:82px;margin:7px 0 0;padding:11px 12px}
.harmony-map-shell .approach-card{position:relative!important;justify-self:center;width:clamp(118px,56%,150px)!important;height:auto!important;min-height:92px!important;margin:0!important;padding:11px 12px!important}
.harmony-map-shell .preparation-card{position:relative!important;justify-self:start;width:clamp(96px,36%,116px)!important;height:auto!important;min-height:68px!important;margin:0!important;padding:9px 10px!important}
.harmony-map-shell .context-card.compact-context-card{min-height:44px!important;padding:7px 38px 7px 9px!important}
.harmony-map-shell .approach-card.compact-context-card,.harmony-map-shell .preparation-card.compact-context-card,.harmony-map-shell .modal-interchange-card.compact-context-card{height:auto!important;min-height:44px!important}
.harmony-map-shell>.chromatic-controls{grid-column:1/-1;grid-row:13;margin:18px 0 0;padding-top:14px}
@media(min-width:1000px){
  .harmony-map-shell:has(.chord-cards.chromatic-open)>.chromatic-controls{grid-column:2/4;grid-row:9/span 4;align-self:start;margin:0;padding:12px;border:1px solid var(--control-border);background:rgba(8,14,17,.18)}
  .harmony-map-shell:has(.chord-cards.chromatic-open) .chromatic-disclosure{padding:8px 10px}
  .harmony-map-shell:has(.chord-cards.chromatic-open) .disclosure-copy small{display:none}
  .harmony-map-shell:has(.chord-cards.chromatic-open) .chromatic-content{gap:7px}
  .harmony-map-shell:has(.chord-cards.chromatic-open) .chromatic-options,.harmony-map-shell:has(.chord-cards.chromatic-open) .preparation-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .harmony-map-shell:has(.chord-cards.chromatic-open) .chromatic-options button:last-child{grid-column:auto}
}

/* Unavailable MI alternatives remain legible on their neutral surface. */
.modal-interchange-card.same-as-home{color:#fffaf3;background:#7f8587}
.modal-interchange-card.same-as-home>small,.modal-interchange-card.same-as-home .roman{color:rgba(255,250,243,.78)}
.modal-interchange-card.same-as-home .card-notes{color:rgba(255,255,255,.62)}

/* Chord Detail remains extensible: identity and Lock share the semantic header. */
.chord-identity-row{display:flex;gap:18px;align-items:flex-start;justify-content:space-between}
.chord-identity-row>div{min-width:0}
.chord-identity-row .lock-chord-button{flex:0 0 auto;width:auto;min-height:36px;margin:0;padding:7px 10px;font-size:11px}
.tension-control [data-tension-treatment="excludeAvoid"]{display:flex;gap:7px;align-items:center;justify-content:center}
.tension-exclude-mark{font-size:1.55em;font-weight:800;line-height:.75}
.detail-visual-stack .voicing-panel{display:grid;grid-template-columns:1fr;gap:14px}
.detail-visual-stack .voicing-copy{max-width:none}
.detail-visual-stack .voicing-buttons{width:100%}

@media(max-width:699px){
  .harmony-map-shell{display:block}
  .harmony-map-shell>.chord-cards{display:grid;grid-template-columns:1fr;gap:8px}
  .harmony-map-shell .degree-anchor{display:grid!important;grid-column:1!important;grid-row:auto!important;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto;gap:7px;min-height:0!important}
  .harmony-map-shell .degree-functional-layer,.harmony-map-shell .chromatic-hierarchy,.harmony-map-shell .chromatic-branch{display:contents!important}
  .harmony-map-shell .preparation-route{grid-column:1;grid-row:1}.harmony-map-shell .approach-route{grid-column:2;grid-row:1}
  .harmony-map-shell .degree-home-stack{position:static!important;display:grid!important;grid-column:3;grid-row:1;gap:7px;width:auto!important;margin:0!important}
  .harmony-map-shell .degree-home-stack>.chord-card,.harmony-map-shell .degree-home-stack>.modal-interchange-card,.harmony-map-shell .approach-card,.harmony-map-shell .preparation-card{position:relative!important;grid-row:auto;justify-self:stretch;width:100%!important;height:auto!important;min-height:64px!important;margin:0!important;padding:7px 8px!important}
  .harmony-map-shell .context-card.compact-context-card{min-height:42px!important}
  .harmony-map-shell>.chromatic-controls{margin-top:18px}
  .chord-identity-row{gap:10px}
  .chord-identity-row .lock-chord-button{padding:7px 8px}
}

/* RC26.6 iPhone portrait: semantic zoom-out keeps the complete 4+3 degree map in view. */
@media(max-width:699px){
  .context-panel{padding-top:28px;padding-bottom:28px}
  .context-panel .section-heading{margin-bottom:16px}
  .context-panel .select-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
  .context-panel .select-row label{gap:5px}
  .context-panel .select-row select{min-height:42px;padding:7px 32px 7px 10px}
  .context-panel .scale-strip{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:center;padding:9px 10px}
  .context-panel .scale-strip>span{margin:0;font-size:9px;white-space:nowrap}
  .context-panel #scale-notes{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
  .context-panel #scale-notes span{min-width:0;padding:0;font-size:13px;text-align:center}
  .context-panel #scale-notes small{font-size:6px}

  .harmony-section{display:grid;grid-template-columns:124px minmax(0,1fr);column-gap:8px;padding-top:30px;padding-bottom:34px}
  .harmony-section>.section-heading{grid-column:1;gap:8px;align-self:center;margin:0}
  .harmony-section>.section-heading>span{width:32px;height:32px;font-size:9px}
  .harmony-section>.section-heading h2{font-size:23px;line-height:1.05}
  .harmony-section>.section-heading p{font-size:8px;line-height:1.2;letter-spacing:.12em}
  .harmony-section>.level-control{grid-column:2;display:block;align-self:center;margin:0}
  .harmony-section .level-control-heading{font-size:9px;letter-spacing:.08em}
  .harmony-section .level-control-heading{display:flex;min-height:18px;align-items:center;justify-content:space-between;gap:4px}
  .harmony-section .level-control-heading>span{line-height:1.2}
  .harmony-section .unlock-all-button{position:static;min-height:18px;padding:2px 5px;font-size:7px;white-space:nowrap}
  .harmony-section .level-control .segmented{min-width:0}
  .harmony-section .level-control .segmented button{min-height:34px;padding:5px 3px;font-size:11px}
  .harmony-section>.harmony-map-shell{grid-column:1/-1;margin-top:14px}
  .harmony-map-shell{display:block}
  .harmony-map-shell>.chord-cards{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:repeat(4,var(--mobile-family-height));grid-auto-flow:column;gap:var(--mobile-row-gap) 8px!important;align-items:stretch;overflow:visible;padding:0}
  .harmony-map-shell .degree-anchor{display:grid!important;grid-column:auto!important;grid-row:auto!important;width:100%!important;height:var(--mobile-family-height)!important;min-width:0!important;min-height:0!important;grid-template-rows:1fr!important;gap:0!important;overflow:visible}
  .harmony-map-shell .degree-anchor:nth-of-type(n){grid-column:auto;grid-row:auto}
  .chord-cards.map-density-diatonic{--mobile-family-height:70px;--mobile-row-gap:7px}
  .chord-cards.map-density-modal{--mobile-family-height:97px;--mobile-row-gap:6px}
  .chord-cards.map-density-chromatic{--mobile-family-height:62px;--mobile-row-gap:6px}
  .chord-cards.map-density-preparation{--mobile-family-height:60px;--mobile-row-gap:5px}
  .chord-cards.map-density-preparation.modal-open{--mobile-family-height:94px}
  .chord-cards.map-density-chromatic.modal-open{--mobile-family-height:98px}

  .harmony-map-shell .degree-functional-layer,.harmony-map-shell .chromatic-hierarchy,.harmony-map-shell .chromatic-branch{display:contents!important}
  .harmony-map-shell .degree-home-stack{position:relative!important;z-index:3;display:grid!important;width:auto!important;margin:0!important;gap:0!important;transform:none}
  .harmony-map-shell .degree-home-stack>.chord-card,
  .harmony-map-shell .degree-home-stack>.modal-interchange-card,
  .harmony-map-shell .approach-card,.harmony-map-shell .preparation-card,
  .harmony-map-shell .context-card.compact-context-card{box-sizing:border-box;width:100%!important;height:100%!important;min-height:0!important;margin:0!important;padding:4px 14px 4px 4px!important;align-content:center;overflow:hidden}
  .harmony-map-shell .degree-home-stack>.chord-card{grid-column:1;grid-row:1;justify-self:stretch;border-width:2px}
  .harmony-map-shell .degree-home-stack>.modal-interchange-card{grid-column:1;grid-row:2;justify-self:stretch}
  .harmony-map-shell .approach-route,.harmony-map-shell .preparation-route{position:relative!important;inset:auto!important;display:block!important;width:auto!important;height:auto!important;min-width:0;margin:0!important;transform:none!important;align-self:stretch}
  .harmony-map-shell .approach-card,.harmony-map-shell .preparation-card{position:relative!important;display:grid}

  .map-density-diatonic .degree-anchor{grid-template-columns:70px!important;justify-content:center}
  .map-density-diatonic .degree-home-stack{grid-column:1;grid-row:1}
  .map-density-diatonic .degree-home-stack>.chord-card{grid-column:1;grid-row:1;justify-self:center!important;width:70px!important}
  .map-density-modal .degree-anchor{grid-template-columns:58px!important;grid-template-rows:58px 34px!important;row-gap:5px!important;justify-content:center}
  .map-density-modal .degree-home-stack{grid-column:1;grid-row:1/3;grid-template-rows:58px 34px;row-gap:5px!important}
  .map-density-modal .degree-home-stack>.chord-card{grid-column:1;grid-row:1}
  .map-density-modal .degree-home-stack>.modal-interchange-card{grid-column:1;grid-row:2}
  .map-density-chromatic .degree-anchor{grid-template-columns:56px 62px!important;justify-content:end}
  .map-density-chromatic .degree-home-stack{grid-column:2;grid-row:1;transform:translateY(-4px)}
  .map-density-chromatic .approach-route{grid-column:1!important;grid-row:1!important}
  .map-density-chromatic .degree-home-stack>.chord-card{grid-column:1!important;grid-row:1!important}
  .map-density-preparation .degree-anchor{grid-template-columns:46px 52px 60px!important;justify-content:end}
  .map-density-preparation .degree-home-stack{grid-column:3;grid-row:1;transform:translateY(-7px)}
  .map-density-preparation .preparation-route{grid-column:1!important;grid-row:1!important}
  .map-density-preparation .approach-route{grid-column:2!important;grid-row:1!important}
  .map-density-preparation .degree-home-stack>.chord-card{grid-column:1!important;grid-row:1!important}
  .map-density-chromatic.modal-open .degree-anchor{grid-template-rows:58px 34px!important;row-gap:6px!important}
  .map-density-chromatic.modal-open .degree-home-stack{grid-row:1/3;grid-template-rows:58px 34px;row-gap:6px!important}
  .map-density-chromatic.modal-open .degree-home-stack>.modal-interchange-card{grid-column:1;grid-row:2}
  .map-density-preparation.modal-open .degree-anchor{grid-template-rows:56px 33px!important;row-gap:5px!important}
  .map-density-preparation.modal-open .degree-home-stack{grid-row:1/3;grid-template-rows:56px 33px;row-gap:5px!important}
  .map-density-preparation.modal-open .degree-home-stack>.modal-interchange-card{grid-column:1;grid-row:2}
  .map-density-diatonic .degree-home-stack>.chord-card{width:70px!important;height:70px!important}
  .map-density-modal .degree-home-stack>.chord-card{width:58px!important;height:58px!important}
  .map-density-modal .degree-home-stack>.modal-interchange-card{width:58px!important;height:34px!important}
  .map-density-chromatic .degree-home-stack>.chord-card{width:62px!important;height:62px!important}
  .map-density-chromatic .approach-card{width:56px!important;height:56px!important;align-self:center}
  .map-density-preparation .degree-home-stack>.chord-card{width:60px!important;height:60px!important}
  .map-density-preparation .approach-card{width:52px!important;height:52px!important;align-self:center}
  .map-density-preparation .approach-card{transform:translateY(-3px)!important}
  .map-density-preparation .preparation-card{width:46px!important;height:46px!important;align-self:center;transform:translateY(1px)!important}
  .map-density-chromatic.modal-open .degree-home-stack>.modal-interchange-card{height:34px!important}
  .map-density-preparation.modal-open .degree-home-stack>.modal-interchange-card{height:33px!important}
  .harmony-map-shell .map-density-chromatic .approach-card.compact-context-card{height:56px!important}
  .harmony-map-shell .map-density-preparation .approach-card.compact-context-card{height:52px!important}
  .harmony-map-shell .map-density-preparation .preparation-card.compact-context-card{height:46px!important}
  .harmony-map-shell .map-density-modal .modal-interchange-card.compact-context-card{height:32px!important}
  .harmony-map-shell .map-density-chromatic.modal-open .modal-interchange-card.compact-context-card{height:34px!important}
  .harmony-map-shell .map-density-preparation.modal-open .modal-interchange-card.compact-context-card{height:33px!important}

  .harmony-map-shell .chord-card strong{line-height:1;white-space:nowrap}
  .map-density-diatonic .chord-card strong{font-size:16px}
  .map-density-modal .chord-card strong{font-size:13px}.map-density-modal .modal-interchange-card strong{font-size:10px}
  .map-density-chromatic .chord-card strong{font-size:11px}.map-density-chromatic .approach-card strong{font-size:9px}
  .map-density-preparation .chord-card strong{font-size:9px}.map-density-preparation .approach-card strong{font-size:8px}.map-density-preparation .preparation-card strong{font-size:7px}
  .harmony-map-shell strong.symbol-compact{font-size:calc(1em - 1px)!important}
  .harmony-map-shell strong.symbol-extra-compact{font-size:calc(1em - 2px)!important;letter-spacing:-.04em}
  .harmony-map-shell .chord-card .roman,.harmony-map-shell .chromatic-card small,.harmony-map-shell .modal-interchange-card .roman{margin:0 0 2px;line-height:1}
  .map-density-diatonic .roman{font-size:8px}.map-density-modal .roman{font-size:7px}.map-density-chromatic .roman,.map-density-chromatic .functional-label{font-size:7px!important}.map-density-preparation .roman,.map-density-preparation .functional-label{font-size:6px!important}
  .harmony-section .harmony-map-shell .modal-interchange-card>small{height:8px!important;margin:0!important;overflow:hidden;font-size:0!important;line-height:1!important}
  .harmony-section .harmony-map-shell .modal-interchange-card>small::after{content:'MI';font-size:7px!important;letter-spacing:.08em}
  .harmony-map-shell .card-notes,.harmony-map-shell .symbol-review-card,.harmony-map-shell .sus4-equivalence-card{display:none!important}
  .harmony-map-shell .card-unlock-button{width:14px;height:14px}
  .harmony-map-shell .card-unlock-button span{width:12px;height:12px}
  .harmony-map-shell .card-unlock-button svg{width:7px;height:7px}
  .harmony-map-shell .chord-card>i,.harmony-map-shell .modal-interchange-card>i{top:4px;right:4px;font-size:8px}
  .harmony-map-shell .context-card.compact-context-card strong{font-size:inherit}
  .harmony-map-shell .chromatic-card.compact-context-card,
  .harmony-map-shell .modal-interchange-card.compact-context-card{column-gap:2px}
  .harmony-map-shell .diatonic-backbone{display:none}
  .harmony-map-shell .approach-route::after,.harmony-map-shell .preparation-route::after{content:'';position:absolute;z-index:8;top:50%;right:-4px;width:8px;border-top:1px solid rgba(224,199,139,.82);pointer-events:none}
  .harmony-map-shell .approach-route::before,.harmony-map-shell .preparation-route::before{content:'';position:absolute;z-index:9;top:calc(50% - 3px);right:-4px;width:5px;height:5px;border-top:1px solid rgba(224,199,139,.9);border-right:1px solid rgba(224,199,139,.9);transform:rotate(45deg);pointer-events:none}

  .harmony-map-shell>.chromatic-controls{margin-top:12px;padding-top:9px}
  .harmony-section .chromatic-disclosure{min-height:40px;padding:6px 8px}
  .harmony-section .disclosure-copy strong{font-size:14px}.harmony-section .disclosure-copy>span{font-size:8px}.harmony-section .disclosure-copy small{display:none}
  .harmony-section .chromatic-content{gap:7px}
  .harmony-section .chromatic-options{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:4px}
  .harmony-section .chromatic-options button{min-width:0;min-height:34px;padding:4px 2px;font-size:8px;letter-spacing:0}
  .harmony-section .preparation-controls{margin:3px 0 0;padding:0}
  .harmony-section .preparation-disclosure{min-height:34px!important;padding:4px 7px!important;font-size:9px!important}
  .harmony-section .preparation-options{display:flex!important;flex-wrap:nowrap!important;gap:4px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 0 5px;scrollbar-width:none}
  .harmony-section .preparation-options[hidden]{display:none!important}
  .harmony-section .preparation-options::-webkit-scrollbar{display:none}
  .harmony-section .preparation-options button{flex:0 0 58px;min-height:32px;padding:4px;font-size:9px;scroll-snap-align:start}
  .harmony-section .modal-interchange-picker{grid-template-columns:minmax(0,1fr)}
  .harmony-section .modal-interchange-picker button{min-height:34px;font-size:18px}
  .harmony-section .modal-source-track{gap:2px;padding:3px}
  .harmony-section .modal-interchange-picker .modal-source-option{min-height:30px;padding:5px 8px;font-size:9px}

  .voice-leading-region{padding:8px 18px}
  .voice-leading-panel{min-height:64px;padding:8px 11px;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
  .voice-leading-panel h3{font-size:11px}.voice-leading-panel p{margin-top:2px;font-size:10px}
  .voice-leading-panel button{width:auto;min-height:34px;margin:0;padding:6px 8px;font-size:9px}
  .detail-visual-stack{gap:8px}
  .detail-visual-stack .visual-card{padding:10px 11px}
  .notation-main{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:6px;align-items:center}
  .notation svg{height:122px!important}
  .notation-main .play-notes-button{grid-column:2;justify-self:end;min-width:74px;padding:7px 8px;font-size:10px}
  .keyboard-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 8px}
  .keyboard-card .keyboard{grid-column:1/-1;margin:0}
  .keyboard-card .keys{margin-bottom:4px}
  .keyboard-card .keys{height:66px!important}
  .keyboard-card .key.white{height:64px!important}
  .keyboard-card .key.black{height:39px!important}
  .keyboard-card .keyboard-legend,.keyboard-card .keyboard-voicing-note{display:none!important}
  .keyboard-card .keyboard-play-button{grid-column:2;justify-self:end;min-width:100px;margin:0;padding:7px 8px;font-size:10px}
  .detail-visual-stack .voicing-panel{gap:8px;padding:12px}
  .detail-visual-stack .voicing-copy p{font-size:10px}
  .voicing-buttons button{min-height:34px;padding:5px 4px;font-size:9px}
}

/* Final-cascade RC26.6 desktop recovery and dark technical instrument skin. */
@media(min-width:700px){
  .harmony-map-shell{display:block!important}
  .harmony-map-shell>.chord-cards{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-flow:row;gap:18px 12px;align-items:start}
  .harmony-map-shell>.chord-cards.chromatic-open{grid-template-columns:repeat(4,minmax(0,1fr))}
  .harmony-map-shell .degree-anchor,.harmony-map-shell .degree-anchor:nth-of-type(n){display:grid!important;grid-column:auto!important;grid-row:auto!important;grid-template-columns:minmax(0,.72fr) minmax(0,.84fr) minmax(0,1fr);grid-template-rows:auto auto;gap:5px 7px;width:100%!important;min-width:0!important;min-height:0!important;padding:0!important}
  .harmony-map-shell .degree-functional-layer,.harmony-map-shell .chromatic-hierarchy,.harmony-map-shell .chromatic-branch{display:contents!important}
  .harmony-map-shell .degree-home-stack{position:relative!important;z-index:3;display:grid!important;grid-column:3;grid-row:1/3;grid-template-rows:auto auto;gap:5px;width:auto!important;margin:0!important}
  .harmony-map-shell>.chord-cards:not(.chromatic-open) .degree-anchor{display:block!important}
  .harmony-map-shell>.chord-cards:not(.chromatic-open) .degree-home-stack{display:grid!important;grid-template-rows:auto auto;gap:5px;width:100%!important}
  .harmony-map-shell .degree-home-stack>.chord-card,.harmony-map-shell .degree-home-stack>.modal-interchange-card{position:relative!important;grid-column:1;justify-self:stretch;width:100%!important;height:auto!important;margin:0!important;overflow:hidden}
  .harmony-map-shell .degree-home-stack>.chord-card{grid-row:1;min-height:104px;padding:13px 10px}
  .harmony-map-shell .degree-home-stack>.modal-interchange-card{grid-row:2;min-height:58px;padding:8px 9px}
  .harmony-map-shell .approach-route,.harmony-map-shell .preparation-route{position:relative!important;inset:auto!important;display:block!important;width:auto!important;height:auto!important;margin:0!important;transform:none!important;align-self:end}
  .harmony-map-shell .preparation-route{grid-column:1;grid-row:1}.harmony-map-shell .approach-route{grid-column:2;grid-row:1}
  .harmony-map-shell .approach-card,.harmony-map-shell .preparation-card{position:relative!important;width:100%!important;height:auto!important;margin:0!important;padding:8px!important;overflow:hidden}
  .harmony-map-shell .approach-card{min-height:82px!important}.harmony-map-shell .preparation-card{min-height:66px!important}
  .harmony-map-shell .chord-card strong{font-size:18px;line-height:1.05}.harmony-map-shell .chromatic-card strong{font-size:14px}.harmony-map-shell .modal-interchange-card strong{font-size:13px}
  .harmony-map-shell>.chromatic-controls,.harmony-map-shell:has(.chord-cards.chromatic-open)>.chromatic-controls{display:grid;grid-column:auto;grid-row:auto;margin:18px 0 0;padding:12px;border:1px solid var(--control-border);background:rgba(5,10,14,.34)}
  .harmony-map-shell:has(.chord-cards.chromatic-open) .chromatic-options{grid-template-columns:repeat(4,minmax(0,1fr))}
  .harmony-map-shell:has(.chord-cards.chromatic-open) .preparation-options{grid-template-columns:repeat(6,minmax(0,1fr))}
  .modal-interchange-picker{width:min(100%,430px);margin-right:auto}.modal-source-track{min-width:0;width:auto}
  .modal-source-option{display:none}.modal-source-option.active,.modal-source-option:has(+ .active),.modal-source-option.active + .modal-source-option{display:block}
  .harmony-map-shell .approach-route::after,.harmony-map-shell .preparation-route::after{content:'';position:absolute;z-index:8;top:50%;right:-7px;width:7px;border-top:1px solid #dbc46f;filter:drop-shadow(0 0 2px rgba(219,196,111,.38));pointer-events:none}
  .harmony-map-shell .approach-route::before,.harmony-map-shell .preparation-route::before{content:'';position:absolute;z-index:9;top:calc(50% - 3px);right:-7px;width:5px;height:5px;border-top:1px solid #dbc46f;border-right:1px solid #dbc46f;transform:rotate(45deg);pointer-events:none}
}
@media(min-width:1000px){
  .harmony-map-shell:has(.chord-cards.chromatic-open) .chromatic-content{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:10px 18px;align-items:start}
  .harmony-map-shell:has(.chord-cards.chromatic-open) .chromatic-options{grid-column:1;grid-row:1}
  .harmony-map-shell:has(.chord-cards.chromatic-open) .preparation-controls,.harmony-map-shell:has(.chord-cards.chromatic-open) .modal-interchange-controls{grid-column:2;grid-row:1;margin:0;padding:0 0 0 16px;border-top:0;border-left:1px solid var(--control-divider)}
}
.harmony-section{background-color:#0c1218;background-image:linear-gradient(118deg,rgba(118,132,137,.13),rgba(118,132,137,.035) 31%,transparent 57%),linear-gradient(164deg,transparent 12%,rgba(151,160,159,.07) 46%,transparent 78%),linear-gradient(rgba(4,8,12,.62),rgba(4,8,12,.62)),url('assets/monchord-section02-slate.jpg');background-size:auto,auto,auto,cover;background-position:center}
.harmony-section .chord-card,.harmony-section .context-card{background:#141d25;color:#f2f2ec;border-color:rgba(191,204,209,.28);box-shadow:inset 0 1px rgba(255,255,255,.035)}
.harmony-section .chord-card .roman{color:#d8c077}.harmony-section .chord-card .card-notes,.harmony-section .context-card .card-notes{color:#aeb9bf}
.harmony-section .chord-card.selected{color:#f2f2ec;background:#1b2a38;border-color:#d4b75d;box-shadow:inset 0 2px #ef705f,0 0 0 1px rgba(212,183,93,.18)}
.harmony-section .chromatic-card{--identity-signal:#ba7b60;background:color-mix(in srgb,#141d25 92%,var(--identity-signal));border:1px solid color-mix(in srgb,var(--identity-signal) 68%,#27323a);color:#f2f2ec;box-shadow:inset 2px 0 var(--identity-signal)}
.harmony-section .branch-secondaryDiminished .chromatic-card{--identity-signal:#6e9a9b}.harmony-section .branch-tritone .chromatic-card{--identity-signal:#a69b86}.harmony-section .preparation-card{--identity-signal:#a45b78}
.harmony-section .chromatic-card small,.harmony-section .chromatic-card strong{color:color-mix(in srgb,var(--identity-signal) 72%,white)}
.harmony-section .modal-interchange-card{background:color-mix(in srgb,#141d25 92%,var(--mi-card-bg));border-color:color-mix(in srgb,var(--mi-card-bg) 72%,#26313a);color:#f2f2ec;box-shadow:inset 0 2px var(--mi-card-bg)}
.harmony-section .modal-interchange-card>small,.harmony-section .modal-interchange-card .roman,.harmony-section .modal-interchange-card strong{color:color-mix(in srgb,var(--mi-card-bg) 74%,white)}
.harmony-section .modal-interchange-card .card-notes{color:#aeb9bf}.harmony-section .modal-interchange-card.same-as-home{background:#141d25;color:#f2f2ec}
.harmony-section .segmented button.active,.harmony-section .chromatic-options button.active,.harmony-section .preparation-options button.active{color:#f3d77d;border-color:#c9a75d;background:rgba(201,167,93,.10);box-shadow:inset 0 0 10px rgba(201,167,93,.09)}
.harmony-section .modal-interchange-picker .modal-source-option[data-modal-source].active{color:color-mix(in srgb,var(--mi-source) 65%,white);border-color:var(--mi-source);background:color-mix(in srgb,#141d25 88%,var(--mi-source));box-shadow:inset 0 -1px var(--mi-source)}
.diatonic-backbone line{stroke:#dbc46f;stroke-width:1;filter:drop-shadow(0 0 2px rgba(219,196,111,.34))}