/* 主题色沿用 xilin.dev 的 logo：蓝 #007cff → 紫 #802aca → 红 #ff2847 */
:root {
  --primary: #007cff;
  --accent: #ff2847;
  --violet: #802aca;

  --bg: #f4f6fa;
  --surface: #ffffff;
  --text: #10131a;
  --muted: #6a7387;
  --line: #e3e7ef;
  --code-bg: #f6f8fc;
  --shadow: 0 1px 2px rgba(16,19,26,.06), 0 8px 24px rgba(16,19,26,.06);
  --radius: 16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1017; --surface: #161a24; --text: #eef1f7;
    --muted: #8b94a8; --line: #262c3a; --code-bg: #10141d;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  }
}

/* ---- 中西混排 ----
   笔记是德语材料里夹中文提示。想让中文走宋体而拉丁字母不受影响，唯一干净的办法
   是用 unicode-range 把字形族**限制在中日韩区段**：这样即使把它排在字体栈最前面，
   拉丁字母也不会被它接管，会落到后面那一档去。
   （试过改成「把中文名排在西文之后靠顺序回退」，在 Windows 上完全无效：
   system-ui 经由系统字体链接把汉字提前截走了，实测四档行高全是 127。）

   **@font-face 本身由 fonts/build-fonts.py 生成，内联在 <head> 里，不在这个文件。**
   原因有两条：
   - src 里除了 local() 还要接 url()。Safari 为防字体指纹追踪限制了 local()，
     iOS 上只写 local() 的话四档全部解析失败 —— 就是「电脑上能换、手机上没反应」。
     local() 在前、url() 在后：电脑命中本机字体不下载，iOS 落到下载。
   - 字体文件名带内容哈希，而这个文件是静态的，部署脚本的 sed 只碰 public/ 来的 .js，
     没法往里注版本号。

:root {
  --cjk-font: "memo-cjk-song";
  --latin-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* 用 <html> 上的类切换，而不是把字体名字直接存进 localStorage 再写进 style。
   存进去的字符串会被原样塞进 CSS 属性值，没有必要开这个口子；
   存一个键、在这里映射成具体字体，取值范围就是封闭的。 */
html.cjk-song      { --cjk-font: "memo-cjk-song"; }
html.cjk-fangsong  { --cjk-font: "memo-cjk-fangsong"; }
html.cjk-kai       { --cjk-font: "memo-cjk-kai"; }
html.cjk-hei       { --cjk-font: "memo-cjk-hei"; }
/* 兜底：真实字体名排在**整个栈的最后**。
   Safari 为防字体指纹追踪限制了 @font-face 里的 local()，上面那几族在 iOS 上
   解析不出来。这条尾巴在系统字体不抢汉字的平台上还有机会命中，命不中也无损。
   注意必须排在 --latin-font 之后，否则中文字体会连拉丁字母一起接管。 */
:root { --cjk-namen: "Songti SC", SimSun, STSong, "Noto Serif SC", serif; }
html.cjk-song     { --cjk-namen: "Songti SC", SimSun, STSong, "Noto Serif SC", serif; }
html.cjk-fangsong { --cjk-namen: FangSong, STFangsong, "FangSong_GB2312", "Kaiti SC", serif; }
html.cjk-kai      { --cjk-namen: KaiTi, STKaiti, "Kaiti SC", KaiTi_GB2312, serif; }
html.cjk-hei      { --cjk-namen: "PingFang SC", "Microsoft YaHei", "Heiti SC", "Noto Sans SC", sans-serif; }
html.latin-sans    { --latin-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
html.latin-serif   { --latin-font: "Iowan Old Style", Georgia, "Times New Roman", serif; }

* { box-sizing: border-box; }
/* 带 display 的类会盖掉浏览器默认的 [hidden]{display:none}，兜一层 */
[hidden] { display: none !important; }

body {
  margin: 0; background: var(--bg); color: var(--text);
  font-size: 16px;
  line-height: 1.65;
  font-family: var(--cjk-font), var(--latin-font), var(--cjk-namen);
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  -webkit-text-size-adjust: 100%;
}

.view { max-width: 820px; margin: 0 auto; padding: 16px; }
.note-view { max-width: 1060px; }

.topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.brand { width: 28px; height: 28px; flex: none; }
.topbar h1 { margin: 0; font-size: 19px; font-weight: 700; flex: 1; }
.count { font-size: 13px; color: var(--muted); }
/* 窄屏上顶栏一行放不下「标题 + 计数 + Abmelden」（德语词比原来的「退出」长得多，
   实测 375px 上按钮被挤到了第二行）。让**计数**独占一行，按钮留在第一行 ——
   按钮是操作，计数只是信息。 */
@media (max-width: 480px) {
  .topbar .count { order: 3; flex-basis: 100%; }
  .topbar .logout { order: 2; }
}
.home-link { font-size: 14px; color: var(--primary); text-decoration: none; font-weight: 600; }
.home-link:hover { text-decoration: underline; }
.spacer { flex: 1; }
/* 顶栏中间的回首页。左上角现在是「返回上一层」，所以首页需要自己的入口。
   比左上角弱一档：那个是主要动作（多数时候你想退回刚才的文件夹）。 */
.top-home {
  font-size: 13px; color: var(--muted); text-decoration: none;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line);
  white-space: nowrap;
}
.top-home:hover { color: var(--primary); border-color: var(--primary); }
/* 左右两块等宽，中间那个才落在顶栏正中。
   min-width: 0 是必须的：flex 项默认 min-width:auto，长文件夹名会把自己的格子撑开，
   中间链接跟着被推偏 —— 正是这套布局要解决的问题。 */
.top-side { flex: 1 1 0; min-width: 0; display: flex; align-items: center; }
.top-side-end { justify-content: flex-end; }
.top-side .home-link {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.logout {
  font-size: 13px; color: var(--muted); text-decoration: none; flex: none;
  padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px;
}
.logout:hover { color: var(--accent); border-color: var(--accent); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px; margin-bottom: 12px;
}
.hint { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.empty { color: var(--muted); font-size: 14px; padding: 6px 0; margin: 0; }

kbd {
  font: inherit; font-size: 11px; padding: 1px 5px;
  border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 4px; background: var(--bg);
}

/* ---- 搜索 ---- */
.search-card { padding-bottom: 12px; }
.search {
  width: 100%; padding: 12px 14px; font: inherit; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px; outline: none;
}
.search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,124,255,.16); }
.search:disabled { opacity: .5; }

/* ---- 笔记列表 ---- */
.notes { list-style: none; margin: 0; padding: 0; }
.note {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 10px 0; border-top: 1px solid var(--line);
}
.note:first-child { border-top: 0; }
.note-link { color: var(--text); text-decoration: none; font-weight: 600; flex: 1 1 auto; }
.note-link:hover { color: var(--primary); }
.note-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); flex: none; }
.note-meta time { font-variant-numeric: tabular-nums; }

.tag {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent);
}

/* 文件名开头的序号。书里的标题自带层级编号（I./a./B.），每层各自从头开始，
   看不出全局次序 —— 这个数字才是读者判断「第几篇」的依据。
   等宽数字，竖着看是对齐的一列。 */
.nr {
  display: inline-block; min-width: 2.2em; margin-right: .5em;
  color: var(--muted); font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.note-head h1 .nr { min-width: auto; margin-right: .4em; font-size: .8em; }

/* ---- 排序开关 ----
   HTML 里带 hidden，由 search.js 摘掉。无 JS 时点了没反应的按钮比没有更糟。 */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.seg {
  display: flex; overflow: hidden;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--code-bg);
}
.seg button {
  appearance: none; border: 0; background: transparent; font: inherit;
  font-size: 12px; color: var(--muted);
  padding: 5px 12px; cursor: pointer; white-space: nowrap;
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover { color: var(--primary); }
.seg button[aria-pressed="true"] {
  background: var(--surface); color: var(--primary); font-weight: 600;
}
.seg button:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
/* 触摸屏上 30px 高够不着。按指针类型判断，不按宽度 —— 窄窗口的鼠标用户不需要加高。 */
@media (pointer: coarse) {
  .seg button { min-height: 40px; }
}

/* 决定每行露哪个 <time>。
   按时间排却只显示日期的话，同一天的多篇会写着相同日期、排成看不出理由的顺序 —— 像坏了。 */
.sort-mtime .t-date,
.sort-name .t-time { display: none; }

/* ---- 文件夹树 ---- */
.tree { list-style: none; margin: 0; padding: 0; }
.tree > li { border-top: 1px solid var(--line); }
.tree > li:first-child { border-top: 0; }

.folder > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 0; cursor: pointer;
  list-style: none;                 /* 去掉原生三角，右边那个 +/- 就是它 */
}
.folder > summary::-webkit-details-marker { display: none; }

/* 一行两个操作，所以悬停反馈必须分开：
   停在名字上 → 名字变色（点了会**进入**）；停在行的其余部分 → 只有 +/- 变色（点了是**展开**）。
   整行一起高亮会让人以为点哪儿都一样。 */
/* 纵向内边距放在链接上而不是 summary 上：让链接**占满整行高度**。
   放在 summary 上的话，手机上链接只有 26px 高而行有 46px —— 点在文字上下的空白
   会落到 summary 上变成展开。「进入」是主操作，不该因为差几像素变成预览。 */
.folder-link {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  color: var(--text); text-decoration: none;
}
.folder-name { flex: 1 1 auto; font-weight: 700; overflow-wrap: anywhere; }
.folder-link:hover .folder-name { color: var(--primary); }
.folder-link:hover .folder-count { color: var(--primary); border-color: var(--primary); }
.folder-link:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 8px;
}
.folder-count {
  flex: none; font-size: 11px; color: var(--muted);
  padding: 1px 8px; border-radius: 999px;
  background: var(--code-bg); border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}

/* +/-：两根线叠在一起是 +，展开时抽掉竖的那根就成了 −。
   整行 <summary> 都可点，这个方块是视觉标记，不要求点准。 */
.folder-pm {
  flex: none; position: relative;
  width: 28px; height: 28px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface);
}
.folder-pm::before, .folder-pm::after {
  content: ''; position: absolute; inset: 50% 7px auto;
  height: 2px; margin-top: -1px;
  background: var(--muted); border-radius: 1px;
}
.folder-pm::after { transform: rotate(90deg); }
.folder[open] > summary .folder-pm::after { opacity: 0; }
.folder[open] > summary .folder-pm { border-color: var(--primary); }
.folder[open] > summary .folder-pm::before { background: var(--primary); }
.folder > summary:hover .folder-pm { border-color: var(--primary); }
.folder > summary:hover .folder-pm::before,
.folder > summary:hover .folder-pm::after { background: var(--primary); }

/* 必须放在上面 .folder-pm 的尺寸之后：媒体查询不增加特异性，
   写在前面会被后面那条同特异性的基础规则直接盖掉（试过，28px 纹丝不动）。 */
@media (pointer: coarse) {
  /* 链接占满整行之后，能触发展开的就只剩这个方块了 —— 手指上得够得着 */
  .folder-pm { width: 40px; height: 40px; }
}

.folder .notes {
  margin: 0 0 8px 3px;
  padding-left: 14px;
  border-left: 2px solid var(--line);
}
.folder .notes .note { padding: 8px 0; }

/* 文件夹页的标题 */
.folder-title { min-width: 0; overflow-wrap: anywhere; }

.hit { flex-direction: column; align-items: stretch; gap: 3px; }
.hit.active { background: color-mix(in srgb, var(--primary) 9%, transparent); border-radius: 8px; }
.hit .where {
  font-size: 11px; color: var(--violet); align-self: flex-start;
  background: color-mix(in srgb, var(--violet) 12%, transparent);
  padding: 1px 7px; border-radius: 999px;
}
.snippet {
  margin: 0; font-size: 13px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- 笔记页布局 ---- */
.note-head { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 4px; }
.note-head h1 { margin: 0 0 8px; font-size: 26px; line-height: 1.3; }
.note-head .note-meta { justify-content: flex-start; }

/* ---- 正文排版 ---- */
.prose { overflow-wrap: anywhere; }
.prose h2 { font-size: 21px; margin: 30px 0 10px; padding-top: 4px; }
.prose h3 { font-size: 17px; margin: 22px 0 8px; }
.prose h2:first-of-type { margin-top: 18px; }
.prose p { margin: 12px 0; }
.prose ul, .prose ol { padding-left: 22px; margin: 12px 0; }
.prose li { margin: 4px 0; }
.prose a { color: var(--primary); }
.prose blockquote {
  margin: 14px 0; padding: 2px 14px; color: var(--muted);
  border-left: 3px solid var(--line);
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 26px 0; }
.prose img { max-width: 100%; height: auto; border-radius: 8px; }

/* 表格横向滚动，而不是把列挤窄。
   原来是 width:100%，列被压缩后配上 .prose 的 overflow-wrap:anywhere，
   一个单词就逐字竖排成一列。

   滚动容器必须是表格**之外**的一层：把 overflow-x:auto 和 max-width:100%
   放在 <table> 自己身上不成立 —— max-width 会把盒子钳到容器宽度，
   里面的表格照这个宽度布局并折行，overflow-x 没东西可滚。
   实测就是这样，单元格里的词照旧竖排。 */
.prose .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  margin: 14px 0;
}
.prose table {
  border-collapse: collapse;
  width: max-content;      /* 按内容取宽，容器装不下就由外层滚 */
  min-width: 100%;         /* 窄表也撑满一行，看起来整齐 */
  font-size: 14px;
}
.prose th, .prose td {
  border: 1px solid var(--line); padding: 7px 10px; text-align: left;
  /* 关掉 .prose 继承来的 overflow-wrap:anywhere。
     两者的区别是关键：anywhere 会把盒子的 min-content 宽度降到一个字符，
     所以表格一被挤窄，单词就竖着排；break-word 不动 min-content，
     只在一个词本身放不下时才断。 */
  overflow-wrap: break-word;
  word-break: normal;
  /* 上限让长说明折行，否则最长那个 143 字符的单元格会把整行拉到一千多像素。
     实测按 34ch 截断后，3 列表格的行宽中位 306px、最宽 744px。 */
  max-width: 38ch;
  min-width: 3ch;
}
.prose th { background: var(--code-bg); font-weight: 600; white-space: nowrap; }

.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, "Cascadia Mono", monospace;
  font-size: .88em;
  background: var(--code-bg); padding: 1px 5px; border-radius: 5px;
  border: 1px solid var(--line);
}
.prose pre {
  position: relative;
  background: var(--code-bg); border: 1px solid var(--line);
  border-radius: 11px; padding: 14px 16px; margin: 14px 0;
  overflow-x: auto;
}
.prose pre code { background: none; border: 0; padding: 0; font-size: 13px; line-height: 1.6; }

/* ---- 复制按钮 ---- */
.copy {
  position: absolute; top: 7px; right: 7px;
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 8px; cursor: pointer;
  color: var(--muted); background: var(--surface); border: 1px solid var(--line);
  opacity: 0; transition: opacity .15s, color .15s, border-color .15s;
}
.prose pre:hover .copy, .copy:focus-visible { opacity: 1; }
.copy.ok { color: var(--primary); border-color: var(--primary); opacity: 1; }
.copy.bad { color: var(--accent); border-color: var(--accent); opacity: 1; }
/* 触摸屏没有 hover，按钮就一直显示 */
@media (hover: none) { .copy { opacity: .75; } }

/* ---- 代码高亮（highlight.js 的类名，配色自己定，跟随主题）---- */
.hljs-comment, .hljs-quote { color: var(--muted); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-type { color: var(--violet); }
.hljs-string, .hljs-regexp, .hljs-addition { color: #17935a; }
.hljs-number, .hljs-built_in, .hljs-builtin-name { color: var(--primary); }
.hljs-title, .hljs-section, .hljs-name, .hljs-attr { color: var(--accent); }
.hljs-variable, .hljs-template-variable, .hljs-meta { color: #a8552a; }
.hljs-deletion { color: var(--accent); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }
@media (prefers-color-scheme: dark) {
  .hljs-string, .hljs-regexp, .hljs-addition { color: #4ec98a; }
  .hljs-variable, .hljs-template-variable, .hljs-meta { color: #e0a06a; }
}

/* 页脚构建时间：刷一下页面就能确认线上是不是新的 */
.built { margin: 4px 2px 0; font-size: 12px; color: var(--muted); text-align: center; }

/* ---- 显式锚点 ----
   笔记里有 674 个 <a id=x></a>，目录和交叉引用全靠它们。
   它们各自独占一个段落，所以要把那个空段落的边距压掉，
   并给一点 scroll-margin —— 否则跳过去时标题会贴在视口最上沿。 */
.prose .anchor-target { display: block; height: 0; scroll-margin-top: 16px; }
.prose p:has(> .anchor-target:only-child) { margin: 0; height: 0; }
/* 标题自身也留一点，直接跳标题锚点时同理 */
.prose h2, .prose h3 { scroll-margin-top: 16px; }

/* ---- 折叠块（习题的「展开答案」）---- */
.prose details {
  margin: 14px 0; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--code-bg);
}
.prose summary {
  cursor: pointer; font-weight: 600; font-size: 14px;
  color: var(--primary); list-style: none;
}
.prose summary::-webkit-details-marker { display: none; }
.prose summary::before { content: '▸ '; }
.prose details[open] summary::before { content: '▾ '; }
.prose details[open] summary { margin-bottom: 6px; }

/* ---- 左侧目录抽屉 ----
   原来是右侧固定栏，窄屏下会掉到正文**后面**：实测长文里它在 y=78195px，
   要往下滚 96 屏才看得见，等于没有。改成贴左边缘的抽屉，默认折叠。

   用原生 <details>：默认折叠、键盘可达、无障碍语义都是白送的，不用 JS 也能开合。 */

.side-drawer {
  position: relative;
  z-index: 40;
  /* 面板宽度。按钮展开后要贴在面板右沿，两者必须用同一个值，
     写死两遍迟早会错位。80vw 是为了窄手机上按钮仍在视口内。 */
  --toc-w: min(80vw, 300px);
}

/* 触发按钮：贴在左边缘中部的一小条 */
.side-drawer > summary {
  position: fixed;
  left: 0;
  top: 20vh;                        /* 左侧中上部 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 7px;
  z-index: 2;                       /* 压在面板之上，打开时也点得到 */
  cursor: pointer;
  list-style: none;                 /* 去掉原生三角 */
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 12px 12px 0;
  box-shadow: var(--shadow);
  color: var(--muted);
  transition: color .15s, border-color .15s;
}
.side-drawer > summary::-webkit-details-marker { display: none; }
.side-drawer > summary:hover,
.side-drawer > summary:focus-visible { color: var(--primary); border-color: var(--primary); }

.toc-btn-text {
  font-size: 12px; font-weight: 600;
  writing-mode: vertical-rl;        /* 竖排，按钮才够窄不挡正文 */
  letter-spacing: .1em;
}
/* 三道横杠 */
.toc-bars { width: 14px; height: 10px; position: relative; flex: none; }
.toc-bars::before, .toc-bars::after {
  content: ''; position: absolute; left: 0; right: 0; height: 2px;
  background: currentColor; border-radius: 1px;
}
.toc-bars::before { top: 0; box-shadow: 0 4px 0 currentColor; }
.toc-bars::after { bottom: 0; }

/* 打开时按钮不动，靠层级压在面板之上 —— 这样它始终可点（用来关闭）。
   不去动 left：对 left 做过渡会触发布局重排，而且在不绘制的环境里
   过渡根本不推进，值会一直停在起点，排查时极具误导性。 */
.side-drawer[open] > summary {
  left: var(--toc-w);               /* 贴在展开后的面板右沿 */
  color: var(--primary);
  border-color: var(--primary);
  background: var(--surface);
}

/* 遮罩：点它关闭（靠 copy.js） */
.side-backdrop { display: none; }
.side-drawer[open] > .side-backdrop {
  display: block;
  position: fixed; inset: 0;
  z-index: 0;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter: blur(2px);
}

/* 面板：整条左侧，自己滚 */
.side-panel {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--toc-w);
  overflow-y: auto;
  overscroll-behavior: contain;     /* 滚到头不要带动正文 */
  -webkit-overflow-scrolling: touch;
  z-index: 1;
  padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-right: 1px solid var(--line);
  box-shadow: var(--shadow);
  font-size: 13px;
}

.toc-panel .toc-title {
  margin: 0 0 10px; font-size: 12px; font-weight: 600;
  color: var(--muted); letter-spacing: .04em;
  position: sticky; top: -16px;
  background: var(--surface);
  padding: 4px 0 8px;
  border-bottom: 1px solid var(--line);
}
.toc-panel ul { list-style: none; margin: 0; padding: 0; }
.toc-panel li { padding: 0; }
.toc-panel li.lvl-3 { padding-left: 14px; font-size: 12px; }
.toc-panel a {
  display: block;
  padding: 7px 8px;                 /* 手指点得中 */
  color: var(--text); text-decoration: none;
  border-radius: 7px;
  overflow-wrap: anywhere;
}
.toc-panel li.lvl-3 a { color: var(--muted); }
.toc-panel a:hover, .toc-panel a:focus-visible {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
}
/* 当前所在的那一节 */
.toc-panel a.current {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary); font-weight: 600;
}

/* ---- 字体抽屉 ----
   和目录抽屉共用 .side-drawer 外壳，只差按钮位置和面板内容。
   单独一个按钮而不是塞进目录面板里：没有小标题的笔记根本不渲染目录抽屉，
   塞进去的话那些笔记就没法调字体了。 */
.font-drawer > summary { top: calc(20vh + 96px); }
/* 这页没有目录抽屉时，字体按钮顶到目录按钮原来的位置，不留一段空白 */
.font-drawer.allein > summary { top: 20vh; }

/* 按钮上只有「Aa」，不用像目录那样竖排 */
.font-aa { font-size: 14px; font-weight: 700; line-height: 1; }

/* 面板是块级的，.seg 默认 display:flex 会撑满宽度而按钮不跟着长，
   右边会露出一截空的圆角底色。让按钮等分。 */
.font-panel .seg { margin: 0 0 14px; }
.font-panel .seg { flex-wrap: wrap; }
.font-panel .seg button { flex: 1 0 40%; text-align: center; }

/* 这台设备上没有对应字体、或和前面某一档落到了同一个字形 —— 由 copy.js 实测后打标。
   不隐藏也不禁用：点了仍然有效，只是先告诉你别指望它和旁边那个不一样。 */
.font-panel button[data-gleich] { opacity: .55; }
.font-panel button[data-gleich]::after {
  content: " ="; font-size: 10px; vertical-align: super; opacity: .8;
}

/* 每个按钮用它自己选中的那套字体来渲染标签 —— 「宋体」两个字本身就是预览。
   不这样的话三个按钮长得一模一样，只能靠点下去再看正文才知道区别。 */
.font-panel [data-cjk="song"]     { font-family: "memo-cjk-song", var(--latin-font); }
.font-panel [data-cjk="fangsong"] { font-family: "memo-cjk-fangsong", var(--latin-font); }
.font-panel [data-cjk="kai"]      { font-family: "memo-cjk-kai", var(--latin-font); }
.font-panel [data-cjk="hei"]      { font-family: "memo-cjk-hei", var(--latin-font); }
.font-panel [data-latin="sans"]   { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.font-panel [data-latin="serif"]  { font-family: "Iowan Old Style", Georgia, "Times New Roman", serif; }
.font-panel .gruppe { margin: 0 0 4px; font-size: 12px; color: var(--muted); }
.font-panel .hinweis {
  margin: 18px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted);
}

@media (prefers-reduced-motion: no-preference) {
  .side-drawer > summary { transition: color .15s, border-color .15s; }
}

.book-pages { display:flex; flex-wrap:wrap; gap:1em; align-items:center; padding:1em 0; border-block:1px solid var(--line); }
.book-pages details { width:100%; }
.book-pages details a { display:inline-block; padding:.4em; }