/* Bounded editorial spread. All composition and control rules live here. */
body[data-view="mix"] .workspace { width:100%; max-width:1280px; justify-self:center; padding:26px 36px 28px; }
body[data-view="mix"] .workspace-topbar { padding:0; margin:0; }
body[data-view="mix"] .workspace-topbar .eyebrow { margin:0; padding-bottom:16px; font-size:11px; }
body[data-view="mix"] :is(#workspaceTitle,#songStatusSummary,#previewStopButton) { display:none!important; }
body[data-view="mix"] :is(.song-view,#stemsPanel,#mixerPanel) { padding:0; margin:0; border:0; background:none; box-shadow:none; }
body[data-view="mix"] #mixerPanel { display:flex; flex-direction:column; gap:0; }
.arrangement-intro { display:grid; grid-template-columns:minmax(250px,1fr) minmax(260px,430px) 180px; gap:24px; align-items:center; min-height:194px; padding:20px 0 24px; }
.arrangement-identity { min-width:0; }
#arrangementTitle { margin:0; font:400 clamp(44px,4.5vw,68px)/1.06 var(--book-serif); letter-spacing:-1.5px; width:fit-content; max-width:100%; }
#arrangementTitle:dir(rtl) { letter-spacing:0; }
#arrangementArtist { margin:6px 0 0; width:fit-content; max-width:100%; font:26px/1.2 var(--book-serif); }
#arrangementArtist[hidden] { display:none; }
.arrangement-thesis { margin:14px 0 0; font:italic 24px/1.25 var(--book-serif); }
#arrangementArt img { display:block; width:100%; height:auto; max-height:175px; object-fit:contain; mix-blend-mode:multiply; }
:root:not(.light) #arrangementArt img { filter:invert(1); mix-blend-mode:screen; }
.arrangement-intro .mix-header-actions { display:flex; flex-direction:column; gap:12px; align-items:stretch; }
.arrangement-intro button { min-height:42px; font-size:15px; }
.arrangement-intro #exportMixButton { border:0; background:none; text-align:right; }
.arrangement-intro #singWithMixButton { font-family:var(--book-serif); font-size:17px; white-space:nowrap; padding-inline:10px; }
.arrangement-spread { display:grid; grid-template-columns:205px minmax(0,1fr); gap:32px; }
.arrangement-margin { padding-inline-end:24px; border-inline-end:1px solid var(--book-rule); }
.arrangement-folio { font:italic 56px/1 var(--book-serif); color:var(--book-red); }
.arrangement-margin h2 { font:12px/1.4 var(--book-serif); text-transform:uppercase; letter-spacing:.12em; margin:10px 0 0; padding-bottom:12px; border-bottom:1px solid var(--book-rule); }
.arrangement-margin>p { font:20px/1.25 var(--book-serif); margin:14px 0 38px; }
body[data-view="mix"] #mixTransposeControl { display:flex; flex-direction:column; align-items:stretch; gap:10px; padding:14px 12px 16px; margin:0; border-block:1px solid var(--book-rule); background:color-mix(in srgb,var(--book-red),transparent 96%); }
#mixTransposeControl .transpose-label { font:600 11px/1.3 var(--book-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--book-red); }
#mixTransposeControl .transpose-main { display:grid; grid-template-columns:34px minmax(0,1fr) 34px; align-items:center; gap:6px; }
#mixTransposeControl .transpose-readout { grid-column:2; grid-row:1; min-width:0; padding:0; border:0; background:none; text-align:center; font:23px/1.25 var(--book-serif); color:var(--book-ink); }
#mixTransposeControl [data-transpose-step="-1"] { grid-column:1; grid-row:1; }
#mixTransposeControl [data-transpose-step="1"] { grid-column:3; grid-row:1; }
#mixTransposeControl .step-button { width:34px; height:34px; border-radius:50%; background:var(--book-page); border:1px solid var(--book-red); color:var(--book-red); }
#mixTransposeControl .arrangement-key-note { margin:0; font:12px/1.4 var(--book-ui); color:var(--book-muted); }
.arrangement-reset { margin-top:28px; padding:12px 0 0; width:100%; border:0; border-top:1px solid var(--book-rule); background:none; text-align:left; text-decoration:underline; text-underline-offset:4px; font:16px/1.4 var(--book-serif); color:var(--book-ink); cursor:pointer; }
.arrangement-columns,body[data-view="mix"] .mixer-row { display:grid; grid-template-columns:minmax(165px,1fr) minmax(200px,390px) 170px; gap:20px; align-items:center; }
.arrangement-columns { min-height:34px; padding-bottom:12px; font:11px/1.35 var(--book-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--book-muted); }
.arrangement-columns small { display:block; font-size:10px; letter-spacing:0; text-transform:none; margin-top:3px; }
.arrangement-columns span:nth-child(n+3) { text-align:center; }
.arrangement-columns span:last-child { text-align:left; }
body[data-view="mix"] #mixerControls { display:block; }
body[data-view="mix"] .mixer-row { min-height:62px; padding:8px 0; border:0; border-top:1px solid var(--book-rule); border-image:var(--pencil-borders) 8 0 / 5px 0 0 0 stretch; border-radius:0; background:none; box-shadow:none; opacity:1; }
body[data-view="mix"] .mixer-name { display:block; }
body[data-view="mix"] .mixer-name strong { display:block; white-space:normal; font:30px/1.08 var(--book-serif); text-transform:none; }
body[data-view="mix"] .mixer-name strong::first-letter { text-transform:uppercase; }
body[data-view="mix"] .mixer-name small { display:block; margin-top:4px; font:13px/1.25 var(--book-ui); }
body[data-view="mix"] .is-vocal .mixer-name strong { color:var(--book-red); }
body[data-view="mix"] .volume-control { position:relative; grid-template-columns:14px minmax(0,1fr) 14px; gap:8px; align-items:center; font:15px/1 var(--book-ui); font-weight:400; }
.volume-direction { color:var(--book-muted); text-align:center; }
body[data-view="mix"] .mix-toggle-button { min-width:0; min-height:38px; padding:6px 4px; border:0; border-bottom:1px solid transparent; border-radius:0; background:none; color:var(--book-muted); font:11px/1 var(--book-ui); letter-spacing:.08em; text-transform:uppercase; }
body[data-view="mix"] .mix-toggle-button.active { border-color:var(--book-red); color:var(--book-red); }
.mix-include-actions { justify-self:start; display:flex; align-items:center; gap:8px; min-width:156px; }
.mix-solo-action { width:102px; margin:0; padding:6px 4px; visibility:hidden; opacity:0; pointer-events:none; transition:opacity 120ms ease; }
.mix-include-actions:hover .mix-solo-action,.mix-include-actions:has(.mix-include:focus-visible) .mix-solo-action,.mix-solo-action:focus-visible,.mixer-row.is-solo .mix-solo-action { visibility:visible; opacity:1; pointer-events:auto; }
.mix-include { justify-self:center; display:grid; place-items:center; width:38px; height:38px; padding:0; border:0; border-radius:0; background:none; cursor:pointer; }
.mix-include:disabled { cursor:not-allowed; opacity:.72; }
.mix-include span { display:block; width:12px; height:12px; border:1px solid var(--book-muted); border-radius:50%; background:transparent; }
.mix-include[aria-checked="true"] span { border-color:var(--book-red); background:var(--book-red); box-shadow:0 0 0 3px var(--book-page),0 0 0 4px var(--book-red); }
body[data-view="mix"] :is(.is-muted,.is-audition-muted) :is(.mixer-name,.volume-control) { opacity:.5; }
body[data-view="mix"] .is-solo :is(.mixer-name,.volume-control) { opacity:1; }
.arrangement-footnote { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; min-height:46px; border-top:1px solid var(--book-rule); font:13px/1.4 var(--book-ui); color:var(--book-muted); }
#mixSoloStatus { color:var(--book-red); }
#exitMixSolo { padding:6px; border:0; background:none; color:var(--book-red); text-decoration:underline; font:inherit; cursor:pointer; }
body[data-view="mix"] #previewTransport { order:5; position:relative; display:grid; grid-template-columns:auto 76px 56px 86px auto minmax(90px,1fr) 190px; align-items:center; gap:14px; padding:18px 0 0; margin-top:18px; border:0; border-top:1px solid var(--book-rule); border-image:var(--pencil-borders) 8 0 / 8px 0 0 0 stretch; border-radius:0; background:none; box-shadow:none; }
#previewTransport .arrangement-preview-label { grid-column:1; grid-row:1; font:13px/1.3 var(--book-ui); }
body[data-view="mix"] #previewRewindButton { grid-column:2; grid-row:1; }
body[data-view="mix"] #previewPlayButton { grid-column:3; grid-row:1; width:56px; height:56px; border:0; border-radius:50%; background:var(--book-red); color:var(--book-page); }
body[data-view="mix"] #previewForwardButton { grid-column:4; grid-row:1; }
body[data-view="mix"] :is(#previewRewindButton,#previewForwardButton) { width:auto; min-width:76px; min-height:44px; height:44px; padding:8px 4px; border:0; border-radius:0; background:none; color:var(--book-ink); font:500 13px/1 var(--book-ui); white-space:nowrap; }
body[data-view="mix"] :is(#previewRewindButton,#previewForwardButton)::before { display:none; }
body[data-view="mix"] #previewTime { grid-column:5; grid-row:1; white-space:nowrap; font:13px/1.3 var(--book-ui); }
body[data-view="mix"] #previewSeek { grid-column:6; grid-row:1; min-width:0; }
.arrangement-output { grid-column:7; display:grid; grid-template-columns:auto auto; align-items:center; gap:8px; padding-left:20px; border-left:1px solid var(--book-rule); font:13px/1.2 var(--book-ui); }
.arrangement-output input { grid-column:1/-1; }
body[data-view="mix"] #mixStatusText { margin:2px 0; font:12px/1.4 var(--book-ui); color:var(--book-muted); }
body[data-view="mix"] #mixerPanel>.meter { height:2px; margin:0; }
body[data-view="mix"] #mixerPanel>.meter:has(span[style*="width: 0%"]) { visibility:hidden; }
/* Native keyboard-operable ranges, with a flat ink track. The midpoint notch marks unity gain. */
body[data-view="mix"] #mixerPanel input[type="range"] { appearance:none; -webkit-appearance:none; width:100%; min-width:0; height:24px; padding:0; border:0; border-radius:0; background:transparent; cursor:pointer; }
body[data-view="mix"] #mixerPanel input[type="range"]::-webkit-slider-runnable-track { height:4px; border-radius:2px; background:linear-gradient(to right,var(--book-red) var(--range-fill,50%),var(--book-rule) var(--range-fill,50%)); }
body[data-view="mix"] #mixerPanel input[type="range"]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:18px; height:18px; margin-top:-7px; border:2px solid var(--book-page); border-radius:50%; background:var(--book-red); }
body[data-view="mix"] #mixerPanel input[type="range"]::-moz-range-track { height:4px; background:var(--book-rule); }
body[data-view="mix"] #mixerPanel input[type="range"]::-moz-range-progress { height:4px; background:var(--book-red); }
body[data-view="mix"] #mixerPanel input[type="range"]::-moz-range-thumb { width:14px; height:14px; border:2px solid var(--book-page); border-radius:50%; background:var(--book-red); }
body[data-view="mix"] #mixerPanel .mixer-row input[type="range"]::-webkit-slider-runnable-track { background:var(--book-rule); }
body[data-view="mix"] #mixerPanel .mixer-row input[type="range"]::-moz-range-progress { background:transparent; }
body[data-view="mix"] .volume-control::after { content:""; position:absolute; left:50%; width:1px; height:18px; background:var(--book-ink); pointer-events:none; transform:translateX(-50%); z-index:0; }
#previewSeek { --range-fill:0%; } #mixOutput { --range-fill:100%; }
body:not([data-view="mix"]) .arrangement-spread { display:none; }
@media(max-width:1350px) {
 body[data-view="mix"] .workspace { padding:24px; }
 .arrangement-intro { grid-template-columns:minmax(230px,1fr) minmax(190px,300px) 160px; gap:16px; }
 #arrangementTitle { font-size:50px; }
 .arrangement-spread { grid-template-columns:175px minmax(0,1fr); gap:24px; }
 .arrangement-columns,body[data-view="mix"] .mixer-row { grid-template-columns:minmax(120px,1fr) minmax(150px,1.1fr) 156px; gap:14px; }
 body[data-view="mix"] .mixer-name strong { font-size:26px; }
 body[data-view="mix"] #previewTransport { grid-template-columns:70px 52px 80px auto minmax(80px,1fr) 150px; gap:12px; }
 #previewTransport .arrangement-preview-label { display:none; }
 body[data-view="mix"] #previewRewindButton { grid-column:1; }
 body[data-view="mix"] #previewPlayButton { grid-column:2; width:52px; height:52px; }
 body[data-view="mix"] #previewForwardButton { grid-column:3; }
 body[data-view="mix"] #previewTime { grid-column:4; }
 body[data-view="mix"] #previewSeek { grid-column:5; }
 .arrangement-output { grid-column:6; }
}
@media(max-width:1000px) {
 .arrangement-intro { grid-template-columns:1fr 240px; }
 #arrangementArt { grid-column:2; grid-row:1; }
 .arrangement-intro .mix-header-actions { grid-column:1/-1; flex-direction:row; justify-content:flex-end; }
 .arrangement-spread { grid-template-columns:1fr; gap:20px; }
 .arrangement-margin { display:grid; grid-template-columns:1fr 220px; align-items:start; column-gap:24px; padding:0 0 18px; border:0; border-bottom:1px solid var(--book-rule); }
 .arrangement-folio { display:none; }
 .arrangement-margin h2 { grid-column:1; margin:0; }
 .arrangement-margin>p { grid-column:1; margin:10px 0 0; }
 body[data-view="mix"] #mixTransposeControl { grid-column:2; grid-row:1/3; }
 .arrangement-reset { grid-column:2; margin-top:12px; padding-top:8px; }
 body[data-view="mix"] #previewTransport { grid-template-columns:70px 52px 80px auto minmax(80px,1fr); }
 .arrangement-output { grid-column:1/-1; grid-row:2; grid-template-columns:auto auto 140px; justify-content:end; border:0; padding:6px 0; }
 .arrangement-output input { grid-column:3; }
}
@media(max-width:650px) {
 .arrangement-intro { grid-template-columns:1fr; }
 #arrangementArt { grid-column:1; grid-row:2; max-width:360px; justify-self:center; }
 .arrangement-margin { grid-template-columns:1fr; }
 body[data-view="mix"] #mixTransposeControl,.arrangement-reset { grid-column:1; grid-row:auto; margin-top:18px; }
 .arrangement-columns,body[data-view="mix"] .mixer-row { grid-template-columns:minmax(90px,1fr) minmax(95px,1fr) 142px; gap:8px; }
 body[data-view="mix"] .mixer-name strong { font-size:22px; }
 .arrangement-columns { font-size:9px; letter-spacing:0; }
 body[data-view="mix"] .volume-control { grid-template-columns:12px minmax(0,1fr) 12px; gap:4px; }
 body[data-view="mix"] .mix-toggle-button { padding:5px 2px; font-size:10px; }
 .mix-solo-action { width:88px; font-size:9px; }
 .mix-include { width:32px; height:32px; } .mix-include span { width:10px; height:10px; }
 body[data-view="mix"] #previewTransport { grid-template-columns:70px 52px 80px auto; }
 body[data-view="mix"] #previewSeek { grid-column:1/-1; grid-row:2; }
 .arrangement-output { grid-row:3; }
}
@media(forced-colors:active) { body[data-view="mix"] #mixerPanel input[type="range"] { appearance:auto; } .mix-include[aria-checked="true"] { background:Highlight; } }

@media(min-width:1001px) and (max-height:850px) {
 .arrangement-intro { min-height:158px; padding-block:14px; }
 #arrangementArt img { max-height:140px; }
 body[data-view="mix"] .mixer-row { min-height:58px; padding-block:7px; }
 body[data-view="mix"] #previewTransport { margin-top:10px; padding-top:12px; }
}