html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:13px/1.35 system-ui,Segoe UI,sans-serif;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto;overflow:hidden}
button,input,select,textarea{font:inherit;color:var(--text)}
button{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:4px 9px;cursor:pointer}
button:hover{border-color:var(--acc)}button.primary{background:var(--acc);border-color:var(--acc);color:var(--on-accent)}button:disabled{opacity:.4;cursor:not-allowed}button.on{border-color:var(--acc);background:var(--bg)}
#vswitch button.on{color:#b8f5ea;background:color-mix(in srgb,#2b9b8e 24%,var(--panel));border-color:#4dbbad;box-shadow:inset 0 0 0 1px color-mix(in srgb,#83e4d5 24%,transparent)}
input,select,textarea{background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:3px 6px;width:100%}
header{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 10px;background:var(--panel);border-bottom:1px solid var(--line)}
header h1{font-size:14px;margin:0 6px 0 0}
.sp{flex:1}
.badge{padding:1px 8px;border-radius:10px;font-size:11px;border:1px solid var(--line);background:var(--panel2);white-space:nowrap}
.badge.studio{border-color:var(--studio);color:var(--studio)}.badge.garage{border-color:var(--garage);color:var(--garage)}.badge.peek{border-color:var(--warn);color:var(--warn)}
.banner{background:var(--warn);color:var(--on-warn);padding:0 12px;height:0;overflow:hidden;font-weight:600;cursor:pointer}.banner.show{height:auto;padding:4px 12px}
#work{display:grid;grid-template-columns:var(--lw,280px) 1fr var(--rw,300px);min-height:0;position:relative}
#work.noL{--lw:0px}#work.noR{--rw:0px}
aside{background:var(--panel);overflow:auto;min-width:0}
#left{border-right:1px solid var(--line)}#right{border-left:1px solid var(--line)}
#work.noL #left,#work.noR #right{display:none}
#left{grid-column:1}#canvaswrap{grid-column:2}#right{grid-column:3}   /* explicit columns: a hidden sidebar must not shift the canvas into its (zero width) column */
aside h4{margin:0;padding:8px 10px 4px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
aside .pad{padding:6px 10px}
details{border-top:1px solid var(--line)}details>summary{cursor:pointer;padding:6px 10px;color:var(--dim);font-size:12px}
.tplitem{container-type:inline-size;margin:3px 8px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--panel2);cursor:grab;display:flex;gap:6px;align-items:center}
.tplitem:hover{border-color:var(--acc)}.tplitem small{color:var(--dim);margin-left:auto;flex:none}.tpl-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.cls{font-size:10px;padding:0 6px;border-radius:8px;border:1px solid var(--line)}
.tpl-version{display:inline-block;white-space:nowrap;transition:font-size .12s,padding .12s}
@container (max-width:240px){.tpl-version{font-size:9px;padding-inline:4px}}
@container (max-width:205px){.tpl-version{font-size:8px;padding-inline:2px;letter-spacing:-.2px}}
.cls.stable{border-color:var(--ok);color:var(--ok)}.cls.pinned{border-color:var(--acc);color:var(--acc)}.cls.live{border-color:var(--warn);color:var(--warn)}
#canvaswrap{position:relative;min-width:0;min-height:0;overflow:hidden}
#cv{touch-action:none;position:absolute;inset:0;overflow:hidden;background-color:var(--bg);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);cursor:default}
#world{position:absolute;left:0;top:0;transform-origin:0 0}
#links{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;pointer-events:none}
#links path.hit{pointer-events:stroke;stroke:transparent;stroke-width:14;fill:none;cursor:pointer}
#links path.vis{fill:none;stroke-width:2.5;pointer-events:none}
.node{position:absolute;box-sizing:border-box;width:300px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow-1);user-select:none}
.node.sel{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc)}
.node.midi-pending{opacity:.42;filter:grayscale(1);pointer-events:none;padding:12px;color:var(--dim);border-style:dashed}
.node.proxy{background:var(--panel);border-style:dashed}
.nh{height:60px;display:flex;flex-direction:column;font-weight:600;cursor:grab;border-bottom:1px solid var(--line);border-radius:8px 8px 0 0}
.node-nameplate{height:26px;width:100%;display:flex;align-items:center;gap:8px;padding:2px 10px;background:color-mix(in srgb,var(--bg) 86%,var(--acc));border-radius:8px 8px 0 0;border-bottom:1px solid var(--line)}.node-screw{width:5px;height:5px;flex:none;border-radius:50%;background:var(--dim);box-shadow:inset 0 0 0 1px var(--bg)}
.node-pin{flex:none;width:20px;height:20px;padding:0;border:0;background:transparent;font-size:13px;line-height:1;opacity:.3;filter:grayscale(1)}.node-pin[aria-pressed=true]{opacity:1;filter:none}.node-pin:hover,.node-pin:focus-visible{opacity:1}
.nh .t{flex:1;min-width:0;white-space:nowrap;text-align:center;color:var(--acc);font-family:ui-monospace,monospace;font-weight:650;letter-spacing:.3px;cursor:text}
.node-toolbar{height:34px;display:flex;align-items:center;gap:5px;padding:3px 8px;width:100%;background:linear-gradient(var(--panel2),var(--panel))}.node-type{font-size:10px;letter-spacing:.6px;color:var(--dim)}.node-toolbar .cls{font-size:9px;white-space:nowrap}.node-toolbar:not(:has(.studio-effect-arrow)) .studio-source-node{margin-left:auto}
.node-title-editor{flex:1;min-width:0;width:40px;height:21px;padding:0;text-align:center;font-family:ui-monospace,monospace;font-weight:650;letter-spacing:.3px;color:var(--acc);background:var(--panel);border:1px solid var(--acc);border-radius:3px}
.nrow{height:20px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;padding:0 3px;color:var(--dim);font-size:11px;gap:12px}.nrow>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nrow>span:first-child{padding-left:9px}.nrow>span:last-child{text-align:right;padding-right:9px}
.studio-source-node,.studio-advanced-node{flex:none;width:23px;height:21px;padding:0;border-radius:5px;font-size:11px;line-height:1;font-weight:700}.studio-advanced-node{font-size:15px;color:var(--acc)}
.port{position:absolute;z-index:4;display:block;width:12px;height:12px;border-radius:50%;border:2px solid var(--panel);cursor:crosshair;box-shadow:0 0 0 1px color-mix(in srgb,var(--text) 30%,transparent);pointer-events:auto}
  .port.in{left:-7px;right:auto}.port.out{left:auto;right:-7px}
  .nfx{display:flex;flex-wrap:wrap;gap:4px;padding:2px 7px 4px;border-top:1px solid var(--line)}.nfx-badge{padding:1px 5px;min-height:18px;font-size:9px;line-height:14px;border-color:var(--audio);color:var(--text);background:color-mix(in srgb,var(--audio) 14%,var(--panel2))}.nfx-badge.off{opacity:.42;filter:grayscale(1)}
.port.audio{background:var(--audio)}.port.midi{background:var(--midi)}.port.text{background:var(--text-c)}.port.data{background:var(--data)}.port.any{background:var(--any)}
.nfoot{padding:3px 8px 6px;display:flex;flex-wrap:wrap;gap:4px;align-items:center;color:var(--dim);font-size:11px}
.tag{font-size:10px;padding:0 6px;border-radius:8px;border:1px solid var(--line)}
.tag.dyn{border-color:var(--warn);color:var(--warn)}.tag.bake{border-color:var(--ok);color:var(--ok)}.tag.lock{border-color:var(--acc);color:var(--acc)}.tag.missing{border-color:var(--bad);color:var(--bad)}
.enter{margin-left:auto;font-size:11px;color:var(--acc)}
#crumbs{position:absolute;left:10px;top:8px;display:flex;gap:4px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:3px 6px;z-index:5}
#crumbs span.c{cursor:pointer;color:var(--acc)}#crumbs span.c:last-child{color:var(--text);cursor:default}
#zoomctl{position:absolute;right:10px;bottom:10px;display:flex;gap:4px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:3px 6px;z-index:6;box-shadow:var(--shadow-2)}
#hint{position:absolute;left:10px;bottom:10px;color:var(--dim);font-size:11px;z-index:5;pointer-events:none}
#bottom{background:var(--panel);border-top:1px solid var(--line);display:flex;flex-direction:column;height:var(--bh,280px);min-height:34px;min-width:0}
#bottom.min{height:34px}
#bgrip{height:8px;flex:none;cursor:ns-resize;touch-action:none;background:var(--line)}
#btabs{display:flex;gap:2px;padding:4px 8px 0}
#btabs button{border-radius:6px 6px 0 0;border-bottom:none}
#btabs button[data-t="assistant"]{display:inline-flex;align-items:center;gap:5px}
.ai-tab-icon{display:block;flex:none}
#bbody{flex:1;min-height:0;box-sizing:border-box;overflow:auto;padding:8px 10px}#bbody:has(>#b-arr.on),#bbody:has(>#b-log.on){overflow:hidden}#b-arr.on{height:100%;min-height:0;box-sizing:border-box;display:flex;flex-direction:column}#b-log.on{height:100%;min-height:0;display:flex;flex-direction:column}.build-log-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}.build-log-head h4{margin:0!important}.build-log-head>div{display:flex;gap:5px}.build-log-head button{padding:2px 7px;font-size:11px}
#bottom.min #bbody,#bottom.min #bgrip{display:none}
.bsec{display:none}.bsec.on{display:block}
.note{color:var(--dim);font-size:12px;margin:0 0 6px}
.row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:5px 0}
#menu{position:fixed;inset:auto;margin:0;display:none;background:var(--panel);border:1px solid var(--line);border-radius:8px;min-width:210px;padding:4px;z-index:50;box-shadow:var(--shadow-2)}
#menu div{padding:5px 10px;border-radius:5px;cursor:pointer}#menu div:hover{background:var(--panel2)}#menu hr{border:0;border-top:1px solid var(--line);margin:4px 0}#menu .danger{color:var(--bad)}#menu .hd{color:var(--dim);font-size:11px;cursor:default}
#toast{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--acc);padding:7px 14px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90vw;z-index:60}
#toast.on{opacity:1}
dialog{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:10px;max-width:520px}dialog::backdrop{background:var(--backdrop)}
.prop{display:grid;grid-template-columns:90px 1fr;gap:6px;align-items:center;margin:4px 0}
.prop label{color:var(--dim);font-size:12px}
/* history */
#hist{display:block;width:max-content;background:var(--panel2);border:1px solid var(--line);border-radius:8px}.history-graph-scroll{max-width:100%;overflow:auto;border-radius:8px}.history-graph-scroll #hist{max-width:none}
.hgrid>div:first-child,.hgrid>#history-git-view{min-width:0}
#history-git-view{position:relative;min-height:1px;overflow:auto;background:var(--panel2);border:1px solid var(--line);border-radius:8px}.git-history-graph{position:absolute;left:0;top:0;width:92px;height:100%;overflow:visible;pointer-events:none}.git-history-rows{position:relative}.git-history-row{position:absolute;left:0;right:0;display:flex;box-sizing:border-box;width:100%;height:48px;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;border:0;border-bottom:1px solid var(--line);border-radius:0;padding-right:10px;text-align:left;background:transparent;overflow:hidden}.git-history-row:hover{background:color-mix(in srgb,var(--acc) 9%,var(--panel2))}.git-history-row.selected{background:color-mix(in srgb,var(--acc) 15%,var(--panel2))}.git-history-message{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}.git-history-meta{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim);font-size:11px}
.leaf{display:flex;gap:8px;align-items:center;padding:3px 6px;border-bottom:1px solid var(--line)}.leaf.arch{opacity:.5}
/* variants */
#vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.card{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px}
.card.picked{border-color:var(--ok)}.card.kept{border-color:var(--acc)}.card.rej{opacity:.45}
.card canvas{width:100%;height:34px;display:block;background:var(--panel);border-radius:4px}
.card input[type=number]{width:62px}
/* arrangement */
.arr-shell{display:flex;flex:1;min-height:0;max-height:none;background:var(--panel2);border:1px solid var(--line);border-radius:8px;overflow:hidden;isolation:isolate}.arr-labels{position:relative;width:190px;flex:none;overflow:hidden;border-right:1px solid var(--line);box-sizing:border-box}.arr-label-content{position:relative}.arr{position:relative;display:block;flex:1;min-width:0;min-height:0;max-height:none;padding:0 6px 6px 0;overflow:auto}
#arr-ctl #transport{margin:0;gap:5px}.arr-info{width:22px;height:22px;padding:0;border-radius:50%;font-size:12px;font-weight:700;line-height:20px;color:var(--dim)}
.arr>.ruler{position:relative;background-color:var(--panel2);display:block;box-sizing:border-box;height:30px;min-height:30px;margin:0 0 4px;background-image:linear-gradient(to right,var(--line) 1px,transparent 1px)}
.arr>.arr-wave{position:relative;background-color:var(--panel2)}
.arr>.arr-wave{padding-top:0;margin-top:0}
.arr>.track{transition:height .18s ease}.arr>.track.open{height:90px;min-height:90px}.arr>.track.open .bar{height:82px;overflow:hidden;opacity:1;padding:3px 6px 0}
.bar .bar-ex{display:none;position:absolute;left:0;right:0;top:22px;bottom:0;align-items:stretch;gap:6px;padding:0 4px 5px;background:color-mix(in srgb,#000 22%,transparent)}.track.open .bar .bar-ex{display:flex}
.bar-ex button{flex:none;width:30px;align-self:center;padding:0;line-height:26px;font-size:14px}.bar-ex .bar-wv{position:relative;flex:1;min-width:0;background:var(--bg);border-radius:4px;cursor:ew-resize;overflow:hidden;touch-action:none}.bar-ex canvas{position:absolute;inset:0;width:100%;height:100%}.bar-ex .bar-head{position:absolute;top:0;bottom:0;width:2px;left:0;background:var(--acc);pointer-events:none}
.arr>.track{position:relative;display:block;box-sizing:border-box;height:30px;min-height:30px;margin:0 0 4px;clear:both;background-image:linear-gradient(to right,var(--line) 1px,transparent 1px)}
.arr>.arr-wave{height:44px;margin:0 0 4px;border-top:6px solid var(--panel2);box-sizing:content-box;overflow:hidden;cursor:pointer;background:linear-gradient(to right,var(--line) 1px,transparent 1px) 0 0/32px 100% repeat-x,var(--panel2)}
.volume-controls{padding:12px;display:flex;flex-direction:column;gap:12px;box-sizing:border-box}.volume-lanes{display:flex;justify-content:center;gap:14px}.volume-lane{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--panel2);border:1px solid var(--line);border-radius:8px}.volume-lane .studio-fader-wrap{font-size:11px;font-weight:600}.volume-lane .studio-fader-track.vertical{height:150px}.volume-lane .studio-fader.vertical{padding:0;border:0;background:transparent;box-sizing:border-box}.volume-lane .studio-meter{height:150px;width:10px;flex:none}.volume-lane .studio-fader-value{min-width:48px;text-align:center;background:var(--bg);border-radius:4px;padding:3px}.volume-toggles{display:grid;grid-template-columns:1fr 1fr;gap:6px}.volume-toggles label{display:flex;align-items:center;gap:7px;font-size:11px;white-space:nowrap;padding:6px 8px;border:1px solid var(--line);border-radius:5px;background:var(--panel2)}.volume-toggles input[type=checkbox]{width:13px;height:13px;flex:none;margin:0;padding:0}.volume-toggles label:has(input:checked){border-color:var(--acc);color:var(--acc)}.volume-node .volume-controls{padding:10px;margin:0 8px;border-top:1px solid var(--line)}.volume-live{width:100%;padding:7px;border-color:var(--acc);color:var(--acc)}.volume-node .player .plbg{min-width:0;flex:1}.volume-node .player button{padding:3px 6px}
.ruler span{position:absolute;top:0;font-size:10px;color:var(--dim);border-left:1px solid var(--line);padding-left:2px;height:100%}
.tlabel{position:absolute;left:-84px;width:80px;font-size:12px;color:var(--dim);line-height:26px}
.bar{position:absolute;top:2px;height:22px;border-radius:4px;background:var(--acc);color:var(--on-accent);font-size:11px;padding:3px 6px;overflow:hidden;white-space:nowrap;opacity:.85}.bar.dyn{background:var(--warn);color:var(--on-warn)}
pre{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px;overflow:auto;margin:0}
.node.st-stale{filter:grayscale(.85);opacity:.55}
.node.st-cached{filter:grayscale(.45);opacity:.85;background:color-mix(in srgb,var(--ok) 16%,var(--panel2))}
.node.st-running{filter:none;opacity:1;box-shadow:0 0 0 2px var(--warn),0 0 16px var(--warn)}
.node.st-done{filter:none;opacity:1;box-shadow:0 0 0 2px var(--ok)}
.node{transition:opacity .25s,filter .25s}
.pbar{position:absolute;left:0;right:0;bottom:0;height:5px;overflow:hidden;border-radius:0 0 8px 8px}.pbar i{display:block;height:100%;width:0;background:var(--warn)}
.tag.stat.ok{border-color:var(--ok);color:var(--ok)}.tag.stat.idle{color:var(--dim)}.tag.stat.run{border-color:var(--warn);color:var(--warn)}.tag.stat.hit{border-color:var(--ok);color:var(--ok)}
.player{display:none;align-items:center;gap:6px;width:100%;margin-top:2px}.player button{padding:0 8px;line-height:18px}.player .plbg{position:relative;display:block;flex:1;height:36px;background:var(--bg);border:1px solid var(--line);border-radius:4px;overflow:hidden;cursor:ew-resize;touch-action:none}.player .plbg canvas{display:block;width:100%;height:100%}.player .plbg .pl-played{position:absolute;left:0;top:0;height:100%;width:0;background:color-mix(in srgb,var(--acc) 25%,transparent);pointer-events:none}.player .plbg .plhead{position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--acc);pointer-events:none}.audio-stop.playing{color:var(--on-warn);background:var(--warn);border-color:var(--warn);box-shadow:0 0 10px color-mix(in srgb,var(--warn) 65%,transparent)}
#bprog{position:relative;width:min(343px,25vw);min-width:200px;flex:0 1 343px;height:20px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel2)}
#bfill{position:absolute;left:0;top:0;bottom:0;width:0;background:color-mix(in srgb,var(--acc) 45%,transparent)}
#btxt{position:relative;display:block;overflow:hidden;text-overflow:ellipsis;font-size:11px;padding:0 8px;font-style:normal;line-height:18px;white-space:nowrap}
#btn-stop[data-mode="build"]{color:#fff;background:#bd3434;border-color:#e14b4b;font-weight:650}
#btn-stop[data-mode="build"]:hover{background:#d13b3b;border-color:#ff6868}
#pm{position:fixed;inset:0;background:var(--bg);z-index:40;display:none;grid-template-columns:210px 1fr}
.pmnav{background:var(--panel);border-right:1px solid var(--line);padding:10px;display:flex;flex-direction:column;gap:6px;overflow:auto}
.pmnav h4{padding:0 0 6px;margin:0}.pmnav button{text-align:left}.pmnav button.on{border-color:var(--acc);background:var(--bg)}
.pmbody{padding:16px 22px;overflow:auto}.pmbody h2{margin:0 0 4px;font-size:18px}
.pmgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-top:8px}
.pmgrid .card{background:var(--panel)}
.brscroll{overflow:auto;padding:8px 4px 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);max-height:calc(var(--bh,280px) - 120px);min-height:150px}
.brrow{display:flex;align-items:center;min-width:max-content}
.brbox{width:250px;border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:8px;cursor:pointer;flex:none}
.brbox.this{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc)}.brbox.studio{border-color:var(--studio)}.brbox.rej{opacity:.5}
.brarrow{width:46px;height:2px;background:var(--dim);margin:0 4px;position:relative;flex:none}
.brarrow:after{content:"";position:absolute;right:-1px;top:-4px;border-left:8px solid var(--dim);border-top:5px solid transparent;border-bottom:5px solid transparent}
.brcol{display:flex;flex-direction:column;gap:8px;flex:none}
.dots{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin:6px 0}.dots i{width:10px;height:10px;border-radius:50%;background:var(--garage);display:inline-block;cursor:pointer}
.dots i.fk{outline:2px solid var(--acc);outline-offset:1px}.dots i.here{box-shadow:0 0 0 2px var(--text)}
dialog ul{margin:0}dialog .row>label{display:inline-block}
body.annot [data-ample]{outline:1px dashed var(--acc);outline-offset:-2px}
.bar{cursor:grab;user-select:none}.bar.midi{background:var(--ok);color:var(--on-ok)}.bar.txt{background:var(--data);color:var(--on-data)}
.bar .h{position:absolute;top:0;bottom:0;width:7px;cursor:ew-resize;background:color-mix(in srgb,var(--bg) 18%,transparent)}.bar .h.l{left:0}.bar .h.r{right:0}
#se{position:absolute;inset:0;display:none;background:var(--bg);z-index:7;padding-top:44px}
.sefiles{width:210px;background:var(--panel);border-right:1px solid var(--line);overflow:auto;flex:none}.sefiles h4{padding:8px 10px 4px;margin:0}
.sefile{padding:5px 10px;cursor:pointer;display:flex;gap:6px;align-items:center;border-left:3px solid transparent}.sefile:hover{background:var(--panel2)}.sefile.on{background:var(--panel2);border-left-color:var(--acc)}
.seedit{flex:1;display:flex;flex-direction:column;min-width:0}
.sebody{flex:1;display:flex;min-height:0;background:var(--panel)}
.gutter{margin:0;padding:6px 6px 6px 8px;width:62px;overflow:hidden;font:var(--se-font-size,12px)/var(--se-line-height,18px) ui-monospace,Consolas,monospace;color:var(--dim);text-align:right;border-right:1px solid var(--line);background:var(--panel2);white-space:pre;flex:none;border-radius:0;border-top:0;border-bottom:0;border-left:0}
#se-ta{flex:1;border:0;border-radius:0;padding:6px 8px;font:12px/18px ui-monospace,Consolas,monospace;white-space:pre;overflow:auto;resize:none;background:var(--panel);tab-size:2;width:auto}
.seprob{max-height:150px;overflow:auto;border-top:1px solid var(--line);background:var(--panel);padding:4px 10px}
.seerr{padding:2px 4px;cursor:pointer;font-size:12px;font-family:ui-monospace,Consolas,monospace}.seerr:hover{background:var(--panel2)}.seerr.error{color:var(--bad)}.seerr.warning{color:var(--warn)}
#se{flex-direction:row}
.sect{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--dim);margin:10px 0 3px}
.mrow{display:flex;gap:8px;align-items:center;padding:5px 6px;border:1px solid var(--line);border-radius:8px;margin:3px 0;cursor:pointer;background:var(--panel2)}.mrow:hover{border-color:var(--acc)}.mrow.bad{border-color:var(--bad)}
.mrow .mi{width:18px;text-align:center;flex:none}.mrow .mt{flex:1;min-width:0}.mn{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.mp{font-size:11px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mb{padding:0 8px;flex:none}
.pf{display:flex;gap:6px;align-items:center;padding:2px 6px;border-radius:5px;font-size:12px}.pf.click{cursor:pointer}.pf.click:hover{background:var(--panel2)}.pf .pn{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pf.dim{color:var(--dim)}
.prow{display:flex;gap:6px;align-items:center;padding:4px 2px}.prow .pnm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.prow .pnm small{color:var(--dim);margin-left:6px}.prow button{padding:0 7px;line-height:22px;flex:none}
#pg{position:absolute;inset:0;display:none;flex-direction:column;background:var(--bg);z-index:8}
.pgnav{width:190px;flex:none;background:var(--panel);border-right:1px solid var(--line);padding:10px;display:flex;flex-direction:column;gap:6px;overflow:auto}.pgnav button{text-align:left}.pgnav button.on{border-color:var(--acc);background:var(--bg)}
.dlist{max-width:640px}.drow{display:flex;gap:8px;align-items:center;padding:6px 8px;border:1px solid var(--line);border-radius:6px;margin:4px 0;background:var(--panel2);cursor:grab}.drow.over{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc)}.drow.drag{opacity:.4}.drow button{padding:0 7px;line-height:20px}
.lyrow.hl{background:color-mix(in srgb,var(--acc) 20%,transparent);outline:2px solid var(--acc);outline-offset:-1px}.lystrip i.hl{box-shadow:0 0 0 2px var(--text);height:24px;top:1px;z-index:2}.ctlrow{display:grid;grid-template-columns:1fr 56px 56px 56px;gap:4px;align-items:center;padding:2px 0;border-bottom:1px solid var(--line)}.ctlhead{color:var(--dim);font-size:11px;text-transform:uppercase}.ctlrow .tag{font-size:12px;padding:0 4px}
.lystrip i.act{box-shadow:0 0 0 2px var(--acc);background:var(--acc)!important;height:26px;top:0;z-index:3}
#lb{position:absolute;inset:0;display:none;flex-direction:row;background:var(--bg);z-index:8;padding-top:44px}
.lbtree{width:250px;flex:none;background:var(--panel);border-right:1px solid var(--line);overflow:auto}
.lbcenter{flex:1;min-width:0;overflow:auto}.lbdet{width:370px;flex:none;border-left:1px solid var(--line);background:var(--panel);overflow:auto}
.lbtbl{padding:0 10px 10px}.lbrow{display:grid;grid-template-columns:2fr 1fr .8fr 1.4fr .7fr .9fr .8fr;gap:6px;padding:4px 6px;border-bottom:1px solid var(--line);cursor:pointer;align-items:center;font-size:12px}
.lbrow:hover{background:var(--panel2)}.lbrow.sel{background:var(--panel2);outline:1px solid var(--acc)}.lbhead{cursor:default;color:var(--dim);text-transform:uppercase;font-size:11px}.lbmid .card{margin:8px 10px}
#robanner{position:absolute;top:44px;left:50%;right:auto;transform:translateX(-50%);z-index:9;display:none;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;max-width:calc(100% - 24px);box-sizing:border-box;text-align:center;white-space:normal;background:var(--warn);color:var(--on-warn);padding:4px 12px;border-radius:8px;font-weight:600;box-shadow:var(--shadow-2)}#ro-errors{flex:1 1 100%;min-width:0;white-space:normal;overflow-wrap:anywhere}#midi-gate{display:flex;align-items:center;gap:8px;min-width:0}#robanner button{flex:none;white-space:nowrap}#ro-midi-info{width:20px;height:20px;padding:0;border-radius:50%;font-weight:700;line-height:18px}
#canvaswrap.romode #cv{outline:3px dashed var(--warn);outline-offset:-3px}
#se-tip{position:fixed;display:none;z-index:70;background:var(--panel);border:1px solid var(--acc);border-radius:6px;padding:3px 8px;font-size:12px;pointer-events:none}
.cl{background:color-mix(in srgb,var(--acc) 20%,transparent);box-shadow:inset 0 -2px 0 var(--acc);border-radius:2px}
#ly{position:absolute;inset:0;display:none;flex-direction:column;background:var(--bg);z-index:8}
#canvaswrap.lymode #vswitch{display:none}
.lybody{flex:1;display:flex;min-height:0}.lyleft{flex:1;overflow:auto;padding:10px 14px}.lyright{width:340px;border-left:1px solid var(--line);background:var(--panel);padding:10px 14px;overflow:auto;flex:none}
.lyrow{display:grid;grid-template-columns:28px 90px 1fr 80px 120px;gap:6px;align-items:center;padding:3px 0;border-bottom:1px solid var(--line)}.lyrow.sel{background:var(--panel2)}.lyhead{font-size:11px;color:var(--dim);text-transform:uppercase}
.lyrow input{padding:3px 6px}.lyacts{display:flex;gap:3px}.lyacts button{padding:0 7px;line-height:20px}
.lystrip{position:relative;height:26px;background:var(--panel2);border:1px solid var(--line);border-radius:6px}.lystrip .lypart{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--acc) 13%,transparent)}
.lystrip i{position:absolute;top:4px;width:6px;height:18px;border-radius:3px;cursor:pointer;margin-left:-3px}
#canvaswrap.bmode #se[style*="flex"]{display:flex}
#vswitch{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:8;display:flex;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:2px}
#bm{position:absolute;inset:0;display:none;flex-direction:column;background:var(--bg);z-index:7;padding-top:44px}
#canvaswrap.bmode #cv,#canvaswrap.bmode #crumbs,#canvaswrap.bmode #mini,#canvaswrap.bmode #zoomctl,#canvaswrap.bmode #hint{display:none}
.bmbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:4px 10px;border-bottom:1px solid var(--line);background:var(--panel)}
.bmscroll{flex:1;overflow:auto;position:relative}
.bmstage{position:relative}.bmstage svg{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.bmbox{position:absolute;width:220px;height:112px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px 8px;overflow:hidden;cursor:pointer}
.bmbox.focus{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc)}.bmbox.onpath{border-color:var(--acc)}.bmbox.studio{border-color:var(--studio)}.bmbox.arch{opacity:.5}.bmbox.dimmed{opacity:.25}.bmbox.hit{outline:2px solid var(--warn)}
.bmbox .t{display:flex;gap:4px;align-items:center;white-space:nowrap;overflow:hidden}.bmbox .t b{overflow:hidden;text-overflow:ellipsis}
.bmbox .dots{margin:3px 0}.bmbox .row{margin:2px 0}.bmbox button{padding:0 6px;line-height:18px;font-size:11px}
#mini{position:absolute;right:10px;bottom:52px;width:180px;height:110px;background:var(--panel);border:1px solid var(--line);border-radius:8px;z-index:6;cursor:grab;opacity:.98;box-shadow:var(--shadow-2)}
#band{position:absolute;border:1px dashed var(--acc);background:color-mix(in srgb,var(--acc) 13%,transparent);display:none;z-index:4;pointer-events:none}
.node.grp{border-width:2px;background:var(--panel)}
#ltabs{display:flex;gap:2px;padding:6px 8px 0;border-bottom:1px solid var(--line)}
#ltabs button{border-radius:6px 6px 0 0;border-bottom:none;flex:1}
.tree{font-size:12px;padding:4px 6px}
.tree details{border:0}.tree summary{padding:3px 4px;color:var(--text);font-size:12px}
.tree .rev,.tree .blk{padding:2px 6px 2px 18px;border-radius:4px;cursor:pointer;display:flex;gap:6px;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tree .blk[hidden]{display:none}
.tree .rev:hover,.tree .blk:hover{background:var(--panel2)}.tree .rev.sel,.tree .blk.sel{background:var(--panel2);outline:1px solid var(--acc)}
.tree .dim{color:var(--dim)}.tree h5{margin:8px 4px 2px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
.hgrid{display:grid;grid-template-columns:minmax(0,1fr) 6px minmax(0,1fr);gap:8px;align-items:start}
.hgrid>#history-splitter{align-self:stretch;min-height:180px;border-radius:4px;background:var(--line);cursor:col-resize;touch-action:none;outline:none}.hgrid>#history-splitter:hover,.hgrid>#history-splitter:focus-visible{background:var(--acc);box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 20%,transparent)}
.hdetail{min-width:0;overflow-wrap:anywhere;line-height:1.45;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px;font-size:12px}
.hdetail h4{padding:0;margin:0 0 8px}.hdetail .kv{display:grid;grid-template-columns:58px minmax(0,1fr);gap:5px 8px}.hdetail .kv b{color:var(--dim);font-weight:400}.hdetail .kv span{overflow-wrap:anywhere}
@media (max-width:900px){#work{grid-template-columns:0 1fr 0}#left,#right{display:none}.hgrid{grid-template-columns:minmax(0,1fr)}.hgrid>#history-splitter{display:none}.hdetail{grid-row:2}.git-history-graph{width:68px}}
/* a block that is being built pulses softly green; a block that failed gets a red border */
/* only the opacity of a pseudo-element moves: it runs on the compositor, so 200 blocks of a big build do not repaint a blurred shadow every frame */
@keyframes building{0%,100%{opacity:0}50%{opacity:1}}
.node.st-running{box-shadow:0 0 0 2px color-mix(in srgb,var(--ok) 45%,transparent),0 0 6px color-mix(in srgb,var(--ok) 25%,transparent)}
.node.st-running::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 2px var(--ok),0 0 18px color-mix(in srgb,var(--ok) 55%,transparent);opacity:0;animation:building 1.4s ease-in-out infinite;will-change:opacity}
.node.is-disabled{opacity:.46!important;filter:grayscale(.75)!important}
.node.st-failed{border:2px solid var(--bad);box-shadow:0 0 0 2px color-mix(in srgb,var(--bad) 35%,transparent)}
@media (prefers-reduced-motion:reduce){.node.st-running::after{animation:none;opacity:1;box-shadow:0 0 0 2px var(--ok)}}
/* a section tag row of the lyrics editor is a heading, not a sung line */
.lyrow.lytag{background:color-mix(in srgb,var(--acc) 10%,transparent)}
.lyrow.lytag input{font-weight:600;color:var(--acc)}

/* progress of a block while it builds: no change of size. The tag names the busy step, a thin bar runs along the bottom edge, and a panel with the sub-steps opens below the block while the pointer is on it. */
.nbar{position:absolute;left:10px;right:10px;bottom:4px;height:3px;border-radius:2px;background:color-mix(in srgb,var(--ok) 18%,transparent);overflow:hidden;pointer-events:none}
.nbar>i{display:block;height:100%;background:var(--ok);border-radius:2px;transition:width .25s}
.nbar.busy>i{width:40%!important;background:repeating-linear-gradient(45deg,var(--ok) 0 6px,color-mix(in srgb,var(--ok) 40%,transparent) 6px 12px);animation:pbusy 1s linear infinite}
.nmore{position:absolute;left:6px;right:6px;top:100%;margin-top:-2px;z-index:6;background:var(--panel2);border:1px solid var(--line);border-top:0;border-radius:0 0 8px 8px;box-shadow:var(--shadow-2);padding:0 8px;max-height:0;opacity:0;overflow:hidden;pointer-events:none;transform:translateY(-4px);transition:max-height .22s ease,opacity .18s ease,padding .22s ease,transform .22s ease}
.node:hover .nmore{max-height:min(200px,calc(100vh - 24px));opacity:1;padding:6px 8px 8px;overflow:auto;pointer-events:auto;transform:none}
.node.progress-above .nmore{top:auto;bottom:100%;margin:0 0 -2px;border:1px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0;transform:translateY(4px)}
.node.progress-above:hover .nmore{transform:none}
.pbar{height:5px;border-radius:3px;background:color-mix(in srgb,var(--ok) 18%,var(--panel));overflow:hidden}
.pbar>i{display:block;height:100%;background:var(--ok);border-radius:3px;transition:width .25s}
.pbar.small{height:4px;flex:1}
.pbar.busy>i{background:repeating-linear-gradient(45deg,var(--ok) 0 6px,color-mix(in srgb,var(--ok) 40%,transparent) 6px 12px);animation:pbusy 1s linear infinite}
@keyframes pbusy{to{background-position:24px 0}}
.pstep{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(30px,1fr) 26px;align-items:center;gap:6px;font-size:11px;color:var(--text);margin-top:3px}
.pstep.head{color:var(--text);font-weight:600;margin-top:0}
.pstep span{min-width:0;overflow-wrap:anywhere;white-space:normal}
.pstep .pbar{position:relative;left:auto;right:auto;bottom:auto;min-width:24px}
.pstep b{width:26px;white-space:nowrap;text-align:right;font-weight:600}
@media (prefers-reduced-motion:reduce){.pbar.busy>i{animation:none}.nmore{transition:none}}

.tag.len{border-color:var(--ok);color:var(--ok)}.tag.len.warn{border-color:var(--warn);color:var(--warn)}.tag.len.bad{border-color:var(--bad);color:var(--bad)}

/* Arrangement parts are editable timeline clips. */
.bar{touch-action:none}.bar:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.bar .h{z-index:1}
.voicemap{display:flex;flex-direction:column;gap:3px}.voicemap-row{display:grid;grid-template-columns:54px 1fr auto auto auto;align-items:center;gap:4px;font-size:11px}.voicemap-row .vm-source{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim)}.voicemap-row.mapped .vm-source{color:var(--acc)}.voicemap-row .vm-voice{font-weight:600}
dialog.recorder{background:var(--panel);color:var(--fg,inherit);border:1px solid var(--line);border-radius:10px;padding:14px;width:min(640px,92vw)}dialog.recorder::backdrop{background:rgba(0,0,0,.5)}dialog.recorder h2{margin:0 0 8px;font-size:16px}dialog.recorder .row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0}.rec-meter{flex:1;min-width:80px;height:10px;background:var(--bg);border:1px solid var(--line);border-radius:5px;overflow:hidden}.rec-meter i{display:block;height:100%;width:0;background:var(--ok)}.rec-wave{width:100%;height:70px;background:var(--bg);border-radius:6px;display:block}.rec-takes{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}.rec-take-row{display:flex;gap:2px}.rec-take.on{border-color:var(--acc);color:var(--acc)}
.seqm,.seqs,.seqlisten{padding:0 5px;line-height:16px;font-size:10px}.seqm.on{background:var(--warn);color:var(--on-warn);border-color:var(--warn)}.seqn{width:42px;font-size:10px;padding:1px 2px}
#b-project.on{display:flex;flex-direction:column;height:100%;min-height:240px}#b-project.on>.project-panel-body{flex:1 1 0;min-height:0;height:auto}#b-project.on .project-panel-body>#project-panel-content{min-height:0}
#project-panel-content,.project-file-list,div[role=listbox]{overflow-anchor:none}
.seqc.v1,.seqc.v2,.seqc.v3{opacity:.55}.seqc.v4,.seqc.v5{opacity:.7}.seqc.v6,.seqc.v7{opacity:.85}.seqc.v8,.seqc.v9{opacity:1}
dialog.pianoroll{background:var(--panel);color:var(--text,inherit);border:1px solid var(--line);border-radius:10px;padding:10px;max-width:96vw}dialog.pianoroll::backdrop{background:rgba(0,0,0,.5)}dialog.pianoroll .row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 6px}dialog.pianoroll .sp{flex:1}.pr-canvas{display:block;max-width:100%;border:1px solid var(--line);border-radius:6px;outline:none}.pr-canvas:focus{border-color:var(--acc)}
dialog.pianoroll select,dialog.pianoroll button{width:auto;flex:none}dialog.pianoroll .row{align-items:center}
dialog.pianoroll.pr-split-primary{position:fixed;inset:2vh auto auto 1vw;width:48vw;max-width:48vw;max-height:95vh;overflow:auto;margin:0}dialog.pianoroll.pr-split-secondary{position:fixed;inset:2vh 1vw auto auto;width:48vw;max-width:48vw;max-height:95vh;overflow:auto;margin:0;z-index:2}
.pr-lane{display:block;max-width:100%;margin:2px 0;border:1px solid var(--line);border-radius:4px}
dialog.pianoroll label{display:inline-flex;flex-direction:row;align-items:center;gap:4px;white-space:nowrap}dialog.pianoroll input[type=checkbox]{width:auto;margin:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
dialog.pianoroll .pr-hscroll{display:block;width:100%;margin:2px 0;padding:0}
.pr-noteprops{position:fixed;z-index:50;background:var(--panel2,#222831);color:var(--text,inherit);border:1px solid var(--line);border-radius:8px;padding:8px;box-shadow:0 4px 18px rgba(0,0,0,.5);font-size:12px;display:flex;flex-direction:column;gap:5px}
.pr-noteprops input{width:4.5em}
.pr-noteprops .row{display:flex;gap:6px;align-items:center}
.variant-fields{border:1px solid var(--line);border-radius:6px;margin:8px 0;padding:6px 10px}.variant-fields legend{padding:0 4px;color:var(--muted)}.variant-field{display:inline-flex;align-items:center;gap:5px;margin:3px 12px 3px 0}.variant-proposal{border-top:1px solid var(--line);margin-top:5px;padding-top:4px}.variant-proposal .note,.variant-differences{overflow-wrap:anywhere}