.animation-wrapper[data-animation=data-flow] .df{cursor:default;margin-inline:auto;max-width:30rem;pointer-events:none;-webkit-user-select:none;user-select:none;width:100%}.animation-wrapper[data-animation=data-flow] .df-frame{background:var(--cc-blue-900);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden}.animation-wrapper[data-animation=data-flow] .df-header{align-items:center;border-bottom:1px solid hsla(0,0%,100%,.1);color:var(--on-dark);display:flex;font:700 .76rem/1 var(--font);gap:var(--space-16);justify-content:space-between;padding:var(--space-16) var(--space-20)}.animation-wrapper[data-animation=data-flow] .df-status{align-items:center;display:inline-flex;flex:none;gap:var(--space-8);white-space:nowrap}.animation-wrapper[data-animation=data-flow] .df-status__dot{background:var(--cc-orange);border-radius:50%;flex:none;height:.55rem;position:relative;width:.55rem}.animation-wrapper[data-animation=data-flow] .df-status__dot:after{border:1px solid var(--cc-orange);border-radius:50%;content:"";inset:-.3em;opacity:0;position:absolute}.animation-wrapper[data-animation=data-flow] .df-body{padding:var(--space-24)}.animation-wrapper[data-animation=data-flow] .df-canvas{aspect-ratio:320/200;position:relative;width:100%}.animation-wrapper[data-animation=data-flow] .df-graph{height:100%;inset:0;overflow:visible;position:absolute;width:100%}.animation-wrapper[data-animation=data-flow] .df-link{fill:none;stroke:var(--light-blue);stroke-dasharray:100;stroke-dashoffset:100;stroke-linecap:round;stroke-width:2}.animation-wrapper[data-animation=data-flow] .df-node{align-items:center;color:var(--on-dark);display:inline-flex;flex-direction:column;font:700 .7rem/1 var(--font);gap:var(--space-6);opacity:0;position:absolute;text-align:center;transform:translate(-50%,-50%) scale(.4);white-space:nowrap}.animation-wrapper[data-animation=data-flow] .df-node__dot{background:var(--light-blue);border-radius:50%;height:.85rem;width:.85rem}.animation-wrapper[data-animation=data-flow] .df-node--source{left:50%;opacity:1;top:15%;transform:translate(-50%,-50%) scale(1)}.animation-wrapper[data-animation=data-flow] .df-node--source .df-node__dot{background:var(--cc-orange)}.animation-wrapper[data-animation=data-flow] .df-node--a{left:21.875%;top:86%}.animation-wrapper[data-animation=data-flow] .df-node--b{left:50%;top:87%}.animation-wrapper[data-animation=data-flow] .df-node--c{left:78.125%;top:87%}@keyframes df-pulse-ring{0%{opacity:.55;transform:scale(.6)}to{opacity:0;transform:scale(1.8)}}@keyframes df-draw{to{stroke-dashoffset:0}}@keyframes df-node-in{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}60%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes df-dot-connect{to{background:var(--green)}}@media (prefers-reduced-motion:no-preference){.animation-wrapper[data-animation=data-flow].df-is-live .df-status__dot:after{animation:df-pulse-ring 1.4s ease-out infinite}.animation-wrapper[data-animation=data-flow].df-is-live .df-link--a{animation:df-draw .7s ease-out .2s forwards}.animation-wrapper[data-animation=data-flow].df-is-live .df-link--b{animation:df-draw .7s ease-out .33s forwards}.animation-wrapper[data-animation=data-flow].df-is-live .df-link--c{animation:df-draw .7s ease-out .46s forwards}.animation-wrapper[data-animation=data-flow].df-is-live .df-node--a{animation:df-node-in .35s ease-out .9s forwards}.animation-wrapper[data-animation=data-flow].df-is-live .df-node--b{animation:df-node-in .35s ease-out 1.03s forwards}.animation-wrapper[data-animation=data-flow].df-is-live .df-node--c{animation:df-node-in .35s ease-out 1.16s forwards}.animation-wrapper[data-animation=data-flow].df-is-live .df-node--a .df-node__dot{animation:df-dot-connect .2s ease-out 1.1s forwards}.animation-wrapper[data-animation=data-flow].df-is-live .df-node--b .df-node__dot{animation:df-dot-connect .2s ease-out 1.23s forwards}.animation-wrapper[data-animation=data-flow].df-is-live .df-node--c .df-node__dot{animation:df-dot-connect .2s ease-out 1.36s forwards}}@media (prefers-reduced-motion:reduce){.animation-wrapper[data-animation=data-flow] .df-status__dot:after{opacity:0}.animation-wrapper[data-animation=data-flow] .df-link{stroke-dashoffset:0}.animation-wrapper[data-animation=data-flow] .df-node{opacity:1;transform:translate(-50%,-50%) scale(1)}.animation-wrapper[data-animation=data-flow] .df-node--a .df-node__dot,.animation-wrapper[data-animation=data-flow] .df-node--b .df-node__dot,.animation-wrapper[data-animation=data-flow] .df-node--c .df-node__dot{background:var(--green)}}@container sa-canvas (max-width: 26rem){.animation-wrapper[data-animation=data-flow] .df-body{padding:var(--space-16)}.animation-wrapper[data-animation=data-flow] .df-node{font-size:.64rem}}