/* ============================================================
   ch22「编程语言与范式」章节专属样式
   境界：元婴六层·语言通神 · 靛蓝 #6366F1
   Boss：范式之锁 · 锁灰 #9AA7BD
   顿悟：突破金 var(--ch-epiphany)（理解发生之处/金光裂纹/顿悟脉冲）
   点缀：范式之钥金 #D4A853（钥匙铸成）
   背景：暖深蓝灰 var(--ch-bg-warm)（禁止纯黑）
   全部色值走 tokens 变量；玻璃态卡片；发光仅限边框/背景。
   ============================================================ */

/* ---------- 章节境界色覆写：靛蓝 ---------- */
:root, :root[data-theme="light"] {
  --accent: #6366F1;
  --accent-ink: #4F46E5;
  --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: #818CF8;
  --accent-ink: #6366F1;
  --accent-soft: rgba(99, 102, 241, 0.16);
  --glass-line: rgba(129, 140, 248, 0.22);
  --glow: 0 0 22px rgba(99, 102, 241, 0.34);
  --on-accent: #FFFFFF;
  --r-xs: 4px;
}

/* ---------- 章节专用叙事色 ---------- */
:root {
  --ch-boss: #9AA7BD;          /* 范式之锁 · 锁灰 */
  --ch-boss-ink: #64748B;
  --ch-boss-soft: rgba(154, 167, 189, 0.18);
  --ch-boss-line: rgba(154, 167, 189, 0.40);
  --ch-epiphany: var(--ch-epiphany);      /* 顿悟突破金（理解发生之处） */
  --ch-epiphany-soft: rgba(251, 191, 36, 0.16);
  --ch-epiphany-ink: #D97706;
  --ch-key-gold: #D4A853;      /* 范式之钥铸成金 */
  --ch-key-soft: rgba(212, 168, 83, 0.16);
  --ch-indigo: #6366F1;        /* 靛蓝点缀 */
  --ch-indigo-soft: rgba(99, 102, 241, 0.14);
  --ch-indigo-ink: #4F46E5;
  /* 五大范式功能色 */
  --par-imperative: var(--ch-amber);   /* 命令式琥珀 */
  --par-oop: #10B981;          /* OOP翠绿 */
  --par-functional: #8B5CF6;   /* 函数式紫 */
  --par-logic: #06B6D4;        /* 逻辑式青 */
  --par-declarative: #EC4899;  /* 声明式粉 */
  /* S1 命令式 */
  --mem-cell: #1E293B;
  --mem-active: #6366F1;
  --mem-idle: #334155;
  --stack-frame: #6366F1;
  --stack-overflow: var(--ch-boss);
  --instr-track: var(--ch-amber);
  /* S2 对象之塔 */
  --pillar-encap: #10B981;
  --pillar-inherit: #34D399;
  --pillar-poly: #6EE7B7;
  --pillar-abstr: #A7F3D0;
  --diamond-conflict: #F87171;
  --fragile-crack: var(--ch-boss);
  /* S3 类型 */
  --type-static-strong: #6366F1;
  --type-static-weak: var(--ch-amber);
  --type-dynamic-strong: #10B981;
  --type-dynamic-weak: #EC4899;
  --infer-flow: #38BDF8;
  --generic-ring: #A78BFA;
  /* S4 作用域 */
  --scope-lexical: #6366F1;
  --scope-dynamic: var(--ch-amber);
  --closure-link: #10B981;
  --leak-ghost: #7F1D1D;
  /* S5 GC三道 */
  --furnace-ms: var(--ch-amber);
  --furnace-rc: #06B6D4;
  --furnace-gen: #8B5CF6;
  --heap-reachable: #6366F1;
  --heap-unreachable: #334155;
  --heap-fragment: #7F1D1D;
  --heap-leak: #F87171;
  --gen-young: #06B6D4;
  --gen-old: #8B5CF6;
  --stw-frozen: var(--ch-boss);
  /* S6 异常 */
  --err-trycatch: var(--ch-amber);
  --err-raii: #10B981;
  --err-result: #6366F1;
  --err-spark: #F87171;
  /* S7 并发 */
  --thread-trail: #6366F1;
  --race-spark: #F87171;
  --deadlock-ice: #7F1D1D;
  --csp-channel: #10B981;
  --actor-shell: #06B6D4;
  /* S8 函数式 */
  --mirror-flow: #8B5CF6;
  --share-link: #10B981;
  --side-reject: #F87171;
  --prolog-ok: #6366F1;
  --prolog-fail: #334155;
  /* S9 Boss */
  --lock-chain: #9AA7BD;
  --indigo-seam: #6366F1;
  --answer-correct: #6366F1;
  --answer-wrong: var(--ch-boss);
  --answer-eliminated: #374151;
  --scar-mark: #6366F1;
  --crack-light: #6366F1;
  --breakthrough: #FBBF24;
  --halt-shadow: #475569;
  /* 选项/状态色 */
  --opt-correct: #22C55E;
  --opt-wrong: var(--ch-boss);
  --opt-excluded: #374151;
  --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, #111527 0%, var(--ch-bg-warm) 70%);
}
.op-title span {
  display: inline-block; opacity: 0;
  text-shadow: 0 0 60px var(--accent-soft), 0 0 24px var(--ch-indigo-soft);
}
.inv-crack {
  display: inline-block; margin-left: var(--sp-1);
  font-size: 0.65rem; color: var(--ch-epiphany);
  background: rgba(251,191,36,0.14); padding: 0 4px; border-radius: 3px;
}
#carve-panel, #wound-panel {
  position: absolute; right: 0; bottom: calc(100% + var(--sp-1));
  width: 290px; padding: var(--sp-3); z-index: 85;
}
#carve-panel h3 { font-size: 0.9rem; margin-bottom: var(--sp-2); color: var(--ch-epiphany-ink); }
#wound-panel h3 { font-size: 0.9rem; margin-bottom: var(--sp-2); color: var(--ch-key-gold); }
#carve-list p { font-size: 0.8rem; color: var(--text-2); margin: var(--sp-1) 0; }
#wound-list p { font-size: 0.8rem; color: var(--ch-key-gold); margin: var(--sp-1) 0; }
#wound-list p.patched { color: var(--ch-ok); text-decoration: line-through; }
.option.excluded { opacity: 0.3; cursor: default; transform: none; text-decoration: line-through; border-color: var(--opt-excluded); background: rgba(55,65,81,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-unit.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.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-paradigm-bet { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.bet-prompt {
  text-align: center; font-size: 1rem; color: var(--accent-ink);
  padding: var(--sp-2); letter-spacing: 0.06em;
}
.giant-lock {
  text-align: center; padding: var(--sp-3); border: 1px solid var(--ch-boss-line); border-radius: var(--r-sm);
  background: var(--ch-boss-soft); font-family: var(--font-mono); font-size: 0.82rem; color: var(--ch-boss-ink);
}
.bet-zone {
  width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2);
  padding: var(--sp-2);
}
.code-flow {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); cursor: pointer; text-align: center;
  font-family: var(--font-mono); font-size: 0.78rem; min-height: 70px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); opacity: 0.7;
}
.code-flow:hover { opacity: 1; transform: translateY(-2px); }
.code-flow[data-par="imperative"] { border-left: 4px solid var(--par-imperative); }
.code-flow[data-par="oop"] { border-left: 4px solid var(--par-oop); }
.code-flow[data-par="functional"] { border-left: 4px solid var(--par-functional); }
.code-flow[data-par="logic"] { border-left: 4px solid var(--par-logic); }
.code-flow[data-par="declarative"] { border-left: 4px solid var(--par-declarative); }
.code-flow.guessed { opacity: 1; border-color: var(--opt-wrong); background: rgba(239,68,68,0.10); }
.code-flow.guessed .cf-name { color: var(--opt-wrong); }
.code-flow .cf-name { font-weight: 600; color: var(--text-1); font-size: 0.82rem; }
.code-flow .cf-code { color: var(--text-3); font-size: 0.7rem; }
.counterexample-panel {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--opt-warn); border-radius: var(--r-sm);
  background: rgba(239,68,68,0.08); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.counterexample-panel h4 { font-size: 0.85rem; color: var(--opt-warn); margin-bottom: var(--sp-2); }
.counterexample-panel .ce-name { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-1); margin-bottom: 4px; }
.counterexample-panel .ce-code { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-3); white-space: pre-wrap; }
.lock-debt-counter {
  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 400ms cubic-bezier(0.22,1,0.36,1);
}
.lock-debt-counter b { color: var(--ch-boss-ink); font-style: normal; }
.dual-path-verify {
  width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2);
  animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.path-door {
  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: 90px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.path-door:hover { border-color: var(--accent); transform: translateY(-2px); }
.path-door[data-door="interpret"] { border-left: 4px solid var(--par-imperative); }
.path-door[data-door="compile"] { border-left: 4px solid var(--par-functional); }
.path-door .pd-name { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600; color: var(--text-1); }
.path-door .pd-desc { font-size: 0.72rem; color: var(--text-3); }
.path-door .pd-result { font-size: 0.74rem; color: var(--opt-warn); margin-top: 4px; }
.path-door.compiled-ok .pd-result { color: var(--ch-ok); }

/* ============================================================
   S1 命令殿堂 · 状态之流
   ============================================================ */
.cmp-imperative-hall { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.mem-wall {
  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);
}
.mem-wall h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.mem-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px;
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev);
}
.mem-cell {
  aspect-ratio: 1; border: 1px solid var(--mem-idle); border-radius: 2px;
  background: var(--mem-cell); font-family: var(--font-mono); font-size: 0.6rem;
  display: flex; align-items: center; justify-content: center; color: var(--text-3);
  transition: all 250ms cubic-bezier(0.22,1,0.36,1);
}
.mem-cell.active { background: var(--mem-active); border-color: var(--mem-active); color: #fff; box-shadow: 0 0 8px var(--accent-soft); }
.mem-cell.dirty { background: var(--opt-wrong); border-color: var(--opt-wrong); color: #fff; }
.instr-bench {
  width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2);
}
.instr-block {
  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-family: var(--font-mono); font-size: 0.78rem; text-align: center;
  transition: all 250ms cubic-bezier(0.22,1,0.36,1); min-height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.instr-block:hover { border-color: var(--instr-track); transform: translateY(-1px); }
.instr-block.run { border-color: var(--instr-track); background: rgba(245,158,11,0.12); color: var(--instr-track); }
.stack-viz {
  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);
}
.stack-viz h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.param-toggle { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-2); }
.param-toggle .btn { padding: 4px 10px; font-size: 0.74rem; min-height: 30px; }
.param-toggle .btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.stack-tower {
  display: flex; flex-direction: column-reverse; gap: 3px; min-height: 120px; padding: var(--sp-2);
  border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev);
}
.stack-frame {
  padding: 4px 8px; border: 1px solid var(--stack-frame); border-radius: var(--r-xs);
  background: var(--ch-indigo-soft); font-family: var(--font-mono); font-size: 0.72rem; color: var(--ch-indigo-ink);
  animation: riftOpen 300ms cubic-bezier(0.22,1,0.36,1);
}
.stack-frame.overflow { border-color: var(--stack-overflow); background: rgba(239,68,68,0.12); color: var(--stack-overflow); }
.scale-control { display: flex; align-items: center; gap: var(--sp-2); width: 100%; margin-bottom: var(--sp-2); }
.scale-control input[type="range"] { flex: 1; }
.scale-readout { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent-ink); min-width: 5em; text-align: right; }
.tangle-note {
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--opt-warn); border-radius: var(--r-sm);
  background: rgba(239,68,68,0.10); font-size: 0.8rem; color: var(--opt-warn);
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   S2 对象之塔 · 封继承多
   ============================================================ */
.cmp-oop-tower { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.pillar-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2);
}
.pillar-card {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); cursor: pointer; text-align: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); min-height: 70px; opacity: 0.5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.pillar-card:hover { opacity: 0.8; transform: translateY(-2px); }
.pillar-card.lit { opacity: 1; border-color: var(--pillar-encap); background: rgba(16,185,129,0.10); box-shadow: 0 0 12px rgba(16,185,129,0.2); }
.pillar-card[data-pillar="encap"].lit { border-color: var(--pillar-encap); }
.pillar-card[data-pillar="inherit"].lit { border-color: var(--pillar-inherit); }
.pillar-card[data-pillar="poly"].lit { border-color: var(--pillar-poly); }
.pillar-card[data-pillar="abstr"].lit { border-color: var(--pillar-abstr); }
.pillar-card .pc-name { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600; color: var(--text-1); }
.pillar-card .pc-desc { font-size: 0.68rem; color: var(--text-3); }
.tower-canvas-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk);
}
.diamond-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--diamond-conflict); border-radius: var(--r-sm);
  background: rgba(248,113,113,0.06); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.diamond-zone h4 { font-size: 0.85rem; color: var(--diamond-conflict); margin-bottom: var(--sp-2); }
.diamond-paths { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.path-card {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.74rem;
}
.path-card .pc-label { font-size: 0.7rem; color: var(--text-3); margin-bottom: 4px; }
.path-card .pc-struct { color: var(--text-2); white-space: pre-wrap; }
.path-card.conflict { border-color: var(--diamond-conflict); background: rgba(248,113,113,0.10); }
.fragile-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--fragile-crack); border-radius: var(--r-sm);
  background: rgba(239,68,68,0.08); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.fragile-zone h4 { font-size: 0.85rem; color: var(--fragile-crack); margin-bottom: var(--sp-2); }
.fragile-result { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-2); min-height: 28px; }
.fragile-result.crack { color: var(--fragile-crack); }

/* ============================================================
   S3 类型之渊 · 静动强弱
   ============================================================ */
.cmp-type-abyss { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.quadrant-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2);
}
.quadrant-card {
  padding: var(--sp-2) 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; opacity: 0.65;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.quadrant-card:hover { opacity: 1; transform: translateY(-2px); }
.quadrant-card.tried { opacity: 1; }
.quadrant-card[data-quad="ss"] { border-left: 4px solid var(--type-static-strong); }
.quadrant-card[data-quad="sw"] { border-left: 4px solid var(--type-static-weak); }
.quadrant-card[data-quad="ds"] { border-left: 4px solid var(--type-dynamic-strong); }
.quadrant-card[data-quad="dw"] { border-left: 4px solid var(--type-dynamic-weak); }
.quadrant-card .qc-name { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; color: var(--text-1); }
.quadrant-card .qc-lang { font-size: 0.68rem; color: var(--text-3); }
.type-result {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--accent); border-radius: var(--r-sm);
  background: var(--accent-soft); font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-2);
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.type-result.warn { border-color: var(--opt-warn); background: rgba(239,68,68,0.10); color: var(--opt-warn); }
.infer-zone, .generic-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);
}
.infer-zone h4, .generic-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.infer-chain { font-family: var(--font-mono); font-size: 0.8rem; color: var(--infer-flow); min-height: 28px; }
.generic-level { font-family: var(--font-mono); font-size: 0.78rem; color: var(--generic-ring); margin-top: var(--sp-1); }
.generic-readout { margin-top: var(--sp-2); font-size: 0.82rem; color: var(--opt-warn); min-height: 28px; }

/* ============================================================
   S4 作用域迷宫 · 词法动态
   ============================================================ */
.cmp-scope-maze { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.scope-mode-toggle { display: flex; gap: var(--sp-1); }
.scope-mode-toggle .btn { padding: 4px 12px; font-size: 0.78rem; min-height: 32px; }
.scope-mode-toggle .btn.active.lexical { background: var(--accent-soft); border-color: var(--scope-lexical); color: var(--scope-lexical); }
.scope-mode-toggle .btn.active.dynamic { background: rgba(245,158,11,0.12); border-color: var(--scope-dynamic); color: var(--scope-dynamic); }
.scope-canvas-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk);
}
.scope-result {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--accent); border-radius: var(--r-sm);
  background: var(--accent-soft); font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-2);
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.scope-result.swap { border-color: var(--scope-dynamic); background: rgba(245,158,11,0.10); color: var(--scope-dynamic); }
.closure-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--closure-link); border-radius: var(--r-sm);
  background: rgba(16,185,129,0.06); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.closure-zone h4 { font-size: 0.85rem; color: var(--closure-link); margin-bottom: var(--sp-2); }
.closure-cells { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-2); }
.closure-cell {
  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.74rem; text-align: center;
  transition: all 250ms cubic-bezier(0.22,1,0.36,1);
}
.closure-cell.shared { border-color: var(--closure-link); background: rgba(16,185,129,0.10); color: var(--closure-link); }
.closure-cell.fixed { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.mem-mode-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);
}
.mem-mode-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.leak-cell {
  padding: var(--sp-2); border: 1px solid var(--leak-ghost); border-radius: var(--r-xs);
  background: rgba(127,29,29,0.18); font-family: var(--font-mono); font-size: 0.74rem; color: var(--opt-warn);
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   S5 回收之炉 · GC三道三旋钮实验台
   ============================================================ */
.cmp-gc-furnace { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.furnace-tabs { display: flex; gap: var(--sp-1); }
.furnace-tab {
  flex: 1; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); cursor: pointer; text-align: center;
  font-family: var(--font-mono); font-size: 0.78rem; transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.furnace-tab:hover { border-color: var(--accent); }
.furnace-tab.active[data-algo="ms"] { border-color: var(--furnace-ms); background: rgba(245,158,11,0.12); color: var(--furnace-ms); }
.furnace-tab.active[data-algo="rc"] { border-color: var(--furnace-rc); background: rgba(6,182,212,0.12); color: var(--furnace-rc); }
.furnace-tab.active[data-algo="gen"] { border-color: var(--furnace-gen); background: rgba(139,92,246,0.12); color: var(--furnace-gen); }
.furnace-stage {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); transition: all 600ms cubic-bezier(0.22,1,0.36,1); min-height: 200px;
}
.furnace-stage.frozen { border-color: var(--stw-frozen); background: rgba(239,68,68,0.10); box-shadow: 0 0 24px rgba(239,68,68,0.2); }
.furnace-stage.frozen .heap-grid { opacity: 0.5; pointer-events: none; }
.heap-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; padding: var(--sp-2);
  border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); margin-bottom: var(--sp-2);
}
.heap-obj {
  aspect-ratio: 1; border: 1px solid var(--heap-unreachable); border-radius: 3px;
  background: var(--heap-unreachable); font-family: var(--font-mono); font-size: 0.6rem;
  display: flex; align-items: center; justify-content: center; color: var(--text-3);
  transition: all 350ms cubic-bezier(0.22,1,0.36,1); position: relative;
}
.heap-obj.reachable { background: var(--heap-reachable); border-color: var(--heap-reachable); color: #fff; }
.heap-obj.marked { box-shadow: 0 0 8px var(--accent-soft); }
.heap-obj.swept { opacity: 0.15; transform: scale(0.7); }
.heap-obj.fragment { background: var(--heap-fragment); border-color: var(--heap-fragment); border-style: dashed; }
.heap-obj.leak { border-color: var(--heap-leak); box-shadow: 0 0 8px rgba(248,113,113,0.4); animation: leakPulse 1.5s ease-in-out infinite; }
.heap-obj .rc-tag {
  position: absolute; top: -8px; right: -4px; font-size: 0.55rem; padding: 0 3px;
  background: var(--furnace-rc); color: #fff; border-radius: 3px;
}
.heap-obj.young { border-color: var(--gen-young); }
.heap-obj.old { border-color: var(--gen-old); background: rgba(139,92,246,0.2); }
@keyframes leakPulse { 0%,100% { box-shadow: 0 0 6px rgba(248,113,113,0.3);} 50% { box-shadow: 0 0 14px rgba(248,113,113,0.6);} }
.stw-banner {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--stw-frozen); border-radius: var(--r-sm);
  background: rgba(239,68,68,0.14); text-align: center; font-family: var(--font-mono); font-size: 0.82rem;
  color: var(--stw-frozen); margin-bottom: var(--sp-2); animation: riftOpen 300ms cubic-bezier(0.22,1,0.36,1);
}
.gc-controls { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.gc-result {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--accent); border-radius: var(--r-sm);
  background: var(--accent-soft); font-size: 0.82rem; color: var(--text-2);
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.gc-result.warn { border-color: var(--opt-warn); background: rgba(239,68,68,0.10); color: var(--opt-warn); }
.tradeoff-triangle {
  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);
}
.tradeoff-triangle h4 { font-size: 0.85rem; color: var(--ch-epiphany-ink); margin-bottom: var(--sp-2); }
.tradeoff-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.tradeoff-cell {
  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.72rem;
}
.tradeoff-cell .tc-name { font-weight: 600; color: var(--text-1); margin-bottom: 4px; }
.tradeoff-cell .tc-cost { color: var(--opt-warn); font-size: 0.68rem; }

/* ============================================================
   S6 异常裂隙 · 三种救赎
   ============================================================ */
.cmp-exception-rift { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.bridge-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.bridge-card {
  padding: var(--sp-2) 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: 80px; opacity: 0.6;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.bridge-card:hover { opacity: 1; transform: translateY(-2px); }
.bridge-card.tried { opacity: 1; }
.bridge-card[data-bridge="trycatch"] { border-left: 4px solid var(--err-trycatch); }
.bridge-card[data-bridge="raii"] { border-left: 4px solid var(--err-raii); }
.bridge-card[data-bridge="result"] { border-left: 4px solid var(--err-result); }
.bridge-card .bc-name { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600; color: var(--text-1); }
.bridge-card .bc-desc { font-size: 0.68rem; color: var(--text-3); }
.bridge-detail {
  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);
}
.bridge-detail h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.bridge-detail .bd-code { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-1); padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); margin-bottom: var(--sp-2); white-space: pre-wrap; }
.bridge-detail .bd-result { font-size: 0.82rem; color: var(--text-2); min-height: 28px; }
.bridge-detail .bd-result.fail { color: var(--opt-warn); }
.bridge-detail .bd-result.ok { color: var(--ch-ok); }

/* ============================================================
   S7 并发风暴 · 共享之祸
   ============================================================ */
.cmp-concurrency-storm { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.concurrency-canvas-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk);
  transition: all 600ms cubic-bezier(0.22,1,0.36,1);
}
.concurrency-canvas-zone.deadlock { border-color: var(--deadlock-ice); background: rgba(127,29,29,0.10); box-shadow: 0 0 24px rgba(127,29,29,0.2); }
.concurrency-canvas-zone.calm { border-color: var(--csp-channel); background: rgba(16,185,129,0.06); }
.cc-controls { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.cc-controls .btn { padding: 6px 12px; font-size: 0.78rem; min-height: 36px; }
.cc-controls .btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.cc-controls .btn.danger.active { background: rgba(239,68,68,0.12); border-color: var(--opt-warn); color: var(--opt-warn); }
.cc-readout {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--accent); border-radius: var(--r-sm);
  background: var(--accent-soft); font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-2);
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.cc-readout.race { border-color: var(--race-spark); background: rgba(248,113,113,0.10); color: var(--race-spark); }
.cc-readout.deadlock { border-color: var(--deadlock-ice); background: rgba(127,29,29,0.12); color: var(--deadlock-ice); }
.cc-readout.calm { border-color: var(--csp-channel); background: rgba(16,185,129,0.10); color: var(--csp-channel); }
.halt-whisper {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--halt-shadow); border-radius: var(--r-sm);
  background: rgba(71,85,105,0.12); font-size: 0.78rem; color: var(--halt-shadow); font-style: italic;
  animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   S8 函数式之镜 · 不可变之光
   ============================================================ */
.cmp-functional-mirror { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.mirror-surface {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--mirror-flow); border-radius: var(--r-sm);
  background: rgba(139,92,246,0.08); text-align: center; font-style: italic; color: var(--mirror-flow);
  box-shadow: 0 0 24px rgba(139,92,246,0.2);
}
.formula-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);
}
.formula-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.formula-slots { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.formula-slot {
  padding: var(--sp-2); border: 1px dashed var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.8rem; min-height: 44px;
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
.formula-slot .fs-label { color: var(--text-3); font-size: 0.74rem; min-width: 6em; }
.formula-slot .fs-fill { color: var(--accent-ink); }
.formula-slot.correct { border-color: var(--opt-correct); border-style: solid; background: rgba(34,197,94,0.08); }
.formula-slot.wrong { border-color: var(--opt-wrong); border-style: solid; background: rgba(239,68,68,0.08); }
.formula-fragments { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.frag-chip {
  padding: 4px 10px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.74rem; cursor: pointer;
  transition: all 250ms cubic-bezier(0.22,1,0.36,1);
}
.frag-chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.frag-chip.used { opacity: 0.4; cursor: default; }
.frag-chip[data-frag="pure"] { border-color: var(--mirror-flow); color: var(--mirror-flow); }
.frag-chip[data-frag="immutable"] { border-color: var(--share-link); color: var(--share-link); }
.frag-chip[data-frag="noshared"] { border-color: var(--accent); color: var(--accent-ink); }
.frag-chip[data-frag="shared"] { border-color: var(--side-reject); color: var(--side-reject); }
.frag-chip[data-frag="sideeffect"] { border-color: var(--side-reject); color: var(--side-reject); }
.pure-tester {
  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);
}
.pure-tester h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.pure-tester .pt-code { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-1); padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); margin-bottom: var(--sp-2); }
.pure-tester .pt-result { font-size: 0.82rem; min-height: 28px; }
.pure-tester .pt-result.reject { color: var(--side-reject); }
.pure-tester .pt-result.ok { color: var(--ch-ok); }
.immutable-viz {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--share-link); border-radius: var(--r-sm);
  background: rgba(16,185,129,0.06); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.immutable-viz h4 { font-size: 0.85rem; color: var(--share-link); margin-bottom: var(--sp-2); }
.hof-composer {
  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);
}
.hof-composer h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.hof-chain { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.hof-block {
  padding: 6px 12px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.76rem; cursor: pointer;
  transition: all 250ms cubic-bezier(0.22,1,0.36,1);
}
.hof-block:hover { border-color: var(--accent); }
.hof-block.placed { border-color: var(--mirror-flow); background: rgba(139,92,246,0.10); color: var(--mirror-flow); }
.hof-result { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-2); min-height: 28px; }
.prolog-engine {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--par-logic); border-radius: var(--r-sm);
  background: rgba(6,182,212,0.06); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.prolog-engine h4 { font-size: 0.85rem; color: var(--par-logic); margin-bottom: var(--sp-2); }
.prolog-facts, .prolog-rules { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-2); padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); margin-bottom: var(--sp-2); white-space: pre-wrap; }
.prolog-result { font-family: var(--font-mono); font-size: 0.8rem; color: var(--prolog-ok); min-height: 28px; }
.key-forge {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-key-gold); border-radius: var(--r-sm);
  background: var(--ch-key-soft); text-align: center; animation: shatterIn 800ms cubic-bezier(0.22,1,0.36,1);
}
.key-forge .kf-glow { font-family: var(--font-mono); font-size: 1rem; color: var(--ch-key-gold); letter-spacing: 0.2em; }

/* ============================================================
   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(--ch-boss-line);
  border-radius: var(--r-sm); background: var(--ch-boss-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(--ch-boss-ink); 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-tag { font-size: 0.78rem; color: var(--accent-ink); 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(55,65,81,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; }
.lockmark-projection {
  width: 100%; margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--scar-mark); border-radius: var(--r-sm);
  background: var(--ch-indigo-soft); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.lockmark-projection h4 { font-size: 0.85rem; color: var(--ch-indigo-ink); margin-bottom: var(--sp-2); }
.lockmark-projection .lm-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);
}
.lockmark-projection .lm-item.lit {
  border-color: var(--scar-mark); color: var(--ch-indigo-ink);
  background: var(--ch-indigo-soft); box-shadow: 0 0 8px var(--ch-indigo-soft);
}
.lock-deepen-meter { width: 100%; margin-top: var(--sp-2); }
.deepen-label { font-size: 0.75rem; color: var(--text-3); margin-bottom: 4px; }
.deepen-bar { width: 100%; height: 10px; border: 1px solid var(--ch-boss-line); border-radius: 5px; background: var(--bg-sunk); overflow: hidden; }
.deepen-fill { height: 100%; width: 0; background: var(--ch-boss); transition: width 600ms cubic-bezier(0.22,1,0.36,1); }
.lock-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);
}
.halt-echo-final {
  width: 100%; margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--halt-shadow); border-radius: var(--r-sm);
  background: rgba(71,85,105,0.10); font-size: 0.78rem; color: var(--halt-shadow); font-style: italic;
  animation: riftOpen 600ms cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   S10 尾声 · 造字之门
   ============================================================ */
.cmp-finale { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.dsl-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);
}
.dsl-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.dsl-samples { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-2); }
.dsl-sample {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); cursor: pointer; text-align: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); min-height: 70px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.dsl-sample:hover { border-color: var(--accent); transform: translateY(-2px); }
.dsl-sample.lit { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.dsl-sample .ds-name { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; color: var(--text-1); }
.dsl-sample .ds-desc { font-size: 0.68rem; color: var(--text-3); }
.dsl-build {
  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(--accent-ink); min-height: 32px;
}
.lang-river {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk);
}
.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.75rem; font-weight: 600; color: var(--text-1); }
.puzzle-piece .pp-tag { font-size: 0.65rem; color: var(--text-3); }
.chain-silhouette { width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.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; }
.system-map h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.map-node.lit.center { border-color: var(--ch-epiphany); background: var(--ch-epiphany-soft); color: var(--ch-epiphany-ink); box-shadow: 0 0 12px var(--ch-epiphany-soft); }
.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; }
  .bet-zone { grid-template-columns: 1fr; }
  .dual-path-verify { grid-template-columns: 1fr; }
  .option-grid { grid-template-columns: 1fr; }
  .pillar-row { grid-template-columns: 1fr 1fr; }
  .diamond-paths { grid-template-columns: 1fr; }
  .quadrant-grid { grid-template-columns: 1fr; }
  .closure-cells { grid-template-columns: repeat(3, 1fr); }
  .furnace-tabs { flex-direction: column; }
  .tradeoff-row { grid-template-columns: 1fr; }
  .bridge-row { grid-template-columns: 1fr; }
  .dsl-samples { 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; }
  .instr-bench { grid-template-columns: 1fr; }
  .hof-chain { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .realm-achieved { animation: none; }
  .heap-obj.leak { animation: none; }
  .counterexample-panel, .lock-debt-counter, .dual-path-verify, .mem-wall, .stack-viz, .tangle-note,
  .pillar-card, .diamond-zone, .fragile-zone, .type-result, .infer-zone, .generic-zone, .scope-result,
  .closure-zone, .mem-mode-zone, .leak-cell, .furnace-stage, .stw-banner, .gc-result, .tradeoff-triangle,
  .bridge-detail, .cc-readout, .halt-whisper, .mirror-surface, .formula-zone, .pure-tester, .immutable-viz,
  .hof-composer, .prolog-engine, .key-forge, .lockmark-projection, .lock-collapse, .halt-echo-final,
  .dsl-zone, .token-chip, .stack-frame { animation: none; }
  .code-flow:hover, .pillar-card:hover, .quadrant-card:hover, .bridge-card:hover, .dsl-sample:hover { transform: none; }
}