/* Native overview diagram; capsule destinations remain ordinary section links. */
#public-main #b-diagram-infra-overview {
  --io-bg:#fff;--io-text:#183850;--io-muted:#496278;--io-blue:#3c79a8;
  --io-line:#c7d7e5;--io-device:#d8e8f5;--io-top:#edf6fd;--io-side:#acc6dc;
  --io-face:#fafdff;--io-shadow:#234e741c;--io-orange:#a95119;--io-lenovo:#c03440;
  color:var(--io-text);font-size:14px;line-height:1.65;
}
html[data-theme="dark"] #public-main #b-diagram-infra-overview {
  --io-bg:#070b12;--io-text:#e4effb;--io-muted:#aec2d6;--io-blue:#8dbbe3;
  --io-line:#34516a;--io-device:#24435c;--io-top:#3a5f7b;--io-side:#1a344d;
  --io-face:#173247;--io-shadow:#0004;--io-orange:#ffbb88;--io-lenovo:#f17d89;
}
#public-main #b-diagram-infra-overview .io-sr {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
#public-main #b-diagram-infra-overview .io-responsive {width:100%;max-width:100%;margin-inline:auto;container:infra-overview / inline-size;}
#public-main #b-diagram-infra-overview * {box-sizing:border-box;min-width:0;}
#public-main #b-diagram-infra-overview :where(h4,p) {margin:0;font-weight:400;word-break:keep-all;}
#public-main #b-diagram-infra-overview .io-map {position:relative;display:grid;grid-template-columns:minmax(120px,.8fr) minmax(170px,1.2fr) minmax(135px,.95fr);gap:34px 32px;align-items:center;max-width:760px;margin-inline:auto;--io-mobile:0;}
#public-main #b-diagram-infra-overview .io-wires {position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1;pointer-events:none;}
#public-main #b-diagram-infra-overview .io-wire {fill:none;stroke:var(--io-blue);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
#public-main #b-diagram-infra-overview .io-wire--backup {stroke:var(--io-orange);stroke-dasharray:4 5;}
#public-main #b-diagram-infra-overview .io-node {position:relative;z-index:2;text-align:center;}
#public-main #b-diagram-infra-overview .io-node--network {grid-column:1;grid-row:1/3;}
#public-main #b-diagram-infra-overview .io-node--compute {grid-column:2;grid-row:1;}
#public-main #b-diagram-infra-overview .io-node--virtual {grid-column:2;grid-row:2;}
#public-main #b-diagram-infra-overview .io-node--data {grid-column:3;grid-row:1/3;}
#public-main #b-diagram-infra-overview .io-art {position:relative;width:142px;max-width:100%;height:118px;margin-inline:auto;display:flex;align-items:center;justify-content:center;}
#public-main #b-diagram-infra-overview .io-link {position:relative;inset:auto;transform:none;margin-top:9px;white-space:nowrap;}
#public-main #b-diagram-infra-overview .io-copy {font-size:11px;line-height:1.7;color:var(--io-muted);margin-top:8px;}
#public-main #b-diagram-infra-overview .io-brand {color:var(--io-text);font-size:12px;}
#public-main #b-diagram-infra-overview .io-copy-compact {display:none;}
#public-main #b-diagram-infra-overview .io-network-equipment {position:relative;width:120px;height:91px;}
#public-main #b-diagram-infra-overview .io-switch {position:absolute;left:2px;top:8px;width:99px;height:35px;border:1px solid var(--io-blue);border-radius:3px;background:linear-gradient(140deg,var(--io-top),var(--io-device));box-shadow:0 5px 8px var(--io-shadow);padding:12px 7px 8px;display:flex;gap:5px;}
#public-main #b-diagram-infra-overview .io-switch span {width:8px;height:7px;border:1px solid var(--io-blue);background:var(--io-face);}
#public-main #b-diagram-infra-overview .io-switch > svg {position:absolute;left:39px;top:-21px;width:19px !important;height:19px !important;stroke:var(--io-blue);stroke-width:1.3;}
#public-main #b-diagram-infra-overview .io-adc {position:absolute;right:1px;bottom:5px;width:68px;height:28px;border:1px solid var(--io-blue);border-radius:3px;background:linear-gradient(140deg,var(--io-face),var(--io-device));box-shadow:0 5px 8px var(--io-shadow);display:flex;align-items:center;justify-content:center;}
#public-main #b-diagram-infra-overview .io-adc > svg {width:22px !important;height:22px !important;stroke:var(--io-blue);stroke-width:1.3;}
#public-main #b-diagram-infra-overview .io-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(--io-top),var(--io-side));}
#public-main #b-diagram-infra-overview .io-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(--io-side);}
#public-main #b-diagram-infra-overview .io-node--compute > .io-art {width:164px;height:146px;}
#public-main #b-diagram-infra-overview .io-rack {position:absolute;left:10px;top:10px;width:76px;height:120px;border:1px solid var(--io-blue);border-radius:3px;padding:12px 8px 11px;background:linear-gradient(90deg,var(--io-side) 0 3px,var(--io-top) 3px,var(--io-device) calc(100% - 4px),var(--io-side) calc(100% - 4px));display:grid;grid-template-rows:repeat(4,minmax(0,1fr));gap:5px;box-shadow:0 8px 13px var(--io-shadow);}
#public-main #b-diagram-infra-overview .io-rack span {position:relative;border:1px solid var(--io-blue);background:linear-gradient(120deg,var(--io-face),var(--io-top));border-radius:2px;}
#public-main #b-diagram-infra-overview .io-rack span::before {content:'';position:absolute;left:5px;top:5px;width:calc(100% - 21px);height:6px;background:repeating-linear-gradient(90deg,var(--io-blue) 0 1px,transparent 1px 3px);opacity:.65;}
#public-main #b-diagram-infra-overview .io-rack span::after {content:'';position:absolute;right:5px;top:6px;width:3px;height:3px;border-radius:50%;background:var(--io-orange);box-shadow:0 5px 0 var(--io-blue);}
#public-main #b-diagram-infra-overview .io-rack span > i {position:absolute;left:5px;right:15px;bottom:4px;height:2px;border-top:1px solid var(--io-line);}
#public-main #b-diagram-infra-overview .io-rack-base {position:absolute;left:8px;right:7px;bottom:-5px;height:4px;border-left:4px solid var(--io-blue);border-right:4px solid var(--io-blue);}
#public-main #b-diagram-infra-overview .io-lenovo-mark {position:absolute;top:17px;left:-1px;width:4px;height:22px;background:var(--io-lenovo);}
#public-main #b-diagram-infra-overview .io-storage {position:absolute;right:0;bottom:12px;width:88px;height:32px;border:1px solid var(--io-blue);border-radius:3px;background:linear-gradient(140deg,var(--io-top),var(--io-device));padding:7px 6px;display:flex;gap:4px;box-shadow:0 7px 11px var(--io-shadow);}
#public-main #b-diagram-infra-overview .io-storage span {position:relative;flex:1;border:1px solid var(--io-blue);border-radius:1px;background:linear-gradient(90deg,var(--io-face),var(--io-top));}
#public-main #b-diagram-infra-overview .io-storage span::before {content:'';position:absolute;left:3px;top:2px;bottom:4px;border-left:1px solid var(--io-line);}
#public-main #b-diagram-infra-overview .io-storage span::after {content:'';position:absolute;right:2px;bottom:2px;width:2px;height:2px;background:var(--io-orange);}
#public-main #b-diagram-infra-overview .io-vm-row {position:absolute;top:9px;left:2px;right:2px;display:flex;gap:5px;align-items:center;}
#public-main #b-diagram-infra-overview .io-vm {position:relative;flex:1;height:31px;border:1px solid var(--io-blue);border-radius:3px;background:linear-gradient(140deg,var(--io-face),var(--io-top));box-shadow:2px -2px 0 var(--io-side);font-size:11px;line-height:29px;color:var(--io-text);}
#public-main #b-diagram-infra-overview .io-vm:nth-child(2) {transform:translateY(-5px);}
#public-main #b-diagram-infra-overview .io-pool {position:absolute;left:12px;right:12px;bottom:24px;height:35px;border:1px solid var(--io-blue);border-radius:3px;background:linear-gradient(140deg,var(--io-top),var(--io-device));display:flex;align-items:center;justify-content:center;gap:7px;padding:8px;box-shadow:0 5px 8px var(--io-shadow);}
#public-main #b-diagram-infra-overview .io-pool span {width:17px;height:11px;border:1px solid var(--io-blue);background:var(--io-face);}
#public-main #b-diagram-infra-overview .io-pool-copy {position:absolute;bottom:3px;left:0;right:0;font-size:11px;line-height:1.4;color:var(--io-muted);}
#public-main #b-diagram-infra-overview .io-data-assets {display:grid;grid-template-columns:minmax(0,1fr);gap:20px;}
#public-main #b-diagram-infra-overview .io-data-art {position:relative;width:126px;max-width:100%;height:90px;margin-inline:auto;display:flex;align-items:center;justify-content:center;}
#public-main #b-diagram-infra-overview .io-data-asset h4 {font-size:12px;line-height:1.6;font-weight:500;color:var(--io-text);margin-top:5px;}
#public-main #b-diagram-infra-overview .io-data-asset p {font-size:11px;line-height:1.7;color:var(--io-muted);margin-top:2px;}
#public-main #b-diagram-infra-overview .io-database {position:relative;width:51px;height:62px;border:1px solid var(--io-blue);border-top:0;border-radius:0 0 50% 50% / 0 0 9px 9px;background:linear-gradient(90deg,var(--io-device),var(--io-top),var(--io-device));box-shadow:0 5px 8px var(--io-shadow);}
#public-main #b-diagram-infra-overview .io-database::before {content:'';position:absolute;left:-1px;top:-8px;width:51px;height:16px;border:1px solid var(--io-blue);border-radius:50%;background:var(--io-face);}
#public-main #b-diagram-infra-overview .io-database span {position:absolute;left:-1px;right:-1px;height:14px;border-bottom:1px solid var(--io-blue);border-radius:0 0 50% 50%;}
#public-main #b-diagram-infra-overview .io-database span:first-child {top:12px;}
#public-main #b-diagram-infra-overview .io-database span:last-child {top:32px;}
#public-main #b-diagram-infra-overview .io-backup {position:relative;width:52px;height:62px;border:1px solid var(--io-blue);border-radius:4px;background:linear-gradient(140deg,var(--io-face),var(--io-device));box-shadow:0 5px 8px var(--io-shadow);display:flex;align-items:center;justify-content:center;}
#public-main #b-diagram-infra-overview .io-backup > svg {width:29px !important;height:29px !important;stroke:var(--io-blue);stroke-width:1.3;}
#public-main #b-diagram-infra-overview .io-node--data > .io-link {margin-top:12px;}
#public-main #b-diagram-infra-overview .io-legend {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 23px;max-width:760px;margin:25px auto 0;padding-top:16px;border-top:1px solid var(--io-line);font-size:11px;line-height:1.6;color:var(--io-muted);}
#public-main #b-diagram-infra-overview .io-legend span {display:flex;align-items:center;gap:7px;}
#public-main #b-diagram-infra-overview .io-swatch {display:inline-block;width:26px;border-top:1.6px solid var(--io-blue);}
#public-main #b-diagram-infra-overview .io-swatch--backup {border-color:var(--io-orange);border-top-style:dashed;}
@container infra-overview (max-width:620px) {
  #public-main #b-diagram-infra-overview .io-map {--io-mobile:1;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 20px;max-width:380px;align-items:start;}
  #public-main #b-diagram-infra-overview .io-node--network {grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:104px minmax(0,1fr);gap:0 12px;align-items:center;width:100%;max-width:330px;margin-inline:auto;text-align:left;}
  #public-main #b-diagram-infra-overview .io-node--network > .io-art {grid-column:1;grid-row:1/3;width:104px;height:94px;}
  #public-main #b-diagram-infra-overview .io-node--network > .io-link {grid-column:2;grid-row:1;justify-self:start;margin-top:0;align-self:end;}
  #public-main #b-diagram-infra-overview .io-node--network > .io-copy {grid-column:2;grid-row:2;align-self:start;}
  #public-main #b-diagram-infra-overview .io-network-equipment {width:103px;height:78px;}
  #public-main #b-diagram-infra-overview .io-switch {width:86px;}
  #public-main #b-diagram-infra-overview .io-switch > svg {left:32px;}
  #public-main #b-diagram-infra-overview .io-adc {right:2px;width:61px;}
  #public-main #b-diagram-infra-overview .io-node--compute {grid-column:1;grid-row:2;}
  #public-main #b-diagram-infra-overview .io-node--virtual {grid-column:2;grid-row:2;}
  #public-main #b-diagram-infra-overview .io-node--data {grid-column:1/-1;grid-row:3;}
  #public-main #b-diagram-infra-overview .io-art {width:132px;max-width:100%;height:104px;}
  #public-main #b-diagram-infra-overview .io-node--compute > .io-art {width:132px;height:104px;}
  #public-main #b-diagram-infra-overview .io-rack {left:6px;top:7px;width:66px;height:92px;padding:9px 7px 8px;gap:4px;}
  #public-main #b-diagram-infra-overview .io-rack span::before {left:4px;top:4px;width:calc(100% - 19px);height:4px;}
  #public-main #b-diagram-infra-overview .io-rack span::after {right:4px;top:4px;width:2px;height:2px;box-shadow:0 4px 0 var(--io-blue);}
  #public-main #b-diagram-infra-overview .io-rack span > i {left:4px;right:13px;bottom:3px;}
  #public-main #b-diagram-infra-overview .io-lenovo-mark {top:13px;height:18px;}
  #public-main #b-diagram-infra-overview .io-storage {width:78px;height:29px;bottom:6px;padding:6px 5px;gap:4px;}
  #public-main #b-diagram-infra-overview .io-vm-row {top:7px;}
  #public-main #b-diagram-infra-overview .io-pool {bottom:21px;height:30px;}
  #public-main #b-diagram-infra-overview .io-pool-copy {bottom:0;}
  #public-main #b-diagram-infra-overview .io-link {margin-top:7px;}
  #public-main #b-diagram-infra-overview .io-data-assets {grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
  #public-main #b-diagram-infra-overview .io-data-art {width:100%;height:78px;}
  #public-main #b-diagram-infra-overview .io-data-asset h4 {font-size:12px;}
  #public-main #b-diagram-infra-overview .io-copy {font-size:11px;margin-top:5px;}
  #public-main #b-diagram-infra-overview .io-copy-full {display:none;}
  #public-main #b-diagram-infra-overview .io-copy-compact {display:inline;}
  #public-main #b-diagram-infra-overview .io-node--compute .io-brand {font-size:11px;}
  #public-main #b-diagram-infra-overview .io-node--data > .io-link {margin-top:10px;}
  #public-main #b-diagram-infra-overview .io-node--data > .io-copy {max-width:none;}
  #public-main #b-diagram-infra-overview .io-legend {max-width:380px;margin-top:16px;padding-top:12px;}
}
@container infra-overview (max-width:330px) {
  #public-main #b-diagram-infra-overview .io-node--network {grid-template-columns:93px minmax(0,1fr);gap:0 8px;}
  #public-main #b-diagram-infra-overview .io-node--network > .io-art {width:93px;}
  #public-main #b-diagram-infra-overview .io-network-equipment {width:93px;}
  #public-main #b-diagram-infra-overview .io-switch {width:79px;}
  #public-main #b-diagram-infra-overview .io-switch > svg {left:28px;}
  #public-main #b-diagram-infra-overview .io-brand {font-size:11px;}
}