/* ============================================================
   ch06「神经网络基础：从感知机到多层网络」章节专属样式
   境界：筑基一层·神经初醒 · 靛蓝 #6366F1
   Boss：梯度消失之渊 · 暗紫 #1E1B4B
   顿悟：突破金 var(--ch-epiphany)（理解发生之处/金光裂纹/顿悟脉冲）
   残差连接：翠绿 #10B981（生命之色/绕过深渊的捷径）
   深度债：赤红 var(--ch-boss)（梯度衰减记账）
   背景：暖深蓝灰 var(--ch-bg-warm)（禁止纯黑）
   全部色值走 tokens 变量；玻璃态卡片；发光仅限边框/背景。
   ============================================================ */

/* ---------- 章节境界色覆写：靛蓝 ---------- */
:root, :root[data-theme="light"] {
  --accent: #4F46E5;
  --accent-ink: #4338CA;
  --accent-soft: rgba(99, 102, 241, 0.12);
  --glass-line: rgba(99, 102, 241, 0.22);
  --glow: 0 0 18px rgba(99, 102, 241, 0.28);
  --on-accent: #FFFFFF;
  --r-xs: 4px;
}
:root[data-theme="dark"] {
  --accent: #6366F1;
  --accent-ink: #818CF8;
  --accent-soft: rgba(99, 102, 241, 0.16);
  --glass-line: rgba(99, 102, 241, 0.22);
  --glow: 0 0 22px rgba(99, 102, 241, 0.34);
  --on-accent: #0A0E1A;
  --r-xs: 4px;
}

/* ---------- 章节专用叙事色 ---------- */
:root {
  --ch-boss: #1E1B4B;          /* 梯度消失之渊 · 暗紫 */
  --ch-boss-ink: #818CF8;      /* 深渊紫光 */
  --ch-boss-soft: rgba(30, 27, 75, 0.45);
  --ch-boss-line: rgba(129, 140, 248, 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: #6366F1;        /* 神经初醒靛蓝 */
  --ch-indigo-soft: rgba(99, 102, 241, 0.14);
  --ch-indigo-ink: #4F46E5;
  /* 三条贯穿机制色 */
  --debt-red: var(--ch-boss);         /* 深度债赤红光页 */
  --debt-soft: rgba(239, 68, 68, 0.12);
  --carve-mark: #6366F1;       /* 排除刻痕靛蓝微光 */
  --carve-soft: rgba(99, 102, 241, 0.14);
  --grad-ledger: var(--ch-amber);      /* 梯度账本琥珀色 */
  --grad-ledger-soft: rgba(245, 158, 11, 0.14);
  /* 残差连接色 */
  --residual-green: #10B981;   /* 残差翠绿（生命之色） */
  --residual-soft: rgba(16, 185, 129, 0.14);
  /* 激活函数色 */
  --act-sigmoid: var(--ch-amber);      /* Sigmoid琥珀 */
  --act-tanh: #3B82F6;         /* Tanh蓝 */
  --act-relu: #10B981;         /* ReLU翠 */
  --act-leaky: #8B5CF6;        /* LeakyReLU紫 */
  --act-gelu: #EC4899;         /* GELU粉 */
  /* 数据点色 */
  --point-red: var(--ch-boss);        /* 红点 */
  --point-blue: #3B82F6;       /* 蓝点 */
  /* S9 Boss */
  --abyss-deep: #1E1B4B;       /* 深渊暗紫 */
  --abyss-light: #818CF8;      /* 深渊紫光 */
  --answer-correct: #6366F1;   /* 正解靛蓝光 */
  --answer-wrong: var(--ch-boss);     /* 错答红 */
  --answer-eliminated: #475569;/* 被刻痕划去选项灰 */
  --net-gold: var(--ch-epiphany);         /* 收网金光 */
  --breakthrough: #FBBF24;     /* 突破金光 */
  /* 选项/状态色 */
  --opt-correct: #6366F1;
  --opt-wrong: var(--ch-boss);
  --opt-excluded: #475569;
  --ch-ok: #10B981;
  --ch-warn: var(--ch-boss);
  --ch-bg-warm: var(--ch-bg-warm);       /* 暖深蓝灰背景 */
}

/* ---------- 导师高斯老祖对话框变体 ---------- */
.dlg.gauss {
  border-left-color: var(--accent);
  box-shadow: var(--shadow), 0 0 18px var(--accent-soft);
}
.dlg.gauss .who {
  background: var(--accent); color: var(--on-accent);
}
.dlg.gauss .avatar {
  border-color: var(--accent);
}
.dlg.gauss p {
  color: var(--text-1);
}
/* Boss 梯度消失之渊对话框变体 */
.dlg.boss {
  border-left-color: var(--abyss-light);
  box-shadow: var(--shadow), 0 0 18px var(--ch-boss-soft);
}
.dlg.boss .who {
  background: var(--abyss-deep); color: var(--abyss-light);
}
.dlg.boss .avatar {
  border-color: var(--abyss-light);
}

/* ---------- 开场（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(--ch-bg-warm, #0F1428) 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);
}
#carve-panel, #debt-panel {
  position: absolute; right: 0; bottom: calc(100% + var(--sp-1));
  width: 280px; padding: var(--sp-3); z-index: 85;
}
#carve-panel h3, #debt-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(--ch-indigo); margin: var(--sp-1) 0; }
#debt-list p { font-size: 0.8rem; color: var(--debt-red); 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; }

/* ============================================================
   S0 生物神经元 → M-P 模型映射台
   ============================================================ */
.cmp-neuron-map { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.map-left, .map-right {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.map-left h4, .map-right h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); text-align: center; }
.bio-parts { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.bio-part {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-1);
  cursor: grab; transition: all 200ms cubic-bezier(0.22,1,0.36,1); user-select: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 100px;
}
.bio-part:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--glow); }
.bio-part.placed { opacity: 0.4; cursor: default; transform: none; }
.bio-part .bp-name { font-weight: 600; }
.bio-part .bp-en { font-size: 0.65rem; color: var(--text-3); }
.math-slots { display: flex; flex-direction: column; gap: var(--sp-1); }
.math-slot {
  padding: var(--sp-1) var(--sp-2); border: 1px dashed var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); display: flex; align-items: center; gap: var(--sp-2);
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); min-height: 36px;
}
.math-slot.filled { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.math-slot.wrong { border-color: var(--ch-warn); background: rgba(239,68,68,0.10); }
.math-slot .ms-label { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-3); min-width: 100px; }
.math-slot .ms-content { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent-ink); flex: 1; }
.map-formula {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-epiphany); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft); text-align: center; font-family: var(--font-mono); font-size: 1rem; color: var(--ch-epiphany-ink);
  animation: riftOpen 600ms cubic-bezier(0.22,1,0.36,1);
}
.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);
}

/* ============================================================
   S1 感知机训练台
   ============================================================ */
.cmp-perceptron-bench { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.perc-controls { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.perc-canvas-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); display: flex; justify-content: center;
}
.perc-canvas-zone canvas { width: 100%; max-width: 420px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.perc-stats {
  display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-2);
}
.perc-stats .ps-item { padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.perc-stats .ps-item b { color: var(--accent-ink); }
.perc-stats .ps-item.converged b { color: var(--ch-ok); }
.dataset-btn, .train-btn, .step-btn {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); color: var(--text-1); font-size: 0.78rem; cursor: pointer;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.dataset-btn:hover, .train-btn:hover, .step-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.dataset-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }

/* ============================================================
   S2 XOR 训练台
   ============================================================ */
.cmp-xor-trap { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.xor-canvas-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); display: flex; justify-content: center;
}
.xor-canvas-zone canvas { width: 100%; max-width: 420px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.xor-controls { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.xor-multilayer {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--residual-green); border-radius: var(--r-sm);
  background: var(--residual-soft); animation: riftOpen 600ms cubic-bezier(0.22,1,0.36,1);
}
.xor-multilayer h4 { font-size: 0.85rem; color: var(--residual-green); margin-bottom: var(--sp-2); }
.xor-multilayer .ml-formula { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-1); line-height: 1.6; }

/* ============================================================
   S3 激活函数试验台
   ============================================================ */
.cmp-activation-lab { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.act-selector { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.act-btn {
  padding: var(--sp-1) 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.8rem; color: var(--text-1);
  cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1); min-width: 90px; text-align: center;
}
.act-btn:hover { border-color: var(--accent); transform: translateY(-2px); }
.act-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); box-shadow: var(--glow); }
.act-btn[data-act="sigmoid"].active { border-color: var(--act-sigmoid); color: var(--act-sigmoid); }
.act-btn[data-act="tanh"].active { border-color: var(--act-tanh); color: var(--act-tanh); }
.act-btn[data-act="relu"].active { border-color: var(--act-relu); color: var(--act-relu); }
.act-btn[data-act="leaky"].active { border-color: var(--act-leaky); color: var(--act-leaky); }
.act-btn[data-act="gelu"].active { border-color: var(--act-gelu); color: var(--act-gelu); }
.act-canvas-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); display: flex; justify-content: center;
}
.act-canvas-zone canvas { width: 100%; max-width: 420px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.act-grad-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--grad-ledger); border-radius: var(--r-sm);
  background: var(--grad-ledger-soft); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.act-grad-zone h4 { font-size: 0.85rem; color: var(--ch-epiphany-ink); margin-bottom: var(--sp-2); }
.act-grad-zone canvas { width: 100%; max-width: 420px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.grad-readout { margin-top: var(--sp-2); font-family: var(--font-mono); font-size: 0.82rem; color: var(--grad-ledger); text-align: center; }

/* ============================================================
   S4 万能近似殿
   ============================================================ */
.cmp-universal-approx { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.approx-slider-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.approx-slider-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); text-align: center; }
.approx-slider-zone input[type="range"] { width: 100%; margin-bottom: var(--sp-2); }
.approx-slider-zone canvas { width: 100%; max-width: 420px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); display: block; margin: 0 auto; }
.mlp-build-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);
}
.mlp-build-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.mlp-layers { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; margin-bottom: var(--sp-2); }
.mlp-layer {
  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;
}
.mlp-layer .ml-name { color: var(--text-1); font-weight: 600; }
.mlp-layer .ml-dim { color: var(--text-3); font-size: 0.7rem; margin-top: 2px; }
.mlp-arrow { color: var(--text-3); align-self: center; }
.param-counter {
  padding: var(--sp-2); border: 1px solid var(--grad-ledger); border-radius: var(--r-xs);
  background: var(--grad-ledger-soft); font-family: var(--font-mono); font-size: 0.82rem; color: var(--grad-ledger); text-align: center;
}
.depth-width-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);
}
.depth-width-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.dw-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.dw-card {
  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;
}
.dw-card .dw-name { font-weight: 600; color: var(--text-1); margin-bottom: 4px; }
.dw-card .dw-params { color: var(--grad-ledger); }
.dw-card .dw-note { color: var(--text-3); font-size: 0.68rem; margin-top: 4px; }

/* ============================================================
   S5 前向传播执行器
   ============================================================ */
.cmp-forward-flow { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.ff-network-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); display: flex; justify-content: center;
}
.ff-network-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); text-align: center; }
.ff-network-zone canvas { width: 100%; max-width: 420px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.ff-steps { display: flex; flex-direction: column; gap: var(--sp-1); }
.ff-step {
  padding: var(--sp-1) 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; color: var(--text-2);
  animation: riftOpen 300ms cubic-bezier(0.22,1,0.36,1); transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.ff-step.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.ff-step .fs-shape { color: var(--text-3); font-size: 0.68rem; margin-left: 6px; }
.ff-grad-ledger {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--grad-ledger); border-radius: var(--r-sm);
  background: var(--grad-ledger-soft); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.ff-grad-ledger h4 { font-size: 0.85rem; color: var(--ch-epiphany-ink); margin-bottom: var(--sp-2); }
.ledger-empty { font-size: 0.8rem; color: var(--text-3); font-style: italic; }

/* ============================================================
   S6 初始化炼丹炉
   ============================================================ */
.cmp-init-forge { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.init-selector { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.init-btn {
  padding: var(--sp-1) 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; color: var(--text-1);
  cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.init-btn:hover { border-color: var(--accent); transform: translateY(-2px); }
.init-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); box-shadow: var(--glow); }
.init-btn[data-init="zero"].active { border-color: var(--text-3); color: var(--text-3); }
.init-btn[data-init="large"].active { border-color: var(--ch-warn); color: var(--ch-warn); }
.init-btn[data-init="xavier"].active { border-color: var(--act-tanh); color: var(--act-tanh); }
.init-btn[data-init="he"].active { border-color: var(--act-relu); color: var(--act-relu); }
.init-canvas-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); display: flex; justify-content: center;
}
.init-canvas-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); text-align: center; }
.init-canvas-zone canvas { width: 100%; max-width: 420px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.init-variance {
  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; color: var(--text-2);
}

/* ============================================================
   S7 归一化水渠
   ============================================================ */
.cmp-norm-canal { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.norm-selector { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.norm-btn {
  padding: var(--sp-1) 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; color: var(--text-1);
  cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.norm-btn:hover { border-color: var(--accent); transform: translateY(-2px); }
.norm-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); box-shadow: var(--glow); }
.norm-canvas-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); display: flex; justify-content: center;
}
.norm-canvas-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); text-align: center; }
.norm-canvas-zone canvas { width: 100%; max-width: 420px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.batch-zone, .dropout-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);
}
.batch-zone h4, .dropout-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.batch-controls { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.batch-btn {
  padding: 4px 10px; 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);
}
.batch-btn:hover { border-color: var(--accent); }
.batch-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.dropout-zone canvas { width: 100%; max-width: 420px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); display: block; margin: 0 auto var(--sp-2); }
.dropout-controls { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; align-items: center; }
.dropout-controls label { font-size: 0.78rem; color: var(--text-2); }

/* ============================================================
   S8 反向传播推导器
   ============================================================ */
.cmp-backprop-abyss { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.loss-selector { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.loss-btn {
  padding: var(--sp-1) 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; color: var(--text-1);
  cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.loss-btn:hover { border-color: var(--accent); transform: translateY(-2px); }
.loss-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); box-shadow: var(--glow); }
.bp-steps { display: flex; flex-direction: column; gap: var(--sp-1); }
.bp-step {
  padding: var(--sp-1) 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; color: var(--text-2);
  animation: riftOpen 300ms cubic-bezier(0.22,1,0.36,1);
}
.bp-step .bs-formula { color: var(--accent-ink); }
.grad-ledger {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--grad-ledger); border-radius: var(--r-sm);
  background: var(--grad-ledger-soft);
}
.grad-ledger h4 { font-size: 0.85rem; color: var(--ch-epiphany-ink); margin-bottom: var(--sp-2); }
.grad-ledger canvas { width: 100%; max-width: 420px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); display: block; margin: 0 auto; }
.ledger-readout { margin-top: var(--sp-2); font-family: var(--font-mono); font-size: 0.82rem; color: var(--grad-ledger); text-align: center; }
.grad-compare {
  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);
}
.grad-compare h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.grad-compare canvas { width: 100%; max-width: 420px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); display: block; margin: 0 auto; }

/* ============================================================
   S9 Boss 战 · 梯度消失之渊
   ============================================================ */
#s9-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); }
#s9-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); }
.debt-ledger {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--debt-red);
  border-radius: var(--r-sm); background: var(--debt-soft);
  font-size: 0.8rem; color: var(--text-2); margin-bottom: var(--sp-2);
}
.debt-ledger .ledger-line { margin: var(--sp-1) 0; font-style: italic; }
.debt-ledger .ledger-line b { color: var(--debt-red); 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(--abyss-light); 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(--answer-correct); background: var(--accent-soft); color: var(--answer-correct); box-shadow: var(--glow); }
.q-option.wrong { border-color: var(--answer-wrong); background: rgba(239,68,68,0.10); color: var(--answer-wrong); }
.q-option.eliminated { opacity: 0.3; cursor: default; text-decoration: line-through; border-color: var(--answer-eliminated); 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(--answer-correct); background: var(--accent-soft); color: var(--answer-correct); }
.q-feedback.wrong { border-color: var(--answer-wrong); background: rgba(239,68,68,0.10); color: var(--answer-wrong); font-style: italic; }
.residual-builder {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--residual-green); border-radius: var(--r-sm);
  background: var(--residual-soft); animation: shatterIn 800ms cubic-bezier(0.22,1,0.36,1);
}
.residual-builder h4 { font-size: 0.85rem; color: var(--residual-green); margin-bottom: var(--sp-2); }
.residual-builder canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); display: block; margin: 0 auto; }
.residual-readout { margin-top: var(--sp-2); font-family: var(--font-mono); font-size: 0.82rem; color: var(--residual-green); text-align: center; }
.carve-emergence {
  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-emergence h4 { font-size: 0.85rem; color: var(--ch-indigo-ink); margin-bottom: var(--sp-2); }
.carve-emergence .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-emergence .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-emergence .carve-item.net {
  border-color: var(--net-gold); color: var(--ch-epiphany-ink);
  background: var(--ch-epiphany-soft); box-shadow: 0 0 12px var(--ch-epiphany-soft);
}
.abyss-collapse {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--residual-green); border-radius: var(--r-sm);
  background: var(--residual-soft); text-align: center; font-style: italic; color: var(--residual-green);
  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); }
}

/* ============================================================
   S10 通途之链 · 顿悟收束
   ============================================================ */
.cmp-finale { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.loop-puzzle {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.loop-puzzle h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); text-align: center; }
.puzzle-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-3); }
.puzzle-slot {
  padding: var(--sp-2); border: 1px dashed var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); text-align: center; min-height: 60px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  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); }
.puzzle-slot .ps-stage { font-size: 0.65rem; color: var(--text-3); }
.puzzle-slot .ps-content { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent-ink); }
.puzzle-cards { display: flex; gap: var(--sp-1); flex-wrap: wrap; justify-content: center; }
.puzzle-card {
  padding: 4px 8px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-1);
  cursor: grab; transition: all 200ms cubic-bezier(0.22,1,0.36,1); user-select: none;
}
.puzzle-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.puzzle-card.placed { opacity: 0.3; cursor: default; transform: none; }
.ledger-compare {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--grad-ledger); border-radius: var(--r-sm);
  background: var(--grad-ledger-soft); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.ledger-compare h4 { font-size: 0.85rem; color: var(--ch-epiphany-ink); margin-bottom: var(--sp-2); }
.ledger-compare canvas { width: 100%; max-width: 460px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); display: block; margin: 0 auto; }
.carve-final {
  width: 100%; padding: 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-final h4 { font-size: 0.85rem; color: var(--ch-indigo-ink); margin-bottom: var(--sp-2); }
.carve-final-list { display: flex; flex-direction: column; gap: var(--sp-1); }
.carve-final-item {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.78rem; color: var(--text-2);
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.carve-final-item.healed {
  border-color: var(--residual-green); color: var(--residual-green);
  background: var(--residual-soft);
}
.depth-readout { padding: var(--sp-2); font-family: var(--font-mono); font-size: 0.82rem; color: var(--accent-ink); text-align: center; min-height: 28px; }
.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(99,102,241,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; }
  .option-grid { grid-template-columns: 1fr; }
  .bio-parts { flex-direction: column; align-items: stretch; }
  .math-slot .ms-label { min-width: 80px; }
  .dw-compare { grid-template-columns: 1fr; }
  .puzzle-slots { grid-template-columns: repeat(2, 1fr); }
  .knob-row { flex-direction: column; align-items: stretch; }
  .knob-unit { min-width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .realm-achieved { animation: none; }
  .map-formula, .exclude-mark, .xor-multilayer, .act-grad-zone, .mlp-build-zone, .depth-width-zone,
  .ff-grad-ledger, .batch-zone, .dropout-zone, .grad-ledger, .grad-compare, .residual-builder,
  .abyss-collapse, .carve-emergence, .ledger-compare, .carve-final,
  .ff-step, .bp-step, .puzzle-card, .token-chip { animation: none; }
  .bio-part:hover, .act-btn:hover, .init-btn:hover, .norm-btn:hover, .loss-btn:hover { transform: none; }
}