:root{--bg:#fdf6e3;--surface:#fdf6e3;--surface-2:#eee8d5;--border:#d9ceb2;--border-focus:#93a1a1;--text:#586e75;--text-muted:#839496;--text-dim:#b3bfbf;--accent:#268bd2;--accent-dim:#9ecfef;--accent-glow:#268bd21f;--danger:#dc322f;--danger-dim:#dc322f1a;--handle:#eee8d5;--handle-hover:#e4dcc8;--shadow-sm:0 1px 3px #07364214;--shadow-md:0 4px 20px #0736421a;--shadow-lg:0 8px 40px #07364224;--radius:10px;--radius-sm:6px;--font-ui:"DM Mono", monospace;--font-display:"Fraunces", Georgia, serif;--connect-col:#268bd2}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg);font-family:var(--font-ui);color:var(--text);-webkit-user-select:none;user-select:none;background-image:linear-gradient(#268bd212 1px,#0000 1px),linear-gradient(90deg,#268bd212 1px,#0000 1px);background-size:40px 40px;height:100vh;overflow:hidden}body.pan-ready,body.pan-ready .draggable-container,body.pan-ready .drag-handle,body.pan-ready textarea{cursor:grab}body.panning,body.panning *{cursor:grabbing!important}.toolbar{-webkit-backdrop-filter:blur(16px);border:1px solid var(--border);z-index:1000;box-shadow:var(--shadow-md), 0 0 0 1px #0736420a inset;white-space:nowrap;background:#eee8d5e0;border-radius:40px;align-items:center;gap:12px;padding:8px 16px;display:flex;position:fixed;top:16px;left:50%;transform:translate(-50%)}.toolbar-brand{border-right:1px solid var(--border);align-items:center;gap:7px;padding-right:12px;display:flex}.brand-icon{color:var(--accent);filter:drop-shadow(0 0 5px #268bd266);font-size:18px;line-height:1}.brand-name{font-family:var(--font-display);color:var(--text);letter-spacing:-.3px;font-size:15px;font-weight:600}.brand-name em{color:var(--accent);font-style:italic;font-weight:300}.toolbar-actions{gap:6px;display:flex}.tool-btn{background:var(--surface-2);border:1px solid var(--border);color:var(--text-muted);font-size:11px;font-family:var(--font-ui);letter-spacing:.3px;cursor:pointer;white-space:nowrap;border-radius:20px;align-items:center;gap:6px;padding:6px 12px;font-weight:500;transition:all .18s;display:flex}.tool-btn:hover{color:var(--text);border-color:var(--border-focus);background:var(--handle-hover)}.tool-btn svg{flex-shrink:0}.create-btn:hover{color:var(--accent);border-color:var(--accent-dim);background:var(--accent-glow);box-shadow:0 0 12px var(--accent-glow)}.connect-btn.active{color:var(--accent);border-color:var(--accent);background:var(--accent-glow);box-shadow:0 0 14px var(--accent-glow);animation:2s ease-in-out infinite pulse-connect}@keyframes pulse-connect{0%,to{box-shadow:0 0 10px var(--accent-glow)}50%{box-shadow:0 0 20px #5b9cf64d}}.clear-btn:hover{color:var(--danger);background:var(--danger-dim);border-color:#f565654d}.export-btn:hover{color:#2aa198;background:#2aa19817;border-color:#2aa19859}.load-btn:hover{color:#859900;background:#85990017;border-color:#85990059}.zoom-controls{border-left:1px solid var(--border);align-items:center;gap:4px;padding-left:12px;display:flex}.zoom-btn{justify-content:center;min-width:30px;padding:6px 9px;font-size:14px;line-height:1}.zoom-btn:hover{color:var(--accent);border-color:var(--accent-dim);background:var(--accent-glow)}.zoom-level{font-family:var(--font-ui);color:var(--text-muted);text-align:center;cursor:pointer;border-radius:var(--radius-sm);letter-spacing:.3px;border:1px solid #0000;min-width:40px;padding:5px 7px;font-size:11px;font-weight:500;transition:background .15s,color .15s}.zoom-level:hover{background:var(--handle-hover);border-color:var(--border);color:var(--text)}.reset-view-btn:hover{color:var(--accent);border-color:var(--accent-dim);background:var(--accent-glow)}#workspace{position:absolute;inset:0;overflow:hidden}#canvas-layer{transform-origin:0 0;will-change:transform;width:100%;height:100%;position:absolute;top:0;left:0}.draggable-container{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md);z-index:2;flex-direction:column;min-width:260px;transition:box-shadow .2s,border-color .2s,transform .15s;display:inline-flex;position:absolute}.draggable-container:hover{border-color:var(--border-focus);box-shadow:var(--shadow-lg)}.draggable-container.is-dragging{box-shadow:0 20px 60px #0736422e, 0 0 0 1px var(--accent-dim);border-color:var(--accent-dim);transform:scale(1.01);z-index:100!important}.draggable-container.connect-source{border-color:var(--accent);box-shadow:var(--shadow-lg), 0 0 20px var(--accent-glow)}.draggable-container.connect-target-hover{border-color:var(--accent);box-shadow:0 0 25px var(--accent-glow)}.draggable-container.node-enter{animation:.25s cubic-bezier(.34,1.56,.64,1) forwards nodeEnter}@keyframes nodeEnter{0%{opacity:0;transform:scale(.85)translateY(8px)}to{opacity:1;transform:scale(1)translateY(0)}}.node-header{border-bottom:1px solid var(--border);background:var(--handle);border-radius:var(--radius) var(--radius) 0 0;align-items:center;gap:6px;padding:8px 10px 8px 8px;display:flex}.drag-handle{width:24px;height:24px;color:var(--text-dim);cursor:grab;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;transition:color .15s,background .15s;display:flex}.drag-handle:hover{color:var(--text-muted);background:var(--handle-hover)}.drag-handle:active{cursor:grabbing}.node-title{font-family:var(--font-ui);color:var(--text-muted);letter-spacing:.4px;text-transform:uppercase;cursor:text;background:0 0;border:none;outline:none;flex:1;min-width:0;font-size:11px;font-weight:500;transition:color .15s}.node-title:focus{color:var(--text)}.node-title::placeholder{color:var(--text-dim)}.node-delete{width:22px;height:22px;color:var(--text-dim);cursor:pointer;opacity:0;background:0 0;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;transition:color .15s,background .15s;display:flex}.draggable-container:hover .node-delete{opacity:1}.node-delete:hover{color:var(--danger);background:var(--danger-dim)}.editor-wrapper{border-radius:0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);width:300px;height:150px;position:relative;overflow:hidden}textarea{resize:both;width:100%;height:100%;font-family:var(--font-ui);color:var(--text);z-index:2;caret-color:var(--accent);background:0 0;border:none;outline:none;padding:12px 14px;font-size:13px;line-height:1.6;position:absolute;top:0;left:0}textarea::placeholder{color:var(--text-dim)}textarea:focus{background:var(--surface-2)}.tex-preview{background:var(--surface);word-break:break-word;z-index:1;pointer-events:none;width:100%;height:100%;color:var(--text);padding:12px 14px;font-size:14px;line-height:1.7;position:absolute;top:0;left:0;overflow-y:auto}.draggable-container:not(.editing) .tex-preview{z-index:3;pointer-events:auto}.tex-preview .MathJax_Display{margin:.6em 0}.node-connect-dot{background:var(--surface);border:2px solid var(--border-focus);cursor:crosshair;z-index:10;opacity:0;border-radius:50%;width:12px;height:12px;transition:opacity .15s,transform .15s,border-color .15s,box-shadow .15s,background .15s;position:absolute}.node-connect-dot[data-dir=top]{top:-7px;left:50%;transform:translate(-50%)}.node-connect-dot[data-dir=bottom]{bottom:-7px;left:50%;transform:translate(-50%)}.node-connect-dot[data-dir=left]{top:50%;left:-7px;transform:translateY(-50%)}.node-connect-dot[data-dir=right]{top:50%;right:-7px;transform:translateY(-50%)}.draggable-container:hover .node-connect-dot{opacity:1}.node-connect-dot:hover{border-color:var(--accent);background:var(--accent-glow);box-shadow:0 0 8px var(--accent-glow);transform:translate(-50%)scale(1.4)}.node-connect-dot[data-dir=left]:hover,.node-connect-dot[data-dir=right]:hover{transform:translateY(-50%)scale(1.4)}.node-connect-dot.dot-target-hover{background:#85990026;border-color:#859900;box-shadow:0 0 12px #85990059;opacity:1!important}.node-connect-dot[data-dir=top].dot-target-hover,.node-connect-dot[data-dir=bottom].dot-target-hover{transform:translate(-50%)scale(1.6)}.node-connect-dot[data-dir=left].dot-target-hover,.node-connect-dot[data-dir=right].dot-target-hover{transform:translateY(-50%)scale(1.6)}body.drawing-mode .node-connect-dot{opacity:1;border-color:var(--accent);background:var(--accent-glow);box-shadow:0 0 8px var(--accent-glow)}body.drawing-mode .node-connect-dot[data-dir=top],body.drawing-mode .node-connect-dot[data-dir=bottom]{animation:1.5s ease-in-out infinite dotPulseX}body.drawing-mode .node-connect-dot[data-dir=left],body.drawing-mode .node-connect-dot[data-dir=right]{animation:1.5s ease-in-out infinite dotPulseY}@keyframes dotPulseX{0%,to{transform:translate(-50%)scale(1)}50%{transform:translate(-50%)scale(1.35)}}@keyframes dotPulseY{0%,to{transform:translateY(-50%)scale(1)}50%{transform:translateY(-50%)scale(1.35)}}#svg-canvas{pointer-events:none;z-index:500;width:100%;height:100%;position:fixed;top:0;left:0;overflow:visible}.connection-path{stroke:var(--connect-col);stroke-width:2px;fill:none;marker-end:url(#arrow);opacity:.7;transition:opacity .2s,stroke-width .2s}.connection-path:hover{opacity:1;stroke-width:2.5px}.preview-path{stroke:var(--accent-dim);stroke-width:1.8px;fill:none;stroke-dasharray:6 4;marker-end:url(#arrow-preview);animation:.6s linear infinite dash-flow}@keyframes dash-flow{to{stroke-dashoffset:-10px}}.conn-delete-btn{cursor:pointer;pointer-events:all;transition:opacity .2s}.conn-delete-btn circle{fill:var(--surface-2);stroke:var(--border-focus)}.conn-delete-btn path{stroke:var(--text-dim)}.conn-delete-btn:hover circle{fill:var(--danger-dim);stroke:var(--danger)}.conn-delete-btn:hover path{stroke:var(--danger)}.toast{background:var(--surface-2);border:1px solid var(--border-focus);color:var(--text-muted);z-index:9999;opacity:0;pointer-events:none;letter-spacing:.3px;border-radius:20px;padding:8px 18px;font-size:12px;transition:opacity .25s,transform .25s;position:fixed;bottom:28px;left:50%;transform:translate(-50%)translateY(20px)}.toast.show{opacity:1;transform:translate(-50%)translateY(0)}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--border-focus)}