/* Page 11: user experience, cloud platform, then the underlying compute. */
#page-canvas-11[lang^="zh"] .cloud-platform-layer h3 { white-space: nowrap; }
#page-canvas-11[lang^="zh"] .cloud-platform-layer h3 br { display: none; }
.cloud-services-layout.platform-services-v2 {
  --platform-lower-height: clamp(172px, 12vw, 232px);
  --platform-layer-height: clamp(76px, 5.2vw, 98px);
  column-gap: clamp(22px, 1.8vw, 34px);
  /* Keep the original 70px footer track, row gap and outer geometry. */
}

.platform-service {
  display: grid;
  position: relative;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto minmax(70px, 1fr) var(--platform-layer-height) var(--platform-lower-height) 28px;
  gap: 6px;
  padding: clamp(12px, 1vw, 18px);
  border: 1px solid #d9e8fb;
  border-radius: clamp(19px, 1.5vw, 27px);
  background: radial-gradient(ellipse at 25% 48%, #dceeff80, transparent 65%), linear-gradient(155deg, #fbfdff, #f1f7ff);
  box-shadow: inset 0 1px 0 #fff, 0 5px 0 #d9e6f530, 0 12px 26px #456c9e08;
}
.platform-service-api {
  border-color: #e5dcfa;
  background: radial-gradient(ellipse at 70% 55%, #e8defe80, transparent 65%), linear-gradient(155deg, #fdfcff, #f6f2ff);
  box-shadow: inset 0 1px 0 #fff, 0 5px 0 #e8ddf630, 0 12px 26px #75609e08;
}
.platform-service-header {
  display: grid;
  min-width: 0;
  min-height: 100px;
  grid-template-columns: clamp(38px, 3vw, 54px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(11px, 1vw, 18px);
}
.platform-service-header h2 {
  margin: 0 0 6px;
  color: #173d79;
  font-size: clamp(22px, 1.7vw, 30px);
  font-weight: 750;
  letter-spacing: -.45px;
  line-height: 1.15;
}
.platform-service-api .platform-service-header h2 { color: #4e3284; }
.platform-service-header p {
  margin: 0;
  color: #6b819f;
  font-size: clamp(12px, .92vw, 16px);
  line-height: 1.45;
}
.platform-service-icon {
  display: grid;
  width: clamp(38px, 3vw, 54px);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid #a9d1fb;
  border-radius: 13px;
  background: linear-gradient(145deg, #92d9ff, #347ced 72%, #3a64d8);
  box-shadow: inset 0 1px 2px #fff9, 0 5px 9px #417ac728;
  color: #fff;
}
.platform-service-api .platform-service-icon {
  border-color: #ceb8f3;
  background: linear-gradient(145deg, #d5b9ff, #9466dc 68%, #6846ae);
  box-shadow: inset 0 1px 2px #fff9, 0 5px 9px #8060b928;
}
.platform-service-icon svg { width: 62%; height: 62%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.platform-user-scene {
  position: relative;
  min-height: 0;
  margin: 0 6%;
  overflow: hidden;
  border: 1px solid #e0eaf5;
  border-radius: 13px;
  background: #eaf3fd;
  box-shadow: 0 5px 10px #4663860d;
}
.platform-user-scene > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.platform-user-api { border-color: #e4ddf3; }
.platform-user-api > img { object-position: 50% 37%; }
.platform-vm-task-tags {
  display: grid;
  position: absolute;
  right: 24px;
  bottom: 22px;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
  transform: perspective(700px) rotateY(-12deg) rotateZ(3deg);
  transform-origin: center center;
}
.platform-vm-task-row { display: flex; align-items: center; gap: 7px; }
.platform-vm-task-row > span {
  display: flex;
  flex: none;
  width: max-content;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid #c5dff8;
  border-radius: 7px;
  background: linear-gradient(145deg, #fffffff5, #e7f2fff0);
  box-shadow: inset 0 1px 1px #fff, inset 0 -1px 0 #b2cfeb88, 0 3px 0 #8cb1d799, 0 8px 13px #173f6f30;
  color: #2e5c8c;
  font-size: clamp(11px, calc(.7vw + 1px), 13px);
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
}
.platform-vm-task-row > span::before { content: ""; flex: 0 0 4px; width: 4px; height: 4px; border-radius: 50%; background: #68a8e5; box-shadow: 0 0 0 2px #68a8e51a; }

#page-canvas-11[lang^="zh"] { font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif; }
#page-canvas-11[lang^="zh"] .platform-vm-instance strong { font-size: clamp(10px, .84vw, 15px); }
.platform-api-flow {
  display: grid;
  position: absolute;
  right: 10px;
  bottom: 8px;
  left: 10px;
  grid-template-columns: minmax(0, 1fr) 20px minmax(max-content, 1.2fr) 20px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #e5dcf8a6;
  border-radius: 9px;
  background: linear-gradient(180deg, #ffffffd9, #f1ecfad1);
  box-shadow: inset 0 1px 0 #ffffffe6, inset 0 -1px 0 #a291bc40, 0 3px 0 #b3a3cd4d, 0 6px 12px #42306424;
  text-align: center;
}
.platform-api-flow > span { display: grid; gap: 2px; }
.platform-api-flow strong { color: #54427e; font-size: clamp(11px, .85vw, 15px); font-weight: 700; line-height: 1.1; }
.platform-api-flow small { justify-self: center; padding: 2px 6px; border: 1px solid #d6cbe8; border-radius: 4px; background: #f7f4ff; box-shadow: inset 0 1px 0 #fff, 0 1px 2px #34224c14; color: #51465f; font-size: clamp(9px, .67vw, 12px); font-weight: 600; line-height: 1.1; white-space: nowrap; }
.platform-api-flow > i { display: block; position: relative; height: 1px; background: #b7a4de; }
.platform-api-flow > i::after { position: absolute; top: -2px; right: 0; width: 5px; height: 5px; transform: rotate(-45deg); border-right: 1px solid #b7a4de; border-bottom: 1px solid #b7a4de; content: ""; }
.platform-api-model { padding: 5px; border-radius: 6px; background: linear-gradient(180deg, #d3c3ed, #bca6df); box-shadow: inset 0 1px 0 #f5ecff, inset 0 0 0 1px #a18acb66, 0 2px 3px #76619229; }
.platform-api-model strong { color: #3e2867; white-space: nowrap; }

.cloud-platform-layer {
  display: grid;
  position: relative;
  z-index: 1;
  min-height: 0;
  grid-template-columns: 24% 25% 47%;
  align-items: center;
  padding-bottom: 10px;
  isolation: isolate;
}
.cloud-platform-layer::before,
.cloud-platform-layer::after {
  position: absolute;
  z-index: -2;
  left: calc(50% - 3px);
  width: 6px;
  height: 16px;
  background: linear-gradient(90deg, #c6eaff11, #6dc9f5aa, #c6eaff11);
  box-shadow: 0 0 8px #6dc9f529;
  content: "";
}
.cloud-platform-layer::before { top: -11px; }
.cloud-platform-layer::after { bottom: -10px; }
.platform-purple::before, .platform-purple::after { background: linear-gradient(90deg, #eadbff11, #ad88ee99, #eadbff11); box-shadow: 0 0 8px #b39ae229; }
/* One shared platform/cloud silhouette keeps every edge and icon identical. */
.cloud-platform-layer { --slab-x: 22; --slab-y: 208; --slab-width: 2128; --slab-height: 319; }
.cloud-platform-slab { position: absolute; z-index: -1; top: calc(8% - 88% * var(--slab-y) / var(--slab-height)); left: calc(-100% * var(--slab-x) / var(--slab-width)); width: calc(100% * 2172 / var(--slab-width)); height: calc(88% * 724 / var(--slab-height)); object-fit: fill; pointer-events: none; }
.platform-purple .cloud-platform-slab { filter: hue-rotate(45deg) saturate(.9); }
.cloud-platform-layer h3 { grid-column: 2; margin: 0; color: #fff; font-family: inherit; font-size: clamp(15px, calc(1.55vw - 4px), 24px); font-style: normal; font-weight: 750; letter-spacing: -.6px; line-height: .98; text-shadow: 0 1px 3px #12386c66; }
.cloud-platform-functions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 4px; }
.cloud-platform-functions > div { display: grid; min-width: 0; justify-items: center; gap: 4px; padding: 0 3px; border-left: 1px solid #e4f2ff50; }
.cloud-platform-functions svg { width: clamp(24px, 1.9vw, 34px); height: clamp(24px, 1.9vw, 34px); overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 1px #15357755) drop-shadow(0 0 3px #9be5ff44); }
.platform-purple .cloud-platform-functions svg { filter: hue-rotate(45deg) drop-shadow(0 2px 1px #30206255) drop-shadow(0 0 3px #d7bdff44); }
.function-icon-face { fill: url(#platform-icon-surface); stroke: #e6f7ff; stroke-width: .9; }
.function-icon-side { fill: url(#platform-icon-edge); stroke: #a0d7ff; stroke-width: .8; }
.function-icon-detail { fill: none; stroke: #fff; stroke-width: 1.7; }
.function-icon-dark-detail { fill: none; stroke: #32639c; stroke-width: 1.7; }
.function-icon-pins { stroke: #d7f1ff; stroke-width: 1.8; }
.function-icon-badge { fill: #2677d7; stroke: #d9f6ff; stroke-width: 1; }
.function-icon-knob { fill: #f2fcff; stroke: #497fb6; stroke-width: 1.2; }
.function-icon-light { fill: #d6ffff; }
.function-icon-core { fill: #2875cf; stroke: #f1fcff; stroke-width: 1.2; }
.function-icon-upload { fill: none; stroke: #e6ffff; stroke-width: 2.4; }
.cloud-platform-functions span { color: #f1f6ff; font-size: clamp(11px, calc(.7vw + 2px), 14px); font-weight: 600; line-height: 1.1; text-align: center; white-space: nowrap; text-shadow: 0 1px 2px #23387844; }

.platform-vm-architecture {
  display: grid;
  min-height: 0;
  grid-template-rows: 55px 36px minmax(34px, 1fr);
  gap: 6px;
  margin: 0 6%;
}
.platform-service-vm > .platform-vm-architecture { grid-row: 4 / -1; }
.platform-vm-guests { display: grid; position: relative; z-index: 2; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.platform-vm-instance { display: grid; position: relative; min-width: 0; grid-template-columns: 24px minmax(0, 1fr); align-items: center; justify-content: center; gap: 7px; padding: 7px 9px; border: 1px solid #bed9f4; border-radius: 10px; background: linear-gradient(145deg, #ffffffed, #e6f2ffba); box-shadow: inset 0 1px #fff, inset 0 -2px #c9e1f750, 0 3px 0 #d4e5f480, 0 6px 12px #5b81b518; }
.platform-vm-instance::after { content: ""; position: absolute; left: 50%; bottom: -8px; height: 7px; border-left: 1px dashed #8db9e5; }
.platform-vm-instance:nth-child(even) { border-color: #ced8f5; background: linear-gradient(145deg, #ffffffed, #edf0ffba); }
.platform-vm-instance > svg { width: 24px; height: 24px; fill: none; stroke: #6098d9; stroke-width: 1.5; stroke-linecap: round; }
.platform-vm-instance > div { display: grid; gap: 2px; }
.platform-vm-instance strong { color: #2c578f; font-size: clamp(13px, .98vw, 18px); font-weight: 750; line-height: 1.1; white-space: nowrap; }
.platform-virtualization { display: grid; position: relative; isolation: isolate; place-items: center; border: 1px solid #a9cff0; border-top-color: #c5e3ff; border-radius: 10px; background: linear-gradient(110deg, #d0eaff78, #f5fbffb3 46%, #dfddfb78); color: #426ca2; font-size: clamp(10px, .76vw, 13px); font-weight: 700; line-height: 1.1; box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #b0d7f45c, 0 3px 0 #c6dff071, 0 6px 15px #6b9de31a; }
.platform-virtualization::before { content: ""; position: absolute; z-index: -1; inset: 2px 10px; border-radius: 8px; background-image: linear-gradient(#83b9e52b 1px, transparent 1px), linear-gradient(90deg, #83b9e52b 1px, transparent 1px); background-size: 22px 10px; transform: perspective(140px) rotateX(28deg); mask-image: linear-gradient(90deg, #000, #0003 40%, #0003 60%, #000); }
.platform-virtualization::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -5px; height: 1px; background: linear-gradient(90deg, transparent, #6eb8ed99, #a4a0e899, transparent); box-shadow: 0 1px 7px #6caaf180; }
.platform-virtualization-label { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border: 1px solid #ffffffa6; border-radius: 7px; background: #f7fbffd9; text-shadow: 0 1px #fff; }
.platform-virtualization-label > svg { width: 18px; height: 18px; fill: none; stroke: #6196ce; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.platform-physical-host { display: grid; position: relative; min-width: 0; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(26px, 1fr) auto; align-items: center; justify-items: center; gap: 4px; padding-top: 22px; }
.platform-host-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.platform-host-links path { vector-effect: non-scaling-stroke; }
.platform-host-mesh { stroke: #85b5dd; stroke-width: .8; opacity: .3; }
.platform-host-beams { stroke: url(#vm-pool-link); stroke-width: 1.4; opacity: .8; }
.platform-host-node-halos { fill: #6cbfee; filter: url(#vm-pool-node-glow); opacity: .5; }
.platform-host-nodes { fill: #e9faff; stroke: #71bce6; stroke-width: 1; }
.platform-host-picture { display: block; position: relative; z-index: 1; width: 88%; height: 100%; min-height: 0; }
.platform-host-picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transform: scale(1.38); transform-origin: center bottom; }
.platform-physical-host > div { max-width: 100%; text-align: center; transform: translateY(-20px); }
.platform-physical-host strong { display: block; margin-bottom: 3px; color: #345b89; font-size: clamp(14px, 1.04vw, 18px); font-weight: 700; line-height: 1.15; }
.platform-physical-host div > span { display: block; color: #8498b2; font-size: clamp(11px, .83vw, 14px); line-height: 1.3; }

.platform-inference-options { display: grid; min-height: 0; grid-template-rows: minmax(0, 1fr); margin: 0 3%; }
.platform-service-api > .platform-inference-options { grid-row: 4 / -1; }
.platform-inference-grid { display: grid; min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto minmax(28px, 1fr) auto; column-gap: 11px; row-gap: 7px; }
/* Shared rows keep headings, tags and descriptions aligned across both cards. */
.platform-inference-card { display: grid; grid-row: 1 / -1; min-width: 0; min-height: 0; grid-template-rows: subgrid; padding: clamp(9px, .8vw, 14px) clamp(15px, 1.25vw, 22px); border: 1px solid #dce5f7; border-radius: 13px; background: linear-gradient(145deg, #ffffffc9, #e7f0ff99); box-shadow: inset 0 1px #fff, 0 3px 0 #dce7f455; text-align: center; }
.platform-inference-shared { grid-column: 1; }
.platform-inference-dedicated { grid-column: 2; }
.platform-inference-dedicated { border-color: #e2d5f7; background: linear-gradient(145deg, #ffffffcc, #e9defcaa); box-shadow: inset 0 1px #fff, 0 3px 0 #e4d9f455; }
.platform-inference-card h4 { margin: 0; color: #355c94; font-size: clamp(15px, 1.1vw, 20px); font-weight: 750; letter-spacing: -.2px; line-height: 1.15; white-space: nowrap; }
.platform-inference-dedicated h4 { color: #654397; }
.inference-capacity-art { display: block; min-height: 0; width: 100%; height: 100%; max-height: 96px; object-fit: contain; align-self: center; opacity: .92; }
.platform-inference-card p { align-self: start; margin: 0; color: #7c8eac; font-size: clamp(11px, .81vw, 14px); line-height: 1.35; }
.platform-inference-dedicated p { color: #8e7eaa; }
.platform-resource-tags { display: flex; flex-wrap: wrap; align-self: start; align-content: start; align-items: center; justify-content: center; gap: 5px 6px; }
.platform-resource-tags > span { padding: 4px 6px; border-radius: 5px; background: #e5eefb; color: #6586b3; font-size: clamp(11px, .79vw, 13px); font-weight: 600; line-height: 1.15; white-space: nowrap; }
.platform-inference-dedicated .platform-resource-tags > span { background: #e7ddf6; color: #8a6bb4; }

@media (max-width: 1200px) and (min-width: 901px) {
  .platform-service { gap: 5px; padding: 11px; }
  .platform-service-header { min-height: 96px; grid-template-columns: 35px minmax(0, 1fr); gap: 9px; }
  .platform-service-header h2 { font-size: 20px; }
  .platform-service-header p { font-size: 11px; }
  .platform-service-icon { width: 35px; border-radius: 10px; }
  .cloud-platform-layer h3 { font-size: 15px; }
  .cloud-platform-functions span { font-size: 10px; }
  .platform-vm-guests { gap: 7px; }
  .platform-vm-instance { grid-template-columns: 20px minmax(0, 1fr); gap: 5px; padding: 6px; }
  .platform-vm-instance > svg { width: 20px; height: 20px; }
  .platform-vm-architecture, .platform-user-scene { margin-right: 2%; margin-left: 2%; }
  .platform-inference-card h4 { font-size: 14px; }
  .platform-inference-card p { font-size: 10px; }
  .platform-resource-tags > span { font-size: 10px; padding: 4px; }
}

@media (min-width: 1101px) and (max-width: 1300px) {
  .cloud-services-layout.platform-services-v2 { --platform-layer-height: 68px; --platform-lower-height: 148px; }
  .platform-service { grid-template-rows: auto minmax(60px, 1fr) var(--platform-layer-height) var(--platform-lower-height) 24px; gap: 4px; padding: 10px; }
  .platform-service-header { min-height: 96px; }
  .platform-vm-architecture { grid-template-rows: 45px 31px minmax(28px, 1fr); gap: 4px; }
  .platform-vm-instance { padding-top: 4px; padding-bottom: 4px; }
}

@media (min-width: 901px) and (max-width: 1300px) {
  .platform-vm-task-tags { right: 18px; bottom: 10px; gap: 6px; }
  .platform-vm-task-row { gap: 6px; }
  .platform-vm-task-row > span { gap: 4px; padding: 3px 5px; font-size: 10px; }
  .platform-vm-task-row > span::before { display: none; }
  #page-canvas-11[lang^="zh"] .platform-vm-instance { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  #page-canvas-11[lang^="zh"] .platform-vm-instance > svg { display: none; }
}

@media (max-width: 900px) {
  .cloud-services-layout.platform-services-v2 { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 70px; row-gap: 26px; }
  .platform-service { min-height: 620px; grid-template-rows: auto 160px 90px 190px 28px; gap: 8px; padding: 18px; }
  .platform-service-header { min-height: 70px; }
  .platform-service-header h2 { font-size: 25px; }
  .platform-service-header p { font-size: 14px; }
  .platform-service-icon { width: 44px; }
  .platform-service-header { grid-template-columns: 44px minmax(0, 1fr); }
  .cloud-platform-layer h3 { font-size: 21px; }
  .cloud-platform-functions svg { width: 26px; height: 26px; }
  .cloud-platform-functions span { font-size: 12px; }
  .platform-inference-card h4 { font-size: 19px; }
  .platform-inference-card p { font-size: 13px; }
  .platform-vm-instance strong { font-size: 17px; }
}

@media (max-width: 480px) {
  .platform-service { min-height: 640px; grid-template-rows: auto 150px 78px 220px 32px; padding: 13px; }
  .platform-service-header h2 { font-size: 21px; }
  .platform-service-header p { font-size: 12px; }
  .platform-service-header { grid-template-columns: 35px minmax(0, 1fr); }
  .platform-service-icon { width: 35px; }
  .cloud-platform-layer h3 { font-size: 15px; }
  .cloud-platform-functions svg { width: 21px; height: 21px; }
  .cloud-platform-functions span { font-size: 10px; }
  .platform-vm-architecture, .platform-user-scene { margin-right: 0; margin-left: 0; }
  .platform-vm-guests { gap: 7px; }
  .platform-vm-instance { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 3px; padding: 6px; text-align: center; }
  .platform-vm-instance > svg { display: none; }
  .platform-vm-instance strong { font-size: 15px; }
  .platform-physical-host { gap: 8px; }
  .platform-physical-host strong { font-size: 14px; }
  .platform-inference-card h4 { font-size: 14px; }
  .platform-inference-card p { font-size: 11px; }
  .platform-inference-card { padding: 9px 15px; }
  .platform-resource-tags { gap: 3px; }
  .platform-resource-tags > span { font-size: 10px; padding: 4px; }
}