/* ============================================================
   ch05「最优化理论基础：内功法门」章节专属样式
   境界：炼气五层·内功法门（炼气期收官） · 琥珀 var(--ch-amber)
   Boss：局部最优之阱 · 暗金 #78650A
   导师：高斯老祖
   顿悟：突破金 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: #78650A;          /* 局部最优之阱 · 暗金 */
  --ch-boss-ink: #B8966B;      /* 阱暖光 */
  --ch-boss-soft: rgba(120, 101, 10, 0.28);
  --ch-boss-line: rgba(184, 150, 107, 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;
  /* 三条贯穿机制色 */
  --opt-debt: var(--ch-amber);         /* 最优债琥珀金光页 */
  --opt-debt-soft: rgba(245, 158, 11, 0.12);
  --carve-mark: var(--ch-amber);       /* 排除刻痕琥珀金微光 */
  --carve-soft: rgba(245, 158, 11, 0.14);
  --surface-crack: #F87171;    /* 本命损失曲面裂缝红 */
  --surface-heal: var(--ch-epiphany);     /* 裂纹填合金光 */
  /* 优化器分类色 */
  --opt-sgd: var(--ch-amber);          /* SGD琥珀金 */
  --opt-momentum: #38BDF8;     /* 动量蓝 */
  --opt-adagrad: #A78BFA;      /* AdaGrad紫 */
  --opt-rmsprop: #22C55E;      /* RMSProp翠 */
  --opt-adam: var(--ch-epiphany);         /* Adam金 */
  --opt-newton: #8B5CF6;       /* 牛顿法深紫 */
  --opt-bfgs: #06B6D4;         /* BFGS青 */
  /* 曲率色系 */
  --curv-convex: #3B82F6;      /* H正定蓝 */
  --curv-concave: var(--ch-boss);     /* H负定红 */
  --curv-saddle: #8B5CF6;      /* H不定紫（鞍点危险色） */
  /* S0 直觉之赌选项色 */
  --bet-a: var(--ch-amber);            /* 选项A琥珀（阱最想听的） */
  --bet-b: #06B6D4;            /* 选项B青（审慎） */
  --bet-c: #A78BFA;            /* 选项C紫（说不准） */
  /* S1 凸域色 */
  --convex-bowl: var(--ch-amber);      /* 凸碗暖光金 */
  --convex-chord-ok: #FDE68A;  /* 弦在上方金色 */
  --convex-chord-bad: #7F1D1D; /* 弦在下方暗红 */
  --nonconvex-terrain: #3B4252;/* 非凸山峦灰暗 */
  /* S2 梯度下降色 */
  --gd-trail: #FDE68A;         /* 珠子轨迹琥珀尾迹 */
  --gd-diverge: #F87171;       /* 发散红 */
  --gd-field: #FDE68A;         /* 梯度场箭头金 */
  /* S3 非凸色 */
  --local-min-glow: #78650A;   /* 局部最优安逸暖光（阱伪装色） */
  --global-min-deep: #1E3A5F;  /* 全局最优深谷蓝 */
  /* S4 SGD色 */
  --variance-high: #F87171;    /* 高方差红 */
  --variance-low: #22C55E;     /* 低方差绿 */
  --escape-spark: #FDE68A;     /* 逃逸火星金 */
  /* S5 加速色 */
  --sched-fixed: #94A3B8;      /* 固定学习率灰 */
  --sched-step: #06B6D4;       /* Step decay青 */
  --sched-cosine: var(--ch-epiphany);     /* 余弦退火金 */
  /* S6 曲率色 */
  --newton-ray-convex: #3B82F6;/* 凸碗牛顿步蓝 */
  --newton-ray-saddle: var(--ch-boss);/* 鞍点牛顿步红 */
  --dim-curse: #7F1D1D;        /* 维度灾难暗红 */
  /* S7 约束色 */
  --constraint-wall: #38BDF8;  /* 约束墙蓝 */
  --infeasible-fog: #7F1D1D;   /* 不可行区暗红雾 */
  --lambda-price: #D4A853;     /* λ价格金币金 */
  --kkt-glow: var(--ch-epiphany);         /* KKT条件点亮金 */
  /* S8 对偶色 */
  --dual-mirror: #38BDF8;      /* 对偶之镜蓝 */
  --primal-side: var(--ch-amber);      /* 原始侧琥珀 */
  --dual-side: #38BDF8;        /* 对偶侧蓝 */
  --dual-gap: var(--ch-boss);         /* 对偶间隙红 */
  --dim-star-saddle: var(--ch-boss);  /* 鞍点红星 */
  --dim-star-min: #3B82F6;     /* 局部最小蓝星 */
  /* S9 Boss色 */
  --pit-face: #78650A;         /* 阱脸暗金 */
  --pit-vortex: #B8966B;       /* 阱涡流暖灰金 */
  --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, #0A1018) 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(--surface-crack);
  background: rgba(248,113,113,0.14); padding: 0 4px; border-radius: 3px;
}
#carve-panel, #surface-panel {
  position: absolute; right: 0; bottom: calc(100% + var(--sp-1));
  width: 280px; padding: var(--sp-3); z-index: 85;
}
#carve-panel h3, #surface-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; }
#surface-list p { font-size: 0.8rem; color: var(--surface-crack); 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 直觉之赌 · 曲面拾取 · 双景预览
   ============================================================ */
.cmp-intuition-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;
}
.bet-options {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); width: 100%;
}
@media (max-width: 560px) { .bet-options { grid-template-columns: 1fr; } }
.bet-option {
  padding: var(--sp-3); 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); min-height: 70px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.bet-option:hover { border-color: var(--accent); transform: translateY(-2px); }
.bet-option[data-bet="a"] { border-left: 3px solid var(--bet-a); }
.bet-option[data-bet="b"] { border-left: 3px solid var(--bet-b); }
.bet-option[data-bet="c"] { border-left: 3px solid var(--bet-c); }
.bet-option.chosen { border-color: var(--ch-boss); background: var(--ch-boss-soft); box-shadow: 0 0 14px var(--ch-boss-soft); }
.bet-option .bo-label { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--text-1); }
.bet-option .bo-desc { font-size: 0.72rem; color: var(--text-3); }
.surface-pickup {
  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);
}
.surface-pickup h4 { font-size: 0.85rem; color: var(--ch-gold-ink); margin-bottom: var(--sp-2); text-align: center; }
.surface-pickup .btn { display: block; margin: 0 auto; }
.dual-preview {
  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);
}
.dual-preview h4 { font-size: 0.85rem; color: var(--ch-gold-ink); margin-bottom: var(--sp-2); text-align: center; }
.dual-preview canvas { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }

/* ============================================================
   S1 凸域探索台 · 弦线测试 + 标准形式 + 丢球实验
   ============================================================ */
.cmp-convex-domain { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.chord-test {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.chord-test h4 { font-size: 0.85rem; color: var(--ch-gold-ink); margin-bottom: var(--sp-2); text-align: center; }
.chord-test canvas { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); cursor: crosshair; }
.chord-curves { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; margin-top: var(--sp-2); }
.chord-curve-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-2); font-family: var(--font-mono); font-size: 0.75rem;
  cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.chord-curve-btn:hover { border-color: var(--accent); }
.chord-curve-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.chord-curve-btn.judged-convex { border-color: var(--ch-ok); color: var(--ch-ok); }
.chord-curve-btn.judged-nonconvex { border-color: var(--ch-warn); color: var(--ch-warn); }
.std-form {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.std-form h4 { font-size: 0.85rem; color: var(--ch-gold-ink); margin-bottom: var(--sp-2); text-align: center; }
.std-slots { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.std-slot {
  display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2); border: 1px dashed var(--glass-line);
  border-radius: var(--r-xs); background: var(--bg-elev); min-height: 44px;
}
.std-slot .ss-num { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-3); min-width: 48px; }
.std-slot .ss-content { flex: 1; font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent-ink); }
.std-slot.filled { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.std-fragments { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.std-frag {
  padding: var(--sp-1) var(--sp-3); border: 1px solid var(--glass-line); border-radius: 999px;
  background: var(--bg-elev); color: var(--text-2); font-family: var(--font-mono); font-size: 0.8rem;
  cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1); user-select: none;
}
.std-frag:hover { border-color: var(--accent); transform: translateY(-2px); }
.std-frag.placed { opacity: 0.3; cursor: default; transform: none; }
.std-frag.wrong { border-color: var(--ch-warn); background: rgba(239,68,68,0.10); color: var(--ch-warn); }
.ball-drop {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.ball-drop h4 { font-size: 0.85rem; color: var(--ch-gold-ink); margin-bottom: var(--sp-2); text-align: center; }
.ball-drop canvas { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); cursor: pointer; }
.ball-controls { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-2); }
.ball-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-2); font-size: 0.78rem; cursor: pointer;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.ball-btn:hover { border-color: var(--accent); }
.ball-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }

/* ============================================================
   S2 梯度下降实验台 · 步长三档 + 公式浮现 + 梯度场
   ============================================================ */
.cmp-gradient-descent { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.step-selector { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.step-btn {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); color: var(--text-2); font-family: var(--font-mono); font-size: 0.82rem;
  cursor: pointer; transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.step-btn:hover { border-color: var(--accent); transform: translateY(-2px); }
.step-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); box-shadow: var(--glow); }
.step-btn[data-step="large"].active { border-color: var(--ch-warn); background: rgba(239,68,68,0.10); color: var(--ch-warn); }
.cmp-gradient-descent canvas { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.gd-formula {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-epiphany); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.gd-formula .formula-line { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-1); margin: var(--sp-1) 0; }
.gd-formula .formula-line code { color: var(--ch-epiphany-ink); }
.gd-formula .formula-line.dim { color: var(--text-3); font-size: 0.78rem; }

/* ============================================================
   S3 非凸曲面探索器 · 多起点丢球 + 梯度零点三分类 + 深度对比
   ============================================================ */
.cmp-nonconvex-wall { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.cmp-nonconvex-wall canvas { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); cursor: pointer; }
.start-selector { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.start-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-2); font-family: var(--font-mono); font-size: 0.75rem;
  cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.start-btn:hover { border-color: var(--accent); }
.start-btn.used { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.stationary-classifier {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-conflict); border-radius: var(--r-sm);
  background: var(--ch-conflict-soft); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.stationary-classifier h4 { font-size: 0.85rem; color: var(--ch-conflict-ink); margin-bottom: var(--sp-2); text-align: center; }
.sc-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
@media (max-width: 560px) { .sc-options { grid-template-columns: 1fr; } }
.sc-option {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); color: var(--text-2); font-size: 0.78rem; text-align: center;
  cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.sc-option:hover { border-color: var(--accent); }
.sc-option.correct { border-color: var(--ch-ok); background: rgba(34,197,94,0.12); color: var(--ch-ok); }
.sc-option.wrong { border-color: var(--ch-warn); background: rgba(239,68,68,0.10); color: var(--ch-warn); }
.depth-compare {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-epiphany); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft); animation: riftOpen 600ms cubic-bezier(0.22,1,0.36,1);
}
.depth-compare h4 { font-size: 0.85rem; color: var(--ch-epiphany-ink); margin-bottom: var(--sp-2); text-align: center; }
.dc-row { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-1) 0; border-bottom: 1px dashed var(--glass-line); }
.dc-row:last-child { border-bottom: none; }
.dc-label { font-size: 0.82rem; color: var(--text-2); }
.dc-val { font-family: var(--font-mono); font-size: 0.85rem; color: var(--ch-epiphany-ink); font-weight: 600; }

/* ============================================================
   S4 SGD逃逸实验台 · 批量大小 + 方差仪表盘 + 收敛对比
   ============================================================ */
.cmp-stochastic-force { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.batch-selector { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.batch-btn {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-sunk); color: var(--text-2); font-family: var(--font-mono); font-size: 0.75rem;
  cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.batch-btn:hover { border-color: var(--accent); }
.batch-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.cmp-stochastic-force canvas { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.variance-dashboard {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.variance-dashboard h4 { font-size: 0.85rem; color: var(--ch-gold-ink); margin-bottom: var(--sp-2); text-align: center; }
.var-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.var-meter {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); text-align: center;
}
.var-meter .vm-label { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-3); margin-bottom: 4px; }
.var-meter .vm-bar { height: 8px; border-radius: 4px; background: var(--bg-sunk); overflow: hidden; margin: 4px 0; }
.var-meter .vm-fill { height: 100%; border-radius: 4px; transition: width 400ms cubic-bezier(0.22,1,0.36,1); }
.var-meter .vm-val { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-1); }
.convergence-compare {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-epiphany); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.convergence-compare h4 { font-size: 0.85rem; color: var(--ch-epiphany-ink); margin-bottom: var(--sp-2); text-align: center; }
.convergence-compare canvas { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }

/* ============================================================
   S5 加速法器架 · 动量 + 自适应优化器 + 学习率调度
   ============================================================ */
.cmp-accelerator { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.accel-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
@media (max-width: 768px) { .accel-row { grid-template-columns: 1fr; } }
.momentum-zone, .optimizer-zone, .schedule-zone {
  padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk);
}
.momentum-zone { border-top: 3px solid var(--opt-momentum); }
.optimizer-zone { border-top: 3px solid var(--opt-adam); }
.schedule-zone { border-top: 3px solid var(--sched-cosine); }
.momentum-zone h4, .optimizer-zone h4, .schedule-zone h4 { font-size: 0.82rem; margin-bottom: var(--sp-2); text-align: center; }
.momentum-zone h4 { color: var(--opt-momentum); }
.optimizer-zone h4 { color: var(--opt-adam); }
.schedule-zone h4 { color: var(--sched-cosine); }
.momentum-zone code { display: block; text-align: center; font-size: 0.72rem; color: var(--text-3); margin-top: var(--sp-1); }
.opt-selector, .sched-selector { display: flex; flex-direction: column; gap: var(--sp-1); }
.opt-btn, .sched-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-2); font-family: var(--font-mono); font-size: 0.75rem;
  cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1); text-align: center;
}
.opt-btn:hover, .sched-btn:hover { border-color: var(--accent); }
.opt-btn.active, .sched-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.cmp-accelerator canvas { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.opt-detail {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-epiphany); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
  font-size: 0.8rem; color: var(--text-1); line-height: 1.6;
}
.opt-detail code { font-family: var(--font-mono); color: var(--ch-epiphany-ink); }

/* ============================================================
   S6 曲率透镜 · 牛顿法 vs GD + Hessian + 代价面板
   ============================================================ */
.cmp-curvature-eye { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.surface-selector, .method-selector { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.surf-btn, .meth-btn {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); color: var(--text-2); font-family: var(--font-mono); font-size: 0.78rem;
  cursor: pointer; transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.surf-btn:hover, .meth-btn:hover { border-color: var(--accent); transform: translateY(-2px); }
.surf-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.surf-btn[data-surf="saddle"].active { border-color: var(--curv-saddle); background: rgba(139,92,246,0.12); color: var(--curv-saddle); }
.meth-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.meth-btn[data-meth="newton"].active { border-color: var(--opt-newton); background: rgba(139,92,246,0.12); color: var(--opt-newton); }
.cmp-curvature-eye canvas { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.hessian-panel {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--curv-saddle); border-radius: var(--r-sm);
  background: rgba(139,92,246,0.08); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.hessian-panel h4 { font-size: 0.85rem; color: var(--curv-saddle); margin-bottom: var(--sp-2); text-align: center; }
.hv-rows { display: flex; flex-direction: column; gap: var(--sp-1); }
.hv-row { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.hv-label { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-2); }
.hv-val { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600; }
.hv-val.pos { color: var(--curv-convex); }
.hv-val.neg { color: var(--curv-concave); }
.hv-val.zero { color: var(--text-3); }
.cost-panel {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-epiphany); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft); animation: riftOpen 600ms cubic-bezier(0.22,1,0.36,1);
}
.cost-panel h4 { font-size: 0.85rem; color: var(--ch-epiphany-ink); margin-bottom: var(--sp-2); text-align: center; }
.cost-rows { display: flex; flex-direction: column; gap: var(--sp-1); }
.cost-row { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.cost-label { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-2); }
.cost-val { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ch-epiphany-ink); font-weight: 600; }

/* ============================================================
   S7 约束优化台 · 等高线-约束切点 + λ滑块 + KKT四条件
   ============================================================ */
.cmp-constraint-lock { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.contour-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.contour-zone h4 { font-size: 0.85rem; color: var(--ch-gold-ink); margin-bottom: var(--sp-2); text-align: center; }
.contour-zone canvas { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.kkt-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.kkt-zone h4 { font-size: 0.85rem; color: var(--ch-gold-ink); margin-bottom: var(--sp-2); text-align: center; }
.kkt-conditions { display: flex; flex-direction: column; gap: var(--sp-2); }
.kkt-cond {
  display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2); border: 1px solid var(--glass-line);
  border-radius: var(--r-xs); background: var(--bg-elev); cursor: pointer;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); opacity: 0.5;
}
.kkt-cond:hover { opacity: 1; border-color: var(--accent); }
.kkt-cond.lit { opacity: 1; border-color: var(--kkt-glow); background: rgba(251,191,36,0.10); box-shadow: 0 0 12px rgba(251,191,36,0.20); }
.kkt-cond .kc-num { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-3); min-width: 24px; }
.kkt-cond .kc-name { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-1); font-weight: 600; }
.kkt-cond .kc-formula { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-3); margin-left: auto; }
.kkt-cond.lit .kc-name { color: var(--kkt-glow); }
.kkt-cond.lit .kc-formula { color: var(--ch-epiphany-ink); }

/* ============================================================
   S8 对偶之镜 · 对偶函数 + 维度滑块 + minimax视图
   ============================================================ */
.cmp-dual-mirror { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.dual-zone, .dim-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.dual-zone h4, .dim-zone h4 { font-size: 0.85rem; color: var(--ch-gold-ink); margin-bottom: var(--sp-2); text-align: center; }
.dual-zone canvas, .dim-zone canvas { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.dual-toggle { display: flex; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-2); }
.dt-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-2); font-family: var(--font-mono); font-size: 0.75rem;
  cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.dt-btn:hover { border-color: var(--accent); }
.dt-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.dual-gap {
  text-align: center; font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-2);
  margin-top: var(--sp-2); padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev);
}
.dual-gap strong { color: var(--ch-epiphany-ink); }
.dual-gap.has-gap strong { color: var(--dual-gap); }
.minimax-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--curv-saddle); border-radius: var(--r-sm);
  background: rgba(139,92,246,0.08); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.minimax-zone h4 { font-size: 0.85rem; color: var(--curv-saddle); margin-bottom: var(--sp-2); text-align: center; }

/* ============================================================
   S9 Boss战 · 局部最优之阱
   ============================================================ */
#s9-arena { position: relative; }
.boss-figure { margin-bottom: var(--sp-3); }
.boss-figure canvas { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; border: 1px solid var(--ch-boss-line); border-radius: var(--r-sm); background: var(--bg-elev); }
.q-progress-bar { width: 100%; height: 4px; background: var(--bg-sunk); border-radius: 2px; overflow: hidden; margin-bottom: var(--sp-3); }
.q-progress-fill { height: 100%; width: 0%; background: var(--accent); border-radius: 2px; transition: width 500ms cubic-bezier(0.22,1,0.36,1); }
.debt-ledger {
  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); margin-bottom: var(--sp-2); animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.debt-ledger .ledger-line { font-size: 0.78rem; color: var(--text-2); margin: 2px 0; font-style: italic; }
.debt-ledger .ledger-line b { color: var(--ch-boss-ink); font-style: normal; }
.q-panel {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-boss-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); min-height: 80px; margin-bottom: var(--sp-2); font-size: 0.95rem; color: var(--text-1);
}
.q-panel .q-text { margin-bottom: var(--sp-2); font-weight: 600; }
.q-panel .q-account { font-size: 0.8rem; color: var(--ch-boss-ink); font-style: italic; padding: var(--sp-1) var(--sp-2); border-left: 2px solid var(--ch-boss); background: var(--ch-boss-soft); border-radius: 0 var(--r-xs) var(--r-xs) 0; }
.q-feedback {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); font-size: 0.85rem; margin-top: var(--sp-2);
  animation: riftOpen 300ms cubic-bezier(0.22,1,0.36,1);
}
.q-feedback.right { border: 1px solid var(--ch-ok); background: rgba(34,197,94,0.10); color: var(--ch-ok); }
.q-feedback.wrong { border: 1px solid var(--ch-warn); background: rgba(239,68,68,0.10); color: var(--ch-warn); }
.carve-emergence {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--carve-mark); border-radius: var(--r-sm);
  background: var(--carve-soft); margin-top: var(--sp-2); 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-item {
  padding: var(--sp-1) var(--sp-2); margin: 4px 0; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.78rem; color: var(--text-2); font-style: italic;
  transition: all 400ms cubic-bezier(0.22,1,0.36,1);
}
.carve-item.lit { border-color: var(--carve-mark); color: var(--ch-gold-ink); box-shadow: 0 0 8px var(--carve-soft); }
.carve-item.net { border-color: var(--net-gold); color: var(--net-gold); background: rgba(251,191,36,0.10); box-shadow: 0 0 12px rgba(251,191,36,0.20); }
.pit-collapse {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--net-gold); border-radius: var(--r-sm);
  background: rgba(251,191,36,0.10); margin-top: var(--sp-2); font-size: 0.85rem; color: var(--net-gold);
  font-style: italic; text-align: center; animation: riftOpen 600ms cubic-bezier(0.22,1,0.36,1);
}
.q-option.eliminated { opacity: 0.3; cursor: default; transform: none; text-decoration: line-through; border-color: var(--opt-excluded); background: rgba(71,85,105,0.16); }

/* ============================================================
   S10 尾声 · 内功大成 · 知识图谱点亮 + 境界突破
   ============================================================ */
.cmp-finale { width: 100%; display: flex; flex-direction: column; gap: var(--sp-4); }
.surface-crystal {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-gold); border-radius: var(--r-sm);
  background: var(--ch-gold-soft);
}
.surface-crystal h4 { font-size: 0.85rem; color: var(--ch-gold-ink); margin-bottom: var(--sp-2); text-align: center; }
.surface-crystal canvas { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.puzzle-area {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-2); width: 100%;
}
.puzzle-piece {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk);
  cursor: pointer; transition: all 300ms cubic-bezier(0.22,1,0.36,1); opacity: 0.5; text-align: center;
}
.puzzle-piece:hover { opacity: 1; border-color: var(--accent); transform: translateY(-2px); }
.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.75rem; font-weight: 600; color: var(--text-1); }
.puzzle-piece.lit .pp-name { color: var(--accent-ink); }
.puzzle-piece .pp-tag { font-size: 0.65rem; color: var(--text-3); margin-top: 2px; }
.depth-readout {
  text-align: center; font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-2);
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk);
}
.realm-achieved {
  width: 100%; padding: var(--sp-4); border: 2px solid var(--breakthrough); border-radius: var(--r-sm);
  background: radial-gradient(ellipse at center, rgba(251,191,36,0.16) 0%, rgba(251,191,36,0.04) 70%);
  text-align: center; animation: riftOpen 800ms cubic-bezier(0.22,1,0.36,1);
}
.realm-glow {
  display: inline-block; font-family: var(--font-serif); font-size: 1.1rem; letter-spacing: 0.15em;
  color: var(--breakthrough); text-shadow: 0 0 20px rgba(251,191,36,0.40);
  animation: realmPulse 2s cubic-bezier(0.22,1,0.36,1) infinite;
}
@keyframes realmPulse {
  0%, 100% { text-shadow: 0 0 20px rgba(251,191,36,0.40); }
  50% { text-shadow: 0 0 36px rgba(251,191,36,0.70); }
}

/* ---------- 通用排除刻痕 ---------- */
.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);
}

/* ---------- 通用动画 ---------- */
@keyframes riftOpen {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}