/* 显影 · 初中 38 课共用课页样式（课件先行批次，见 docs/21 追加四）
   三主题皮肤：data-theme = nuanbai(暖白·默认) / yaolan(曜蓝) / nuanhuang(暖黄)
   红线：纯静态、正文无脚本可读、交互用本地 HTTP 预览；改配色须保住对比（正文/底 ≥ 7:1，辅文 ≥ 4.5:1） */

:root,
html[data-theme="nuanbai"]{
  --bg:#faf7f2; --card:#ffffff; --ink:#2b2723; --ink2:#6f675e;
  --line:#e6ded2; --mark:#f3e3bd; --shadow:0 1px 3px rgba(43,39,35,.06);
  --ask:#2f5fd0; --ask-bg:#eef3fd;
  --make:#b45309; --make-bg:#fdf4e7;
  --drive:#1f7a4d; --drive-bg:#ecf7f0;
  --scroll-shadow:rgba(43,39,35,.24);
  --on-ac:#ffffff; --k4d:#7a3fc1;
  --ok:#1f7a4d; --ok-bg:#ecf7f0; --no:#b3261e; --no-bg:#fdecea;
}
html[data-theme="yaolan"]{
  --bg:#0f1626; --card:#1a2438; --ink:#e9edf6; --ink2:#a8b2c7;
  --line:#2c3a58; --mark:#4a3f14; --shadow:none;
  --ask:#8fb2ff; --ask-bg:#20304f;
  --make:#f2b06c; --make-bg:#3a2c18;
  --drive:#7bd3a4; --drive-bg:#173327;
  --scroll-shadow:rgba(0,0,0,.5);
  --on-ac:#0f1626; --k4d:#c9a6f2;
  --ok:#7bd3a4; --ok-bg:#173327; --no:#ff9d94; --no-bg:#3d1f1c;
}
html[data-theme="nuanhuang"]{
  --bg:#f6ecd4; --card:#fdf7e7; --ink:#332a18; --ink2:#6f6039;
  --line:#e3d5b2; --mark:#f0d98c; --shadow:0 1px 3px rgba(51,42,24,.08);
  --ask:#2853b8; --ask-bg:#e8eefb;
  --make:#a34d04; --make-bg:#f9ecd9;
  --drive:#176b42; --drive-bg:#e4f2e9;
  --scroll-shadow:rgba(51,42,24,.24);
  --on-ac:#ffffff; --k4d:#6b3ba8;
  --ok:#176b42; --ok-bg:#e4f2e9; --no:#a3261e; --no-bg:#f9e4e1;
}

/* 课属主题色：body 上挂 t-ask / t-make / t-drive */
.t-ask{--ac:var(--ask);--ac-bg:var(--ask-bg)}
.t-make{--ac:var(--make);--ac-bg:var(--make-bg)}
.t-drive{--ac:var(--drive);--ac-bg:var(--drive-bg)}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);
  font-family:"Source Han Serif SC","Noto Serif SC","Songti SC",Georgia,serif;
  font-size:16.5px;line-height:1.85;padding:28px 18px 60px;
  transition:background-color .25s,color .25s}
.sans{font-family:"PingFang SC","Microsoft YaHei",-apple-system,sans-serif}
.wrap{max-width:720px;margin:0 auto}

/* ---- 顶栏 ---- */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:18px}
.top-actions{display:flex;align-items:center;gap:8px}
.top-link{display:inline-flex;align-items:center;min-height:44px;padding:4px 9px;color:var(--ink2);text-decoration:none;font-size:13px;border-bottom:1px dashed transparent}
.top-link:hover{color:var(--ac);border-bottom-color:var(--ac)}
.brand{font-weight:700;color:var(--ink);text-decoration:none;font-size:17px;letter-spacing:.08em}
.brand span{font-size:12px;color:var(--ink2);font-weight:400;margin-left:6px}
.topbar-link{display:inline-flex;align-items:center;min-height:44px;padding:4px 9px;color:var(--ink2);
  text-decoration:none;font-size:13px;border-bottom:1px dashed transparent;white-space:nowrap}
.topbar-link:hover{color:var(--ac);border-bottom-color:var(--ac)}
.theme-dots{display:flex;gap:4px}
/* 44px hit area, 24px visual swatch: the control stays easy to tap without
   making the header visually heavy. */
.theme-dot{position:relative;width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
  padding:0;background:transparent!important;touch-action:manipulation}
.theme-dot::before{content:"";position:absolute;inset:9px;border:2px solid var(--line);border-radius:50%}
.theme-dot.d-bai::before{background:#faf7f2}
.theme-dot.d-lan::before{background:#16233f}
.theme-dot.d-huang::before{background:#f0d98c}
.theme-dot.on::before{border-color:var(--ac);box-shadow:0 0 0 2px var(--ac-bg)}

/* Keep keyboard users oriented across every static page. */
:where(a,button,[tabindex="0"]):focus-visible{outline:3px solid var(--ac,var(--ink));outline-offset:3px}
:where(a,button){touch-action:manipulation}
.skip-link{position:absolute;left:12px;top:10px;z-index:10;transform:translateY(-180%);
  display:inline-flex;align-items:center;min-height:44px;padding:6px 12px;background:var(--card);
  color:var(--ac);border:2px solid var(--ac);border-radius:8px;text-decoration:none;font-size:14px}
.skip-link:focus{transform:translateY(0)}

/* ---- 课头 ---- */
.crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--ink2);
  line-height:1.45;margin-bottom:6px}
.crumb a{display:inline-flex;align-items:center;min-height:44px;color:var(--ac);text-decoration:none}
.crumb a:hover{text-decoration:underline}
h1{font-size:27px;line-height:1.45;margin:2px 0 6px}
.lede{color:var(--ink2);font-size:15.5px}
.meta{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px;font-size:12px;color:var(--ink2)}
.meta span{border:1px solid var(--line);border-radius:999px;padding:1px 10px;background:var(--card)}
.hl{background:linear-gradient(transparent 62%,var(--mark) 62%)}

/* ---- 学习证据：原生 details，静态可读且不挤占课程首屏 ---- */
.course-evidence{margin:14px 0 18px;border:1px solid var(--line);border-left:4px solid var(--ac);
  border-radius:8px;background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.course-evidence-summary{display:grid;grid-template-columns:minmax(0,1fr) 36px;align-items:center;
  min-height:68px;padding:9px 11px 9px 14px;cursor:pointer;list-style:none}
.course-evidence-summary::marker{content:""}
.course-evidence-summary::-webkit-details-marker{display:none}
.course-evidence-summary-copy{display:flex;align-items:baseline;gap:9px;min-width:0;flex-wrap:wrap}
.course-evidence-kicker{color:var(--ac);font-size:12px;font-weight:700;white-space:nowrap}
.course-evidence-title{color:var(--ink);font-size:16.5px;font-weight:700;line-height:1.5}
.course-evidence-summary-meta{grid-column:1;margin-top:1px;color:var(--ink2);font-size:12px;line-height:1.5}
.course-evidence-summary::after{content:"+";grid-column:2;grid-row:1/3;display:flex;align-items:center;
  justify-content:center;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;
  color:var(--ac);background:var(--ac-bg);font:700 19px/1 "PingFang SC","Microsoft YaHei",sans-serif}
.course-evidence[open]>.course-evidence-summary{border-bottom:1px solid var(--line)}
.course-evidence[open]>.course-evidence-summary::after{content:"-";border-color:var(--ac)}
.course-evidence-summary:hover .course-evidence-title{color:var(--ac)}
.course-evidence-summary:focus-visible{outline:3px solid var(--ac);outline-offset:-3px}
.course-evidence-body{padding:12px 16px 14px}
.course-evidence-intro{margin:0 0 8px;color:var(--ink2);font-size:13.5px;line-height:1.65}
.course-evidence-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.course-evidence-item{min-width:0;padding:12px 14px 2px 0}
.course-evidence-item:nth-child(2){padding-left:16px;border-left:1px solid var(--line)}
.course-evidence-item:nth-child(3){grid-column:1/-1;display:grid;
  grid-template-columns:90px max-content minmax(0,1fr);align-items:baseline;gap:6px 12px;
  padding:11px 0 0;border-top:1px solid var(--line)}
.course-evidence-item h2{margin:0 0 5px;color:var(--ac);font:700 13px/1.6 "PingFang SC","Microsoft YaHei",-apple-system,sans-serif}
.course-evidence ul{margin:0;padding-left:19px}
.course-evidence li,.course-evidence-item p{margin:2px 0;color:var(--ink);font-size:14px;line-height:1.65}
.course-evidence time{font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-weight:700;color:var(--ink)}
.course-evidence .course-evidence-note{color:var(--ink2);font-size:12.5px}

@media(max-width:600px){
  .course-evidence-summary{padding:9px 9px 9px 12px}
  .course-evidence-body{padding:10px 13px 12px}
  .course-evidence-grid{grid-template-columns:1fr}
  .course-evidence-item,.course-evidence-item:nth-child(2){padding:11px 0;border-left:0}
  .course-evidence-item:nth-child(2),.course-evidence-item:nth-child(3){border-top:1px solid var(--line)}
  .course-evidence-item:nth-child(3){grid-column:auto;grid-template-columns:1fr;gap:0}
}

/* ---- 讲/例/练/卡 四段 ---- */
.sec{margin:24px 0;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:20px 22px;box-shadow:var(--shadow)}
.sec-tag{display:inline-block;font-size:13px;font-weight:700;color:var(--on-ac);
  background:var(--ac);border-radius:6px;padding:1px 10px;letter-spacing:.25em;
  text-indent:.125em;margin-bottom:10px}
.sec h3{font-size:18px;color:var(--ac);margin:14px 0 4px}
.sec h3:first-of-type{margin-top:4px}
.sec p{margin:10px 0}
.sec ul,.sec ol{padding-left:22px;margin:8px 0}
.sec li{margin:5px 0}
.point{border-left:4px solid var(--ac);background:var(--ac-bg);
  border-radius:0 8px 8px 0;padding:10px 14px;margin:14px 0;font-size:15.5px}

/* ---- 表格（高中课量表/对照表用；配色全取现役组合） ---- */
.tablewrap{max-width:100%;margin:12px 0;overflow-x:auto;position:relative;scrollbar-width:thin;
  scroll-padding-inline:12px;overscroll-behavior-inline:contain}
.sec table{width:100%;border-collapse:collapse;margin:0;font-size:14.5px;line-height:1.7}
.sec th{background:var(--ac-bg);color:var(--ink);text-align:left;font-weight:700}
.sec th,.sec td{border:1px solid var(--line);padding:7px 10px;vertical-align:top}

/* ---- 初中站回看（螺旋上升：重合概念链回初中直觉版，docs/22 §〇） ---- */
.lookback{display:block;margin:12px 0 2px;padding:9px 14px;font-size:13.5px;
  background:var(--card);border:1px dashed var(--line);border-radius:10px;
  color:var(--ink2);text-decoration:none}
.lookback b{color:var(--ac)}
.lookback:hover{border-color:var(--ac)}

/* ---- 四元讲解标记（名词/定义/例子/泛化：讲区知识点内部结构，docs/22 §〇 四元讲解法）
     分色＋形状双编码：●名词=问蓝 ■定义=四元紫(--k4d) ▲例子=做琥珀 ◆泛化=驱绿
     （◆＝■转 45°，呼应「泛化＝换个角度」；色弱用户靠形状仍可定位） ---- */
.k4{display:inline-block;font-size:12px;font-weight:700;color:var(--on-ac);
  background:var(--ac);border-radius:6px;padding:1px 8px;margin-right:8px;vertical-align:3px}
.k4::before{font-size:9px;margin-right:4px;vertical-align:1px}
.k4-n{background:var(--ask)}
.k4-n::before{content:"●"}
.k4-d{background:var(--k4d)}
.k4-d::before{content:"■"}
.k4-e{background:var(--make)}
.k4-e::before{content:"▲"}
.k4-g{background:var(--drive)}
.k4-g::before{content:"◆"}

/* ---- 编号例块（例区：例一/例二…——常见用法 ≥2 + 易错 ≥1，配色全取现役组合） ---- */
.eg{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:12px 0;background:var(--card)}
.eg-t{font-size:13px;font-weight:700;color:var(--ac);margin-bottom:6px}

/* ---- 课内结构图（内联 SVG 图解：把「部件-关系」画成机器；随三主题变色） ---- */
.figwrap{margin:12px 0;max-width:100%;overflow-x:auto;position:relative;scrollbar-width:thin;
  scroll-padding-inline:12px;overscroll-behavior-inline:contain}
.fig{display:block;width:100%;min-width:560px;height:auto}
.fig text{font-family:"PingFang SC","Microsoft YaHei",-apple-system,sans-serif}
.fig .fg-box{fill:var(--card);stroke:var(--line);stroke-width:1.5}
.fig .fg-key{stroke:var(--ac);stroke-dasharray:6 4}
.fig .fg-t{fill:var(--ac);font-size:14px;font-weight:700}
.fig .fg-d{fill:var(--ink);font-size:12px}
.fig .fg-s{fill:var(--ink2);font-size:11.5px}
.fig .fg-lb{fill:var(--ink2);font-size:11.5px}
.fig .fg-ln{stroke:var(--ink2);stroke-width:1.4;fill:none}
.fig .fg-ar{fill:var(--ink2)}
.figcap{font-size:13px;color:var(--ink2);margin:6px 0 2px;text-align:center}

/* Large interactive libraries load near the viewport; fixed frames prevent CLS. */
.vendor-frame{position:relative;isolation:isolate}
.vendor-frame[data-vendor-state="loading"]::before{content:"图表准备中…";position:absolute;inset:0;z-index:2;
  display:grid;place-items:center;background:var(--bg);color:var(--ink2);
  font:13px/1.5 "PingFang SC","Microsoft YaHei",sans-serif}
.vendor-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.vendor-status.is-error{position:static;width:auto;height:auto;margin:8px 0;padding:10px 12px;
  overflow:visible;clip:auto;white-space:normal;border:1px dashed var(--ac);border-radius:8px;
  background:var(--ac-bg);color:var(--ink2);text-align:center;font-size:13px}
.vendor-retry{min-height:44px;margin-left:6px;padding:6px 12px;border:1px solid var(--ac);border-radius:7px;
  background:var(--card);color:var(--ac);font:inherit;font-weight:700;cursor:pointer}
.vendor-retry:hover{background:var(--ac);color:var(--on-ac)}

/* JS only shows this guidance when content truly overflows. Edge shadows stay
   attached to the scrollport, so touch users can see whether more remains. */
.tablewrap.can-scroll-left,.figwrap.can-scroll-left{
  box-shadow:inset 18px 0 14px -16px var(--scroll-shadow)}
.tablewrap.can-scroll-right,.figwrap.can-scroll-right{
  box-shadow:inset -18px 0 14px -16px var(--scroll-shadow)}
.tablewrap.can-scroll-left.can-scroll-right,.figwrap.can-scroll-left.can-scroll-right{
  box-shadow:inset 18px 0 14px -16px var(--scroll-shadow),
    inset -18px 0 14px -16px var(--scroll-shadow)}
.scroll-region-hint{display:none}
@media (max-width:720px){
  .scroll-region-hint:not([hidden]){display:block;margin:-7px 0 7px;text-align:right;color:var(--ink2);
    font:12px/1.5 "PingFang SC","Microsoft YaHei",sans-serif}
}

/* ---- 对话示例 ---- */
.chat{margin:12px 0;display:flex;flex-direction:column;gap:8px}
.b{max-width:92%;border:1px solid var(--line);border-radius:10px;
  padding:8px 12px;font-size:15px;background:var(--bg)}
.b .who{display:block;font-size:11.5px;color:var(--ink2);margin-bottom:2px}
.b.me{align-self:flex-end;background:var(--ac-bg);border-color:transparent}
.b.ai{align-self:flex-start}

/* ---- 代码块（2.3/2.4 组网页实操课用） ---- */
pre.code{background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:13px 15px;margin:12px 0;overflow-x:auto;
  font-family:Consolas,"Courier New",monospace;font-size:13.5px;line-height:1.75;color:var(--ink)}
code.inline{font-family:Consolas,"Courier New",monospace;font-size:.92em;
  background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:0 5px}

/* ---- 小测 ---- */
.quiz{border:1px dashed var(--ac);border-radius:10px;padding:14px 16px;margin:14px 0}
.quiz .q{font-weight:700;margin:0}
.opts{display:flex;flex-direction:column;gap:8px;margin:10px 0 4px}
.opts button{font:inherit;font-size:15px;text-align:left;padding:9px 12px;
  border-radius:8px;border:1px solid var(--line);background:var(--card);
  color:var(--ink);cursor:pointer}
.opts button:hover{border-color:var(--ac)}
.quiz.locked .opts button{cursor:default}
.opts button:disabled{opacity:.9}
.opts button.right{border-color:var(--ok);background:var(--ok-bg)}
.opts button.right::after{content:" ✓";color:var(--ok);font-weight:700}
.opts button.wrong{border-color:var(--no);background:var(--no-bg)}
.opts button.wrong::after{content:" ✗";color:var(--no);font-weight:700}
.why{font-size:14.5px;color:var(--ink2);border-top:1px dashed var(--line);
  padding-top:8px;margin-top:8px}
.hidden{display:none}

/* ---- 上手任务 ---- */
.task{background:var(--ac-bg);border-radius:10px;padding:14px 16px;margin:14px 0}
.task-t{font-weight:700;color:var(--ac);font-size:15px;margin-bottom:6px}
.task ol{padding-left:20px}
.task li{margin:5px 0;font-size:15.2px}
.accept{font-size:14.5px;border-top:1px dashed var(--line);margin-top:10px;padding-top:8px}
/* Progressive-enhancement safety baseline: canonical first lessons keep the
   full HTML, and lesson38.js inserts the same block for first-time deep links. */
.safety-baseline{margin:18px 0 14px;padding:16px 16px 14px;border:1px solid var(--line);
  border-left:5px solid var(--make);border-radius:0 6px 6px 0;background:var(--make-bg)}
.safety-baseline .safety-kicker{display:inline-block;margin:0 0 7px;padding:2px 9px;
  border-radius:5px;background:var(--make);color:var(--on-ac);font-size:12px;font-weight:700;line-height:1.7}
.sec .safety-baseline h3{margin:0 0 6px;color:var(--ink);font-size:19px;line-height:1.5}
.safety-baseline .safety-intro{margin:0 0 10px;color:var(--ink2);font-size:14.5px}
.sec .safety-steps{counter-reset:safety-step;list-style:none;margin:10px 0;padding:0}
.sec .safety-steps li{counter-increment:safety-step;display:grid;grid-template-columns:32px minmax(0,1fr);
  gap:10px;margin:0;padding:11px 0;border-top:1px solid var(--line);font-size:15px}
.sec .safety-steps li::before{content:counter(safety-step);display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;margin-top:1px;border:2px solid var(--make);border-radius:50%;color:var(--make);
  background:var(--card);font:700 14px/1 "PingFang SC","Microsoft YaHei",sans-serif}
.safety-steps strong{display:block;color:var(--ink);font-family:"PingFang SC","Microsoft YaHei",sans-serif}
.sec .safety-steps p{margin:3px 0 0;color:var(--ink2);font-size:14px;line-height:1.72}
.safety-baseline .safety-check{margin:12px 0;padding:9px 11px;border-left:3px solid var(--make);
  background:var(--card);font-size:14.5px;line-height:1.7}
.safety-static-note{margin:6px 0 0;color:var(--ink2);font-size:13px}
.safety-baseline.is-enhanced .safety-static-note{display:none}
.safety-ack{display:none;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;
  border:2px solid var(--make);border-radius:7px;background:var(--card);color:var(--make);
  font:700 14px/1.5 "PingFang SC","Microsoft YaHei",sans-serif;cursor:pointer}
.safety-baseline.is-enhanced .safety-ack{display:inline-flex}
.safety-ack:hover:not(:disabled){background:var(--make);color:var(--on-ac)}
.safety-ack:disabled{border-color:var(--ok);background:var(--ok-bg);color:var(--ok);cursor:default}
.safety-status{display:none;min-height:21px;margin:6px 0 0;color:var(--ink2);font-size:12.5px;line-height:1.6}
.safety-baseline.is-enhanced .safety-status{display:block}
.safety-baseline.is-read{border-left-color:var(--ok)}
/* Shared privacy cue shown only on tasks that hand material to an AI tool. */
.safety-strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:-2px 0 10px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink2);font-size:12.5px;line-height:1.45}
.safety-strip strong{color:var(--ac);font-size:13px}
.safety-strip span{display:inline-flex;align-items:center;min-height:28px;padding:2px 8px;border-radius:999px;background:var(--ac-bg);color:var(--ink)}
@media (max-width:520px){.safety-strip{align-items:flex-start}.safety-strip strong{width:100%}.safety-strip span{min-height:30px}}
@media (max-width:520px){
  .safety-baseline{padding:14px 12px 12px}
  .safety-ack{width:100%}
}

/* ---- 实践质量门（lesson38.js 渐进增强） ---- */
.quality-gate{min-width:0;margin:14px 0 0;padding:13px 0 0;border:0;border-top:1px dashed var(--ac)}
.quality-gate legend{width:100%;padding:0 0 3px;color:var(--ac);font-size:15px;font-weight:700}
.quality-gate legend span{margin-left:7px;color:var(--ink2);font-size:12px;font-weight:400}
.quality-gate-note{margin:2px 0 7px;color:var(--ink2);font-size:13px;line-height:1.6}
.quality-check{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:start;gap:7px;
  min-height:44px;padding:8px 2px;border-top:1px solid var(--line);color:var(--ink);font-size:14px;line-height:1.55;cursor:pointer}
.quality-check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--ac)}
.quality-check b{display:inline-block;margin-right:7px;color:var(--ac)}
.quality-status{min-height:22px;margin:6px 0 0;color:var(--ink2);font-size:12.5px;line-height:1.6}
.quality-gate.passed .quality-status{color:var(--ok);font-weight:700}
/* ---- 加练直通（练功区入口进课文：manifest 指派了 drill 的课，练小节尾部一枚按钮） ---- */
.drill-cta{display:flex;align-items:center;gap:10px;margin:14px 0 2px;padding:11px 14px;
  background:var(--ac-bg);border:1px solid var(--ac);border-radius:10px;text-decoration:none}
.dc-tag{flex:none;font-size:12px;font-weight:700;color:var(--on-ac);background:var(--ac);
  border-radius:6px;padding:1px 8px}
.dc-t{flex:1;font-size:15px;font-weight:700;color:var(--ink)}
.dc-go{flex:none;font-size:14px;font-weight:700;color:var(--ac)}
.drill-cta:hover .dc-go{text-decoration:underline}

/* ---- 复习卡 ---- */
.flashcard{perspective:900px;cursor:pointer;margin:14px 0;outline-color:var(--ac)}
.fc-in{position:relative;transform-style:preserve-3d;transition:transform .5s;min-height:140px}
.flashcard.flipped .fc-in{transform:rotateY(180deg)}
.fc-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:10px;padding:16px 18px;display:flex;flex-direction:column;
  justify-content:center;gap:6px}
.fc-front{background:var(--ac);color:var(--on-ac)}
.fc-back{background:var(--card);border:2px solid var(--ac);transform:rotateY(180deg)}
.fc-face small{opacity:.78;font-size:12px}
.fc-face p{font-size:16px;font-weight:600;line-height:1.7}

/* ---- 带走三句话 + 三阶段学习状态 ---- */
.takeaway ul{list-style:none;padding-left:0}
.takeaway li{padding:4px 0 4px 22px;position:relative;font-size:15.2px}
.takeaway li::before{content:"✦";position:absolute;left:2px;color:var(--ac)}
.done-btn{font:inherit;display:block;width:100%;margin:16px 0 4px;padding:11px;
  border-radius:10px;border:2px solid var(--ac);background:var(--card);
  color:var(--ac);font-size:16px;font-weight:700;cursor:pointer}
.done-btn.on{background:var(--ac);color:var(--on-ac)}
.progress-states{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0 0}
.progress-state-btn{font:inherit;min-width:0;min-height:44px;padding:9px 8px;border:1px solid var(--line);
  border-radius:8px;background:var(--card);color:var(--ink2);font-size:14px;font-weight:700;cursor:pointer}
.progress-state-btn:hover{border-color:var(--ac);color:var(--ac)}
.progress-state-btn.reached{border-color:var(--ac);color:var(--ac);background:var(--ac-bg)}
.progress-state-btn.current{background:var(--ac);color:var(--on-ac);box-shadow:0 0 0 1px var(--ac)}
.progress-state-note{min-height:22px;margin:7px 2px 2px;color:var(--ink2);font-size:12.5px;line-height:1.6}

/* ---- 页脚 ---- */
.pagenav{display:flex;justify-content:space-between;gap:10px;margin:26px 0 10px;
  font-size:14.5px;flex-wrap:wrap}
.pagenav a{color:var(--ac);text-decoration:none;border:1px solid var(--line);
  border-radius:8px;padding:8px 14px;background:var(--card)}
.pagenav a:hover{border-color:var(--ac)}
.pagenav .off{color:var(--ink2);padding:8px 2px}
.foot{margin-top:18px;font-size:12px;color:var(--ink2);text-align:center}

/* Kept in the HTML until tree.js replaces it, so a failed script never leaves
   the course portal as an empty shell. */
.tree-fallback{grid-column:1/-1;text-align:center;padding:20px 0;color:var(--ink2);font-size:14px}
.tree-fallback strong{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}
.tree-fallback a{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;color:var(--ac);font-weight:700;text-decoration:none;border-bottom:1px dashed var(--ac)}
.theme-jump{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:14px 0 24px}
.theme-jump a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:6px 12px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--ink);font-size:13px;font-weight:700;text-decoration:none}
.theme-jump a:hover{border-color:var(--ink2);background:var(--bg)}
.branch{scroll-margin-top:16px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

@media (max-width:480px){
  body{padding:18px 12px 50px;font-size:16px}
  .brand span{display:none}
  h1{font-size:23px}
  .sec{padding:16px 14px}
  .b{max-width:100%}
}

@media (max-width:360px){
  .topbar{align-items:flex-start;flex-wrap:wrap}
  .top-actions{width:100%;justify-content:space-between;gap:0}
  .top-actions .top-link{padding-inline:4px}
  .top-actions .theme-dots{margin-left:auto}
}