/* The grid fills the viewport; controls use the available area below the slim bar. */
html,body{width:100%;height:100%;overflow:hidden}
body{padding:0;height:100vh;height:100dvh}
.screen{position:fixed;inset:0;width:100%;height:100%;aspect-ratio:auto;margin:0;border:0;
  --console-group-base:#151b22;
  --console-group-band:#000;
  background-color:var(--console-group-base);
  --console-top:env(safe-area-inset-top,0px);
  --console-safe-bottom:env(safe-area-inset-bottom,0px);
  --console-bottom:calc(var(--console-safe-bottom) + var(--footer-reserve,0px));
  --console-left:env(safe-area-inset-left,0px);
  --console-right:env(safe-area-inset-right,0px)}
#bar{position:fixed;top:env(safe-area-inset-top,0px);left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px);height:30px;min-height:0;z-index:3;flex-wrap:nowrap;gap:8px;background:#10161ce8;overflow:hidden}
#mode{flex:none}#message{flex:1;min-width:0}#connection{flex:none;padding:4px 8px;font-size:11px;white-space:nowrap}
body>#tools,body>#hint{display:none}
dialog #tools{margin-top:16px;justify-content:flex-start;padding:0;gap:8px}
dialog #hint{margin-top:12px;text-align:left;line-height:1.7;padding:0}
.install-help{margin:16px 0;padding:12px;background:#17222d;border-radius:8px}
.install-help p{margin:6px 0}
@media(display-mode:standalone){.install-help{display:none}}
@media(max-width:650px){#bar{gap:5px;font-size:10px}#mode{font-size:10px}#connection{font-size:10px;padding:4px 5px}}

/* 24x20: .5 empty, 4 preset, 1 button, 4 playback, .5 empty, 4 preset, 1 button, 4 playback, 1 empty. */
.screen:before{inset:var(--console-top) var(--console-right) var(--console-bottom) var(--console-left);background-size:4.1666666667% 4.5454545455%}

#config-open{flex:none;background:#293c4c;color:#e1ebf3;border:1px solid #536779;border-radius:5px;padding:4px 8px;font-size:11px}
.utility-panel{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:16px 0}
.utility-holder{position:relative;height:150px;--cell:100%}
.utility-holder .fader{width:100%;height:100%}
.edit-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.edit-actions .control{position:static;min-width:62px;height:40px;padding:8px;font-size:12px}

/* Keep the existing connection strip within the top half-grid gap. */
#bar{height:calc((100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))/44);padding:0 4px;font-size:10px}
#connection,#config-open{padding:1px 5px;font-size:10px}
#bar a{padding:1px 5px!important;font-size:10px!important;white-space:nowrap}

/* Horizontal utilities: row 19.5-20.5; widths 4, gaps 1; total height 21. */
.horizontal .track{top:50%;bottom:auto;width:auto;height:2px}
.horizontal .knob{left:12%;top:50%;width:15%;transform:translate(-50%,-50%)}

/* Five-grid horizontal cells are contiguous. Labels track the thumb value. */
.horizontal .track{left:12%;right:15%}

.horizontal .range-min,.horizontal .range-max{position:absolute;top:70%;font-size:10px;line-height:1;pointer-events:none;color:#9fb6c7;transform:translateX(-50%)}
.horizontal .range-min{left:12%}.horizontal .range-max{left:85%}
.horizontal .fader-name{bottom:0;font-size:9px}
/* The real button fills its grid cell; only the centered square is painted. */
.stepbtn,.stepbtn.stored,.stepbtn.on,.stepbtn.edit{background:transparent;border:0;border-radius:0;animation:none}
.stepbtn:before{content:'';position:absolute;width:var(--button-size);height:var(--button-size);background:#2e3c49;border:1px solid #687d8f;border-radius:2px;pointer-events:none}
.stepbtn.stored:before{background:#394d5c}.stepbtn.on:before{background:#8ac6e7}.stepbtn.edit:before{background:#9ad5f2;border-color:#fff;animation:flash 1s step-end infinite}
.stepbtn-label{position:relative;z-index:1;pointer-events:none}

/* Single-pointer button-row scrolling replaces all preset touch scrolling. */
.play-next-arrow{position:absolute;left:calc(50% + var(--preset-knob-size)/2 - 1px);top:0;margin-left:.4em;color:#fff;z-index:5;pointer-events:none;font-size:clamp(9px,1.2vw,15px)}
.screen>.round.host-smoothing:not(.is-touching,.is-sweep-selected,.is-painted)>.knob{transition:transform 40ms linear}
.horizontal>.timing-ghost{opacity:.5;pointer-events:none;z-index:3}
.horizontal>.timing-ghost[hidden]{display:none}
.apc-position-knob{position:absolute;left:50%;top:0;width:calc(var(--preset-knob-size)/2);height:calc(var(--preset-knob-size)/2);border:1px solid #b9e5ff;border-radius:50%;background:#000;opacity:.5;z-index:101;pointer-events:none}
.single-scene>.apc-position-knob{border-radius:0}
.apc-bank-outline{position:absolute;z-index:200;pointer-events:none;box-shadow:inset 0 0 0 2px #b9e5ff;border-radius:4px;animation:apc-outline-fade 1s linear forwards}
.apc-bank-outline.alternate-fade{animation-name:apc-outline-fade-alternate}
@keyframes apc-outline-fade{from{opacity:1}to{opacity:0}}
@keyframes apc-outline-fade-alternate{from{opacity:1}to{opacity:0}}
.playback-row{position:absolute;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer}
.playback-row .stepbtn:before{width:calc(var(--button-size) - 4px);height:calc(var(--button-size) - 4px)}
.playback-row .stepbtn{cursor:inherit}

#restart-app,#grid-toggle{flex:none;background:#293c4c;color:#e1ebf3;border:1px solid #536779;border-radius:5px;padding:1px 5px;font-size:10px;white-space:nowrap}
.screen.grid-hidden:before{display:none}

#fps-display{flex:none;min-width:42px;text-align:right;font-size:10px;font-variant-numeric:tabular-nums;color:#a8cbdc;white-space:nowrap}

/* Preset thumbs: largest square inside one grid cell, with no extra inset. */
.viewport .knob{left:50%;width:var(--preset-knob-size);height:var(--preset-knob-size);transform:translate(-50%,-50%);border-radius:0}

/* Playback thumbs use the same one-cell maximum diameter as preset squares. */
.screen>.round .knob{left:50%;width:var(--preset-knob-size);height:var(--preset-knob-size);transform:translate(-50%,-50%);}
.fader.is-touching>.track{left:calc(50% - 3px);width:6px}
.horizontal.is-touching>.track{left:12%;right:15%;width:auto;top:calc(50% - 3px);height:6px}

.fader.is-touching>.track,.fader.is-painted>.track{background:#fff}
.fader.is-painted>.track{left:calc(50% - 3px);width:6px}
.fader.paint-source>.knob{outline:2px solid #fff;outline-offset:2px}

/* In normal mode these are level indicators; row dragging remains available. */
.playback-row .stepbtn:before{background:var(--playback-color,#2e3c49);animation:none;transition:background-color 60ms linear}


/* Draw the grid above the console controls without intercepting input. */
.screen:before{z-index:100;pointer-events:none}

#hit-area-toggle{flex:none;background:#293c4c;color:#e1ebf3;border:1px solid #536779;border-radius:5px;padding:1px 5px;font-size:10px;white-space:nowrap}

/* Expanded input bounds are visualized independently of the clipped fader strip. */
.show-hit-areas .fader.is-touching,.show-hit-areas .fader.is-painted{background-color:transparent;box-shadow:none}
.hit-area-layer{position:fixed;inset:0;z-index:90;pointer-events:none}
.hit-area-box{position:fixed;background:#60c6f02b;box-shadow:inset 0 0 0 1px #a0e0ffb3;pointer-events:none}
.hit-area-layer[hidden],.hit-area-box[hidden]{display:none}


/* Area geometry is fixed to previous A. A/B now controls groove thickness only. */
.fader{--groove-color:#516272}
.fader.is-touching,.fader.is-painted{--groove-color:#fff}
.fader.has-level>.track{left:calc(50% - var(--groove-x)/2);width:var(--groove-x);background:transparent;border:1px solid var(--groove-color)}
.horizontal.has-level>.track{left:12%;right:15%;width:auto;top:calc(50% - var(--groove-y)/2);height:var(--groove-y);background:transparent;border:1px solid var(--groove-color)}
.knob{background:#000;border:1px solid #e1e9ef;box-shadow:none}

/* Double outline stroke weights while keeping the existing geometry. */
.fader.has-level>.track,.horizontal.has-level>.track{border-width:2px}
.knob{border-width:2px}
.fader.paint-source>.knob{outline-width:4px}

/* Double only the horizontal fader thumb height (30% -> 60%). */
.horizontal .knob{height:60%}

/* Preset B: seven RGB triplets, with black labeled knobs above mixed-color grooves. */
.knob-label{color:#e9f2f8;font-size:clamp(10px,1.2vw,16px);font-weight:700;line-height:1;pointer-events:none}
.fader.rgb-channel>.track{left:calc(50% - var(--groove-x)/2);width:var(--groove-x);border:2px solid var(--groove-color);background:var(--rgb-fill,#000)}
.rgb-channel>.knob{background:#000}

.rgb-channel[data-rgb-label="R"] .knob-label{color:#ff5d65}
.rgb-channel[data-rgb-label="G"] .knob-label{color:#52e28a}
.rgb-channel[data-rgb-label="B"] .knob-label{color:#6ea6ff}

/* All zero-valued grooves share a double-thickness black center line. */
.fader{--zero-color:#000}
.fader.is-touching,.fader.is-painted{--zero-color:#fff}
.fader:not(.has-level)>.track{left:calc(50% - 2px);width:4px;border:0;background:var(--zero-color)}
.horizontal:not(.has-level)>.track{left:12%;right:15%;width:auto;top:calc(50% - 2px);height:4px;border:0;background:var(--zero-color)}
.fader:not(.has-level):is(.is-touching,.is-painted)>.track{left:calc(50% - 3px);width:6px}
.horizontal:not(.has-level):is(.is-touching,.is-painted)>.track{left:12%;right:15%;width:auto;top:calc(50% - 3px);height:6px}
/* Zero RGB channels show their triplet mix; other zero grooves stay black. */
.fader.rgb-channel:not(.has-level)>.track{background:var(--rgb-fill,#000)}
.fader.rgb-channel:not(.has-level):is(.is-touching,.is-painted)>.track{background:#fff}

.abc-channel .knob-label{color:#fff}

/* Shift labels only; thumbs, grooves and input bounds remain unchanged. */

.horizontal .range-min,.horizontal .range-max{top:calc(70% + var(--horizontal-label-offset))}
.horizontal .fader-name{bottom:calc(-1 * var(--horizontal-label-offset))}

/* Preset channels retain frames at zero; RGB interiors keep their fixture mix. */
.viewport .fader:not(.has-level)>.track{left:calc(50% - var(--groove-x)/2);width:var(--groove-x);border:2px solid var(--groove-color);background:transparent}
.viewport .fader.rgb-channel:not(.has-level)>.track{background:var(--rgb-fill,#000)}

.fader.is-sweep-selected{--groove-color:#fff;--zero-color:#fff}
.screen>.round.is-sweep-selected:not(.has-level)>.track{left:calc(50% - 3px);width:6px}

.screen>.round .knob{width:calc((100vw - var(--console-left) - var(--console-right))/24);height:calc((100vw - var(--console-left) - var(--console-right))/24);overflow:hidden}
.knob-ink{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;touch-action:none}


#drawing-toggle{flex:none;background:#293c4c;color:#e1ebf3;border:1px solid #536779;border-radius:5px;padding:1px 5px;font-size:10px;white-space:nowrap}
#drawing-toggle[aria-pressed=true]{background:#496278;color:white}

.screen>.round .knob{border-radius:50%}
body:not(.rec-mode) .screen>.round:not(.has-assignment)>.knob{border-color:transparent;box-shadow:none}
body:not(.rec-mode) .screen>.round:not(.has-assignment)>:is(.reference-knob,.change-arrow){visibility:hidden}
body:not(.rec-mode) .screen>.round:not(.has-assignment){pointer-events:auto} /* Empty cells still accept horizontal scrolling; vertical input stays disabled. */
.viewport .fader>.knob,.viewport .fader>.reference-knob,.screen>.round.single-scene>.knob,.screen>.round.single-scene>.reference-knob{border-width:1.5px}
.screen>.round.single-scene>.knob,.screen>.round.single-scene>.reference-knob{border-radius:0}
.drawing-mode .knob-ink{pointer-events:none}
#ink-editor{max-height:96dvh;overflow:auto}
#ink-editor header{margin-bottom:8px;gap:16px}
#ink-canvas{display:block;width:min(calc((100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))*10/24),calc(96dvh - 190px));height:auto;aspect-ratio:1;background:#000;border:1px solid #9bb1c4;touch-action:none}

#ink-editor footer{justify-content:flex-end;align-items:center;}
#ink-status{font-size:12px;color:#ffb0b0}

#ink-editor{width:fit-content;margin:auto;max-width:96vw}
#ink-canvas{width:min(calc((100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))*10/24),calc(96dvh - 310px));margin-inline:auto}

#ink-editor footer{justify-content:center;position:relative;flex-wrap:wrap;margin-top:10px}

#ink-status{flex-basis:100%;text-align:center}
#ink-status:empty{display:none}

/* Playback diameter matches preset knob size. */
.screen>.round .knob{width:var(--preset-knob-size);height:var(--preset-knob-size)}

#ink-canvas-wrap{position:relative;width:fit-content;margin-inline:auto}
#ink-circle-guide{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

#ink-tools{display:flex;justify-content:center;gap:8px;}
#ink-tools button[aria-pressed=true]{background:#496278;outline:1px solid white}
#ink-canvas{width:min(calc((100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))*10/24),calc(96dvh - 360px))}
#ink-editor footer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
#ink-editor footer button{width:100%;font-size:12px;white-space:nowrap}
#ink-status{grid-column:1/-1}

#ink-canvas{width:min(calc((100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))*9/24),calc(96dvh - 360px))}
#ink-editor{padding:10px}
#ink-editor header{margin-bottom:5px}
#ink-tools{margin:5px 0}

#ink-tools{flex-wrap:wrap}
#ink-pen-sizes{display:flex;gap:5px}
#ink-pen-sizes button{min-width:38px}

/* Distinguish drawable playback knobs from preset controls. */
.drawing-mode .viewport .knob{visibility:hidden}

#ink-rgb-panels{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:8px 0}
.ink-rgb-panel{text-align:center;min-width:0}
.ink-rgb-panel strong{font-size:12px}
.ink-rgb-sliders{display:flex;justify-content:center;gap:8px}
.ink-rgb-fader{position:relative;width:40px;height:125px;touch-action:none;user-select:none;cursor:ns-resize}
.ink-rgb-fader output{position:absolute;top:0;left:0;width:100%;font-size:12px}
.ink-rgb-track{position:absolute;top:25px;bottom:25px;left:calc(50% - 5px);width:10px;border:2px solid #a5b6c3;background:var(--mix)}
.ink-rgb-knob{position:absolute;width:32px;height:32px;top:calc(25px + (1 - var(--level))*75px);transform:translateY(-50%);display:flex;align-items:center;justify-content:center;background:#000;border:1px solid #dce8f0;color:var(--channel-color);font-weight:bold}
.ink-rgb-fader.active .ink-rgb-track{border-color:white}
#ink-canvas{width:min(calc((100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))*9/24),calc(96dvh - 385px))}

#ink-editor footer button{height:38px;min-height:38px;padding:4px 3px}
.ink-rgb-fader{width:var(--ink-play-width);height:calc(var(--ink-play-height) + 20px)}
.ink-rgb-track{top:calc(20px + var(--ink-play-height)*.09);bottom:calc(var(--ink-play-height)*.13)}
.ink-rgb-knob{left:50%;width:var(--ink-knob-size);height:var(--ink-knob-size);top:calc(20px + var(--ink-play-height)*(.12 + (1 - var(--level))*.73));transform:translate(-50%,-50%)}
#ink-canvas{width:min(calc((100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))*9/24),calc(96dvh - 345px))}

.show-library{padding:12px;border:1px solid #536779;margin:12px 0}
.show-library div{margin-top:10px;display:flex;gap:8px}
#show-name,#show-list{max-width:100%}

/* Allow native text editing and the iPad keyboard inside dialogs. */
dialog input,dialog textarea{user-select:text;-webkit-user-select:text;touch-action:manipulation}
#show-name{display:block;width:100%;margin:8px 0;font-size:16px;min-height:44px}

#show-name-editor{position:fixed;inset:0;z-index:1000;background:#000b;overflow:auto;touch-action:auto;padding:40px 16px}
#show-name-editor[hidden]{display:none}
#show-name-editor>div{max-width:500px;margin:0 auto;background:#202b36;border:1px solid #687d8f;border-radius:12px;padding:20px}
#show-name-native{display:block;box-sizing:border-box;width:100%;font-size:18px;min-height:48px;margin:12px 0;background:#10161c;color:white;user-select:text;-webkit-user-select:text;touch-action:auto}
#show-name-editor footer{display:flex;justify-content:center;gap:12px}
#show-name-editor button{font-size:16px;padding:12px;color:white;background:#293c4c;border:1px solid #687d8f;border-radius:6px}

/* Scene recording and playback keep the established 24 x 22 geometry. */
.screen>.edit-actions{position:absolute;left:calc(100%*19/24);top:calc(100%*16/22);bottom:calc(100%*.5/22);display:grid;grid-template-rows:repeat(5,1fr);margin:0;padding:0 4px;z-index:5;pointer-events:none}
.screen>.edit-actions .control{position:relative;min-width:0;width:100%;height:100%;padding:0;font-size:11px;pointer-events:auto;touch-action:none}
.rec-mode .screen>.round .knob,.param-untouched>.knob{visibility:hidden}
.rec-mode .screen>.round{cursor:default}
.rec-step-surface{display:none;position:absolute;inset:0;overflow:hidden;touch-action:none;z-index:4}
.rec-mode .rec-step-surface{display:block}
.rec-mode .playback-row>.stepbtn{visibility:hidden}
.rec-step-strip{display:flex;will-change:transform}
.rec-step{position:relative;flex:0 0 calc(100%/48);height:100%;padding:0;border:1px solid #536779;background:#17222d;color:#dce8f0;white-space:pre;line-height:1.05;font-size:clamp(6px,.75vw,11px);touch-action:none}
.rec-step[hidden]{display:none}.rec-step.edit{border-color:#fff;background:#496278}
.track{overflow:hidden}
.play-progress,.output-progress{position:absolute;left:0;right:0;bottom:0;background:#fff;pointer-events:none;height:0}

.assign-holding>.track:after{content:'';position:absolute;bottom:0;left:0;right:0;background:white;animation:assign-progress .7s linear forwards}
@keyframes assign-progress{from{height:0}to{height:100%}}
.fader.assign-holding>.track{width:8px;left:calc(50% - 4px)}
.selected-playback>.knob{border-color:#80cfff;box-shadow:0 0 0 1px #80cfff}
.stepbtn.selected-playback:before{border-color:#80cfff}

/* Put the five permanent controls in unused space beside the horizontal faders. */
.screen>.edit-actions{left:calc(100%*15/24);right:0;top:calc(var(--console-top) + (100% - var(--console-top) - var(--console-bottom))*20.25/22);bottom:calc(var(--console-bottom) + (100% - var(--console-top) - var(--console-bottom))*.25/22);grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:1fr;gap:4px}
.screen>.edit-actions .control{font-size:clamp(7px,.9vw,12px)}

/* REC: expose destination knobs and make assignment progress distinct from touch feedback. */
.rec-mode .screen>.round .knob{visibility:visible;opacity:.25}
.rec-mode .screen>.round:not(.has-assignment)>.knob{background:#000;opacity:1;border-color:rgba(225,233,239,.25)}
.rec-mode .screen>.round:not(.has-assignment)>.knob>.knob-ink{opacity:.25}
.rec-mode .screen>.round.has-assignment .knob{opacity:1}
.rec-mode .screen>.round.assignment-edit-source .knob{border-color:#ffcf70;}
.rec-mode .screen>.round>.track{background:#000;border:0;width:4px;left:calc(50% - 2px);overflow:visible}
.rec-mode .screen>.round.assign-holding>.track:after{left:50%;right:auto;width:8px;transform:translateX(-50%);background:white}
#overwrite-assignment{position:fixed;width:128px;height:40px;z-index:1000;border:2px solid #fff;background:#773923;color:white;border-radius:6px;font-size:12px;font-weight:bold;touch-action:manipulation}

.screen>.edit-actions .control{overflow:hidden;isolation:isolate}
.screen>.edit-actions .is-control-holding:before{content:'';position:absolute;left:0;right:0;bottom:0;background:#ffffff55;pointer-events:none;z-index:-1;animation:control-hold-progress .7s linear forwards}
@keyframes control-hold-progress{0%,42.857%{height:0;opacity:0}42.858%{height:0;opacity:1}100%{height:100%;opacity:1}}
.recording-confirm{position:fixed;width:128px;height:40px;z-index:1000;border:2px solid white;background:#773923;color:white;border-radius:6px;font-size:12px;font-weight:bold;touch-action:manipulation}

/* One grid for each numbered step, followed by time captions in the existing half-grid gap. */

.rec-step{overflow:visible;font-size:clamp(7px,1vw,12px)}
.rec-step-meta{position:absolute;left:0;width:100%;white-space:pre;text-align:center;line-height:1.05;font-size:clamp(6px,.95vh,10px);color:#dce8f0;pointer-events:none;font-weight:normal}
.rec-step-number{pointer-events:none}

html,body{-webkit-touch-callout:none}
#screen,#screen *,#bar,#bar *,#ink-editor,#ink-editor *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,[contenteditable="true"]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}

body{-webkit-user-select:none;user-select:none}

/* Fixed 24 steps per row. Move REC buttons half a grid up and use the gap for readable time captions. */
.rec-step-surface{bottom:auto}
.rec-step-strip{width:100%;transform:none!important;will-change:auto}
.rec-step{flex-basis:calc(100%/24)}
.rec-step-meta{font-size:clamp(7px,1.05vh,11px);}

.rec-step-meta{font-size:clamp(7px,1.2vh,13px);line-height:1.1}

/* Offset step time captions by a quarter of their one-grid button height. */
.rec-step-meta{top:125%}

.rec-step-surface{height:225%}
.rec-step-strip{height:44.4444444444%}

/* Assigned playback tracks stay thick white while recording. */
.rec-mode .screen>.round.has-assignment>.track{width:8px;left:calc(50% - 4px)}

/* Playback scenes hold white; chases show one moving white dot. */
.screen>.round>.track{overflow:visible}
.play-progress{left:50%;right:auto;width:8px;height:8px;bottom:calc((100% - 8px)*var(--play-progress,0));transform:translateX(-50%);border-radius:50%;background:#fff}
.play-progress[hidden]{display:none}
.screen>.round.scene-playing>.track,.screen>.round.apc-flashing>.track{background:#fff;border-color:#fff}
.playback-row .stepbtn.apc-flashing::before{background:#fff}
.apc-flash-count,.apc-step-number{display:none;pointer-events:none}
.playback-row .apc-flashing .stepbtn-label{visibility:hidden}
.playback-row .apc-flashing .apc-flash-count,.round .apc-step-number:not([hidden]){display:grid;position:absolute;inset:0;place-items:center;z-index:4;font-size:clamp(9px,1.1vw,15px);font-weight:700}
.playback-row .apc-flashing .apc-flash-count{color:#000}
.playback-row .stepbtn.manual-step::before{background:#000;border-color:#fff}
.playback-row .manual-step .stepbtn-label,.playback-row .manual-step .apc-flash-count{color:#fff}
.round .apc-step-number:not([hidden]){color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000}
.round.apc-flashing .play-progress{box-shadow:0 0 0 1px #26313b}

.play-edit-label{position:absolute;top:calc(100% + 2px);left:0;width:100%;text-align:center;font-size:clamp(9px,1.2vh,14px);font-weight:bold;color:#fff;pointer-events:none}
.play-edit-label[hidden]{display:none}
.rec-mode .screen>.round.has-assignment>.track{width:max(var(--groove-x),12px);left:calc(50% - max(var(--groove-x),12px)/2)}
.rec-mode .screen>.round.has-assignment.assign-holding>.track{background:#000}
.rec-step-surface{top:0;pointer-events:none}
.rec-step{pointer-events:auto}

/* REC assignment indication belongs on the circular thumb, not its track. */
.rec-mode .screen>.round.has-assignment>.track{background:#000;border:0;width:4px;left:calc(50% - 2px)}
.rec-mode .screen>.round.has-assignment .knob{border:2px solid white;box-shadow:none}
.rec-mode .screen>.round.assignment-edit-source .knob{border:3px solid white;box-shadow:none}
.screen>.edit-actions .control[hidden]{display:none}

/* Use the edit thumb's thick white border for all assigned REC thumbs. */
.rec-mode .screen>.round.has-assignment .knob,.rec-mode .screen>.round.assignment-edit-source .knob{border:3px solid white;box-shadow:none}

/* Preset and playback HTP levels share opaque white indication. RGB keeps its full-groove color. */
.output-progress{background:#fff}
.output-progress[hidden]{display:none}
.viewport .rgb-channel>.track{overflow:visible}

.rec-global{position:absolute;top:0;width:calc(100%/12);height:44.4444444444%;padding:0;border:1px solid #536779;background:#17222d;color:#dce8f0;font-size:clamp(8px,1vw,13px);font-weight:bold;pointer-events:auto;touch-action:none}
.rec-global.edit{border-color:white;background:#496278}
.rec-global[hidden]{display:none}

/* Dimmed RGB: paint the white level behind a foreground copy of the frame. */
.viewport .rgb-dimmer-channel>.track{isolation:isolate}

/* Confine RGB level lines to the actual inner track box; avoid fractional border reconstruction. */

#playback-clipboard-menu{position:fixed;z-index:1000;width:144px;padding:5px;display:flex;flex-direction:column;gap:4px;background:#17222d;border:1px solid white;border-radius:6px;box-shadow:0 4px 12px #0008}
#playback-clipboard-menu button{min-height:40px;font-size:13px;font-weight:bold;background:#293c4c;color:white;border:1px solid #687d8f;border-radius:4px;touch-action:manipulation}
#playback-clipboard-menu button:disabled{opacity:.35}

.drag-range-layer{position:fixed;inset:0;z-index:95;pointer-events:none}
.drag-range-outline{position:fixed;background:transparent;pointer-events:none;box-sizing:border-box}
.drag-range-outline[hidden]{display:none}

/* All read-only controls opt out of Safari selection, drag callouts and tap flashes. */
body{-webkit-touch-callout:none}
#screen,#screen *,#bar,#bar *,#ink-editor button,#playback-clipboard-menu,#playback-clipboard-menu *{-webkit-tap-highlight-color:transparent;-webkit-user-drag:none}
input,textarea,select,[contenteditable="true"]{-webkit-touch-callout:default;-webkit-user-select:text;user-select:text}

[contenteditable=true],[contenteditable=true] *{-webkit-touch-callout:default;-webkit-user-select:text;user-select:text}

/* One horizontal line at each pointer start Y; no vertical sides. */
.drag-range-outline{border:0;border-top:2px solid white;height:2px}

/* Suppress root double-tap browser gestures while preserving form/dialog scrolling. */
html,body{touch-action:manipulation}

/* No JS touch cancellation on modern browsers: declare gesture ownership before touch starts.
   Form/dialog documents keep native scrolling and keyboard interaction. */
html:not(:has(dialog[open],iframe,#show-name-editor:not([hidden]))),html:not(:has(dialog[open],iframe,#show-name-editor:not([hidden]))) body{touch-action:none}

/* Read-only previous/original preset state: 75% transparent, behind live knobs. */
.viewport .reference-knob{position:absolute;left:50%;width:var(--preset-knob-size);height:var(--preset-knob-size);transform:translate(-50%,-50%);border:2px solid white;background:#000;opacity:.25;z-index:1;pointer-events:none;display:flex;align-items:center;justify-content:center;font-weight:700}
.viewport .fader>.knob{z-index:2}

.reference-knob[hidden]{display:none}
.drawing-mode .reference-knob{display:none}

.screen>.edit-actions .ab-go{position:relative;grid-column:3/6;height:100%;min-width:0;pointer-events:auto;touch-action:none;cursor:ew-resize;--go-inset:calc(var(--preset-knob-size)/2 + 2px)}
.ab-go[hidden]{display:none}
.ab-go-track{position:absolute;left:var(--go-inset);right:var(--go-inset);top:calc(50% - 4px);height:8px;background:#000;border:2px solid white;pointer-events:none}
.ab-go-knob{position:absolute;left:calc(var(--go-inset) + (100% - 2*var(--go-inset))*var(--ab-progress,0));top:50%;transform:translate(-50%,-50%);width:var(--preset-knob-size);height:var(--preset-knob-size);display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:clamp(8px,1vw,13px);}

.screen>.round>.reference-knob{position:absolute;left:50%;width:var(--preset-knob-size);height:var(--preset-knob-size);transform:translate(-50%,-50%);border:2px solid white;border-radius:50%;background:#000;opacity:.25;pointer-events:none;z-index:1}
.screen>.round>.knob{z-index:2}

/* GO keeps the original A/B control footprint; only its travel area spans three slots. */
.screen>.edit-actions .ab-go{--go-inset:calc((100% - 8px)/6)}
.ab-go-knob{width:calc((100% - 8px)/3);height:100%;border:1px solid #687d8f;border-radius:3px;background:#293a49;font-size:clamp(7px,.9vw,12px)}

/* One AUTO pulse per common SPEED cycle; peak background is 50% gray, never white. */
@keyframes auto-tempo-pulse{0%,100%{background-color:#808080}50%{background-color:#293a49}}
.screen>.edit-actions .control.auto-tempo{animation:auto-tempo-pulse var(--auto-speed,.55s) ease-in-out infinite}

/* REC: old states behind the editable knob at 50% opacity. */
.viewport .reference-knob,.screen>.round>.reference-knob{opacity:.5}
/* AB: the moving current state is solid; the prepared destination is 50% transparent. */
.ab-mode .viewport .reference-knob,.ab-mode .screen>.round>.reference-knob{opacity:1;z-index:3}
.ab-mode .viewport .fader>.reference-knob{border-width:1.5px}
.ab-mode .viewport .fader.ab-knobs-overlap>.knob{opacity:0}
.ab-mode .viewport .fader>.knob,.ab-mode .screen>.round>.knob{z-index:2}

.ab-mode .output-progress{opacity:.5}

/* Preset A/B: double the groove width in both groove-width variants. */
.viewport .fader>.track,.viewport .fader:not(.has-level)>.track{left:calc(50% - var(--groove-x));width:calc(var(--groove-x)*2)}

/* Keep fast AUTO indication dim without fading its label or touch area. */
@keyframes auto-tempo-dim-pulse{0%,100%{background-color:#404040}50%{background-color:#202020}}
.screen>.edit-actions .control.auto-tempo.auto-tempo-dim{animation-name:auto-tempo-dim-pulse}
.screen>.edit-actions .control.auto-tempo.auto-tempo-static{animation:none;background-color:#404040}

/* Full-width finger-height reference; independent from the horizontal selection wire. */
.fader-touch-guide{position:fixed;left:0;right:0;height:1px;background:#fff;opacity:.5;transform:translateY(-50%);pointer-events:none}
.fader-touch-guide[hidden]{display:none}

/* Left three columns of the unused footer, away from the centered home indicator. */

/* Public preferences are separate from development/diagnostic CONFIG. */
#public-settings{width:min(480px,92vw);text-align:left}
.public-setting-fields{display:grid;gap:16px;margin-top:20px}
.public-setting-fields label{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px}
.public-setting-fields select{min-width:116px;min-height:44px;text-align:center}

.screen>.edit-actions .control{white-space:pre-line;line-height:1.1}
.screen>.edit-actions .control.dim-correction-active{background:#496278;border:2px solid #fff;color:#fff}

.screen>#bar{position:absolute;top:var(--console-top);left:var(--console-left);right:var(--console-right);height:calc((100% - var(--console-top) - var(--console-bottom))/44)}
/* Let DIM's fourth caption row escape its old clip and sit above the faders/grid. */
.rec-mode .rec-step-surface{overflow:visible;z-index:150}
.rec-mode .rec-step-meta{z-index:151}
/* Editing references retain the original label styling, at 75% transparency. */
.rec-mode .viewport .reference-knob,.rec-mode .screen>.round>.reference-knob{opacity:.25}
.viewport .rgb-channel>.knob,.viewport .rgb-channel>.reference-knob{border-color:var(--rgb-knob-color,#fff)}
.viewport .rgb-channel:is(.is-touching,.is-painted,.is-sweep-selected)>.knob{border-color:#fff}

/* RGB color belongs to the knob face; its outline remains white. */
.viewport .rgb-channel>.knob,.viewport .rgb-channel>.reference-knob{background:var(--rgb-knob-color,#000)}

/* GO thumb is a tap target as well as the handle of the parent slider. */
.ab-go-knob{pointer-events:auto}

/* Neutral knobs, dimmer-weighted groove color, and independent RGB value captions. */
.viewport .rgb-channel>.knob,.viewport .rgb-channel>.reference-knob{border-color:#fff;background:#000}

/* REC live output, change arrows and steady drawing controls. */
.change-arrow{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:6;pointer-events:none}.change-arrow[hidden]{display:none}.change-arrow path{stroke:#fff;stroke-width:1.5;fill:none;pointer-events:stroke;cursor:pointer}
.rec-edit .reference-knob{pointer-events:auto!important;cursor:pointer}
.ab-mode .viewport .fader>.knob,.ab-mode .screen>.round>.knob{opacity:.5}
.drawing-mode .screen>.round .knob,.drawing-mode .screen>.round>.track{animation:none!important}
.drawing-mode.rec-mode .screen>.round .knob{visibility:visible}


.drawing-mode .change-arrow{display:none}

/* Fixed fixture status, steady playback markers and alternating A/B destinations. */

.rgb-status-row{position:absolute;overflow:hidden;pointer-events:none}
.rgb-status-strip{height:100%;display:flex;will-change:transform}
.rgb-status-cell{flex:none;width:var(--cell);height:100%;display:flex;align-items:center;justify-content:center}
.rgb-status-dot{width:8px;height:8px;border-radius:50%;background:#000;flex:none}
.ab-go-knob{white-space:pre-line;line-height:1.05;text-align:center}

/* White output fills keep their full height and express level through opacity. */
.viewport .fader:not(.rgb-channel)>.track>.output-progress{opacity:var(--output-level,0)}
.ab-mode .viewport .fader:not(.rgb-channel)>.track>.output-progress{opacity:calc(var(--output-level,0)*.5)}

/* Minimal console: retain the layout and controls, omit numeric overlays. */

/* Ink tools confirm on release, with immediate white/black press feedback. */
#ink-editor #ink-tools button,#ink-editor footer button{touch-action:none}
#ink-editor button.ink-tap-pressed{background:#fff!important;color:#000!important;border-color:#fff!important}

/* Drawing focuses on artwork; no console drag or touch guide overlay. */
.drawing-mode .drag-range-layer{display:none}

/* Group markings cover the complete preset drag bounds, behind the controls. */
.preset-area-layer{position:fixed;inset:0;z-index:0;pointer-events:none}
.preset-area-box{position:absolute;background:var(--console-group-band);pointer-events:none}

/* Named preset thumbs keep their labels centered and inside the one-cell square. */
.named-preset .knob-label{color:#fff;text-align:center;white-space:nowrap;font-size:min(clamp(10px,1.2vw,16px),calc((var(--preset-knob-size) - 4px)/2.2))}

.playback-area-box{position:absolute;background:var(--console-group-band);pointer-events:none}
body:is(.rec-mode,.ab-mode,.drawing-mode) .screen:not(.background-off){--console-group-base:#000;--console-group-band:#151b22}
.background-off .preset-area-layer{display:none}
.viewport .fader.height-fill>.track>.output-progress{opacity:1}
.ab-mode .viewport .fader.height-fill>.track>.output-progress{opacity:.5}

.screen>.edit-actions .control.mode-pressed{animation:none!important;background:#fff!important;color:#000!important;border-color:#fff!important}

/* Only preview knobs are hollow; live/current-state knobs keep their face artwork. */
.rec-edit .reference-knob,.ab-mode .viewport .fader>.knob,.ab-mode .screen>.round>.knob{background:transparent!important}
.rec-edit .reference-knob>*,.ab-mode .viewport .fader>.knob>*,.ab-mode .screen>.round>.knob>*{display:none!important}


/* Footer controls stay outside the playing grid and above the device safe area. */
#console-footer{position:absolute;left:calc(var(--console-left) + 4px);right:calc(var(--console-right) + 4px);bottom:calc(var(--console-safe-bottom) + 4px);height:30px;display:grid;grid-template-columns:repeat(4,minmax(0,3fr)) minmax(0,12fr);gap:6px;align-items:stretch;background:#151b22;z-index:110;pointer-events:auto}
#console-footer>button{min-width:0;width:100%;height:100%;padding:0 3px;margin:0;overflow:hidden;white-space:nowrap;font-family:inherit;font-size:clamp(8px,1vw,12px);line-height:1;border:1px solid #536779;border-radius:4px;background:#293c4c;color:#e1ebf3;touch-action:manipulation}
#console-footer>#drawing-toggle[aria-pressed=true]{background:#496278;color:#fff}
#current-project-name{align-self:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;color:#dce8f0;font-size:clamp(9px,1.1vw,14px);padding-right:4px}
#sso-files-dialog,#device-files-dialog{width:min(600px,94vw)}
.screen>.round>.reference-knob{overflow:hidden}

/* Promote only knobs currently under finger control, not the whole console. */
.fader:is(.is-touching,.is-sweep-selected,.is-painted)>.knob{will-change:transform}

/* Passive diagnostic overlay; never participates in hit testing. */
#contact-area-layer{position:fixed;inset:0;z-index:2147483646;pointer-events:none}
.contact-area-box{position:absolute;left:0;top:0;border:1px solid #66e5ff;background:#66e5ff18;pointer-events:none;box-sizing:border-box}
.contact-area-box[hidden]{display:none}
.contact-area-box>span{position:absolute;left:0;bottom:100%;white-space:nowrap;font:11px sans-serif;color:#66e5ff;background:#10161cdd;padding:2px 3px;pointer-events:none}


/* Readouts are cached nodes, updated only when the displayed value changes. */
.fader>.fader-value,.preset-fader-value{position:absolute;left:0;top:calc(-1 * var(--fader-value-rise,0px));width:100%;text-align:center;color:#fff;font-size:clamp(7px,1.1vw,12px);line-height:1;font-variant-numeric:tabular-nums;pointer-events:none;z-index:8}
.horizontal>.fader-value{width:auto;top:calc(50% - var(--preset-knob-size) - 12px - var(--horizontal-label-offset,0px) + var(--fader-value-rise,0px));transform:translateX(-50%)}
.param-untouched>.fader-value,.drawing-mode .viewport .fader-value,.rec-mode .screen>.round>.fader-value{visibility:hidden}

.preset-fader-value{transform:translateX(-50%)}
.preset-fader-value[hidden]{display:none}
.drawing-mode .preset-fader-value{visibility:hidden}

/* Individual playback settings sit alongside the existing artwork tools. */
#ink-editor{width:min(94vw,1000px)}
.ink-editor-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.ink-art-panel{min-width:0}
.ink-art-panel #ink-canvas{max-width:100%}
.ink-art-panel #ink-canvas-wrap{max-width:100%}
.playback-channel-settings{display:flex;flex-direction:column;min-width:0;padding:12px;border-left:1px solid #536779}
#ink-editor .ink-art-panel footer{grid-template-columns:repeat(3,minmax(0,1fr))}
#ink-editor .ink-confirm-actions{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:auto;padding-top:12px}
#ink-editor .ink-confirm-actions button{height:76px;min-height:76px;white-space:normal}
.playback-channel-settings h3{margin-top:0}
.playback-channel-settings fieldset,.public-setting-fields fieldset{margin:6px 0;padding:8px;border:1px solid #536779}
.playback-channel-settings label,.public-setting-fields fieldset label{display:inline-flex;align-items:center;gap:5px;margin:4px 8px 4px 0}
.playback-row .stepbtn.playback-toggle::before{border-radius:50%}
#preset-color-title:focus{outline:none}
#preset-color-palette{width:min(94vw,720px);max-height:95dvh;overflow:auto}
.preset-color-top{display:grid;grid-template-columns:minmax(0,max-content) auto;justify-content:center;align-items:center;gap:16px}
.preset-color-rgb{align-items:center}
.preset-color-rgb output{top:-18px;font-size:24px;text-align:center;font-variant-numeric:tabular-nums}
.preset-color-wheel{position:relative;width:min(54vw,44dvh,360px);max-width:100%;margin:6px auto;aspect-ratio:1;touch-action:none}
.preset-color-wheel canvas{display:block;width:100%;height:100%;touch-action:none}
.preset-color-wheel span{position:absolute;width:17px;height:17px;border:2px solid white;border-radius:50%;box-shadow:0 0 0 1px black;transform:translate(-50%,-50%);pointer-events:none}
.preset-color-fixed,.preset-color-slots{display:grid;gap:4px;width:100%}
.preset-color-fixed{grid-template-columns:repeat(6,minmax(0,1fr));margin:8px auto 4px}
.preset-color-slots{grid-template-columns:repeat(8,minmax(0,1fr));margin:0 auto 8px}
.preset-color-fixed button,.preset-color-slots button{min-width:0;min-height:clamp(32px,6dvh,48px);padding:0;border:0;border-radius:2px;background:#26313b;touch-action:manipulation}
.preset-color-hint{margin:4px 0;font-size:15px;text-align:center;color:#a7b6c3}
.preset-color-fixed button,.preset-color-slots button.has-stored-color{border:3px solid #c2d3e2;box-shadow:inset 0 0 0 2px #000}
.preset-color-slots button:focus:not(:focus-visible){outline:none}
#preset-color-palette footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);margin-top:8px}
#preset-color-palette [data-action=black]{background:#080b10;color:white}
#preset-color-palette [data-action=white]{background:white;color:#10161c}
#preset-color-palette footer button{width:100%;min-height:72px}
@media(max-width:560px){.ink-editor-layout{grid-template-columns:1fr;gap:8px}.playback-channel-settings{border-left:0;border-top:1px solid #536779}}

/* APC bank colors are independent of the temporary bank outline. */
body .screen>.round.apc-bank-colored>.knob,body .screen>.round.apc-bank-colored>.reference-knob{border-color:var(--apc-knob-color);box-shadow:none}

/* REC gestures and the shared LED compensation control. */
.screen>.edit-actions .led-correction{grid-column:4;grid-row:1}
.screen>.edit-actions .control{grid-row:1}
.screen>.edit-actions .rec-sliding{touch-action:none}
.screen>.edit-actions.rec-sliding .control:not(:last-of-type),.screen>.edit-actions.rec-sliding .ab-go{visibility:hidden}
.screen>.edit-actions.rec-sliding .control:last-of-type{z-index:5;visibility:visible}
.screen>.edit-actions.rec-sliding:before{content:'';position:absolute;inset:0;border:1px solid #ffffff80;background:#000;pointer-events:none}
.rec-mode .viewport .knob{border-color:rgba(255,255,255,.5)!important}
.rec-mode .rec-step-surface{height:300%;background:#000;border:1px solid #ffffff80}
.rec-mode .rec-step{border-left:1px solid #ffffff40;border-right:1px solid #ffffff40}
.rec-global .rec-step-meta{position:absolute;left:0;right:0;top:125%;white-space:pre;pointer-events:none}

.screen>.edit-actions .ab-go{grid-column:3/6}
.rec-mode .screen>.edit-actions .control.recording{grid-column:1}

.rec-mode .rec-step-surface{background:#000 repeating-linear-gradient(to right,transparent 0,transparent calc(100%/24 - 1px),#ffffff40 calc(100%/24 - 1px),#ffffff40 calc(100%/24))}

/* Preserve the step button size while extending the REC caption frame down by half a grid. */
.rec-mode .rec-step-strip,.rec-mode .rec-global{height:37.037037037%}
#bar #connection{background:#000;border-color:#536779;color:#fff}
#bar #connection.connected{background:#203e35;border-color:#4d967c;color:#a8f5d5}

/* FREE hides the thumb only. Its zero line must stay visible on the REC backdrop. */
.rec-mode .horizontal.param-untouched{--zero-color:#516272}
/* The track alone rises above REC captions, without blocking their touch targets. */
.rec-mode .screen>.round.assign-holding>.track{z-index:160;pointer-events:none}
.rec-mode .screen>.round>.knob{z-index:161}

/* Declare read-only UI explicitly rather than relying on inherited WebKit selection rules. */
body *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body input,body textarea,body select,body [contenteditable="true"],body [contenteditable="true"] *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}

.playback-row .stepbtn.next-pulse::before{background:#fff!important;border-color:#fff!important}
.playback-row .stepbtn.next-pulse .stepbtn-label,.playback-row .stepbtn.next-pulse .apc-flash-count{color:#000!important;visibility:visible}

/* Chase controls reflect STEP ownership; MIDI flash-pad blinking stays independent. */
.playback-row .stepbtn.chase-control:not(.manual-step)::before{background:#fff;border-color:#fff;transition:none}
.playback-row .stepbtn.chase-control:not(.manual-step) .stepbtn-label,.playback-row .stepbtn.chase-control:not(.manual-step) .apc-flash-count{color:#000}
.playback-row .stepbtn.manual-step::before{transition:none}
.screen>.edit-actions .control.action-pulse{background:#fff!important;color:#000!important}

.screen>.edit-actions .control.step-mode-active{animation:none;background:#fff;color:#000;border-color:#fff}

.apc-ab-position-knob{position:absolute;left:calc(var(--go-inset) + (100% - 2*var(--go-inset))*var(--apc-ab-position,0));top:50%;transform:translate(-50%,-50%);width:calc((100% - 8px)/6);height:50%;border:1px solid #b9e5ff;border-radius:2px;background:#000;opacity:.5;z-index:101;pointer-events:none}

.horizontal .range-min{left:85%}.horizontal .range-max{left:12%}
/* Full-screen 8x8 file matrix; the underlying desk remains visible. */
#project-file-matrix{position:fixed;inset:10vh 10vw;margin:0;width:80vw;height:80vh;height:80dvh;max-width:none;max-height:none;padding:0;border:0;border-radius:0;background:transparent;color:#fff;overflow:visible}
#project-file-matrix::backdrop{background:rgba(0,0,0,.7)}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){#project-file-matrix.file-blur::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}}
.file-matrix-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));width:100%;height:100%}
#project-file-matrix .file-cell{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:0;min-height:0;margin:0;padding:3px;border:1px solid rgba(255,255,255,.22);border-radius:0;background:transparent;color:#fff;font:inherit;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overflow:hidden}
#project-file-matrix .file-cell>*{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;line-height:1.35}
.file-cell-name{font-size:clamp(8px,1.2vw,16px);font-weight:600}.file-cell-date,.file-cell-size{font-size:clamp(6px,.9vw,12px)}
#project-file-matrix .file-held{background:rgba(255,255,255,.18)}
#project-file-matrix .file-matrix-close{position:absolute;top:calc(-1 * min(52px,10vh - 4px));right:0;width:44px;height:44px;padding:0;border:1px solid #aaa;border-radius:5px;background:#111e;color:#fff;font-size:32px;line-height:1}
.file-matrix-status{position:absolute;bottom:5px;left:12%;right:12%;text-align:center;background:#111c;color:#fff;pointer-events:none;font-size:12px}.file-matrix-status:empty{display:none}
#project-members,#project-file-rename{width:min(540px,90vw);color:#fff;background:#111e;border:1px solid #aaa}
.file-member-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.file-member-grid button{height:64px;color:#fff;background:#25323d;border:1px solid #aaa;font:inherit}
#project-members header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.file-name-row{display:flex;align-items:center;gap:6px;margin:20px 0}.file-name-row input{flex:1;min-width:0;font:20px system-ui;padding:10px;-webkit-user-select:text;user-select:text;touch-action:auto}.file-name-row span{font-size:20px}
.file-rename-actions{display:flex;gap:10px}.file-rename-actions button{flex:1;height:48px;font:inherit}
#current-project-name.has-file-info{white-space:nowrap;line-height:1.15;font-size:clamp(16px,1.9vw,24px)}.loaded-file-name,.loaded-file-date{display:inline;white-space:nowrap}

#project-file-matrix .file-matrix-members{position:absolute;top:calc(-1 * min(52px,10vh - 4px));left:0;max-width:50vw;min-width:88px;height:44px;padding:8px 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid #aaa;border-radius:3px;background:#111b;color:white;font:clamp(8px,1vw,12px) system-ui}

#project-members header button{min-height:44px;min-width:72px;padding:8px 12px;font:inherit}

#console-footer.has-playback-copy{grid-template-columns:repeat(4,minmax(0,2fr)) minmax(0,4fr) minmax(0,12fr)}
#playback-copy-label{display:none;font-size:clamp(8px,.85vw,11px);align-self:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#console-footer.has-playback-copy>#playback-copy-label{display:block;grid-column:5;grid-row:1}
#console-footer.has-playback-copy>#current-project-name{grid-column:6;grid-row:1}

#device-project-files label{display:block;margin:16px 0}
#device-project-files label input{display:block;width:100%;margin-top:8px}
#device-project-files .device-file-actions{display:flex;gap:12px}
#device-project-files .device-file-actions button{flex:1;min-height:48px}

#project-file-matrix .file-matrix-import{position:absolute;top:calc(100% + 8px);left:15%;width:70%;height:44px;padding:4px 8px;background:#111e;color:white;border:1px solid #aaa;font:clamp(10px,1.2vw,16px) system-ui}
#project-file-matrix .file-cell:disabled{opacity:.4}