/* ============================================================================
   deepen.css —— 官网首页 #image 区「提示词深入」滚动块（2026-10-13 接入）
   ★ 本文件由 _proto/_build-deepen.mjs 从 _proto/prompt-deepen-scrolly.html **生成**，
     不要手改 —— 改原型后重跑脚本。
   ★ 所有选择器都带 .deepen 作用域前缀：原型里的 .opt/.spec/.pin/.bar 是短类名，
     首页是活的，不加前缀迟早会被别处的同名规则冲掉。
   ★ 原型的 body{...} 已剔除（首页 body 由 neo-tokens.css 定义）。
   ============================================================================ */

/* ============================================================================
   原型 · 「提示词自动补全」深入版：一句话 → 追问方向 → 六维提示词 → 出图
   交互模型：外层撑高 + 内层 sticky 钉住；滚动量换算成进度 p ∈ [0,1]，
   p 切成 4 段（阶段），段内再取子进度 t 驱动「逐条揭示」。
   复用页面既有 token（../assets/neo-tokens.css），不引任何外部库。
   ========================================================================== */
/* ---------- 页头 ---------- */
.deepen .hd { max-width: 900px; margin: 0 auto; padding: 104px 28px 32px; }
.deepen .hd__eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; color: var(--accent-ink); }
.deepen .hd h1 {
  margin: 18px 0 0; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(32px, 5.6vw, 64px); line-height: 1.08; letter-spacing: -.015em;
}
.deepen .hd__sub { margin: 20px 0 0; max-width: 48ch; font-size: 16px; line-height: 1.8; color: var(--ink-3); }
.deepen .hd__hint {
  display: flex; align-items: center; gap: 8px; margin-top: 28px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; color: var(--ink-4);
  animation: hint 2.4s var(--ease-inout) infinite;
}
@keyframes hint {
0%, 100% { transform: translateY(0); opacity: .6; }
50% { transform: translateY(5px); opacity: 1; } }
/* ---------- 滚动舞台 ---------- */
.deepen .scrolly { position: relative; height: 460vh; }
.deepen .pin {
  position: sticky; top: 0; height: 100vh;
  display: grid; grid-template-rows: 1fr auto; overflow: hidden;
}
.deepen .pin__grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .6;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(74% 64% at 50% 46%, #000 26%, transparent 100%);
          mask-image: radial-gradient(74% 64% at 50% 46%, #000 26%, transparent 100%);
}
/* 招 2 · 聚光灯：固定尺寸的圆池，零高度绝对定位，靠 JS 写 inline transform/opacity。
   ★ 2026-10-13 改版：原来是一个 78vmin×62vmin 的**横椭圆**、只做等比缩放，实测
     出图阶段缩到 435×346 —— 比海报（453×680）还小一圈，「光打在作品背后」根本不成立；
     而追问阶段是 755×600 盖住整屏，看着像一片暖雾。
     现在改成 62vmin 的**圆池 + 按轴独立缩放（scale(sx, sy)）**，让每阶段的光真正贴合当前主体：
       种子 → 扁平宽池（托住那个横长输入框）／追问 → 铺开／提示词 → 退成环境光／
       出图 → 竖长光柱（罩住 2:3 的海报）。
   ★ 不加 CSS transition（避免和滚动驱动抢帧）。
   ★ CSS 基础值 = reduce 冻结档 = **阶段 2 档**：reduce 下 JS 完全不写 glow，露出这个值。 */
.deepen .pin__glow {
  position: absolute; left: 50%; top: 50%;
  width: 62vmin; height: 62vmin;
  margin-left: -31vmin; margin-top: -31vmin;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(224,154,46,.30), transparent 70%);
  filter: blur(6px);
  pointer-events: none;
  transform: translateY(0) scale(1.30, .86);
  opacity: .7;
  will-change: transform, opacity;
}
/* ★ overflow 必须是 visible：出图阶段画框会 scale 到盖住整个视口（含页脚那条），
   靠外层 .pin 的 overflow:hidden 兜住即可；这里若 hidden，图会被裁在舞台内、盖不住页脚。 */
.deepen .pin__stage {
  position: relative; display: grid; place-items: center;
  padding: 24px; min-height: 0; overflow: visible;
}
/* ---------- 满屏层（出图放大那一刻） ----------
   绝对定位铺满整个 .pin（含页脚那条），z-index 压在舞台之上。
   擦入沿用「自上而下 clip-path」；缩小靠 img 自身 scale + 淡出。 */
.deepen .pin__bleed {
  /* ★ 首页里 scrolly 被 .wrap 限宽（1280），absolute 只能铺到 1280 而不是整屏。
     fixed 直接对视口定位，且 overflow:hidden 的祖先**不会**裁剪 fixed 后代（祖先没有 transform）。 */
  position: fixed; inset: 0; z-index: 4;
  opacity: 0; pointer-events: none; overflow: hidden;
}
.deepen .pin__bleed img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform-origin: 50% 50%; clip-path: inset(0);
  will-change: transform, opacity, filter;
}
.deepen .js .pin__bleed img { clip-path: inset(0 0 100% 0); }
.deepen .thread { width: min(100%, 780px); display: flex; flex-direction: column; gap: 12px; }
/* ---------- 面包屑：已完成的步骤收成一行 ----------
   ★ 2026-10-13 改版：原来是三个独立药丸（生成… / 方向·X / 6 个维度）纵向堆在左上角，
     宽屏下一行一个、又小又散，是整屏最碍眼的杂讯。改成**一行**：
     已完成项之间自动出 `·` 分隔，未完成的直接不渲染（display:none 不带分隔符）。 */
.deepen .crumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 10px;
  min-height: 20px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; color: var(--ink-4);
}
.deepen .crumb[data-empty="1"] { visibility: hidden; }
/* 阶段 1 留位不显示，避免整屏跳一下 */
.deepen .crumb__t { display: none; align-items: center; }
.deepen .crumb__t.is-on { display: inline-flex; }
/* 前一项也可见时才画分隔符 —— 避免出现悬空的前导 `·` */
.deepen .crumb__t.is-on + .crumb__t.is-on::before {
  content: "·"; margin-right: 10px; color: var(--line); font-style: normal;
}
.deepen .crumb__t--btn {
  padding: 2px 8px; margin: 0 -8px; border-radius: var(--r-xs);
  color: var(--accent-ink); cursor: pointer;
  transition: background-color .16s var(--ease-out), color .16s var(--ease-out);
}
.deepen .crumb__t--btn:hover { background: var(--accent-soft); color: var(--accent); }
.deepen .crumb__t--btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.deepen .crumb b { font-weight: 700; }
/* ---------- 消息：只有当前阶段展开 ----------
   ★ is-done 只作为**状态类**保留（门禁/焦点管理要读它），但**不再参与渲染**：
     摘要已经由上面那一行面包屑承担，若让 done 的 msg 继续 display:block，
     它们会变成三个高度为 0 的空 flex 项，每个仍然吃掉一条 12px 的 gap ⇒
     白占 36px，正是矮屏（1280×800）顶破高度预算的那 33px 来源。 */
.deepen .msg { display: none; }
.deepen .msg.is-active { display: block; }
.deepen .msg__full { display: none; }
/* ★ 阶段切换只做「淡」，不做位移 —— 原来 .52s + translateY(16px) 会和阶段内部的
   擦除揭示叠成两层运动，读起来是「整块滑进来、里面再擦一遍」。 */
.deepen .msg.is-active .msg__full { display: block; animation: msgIn .3s var(--ease-out) both; }
@keyframes msgIn {
from { opacity: 0; } }
/* ---------- ① 种子：复刻线上那个输入框 ---------- */
/* 招 6 · 种子输入框「站起来」：84px / 22px（仅桌面；≤760px 回落 62px / 16px）。
   圆角 24px 不动 —— 那是「像线上」的锚点。阴影走 --sh-2（招 2 阴影阶梯）。 */
.deepen .askbox {
  display: flex; align-items: center; gap: 16px;
  height: 96px; padding: 0 18px 0 26px;
  border-radius: 24px; background: #FBFBFB; border: 1px solid var(--line-soft);
  box-shadow: var(--sh-2);
}
.deepen .askbox__mark {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 52%, #FFFFFF 0%, rgba(255,255,255,.82) 20%, rgba(255,255,255,0) 54%),
    linear-gradient(100deg, #D2417F 0%, #C75BC8 45%, #3E7FE0 100%);
}
.deepen .askbox__text {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center;
  font-size: 26px; color: #17181B; white-space: pre;
}
.deepen .caret {
  flex: none; width: 2px; height: 25px; margin-left: 4px;
  background: #3B8CF0; border-radius: 1px;
  animation: caret 1s steps(1) infinite;
}
@keyframes caret {
0%, 50% { opacity: 1; }
50.01%, 100% { opacity: 0; } }
.deepen .askbox__send {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: #3488DC; color: #FFF;
}
.deepen .askbox__send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
/* ---------- ② 追问方向 ---------- */
/* ★ 尺度：这句「想往哪个方向做？」是系统的**追问**，是这一屏的主句 ——
   原来 17px 只是正文大小，读起来像图注。升到衬线 display，它才担得起「主句」。 */
.deepen .q {
  margin: 0 0 18px; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(23px, 2.3vw, 32px); line-height: 1.24; letter-spacing: -.01em; color: var(--ink);
}
.deepen .q b { color: var(--ink); }
.deepen .q__tag {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: var(--r-xs);
  background: var(--accent-soft); color: var(--accent-ink);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
}
.deepen .opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
/* 光标的定位上下文（.opts 是 grid，用它自己的 offsetParent 算卡中心会差一层） */
.deepen .opts-wrap { position: relative; }
/* 演示光标：滑进来 → 落到「高清海报」上 → 按一下。纯装饰（aria-hidden）。 */
.deepen .cursor {
  position: absolute; left: 0; top: 0; z-index: 3;
  width: 27px; height: 27px; margin: -4px 0 0 -5px;   /* 让箭尖（而不是盒左上角）落在点上 */
  pointer-events: none; opacity: 0;
  transition: opacity .2s var(--ease-out);
  filter: drop-shadow(0 2px 6px rgba(20,24,32,.32));
}
.deepen .cursor.is-on { opacity: 1; }
.deepen .cursor svg { width: 100%; height: 100%; fill: #17181B; stroke: #FFF; stroke-width: 1.2; stroke-linejoin: round; }
/* 按下：独立 scale 属性（与 JS 写的 inline transform 不冲突） */
.deepen .cursor.is-click { animation: curClick .24s var(--ease-out); }
@keyframes curClick {
0% { scale: 1; }
45% { scale: .78; }
100% { scale: 1; } }
/* 招 3 · 揭示改「擦除入画」：clip-path 自上而下擦除 + opacity，位移收窄到 8px。
   招 4 · 字号：.opt__t 19px、.opt__d 13.5px。
   ★ 2026-10-13：底色从 --surface 改成纯白 —— --surface(#FCFCFB) 与页面 --bg(#F5F5F3)
     几乎同色，卡片在页面上根本看不出是「框」（用户反馈的直接原因）。 */
.deepen .opt {
  position: relative; overflow: hidden;
  display: block; width: 100%; text-align: start; cursor: pointer;
  padding: 20px 20px 19px; border-radius: var(--r-lg);
  background: #FFFFFF; border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), clip-path .5s var(--ease-out),
              border-color .18s var(--ease-out), background-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
/* 初始隐藏态 scope 到 html.js —— 无 JS 时直接是终态、可见 */
.deepen .js .opt { opacity: 0; transform: translateY(8px); clip-path: inset(0 0 100% 0); }
.deepen .opt.is-shown { opacity: 1; transform: none; clip-path: inset(0); }
.deepen .opt.is-on { border-color: var(--accent-line); background: var(--accent-soft); box-shadow: var(--sh-2); }
/* 「已选」的非颜色表意：左侧一条竖色条（**形状**差异，灰度下依然可辨）。
   ★ 原来是卡前一个 ✓ 图标，按用户要求删掉了 —— 但不能因此退回「只靠颜色表意」。 */
.deepen .opt::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); transform: scaleY(0); transform-origin: 50% 0;
  transition: transform .28s var(--ease-out);
}
.deepen .opt.is-on::before { transform: scaleY(1); }
.deepen .opt__hd { display: flex; align-items: center; gap: 8px; }
.deepen .opt__t { font-size: 19px; font-weight: 600; color: var(--ink); }
.deepen .opt__rec {
  margin-left: auto; padding: 1px 7px; border-radius: var(--r-xs);
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em;
}
.deepen .opt__d { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.65; color: var(--ink-3); }
/* Q2 · 就地反馈行：点方向卡后出现，不改变阶段 */
.deepen .opt__hint { margin: 12px 0 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .03em; color: var(--accent-ink); }
.deepen .opt__hint:empty { display: none; }
/* ---------- ③ 六维提示词 ---------- */
.deepen .spec {
  border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--line); overflow: hidden; box-shadow: var(--sh-2);
}
.deepen .spec__hd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 18px; border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.deepen .spec__hd b { color: var(--accent-ink); letter-spacing: .04em; }
/* 招 3 · 六行「从左往右落笔」擦除入画，位移 8px；padding 10→8。 */
.deepen .spec__row {
  display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px;
  padding: 12px 18px; border-bottom: 1px solid var(--line-soft);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), clip-path .5s var(--ease-out);
}
.deepen .js .spec__row { opacity: 0; transform: translateX(-8px); clip-path: inset(0 100% 0 0); }
.deepen .spec__row:last-child { border-bottom: 0; }
.deepen .spec__row.is-shown { opacity: 1; transform: none; clip-path: inset(0); }
.deepen .spec__k {
  padding-top: 2px; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .06em; color: var(--accent-ink);
}
.deepen .spec__row--neg .spec__k { color: var(--danger); }
.deepen .spec__v { font-size: 13.5px; line-height: 1.72; color: var(--ink-2); }
/* 打字机光标：六行同时打字，每行一个 2px 的竖条（打完即隐） */
.deepen .spec__caret {
  display: inline-block; width: 2px; height: 1em; margin-left: 3px;
  vertical-align: -.16em; background: var(--accent); opacity: 0;
}
.deepen .spec__row.is-typing .spec__caret { opacity: 1; animation: caret 1s steps(1) infinite; }
/* 招 4 · 尺度对比：只在 ≥1100px 把维度名放大成 20px 衬线、首列 72px；
   窄屏回落 12px mono / 首列 46px（见媒体查询），绝不泄漏到窄屏。 */
@media (min-width: 1100px) {
.deepen .spec__row { grid-template-columns: 72px minmax(0, 1fr); }
.deepen .spec__k { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.15; letter-spacing: 0; }
}
/* ---------- ④ 出图 · 全场唯一的高潮 ----------
   ★ 2026-10-13 改版（用户反馈「图片占比太小 / 动效不对」）：
     ① 图高度 `min(48vh, 430px)` → `min(74vh, 50vw)`。原来那个 **430px 的像素上限**在宽屏上
        死死卡住，实测 1920×1195 下整张图只占舞台面积 **5.6%**，等于没出图。
     ② 画框高度抽成 `--fh`，进度条宽度写成 `calc(--fh * 2 / 3)` ⇒ **进度条与画框同宽**、
        左右严格对齐（原来条 480px、图 287px、状态行还拉满整行，三样互不对齐）。
     ③ 图上**只留一条**揭示：滚动驱动的 clip-path 擦除。删掉原来那条 0.6s 的 opacity 淡入 ——
        两套揭示打架，实测 p=0.82 时图已 98% 不透明、而擦除才揭开 7%，看着就是糊的。 */
/* 画框高度 = 从**可用高度反推**，而不是拍一个 vh 数：
   可用高 = 100vh − 页脚(~56) − 周边(chrome ~126px：面包屑+进度条+状态行+图注+间距) − 留白 24×2
   拍 vh 的问题：chrome 是**固定 px**、视口高是变量 ⇒ 高屏白留、矮屏顶破（实测 1280×800 曾超 33px）。
   `max(240px, …)` 兜住极端矮视口，`49vw` 兜住超宽矮屏（竖版 2:3 图不能宽过这个）。 */
.deepen .shot { --fh: max(240px, min(calc(100vh - 220px), 49vw)); display: grid; justify-items: center; gap: 14px; }
.deepen .shot__col { display: grid; justify-items: center; gap: 14px; }
.deepen .shot__frame {
  position: relative; height: var(--fh); aspect-ratio: 2 / 3;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface-2); box-shadow: var(--sh-3);
  transform-origin: 50% 50%; will-change: transform;
}
.deepen .shot__frame.is-solid { box-shadow: var(--sh-4); }
.deepen .shot__frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: none; clip-path: inset(0);
}
/* 初始隐藏只靠 clip-path（无 JS 时 base 即终态、可见）。不再有 opacity 过渡 —— 见上面 ③。 */
.deepen .js .shot__frame img { clip-path: inset(0 0 100% 0); }
/* ---------- 出图结果「动起来」：静态海报 → 成片（2026-10-13） ----------
   视频绝对定位盖在 <img> 上，随第 4 段末尾的滚动淡入。
   ★ 「没有边框直接去播放」：视频期把画框那 1px 描边隐掉（border-color:transparent）；
     圆角与阴影**沿用画框自身** —— 视频自己再画一遍会与外框错开成双影。
   ★ object-fit:cover：本片原生 16:9、画框 2:3。实测竖裁后赛车主体完整（两侧只是空赛道），
     比横版更聚焦；用 contain 会留下下黑边 —— 那正是用户说的「边框」。
   ★ 淡入用 opacity 不用 clip-path：海报仍在底下，是**叠化**而不是擦除，
     读起来是「同一张作品动了起来」，不是换了一张图。
   ★ 不写 CSS transition：淡入进度由滚动驱动（与 block 里其它揭示状态同一条规矩），
     再加 transition 会与滚动抢帧 —— 表现为「滚过去了视频还在慢慢淡」。
   ★ 无 JS 时保持 opacity:0 ⇒ 只看到海报，不会凭空冒出一段黑视频。 */
.deepen .shot__vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; opacity: 0; pointer-events: none;
}
.deepen .shot__frame.is-video { border-color: transparent; }
.deepen .shot__note {
  position: absolute; inset: 0; display: none; place-items: center; padding: 24px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  font-size: 13px; line-height: 1.7; color: var(--ink-2); text-align: center;
}
.deepen .shot.is-dim .shot__note { display: grid; }
.deepen .shot.is-dim .shot__frame img { opacity: .28; }
.deepen .shot__cap { font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em; color: var(--ink-4); text-align: center; }
/* ---------- 满屏期（.pin.is-bleed）----------
   出图那一刻，画框被 scale 到盖住整个视口 ⇒ 把周边（面包屑 / 页脚刻度 / 进度条 / 状态行 / 图注）
   整体隐掉，让作品独占整页；随滚动缩回画框时再淡回来。
   舞台要提到页脚之上（页脚是后一个 grid 子项，默认会盖在舞台上）。 */
.deepen .pin.is-bleed .pin__stage { z-index: 2; }
.deepen .pin.is-bleed .crumb, .deepen .pin.is-bleed .pin__foot, .deepen .pin.is-bleed .gen__bar, .deepen .pin.is-bleed .gen__meta, .deepen .pin.is-bleed .shot__cap { opacity: 0; }
.deepen .crumb, .deepen .pin__foot, .deepen .gen__bar, .deepen .gen__meta, .deepen .shot__cap { transition: opacity .3s var(--ease-out); }
/* 进度条：宽度 = 画框宽度（同一个 --fh 推出来），所以三样东西左右对齐。
   光头靠 fill 自身的 box-shadow —— ★ 外层**不能** overflow:hidden
   （6px 高的元素配 10px 光会被纵向裁掉，那就只剩一条暖色右缘、没有光头）。 */
.deepen .gen__bar {
  position: relative; width: calc(var(--fh) * 2 / 3); height: 6px;
  border-radius: 6px; background: var(--well);
}
.deepen .gen__bar i {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  box-shadow: 0 0 10px rgba(224,154,46,.55);
}
.deepen .gen__meta {
  display: flex; align-items: baseline; gap: 8px; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-4);
}
.deepen .gen__meta b { font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
/* ---------- 页脚进度：招 5 · 章节刻度 ---------- */
.deepen .pin__foot {
  position: relative; display: flex; align-items: center; gap: 16px;
  max-width: 900px; width: 100%; margin: 0 auto; padding: 0 28px 26px;
}
.deepen .step { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-3); white-space: nowrap; }
.deepen .bar { position: relative; flex: 1 1 auto; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.deepen .bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent); box-shadow: 0 0 10px rgba(224,154,46,.5); }
.deepen .jump { display: flex; gap: 6px; }
.deepen .jump button {
  position: relative; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid var(--line); background: var(--surface);
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
  transition: color .16s var(--ease-out), border-color .16s var(--ease-out), background-color .16s var(--ease-out), box-shadow .16s var(--ease-out);
}
.deepen .jump button:hover { color: var(--ink); border-color: var(--ink-3); }
.deepen .jump button.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.deepen .jump__n { position: relative; z-index: 1; }
/* ---------- 技术说明 ---------- */
.deepen .howto { max-width: 900px; margin: 0 auto; padding: 40px 28px 120px; }
.deepen .howto__hd { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 8px; }
.deepen .howto__sub { margin: 0 0 26px; font-size: 14px; color: var(--ink-3); }
.deepen .howto ol { display: grid; gap: 14px; counter-reset: h; }
.deepen .howto li {
  position: relative; padding: 16px 20px 16px 54px;
  border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-soft);
  font-size: 14px; line-height: 1.8; color: var(--ink-2);
}
.deepen .howto li::before {
  counter-increment: h; content: counter(h, decimal-leading-zero);
  position: absolute; left: 18px; top: 16px;
  font-family: var(--font-mono); font-size: 12px; color: var(--accent-ink);
}
.deepen .howto b { color: var(--ink); }
.deepen .howto code {
  padding: 1px 6px; border-radius: var(--r-xs);
  background: var(--well); font-family: var(--font-mono); font-size: 12.5px; color: var(--ink);
}
/* ---------- 窄屏 ---------- */
@media (max-width: 760px) {
.deepen .opts { grid-template-columns: minmax(0, 1fr); }
.deepen .opt { padding: 12px 14px; }
.deepen .opt__d { margin-top: 4px; }
.deepen .askbox { height: 62px; border-radius: 20px; padding: 0 12px 0 18px; gap: 12px; }
.deepen .askbox__text { font-size: 16px; }
.deepen .askbox__mark { width: 22px; height: 22px; }
.deepen .askbox__send { width: 36px; height: 36px; }
.deepen .q { font-size: 20px; margin-bottom: 12px; }
.deepen .spec__row { grid-template-columns: 46px minmax(0, 1fr); gap: 10px; padding: 9px 14px; }
/* 窄屏出图：高度改由 --fh 统一驱动（进度条宽度跟着它算，见 .gen__bar） */
.deepen .shot { --fh: min(74vh, 92vw); }
/* Q5 · 触控目标：按钮本体 44×44，可见圆环仍 ~30px（用伪元素画），相邻中心距 = 44px */
.deepen .jump { gap: 0; }
.deepen .jump button {
    width: 44px; height: 44px; border: 0; border-radius: 0; background: none;
  }
.deepen .jump button::before {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 30px; height: 30px; margin: -15px 0 0 -15px; z-index: 0;
    border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface);
    transition: color .16s var(--ease-out), border-color .16s var(--ease-out), background-color .16s var(--ease-out), box-shadow .16s var(--ease-out);
  }
.deepen .jump button:hover { border: 0; }
.deepen .jump button.is-on { border: 0; background: none; }
.deepen .jump button.is-on::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
}
@media (max-width: 480px) {
/* Q5 · 步骤文字收成 1/4（阶段名交给圆点的 aria-label），给 4×44px 让位 */
.deepen .step__name { display: none; }
}
@media (max-height: 720px) {
.deepen .shot { --fh: min(64vh, 90vw); }
.deepen .spec__v { font-size: 12.5px; line-height: 1.6; }
}
/* ---------- reduced-motion：只降运动，不降内容（滚动切换阶段照常） ---------- */
@media (prefers-reduced-motion: reduce) {
.deepen .msg.is-active .msg__full, .deepen .opt, .deepen .spec__row, .deepen .shot__frame img { animation: none !important; transition: none !important; }
/* ★ clip-path 是新属性，必须显式兜底 —— 否则元素被整块裁没 */
.deepen .opt, .deepen .spec__row { opacity: 1 !important; transform: none !important; clip-path: none !important; }
.deepen .hd__hint, .deepen .caret { animation: none; }
/* 本轮新增的三样：演示光标、打字机光标、左侧色条 —— reduce 下全部瞬时（光标直接就位、不按动） */
.deepen .cursor { transition: none !important; }
.deepen .cursor.is-click { animation: none !important; }
.deepen .spec__caret, .deepen .opt::before { animation: none !important; transition: none !important; }
.deepen .crumb, .deepen .pin__foot, .deepen .gen__bar, .deepen .gen__meta, .deepen .shot__cap { transition: none !important; }
/* 图瞬时到终态：无擦除、无落定缩放（落定缩放是 JS 写的 inline transform，这里一并按住） */
.deepen .shot__frame, .deepen .shot__frame img { transform: none !important; }
/* 满屏层在 reduce 下整层不出现 —— 那一下是纯运动，没有信息量 */
.deepen .pin__bleed { display: none !important; }
.deepen .shot__frame img { clip-path: inset(0) !important; opacity: 1 !important; transition: none !important; }
.deepen .shot.is-dim .shot__frame img { opacity: .28 !important; }
  /* glow 冻结在阶段 2 档：CSS 基础值已是该终态，且 JS 在 reduce 下完全不写 glow */
}