.df[data-flow-demo]{--df-ink: #192536;--df-muted: #505b6e;--df-line: #dce2eb;position:relative;width:100%;padding-block:clamp(36px,4.6vw,68px);border-block:1px solid var(--df-line);scroll-margin-block-start:86px;color:var(--df-ink);background:color-mix(in srgb,var(--df-tint) 32%,#f7f8fb);line-height:1.5}.df .df-anchor{position:absolute;inset-block-start:0;scroll-margin-block-start:86px}.df *,.df *::before,.df *::after{box-sizing:border-box}.df [hidden]{display:none!important}.df :focus-visible{outline:2px solid var(--df-color);outline-offset:3px}.df h2,.df h3,.df p,.df ol{margin:0}.df .icon{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}.df .df-layout{display:grid;grid-template-columns:minmax(0,.73fr) minmax(0,1.27fr);align-items:center;gap:clamp(20px,3.5vw,58px);width:min(1260px,calc(100% - 2 * clamp(16px,3.7vw,52px)));margin-inline:auto}.df .df-kicker{display:flex;align-items:center;gap:7px;color:var(--df-color);font-size:.84rem;font-weight:760}.df .df-copy h2{margin-block:10px 12px;color:var(--df-ink);font-size:clamp(2rem,3.1vw,3.45rem);font-weight:820;line-height:1.09;letter-spacing:-.029em}.df .df-copy h2 em{display:block;color:var(--df-color);font-style:normal}.df .df-intro{max-width:44ch;color:var(--df-muted);font-size:clamp(.97rem,1.3vw,1.11rem)}.df .df-tabs{display:grid;margin-block-start:clamp(16px,2.5vw,31px)}.df button{color:inherit;font:inherit;cursor:pointer}.df .df-tabs button{display:grid;grid-template-columns:27px 1fr 8px;align-items:center;gap:6px;min-height:49px;padding:6px 9px;border:0;border-block-start:1px solid var(--df-line);border-inline-start:2px solid transparent;border-radius:0;background:transparent;text-align:start}.df .df-tabs button:last-child{border-block-end:1px solid var(--df-line)}.df .df-tabs button>bdi{color:var(--df-muted);font:650 .7rem ui-monospace,monospace}.df .df-tabs button>strong{font-size:.93rem}.df .df-tabs button>span{width:6px;height:6px;border-radius:50%;background:#aeb8c9}.df .df-tabs button[aria-selected=true]{border-inline-start-color:var(--df-color);color:var(--df-color);background:var(--df-tint)}.df .df-tabs button[aria-selected=true]>span{background:var(--df-color)}.df .df-tabs button:hover strong{color:var(--df-color)}.df .df-board{min-width:0;overflow:clip;border:1px solid var(--df-line);border-radius:17px;background:white;box-shadow:0 14px 36px #1925380e}.df .df-toolbar{display:flex;justify-content:space-between;align-items:center;gap:6px 9px;flex-wrap:wrap;min-height:48px;padding:6px 12px;border-block-end:1px solid var(--df-line)}.df .df-toolbar>span,.df .df-toolbar button{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:720}.df .df-toolbar>span i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--df-color)}.df .df-toolbar small{color:var(--df-muted);font-size:.65rem;font-weight:550}.df .df-toolbar button{min-height:33px;padding:4px 8px;border:1px solid var(--df-line);border-radius:6px;background:white}.df .df-toolbar button:hover{color:var(--df-color);border-color:var(--df-color)}.df .df-toolbar button .icon{width:13px;height:13px;color:var(--df-color)}.df .df-canvas{position:relative;isolation:isolate;height:clamp(283px,25vw,365px);background:radial-gradient(ellipse at center,var(--df-tint),transparent 72%),radial-gradient(circle,#d9e1ed 1px,transparent 1.15px) 0 0 / 16px 16px,#fbfcfe}.df .df-lanes{position:absolute;inset:0;display:grid;grid-template-rows:repeat(2,1fr);pointer-events:none}.df .df-lanes span{padding:7px 10px;color:var(--df-muted);font-size:.65rem;font-weight:650}.df .df-lanes span+span{border-block-start:1px dashed #b4bfd1;background:#fff7}.df .df-wires{position:absolute;inset:0;width:100%;height:100%}.df :is(.df-line,.df-trace,.df-pulse){fill:none;vector-effect:non-scaling-stroke}.df .df-line{stroke:#9facc1;stroke-width:1.2;stroke-dasharray:4 5}.df .df-trace{opacity:0;stroke:var(--df-color);stroke-width:1.75}.df .df-pulse{opacity:0;stroke:var(--df-color);stroke-width:5;stroke-linecap:round;stroke-dasharray:.10 .90}.df .df-arrow-muted{fill:#9facc1}.df .df-arrow-active{fill:var(--df-color)}.df [data-df-active] .df-trace{opacity:.9}.df[data-df-playing] [data-df-active] .df-trace{animation:df-draw .57s ease-out var(--df-delay) both}.df[data-df-playing] [data-df-active] .df-pulse{animation:df-pulse .62s ease-out var(--df-delay) both}@keyframes df-draw{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}@keyframes df-pulse{0%{opacity:0;stroke-dashoffset:0}18%,75%{opacity:1}100%{opacity:0;stroke-dashoffset:-1}}.df .df-node-place{position:absolute;top:var(--df-y);left:var(--df-x);z-index:1;width:14.8%;transform:translate(-50%,-50%)}.df .df-node{display:flex;align-items:center;gap:4px;min-height:46px;padding:5px;border:1px solid #cdd5e1;border-radius:8px;background:#fff;box-shadow:0 4px 9px #1925380b}.df .df-node>span,.df .df-result-copy>span,.df .df-mini-path li>span{display:grid;place-items:center;flex:none;width:23px;height:23px;border-radius:6px;color:var(--df-color);background:var(--df-tint)}.df .df-node .icon{width:13px;height:13px}.df .df-node bdi,.df .df-node small{display:block;overflow-wrap:anywhere}.df .df-node bdi{color:var(--df-ink);font-size:clamp(.66rem,.88vw,.79rem);font-weight:760;line-height:1.11}.df .df-node small{margin-block-start:3px;color:var(--df-muted);font-size:.62rem;line-height:1.08}.df .df-node[data-node-kind=source]{border-style:dashed}.df .df-node[data-node-kind=gate]{border-color:#d4b887}.df .df-node[data-node-kind=gate]>span{color:#7a4a17;background:#fbefd9}.df .df-node[data-node-kind=hub]>span{color:white;background:var(--df-color)}.df .df-node[data-df-active]{border-style:solid;border-color:var(--df-color);box-shadow:0 4px 11px color-mix(in srgb,var(--df-color) 15%,transparent)}.df[data-df-playing] .df-node[data-df-active]{animation:df-step .44s ease-out var(--df-delay) both}@keyframes df-step{from{transform:translateY(3px);opacity:.65}to{transform:none;opacity:1}}.df .df-outcomes{border-block-start:1px solid var(--df-line)}.df .df-result-copy{display:flex;align-items:flex-start;gap:9px;min-height:79px;padding:12px 14px}.df .df-result-copy>span{width:31px;height:31px}.df .df-result h3{color:var(--df-ink);font-size:.95rem;font-weight:790}.df .df-result-copy p{color:var(--df-muted);font-size:.81rem}.df .df-mobile{display:none}.df .df-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(max-width:900px){.df .df-layout{grid-template-columns:minmax(0,1fr);gap:17px}.df .df-tabs{margin-block-start:15px}}@media(max-width:650px){.df .df-canvas{display:none}.df .df-mobile{display:block;padding:11px;border-block-end:1px solid var(--df-line);background:var(--df-tint)}.df .df-mini-path{display:grid;gap:6px;padding:0;list-style:none}.df .df-mini-path li{position:relative;display:flex;align-items:center;gap:7px;padding:5px 7px;border:1px solid var(--df-line);border-radius:6px;background:white;font-size:.81rem;font-weight:690}.df .df-mini-path li+li::before{position:absolute;inset-block-start:-7px;inset-inline-start:19px;height:7px;border-inline-start:1px solid var(--df-color);content:""}.df .df-mini-title{margin-block:8px 3px;color:var(--df-muted);font-size:.7rem;font-weight:680}.df .df-mini-path+.df-mini-path{margin-block-start:6px}.df .df-outcomes{border-block-start:0}}@media(prefers-reduced-motion:reduce){.df *,.df *::before{animation:none!important}}