/* ============================================================
   ch02「Python与数值计算」章节专属样式
   境界：炼气二层·代码炼器 · 境界色靛蓝 #3B82F6
   Boss：循环之魔 · 暗红 #B91C1C（for 关键字鳞片）
   导师：贝叶斯先师
   顿悟：突破金 var(--ch-epiphany)（理解发生之处 / 金光裂纹 / 顿悟脉冲）
   循环债：赤红 var(--ch-boss)（循环之魔记账）
   排除刻痕：靛蓝微光 #3B82F6（此路不通录）
   法器三色：NumPy 靛蓝 #3B82F6 / Pandas 翠 #10B981 / PyTorch 琥珀 var(--ch-amber)
   背景：暖深蓝灰 var(--ch-bg-warm)（禁止纯黑）
   全部色值走 tokens 变量；玻璃态卡片；发光仅限边框/背景。
   ============================================================ */

/* ---------- 章节境界色覆写：靛蓝 ---------- */
:root, :root[data-theme="light"] {
  --accent: #2563EB;
  --accent-ink: #1D4ED8;
  --accent-soft: rgba(59, 130, 246, 0.12);
  --glass-line: rgba(59, 130, 246, 0.22);
  --glow: 0 0 18px rgba(59, 130, 246, 0.28);
  --on-accent: #FFFFFF;
  --r-xs: 4px;
}
:root[data-theme="dark"] {
  --accent: #3B82F6;
  --accent-ink: #60A5FA;
  --accent-soft: rgba(59, 130, 246, 0.16);
  --glass-line: rgba(59, 130, 246, 0.24);
  --glow: 0 0 22px rgba(59, 130, 246, 0.34);
  --on-accent: #06122A;
  --r-xs: 4px;
}

/* ---------- 章节专用叙事色 ---------- */
:root {
  --ch-boss: #B91C1C;          /* 循环之魔 · 暗红 */
  --ch-boss-ink: #FCA5A5;      /* 鳞片光 */
  --ch-boss-soft: rgba(185, 28, 28, 0.18);
  --ch-boss-line: rgba(185, 28, 28, 0.42);
  --ch-epiphany: var(--ch-epiphany);      /* 顿悟突破金（理解发生之处） */
  --ch-epiphany-soft: rgba(251, 191, 36, 0.16);
  --ch-epiphany-ink: #D97706;
  --ch-conflict: var(--ch-boss);      /* 冲突赤红 */
  --ch-conflict-soft: rgba(239, 68, 68, 0.14);
  --ch-conflict-ink: #DC2626;
  --ch-indigo: #3B82F6;        /* 境界靛蓝 / 法器之光 */
  --ch-indigo-soft: rgba(59, 130, 246, 0.14);
  --ch-indigo-ink: #1D4ED8;
  /* 三条贯穿机制色 */
  --loop-debt: var(--ch-boss);        /* 循环债赤红光页 */
  --loop-debt-soft: rgba(239, 68, 68, 0.12);
  --carve-mark: #3B82F6;       /* 排除刻痕靛蓝微光 */
  --carve-soft: rgba(59, 130, 246, 0.14);
  /* 法器三色 */
  --weapon-numpy: #3B82F6;     /* NumPy 靛蓝 */
  --weapon-pandas: #10B981;    /* Pandas 翠 */
  --weapon-pytorch: var(--ch-amber);   /* PyTorch 琥珀 */
  /* 场景分层功能色 */
  --layer-py: var(--ch-epiphany);         /* Python 语法层金 */
  --layer-vec: #3B82F6;        /* 向量化层靛蓝 */
  --layer-linalg: #38BDF8;     /* 线代层天蓝 */
  --layer-data: #10B981;        /* 数据层翠 */
  --layer-float: #A78BFA;       /* 浮点层紫 */
  --layer-viz: var(--ch-amber);         /* 可视化层琥珀 */
  --layer-prep: #22C55E;       /* 预处理层绿 */
  --layer-grad: #3B82F6;        /* 梯度层靛蓝 */
  /* S0 三段代码剪影 */
  --case-sum: #3B82F6;         /* 求和靛蓝 */
  --case-matmul: #10B981;       /* 矩阵乘翠 */
  --case-sort: var(--ch-amber);        /* 排序琥珀 */
  /* S2 广播 */
  --broadcast-band: #60A5FA;   /* 广播拉伸光带 */
  --index-bool: #22C55E;       /* 布尔索引绿 */
  --index-fancy: var(--ch-epiphany);      /* 花式索引金 */
  --index-slice: #A78BFA;      /* 切索引紫 */
  /* S3 性能差距 */
  --perf-for: #B91C1C;         /* for 循环慢红 */
  --perf-vec: #3B82F6;         /* 向量化快蓝 */
  /* S4 条件数 */
  --cond-well: #22C55E;        /* 良态绿 */
  --cond-ill: var(--ch-boss);         /* 病态红 */
  --solve-flow: #3B82F6;       /* solve 流 */
  /* S5 脏数据 */
  --dirty-miss: var(--ch-boss);       /* 缺失红 */
  --dirty-dup: #64748B;        /* 重复灰 */
  --dirty-type: var(--ch-amber);       /* 类型错琥珀 */
  --dirty-out: #F97316;        /* 异常橙 */
  /* S6 浮点 */
  --bit-zero: #3B82F6;         /* 二进制 0 蓝 */
  --bit-one: var(--ch-epiphany);          /* 二进制 1 金 */
  --bit-trunc: var(--ch-boss);        /* 截断红 */
  --nan-spread: var(--ch-boss);       /* nan 溢出红 */
  /* S7 可视化 */
  --viz-line: var(--ch-amber);         /* 图线琥珀 */
  --viz-point: #3B82F6;        /* 数据点蓝 */
  /* S8 数据泄露 */
  --leak-arrow: var(--ch-boss);       /* 泄露红箭头 */
  --train-color: #10B981;      /* 训练集绿 */
  --val-color: var(--ch-boss);        /* 验证集红 */
  /* S9 计算图 */
  --forward-flow: #3B82F6;     /* 前向蓝 */
  --backward-flow: var(--ch-amber);    /* 反向金 */
  --gpu-parallel: #10B981;     /* GPU 并行绿 */
  --cpu-serial: #94A3B8;       /* CPU 串行灰 */
  /* S10 Boss */
  --loop-scale: #7F1D1D;       /* for 鳞片暗红 */
  --weapon-shield: #3B82F6;    /* 法器光盾 */
  --carve-gold: var(--ch-epiphany);       /* 刻痕金光 */
  --breakthrough: #FBBF24;     /* 突破金光 */
  /* 选项/状态色 */
  --opt-correct: #22C55E;
  --opt-wrong: var(--ch-boss);
  --opt-excluded: #475569;
  --ch-ok: #22C55E;
  --ch-warn: var(--ch-boss);
  --ch-bg-warm: var(--ch-bg-warm);       /* 暖深蓝灰背景 */
}

/* ---------- 开场（opening） ---------- */
#opening {
  position: relative; z-index: 2;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-5); text-align: center;
  padding: calc(var(--nav-h) + var(--sp-6)) var(--sp-4) var(--sp-7);
  background: radial-gradient(ellipse at center, var(--bg-sunk) 0%, var(--ch-bg-warm) 70%);
}
.op-title span {
  display: inline-block; opacity: 0;
  text-shadow: 0 0 60px var(--accent-soft), 0 0 24px var(--ch-indigo-soft);
}
.inv-scar {
  display: inline-block; margin-left: var(--sp-1);
  font-size: 0.6rem; color: var(--ch-boss); border: 1px dashed var(--ch-boss); border-radius: 999px; padding: 0 6px;
}
#carve-panel {
  position: absolute; right: 0; bottom: calc(100% + var(--sp-1));
  width: 280px; padding: var(--sp-3); z-index: 85;
}
#carve-panel h3 { font-size: 0.9rem; margin-bottom: var(--sp-2); color: var(--ch-indigo-ink); }
#carve-list p { font-size: 0.8rem; color: var(--carve-mark); margin: var(--sp-1) 0; }
#loop-panel {
  position: absolute; right: 0; bottom: calc(100% + var(--sp-1));
  width: 280px; padding: var(--sp-3); z-index: 85;
}
#loop-panel h3 { font-size: 0.9rem; margin-bottom: var(--sp-2); color: var(--ch-conflict-ink); }
#loop-list p { font-size: 0.8rem; color: var(--loop-debt); margin: var(--sp-1) 0; }
.option.excluded { opacity: 0.3; cursor: default; transform: none; text-decoration: line-through; border-color: var(--opt-excluded); background: rgba(71,85,105,0.16); }
.sim-range, input[type="range"], .knob-range, select { accent-color: var(--accent); }
.btn-warn { border-color: var(--ch-warn); color: var(--ch-warn); }
.btn-warn:hover { background: rgba(239,68,68,0.12); }

/* ---------- 通用 knob 旋钮 ---------- */
.knob-row { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.knob-unit {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); min-width: 120px; transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.knob-unit:hover { border-color: var(--accent); }
.knob-label { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-2); letter-spacing: 0.1em; }
.knob-select {
  padding: 4px 8px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); color: var(--text-1); font-family: var(--font-mono); font-size: 0.82rem;
  cursor: pointer;
}
.knob-select:focus { border-color: var(--accent); outline: none; }

/* ---------- 通用 Jupyter cell 代码块 ---------- */
.jupyter-cell {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-1);
  position: relative; overflow-x: auto; white-space: pre;
}
.jupyter-cell::before {
  content: 'In [ ]:'; display: block; color: var(--text-3); font-size: 0.7rem; margin-bottom: 4px;
}
.jupyter-cell.execed::before { content: 'In [*]:'; color: var(--accent); }
.jupyter-out {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-top: none;
  border-radius: 0 0 var(--r-sm) var(--r-sm); background: var(--bg-sunk);
  font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-2); white-space: pre-wrap;
}
.jupyter-out::before {
  content: 'Out[*]:'; display: block; color: var(--text-3); font-size: 0.7rem; margin-bottom: 4px;
}
.jupyter-out.warn { color: var(--ch-warn); border-color: var(--ch-warn); }
.jupyter-out.ok { color: var(--ch-ok); }
.cell-run-btn {
  margin-top: var(--sp-1); padding: 4px 12px; border: 1px solid var(--accent); border-radius: var(--r-xs);
  background: var(--accent-soft); color: var(--accent-ink); font-family: var(--font-mono); font-size: 0.75rem;
  cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.cell-run-btn:hover { background: var(--accent); color: var(--on-accent); }
.cell-run-btn:disabled { opacity: 0.4; cursor: default; }
.timing-badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-family: var(--font-mono);
  font-size: 0.75rem; margin-left: var(--sp-2); border: 1px solid var(--glass-line); background: var(--bg-elev);
}
.timing-badge.slow { color: var(--perf-for); border-color: var(--perf-for); }
.timing-badge.fast { color: var(--perf-vec); border-color: var(--perf-vec); }

/* ============================================================
   S0 序章 · 速度之赌挑战器
   ============================================================ */
.cmp-speed-bet { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.bet-question {
  text-align: center; font-size: 1rem; color: var(--ch-boss-ink);
  padding: var(--sp-2); letter-spacing: 0.06em; font-style: italic;
}
.code-silhouettes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2);
  padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.sil-card {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); cursor: pointer; text-align: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); min-height: 110px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  opacity: 0.7;
}
.sil-card:hover { border-color: var(--accent); opacity: 1; transform: translateY(-2px); }
.sil-card.guessed { opacity: 1; border-color: var(--loop-debt); background: var(--loop-debt-soft); }
.sil-card.revealed { opacity: 1; border-color: var(--accent); background: var(--accent-soft); }
.sil-card .sc-name { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--text-1); }
.sil-card .sc-code { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-3); }
.sil-card .sc-timing { font-family: var(--font-mono); font-size: 0.72rem; margin-top: 4px; }
.sil-card[data-case="sum"] { border-left: 3px solid var(--case-sum); }
.sil-card[data-case="matmul"] { border-left: 3px solid var(--case-matmul); }
.sil-card[data-case="sort"] { border-left: 3px solid var(--case-sort); }
.timing-reveal {
  grid-column: 1 / -1; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--loop-debt);
  border-radius: var(--r-sm); background: var(--loop-debt-soft);
  font-size: 0.8rem; color: var(--text-2); animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.timing-reveal .tr-title { font-weight: 600; color: var(--loop-debt); margin-bottom: 4px; }
.loop-account {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--ch-boss-line);
  border-radius: var(--r-sm); background: var(--ch-boss-soft);
  font-size: 0.82rem; color: var(--text-2); font-style: italic;
  animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.loop-account .acct-line { margin: var(--sp-1) 0; }
.loop-account .acct-line b { color: var(--ch-boss-ink); font-style: normal; }
.perf-gap-map {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-indigo);
  border-radius: var(--r-sm); background: var(--ch-indigo-soft);
  animation: riftOpen 600ms cubic-bezier(0.22,1,0.36,1);
}
.perf-gap-map h4 { font-size: 0.85rem; color: var(--ch-indigo-ink); margin-bottom: var(--sp-2); text-align: center; }
.gap-bars { display: flex; flex-direction: column; gap: var(--sp-2); }
.gap-bar-row { display: flex; align-items: center; gap: var(--sp-2); }
.gap-bar-row .gbr-label { font-family: var(--font-mono); font-size: 0.72rem; min-width: 70px; color: var(--text-2); }
.gap-bar-row .gbr-track { flex: 1; height: 14px; border: 1px solid var(--glass-line); border-radius: 7px; background: var(--bg-elev); overflow: hidden; position: relative; }
.gap-bar-row .gbr-fill { height: 100%; transition: width 800ms cubic-bezier(0.22,1,0.36,1); }
.gap-bar-row .gbr-fill.for { background: var(--perf-for); }
.gap-bar-row .gbr-fill.vec { background: var(--perf-vec); }
.gap-bar-row .gbr-x { font-family: var(--font-mono); font-size: 0.7rem; min-width: 56px; text-align: right; color: var(--text-2); }

/* ============================================================
   S1 语法试炼台
   ============================================================ */
.cmp-syntax-bench { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.code-wall {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); min-height: 80px;
}
.code-wall .cw-line { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-1); margin: 2px 0; }
.code-wall .cw-line.dim { color: var(--text-3); }
.code-wall .cw-line.ok { color: var(--ch-ok); }
.timing-line {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk);
}
.timing-line .tl-label { font-size: 0.8rem; color: var(--text-2); }
.syntax-cards {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2);
}
.syn-card {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); cursor: pointer; text-align: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); min-height: 70px; opacity: 0.6;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.syn-card:hover { border-color: var(--accent); opacity: 1; transform: translateY(-2px); }
.syn-card.lit { opacity: 1; border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.syn-card .sy-name { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--text-1); }
.syn-card .sy-desc { font-size: 0.65rem; color: var(--text-3); }
.syn-pop {
  grid-column: 1 / -1; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); font-size: 0.78rem; color: var(--text-2); animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.syn-pop b { color: var(--accent-ink); }
.exclude-mark {
  width: 100%; margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--ch-epiphany); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft); font-size: 0.82rem; color: var(--ch-epiphany-ink);
  font-style: italic; animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   S2 法器觉醒 · ndarray
   ============================================================ */
.cmp-ndarray-awaken { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.ndarray-grid {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.ndarray-grid h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); text-align: center; }
.ndarray-grid canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.broadcast-ruler {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.broadcast-ruler h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.bcast-shapes { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }
.bcast-shape {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.78rem; text-align: center;
  min-width: 80px; transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.bcast-shape.a { border-left: 3px solid var(--case-matmul); }
.bcast-shape.b { border-left: 3px solid var(--broadcast-band); }
.bcast-shape.stretched { border-color: var(--broadcast-band); box-shadow: 0 0 12px rgba(96,165,250,0.3); }
.bcast-shape .bs-label { font-size: 0.65rem; color: var(--text-3); margin-bottom: 4px; }
.bcast-shape .bs-val { color: var(--text-1); }
.bcast-arrow { color: var(--text-3); font-size: 1.2rem; }
.bcast-rules { margin-top: var(--sp-2); font-size: 0.75rem; color: var(--text-3); }
.bcast-rules .br-rule { margin: 2px 0; }
.bcast-rules .br-rule.ok { color: var(--ch-ok); }
.bcast-rules .br-rule.bad { color: var(--ch-warn); }
.index-maze {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.index-maze h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.idx-tabs { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-bottom: var(--sp-2); justify-content: center; }
.idx-tab {
  padding: 4px 10px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.72rem; cursor: pointer;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.idx-tab:hover { border-color: var(--accent); }
.idx-tab.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.idx-lightpath {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-2);
  min-height: 40px; animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.weapon-awaken {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--weapon-numpy); border-radius: var(--r-sm);
  background: rgba(59,130,246,0.10); text-align: center; font-style: italic; color: var(--accent-ink);
  animation: shatterIn 800ms cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   S3 循环之刑 · 第一崩塌
   ============================================================ */
.cmp-loop-torture { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.torture-stage {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-boss-line); border-radius: var(--r-sm);
  background: rgba(185,28,28,0.06);
}
.torture-stage h4 { font-size: 0.85rem; color: var(--ch-boss-ink); margin-bottom: var(--sp-2); text-align: center; }
.progress-crawl {
  width: 100%; height: 16px; border: 1px solid var(--glass-line); border-radius: 8px; background: var(--bg-elev);
  overflow: hidden; margin: var(--sp-2) 0; position: relative;
}
.progress-crawl-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--perf-for), var(--ch-boss)); transition: width 200ms linear; }
.progress-crawl .pc-label {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); line-height: 16px;
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-1); text-shadow: 0 0 4px var(--bg-sunk);
}
.vec-beam {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--perf-vec); border-radius: var(--r-sm);
  background: var(--ch-indigo-soft); text-align: center; animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.perf-bar-chart {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.perf-bar-chart h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.perf-bar-chart canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }

/* ============================================================
   S4 线性代数殿
   ============================================================ */
.cmp-linalg-hall { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.solve-tabs { display: flex; gap: var(--sp-1); flex-wrap: wrap; justify-content: center; }
.solve-tab {
  padding: 4px 10px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.72rem; cursor: pointer;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.solve-tab:hover { border-color: var(--accent); }
.solve-tab.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.solve-detail {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-2);
  min-height: 40px; animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.solve-detail.warn { border-color: var(--ch-warn); color: var(--ch-warn); }
.solve-detail.ok { border-color: var(--ch-ok); color: var(--ch-ok); }
.cond-slider-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.cond-slider-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.cond-slider-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.matrix-form-cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2);
}
.mf-card {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); cursor: pointer; text-align: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); min-height: 60px; opacity: 0.7;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.mf-card:hover { border-color: var(--accent); opacity: 1; transform: translateY(-2px); }
.mf-card.lit { opacity: 1; border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.mf-card[data-form="well"] { border-top: 3px solid var(--cond-well); }
.mf-card[data-form="ill"] { border-top: 3px solid var(--cond-ill); }
.mf-card[data-form="rank"] { border-top: 3px solid var(--layer-float); }
.mf-card[data-form="spd"] { border-top: 3px solid var(--layer-viz); }
.mf-card .mf-name { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: var(--text-1); }
.mf-card .mf-desc { font-size: 0.62rem; color: var(--text-3); }

/* ============================================================
   S5 数据炼洗池
   ============================================================ */
.cmp-dataframe-pool { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.dirty-grid {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); overflow-x: auto;
}
.dirty-grid table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.72rem; }
.dirty-grid th, .dirty-grid td { padding: 4px 8px; border: 1px solid var(--glass-line); text-align: center; }
.dirty-grid th { background: var(--bg-elev); color: var(--accent-ink); font-weight: 600; }
.dirty-grid td.miss { background: rgba(239,68,68,0.18); color: var(--dirty-miss); }
.dirty-grid td.dup { background: rgba(100,116,139,0.18); color: var(--dirty-dup); text-decoration: line-through; }
.dirty-grid td.type-err { background: rgba(245,158,11,0.16); color: var(--dirty-type); }
.dirty-grid td.outlier { background: rgba(249,115,22,0.18); color: var(--dirty-out); }
.dirty-grid td.clean { color: var(--ch-ok); }
.apply-vs-vec {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2);
}
.avv-card {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); text-align: center; transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.avv-card.apply { border-left: 3px solid var(--perf-for); }
.avv-card.vec { border-left: 3px solid var(--perf-vec); }
.avv-card.lit { border-color: var(--accent); box-shadow: var(--glow); }
.avv-card .av-name { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--text-1); }
.avv-card .av-time { font-family: var(--font-mono); font-size: 1rem; margin: 4px 0; }
.avv-card.apply .av-time { color: var(--perf-for); }
.avv-card.vec .av-time { color: var(--perf-vec); }
.avv-card .av-desc { font-size: 0.68rem; color: var(--text-3); }

/* ============================================================
   S6 精度深渊 · 第二崩塌
   ============================================================ */
.cmp-precision-abyss { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.abyss-rift {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-boss-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); text-align: center;
}
.abyss-rift h4 { font-size: 0.85rem; color: var(--ch-boss-ink); margin-bottom: var(--sp-2); }
.float-bits {
  display: flex; gap: 2px; justify-content: center; flex-wrap: wrap; margin: var(--sp-2) 0;
}
.float-bit {
  width: 18px; height: 18px; border: 1px solid var(--glass-line); border-radius: 2px;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.62rem;
  background: var(--bg-elev); color: var(--text-3); transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.float-bit.one { background: var(--bit-one); color: var(--bg-sunk); border-color: var(--bit-one); }
.float-bit.zero { background: var(--bit-zero); color: #fff; border-color: var(--bit-blue); opacity: 0.5; }
.float-bit.trunc { border-color: var(--bit-trunc); color: var(--bit-trunc); animation: shake 0.6s var(--ease-out); }
.float-bit.nan { background: var(--nan-spread); color: #fff; border-color: var(--nan-spread); }
.float-result {
  font-family: var(--font-mono); font-size: 0.92rem; color: var(--text-1); text-align: center; margin: var(--sp-2) 0;
}
.float-result .fr-tail { color: var(--bit-trunc); font-weight: 600; }
.trap-checklist {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.trap-checklist h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.trap-item {
  padding: var(--sp-1) var(--sp-2); margin-bottom: 2px; border-left: 2px solid var(--bit-trunc);
  font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-2);
  background: var(--bg-elev); transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.trap-item.found { border-left-color: var(--ch-ok); color: var(--ch-ok); }
.trap-item .ti-fix { color: var(--accent-ink); display: block; font-size: 0.68rem; margin-top: 2px; }

/* ============================================================
   S7 可视化之镜
   ============================================================ */
.cmp-viz-mirror { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.viz-canvas-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.viz-canvas-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); text-align: center; }
.viz-canvas-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.viz-slider {
  display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2);
}
.viz-slider .vs-label { font-size: 0.75rem; color: var(--text-3); min-width: 70px; font-family: var(--font-mono); }
.viz-slider input[type="range"] { flex: 1; }
.viz-slider .vs-val { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent-ink); min-width: 70px; text-align: right; }

/* ============================================================
   S8 预处理工坊
   ============================================================ */
.cmp-preprocess-workshop { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.scaler-tabs { display: flex; gap: var(--sp-1); flex-wrap: wrap; justify-content: center; }
.scaler-tab {
  padding: 4px 10px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.72rem; cursor: pointer;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.scaler-tab:hover { border-color: var(--accent); }
.scaler-tab.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.scaler-result {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-sunk); font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-2);
  min-height: 40px; animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.leak-flow {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--leak-arrow); border-radius: var(--r-sm);
  background: rgba(239,68,68,0.06); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.leak-flow h4 { font-size: 0.85rem; color: var(--ch-warn); margin-bottom: var(--sp-2); }
.leak-flow canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.order-toggle { display: flex; gap: var(--sp-1); justify-content: center; margin-bottom: var(--sp-2); }
.order-btn {
  padding: 4px 12px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.72rem; cursor: pointer;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.order-btn:hover { border-color: var(--accent); }
.order-btn.wrong.active { background: var(--loop-debt-soft); border-color: var(--leak-arrow); color: var(--leak-arrow); }
.order-btn.right.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.kfold-display {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.kfold-display h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.kfold-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-1); }
.kfold-fold {
  height: 40px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-3); transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.kfold-fold.train { background: rgba(16,185,129,0.14); color: var(--train-color); }
.kfold-fold.val { background: rgba(239,68,68,0.18); color: var(--val-color); border-color: var(--val-color); }

/* ============================================================
   S9 梯度之门
   ============================================================ */
.cmp-gradient-gate { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.compute-graph-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.compute-graph-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); text-align: center; }
.compute-graph-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.grad-flow-toggle { display: flex; gap: var(--sp-1); justify-content: center; margin-top: var(--sp-2); }
.grad-btn {
  padding: 4px 12px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.72rem; cursor: pointer;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.grad-btn.forward.active { background: rgba(59,130,246,0.16); border-color: var(--forward-flow); color: var(--forward-flow); }
.grad-btn.backward.active { background: rgba(245,158,11,0.16); border-color: var(--backward-flow); color: var(--backward-flow); }
.ml-lib-mirrors {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2);
}
.ml-mirror {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); cursor: pointer; text-align: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); opacity: 0.7;
  display: flex; flex-direction: column; gap: 4px;
}
.ml-mirror:hover { opacity: 1; border-color: var(--accent); transform: translateY(-2px); }
.ml-mirror.lit { opacity: 1; border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.ml-mirror[data-lib="sklearn"] { border-top: 3px solid var(--weapon-numpy); }
.ml-mirror[data-lib="xgboost"] { border-top: 3px solid var(--weapon-pandas); }
.ml-mirror[data-lib="lightgbm"] { border-top: 3px solid var(--weapon-pytorch); }
.ml-mirror .mm-name { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--text-1); }
.ml-mirror .mm-desc { font-size: 0.65rem; color: var(--text-3); }
.gpu-parallel-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.gpu-parallel-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.gpu-parallel-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }

/* ============================================================
   S10 Boss战 · 循环之魔三问
   ============================================================ */
#s10-arena { border-color: var(--ch-boss-line); box-shadow: var(--shadow), 0 0 32px var(--ch-boss-soft); }
.boss-figure { width: 100%; display: flex; justify-content: center; margin-bottom: var(--sp-2); }
#s10-boss-canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--ch-boss-line); border-radius: var(--r-sm); background: var(--bg-elev); }
.q-progress-bar { width: 100%; height: 6px; border: 1px solid var(--glass-line); border-radius: 3px; background: var(--bg-sunk); margin-bottom: var(--sp-2); overflow: hidden; }
.q-progress-fill { height: 100%; width: 0; background: var(--accent); transition: width 600ms cubic-bezier(0.22,1,0.36,1); }
.loop-ledger {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--loop-debt);
  border-radius: var(--r-sm); background: var(--loop-debt-soft);
  font-size: 0.8rem; color: var(--text-2); margin-bottom: var(--sp-2);
}
.loop-ledger .ledger-line { margin: var(--sp-1) 0; font-style: italic; }
.loop-ledger .ledger-line b { color: var(--loop-debt); font-style: normal; }
.q-panel { width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); margin-bottom: var(--sp-2); }
.q-text { font-size: 0.95rem; color: var(--text-1); margin-bottom: var(--sp-2); }
.q-account { font-size: 0.78rem; color: var(--ch-boss-ink); font-style: italic; padding: var(--sp-1) var(--sp-2); border-left: 2px solid var(--ch-boss-line); }
.option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.q-option {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); cursor: pointer; font-size: 0.85rem; text-align: center;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1); min-height: 50px;
  display: flex; align-items: center; justify-content: center;
}
.q-option:hover { border-color: var(--accent); transform: translateY(-1px); }
.q-option.correct { border-color: var(--opt-correct); background: var(--accent-soft); color: var(--opt-correct); box-shadow: var(--glow); }
.q-option.wrong { border-color: var(--opt-wrong); background: rgba(239,68,68,0.10); color: var(--opt-wrong); }
.q-option.eliminated { opacity: 0.3; cursor: default; text-decoration: line-through; border-color: var(--opt-excluded); background: rgba(71,85,105,0.16); transform: none; }
.q-feedback {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); font-size: 0.85rem; min-height: 32px;
  margin-bottom: var(--sp-2); animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.q-feedback.right { border-color: var(--opt-correct); background: var(--accent-soft); color: var(--opt-correct); }
.q-feedback.wrong { border-color: var(--opt-wrong); background: rgba(239,68,68,0.10); color: var(--opt-wrong); font-style: italic; }
/* 第二问拼图组装 */
.puzzle-assemble {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); margin-bottom: var(--sp-2);
}
.puzzle-assemble h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.puzzle-slots { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-2); }
.puzzle-slot {
  padding: var(--sp-2); border: 1px dashed var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); min-height: 44px; display: flex; align-items: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.puzzle-slot.filled { border-style: solid; border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.puzzle-slot .ps-num { font-size: 0.65rem; color: var(--text-3); margin-right: var(--sp-2); min-width: 28px; }
.puzzle-frags { display: flex; gap: var(--sp-1); flex-wrap: wrap; justify-content: center; }
.puzzle-frag {
  padding: 4px 10px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-1);
  cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1); user-select: none;
}
.puzzle-frag:hover { border-color: var(--accent); transform: translateY(-2px); }
.puzzle-frag.placed { opacity: 0.4; cursor: default; transform: none; }
.puzzle-definition {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--ch-epiphany); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft); font-family: var(--font-mono); font-size: 0.78rem; color: var(--ch-epiphany-ink);
  animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
/* 第三问场景卡片 */
.scene-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-2);
}
.scene-card-opt {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); cursor: pointer; text-align: center;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1); min-height: 70px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.scene-card-opt:hover { border-color: var(--accent); transform: translateY(-1px); }
.scene-card-opt.selected { border-color: var(--ch-ok); background: rgba(34,197,94,0.12); color: var(--ch-ok); box-shadow: var(--glow); }
.scene-card-opt.wrong { border-color: var(--opt-wrong); background: rgba(239,68,68,0.10); color: var(--opt-wrong); }
.scene-card-opt .sco-name { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; }
.scene-card-opt .sco-desc { font-size: 0.62rem; color: var(--text-3); }
.carve-stele {
  width: 100%; margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--carve-mark); border-radius: var(--r-sm);
  background: var(--carve-soft); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.carve-stele h4 { font-size: 0.85rem; color: var(--ch-indigo-ink); margin-bottom: var(--sp-2); }
.carve-stele .carve-item {
  padding: var(--sp-1) var(--sp-2); margin-bottom: var(--sp-1);
  border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.78rem;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.carve-stele .carve-item.lit {
  border-color: var(--carve-mark); color: var(--ch-indigo-ink);
  background: var(--carve-soft); box-shadow: 0 0 8px var(--carve-soft);
}
.carve-stele .carve-item.net {
  border-color: var(--carve-gold); color: var(--ch-epiphany-ink);
  background: var(--ch-epiphany-soft); box-shadow: 0 0 12px var(--ch-epiphany-soft);
}
.carve-stele .carve-item .ci-note { display: block; font-size: 0.68rem; color: var(--text-3); margin-top: 2px; font-style: italic; }
.boss-collapse {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--breakthrough); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft); text-align: center; font-style: italic; color: var(--ch-epiphany-ink);
  animation: shatterIn 800ms cubic-bezier(0.22,1,0.36,1);
}
@keyframes shatterIn {
  0% { opacity: 0; transform: scale(0.8) rotate(-2deg); }
  50% { opacity: 1; transform: scale(1.05) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
.realm-achieved {
  margin-top: var(--sp-3); text-align: center; padding: var(--sp-3);
  border: 1px solid var(--ch-epiphany); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft);
}
.realm-glow {
  font-family: var(--font-mono); font-size: 1.1rem; color: var(--ch-epiphany-ink); letter-spacing: 0.2em;
}
@keyframes realmGlow {
  0%, 100% { box-shadow: 0 0 18px var(--accent-soft); }
  50% { box-shadow: 0 0 32px rgba(59,130,246,0.4); }
}
.realm-achieved { animation: realmGlow 3s ease-in-out infinite; }

/* ============================================================
   响应式 · 移动端适配
   ============================================================ */
@media (max-width: 640px) {
  .op-title { font-size: clamp(2rem, 12vw, 3.5rem); }
  .op-sub { letter-spacing: 0.3em; }
  .code-silhouettes { grid-template-columns: 1fr; }
  .syntax-cards { grid-template-columns: repeat(2, 1fr); }
  .matrix-form-cards { grid-template-columns: repeat(2, 1fr); }
  .apply-vs-vec { grid-template-columns: 1fr; }
  .option-grid { grid-template-columns: 1fr; }
  .scene-cards { grid-template-columns: 1fr; }
  .ml-lib-mirrors { grid-template-columns: 1fr; }
  .kfold-grid { grid-template-columns: repeat(5, 1fr); }
  .knob-row { flex-direction: column; align-items: stretch; }
  .knob-unit { min-width: auto; }
  .puzzle-frags { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .realm-achieved { animation: none; }
  .timing-reveal, .loop-account, .perf-gap-map, .exclude-mark, .broadcast-ruler, .weapon-awaken,
  .vec-beam, .perf-bar-chart, .solve-detail, .idx-lightpath, .abyss-rift, .trap-checklist,
  .viz-canvas-zone, .leak-flow, .kfold-display, .compute-graph-zone, .gpu-parallel-zone,
  .puzzle-assemble, .puzzle-definition, .carve-stele, .boss-collapse, .syn-pop { animation: none; }
  .sil-card:hover, .syn-card:hover, .mf-card:hover, .ml-mirror:hover { transform: none; }
}