/* Native service-request path and separate general communication; product links remain ordinary anchors. */
#public-main #b-diagram-infra-network {
  --na-text:#183850;--na-muted:#496278;--na-blue:#3c79a8;--na-line:#c7d7e5;
  --na-device:#d8e8f5;--na-top:#edf6fd;--na-side:#acc6dc;--na-face:#fafdff;
  --na-shadow:#234e741c;--na-orange:#a95119;
  color:var(--na-text);font-size:14px;line-height:1.65;font-weight:400;
}
html[data-theme="dark"] #public-main #b-diagram-infra-network {
  --na-text:#e4effb;--na-muted:#aec2d6;--na-blue:#8dbbe3;--na-line:#34516a;
  --na-device:#24435c;--na-top:#3a5f7b;--na-side:#1a344d;--na-face:#173247;
  --na-shadow:#0004;--na-orange:#ffbb88;
}
#public-main #b-diagram-infra-network * {box-sizing:border-box;min-width:0;}
#public-main #b-diagram-infra-network .na-responsive {width:100%;max-width:100%;margin-inline:auto;container:infra-network / inline-size;}
#public-main #b-diagram-infra-network .na-flow-label {margin:24px auto 15px;max-width:760px;text-align:left;font-size:11px;line-height:1.6;color:var(--na-muted);}
#public-main #b-diagram-infra-network .na-map {position:relative;display:grid;grid-template-columns:.72fr .9fr .9fr 1.55fr;gap:24px 26px;max-width:760px;margin-inline:auto;align-items:start;--na-mobile:0;}
#public-main #b-diagram-infra-network .na-wires {position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1;}
#public-main #b-diagram-infra-network .na-wire {fill:none;stroke:var(--na-blue);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
#public-main #b-diagram-infra-network .na-wire--general {stroke:var(--na-muted);stroke-width:1.2;stroke-dasharray:3 4;}
#public-main #b-diagram-infra-network .na-node {position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;}
#public-main #b-diagram-infra-network .na-art {position:relative;width:100px;max-width:100%;height:100px;margin-inline:auto;}
#public-main #b-diagram-infra-network .na-depth::before {content:'';position:absolute;top:-6px;left:-1px;width:calc(100% + 8px);height:6px;clip-path:polygon(0 100%,12% 0,100% 0,88% 100%);background:linear-gradient(160deg,var(--na-top),var(--na-side));}
#public-main #b-diagram-infra-network .na-depth::after {content:'';position:absolute;left:calc(100% - 1px);top:-6px;width:8px;height:calc(100% + 6px);clip-path:polygon(0 6px,100% 0,100% calc(100% - 6px),0 100%);background:var(--na-side);}
#public-main #b-diagram-infra-network .na-laptop {position:absolute;left:8px;top:31px;width:76px;height:49px;border:1px solid var(--na-blue);border-radius:3px;background:linear-gradient(140deg,var(--na-top),var(--na-device));box-shadow:0 7px 10px var(--na-shadow);}
#public-main #b-diagram-infra-network .na-laptop::before {content:'';position:absolute;inset:6px;background:var(--na-face);border:1px solid var(--na-line);}
#public-main #b-diagram-infra-network .na-laptop::after {content:'';position:absolute;left:-8px;bottom:-9px;width:calc(100% + 16px);height:9px;clip-path:polygon(8% 0,92% 0,100% 75%,96% 100%,4% 100%,0 75%);background:linear-gradient(var(--na-top) 0 60%,var(--na-blue) 60% 75%,var(--na-side) 75%);}
#public-main #b-diagram-infra-network .na-laptop > svg {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:22px !important;height:22px !important;stroke:var(--na-blue);stroke-width:1.3;}
#public-main #b-diagram-infra-network .na-switch {position:absolute;left:2px;top:39px;width:92px;height:32px;border:1px solid var(--na-blue);border-radius:3px;background:linear-gradient(140deg,var(--na-top),var(--na-device));box-shadow:0 7px 10px var(--na-shadow);display:flex;align-items:center;gap:4px;padding:9px 6px;}
#public-main #b-diagram-infra-network .na-switch > span {width:8px;height:7px;border:1px solid var(--na-blue);background:var(--na-face);}
#public-main #b-diagram-infra-network .na-status {position:absolute;right:5px;top:5px;width:3px;height:3px;background:var(--na-orange);border-radius:50%;}
#public-main #b-diagram-infra-network .na-adc {position:absolute;left:6px;top:37px;width:86px;height:36px;border:1px solid var(--na-blue);border-radius:3px;background:linear-gradient(140deg,var(--na-face),var(--na-device));box-shadow:0 7px 10px var(--na-shadow);display:flex;align-items:center;justify-content:center;}
#public-main #b-diagram-infra-network .na-adc > svg {width:24px !important;height:24px !important;stroke:var(--na-blue);stroke-width:1.3;transform:rotate(90deg);}
#public-main #b-diagram-infra-network .na-art--pool {width:194px;}
#public-main #b-diagram-infra-network .na-pool {position:absolute;inset:0;display:flex;align-items:start;justify-content:center;gap:9px;}
#public-main #b-diagram-infra-network .na-server-unit {position:relative;width:55px;max-width:100%;height:100px;flex-shrink:0;}
#public-main #b-diagram-infra-network .na-server {position:absolute;left:3px;top:20px;width:42px;height:68px;border:1px solid var(--na-blue);border-radius:3px;background:linear-gradient(100deg,var(--na-top),var(--na-device));box-shadow:0 7px 11px var(--na-shadow);padding:8px 5px;display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:5px;}
#public-main #b-diagram-infra-network .na-server > span {position:relative;border:1px solid var(--na-blue);background:var(--na-face);border-radius:1px;}
#public-main #b-diagram-infra-network .na-server > span::before {content:'';position:absolute;left:3px;top:4px;width:12px;border-top:1px solid var(--na-blue);}
#public-main #b-diagram-infra-network .na-server > span::after {content:'';position:absolute;right:3px;top:4px;width:2px;height:2px;border-radius:50%;background:var(--na-orange);}
#public-main #b-diagram-infra-network .na-server-unit > small {position:absolute;left:0;right:0;bottom:-9px;font-size:11px;line-height:1.5;color:var(--na-muted);}
#public-main #b-diagram-infra-network .na-other {grid-column:2;grid-row:2;position:relative;z-index:2;justify-self:center;display:flex;align-items:center;justify-content:center;gap:6px;width:138px;max-width:100%;color:var(--na-muted);font-size:11px;line-height:1.6;text-align:center;}
#public-main #b-diagram-infra-network .na-other > svg {width:16px !important;height:16px !important;flex-shrink:0;stroke:var(--na-muted);stroke-width:1.3;}
#public-main #b-diagram-infra-network .na-other small {display:block;font-size:11px;line-height:1.6;}
#public-main #b-diagram-infra-network .na-link {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:54px;max-width:100%;padding:5px 0;margin-bottom:10px;text-align:center;text-decoration:none;color:var(--na-text);}
#public-main #b-diagram-infra-network .na-link b {font-size:13px;line-height:1.5;font-weight:500;}
#public-main #b-diagram-infra-network .na-link span {font-size:11px;line-height:1.7;color:var(--na-muted);}
#public-main #b-diagram-infra-network .na-link:hover b {text-decoration:underline;text-underline-offset:4px;}
@container infra-network (max-width:640px) {
  #public-main #b-diagram-infra-network .na-flow-label {margin-top:22px;}
  #public-main #b-diagram-infra-network .na-map {--na-mobile:1;grid-template-columns:repeat(3,minmax(0,1fr));gap:70px 18px;max-width:380px;}
  #public-main #b-diagram-infra-network .na-art {width:78px;height:82px;}
  #public-main #b-diagram-infra-network .na-laptop {left:8px;top:25px;width:60px;height:36px;}
  #public-main #b-diagram-infra-network .na-laptop::before {inset:4px;}
  #public-main #b-diagram-infra-network .na-laptop > svg {width:18px !important;height:18px !important;}
  #public-main #b-diagram-infra-network .na-switch {left:2px;top:30px;width:68px;height:26px;padding:8px 5px;gap:3px;}
  #public-main #b-diagram-infra-network .na-switch > span {width:6px;height:6px;}
  #public-main #b-diagram-infra-network .na-adc {left:3px;top:29px;width:66px;height:28px;}
  #public-main #b-diagram-infra-network .na-adc > svg {width:20px !important;height:20px !important;}
  #public-main #b-diagram-infra-network .na-other {position:absolute;grid-column:auto;grid-row:auto;top:158px;left:50%;transform:translateX(-50%);max-width:none;}
  #public-main #b-diagram-infra-network .na-node--servers {grid-column:1/-1;grid-row:2;}
  #public-main #b-diagram-infra-network .na-art--pool {width:260px;height:110px;}
  #public-main #b-diagram-infra-network .na-pool {gap:26px;}
}
@container infra-network (max-width:300px) {
  #public-main #b-diagram-infra-network .na-art:not(.na-art--pool) {width:72px;}
  #public-main #b-diagram-infra-network .na-laptop {left:6px;width:54px;}
  #public-main #b-diagram-infra-network .na-switch {left:1px;width:62px;padding-inline:4px;}
  #public-main #b-diagram-infra-network .na-adc {left:2px;width:60px;}
}
