.routing-figure{margin:0;background:#0d171e;border:1px solid #293c46;border-radius:16px;padding:28px 24px 18px;overflow:hidden;position:relative;isolation:isolate}
.routing-figure svg{display:block;width:100%;height:auto;color:#97b0bc;font-family:'Golos Text',system-ui,sans-serif}
.routing-figure .routing-narrow{display:none}.routing-figure .node-border{stroke:#354c58;stroke-width:1.3}.routing-hub .node-border{stroke:#4aa7a4}.vpn-node .node-border{stroke:#267975}.vpn-node{color:#26d9ce}
.diagram-label{fill:#eaf2f6;font-size:22px;font-weight:600}.diagram-brand{fill:#71eee5;font-size:19px;font-weight:700}.diagram-small{fill:#a9bdc8;font-size:15px}.diagram-examples{fill:#97aeba;font-size:13px}.diagram-wire-label{fill:#99b2be;font-size:14px}.vpn-text{fill:#71eee5}
.route-line{stroke:#4a6572;stroke-width:1.4;fill:none}.route-line.vpn{stroke:#2b8d88}.route-packet{stroke:#c4dbe4;stroke-width:3;fill:none;stroke-linecap:round;stroke-dasharray:4 32;animation:route-travel 4s linear infinite}.route-packet.vpn{stroke:#26d9ce;animation-delay:-1.7s}.route-packet.direct{animation-delay:-.5s}
.routing-caption{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 6px 0;border-top:1px solid #293c46;font-size:12px;color:#9eb4bf}.routing-legend{display:flex;gap:22px;flex-wrap:wrap}.routing-legend span{display:inline-flex;align-items:center;gap:8px}.routing-legend i{width:22px;height:2px;background:#aac6d2;display:inline-block}.routing-legend .vpn-key{background:#26d9ce}.routing-credit{white-space:nowrap;color:#9eb4bf}
.routing-control{display:flex;align-items:center;justify-content:flex-end;gap:18px;margin-top:18px;font-size:13px;color:#a0b0bd}.routing-pause{display:inline-flex;align-items:center;gap:9px;min-height:44px;cursor:pointer;color:#b9cbd5}.routing-pause input{accent-color:#26d9ce;width:18px;height:18px;margin:0;min-height:0}.routing-figure:has(.route-pause:checked) .route-packet{animation-play-state:paused}.routing-figure:not(.in-view) .route-packet{animation-play-state:paused}.routing-standalone .routing-figure .route-packet{animation-play-state:running;animation-iteration-count:4}.routing-standalone .routing-figure:has(.route-pause:checked) .route-packet{animation-play-state:paused}
@keyframes route-travel{to{stroke-dashoffset:-144}}
@media(max-width:1100px){.routing-figure .routing-wide{display:none}.routing-figure .routing-narrow{display:block;max-width:420px;margin-inline:auto}.routing-narrow .diagram-label{font-size:22px}.routing-narrow .diagram-small{font-size:20px}.routing-narrow .diagram-examples{font-size:19px}.routing-narrow .diagram-brand{font-size:24px}}
@media(max-width:700px){.routing-figure{padding:18px 14px 14px}.routing-figure .routing-wide{display:none}.routing-figure .routing-narrow{display:block}.routing-caption{align-items:flex-start;flex-direction:column;gap:12px;padding-top:16px}.routing-legend{gap:13px}.routing-control{flex-direction:column;align-items:flex-start;gap:2px}.diagram-label{font-size:18px}}
@media(prefers-reduced-motion:reduce){.route-packet{animation:none!important;stroke-dasharray:none;stroke-width:2}}.motion-off .route-packet{animation:none!important;stroke-dasharray:none;stroke-width:2}