/* 四项共用同一材质与构图，局部规则不影响全站背景与左侧文案。 */
/* 随舞台高度留出上下安全区，容纳编号、两行标题和正文；窗口继续裁切已经滑出的章节。 */
html[data-language] #site-viewport #page-content .ets-engine-diagrams[data-flow-mode="pinned"] .ets-flow-captions{height:calc(var(--flow-height) - 80px)}
html[data-language] #site-viewport #page-content .ets-engine-diagrams[data-flow-mode="pinned"] .ets-flow-caption> *{flex-shrink:0}
/* 外框随章节文字一起进入；只隐藏等待中的插画和图下标注，已解码的图片也不会抢先显示。 */
.engineering-mg-visual:is([data-mg-motion="pending"],[data-mg-motion="loading"]) :is(.illustration,.engineering-mg-legend){opacity:0}
html[data-language] #site-viewport #page-content .ets-engine-diagrams .engineering-mg-visual {
  --accent:#91c5df;--bead-light:#accfdc;--bead-dark:#4d83a4;--liquid:#87bbd1;--icon-mid:#527da8;--icon-light:#c0d5e6;--icon-dark:#284b70;
  display:flex;flex-direction:column;justify-content:center;width:100%;height:100%;aspect-ratio:auto;overflow:visible;background:transparent;border:0;border-radius:0;box-shadow:none;
}
/* 磨砂只处理卡片背后的场景；插画与文字不使用模糊，边框尺寸仍沿用原比例。 */
.engineering-mg-card{
 position:relative;width:100%;aspect-ratio:960/760;flex:none;overflow:hidden;isolation:isolate;
 border:1px solid #b7d5ff26;border-radius:16px;
 background:radial-gradient(ellipse at 16% 0,#a6cfff12,transparent 58%),linear-gradient(140deg,#dceaff0b,#7299d408 43%,#020e241f),#06183861;
 backdrop-filter:blur(12px) saturate(112%);-webkit-backdrop-filter:blur(12px) saturate(112%);
 box-shadow:inset 0 1px 0 #e7f2ff26,inset 1px 0 0 #b9d7ff0f,inset 0 -1px 0 #05132d66,0 22px 58px #00061838,0 0 28px #6d9bde0a;
}
/* 遮罩把渐变限制在一像素边缘；上左受光更亮，中心保持透明，装饰不接收鼠标事件。 */
.engineering-mg-card::before{
 content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;padding:1px;pointer-events:none;
 background:linear-gradient(135deg,#e3efff99,#93b9ee59 24%,#93b9ee0d 51%,#567fb32e 76%,#b9d7ff66);
 -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
 -webkit-mask-composite:xor;mask-composite:exclude;
}
.engineering-mg-card::after{
 content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;
 background:radial-gradient(ellipse 42% 3% at 18% 0,#dbedff2e,transparent 82%),linear-gradient(180deg,#e3efff08,transparent 17%);
}
.engineering-mg-card .illustration{display:block;width:100%;height:100%;isolation:isolate}
.engineering-mg-card text{font-family:"Microsoft YaHei","PingFang SC",sans-serif;font-size:24px;font-weight:500;fill:#e4efff;text-anchor:middle}
.engineering-mg-card .sub-label{font-size:18px;fill:#a6bdd6;font-weight:400}
.engineering-mg-card .object-label{font-size:20px;fill:#b4c8df;font-weight:400}
.engineering-mg-card .figure-note{font-size:16px;fill:#839fbe;font-weight:400}
.engineering-mg-card :is(.wire,.field-line){stroke-dasharray:1;stroke-dashoffset:0}
.engineering-mg-card :is(.move,.node,.bead){transform-box:fill-box;transform-origin:center}
.engineering-mg-visual[data-mg-language="en"] text{font-size:22px}
.engineering-mg-visual[data-mg-language="en"] .sub-label{font-size:17px}
.engineering-mg-visual[data-mg-language="en"] .figure-note{font-size:16px}
.engineering-mg-legend{display:none}
.engineering-mg-card .automation-labels text{text-anchor:start}
.engineering-mg-card .automation-heading{font-size:27px}
.engineering-mg-card .automation-description{font-size:21px;fill:#a6bdd6;font-weight:400}
.engineering-mg-card .automation-number{font-size:22px;font-weight:400}
.engineering-mg-card :is(.automation-step,.automation-halo){transform-box:fill-box;transform-origin:center}
.engineering-mg-visual[data-mg-language="en"] .automation-heading{font-size:26px}
.engineering-mg-visual[data-mg-language="en"] .automation-description{font-size:20px}
html[data-language] #site-viewport #page-content .ets-flow-reading .engineering-mg-visual{height:auto;max-width:760px}
@media(max-width:600px){
  .engineering-mg-card{border-radius:12px}
  .engineering-mg-card .callouts text,.engineering-mg-card .figure-note{display:none}
  .engineering-mg-card .object-label,.engineering-mg-visual[data-mg-language="en"] .object-label{font-size:36px}
  .engineering-mg-legend{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;list-style:none;margin:18px 0 0;padding:0;color:#c5d5ee;font-size:14px;line-height:1.6}
  .engineering-mg-legend li{padding-left:12px;border-left:2px solid #91c5df70}
  .engineering-mg-visual[data-mg-index="3"] .engineering-mg-legend{grid-template-columns:1fr}
  /* 窄屏把四幅插画重排为两行，说明置于图下，保持与其他章节相同的卡片比例。 */
  .automation-scene .automation-wire{display:none}
  .automation-step[data-step="0"] use{transform:translate(-84px,29px) scale(1.3)}
  .automation-step[data-step="1"] use{transform:translate(376px,-192px) scale(1.3)}
  .automation-step[data-step="2"] use{transform:translate(-84px,-63px) scale(1.3)}
  .automation-step[data-step="3"] use{transform:translate(376px,-284px) scale(1.3)}
  .automation-node[data-step="0"]{transform:translate(12px,-49px)}
  .automation-node[data-step="1"]{transform:translate(472px,-219px)}
  .automation-node[data-step="2"]{transform:translate(12px,-44px)}
  .automation-node[data-step="3"]{transform:translate(472px,-214px)}
}

/* 手机降低背景合成开销；不支持模糊或偏好低透明度时，以同色实底保证图内标注可读。 */
@media(max-width:600px){.engineering-mg-card{backdrop-filter:blur(8px) saturate(108%);-webkit-backdrop-filter:blur(8px) saturate(108%);box-shadow:inset 0 1px #e7f2ff24,0 14px 34px #00061830}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.engineering-mg-card{background:linear-gradient(140deg,#173b69,#0b2347)}}
@media(prefers-reduced-transparency:reduce){.engineering-mg-card{background:#102c55;backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(prefers-contrast:more){.engineering-mg-card{background:#0c2348;border-color:#c8e1ff;backdrop-filter:none;-webkit-backdrop-filter:none}.engineering-mg-card::after{display:none}}