@import "https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap";:root{color:#e2e8f0;--bg-deep:#020617;--bg-panel:#0f172ae0;--border:#334155cc;--text-muted:#94a3b8;background:#020617;font-family:DM Sans,system-ui,sans-serif;line-height:1.5}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0}.app-shell{background:radial-gradient(ellipse 80% 50% at 50% -10%, #22d3ee14, transparent), radial-gradient(ellipse 60% 40% at 90% 80%, #a78bfa0f, transparent), var(--bg-deep);flex-direction:column;height:100vh;display:flex}.header{border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#020617bf;flex-shrink:0;justify-content:space-between;align-items:center;gap:24px;padding:14px 24px;display:flex}.header-brand{align-items:center;gap:14px;display:flex}.logo-mark{letter-spacing:-.02em;color:#020617;background:linear-gradient(135deg,#22d3ee,#a78bfa);border-radius:12px;place-items:center;width:44px;height:44px;font-size:14px;font-weight:700;display:grid;box-shadow:0 0 24px #22d3ee59}.header h1{letter-spacing:-.02em;color:#f8fafc;margin:0;font-size:1.25rem;font-weight:700}.header p{color:var(--text-muted);margin:2px 0 0;font-size:.8rem}.hud{border:1px solid var(--border);background:var(--bg-panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;align-items:center;gap:12px;min-width:280px;padding:10px 16px;display:flex}.hud-idle{color:var(--text-muted);font-size:.85rem}.hud-active{flex-direction:column;align-items:stretch;gap:8px}.hud-text{flex-direction:column;gap:2px;font-size:.8rem;display:flex}.hud-text strong{color:#f8fafc;font-size:.9rem}.hud-text em{color:#22d3ee;font-family:JetBrains Mono,monospace;font-size:.78rem;font-style:normal}.hud-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.hud-dot.idle{background:#475569}.hud-dot.active{background:#22c55e;animation:1.2s infinite pulse-dot;box-shadow:0 0 10px #22c55e}.hud-active .hud-dot{align-self:flex-start}.hud-progress{background:#1e293b;border-radius:2px;height:3px;overflow:hidden}.hud-progress-fill{background:linear-gradient(90deg,#ef4444,#f472b6);border-radius:2px;height:100%;transition:width .5s cubic-bezier(.4,0,.2,1)}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.5}}.canvas-wrap{flex:1;min-height:0;position:relative}.architecture-flow{background:0 0!important}.layer-bands{pointer-events:none;z-index:0;position:absolute;inset:0;overflow:hidden}.layer-band{background:linear-gradient(90deg, color-mix(in srgb, var(--band-color) 6%, transparent), color-mix(in srgb, var(--band-color) 2%, transparent) 40%, transparent);border:1px solid color-mix(in srgb, var(--band-color) 12%, transparent);border-radius:16px;margin:0 12px;position:absolute;left:0;right:0}.layer-band-label{text-transform:uppercase;letter-spacing:.14em;color:var(--band-color);opacity:.55;font-size:10px;font-weight:600;position:absolute;top:50%;left:20px;transform:translateY(-50%)}.glow-node{border:2px solid var(--border);border-color:var(--border);min-width:200px;max-width:220px;box-shadow:var(--node-shadow,0 4px 24px #0006);cursor:pointer;background:linear-gradient(160deg,#0f172af2 0%,#1e293be6 100%);border-radius:14px;padding:14px 16px 12px;position:relative}.glow-handle{opacity:0;background:var(--accent)!important;border:none!important;width:6px!important;height:6px!important}.glow-node-ring{border:2px solid var(--accent);pointer-events:none;border-radius:18px;animation:1.4s ease-in-out infinite ring-pulse;position:absolute;inset:-8px}@keyframes ring-pulse{0%,to{opacity:.35;transform:scale(1)}50%{opacity:.9;transform:scale(1.03)}}.glow-node-dot{background:#22c55e;border-radius:50%;width:10px;height:10px;position:absolute;top:10px;right:10px;box-shadow:0 0 12px #22c55e}.glow-node-layer{text-transform:uppercase;letter-spacing:.12em;color:var(--accent);opacity:.85;margin-bottom:6px;font-size:9px;font-weight:600;display:block}.glow-node-label{color:#f1f5f9;letter-spacing:-.01em;font-size:13px;font-weight:600;line-height:1.35;display:block}.panel-stack{flex-direction:column;gap:10px;max-width:300px;display:flex;margin:14px!important}.panel{background:var(--bg-panel);border:1px solid var(--border);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:14px;padding:14px 16px;box-shadow:0 12px 40px #00000073}.panel-head{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.panel-title{text-transform:uppercase;letter-spacing:.12em;color:#64748b;font-size:10px;font-weight:600}.btn-ghost{color:#f87171;cursor:pointer;background:0 0;border:none;border-radius:6px;padding:4px 8px;font-size:11px;font-weight:600}.btn-ghost:hover{background:#f871711a}.flow-list{flex-direction:column;gap:8px;display:flex}.flow-btn{width:100%;color:inherit;text-align:left;cursor:pointer;background:#0f172a99;border:1px solid #334155;border-radius:10px;align-items:flex-start;gap:10px;padding:10px 12px;transition:border-color .2s,background .2s,transform .15s;display:flex;position:relative;overflow:hidden}.flow-btn:hover{background:#1e293bcc;border-color:#22d3ee;transform:translate(2px)}.flow-btn-active{background:linear-gradient(135deg,#7f1d1d40,#0f172ae6);border-color:#ef4444}.flow-btn-icon{flex-shrink:0;font-size:18px;line-height:1}.flow-btn-label{color:#f8fafc;font-size:13px;font-weight:600;display:block}.flow-btn-desc{color:var(--text-muted);margin-top:2px;font-size:11px;line-height:1.35;display:block}.flow-btn-pulse{background:linear-gradient(90deg,#0000,#ef444414,#0000);animation:2s linear infinite shimmer;position:absolute;inset:0}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.layer-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.layer-pill{color:#94a3b8;cursor:pointer;background:#0f172a80;border:1px solid #334155;border-radius:8px;align-items:center;gap:8px;padding:8px 10px;font-size:11px;font-weight:500;transition:all .2s;display:flex}.layer-pill-on{border-color:var(--layer-color);color:#f1f5f9;background:color-mix(in srgb, var(--layer-color) 12%, #0f172ae6)}.layer-pill-swatch{background:var(--layer-color);opacity:.5;border-radius:50%;width:8px;height:8px}.layer-pill-on .layer-pill-swatch{opacity:1;box-shadow:0 0 8px var(--layer-color)}.legend-list{color:var(--text-muted);margin:0;padding:0;font-size:11px;list-style:none}.legend-list li{align-items:center;gap:10px;margin-bottom:8px;display:flex}.legend-swatch{border-radius:4px;flex-shrink:0;width:14px;height:14px}.legend-swatch.reached{background:#ef4444;box-shadow:0 0 8px #ef444480}.legend-swatch.next{background:0 0;border:2px solid #22d3ee}.legend-swatch.particle{background:#64748b;border-radius:50%}.legend-swatch.dim{opacity:.4;background:#1e293b}.sidebar{z-index:20;border-left:1px solid var(--border);background:linear-gradient(#0f172afa,#020617fa);width:min(360px,92vw);height:100%;padding:28px 24px;position:absolute;top:0;right:0;overflow-y:auto;box-shadow:-16px 0 48px #00000080}.sidebar-close{color:#94a3b8;cursor:pointer;background:#0f172a;border:1px solid #334155;border-radius:8px;width:32px;height:32px;font-size:14px;position:absolute;top:16px;right:16px}.sidebar-close:hover{color:#f8fafc;border-color:#64748b}.sidebar-layer{text-transform:uppercase;letter-spacing:.1em;margin:0 0 8px;font-size:10px;font-weight:600}.sidebar h2{color:#f8fafc;letter-spacing:-.02em;margin:0 0 14px;padding-right:36px;font-size:1.35rem;font-weight:700}.sidebar-desc{color:var(--text-muted);margin:0 0 24px;font-size:.9rem;line-height:1.55}.sidebar h3{text-transform:uppercase;letter-spacing:.1em;color:#64748b;margin:0 0 12px;font-size:10px;font-weight:600}.sidebar-links{margin:0;padding:0;list-style:none}.sidebar-links li{color:#e2e8f0;background:#1e293b80;border:1px solid #334155;border-radius:8px;align-items:center;gap:8px;margin-bottom:6px;padding:10px 12px;font-size:13px;display:flex}.sidebar-arrow{color:#22d3ee;font-family:JetBrains Mono,monospace}.sidebar-muted{color:#64748b;font-size:.85rem}.flow-controls-ui button{color:#e2e8f0!important;background:#1e293b!important;border-color:#475569!important;border-radius:8px!important}.flow-controls-ui button:hover{background:#334155!important}.flow-minimap{overflow:hidden;border:1px solid var(--border)!important;border-radius:12px!important}.react-flow__minimap-mask{fill:#020617d9}.react-flow{direction:ltr}.react-flow__container{width:100%;height:100%;position:absolute;top:0;left:0}.react-flow__pane{z-index:1;cursor:-webkit-grab;cursor:grab}.react-flow__pane.selection{cursor:pointer}.react-flow__pane.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow .react-flow__edges{pointer-events:none;overflow:visible}.react-flow__edge-path,.react-flow__connection-path{stroke:#b1b1b7;stroke-width:1px;fill:none}.react-flow__edge{pointer-events:visibleStroke;cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;animation:.5s linear infinite dashdraw}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge:focus .react-flow__edge-path,.react-flow__edge:focus-visible .react-flow__edge-path{stroke:#555}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge-textbg{fill:#fff}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;user-select:none}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;animation:.5s linear infinite dashdraw}.react-flow__connectionline{z-index:1001}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{-webkit-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:-webkit-grab;cursor:grab;position:absolute}.react-flow__node.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:0 0;pointer-events:none}.react-flow__nodesselection-rect{pointer-events:all;cursor:-webkit-grab;cursor:grab;position:absolute}.react-flow__handle{pointer-events:none;background:#1a192b;border:1px solid #fff;border-radius:100%;width:6px;min-width:5px;height:6px;min-height:5px;position:absolute}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;bottom:-4px;left:50%;transform:translate(-50%)}.react-flow__handle-top{top:-4px;left:50%;transform:translate(-50%)}.react-flow__handle-left{top:50%;left:-4px;transform:translateY(-50%)}.react-flow__handle-right{top:50%;right:-4px;transform:translateY(-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__panel{z-index:5;margin:15px;position:absolute}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.center{left:50%;transform:translate(-50%)}.react-flow__attribution{background:#ffffff80;margin:0;padding:2px 3px;font-size:10px}.react-flow__attribution a{color:#999;text-decoration:none}@keyframes dashdraw{0%{stroke-dashoffset:10px}}.react-flow__edgelabel-renderer{pointer-events:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;position:absolute}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-default,.react-flow__node-input,.react-flow__node-output,.react-flow__node-group{color:#222;text-align:center;background-color:#fff;border:1px solid #1a192b;border-radius:3px;width:150px;padding:10px;font-size:12px}.react-flow__node-default.selectable:hover,.react-flow__node-input.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:0 1px 4px 1px #00000014}.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:0 0 0 .5px #1a192b}.react-flow__node-group{background-color:#f0f0f040}.react-flow__nodesselection-rect,.react-flow__selection{background:#0059dc14;border:1px dotted #0059dccc}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls{box-shadow:0 0 2px 1px #00000014}.react-flow__controls-button{box-sizing:content-box;cursor:pointer;-webkit-user-select:none;user-select:none;background:#fefefe;border:none;border-bottom:1px solid #eee;justify-content:center;align-items:center;width:16px;height:16px;padding:5px;display:flex}.react-flow__controls-button:hover{background:#f4f4f4}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__minimap{background-color:#fff}.react-flow__minimap svg{display:block}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{background-color:#3367d9;border:1px solid #fff;border-radius:1px;width:4px;height:4px;transform:translate(-50%,-50%)}.react-flow__resize-control.handle.left{top:50%;left:0}.react-flow__resize-control.handle.right{top:50%;left:100%}.react-flow__resize-control.handle.top{top:0;left:50%}.react-flow__resize-control.handle.bottom{top:100%;left:50%}.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left{left:0}.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right{left:100%}.react-flow__resize-control.line{border:0 solid #3367d9}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;height:100%;top:0;transform:translate(-50%)}.react-flow__resize-control.line.left{border-left-width:1px;left:0}.react-flow__resize-control.line.right{border-right-width:1px;left:100%}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{width:100%;height:1px;left:0;transform:translateY(-50%)}.react-flow__resize-control.line.top{border-top-width:1px;top:0}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}