/* chuan.ma — 学习内容页共享样式
工具页（play.html / calculator.html / tiles.html）仍各自内联样式、保持单文件自包含；
学习内容页共用本文件，便于统一演进设计。
两条硬规则（破坏即失去「层次」）：
1. **色板与版式尺度集中维护在 web/tokens.js** —— build.mjs 会把下面的占位展开成 :root{...}。
本文件里不允许出现字面量的字号 / 间距 / 圆角 / 边框宽，一律引用变量。
（本文件单独打开时没有变量定义，属预期：它是构建源，产物是 web/dist/site.css）
2. **同语义元素跨页必须同尺寸**（h1 恒为 --fs-h1，卡片恒为 --r-md …）。
新增元素先选 --fs-* / --sp-* 里已有的角色，不要新造数值 —— 层次来自「只有这几档」。
*/
:root{
--bg:#f5f6f8;
--card:#ffffff;
--ink:#1a1d21;
--sub:#5b6470;
--line:#e4e8ed;
--accent:#1f6feb;
--gold:#c9971f;
--felt:#2f6b4f;
--wan:#c0392b;
--tiao:#1e8e5a;
--tong:#2b6cb0;
--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--cm-tiao-tile:#1c7d4d;
--cm-tiao-red:#c0392b;
--cm-accent-hi:#3d8ef8;
--cm-accent-lo:#1a5fd0;
--cm-tile-top:#fdf9ee;
--cm-tile-mid:#f6efdd;
--cm-tile-bot:#e7dcc3;
--cm-tile-edge:#c6b99c;
--cm-panel-top:#fffefa;
--cm-panel-bot:#f7f2e5;
--cm-panel-edge:#e2dac5;
--cm-felt-hot:#2e7f5b;
--cm-felt-deep:#0a2c1e;
--cm-rim-gold:#d9b45c;
--cm-rim-outer:#061c12;
--cm-shell-bg:#0f1418;
--cm-shell-head:#161c22;
--cm-shell-line:#232b33;
--cm-head-ink:#e9edf2;
--cm-dim:#93a1b0;
--cm-faint:#6b7784;
--cm-panel:#1b2229;
--cm-panel-line:#2c353f;
--cm-panel-ink:#dfe6ee;
--cm-link:#4b9bff;
--cm-link-hi:#8ec2ff;
--cm-btn-hi:#cfe0f0;
--cm-accent-edge:#7ab2ff;
--cm-ok-bg:#14351f;
--cm-ok-ink:#7fd8a5;
--cm-fail-bg:#3b1717;
--cm-fail-ink:#f19a90;
--cm-easy:#0f6e56;
--cm-hard:#a32d2d;
--cm-me:#f6f9ff;
--cm-drawer-bg:rgba(14,20,26,.95);
--cm-drawer-line:#2b343d;
--cm-drawer-ink:#c3cdd8;
--cm-overlay:rgba(8,12,16,.72);
--cm-stage:#0b2a1c;
--fs-meta:12px;
--fs-small:13px;
--fs-dense:14px;
--fs-ui:15px;
--fs-body:16px;
--fs-h3:18px;
--fs-h2:22px;
--fs-h1:28px;
--fs-num:40px;
--sp-hair:2px;
--sp-xs:4px;
--sp-sm:8px;
--sp-md:12px;
--sp-lg:16px;
--sp-xl:20px;
--sp-xxl:24px;
--sp-3xl:32px;
--sp-4xl:40px;
--sp-5xl:64px;
--r-sm:6px;
--r-md:12px;
--r-lg:20px;
--r-full:999px;
--bw-hair:1px;
--bw-rule:2px;
--bw-accent:4px;
--lh-tight:1.25;
--lh-ui:1.5;
--lh-body:1.7;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);
font-size:var(--fs-body);line-height:var(--lh-body);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
-webkit-font-smoothing:antialiased;text-size-adjust:100%}
a{color:var(--accent)}
img,svg,table{max-width:100%}
.wrap{max-width:820px;margin:0 auto;padding:0 var(--sp-xl) var(--sp-5xl)}
/* ── 顶部导航 ──
链接的可点区域用「padding + 等量负 margin」放大到 ≥32px 高：
视觉位置与间距完全不变，但满足触控目标下限（此前只有 22px 高）。 */
/* ── 全站统一顶栏：只有「品牌 + 设置」两件事，其余导航与语言都进设置面板 ──
由 site.js 就地改写页面里的