/* СЕТЬ: нодовая среда КОННЕКТ. Чёрный фон, тонкие белые линии, один акцент #ff5958, без скруглений. */
:root{--bg:#000;--fg:#fff;--mut:rgba(255,255,255,.66);--dim:rgba(255,255,255,.42);--line:rgba(255,255,255,.18);--panel:rgba(0,0,0,.84);--acc:#ff5958;--gut:16px}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:#000}
body{color:var(--fg);font:300 12px/1.4 Montserrat,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
button,select,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:1px solid var(--acc);outline-offset:2px}
#gl{position:fixed;inset:0;width:100vw;height:100vh;display:block}
#ws{position:fixed;inset:0;overflow:hidden;touch-action:none;cursor:grab}
#ws{cursor:default}
#ws.is-pan{cursor:grab}
#ws.is-pan:active{cursor:grabbing}
#world{position:absolute;left:0;top:0;transform-origin:0 0;width:1px;height:1px}
#wires{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible}

/* связи */
.w{fill:none;stroke:#fff;stroke-width:1.2;vector-effect:non-scaling-stroke;pointer-events:none}
.w.t-audio{stroke:var(--acc)}
.w.t-value{stroke-dasharray:5 4}
.w.t-spectrum{stroke-dasharray:1 3;stroke-width:1.6}
.w.t-texture{stroke-width:1.6}
.w.pend{stroke:var(--acc);stroke-dasharray:3 3}
.wh{fill:none;stroke:transparent;stroke-width:14;vector-effect:non-scaling-stroke;pointer-events:stroke;cursor:pointer}
.wg:hover .w{stroke-width:2.2}
.wg.sel .w{stroke:var(--acc);stroke-width:2.4}

/* узел */
.nd{position:absolute;left:0;top:0;width:232px;border:1px solid var(--line);cursor:default;user-select:none;-webkit-user-select:none}
.nd>*:not(.nd-pv){background:var(--panel)}
.nd.sel{border-color:var(--acc)}
.nd.err{border-color:var(--acc);border-style:dashed}
.nd-h{display:flex;align-items:baseline;gap:8px;padding:8px 8px 7px 10px;border-bottom:1px solid var(--line);cursor:grab}
.nd-t{font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.nd-s{flex:1;min-width:0;font-size:10px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nd-x{width:18px;height:18px;line-height:16px;text-align:center;font-size:14px;color:var(--dim)}
.nd-x:hover{color:var(--acc)}
.nd-pv{position:relative;aspect-ratio:16/9;border-bottom:1px solid var(--line)}
.nd-pv span{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.nd-pv.live span{display:none}
.nd-io{display:grid;grid-template-columns:1fr 1fr;padding:5px 0}
.io{position:relative;display:flex;align-items:center;gap:6px;min-height:22px;padding:0 14px;color:var(--mut);font-size:11px;white-space:nowrap}
.io.o{justify-content:flex-end}
.io .mt{position:absolute;right:14px;bottom:2px;width:40px;height:1px;background:var(--acc);transform-origin:100% 50%;transform:scaleX(0)}
.nd-ps{border-top:1px solid var(--line);padding:4px 0}
.pr{position:relative;display:grid;grid-template-columns:78px minmax(0,1fr) 38px;align-items:center;gap:8px;min-height:24px;padding:0 10px 0 14px}
.pr.is-sel{grid-template-columns:78px minmax(0,1fr)}
.pr-l{font-size:11px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr.mod .pr-l{color:var(--fg)}
.pr-r{position:relative;display:block}
.pr-m{position:absolute;left:0;right:0;bottom:1px;height:1px;background:var(--acc);transform-origin:0 50%;transform:scaleX(0);display:none}
.pr.mod .pr-m{display:block}
.pr-v{font-size:10px;color:var(--dim);text-align:right;font-variant-numeric:tabular-nums}
input[type=range]{width:100%;height:18px;margin:0;appearance:none;-webkit-appearance:none;background:none;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--dim)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:9px;height:9px;margin-top:-4px;background:var(--fg);border:0;border-radius:0}
input[type=range]::-moz-range-track{height:1px;background:var(--dim)}
input[type=range]::-moz-range-thumb{width:9px;height:9px;background:var(--fg);border:0;border-radius:0}
.pr-s,.bar select{width:100%;height:22px;padding:0 20px 0 6px;background:#000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23fff'/%3E%3C/svg%3E") no-repeat right 7px center;border:1px solid var(--line);border-radius:0;appearance:none;-webkit-appearance:none;font-size:11px;cursor:pointer}
.pr-s option,.bar select option{background:#000}

/* порты: квадраты, тип виден по заливке */
.pt{position:absolute;top:50%;width:10px;height:10px;margin-top:-5px;border:1px solid var(--fg);background:#000;cursor:crosshair;z-index:2}
.pt::before{content:"";position:absolute;inset:-7px}
.io.i .pt,.pr .pt{left:-6px}
.io.o .pt{right:-6px}
.pt.t-texture{background:var(--fg)}
.pt.t-spectrum{background:#000;box-shadow:inset 0 0 0 2px #000,inset 0 0 0 5px var(--fg)}
.pt.t-audio{border-color:var(--acc);background:var(--acc)}
.pt.t-value{background:#000}
.pt.on{outline:1px solid var(--fg);outline-offset:2px}
.pt.t-audio.on{outline-color:var(--acc)}
.pt:hover,.pt.ok{transform:scale(1.35)}
.pt.ok{outline:1px solid var(--acc);outline-offset:2px}
.pt.no{opacity:.25}

/* своё содержимое узла */
.nd-u{display:grid;gap:8px;padding:8px 10px 10px;border-top:1px solid var(--line)}
.nd-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.nd-n{margin:0;font-size:10px;line-height:1.45;color:var(--dim)}
.nd-c{display:block;width:100%;height:auto;background:#050505}
.nd-px{image-rendering:pixelated;aspect-ratio:16/9}
.nd-ta,.nd-in{width:100%;padding:6px 8px;background:#000;border:1px solid var(--line);border-radius:0;font-size:11px;resize:vertical;user-select:text;-webkit-user-select:text}
.nd-ta{min-height:54px;font-family:ui-monospace,Menlo,monospace}
.b{display:inline-flex;align-items:center;justify-content:center;min-height:26px;padding:0 10px;border:1px solid var(--line);font-size:10px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:border-color .15s,background .15s,color .15s}
.b:hover{border-color:var(--fg)}
.b.on,.b-acc{border-color:var(--acc);color:var(--acc)}
.b-acc:hover{background:var(--acc);color:#000}
.b-play{position:relative;flex:none;width:30px;height:30px;border:1px solid var(--line)}
.b-play::before{content:"";position:absolute;left:11px;top:9px;width:9px;height:11px;background:var(--fg);clip-path:polygon(0 0,100% 50%,0 100%)}
.is-play .b-play::before{left:10px;width:9px;clip-path:polygon(0 0,34% 0,34% 100%,66% 100%,66% 0,100% 0,100% 100%,0 100%)}
.is-play .b-play{border-color:var(--acc)}
.set-t{flex:1;min-width:0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.set-bar{position:relative;display:block;height:9px;cursor:pointer}
.set-bar::before{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:var(--line)}
.set-bar i{position:absolute;left:0;right:0;top:4px;height:1px;background:var(--fg);transform-origin:0 50%;transform:scaleX(0)}
.set-time{font-size:10px;color:var(--dim);font-variant-numeric:tabular-nums}

/* верхняя панель */
.bar{position:fixed;left:0;right:0;top:0;z-index:20;height:56px;display:flex;align-items:center;gap:18px;padding:0 var(--gut);background:#000;border-bottom:1px solid var(--line)}
.bar-brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none;color:var(--fg)}
.bar-brand img{height:28px;width:auto}
.bar-brand span{font-size:18px;letter-spacing:.14em;text-transform:uppercase}
.bar-name{flex:none;padding-left:18px;border-left:1px solid var(--line);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--acc)}
.bar-f{display:flex;align-items:center;gap:8px;flex:none}
.bar-f span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.bar-f select{width:auto;min-width:170px;height:28px}
.bar-q select{min-width:70px}
.bar-a{display:flex;align-items:center;gap:6px;margin-left:auto}
.bar-a .b{min-height:28px}
@media (max-width:1180px){.bar-a [data-a=save],.bar-a [data-a=open],.bar-q{display:none}}
@media (max-width:820px){.bar-brand span,.bar-a [data-a=fit],.bar-a [data-a=link]{display:none}.bar{gap:10px}.bar-f select{min-width:120px}.bar-name{padding-left:10px}}
@media (max-width:520px){.bar-f span,.bar-name{display:none}}

/* нижняя строка */
.sb{position:fixed;left:0;right:0;bottom:0;z-index:20;height:32px;display:flex;align-items:center;gap:24px;padding:0 var(--gut);background:rgba(0,0,0,.9);border-top:1px solid var(--line);font-size:11px;color:var(--dim);white-space:nowrap}
.sb-note{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--mut)}
.sb-stat{font-variant-numeric:tabular-nums}
@media (max-width:900px){.sb-keys{display:none}}

/* меню узлов */
.menu{position:fixed;z-index:30;width:300px;max-height:min(440px,calc(100vh - 110px));display:grid;grid-template-rows:auto minmax(0,1fr);background:#000;border:1px solid var(--fg)}
.menu[hidden]{display:none}
.menu input{height:36px;padding:0 12px;background:#000;border:0;border-bottom:1px solid var(--line);border-radius:0;font-size:12px;outline:0}
.menu-l{overflow:auto;padding:4px 0 8px}
.menu-c{margin:10px 12px 4px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
.menu-i{display:grid;width:100%;padding:6px 12px;text-align:left}
.menu-i b{font-weight:400;font-size:12px;letter-spacing:.06em}
.menu-i span{font-size:10px;color:var(--dim)}
.menu-i.act{background:#151515}
.menu-e{margin:14px 12px;color:var(--dim)}

/* вступление и подсказки */
.intro{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.72)}
.intro[hidden]{display:none}
.intro-p{width:min(520px,100%);padding:32px 34px 30px;background:#000;border:1px solid var(--line)}
.intro-e{margin:0;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--acc)}
.intro h1{margin:6px 0 16px;font-size:44px;font-weight:200;letter-spacing:.14em;text-transform:uppercase;line-height:1}
.intro p{margin:0 0 14px;font-size:14px;line-height:1.6;color:var(--mut)}
.intro ul{margin:0 0 24px;padding:0;list-style:none;font-size:13px;line-height:1.55}
.intro li{padding:8px 0;border-top:1px solid var(--line)}
.k-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 28px;border:1px solid var(--fg);font-size:12px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;transition:background .2s,color .2s}
.k-btn:hover{background:var(--fg);color:#000}
.hint,.toast{position:fixed;left:50%;bottom:46px;z-index:35;transform:translateX(-50%);margin:0;padding:8px 14px;background:#000;border:1px solid var(--line);font-size:11px;letter-spacing:.06em;white-space:nowrap}
.hint{color:var(--acc);border-color:var(--acc)}
.toast{bottom:86px}
.hint[hidden],.toast[hidden]{display:none}
.nogl{position:fixed;inset:0;z-index:50;display:grid;place-items:center;margin:0;padding:24px;background:#000;font-size:14px;text-align:center}
.nogl[hidden]{display:none}

/* только визуал */
.bare-btn{position:fixed;right:var(--gut);top:14px;z-index:25;display:none;min-height:28px;padding:0 12px;border:1px solid var(--line);background:#000;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:0;transition:opacity .3s}
.bare #ws,.bare .bar,.bare .sb,.bare .menu{display:none}
.bare .bare-btn{display:block}
.bare:hover .bare-btn{opacity:.8}
.bare{cursor:none}
.bare:hover{cursor:default}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* рамка выделения и список клавиш */
.boxsel{position:fixed;z-index:15;border:1px solid var(--acc);background:rgba(255,89,88,.06);pointer-events:none}
.boxsel[hidden]{display:none}
.keys{position:fixed;right:16px;top:68px;z-index:32;width:min(430px,calc(100vw - 32px));max-height:calc(100vh - 120px);overflow:auto;padding:18px 20px 16px;background:#000;border:1px solid var(--fg)}
.keys[hidden]{display:none}
.keys-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.keys h2{margin:0;font-size:12px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--acc)}
.keys-n{margin:8px 0 12px;font-size:11px;color:var(--dim);line-height:1.45}
.keys dl{margin:0;display:grid}
.keys dl div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:7px 0;border-top:1px solid var(--line)}
.keys dt{font-size:11px;letter-spacing:.04em;color:var(--fg)}
.keys dd{margin:0;font-size:11px;color:var(--mut)}
.k-link{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);border-bottom:1px solid var(--line);padding-bottom:2px}
.k-link:hover{color:var(--fg);border-color:var(--fg)}
.mic-bar i{transition:background .1s}
.nd-u.is-on .b:first-child{border-color:var(--acc);color:var(--acc)}

/* панель узлов */
.lib{position:fixed;left:0;top:56px;bottom:32px;z-index:18;width:272px;display:grid;grid-template-rows:auto auto auto auto minmax(0,1fr);background:rgba(0,0,0,.92);border-right:1px solid var(--line)}
.lib[hidden]{display:none}
.lib-h{display:flex;align-items:baseline;justify-content:space-between;padding:14px 14px 8px}
.lib h2{margin:0;font-size:11px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--acc)}
.lib-t{display:flex;flex-wrap:wrap;gap:4px;padding:0 14px 8px}
.lib-t button{min-height:24px;padding:0 8px;border:1px solid var(--line);font-size:10px;letter-spacing:.12em}
.lib-t button.on{border-color:var(--fg);background:var(--fg);color:#000}
.lib input{margin:0 14px;height:30px;padding:0 10px;background:#000;border:1px solid var(--line);border-radius:0;font-size:12px}
.lib-n{margin:8px 14px 6px;font-size:10px;color:var(--dim);line-height:1.4}
.lib-l{overflow:auto;padding:0 8px 16px}
.lib-c{margin:12px 6px 4px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.lib-i{display:grid;gap:1px;padding:7px 8px;border:1px solid transparent;cursor:grab;user-select:none;-webkit-user-select:none}
.lib-i:hover,.lib-i:focus-visible{border-color:var(--line);background:#0e0e0e}
.lib-r{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.lib-r b{font-weight:400;font-size:12px;letter-spacing:.04em}
.lib-f{font-size:9px;letter-spacing:.14em;color:var(--acc)}
.lib-d{font-size:10px;color:var(--mut)}
.lib-td{font-size:9px;color:var(--dim);font-family:ui-monospace,Menlo,monospace}
.lib-ghost{position:fixed;z-index:60;transform:translate(-50%,-50%);padding:8px 12px;background:#000;border:1px solid var(--acc);font-size:11px;letter-spacing:.14em;text-transform:uppercase;pointer-events:none}
.lib-on .sb-note{padding-left:272px}
@media (max-width:900px){.lib{width:min(272px,86vw)}.lib-on .sb-note{padding-left:0}}
.sdr-pv{cursor:crosshair}
.nd-prompt{font-family:inherit!important;font-size:12px!important}
.b-tap{min-width:80px}

/* текстовые связи: ромб, как DAT в TouchDesigner */
.pt.t-text{background:#000;border-color:var(--fg);transform:rotate(45deg) scale(.9)}
.pt.t-text.on,.pt.t-text:hover,.pt.t-text.ok{transform:rotate(45deg) scale(1.2)}
.w.t-text{stroke-dasharray:9 3 2 3}
.nd-out{margin:0;padding:8px 9px;min-height:44px;max-height:120px;overflow:auto;background:#050505;border:1px solid var(--line);font-size:11px;line-height:1.45;color:var(--fg);white-space:pre-wrap;user-select:text;-webkit-user-select:text}
.nd-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#050505;border:1px solid var(--line)}

/* узлы части 3: цвет, код, углы, пульт, нейростиль */
.nd-color input[type=color]{width:26px;height:20px;padding:0;border:1px solid var(--line);border-radius:0;background:#000;cursor:pointer}
.nd-color input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.nd-color input[type=color]::-webkit-color-swatch{border:0;border-radius:0}
.nd-code{min-height:150px;font-size:10.5px;line-height:1.5;tab-size:2;white-space:pre;overflow:auto}
.nd-err{min-height:0;font-family:ui-monospace,Menlo,monospace;font-size:10px;color:var(--dim)}
.nd-err.bad{color:var(--acc);border-color:var(--acc)}
.pin-pv{touch-action:none}
.pin-h{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border:1px solid var(--acc);background:rgba(0,0,0,.4);cursor:move;z-index:2;touch-action:none}
.pin-h:hover{background:var(--acc)}
.pult{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;height:110px}
.pult-f{position:relative;border:1px solid var(--line);background:#050505;cursor:ns-resize;touch-action:none;overflow:hidden}
.pult-f i{position:absolute;inset:0;background:var(--fg);opacity:.85;transform-origin:bottom;transform:scaleY(.5)}
.pult-p{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px}
.pult-b{height:34px;border:1px solid var(--line);border-radius:0;background:#050505;color:var(--dim);font:inherit;font-size:11px;cursor:pointer;touch-action:none}
.pult-b.on{background:var(--acc);border-color:var(--acc);color:#000}
.nstyle-thumb{width:32px;height:32px;border:1px solid var(--line)}

/* узлы части 4: Зрение VLM, Стили по промтам, MIDI-сцены */
.vlm-top{display:grid;grid-template-columns:64px 1fr;gap:8px;align-items:stretch}
.vlm-d{display:grid;place-items:center;border:1px solid var(--acc);color:var(--acc);font-size:40px;font-weight:200;line-height:1}
.vlm-shot{border:1px solid var(--line)}
.vlm-h{font-family:ui-monospace,Menlo,monospace;letter-spacing:.08em}
.nd-in[type=password]{font-family:ui-monospace,Menlo,monospace}
.nd-chk input{accent-color:var(--acc);margin:0}
.ps-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:4px}
.ps-t{position:relative;padding:0;border:1px solid var(--line);border-radius:0;background:#050505;cursor:pointer;aspect-ratio:1}
.ps-t canvas{display:block;width:100%;height:100%}
.ps-t span{position:absolute;left:2px;top:1px;font-size:10px;color:#fff;text-shadow:0 0 3px #000}
.ps-t.proc canvas{opacity:.25}
.ps-t.on{border-color:var(--acc);outline:1px solid var(--acc)}
.ms-steps{display:grid;grid-template-columns:repeat(16,1fr);gap:2px;height:8px}
.ms-steps i{background:var(--line)}
.ms-steps i:nth-child(4n+1){background:rgba(255,255,255,.3)}
.ms-steps i.on{background:var(--acc)}