/* Diagnosis artwork only; the existing caption, figure spacing and products remain unchanged. */
#public-main #b-diagram-security-diagnosis {
  --vg-bg:#fff;--vg-text:#183850;--vg-muted:#496278;--vg-blue:#3c79a8;
  --vg-line:#c7d7e5;--vg-device:#d8e8f5;--vg-top:#edf6fd;--vg-side:#acc6dc;
  --vg-face:#fafdff;--vg-shadow:#234e741c;--vg-orange:#b66b32;
  container:security-diagnosis / inline-size;
}
html[data-theme="dark"] #public-main #b-diagram-security-diagnosis {
  --vg-bg:#070b12;--vg-text:#e4effb;--vg-muted:#aec2d6;--vg-blue:#8dbbe3;
  --vg-line:#34516a;--vg-device:#24435c;--vg-top:#3a5f7b;--vg-side:#1a344d;
  --vg-face:#173247;--vg-shadow:#0004;--vg-orange:#ffbb88;
}
#public-main #b-diagram-security-diagnosis .bv-illustration {width:100%;max-width:760px;min-width:0;margin:20px auto 0}
#public-main #b-diagram-security-diagnosis :is(.vg-map,.vg-labels,.vg-roles,.vg-wsc-note),
#public-main #b-diagram-security-diagnosis :is(.vg-map,.vg-labels,.vg-roles,.vg-wsc-note) * {box-sizing:border-box;min-width:0}
#public-main #b-diagram-security-diagnosis :is(.vg-map,.vg-labels,.vg-roles,.vg-wsc-note) {word-break:keep-all}
#public-main #b-diagram-security-diagnosis .vg-map {color:var(--vg-blue)}
#public-main #b-diagram-security-diagnosis .vg-map svg {display:block;max-width:none;margin:0;flex-shrink:0;stroke-linecap:round;stroke-linejoin:round}
#public-main #b-diagram-security-diagnosis .vg-icon {fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
#public-main #b-diagram-security-diagnosis .vg-labels > span {font:inherit;line-height:inherit;color:inherit;word-break:keep-all}
#public-main #b-diagram-security-diagnosis .vg-roles p {margin:0;padding:0;font:inherit;line-height:inherit;color:inherit;word-break:keep-all}
#public-main #b-diagram-security-diagnosis .vg-wsc-note h4,
#public-main #b-diagram-security-diagnosis .vg-wsc-note p {padding:0;max-width:none;width:auto;word-break:keep-all}
#public-main #b-diagram-security-diagnosis .vg-map {position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;width:100%;max-width:760px;margin-inline:auto;}
#public-main #b-diagram-security-diagnosis .vg-wires {position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1;pointer-events:none;}
#public-main #b-diagram-security-diagnosis .vg-wire {fill:none;stroke:var(--vg-blue);stroke-width:1.6;stroke-dasharray:4 5;stroke-linecap:round;}
#public-main #b-diagram-security-diagnosis .vg-node {position:relative;z-index:2;}
#public-main #b-diagram-security-diagnosis .vg-art {position:relative;display:flex;align-items:center;justify-content:center;height:150px;width:100%;}
#public-main #b-diagram-security-diagnosis .vg-browser {position:relative;width:110px;height:78px;border:1.5px solid var(--vg-blue);border-radius:5px;background:linear-gradient(140deg,var(--vg-face),var(--vg-top));box-shadow:4px -3px 0 var(--vg-side),0 5px 9px var(--vg-shadow);display:flex;align-items:center;justify-content:center;padding-top:14px;}
#public-main #b-diagram-security-diagnosis .vg-browser::before {content:'';position:absolute;left:0;right:0;top:0;height:14px;border-bottom:1px solid var(--vg-blue);border-radius:3px 3px 0 0;background:radial-gradient(circle at 7px 6px,var(--vg-orange) 1.3px,transparent 1.6px),radial-gradient(circle at 14px 6px,var(--vg-blue) 1.3px,transparent 1.6px),radial-gradient(circle at 21px 6px,var(--vg-blue) 1.3px,transparent 1.6px),var(--vg-device);}
#public-main #b-diagram-security-diagnosis .vg-browser > svg {width:34px !important;height:34px !important;stroke:var(--vg-blue);stroke-width:1.3;}
#public-main #b-diagram-security-diagnosis .vg-report {position:relative;width:72px;height:91px;border:1px solid var(--vg-blue);border-radius:4px;background:var(--vg-face);box-shadow:4px -3px 0 var(--vg-side),0 5px 9px var(--vg-shadow);}
#public-main #b-diagram-security-diagnosis .vg-report::before {content:'';position:absolute;top:16px;left:10px;width:28px;border-top:2px solid var(--vg-blue);box-shadow:0 15px 0 var(--vg-line),0 27px 0 var(--vg-line),0 39px 0 var(--vg-line);}
#public-main #b-diagram-security-diagnosis .vg-report-alert {position:absolute;top:9px;right:6px;display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--vg-orange);}
#public-main #b-diagram-security-diagnosis .vg-report-alert > svg {width:18px !important;height:18px !important;stroke-width:1.5;}
#public-main #b-diagram-security-diagnosis .vg-magnifier {position:absolute;right:-17px;bottom:-10px;background:var(--vg-face);border-radius:50%;padding:2px;display:flex;align-items:center;justify-content:center;}
#public-main #b-diagram-security-diagnosis .vg-magnifier > svg {width:51px !important;height:51px !important;stroke:var(--vg-blue);stroke-width:1.4;}
#public-main #b-diagram-security-diagnosis .vg-equipment {position:relative;width:118px;height:112px;}
#public-main #b-diagram-security-diagnosis .vg-rack {position:absolute;left:18px;top:6px;width:61px;height:100px;border:1px solid var(--vg-blue);border-radius:3px;background:linear-gradient(100deg,var(--vg-top),var(--vg-device));padding:9px 6px;display:grid;gap:7px;box-shadow:0 5px 9px var(--vg-shadow);}
#public-main #b-diagram-security-diagnosis .vg-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(--vg-top),var(--vg-side));}
#public-main #b-diagram-security-diagnosis .vg-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(--vg-side);}
#public-main #b-diagram-security-diagnosis .vg-rack span {position:relative;border:1px solid var(--vg-blue);background:var(--vg-face);border-radius:1px;}
#public-main #b-diagram-security-diagnosis .vg-rack span::before {content:'';position:absolute;left:5px;top:6px;width:22px;border-top:1px solid var(--vg-blue);box-shadow:0 4px 0 var(--vg-line);}
#public-main #b-diagram-security-diagnosis .vg-rack span::after {content:'';position:absolute;right:5px;top:6px;width:3px;height:3px;border-radius:50%;background:var(--vg-orange);}
#public-main #b-diagram-security-diagnosis .vg-database {position:absolute;right:4px;bottom:1px;width:37px;height:43px;border:1px solid var(--vg-blue);border-top:0;border-radius:0 0 50% 50% / 0 0 7px 7px;background:linear-gradient(90deg,var(--vg-device),var(--vg-top),var(--vg-device));box-shadow:0 4px 8px var(--vg-shadow);}
#public-main #b-diagram-security-diagnosis .vg-database::before {content:'';position:absolute;left:-1px;top:-6px;width:37px;height:12px;border:1px solid var(--vg-blue);border-radius:50%;background:var(--vg-face);}
#public-main #b-diagram-security-diagnosis .vg-database span {position:absolute;left:-1px;right:-1px;height:11px;border-bottom:1px solid var(--vg-blue);border-radius:0 0 50% 50%;}
#public-main #b-diagram-security-diagnosis .vg-database span:first-child {top:10px;}
#public-main #b-diagram-security-diagnosis .vg-database span:last-child {top:25px;}
#public-main #b-diagram-security-diagnosis .vg-labels,#public-main #b-diagram-security-diagnosis .vg-roles {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;width:100%;max-width:760px;margin-inline:auto;text-align:center;}
#public-main #b-diagram-security-diagnosis .vg-labels {font-size:14px;line-height:1.6;font-weight:650;color:var(--vg-text);margin:8px auto 0;}
#public-main #b-diagram-security-diagnosis .vg-roles {font-size:12px;line-height:1.7;color:var(--vg-muted);margin:7px auto 0;}
#public-main #b-diagram-security-diagnosis .vg-wsc-note {display:flex;justify-content:center;align-items:center;gap:9px;max-width:520px;margin:22px auto 0;text-align:left;}
#public-main #b-diagram-security-diagnosis .vg-wsc-note > svg {width:25px !important;height:25px !important;flex-shrink:0;stroke:var(--vg-blue);stroke-width:1.35;}
#public-main #b-diagram-security-diagnosis .vg-wsc-note h4 {margin:0;font-size:14px;line-height:1.6;font-weight:650;color:var(--vg-text);}
#public-main #b-diagram-security-diagnosis .vg-wsc-note p {margin:3px 0 0;font-size:12px;line-height:1.7;color:var(--vg-muted);}
@container security-diagnosis (max-width:520px) {
  #public-main #b-diagram-security-diagnosis .vg-map,#public-main #b-diagram-security-diagnosis .vg-labels,#public-main #b-diagram-security-diagnosis .vg-roles {gap:14px;}
  #public-main #b-diagram-security-diagnosis .vg-art {height:102px;}
  #public-main #b-diagram-security-diagnosis .vg-browser {width:62px;max-width:calc(100% - 5px);height:49px;padding-top:12px;}
  #public-main #b-diagram-security-diagnosis .vg-browser::before {height:12px;}
  #public-main #b-diagram-security-diagnosis .vg-browser > svg {width:26px !important;height:26px !important;}
  #public-main #b-diagram-security-diagnosis .vg-report {width:46px;height:65px;}
  #public-main #b-diagram-security-diagnosis .vg-report::before {left:7px;top:13px;width:18px;border-top-width:1px;box-shadow:0 13px 0 var(--vg-line),0 24px 0 var(--vg-line),0 35px 0 var(--vg-line);}
  #public-main #b-diagram-security-diagnosis .vg-report-alert {width:14px;height:14px;top:5px;right:3px;}
  #public-main #b-diagram-security-diagnosis .vg-report-alert > svg {width:13px !important;height:13px !important;}
  #public-main #b-diagram-security-diagnosis .vg-magnifier {right:-12px;bottom:-8px;}
  #public-main #b-diagram-security-diagnosis .vg-magnifier > svg {width:33px !important;height:33px !important;}
  #public-main #b-diagram-security-diagnosis .vg-equipment {width:76px;max-width:100%;height:80px;}
  #public-main #b-diagram-security-diagnosis .vg-rack {left:8px;top:7px;width:39px;height:65px;padding:6px 4px;gap:5px;}
  #public-main #b-diagram-security-diagnosis .vg-rack span::before {left:3px;top:4px;width:12px;box-shadow:0 3px 0 var(--vg-line);}
  #public-main #b-diagram-security-diagnosis .vg-rack span::after {right:3px;top:4px;width:2px;height:2px;}
  #public-main #b-diagram-security-diagnosis .vg-database {right:2px;bottom:2px;width:25px;height:31px;}
  #public-main #b-diagram-security-diagnosis .vg-database::before {width:25px;height:10px;top:-5px;}
  #public-main #b-diagram-security-diagnosis .vg-database span {height:8px;}
  #public-main #b-diagram-security-diagnosis .vg-database span:first-child {top:7px;}
  #public-main #b-diagram-security-diagnosis .vg-database span:last-child {top:18px;}
  #public-main #b-diagram-security-diagnosis .vg-labels {font-size:13px;}
  #public-main #b-diagram-security-diagnosis .vg-wsc-note {gap:7px;margin-top:18px;}
  #public-main #b-diagram-security-diagnosis .vg-wsc-note > svg {width:22px !important;height:22px !important;}
  #public-main #b-diagram-security-diagnosis .vg-wsc-note h4 {font-size:13px;}
}
@container security-diagnosis (max-width:300px) {
  #public-main #b-diagram-security-diagnosis .vg-labels {font-size:11px;}
}

@container security-diagnosis (max-width:300px) {
  #public-main #b-diagram-security-diagnosis .vg-roles,
  #public-main #b-diagram-security-diagnosis .vg-wsc-note p {font-size:11px}
}