/* 版式：顶栏 + 左侧全书目录 + 中间正文（约 46em 宽）+ 右侧本页目录；窄屏时目录收进抽屉。
   色调取自账本与墨水：偏绿的纸色、深墨绿强调色，讲解框按用途分色。 */
:root {
  --paper: #f5f6f2;
  --surface: #fcfdfb;
  --ink: #1c2420;
  --muted: #5a6761;
  --faint: #8a958f;
  --rule: #dde3dd;
  --accent: #1d6a55;
  --accent-ink: #ffffff;
  --accent-soft: #e1ede7;
  --code-bg: #edf1ec;
  --hl-key: #7b3f9e;
  --hl-str: #2d6b2f;
  --hl-num: #a3570b;
  --hl-com: #7c8a83;
  --hl-fn: #1f5f99;
  --c-plain: #2a5c88;   --c-plain-bg: #e8eff6;
  --c-derive: #8a5810;  --c-derive-bg: #f5eedf;
  --c-finance: #1d6a55; --c-finance-bg: #e1ede7;
  --c-update: #6a4b88;  --c-update-bg: #eee8f4;
  --c-err: #9a3b2f;     --c-err-bg: #f6e6e2;
  --shadow: 0 1px 2px rgba(20, 40, 30, .06), 0 8px 24px rgba(20, 40, 30, .06);
  --f-display: "Noto Serif SC", "Songti SC", "STSong", serif;
  --f-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --top: 56px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111513; --surface: #161b18; --ink: #e2e8e4; --muted: #9ca8a1; --faint: #6f7a74; --rule: #29322d;
    --accent: #6cc3a4; --accent-ink: #0d1a15; --accent-soft: #1a2a23; --code-bg: #1b211e;
    --hl-key: #c99be6; --hl-str: #8fd18f; --hl-num: #e6a865; --hl-com: #74827b; --hl-fn: #7fb6ea;
    --c-plain: #8cb8e3;   --c-plain-bg: #17222d;
    --c-derive: #e0b46a;  --c-derive-bg: #261f12;
    --c-finance: #6cc3a4; --c-finance-bg: #15241e;
    --c-update: #c2a6e3;  --c-update-bg: #211a2b;
    --c-err: #ec9a8c;     --c-err-bg: #2b1814;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #111513; --surface: #161b18; --ink: #e2e8e4; --muted: #9ca8a1; --faint: #6f7a74; --rule: #29322d;
  --accent: #6cc3a4; --accent-ink: #0d1a15; --accent-soft: #1a2a23; --code-bg: #1b211e;
  --hl-key: #c99be6; --hl-str: #8fd18f; --hl-num: #e6a865; --hl-com: #74827b; --hl-fn: #7fb6ea;
  --c-plain: #8cb8e3;   --c-plain-bg: #17222d;
  --c-derive: #e0b46a;  --c-derive-bg: #261f12;
  --c-finance: #6cc3a4; --c-finance-bg: #15241e;
  --c-update: #c2a6e3;  --c-update-bg: #211a2b;
  --c-err: #ec9a8c;     --c-err-bg: #2b1814;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--top) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f-body); font-size: 16px; line-height: 1.8;
}
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 16px; top: 8px; z-index: 50; background: var(--surface); padding: 6px 10px; }

/* 顶栏 */
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
  height: var(--top); display: flex; align-items: center; gap: 12px;
  padding-inline: 16px; background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule);
}
.brand { font-family: var(--f-display); font-weight: 700; font-size: 17px; color: var(--ink); text-decoration: none; white-space: nowrap; letter-spacing: .02em; }
.icon-btn {
  width: 36px; height: 36px; flex: none; border: 1px solid var(--rule); border-radius: 8px;
  background: var(--surface); color: var(--ink); font-size: 16px; cursor: pointer;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
#menuBtn { display: none; }
.search { position: relative; margin-left: auto; width: min(360px, 100%); min-width: 0; }
.search input {
  width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 8px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 14px;
}
.search input:focus { border-color: var(--accent); outline: none; }
.results {
  position: absolute; right: 0; top: 42px; width: min(520px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow); padding: 6px;
}
.results a { display: block; padding: 8px 10px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 14px; line-height: 1.5; }
.results a:hover, .results a.on { background: var(--accent-soft); }
.results small { display: block; color: var(--muted); font-size: 12px; }
.results .empty { padding: 10px; color: var(--muted); font-size: 14px; }

/* 三栏 */
.layout { display: grid; grid-template-columns: 290px minmax(0, 1fr) 230px; min-height: calc(100vh - var(--top)); }
.sidebar {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--top)); height: calc(100vh - var(--top));
  overflow-y: auto; padding: 18px 12px 40px 16px; border-right: 1px solid var(--rule); font-size: 14px; line-height: 1.5;
}
.sidebar .top-links { display: grid; gap: 2px; margin-bottom: 14px; }
.sidebar a { display: block; padding: 5px 8px; border-radius: 6px; color: var(--ink); text-decoration: none; }
.sidebar a:hover { background: var(--accent-soft); }
.sidebar a.cur { background: var(--accent); color: var(--accent-ink); }
.sidebar details { border-top: 1px solid var(--rule); padding-block: 4px; }
.sidebar summary {
  cursor: pointer; padding: 7px 8px; font-weight: 600; list-style: none; border-radius: 6px; display: flex; gap: 6px;
}
.sidebar summary::-webkit-details-marker { display: none; }
.sidebar summary::before { content: "▸"; color: var(--faint); transition: transform .15s; }
.sidebar details[open] > summary::before { transform: rotate(90deg); }
.sidebar summary:hover { background: var(--accent-soft); }
.sidebar details a { padding-left: 22px; color: var(--muted); }
.sidebar details a.cur { color: var(--accent-ink); }
.main { min-width: 0; padding: 32px 40px 80px; }
.doc { max-width: 46em; margin: 0 auto; }
.pagetoc {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--top)); height: calc(100vh - var(--top));
  overflow-y: auto; padding: 28px 16px 40px 8px; font-size: 13px; line-height: 1.5;
}
.pagetoc h2 { font-size: 12px; letter-spacing: .08em; color: var(--faint); margin: 0 0 8px; font-weight: 600; }
.pagetoc a { display: block; padding: 3px 8px; color: var(--muted); text-decoration: none; border-radius: 4px; }
.pagetoc a.l3 { padding-left: 20px; font-size: 12.5px; }
.pagetoc a:hover { color: var(--ink); }
.pagetoc a.on { color: var(--accent); background: var(--accent-soft); }

/* 正文排版 */
.doc h1, .doc h2, .doc h3, .doc h4 { font-family: var(--f-display); line-height: 1.35; text-wrap: balance; color: var(--ink); }
.doc h1 { font-size: 2rem; font-weight: 900; margin: .2em 0 .8em; letter-spacing: .01em; }
.doc h2 { font-size: 1.45rem; font-weight: 700; margin: 2.4em 0 .8em; padding-top: .6em; border-top: 1px solid var(--rule); }
.doc h3 { font-size: 1.15rem; font-weight: 700; margin: 1.9em 0 .6em; }
.doc h4 { font-size: 1rem; margin: 1.5em 0 .5em; }
.doc p, .doc li { font-size: 1.0625rem; }
.doc p { margin: .9em 0; }
.doc ul, .doc ol { padding-left: 1.5em; }
.doc li { margin: .3em 0; }
.doc strong { font-weight: 650; }
.doc hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5em 0; }
.doc img { max-width: 100%; }
.doc blockquote { margin: 1.3em 0; padding: 12px 18px; background: var(--code-bg); border-radius: 10px; color: var(--ink); }
.doc blockquote p:first-child { margin-top: 0; }
.doc blockquote p:last-child { margin-bottom: 0; }

/* 讲解框：标签在上，底色区分用途 */
.callout { position: relative; padding-top: 14px; }
.callout > p:first-child > strong:first-child {
  display: inline-block; font-size: .78rem; letter-spacing: .08em; font-weight: 700;
  padding: 1px 8px; border-radius: 999px; margin-right: 6px; border: 1px solid currentColor;
}
.callout.plain { background: var(--c-plain-bg); } .callout.plain > p:first-child > strong:first-child { color: var(--c-plain); }
.callout.derive { background: var(--c-derive-bg); } .callout.derive > p:first-child > strong:first-child { color: var(--c-derive); }
.callout.finance { background: var(--c-finance-bg); } .callout.finance > p:first-child > strong:first-child { color: var(--c-finance); }
.callout.update, .callout.ashare { background: var(--c-update-bg); }
.callout.update > p:first-child > strong:first-child, .callout.ashare > p:first-child > strong:first-child { color: var(--c-update); }
.callout.erratum, .callout.note { background: var(--c-err-bg); }
.callout.erratum > p:first-child > strong:first-child, .callout.note > p:first-child > strong:first-child { color: var(--c-err); }

/* 表格、代码、公式 */
.table-wrap { overflow-x: auto; margin: 1.3em 0; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); }
.doc table { border-collapse: collapse; width: 100%; font-size: .95rem; font-variant-numeric: tabular-nums; }
.doc th, .doc td { padding: 8px 12px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; line-height: 1.6; }
.doc th { background: var(--code-bg); font-weight: 650; white-space: nowrap; }
.doc tr:last-child td { border-bottom: 0; }
.doc code { font-family: var(--f-mono); font-size: .88em; background: var(--code-bg); padding: .1em .35em; border-radius: 4px; }
.doc pre { position: relative; overflow-x: auto; background: var(--code-bg); border-radius: 10px; padding: 14px 16px; line-height: 1.6; margin: 1.3em 0; }
.doc pre code { background: none; padding: 0; font-size: .85rem; }
.copy {
  position: absolute; top: 8px; right: 8px; font: 12px var(--f-body); padding: 3px 9px; border-radius: 6px;
  border: 1px solid var(--rule); background: var(--surface); color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .15s;
}
.doc pre:hover .copy, .copy:focus { opacity: 1; }
.hljs-keyword, .hljs-built_in, .hljs-literal { color: var(--hl-key); }
.hljs-string { color: var(--hl-str); }
.hljs-number { color: var(--hl-num); }
.hljs-comment { color: var(--hl-com); font-style: italic; }
.hljs-title, .hljs-title.function_ { color: var(--hl-fn); }
.math-display { overflow-x: auto; overflow-y: hidden; margin: 1.1em 0; padding: 2px 0; }
mjx-container { color: var(--ink); }
mjx-container[display="true"] { margin: 0 !important; }
.m mjx-container { display: inline-block; }

/* 翻页 */
.pager { max-width: 46em; margin: 64px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pager a { display: block; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 10px; text-decoration: none; color: var(--ink); background: var(--surface); line-height: 1.5; }
.pager a:hover { border-color: var(--accent); }
.pager span { display: block; font-size: 12px; color: var(--muted); letter-spacing: .06em; }
.pager .next { grid-column: 2; text-align: right; }

/* 首页 */
.hero { padding: 24px 0 8px; }
.eyebrow { font-size: 13px; letter-spacing: .12em; color: var(--accent); font-weight: 600; margin: 0; }
.hero h1 { font-size: clamp(2rem, 5vw, 2.9rem); margin: .25em 0 .4em; border: 0; }
.lede { font-size: 1.12rem; color: var(--muted); max-width: 38em; }
.hero-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.btn { display: inline-block; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); text-decoration: none; font-size: 15px; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.vols { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; margin: 36px 0; }
.vol {
  display: grid; gap: 4px; align-content: start; padding: 16px; border: 1px solid var(--rule); border-radius: 12px;
  background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s;
}
.vol:hover { border-color: var(--accent); transform: translateY(-1px); }
.vol-no { font-size: 12px; letter-spacing: .1em; color: var(--accent); font-weight: 600; }
.vol-name { font-family: var(--f-display); font-size: 1.15rem; font-weight: 700; line-height: 1.4; }
.vol-base { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.vol-meta { font-size: 12.5px; color: var(--faint); margin-top: 6px; font-variant-numeric: tabular-nums; }
.home-readme h2:first-child { margin-top: 1em; }
.notes-list { columns: 2 16em; padding-left: 1.2em; }

/* 窄屏 */
@media (max-width: 1240px) {
  .layout { grid-template-columns: 270px minmax(0, 1fr); }
  .pagetoc { display: none; }
}
@media (max-width: 920px) {
  #menuBtn { display: inline-block; }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; z-index: 40; left: 0; top: calc(env(safe-area-inset-top, 0px) + var(--top)); width: min(320px, 86vw);
    background: var(--paper); transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow);
  }
  body.nav-open .sidebar { transform: none; }
  .main { padding: 22px 16px 60px; }
  .brand { font-size: 15px; }
  .doc h1 { font-size: 1.6rem; }
  .doc p, .doc li { font-size: 1rem; }
}
@media (max-width: 520px) {
  .brand { display: none; }
  .pager { grid-template-columns: 1fr; }
  .pager .next { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }