:root{--concrete: #D6D4CF;--concrete-2: #C9C7C1;--ink: #141414;--ink-soft: #4B4A47;--shu: #E23D28;--paper-line: rgba(20, 20, 20, .14)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:JetBrains Mono,monospace;background:var(--concrete);color:var(--ink);overflow:hidden;height:100vh}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:600;opacity:.55;background:repeating-linear-gradient(180deg,transparent 0 118px,rgba(0,0,0,.045) 118px 121px)}body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:600;opacity:.35;background-image:radial-gradient(rgba(0,0,0,.05) 1px,transparent 1px);background-size:5px 5px}.app-container{display:flex;height:100vh;width:100vw}.sidebar{width:280px;background:var(--concrete-2);border-right:2px solid var(--ink);overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:16px}.sidebar::-webkit-scrollbar{width:10px}.sidebar::-webkit-scrollbar-track{background:var(--concrete-2)}.sidebar::-webkit-scrollbar-thumb{background:var(--ink);border:3px solid var(--concrete-2)}.sidebar-header{padding-bottom:14px;border-bottom:2px solid var(--ink);display:flex;align-items:center;gap:12px}.brand-seal{flex:0 0 auto;width:34px;height:34px;background:var(--shu);color:#fff;display:grid;place-items:center;font-size:19px;font-weight:500;user-select:none}.app-logo{height:15px;width:auto;display:block;margin-bottom:5px}.app-subtitle{font-size:10px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.2em}.sidebar-section{margin-bottom:16px}.sidebar-section h2{font-size:11px;font-weight:700;color:var(--ink);letter-spacing:.2em;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:8px}.category-icon{font-size:0;width:10px;height:10px;background:var(--ink);flex:0 0 auto}.node-palette{display:flex;flex-direction:column;gap:7px}.palette-node{display:flex;align-items:center;padding:9px 12px;background:var(--concrete);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);cursor:pointer;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.palette-node:hover{background:var(--shu);color:#fff;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}.palette-node.preset-rig{flex-direction:column;align-items:flex-start;gap:3px}.preset-rig .rig-sub{font-size:9px;letter-spacing:.06em;text-transform:none;opacity:.65}.editor-area{flex:1;position:relative;overflow:hidden;background:var(--concrete);border-left:18px solid var(--concrete)}#previewCanvas{position:absolute;top:0;left:0;transform-origin:0 0;pointer-events:none;z-index:0;image-rendering:pixelated;image-rendering:crisp-edges;display:none}.editor-transform{position:absolute;transform-origin:0 0}.editor-area.nodes-hidden #editorTransform,.editor-area.nodes-hidden #wires{display:none}.editor-grid{position:absolute;top:0;left:0;width:10000px;height:10000px;background-image:linear-gradient(rgba(20,20,20,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(20,20,20,.065) 1px,transparent 1px),linear-gradient(rgba(20,20,20,.032) 1px,transparent 1px),linear-gradient(90deg,rgba(20,20,20,.032) 1px,transparent 1px);background-size:120px 120px,120px 120px,24px 24px,24px 24px}.editor{position:relative;width:10000px;height:10000px}#wires{position:absolute;top:0;left:0;width:100%;height:100%;z-index:5;pointer-events:none}.node{position:absolute;width:300px;background:var(--concrete);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);z-index:10;user-select:none;transition:width .1s ease-out}.node.selected{border-color:var(--shu)}.node.dragging{transform:translate(-2px,-2px);box-shadow:10px 10px 0 var(--ink)}.node-header{padding:11px 14px;background:var(--ink);color:var(--concrete);display:flex;justify-content:space-between;align-items:center;cursor:move;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.14em}.node-type{font-size:10px;color:#8a8a86;background:transparent;padding:2px 0;text-transform:uppercase;letter-spacing:.16em}.node-body{padding:14px;display:flex;flex-direction:column;gap:8px}.node-controls-container{position:relative;display:flex;flex-direction:column;gap:8px}.socket{position:absolute;width:15px;height:15px;background:var(--concrete);border:2px solid var(--ink);cursor:crosshair;z-index:20;transition:background .15s,transform .15s,box-shadow .15s}.socket:before{content:"";position:absolute;left:-11px;top:-11px;width:36px;height:36px}.socket.connected{background:var(--ink)}.socket:hover{background:var(--shu);border-color:var(--shu);transform:scale(1.2)}.socket.snap-target{background:var(--shu);border-color:var(--shu);transform:scale(1.5);box-shadow:0 0 0 4px #e23d284d}.editor-area.connecting .socket.incompatible{opacity:.25}.socket-label{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.1em}.node-control{display:flex;flex-direction:column;gap:4px}.control-label{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.1em}.node-control input[type=text],.node-control input[type=number],.node-control input[type=file],.node-control select{background:#fff;border:2px solid var(--ink);padding:6px 8px;color:var(--ink);font-family:JetBrains Mono,monospace;font-size:12px;width:100%}.node-control input[type=file]{background:transparent;border:none;padding:0}.node-control input[type=file]::file-selector-button{background:var(--ink);color:var(--concrete);border:2px solid var(--ink);font-family:JetBrains Mono,monospace;font-size:10px;text-transform:uppercase;letter-spacing:.1em;padding:6px 10px;margin-right:8px;cursor:pointer}.node-control input[type=file]::file-selector-button:hover{background:var(--shu);border-color:var(--shu)}.node-control input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:18px;background:transparent;cursor:pointer;margin:2px 0}.node-control input[type=range]::-webkit-slider-runnable-track{height:4px;background:var(--paper-line)}.node-control input[type=range]::-moz-range-track{height:4px;background:var(--paper-line)}.node-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;margin-top:-5px;background:var(--ink);border:2px solid var(--ink);transition:background .15s,transform .15s}.node-control input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:0;background:var(--ink);border:2px solid var(--ink);transition:background .15s,transform .15s}.node-control input[type=range]:hover::-webkit-slider-thumb{background:var(--shu);border-color:var(--shu);transform:scale(1.1)}.node-control input[type=range]:hover::-moz-range-thumb{background:var(--shu);border-color:var(--shu);transform:scale(1.1)}.node-control input[type=range]:focus{outline:none}.node-control input[type=range]:focus::-webkit-slider-thumb{box-shadow:0 0 0 3px #e23d284d}.node-control input[type=range]:focus::-moz-range-thumb{box-shadow:0 0 0 3px #e23d284d}.node-control input:focus,.node-control select:focus{outline:none;border-color:var(--shu)}.help-text{font-size:11px;color:var(--ink-soft);font-style:normal;margin-top:4px}.output-canvas{width:100%;height:auto;background:#111;border:2px solid var(--ink)}.connection{stroke:var(--ink);stroke-width:3;fill:none;stroke-linecap:square;cursor:pointer;pointer-events:auto}.connection.selected{stroke:var(--shu);stroke-width:3.5}.connection-ghost{stroke:var(--shu);stroke-width:2.5;fill:none;stroke-linecap:square;stroke-dasharray:6,5}.quick-actions{position:absolute;top:16px;right:16px;display:flex;gap:10px;z-index:100}.action-btn{background:var(--concrete);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:8px 12px;color:var(--ink);cursor:pointer;font-family:JetBrains Mono,monospace;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.12em}.action-btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}.action-btn:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}#add-image-btn{background:#c93222;color:#fff}.zoom-controls-container{position:absolute;bottom:44px;right:16px;display:flex;align-items:center;gap:8px;background:var(--concrete);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:6px 8px;z-index:100}.zoom-display{font-size:11px;color:var(--ink);min-width:40px;text-align:center;letter-spacing:.08em}.zoom-controls{display:flex;gap:4px}.zoom-btn{width:24px;height:24px;background:var(--concrete);border:2px solid var(--ink);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px}.zoom-btn:hover{background:var(--shu);border-color:var(--shu);color:#fff}.status-bar{position:absolute;bottom:0;left:0;right:0;background:var(--concrete);border-top:2px solid var(--ink);padding:6px 16px;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.14em;z-index:100}.status-item{display:flex;align-items:center;gap:8px}.status-indicator{width:9px;height:9px;background:var(--shu)}.delete-hint{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--ink);color:var(--concrete);border:2px solid var(--ink);box-shadow:4px 4px #14141459;padding:12px 20px;z-index:1000;font-size:12px;text-transform:uppercase;letter-spacing:.1em}.connection-hint{position:fixed;top:20px;left:50%;transform:translate(-50%);background:var(--ink);color:var(--concrete);border:2px solid var(--ink);box-shadow:4px 4px #14141459;padding:12px 20px;z-index:1000;font-size:12px;text-transform:uppercase;letter-spacing:.1em}.panning{cursor:grabbing!important}.pan-ready{cursor:grab}.connecting{cursor:crosshair}.palette-preview{display:flex;flex-wrap:wrap;gap:2px;margin-top:8px}.palette-color{width:20px;height:20px;border:1px solid var(--ink)}.preset-select{width:100%;background:#fff;border:2px solid var(--ink);padding:6px 8px;color:var(--ink);font-family:JetBrains Mono,monospace;font-size:12px}.color-inputs{display:flex;flex-direction:column;gap:8px;max-height:200px;overflow-y:auto;margin-top:8px}.color-input{display:flex;align-items:center;gap:8px}.color-preview{width:20px;height:20px;border:1px solid var(--ink)}.color-value{flex:1;background:#fff;border:2px solid var(--ink);padding:4px 8px;color:var(--ink);font-size:12px;font-family:JetBrains Mono,monospace}.add-color-btn{background:var(--concrete);border:2px solid var(--ink);padding:4px 8px;color:var(--ink);cursor:pointer;font-family:JetBrains Mono,monospace;font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-top:4px}.add-color-btn:hover{background:var(--shu);border-color:var(--shu);color:#fff}.color-pick{width:30px;height:26px;padding:0;border:2px solid var(--ink);background:none;cursor:pointer;flex:0 0 auto}.color-pick::-webkit-color-swatch-wrapper{padding:2px}.color-pick::-webkit-color-swatch{border:none}.color-pick::-moz-color-swatch{border:none}.remove-color-btn{background:var(--concrete);border:2px solid var(--ink);color:var(--ink);width:24px;height:24px;cursor:pointer;font-size:13px;line-height:1;flex:0 0 auto}.remove-color-btn:hover{background:var(--shu);border-color:var(--shu);color:#fff}.app-copyright{font-size:9px;color:var(--ink-soft);letter-spacing:.14em;text-transform:uppercase;margin-top:3px}