/* Cloud adoption illustration; original stage controls and product disclosures are retained. */
#public-main #b-diagram-cloud-adoption {
  --co-bg:#fff;--co-text:#183850;--co-muted:#496278;--co-blue:#3c79a8;--co-line:#c7d7e5;
  --co-device:#d8e8f5;--co-top:#edf6fd;--co-side:#acc6dc;--co-face:#fafdff;
  --co-shadow:#234e741c;--co-orange:#a95119;
  --co-pill-bg:#fff;--co-pill-line:#bdd3ec;--co-pill-active:#edf6fd;
  color:var(--co-text);font-size:14px;line-height:1.65;font-weight:400;
}
html[data-theme="dark"] #public-main #b-diagram-cloud-adoption {
  --co-bg:#070b12;--co-text:#e4effb;--co-muted:#aec2d6;--co-blue:#8dbbe3;--co-line:#34516a;
  --co-device:#24435c;--co-top:#3a5f7b;--co-side:#1a344d;--co-face:#173247;
  --co-shadow:#0004;--co-orange:#ffbb88;
  --co-pill-bg:#102337;--co-pill-line:#345676;--co-pill-active:#1c3855;
}
#public-main #b-diagram-cloud-adoption * {box-sizing:border-box;min-width:0;}
#public-main #b-diagram-cloud-adoption .co-responsive :where(h4,p) {margin:0;font-weight:400;word-break:keep-all;}
#public-main #b-diagram-cloud-adoption .co-responsive {width:100%;margin-inline:auto;container:cloud-adoption / inline-size;}
#public-main #b-diagram-cloud-adoption .co-map {position:relative;display:grid;grid-template-columns:148px minmax(0,1fr);gap:94px;align-items:center;max-width:760px;margin:35px auto 0;--co-mobile:0;}
#public-main #b-diagram-cloud-adoption .co-wires {position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1;}
#public-main #b-diagram-cloud-adoption .co-wire {fill:none;stroke:var(--co-blue);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;}
#public-main #b-diagram-cloud-adoption .co-wire--system {stroke-dasharray:3 4;}
#public-main #b-diagram-cloud-adoption .co-wire--data {stroke:var(--co-orange);}
#public-main #b-diagram-cloud-adoption .co-wire--resource {stroke:var(--co-line);stroke-width:1.2;}
#public-main #b-diagram-cloud-adoption .co-route-label {position:absolute;z-index:3;transform:translate(-50%,-50%);font-size:11px;line-height:1.5;white-space:nowrap;color:var(--co-muted);}
#public-main #b-diagram-cloud-adoption .co-route-label--data {color:var(--co-orange);}
#public-main #b-diagram-cloud-adoption .co-current {position:relative;z-index:2;text-align:center;}
#public-main #b-diagram-cloud-adoption .co-current h4 {font-size:14px;line-height:1.6;font-weight:500;}
#public-main #b-diagram-cloud-adoption .co-current p {font-size:11px;line-height:1.7;color:var(--co-muted);margin-top:4px;}
#public-main #b-diagram-cloud-adoption .co-current-art {position:relative;height:192px;max-width:250px;margin:24px auto 0;}
#public-main #b-diagram-cloud-adoption .co-depth::before {content:'';position:absolute;top:-6px;left:-1px;width:calc(100% + 7px);height:6px;clip-path:polygon(0 100%,12% 0,100% 0,88% 100%);background:linear-gradient(160deg,var(--co-top),var(--co-side));}
#public-main #b-diagram-cloud-adoption .co-depth::after {content:'';position:absolute;left:calc(100% - 1px);top:-6px;width:7px;height:calc(100% + 6px);clip-path:polygon(0 6px,100% 0,100% calc(100% - 6px),0 100%);background:var(--co-side);}
#public-main #b-diagram-cloud-adoption .co-rack {position:absolute;left:8px;top:0;width:70px;height:126px;border:1px solid var(--co-blue);border-radius:3px;background:linear-gradient(110deg,var(--co-top),var(--co-device));padding:10px 7px;display:grid;grid-template-rows:repeat(4,minmax(0,1fr));gap:5px;box-shadow:0 7px 11px var(--co-shadow);}
#public-main #b-diagram-cloud-adoption .co-rack > span {position:relative;border:1px solid var(--co-blue);border-radius:1px;background:var(--co-face);}
#public-main #b-diagram-cloud-adoption .co-rack > span::before {content:'';position:absolute;left:5px;top:5px;width:calc(100% - 19px);height:5px;background:repeating-linear-gradient(90deg,var(--co-blue) 0 1px,transparent 1px 3px);opacity:.65;}
#public-main #b-diagram-cloud-adoption .co-rack > span::after {content:'';position:absolute;right:4px;top:6px;width:3px;height:3px;border-radius:50%;background:var(--co-orange);}
#public-main #b-diagram-cloud-adoption .co-db {position:relative;width:50px;height:50px;border-inline:1px solid var(--co-blue);background:linear-gradient(100deg,var(--co-top),var(--co-device));box-shadow:0 5px 9px var(--co-shadow);}
#public-main #b-diagram-cloud-adoption .co-db::before {content:'';position:absolute;left:-1px;top:-7px;width:50px;height:14px;border:1px solid var(--co-blue);border-radius:50%;background:linear-gradient(130deg,var(--co-face),var(--co-top));z-index:1;}
#public-main #b-diagram-cloud-adoption .co-db::after {content:'';position:absolute;left:-1px;bottom:-6px;width:50px;height:13px;border:1px solid var(--co-blue);border-top-color:var(--co-line);border-radius:0 0 50% 50%;background:var(--co-device);}
#public-main #b-diagram-cloud-adoption .co-db > i {position:absolute;left:0;right:0;top:12px;height:14px;border-bottom:1px solid var(--co-blue);border-radius:0 0 50% 50%;}
#public-main #b-diagram-cloud-adoption .co-db > i + i {top:29px;}
#public-main #b-diagram-cloud-adoption .co-current-db {position:absolute;right:7px;top:125px;}
#public-main #b-diagram-cloud-adoption .co-cloud {position:relative;z-index:2;}
#public-main #b-diagram-cloud-adoption .co-cloud-title {display:flex;align-items:center;justify-content:center;gap:9px;}
#public-main #b-diagram-cloud-adoption .co-cloud-title > svg {width:30px !important;height:30px !important;stroke:var(--co-blue);stroke-width:1.2;flex-shrink:0;}
#public-main #b-diagram-cloud-adoption .co-cloud h4 {font-size:14px;line-height:1.6;font-weight:500;text-align:center;}
#public-main #b-diagram-cloud-adoption .co-environment-note {font-size:11px;line-height:1.7;color:var(--co-muted);text-align:center;margin-top:3px;}
#public-main #b-diagram-cloud-adoption .co-cloud-frame {position:relative;padding:19px 14px 15px;border:1px solid var(--co-line);border-radius:5px;}
#public-main #b-diagram-cloud-adoption .co-boundary-port {position:absolute;width:5px;height:5px;border:1px solid var(--co-blue);border-radius:50%;background:var(--co-bg);left:-3px;}
#public-main #b-diagram-cloud-adoption .co-boundary-port--data {border-color:var(--co-orange);}
#public-main #b-diagram-cloud-adoption .co-workloads {position:relative;z-index:2;margin-top:19px;}
#public-main #b-diagram-cloud-adoption .co-workloads > h4 {font-size:12px;line-height:1.5;font-weight:500;margin-bottom:10px;}
#public-main #b-diagram-cloud-adoption .co-service-art {display:flex;justify-content:center;gap:8px;width:160px;max-width:100%;height:37px;margin-inline:auto;}
#public-main #b-diagram-cloud-adoption .co-service {position:relative;flex:1;border:1px solid var(--co-blue);border-radius:2px;background:linear-gradient(140deg,var(--co-face),var(--co-top));display:flex;align-items:center;justify-content:center;padding-top:7px;}
#public-main #b-diagram-cloud-adoption .co-service::before {content:'';position:absolute;left:0;right:0;top:7px;border-top:1px solid var(--co-line);}
#public-main #b-diagram-cloud-adoption .co-service > svg {width:19px !important;height:19px !important;stroke:var(--co-blue);stroke-width:1.2;}
#public-main #b-diagram-cloud-adoption .co-service > span {font-size:11px;line-height:1.4;}
#public-main #b-diagram-cloud-adoption .co-resource-grid {position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:35px;}
#public-main #b-diagram-cloud-adoption .co-resource {text-align:center;}
#public-main #b-diagram-cloud-adoption .co-resource-art {height:57px;display:flex;align-items:center;justify-content:center;}
#public-main #b-diagram-cloud-adoption .co-resource h4 {font-size:11px;line-height:1.6;font-weight:400;}
#public-main #b-diagram-cloud-adoption .co-resource h4 span {display:block;}
#public-main #b-diagram-cloud-adoption .co-compute {position:relative;width:52px;height:39px;transform:translateX(-3px);border:1px solid var(--co-blue);border-radius:2px;background:linear-gradient(110deg,var(--co-top),var(--co-device));padding:6px;display:flex;flex-direction:column;gap:4px;box-shadow:0 5px 9px var(--co-shadow);}
#public-main #b-diagram-cloud-adoption .co-compute > span {position:relative;flex:1;border:1px solid var(--co-blue);background:var(--co-face);}
#public-main #b-diagram-cloud-adoption .co-compute > span::after {content:'';position:absolute;right:3px;top:3px;width:2px;height:2px;background:var(--co-orange);}
#public-main #b-diagram-cloud-adoption .co-network {position:relative;width:53px;height:27px;transform:translateX(-3px);border:1px solid var(--co-blue);border-radius:2px;background:linear-gradient(140deg,var(--co-top),var(--co-device));display:flex;align-items:center;justify-content:center;gap:3px;box-shadow:0 5px 9px var(--co-shadow);}
#public-main #b-diagram-cloud-adoption .co-network > i {display:block;width:6px;height:6px;border:1px solid var(--co-blue);background:var(--co-face);}
#public-main #b-diagram-cloud-adoption .co-resource-db {width:45px;height:38px;}
#public-main #b-diagram-cloud-adoption .co-resource-db::before,#public-main #b-diagram-cloud-adoption .co-resource-db::after {width:45px;}
#public-main #b-diagram-cloud-adoption .co-resource-db > i {top:5px;}
#public-main #b-diagram-cloud-adoption .co-resource-db > i + i {top:19px;}
#public-main #b-diagram-cloud-adoption .co-security {display:flex;align-items:center;justify-content:center;gap:6px;margin-top:18px;padding-top:12px;border-top:1px solid var(--co-line);font-size:11px;line-height:1.7;color:var(--co-muted);text-align:center;}
#public-main #b-diagram-cloud-adoption .co-security > svg {width:17px !important;height:17px !important;stroke:var(--co-blue);stroke-width:1.2;flex-shrink:0;}
#public-main #b-diagram-cloud-adoption .co-legend {display:flex;align-items:center;justify-content:center;gap:10px 22px;flex-wrap:wrap;margin:25px auto 0;font-size:11px;line-height:1.7;color:var(--co-muted);}
#public-main #b-diagram-cloud-adoption .co-legend > span {display:flex;align-items:center;gap:7px;}
#public-main #b-diagram-cloud-adoption .co-swatch {display:block;width:23px;border-top:1.5px solid var(--co-orange);}
#public-main #b-diagram-cloud-adoption .co-swatch--system {border-top:1.5px dashed var(--co-blue);}
#public-main #b-diagram-cloud-adoption .cv-stage-nav {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:760px;margin:24px auto 0;}
#public-main #b-diagram-cloud-adoption .cv-stage-nav button {display:flex;align-items:center;justify-content:center;gap:7px;max-width:100%;min-height:44px;padding:9px 11px;border:1px solid var(--co-pill-line);border-radius:999px;background:var(--co-pill-bg);color:var(--co-text);font-family:inherit;font-size:12px;line-height:1.6;font-weight:500;white-space:nowrap;}
#public-main #b-diagram-cloud-adoption .cv-stage-nav button::before {content:'';display:block;width:5px;height:5px;flex-shrink:0;border-radius:50%;background:var(--co-orange);box-shadow:0 0 0 4px color-mix(in srgb,var(--co-orange) 8%,transparent);}
#public-main #b-diagram-cloud-adoption .cv-stage-nav button small {font-size:11px;line-height:1.5;color:var(--co-muted);font-weight:400;}
#public-main #b-diagram-cloud-adoption .cv-stage-nav button[aria-pressed="true"] {border-color:var(--co-blue);background:var(--co-pill-active);}
#public-main #b-diagram-cloud-adoption .cv-stage-nav button:hover {border-color:var(--co-blue);}
#public-main #b-diagram-cloud-adoption .cv-scene-detail {max-width:760px;min-height:44px;margin:15px auto 0;font-size:12px;line-height:1.85;color:var(--co-muted);text-align:center;}
#public-main #b-diagram-cloud-adoption .cv-scene-detail[hidden] {display:none;}
#public-main #b-diagram-cloud-adoption[data-active="assess"] .co-current-art {filter:drop-shadow(0 2px 5px var(--co-shadow));}
#public-main #b-diagram-cloud-adoption[data-active="design"] .co-cloud-frame {border-color:var(--co-blue);}
#public-main #b-diagram-cloud-adoption[data-active="migrate"] .co-wire--data {stroke-width:2.2;}
#public-main #b-diagram-cloud-adoption[data-active="handover"] .co-security {color:var(--co-text);}
@container cloud-adoption (max-width:620px) {
  #public-main #b-diagram-cloud-adoption .co-map {grid-template-columns:minmax(0,1fr);gap:88px;max-width:380px;margin-top:26px;--co-mobile:1;}
  #public-main #b-diagram-cloud-adoption .co-current-art {height:122px;margin-top:23px;width:100%;}
  #public-main #b-diagram-cloud-adoption .co-rack {left:calc(25% - 31px);width:62px;height:104px;top:8px;padding:8px 6px;gap:4px;}
  #public-main #b-diagram-cloud-adoption .co-rack > span::before {left:4px;top:4px;width:calc(100% - 17px);}
  #public-main #b-diagram-cloud-adoption .co-rack > span::after {right:3px;top:5px;width:2px;height:2px;}
  #public-main #b-diagram-cloud-adoption .co-current-db {left:calc(75% - 25px);right:auto;top:57px;}
  #public-main #b-diagram-cloud-adoption .co-cloud h4,#public-main #b-diagram-cloud-adoption .co-current h4 {font-size:13px;}
  #public-main #b-diagram-cloud-adoption .co-cloud-frame {padding:18px 11px 14px;}
  #public-main #b-diagram-cloud-adoption .co-cloud-title {gap:7px;}
  #public-main #b-diagram-cloud-adoption .co-cloud-title > svg {width:26px !important;height:26px !important;}
  #public-main #b-diagram-cloud-adoption .co-workloads > h4 {font-size:12px;}
  #public-main #b-diagram-cloud-adoption .co-resource-grid {gap:6px;margin-top:32px;}
  #public-main #b-diagram-cloud-adoption .co-resource h4 {font-size:11px;}
  #public-main #b-diagram-cloud-adoption .co-security {align-items:center;max-width:270px;margin-inline:auto;}
  #public-main #b-diagram-cloud-adoption .co-legend {margin-top:21px;}
  #public-main #b-diagram-cloud-adoption .cv-stage-nav {grid-template-columns:repeat(2,minmax(0,1fr));max-width:380px;margin-top:21px;gap:9px;}
  #public-main #b-diagram-cloud-adoption .cv-scene-detail {max-width:380px;text-align:left;min-height:68px;}
}
@container cloud-adoption (max-width:300px) {
  #public-main #b-diagram-cloud-adoption .cv-stage-nav button {padding-inline:8px;font-size:11px;gap:6px;}
  #public-main #b-diagram-cloud-adoption .co-security {font-size:11px;}
}
#public-main #b-diagram-cloud-adoption .cv-stage-nav {border:0;}
#public-main #b-diagram-cloud-adoption .cv-stage-nav button::before {position:static;left:auto;top:auto;}
#public-main #b-diagram-cloud-adoption .cv-stage-nav button span {font:inherit;color:inherit;letter-spacing:0;}
#public-main #b-diagram-cloud-adoption .cv-stage-nav button small {margin:0;}
#public-main #b-diagram-cloud-adoption .cv-scene-panels {margin:0;max-width:none;min-height:0;}
#public-main #b-diagram-cloud-adoption .cv-scene-detail {width:100%;}
#public-main #b-diagram-cloud-adoption .co-environment-note {width:100%;max-width:none;}