.vga-root{--ps:paused;--phase:6.2s;--off:calc(0s - var(--phase) - var(--seek,0s));--ease-enter:cubic-bezier(.16, 1, .3, 1);--ease-move:cubic-bezier(.65, 0, .35, 1);--ease-soft:cubic-bezier(.37, 0, .63, 1);background:var(--navy);width:100%;font-family:var(--font-sans);border-radius:clamp(16px,3cqi,24px);margin:0;overflow:clip;container-type:inline-size}[data-seek] .vga-root,.vga-root[data-seek]{--seek:1.7s}[data-play=true] .vga-root,.vga-root[data-play=true]{--ps:running}[data-play=false] .vga-root,.vga-root[data-play=false]{--ps:paused}.vga-stage{aspect-ratio:16/10;color:var(--on-navy);isolation:isolate;position:relative}.vga-root[data-tone=dark]{box-shadow:inset 0 0 0 1px var(--line-dark)}.vga-wires{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.vga-tall{visibility:hidden}.vga-base{fill:none;stroke:#b9c0e052;stroke-width:1px;vector-effect:non-scaling-stroke}.vga-trail{fill:none;stroke:var(--cyan);stroke-width:.42px;stroke-dasharray:1 1;stroke-dashoffset:0;opacity:.5}.vga-pkt{fill:none;stroke:var(--cyan);stroke-width:1.7px;stroke-linecap:round;stroke-dasharray:0 2;stroke-dashoffset:0;opacity:0}.vga-tail1{stroke-width:1.15px}.vga-tail2{stroke-width:.8px}.vga-node{--w:22cqi;z-index:1;left:var(--x);top:var(--y);width:var(--w);background:var(--navy-2);border-radius:clamp(10px,1.9cqi,14px);align-items:center;gap:clamp(8px,1.5cqi,12px);padding:clamp(9px,1.7cqi,14px) clamp(10px,1.8cqi,14px);display:flex;position:absolute;transform:translate(-50%,-50%);box-shadow:inset 0 0 0 1px #9ad8ff29}.vga-node:after{content:"";border-radius:inherit;box-shadow:0 0 0 1px var(--cyan);opacity:0;pointer-events:none;position:absolute;inset:-1px}.vga-order{--x:13%;--y:50%}.vga-agent{--x:50%;--y:50%;box-shadow:inset 0 0 0 1px #9ad8ff57}.vga-invoice{--x:87%;--y:20%}.vga-fulfilment{--x:87%;--y:50%}.vga-report{--x:87%;--y:80%}.vga-icon{width:clamp(24px,4.4cqi,32px);height:clamp(24px,4.4cqi,32px);color:var(--sky);background:#9ad8ff1a;border-radius:8px;flex:none;place-items:center;display:grid;position:relative}.vga-icon>svg{position:relative}.vga-agent .vga-icon:before{content:"";border-radius:inherit;opacity:0;background:#22ffff29;position:absolute;inset:0}.vga-text{gap:2px;min-width:0;display:grid}.vga-label{letter-spacing:-.01em;color:var(--on-navy);text-wrap:balance;font-size:clamp(.75rem,.3rem + 1.6cqi,1rem);font-weight:500;line-height:1.2}.vga-sub{color:var(--on-navy-2);text-wrap:balance;font-size:clamp(.6875rem,.4rem + 1.2cqi,.8125rem);line-height:1.25;display:none}@container (min-width:860px){.vga-sub{display:block}}.vga-status{background:var(--navy-2);width:18px;height:18px;box-shadow:inset 0 0 0 1px #ffffff47, 0 0 0 3px var(--navy);border-radius:50%;place-items:center;display:grid;position:absolute;top:-7px;right:-7px}.vga-check{background:var(--lime);width:18px;height:18px;color:var(--navy);border-radius:50%;place-items:center;display:grid}.vga-badge{background:var(--cyan);width:10px;height:10px;box-shadow:0 0 0 3px var(--navy);border-radius:50%;position:absolute;top:-4px;right:-4px}@container (max-width:619px){.vga-stage{--side:max(24px, 6cqi);--gap:max(8px, 2.4cqi);--w3:calc((100cqi - 2 * var(--side) - 2 * var(--gap)) / 3);aspect-ratio:4/5}.vga-wide{visibility:hidden}.vga-tall{visibility:visible}.vga-order{--x:50%;--y:13%;--w:64cqi}.vga-agent{--x:50%;--y:42%;--w:64cqi}.vga-invoice{--x:calc(var(--side) + var(--w3) / 2);--y:84%}.vga-fulfilment{--x:50%;--y:84%}.vga-report{--x:calc(100% - var(--side) - var(--w3) / 2);--y:84%}.vga-invoice,.vga-fulfilment,.vga-report{--w:var(--w3);flex-wrap:wrap;gap:8px;padding:10px}.vga-invoice .vga-text,.vga-fulfilment .vga-text,.vga-report .vga-text{flex-basis:100%;order:3}.vga-order .vga-sub,.vga-agent .vga-sub{display:block}.vga-status{margin-left:auto;position:static;box-shadow:inset 0 0 0 1px #ffffff47}.vga-label{font-size:clamp(.78rem,.45rem + 2.4cqi,.9375rem)}.vga-sub{font-size:clamp(.6875rem,.4rem + 2cqi,.8125rem)}.vga-icon{width:26px;height:26px}}@media (prefers-reduced-motion:no-preference) and (scripting:enabled){[data-play] .vga-pkt{animation:vga-travel 8s var(--ease-move) calc(var(--d) + var(--off)) infinite both;animation-play-state:var(--ps)}[data-play] .vga-tail1{animation-delay:calc(var(--d) + 55ms + var(--off))}[data-play] .vga-tail2{animation-delay:calc(var(--d) + .11s + var(--off))}[data-play] .vga-p_a{--d:.9s}[data-play] .vga-p_b1{--d:2.3s}[data-play] .vga-p_b2{--d:2.42s}[data-play] .vga-p_b3{--d:2.54s}[data-play] .vga-t_a{animation:vga-trailA 8s var(--ease-move) var(--off) infinite both;animation-play-state:var(--ps)}[data-play] .vga-t_b1{animation:vga-trailB1 8s var(--ease-move) var(--off) infinite both;animation-play-state:var(--ps)}[data-play] .vga-t_b2{animation:vga-trailB2 8s var(--ease-move) var(--off) infinite both;animation-play-state:var(--ps)}[data-play] .vga-t_b3{animation:vga-trailB3 8s var(--ease-move) var(--off) infinite both;animation-play-state:var(--ps)}[data-play] .vga-node:after{animation:vga-pulse 8s var(--ease-enter) calc(var(--pd) + var(--off)) infinite both;animation-play-state:var(--ps)}[data-play] .vga-order{--pd:.4s}[data-play] .vga-agent{--pd:1.65s}[data-play] .vga-invoice{--pd:3.15s}[data-play] .vga-fulfilment{--pd:3.27s}[data-play] .vga-report{--pd:3.39s}[data-play] .vga-agent .vga-icon:before{animation:vga-think 8s cubic-bezier(.37, 0, .63, 1) var(--off) infinite both;animation-play-state:var(--ps)}[data-play] .vga-invoice .vga-check{animation:vga-checkA 8s var(--ease-enter) var(--off) infinite both;animation-play-state:var(--ps)}[data-play] .vga-fulfilment .vga-check{animation:vga-checkB 8s var(--ease-enter) var(--off) infinite both;animation-play-state:var(--ps)}[data-play] .vga-report .vga-check{animation:vga-checkC 8s var(--ease-enter) var(--off) infinite both;animation-play-state:var(--ps)}[data-play] .vga-badge{animation:vga-badge 8s var(--ease-enter) var(--off) infinite both;animation-play-state:var(--ps)}}@keyframes vga-travel{0%{stroke-dashoffset:0;opacity:1}11.25%{stroke-dashoffset:-1px;opacity:1}11.3%,to{stroke-dashoffset:-1px;opacity:0}}@keyframes vga-trailA{0%,11.25%{stroke-dashoffset:1px;opacity:.5}21.25%,82.5%{stroke-dashoffset:0;opacity:.5}87.5%{stroke-dashoffset:0;opacity:0}87.6%,to{stroke-dashoffset:1px;opacity:0}}@keyframes vga-trailB1{0%,28.75%{stroke-dashoffset:1px;opacity:.5}40%,82.5%{stroke-dashoffset:0;opacity:.5}87.5%{stroke-dashoffset:0;opacity:0}87.6%,to{stroke-dashoffset:1px;opacity:0}}@keyframes vga-trailB2{0%,30.25%{stroke-dashoffset:1px;opacity:.5}41.5%,82.5%{stroke-dashoffset:0;opacity:.5}87.5%{stroke-dashoffset:0;opacity:0}87.6%,to{stroke-dashoffset:1px;opacity:0}}@keyframes vga-trailB3{0%,31.75%{stroke-dashoffset:1px;opacity:.5}43%,82.5%{stroke-dashoffset:0;opacity:.5}87.5%{stroke-dashoffset:0;opacity:0}87.6%,to{stroke-dashoffset:1px;opacity:0}}@keyframes vga-pulse{0%{opacity:0;transform:scale(1)}2.5%{opacity:.9;transform:scale(1)}10%,to{opacity:0;transform:scale(1.06,1.12)}}@keyframes vga-think{0%,21%{opacity:0}23%,27%{opacity:1}30%,to{opacity:0}}@keyframes vga-checkA{0%,40.6%{opacity:0;transform:scale(.5)}44.4%,82.5%{opacity:1;transform:none}87.5%,to{opacity:0;transform:none}}@keyframes vga-checkB{0%,42.1%{opacity:0;transform:scale(.5)}45.9%,82.5%{opacity:1;transform:none}87.5%,to{opacity:0;transform:none}}@keyframes vga-checkC{0%,43.6%{opacity:0;transform:scale(.5)}47.4%,82.5%{opacity:1;transform:none}87.5%,to{opacity:0;transform:none}}@keyframes vga-badge{0%,5%{opacity:0;transform:scale(.4)}8%,82.5%{opacity:1;transform:none}87.5%,to{opacity:0;transform:none}}
