.flow-demo{background:radial-gradient(circle at 1px 1px, var(--color-border-strong) 1px, transparent 0) 0 0 / 18px 18px;min-height:340px;padding:24px 16px;position:relative}.flow-demo-wires{fill:none;width:100%;height:100%;stroke:var(--color-border-strong);stroke-width:2px;position:absolute;inset:0}.flow-demo-signal{stroke:var(--color-accent);stroke-width:2.5px;stroke-dasharray:12 32;animation:3s linear infinite flow-signal}.flow-demo-input{border:1px solid var(--color-border-strong);background:var(--color-bg);border-radius:99px;width:fit-content;margin:0 auto 42px;padding:9px 14px;font-size:12px;position:relative}.flow-demo-middle,.flow-demo-tools{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;display:grid;position:relative}.flow-demo-tools{margin-top:52px}.flow-demo-node{text-align:center;border:1px solid var(--color-border-strong);background:var(--color-bg);border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-height:75px;padding:10px 6px;display:flex;box-shadow:0 8px 20px -18px #0006}.flow-demo-node>span{color:var(--color-accent);font-size:22px;line-height:1}.flow-demo-node strong{font-size:12px;font-weight:600;line-height:1.3}.flow-demo-node small{color:var(--color-muted);font-size:10px;line-height:1.4}.flow-demo-agent{border-color:var(--color-accent);background:var(--color-accent-soft);animation:3s ease-in-out infinite flow-agent}.flow-demo[data-running=false] *,.flow-demo[data-running=false] .flow-demo-signal{animation-play-state:paused}@keyframes flow-signal{to{stroke-dashoffset:-88px}}@keyframes flow-agent{50%{box-shadow:0 0 0 5px color-mix(in srgb, var(--color-accent) 10%, transparent)}}@media (min-width:640px){.flow-demo{padding-inline:24px}.flow-demo-node strong{font-size:13px}}