/* VOLUX Pad — P-15: Sketchbook's arrangement in VOLUX's dress */
:root{--bg:#0c0b09;--chrome:#0f0e0c;--panel:#111009;--raised:#191710;--card:#15140f;--line:rgba(240,236,228,0.13);--t1:#f3efe7;--t2:rgba(240,236,228,0.82);--t3:rgba(240,236,228,0.58);--teal:#2AC4A2;--lux:#C8881A;--err:#e04040;--paper:#efe9dd;--desk:#15140f;--top:56px}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%;overflow:hidden;background:var(--desk);overscroll-behavior:none;position:fixed;inset:0}
body{font-family:'DM Sans',sans-serif;color:var(--t1);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#paint{position:fixed;inset:0;display:block;touch-action:none;cursor:crosshair}

.chrome{position:fixed;z-index:10;background:rgba(15,14,12,0.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 32px rgba(0,0,0,0.5);color:var(--t1);touch-action:manipulation}
.sec{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--t2);cursor:pointer}
.sec .tog{color:var(--t3);font-size:14px;padding:0 2px}
.body{padding:4px 12px 12px;border-top:1px solid var(--line)}
.btn{flex:1;padding:9px;background:transparent;border:1px solid var(--line);border-radius:6px;color:var(--t2);font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;touch-action:manipulation}
.btn:active{background:rgba(240,236,228,0.06)}
.btn.warn{border-color:rgba(200,136,26,0.5);color:var(--lux)}
.row{display:flex;gap:8px;margin-top:12px}
.logo{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:300;letter-spacing:2px;color:var(--t1)}
.logo em{font-style:normal;color:var(--teal)}
.logo .word{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--t3);margin-left:10px;vertical-align:middle}
.logo.big{font-size:32px}
.badge{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;color:var(--lux);border:1px solid rgba(200,136,26,0.45);border-radius:4px;padding:2px 6px}
.who{width:28px;height:28px;border-radius:50%;background:rgba(42,196,162,0.12);border:1px solid var(--teal);color:var(--teal);font-family:'DM Mono',monospace;font-size:10px;cursor:pointer}

/* top toolbar */
#topbar{top:calc(8px + env(safe-area-inset-top));left:12px;right:12px;height:44px;display:flex;align-items:center;gap:4px;padding:0 8px}
.tb{min-width:40px;height:34px;padding:0 10px;border-radius:6px;border:none;background:transparent;color:var(--t2);font-size:17px;line-height:1;cursor:pointer;touch-action:manipulation;font-family:'DM Mono',monospace}
.tb:active,.tb.on{background:rgba(240,236,228,0.1);color:var(--t1)}
.tb:disabled{opacity:0.3}
#back{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;border:1px solid var(--line);background:rgba(240,236,228,0.06);color:rgba(240,236,228,0.55);min-width:44px}
.sep{width:1px;height:22px;background:var(--line);margin:0 4px}
.grow{flex:1}
.title{font-size:12px;color:var(--t2);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:8px}
.title:empty{display:none}
#menu{top:calc(var(--top) + env(safe-area-inset-top));left:84px;width:200px;padding:6px}
#menu[hidden]{display:none}
.mi{display:block;width:100%;text-align:left;padding:10px 12px;background:none;border:none;color:var(--t2);font-family:'DM Mono',monospace;font-size:10px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;border-radius:6px}
.mi:active{background:rgba(240,236,228,0.08);color:var(--t1)}

/* left brush strip */
#strip{top:calc(var(--top) + 8px + env(safe-area-inset-top));left:12px;bottom:230px;width:58px;display:flex;flex-direction:column;align-items:center;padding:6px 0;gap:2px;overflow:visible}
.sb{width:44px;height:40px;border:none;background:transparent;color:var(--t2);font-size:18px;border-radius:8px;cursor:pointer;touch-action:manipulation}
.sb:active,.sb.on{background:rgba(240,236,228,0.1);color:var(--t1)}
#strip-brushes{flex:1;overflow:auto;width:100%;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;border-top:1px solid var(--line);margin-top:4px;-webkit-overflow-scrolling:touch}
.bi{width:44px;height:44px;flex:none;border:1px solid transparent;background:rgba(240,236,228,0.04);border-radius:8px;padding:0;cursor:pointer;touch-action:manipulation}
.bi{color:var(--t2);display:flex;align-items:center;justify-content:center;width:46px;height:46px;background:rgba(240,236,228,0.05)}
.bi svg{display:block}
.bi.on{border-color:var(--teal);background:rgba(42,196,162,0.12)}
.bi.on{border-color:var(--teal)}
.bi.fam{width:44px;height:14px;background:none;border:none;font-family:'DM Mono',monospace;font-size:6px;letter-spacing:1px;text-transform:uppercase;color:var(--t3);margin-top:4px;pointer-events:none}

/* floating panels (editor, library, palette, colour, reference, readout) */
.float{display:flex;flex-direction:column;max-height:calc(100vh - var(--top) - 24px - env(safe-area-inset-top))}
.float[hidden]{display:none}
.float .body{overflow:auto;-webkit-overflow-scrolling:touch}
#editor,#picker{top:calc(var(--top) + 8px + env(safe-area-inset-top));left:80px;width:320px}
#editor[hidden],#picker[hidden]{display:none}
#editor{display:flex;flex-direction:column;max-height:calc(100vh - var(--top) - 24px - env(safe-area-inset-top))}
#picker{display:flex;flex-direction:column;max-height:calc(100vh - var(--top) - 24px - env(safe-area-inset-top))}
#editor .body,#picker .body{overflow:auto;padding-bottom:14px}
#editor-preview{width:100%;height:auto;border-radius:6px;display:block;margin:6px 0 4px}
.grp{font-family:'DM Mono',monospace;font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--teal);margin:14px 0 2px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.sl{display:block;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--t3);margin-top:8px}
.sl output{float:right;color:var(--t2)}
.sl input[type=range]{display:block;width:100%;margin-top:4px;accent-color:var(--teal);height:28px}
.sl input[type=checkbox]{display:block;margin-top:6px;accent-color:var(--teal);width:18px;height:18px}
.sl select{display:block;margin-top:6px;background:var(--card);color:var(--t2);border:1px solid var(--line);border-radius:6px;padding:6px 8px;font-family:'DM Mono',monospace;font-size:10px}
#picker .body{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:10px}
#picker .grp{grid-column:1/-1;margin-top:6px}
.pick{display:flex;flex-direction:column;gap:4px;width:100%;padding:6px;background:rgba(240,236,228,0.03);border:1px solid var(--line);border-radius:8px;color:var(--t2);cursor:pointer;text-align:left;touch-action:manipulation}
.pick canvas{width:100%;height:auto;border-radius:4px;display:block}
.pick span{font-family:'DM Mono',monospace;font-size:8px;letter-spacing:1px;text-transform:uppercase;line-height:1.3}
.pick.on{border-color:var(--teal);color:var(--t1)}

/* right: layers */
#right{position:fixed;z-index:10;top:calc(var(--top) + 8px + env(safe-area-inset-top));right:12px;bottom:16px;width:100px;display:flex;flex-direction:column;overflow:hidden}
#right[hidden]{display:none}
#layers{display:flex;flex-direction:column;flex:1;min-height:0;padding:4px}
#layers-top{display:flex;justify-content:space-between;padding:2px 0 6px;flex:none}
.lb{width:18px;height:24px;border:none;background:transparent;color:var(--t2);font-size:11px;border-radius:5px;cursor:pointer;touch-action:manipulation;padding:0}
.lb:active{background:rgba(240,236,228,0.1)}
#layer-rows{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:6px}
.lrow{position:relative;border:2px solid transparent;border-radius:8px;background:rgba(240,236,228,0.03);cursor:pointer;padding:2px;width:100%}
.lrow canvas{display:block;width:100%;height:auto;border-radius:5px}
.lrow.on{border-color:var(--teal)}
.lrow.off canvas{opacity:0.35}
.lrow .eye{position:absolute;top:4px;left:4px;width:18px;height:18px;border:none;border-radius:50%;background:rgba(12,11,9,0.6);color:var(--t1);font-size:9px;cursor:pointer;padding:0}
.lop-tag{position:absolute;bottom:4px;right:4px;font-family:'DM Mono',monospace;font-size:6px;color:var(--t1);background:rgba(12,11,9,0.6);padding:1px 3px;border-radius:3px}
.lrow .lname{display:block;font-family:'DM Mono',monospace;font-size:7px;letter-spacing:.5px;text-transform:uppercase;color:var(--t2);margin:3px 2px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .lkind{position:absolute;top:6px;right:6px;font-family:'DM Mono',monospace;font-size:6px;letter-spacing:1px;text-transform:uppercase;color:var(--lux);background:rgba(12,11,9,0.6);padding:2px 4px;border-radius:4px}
.lrow .lkind:empty{display:none}
.lctl{display:grid;grid-template-columns:1fr auto;gap:2px 4px;align-items:center;padding:4px 2px 2px}
.lctl[hidden]{display:none}
.lctl .lop{width:100%;accent-color:var(--teal);height:20px;margin:0}
.lctl output{font-family:'DM Mono',monospace;font-size:7px;color:var(--t3)}
.lctl .lblend{grid-column:1/-1;background:var(--card);color:var(--t3);border:1px solid var(--line);border-radius:5px;font-family:'DM Mono',monospace;font-size:8px;padding:2px 4px}
.canvas-sel{margin:6px 2px 2px;font-size:7px}
.canvas-sel select{width:100%;padding:4px 6px;font-size:9px}

/* the double puck */
#puck{position:fixed;z-index:11;left:14px;bottom:calc(14px + env(safe-area-inset-bottom));width:96px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 0;background:rgba(12,11,9,0.86);border:1px solid var(--line);border-radius:60px;touch-action:none}
.pk{width:80px;height:80px;border-radius:50%;position:relative;overflow:hidden;border:1px solid rgba(240,236,228,0.2);cursor:pointer}
#puck-brush{background:var(--paper)}
#puck-brush canvas{width:80px;height:80px;display:block}
#puck-size{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-family:'DM Mono',monospace;font-size:9px;color:#333}
#puck-colour{background:#2a1a10}
#puck-label{position:absolute;left:104px;bottom:40px;white-space:nowrap;background:rgba(12,11,9,0.9);border:1px solid var(--line);border-radius:6px;padding:6px 10px;font-family:'DM Mono',monospace;font-size:10px;color:var(--t1)}
#puck-label[hidden]{display:none}

/* palette: a floating pad with a shape */
#palette{right:156px;bottom:16px;width:min(560px,calc(100vw - 300px))}
#palette .body{padding-bottom:10px}
#tubes{display:flex;gap:6px;overflow-x:auto;padding:6px 0 8px;-webkit-overflow-scrolling:touch}
.tube{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;width:64px;background:none;border:1px solid transparent;border-radius:8px;padding:5px 2px;color:var(--t3);cursor:grab;touch-action:none}
.tube i{display:block;width:34px;height:34px;border-radius:50%;border:1px solid rgba(240,236,228,0.15);box-shadow:inset 0 -6px 10px rgba(0,0,0,0.25)}
.tube span{font-family:'DM Mono',monospace;font-size:7px;letter-spacing:.5px;text-transform:uppercase;text-align:center;line-height:1.25;max-width:64px}
.tube.on{border-color:var(--teal);color:var(--t1)}
#tube-ghost{position:fixed;z-index:200;width:34px;height:34px;border-radius:50%;pointer-events:none;box-shadow:0 4px 12px rgba(0,0,0,0.5)}
#tube-ghost[hidden]{display:none}
#mixrow{display:flex;gap:10px;align-items:stretch}
#mixwrap{flex:1;min-width:0;height:170px;position:relative}
#mixsurf{width:100%;height:170px;display:block;touch-action:none;border-radius:8px;background:#8a847a}
#cur{width:92px;display:flex;flex-direction:column;align-items:center;gap:6px}
#cur-swatch{width:64px;height:64px;border-radius:50%;border:1px solid rgba(240,236,228,0.2)}
#cur-name{font-family:'DM Mono',monospace;font-size:8px;letter-spacing:.5px;text-transform:uppercase;color:var(--t2);text-align:center;line-height:1.25}
#cur-hex{font-family:'DM Mono',monospace;font-size:8px;color:var(--t3)}
#cur .btn{width:100%;flex:none;padding:7px}

/* colour picker */
#colour{left:124px;bottom:16px;width:272px}
#sv{width:100%;height:auto;display:block;border-radius:6px;margin-top:8px;touch-action:none}
#hue{width:100%;height:18px;display:block;border-radius:4px;margin-top:8px;touch-action:none}
#colour-row{display:flex;gap:8px;align-items:center;margin-top:8px}
#colour-sw{width:28px;height:28px;border-radius:50%;border:1px solid rgba(240,236,228,0.2)}
#colour-hex{flex:1;background:var(--card);color:var(--t1);border:1px solid var(--line);border-radius:6px;padding:6px 8px;font-family:'DM Mono',monospace;font-size:11px;-webkit-user-select:text;user-select:text}

/* reference window */
#ref{z-index:12;padding:0;overflow:hidden;touch-action:none;top:80px;left:420px}
#ref[hidden]{display:none}
#ref .sec{cursor:move;padding:6px 10px}
#ref-canvas{display:block;width:100%;background:#fff}
#ref-bar{display:flex;gap:4px;align-items:center;padding:6px}
#ref-bar .btn{flex:1;padding:6px 4px;font-size:8px}
#ref-bar .btn.on{border-color:var(--teal);color:var(--t1)}
#ref-op{width:70px;accent-color:var(--teal);height:22px;margin:0}

/* readout, note, dialogs, sign-in */
#readout{left:124px;bottom:16px;width:min(460px,calc(100vw - 300px))}
#readout-body{font-family:'DM Mono',monospace;font-size:10px;line-height:1.5;color:var(--t2);white-space:pre-wrap;-webkit-user-select:text;user-select:text}
#readout-body b{color:var(--t1);font-weight:500}
#readout-body .ok{color:var(--teal)}
#readout-body .no{color:var(--err)}
.note{top:calc(var(--top) + 8px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);padding:8px 14px;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:1px;color:var(--t2);z-index:20}
.note[hidden]{display:none}
.dlg{position:fixed;inset:0;z-index:90;background:rgba(12,11,9,0.6);display:flex;align-items:center;justify-content:center;padding:24px}
.dlg[hidden]{display:none}
.dlg-card{width:min(340px,100%);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px 22px 18px;color:var(--t1)}
.dlg-title{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:300;letter-spacing:1px}
.dlg-msg{font-size:13px;color:var(--t2);margin:8px 0 18px;line-height:1.45}
.dlg-row{display:flex;gap:8px}
.dlg-row .btn{padding:11px}
#signin{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px}
#signin[hidden]{display:none}
.card{width:min(380px,100%);background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px 26px;text-align:center}
.card .sub{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--t3);margin:8px 0 22px}
.fg{display:block;text-align:left;font-family:'DM Mono',monospace;font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--t3);margin-bottom:12px}
.fg input{display:block;width:100%;margin-top:6px;padding:12px 14px;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--t1);font-size:16px;font-family:'DM Sans',sans-serif;outline:none;-webkit-user-select:text;user-select:text}
.fg input:focus{border-color:var(--teal)}
.primary,.secondary{width:100%;padding:13px;border-radius:8px;font-family:'DM Mono',monospace;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;margin-top:8px}
.primary{background:var(--teal);color:#0c0b09;border:none;font-weight:600}
.secondary{background:transparent;color:var(--t2);border:1px solid var(--line)}
.link{background:none;border:none;color:var(--t3);font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1px;margin-top:14px;cursor:pointer;text-decoration:underline}
.msg{min-height:18px;margin-top:12px;font-size:12px;color:var(--t2);line-height:1.45}
.msg.err{color:var(--err)}

/* P-16: layer options popover, masters pop-up, puck */
#layer-opts{position:fixed;right:116px;top:calc(var(--top) + 8px + env(safe-area-inset-top));width:220px;padding:8px 12px 12px;z-index:30}
#layer-opts[hidden]{display:none}
#layer-opts .grp{margin-top:4px}
#layer-opts input[type=text]{display:block;width:100%;margin-top:6px;background:var(--card);color:var(--t1);border:1px solid var(--line);border-radius:6px;padding:6px 8px;font-family:'DM Mono',monospace;font-size:10px;-webkit-user-select:text;user-select:text}
#puck{cursor:grab}
#masters{left:80px;top:calc(var(--top) + 8px + env(safe-area-inset-top));width:380px}
#masters .body{padding-top:8px}
#masters-list{display:flex;flex-wrap:wrap;gap:4px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.mbtn{padding:5px 8px;background:transparent;border:1px solid var(--line);border-radius:14px;color:var(--t2);font-family:'DM Mono',monospace;font-size:8px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;touch-action:manipulation}
.mbtn.on{border-color:var(--teal);color:var(--t1)}
.mrow{display:flex;flex-wrap:wrap;gap:6px}
.mcol{width:66px;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;color:var(--t3);cursor:pointer;touch-action:manipulation;padding:2px}
.mcol i{display:block;width:30px;height:30px;border-radius:50%;border:1px solid rgba(240,236,228,0.15);box-shadow:inset 0 -5px 8px rgba(0,0,0,0.25)}
.mcol.none i{border-style:dashed}
.mcol span{font-family:'DM Mono',monospace;font-size:6.5px;letter-spacing:.3px;text-transform:uppercase;text-align:center;line-height:1.25}
.mbrush{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
.mbrush>span{flex:1 1 100%;font-size:11px;color:var(--t2)}
.mbrush .btn{flex:none;padding:5px 8px;font-size:8px}
.mbrush em{font-family:'DM Mono',monospace;font-size:8px;color:var(--t3);font-style:normal}
.msrc{margin-top:10px;font-family:'DM Mono',monospace;font-size:7px;color:var(--t3)}

/* P-17 */
#layers-menu{position:fixed;right:116px;top:calc(var(--top) + 8px + env(safe-area-inset-top));width:220px;padding:8px 12px 12px;z-index:30}
#layers-menu[hidden]{display:none}
#size-ring{position:fixed;left:140px;top:calc(var(--top) + 24px + env(safe-area-inset-top));border:1.5px solid rgba(20,20,20,0.7);background:rgba(120,120,120,0.35);border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,0.5);pointer-events:none;z-index:40}
#size-ring-label{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:6px;font-family:'DM Mono',monospace;font-size:9px;color:var(--t1);background:rgba(12,11,9,0.8);padding:2px 6px;border-radius:4px;white-space:nowrap}
#size-ring[hidden]{display:none}
.pbtns{display:flex;gap:4px;margin-left:auto;margin-right:6px}
.pb{padding:4px 8px;background:rgba(240,236,228,0.06);border:1px solid var(--line);border-radius:12px;color:var(--t2);font-family:'DM Mono',monospace;font-size:8px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;touch-action:manipulation}
.pb:active{background:rgba(42,196,162,0.2);color:var(--t1)}
#tubes-empty{font-family:'DM Mono',monospace;font-size:8px;letter-spacing:1px;text-transform:uppercase;color:var(--t3);padding:14px 0}
#colour-add{flex:none;padding:6px 10px;font-size:8px}
.btn.go{border-color:rgba(42,196,162,0.6);color:var(--teal)}
#presets{left:50%;top:50%;transform:translate(-50%,-50%);width:420px}
.preset{display:flex;flex-direction:column;gap:6px;width:100%;margin-top:8px;padding:10px;background:rgba(240,236,228,0.03);border:1px solid var(--line);border-radius:8px;color:var(--t1);cursor:pointer;text-align:left;touch-action:manipulation}
.preset .pname{font-size:13px}
.preset .psw{display:flex;gap:4px}
.preset .psw i{display:block;width:22px;height:22px;border-radius:50%;border:1px solid rgba(240,236,228,0.15)}
.preset .psrc{font-family:'DM Mono',monospace;font-size:7px;color:var(--t3)}
#masters{left:50%;top:50%;transform:translate(-50%,-50%);width:460px}
#masters-card{padding-top:8px}
.mtitle{display:flex;flex-direction:column;gap:2px;margin:6px 0 4px}
#m-name{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:300;letter-spacing:1px}
#m-src{font-family:'DM Mono',monospace;font-size:7px;color:var(--t3)}
.mlabel{font-family:'DM Mono',monospace;font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--teal);margin:12px 0 6px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.mlabel em{font-style:normal;color:var(--t3);letter-spacing:1px;margin-left:8px}
.mrow{display:flex;flex-wrap:wrap;gap:4px 2px}
.mcol{width:58px}
.mcol i{width:28px;height:28px}
#masters .btn.go{width:100%;margin-top:10px;flex:none}
.mbrush{display:flex;flex-direction:column;gap:1px;padding:6px 0;border-bottom:1px solid var(--line)}
.mbrush>span{font-size:12px;color:var(--t1)}
.mbrush em{font-family:'DM Mono',monospace;font-size:8px;color:var(--t3);font-style:normal;letter-spacing:.5px}
.mbrush.none>span{color:var(--t3)}
#brushbar{top:calc(var(--top) + 10px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:6px 8px;z-index:25}
#brushbar[hidden]{display:none}
#brushbar-grip{color:var(--t3);cursor:move;padding:0 4px;font-size:12px;letter-spacing:-2px;touch-action:none}
#brushbar-name{font-family:'DM Mono',monospace;font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--t2);padding-right:6px;border-right:1px solid var(--line)}
#brushbar-items{display:flex;gap:4px}
.bb{display:flex;flex-direction:column;align-items:center;gap:2px;width:58px;padding:4px 2px;background:rgba(240,236,228,0.04);border:1px solid var(--line);border-radius:8px;color:var(--t2);cursor:pointer;touch-action:manipulation}
.bb svg{width:30px;height:30px}
.bb span{font-family:'DM Mono',monospace;font-size:6px;letter-spacing:.3px;text-transform:uppercase;text-align:center;line-height:1.2}
.bb.on{border-color:var(--teal);color:var(--t1)}
#brushbar .tog{background:none;border:none;color:var(--t3);font-size:14px;cursor:pointer}

/* P-18: the side slider (Sketchbook's) */
#rail{position:absolute;right:-12px;top:60px;bottom:10px;width:12px;touch-action:none;cursor:ns-resize}
#rail::before{content:"";position:absolute;left:3px;right:3px;top:0;bottom:0;border-radius:3px;background:rgba(12,11,9,0.75);border:1px solid rgba(240,236,228,0.2)}
#rail-mid{position:absolute;left:1px;right:1px;top:50%;height:1px;background:rgba(240,236,228,0.5)}
#rail-handle{position:absolute;left:-3px;width:18px;height:26px;top:calc(50% - 13px);border-radius:5px;background:rgba(240,236,228,0.85);box-shadow:0 1px 3px rgba(0,0,0,0.5)}
#rail-handle.on{background:#2a86ff}
#rail-tip{position:absolute;left:20px;padding:4px 8px;background:rgba(12,11,9,0.9);border:1px solid var(--line);border-radius:5px;font-family:'DM Mono',monospace;font-size:10px;color:var(--t1);white-space:nowrap}
#rail-tip[hidden]{display:none}
/* compact colour panel */
#colour{left:124px;bottom:16px;width:232px}
#colour .body{padding:4px 10px 10px}
#sv{width:100%;height:auto;display:block;border-radius:5px;margin-top:6px;touch-action:none}
#hue{width:100%;height:14px;display:block;border-radius:3px;margin-top:6px;touch-action:none}
#colour-row{display:flex;gap:6px;align-items:center;margin-top:6px}
#colour-sw{width:22px;height:22px;flex:none}
#colour-hex{flex:1;min-width:0;padding:5px 6px;font-size:10px}
#colour-add{flex:none;padding:5px 8px;font-size:7px}
/* per-layer delete at the row's edge */
.lrow .ldel{position:absolute;top:4px;right:4px;width:18px;height:18px;border:none;border-radius:50%;background:rgba(12,11,9,0.6);color:var(--t1);font-size:9px;cursor:pointer;padding:0}
.lrow .lkind{top:auto;bottom:4px;left:4px;right:auto}
.lop-tag{bottom:4px;right:4px}
#presets{z-index:40;width:420px}
#brushbar{cursor:move}

/* P-19 */
.lo-toggle{display:flex;justify-content:space-between;align-items:center;gap:8px;text-transform:none;letter-spacing:.3px;font-size:9px}
.lo-toggle input{margin:0;width:18px;height:18px;accent-color:var(--teal)}
#layer-opts{width:250px}
#layer-opts .row{margin-top:8px}
#layer-opts .row .btn{padding:7px 4px;font-size:8px}
.bi.fam{width:46px}

/* P-21: bigger pop-ups and letters, bigger buttons; the strip and layers pinned to the edges (Felipe, 7 Oct) */
:root{--top:64px}
#topbar{height:52px;gap:6px}
.tb{min-width:48px;height:42px;font-size:22px;padding:0 12px}
#back{font-size:12px;min-width:64px}
.badge{font-size:12px}
.sec{font-size:13px;padding:12px 16px}
.sec .tog{font-size:24px;padding:4px 10px}
.btn{font-size:12px;padding:14px 12px;min-height:46px;letter-spacing:1px}
.pb{font-size:12px;padding:10px 14px;min-height:40px}
.sl{font-size:13px;margin-top:12px}
.sl input[type=range]{height:40px}
.sl select{font-size:14px;padding:10px 12px}
.sl input[type=checkbox]{width:26px;height:26px}
.grp{font-size:12px;margin-top:18px}
.mbtn{font-size:13px;padding:10px 14px}
.mlabel{font-size:12px}
.mcol{width:76px}.mcol i{width:38px;height:38px}.mcol span{font-size:10px}
.mbrush>span{font-size:15px}.mbrush em{font-size:11px}
#m-name{font-size:30px}#m-src{font-size:10px}
.tube{width:84px}.tube i{width:46px;height:46px}.tube span{font-size:10px;max-width:84px}
#tubes-empty{font-size:12px}
.pick span{font-size:11px}
.preset .pname{font-size:17px}.preset .psw i{width:30px;height:30px}.preset .psrc{font-size:10px}
#cur-name{font-size:12px}#cur-hex{font-size:11px}#cur-swatch{width:72px;height:72px}
#colour-hex{font-size:14px;padding:10px}#colour-add{font-size:11px;padding:12px}#colour-sw{width:34px;height:34px}
#layer-opts .row .btn{font-size:11px;padding:12px 6px}
.lo-toggle{font-size:13px}
#readout-body{font-size:13px}
.dlg-title{font-size:30px}.dlg-msg{font-size:16px}
.note{font-size:13px;padding:12px 18px}
#rail-tip{font-size:14px}
#puck-label{font-size:14px}
#size-ring-label{font-size:12px}
#editor{width:400px}#picker{width:440px}#colour{width:300px}#presets{width:520px}#masters{width:600px}#layer-opts{width:310px}#layers-menu{width:300px}#palette{width:min(680px,calc(100vw - 340px))}
#brushbar{padding:10px 12px}.bb{width:84px;padding:8px 4px}.bb svg{width:42px;height:42px}.bb span{font-size:9px}#brushbar-name{font-size:11px}
/* pinned panels: flush to the screen edge, full height under the toolbar */
#strip{left:0;top:var(--top);bottom:0;width:76px;border-radius:0 14px 14px 0;border-left:none;padding:8px 0 250px;overflow:visible}
.sb{width:60px;height:52px;font-size:24px}
.bi{width:60px;height:60px}.bi svg{width:46px;height:46px}.bi.fam{width:60px;height:20px;font-size:9px}
#strip-brushes{padding-bottom:6px}
#rail{right:-16px;width:16px;top:130px;bottom:260px}
#rail-handle{width:22px;height:34px;left:-3px;top:calc(50% - 17px)}
#right{right:0;top:var(--top);bottom:0;width:132px;border-radius:14px 0 0 14px;border-right:none}
#layers{border-radius:14px 0 0 14px;border-right:none;padding:6px}
.lb{width:30px;height:36px;font-size:16px}
.lrow .eye,.lrow .ldel{width:28px;height:28px;font-size:13px}
.lrow .lkind{font-size:9px}.lop-tag{font-size:9px}
.lgrip{position:absolute;bottom:4px;right:4px;width:30px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:rgba(12,11,9,0.7);color:var(--t1);font-size:16px;cursor:grab;touch-action:none}
.lrow.dragging{opacity:.55}.lrow.drop{outline:3px solid var(--teal)}
.lrow .lkind{left:4px;bottom:34px}
#puck{left:8px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:12}
#size-ring{left:150px}
#colour{left:92px;top:calc(var(--top) + 12px);bottom:auto}
#palette{right:148px}
#readout{left:92px;bottom:16px}
#ref-bar .btn{font-size:11px;padding:10px 4px;min-height:42px}
#cur .btn{font-size:11px;padding:12px 6px}
.mbrush .btn{font-size:11px;padding:10px 10px}
#colour-add,#masters .btn.go,.btn.go{font-size:12px}
.lb{height:44px;width:32px}
#editor-reset{font-size:12px}
#layers{width:100%;box-sizing:border-box;padding:8px 14px 8px 10px}
#layer-rows{padding-right:2px}
#layers-top{padding-right:4px}
.lb{flex:1 1 0;min-width:0;width:auto;height:44px}
#layers-top{gap:2px}
#right #layers{position:static;flex:1;min-height:0;width:100%}

/* P-22: text and rulers */
#ruler-overlay{position:fixed;inset:0;pointer-events:none;z-index:5}
.rhandle{position:fixed;z-index:15;width:48px;height:48px;border-radius:50%;background:rgba(12,11,9,0.88);border:2px solid var(--teal);color:var(--t1);display:flex;align-items:center;justify-content:center;font-size:22px;touch-action:none;cursor:grab}
.rhandle[hidden]{display:none}
.rhandle.turn{border-color:var(--lux)}
#textpanel{left:92px;top:calc(var(--top) + 12px);width:360px}
#textpanel[hidden],#rulerpanel[hidden]{display:none}
#tx-text{width:100%;margin-top:8px;background:var(--card);color:var(--t1);border:1px solid var(--line);border-radius:8px;padding:12px;font-size:18px;font-family:'DM Sans',sans-serif;resize:none;-webkit-user-select:text;user-select:text}
#tx-size{display:block;width:100%}
#rulerpanel{left:92px;top:calc(var(--top) + 12px);width:340px}
.rgrid{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.rb{flex:1 1 40%;margin:0}
.btn.on{border-color:var(--teal);color:var(--t1);background:rgba(42,196,162,0.14)}

/* P-23: selection */
#sel-overlay{position:fixed;inset:0;pointer-events:none;z-index:5}
#selbar{left:50%;transform:translateX(-50%);bottom:16px;width:min(680px,calc(100vw - 340px));z-index:20}
#selbar[hidden]{display:none}
.selrow{display:flex;flex-wrap:wrap;gap:6px;padding:6px 10px 10px}
.selrow .btn{flex:1 1 22%;padding:10px 6px}
#selbar:not(.has) #sel-move,#selbar:not(.has) #sel-layer,#selbar:not(.has) #sel-copy,#selbar:not(.has) #sel-cut,#selbar:not(.has) #sel-clear{opacity:.35}
.rhandle.scale{border-color:#2a86ff}

/* P-25: brush types panel, tips, the real ruler */
#picker{width:480px}
#picker-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px 0}
.ptab{padding:8px 12px;background:transparent;border:1px solid var(--line);border-radius:16px;color:var(--t2);font-family:'DM Mono',monospace;font-size:11px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;touch-action:manipulation}
.ptab.on{border-color:var(--teal);color:var(--t1);background:rgba(42,196,162,0.12)}
#picker-actions{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px 4px}
#picker-actions .btn{flex:1 1 30%;padding:10px 6px;font-size:11px}
#picker-actions .btn:disabled{opacity:.3}
.tipicon{width:42px;height:42px;object-fit:contain;filter:invert(1);opacity:.9}
#real-ruler{display:block;pointer-events:none}
#real-ruler-hit{position:fixed;z-index:9;touch-action:none;overflow:hidden}
#real-ruler-hit[hidden]{display:none}
#rr-ui{margin-top:6px}
.rr-scale{display:flex;gap:6px;align-items:center;margin-top:8px}
.rr-scale .btn{flex:none;padding:10px 8px;min-width:50px}
.rr-scale output{flex:1;text-align:center;font-family:'DM Mono',monospace;font-size:13px;color:var(--t1)}
.rr-note{font-size:12px;color:var(--t3);line-height:1.45;margin-top:8px}
#rulerpanel{width:380px}
#rulerpanel .body{max-height:calc(100vh - 140px);overflow:auto}
.badge,#back{white-space:nowrap;flex:none}
#topbar{gap:2px}.tb{min-width:44px;padding:0 8px}.sep{margin:0 2px}

/* P-26: the real ruler is glass */
#real-ruler-hit{background:linear-gradient(90deg,rgba(255,255,255,0.04),rgba(255,255,255,0.20));-webkit-backdrop-filter:blur(2px) saturate(1.15);backdrop-filter:blur(2px) saturate(1.15);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.35),0 6px 24px rgba(0,0,0,0.18)}
#real-ruler-hit.h{background:linear-gradient(0deg,rgba(255,255,255,0.04),rgba(255,255,255,0.20))}
#real-ruler-x{position:absolute;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,0.7);background:rgba(12,11,9,0.55);color:#fff;font-size:16px;cursor:pointer;padding:0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.rhandle.remove{border-color:#e04040;width:44px;height:44px;font-size:18px}
.rhandle.remove[hidden]{display:none}
#layer-opts{max-height:calc(100vh - 90px);overflow:auto;top:calc(var(--top) + 6px)}
#layers-menu{max-height:calc(100vh - 90px);overflow:auto}

/* P-28 */

#paint-type,#open-time{display:flex;align-items:center;gap:6px;padding:8px 0 2px;flex-wrap:wrap}
.pt-label{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--teal);min-width:84px}
.pt{padding:9px 12px;background:transparent;border:1px solid var(--line);border-radius:16px;color:var(--t2);font-family:'DM Mono',monospace;font-size:11px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;touch-action:manipulation}
.pt.on{border-color:var(--teal);color:var(--t1);background:rgba(42,196,162,0.14)}
#open-time-r{flex:1;accent-color:var(--teal);height:32px;margin:0}
#open-time output{font-family:'DM Mono',monospace;font-size:12px;color:var(--t2);min-width:44px;text-align:right}

/* P-28: the shared Gallery */
#gallerypanel{left:50%;top:calc(var(--top) + 12px);transform:translateX(-50%);width:min(760px,calc(100vw - 340px));z-index:30}
#gallerypanel[hidden]{display:none}
#gal-note{font-size:13px;color:var(--t2);line-height:1.45;padding:8px 0}
#gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding-bottom:10px}
.gcard{display:flex;flex-direction:column;gap:4px;padding:8px;background:rgba(240,236,228,0.04);border:1px solid var(--line);border-radius:10px;color:var(--t1);cursor:pointer;text-align:left;touch-action:manipulation}
.gcard:active{border-color:var(--teal)}
.gthumb{width:100%;aspect-ratio:4/3;border-radius:6px;background:#2a2723 center/contain no-repeat}
.gname{font-size:13px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gmeta{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--teal)}
.gcard[data-kind="painting"] .gmeta{color:var(--lux)}

/* P-29 canvas size, crop and turn */
.cs-card{width:min(560px,100%);max-height:92vh;overflow:auto}
.cs-label{font-size:15px;color:var(--t2);margin:14px 0 6px}
.cs-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cs-row input{width:110px;font-size:20px;padding:10px;background:var(--bg,#1b1a17);color:var(--t1);border:1px solid var(--line);border-radius:8px}
.cs-row .chip{font-size:17px;padding:12px 16px;min-height:48px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--t1)}
.cs-row .chip.on,.cs-anchor button.on{background:var(--teal,#2AC4A2);color:#0e0d0b;border-color:var(--teal,#2AC4A2)}
.cs-anchor{display:grid;grid-template-columns:repeat(3,52px);gap:6px}
.cs-anchor[hidden]{display:none}
.cs-anchor button{width:52px;height:52px;border:1px solid var(--line);border-radius:8px;background:transparent}
.cs-turn{font-size:18px;color:var(--t2);min-width:48px}
.cs-prev{margin:14px 0 4px;text-align:center}
.cs-prev canvas{background:#2a2824;border-radius:8px;max-width:100%}
.cs-prev{margin:0 0 4px}.cs-foot{position:sticky;bottom:-18px;background:var(--card);padding:12px 0 6px;margin-top:8px}
.cs-prev canvas{width:200px;height:133px}

/* P-30 layer transform numbers */
.tf-nums{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tf-nums[hidden]{display:none}
.tf-nums label{font-size:16px;color:var(--t2);display:flex;gap:6px;align-items:center}
.tf-nums input{width:92px;font-size:20px;padding:8px;background:var(--bg,#1b1a17);color:var(--t1);border:1px solid var(--line);border-radius:8px}
#selbar.tf #sel-all,#selbar.tf #sel-none,#selbar.tf #sel-invert,#selbar.tf #sel-move,#selbar.tf #sel-layer,#selbar.tf #sel-copy,#selbar.tf #sel-cut,#selbar.tf #sel-paste,#selbar.tf #sel-clear{display:none}
#selbar.tf .selrow{flex-wrap:nowrap;align-items:center}
#selbar.tf .selrow .btn{flex:0 0 auto;padding:12px 16px}
#selbar.tf .tf-nums{flex:1 1 auto;flex-wrap:nowrap;gap:8px}
#selbar.tf .tf-nums label{white-space:nowrap}
#selbar.tf .tf-nums input{width:76px}
#selbar.tf{width:min(900px,calc(100vw - 340px))}

/* P-34: the palette is back to its first size; the paint-type controls are one small row */
#paint-type,#open-time{display:inline-flex;align-items:center;gap:4px;padding:4px 10px 0 0;flex-wrap:nowrap;vertical-align:middle}
#paint-type .pt-label,#open-time .pt-label{min-width:0;font-size:9px;letter-spacing:1px}
#paint-type .pt{padding:4px 8px;font-size:10px;letter-spacing:.5px;border-radius:12px}
#open-time-r{width:90px;flex:none;height:20px}
#open-time output{font-size:10px;min-width:30px}

/* P-34: choosing a colour must never move the pad (the name used to wrap and push it up 15 px) */
#cur-name{height:3.2em;overflow:hidden;display:flex;align-items:center;justify-content:center;width:100%}
#cur-hex{height:1.4em;line-height:1.4em}
#palette .pb{font-size:11px;padding:5px 10px;min-height:30px;letter-spacing:.3px}
#palette #palette-head{padding-top:6px;padding-bottom:6px}
#palette #cur .btn{font-size:10px;padding:7px 4px}

/* P-35: every master in the presets, with its brush kit */
#presets{display:flex;flex-direction:column}
#presets .body{overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0;flex:1}
.pgroup{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--teal);padding:14px 2px 2px}
.preset.mp{cursor:default}
.preset.mp .mpb{display:flex;gap:6px;flex-wrap:wrap}
.preset.mp .mpb .pb{font-size:11px;padding:7px 12px;min-height:34px}
.preset.mp .mpb .pb:disabled{opacity:.35}
#presets[hidden]{display:none}

/* P-36: favourites, and the name of the brush in your hand */
#brush-name{width:100%;min-height:34px;padding:4px 6px 2px;font-family:'DM Mono',monospace;font-size:9px;line-height:1.25;letter-spacing:.3px;text-align:center;color:var(--t1);overflow:hidden;display:flex;align-items:center;justify-content:center;word-break:break-word}
.bi.tmp{border-style:dashed;border-color:var(--line)}
.pick{position:relative}
.pstar{position:absolute;top:4px;right:4px;width:34px;height:34px;border-radius:17px;border:none;background:rgba(20,19,17,0.55);color:var(--t2);font-size:20px;line-height:34px;padding:0;cursor:pointer;touch-action:manipulation}
.pstar.on{color:#f0b429}
.pempty{padding:14px 4px;font-size:14px;color:var(--t2)}
.favbtn{background:none;border:none;color:var(--t2);font-size:26px;line-height:1;padding:2px 10px;cursor:pointer;touch-action:manipulation;margin-left:auto}
.favbtn.on{color:#f0b429}
#lib-fav.on{color:#f0b429;border-color:#f0b429}
@media (min-width:768px){#brush-name{font-size:11px;min-height:44px}}

/* P-37: dark tools stay visible on the dark bar */
.bi svg{filter:drop-shadow(0 0 1px rgba(240,236,228,0.6))}

/* P-38: two sliders on the side of the brush bar, size above opacity */
#rail{position:absolute;right:-16px;top:100px;bottom:250px;width:16px;display:flex;flex-direction:column;gap:12px;touch-action:none;cursor:default}
#rail::before{display:none}
.rail{position:relative;flex:1;min-height:60px;border-radius:5px;background:rgba(12,11,9,0.8);border:1px solid rgba(240,236,228,0.22);touch-action:none;cursor:ns-resize}
.rh{position:absolute;left:-4px;width:22px;height:30px;border-radius:6px;background:rgba(240,236,228,0.9);box-shadow:0 1px 3px rgba(0,0,0,0.55);top:0}
.rh.on{background:#2a86ff}
.rl{position:absolute;left:24px;top:0;padding:3px 7px;background:rgba(12,11,9,0.85);border:1px solid var(--line);border-radius:5px;font-family:'DM Mono',monospace;font-size:10px;color:var(--t1);white-space:nowrap;pointer-events:none}
#rail-op .rl{top:auto;bottom:0}
@media (min-width:768px){.rl{font-size:12px}.rh{width:26px;height:36px;left:-6px}#rail{right:-20px;width:18px}}

/* P-39: pop-ups close on a touch outside, so their close buttons are gone */
#editor .tog,#picker .tog,#colour .tog,#presets .tog,#masters .tog,#readout .tog,#gallerypanel .tog,#lo-close,#layers-menu-close,#layers-menu .row:last-child{display:none}

/* P-39: a visible options button on every layer, and bigger targets on the layer row */
.lrow .lopt{position:absolute;bottom:4px;left:4px;width:34px;height:30px;border:none;border-radius:8px;background:rgba(12,11,9,0.78);color:var(--t1);font-size:20px;line-height:1;cursor:pointer;padding:0;touch-action:manipulation}
.lrow .eye,.lrow .ldel{width:32px;height:32px;font-size:14px}
.lrow .lgrip{width:36px;height:32px}

/* P-40: drawn toolbar icons */
.tb{display:inline-flex;align-items:center;justify-content:center}
.tb .tbi{display:block;width:24px;height:24px;pointer-events:none}
.tb .tbl{font-family:'DM Mono',monospace;font-size:13px;letter-spacing:1.2px;text-transform:uppercase;margin-left:4px}
#back{padding:0 12px 0 6px}
@media (min-width:768px){.tb .tbi{width:28px;height:28px}}

/* P-41: the Pad wears the studio's colours: near-black chrome, hairline borders, teal for labels and the gold for warnings. Procreate's rule for text: clearly lighter than the panel, and the tiny labels are teal, not dim. */
.sec{color:var(--teal)}
.sec .tog{color:var(--t2)}
.grp,.mlabel,.pgroup,.cs-label,.pt-label{color:var(--teal)}
.btn{color:var(--t1);border-color:rgba(240,236,228,0.2);background:rgba(240,236,228,0.03)}
.btn.go{color:var(--teal);border-color:rgba(42,196,162,0.55);background:rgba(42,196,162,0.08)}
.btn.warn{color:var(--lux);border-color:rgba(200,136,26,0.65)}
.pick span,.preset .pname,.preset .psrc,#cur-name,#cur-hex,#tubes-empty,.gname,.gmeta,#brush-name,.cs-turn,.tf-nums label{color:var(--t1)}
.preset .psrc,#cur-hex,#tubes-empty{color:var(--t2)}
.pt{color:var(--t2);border-color:rgba(240,236,228,0.2)}
.ptab{color:var(--t2);border-color:rgba(240,236,228,0.2)}
.ptab.on,.pt.on{color:var(--t1)}
.lrow,.pick,.preset,.gcard{background:var(--raised);border-color:rgba(240,236,228,0.12)}
.lrow.on,.pick.on{border-color:var(--teal)}
.bi{background:var(--raised)}
select,input[type=text],input[type=number]{background:#0b0a08;color:var(--t1);border:1px solid rgba(240,236,228,0.2)}

/* P-42: rulers */
#rulerpick{z-index:50;padding:10px;width:max-content;max-width:min(430px,calc(100vw - 16px))}
#rulerpick[hidden]{display:none}
#rp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rp{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 10px 8px;min-width:112px;background:var(--raised);border:1px solid rgba(240,236,228,0.16);border-radius:10px;color:var(--t1);cursor:pointer;touch-action:manipulation}
.rp.on{border-color:var(--teal);color:var(--teal);background:rgba(42,196,162,0.1)}
.rp span{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:inherit}
.rp .rpi{width:44px;height:44px}
#rulerpick #rr-ui{margin-top:10px;border-top:1px solid var(--line);padding-top:6px}
#rulerpick #rr-ui[hidden]{display:none}
#rulerpick .rr-scale .btn{padding:8px 6px;min-width:46px}
#real-ruler-hit{position:fixed;z-index:95;touch-action:none;overflow:visible;transform-origin:50% 50%;cursor:grab}
#real-ruler-turn,#real-ruler-turn-l{position:absolute;width:44px;height:44px;border-radius:50%;border:2px solid var(--lux);background:rgba(12,11,9,0.8);color:var(--t1);display:flex;align-items:center;justify-content:center;font-size:22px;cursor:grab;touch-action:none}
#real-ruler{display:block;pointer-events:none;border-radius:6px}
#ruler-x,#ruler-move,#ruler-turn,#ruler-sx,#ruler-sy{z-index:60}

/* P-43: the colour row scrolls sideways */
#tubes{touch-action:pan-x;overscroll-behavior-x:contain}
#tubes .tube{touch-action:pan-x;flex:none}

/* P-44: the brush bar. Thin sliders on its edge (size above, opacity below); smaller icons so the list fills the bar. */
#rail{right:-6px;width:12px;top:96px;bottom:200px;gap:14px}
.rail{background:rgba(240,236,228,0.16);border:none;border-radius:3px;width:4px;margin:0 auto}
.rh{left:50%;transform:translateX(-50%);width:14px;height:30px;border-radius:7px;box-shadow:0 1px 4px rgba(0,0,0,0.6);background:var(--t1)}
.rl{display:none}
.rail.on .rl,.rail:active .rl{display:block}
@media (min-width:768px){#rail{right:-8px;width:14px}.rh{width:16px;height:34px}.rl{font-size:11px}}
#strip{padding-bottom:190px}
.bi{width:54px;height:54px;margin:0}
.bi svg{width:36px;height:36px}
#strip-brushes{gap:3px}

/* P-45: a layer shows two icons, an eye and a lock; a quick double tap opens its options; hold and drag moves it */
.lrow .eye,.lrow .llock{position:absolute;top:4px;width:34px;height:34px;border:none;border-radius:50%;background:rgba(12,11,9,0.72);color:var(--t1);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;touch-action:manipulation}
.lrow .eye{left:4px}
.lrow .llock{right:4px;color:var(--t2)}
.lrow .llock.on{color:var(--lux);background:rgba(200,136,26,0.22)}
.lrow .llock:disabled{opacity:.5}
.lrow.dragging{opacity:.65;outline:2px dashed var(--teal)}
.lrow.drop{outline:2px solid var(--teal)}
.lrow .lopt,.lrow .ldel,.lrow .lgrip{display:none}
#relief-block{margin-top:10px;border-top:1px solid var(--line);padding-top:6px}
#relief-block .sl{margin-top:8px}

/* P-47: the options of the tool in your hand */
#toolopts{top:calc(var(--top) + 6px);left:50%;transform:translateX(-50%);display:flex;gap:16px;align-items:center;padding:8px 14px;max-width:calc(100vw - 340px);flex-wrap:wrap;z-index:18}
#toolopts[hidden]{display:none}
.to-item{display:flex;align-items:center;gap:8px;font-family:'DM Mono',monospace;font-size:12px;color:var(--t2)}
.to-item span{letter-spacing:.5px;text-transform:uppercase;font-size:10px;color:var(--teal)}
.to-range input{width:130px;accent-color:var(--teal)}
.to-range output{min-width:44px;color:var(--t1);font-size:12px}
.to-b{padding:8px 12px;min-height:34px;background:transparent;border:1px solid rgba(240,236,228,0.22);border-radius:8px;color:var(--t1);font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.4px;cursor:pointer;touch-action:manipulation}
.to-b.on{border-color:var(--teal);color:var(--teal);background:rgba(42,196,162,0.12)}

#guide-overlay{position:fixed;inset:0;pointer-events:none;z-index:6}
#ref.ref-photo #ref-bar [data-mode],#ref.ref-photo #ref-op{display:none}
#ref-load{flex:0 0 auto;padding:8px 14px}
body.focus-mode #topbar,body.focus-mode #strip,body.focus-mode #right,body.focus-mode #puck,body.focus-mode #toolopts,body.focus-mode #selbar,body.focus-mode #palette,body.focus-mode #brushbar,body.focus-mode #rail{display:none!important}
#focus-exit{position:fixed;top:12px;right:12px;z-index:60;width:46px;height:46px;border-radius:50%;border:1px solid rgba(240,236,228,0.35);background:rgba(15,14,12,0.7);color:var(--t1);font-size:20px;cursor:pointer;touch-action:manipulation}
#focus-exit[hidden]{display:none}
#toolopts{flex-wrap:nowrap;overflow-x:auto;gap:12px}

/* P-49: the text studio */
#textpanel{left:92px;top:calc(var(--top) + 12px);width:min(450px,calc(100vw - 340px));max-height:calc(100vh - var(--top) - 40px);display:flex;flex-direction:column;z-index:22}
#textpanel[hidden]{display:none}
#tx-tabs{display:flex;gap:6px;padding:8px 12px 4px;flex-wrap:wrap}
#tx-tabs .ptab{flex:1 1 auto;padding:10px 8px;min-height:40px}
#tx-body{overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0;flex:1;padding-bottom:6px}
#tx-body textarea{width:100%;font-size:18px;padding:10px;background:#0b0a08;color:var(--t1);border:1px solid rgba(240,236,228,0.2);border-radius:8px;resize:vertical;font-family:'DM Sans',sans-serif}
#tx-body .sl{margin-top:10px}
#tx-body .cl{display:flex;justify-content:space-between;align-items:center}
#tx-body .cl input[type=color]{width:64px;height:38px;border:1px solid rgba(240,236,228,0.25);border-radius:8px;background:none;padding:2px}
.tgrp{margin-top:12px;padding-top:6px;border-top:1px solid var(--line)}
.tgrp .tgl{margin-top:8px;flex:none}
.btn.tgl{width:100%;text-align:left;padding:12px}
.btn.tgl.on{border-color:var(--teal);color:var(--teal);background:rgba(42,196,162,0.12)}
.seg{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px}
.seg span{width:100%;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--teal)}
.seg .btn{flex:1 1 auto;padding:10px 8px}
.seg .btn.on{border-color:var(--teal);color:var(--teal);background:rgba(42,196,162,0.12)}
#tx-foot{padding:8px 12px 12px;margin:0;border-top:1px solid var(--line)}
.frow{display:flex;align-items:center;gap:12px;padding:8px 10px;margin-top:6px;background:var(--raised);border:1px solid rgba(240,236,228,0.12);border-radius:8px;cursor:pointer;min-height:48px}
.frow.on{border-color:var(--teal)}
.frow .fs{font-size:30px;line-height:1;color:var(--t1);min-width:62px}
.frow .fn{flex:1;font-family:'DM Mono',monospace;font-size:12px;color:var(--t2)}
.frow .fx{background:none;border:none;color:var(--lux);font-size:18px;padding:8px;cursor:pointer}
#tx-looks{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.look{display:flex;flex-direction:column;gap:4px;padding:6px;background:var(--raised);border:1px solid rgba(240,236,228,0.14);border-radius:10px;cursor:pointer;color:var(--t1);touch-action:manipulation}
.look canvas{width:100%;height:auto;border-radius:6px}
.look span{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.5px;text-transform:uppercase}

/* P-50: a top bar that fits; the real-world ruler's dots on its edge; the build number in the menu */
#topbar{overflow:hidden}
#topbar .tb{min-width:40px;padding:0 5px;flex:none}
#topbar .sep{flex:none;margin:0 2px}
@media (min-width:768px){#topbar .tb{min-width:42px;padding:0 6px}}
#tb-more{top:calc(var(--top) + 6px);padding:10px;z-index:50;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:max-content;max-width:calc(100vw - 16px)}
#tb-more[hidden]{display:none}
#tb-more .tb{background:var(--raised);border:1px solid rgba(240,236,228,0.14);border-radius:10px;min-width:56px;height:56px}
#tb-more .tb.on{border-color:var(--teal);color:var(--teal)}
#m-build{padding:12px 14px 8px;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:1px;color:var(--t3);border-top:1px solid var(--line);margin-top:6px}

@media (max-width:900px){#toolopts{max-width:calc(100vw - 16px);flex-wrap:wrap;left:8px;transform:none;overflow:visible;gap:8px 14px;top:calc(var(--top) + 4px)}}

/* P-51: the colour circle on the puck: a hue ring round a disc of the brush colour (touch the ring = hue, live; the disc = tap for the picker, drag for saturation / lightness) */
#puck-colour{background:conic-gradient(from 0deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);touch-action:none}
#puck-colour::before{content:'';position:absolute;inset:15px;border-radius:50%;background:var(--pc,#2a1a10);box-shadow:0 0 0 2px rgba(12,11,9,0.9),inset 0 0 0 1px rgba(240,236,228,0.25)}
#puck-colour::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--pc,#2a1a10);border:2px solid #fff;box-shadow:0 0 0 1.5px rgba(0,0,0,0.65);transform:rotate(var(--ph,0deg)) translateY(-32px)}

/* P-53: a colour dragged from a tube is never taken over by scrolling: the tubes take no native pan */
#tubes .tube{touch-action:none}
#tubes{touch-action:pan-x}
#palette.carrying #tubes{overflow-x:hidden}

/* P-53: the eyedropper icon sits on the bottom of the colour ring (the button in the colour pop-up is gone) */
#puck-pick{position:absolute;left:50%;bottom:-2px;margin-left:-15px;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;background:rgba(12,11,9,0.94);color:var(--t1);border:1px solid rgba(240,236,228,0.35);cursor:pointer;z-index:2;touch-action:none}
#puck-pick.on{background:var(--teal,#2ac4a2);color:#0c0b09;border-color:transparent}
#puck-pick svg{pointer-events:none}

/* P-54: the loupe of a finger held on the picture */
#loupe{position:fixed;z-index:60;width:72px;height:72px;border-radius:50%;pointer-events:none;border:4px solid #fff;box-shadow:0 0 0 2px rgba(0,0,0,0.55),0 6px 16px rgba(0,0,0,0.4);background:var(--lc,#888)}
#loupe[hidden]{display:none}
#loupe i{position:absolute;left:50%;bottom:-14px;width:2px;height:12px;background:#fff;margin-left:-1px;box-shadow:0 0 0 1px rgba(0,0,0,0.5)}
/* P-54: the double puck is as wide as the brush strip, so no panel opens under it */
#puck{left:0;width:76px;gap:6px;padding:6px 0;border-radius:0 38px 38px 0}
.pk{width:60px;height:60px}
#puck-brush canvas{width:58px;height:58px}
#puck-size{font-size:9px;bottom:3px;left:50%;right:auto;transform:translateX(-50%);white-space:nowrap;background:rgba(255,255,255,0.85);border-radius:7px;padding:0 4px;line-height:13px}
#puck-colour::before{inset:11px}
#puck-colour::after{width:11px;height:11px;margin:-5.5px 0 0 -5.5px;transform:rotate(var(--ph,0deg)) translateY(-24px)}
#puck-pick{width:26px;height:26px;margin-left:-13px;bottom:-4px}
/* P-54: a layer row is the picture and, beside it, the eye and the lock: nothing sits on top of the thumbnail */
.lrow{display:grid;grid-template-columns:minmax(0,1fr) 34px;grid-template-rows:auto auto;gap:4px 4px;align-items:center}
.lrow canvas{grid-column:1;grid-row:1 / span 2}
.lrow .eye,.lrow .llock{position:static;grid-column:2;width:34px;height:34px;left:auto;right:auto;top:auto}
.lrow .eye{grid-row:1;align-self:end}.lrow .llock{grid-row:2;align-self:start}
.lrow .lkind{left:6px;bottom:6px;top:auto}
#puck-brush{overflow:visible}
#puck-brush canvas{border-radius:50%}
#puck-size{z-index:3;font-size:8px;bottom:-5px;box-shadow:0 1px 3px rgba(0,0,0,0.35)}

/* P-57: recent colours under the colour picker */
#colour-recent-label{margin-top:10px;font-family:'DM Mono',monospace;font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--t3)}
#colour-recent{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
#colour-recent .rc{width:30px;height:30px;border-radius:50%;border:1px solid rgba(240,236,228,0.25);padding:0;cursor:pointer;touch-action:manipulation}

/* P-58: drawing guides */
#guidepick{z-index:42;width:300px;padding:10px}
#gp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#gp-opts{margin-top:10px}#gp-opts.none{display:none}
#gp-opts .sl{display:block;margin-top:6px;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--t2)}
#gp-opts .sl output{float:right;color:var(--t1)}
#gp-opts input[type=range]{width:100%;margin-top:6px}
#gp-opts.persp .sl:first-child{display:none}
#gp-opts .row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;font-size:12px;color:var(--t1)}
#gp-opts .row input{width:22px;height:22px;accent-color:#2ac4a2}
.gh{position:fixed;z-index:30;width:44px;height:44px;border-radius:50%;touch-action:none;cursor:grab}
.gh i{position:absolute;inset:11px;border-radius:50%;background:#2ac4a2;border:2px solid #fff;box-shadow:0 0 0 2px rgba(0,0,0,0.5)}
.gh.edge i{background:rgba(42,196,162,0.55)}
.gh[hidden]{display:none}
#guidepick .rp{min-width:0;padding:10px 4px 6px}

/* P-59: what is switched on lights up in the VOLUX green (tools, panels, guides, symmetry, the brush that is held) */
.tb:active{background:rgba(240,236,228,0.1);color:var(--t1)}
.tb.on,#topbar .tb.on{background:rgba(42,196,162,0.2);color:#2ac4a2;box-shadow:inset 0 0 0 1.5px rgba(42,196,162,0.9)}
.tb.on svg{stroke:#2ac4a2}
.bi.on{border-color:#2ac4a2;background:rgba(42,196,162,0.22);box-shadow:0 0 0 1.5px #2ac4a2,0 0 14px rgba(42,196,162,0.35)}
.pick.on{border-color:#2ac4a2;box-shadow:0 0 0 1.5px #2ac4a2;background:rgba(42,196,162,0.12)}
.rp.on{border-color:#2ac4a2;background:rgba(42,196,162,0.18);color:#2ac4a2}
.gh.sym i{background:#fff;border-color:#2ac4a2}
#sympick{z-index:42;width:300px;padding:10px}
#sy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#sympick .rp{min-width:0;padding:10px 4px 6px}
#sy-opts{margin-top:10px}#sy-opts.none{display:none}
#sy-opts .sl{display:block;margin-top:6px;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--t2)}
#sy-opts .sl output{float:right;color:var(--t1)}#sy-opts input[type=range]{width:100%;margin-top:6px}
#sy-opts .row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;font-size:12px;color:var(--t1)}
#sy-opts .row input{width:22px;height:22px;accent-color:#2ac4a2}
#sy-centre{width:100%;margin-top:12px}

/* P-62: pop-ups sit in front of the layers panel and the brush strip */
#palette,#editor,#picker,#colour,#masters,#presets,#layer-opts,#layers-menu,#gallerypanel,#readout,#textpanel,#toolopts{z-index:28}
/* no zoom of the page: an input under 16 px makes iPad Safari zoom in when it is focused */
input,textarea,select{font-size:16px!important}
input[type=range]{font-size:16px!important}
html,body{touch-action:manipulation}
/* the colour row's arrows */
#tubes-wrap{position:relative}
.tube-arrow{position:absolute;top:8px;z-index:3;width:34px;height:46px;border:none;border-radius:8px;background:rgba(12,11,9,0.88);color:var(--t1);font-size:26px;line-height:1;cursor:pointer;touch-action:manipulation;box-shadow:0 0 0 1px rgba(240,236,228,0.2)}
.tube-arrow[hidden]{display:none}
#tubes-l{left:0}#tubes-r{right:0}
#open-time-help{margin:2px 0 6px;font-size:11px;line-height:1.4;color:var(--t3);font-family:'DM Sans',sans-serif}
/* the bin and its undo */
#layer-trash{display:inline-flex;align-items:center;justify-content:center}
.trash-toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);z-index:120;display:flex;gap:14px;align-items:center;padding:10px 12px 10px 18px;background:rgba(15,14,12,0.97);border:1px solid rgba(42,196,162,0.6);border-radius:12px;color:var(--t1);font-family:'DM Mono',monospace;font-size:12px;letter-spacing:1px;text-transform:uppercase}
.trash-toast button{padding:10px 16px;border-radius:8px;border:1px solid #2ac4a2;background:rgba(42,196,162,0.18);color:#2ac4a2;font-family:inherit;font-size:12px;letter-spacing:1px;text-transform:uppercase;cursor:pointer}

/* P-62: moving a brush in the bar and a layer in the stack */
.bi{touch-action:none}
.bi.dragging{position:relative;z-index:20;opacity:.85;box-shadow:0 8px 20px rgba(0,0,0,0.5);border-color:#2ac4a2}
.bi.drop-before{box-shadow:0 -3px 0 #2ac4a2}.bi.drop-after{box-shadow:0 3px 0 #2ac4a2}
.lrow{touch-action:none}

/* P-63: small icon buttons with the name under them (selection, transform, layer options) */
.btn.ico{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:7px 4px 5px;min-width:54px;min-height:48px;font-size:9px;letter-spacing:.5px;text-transform:uppercase;line-height:1.1;text-align:center}
.btn.ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn.ico span{white-space:nowrap}
.btn.ico.go{color:#2ac4a2;border-color:rgba(42,196,162,0.55)}
.btn.ico.warn{color:#e0a040}
#selbar{width:auto!important;max-width:calc(100vw - 250px);padding:6px 8px;bottom:12px}
#selbar-head{display:none}
#selbar .selrow{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;align-items:center}
#selbar.tf .selrow .btn.ico{padding:7px 10px 5px}
#layer-opts .row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
#layer-opts .row .btn.ico{flex:1 1 0;min-width:0}
#layer-opts .row:last-child .btn.ico{flex:0 0 auto}
.btn.ico[hidden],#selbar .btn[hidden],#selbar .tf-nums[hidden]{display:none!important}
#selbar .selrow{flex-wrap:nowrap!important}
#selbar .selrow .btn.ico{flex:0 0 auto}

/* P-64: the same small icon buttons in the palette, the brush library, the text studio and the dialogs */
.btn.ico.only{min-width:42px;min-height:42px;padding:8px}
.btn.ico.on svg path{fill:currentColor}
#palette .pbtns .pb.ico,#palette-head .pb{padding:5px 8px}
#palette #pal-colour,#palette #pal-masters,#palette #pal-presets{min-width:52px;min-height:44px;padding:5px 6px 4px;font-size:8.5px;background:var(--raised);border:1px solid rgba(240,236,228,0.16);border-radius:8px;color:var(--t1);cursor:pointer}
#cur-acts{display:flex;gap:6px;justify-content:center;margin-top:6px}
#cur-name{font-size:11px}
#cur-hex{display:none}
#picker-actions{display:flex;flex-wrap:wrap;gap:6px;padding:6px 8px}
#picker-actions .btn.ico{flex:1 1 0;min-width:48px}
#tx-foot .btn.ico,.dlg .btn.ico{min-width:64px}
#help-popup{display:none;position:fixed;z-index:600;width:230px;background:#1a1918;border:1px solid rgba(42,196,162,0.35);border-radius:6px;padding:12px 14px;box-shadow:0 8px 32px rgba(0,0,0,0.6)}
#help-popup.show{display:block}
#help-popup-title{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:#2ac4a2;margin-bottom:7px}
#help-popup-body{font-family:'DM Sans',sans-serif;font-size:12px;color:rgba(240,236,228,0.75);line-height:1.55;margin-bottom:8px}
#help-popup-when{font-family:'DM Mono',monospace;font-size:8.5px;letter-spacing:.5px;color:rgba(240,236,228,0.45);line-height:1.6;border-top:1px solid rgba(240,236,228,0.1);padding-top:7px}
#help-popup-when::before{content:'WHEN TO USE — ';color:rgba(42,196,162,0.7)}
.help-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(42,196,162,0.1);border:1px solid rgba(42,196,162,0.45);color:#2ac4a2;font-family:'DM Mono',monospace;font-size:11px;cursor:pointer;line-height:1;margin-left:6px;padding:0;touch-action:manipulation;vertical-align:middle}
/* the colour row's slider and its arrows: below the colours, thin, teal, subtle */
#tubes-scrub{display:flex;align-items:center;gap:6px;margin:2px 0 4px}
#tubes-scrub[hidden]{display:none}
#scrub-track{position:relative;flex:1;height:18px;border-radius:9px;background:linear-gradient(to bottom,transparent 7px,rgba(42,196,162,0.22) 7px,rgba(42,196,162,0.22) 11px,transparent 11px)}
#scrub-thumb{position:absolute;top:3px;height:12px;border-radius:6px;background:rgba(42,196,162,0.55);min-width:36px}
.tube-arrow{position:static!important;width:20px!important;height:20px!important;border:none;background:transparent!important;color:rgba(42,196,162,0.75);font-size:18px;line-height:1;padding:0;box-shadow:none!important;cursor:pointer;touch-action:manipulation}
.tube-arrow.dim{opacity:.3}
#open-time-help{display:none}
.ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.pb.ico,#palette .pb.ico{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-transform:uppercase;letter-spacing:.5px}
#cur-acts .btn.ico{min-width:34px!important;min-height:34px!important;width:34px;padding:5px!important}
#cur-acts .btn.ico svg{width:19px;height:19px}
#cur{min-width:0}

/* P-65: the stay-wet slider at the end of the paint-type row; a quiet "?" like the studio's; names that never push the pad; a thin colour slider with a small handle */
#paint-type{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
#open-time{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding-left:10px}
#open-time input{width:96px;margin:0}
#open-time .pt-label{margin:0}
#open-time output{min-width:34px;font-family:'DM Mono',monospace;font-size:10px;color:var(--t2)}
.help-btn{width:14px!important;height:14px!important;margin-left:4px!important;background:rgba(240,236,228,0.06)!important;border:1px solid rgba(240,236,228,0.18)!important;color:rgba(240,236,228,0.4)!important;font-size:8px!important}
.help-btn:hover,.help-btn:active{background:rgba(42,196,162,0.15)!important;border-color:rgba(42,196,162,0.45)!important;color:#2ac4a2!important}
#cur-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;height:2.7em;line-height:1.3;max-width:100%;word-break:break-word}
.tube span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;max-height:2.6em}
#tubes{padding-bottom:4px}
#tubes-scrub{margin:6px 0 12px}
#scrub-track{height:14px;background:linear-gradient(to bottom,transparent 6px,rgba(42,196,162,0.22) 6px,rgba(42,196,162,0.22) 8px,transparent 8px)}
#scrub-thumb{top:2px;height:10px;width:30px!important;min-width:30px;border-radius:5px;background:#f0ece4;box-shadow:0 1px 4px rgba(0,0,0,0.5)}

#paint-type{flex-wrap:nowrap!important;gap:4px!important}
#paint-type .pt{padding:5px 8px!important;font-size:9.5px!important;letter-spacing:.3px;white-space:nowrap}
#open-time input{width:64px!important}
#open-time{padding-left:6px!important;flex:none}
#open-time output{min-width:26px!important}
body.recording::after{content:'REC';position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:300;padding:3px 12px;border-radius:12px;background:#d62d20;color:#fff;font:600 11px 'DM Mono',monospace;letter-spacing:2px;pointer-events:none}