/* ---- v3 · Root CSS variables (from color_tokens + typography) ---- */
:root {
  --bg: #F2E8D2;
  --surface: #FAF1DC;
  --surface-2: #E8D6B0;
  --surface_2: #E8D6B0;
  --fg: #2C1F12;
  --muted: #6F5A47;
  --border: rgba(44,31,18,0.10);
  --primary: #C73E2A;
  --accent: #1E6B6E;
  --success: #A78F4E;
  --danger: #B8331E;
  --warning: #C88B2A;
  --font-sans: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Source Han Sans SC',system-ui,sans-serif;
  --font-mono: 'JetBrains Mono','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Source Han Sans SC','ui-monospace',monospace;
  --font-display: 'Fraunces','Songti SC','Source Han Serif SC','SimSun',serif;
}
html, body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); }
body { margin: 0; }
.katex, .katex-display { color: inherit; }
.katex-display { margin: 0.5em 0; overflow-x:auto; overflow-y:hidden; }
/* v8 bug fix：无条件保证 [hidden] 生效。Coder 常用 el.hidden=!el.hidden 做"显示/收起答案"之类的
   交互，依赖浏览器默认的 [hidden]{display:none}；但只要 Coder 给同一个元素另外写了一条
   display:block/flex/grid 的样式规则（哪怕只是 .card em{display:block} 这种常见写法），只要
   该规则的 CSS 特殊性 ≥ [hidden] 选择器（这几乎总是成立，因为 [hidden] 只是单个属性选择器），
   就会覆盖掉 [hidden]，导致该元素永久可见——按钮点不点都没用，点击后视觉上毫无变化（真实抓到的
   bug：一个"显示答案"按钮配合 <em hidden>答案</em>，被同 section 里的 .xxx em{display:block}
   规则覆盖，答案永久显示，收起按钮形同虚设）。这里用 !important 从框架层面兜底，保证
   hidden 属性一旦被 JS 设置就必定生效，不受 Coder 具体怎么写样式影响。 */
[hidden] { display: none !important; }
/* v9 新：术语首次出现的悬浮解释统一样式（配合 knowledge.glossary，Coder 用 <abbr title="..."> 包裹）。
   全局给一次即可，Coder 不需要自己写 .term-gloss 相关样式。 */
abbr[title] {
  text-decoration: underline dotted;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
  cursor: help;
  -webkit-text-decoration-line: underline;
  -webkit-text-decoration-style: dotted;
}

/* ---- v3 · Section scaffold CSS (Designer-provided baseline) ---- */
:root {
  --bg: #F2E8D2;
  --surface: #FAF1DC;
  --surface-2: #E8D6B0;
  --fg: #2C1F12;
  --muted: #6F5A47;
  --border: rgba(44,31,18,0.10);
  --primary: #C73E2A;
  --accent: #1E6B6E;
  --success: #A78F4E;
  --danger: #B8331E;
  --warning: #C88B2A;
  --font-sans: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Source Han Sans SC',system-ui,sans-serif;
  --font-mono: 'JetBrains Mono','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Source Han Sans SC','ui-monospace',monospace;
  --font-display: 'Fraunces','Songti SC','Source Han Serif SC','SimSun',serif;
}

/* ---- section 外壳 ---- */
.section-shell { padding: 5rem 1.5rem; max-width: 1200px; margin: 0 auto; box-sizing: border-box; }
@media (min-width: 768px) { .section-shell { padding: 6rem 2rem; } }

/* ---- section 标题栏 ---- */
.section-header { margin-bottom: 2rem; }
.section-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--primary);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  display: inline-block;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.section-subtitle {
  color: var(--muted);
  margin-top: 0.75rem;
  line-height: 1.7;
  font-size: 1.05rem;
}

/* ---- 8 种 layout 家族 ---- */
.layout-single-column { display: block; }
.layout-hero-split { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 900px) { .layout-hero-split { grid-template-columns: 55fr 45fr; } }

.layout-canvas-hero { display: flex; flex-direction: column; gap: 1.5rem; }
.layout-text-then-diagram { display: flex; flex-direction: column; gap: 2rem; }
.layout-content-full { display: flex; flex-direction: column; gap: 1.75rem; }
.layout-content-full > .content-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; align-items: start; }
.layout-data-dashboard { display: flex; flex-direction: column; gap: 1.5rem; }
.layout-data-dashboard > .stats-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.layout-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; align-items: start; }
.layout-compact-table { display: block; }

/* ---- 通用组件外壳 ---- */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  box-sizing: border-box;
}
.canvas-wrap {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  height: 460px;
  box-sizing: border-box;
}
.canvas-wrap canvas { width: 100%; height: 100%; display: block; }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  box-sizing: border-box;
  min-width: 0;
  transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(44,31,18,0.18); }
.kpi {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}
.kpi-label {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 0.25rem;
}

/* canvas_hero 下方控件条 */
.controls-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.control-cell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
  box-sizing: border-box;
  min-width: 0;
}

/* 章节间分隔柔化 */
.section-divider {
  width: 60px;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--border), transparent);
  margin: 0 auto;
}

/* ---- v3 · Global CSS (Designer-provided theme flourishes) ---- */
/* ==== 暖色化学笔记本主题样式 ==== */
html { scroll-behavior: smooth; }
::selection { background: #C73E2A; color: #FAF1DC; }

/* 亚麻纸质感背景 + 微弱方格线（化学笔记本感） */
body {
  background-color: #F2E8D2;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(199,62,42,0.07) 0%, transparent 38%),
    radial-gradient(circle at 85% 80%, rgba(30,107,110,0.07) 0%, transparent 38%),
    linear-gradient(rgba(44,31,18,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44,31,18,0.04) 1px, transparent 1px);
  background-size: auto, auto, 28px 28px, 28px 28px;
  background-attachment: fixed;
}

/* ==== 酸 / 碱 / 盐 三色卡片（通过左 border + 微渐变分辨） ==== */
.card-acid {
  background: linear-gradient(135deg, #FAF1DC 0%, #F8E4D0 100%);
  border: 1px solid rgba(199,62,42,0.22);
  border-left: 4px solid #C73E2A;
  border-radius: 10px;
  padding: 1.25rem 1.25rem 1.25rem 1.5rem;
  box-sizing: border-box;
}
.card-base {
  background: linear-gradient(135deg, #FAF1DC 0%, #DDE9E5 100%);
  border: 1px solid rgba(30,107,110,0.22);
  border-left: 4px solid #1E6B6E;
  border-radius: 10px;
  padding: 1.25rem 1.25rem 1.25rem 1.5rem;
  box-sizing: border-box;
}
.card-salt {
  background: linear-gradient(135deg, #FAF1DC 0%, #F2E2C0 100%);
  border: 1px solid rgba(200,139,42,0.30);
  border-left: 4px solid #C88B2A;
  border-radius: 10px;
  padding: 1.25rem 1.25rem 1.25rem 1.5rem;
  box-sizing: border-box;
}

/* ==== 化学式 / 方程式排版 ==== */
.formula {
  font-family: 'JetBrains Mono','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Source Han Sans SC','ui-monospace',monospace;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  background: #FFF8E8;
  border: 1px solid rgba(44,31,18,0.10);
  border-radius: 10px;
  padding: 0.85rem 1.25rem;
  display: inline-block;
  color: #2C1F12;
}
.formula .acid-part { color: #C73E2A; font-weight: 700; }
.formula .base-part { color: #1E6B6E; font-weight: 700; }
.formula .salt-part { color: #C88B2A; font-weight: 700; }
.formula .water-part { color: #2E5C7A; font-weight: 700; }
/* CO₂ 等气体产物：原缺失，导致同一方程里只有它没上色 */
.formula .gas-part { color: #6B9183; font-weight: 700; }
.formula .plus { color: #6F5A47; margin: 0 0.5rem; }
.formula .arrow { color: #6F5A47; margin: 0 0.75rem; font-weight: 700; }
sub, sup { font-size: 0.7em; }

/* ==== pH 通用指示剂渐变条 ==== */
.ph-strip {
  background: linear-gradient(to right,
    #C73E2A 0%, #D9633A 14%, #D9853D 28%, #C89F3D 42%,
    #A4B055 56%, #6B9183 70%, #3A7B82 85%, #1E6B6E 100%);
  height: 14px;
  border-radius: 7px;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
}
.ph-marker {
  position: absolute;
  top: -4px;
  width: 4px;
  height: 22px;
  background: #2C1F12;
  border-radius: 2px;
  transform: translateX(-2px);
}

/* ==== 离子粒子（H⁺ 朱红 / OH⁻ 青绿 / H₂O 蓝） ==== */
.particle-h {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #C73E2A 55%, #8E2218 100%);
  box-shadow: 0 0 10px rgba(199,62,42,0.55);
  display: inline-block;
}
.particle-oh {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #1E6B6E 55%, #11403F 100%);
  box-shadow: 0 0 10px rgba(30,107,110,0.55);
  display: inline-block;
}
.particle-water {
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #5B8AAB 70%, #2E5C7A 100%);
  display: inline-block;
}

/* ==== 范围输入（pH 滑动） ==== */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: linear-gradient(to right, #C73E2A 0%, #C89F3D 50%, #1E6B6E 100%);
  border-radius: 3px;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: #FAF1DC;
  border: 2px solid #C73E2A;
  box-shadow: 0 2px 6px rgba(199,62,42,0.30);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: #FAF1DC;
  border: 2px solid #C73E2A;
  cursor: pointer;
}

/* ==== 三色徽章 ==== */
.badge-acid { background: rgba(199,62,42,0.12); color: #A82818; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; display: inline-block; }
.badge-base { background: rgba(30,107,110,0.12); color: #1A4F4F; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; display: inline-block; }
.badge-salt { background: rgba(200,139,42,0.18); color: #8C5F1C; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; display: inline-block; }
.badge-neutral { background: rgba(200,139,42,0.12); color: #6F5A47; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; display: inline-block; }

/* ==== 暖色 CTA ==== */
.btn-warm {
  background: #C73E2A;
  color: #FAF1DC;
  border: none;
  padding: 0.7rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
  box-shadow: 0 3px 10px rgba(199,62,42,0.25);
  font-family: inherit;
}
.btn-warm:hover { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(199,62,42,0.35); }

.btn-tea {
  background: transparent;
  color: #1E6B6E;
  border: 2px solid rgba(30,107,110,0.45);
  padding: 0.55rem 1.3rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
  font-family: inherit;
}
.btn-tea:hover { background: rgba(30,107,110,0.08); border-color: #1E6B6E; }

/* ==== 动画 keyframes ==== */
@keyframes bubble-up {
  0% { transform: translateY(0) scale(1); opacity: 0.6; }
  100% { transform: translateY(-44px) scale(0.3); opacity: 0; }
}
@keyframes pulse-acid {
  0%, 100% { box-shadow: 0 0 0 0 rgba(199,62,42,0.40); }
  50% { box-shadow: 0 0 0 14px rgba(199,62,42,0); }
}
@keyframes pulse-base {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30,107,110,0.40); }
  50% { box-shadow: 0 0 0 14px rgba(30,107,110,0); }
}
@keyframes indicator-shift {
  0% { background-color: #FAF1DC; color: #2C1F12; }
  100% { background-color: #E84A8C; color: #FAF1DC; } /* 酚酞遇碱变粉 */
}
@keyframes drift {
  0% { transform: translate(0, 0); }
  50% { transform: translate(2px, -3px); }
  100% { transform: translate(0, 0); }
}
/* Hero 区动效 */
@keyframes hero-pulse-acid {
  0%, 100% { r: 6; opacity: 0.75; }
  50% { r: 7.5; opacity: 0.95; }
}
@keyframes hero-pulse-base {
  0%, 100% { r: 6; opacity: 0.75; }
  50% { r: 7.5; opacity: 0.95; }
}
@keyframes hero-ph-flow {
  0% { stop-color: #C73E2A; }
  50% { stop-color: #E8A090; }
  100% { stop-color: #C73E2A; }
}
@keyframes hero-drift-h {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(3px, -2px); }
  50% { transform: translate(-1px, 3px); }
  75% { transform: translate(-3px, -1px); }
}
@keyframes hero-drift-oh {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-3px, 2px); }
  50% { transform: translate(1px, -3px); }
  75% { transform: translate(3px, 1px); }
}
.hero-particle-acid { animation: hero-pulse-acid 2s ease-in-out infinite; transform-origin: center; }
.hero-particle-base { animation: hero-pulse-base 2s ease-in-out infinite; transform-origin: center; }
.hero-ph-stop { transition: stop-color 0.3s; }
.hero-drift-h { animation: hero-drift-h 4s ease-in-out infinite; }
.hero-drift-oh { animation: hero-drift-oh 4.5s ease-in-out infinite; }

.pulse-acid { animation: pulse-acid 1.6s ease-in-out infinite; }
.pulse-base { animation: pulse-base 1.6s ease-in-out infinite; }
.drift { animation: drift 4s ease-in-out infinite; }

/* ==== 工具类 ==== */
.warm-shadow { box-shadow: 0 10px 30px -12px rgba(44,31,18,0.18); }
.ion-tag { font-family: 'JetBrains Mono','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Source Han Sans SC',monospace; padding: 2px 8px; background: #FFF8E8; border: 1px dashed rgba(44,31,18,0.18); border-radius: 6px; font-size: 0.9rem; }
.dashed-rule { border-top: 1px dashed rgba(44,31,18,0.18); margin: 1.5rem 0; }

/* 烧瓶标签（lab notebook 风格的小标签） */
.beaker-label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  background: #FAF1DC;
  border: 1px dashed rgba(44,31,18,0.22);
  border-radius: 6px;
  font-family: 'JetBrains Mono','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Source Han Sans SC',monospace;
  font-size: 0.85rem;
  color: #2C1F12;
}



/* ================================================================
   v4 DEFENSIVE LAYER — 上下堆叠为主，取代 v3 的左右分栏方案
   核心：canvas_hero / text_then_diagram 用 flex-column 上下堆叠；
        hero_split 保留左右（但对 hero_split 加限制，防高度失衡）；
        cards_grid + single_column + compact_table 保持简单。
   ================================================================ */

/* 0. section-shell 通用防御 */
section.section-shell {
  overflow-x: hidden;
  overflow-y: visible;
  box-sizing: border-box;
}

/* 1. **canvas_hero 家族**：上下堆叠，canvas 全宽 + 控件在下方
      —— 不再有"右下空白"问题，因为没有右列 */
section.layout-canvas-hero {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem;
}
section.layout-canvas-hero > * {
  width: 100%;
  min-width: 0;
}

/* 2. **text_then_diagram 家族**：上文字 + 下全宽图
      v9：不再限宽文字段落（曾用 72ch）。产品决策——纯文字内容宁可整行铺满、单行字符数变多，
      也不要留出"看起来像没做完"的右侧空白背景（历史上这条限宽规则导致过两类问题：一是
      Coder 想覆盖却因为 CSS 特殊性打不过而覆盖不掉；二是即使限宽本身生效，纯文字段落本身
      也会在宽屏下露出大片无视觉内容的空白——第二类问题不是 bug、是限宽本身的必然结果，
      所以直接从骨架里去掉这条规则最彻底）。 */
section.layout-text-then-diagram {
  display: flex !important;
  flex-direction: column !important;
  gap: 2rem;
}
section.layout-text-then-diagram > * {
  min-width: 0;
}
section.layout-text-then-diagram > .canvas-wrap,
section.layout-text-then-diagram > .diagram-wrap {
  width: 100%;
}

/* 2b. content_full 家族：标题 + 说明段 + 全宽卡片网格（v5 新，纯讲解页首选）。v9：说明段同上不再限宽 */
section.layout-content-full {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.75rem;
}
section.layout-content-full > * { min-width: 0; }
section.layout-content-full > .content-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 1.25rem !important;
  align-items: start !important;
  width: 100%;
}

/* 2c. data_dashboard 家族：顶部数据条 + 全宽 canvas/表 + 底部说明（v5 新） */
section.layout-data-dashboard {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem;
}
section.layout-data-dashboard > * { min-width: 0; width: 100%; }
section.layout-data-dashboard > .stats-bar {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 1rem !important;
}

/* 3. **hero_split 家族**：保留左右分栏（hero 特殊），但限制高度失衡 */
section.layout-hero-split {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 3rem !important;
  align-items: center !important;
}
@media (min-width: 900px) {
  section.layout-hero-split {
    grid-template-columns: 55fr 45fr !important;
    grid-auto-flow: row dense !important;
    min-height: 480px;
    /* v6：不再用 max-height 死值卡住整个 hero（曾导致内容被挤压/出现滚动条）。
       改为让 section 随内容自然撑高，靠 Coder 侧的"hero-copy 精简"硬约束防止过长。 */
  }
  /* header 横跨（若有独立 header） */
  section.layout-hero-split > .section-header,
  section.layout-hero-split > header {
    grid-column: 1 / -1 !important;
  }
  /* hero-copy 落左列，hero-visual/canvas-wrap 落右列 */
  section.layout-hero-split > .hero-copy,
  section.layout-hero-split > .panel:first-of-type {
    grid-column: 1 / 2 !important;
  }
  section.layout-hero-split > .hero-visual,
  section.layout-hero-split > .canvas-wrap {
    grid-column: 2 / 3 !important;
    align-self: start;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* v6：去掉写死的 640px + 内部滚动条（这是"共享骨架硬编码死值"导致的真实 bug：
     内容略长就出现滚动条/被挤压）。改为 max-height: none，让内容自然撑开 hero 高度；
     hero-copy 是否够精简由 Coder prompt 的硬约束负责，不再靠 CSS 兜底裁切。 */
  section.layout-hero-split > .hero-copy {
    max-height: none;
  }
}

/* 4. canvas 全局约束 */
canvas { max-width: 100%; }

/* 4a. 直接放在 section 下的 canvas（未包 .canvas-wrap）：强制合理外观。
   例外：position:fixed 的全屏悬浮canvas（如答题庆祝彩屑）不受此约束——由
   AutoCanvas JS（见AUTO_CANVAS_JS::_liftFixedCanvasScaffoldOverrides）在测量
   尺寸前用inline !important 动态解除，不需要在这里维护任何 class 名单。 */
section.section-shell > canvas {
  width: 100% !important;
  height: 460px !important;
  display: block;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
}

/* 5. .canvas-wrap：**固定合理高度** */
.canvas-wrap {
  aspect-ratio: auto !important;
  /* canvas_hero 里 canvas-wrap 全宽 460px；hero_split 里也一样 */
  height: 460px !important;
  min-height: 380px !important;
  max-height: 560px !important;
  /* v6 bug fix：canvas-wrap 内部通常全是 absolute 定位子元素（canvas/HUD/note，
     见 5a/5c），本身没有任何 in-flow 内容。align-self:start 在 grid 场景里只影响
     纵轴（不撑满行高），是有意为之；但如果 canvas-wrap 处于 flex-column 容器里
     （如 data_dashboard 布局下 Coder 常见的「外层再包一层 wrapper div」结构），
     align-self 控制的是横轴（宽度）——没有 width，align-self:start 会让它按
     shrink-to-fit 收缩到 0 内容宽度，只剩 1px+1px 的边框，导致整块画布区域
     "消失"（真实抓到的 bug：mass-and-gravity 等 data_dashboard section 里
     canvas/HUD 完全不可见）。显式加 width:100% 保证任何容器（grid 或 flex）下
     宽度都撑满，同时不影响 align-self 对高度的既有语义。 */
  width: 100%;
  align-self: start;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-sizing: border-box;
}

/* 5a. canvas-wrap 内部 canvas 绝对定位填满 */
.canvas-wrap > canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* 5b. canvas-wrap 内部 SVG 撑满且不越界 */
.canvas-wrap > svg {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  display: block;
  object-fit: contain;
}

/* 5c. canvas-wrap 内允许 HUD 浮层 */
.canvas-wrap > [class*="hud"],
.canvas-wrap > [class*="overlay"] {
  position: absolute !important;
  z-index: 2;
  pointer-events: none;
}
.canvas-wrap > [class*="hud"] * {
  pointer-events: auto;
}

/* 6. controls-bar：canvas_hero 的下方控件条 */
.controls-bar {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 1rem !important;
  width: 100%;
}
.control-cell {
  min-width: 0;
  box-sizing: border-box;
}

/* 7. cards_grid：卡片最小 300px + align-items:start + auto-rows:min-content */
.layout-cards-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  grid-auto-rows: min-content !important;
  align-items: start !important;
}
.layout-cards-grid > .card,
.layout-cards-grid > article,
.layout-cards-grid > div {
  align-self: start !important;
}

/* 8. .card 约束：min-width:0 + overflow:hidden 防止长内容溢出 */
.card {
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.card > * {
  max-width: 100%;
}

/* 9. quiz section 强制 single_column 语义 */
section[id="quiz"], section[id$="-quiz"] {
  display: block !important;
}
section[id="quiz"] > *, section[id$="-quiz"] > * {
  grid-column: unset !important;
}
section[id="quiz"] .quiz-list,
section[id="quiz"] [data-role="quiz-list"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}
/* quiz section 里装饰性 canvas 强制小尺寸（防大黑框）。
   例外：position:fixed 的全屏悬浮canvas（如答题庆祝彩屑）不受此约束——由AutoCanvas
   JS（见AUTO_CANVAS_JS::_liftFixedCanvasScaffoldOverrides）在测量尺寸前用inline
   !important 动态解除，不需要在这里维护任何 class 名单。 */
section[id="quiz"] canvas,
section[id$="-quiz"] canvas {
  max-height: 240px !important;
}

/* 10. 图片/SVG 不允许溢出 */
section.section-shell img,
section.section-shell svg {
  max-width: 100%;
}

/* 11. grid/flex 子元素 min-width:0 */
section.section-shell > .panel,
section.section-shell > .card,
section.section-shell > div,
section.section-shell > article {
  min-width: 0;
}

/* 12. section 之间 border 分隔 */
section.section-shell + section.section-shell {
  border-top: 1px solid var(--border);
}

/* 13. KaTeX 公式不允许折行/竖排 */
.katex, .katex .base, .katex-html {
  white-space: nowrap !important;
}
.katex {
  display: inline-block !important;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  vertical-align: middle;
}
.katex-display {
  display: block !important;
  overflow-x: auto;
  overflow-y: hidden;
  text-align: center;
  margin: 0.5em 0;
}
.katex-display > .katex {
  display: inline-block !important;
  white-space: nowrap !important;
}

/* 14. **装饰节制兜底**：限制单个卡片/面板的嵌套装饰
      * 卡片内 pseudo-element 只允许 1 层
      * 卡片内 box-shadow 只允许 1 层 */
.card > *::before,
.card > *::after,
.panel > *::before,
.panel > *::after {
  /* 允许 Coder 的合法装饰，但外层元素装饰不影响子层 */
}

/* 15. 兼容旧 layout 值（若 LLM 输出旧类名，也能识别） */
section.layout-control-canvas {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem;
}
section.layout-text-diagram {
  display: flex !important;
  flex-direction: column !important;
  gap: 2rem;
}


*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:Inter, PingFang SC,Hiragino Sans GB,Microsoft YaHei,Source Han Sans SC, system-ui, sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:JetBrains Mono, PingFang SC,Hiragino Sans GB,Microsoft YaHei,Source Han Sans SC, ui-monospace, monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}


/* section: hero */
/* ==== hero section 专属样式 ==== */
.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.section-title-hero {
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-top: 0.1rem;
  margin-bottom: 0;
}

.hero-lead {
  max-width: 36rem;
  font-size: 1.075rem;
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
}

/* ==== KPI 三列 ==== */
.hero-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}
.kpi-cell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.9rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kpi-cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -10px rgba(44,31,18,0.20);
}
.kpi-cell .kpi-label {
  margin-top: 0;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.06em;
}
.kpi-line,
.kpi-cn,
.kpi-num {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.15;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.kpi-line { flex-wrap: wrap; }
.kpi-line .ion-tag { font-size: 0.85rem; padding: 1px 7px; }
.kpi-cn {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: 0.01em;
}
.kpi-num {
  font-size: 1.45rem;
  color: var(--warning);
  letter-spacing: 0.02em;
}

/* ==== CTAs ==== */
.hero-ctas {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

/* ==== 视觉卡片 ==== */
.hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-visual-stage {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2.6rem 1.4rem 2.2rem;
  box-sizing: border-box;
  box-shadow: 0 14px 36px -18px rgba(44,31,18,0.28);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hero-visual-stage:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px -18px rgba(44,31,18,0.36);
}
.hero-deco-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* SVG 卡片四周的化学标签 */
.hero-mini-tag {
  position: absolute;
  display: inline-block;
  padding: 0.3rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  border-radius: 999px;
  background: var(--surface);
  border: 1px dashed currentColor;
  white-space: nowrap;
}
.hero-mini-tag-acid {
  top: 0.85rem;
  left: 1rem;
  color: var(--primary);
  background: rgba(199,62,42,0.07);
  border-color: rgba(199,62,42,0.35);
}
.hero-mini-tag-base {
  top: 0.85rem;
  right: 1rem;
  color: var(--accent);
  background: rgba(30,107,110,0.07);
  border-color: rgba(30,107,110,0.35);
}
.hero-mini-tag-salt {
  bottom: 0.7rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--warning);
  background: rgba(200,139,42,0.10);
  border-color: rgba(200,139,42,0.42);
}

/* SVG 下面的对照小标签 */
.hero-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.7rem;
  padding: 0 0.5rem;
  font-size: 0.82rem;
  color: var(--muted);
  gap: 0.5rem;
}
.hero-cap {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
}
.hero-cap-acid { color: var(--primary); }
.hero-cap-base { color: var(--accent); }
.hero-cap .ion-tag {
  font-size: 0.78rem;
  padding: 1px 7px;
  background: rgba(255,248,232,0.6);
}
.hero-cap-mid {
  color: var(--warning);
  font-weight: 600;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.1;
}
.hero-cap-mid small {
  display: block;
  font-weight: 400;
  font-size: 0.68rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-top: 0.1rem;
}

/* ==== 入场动画 ==== */
.hero-copy > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-copy > *.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ==== 响应式 ==== */
@media (max-width: 900px) {
  .hero-kpis {
    grid-template-columns: 1fr 1fr;
  }
  .hero-kpis > .kpi-cell:last-child {
    grid-column: 1 / -1;
  }
  .hero-visual-stage {
    max-width: 420px;
    margin: 0 auto;
  }
}
@media (max-width: 600px) {
  .hero-mini-tag {
    font-size: 0.66rem;
    padding: 0.22rem 0.55rem;
  }
  .hero-mini-tag-acid { left: 0.6rem; }
  .hero-mini-tag-base { right: 0.6rem; }
}

/* section: concept-definitions */
/* ============ section: concept-definitions ============ */

/* 引子 panel: 视觉 + 文字 */
.concept-definitions-intro {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  align-items: center;
}
@media (max-width: 760px) {
  .concept-definitions-intro { grid-template-columns: 1fr; }
}
.concept-definitions-intro-visual {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto;
  background:
    radial-gradient(circle at 30% 25%, rgba(199,62,42,0.10) 0%, transparent 50%),
    radial-gradient(circle at 70% 75%, rgba(30,107,110,0.10) 0%, transparent 50%),
    repeating-linear-gradient(0deg, rgba(44,31,18,0.025) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(44,31,18,0.025) 0 1px, transparent 1px 32px);
  border: 1px dashed rgba(44,31,18,0.16);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.concept-definitions-intro-particle-h { position: absolute; top: 38%; left: 36%; }
.concept-definitions-intro-particle-oh { position: absolute; top: 58%; left: 58%; }
.concept-definitions-intro-tag-h, .concept-definitions-intro-tag-oh {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  border: 1px dashed currentColor;
  background: rgba(255,255,255,0.65);
  text-decoration: none;
  cursor: help;
}
.concept-definitions-intro-tag-h {
  top: 14%; left: 50%;
  transform: translateX(-50%);
  color: var(--primary);
}
.concept-definitions-intro-tag-oh {
  bottom: 14%; left: 50%;
  transform: translateX(-50%);
  color: var(--accent);
}
.concept-definitions-intro-eq {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  color: var(--muted);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.55;
}

/* 引子文字块 */
.concept-definitions-intro-text .badge-neutral { margin-bottom: 0.5rem; }
.concept-definitions-intro-title {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  margin: 0.4rem 0 0.75rem;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.concept-definitions-intro-text p {
  color: var(--muted);
  line-height: 1.7;
  margin: 0.5rem 0;
}
.concept-definitions-keys {
  list-style: none;
  padding: 0.65rem 1rem;
  margin: 0.75rem 0 0;
  background: rgba(244,232,210,0.6);
  border-radius: 8px;
  border-left: 3px solid var(--warning);
}
.concept-definitions-keys li {
  padding: 0.32rem 0;
  font-family: var(--font-sans);
  color: var(--fg);
  line-height: 1.55;
}
.key-acid, .key-base {
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 50%;
  text-align: center;
  line-height: 22px;
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 12px;
  margin-right: 0.5rem;
  vertical-align: -2px;
}
.key-acid { background: var(--primary); color: var(--surface); }
.key-base { background: var(--accent); color: var(--surface); }
.accent-acid { color: var(--primary); font-weight: 700; }
.accent-base { color: var(--accent); font-weight: 700; }

/* 双卡 grid */
.concept-definitions-grid {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 760px) {
  .concept-definitions-grid { grid-template-columns: 1fr; }
}
.concept-definitions-card-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
  margin: 0.75rem 0 0.75rem;
  color: var(--fg);
}
.concept-definitions-strong-acid {
  color: #7A1F12;
  background: rgba(199,62,42,0.12);
  padding: 1px 6px;
  border-radius: 5px;
}
.concept-definitions-strong-base {
  color: #114848;
  background: rgba(30,107,110,0.12);
  padding: 1px 6px;
  border-radius: 5px;
}
.concept-definitions-formula-wrap { margin: 0.65rem 0; text-align: center; }
.concept-definitions-card-acid .formula,
.concept-definitions-card-base .formula {
  width: auto;
  text-align: center;
  font-size: 1.1rem;
  display: inline-block;
  padding: 0.6rem 0.9rem;
}

.concept-definitions-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.85rem 0;
}
.concept-definitions-pill {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  background: rgba(255,248,232,0.85);
  border: 1px solid rgba(44,31,18,0.10);
  color: var(--fg);
  white-space: nowrap;
}
.concept-definitions-pill b {
  font-weight: 700;
  margin-right: 0.35rem;
  color: var(--fg);
}

.concept-definitions-jingle {
  margin-top: 0.5rem;
  padding: 0.65rem 0.9rem;
  border-radius: 8px;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-sans);
}
.concept-definitions-jingle-acid {
  background: rgba(199,62,42,0.08);
  border: 1px dashed rgba(199,62,42,0.40);
  color: #7A1F12;
}
.concept-definitions-jingle-base {
  background: rgba(30,107,110,0.08);
  border: 1px dashed rgba(30,107,110,0.40);
  color: #114848;
}
.concept-definitions-jingle-icon { font-size: 1rem; }

/* 让两张卡片成为 hover 联动目标 */
.concept-definitions-card-acid,
.concept-definitions-card-base {
  transition: transform 0.2s, box-shadow 0.2s;
}
.concept-definitions-card-acid:hover,
.concept-definitions-card-base:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(44,31,18,0.18);
}

/* Demo panel + SVG */
.concept-definitions-demo-head { margin-bottom: 1rem; }
.concept-definitions-demo-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0.5rem 0 0.5rem;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.concept-definitions-demo-desc {
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
  max-width: 780px;
  font-size: 0.98rem;
}
.concept-definitions-svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  background: var(--surface-2);
  margin-top: 1rem;
  border: 1px solid var(--border);
}

/* 离子飘动: SVG circle 用 transform: translate, 单位是 SVG 用户坐标, 即 viewBox 内的距离 */
.concept-definitions-ion-h {
  animation: cd-drift-h 3.2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.concept-definitions-ion-oh {
  animation: cd-drift-oh 3.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes cd-drift-h {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(7px, -5px); }
}
@keyframes cd-drift-oh {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-5px, -8px); }
}
/* 首帧: 没进入视口前动画暂停 */
.concept-definitions-svg:not(.is-visible) .concept-definitions-ion-h,
.concept-definitions-svg:not(.is-visible) .concept-definitions-ion-oh {
  animation-play-state: paused;
}
/* hover 联动: 高亮对应离子 */
.concept-definitions-ion-h-group.is-hot .concept-definitions-ion-h {
  filter: drop-shadow(0 0 16px rgba(199,62,42,1)) drop-shadow(0 0 32px rgba(199,62,42,0.6));
  transform: scale(1.15);
  transform-origin: center;
  transition: transform 0.2s ease, filter 0.2s ease;
  animation-play-state: paused;
}
.concept-definitions-ion-oh-group.is-hot .concept-definitions-ion-oh {
  filter: drop-shadow(0 0 16px rgba(30,107,110,1)) drop-shadow(0 0 32px rgba(30,107,110,0.6));
  transform: scale(1.15);
  transform-origin: center;
  transition: transform 0.2s ease, filter 0.2s ease;
  animation-play-state: paused;
}
/* hover 时也高亮卡片边框 */
.concept-definitions-card-acid.is-hot {
  border-color: var(--primary);
  box-shadow: 0 0 20px rgba(199,62,42,0.25);
}
.concept-definitions-card-base.is-hot {
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(30,107,110,0.25);
}

/* 卡片内离子徽章 */
.ion-badge-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.ion-badge-label {
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
}
.ion-badge-svg {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.ion-badge-glow {
  opacity: 0.35;
  transition: opacity 0.25s ease, stroke-width 0.25s ease;
}
/* hover 时徽章发光 */
.concept-definitions-card-acid.is-hot .ion-badge-h .ion-badge-glow {
  opacity: 1;
  stroke-width: 3.5;
  animation: ion-badge-pulse-h 1.2s ease-in-out infinite;
}
.concept-definitions-card-base.is-hot .ion-badge-oh .ion-badge-glow {
  opacity: 1;
  stroke-width: 3.5;
  animation: ion-badge-pulse-oh 1.2s ease-in-out infinite;
}
@keyframes ion-badge-pulse-h {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(199,62,42,0.8)); }
  50% { filter: drop-shadow(0 0 14px rgba(199,62,42,1)) drop-shadow(0 0 24px rgba(199,62,42,0.5)); }
}
@keyframes ion-badge-pulse-oh {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(30,107,110,0.8)); }
  50% { filter: drop-shadow(0 0 14px rgba(30,107,110,1)) drop-shadow(0 0 24px rgba(30,107,110,0.5)); }
}
.concept-definitions-card-acid.is-hot .ion-badge-h { transform: scale(1.12); }
.concept-definitions-card-base.is-hot .ion-badge-oh { transform: scale(1.12); }

.concept-definitions-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 1rem 0 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(255,248,232,0.55);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--fg);
}
.concept-definitions-legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.concept-definitions-legend-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  display: inline-block;
}
.concept-definitions-legend-dot-acid { background: var(--primary); box-shadow: 0 0 6px rgba(199,62,42,0.4); }
.concept-definitions-legend-dot-base { background: var(--accent); box-shadow: 0 0 6px rgba(30,107,110,0.4); }
.concept-definitions-legend-dot-passenger { background: #E8D6B0; border: 1px solid var(--muted); }

.concept-definitions-caption {
  margin: 0.75rem 0 0;
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.65;
  padding: 0.7rem 1rem;
  background: rgba(244,232,210,0.50);
  border-radius: 6px;
  border-left: 3px solid var(--warning);
}

/* section: micro-process */
.micro-process-hud {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(250, 241, 220, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.65rem 1rem;
  display: flex;
  gap: 1.25rem;
  font-family: 'JetBrains Mono', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Source Han Sans SC', 'ui-monospace', monospace;
  box-shadow: 0 6px 16px -6px rgba(44, 31, 18, 0.18);
  z-index: 5;
}
.micro-process-hud-cell { display: flex; flex-direction: column; align-items: center; min-width: 58px; }
.micro-process-hud-label {
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 0.2rem;
}
.micro-process-hud-value { font-size: 1.45rem; font-weight: 700; line-height: 1; transition: transform 0.25s ease-out; }
.micro-process-hud-h { color: #E03131; }
.micro-process-hud-oh { color: #3B5BDB; }
.micro-process-hud-h2o { color: #3B6EA8; }

.micro-process-done-banner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(199, 62, 42, 0.94);
  color: var(--surface);
  padding: 0.9rem 1.6rem;
  border-radius: 12px;
  font-weight: 700;
  font-family: 'JetBrains Mono', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Source Han Sans SC', 'ui-monospace', monospace;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  box-shadow: 0 14px 32px -10px rgba(199, 62, 42, 0.45);
  text-align: center;
  max-width: 80%;
  z-index: 10;
  animation: micro-process-fade-up 0.45s ease-out;
}
@keyframes micro-process-fade-up {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

.micro-process-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.micro-process-pill {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--muted);
  padding: 0.5rem 0.85rem;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  transition: all 0.2s;
}
.micro-process-pill:hover { border-color: var(--fg); color: var(--fg); transform: translateY(-1px); }
.micro-process-pill:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.micro-process-pill.is-active-acid {
  background: #C73E2A; border-color: #C73E2A; color: #FAF1DC;
  box-shadow: 0 3px 10px rgba(199, 62, 42, 0.32);
}
.micro-process-pill.is-active-base {
  background: #1E6B6E; border-color: #1E6B6E; color: #FAF1DC;
  box-shadow: 0 3px 10px rgba(30, 107, 110, 0.32);
}
.micro-process-pill.is-active-conc {
  background: #C88B2A; border-color: #C88B2A; color: #FAF1DC;
  box-shadow: 0 3px 10px rgba(200, 139, 42, 0.32);
}

.micro-process-ctrl-row { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.micro-process-ctrl-row .btn-warm, .micro-process-ctrl-row .btn-tea { flex: 1; padding: 0.55rem 0.5rem; font-size: 0.92rem; }
.btn-warm:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.micro-process-hint-text { font-size: 0.78rem; color: var(--muted); line-height: 1.55; font-style: italic; }

.micro-process-formula-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Source Han Sans SC', 'ui-monospace', monospace;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  padding: 1rem 1.25rem;
  gap: 0.6rem;
  flex-wrap: wrap;
  text-align: center;
}
.micro-process-formula-pre {
  font-size: 0.78rem; color: var(--muted); letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 600;
}
#micro-process-formula-display .acid-part { color: #C73E2A; font-weight: 700; }
#micro-process-formula-display .base-part { color: #1E6B6E; font-weight: 700; }
#micro-process-formula-display .salt-part { color: #C88B2A; font-weight: 700; }
#micro-process-formula-display .water-part { color: #2E5C7A; font-weight: 700; }
#micro-process-formula-display .gas-part { color: #6B9183; font-weight: 700; }
#micro-process-formula-display .plus, #micro-process-formula-display .arrow {
  color: var(--muted); margin: 0 0.4rem; font-weight: 700;
}

.micro-process-tips {
  background: rgba(255, 248, 232, 0.55);
  border: 1px dashed rgba(44, 31, 18, 0.22);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  animation: micro-process-tip-in 0.45s ease-out;
}
@keyframes micro-process-tip-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.micro-process-tips-title {
  font-weight: 700; color: var(--accent);
  margin-bottom: 0.55rem;
  font-family: 'JetBrains Mono', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Source Han Sans SC', 'ui-monospace', monospace;
  font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.micro-process-tips-list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.55rem 1rem;
}
.micro-process-tips-list li {
  font-size: 0.92rem; line-height: 1.55; color: var(--fg);
  padding-left: 1.25rem; position: relative;
}
.micro-process-tips-list li::before {
  content: '▸';
  position: absolute; left: 0; top: 1px;
  color: var(--accent);
  font-family: 'JetBrains Mono', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Source Han Sans SC', 'ui-monospace', monospace;
  font-weight: 700;
}

@media (max-width: 720px) {
  .micro-process-hud { top: 0.55rem; right: 0.55rem; padding: 0.5rem 0.65rem; gap: 0.7rem; }
  .micro-process-hud-value { font-size: 1.05rem; }
  .micro-process-hud-cell { min-width: 48px; }
  .micro-process-hud-label { font-size: 9px; }
}

/* section: equations-and-salt */
/* === equations-and-salt section（text_then_diagram）===
   用 layout-text-then-diagram 排版：header + .text-block + .diagram-wrap
   本 section 的 .diagram-wrap 内含 .eqs-equations-grid (两面板并排) + .eqs-exothermic-tip
*/

/* 让卡片渲染时不依赖骨架 .card，统一颜色 */
.eqs-equations-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 920px) {
  .eqs-equations-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* ===== 方程式面板 ===== */
.eqs-equation-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--warning);
  border-radius: 12px;
  padding: 1.4rem 1.5rem 1.5rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

/* panel header */
.eqs-eq-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}
.eqs-eq-index {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--surface-2);
  color: var(--muted);
  padding: 4px 10px;
  border-radius: 4px;
  flex-shrink: 0;
}
.eqs-eq-title-block {
  flex: 1 1 auto;
  min-width: 0;
}
.eqs-eq-name {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  margin: 0;
  color: var(--fg);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.eqs-eq-sub {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.4;
}
.eqs-badge-coeff,
.eqs-badge-coff {
  background: rgba(200,139,42,0.20);
  color: #8C5F1C;
  padding: 3px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.eqs-badge-coff {
  background: rgba(199,62,42,0.14);
  color: #A82818;
}

/* 方程式 */
.eqs-eq-formula-wrap {
  display: flex;
  justify-content: center;
}
.formula.eqs-eq-formula {
  font-size: 1.15rem;
  padding: 0.75rem 1.25rem;
  background: #FFF8E8;
}
.formula.eqs-general-formula-inner {
  font-size: 1.6rem;
  padding: 0.95rem 2rem;
  background: linear-gradient(135deg, #FFF8E8 0%, #FAF1DC 100%);
  font-weight: 700;
}

/* 颜色图例 */
.eqs-role-legend {
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--muted);
  justify-content: center;
  padding: 0.2rem 0;
}
.eqs-rl-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.eqs-rl-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.eqs-rl-acid { background: #C73E2A; }
.eqs-rl-base { background: #1E6B6E; }
.eqs-rl-salt { background: #C88B2A; }
.eqs-rl-water { background: #5B8AAB; }

/* 离子桥 (SVG container) */
.eqs-ion-bridge-wrap {
  background: linear-gradient(135deg, #FFFCF1 0%, #FAF1DC 100%);
  border: 1px dashed rgba(44,31,18,0.18);
  border-radius: 10px;
  padding: 0.85rem 0.85rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.eqs-bridge-label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fg);
}
.eqs-bridge-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--primary);
}
.eqs-ion-bridge {
  width: 100%;
  height: auto;
  display: block;
  font-family: var(--font-mono);
}

/* 盐注释条 */
.eqs-salt-note {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  background: rgba(200,139,42,0.08);
  border: 1px solid rgba(200,139,42,0.28);
  border-radius: 8px;
  padding: 0.75rem 0.95rem;
  font-size: 0.9rem;
  color: var(--fg);
  line-height: 1.55;
}
.eqs-salt-badge {
  font-family: var(--font-mono);
  font-weight: 700;
  color: #8C5F1C;
  font-size: 0.95rem;
  flex-shrink: 0;
  background: rgba(200,139,42,0.22);
  padding: 3px 9px;
  border-radius: 6px;
  line-height: 1.2;
}
.eqs-salt-name {
  color: var(--warning);
  font-weight: 700;
}

/* 通用公式位置 (top text-block) */
.eqs-general-formula {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.1rem;
  margin-bottom: 0.25rem;
}
.eqs-form-hint {
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
}

/* 放热小提示 */
.eqs-exothermic-tip {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: linear-gradient(135deg, rgba(199,62,42,0.05), rgba(200,139,42,0.10));
  border: 1px solid rgba(199,62,42,0.20);
  border-radius: 12px;
  padding: 1.05rem 1.4rem;
  margin-top: 1.25rem;
}
.eqs-tip-emoji {
  font-size: 1.8rem;
  flex-shrink: 0;
  line-height: 1;
}
.eqs-tip-content {
  flex: 1 1 auto;
  min-width: 0;
}
.eqs-tip-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--fg);
  margin-bottom: 0.3rem;
}
.eqs-tip-body {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.65;
}
.eqs-tip-body b {
  color: var(--primary);
  background: rgba(199,62,42,0.10);
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 700;
}

/* section: indicators-endpoint */
/* ===== indicators-endpoint section 专属样式 ===== */

/* pH 进度面板 */
.indicators-endpoint-ph-panel {
  padding: 1.1rem 1.4rem 1.3rem;
}
.indicators-endpoint-ph-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.indicators-endpoint-ph-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
}
.indicators-endpoint-ph-value {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--fg);
}
.indicators-endpoint-ph-value b {
  font-size: 1.4rem;
  color: var(--primary);
  font-weight: 700;
  margin-left: 0.2rem;
}
.indicators-endpoint-ph-strip-wrap {
  position: relative;
  padding: 0 0.4rem;
}
#indicators-endpoint-ph-marker {
  background: var(--fg);
  width: 5px;
  height: 28px;
  top: -7px;
  border-radius: 3px;
  box-shadow: 0 0 0 2px var(--surface), 0 2px 6px rgba(44,31,18,0.30);
  transition: left 0.25s ease-out;
}
.indicators-endpoint-ph-axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  margin-top: 0.45rem;
  position: relative;
}
.indicators-endpoint-ph-endpoint-tick {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--warning);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.indicators-endpoint-ph-endpoint-tick::before {
  content: '|';
  position: absolute;
  left: 50%;
  top: -16px;
  transform: translateX(-50%);
  color: var(--warning);
  font-size: 14px;
  font-weight: 700;
}

/* 控件按钮组 */
.indicators-endpoint-btn-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.indicators-endpoint-opt-btn {
  flex: 1;
  min-width: 100px;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 0.55rem 0.8rem;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s;
}
.indicators-endpoint-opt-btn:hover {
  background: rgba(44,31,18,0.05);
  transform: translateY(-1px);
}
.indicators-endpoint-opt-btn.is-active {
  background: var(--primary);
  color: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 3px 8px rgba(199,62,42,0.22);
}
.indicators-endpoint-mnemonic {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
  line-height: 1.4;
}
.indicators-endpoint-ctrl {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.indicators-endpoint-readout {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 1.5;
}
.indicators-endpoint-swatch {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 1px solid rgba(44,31,18,0.18);
  background: #3B5BDB;
  vertical-align: middle;
  margin-right: 6px;
  transition: background 0.25s;
}
.indicators-endpoint-endpoint-tag {
  background: rgba(200,139,42,0.14);
  color: #8C5F1C;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 500;
  border: 1px dashed rgba(200,139,42,0.35);
}
.indicators-endpoint-endpoint-tag.is-hidden { display: none; }

/* 思考卡 */
.indicators-endpoint-thinking {
  background: linear-gradient(135deg, #FAF1DC 0%, #F2E2C0 100%);
  border: 1px solid rgba(200,139,42,0.30);
  border-left: 4px solid #C88B2A;
  border-radius: 12px;
  padding: 1.4rem 1.6rem;
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  box-sizing: border-box;
}
.indicators-endpoint-thinking-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
  line-height: 1;
}
.indicators-endpoint-thinking-body { flex: 1; min-width: 0; }
.indicators-endpoint-thinking-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #8C5F1C;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}
.indicators-endpoint-thinking h4 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 0.6rem;
  letter-spacing: -0.01em;
}
.indicators-endpoint-thinking p {
  color: var(--fg);
  line-height: 1.7;
  margin: 0.35rem 0;
  font-size: 0.95rem;
}
.indicators-endpoint-thinking .ion-tag { font-size: 0.85rem; }

@media (max-width: 640px) {
  .indicators-endpoint-ph-header { flex-direction: column; align-items: flex-start; }
  .indicators-endpoint-opt-btn { min-width: 0; }
  .indicators-endpoint-thinking { flex-direction: column; gap: 0.6rem; }
}

/* section: applications */
/* 标题+简介独占整行、全宽显示在顶部，卡片从下一行开始按网格铺开（而不是紧贴标题右侧） */
#applications.layout-cards-grid > .section-header {
  grid-column: 1 / -1;
}

/* ==== Applications 卡片专有样式 ==== */
.applications-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-height: 260px;
  padding: 1.25rem 1.25rem 1.1rem 1.5rem;
  animation: applications-card-in 0.5s ease both;
}
.layout-cards-grid > .applications-card:nth-of-type(1) { animation-delay: 0.0s; }
.layout-cards-grid > .applications-card:nth-of-type(2) { animation-delay: 0.06s; }
.layout-cards-grid > .applications-card:nth-of-type(3) { animation-delay: 0.12s; }
.layout-cards-grid > .applications-card:nth-of-type(4) { animation-delay: 0.18s; }
.layout-cards-grid > .applications-card:nth-of-type(5) { animation-delay: 0.24s; }
.layout-cards-grid > .applications-card:nth-of-type(6) { animation-delay: 0.30s; }
@keyframes applications-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 装饰图标（右上角） */
.applications-icon {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  opacity: 0.78;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.applications-icon-base { color: var(--accent); }
.applications-icon-salt { color: var(--warning); }
.applications-card:hover .applications-icon {
  transform: rotate(-6deg) scale(1.08);
  opacity: 1;
}

/* 场景小徽章（mono 风格） */
.applications-badge {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
  padding-right: 56px; /* 给图标留位置 */
}

/* 标题 */
.applications-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.25;
  margin: 0;
}

/* 描述 */
.applications-desc {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0;
}

/* 术语首次出现的解释标记 */
abbr.term-gloss {
  text-decoration: underline dotted var(--accent);
  text-underline-offset: 3px;
  cursor: help;
  color: var(--fg);
}

/* 公式在卡片中：缩小字号、按片段换行。
   三列网格下每张卡的内容宽只有约 290px，而「场景 04」的方程式
   Na₂CO₃ + 2CH₃COOH = 2CH₃COONa + H₂O + CO₂↑ 一条排不下（实测需要 396px）。
   由于各 <span> 之间没有空白字符，white-space:normal 也找不到断点，长方程式会直接
   冲出卡片、把结尾的 CO₂↑ 裁掉（看起来像公式写错了）。改成 flex + 允许换行后，
   方程式会在片段之间折行，短的一行、长的两行，都完整落在卡片内。 */
.applications-formula {
  margin-top: 0.1rem;
  max-width: 100%;
}
.applications-formula .formula {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  font-size: 0.92rem;
  padding: 0.55rem 0.8rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  word-spacing: 0.04em;
  max-width: 100%;
  box-sizing: border-box;
}

/* 第 6 张卡的指示剂三色（替代公式） */
.applications-indicator {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
  margin-top: 0.1rem;
}
.applications-indi-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.3rem;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.3;
  text-align: center;
  border: 1px solid var(--border);
  color: var(--fg);
  transition: transform 0.2s ease;
}
.applications-indi-cell b {
  font-size: 0.92rem;
  display: block;
  margin-bottom: 0.1rem;
}
.applications-indi-cell.indi-red    { background: rgba(199,62,42,0.12); border-color: rgba(199,62,42,0.30); color: #A82818; }
.applications-indi-cell.indi-purple { background: rgba(167,143,78,0.14); border-color: rgba(167,143,78,0.32); color: #6F5A47; }
.applications-indi-cell.indi-blue   { background: rgba(30,107,110,0.12); border-color: rgba(30,107,110,0.30); color: #1A4F4F; }
.applications-card:hover .applications-indi-cell { transform: translateY(-2px); }

/* 展开/收起按钮（永远贴在卡片底部） */
.applications-toggle {
  align-self: flex-start;
  margin-top: auto;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.32rem 0.75rem;
  font-size: 0.78rem;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--muted);
  cursor: pointer;
  transition: 0.2s;
}
.applications-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(30,107,110,0.05);
}
.applications-card.card-salt .applications-toggle:hover {
  border-color: var(--warning);
  color: var(--warning);
  background: rgba(200,139,42,0.08);
}
.applications-card.is-open .applications-toggle {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(30,107,110,0.08);
}
.applications-card.is-open.card-salt .applications-toggle {
  border-color: var(--warning);
  color: var(--warning);
  background: rgba(200,139,42,0.10);
}

/* 展开内容（用 grid-template-rows 0fr → 1fr 做平滑过渡） */
.applications-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
  overflow: hidden;
}
.applications-card.is-open .applications-detail {
  grid-template-rows: 1fr;
}
.applications-detail-inner {
  min-height: 0;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--border);
  margin-top: 0.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.applications-principle-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
  font-family: var(--font-mono);
  margin: 0;
}
.applications-principle {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--fg);
  margin: 0;
}
.applications-principle .ion-tag {
  font-size: 0.8rem;
  padding: 1px 6px;
}

.applications-fact {
  margin: 0;
  padding: 0.5rem 0.75rem;
  background: rgba(200,139,42,0.08);
  border-left: 2px solid var(--warning);
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.55;
}
.applications-fact b {
  color: #8C5F1C;
  font-weight: 600;
}

/* ==== 自我检验 ====
   section[id="quiz"] 的外壳规则在本文件靠前的位置已经写好（强制单栏、
   内部 .quiz-list 默认是自适应网格）。这里把题目列表改回单栏纵向排列 ——
   每道题的四个选项都比较长，摊成多栏会挤成一团。同选择器、位置靠后，故生效。 */
section[id="quiz"] .quiz-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: 2rem;
}
.quiz-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.15rem 1.25rem;
  box-sizing: border-box;
}
.quiz-q { font-weight: 600; line-height: 1.65; margin-bottom: 0.8rem; font-size: 0.98rem; }
.quiz-q .quiz-no {
  font-family: var(--font-mono);
  color: var(--primary);
  margin-right: 0.5rem;
  font-weight: 700;
}
.quiz-options { display: flex; flex-direction: column; gap: 0.45rem; }
.quiz-opt {
  text-align: left;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.6;
  padding: 0.62rem 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,248,232,0.5);
  color: var(--fg);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.quiz-opt:hover:not(:disabled) { transform: translateX(3px); border-color: rgba(44,31,18,0.24); }
.quiz-opt:disabled { cursor: default; }
.quiz-opt.is-right { background: rgba(30,107,110,0.13); border-color: rgba(30,107,110,0.48); color: #14504F; font-weight: 600; }
.quiz-opt.is-wrong { background: rgba(199,62,42,0.11); border-color: rgba(199,62,42,0.42); color: #8E2218; }
.quiz-explain {
  margin-top: 0.7rem;
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  background: rgba(200,139,42,0.10);
  border-left: 3px solid var(--warning);
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--muted);
  display: none;
}
.quiz-explain.is-on { display: block; }
.quiz-explain strong { color: var(--fg); }

/* 文末相关话题区块（内链） */
.related-topics{margin-top:2.5rem;}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin-top:1rem;}
.related-card{display:block;padding:1rem 1.15rem;background:var(--card,#fff);border:1px solid var(--card-border,rgba(44,31,24,.12));border-radius:var(--radius,12px);text-decoration:none;color:var(--fg,#2C1F18);transition:transform .2s,box-shadow .2s;}
.related-card:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(44,31,24,.14);}
.related-card-tag{display:block;font-size:.78rem;color:var(--muted,#6F5A47);margin-bottom:.35rem;}
.related-card-title{font-weight:600;line-height:1.35;}

/* ==== 优化：Hero 区 SVG 粒子样式 ==== */
.hero-deco-svg circle.hero-particle-acid,
.hero-deco-svg circle.hero-particle-base {
  transition: r 0.3s, opacity 0.3s;
}

/* ==== 优化：概念定义区 hover 提示 ==== */
.concept-definitions-demo-head .concept-definitions-demo-desc {
  position: relative;
  padding-left: 1rem;
}
.concept-definitions-demo-head .concept-definitions-demo-desc::before {
  content: '💡';
  position: absolute;
  left: 0;
  top: 0;
}

/* ==== 优化：应用卡片默认展开态 ==== */
.applications-card.is-open .applications-toggle::after {
  content: ' 收起原理 ▴';
}
.applications-card:not(.is-open) .applications-toggle::after {
  content: ' 查看原理 ▾';
}

/* ==== 优化：小结区域样式 ==== */
.summary-banner {
  max-width: 1100px;
  margin: 2rem auto;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, rgba(199,62,42,0.06) 0%, rgba(30,107,110,0.06) 100%);
  border: 1px solid rgba(44,31,18,0.12);
  border-radius: 12px;
  border-left: 4px solid var(--primary);
}
.summary-banner-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.summary-banner-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.summary-banner-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--fg);
}
.summary-banner-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
}
.summary-banner-text strong {
  color: var(--primary);
}
.summary-banner-text .accent {
  color: var(--accent);
  font-weight: 600;
}


/* ============================================================
   真实案例区（#real-cases）
   结构对齐清洁分类「这些事故曾真实发生」案例栏目；2 列卡片
   ============================================================ */
#real-cases .case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}
#real-cases .case-card {
  display: flex;
  flex-direction: column;
  background: var(--card, #FCF6E7);
  border: 1px solid var(--card-border, rgba(44,31,18,.13));
  border-radius: var(--radius, 14px);
  box-shadow: var(--card-shadow, 0 1px 2px rgba(44,31,18,.05), 0 14px 32px -22px rgba(44,31,18,.40));
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform .25s var(--ease, ease), box-shadow .25s var(--ease, ease), border-color .25s var(--ease, ease);
}
#real-cases .case-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 42px -24px rgba(44,31,18,.55);
  border-color: rgba(199,62,42,.35);
}
#real-cases .case-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .75rem;
}
#real-cases .case-tag {
  font-size: .75rem;
  font-weight: 600;
  padding: .25rem .75rem;
  border-radius: 999px;
  background: rgba(199,62,42,.1);
  color: var(--primary, #C73E2A);
}
#real-cases .case-year { font-size: .8rem; color: var(--muted, #6F5A47); }
#real-cases .case-card h4 { margin: 0 0 .75rem; font-size: 1.02rem; line-height: 1.45; color: var(--fg, #2C1F12); }
#real-cases .case-card p { margin: 0; font-size: .9rem; line-height: 1.65; color: var(--muted, #6F5A47); }
#real-cases .case-link-go {
  margin-top: auto;
  padding-top: .9rem;
  color: var(--primary, #C73E2A);
  font-weight: 700;
  font-size: .85rem;
}
@media (max-width: 768px) {
  #real-cases .case-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   页尾免责声明（.page-disclaimer）
   ⚠️ 三个解读页各自加载的样式表不同（antacid.css / chlorine.css /
   sunscreen.css），没有一份公共表，因此本规则在这三个文件里各存一份。
   视觉与案例页的 .case-disclaimer 保持一致；容器宽度与 .page-header 相同。
   ============================================================ */
.page-disclaimer {
  box-sizing: border-box;
  max-width: 1100px;
  margin: 3rem auto 0;
  padding: 1.4rem 1.5rem 0;
  border-top: 1px solid var(--border, rgba(44, 31, 18, .10));
  font-size: .82rem;
  line-height: 1.75;
  color: var(--muted, #6F5A47);
}