/* A private network specimen, not a deployment diagram. */
#syranet::after { display:none; }
#syranet .project-visual { grid-column:5/13;grid-row:3;margin:5px 0 30px;transform:none; }
#syranet .project-copy { grid-column:1/5;grid-row:3;padding-top:36px; }
.syranet-exhibit { --route-light:1;position:relative;min-width:0;isolation:isolate;text-rendering:geometricPrecision;pointer-events:none;user-select:none;transform:rotate(-.6deg);transform-origin:60% 45%;transition:transform .26s cubic-bezier(.2,.65,.3,1); }
#syranet[data-exhibit-active='true'] .syranet-exhibit { transform:translateY(-3px) rotate(-1deg) scale(1.01); }
.syranet-topline,.syranet-bottomline { display:flex;align-items:center;justify-content:space-between;gap:12px;font:9px/1.5 var(--mono);color:#59627a; }
.syranet-topline { border-top:1px solid #8792ae;padding-top:10px; }
.syranet-local-mark { font-size:8px;color:#76788c; }
.syranet-stage { position:relative;container-type:inline-size;aspect-ratio:720/460;margin:6px 0; }
.syranet-map { display:block;width:100%;height:100%;overflow:visible; }
.syranet-map--mobile { display:none; }
.syranet-map path,.syranet-map ellipse,.syranet-map circle { vector-effect:non-scaling-stroke; }
.syranet-globe-wash { fill:#e8edfb66;stroke:none; }
.syranet-mesh { stroke:#8a9ac1;stroke-width:.8;opacity:.65; }
.syranet-equator { stroke:#a5a4c3;stroke-width:.8; }
.syranet-cartography { stroke:#969eb6;stroke-width:.8; }
.syranet-tracks { fill:none;stroke:#9ca7c2;stroke-width:1;opacity:.7; }
.syranet-tracks [data-route-track='control'] { stroke-dasharray:3 5; }
.syranet-routes path { vector-effect:none; }
.syranet-routes { fill:none;stroke:var(--blue);stroke-width:2;opacity:var(--route-light); }
.syranet-routes [data-route='control'] { stroke-width:1.5; }
.syranet-node { fill:#315bff;stroke:#fff;stroke-width:1.5; }
.syranet-node-halo { fill:#315bff12;stroke:#315bff35;stroke-width:1; }
.syranet-packet { fill:var(--blue);stroke:#fff;stroke-width:1.5;filter:drop-shadow(0 0 3px #315bff88);visibility:hidden; }
.syranet-label { position:absolute;font:10px/1.4 var(--mono);color:#3f4c70;white-space:nowrap; }
.syranet-label small { display:block;font-size:8px;line-height:1.4;color:#7683a3;letter-spacing:.05em; }
.syranet-label--client { left:2%;top:16%; }.syranet-label--entry { left:32%;top:6%; }.syranet-label--network { left:52%;top:55%;font-size:9px; }.syranet-label--upstream { right:0;top:34%; }.syranet-label--control { left:26%;top:81%; }
.syranet-access { position:absolute;left:0;top:45%;width:27%;min-width:160px;padding:12px 12px 10px;background:#fafbfe;border:1px solid #a2adc6;box-shadow:3px 4px 0 #a6b3d526; }
.syranet-access header { display:flex;align-items:center;gap:7px; }
.syranet-access strong { font:500 11px/1.4 var(--sans); }
.syranet-plane { width:19px;height:19px;border:1px solid #8f9fcb;border-radius:50%;display:grid;place-items:center;color:#315bff;font:15px/1 var(--sans); }
.syranet-access-dot { width:4px;height:4px;border-radius:50%;background:#315bff;margin-left:auto; }
.syranet-status { font:12px/1.45 var(--sans);min-height:53px;margin:11px 0; }
.syranet-access-steps { display:flex;justify-content:space-between;gap:5px;font:8px/1.4 var(--mono);color:#5e6b87; }
.syranet-access-steps>span::before { content:'';display:inline-block;width:3px;height:3px;margin-right:4px;background:#315bff;vertical-align:middle; }
.syranet-bottomline { border-top:1px solid #c2c9da;padding-top:10px; }
.syranet-readout { color:#315bff;text-align:right; }
.syranet-exhibit[data-enhanced] .syranet-routes path { stroke-dasharray:var(--path-length);stroke-dashoffset:calc(var(--path-length) * (1 - var(--path-progress,0))); }
.syranet-exhibit[data-enhanced] [data-network-node] { opacity:calc(.25 + .75 * var(--node-light,0)); }
@media(max-width:1100px) and (min-width:901px) { #syranet .project-copy { grid-column:1/5; }.syranet-access { min-width:140px;padding:10px 8px; }.syranet-label { font-size:9px; }.syranet-access-steps { font-size:7px; } }
@media(max-width:900px) {
 #syranet .project-visual { grid-column:1/7;grid-row:3;margin:24px 0 12px; }
 #syranet .project-copy { grid-column:1/7;grid-row:4;padding:12px 0 20px;max-width:520px; }
 #syranet .project-title { margin-bottom:0; }
 #syranet .project-note { display:none; }
 #syranet .project-visual figcaption { flex-direction:row;gap:12px;font-size:7px; }
 .syranet-exhibit { transform:rotate(-.3deg); }
 #syranet[data-exhibit-active='true'] .syranet-exhibit { transform:translateY(-2px) rotate(-.6deg) scale(1.004); }
 .syranet-topline,.syranet-bottomline { font-size:9px;gap:8px; }.syranet-local-mark { font-size:8px; }
 .syranet-stage { aspect-ratio:auto;padding-bottom:103px;margin-top:12px; }
 .syranet-map--desktop { display:none; }.syranet-map--mobile { display:block;height:auto;aspect-ratio:360/330; }
 .syranet-label { font-size:10px; }
 .syranet-label small { font-size:9px; }
 .syranet-label--client { left:0;top:24cqw;transform:translateY(-12px); }.syranet-label--entry { left:37%;top:1cqw;transform:translateY(-8px); }.syranet-label--network { left:40%;top:55cqw;font-size:9px; }.syranet-label--upstream { right:0;top:54cqw;transform:translateY(-12px); }.syranet-label--control { left:3%;top:83cqw; }
 .syranet-access { top:auto;bottom:0;left:0;width:100%;min-width:0;display:grid;grid-template-columns:100px 1fr;gap:8px 12px;padding:10px 12px; }
 .syranet-access header { grid-row:1/3;align-self:center; }.syranet-access-dot { display:none; }
 .syranet-status { font-size:12px;min-height:0;margin:0; }.syranet-access-steps { font-size:9px;justify-content:flex-start;gap:12px; }
 .syranet-bottomline { align-items:start; }.syranet-bottomline>span { max-width:52%; }
}
@media(prefers-reduced-motion:reduce) { .syranet-exhibit { transition:none; }#syranet[data-exhibit-active] .syranet-exhibit { transform:rotate(-.3deg); } }

/* Mobile captions occupy the open cartographic margins, clear of globe and routes. */
@media(max-width:900px) {
 .syranet-label--client { transform:translateY(-20px); }
 .syranet-label--network { left:50%;top:80cqw;font-size:9px;transform:translateX(-50%);text-align:center; }
 .syranet-label--upstream { right:0;top:17cqw;transform:none;text-align:right; }
}