/* Hallmark · v2.0.0 · theme: custom · idea: "macOS 应用壳，课本在左，实验在右，动效可中断" · vibe: "冷静 克制 顺手 桌面优先" · paper: macOS window white over gray stage · display: system SF / PingFang · accent: system blue · hero: 全宽实验舞台与右侧读数，侧栏只做导航 · posture: light/system grotesk chromatic-blue · axes: light/system-grotesk/chromatic-blue */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V5 · weakest: E, 分段滑块弹簧为手写积分，桌面侧栏收起不做宽度动画以保性能 */
/* Hallmark · dismissed 29 · checked toolbar and sidebar: translucent blur is the macOS material the brief demands, content scrolls under the toolbar and text stays legible via vibrancy tokens */
/* Hallmark · dismissed 49 · sidebar tree rows are single line with ellipsis, long chapter names truncate instead of wrapping, zero horizontal overflow verified headless */

:root{
  --bg:#ffffff; --stage:#f5f5f7;
  --label:#1c1c1e; --secondary:rgba(60,60,67,.78); --tertiary:rgba(60,60,67,.3);
  --sep:rgba(60,60,67,.15); --fill:rgba(120,120,128,.12); --seg-thumb:#ffffff;
  --accent:#0066d6; --on-accent:#f7faff; --link:#007aff; --exam-mark:#0058c7;
  --toolbar:rgba(255,255,255,.72); --toolbar-border:rgba(60,60,67,.18);
  --sidebar:rgba(246,246,246,.8); --sidebar-border:rgba(60,60,67,.12);
  --sel-bg:#0066d6; --sel-label:#f7faff; --sel-sub:rgba(247,250,255,.75);
  --dim:rgba(0,0,0,.25); --focus:#0066d6;
  --seg-shadow:0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04);
  --water:rgba(10,132,255,.26); --water-edge:rgba(10,132,255,.5);
  --bubble:rgba(10,132,255,.55); --steam:rgba(120,120,128,.4);
  --glass:rgba(60,60,67,.4); --plate:#d8d8dc; --plate-edge:rgba(60,60,67,.25);
  --mercury:#ff3b30; --heat:#ff9500; --purple:#af52de;
  --oil:rgba(214,150,38,.5); --oil-edge:rgba(176,116,20,.82);
  --sim-paper-top:#fbf9f4; --sim-paper-bottom:#f1eee6;
  --sim-ink:#221f1a; --sim-muted:#6d685e; --sim-hair:rgba(34,31,26,.16);
  --sim-card:rgba(255,253,247,.82); --sim-accent-ink:#a95f1b;
  --font-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Helvetica Neue",sans-serif;
  --space-2:2px; --space-4:4px; --space-6:6px; --space-8:8px; --space-10:10px;
  --space-12:12px; --space-14:14px; --space-16:16px; --space-20:20px;
  --space-24:24px; --space-32:32px; --space-48:48px;
  --radius-thumb:8px; --radius-stage:12px; --radius-btn:8px; --radius-pill:999px;
  --glass-sheen:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 62%);
  --glass-edge:rgba(255,255,255,.55);
  --elev-1:0 1px 2px rgba(0,0,0,.05), 0 10px 28px rgba(0,0,0,.05);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --toolbar-h:52px; --sidebar-w:264px;
}
/* 旧实验仿真的颜色别名：原有脚本读 --sim-*，这里映到新令牌。
 * 用 var() 引用，深浅色随上面令牌自动翻转，仿真代码不用改。 */
:root{
  --sim-canvas:var(--stage); --sim-face:var(--fill);
  --sim-edge:var(--secondary); --sim-ground:var(--secondary);
  --sim-tick:var(--tertiary); --sim-label:var(--secondary);
  --sim-cart:var(--accent); --sim-wheel:var(--label); --sim-guide:var(--accent);
  --sim-block:var(--fill); --sim-water:var(--water); --sim-brine:var(--water-edge);
  --sim-blood:var(--mercury); --sim-purple:var(--purple);
}
:root[data-theme="dark"]{
  --bg:#1e1e1e; --stage:#2c2c2e;
  --label:#f2f2f7; --secondary:rgba(235,235,245,.6); --tertiary:rgba(235,235,245,.3);
  --sep:rgba(84,84,88,.5); --fill:rgba(120,120,128,.24); --seg-thumb:#636366;
  --accent:#0071e3; --on-accent:#f7faff; --link:#0a84ff; --exam-mark:#6cb6ff;
  --toolbar:rgba(30,30,30,.72); --toolbar-border:rgba(84,84,88,.6);
  --sidebar:rgba(40,40,42,.8); --sidebar-border:rgba(84,84,88,.4);
  --sel-bg:#0071e3; --sel-label:#f7faff; --sel-sub:rgba(247,250,255,.75);
  --dim:rgba(0,0,0,.5); --focus:#0071e3;
  --water:rgba(100,170,255,.28); --water-edge:rgba(100,170,255,.55);
  --bubble:rgba(140,190,255,.6); --steam:rgba(235,235,245,.35);
  --glass:rgba(235,235,245,.45); --plate:#3a3a3c; --plate-edge:rgba(235,235,245,.25);
  --mercury:#ff453a; --heat:#ff9f0a; --purple:#bf5af2;
  --sim-paper-top:#2a2925; --sim-paper-bottom:#232220;
  --sim-ink:#ece7dc; --sim-muted:#a8a196; --sim-hair:rgba(236,231,220,.16);
  --sim-card:rgba(255,253,247,.06); --sim-accent-ink:#d59a5b;
  --seg-shadow:0 1px 3px rgba(0,0,0,.5), 0 0 0 .5px rgba(235,235,245,.1);
  --glass-sheen:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 62%);
  --glass-edge:rgba(255,255,255,.14);
  --elev-1:0 1px 2px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.3);
}
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"]{
    --bg:#1e1e1e; --stage:#2c2c2e;
    --label:#f2f2f7; --secondary:rgba(235,235,245,.6); --tertiary:rgba(235,235,245,.3);
    --sep:rgba(84,84,88,.5); --fill:rgba(120,120,128,.24); --seg-thumb:#636366;
    --accent:#0071e3; --on-accent:#f7faff; --link:#0a84ff; --exam-mark:#6cb6ff;
    --toolbar:rgba(30,30,30,.72); --toolbar-border:rgba(84,84,88,.6);
    --sidebar:rgba(40,40,42,.8); --sidebar-border:rgba(84,84,88,.4);
    --sel-bg:#0071e3; --sel-label:#f7faff; --sel-sub:rgba(247,250,255,.75);
    --dim:rgba(0,0,0,.5); --focus:#0071e3;
    --water:rgba(100,170,255,.28); --water-edge:rgba(100,170,255,.55);
    --bubble:rgba(140,190,255,.6); --steam:rgba(235,235,245,.35);
    --glass:rgba(235,235,245,.45); --plate:#3a3a3c; --plate-edge:rgba(235,235,245,.25);
    --mercury:#ff453a; --heat:#ff9f0a; --purple:#bf5af2;
    --oil:rgba(240,190,90,.5); --oil-edge:rgba(252,208,126,.82);
    --sim-paper-top:#2a2925; --sim-paper-bottom:#232220;
    --sim-ink:#ece7dc; --sim-muted:#a8a196; --sim-hair:rgba(236,231,220,.16);
    --sim-card:rgba(255,253,247,.06); --sim-accent-ink:#d59a5b;
    --seg-shadow:0 1px 3px rgba(0,0,0,.5), 0 0 0 .5px rgba(235,235,245,.1);
    --glass-sheen:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 62%);
    --glass-edge:rgba(255,255,255,.14);
    --elev-1:0 1px 2px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.3);
  }
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ overflow-x:clip; }
body{
  margin:0; background:var(--bg); color:var(--label);
  font-family:var(--font-body); font-size:15px; line-height:1.47;
  -webkit-font-smoothing:antialiased;
}
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--radius-thumb); }
[hidden]{ display:none !important; }

/* ---------- 应用壳：工具栏 + 侧栏 + 主区 ---------- */
.app{
  display:grid; height:100vh; height:100dvh;
  grid-template-rows:var(--toolbar-h) minmax(0,1fr);
  grid-template-columns:var(--sidebar-w) minmax(0,1fr);
  grid-template-areas:"toolbar toolbar" "sidebar main";
}
.app.sidebar-collapsed{ --sidebar-w:0px; }
.app.sidebar-collapsed .sidebar{ border-right:0; visibility:hidden; }

.toolbar{
  grid-area:toolbar; z-index:30;
  display:flex; align-items:center; gap:var(--space-8);
  padding:0 var(--space-12);
  background:var(--toolbar);
  background-image:var(--glass-sheen);
  -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--toolbar-border);
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.toolbar-title{ font-size:15px; font-weight:600; white-space:nowrap; color:inherit; text-decoration:none; }
.toolbar-badge{
  font-size:11px; font-weight:500; color:var(--secondary);
  border:1px solid var(--sep); border-radius:999px;
  padding:var(--space-2) var(--space-8); white-space:nowrap;
}
.toolbar-spacer{ flex:1; }
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; color:var(--secondary); border-radius:50%;
  background:color-mix(in srgb, var(--fill) 55%, transparent);
  border:1px solid transparent;
  transition:background-color .18s var(--ease-out), color .18s var(--ease-out),
    border-color .18s var(--ease-out), transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.icon-btn svg{ width:18px; height:18px; }
.icon-btn:active{ background:var(--fill); transform:scale(.94); }

.sidebar{
  grid-area:sidebar; min-width:0; overflow:hidden;
  background:var(--sidebar);
  -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%);
  border-right:1px solid var(--sidebar-border);
}
.sidebar-inner{ width:264px; height:100%; display:flex; flex-direction:column; }
.search-wrap{ padding:var(--space-12) var(--space-12) var(--space-8); }
.search{
  width:100%; height:30px; padding:0 var(--space-10);
  font:inherit; font-size:13px; color:var(--label);
  background:var(--fill); border:0; border-radius:var(--radius-thumb);
}
.search::placeholder{ color:var(--tertiary); }
.tree{ flex:1; overflow-y:auto; padding:0 var(--space-8) var(--space-12); }
.tree-group{ margin:0 0 var(--space-4); }
.tree-head{
  font-size:11px; font-weight:600; letter-spacing:.02em; color:var(--secondary);
  padding:var(--space-10) var(--space-10) var(--space-4);
}
.tree-item{
  display:flex; align-items:center; gap:var(--space-8); width:100%;
  min-height:32px; padding:var(--space-4) var(--space-10); text-align:left;
  border-radius:var(--radius-thumb); font-size:13px;
  color:var(--label); text-decoration:none;
  transition:background-color .15s ease-out;
}
.tree-item + .tree-item{ margin-top:var(--space-2); }
.tree-item:focus-visible{ outline-offset:-2px; }
.tree-title{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tree-badge{ flex-shrink:0; font-size:11px; color:var(--tertiary); }
.tree-item[aria-disabled="true"]{ cursor:default; color:var(--secondary); }
.tree-item[aria-selected="true"]{ background:var(--sel-bg); color:var(--sel-label); }
.tree-item[aria-selected="true"] .tree-badge{ color:var(--sel-sub); }
.tree-empty{ padding:var(--space-12) var(--space-10); font-size:13px; color:var(--secondary); }
.sidebar-foot{
  padding:var(--space-10) var(--space-14); border-top:1px solid var(--sidebar-border);
  font-size:11px; line-height:1.5; color:var(--secondary);
}
.sidebar-foot a{ color:var(--link); text-decoration:none; }

.main{ grid-area:main; min-width:0; overflow-y:auto; background:var(--bg); }
.main-inner{ max-width:1080px; margin:0 auto; padding:var(--space-24) var(--space-32) var(--space-48); }
.crumb{ margin:0 0 var(--space-6); font-size:13px; color:var(--secondary); }
.crumb a{ color:var(--label); text-decoration:none; border-bottom:1px solid transparent; transition:color .15s, border-color .15s; }
.crumb a:hover{ color:var(--accent); border-bottom-color:currentColor; }
.crumb a:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:2px; }
.crumb-sep{ margin:0 6px; color:var(--tertiary); }
.crumb [aria-current]{ color:var(--secondary); }
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-24); flex-wrap:wrap; margin-bottom:var(--space-16); }
.page-title{
  font-family:var(--font-body); font-size:28px; line-height:1.15;
  font-weight:600; letter-spacing:-.015em; margin:0;
  overflow-wrap:break-word; min-width:0;
}
.page-sub{ margin:var(--space-4) 0 0; font-size:13px; color:var(--secondary); }
.page-flag{
  display:inline-block; margin-left:var(--space-8); vertical-align:middle;
  font-family:var(--font-body); font-size:12px; font-weight:500; line-height:1.5;
  letter-spacing:0; color:var(--link);
  border:1px solid currentColor; border-radius:999px;
  padding:1px var(--space-8); white-space:nowrap;
}
.readout-wrap{ display:flex; flex-direction:column; align-items:flex-end; gap:var(--space-6); flex-shrink:0; }
.readout{ display:flex; align-items:flex-end; gap:var(--space-20); }
.stat{ display:flex; flex-direction:column; gap:var(--space-2); }
.stat-label{ font-size:11px; font-weight:600; letter-spacing:.02em; color:var(--secondary); }
.stat-value{ font-size:20px; font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums; }
.stat-value.is-live{ color:var(--secondary); }
.stat--temp .stat-value{ font-size:34px; font-weight:600; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; }
.stat-unit{ font-size:12px; font-weight:500; color:var(--secondary); margin-left:var(--space-4); }
.stat--temp .stat-unit{ font-size:18px; font-weight:600; }
.stat--state .stat-value{ font-size:15px; line-height:1.2; }
/* 三项都是文字时（没有数值主读数），统一 20px，别把「较大」这类词做成大标题 */
.readout--words .stat--temp .stat-value,
.readout--words .stat--state .stat-value{ font-size:20px; font-weight:600; letter-spacing:0; line-height:1.2; }
.readout-note{ margin:0; font-size:11px; color:var(--secondary); }

.stage{
  background:var(--stage); border:1px solid var(--sep); border-radius:var(--radius-stage);
  overflow:hidden; margin:0 0 var(--space-16);
  box-shadow:var(--elev-1);
}
.stage canvas{ display:block; width:100%; height:clamp(340px, 46vh, 520px); }

.control-bar{ display:flex; align-items:center; gap:var(--space-16) var(--space-20); flex-wrap:wrap; margin-bottom:var(--space-10); }
.control-kicker{ flex-shrink:0; font-size:11px; font-weight:600; letter-spacing:.02em; color:var(--secondary); }
.seg-field{ display:flex; align-items:center; gap:var(--space-10); }
.seg-label{ font-size:14px; font-weight:500; color:var(--label); flex-shrink:0; }
.var-note{ font-size:12px; color:var(--secondary); flex-shrink:0; }
.seg{ position:relative; display:flex; background:var(--fill); border-radius:var(--radius-pill); padding:var(--space-2); width:190px; }
.seg--wide{ width:230px; }
.seg-thumb{
  position:absolute; top:var(--space-2); bottom:var(--space-2); left:0;
  background:var(--seg-thumb); border-radius:var(--radius-pill);
  box-shadow:var(--seg-shadow);
  will-change:transform;
}
.seg button{
  position:relative; z-index:1; flex:1; min-height:30px;
  font-size:13px; font-weight:500; border-radius:var(--radius-pill);
  transition:color .18s var(--ease-out);
}
.seg button[aria-checked="true"]{ font-weight:600; }
.primary{
  margin-left:auto; min-height:36px; padding:0 var(--space-20);
  background:var(--accent); color:var(--on-accent);
  background-image:linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 58%);
  border-radius:var(--radius-pill); font-size:14px; font-weight:600; white-space:nowrap;
  box-shadow:0 1px 1px rgba(0,0,0,.08),
    0 8px 18px color-mix(in srgb, var(--accent) 18%, transparent),
    inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .18s var(--ease-out), opacity .15s ease-out,
    background-color .15s ease-out, box-shadow .18s var(--ease-out);
}
.primary:active{ transform:scale(.96); }
.primary:disabled{ background:var(--fill); background-image:none; color:var(--tertiary); box-shadow:none; cursor:default; }
.primary:disabled:active{ transform:none; }
.status{ margin:0 0 var(--space-24); font-size:13px; color:var(--secondary); min-height:20px; }

.obs-head{ font-size:17px; font-weight:600; margin:0 0 var(--space-10); }
.obs-list{ border:1px solid var(--sep); border-radius:var(--radius-stage); overflow:hidden; }
.obs-row{ display:flex; gap:var(--space-16); padding:var(--space-12) var(--space-16); }
.obs-row + .obs-row{ border-top:1px solid var(--sep); }
.obs-term{ flex-shrink:0; width:88px; font-size:14px; font-weight:600; }
.obs-desc{ margin:0; font-size:14px; color:var(--secondary); }
.footnote{ margin:var(--space-20) 0 0; font-size:12px; color:var(--secondary); max-width:72ch; }
.footnote a{ color:var(--link); text-decoration:none; }
/* 文末回顾图版：1600×900 离线图，深色模式下略压亮度 */
.plate{ margin:var(--space-32) 0 0; }
.plate img{
  display:block; width:100%; height:auto;
  border:1px solid var(--sep); border-radius:var(--radius-stage);
  background:var(--stage);
}
.plate figcaption{ margin-top:var(--space-10); font-size:12px; line-height:1.6; color:var(--secondary); }
:root[data-theme="dark"] .plate img{ filter:brightness(.9) contrast(.97); }
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] .plate img{ filter:brightness(.9) contrast(.97); }
}

.exam{ margin:var(--space-8) 0 0; }
.exam + .obs-head{ margin-top:var(--space-32); }
.exam-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-16); flex-wrap:wrap; margin-bottom:var(--space-12); }
.exam-title{ margin:0; font-size:17px; font-weight:600; }
.exam-sub{ font-size:12px; color:var(--secondary); }
.exam-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-12); }
.exam-card{ padding:var(--space-14) var(--space-16); background:var(--stage); color:var(--label); border:1px solid var(--sep); border-radius:var(--radius-stage); }
.exam-card h3{ margin:0 0 var(--space-4); font-size:14px; font-weight:600; }
.exam-card p{ margin:0; font-size:13px; line-height:1.55; color:var(--secondary); }
/* 正文重点：关键条件、结论和观察到的结果加粗提亮；记忆句里的核心判断用强调色 */
.exam-card p b,
.obs-desc b{ color:var(--label); font-weight:600; }
.mnemonic p b{ color:var(--exam-mark); font-weight:600; }
/* 关键公式：一条浅底的公式线，数字等宽；只给每页最该记住的那一条，正文里的公式保持普通文字 */
.formula{
  display:inline-block;
  padding:2px var(--space-8);
  border-radius:6px;
  background:var(--fill);
  color:var(--label);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  line-height:1.4;
}
.mnemonic{
  display:flex; align-items:baseline; gap:var(--space-12);
  margin:0 0 var(--space-12); padding:var(--space-12) var(--space-16);
  background:var(--stage);
  border:1px solid var(--sep);
  border-radius:var(--radius-stage);
}
.mnemonic-label{ flex-shrink:0; font-size:11px; font-weight:600; color:var(--exam-mark); }
.mnemonic p{ margin:0; font-size:14px; }
.exam-trap{ margin:var(--space-10) 0 0; font-size:13px; color:var(--secondary); }
.exam-trap b{ margin-right:var(--space-6); color:var(--label); font-weight:600; }

/* 学习三件套：先看画面、再猜、看结论、进实验；改条件再判断；讲给家长听。
 * .gate 包住猜题，实验主体 .experiment 先隐藏；选中 radio 露出结论和进入按钮，
 * 勾选进入后才显示主体。纯 CSS（:has()）；没有 JS 时 gate 隐藏、正文照常可读。 */
.gate{ margin:0 0 var(--space-12); }
.guess{
  position:relative;
  margin:0; padding:var(--space-16) var(--space-20);
  background:var(--bg); border:1px solid var(--sep); border-radius:var(--radius-stage);
  box-shadow:var(--elev-1);
}
.gate .guess__q{ font-size:15px; }
.guess__q{ margin:0; font-size:13px; font-weight:600; line-height:1.5; color:var(--label); }
.guess__kicker{ margin-right:var(--space-6); color:var(--exam-mark); }
.guess__opts{ display:flex; flex-wrap:wrap; gap:var(--space-8); margin-top:var(--space-10); }
.guess__opt{ position:relative; }
.guess__opt input{ position:absolute; width:1px; height:1px; opacity:0; }
.guess__opt span{
  display:inline-flex; align-items:center; min-height:40px; padding:0 var(--space-14);
  background:var(--stage); border:1px solid var(--sep); border-radius:999px;
  font-size:13px; color:var(--label); cursor:pointer;
  transition:background-color .18s var(--ease-out), border-color .18s var(--ease-out),
    color .18s var(--ease-out), transform .18s var(--ease-out);
}
.guess__opt span:active{ transform:scale(.97); }
.guess__opt input:checked + span{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.guess__opt input:focus-visible + span{ outline:2px solid var(--focus); outline-offset:2px; }
.guess__hint{ margin:var(--space-8) 0 0; font-size:12px; color:var(--secondary); }
.guess__answer{
  display:none;
  margin:var(--space-12) 0 0; padding:var(--space-10) var(--space-12);
  background:var(--stage); border-radius:var(--radius-btn);
  font-size:13px; line-height:1.6; color:var(--secondary);
}
.guess__answer-label{
  display:inline-block; margin-right:var(--space-6);
  font-size:11px; font-weight:600; letter-spacing:.02em; color:var(--exam-mark);
}
.guess__enter-input{ position:absolute; width:1px; height:1px; opacity:0; visibility:hidden; }
.guess__enter{
  display:none; align-items:center; justify-content:center;
  min-height:44px; margin-top:var(--space-12); padding:0 var(--space-20);
  background:var(--accent); color:var(--on-accent); border-radius:999px;
  font-size:14px; font-weight:600; cursor:pointer;
  transition:transform .18s var(--ease-out), background-color .15s ease-out;
}
.guess__enter:active{ transform:scale(.96); }
.guess:has(input[type="radio"]:checked) .guess__enter-input{ visibility:visible; }
.guess:has(:checked) .guess__answer{ display:block; }
.guess:has(:checked) .guess__hint{ display:none; }
.guess:has(:checked) .guess__enter{ display:inline-flex; }
.guess__enter-input:focus-visible + .guess__enter{ outline:2px solid var(--focus); outline-offset:2px; }

/* 未作答时只留画面和猜题；进入后才露出分镜、控件和要点 */
html.js .main-inner:has(.gate) .experiment{ display:none; }
html.js .main-inner:has(#enter-experiment:checked) .experiment{ display:block; }
html.js .main-inner:has(#enter-experiment:checked) .gate{ display:none; }
html:not(.js) .gate{ display:none; }

.tell{
  margin:var(--space-24) 0 0; padding:var(--space-14) var(--space-16);
  background:var(--stage); border:1px solid var(--sep); border-radius:var(--radius-stage);
}
.tell__title{ margin:0 0 var(--space-6); font-size:13px; font-weight:600; color:var(--label); }
.tell__q{ margin:0; font-size:13px; line-height:1.6; color:var(--secondary); }
.tell details{ margin-top:var(--space-8); font-size:13px; line-height:1.6; color:var(--secondary); }
.tell summary{ display:flex; align-items:center; min-height:32px; font-size:13px; font-weight:600; color:var(--label); cursor:pointer; list-style:none; }
.tell summary::-webkit-details-marker{ display:none; }
.tell summary::after{
  content:""; width:6px; height:6px; margin-left:var(--space-8);
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
}
.tell details[open] summary::after{ transform:rotate(-135deg); }
.tell details p{ margin:var(--space-6) 0 0; }

/* 正文扩写：目的、做法、边界三段 */
.explain{ margin-top:var(--space-32); padding:var(--space-20); background:var(--stage); border:1px solid var(--sep); border-radius:var(--radius-stage); }
.explain h2{ margin:0 0 var(--space-12); font-size:17px; font-weight:600; color:var(--label); }
.explain p{ margin:0 0 var(--space-10); max-width:72ch; font-size:14px; line-height:1.72; color:var(--secondary); }
.explain p:last-child{ margin-bottom:0; }
.explain b{ color:var(--label); font-weight:600; }

/* 内链：上一篇 / 下一篇 / 本册目录 */
.related{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-8); margin-top:var(--space-24); padding-top:var(--space-16); border-top:1px solid var(--sep); }
.related__label{ margin-inline-end:var(--space-4); font-size:12px; font-weight:600; color:var(--secondary); }
.related a{ display:inline-flex; align-items:center; min-height:40px; padding:0 var(--space-12); border:1px solid var(--sep); border-radius:var(--radius-pill); font-size:13px; color:var(--label); text-decoration:none; transition:background-color .15s, border-color .15s; }
.related a:hover{ background:var(--fill); border-color:var(--tertiary); }
.related a:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

.scrim{ display:none; }
html:not(.js) #sidebar-toggle,
html:not(.js) #theme-btn,
html:not(.js) .search-wrap{ display:none; }
noscript p{ max-width:1080px; margin:var(--space-16) auto; padding:0 var(--space-32); color:var(--secondary); font-size:13px; }

/* ---------- hover 只在真桌面生效 ---------- */
@media (hover:hover){
  .icon-btn:hover{
    background:var(--seg-thumb); color:var(--label); border-color:var(--sep);
    transform:translateY(-1px); box-shadow:var(--seg-shadow);
  }
  .tree-item:not([aria-disabled="true"]):not([aria-selected="true"]):hover{ background:var(--fill); }
  .primary:not(:disabled):hover{
    background-color:color-mix(in srgb, var(--accent) 88%, var(--label));
    transform:translateY(-1px);
    box-shadow:0 2px 2px rgba(0,0,0,.08),
      0 12px 26px color-mix(in srgb, var(--accent) 28%, transparent),
      inset 0 1px 0 rgba(255,255,255,.34);
  }
  .sidebar-foot a:hover{ text-decoration:underline; }
  .footnote a:hover{ text-decoration:underline; }
  .guess__opt span:hover{ border-color:var(--secondary); }
  .guess__opt input:checked + span:hover{ border-color:var(--accent); }
  .guess__enter:hover{ background:color-mix(in srgb, var(--accent) 88%, var(--label)); transform:translateY(-1px); }
}

/* ---------- 窄屏：侧栏收为抽屉 ---------- */
@media (max-width:900px){
  .app{ grid-template-columns:minmax(0,1fr); grid-template-areas:"toolbar" "main"; }
  .js .sidebar{
    position:fixed; top:var(--toolbar-h); bottom:0; left:0; z-index:40;
    width:280px; transform:translateX(-100%); visibility:hidden;
    transition:transform .3s cubic-bezier(.32,.72,0,1), visibility 0s linear .3s;
    box-shadow:none;
  }
  .js .app.drawer-open .sidebar{
    transform:translateX(0); visibility:visible;
    transition:transform .3s cubic-bezier(.32,.72,0,1);
  }
  .js .scrim{
    display:block; position:fixed; inset:var(--toolbar-h) 0 0 0; z-index:35;
    background:var(--dim); opacity:0; pointer-events:none;
    transition:opacity .3s ease-out;
  }
  .js .app.drawer-open .scrim{ opacity:1; pointer-events:auto; }
  .sidebar-inner{ width:280px; }
  .main-inner{ padding:var(--space-20) var(--space-16) var(--space-48); }
  .page-head{ align-items:flex-start; }
  .readout{ gap:var(--space-16); }
  .primary{ margin-left:0; width:100%; min-height:44px; }
  .control-bar{ gap:var(--space-12); }
  .seg-field{ flex:1 1 auto; }
  .seg{ flex:1; width:auto; max-width:220px; }
  html:not(.js) .app{
    height:auto; min-height:100vh; min-height:100dvh;
    grid-template-rows:var(--toolbar-h) auto auto;
    grid-template-areas:"toolbar" "sidebar" "main";
  }
  html:not(.js) .sidebar{ border-right:0; border-bottom:1px solid var(--sidebar-border); }
  html:not(.js) .sidebar-inner{ width:auto; height:auto; }
  html:not(.js) .main{ overflow:visible; }
}
@media (max-width:700px){
  .exam-grid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:480px){
  .stage canvas{ height:300px; }
  .stage--story canvas{ height:clamp(200px, 32vh, 280px); }
  .obs-row{ flex-direction:column; gap:var(--space-4); }
  .obs-term{ width:auto; }
  .toolbar-badge{ display:none; }
  .readout-wrap{ width:100%; align-items:flex-start; }
  .readout{ justify-content:flex-start; gap:var(--space-14); }
  .stat--temp .stat-value{ font-size:30px; }
  .stat-value{ font-size:17px; }
  .stat--state .stat-value{ font-size:14px; }
  .control-kicker,.var-note{ display:none; }
  .seg-field{ width:100%; }
  .seg{ flex:1; width:auto; max-width:none; }
  .mnemonic{ flex-direction:column; align-items:flex-start; gap:var(--space-4); }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ transition:none !important; animation:none !important; }
}
@media (prefers-reduced-transparency: reduce){
  .toolbar,.sidebar,.mastbar{ background:var(--bg); -webkit-backdrop-filter:none; backdrop-filter:none; }
}

/* 分镜试点 · 只服务 story 页 */
.story-caption{
  margin:var(--space-12) 0 var(--space-10);
  min-height:2.9em;
}
.story-caption-step{
  display:block; font-size:11px; font-weight:600; letter-spacing:.04em;
  color:var(--secondary); font-variant-numeric:tabular-nums;
}
.story-caption-text{
  display:block; margin-top:2px;
  font-size:15px; line-height:1.55; color:var(--label);
}
.story{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--space-8) var(--space-12); margin-bottom:var(--space-12);
}
.story-play{
  display:inline-flex; align-items:center; justify-content:center;
  gap:6px; min-width:84px; width:auto; min-height:34px; margin-left:0;
  padding:0 var(--space-14); font-weight:500;
}
.story-play-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:12px; height:12px;
}
.story-icon{ display:none; width:12px; height:12px; }
.story-play[data-state="play"] .story-icon--play,
.story-play[data-state="pause"] .story-icon--pause,
.story-play[data-state="replay"] .story-icon--replay{ display:block; }
.story-nav{ display:flex; gap:var(--space-4); }
.story-step{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border:0; border-radius:50%;
  background:var(--fill); color:var(--label); cursor:pointer;
  transition:background-color .18s var(--ease-out), transform .18s var(--ease-out);
}
.story-step svg{ width:14px; height:14px; }
.story-step:hover{ background:var(--sep); }
.story-step:active{ transform:scale(.92); }
.story-tabs{
  display:flex; gap:2px; padding:2px; max-width:100%;
  background:var(--fill); border-radius:var(--radius-pill);
  overflow-x:auto; scrollbar-width:none;
}
.story-tabs::-webkit-scrollbar{ display:none; }
.story-tab{
  border:0; background:transparent; color:var(--secondary);
  padding:6px 10px; border-radius:var(--radius-pill);
  font:inherit; font-size:13px; white-space:nowrap; cursor:pointer;
  transition:background-color .18s var(--ease-out), color .18s var(--ease-out),
    box-shadow .18s var(--ease-out), transform .18s var(--ease-out);
}
.story-tab:active{ transform:scale(.97); }
.story-tab::before{
  content:attr(data-step); margin-right:6px;
  font-size:10px; font-weight:600; color:var(--secondary);
  font-variant-numeric:tabular-nums;
}
.story-tab:hover{ color:var(--label); }
.story-tab[aria-current="step"]{
  background:var(--seg-thumb); color:var(--label);
  box-shadow:var(--seg-shadow); font-weight:600;
}
.story-tab[aria-current="step"]::before{ color:var(--accent); }
.story-progress{
  display:flex; align-items:center; gap:var(--space-10);
  flex:1 1 240px; min-width:180px;
}
.story-range{
  -webkit-appearance:none; appearance:none;
  flex:1; min-width:96px; height:24px; margin:0;
  background:transparent; cursor:pointer; --p:0%;
}
.story-range::-webkit-slider-runnable-track{
  height:4px; border-radius:2px;
  background:linear-gradient(to right, var(--accent) 0 var(--p), var(--fill) var(--p) 100%);
}
.story-range::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; margin-top:-6px;
  border-radius:50%; background:var(--seg-thumb);
  border:.5px solid var(--sep); box-shadow:var(--seg-shadow);
}
.story-range::-moz-range-track{
  height:4px; border-radius:2px;
  background:linear-gradient(to right, var(--accent) 0 var(--p), var(--fill) var(--p) 100%);
}
.story-range::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%;
  background:var(--seg-thumb); border:.5px solid var(--sep); box-shadow:var(--seg-shadow);
}
.story-readout{
  font-size:12px; color:var(--secondary); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
@media (max-width:640px){
  .story-play,.story-step{ min-height:44px; }
  .story-play{ padding:0 var(--space-16); }
  .story-step{ width:44px; height:44px; }
  .story-tab{ min-height:44px; display:inline-flex; align-items:center; }
  .story-range{ height:44px; }
  .story-tabs{ order:2; flex:1 0 100%; }
  .story-progress{ order:3; flex:1 0 100%; }
  .story-caption-text{ font-size:15px; }
}
@media (max-width:400px){
  .story-tabs{ gap:0; }
  .story-tab{ padding:6px 8px; font-size:12px; }
  .story-tab::before{ margin-right:4px; }
}
html:not(.js) .story{ display:none; }