:root{--font-sans:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", monospace;--bg-app:#090b0f;--bg-panel:#0f131dbf;--bg-card:#161c2b99;--bg-control:#1c2336;--border-light:#ffffff14;--border-glow:#00f2fe40;--accent-cyan:#00f2fe;--accent-purple:#c900ff;--accent-pink:#ff007f;--accent-green:#00ff87;--accent-amber:#ffb800;--text-primary:#f1f3f7;--text-secondary:#9aa5b8;--text-muted:#64748b;--shadow-neon:0 0 15px #00f2fe4d;--shadow-neon-pink:0 0 15px #ff007f4d;--transition-fast:.2s cubic-bezier(.4, 0, .2, 1);--transition-normal:.3s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-app);color:var(--text-primary);font-family:var(--font-sans);width:100vw;height:100vh;overflow:hidden}.app-container{grid-template-columns:420px 1fr;width:100vw;height:100vh;display:grid;position:relative}.control-panel{background:var(--bg-panel);border-right:1px solid var(--border-light);-webkit-backdrop-filter:blur(16px);z-index:10;flex-direction:column;gap:24px;height:100%;padding:24px;display:flex;overflow-y:auto}.control-panel::-webkit-scrollbar{width:6px}textarea::-webkit-scrollbar{width:6px}.console-logs::-webkit-scrollbar{width:6px}.control-panel::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:3px}textarea::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:3px}.console-logs::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:3px}.control-panel::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}textarea::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.console-logs::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.app-header{flex-direction:column;gap:6px;display:flex}.logo-wrapper{align-items:center;gap:10px;display:flex}.logo-icon{background:linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));-webkit-text-fill-color:transparent;text-shadow:0 0 10px #00f2fe33;-webkit-background-clip:text;font-size:24px;font-weight:800}h1{letter-spacing:-.5px;background:linear-gradient(90deg,#fff,#d3d7e0);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:20px;font-weight:700}.tagline{color:var(--text-secondary);font-size:13px}.tagline a{color:var(--accent-cyan);transition:color var(--transition-fast), text-shadow var(--transition-fast);font-weight:500;text-decoration:none}.tagline a:hover{color:var(--accent-purple);text-shadow:0 0 8px #c900ff66}h2{text-transform:uppercase;letter-spacing:1px;color:var(--accent-cyan);border-bottom:1px solid var(--border-light);margin-bottom:16px;padding-bottom:8px;font-size:14px}.control-group{flex-direction:column;gap:8px;display:flex}label{color:var(--text-primary);font-size:13px;font-weight:500}.setting-desc{color:var(--text-muted);font-size:11px}.select-wrapper{width:100%;position:relative}select{background:var(--bg-control);border:1px solid var(--border-light);width:100%;color:var(--text-primary);font-family:var(--font-sans);appearance:none;cursor:pointer;transition:border-color var(--transition-fast);border-radius:8px;padding:10px 14px;font-size:13px}select:focus{border-color:var(--accent-cyan);outline:none;box-shadow:0 0 8px #00f2fe26}.select-wrapper:after{content:"▼";color:var(--text-muted);pointer-events:none;font-size:8px;position:absolute;top:50%;right:14px;transform:translateY(-50%)}.editor-section{flex-direction:column;flex-grow:1;gap:8px;min-height:240px;display:flex}.editor-header{justify-content:space-between;align-items:center;display:flex}.panel-subtitle{font-size:13px;font-weight:500}.status-badge{text-transform:uppercase;border-radius:20px;padding:2px 8px;font-size:10px;font-weight:600}.status-badge.valid{color:var(--accent-green);background:#00ff871a;border:1px solid #00ff874d}.status-badge.invalid{color:var(--accent-pink);background:#ff007f1a;border:1px solid #ff007f4d}.textarea-wrapper{border:1px solid var(--border-light);background:#06070a;border-radius:8px;flex-direction:column;flex-grow:1;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 2px 8px #00000080}textarea{resize:none;color:#c9d1d9;width:100%;height:100%;font-family:var(--font-mono);background:0 0;border:none;outline:none;flex-grow:1;padding:14px;font-size:12px;line-height:1.5}textarea:focus{box-shadow:0 0 0 1px var(--accent-cyan)}.error-box{box-shadow:var(--shadow-neon-pink);animation:slideIn var(--transition-fast) forwards;background:#ff007f14;border:1px solid #ff007f40;border-radius:6px;flex-direction:column;gap:4px;padding:10px 12px;display:flex}.error-title{color:var(--accent-pink);text-transform:uppercase;font-size:11px;font-weight:700}.error-msg{font-size:11px;font-family:var(--font-mono);color:var(--text-primary);word-break:break-word}.hidden{display:none!important}.settings-section{flex-direction:column;gap:16px;display:flex}.setting-item{flex-direction:column;gap:8px;display:flex}.setting-info{justify-content:space-between;align-items:baseline;display:flex}.setting-val{font-size:12px;font-family:var(--font-mono);color:var(--accent-cyan)}.segmented-control{background:var(--bg-control);border:1px solid var(--border-light);border-radius:8px;padding:2px;display:flex}.segmented-control button{color:var(--text-secondary);font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;border-radius:6px;outline:none;flex:1;padding:8px 12px;font-size:12px;font-weight:500}.segmented-control button:hover{color:var(--text-primary)}.segmented-control button.active{color:var(--accent-cyan);border:1px solid var(--border-glow);background:#00f2fe26;box-shadow:inset 0 1px #ffffff0d}input[type=range]{-webkit-appearance:none;background:var(--bg-control);border-radius:3px;outline:none;width:100%;height:6px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent-cyan);cursor:pointer;width:16px;height:16px;transition:transform var(--transition-fast);border-radius:50%;box-shadow:0 0 8px #00f2fe99}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.toggle-grid{grid-template-columns:1fr 1fr;gap:12px;margin-top:8px;display:grid}.toggle-control{cursor:pointer;align-items:center;gap:8px;display:flex}.toggle-control input[type=checkbox]{appearance:none;background:var(--bg-control);border:1px solid var(--border-light);cursor:pointer;width:32px;height:18px;transition:background-color var(--transition-fast);border-radius:9px;outline:none;position:relative}.toggle-control input[type=checkbox]:after{content:"";background:var(--text-muted);width:12px;height:12px;transition:transform var(--transition-fast), background-color var(--transition-fast);border-radius:50%;position:absolute;top:2px;left:2px}.toggle-control input[type=checkbox]:checked{border-color:var(--border-glow);background:#00f2fe26}.toggle-control input[type=checkbox]:checked:after{background:var(--accent-cyan);transform:translate(14px)}.control-label{color:var(--text-secondary);-webkit-user-select:none;user-select:none;font-size:12px}.canvas-panel{background-color:#030406;width:100%;height:100%;position:relative;overflow:hidden}#canvas-container{cursor:grab;width:100%;height:100%}#canvas-container:active{cursor:grabbing}.canvas-controls{border:1px solid var(--border-light);-webkit-backdrop-filter:blur(12px);pointer-events:auto;z-index:5;background:#0b0e17cc;border-radius:12px;align-items:center;gap:12px;padding:8px 16px;display:flex;position:absolute;bottom:24px;left:24px}.canvas-btn{color:var(--text-secondary);font-family:var(--font-sans);cursor:pointer;transition:color var(--transition-fast), background-color var(--transition-fast);background:0 0;border:none;border-radius:6px;align-items:center;gap:6px;padding:6px 10px;font-size:12px;font-weight:500;display:flex}.canvas-btn:hover{color:var(--text-primary);background:#ffffff0d}.canvas-controls .divider{background:var(--border-light);width:1px;height:20px}.stats-label{font-size:11px;font-family:var(--font-mono);color:var(--text-muted)}.help-tooltip{color:var(--text-secondary);-webkit-backdrop-filter:blur(8px);z-index:5;white-space:nowrap;pointer-events:none;background:#0b0e1799;border:1px solid #ffffff0a;border-radius:20px;padding:8px 16px;font-size:11px;font-weight:400;position:absolute;top:24px;left:50%;transform:translate(-50%)}.details-drawer{border:1px solid var(--border-light);-webkit-backdrop-filter:blur(20px);z-index:8;background:#0f131dd9;border-radius:16px;flex-direction:column;width:360px;animation:.3s cubic-bezier(.16,1,.3,1) forwards slideDrawer;display:flex;position:absolute;top:24px;bottom:24px;right:24px;overflow:hidden;box-shadow:0 20px 40px #0009}.close-drawer-btn{color:var(--text-muted);cursor:pointer;width:24px;height:24px;transition:all var(--transition-fast);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:20px;display:flex;position:absolute;top:14px;right:14px}.close-drawer-btn:hover{color:var(--text-primary);background:#ffffff0d}.drawer-content{flex-direction:column;height:100%;display:flex}.drawer-header{border-bottom:1px solid var(--border-light);align-items:center;gap:14px;padding:24px;display:flex}.node-icon-badge{background:var(--bg-control);border:1px solid var(--border-light);border-radius:12px;justify-content:center;align-items:center;width:48px;height:48px;font-size:24px;display:flex}.drawer-header h3{color:var(--text-primary);font-size:16px;font-weight:600}.node-id-badge{font-size:10px;font-family:var(--font-mono);color:var(--accent-cyan);background:#00f2fe1a;border:1px solid #00f2fe33;border-radius:4px;margin-top:2px;padding:1px 6px;display:inline-block}.drawer-body{flex-direction:column;flex-grow:1;gap:20px;padding:24px;display:flex;overflow-y:auto}.detail-section h4{text-transform:uppercase;color:var(--text-muted);letter-spacing:.5px;margin-bottom:6px;font-size:11px}.detail-section p{color:var(--text-primary);font-size:13px}.capitalized{text-transform:capitalize}.connection-list{flex-direction:column;gap:6px;list-style:none;display:flex}.connection-list li{font-size:12px;font-family:var(--font-mono);background:var(--bg-card);border:1px solid var(--border-light);color:var(--text-secondary);border-radius:6px;padding:6px 10px}.console-logs{font-family:var(--font-mono);color:var(--accent-green);border:1px solid var(--border-light);white-space:pre-wrap;background:#05070a;border-radius:6px;max-height:180px;padding:10px;font-size:11px;line-height:1.4;overflow-y:auto}@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDrawer{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@media (width<=960px){.app-container{grid-template-rows:1fr 1fr;grid-template-columns:1fr}.control-panel{border-right:none;border-bottom:1px solid var(--border-light)}}body.light-mode{--bg-app:#f1f5f9;--bg-panel:#f1f5f9d9;--bg-card:#ffffffb3;--bg-control:#e2e8f0;--border-light:#0f172a14;--border-glow:#0066fe40;--accent-cyan:#0284c7;--accent-purple:#7c3aed;--accent-pink:#db2777;--accent-green:#16a34a;--accent-amber:#d97706;--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#94a3b8;--shadow-neon:0 0 15px #0284c726;--shadow-neon-pink:0 0 15px #db277726}body.light-mode h1{background:linear-gradient(90deg,#0f172a,#334155);-webkit-text-fill-color:transparent;-webkit-background-clip:text}body.light-mode .textarea-wrapper{background:#f8fafc;border-color:#cbd5e1;box-shadow:inset 0 1px 3px #0000000f}body.light-mode textarea{color:#1e293b}body.light-mode .console-logs{color:#16a34a;background:#f8fafc;border-color:#cbd5e1}body.light-mode .canvas-panel{background-color:#f8fafc}body.light-mode .canvas-controls{background:#f1f5f9d9;border-color:#cbd5e1}body.light-mode .canvas-btn:hover{background:#0f172a0d}body.light-mode .help-tooltip{background:#f1f5f9b3;border-color:#0f172a0d}body.light-mode .details-drawer{background:#f1f5f9e6;border-color:#cbd5e1;box-shadow:0 20px 40px #0f172a1f}body.light-mode .close-drawer-btn:hover{background:#0f172a0d}body.light-mode .node-icon-badge{background:#e2e8f0;border-color:#cbd5e1}.action-btn{background:linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));color:#fff;font-family:var(--font-sans);text-transform:uppercase;letter-spacing:.5px;cursor:pointer;transition:all var(--transition-fast);border:none;border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:10px 16px;font-size:12px;font-weight:600;display:inline-flex;box-shadow:0 4px 12px #0000004d}.action-btn:hover{box-shadow:var(--shadow-neon);transform:translateY(-1px)}.action-btn:active{transform:translateY(1px)}.action-btn.secondary{background:var(--bg-control);color:var(--text-secondary);border:1px solid var(--border-light);box-shadow:none}.action-btn.secondary:hover{border-color:var(--accent-pink);color:var(--accent-pink);box-shadow:var(--shadow-neon-pink)}.trace-status-box{border:1px solid var(--border-glow);font-size:11px;font-family:var(--font-mono);color:var(--text-primary);word-break:break-word;animation:slideIn var(--transition-fast) forwards;background:#00f2fe0d;border-radius:6px;margin-top:10px;padding:10px 12px;line-height:1.4}body.light-mode .action-btn{box-shadow:0 4px 12px #0f172a1a}body.light-mode .action-btn:hover{box-shadow:0 0 12px #0284c740}body.light-mode .action-btn.secondary{background:var(--bg-control);color:var(--text-secondary);border:1px solid var(--border-light)}body.light-mode .action-btn.secondary:hover{border-color:var(--accent-pink);color:var(--accent-pink);box-shadow:0 0 10px #db277733}body.light-mode .trace-status-box{color:var(--text-primary);background:#0284c70d;border-color:#0284c733}