/* ============================================================
   考研数学 · 公式看板
   版式复刻自 mm802-review（材料力学考研复习手册 · 学习工作台.html）
   —— 工程图纸网格 / 图框角标 / SHEET 册 / 大编号章节卡 / 讲义弹层
   类名、几何、色彩、动效全部对齐参考站
   ============================================================ */

/* ---------- 设计变量（对齐参考站 :root）---------- */
:root {
  --paper:     #F5F0E4;   /* 纸底 · 暖米 */
  --paper2:    #FDFBF3;   /* 卡面 · 近白 */
  --ink:       #1D2637;   /* 墨蓝黑 */
  --ink2:      #49566E;
  --faint:     #8A93A5;
  --rule:      rgba(29,38,55,.28);
  --rule2:     rgba(29,38,55,.13);
  --verm:      #C2402F;   /* 朱红 · 签名色 */
  --orange:    #D9640E;
  --green:     #237A46;
  --violet:    #6D4FC2;
  --blue:      #1E5FBF;
  --gray:      #7C8698;
  --grid:      rgba(191,122,52,.08);
  --grid2:     rgba(191,122,52,.14);
  --shadow:    5px 5px 0 rgba(29,38,55,.10);

  --serif: Georgia,"Times New Roman","Noto Serif SC","Source Han Serif SC","Songti SC","SimSun",serif;
  --mono:  "Consolas","JetBrains Mono","SF Mono","Cascadia Mono","Courier New",monospace;
  --sans:  "Segoe UI","Microsoft YaHei",system-ui,sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  color: var(--ink);
  min-height: 100vh;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* 图纸网格：125px 主格 + 25px 次格（与参考站同款四层） */
  background:
    repeating-linear-gradient(0deg,  transparent 0 125px, var(--grid2) 125px 126.5px),
    repeating-linear-gradient(90deg, transparent 0 125px, var(--grid2) 125px 126.5px),
    repeating-linear-gradient(0deg,  transparent 0 25px,  var(--grid)  25px  26px),
    repeating-linear-gradient(90deg, transparent 0 25px,  var(--grid)  25px  26px),
    var(--paper);
  background-attachment: fixed;
}

/* ---------- 图框：engineering sheet frame ---------- */
.frame {
  position: fixed; inset: 10px; z-index: 60;
  border: 1.5px solid var(--ink); pointer-events: none;
}
.frame::after { content: ""; position: absolute; inset: 4px; border: 1px solid var(--rule); }
.corners span { position: fixed; width: 15px; height: 15px; z-index: 61; pointer-events: none; }
.corners span::before {
  content: ""; position: absolute; left: 50%; top: -1px; bottom: -1px;
  width: 1.5px; background: var(--ink); transform: translateX(-50%);
}
.corners span::after {
  content: ""; position: absolute; top: 50%; left: -1px; right: -1px;
  height: 1.5px; background: var(--ink); transform: translateY(-50%);
}
.corners span:nth-child(1) { top: 3px; left: 3px; }
.corners span:nth-child(2) { top: 3px; right: 3px; }
.corners span:nth-child(3) { bottom: 3px; left: 3px; }
.corners span:nth-child(4) { bottom: 3px; right: 3px; }

a { color: inherit; text-decoration: none; }
::selection { background: rgba(194,64,47,.16); color: var(--verm); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--rule); border: 3px solid var(--paper); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink2); }

/* ---------- 容器 ---------- */
.wrap { position: relative; z-index: 1; max-width: 1340px; margin: 0 auto; padding: 46px 54px 96px; }

/* ---------- header ---------- */
header {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 30px; flex-wrap: wrap;
  padding-bottom: 24px; border-bottom: 2px solid var(--ink); position: relative;
}
.brand .kicker { font: 600 11px/1 var(--mono); letter-spacing: .34em; color: var(--verm); }
.brand h1 { font-weight: 800; font-size: 34px; letter-spacing: .02em; margin: 12px 0 9px; }
.brand h1 .dot { color: var(--verm); }
.brand .sub { font-size: 12.5px; color: var(--ink2); letter-spacing: .08em; }
.brand .sub b { color: var(--ink); }
.brand .byline { margin-top: 7px; font: 600 11px var(--mono); letter-spacing: .14em; color: var(--ink2); }
.brand .byline .mail { font-family: var(--serif); font-size: 13.5px; font-weight: 700; color: var(--ink); }

/* 装饰圆弧：缓慢自转 */
.deco {
  position: absolute; right: 330px; top: -6px; opacity: .08;
  pointer-events: none; transform-origin: 50% 50%;
  animation: spin 120s linear infinite;
}

/* 倒计时：尺寸标注样式 */
.dim { text-align: center; min-width: 290px; position: relative; padding: 0 26px; }
.dim::before, .dim::after { content: ""; position: absolute; top: 10px; bottom: 30px; width: 1.5px; background: var(--ink); }
.dim::before { left: 0; }
.dim::after { right: 0; }
.dim .dl { position: relative; height: 12px; margin-bottom: 4px; }
.dim .dl::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--ink); }
.dim .dl i { position: absolute; top: -4px; bottom: -4px; width: 1.5px; background: var(--ink); }
.dim .dl i.l { left: 0; }
.dim .dl i.r { right: 0; }
.dim .arr { position: absolute; top: 50%; width: 0; height: 0; border: 5px solid transparent; transform: translateY(-50%); }
.dim .arr.l { left: 1px; border-right: 9px solid var(--ink); border-left: none; }
.dim .arr.r { right: 1px; border-left: 9px solid var(--ink); border-right: none; }
.dim .n { font: 700 86px/1 var(--serif); color: var(--verm); letter-spacing: .01em; }
.dim .cap { margin-top: 9px; font: 600 10.5px var(--mono); letter-spacing: .24em; color: var(--ink2); }
.dim .cap2 { margin-top: 4px; font-size: 11.5px; color: var(--ink2); letter-spacing: .3em; text-indent: .3em; }

/* ---------- stats strip ---------- */
.stats {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border: 1.5px solid var(--ink); background: var(--paper2);
  margin: 26px 0 16px; box-shadow: var(--shadow);
}
.stat { padding: 15px 20px 13px; border-left: 1px solid var(--rule2); position: relative; }
.stat:first-child { border-left: none; }
.stat .en { position: absolute; top: 11px; right: 13px; font: 600 8.5px var(--mono); letter-spacing: .2em; color: var(--faint); }
.stat .v { font: 700 29px/1.15 var(--mono); color: var(--ink); }
.stat .v em { font-style: normal; font-size: 13px; color: var(--faint); margin-left: 2px; font-weight: 700; }
.stat .k { margin-top: 5px; font-size: 11.5px; color: var(--ink2); letter-spacing: .04em; }

/* ---------- 数一 / 数二 切换（ruler 段位样式）---------- */
.ruler {
  display: flex; border: 1.5px solid var(--ink); background: var(--paper2);
  position: relative; box-shadow: var(--shadow);
}
.seg {
  flex: 1; padding: 12px 18px; position: relative;
  border-left: 1.5px dashed var(--rule);
  background: none; border-top: 0; border-right: 0; border-bottom: 0;
  text-align: left; font-family: inherit; cursor: pointer;
  transition: background .15s ease;
}
.seg:first-child { border-left: none; }
.seg:hover { background: rgba(29,38,55,.035); }
.seg .nm { font-weight: 800; font-size: 14px; letter-spacing: .04em; color: var(--ink2); }
.seg .dt { font: 600 10.5px var(--mono); color: var(--ink2); margin-top: 4px; letter-spacing: .1em; }
.seg .dt em { font-style: normal; color: var(--verm); font-weight: 700; }

/* 当前选中：橙色内描边 + 动态斜纹 */
.seg.cur { position: relative; overflow: hidden; box-shadow: inset 0 0 0 2px var(--orange); }
.seg.cur::after {
  content: ""; position: absolute; inset: -24px; z-index: 0;
  background: repeating-linear-gradient(-45deg, rgba(217,100,14,.13) 0 7px, transparent 7px 14px);
  animation: ants 1.3s linear infinite;
}
.seg.cur > * { position: relative; z-index: 1; }
.seg.cur .nm { color: var(--orange); }
.seg.cur::before {
  content: "当前 ▼"; position: absolute; top: 4px; right: 10px; z-index: 2;
  color: var(--orange); font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  animation: bob2 2.2s ease-in-out infinite;
}

/* ---------- legend note ---------- */
.note {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  font-size: 11.5px; color: var(--ink2); margin: 20px 0;
}
.note .lb { font-weight: 800; font-size: 12px; }
.note i { font-style: normal; display: inline-flex; align-items: center; gap: 6px; }
.note .sq { width: 9px; height: 9px; border: 1.5px solid; display: inline-block; }
.note .sq.s1 { border-color: var(--verm); background: rgba(194,64,47,.15); }
.note .sq.s2 { border-color: var(--orange); background: rgba(217,100,14,.13); }
.note .sq.s3 { border-color: var(--blue); background: rgba(30,95,191,.1); }
.note .sq.s4 { border-color: var(--gray); border-style: dashed; }
.note .hint { margin-left: auto; color: var(--faint); }

#kp-search {
  font: 600 11px var(--mono); color: var(--ink); background: var(--paper2);
  border: 1.5px solid var(--ink); padding: 5px 11px; outline: none;
  width: 210px; letter-spacing: .04em;
}
#kp-search:focus { box-shadow: 2px 2px 0 rgba(29,38,55,.22); }
#kp-search::placeholder { color: var(--faint); }
#search-count { font: 700 10px var(--mono); color: var(--verm); letter-spacing: .08em; margin-left: 8px; }
li.kp-hit { background: rgba(194,64,47,.06); }
li.kp-hit > span { color: var(--verm); }

.foldbtn {
  display: inline-flex; align-items: center;
  font: 700 10px var(--mono); letter-spacing: .12em; color: var(--ink);
  border: 1.5px solid var(--ink); background: var(--paper2);
  padding: 4px 10px; cursor: pointer; user-select: none; margin-left: 8px;
  box-shadow: 2px 2px 0 rgba(29,38,55,.22);
  transition: background .15s ease, color .15s ease, transform .1s ease;
}
.foldbtn:hover { background: var(--ink); color: var(--paper2); }
.foldbtn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 rgba(29,38,55,.22); }

/* ---------- volume ---------- */
.vol { margin-bottom: 32px; }
.vol-h {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 22px;
  margin-bottom: 16px; border-bottom: 1.5px solid var(--ink); padding-bottom: 11px;
}
.vol-h .k { display: block; font: 600 10px var(--mono); letter-spacing: .28em; color: var(--verm); margin-bottom: 5px; }
.vol-h h2 { font-size: 20px; font-weight: 800; letter-spacing: .02em; }
.vol-h h2 small { font-size: 12px; color: var(--ink2); font-weight: 600; margin-left: 10px; letter-spacing: .05em; }
.vol-h .vstat { text-align: right; font: 700 10.5px var(--mono); letter-spacing: .1em; color: var(--ink2); white-space: nowrap; }
.vol-h .vstat b { color: var(--orange); font-size: 13px; }
.chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 16px; }

/* ---------- chapter card ---------- */
.ch {
  position: relative; background: var(--paper2);
  border: 1.5px solid var(--ink); border-radius: 10px;
  padding: 16px 16px 15px; cursor: pointer;
  box-shadow: 4px 4px 0 rgba(29,38,55,.10);
  transition: transform .15s ease, box-shadow .15s ease;
  overflow: hidden;
}
.ch:hover { transform: translate(-1px,-2px); box-shadow: 7px 7px 0 rgba(29,38,55,.13); }

/* 描边大编号 */
.ch .num {
  position: absolute; top: 4px; right: 12px;
  font: italic 700 60px/1 var(--serif);
  color: transparent; -webkit-text-stroke: 1.3px rgba(29,38,55,.26);
  pointer-events: none; user-select: none;
  transition: -webkit-text-stroke-color .25s ease;
}
.ch:hover .num { -webkit-text-stroke-color: rgba(194,64,47,.45); }

.ch .row1 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; position: relative; }
.ch .no { font: 600 10.5px var(--mono); letter-spacing: .16em; color: var(--ink2); }

.fq {
  font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-indent: .18em;
  padding: 3px 8px 2px; border: 1.5px solid; background: var(--paper2);
}
.fq-核心 { color: var(--verm); border-color: var(--verm); background: rgba(194,64,47,.08); }
.fq-重点 { color: var(--orange); border-color: var(--orange); background: rgba(217,100,14,.07); }
.fq-一般 { color: var(--blue); border-color: var(--blue); background: rgba(30,95,191,.06); }
.fq-scope1 { color: var(--gray); border-color: var(--gray); border-style: dashed; }

/* 数二视角下被过滤掉的章节：淡出 */
.ch.nc { opacity: .5; filter: saturate(.35); cursor: default; }
.ch.nc:hover { opacity: .8; filter: none; transform: none; box-shadow: 4px 4px 0 rgba(29,38,55,.10); }
.ch.nc .hint { display: none; }

.ch h3 { font-size: 16.5px; font-weight: 800; margin: 0 0 13px; position: relative; padding-right: 44px; letter-spacing: .01em; }

/* 知识点密度条（替代参考站的「掌握度」） */
.hbar { display: flex; align-items: center; gap: 10px; }
.hbar .tr {
  flex: 1; height: 10px; border: 1px solid var(--rule); position: relative;
  background: repeating-linear-gradient(45deg, transparent 0 5px, rgba(29,38,55,.055) 5px 7px);
}
.hbar .tr i {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0;
  background: repeating-linear-gradient(45deg, rgba(29,38,55,.72) 0 3px, transparent 3px 6.5px);
  border-right: 1.5px solid var(--ink);
  transition: width 1s cubic-bezier(.22,1,.36,1);
}
.hbar b { font: 700 11.5px var(--mono); color: var(--ink2); min-width: 36px; text-align: right; }

.ch .meta {
  display: flex; gap: 7px; align-items: center; flex-wrap: wrap;
  margin-top: 12px; font-size: 11px; color: var(--ink2); position: relative;
}
.ch .meta .star-n { color: var(--verm); font-weight: 700; }

/* 重点习题 */
.exrow { display: flex; align-items: center; gap: 6px; margin-top: 11px; flex-wrap: wrap; position: relative; }
.exlbl { font: 600 9.5px var(--mono); letter-spacing: .18em; color: var(--verm); flex: none; }
.exn {
  font: 700 10.5px var(--mono); letter-spacing: .04em; color: var(--ink2);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 3px; padding: 2px 7px;
}
.exn.star { color: var(--verm); border-color: rgba(194,64,47,.55); background: rgba(194,64,47,.05); }
.exprog { margin-left: auto; font: 700 10px var(--mono); color: var(--faint); letter-spacing: .06em; }

/* 展开区：grid-template-rows 0fr→1fr 动画 */
.pts { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s cubic-bezier(.22,1,.36,1); }
.ch.open .pts { grid-template-rows: 1fr; }
.pts-clip { min-height: 0; overflow: hidden; }
.pts ol { list-style: none; margin-top: 13px; border-top: 1.5px dashed var(--rule); padding-top: 4px; }

.pts li {
  display: flex; gap: 10px; padding: 5.5px 0;
  border-bottom: 1px dashed var(--rule2);
  font-size: 12px; color: var(--ink2); line-height: 1.5;
}
.pts li:last-child { border-bottom: none; }
.pts li b { font: 700 10.5px var(--mono); color: var(--verm); min-width: 19px; padding-top: 2px; }
.pts li > span { min-width: 0; }

/* 逐条入场 */
.ch.open .pts li { animation: riseIn .45s backwards; }
.ch.open .pts li:nth-child(1) { animation-delay: .05s; }
.ch.open .pts li:nth-child(2) { animation-delay: .09s; }
.ch.open .pts li:nth-child(3) { animation-delay: .13s; }
.ch.open .pts li:nth-child(4) { animation-delay: .17s; }
.ch.open .pts li:nth-child(5) { animation-delay: .21s; }
.ch.open .pts li:nth-child(6) { animation-delay: .25s; }
.ch.open .pts li:nth-child(7) { animation-delay: .29s; }
.ch.open .pts li:nth-child(8) { animation-delay: .33s; }
.ch.open .pts li:nth-child(n+9) { animation-delay: .37s; }

.pts li.has-note { cursor: pointer; }
.pts li.has-note:hover > span .pt-t { color: var(--verm); }
.pts li .note-ic {
  margin-left: auto; flex: none; font: 700 9px var(--mono); font-style: normal;
  color: var(--paper2); background: var(--orange); border: 1px solid var(--ink);
  padding: 1px 4.5px; letter-spacing: .12em; align-self: center;
}

/* 条目正文：标题一行 + 公式一行 */
.pts li > span { display: block; }
.pts li .pt-t { display: block; color: var(--ink); font-weight: 600; }
.pts li .pt-f {
  display: block; margin-top: 4px; color: var(--ink2);
  font-family: var(--serif); font-size: 12.5px; line-height: 1.9;
  overflow-x: auto; overflow-y: hidden; white-space: nowrap;
}
.pts li .pt-f:empty { display: none; }
.pts li .pt-f .fr { vertical-align: -.5em; }

.hint {
  position: absolute; right: 15px; bottom: 12px;
  font: 600 9.5px var(--mono); color: var(--faint); letter-spacing: .14em;
  opacity: 0; transform: translateX(-7px);
  transition: opacity .18s ease, transform .18s ease;
}
.ch:hover .hint { opacity: 1; transform: none; }
.ch.open .hint { display: none; }

/* 数二视角下整册被过滤 → 横条 */
.ncstrip {
  margin-top: 22px; border: 1.5px dashed rgba(124,134,152,.55); border-radius: 10px;
  background: rgba(124,134,152,.06); padding: 11px 16px;
  display: flex; gap: 7px 10px; flex-wrap: wrap; align-items: center;
}
.ncstrip .nct { font: 600 9.5px var(--mono); letter-spacing: .16em; color: var(--gray); flex: none; margin-right: 4px; }
.ncstrip .ncc { font: 600 11.5px var(--sans); color: var(--gray); }
.ncstrip .ncc b { font: 700 10.5px var(--mono); color: rgba(124,134,152,.75); margin-right: 3px; }
.ncstrip .ncref { margin-left: auto; font: 600 9.5px var(--mono); letter-spacing: .06em; color: rgba(124,134,152,.75); }

/* ---------- 讲义弹层（notecard）---------- */
.notewrap {
  position: fixed; inset: 0; z-index: 80;
  display: none; align-items: center; justify-content: center;
  background: rgba(29,38,55,.48); padding: 26px;
}
.notewrap.on { display: flex; }
.notecard {
  background: var(--paper2); border: 1.5px solid var(--ink);
  box-shadow: 7px 7px 0 rgba(29,38,55,.28);
  max-width: 760px; width: 100%; max-height: 86vh; overflow: auto;
  padding: 22px 26px 24px;
}
.notecard .nh {
  display: flex; align-items: baseline; gap: 10px;
  border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 14px;
}
.notecard .nh b { font-size: 15.5px; letter-spacing: .02em; }
.notecard .nh .en { margin-left: auto; font: 600 9px var(--mono); letter-spacing: .22em; color: var(--verm); white-space: nowrap; }
.notecard .backbtn {
  flex: none; font: 700 11px var(--mono); letter-spacing: .1em; color: var(--ink);
  border: 1.5px solid var(--ink); background: var(--paper2); padding: 5px 12px;
  cursor: pointer; user-select: none; box-shadow: 2px 2px 0 rgba(29,38,55,.22);
  transition: background .15s ease, color .15s ease;
}
.notecard .backbtn:hover { background: var(--ink); color: var(--paper2); }
.notecard .nb { font-size: 13px; line-height: 1.95; color: var(--ink2); }
.notecard .nb p { margin: 7px 0; }
.notecard .nb b { color: var(--ink); }

/* 讲义卡五段式 */
.notecard .nb .sec { margin: 0 0 15px; }
.notecard .nb .sec-h {
  display: flex; align-items: center; gap: 8px;
  font: 800 11px var(--mono); letter-spacing: .2em; color: var(--ink);
  margin: 0 0 7px;
}
.notecard .nb .sec-h::before { content: ""; width: 8px; height: 8px; background: var(--verm); flex: none; }
.notecard .nb .sec-b { font-size: 13px; line-height: 1.95; color: var(--ink2); }
.notecard .nb .sec-b p { margin: 6px 0; }
.notecard .nb .sec-b p:first-child { margin-top: 0; }
.notecard .nb .sec-b b { color: var(--ink); }
.notecard .nb .sec-b .fr { vertical-align: -.5em; }
.notecard .nb .sec-b sub, .notecard .nb .sec-b sup { font-size: .68em; line-height: 0; }

/* 公式段：深色描边盒子 */
.notecard .nb .sec.formula .sec-h::before { background: var(--blue); }
.notecard .nb .sec.formula .sec-b {
  border: 1.5px solid var(--ink); background: var(--paper);
  padding: 13px 16px; font-family: var(--serif); font-size: 15.5px;
  line-height: 2.2; color: var(--ink); overflow-x: auto;
}
/* 陷阱段：朱红告警 */
.notecard .nb .sec.trap .sec-h::before { background: var(--verm); }
.notecard .nb .sec.trap .sec-b {
  border: 1.5px solid var(--verm); background: rgba(194,64,47,.06);
  padding: 10px 14px; font-size: 12.8px; line-height: 1.9;
}
.notecard .nb .sec.trap .sec-b b { color: var(--verm); }
/* Sanity check 段：绿色 */
.notecard .nb .sec.check .sec-h::before { background: var(--green); }
/* 数字例段：等宽 */
.notecard .nb .sec.eg .sec-h::before { background: var(--orange); }
.notecard .nb .sec.eg .sec-b { font-family: var(--sans); }

/* ---------- title block（图框标题栏）---------- */
.tb-note {
  margin-top: 36px; font-size: 11px; color: var(--faint);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.tblock {
  margin-top: 9px; border: 1.5px solid var(--ink); background: var(--paper2);
  box-shadow: var(--shadow);
  display: grid; grid-template-columns: 2.4fr 1.1fr .7fr 1fr .9fr 1.2fr .9fr;
}
.tb { padding: 11px 15px; border-left: 1px solid var(--rule2); }
.tb:first-child { border-left: none; }
.tb .l { font-size: 9.5px; letter-spacing: .24em; color: var(--faint); font-weight: 700; margin-bottom: 5px; }
.tb .v { font: 700 13px var(--mono); color: var(--ink); letter-spacing: .04em; }
.tb.name .v { font-family: var(--sans); font-weight: 800; font-size: 15.5px; letter-spacing: .03em; }
.tb.name .e { font: 600 8.5px var(--mono); letter-spacing: .26em; color: var(--faint); margin-top: 4px; }

/* ---------- 空态 ---------- */
.empty { text-align: center; padding: 70px 20px; color: var(--ink2); }
.empty .big { font-family: var(--serif); font-size: 22px; color: var(--ink); margin-bottom: 8px; }

/* ---------- 返回顶部 ---------- */
#toTop {
  position: fixed; right: 18px; bottom: 18px; z-index: 70;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  font: 700 15px var(--mono); color: var(--ink);
  background: var(--paper2); border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(29,38,55,.25);
  cursor: pointer; opacity: 0; pointer-events: none;
  transition: opacity .2s ease, background .15s ease, color .15s ease;
}
#toTop.show { opacity: 1; pointer-events: auto; }
#toTop:hover { background: var(--ink); color: var(--paper2); }

/* ============================================================
   公式排版原子类（renderMath 输出）
   ============================================================ */
/* 分式 */
.fr {
  display: inline-flex; flex-direction: column; align-items: stretch;
  vertical-align: -.58em; text-align: center;
  margin: 0 .24em; white-space: nowrap;
}
.fr > .nu { display: block; padding: 0 .34em .12em; border-bottom: 1.2px solid currentColor; line-height: 1.3; }
.fr > .de { display: block; padding: .12em .34em 0; line-height: 1.3; }

/* 根号 */
.sq { display: inline-flex; align-items: flex-start; }
.sq::before { content: '√'; font-size: 1.06em; line-height: 1.05; transform: scaleY(.92); transform-origin: left bottom; }
.sq > span { border-top: 1.3px solid currentColor; padding: .16em .24em 0 .06em; margin-left: -.05em; line-height: 1.35; }
.sq > span > .fr { vertical-align: 0; }
.sq > .sb { margin-right: -.35em; }

/* 上下标 */
.sb { font-size: .72em; vertical-align: -.28em; padding: 0 .04em; }
.sp { font-size: .72em; vertical-align: .48em; padding: 0 .04em; }
.sbsp { display: inline-flex; flex-direction: column; vertical-align: .52em;
        font-size: .72em; line-height: 1.18; margin-left: .1em; text-align: left; }
.sbsp i { font-style: normal; }
.sb + .sbsp, .sp + .sbsp { vertical-align: .52em; }

/* 大运算符 / 积分 */
.op { display: inline-flex; flex-direction: column; align-items: center;
      vertical-align: middle; margin: 0 .18em; line-height: 1; }
.op .op-s { font-size: 1.5em; line-height: .95; }
.op .op-l { font-size: .62em; line-height: 1.2; font-style: normal; }
.inn { display: inline-block; font-size: 1.5em; line-height: 1; vertical-align: -.16em; font-family: Georgia,serif; }

/* 矩阵 / 行列式：括号用 CSS 画，避免字体缺字 */
.mx { display: inline-flex; align-items: stretch; vertical-align: middle; margin: 0 .24em; font-size: .94em; line-height: 1.34; }
.mx > .mx-g { display: grid; gap: .3em 1.05em; text-align: center; padding: .3em .2em; align-self: center; }
.mx > .mx-g > span { display: block; white-space: nowrap; }
.mx-b { align-self: stretch; width: .14em; flex: 0 0 auto; background: currentColor; border-radius: .05em; }
.mx-p { align-self: stretch; width: .34em; flex: 0 0 auto; position: relative; border: 1.4px solid currentColor; border-radius: .1em; }
.mx-p.l { border-right: 0; border-radius: .34em 0 0 .34em; }
.mx-p.r { border-left: 0;  border-radius: 0 .34em .34em 0; }
.mx-sq { align-self: stretch; width: .34em; flex: 0 0 auto; position: relative; border: 1.4px solid currentColor; }
.mx-sq.l { border-right: 0; }
.mx-sq.r { border-left: 0; }
.mx-sq::after { content: ''; position: absolute; left: 0; right: 0; height: 1.4px; background: currentColor; }
.mx-sq.l::after { top: 0; }
.mx-sq.r::after { bottom: 0; }

/* 其他 */
.vec { border-top: 1.2px solid currentColor; }
.bar { border-top: 1.2px solid currentColor; padding-top: .04em; }
.lim { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 .2em; line-height: 1.05; }
.lim .lim-s { font-size: 1.4em; }
.lim .lim-u { font-size: .62em; line-height: 1.2; }
.tfrac { font-size: .96em; white-space: nowrap; }

/* ---------- 备注字段用的轻量分式 / 根号（参考站 .frac 写法）----------
   这些出现在 n / t 纯文本字段里，不经过 renderMath。 */
.frac { display: inline-block; text-align: center; vertical-align: middle; margin: 0 2px; }
.frac .n { display: block; border-bottom: 1.3px solid var(--ink); padding: 0 4px 1px; }
.frac .d { display: block; padding: 1px 4px 0; }
.sqrt { white-space: nowrap; }
.sqrt .sq-x { border-top: 1.2px solid currentColor; padding: .1em .22em 0 .08em; margin-left: -.05em; }
sub, sup { font-size: .68em; line-height: 0; }

/* ============================================================
   动效
   ============================================================ */
@keyframes riseIn   { from { opacity: 0; transform: translateY(14px); } }
@keyframes fadeT    { from { opacity: 0; } }
@keyframes ants     { to { transform: translateX(19.8px); } }
@keyframes bob2     { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes spin     { to { transform: rotate(360deg); } }

header, .stats, .ruler, .note, .vol, .tb-note, .tblock, .ch, .ncstrip {
  animation: riseIn .55s cubic-bezier(.22,1,.36,1) backwards;
}
/* #toTop 是 JS 后注入的，不参与入场动画组；单独给一条无延迟的淡入，
   否则一旦被后续规则继承 riseIn 的 delay，首屏也会被推迟显示 */
#toTop { animation: none; }
.stats   { animation-delay: .08s; }
.ruler   { animation-delay: .14s; }
.note    { animation-delay: .2s; }
.vol:nth-child(2) { animation-delay: .1s; }
.vol:nth-child(3) { animation-delay: .16s; }
.tb-note { animation-delay: .3s; }
.tblock  { animation-delay: .34s; }

/* 动画时钟被冻结时的保险丝：2.2s 后入场动画全部到位（常驻动效不受影响） */
html.settled header, html.settled .stats, html.settled .ruler, html.settled .note,
html.settled .vol, html.settled .tb-note, html.settled .tblock,
html.settled .ch, html.settled .ncstrip { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1080px) {
  .deco { display: none; }
  .wrap { padding: 40px 30px 80px; }
}

@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { border-top: 1px solid var(--rule2); }
  .stat:nth-child(-n+2) { border-top: none; }
  .stat:nth-child(odd) { border-left: none; }
  .tblock { grid-template-columns: repeat(3, 1fr); }
  .tb { border-top: 1px solid var(--rule2); }
  .tb:nth-child(-n+3) { border-top: none; }
  .tb:nth-child(3n+1) { border-left: none; }
}

@media (max-width: 560px) {
  .wrap { padding: 22px 14px 44px; }
  header { gap: 12px; }
  .brand h1 { font-size: 25px; }
  .brand .sub { font-size: 11.5px; }
  .brand .byline { font-size: 10px !important; letter-spacing: .08em !important; }
  .brand .byline .mail { font-size: 12px; }

  .dim { min-width: 0; padding: 0 10px; width: 100%; }
  .dim::before, .dim::after { display: none; }
  .dim .n { font-size: 58px; }
  .dim .cap { font-size: 9px; letter-spacing: .16em; }
  .dim .cap2 { font-size: 10px; letter-spacing: .18em; }

  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 11px 12px 10px; }
  .stat .k { font-size: 9.5px; }
  .stat .v { font-size: 20px; }

  .ruler { flex-direction: column; }
  .seg { border-left: none; border-top: 1.5px dashed var(--rule); }
  .seg:first-child { border-top: none; }
  .seg.cur::before { top: 12px; right: 12px; }

  .vol-h { flex-wrap: wrap; align-items: baseline; }
  .vol-h h2 { font-size: 18px; }
  .vol-h h2 small { display: block; margin: 4px 0 0; }
  .vol-h .vstat { width: 100%; text-align: left; }
  .chapters { grid-template-columns: 1fr; gap: 14px; }

  .ch { padding: 14px 13px 13px; }
  .ch .num { font-size: 48px; }
  .ch h3 { font-size: 15.5px; padding-right: 34px; }
  .exrow { flex-wrap: wrap; row-gap: 6px; }
  .exrow .exprog { margin-left: auto; }
  .note { flex-wrap: wrap; row-gap: 8px; }
  .note .hint { display: none; }
  #kp-search { width: 100%; margin-top: 9px; }
  .foldbtn { margin-left: 0; }

  .notecard { padding: 16px 13px 20px; max-height: 92vh; }
  .notecard .nh { gap: 9px; flex-wrap: wrap; }
  .notecard .nb { font-size: 12.5px; line-height: 1.85; }
  .notecard .nb .sec.formula .sec-b { font-size: 14px; padding: 11px 12px; }

  .tb-note { font-size: 10px; }
  .tblock { grid-template-columns: 1fr 1fr; }
  .tb { border-top: 1px solid var(--rule2); }
  .tb:nth-child(-n+2) { border-top: none; }
  .tb:nth-child(2n+1) { border-left: none; }
  .tb:nth-child(2) { border-left: 1px solid var(--rule2); }
  .tb.name { grid-column: 1 / -1; border-left: none !important; }

  #toTop { right: 12px; bottom: 12px; }
}

@media (max-width: 380px) {
  .brand h1 { font-size: 22px; }
  .stats { grid-template-columns: 1fr; }
  .stat { border-left: none !important; }
  .stat:nth-child(2) { border-top: 1px solid var(--rule2); }
}

/* ---------- 打印 ---------- */
@media print {
  body { background: #fff; }
  .frame, .corners, .deco, .note, #toTop, .notewrap, .foldbtn, #kp-search { display: none !important; }
  .ch .pts { grid-template-rows: 1fr !important; }
  .ch { break-inside: avoid; box-shadow: none !important; }
  .wrap { padding: 0; max-width: none; }
}