:root{
  color-scheme:dark;
  /* Screen approximations of RAL Classic */
  --ral9005:#0A0A0A; /* Jet black */
  --ral9011:#1B1D1F; /* Graphite black */
  --ral7021:#2A2E31; /* Black grey */
  --ral7016:#383E42; /* Anthracite grey */
  --ral7035:#C5CAC6; /* Light grey */
  --ral9003:#ECECE7; /* Signal white */
  --ral2004:#F44611; /* Pure orange */
  --ral1023:#FAD201; /* Traffic yellow */
  --ral2007:#FFB200; /* Luminous bright orange */
  --ral3020:#C1121C; /* Traffic red */
  --ral4010:#CF3476; /* Telemagenta */
  --ral5012:#0089B6; /* Light blue */
  --ral5018:#21888F; /* Turquoise blue */
  --ral6027:#84C3BE; /* Light green */
  --ral6038:#00BB2D; /* Luminous green */
  --bg:var(--ral9005);
  --panel:var(--ral9011);
  --ctl:var(--ral7021);
  --ctl-hi:var(--ral7016);
  --text:var(--ral9003);
  --dim:#8C928F;
  --faint:#5B6164;
  /* Roles. Orange is for what you act on and what's selected; the rest carry their own RAL color. */
  --acc:var(--ral2004);   /* primary actions, selection, focus */
  --led:var(--ral6038);   /* status lights: on, in use */
  --warm:var(--ral1023);  /* coming in: build in, the key light, credits */
  --cool:var(--ral5012);  /* guides and going out: transform box, build out, background zone */
  --disp:var(--ral2007);  /* LED display readouts, faders and switches */
  --mkc:var(--ral2004);   /* the NANA mark in the NANALOG lockup: Pure Orange, the same on dark and on white, and in balance with the Export key */
  --warn:var(--ral3020);  /* removing */
  --mask:var(--ral4010);  /* masks: shape handles, brush reveal */
  --pin:var(--ral5018);   /* distort corner pins */
  --val:var(--ral7035);   /* knob values at rest */
  --hair:rgba(236,236,231,.06);
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace; /* the one interface mono; Martian Mono is a content font only (rendered text) */--mono-ui:"Geist Mono","Martian Mono",ui-monospace,Menlo,monospace;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",sans-serif;
  /* One type scale and one radius scale for the whole app */
  --fs-2xs:9px;--t-panel:600 var(--fs-s)/1.3 var(--sans);--t-title:500 var(--fs-l)/1.25 var(--sans);--fs-xs:9.5px;--fs-s:10.5px;--fs-m:12px;--fs-b:13px;--fs-l:15px;--fs-xl:18px;
  --r-xs:2px;--r-s:4px;--r-m:8px;--r-l:12px;
}
html{height:100%}
body{height:100%;margin:0;background:var(--bg);color:var(--text);font:var(--fs-b)/1.45 var(--sans);-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
[hidden]{display:none!important}
button,select,textarea,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:1.5px solid var(--acc);outline-offset:2px}
.lbl{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

.app{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;padding-inline:16px;padding-block:12px}
/* Embed: only the canvas, its transport and Tune */
html.embed .top,html.embed #colL,html.embed #gL,html.embed #bar,html.embed .mnav,html.embed #mStrip{display:none!important}

/* Top bar */
.top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-height:36px}
.mark{display:flex;align-items:center;gap:9px;background:none;border:0;padding:4px 2px;font:700 var(--fs-l)/1 var(--mono);letter-spacing:.04em}
.mark i{width:10px;height:10px;background:var(--acc);border-radius:var(--r-xs);display:block}
.mark small{font:400 var(--fs-xs) var(--mono);color:var(--faint);letter-spacing:.08em;margin-left:2px}
.doc{position:relative;display:flex;flex-direction:column;gap:2px;padding-left:14px;border-left:1px solid var(--hair)}
.doc b{font-weight:500;font-size:var(--fs-m)}
.doc b em{font-style:normal;color:var(--acc);margin-left:6px;font-size:var(--fs-s)}
.seg{display:flex;background:var(--panel);border-radius:999px;padding:3px;gap:2px}
.seg button{border:0;background:none;padding:6px 13px;border-radius:999px;font:500 var(--fs-xs) var(--mono);letter-spacing:.06em;color:var(--dim);text-transform:uppercase}
.seg button[aria-pressed="true"]{background:var(--text);color:var(--bg)}
.grow{flex:1}
.btn{border:0;background:var(--ctl);border-radius:var(--r-m);padding:8px 13px;font-weight:500;font-size:var(--fs-m);display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.btn:hover{background:var(--ctl-hi)}
.btn:disabled{opacity:.35;cursor:default}
/* Instrument kit skins for the few native controls left: checkboxes become LED switches, sliders become faders, selects become instrument selects */
/* every checkbox is the .sw toggle: black track, glass knob, amber LED behind it when on */
input[type=checkbox]{-webkit-appearance:none;appearance:none;flex:none;position:relative;width:34px;height:18px;margin:0 8px 0 0;border-radius:8px;background:#08090a;box-shadow:inset 0 2px 4px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.05);cursor:pointer;vertical-align:middle}
input[type=checkbox]::before{content:"";position:absolute;top:5px;left:5px;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#2a200c,#120d04 70%);box-shadow:inset 0 0 1px rgba(0,0,0,.8);transition:transform .28s cubic-bezier(.3,1.3,.4,1),background .2s,box-shadow .2s}
input[type=checkbox]::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:5px;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 50%,rgba(255,255,255,.07));-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,255,255,.1),0 2px 4px rgba(0,0,0,.85);transition:transform .28s cubic-bezier(.3,1.3,.4,1),background .2s,box-shadow .2s}
input[type=checkbox]:checked::before{transform:translateX(16px);background:radial-gradient(circle at 50% 45%,#fffbe8,#ffe08a 28%,#ffc21a 55%,#ffb200 80%);box-shadow:0 0 6px 3px rgba(255,200,60,.9),0 0 14px 6px rgba(255,178,0,.5)}
input[type=checkbox]:checked::after{transform:translateX(16px);background:linear-gradient(180deg,rgba(255,244,214,.22),rgba(255,200,90,.08) 50%,rgba(255,210,120,.14));box-shadow:inset 0 1px 0 rgba(255,246,220,.45),inset 0 0 0 1px rgba(255,200,90,.4),inset 0 0 8px rgba(255,178,0,.5),0 2px 4px rgba(0,0,0,.85)}
@media (prefers-reduced-motion:reduce){input[type=checkbox]::before,input[type=checkbox]::after{transition:none}}
input[type=checkbox]:focus-visible{outline:1.5px solid var(--acc);outline-offset:2px}
input[type=range]{-webkit-appearance:none;appearance:none;height:24px;background:transparent;cursor:ew-resize;accent-color:auto}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:var(--r-xs);background:rgba(236,236,231,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,.5)}
input[type=range]::-moz-range-track{height:4px;border-radius:var(--r-xs);background:rgba(236,236,231,.14)}
input[type=range]::-moz-range-progress{height:4px;border-radius:var(--r-xs);background:var(--disp)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:20px;margin-top:-8px;border-radius:3px;background:linear-gradient(#ECECE7,#C5CAC6);box-shadow:0 1px 3px rgba(0,0,0,.6),inset 0 -2px 0 rgba(0,0,0,.15)}
input[type=range]::-moz-range-thumb{width:12px;height:20px;border:0;border-radius:3px;background:linear-gradient(#ECECE7,#C5CAC6);box-shadow:0 1px 3px rgba(0,0,0,.6)}
input[type=range]:focus-visible{outline:0}input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--acc)}
select{-webkit-appearance:none;appearance:none;border:0;border-radius:var(--r-m);padding:6px 26px 6px 10px;font:500 var(--fs-s) var(--mono);letter-spacing:0;color:var(--text);cursor:pointer;
  background:var(--ctl) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238C928F' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 9px center/9px 6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
select:hover{background-color:var(--ctl-hi)}select:focus-visible{outline:1.5px solid var(--acc);outline-offset:2px}
.btn.acc{background:var(--acc);color:var(--bg)}
.btn.acc:hover{filter:brightness(1.08)}
.btn kbd{font:500 var(--fs-xs) var(--mono);color:var(--dim);background:var(--bg);border-radius:var(--r-s);padding:2px 5px}
.btn.acc kbd{background:rgba(0,0,0,.2);color:var(--bg)}
.btn[aria-pressed="true"]{background:var(--text);color:var(--bg)}
.pop-wrap{position:relative}
.pop{position:absolute;right:0;top:calc(100% + 8px);width:280px;background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-l);padding:8px;z-index:20;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.pop .row{display:flex;justify-content:space-between;align-items:center;padding:10px;border-radius:var(--r-m)}
.pop .row:hover{background:var(--ctl)}
.pop .row span:first-child{font-weight:500}
.pop p{margin:6px 10px 4px;color:var(--dim);font-size:var(--fs-m)}
.tag{font:500 var(--fs-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:3px 6px;border-radius:var(--r-s);background:var(--ctl);color:var(--dim)}
.tag.later{color:var(--acc);background:rgba(244,70,17,.12)}

/* Main grid */
.main{display:grid;grid-template-columns:244px minmax(0,1fr) 324px;gap:10px;min-height:0}
.panel{background:var(--panel);border-radius:var(--r-l);border:1px solid var(--hair)}
.ph{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px 10px}
.col{display:flex;flex-direction:column;gap:10px;min-height:0;overflow:auto;scrollbar-width:thin}

/* Signal chain */
.chain{padding-bottom:10px}
.mod{margin:0 8px;border-radius:var(--r-m);background:var(--bg);border:1px solid transparent;display:grid;grid-template-columns:14px 1fr auto auto;align-items:center;position:relative}
.mod .rx{border:0;background:none;color:var(--faint);width:26px;height:26px;border-radius:var(--r-s);font-size:var(--fs-l);line-height:1;opacity:0;transition:opacity .12s}
.mod:hover .rx,.mod.sel .rx,.mod .rx:focus-visible{opacity:1}
.mod .rx:hover{color:var(--bg);background:var(--acc)}
@media (hover:none){.mod .rx{opacity:1}}
.mod.sel.open{border-radius:var(--r-m) var(--r-m) 0 0;border-bottom-color:transparent}
.rowctl{margin:-1px 8px 0;padding:2px 6px 6px 8px;border-radius:0 0 var(--r-m) var(--r-m);background:#141618;border:1px solid var(--ctl-hi);border-top:0}
.lstrip{display:flex;align-items:center;gap:3px}
.lsel{flex:1;min-width:0;display:block}
.lsel select{width:100%;height:24px;padding:0 18px 0 8px;font-size:var(--fs-s);border-radius:var(--r-s);border:0;background:var(--ctl) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%238C928F' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 7px center/8px 5px;-webkit-appearance:none;appearance:none;cursor:pointer}
.lsel select:hover{background-color:var(--ctl-hi)}
.bm{flex:1;min-width:0;height:24px;padding:0 18px 0 8px;font-size:var(--fs-s);border-radius:var(--r-s);border:0;color:var(--text);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;background:var(--ctl) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%238C928F' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 7px center/8px 5px}
.bm:hover,.bm[aria-expanded="true"]{background-color:var(--ctl-hi)}
.bm:focus-visible{outline:1.5px solid var(--acc);outline-offset:1px}
.blendpop{position:fixed;z-index:70;min-width:150px;padding:4px;display:grid;gap:1px;background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-m);box-shadow:0 18px 44px rgba(0,0,0,.6)}
.blendpop .bo{border:0;background:none;text-align:left;padding:6px 10px 6px 24px;border-radius:var(--r-s);font-size:var(--fs-m);color:var(--dim);position:relative;cursor:pointer}
.blendpop .bo.cur{color:var(--text)}.blendpop .bo.cur::before{content:"";position:absolute;left:10px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--acc)}
.blendpop .bo.hov,.blendpop .bo:focus-visible{background:var(--ctl-hi);color:var(--text);outline:0}
.chempty{display:flex;flex-direction:column;gap:6px;padding:14px 12px;margin:6px;border:1px dashed var(--hair);border-radius:var(--r-m);color:var(--dim);font-size:var(--fs-m);line-height:1.4}.chempty b{color:var(--text);font-size:12px;font-weight:600}.chempty div{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.blendpop .bsep{height:1px;background:var(--hair);margin:3px 6px}
.blendpop .bhint{font:500 var(--fs-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:5px 10px 3px}
.rowctl .lstrip+.lstrip{margin-top:4px}
.opf{position:relative;flex:none;width:52px;height:24px;border-radius:var(--r-s);background:var(--ctl);overflow:hidden;cursor:ew-resize;touch-action:none}
.opf:hover{background:var(--ctl-hi)}
.opf i{position:absolute;left:0;top:0;bottom:0;background:rgba(244,70,17,.32);pointer-events:none}
.opf input{position:relative;display:block;width:100%;height:100%;border:0;margin:0;padding:0;background:transparent;text-align:center;font:500 var(--fs-s) var(--mono);font-variant-numeric:tabular-nums;color:var(--text);cursor:ew-resize;outline:0}
.opf input:not([readonly]){cursor:text;background:var(--bg);box-shadow:inset 0 0 0 1px var(--acc);border-radius:var(--r-s)}
.opf:focus-visible{outline:1.5px solid var(--acc);outline-offset:1px}
.ib{flex:none;width:24px;height:24px;border:0;border-radius:var(--r-s);background:transparent;color:var(--dim);display:grid;place-items:center;padding:0}
.ib svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ib:hover{background:var(--ctl);color:var(--text)}
.ib.del:hover{background:var(--warn);color:var(--ral9003)}
.ib:disabled{opacity:.3;pointer-events:none}
.lsep{width:1px;height:14px;background:var(--hair);margin:0 2px;flex:none}
.mod[draggable="true"]{cursor:grab}
.mod.sel{border-color:var(--ctl-hi);background:#141618}
.mod.dragging{opacity:.4}



.grip{width:6px;height:14px;margin-left:8px;background-image:radial-gradient(circle,var(--faint) 1px,transparent 1.4px);background-size:4px 4px;opacity:.8}
.mod .pick{border:0;background:none;text-align:left;padding:10px 4px 10px 8px;display:grid;grid-template-columns:22px 1fr;column-gap:6px;row-gap:3px;border-radius:var(--r-m);min-width:0}
.mod .idx{font:500 var(--fs-s) var(--mono);color:var(--faint);grid-row:span 2;padding-top:2px}
.mod .nm{font-weight:500;font-size:var(--fs-b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mod .sub{font:400 var(--fs-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mod .sub b{color:var(--acc);font-weight:500}
.mod.off .nm,.mod.off .sub{opacity:.45}
.mod.fixed{grid-template-columns:14px 1fr;cursor:default}.mod.fixed .grip{cursor:grab}
.mod.fixed .pick{cursor:default;padding-left:12px}


.pw{border:0;background:none;padding:12px;display:grid;place-items:center;border-radius:var(--r-m)}
.led{width:8px;height:8px;border-radius:50%;background:var(--ctl-hi);display:block;transition:background .15s,box-shadow .15s}
.on>.led,.led.on{background:var(--led);box-shadow:0 0 0 3px rgba(0,187,45,.16),0 0 10px rgba(0,187,45,.7)}
.flow{height:12px;margin-left:31px;border-left:1px dashed var(--ctl-hi)}
#chainList .flow{position:relative}#chainList .flow::before{content:"";position:absolute;left:-4px;top:-1px;border:3.5px solid transparent;border-top:0;border-bottom:5px solid var(--ctl-hi)}
.outrow{margin:0 8px;padding:8px 12px;border-radius:var(--r-m);display:flex;justify-content:space-between;background:var(--bg)}
.add{margin:12px 8px 0;padding:12px;border-radius:var(--r-m);border:1px dashed var(--ctl-hi)}
.add .chips{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:9px}
.chip{font:500 var(--fs-xs) var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:7px 8px;border-radius:var(--r-s);background:var(--ctl);color:var(--dim);border:0;text-align:left;display:flex;justify-content:space-between;gap:6px}
.chip:hover{color:var(--text);background:var(--ctl-hi)}
.cg{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:5px}
.cgh{grid-column:1/-1;border:0;background:none;padding:6px 2px 1px;display:flex;justify-content:space-between;font:500 var(--fs-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);cursor:pointer}.cgh::after{font:500 var(--fs-s) var(--mono);color:var(--faint);letter-spacing:0}
.cgh:hover{color:var(--text)}.cgh::after{content:"−"}.cg.closed .cgh::after{content:"+"}.cg.closed .chip{display:none}
.fontgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.fontgrid button{border:0;background:var(--ctl);color:var(--dim);border-radius:var(--r-s);padding:6px 3px 5px;display:grid;gap:3px;justify-items:center;min-width:0}
.fontgrid button:hover{background:var(--ctl-hi)}
.fontgrid b{font-size:var(--fs-xl);line-height:1.15;color:var(--text);white-space:nowrap}
.fontgrid span{font:500 var(--fs-xs) var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.fontgrid button[aria-pressed="true"]{background:var(--text)}.fontgrid button[aria-pressed="true"] b,.fontgrid button[aria-pressed="true"] span{color:var(--bg)}
.match-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
@media (max-width:600px){.match-body{grid-template-columns:1fr}}
.match-drop{border:1px dashed var(--ctl-hi);border-radius:var(--r-m);min-height:190px;display:grid;place-items:center;text-align:center;padding:10px;color:var(--dim);font-size:var(--fs-m);cursor:pointer;overflow:hidden}
.match-drop.drag,.match-drop:hover{border-color:var(--acc);color:var(--text)}
.match-drop img{max-height:240px;max-width:100%;border-radius:var(--r-s);background:none}
.match-read{display:grid;gap:7px;align-content:start;font-size:var(--fs-m);color:var(--dim)}
.match-read .sw{display:flex;gap:3px}.match-read .sw i{flex:1;height:22px;border-radius:var(--r-s)}
.match-read dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:0}.match-read dt{font:500 var(--fs-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;padding-top:2px}.match-read dd{margin:0;color:var(--text)}
.chip::after{content:"+";color:var(--acc)}

/* Stage */
.stage{position:relative;padding-top:10px;border-radius:var(--r-l);background:#050505;border:1px solid var(--hair);overflow:hidden;display:grid;place-items:center;min-height:0}
.stage.drag{border-color:var(--acc)}
#gl{display:block;border-radius:var(--r-xs);touch-action:none;transform-origin:center;will-change:transform}
.stage{touch-action:none}.stage.hand,.stage.hand #gl{cursor:grab}.stage.hand:active #gl{cursor:grabbing}
.gizmo[hidden]{display:none}.gizmo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:3}
.gizmo .gbox{fill:none;stroke:var(--cool);stroke-width:1.2;stroke-dasharray:4 3;filter:drop-shadow(0 0 1px rgba(0,0,0,.8))}
.gizmo.pin .gbox{stroke:var(--pin);stroke-dasharray:none}
.gizmo .gh{pointer-events:all;fill:#050607;stroke:#ECECE7;stroke-width:1.5;cursor:nwse-resize;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
.gizmo .ge{cursor:ew-resize}.gizmo .grot{cursor:grab;fill:#ECECE7;stroke:#050607}.gizmo .grot-l{stroke:#ECECE7;stroke-width:1;opacity:.6}
.gizmo.pin .gc{fill:var(--pin);stroke:#fff;cursor:move}
.gizmo .gell{fill:none;stroke:var(--mask);stroke-width:1.4;pointer-events:none}
.gizmo.mask .gbox{stroke:var(--mask);stroke-dasharray:3 3;fill:rgba(207,52,118,.05);pointer-events:all;cursor:move}
.gizmo.mask .gell{pointer-events:visibleStroke;cursor:move}.gizmo.mask .gc{fill:var(--mask);stroke:#050607}.gizmo .gpiv{fill:none;stroke:var(--cool);stroke-width:1.2}
.zoomhud{position:relative;z-index:4;pointer-events:auto;text-transform:none;letter-spacing:0;font-stretch:100%;flex:none;display:flex;align-items:center;gap:2px;padding:3px;border-radius:var(--r-m);background:rgba(20,22,24,.55);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 6px 18px -6px rgba(0,0,0,.7);opacity:.75;transition:opacity .15s}
.zoomhud:hover,.zoomhud:focus-within,.stage.zoomed .vzoom,.stage.hand .vtools,.vtools{opacity:1}
/* Viewer header: space on top (tools left, status and zoom right), time on the bottom */
.hud .tl,.hud .tr{display:flex;align-items:center;gap:10px;min-width:0}.hud .tr{justify-content:flex-end}.hud .htxt{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.vtools{background:rgba(20,22,24,.72)}#ovBtn .ovn{font:500 var(--fs-s) var(--sans);color:var(--text);margin:0 2px 0 5px}
body:not([data-ov=none]) #ovBtn{color:var(--acc)}body:not([data-ov=none]) #ovBtn .ovn{color:var(--acc)}
#ovBtn{display:flex;gap:2px;align-items:center;padding:0 5px 0 6px}#ovBtn svg,.ovpop .bo i svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}
#ovBtn svg .f,.ovpop svg .f{fill:currentColor;stroke:none}.ovch{font-size:var(--fs-xs);opacity:.7}.zsep{width:1px;height:16px;background:rgba(255,255,255,.1);margin:0 3px}
.ovpop{min-width:240px}.ovpop .bo{display:grid;grid-template-columns:22px 1fr auto;column-gap:8px;align-items:center;padding:7px 10px}.ovpop .bo i{grid-row:span 2;display:grid;place-items:center;color:var(--dim)}
.ovpop .bo b{font-weight:500;font-size:var(--fs-m);color:var(--text)}.ovpop .bo span{grid-column:2;font-size:var(--fs-s);color:rgba(236,236,231,.5)}.ovpop .bo kbd{grid-row:span 2;grid-column:3;font:500 var(--fs-s) var(--mono);color:var(--faint)}
.ovpop .bo.cur i{color:var(--acc)}.ovpop .bo.cur::before{display:none}
.gizmo.xf .gbox{pointer-events:all;cursor:move}
.gizmo .glt{pointer-events:all;fill:var(--warm);stroke:#050607;stroke-width:1.5;cursor:grab;filter:drop-shadow(0 0 6px rgba(250,210,1,.7))}.gizmo .glt:active{cursor:grabbing}
.gizmo .glt-l{stroke:var(--warm);stroke-width:1;stroke-dasharray:3 3;opacity:.8}.gizmo .gldisc{fill:none;stroke:rgba(250,210,1,.4);stroke-width:1;stroke-dasharray:2 4}
.gizmo.light>:not(.glt):not(.glt-l):not(.gldisc){display:none}.gizmo:not(.light) .glt,.gizmo:not(.light) .glt-l,.gizmo:not(.light) .gldisc{display:none}
.lightpad{margin:2px 0 6px}.lightpad canvas{display:block;width:100%;height:112px;border-radius:var(--r-m);cursor:crosshair;touch-action:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}.lightpad canvas:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.xfmodes{flex:1}.gizmo .gfull{fill:none;stroke:rgba(236,236,231,.35);stroke-width:1;stroke-dasharray:2 3}.gizmo.crop .gbox{stroke:#ECECE7;stroke-dasharray:none}.gizmo.crop .gc,.gizmo.crop .ge{fill:#ECECE7;stroke:#050607}
.zoomhud button{border:0;background:none;color:var(--dim);font:500 var(--fs-m) var(--mono);min-width:26px;height:24px;border-radius:var(--r-m);cursor:pointer;display:grid;place-items:center;padding:0 6px}
.zoomhud button:hover{color:var(--text);background:rgba(255,255,255,.07)}#zPct{min-width:52px;font-size:var(--fs-s)}
.zoomhud svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
#zHand[aria-pressed="true"]{color:#050607;background:var(--acc)}
.fpsec.collapsed{padding:0}.fpadd{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;padding:9px 10px;border-radius:var(--r-m);cursor:pointer;text-align:left}
.fpadd .fph{padding:0}.fpadd:hover{background:rgba(255,255,255,.035)}
.fpstate{font:500 var(--fs-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-left:2px}.fph .fpstate{margin-left:6px;color:var(--disp)}


.cr{display:inline-flex;align-items:center;gap:3px;flex:none;border-radius:var(--r-s);padding:2px 5px 2px 4px;background:rgba(250,210,1,.1);box-shadow:inset 0 0 0 1px rgba(250,210,1,.38);color:var(--warm);cursor:help;vertical-align:middle;line-height:1}
.cr svg{width:9px;height:9px;fill:currentColor;filter:drop-shadow(0 0 3px rgba(250,210,1,.6))}.cr b{font:600 var(--fs-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:inherit}
.cr.dot{padding:2px;background:none;box-shadow:none;margin-left:4px}.cr.dot svg{width:8px;height:8px}
.crnote{display:flex;align-items:flex-start;gap:8px;margin:0 14px 10px;font-size:var(--fs-s);line-height:1.45;color:var(--dim)}.crnote .cr{margin-top:1px}
.aicw{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}.ask .cr{margin-left:2px;align-self:center}#matchAIRow .cr{margin-left:6px}
#railL .hascr{position:relative}#railL .hascr::after{content:"";position:absolute;right:4px;top:4px;width:5px;height:5px;border-radius:50%;background:var(--warm);box-shadow:0 0 5px rgba(250,210,1,.8)}
.brushbar{padding:4px 6px 8px;display:grid;gap:6px}.bbrow{display:flex;align-items:center;gap:6px}.bbrow .seg{flex:1}.bbops .btn{flex:1;padding:5px 8px;font-size:var(--fs-s)}
.brushbtn{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;font-size:var(--fs-m)}.brushbtn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.brushbtn[aria-pressed="true"]{background:var(--acc);color:#0A0A0A}.bbf .fader{padding:4px 4px 6px}
.stage.brushing #gl{cursor:none}.bcur{position:absolute;z-index:5;pointer-events:none;border-radius:50%;border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.7),inset 0 0 0 1px rgba(0,0,0,.5)}.bcur.rev{border-color:var(--mask)}

#gl.aim{cursor:crosshair}
.hud{position:absolute;inset:8px 8px 12px 10px;pointer-events:none;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;font:400 var(--fs-xs)/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(236,236,231,.5)}
.hud .tr,.hud .br{text-align:right}
.xray{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:rgba(5,6,7,0);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);transition:background .35s,backdrop-filter .35s;perspective:1700px;overflow:hidden;cursor:default}
.xray.open{background:rgba(5,6,7,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.xview{transform-style:preserve-3d}.xstack{position:relative;transform-style:preserve-3d;transition:transform .18s ease-out}
.xplane{position:absolute;left:0;top:0;transform:translate(-50%,-50%) translateY(calc(var(--z) * var(--gap) * .42)) translateZ(calc(var(--z) * var(--gap)));transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.9,.25,1);border:0;padding:0;background:none;border-radius:var(--r-s);cursor:pointer}
.xface{position:absolute;inset:0;display:block;background:#050607;border-radius:var(--r-s);pointer-events:none;box-shadow:0 0 0 1px color-mix(in srgb,var(--mc) 70%,transparent),0 18px 50px rgba(0,0,0,.55);opacity:.94;transition:transform .35s cubic-bezier(.2,.9,.25,1),box-shadow .2s,opacity .2s}
.xplane.hot .xface{transform:translateY(-14px) translateZ(46px);box-shadow:0 0 0 2px var(--mc),0 0 34px color-mix(in srgb,var(--mc) 50%,transparent);opacity:1}
.xstack.hashot .xplane:not(.hot) .xface{opacity:.28}.xstack.hashot .xplane.ghot .xface{opacity:.86;box-shadow:0 0 0 1px var(--mc),0 18px 50px rgba(0,0,0,.55)}
.xplane.xclip .xface{outline:1px dashed color-mix(in srgb,var(--mc) 85%,transparent);outline-offset:3px}.xli.xclip{margin-left:14px}
.rbfield{margin-top:2px}.rbfield .trow{display:flex;align-items:center;justify-content:space-between;gap:8px}.rbfield .lbl em{font-style:normal;color:var(--acc);text-transform:none;letter-spacing:0}
#rbBox{display:grid;gap:8px;margin-top:8px}#rbBox[hidden]{display:none}.rbkeyrow{gap:8px;justify-content:flex-start}.rbsw{width:22px;height:22px;border-radius:var(--r-s);box-shadow:inset 0 0 0 1px var(--hair);flex:none}
.rbinv{font-size:var(--fs-s)}#rbArm[aria-pressed="true"]{box-shadow:0 0 0 2px var(--acc)}canvas.rbarm{cursor:crosshair!important}
.xgriphit{position:absolute;right:-30px;top:50%;width:32px;height:92px;margin-top:-56px;cursor:grab;touch-action:none;pointer-events:auto;z-index:1}
.xgrip{position:absolute;right:-18px;top:50%;width:12px;height:34px;margin-top:-17px;border-radius:4px;background:rgba(20,22,24,.92);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mc) 55%,transparent);pointer-events:none;touch-action:none;opacity:.55;transition:opacity .15s,box-shadow .15s;
  background-image:radial-gradient(circle,var(--mc) 1.2px,transparent 1.5px);background-size:6px 7px;background-position:0 3px;background-repeat:repeat}
.xplane.hot .xgrip,.xgriphit:hover+.xface .xgrip,.xghf:hover+.xgrip{opacity:1}.xgriphit:hover+.xface .xgrip,.xghf:hover+.xgrip{box-shadow:inset 0 0 0 1px var(--mc),0 0 12px color-mix(in srgb,var(--mc) 50%,transparent)}
.xstack.sorting .xplane{transition:transform .22s cubic-bezier(.2,.9,.25,1)}.xstack.sorting .xplane.xdrag{transition:none}.xstack.sorting .xplane.xdrag .xface{box-shadow:0 0 0 2px var(--mc),0 0 40px color-mix(in srgb,var(--mc) 60%,transparent);opacity:1}
.xstack.sorting,.xstack.sorting *{cursor:grabbing!important}.xray.tilting,.xray.tilting .xplane{cursor:grabbing}.xray{cursor:grab}
.xlist{position:absolute;left:14px;top:14px;transform:translateX(-8px);display:grid;gap:2px;max-height:calc(100% - 90px);overflow:auto;opacity:0;transition:opacity .3s .15s,transform .3s .15s;z-index:2}.xray.open .xlist{opacity:1;transform:none}
.xli{display:flex;align-items:center;gap:7px;border:0;background:rgba(20,22,24,.7);border-radius:var(--r-s);padding:5px 10px 5px 8px;color:var(--dim);font:500 var(--fs-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;text-align:left;max-width:220px}
.xli i{flex:none;width:7px;height:7px;border-radius:2px;background:var(--mc)}.xli b{font-weight:500;color:var(--faint)}.xli span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xli:hover,.xli.hot,.xli:focus-visible{color:var(--text);background:rgba(40,43,46,.9);box-shadow:inset 2px 0 0 var(--mc);outline:0}
.xsnap{display:block;width:100%;height:100%;border-radius:inherit}
.xl{position:absolute;left:0;bottom:calc(100% + 6px + var(--lo,0) * 15px);display:flex;align-items:center;gap:6px;white-space:nowrap;font:500 var(--fs-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text);opacity:0;transition:opacity .3s .25s}
.xray.open .xl{opacity:1}.xl i{width:7px;height:7px;border-radius:2px;background:var(--mc)}.xl b{color:var(--dim);font-weight:500}.xl em{font-style:normal;color:var(--mc)}
.xhint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:calc(100% - 32px);text-align:center;line-height:1.6;font:500 var(--fs-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);opacity:0;transition:opacity .3s}.xray.open .xhint{opacity:1}
.xraybtn{display:inline-flex;align-items:center;gap:6px}
@media (min-width:821px),(min-width:700px) and (orientation:portrait){
  .lside{flex-direction:row!important}
  .lside>#railL{display:flex!important;flex:none;width:44px;border-right:1px solid var(--hair);padding-top:8px;overflow:auto}
  #railL #tglL{margin-bottom:6px}#railL [data-tab].on{color:var(--text);background:var(--ctl-hi);box-shadow:inset 2px 0 0 var(--acc)}
  .dstack{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
  .main.nol .dstack{display:none}
  .dsec{display:flex;flex-direction:column;min-height:0;flex:var(--grow,1) 1 0;border-bottom:1px solid var(--hair);overflow:hidden}.dsec[hidden]{display:none}
  .dsec.min{flex:none}.dsec.min>.dsbody{display:none}.dsec:not(.min){min-height:110px}
  .dsech{cursor:row-resize}.dsec:first-of-type .dsech,.dsec.min .dsech{cursor:default}.dsec.min .dsech{cursor:pointer}.dsech button{cursor:pointer}
  .dsech{display:flex;align-items:center;gap:4px;flex:none;min-height:38px;padding:0 4px 0 12px;border-bottom:1px solid var(--hair)}.dsec.min .dsech{border-bottom:0}
  .dsech .stitle{flex:1;cursor:pointer;user-select:none}.dsech .ib{width:24px;height:24px}.dsech .ib svg{width:12px;height:12px}
  .dsbody{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}.dstack .dsbody>*{flex:1 1 0!important;min-height:0!important;height:auto!important;max-height:none!important;overflow:auto}
  /* the splitter between sections: the same grip as the Looks strip's, a hairline with a pill, accent while it's held */
  .dsplit{flex:none;height:12px;margin:-6px 0;position:relative;z-index:4;cursor:row-resize;touch-action:none}.dsplit[hidden]{display:none}
  .dsplit::before{content:"";position:absolute;top:50%;left:14px;right:14px;height:1px;margin-top:-.5px;background:linear-gradient(90deg,transparent,rgba(236,236,231,.06) 10%,rgba(236,236,231,.06) 90%,transparent);transition:background .18s}
  .dsplit::after{content:"";position:absolute;top:50%;left:50%;width:28px;height:4px;margin:-2px 0 0 -14px;border-radius:var(--r-xs);background:var(--ctl-hi);box-shadow:0 0 0 3px var(--panel,var(--bg));transition:background .18s,width .18s,margin .18s,box-shadow .18s}
  .dsplit:hover::before,.dsplit.drag::before{background:linear-gradient(90deg,transparent,rgba(244,70,17,.6) 8%,rgba(244,70,17,.6) 92%,transparent)}
  .dsplit:hover::after,.dsplit.drag::after{background:var(--acc);width:44px;margin-left:-22px;box-shadow:0 0 0 3px var(--panel,var(--bg)),0 0 12px rgba(244,70,17,.55)}
  .dsech{touch-action:none}
  /* a finger needs more to hold: a taller grip over the middle half, clear of the header's minimize and close keys */
  @media (pointer:coarse){.dsplit{height:24px;margin:-12px 25%}.dsplit::before{left:-30%;right:-30%}.dsplit::after{width:40px;height:5px;margin:-2.5px 0 0 -20px}}
}
@media (max-width:699px),(max-width:820px) and (orientation:landscape){
  .dstack{display:flex;flex-direction:column}.dsec{display:none}
  .app[data-m="chain"] .dsec[data-sec="stack"],.app[data-m="looks"] .dsec[data-sec="looks"],.app[data-m="lib"] .dsec[data-sec="lib"],.app[data-m="ai"] .dsec[data-sec="agent"]{display:flex;flex-direction:column}
  .dsech .dsmin,.dsech .dsx,.dsplit{display:none!important}
}
#chainList.alt .flow.can{cursor:pointer}#chainList.alt .flow.can::after{content:"";position:absolute;left:-31px;right:0;top:-5px;bottom:-5px;z-index:2}
#chainList.alt .flow.can:hover{border-left:1px solid var(--acc)}#chainList.alt .flow.can:hover::before{border-bottom-color:var(--acc)}
#chainList.alt .flow.can:hover::after{content:attr(data-hint);display:flex;align-items:center;padding-left:44px;font:600 var(--fs-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
#chainList>.mod.child,#chainList>.mod.child+.rowctl{margin-left:26px}#chainList>.mod.child+.flow[data-grp]{height:8px}
.scopetag{position:absolute;left:-14px;top:50%;transform:translateY(-50%);color:var(--dim);font:500 var(--fs-s) var(--mono)}#chainList>.mod{position:relative}
.laylist{display:grid;gap:4px;padding:10px 10px 0}
.layrow{display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;border:0;border-radius:var(--r-m);padding:8px 10px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px var(--hair);color:var(--text);font:inherit;cursor:pointer}
.layrow:hover{background:rgba(255,255,255,.05)}.layrow i{grid-row:span 2;width:30px;height:30px;border-radius:var(--r-s);background:var(--ctl);display:grid;place-items:center;font:600 var(--fs-m) var(--mono);font-style:normal;color:var(--acc)}
.layrow b{font-weight:500;font-size:var(--fs-m)}.layrow span{grid-column:2;font-size:var(--fs-s);color:var(--dim);line-height:1.35}
.layrow.ai{margin-top:6px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 45%,transparent)}
.loopshow{display:flex;align-items:center;gap:8px}.loopshow b{font:500 var(--fs-m) var(--mono);color:var(--disp)}
.lloop.flash{box-shadow:0 0 0 2px var(--acc);border-radius:var(--r-s);transition:box-shadow .3s}
.stage.tsimple .lloop{font-size:var(--fs-xs)}.stage.tsimple .lloop input{width:3.2em}
#perfBtn,#saveBtn{display:none!important}
.createbtn{display:inline-flex;align-items:center;gap:7px;color:var(--text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 55%,transparent),0 0 16px -8px var(--acc)}
.createbtn svg{width:13px;height:13px;fill:var(--acc);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--acc) 70%,transparent))}.createbtn kbd{font:500 var(--fs-xs) var(--mono);opacity:.5;margin-left:2px}
.createbtn[aria-expanded="true"]{background:var(--ctl-hi)}
/* the Create key's light: amber while something generates, green when a result is waiting to be seen */
#createBtn.createbtn[data-gen="run"]::after{background:var(--disp);box-shadow:0 0 6px 1px rgba(255,178,0,.85);animation:genpulse 1.4s ease-in-out infinite}
#createBtn.createbtn[data-gen="ready"]::after{background:var(--led);box-shadow:0 0 6px 1px rgba(0,187,45,.85)}
@keyframes genpulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){#createBtn.createbtn[data-gen="run"]::after{animation:none}}
.createwin{position:fixed;top:62px;left:50%;transform:translateX(-50%);z-index:60;width:min(480px,calc(100vw - 24px));max-height:calc(100vh - 150px);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-l);box-shadow:0 30px 80px -20px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.03)}
.createwin[hidden]{display:none}
.cwhead{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:12px 12px 10px 14px;border-bottom:1px solid var(--hair)}
.cwhead svg{width:14px;height:14px;fill:var(--acc)}.cwhead b{font-weight:600;font-size:var(--fs-b)}.cwhead .lbl{grid-column:1/-1;grid-row:2;margin-top:4px;text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:var(--fs-s)}
.cwhead .ib{grid-column:3;grid-row:1}
.cwbody{overflow:auto;padding:4px 4px 10px}.cwbody .pane{padding-top:6px}
/* Create studio: compose on the left, takes on the right */
.createwin{width:min(1060px,calc(100vw - 24px));max-height:calc(100vh - 100px)}
.createwin:has(#aiModelPop:not([hidden]),#aiSetPop:not([hidden])){height:calc(100vh - 100px)} /* room for the model bank and Settings while they're open */
.createwin>.cwbody{flex:1 1 auto;min-height:0}
.createwin.csdrop{box-shadow:0 0 0 2px var(--acc),0 30px 80px -20px rgba(0,0,0,.8)}
.cstudio{display:grid;gap:12px;padding:6px 10px 4px}
.cskind{display:flex;gap:3px;padding:3px;border-radius:var(--r-m);background:var(--bg);box-shadow:inset 0 0 0 1px var(--hair);width:max-content;max-width:100%;overflow-x:auto}
.cskind button{display:flex;align-items:center;gap:7px;border:0;background:none;color:var(--dim);padding:8px 14px;border-radius:var(--r-s);font:500 var(--fs-s) var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.cskind svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;flex:none}.cskind button[data-k="motion"] svg{fill:currentColor;stroke:none}
.cskind button:hover{color:var(--text)}.cskind button[aria-selected="true"]{color:var(--text);background:var(--ctl);box-shadow:inset 0 -2px 0 var(--acc)}
.csgrid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:18px;align-items:start}
.cscompose{display:grid;gap:10px;position:relative;min-width:0}
.cstakes{min-width:0;display:grid;gap:8px;align-content:start;position:sticky;top:0;padding:10px;border-radius:var(--r-l);background:rgba(0,0,0,.18);box-shadow:inset 0 0 0 1px var(--hair)}
@media (max-width:900px){.csgrid{grid-template-columns:1fr}.cstakes{position:static}}
.csrefs{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.csrefs[hidden]{display:none}
.csref{display:flex;align-items:center;gap:8px;padding:4px 4px 4px 4px;border-radius:var(--r-m);background:var(--bg);box-shadow:inset 0 0 0 1px var(--hair);max-width:230px}
.csref img{width:40px;height:40px;object-fit:cover;border-radius:var(--r-s);background:#050607;flex:none}
.csrn{display:grid;gap:3px;min-width:0}.csrn b{font-weight:500;font-size:var(--fs-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csrole{border:0;background:none;padding:0;text-align:left;font:500 var(--fs-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--acc);cursor:pointer}.csrole:disabled{color:var(--dim);cursor:default}
.csrx{border:0;background:none;color:var(--faint);font-size:17px;line-height:1;padding:2px 6px;cursor:pointer;align-self:flex-start}.csrx:hover{color:var(--text)}
.csadd{border:1px dashed var(--ctl-hi);background:none;color:var(--dim);border-radius:var(--r-m);padding:12px 14px;font:500 var(--fs-s) var(--sans);cursor:pointer}.csadd b{color:var(--acc);font-weight:600;margin-right:2px}.csadd:hover{color:var(--text);border-color:var(--dim)}


.cspbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.cspbar .lbl{flex:1;text-transform:none;letter-spacing:0;font-family:var(--sans)}
.cskbd{font:400 var(--fs-xs) var(--mono);color:var(--faint);margin-left:auto}.cskbd kbd{font:inherit;color:var(--dim)}
.cscraftbtn{color:var(--acc)}.cscraftbtn:disabled{opacity:.6}
.csmenu{position:absolute;z-index:6;width:264px;max-height:280px;overflow:auto;display:grid;gap:2px;padding:4px;border-radius:var(--r-m);background:rgba(27,29,31,.97);backdrop-filter:blur(10px);box-shadow:0 0 0 1px var(--hair),0 16px 40px -10px rgba(0,0,0,.8)}.csmenu[hidden]{display:none}
.csmi{display:grid;grid-template-columns:8px 1fr;grid-template-rows:auto auto;column-gap:9px;align-items:center;text-align:left;border:0;background:none;border-radius:var(--r-s);padding:6px 8px;color:var(--text);cursor:pointer}
.csmi i{grid-row:span 2;width:8px;height:8px;border-radius:2px;background:var(--dim)}.csmi b{font-weight:500;font-size:var(--fs-s)}.csmi span{grid-column:2;font:400 var(--fs-xs) var(--mono);color:var(--dim)}
.csmi.on,.csmi:hover{background:var(--ctl)}
.cscraft{display:grid;gap:8px;padding:10px;border-radius:var(--r-m);background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 8%,var(--bg)),var(--bg));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 35%,transparent)}.cscraft[hidden]{display:none}
.cscraft.off textarea,.cscraft.off .cschips{opacity:.5}
.cscrh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.cscrh .lbl{flex:1}
.cscraft textarea{min-height:84px;font-size:var(--fs-s);line-height:1.45;resize:vertical}
.cschips{display:flex;flex-wrap:wrap;gap:4px}.cschip{font-size:var(--fs-xs);color:var(--text);background:var(--ctl);border-radius:999px;padding:3px 9px}.cschip em{font:500 var(--fs-xs) var(--mono);font-style:normal;color:var(--dim);text-transform:uppercase;letter-spacing:.12em;margin-right:6px}
.csalts{display:flex;flex-wrap:wrap;gap:4px}
.csmodelh{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.csrec{font-size:var(--fs-s);color:var(--dim)}.csrec b{color:var(--text);font-weight:500}.csrec span{color:var(--dim)}.csrec .btn{margin-left:4px}
.cstudio .aimodels{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.csm{position:relative}.csm.no{opacity:.45}.csm.no span{color:var(--acc)}.csm.rec{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 45%,transparent)}

.gmeta{font:400 var(--fs-xs) var(--mono);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spin{display:inline-block;width:10px;height:10px;border-radius:50%;border:1.5px solid var(--dim);border-top-color:var(--acc);animation:spin .8s linear infinite;vertical-align:-1px;margin-right:4px}@keyframes spin{to{transform:rotate(360deg)}}
.csm b{padding-right:34px}.addpop.stkv{width:min(420px,calc(100vw - 16px))}.stktabs{display:flex;flex-wrap:wrap;gap:4px;padding:2px 6px 8px}.stktab{border:0;border-radius:999px;background:var(--ctl);color:var(--dim);padding:5px 11px;font:500 var(--fs-xs) var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.stktab.on{color:var(--text);box-shadow:inset 0 0 0 1px var(--acc)}.stktab.add{color:var(--acc);background:none;box-shadow:inset 0 0 0 1px var(--hair)}.stktab.soon{opacity:.45;cursor:default}
.stkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:6px;padding:0 6px 8px;max-height:min(52vh,420px);overflow:auto}
.stkc{position:relative;aspect-ratio:1;border:0;border-radius:var(--r-m);background:repeating-conic-gradient(#202326 0 25%,#1a1c1f 0 50%) 0 0/16px 16px;padding:8px;cursor:grab;display:grid;place-items:center;transition:transform .12s}
.stkc:hover{transform:scale(1.06) rotate(-3deg);box-shadow:inset 0 0 0 1px var(--acc)}.stkc img,.stkc video{width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.stkx{position:absolute;top:2px;right:4px;color:var(--dim);font-size:14px;line-height:1;padding:2px;opacity:0}.stkc:hover .stkx{opacity:1}.stkx:hover{color:var(--acc)}
.stklot{display:block;width:100%;height:100%;pointer-events:none}.stklot svg{filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}.stkanim{position:absolute;left:5px;bottom:4px;font:600 var(--fs-2xs) var(--mono);letter-spacing:0;font-style:normal;color:var(--acc);background:rgba(0,0,0,.55);padding:1px 4px;border-radius:3px}
.stkempty{grid-column:1/-1;color:var(--dim);font-size:var(--fs-s);padding:16px 6px;text-align:center}.stkfoot{display:flex;gap:6px;align-items:center;padding:6px 8px 8px;border-top:1px solid var(--hair)}
.stkrow .trow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}.stkname{font-size:var(--fs-s);color:var(--text)}
.xfmt{display:grid;gap:6px;margin:4px 0 2px;padding:8px;border-radius:var(--r-m);background:var(--bg);box-shadow:inset 0 0 0 1px var(--hair)}.xfmt #xFmtNote{text-transform:none;letter-spacing:0;font-family:var(--sans);color:var(--dim)}
.xfmts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.xfb{display:grid;justify-items:center;gap:2px;border:0;border-radius:var(--r-s);background:var(--ctl);color:var(--text);padding:7px 4px 6px;cursor:pointer}
.xfb i{display:block;border:1.4px solid currentColor;border-radius:2px;opacity:.8;margin-bottom:3px}.xfb b{font:600 var(--fs-s) var(--mono)}.xfb span{font-size:var(--fs-xs);color:var(--dim);text-align:center;line-height:1.2}.xfb:hover{background:var(--ctl-hi)}
.xfmt.nudge{animation:xnudge 1.6s ease-out 1}@keyframes xnudge{0%,40%{box-shadow:inset 0 0 0 1px var(--acc),0 0 18px color-mix(in srgb,var(--acc) 35%,transparent)}100%{box-shadow:inset 0 0 0 1px var(--hair)}}
.cswait{position:absolute;right:9px;top:9px;font:400 var(--fs-xs) var(--mono);font-style:normal;color:var(--dim)}
.cscmp .csm[aria-pressed="true"]{border-color:var(--led);box-shadow:inset 0 0 0 1px var(--led)}
.cscmpbtn{margin-left:auto}.cscmpbtn[aria-pressed="true"]{color:var(--led);box-shadow:inset 0 0 0 1px var(--led)}



.csmoreb{display:grid;gap:8px;padding:0 0 10px}.csset{gap:8px}.csset select{max-width:60%}.csin{width:110px}.csin.wide{width:60%}
.aiprices{display:grid;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--hair)}.csprice{display:grid;grid-template-columns:1fr auto 80px auto;gap:6px;align-items:center;font-size:var(--fs-s)}.csprice input{width:80px}
@media (max-width:699px),(max-width:820px) and (orientation:landscape){.cskind{width:100%}.cskind button{flex:1;justify-content:center;padding:8px 6px;gap:5px}.createwin{top:0!important;left:0!important;transform:none!important;width:100vw!important;height:100dvh;max-height:none!important;border-radius:0!important;z-index:90}.cstudio{padding:4px 2px}}

.aimoved{margin:12px 14px 0;display:flex;align-items:center;gap:6px;flex-wrap:wrap}.aimoved kbd{font:500 var(--fs-xs) var(--mono);opacity:.6}
.xmark{width:18px;height:18px;overflow:visible}.xmark path{stroke-width:1.3;stroke-linejoin:round;transition:transform .28s cubic-bezier(.2,.9,.25,1)}
.xmark .xp1,.xmark .xp2{fill:var(--ctl);stroke:currentColor}.xmark .xp2{opacity:.75}.xmark .xp3{fill:var(--acc);stroke:var(--acc)}
.xraybtn:hover .xp3,.xraybtn[aria-pressed="true"] .xp3{transform:translateY(-2.2px)}.xraybtn:hover .xp1,.xraybtn[aria-pressed="true"] .xp1{transform:translateY(2.2px)}
.xraybtn[aria-pressed="true"]{background:var(--ctl-hi)}
.perfbtn{display:inline-flex;align-items:center;gap:6px}.perfbtn .led{width:6px;height:6px}.perfbtn .led.rec{background:var(--warn);box-shadow:0 0 8px rgba(193,18,28,.8)}.perfbtn[aria-pressed="true"]{background:var(--ctl-hi)}
.perf{position:absolute;top:46px;right:10px;z-index:7;width:312px;max-height:calc(100% - 56px);overflow:auto;padding:8px;border-radius:var(--r-l);background:rgba(20,22,24,.9);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--gl-sh);display:grid;gap:8px}
.pfh{display:flex;align-items:center;gap:8px;padding:2px 2px 0 4px}.pfh .fph{padding:0}.pfmidi{flex:1;min-width:0;font:500 var(--fs-xs) var(--mono);color:var(--faint);letter-spacing:0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfsec{display:grid;gap:8px;padding:6px 6px 8px}.pfsec>.fph{padding:0 2px}.pfsec .hint{padding:0 2px;margin:0}
.pfmacros{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.pfm{display:grid;justify-items:center;gap:4px;padding:4px 2px 6px;border-radius:var(--r-m)}.pfm.assigning{background:rgba(244,70,17,.1);box-shadow:inset 0 0 0 1px rgba(244,70,17,.6)}
.pfm .knob{width:100%}.pfmeta{font:500 var(--fs-xs) var(--mono);color:var(--faint);letter-spacing:0;text-align:center;min-height:1.3em}.pfmb{display:grid;gap:3px;width:100%;padding:0 3px}.pfmb .btn{width:100%;padding:3px 0;font-size:var(--fs-xs)}.perf{overflow-x:hidden}
.pfrec{display:flex;align-items:center;gap:8px}.recbtn{padding:6px 10px}.recbtn.on{background:var(--warn);color:var(--ral9003)}.pfstat{font:500 var(--fs-xs) var(--mono);color:var(--dim);letter-spacing:0}
.pflist{display:grid;gap:3px}.pfrow{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;font-size:var(--fs-s);color:var(--dim);min-width:0}.pfrow span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pfrow .ib{width:22px;height:22px}
.pfrow kbd{font:500 var(--fs-xs) var(--mono);color:var(--disp);background:#07080a;border-radius:var(--r-s);padding:2px 5px}
.pfspark{width:46px;height:16px;background:#07080a;border-radius:var(--r-s)}.pfspark polyline{fill:none;stroke:var(--disp);stroke-width:1.5;vector-effect:non-scaling-stroke}
.knob.autod .mdot{fill:var(--disp);stroke:var(--bg)}
.lnrow.fx{height:34px}.lnrow.fx .lntr{height:28px;cursor:crosshair;background:rgba(255,255,255,.035)}
.lnfxn{cursor:default;gap:4px}.lnfxsel{min-width:0;flex:1;height:20px;padding:0 4px;border:0;border-radius:var(--r-s);background:rgba(255,255,255,.06);color:var(--text);font:inherit;letter-spacing:0}
.lnfxclr{flex:none;width:18px;height:18px;border:0;border-radius:var(--r-s);background:none;color:var(--faint);font:inherit;cursor:pointer}.lnfxclr:hover{color:var(--text);background:rgba(255,255,255,.07)}
.lnbeat{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.06)}.lnbeat.bar{background:rgba(255,255,255,.16)}
.lnfxs polyline{stroke:color-mix(in srgb,var(--mc) 55%,transparent);stroke-width:1.2}.lnfxs polyline.cur{stroke:var(--disp);stroke-width:1.8}.lnfxs polyline.flat{stroke:rgba(236,236,231,.35);stroke-dasharray:3 3}
.lnbar{position:sticky;top:-5px;z-index:2;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:0 8px 5px;margin-top:-5px;padding-top:5px;background:rgba(20,22,24,.97);border-bottom:1px solid var(--hair)}
.lnbar .seg.mini{display:inline-grid;grid-template-columns:1fr 1fr;min-width:140px}.lnbar .lnhint{color:var(--faint);font-size:var(--fs-2xs);margin-left:auto}
/* Record sits left of play behind a divider, with its two options (count-in, snap) as small lamps attached to it; only with the timeline open */
.recgrp{display:flex;align-items:stretch;margin-right:6px;padding-right:8px;border-right:1px solid var(--hair)}.stage.tsimple .recgrp{display:none}
.vbar .ib.recb{position:relative;display:grid;place-items:center;border-radius:5px 0 0 5px}
.recb .rdot{width:10px;height:10px;border-radius:50%;background:#9e2f27;box-shadow:inset 0 1px 1px rgba(255,255,255,.18)}
.recb:hover .rdot{background:#c73a30}.recb.on .rdot{width:9px;height:9px;border-radius:2px;background:#ff4a3d;box-shadow:0 0 8px rgba(255,74,61,.8);animation:recblink 1s steps(2,start) infinite}
.recb.count .rdot{display:none}.recb .rnum{position:absolute;font:700 var(--fs-xs) var(--mono);color:#ff5a4d;text-shadow:0 0 6px rgba(255,74,61,.7)}.recb.on .rnum{right:2px;top:1px;font-size:8px;text-shadow:none;color:var(--dim)}
@keyframes recblink{50%{opacity:.35}}
.ropts{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:0 7px 0 6px;border-radius:0 5px 5px 0;background:linear-gradient(#2c2f33,#1d1f22);box-shadow:inset 0 1px 0 rgba(255,255,255,.09)}
.ropt{display:flex;align-items:center;gap:4px;border:0;background:none;padding:0;cursor:pointer;font:600 8px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.ropt::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:#3a3d41;box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
.ropt:hover{color:var(--text)}.ropt[aria-pressed="true"]{color:var(--dim)}.ropt[aria-pressed="true"]::before{background:var(--disp);box-shadow:0 0 5px rgba(255,178,0,.7)}
.ropt:focus-visible,.recb:focus-visible{outline:1px solid var(--acc);outline-offset:1px}
.lnadd{flex:none;width:16px;height:16px;border:0;border-radius:var(--r-s);background:none;color:var(--faint);font:inherit;line-height:1;cursor:pointer;padding:0}.lnadd:hover{color:var(--text);background:rgba(255,255,255,.08)}
.lnrow.lnsub{height:26px}.lnrow.lnsub .lnname{padding-left:22px;color:var(--faint);gap:4px}.lnrow.lnsub .lnname span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lnrow.lnsub .lntr{height:20px;cursor:copy;background:rgba(255,255,255,.025)}
.lnmot{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.lnmot polyline{fill:none;stroke:var(--mc);stroke-width:1.4;vector-effect:non-scaling-stroke}
.lnkf,.lnev{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:var(--ral9003);border:1px solid #07080a;cursor:grab;padding:0;z-index:1}
.lnkf{border-radius:50%}.lnkf.e1{border-radius:1px;transform:rotate(45deg)}.lnkf.e2{border-radius:1px}.lnkf:focus-visible,.lnev:focus-visible,.lnkf.cur,.lnev.cur{background:var(--disp);outline:none}
.lnev{top:50%;transform:rotate(45deg);border-radius:1px;background:var(--mc)}.lnev.sw{transform:none;border-radius:2px;width:7px;margin-left:-3.5px}
.lnevl{position:absolute;top:1px;font-size:var(--fs-2xs);color:var(--dim);white-space:nowrap;pointer-events:none;transform:translateX(6px)}
.lnmhint{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:var(--fs-2xs);font-style:normal;color:var(--faint);opacity:.75;pointer-events:none;white-space:nowrap}
.lnkey{flex:none;display:grid;place-items:center;width:16px;height:16px;border:0;border-radius:var(--r-s);background:none;color:var(--faint);cursor:pointer;padding:0}.lnkey svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.5}.lnkey:hover{color:var(--text);background:rgba(255,255,255,.07)}.lnkey.on{color:var(--disp)}.lnkey.on svg{fill:currentColor}
.recount{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:30;font:600 clamp(64px,14vw,160px)/1 var(--mono);color:var(--disp);text-shadow:0 0 24px rgba(0,0,0,.8),0 0 2px #000}.recount[hidden]{display:none}.recount.hit{animation:rcHit .45s ease-out}
@keyframes rcHit{from{transform:scale(1.25);opacity:1}to{transform:scale(1);opacity:.75}}
.rtchip{position:fixed;z-index:60;display:grid;gap:6px;padding:8px}.rtchip .bhint{padding:0 2px}.rtchip .seg.mini{display:inline-grid;grid-template-columns:1fr 1fr;min-width:170px}
@media (pointer:coarse){.lnkey,.lnmclr{width:26px;height:26px}.lnkey svg{width:14px;height:14px}.lnkf::before,.lnev::before{content:"";position:absolute;inset:-9px}}
.lnmclr{flex:none;width:16px;height:16px;border:0;border-radius:var(--r-s);background:none;color:var(--faint);font:inherit;cursor:pointer;padding:0}.lnmclr:hover{color:var(--text);background:rgba(255,255,255,.07)}
.lnauto{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.lnauto polyline{fill:none;stroke:var(--ral9003);stroke-width:1.4;vector-effect:non-scaling-stroke;opacity:.9}
.home{position:fixed;inset:0;z-index:60;overflow:auto;background:rgba(5,6,7,.86);-webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);animation:homein .35s ease-out}
@keyframes homein{from{opacity:0}to{opacity:1}}
.home.drag .hdrop{box-shadow:inset 0 0 0 2px var(--acc);background:rgba(244,70,17,.08)}
.hwrap{max-width:1080px;margin:0 auto;padding:28px 28px 32px;display:grid;gap:22px}
.hhead{display:flex;align-items:center;justify-content:space-between}.hname{color:var(--dim);font-size:var(--fs-l)}@media (max-width:600px){.hname{font-size:var(--fs-m);line-height:1.3}.hhead .hbrand{flex-wrap:wrap;row-gap:8px}.hhead .hbrand .hsep{display:none}.hhead .hbrand .hname{flex-basis:100%;order:9}} /* phones: the name line takes its own row under the wordmark */
.hpitch{display:grid;gap:8px;max-width:760px}.hpitch p{margin:0;color:var(--dim);font-size:var(--fs-l);line-height:1.5;max-width:64ch}.hbrand{display:flex;align-items:center;gap:12px}.hbrand b{font-weight:500;font-size:var(--fs-xl)}
.hlogo{display:block;width:44px;height:28px;color:var(--mkc)}.hlogo svg{width:100%;height:100%}
.hhero{display:grid;grid-template-columns:1.35fr 1fr;gap:14px}
.hdrop{display:grid;place-items:center;align-content:center;gap:8px;min-height:230px;border:0;border-radius:var(--r-l);background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1.5px rgba(236,236,231,.14);cursor:pointer;padding:24px;text-align:center;color:var(--text);transition:background .2s,box-shadow .2s}
.hdrop:hover,.hdrop:focus-visible{background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1.5px var(--acc);outline:0}
.hdrop svg{width:54px;height:54px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.9}.hdrop b{font-weight:500;font-size:var(--fs-xl)}.hdrop span{color:var(--dim);max-width:340px;line-height:1.45}
.hside{display:grid;gap:14px;grid-template-rows:auto 1fr}
.hcont{display:flex;align-items:center;gap:12px;border:0;border-radius:var(--r-l);background:var(--panel);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);padding:10px;text-align:left;cursor:pointer;color:var(--text)}
.hcont:hover{box-shadow:inset 0 0 0 1px var(--acc)}.hcont canvas{width:128px;height:72px;border-radius:var(--r-m);flex:none;background:#050607}.hcont span{display:grid;gap:2px;min-width:0}.hcont b{font-weight:500;font-size:var(--fs-l)}.hcont em{font-style:normal;color:var(--dim);font-size:var(--fs-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hidea{display:grid;gap:8px;align-content:start;border-radius:var(--r-l);background:var(--panel);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);padding:12px}
.hidea>.lbl{display:flex;align-items:center;gap:8px}.hidea div{display:flex;gap:6px}.hidea input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--hair);border-radius:var(--r-m);padding:9px 10px;font-size:var(--fs-m)}.hidn{color:var(--dim);font-size:var(--fs-s);line-height:1.4}
.hsec{display:grid;gap:10px}
.hstudio{display:grid;gap:10px;padding:14px;border-radius:var(--r-l);background:radial-gradient(120% 160% at 0% 0%,rgba(244,70,17,.08),transparent 55%),var(--panel);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 0 1px rgba(255,255,255,.06)}
.hsrow{display:flex;align-items:center;justify-content:space-between;gap:10px}.hstudio .lbl{display:inline-flex;align-items:center;gap:6px}
.hstudio .led.wait{background:var(--disp);box-shadow:0 0 8px 1px rgba(255,178,0,.7)}.hsline{margin:0;color:var(--val);font-size:var(--fs-m);line-height:1.5}.hskeys{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.hskeys[hidden]{display:none}
.hsform{display:grid;grid-template-columns:1fr 1fr;gap:10px}.hsform[hidden]{display:none}.hsform label{display:grid;gap:5px;min-width:0}.hsform .wide{grid-column:1/-1}
.hsform input,.hsform textarea{width:100%;box-sizing:border-box;background:#07080a;border:0;border-radius:var(--r-m);padding:9px 10px;box-shadow:inset 0 1px 3px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.05);color:var(--disp);font:var(--fs-m)/1.4 var(--mono);resize:vertical}
.hsform input:focus-visible,.hsform textarea:focus-visible{outline:1px solid var(--disp);outline-offset:1px}.hsform [aria-invalid=true]{box-shadow:inset 0 1px 3px rgba(0,0,0,.8),inset 0 0 0 1px var(--warn)}
.hsgo{display:flex;align-items:center;justify-content:flex-end;gap:8px}.hsmsg{margin-right:auto;color:var(--dim);font-size:var(--fs-s)}.hsmsg.err{color:#ff8a7a}.hsmsg a{color:var(--disp)}
@media (max-width:600px){.hsform{grid-template-columns:1fr}}
.hsizes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.hsize{display:grid;justify-items:center;gap:4px;border:0;border-radius:var(--r-m);background:var(--panel);padding:14px 6px 10px;cursor:pointer;color:var(--text)}
.hsize:hover,.hsize:focus-visible{box-shadow:inset 0 0 0 1px var(--acc);outline:0}.hsz{display:block;border-radius:3px;box-shadow:inset 0 0 0 1.5px rgba(236,236,231,.55);margin-bottom:6px}
.hsize b{font-weight:500;font-size:var(--fs-m)}.hsize span{font:500 var(--fs-xs) var(--mono);color:var(--dim);letter-spacing:0}
.htpls{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.htpl{display:grid;gap:4px;border:0;border-radius:var(--r-m);background:var(--panel);padding:8px 8px 10px;text-align:left;cursor:pointer;color:var(--text)}
.htpl:hover,.htpl:focus-visible{box-shadow:inset 0 0 0 1px var(--acc);outline:0}
.hframe{display:grid;place-items:center;height:78px;border-radius:var(--r-s);background:#07080a;margin-bottom:4px}
.hart{display:grid;place-items:center;border-radius:3px;box-shadow:0 6px 16px rgba(0,0,0,.5)}.hart i{font-style:normal;font-size:18px;font-weight:600}
.htpl b{font-weight:500;font-size:var(--fs-m)}.htpl span{font-size:var(--fs-s);color:var(--dim);line-height:1.35}
.hrecent{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.hrec{display:grid;gap:3px;border:0;background:none;padding:0;text-align:left;cursor:pointer;color:var(--text)}
.hrec img,.hrec .himg{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-m);background:#07080a;box-shadow:inset 0 0 0 1px var(--hair)}.hrec:hover img{outline:1.5px solid var(--acc)}
.hrec b{font-weight:500;font-size:var(--fs-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hrec span{font-size:var(--fs-s);color:var(--dim)}
.hfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--dim);font-size:var(--fs-s);padding-top:6px;border-top:1px solid var(--hair)}
@media (max-width:900px){.hhero{grid-template-columns:1fr}.hsizes,.htpls,.hrecent{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.hwrap{padding:18px 16px}.hsizes,.htpls,.hrecent{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lk{border:0;background:none;padding:0 4px;height:100%;color:var(--faint);opacity:0;cursor:pointer;display:grid;place-items:center}.lk svg,.seclock svg,.lockban svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.mod:hover .lk,.lk:focus-visible,.lk.on{opacity:1}.lk:hover{color:var(--text)}.lk.on{color:var(--text)}
.seclock{position:absolute;top:4px;right:24px;width:22px;height:18px;border:0;border-radius:var(--r-s);background:none;color:var(--faint);opacity:0;cursor:pointer;display:grid;place-items:center;padding:0}
.fpsec.collapsed>.seclock{display:none}
.secacts{position:absolute;top:4px;right:48px;display:flex;gap:2px;opacity:0;transition:opacity .15s}.fpsec:hover>.secacts,.secacts:focus-within{opacity:1}
.secacts button{width:22px;height:18px;border:0;border-radius:var(--r-s);background:none;color:var(--faint);cursor:pointer;display:grid;place-items:center;padding:0}
.secacts button:hover{color:var(--text);background:rgba(255,255,255,.07)}.secacts svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.fpsec.locked>.secacts{display:none}@media (pointer:coarse){.secacts,.seclock{opacity:.7}}.fpsec>.fph{padding-right:8px}.fpsec>.fph .fpchev{padding-left:30px}
.mkrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:4px;padding:4px 2px 8px}
.mkb{display:grid;justify-items:center;gap:3px;border:0;border-radius:var(--r-s);background:var(--ctl);color:var(--dim);padding:6px 2px 5px;cursor:pointer;font:500 var(--fs-2xs) var(--mono);letter-spacing:.06em;text-transform:uppercase}
.mkb svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.mkb:hover{color:var(--text)}
.mkb[aria-checked="true"]{color:var(--text);background:color-mix(in srgb,var(--acc) 16%,var(--ctl));box-shadow:inset 0 0 0 1px var(--acc)}.fpsec{position:relative}.fpsec:hover>.seclock,.seclock:focus-visible,.seclock[aria-pressed="true"]{opacity:1}.seclock:hover{color:var(--text)}.seclock[aria-pressed="true"]{color:var(--text)}
.fpsec.locked>.fprow,.fpsec.locked>.isb,.fpsec.locked>.fpadd,.fpsec.locked>.mkrow{opacity:.42;filter:saturate(.4)}.fpsec.locked>.fph{color:var(--dim)}
.params.alllocked .seclock{opacity:1}.params.alllocked #layerCtl{opacity:.42}
.lockban{display:flex;align-items:center;gap:8px;margin:8px 10px 0;padding:7px 8px 7px 10px;border-radius:var(--r-m);background:rgba(236,236,231,.06);box-shadow:inset 0 0 0 1px rgba(236,236,231,.12);font-size:var(--fs-s);color:var(--text)}.lockban span{flex:1}
.htour{display:flex;align-items:center;gap:10px;border:0;border-radius:var(--r-l);background:var(--panel);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);padding:10px 12px;text-align:left;cursor:pointer;color:var(--text)}
.htour svg{width:26px;height:26px;flex:none;padding:6px;border-radius:50%;background:var(--ctl-hi);fill:currentColor}.htour span{display:grid;gap:2px}.htour b{font-weight:500}.htour em{font-style:normal;color:var(--dim);font-size:var(--fs-s)}
.htour:hover{box-shadow:inset 0 0 0 1px var(--acc)}.htour.fresh{box-shadow:inset 0 0 0 1px var(--acc)}.htour.fresh svg{background:var(--acc);color:#0A0A0A}
.hside{grid-template-rows:auto 1fr auto}
.tour{position:fixed;inset:0;z-index:70;pointer-events:none}.tacts{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0}
.tring{position:fixed;border-radius:var(--r-m);box-shadow:0 0 0 2px var(--acc),0 0 0 9999px rgba(5,6,7,.5),0 0 24px rgba(244,70,17,.5);transition:left .35s cubic-bezier(.2,.9,.25,1),top .35s cubic-bezier(.2,.9,.25,1),width .35s,height .35s,opacity .2s;pointer-events:none}
.tcard{position:fixed;width:300px;pointer-events:auto;padding:14px 14px 12px;border-radius:var(--r-l);background:rgba(22,24,26,.94);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--gl-sh);display:grid;gap:6px;transition:left .35s cubic-bezier(.2,.9,.25,1),top .35s cubic-bezier(.2,.9,.25,1)}
.tcard b{font-weight:500;font-size:var(--fs-l)}.tcard p{margin:0;color:var(--dim);line-height:1.45;font-size:var(--fs-m)}.tst{font:500 var(--fs-xs) var(--mono);letter-spacing:.12em;color:var(--faint)}
.tcard.ok b::after{content:"  ✓";color:var(--led)}
.tdots{display:flex;gap:4px;margin-top:4px}.tdots i{width:14px;height:3px;border-radius:2px;background:rgba(236,236,231,.16)}.tdots i.done{background:var(--led)}.tdots i.cur{background:var(--acc)}
.tbtns{display:flex;justify-content:space-between;margin-top:4px}
.guides{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:3}
.guides .gd{stroke:var(--cool);stroke-width:1;shape-rendering:crispEdges;opacity:.9}.guides .gd.ghost{stroke-dasharray:4 3}
.guides .gdh{stroke:transparent;stroke-width:9;pointer-events:stroke;cursor:move}
.guides .sm{stroke:var(--mask);stroke-width:1;shape-rendering:crispEdges}.guides .sm.c{stroke-width:1.5}
.guides .smt,.guides .gdt{font:600 var(--fs-2xs) var(--mono);letter-spacing:0;fill:var(--mask)}.guides .gdt{fill:var(--cool)}
.ruler{position:absolute;z-index:5;background:#101214;cursor:default}.ruler.rh{top:0;left:18px;height:18px;cursor:row-resize}.ruler.rv{top:18px;left:0;width:18px;cursor:col-resize}
.rcorner{position:absolute;top:0;left:0;width:18px;height:18px;z-index:5;background:#101214;box-shadow:inset -1px -1px 0 rgba(236,236,231,.12)}
.stage.rulers .hud{inset:26px 12px 12px 28px}
.ovpop .gdo .gchk{font-style:normal;color:var(--led);font-size:var(--fs-m);text-align:center}.ovpop .gdo:disabled{opacity:.4}
.tedit{position:absolute;z-index:6;margin:0;padding:0;border:0;outline:1px dashed color-mix(in srgb,var(--cool) 80%,transparent);outline-offset:4px;border-radius:2px;background:rgba(0,137,182,.06);
  color:transparent;caret-color:var(--acc);resize:none;overflow:hidden;white-space:pre;box-sizing:content-box}
.tedit::selection{background:rgba(0,137,182,.45);color:transparent}
body[data-ov=type] #gl{cursor:text}
.teffects{display:grid;gap:6px}.efx{border-radius:var(--r-m);background:rgba(255,255,255,.02);padding:4px 6px}.efx.on{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.efxh{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:28px}.efxh .tled{padding:4px 0}.efxh .cchip{max-width:120px}.efx .knobs{padding:2px 0 4px}
.hnote{position:absolute;left:50%;bottom:58px;z-index:6;max-width:min(72%,560px);transform:translate(-50%,4px);opacity:0;pointer-events:none;padding:6px 12px 6px 22px;border-radius:999px;
  background:rgba(10,10,10,.62);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:var(--text);font:500 var(--fs-m)/1.3 var(--sans);transition:opacity .2s,transform .2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hnote::before{content:"";position:absolute;left:10px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--led);box-shadow:0 0 6px rgba(0,187,45,.8)}
.hnote.show{opacity:1;transform:translate(-50%,0)}
.hud .bl,.hud .br{grid-row:3}
.hud .bl{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hud b{color:var(--text);font-weight:500}
.rec{display:inline-flex;align-items:center;gap:6px}
.rec .led{width:6px;height:6px}
.viewseg{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:3;background:rgba(27,29,31,.9)}
.shcard{position:absolute;top:56px;left:50%;transform:translateX(-50%);z-index:6;display:grid;gap:4px;width:max-content;max-width:calc(100% - 24px);padding:10px 40px 12px 12px;background:rgba(18,19,21,.95);border:1px solid var(--acc);border-radius:var(--r-m);box-shadow:0 10px 32px rgba(0,0,0,.55)}
.shcard[hidden]{display:none}.shcard>b{font-weight:500;font-size:var(--fs-l);color:var(--text)}.shcard>em{font:500 var(--fs-xs) var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.shcard .shcrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.shcard .shcx{position:absolute;top:6px;right:6px;width:28px;height:28px}
.ghost-flag{position:absolute;top:44px;left:50%;transform:translateX(-50%);z-index:3;font:500 var(--fs-s) var(--mono);letter-spacing:.12em;text-transform:uppercase;background:rgba(27,29,31,.92);color:var(--text);border:1px solid var(--acc);padding:5px 10px;border-radius:999px;pointer-events:none;white-space:nowrap}
.ghost-flag b{color:var(--acc);font-weight:500}
.chip.ghosting{color:var(--text);background:var(--ctl-hi);box-shadow:inset 0 0 0 1px var(--acc)}
.stage.hasv{padding-bottom:calc(50px + var(--lanes-h,0px))}.stage.hasv .hud .bl,.stage.hasv .hud .br{visibility:hidden}
.vbar{position:absolute;left:10px;right:10px;bottom:8px;z-index:3;display:flex;align-items:center;gap:4px;padding:4px 6px;background:rgba(20,22,24,.94);border:1px solid var(--hair);border-radius:var(--r-m);font:500 var(--fs-s) var(--mono);font-variant-numeric:tabular-nums;color:var(--dim)}
.vbar .ib.on{color:var(--acc)}
.modebtn{display:inline-flex;align-items:center;gap:5px;flex:none;border:0;border-radius:999px;padding:5px 9px 5px 7px;margin-left:4px;background:var(--ctl);color:var(--text);font:500 var(--fs-xs) var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.modebtn:hover{background:var(--ctl-hi)}.modebtn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.stage.tadv .modebtn{padding:5px 7px;background:none;color:var(--dim)}.stage.tadv .modebtn:hover{color:var(--text)}
/* Simple view: a slim pill with play, time, a scrub line and the Timeline button */
.stage.tsimple .vbar{left:50%;right:auto;transform:translateX(-50%);width:min(520px,calc(100% - 20px));border-radius:var(--r-m);padding:4px 6px;gap:6px} /* the same rectangle as the full transport, just narrower */
.stage.narrow.tadv :is(#lInfo,#vDur,#vSpeed){display:none}
.stage.tsimple :is(#vMatch,#vBack,#vFwd,#lBack,#lFwd,#vSpeed,#vDur,#vSetIn,#vSetOut,#vClear,#lInfo,.vmini){display:none!important}
.stage.tsimple :is(#lTicks,#lZones,.vhandle,#vRange){display:none}
.stage.tsimple :is(.ltrack,.vtrack){height:20px}
.stage.tsimple :is(.ltrack,.vtrack)::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:rgba(236,236,231,.16)}
.lanes{position:absolute;left:10px;right:10px;bottom:52px;z-index:3;max-height:210px;overflow-y:auto;overflow-x:hidden;padding:5px 0 5px;background:rgba(20,22,24,.94);border:1px solid var(--hair);border-radius:var(--r-m);font:500 var(--fs-xs) var(--mono);color:var(--dim);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.lnlayer{position:relative}
.lnrow{display:grid;grid-template-columns:var(--ln-x,120px) var(--ln-w,1fr);align-items:center;height:20px}
.lnname{display:flex;align-items:center;gap:5px;min-width:0;height:100%;border:0;background:none;padding:0 8px 0 3px;color:var(--dim);font:inherit;letter-spacing:0;text-align:left}
.lnpick{flex:1;min-width:0;display:flex;align-items:center;height:100%;border:0;background:none;padding:0;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}
.lngrip{flex:none;width:7px;height:11px;cursor:grab;opacity:0;transition:opacity .15s;background:radial-gradient(circle,rgba(236,236,231,.7) .9px,transparent 1.2px) 0 0/3.5px 3.7px}.lngrip.none{cursor:default;background:none}
.lnrow:hover .lngrip,.lnrow.lndrag .lngrip{opacity:.8}@media (hover:none){.lngrip{opacity:.45}}
.lnvis{flex:none;width:9px;height:9px;padding:0;border:0;border-radius:2px;background:var(--mc);cursor:pointer;position:relative}.lnvis::before{content:"";position:absolute;inset:-5px}
.lnvis:hover{box-shadow:0 0 0 2px rgba(236,236,231,.25)}.lnrow.off .lnvis{background:transparent;box-shadow:inset 0 0 0 1.5px var(--mc)}
.lnrow.lndrag{background:rgba(244,70,17,.08)}.lnrow.drop-above{box-shadow:inset 0 2px 0 var(--acc)}.lnrow.drop-below{box-shadow:inset 0 -2px 0 var(--acc)}
.lnname i{flex:none;width:7px;height:7px;border-radius:2px;background:var(--mc)}.lnname span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lnpick:hover{color:var(--text)}
.lnrow.sel .lnname{color:var(--text)}.lnrow.sel{background:rgba(255,255,255,.04)}.lnrow.off .lntr,.lnrow.off .lnpick{opacity:.38}
.lntr{position:relative;height:12px;border-radius:var(--r-xs);background:rgba(255,255,255,.03);cursor:pointer;touch-action:none}
.lnseg{position:absolute;top:0;bottom:0;border-radius:var(--r-xs);background:color-mix(in srgb,var(--mc) 26%,transparent);box-shadow:inset 1.5px 0 0 var(--mc);overflow:hidden}
.lnseg.clip{background:color-mix(in srgb,var(--mc) 42%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mc) 80%,transparent)}
.lnseg.missing{background:repeating-linear-gradient(135deg,rgba(193,18,28,.35) 0 4px,transparent 4px 8px)}
.lnseg.text{background:color-mix(in srgb,var(--mc) 20%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mc) 55%,transparent);cursor:grab}
.lnseg .lz-in{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(250,210,1,.1),rgba(250,210,1,.55))}
.lnseg .lz-out{position:absolute;right:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(0,137,182,.55),rgba(0,137,182,.1))}
.lnseg .eh{position:absolute;top:0;bottom:0;width:6px;cursor:ew-resize}.lnseg .eh.l{left:0}.lnseg .eh.r{right:0}.lnseg.text:hover .eh{background:rgba(236,236,231,.35)}
.lnotch{position:absolute;top:2px;bottom:2px;width:1px;background:color-mix(in srgb,var(--mc) 70%,transparent)}
.lnwave{position:absolute;inset:0}.lnwave i{position:absolute;bottom:0;width:.5%;background:var(--mc);opacity:.75;border-radius:1px}
.lnover{position:absolute;inset:0;display:grid;grid-template-columns:var(--ln-x,120px) var(--ln-w,1fr);pointer-events:none}.lnovtr{grid-column:2;position:relative}
.lnedge{position:absolute;top:0;bottom:0;border-left:1px dashed rgba(236,236,231,.28)}
.lnhead{position:absolute;top:0;bottom:0;width:1.5px;margin-left:-.75px;background:var(--text);box-shadow:0 0 6px rgba(236,236,231,.5)}
.mod::after{content:"";position:absolute;left:0;top:9px;bottom:9px;width:2px;border-radius:2px;background:var(--mc,transparent);opacity:.9}
.ltrack{position:relative;flex:1;min-width:80px;height:26px;cursor:pointer;touch-action:none}
.ltrack::before{content:"";position:absolute;left:0;right:0;top:11px;height:4px;border-radius:var(--r-xs);background:var(--ctl-hi)}
.lticks i{position:absolute;top:6px;width:1px;height:4px;margin-left:-.5px;background:rgba(236,236,231,.18)}.lticks i.mj{top:3px;height:7px;background:rgba(236,236,231,.35)}
.lticks b{position:absolute;top:15px;left:-8px;width:16px;text-align:center;font:500 var(--fs-xs) var(--mono);color:var(--faint)}
.lz{position:absolute;top:9px;height:8px;border-radius:var(--r-xs);font:500 var(--fs-2xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(5,6,7,.8);overflow:hidden;white-space:nowrap;padding-left:3px;line-height:8px}
.lz.in{background:rgba(250,210,1,.7)}.lz.out{background:rgba(0,137,182,.7);text-align:right;padding:0 3px 0 0}
.lloop{display:flex;align-items:center;gap:4px;color:var(--dim);font:500 var(--fs-xs) var(--mono);text-transform:uppercase;letter-spacing:.12em;margin-left:4px}
.lloop input::-webkit-inner-spin-button,.lloop input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.lloop input{-moz-appearance:textfield;appearance:textfield;width:46px;background:#07080a;border:1px solid var(--hair);border-radius:var(--r-s);color:var(--disp);font:500 var(--fs-s) var(--mono);padding:2px 4px;text-align:right}.lloop span{text-transform:none}
.vtc{color:var(--text);min-width:76px;text-align:center}.vtc.dim{color:var(--dim);min-width:0}
.vtrack{position:relative;flex:1;min-width:80px;height:26px;cursor:pointer;touch-action:none}
.vtrack::before{content:"";position:absolute;left:0;right:0;top:11px;height:4px;border-radius:var(--r-xs);background:var(--ctl-hi)}
.vrange{position:absolute;top:9px;height:8px;background:rgba(244,70,17,.45);border-radius:var(--r-xs);pointer-events:none}
.vhandle{position:absolute;top:4px;width:9px;height:18px;margin-left:-4.5px;border-radius:var(--r-xs);background:var(--acc);cursor:ew-resize;touch-action:none}
.vhandle::after{content:"";position:absolute;left:4px;top:5px;bottom:5px;width:1px;background:rgba(0,0,0,.45)}
.vhead{position:absolute;top:1px;bottom:1px;width:2px;margin-left:-1px;background:var(--text);border-radius:var(--r-xs);pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.vbar .btn.vmini{padding:4px 7px;font-size:var(--fs-s)}.vbar .btn.vmini kbd{opacity:.55;margin-left:3px}
.vspeed{color:var(--acc);min-width:26px;text-align:center}
@media (max-width:760px){.vbar .vmini,.vbar #vDur{display:none}}
.ab-flag{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font:600 var(--fs-s) var(--mono);letter-spacing:.12em;background:var(--text);color:var(--bg);padding:6px 10px;border-radius:var(--r-s);pointer-events:none}
.fallback{padding:24px;max-width:40ch;text-align:center;color:var(--dim)}

/* Graph view */
.graph{position:absolute;inset:0;z-index:2;background:rgba(10,10,10,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;flex-direction:column;padding:52px 0 14px}
.graph-scroll{flex:1;overflow:auto;display:flex;align-items:center;padding-inline:16px}
.graph-scroll svg{flex:none;margin:auto}
.graph p{margin:0 auto;padding:0 16px;max-width:62ch;text-align:center;color:var(--dim);font-size:var(--fs-m)}
.gn rect{fill:var(--panel);stroke:var(--ctl-hi);stroke-width:1}
.gn.fx{cursor:pointer}
.gn.fx:hover rect{stroke:var(--ral7035)}
.gn.sel rect{stroke:var(--acc);stroke-width:1.5}
.gn.off{opacity:.38}
.gn.io rect{fill:var(--bg)}
.gn.merge rect{fill:var(--bg);stroke:rgba(244,70,17,.6)}
.gn .t{fill:var(--text);font:500 var(--fs-m) var(--sans)}
.gn .s{fill:var(--dim);font:400 var(--fs-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase}
.gn .i{fill:var(--faint);font:500 var(--fs-xs) var(--mono)}
.gn .dot{fill:var(--acc)}
.gn .dot.offd{fill:var(--ctl-hi)}
.port{fill:var(--bg);stroke:var(--ral7035);stroke-width:1.2}
.wire{fill:none;stroke:var(--ral7035);stroke-opacity:.5;stroke-width:1.5}
.wire.alt{stroke:var(--acc);stroke-opacity:.65}
.wire.skip{stroke-dasharray:4 4;stroke-opacity:.3}

/* Params */
.params .ph{padding-bottom:4px}
.ptitle{display:flex;align-items:baseline;gap:8px;min-width:0}
.ptitle b{font:var(--t-title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.pnm{display:grid;min-width:0;line-height:1.25}.pnm b.rn{cursor:text;border-radius:var(--r-s);padding:0 3px;margin-left:-3px}.pnm b.rn:hover{background:rgba(236,236,231,.07)}
.ptype{font:400 var(--fs-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ptype b{color:var(--text);font-weight:500}
.params .ph{position:relative}.rename{position:absolute;z-index:5;font:500 var(--fs-b) inherit;font-family:inherit;color:var(--text);background:#07080a;border:1px solid var(--acc);border-radius:var(--r-s);padding:3px 6px;outline:0;box-shadow:0 0 0 3px rgba(244,70,17,.18)}
.mod.sel .nm{cursor:text}
.knobs{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:4px 8px 2px}.knobs>.fpsw{grid-column:1/-1;padding:4px 0 8px}
.knob{display:grid;justify-items:center;gap:3px;padding:8px 0 10px;border-radius:var(--r-m);cursor:ns-resize;touch-action:none;user-select:none;-webkit-user-select:none;min-width:0}
.knob:hover{background:rgba(236,236,231,.03)}
.knob svg{width:50px;height:50px;overflow:visible}
.knob .kf{fill:var(--ctl);stroke:var(--bg);stroke-width:2}
.knob .kt{fill:none;stroke:var(--ctl-hi);stroke-width:2.5;stroke-linecap:round}
.knob .kv{fill:none;stroke:var(--val);stroke-width:2.5;stroke-linecap:round;transition:stroke .15s}.knob:focus-visible .kv,.knob:active .kv,.knob:hover .kv{stroke:var(--acc)}
.knob .kp{stroke:var(--text);stroke-width:2.5;stroke-linecap:round}
.knob .tick{fill:var(--faint)}
/* Knobs: a machined cap (lit top, soft bevel, turned finish, a shadow under it) with a backlit LED pointer. The svg underneath keeps the ticks and the value arc */
.knob .kw{position:relative;display:block;line-height:0}
.knob .kf,.knob .kp,.knob .kpt,.knob .kdia{display:none}
.kcap{position:absolute;left:50%;top:50%;width:66.7%;height:66.7%;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;
  background:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.018) 0 1px,rgba(0,0,0,.02) 1px 2px),radial-gradient(circle at 50% 28%,#44484b,#2a2d2f 45%,#1a1c1e 75%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 4px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.65),0 3px 6px rgba(0,0,0,.65),0 8px 14px -5px rgba(0,0,0,.6);
  transition:transform .16s cubic-bezier(.3,1.4,.5,1),box-shadow .2s}
.knob:hover .kcap{transform:translate(-50%,calc(-50% - 1px));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 4px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.65),0 5px 10px rgba(0,0,0,.6),0 12px 18px -5px rgba(0,0,0,.55)}
.knob:active .kcap{transform:translate(-50%,calc(-50% + 1px)) scale(.985)}
.kptr{position:absolute;inset:0;transform:rotate(var(--a,0deg))}
.kptr::after{content:"";position:absolute;left:50%;top:11%;width:2.5px;height:32%;margin-left:-1.25px;border-radius:2px;background:#ffb38f;box-shadow:0 0 6px rgba(244,70,17,.9),0 0 2px rgba(255,200,170,.9)}
.knob.hero .kptr::after{width:3px;margin-left:-1.5px}
/* the angle dial: the same cap, the LED runs to the edge; an axis (half-turn) shows a dim tail the other way too */
.angk .kptr::after{top:6%;height:44%}
.kcap.axis .kptr::before{content:"";position:absolute;left:50%;top:50%;width:2px;height:40%;margin-left:-1px;border-radius:2px;background:rgba(255,179,143,.35)}
.knob.modded .kcap{outline:1.5px solid var(--acc);outline-offset:1px}
/* Fader caps match: machined, with an LED line; the hue strip's line glows in the chosen hue */
.fcap{background:linear-gradient(180deg,#44484b,#25282a 60%,#1c1e20)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(0,0,0,.65),0 3px 6px rgba(0,0,0,.6);transition:transform .14s}
.fcap::after{left:50%!important;margin-left:-1px;background:#ffb38f!important;box-shadow:0 0 5px rgba(244,70,17,.9)}
.fader:hover .fcap{transform:translateY(-1px)}
.fader.hue .fcap{border:0!important;top:-4px;height:30px;width:12px;margin-left:-6px}
.fader.hue .fcap::after{display:block!important;top:5px;bottom:5px;width:3px;margin-left:-1.5px;background:var(--hc,#fff)!important;box-shadow:0 0 6px var(--hc,#fff)}

.knob{position:relative}.knob output{cursor:text;border-radius:var(--r-s);padding:0 3px}.knob output:hover{background:rgba(236,236,231,.08)}
.knob .kin{position:absolute;left:50%;top:6px;transform:translateX(-50%);width:calc(100% - 6px);max-width:78px;text-align:center;font:500 var(--fs-s) var(--mono);font-variant-numeric:tabular-nums;background:var(--bg);color:var(--text);border:1px solid var(--acc);border-radius:var(--r-s);padding:2px 4px;outline:0}
.knob output{font:500 var(--fs-s) var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ideanote{margin:6px 0 0;font-size:var(--fs-s);line-height:1.45;color:var(--dim)}.ideanote b{color:var(--disp);font-weight:500}.ideanote button{margin-left:6px}
/* A knob or fader you clicked takes the scroll wheel until the pointer leaves it */
.angk .kang{fill:#141518;stroke:rgba(236,236,231,.14);stroke-width:1.2}.angk .kp{stroke:var(--disp);stroke-width:2;stroke-linecap:round}.angk .kdia{stroke:rgba(255,178,0,.45);stroke-width:2;stroke-linecap:round}.angk .kpt{fill:var(--disp)}.angk .kcen{fill:var(--text)}.angk svg{cursor:crosshair}
.knob.warmed svg,.fdk.warmed svg{filter:drop-shadow(0 0 5px rgba(255,178,0,.45))}.fader.warmed{box-shadow:inset 0 0 0 1px rgba(255,178,0,.35)}
/* Front door: the studio with its panels tucked away, already playing. Explore (knobs and the Wander pad) on the right, recipes and ways in below. */

/* Welcome and New Project screens share the frosted backdrop, brand row, type scale and components */
:root{--fs-d:32px}@media (max-width:760px){:root{--fs-d:24px}}
.hpitch h1{margin:0;font:650 var(--fs-d)/1.06 var(--sans);letter-spacing:-.015em;color:var(--text);text-wrap:balance}
.welcome{position:fixed;inset:0;z-index:120;overflow:auto;background:rgba(5,6,7,.86);-webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);animation:homein .35s ease-out}
.welcome[hidden]{display:none}.wcwrap{max-width:1080px}
.hbeta{display:inline-flex;align-items:center;gap:6px;flex:none;margin-left:10px;padding:3px 8px;border:0;border-radius:var(--r-s);background:none;box-shadow:inset 0 0 0 1px var(--hair);font:500 var(--fs-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.hbeta .led,.wcnote .lbl .led{width:6px;height:6px}button.hbeta{cursor:pointer}button.hbeta:hover{color:var(--text);box-shadow:inset 0 0 0 1px rgba(236,236,231,.16)}
.wcreel{position:relative;aspect-ratio:16/9;width:min(100%,calc(52vh * 16 / 9));justify-self:center;border-radius:var(--r-l);overflow:hidden;background:var(--bg);box-shadow:0 0 0 1px var(--hair),0 24px 60px -20px rgba(0,0,0,.7)}
.wcreel video{display:block;width:100%;height:100%;object-fit:cover}.wcreel.noreel video{display:none}.wcsound{position:absolute;right:10px;bottom:10px}
.wcacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}

.wcnote{display:grid;gap:6px;padding:12px 14px;border-radius:var(--r-m);background:var(--panel);box-shadow:inset 0 0 0 1px var(--hair)}.wcnote .lbl{display:inline-flex;align-items:center;gap:6px}
.wcnote p{margin:0;color:var(--dim);font:400 var(--fs-m)/1.55 var(--sans)}.wcnote strong{color:var(--text);font-weight:600}
.hterms{border:0;background:none;padding:0;color:var(--dim);font:inherit;text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:3px;cursor:pointer}.hterms:hover{color:var(--text)}
@media (max-width:760px){.wcacts{grid-template-columns:1fr}}
/* Instrument skin for the New Project and Welcome screens: Looks-style pads (number, LED in the pad's color, title, mono caption),
   screens like the faceplate's (recessed, readouts in the display orange), sections like the faceplate's */
.ipad{position:relative;display:grid;grid-template-columns:1fr auto;align-content:start;gap:6px 8px;border:0;border-radius:10px;padding:8px 9px 10px;text-align:left;cursor:pointer;color:var(--text);
  background:radial-gradient(130% 90% at 50% 0%,#2a2c30,#18191c 72%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -3px 7px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.035),0 0 0 1px rgba(0,0,0,.7),0 2px 0 #0a0b0c,0 7px 12px -6px rgba(0,0,0,.8);transition:transform .07s,box-shadow .12s,background .12s}
.ipad:hover,.ipad:focus-visible{outline:0;background:radial-gradient(130% 90% at 50% 0%,#2e3034,#1a1b1e 72%);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -3px 7px rgba(0,0,0,.55),inset 0 0 0 1px color-mix(in srgb,var(--pc,var(--acc)) 38%,transparent),0 0 0 1px rgba(0,0,0,.7),0 2px 0 #0a0b0c,0 7px 12px -6px rgba(0,0,0,.8)}
.ipad:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 4px rgba(0,0,0,.55),inset 0 0 0 1px color-mix(in srgb,var(--pc,var(--acc)) 45%,transparent),0 0 0 1px rgba(0,0,0,.7),0 0 0 #0a0b0c,0 3px 6px -4px rgba(0,0,0,.8)}
.ipad>*{grid-column:1/-1}.ipad>.pn{grid-column:1;font:500 var(--fs-s) var(--mono);color:var(--faint)}.ipad>.led{grid-column:2;justify-self:end;align-self:center;width:6px;height:6px}
.ipad:hover>.led,.ipad.lit>.led,.ipad:focus-visible>.led{background:var(--pc,var(--acc));box-shadow:0 0 7px color-mix(in srgb,var(--pc,var(--acc)) 80%,transparent)}
.ipad>b,.ipad span>b{font:500 var(--fs-m)/1.25 var(--sans);color:var(--text)}.ipad .ps,.ipad span>em{font:400 var(--fs-xs)/1.4 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.ipad.row{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 12px 10px}.ipad.row>*{grid-column:auto}.ipad.row span{display:grid;gap:3px;min-width:0}
.ipad.row>.led{grid-column:3}.ipad.row svg{width:24px;height:24px;padding:5px;border-radius:var(--r-s);background:#07080a;box-shadow:inset 0 1px 3px rgba(0,0,0,.8);color:var(--pc,var(--acc));fill:currentColor}
.hcont.ipad canvas{width:112px;height:63px;border-radius:var(--r-s);background:#050607;box-shadow:inset 0 0 0 1px var(--hair)}
.htour.fresh{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -3px 7px rgba(0,0,0,.55),inset 0 0 0 1px color-mix(in srgb,var(--pc) 45%,transparent),0 0 0 1px rgba(0,0,0,.7),0 2px 0 #0a0b0c,0 7px 12px -6px rgba(0,0,0,.8)}.htour.fresh svg{background:#07080a;color:var(--pc)}.htour.fresh>.led{background:var(--pc)}
.hsize.ipad{justify-items:stretch}.hsize.ipad .pa{display:grid;place-items:center;height:44px}.hsize.ipad .hsz{margin:0;box-shadow:inset 0 0 0 1.5px var(--dim)}.hsize.ipad:hover .hsz{box-shadow:inset 0 0 0 1.5px var(--pc,var(--acc))}
.htpl.ipad .hframe,.hrec.ipad img,.hrec.ipad .himg,.wcpad .pth{height:78px;width:100%;margin:0;border-radius:var(--r-s);background:#050607;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 3px 12px rgba(0,0,0,.85);object-fit:cover}
.hrec.ipad b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hrec.ipad:hover img{outline:0}
/* screens */
.hdrop,.wcreel{position:relative;border:0;border-radius:var(--r-m);background:#050607;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 3px 12px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.04)}
.hdrop{padding:24px;color:var(--disp);font-family:var(--mono)}.hdrop svg{stroke:var(--disp);opacity:.95}
.hdrop b{font:500 var(--fs-l) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--disp)}.hdrop span{font:400 var(--fs-s)/1.5 var(--mono);color:var(--faint)}
.hdrop:hover,.hdrop:focus-visible,.hdrop.over{background:#07080a;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 60%,transparent),inset 0 3px 12px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.6)}
.scrlab{position:absolute;left:10px;top:9px;z-index:2;display:inline-flex;align-items:center;gap:6px;font:500 var(--fs-xs) var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--disp);pointer-events:none}.scrlab .led{width:6px;height:6px}
.wcreel{padding:3px}.wcreel video{border-radius:calc(var(--r-m) - 3px)}
/* sections, like the faceplate's */
.hidea,.wcnote{border-radius:var(--r-m);background:var(--panel);box-shadow:inset 0 0 0 1px var(--hair)}
.hidea input{background:#07080a;border:0;box-shadow:inset 0 1px 3px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.05);color:var(--disp);font-family:var(--mono)}
/* welcome: four pads when there is a project to continue */
.wcacts{grid-template-columns:repeat(3,minmax(0,1fr))}.wcacts.four,.wcacts[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}.wcacts[data-n="5"]{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1000px) and (min-width:761px){.wcacts[data-n="5"]{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.wcacts.four,.wcacts[data-n]{grid-template-columns:1fr}}
.wcpad{min-height:118px}.wcpad .pg{width:26px;height:26px;padding:5px;border-radius:var(--r-s);background:#07080a;box-shadow:inset 0 1px 3px rgba(0,0,0,.8);color:var(--pc);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.wcpad .pg circle{fill:currentColor;stroke:none}.wcpad .pg path[d^="M8"]{fill:currentColor;stroke:none}.wcpad .pth{height:52px}
@media (max-width:760px){.wcacts,.wcacts.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Studio demo: a caption over the top of the stage and a cursor that uses the real controls */
.sdcap{position:fixed;z-index:95;width:min(400px,calc(100vw - 16px));display:grid;gap:5px;padding:9px 12px 7px;border-radius:var(--r-l);background:rgba(10,11,12,.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 34px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.08)}
.sdcap[hidden]{display:none}.sdbars{display:flex;gap:3px;margin-bottom:2px}.sdbars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.14);transition:background .3s}.sdbars i.on{background:var(--disp)}
.sdt{font:650 19px/1.12 var(--sans);letter-spacing:-.01em;color:var(--text);text-wrap:balance}.sds{margin:0;color:var(--dim);font:400 var(--fs-xs)/1.4 var(--sans)}.sdx:empty{display:none}
.sdskip{justify-self:start;border:0;background:none;color:var(--faint);font:500 var(--fs-2xs) var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:2px 0;cursor:pointer}.sdskip:hover{color:var(--text)}
.sdcur{position:fixed;left:50%;top:50%;z-index:96;width:22px;height:22px;pointer-events:none;transition:left .6s cubic-bezier(.3,.7,.2,1),top .6s cubic-bezier(.3,.7,.2,1),opacity .25s;filter:drop-shadow(0 2px 4px rgba(0,0,0,.7))}
.sdcur[hidden]{display:none}.sdcur.drag{transition:opacity .25s}.sdcur svg{transform:translate(-3.5px,-2.3px)}
.sdglow{box-shadow:0 0 0 2px var(--disp),0 0 26px rgba(255,178,0,.5)!important;animation:sdglow 1.1s ease-in-out infinite alternate;position:relative;z-index:2}
@keyframes sdglow{from{box-shadow:0 0 0 2px var(--disp),0 0 10px rgba(255,178,0,.3)}to{box-shadow:0 0 0 2px var(--disp),0 0 30px rgba(255,178,0,.6)}}.sdcur.off{opacity:0}.sdcur svg{width:22px;height:22px;fill:#fff;stroke:#07080a;stroke-width:1.2;stroke-linejoin:round}
.sdcur i{position:absolute;left:-11px;top:-11px;width:22px;height:22px;border-radius:50%;border:2px solid var(--disp);opacity:0}.sdcur.tap i{animation:sdtap .5s ease-out}
@keyframes sdtap{from{transform:scale(.3);opacity:1}to{transform:scale(1.6);opacity:0}}
body.sdemo #hudNote{visibility:hidden}.htour.hdemo svg circle{fill:currentColor}
@media (max-width:760px){.sdcap{padding:7px 10px 6px;gap:3px}.sdt{font-size:15px}.sds{font-size:11.5px}}
/* the overlay is #fdoor; body.fdoor marks the mode (a shared class would style both) */
body.fdoor{--fdR:318px;--fdB:212px}
#fdoor{position:fixed;inset:0;z-index:40;pointer-events:none}
#fdoor>*{pointer-events:auto}
body.fdoor .col,body.fdoor .gutter,body.fdoor #bar,body.fdoor #lanes,body.fdoor #lbar,body.fdoor #vbar,body.fdoor #toolHud,body.fdoor #zoomHud,body.fdoor .top,body.fdoor #mStrip,body.fdoor #mnav{display:none!important}
body.fdoor .main{grid-template-columns:1fr!important;margin:56px var(--fdR) var(--fdB) 12px;height:calc(100vh - 56px - var(--fdB))!important}
.fdtop{position:absolute;left:12px;right:12px;top:10px;height:38px;display:flex;align-items:center;gap:12px}
.fdbrand{display:flex;align-items:center;gap:8px}.fdname{color:var(--dim);font-size:var(--fs-m);white-space:nowrap}@media (max-width:760px){.fdname{display:none}}.fdlogo{width:30px;height:22px}.fdbrand .wm{font-size:15px}
.fdproj{font:500 var(--fs-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);background:rgba(255,255,255,.05);border-radius:999px;padding:5px 10px}.fdsp{flex:1}
.fdplay{position:absolute;right:12px;top:56px;bottom:var(--fdB);width:calc(var(--fdR) - 24px);background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-l);padding:12px;display:flex;flex-direction:column;gap:10px;overflow:auto}
.fdh{display:flex;align-items:center;gap:8px;font:500 var(--fs-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.fdknobs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.fdk{display:grid;justify-items:center;gap:3px;cursor:ns-resize;user-select:none;touch-action:none;padding:2px 0;border-radius:var(--r-m);outline:0}.fdk:focus-visible{box-shadow:inset 0 0 0 1px var(--acc)}
.fdk svg{width:54px;height:54px;overflow:visible}.fdk .trk{fill:none;stroke:rgba(236,236,231,.1);stroke-width:4;stroke-linecap:round}.fdk .val{fill:none;stroke:var(--disp);stroke-width:4;stroke-linecap:round}
.fdk .cap{fill:#141518;stroke:rgba(255,255,255,.08)}.fdk .ptr{stroke:var(--text);stroke-width:2;stroke-linecap:round}
.fdk output{font:500 var(--fs-s) var(--mono);color:var(--disp)}.fdk span{font:500 var(--fs-2xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.fdk.idle{opacity:.38}.fdk.idle output{color:var(--faint)}
.fdpad{position:relative;flex:1;min-height:120px;border-radius:var(--r-m);background:#050607;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 3px 12px rgba(0,0,0,.85);cursor:crosshair;touch-action:none;outline:0;
  background-image:linear-gradient(rgba(236,236,231,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(236,236,231,.05) 1px,transparent 1px);background-size:12.5% 12.5%}
.fdpad:focus-visible{box-shadow:inset 0 0 0 1px var(--acc)}.fdpad i{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--disp);box-shadow:0 0 14px rgba(255,178,0,.7)}
.fdh em{margin-left:auto;font-style:normal;color:var(--faint);letter-spacing:0}
.fdc{position:absolute;width:74px;padding:4px;border:0;border-radius:8px;background:rgba(20,21,24,.86);display:grid;gap:3px;cursor:pointer;z-index:1;text-align:left;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.fdc canvas{width:100%;aspect-ratio:16/9;border-radius:5px;display:block;background:#000}.fdc b{font:500 var(--fs-2xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fdc:hover{box-shadow:0 0 0 1px var(--disp)}.fdc:hover b{color:var(--text)}.fdc.tl{left:6px;top:6px}.fdc.tr{right:6px;top:6px}.fdc.bl{left:6px;bottom:6px}.fdc.br{right:6px;bottom:6px}
.fdc.hot{box-shadow:0 0 0 1.5px var(--disp),0 0 12px -2px rgba(255,178,0,.5)}.fdc.hot b{color:var(--disp)}
.fdpad{z-index:0}.fdpad>i{z-index:2}.fdchips{display:flex;gap:6px;flex-wrap:wrap}.fdchips .fdchip{border:0;border-radius:999px;padding:5px 10px;background:rgba(255,255,255,.06);color:var(--dim);font:500 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.fdchips .fdchip:hover:not([disabled]){color:var(--text)}.fdchips .fdchip[disabled]{opacity:.4;cursor:default}
.fdhint{margin:0;font-size:var(--fs-s);color:var(--faint);line-height:1.45}
.fdbottom{position:absolute;left:12px;right:12px;bottom:10px;height:calc(var(--fdB) - 20px);display:grid;grid-template-rows:auto 1fr auto;gap:6px}
.fdlbl{display:flex;align-items:baseline;gap:10px}.fdsub{font:500 var(--fs-2xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.fdpatches{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:8px;overflow-x:auto;scrollbar-width:thin;min-height:0}
.fdpatch{position:relative;display:grid;grid-template-rows:1fr auto;border:0;padding:0;border-radius:10px;overflow:hidden;cursor:pointer;background:#101113;text-align:left;color:var(--text);min-height:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 0 1px rgba(0,0,0,.7),0 2px 0 #0a0b0c;transition:transform .08s,box-shadow .15s}
.fdpatch canvas{width:100%;height:100%;min-height:0;object-fit:cover;display:block;background:#000}
.fdpatch span{padding:5px 9px 6px;display:grid;gap:1px}.fdpatch b{font-weight:500;font-size:var(--fs-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fdpatch em{font:500 var(--fs-2xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the ring sits on a layer above the thumbnail (an inset shadow would paint under it) */
.fdpatch::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:box-shadow .15s}
.fdpatch:hover::after,.fdpatch.aud::after{box-shadow:inset 0 0 0 1.5px var(--disp)}.fdpatch:hover,.fdpatch.aud{box-shadow:0 0 16px -4px rgba(255,178,0,.5),0 0 0 1px rgba(0,0,0,.7),0 2px 0 #0a0b0c}.fdpatch:active{transform:translateY(1px)}
.fdpatch.on::after{box-shadow:inset 0 0 0 2px var(--acc)}.fdpatch.on{box-shadow:0 0 18px -4px rgba(244,70,17,.6),0 0 0 1px rgba(0,0,0,.7),0 2px 0 #0a0b0c}.fdpatch.on b{color:var(--acc)}
.fdways{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.fdidea{display:flex;gap:6px;flex:1 1 320px;min-width:0}.fdidea input{flex:1;min-width:0}
.fdsheet{display:contents}
/* Small screens: the stage pins at the top and everything else scrolls in one sheet below it */
@media (max-width:900px){
  body.fdoor .main{margin:0!important;height:auto!important}
  #fdoor{background:var(--bg)}
  body.fdoor .stage{position:fixed!important;top:54px!important;left:8px!important;right:8px!important;height:40dvh!important;min-height:0!important;aspect-ratio:auto!important;max-width:none!important;z-index:41}
  .fdtop{position:absolute;top:8px}
  .fdsheet{display:flex;flex-direction:column;gap:12px;position:absolute;top:calc(62px + 40dvh);left:0;right:0;bottom:0;overflow-y:auto;padding:4px 8px 16px;overscroll-behavior:contain}
  .fdplay,.fdbottom{position:static;width:auto;height:auto}.fdplay{flex:none}.fdpad{min-height:220px;flex:none}
  .fdbottom{grid-template-rows:auto auto auto}.fdpatches{grid-auto-columns:150px;height:124px}.fdidea{flex-basis:100%}}
/* Recipe pads: rubber pads with a bevel, a raised edge, a press, and a backlight in the slot's color */
.keys .key{--pc:#F44611;border:0;border-radius:10px;background:radial-gradient(130% 90% at 50% 0%,#2a2c30,#18191c 72%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -3px 7px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.035),0 0 0 1px rgba(0,0,0,.7),0 2px 0 #0a0b0c,0 7px 12px -6px rgba(0,0,0,.8);
  transition:transform .08s,box-shadow .15s,background .2s}
.keys .key:hover{background:radial-gradient(130% 90% at 50% 0%,#2e3034,#1a1b1e 72%);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -3px 7px rgba(0,0,0,.55),inset 0 0 0 1px color-mix(in srgb,var(--pc) 32%,transparent),0 0 0 1px rgba(0,0,0,.7),0 2px 0 #0a0b0c,0 7px 12px -6px rgba(0,0,0,.8)}
.keys .key:active{transform:translateY(1.5px);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 4px rgba(0,0,0,.6),inset 0 0 0 1px color-mix(in srgb,var(--pc) 40%,transparent),0 0 0 1px rgba(0,0,0,.7),0 .5px 0 #0a0b0c}
/* Hover previews quietly (a hint of the key's color); an applied look lights its status LED in that color */
.keys .key.previewing{background:radial-gradient(130% 90% at 50% 0%,#303236,#1b1c1f 72%);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -3px 7px rgba(0,0,0,.55),inset 0 0 0 1px color-mix(in srgb,var(--pc) 28%,transparent),0 0 0 1px rgba(0,0,0,.7),0 2px 0 #0a0b0c,0 7px 12px -6px rgba(0,0,0,.8)}
.keys .key.previewing .led{background:color-mix(in srgb,var(--pc) 45%,#2a2c30)}
.keys .key.on{background:radial-gradient(130% 90% at 50% 0%,#2c2e32,#1a1b1e 72%);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -3px 7px rgba(0,0,0,.55),inset 0 0 0 1px color-mix(in srgb,var(--pc) 45%,transparent),0 0 0 1px rgba(0,0,0,.7),0 2px 0 #0a0b0c,0 7px 12px -6px rgba(0,0,0,.8)}
.keys .key.on .n{color:var(--text)}.key.on .led,.keys .key.on .led{background:var(--pc);box-shadow:0 0 7px color-mix(in srgb,var(--pc) 80%,transparent)}
/* Faceplate: grouped sections, LED readouts, faders and switches */
/* Pinned under the tabs: the LCD and a look's loupe */
#pLcd,.fpstick{position:sticky;top:var(--ptH,0px);z-index:5}
.fpdeck{border-radius:var(--r-m)}.fpdeck>.fpscreen[hidden]{display:none}
.fpscr{display:flex;gap:3px;margin-top:3px;padding:3px;border-radius:var(--r-m);background:#050607;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 3px 10px rgba(0,0,0,.85)}
.fpscr button{flex:1;height:22px;border:0;border-radius:5px;background:rgba(255,178,0,.03);color:rgba(255,178,0,.32);font:500 var(--fs-2xs) var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,178,0,.06);transition:color .15s,background .15s}
.fpscr button:hover{color:rgba(255,178,0,.7)}.fpscr button.on{color:var(--disp);background:rgba(255,178,0,.1);text-shadow:0 0 6px rgba(255,178,0,.6);box-shadow:inset 0 0 0 1px rgba(255,178,0,.35)}
.fpscreen{position:relative}.lpin{position:absolute;left:12px;bottom:6px;height:16px;padding:0 7px;border:0;border-radius:4px;background:rgba(236,236,231,.08);color:rgba(236,236,231,.6);font:500 var(--fs-2xs) var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;z-index:2}
.lpin[aria-pressed="true"]{background:rgba(255,178,0,.16);color:var(--disp)}.lpin:hover{color:var(--text)}
/* pinned strip: the tab bar is a full-width solid band, and pinned screens cover the gutters beside them, so knobs never show through while scrolling */
.params>.ptabs{margin:0 0 4px;padding:5px 13px 7px;background:var(--panel);box-shadow:none;border-radius:0}.params>.ptabs::before{content:"";position:absolute;inset:2px 10px 4px;border-radius:var(--r-m);box-shadow:inset 0 0 0 1px var(--hair);pointer-events:none}
#pLcd,.fpstick{--pinside:-10px 0 0 var(--panel),10px 0 0 var(--panel),-5px 0 0 var(--panel),5px 0 0 var(--panel)}#pLcd{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 2px 8px rgba(0,0,0,.8),var(--pinside)}.fpstick{box-shadow:0 8px 14px -6px rgba(0,0,0,.9),var(--pinside)}
/* Lens filter wheel */
.lensw{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px 4px}
.lensf{display:grid;justify-items:center;align-content:start;gap:4px;border:0;background:none;padding:3px 0;cursor:pointer;color:var(--dim);font:500 var(--fs-2xs) var(--mono);letter-spacing:.06em;text-transform:uppercase;border-radius:8px}
.lensf>i{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 2px #07080a,0 0 0 3px rgba(255,255,255,.12),inset 0 1px 2px rgba(255,255,255,.25),0 3px 8px rgba(0,0,0,.6)}
.lensf>span{max-width:100%;text-align:center;line-height:1.25;overflow-wrap:anywhere}
.lensf:hover{color:var(--text)}.lensf:hover>i{box-shadow:0 0 0 2px #07080a,0 0 0 3px rgba(255,178,0,.55),inset 0 1px 2px rgba(255,255,255,.25),0 3px 8px rgba(0,0,0,.6)}
.lensf.on{color:var(--disp)}.lensf.on>i{box-shadow:0 0 0 2px #07080a,0 0 0 3.5px var(--disp),0 0 14px rgba(255,178,0,.3)}
/* Film rolls */
.rollsec{display:grid;gap:8px;padding:8px}.rollsec>.fph{padding:0}
.rolls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.roll{position:relative;display:grid;border:0;padding:0;border-radius:8px;overflow:hidden;background:#07080a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);cursor:pointer;text-align:left;color:var(--dim)}
.roll>i{display:block;height:26px}.roll>span{padding:4px 6px 5px;font:500 var(--fs-2xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;line-height:1.3}
.roll b{display:block;font-size:var(--fs-2xs);letter-spacing:0;color:var(--text);font-weight:500;line-height:1.15;overflow-wrap:break-word}.roll em{font-style:normal}
.roll:hover{box-shadow:inset 0 0 0 1px rgba(255,178,0,.5)}.roll.on{box-shadow:0 0 0 1.5px var(--disp),0 0 14px rgba(255,178,0,.22)}.roll.on b{color:var(--disp)}
.roll.mine b{color:var(--disp)}.roll .pdel{position:absolute;top:3px;right:5px;font:500 11px var(--mono);color:rgba(255,255,255,.7);text-shadow:0 1px 2px #000}
.roll.rollnew>i{background:repeating-linear-gradient(45deg,#1b1c1d 0 6px,#232526 6px 12px)}.roll.rollnew{opacity:.7}.roll.rollnew:hover{opacity:1}
.rollcat{grid-column:1/-1;margin:4px 0 -2px;font:500 var(--fs-2xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}.rollcat:first-child{margin-top:0}
.rollhint{margin:0;font:500 var(--fs-2xs) var(--mono);letter-spacing:0;color:var(--faint)}
/* Looks re-org: group letters, look codes, presets */


.lkw{position:relative;display:flex;min-width:0}.lkw>.chip{flex:1;min-width:0}
.pcar{position:absolute;right:24px;top:50%;transform:translateY(-50%);border:0;background:rgba(255,255,255,.06);color:var(--faint);font:500 var(--fs-2xs) var(--mono);border-radius:999px;padding:2px 6px;cursor:pointer;min-width:18px}
.pcar:hover{color:var(--text)}.pcar[aria-expanded="true"]{color:var(--disp);background:rgba(255,178,0,.12)}
.cpre{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px;padding:4px 0 6px 10px;margin:0 0 2px;border-left:1px solid rgba(255,178,0,.3)}
.chip.pchip{font-size:var(--fs-xs);padding:4px 8px}.chip.pchip.mine{color:var(--disp)}.pdel{margin-left:6px;color:var(--faint)}.pdel:hover{color:var(--acc)}
.presec{padding:6px 8px}.presbar{display:flex;gap:6px;align-items:center}.presbar select{flex:1;min-width:0}
.presbar input{flex:1;min-width:0;font:400 var(--fs-s) var(--sans);background:#07080a;color:var(--text);border:1px solid var(--hair);border-radius:var(--r-s);padding:5px 7px}
/* Tone engine inks */
.tonesec{display:grid;gap:8px;padding:8px}.tonesec>.fph{padding:0}
.tswatch{display:flex;flex-wrap:wrap;gap:6px}.tswc{display:flex;align-items:center;gap:6px;cursor:pointer}
.tswc input[type=color]{width:30px;height:24px;padding:0;border:1px solid var(--hair);border-radius:var(--r-s);background:none;cursor:pointer}
.tswc i{display:block;width:22px;height:22px;border-radius:var(--r-s);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}.tswc span{font:500 var(--fs-xs) var(--mono);color:var(--dim);text-transform:uppercase;letter-spacing:.12em}
/* Claude motion layers */
iframe.mosb{position:fixed;left:-10000px;top:0;width:8px;height:8px;border:0;opacity:0;pointer-events:none}
.mosec{display:grid;gap:10px;padding:8px 8px 10px}.mosec>.fph{padding:0 0 2px}.mo-ms{margin-left:6px;color:var(--faint);font-weight:400;letter-spacing:0}
.mo-words{display:grid;gap:6px}.mo-words:empty{display:none}.mo-row{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:8px}
.mo-row input[type=text]{min-width:0;font:400 var(--fs-s) var(--sans);background:#07080a;color:var(--text);border:1px solid var(--hair);border-radius:var(--r-s);padding:5px 7px}
.mo-row input[type=color]{width:44px;height:24px;padding:0;border:1px solid var(--hair);border-radius:var(--r-s);background:none}
.mosec .ufxask input{flex:1;min-width:0;font:400 var(--fs-s) var(--sans);background:#07080a;color:var(--text);border:1px solid var(--hair);border-radius:var(--r-s);padding:5px 7px}
/* Tools */
.toolpick{position:sticky;top:0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 10px 8px;padding:8px 8px 8px 12px;border-radius:var(--r-m);background:#1c1608;box-shadow:inset 0 0 0 1px rgba(255,178,0,.45);font-size:var(--fs-s);line-height:1.35;color:var(--text)}
.toolpick b{color:var(--disp);font-weight:600}.params.kpic>#toolPick{order:-10}
body.toolpick #params :is(.knob,.fader):not(.toolsec *){cursor:copy;outline:1px dashed rgba(255,178,0,.35);outline-offset:3px;border-radius:var(--r-m)}
body.toolpick #params :is(.knob,.fader).intool:not(.toolsec *){outline:1.5px solid var(--disp)}
#params :is(.knob,.fader).intool>span::before{content:"◆ ";color:var(--disp)}
.toolsec{display:grid;gap:12px;padding:8px 8px 10px}.toolsec>.fph{padding:0}
.toolgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:12px 6px}
.tctl{display:grid;justify-items:center;align-content:start;gap:4px;min-width:0}
.tsrc{max-width:100%;font:400 var(--fs-xs) var(--mono);color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tcedit{display:grid;gap:4px;width:100%}.tcedit input{width:100%;box-sizing:border-box;font:400 var(--fs-s) var(--sans);background:#07080a;color:var(--text);border:1px solid var(--hair);border-radius:var(--r-s);padding:3px 5px}
.trange{display:grid;grid-template-columns:1fr 1fr;gap:4px}.trange label{display:grid;gap:2px;font:500 var(--fs-2xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.tmv{display:flex;justify-content:center;gap:2px}.tmv .ib{width:24px;height:22px}
.mod.toolrow .idx{color:var(--disp)}.mod.toolrow .sub{color:var(--disp);opacity:.8}
/* Claude effects */
.ufxsec{display:grid;gap:8px;padding:8px 8px 10px}.ufxsec>.fph{padding:0 0 2px}
.ufxwhat{margin:0;font-size:var(--fs-s);color:var(--dim);line-height:1.4}.ufxerr{margin:0;font-size:var(--fs-s);color:var(--acc);white-space:pre-wrap}
.ufxask{display:flex;gap:6px;align-items:center}.ufxask input{flex:1;min-width:0;font:400 var(--fs-s) var(--sans);letter-spacing:0;text-transform:none}.ufxask input::placeholder{text-transform:none;letter-spacing:0}
.ufxst{margin:0;min-height:0}.ufxst:empty{display:none}.ufxrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ufxcode summary{cursor:pointer;font:500 var(--fs-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:2px 0}.ufxcode summary:hover{color:var(--text)}
.ufxcode textarea{width:100%;box-sizing:border-box;margin:6px 0;font:400 11px/1.45 var(--mono);color:var(--text);background:#07080a;border:1px solid var(--hair);border-radius:var(--r-s);padding:8px;resize:vertical;tab-size:2}
.ufxcst{color:var(--acc);white-space:pre-wrap}
.chip.ufxnew{color:var(--disp);box-shadow:inset 0 0 0 1px rgba(255,178,0,.35);justify-content:flex-start;align-items:center;gap:0}.chip.ufxnew:hover{box-shadow:inset 0 0 0 1px rgba(255,178,0,.7)}
/* Layer tab for picture layers: LCD, then Transform, then the layer's own rows as instrument strips */
.params.kpic{display:flex;flex-direction:column}.params.kpic>*{flex:none}
.params.kpic>#lockBan{order:-10}.params.kpic>.ph{order:-9}.params.kpic>#pTabs{order:-8}.params.kpic>#pLcd{order:-7}.params.kpic>#faceplate{order:-6}.params.kpic>#layerCtl{order:-9}
.plcd{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:center;margin:4px 10px 8px;padding:8px 10px 8px 6px;border-radius:var(--r-m);background:#07080a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 2px 8px rgba(0,0,0,.8);font:500 var(--fs-xs) var(--mono);color:var(--disp);text-shadow:0 0 6px rgba(255,178,0,.45);overflow:hidden}
.plcd::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px)}
.plcd.dim{filter:saturate(.3) brightness(.7)}
.lcdmap{width:64px;height:64px;overflow:visible}.lcdmap .lf{fill:rgba(255,178,0,.035);stroke:rgba(255,178,0,.4);stroke-width:1;stroke-dasharray:2 2}
.lcdmap .lp{fill:rgba(255,178,0,.2);stroke:var(--disp);stroke-width:1.2;stroke-linejoin:round;filter:drop-shadow(0 0 3px rgba(255,178,0,.6))}.lcdmap .lc{fill:var(--disp)}
.lcdtx{min-width:0;display:grid;gap:5px}
.lcd1{display:flex;align-items:baseline;justify-content:space-between;gap:8px;text-transform:uppercase;letter-spacing:.12em}.lcd1 b{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lcd1 span{flex:none;opacity:.55}
.lcd2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.lcd2 span{display:grid;gap:1px;min-width:0}.lcd2 i{font-style:normal;font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;opacity:.5}
.lcd2 b{font:500 var(--fs-m) var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.lcd3{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;opacity:.85;letter-spacing:0}.lcd3 span:empty{display:none}#lcdFl{display:flex;flex-wrap:wrap;gap:4px}
.lcd3 em{font-style:normal;text-transform:uppercase;letter-spacing:.12em;font-size:var(--fs-2xs);padding:1px 4px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(255,178,0,.45)}
.xfq{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:2px 6px 8px;border-radius:var(--r-m);background:#07080a;padding:3px;gap:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 2px 6px rgba(0,0,0,.7)}
.xfq button{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:linear-gradient(#2c2f33,#1d1f22);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset -1px 0 0 rgba(0,0,0,.6);padding:7px 2px 6px;font:500 var(--fs-xs) var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);cursor:pointer;white-space:nowrap}
.xfq button:first-child{border-radius:var(--r-s) 0 0 var(--r-s)}.xfq button:last-child{border-radius:0 var(--r-s) var(--r-s) 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.09)}
.xfq button:hover{color:var(--text);background:linear-gradient(#34383c,#222528)}.xfq button:active{background:linear-gradient(#1d1f22,#2a2d30);box-shadow:inset 0 2px 4px rgba(0,0,0,.7)}
.xfq button:focus-visible{outline:1px solid rgba(244,70,17,.6);outline-offset:-1px}
.xfq svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}.xfq svg .fq2{stroke-dasharray:1.6 1.6}
.xfq i{position:absolute;top:5px;right:6px;width:4px;height:4px;border-radius:50%;background:#2b1a13;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
.xfq button[aria-pressed="true"]{color:var(--disp);text-shadow:0 0 6px rgba(255,178,0,.55);background:linear-gradient(#1b1d20,#26292c);box-shadow:inset 0 2px 5px rgba(0,0,0,.75)}.xfq button[aria-pressed="true"] i{background:var(--disp);box-shadow:0 0 6px 1px rgba(255,178,0,.85)}
.xfq button[aria-pressed="true"] svg .fq2{stroke-dasharray:none;fill:currentColor;fill-opacity:.3}
.xfq button.blink i{animation:xfqblink .5s ease-out}@keyframes xfqblink{0%{background:var(--disp);box-shadow:0 0 8px 2px rgba(255,178,0,.9)}100%{background:#2b1a13;box-shadow:none}}
.params.kpic :is(#clipRow,#dimRow){display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 10px 6px;padding:6px 6px 6px 10px;border-radius:var(--r-m);background:rgba(255,255,255,.018);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.params.kpic :is(#clipRow,#dimRow)>.lbl{flex:none}.params.kpic :is(#clipRow,#dimRow) .seg{flex:0 1 64%}
.params.kpic :is(#imgLayer,#stkRow,#rbField){margin:0 10px 6px;padding:8px 10px;border-radius:var(--r-m);background:rgba(255,255,255,.018);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.params.kpic :is(#clipRow,#dimRow,#stkRow,#rbField) .seg{background:#07080a;border-radius:var(--r-m);padding:3px;gap:0;flex-wrap:nowrap;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 2px 6px rgba(0,0,0,.7)}
.params.kpic :is(#clipRow,#dimRow,#stkRow,#rbField) .seg button{flex:1 1 0;border-radius:var(--r-s);color:var(--faint);padding:6px 8px;white-space:nowrap}
.params.kpic :is(#clipRow,#dimRow,#stkRow,#rbField) .seg button[aria-pressed="true"]{background:linear-gradient(#3b3f43,#25282b);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 5px rgba(0,0,0,.55);color:var(--disp);text-shadow:0 0 6px rgba(255,178,0,.6)}
.params.kpic :is(#stkRow,#rbField) .trow .seg{flex:0 1 50%}
.faceplate{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:4px 10px 6px}
/* narrow Tune panel: sections never grow past the panel; knob labels shorten instead of pushing the row wider */
.faceplate>*,.srcpanel>*,.titlepanel>*{min-width:0}.fprow .knob>span{max-width:100%;white-space:normal;line-height:1.2;overflow-wrap:break-word}.fprow .fader{min-width:0;max-width:100%}
.fpscreen{border-radius:var(--r-m);background:#050607;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 3px 12px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.04);padding:3px;overflow:hidden}
.fpscreen canvas{display:block;width:100%;height:132px;border-radius:var(--r-m)}.fpscreen.sec canvas{height:112px}
.fpsec{border-radius:var(--r-m);background:rgba(255,255,255,.018);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);padding:6px 4px 2px}
.fph{display:flex;align-items:center;gap:7px;font:500 var(--fs-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:1px 6px 2px}
.fph::before{content:""}
.fpsec.hasl>.fph::before{visibility:hidden} /* its on/off button sits here */
button.fph{width:100%;border:0;background:none;cursor:pointer;text-align:left;border-radius:var(--r-s);padding:3px 6px 4px}button.fph:hover{color:var(--text)}button.fph:hover .fpchev{color:var(--text)}
.fpsec.idle .fph::before,.fpsec.idle .fpadd .fph::before,.fpsec.collapsed .fph::before{background:var(--lens-off);box-shadow:var(--lens-ring-off)}
.seclight{position:absolute;left:4px;top:3px;width:17px;height:25px;border:0;padding:0;background:none;cursor:pointer;display:grid;place-items:center;border-radius:var(--r-s);z-index:1}
.seclight:hover{background:rgba(255,255,255,.05)}

.isec.byp>.isb,.fpsec.byp>.fprow{opacity:.5;filter:saturate(.35)}
.fpsec.idle>.fph{color:var(--faint)}.fpsec:not(.idle)>.fph{color:var(--dim)}
.fpchev{margin-left:auto;font:500 var(--fs-s) var(--mono);color:var(--faint);letter-spacing:0}
.fpsec.shut{padding:6px 4px 3px}
.fprow{display:flex;flex-wrap:wrap;align-items:flex-end}
.fprow .knob{flex:1 1 25%}.fprow .knob.hero{flex-basis:34%}.knob.hero svg{width:68px;height:68px}.knob.hero output{font-size:var(--fs-m)}
.knob output,.fader output{background:#07080a;color:var(--disp);text-shadow:0 0 6px rgba(255,178,0,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);border-radius:var(--r-s);padding:1px 6px}
.fprow .fader.wide{flex:1 1 58%;min-width:168px}
.fader{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"lbl lbl lbl" "e0 trk e1";align-items:center;column-gap:8px;row-gap:6px;padding:8px 8px 10px;border-radius:var(--r-m);touch-action:none;cursor:ew-resize;user-select:none;-webkit-user-select:none;outline:0}
.fader:hover,.fader:focus-visible{background:rgba(236,236,231,.03)}.fader:focus-visible{box-shadow:inset 0 0 0 1px rgba(244,70,17,.5)}
/* The readout shares row 1 with the label across every column, so a longer value (1.35× wide) never resizes the track */
.fader .flbl{grid-area:lbl}.fader output{grid-row:1;grid-column:1/-1;justify-self:end;font:500 var(--fs-s) var(--mono);font-variant-numeric:tabular-nums;cursor:text}
.fader>i:nth-of-type(1){grid-area:e0}.fader>i:last-child{grid-area:e1}
.fe{font:500 var(--fs-xs) var(--mono);font-style:normal;color:var(--faint)}
.flbl{font:400 var(--fs-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.ftrack{grid-area:trk;position:relative;height:24px}
.fgroove{position:absolute;left:0;right:0;top:10px;height:4px;border-radius:var(--r-xs);background:#07080a;box-shadow:inset 0 1px 2px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.05)}
.fticks{position:absolute;left:0;right:0;top:19px;height:4px;background:linear-gradient(90deg,var(--faint) 1px,transparent 1px) 0 0/10% 100% repeat-x;opacity:.5}
.fzero{position:absolute;left:50%;top:3px;width:1px;height:20px;background:var(--dim)}
.ffill{position:absolute;top:10px;height:4px;border-radius:var(--r-xs);background:var(--disp);box-shadow:0 0 8px rgba(255,178,0,.6)}
.fcap{position:absolute;top:2px;width:12px;height:20px;margin-left:-6px;border-radius:var(--r-xs);background:linear-gradient(#e2e2dc,#9c9c96);box-shadow:0 2px 4px rgba(0,0,0,.6),inset 0 -2px 0 rgba(0,0,0,.25)}
.fcap::after{content:"";position:absolute;left:5px;top:4px;bottom:4px;width:2px;background:rgba(0,0,0,.45);border-radius:var(--r-xs)}
.fader.hue .ftrack{height:22px;border-radius:var(--r-s);background:linear-gradient(90deg,hsl(0 90% 55%),hsl(60 90% 52%),hsl(120 80% 48%),hsl(180 85% 50%),hsl(240 90% 62%),hsl(300 85% 58%),hsl(360 90% 55%));box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}
.fader.hue .ftrack::after{content:"";position:absolute;inset:0;border-radius:var(--r-s);background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 55%,rgba(0,0,0,.25));pointer-events:none} /* a smooth gradient under glass */
.fader.hue .ffill{display:none}.fader.hue .fcap{top:-3px;height:28px;width:10px;margin-left:-5px;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.6);z-index:1}.fader.hue .fcap::after{display:none}
.fpsw{flex:1 1 40%;display:grid;gap:6px;justify-items:stretch;padding:6px 8px 10px}.fpsw .flbl{text-align:center}
/* Two-step switches (Off/On, Add/Screen): compact and centered over their label, two equal halves, never a long empty track */
.fpsw.two{justify-items:center}.fpsw.two>.seg{display:grid;grid-template-columns:1fr 1fr;width:auto;min-width:132px;max-width:100%}.fpsw.two>.seg>button{justify-content:center;text-align:center}
.fpsw.leds{flex-basis:56%}.fpsw.wide{flex-basis:100%}
/* momentary keys (CRT Degauss, Channel) sit side by side at key size; the key carries the name */
#fsBtn .fsout{display:none}#fsBtn[aria-pressed="true"] .fsin{display:none}#fsBtn[aria-pressed="true"] .fsout{display:inline}
#fsBtn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.stage:fullscreen{background:#000;width:100vw;height:100vh}.stage:-webkit-full-screen{background:#000;width:100vw;height:100vh}
.fpsw>.asciitxt{grid-column:1/-1;width:100%;min-width:0;box-sizing:border-box;margin-top:2px;padding:6px 8px;border:0;border-radius:5px;background:#07080a;color:var(--disp);font:500 var(--fs-s) var(--mono);box-shadow:inset 0 1px 3px rgba(0,0,0,.7)}
.fpsw>.stampdt{color-scheme:dark;min-height:30px}.fpsw>.stampdt::-webkit-calendar-picker-indicator{filter:invert(.8) sepia(.2);cursor:pointer}
.fpsw.pulse{flex:1 1 34%;justify-items:center;align-content:start}.fpsw.pulse>.kbank{min-width:84px}.fpsw.pulse>.kbank>.kc{min-height:34px}
.fpscreen canvas.pad{outline:0}.fpscreen canvas.pad:focus-visible{box-shadow:inset 0 0 0 1px rgba(0,137,182,.8)}
.lsel{display:flex;gap:4px}
.lsel button:focus-visible{outline:1px solid rgba(244,70,17,.6);outline-offset:1px}
.knob span{font:400 var(--fs-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-align:center}
/* One knob everywhere: a thin value arc that glows orange at rest, the boxed amber readout, and the control kit's labels (Geist Mono, a touch heavier and more open) */
.knob .kt{stroke:#26292b;stroke-width:1.45}
.knob .kv,.knob:hover .kv,.knob:active .kv,.knob:focus-visible .kv{stroke:var(--acc);stroke-width:1.45;filter:drop-shadow(0 0 1.5px rgba(244,70,17,.6))}
.knob output,.fader output{font-family:var(--mono-ui);font-stretch:normal}
.knob span,.flbl{font:500 9.5px var(--mono-ui);font-stretch:normal;letter-spacing:.12em}

.params.off .kv{stroke:var(--faint)}
.params.off output{color:var(--dim)}
.hint{margin:0;padding:2px 14px 10px;color:var(--faint);font-size:var(--fs-s)}
.layer-ctl{border-top:1px solid var(--hair);padding:10px 14px 12px;display:grid;gap:6px}

.field{display:grid;gap:6px;min-width:0}
.field select{width:100%}

input[type=range]{flex:1;min-width:0;accent-color:var(--acc);height:20px}

.empty{padding:6px 14px 18px;color:var(--dim);font-size:var(--fs-m);margin:0}
.srcpanel{display:grid;gap:12px;padding:4px 8px 14px}
.gens{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.gbtn{border:1px solid transparent;background:var(--bg);border-radius:var(--r-m);padding:9px 9px 8px;text-align:left;display:grid;gap:4px;min-width:0}
.gbtn b{font-weight:500;font-size:var(--fs-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gbtn span{font:400 var(--fs-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gbtn:hover{background:#141618}
.gbtn[aria-pressed="true"]{border-color:var(--acc);background:#141618}
.srcpanel .knobs{padding:0}
.pals{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.pal{border:1px solid transparent;background:var(--bg);border-radius:var(--r-m);padding:4px;display:grid;grid-template-columns:repeat(4,1fr);height:26px;gap:0;overflow:hidden}
.pal i{display:block;height:100%}
.pal[aria-pressed="true"]{border-color:var(--text)}
.words{width:100%;background:var(--bg);border:1px solid var(--hair);border-radius:var(--r-m);padding:9px 10px;font:500 var(--fs-m) var(--mono);letter-spacing:.12em;text-transform:uppercase}
.src-go{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.src-go .btn{padding:10px}
.seedline{display:flex;justify-content:space-between;padding:0 2px}
.logo-row{display:grid;grid-template-columns:auto repeat(3,1fr);gap:5px}
.logo-row .btn{padding:8px 10px;font-size:var(--fs-m)}
.lsample{border:1px solid transparent;background:var(--bg);border-radius:var(--r-m);padding:6px 4px;font:600 var(--fs-s) var(--mono);letter-spacing:.06em;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lsample[aria-pressed="true"]{border-color:var(--acc);color:var(--text)}
.gallery{position:absolute;inset:0;z-index:2;background:rgba(10,10,10,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;flex-direction:column;gap:10px;padding:52px 16px 14px;overflow:auto}
.gal-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.gal-head .grp{display:flex;align-items:center;gap:10px;font-size:var(--fs-m);color:var(--dim)}
.gal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-content:start}
.gcell{border:1px solid var(--hair);background:var(--bg);border-radius:var(--r-m);padding:0;overflow:hidden;display:grid;text-align:left}
.gcell:hover{border-color:var(--ral7035)}
.gcell canvas{width:100%;display:block;background:#000}
.gcell span{padding:6px 8px;font:400 var(--fs-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcell span b{color:var(--text);font-weight:500}
.pop button.row{width:100%;border:0;background:none;text-align:left;cursor:pointer}
.pop .row .tag.go{color:var(--bg);background:var(--acc)}
.xstatus{margin:6px 10px 4px;font-size:var(--fs-m);color:var(--text);min-height:1.4em}
.xbar{height:3px;border-radius:var(--r-xs);background:var(--ctl);margin:0 10px 6px;overflow:hidden}
.xbar i{display:block;height:100%;width:0;background:var(--acc);transition:width .1s}
.modal{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.7);display:grid;place-items:center;padding:16px}
.modal-card{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-l);padding:14px;display:grid;gap:10px;max-width:min(560px,100%)}
.modal-card img{max-width:100%;max-height:60vh;border-radius:var(--r-s);background:#000}
.modal-card p{margin:0;color:var(--dim);font-size:var(--fs-m)}
@media (max-width:700px){.gal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.titlepanel{display:grid;gap:12px;padding:4px 14px 14px}
.titlepanel textarea{min-height:52px;font:600 var(--fs-l) var(--sans);resize:none}
.titlepanel input.words{text-transform:none;letter-spacing:.02em}
.treats{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.trow{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.trow .seg button{padding:5px 10px}
.tcolors{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tcol.more{background:var(--ctl);color:var(--dim);font:500 var(--fs-l) var(--mono);line-height:1}.tcol.more:hover{color:var(--text)}.tcol[aria-pressed=true]{box-shadow:0 0 0 1.5px var(--acc)}
.tcolsec{display:flex;flex-direction:column;gap:8px}
.mgal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.mtile{display:flex;flex-direction:column;gap:4px;border:0;padding:4px;border-radius:var(--r-m);background:var(--ctl);cursor:pointer;min-width:0}
.mtile canvas{width:100%;aspect-ratio:16/9;border-radius:var(--r-s);display:block}.mtile span{font-size:var(--fs-s);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;padding:0 2px}
.mtile:hover{background:var(--ctl-hi)}.mtile[aria-pressed=true]{box-shadow:inset 0 0 0 1.5px var(--acc)}.mtile[aria-pressed=true] span{color:var(--text)}
.mkits{display:flex;gap:6px;flex-wrap:wrap}.micropanel .trow{align-items:flex-end;gap:8px}.micropanel{display:grid;padding:4px 8px 14px}.fillui{flex:1 1 100%;display:flex;flex-direction:column;gap:7px;min-width:0}.fillseg{align-self:flex-start}.crow.two{grid-template-columns:repeat(2,minmax(0,1fr))}.fillui .fader{padding:6px 2px 8px}.crow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.paledit{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:6px;margin-top:8px;align-items:stretch}
.cchip{display:flex;align-items:center;gap:7px;min-width:0;border:0;border-radius:var(--r-m);padding:5px 7px;background:var(--ctl);text-align:left;cursor:pointer}.cchip:hover{background:var(--ctl-hi)}
.cchip i{flex:none;width:18px;height:18px;border-radius:var(--r-s);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.cchip span{display:flex;flex-direction:column;min-width:0;font-size:var(--fs-s);color:var(--dim);line-height:1.25}.cchip span b{font:500 var(--fs-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
.cchip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cchip.mini{padding:5px 6px;gap:5px}.cchip.mini span{font-size:0}.cchip.mini span b{letter-spacing:.12em}
.ralpop{position:fixed;z-index:60;width:252px;padding:10px;border-radius:var(--r-l);background:rgba(22,24,26,.72);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);box-shadow:var(--gl-sh)}
.ralpop .bhint{font:500 var(--fs-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:0 2px 8px}
.ralgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}.ralgrid button{aspect-ratio:1;border:0;border-radius:var(--r-s);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);cursor:pointer;padding:0}
.ralgrid button:hover,.ralgrid button:focus-visible{outline:1.5px solid var(--text);outline-offset:1px}.ralgrid button[aria-pressed=true]{outline:1.5px solid var(--acc);outline-offset:1px}
.ralfoot{display:flex;align-items:center;gap:6px;margin-top:9px}.ralname{flex:1;min-width:0;font-size:var(--fs-s);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ralany{position:relative;overflow:hidden}.ralany input{position:absolute;inset:0;opacity:0;cursor:pointer}
.tcol{width:26px;height:26px;border-radius:var(--r-m);border:2px solid var(--panel);box-shadow:0 0 0 1px var(--hair);padding:0}
.tcol[aria-pressed="true"]{box-shadow:0 0 0 2px var(--text)}
.titlepanel .knobs{padding:0}
.mod.title .idx{color:var(--acc)}
.ttiming{margin:8px 0 10px;padding:10px;border-radius:var(--r-l);background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.isec{padding:6px 4px 4px}.isec .isb{display:grid;gap:12px;padding:6px 6px 8px}.isec.shut{padding:3px 4px}.isec.shut .isb{display:none}
.isec .ttiming{margin:0;padding:0;background:none;box-shadow:none}.isec .ttiming .tth>.lbl{display:none}.isec .ttiming .tth{justify-content:flex-end;margin-bottom:6px}
.lbl.dup{display:none}.titlepanel,.micropanel,.srcpanel{gap:8px}
.layer-ctl{margin:0 0 8px;border-top:0;border-radius:0;background:none;box-shadow:none;padding:0 14px}
.layer-ctl>.lbl{display:flex;align-items:center;gap:7px;font:500 var(--fs-xs) var(--mono);letter-spacing:.12em;color:var(--dim)}

.ttiming .tth{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.ttiming .field{margin-bottom:8px}
.ttbar{position:relative;height:28px;border-radius:var(--r-m);background:#07080a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);overflow:hidden;margin-bottom:10px}
.ttbar .tz{position:absolute;top:0;bottom:0}.ttbar .tz.life{top:12px;bottom:12px;border-radius:var(--r-xs);background:rgba(236,236,231,.16)}
.ttbar .tz.in{background:linear-gradient(90deg,rgba(250,210,1,.06),rgba(250,210,1,.5));box-shadow:inset -1.5px 0 0 var(--warm)}
.ttbar .tz.out{background:linear-gradient(90deg,rgba(0,137,182,.5),rgba(0,137,182,.06));box-shadow:inset 1.5px 0 0 var(--cool)}
.ttbar .tph{position:absolute;top:0;bottom:0;width:1.5px;margin-left:-.75px;background:#ECECE7;box-shadow:0 0 6px rgba(236,236,231,.6)}
.ttbar b{position:absolute;top:2px;font:500 var(--fs-xs) var(--mono);color:rgba(236,236,231,.35)}.ttbar .tl0{left:5px}.ttbar .tl1{right:5px}
.tbuild{display:flex;flex-wrap:wrap;gap:4px}
.tbuild button{border:0;border-radius:var(--r-m);padding:5px 8px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--hair);color:var(--dim);font:inherit;font-size:var(--fs-s);cursor:pointer}
.tbuild button:hover{color:var(--text)}.tbuild button[aria-pressed=true]{color:var(--acc);background:rgba(244,70,17,.09);box-shadow:inset 0 0 0 1px rgba(244,70,17,.7)}
.tled{display:flex;align-items:center;gap:7px;border:0;background:none;padding:2px 0 6px;cursor:pointer}.tled .led{width:7px;height:7px}.tled:hover .lbl{color:var(--text)}
.tpaths{display:grid;grid-template-columns:repeat(5,1fr)}.tpaths button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;font-size:var(--fs-xs)}
.tpaths svg{width:24px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
#tPathKnobs{margin-top:6px}
.djsec{display:grid;gap:8px}.djsec .knobs{margin:0}
.djmeter{display:grid;grid-template-columns:repeat(16,1fr);gap:2px;height:6px}.djmeter i{border-radius:1px;background:rgba(255,255,255,.07)}
.djmeter i.on{background:var(--led);box-shadow:0 0 6px color-mix(in srgb,var(--led) 60%,transparent)}.djmeter i:nth-child(n+12).on{background:var(--warm);box-shadow:0 0 6px color-mix(in srgb,var(--warm) 60%,transparent)}.djmeter i:nth-child(n+15).on{background:var(--warn);box-shadow:0 0 6px color-mix(in srgb,var(--warn) 60%,transparent)}
.djtempo{display:flex;align-items:center;gap:6px}.djtempo input{width:72px;height:28px;padding:0 8px;border:0;border-radius:var(--r-m);background:#0B0C0D;box-shadow:inset 0 0 0 1px var(--hair);color:var(--disp);font:600 var(--fs-b) var(--mono);font-variant-numeric:tabular-nums;text-shadow:0 0 8px color-mix(in srgb,var(--disp) 55%,transparent)}
.djtempo .btn{padding:5px 9px;font-size:var(--fs-s)}.djtempo .lbl{margin-right:2px}
.djbeats{display:grid;grid-template-columns:repeat(7,1fr)}#djBfx .djch{display:grid;grid-template-columns:repeat(4,1fr)}#djBfx .djch button{padding:5px 2px}.djbeats button{padding:5px 0;font:600 var(--fs-s) var(--mono)}
.djlv{display:flex;align-items:center;gap:12px}.djon{display:flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:0;border-radius:var(--r-m);background:#141618;box-shadow:inset 0 0 0 1px var(--hair),0 2px 0 rgba(0,0,0,.5);color:var(--dim);font:700 var(--fs-s) var(--mono);letter-spacing:.12em;cursor:pointer}
.djon.on{color:var(--text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 70%,transparent),0 0 18px -4px color-mix(in srgb,var(--acc) 70%,transparent)}.djon.on .led{background:var(--acc);box-shadow:0 0 8px var(--acc)}
.djbars{display:grid;gap:4px}.djloop{display:grid;grid-template-columns:repeat(4,1fr)}.djprog{display:flex;gap:6px;flex-wrap:wrap}.djprog .btn{display:flex;align-items:center;gap:6px;padding:6px 10px;font-size:var(--fs-s)}
.djprog .led.on{background:var(--warn);box-shadow:0 0 8px var(--warn)}
.audscreens{display:grid;gap:6px}#audWave{cursor:pointer}
.dsrcrow{display:grid;gap:6px;margin-top:10px}#dsrcSeg{display:grid;grid-template-columns:repeat(3,1fr)}#dsrcSeg button{padding-left:4px;padding-right:4px}.dsrcrow .lbl em{font-style:normal;color:var(--disp)}
.tbuild.off button{opacity:.45}.tbuild.off button[aria-pressed=true]{opacity:1}
.thint{margin:-4px 0 10px;font-size:var(--fs-s);line-height:1.4;color:var(--dim)}
.lz.dim{opacity:.35}

.mod.fixed.filedrop{box-shadow:inset 0 0 0 1.5px var(--acc),0 0 18px rgba(244,70,17,.35)}
.mod.content .idx{color:var(--text)}.mod.content .nm::before{content:"";display:inline-block;width:6px;height:6px;border-radius:var(--r-xs);background:var(--acc);margin:0 6px 1px 0;vertical-align:middle}
.cg.lay .chip{color:var(--text)}.cg.lay .chip::after{content:"+";color:var(--acc)}
.imglayer .cv-row{gap:8px}
.clipbox{margin-top:8px;padding:8px 8px 6px;border-radius:var(--r-m);background:rgba(255,255,255,.02);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.cliptop{display:flex;align-items:baseline;gap:8px}.lvspd{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:4px 0 6px}.lvspd button{padding:5px 0;font:500 var(--fs-s) var(--mono)}.spdin{display:flex;align-items:center;gap:3px;font:500 var(--fs-s) var(--mono);color:var(--dim)}.spdin input{width:52px;text-align:right}.tkn2{grid-template-columns:repeat(2,1fr);margin-top:6px}.cliptop .lbl{flex:1}.clipbox .vtrack{margin:4px 0 6px}.clipbtns{gap:6px}.clipbtns .btn{padding:4px 8px;font-size:var(--fs-s)}.imgname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-m)}
#gl.checker{background:repeating-conic-gradient(#1B1D1F 0 25%,#2A2E31 0 50%) 0 0/16px 16px}
.hist{display:flex;gap:4px}
.btn.icon{padding:8px 10px;min-width:34px;font-size:var(--fs-b)}
.seg.mini button{padding:4px 8px;font-size:var(--fs-xs)}
.outrow{align-items:center;gap:6px 8px;flex-wrap:wrap}
.ask{display:flex;gap:8px;flex:1;min-width:260px}
.ask input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--hair);border-radius:var(--r-m);padding:9px 12px;font-size:var(--fs-b)}
.ask input:focus{border-color:var(--ctl-hi)}
.rcard{position:relative}
.rcard .rmeta{display:grid;gap:2px;padding:7px 9px 9px}
.rcard .rmeta b{font-weight:500;font-size:var(--fs-m);color:var(--text)}
.rcard .rmeta em{font-style:normal;font-size:var(--fs-s);color:var(--dim);white-space:normal;text-transform:none;letter-spacing:0;font-family:var(--sans)}
.rcard .rtags{display:flex;gap:4px;padding:0 9px 9px;flex-wrap:wrap}
.rcard .rtags i{font:500 var(--fs-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;font-style:normal;color:var(--dim);background:var(--ctl);padding:2px 5px;border-radius:var(--r-s)}
.rcard .rtags i.mine{color:var(--acc);background:rgba(244,70,17,.12)}
.rdel{position:absolute;top:6px;right:6px;border:0;border-radius:var(--r-s);background:rgba(10,10,10,.8);color:var(--text);font-size:var(--fs-s);padding:4px 7px}
.rdel:hover{background:var(--warn);color:var(--ral9003)}
.rsection{grid-column:1/-1;margin:6px 0 0}
.modal-card label.chk{display:flex;gap:8px;align-items:center;font-size:var(--fs-m);color:var(--text)}
.modal-card .row2{display:flex;gap:8px;justify-content:flex-end}
.xdur{display:flex;justify-content:space-between;align-items:center;padding:6px 10px 8px}
#canvasBtn{font:500 var(--fs-s) var(--mono);letter-spacing:0;gap:8px}
#canvasBtn b{font-weight:500;color:var(--acc)}
#canvasBtn .car{opacity:.6}
.cvpop{left:0;right:auto;width:320px;display:grid;gap:12px;padding:12px}
.cv-sec{display:grid;gap:7px}
.cv-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.cv-ratios{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cvpop{width:360px}
.cvr{border:1px solid transparent;background:var(--bg);border-radius:var(--r-m);padding:8px 4px 6px;display:grid;justify-items:center;gap:6px;font:500 var(--fs-s) var(--mono);color:var(--dim)}
.cvr i{display:block;border:1.5px solid currentColor;border-radius:var(--r-xs)}
.cvr:hover{color:var(--text);background:#141618}
.cvr[aria-pressed="true"]{border-color:var(--acc);color:var(--text)}
.cv-custom{display:flex;align-items:center;gap:6px}
.cv-custom input{width:76px;background:var(--bg);border:1px solid var(--hair);border-radius:var(--r-m);padding:6px 8px;font:500 var(--fs-s) var(--mono);font-variant-numeric:tabular-nums;color:var(--text)}
.cv-custom span{color:var(--dim)}
.cv-custom .btn{padding:6px 10px;font-size:var(--fs-s);margin-left:auto}
.cv-sum{font:500 var(--fs-s) var(--mono);font-variant-numeric:tabular-nums;color:var(--text)}
.cvpop .seg.mini{flex-wrap:wrap}
.mark{border-radius:var(--r-m);padding:6px 8px}
.mark:hover,.mark[aria-expanded="true"]{background:var(--panel)}
.mark .car{font:400 var(--fs-s) var(--mono);color:var(--dim);margin-left:-2px}
.filepop{left:0;right:auto;width:260px;padding:6px}
.mi{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;border:0;background:none;padding:8px 10px;border-radius:var(--r-m);font-size:var(--fs-m);text-align:left;color:var(--text)}
.mi:hover,.mi:focus-visible{background:var(--ctl)}
.mi:disabled{opacity:.35;pointer-events:none}
.mi kbd{font:500 var(--fs-xs) var(--mono);color:var(--dim)}
.msep{height:1px;background:var(--hair);margin:5px 6px}
.typewrap{display:grid;gap:12px}
.srctypes{display:grid;gap:6px;padding:2px 14px 10px}
.srctypes .seg{flex-wrap:wrap;border-radius:var(--r-l)}
.srctypes .seg button{flex:1 1 auto;padding:5px 8px}
.bgpanel{display:grid;gap:12px;padding:4px 14px 14px}
.bgpanel .bgtypes{display:grid;grid-template-columns:repeat(3,1fr);border-radius:var(--r-l)}.bgpanel .bgtypes button{min-width:0}
.bgopts{display:grid;gap:10px}
.bgopts .tcolors{flex-wrap:wrap;align-items:center}
.bgopts input[type=color]{width:28px;height:24px;border:0;padding:0;background:none;cursor:pointer}
.bgopts .bggens{flex-wrap:wrap;border-radius:var(--r-l)}.bgopts .bggens button{flex:1 1 auto}
.bgopts .knobs{padding:0}


.top .viewseg{position:static;transform:none;background:var(--panel)}
.ghost-flag{top:12px}
.typewrap textarea{min-height:52px;font:600 var(--fs-l) var(--sans);resize:none;letter-spacing:.02em}

.keys-list{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:var(--fs-m);max-height:60vh;overflow:auto}
.keys-list kbd{font:500 var(--fs-s) var(--mono);background:var(--bg);border:1px solid var(--hair);border-radius:var(--r-s);padding:2px 6px;justify-self:start;color:var(--text)}
.mi.rec{justify-content:flex-start;gap:10px;position:relative;padding-right:28px}
.mi.rec img{width:44px;height:26px;object-fit:cover;border-radius:var(--r-s);background:#000;flex:none;box-shadow:inset 0 0 0 1px var(--hair)}
.mi.rec .rn{display:grid;gap:1px;min-width:0}
.mi.rec .rn b{font-weight:500;font-size:var(--fs-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mi.rec .rn span{font:400 var(--fs-xs) var(--mono);color:var(--dim);letter-spacing:0}
.mi.rec .rdx{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:var(--r-s);display:grid;place-items:center;color:var(--faint);opacity:0}
.mi.rec:hover .rdx,.mi.rec:focus-visible .rdx{opacity:1}
.mi.rec .rdx:hover{background:var(--acc);color:var(--bg)}
.mlbl{padding:6px 10px 3px}
#projName{max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:text;border-radius:var(--r-s)}#projName:hover{box-shadow:0 1px 0 rgba(236,236,231,.35)}#projName:focus-visible{outline:1.5px solid var(--acc);outline-offset:2px}
#projMeta{display:flex;align-items:center;gap:6px;white-space:nowrap;text-transform:none;letter-spacing:0}#projMeta .sdot{width:6px;height:6px;border-radius:50%;background:var(--faint);flex:none}#projMeta .sdot.saved{background:var(--led);box-shadow:0 0 6px rgba(0,187,45,.7)}#projMeta .sdot.dirty{background:var(--warm);box-shadow:0 0 6px rgba(250,210,1,.6)}
.xrow{display:flex;align-items:center;gap:2px}.xrow>.row{flex:1;min-width:0}
.xmore{flex:none;width:32px;height:36px;display:grid;place-items:center;border:0;background:none;border-radius:var(--r-m);color:var(--dim);cursor:pointer}.xmore:hover{background:var(--ctl);color:var(--text)}
.xmore svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}.xmore[aria-expanded=true]{color:var(--text)}.xmore[aria-expanded=true] svg{transform:rotate(90deg)}
.xopts{display:grid;gap:8px;margin:0 2px 6px;padding:10px;border-radius:var(--r-m);background:var(--bg);box-shadow:inset 0 0 0 1px var(--hair)}
#exportPop{width:300px;max-height:calc(100vh - 72px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}#exportPop>*{min-width:0;max-width:100%}
.xtime .cv-row:has(>.seg){display:grid;grid-template-columns:1fr;gap:5px}.xtime .seg.mini{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:100%}.xtime .seg.mini button{min-width:0;padding-left:2px;padding-right:2px;line-height:1.15}
.xfmt .cv-row{flex-wrap:wrap;row-gap:2px}.xfmt #xFmtNote{white-space:normal}.xrow .tag{white-space:nowrap}.xrow>.row span:first-child{white-space:nowrap}
.xopts .cv-row{display:grid;grid-template-columns:1fr;gap:5px}.xopts .seg.mini{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:100%}.xopts .seg.mini button{min-width:0;padding-left:0;padding-right:0;white-space:nowrap}.xnote{margin:0;font-size:var(--fs-s);color:var(--dim);line-height:1.4}
.xgo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 8px;padding-top:2px}.xgo .btn{margin-left:auto}.xgo .cv-sum{color:var(--dim)}
.xtime{display:grid;gap:8px;padding:8px 10px 10px;border-bottom:1px solid var(--hair);margin-bottom:4px}
.xchk{display:flex;gap:8px;align-items:baseline;font-size:var(--fs-m);flex-wrap:wrap}
.xchk .dim{color:var(--dim);font-size:var(--fs-s)}
#xSum{margin:0;color:var(--disp);text-shadow:0 0 6px rgba(255,178,0,.35)}
@media (max-width:1560px){.top{gap:10px}.top .btn kbd{display:none}.top .seg button{padding:6px 10px}.doc{padding-left:10px}#canvasBtn .lbl{display:none}}
@media (max-width:1400px){#saveBtn{display:none}.top .seg button{padding:6px 8px}}
.mod.audio .idx{color:var(--acc)}
.audiopanel{display:grid;gap:12px;padding:4px 14px 14px}
.abtns{display:flex;gap:6px;flex-wrap:wrap}
.abtns .btn{padding:7px 10px;font-size:var(--fs-m)}
.audiopanel .knobs{padding:0;grid-template-columns:repeat(4,1fr)}
.modrow{display:grid;grid-template-columns:78px 1fr 64px 22px;gap:5px;align-items:center;margin-bottom:5px}
.modrow select{height:26px;padding:0 6px;font-size:var(--fs-s);border-radius:var(--r-s);width:100%;min-width:0}
.modrow input[type=range]{width:100%}
.modrow .ib{width:22px;height:22px}
.knob .mdot{fill:var(--acc);stroke:var(--bg);stroke-width:1.2}
.knob.modded .kf{stroke:var(--acc);stroke-width:1.2}
.kmenu{position:fixed;z-index:50;background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-m);padding:5px;min-width:190px;box-shadow:0 16px 40px rgba(0,0,0,.6)}
.kmenu .lbl{padding:5px 8px 3px;display:block}
.presdd{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px;height:28px;padding:0 10px;border:0;border-radius:var(--r-s);background:var(--ctl);color:var(--text);font:inherit;font-size:var(--fs-s);cursor:pointer;text-align:left}
.presdd:hover:not([disabled]){background:var(--ctl-hi)}.presdd[disabled]{opacity:.45;cursor:default}.presdd i{width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translateY(-2px);opacity:.6}
.presmenu{min-width:220px;max-width:300px}
.lmenu{min-width:210px}.lmenu .mi kbd{font:500 10px var(--mono);color:var(--faint);background:none;border:0;padding:0}.lmenu .mi[disabled]{opacity:.35;pointer-events:none}.lmenu .mi.danger{color:#ff7b5c}.lmenu .mi:focus-visible{outline:0;background:rgba(255,255,255,.07)}.msep{display:block;height:1px;margin:4px 6px;background:var(--hair)}
#gl.overplaced{cursor:move}
#gl.orbit{cursor:grab}
#gl.orbit:active{cursor:grabbing}
body[data-ov=transform] #gl.orbit,body[data-ov=crop] #gl.orbit,body[data-ov=distort] #gl.orbit{cursor:default}
body[data-ov=orbit] #gl{cursor:grab}body[data-ov=orbit] #gl:active{cursor:grabbing}body[data-ov=light] #gl{cursor:crosshair}

/* Connect */
.tabs{display:flex;gap:2px;margin:0 8px;background:var(--bg);border-radius:var(--r-m);padding:3px}
.tabs button{flex:1;border:0;background:none;padding:7px;border-radius:var(--r-m);font:500 var(--fs-s) var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.tabs button[aria-selected="true"]{background:var(--ctl);color:var(--text)}
.pane{padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px}



.link{border:0;background:none;padding:0;color:var(--dim);text-decoration:underline;text-underline-offset:3px;font-size:var(--fs-m)}
.link:hover{color:var(--text)}
textarea{width:100%;resize:vertical;min-height:62px;background:var(--bg);border:1px solid var(--hair);border-radius:var(--r-m);padding:10px;font-size:var(--fs-m);line-height:1.45}
select{background:var(--ctl);border:0;border-radius:var(--r-m);padding:8px 10px;font-size:var(--fs-m);min-width:0}
.gen{display:flex;gap:8px}
.gen select{flex:1}
.status{margin:0;font-size:var(--fs-m);color:var(--dim);min-height:1.45em}
.status b{color:var(--text);font-weight:500}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:var(--fs-m)}
.sw{width:36px;height:20px;border-radius:8px;border:0;padding:0;position:relative;flex:none;cursor:pointer;background:#08090a;box-shadow:inset 0 2px 4px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.05)}
/* Settings switch: a black track and a glass knob with an LED behind it. Off, the LED is dark; on, it lights green through the glass. The track never lights up */
.sw::before{content:"";position:absolute;top:6px;left:6px;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#16261b,#0a120c 70%);box-shadow:inset 0 0 1px rgba(0,0,0,.8);transition:transform .28s cubic-bezier(.3,1.3,.4,1),background .2s,box-shadow .2s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:5px;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 50%,rgba(255,255,255,.07));-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,255,255,.12),0 2px 4px rgba(0,0,0,.85);transition:transform .28s cubic-bezier(.3,1.3,.4,1),box-shadow .2s}
.sw[aria-pressed="true"]::before{transform:translateX(16px);background:radial-gradient(circle at 50% 45%,#fffbe8,#ffe08a 28%,#ffc21a 55%,#ffb200 80%);box-shadow:0 0 6px 3px rgba(255,200,60,.9),0 0 14px 6px rgba(255,178,0,.55),0 0 22px 8px rgba(255,178,0,.25)} /* settings light amber; green is for power */
.sw[aria-pressed="true"]::after{transform:translateX(16px);background:linear-gradient(180deg,rgba(255,244,214,.22),rgba(255,200,90,.08) 50%,rgba(255,210,120,.14));box-shadow:inset 0 1px 0 rgba(255,246,220,.45),inset 0 0 0 1px rgba(255,200,90,.4),inset 0 0 8px rgba(255,178,0,.5),0 2px 4px rgba(0,0,0,.85)}
.sw:hover::after{box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 0 0 1px rgba(255,255,255,.2),0 2px 4px rgba(0,0,0,.85)}
/* On/off for a layer or a section: an illuminated button. A black bezel, an LED under a glass lens; dark when bypassed, lit green when running */
/* The lens: one look for every on/off and status light (layers, sections, section headers). A black bezel, an LED, frosted glass with a wide highlight.
   Defined once here and used everywhere, so they can't drift apart */
:root{--lens-hi:linear-gradient(180deg,rgba(255,255,255,.17) 0,rgba(255,255,255,.08) 45%,rgba(255,255,255,.025) 60%,rgba(255,255,255,.02) 100%),linear-gradient(rgba(220,230,225,.04),rgba(220,230,225,.04));
  --lens-off:var(--lens-hi),radial-gradient(circle,#13201a 0,#0b130e 45%,#08090a 75%),#060708;
  --lens-on:var(--lens-hi),radial-gradient(circle,#c8ffd4 0,#6ef292 22%,#2bd964 45%,#15b046 68%,#0c6e2e 100%),#060708;
  --lens-ring-off:inset 0 0 0 1px rgba(255,255,255,.09),0 0 0 1px rgba(0,0,0,.6);
  --lens-ring-on:inset 0 0 0 1px rgba(200,255,215,.22),0 0 0 1px rgba(0,0,0,.6),0 0 3px rgba(40,230,90,.35)}
.pw>.led,.seclight i,.fph::before{display:block;flex:none;width:11px;height:11px;border-radius:3.5px;background:var(--lens-off);box-shadow:var(--lens-ring-off);transition:background .2s,box-shadow .2s;transform:none}
.pw[aria-pressed="true"]>.led,.fpsec:not(.idle)>.seclight i,.fph::before{background:var(--lens-on);box-shadow:var(--lens-ring-on)}
.pw[aria-pressed="true"]>.led{animation:ledPulse 2.6s ease-in-out infinite}
.pw:hover>.led,.seclight:hover i{outline:1px solid rgba(255,255,255,.14);outline-offset:0}
.pwbig{padding:7px}
@keyframes ledPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.3) saturate(1.1)}}
@media (prefers-reduced-motion:reduce){.pw[aria-pressed="true"]>.led{animation:none}}
.tools{display:flex;flex-wrap:wrap;gap:5px}
.tools code{font:400 var(--fs-s) var(--mono);padding:4px 7px;border-radius:var(--r-s);background:var(--bg);color:var(--ral7035)}
.call-head{display:flex;justify-content:space-between;align-items:center}
.call-head .btn{padding:5px 9px;font-size:var(--fs-s)}
pre{margin:0;background:var(--bg);border:1px solid var(--hair);border-radius:var(--r-m);padding:10px 12px;font:400 var(--fs-s)/1.55 var(--mono);color:var(--ral7035);max-height:220px;overflow:auto;white-space:pre}
pre .k{color:var(--dim)}
pre .s{color:var(--text)}
pre .n{color:var(--acc)}

/* Bottom bar */
.bar{display:flex;gap:14px;align-items:stretch;flex-wrap:wrap}
#chainList.sorting>.mod,#chainList.sorting>.rowctl,#chainList.sorting>.flow{transition:transform .2s cubic-bezier(.2,.9,.25,1)}
#chainList.sorting>.lifted{transition:none;position:relative;z-index:6}#chainList.sorting>.mod.lifted{box-shadow:0 14px 34px -8px rgba(0,0,0,.8),inset 0 0 0 1px color-mix(in srgb,var(--mc) 60%,transparent);cursor:grabbing}
#chainList>.mod .grip{cursor:grab;touch-action:none}body.nosel{user-select:none;-webkit-user-select:none}body.nosel *{cursor:grabbing!important}
.keyswrap{position:relative;min-width:0;display:grid}.keyswrap>.keys{min-height:0}
.kedge{position:absolute;top:0;bottom:0;width:72px;pointer-events:none;z-index:2;opacity:0;transition:opacity .25s}.kedge.l{left:0}.kedge.r{right:0}
.keyswrap.sl .kedge.l,.keyswrap.sr .kedge.r{opacity:1}
.kedge.l{background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.2) 35%,rgba(0,0,0,0))}.kedge.r{background:linear-gradient(270deg,rgba(0,0,0,.55),rgba(0,0,0,.2) 35%,rgba(0,0,0,0))}
.kedge::after{content:"";position:absolute;inset:0}
/* Left edge: the row slides under the Recipes card, so it falls into the card's shadow instead of blurring */
.kedge.l{width:46px}
.kedge.l::after{background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 96%,transparent) 0,color-mix(in srgb,var(--bg) 70%,transparent) 30%,transparent 100%)!important}
@media (min-width:901px),(min-width:700px) and (orientation:portrait){.keyswrap{margin-left:-8px}.keyswrap>.keys{padding-left:8px;scroll-padding-left:8px}.barh{position:relative;z-index:3;box-shadow:6px 0 14px -6px rgba(0,0,0,.8)}.kedge.l{left:0}}.kedge.r::after{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--bg) 88%,transparent))}.kedge.l::after{background:linear-gradient(270deg,transparent,color-mix(in srgb,var(--bg) 88%,transparent))}
.keys{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(124px,1fr);gap:6px;flex:1;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.keys>.key{scroll-snap-align:start}
.key{border:1px solid var(--hair);background:var(--panel);border-radius:var(--r-m);padding:9px 10px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;row-gap:10px;text-align:left;box-shadow:inset 0 -2px 0 rgba(0,0,0,.4);min-width:0}
.key:hover{background:var(--ctl)}
.key:active{transform:translateY(1px);box-shadow:none}
.key .n{font:500 var(--fs-s) var(--mono);color:var(--faint)}
.key .led{justify-self:end;align-self:center;width:6px;height:6px}
.key.on .led{background:var(--led);box-shadow:0 0 8px rgba(0,187,45,.8)}
.key .t{grid-column:span 2;font-weight:500;font-size:var(--fs-m);line-height:1.2;min-height:2.4em;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere}
.app.nob .key .t{display:block;min-height:0;white-space:nowrap;text-overflow:ellipsis}
@media (min-width:901px),(min-width:700px) and (orientation:portrait){.app.shortb:not(.nob) .key .t{display:block;min-height:0;white-space:nowrap;text-overflow:ellipsis}}
.meta{display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-width:0}
.meta .stats{display:flex;gap:14px;justify-content:flex-end}
.meta .stats b{color:var(--text);font-weight:500;font-variant-numeric:tabular-nums}
.ral{display:flex;gap:4px;justify-content:flex-end;flex-wrap:wrap}
.ral span{display:flex;align-items:center;gap:5px;font:400 var(--fs-xs) var(--mono);letter-spacing:0;color:var(--dim);padding:3px 6px 3px 3px;border-radius:var(--r-s);background:var(--panel)}
.ral i{width:12px;height:12px;border-radius:var(--r-xs);display:block;box-shadow:inset 0 0 0 1px rgba(236,236,231,.12)}

.consent{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:9000;width:min(600px,calc(100vw - 24px));display:grid;grid-template-columns:auto 1fr auto;gap:8px 14px;align-items:center;padding:12px 12px 12px 14px;border-radius:var(--r-l);background:radial-gradient(120% 140% at 50% -20%,#25282b,var(--panel) 60%);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(255,255,255,.08),0 14px 40px rgba(0,0,0,.55)}
.consent[hidden]{display:none}.consent .lbl{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.consent p{margin:0;font-size:var(--fs-m);line-height:1.4;color:var(--val)}.consentgo{display:flex;gap:6px}
@media (max-width:640px){.consent{grid-template-columns:1fr}.consentgo{justify-content:flex-end}}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;background:var(--text);color:var(--bg);padding:9px 14px;border-radius:var(--r-m);font-weight:500;font-size:var(--fs-m);transition:opacity .2s,transform .2s;pointer-events:none;max-width:calc(100% - 32px);z-index:30}
.toast.show{opacity:1;transform:translate(-50%,0)}
.vh{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- AI tab ---------- */

#aiPrompt{min-height:70px}
.aimodels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
/* Model cards are the same card component as generators and text styles (.gbtn) */
.aiopts{display:grid;gap:8px}
.aiopts .cv-row{gap:8px}
.aiopts select,.aiopts input[type=number]{background:var(--bg);border:1px solid var(--hair);border-radius:var(--r-m);padding:5px 8px;font:500 var(--fs-s) var(--mono);color:var(--text)}
.aiopts input[type=number]{width:64px}
.aigo{display:flex;align-items:center;justify-content:space-between;gap:10px}
.aicost{font:500 var(--fs-s) var(--mono);color:var(--dim)}



.aikey{display:grid;gap:6px;padding:8px 0}
.aikey b{font-weight:500;font-size:var(--fs-m)}
.aikey input{background:var(--bg);border:1px solid var(--hair);border-radius:var(--r-m);padding:7px 9px;font:500 var(--fs-s) var(--mono);color:var(--text);width:100%}
.aikey .row0{padding:0;align-items:center}
.aikey a{margin-left:auto;text-decoration:none}
.ainote{margin:0;font-size:var(--fs-s);color:var(--faint)}
.ainote a{color:var(--dim)}
.aicount{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.aicount .seg button{min-width:26px;padding-left:6px;padding-right:6px}
.aiplan{display:grid;gap:6px;padding:8px;border-radius:var(--r-m);background:var(--bg);box-shadow:inset 0 0 0 1px var(--hair)}.aiplanh{display:flex;align-items:center;gap:6px}.aiplanh .lbl{flex:1}
.aishot{display:grid;grid-template-columns:16px 1fr;gap:6px;align-items:start}.aishot span{font:500 var(--fs-xs) var(--mono);color:var(--disp);padding-top:6px}.aishot textarea{min-height:44px;font-size:var(--fs-s);resize:vertical}
.tray{display:grid;gap:8px;margin-bottom:10px}.trayh{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.trayh .lbl{flex:1;min-width:120px}.trayh .chk{font-size:var(--fs-s)}
.traygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px}
.gcard{display:grid;gap:6px;padding:6px;border-radius:var(--r-m);background:var(--bg);box-shadow:inset 0 0 0 1px var(--hair)}
.gcard .gth{aspect-ratio:1;border-radius:var(--r-s);background:#050607;overflow:hidden;display:grid;place-items:center;padding:6px;text-align:center;font:400 var(--fs-xs) var(--mono);letter-spacing:0;color:var(--dim)}
.gcard .gth img,.gcard .gth video{width:100%;height:100%;object-fit:cover;display:block;margin:-6px;width:calc(100% + 12px);height:calc(100% + 12px)}
.gcard.run .gth{background:repeating-linear-gradient(135deg,#0B0C0D 0 8px,#101214 8px 16px);animation:tmove 1.2s linear infinite;background-size:22.6px 22.6px}@keyframes tmove{to{background-position:22.6px 0}}
.gcard.err .gth{color:var(--acc)}.gact{display:flex;flex-wrap:wrap;gap:4px}.gact .btn{padding:3px 7px}
.earlier{margin:6px 2px 4px}
.take{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px;border-radius:var(--r-m);background:var(--bg)}
.take .th{width:48px;height:32px;border-radius:var(--r-s);background:#000;object-fit:cover;display:grid;place-items:center;color:var(--dim);font-size:var(--fs-l);overflow:hidden}
.take .th video,.take .th img{width:100%;height:100%;object-fit:cover}
.take .tx{display:grid;gap:2px;min-width:0}
.take .tx b{font-weight:500;font-size:var(--fs-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.take .tx span{font:400 var(--fs-xs) var(--mono);letter-spacing:0;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.take .tx span.err{color:var(--acc)}
.take .ta{display:flex;gap:2px;align-items:center}
.take.run .th{background:repeating-linear-gradient(90deg,#141618 0 8px,#1d2023 8px 16px);background-size:32px 100%;animation:takerun 1s linear infinite}
@keyframes takerun{to{background-position:32px 0}}
/* ---------- Mobile: viewer pinned on top, one panel at a time, bottom bar ---------- */
.mnav{display:none}
@media (max-width:699px),(max-width:820px) and (orientation:landscape){
  .app{padding:8px 8px calc(70px + env(safe-area-inset-bottom,0px));gap:6px}
  .top{gap:6px}.top .doc,#ab,#saveBtn,.mword,.tgrp:first-of-type{display:none}
  .stage{position:sticky;top:0;z-index:20;order:-1;aspect-ratio:auto!important;height:46vh;min-height:220px;border-radius:var(--r-l)}
  .main>.col.left,.main>.col.right,.app>.bar{display:none!important}
  .app[data-m="looks"] .main>.col.left,.app[data-m="ai"] .main>.col.left,.app[data-m="lib"] .main>.col.left,.app[data-m="chain"] .main>.col.left{display:block!important}
  .app[data-m="edit"] .main>.col.right{display:block!important}
  .app[data-m="chain"] .lside>:not(.chainsec):not(.lhead):not(.dstack){display:none!important}
  .app[data-m="looks"] .lside>.chainsec,.app[data-m="ai"] .lside>.chainsec,.app[data-m="lib"] .lside>.chainsec,.app[data-m="looks"] .lside>.lhead,.app[data-m="ai"] .lside>.lhead,.app[data-m="lib"] .lside>.lhead{display:none}
  .ltabs{display:none!important}.chainsec{height:auto!important}
  .split,.gutter{display:none!important}.app.sizedb .bar{height:auto}.key .kth{display:none!important}.lside.sized .chainsec{height:auto}
  .app[data-m="chain"] .chainsec{border-top:0}
  .app[data-m="presets"]>.bar{display:grid!important}
  .lhead .tgl,.rhead .tgl,.barh .tgl,.rail{display:none!important}
  .mnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(20,22,24,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--hair);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));gap:2px}
  .mnav button{flex:1;border:0;background:none;color:var(--dim);display:grid;justify-items:center;gap:3px;padding:5px 0;border-radius:var(--r-m);font:500 var(--fs-xs) var(--mono);letter-spacing:.06em;text-transform:uppercase}
  .mnav button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
  .mnav button[aria-pressed="true"]{color:var(--text);background:var(--panel)}
  .mnav button.exp{color:var(--acc)}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
/* ---------- Design pass (v22) ---------- */
.app{gap:8px;padding:10px 12px 12px}
.top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:40px}
.tz-c{justify-content:center}
.tz{display:flex;align-items:center;gap:8px;min-width:0}
.tz-r{justify-content:flex-end}
.mark,.mark:hover,.mark[aria-expanded="true"]{background:none;border:0;border-radius:var(--r-m);padding:2px 4px 2px 0;display:flex;align-items:center;gap:9px;color:var(--text)}
.mlogo{display:block;width:30px;height:27px;color:var(--mkc);flex:none}
.mlogo svg{display:block;width:100%;height:100%}
@font-face{font-family:'Reservoir Grunge';src:url('media/fonts/reservoir-grunge.ttf') format('truetype');font-display:block}
.mword{font:400 var(--fs-l)/1 'Reservoir Grunge',var(--sans);letter-spacing:.02em}
.wm{font-family:'Reservoir Grunge',var(--sans);font-weight:400;letter-spacing:.02em;font-size:.94em;color:var(--wmw)}
.hwm{font:400 var(--fs-xl)/1 'Reservoir Grunge',var(--sans);letter-spacing:.02em;color:var(--wmw)}
/* The wordmark: Cream (RAL 9001), CRT scanlines cut through the whole word; a warm band, a red/blue split and a glow ease across ANALOG.
   .loop sweeps every 5.6 s (welcome, start, front door); .once sweeps when the studio opens and again on hover. */
:root{--wmw:#E9E0D2}
.crtwm{display:inline-block;white-space:nowrap;text-shadow:none;--wl:.045em;--wp:.11em}
/* lines snap to whole pixels, never finer than a 1 px gap every 3 px, so they stay crisp at any size */
@supports (width:round(1em,1px)){.crtwm{--wl:max(1px,round(.045em,1px));--wp:max(3px,round(.11em,1px))}}
/* .sm: the small mark (headers, top bar): fewer, bolder lines, a 1 px gap every 4 px */
.crtwm.sm{--wl:1px;--wp:4px}@media (min-resolution:2dppx){.crtwm.sm{--wl:.5px;--wp:3px}} /* Retina draws half-pixel gaps, so small letters keep their counters and crossbars */
/* Power on: the NANA mark and the wordmark turn on together like a tube, then the first sweep crosses ANALOG.
   The welcome and start screens are hidden while closed, so this plays from the top each time one opens. */
@keyframes crtOn{0%{opacity:0;transform:scale(.3,.012);filter:brightness(6)}10%{opacity:1;transform:scale(1.06,.02);filter:brightness(6)}28%{transform:scale(1,1.14);filter:brightness(2.4)}40%{transform:scale(1,.94);filter:brightness(1.5)}52%,100%{opacity:1;transform:none;filter:none}}
@keyframes crtFade{from{opacity:0}to{opacity:1}}
.poweron .hlogo{animation:crtOn .9s cubic-bezier(.2,.7,.2,1) both}
.poweron .crtwm{animation:crtOn .9s cubic-bezier(.2,.7,.2,1) both} /* in sync with the mark */
.poweron .hsep,.poweron .hname,.poweron .hbeta{animation:crtFade .6s ease .8s both}
.hbrand.poweron .crtwm.loop .wa,.hbrand.poweron .crtwm.loop .wf,.hbrand.poweron .crtwm.loop .wa::before,.hbrand.poweron .crtwm.loop .wa::after{animation-delay:.9s} /* outranks the loop rule, which comes later */
@media (prefers-reduced-motion:reduce){.poweron .hlogo,.poweron .crtwm,.poweron .hsep,.poweron .hname,.poweron .hbeta{animation:none}}
/* scanlines are cut out of the whole word, so every line is a true gap (the background shows through) */
.crtwm .wn,.crtwm .wa,.crtwm .wf{display:inline-block;position:relative;text-shadow:none}
.crtwm .wn,.crtwm .wf,.crtwm .wa::before,.crtwm .wa::after{-webkit-mask-image:repeating-linear-gradient(0deg,transparent 0 var(--wl),#000 var(--wl) var(--wp));mask-image:repeating-linear-gradient(0deg,transparent 0 var(--wl),#000 var(--wl) var(--wp))}
.crtwm .wn{color:var(--wmw);-webkit-text-fill-color:var(--wmw)}
/* ANALOG: the outer span carries the glow and the color split; the inner .wf carries the moving color. The cutout sits on .wf and the split layers, so the glow spreads freely around scanlined letters */
.crtwm .wa{isolation:isolate;filter:drop-shadow(0 0 .06em rgba(244,70,17,.18))}
.crtwm .wf{color:transparent;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(100deg,var(--wmw) 0 38%,#F44611 45%,#FFB200 50%,#FAD201 54%,var(--wmw) 62% 100%);background-size:300% 100%;background-position:100% 0}
.crtwm .wa::before,.crtwm .wa::after{content:attr(data-text);position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:screen;opacity:0;-webkit-text-fill-color:currentColor}
.crtwm .wa::before{color:#F44611}.crtwm .wa::after{color:#0089B6}
/* .ink: the same mark with solid RAL 9005 lines drawn in, instead of cut out (for design assets) */
.crtwm.ink .wn,.crtwm.ink .wf,.crtwm.ink .wa::before,.crtwm.ink .wa::after{-webkit-mask-image:none;mask-image:none}
.crtwm.ink .wn{color:transparent;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;background-image:repeating-linear-gradient(0deg,#0A0A0A 0 var(--wl),var(--wmw) var(--wl) var(--wp))}
.crtwm.ink .wf{background-image:repeating-linear-gradient(0deg,#0A0A0A 0 var(--wl),transparent var(--wl) var(--wp)),linear-gradient(100deg,var(--wmw) 0 38%,#F44611 45%,#FFB200 50%,#FAD201 54%,var(--wmw) 62% 100%);background-size:100% var(--wp),300% 100%;background-position:0 0,100% 0}
.crtwm.loop .wa{animation:wmGlow 5.6s ease-in-out infinite}.crtwm.loop .wf{animation:wmBand 5.6s cubic-bezier(.45,0,.25,1) infinite}.crtwm.ink.loop .wf{animation-name:wmBandInk}
.crtwm.loop .wa::before{animation:wmSplitR 5.6s ease-in-out infinite}.crtwm.loop .wa::after{animation:wmSplitB 5.6s ease-in-out infinite}
@keyframes wmBand{0%{background-position:100% 0}55%,100%{background-position:0% 0}}
@keyframes wmBandInk{0%{background-position:0 0,100% 0}55%,100%{background-position:0 0,0% 0}}
@keyframes wmGlow{0%,6%,56%,100%{filter:drop-shadow(0 0 .06em rgba(244,70,17,.18))}28%{filter:drop-shadow(0 0 .16em rgba(244,70,17,.5))}}
/* the color split eases in as the band arrives, drifts with it, and eases out as it leaves */
@keyframes wmSplitR{0%,6%{opacity:0;transform:translateX(0)}24%{opacity:.7;transform:translateX(-.05em)}34%{opacity:.55;transform:translateX(-.035em)}50%,100%{opacity:0;transform:translateX(0)}}
@keyframes wmSplitB{0%,6%{opacity:0;transform:translateX(0)}24%{opacity:.7;transform:translateX(.05em)}34%{opacity:.55;transform:translateX(.035em)}50%,100%{opacity:0;transform:translateX(0)}}
.crtwm.once .wa{animation:wmGlow 5.6s ease-in-out .6s both}.crtwm.once .wf{animation:wmBand 5.6s cubic-bezier(.45,0,.25,1) .6s both}
.crtwm.once .wa::before{animation:wmSplitR 5.6s ease-in-out .6s both}.crtwm.once .wa::after{animation:wmSplitB 5.6s ease-in-out .6s both}
.crtwm.once:hover .wa{animation:wmGlow2 5.6s ease-in-out both}.crtwm.once:hover .wf{animation:wmBand2 5.6s cubic-bezier(.45,0,.25,1) both}
.crtwm.once:hover .wa::before{animation:wmSplitR2 5.6s ease-in-out both}.crtwm.once:hover .wa::after{animation:wmSplitB2 5.6s ease-in-out both}
@keyframes wmBand2{0%{background-position:100% 0}55%,100%{background-position:0% 0}}
@keyframes wmGlow2{0%,6%,56%,100%{filter:drop-shadow(0 0 .06em rgba(244,70,17,.18))}28%{filter:drop-shadow(0 0 .16em rgba(244,70,17,.5))}}
@keyframes wmSplitR2{0%,6%{opacity:0;transform:translateX(0)}24%{opacity:.7;transform:translateX(-.05em)}34%{opacity:.55;transform:translateX(-.035em)}50%,100%{opacity:0;transform:translateX(0)}}
@keyframes wmSplitB2{0%,6%{opacity:0;transform:translateX(0)}24%{opacity:.7;transform:translateX(.05em)}34%{opacity:.55;transform:translateX(.035em)}50%,100%{opacity:0;transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.crtwm .wa,.crtwm .wf,.crtwm .wa::before,.crtwm .wa::after{animation:none!important}}.hbrand .hsep{display:block;width:1px;height:16px;background:var(--hair)}.hbrand .hwm+.hsep+b{color:var(--dim)}
/* The NANA mark drawn as a mask, so it can take the word's scanlines (.mk-lines) and its own sweep (.mk-sweep).
   --my shifts the mark's lines so they run straight on from the word's: the mark is 1.556em tall, centred on the 1em word. */
.mk{--mark:url('favicon.svg');position:relative;display:block;flex:none;isolation:isolate;--wl:1px;--wp:3px;--my:0px}
.hlogo.mk{width:1.115em;height:1.556em}
@supports (width:round(1em,1px)) and (width:mod(3em,1px)){.mk{--wl:max(1px,round(.045em,1px));--wp:max(3px,round(.11em,1px));--my:mod(1.278em,var(--wp))}}
.mk .mf,.mk::before,.mk::after{position:absolute;inset:0;-webkit-mask:var(--mark) center/contain no-repeat;mask:var(--mark) center/contain no-repeat}
.mk .mf{background:var(--mkc)}
.mk-lines .mk .mf,.mk-sweep .mk .mf,.mk-sweep .mk::before,.mk-sweep .mk::after{
  -webkit-mask-image:var(--mark),linear-gradient(0deg,transparent 0 var(--wl),#000 var(--wl));mask-image:var(--mark),linear-gradient(0deg,transparent 0 var(--wl),#000 var(--wl));
  -webkit-mask-size:contain,100% var(--wp);mask-size:contain,100% var(--wp);-webkit-mask-repeat:no-repeat,repeat-y;mask-repeat:no-repeat,repeat-y;
  -webkit-mask-position:center,0 var(--my);mask-position:center,0 var(--my);-webkit-mask-composite:source-in;mask-composite:intersect}
/* .mk-sweep: a warm band, a split and a glow pass through the mark first; ANALOG's sweep follows 0.9 s later */
.mk-sweep .mk .mf{background:linear-gradient(100deg,#F44611 0 38%,#FFB200 45%,#FAD201 50%,#FFE7A3 53%,#F44611 62% 100%);background-size:300% 100%;background-position:100% 0;animation:mkBand 5.6s cubic-bezier(.45,0,.25,1) infinite}
.mk-sweep .mk{filter:drop-shadow(0 0 .06em rgba(244,70,17,.18));animation:mkGlow 5.6s ease-in-out infinite}
.mk-sweep .mk::before,.mk-sweep .mk::after{content:'';z-index:-1;mix-blend-mode:screen;opacity:0;animation:mkSplitR 5.6s ease-in-out infinite}
.mk-sweep .mk::before{background:#F44611}.mk-sweep .mk::after{background:#0089B6;animation-name:mkSplitB}
.mk-sweep .crtwm.loop .wf,.mk-sweep .crtwm.loop .wa,.mk-sweep .crtwm.loop .wa::before,.mk-sweep .crtwm.loop .wa::after{animation-delay:.9s}
@keyframes mkBand{0%{background-position:100% 0}24%,100%{background-position:0% 0}}
@keyframes mkGlow{0%,28%,100%{filter:drop-shadow(0 0 .06em rgba(244,70,17,.18))}12%{filter:drop-shadow(0 0 .16em rgba(244,70,17,.5))}}
@keyframes mkSplitR{0%,2%{opacity:0;transform:translateX(0)}11%{opacity:.7;transform:translateX(-.05em)}17%{opacity:.5;transform:translateX(-.035em)}26%,100%{opacity:0;transform:translateX(0)}}
@keyframes mkSplitB{0%,2%{opacity:0;transform:translateX(0)}11%{opacity:.7;transform:translateX(.05em)}17%{opacity:.5;transform:translateX(.035em)}26%,100%{opacity:0;transform:translateX(0)}}
/* with the power-on, the mark's sweep starts at 0.9 s and ANALOG's at 1.8 s */
.hbrand.poweron.mk-sweep .mk{animation:crtOn .9s cubic-bezier(.2,.7,.2,1) both,mkGlow 5.6s ease-in-out .9s infinite}
.hbrand.poweron.mk-sweep .mk .mf,.hbrand.poweron.mk-sweep .mk::before,.hbrand.poweron.mk-sweep .mk::after{animation-delay:.9s}
.hbrand.poweron.mk-sweep .crtwm.loop .wf,.hbrand.poweron.mk-sweep .crtwm.loop .wa,.hbrand.poweron.mk-sweep .crtwm.loop .wa::before,.hbrand.poweron.mk-sweep .crtwm.loop .wa::after{animation-delay:1.8s}
/* the welcome screen's lockup is large enough for the scanlined, sweeping mark (a 48 px mark); phones get the small solid one */
#welcome .hbrand.mk-sweep .hwm,#welcome .hlogo.mk{font-size:31px}
@media (max-width:600px){#welcome .hbrand.mk-sweep .hwm,#welcome .hlogo.mk{font-size:18px}#welcome .hbrand.mk-sweep .hwm{--wl:1px;--wp:4px}
  #welcome .mk-sweep .mk .mf{-webkit-mask:var(--mark) center/contain no-repeat;mask:var(--mark) center/contain no-repeat;background:var(--mkc);animation:none}#welcome .mk-sweep .mk::before,#welcome .mk-sweep .mk::after{display:none}#welcome .mk-sweep .mk{filter:none}}
@media (max-width:600px) and (min-resolution:2dppx){#welcome .hbrand.mk-sweep .hwm{--wl:.5px;--wp:3px}}
@media (prefers-reduced-motion:reduce){.mk,.mk .mf,.mk::before,.mk::after{animation:none!important}}
.mark .car{width:8px;height:5px;fill:none;stroke:var(--faint);stroke-width:1.3;margin:1px 0 0 -2px}
.tb{flex:none;width:32px;height:32px;border:0;border-radius:var(--r-m);background:transparent;color:var(--dim);display:grid;place-items:center;padding:0}
.tb svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.tb:hover{background:var(--panel);color:var(--text)}
.tb:disabled{opacity:.3;pointer-events:none}
.tb.sm{width:26px;height:26px;border-radius:var(--r-m)}.tb.sm svg{width:14px;height:14px}

.tb.pt[aria-pressed="true"]{color:var(--text)}
.tsep{width:1px;height:16px;background:var(--hair);margin:0 4px;align-self:center}
.tgrp{display:flex;gap:0;padding:0 4px;border-left:1px solid var(--hair)}
.tsep{width:1px;height:20px;background:var(--hair);margin:0 2px;flex:none}
.top .btn.tbtn{background:var(--panel);height:32px;padding:0 12px;font-size:var(--fs-m)}
.top .btn.tbtn:hover{background:var(--ctl)}
.top .btn.tbtn[aria-pressed="true"]{background:var(--text);color:var(--bg)}
#exportBtn{height:32px;padding:0 14px}
#canvasBtn b{font-weight:500}#canvasBtn #cvFpsLbl{color:var(--dim);font:500 var(--fs-s) var(--mono);font-variant-numeric:tabular-nums}
.cvori{display:inline-block;width:13px;height:9px;border:1.4px solid currentColor;border-radius:2px;opacity:.75;flex:none}.cvori.port{width:9px;height:13px}.cvori.sq{width:11px;height:11px}
.tz-l>.pop-wrap{margin-left:2px}#canvasBtn #cvSizeLbl{color:var(--dim);font:500 var(--fs-s) var(--mono);font-variant-numeric:tabular-nums}
#canvasBtn .car{color:var(--faint)}
.doc{padding-left:10px;border-left:1px solid var(--hair);min-width:0}
.doc b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.main{--lw:var(--lwu,316px);--rw:var(--rwu,328px);grid-template-columns:var(--lw) 10px minmax(0,1fr) 10px var(--rw);gap:0}
.main.nol{--lw:44px}.main.nor{--rw:44px}
.main>.col.left,.main>.col.right{overflow:hidden}
.side{height:100%;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.lhead{padding-left:8px;justify-content:flex-start;gap:8px;border-bottom:1px solid var(--hair)}
.lhead #chainAdd{margin-left:auto;width:26px;height:24px;padding:0;display:grid;place-items:center}
#chainAdd svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
#chainAdd[aria-expanded="true"]{background:var(--acc);color:#0A0A0A}
.addpop{min-width:236px}
.addpop .bo{display:grid;grid-template-columns:22px 1fr;column-gap:8px;align-items:center;padding:7px 10px}
.addpop .bo i{grid-row:span 2;width:22px;height:22px;border-radius:var(--r-s);background:var(--ctl);display:grid;place-items:center;font:600 var(--fs-s) var(--mono);font-style:normal;color:var(--acc)}
.addpop .bo b{font-weight:500;font-size:var(--fs-m);color:var(--text)}.addpop .bo span{font-size:var(--fs-s);color:var(--faint);line-height:1.3}
.addpop .bo.on span{color:var(--dim)}
.ltabs{flex:none;display:flex;align-items:center;height:40px;padding:0 8px;border-bottom:1px solid var(--hair)}
.ltabs .stabs button[aria-selected="true"]::after{bottom:-7px}
.ltabs .stabs{overflow-x:auto;scrollbar-width:none}.ltabs .stabs::-webkit-scrollbar{display:none}.ltabs .stabs button{white-space:nowrap;padding:7px 6px;flex:none;font-size:var(--fs-s)}.ltabs .stabs button[aria-selected="true"]::after{left:6px;right:6px}
.rhead{padding-left:8px;border-bottom:1px solid var(--hair)}.rhead .stitle{padding-left:6px}
.shead.lhead,.shead.rhead{padding-left:8px}
.lhead,.rhead{height:42px;min-height:42px;flex:none;padding-top:0;padding-bottom:0;padding-right:8px}

.rhead .tgl{margin-left:auto}
.tgl svg{transition:transform .15s}
.main.nol #tglL svg,.main.nor #tglR svg{transform:rotate(180deg)}
.app.nob #tglB svg{transform:rotate(180deg)}
.lpane,.side>.connect{flex:1;min-height:0;overflow:auto;scrollbar-width:thin}
.lpane .add{margin:10px 8px 0;border:0;padding:0 4px}
.lpane .add .chips{margin-top:0}
.insp{flex:1 1 auto;min-height:140px;overflow:auto;scrollbar-width:thin}
.chainsec{flex:0 0 auto;height:46%;min-height:90px;overflow:auto;border-top:0;padding-top:4px;padding-bottom:10px;scrollbar-width:thin}
.split{flex:none;height:10px;margin:-5px 0;position:relative;z-index:5;cursor:row-resize;touch-action:none;outline:0}
.split::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:linear-gradient(90deg,transparent,rgba(236,236,231,.09) 12%,rgba(236,236,231,.09) 88%,transparent);transition:background .18s,box-shadow .18s}
.split::after{content:"";position:absolute;left:50%;top:50%;width:28px;height:4px;margin:-2px 0 0 -14px;border-radius:var(--r-xs);background:var(--ctl-hi);box-shadow:0 0 0 3px var(--panel);transition:background .18s,width .18s,margin .18s,box-shadow .18s}
.split:hover::before,.split.drag::before,.split:focus-visible::before{background:linear-gradient(90deg,transparent,rgba(244,70,17,.6) 10%,rgba(244,70,17,.6) 90%,transparent);box-shadow:0 0 10px rgba(244,70,17,.35)}
.split:hover::after,.split.drag::after,.split:focus-visible::after{background:var(--acc);width:44px;margin-left:-22px;box-shadow:0 0 0 3px var(--panel),0 0 12px rgba(244,70,17,.55)}
.gutter{position:relative;cursor:col-resize;touch-action:none;outline:0;z-index:6}
.gutter::before{content:"";position:absolute;top:14px;bottom:14px;left:50%;width:1px;margin-left:-.5px;background:linear-gradient(180deg,transparent,rgba(236,236,231,.06) 10%,rgba(236,236,231,.06) 90%,transparent);transition:background .18s,box-shadow .18s}
.gutter::after{content:"";position:absolute;top:50%;left:50%;width:4px;height:28px;margin:-14px 0 0 -2px;border-radius:var(--r-xs);background:var(--ctl-hi);box-shadow:0 0 0 3px var(--bg);transition:background .18s,height .18s,margin .18s,box-shadow .18s}
.gutter:hover::before,.gutter.drag::before,.gutter:focus-visible::before{background:linear-gradient(180deg,transparent,rgba(244,70,17,.6) 8%,rgba(244,70,17,.6) 92%,transparent);box-shadow:0 0 10px rgba(244,70,17,.35)}
.gutter:hover::after,.gutter.drag::after,.gutter:focus-visible::after{background:var(--acc);height:44px;margin-top:-22px;box-shadow:0 0 0 3px var(--bg),0 0 12px rgba(244,70,17,.55)}
.main.nol #gL,.main.nor #gR{pointer-events:none}.main.nol #gL::after,.main.nor #gR::after{display:none}
body.resizing,body.resizing *{user-select:none!important;-webkit-user-select:none!important}
.lside.sized .chainsec{flex:none;height:var(--chainH);max-height:none;min-height:0}
.rail-chain{display:flex;flex-direction:column;align-items:center;gap:4px}
.main.nol .split{display:none}
.btn.xs{padding:4px 9px;font-size:var(--fs-s);border-radius:var(--r-m)}
.rail{display:none;flex-direction:column;align-items:center;gap:4px;padding:6px 0 10px;overflow:auto;scrollbar-width:none;flex:1;min-height:0}
.main.nol .lside>:not(.lhead):not(.rail),.main.nol .lhead>:not(.tgl){display:none!important}
.main.nor .rside>:not(.rhead):not(.rail),.main.nor .rhead .stitle{display:none!important}
.main.nol #railL,.main.nor #railR{display:flex}
.main.nol .lhead,.main.nor .rhead{border-bottom-color:transparent}
.rchip{position:relative;width:30px;height:30px;border:0;border-radius:var(--r-m);background:var(--bg);color:var(--dim);font:600 var(--fs-xs) var(--mono);letter-spacing:0;display:grid;place-items:center;padding:0;flex:none}
.rchip:hover{background:var(--ctl);color:var(--text)}
.rchip.sel{box-shadow:inset 0 0 0 1px var(--ctl-hi);color:var(--text)}
.rchip .led{position:absolute;right:3px;bottom:3px;width:5px;height:5px}
.rchip.off{opacity:.45}.rchip{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:pan-y;overflow:hidden}
.rchip>.rlab{position:absolute;inset:0;display:grid;place-items:center;transition:transform .18s cubic-bezier(.2,.9,.25,1),opacity .18s}.rchip.swiping>.rlab{transition:none}
.rchip>.rtr{position:absolute;inset:0;display:grid;place-items:center;border-radius:inherit;background:linear-gradient(#d0242d,var(--warn));color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 10px rgba(193,18,28,.55);transform:translateX(110%);transition:transform .2s cubic-bezier(.2,.9,.25,1)}
.rchip>.rtr svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.rchip.trash{opacity:1}.rchip.trash>.rtr{transform:none}.rchip.trash>.rlab{transform:translateX(-110%);opacity:0}
.rchip.flash>.rlab{animation:rflash .4s cubic-bezier(.2,.9,.25,1)}.rchip.flash .led{animation:rled .5s}
@keyframes rflash{0%{transform:translateX(10px)}100%{transform:none}}@keyframes rled{0%{transform:scale(2.2)}100%{transform:none}}
.rchip.gone{animation:rgone .19s ease-in forwards}@keyframes rgone{to{transform:translateX(-120%) scale(.6);opacity:0}}
.rchip.acc{color:var(--acc)}
.rsep{width:14px;height:1px;background:var(--hair);margin:2px 0}
.lib{display:grid;gap:14px;padding:12px 10px 16px}
.lib .lbl{padding:0 4px}
.libl{display:grid;gap:2px;margin-top:6px}
.libi{display:flex;align-items:center;gap:9px;border:0;background:none;text-align:left;padding:6px 6px;border-radius:var(--r-m);font-size:var(--fs-m);color:var(--text);min-width:0;width:100%}
.libi:hover{background:var(--ctl)}
.libi img,.libi .ph0{width:40px;height:24px;border-radius:var(--r-s);object-fit:cover;background:#000;flex:none;box-shadow:inset 0 0 0 1px var(--hair)}
.libi span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.libi em{margin-left:auto;font:400 var(--fs-xs) var(--mono);font-style:normal;color:var(--faint);letter-spacing:0;flex:none}
.libm{display:flex;align-items:center;gap:8px;padding:5px 6px;font-size:var(--fs-m)}
.libm .k{font:500 var(--fs-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);width:48px;flex:none}
.libm .v{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.libm .v.none{color:var(--faint)}
.lib .empty0{padding:6px;color:var(--faint);font-size:var(--fs-m);margin:0}
.lib .row0{display:flex;gap:6px;margin-top:6px;padding:0 4px}
.app.nob .barh{grid-template-columns:1fr auto;grid-template-rows:auto;align-items:end}
.app.nob .barh .bhint{display:none}
.app.nob .barh .stitle{align-self:center}
.keys.dragging{scroll-snap-type:none;cursor:grabbing}.keys.dragging .key{cursor:grabbing}
.app.nob .keys{align-items:stretch;scrollbar-width:none}.app.nob .keys::-webkit-scrollbar{display:none} /* minimized, the keys fill the bar's height, the same as the Looks block beside them */
.app.nob .key{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto;column-gap:7px;row-gap:0;align-items:center;padding:6px 9px;border-radius:var(--r-m)}
.app.nob .key .t{grid-column:2;grid-row:1;font-size:var(--fs-m)}
.app.nob .key .led{grid-column:3;grid-row:1}
.app.nob .key .s{display:none}
.shead{min-height:42px;padding:6px 8px 6px 14px;align-items:center}
.stitle{font:var(--t-panel);display:flex;align-items:baseline;gap:8px} /* panel titles: change --t-panel to restyle them all */
.stitle .lbl{font-size:var(--fs-xs)}
.side{display:flex;flex-direction:column;min-height:0}

.stabs{display:flex;gap:2px}
.stabs button{border:0;background:none;padding:7px 10px;border-radius:var(--r-m);font-weight:500;font-size:var(--fs-m);color:var(--dim);position:relative}
.stabs button:hover{color:var(--text)}
.stabs button[aria-selected="true"]{color:var(--text)}
.stabs button[aria-selected="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:-7px;height:2px;border-radius:var(--r-xs);background:var(--acc)}
.params{padding-top:4px}
.ptabs{position:sticky;top:0;z-index:6;display:flex;gap:2px;margin:2px 10px 8px;padding:3px;border-radius:var(--r-m);background:var(--panel);box-shadow:inset 0 0 0 1px var(--hair)}.ptabs[hidden]{display:none}
.ptab{flex:1 1 auto;min-width:0;border:0;background:none;border-radius:var(--r-s);padding:6px 3px;color:var(--dim);font:500 var(--fs-xs) var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Slide switch: a smoked glass thumb under the chosen option, its label backlit with a pin of light under it; a dim pin marks an option with something in use */
.ssw{background:#0f1112!important;box-shadow:inset 0 2px 5px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.04)!important;touch-action:pan-y}
.ssw>.sswk{position:absolute;z-index:0;left:0;top:0;width:0;height:0;border-radius:7px;pointer-events:none;opacity:0;background:linear-gradient(180deg,rgba(10,11,12,.35),rgba(10,11,12,.6));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.09),0 3px 8px -2px rgba(0,0,0,.9);transition:transform .36s cubic-bezier(.3,1.3,.4,1),width .36s cubic-bezier(.3,1.3,.4,1),height .36s cubic-bezier(.3,1.3,.4,1),opacity .15s}
.ssw>.sswk::after{content:"";position:absolute;left:1px;right:1px;top:1px;height:55%;border-radius:6px 6px 2px 2px;background:linear-gradient(rgba(255,255,255,.13),rgba(255,255,255,.035) 70%,rgba(255,255,255,0))} /* a matte sheen that hugs the thumb's top edge */
.ssw>.sswk.on{opacity:1}.ssw>.sswk.moving{scale:1.06 .86}.ssw.drag>.sswk{transition:width .12s,height .12s}.ssw.drag{cursor:grabbing}
.ssw>button{position:relative;z-index:1;background:none!important;box-shadow:none!important;transition:color .2s,text-shadow .2s}
.ssw>button.sswon{color:#FFB38F!important;text-shadow:0 0 8px rgba(244,70,17,.55),0 0 2px rgba(244,70,17,.6)}
.ssw>button.sswon::after,.ssw>button.inuse:not(.sswon)::after{content:"";position:absolute;left:50%;bottom:2px;width:14px;height:2px;margin-left:-7px;border-radius:2px;background:var(--acc);box-shadow:0 0 6px var(--acc)}
.ssw>button.inuse:not(.sswon)::after{background:#ffc21a;box-shadow:0 0 5px rgba(255,194,26,.75)}.ssw>button.inuse:not(.sswon){color:#a3a6a8}
/* one shape everywhere: a 10px track, 3px in, a 7px thumb, so the corners nest */
.ssw{border-radius:10px!important;padding:3px!important}.ssw>button{border-radius:7px!important;display:inline-flex;align-items:center;justify-content:center}
.viewseg.ssw>button{gap:6px;line-height:1}
/* the Tune tab bar is one dark band the width of the panel (no inner box) */
.params>.ptabs.ssw{border-radius:0!important;padding:4px 10px 5px!important}.params>.ptabs.ssw::before{display:none}
/* Keybed: one keycap across Tune, modeled on Flip. A latch key stays down until pressed again; a bank picks one (where none is allowed, the lit key pressed again clears it); a momentary key flashes its LED. Amber means what's set. */
.kbank{display:grid!important;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:0!important;padding:0!important;margin:4px;border-radius:5px;overflow:hidden;background:#07080a;box-shadow:0 0 0 3px #07080a,0 0 0 4px rgba(255,255,255,.06)}
.kbank>.kc,:is(#params,.top,#colL,#stage,.blendpop,#createWin) .btn:where(:not(#exportBtn,#exportPop .acc,.gokey)){position:relative;min-width:0;min-height:28px;border:0;margin:0;background:linear-gradient(#2c2f33,#1d1f22);font:500 var(--fs-xs)/1.15 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);cursor:pointer;transition:color .15s,text-shadow .15s,background .12s,box-shadow .12s,translate .08s}
.kbank>.kc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:9px 4px 5px;border-radius:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset -1px 0 0 rgba(0,0,0,.6),inset 0 -1px 0 rgba(0,0,0,.55);white-space:normal;text-align:center;overflow-wrap:break-word}
.kbank>.kc.ic{min-height:44px}
.kbank>.kc svg,:is(#params,.top,#colL,#stage,.blendpop,#createWin) .btn:where(:not(#exportBtn,#exportPop .acc,.gokey)) svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;flex:none}
:is(#params,.top,#colL,#stage,.blendpop,#createWin) .btn:where(:not(#exportBtn,#exportPop .acc,.gokey)){display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;padding:6px 14px 6px 10px;border-radius:5px;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 0 0 1px #07080a,0 2px 3px -1px rgba(0,0,0,.6);white-space:nowrap}
.kbank>.kc::after,:is(#params,.top,#colL,#stage,.blendpop,#createWin) .btn:where(:not(#exportBtn,#exportPop .acc,.gokey))::after{content:"";position:absolute;top:3px;right:4px;width:4px;height:4px;border-radius:50%;background:#2b1a13;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6);transition:background .15s,box-shadow .15s}
.kbank>.kc:hover,:is(#params,.top,#colL,#stage,.blendpop,#createWin) .btn:where(:not(#exportBtn,#exportPop .acc,.gokey)):hover{color:var(--text);background:linear-gradient(#34383c,#222528);filter:none}
.kbank>.kc:active,:is(#params,.top,#colL,#stage,.blendpop,#createWin) .btn:where(:not(#exportBtn,#exportPop .acc,.gokey)):active{translate:0 1px;background:linear-gradient(#1d1f22,#2a2d30);box-shadow:inset 0 2px 4px rgba(0,0,0,.7)}
.kbank>.kc:is([aria-pressed="true"],[aria-checked="true"]),:is(#params,.top,#colL,#stage,.blendpop,#createWin) .btn:where(:not(#exportBtn,#exportPop .acc,.gokey))[aria-pressed="true"]{color:var(--disp);text-shadow:0 0 6px rgba(255,178,0,.55);background:linear-gradient(#1b1d20,#26292c);box-shadow:inset 0 2px 5px rgba(0,0,0,.75),inset -1px 0 0 rgba(0,0,0,.6)}
.kbank>.kc:is([aria-pressed="true"],[aria-checked="true"])::after,:is(#params,.top,#colL,#stage,.blendpop,#createWin) .btn:where(:not(#exportBtn,#exportPop .acc,.gokey))[aria-pressed="true"]::after{background:var(--disp);box-shadow:0 0 6px 1px rgba(255,178,0,.85)}
.kbank>.kc.blink::after,:is(#params,.top,#colL,#stage,.blendpop,#createWin) .btn:where(:not(#exportBtn,#exportPop .acc,.gokey)).blink::after{animation:xfqblink .5s ease-out}
.kbank>.kc:disabled,:is(#params,.top,#colL,#stage,.blendpop,#createWin) .btn:where(:not(#exportBtn,#exportPop .acc,.gokey)):disabled{opacity:1;cursor:default;color:#3d4245;background:linear-gradient(#232528,#1b1d1f);text-shadow:none;translate:none}.kbank>.kc:disabled::after,:is(#params,.top,#colL,#stage,.blendpop,#createWin) .btn:where(:not(#exportBtn,#exportPop .acc,.gokey)):disabled::after{opacity:.4}
.kbank>.kc:focus-visible,:is(#params,.top,#colL,#stage,.blendpop,#createWin) .btn:where(:not(#exportBtn,#exportPop .acc,.gokey)):focus-visible{outline:1px solid rgba(244,70,17,.7);outline-offset:-2px;z-index:1}
.kbank>.kc kbd,:is(#params,.top,#colL,#stage,.blendpop,#createWin) .btn:where(:not(#exportBtn,#exportPop .acc,.gokey)) kbd{font:500 var(--fs-2xs) var(--mono-ui);letter-spacing:0;background:none;color:var(--faint);padding:0}
.kbank>.kc[hidden],:is(#params,.top,#colL,#stage,.blendpop,#createWin) .btn:where(:not(#exportBtn,#exportPop .acc,.gokey))[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.kbank>.kc,:is(#params,.top,#colL,#stage,.blendpop,#createWin) .btn:where(:not(#exportBtn,#exportPop .acc,.gokey)){transition:none;translate:none!important}.kbank>.kc.blink::after,:is(#params,.top,#colL,#stage,.blendpop,#createWin) .btn:where(:not(#exportBtn,#exportPop .acc,.gokey)).blink::after{animation:none}}
/* Tiles: the same key surface, taller, carrying a preview; the chosen one presses in and lights its LED */
:is(#params,#createWin) :is(.fontgrid button,.gbtn,.mtile){position:relative;border:0;background:linear-gradient(#2a2d31,#1c1e21);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px #07080a}
:is(#params,#createWin) :is(.fontgrid button,.gbtn,.mtile):hover{background:linear-gradient(#32363a,#212427)}
:is(#params,#createWin) :is(.fontgrid button,.gbtn,.mtile)::after{content:"";position:absolute;top:3px;right:4px;width:4px;height:4px;border-radius:50%;background:#2b1a13;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
:is(#params,#createWin) :is(.fontgrid button,.gbtn,.mtile)[aria-pressed="true"]{background:linear-gradient(#1b1d20,#26292c);box-shadow:inset 0 2px 5px rgba(0,0,0,.75),0 0 0 1px #07080a}
:is(#params,#createWin) :is(.fontgrid button,.gbtn,.mtile)[aria-pressed="true"]::after{background:var(--disp);box-shadow:0 0 6px 1px rgba(255,178,0,.85)}
#params .fontgrid button[aria-pressed="true"] :is(b,span),:is(#params,#createWin) .gbtn[aria-pressed="true"] b,#params .mtile[aria-pressed="true"] span{color:var(--disp)}
/* Settings light amber; the Tune tabs stay orange because they're where you are */
#params .ssw:not(.ptabs)>button.sswon{color:var(--disp)!important;text-shadow:0 0 7px rgba(255,178,0,.55),0 0 2px rgba(255,178,0,.5)}
#params .ssw:not(.ptabs)>button.sswon::after{background:var(--disp);box-shadow:0 0 6px var(--disp)}
.fph .fpstate.none{color:var(--faint);text-shadow:none}
.xfbar{display:grid;gap:8px;padding:2px 6px 8px}.xfbar .xfacts>.kc{flex-direction:row;min-height:30px}
.mkrow.kbank{margin:4px 8px 10px}
.logo-row{grid-template-columns:1fr 3fr;gap:8px}
.src-go.kbank{grid-template-columns:none;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column}
.bgtypes.kbank{--n:3}
#tPath.kbank>.kc svg{width:22px;height:11px}
@media (prefers-reduced-motion:reduce){.ssw>.sswk{transition:opacity .15s}.ssw>.sswk.moving{scale:none}}
.ptab:hover{color:var(--text)}.ptab[aria-selected="true"]{color:var(--text);background:var(--ctl);box-shadow:inset 0 -2px 0 var(--acc)}
.params .ptoff{display:none!important}
.connect .tabs{margin:12px 8px 0}
.agent-lede{margin:12px 14px 0;color:var(--dim);font-size:var(--fs-m)}
.hud .tr{font-variant-numeric:tabular-nums}
.hud .tr b{color:var(--text)}
.bar{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:stretch;position:relative}
.gutter.hz{position:absolute;left:0;right:0;top:-9px;height:10px;cursor:row-resize}
.gutter.hz::before{top:50%;bottom:auto;left:14px;right:14px;width:auto;height:1px;margin:-.5px 0 0;background:linear-gradient(90deg,transparent,rgba(236,236,231,.06) 10%,rgba(236,236,231,.06) 90%,transparent)}
.gutter.hz::after{width:28px;height:4px;margin:-2px 0 0 -14px}
.gutter.hz:hover::before,.gutter.hz.drag::before,.gutter.hz:focus-visible::before{background:linear-gradient(90deg,transparent,rgba(244,70,17,.6) 8%,rgba(244,70,17,.6) 92%,transparent)}
.gutter.hz:hover::after,.gutter.hz.drag::after,.gutter.hz:focus-visible::after{height:4px;width:44px;margin:-2px 0 0 -22px}
.app.nob .gutter.hz{display:none}
.key .kth{display:none}
/* dock sizing is a desktop thing: the grip is hidden at 900px and below, so a saved size never reshapes the phone dock */
@media (min-width:901px),(min-width:700px) and (orientation:portrait){
.app.sizedb:not(.nob) .bar{height:var(--bh)}
.app.sizedb:not(.nob) .keys{align-items:stretch}
/* a sized bar never grows past its height: rows shrink, thumbnails give way, and a short bar switches to one-line recipe cards */
.app.sizedb:not(.nob) .bar{grid-template-rows:minmax(0,1fr)}
.app.sizedb:not(.nob) .keyswrap,.app.sizedb:not(.nob) .barh,.app.sizedb:not(.nob) .key{min-height:0}
.app.sizedb:not(.nob) .keys{grid-template-rows:minmax(0,1fr)}
.app.shortb:not(.nob) .barh{grid-template-columns:1fr auto;grid-template-rows:auto;align-items:center}
.app.shortb:not(.nob) .barh .bhint{display:none}
.app.shortb:not(.nob) .keys{align-items:center}
.app.shortb:not(.nob) .key{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto;column-gap:7px;row-gap:0;align-items:center;padding:6px 9px}
.app.shortb:not(.nob) .key .t{grid-column:2;grid-row:1;font-size:var(--fs-m)}
.app.shortb:not(.nob) .key .led{grid-column:3;grid-row:1}
.app.shortb:not(.nob) .key .s{display:none}
.app.tallb:not(.nob) .key{grid-template-rows:minmax(0,1fr) auto auto;align-content:stretch}
.app.tallb:not(.nob) .key .kth{display:block;grid-column:1/-1;grid-row:1;width:100%;height:100%;min-height:0;object-fit:cover;border-radius:var(--r-s);background:#000}
.app.tallb:not(.nob) .key .n,.app.tallb:not(.nob) .key .led{grid-row:2}
.app.tallb:not(.nob) .key .t{grid-row:3}.app.tallb:not(.nob) .key .s{grid-row:4}
}
.key.dropping{border-color:var(--acc);background:rgba(244,70,17,.12)}
.barlink{border:0;background:none;padding:0;color:var(--text);cursor:pointer;text-align:left}.barlink:hover{color:var(--acc)}
.key.previewing{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
.barh{display:grid;grid-template-rows:auto auto 1fr;align-content:start;justify-items:start;gap:2px;background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-l);padding:9px 6px 6px 12px;width:104px}
.barh .bhint>span{display:block}.barh .bhint{font:400 var(--fs-xs)/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.barh .tb{justify-self:end;margin-top:-4px}
/* ✦ Mix on the Looks bar: an instrument key (the go-key with its amber LED strip), sized to the bar's header */
#paneLooks .ufxnew{grid-column:1/-1;white-space:nowrap}
.btn.gokey.lask{width:100%;height:30px;margin:2px 0 0;align-self:end;padding:0 8px 6px;font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase}.btn.gokey.lask::after{left:10px;right:10px;bottom:5px}
/* ✦ on a key (Mix, Generate effect, Generate): one big amber star, balanced against the word */
.gstar{display:inline-block;font-size:1.9em;line-height:0;vertical-align:-.1em;position:relative;top:-.095em;margin-right:.14em;color:var(--disp);text-shadow:0 0 8px rgba(255,178,0,.45)}
.ufxnew .gstar{top:-.06em}#lookAsk .gstar{top:-.035em} /* each key's type sits differently: these keep the ✦ centered on the words */
/* One row (collapsed bar, short bar, phone): the Add / Replace tray and ✦ Mix share one height, ring included, centered on the row */
.app.nob .barh>.lmode.kbank>.kc,.barh.row1>.lmode.kbank>.kc{min-height:30px;padding:4px 8px}
.app.nob .barh .lask{height:36px;align-self:center}.app.nob .barh>.lmode.kbank{align-self:center}
.btn.gokey.lask[aria-expanded="true"]{box-shadow:inset 0 2px 6px rgba(0,0,0,.75),0 0 0 1px #07080a;translate:0 1px}
.askpop{position:absolute;left:0;bottom:calc(100% + 8px);z-index:30;width:min(460px,calc(100vw - 24px));display:grid;gap:8px;padding:12px;background:rgba(18,19,21,.97);border:1px solid var(--acc);border-radius:var(--r-m);box-shadow:0 12px 34px rgba(0,0,0,.6)}
.askpop[hidden]{display:none}.askpop .tag{margin-left:6px}.askpop .askrow{display:flex;gap:6px}.askpop input{flex:1;min-width:0;padding:8px 10px;border:0;border-radius:6px;background:#07080a;color:var(--disp);font:500 var(--fs-s) var(--mono);box-shadow:inset 0 1px 3px rgba(0,0,0,.7)}
.askpop .askst{margin:0;color:var(--dim);font-size:var(--fs-s)}
.askpop .askref{display:flex;align-items:center;gap:8px;min-height:30px}.askpop .askrefh{color:var(--faint);font-size:var(--fs-s)}.askpop.drag{border-style:dashed;background:rgba(30,22,18,.97)}
.askpop .askrefimg{position:relative;display:inline-flex}.askpop .askrefimg img{height:44px;max-width:120px;border-radius:5px;object-fit:cover;box-shadow:0 0 0 1px var(--hair)}
.askpop .askrefimg .ib{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:#1b1d1f;box-shadow:0 0 0 1px var(--hair)}.askpop .askst b{color:var(--text);font-weight:500}
/* The Looks bar's faceplate: a header row (title and collapse), the apply mode as an LED key bank (lit = how a look lands), then ✦ Mix.
   All three share the same width so the panel reads as one instrument, like the switches in Tune. */
.barh .bhead{display:flex;align-items:center;justify-content:space-between;gap:4px;width:100%;min-width:0}.barh .bhead .tb{margin:0 -2px 0 0}
.barh>.lmode.kbank{--n:1;width:calc(100% - 6px);margin:6px 3px 4px;align-self:start}.lmode.kbank>.kc{min-height:24px;padding:5px 4px 4px;flex-direction:row}

.app.nob .barh{width:auto;grid-template-columns:auto auto auto;column-gap:10px}.app.nob .barh>.lmode.kbank{--n:2;width:auto;margin:0 3px}.app.nob .barh .lask{width:auto;margin:0}
@media (min-width:901px),(min-width:700px) and (orientation:portrait){.app.shortb:not(.nob) .barh{width:auto;grid-template-columns:auto auto auto;grid-template-rows:1fr;column-gap:10px;align-items:center;align-content:stretch}.app.shortb .barh>.lmode.kbank{--n:2;width:auto;margin:0 3px;align-self:center}.app.shortb .barh>.lmode.kbank>.kc{min-height:30px;padding:4px 8px}.app.shortb .barh .lask{width:auto;margin:0;height:36px;align-self:center}.app.shortb .barh .bhead{align-self:center}
  .app.shortb:not(.nob) .keys{align-items:stretch}.app.shortb:not(.nob) .key{height:auto;align-self:stretch}}
.keys{gap:6px}
.key{position:relative;overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;row-gap:6px;padding:9px 10px 10px}
.key .s{grid-column:span 2;font:400 var(--fs-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.key.on{border-color:var(--ctl-hi);background:#202326}
.key::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--acc)}
.key.holding::after{width:100%;transition:width 1.2s linear}
.key.saved{box-shadow:inset 0 0 0 1px var(--acc)}
.key.saved .t{color:var(--acc)}
@media (max-width:1560px){.top .btn kbd{display:none}}
@media (max-width:1600px){#saveBtn{display:none}}
@media (max-width:1400px){#canvasBtn .lbl{display:none}}
@media (max-width:980px){#cvFpsLbl{display:none}}@media (max-width:900px){#canvasBtn #cvSizeLbl{display:none}}
@media (max-width:1280px){.key .s{display:none}.key{padding:8px 9px}.mword{display:none}.viewseg span{display:none}}
.viewseg{white-space:nowrap}
.stage.narrow .hud .tl .htxt,.stage.narrow .hud .xtra{display:none}
.stage.tight .hud .tr .htxt{display:none}
@media (max-width:1180px){.main{--lw:var(--lwu,268px);--rw:var(--rwu,296px)}#projMeta{display:none}.doc{max-width:160px}#projName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media (max-width:900px){.doc{display:none}}
@media (max-width:699px),(max-width:900px) and (orientation:landscape){
  .side{height:auto}.main>.col.left,.main>.col.right{overflow:visible}.chainsec{max-height:none}
  html,body{height:auto}
  .app{height:auto}
  .top{display:flex;flex-wrap:wrap}
  .tz-c{order:3;width:100%;overflow-x:auto}
  .main,.main.nol,.main.nor{grid-template-columns:1fr}.gutter{display:none}
  .stage{order:-1;aspect-ratio:4/3;max-width:100%}
  .col{overflow:visible}
  .keys{grid-auto-columns:minmax(108px,1fr)}
  .bar{grid-template-columns:1fr}.barh{width:auto;grid-template-columns:auto 1fr auto;grid-template-rows:auto;align-items:center;gap:10px}.barh>.lmode.kbank{--n:2;width:auto;margin:0 3px;align-self:center}.barh>.lmode.kbank>.kc{min-height:30px;padding:4px 8px}.barh .lask{width:auto;margin:0;height:36px;align-self:center}.barh .bhint>span{display:inline}.barh .bhint>span+span::before{content:"· "}.barh .tb{margin:0}
}
@media (max-width:420px){
  .knob svg{width:42px;height:42px}
  .top .btn kbd{display:none}
}
/* ---------- Depth pass: layered shadows, frosted overlays, blur gradients where content scrolls ---------- */
.panel{box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 10px 30px -18px rgba(0,0,0,.8)}
.modal{background:radial-gradient(120% 90% at 50% 40%,rgba(10,10,10,.42),rgba(0,0,0,.8));backdrop-filter:blur(12px) saturate(115%);-webkit-backdrop-filter:blur(12px) saturate(115%);animation:dfade .18s ease-out}
.modal-card{position:relative;background:linear-gradient(180deg,#212427,#1b1d1f 45%);border:1px solid rgba(236,236,231,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 4px rgba(0,0,0,.35),0 14px 30px -8px rgba(0,0,0,.55),0 44px 100px -24px rgba(0,0,0,.85);animation:dpop .24s cubic-bezier(.2,.9,.25,1)}
.pop,.blendpop,.kmenu{background:rgba(27,29,31,.86);backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%);border-color:rgba(236,236,231,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 2px 6px rgba(0,0,0,.35),0 20px 48px -10px rgba(0,0,0,.75);animation:dpop .16s cubic-bezier(.2,.9,.25,1)}
@keyframes dfade{from{opacity:0}}
@keyframes dpop{from{opacity:0;transform:translateY(6px) scale(.985)}}
.toast{box-shadow:0 2px 6px rgba(0,0,0,.3),0 14px 34px -8px rgba(0,0,0,.6)}
.viewseg,.ghost-flag,.vbar{backdrop-filter:blur(12px) saturate(130%);-webkit-backdrop-filter:blur(12px) saturate(130%);box-shadow:0 8px 24px -10px rgba(0,0,0,.7)}
/* ---------- Liquid glass: floating surfaces frost and bend what's under them, with a lit rim and a soft sheen ---------- */
:root{--gl-sh:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 1px rgba(255,255,255,.05),inset 0 0 22px rgba(255,255,255,.03),0 1px 2px rgba(0,0,0,.3),0 12px 28px -8px rgba(0,0,0,.5),0 40px 90px -24px rgba(0,0,0,.72)}
.pop,.blendpop,.kmenu,.modal-card{isolation:isolate;border:1px solid rgba(255,255,255,.09);box-shadow:var(--gl-sh);
  background:linear-gradient(155deg,rgba(255,255,255,.1),rgba(255,255,255,.02) 34%,rgba(255,255,255,0) 60%,rgba(255,255,255,.045)),rgba(20,22,24,var(--gl-a,.44));
  backdrop-filter:blur(20px) saturate(190%) brightness(1.08);-webkit-backdrop-filter:blur(20px) saturate(190%) brightness(1.08)}
.blendpop,.kmenu,.pop{--gl-a:.58}.modal-card{--gl-a:.7}
.addpop .bo span{color:rgba(236,236,231,.55)}.addpop .bhint,.addpop .apg{color:rgba(236,236,231,.45)}
.pop::before,.blendpop::before,.kmenu::before,.modal-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:linear-gradient(150deg,rgba(255,255,255,.55),rgba(255,255,255,.1) 22%,rgba(255,255,255,0) 48%,rgba(255,255,255,.04) 70%,rgba(255,255,255,.3));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.pop::after,.blendpop::after,.kmenu::after,.modal-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(90% 55% at 18% -8%,rgba(255,255,255,.13),transparent 60%),radial-gradient(70% 40% at 100% 110%,rgba(255,255,255,.05),transparent 70%)}
.lgref .pop,.lgref .blendpop,.lgref .kmenu{backdrop-filter:url(#lgRefract) blur(18px) saturate(190%) brightness(1.08)}
.blendpop .bo.hov,.blendpop .bo:focus-visible,.addpop .bo:hover{background:rgba(255,255,255,.08)}
.addpop .bo i{background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
/* Add menu: the looks view */
.addpop{overflow:hidden;transition:width .2s cubic-bezier(.2,.9,.25,1)}
.addpop.looks{width:min(320px,calc(100vw - 16px))}
.addpop .apv{display:grid;gap:1px;animation:aslide .2s cubic-bezier(.2,.9,.25,1)}
@keyframes aslide{from{opacity:0;transform:translateX(10px)}}
.addpop .bo.cur b::after{content:" ●";color:var(--acc);font-size:var(--fs-xs);vertical-align:1px}
.addpop .bo.more::after{content:"›";position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:var(--fs-l);color:var(--acc)}
.aphead{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 4px 0}
.apback{display:flex;align-items:center;gap:2px;border:0;background:none;color:var(--dim);font-size:var(--fs-m);padding:4px 8px 4px 2px;border-radius:var(--r-s);cursor:pointer}
.apback:hover,.apback:focus-visible{color:var(--text);background:rgba(255,255,255,.07);outline:0}
.apback svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.aplist{max-height:min(52vh,420px);overflow:auto;padding:0 4px 6px;scrollbar-width:thin}
.apg{font:500 var(--fs-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:8px 2px 5px}
.apchips{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.addpop .chip{background:rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);cursor:pointer}
.addpop .chip:hover,.addpop .chip:focus-visible{background:rgba(244,70,17,.16);color:var(--text);outline:0;box-shadow:inset 0 0 0 1px rgba(244,70,17,.55)}
.apfoot{margin:4px 2px 2px;border:0;border-top:1px solid rgba(255,255,255,.07);background:none;color:var(--dim);font-size:var(--fs-m);padding:9px 8px 6px;text-align:left;cursor:pointer;border-radius:0 0 var(--r-s) var(--r-s)}
.apfoot:hover,.apfoot:focus-visible{color:var(--text);outline:0}.apfoot::after{content:" →";color:var(--acc)}
/* Quick orange glow that says "look here" */
.glowing{animation:aglow 1s cubic-bezier(.3,.7,.3,1)}
.addpop.glowing{animation:aglowpop 1s cubic-bezier(.3,.7,.3,1)}
@keyframes aglow{0%{box-shadow:inset 0 0 0 1.5px rgba(244,70,17,.95),inset 0 0 36px rgba(244,70,17,.35)}100%{box-shadow:inset 0 0 0 1.5px rgba(244,70,17,0),inset 0 0 36px rgba(244,70,17,0)}}
@keyframes aglowpop{0%{box-shadow:var(--gl-sh),0 0 0 1px rgba(244,70,17,.95),0 0 34px 2px rgba(244,70,17,.55)}100%{box-shadow:var(--gl-sh),0 0 0 1px rgba(244,70,17,0),0 0 34px 2px rgba(244,70,17,0)}}
@media (prefers-reduced-motion:reduce){.glowing,.addpop.glowing,.addpop .apv{animation-duration:.01s}}
.viewseg{background:rgba(27,29,31,.72)}
.side{position:relative}
.lhead,.rhead{position:relative;z-index:6}
/* Scroll edge blur: overlays sit beside each scroller (never inside it), three stacked layers that blur harder toward the edge */
.efade{position:absolute;height:30px;pointer-events:none;z-index:7;opacity:0;transition:opacity .22s ease}
.efade.on{opacity:1}
.efade.t{background:linear-gradient(rgba(27,29,31,.78),rgba(27,29,31,0))}
.efade.b{background:linear-gradient(rgba(27,29,31,0),rgba(27,29,31,.78))}
/* Seams between split sections: a soft cast shadow instead of blur, as if the content slides under */
.efade.sh.t{background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.18) 35%,rgba(0,0,0,0))}
.efade.sh.b{background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.18) 65%,rgba(0,0,0,.5))}
@media (max-width:699px),(max-width:820px) and (orientation:landscape){.mnav::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:28px;pointer-events:none;background:linear-gradient(rgba(10,10,10,0),rgba(10,10,10,.85));backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);-webkit-mask-image:linear-gradient(transparent,#000);mask-image:linear-gradient(transparent,#000)}}
/* Phones and small tablets: the preview stays pinned, a strip of layers sits under it, and one panel scrolls below */
.mstrip{display:none}
@media (max-width:699px),(max-width:820px) and (orientation:landscape){
  html,body{height:100%;overflow:hidden}
  .app{height:100dvh;display:flex;flex-direction:column;overflow:hidden}.app>.top{flex:none}
  .main{flex:1 1 auto;min-height:0;display:flex!important;flex-direction:column;gap:6px}
  .stage{position:relative!important;top:auto!important;flex:none;height:38dvh!important;min-height:200px;order:-2}
  .mstrip{display:flex;order:-1;flex:none;gap:6px;overflow-x:auto;padding:0 2px 2px;scrollbar-width:none;align-items:center}.mstrip::-webkit-scrollbar{display:none}.mstrip[hidden]{display:none}
  .main>.col{flex:1 1 auto;min-height:0;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .main>.col .side{height:auto!important;min-height:100%;overflow:visible!important}.insp{overflow:visible!important;min-height:0}
  .main>.col.right .ptabs{top:0;margin:0;border-radius:0 0 var(--r-m) var(--r-m);background:rgba(27,29,31,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  /* the panel is a third of the screen here: only the Tune tabs stay pinned, the LCD and screen deck scroll away with the knobs */
  #pLcd,.fpstick{position:static}
  .app[data-m="presets"] .main{flex:none}.app[data-m="presets"]>.bar{flex:1 1 auto;min-height:0;overflow-y:auto}
  /* Recipes on a phone: a two-column grid that scrolls up and down, header on top */
  .app[data-m="presets"]>.bar{align-content:start;grid-template-rows:auto auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .app[data-m="presets"] .keyswrap{margin:0}.app[data-m="presets"] .kedge{display:none}
  .app[data-m="presets"] .keys{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-columns:auto;grid-template-rows:none;overflow:visible;padding:0}
  .app[data-m="presets"] .key{min-height:78px}
  .lloop,#lLen{min-height:28px}.sw{width:40px;height:24px}.sw::after{width:18px;height:18px}.fpscr button{height:30px}
  .mchip{flex:none;display:flex;align-items:center;gap:7px;max-width:160px;border:0;border-radius:var(--r-m);background:var(--panel);box-shadow:inset 0 0 0 1px var(--hair);color:var(--dim);padding:8px 11px 8px 9px;font:500 var(--fs-s) var(--sans);touch-action:manipulation;-webkit-user-select:none;user-select:none}
  .mchip i{width:4px;height:16px;border-radius:2px;background:var(--mc,var(--dim));flex:none}.mchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mchip.sel{color:var(--text);background:var(--ctl);box-shadow:inset 0 0 0 1.5px var(--acc)}.mchip.off span{text-decoration:line-through;opacity:.55}.mchip em{font-style:normal;color:var(--faint)}
  .mchip.mtool{font:600 var(--fs-m) var(--mono);color:var(--acc);padding:8px 12px}.mchip.mall{font:500 var(--fs-xs) var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
}
@media (max-width:699px),(max-width:820px) and (orientation:landscape){#lanes,.lanesbtn{display:none!important}}
/* phones: the top bar's menus (file, canvas, export) sit above the pinned preview as full-width sheets that scroll */
@media (max-width:699px),(max-width:820px) and (orientation:landscape){.app>.top{position:relative;z-index:60}
  .top .pop{position:fixed!important;left:8px!important;right:8px!important;top:calc(env(safe-area-inset-top,0px) + 54px)!important;width:auto!important;max-width:none!important;max-height:calc(100dvh - 140px - env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain}} /* phones keep the simple transport; the picture gets the room */
@media (max-width:699px) and (min-height:900px){.stage{height:44dvh!important}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Studio kit: the Tune keybed across the whole studio. Keys for everything you play, flat chrome for the case, an amber readout for every value, one orange fill (Export). Green = running, amber = what's set, orange = where you are. */
#exportBtn,#exportPop .btn.acc{background:linear-gradient(#ff5a26,#e23e0c);color:#0A0A0A;border:0;border-radius:6px;font:600 var(--fs-xs) var(--mono);letter-spacing:.06em;text-transform:uppercase;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px #07080a,0 4px 12px -4px rgba(244,70,17,.6)}
#exportBtn:hover,#exportPop .btn.acc:hover{filter:brightness(1.08)}#exportBtn:active,#exportPop .btn.acc:active{translate:0 1px}
#exportBtn kbd,#exportPop .btn.acc kbd{background:none;color:rgba(10,10,10,.55);padding:0;font:500 var(--fs-2xs) var(--mono-ui)}
.top .btn:not(#exportBtn){min-height:32px;padding:0 16px 0 12px}
/* a key whose menu or panel is open lights orange: that's where you are */
:is(.top,#colL,#stage,#createWin) .btn[aria-expanded="true"]:not(#exportBtn){color:#FFB38F;text-shadow:0 0 8px rgba(244,70,17,.55);background:linear-gradient(#1b1d20,#26292c);box-shadow:inset 0 2px 5px rgba(0,0,0,.75),0 0 0 1px #07080a}
:is(.top,#colL,#stage,#createWin) .btn[aria-expanded="true"]:not(#exportBtn)::after{background:var(--acc);box-shadow:0 0 6px 1px rgba(244,70,17,.85)}
.top .createbtn svg{width:13px;height:13px}
#perfBtn::after{display:none}#colL #chainAdd{width:auto;min-width:30px;height:26px;padding:0 10px}
#canvasBtn b{color:var(--dim)}
#canvasBtn #cvSizeLbl,#canvasBtn #cvFpsLbl{background:#07080a;color:var(--disp);text-shadow:0 0 6px rgba(255,178,0,.45);padding:3px 6px;box-shadow:inset 0 0 0 1px rgba(255,178,0,.16),inset 0 1px 3px rgba(0,0,0,.7);text-transform:none;letter-spacing:0}
#canvasBtn #cvSizeLbl{border-radius:4px 0 0 4px;margin-right:-8px}#canvasBtn #cvFpsLbl{border-radius:0 4px 4px 0}
/* Left rail: the open panel is backlit orange with a pin of light, like the Tune tabs */
#railL [data-tab]{position:relative}
#railL [data-tab].on{color:#FFB38F!important;background:radial-gradient(70% 70% at 50% 120%,rgba(244,70,17,.16),transparent 70%)!important;box-shadow:none!important;filter:drop-shadow(0 0 5px rgba(244,70,17,.45))}
#railL [data-tab].on::before{content:"";position:absolute;left:-8px;top:50%;width:2px;height:14px;margin-top:-7px;border-radius:2px;background:var(--acc);box-shadow:0 0 6px var(--acc)}
/* Layer card: blend is a select key, opacity an amber readout */
.bm{border-radius:5px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%235B6164' stroke-width='1.2'/%3E%3C/svg%3E"),linear-gradient(#2c2f33,#1d1f22);background-repeat:no-repeat;background-position:right 7px center,0 0;background-size:8px 5px,100% 100%;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 0 0 1px #07080a}
.bm:hover{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%238C928F' stroke-width='1.2'/%3E%3C/svg%3E"),linear-gradient(#34383c,#222528)}
.bm[aria-expanded="true"]{color:#FFB38F;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%23F44611' stroke-width='1.2'/%3E%3C/svg%3E"),linear-gradient(#1b1d20,#26292c);box-shadow:inset 0 2px 5px rgba(0,0,0,.75),0 0 0 1px #07080a}
.opf{background:#07080a;box-shadow:inset 0 0 0 1px rgba(255,178,0,.16),inset 0 1px 3px rgba(0,0,0,.7)}.opf:hover{background:#07080a;box-shadow:inset 0 0 0 1px rgba(255,178,0,.32),inset 0 1px 3px rgba(0,0,0,.7)}
.opf i{background:rgba(255,178,0,.13)}.opf input{color:var(--disp);text-shadow:0 0 6px rgba(255,178,0,.45);font-family:var(--mono-ui);font-stretch:normal}
.opf input:not([readonly]){box-shadow:inset 0 0 0 1px var(--disp)}.opf:focus-visible{outline-color:var(--disp)}
/* Effects: every effect is a key; its LED lights amber while it's in your stack */
:is(#addChips,.addpop) .chip{position:relative;border-radius:5px;padding:8px 16px 7px 9px;background:linear-gradient(#2c2f33,#1d1f22);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 0 0 1px #07080a,0 2px 3px -1px rgba(0,0,0,.6);transition:color .15s,background .12s,box-shadow .12s,translate .08s}
:is(#addChips,.addpop) .chip:hover,:is(#addChips,.addpop) .chip:focus-visible{color:var(--text);background:linear-gradient(#34383c,#222528)}
:is(#addChips,.addpop) .chip:active{translate:0 1px;background:linear-gradient(#1d1f22,#2a2d30);box-shadow:inset 0 2px 4px rgba(0,0,0,.7),0 0 0 1px #07080a}
:is(#addChips,.addpop) .chip::after{content:"";position:absolute;top:5px;right:6px;width:4px;height:4px;border-radius:50%;background:#2b1a13;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
#addChips .chip.set{color:var(--text)}#addChips .chip.set::after{background:var(--disp);box-shadow:0 0 6px 1px rgba(255,178,0,.85)}
#addChips .chip.ufxnew{color:var(--disp);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 0 0 1px #07080a,0 2px 3px -1px rgba(0,0,0,.6)}
.pcar{right:14px;background:none;border-radius:3px;color:var(--faint);font-family:var(--mono-ui)}.pcar:hover{background:rgba(255,255,255,.06);color:var(--text)}
/* Add a layer menu: icons sit in dark wells and light orange on hover */
.addpop .bo i{background:#07080a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);color:var(--dim)}.addpop .bo:hover i,.addpop .bo:focus-visible i{color:#FFB38F}
/* Viewer tools and zoom: joined keys in a glass tray */
.zoomhud{gap:0}.zoomhud .zsep{display:none}
.ptnr{display:grid;gap:10px}.ptnrh{font:600 var(--fs-s) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--disp)}.ptnr .ptnrcode{width:100%}
/* Solo: the soloed card's light turns amber, the rest dim; a badge on the viewer says so and brings everything back */
.solobadge{position:absolute;top:52px;left:50%;translate:-50% 0;z-index:9;display:inline-flex;align-items:center;gap:8px;padding:5px 10px 5px 9px;border:0;border-radius:6px;cursor:pointer;
  background:rgba(11,12,14,.72);backdrop-filter:var(--frost);-webkit-backdrop-filter:var(--frost);box-shadow:inset 0 0 0 1px rgba(255,178,0,.35),0 8px 24px -8px rgba(0,0,0,.8);
  font:500 var(--fs-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--disp)}
.solobadge .led{width:6px;height:6px;border-radius:50%;background:var(--disp);box-shadow:0 0 6px 1px rgba(255,178,0,.85)}.solobadge b{font-weight:500;color:var(--text);letter-spacing:.06em;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.solobadge em{font-style:normal;color:var(--dim);font-size:var(--fs-m);line-height:1}.solobadge:hover em{color:var(--text)}
#chainList .mod.solo .pw .led{background:var(--disp);box-shadow:0 0 0 3px rgba(255,178,0,.16),0 0 10px rgba(255,178,0,.7)}#chainList .mod.unsolo{opacity:.42}
.zoomhud button{border-radius:0;background:linear-gradient(#2c2f33,#1d1f22);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset -1px 0 0 rgba(0,0,0,.6);font-family:var(--mono);color:var(--dim)}
.zoomhud button:first-of-type{border-radius:5px 0 0 5px}.zoomhud button:last-of-type{border-radius:0 5px 5px 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.09)}
.zoomhud button:hover{color:var(--text);background:linear-gradient(#34383c,#222528)}.zoomhud button:active{background:linear-gradient(#1d1f22,#2a2d30);box-shadow:inset 0 2px 4px rgba(0,0,0,.7)}
#zHand[aria-pressed="true"],#ovBtn[aria-expanded="true"]{color:var(--disp);text-shadow:0 0 6px rgba(255,178,0,.55);background:linear-gradient(#1b1d20,#26292c);box-shadow:inset 0 2px 5px rgba(0,0,0,.75)}
#ovBtn[aria-expanded="true"]{color:#FFB38F}
/* Transport: play, back and forward are one joined strip; the clock is an amber readout; lanes is a latch key */
.vbar .ib{width:30px;height:26px;border-radius:0;color:var(--dim);background:linear-gradient(#2c2f33,#1d1f22);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset -1px 0 0 rgba(0,0,0,.6)}
.vbar .ib:hover{color:var(--text);background:linear-gradient(#34383c,#222528)}.vbar .ib:active{background:linear-gradient(#1d1f22,#2a2d30);box-shadow:inset 0 2px 4px rgba(0,0,0,.7)}
#lPlay,#vPlay{border-radius:5px 0 0 5px}#lFwd,#vFwd{border-radius:0 5px 5px 0;margin-right:6px}#lPlay,#lBack,#vPlay,#vBack{margin-right:-4px}#vClear{border-radius:5px}
.vbar .ib.on{color:var(--disp);text-shadow:0 0 6px rgba(255,178,0,.55)}
.vbar .vtc:not(.dim){background:#07080a;color:var(--disp);text-shadow:0 0 6px rgba(255,178,0,.45);border-radius:4px;padding:4px 7px;box-shadow:inset 0 0 0 1px rgba(255,178,0,.16),inset 0 1px 3px rgba(0,0,0,.7);font-family:var(--mono-ui);font-stretch:normal;min-width:64px}
.modebtn{position:relative;border-radius:5px;padding:6px 16px 6px 10px;background:linear-gradient(#2c2f33,#1d1f22);color:var(--dim);letter-spacing:.06em;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 0 0 1px #07080a,0 2px 3px -1px rgba(0,0,0,.6)}
.modebtn:hover{color:var(--text);background:linear-gradient(#34383c,#222528)}
.modebtn::after{content:"";position:absolute;top:5px;right:6px;width:4px;height:4px;border-radius:50%;background:#2b1a13;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
.modebtn[aria-pressed="true"]{color:var(--disp);text-shadow:0 0 6px rgba(255,178,0,.55);background:linear-gradient(#1b1d20,#26292c);box-shadow:inset 0 2px 5px rgba(0,0,0,.75),0 0 0 1px #07080a}.modebtn[aria-pressed="true"]::after{background:var(--disp);box-shadow:0 0 6px 1px rgba(255,178,0,.85)}
/* Popovers: settings are amber slide switches and amber toggles; export settings read as amber readouts; tiles are keys */
.pop .ssw>button.sswon{color:var(--disp)!important;text-shadow:0 0 7px rgba(255,178,0,.55),0 0 2px rgba(255,178,0,.5)}.pop .ssw>button.sswon::after{background:var(--disp);box-shadow:0 0 6px var(--disp)}
.pop .row .tag.go{background:#07080a;color:var(--disp);text-shadow:0 0 6px rgba(255,178,0,.45);box-shadow:inset 0 0 0 1px rgba(255,178,0,.16),inset 0 1px 3px rgba(0,0,0,.7);font-family:var(--mono-ui);font-stretch:normal}
.pop :is(.cvr,.xfb){position:relative;border:0;background:linear-gradient(#2a2d31,#1c1e21);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px #07080a;color:var(--dim)}
.pop :is(.cvr,.xfb):hover{color:var(--text);background:linear-gradient(#32363a,#212427)}
.pop :is(.cvr,.xfb)::after{content:"";position:absolute;top:5px;right:6px;width:4px;height:4px;border-radius:50%;background:#2b1a13;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
.pop .cvr[aria-pressed="true"]{color:var(--disp);text-shadow:0 0 6px rgba(255,178,0,.55);background:linear-gradient(#1b1d20,#26292c);box-shadow:inset 0 2px 5px rgba(0,0,0,.75),0 0 0 1px #07080a}.pop .cvr[aria-pressed="true"]::after{background:var(--disp);box-shadow:0 0 6px 1px rgba(255,178,0,.85)}
/* Frosted smoke glass: popovers, menus, the color picker and dialogs are dark and see-through, frosted rather than glossy. A quiet hairline rim, a fine frost grain, no sheen. */
:root{--frost:blur(26px) saturate(115%) brightness(.78);--frost-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.pop,.blendpop,.kmenu,.ralpop,.csmenu,.modal-card{isolation:isolate;border:1px solid rgba(255,255,255,.075);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 38%),rgba(11,12,14,var(--gl-a,.6));
  backdrop-filter:var(--frost);-webkit-backdrop-filter:var(--frost);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(0,0,0,.25),0 1px 2px rgba(0,0,0,.4),0 18px 44px -12px rgba(0,0,0,.78)}
.blendpop,.kmenu,.pop,.ralpop,.csmenu{--gl-a:.6}.modal-card{--gl-a:.74}
.lgref .pop,.lgref .blendpop,.lgref .kmenu{backdrop-filter:var(--frost);-webkit-backdrop-filter:var(--frost)}
.pop::before,.blendpop::before,.kmenu::before,.modal-card::before{background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.04) 30%,rgba(255,255,255,0) 60%,rgba(255,255,255,.03))}
.pop::after,.blendpop::after,.kmenu::after,.modal-card::after{background:var(--frost-grain);background-size:160px 160px;opacity:.05;mix-blend-mode:overlay}
.pop .row:hover{background:rgba(255,255,255,.06)}
.blendpop .bo.cur::before{background:var(--disp);box-shadow:0 0 5px rgba(255,178,0,.7)}
.addpop .bo.cur b::after{color:var(--disp)}.addpop .bo.more::after{color:var(--faint)}
/* Create is frosted smoke glass too, like Export and the layer popovers; its wells go see-through dark so the glass reads */
.createwin{isolation:isolate;border:1px solid rgba(255,255,255,.075);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 38%),rgba(11,12,14,var(--gl-a,.72));backdrop-filter:var(--frost);-webkit-backdrop-filter:var(--frost);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(0,0,0,.25),0 1px 2px rgba(0,0,0,.4),0 30px 80px -20px rgba(0,0,0,.85)}
.createwin::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:var(--frost-grain);background-size:160px 160px;opacity:.05;mix-blend-mode:overlay}
.createwin .cwhead{border-bottom-color:rgba(255,255,255,.06)}.createwin .csdeck{background:rgba(5,6,7,.55)}.createwin .cskind{background:rgba(5,6,7,.45)}.createwin .cstakes{background:rgba(0,0,0,.22)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.pop,.blendpop,.kmenu,.ralpop,.csmenu,.modal-card,.createwin{--gl-a:.96}}
/* The take viewer: one result full screen, with its sound, arrows through the rest, and the same moves as the tray */
.tview{position:fixed;inset:0;z-index:120;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));background:rgba(5,6,7,.86);-webkit-backdrop-filter:blur(22px) saturate(1.1);backdrop-filter:blur(22px) saturate(1.1)}
.tview[hidden]{display:none}.tvhead{display:flex;align-items:flex-start;gap:12px;min-width:0}.tvhead .tvtx{display:grid;gap:3px;min-width:0;flex:1}
.tvhead b{font:500 var(--fs-m) var(--sans);color:var(--text);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.tvhead span{font:500 var(--fs-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.tvstage{position:relative;display:grid;place-items:center;min-height:0}.tvstage>img,.tvstage>video{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;box-shadow:0 20px 60px -20px rgba(0,0,0,.9);background:#000}
.tvaud{display:grid;justify-items:center;gap:14px;width:min(520px,100%)}.tvaud i{font-style:normal;font-size:56px;color:var(--disp);text-shadow:0 0 18px rgba(255,178,0,.45)}.tvaud audio{width:100%}
.tvnav{position:absolute;top:50%;translate:0 -50%;width:40px;height:64px;border:0;border-radius:8px;background:rgba(20,22,24,.6);color:var(--text);font-size:26px;cursor:pointer}.tvnav:hover{background:rgba(40,43,46,.8)}.tvnav.l{left:0}.tvnav.r{right:0}.tvnav:disabled{opacity:.25;cursor:default}
.tvfoot{display:flex;justify-content:center}.tvfoot .kbank{width:min(640px,100%)}
.gcard .gth.canview,.take .th.canview{cursor:zoom-in}
.stage.tsimple :is(#lPlay,#vPlay){border-radius:5px;margin-right:0}
/* Corner LEDs never sit on text: bank keys start their legend under the LED (above); tile titles stop short of it */
/* One scroll edge everywhere: where more waits past the edge, a dark cast shadow, as if the content slides under the panel's lip (no blur: a backdrop blur lags a frame behind scrolling) */
.efade.t,.efade.sh.t{background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.22) 40%,rgba(0,0,0,0))}
.efade.b,.efade.sh.b{background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.22) 60%,rgba(0,0,0,.55))}
.kedge.l{width:56px}
.kedge.l::after{background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.22) 40%,rgba(0,0,0,0))!important}
.kedge.r::after{background:linear-gradient(270deg,rgba(0,0,0,.55),rgba(0,0,0,.22) 40%,rgba(0,0,0,0))!important}
/* Panel titles (Layers, Effects, Library, Tune, Looks) are set in caps */
.stitle{text-transform:uppercase;letter-spacing:.12em}
/* Create on the kit: a prompt deck, one model key with a frosted bank, a strip of settings, a Go key with a light strip, Connections behind the plug */
.cwhead{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 14px}.cwhead>svg{fill:var(--dim)}.cwsp{flex:1}
.cwhead .cwconn{width:auto;display:inline-flex;align-items:center;gap:6px;padding:0 6px}.cwhead .cwconn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.cwhead .cwconn[aria-expanded="true"]{color:#FFB38F}
#createWin .lcd{display:inline-flex;align-items:baseline;gap:5px;background:#07080a;border-radius:4px;padding:3px 7px;box-shadow:inset 0 0 0 1px rgba(255,178,0,.16),inset 0 1px 3px rgba(0,0,0,.7);font:500 var(--fs-s)/1.2 var(--mono);color:var(--disp);text-shadow:0 0 6px rgba(255,178,0,.45);font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:0;text-transform:none}
#createWin .lcd small{font-size:var(--fs-2xs);color:rgba(255,178,0,.6);letter-spacing:.12em;text-transform:uppercase;text-shadow:none}
#createWin .lcd.off{color:#6d6452;text-shadow:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 0 1px 3px rgba(0,0,0,.7)}
#aiKind{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:auto;max-width:none;overflow:visible}#aiKind button{justify-content:center;padding:8px 6px}
.csdeck{display:grid;gap:6px;padding:8px;border-radius:10px;background:#0d0e10;box-shadow:inset 0 2px 6px rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,255,255,.05)}
.csdeck textarea{background:transparent!important;border:0!important;box-shadow:none!important;min-height:84px;resize:vertical;font-size:var(--fs-m);line-height:1.45;padding:6px;outline:0}
.csdeck .cspbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.csdeck .cspbar .lbl{flex:0 1 auto}.cskbd{margin-left:auto}
.csref{background:linear-gradient(#25282b,#1b1d20);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px #07080a}.csref img{width:34px;height:34px}
.csrole{display:inline-flex;align-items:center;gap:4px;justify-self:start;padding:2px 6px;border-radius:3px;background:#07080a;box-shadow:inset 0 0 0 1px rgba(255,178,0,.16);color:var(--disp);text-shadow:0 0 6px rgba(255,178,0,.4);font:500 var(--fs-2xs) var(--mono);letter-spacing:.12em}
.csrole svg{width:7px;height:5px;fill:none;stroke:currentColor;stroke-width:1.4}.csrole:disabled{color:var(--dim);text-shadow:none}.csrole:disabled svg{display:none}
.cscraft{background:#101113;box-shadow:inset 0 2px 5px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.05)}.cscraft textarea{background:#0b0c0d;border:0;box-shadow:inset 0 1px 3px rgba(0,0,0,.7)}
.cschip{border-radius:4px;background:#0b0c0d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);color:#b7bab5}.csalts{display:flex;align-items:center;gap:6px}
.csmodelh{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}
#createWin .csmk{justify-content:space-between;min-height:36px;padding:6px 10px 6px 8px;text-transform:none;letter-spacing:0;min-width:0}#createWin .csmk::after{display:none}
.csmkl{display:flex;align-items:center;gap:8px;min-width:0}.csmk b{font:500 var(--fs-m) var(--sans);color:var(--text);white-space:nowrap}
.csmk em{font:400 var(--fs-s) var(--sans);font-style:normal;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.csmk .car{width:9px;height:6px;fill:none;stroke:currentColor;stroke-width:1.2;flex:none}
.cspop{position:absolute;z-index:30;padding:10px;display:grid;gap:8px;border-radius:12px;isolation:isolate;border:1px solid rgba(255,255,255,.075);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 38%),rgba(11,12,14,.74);backdrop-filter:var(--frost);-webkit-backdrop-filter:var(--frost);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.4),0 18px 44px -12px rgba(0,0,0,.78)}
.cspop[hidden]{display:none}.cspoph{display:flex;align-items:center;gap:8px}.cspoph b{font:600 var(--fs-s) var(--sans);text-transform:uppercase;letter-spacing:.12em}
.csmodelpop{top:calc(100% + 8px);left:0;right:0;max-height:min(70vh,640px);overflow:auto}#aiModels .csfam{grid-column:1/-1;margin:8px 2px 0}#aiModels .csfam:first-child{margin-top:0}#aiModels{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
#createWin .csauto{grid-column:1/-1}
.csm.no{opacity:1}.csm.no span{color:#6b6150}.csm.no b{color:#4a4f53}.csm:disabled{cursor:not-allowed}.csm.rec{box-shadow:none}
i.csrec{position:absolute;top:5px;right:13px;font:500 var(--fs-2xs) var(--mono);font-style:normal;letter-spacing:.12em;color:#80868a;padding:1px 3px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.cswait{top:auto;bottom:8px;right:9px}
.csstrip{position:relative;display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end}.aiopts{display:contents}
.csmod{display:grid;gap:5px;justify-items:start}.aicount{display:flex;flex-wrap:wrap;align-items:flex-end;gap:5px 8px}.aicount>.lbl{flex-basis:100%}.aicount .kbank{margin:4px;min-width:168px}
.csmorewrap{display:grid;gap:5px;justify-items:start}#createWin #aiSetKey{gap:7px}#createWin #aiSetKey::after{display:none}#aiSetKey .car{width:9px;height:6px;fill:none;stroke:currentColor;stroke-width:1.2}
#aiSetPop{top:calc(100% + 8px);left:0;width:min(360px,100%)}
.csstep{display:inline-flex;align-items:center;gap:2px}
#createWin input[type=number],#createWin input.csin{-moz-appearance:textfield;appearance:textfield;background:#07080a;border:0;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(255,178,0,.16),inset 0 1px 3px rgba(0,0,0,.7);color:var(--disp);text-shadow:0 0 6px rgba(255,178,0,.45);font:500 var(--fs-s) var(--mono);padding:5px 7px}
#createWin input[type=number]::-webkit-inner-spin-button,#createWin input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
#aiDur{width:56px;text-align:center}.csin{width:110px}.csin.wide{width:60%}#createWin input::placeholder{color:#6d6452;text-shadow:none}
#createWin select{-webkit-appearance:none;appearance:none;border:0;border-radius:5px;padding:6px 26px 6px 10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%238C928F' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 9px center/8px 5px,linear-gradient(#2c2f33,#1d1f22);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 0 0 1px #07080a;color:var(--text);font:500 var(--fs-s) var(--sans);max-width:100%}
.csset{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;min-height:30px}.csset .kbank{margin:4px}#createWin .csdice{padding:5px 8px}#createWin .csdice::after{display:none}
.csfoot{display:flex;align-items:center;gap:8px;padding-top:6px;border-top:1px solid rgba(255,255,255,.06)}.csfoot .ainote{flex:1}
.csgo{position:sticky;bottom:-10px;z-index:4;display:grid;gap:6px;padding:14px 0 10px;background:none} /* no surface of its own: the window's frosted glass shows straight through */
.aigo{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.aicost{display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:0}
/* the Go key: the panel's own action; a big machined key whose light strip says what it's doing. Never an orange fill. */
/* GO key: the Create action anywhere. A raised key with an LED strip along the bottom that glows in the display orange when it's ready to go */
.btn.gokey{position:relative;height:34px;padding:0 14px 6px;justify-content:center;border-radius:var(--r-m);background:linear-gradient(#383b40,#202226);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.4),0 0 0 1px #07080a,0 4px 10px -3px rgba(0,0,0,.8);font:600 var(--fs-s) var(--mono);letter-spacing:.06em;color:var(--text);white-space:nowrap;flex:none}
.btn.gokey:hover{background:linear-gradient(#40444a,#25282c)}.btn.gokey:active{translate:0 1px;box-shadow:inset 0 2px 6px rgba(0,0,0,.75),0 0 0 1px #07080a}
.btn.gokey::after{content:"";position:absolute;top:auto;left:12px;right:12px;bottom:6px;width:auto;height:2px;border-radius:2px;background:#2b1a13;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6);opacity:1;animation:none}
.btn.gokey[data-state="ready"]:not(:disabled)::after{background:var(--disp);box-shadow:0 0 8px 1px rgba(255,178,0,.75),0 0 18px rgba(255,178,0,.25)}
.btn.gokey:disabled{color:#4a4f53;background:linear-gradient(#26282b,#1c1e20)}
#createWin #aiGo{position:relative;min-width:200px;height:46px;padding:0 20px 8px;justify-content:center;border-radius:8px;background:linear-gradient(#383b40,#202226);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.4),0 0 0 1px #07080a,0 4px 10px -3px rgba(0,0,0,.8);font:600 var(--fs-s) var(--mono);letter-spacing:.06em;color:var(--text)}
#createWin #aiGo:hover{background:linear-gradient(#40444a,#25282c)}#createWin #aiGo:active{translate:0 1px;box-shadow:inset 0 2px 6px rgba(0,0,0,.75),0 0 0 1px #07080a}
#createWin #aiGo::after{top:auto;right:16px;left:16px;bottom:8px;width:auto;height:3px;border-radius:2px;background:#2b1a13;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6);transform-origin:left center;opacity:1;animation:none}
#createWin #aiGo[data-state="ready"]::after{background:var(--disp);box-shadow:0 0 8px 1px rgba(255,178,0,.75),0 0 18px rgba(255,178,0,.25)}
#createWin #aiGo[data-state="armed"]{color:var(--disp);text-shadow:0 0 7px rgba(255,178,0,.55)}
#createWin #aiGo[data-state="armed"]::after{background:var(--disp);box-shadow:0 0 8px 1px rgba(255,178,0,.75);animation:godrain 4s linear forwards,goblink .5s steps(2,start) infinite}
#createWin #aiGo[data-state="busy"]::after{background:repeating-linear-gradient(90deg,var(--disp) 0 10px,#3a2a12 10px 20px);background-size:40px 100%;box-shadow:0 0 8px rgba(255,178,0,.45);animation:gosweep .6s linear infinite}
#createWin #aiGo[data-state="need"]{color:var(--dim)}#createWin #aiGo:disabled{color:#4a4f53;background:linear-gradient(#26282b,#1c1e20)}
@keyframes godrain{from{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes goblink{to{opacity:.35}}@keyframes gosweep{to{background-position:40px 0}}
#createWin .btn.busy::after{animation:cspulse .7s ease-in-out infinite alternate}@keyframes cspulse{from{background:#2b1a13;box-shadow:none}to{background:var(--disp);box-shadow:0 0 8px 2px rgba(255,178,0,.85)}}
@media (prefers-reduced-motion:reduce){#createWin #aiGo::after,#createWin .btn.busy::after{animation:none}}
.csconn{left:0;right:0;top:47px;bottom:0;overflow:auto;align-content:start;gap:12px;padding:14px;border-radius:0 0 12px 12px;border-width:1px 0 0}
.csconn .aikey{padding:12px;border-radius:10px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}.csconn .aikey .cv-row{gap:8px}.csconn .aikey .lcd{margin-left:auto}
.csconn .aikey input{background:#0b0c0d;border:0;box-shadow:inset 0 1px 3px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.05)}
.csconn .aikey .row0{display:flex;align-items:center;gap:10px}.csconn .aikey .row0 .kbank{margin:4px}
.csconn .aiprices{padding:12px;border-radius:10px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);border-top:0;margin-top:0}
.csmenu2{position:absolute;z-index:50;min-width:190px;padding:6px;gap:2px}.csmenu2 .mi{justify-content:flex-start}
#createWin .csacts{margin:4px}#createWin .csacts .kc{min-height:26px;padding:8px 4px 4px}#createWin .csdots::after{display:none}#createWin .csdots svg{width:14px;height:14px}
.gcard.err .gth{color:var(--text)}.gcard .gth .lcd{font-size:var(--fs-2xs)}.csbang{display:grid;place-items:center;width:18px;height:18px;margin:0 auto 6px;border-radius:50%;background:#07080a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font:600 var(--fs-2xs) var(--mono);font-style:normal;color:var(--text)}
.take .tx span.err{color:var(--dim)}#createWin .cr{display:none}
@media (max-width:699px),(max-width:820px) and (orientation:landscape){#aiKind button{flex-direction:column;gap:4px;font-size:var(--fs-2xs);padding:7px 2px 6px}.csgo{padding-bottom:max(10px,env(safe-area-inset-bottom))}#createWin #aiGo{flex:1;min-width:0}.csmodelh{grid-template-columns:minmax(0,1fr) auto}.csmodelh>.lbl{display:none}}
/* Studio keys card: a lock you can find, a code only testers know */
.csconn .csstudio{box-shadow:inset 0 0 0 1px rgba(255,178,0,.14)}.csstudio .cslock{width:24px;height:24px}.csstudio .cslock svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.4}
.csstudio.found .cslock{color:var(--disp);filter:drop-shadow(0 0 5px rgba(255,178,0,.6))}.csstudio .row0 input{flex:1;min-width:0}
/* Model tiles name their provider; a tile you can't run yet reads Connect … and sits dimmer */
#createWin .csm .csvia{font:500 var(--fs-2xs) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}#createWin .csm.off:not(:disabled) b{color:var(--dim)}
/* Share: what the link carries, a faceplate screen with the link on it, and the GO key that copies it */
#sharePop{width:300px;display:grid;gap:8px;padding:10px}
.shsec{display:grid;gap:6px}.shsec .seg.mini{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:100%}
.shscr{position:relative;display:grid;gap:3px;min-width:0;padding:30px 10px 10px;border-radius:var(--r-m);background:#050607;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 3px 12px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.04);font-family:var(--mono);color:var(--disp)}
.shscr b{font:600 var(--fs-b) var(--mono);color:var(--disp);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 0 6px rgba(255,178,0,.35)}
.shscr>span{font-size:var(--fs-s);color:color-mix(in srgb,var(--disp) 62%,transparent);line-height:1.4}
.shscr input{margin-top:6px;width:100%;min-width:0;height:auto;background:none;border:0;border-top:1px solid rgba(255,178,0,.14);border-radius:0;padding:6px 0 0;font:500 var(--fs-xs) var(--mono);color:var(--dim);text-overflow:ellipsis;box-shadow:none}
.shscr.off b,.shscr.off>span{color:var(--faint);text-shadow:none}.shscr.off .scrlab{color:var(--faint)}.shscr.off .scrlab .led{background:var(--faint);box-shadow:none}
.xfree{display:grid;gap:6px;padding:10px;margin:0 0 10px;border-radius:var(--r-m);background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}.xfree .lbl{display:inline-flex;align-items:center;gap:6px}.xstudio{display:flex;gap:6px;flex-wrap:wrap}.xfree[hidden]{display:none}
.shgo{display:flex;justify-content:flex-end}#sharePop .xnote:empty{display:none}
/* Feedback: a beta chip in the top bar opens a glass panel with Bug / Idea / Love pads, the note, an optional email and the GO key */
.tbeta{margin-left:4px;height:24px;cursor:pointer}.tbeta:hover{color:var(--text);box-shadow:inset 0 0 0 1px rgba(236,236,231,.16)}
.fbmodal{z-index:130}.fbcard{width:min(480px,100%);gap:12px;padding:16px}
.fbhead{display:flex;align-items:center;gap:10px}.fbhead .hbeta{margin:0}.fbhead b{flex:1;font:600 var(--fs-l) var(--mono);letter-spacing:.02em}
.fbcats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.fbcats .ipad{min-height:64px}
.fbcats .ipad[aria-checked="true"]{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 4px rgba(0,0,0,.55),inset 0 0 0 1px color-mix(in srgb,var(--pc) 62%,transparent),0 0 0 1px rgba(0,0,0,.7),0 1px 0 #0a0b0c,0 4px 8px -5px rgba(0,0,0,.8)}
.fbsec{display:grid;gap:6px}
.fbsec textarea,.fbsec input{width:100%;min-width:0;background:#07080a;border:0;border-radius:var(--r-m);box-shadow:inset 0 1px 3px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.05);color:var(--disp);font:500 var(--fs-m)/1.5 var(--mono);padding:9px 10px;resize:vertical}
.fbsec textarea::placeholder,.fbsec input::placeholder{color:var(--faint)}
.fbsnap[hidden]{display:none}.fbctx{margin:0;color:var(--faint);font:500 var(--fs-xs)/1.5 var(--mono);letter-spacing:.02em}
.fbstat{margin:0;color:var(--dim);font-size:var(--fs-s);line-height:1.45}.fbstat:empty{display:none}.fbstat.ok{color:var(--led)}.fbstat.err{color:var(--disp)}
.fbgo{display:flex;justify-content:flex-end;gap:8px}
.wcgo{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}.wcgo .gokey{min-width:160px}#wcActs:not(:has(> :not([hidden]))){display:none}
@media (max-width:520px){.fbcats .ps{display:none}}
.ghost-flag.tp{pointer-events:auto;display:flex;align-items:center;gap:10px;padding:5px 5px 5px 14px;border-color:rgba(0,187,45,.55);white-space:nowrap}
.ghost-flag.tp .tpgo{height:30px;padding:0 16px 6px;letter-spacing:.08em;text-transform:uppercase}
.ghost-flag.tp.dock{position:fixed;transform:translateX(-50%);z-index:1200;font-size:var(--fs-m);padding:6px 6px 6px 16px;gap:12px;box-shadow:0 0 0 1px rgba(0,187,45,.35),0 14px 34px -8px rgba(0,0,0,.8)}
.ghost-flag.tp.dock .tpgo{height:38px;padding:0 22px 6px;font-size:var(--fs-m)}
.tptune{position:sticky;top:0;z-index:5;display:grid;gap:8px;margin:8px 10px 0;padding:10px 10px 10px 12px;border-radius:var(--r-m);background:rgba(7,8,10,.92);box-shadow:inset 0 0 0 1px rgba(0,187,45,.45);font:500 var(--fs-s)/1.4 var(--mono);letter-spacing:.06em;color:var(--val)}
.tptune[hidden]{display:none}.tptune b{color:var(--text);font-weight:600}.tptune .tpk{display:flex;gap:6px;align-items:center}.tptune .tpgo{flex:1}
.tpfx{display:flex;flex-wrap:wrap;gap:6px}.tpfx[hidden]{display:none}.tpfxk{font:500 var(--fs-s)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--val);background:#17191b;border:0;border-radius:var(--r-s);padding:8px 10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);cursor:pointer}
.tpfxk[aria-pressed=true]{color:var(--disp);box-shadow:inset 0 0 0 1px rgba(255,178,0,.6),0 0 10px -2px rgba(255,178,0,.4)}
#colR.tpdim .insp{opacity:.32;filter:grayscale(.7);pointer-events:none;transition:opacity .2s}
.btn.gokey[data-state="add"]:not(:disabled)::after{background:var(--led);box-shadow:0 0 8px 1px rgba(0,187,45,.75),0 0 18px rgba(0,187,45,.25)}
.ghost-flag.tp .tpx{width:30px;height:30px;border-radius:50%;font-size:var(--fs-l);color:var(--dim)}
/* Touch: the inspector scrolls under your finger. A fader moves only from its handle (with a larger grab area), a knob only from its dial */
@media (pointer:coarse){
  .fader{touch-action:pan-y}.fader .fcap{touch-action:none}.fader .fcap::before{content:"";position:absolute;inset:-12px -16px}
  .knob{touch-action:pan-y}.knob .kw{touch-action:none}
}
/* ---------- Tablet: portrait iPads and upright windows 700–1100 px wide. One row of keys up top, the preview pinned under it
   with its transport, Layers and Tune side by side below it (each scrolls on its own), and the Looks bar along the bottom ---------- */
@media (min-width:700px) and (max-width:1100px) and (orientation:portrait){
  html,body{height:100%;overflow:hidden}
  .app{height:100dvh;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));gap:8px}
  .main,.main.nol,.main.nor{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:8px}
  .main.nol:not(.nor){grid-template-columns:44px minmax(0,1fr)}.main.nor:not(.nol){grid-template-columns:minmax(0,1fr) 44px}
  .main>.gutter{display:none}
  .main>.stage{grid-column:1/-1;grid-row:1;height:44dvh;min-height:300px}
  .main>.col.left{grid-column:1;grid-row:2;min-height:0}.main>.col.right{grid-column:2;grid-row:2;min-height:0}
  /* Tune is about half the screen here: only its tabs stay pinned; the LCD and screen deck scroll away with the knobs */
  #pLcd,.fpstick{position:static}
}
/* the narrowest tablets keep the top bar to one row: Create shows just its ✦ (its name stays in the tooltip) */
@media (min-width:700px) and (max-width:799px) and (orientation:portrait){
  .top #createBtn{font-size:0!important;gap:0!important;padding-left:12px!important;padding-right:12px!important}.top #createBtn kbd{display:none}.top #createBtn svg{width:15px;height:15px}.top #createBtn .gstar{font-size:22px;margin:0} /* icon-only: the star keeps its size */
}
/* Embed: the canvas and Tune side by side in one row, whatever the size (after every breakpoint, so it wins) */
html.embed,html.embed body{height:100%;overflow:hidden}
html.embed .app{height:100%!important;grid-template-rows:minmax(0,1fr)!important;padding:8px!important;gap:0!important}
html.embed .main,html.embed .main.nol,html.embed .main.nor{grid-template-columns:minmax(0,1fr) 300px!important;grid-template-rows:minmax(0,1fr)!important;gap:8px!important}
html.embed .main>.gutter{display:none!important}
html.embed .main>.stage{grid-column:1!important;grid-row:1!important;height:100%!important;max-height:none!important;align-self:stretch!important;min-height:0!important}
html.embed .main>.col.right{grid-column:2!important;grid-row:1!important;min-height:0!important}

 .st0 { fill: #e1e0ce; }