/* 书阶 · Looseleaf 风格
   视觉语言、配色与绘制引擎来自 Looseleaf（github.com/kevintngo/looseleaf，MIT）：
   桌面是青绿色亚麻，内容是摆在桌上的纸：笔记本页、便笺本、便利贴、索引卡、拍立得。
   颜色的含义：蓝墨水 = 孩子（“你写的字”），橙色马克笔 = 系列区间，荧光黄 = 舒适区。
   vendor/looseleaf.css 提供 --ll-* 色板、阴影和笔触图层的状态规则；这里是本站的版式。 */

/* ---------- 字体：英文 Kevin Sans（MIT），中文霞鹜文楷子集（OFL，见 fonts/） ---------- */
@font-face { font-family: "Kevin Sans Hand"; src: url("fonts/KevinSans-Regular.woff2?v=483e16e66c") format("woff2"); font-weight: 400; font-display: swap;
  size-adjust: 88%; ascent-override: 120.45%; descent-override: 60.23%; line-gap-override: 0%; }
@font-face { font-family: "Kevin Sans Hand"; src: url("fonts/KevinSans-Bold.woff2?v=4847a71a62") format("woff2"); font-weight: 700; font-display: swap;
  size-adjust: 88%; ascent-override: 120.45%; descent-override: 60.23%; line-gap-override: 0%; }
@font-face { font-family: "LXGW WenKai"; src: url("fonts/wenkai-400.woff2?v=10c9f91ab0") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "LXGW WenKai"; src: url("fonts/wenkai-500.woff2?v=e7a77d3d77") format("woff2"); font-weight: 500 700; font-display: swap; }

:root {
  --font-hand: "Kevin Sans Hand", "LXGW WenKai", "Kaiti SC", "STKaiti", "KaiTi", cursive;
  --ll-tex-relief: url("paper/relief.png");
  --ll-tex-slip: url("paper/slip.png");
  --ll-tex-fibre: url("paper/fibre.png");
  --ll-tex-cloud: url("paper/cloud.png");
  --ll-tex-linen: url("paper/linen.png");
  --ll-tex-kraft: url("paper/kraft.png");
  --zone: color-mix(in srgb, var(--ll-hi) 46%, transparent);
  --axis-w: 42%;
  --rule-gap: 34px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--ll-desk); overflow-x: clip; }
body { overflow-x: clip; }   /* 歪着的纸和胶带不能把页面撑出横向滚动 */
body {
  margin: 0; min-height: 100vh;
  color: var(--ll-ink);
  font: 17px/1.6 var(--font-hand);
  background-color: var(--ll-desk);
  background-image: var(--ll-desk-vignette), var(--ll-tex-linen);
  background-size: 100% 100%, 160px 160px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select { font: inherit; color: inherit; }
::selection { background: var(--ll-hi-select); color: var(--ll-ink); }
:focus-visible { outline: 2px solid var(--ll-focus); outline-offset: 3px; border-radius: 3px; }
/* 跳到正文：平时藏在页面上方，按 Tab 时滑下来 */
.skip {
  position: absolute; left: 16px; top: 0; z-index: 10; translate: 0 -120%; padding: 8px 14px;
  background: var(--ll-pad); color: var(--ll-ink); border: 1.5px solid var(--ll-ink); border-radius: 3px; box-shadow: var(--ll-shadow-slip);
}
.skip:focus-visible { translate: 0 12px; }
#results:focus, #main:focus { outline: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lv, .cnt, .ticks, .bk-m, .mini-r, .sp-facts dd, .summary b { font-variant-numeric: tabular-nums lining-nums; }

main, .foot { max-width: 1120px; margin: 0 auto; padding: 0 32px; }

/* ---------- 纸张：背景画在 ::before 上，纸可以微微歪，字不歪 ---------- */
.sheet { position: relative; isolation: isolate; --stock: var(--ll-paper); }
.sheet::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  border-radius: 1px;
  background-color: var(--stock);
  background-image: var(--ll-tex-fibre), var(--ll-tex-relief), var(--ll-tex-cloud), var(--ll-paper-light);
  background-size: 240px 240px, 192px 192px, 720px 720px, 100% 100%;
  box-shadow: var(--shadow, var(--ll-shadow-paper));
  rotate: var(--tilt, 0deg);
  transition: box-shadow var(--ll-dur-hover);
}
.sheet.fine::before { background-image: var(--ll-tex-fibre), var(--ll-tex-slip), var(--ll-tex-cloud), var(--ll-paper-light); background-size: 240px 240px, 128px 128px, 720px 720px, 100% 100%; }
.tape { position: absolute; z-index: 2; pointer-events: none; }
/* Looseleaf 给笔触加了一层“纸张颗粒”遮罩（SVG mask + PNG 纹理）。页面上近百处笔触，
   每次列表、柱子变化浏览器都要在 CPU 上重算这些遮罩，一次点击能卡 300–500ms；
   这个尺寸下颗粒肉眼几乎看不出，所以关掉。 */
svg[data-ink] [mask] { mask: none; }

/* ---------- 页眉：一张横条纸 ---------- */
.top {
  --stock: var(--ll-slip); --shadow: var(--ll-shadow-slip);
  max-width: 1056px; margin: 18px auto 0; padding: 10px 20px;
  display: flex; align-items: center; gap: 14px;
  width: calc(100% - 64px);
}
.mark { font-weight: 700; font-size: 24px; line-height: 1; letter-spacing: .14em; color: var(--ll-ink); text-decoration: none; padding: 4px 2px; }
.tagline { margin: 0; color: var(--ll-pencil-text); font-size: 15px; }

/* ---------- 主问句：一页横线笔记本 ---------- */
.hero {
  margin-top: 40px; padding: 56px 48px 34px 88px;
  --tilt: -.35deg;
  --lines: repeating-linear-gradient(to bottom, transparent 0 calc(var(--rule-gap) - 1px), color-mix(in srgb, var(--ll-rule-blue) 55%, transparent) calc(var(--rule-gap) - 1px) var(--rule-gap));
}
.hero::after {   /* 红色页边线 + 蓝色横线 */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; rotate: var(--tilt);
  background:
    linear-gradient(to right, transparent 60px, color-mix(in srgb, var(--ll-rule-red) 70%, transparent) 60px 61.5px, transparent 61.5px),
    var(--lines) 0 22px / 100% calc(100% - 22px) no-repeat;
}
.hero > .tape { top: -14px; left: 50%; translate: -50% 0; rotate: -2deg; }
.ask {
  margin: 0; font-weight: 400;
  font-size: clamp(26px, 4vw, 40px); line-height: 1.35;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .35em;
}
.ask label { cursor: text; }
.lex-field { position: relative; display: inline-flex; align-items: baseline; padding: 0 .12em .06em; }
.lex-field input {
  width: 3.3ch; border: 0; background: transparent; padding: 0;
  font-weight: 700; font-size: clamp(56px, 9.5vw, 104px); line-height: 1;
  color: var(--ll-ink-you); caret-color: var(--ll-ink-you);
  text-align: right; font-variant-numeric: tabular-nums lining-nums;
}
.lex-field input.long { font-size: clamp(34px, 5vw, 80px); }   /* 区间（如 1000–1090）字多，缩小到和标签放得进同一行 */
.lex-field input::placeholder { color: var(--ll-pencil-mark); }
.lex-field input:focus { outline: none; }
.lex-field:has(input:focus-visible) { outline: 2px solid var(--ll-focus); outline-offset: 4px; border-radius: 4px; }
.unit { font-size: clamp(30px, 4.6vw, 46px); line-height: 1; color: var(--ll-ink-you); margin-left: .06em; }
.hint { margin: 16px 0 0; color: var(--ll-ink-soft); min-height: 1.6em; max-width: 44em; font-size: 17px; }

/* 刻度尺：手绘柱状图 + 墨水滑块 */
.ruler { margin-top: 40px; position: relative; }
.bands { display: flex; align-items: flex-end; height: 92px; gap: 4px; }
.band {
  flex: 1; height: 100%; border: 0; padding: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; position: relative;
}
.band .bar { display: block; position: relative; min-height: 3px; transition: translate var(--ll-dur-hover) var(--ll-ease-settle); }
.band .cnt {
  position: absolute; left: 0; right: 0; top: -4px; text-align: center;
  font-size: 14px; color: var(--ll-pencil-text); opacity: 0; transition: opacity var(--ll-dur-fade);
}
.band:hover .cnt, .band:focus-visible .cnt, .band.on .cnt, .band.here .cnt { opacity: 1; }
.band.on .cnt, .band.here .cnt { color: var(--ll-ink); font-weight: 700; }
.band:hover .bar { translate: 0 -2px; }

.track { position: relative; height: 40px; }
.track > .rail { position: absolute; left: 0; right: 0; top: 14px; height: 12px; }
.slider {
  -webkit-appearance: none; appearance: none; position: relative; z-index: 1;
  display: block; width: 100%; margin: 0; height: 40px; background: transparent; cursor: pointer;
}
.slider::-webkit-slider-runnable-track { background: transparent; height: 40px; }
.slider::-moz-range-track { background: transparent; }
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 30px; margin-top: 5px; border: 0;
  border-radius: 46% 54% 50% 50% / 40% 40% 60% 60%;
  background: var(--ll-ink-you);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ll-ink) 45%, transparent), 0 2px 3px rgb(var(--ll-shade) / .3);
}
.slider::-moz-range-thumb {
  width: 22px; height: 30px; border: 0; border-radius: 46% 54% 50% 50% / 40% 40% 60% 60%;
  background: var(--ll-ink-you); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ll-ink) 45%, transparent), 0 2px 3px rgb(var(--ll-shade) / .3);
}
.slider:focus-visible { outline: none; }
.slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--ll-focus); outline-offset: 3px; }
.slider:focus-visible::-moz-range-thumb { outline: 2px solid var(--ll-focus); outline-offset: 3px; }
.is-all .slider::-webkit-slider-thumb { opacity: .35; }
.is-all .slider::-moz-range-thumb { opacity: .35; }
.ticks { display: flex; justify-content: space-between; font-size: 14px; color: var(--ll-pencil-text); margin-top: -2px; }

/* ---------- 结果：一本横线便笺本 ---------- */
.results { margin-top: 56px; padding: 30px 40px 0; --stock: var(--ll-pad); --shadow: var(--ll-shadow-pad); --tilt: 0deg; }
.results > .tape { top: -12px; right: 64px; rotate: 3deg; }
.toolbar { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-bottom: 18px; }
.summary { margin: 0; font-size: 21px; line-height: 1.5; flex: 1 1 18em; }
.summary b { font-weight: 700; }
.summary .link { font-size: 16px; margin-left: 12px; }
.controls { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.field { position: relative; display: inline-flex; align-items: center; height: 40px; }
.field input, .field select { height: 100%; border: 0; background: transparent; padding: 0 14px; font-size: 16px; }
.field input { color: var(--ll-ink-you); }
.field input::placeholder { color: var(--ll-placeholder); }
.field input:focus, .field select:focus { outline: none; }
.search input { width: 210px; }
.sel select { min-width: 8.2em; padding-right: 34px; -webkit-appearance: none; appearance: none; color: var(--ll-ink); cursor: pointer; }
/* 下拉菜单：支持可定制下拉框的浏览器（Chrome 135+）用 Looseleaf 的纸条样式在页面里画菜单；
   其他浏览器退回系统菜单，至少把底色换成纸色 */
.sel select option { background: var(--ll-slip); color: var(--ll-ink); }
@supports (appearance: base-select) {
  .sel select, .sel select::picker(select) { appearance: base-select; }
  .sel select { display: flex; align-items: center; }
  .sel select::picker(select) { min-inline-size: anchor-size(width); }
}
.sel::after {   /* 手写的小折角 */
  content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -6px; pointer-events: none;
  border-right: 2px solid var(--ll-ink-soft); border-bottom: 2px solid var(--ll-ink-soft); rotate: 42deg; border-radius: 0 1px 2px 1px;
}
.chips { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  position: relative; border: 0; background: transparent; padding: 4px 14px; min-height: 32px;
  font-size: 15px; color: var(--ll-ink-soft); cursor: pointer;
}
.chip[aria-pressed="true"] { color: var(--ll-ink); font-weight: 700; }
.chips { flex-direction: column; align-items: stretch; gap: 10px; }
.chips-g { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.chips-k { flex: none; width: 2.6em; font-size: 14px; color: var(--ll-pencil-text); }
.chips-more { font-size: 15px; margin-left: 4px; min-height: 32px; }

.link {
  border: 0; background: none; padding: 0; cursor: pointer; color: var(--ll-link);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--ll-link) 55%, transparent);
}
.link:hover { color: var(--ll-link-hover); text-decoration-color: currentColor; }

/* 刻度：列表上方一行，网格和每行右侧的小图对齐 */
.scale {
  display: grid; grid-template-columns: 60px 1fr var(--axis-w); gap: 0 22px; align-items: end;
  margin: 18px -40px 0; padding: 0 40px 6px; font-size: 13px; color: var(--ll-pencil-text);
}
.scale-k { grid-column: 1 / 3; line-height: 1.5; }
.scale-ax { position: relative; height: 1.4em; font-variant-numeric: tabular-nums lining-nums; }
.scale-ax span { position: absolute; bottom: 0; translate: -50% 0; white-space: nowrap; }
.scale-ax span:first-child { translate: 0 0; }
.scale-ax span:last-child { translate: -100% 0; }
.scale[hidden] { display: none; }
@media (max-width: 1000px) { .scale-ax span:nth-child(even) { visibility: hidden; } }   /* 窄了只留 BR、400、800、1200 */

/* 列表：每行右侧是同一把刻度尺，孩子的位置连成一条蓝墨水竖线 */
.list { list-style: none; margin: 0 -40px; padding: 0; --bl: 0%; --bw: 0%; border-top: 1.5px solid color-mix(in srgb, var(--ll-rule-red) 65%, transparent); }
.row {
  width: 100%; display: grid; grid-template-columns: 60px 1fr var(--axis-w); gap: 0 22px; align-items: center;
  padding: 0 40px; color: inherit; text-decoration: none; text-align: left;
  border-bottom: 1px solid var(--ll-pad-rule); cursor: pointer;
  transition: background-color var(--ll-dur-hover);
}
.row:hover { background: color-mix(in srgb, var(--ll-hi) 16%, transparent); }
.row:focus-visible { outline-offset: -3px; }
.t { padding: 14px 0; min-width: 0; }
.name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.en { font-weight: 700; font-size: 19px; line-height: 1.35; }
.zh { font-size: 15px; line-height: 1.4; color: var(--ll-ink-soft); letter-spacing: .04em; }
.row:hover .en { text-decoration: underline; text-decoration-color: var(--ll-marker); text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* 作者、年龄和标签：一行放得下就放一行；放不下时年龄和标签整体换到下一行，
   作者只在比整行还长时才截断（以前是作者让位给标签，窄屏上会被挤成“J…”甚至看不见） */
.by { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 14px; font-size: 14px; color: var(--ll-pencil-text); margin-top: 2px; }
.by .au { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.by .mt { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.by .age { margin-right: 2px; white-space: nowrap; }
.by .tag { margin-left: 0; }
/* 给家长的判断词：荧光笔涂一下，合适用黄（和系列页的舒适区同色），偏难用橙，轻松用便利贴的浅绿 */
.fit { padding: 0 7px; line-height: 1.45; font-size: .92em; font-weight: 700; color: var(--ll-ink); border-radius: 2px 7px 3px 8px / 6px 3px 7px 3px; white-space: nowrap; }
.fit-ok { background: color-mix(in srgb, var(--ll-hi) 75%, transparent); }
.fit-hard { background: color-mix(in srgb, var(--ll-marker) 30%, transparent); }
.fit-easy { background: color-mix(in srgb, var(--ll-sticky-green) 90%, transparent); }
.tag {
  display: inline-block; margin-left: 10px; padding: 0 6px; line-height: 1.4; font-size: .92em; color: var(--ll-orange-text);
  border: 1.5px solid color-mix(in srgb, var(--ll-marker) 70%, transparent); border-radius: 3px 8px 4px 9px / 8px 3px 9px 4px; rotate: -1.5deg;
}
.tag + .tag { margin-left: 6px; }
.tag:nth-of-type(even) { rotate: 1deg; }

/* 封面：拍立得式白边 + 轻微倾斜 */
.cover {
  position: relative; display: block; flex: none; aspect-ratio: 2 / 3; overflow: hidden;
  background: var(--ll-paper-shade); border: 3px solid var(--ll-photo); border-radius: 1px;
  box-shadow: var(--ll-shadow-slip); rotate: var(--ct, -1.2deg);
}
.cover .ph {
  position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 1em; line-height: 1; color: var(--ll-ink-soft);
  background: linear-gradient(90deg, color-mix(in srgb, var(--ll-ink) 18%, transparent) 0 3px, transparent 3px), var(--ll-tex-kraft) 0 0 / 192px 96px, var(--ll-kraft);
}
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s; }
.cover.loaded img { opacity: 1; }
.cover.seen img { transition: none; }
.cover.none img { display: none; }
li:nth-child(3n+2) > * > .cover, li:nth-child(3n+2) > .cover { --ct: .9deg; }
li:nth-child(3n) > * > .cover, li:nth-child(3n) > .cover { --ct: -.4deg; }
.c-row { width: 60px; font-size: 21px; align-self: center; }

.axis {
  position: relative; align-self: stretch; min-height: 66px;
  background-image: repeating-linear-gradient(to right, color-mix(in srgb, var(--ll-pad-rule) 70%, transparent) 0 1px, transparent 1px calc(100% / 7));
  background-size: calc(100% + 1px) 100%;
}
.is-point .axis::before, .is-band .axis::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--bl); width: max(2.5px, var(--bw)); translate: -1px 0; }
.is-point .axis::before { background: var(--ll-ink-you); opacity: .8; border-radius: 2px; }
.is-band .axis::before { background: var(--zone); translate: 0; }
.seg {   /* 马克笔一道 */
  position: absolute; top: 50%; height: 10px; margin-top: -5px; min-width: 10px;
  background: var(--ll-marker); opacity: .85;
  border-radius: 3px 8px 4px 9px / 8px 3px 9px 4px; rotate: -.4deg;
}
.seg.dot { width: 10px !important; margin-left: -5px; border-radius: 50% 45% 55% 50%; }
.lv {
  position: absolute; top: calc(50% + 9px); font-size: 14px; color: var(--ll-ink-soft); white-space: nowrap;
  background: var(--ll-pad); padding: 0 4px; margin-left: -4px; z-index: 1;
}
.row:hover .lv { background: color-mix(in srgb, var(--ll-hi) 16%, var(--ll-pad)); }

/* 翻页：铅笔圈出当前页 */
.pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; padding: 22px 0 30px; }
.pg {
  min-width: 2.2em; min-height: 36px; padding: 2px 10px; border: 1.5px solid transparent; background: none; cursor: pointer;
  font-size: 16px; color: var(--ll-ink-soft); border-radius: 3px 8px 4px 9px / 8px 3px 9px 4px;
}
.pg:hover:not(:disabled) { color: var(--ll-ink); border-color: var(--ll-pencil-mark); }
.pg[aria-current="page"] { color: var(--ll-ink-you); font-weight: 700; border-color: var(--ll-ink-you); rotate: -2deg; }
.pg:disabled { opacity: .35; cursor: default; }
.pg-gap { color: var(--ll-pencil-mark); padding: 0 2px; }
.empty { padding: 56px 0; text-align: center; color: var(--ll-ink-soft); }
.empty p { margin: 0 0 10px; }

/* ---------- 说明：一张黄色便利贴 ---------- */
.about {
  --stock: var(--ll-sticky-yellow); --shadow: var(--ll-shadow-sticky); --tilt: -1deg;
  max-width: 34em; margin: 64px auto 0; padding: 30px 32px 22px; color: var(--ll-ink-soft);
}
.about::before { background-image: var(--ll-sticky-sheen), var(--ll-tex-fibre), var(--ll-tex-cloud); background-size: 100% 100%, 240px 240px, 720px 720px; }
.about > .tape { top: -12px; left: 40px; rotate: -4deg; }
.about h2 { font-weight: 700; font-size: 21px; line-height: 1.4; color: var(--ll-ink); margin: 0 0 8px; }
.about p { margin: 0 0 10px; line-height: 1.75; }

/* ---------- 阅读级别说明页 ---------- */
.dt-link { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.dt-link:hover { color: var(--ll-link-hover); }
.sp-guide { margin: 10px 0 0; font-size: 15px; }
.guide { max-width: 46em; margin: 0 auto; }
.g-head { margin-top: 30px; padding: 44px 44px 30px; --tilt: -.25deg; }
.g-head > .tape { top: -14px; left: 50%; translate: -50% 0; rotate: -2deg; }
.g-head h1 { margin: 0; font-size: clamp(32px, 5vw, 46px); line-height: 1.25; font-weight: 700; }
.g-lede { margin: 14px 0 0; font-size: 18px; line-height: 1.8; color: var(--ll-ink-soft); }
.g-toc { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 14px; font-size: 15px; }
.g-toc a { display: inline-block; padding: 8px 0; }
.g-sec { margin-top: 40px; padding: 30px 40px 22px; scroll-margin-top: 20px; }
.g-sec h2 { margin: 0 0 10px; font-size: 26px; line-height: 1.35; font-weight: 700; }
.g-sec h3 { margin: 22px 0 6px; font-size: 19px; line-height: 1.4; font-weight: 700; scroll-margin-top: 20px; }
.g-sec p, .g-sec li { line-height: 1.85; }
.g-sec p { margin: 0 0 12px; }
.g-sec ul { margin: 0 0 12px; padding-left: 1.3em; }
.g-sec b { font-weight: 700; background: linear-gradient(transparent 58%, color-mix(in srgb, var(--ll-hi) 70%, transparent) 58%); }
.g-what { color: var(--ll-ink-you); }
.g-what b { background: none; }
.g-note { --stock: var(--ll-sticky-yellow); --shadow: var(--ll-shadow-sticky); --tilt: .4deg; }
.g-note::before { background-image: var(--ll-sticky-sheen), var(--ll-tex-fibre), var(--ll-tex-cloud); background-size: 100% 100%, 240px 240px, 720px 720px; }
.g-codes { margin: 6px 0 14px; display: grid; gap: 8px; }
.g-codes div { display: grid; grid-template-columns: 5.5em 1fr; gap: 12px; align-items: baseline; }
.g-codes dt { font-weight: 700; color: var(--ll-ink); }
.g-codes dd { margin: 0; line-height: 1.75; }
.g-legend div { grid-template-columns: 8.5em 1fr; }
.lg { display: inline-block; vertical-align: middle; margin-right: 8px; }
.lg-you { width: 3px; height: 18px; background: var(--ll-ink-you); border-radius: 2px; }
.lg-zone { width: 26px; height: 14px; background: var(--zone); border-radius: 3px 8px 4px 9px / 8px 3px 9px 4px; }
.lg-seg { width: 26px; height: 9px; background: var(--ll-marker); opacity: .85; border-radius: 3px 8px 4px 9px / 8px 3px 9px 4px; }
.lg-tape { width: 26px; height: 12px; background: color-mix(in srgb, var(--ll-marker) 35%, white); rotate: -6deg; }
.g-table-card { --stock: var(--ll-card); --shadow: var(--ll-shadow-card); --tilt: 0deg; }
.g-scroll { overflow-x: auto; margin: 6px -8px 12px; padding: 0 8px; }
.g-table { width: 100%; min-width: 34em; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums lining-nums; }
.g-table th, .g-table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid color-mix(in srgb, var(--ll-rule-blue, #9bb7d4) 70%, transparent); white-space: nowrap; }
.g-table thead th { font-size: 14px; color: var(--ll-pencil-text); border-bottom: 1.5px solid color-mix(in srgb, var(--ll-rule-red) 65%, transparent); }
.g-table tbody th { font-weight: 700; }
.g-small { font-size: 15px; color: var(--ll-ink-soft); }
@media (max-width: 720px) {
  .g-head { padding: 34px 20px 24px; }
  .g-sec { padding: 24px 18px 16px; margin-top: 30px; }
  .g-codes div, .g-legend div { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 480px) {
  .pager { gap: 2px; }
  .pg { min-width: 1.9em; padding: 2px 6px; font-size: 15px; }
  .pg-w { display: none; }
}

.foot { padding-bottom: 40px; font-size: 14px; color: var(--ll-ink-soft); }
.foot p { margin: 48px 0 0; }

/* ---------- 系列页 ---------- */
.crumb { margin: 20px 0 0; font-size: 16px; }
.crumb .link { display: inline-block; padding: 6px 0; }
.crumb .link { color: var(--ll-ink); text-decoration-color: color-mix(in srgb, var(--ll-ink) 40%, transparent); }
.sp-loading, .sp-missing { padding: 80px 0; color: var(--ll-ink); }
.sp { padding-bottom: 24px; }
.sp-head {
  margin-top: 30px; padding: 44px 44px 36px; --tilt: -.25deg;
  display: grid; grid-template-columns: 240px 1fr; grid-template-areas: "cover title" "cover info"; gap: 0 48px; align-items: start;
}
.sp-cover { grid-area: cover; position: relative; }
.sp-cover > .tape { top: -14px; left: 50%; translate: -50% 0; rotate: 3deg; z-index: 3; }
.c-sp { width: 100%; font-size: 72px; --ct: -1.6deg; border-width: 8px 8px 30px; box-shadow: var(--ll-shadow-card); }
.sp-title { grid-area: title; min-width: 0; padding-top: 4px; }
.sp-title h1 { margin: 0; font-weight: 700; font-size: clamp(30px, 4.6vw, 50px); line-height: 1.12; overflow-wrap: anywhere; }
.sp-zh { margin: 8px 0 0; font-size: 22px; line-height: 1.4; color: var(--ll-ink-soft); letter-spacing: .1em; }
.sp-by { margin: 12px 0 0; font-size: 16px; color: var(--ll-pencil-text); }
.sp-info { grid-area: info; min-width: 0; }

.sp-axis { position: relative; height: 80px; margin: 30px 0 8px; }
.sp-axis .rail { position: absolute; left: 0; right: 0; top: 38px; height: 12px; }
.sp-axis .seg { top: 44px; height: 12px; margin-top: -6px; }
.sp-axis .zone { position: absolute; top: 28px; height: 32px; background: var(--zone); border-radius: 4px 10px 5px 12px / 10px 4px 12px 5px; }
.sp-axis .needle { position: absolute; top: 18px; height: 50px; width: 2.5px; margin-left: -1px; background: var(--ll-ink-you); border-radius: 2px; }
.sp-axis .needle span { position: absolute; bottom: 100%; left: 50%; translate: -50% -2px; white-space: nowrap; font-size: 15px; font-weight: 700; color: var(--ll-ink-you); }
.sp-axis .end { position: absolute; top: 60px; font-size: 13px; color: var(--ll-pencil-text); }
.sp-axis .end.r { right: 0; }
.sp-note { margin: 0 0 22px; max-width: 34em; font-size: 18px; line-height: 1.65; color: var(--ll-ink-you); }

.sp-facts {   /* 索引卡：红色抬头线 + 蓝色横线 */
  --stock: var(--ll-card); --shadow: var(--ll-shadow-card); --tilt: .5deg;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5em, 1fr)); gap: 4px 28px; margin: 6px 0 0; padding: 22px 22px 12px;
}
.sp-facts::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; rotate: var(--tilt);
  background:
    linear-gradient(color-mix(in srgb, var(--ll-rule-red) 70%, transparent), color-mix(in srgb, var(--ll-rule-red) 70%, transparent)) 0 14px / 100% 1.5px no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 25px, color-mix(in srgb, var(--ll-rule-blue) 45%, transparent) 25px 26px) 0 22px / 100% calc(100% - 22px) no-repeat;
}
.sp-facts div { min-width: 0; }
.sp-facts .w { grid-column: span 2; }
.sp-facts .full { grid-column: 1 / -1; }   /* 插画人名常常很长，单占一整行 */
.sp-facts dt { font-size: 13px; color: var(--ll-pencil-text); }
.sp-facts dd { margin: 0; font-size: 17px; line-height: 1.5; }

.sp-blurb {   /* 用胶带贴上去的引文纸条 */
  --stock: var(--ll-slip); --shadow: var(--ll-shadow-slip); --tilt: .6deg;
  margin: 44px 0 0; max-width: 46em; padding: 24px 26px 16px 30px;
}
.sp-blurb > .tape { top: -12px; left: 24px; rotate: -3deg; }
.sp-blurb blockquote { margin: 0; font-size: 17px; line-height: 1.75; hyphens: auto; }
.sp-blurb figcaption { margin-top: 8px; font-size: 14px; color: var(--ll-pencil-text); }
.sp-blurb a { color: inherit; text-underline-offset: 3px; }

.sp-section { margin-top: 56px; }
.sp h2 { margin: 0; font-weight: 700; font-size: 24px; line-height: 1.4; }
.sp-cap { margin: 4px 0 0; font-size: 15px; color: var(--ll-ink-soft); }

.sp-curve { padding: 28px 32px 22px; --stock: var(--ll-graph); --shadow: var(--ll-shadow-card); --tilt: -.3deg; }
.sp-curve::after {   /* 方格纸 */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; rotate: var(--tilt);
  background-image: linear-gradient(color-mix(in srgb, var(--ll-check-rule) 22%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--ll-check-rule) 22%, transparent) 1px, transparent 1px);
  background-size: 20px 20px;
}
.curve-box { position: relative; margin-top: 16px; contain: inline-size; }
.curve-box > svg.axes { display: block; overflow: visible; position: relative; z-index: 1; }
.curve-box .g { stroke: color-mix(in srgb, var(--ll-pencil-mark) 60%, transparent); stroke-dasharray: 2 4; }
.curve-box .yl, .curve-box .xl { fill: var(--ll-pencil-text); font-size: 13px; font-family: var(--font-hand); }
.curve-box .yl { text-anchor: end; }
.curve-box .xl.r { text-anchor: end; }
.curve-box .pt { fill: transparent; cursor: pointer; }
.curve-box .pt:hover, .curve-box .pt:focus-visible { fill: color-mix(in srgb, var(--ll-hi) 55%, transparent); outline: none; stroke: var(--ll-ink); stroke-width: 1.5; }
.curve-box > .ink { position: absolute; inset: 0; z-index: 0; }

.sp-books { padding-top: 8px; }
.sp-books-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; }
.sp-books-head p { margin: 0; flex: 1 1 auto; font-size: 16px; color: var(--ll-ink-soft); }
.shelf {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 40px 26px;
}
.bk { position: relative; min-width: 0; scroll-margin: 120px; border-radius: 4px; }
.c-bk { width: 100%; font-size: 34px; border-width: 6px 6px 20px; box-shadow: var(--ll-shadow-card); }
.bk > .tape { top: -12px; left: 50%; translate: -50% 0; rotate: var(--tt, -3deg); }
.bk:nth-child(even) > .tape { --tt: 4deg; }
.bk-n { display: block; margin-top: 12px; font-size: 13px; color: var(--ll-ink-soft); }
.bk-t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-weight: 700; font-size: 16px; line-height: 1.35; }
.bk-n + .bk-t { margin-top: 0; }
.cover + .bk-t { margin-top: 12px; }
.bk-m { display: block; margin-top: 4px; font-size: 13px; color: var(--ll-ink-soft); }
.bk-m i { display: inline-block; width: .9em; }
.bk.fit .lex { color: var(--ll-ink); font-weight: 700; background: var(--zone); padding: 0 3px; border-radius: 3px 8px 4px 9px / 8px 3px 9px 4px; }
.bk.flash { animation: flash 1.6s ease-out; }
@keyframes flash { from { box-shadow: 0 0 0 10px color-mix(in srgb, var(--ll-hi) 70%, transparent); } to { box-shadow: 0 0 0 10px transparent; } }

.minis { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px 22px; }
.mini {   /* 索引卡 */
  --stock: var(--ll-card); --shadow: var(--ll-shadow-card);
  display: flex; gap: 16px; align-items: center; padding: 14px 16px; height: 100%; color: inherit; text-decoration: none;
}
.minis li:nth-child(odd) .mini { --tilt: -.6deg; }
.minis li:nth-child(even) .mini { --tilt: .5deg; }
.mini:hover::before { box-shadow: var(--ll-shadow-lift); }
.mini:hover .en { text-decoration: underline; text-decoration-color: var(--ll-marker); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.c-mini { width: 48px; font-size: 18px; }
.mini-t { min-width: 0; display: flex; flex-direction: column; }
.mini .en { font-size: 17px; }
.mini .zh { font-size: 14px; }
.mini-r { font-size: 14px; color: var(--ll-pencil-text); }
.mini-r i { display: inline-block; width: .9em; }

@media (max-width: 720px) {
  main, .foot { padding: 0 16px; }
  .top { width: calc(100% - 32px); margin-top: 12px; padding: 8px 14px; }
  .tagline { font-size: 14px; }
  .hero { margin-top: 26px; padding: 40px 18px 24px 40px; }
  .hero::after { background: linear-gradient(to right, transparent 26px, color-mix(in srgb, var(--ll-rule-red) 70%, transparent) 26px 27.5px, transparent 27.5px), var(--lines) 0 22px / 100% calc(100% - 22px) no-repeat; }
  .ruler { margin-top: 30px; }
  .bands { height: 64px; gap: 2px; }
  .band .cnt { font-size: 12px; }
  .ticks span:nth-child(even) { visibility: hidden; }
  .results { margin-top: 40px; padding: 24px 16px 0; }
  .list { margin: 0 -16px; }
  .controls { justify-content: flex-start; }
  .sel { flex: 1 1 30%; }
  .sel select { width: 100%; }
  .search { flex: 1 1 100%; }
  .search input { width: 100%; }
  .row { grid-template-columns: 54px 1fr; gap: 0 14px; padding: 0 16px; }
  .by { gap: 3px 10px; line-height: 1.5; }
  .by .tag { line-height: 1.3; }
  .scale { grid-template-columns: 54px 1fr; gap: 0 14px; margin: 14px -16px 0; padding: 0 16px 4px; }
  .scale-k { display: none; }
  .scale-ax { grid-column: 2; margin-left: 86px; }
  .scale-ax span:nth-child(even) { visibility: hidden; }
  .chips { gap: 8px; }
  .chips-g { gap: 8px 6px; }
  .chips-k { width: 2.4em; }
  .chip { padding: 4px 12px; }
  .chips-more { margin-left: 0; }
  .mw { display: none; }
  .summary .link { margin-left: 0; }
  .sp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; padding: 18px 16px 10px; }
  .sp-facts .w { grid-column: 1 / -1; }
  /* 对照表：手机上每个年级一张小卡片，不用横向滚动 */
  .g-table { min-width: 0; }
  .g-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .g-table, .g-table tbody { display: block; }
  .g-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--ll-rule-blue, #9bb7d4) 70%, transparent); }
  .g-table tbody th { grid-column: 1 / -1; padding: 0 0 2px; border: 0; }
  .g-table td { display: block; padding: 0; border: 0; white-space: normal; }
  .g-table td::before { content: attr(data-label); display: block; font-size: 12px; color: var(--ll-pencil-text); }
  .bk-m { display: flex; flex-wrap: wrap; gap: 0 .55em; }
  .bk-m i { display: none; }
  .c-row { width: 54px; grid-row: 1 / span 2; align-self: start; margin-top: 14px; }
  .lex-field input.long { font-size: 40px; }   /* 手机上标签和数字本来就分两行，区间可以大一点 */
  /* 手机：蓝思数字固定在条的左边，每行从同一处起头；条缩短但各行同宽，仍共用一把刻度尺 */
  .axis { grid-column: 2; min-height: 22px; margin: 0 0 10px 86px; }
  .t { padding: 12px 0 2px; }
  .seg { top: 6px; margin-top: 0; }
  .lv, .row:hover .lv { left: -86px !important; right: auto !important; top: 1px; margin: 0; padding: 0; background: none; font-size: 13px; font-weight: 700; color: var(--ll-ink); }
  .about { margin-top: 44px; padding: 26px 22px 18px; }
  .crumb { margin-top: 18px; }
  .sp-head { grid-template-columns: 112px 1fr; grid-template-areas: "cover title" "info info"; gap: 0 20px; padding: 28px 18px 22px; margin-top: 22px; }
  .c-sp { font-size: 40px; border-width: 5px 5px 16px; }
  .sp-title { align-self: end; padding: 0; }
  .sp-zh { font-size: 17px; margin-top: 4px; }
  .sp-by { margin-top: 6px; font-size: 14px; }
  .sp-axis { margin-top: 26px; }
  .sp-blurb { margin-top: 34px; padding: 22px 18px 14px; }
  .sp-blurb blockquote { font-size: 16px; }
  .sp-section { margin-top: 44px; }
  .sp-curve { padding: 22px 14px 16px; }
  .shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 14px; }
  .c-bk { font-size: 24px; border-width: 4px 4px 12px; }
  .bk-t { font-size: 14px; }
  .minis { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}