/* Current UI captures preserve the entire window, with full-size links. */
.ied-capture-link{position:absolute;inset:8px;display:block;border-radius:10px;overflow:hidden;z-index:2;cursor:zoom-in}
.ied-capture-link .ied-app-img{inset:0;width:100%;height:100%;object-fit:contain}
.ied-capture-link:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.ied-scan-core.is-app-shot .scan-ring,.ied-review-shot .match-line{display:none}
.current-ui-gallery{width:min(var(--content),calc(100% - 48px));margin:80px auto 100px;scroll-margin-top:100px}
html[data-eye-theme="dark"] .current-ui-gallery{--ink:#eeede7;--ink-soft:#aaa9a3;--paper-bright:#1a191f;--line:rgba(216,207,237,.16)}
.current-ui-gallery .section-index{color:var(--ink-soft)}
.current-ui-head{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:32px;margin-bottom:30px}
.current-ui-head h2{margin:8px 0 0;font-family:var(--display-font);font-weight:730;letter-spacing:-.04em;font-size:clamp(26px,3vw,44px);line-height:1.06;color:var(--ink)}
.current-ui-head>p,.current-ui-grid figcaption p,.current-ui-note{color:var(--ink-soft);line-height:1.8}
.current-ui-head>p{margin:0;font-size:14px}
.current-ui-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.current-ui-grid figure{margin:0;min-width:0;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--paper-bright);overflow:hidden}
.current-ui-grid a{display:block;padding:12px;cursor:zoom-in;background:#101013}
.current-ui-grid a:focus-visible{outline:3px solid var(--violet);outline-offset:-3px}
.current-ui-grid img{display:block;width:100%;height:auto;aspect-ratio:36/25;object-fit:contain;border-radius:var(--radius-sm)}
.current-ui-grid figcaption{padding:24px 26px 26px}
.current-ui-grid figcaption>span{color:var(--ink-soft);font-size:11px;letter-spacing:.08em}
.current-ui-grid h3{margin:12px 0 8px;color:var(--ink);font-size:20px;line-height:1.45}
.current-ui-grid figcaption p{margin:0;font-size:13px}
.current-ui-note{margin:18px 0 0;font-size:12px}
@media(max-width:720px){
 .current-ui-gallery{width:calc(100% - 32px);margin:48px auto 64px}
 .current-ui-head{grid-template-columns:1fr;gap:16px;margin-bottom:20px}
 .current-ui-grid{grid-template-columns:1fr;gap:20px}
 .current-ui-grid figcaption{padding:20px}
 .current-ui-grid h3{font-size:19px}
 .story-ied .visual-meta{font-size:9px;gap:8px}
}
/* Keep the pinned evidence, captions and controls inside one usable viewport. */
@media(min-width:1200px) and (min-height:760px){
 .product-story .story-pin{height:100svh!important;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;padding-top:100px}
 .product-story .story-head{flex:none;gap:8px;margin-bottom:14px}
 .product-story .story-identity{display:flex;flex-direction:row;gap:12px;align-items:center}
 .product-story .story-mini-mark{width:36px;height:36px;margin:0}
 .product-story .story-identity .section-index{margin:0}
 .product-story .story-title-block{gap:4px}
 .product-story .story-product{margin:0;font-size:10px}
 .product-story .story-head h2{font-size:clamp(38px,3.4vw,52px);line-height:1.15;margin:0}
 .product-story .story-deck{font-size:18px;line-height:1.4;margin:0}
 .product-story .story-layout{flex:1;min-height:0;grid-template-rows:minmax(0,1fr) auto;gap:12px}
 html .product-story .story-visual{height:100%;min-height:0}
 .product-story .story-steps li{min-height:104px;padding:12px 16px;opacity:.72}
 .product-story .story-steps li[aria-current="step"]{opacity:1}
 .product-story .story-steps p{display:block;font-size:13px;line-height:1.55}
 .product-story .story-steps h3{font-size:15px}
}
.product-story [data-story-step][role="button"]{cursor:pointer}
.product-story [data-story-step][role="button"]:focus-visible{outline:2px solid var(--coral);outline-offset:-3px}
.story-deck-controls{display:none}
@media(max-width:1199px),(max-height:759px){
 .story-deck-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;color:var(--ink-soft);font-size:12px}
 .story-deck-controls button{min-height:40px;min-width:76px;border:1px solid var(--line);border-radius:999px;padding:0 14px;background:var(--paper-bright);color:var(--ink);font:inherit;cursor:pointer}
 .story-deck-controls button:disabled{opacity:.35;cursor:default}
 .story-deck-controls button:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
 .story-copy .story-steps{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-columns:auto;gap:8px;overflow:visible}
 .story-copy .story-steps li{min-width:0;min-height:0!important;border:1px solid var(--line)!important;border-radius:14px;padding:14px!important}
 .story-copy .story-steps li[aria-current="step"]{background:rgba(122,76,255,.09);border-color:var(--violet)!important}
 .story-copy .story-steps h3{font-size:15px}
 .story-copy .story-steps p{font-size:12px;line-height:1.6}
}
@media(max-width:720px){
 .ied-scene{padding-bottom:136px}
 .ied-scene .scene-caption{left:18px;right:18px;bottom:80px;min-height:38px;display:flex;flex-wrap:wrap;align-content:center;gap:3px 9px;max-width:none}
 .ied-scene .scene-caption strong{font-size:13px;line-height:1.5}
 .ied-scene .scene-caption>span{display:none}
 .ied-scene .scene-rail{display:grid;grid-template-columns:minmax(0,1fr);overflow:visible}
 .ied-scene .resource-count,.ied-scene .rail-diff,.ied-scene .rail-metrics,.ied-scene .diff-counts,.ied-scene .backup-stack{min-width:0;width:100%}
 .ied-scene .rail-metrics{display:none}
 .ied-scene .scene-rail .resource-count{padding:10px 14px}
 .ied-scene .scene-rail .resource-count b{font-size:28px}
 .ied-scene .diff-counts{gap:5px}
 .ied-scene .diff-counts p{padding:8px;min-width:0}
 .ied-scene .diff-counts b{font-size:22px}
 .scene-caption{max-width:calc(100% - 28px);overflow-wrap:anywhere}
 .story-visual .visual-status{font-size:10px;gap:6px}
 .story-visual .visual-status b{display:none}
}

/* ===== 2026-11-04 两个产品故事区的排版（用户：排版问题、图片挤压）=====
   1) 截图框原来是 width:100% + aspect-ratio + max-height:100%：高度被上限卡住后宽度不跟着缩，
      变成 1016×241 的扁框，2880×2000 的截图只画了 321×223。现在按「列宽」与「列高 × 36/25」取小，
      框和截图同比例，不留大片空白。场景设成尺寸容器（cq 单位 = 场景内容区）。
   2) MFXConsole 截图：max-height:76% 在高度不确定的网格里不生效（第 2 阶段溢出被裁），
      第 3、4 阶段 height:calc(100% - 190px) 只剩 201px。改成宽高 auto + 容器上限，按原比例尽量放大。
   3) 桌面钉版（≥1200×760）：步骤列表移到右栏，截图区拿到整列高度；场景说明与右栏步骤重复，钉版时隐藏。 */
@media (min-width: 721px) {
  html .product-story .ied-scene { container-type: size; }
  html .product-story .ied-scan-core.is-app-shot,
  html .product-story .ied-review-shot,
  html .product-story .ied-diff-shot,
  html .product-story .ied-guard-shot {
    /* 高度留 14px 给下方的场景说明（静态模式下它显示在截图下沿，原来会压住框底） */
    width: min(calc(100cqw - clamp(194px, 23cqw, 238px) - clamp(14px, 1.6vw, 22px)), calc((100cqh - 14px) * 36 / 25));
    height: auto;
    max-height: none;
    aspect-ratio: 36 / 25;
    justify-self: center;
    align-self: center;
  }
  html .product-story .mfx-scene { container-type: size; }
  html .product-story .mfx-scene > img[data-ui-shot],
  html .product-story .mfx-scene[data-story-scene="browse"] > img,
  html .product-story .mfx-scene[data-story-scene="settings"] > img {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    max-width: 100cqw;
    max-height: 100cqh;
    margin: 0;
    object-fit: contain;
  }
  html .product-story .mfx-capture-placeholder { width: min(100cqw, 760px); height: min(100cqh, 470px); }
}

@media (min-width: 1200px) and (min-height: 760px) {
  html .product-story .story-head { margin-bottom: 12px; }
  html .product-story .story-layout,
  html .product-story.story-ied .story-layout,
  html .product-story.story-mfx .story-layout {
    grid-template-columns: minmax(0, 1fr) clamp(248px, 19vw, 300px);
    grid-template-rows: minmax(0, 1fr);
    gap: 16px;
  }
  html .product-story .story-visual { height: 100%; }
  html .product-story .story-copy { display: flex; flex-direction: column; height: 100%; min-height: 0; }
  html .product-story .story-progress { flex: none; }
  html .product-story .story-steps {
    flex: 1 1 auto;
    min-height: 0;
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(4, minmax(0, 1fr));
    border-bottom: 0;
  }
  html .product-story .story-steps li {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    align-content: start;
    min-height: 0 !important;
    padding: 12px 14px 12px 16px;
    overflow: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    border-left: 0;
  }
  html .product-story.story-mfx .story-steps li { border-bottom-color: var(--night-line); }
  html .product-story .story-steps li:last-child { border-right: 0; border-bottom: 0; }
  html .product-story .story-steps li[aria-current="step"] { box-shadow: inset 2px 0 0 var(--violet); }
  html .product-story.story-mfx .story-steps li[aria-current="step"] { box-shadow: inset 2px 0 0 var(--coral); }
  html .product-story .story-steps h3,
  html .product-story .story-steps p { min-height: 0; }

  html .product-story .scene-caption { display: none; }
  html .product-story .visual-status { bottom: 14px; min-height: 38px; }
  html .product-story .ied-scene {
    grid-template-columns: minmax(0, 1fr) clamp(186px, 21%, 232px);
    gap: 18px;
    padding: 50px 20px 66px;
  }
  html .product-story .ied-scan-core.is-app-shot,
  html .product-story .ied-review-shot,
  html .product-story .ied-diff-shot,
  html .product-story .ied-guard-shot {
    width: min(calc(100cqw - clamp(186px, 21cqw, 232px) - 18px), calc(100cqh * 36 / 25));
  }
  html .product-story .mfx-scene { padding: 52px 28px 26px; }
  html .product-story .mfx-scene .query-trail { right: 28px; bottom: 16px; }
}
/* 首屏双产品舞台：IED 图标的说明胶囊宽度上限跟着图标走（100% - 24px），图标窄时折成 2~3 行盖住图标
   （1040 宽两行、手机三行）。改成不限宽、不换行；手机上挪到图标下方，图标也放大一点。 */
html .stage-icon figcaption { max-width: none; white-space: nowrap; }
@media (max-width: 720px) {
  html .stage-icon { width: 36%; bottom: 17%; left: 7%; }
  html .stage-icon figcaption { top: calc(100% + 10px); bottom: auto; left: 0; }
}

/* 矮屏（760–880 高）每步只剩约 100px：只留阶段标题（原设计在这个区间本来就藏说明，被修补层的 display:block 盖掉了）。
   四行保持等高 —— 不做「只展开当前步」，否则换阶段时行高变化，右栏会跳。 */
@media (min-width: 1200px) and (min-height: 760px) and (max-height: 880px) {
  html .product-story .story-steps p { display: none; }
}