@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap";:root{--bg:#1e1e1e;--card:#262626;--card-hi:#303030;--border:#383838;--border-hi:#484848;--text:#dcddde;--muted:#999;--dim:#707070;--accent:#6c99bb;--accent-dim:#6c99bb1f;--green:#a8c373;--green-dim:#a8c3731a;--orange:#d5763f;--orange-dim:#d5763f1a;--purple:#9e86c8;--purple-dim:#9e86c814;--pink:#b05279;--red:#d04255;--yellow:#e5b567;--yellow-dim:#e5b5671a;--prompt-gray:#505050;--drop:#6c99bb40;--empty:#ffffff0a;--empty-border:#ffffff26;--font-sm:14px;--font-base:16px;--font-lg:18px;--font-xl:20px;--font-mono:"IBM Plex Mono", "Consolas", monospace;--font-sans:"Inter", -apple-system, "Segoe UI", sans-serif;--radius-sm:4px;--radius-md:8px;--radius-lg:12px}*{box-sizing:border-box;margin:0;padding:0}html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:var(--font-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;line-height:1.5}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--dim);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--muted)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}::selection{color:var(--text);background:#6c99bb4d}@keyframes skeleton-pulse{0%,to{opacity:.04}50%{opacity:.08}}.skeleton{background:var(--empty);border-radius:var(--radius-md);animation:1.5s ease-in-out infinite skeleton-pulse}.modal-overlay{z-index:500;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#000000a6;justify-content:center;align-items:center;display:flex;position:fixed;inset:0;overflow:auto}.modal-content{background:var(--card);border:1px solid var(--border-hi);border-radius:var(--radius-lg);max-width:94vw;max-height:88vh;padding:24px;overflow:auto;box-shadow:0 16px 48px #00000080}@keyframes toast-in{0%{opacity:0;transform:translate(-50%)translateY(20px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.toast{background:var(--accent);color:#fff;border-radius:var(--radius-md);font-family:var(--font-sans);font-weight:600;font-size:var(--font-base);pointer-events:none;z-index:999;padding:10px 24px;animation:.3s ease-out toast-in;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 4px 20px #0006}.btn-primary{border-radius:var(--radius-md);background:var(--accent);color:#fff;font-family:var(--font-mono);font-size:var(--font-sm);cursor:pointer;border:none;padding:8px 18px;font-weight:600;line-height:1.3;transition:all .15s}.btn-primary:hover{filter:brightness(1.15);transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-secondary{border-radius:var(--radius-md);border:1px solid var(--border);color:var(--muted);font-family:var(--font-mono);font-size:var(--font-sm);cursor:pointer;background:0 0;padding:8px 18px;line-height:1.3;transition:all .15s}.btn-secondary:hover{border-color:var(--border-hi);color:var(--text);background:var(--empty)}.input{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);width:100%;color:var(--text);font-family:var(--font-sans);font-size:var(--font-base);outline:none;padding:10px 14px;line-height:1.5;transition:border-color .15s}.input:focus{border-color:var(--accent)}.input-sm{font-size:var(--font-sm);padding:8px 10px}textarea.input{resize:vertical;line-height:1.6}.transition-fast{transition:all .15s}.transition-normal{transition:all .2s}:root{--canvas-dot:#ffffff0f;--canvas-bg:#1a1a1a}.canvas-container{background-color:var(--canvas-bg);border:1px solid var(--border);-webkit-user-select:none;user-select:none;touch-action:none}.canvas-node{background:var(--card);border:1px solid var(--border);cursor:default;border-radius:12px;align-items:center;gap:8px;padding:6px 10px;transition:border-color .15s,box-shadow .2s,background .15s;display:flex;overflow:visible}.canvas-node-hover{border-color:var(--border-hi);background:var(--card-hi);box-shadow:0 2px 16px #0000004d}.canvas-node-filled{border-color:var(--border-hi)}.canvas-node-shape{cursor:pointer;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;transition:all .2s;display:flex;position:relative}.canvas-node-badge{color:#1e1e1e;font-size:9px;font-weight:700;font-family:var(--font-mono);border-radius:7px;justify-content:center;align-items:center;width:14px;height:14px;display:flex;position:absolute;top:-4px;right:-4px}.canvas-node-hint{opacity:.4;pointer-events:none;font-size:14px;position:absolute}.canvas-node-info{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex;overflow:hidden}.canvas-node-label{font-size:13px;font-family:var(--font-sans);white-space:nowrap;text-overflow:ellipsis;line-height:1.25;overflow:hidden}.canvas-node-meta{align-items:center;gap:6px;display:flex}.canvas-node-version{font-size:10px;font-family:var(--font-mono);color:var(--dim)}.canvas-prompt-dot{background:var(--prompt-gray);cursor:pointer;border-radius:4px;width:8px;height:8px;transition:all .15s}.canvas-prompt-dot:hover,.canvas-prompt-dot.active{background:var(--accent);box-shadow:0 0 6px var(--accent)}.canvas-tpl-dot{background:var(--yellow);width:5px;height:5px;box-shadow:0 0 4px var(--yellow);border-radius:3px;position:absolute;top:-2px;right:-2px}.canvas-add-btn{border:1px solid var(--border);color:var(--dim);cursor:pointer;font-size:14px;font-family:var(--font-mono);background:0 0;border-radius:6px;flex-shrink:0;padding:2px 8px;font-weight:600;transition:all .15s}.canvas-add-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}.canvas-port{background:var(--border-hi);border:1px solid var(--border);z-index:1;border-radius:4px;width:8px;height:8px;position:absolute;top:50%;transform:translateY(-50%)}.canvas-port-left{left:-4px}.canvas-port-right{right:-4px}@keyframes edge-draw{0%{stroke-dashoffset:200px}to{stroke-dashoffset:0}}.canvas-edge{stroke-dasharray:200;animation:.6s ease-out forwards edge-draw}.prompt-portal{background:var(--card);border:1px solid var(--border-hi);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:12px;padding:16px 18px;animation:.15s ease-out prompt-fade-in;box-shadow:0 12px 40px #0009,0 0 0 1px #6c99bb1a}@keyframes prompt-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.canvas-add-form{flex-direction:column;gap:8px;display:flex}.canvas-add-form-title{font-size:14px;font-family:var(--font-mono);color:var(--accent);letter-spacing:.05em;margin-bottom:4px;font-weight:700}.canvas-add-form-row{gap:6px;display:flex}.canvas-shape-select{background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);border-radius:6px;outline:none;padding:6px 4px;font-size:12px}.canvas-shape-select:focus{border-color:var(--accent)}.canvas-controls{background:var(--card);border:1px solid var(--border);z-index:10;border-radius:8px;align-items:center;gap:4px;padding:4px;display:flex;position:absolute;bottom:12px;right:12px;box-shadow:0 4px 16px #0000004d}.canvas-controls button{width:28px;height:28px;color:var(--muted);font-size:16px;font-family:var(--font-mono);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;transition:all .12s;display:flex}.canvas-controls button:hover{background:var(--empty);color:var(--text)}.canvas-scale{font-size:11px;font-family:var(--font-mono);color:var(--dim);text-align:center;min-width:36px}.canvas-fullscreen{background-color:var(--bg)}.canvas-toolbar{z-index:20;-webkit-backdrop-filter:blur(16px);border:1px solid var(--border);background:#1e222ad9;border-radius:12px;align-items:center;gap:10px;padding:8px 16px;display:flex;position:absolute;top:16px;left:50%;transform:translate(-50%);box-shadow:0 8px 32px #0006,0 0 0 1px #6c99bb0f}.toolbar-back-btn{border:1px solid var(--border);color:var(--muted);font-family:var(--font-mono);cursor:pointer;background:0 0;border-radius:8px;align-items:center;gap:4px;padding:6px 12px;font-size:13px;font-weight:600;transition:all .15s;display:flex}.toolbar-back-btn:hover{background:var(--accent-dim);color:var(--accent);border-color:#6c99bb45}.toolbar-divider{background:var(--border);flex-shrink:0;width:1px;height:24px}.toolbar-project-select{background:var(--card);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);cursor:pointer;border-radius:8px;outline:none;min-width:160px;padding:6px 12px;font-size:14px;font-weight:600;transition:all .15s}.toolbar-project-select:focus{border-color:var(--accent);box-shadow:0 0 0 2px #6c99bb26}.toolbar-info{font-family:var(--font-mono);color:var(--muted);align-items:center;gap:8px;font-size:13px;display:flex}.toolbar-progress{align-items:center;gap:6px;display:flex}.toolbar-progress-bar{background:var(--empty);border-radius:2px;width:48px;height:4px;overflow:hidden}.toolbar-progress-fill{border-radius:2px;height:100%;transition:width .3s}.canvas-project-header{cursor:default;background:linear-gradient(135deg,#6c99bb14,#6c99bb08);border:1.5px solid #6c99bb33;border-radius:14px;align-items:center;gap:10px;padding:12px 16px;transition:all .2s;display:flex;box-shadow:0 4px 20px #0003,0 0 0 1px #6c99bb0f}.canvas-project-header:hover{border-color:#6c99bb59;box-shadow:0 6px 24px #0000004d,0 0 20px #6c99bb0f}.canvas-header-status{border-radius:5px;flex-shrink:0;width:10px;height:10px;box-shadow:0 0 8px}.canvas-header-body{flex:1;min-width:0}.canvas-header-name{font-family:var(--font-mono);color:var(--text);letter-spacing:.05em;white-space:nowrap;text-overflow:ellipsis;font-size:16px;font-weight:700;overflow:hidden}.canvas-header-tpl{font-size:12px;font-family:var(--font-mono);color:var(--muted);align-items:center;gap:4px;margin-top:2px;display:flex}.canvas-header-progress{align-items:center;gap:6px;margin-top:4px;display:flex}.canvas-header-bar{background:var(--empty);border-radius:2px;flex:1;height:4px;overflow:hidden}.canvas-header-bar-fill{border-radius:2px;height:100%;transition:width .3s}.canvas-header-pct{font-size:12px;font-family:var(--font-mono);color:var(--muted);min-width:28px}.canvas-header-edit{border:1px solid var(--border);color:var(--muted);cursor:pointer;background:0 0;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:16px;transition:all .15s;display:flex}.canvas-header-edit:hover{background:var(--accent-dim);color:var(--accent);border-color:#6c99bb4d}.canvas-principle-node{cursor:default;background:#9e86c80f;border:1.5px solid #9e86c824;border-radius:10px;align-items:center;gap:8px;padding:8px 14px;transition:all .2s;display:flex}.canvas-principle-node:hover,.canvas-principle-node.active{background:#9e86c81a;border-color:#9e86c84d;box-shadow:0 4px 16px #9e86c814}.canvas-principle-dot{border-radius:5px;flex-shrink:0;width:10px;height:10px}.canvas-principle-title{font-size:13px;font-family:var(--font-mono);color:var(--purple);white-space:nowrap;text-overflow:ellipsis;flex:1;font-weight:600;overflow:hidden}.canvas-principle-version{font-size:12px;font-family:var(--font-mono);color:var(--muted);flex-shrink:0}.canvas-principle-view-btn,.canvas-principle-edit-btn{color:var(--purple);opacity:.5;cursor:pointer;background:0 0;border:none;flex-shrink:0;padding:0 2px;font-size:14px;transition:opacity .15s}.canvas-principle-view-btn:hover,.canvas-principle-edit-btn:hover{opacity:1}.canvas-principle-prompt-view{max-width:360px}.canvas-principle-prompt-edit{min-width:320px}