:root{font-family:MS Gothic,Lucida Console,Courier New,monospace;color:#111827;background:#e5edf7;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--panel: #ffffff;--line: #d8e0ea;--soft: #f6f8fb;--text-muted: #64748b;--blue: #2563eb;--blue-dark: #1d4ed8;--danger: #dc2626;--shadow: 0 18px 45px rgba(15, 23, 42, .12);--pixel-font: "MS Gothic", "Lucida Console", "Courier New", monospace}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0}body,button,input,textarea,select{font-family:var(--pixel-font)}button,input,textarea{font:inherit}button{border:0}.app-shell{display:flex;flex-direction:column;min-width:960px;height:100%;overflow:hidden;background:linear-gradient(180deg,#ffffffbd,#ffffff61),#e5edf7}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 18px;border-bottom:1px solid var(--line);background:#ffffffe6;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);z-index:5}.brand{display:flex;align-items:center;gap:12px;min-width:320px}.brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:8px;background:#172554;color:#fff;font-weight:900}.brand h1{margin:0;font-size:18px;letter-spacing:0}.brand p{margin:3px 0 0;color:var(--text-muted);font-size:12px;line-height:1.35}.actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}.actions button,.background-toggle button,.zoom-controls button,.side-panel button{min-height:36px;padding:0 12px;border-radius:8px;background:#f1f5f9;color:#0f172a;border:1px solid #cbd5e1;cursor:pointer;font-weight:700;font-size:13px;transition:background .12s ease,border-color .12s ease,color .12s ease,transform .12s ease}.actions button:hover,.background-toggle button:hover,.zoom-controls button:hover,.side-panel button:hover{background:#e2e8f0}.actions button:active,.background-toggle button:active,.zoom-controls button:active,.side-panel button:active{transform:translateY(1px)}.actions button.active,.background-toggle button.active{background:var(--blue);color:#fff;border-color:var(--blue-dark)}.actions button.danger,.side-panel button.danger{color:#991b1b;background:#fee2e2;border-color:#fecaca}.background-toggle{display:flex;align-items:center;gap:4px;padding:4px;border:1px solid #cbd5e1;border-radius:8px;background:#fff}.background-toggle button{min-height:28px;padding:0 8px;text-transform:capitalize}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:0;min-height:0;flex:1}.viewport{position:relative;overflow:hidden;min-height:0;background-color:#f8fafc;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.viewport.bg-grid{background-color:#f8fafc;background-image:linear-gradient(#e2e8f0 1px,transparent 1px),linear-gradient(90deg,#e2e8f0 1px,transparent 1px);background-size:40px 40px}.viewport.bg-white{background-color:#fff;background-image:none}.viewport.bg-black{background-color:#020617;background-image:none}.viewport:active,.viewport.panning-ready:active{cursor:grabbing}.viewport.connect-mode{cursor:crosshair}.world{position:absolute;top:0;right:0;bottom:0;left:0;width:1px;height:1px;transform-origin:0 0;will-change:transform}.edges-layer{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;pointer-events:none}.edge{fill:none;stroke-width:2.5;pointer-events:none}.edge.selected{stroke-width:4;filter:drop-shadow(0 0 6px rgba(37,99,235,.4))}.edge-arrow{pointer-events:none}.edge-arrow.selected{filter:drop-shadow(0 0 6px rgba(37,99,235,.4))}.edge-hit{fill:none;stroke:transparent;stroke-width:18;pointer-events:stroke;cursor:pointer}.node{position:absolute;display:grid;place-items:center;padding:16px 18px 22px;border:2px solid;border-radius:10px;box-shadow:0 14px 28px #0f172a1f;cursor:grab;overflow:hidden;-webkit-user-select:none;user-select:none}.node:active{cursor:grabbing}.node.selected{outline:3px solid rgba(37,99,235,.28);outline-offset:3px}.node.connect-source{box-shadow:0 0 0 5px #16a34a2e,0 14px 28px #0f172a1f}.node-label{width:100%;max-height:100%;overflow:hidden;text-align:center;font-size:15px;font-weight:750;line-height:1.25;white-space:pre-wrap;overflow-wrap:anywhere}.node-editor{width:100%;height:100%;min-height:42px;border:1px solid #cbd5e1;border-radius:8px;resize:none;padding:8px;color:inherit;background:#ffffffc7;outline:2px solid transparent;cursor:text}.node-editor:focus{outline-color:#2563eb66}.node-id{position:absolute;left:10px;bottom:6px;max-width:calc(100% - 36px);color:#0f172a85;font-size:10px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.resize-handle{position:absolute;right:4px;bottom:4px;width:18px;height:18px;min-height:18px;padding:0;border:0;border-radius:5px;background:linear-gradient(135deg,transparent 45%,rgba(15,23,42,.25) 46%,rgba(15,23,42,.25) 56%,transparent 57%),linear-gradient(135deg,transparent 62%,rgba(15,23,42,.25) 63%,rgba(15,23,42,.25) 73%,transparent 74%);cursor:nwse-resize}.viewport-status,.zoom-controls{position:absolute;display:flex;align-items:center;gap:8px;z-index:2}.viewport-status{left:16px;bottom:16px;padding:9px 10px;border-radius:8px;background:#ffffffe6;border:1px solid var(--line);box-shadow:0 8px 22px #0f172a14;color:#334155;font-size:12px;font-weight:700}.viewport-status span+span{color:var(--blue-dark)}.zoom-controls{right:16px;bottom:16px}.zoom-controls button{min-width:42px;padding:0 10px}.side-panel{min-height:0;overflow:auto;padding:16px;border-left:1px solid var(--line);background:#ffffffc2}.panel-section{padding:15px;border-radius:8px;border:1px solid var(--line);background:var(--panel);box-shadow:0 10px 24px #0f172a0f}.panel-section+.panel-section{margin-top:12px}.panel-section h2{margin:0 0 12px;font-size:14px;letter-spacing:0}.muted{margin:0;color:var(--text-muted);font-size:13px;line-height:1.45}.editor-group{display:grid;gap:14px}.editor-group label{display:grid;gap:6px;color:#334155;font-size:12px;font-weight:800}.editor-group textarea{width:100%;min-height:86px;resize:vertical;padding:10px;border-radius:8px;border:1px solid #cbd5e1;color:#0f172a;background:#fff;line-height:1.4}.color-control{display:grid;gap:8px}.color-control>span{color:#334155;font-size:12px;font-weight:800}.swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}.swatches button{width:26px;height:26px;min-height:26px;padding:0;border-radius:7px;border:1px solid #94a3b8;box-shadow:inset 0 0 0 1px #ffffff85}.swatches button.picked{outline:3px solid rgba(37,99,235,.28);outline-offset:2px}.color-control input[type=color]{width:100%;height:38px;padding:3px;border-radius:8px;border:1px solid #cbd5e1;background:#fff}.metrics{display:flex;justify-content:space-between;gap:10px;padding:9px;border-radius:8px;background:var(--soft);color:#334155;font-size:12px}.metrics code{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#0f172a;font-weight:800}.full-width{width:100%}.local-saves{display:grid;gap:12px}.save-name{display:grid;gap:6px;color:#334155;font-size:12px;font-weight:800}.save-name input{width:100%;min-height:36px;padding:8px 10px;border:1px solid #cbd5e1;border-radius:8px;color:#0f172a;background:#fff}.save-list{display:grid;gap:8px}.save-row{display:grid;gap:8px;padding:10px;border:1px solid #e2e8f0;border-radius:8px;background:#f8fafc}.save-row strong,.save-row span{display:block}.save-row strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.save-row span{margin-top:3px;color:var(--text-muted);font-size:11px}.save-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}.stats div{display:flex;align-items:baseline;justify-content:space-between;padding:8px 0;border-top:1px solid #edf2f7}.stats strong{font-size:22px}.stats span{color:var(--text-muted);font-size:12px;font-weight:800;text-transform:uppercase}.shortcuts p{display:flex;align-items:center;gap:7px;margin:8px 0;color:#475569;font-size:13px}kbd{display:inline-grid;min-width:24px;min-height:22px;place-items:center;padding:2px 6px;border-radius:6px;border:1px solid #cbd5e1;background:#f8fafc;color:#0f172a;font-size:11px;font-weight:800}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%);z-index:10;max-width:min(520px,calc(100vw - 32px));padding:12px 16px;border-radius:8px;border:1px solid #bfdbfe;background:#eff6ff;color:#1e3a8a;box-shadow:var(--shadow);font-weight:800;font-size:13px}@media(max-width:1120px){.toolbar{align-items:flex-start;flex-direction:column}.actions{justify-content:flex-start}}@media(max-width:980px){.app-shell{min-width:0}.workspace{grid-template-columns:1fr;grid-template-rows:minmax(520px,1fr) auto}.side-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-height:310px;border-left:0;border-top:1px solid var(--line)}.panel-section+.panel-section{margin-top:0}}@media(max-width:720px){.brand{min-width:0}.actions button{flex:1 1 140px}.side-panel{grid-template-columns:1fr}}