/* Provider and application network, styled in ZRouter's original blue palette. */
.network-diagram { max-width: 1040px; margin: 70px auto 38px; }
.network-heading { display: flex; justify-content: space-between; padding-inline: 5%; color: var(--muted); font: 9px ui-monospace, monospace; letter-spacing: .12em; }
.network-stage { height: 420px; position: relative; }
.network-routes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.network-wires { fill: none; stroke: #a9c8ed; stroke-width: 1.4; opacity: .8; }
.network-packets, .network-return { fill: none; stroke: #0a60ff; stroke-width: 2.5; stroke-linecap: round; }
.network-packets use { stroke-dasharray: 7 93; animation: network-request 5s linear infinite; }
.network-packets use:nth-child(3n) { animation-delay: -1.7s; }
.network-packets use:nth-child(3n + 1) { animation-delay: -3.3s; }
.network-return { stroke: #007fae; opacity: .65; }
.network-return use { stroke-dasharray: 5 95; animation: network-request 6s -2s linear infinite reverse; }
.network-return use:nth-child(2n) { animation-delay: -4s; }
.network-endpoints { position: absolute; top: 33px; bottom: 33px; width: 16%; display: flex; flex-direction: column; justify-content: space-between; }
.network-providers { left: 5%; }
.network-apps { right: 5%; }
.network-endpoints > span, .network-endpoints > a { display: flex; justify-content: center; align-items: center; min-height: 34px; padding: 6px 12px; border: 1px solid #93bce8; border-radius: 30px; background: #ffffffb3; color: #254665; font: 11px ui-monospace, monospace; }
.network-endpoints > a:hover { color: var(--accent); border-color: var(--accent); background: #e1f4ff; }
.network-core { position: absolute; left: 50%; top: 50%; width: 240px; height: 240px; transform: translate(-50%, -50%); }
.network-core::before { content: ""; position: absolute; inset: -20px; border-radius: 50%; background: radial-gradient(circle, #00cfff30, transparent 70%); animation: network-glow 4s ease-in-out infinite alternate; }
.network-diamond { position: absolute; width: 86px; height: 86px; border: 1px solid #a9c8ed; border-radius: 13px; background: linear-gradient(135deg, #e1f4ff, #ffffff); transform: rotate(45deg); display: grid; place-items: center; }
.network-diamond > span { transform: rotate(-45deg); font: 10px ui-monospace, monospace; letter-spacing: .03em; color: #254665; }
.diamond-top { top: 7px; left: 77px; }
.diamond-left { top: 77px; left: 7px; }
.diamond-right { top: 77px; right: 7px; }
.diamond-bottom { bottom: 7px; left: 77px; }
.network-logo { position: absolute; top: 88px; left: 88px; width: 64px; height: 64px; transform: rotate(45deg); border: 1px solid #79a9e5; border-radius: 13px; background: #e1f4ff; display: grid; place-items: center; box-shadow: 0 0 25px #0a60ff20; }
.network-logo .brand-mark { width: 40px; height: 40px; transform: rotate(-45deg); }
.network-core > strong { position: absolute; bottom: -25px; left: 0; right: 0; font: 20px var(--display); font-weight: 400; }
.network-status { position: absolute; padding: 5px 9px; border: 1px solid #93c6f6; border-radius: 30px; background: #ffffffd9; color: #1757a0; font: 8px ui-monospace, monospace; animation: network-status 5s ease-in-out infinite; }
.status-request { right: 24%; top: 140px; }
.status-routed { left: 25%; top: 150px; animation-delay: -1.6s; }
.status-response { left: 28%; top: 265px; animation-delay: -3.2s; color: #007fae; }
.network-diagram figcaption { max-width: 620px; margin: 18px auto 0; font-size: 12px; line-height: 1.8; color: var(--muted); }
.network-mode-note { display: block; margin-top: 12px; font-size: 10px; }
.network-mode-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
@keyframes network-request { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes network-glow { from { opacity: .5; transform: scale(.9); } to { opacity: 1; transform: scale(1.1); } }
@keyframes network-status { 0%, 100% { opacity: .4; transform: translateY(3px); } 50% { opacity: 1; transform: translateY(-3px); } }
@media (max-width: 820px) {
  .network-endpoints > span, .network-endpoints > a { padding-inline: 5px; font-size: 9px; }
  .network-core { transform: translate(-50%, -50%) scale(.8); }
  .network-status { font-size: 7px; padding-inline: 6px; }
}
@media (max-width: 600px) {
  .network-diagram { margin-top: 42px; }
  .network-heading { gap: 20px; font-size: 7px; padding-inline: 0; }
  .network-stage { height: 350px; }
  .network-endpoints { width: 27%; top: 22px; bottom: 22px; }
  .network-providers { left: 0; }
  .network-apps { right: 0; }
  .network-endpoints > span, .network-endpoints > a { font-size: 8px; padding: 5px 3px; min-height: 34px; }
  .network-endpoints > a { min-height: 44px; }
  .network-core { transform: translate(-50%, -50%) scale(.48); }
  .network-core > strong { font-size: 24px; }
  .network-diamond > span { font-size: 16px; letter-spacing: 0; }
  .network-status { display: none; }
  .network-diagram figcaption { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .network-core::before, .network-status, .network-packets use, .network-return use { animation: none; }
  .network-packets, .network-return { display: none; }
}