/* 视觉：B 排版（大编号、粗黑体的课程封面）· 浅底 · Coursera 蓝 #0056D2 做唯一重点色。
   浅色模式：白卡 + 蓝编号，蓝只落在编号、大数字、当前位置、证书章、链接。
   深色模式：同一套排版的深底版，课程封面恢复成每所学校一个饱和色（B 的原稿）。 */

:root {
  --bg: #f7f8fa; --card: #ffffff; --ink: #101318; --mute: #6b7380; --faint: #c3c8d0; --line: #e3e6eb;
  --blue: #0056d2; --blue-ink: #ffffff; --tint: #e8f0fc; --code-bg: #f1f3f6; --mark: #fff3a8;
  --w-side: 300px; --w-main: 720px; --w-page: 1320px;
  --latin: "Archivo Variable", "Archivo", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
  --font: "Archivo Variable", "Archivo", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Noto Sans Mono CJK SC", monospace;
  /* 卡片默认：白卡 + 蓝编号 */
  --card-bg: var(--card); --card-fg: var(--ink); --card-mute: var(--mute); --card-line: var(--line); --card-num: var(--blue);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15171c; --card: #1c1f26; --ink: #f2f2ef; --mute: #8b8f99; --faint: #3a3f4a; --line: #2a2e37;
    --blue: #5b9cff; --blue-ink: #0b1a33; --tint: #1c2a44; --code-bg: #20242c; --mark: #5a4a12;
  }
}
/* 封面：浅色模式只用白卡 + 蓝编号；深色模式恢复 B 原稿那种每所学校一个饱和色的海报感（--h 由 build 写在每个 .cards 上） */
@media (prefers-color-scheme: dark) {
  .cards { --card-bg: oklch(0.74 0.115 var(--h, 250)); --card-fg: #15171c; --card-mute: rgba(21,23,28,.72); --card-line: oklch(0.74 0.115 var(--h, 250)); --card-num: #15171c; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 4.5rem; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.7 var(--font); font-variant-numeric: tabular-nums; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--blue); }
.num { font-family: var(--latin); font-variant-numeric: tabular-nums; }
.zh { font-family: var(--cjk); }
.wrap { max-width: var(--w-page); margin: 0 auto; padding: 0 40px; }
@media (max-width: 60rem) { .wrap { padding: 0 20px; } }

/* ---- 顶栏：品牌方块 + 面包屑 + 搜索 ---- */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--ink); }
.top .wrap { display: flex; align-items: center; gap: 20px; height: 56px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--latin); font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.brand::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--blue); }
.brand:hover { color: var(--ink); }
.brand .zh { letter-spacing: .1em; }
.crumbs { flex: 1; min-width: 0; display: flex; gap: 10px; font-size: 13px; color: var(--mute); overflow: hidden; white-space: nowrap; }
.crumbs a, .crumbs span { overflow: hidden; text-overflow: ellipsis; }
.crumbs a:hover { color: var(--blue); }
.crumbs .here { color: var(--ink); }
.crumbs .sep { flex: none; color: var(--faint); }
.spacer { flex: 1; }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 4px; background: transparent; color: var(--ink); font-size: 18px; cursor: pointer; }
.nav-toggle:hover { background: var(--tint); }
.search { position: relative; flex: none; width: min(280px, 40vw); }
.search input { width: 100%; height: 34px; padding: 0 14px 0 34px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font: inherit; font-size: 13px; }
.search::before { content: ""; position: absolute; left: 12px; top: 9px; width: 16px; height: 16px; pointer-events: none; opacity: .55;
  background: no-repeat center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7380' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E"); }
.search input:focus { outline: 2px solid var(--blue); outline-offset: -1px; }
.search-results { position: absolute; right: 0; top: 40px; width: min(36rem, 92vw); max-height: 65vh; overflow: auto; margin: 0; padding: 6px; list-style: none;
  background: var(--card); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 16px 40px rgba(16,19,24,.14); }
.search-results a { display: block; padding: 8px 10px; border-radius: 4px; color: var(--ink); line-height: 1.4; }
.search-results a:hover, .search-results li.active a { background: var(--tint); color: var(--ink); }
.search-results small { display: block; color: var(--mute); font-size: 12px; }
.search-results a .zh { margin-left: 6px; font-size: 12px; color: var(--mute); }
@media (max-width: 60rem) { .top .wrap { gap: 12px; } .crumbs { display: none; } .spacer { display: none; } .search { flex: 1 1 auto; width: auto; min-width: 0; max-width: 240px; margin-left: auto; } }

/* ---- 首页 ---- */
.hero { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: end; padding: 84px 0 64px; }
.hero-big { grid-column: span 2; }
.hero-big .n { margin: 0; font-family: var(--latin); font-size: clamp(120px, 15vw, 220px); font-weight: 900; line-height: .85; letter-spacing: -.06em; color: var(--blue); font-variation-settings: "wdth" 80; }
.hero-big .l { margin: 14px 0 0; font-size: 22px; font-weight: 500; }
.hero-stat { border-left: 1px solid var(--line); padding-left: 20px; }
.hero-stat .n { margin: 0; font-family: var(--latin); font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.hero-stat .l { margin: 8px 0 0; font-size: 13px; color: var(--mute); }
@media (max-width: 60rem) { .hero { grid-template-columns: 1fr 1fr; padding: 48px 0 32px; } .hero-big { grid-column: span 2; } }

.shelf { padding: 40px 0 10px; border-top: 1px solid var(--line); }
.shelf-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin: 0 0 20px; }
.shelf-head h2 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.shelf-head h2 a:hover { color: var(--blue); }
.shelf-meta { margin: 0; font-family: var(--latin); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.shelf-meta b { color: var(--blue); font-weight: 600; }
.cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 84rem) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 60rem) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .shelf-head h2 { font-size: 24px; } }
@media (max-width: 40rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .shelf-head { flex-direction: column; align-items: flex-start; gap: 6px; } .shelf-meta { white-space: normal; } }
.card { display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 3 / 4; padding: 16px 16px 14px; border-radius: 4px;
  background: var(--card-bg); color: var(--card-fg); border: 1px solid var(--card-line); transition: transform .12s ease, box-shadow .12s ease; }
.card:hover { color: var(--card-fg); transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(16,19,24,.35); }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.card .n { font-family: var(--latin); font-size: 52px; font-weight: 800; line-height: .9; letter-spacing: -.04em; color: var(--card-num); font-variation-settings: "wdth" 90; }
.stamp { width: 34px; height: 34px; border: 1.5px solid var(--card-num); color: var(--card-num); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; letter-spacing: .06em; transform: rotate(-12deg); }
.card .en { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.card p.zh { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--card-mute); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.card .m { margin: 12px 0 0; font-family: var(--latin); font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--card-mute); }
.card.more { justify-content: flex-end; background: transparent; color: var(--mute); border: 1px dashed var(--line); }
/* 专项里有、还没上的课：虚线、不可点；库里有目录但还没笔记的课：虚线、可点 */
.card.empty { background: transparent; border: 1px dashed var(--faint); color: var(--ink); }
.card.empty:hover { border-color: var(--blue); color: var(--ink); }
.card.empty .m { letter-spacing: 0; font-weight: 500; color: var(--mute); }
.card.empty .zh { color: var(--mute); }
.card.missing { background: transparent; color: var(--mute); border: 1px dashed var(--faint); }
.card.missing .n { color: var(--faint); }
.card.missing:hover { color: var(--mute); transform: none; box-shadow: none; }
.card.missing .m { letter-spacing: 0; font-weight: 500; color: var(--mute); }
a.card.missing:hover { border-color: var(--blue); color: var(--ink); }
a.card.missing:hover .ext-mark { color: var(--blue); }
.card.missing .ext-mark { font-family: var(--latin); font-weight: 600; }   /* 深色模式下 .m 默认是彩色卡上的深色字 */
.card.more .n { font-size: 40px; color: var(--mute); }
.card.more:hover { color: var(--blue); border-color: var(--blue); }
.card.more:hover .n { color: var(--blue); }
@media (max-width: 40rem) { .card .n { font-size: 40px; } .card .en { font-size: 14px; } }

/* ---- 目录页（学校 / 课程） ---- */
.folder-head { padding: 64px 0 40px; }
.folder-head .kicker { margin: 0 0 14px; font-family: var(--latin); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.folder-head h1 { margin: 0; font-size: clamp(32px, 4vw, 48px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; text-wrap: balance; }
.folder-head .zh-title { margin: 8px 0 0; font-size: 20px; color: var(--mute); }
.folder-head .meta { margin: 18px 0 0; font-family: var(--latin); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.folder-head .meta b { color: var(--blue); font-weight: 600; }
.folder-head .kicker a:hover { text-decoration: underline; text-underline-offset: 3px; }
.folder-head .ext { margin: 16px 0 0; font-family: var(--latin); font-size: 13px; font-weight: 600; }
.folder-head .ext a { color: var(--blue); }
.folder-head .ext a:hover { text-decoration: underline; }
/* 课程页：这门课属于哪些专项、是第几门 */
.spec-of { display: flex; flex-direction: column; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.spec-of li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 15px; line-height: 1.45; }
.spec-of .kd { font-family: var(--latin); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.spec-of a { font-weight: 600; }
.spec-of a:hover { color: var(--blue); }
.spec-of .zh { font-size: 13px; color: var(--mute); }
.spec-of .c { font-size: 12px; color: var(--mute); }
/* 附件胶囊：证书这类 PDF 链接的样子，课程页 / 专项页的 .files 列表和学校页的分组标题共用同一个 */
.attachment-pill { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 13px; font-weight: 600; }
.attachment-pill::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.attachment-pill:hover { border-color: var(--blue); }
.files { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.files li { min-width: 0; }   /* 窄屏：证书名太长时让胶囊里的字换行，别被 body 的 overflow-x: clip 裁掉 */
.group { padding: 36px 0 8px; border-top: 1px solid var(--line); }
.group-head { display: flex; gap: 16px; align-items: baseline; margin: 0 0 18px; }
.group-head .k { font-family: var(--latin); font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--blue); flex: none; white-space: nowrap; }   /* "Module 01" / "01" */
.group-head h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; }
.group-head h2 .zh { margin-left: 8px; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--mute); }
.group-head h2 a:hover { color: var(--blue); }
.group-head .c { margin-left: auto; font-family: var(--latin); font-size: 12px; color: var(--mute); white-space: nowrap; }
.rows { margin: 0; padding: 0; list-style: none; max-width: 860px; }
.rows li { display: flex; gap: 14px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); }
.rows li:first-child { border-top: 0; }
.rows .k { flex: none; width: 28px; font-family: var(--latin); font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--faint); padding-top: 2px; }
.rows a { flex: 1; min-width: 0; font-size: 15px; line-height: 1.5; }
.rows a .zh { margin-left: 8px; font-size: 13px; color: var(--mute); }
.rows li:hover .k { color: var(--blue); }
.rows .c { flex: none; font-family: var(--latin); font-size: 12px; color: var(--mute); }
/* ---- 证书 / 附件的弹框预览（site.js；没有 JS 时链接退化成新标签页打开） ---- */
.sheet { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 24px; }
.sheet[hidden] { display: none; }
.sheet-back { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 55%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sheet-box { position: relative; display: flex; flex-direction: column; width: min(980px, 100%); height: min(88vh, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.28); overflow: hidden; animation: sheet-in .16s ease-out; }
.sheet-head { display: flex; flex: none; align-items: center; gap: 14px; padding: 11px 12px 11px 18px; border-bottom: 1px solid var(--line); }
.sheet-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-head a { flex: none; font-family: var(--latin); font-size: 12px; font-weight: 600; color: var(--mute); }
.sheet-head a:hover { color: var(--blue); text-decoration: underline; }
.sheet-x { flex: none; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--mute); font: 13px/1 var(--latin); cursor: pointer; }
.sheet-x:hover { border-color: var(--blue); color: var(--blue); }
.sheet-frame { flex: 1; min-height: 0; width: 100%; border: 0; background: var(--code-bg); }
body.sheet-open { overflow: hidden; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
@media (max-width: 40rem) { .sheet { padding: 0; } .sheet-box { width: 100%; height: 100%; border: 0; border-radius: 0; } }
@media (max-width: 40rem) {
  .sheet.has-ratio { padding: 12px; }
  .sheet.has-ratio .sheet-box { border: 1px solid var(--line); border-radius: 12px; }
  .sheet.has-ratio .sheet-head { gap: 10px; padding-left: 12px; }
}

/* 一篇笔记都没有的模块：折叠成一行，点开才看官方条目清单 */
details.group.none > summary { cursor: pointer; list-style: none; }
details.group.none > summary::-webkit-details-marker { display: none; }
details.group.none > summary .k, details.group.none > summary h2 { color: var(--mute); }
details.group.none > summary::after { content: "▾"; margin-left: 10px; color: var(--faint); font-size: 12px; }
details.group.none[open] > summary::after { content: "▴"; }
details.group.none > summary:hover .k, details.group.none > summary:hover h2 { color: var(--blue); }
/* 官方大纲里还没有笔记的条目：列出来但不给链接 */
.folder-head .meta .st { letter-spacing: 0; color: var(--mute); font-weight: 600; }
/* 专项 / 专业证书的种类标签：专业证书用实心蓝，专项课程用描边 */
.group-head .kd, .spec-of .kd { display: inline-block; margin-right: 8px; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: .02em; vertical-align: 4px; color: var(--blue); border: 1px solid var(--blue); }   /* 4px：让描边框的中线对上 22px 标题的字身中线 */
.group-head .kd.pc, .spec-of .kd.pc { color: #fff; background: var(--blue); border-color: var(--blue); }
/* 课程页那行里标签是 flex 子项，vertical-align 不生效，基线对齐会让描边框比标题低约 1.7px：改成跟着行居中 */
.spec-of .kd { align-self: center; }
.group > .files { margin: -6px 0 18px; }   /* 学校页：专项证书单独一行挂在分组标题下面 */
.rows li.none { color: var(--mute); }
.rows li.none .t { flex: 1; min-width: 0; font-size: 15px; line-height: 1.5; }
.rows li.none .t .zh { margin-left: 8px; font-size: 13px; color: var(--faint); }
.rows li.none .k { color: var(--faint); }
.rows li.none:hover .k { color: var(--faint); }
/* 笔记页标题下方：跳到 Coursera 上对应的那一条 */
.note-ext { margin: -8px 0 20px; font-family: var(--latin); font-size: 12px; font-weight: 600; }
.note-ext a { color: var(--mute); }
.note-ext a:hover { color: var(--blue); text-decoration: underline; }

/* ---- 笔记页：侧栏 + 正文 ---- */
.shell { display: grid; grid-template-columns: var(--w-side) minmax(0, 1fr); gap: 80px; padding-top: 44px; }
.side { position: sticky; top: 56px; align-self: start; max-height: calc(100vh - 56px); overflow: auto; padding: 0 4px 40px 0; scrollbar-width: thin; }
.side-course { margin: 0 0 4px; font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -.015em; }
.side-course a:hover { color: var(--blue); }
.side-meta { margin: 0 0 18px; font-size: 13px; color: var(--mute); }
/* 模块 = 原生 <details>：summary 一行（编号 · 名字 · 篇数 · 折角），点哪里都能开合；展开的模块整体变深，当前模块编号变蓝 */
.mod { border-top: 1px solid var(--line); color: var(--mute); font-size: 13.5px; line-height: 1.4; }
.mod summary { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; cursor: pointer; list-style: none; user-select: none; -webkit-user-select: none; }
.mod summary::-webkit-details-marker { display: none; }
.mod summary::after { content: ""; flex: none; align-self: center; width: 7px; height: 7px; margin-left: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .55; transition: transform .15s ease; }
.mod[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.mod summary:hover, .mod summary:hover .k { color: var(--blue); }
.mod summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; }
.mod .k { flex: none; width: 22px; font-family: var(--latin); font-size: 12px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.mod .t { flex: 1; min-width: 0; font-weight: 500; }
.mod .t .zh { display: block; font-size: 12px; font-weight: 400; color: var(--mute); }
.mod .c { flex: none; font-family: var(--latin); font-size: 12px; }
.mod[open] { color: var(--ink); }
.mod[open] > summary .t { font-weight: 700; }
.mod.current > summary .k { color: var(--blue); }
.side ol { list-style: none; margin: 0 0 10px; padding: 0 0 0 34px; }
.side ol li { display: flex; gap: 10px; margin: 0; padding: 5px 0; font-size: 13px; line-height: 1.45; color: var(--mute); }
.side ol .k { flex: none; width: 18px; font-family: var(--latin); font-size: 11px; font-weight: 800; color: var(--faint); padding-top: 3px; }
.side ol a { min-width: 0; }
.side ol a .zh { display: block; font-size: 12px; color: var(--mute); }
.side ol li:hover a, .side ol li:hover .k { color: var(--blue); }
.side ol li.current { color: var(--ink); font-weight: 700; }
.side ol li.current .k { color: var(--blue); }
.main { min-width: 0; padding-bottom: 80px; }
.note { max-width: var(--w-main); }
.note.certificate-index { max-width: none; }
.certificate-index table { min-width: 640px; }
.certificate-index th:first-child, .certificate-index td:first-child { width: 1%; white-space: nowrap; }
.certificate-index th:nth-last-child(-n+2), .certificate-index td:nth-last-child(-n+2) { width: 1%; white-space: nowrap; }
/* 标题上方一行：Module 01 · 模块名 */
.note-kicker { margin: 0 0 16px; font-family: var(--latin); font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--blue); }
.note-kicker .zh { margin-left: 4px; font-weight: 500; letter-spacing: 0; color: var(--mute); }
@media (max-width: 60rem) {
  .shell { grid-template-columns: 1fr; gap: 0; padding-top: 24px; }
  .nav-toggle { display: inline-flex; }
  .side { position: fixed; left: 0; top: 56px; z-index: 15; width: min(22rem, 88vw); height: calc(100vh - 56px); max-height: none; padding: 20px; background: var(--bg); border-right: 1px solid var(--line); transform: translateX(-100%); transition: transform .18s ease; }
  body.nav-open .side { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.25); }
}

/* ---- 正文 ---- */
.note-body { overflow-wrap: anywhere; }
.note-body > :first-child { margin-top: 0; }
.note h1 { margin: 0 0 36px; font-size: clamp(28px, 3vw, 38px); line-height: 1.25; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.note h1 .zh { display: block; margin-top: 8px; font-size: clamp(17px, 1.6vw, 20px); font-weight: 500; letter-spacing: 0; color: var(--mute); }   /* 中文副行，和课程页 .zh-title 一样 */
.note h2 { display: flex; gap: 14px; align-items: baseline; margin: 48px 0 16px; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; }
.note h2::before { content: ""; flex: none; width: 9px; height: 9px; background: var(--blue); transform: translateY(-1px); }
.note h3 { margin: 26px 0 10px; font-size: 18px; font-weight: 700; }
.note h4, .note h5, .note h6 { margin: 22px 0 8px; font-size: 16px; font-weight: 700; }
.note p { margin: 0 0 18px; font-size: 17px; line-height: 1.9; }
.note ul, .note ol { margin: 0 0 18px; padding-left: 22px; font-size: 17px; line-height: 1.9; }
.note li { margin: 0 0 6px; }
.note li > p { margin: 0 0 6px; }
.note li.task { list-style: none; margin-left: -22px; }
.note img { max-width: 100%; height: auto; border-radius: 4px; border: 1px solid var(--line); background: var(--card); vertical-align: middle; }
.note p > img:only-child { display: block; margin: 8px 0; }
.note hr { margin: 36px 0; border: 0; border-top: 1px solid var(--line); }
.note blockquote { margin: 0 0 18px; padding: 4px 0 4px 20px; border-left: 3px solid var(--blue); color: var(--mute); }
.note blockquote > :last-child { margin-bottom: 0; }
.note code { padding: .1em .4em; border-radius: 4px; background: var(--code-bg); font-family: var(--mono); font-size: .875em; }
.note pre { margin: 0 0 20px; padding: 14px 16px; border-radius: 4px; background: var(--code-bg); border: 1px solid var(--line); overflow-x: auto; line-height: 1.6; }
.note pre code { padding: 0; background: none; font-size: 13.5px; }
.table-wrap { margin: 0 0 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.note table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.note th, .note td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.note th { font-family: var(--latin); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); border-bottom: 2px solid var(--ink); }
.note mark { background: var(--mark); color: inherit; }
.note u { text-decoration-thickness: 1px; text-underline-offset: .15em; }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
.katex { font-size: 1.05em; }
.note a { color: var(--blue); }
.note a:hover { text-decoration: underline; }
a.dead { color: var(--mute); border-bottom: 1px dashed var(--mute); cursor: help; text-decoration: none; }
/* 缺图占位：构建时（迁移丢失）和运行时（加载失败）共用。单独成段时铺满一行。 */
.img-missing { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 100%; padding: 10px 14px 10px 40px; position: relative; border: 1px dashed var(--faint); border-radius: 4px; color: var(--mute); font-size: 12px; line-height: 1.4; vertical-align: middle; }
.img-missing::before { content: ""; position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: currentColor; opacity: .55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center / contain no-repeat; }
.img-missing b { font-weight: 600; color: var(--mute); }
.img-missing em { font-style: normal; color: var(--ink); }
.img-missing small { font-family: var(--latin); font-size: 11px; opacity: .7; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note p > .img-missing:only-child { display: flex; margin: 8px 0; min-height: 84px; justify-content: center; padding-left: 40px; }
.note p > .img-missing:only-child::before { left: 50%; top: 14px; margin: 0 0 0 -9px; }
.note p > .img-missing:only-child { align-items: center; text-align: center; padding: 38px 14px 12px; }
a.attachment::before { content: "⤓ "; color: var(--mute); }

/* ---- callout ---- */
.callout { --c: var(--mute); margin: 0 0 20px; padding: 14px 18px; border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 8%, var(--card)); }
.callout-title { margin: 0 0 6px !important; font-size: 15px !important; font-weight: 700; color: var(--c); }
.callout > :last-child { margin-bottom: 0; }
.callout-note, .callout-info, .callout-todo, .callout-abstract, .callout-summary, .callout-tldr { --c: var(--blue); }
.callout-tip, .callout-hint, .callout-success, .callout-check, .callout-done { --c: #1f8a5b; }
.callout-important, .callout-quote, .callout-cite { --c: #6d4fd6; }
.callout-warning, .callout-caution, .callout-attention, .callout-question, .callout-help, .callout-faq { --c: #c9821a; }
.callout-danger, .callout-error, .callout-failure, .callout-fail, .callout-missing, .callout-bug { --c: #d1443f; }
.callout-example { --c: #7a6a4a; }

/* ---- 翻页 ---- */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: var(--w-main); margin-top: 64px; }
.pager a, .pager .empty { display: block; }
.pager a { padding: 18px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; }
.pager a:hover { border-color: var(--blue); color: var(--ink); }
.pager small { display: block; font-family: var(--latin); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; }
.pager span { display: block; font-size: 15px; font-weight: 700; line-height: 1.4; }
.pager span .zh { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--mute); }
.pager .next { text-align: right; }
@media (max-width: 40rem) { .pager { grid-template-columns: 1fr; } .pager .next { text-align: left; } }

/* ---- 页脚 / 打印 ---- */
.foot { margin-top: 40px; padding: 28px 0 40px; border-top: 1px solid var(--line); font-family: var(--latin); font-size: 12px; letter-spacing: .06em; color: var(--mute); }
@media print {
  .top, .side, .pager, .foot, .search { display: none !important; }
  .shell { display: block; }
  body { font-size: 11pt; background: #fff; color: #000; }
}