/* ============================================================
   ch04「经典机器学习算法：术法初成」章节专属样式
   境界：炼气四层·术法初成 · 琥珀金 var(--ch-amber)
   Boss：维度之咒 · 灰蓝网格 #94A3B8
   导师：高斯老祖
   顿悟：突破金 var(--ch-epiphany)（理解发生之处/金光裂纹/顿悟脉冲）
   维度失效：赤红 var(--ch-boss)
   维度债：琥珀金碎片 var(--ch-amber)
   背景：暖深蓝灰 var(--ch-bg-warm)（禁止纯黑）
   贯穿机制：维度债（维度之咒记账）/ 排除刻痕（此路不通录）
   全部色值走 tokens 变量；玻璃态卡片；发光仅限边框/背景。
   ============================================================ */

/* ---------- 章节境界色覆写：琥珀金 ---------- */
:root, :root[data-theme="light"] {
  --accent: #D97706;
  --accent-ink: #B45309;
  --accent-soft: rgba(245, 158, 11, 0.12);
  --glass-line: rgba(245, 158, 11, 0.22);
  --glow: 0 0 18px rgba(245, 158, 11, 0.28);
  --on-accent: #FFFFFF;
  --r-xs: 4px;
}
:root[data-theme="dark"] {
  --accent: #F59E0B;
  --accent-ink: #D97706;
  --accent-soft: rgba(245, 158, 11, 0.16);
  --glass-line: rgba(245, 158, 11, 0.22);
  --glow: 0 0 22px rgba(245, 158, 11, 0.34);
  --on-accent: #1A1206;
  --r-xs: 4px;
}

/* ---------- 章节专用叙事色 ---------- */
:root {
  --ch-boss: #94A3B8;          /* 维度之咒 · 灰蓝网格 */
  --ch-boss-ink: #C9D4E3;      /* 咒白 */
  --ch-boss-soft: rgba(148, 163, 184, 0.22);
  --ch-boss-line: rgba(148, 163, 184, 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-gold: var(--ch-amber);          /* 琥珀金 */
  --ch-gold-soft: rgba(245, 158, 11, 0.14);
  --ch-gold-ink: #B45309;
  /* 三条贯穿机制色 */
  --debt-curse: var(--ch-boss);       /* 维度债赤红光页 */
  --debt-curse-soft: rgba(239, 68, 68, 0.12);
  --carve-mark: var(--ch-amber);       /* 排除刻痕琥珀金微光 */
  --carve-soft: rgba(245, 158, 11, 0.14);
  --stele-gold: var(--ch-amber);       /* 本命算法碑铭文金光 */
  /* 算法分类色 */
  --algo-supervised: var(--ch-amber);   /* 监督学习琥珀金 */
  --algo-unsupervised: #A78BFA;/* 无监督紫 */
  --algo-prob: #0EA5E9;         /* 概率图天蓝 */
  --algo-reduction: #22C55E;    /* 降维翠 */
  /* S0 五场景色 */
  --case-spam: var(--ch-amber);        /* 垃圾邮件金 */
  --case-credit: #06B6D4;      /* 信用评分青 */
  --case-image: #A78BFA;       /* 图像分割紫 */
  --case-gene: #22C55E;         /* 基因表达绿 */
  --case-voice: #0EA5E9;        /* 语音识别蓝 */
  /* S1 线性回归 */
  --ols-line: var(--ch-amber);         /* 拟合线金 */
  --ridge-weight: #06B6D4;     /* 岭权重青 */
  --lasso-zero: var(--ch-boss);       /* Lasso归零红 */
  --matrix-cell: var(--ch-amber);      /* 矩阵推导块金 */
  /* S3 SVM */
  --margin-band: var(--ch-amber);      /* 间隔光带金 */
  --support-vec: var(--ch-epiphany);      /* 支持向量亮星 */
  --distance-unify: #64748B;  /* 距离趋同灰 */
  /* S4 决策树 */
  --entropy-high: var(--ch-boss);    /* 高熵红 */
  --entropy-low: var(--ch-epiphany);     /* 低熵金 */
  --ig-color: var(--ch-amber);         /* 信息增益金 */
  --gr-color: #A78BFA;         /* 增益率紫 */
  --gini-color: #06B6D4;       /* 基尼青 */
  --prune-train: var(--ch-amber);     /* 训练曲线金 */
  --prune-test: #22C55E;      /* 测试曲线绿 */
  /* S5 集成 */
  --bagging-par: var(--ch-amber);      /* Bagging并行金 */
  --boosting-seq: var(--ch-boss);     /* Boosting串行红 */
  --rf-subspace: #A78BFA;     /* 随机子空间紫 */
  /* S6 KNN */
  --knn-near: var(--ch-amber);        /* 近邻金 */
  --knn-far: #64748B;         /* 远邻灰 */
  --ratio-meter: var(--ch-boss);     /* 距离比仪表红 */
  /* S7 概率 */
  --bayes-gold: var(--ch-amber);      /* 贝叶斯金 */
  --gmm-1: var(--ch-amber);           /* 高斯分量1金 */
  --gmm-2: #A78BFA;           /* 高斯分量2紫 */
  --gmm-3: #0EA5E9;           /* 高斯分量3蓝 */
  --em-elbo: var(--ch-epiphany);         /* ELBO光梯金 */
  /* S8 降维 */
  --pca-axis: var(--ch-amber);        /* 主成分光轴金 */
  --tsne-edge: #06B6D4;       /* t-SNE邻域丝青 */
  --umap-topo: #22C55E;       /* UMAP拓扑绿 */
  /* S9 Boss */
  --curse-face: #94A3B8;       /* 咒脸灰 */
  --curse-grid: #475569;       /* 高维网格灰蓝 */
  --answer-correct: var(--ch-amber);   /* 正解琥珀金光 */
  --answer-wrong: var(--ch-boss);     /* 错答红 */
  --answer-eliminated: #475569;/* 被刻痕划去选项灰 */
  --net-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(--ch-bg-warm, #0F0A05) 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-gold-soft);
}
.inv-crack {
  display: inline-block; margin-left: var(--sp-1);
  font-size: 0.65rem; color: var(--debt-curse);
  background: rgba(239,68,68,0.14); padding: 0 4px; border-radius: 3px;
}
#carve-panel, #wound-panel {
  position: absolute; right: 0; bottom: calc(100% + var(--sp-1));
  width: 280px; padding: var(--sp-3); z-index: 85;
}
#carve-panel h3, #wound-panel h3 { font-size: 0.9rem; margin-bottom: var(--sp-2); color: var(--ch-gold-ink); }
#carve-list p { font-size: 0.8rem; color: var(--ch-gold); 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; }
.slider-row { display: flex; align-items: center; gap: var(--sp-3); width: 100%; }
.slider-row input[type="range"] { flex: 1; }
.slider-row .readout { min-width: 7.5em; text-align: right; }

/* ---------- 本命算法碑 ---------- */
.algo-stele {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--stele-gold); border-radius: var(--r-sm);
  background: rgba(245,158,11,0.04); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.algo-stele h4 { font-size: 0.85rem; color: var(--ch-gold-ink); margin-bottom: var(--sp-2); }
.stele-runes { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.rune {
  padding: 3px 8px; 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-3);
  transition: all 400ms cubic-bezier(0.22,1,0.36,1); opacity: 0.4;
}
.rune.lit { opacity: 1; border-color: var(--stele-gold); color: var(--ch-gold); background: var(--ch-gold-soft); text-shadow: 0 0 8px var(--ch-gold-soft); }
.rune.cracked { opacity: 0.5; border-color: var(--ch-conflict); color: var(--ch-conflict-ink); text-decoration: line-through; }

/* ============================================================
   S0 维度之门 · 算法碑林下注器
   ============================================================ */
.cmp-dim-gate { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.gate-question {
  text-align: center; font-size: 1rem; color: var(--ch-boss-ink);
  padding: var(--sp-2); letter-spacing: 0.06em; font-style: italic;
}
.case-silhouettes {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2);
  padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.case-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: 90px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  opacity: 0.6;
}
.case-card:hover { border-color: var(--accent); opacity: 1; transform: translateY(-2px); }
.case-card.guessed { opacity: 1; border-color: var(--debt-curse); background: var(--debt-curse-soft); }
.case-card .cc-name { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--text-1); }
.case-card .cc-icon { font-size: 1.2rem; }
.case-card[data-case="spam"] { border-left: 3px solid var(--case-spam); }
.case-card[data-case="credit"] { border-left: 3px solid var(--case-credit); }
.case-card[data-case="image"] { border-left: 3px solid var(--case-image); }
.case-card[data-case="gene"] { border-left: 3px solid var(--case-gene); }
.case-card[data-case="voice"] { border-left: 3px solid var(--case-voice); }
.conflict-popup {
  grid-column: 1 / -1; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--debt-curse);
  border-radius: var(--r-sm); background: var(--debt-curse-soft);
  font-size: 0.8rem; color: var(--text-2); animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.conflict-popup .cp-title { font-weight: 600; color: var(--debt-curse); margin-bottom: 4px; }
.debt-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);
}
.debt-account .acct-line { margin: var(--sp-1) 0; }
.debt-account .acct-line b { color: var(--ch-boss-ink); font-style: normal; }
.algo-map {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-gold);
  border-radius: var(--r-sm); background: var(--ch-gold-soft);
  animation: riftOpen 600ms cubic-bezier(0.22,1,0.36,1);
}
.algo-map h4 { font-size: 0.85rem; color: var(--ch-gold-ink); margin-bottom: var(--sp-2); text-align: center; }
.map-nodes { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-1); }
.map-node {
  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.7rem; text-align: center; color: var(--text-3);
  transition: all 400ms cubic-bezier(0.22,1,0.36,1); opacity: 0.4;
}
.map-node.lit { opacity: 1; border-color: var(--ch-gold); color: var(--ch-gold-ink); background: var(--ch-gold-soft); }

/* ============================================================
   S1 线性术法坛 · 最小二乘推导器
   ============================================================ */
.cmp-ols-altar { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.derive-steps { display: flex; flex-direction: column; gap: var(--sp-1); }
.derive-step {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-sunk); font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-3);
  cursor: pointer; transition: all 300ms cubic-bezier(0.22,1,0.36,1); opacity: 0.5;
  display: flex; align-items: center; gap: var(--sp-2);
}
.derive-step:hover { border-color: var(--accent); opacity: 1; }
.derive-step.lit { opacity: 1; border-color: var(--matrix-cell); background: var(--ch-gold-soft); color: var(--ch-gold-ink); box-shadow: 0 0 8px var(--ch-gold-soft); }
.derive-step .ds-num { font-size: 0.68rem; color: var(--text-3); min-width: 28px; }
.derive-step.lit .ds-num { color: var(--ch-gold); }
.derive-step .ds-formula { flex: 1; }
.ols-canvas-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.ols-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); }
.dim-control { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.reg-tabs { display: flex; gap: var(--sp-1); justify-content: center; }
.reg-tab {
  padding: 4px 12px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.78rem; cursor: pointer;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.reg-tab:hover { border-color: var(--accent); }
.reg-tab.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.weight-bars { display: flex; gap: 4px; align-items: flex-end; height: 80px; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.weight-bar {
  flex: 1; min-width: 8px; background: var(--ridge-weight); border-radius: 2px 2px 0 0;
  transition: height 400ms cubic-bezier(0.22,1,0.36,1), background 400ms;
}
.weight-bar.zeroed { background: var(--lasso-zero); height: 2px !important; }
.singular-warn {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--ch-conflict); border-radius: var(--r-sm);
  background: var(--ch-conflict-soft); color: var(--ch-conflict-ink); font-family: var(--font-mono); font-size: 0.82rem;
  animation: shatterIn 500ms 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);
}

/* ============================================================
   S2 判别殿 · 分类之刃
   ============================================================ */
.cmp-classify-blade { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.sigmoid-canvas-zone, .lda-canvas-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.sigmoid-canvas-zone canvas, .lda-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); }
.sigmoid-canvas-zone h4, .lda-canvas-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); text-align: center; }
.cross-entropy-box {
  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.8rem; color: var(--text-2);
}
.ce-step { padding: 2px 0; transition: all 300ms; }
.ce-step.lit { color: var(--ch-gold-ink); background: var(--ch-gold-soft); padding-left: 8px; border-radius: 3px; }
.lda-metric { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.metric-pill {
  padding: 4px 12px; border: 1px solid var(--glass-line); border-radius: 999px;
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-2);
}
.metric-pill b { color: var(--accent); font-size: 0.9rem; }

/* ============================================================
   S3 间隔裂谷 · SVM与核技巧
   ============================================================ */
.cmp-margin-rift { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.svm-canvas-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.svm-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); }
.svm-canvas-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); text-align: center; }
.kernel-control { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; justify-content: center; }
.kernel-select {
  padding: 4px 10px; 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.78rem; cursor: pointer;
}
.kernel-select:focus { border-color: var(--accent); outline: none; }
.margin-readout {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-top: var(--sp-2);
}
.mr-cell {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); text-align: center; font-family: var(--font-mono); font-size: 0.78rem;
}
.mr-cell .mr-label { font-size: 0.66rem; color: var(--text-3); margin-bottom: 2px; }
.mr-cell .mr-value { color: var(--accent); font-size: 1rem; }
.mr-cell.warn .mr-value { color: var(--ch-conflict); }
.collapse-banner {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-conflict); border-radius: var(--r-sm);
  background: var(--ch-conflict-soft); text-align: center; color: var(--ch-conflict-ink);
  font-style: italic; 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); }
}

/* ============================================================
   S4 决策树之林 · 信息之斧
   ============================================================ */
.cmp-tree-forest { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.entropy-zone, .split-zone, .prune-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.entropy-zone h4, .split-zone h4, .prune-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.entropy-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); }
.split-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.split-card {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); text-align: center; cursor: pointer;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); opacity: 0.6;
}
.split-card:hover { opacity: 1; transform: translateY(-2px); }
.split-card.selected { opacity: 1; border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.split-card[data-metric="ig"] { border-top: 3px solid var(--ig-color); }
.split-card[data-metric="gr"] { border-top: 3px solid var(--gr-color); }
.split-card[data-metric="gini"] { border-top: 3px solid var(--gini-color); }
.split-card .sc-name { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--text-1); }
.split-card .sc-val { font-size: 0.72rem; color: var(--text-3); margin-top: 2px; }
.split-card.selected .sc-val { color: var(--accent); }
.prune-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); }
.prune-tabs { display: flex; gap: var(--sp-1); justify-content: center; margin-bottom: var(--sp-2); }
.prune-tab {
  padding: 4px 12px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.75rem; cursor: pointer;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.prune-tab:hover { border-color: var(--accent); }
.prune-tab.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }

/* ============================================================
   S5 集成熔炉 · 众智成城
   ============================================================ */
.cmp-ensemble-forge { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.ensemble-canvas-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.ensemble-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); }
.ensemble-canvas-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); text-align: center; }
.boost-tabs { display: flex; gap: var(--sp-1); justify-content: center; margin-bottom: var(--sp-2); }
.boost-tab {
  padding: 4px 12px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.75rem; cursor: pointer;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.boost-tab:hover { border-color: var(--accent); }
.boost-tab.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.oob-readout {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--ch-ok); border-radius: var(--r-sm);
  background: rgba(34,197,94,0.08); font-family: var(--font-mono); font-size: 0.8rem; color: var(--ch-ok);
}
.boost-compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.boost-card {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.75rem;
}
.boost-card .bc-name { font-family: var(--font-mono); font-weight: 600; color: var(--text-1); margin-bottom: 4px; }
.boost-card .bc-feat { color: var(--text-3); font-size: 0.7rem; }

/* ============================================================
   S6 近邻迷阵 · 距离之死
   ============================================================ */
.cmp-knn-maze { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.knn-canvas-zone, .cluster-collapse-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.knn-canvas-zone canvas, .cluster-collapse-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.knn-canvas-zone h4, .cluster-collapse-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); text-align: center; }
.distance-meter {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-top: var(--sp-2);
}
.dm-cell {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); text-align: center; font-family: var(--font-mono); font-size: 0.78rem;
}
.dm-cell .dm-label { font-size: 0.66rem; color: var(--text-3); margin-bottom: 2px; }
.dm-cell .dm-value { color: var(--accent); font-size: 1rem; transition: color 400ms; }
.dm-cell.collapse .dm-value { color: var(--ratio-meter); }
.accuracy-canvas-zone { width: 100%; }
.accuracy-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); }
.cluster-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.cluster-card {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); text-align: center; font-size: 0.75rem;
  transition: all 400ms cubic-bezier(0.22,1,0.36,1);
}
.cluster-card.collapsed { border-color: var(--ch-conflict); background: var(--ch-conflict-soft); color: var(--ch-conflict-ink); }
.cluster-card .cc-algo { font-family: var(--font-mono); font-weight: 600; color: var(--text-1); margin-bottom: 4px; }
.cluster-card.collapsed .cc-algo { color: var(--ch-conflict); }

/* ============================================================
   S7 概率先知祠 · 贝叶斯的回响
   ============================================================ */
.cmp-bayes-shrine { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.bayes-derive-zone, .gmm-zone, .em-derive-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.bayes-derive-zone h4, .gmm-zone h4, .em-derive-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.nb-models { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-top: var(--sp-2); }
.nb-model {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); text-align: center; cursor: pointer;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); opacity: 0.5;
}
.nb-model:hover { opacity: 1; transform: translateY(-2px); }
.nb-model.lit { opacity: 1; border-color: var(--bayes-gold); background: var(--ch-gold-soft); box-shadow: var(--glow); }
.nb-model .nm-name { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--text-1); }
.nb-model .nm-desc { font-size: 0.66rem; color: var(--text-3); margin-top: 2px; }
.gmm-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); }
.em-iter-control { display: flex; gap: var(--sp-2); justify-content: center; align-items: center; margin-top: var(--sp-2); }
.elbo-ladder {
  display: flex; gap: 2px; align-items: flex-end; height: 60px; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); margin-top: var(--sp-2);
}
.elbo-step {
  flex: 1; min-width: 12px; background: var(--em-elbo); border-radius: 2px 2px 0 0;
  transition: height 400ms cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   S8 降维之渊 · 维度的赎罪
   ============================================================ */
.cmp-reduction-abyss { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.pca-zone, .tsne-zone, .umap-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.pca-zone h4, .tsne-zone h4, .umap-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); text-align: center; }
.pca-canvas-zone canvas, .tsne-canvas-zone canvas, .umap-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); }
.variance-bar {
  width: 100%; height: 10px; border: 1px solid var(--glass-line); border-radius: 5px; background: var(--bg-elev); overflow: hidden; margin-top: var(--sp-2);
}
.variance-fill { height: 100%; background: var(--pca-axis); transition: width 600ms cubic-bezier(0.22,1,0.36,1); }
.reduce-tabs { display: flex; gap: var(--sp-1); justify-content: center; margin-bottom: var(--sp-2); }
.reduce-tab {
  padding: 4px 12px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.75rem; cursor: pointer;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.reduce-tab:hover { border-color: var(--accent); }
.reduce-tab.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.compare-table {
  width: 100%; margin-top: var(--sp-2); border-collapse: collapse; font-family: var(--font-mono); font-size: 0.72rem;
}
.compare-table th, .compare-table td { padding: 4px 8px; border: 1px solid var(--glass-line); text-align: center; }
.compare-table th { background: var(--bg-elev); color: var(--accent-ink); }

/* ============================================================
   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-curse);
  border-radius: var(--r-sm); background: var(--debt-curse-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-curse); font-style: normal; }
.weapon-panel {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-gold); border-radius: var(--r-sm);
  background: var(--ch-gold-soft); margin-bottom: var(--sp-2);
  animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.weapon-panel h4 { font-size: 0.85rem; color: var(--ch-gold-ink); margin-bottom: var(--sp-2); }
.weapon-panel .wp-canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.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(--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; }
.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-gold-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-gold-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);
}
.fog-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);
}

/* ============================================================
   S10 尾声 · 算法之环
   ============================================================ */
.cmp-algo-ring { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.ring-canvas-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.ring-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); }
.ring-canvas-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); text-align: center; }
.algo-pool { display: flex; flex-wrap: wrap; gap: var(--sp-1); justify-content: center; padding: var(--sp-2); border: 1px dashed var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); min-height: 60px; }
.algo-chip {
  padding: 3px 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-2);
  cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1); user-select: none;
}
.algo-chip:hover { border-color: var(--accent); transform: translateY(-2px); }
.algo-chip.placed { opacity: 0.35; cursor: default; transform: none; }
.puzzle-area { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.puzzle-piece {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); text-align: center; cursor: default;
  transition: all 400ms cubic-bezier(0.22,1,0.36,1); min-height: 60px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  opacity: 0.3;
}
.puzzle-piece.lit { opacity: 1; border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.puzzle-piece .pp-name { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: var(--text-1); }
.puzzle-piece .pp-tag { font-size: 0.62rem; color: var(--text-3); }
.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(245,158,11,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; }
  .case-silhouettes { grid-template-columns: repeat(2, 1fr); }
  .map-nodes { grid-template-columns: repeat(2, 1fr); }
  .split-cards { grid-template-columns: 1fr; }
  .boost-compare { grid-template-columns: 1fr; }
  .cluster-cards { grid-template-columns: 1fr; }
  .nb-models { grid-template-columns: 1fr; }
  .margin-readout { grid-template-columns: 1fr; }
  .distance-meter { grid-template-columns: 1fr; }
  .puzzle-area { 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; }
  .conflict-popup, .debt-account, .algo-map, .exclude-mark, .singular-warn, .collapse-banner,
  .derive-step, .ce-step, .weapon-panel, .carve-emergence, .fog-collapse,
  .ring-canvas-zone, .puzzle-piece, .elbo-step, .weight-bar, .variance-fill,
  .pipe-step, .layer-line, .token-chip { animation: none; }
  .case-card:hover { transform: none; }
}