.stageLeftTools{display:contents}
body[data-mode=stage]:not(.separateStageScreen),body[data-mode=prog]{min-height:100dvh}
body[data-mode=stage]:not(.separateStageScreen) header,body[data-mode=prog] header{padding:10px 18px}
body[data-mode=stage]:not(.separateStageScreen) .modeNav,body[data-mode=prog] .modeNav{padding:7px 18px;gap:5px;flex-wrap:wrap}
body[data-mode=stage]:not(.separateStageScreen) footer,body[data-mode=prog] footer{display:none}
body[data-mode=stage]:not(.separateStageScreen) main.layout,body[data-mode=prog] main.layout{padding:10px 16px;margin:0;max-width:none}
body[data-mode=stage]:not(.separateStageScreen) .top>section:first-child{display:grid;grid-template-columns:minmax(170px,.8fr) minmax(260px,2.5fr) minmax(190px,1fr);grid-template-rows:auto auto auto minmax(0,1fr);gap:8px;padding:0 10px 10px;height:auto;min-height:0}
body[data-mode=stage]:not(.separateStageScreen) .top>section:first-child>.bar{grid-column:1/-1;padding:10px}
body[data-mode=stage]:not(.separateStageScreen) .stageLeftTools{display:flex;flex-direction:column;grid-column:1;grid-row:2/5;gap:10px;min-width:0}
body[data-mode=stage]:not(.separateStageScreen) .stageSideTools{grid-column:3;grid-row:2/5;gap:8px}
body[data-mode=stage]:not(.separateStageScreen) .sceneLayoutToolbar{grid-column:2;grid-row:2;padding:6px;min-height:0}
body[data-mode=stage]:not(.separateStageScreen) .stageSelectionBar{grid-column:2;grid-row:3;padding:6px;width:100%;gap:6px}
body[data-mode=stage]:not(.separateStageScreen) .stage,body[data-mode=stage]:not(.separateStageScreen) .stage:not(.hasPhoto){grid-column:2;grid-row:4;width:100%;height:440px;min-height:0;align-self:center;justify-self:center}
body[data-mode=stage]:not(.separateStageScreen) .stage.hasPhoto{height:auto;width:min(100%,calc(440px * var(--photo-ratio)));aspect-ratio:var(--photo-ratio)}
body[data-mode=stage]:not(.separateStageScreen) .stageLeftTools .planProgrammingBar{display:flex;flex-direction:column;padding:8px;gap:8px;overflow:visible;max-height:none}
body[data-mode=stage]:not(.separateStageScreen) .beamModelControls{margin:0;padding:8px}
body[data-mode=stage]:not(.separateStageScreen) .riggingEditor,body[data-mode=stage]:not(.separateStageScreen) .stageSideTools #movementCalibration{padding:8px}
body[data-mode=stage]:not(.separateStageScreen) h3{font-size:13px;margin:6px 0 10px}
body[data-mode=stage]:not(.separateStageScreen) button{padding:7px 9px;font-size:12px}
body[data-mode=stage]:not(.separateStageScreen) .movementWorkspace{gap:8px}
body[data-mode=stage]:not(.separateStageScreen) .movementOptions p{margin:5px 0;font-size:11px;line-height:1.3}
body[data-mode=stage]:not(.separateStageScreen) .movementKeyboard{min-height:90px;padding:8px;margin:0 auto 5px}
body[data-mode=prog] #progInspector{position:static;max-height:none;overflow:visible}
body[data-mode=prog] .cueWorkspace,body[data-mode=prog] .cueWorkspace:has(#cueEditor:not([hidden])){grid-template-columns:minmax(300px,1.2fr) minmax(300px,1fr);gap:12px}
body[data-mode=prog] .cueTop{flex-direction:row;gap:10px}body[data-mode=prog] .cueTop h2{font-size:18px}body[data-mode=prog] .cueTop p{display:none}
body[data-mode=prog] .cueToolbar{margin:8px 0}body[data-mode=prog] #cueTracerStatus{margin:4px 0;font-size:11px}
body[data-mode=prog] .cuePad{min-height:52px;padding:6px}body[data-mode=prog] .cuePad:has(img){min-height:64px}body[data-mode=prog] .cueBank{margin-bottom:8px}
body[data-mode=prog] .progHiddenBank,body[data-mode=prog] .progHiddenCategory{display:none!important}
#progBankNav{display:none}body[data-mode=prog] #progBankNav{display:flex;margin:4px 0}body[data-mode=prog] #progBankNav select{padding:5px}
#progParameterTabs{padding:8px;gap:5px}#progParameterTabs button{font-size:11px;padding:6px 8px}
body[data-mode=prog] .progInspectorHead{padding:10px}body[data-mode=prog] #progInspectorContent>section{padding:10px}
body[data-mode=prog] #cueEditor{padding:10px;margin:8px 0 0}body[data-mode=prog] #cueAppearanceControls{display:grid;grid-template-columns:1fr 1.3fr;gap:8px}
body[data-mode=prog] #cueAppearanceControls>section{padding:7px 0}body[data-mode=prog] #cueAppearanceControls>section:nth-child(2){grid-column:1;grid-row:2}body[data-mode=prog] #cueAppearanceControls>section:nth-child(3){grid-column:2;grid-row:1/3}
body[data-mode=prog] #cueAppearancePreview{min-height:45px;margin:4px 0;padding:7px}body[data-mode=prog] #cueAppearancePreviewInk{height:35px}body[data-mode=prog] #cueAppearanceControls>p{margin:4px 0}
body[data-mode=prog] #cueEditor label{margin:7px 0}body[data-mode=prog] #cueEditor #cueLabel{width:100%}body[data-mode=prog] #cueDrawingTools{margin:7px 0;gap:5px}body[data-mode=prog] .cueAppearanceSwatch{width:23px;height:23px}
body[data-mode=prog] #midiMonitorBar{margin:7px 0;padding:7px}body[data-mode=prog] button{padding:7px 9px}
#chaseDesk{display:none}body[data-mode=prog] #chaseDesk,body[data-mode=live] #chaseDesk{display:block}.chasePadEditor{padding:10px;margin-top:10px;border:1px solid #46536b;border-radius:8px;display:flex;flex-wrap:wrap;gap:8px}.chasePadEditor>div{width:100%}.chasePadEditor .actions{margin:5px 0}.chasePadEditor .actions span{flex:1}.chasePadEditor input{background:#101722;color:white;border:1px solid #47566c;border-radius:5px;padding:6px}.chasePadEditor input[type=number]{width:65px}.chasePadEditor select{max-width:100%}
#livePadBoard{display:none}body[data-mode=live] #cueDesk>*:not(#livePadBoard){display:none!important}body[data-mode=live] #livePadBoard{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));gap:8px;height:calc(100dvh - 150px);min-height:320px}body[data-mode=live] #midiMonitorBar,body[data-mode=live] footer{display:none!important}body[data-mode=live] header{padding:10px 18px}body[data-mode=live] .modeNav{padding:7px 18px}body[data-mode=live] main.layout{padding:10px 16px;max-width:none}.liveBoardPad{padding:8px;text-align:left;min-width:0;min-height:0;overflow:hidden;position:relative;display:flex;flex-direction:column;gap:3px;border:1px dashed #46566c;background:#151d29}.liveBoardPad.recorded{border:1px solid #ffffff40}.liveBoardPad small{font:10px ui-monospace,monospace;color:#ffffff88}.liveBoardPad strong{font-size:12px;overflow-wrap:anywhere}.liveBoardPad img{width:100%;height:24px;object-fit:contain;min-height:0}#liveAssignDialog{background:#19212e;color:#fff;border:1px solid #5d708b;border-radius:12px;max-width:90vw;padding:22px}#liveAssignDialog select{display:block;max-width:100%;margin:14px 0}#liveAssignDialog button{margin-right:8px}

/* Stage: reserve the entire center column for the scene. */
body[data-mode=stage]:not(.separateStageScreen) .top>section:first-child{grid-template-columns:minmax(155px,.65fr) minmax(260px,3fr) minmax(220px,.95fr);grid-template-rows:minmax(0,1fr);height:calc(var(--stage-space,600px) + 12px);align-items:start;padding:6px;gap:10px}
body[data-mode=stage]:not(.separateStageScreen) .stageLeftTools{grid-column:1;grid-row:1;align-self:start}
body[data-mode=stage]:not(.separateStageScreen) .stageSideTools{grid-column:3;grid-row:1;align-self:start;min-height:0}
body[data-mode=stage]:not(.separateStageScreen) .stage,body[data-mode=stage]:not(.separateStageScreen) .stage:not(.hasPhoto){grid-column:2;grid-row:1;height:var(--stage-space,600px);max-height:var(--stage-space,600px);width:100%;min-height:0;align-self:center}
body[data-mode=stage]:not(.separateStageScreen) .stage.hasPhoto{height:auto;width:min(100%,calc(var(--stage-space,600px) * var(--photo-ratio)));aspect-ratio:var(--photo-ratio);min-height:0}
#stageRightInfo{display:flex;flex-direction:column;gap:8px;min-width:0}
body[data-mode=stage] #stageRightInfo>.bar{padding:6px;align-items:flex-start;flex-direction:column;gap:5px}
body[data-mode=stage] #stageRightInfo h2{font-size:18px;margin:4px 0}
body[data-mode=stage] #stageRightInfo .sceneLayoutToolbar,body[data-mode=stage] #stageRightInfo .stageSelectionBar{width:100%;padding:7px;min-width:0;overflow:visible;max-height:none;justify-content:flex-start;text-align:left;gap:6px}
body[data-mode=stage] #stageRightInfo .sceneLayoutToolbar span{min-width:0;flex-basis:100%;font-size:11px;line-height:1.4}
body[data-mode=stage] #stageRightInfo .stageSelectionBar strong{width:100%;text-align:left}
body[data-mode=stage] #stageRightInfo .stageLabel{position:static;inset:auto;transform:none;width:100%;padding:5px 7px;font-size:9px;line-height:1.4;letter-spacing:.4px;text-align:left}

#progScenePane{display:none}
body[data-mode=prog] .cueWorkspace,body[data-mode=prog] .cueWorkspace:has(#cueEditor:not([hidden])){grid-template-columns:minmax(200px,1fr) minmax(280px,2fr) minmax(220px,1.05fr);height:var(--prog-space,580px);align-items:start;gap:10px}
body[data-mode=prog] #progLeft{grid-column:1;grid-row:1}
body[data-mode=prog] #progInspector{grid-column:3;grid-row:1}
body[data-mode=prog] #progScenePane{display:flex;align-items:center;justify-content:center;grid-column:2;grid-row:1;min-width:0;height:var(--prog-space,580px)}
body[data-mode=prog] #progScenePane .stage{display:block;position:relative;width:100%;height:100%;min-height:0;border:1px solid #3b4455;border-radius:10px}
body[data-mode=prog] #progScenePane .stage.hasPhoto{height:auto;width:min(100%,calc(var(--prog-space,580px) * var(--photo-ratio)));aspect-ratio:var(--photo-ratio);max-height:100%}
body[data-mode=prog] #progScenePane .stageLabel{display:none}
body[data-mode=prog] #cueAppearanceControls{grid-template-columns:1fr}
body[data-mode=prog] #cueAppearanceControls>section:nth-child(2),body[data-mode=prog] #cueAppearanceControls>section:nth-child(3){grid-column:auto;grid-row:auto}
body[data-mode=prog] .cuePad{min-height:48px;padding:5px}body[data-mode=prog] .cuePad strong{font-size:10px}

/* Two memory banks and two chase banks flank the central scene in Prog. */
#progChases{display:none}
body[data-mode=prog] #progInspector{display:none!important}
body[data-mode=prog] #progChases{display:block;grid-column:3;grid-row:1;min-width:0}
body[data-mode=prog] #chaseDesk{display:block}
body[data-mode=prog] .chaseBank{margin-bottom:8px}
body[data-mode=prog] .chaseBank h3,body[data-mode=prog] .cueBank h3{font-size:12px;color:#a7b7cc;margin:8px 0}
body[data-mode=prog] #progChases .cueGrid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px;min-width:0}
body[data-mode=prog] #progBankNav[hidden]{display:none}
#cueBanks{position:relative}#chaseLinkOverlay{position:absolute;inset:0;width:100%;height:100%;z-index:8;pointer-events:none;overflow:visible}#chaseLinkOverlay .chaseWire{pointer-events:stroke;cursor:crosshair;stroke-width:3;filter:drop-shadow(0 1px 2px #000)}#chaseLinkOverlay .chaseWire:hover{stroke:#c7ff67;stroke-width:5}#chaseLinkOverlay circle{pointer-events:all;cursor:grab;stroke:#111722;stroke-width:1.5;touch-action:none}#chaseLinkOverlay text{font-weight:bold}.cuePad.chaseSelected{outline:2px solid #ffd27f;outline-offset:1px}.cuePad.chaseRecording{outline:3px solid #f77878;background:#7b3046!important}#chaseSettingsDialog{background:#19212e;color:#fff;border:1px solid #5d708b;border-radius:12px;max-width:90vw;padding:22px}#chaseSettingsDialog label{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:15px 0}#chaseSettingsDialog label[hidden],#chaseSettingsDialog output[hidden]{display:none}#chaseSettingsDialog input[type=number]{width:85px;background:#101722;color:#fff;border:1px solid #47566c;padding:7px}#chaseSettingsDialog button{margin:8px 6px 0 0}#chaseSettingsDialog p{font-size:12px;color:#b1c1d5}

/* Both pad banks use the same columns, cell height and content limits. */
body[data-mode=prog] .cueWorkspace,body[data-mode=prog] .cueWorkspace:has(#cueEditor:not([hidden])){grid-template-columns:minmax(220px,1fr) minmax(280px,2fr) minmax(220px,1fr)}
body[data-mode=prog] .cueBank,body[data-mode=prog] .chaseBank{padding:0;margin:0 0 8px;overflow:visible}
body[data-mode=prog] #cueBanks .cueGrid,body[data-mode=prog] #progChases .cueGrid{grid-template-columns:repeat(8,minmax(0,1fr));grid-auto-rows:64px;gap:7px;min-width:0}
body[data-mode=prog] #cueBanks .cuePad,body[data-mode=prog] #progChases .cuePad{box-sizing:border-box;width:100%;height:64px;min-height:64px;max-height:64px;min-width:0;padding:5px;border-radius:7px;overflow:hidden}
body[data-mode=prog] #cueBanks .cuePad strong,body[data-mode=prog] #progChases .cuePad strong{font-size:10px;line-height:12px;max-height:24px;overflow:hidden;margin-top:4px}
body[data-mode=prog] #cueBanks .cuePad img,body[data-mode=prog] #progChases .cuePad img{height:18px;min-height:18px;max-height:18px;object-fit:contain;flex-shrink:0}

#chaseSettingsDialog #deleteChase{color:#ffb5ad;border-color:#7d3d41}

/* Sixteen larger, equal pads on either side of the scene. */
body[data-mode=prog] .cueWorkspace{--prog-pad-height:clamp(64px,calc((var(--prog-space,580px) - 150px)/4),110px)}
body[data-mode=prog] #cueBanks .cueGrid,body[data-mode=prog] #progChases .cueGrid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:var(--prog-pad-height);gap:8px}
body[data-mode=prog] #cueBanks .cuePad,body[data-mode=prog] #progChases .cuePad{height:var(--prog-pad-height);min-height:var(--prog-pad-height);max-height:var(--prog-pad-height);padding:8px}
body[data-mode=prog] #cueBanks .cuePad strong,body[data-mode=prog] #progChases .cuePad strong{font-size:12px;line-height:15px;max-height:30px}
body[data-mode=prog] #cueBanks .cuePad img,body[data-mode=prog] #progChases .cuePad img{height:26px;min-height:0;max-height:26px}
body[data-mode=prog] .chaseBank[hidden]{display:none!important}.chaseBankNavigation{display:flex;align-items:center;gap:8px;font-size:12px;margin:4px 0}.chaseBankNavigation select{padding:5px}

.cuePad.cuePlaying,.liveBoardPad.cuePlaying{outline:3px solid #c7ff67;outline-offset:1px;box-shadow:0 0 15px #c7ff6755}.cuePad.chasePlaying,.liveBoardPad.chasePlaying{outline:3px solid #7ddcff;outline-offset:1px}#chaseLinkOverlay .chaseWireActive{stroke:#c7ff67;stroke-width:5}
/* Readable controls in the two Stage side columns. */
body[data-mode=stage]:not(.separateStageScreen) :is(.stageLeftTools,.stageSideTools){font-size:14px;line-height:1.4}
body[data-mode=stage]:not(.separateStageScreen) :is(.stageLeftTools,.stageSideTools) :is(p,label,summary,output,select,input,button){font-size:14px;line-height:1.4}
body[data-mode=stage]:not(.separateStageScreen) :is(.stageLeftTools,.stageSideTools) :is(small,.eyebrow){font-size:13px;line-height:1.4}
body[data-mode=stage]:not(.separateStageScreen) :is(.stageLeftTools,.stageSideTools) h3{font-size:16px}
body[data-mode=stage]:not(.separateStageScreen) #stageRightInfo h2{font-size:20px}
body[data-mode=stage]:not(.separateStageScreen) #stageRightInfo .sceneLayoutToolbar span,body[data-mode=stage]:not(.separateStageScreen) #stageRightInfo .stageLabel{font-size:13px;line-height:1.4}