:root{--navy:#111c35;--ivory:#f5f0e6;--gold:#c9a75d;--ink:#152038;--muted:#687083;--blue:#126089;--line:#d9d5cc;font-family:'DM Sans','PingFang HK',Arial,sans-serif;color:var(--ink);background:#f2f2ee}*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit}button,select{cursor:pointer}button{border:1px solid #c8cdd0;background:#fcfaf5;border-radius:6px;padding:10px 16px;color:var(--ink);font-weight:600}button:hover{border-color:var(--blue);background:#eaf1f4}button:disabled{opacity:.4;cursor:default}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #d8a33d;outline-offset:3px}[hidden]{display:none!important}.tiles{min-height:230px;background-color:#07547d;background-image:linear-gradient(105deg,#031e36a6,#0e5b7610),url('tile-texture.jpg');background-size:cover;background-position:center;color:var(--ivory);padding:20px max(5vw,24px) 26px;border-bottom:5px solid #153344}.parent{color:var(--ivory);font-size:11px;letter-spacing:3px;text-decoration:none;display:block}.parent span{float:right}.brand{display:flex;align-items:center;gap:20px;margin:22px 0 12px}.brand svg{width:92px;fill:none;stroke:var(--ivory);stroke-width:12;stroke-linecap:round}.brand h1{font-size:64px;line-height:1;margin:0;letter-spacing:-3px;font-weight:800;text-shadow:0 4px 2px #002036}.brand p{margin:10px 0 0;font-size:20px;letter-spacing:1px}.tagline{font-size:12px;letter-spacing:3px;margin-left:112px}main{max-width:1500px;margin:auto;padding:0 36px}.setup{display:flex;align-items:center;gap:28px;padding:22px 0}.setup label{font-size:10px;letter-spacing:1.5px;font-weight:700;display:flex;gap:10px;align-items:center}select{border:1px solid #c7cccf;background:#fcfaf5;color:var(--ink);padding:8px 28px 8px 10px;border-radius:4px}.setup-note{margin-left:auto;color:var(--muted);font-size:13px}.lesson{background:#fcfaf5;border:1px solid #d5d8d5;border-radius:10px;overflow:hidden;box-shadow:0 4px 18px #12263908}.stage-heading{display:flex;align-items:center;justify-content:space-between;padding:24px 28px 10px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--blue)}h2{font-size:25px;letter-spacing:-.6px;margin:7px 0 0}.nav{display:flex;gap:8px}#stages{display:flex;gap:8px;padding:10px 28px}.stage-dot{border-radius:50%;height:31px;width:31px;padding:0;font-size:12px}.stage-dot.active{background:var(--blue);color:white;border-color:var(--blue)}.caption{font-size:14px;color:#4c5b66;padding:6px 28px 20px}.map-scroll{overflow-x:auto;background:#101922;border-top:1px solid #cbd3d7}#map{height:460px;min-width:1040px;position:relative;padding-top:25px;color:#f2f2ec;background:radial-gradient(ellipse at top,#23364660,transparent 75%)}#map>svg{position:absolute;inset:40px 0 0;width:100%;height:420px}.map-label{position:absolute;top:18px;font-size:10px;letter-spacing:1.3px;color:#aeb9bf}.map-label small{display:inline-block;margin-top:6px;letter-spacing:0;font-size:10px;color:#7d95a7}.dividers line{stroke:#b1c3ca33;stroke-width:1}.connections path{fill:none;stroke:#c9a75d;stroke-width:1.6;opacity:.8}.connections .extension{stroke-dasharray:5 5;stroke:#9aaebf}.arrowhead{fill:none;stroke:#c9a75d;stroke-width:1.2}.chord{position:absolute;transform:translate(-50%,-50%);margin-top:40px;width:108px;min-height:84px;padding:8px 4px;background:#192631;color:#f2f2ec;border:1px solid #718591;border-radius:8px;display:flex;flex-direction:column;gap:4px;align-items:center;box-shadow:0 4px 10px #0003}.chord strong{font-family:Georgia,serif;font-size:27px;font-weight:400;color:#dfc780}.chord span{font-size:12px}.chord small{font-size:9px;color:#b6c4cf}.chord:hover,.chord.selected{background:#25465a;border-color:#e8cd81;box-shadow:0 0 0 2px #e8cd8133}.chord[draggable=true]{cursor:grab}.map-footer{display:flex;justify-content:space-between;align-items:center;padding:13px 26px;font-size:11px;color:var(--muted)}.line-key{display:inline-block;width:20px;border-top:2px solid var(--gold);margin:0 6px 3px 0}.line-key.dashed{border-top-style:dashed;margin-left:16px}#selected-flow{padding:13px 26px;border-top:1px solid #dde1df;display:flex;gap:10px;align-items:center;background:#edf3f5}#selected-flow>div{flex:1;display:flex;gap:15px;align-items:center}#path-label{font-size:13px;color:#536576}#sequences{display:flex;gap:10px;padding:16px 26px;border-top:1px solid var(--line)}#sequences button{flex:1;font-family:Georgia,serif}#sequences small{display:block;font:9px Arial;letter-spacing:2px;margin-bottom:8px;color:var(--muted)}.composer{margin-top:24px;padding:22px 26px;background:#fcfaf5;border:1px solid #d5d8d5;border-radius:10px}.composer-heading{display:flex;justify-content:space-between;align-items:center}h2 small{font-size:12px;letter-spacing:0;font-weight:400;color:var(--muted);margin-left:12px}.hint{font-size:12px;color:var(--muted);margin:12px 0 20px}#bars{display:grid;gap:22px}.flow-section{min-width:0}.section-label{display:flex;align-items:center;gap:12px;margin:0 0 10px;color:var(--blue);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}.section-label:after{content:"";height:1px;flex:1;background:#cbd7dc}.bar-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.bar-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.bar-heading>span{font-size:10px;letter-spacing:1.5px;color:var(--muted)}.bar-heading select{font-size:11px;padding:5px}.slots{display:grid;grid-template-columns:var(--slot-columns,1fr);gap:6px;min-width:0}.slot-wrap{position:relative;min-width:0}.slot{width:100%;min-width:0;height:130px;padding:10px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;overflow:hidden;background:#f4f5f2;border:1px dashed #a6b7bc;font-size:11px;font-weight:400}.slot>span:not(.plus),.slot strong,.slot small,.slot em{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.slot strong{font:25px Georgia;color:var(--blue)}.slot small{font-size:9px}.slot em{font-style:normal;color:var(--muted);font-size:9px;margin-top:6px}.slot.filled{background:#e9f0f3;border:1px solid #819da9}.slot .plus{font-size:25px;color:#7b929c}.remove{position:absolute;right:3px;top:3px;padding:0;width:22px;height:22px;border:0;background:transparent;color:#657d86}.playing,.chord.playing{border-color:#f0ca5c!important;box-shadow:0 0 0 3px #dcb74470!important}.dragover{background:#d1e6f0!important;border-color:var(--blue)!important}.transport{position:sticky;bottom:0;z-index:10;display:flex;align-items:center;gap:12px;padding:16px 0;background:#f2f2eef5;border-top:1px solid #ccd2d4;margin-top:20px;backdrop-filter:blur(8px)}.primary{background:var(--blue);color:white;border-color:var(--blue)}.primary:hover{background:#124666;color:white}.loop{display:flex;align-items:center;gap:6px;font-size:13px;padding:0 10px}.loop input{accent-color:var(--blue);width:17px;height:17px}.tempo{font-size:10px;letter-spacing:1px;display:flex;gap:7px;align-items:center}.tempo input{width:64px;border:1px solid #bdc8cd;padding:9px 5px;background:#fcfaf5;border-radius:4px;font-size:14px;color:var(--ink)}#status{margin-left:auto;font-size:12px;color:#536576}footer{padding:18px 0 30px;font-size:11px;color:var(--muted);display:flex;justify-content:space-between;gap:30px}details{max-width:620px;line-height:1.6}summary{cursor:pointer;text-align:right}.notice{padding:12px;background:#fff4d6;color:#675021;border:1px solid #e5cc8a;font-size:12px;border-radius:5px}@media(max-width:900px){main{padding:0 16px}.setup{gap:12px;flex-wrap:wrap}.setup-note{display:none}.brand h1{font-size:50px}.stage-heading{padding:20px 16px 10px}.bar-row{grid-template-columns:repeat(2,minmax(0,1fr))}.transport{flex-wrap:wrap}#status{flex-basis:100%;margin-left:0}.map-footer>span{display:none}#selected-flow{flex-wrap:wrap}#selected-flow>div{flex-basis:100%}#sequences{flex-wrap:wrap}.tagline{letter-spacing:1px}.brand svg{width:70px}.tagline{margin-left:90px}}

/* A compact classroom layout keeps the map and four bars in one desktop view. */
#classroom{font-size:11px;white-space:nowrap}.classroom .tiles{padding:10px 36px;display:flex;align-items:center;gap:28px}.classroom .parent{font-size:9px;letter-spacing:2px}.classroom .parent span{display:none}.classroom .brand{margin:0;gap:10px}.classroom .brand h1{font-size:30px;letter-spacing:-1px}.classroom .brand svg{width:38px;height:35px}.classroom .brand p{font-size:12px;margin:4px 0 0}.classroom .tagline{margin-left:auto;font-size:10px;letter-spacing:1px}.classroom .setup{padding:12px 0}.classroom .stage-heading{padding:12px 24px 4px}.classroom h2{font-size:21px;margin-top:4px}.classroom #stages{padding:5px 24px}.classroom .caption{padding:6px 24px 12px;font-size:12px}.classroom #map{height:350px}.classroom #map>svg{height:310px}.classroom .chord{top:calc((var(--node-y)) * 0.738095px)!important;min-height:65px;width:102px;gap:2px;padding:5px}.classroom .chord strong{font-size:24px}.classroom .map-footer{padding:8px 24px}.classroom .map-footer button,.classroom #selected-flow button{padding:7px 12px;font-size:11px}.classroom #selected-flow{padding:8px 24px}.classroom #sequences{padding:8px 24px}.classroom #sequences button{padding:6px 10px;font-size:12px}.classroom #sequences small{display:inline;margin-right:8px;font-size:8px}.classroom .composer{margin-top:12px;padding:12px 24px}.classroom .hint{margin:8px 0 10px;font-size:11px}.classroom .slot{height:93px}.classroom .bar-heading{margin-bottom:6px}.classroom .transport{margin-top:10px;padding:10px 0}.classroom footer{padding:8px 0 15px}

@media(max-width:600px){.tiles{height:250px;min-height:250px;padding:18px 22px 22px;background-size:cover;background-position:center}.parent{font-size:9px;letter-spacing:2px}.parent span{display:none}.brand{gap:14px;margin:35px 0 14px}.brand svg{width:54px;height:auto;flex:0 0 54px;stroke-width:11}.brand h1{font-size:clamp(40px,12vw,52px);line-height:.95;letter-spacing:-2px;white-space:nowrap}.brand p{margin-top:9px;font-size:16px;line-height:1.15;letter-spacing:.3px}.tagline{margin-left:68px;font-size:10px;line-height:1.4;letter-spacing:1.5px;white-space:nowrap}}

/* Diagram-authored map semantics and contextual duplicate nodes. */
.line-key.sequence{border-color:#5fae72;margin-left:16px}.line-key.relative-major{border-color:#e54b55;margin-left:16px}
.connections .edge{fill:none;stroke-width:1.65;opacity:.95}.connections .standard,.connections .secondary,.connections .deceptive,.connections .cadential{stroke:#c9a75d;stroke-dasharray:none}.connections .sequence{stroke:#5fae72}.connections .relative-major,.connections .relative-cadence{stroke:#e54b55;stroke-width:1.9}.arrowhead{fill:none;stroke-width:1.5}.arrowhead.standard,.arrowhead.secondary,.arrowhead.deceptive,.arrowhead.cadential{stroke:#c9a75d}.arrowhead.sequence{stroke:#5fae72}.arrowhead.relative-major,.arrowhead.relative-cadence{stroke:#e54b55;stroke-width:1.8}.edge-label{paint-order:stroke;stroke:#101922;stroke-width:5px;stroke-linejoin:round;font-size:9px;font-weight:800;letter-spacing:.8px}.relative-major-label,.relative-cadence-label{fill:#ff7b82}.chord.attached-left{transform:translate(-50%,-50%);border-radius:8px 0 0 8px}.chord.attached-right{border-radius:0 8px 8px 0}.chord.sequence{border-color:#5fae72}.chord.relative-major{border-color:#e54b55}.node-annotation{position:absolute;left:50%;bottom:calc(100% + 7px);width:150px;transform:translateX(-50%);font-size:9px!important;line-height:1.2;color:#ff7b82!important;font-weight:800;letter-spacing:.6px}.chord.cadential-64::before{display:none}.map-density-open{--map-card-width:100px;--map-card-height:78px}.map-density-open .chord{width:var(--map-card-width);min-height:var(--map-card-height);padding:7px 4px;gap:4px}.map-density-open .chord strong{font-size:25px}.map-density-mid{--map-card-width:92px;--map-card-height:72px}.map-density-mid .chord{width:var(--map-card-width);min-height:var(--map-card-height);padding:6px 4px;gap:3px}.map-density-mid .chord strong{font-size:23px}.map-density-dense{--map-card-width:84px;--map-card-height:68px}.map-density-dense .chord{width:var(--map-card-width);min-height:var(--map-card-height);padding:5px 3px;gap:3px}.map-density-dense .chord strong{font-size:21px}.map-density-maximum{--map-card-width:78px;--map-card-height:64px}.map-density-maximum .chord{width:var(--map-card-width);min-height:var(--map-card-height);padding:4px 3px;gap:2px}.map-density-maximum .chord strong{font-size:20px}.map-density-mid .chord span,.map-density-dense .chord span,.map-density-maximum .chord span{font-size:10px}.map-density-mid .chord small,.map-density-dense .chord small,.map-density-maximum .chord small{font-size:8px}.classroom .map-density-open{--map-card-width:94px;--map-card-height:62px}.classroom .map-density-mid{--map-card-width:86px;--map-card-height:58px}.classroom .map-density-dense{--map-card-width:80px;--map-card-height:56px}.classroom .map-density-maximum{--map-card-width:74px;--map-card-height:54px}.classroom .map-density-open .chord,.classroom .map-density-mid .chord,.classroom .map-density-dense .chord,.classroom .map-density-maximum .chord{width:var(--map-card-width);min-height:var(--map-card-height)}
.map-density-dense .chord[data-node="m-III"] .node-annotation{left:auto;right:calc(50% + 7px);bottom:calc(100% + 3px);width:64px;transform:none;text-align:right;font-size:7.5px!important;letter-spacing:.35px}
.chord.in-path{background:#213947;border-color:#b6cbd2;box-shadow:0 0 0 2px #8cb2c033}.chord.related-family{background:#203d4c;border-color:#d4be78;box-shadow:0 0 0 2px #c9a75d2e}.chord.selected{background:#315a70;border-color:#f2d782;box-shadow:0 0 0 3px #e8cd8152}
.chord.growth-card-pending{opacity:0;transform:translate(-50%,-50%) translate(var(--growth-x,0),var(--growth-y,8px)) scale(.94);pointer-events:none}
@media(prefers-reduced-motion:reduce){.chord.growth-card-pending{transform:translate(-50%,-50%);transition:none}}

/* My Flow bar operations stay behind one compact contextual menu. */
.composer-actions,.bar-tools{display:flex;align-items:center;gap:7px}.composer-actions button{padding:8px 12px;font-size:11px}.bar{min-width:0}.bar-actions{position:relative}.bar-actions>summary{display:grid;place-items:center;width:29px;height:29px;border:1px solid #c8cdd0;border-radius:5px;background:#fcfaf5;color:var(--muted);font-size:13px;font-weight:700;letter-spacing:1px;cursor:pointer;list-style:none}.bar-actions>summary::-webkit-details-marker{display:none}.bar-actions[open]>summary{border-color:var(--blue);background:#eaf1f4}.bar-menu{position:absolute;right:0;top:34px;z-index:20;display:grid;min-width:126px;padding:5px;background:#fcfaf5;border:1px solid #c8cdd0;border-radius:7px;box-shadow:0 8px 22px #1024322e}.bar-menu button{border:0;border-radius:4px;padding:7px 9px;text-align:left;background:transparent;font-size:11px;font-weight:500}.bar-menu button:hover{background:#eaf1f4}.bar-menu button[data-bar-action="delete"]{color:#8b3f3f}.bar-menu button:disabled{color:#9ca5aa;background:transparent}.classroom .composer-actions button{padding:6px 10px}.classroom .bar-actions>summary{width:26px;height:26px}.classroom .bar-menu{top:30px}

/* May Flow product footer follows the shared MonChord three-zone structure. */
.map-about{max-width:620px;margin:0 0 18px auto;color:var(--muted);font-size:11px;line-height:1.6}.map-about summary{text-align:right}.product-footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:58px;padding:18px max(22px,calc((100% - 1180px)/2));color:#7f93a2;background:#0b1824;font-size:9px;letter-spacing:.12em}.footer-brand{display:inline-flex;align-items:center;gap:8px;color:#afc1cc}.footer-brand img{width:20px;height:22px;opacity:.68;filter:hue-rotate(145deg) saturate(.65) brightness(1.35)}.footer-build{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;text-align:center}.footer-copyright{justify-self:end}.classroom .product-footer{padding:18px max(22px,calc((100% - 1180px)/2))}@media(max-width:600px){.product-footer{grid-template-columns:1fr;gap:8px;align-items:flex-start;padding-top:16px;padding-bottom:16px}.footer-build{text-align:left}.footer-copyright{justify-self:start}}

/* Match MonChord's stacked figured-bass treatment for Roman inversions. */
.chord strong .roman-notation{display:inline-flex;align-items:center;gap:.12em;white-space:nowrap;font-size:inherit!important}
.chord strong .roman-base{font-size:inherit!important;line-height:1}
.roman-figure-column{display:inline-grid;grid-auto-rows:min-content;place-items:center;width:.7em;font-size:.64em!important;font-variant-numeric:tabular-nums;line-height:.72;letter-spacing:0}
.roman-figure-column>span{display:block;font-size:inherit!important;line-height:.72}

.bar-tools{display:flex;align-items:center;gap:6px}.bar-actions{position:relative}.bar-actions>summary{list-style:none;padding:4px 7px;border:1px solid #c8cdd0;border-radius:5px;line-height:1}.bar-actions>summary::-webkit-details-marker,.form-tag-actions>summary::-webkit-details-marker{display:none}.bar-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:25;display:grid;min-width:174px;padding:6px;background:#fcfaf5;border:1px solid #c8cdd0;border-radius:7px;box-shadow:0 8px 22px #111c3524}.bar-menu>button,.form-tag-panel>button{border:0;background:transparent;border-radius:4px;padding:7px 9px;text-align:left;font-size:11px;font-weight:500}.bar-menu>button:hover,.form-tag-panel>button:hover,.form-tag-panel>button.active{background:#eaf1f4;color:var(--blue)}.form-tag-actions{position:relative}.form-tag-actions>summary{display:flex;justify-content:space-between;list-style:none;padding:7px 9px;font-size:11px;font-weight:600}.form-tag-actions>summary::marker{content:""}.form-tag-panel{position:absolute;left:calc(100% + 7px);top:-6px;z-index:26;display:grid;min-width:190px;padding:6px;background:#fcfaf5;border:1px solid #c8cdd0;border-radius:7px;box-shadow:0 8px 22px #111c3524}.form-tag-panel label{display:grid;gap:5px;padding:8px 9px 5px;color:var(--muted);font-size:9px;letter-spacing:.5px}.form-tag-panel input{min-width:0;padding:7px;border:1px solid #bdc8cd;border-radius:4px;background:white;color:var(--ink);font-size:11px}.form-tag-panel button:disabled{opacity:.4}@media(max-width:600px){.bar-row{grid-template-columns:1fr}.form-tag-panel{left:auto;right:calc(100% + 7px)}}
.bar-select{min-width:0;min-height:32px;flex:1;display:flex;align-items:center;gap:5px;margin:-5px 0;padding:5px 7px;border:1px solid transparent;background:transparent;color:var(--muted);font-size:10px;letter-spacing:1.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-align:left}.bar-number{flex:none}.bar-cue{min-width:0;overflow:hidden;text-overflow:ellipsis;color:#72818a;font-size:9px;font-style:italic;font-weight:500;letter-spacing:.65px;text-transform:uppercase}.bar-select:hover,.bar-select:focus-visible{background:#eaf1f4;border-color:#b8cbd3}.bar.playback-selected .bar-select,.bar-select[aria-pressed="true"]{color:var(--blue);border-color:#6f9aad;background:#eaf1f4}.section-label{width:100%;min-height:36px;padding:5px 2px;border:0;border-radius:0;background:transparent;text-align:left}.section-label:hover,.section-label:focus-visible{background:transparent;color:#0b4869}.section-label.playback-selected{color:#fff;background:var(--blue);padding:5px 10px;border-radius:5px}.section-label.playback-selected:after{background:#ffffff80}.slot.playback-selected{border-color:var(--blue);box-shadow:0 0 0 3px #1260892e;background:#dbeaf0}.slot.playback-selected:after{content:"START HERE";position:absolute;left:7px;top:7px;color:var(--blue);font-size:8px;font-weight:700;letter-spacing:.7px}.slot{position:relative}
.section-heading{display:flex;align-items:center;gap:8px;position:relative;margin-bottom:10px}.section-heading .section-label{flex:1}.section-actions{position:relative;flex:0 0 auto}.section-actions>summary{list-style:none;min-width:42px;min-height:38px;display:grid;place-items:center;border:1px solid #c8cdd0;border-radius:5px;color:var(--muted);line-height:1}.section-actions>summary::-webkit-details-marker{display:none}.section-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:28;display:grid;min-width:190px;padding:6px;background:#fcfaf5;border:1px solid #c8cdd0;border-radius:7px;box-shadow:0 8px 22px #111c3524}.section-menu button{min-height:38px;border:0;background:transparent;border-radius:4px;padding:8px 10px;text-align:left;font-size:11px;font-weight:600}.section-menu button:hover,.section-menu button:focus-visible{background:#eaf1f4;color:var(--blue)}.section-menu button:disabled{opacity:.4}

/* RC26.2 consolidation: compact touch-first My Flow controls. */
.bar-heading{min-height:34px;margin-bottom:7px;gap:6px}.bar-tools{gap:4px}.bar-select{min-height:34px;margin:0;padding:5px 6px}.bar-heading select{height:34px;min-width:82px;padding:4px 24px 4px 7px;font-size:10px}.bar-actions>summary{width:34px;height:34px;padding:0;display:grid;place-items:center}.bar-menu{top:calc(100% + 5px);width:244px;min-width:0;max-width:calc(100vw - 32px);max-height:calc(100vh - 48px);overflow:auto}.bar-actions.menu-up .bar-menu,.section-actions.menu-up .section-menu{top:auto;bottom:calc(100% + 5px)}.bar-menu>button,.form-tag-panel>button{min-height:38px;padding:8px 9px}.form-tag-actions{position:static;width:100%}.form-tag-actions>summary{min-height:38px;align-items:center;padding:8px 9px;white-space:nowrap}.form-tag-actions[open]>summary span{transform:rotate(90deg)}.form-tag-panel{position:static;width:100%;min-width:0;margin:2px 0 5px;padding:6px;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid #d7dfe2;border-radius:5px;box-shadow:none;background:#f4f6f4}.form-tag-panel label{grid-column:1/-1;padding:7px 5px 4px}.form-tag-panel>button[data-form-label-apply],.form-tag-panel>button[data-form-remove]{font-size:10px}.bar.grid-2 .slot{padding:8px 4px;gap:4px}.bar.grid-2 .slot strong{font-size:23px}.bar.grid-2 .slot small,.bar.grid-2 .slot em{font-size:8px}.remove{width:26px;height:26px;right:2px;top:2px}.section-menu{max-width:calc(100vw - 32px);max-height:calc(100vh - 48px);overflow:auto}.slot.playback-selected{border-color:var(--blue);box-shadow:inset 0 0 0 2px #12608955;background:#dbeaf0}.slot.playing{border-color:#f0ca5c!important;background:#fff3ce!important;box-shadow:inset 0 0 0 3px #dcb74488!important}.slot.playing:after{content:"PLAYING";position:absolute;left:7px;top:7px;color:#765b12;font-size:8px;font-weight:800;letter-spacing:.7px}.slot.playback-selected.playing:after{content:"PLAYING"}
@media(max-width:600px){.form-tag-panel{left:auto;right:auto}.bar-menu{width:min(244px,calc(100vw - 32px))}}

/* Collapse is presentation state only; hidden bars remain in the musical document. */
.composer-identity{display:grid;gap:5px;min-width:0}.composer-title-row{display:flex;align-items:center;gap:7px;min-width:0}.composer-title-row h2{display:flex;align-items:baseline;margin:0;white-space:nowrap}.flow-disclosure,.section-disclosure,.section-play{display:grid;place-items:center;flex:0 0 auto;min-width:38px;min-height:38px;padding:0;border:1px solid #c8d2d6;border-radius:5px;background:#f7faf9;color:var(--blue);font-size:13px}.flow-disclosure:hover,.flow-disclosure:focus-visible,.section-disclosure:hover,.section-disclosure:focus-visible,.section-play:hover,.section-play:focus-visible{border-color:var(--blue);background:#eaf1f4}.composer.collapsed{padding-top:14px;padding-bottom:14px}.composer.collapsed .composer-actions,.composer.collapsed .hint,.composer.collapsed #bars{display:none}.composer.collapsed .composer-identity{gap:0}.composer.collapsed .composer-identity>.eyebrow{display:none}.section-label{gap:5px;margin-bottom:0}.section-label span{white-space:nowrap}.section-label small{color:var(--muted);font-size:9px;font-weight:600;letter-spacing:.4px;text-transform:none}.section-label:after{margin-left:7px}.section-disclosure{margin-right:1px}.section-play{background:#fcfaf5;font-size:12px}.section-play[aria-pressed="true"]{border-color:#d0ab48;background:#fff3ce;color:#765b12}.flow-section.collapsed .bar-row{display:none}.flow-section.collapsed .section-heading{margin-bottom:0}.flow-section.section-playing>.section-heading{box-shadow:inset 0 1px #ead9aa,inset 0 -1px #ead9aa}.flow-section.section-playing .section-label{color:#765b12}.transport .primary.starting{opacity:.82}.transport button:disabled{opacity:.45}
.flow-persistence{display:flex;align-items:center;gap:8px;min-height:22px;margin-left:45px;font-size:10px;color:var(--muted)}#flow-save-status[data-phase="dirty"]{color:#876b27}#flow-save-status[data-phase="error"],#flow-save-status[data-phase="recovery"]{color:#8b3f3f}#reset-saved-flow{padding:4px 7px;border:0;background:transparent;color:#8b3f3f;font-size:10px;text-decoration:underline;text-underline-offset:2px}
.flow-disclosure:before,.section-disclosure:before{content:'⌄';font:20px/1 Arial,sans-serif;color:currentColor;transform:translateY(-1px)}.flow-disclosure[aria-expanded="false"]:before,.section-disclosure[aria-expanded="false"]:before{content:'›';font-size:22px;transform:none}
@media(max-width:600px){.composer{padding:16px 14px}.composer-heading{align-items:flex-start;gap:8px}.composer-title-row{gap:4px}.composer-title-row h2{display:block}.composer-title-row h2 small{display:block;margin:4px 0 0}.composer.collapsed .composer-heading{align-items:center}.section-heading{gap:3px}.flow-disclosure,.section-disclosure,.section-play{min-width:40px;min-height:40px}.section-label{min-width:0}.section-label span{overflow:hidden;text-overflow:ellipsis}.section-label:after{display:none}.section-actions>summary{min-width:40px;min-height:40px}}
@media(max-width:600px){.composer-heading{flex-wrap:wrap}.composer-actions{margin-left:auto;flex-wrap:wrap;justify-content:flex-end}.flow-persistence{margin-left:44px;max-width:230px}.composer.collapsed .composer-heading{flex-wrap:nowrap}}

/* Collapsed sections project one compact, Jazz-symbol-only harmonic overview. */
.section-harmony-summary{display:none;min-width:0;color:#40535e;font:13px Georgia,serif}.flow-section.collapsed .section-heading{display:grid;grid-template-columns:38px 164px minmax(0,1fr) 38px 42px;gap:8px;align-items:start}.flow-section.collapsed .section-heading .section-label{width:100%;min-width:0;overflow:hidden;align-self:stretch;align-items:flex-start}.flow-section.collapsed .section-heading .section-label span{min-width:0;overflow:hidden;text-overflow:ellipsis}.flow-section.collapsed .section-heading .section-label:after{display:none}.flow-section.collapsed .section-harmony-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:36px;row-gap:5px;min-width:0;overflow:hidden}.section-summary-bar{position:relative;min-width:0;display:grid;grid-template-rows:12px 24px;align-items:stretch;border-left:1px solid #aab9bf;overflow:hidden}.section-summary-bar.section-summary-start{border-left:3px double #718891}.section-summary-bar.section-summary-row-end{border-right:1px solid #aab9bf}.section-summary-bar.section-summary-end{border-right:3px double #718891}.section-summary-cue{min-width:0;padding:1px 7px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;color:#74848c;font:italic 8px/11px 'DM Sans','PingFang HK',Arial,sans-serif}.section-summary-chords{min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center}.section-summary-rest{grid-column:1/-1}.section-summary-chord{min-width:0;padding:0 7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;text-decoration-line:none;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-skip-ink:none}.flow-section.collapsed .section-heading.section-selected{background:#f0f6f8;box-shadow:inset 0 1px #b8d1dc,inset 0 -1px #b8d1dc;border-radius:6px}.flow-section.collapsed .section-heading.section-selected .section-label{background:transparent;color:var(--blue)}.flow-section.collapsed .section-heading.section-selected .section-harmony-summary{background:transparent;color:#40535e}.flow-section.collapsed .section-heading.section-selected .section-summary-bar{border-color:#8eb2c4}.section-summary-bar.summary-bar-playing{background:rgba(220,183,68,.06)!important;box-shadow:none}.section-summary-chord.summary-chord-playing{color:inherit!important;background:transparent;font-weight:inherit;border-radius:0;text-decoration-line:underline}.flow-section.collapsed+.flow-section.collapsed{margin-top:4px}.flow-section.collapsed .section-play,.flow-section.collapsed .section-actions{position:relative;z-index:1;background:#fcfaf5}@media(max-width:600px){.flow-section.collapsed .section-heading{grid-template-columns:40px 76px minmax(0,1fr) 40px 40px;gap:3px}.flow-section.collapsed .section-label small{display:none}.flow-section.collapsed .section-harmony-summary{position:relative;display:flex;grid-auto-rows:auto;row-gap:0;height:30px;overflow:hidden;font-size:11px}.flow-section.collapsed .section-harmony-summary.has-overflow:after{content:'…';position:absolute;right:0;top:0;bottom:0;display:grid;place-items:center;padding-left:9px;background:linear-gradient(90deg,transparent,#fcfaf5 42%)}.section-summary-bar{flex:0 0 52px;display:block}.section-summary-bar.section-summary-row-end{border-right:0}.section-summary-cue{display:none}.section-summary-chords{height:30px}.section-summary-chord{padding:0 3px}.flow-section.collapsed+.flow-section.collapsed{margin-top:2px}}
.bar-menu-separator{height:1px;margin:4px 7px;background:#d9e0e2}
.bar-note-actions{position:relative}.bar-note-actions>summary{min-height:38px;display:flex;align-items:center;padding:8px 9px;list-style:none;font-size:11px;font-weight:500;text-align:left}.bar-note-actions>summary::-webkit-details-marker{display:none}.bar-note-actions[open]>summary{background:#eaf1f4;color:var(--blue)}.bar-note-panel{display:grid;gap:7px;margin:2px 0 5px;padding:8px;background:#f4f6f4;border:1px solid #d7dfe2;border-radius:5px}.bar-note-panel label{display:grid;gap:5px;color:var(--muted);font-size:9px;letter-spacing:.5px}.bar-note-panel input{min-width:0;padding:8px;border:1px solid #bdc8cd;border-radius:4px;background:white;color:var(--ink);font-size:12px}.bar-note-editor-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.bar-note-editor-actions button{min-height:38px;border:0;border-radius:4px;padding:7px;background:white;font-size:10px;font-weight:600}.bar-note-editor-actions button[data-bar-note-remove]{grid-column:1/-1;color:#8b3f3f}@media(min-width:601px){.bar-actions:has(.bar-note-actions[open])>.bar-menu{overflow:visible}.bar-note-panel{position:absolute;left:calc(100% + 8px);top:0;z-index:27;width:230px;margin:0;box-shadow:0 8px 22px #111c3524;background:#fcfaf5}.bar-note-actions.panel-left .bar-note-panel{left:auto;right:calc(100% + 8px)}}@media(max-width:600px){.bar-note-actions>summary,.bar-note-editor-actions button{min-height:40px}}

/* One-beat slots keep harmonic identity readable without changing musical proportions. */
.slot.one-beat{padding:17px 2px 7px;gap:3px}.slot.one-beat strong{font-size:20px;line-height:1}.slot.one-beat>span:not(.plus){font-size:9px;line-height:1.15}.slot.one-beat>small{display:none}.slot.one-beat em{margin-top:3px;font-size:8px}.slot.one-beat .plus{font-size:19px;line-height:1}.slot.one-beat .drop-label{font-size:8px!important}.slot-wrap.one-beat .remove{width:26px;height:26px;right:0;top:0;font-size:13px}.slot.one-beat.playback-selected:after{content:"START HERE";left:0;top:0;padding:2px 4px;border-radius:5px 0 4px 0;background:#dbeaf0;font-size:6px;line-height:1;letter-spacing:.2px}.slot.one-beat.playing:after,.slot.one-beat.playback-selected.playing:after{content:"PLAYING";left:0;top:0;padding:2px 4px;border-radius:5px 0 4px 0;background:#fff3ce;font-size:6px;line-height:1;letter-spacing:.35px}@media(max-width:600px){.slot.one-beat{padding-inline:1px}.slot.one-beat strong{font-size:18px}.slot.one-beat>span:not(.plus){font-size:8px}.slot.one-beat em{font-size:7px}}
.slot[draggable="true"]{cursor:copy}.slot.drag-source{opacity:.72;border-style:solid;border-color:var(--gold);box-shadow:inset 0 0 0 2px #c9a75d30}

/* RC26.7 Stage C header: the saved work title owns the primary hierarchy. */
.composer-heading{gap:18px;align-items:center}
.composer-heading-main{display:flex;flex:1 1 360px;align-items:flex-start;gap:10px;min-width:0}
.composer-heading-main .flow-disclosure{margin-top:15px}
.composer-identity{flex:1;gap:3px;min-width:0}
.flow-workspace-label{color:var(--blue);font-size:10px;font-weight:700;letter-spacing:2px;line-height:1.2}
#active-flow-title{max-width:100%;margin:0;color:var(--ink);font-size:29px;line-height:1.14;letter-spacing:-.55px;overflow-wrap:anywhere}
.flow-metadata{margin:2px 0 0;color:#536576;font-size:11px;line-height:1.35;letter-spacing:.02em}
.flow-persistence{min-height:18px;margin-left:0;font-size:10px}
.composer-actions{flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
.composer.collapsed .composer-identity{gap:3px}
@media(max-width:900px){
 .composer-heading{align-items:flex-start;flex-wrap:wrap}
 .composer-heading-main{flex-basis:100%}
 .composer-actions{width:100%;margin-left:48px;justify-content:flex-start}
}
@media(max-width:600px){
 .composer-heading{gap:11px}
 .composer-heading-main{width:100%;gap:7px}
 .composer-heading-main .flow-disclosure{margin-top:13px}
 #active-flow-title{font-size:24px;line-height:1.18;letter-spacing:-.35px}
 .flow-metadata{font-size:10px}
 .composer-actions{width:calc(100% - 47px);margin-left:47px;justify-content:flex-start}
 .composer-actions button{flex:1 1 auto;min-height:40px;padding-inline:9px}
 .composer.collapsed .composer-heading{flex-wrap:wrap}
}

/* May Flow RC26.7 Stage C library sheet. */
.flow-library-backdrop[hidden],.flow-library-sheet[hidden]{display:none!important}
.flow-library-backdrop{position:fixed;z-index:90;inset:0;background:rgba(3,7,10,.6);backdrop-filter:blur(2px)}
.flow-library-sheet{position:fixed;z-index:91;top:0;right:0;width:min(430px,100vw);height:100dvh;overflow:auto;padding:22px;background:#101820;color:#f3f2ea;border-left:1px solid rgba(216,195,125,.32);box-shadow:-18px 0 54px rgba(0,0,0,.4)}
.flow-library-header,.flow-library-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px}
.flow-library-header{padding-bottom:16px;border-bottom:1px solid rgba(188,202,209,.18)}
.flow-library-header h2{margin:3px 0 0;font-size:25px}
.flow-library-close{flex:0 0 44px;width:44px;height:44px;padding:0;border-radius:50%;font-size:25px;line-height:1}
.flow-library-toolbar{padding:16px 0 12px}
.flow-library-toolbar p{margin:0;color:#aeb9bf;font-size:13px}
.flow-library-toolbar button{flex:0 0 auto;min-height:42px}
.flow-library-global-actions{display:flex;flex:0 0 auto;gap:8px}
.flow-library-list{display:grid;gap:10px}
.flow-library-item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:stretch;padding:8px;border:1px solid rgba(188,202,209,.2);border-radius:10px;background:#141e27}
.flow-library-item.active{border-color:#d8bd6f;box-shadow:inset 3px 0 #d8bd6f}
.flow-library-open{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;min-width:0;min-height:72px;padding:8px 10px;text-align:left;background:transparent;border-color:transparent}
.flow-library-open:hover,.flow-library-open:focus-visible{background:#1b2a35;color:#f6f3e6}
.flow-library-open:hover .flow-library-title,.flow-library-open:focus-visible .flow-library-title{color:#f6f3e6}
.flow-library-open:hover .flow-library-meta,.flow-library-open:hover time,.flow-library-open:focus-visible .flow-library-meta,.flow-library-open:focus-visible time{color:#c1cbd0}
.flow-library-title{grid-column:1/-1;overflow:hidden;color:#f6f3e6;font-size:16px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.flow-library-meta,.flow-library-open time{color:#aeb9bf;font-size:12px;font-weight:400;letter-spacing:.01em;text-transform:none}
.flow-library-open time{grid-column:1/-1}
.flow-active-label{position:absolute;top:7px;right:7px;color:#dfc572;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.flow-library-item.active .flow-library-title{padding-right:52px}
.flow-library-rename{align-self:center;min-width:70px;min-height:44px;padding:8px 10px}
.flow-rename-form{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:14px}
.flow-rename-form label{color:#aeb9bf;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.flow-rename-form input{width:100%;min-height:44px;padding:9px 11px;border:1px solid rgba(216,195,125,.42);border-radius:7px;background:#0b1218;color:#f6f3e6;font:inherit}
.flow-rename-actions{display:flex;justify-content:flex-end;gap:8px}
.flow-rename-actions button{min-height:42px}
.flow-library-message{min-height:20px;margin:12px 0 0;color:#e4c77a;font-size:12px}
.flow-library-sheet :focus-visible{outline:2px solid #f0cf6d;outline-offset:2px}
details:not([open])>:not(summary){display:none!important}
#active-flow-title{color:var(--ink)}
@media(max-width:599px){
 .flow-library-sheet{width:100vw;padding:18px 14px;border-left:0}
 .flow-library-header h2{font-size:22px}
 .flow-library-toolbar{align-items:flex-start}
 .flow-library-toolbar{display:grid}.flow-library-global-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.flow-library-global-actions button{width:100%}
 .flow-library-item{grid-template-columns:minmax(0,1fr) auto}
 .flow-library-open{min-height:76px;padding:7px}
 .flow-library-rename{min-width:64px;padding:7px}
 .composer-title-row h2{min-width:0;overflow-wrap:anywhere}
}

/* RC26.7 Stage D Flow actions and destructive confirmation. */
.flow-item-actions{position:relative;align-self:center;max-width:none}
.flow-item-actions>summary{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #c8cdd0;border-radius:7px;background:#fcfaf5;color:var(--ink);font-size:18px;line-height:1;list-style:none}
.flow-item-actions>summary::-webkit-details-marker{display:none}
.flow-item-actions[open]>summary{border-color:#d8bd6f;background:#243440;color:#fff}
.flow-item-menu{position:absolute;z-index:3;right:0;top:calc(100% + 5px);display:grid;width:142px;padding:5px;border:1px solid rgba(216,195,125,.36);border-radius:9px;background:#0b1218;box-shadow:0 12px 28px #0008}
.flow-item-menu button{min-height:42px;padding:8px 10px;border:0;background:transparent;color:#f3f2ea;text-align:left}
.flow-item-menu button:hover,.flow-item-menu button:focus-visible{background:#243440;color:#fff}
.flow-item-menu .flow-delete-action{color:#f2a59e}
.flow-delete-backdrop[hidden],.flow-delete-dialog[hidden]{display:none!important}
.flow-delete-backdrop{position:fixed;z-index:92;inset:0;background:rgba(3,7,10,.7)}
.flow-delete-dialog{position:fixed;z-index:93;left:50%;top:50%;width:min(420px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto;transform:translate(-50%,-50%);padding:24px;border:1px solid rgba(216,195,125,.42);border-radius:12px;background:#101820;color:#f3f2ea;box-shadow:0 22px 70px #000a}
.flow-delete-dialog h2{margin:0 0 15px;color:#f6f3e6;font-size:23px;overflow-wrap:anywhere}
.flow-delete-dialog p{margin:8px 0;color:#c1cbd0;font-size:14px;line-height:1.45}
.flow-delete-error{min-height:20px!important;color:#f2a59e!important;font-size:12px!important}
.flow-delete-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.flow-delete-actions button{min-height:44px}
.flow-delete-actions .danger{border-color:#9d3d38;background:#9d3d38;color:#fff}
.flow-delete-dialog :focus-visible{outline:2px solid #f0cf6d;outline-offset:2px}
@media(max-width:599px){
 .flow-item-menu{position:fixed;left:14px;right:14px;top:auto;bottom:14px;width:auto;padding:8px;z-index:92}
 .flow-item-menu button{min-height:48px}
 .flow-delete-dialog{padding:20px}
 .flow-delete-actions{display:grid;grid-template-columns:1fr 1fr}
}