:root{--fg-bg: #111827;--fg-panel: #0b1220;--fg-node: #0f1724;--fg-accent: #7c3aed;--fg-muted: #94a3b8;--fg-text: #ffffff;--fg-edge: rgba(124,58,237,.95);--fg-success: #10b981;--fg-warning: #f59e0b;--fg-error: #ef4444;--fg-smooth-edges: true;--fg-gpu-acceleration: true;--fg-will-change: transform, opacity;--fg-animation-flowing-color: #f59e0b;--fg-animation-pulsing-color: #f59e0b;--fg-animation-data-flow-color: #f59e0b;--fg-animation-speed-slow: 2.5s;--fg-animation-speed-normal: 1.5s;--fg-animation-speed-fast: .8s;--fg-executing-border: #ff6b6b;--fg-executing-shadow: rgba(255, 107, 107, .8);--fg-executing-bg: linear-gradient(135deg, rgba(255, 107, 107, .1), rgba(255, 107, 107, .05));--fg-executing-text: #ff6b6b;--fg-trail-opacity: .8;--fg-trail-stroke-width: 3px;--fg-animation-stroke-width: 4px;--fg-animation-stroke-width-hover: 6px;--fg-animation-glow-intensity: 8px;--fg-animation-trail-glow-intensity: 6px;--fg-socket-size: 10px;--fg-socket-border-width: 2px;--fg-socket-border-radius: 50%;--fg-socket-scale-hover: 1.1;--fg-socket-scale-active: 1.15;--fg-socket-bg-default: #10b981;--fg-socket-border-default: #10b981;--fg-socket-bg-hover: #10b981;--fg-socket-bg-active: #10b981;--fg-socket-input-border: #10b981;--fg-socket-input-bg: #10b981;--fg-socket-input-bg-hover: #10b981;--fg-socket-output-border: #ef4444;--fg-socket-output-bg: #ef4444;--fg-socket-output-bg-hover: #ef4444;--fg-socket-shadow-default: 0 2px 6px rgba(2,6,23,.5), inset 0 1px 0 rgba(255,255,255,.1);--fg-socket-shadow-hover: 0 4px 12px rgba(2,6,23,.7), 0 0 0 2px rgba(124,58,237,.4), inset 0 1px 0 rgba(255,255,255,.2);--fg-socket-shadow-active: 0 4px 12px rgba(124,58,237,.4), 0 0 0 3px rgba(124,58,237,.3);--fg-grid-main-color: rgba(255,255,255,.1);--fg-grid-minor-color: rgba(255,255,255,.05);--fg-grid-main-size: 50px;--fg-grid-minor-size: 10px}flow-graph[theme=dark]{--fg-bg: #111827;--fg-panel: #0b1220;--fg-node: #0f1724;--fg-accent: #7c3aed;--fg-muted: #94a3b8;--fg-text: #ffffff;--fg-edge: rgba(124,58,237,.95);--fg-success: #10b981;--fg-warning: #f59e0b;--fg-error: #ef4444}flow-graph[theme=light]{--fg-bg: #f8fafc;--fg-panel: #ffffff;--fg-node: #ffffff;--fg-grid-main-color: rgba(0,0,0,.1);--fg-grid-minor-color: rgba(0,0,0,.05);--fg-accent: #7c3aed;--fg-muted: #64748b;--fg-text: #1f2937;--fg-edge: rgba(124,58,237,.95);--fg-success: #10b981;--fg-warning: #f59e0b;--fg-error: #ef4444}flow-graph{display:block;position:relative;width:100%;height:100%;overflow:hidden;background-color:var(--fg-bg, #1a1a1a);background-image:linear-gradient(var(--fg-grid-main-color) 1px,transparent 1px),linear-gradient(90deg,var(--fg-grid-main-color) 1px,transparent 1px),linear-gradient(var(--fg-grid-minor-color) 1px,transparent 1px),linear-gradient(90deg,var(--fg-grid-minor-color) 1px,transparent 1px);background-size:var(--fg-grid-main-size) var(--fg-grid-main-size),var(--fg-grid-main-size) var(--fg-grid-main-size),var(--fg-grid-minor-size) var(--fg-grid-minor-size),var(--fg-grid-minor-size) var(--fg-grid-minor-size);background-position:0 0,0 0,0 0,0 0;transform-origin:0px 0px}.surface{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;transform-origin:0px 0px;background:transparent}#edge-svg{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;width:100%;height:100%;overflow:visible;z-index:1}#nodes-root{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;background:transparent}.node{position:absolute;min-width:160px;border-radius:12px;background:linear-gradient(180deg,#ffffff08,#ffffff03);border:1px solid rgba(255,255,255,.05);box-shadow:0 8px 32px #02061799,inset 0 1px #ffffff0d;transform-origin:0 0;-webkit-user-select:none;user-select:none;cursor:grab;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transform:translateZ(0)}.node.dragging{cursor:grabbing;opacity:1;box-shadow:0 12px 48px #020617cc,inset 0 1px #ffffff1a;transform:scale(1.02)}.node.selected{border-color:var(--fg-accent);box-shadow:0 8px 32px #02061799,0 0 0 2px #7c3aed4d,inset 0 1px #ffffff0d}.node .title{font-weight:600;font-size:14px;margin-bottom:8px;color:var(--fg-muted);padding:12px 16px 8px;background:linear-gradient(90deg,rgba(124,58,237,.1),transparent);border-bottom:1px solid rgba(255,255,255,.05);border-radius:12px 12px 0 0}.node .body{font-size:13px;color:#cbd5e1;padding:12px 16px}.node[data-color-patch] .title{background:var(--node-color-bg, linear-gradient(90deg, rgba(124,58,237,.15), transparent));color:var(--node-color-text, var(--fg-accent))}.input-box{width:100%;padding:6px 8px;border:1px solid rgba(255,255,255,.2);border-radius:6px;background:#ffffff0d;color:#fff;font-size:12px;outline:none;transition:all .2s ease;margin:4px 0;pointer-events:auto;cursor:text}.input-box:focus{border-color:var(--fg-accent);background:#ffffff1a}.input-box::placeholder{color:#ffffff80}.line{margin:4px 0}.socket{width:var(--fg-socket-size);height:var(--fg-socket-size);border-radius:var(--fg-socket-border-radius);background:var(--fg-socket-bg-default);border:var(--fg-socket-border-width) solid var(--fg-socket-border-default);display:inline-block;vertical-align:middle;margin-right:8px;box-shadow:var(--fg-socket-shadow-default);cursor:pointer;position:relative;transition:all .2s ease}flow-socket{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:var(--fg-text, #e2e8f0);position:relative;margin:4px 0}flow-socket[type=input]{flex-direction:row}flow-socket[type=output]{flex-direction:row-reverse}flow-socket .socket-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:var(--fg-text, #e2e8f0)}flow-socket[type=input] .socket-label{text-align:left}flow-socket[type=output] .socket-label{text-align:right}flow-socket-anchor{display:inline-block;position:relative;flex-shrink:0}flow-socket-anchor .socket{display:inline-block;width:10px;height:10px;border-radius:50%;border:2px solid;cursor:pointer;transition:all .2s ease;position:relative;z-index:10;margin:0}flow-socket-anchor .socket:hover{transform:scale(1.2);box-shadow:0 0 8px #ffffff4d}flow-socket-anchor .socket.socket-active{transform:scale(1.3);box-shadow:0 0 12px #ffffff80}flow-socket-anchor .socket.socket-hover{transform:scale(1.1);box-shadow:0 0 6px #fff6}flow-socket-anchor .socket.in{border-color:var(--fg-socket-input-border, #10b981);background:var(--fg-socket-input-bg, #10b981)}flow-socket-anchor .socket.out{border-color:var(--fg-socket-output-border, #ef4444);background:var(--fg-socket-output-bg, #ef4444)}.socket:hover{transform:scale(var(--fg-socket-scale-hover));background:var(--fg-socket-bg-hover);box-shadow:var(--fg-socket-shadow-hover)}.socket.socket-active{background:var(--fg-socket-bg-active);box-shadow:var(--fg-socket-shadow-active);transform:scale(var(--fg-socket-scale-active))}.connection{filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));will-change:var(--fg-will-change);transform:translateZ(0);backface-visibility:hidden;perspective:1000px}.connection:hover{stroke-width:4!important;filter:drop-shadow(0 4px 8px rgba(124,58,237,.4));transition:stroke-width .1s ease-out,filter .1s ease-out}.temp-connection{filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));will-change:var(--fg-will-change);transform:translateZ(0);backface-visibility:hidden}.edge{filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));will-change:var(--fg-will-change);transform:translateZ(0);backface-visibility:hidden;perspective:1000px;shape-rendering:geometricPrecision;text-rendering:optimizeSpeed}.edge:hover{stroke-width:4!important;filter:drop-shadow(0 4px 8px rgba(124,58,237,.4));transition:stroke-width .1s ease-out,filter .1s ease-out}.interactive{pointer-events:auto!important;cursor:auto}.interactive:hover{opacity:.8}canvas.interactive{cursor:grab}canvas.interactive:active{cursor:grabbing}button.interactive:hover{opacity:.8;transform:translateY(-1px)}.node.selected{box-shadow:0 0 0 2px var(--fg-accent);border-color:var(--fg-accent)}.edge.selected{stroke:var(--fg-accent)!important;stroke-width:3px!important;filter:drop-shadow(0 0 4px var(--fg-accent))}.node.executing{box-shadow:0 0 20px var(--fg-executing-shadow)!important;border:2px solid var(--fg-executing-border)!important;background:var(--fg-executing-bg)}.node.executing .title{color:var(--fg-executing-text)!important;font-weight:700}.node.executing.flowing{box-shadow:0 0 20px var(--fg-animation-flowing-color, .8)!important;border:2px solid var(--fg-animation-flowing-color)!important;background:linear-gradient(135deg,color-mix(in srgb,var(--fg-animation-flowing-color) 10%,transparent),color-mix(in srgb,var(--fg-animation-flowing-color) 5%,transparent))}.node.executing.flowing .title{color:var(--fg-animation-flowing-color)!important}.node.executing.pulsing{box-shadow:0 0 20px color-mix(in srgb,var(--fg-animation-pulsing-color) 80%,transparent)!important;border:2px solid var(--fg-animation-pulsing-color)!important;background:linear-gradient(135deg,color-mix(in srgb,var(--fg-animation-pulsing-color) 10%,transparent),color-mix(in srgb,var(--fg-animation-pulsing-color) 5%,transparent))}.node.executing.pulsing .title{color:var(--fg-animation-pulsing-color)!important}.node.executing.data-flow{box-shadow:0 0 20px color-mix(in srgb,var(--fg-animation-data-flow-color) 80%,transparent)!important;border:2px solid var(--fg-animation-data-flow-color)!important;background:linear-gradient(135deg,color-mix(in srgb,var(--fg-animation-data-flow-color) 10%,transparent),color-mix(in srgb,var(--fg-animation-data-flow-color) 5%,transparent))}.node.executing.data-flow .title{color:var(--fg-animation-data-flow-color)!important}.edge.flowing{stroke:var(--fg-animation-flowing-color)!important;stroke-width:var(--fg-animation-stroke-width)!important;filter:drop-shadow(0 0 var(--fg-animation-glow-intensity) var(--fg-animation-flowing-color));animation:edgeFlow var(--fg-animation-speed-normal) ease-in-out infinite;will-change:stroke-dasharray,stroke-dashoffset,opacity;transform:translateZ(0);backface-visibility:hidden}.edge.trail.flowing{stroke:var(--fg-animation-flowing-color)!important;stroke-width:var(--fg-trail-stroke-width)!important;filter:drop-shadow(0 0 var(--fg-animation-trail-glow-intensity) var(--fg-animation-flowing-color));opacity:var(--fg-trail-opacity);animation:none!important}.edge.trail.pulsing{stroke:var(--fg-animation-pulsing-color)!important;stroke-width:var(--fg-trail-stroke-width)!important;filter:drop-shadow(0 0 var(--fg-animation-trail-glow-intensity) var(--fg-animation-pulsing-color));opacity:var(--fg-trail-opacity);animation:none!important}.edge.trail.data-flow{stroke:var(--fg-animation-data-flow-color)!important;stroke-width:var(--fg-trail-stroke-width)!important;filter:drop-shadow(0 0 var(--fg-animation-trail-glow-intensity) var(--fg-animation-data-flow-color));opacity:var(--fg-trail-opacity);animation:none!important}.edge.flowing-fast{animation:edgeFlow var(--fg-animation-speed-fast) ease-in-out infinite}.edge.flowing-slow{animation:edgeFlow var(--fg-animation-speed-slow) ease-in-out infinite}@keyframes edgeFlow{0%{stroke-dasharray:0 20;stroke-dashoffset:0;opacity:.6}50%{stroke-dasharray:10 10;stroke-dashoffset:-10;opacity:1}to{stroke-dasharray:0 20;stroke-dashoffset:-20;opacity:.6}}.edge.pulsing{stroke:var(--fg-animation-pulsing-color)!important;stroke-width:var(--fg-animation-stroke-width)!important;filter:drop-shadow(0 0 var(--fg-animation-glow-intensity) var(--fg-animation-pulsing-color));animation:edgePulse var(--fg-animation-speed-normal) ease-in-out infinite}@keyframes edgePulse{0%,to{stroke-width:2px;opacity:.7}50%{stroke-width:4px;opacity:1}}.edge.data-flow{stroke:var(--fg-animation-data-flow-color)!important;stroke-width:var(--fg-animation-stroke-width)!important;filter:drop-shadow(0 0 var(--fg-animation-glow-intensity) var(--fg-animation-data-flow-color));animation:dataFlow var(--fg-animation-speed-slow) linear infinite}@keyframes dataFlow{0%{stroke-dasharray:0 30;stroke-dashoffset:0}to{stroke-dasharray:0 30;stroke-dashoffset:-30}}.node.dragging{opacity:1;transform:scale(1.02);box-shadow:0 8px 25px #0000004d;z-index:1000;transform:translateZ(0)}.socket-context-menu{position:fixed;background:var(--fg-panel);border:1px solid var(--fg-muted);border-radius:4px;box-shadow:0 4px 12px #0000004d;z-index:10000;min-width:120px;padding:4px 0}.socket-context-menu .context-menu-item{padding:8px 12px;cursor:pointer;color:var(--fg-text);font-size:12px;display:flex;align-items:center;gap:8px;transition:background-color .2s ease}.socket-context-menu .context-menu-item:hover{background-color:var(--fg-muted)}.socket-context-menu .context-menu-item:active{background-color:var(--fg-accent);color:var(--fg-panel)}.socket.long-press-active{transform:scale(1.4)!important;box-shadow:0 0 16px #fffc!important;animation:long-press-pulse .5s ease-in-out}.node.long-press-active{transform:scale(1.05)!important;box-shadow:0 0 20px #3b82f699!important;animation:node-long-press-pulse .5s ease-in-out}@keyframes long-press-pulse{0%{transform:scale(1.2)}50%{transform:scale(1.5)}to{transform:scale(1.4)}}@keyframes node-long-press-pulse{0%{transform:scale(1.02)}50%{transform:scale(1.08)}to{transform:scale(1.05)}}flow-definitions{display:none!important}.surface.readonly .socket{cursor:not-allowed!important;opacity:.7}.surface.readonly .node{cursor:default!important}.surface.readonly .node:hover{transform:none!important}.glow-effect{box-shadow:0 0 8px #10b98199;animation:glow-pulse 2s ease-in-out infinite alternate}@keyframes glow-pulse{0%{box-shadow:0 0 8px #10b98199}to{box-shadow:0 0 16px #10b981cc,0 0 24px #10b98166}}