.flow-visual{width:100%;color:var(--color-foreground);font-size:11px;line-height:1.5;container-type:inline-size}.flow-canvas{background-image:radial-gradient(var(--color-border-subtle) .65px, transparent .8px);background-size:12px 12px;padding:30px 0;position:relative}.flow-grid{grid-template-columns:1fr 1.45fr 1fr;align-items:center;gap:38px;display:grid;position:relative}.flow-node{background:var(--color-card);min-width:0;color:var(--color-card-foreground);border:1px solid var(--color-border);box-shadow:var(--shadow-small);border-radius:15px;transition:border-color .42s cubic-bezier(0,0,.2,1);position:relative}.flow-agent.active{border-color:var(--color-border-strong)}.flow-body-clip{border-radius:15px 15px 0 0;overflow:hidden}.flow-node-body{padding:16px 14px}.flow-heading{letter-spacing:-.025em;align-items:center;gap:7px;font-size:12px;font-weight:500;display:flex}.flow-mark{border:1px solid var(--color-border-strong);border-radius:6px;flex-shrink:0;place-items:center;width:25px;height:25px;display:grid}.flow-mark img{object-fit:contain;width:17px;height:17px}.flow-description{color:var(--color-muted-foreground);margin:9px 0;font-size:11px}.flow-label{color:var(--color-muted-foreground);margin:13px 0 7px;font-size:11px}.flow-footer{background:var(--color-subtle);border-top:1px solid var(--color-border);min-height:37px;color:var(--color-muted-foreground);white-space:nowrap;border-radius:0 0 15px 15px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px;padding:10px 12px;font-size:11px;line-height:16px;transition:background-color .42s cubic-bezier(0,0,.2,1);display:flex}.flow-footer>span{line-height:16px}.flow-footer>span:first-child{align-items:center;gap:5px;display:inline-flex}.flow-footer>span:last-child{font-variant-numeric:tabular-nums;margin-left:auto}.flow-footer svg{stroke-width:1.5px;flex-shrink:0;width:14px;height:14px;display:block}.flow-footer[data-status=Running]{background:var(--accent);border-top-color:var(--color-border)}.flow-footer[data-status=Completed]{background:var(--illustration-success-fill);border-top-color:var(--color-border)}.flow-status-slot{min-width:78px;min-height:16px;position:relative}.flow-status{white-space:nowrap;align-items:center;gap:5px;transition:color .25s;display:inline-flex}.flow-status[data-status=Running]{color:var(--muted-foreground)}.flow-status[data-status=Completed]{color:var(--illustration-success-ink)}.flow-visual[data-running=false] .flow-status-spinner{animation-play-state:paused}.flow-port{border:1px solid var(--color-border);background:var(--color-background);border-radius:50%;width:7px;height:7px;position:absolute;top:50%;transform:translateY(-50%)}.flow-port-in{left:-5px}.flow-port-out{right:-5px}.flow-input .flow-port-in,.flow-output .flow-port-out{display:none}.flow-connections{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.flow-connections path{fill:none;stroke:var(--color-border);stroke-width:1.2px}.flow-connections .flow-connection-progress{stroke:var(--color-subtle-foreground)}.flow-input,.flow-output{opacity:.95}@container (width>=480px){.flow-visual{width:calc(100% + 2rem);margin-inline:-1rem}.flow-canvas{padding-inline:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 2rem calc(100% - 2rem),#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#000 2rem calc(100% - 2rem),#0000 100%)}.flow-grid{grid-template-columns:clamp(200px,29cqw,240px) clamp(250px,36cqw,280px) clamp(200px,29cqw,240px);justify-content:space-between;gap:0;width:min(100% + 32px,860px);left:50%;transform:translate(-50%)}.flow-node-body{padding:20px 16px}.flow-heading{font-size:14px}.flow-description,.flow-label,.flow-footer{font-size:12px}.flow-mark{width:29px;height:29px}.flow-mark img{width:20px;height:20px}.flow-label{margin-top:16px}.flow-footer{min-height:42px;padding:12px 14px}}@media (width>=640px){.flow-visual{width:calc(100% + 3rem);margin-inline:-1.5rem}}@container (width<=479px){.flow-grid{grid-template-columns:1fr;gap:28px;max-width:290px;margin:auto}.flow-canvas{padding:18px 8px}.flow-node-body{padding:16px}.flow-heading{font-size:14px}.flow-description,.flow-label{font-size:12px}.flow-footer{font-size:11px}.flow-port{top:-5px;left:50%;transform:translate(-50%)}.flow-port-out{top:auto;bottom:-5px}.wf-examples .flow-grid{overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;grid-template-columns:none;grid-auto-columns:84%;grid-auto-flow:column;align-items:start;gap:12px;max-width:none;margin:0 -16px;padding:4px 16px 10px;scroll-padding-inline:16px;overflow-x:auto}.wf-examples .flow-grid::-webkit-scrollbar{display:none}.wf-examples .flow-grid>*{scroll-snap-align:start}.wf-examples .flow-connections,.wf-examples .flow-port{display:none}}@media (prefers-reduced-motion:reduce){.flow-node,.flow-footer,.flow-status{transition:none}.flow-status-spinner{animation:none}}