@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=DM+Sans:wght@400;500;600&display=swap";.flow-canvas-wrapper{position:relative;width:100%;height:100%;overflow:hidden;background-color:var(--bg-primary);background-image:radial-gradient(circle,#1e293b 1px,transparent 1px);background-size:24px 24px;-webkit-user-select:none;user-select:none}.flow-canvas{width:100%;height:100%;display:block;shape-rendering:geometricPrecision;text-rendering:geometricPrecision}.node{cursor:pointer;transition:filter .2s ease}.node:hover rect,.node:hover polygon,.node:hover ellipse{filter:drop-shadow(0 0 10px rgba(96,165,250,.5))}.node--active rect,.node--active polygon,.node--active ellipse{filter:drop-shadow(0 0 12px rgba(96,165,250,.55))}.node-badge{animation:badge-pop .32s cubic-bezier(.34,1.56,.64,1);transform-box:fill-box;transform-origin:center}.node-badge rect{filter:drop-shadow(0 0 6px rgba(239,68,68,.55))}@keyframes badge-pop{0%{opacity:0;transform:scale(.4)}60%{transform:scale(1.18)}to{opacity:1;transform:scale(1)}}.canvas-overlay{position:absolute;display:flex;gap:8px;z-index:10}.canvas-overlay--top-left{top:16px;left:16px;flex-direction:column}.canvas-overlay--bottom-right{bottom:16px;right:16px}.canvas-overlay--bottom-left{bottom:16px;left:16px}.stat-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background:#0f172ad9;border:1px solid var(--border);border-radius:6px;font-family:var(--font-mono);font-size:11px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.stat-pill__label{color:var(--text-muted);letter-spacing:.08em}.stat-pill__value{color:var(--accent-blue);font-weight:500;min-width:20px;text-align:right}.stat-pill--follow .stat-pill__label,.stat-pill--follow .stat-pill__value{color:var(--accent-amber)}.btn-icon{width:32px;height:32px;background:#0f172ad9;border:1px solid var(--border);border-radius:6px;color:var(--text-muted);font-family:var(--font-mono);font-size:16px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .15s}.btn-icon:hover:not(:disabled){border-color:var(--accent-blue);color:var(--accent-blue);background:#60a5fa14}.btn-icon:disabled{opacity:.4;cursor:not-allowed}.hint-text{padding:6px 12px;background:#0f172ab3;border:1px solid var(--border);border-radius:6px;font-family:var(--font-mono);font-size:11px;color:var(--text-muted);letter-spacing:.03em;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.animation-controls{padding:14px;display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--border)}.control-section{display:flex;flex-direction:column;gap:8px}.section-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--text-muted)}.sub-label{font-family:var(--font-mono);font-size:10px;color:#475569;letter-spacing:.06em;margin-top:2px}.control-row{display:flex;gap:6px;flex-wrap:wrap}.mode-hint{margin:4px 0 0;font-family:var(--font-mono);font-size:11px;color:var(--text-muted);line-height:1.5}.auto-interval{display:flex;flex-direction:column;gap:6px;margin-top:4px}.interval-label{display:flex;flex-direction:column;gap:6px;font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}.interval-label input[type=range]{width:100%;accent-color:var(--accent-blue);cursor:pointer}.btn-kind{display:inline-flex;align-items:center;gap:6px}.kind-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.error-loop-control{display:flex;flex-direction:column;gap:6px;margin-top:6px}.record-panel{display:flex;flex-direction:column;gap:10px;padding:14px;border-top:1px solid var(--border)}.record-row{display:flex;flex-direction:column;gap:6px}.record-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:#475569}.record-btn{margin-top:2px}.record-hint{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);line-height:1.45}.record-hint code{background:#60a5fa1a;color:var(--accent-blue);padding:1px 4px;border-radius:3px}.record-progress{display:flex;flex-direction:column;gap:8px}.record-status{font-family:var(--font-mono);font-size:12px;color:var(--accent-amber)}.record-status--done{color:var(--accent-green)}.record-status--error{color:var(--accent-red)}.record-meta{font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}.progress-bar{width:100%;height:6px;background:var(--bg-panel);border:1px solid var(--border);border-radius:3px;overflow:hidden}.progress-bar__fill{height:100%;background:var(--accent-amber);transition:width .15s linear}.mermaid-editor-panel{display:flex;flex-direction:column;flex:1;min-height:0}.editor-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border)}.editor-title{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--text-muted)}.example-select{background:transparent;border:1px solid var(--border);color:var(--text-muted);font-family:var(--font-mono);font-size:11px;padding:4px 8px;border-radius:4px;cursor:pointer;transition:all .15s}.example-select:hover{border-color:var(--accent-blue);color:var(--accent-blue)}.example-select option{background:var(--bg-panel);color:var(--text-primary)}.mermaid-editor{flex:1;width:100%;font-family:var(--font-mono);font-size:13px;line-height:1.6;background:var(--bg-panel);color:#cbd5e1;border:none;caret-color:var(--accent-blue);resize:none;outline:none;padding:14px;min-height:200px;-moz-tab-size:2;tab-size:2}.mermaid-editor::placeholder{color:#475569}.editor-footer{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-top:1px solid var(--border)}.shortcut-hint{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);letter-spacing:.05em}.btn-control--primary{border-color:var(--accent-blue);color:var(--accent-blue)}.btn-control--primary:hover{background:var(--accent-blue);color:var(--bg-primary)}.parse-error{margin:0 14px 14px;padding:10px 12px;border:1px solid var(--accent-red);border-left-width:3px;background:#ef444414;color:var(--accent-red);font-family:var(--font-mono);font-size:12px;line-height:1.5;border-radius:4px}.flow-legend{padding:14px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px}.legend-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.legend-item{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11px;color:#94a3b8}.legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;box-shadow:0 0 8px currentColor}.legend-pipe{width:16px;height:5px;border-radius:3px;flex-shrink:0;opacity:.8}.legend-section-spacer{margin-top:6px}.legend-label{letter-spacing:.02em}.app{display:flex;flex-direction:column;height:100vh;width:100vw;background:var(--bg-primary);color:var(--text-primary)}.app-header{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:1px solid var(--border);background:var(--bg-secondary);flex-shrink:0}.brand{display:flex;align-items:baseline;gap:10px}.brand-mark{color:var(--accent-blue);font-size:18px;text-shadow:0 0 12px rgba(96,165,250,.6)}.brand-name{font-family:var(--font-ui);font-size:16px;font-weight:600;color:var(--text-primary);letter-spacing:.01em}.brand-suffix{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);letter-spacing:.04em}.header-meta{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11px;color:var(--text-muted);letter-spacing:.04em}.meta-divider{color:var(--border-strong)}.app-body{display:flex;flex:1;min-height:0}.sidebar{width:36%;min-width:360px;max-width:520px;display:flex;flex-direction:column;background:var(--bg-secondary);border-right:1px solid var(--border);overflow-y:auto}.canvas-container{flex:1;position:relative;min-width:0;background:var(--bg-primary)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:8px;font-family:var(--font-mono)}.empty-state__title{font-size:14px;color:var(--text-muted);letter-spacing:.06em}.empty-state__hint{font-size:12px;color:#475569;max-width:400px;text-align:center;line-height:1.5;padding:0 24px}.btn-control{background:transparent;border:1px solid var(--border-strong);color:var(--text-muted);font-family:var(--font-mono);font-size:12px;padding:6px 14px;cursor:pointer;border-radius:4px;transition:all .15s;letter-spacing:.02em}.btn-control:hover{border-color:var(--accent-blue);color:var(--accent-blue);background:#60a5fa0f}.btn-control.active{border-color:var(--accent-blue);color:var(--bg-primary);background:var(--accent-blue)}.btn-control.active:hover{background:var(--accent-blue);color:var(--bg-primary)}@media (max-width: 900px){.app-body{flex-direction:column}.sidebar{width:100%;max-width:none;height:50%;border-right:none;border-bottom:1px solid var(--border)}}:root{--bg-primary: #0a0e1a;--bg-secondary: #111827;--bg-panel: #0f172a;--border: #1e293b;--border-strong: #334155;--text-primary: #f1f5f9;--text-muted: #64748b;--accent-blue: #60a5fa;--accent-green: #22c55e;--accent-red: #ef4444;--accent-amber: #f59e0b;--font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;--font-ui: "DM Sans", "Inter", sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%;width:100%}body{font-family:var(--font-ui);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;overflow:hidden}button{font-family:var(--font-mono)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-panel)}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent-blue)}