/* ============================================================
   ch26「AI经济与社会变革：硅基文明的黎明」章节专属样式
   境界：化神五层·文明新章 · 文明橙 #C2410C
   Boss：变革之潮 · 暗橙 #9A3412
   导师：高斯老祖（avatar_king.jpg）
   顿悟：突破金 var(--ch-epiphany)（理解发生之处/金光裂纹/顿悟脉冲）
   崩塌冲突：赤红 var(--ch-boss)
   第一刻痕（技术决定一切）：赤红 var(--ch-boss)
   第二刻痕（单一能源方案可行）：暗橙 #9A3412
   背景：暖深蓝灰 var(--ch-bg-warm)（禁止纯黑）
   全部色值走 tokens 变量；玻璃态卡片；发光仅限边框/背景。
   本章为 AI 部分最终章，S10 含飞升/毕业动画。
   ============================================================ */

/* ---------- 章节境界色覆写：文明橙 ---------- */
:root, :root[data-theme="light"] {
  --accent: #C2410C;
  --accent-ink: #9A3412;
  --accent-soft: rgba(194, 65, 12, 0.12);
  --glass-line: rgba(194, 65, 12, 0.22);
  --glow: 0 0 18px rgba(194, 65, 12, 0.28);
  --on-accent: #FFFFFF;
  --r-xs: 4px;
}
:root[data-theme="dark"] {
  --accent: #EA580C;
  --accent-ink: #C2410C;
  --accent-soft: rgba(234, 88, 12, 0.16);
  --glass-line: rgba(234, 88, 12, 0.22);
  --glow: 0 0 22px rgba(194, 65, 12, 0.34);
  --on-accent: #0A0A1A;
  --r-xs: 4px;
}

/* ---------- 章节专用叙事色 ---------- */
:root {
  --ch-boss: #9A3412;          /* 变革之潮 · 暗橙 */
  --ch-boss-ink: #C2410C;      /* 潮红 */
  --ch-boss-soft: rgba(154, 52, 18, 0.22);
  --ch-boss-line: rgba(154, 52, 18, 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-orange: #C2410C;        /* 文明橙 · 境界色 */
  --ch-orange-soft: rgba(194, 65, 12, 0.14);
  --ch-orange-ink: #9A3412;
  /* 三条贯穿机制色 */
  --debt-red: var(--ch-boss);         /* 潮账赤红光页 */
  --debt-soft: rgba(239, 68, 68, 0.12);
  --carve-mark: #DC2626;       /* 排除刻痕暗红微光 */
  --carve-soft: rgba(220, 38, 38, 0.14);
  --balance-g: #10B981;        /* 文明天平 技术翠绿 */
  --balance-d: var(--ch-epiphany);        /* 文明天平 社会金 */
  /* 生产力/就业色 */
  --prod-auto: #60A5FA;        /* 自动化蓝 */
  --prod-aug: #10B981;         /* 增强绿 */
  --prod-creat: #A78BFA;       /* 创造紫 */
  --prod-index: var(--ch-epiphany);       /* 生产力指数金 */
  --prod-soc: #6B7280;         /* 社会适应灰 */
  /* 就业三重效应 */
  --job-replace: var(--ch-boss);      /* 替代红 */
  --job-complement: #10B981;   /* 互补绿 */
  --job-create: var(--ch-amber);       /* 创造金 */
  /* 数据经济色 */
  --data-flow: #3B82F6;        /* 数据流蓝 */
  --data-mono: var(--ch-boss);        /* 垄断红 */
  --data-small: #6B7280;       /* 中小企业灰 */
  /* 产业三层色 */
  --ind-model: #8B5CF6;        /* 模型层紫 */
  --ind-app: #10B981;          /* 应用层绿 */
  --ind-infra: var(--ch-amber);        /* 基础设施金 */
  /* 治理色 */
  --gov-reg: #3B82F6;          /* 监管蓝 */
  --gov-self: #10B981;         /* 自律绿 */
  --gov-std: var(--ch-amber);          /* 标准金 */
  /* 能源色 */
  --energy-carbon: #6B7280;    /* 碳排灰 */
  --energy-power: var(--ch-amber);     /* 电力金 */
  --energy-water: #06B6D4;     /* 用水青 */
  /* 硅基文明三体系色 */
  --semi-green: #10B981;       /* 半导体翠绿 */
  --cs-blue: #3B82F6;          /* 计算机蓝 */
  --ai-gold: var(--ch-amber);          /* AI金 */
  /* S9 Boss */
  --boss-face: #9A3412;        /* 变革之潮脸暗橙 */
  --answer-correct: #C2410C;   /* 正解橙光 */
  --answer-wrong: var(--ch-boss);     /* 错答红 */
  --answer-eliminated: #475569;/* 被刻痕划去选项灰 */
  --net-gold: var(--ch-epiphany);         /* 收网金光 */
  --breakthrough: #FBBF24;     /* 突破金光 */
  --huashen-gold: #FCD34D;     /* 化神金 */
  --graduation: #F59E0B;       /* 毕业金 */
  /* 选项/状态色 */
  --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, #2A0E06 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-orange-soft);
}
.inv-crack {
  display: inline-block; margin-left: var(--sp-1);
  font-size: 0.65rem; color: var(--balance-g);
  background: rgba(16,185,129,0.14); padding: 0 4px; border-radius: 3px;
}
#carve-panel, #balance-panel {
  position: absolute; right: 0; bottom: calc(100% + var(--sp-1));
  width: 280px; padding: var(--sp-3); z-index: 85;
}
#carve-panel h3, #balance-panel h3 { font-size: 0.9rem; margin-bottom: var(--sp-2); color: var(--ch-orange-ink); }
#carve-list p { font-size: 0.8rem; color: var(--carve-mark); margin: var(--sp-1) 0; }
#balance-list p { font-size: 0.8rem; color: var(--ch-boss-ink); 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; }
/* 通用 toggle 按钮组 */
.toggle-row { display: flex; gap: var(--sp-1); flex-wrap: wrap; justify-content: center; margin: var(--sp-1) 0; }
.toggle-btn {
  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; color: var(--text-2);
  cursor: pointer; transition: all 200ms cubic-bezier(0.22,1,0.36,1);
}
.toggle-btn:hover { border-color: var(--accent); color: var(--text-1); }
.toggle-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--glow); }

/* ============================================================
   S0 序章 · 文明之巅 · AI对社会最大影响预测挑战器
   ============================================================ */
.cmp-civ-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;
}
.challenge-silhouettes {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2);
  padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.chal-card {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); cursor: pointer; text-align: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); min-height: 90px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  opacity: 0.6;
}
.chal-card:hover { border-color: var(--accent); opacity: 1; transform: translateY(-2px); }
.chal-card.guessed { opacity: 1; border-color: var(--debt-red); background: var(--debt-soft); }
.chal-card .cc-name { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--text-1); }
.chal-card .cc-icon { font-size: 1.2rem; }
.chal-card[data-chal="job"] { border-left: 3px solid var(--job-replace); }
.chal-card[data-chal="prod"] { border-left: 3px solid var(--prod-index); }
.chal-card[data-chal="sci"] { border-left: 3px solid var(--ind-app); }
.chal-card[data-chal="power"] { border-left: 3px solid var(--ch-orange); }
.conflict-popup {
  grid-column: 1 / -1; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--debt-red);
  border-radius: var(--r-sm); background: var(--debt-soft);
  font-size: 0.8rem; color: var(--text-2); animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.conflict-popup .cp-title { font-weight: 600; color: var(--debt-red); margin-bottom: 4px; }
.debt-account {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--ch-boss-line);
  border-radius: var(--r-sm); background: var(--ch-boss-soft);
  font-size: 0.82rem; color: var(--text-2); font-style: italic;
  animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.debt-account .acct-line { margin: var(--sp-1) 0; }
.debt-account .acct-line b { color: var(--ch-boss-ink); font-style: normal; }
.civ-map {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-orange);
  border-radius: var(--r-sm); background: var(--ch-orange-soft);
  animation: riftOpen 600ms cubic-bezier(0.22,1,0.36,1);
}
.civ-map h4 { font-size: 0.85rem; color: var(--ch-orange-ink); margin-bottom: var(--sp-2); text-align: center; }
.map-nodes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-1); }
.map-node {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.7rem; text-align: center; color: var(--text-3);
  transition: all 400ms cubic-bezier(0.22,1,0.36,1); opacity: 0.4;
}
.map-node.lit { opacity: 1; border-color: var(--ch-orange); color: var(--ch-orange-ink); background: var(--ch-orange-soft); }

/* ============================================================
   S1 生产力熔炉 · 三引擎 — 生产力影响模型器
   ============================================================ */
.cmp-prod-model { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.engine-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.engine-card {
  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: 120px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  opacity: 0.6;
}
.engine-card:hover { border-color: var(--accent); opacity: 1; transform: translateY(-2px); }
.engine-card.active { opacity: 1; border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.engine-card[data-eng="auto"].active { border-color: var(--prod-auto); background: rgba(96,165,250,0.12); box-shadow: 0 0 18px rgba(96,165,250,0.28); }
.engine-card[data-eng="aug"].active { border-color: var(--prod-aug); background: rgba(16,185,129,0.12); box-shadow: 0 0 18px rgba(16,185,129,0.28); }
.engine-card[data-eng="creat"].active { border-color: var(--prod-creat); background: rgba(167,139,250,0.12); box-shadow: 0 0 18px rgba(167,139,250,0.28); }
.engine-card .ec-name { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600; color: var(--text-1); }
.engine-card .ec-icon { font-size: 1.4rem; }
.engine-card .ec-desc { font-size: 0.68rem; color: var(--text-3); }
.prod-curve-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.prod-curve-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-1); }
.prod-curve-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.exclude-mark {
  width: 100%; margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--ch-epiphany); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft); font-size: 0.82rem; color: var(--ch-epiphany-ink);
  font-style: italic; animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   S2 就业影响分析器
   ============================================================ */
.cmp-job-analyzer { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.job-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.job-card {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); cursor: pointer; text-align: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); min-height: 64px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  opacity: 0.7;
}
.job-card:hover { border-color: var(--accent); opacity: 1; transform: translateY(-2px); }
.job-card.assessed { opacity: 1; border-color: var(--accent); background: var(--accent-soft); }
.job-card .jc-name { font-family: var(--font-mono); font-size: 0.76rem; font-weight: 600; color: var(--text-1); }
.job-card .jc-icon { font-size: 1.1rem; }
.job-effect-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.job-effect-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.job-effect-bars { display: flex; flex-direction: column; gap: var(--sp-2); }
.effect-bar { display: flex; align-items: center; gap: var(--sp-2); }
.effect-bar .eb-label { font-size: 0.76rem; color: var(--text-2); min-width: 50px; text-align: right; }
.effect-bar .eb-track { flex: 1; height: 14px; border: 1px solid var(--glass-line); border-radius: 7px; background: var(--bg-elev); overflow: hidden; }
.effect-bar .eb-fill { height: 100%; transition: width 600ms cubic-bezier(0.22,1,0.36,1); }
.effect-bar .eb-val { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-1); min-width: 36px; }
.effect-bar[data-eff="replace"] .eb-fill { background: var(--job-replace); }
.effect-bar[data-eff="complement"] .eb-fill { background: var(--job-complement); }
.effect-bar[data-eff="create"] .eb-fill { background: var(--job-create); }
.job-history-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.job-history-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-1); }
.job-history-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }

/* ============================================================
   S3 数据深渊 · 数据经济学分析器（第一崩塌）
   ============================================================ */
.cmp-tide-rift { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.tide-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-warn); border-radius: var(--r-sm);
  background: rgba(239,68,68,0.06);
}
.tide-zone h4 { font-size: 0.82rem; color: var(--ch-warn); margin-bottom: var(--sp-1); }
.tide-zone input[type="range"] { max-width: 320px; }
.tide-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); margin-top: var(--sp-1); }
.tide-diagnosis {
  margin-top: var(--sp-1); padding: var(--sp-2); border: 1px solid var(--ch-conflict); border-radius: var(--r-xs);
  background: var(--debt-soft); font-size: 0.78rem; color: var(--ch-warn);
  animation: shatterIn 500ms cubic-bezier(0.22,1,0.36,1);
}
.gap-zone, .rootcause-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-boss-line); border-radius: var(--r-sm);
  background: var(--ch-boss-soft); animation: shatterIn 600ms cubic-bezier(0.22,1,0.36,1);
}
.gap-zone h4, .rootcause-zone h4 { font-size: 0.82rem; color: var(--ch-boss-ink); margin-bottom: var(--sp-2); }
.gap-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.tide-crack-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--ch-boss); border-radius: var(--r-sm);
  background: var(--bg-sunk); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.tide-crack-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.rootcause-formula {
  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.76rem; color: var(--text-2);
  line-height: 1.6;
}
.rootcause-formula .rf-highlight { color: var(--debt-red); font-weight: 600; }
@keyframes shatterIn {
  0% { opacity: 0; transform: scale(0.8) rotate(-2deg); }
  50% { opacity: 1; transform: scale(1.05) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ============================================================
   S4 数据经济学分析器
   ============================================================ */
.cmp-data-econ { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.data-input-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.data-input-zone h4 { font-size: 0.82rem; color: var(--data-flow); margin-bottom: var(--sp-1); }
.data-input-zone input[type="range"] { max-width: 320px; }
.data-input-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); margin-top: var(--sp-1); }
.data-effect-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.data-effect-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-1); }
.data-effect-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.data-network-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.data-network-zone h4 { font-size: 0.82rem; color: var(--ind-model); margin-bottom: var(--sp-1); }
.data-network-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }

/* ============================================================
   S4 竞争格局殿 · AI 产业格局分析器
   ============================================================ */
.cmp-industry { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.industry-toggle { display: flex; gap: var(--sp-1); justify-content: center; flex-wrap: wrap; }
.ind-btn[data-ind="model"].active { border-color: var(--ind-model); color: var(--ind-model); }
.ind-btn[data-ind="app"].active { border-color: var(--ind-app); color: var(--ind-app); }
.ind-btn[data-ind="infra"].active { border-color: var(--ind-infra); color: var(--ind-infra); }
.industry-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.industry-zone {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.industry-zone h4 { font-size: 0.78rem; color: var(--accent-ink); margin-bottom: var(--sp-1); text-align: center; }
.industry-zone canvas { width: 100%; max-width: 240px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); margin: 0 auto; }
.industry-detail {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); font-size: 0.8rem; color: var(--text-2); min-height: 40px;
}

/* ============================================================
   S6 AI治理对比器
   ============================================================ */
.cmp-gov-cmp { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.gov-toggle { display: flex; gap: var(--sp-1); justify-content: center; flex-wrap: wrap; }
.gov-btn[data-gov="us"].active { border-color: var(--gov-reg); color: var(--gov-reg); }
.gov-btn[data-gov="eu"].active { border-color: var(--gov-std); color: var(--gov-std); }
.gov-btn[data-gov="cn"].active { border-color: var(--ch-conflict); color: var(--ch-conflict); }
.gov-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.gov-zone {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.gov-zone h4 { font-size: 0.78rem; color: var(--accent-ink); margin-bottom: var(--sp-1); text-align: center; }
.gov-zone canvas { width: 100%; max-width: 240px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); margin: 0 auto; }
.gov-detail {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); font-size: 0.8rem; color: var(--text-2); min-height: 40px;
}

/* ============================================================
   S7 第二崩塌 · 能源之壁
   ============================================================ */
.cmp-energy-wall { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.energy-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-warn); border-radius: var(--r-sm);
  background: rgba(239,68,68,0.06);
}
.energy-zone h4 { font-size: 0.82rem; color: var(--energy-power); margin-bottom: var(--sp-1); }
.energy-zone input[type="range"] { max-width: 320px; }
.energy-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); margin-top: var(--sp-1); }
.energy-breakdown-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-boss-line); border-radius: var(--r-sm);
  background: var(--ch-boss-soft); animation: shatterIn 600ms cubic-bezier(0.22,1,0.36,1);
}
.energy-breakdown-zone h4 { font-size: 0.82rem; color: var(--ch-boss-ink); margin-bottom: var(--sp-2); }
.energy-breakdown-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.jevons-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--ch-conflict); border-radius: var(--r-sm);
  background: rgba(239,68,68,0.06); animation: shatterIn 600ms cubic-bezier(0.22,1,0.36,1);
}
.jevons-zone h4 { font-size: 0.82rem; color: var(--ch-conflict); margin-bottom: var(--sp-2); }
.jevons-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }

/* ============================================================
   S8 硅基文明路线图
   ============================================================ */
.cmp-civ-roadmap { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.civ-systems-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.civ-systems-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-2); text-align: center; }
.systems-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.system-card {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); text-align: center; transition: all 300ms cubic-bezier(0.22,1,0.36,1);
  cursor: pointer; min-height: 80px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  opacity: 0.6;
}
.system-card:hover { border-color: var(--accent); opacity: 1; transform: translateY(-2px); }
.system-card.lit { opacity: 1; }
.system-card[data-sys="semi"].lit { border-color: var(--semi-green); background: rgba(16,185,129,0.12); box-shadow: 0 0 12px rgba(16,185,129,0.28); }
.system-card[data-sys="cs"].lit { border-color: var(--cs-blue); background: rgba(59,130,246,0.12); box-shadow: 0 0 12px rgba(59,130,246,0.28); }
.system-card[data-sys="ai"].lit { border-color: var(--ai-gold); background: rgba(245,158,11,0.12); box-shadow: 0 0 12px rgba(245,158,11,0.28); }
.system-card .sc-name { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--text-1); }
.system-card .sc-tag { font-size: 0.66rem; color: var(--text-3); }
.roadmap-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.roadmap-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-1); }
.roadmap-zone canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }
.knowledge-panorama {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.knowledge-panorama h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-1); }
.knowledge-panorama canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--glass-line); border-radius: var(--r-xs); background: var(--bg-elev); }

/* ============================================================
   S9 Boss 战 · 变革之潮
   ============================================================ */
#s9-arena { border-color: var(--ch-boss-line); box-shadow: var(--shadow), 0 0 32px var(--ch-boss-soft); }
.boss-figure { width: 100%; display: flex; justify-content: center; margin-bottom: var(--sp-2); }
#s9-boss-canvas { width: 100%; max-width: 480px; height: auto; border: 1px solid var(--ch-boss-line); border-radius: var(--r-sm); background: var(--bg-elev); }
.q-progress-bar { width: 100%; height: 6px; border: 1px solid var(--glass-line); border-radius: 3px; background: var(--bg-sunk); margin-bottom: var(--sp-2); overflow: hidden; }
.q-progress-fill { height: 100%; width: 0; background: var(--accent); transition: width 600ms cubic-bezier(0.22,1,0.36,1); }
.debt-ledger {
  width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--debt-red);
  border-radius: var(--r-sm); background: var(--debt-soft);
  font-size: 0.8rem; color: var(--text-2); margin-bottom: var(--sp-2);
}
.debt-ledger .ledger-line { margin: var(--sp-1) 0; font-style: italic; }
.debt-ledger .ledger-line b { color: var(--debt-red); font-style: normal; }
.q-panel { width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-sunk); margin-bottom: var(--sp-2); }
.q-text { font-size: 0.95rem; color: var(--text-1); margin-bottom: var(--sp-2); }
.q-account { font-size: 0.78rem; color: var(--ch-boss-ink); font-style: italic; padding: var(--sp-1) var(--sp-2); border-left: 2px solid var(--ch-boss-line); }
.option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.q-option {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-elev); cursor: pointer; font-size: 0.85rem; text-align: center;
  transition: all 200ms cubic-bezier(0.22,1,0.36,1); min-height: 50px;
  display: flex; align-items: center; justify-content: center;
}
.q-option:hover { border-color: var(--accent); transform: translateY(-1px); }
.q-option.correct { border-color: var(--answer-correct); background: var(--accent-soft); color: var(--answer-correct); box-shadow: var(--glow); }
.q-option.wrong { border-color: var(--answer-wrong); background: rgba(239,68,68,0.10); color: var(--answer-wrong); }
.q-option.eliminated { opacity: 0.3; cursor: default; text-decoration: line-through; border-color: var(--answer-eliminated); background: rgba(71,85,105,0.16); transform: none; }
.q-feedback {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); font-size: 0.85rem; min-height: 32px;
  margin-bottom: var(--sp-2); animation: riftOpen 400ms cubic-bezier(0.22,1,0.36,1);
}
.q-feedback.right { border-color: var(--answer-correct); background: var(--accent-soft); color: var(--answer-correct); }
.q-feedback.wrong { border-color: var(--answer-wrong); background: rgba(239,68,68,0.10); color: var(--answer-wrong); font-style: italic; }
.carve-emergence {
  width: 100%; margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--carve-mark); border-radius: var(--r-sm);
  background: var(--carve-soft); animation: riftOpen 500ms cubic-bezier(0.22,1,0.36,1);
}
.carve-emergence h4 { font-size: 0.85rem; color: var(--ch-orange-ink); margin-bottom: var(--sp-2); }
.carve-emergence .carve-item {
  padding: var(--sp-1) var(--sp-2); margin-bottom: var(--sp-1);
  border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.78rem;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.carve-emergence .carve-item.lit {
  border-color: var(--carve-mark); color: var(--ch-orange-ink);
  background: var(--carve-soft); box-shadow: 0 0 8px var(--carve-soft);
}
.carve-emergence .carve-item.net {
  border-color: var(--net-gold); color: var(--ch-epiphany-ink);
  background: var(--ch-epiphany-soft); box-shadow: 0 0 12px var(--ch-epiphany-soft);
}
.fog-collapse {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--breakthrough); border-radius: var(--r-sm);
  background: var(--ch-epiphany-soft); text-align: center; font-style: italic; color: var(--ch-epiphany-ink);
  animation: shatterIn 800ms cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   S10 顿悟 · 文明新章 · 飞升（最终章）
   ============================================================ */
.cmp-finale { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.cognition-zone {
  width: 100%; padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.cognition-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.cognition-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.cognition-col { display: flex; flex-direction: column; gap: var(--sp-1); }
.cognition-title { font-family: var(--font-mono); font-size: 0.76rem; font-weight: 600; color: var(--text-1); text-align: center; padding-bottom: 4px; border-bottom: 1px solid var(--glass-line); }
.cognition-col[data-cog="tech"] .cognition-title { color: var(--prod-index); border-color: var(--prod-index); }
.cognition-col[data-cog="econ"] .cognition-title { color: var(--data-flow); border-color: var(--data-flow); }
.cognition-col[data-cog="civ"] .cognition-title { color: var(--ch-epiphany); border-color: var(--ch-epiphany); }
.cognition-opt {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); cursor: pointer; font-size: 0.72rem; text-align: center;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1); opacity: 0.6;
}
.cognition-opt:hover { opacity: 1; border-color: var(--accent); transform: translateY(-1px); }
.cognition-opt.chosen { opacity: 1; border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.cognition-opt .co-name { font-weight: 600; color: var(--text-1); }
.cognition-opt .co-desc { font-size: 0.64rem; color: var(--text-3); margin-top: 2px; }
.graph-zone {
  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);
}
.graph-zone h4 { font-size: 0.82rem; color: var(--accent-ink); margin-bottom: var(--sp-2); }
.graph-chain { display: flex; gap: var(--sp-1); flex-wrap: wrap; align-items: center; justify-content: center; }
.graph-node {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.72rem; text-align: center;
  transition: all 400ms cubic-bezier(0.22,1,0.36,1); opacity: 0.4;
}
.graph-node.lit { opacity: 1; border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.graph-node .gn-name { font-family: var(--font-mono); font-weight: 600; }
.graph-node .gn-trade { font-size: 0.62rem; color: var(--text-3); display: block; }
.graph-arrow { color: var(--text-3); font-size: 0.9rem; }
/* 三大体系知识链 */
.panorama-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); animation: riftOpen 600ms cubic-bezier(0.22,1,0.36,1);
}
.panorama-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); text-align: center; }
.panorama-chains { display: flex; flex-direction: column; gap: var(--sp-2); }
.panorama-chain {
  display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap;
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev);
}
.panorama-chain .pc-label { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; min-width: 70px; }
.panorama-chain[data-chain="semi"] .pc-label { color: var(--semi-green); }
.panorama-chain[data-chain="cs"] .pc-label { color: var(--cs-blue); }
.panorama-chain[data-chain="ai"] .pc-label { color: var(--ai-gold); }
.panorama-chain .pc-node {
  padding: 2px 6px; border: 1px solid var(--glass-line); border-radius: 3px;
  font-size: 0.64rem; color: var(--text-3); transition: all 400ms cubic-bezier(0.22,1,0.36,1); opacity: 0.4;
}
.panorama-chain .pc-node.lit { opacity: 1; }
.panorama-chain[data-chain="semi"] .pc-node.lit { border-color: var(--semi-green); color: var(--semi-green); background: rgba(16,185,129,0.1); }
.panorama-chain[data-chain="cs"] .pc-node.lit { border-color: var(--cs-blue); color: var(--cs-blue); background: rgba(59,130,246,0.1); }
.panorama-chain[data-chain="ai"] .pc-node.lit { border-color: var(--ai-gold); color: var(--ai-gold); background: rgba(245,158,11,0.1); }
.panorama-chain .pc-arrow { color: var(--text-3); font-size: 0.7rem; }
/* 修炼者之路 */
.career-zone {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); animation: riftOpen 600ms cubic-bezier(0.22,1,0.36,1);
}
.career-zone h4 { font-size: 0.85rem; color: var(--accent-ink); margin-bottom: var(--sp-2); text-align: center; }
.career-path { display: flex; gap: var(--sp-1); flex-wrap: wrap; align-items: center; justify-content: center; }
.career-node {
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-xs);
  background: var(--bg-elev); font-size: 0.7rem; text-align: center;
  transition: all 400ms cubic-bezier(0.22,1,0.36,1); opacity: 0.4; min-width: 80px;
}
.career-node.lit { opacity: 1; border-color: var(--graduation); background: rgba(245,158,11,0.12); color: var(--graduation); box-shadow: 0 0 10px rgba(245,158,11,0.28); }
.career-node .cn-name { font-family: var(--font-mono); font-weight: 600; }
.career-node .cn-tag { font-size: 0.6rem; color: var(--text-3); display: block; }
.puzzle-area { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.puzzle-piece {
  padding: var(--sp-2); border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  background: var(--bg-sunk); text-align: center; cursor: default;
  transition: all 400ms cubic-bezier(0.22,1,0.36,1); min-height: 60px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  opacity: 0.3;
}
.puzzle-piece.lit { opacity: 1; border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.puzzle-piece .pp-name { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: var(--text-1); }
.puzzle-piece .pp-tag { font-size: 0.62rem; color: var(--text-3); }
.depth-readout { padding: var(--sp-2); font-family: var(--font-mono); font-size: 0.82rem; color: var(--accent-ink); text-align: center; min-height: 28px; }

/* ---------- 境界突破动画（化神五层·文明新章·飞升）---------- */
.realm-achieved {
  margin-top: var(--sp-3); text-align: center; padding: var(--sp-3);
  border: 1px solid var(--ch-epiphany); border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--ch-orange-soft), var(--ch-epiphany-soft));
}
.realm-breakthrough {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  margin-bottom: var(--sp-2); flex-wrap: wrap;
}
.rb-stage {
  font-family: var(--font-mono); font-size: 1rem; font-weight: 700;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  opacity: 0; transition: all 800ms cubic-bezier(0.22,1,0.36,1);
}
.rb-from { color: var(--ch-orange-ink); border: 1px solid var(--ch-orange); background: var(--ch-orange-soft); }
.rb-to {
  color: var(--huashen-gold); border: 1px solid var(--huashen-gold);
  background: rgba(252,211,77,0.16);
  text-shadow: 0 0 16px rgba(252,211,77,0.6);
}
.rb-arrow {
  font-size: 1.4rem; color: var(--ch-epiphany); opacity: 0;
  animation: arrowPulse 1.6s ease-in-out infinite;
}
@keyframes arrowPulse {
  0%, 100% { transform: translateX(0); opacity: 0.6; }
  50% { transform: translateX(6px); opacity: 1; }
}
.rb-stage.show { opacity: 1; }
.rb-stage.glow { box-shadow: 0 0 32px rgba(252,211,77,0.5); }
.realm-glow {
  font-family: var(--font-mono); font-size: 1.05rem; color: var(--ch-epiphany-ink); letter-spacing: 0.2em;
}
@keyframes realmGlow {
  0%, 100% { box-shadow: 0 0 18px var(--ch-orange-soft); }
  50% { box-shadow: 0 0 40px rgba(252,211,77,0.4); }
}
.realm-achieved.active { animation: realmGlow 3s ease-in-out infinite; }

/* ---------- 飞升动画（最终章特殊）---------- */
.ascension-zone {
  margin-top: var(--sp-4); width: 100%; padding: var(--sp-4);
  border: 1px solid var(--graduation); border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(7,11,20,0.4) 0%, rgba(245,158,11,0.08) 100%);
  text-align: center; position: relative; overflow: hidden;
  min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3);
  opacity: 0; transition: opacity 1.2s cubic-bezier(0.22,1,0.36,1);
}
.ascension-zone.show { opacity: 1; }
.ascension-canvas {
  width: 100%; max-width: 480px; height: 200px;
  border: 1px solid var(--glass-line); border-radius: var(--r-sm); background: var(--bg-elev);
}
.ascension-title {
  font-family: var(--font-serif); font-size: clamp(1.4rem, 4vw, 2rem); color: var(--huashen-gold);
  letter-spacing: 0.3em; text-shadow: 0 0 24px rgba(252,211,77,0.5);
  opacity: 0; transition: opacity 1.5s cubic-bezier(0.22,1,0.36,1) 0.8s;
}
.ascension-zone.show .ascension-title { opacity: 1; }
.ascension-quote {
  font-style: italic; color: var(--ch-epiphany-ink); font-size: 0.92rem; max-width: 36rem;
  line-height: 1.8; opacity: 0; transition: opacity 1.5s cubic-bezier(0.22,1,0.36,1) 1.6s;
}
.ascension-zone.show .ascension-quote { opacity: 1; }
.ascension-seal {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4); border: 2px solid var(--huashen-gold); border-radius: var(--r-md);
  background: rgba(252,211,77,0.1); color: var(--huashen-gold);
  font-family: var(--font-mono); font-size: 1.1rem; letter-spacing: 0.3em; font-weight: 700;
  opacity: 0; transform: scale(0.8); transition: all 1s cubic-bezier(0.34,1.56,0.64,1) 2.4s;
  box-shadow: 0 0 32px rgba(252,211,77,0.4);
}
.ascension-zone.show .ascension-seal { opacity: 1; transform: scale(1); }
.ascension-seal .as-formula { font-size: 1.3rem; }
@keyframes sealPulse {
  0%, 100% { box-shadow: 0 0 32px rgba(252,211,77,0.4); }
  50% { box-shadow: 0 0 56px rgba(252,211,77,0.7); }
}
.ascension-seal.show { animation: sealPulse 3s ease-in-out infinite; }
.ascension-foot {
  font-size: 0.82rem; color: var(--text-3); letter-spacing: 0.2em; margin-top: var(--sp-2);
  opacity: 0; transition: opacity 1.5s cubic-bezier(0.22,1,0.36,1) 3.2s;
}
.ascension-zone.show .ascension-foot { opacity: 1; }
/* 星尘粒子 */
@keyframes stardust {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-200px) scale(0.3); opacity: 0; }
}
.ascension-stardust {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  pointer-events: none; animation: stardust 4s linear infinite;
}

/* ============================================================
   响应式 · 移动端适配
   ============================================================ */
@media (max-width: 640px) {
  .op-title { font-size: clamp(2rem, 12vw, 3.5rem); }
  .op-sub { letter-spacing: 0.3em; }
  .option-grid { grid-template-columns: 1fr; }
  .challenge-silhouettes { grid-template-columns: repeat(2, 1fr); }
  .map-nodes { grid-template-columns: repeat(2, 1fr); }
  .engine-grid { grid-template-columns: 1fr; }
  .job-grid { grid-template-columns: repeat(2, 1fr); }
  .industry-row { grid-template-columns: 1fr; }
  .gov-row { grid-template-columns: 1fr; }
  .systems-grid { grid-template-columns: 1fr; }
  .cognition-grid { 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; }
  .realm-breakthrough { gap: var(--sp-1); }
  .panorama-chain { font-size: 0.6rem; }
  .panorama-chain .pc-node { font-size: 0.56rem; }
}

@media (prefers-reduced-motion: reduce) {
  .realm-achieved.active { animation: none; }
  .rb-arrow { animation: none; }
  .ascension-seal.show { animation: none; }
  .ascension-stardust { animation: none; }
  .conflict-popup, .debt-account, .civ-map, .exclude-mark, .tide-diagnosis, .tide-crack-zone,
  .gap-zone, .energy-breakdown-zone, .jevons-zone, .rootcause-zone, .carve-emergence, .fog-collapse,
  .cognition-zone, .graph-zone, .puzzle-piece, .graph-node, .panorama-zone, .career-zone { animation: none; }
  .chal-card:hover, .cognition-opt:hover, .engine-card:hover, .job-card:hover, .system-card:hover { transform: none; }
}