.flowx-container{--flowx-bg: hsl(0 0% 98%);--flowx-bg-secondary: hsl(0 0% 96%);--flowx-border: hsl(0 0% 85%);--flowx-border-hover: hsl(0 0% 70%);--flowx-text: hsl(0 0% 10%);--flowx-text-muted: hsl(0 0% 45%);--flowx-node-bg: hsl(0 0% 100%);--flowx-node-border: hsl(0 0% 85%);--flowx-node-shadow: 0 4px 12px hsla(0, 0%, 0%, .08);--flowx-node-shadow-hover: 0 8px 24px hsla(0, 0%, 0%, .12);--flowx-node-selected: hsl(217 91% 60%);--flowx-node-marked: hsl(40 100% 45%);--flowx-connector-bg: hsl(0 0% 90%);--flowx-connector-hover: hsl(217 91% 60%);--flowx-connector-active: hsl(217 91% 50%);--flowx-edge-color: hsl(0 0% 20%);--flowx-edge-hover: hsl(217 91% 60%);--flowx-grid-color: hsl(0 0% 92%);--flowx-selection-bg: hsla(217, 91%, 60%, .1);--flowx-selection-border: hsl(217 91% 60%);--flowx-error-bg: hsl(0 84% 95%);--flowx-error-border: hsl(0 84% 60%);--flowx-error-text: hsl(0 84% 40%);--flowx-sidebar-bg: hsl(0 0% 100%);--flowx-sidebar-item-hover: hsl(0 0% 96%);--flowx-tooltip-bg: hsl(0 0% 15%);--flowx-tooltip-text: hsl(0 0% 98%);--flowx-radius: 8px;--flowx-radius-sm: 4px;--flowx-transition: .15s ease}.flowx-container.flowx-dark{--flowx-bg: hsl(0 0% 9%);--flowx-bg-secondary: hsl(0 0% 12%);--flowx-border: hsl(0 0% 20%);--flowx-border-hover: hsl(0 0% 35%);--flowx-text: hsl(0 0% 95%);--flowx-text-muted: hsl(0 0% 60%);--flowx-node-bg: hsl(0 0% 14%);--flowx-node-border: hsl(0 0% 25%);--flowx-node-shadow: 0 4px 12px hsla(0, 0%, 0%, .3);--flowx-node-shadow-hover: 0 8px 24px hsla(0, 0%, 0%, .4);--flowx-node-selected: hsl(217 91% 60%);--flowx-node-marked: hsl(42 95% 55%);--flowx-connector-bg: hsl(0 0% 25%);--flowx-connector-hover: hsl(217 91% 60%);--flowx-connector-active: hsl(217 91% 50%);--flowx-edge-color: hsl(0 0% 75%);--flowx-edge-hover: hsl(217 91% 60%);--flowx-grid-color: hsl(0 0% 15%);--flowx-error-bg: hsl(0 60% 15%);--flowx-error-border: hsl(0 84% 50%);--flowx-error-text: hsl(0 84% 70%);--flowx-sidebar-bg: hsl(0 0% 12%);--flowx-sidebar-item-hover: hsl(0 0% 18%)}.flowx-container{position:relative;width:100%;height:100%;overflow:hidden;background-color:var(--flowx-bg);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;color:var(--flowx-text);-webkit-user-select:none;user-select:none;touch-action:none}.flowx-canvas{position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:0 0}.flowx-grid{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-image:linear-gradient(var(--flowx-grid-color) 1px,transparent 1px),linear-gradient(90deg,var(--flowx-grid-color) 1px,transparent 1px);background-size:20px 20px}.flowx-svg-layer{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible}.flowx-edge{fill:none;stroke:var(--flowx-edge-color);stroke-width:2;pointer-events:stroke;stroke-linecap:round;cursor:pointer;transition:stroke var(--flowx-transition),stroke-width var(--flowx-transition)}.flowx-edge-hitarea{fill:none;stroke:transparent;stroke-width:20;pointer-events:stroke;cursor:pointer}.flowx-edge:hover,.flowx-edge-hitarea:hover+.flowx-edge{stroke:var(--flowx-edge-hover);stroke-width:2.5}.flowx-edge.flowx-edge-selected{stroke:var(--flowx-node-selected);stroke-width:3}.flowx-edge-temp{fill:none;stroke:var(--flowx-node-selected);stroke-width:2;stroke-dasharray:8 4;pointer-events:none;opacity:.7}.flowx-edge-label{pointer-events:auto;cursor:pointer}.flowx-edge-label-bg{fill:var(--flowx-node-bg);rx:4;stroke:transparent;stroke-width:2;transition:stroke var(--flowx-transition)}.flowx-edge-label.flowx-edge-selected .flowx-edge-label-bg{stroke:var(--flowx-node-selected)}.flowx-edge-label-text{fill:var(--flowx-text-muted);font-size:11px;text-anchor:middle;dominant-baseline:central}.flowx-edge-delete{cursor:pointer;opacity:0;transition:opacity var(--flowx-transition),transform var(--flowx-transition)}.flowx-edge-label:hover .flowx-edge-delete,.flowx-edge-label.flowx-edge-selected .flowx-edge-delete{opacity:1}.flowx-edge-delete-bg{fill:var(--flowx-error-bg);stroke:var(--flowx-error-border);stroke-width:1.5;transition:fill var(--flowx-transition)}.flowx-edge-delete:hover .flowx-edge-delete-bg{fill:var(--flowx-error-border)}.flowx-edge-delete-icon{stroke:var(--flowx-error-text)}.flowx-nodes-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.flowx-node{position:absolute;background:var(--flowx-node-bg);border:2px solid var(--flowx-node-border);border-radius:var(--flowx-radius);box-shadow:var(--flowx-node-shadow);min-width:120px;cursor:grab;pointer-events:auto;transition:box-shadow var(--flowx-transition),border-color var(--flowx-transition)}.flowx-node:hover{box-shadow:var(--flowx-node-shadow-hover)}.flowx-node.flowx-node-selected{border-color:var(--flowx-node-selected);box-shadow:var(--flowx-node-shadow-hover),0 0 0 3px #3c83f633}.flowx-node.flowx-node-marked{border-color:var(--flowx-node-marked);box-shadow:var(--flowx-node-shadow-hover),0 0 0 4px color-mix(in oklab,var(--flowx-node-marked) 35%,transparent)}.flowx-node.flowx-node-marked.flowx-node-selected{box-shadow:var(--flowx-node-shadow-hover),0 0 0 3px #3c83f633,0 0 0 7px color-mix(in oklab,var(--flowx-node-marked) 30%,transparent)}.flowx-node.flowx-node-dragging{cursor:grabbing;opacity:.9;z-index:1000}.flowx-node.flowx-node-locked{cursor:not-allowed;opacity:.7}.flowx-connectors-top,.flowx-connectors-bottom{position:absolute;left:0;right:0;display:flex;justify-content:center;gap:12px;pointer-events:none}.flowx-connectors-top{top:-8px}.flowx-connectors-bottom{bottom:-8px}.flowx-connector{width:16px;height:16px;background:var(--flowx-connector-bg);border:2px solid var(--flowx-node-border);border-radius:50%;cursor:crosshair;pointer-events:auto;transition:background var(--flowx-transition),border-color var(--flowx-transition),transform var(--flowx-transition)}.flowx-connector:hover{background:var(--flowx-connector-hover);border-color:var(--flowx-connector-hover);transform:scale(1.2)}.flowx-connector.flowx-connector-active{background:var(--flowx-connector-active);border-color:var(--flowx-connector-active);transform:scale(1.3)}.flowx-connector.flowx-connector-valid{background:#21c45d;border-color:#21c45d}.flowx-connector.flowx-connector-invalid{background:#ef4343;border-color:#ef4343}.flowx-tooltip{position:fixed;background:var(--flowx-tooltip-bg);color:var(--flowx-tooltip-text);padding:6px 10px;border-radius:var(--flowx-radius-sm);font-size:12px;white-space:nowrap;pointer-events:none;z-index:10000;opacity:0;transform:translateY(4px);transition:opacity var(--flowx-transition),transform var(--flowx-transition)}.flowx-tooltip.flowx-tooltip-visible{opacity:1;transform:translateY(0)}.flowx-selection-box{position:absolute;background:var(--flowx-selection-bg);border:1px dashed var(--flowx-selection-border);pointer-events:none;z-index:999}.flowx-error{position:absolute;background:var(--flowx-error-bg);border:1px solid var(--flowx-error-border);color:var(--flowx-error-text);padding:6px 10px;border-radius:var(--flowx-radius-sm);font-size:12px;white-space:nowrap;z-index:1001;animation:flowx-fade-in .2s ease}@keyframes flowx-fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.flowx-sidebar{background:var(--flowx-sidebar-bg);border-right:1px solid var(--flowx-border);height:100%;overflow-y:auto;padding:12px}.flowx-sidebar-title{font-weight:600;font-size:13px;color:var(--flowx-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;padding:0 4px}.flowx-sidebar-item{background:var(--flowx-node-bg);border:1px solid var(--flowx-border);border-radius:var(--flowx-radius);padding:10px 12px;margin-bottom:8px;cursor:grab;transition:background var(--flowx-transition),border-color var(--flowx-transition),box-shadow var(--flowx-transition)}.flowx-sidebar-item:hover{background:var(--flowx-sidebar-item-hover);border-color:var(--flowx-border-hover);box-shadow:var(--flowx-node-shadow)}.flowx-sidebar-item:active{cursor:grabbing}.flowx-sidebar-item.flowx-dragging{opacity:.5}.flowx-drag-ghost{position:fixed;background:var(--flowx-node-bg);border:2px solid var(--flowx-node-selected);border-radius:var(--flowx-radius);box-shadow:var(--flowx-node-shadow-hover);padding:10px 12px;pointer-events:none;z-index:10001;opacity:.9;transform:translate(-50%,-50%)}.flowx-container:focus{outline:none}.flowx-container:focus-visible{outline:2px solid var(--flowx-node-selected);outline-offset:-2px}