/* ============================================================
   ch18「编译原理：从高级语言到机器码」章节专属样式
   境界：元婴二层·语言通译 · 靛蓝 #6366F1
   Boss：语义之渊 · 渊灰 #475569
   顿悟：突破金 var(--ch-epiphany)（理解发生之处/金光裂纹/顿悟脉冲）
   点缀：源意符靛蓝 #6366F1（ch18专属点缀色）
   背景：暖深蓝灰 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: #475569;          /* 语义之渊 · 渊灰 */
  --ch-boss-ink: #94A3B8;
  --ch-boss-soft: rgba(71, 85, 105, 0.22);
  --ch-boss-line: rgba(71, 85, 105, 0.42);
  --ch-epiphany: var(--ch-epiphany);      /* 顿悟突破金（理解发生之处） */
  --ch-epiphany-soft: rgba(251, 191, 36, 0.16);
  --ch-epiphany-ink: #D97706;
  --ch-indigo: #6366F1;        /* 源意符靛蓝 */
  --ch-indigo-soft: rgba(99, 102, 241, 0.14);
  --ch-indigo-ink: #4F46E5;
  /* 编译六层功能色 */
  --layer-lex: #94A3B8;        /* 词法层灰 */
  --layer-syntax: #10B981;     /* 语法层翠 */
  --layer-sem: #06B6D4;        /* 语义层青 */
  --layer-ir: var(--ch-amber);         /* 中间代码层琥珀 */
  --layer-opt: var(--ch-boss);        /* 优化层红 */
  --layer-codegen: #A78BFA;    /* 代码生成层紫 */
  /* S6 流水线 */
  --ast-node: #A5B4FC;         /* 语法树节点淡靛蓝 */
  --tac-instruction: #6366F1;  /* 三地址码指令靛蓝 */
  --ssa-version: #38BDF8;      /* SSA版本号天蓝 */
  --phi-func: var(--ch-epiphany);         /* phi函数金色菱形 */
  --cfg-edge: #38BDF8;         /* CFG边天蓝 */
  --cfg-block: #6366F1;        /* 基本块靛蓝 */
  /* S7 优化 */
  --opt-safe: #6366F1;         /* 优化安全靛蓝 */
  --opt-danger: var(--ch-boss);       /* 优化危险红 */
  --furnace-glow: var(--ch-amber);     /* 熔炉琥珀光 */
  --furnace-burn: #DC2626;     /* 熔炉暗红 */
  --float-diff: #F87171;       /* 浮点差异红火花 */
  --ub-removed: var(--ch-boss);       /* UB利用删除红 */
  --dead-code: #6B7280;        /* 死代码灰 */
  --source-scar: var(--ch-boss);      /* 源意符蚀痕红 */
  /* S9 Boss */
  --abyss-face: #475569;       /* 渊脸灰 */
  --answer-correct: #6366F1;   /* 正解靛蓝光 */
  --answer-wrong: var(--ch-boss);     /* 错答红 */
  --answer-eliminated: #374151;/* 被刻痕划去的选项灰 */
  --scar-mark: #6366F1;        /* 刻痕投影靛蓝光 */
  --crack-light: #6366F1;      /* 靛光裂纹 */
  --breakthrough: #FBBF24;     /* 突破金光 */
  /* 选项/状态色 */
  --opt-correct: #22C55E;
  --opt-wrong: var(--ch-boss);
  --opt-excluded: #374151;
  --indigo-flow: #6366F1;      /* 源意符光流 */
  --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, #mask-panel {
  position: absolute; right: 0; bottom: calc(100% + var(--sp-1));
  width: 280px; padding: var(--sp-3); z-index: 85;
}
#carve-panel h3, #mask-panel h3 { font-size: 0.9rem; margin-bottom: var(--sp-2); color: var(--ch-epiphany-ink); }
#mask-crack-list p { font-size: 0.8rem; color: var(--ch-indigo); 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(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-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-translation-bet { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.bet-question {
  text-align: center; font-size: 1rem; color: var(--accent-ink);
  padding: var(--sp-2); letter-spacing: 0.08em;
}
.funnel-zone {
  width: 100%; display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.funnel-top {
  text-align: center; padding: var(--sp-2); border: 1px dashed var(--ch-indigo);
  border-radius: var(--r-sm); background: var(--ch-indigo-soft);
  font-family: var(--font-mono); font-size: 0.82rem; color: var(--ch-indigo-ink);
}
.funnel-layer {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); cursor: pointer; min-height: 48px;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); opacity: 0.55;
}
.funnel-layer:hover { border-color: var(--accent); opacity: 1; transform: translateX(4px); }
.funnel-layer.guessed { opacity: 1; }
.funnel-layer[data-layer="lex"] { border-left: 4px solid var(--layer-lex); }
.funnel-layer[data-layer="syntax"] { border-left: 4px solid var(--layer-syntax); }
.funnel-layer[data-layer="sem"] { border-left: 4px solid var(--layer-sem); }
.funnel-layer[data-layer="ir"] { border-left: 4px solid var(--layer-ir); }
.funnel-layer[data-layer="opt"] { border-left: 4px solid var(--layer-opt); }
.funnel-layer[data-layer="codegen"] { border-left: 4px solid var(--layer-codegen); }
.funnel-layer.wrong { border-color: var(--opt-wrong); background: rgba(239,68,68,0.10); opacity: 1; }
.fl-name { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600; color: var(--text-1); }
.fl-tag { font-size: 0.72rem; color: var(--text-3); }
.loss-popup {
  width: 100%; margin-top: var(--sp-1); padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--opt-wrong); border-radius: var(--r-xs);
  background: rgba(239,68,68,0.08); font-size: 0.76rem; color: var(--opt-wrong);
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.funnel-bottom {
  text-align: center; padding: var(--sp-2); 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.78rem; color: var(--ch-boss-ink); font-style: italic;
}
.abyss-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);
}
.abyss-account .acct-line { margin: var(--sp-1) 0; }
.abyss-account .acct-line b { color: var(--ch-boss-ink); font-style: normal; }
.intent-flow {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--ch-indigo);
  border-radius: var(--r-sm); background: var(--ch-indigo-soft);
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--ch-indigo-ink);
  animation: riftOpen 600ms cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   S1 断词刃 · Token切分实验台
   ============================================================ */
.cmp-lexer-blade { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.predict-panel { width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.predict-question { text-align: center; font-size: 1rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.predict-opts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.predict-opt {
  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.88rem; 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;
}
.predict-opt:hover { border-color: var(--accent); transform: translateY(-1px); }
.predict-opt.selected { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--glow); }
.predict-opt.correct { border-color: var(--ch-ok); background: rgba(34,197,94,0.12); color: var(--ch-ok); }
.predict-opt.wrong { border-color: var(--ch-warn); background: rgba(239,68,68,0.10); color: var(--ch-warn); }
.predict-feedback {
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  font-size: 0.85rem; animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.predict-feedback.right { border-color: var(--ch-ok); background: rgba(34,197,94,0.10); color: var(--ch-ok); }
.predict-feedback.wrong { border-color: var(--ch-warn); background: rgba(239,68,68,0.10); color: var(--ch-warn); }
.blade-bench { 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); }
.char-stream {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 0.95rem; color: var(--text-1);
  text-align: center; letter-spacing: 0.05em; margin-bottom: var(--sp-2); min-height: 44px;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px;
}
.char-cell { display: inline-block; padding: 1px 2px; transition: all 200ms cubic-bezier(0.22,1,0.36,1); }
.char-cell.consumed { color: var(--text-3); opacity: 0.5; }
.char-cell.comment { color: var(--layer-lex); text-decoration: line-through; }
.blade-controls { display: flex; gap: var(--sp-2); justify-content: center; margin-bottom: var(--sp-2); }
.token-flow { width: 100%; display: flex; flex-direction: column; gap: var(--sp-1); min-height: 32px; }
.token-chip {
  padding: 4px 10px; border: 1px solid var(--accent); border-radius: var(--r-xs);
  background: var(--accent-soft); font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent-ink);
  display: inline-block; animation: riftOpen 300ms cubic-bezier(0.22,1,0.36,1);
}
.token-chip .tok-type { font-size: 0.68rem; color: var(--text-3); margin-left: 4px; }
.loss-list {
  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.82rem; color: var(--opt-warn);
  animation: riftOpen 400ms 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 语法树构建 · dangling-else 双树对比
   ============================================================ */
.cmp-syntax-tree { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.grammar-panel { width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.grammar-input { font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); text-align: center; }
.tree-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); }
.syntax-canvas, .scope-canvas, .cfg-canvas, .pipeline-canvas, .depth-curve {
  width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev);
}
.recursion-panel { 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); }
.recursion-result { margin-top: var(--sp-2); font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-2); min-height: 28px; }
.recursion-result.warn { color: var(--ch-warn); }
.dangling-panel { width: 100%; padding: var(--sp-3); border: 1px solid var(--opt-warn); border-radius: var(--r-sm); background: rgba(239,68,68,0.06); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1); }
.dangling-panel h4 { font-size: 0.9rem; color: var(--opt-warn); margin-bottom: var(--sp-2); text-align: center; }
.dual-trees { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-top: var(--sp-2); }
.tree-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.78rem;
  display: flex; flex-direction: column; gap: 4px;
}
.tree-card .tc-label { font-weight: 600; color: var(--layer-syntax); font-size: 0.82rem; }
.tree-card .tc-struct { color: var(--text-2); white-space: pre-wrap; }
.tree-card.wrong { border-color: var(--opt-warn); background: rgba(239,68,68,0.06); }
.tree-card.chosen { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }

/* ============================================================
   S3 类型天平 · 符号表作用域
   ============================================================ */
.cmp-semantic-audit { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.type-scale { width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.scale-question { text-align: center; font-size: 0.95rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.expr-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-2); }
.expr-card {
  padding: var(--sp-2); 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.8rem; 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;
}
.expr-card:hover { border-color: var(--layer-sem); transform: translateY(-2px); }
.expr-card.audited { border-color: var(--layer-sem); background: rgba(6,182,212,0.10); }
.scale-result {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--layer-sem); border-radius: var(--r-sm);
  background: rgba(6,182,212,0.10); font-family: var(--font-mono); font-size: 0.85rem; color: var(--layer-sem);
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.scale-result.warn { border-color: var(--opt-warn); background: rgba(239,68,68,0.10); color: var(--opt-warn); }
.scope-table { 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); }
.scope-table h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.scope-result { margin-top: var(--sp-2); font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-2); min-height: 28px; }
.scope-result.shadowed { color: var(--opt-warn); }

/* ============================================================
   S4 三地址码生成 · SSA变换
   ============================================================ */
.cmp-ir-bridge { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.ast-source { width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); }
.ast-display { font-family: var(--font-mono); font-size: 0.9rem; color: var(--ast-node); text-align: center; margin-bottom: var(--sp-2); padding: var(--sp-2); border: 1px dashed var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.tac-output { width: 100%; padding: var(--sp-3); border: 1px solid var(--tac-instruction); border-radius: var(--r-sm); background: rgba(99,102,241,0.06); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1); }
.tac-output h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.tac-line {
  padding: var(--sp-1) var(--sp-2); margin-bottom: 2px; border-left: 2px solid var(--tac-instruction);
  font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-1);
  background: var(--bg-elev); animation: riftOpen 300ms cubic-bezier(0.22,1,0.36,1);
}
.tac-line .lbl { color: var(--layer-ir); }
.ssa-zone { width: 100%; padding: var(--sp-3); border: 1px solid var(--ssa-version); border-radius: var(--r-sm); background: rgba(56,189,248,0.06); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1); }
.ssa-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.ssa-result { margin-top: var(--sp-2); font-family: var(--font-mono); font-size: 0.82rem; min-height: 28px; }
.ssa-result.error { color: var(--opt-wrong); }
.ssa-result.ok { color: var(--ch-ok); }
.ssa-result .phi-node { color: var(--phi-func); font-weight: 600; }
.cfg-zone { width: 100%; padding: var(--sp-3); border: 1px solid var(--cfg-block); border-radius: var(--r-sm); background: rgba(99,102,241,0.06); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1); }
.cfg-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }

/* ============================================================
   S5 优化熔炉入门 · 常量折叠与死代码消除
   ============================================================ */
.cmp-opt-intro { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.furnace-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.furnace-snippet {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); cursor: pointer; font-family: var(--font-mono); font-size: 0.78rem; 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;
}
.furnace-snippet:hover { border-color: var(--furnace-glow); transform: translateY(-2px); }
.furnace-snippet.burned { border-color: var(--furnace-glow); background: rgba(245,158,11,0.10); }
.furnace-snippet .fs-name { font-weight: 600; color: var(--text-1); font-size: 0.82rem; }
.furnace-snippet .fs-code { color: var(--text-3); font-size: 0.72rem; }
.furnace-compare { width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1); }
.compare-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.compare-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.78rem;
}
.compare-cell.before { border-color: var(--ch-indigo); color: var(--ch-indigo-ink); }
.compare-cell.after { border-color: var(--furnace-glow); color: var(--furnace-glow); }
.compare-cell .cc-label { font-size: 0.7rem; color: var(--text-3); margin-bottom: 4px; }
.compare-cell.deleted { color: var(--dead-code); text-decoration: line-through; }
.harmless-note {
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--furnace-glow); border-radius: var(--r-sm);
  background: rgba(245,158,11,0.10); font-size: 0.82rem; color: var(--furnace-glow);
  animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   S6 编译流水线动画器
   ============================================================ */
.cmp-compile-pipeline { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.pipeline-stages { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-1); }
.pipeline-stage {
  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;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  opacity: 0.5;
}
.pipeline-stage:hover { border-color: var(--accent); opacity: 1; }
.pipeline-stage.lit { opacity: 1; border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.pipeline-stage[data-stage="lex"] { border-left: 4px solid var(--layer-lex); }
.pipeline-stage[data-stage="syntax"] { border-left: 4px solid var(--layer-syntax); }
.pipeline-stage[data-stage="sem"] { border-left: 4px solid var(--layer-sem); }
.pipeline-stage[data-stage="ir"] { border-left: 4px solid var(--layer-ir); }
.pipeline-stage[data-stage="opt"] { border-left: 4px solid var(--layer-opt); }
.pipeline-stage[data-stage="codegen"] { border-left: 4px solid var(--layer-codegen); }
.pipeline-stage .ps-name { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: var(--text-1); }
.pipeline-stage .ps-arrow { font-size: 0.6rem; color: var(--text-3); }
.pipeline-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); }
.pipeline-detail h4 { font-size: 0.9rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.pd-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.pd-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.75rem;
}
.pd-cell .pd-label { font-size: 0.68rem; color: var(--text-3); margin-bottom: 4px; }
.pd-cell .pd-value { color: var(--text-1); word-break: break-all; }
.pipeline-flow { width: 100%; padding: var(--sp-2); 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); }

/* ============================================================
   S7 优化三旋钮实验台
   ============================================================ */
.cmp-opt-threeknob { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.target-toggle { display: flex; gap: var(--sp-1); }
.target-toggle .btn { padding: 4px 10px; font-size: 0.78rem; min-height: 32px; }
.target-toggle .btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.target-toggle .btn.danger.active { background: rgba(239,68,68,0.12); border-color: var(--opt-danger); color: var(--opt-danger); }
.furnace-zone { 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); }
.furnace-zone.burning { border-color: var(--furnace-burn); background: rgba(220,38,38,0.06); box-shadow: 0 0 24px rgba(220,38,38,0.2); }
.snippet-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-2); }
.opt-snippet {
  padding: var(--sp-2); 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.72rem; 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;
}
.opt-snippet:hover { border-color: var(--furnace-glow); transform: translateY(-2px); }
.opt-snippet.thrown { border-color: var(--furnace-glow); background: rgba(245,158,11,0.10); }
.opt-snippet .os-name { font-weight: 600; color: var(--text-1); font-size: 0.75rem; }
.opt-snippet .os-code { color: var(--text-3); font-size: 0.68rem; }
.behavior-diff { 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); }
.behavior-diff h4 { font-size: 0.85rem; color: var(--opt-warn); margin-bottom: var(--sp-2); }
.diff-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.diff-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.78rem;
  display: flex; flex-direction: column; gap: 4px;
}
.diff-cell .dc-label { font-size: 0.68rem; color: var(--text-3); }
.diff-cell .dc-value { color: var(--text-1); }
.diff-cell.changed .dc-value { color: var(--float-diff); }
.diff-cell.ub-removed .dc-value { color: var(--ub-removed); text-decoration: line-through; }
.collapse-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--furnace-burn); border-radius: var(--r-sm);
  background: rgba(220,38,38,0.10); text-align: center; font-style: italic; color: var(--furnace-burn);
  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); }
}

/* ============================================================
   S8 链接殿 · 代码生成/链接/运行时
   ============================================================ */
.cmp-linking-hall { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.gate-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.gate-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;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  opacity: 0.6;
}
.gate-card:hover { border-color: var(--accent); opacity: 1; transform: translateY(-2px); }
.gate-card.opened { opacity: 1; border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.gate-card[data-gate="codegen"] { border-left: 4px solid var(--layer-codegen); }
.gate-card[data-gate="link"] { border-left: 4px solid var(--layer-ir); }
.gate-card[data-gate="runtime"] { border-left: 4px solid var(--layer-sem); }
.gate-card .gc-name { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600; color: var(--text-1); }
.gate-card .gc-desc { font-size: 0.7rem; color: var(--text-3); }
.gate-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); }
.gate-detail h4 { font-size: 0.9rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.gate-detail .gd-section { margin-bottom: var(--sp-2); }
.gate-detail .gd-label { font-size: 0.75rem; color: var(--text-3); margin-bottom: 4px; }
.gate-detail .gd-body { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-2); padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.gate-detail .gd-warn { color: var(--opt-warn); }

/* ============================================================
   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); }
.abyss-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);
}
.abyss-ledger .ledger-line { margin: var(--sp-1) 0; font-style: italic; }
.abyss-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-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; }
.crack-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);
}
.crack-projection h4 { font-size: 0.85rem; color: var(--ch-indigo-ink); margin-bottom: var(--sp-2); }
.crack-projection .crack-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);
}
.crack-projection .crack-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);
}
.abyss-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(--abyss-face); transition: width 600ms cubic-bezier(0.22,1,0.36,1); }
.abyss-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-finale { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.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; }
.depth-readout.warn { color: var(--ch-warn); }
.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; }

/* ============================================================
   响应式 · 移动端适配
   ============================================================ */
/* ---------- S-regex 文法阁 · 正则炼机 ---------- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.cmp-regex-forge { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.regex-input-zone { padding: var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.nfa-zone, .dfa-zone, .lex-zone, .wall-zone {
  padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); animation: fadeIn 0.4s ease;
}
.nfa-zone h4, .dfa-zone h4, .lex-zone h4, .wall-zone h4 { color: var(--accent-ink); margin-bottom: var(--sp-2); font-size: var(--fs-small); }
.lex-rule-row {
  font-size: 12px; padding: 4px 8px; border-bottom: 1px solid var(--glass-line);
  display: flex; align-items: center; gap: 6px;
}
.lex-rule-row:last-child { border-bottom: none; }
.lex-pattern { color: var(--accent-ink); font-family: monospace; }
.lex-action { color: var(--text-2); font-family: monospace; }
.lex-code, .yacc-code { white-space: pre; line-height: 1.5; }
.closure-trace { margin-top: var(--sp-2); padding: var(--sp-2); border-top: 1px solid var(--glass-line); }
.wall-result { animation: fadeIn 0.4s ease; }
#srx-regex-input {
  width: 100%; padding: 6px 10px; border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-sunk); color: var(--text-1); font-family: monospace; font-size: 12px; margin: var(--sp-2) 0;
}

/* ---------- S-parser 分析器工坊 ---------- */
.cmp-parser-workshop { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.bench-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.bench-left, .bench-right {
  padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.bench-left { border-left: 3px solid var(--accent); }
.bench-right { border-left: 3px solid #A78BFA; }
.bench-left h4, .bench-right h4 { color: var(--accent-ink); margin-bottom: var(--sp-2); font-size: var(--fs-small); }
.grammar-display {
  font-family: monospace; font-size: 11px; color: var(--text-2); padding: var(--sp-2);
  background: rgba(99,102,241,0.06); border-radius: var(--r-xs); margin-bottom: var(--sp-2); line-height: 1.6;
}
.first-follow { animation: fadeIn 0.4s ease; }
.predict-table { overflow-x: auto; animation: fadeIn 0.4s ease; }
.predict-table table { border-collapse: collapse; }
.predict-table th, .predict-table td {
  border: 1px solid var(--glass-line); padding: 4px 6px; text-align: center; min-width: 50px;
}
.predict-table th { background: rgba(99,102,241,0.08); }
.ll-conflict { animation: fadeIn 0.4s ease; margin-top: var(--sp-2); }
.lr-states { animation: fadeIn 0.4s ease; }
.lr-conflict { animation: fadeIn 0.4s ease; margin-top: var(--sp-2); }
.yacc-zone {
  padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); animation: fadeIn 0.4s ease;
}
.yacc-zone h4 { color: var(--accent-ink); margin-bottom: var(--sp-2); font-size: var(--fs-small); }
.yacc-output { animation: fadeIn 0.4s ease; }

@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; }
  .predict-opts { grid-template-columns: 1fr; }
  .expr-cards { grid-template-columns: 1fr; }
  .dual-trees { grid-template-columns: 1fr; }
  .furnace-row { grid-template-columns: 1fr; }
  .compare-row { grid-template-columns: 1fr; }
  .pipeline-stages { grid-template-columns: repeat(2, 1fr); }
  .pd-row { grid-template-columns: 1fr; }
  .snippet-row { grid-template-columns: repeat(2, 1fr); }
  .diff-row { grid-template-columns: 1fr; }
  .gate-row { 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; }
  .bench-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .realm-achieved { animation: none; }
  .predict-feedback, .exclude-mark, .loss-list, .blade-bench, .tree-zone, .recursion-panel, .dangling-panel,
  .scale-result, .scope-table, .tac-output, .ssa-zone, .cfg-zone, .furnace-compare, .harmless-note,
  .pipeline-detail, .pipeline-flow, .behavior-diff, .collapse-zone, .gate-detail, .abyss-collapse,
  .crack-projection, .abyss-ledger, .intent-flow, .abyss-account, .token-chip, .tac-line,
  .nfa-zone, .dfa-zone, .lex-zone, .wall-zone, .first-follow, .predict-table, .ll-conflict,
  .lr-states, .lr-conflict, .yacc-zone, .yacc-output, .wall-result, .closure-trace { animation: none; }
  .funnel-layer:hover { transform: none; }
}