/* 全站共用：颜色、正文、判词三色。
   首页和每一节课都 link 这一份 —— 词色的定义只能有一处，
   否则「课程里说这个词常用、练习里说它罕见」这种矛盾迟早出现。 */
:root{
  --paper:#fbfaf7; --card:#ffffff; --sunk:#f2f0ec;
  --ink:#1b1d26; --mute:#63667a; --line:#e5e2db;
  --in:#137a4e; --in-bg:#e2f3ea;
  --edge:#8a6314; --edge-bg:#f8efdc;
  --out:#a8362b; --out-bg:#fbeae7;
  --brand:#1b2650; --on-brand:#ffffff;
  --act:#1b2650;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#101219; --card:#181b25; --sunk:#1e222e;
  --ink:#e9eaf0; --mute:#9a9eb4; --line:#272b39;
  --in:#5cc492; --in-bg:#12291f;
  --edge:#d3a550; --edge-bg:#2a2313;
  --out:#e58072; --out-bg:#2c1916;
  --brand:#2b3a75; --on-brand:#ffffff;
  --act:#9fb2ef;
}}
:root[data-theme="dark"]{
  --paper:#101219; --card:#181b25; --sunk:#1e222e;
  --ink:#e9eaf0; --mute:#9a9eb4; --line:#272b39;
  --in:#5cc492; --in-bg:#12291f;
  --edge:#d3a550; --edge-bg:#2a2313;
  --out:#e58072; --out-bg:#2c1916;
  --brand:#2b3a75; --on-brand:#ffffff;
  --act:#9fb2ef;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Nunito,"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.6; -webkit-text-size-adjust:100%;
  padding:0;
}
/* 🔴 这三个类必须写成 .w.in / .w.out / .w.edge，不能只写 .in / .out / .edge。
   裸的 `.out` 是个通用得过头的名字：轮播退场时给 .reel 加了个同名的 `out`，
   于是整块首屏在切换的 360ms 里吃到了「生词红底」，闪一下暗红。
   Bug 本身不难修，难的是它只在动画中间那一瞬间出现。 */
.w{padding:1px 4px; border-radius:2px; white-space:nowrap}
.w.in{background:var(--in-bg); color:var(--in)}
.w.line{padding:3px 6px; white-space:normal; line-height:2.1;
  box-decoration-break:clone; -webkit-box-decoration-break:clone}
.w.edge{background:var(--edge-bg); color:var(--edge)}
.w.out{background:var(--out-bg); color:var(--out); font-weight:700}
footer{color:var(--mute); font-size:13px; border-top:1px solid var(--line); padding-top:16px}
footer a{color:var(--act)}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}