/* learn.css — 学习页面共享样式：设计 tokens + 版式 + 图示 + 交互组件
   改风格只改 :root 的 tokens；页面自己的 CSS 只用这些 tokens。
   设计原则改编自 teaching-explainer (MIT, Rebecca Fordon) 与 visual-explainer (MIT, Nico Bailon)，见 THIRD-PARTY-NOTICES.md */

/* ---------- 1. Tokens（浅色） ---------- */
:root {
  color-scheme: light;
  --bg: #fbfbf9;
  --surface: #ffffff;
  --band: #f1f2ee;
  --text: #16181d;
  --text-dim: #545b68;      /* 6.6:1 on --bg */
  --line: #e3e4df;          /* 仅装饰分隔线 */
  --line-strong: #8a909b;   /* 有意义的轮廓，≥3:1 */
  --accent: #2f4fb0;        /* 默认 = blue；由 data-accent 覆盖 */
  --accent-ink: #263f8f;
  --accent-tint: #eaeefb;
  --ok: #1b6e3a;   --ok-tint: #e6f3ea;
  --risk: #b42318; --risk-tint: #fbeae8;
  --warn: #8a5a00; --warn-tint: #faf1de;
  --focus: var(--accent);

  --f-sans: "Inter Variable", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --f-serif: "Noto Serif CJK SC", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", Georgia, serif;
  --f-mono: "JetBrains Mono", "Cascadia Code", "SF Mono", ui-monospace, "Noto Sans Mono CJK SC", Menlo, Consolas, monospace;
  --f-display: var(--f-sans);

  --t-label: 13px; --t-small: 14px; --t-body: 17px; --t-h3: 20px; --t-h2: 27px; --t-h1: 40px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px;
  --r-1: 4px; --r-2: 8px;
  --measure: 40em;          /* 中文正文约 38–42 字/行 */
  --wide: 1120px;
  --fast: 120ms; --med: 220ms; --slow: 420ms; --ease: cubic-bezier(.2,.7,.2,1);
  --lift: 0 1px 2px rgb(0 0 0 / .06), 0 4px 12px rgb(0 0 0 / .06);
}

/* 强调色板：每页在 <html data-accent="…"> 选一个（学科默认值见 subjects.json）。浅/深两套均已验证 ≥4.5:1 */
[data-accent="blue"]  { --accent:#2f4fb0; --accent-ink:#263f8f; --accent-tint:#eaeefb; }
[data-accent="sea"]   { --accent:#0b6597; --accent-ink:#09527a; --accent-tint:#e3f1f9; }
[data-accent="teal"]  { --accent:#0f6f68; --accent-ink:#0c5a54; --accent-tint:#ddf1ee; }
[data-accent="forest"]{ --accent:#2e6b3a; --accent-ink:#245530; --accent-tint:#e4f0e6; }
[data-accent="olive"] { --accent:#5c6510; --accent-ink:#49500c; --accent-tint:#eef0d8; }
[data-accent="amber"] { --accent:#8a5300; --accent-ink:#6e4200; --accent-tint:#f8efdc; }
[data-accent="copper"]{ --accent:#9a4614; --accent-ink:#7c3810; --accent-tint:#f8e9df; }
[data-accent="plum"]  { --accent:#7a3863; --accent-ink:#632d51; --accent-tint:#f5e6ef; }
[data-accent="slate"] { --accent:#475569; --accent-ink:#334155; --accent-tint:#eceff3; }

/* ---------- 2. Tokens（深色）：跟随系统，或 data-theme 强制 ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:#121417; --surface:#1a1d22; --band:#171a1e; --text:#e8e9ec; --text-dim:#a3a9b4;
    --line:#2a2e35; --line-strong:#6b7280;
    --accent:#93a7ff; --accent-ink:#b4c2ff; --accent-tint:#1d2340;
    --ok:#6fd394; --ok-tint:#16281d; --risk:#ff8a80; --risk-tint:#2d1716; --warn:#f0c060; --warn-tint:#2a2312;
    --lift: 0 1px 2px rgb(0 0 0 / .4), 0 4px 14px rgb(0 0 0 / .35);
  }
  :root:not([data-theme="light"])[data-accent="blue"], :root:not([data-theme="light"]) [data-accent="blue"] { --accent:#93a7ff; --accent-ink:#b4c2ff; --accent-tint:#1d2340; }
  :root:not([data-theme="light"])[data-accent="sea"], :root:not([data-theme="light"]) [data-accent="sea"] { --accent:#62bff0; --accent-ink:#92d3f5; --accent-tint:#13283a; }
  :root:not([data-theme="light"])[data-accent="teal"], :root:not([data-theme="light"]) [data-accent="teal"] { --accent:#4fd1c5; --accent-ink:#86e0d7; --accent-tint:#10292a; }
  :root:not([data-theme="light"])[data-accent="forest"], :root:not([data-theme="light"]) [data-accent="forest"] { --accent:#7fcf8f; --accent-ink:#a6dfb1; --accent-tint:#15281a; }
  :root:not([data-theme="light"])[data-accent="olive"], :root:not([data-theme="light"]) [data-accent="olive"] { --accent:#c2cf6a; --accent-ink:#d5df95; --accent-tint:#24270f; }
  :root:not([data-theme="light"])[data-accent="amber"], :root:not([data-theme="light"]) [data-accent="amber"] { --accent:#f0b44c; --accent-ink:#f6ca7c; --accent-tint:#2c2413; }
  :root:not([data-theme="light"])[data-accent="copper"], :root:not([data-theme="light"]) [data-accent="copper"] { --accent:#f29a6b; --accent-ink:#f6b896; --accent-tint:#2e1c13; }
  :root:not([data-theme="light"])[data-accent="plum"], :root:not([data-theme="light"]) [data-accent="plum"] { --accent:#e3a2cb; --accent-ink:#edc0dc; --accent-tint:#2c1a26; }
  :root:not([data-theme="light"])[data-accent="slate"], :root:not([data-theme="light"]) [data-accent="slate"] { --accent:#a8b4c6; --accent-ink:#c6cfdc; --accent-tint:#1e232b; }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#121417; --surface:#1a1d22; --band:#171a1e; --text:#e8e9ec; --text-dim:#a3a9b4;
  --line:#2a2e35; --line-strong:#6b7280;
  --accent:#93a7ff; --accent-ink:#b4c2ff; --accent-tint:#1d2340;
  --ok:#6fd394; --ok-tint:#16281d; --risk:#ff8a80; --risk-tint:#2d1716; --warn:#f0c060; --warn-tint:#2a2312;
  --lift: 0 1px 2px rgb(0 0 0 / .4), 0 4px 14px rgb(0 0 0 / .35);
}
:root[data-theme="dark"][data-accent="blue"], :root[data-theme="dark"] [data-accent="blue"] { --accent:#93a7ff; --accent-ink:#b4c2ff; --accent-tint:#1d2340; }
:root[data-theme="dark"][data-accent="sea"], :root[data-theme="dark"] [data-accent="sea"] { --accent:#62bff0; --accent-ink:#92d3f5; --accent-tint:#13283a; }
:root[data-theme="dark"][data-accent="teal"], :root[data-theme="dark"] [data-accent="teal"] { --accent:#4fd1c5; --accent-ink:#86e0d7; --accent-tint:#10292a; }
:root[data-theme="dark"][data-accent="forest"], :root[data-theme="dark"] [data-accent="forest"] { --accent:#7fcf8f; --accent-ink:#a6dfb1; --accent-tint:#15281a; }
:root[data-theme="dark"][data-accent="olive"], :root[data-theme="dark"] [data-accent="olive"] { --accent:#c2cf6a; --accent-ink:#d5df95; --accent-tint:#24270f; }
:root[data-theme="dark"][data-accent="amber"], :root[data-theme="dark"] [data-accent="amber"] { --accent:#f0b44c; --accent-ink:#f6ca7c; --accent-tint:#2c2413; }
:root[data-theme="dark"][data-accent="copper"], :root[data-theme="dark"] [data-accent="copper"] { --accent:#f29a6b; --accent-ink:#f6b896; --accent-tint:#2e1c13; }
:root[data-theme="dark"][data-accent="plum"], :root[data-theme="dark"] [data-accent="plum"] { --accent:#e3a2cb; --accent-ink:#edc0dc; --accent-tint:#2c1a26; }
:root[data-theme="dark"][data-accent="slate"], :root[data-theme="dark"] [data-accent="slate"] { --accent:#a8b4c6; --accent-ink:#c6cfdc; --accent-tint:#1e232b; }

/* 版式风格（register）：paper = 概念/原理；blueprint = 系统/架构/协议 */
[data-register="paper"] { --f-display: var(--f-serif); }
[data-register="blueprint"] .lp-fig .lp-stage {
  --grid: color-mix(in srgb, var(--line) 70%, transparent);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ---------- 3. 基础版式 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: var(--t-body)/1.75 var(--f-sans); font-kerning: normal;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent-ink); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
img, svg, canvas { max-width: 100%; }
code, kbd, samp { font-family: var(--f-mono); font-size: .9em; }
:not(pre) > code { background: var(--band); border: 1px solid var(--line); border-radius: var(--r-1); padding: 0 .3em; overflow-wrap: anywhere; }
pre { font: var(--t-small)/1.6 var(--f-mono); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--s-4); overflow-x: auto; }

.lp-wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--s-4); }
@media (min-width: 720px) { .lp-wrap { padding: 0 var(--s-6); } }

.lp-top { display: flex; align-items: center; gap: var(--s-4); justify-content: space-between; padding: var(--s-4) 0; font-size: var(--t-small); color: var(--text-dim); }
.lp-top a { color: var(--text-dim); text-decoration: none; }
.lp-top a:hover { color: var(--text); }
.lp-theme { font: inherit; color: var(--text-dim); background: none; border: 1px solid var(--line); border-radius: var(--r-1); padding: var(--s-1) var(--s-3); cursor: pointer; min-height: 32px; }

.lp-hero { padding: var(--s-7) 0 var(--s-6); border-bottom: 1px solid var(--line); }
.lp-kicker { font-size: var(--t-small); font-weight: 650; letter-spacing: .04em; color: var(--accent-ink); margin: 0 0 var(--s-3); }
h1, h2, h3 { font-family: var(--f-display); line-height: 1.3; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(30px, 5vw, var(--t-h1)); font-weight: 750; max-width: 22em; }
h2 { font-size: clamp(22px, 3.2vw, var(--t-h2)); font-weight: 700; margin: 0 0 var(--s-4); }
h3 { font-size: var(--t-h3); font-weight: 650; margin: var(--s-6) 0 var(--s-3); }
.lp-lede { font-size: 19px; color: var(--text-dim); max-width: var(--measure); margin: var(--s-4) 0 0; }
.lp-meta { font-size: var(--t-small); color: var(--text-dim); margin-top: var(--s-4); }

main > section { padding: var(--s-8) 0 0; scroll-margin-top: 56px; }
main > section:last-child { padding-bottom: var(--s-8); }
.lp-sec-label { font-size: var(--t-label); font-weight: 650; color: var(--text-dim); letter-spacing: .06em; margin: 0 0 var(--s-2); }
.lp-prose, main > section > p, main > section > ul, main > section > ol { max-width: var(--measure); }
p { margin: 0 0 var(--s-4); }
li { margin: var(--s-1) 0; }
strong { font-weight: 650; }
.lp-band { background: var(--band); margin: var(--s-8) calc(50% - 50vw) 0; padding: var(--s-1) calc(50vw - 50%) var(--s-8); }

/* 目录（4 节以上才用）*/
.lp-toc { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.lp-toc ol { list-style: none; display: flex; gap: var(--s-5); margin: 0 auto; padding: var(--s-3) var(--s-4); max-width: var(--wide); overflow-x: auto; scrollbar-width: none; counter-reset: toc; }
.lp-toc li { margin: 0; white-space: nowrap; font-size: var(--t-small); counter-increment: toc; }
.lp-toc a { color: var(--text-dim); text-decoration: none; }
.lp-toc a::before { content: counter(toc) " "; font-variant-numeric: tabular-nums; opacity: .7; }
.lp-toc a[aria-current="true"] { color: var(--accent-ink); font-weight: 650; }

/* 提示框、芯片、深入阅读 */
.lp-chip { display: inline-flex; align-items: center; gap: var(--s-1); font: 600 var(--t-label)/1.4 var(--f-sans); padding: 2px var(--s-2); border-radius: var(--r-1); background: var(--accent-tint); color: var(--accent-ink); }
.lp-chip[data-st="ok"] { background: var(--ok-tint); color: var(--ok); }
.lp-chip[data-st="risk"] { background: var(--risk-tint); color: var(--risk); }
.lp-chip[data-st="warn"] { background: var(--warn-tint); color: var(--warn); }
.lp-note { max-width: var(--measure); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--s-4); margin: var(--s-5) 0; }
.lp-note > .lp-chip:first-child { margin-bottom: var(--s-2); }
.lp-note p:last-child { margin-bottom: 0; }
details.lp-deep { max-width: var(--measure); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--s-3) 0; margin: var(--s-5) 0; }
details.lp-deep summary { cursor: pointer; font-weight: 600; color: var(--accent-ink); }
details.lp-deep[open] summary { margin-bottom: var(--s-3); }
.lp-remember { max-width: var(--measure); padding-left: 1.4em; }
.lp-remember li { margin: var(--s-2) 0; }
.lp-sources { font-size: var(--t-small); color: var(--text-dim); }
.lp-sources li { overflow-wrap: anywhere; }

/* 关联高亮：正文术语 ↔ 图中元素 */
[data-ref]:not(svg *) { cursor: help; }
span[data-ref] { border-bottom: 1.5px dashed var(--accent); }
span[data-ref].is-lit { background: var(--accent-tint); }

/* 终端记录 */
.lp-term { font: var(--t-small)/1.65 var(--f-mono); background: #15171b; color: #e4e6ea; border-radius: var(--r-2); padding: var(--s-4); overflow-x: auto; margin: var(--s-5) 0; max-width: 100%; }
.lp-term .p { color: #9bd18f; }            /* 提示符所在行 */
.lp-term .p::before { content: "$ "; color: #7d8590; }
.lp-term .p.root::before { content: "# "; }
.lp-term .o { color: #c9ced6; }             /* 输出 */
.lp-term .c { color: #7d8590; }             /* 注释 */
.lp-term mark { background: none; color: #ffd479; font-weight: 600; }
.lp-term > div { white-space: pre; }

/* 双栏：图 + 文字 */
.lp-split { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 900px) { .lp-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

/* ---------- 4. 图示 figure ---------- */
.lp-fig { margin: var(--s-6) 0; }
.lp-fig .lp-stage { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--s-4); }
.lp-fig .lp-stage:has(> svg.lp-wide) { overflow-x: auto; overscroll-behavior-x: contain; }
.lp-fig svg.lp-wide { min-width: 620px; }  /* 宽图在手机上保持可读字号，舞台内横向滚动 */
.lp-fig figcaption { font-size: var(--t-small); color: var(--text-dim); margin-top: var(--s-3); max-width: var(--measure); }
.lp-fig figcaption b { color: var(--text); font-weight: 650; }
.lp-fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.lp-fig svg text { font-family: var(--f-sans); font-size: 15px; fill: var(--text); }
.lp-fig svg .sub { font-size: 13px; fill: var(--text-dim); }
.lp-fig svg .mono { font-family: var(--f-mono); font-size: 14px; }
.lp-fig svg .lp-box { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; }
.lp-fig svg .lp-life { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 4; }
.lp-fig svg .lp-edge { fill: none; stroke: var(--text-dim); stroke-width: 1.75; marker-end: url(#lp-arrow); }
.lp-fig svg .lp-edge.async { stroke-dasharray: 6 5; }
.lp-fig svg .lp-bnd { fill: none; stroke: var(--line-strong); stroke-dasharray: 5 4; }
.lp-fig svg .lp-state { fill: var(--band); stroke: var(--line-strong); }
.lp-fig svg .is-key, .lp-fig svg .is-now.lp-edge { stroke: var(--accent); stroke-width: 2.75; marker-end: url(#lp-arrow-accent); }
.lp-fig svg .lp-box.is-key, .lp-fig svg .lp-state.is-now { stroke: var(--accent); stroke-width: 2.5; fill: var(--accent-tint); }
.lp-fig svg text.is-now, .lp-fig svg .is-now text { fill: var(--accent-ink); font-weight: 650; }
.lp-fig svg .lp-tok { fill: var(--accent); }
.lp-fig svg .is-lit { stroke: var(--accent) !important; }
.lp-fig svg text.is-lit, .lp-fig svg tspan.is-lit { fill: var(--accent-ink); stroke: none !important; font-weight: 650; }
.lp-fig svg .ok { stroke: var(--ok); } .lp-fig svg .risk { stroke: var(--risk); }
.lp-fig svg text.ok { fill: var(--ok); stroke: none; } .lp-fig svg text.risk { fill: var(--risk); stroke: none; }
/* 编号标注 ① ② */
.lp-fig svg .lp-co circle { fill: var(--text); }
.lp-fig svg .lp-co text { fill: var(--bg); font-size: 12px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
/* 尺寸线 */
.lp-fig svg .lp-dim path { stroke: var(--text-dim); stroke-width: 1; fill: none; }
.lp-fig svg .lp-dim text { font-size: 13px; fill: var(--text-dim); text-anchor: middle; }

/* 分步播放器（data-lp="steps"） */
.lp-ready[data-lp="steps"] [data-s] { transition: opacity var(--med) var(--ease); }
.lp-ready[data-lp="steps"] [data-s].is-off { opacity: 0; pointer-events: none; }
.lp-ready[data-lp="steps"] [data-s].is-past:not(.lp-at) { opacity: .55; }
.lp-ready[data-lp="steps"] .lp-tok[data-s]:not(.is-now) { opacity: 0; }
.lp-cap { list-style: none; padding: 0; margin: var(--s-3) 0 0; max-width: var(--measure); }
.lp-cap li { margin: 0; }
.lp-ready .lp-cap li:not(.is-now) { display: none; }
.lp-cap .lp-ask { display: block; margin-top: var(--s-2); color: var(--accent-ink); font-weight: 600; }
.lp-player { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.lp-player input[type=range] { flex: 1 1 160px; accent-color: var(--accent); min-height: 32px; }
.lp-count { font: var(--t-small)/1 var(--f-mono); color: var(--text-dim); font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: right; }

/* 交互图（live figure）控件 */
.lp-controls { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); margin: var(--s-4) 0; font-size: var(--t-small); }
.lp-controls label { display: grid; gap: var(--s-1); min-width: 200px; }
.lp-controls input[type=range] { accent-color: var(--accent); }
.lp-out { font-variant-numeric: tabular-nums; font-family: var(--f-mono); color: var(--accent-ink); font-weight: 600; }

/* 3D / canvas 容器 */
.lp-canvas { position: relative; aspect-ratio: 16 / 9; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; }
.lp-canvas canvas { display: block; width: 100% !important; height: 100% !important; }
.lp-canvas .lp-reset { position: absolute; right: var(--s-3); top: var(--s-3); }

/* ---------- 5. 按钮 ---------- */
.lp-btn { font: 600 var(--t-small)/1.2 var(--f-sans); min-height: 40px; min-width: 40px; padding: var(--s-2) var(--s-4); border-radius: var(--r-1); cursor: pointer;
  border: 1.5px solid var(--accent); background: var(--accent); color: var(--bg); transition: filter var(--fast); }
.lp-btn:hover { filter: brightness(1.08); }
.lp-btn.ghost { background: transparent; color: var(--accent-ink); border-color: var(--line-strong); }
.lp-btn[disabled] { opacity: .45; cursor: not-allowed; filter: none; }

/* ---------- 6. 练习组件（共用外壳）---------- */
.lp-task { max-width: var(--measure); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-2); padding: var(--s-5); margin: var(--s-6) 0; }
.lp-task-kind { display: block; font: 650 var(--t-label)/1.4 var(--f-sans); color: var(--accent-ink); letter-spacing: .06em; margin-bottom: var(--s-2); }
.lp-q { font-weight: 600; margin: 0 0 var(--s-4); }
.lp-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.lp-fb { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-1); background: var(--band); }
.lp-fb:empty { display: none; }
.lp-fb.is-ok { background: var(--ok-tint); }
.lp-fb.is-ok::before { content: "对。"; font-weight: 700; color: var(--ok); }
.lp-fb.is-no { background: var(--risk-tint); }
.lp-fb.is-no::before { content: "还不对。"; font-weight: 700; color: var(--risk); }
.lp-why, .lp-answer, .lp-model { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border-left: 3px solid var(--accent); background: var(--accent-tint); border-radius: 0 var(--r-1) var(--r-1) 0; }
.lp-why > :last-child, .lp-answer > :last-child, .lp-model > :last-child { margin-bottom: 0; }
.lp-ready .lp-why[hidden], .lp-ready .lp-answer[hidden], .lp-ready .lp-model[hidden], .lp-hint[hidden] { display: none; }
.lp-input, .lp-task textarea { display: block; width: 100%; min-height: 88px; font: inherit; color: var(--text); background: var(--bg); padding: var(--s-2) var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-1); }

/* 选择题选项 */
.lp-opt { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3); margin: var(--s-2) 0; border: 1px solid var(--line); border-radius: var(--r-1); cursor: pointer; min-height: 44px; }
.lp-opt:hover { border-color: var(--line-strong); }
.lp-opt input { margin-top: .45em; accent-color: var(--accent); flex: none; width: 18px; height: 18px; }
.lp-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
.lp-opt.is-right { border-color: var(--ok); background: var(--ok-tint); }
.lp-opt.is-wrong { border-color: var(--risk); }

/* 填空 */
.lp-blank { font: 600 1em/1.4 var(--f-mono); width: 7em; padding: 1px var(--s-2); margin: 0 2px; color: var(--accent-ink); background: var(--bg); border: none; border-bottom: 2px solid var(--line-strong); border-radius: 0; }
.lp-blank.is-ok { border-color: var(--ok); color: var(--ok); }
.lp-blank.is-no { border-color: var(--risk); color: var(--risk); }

/* 分类 */
.lp-items { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.lp-items li { margin: 0; }
.lp-item { font: 500 var(--t-small)/1.3 var(--f-sans); padding: var(--s-2) var(--s-3); min-height: 40px; border: 1.5px solid var(--line-strong); border-radius: var(--r-1); background: var(--bg); color: var(--text); cursor: pointer; }
.lp-item[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-tint); outline: 2px solid var(--accent); outline-offset: 1px; }
.lp-item.is-done { border-color: var(--ok); color: var(--ok); cursor: default; }
.lp-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); margin-top: var(--s-4); }
.lp-cat { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-2); text-align: left; font: 650 var(--t-small)/1.3 var(--f-sans); color: var(--text); padding: var(--s-3); min-height: 88px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-2); background: var(--band); cursor: pointer; }
.lp-cat:hover { border-color: var(--accent); }
.lp-cat .lp-bin { display: flex; flex-wrap: wrap; gap: var(--s-1); font-weight: 500; }
.lp-cat .lp-bin span { font-size: var(--t-label); padding: 1px var(--s-2); border-radius: var(--r-1); background: var(--ok-tint); color: var(--ok); }

/* 自我解释：要点自评 */
.lp-points { list-style: none; padding: 0; margin: var(--s-3) 0 0; }
.lp-points label { display: flex; gap: var(--s-2); align-items: baseline; cursor: pointer; }
.lp-points input { accent-color: var(--accent); }

.lp-tally { font: 600 var(--t-small)/1 var(--f-mono); color: var(--text-dim); font-variant-numeric: tabular-nums; }

.lp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- 7. 无障碍与打印 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .lp-toc, .lp-player, .lp-theme, .lp-actions, .lp-controls { display: none !important; }
  .lp-ready [data-s].is-off { opacity: 1 !important; }
  .lp-ready .lp-cap li { display: list-item !important; }
  .lp-ready .lp-why[hidden], .lp-ready .lp-answer[hidden], .lp-ready .lp-model[hidden] { display: block !important; }
}