/* H1.1 isolated preview surface; does not modify global styles. */
.he-shell{box-sizing:border-box;width:min(1210px,calc(100% - 30px));margin:22px auto 70px;color:#342e29;font:15px/1.5 system-ui,-apple-system,Segoe UI,Arial,sans-serif}
.he-shell *{box-sizing:border-box}.he-shell button,.he-shell select{font:inherit}.he-shell button{cursor:pointer}.he-shell button:focus-visible,.he-shell select:focus-visible,.he-shell a:focus-visible{outline:3px solid #257ca1;outline-offset:3px}.he-shell h1,.he-shell h2{line-height:1.2;color:#332b24}
.he-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 18px;padding:28px 32px;border:1px solid #decfb9;border-radius:20px;background:linear-gradient(130deg,#fff7e8,#ecd6b4)}.he-hero h1{font-size:clamp(27px,4vw,43px);margin:5px 0 10px}.he-hero p{margin:0;color:#766250}.he-eyebrow{text-transform:uppercase;font-size:11px;letter-spacing:.12em;font-weight:800;color:#8b6140}.he-link{color:#594332;font-weight:700;text-underline-offset:3px;white-space:nowrap}
.he-toolbar{display:flex;flex-wrap:wrap;gap:12px;padding:16px;border:1px solid #e4ded7;background:#fff;border-radius:16px}.he-toolbar label,.he-progress-head label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:750;color:#6a5d52;flex:1;min-width:125px}.he-toolbar select,.he-progress-head select{min-height:41px;padding:7px 12px;border:1px solid #d8d2ca;border-radius:9px;background:#fff;color:#2d2a28}
.he-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.he-tab{border:1px solid #d8cfc3;border-radius:100px;padding:9px 19px;background:#fff;color:#64564a}.he-tab.is-active{background:#48382c;color:#fff;border-color:#48382c}
.he-workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:stretch}.he-main-panel,.he-inspector,.he-progress-panel{border:1px solid #e7e0d8;border-radius:17px;background:#fff;box-shadow:0 5px 22px rgba(56,45,35,.035)}.he-main-panel{min-height:450px;overflow:hidden}.he-canvas{padding:26px;min-height:440px}.he-inspector{padding:24px}.he-inspector h2{font-size:34px;margin:16px 0 20px}.he-inspector p{color:#695d50;overflow-wrap:anywhere}.he-inspector .he-warning{color:#9a4a22;background:#fff4e8;border-radius:8px;padding:10px}
.he-buttons{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}.he-buttons button,.he-buttons a{min-height:40px;border:1px solid #47392e;border-radius:9px;background:#47392e;color:#fff;font-size:13px;font-weight:750;padding:10px 13px;text-decoration:none;text-align:center}.he-buttons .he-secondary{background:#fff;color:#47392e;border-color:#d6cbc0}.he-buttons [aria-disabled="true"]{opacity:.6}
.he-wheel{position:relative;width:min(100%,390px);aspect-ratio:1;margin:0 auto;border-radius:50%;background:radial-gradient(circle at center,#fff 0 24%,#f7ede0 24.2% 38%,#efe1cd 38.2% 68%,#f9f5ee 68.2% 100%);border:1px solid #e6d4bd;box-shadow:inset 0 0 0 4px #fff}.he-wheel-center{position:absolute;inset:39%;display:flex;align-items:center;justify-content:center;flex-direction:column;line-height:1.1}.he-wheel-center strong{font-size:clamp(19px,3vw,32px)}.he-wheel-center small{font-size:10px;color:#775f48;text-align:center}.he-wheel-key{position:absolute;transform:translate(-50%,-50%);display:flex;justify-content:center;align-items:center;border:0;border-radius:50%;font-size:clamp(12px,2vw,16px);font-weight:800;color:#493c30;background:transparent;width:11%;aspect-ratio:1;padding:0}.he-wheel-minor{font-size:clamp(10px,1.7vw,13px);font-weight:600;width:10%}.he-wheel-key:hover{background:#fff6e5;box-shadow:0 1px 7px #967c5544}.he-wheel-key.is-selected{background:#47382e;color:white;box-shadow:0 2px 8px #4d34175c}
.he-grid-view h2,.he-progress-placeholder h2{margin:4px 0 25px;font-size:23px}.he-chord-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.he-chord-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:90px;padding:14px 8px;border-radius:12px;border:1px solid #e1d4c6;background:#faf7f2;color:#332c27;text-align:center;min-width:0}.he-chord-tile strong{font-size:clamp(14px,2vw,19px);overflow-wrap:anywhere}.he-chord-tile small{font-size:12px;font-weight:800;color:#8d755c}.he-chord-tile.is-selected{border-color:#8f5f38;background:#f3e5d1;box-shadow:inset 0 0 0 1px #8f5f38}.he-chord-tile:hover{border-color:#b48a5c}.he-scale{margin-top:23px;color:#6a5747;overflow-wrap:anywhere}
.he-network{position:relative;width:100%;max-width:640px;aspect-ratio:600/390;margin:auto}.he-network-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.he-network-lines line{stroke:#b59773;opacity:.38}.he-network-node{position:absolute;transform:translate(-50%,-50%);width:clamp(63px,13%,94px);height:68px;min-height:0;padding:5px}.he-network-node strong{font-size:13px}.he-network-hint{font-size:12px;color:#7f6f61;text-align:center;margin:10px auto 0;max-width:480px}
.he-progress-panel{margin-top:16px;padding:22px}.he-progress-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}.he-progress-head h2{font-size:22px;margin:0}.he-progress-head label{max-width:380px}.he-progression{display:flex;gap:12px;flex-wrap:wrap;min-height:90px}.he-progression-tile{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:95px;max-width:170px;flex:1 0 95px;gap:5px;padding:19px 18px;border:1px solid #ded2c5;border-radius:12px;background:#faf5ee}.he-progression-tile small{color:#877666}.he-progression-tile strong{overflow-wrap:anywhere}.he-remove{position:absolute;top:0;right:3px;border:0;background:transparent;font-size:20px;line-height:1;color:#8c6950}.he-explanation{font-size:13px;color:#75685c;margin:13px 0 0}.he-preview{font-size:12px;color:#887968;text-align:center;margin:22px 0}
@media(max-width:850px){.he-workspace{grid-template-columns:1fr}.he-main-panel{min-height:0}.he-canvas{min-height:0}.he-inspector{padding:18px}.he-inspector h2{font-size:27px;margin:10px 0}.he-hero{padding:22px;align-items:flex-start}.he-progress-head{align-items:stretch;flex-direction:column}.he-progress-head label{max-width:none}}
@media(max-width:500px){.he-shell{width:calc(100% - 18px)}.he-hero{flex-direction:column}.he-canvas{padding:15px 8px}.he-wheel{width:min(100%,350px)}.he-chord-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.he-toolbar{gap:8px}.he-toolbar label{min-width:44%}.he-network-node{width:clamp(51px,12%,71px);height:62px}.he-network-node strong{font-size:11px}.he-tabs{gap:6px}.he-tab{padding:8px 13px;font-size:12px}}

/* H2 additions: scoped Manouche paths and public guitar voicing cards. */
.he-voicing-section{border-top:1px solid #e7e0d8;margin-top:20px;padding-top:15px}
.he-voicing-section h3{font-size:15px;color:#49382e;margin:0 0 12px}
.he-voicing-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.he-voicing-card{border:1px solid #e1d4c6;border-radius:9px;background:#faf7f2;padding:9px 6px;text-align:center}
.he-voicing-card small{display:block;font-size:10px;color:#796958;margin-bottom:5px}
.he-voicing-frets{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;font-weight:750;font-size:13px}
.he-voicing-frets span{border:1px solid #e0d5c9;border-radius:4px;padding:3px 0;background:white}
.he-voicing-note{color:#806d5b;font-size:12px}.he-path-panel{margin-top:16px;padding:22px;border:1px solid #e7e0d8;border-radius:17px;background:#fff}
.he-path-panel[hidden]{display:none}.he-path-panel h2{font-size:22px;margin:0}.he-path-panel p{color:#786858;font-size:12px}
.he-path-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.he-path-button{border:1px solid #d8cbbb;border-radius:10px;background:#fcf9f5;padding:12px;text-align:left;color:#49382e}
.he-path-button:hover,.he-path-button:focus-visible{border-color:#966d49;background:#f3e5d1}
.he-path-button strong,.he-path-button small{display:block}.he-path-button small{margin-top:5px;color:#776251;overflow-wrap:anywhere}
.he-progression-tile[role="button"]{cursor:pointer}.he-progression-tile[role="button"]:focus-visible{outline:3px solid #257ca1}
@media(max-width:560px){.he-path-options{grid-template-columns:1fr}}

/* H2.2 public guitar voicing-path comparison (no new global styles). */
.he-voice-path-panel{margin-top:16px;padding:22px;border:1px solid #e7e0d8;border-radius:17px;background:#fff}
.he-voice-path-panel[hidden]{display:none}.he-voice-path-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.he-voice-path-head h2{font-size:22px;margin:0}.he-voice-path-head button{border:1px solid #47392e;border-radius:9px;background:#47392e;color:#fff;font-size:13px;font-weight:700;padding:10px 13px}
.he-voice-path-head button:disabled{opacity:.6;cursor:wait}.he-voice-path-hint,.he-voice-path-panel #he-voice-path-status{color:#786858;font-size:12px}
.he-voice-path-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:12px}
.he-voice-path-card{border:1px solid #e1d4c6;border-radius:12px;background:#fcf9f5;padding:13px}.he-voice-path-card h3{font-size:15px;margin:0 0 12px}
.he-voice-path-steps{display:flex;flex-wrap:wrap;gap:8px}.he-voice-path-step{border:1px solid #e1d4c6;border-radius:8px;padding:7px;text-align:center;min-width:106px;background:white;flex:1}
.he-voice-path-step strong,.he-voice-path-step small{display:block}.he-voice-path-step small{font-size:11px;color:#806d5b}
.he-voice-path-step code{display:block;font-size:12px;white-space:nowrap;color:#47392e;margin-top:4px}.he-voice-path-metrics{font-size:12px;color:#695747;margin:12px 0 0}

/* H2.3 — segmented tonal circle and independent functional wheel (scoped to Harmony Explorer). */
.he-wheel-h23-panel{width:100%;max-width:680px;margin:0 auto;color:#433428}
.he-wheel-h23-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.he-wheel-h23-heading h2{font-size:17px!important;margin:0!important}
.he-wheel-h23-toggle{display:flex;gap:3px;border:1px solid #e0d2c3;border-radius:10px;padding:3px;background:#faf5ee}
.he-wheel-h23-toggle button{border:0;border-radius:7px;background:transparent;color:#6b5748;padding:7px 10px;font-size:12px;font-weight:700}
.he-wheel-h23-toggle button.is-active{background:#4b392b;color:white}
.he-wheel-h23-frame{position:relative;width:min(100%,600px);aspect-ratio:1;margin:auto;isolation:isolate}
.he-wheel-h23-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.he-wheel-h23-segment{stroke:#fff;stroke-width:2;fill:#f8f0e5}
.he-wheel-h23-fill-major{fill:#f0ddc3}.he-wheel-h23-fill-minor{fill:#f8ead9}.he-wheel-h23-fill-dim{fill:#f6f1e8}
.he-wheel-h23-segment.is-diatonic{fill:#e3ebde}.he-wheel-h23-segment.is-selected{fill:#d0aa80;stroke:#8d603a;stroke-width:3}
.he-wheel-h23-segment.is-path{stroke:#b35c30;stroke-width:3.5}
.he-wheel-h23-route-line{stroke:#95522e;stroke-width:4;stroke-linecap:round;stroke-opacity:.78;fill:none}
.he-wheel-h23-route-line.is-chromatic{stroke-dasharray:8 6;stroke:#b76540}
.he-wheel-h23-label{position:absolute;transform:translate(-50%,-50%);z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:2px;border:1px solid transparent;border-radius:9px;background:transparent;color:#45352b;line-height:1.15;min-width:0;text-align:center}
.he-wheel-h23-label strong{font-weight:800;font-size:clamp(10px,1.4vw,15px);white-space:nowrap}.he-wheel-h23-label small{font-size:clamp(9px,1.1vw,12px);font-weight:750;color:#87613f;min-height:12px}
.he-wheel-h23-major{width:10.8%;min-height:42px}.he-wheel-h23-minor{width:9.6%;min-height:39px}.he-wheel-h23-dim{width:10.5%;min-height:32px}
.he-wheel-h23-dim strong{font-size:clamp(8px,1.12vw,11px)}.he-wheel-h23-dim small{font-size:9px}
.he-wheel-h23-label.is-diatonic:not(.is-selected){color:#2d553c}
.he-wheel-h23-label.is-selected{background:#47382e;color:white;box-shadow:0 2px 9px #47382e45}
.he-wheel-h23-label.is-selected small{color:#f9e3cb}
.he-wheel-h23-label.is-path:not(.is-selected){outline:2px solid #b76540;background:#fff9f0}
.he-wheel-h23-label:hover{background:#fffdf8;box-shadow:0 2px 12px #47382e22}
.he-wheel-h23-label.is-selected:hover{background:#47382e}
.he-wheel-h23-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:21%;aspect-ratio:1;z-index:2;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fffaf3;text-align:center;pointer-events:none;box-shadow:0 0 0 2px #e8d6bd}
.he-wheel-h23-center strong{font-size:clamp(21px,3vw,30px)}.he-wheel-h23-center small{font-size:10px;color:#796757}
.he-wheel-h23-role-tonic{fill:#d9e9dc}.he-wheel-h23-role-predominant{fill:#f1e7d2}.he-wheel-h23-role-dominant{fill:#f1d8d0}.he-wheel-h23-role-related{fill:#f3eee8}
.he-wheel-h23-function{width:17.5%;min-height:58px}.he-wheel-h23-function strong{font-size:clamp(11px,1.45vw,17px)}.he-wheel-h23-function small{font-size:clamp(11px,1.2vw,14px)}
.he-wheel-h23-help{text-align:center;margin:9px 0 12px;font-size:12px;color:#786656}
.he-wheel-h23-route{margin:12px 0 0;border:1px solid #e7ded1;border-radius:11px;background:#fbf7f1;padding:10px 12px;font-size:12px}
.he-wheel-h23-route>strong{display:block;margin-bottom:6px;font-size:12px}
.he-wheel-h23-route-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.he-wheel-h23-chip{border:1px solid #b9cbb5;border-radius:7px;background:#edf4e9;padding:4px 8px;font-weight:700}
.he-wheel-h23-chip.is-chromatic{border-color:#dbad87;background:#fff0de}
@media(max-width:650px){.he-wheel-h23-heading{align-items:flex-start}.he-wheel-h23-heading h2{font-size:15px!important}.he-wheel-h23-label strong{font-size:clamp(8px,2.5vw,13px)}.he-wheel-h23-label small{font-size:clamp(8px,2vw,10px);min-height:9px}.he-wheel-h23-dim strong{font-size:clamp(7px,2vw,10px)}.he-wheel-h23-dim{min-height:27px}.he-wheel-h23-minor,.he-wheel-h23-major{min-height:29px}.he-wheel-h23-function{min-height:45px}.he-wheel-h23-function strong{font-size:clamp(9px,2.5vw,14px)}}

.he-wheel-h23-legend{display:flex;justify-content:center;gap:7px 13px;flex-wrap:wrap;margin:10px 0 2px;font-size:11px;color:#786858}
.he-wheel-h23-legend span{display:inline-flex;align-items:center;gap:5px}
.he-wheel-h23-legend span::before{content:"";width:9px;height:9px;border:1px solid #d1bba2;border-radius:3px;background:#f0ddc3}
.he-wheel-h23-legend-minor::before{background:#f8ead9!important}.he-wheel-h23-legend-dim::before{background:#f6f1e8!important}
.he-wheel-h23-legend-chromatic::before{background:#fff0de!important;border-color:#b76540!important}

/* H2.4: non-obstructive step markers and individually selectable information layers. */
.he-wheel-h24-layers{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:3px auto 14px}
.he-wheel-h24-layer{border:1px solid #d8c7b4;border-radius:20px;background:#fff;padding:6px 12px;color:#675543;font-size:12px}
.he-wheel-h24-layer[aria-pressed="true"]{background:#47382e;color:#fff;border-color:#47382e}
.he-wheel-h23-frame.is-focus-scale .he-wheel-h23-segment:not(.is-diatonic):not(.is-selected):not(.is-path){opacity:.53}
.he-wheel-h23-frame.is-focus-scale .he-wheel-h23-label:not(.is-diatonic):not(.is-selected):not(.is-path){opacity:.60}
.he-wheel-h23-label[data-route-steps]::after{content:attr(data-route-steps);position:absolute;right:-8px;top:-12px;border:2px solid #fff;border-radius:30px;background:#995329;color:#fff;min-width:20px;height:20px;padding:1px 3px;font:700 10px/16px system-ui,sans-serif;box-shadow:0 1px 5px #47382e55;pointer-events:none}
.he-wheel-h23-chip{cursor:pointer;color:#463a30;font:inherit}
.he-wheel-h23-chip::before{content:attr(data-step) ' · ';font-weight:850;color:#61412b}
.he-wheel-h23-route[hidden]{display:none}
.he-inspector .he-in-scale{color:#286345;background:#edf5ec;border-radius:8px;padding:8px 10px;font-size:12px}
@media(max-width:650px){.he-wheel-h24-layer{font-size:11px;padding:5px 8px}.he-wheel-h23-label[data-route-steps]::after{right:-5px;top:-9px;font-size:9px;min-width:16px;height:16px;line-height:12px}}
.he-wheel-h23-label.is-chromatic-path:not(.is-selected){outline:2px dashed #ad623d;background:#fff3e6}
.he-wheel-h23-segment.is-chromatic-path{stroke-dasharray:7 4}

/* H2.5: modest wheel-native relationship lens; no changes to global Manouke styles. */
.he-wheel-h25-lens{margin:14px auto 0;max-width:620px;padding:13px;border:1px solid #e4d5c3;border-radius:12px;background:#fffaf4}
.he-wheel-h25-lens h3{font-size:15px;margin:0 0 5px;color:#4d3827}
.he-wheel-h25-intro,.he-wheel-h25-empty{font-size:12px;color:#786858;margin:0 0 9px}
.he-wheel-h25-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:9px}
.he-wheel-h25-card{display:flex;flex-direction:column;gap:5px;padding:11px;border:1px solid #e8dace;border-radius:9px;background:white;min-width:0}
.he-wheel-h25-card strong{font-size:13px;color:#47392e;overflow-wrap:anywhere}
.he-wheel-h25-card span{font-size:12px;font-weight:750;color:#81532f;overflow-wrap:anywhere}
.he-wheel-h25-card small{font-size:11px;color:#766756;line-height:1.4}
.he-wheel-h25-actions{display:flex;gap:6px;margin-top:auto;padding-top:4px;flex-wrap:wrap}
.he-wheel-h25-actions button{border:1px solid #cdbdaa;border-radius:7px;background:white;color:#493b30;padding:6px 9px;font-size:11px;font-weight:750}
.he-wheel-h25-actions button:last-child{background:#47392e;color:white;border-color:#47392e}

/* H3.1: source section is immutable; wheel/builders are previews only. */
.he-source-h31{margin:14px 0;padding:14px;border:1px solid #dfd1c0;border-radius:12px;background:#fffaf3}
.he-source-h31-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.he-source-h31-head>div{display:grid;gap:3px}.he-source-h31-head small,.he-source-h31-hint{color:#736653;font-size:12px}
.he-source-h31-head label{font-size:12px}.he-source-h31-head select{margin-left:6px;max-width:190px}
.he-source-h31-bars{display:flex;gap:7px;overflow-x:auto;padding:5px 0 8px;scrollbar-width:thin}
.he-source-h31-bar{min-width:105px;max-width:185px;flex:0 0 auto;border:1px solid #ded2c0;border-radius:9px;background:white;padding:7px;display:grid;gap:5px}
.he-source-h31-bar small{color:#817360;font-size:11px}.he-source-h31-bar button{border:1px solid #cbbda8;border-radius:6px;padding:5px;text-align:left;background:#fff;cursor:pointer;color:#3d3026;font-size:12px}
.he-source-h31-bar button.is-unresolved{border-style:dashed;color:#806c5b}.he-source-h31-bar button.is-active{outline:2px solid #9d673e}
.he-source-h31-bar button span{display:block;font-size:10px;opacity:.75}

/* H3.1b: navigation in eight-event wheel windows; source bars remain complete. */
.he-source-h31-window{display:flex;justify-content:flex-start;align-items:center;gap:9px;margin:8px 0;font-size:12px;color:#624a38}
.he-source-h31-window[hidden]{display:none}
.he-source-h31-window button{border:1px solid #cdbda8;border-radius:7px;padding:5px 12px;background:#fff;color:#47392e;cursor:pointer}
.he-source-h31-window button:disabled{opacity:.4;cursor:default}
.he-source-h31-bar.is-in-window{border-color:#ae774c;box-shadow:0 0 0 1px #c29b78}
.he-source-h31-no-key{padding:36px 22px;text-align:center;border:1px dashed #ddc9b2;border-radius:12px;background:#fff9f1;color:#755e46;max-width:620px;margin:18px auto}

/* H3.1c: no inferred key may masquerade as a scale analysis. */
.he-wheel-h23-frame.is-keyless .he-wheel-h23-label.is-diatonic{color:inherit}
.he-source-h31-candidates{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:4px 0 8px;font-size:12px;color:#736653}
.he-source-h31-candidates button{border:1px solid #cdbda8;background:#fff;border-radius:7px;padding:5px 9px;color:#47392e;cursor:pointer}
.he-wheel-h31c-unknown{padding:20px;text-align:center;color:#755e46;border:1px dashed #ddc9b2;border-radius:10px;margin:12px auto;max-width:620px;background:#fff9f1}

.he-wheel-h23-frame.he-wheel-h31c-unknown{aspect-ratio:auto;min-height:90px;height:auto}

/* H3.1e: tonal context from authorised Viewer Harmony Intelligence event locators. */
.he-source-h31-follow{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 9px}
.he-source-h31-follow:empty{display:none}
.he-source-h31-follow button{border:1px solid #cdbda8;background:white;color:#493b30;border-radius:7px;padding:6px 10px;font-size:12px;cursor:pointer}
.he-source-h31-follow button.is-active{background:#493b30;border-color:#493b30;color:white}
.he-source-h31-bar button.has-local-key{border-left:3px solid #94643e}
.he-local-analysis{font-size:12px;color:#79583c;border-left:3px solid #ab7650;padding:6px 9px;background:#fff9f1;margin:8px 0}

/* H4: one time-aware progression surface shared by Circle, Grid and Progression. */
.he-timing-head{display:flex;justify-content:flex-end;margin:0 0 12px}.he-timing-head label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700}.he-timing-head select,.he-duration-select{border:1px solid #d8c9b9;border-radius:7px;padding:4px 6px;background:#fff;color:#433428;max-width:100%}
.he-progression-tile .he-duration-select{font-size:12px;margin-top:4px}.he-timing-caption{font-size:14px;margin:16px 0 8px}.he-timing-bars{display:flex;flex-wrap:wrap;gap:10px}.he-timing-bar{border:1px solid #cbb9a3;background:#fdf9f2;border-radius:8px;min-width:138px;min-height:68px;display:flex;flex-direction:column;flex:1 0 138px}.he-timing-bar small{font-size:11px;color:#796757;margin:5px 8px}.he-timing-events{display:flex;align-items:stretch;flex:1;gap:1px;padding:2px 5px 7px}.he-timing-event{font-size:12px;min-width:0;flex:1;text-align:center;border-radius:5px;background:#e9e0d3;padding:8px 4px;font-weight:750;overflow-wrap:anywhere}.he-timing-event small{display:block;font-size:10px;margin:2px 0 0}.he-timing-event.is-continue{background:#f5f0e7;color:#776c61;font-weight:400}.he-timing-status{color:#775a43;font-size:12px;margin:8px 0}.he-timing-status.is-error{color:#a33925;font-weight:650}.he-buttons button:disabled{opacity:.48;cursor:not-allowed}

/* H4.2: explicit view-key navigation; no semantic chord mutation or rotation of text at rest. */
.he-wheel-turn-h42{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 13px;margin-top:10px;border:1px solid #e7ded1;border-radius:12px;background:#fcf9f5;color:#604c3b;font-size:12px}
.he-wheel-turn-h42>strong{font-size:12px;font-weight:750}
.he-wheel-turn-h42-actions{display:flex;flex-wrap:wrap;gap:5px}
.he-wheel-turn-h42-actions button{background:#fff;border:1px solid #cdbba6;border-radius:8px;color:#49392d;font-size:12px;font-weight:700;padding:7px 9px;min-height:35px}
.he-wheel-turn-h42-actions button:hover{background:#efe4d4}
.he-wheel-turn-h42 output{font-weight:750;margin-left:auto;white-space:nowrap}
.he-wheel-turn-h42 output.is-unknown{color:#8c7460}
@media(max-width:500px){.he-wheel-turn-h42{align-items:flex-start}.he-wheel-turn-h42 output{margin-left:0}}

/* H4.3: explicit view-only switch and non-destructive transposition error. */
.he-turn-view-only{display:inline-flex;align-items:center;gap:6px;font-size:12px;cursor:pointer}.he-turn-view-only input{accent-color:#493b30}.he-transpose-error{color:#a33925;font-weight:650}.he-transpose-error:empty{display:none}.he-wheel-turn-h42-actions button:disabled{opacity:.5;cursor:wait}

/* H4.4 selectable physical Chords V2 voicings, responsive for all instrument profiles. */
.he-h44-profile{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;margin:8px 0}.he-h44-profile select{border:1px solid #d8c9b9;border-radius:7px;padding:7px;background:#fff;color:#433428;max-width:100%}.he-voicing-card.he-h44-choice{cursor:pointer;text-align:left}.he-voicing-card.he-h44-choice.is-chosen{outline:2px solid #795033;outline-offset:1px}.he-h44-note{color:#796757;font-size:11px;margin-top:8px}

/* H4.4a: true Dictionary fretboard / keyboard previews inside selectable cards. */
.he-h44-diagram{display:flex;align-items:center;justify-content:center;min-width:0;min-height:138px;margin:6px auto 0;overflow:hidden;border-radius:7px;background:#fff}
.he-h44-diagram canvas{display:block;max-width:100%;height:auto}
.he-h44-diagram .chord-piano-wrap{width:100%;display:flex;justify-content:center;overflow:hidden}
.he-voicing-card.he-h44-choice{display:flex;flex-direction:column;min-width:0;align-items:stretch;justify-content:flex-start}
.he-voicing-card.he-h44-choice .he-h44-diagram{width:100%}

/* H4.5: per-occurrence published voicings and optional global voice leading. */
.he-h45-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:9px 0 15px}
.he-h45-controls button{background:#47392e;color:#fff;border:1px solid #47392e;border-radius:8px;font-size:12px;padding:7px 10px;font-weight:700}
.he-h45-controls button.he-secondary{background:#fff;color:#47392e}
.he-h45-controls span{color:#725e4a;font-size:12px}
.he-progression-tile .he-h45-step-voicing{border:1px solid #d8c9b9;background:white;color:#433428;padding:4px 3px;border-radius:6px;width:100%;min-width:0;font-size:11px}
.he-progression-tile .he-h45-step-current{color:#7a614a;font-size:10px;min-height:14px}

/* H4.5a: inspect actual scheduled published voicing IDs and MIDI pitches. */
.he-h45-playback-status{font-size:12px;color:#604a37;line-height:1.5;overflow-wrap:anywhere;margin:8px 0}.he-h45-playback-status:empty{display:none}

/* H4.6: read-only full-section Grille preview, respecting canonical 'at' positions. */
.he-source-h31-bars.he-source-h46-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;overflow:visible;align-items:stretch;padding:9px 0}
.he-source-h46-grille .he-source-h31-bar{box-sizing:border-box;position:relative;display:block;min-width:0;max-width:none;min-height:124px;padding:0;border-radius:8px;background:#fafafa;border:1px solid #d0c6ba;overflow:hidden}
.he-source-h46-grille .he-source-h31-bar>small{position:absolute;top:5px;left:7px;z-index:2;font-size:11px;font-weight:700;color:#7a695a}
.he-source-h46-grille .he-source-h31-bar.he-source-h46-timed button{box-sizing:border-box;position:absolute;top:26px;bottom:5px;min-width:0;margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border:0;border-left:1px solid #dbd1c7;border-radius:0;background:#fff;font-size:clamp(11px,1vw,16px);font-weight:700;line-height:1.2;padding:5px 2px;overflow-wrap:anywhere}
.he-source-h46-grille .he-source-h31-bar.he-source-h46-timed button:first-of-type{border-left:0}
.he-source-h46-grille .he-source-h31-bar.he-source-h46-timed button span{font-size:10px;font-weight:400;opacity:.7}
.he-source-h46-grille .he-source-h31-bar button.is-active{outline:2px solid #9d673e;outline-offset:-2px;z-index:1;background:#fff9ef}
.he-source-h46-grille .he-source-h31-bar button.is-unresolved{border:1px dashed #b89b80;color:#766456}
.he-source-h46-grille .he-source-h31-bar.is-in-window{border-color:#ae774c;box-shadow:0 0 0 1px #c29b78}
.he-source-h46-grille .he-source-h46-empty{position:absolute;top:26px;bottom:5px;left:4px;right:4px;display:flex;align-items:center;justify-content:center;background:#fff;color:#a49a90}
.he-source-h46-grille .he-source-h46-untimed{min-height:124px;padding:25px 5px 5px;display:flex;flex-wrap:wrap;align-content:center;gap:3px}
.he-source-h46-grille .he-source-h46-untimed>small{top:5px}
.he-source-h46-grille .he-source-h46-untimed button{flex:1 0 38%;min-width:0;font-size:12px}
@media(max-width:760px){.he-source-h31-bars.he-source-h46-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.he-source-h31-bars.he-source-h46-grille{grid-template-columns:repeat(1,minmax(0,1fr))}}

.he-source-h46-grille .he-source-h31-bar button.has-local-key{border-left:3px solid #94643e}

/* H4.6a: repeat/continuation vs silence, display-only from canonical V2 events. */
.he-source-h46-grille .he-source-h46-empty,.he-source-h46-grille .he-source-h46-leading{color:#756654;font-weight:700}
.he-source-h46-grille .he-source-h46-leading{position:absolute;top:26px;bottom:5px;display:flex;align-items:center;justify-content:center;background:#f8f3eb;border-right:1px solid #d8cbbc;z-index:1;overflow:hidden}
.he-source-h46-grille .he-source-h46-empty svg,.he-source-h46-grille .he-source-h46-leading svg{display:block;width:30px;height:30px;max-width:70%}
.he-source-h46-grille .he-source-h46-rest-glyph{font-family:'Noto Music','Segoe UI Symbol',serif;font-size:32px;line-height:1}
.he-source-h46-grille .he-source-h31-bar.he-source-h46-timed .he-source-h46-rest-event{box-sizing:border-box;position:absolute;top:26px;bottom:5px;display:flex;align-items:center;justify-content:center;background:#fff8f5;color:#6e6258;font-family:'Noto Music','Segoe UI Symbol',serif;font-size:30px;border-left:1px solid #dbd1c7}
.he-source-h46-grille .he-source-h46-untimed .he-source-h46-rest-event{display:inline-flex;align-items:center;justify-content:center;flex:1 0 38%;font-family:'Noto Music','Segoe UI Symbol',serif;font-size:30px}

/* H4.7: published guitar/ukulele/cavaquinho/piano path previews via shared Chords V2 renderer. */
.he-h47-path-step{min-width:124px;max-width:210px;flex:1 1 138px;overflow:hidden}
.he-h47-path-preview{background:#fff;border-radius:7px;min-height:140px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-top:7px;color:#796757;font-size:11px}
.he-h47-path-preview canvas{display:block;max-width:100%;height:auto}
.he-h47-path-preview .chord-piano-wrap{display:flex;width:100%;justify-content:center;overflow:hidden}
.he-h47-path-card .he-voice-path-steps{align-items:stretch}

/* H4.7b: four real bar columns, not flex items that expand a lone last bar. */
.he-timing-bars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.he-timing-bar{min-width:0;flex:initial}
@media(max-width:760px){.he-timing-bars{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.he-timing-bars{grid-template-columns:minmax(0,1fr)}}

/* H4.8a transport UI and AudioContext-clock highlights. */
.he-h48-transport{align-items:center;flex-wrap:wrap;gap:8px}
.he-h48-transport label{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#604a37}
.he-h48-transport input{width:75px;max-width:100%;padding:7px;border:1px solid #cdbba6;border-radius:7px;background:#fff;color:#433428;font-size:14px}
.he-h48-transport output{font-size:12px;color:#604a37;min-width:90px}
.he-progression-tile.is-playing,.he-timing-bar.is-playing{outline:3px solid #ad6d35;outline-offset:1px;background:#fff2d9}
.he-h48-transport button:disabled{opacity:.45;cursor:not-allowed}

/* H5.1: curated, reversible working-copy Manouche approach variations. */
.he-h51-variations{border:1px solid #d7c4ad;border-radius:9px;padding:11px 14px;margin:12px 0;background:#faf7f1}
.he-h51-variations[hidden],.he-h51-variations button[hidden]{display:none}
.he-h51-variations h3{font-size:15px;margin:0 0 5px;color:#47392e}
.he-h51-variations p{font-size:12px;margin:0 0 10px;color:#725e4a}
.he-h51-options{display:flex;flex-wrap:wrap;gap:8px}
.he-h51-options button,.he-h51-variations>button{border:1px solid #bda488;border-radius:7px;background:#fff;color:#49392d;padding:8px 11px;cursor:pointer;font-weight:650;font-size:12px}
.he-h51-options button:hover,.he-h51-variations>button:hover{background:#efe4d4}
.he-h51-options small{display:block;margin-top:3px;font-size:11px;font-weight:400;color:#766353}
.he-h51-variations>button{margin-top:9px}


/* H5.3: optional non-destructive comparison alongside the existing Try/Restore flow. */
.he-h53-panel{border-top:1px solid #d7c4ad;padding-top:12px;margin-top:12px}
.he-h53-panel[hidden],#he-h53-start[hidden],.he-h53-slots button[hidden]{display:none}
.he-h53-panel h4{font-size:14px;margin:0 0 7px}
.he-h53-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.he-h53-slot{min-width:0;border:1px solid #bda488;border-radius:8px;background:#fff;color:#49392d;padding:10px;text-align:left;cursor:pointer}
.he-h53-slot strong,.he-h53-slot small{display:block;overflow-wrap:anywhere}
.he-h53-slot small{font-weight:400;margin-top:5px;color:#765e4a}
.he-h53-slot.is-selected{border:2px solid #493b30;background:#f4eade}
.he-h53-slot:disabled{opacity:.55;cursor:not-allowed}
.he-h53-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.he-h53-actions button,#he-h53-start{border:1px solid #bda488;border-radius:7px;background:white;color:#49392d;padding:8px 11px;cursor:pointer;font-weight:650;font-size:12px}
.he-h53-actions button:disabled{opacity:.5;cursor:not-allowed}
#he-h53-status{font-size:12px;min-height:1em}
@media(max-width:720px){.he-h53-slots{grid-template-columns:1fr}}

/* H5.3a: the compared audible sequence is also the visible read-only sequence. */
.he-h53-preview-status{font-size:12px;font-weight:700;color:#654329;margin:8px 0;padding:7px 10px;border-left:3px solid #94643e;background:#fff5e8}
.he-h53-preview-status[hidden]{display:none}
.he-h53-preview-tile{background:#fff9ef;border-style:dashed;cursor:default}
.he-h53-preview-duration{display:block;font-size:12px;color:#755c46;margin-top:8px}

/* H5.4: read-only physical bass/voice-motion details for H5.3 candidate slots. */
.he-h54-analysis{margin:12px 0 2px;border-top:1px solid #dfcebb;padding-top:10px;color:#49392d;font-size:12px}
.he-h54-analysis:empty{display:none}
.he-h54-analysis h4{margin:0 0 5px;font-size:14px}
.he-h54-note{margin:0 0 9px;color:#78624e;font-size:11px}
.he-h54-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.he-h54-cell{min-width:0;background:#fff;border:1px solid #decdbb;border-radius:7px;padding:9px}
.he-h54-cell strong,.he-h54-cell small{display:block;overflow-wrap:anywhere}
.he-h54-cell small{margin-top:5px;font-weight:400;line-height:1.4}
@media(max-width:720px){.he-h54-grid{grid-template-columns:1fr}}

/* H5.5: opt-in catalog-only Circle Composer, without changing Explore or source views. */
.he-h55-controls{border:1px solid #e6d9c9;background:#faf7f1;border-radius:9px;padding:8px 12px;margin:10px 0}
.he-h55-toggle,.he-h55-actions,.he-h55-chords{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.he-h55-toggle button,.he-h55-actions button,.he-h55-chords button{border:1px solid #c8b29a;background:white;color:#49392d;border-radius:7px;padding:7px 11px;font-weight:650;cursor:pointer}
.he-h55-toggle button.is-active{background:#49392d;color:white}
.he-h55-controls button:disabled,.he-h55-chords button:disabled{opacity:.45;cursor:not-allowed}
.he-h55-actions{margin-top:8px;font-size:12px;color:#765c43}
.he-h55-actions[hidden]{display:none}
.he-h55-choices{padding:12px;margin-top:10px;background:#fffaf3;border:1px solid #d6b895;border-radius:9px}
.he-h55-choices>strong{display:block;margin-bottom:9px;color:#49392d}
.he-h55-chords button:hover{background:#f0e4d4}
.he-progression-tile .he-h55-move{display:inline-block;border:1px solid #c8b29a;border-radius:5px;background:white;color:#49392d;font-size:13px;margin:3px;min-width:25px}

/* H5.5a: source-safe fresh Compose workspace in a separate tab. */
.he-h55-fresh-circle{display:inline-flex;align-items:center;border:1px solid #c8b29a;background:#fff;color:#49392d;border-radius:7px;padding:7px 11px;font-weight:650;font-size:12px;text-decoration:none;white-space:nowrap}
.he-h55-fresh-circle:hover{background:#f0e4d4}

/* H5.6: explicitly tentative, read-only key hypotheses for a custom working copy. */
.he-h56-panel{border:1px solid #e0d1be;background:#fcf8f1;border-radius:10px;padding:12px;margin:10px 0}
.he-h56-panel[hidden]{display:none}
.he-h56-panel h3{margin:0 0 5px;font-size:15px}
.he-h56-panel>p{font-size:12px;color:#765e4a;margin:0 0 9px}
.he-h56-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.he-h56-candidate{min-width:0;background:#fff;border:1px solid #d8c4ad;border-radius:8px;padding:10px}
.he-h56-candidate strong,.he-h56-candidate small{display:block;overflow-wrap:anywhere}
.he-h56-candidate small{font-size:11px;line-height:1.5;color:#665341;margin:5px 0}
.he-h56-candidate button{border:1px solid #bda488;background:#fff;color:#49392d;border-radius:7px;padding:7px 9px;margin-top:5px;font-weight:650;cursor:pointer}
.he-h56-candidate button:hover{background:#f0e4d4}
@media(max-width:750px){.he-h56-list{grid-template-columns:1fr}}

/* H5.6a: approved extended chord families without changing the Compose timeline. */
.he-h55-choices{display:flex;flex-direction:column}
.he-h55-choices>strong{order:0}
.he-h55-choices>.he-h56a-filters{order:1;display:flex;flex-direction:column;gap:8px;margin:3px 0 10px}
.he-h55-choices>.he-h55-chords{order:2}
.he-h56a-search{width:100%;max-width:340px;box-sizing:border-box;border:1px solid #c8b29a;border-radius:7px;background:#fff;color:#49392d;padding:8px 10px}
.he-h56a-tabs{display:flex;flex-wrap:wrap;gap:5px}
.he-h56a-tabs button{border:1px solid #c8b29a;border-radius:7px;background:#fff;color:#49392d;padding:6px 9px;font-size:12px;cursor:pointer}
.he-h56a-tabs button[aria-pressed="true"]{background:#49392d;color:#fff}
.he-h55-chords button[hidden]{display:none}

/* H5.7: catalog-only next-chord ideas; never mutate an unconfirmed key automatically. */
.he-h57-panel{border:1px solid #e0d1be;background:#fcf8f1;border-radius:10px;padding:12px;margin:10px 0}
.he-h57-panel[hidden]{display:none}
.he-h57-panel h3{margin:0 0 5px;font-size:15px}
.he-h57-panel>p{font-size:12px;color:#765e4a;margin:0 0 9px}
.he-h57-key{font-size:12px;color:#725e4a;margin:3px 0 10px}
.he-h57-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.he-h57-choice{min-width:0;border:1px solid #dac8b3;border-radius:8px;background:white;padding:10px}
.he-h57-choice strong,.he-h57-choice small{display:block;overflow-wrap:anywhere}
.he-h57-choice small{font-size:11px;line-height:1.45;color:#725e4a;margin:6px 0}
.he-h57-choice button{border:1px solid #bda488;border-radius:7px;background:white;color:#49392d;padding:7px 9px;cursor:pointer;font-weight:650}
.he-h57-choice button:hover{background:#efe4d4}
@media(max-width:820px){.he-h57-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.he-h57-list{grid-template-columns:1fr}}

/* H5.9a: read-only automatic phrases. Never edit source bar or event identity. */
.he-h59a-panel{margin:12px 0;border:1px solid #decbb6;border-radius:10px;background:#fcf8f1;padding:12px}
.he-h59a-panel[hidden]{display:none}.he-h59a-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.he-h59a-head h3{font-size:15px;margin:0}.he-h59a-head label{font-size:12px;display:flex;align-items:center;gap:8px}
.he-h59a-head select{border:1px solid #cdbba6;border-radius:7px;padding:6px;background:#fff}
.he-h59a-panel>p{font-size:12px;color:#755f49;margin:7px 0 10px}
.he-h59a-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}
.he-h59a-phrase{border:1px solid #dac8b3;background:#fff;border-radius:8px;padding:10px;min-width:0}
.he-h59a-phrase.is-selected{border:2px solid #795033;background:#f8eddd}
.he-h59a-phrase strong,.he-h59a-phrase small{display:block;overflow-wrap:anywhere}
.he-h59a-phrase small{font-size:11px;color:#755d47;line-height:1.5;margin:4px 0}
.he-h59a-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.he-h59a-actions button{border:1px solid #bda488;border-radius:7px;background:#fff;color:#49392d;padding:7px 10px;font-size:12px;font-weight:650;cursor:pointer}
.he-progression-tile.is-phrase-selected,.he-timing-bar.is-phrase-selected{box-shadow:inset 0 0 0 2px #be976f;background:#fff8ee}

/* H5.9b: apply an explicit published path; keep Undo visible after application. */
.he-h59b-apply,.he-h59b-undo{border:1px solid #bda488;border-radius:7px;background:#fff;color:#49392d;padding:8px 10px;font-size:12px;font-weight:700;cursor:pointer;margin:5px 0}
.he-h59b-apply:disabled{opacity:.5;cursor:not-allowed}
.he-h59b-undo[hidden]{display:none}

/* H5.9c: explicit phrase edit, separate from automatic grouping and source Grilles. */
.he-h59c-controls{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid #dac8b3}
.he-h59c-controls[hidden],.he-h59c-controls button[hidden],.he-h59c-controls label[hidden]{display:none}
.he-h59c-controls button,.he-h59c-controls select,.he-h59c-actions button,.he-h59c-name{border:1px solid #bda488;border-radius:7px;background:#fff;color:#49392d;padding:7px 9px;font-size:12px}
.he-h59c-controls label{font-size:12px;display:flex;align-items:center;gap:6px}
.he-h59c-controls button,.he-h59c-actions button{font-weight:650;cursor:pointer}
.he-h59c-controls button:disabled,.he-h59c-actions button:disabled{opacity:.48;cursor:not-allowed}
.he-h59c-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.he-h59c-name{width:100%;box-sizing:border-box;margin-top:8px}
.he-h59c-controls small{font-size:11px;color:#765e4a}

/* H6.3: a single genre navigator; the H6.1/H6.2 suggestion engines and DOM IDs stay intact. */
.he-h63-panel[hidden]{display:none}
.he-h63-panel>.he-h57-panel{margin:12px 0 0;padding:0;background:transparent;border:0;border-radius:0}
.he-h63-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 6px}
.he-h63-tabs button{border:1px solid #c8b29a;border-radius:8px;background:#fff;color:#49392d;padding:9px 13px;font-size:12px;font-weight:700;cursor:pointer}
.he-h63-tabs button[aria-pressed="true"]{color:#fff;background:#49392d;border-color:#49392d}
.he-h63-tabs button:focus-visible{outline:3px solid #a67849;outline-offset:2px}
.he-h63-panel[data-genre="manouche"] #he-h62-panel,
.he-h63-panel[data-genre="bossa"] #he-h61-panel,
.he-h63-panel[data-genre="samba"] #he-h61-panel{display:none}
.he-h63-panel #he-h62-panel label[for="he-h62-style"]{display:none}
@media(max-width:480px){.he-h63-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.he-h63-tabs button{padding:9px 5px;font-size:11px}}

/* U2: legacy genre tabs remain in DOM for compatibility, but are no longer a second visible style control. */
.he-h63-tabs[hidden]{display:none!important}

/* H6.4: independent A/B listening previews before the unchanged Append action. */
.he-h64-preview{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 8px}
.he-h64-preview button{font-size:11px;flex:1 1 98px;min-width:0}

/* H6.5: compact read-only A/B chord sequences plus optional real-voicing metrics. */
.he-h65-toggle,.he-h65-measure{border:1px solid #bda488;background:white;color:#49392d;border-radius:7px;padding:7px 9px;font-weight:650;font-size:11px;cursor:pointer;margin:4px 0}
.he-h65-comparison{border-top:1px solid #e6d9c9;margin:9px 0;padding:9px 0 2px;font-size:12px;min-width:0}
.he-h65-comparison[hidden]{display:none}
.he-h65-comparison>strong{display:block;margin-bottom:8px}
.he-h65-comparison>small,.he-h65-metrics>small{display:block;color:#765e4a;margin:5px 0;line-height:1.4}
.he-h65-path{margin:8px 0;min-width:0}
.he-h65-path>strong{display:block;margin-bottom:5px}
.he-h65-track{display:flex;flex-wrap:wrap;gap:5px}
.he-h65-chord{border:1px solid #d9c9b4;border-radius:5px;padding:5px 7px;background:#fff;font-size:12px;font-weight:650;overflow-wrap:anywhere}
.he-h65-chord.is-added{background:#e8f2e8;border-color:#9cb49c}
.he-h65-metrics{display:grid;gap:6px;margin:6px 0}
.he-h65-metric{background:#fff;border:1px solid #e0d2c2;border-radius:6px;padding:7px;min-width:0}
.he-h65-metric strong,.he-h65-metric small{display:block;overflow-wrap:anywhere}
.he-h65-metric small{margin-top:4px;line-height:1.4}
.he-h65-measure:disabled{opacity:.55;cursor:wait}

/* H6.17: optional transparent priority lens, no changes to existing engines. */
.he-h617-controls{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:10px 0 12px;padding:9px 12px;border:1px solid #e2d0b9;border-radius:8px;background:#fffaf4}
.he-h617-controls label{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;font-weight:700}
.he-h617-controls select{max-width:100%;border:1px solid #c8b29a;background:#fff;border-radius:7px;color:#49392d;padding:6px}
.he-h617-controls small{font-size:11px;color:#765e4a;line-height:1.4}
.he-h617-evidence{display:block;margin:6px 0;font-size:11px;color:#5b6446;font-weight:600;line-height:1.4}

/* H6.18: optional educational detail, separate from H6.17 factual evidence. */
.he-h618-intent{display:block;margin:6px 0;padding:6px 8px;border-left:3px solid #ab7650;background:#fff9f1;color:#6d513b;font-size:11px;line-height:1.5}

/* H6.19: opt-in read-only harmonic-function breadcrumb per existing route. */
.he-h619-map{margin:8px 0;padding:8px;border:1px solid #e3d2bf;background:#fffaf3;border-radius:7px;min-width:0}
.he-h619-label{display:block;font-size:11px;font-weight:700;color:#49392d;margin-bottom:7px}
.he-h619-track{display:flex;gap:5px;flex-wrap:wrap;align-items:stretch;min-width:0}
.he-h619-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px solid #cdbca7;border-radius:6px;padding:5px 7px;min-width:42px;max-width:100%;background:#fff;overflow-wrap:anywhere}
.he-h619-chip.is-proposed{background:#f0f6ed;border-color:#a8c19f}
.he-h619-chip strong{font-size:12px}.he-h619-chip small{font-size:11px;color:#79543d}
.he-h619-note{display:block;font-size:10px;color:#795c45;line-height:1.4;margin-top:6px}

/* H6.20: literal source evidence vs not-yet-appended chord proposals. */
.he-h620-evidence{display:grid;gap:5px;margin-top:8px;padding-top:7px;border-top:1px solid #e1d3c1}
.he-h620-item{display:block;border-left:3px solid #bdac98;padding:3px 6px;color:#624b37;font-size:10px;line-height:1.4}
.he-h620-item.is-working{border-color:#50785d;background:#f0f7f0}
.he-h620-item.is-proposed{border-color:#c18b55;background:#fff7ed}
.he-h620-caution{display:block;font-size:10px;color:#80614a;line-height:1.4}

/* H6.21: one opt-in, collapsed evidence history per active genre; no card duplication. */
.he-h621-history{border:1px solid #e0d2c2;border-radius:7px;background:#fffaf3;margin:9px 0;padding:8px 10px}
.he-h621-toggle{border:1px solid #c8b29a;border-radius:6px;background:#fff;color:#49392d;font-size:12px;font-weight:700;padding:7px 9px;cursor:pointer}
.he-h621-details{display:grid;gap:5px;margin-top:8px}
.he-h621-details[hidden]{display:none}
.he-h621-observed{font-size:11px;color:#4e664f;border-left:3px solid #50785d;padding:3px 7px;background:#f0f7f0;line-height:1.5}
.he-h621-note{font-size:10px;color:#80614a;line-height:1.5}

/* H6.22: source occurrence + exact H4 bar location; read-only explanatory text. */
.he-h622-position{display:block;font-size:10px;margin:2px 0 0;color:#5d4d3c;font-weight:600;line-height:1.4}

/* H6.23: history to progression/bar highlighting, display-only and reversible. */
.he-h623-jump{display:block;width:max-content;max-width:100%;margin:3px 0 8px 8px;border:1px solid #a0b89c;border-radius:6px;background:#fff;color:#365c3d;padding:5px 8px;font-size:11px;font-weight:650;cursor:pointer}
.he-h623-jump[aria-pressed="true"]{background:#deefdf;border-color:#527a59}
.he-progression-tile.is-h623-focused,.he-timing-bar.is-h623-focused{box-shadow:inset 0 0 0 3px #527a59;background:#eef7ee}

/* H6.24: local adjacent source context shown only while real route focus is active. */
.he-h624-context{margin:0 0 9px 8px;padding:7px 9px;border:1px solid #b7cbb3;border-radius:7px;background:#f3faf2;color:#365c3d;font-size:11px;max-width:100%;box-sizing:border-box}
.he-h624-context[hidden]{display:none}
.he-h624-context>strong{display:block;margin-bottom:6px}
.he-h624-track{display:flex;flex-wrap:wrap;gap:5px}
.he-h624-chord{border:1px solid #cdbca7;background:#fff;border-radius:5px;padding:4px 6px;overflow-wrap:anywhere}
.he-h624-chord.is-observed{border-color:#709776;background:#dceedd;font-weight:700}
.he-h624-context small{display:block;color:#63705f;margin-top:6px;line-height:1.45}

/* H6.25: factual H4 onset positions only for visible H6.24 context. */
.he-h625-positions{display:block;margin-top:8px;padding-top:7px;border-top:1px solid #c6d8c0;color:#345d39;line-height:1.6;overflow-wrap:anywhere}
.he-h625-summary{display:block;color:#56765c;font-style:italic}

/* H6.26: measured start-to-start spacing, only inside visible verified H6.24 focus. */
.he-h626-spacing{display:block;margin-top:7px;padding:5px 7px;border-left:3px solid #709776;background:#eaf5e8;color:#345d39;font-weight:700;line-height:1.5}
.he-h626-note{display:block;margin-top:3px;color:#63705f;line-height:1.45}

/* H6.28: two actual H4 bars, denominator-unit cells, only observed onsets marked. */
.he-h628-grid{display:block;margin-top:8px;padding:8px;border:1px solid #c7d5e4;border-radius:7px;background:#fafcff;color:#34506c}
.he-h628-grid>strong{display:block;font-size:11px;margin-bottom:6px}
.he-h628-row{display:flex;align-items:flex-start;flex-wrap:wrap;gap:5px;margin:5px 0}
.he-h628-row>strong{font-size:11px;min-width:47px;padding-top:7px}
.he-h628-units{display:grid;grid-template-columns:repeat(var(--h628-count,4),minmax(0,1fr));gap:3px;flex:1;min-width:0}
.he-h628-unit{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-width:0;min-height:34px;box-sizing:border-box;border:1px solid #d9e2ec;border-radius:5px;background:white;padding:5px 2px;overflow-wrap:anywhere;text-align:center}
.he-h628-unit small{font-size:10px;color:#627284}
.he-h628-unit strong{font-size:11px;line-height:1.2;color:#34506c}
.he-h628-unit.is-from,.he-h628-unit.is-to,.he-h628-unit.is-both{border-color:#6a8cae;background:#e5eff9}
.he-h628-unit.is-from strong,.he-h628-unit.is-to strong,.he-h628-unit.is-both strong{color:#284d71}
.he-h628-note{display:block;font-size:10px;line-height:1.4;color:#627284;margin-top:6px}
@media(max-width:480px){.he-h628-row{display:block}.he-h628-row>strong{display:block;padding:0 0 4px}.he-h628-units{gap:2px}.he-h628-unit{padding:4px 1px}.he-h628-unit strong{font-size:10px}}

/* H6.27: denominator-unit counts follow the verified H6.26 spacing, never audio beats. */
.he-h627-counts{display:block;margin-top:7px;padding:5px 7px;border-left:3px solid #8b9fbe;background:#f3f6fb;color:#34506c;font-weight:700;line-height:1.5}
.he-h627-note{display:block;margin-top:3px;color:#627284;line-height:1.45}

/* H6.29: compact key signatures INSIDE major sectors; no fourth ring or text rotation. */
.he-wheel-h23-major .he-h629-badge{display:block;margin-top:1px;font-size:clamp(9px,1.1vw,12px);font-weight:750;color:#805a35;line-height:1.1;white-space:nowrap;pointer-events:none}
.he-wheel-h23-major.is-selected .he-h629-badge{color:#fff0d9}
.he-h629-toggle{display:block;margin:-8px auto 11px;padding:6px 12px;border-radius:18px;border:1px solid #d8c7b4;background:#fff;color:#675543;font-size:12px;cursor:pointer}
.he-h629-toggle[aria-pressed="true"]{color:#fff;background:#47382e;border-color:#47382e}
.he-h629-detail{margin:10px auto 12px;padding:10px 13px;max-width:480px;border:1px solid #e2d0b9;border-radius:9px;background:#faf7f1;color:#47392e;font-size:12px;line-height:1.5}
.he-h629-detail strong{display:block;margin-bottom:4px}
.he-h629-detail p{margin:3px 0;overflow-wrap:anywhere}
@media(max-width:650px){.he-wheel-h23-major .he-h629-badge{font-size:clamp(8px,2vw,10px)}.he-h629-detail{font-size:11px}}

/* H6.30: read-only treble-staff signature previews, including optional enharmonic comparison. */
.he-h630-staffs{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.he-h630-staff{box-sizing:border-box;flex:1 1 210px;min-width:0;max-width:265px;background:#fff;border:1px solid #dccaaf;border-radius:7px;padding:7px}
.he-h630-staff strong{display:block;font-size:11px;margin-bottom:2px}
.he-h630-staff svg{display:block;width:100%;height:auto;max-width:265px}
.he-h630-note{flex-basis:100%;font-size:11px;color:#765e4a}

/* H6.31: written diatonic degrees belong to each notation (not chord identities). */
.he-h631-notes{margin-top:3px;border-top:1px solid #e7d7c3;padding-top:6px;min-width:0}
.he-h631-notes>small{display:block;font-size:10px;color:#755e46;margin-bottom:5px}
.he-h631-scale{padding:0;margin:0;list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.he-h631-scale li{min-width:0;text-align:center;border:1px solid #ebdfd0;border-radius:4px;background:#fcf8f2;padding:3px 0}
.he-h631-scale li:first-child{background:#f1e7d9;border-color:#cbb091}
.he-h631-scale small{display:block;font-size:9px;line-height:1.1;color:#876f58}
.he-h631-scale strong{display:block;font-size:clamp(10px,1vw,12px);line-height:1.5;overflow-wrap:anywhere}
.he-h631-scale strong.is-altered{color:#945a25}
@media(max-width:480px){.he-h631-scale strong{font-size:11px}}

/* H6.32: whole coloured wheel sectors are Compose click targets. */
.he-wheel-h23-frame.is-composing{cursor:pointer}

/* H6.36: read-only pitch-class change, only for selected adjacent working chords. */
.he-h636-transition{border:1px solid #ddcbb7;border-radius:8px;background:#faf7f1;color:#49392d;padding:10px 11px;margin:11px 0;font-size:12px;line-height:1.5}
.he-h636-transition>strong{display:block;margin-bottom:5px}.he-h636-transition p{margin:3px 0}.he-h636-transition small{display:block;color:#806c59;line-height:1.5;margin-top:7px}

/* H6.39: opt-in factual pitch-class transition map for the actual working progression. */
.he-h639-map{border:1px solid #decdbb;border-radius:9px;background:#fbf8f3;padding:9px 11px;margin:10px 0;font-size:12px}
.he-h639-map[hidden],.he-h639-list[hidden]{display:none}
.he-h639-map>button{border:1px solid #bda488;border-radius:7px;padding:7px 11px;background:#fff;color:#49392d;font-weight:700;cursor:pointer}
.he-h639-map>button:focus-visible,.he-h639-item:focus-visible{outline:3px solid #a67849;outline-offset:2px}
.he-h639-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:9px}
.he-h639-item{min-width:0;border:1px solid #d8c9b5;background:#fff;border-radius:7px;padding:9px;text-align:left;color:#49392d;cursor:pointer;line-height:1.4;overflow-wrap:anywhere}
.he-h639-item:hover{background:#f7efdf}.he-h639-item strong,.he-h639-item span,.he-h639-item small{display:block}
.he-h639-item strong{margin-bottom:5px}.he-h639-item span{margin:3px 0}.he-h639-item small{color:#796757;margin-top:6px}
@media(max-width:660px){.he-h639-list{grid-template-columns:minmax(0,1fr)}}

/* H6.40: optional physical-voicing pitch motion. Read-only and not a fingering model. */
.he-h640-motion{border:1px solid #c9d8cb;border-radius:9px;background:#f6faf6;padding:9px 11px;margin:10px 0;font-size:12px;color:#37543e}
.he-h640-motion[hidden],.he-h640-results[hidden]{display:none}
.he-h640-motion>button{border:1px solid #97b09b;border-radius:7px;padding:7px 11px;background:#fff;color:#37543e;font-weight:700;cursor:pointer}
.he-h640-motion>button:focus-visible{outline:3px solid #729c78;outline-offset:2px}
.he-h640-results{display:grid;gap:8px;margin-top:10px}
.he-h640-results>p{margin:2px 0;color:#4f6b55;line-height:1.5}
.he-h640-item{background:#fff;border:1px solid #cbddcf;border-radius:7px;padding:9px;min-width:0;overflow-wrap:anywhere}
.he-h640-item>strong,.he-h640-item>small{display:block}.he-h640-item>small{margin-top:6px;color:#5b7460;line-height:1.5}
.he-h640-item p{margin:5px 0;line-height:1.5}
.he-h640-pairs{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.he-h640-pair{border:1px solid #d6e3d6;border-radius:6px;padding:5px 7px;background:#f7faf5;white-space:nowrap}
.he-h640-pair.is-hold{background:#e9f6e9;border-color:#a5c8a5}
.he-h640-pair.is-up,.he-h640-pair.is-down{background:#f3f6fa}

/* H6.41: opt-in read-only pitch-height SVG; connecting lines are explicitly estimates. */
.he-h641-controls{display:flex;gap:7px;flex-wrap:wrap;margin:2px 0 8px}
.he-h641-controls button{border:1px solid #97b09b;border-radius:7px;background:#fff;color:#37543e;padding:7px 10px;font-size:12px;font-weight:700;cursor:pointer}
.he-h641-controls button[aria-pressed="true"]{background:#dfeee1;border-color:#648a6c}
.he-h641-controls button:disabled{opacity:.45;cursor:not-allowed}
.he-h641-controls button:focus-visible{outline:3px solid #729c78;outline-offset:2px}
.he-h641-summary{background:#eef6ef;border-left:3px solid #729c78;padding:7px 9px;overflow-wrap:anywhere}
.he-h641-graphic{margin:12px 0 2px;min-width:0;max-width:100%;border:1px solid #d8e2d6;border-radius:8px;padding:8px;background:#fbfdfa;box-sizing:border-box}
.he-h641-svg{display:block;width:100%;height:auto;max-height:610px}
.he-h641-head{fill:#35543d;font-size:13px;font-weight:700}
.he-h641-note{fill:#293f33;font-size:12px;font-weight:650}
.he-h641-guide{stroke:#c6d5c6;stroke-width:1;stroke-dasharray:2 5}
.he-h641-octave{fill:#6b806e;font-size:10px}
.he-h641-connection{fill:none;stroke-width:2.5;stroke-dasharray:5 3;opacity:.84}
.he-h641-connection.is-hold{stroke:#2c8652;stroke-dasharray:none}
.he-h641-connection.is-up{stroke:#af6b27}
.he-h641-connection.is-down{stroke:#536eaf}
.he-h641-point{stroke:#fff;stroke-width:1.5}
.he-h641-point.is-from{fill:#536eaf}.he-h641-point.is-to{fill:#af6b27}
.he-h641-graphic figcaption{color:#5b7460;font-size:11px;line-height:1.5;margin-top:6px}
.he-h641-proposal{border-top:1px solid #d8e2d6;margin-top:12px;padding-top:10px}
.he-h641-proposal>strong{display:block;color:#37543e;font-size:12px}
.he-h641-intervals{font-size:11px;color:#49634f;line-height:1.5;margin:6px 0 0;overflow-wrap:anywhere}

/* H6.42: focus one large pitch diagram; all factual text rows remain available. */
.he-h641-graphic[hidden],.he-h641-proposal[hidden]{display:none}
.he-h642-focus{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#37543e}
.he-h642-focus select{max-width:min(100%,340px);border:1px solid #97b09b;border-radius:7px;padding:7px;background:#fff;color:#37543e}
.he-h640-item.is-h642-focused{border-color:#729c78;box-shadow:inset 3px 0 #729c78}
@media(max-width:520px){.he-h642-focus{flex:1 1 100%;flex-wrap:wrap}.he-h642-focus select{width:100%;max-width:100%}}

/* H6.43: exact shared MIDI pitches even when voice counts differ (not voice pairing). */
.he-h643-exact-shared{stroke:#2c8652;stroke-width:2.7;stroke-dasharray:none;opacity:.9}
.he-h641-point.is-h643-shared{stroke:#2c8652;stroke-width:2.6}

/* H6.44: exact MIDI multiset inventory, not an inferred voice path. */
.he-h644-inventory{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 2px;font-size:11px;line-height:1.5}
.he-h644-group{display:flex;gap:5px;align-items:baseline;flex:1 1 160px;min-width:0;padding:5px 7px;border:1px solid #d8e2d6;border-radius:6px;background:#fff;overflow-wrap:anywhere}
.he-h644-group strong{white-space:nowrap}
.he-h644-group.is-shared{border-color:#a4c9af;background:#eff8f0;color:#29633e}
.he-h644-group.is-leaving{border-color:#c1cee4;background:#f3f6fc;color:#375c9c}
.he-h644-group.is-arriving{border-color:#e1c5a6;background:#fff7ed;color:#905820}

/* H6.45: directional, curated functional map. Legacy sector geometry is retained only for Compose. */
.he-wheel-h23-frame.he-h645-flow{aspect-ratio:auto;width:100%;max-width:none;min-height:0}
.he-wheel-h23-frame.he-h645-flow>:not(.he-h645-flowmap){display:none!important}
.he-h645-flowmap{display:block;position:relative;width:100%;box-sizing:border-box;border:1px solid #dfd3c6;border-radius:12px;background:#fffaf5;padding:12px;color:#433428}
.he-h645-intro{font-size:12px;line-height:1.5;margin:0 0 10px;color:#6b5542}
.he-h645-groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.he-h645-group{display:flex;flex-direction:column;gap:6px;min-width:0;padding:9px;border:1px solid #e0d4c4;border-radius:8px;background:#fff}
.he-h645-group h3{font-size:12px;line-height:1.35;margin:0 0 3px}
.he-h645-group>small{font-size:11px;color:#77695b;line-height:1.4}
.he-h645-tonic{background:#edf6ed;border-color:#bdd6c1}.he-h645-predominant{background:#fbf4e4;border-color:#e4d6ac}.he-h645-dominant{background:#fcf0ed;border-color:#e7c6ba}
.he-h645-chord{display:flex;flex-direction:column;align-items:flex-start;min-width:0;gap:2px;border:1px solid #cdbba6;border-radius:7px;background:#fff;padding:7px 8px;color:#433428;cursor:pointer;text-align:left}
.he-h645-chord small{color:#795e44;font-size:11px}.he-h645-chord strong{font-size:14px;overflow-wrap:anywhere}
.he-h645-chord.is-selected{border-color:#62412b;background:#f3e5d1;box-shadow:inset 3px 0 #62412b}
.he-h645-chord:focus-visible,.he-h645-route:focus-visible{outline:3px solid #a67849;outline-offset:2px}
.he-h645-route-heading{font-size:13px;margin:13px 0 7px}
.he-h645-routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:8px}
.he-h645-route{display:flex;flex-direction:column;gap:5px;align-items:flex-start;text-align:left;border:1px solid #cdbba6;border-radius:8px;background:#fff;padding:10px;color:#433428;cursor:pointer}
.he-h645-route.is-current{border-color:#648a6c;box-shadow:inset 3px 0 #648a6c;background:#f2f8f1}
.he-h645-route strong{font-size:12px;line-height:1.4}.he-h645-route small{font-size:11px;line-height:1.45;color:#725b46}
.he-h645-route .he-h645-route-action{color:#25633e;font-weight:700}
.he-h645-caution{margin:11px 0 0;font-size:11px;color:#83523e;border-left:3px solid #bd865f;padding:6px 9px;background:#fff4e9;line-height:1.5}
@media(max-width:650px){.he-h645-groups{grid-template-columns:repeat(2,minmax(0,1fr))}.he-h645-group{padding:7px}.he-h645-chord strong{font-size:12px}}
@media(max-width:380px){.he-h645-groups{grid-template-columns:1fr}}

/* H6.45a: directional graph uses only reviewed H2.5 edges, not a four-column classification table. */
.he-h645-mapviewport{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;border:1px solid #e5d7c6;border-radius:10px;background:radial-gradient(ellipse at 50% 45%,#fff 8%,#faf6ef 100%)}
.he-h645-mapstage{position:relative;width:100%;min-width:560px;aspect-ratio:900/475}
.he-h645-arrows{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
.he-h645-edge{fill:none;stroke:#7d866f;stroke-width:3.5;stroke-linecap:round;opacity:.85}
.he-h645-arrowhead{fill:#607e67}
.he-h645-edge-hit{stroke:transparent;stroke-width:22;fill:none;pointer-events:stroke;cursor:pointer}
.he-h645-edge-hit:focus{stroke:#d3e9cd;stroke-width:16;outline:none}
.he-h645-stage-label{position:absolute;transform:translate(-50%,-50%);font-size:clamp(10px,1.3vw,14px);color:#51463b;letter-spacing:.03em;white-space:nowrap;pointer-events:none}
.he-h645-node{position:absolute;z-index:2;transform:translate(-50%,-50%);width:clamp(90px,17%,150px);min-height:58px;align-items:center;text-align:center;box-shadow:0 3px 12px #392f2110}
.he-h645-node.he-h645-tonic{background:#e5f1e5;border-color:#7fa98b}
.he-h645-node.he-h645-predominant{background:#fbf2df;border-color:#c4a974}
.he-h645-node.he-h645-dominant{background:#fae9e5;border-color:#c98e80}
.he-h645-node:focus-visible,.he-h645-outside-chord:focus-visible{outline:3px solid #94643e;outline-offset:2px}
.he-h645-node.is-selected{border-width:2px;box-shadow:0 0 0 2px #a96d43}
.he-h645-map-hint{font-size:11px;color:#6d6256;margin:9px 0;line-height:1.5}
.he-h645-outside{border-top:1px solid #e4d8ca;margin-top:10px;padding-top:10px}
.he-h645-outside>strong{font-size:12px;color:#6b5a4a}
.he-h645-outside-chords{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.he-h645-outside-chord{border:1px solid #d7cabc;background:#fff;color:#594a3c;border-radius:7px;padding:7px 10px;font-size:12px;cursor:pointer}
.he-h645-outside-chord.is-selected{background:#f4e7d6;border-color:#9a6b41}
.he-h645-route-heading{margin:13px 0 6px;font-size:12px}
.he-h645-routes{display:flex;flex-wrap:wrap;gap:6px}
.he-h645-route{display:flex;flex:0 1 auto;flex-direction:row;align-items:center;gap:7px;border-radius:7px;padding:7px 10px}
.he-h645-route strong{font-size:12px;white-space:nowrap}
.he-h645-route small{font-size:11px}
@media(max-width:600px){.he-h645-flowmap{padding:9px}.he-h645-map-hint{font-size:10px}.he-h645-route{flex-wrap:wrap}}

/* H6.46: compact Explore workspace, full Compose/source/A-B preserved. */
.he-progress-panel.is-h646-compact>:not(.he-progress-head):not(.he-h646-summary){display:none!important}
.he-progress-panel.is-h646-compact .he-progress-head{margin-bottom:7px}
.he-h646-toggle{border:1px solid #c8b29a;border-radius:8px;background:#fff;color:#49392d;padding:8px 11px;font-size:12px;font-weight:700;cursor:pointer}
.he-h646-toggle[hidden],.he-h646-summary[hidden]{display:none}
.he-h646-summary{font-size:12px;line-height:1.5;color:#705a48;margin:7px 0 2px;overflow-wrap:anywhere}
.he-h646-focus{min-width:0}.he-h646-focus h2{font-size:18px;margin:0 0 8px}
.he-h646-focus>p{font-size:12px;color:#736151;line-height:1.5;margin:5px 0 12px}
.he-h646-focus .he-h646-bars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.he-h646-bar{border:1px solid #d9c8b3;border-radius:8px;background:#fbf7f0;min-width:0;padding:6px;box-sizing:border-box}
.he-h646-bar>small{display:block;font-size:11px;color:#7b6958;margin:0 0 6px}
.he-h646-track{position:relative;height:58px;background:repeating-linear-gradient(90deg,#f1ebe3 0,#f1ebe3 1px,#fff 1px,#fff 25%);border-radius:5px;overflow:hidden}
.he-h646-event{box-sizing:border-box;position:absolute;top:3px;bottom:3px;border:1px solid #a8c39e;border-radius:5px;background:#e7f0e4;color:#35523a;font-weight:700;font-size:11px;padding:7px 2px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.he-h646-event.is-hold{background:#f0ece5;border-color:#c6b7a7;color:#796c5c;border-style:dashed}
.he-h646-event.is-rest{background:#f5e7e4;border-color:#d4b1aa;color:#76534d}
.he-h646-event.is-unresolved{background:#f4f0e8;border-color:#cbbfb0;color:#746452}
button.he-h646-event{cursor:pointer}.he-h646-event:focus-visible{outline:3px solid #966b4c;outline-offset:-2px}
.he-h646-open{border:1px solid #bda488;border-radius:7px;background:#fff;color:#49392d;font-weight:700;padding:8px 11px;margin-top:12px;cursor:pointer}
.he-h645-flowmap .he-wheel-h25-lens{margin:12px 0 0;padding:10px;border:1px solid #dbcbb7;border-radius:8px;background:#fff}
@media(max-width:700px){.he-h646-focus .he-h646-bars{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:430px){.he-h646-focus .he-h646-bars{grid-template-columns:1fr}.he-progress-head{gap:9px;flex-wrap:wrap}}

/* H6.47: read-only diatonic pitch-class comparison; no new harmonic inference. */
.he-h647-choices .he-chord-tile{gap:5px;min-height:108px;padding:10px 5px}
.he-h647-chord-notes{font-size:11px;color:#6d5b48;overflow-wrap:anywhere}
.he-h647-role{font-size:10px;color:#3c6046;background:#eef7ee;border-radius:12px;padding:2px 8px}
.he-h647-note{font-size:12px;color:#755e4b;line-height:1.5;margin:16px 0 8px}
.he-h647-scroll{overflow-x:auto;max-width:100%;border:1px solid #d7c6b4;border-radius:9px;padding:9px;background:#fbf9f4}
.he-h647-scroll:focus-visible{outline:2px solid #976c4a}
.he-h647-matrix{display:grid;grid-template-columns:132px repeat(7,minmax(55px,1fr));gap:5px;min-width:590px;align-items:stretch}
.he-h647-axis{display:flex;align-items:center;justify-content:center;font-size:11px;color:#644c38;font-weight:750;text-align:center;min-height:34px}
.he-h647-rowhead{justify-content:flex-start;padding-left:6px;overflow-wrap:anywhere}
.he-h647-cell{border:1px solid #d7c5b1;background:#fff;color:#3b332d;border-radius:6px;font-weight:700;cursor:pointer;min-height:34px}
.he-h647-cell:hover,.he-h647-cell:focus-visible{border-color:#926540;background:#f7ebd9}
.he-h647-cell.is-self{background:#eee8df;color:#706659}
.he-h647-cell.is-selected{background:#42694e;color:#fff;border-color:#42694e;outline:2px solid #9bb9a2;outline-offset:1px}
.he-h647-detail{border:1px solid #b7cbb5;border-radius:9px;background:#f5faf4;padding:12px;margin-top:10px;color:#36523d;font-size:12px}
.he-h647-detail>strong{display:block;font-size:15px;margin-bottom:7px}
.he-h647-detail p{margin:4px 0;line-height:1.5}
.he-h647-common{color:#26623b}.he-h647-removed{color:#415e98}.he-h647-added{color:#955e27}
.he-h647-hear{margin:8px 0;border:1px solid #a2bba3;border-radius:7px;background:#fff;color:#36523d;padding:8px 11px;font-size:12px;font-weight:700;cursor:pointer}
.he-h647-detail small{display:block;color:#667563;line-height:1.5}
@media(max-width:600px){.he-h647-choices{grid-template-columns:repeat(2,minmax(0,1fr))}.he-h647-matrix{min-width:590px}}

/* H6.48: consistent degree names and *typical* families, separate from reviewed routes. */
.he-h648-degree-name{font-size:11px;color:#725e4a}
.he-h648-family-tonic,.he-h648-family-tonic-related{background:#e8f3e9;border-color:#9dbfa5}
.he-h648-family-predominant{background:#fcf3de;border-color:#dec895}
.he-h648-family-dominant,.he-h648-family-dominant-related{background:#f9eae5;border-color:#ddb3a7}
.he-h648-family-contextual{background:#f3f0ee;border-color:#cfc9c6}
.he-h648-family-caution,.he-h648-pair-family{font-size:11px;color:#685746;line-height:1.6}
.he-h648-wrap>h2{font-size:21px;margin:5px 0 12px}
.he-h648-controls{display:flex;flex-wrap:wrap;gap:7px}
.he-h648-controls button{padding:8px 10px;border:1px solid #c8b29a;border-radius:8px;background:white;color:#49392d;font-weight:700;cursor:pointer}
.he-h648-controls button[aria-pressed="true"]{background:#49392d;color:white}
.he-h648-controls button:focus-visible,.he-h648-pair-choices select:focus-visible{outline:3px solid #a67849;outline-offset:2px}
.he-h648-network .he-network-node{z-index:1}
.he-h648-network .he-network-lines{pointer-events:none}
.he-h648-reviewed-line{stroke:#608267;stroke-width:3.5;opacity:.8;marker-end:none}
.he-h648-common-line{stroke:#a07854;opacity:.55;stroke-dasharray:6 5}
.he-h648-edge-hit{stroke:transparent;stroke-width:17;pointer-events:stroke;cursor:pointer}
.he-h648-edge-hit:focus{stroke:#dac7a5;stroke-width:12;outline:none}
.he-h648-detail{border:1px solid #d8c5b0;border-radius:9px;padding:12px;background:#fbf8f3;margin:12px 0;font-size:12px;color:#514435;line-height:1.5}
.he-h648-detail>strong{font-size:15px}.he-h648-detail p{margin:6px 0}
.he-h648-pair-choices{margin-top:9px}.he-h648-pair-choices select{margin-left:6px;padding:6px;border:1px solid #c8b29a;border-radius:7px;background:white}
@media(max-width:500px){.he-h648-controls button{flex:1 1 120px}.he-h648-network .he-network-node{min-width:51px}}

/* H6.50: actual working sequence is visible separately from curated H2.5 routes. */
.he-h650-working{border:1px solid #c8d8c6;background:#f6fbf5;border-radius:9px;padding:10px;margin:11px 0 13px;min-width:0}
.he-h650-working>strong{font-size:12px;color:#31513a;letter-spacing:.02em}
.he-h650-track{display:flex;align-items:center;gap:5px;flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding:3px 2px 7px;margin:9px 0}
.he-h650-step{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:71px;max-width:145px;border:1px solid #a9c4ab;border-radius:7px;background:white;color:#31513a;padding:6px 8px;text-align:center;cursor:pointer;flex:0 0 auto}
.he-h650-step strong{font-size:14px;overflow-wrap:anywhere}.he-h650-step small{font-size:10px;color:#55735a;line-height:1.4}
.he-h650-step.is-active{border:2px solid #326e46;background:#e0f2e2;box-shadow:0 0 0 2px #b0d4b5}
.he-h650-step:focus-visible{outline:3px solid #678f6f;outline-offset:2px}
.he-h650-link{color:#8c7d6e;font-size:18px;font-weight:650}.he-h650-link.is-reviewed{color:#238150}
.he-h650-working p,.he-h650-empty{font-size:11px;line-height:1.5;color:#56715b;margin:4px 0}
.he-h650-empty{padding:8px 10px;background:#fff7ee;border-left:3px solid #b99e77}
.he-h645-node.is-h650-used,.he-h645-outside-chord.is-h650-used{box-shadow:inset 0 0 0 2px #6a9c78}
.he-h645-node.is-h650-current,.he-h645-outside-chord.is-h650-current{outline:3px solid #307848;outline-offset:3px}
.he-h650-count{font-size:10px!important;color:#245e3b!important;font-weight:700}

/* H6.51: observed progression is the primary functional visualization. */
.he-h651-observed{border:1px solid #c8d8c6;background:#fbfdf9;border-radius:9px;padding:13px;margin:5px 0}
.he-h651-observed h3{margin:0 0 6px;font-size:16px;color:#31513a}
.he-h651-context,.he-h651-caution{font-size:11px;color:#637363;line-height:1.6;margin:5px 0 11px}
.he-h651-track{display:flex;align-items:stretch;gap:6px;overflow-x:auto;padding:6px 2px 10px}
.he-h651-chord{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;flex:1 0 112px;min-width:0;max-width:170px;min-height:94px;padding:9px;border:1px solid #c5c9c4;border-radius:9px;background:#fff;color:#413c35;text-align:center;cursor:pointer}
.he-h651-chord strong{font-size:17px;overflow-wrap:anywhere}.he-h651-chord small{font-size:11px;line-height:1.35}
.he-h651-chord.he-h651-tonic{background:#e8f4e8;border-color:#8db49a}
.he-h651-chord.he-h651-predominant{background:#fcf4e4;border-color:#c9b17e}
.he-h651-chord.he-h651-dominant,.he-h651-chord.he-h651-secondary{background:#fbede8;border-color:#cb9b88}
.he-h651-chord.is-active{outline:3px solid #4d845a;outline-offset:1px}
.he-h651-chord:focus-visible{outline:3px solid #497451;outline-offset:2px}
.he-h651-arrow{align-self:center;font-size:25px;font-weight:700;color:#a89b8d}.he-h651-arrow.is-recognized{color:#347c50}
.he-h651-evidence{border-top:1px solid #d9e4d9;padding-top:9px;display:grid;gap:6px}
.he-h651-evidence p{margin:0;border-left:3px solid #c9c1b8;background:#f8f7f4;padding:8px 10px;font-size:12px;line-height:1.5}
.he-h651-evidence p.is-recognized{background:#f0f8f0;border-color:#52946b}
.he-h651-evidence p.is-cadence{background:#f6f2e6;border-color:#b18c48;font-weight:700}
@media(max-width:650px){.he-h651-observed{padding:9px}.he-h651-chord{flex-basis:108px}.he-h651-track{gap:4px}}
.he-h651-reference{margin:14px 0 0;border-top:1px solid #d8c7b6;padding-top:10px}
.he-h651-reference>summary{cursor:pointer;font-weight:700;color:#614732;font-size:12px;padding:8px 4px}
.he-h651-reference>summary:focus-visible{outline:2px solid #94643e}
.he-h651-reference>.he-h645-flowmap{margin-top:9px}

/* H6.52: degree-related and contextual roles are distinct from T/PD/D and proven cadences. */
.he-h651-chord.he-h651-related{background:#f0f5ef;border-color:#a7bfa6}
.he-h651-chord.he-h651-contextual{background:#f7f5f1;border-color:#c6bfb1}

/* H6.55: the actual functional map owns the progression; Inspector height must
   not stretch a short observed-analysis panel. Other views retain their layout. */
.he-workspace:has(.he-h651-observed){align-items:start}
.he-workspace:has(.he-h651-observed) .he-main-panel,
.he-workspace:has(.he-h651-observed) .he-canvas{min-height:0}

/* U3: one examples library in Compose; hide the redundant standalone H2 paths.
   The old path DOM/JS remains available for backwards-compatible test contracts. */
#he-path-panel{display:none!important}
.he-progress-panel:not(.he-u3-compose) .he-progress-head label{display:none!important}

/* U4: the H5.7 single-chord and H6.x phrase engines share ONE recommendation surface.
   Their internal DOM and click guards are retained; only the active branch is displayed. */
.he-u4-suggestions{border:1px solid #e0d1be;background:#fcf8f1;border-radius:10px;padding:13px;margin:10px 0 15px}
.he-u4-suggestions[hidden]{display:none!important}
.he-u4-suggestions>h2{font-size:18px;margin:0 0 6px;color:#49392d}
.he-u4-hint{font-size:12px;color:#725e4a;line-height:1.5;margin:0 0 10px}
.he-u4-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.he-u4-tabs button{border:1px solid #bda488;border-radius:7px;background:#fff;color:#49392d;padding:8px 12px;font-size:12px;font-weight:700;cursor:pointer}
.he-u4-tabs button[aria-pressed="true"]{background:#49392d;color:#fff;border-color:#49392d}
.he-u4-tabs button:disabled{opacity:.43;cursor:not-allowed}
.he-u4-tabs button:focus-visible{outline:3px solid #a67849;outline-offset:2px}
.he-u4-suggestions #he-h57-panel,.he-u4-suggestions #he-h63-panel{border:0;background:transparent;padding:0;margin:0}
.he-u4-suggestions #he-h57-panel>h3,.he-u4-suggestions #he-h63-panel>h3{display:none}
.he-u4-suggestions[data-active="chord"] #he-h63-panel,
.he-u4-suggestions[data-active="phrase"] #he-h57-panel{display:none!important}
@media(max-width:480px){.he-u4-suggestions{padding:9px}.he-u4-tabs button{flex:1 1 125px}}

/* U5: Compose owns the H4 timeline; source Grilles keep their read-only navigation. */
.he-tab[hidden]{display:none!important}
#he-u5-timeline[aria-pressed="true"]{background:#49392d;color:white;border-color:#49392d}
#he-u5-timeline:focus-visible{outline:3px solid #a67849;outline-offset:2px}

/* U8d: actual source Grid/Network only. The seven-degree Compose views keep their styles. */
.he-u8d-network .he-network-lines{pointer-events:auto}
.he-u8d-network .he-u8d-edge-hit{pointer-events:stroke;cursor:pointer}
.he-u8d-network .he-u8d-edge-hit:focus-visible{stroke:#e6c397;stroke-width:15;outline:none}
.he-u8d-network .he-u8d-source-node{z-index:2}
.he-u8d-matrix .he-h647-cell.is-unobserved{background:#f5f2ed;color:#a99e92;border-color:#ece5dc;cursor:default;opacity:.72}
.he-h647-detail .he-u8d-source-ref{display:block;margin:4px 0 8px;overflow-wrap:anywhere;font-size:11px;color:#617360}

/* U8e: actual source event inside the highlighted source bar. */
.he-timing-bar .he-timing-event.is-playing{background:#c7e8cd;color:#204b2e;border:2px solid #4f8660}

/* U8h: scale membership != observed/source-supported harmonic function.
   Selected edges keep their existing selection styling. Source-only semantics. */
.he-wheel-h23-chip.he-u8h-diatonic{background:#edf4e9;border-color:#95b69d}
.he-wheel-h23-chip.he-u8h-functional{background:#fff0dc;border-color:#d3a266}
.he-wheel-h23-chip.he-u8h-outside,.he-wheel-h23-chip.he-u8h-keyless{background:#f2f0ed;border-color:#bdb8b1}
.he-u8h-status-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:7px 15px;margin:8px 0;font-size:11px;color:#65574a}
.he-u8h-status-legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;border:1px solid #95b69d;background:#edf4e9}
.he-u8h-status-legend .he-u8h-functional::before{background:#fff0dc;border-color:#d3a266}
.he-u8h-status-legend .he-u8h-outside::before{background:#f2f0ed;border-color:#bdb8b1}
.he-u8h-inspector{padding:7px 10px;border-radius:6px;font-size:12px;line-height:1.5;margin:7px 0;border-left:3px solid #95b69d;background:#edf4e9;color:#365a3b}
.he-u8h-inspector.he-u8h-functional{background:#fff2e2;border-color:#c58c43;color:#73502e}
.he-u8h-inspector.he-u8h-outside,.he-u8h-inspector.he-u8h-keyless{background:#f2f0ed;border-color:#a5a099;color:#625c55}
.he-u8d-source-node.he-u8h-diatonic,.he-u8h-matrix-head.he-u8h-diatonic{border-color:#95b69d;background:#edf4e9}
.he-u8d-source-node.he-u8h-functional{border-color:#d3a266;background:#fff0dc}
.he-u8d-source-node.he-u8h-outside,.he-u8d-source-node.he-u8h-mixed,.he-u8d-source-node.he-u8h-keyless{border-color:#bdb8b1;background:#f2f0ed}
.he-u8d-matrix .he-h647-axis.he-u8h-diatonic{color:#365a3b}
.he-u8d-matrix .he-h647-axis.he-u8h-functional{color:#905c26}
.he-u8d-matrix .he-h647-axis.he-u8h-outside,.he-u8d-matrix .he-h647-axis.he-u8h-mixed{color:#71685e}
.he-h651-chord.he-u8h-diatonic{background:#edf4e9;border-color:#95b69d}
.he-h651-chord.he-u8h-functional{background:#fff0dc;border-color:#d3a266}
.he-h651-chord.he-u8h-outside,.he-h651-chord.he-u8h-keyless{background:#f2f0ed;border-color:#bdb8b1}
.he-h651-arrow.is-break{color:#9e9489;font-size:20px;opacity:.8}

.he-wheel-h23-segment.he-u8h-functional-path{stroke:#ca9656;stroke-width:2.3}
.he-wheel-h23-label.he-u8h-functional-path:not(.is-selected){outline:2px solid #d3a266;background:#fff0dc}

/* U8j: source-only tonal context, with explicitly opt-in reference comparison. */
.he-u8j-source-tools{border:1px solid #e4ded7;background:#fcf9f5;border-radius:12px;padding:12px 14px;margin:10px 0;color:#49392d}
.he-u8j-source-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.he-u8j-source-summary>div{display:flex;flex-direction:column;gap:3px}
.he-u8j-source-summary span,.he-u8j-source-summary small{font-size:11px;color:#765f4d}
.he-u8j-source-summary strong{font-size:17px}
.he-u8j-source-summary output{font-size:12px;font-weight:700;color:#7b5839}
.he-u8j-source-tools details{border-top:1px solid #e5d9c9;margin-top:10px;padding-top:9px}
.he-u8j-source-tools summary{font-size:12px;font-weight:750;cursor:pointer;width:fit-content}
.he-u8j-source-tools summary:focus-visible{outline:2px solid #a67849;outline-offset:2px}
.he-u8j-source-tools .he-toolbar{margin:10px 0;padding:10px;background:#fff}
.he-u8j-catalog-only[hidden],.he-wheel-turn-h42[hidden]{display:none!important}
.he-u8j-reset{border:1px solid #c8b29a;background:#fff;border-radius:7px;color:#49392d;padding:8px 11px;font-weight:700;font-size:12px;cursor:pointer}
.he-u8j-reset:disabled{opacity:.45;cursor:not-allowed}

/* U8k: local-key following is an option of the collapsed source comparison panel,
   never a competing global toolbar. Compose remains unchanged. */
.he-u8j-source-tools .he-u8k-follow{margin:10px 0 8px}
.he-u8k-follow label{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#594735;cursor:pointer}
.he-u8k-follow input{accent-color:#493b30}

/* U8m: source-only read-only transposition, isolated from Compare and Compose. */
.he-u8j-source-tools #he-u8m-transpose{border-top:1px solid #e5d9c9;margin-top:10px;padding-top:10px}
.he-u8m-tools{display:flex;flex-wrap:wrap;align-items:end;gap:10px;margin:10px 0}
.he-u8m-tools label{display:flex;flex-direction:column;gap:5px;font-size:12px;min-width:180px}
.he-u8m-tools select,.he-u8m-tools button{border:1px solid #c8b29a;border-radius:7px;background:#fff;color:#49392d;padding:8px 10px;font-size:12px}
.he-u8m-tools button{cursor:pointer}
.he-u8m-tools button:disabled{opacity:.5;cursor:wait}
#he-u8m-status{display:block;font-size:12px;margin:6px 0;color:#805a33}
.he-u8j-source-tools #he-u8m-transpose>small{display:block;font-size:11px;color:#75675a}


/* U9a: distinguish source-free catalogue exploration from Compose and song evidence. */
.he-u9a-catalog{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;padding:14px 17px;margin:12px 0;border:1px solid #e3d7c8;border-radius:12px;background:#f9f5ef}
.he-u9a-catalog>div{flex:1;min-width:210px}
.he-u9a-catalog strong{color:#4d3a2c;font-size:15px}
.he-u9a-catalog p{margin:6px 0 0;font-size:12px;line-height:1.5;color:#69594b}
.he-u9a-catalog #he-u9a-context{color:#855e35;font-weight:650}
.he-u9a-demo{padding:9px 12px;border:1px solid #c8b29a;border-radius:7px;background:#fff;color:#49392d;font-size:12px;font-weight:700;cursor:pointer}
.he-u9a-demo[hidden],.he-u9a-catalog[hidden]{display:none!important}
.he-u9a-demo:focus-visible{outline:2px solid #a67849;outline-offset:3px}

/* U9b: knowledge view vs authoring workspace. Source and Compose unaffected. */
.he-u9b-encyclopedia #he-progress-panel,.he-u9b-encyclopedia #he-h56-panel,
.he-u9b-encyclopedia #he-u4-suggestions,.he-u9b-encyclopedia #he-h51-variations,
.he-u9b-encyclopedia #he-h53-panel,.he-u9b-encyclopedia #he-h54-analysis,
.he-u9b-encyclopedia #he-path-panel,.he-u9b-encyclopedia #he-voice-path-panel,
.he-u9b-encyclopedia #he-add {display:none!important}
.he-u9b-focus{display:block;margin:10px 0 9px;font-weight:700;font-size:13px;color:#493b30}
.he-u9b-degrees{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.he-u9b-degree{border:1px solid #d2c3b1;border-radius:8px;background:#fff;padding:7px 10px;color:#4d3a2c;cursor:pointer;font-size:12px}
.he-u9b-degree.is-active{background:#eadcc9;border-color:#96734c;font-weight:750}
.he-u9b-degree:focus-visible{outline:2px solid #98764e;outline-offset:2px}
.he-u9b-inspector{padding:10px;border-radius:9px;background:#f9f5ee;margin-bottom:15px;border-left:3px solid #a88b61}
.he-u9b-inspector p{margin:5px 0}.he-u9b-inspector small{color:#655949}

/* U9b.2: authoring navigation never appears in standalone knowledge mode. */
.he-u9b-encyclopedia .he-wheel-turn-h42,.he-u9b-encyclopedia .he-tab[data-view="progression"]{display:none!important}

/* U9c: knowledge text is a read-only supplement to canonical chord identities. */
.he-u9c-knowledge{border:1px solid #e1d5c3;border-radius:9px;background:#fffaf3;padding:11px;margin:9px 0 14px;font-size:12px;line-height:1.55}
.he-u9c-knowledge h3{font-size:14px;margin:0 0 8px;color:#49392d}
.he-u9c-knowledge h4{font-size:12px;margin:10px 0 4px;color:#634b34}
.he-u9c-knowledge p{margin:5px 0}
.he-u9c-knowledge ul{margin:4px 0 8px;padding-left:19px}
.he-u9c-knowledge li{margin:2px 0}
.he-u9c-knowledge small{display:block;color:#746a5f;margin-top:10px}
.he-u9c-knowledge .he-u9c-link{border:1px solid #c8b29a;background:#fff;color:#49392d;border-radius:7px;padding:7px 10px;margin:9px 0;cursor:pointer;display:block}
.he-u9c-knowledge .he-u9c-link:focus-visible{outline:2px solid #a67849;outline-offset:2px}

/* U9c.2: chord identity precedes its illustrated, context-aware encyclopedia lesson. */
.he-u9b-encyclopedia #he-inspector-content>h2{margin:4px 0 8px}
.he-u9b-encyclopedia .he-u9c-knowledge{margin:14px 0 16px}
.he-u9b-encyclopedia .he-u9c-knowledge small{font-style:italic}

/* U9d: curated educational style lens, separate from canonical harmonic facts. */
.he-u9d-style{border:1px solid #dbcbb8;border-left:3px solid #a57f51;border-radius:9px;background:#f8f4ed;padding:11px;margin:9px 0 15px;font-size:12px;line-height:1.55}
.he-u9d-style h3{font-size:14px;margin:0 0 7px;color:#503e30}
.he-u9d-style p{margin:6px 0}
.he-u9d-style small{display:block;margin-top:8px;color:#74695e}

/* U9d.1: one selected chord, curated encyclopedia links only. Legacy Compose network unchanged. */
.he-u9d1-network .he-network-lines{pointer-events:none}
.he-u9d1-network .he-u9d1-edge{stroke:#a57f51;stroke-width:3;opacity:.45;pointer-events:none}
.he-u9d1-network .he-u9d1-edge.is-active{stroke:#50785f;stroke-width:5;opacity:.9}
.he-u9d1-network .he-u9d1-edge-hit{stroke:transparent;stroke-width:17;pointer-events:stroke;cursor:pointer}
.he-u9d1-network .he-u9d1-edge-hit:focus{stroke:#dbbf95;stroke-width:12;outline:none}
.he-u9d1-network .he-u9d1-focus{box-shadow:0 0 0 3px #b08355}
.he-u9d1-relations{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}
.he-u9d1-relation{padding:8px 10px;border:1px solid #c8b29a;border-radius:8px;background:white;color:#49392d;cursor:pointer}
.he-u9d1-relation[aria-pressed="true"]{background:#49392d;color:white}
.he-u9d1-explanation{border-top:1px solid #e3d7c8;padding-top:10px}
.he-u9d1-explanation small{display:block;color:#796b5d;margin:8px 0}
.he-u9d1-relation:focus-visible{outline:3px solid #a67849;outline-offset:2px}

/* U9e: read-only, curated A/B harmony routes inside standalone Network only. */
.he-u9e-routes{border:1px solid #d8c3a7;background:#fff8ed;border-radius:10px;padding:14px;margin:15px 0}
.he-u9e-routes h3{font-size:16px;color:#49392d;margin:0 0 9px}
.he-u9e-routes p{margin:6px 0 12px}
.he-u9e-routes small{display:block;font-size:11px;color:#74695e;margin-top:10px}
.he-u9e-route-group{padding:10px 0;border-top:1px solid #e8dac8}
.he-u9e-route-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:10px;margin-top:9px}
.he-u9e-route-option{border:1px solid #dccbb7;border-radius:8px;padding:10px;background:#fff}
.he-u9e-route-option p{font-weight:600;line-height:1.5}
.he-u9e-hear{border:1px solid #9c7a57;background:white;border-radius:6px;padding:8px;cursor:pointer}
.he-u9e-hear:focus-visible{outline:3px solid #a67849;outline-offset:2px}

/* U9e.1: show the selected chord and the first A/B divergence, without changing playback. */
.he-u9e-difference{border-left:3px solid #9c7a57;padding:7px 10px;background:#fffdf9;font-size:12px}
.he-u9e-chords{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.he-u9e-chord{display:inline-block;padding:3px 5px;border:1px solid transparent;border-radius:5px}
.he-u9e-chord.is-different{border-color:#d4a976;background:#fff3df}
.he-u9e-chord.is-selected{border-color:#537d62;background:#e5efe7;font-weight:700}
.he-u9e-chord.is-different.is-selected{box-shadow:0 0 0 1px #537d62 inset}
.he-u9e-arrow{color:#817567}
.he-u9e-selected-role{font-size:12px;font-weight:400!important;color:#5b4936}

/* U9f: theoretical A/B pitch movement X-Ray; only in read-only Harmony Routes. */
.he-u9f-reveal{border:1px solid #af906d;border-radius:7px;background:#fff;padding:8px 12px;cursor:pointer;margin:9px 0}
.he-u9f-reveal:focus-visible{outline:3px solid #a67849;outline-offset:2px}
.he-u9f-detail{border:1px solid #e0d2c1;border-radius:8px;background:#fffdf9;padding:11px;margin:6px 0 10px}
.he-u9f-detail[hidden]{display:none!important}
.he-u9f-lanes{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:9px;margin-top:9px}
.he-u9f-lane{border:1px solid #e0d2c1;border-radius:7px;padding:9px;background:#fff}
.he-u9f-lane h4{margin:0 0 8px;font-size:13px}
.he-u9f-tone{padding:5px 7px;margin:4px 0;border-radius:5px;font-size:12px;background:#f7f5f1}
.he-u9f-tone.he-u9f-held{background:#e7f1e9}
.he-u9f-tone.he-u9f-semitone{background:#fff0dd}
.he-u9f-detail small{display:block;margin:8px 0 0;color:#6f6254;font-size:11px}

/* U9f.1: catalog-spelling-order diagram. Its Y coordinates are NOT MIDI register. */
.he-u9f-graph{display:block;width:100%;max-width:370px;height:auto;margin:7px auto 10px;overflow:visible}
.he-u9f-colhead{fill:#716151;font-size:12px;font-weight:600}
.he-u9f-note{fill:#faf6f0;stroke:#bca68d;stroke-width:1}
.he-u9f-note.is-after{fill:#f1f4ef;stroke:#a0b3a2}
.he-u9f-notename{fill:#44382f;font-size:15px;font-weight:650}
.he-u9f-link{stroke:#a39a90;stroke-width:2.5;stroke-linecap:round;opacity:.85}
.he-u9f-link.is-held{stroke:#4d805c;stroke-width:3.5}
.he-u9f-link.is-semitone{stroke:#ba7b33;stroke-width:3.5}
.he-u9f-link.is-ambiguous{stroke-dasharray:5 4}
.he-u9f-legend{display:flex;flex-wrap:wrap;gap:7px;font-size:11px;margin-top:4px}
.he-u9f-legend span{padding:3px 5px;border-radius:5px;background:#f4f1ed}
.he-u9f-legend .is-held{background:#e5efe7}
.he-u9f-legend .is-semitone{background:#fff0dd}

/* U9f.2: physical voicing X-Ray is on-demand and read-only. */
.he-u9f2-switch{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}
.he-u9f2-switch button{border:1px solid #bca48d;border-radius:6px;background:#fff;color:#503e30;padding:7px 10px;cursor:pointer}
.he-u9f2-switch button[aria-pressed="true"]{background:#49392d;color:#fff}
.he-u9f2-switch button:focus-visible{outline:3px solid #a67849;outline-offset:2px}
.he-u9f2-panel[hidden]{display:none!important}
.he-u9f2-lane{min-width:0}
.he-u9f2-figure{min-width:0;max-width:100%}
.he-u9f2-figure .he-h641-svg{max-height:350px}
.he-u9f2-origin{font-size:12px;color:#584b3a;margin:5px 0 9px}
.he-u9f2-error{font-size:12px;color:#765a42;padding:9px 0}
.he-u9f2-profile{font-size:12px;font-weight:600;padding:6px 0}
.he-u9f-lanes[hidden]{display:none!important}
.he-u9f2-physical-mode .he-u9f-theory-note{display:none!important}

/* U9f.2a: readable physical X-Ray only. Preserve theory A/B and Compose/H6.41. */
.he-u9f2-panel > .he-u9f-lanes{grid-template-columns:minmax(0,1fr)}
.he-u9f2-panel .he-u9f2-lane{width:100%}
.he-u9f2-panel .he-u9f2-figure{width:100%;overflow-x:auto}
.he-u9f2-panel .he-u9f2-figure .he-h641-svg{width:100%;min-width:540px;max-height:none;height:auto}
.he-u9f2-panel .he-h641-head{font-size:17px}
.he-u9f2-panel .he-h641-note{font-size:17px}
.he-u9f2-panel .he-h641-octave{font-size:13px}
.he-u9f2-panel .he-h641-graphic figcaption,
.he-u9f2-panel .he-h641-intervals{font-size:13px}
.he-u9f2-panel .he-u9f2-origin{font-size:13px}

/* U9g: encyclopedia-only style notes. Does not resize X-Ray or affect Compose. */
.he-u9g-context{border:1px solid #d7c7af;background:#fffaf2;border-radius:7px;padding:12px;margin:12px 0}
.he-u9g-context p{margin:6px 0;line-height:1.45}
.he-u9g-context small{display:block;color:#765e46}
.he-u9g-tip{border-left:3px solid #9b7952;padding:4px 10px;margin:9px 0;color:#584939;font-size:13px}
.he-u9g-voicing-focus{background:#f5f0e8;border-radius:6px;padding:9px 11px;line-height:1.45;font-size:13px}

/* U9h: curated Grid context in standalone encyclopedia only. */
.he-u9h-grid-context{border-top:1px solid #cbdcc8;margin-top:12px;padding-top:11px}
.he-u9h-grid-context>strong{display:block;font-size:13px;margin-bottom:6px}
.he-u9h-grid-context p{margin:5px 0;line-height:1.5}
.he-u9h-grid-label{font-weight:700}
.he-u9h-grid-network{margin-top:9px;padding:8px 11px;border:1px solid #a2bba3;border-radius:7px;background:#fff;color:#36523d;cursor:pointer}
.he-u9h-grid-network:focus-visible{outline:2px solid #42694e;outline-offset:2px}

/* U9j: a readable encyclopedic expansion, scoped to the Inspector card. */
.he-u9c-knowledge .he-u9j-summary{border-left:3px solid #a97d50;padding:2px 0 3px 10px;margin:10px 0}
.he-u9c-knowledge .he-u9j-summary h4{margin:5px 0 6px}
.he-u9c-knowledge .he-u9j-summary p{line-height:1.55;margin:5px 0}
.he-u9c-knowledge .he-u9j-detail{border:1px solid #dfcbb5;border-radius:8px;margin:12px 0;padding:10px;background:#fffaf3}
.he-u9c-knowledge .he-u9j-detail summary{cursor:pointer;font-weight:700;color:#5e4029;line-height:1.4}
.he-u9c-knowledge .he-u9j-detail summary:focus-visible{outline:2px solid #906536;outline-offset:3px}
.he-u9c-knowledge .he-u9j-detail h4{font-size:13px;margin:13px 0 4px}
.he-u9c-knowledge .he-u9j-detail p{line-height:1.55;margin:5px 0}
.he-u9c-knowledge .he-u9j-detail small{display:block;color:#68594a;font-size:11px;margin-top:10px}
.he-u9c-knowledge .he-u9j-mode-note{border-left:3px solid #9aa9bc;padding-left:8px}
.he-u9c-knowledge .he-u9j-unconfirmed{border-left:3px solid #bd8b4b;padding-left:8px}

/* U9l.5: optional source-free Compose partial-motion suggestions only. */
.he-u9l5-stable{stroke:#536eaf;stroke-width:2.5;stroke-dasharray:7 4;fill:none;opacity:.85}
.he-u9l5-alternative{stroke:#b77829;stroke-width:2;stroke-dasharray:2 5;fill:none;opacity:.68}
.he-u9l5-legend{display:flex;gap:9px 15px;flex-wrap:wrap;margin:9px 0 3px;font-size:11px;color:#37543e}
.he-u9l5-legend-item{display:inline-flex;align-items:center;gap:6px}
.he-u9l5-swatch{display:inline-block;width:26px;border-top:3px solid #2c8652}
.he-u9l5-swatch.is-stable{border-top:3px dashed #536eaf}
.he-u9l5-swatch.is-alternative{border-top:3px dotted #b77829}
.he-u9l5-warning{display:block;color:#5b7460;line-height:1.45;margin:4px 0 5px}

/* U9m.5: source-only catalog selection below the factual H6.41 comparison. */
.he-u9m5-catalog{margin-top:1rem;padding:.85rem;border:1px solid #d9e4d6;border-radius:.5rem;background:#f8faf6}
.he-u9m5-catalog p{margin:.35rem 0 .75rem}
.he-u9m5-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:.75rem}
.he-u9m5-choice{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;min-width:0}
.he-u9m5-choice select{max-width:100%;width:100%;min-width:0}
.he-u9m5-choice .he-h44-diagram{max-width:220px}
.he-u9m5-catalog>button{margin-top:.7rem}

/* U9n.1: General/Swing share the existing read-only-until-Append proposal surface. */
.he-u4-suggestions #he-u9n1-panel{border:0;background:transparent;padding:0;margin:0}
.he-u4-suggestions[data-active="chord"] #he-u9n1-panel{display:none!important}

/* U9n.2: one visible H6.17/H6.19 toolbar across all Compose styles. */
.he-u4-suggestions[data-active="chord"] > .he-h617-controls{display:none!important}
.he-u4-suggestions .he-h617-controls[hidden]{display:none!important}

/* U9n.3a: compare COMPLETE voicing paths in stacked horizontal sequences.
   Layout only: existing candidate order, scores, actions and H4.7 data are unchanged. */
#he-voice-path-results > .he-h47-path-card{grid-column:1 / -1;min-width:0}
#he-voice-path-results > .he-h47-path-card .he-voice-path-steps{
  display:flex;flex-wrap:nowrap;align-items:stretch;gap:10px;
  overflow-x:auto;overscroll-behavior-inline:contain;
  scroll-snap-type:x proximity;padding-bottom:10px
}
#he-voice-path-results > .he-h47-path-card .he-h47-path-step{
  flex:1 0 164px;min-width:164px;max-width:none;scroll-snap-align:start
}
@media(max-width:620px){
  #he-voice-path-results > .he-h47-path-card .he-h47-path-step{flex:0 0 170px}
}

/* U9n.4 — immutable Compose working-progression evidence, separate from the
   seven-degree H6.47 pitch-class matrix and the curated Explore relation. */
.he-u9n4-working-grid{border:1px solid #decbb7;background:#faf6ef;border-radius:10px;padding:14px;margin:8px 0 18px;min-width:0}
.he-u9n4-working-grid h3{margin:0 0 9px;font-size:17px}
.he-u9n4-counts,.he-u9n4-outside{margin:6px 0 10px;color:#72543e;font-size:13px}
.he-u9n4-sequence{display:flex;align-items:center;gap:8px;overflow-x:auto;max-width:100%;padding:5px 2px 12px;overscroll-behavior-inline:contain}
.he-u9n4-sequence:focus-visible{outline:2px solid #93603b;outline-offset:2px}
.he-u9n4-occurrence{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;flex:0 0 106px;min-height:76px;padding:8px 5px;border:1px solid #d7c2a9;border-radius:8px;background:#fff;color:#33271e;text-align:center;overflow-wrap:anywhere}
.he-u9n4-occurrence small{font-size:11px;color:#775c45}
.he-u9n4-occurrence.is-outside{border-style:dashed;border-color:#b57959;background:#fff3eb}
.he-u9n4-arrow{flex:0 0 auto;font-weight:700;color:#81674d}
.he-u9n4-note{display:block;color:#7b6149;line-height:1.5}
.he-h647-cell.he-u9n4-observed{box-shadow:inset 0 0 0 2px #8f6a4c;background:#f1e6d5}
.he-h647-cell.he-u9n4-observed.is-selected{outline:2px solid #71432f;outline-offset:-2px}
.he-u9n4-cell-count{display:block;font-size:10px;line-height:1.15;font-weight:700;color:#71432f}

/* U9n.5: factual directed Compose Network, isolated from H6.48 theory layers. */
.he-u9n5-working-network{margin:12px 0 18px;border:1px solid #d9c6b2;border-radius:10px;padding:14px;background:#faf7f1;min-width:0}
.he-u9n5-working-network h3{margin:0 0 8px}
.he-u9n5-summary,.he-u9n5-hint{color:#725842;font-size:13px;line-height:1.5}
.he-u9n5-graph-scroll{overflow-x:auto;max-width:100%;border:1px solid #e6d8c6;background:#fff;border-radius:9px;margin:12px 0;overscroll-behavior-inline:contain}
.he-u9n5-chart{display:block;max-width:none;height:auto;min-height:360px}
.he-u9n5-edge{stroke:#6b8975;stroke-width:2.5;fill:none;cursor:pointer;pointer-events:stroke}
.he-u9n5-edge:focus-visible,.he-u9n5-edge[data-selected="true"]{stroke:#ad673e;stroke-width:5;outline:none}
.he-u9n5-node rect{fill:#ecf2e9;stroke:#7a9b7b;stroke-width:1.5}
.he-u9n5-node.is-outside rect{fill:#fff2e9;stroke:#b47b58;stroke-dasharray:5 3}
.he-u9n5-node text{font-size:14px;font-weight:700;fill:#2e3c31}
.he-u9n5-node text.he-u9n5-count{font-size:11px;font-weight:500;fill:#6b614f}
.he-u9n5-detail{padding:9px;border:1px solid #d8c9b5;border-radius:7px;background:#fff}
.he-u9n5-sequence{display:flex;align-items:center;gap:7px;max-width:100%;overflow-x:auto;padding:6px 0 12px;overscroll-behavior-inline:contain}
.he-u9n5-step{flex:0 0 90px;border:1px solid #d8c9b5;border-radius:7px;padding:8px 6px;text-align:center;background:white;display:flex;flex-direction:column;gap:4px}
.he-u9n5-step.is-outside{border-style:dashed;background:#fff2e9}
.he-u9n5-step small{font-size:11px;color:#765e4a}
.he-u9n5-next{font-weight:700;color:#86705c;flex:0 0 auto}

/* U9n.6: legacy preset select remains script-addressable, never a second UI. */
#he-u9n6-legacy-preset{display:none!important}
.he-u4-suggestions #he-u9n6-panel{border:0;background:transparent;padding:0;margin:0 0 12px}
.he-u4-suggestions[data-active="chord"] #he-u9n6-panel{display:none!important}
.he-u4-suggestions #he-u9n6-panel[hidden]{display:none!important}
.he-u4-suggestions #he-u9n6-panel .he-h57-choice>button{margin-top:6px}

/* U9p.2c: public, illustrative Premium discovery. No protected engine data. */
.he-u9p2c-locked{margin:14px 0;padding:16px;border:1px dashed #b9a081;border-radius:12px;background:#fffbf4;color:#473a30;max-width:100%;min-width:0}
.he-u9p2c-locked h3{margin:8px 0;font-size:17px;line-height:1.35}
.he-u9p2c-locked p{font-size:13px;line-height:1.5;margin:7px 0 10px}
.he-u9p2c-badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#eee3d2;color:#604b33;font-size:11px;font-weight:750;letter-spacing:.015em}
.he-u9p2c-example{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0 6px}
.he-u9p2c-example span{min-width:0;max-width:100%;overflow-wrap:anywhere;background:#fff;border:1px solid #e2d3be;border-radius:8px;padding:9px 12px;font:600 12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;color:#473a30}
.he-u9p2c-locked small{font-size:11px;color:#776856}
.he-u9p2c-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.he-u9p2c-actions a{display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;background:#44362d;color:#fff;border:1px solid #44362d;border-radius:8px;padding:9px 13px;font-weight:700;font-size:12px}
.he-u9p2c-actions a+ a{background:transparent;color:#44362d}
.he-u9p2c-actions a:focus-visible{outline:3px solid #a67849;outline-offset:2px}
@media(max-width:620px){.he-u9p2c-example{flex-direction:column}.he-u9p2c-example span{width:100%}.he-u9p2c-actions a{flex:1 1 140px}}