/* ============================================================
   小龙虾养法站 · base.css
   皮肤 = 网站工厂 07「白底长文」+ 06「排版与网格基因」
   暖白纸底 · 近黑暖墨 · 朱砂唯一跳色 · 黑墨 canvas 特效 · 黑块稀缺承重
   ============================================================ */

:root{
  /* —— 色 (07 §1) —— */
  --paper:#faf8f2; --card:#ffffff; --warm:#f3efe6; --edge:#e8e3d7; --rule:#e6e1d4;
  --ink:#161310; --ink-soft:#403b32; --ink-mute:#6c6657; --ink-faint:#a8a294;
  --accent:#c1272d; --accent-deep:#8e1a1f; --accent-glow:rgba(193,39,45,.14);
  --ink-block:#100e0b;
  /* 语义变量(切章只改这几个,别动原子色) */
  --bg:var(--paper); --fg:var(--ink); --fg-soft:var(--ink-soft); --fg-mute:var(--ink-mute); --line:var(--rule);

  /* —— 字 —— Latin/数字/标签走 mono+grotesk;中文走系统无衬线(避免巨大字体负载与中国大陆访问问题) */
  --sans:"Space Grotesk",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,sans-serif;
  --cjk:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,"Cascadia Code","SFMono-Regular",Consolas,monospace;

  /* —— 字号体系 (07 §2 · perfect-fourth 甜区,大字稀贵,cap 给够大) —— */
  --fs-hero: clamp(3.1rem, 9vw, 9rem);
  --fs-h1:   clamp(2.2rem, 5.4vw, 4.6rem);
  --fs-h2:   clamp(1.55rem, 3.4vw, 2.8rem);   /* 金句 break-out */
  --fs-h3:   clamp(1.22rem, 1.1rem + .8vw, 1.6rem);
  --fs-lede: clamp(1.2rem, 1.04rem + .8vw, 1.78rem);
  --fs-body: clamp(1.08rem, 1.02rem + .34vw, 1.24rem);
  --fs-small: .9rem; --fs-cap:.78rem;

  /* —— 间距音阶 (对数刻度,跳跃本身编码等级 06 §5) —— */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:40px; --s-5:64px; --s-6:104px; --s-7:160px;

  /* —— 版式 (07 §3 居中阅读列) —— */
  --pad:clamp(22px,7vw,128px);
  --maxw:1320px;
  --measure:min(40em,100%);
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
body{
  font-family:var(--cjk); background:var(--paper); color:var(--ink);
  font-size:var(--fs-body); line-height:1.85; overflow-x:clip;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  letter-spacing:.005em;
}
::selection{ background:var(--accent); color:#fff; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* JS 门控:无 JS 时全部显示(防 FOUC) */
html.js [data-rev]{ opacity:0; transform:translateY(16px); }

/* ============================================================
   章节骨架
   ============================================================ */
section{
  position:relative;
  padding-block:clamp(72px,12vh,168px);
  padding-inline:var(--pad);
  background:var(--bg); color:var(--fg);
  transition:background .5s var(--ease), color .5s var(--ease);
}
.col{ max-width:var(--maxw); margin-inline:auto; position:relative; }
.read{ max-width:var(--measure); margin-inline:auto; }

/* 暖白 / 黑块 双模 (07 §4) */
.s-paper{ --bg:var(--paper); --fg:var(--ink); --fg-soft:var(--ink-soft); --fg-mute:var(--ink-mute); --line:var(--rule); }
.s-warm{  --bg:var(--warm);  --fg:var(--ink); --fg-soft:var(--ink-soft); --fg-mute:var(--ink-mute); --line:var(--edge); }
.s-ink{   --bg:var(--ink-block); --fg:#f7f4ee; --fg-soft:rgba(247,244,238,.78); --fg-mute:rgba(247,244,238,.5); --line:rgba(255,255,255,.14); }

/* ---------- reveal (07 §5 · 轻淡入,触发一次) ---------- */
html.js [data-rev].is-in{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }

/* ============================================================
   排版组件
   ============================================================ */
.kicker{
  font-family:var(--mono); font-size:var(--fs-cap); letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent); font-weight:700;
  display:flex; align-items:center; gap:.7em; margin-bottom:var(--s-3);
}
.kicker::before{ content:""; width:34px; height:1px; background:var(--accent); display:inline-block; }

.h-num{
  font-family:var(--mono); font-size:clamp(2.6rem,7vw,5.4rem); font-weight:700;
  color:transparent; -webkit-text-stroke:1.4px var(--ink-faint); line-height:1;
  letter-spacing:-.02em; opacity:.7;
}
.s-ink .h-num{ -webkit-text-stroke-color:rgba(255,255,255,.3); }

h2.h-title{
  font-family:var(--cjk); font-weight:800; font-size:var(--fs-h1);
  line-height:1.08; letter-spacing:-.018em; margin:.18em 0 .55em;
  max-width:18ch;
}
.lede{
  font-size:var(--fs-lede); line-height:1.55; color:var(--fg-soft);
  font-weight:400; max-width:24em; margin-bottom:var(--s-4);
}
h3.sub{
  font-family:var(--cjk); font-weight:700; font-size:var(--fs-h3);
  line-height:1.3; letter-spacing:-.01em; color:var(--fg);
  margin:var(--s-5) 0 var(--s-2); padding-top:var(--s-2);
  display:flex; align-items:baseline; gap:.6em;
}
h3.sub::before{
  content:""; flex:0 0 auto; width:7px; height:7px; margin-top:.1em;
  background:var(--accent); border-radius:50%;
}
p.body{ margin-block:var(--s-2); color:var(--fg); }
p.body + p.body{ margin-top:var(--s-3); }
strong{ font-weight:700; color:var(--fg); }
em{ font-style:normal; color:var(--accent-deep); font-weight:700; }
.s-ink em{ color:#ffb4a0; }
.accent{ color:var(--accent); }

/* 纸感荧光笔 (07 §6) */
mark{
  background:linear-gradient(transparent 54%, var(--accent-glow) 54%);
  background-repeat:no-repeat; background-size:0% 100%;
  color:inherit; padding:0 .04em; transition:background-size .7s var(--ease) .15s;
  font-weight:700;
}
.is-in mark{ background-size:100% 100%; }

/* 原话:引文左竖线 (07 §6) */
blockquote.q{
  position:relative; margin:var(--s-3) 0; padding:.2em 0 .2em 1.4em;
  border-left:2px solid var(--accent); color:var(--fg-soft);
  font-size:1.02em; line-height:1.78;
}
blockquote.q::before{
  content:"“"; position:absolute; left:.42em; top:-.15em;
  font-family:var(--mono); color:var(--accent); opacity:.5; font-size:1.3em;
}

/* 金句 break-out (居中破栏,用负 margin 不用 transform · 坑 #47) */
.big-quote{
  font-family:var(--cjk); font-weight:700; font-size:var(--fs-h2);
  line-height:1.42; letter-spacing:-.012em; color:var(--fg);
  width:min(56rem,100%); margin-inline:calc((var(--measure) - min(56rem,100%))/2);
  margin-block:var(--s-5); text-wrap:balance;
}
@media(max-width:1100px){ .big-quote{ width:100%; margin-inline:0; } }

/* 章末黑色 punch (在白底章内的稀缺黑条) */
.punch{
  background:var(--ink-block); color:#f7f4ee; border-radius:4px;
  font-family:var(--cjk); font-weight:700; font-size:clamp(1.4rem,3.2vw,2.4rem);
  line-height:1.45; padding:clamp(40px,6vw,80px); margin-top:var(--s-6);
  width:min(56rem,100%); margin-inline:auto; letter-spacing:-.01em;
  position:relative; overflow:hidden;
}
.punch::after{
  content:"§06"; position:absolute; right:.6em; bottom:.2em;
  font-family:var(--mono); font-size:3rem; color:rgba(255,255,255,.06); font-weight:700;
}

/* 列表 */
ul.list{ list-style:none; margin:var(--s-3) 0; max-width:var(--measure); }
ul.list li{
  position:relative; padding-left:1.5em; margin-block:var(--s-2); color:var(--fg-soft);
}
ul.list li strong{ color:var(--fg); }
ul.list li::before{
  content:"→"; position:absolute; left:0; color:var(--accent);
  font-family:var(--mono); font-weight:700;
}

/* 小字旁注 */
p.note{
  font-size:var(--fs-small); color:var(--fg-mute); line-height:1.7;
  border-top:1px solid var(--line); padding-top:var(--s-2); margin-top:var(--s-4);
  max-width:var(--measure);
}

/* 表格 */
.tbl-wrap{ margin:var(--s-4) 0; max-width:var(--measure); overflow-x:auto; }
table{ border-collapse:collapse; width:100%; font-size:.96em; }
table th{
  text-align:left; font-family:var(--mono); font-size:var(--fs-cap);
  letter-spacing:.1em; text-transform:uppercase; color:var(--fg-mute);
  font-weight:700; padding:.6em .9em; border-bottom:2px solid var(--ink);
}
table td{ padding:.85em .9em; border-bottom:1px solid var(--line); color:var(--fg-soft); vertical-align:top; }
table tr:last-child td{ border-bottom:none; }
table td:first-child{ font-weight:700; color:var(--fg); white-space:nowrap; }

/* ============================================================
   常驻阅读层 (chrome)
   ============================================================ */
/* 顶部朱砂进度脊柱 */
.spine{ position:fixed; top:0; left:0; right:0; height:3px; z-index:90; pointer-events:none; }
.spine i{ display:block; height:100%; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:0 50%; }

/* 顶部细页眉 */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:80; height:54px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(16px,4vw,34px); pointer-events:none;
  font-family:var(--mono); font-size:var(--fs-cap); letter-spacing:.08em;
  color:var(--ink-mute); mix-blend-mode:difference; color:#fff;
}
.topbar .brand{ font-weight:700; text-transform:uppercase; }
.topbar .pct{ font-variant-numeric:tabular-nums; }

/* 右侧章节圆点 rail (scrollspy) */
.rail{
  position:fixed; right:clamp(12px,2.2vw,30px); top:50%; transform:translateY(-50%);
  z-index:80; display:flex; flex-direction:column; gap:13px; align-items:flex-end;
}
.rail a{ display:flex; align-items:center; gap:9px; pointer-events:auto; }
.rail .dot{ width:8px; height:8px; border-radius:50%; border:1.5px solid var(--ink-faint); background:transparent; transition:.3s var(--ease); }
.rail .lbl{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.05em; color:var(--ink-mute);
  opacity:0; transform:translateX(6px); transition:.3s var(--ease); white-space:nowrap; text-transform:uppercase;
}
.rail a:hover .lbl{ opacity:1; transform:none; }
.rail a.on .dot{ background:var(--accent); border-color:var(--accent); transform:scale(1.35); }
.rail a.on .lbl{ opacity:1; transform:none; color:var(--accent); }
/* 黑块章节里 rail 自动翻白 */
.rail.inv .dot{ border-color:rgba(255,255,255,.4); }
.rail.inv .lbl{ color:rgba(255,255,255,.6); }

/* 「继续上次」浮条 */
.resume{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(40px);
  z-index:85; background:var(--ink-block); color:#f7f4ee; border-radius:40px;
  padding:11px 20px; font-size:.86rem; display:flex; align-items:center; gap:14px;
  box-shadow:0 8px 30px rgba(0,0,0,.18); opacity:0; pointer-events:none; transition:.5s var(--ease);
}
.resume.show{ opacity:1; transform:translateX(-50%); pointer-events:auto; }
.resume b{ color:#ffb4a0; font-family:var(--mono); }
.resume button{
  background:var(--accent); color:#fff; border:none; border-radius:30px;
  padding:6px 14px; font-size:.82rem; cursor:pointer; font-family:inherit; font-weight:700;
}
.resume .x{ background:transparent; color:rgba(255,255,255,.5); padding:4px 6px; }

/* odometer 数字 */
.odo{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.hero canvas.bg{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero .col{ z-index:2; }
.hero .eyebrow{
  font-family:var(--mono); font-size:var(--fs-cap); letter-spacing:.3em;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:var(--s-3);
}
.hero h1{
  font-family:var(--sans); font-weight:700; font-size:var(--fs-hero);
  line-height:.98; letter-spacing:-.035em; color:var(--ink);
}
.hero h1 .r2{ color:var(--accent); display:block; }
.hero .tag{
  font-size:var(--fs-lede); color:var(--ink-soft); max-width:26em;
  margin-top:var(--s-4); line-height:1.5;
}
.hero .meta-note{
  font-family:var(--mono); font-size:var(--fs-cap); color:var(--ink-faint);
  margin-top:var(--s-3); letter-spacing:.03em;
}
.scrollcue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; color:var(--ink-mute);
  text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scrollcue .ln{ width:1px; height:34px; background:linear-gradient(var(--ink-faint),transparent); animation:cue 2s var(--ease) infinite; transform-origin:top; }
@keyframes cue{ 0%,100%{transform:scaleY(.4);opacity:.4} 50%{transform:scaleY(1);opacity:1} }

/* ============================================================
   CREED (三句话)
   ============================================================ */
.creed .line{ padding-block:var(--s-4); border-top:1px solid var(--line); }
.creed .line:first-of-type{ border-top:none; }
.creed .idx{ font-family:var(--mono); color:var(--accent); font-size:var(--fs-cap); letter-spacing:.1em; }
.creed .big{
  font-family:var(--cjk); font-weight:800; font-size:clamp(1.7rem,4.4vw,3.4rem);
  line-height:1.28; letter-spacing:-.02em; margin:.2em 0 .25em; text-wrap:balance; max-width:20ch;
}
.creed .small{ color:var(--fg-mute); font-size:var(--fs-lede); max-width:30em; }

/* ============================================================
   FX 通用容器
   ============================================================ */
.fx{ margin:var(--s-5) auto; width:min(60rem,100%); }
.fx-hint{
  font-family:var(--mono); font-size:var(--fs-cap); letter-spacing:.08em;
  color:var(--fg-mute); text-transform:uppercase; margin-bottom:var(--s-2);
  display:flex; align-items:center; gap:.6em;
}
.fx-hint::before{ content:"◆"; color:var(--accent); font-size:.8em; }
.fx canvas{ display:block; width:100%; }

/* —— 可点阶梯 (ch1) —— */
.steps{ display:grid; gap:14px; }
.step{
  position:relative; border:1px solid var(--line); border-radius:6px; background:var(--card);
  padding:22px 26px; cursor:pointer; display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center;
  transition:.4s var(--ease); overflow:hidden;
}
.step::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); transform:scaleY(0); transform-origin:0 0; transition:transform .4s var(--ease); }
.step .st-tag{ font-family:var(--mono); font-size:1.5rem; font-weight:700; color:var(--ink-faint); transition:.4s; width:1.5em; text-align:center; }
.step .st-name{ font-weight:700; font-size:1.2rem; color:var(--ink); }
.step .st-desc{ color:var(--ink-mute); font-size:.95rem; margin-top:3px; }
.step .st-plat{ font-family:var(--mono); font-size:.78rem; color:var(--ink-faint); text-align:right; white-space:nowrap; }
.step:hover{ transform:translateY(-2px); border-color:var(--ink-faint); }
.step.lit{ border-color:var(--accent); background:#fff; }
.step.lit::before{ transform:scaleY(1); }
.step.lit .st-tag{ color:var(--accent); }
.step.lit .st-plat{ color:var(--accent-deep); }
.steps-bar{ height:4px; background:var(--edge); border-radius:3px; margin-top:18px; overflow:hidden; }
.steps-bar i{ display:block; height:100%; width:0; background:var(--accent); transition:width .5s var(--ease); }
.steps-cap{ font-family:var(--mono); font-size:var(--fs-cap); color:var(--fg-mute); margin-top:10px; text-align:center; }

/* —— 元交互自证 (ch2) —— */
.meta{ border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--card); }
.meta-tabs{ display:flex; border-bottom:1px solid var(--line); }
.meta-tabs button{
  flex:1; background:var(--warm); border:none; padding:16px; cursor:pointer; font-family:inherit;
  font-weight:700; color:var(--ink-mute); font-size:1rem; transition:.3s; border-right:1px solid var(--line);
}
.meta-tabs button:last-child{ border-right:none; }
.meta-tabs button.on{ background:var(--card); color:var(--ink); box-shadow:inset 0 -3px 0 var(--accent); }
.meta-body{ padding:28px clamp(20px,4vw,38px); }
.meta-prose{ font-family:var(--mono); font-size:1rem; color:var(--ink-soft); background:var(--warm); border-radius:5px; padding:16px 18px; line-height:1.6; }
.meta-stage{ position:relative; height:230px; margin-top:20px; border-radius:6px; overflow:hidden; background:var(--ink-block); }
.meta-stage canvas{ position:absolute; inset:0; height:100%; }
.meta-fail{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px;
  background:repeating-linear-gradient(45deg,#e8e3d7,#e8e3d7 14px,#ddd6c6 14px,#ddd6c6 28px); color:var(--ink-mute);
}
.meta-fail .face{ font-size:2.4rem; filter:grayscale(1); }
.meta-fail .txt{ font-family:var(--mono); font-size:.84rem; letter-spacing:.05em; }
.meta-result{ margin-top:16px; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:10px; }
.meta-result .badge{ font-family:var(--mono); font-size:.7rem; padding:3px 8px; border-radius:3px; letter-spacing:.06em; }
.meta-result.bad .badge{ background:var(--edge); color:var(--ink-mute); }
.meta-result.good .badge{ background:var(--accent); color:#fff; }

/* —— odometer 成本账 (ch3) —— */
.ledger{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.ledger .cell{ background:var(--card); padding:30px 26px; }
.ledger .num{ font-family:var(--mono); font-size:clamp(2rem,5vw,3.2rem); font-weight:700; color:var(--ink); line-height:1; letter-spacing:-.02em; }
.ledger .num .pfx,.ledger .num .sfx{ font-size:.42em; color:var(--ink-mute); font-weight:700; }
.ledger .num .pfx{ margin-right:.1em; } .ledger .num .sfx{ margin-left:.15em; }
.ledger .cell:nth-child(4) .num{ color:var(--accent); }
.ledger .lbl{ font-size:.86rem; color:var(--ink-mute); margin-top:12px; line-height:1.4; }

/* —— 配置→生长 toggle (ch4a) —— */
.cfg-wrap{ border:1px solid var(--line); border-radius:8px; background:var(--card); padding:clamp(20px,3.5vw,34px); }
.cfg-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; position:relative; z-index:2; }
.cfg-card{ border:1px solid var(--line); border-radius:5px; padding:14px 16px; background:var(--warm); transition:.6s var(--ease); }
.cfg-card .f{ font-family:var(--mono); font-weight:700; font-size:.92rem; color:var(--ink); }
.cfg-card .d{ font-size:.8rem; color:var(--ink-mute); margin-top:5px; line-height:1.4; }
.cfg-wrap.grown .cfg-card{ opacity:.18; filter:grayscale(1); transform:scale(.96); }
.cfg-stage{ position:relative; height:300px; margin-top:18px; }
.cfg-stage canvas{ position:absolute; inset:0; height:100%; opacity:0; transition:opacity .7s var(--ease); }
.cfg-wrap.grown .cfg-stage canvas{ opacity:1; }
.cfg-stage .ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:.82rem; color:var(--ink-faint); letter-spacing:.08em; }
.cfg-wrap.grown .cfg-stage .ph{ display:none; }

/* —— toggle 控件通用 (data-on=0 → A 态默认 / data-on=1 → B 态触发) —— */
.toggle{ display:inline-flex; align-items:center; gap:0; border:1.5px solid var(--fg); border-radius:40px; overflow:hidden; cursor:pointer; user-select:none; margin-bottom:22px; }
.toggle .opt{ padding:9px 20px; font-family:var(--mono); font-size:.82rem; font-weight:700; letter-spacing:.03em; transition:.3s var(--ease); color:var(--fg-mute); white-space:nowrap; }
.toggle[data-on="0"] .opt-a{ background:var(--ink); color:var(--paper); }
.toggle[data-on="1"] .opt-b{ background:var(--accent); color:#fff; }
.s-ink .toggle[data-on="0"] .opt-a{ background:#f7f4ee; color:var(--ink); }

/* —— 力导向图谱 (ch4b) —— */
.graph{ border:1px solid var(--line); border-radius:8px; background:radial-gradient(120% 120% at 50% 0%, #fff, var(--paper)); }
.graph canvas{ height:clamp(360px,52vh,540px); touch-action:none; cursor:grab; }
.graph canvas:active{ cursor:grabbing; }

/* —— push-back 物理 (ch5) —— */
.pushback{ border:1px solid var(--line); border-radius:8px; background:var(--card); }
.pushback canvas{ height:clamp(320px,46vh,460px); touch-action:none; cursor:grab; }
.pushback canvas:active{ cursor:grabbing; }
.pb-read{ font-family:var(--mono); font-size:var(--fs-cap); color:var(--fg-mute); text-align:center; padding:12px; letter-spacing:.04em; border-top:1px solid var(--line); }
.pb-read b{ color:var(--accent); }

/* —— 拿掉 AI 坍塌 (ch6) —— */
.collapse{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:680px){ .collapse{ grid-template-columns:1fr; } }
.col-card{ border:1px solid var(--line); border-radius:8px; padding:clamp(22px,3vw,34px); position:relative; transition:.6s var(--ease); background:var(--card); overflow:hidden; min-height:200px; }
.col-card .t{ font-family:var(--mono); font-weight:700; font-size:1.15rem; letter-spacing:.02em; color:var(--ink); margin-bottom:12px; }
.col-card .d{ color:var(--ink-soft); line-height:1.6; }
.col-card .verdict{ position:absolute; left:0; right:0; bottom:0; padding:14px; text-align:center; font-family:var(--mono); font-size:.82rem; font-weight:700; letter-spacing:.04em; background:var(--ink-block); color:#ffb4a0; transform:translateY(100%); transition:.5s var(--ease); }
/* AI 拿掉时 */
.collapse.gone .col-card.assisted{ opacity:.62; filter:grayscale(.6); }
.collapse.gone .col-card.native{ opacity:.32; transform:scale(.9) translateY(8px); filter:grayscale(1) blur(.4px); }
.collapse.gone .col-card.native .verdict{ transform:none; }

/* ============================================================
   金句索引
   ============================================================ */
.qindex .grp{ margin-bottom:var(--s-5); }
.qindex .grp h4{ font-family:var(--mono); font-size:var(--fs-cap); letter-spacing:.16em; text-transform:uppercase; color:var(--accent); border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:var(--s-2); }
.qindex a.qitem{
  display:block; padding:16px 0; border-bottom:1px solid var(--line);
  font-family:var(--cjk); font-weight:700; font-size:clamp(1.05rem,2.2vw,1.42rem);
  line-height:1.45; color:var(--ink-soft); transition:.3s var(--ease); position:relative; padding-right:2em;
}
.qindex a.qitem::after{ content:"↗"; position:absolute; right:.2em; top:16px; font-family:var(--mono); color:var(--ink-faint); opacity:0; transition:.3s; }
.qindex a.qitem:hover{ color:var(--ink); padding-left:.6em; }
.qindex a.qitem:hover::after{ opacity:1; color:var(--accent); }

/* ============================================================
   CODA (终幕黑块)
   ============================================================ */
.coda{ min-height:96svh; display:flex; align-items:center; overflow:hidden; }
.coda canvas.bg{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.coda .col{ z-index:2; text-align:center; }
.coda .line{ font-family:var(--cjk); font-weight:800; font-size:clamp(2rem,6vw,4.6rem); line-height:1.2; letter-spacing:-.02em; color:#f7f4ee; text-wrap:balance; max-width:18ch; margin-inline:auto; }
.coda .line .em{ color:var(--accent); }
.coda .sub{ color:rgba(247,244,238,.6); font-size:var(--fs-lede); margin-top:var(--s-3); }
.coda .sig{ font-family:var(--mono); font-size:var(--fs-cap); letter-spacing:.1em; color:rgba(247,244,238,.4); margin-top:var(--s-6); text-transform:uppercase; }

footer{ background:var(--ink-block); color:rgba(247,244,238,.5); padding:30px var(--pad); font-family:var(--mono); font-size:var(--fs-cap); display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; letter-spacing:.05em; }
footer a{ color:rgba(247,244,238,.75); border-bottom:1px solid var(--accent); }

/* ============================================================
   响应式 (手机:零横向溢出 · 坑 #33)
   ============================================================ */
@media(max-width:760px){
  :root{ --measure:100%; }
  .rail{ display:none; }
  h2.h-title{ max-width:100%; }
  .step{ grid-template-columns:auto 1fr; }
  .step .st-plat{ display:none; }
  .topbar .brand{ max-width:50vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .meta-tabs button{ font-size:.86rem; padding:13px 8px; }
}

/* reduced-motion:全部退化为终态 */
@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; }
  html.js [data-rev]{ opacity:1; transform:none; }
  .scrollcue{ display:none; }
  mark{ background-size:100% 100%; }
}