.flowx{max-width:940px;margin-inline:auto;overflow:clip;container-type:inline-size;padding:clamp(24px,3vw,40px) clamp(22px,3.5vw,48px);border:1px solid var(--border);border-radius:20px;background:linear-gradient(180deg,var(--surface) 0%,var(--bg) 70%);box-shadow:0 20px 44px -34px #0a0a0a59}.flowx__stage{position:relative;display:flex;align-items:center;justify-content:space-between;gap:clamp(48px,8vw,110px);min-height:210px}.flowx__wires{position:absolute;inset:0;pointer-events:none;overflow:visible}.flowx__wire{fill:none;stroke:color-mix(in srgb,var(--accent) 34%,var(--border));stroke-width:1.6;stroke-linecap:round;stroke-dasharray:4 6;animation:wireDash 1.2s linear infinite}@keyframes wireDash{to{stroke-dashoffset:-10}}.flowx__spark{fill:var(--accent);filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 85%,transparent))}.flowx__col{position:relative;z-index:1;display:grid;gap:18px}.flowx__node{display:grid;justify-items:center;gap:10px}.flowx__icon{display:inline-flex;align-items:center;justify-content:center;width:68px;height:68px;border-radius:18px;background:var(--bg);border:1px solid var(--border);box-shadow:0 12px 24px -14px color-mix(in srgb,var(--brand) 55%,rgba(10,10,10,.35))}.flowx__icon--small{width:46px;height:46px;border-radius:13px}.flowx__icon img{max-width:42px;max-height:34px}.flowx__icon--small img{max-width:30px;max-height:24px}.flowx__icon--rotating img,.flowx__label--rotating{animation:flowSwap .42s var(--ease-out)}@keyframes flowSwap{0%{opacity:0;transform:translateY(6px) scale(.94)}to{opacity:1;transform:none}}.flowx__label{font-size:13.5px;font-weight:600;color:var(--fg);text-align:center;max-width:130px;overflow-wrap:anywhere}.flowx__label--muted{color:var(--fg-muted);font-size:12px;max-width:130px}.flowx__hub-mark{display:inline-flex;align-items:center;justify-content:center;width:76px;height:76px;border-radius:20px;background:var(--fg);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 14%,transparent),0 14px 28px -16px #0a0a0a80;animation:hubPulse 3s var(--ease-in-out) infinite}@keyframes hubPulse{0%,to{box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 14%,transparent),0 14px 28px -16px #0a0a0a80}50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--accent) 7%,transparent),0 14px 28px -16px #0a0a0a80}}.flowx__target{display:flex;align-items:center;gap:12px}.flowx__target-label{font-size:13.5px;font-weight:600;color:var(--fg);white-space:nowrap}.flowx__packets{position:absolute;z-index:2;height:0;pointer-events:none}.flowx__packet{position:absolute;top:0;left:0;transform:translate(-50%,-50%);padding:6px 12px;border-radius:999px;background:var(--bg);border:1px solid var(--border);color:var(--fg);font-size:12.5px;font-weight:600;white-space:nowrap;box-shadow:0 8px 18px -10px #0a0a0a59;opacity:0;animation-name:packetRun;animation-timing-function:linear;animation-iteration-count:infinite}.flowx__packet:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:7px;vertical-align:middle}@keyframes packetRun{0%{left:12px;opacity:0}3%{opacity:1}29%{opacity:1}33%{left:calc(100% - 26px);opacity:0}to{left:calc(100% - 26px);opacity:0}}.flowx__vwire{display:none}.flowx__caption{margin-top:18px;font-size:13px;color:var(--fg-muted);text-align:center}@container (max-width: 680px){.flowx__target-label,.flowx__label{display:none}.flowx__stage{gap:clamp(36px,7cqw,70px)}.flowx__packet{font-size:10.5px;padding:4px 9px}.flowx__packet:before{width:6px;height:6px;margin-right:5px}}@media(max-width:720px){.flowx__stage{flex-direction:column;gap:0;min-height:0}.flowx__wires,.flowx__packets{display:none}.flowx__col{justify-items:center}.flowx__vwire{display:block;position:relative;width:3px;height:54px;margin:16px auto;border-radius:3px;background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--accent) 55%,transparent) 0 6px,transparent 6px 12px);background-size:100% 12px;animation:wireDashY .9s linear infinite}@keyframes wireDashY{to{background-position-y:12px}}.flowx__vwire i{position:absolute;left:50%;top:0;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px color-mix(in srgb,var(--accent) 85%,transparent);animation:sparkDownY 1.8s linear infinite}.flowx__vwire i:nth-child(2){animation-delay:.9s}@keyframes sparkDownY{0%{top:-4px;opacity:0}12%{opacity:1}88%{opacity:1}to{top:calc(100% - 4px);opacity:0}}.flowx__col--targets{display:grid;grid-template-columns:repeat(2,minmax(0,auto));gap:16px 24px;justify-content:center}.flowx__target-label{display:none}}@media(prefers-reduced-motion:reduce){.flowx__wire,.flowx__hub-mark,.flowx__packet,.flowx__vwire,.flowx__vwire i{animation:none!important}.flowx__spark{display:none}.flowx__packet{opacity:1;left:40%}}