/* Architecture illustration: CSS-only, continuous autoplay. */
.visual-heading{flex-wrap:wrap;row-gap:8px}
.visual-tools{display:flex;align-items:center;gap:9px;flex:none;margin-left:auto}
.visual-heading>.mono,.visual-tools .visual-tag{white-space:nowrap}

.network-visual .route-one{stroke:#dd955b;stroke-dasharray:3 6;--edge-motion:edge-route-flow 6s linear infinite}
.network-visual .route-two{stroke:#df721a;stroke-dasharray:4 5;--edge-motion:edge-route-flow 6s linear infinite}
.network-visual .globe-meridians{transform-box:view-box;transform-origin:294px 213px;--edge-motion:globe-meridian-drift 14s ease-in-out -7s infinite alternate}
.network-visual .globe-land{transform-box:view-box;transform-origin:294px 213px;--edge-motion:globe-land-drift 14s ease-in-out -6s infinite alternate}
.network-visual .node-wave{transform-box:view-box;transform-origin:367px 191px;--edge-motion:edge-node-pulse 3.8s ease-out var(--pulse-delay,0s) infinite}
.network-visual .node-wave-delayed{--pulse-delay:-1.9s}
.network-visual .route-packet{display:none;fill:#f48120;stroke:#fff;stroke-width:1.5;transform-box:fill-box;transform-origin:center;offset-rotate:0deg;offset-anchor:center}
.network-visual .packet-inbound{--edge-motion:edge-packet-in 6s linear var(--packet-delay,0s) infinite}
.network-visual .packet-outbound{--edge-motion:edge-packet-out 6s linear var(--packet-delay,0s) infinite}
.network-visual .packet-secondary{--packet-delay:-3s}
@supports(offset-path:path('M0 0L1 1')) and (transform-box:fill-box){
 .network-visual .route-packet{display:block}
 .network-visual .packet-inbound{offset-path:path('M79 183Q196 24 367 191')}
 .network-visual .packet-outbound{offset-path:path('M367 191Q466 200 476 303')}
}
.network-visual [data-globe-motion]{animation:var(--edge-motion)}

@keyframes edge-route-flow{to{stroke-dashoffset:-180}}
@keyframes globe-meridian-drift{from{transform:rotate(-4deg) scaleX(.88)}to{transform:rotate(4deg) scaleX(1.04)}}
@keyframes globe-land-drift{from{transform:translateX(-12px) rotate(-2.5deg)}to{transform:translateX(12px) rotate(2.5deg)}}
@keyframes edge-node-pulse{0%{transform:scale(.65);opacity:.52}80%,100%{transform:scale(1.8);opacity:0}}
@keyframes edge-packet-in{0%{offset-distance:0%;opacity:0}3%{opacity:1}55%{offset-distance:100%;opacity:1}58%,100%{offset-distance:100%;opacity:0}}
@keyframes edge-packet-out{0%,55%{offset-distance:0%;opacity:0}58%{opacity:1}96%{offset-distance:100%;opacity:1}100%{offset-distance:100%;opacity:0}}
@media(max-width:600px){.visual-tools{gap:6px}.visual-heading{gap:6px}.visual-heading .mono{font-size:7px;letter-spacing:.8px}.visual-tag{font-size:8px;padding:2px 5px}}

/* Keep this illustration autoplaying in every system motion mode, as requested.
   Scope the override to the explicitly marked SVG elements only. */
@media(prefers-reduced-motion:reduce){
 .network-visual [data-globe-motion]{animation:var(--edge-motion)!important}
}
@media print{.network-visual .route-packet,.network-visual .node-wave{display:none}.network-visual [data-globe-motion]{animation:none!important}}