/* proxyquill.com — 场与纸 · 申报文件质感 */

@font-face {
  font-family: "Familjen Grotesk";
  src: url("../fonts/familjen-grotesk-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2212;
}
@font-face {
  font-family: "Spline Sans Mono";
  src: url("../fonts/spline-sans-mono-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2212;
}

:root {
  --paper: #f7f8f4;
  --paper-2: #eceee6;
  --field: #8f9c93;
  --field-deep: #7d8a81;
  --ink: #16191a;
  --ink-soft: #4a524e;
  /* 压在草绿底（--field）上的弱化文字：#4a524e 在那上面只有 2.82，
     不到 AA 的 4.5。这个值是 4.64。仅用于版心之外的小字。 */
  --on-field: #2b312e;
  --rule-hair: #c8cfc9;
  --spot: #8c2f39;
  --spot-mid: #b06a70;
  --spot-weak: #e8d5d6;

  --f-lat: "Familjen Grotesk", system-ui, sans-serif;
  --f-num: "Spline Sans Mono", ui-monospace, monospace;
  --f-cjk: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;

  --shadow-hard: 4px 4px 0 var(--ink);
  --pad: clamp(0.85rem, 2.2vw, 1.6rem);
}

/* 正文字体栈 --f-cjk 里只有中文字体，西里尔字母会落到苹方/微软雅黑的西里尔字形上，
   观感是「中文字体在写乌克兰语」。给 lang=uk 的子树换一套西里尔可用的系统栈；
   同时给 lang=zh-Hans 的子树显式恢复中文栈，这样乌语页里的「中文」切换项仍走苹方。 */
[lang="uk"] {
  --f-cjk: system-ui, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
}
[lang="zh-Hans"] {
  --f-cjk: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* 极窄屏兜底：任何单个组件失手也不该让整页横向滚动 */
html, body { overflow-x: clip; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--f-lat), var(--f-cjk);
  font-size: 16px;
  line-height: 1.65;
  background-color: var(--field);
  /* 账簿横线场：细横线铺底，不是渐变 */
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(22, 25, 26, 0.055) 0 1px,
    transparent 1px 28px
  );
}

a { color: var(--spot); text-underline-offset: 2px; }

/* 跳过导航。平时移出视口，拿到键盘焦点时落回左上角。 */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  padding: 0.6rem 1rem;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-cjk);
  font-size: 0.9rem;
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-hard);
}
.skip:focus { left: 0.5rem; top: 0.5rem; }
[id="main"]:focus { outline: none; }

/* 键盘焦点。站上既有浅纸底也有墨色报头与页脚，单一颜色的描边总有一边看不见：
   墨色环在浅底上是 16.6，在墨带上只有 1.0。所以深色带上换成纸色环（同样 16.6）。 */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}
.masthead :focus-visible,
.foot :focus-visible {
  outline-color: var(--paper);
}

/* 系统里开了「减少动态效果」就不做位移与平滑滚动 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--pad); }

/* ── 报头（墨带）───────────────────────────────────── */
.masthead {
  background: var(--ink);
  color: var(--paper);
  border-bottom: 4px solid var(--spot);
}
.masthead-in {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem 0 0.7rem;
}
.wordmark {
  font-family: var(--f-lat);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.35rem);
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark .dot { color: var(--spot-mid); }
.sections {
  display: flex;
  gap: 1.35rem;
  overflow-x: auto;
  scrollbar-width: none;
  font-family: var(--f-cjk);
  font-size: 0.86rem;
  padding-bottom: 0.2rem;
}
.sections::-webkit-scrollbar { display: none; }
.sections a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--paper);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.sections a:hover { border-bottom-color: var(--spot-mid); }

/* ── 语种切换器（右上角悬停下拉，各语种用自身写法）──── */
.langsel { position: relative; margin-left: 0.9rem; flex-shrink: 0; }
.langsel > button {
  font-family: var(--f-lat);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  background: transparent;
  border: 1px solid var(--spot-mid);
  border-radius: 2px;
  padding: 0.25rem 0.55rem;
  min-height: 44px;
  cursor: pointer;
  white-space: nowrap;
}
.langsel > button:hover,
.langsel > button[aria-expanded="true"] { background: var(--spot); border-color: var(--spot); }
.langsel ul {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  min-width: 130px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--spot);
  border-radius: 2px;
  display: none;
}
.langsel:not([data-enhanced]) ul:focus-within,
.langsel:not([data-enhanced]):hover ul,
.langsel:not([data-enhanced]):focus-within ul,
.langsel ul[data-open="1"] { display: block; }
.langsel li a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 0.7rem;
  font-family: var(--f-cjk);
  font-size: 0.84rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.langsel li a:hover { background: var(--spot-weak); }
.langsel li a[aria-current="true"] { font-weight: 700; color: var(--spot); }

@media (max-width: 640px) {
  .langsel { margin-left: 0; }
  .langsel ul { right: auto; left: 0; }
}

.colophon {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1.25rem;
  padding: 0.5rem 0 0.75rem;
  font-family: var(--f-cjk);
  font-size: 0.78rem;
  color: var(--ink);
  border-bottom: 1px solid var(--field-deep);
}
.colophon .stamp a { color: var(--on-field); text-decoration-color: var(--field-deep); }
.colophon .stamp a:hover { color: var(--spot); }
.colophon .stamp {
  font-family: var(--f-num);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-field);
}

/* ── 登记卡（首屏三件套）──────────────────────────── */
.registry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1.4rem;
  margin: 1.15rem 0 0.5rem;
  padding: 0.8rem 1rem 0.8rem 1.15rem;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-left: 7px solid var(--spot);
  box-shadow: var(--shadow-hard);
  border-radius: 2px;
}
.reg-field { display: flex; align-items: center; gap: 0.6rem; }
.reg-label {
  font-family: var(--f-lat);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.2;
}
.code {
  font-family: var(--f-num);
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.05rem 0.55rem;
  background: var(--spot-weak);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
}
.copy {
  font-family: var(--f-cjk);
  font-size: 0.84rem;
  min-height: 44px;
  min-width: 68px;
  padding: 0 0.9rem;
  background: var(--ink);
  color: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--spot);
  border-radius: 2px;
  cursor: pointer;
}
.copy:active { transform: translate(3px, 3px); box-shadow: none; }
.copy[data-done="1"] { background: var(--spot); border-color: var(--spot); box-shadow: 3px 3px 0 var(--ink); }
.benefit { font-family: var(--f-cjk); font-size: 0.92rem; line-height: 1.5; }
.benefit b { color: var(--spot); }
.reg-go {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  font-family: var(--f-cjk);
  font-size: 0.9rem;
  min-height: 44px;
  padding: 0 0.2rem;
  color: var(--spot);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}
.reg-go .arw { font-family: var(--f-num); transition: transform .15s; }
.reg-go:hover .arw { transform: translateX(3px); }
@media (max-width: 640px) { .reg-go { margin-left: 0; } }
.footnote a { color: var(--ink); text-underline-offset: 2px; }
.footnote {
  font-family: var(--f-cjk);
  font-size: 0.72rem;
  color: var(--on-field);
  line-height: 1.55;
  margin: 0 0 1.35rem;
  max-width: 78ch;
}

/* ── 通用纸卡 ─────────────────────────────────────── */
.sheet {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: var(--shadow-hard);
  border-radius: 2px;
  margin-bottom: 1.5rem;
}
.sheet-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0.2rem 0.9rem;
  padding: 0.75rem 1rem 0.65rem;
  border-bottom: 1.5px solid var(--ink);
  background: var(--paper-2);
}
.sheet-no {
  font-family: var(--f-num);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--spot);
  text-transform: uppercase;
}
.sheet-head h1,
.sheet-head h2 {
  margin: 0;
  font-family: var(--f-cjk);
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.sheet-head p {
  grid-column: 1 / -1;
  margin: 0.2rem 0 0;
  font-family: var(--f-cjk);
  font-size: 0.85rem;
  color: var(--ink-soft);
  max-width: 72ch;
}
.sheet-foot {
  border-top: 1px solid var(--rule-hair);
  padding: 0.6rem 1rem;
  font-family: var(--f-cjk);
  font-size: 0.78rem;
  color: var(--ink-soft);
}

/* ── 首屏抬头（只用在首页第一张纸卡）──────────────── */
.sheet-head.hero { display: block; padding: 1.55rem 1.15rem 1.3rem; }
.sheet-head.hero .sheet-no { display: block; margin-bottom: 0.6rem; }
.sheet-head.hero h1 {
  font-size: clamp(1.62rem, 4.1vw, 2.55rem);
  line-height: 1.26;
  margin: 0 0 0.85rem;
  max-width: 21ch;
}
.sheet-head.hero h1 em {
  font-style: normal;
  color: var(--spot);
  background-image: linear-gradient(to top, var(--spot-weak) 0.34em, transparent 0.34em);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.sheet-head.hero p {
  font-size: clamp(0.92rem, 1.15vw, 1.02rem);
  line-height: 1.78;
  color: var(--ink);
  max-width: 48ch;
  margin: 0;
  padding-left: 0.9rem;
  border-left: 3px solid var(--spot-mid);
}
@media (max-width: 640px) {
  .sheet-head.hero { padding: 1.15rem 0.9rem 1rem; }
  .sheet-head.hero h1 { max-width: none; }
}
/* Кирилиця вужча за ієрогліфи — рядок може бути довшим */
[lang="uk"] .sheet-head.hero h1 { max-width: 34ch; }
[lang="uk"] .sheet-head.hero p { max-width: 62ch; }
[lang="uk"] ol.desk { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }



/* ── 问询台（首页：一句问题落到一个小节）──────────── */
ol.desk {
  list-style: none;
  margin: 0;
  padding: 0.55rem 1rem 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 0 2.25rem;
}
ol.desk li { border-bottom: 1px dotted var(--rule-hair); }
ol.desk a {
  display: block;
  padding: 0.6rem 0.5rem 0.6rem 0.6rem;
  border-left: 3px solid transparent;
  color: var(--ink);
  text-decoration: none;
}
ol.desk a:hover,
ol.desk a:focus-visible { background: var(--spot-weak); border-left-color: var(--spot); }
ol.desk .q {
  display: block;
  font-family: var(--f-cjk);
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.55;
}
ol.desk a:hover .q { color: var(--spot); }
ol.desk .to {
  display: block;
  margin-top: 0.12rem;
  font-family: var(--f-cjk);
  font-size: 0.74rem;
  color: var(--ink-soft);
}
ol.desk .to::before { content: "→ "; font-family: var(--f-num); color: var(--spot); }
@media (max-width: 640px) {
  ol.desk { padding: 0.45rem 0.8rem 0.85rem; gap: 0; }
}

/* ── 关联度光谱 ───────────────────────────────────── */
.spectrum { padding: 1rem 1rem 0.5rem; overflow-x: auto; }
.spectrum svg { display: block; width: 100%; min-width: 620px; height: auto; }
.spectrum-note {
  font-family: var(--f-cjk);
  font-size: 0.76rem;
  color: var(--ink-soft);
  padding: 0 1rem 0.85rem;
  margin: 0;
}

/* ── 主表 ─────────────────────────────────────────── */
table.matrix { width: 100%; border-collapse: collapse; font-family: var(--f-cjk); font-size: 0.87rem; }
table.matrix thead th {
  background: var(--ink);
  color: var(--paper);
  text-align: left;
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  padding: 0.55rem 0.8rem;
  white-space: nowrap;
}
table.matrix td {
  border-bottom: 1px solid var(--rule-hair);
  padding: 0.75rem 0.8rem;
  vertical-align: top;
  line-height: 1.62;
}
table.matrix tbody tr:nth-child(even) td { background: rgba(22, 25, 26, 0.028); }
table.matrix tbody tr:last-child td { border-bottom: 0; }
table.matrix tbody tr:hover td { background: var(--spot-weak); }
td.type { width: 19%; font-weight: 700; }
td.type .idx {
  display: block;
  font-family: var(--f-num);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--spot);
  letter-spacing: 0.08em;
}
td.type a { text-decoration: none; border-bottom: 1.5px solid var(--spot); }
td.check a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--ink-soft); }
td.check a:hover { color: var(--spot); border-bottom-color: var(--spot); }

/* ── 条目流（密集索引即界面）──────────────────────── */
.index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 0 2.25rem;
  padding: 0.35rem 1rem 0.9rem;
}
.group-rule {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0.9rem 0 0.35rem;
  padding-bottom: 0.25rem;
  border-bottom: 1.5px solid var(--ink);
  font-family: var(--f-cjk);
  font-size: 0.82rem;
  font-weight: 700;
}
.group-rule .count {
  font-family: var(--f-num);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--ink-soft);
  margin-left: auto;
}
/* 分区名做成落地页链接时，沿用条目标题那套（墨色字 + 酒红下划线）。 */
.group-rule a { color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--spot); }
.group-rule a:hover { color: var(--spot); }
ol.entries { list-style: none; margin: 0; padding: 0; }
ol.entries li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.28rem 0;
  border-bottom: 1px dotted var(--rule-hair);
  font-family: var(--f-cjk);
  font-size: 0.84rem;
  line-height: 1.5;
}
ol.entries li:last-child { border-bottom: 0; }
ol.entries .no {
  font-family: var(--f-num);
  font-size: 0.7rem;
  color: var(--spot);
  min-width: 1.9rem;
  flex-shrink: 0;
}
ol.entries a { color: var(--ink); text-decoration: none; }
ol.entries a:hover { color: var(--spot); text-decoration: underline; }
ol.entries .kind {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--f-num);
  font-size: 0.63rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  border: 1px solid var(--rule-hair);
  padding: 0 0.3rem;
  text-transform: uppercase;
}
ol.entries .kind[data-k="tool"] { color: var(--spot); border-color: var(--spot-mid); }

/* ── 页脚 ─────────────────────────────────────────── */
.foot {
  background: var(--ink);
  color: var(--paper-2);
  border-top: 4px solid var(--spot);
  margin-top: 2rem;
}
.foot-in {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  padding: 1.1rem 0 1.4rem;
  font-family: var(--f-cjk);
  font-size: 0.78rem;
  line-height: 1.7;
}
.foot-in p { margin: 0; max-width: 62ch; }
.foot-in a { color: var(--paper); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  border-bottom: 1px solid var(--spot-mid);
}

/* ── 移动端 ───────────────────────────────────────── */
@media (max-width: 640px) {
  body { font-size: 15px; }
  .masthead-in { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 0.7rem 0 0.6rem; }
  .sections { width: 100%; }
  .registry { gap: 0.55rem 1rem; padding: 0.7rem 0.8rem 0.75rem 0.9rem; }
  .reg-field { width: 100%; }
  .benefit { font-size: 0.86rem; }

  table.matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.matrix tr { display: block; border-bottom: 1.5px solid var(--ink); padding: 0.45rem 0; }
  table.matrix tbody tr:last-child { border-bottom: 0; }
  table.matrix tbody tr:nth-child(even) td,
  table.matrix tbody tr:hover td { background: transparent; }
  table.matrix td {
    display: block;
    border-bottom: 0;
    padding: 0.3rem 0.8rem 0.45rem;
    width: auto;
  }
  table.matrix td::before {
    content: attr(data-field);
    display: block;
    margin-bottom: 0.1rem;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
  }
  td.type { font-size: 0.98rem; }
  .index-grid { gap: 0; padding: 0.4rem 0.8rem 0.8rem; }
}

/* ══ 文章页 / 工具页 / 列表页 ══════════════════════════ */

.doc { max-width: 1240px; margin: 0 auto; padding: 0 var(--pad); }

.crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.55rem 0 0.7rem;
  font-family: var(--f-cjk);
  font-size: 0.76rem;
  color: var(--on-field);
  border-bottom: 1px solid var(--field-deep);
}
.crumb a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-hair); }
.crumb a:hover { color: var(--spot); border-bottom-color: var(--spot); }
.crumb .sep { color: var(--on-field); }

article.paper {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: var(--shadow-hard);
  border-radius: 2px;
  margin: 1.15rem 0 1.5rem;
}
.doc-head { padding: 1.1rem 1.15rem 0.95rem; border-bottom: 1.5px solid var(--ink); background: var(--paper-2); }
.doc-kicker {
  font-family: var(--f-num);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--spot);
  margin: 0 0 0.35rem;
}
.doc-head h1 {
  margin: 0 0 0.5rem;
  font-family: var(--f-cjk);
  font-size: clamp(1.28rem, 3vw, 1.75rem);
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
  max-width: 30ch;
}
.doc-lede {
  margin: 0;
  font-family: var(--f-cjk);
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 62ch;
}
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule-hair);
  font-family: var(--f-cjk);
  font-size: 0.74rem;
  color: var(--ink-soft);
}
.doc-meta .k { font-family: var(--f-num); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; }

figure.article-cover { margin: 0; border-bottom: 1.5px solid var(--ink); background: var(--paper-2); }
figure.article-cover img { display: block; width: 100%; height: auto; }
figure.article-cover figcaption {
  padding: 0.45rem 1.15rem 0.55rem;
  font-family: var(--f-cjk);
  font-size: 0.73rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule-hair);
}

/* 页内示意图（内联 SVG，跟正文用同一套字与色）*/
figure.article-cover { overflow-x: auto; }
figure.article-cover svg { display: block; width: 100%; height: auto; background: var(--paper); }
.dgm-box   { fill: var(--paper);     stroke: var(--ink); stroke-width: 1.6; }
.dgm-box-k { fill: var(--spot-weak); stroke: var(--ink); stroke-width: 1.6; }
.dgm-box-d { fill: var(--ink);       stroke: var(--ink); stroke-width: 1.6; }
.dgm-line  { stroke: var(--ink);  stroke-width: 1.6; fill: none; }
.dgm-line-k{ stroke: var(--spot); stroke-width: 1.8; fill: none; }
.dgm-hair  { stroke: var(--rule-hair); stroke-width: 1; fill: none; }
.dgm-fill  { fill: var(--ink); }
.dgm-fill-k{ fill: var(--spot); }
.dgm-no  { font-family: var(--f-num); font-size: 11px; letter-spacing: 0.14em; fill: var(--spot); }
.dgm-t   { font-family: var(--f-cjk); font-size: 19px; font-weight: 700; fill: var(--ink); }
.dgm-t-r { font-family: var(--f-cjk); font-size: 19px; font-weight: 700; fill: var(--paper); }
.dgm-t2  { font-family: var(--f-cjk); font-size: 16px; font-weight: 700; fill: var(--ink); }
.dgm-s   { font-family: var(--f-cjk); font-size: 13px; fill: var(--ink-soft); }
.dgm-s-r { font-family: var(--f-cjk); font-size: 13px; fill: var(--paper-2); }
.dgm-k   { font-family: var(--f-cjk); font-size: 14px; fill: var(--spot); }
.dgm-m   { font-family: var(--f-num); font-size: 15px; fill: var(--ink); }
@media (max-width: 900px) {
  /* 窄屏上整张图会被缩到三分之一，字就没法看了。给它一个最小宽度让图
     横向滚动（和首页光谱、正文宽表一个做法）。不动字号——字号是 viewBox
     里的用户单位，一改就会顶出框外。 */
  figure.article-cover svg { width: auto; min-width: 900px; }
}

/* 页码表式目录 */
nav.toc { padding: 0.9rem 1.15rem 1rem; border-bottom: 1.5px solid var(--ink); }
nav.toc .toc-rule {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.4rem;
  padding-bottom: 0.2rem;
  border-bottom: 1.5px solid var(--ink);
  font-family: var(--f-cjk);
  font-size: 0.78rem;
  font-weight: 700;
}
nav.toc ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2.25rem; }
nav.toc li {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  break-inside: avoid;
  padding: 0.2rem 0;
  font-family: var(--f-cjk);
  font-size: 0.83rem;
}
nav.toc .no { font-family: var(--f-num); font-size: 0.68rem; color: var(--spot); min-width: 1.5rem; }
nav.toc a { color: var(--ink); text-decoration: none; }
nav.toc a:hover { color: var(--spot); text-decoration: underline; }

/* 正文 */
.prose { padding: 1.1rem 1.15rem 1.4rem; font-family: var(--f-cjk); font-size: 1rem; line-height: 1.85; }
.prose > * { max-width: 68ch; }
.prose > table, .prose > .scroll-x, .prose > figure { max-width: 100%; }
.prose h2 {
  margin: 2rem 0 0.7rem;
  padding-top: 0.5rem;
  border-top: 1.5px solid var(--ink);
  font-size: 1.16rem;
  font-weight: 700;
  line-height: 1.45;
  scroll-margin-top: 1rem;
}
.prose h2 .h-no {
  display: block;
  font-family: var(--f-num);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--spot);
}
.prose h3 { margin: 1.45rem 0 0.5rem; font-size: 1.02rem; font-weight: 700; scroll-margin-top: 1rem; }
.prose p { margin: 0 0 0.95rem; }
.prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.3rem; }
.prose li { margin-bottom: 0.4rem; }
.prose strong { font-weight: 700; }
.prose a { color: var(--spot); }
.prose code {
  font-family: var(--f-num);
  font-size: 0.9em;
  background: var(--paper-2);
  border: 1px solid var(--rule-hair);
  padding: 0.02em 0.3em;
  border-radius: 2px;
}

/* 结论前置句（GEO：AI 答案引擎摘的就是这句） */
.lead-answer {
  margin: 0 0 1rem;
  padding: 0.6rem 0.8rem;
  background: var(--spot-weak);
  border-left: 4px solid var(--spot);
  font-weight: 700;
  line-height: 1.75;
}
.note {
  margin: 1.1rem 0;
  padding: 0.7rem 0.85rem;
  background: var(--paper-2);
  border: 1px solid var(--rule-hair);
  border-left: 4px solid var(--ink);
  font-size: 0.92rem;
  line-height: 1.75;
}
.note .note-k {
  display: block;
  font-family: var(--f-num);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.2rem;
}

.scroll-x { overflow-x: auto; margin: 0 0 1.15rem; }
.prose table.data {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.86rem;
  line-height: 1.6;
}
.prose table.data caption {
  caption-side: top;
  text-align: left;
  font-size: 0.75rem;
  color: var(--ink-soft);
  padding-bottom: 0.35rem;
}
.prose table.data th {
  background: var(--ink);
  color: var(--paper);
  text-align: left;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  padding: 0.45rem 0.65rem;
}
.prose table.data td {
  border-bottom: 1px solid var(--rule-hair);
  padding: 0.55rem 0.65rem;
  vertical-align: top;
}
.prose table.data tbody tr:nth-child(even) td { background: rgba(22, 25, 26, 0.028); }
.prose table.data tbody tr:last-child td { border-bottom: 0; }
.prose table.data th[scope="row"] { background: var(--paper-2); color: var(--ink); font-weight: 700; }

/* 披露句（转化页专用） */
.aff-disclosure {
  margin: 1.1rem 0;
  padding: 0.75rem 0.9rem;
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-left: 6px solid var(--spot);
  font-size: 0.9rem;
  line-height: 1.75;
}
.aff-disclosure a[rel~="sponsored"] {
  display: inline-block;
  margin-top: 0.45rem;
  font-family: var(--f-cjk);
  font-weight: 700;
  color: var(--spot);
}

/* FAQ */
.faq { padding: 0 1.15rem 1.2rem; font-family: var(--f-cjk); }
.faq h2 {
  margin: 0 0 0.6rem;
  padding-top: 0.5rem;
  border-top: 1.5px solid var(--ink);
  font-size: 1.16rem;
}
.faq dt { font-weight: 700; margin-top: 0.9rem; font-size: 0.96rem; line-height: 1.6; }
.faq dd { margin: 0.3rem 0 0; font-size: 0.94rem; line-height: 1.8; }
.faq dl { margin: 0; }

/* 文末相邻条目 */
.next-up { border-top: 1.5px solid var(--ink); padding: 0.85rem 1.15rem 1rem; background: var(--paper-2); }
.next-up .group-rule { margin-top: 0; }

/* ── 工具页 ───────────────────────────────────────── */
.tool-panel { padding: 1.05rem 1.15rem 1.2rem; font-family: var(--f-cjk); }
.field-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(140px, 220px);
  gap: 0.5rem 1rem;
  align-items: start;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule-hair);
}
.field-row label { font-size: 0.9rem; font-weight: 700; line-height: 1.5; }
.field-row .hint { display: block; font-weight: 400; font-size: 0.75rem; color: var(--ink-soft); line-height: 1.6; margin-top: 0.15rem; }
.field-row input[type="number"],
.field-row input[type="text"] {
  width: 100%;
  min-height: 40px;
  font-family: var(--f-num);
  font-size: 1rem;
  padding: 0.25rem 0.5rem;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
}
.field-row input:focus { outline: 3px solid var(--spot-weak); border-color: var(--spot); }
.field-row input[type="range"] { width: 100%; accent-color: var(--spot); min-height: 44px; }

.readout {
  margin-top: 1rem;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  background: var(--paper-2);
}
.readout .r-head {
  background: var(--ink);
  color: var(--paper);
  padding: 0.4rem 0.7rem;
  font-family: var(--f-num);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.readout dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); margin: 0; }
.readout dt {
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--rule-hair);
  font-size: 0.88rem;
}
.readout dd {
  margin: 0;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--rule-hair);
  font-family: var(--f-num);
  font-size: 1.02rem;
  font-weight: 600;
  text-align: right;
  white-space: normal;
  overflow-wrap: anywhere;
}
.readout dt:last-of-type, .readout dd:last-of-type { border-bottom: 0; }
.readout .hi { color: var(--spot); }
.readout .r-note {
  grid-column: 1 / -1;
  padding: 0.5rem 0.7rem;
  border-top: 1px solid var(--rule-hair);
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.7;
  text-align: left;
  min-width: 0;
  white-space: normal;
}

.quiz-step { padding: 0.7rem 0; border-bottom: 1px solid var(--rule-hair); }
.quiz-step p { margin: 0 0 0.5rem; font-weight: 700; font-size: 0.94rem; line-height: 1.6; }
.quiz-opt { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.28rem 0; font-size: 0.9rem; line-height: 1.6; }
.quiz-opt input { margin-top: 0.4rem; min-width: 18px; min-height: 18px; accent-color: var(--spot); }
.btn-line { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.9rem; }
.btn {
  font-family: var(--f-cjk);
  font-size: 0.88rem;
  min-height: 44px;
  padding: 0 1rem;
  background: var(--ink);
  color: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--spot);
  border-radius: 2px;
  cursor: pointer;
}
.btn:active { transform: translate(3px, 3px); box-shadow: none; }
.btn.ghost { background: var(--paper); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }

.verdict { margin-top: 1rem; padding: 0.85rem 0.95rem; border: 1.5px solid var(--ink); border-left: 6px solid var(--spot); background: var(--paper); }
.verdict h2, .verdict h3 { margin: 0 0 0.4rem; font-size: 1.02rem; }
.verdict p { margin: 0 0 0.6rem; font-size: 0.92rem; line-height: 1.8; }
.verdict ul { margin: 0; padding-left: 1.25rem; font-size: 0.92rem; line-height: 1.75; }

.gloss dt { font-weight: 700; margin-top: 0.85rem; font-size: 0.96rem; }
.gloss dt .en { font-family: var(--f-num); font-size: 0.76rem; font-weight: 400; color: var(--ink-soft); margin-left: 0.4rem; }
.gloss dd { margin: 0.25rem 0 0; font-size: 0.93rem; line-height: 1.8; }
.gloss dl { margin: 0; }

/* ── 列表页 ───────────────────────────────────────── */
.list-lede { padding: 0.9rem 1.15rem 0.4rem; font-family: var(--f-cjk); font-size: 0.92rem; line-height: 1.8; color: var(--ink-soft); }
.list-lede p { margin: 0 0 0.6rem; max-width: 66ch; }
/* 目录页顶部的分区跳转条（放在 <nav> 里，和条目区分开）。 */
.lede-jump { display: block; margin: 0 0 0.55rem; font-size: 0.86rem; color: var(--on-field); }
.lede-jump a { color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--spot); }
.lede-jump a:hover { color: var(--spot); }
.lede-jump .sep { color: var(--on-field); margin: 0 0.35rem; }
.stack { padding: 0.35rem 1.15rem 1.1rem; }
.stack-item { padding: 0.75rem 0; border-bottom: 1px solid var(--rule-hair); font-family: var(--f-cjk); }
.stack-item:last-child { border-bottom: 0; }
.stack-item h2, .stack-item h3 { margin: 0 0 0.25rem; font-size: 1rem; line-height: 1.5; }
.stack-item h2 a, .stack-item h3 a { color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--spot); }
.stack-item h2 a:hover, .stack-item h3 a:hover { color: var(--spot); }
.stack-item .no { font-family: var(--f-num); font-size: 0.68rem; color: var(--spot); letter-spacing: 0.1em; }
.stack-item p { margin: 0.15rem 0 0; font-size: 0.87rem; line-height: 1.7; color: var(--ink-soft); max-width: 68ch; }

/* ── 404 ─────────────────────────────────────────── */
.err { padding: 1.6rem 1.15rem 1.8rem; font-family: var(--f-cjk); }
.err .big { font-family: var(--f-num); font-size: clamp(3rem, 12vw, 6rem); line-height: 1; color: var(--spot); margin: 0 0 0.5rem; }
.err h1 { margin: 0 0 0.6rem; font-size: 1.25rem; }
.err p { margin: 0 0 0.9rem; font-size: 0.94rem; line-height: 1.8; max-width: 58ch; }

@media (max-width: 640px) {
  nav.toc ol { columns: 1; }
  .field-row { grid-template-columns: 1fr; }
  .prose { padding: 0.95rem 0.85rem 1.2rem; }
  .doc-head, nav.toc, .faq, .next-up, .tool-panel, .stack, .list-lede { padding-left: 0.85rem; padding-right: 0.85rem; }
  figure.article-cover figcaption { padding-left: 0.85rem; padding-right: 0.85rem; }
}


/* ── 打印 ─────────────────────────────────────────────────────────
   这个站教的是「去翻文件」，读者把文章打出来或存成 PDF 带着对照是常事。
   去掉屏幕上的导航件与底色，把链接目标显出来，别让表格和图被切断。 */
@media print {
  html, body { background: #fff !important; color: #000; }
  body { font-size: 11pt; line-height: 1.55; }

  .skip, .masthead .sections, .langsel, .copy, .foot-links,
  .crumb, .next-up, .reg-go { display: none !important; }

  .masthead { background: #fff !important; color: #000; border-bottom: 2px solid #000; }
  .wordmark, .wordmark .dot { color: #000 !important; }
  .foot { background: #fff !important; color: #000; border-top: 1px solid #000; }
  .foot-in a { color: #000; }

  .sheet, article.paper, .registry, .tool-panel {
    box-shadow: none !important;
    border: 1px solid #000;
    background: #fff !important;
  }
  .sheet-head, .doc-head { background: #fff !important; }

  /* 正文里的链接把目标印出来，站内的补成完整地址 */
  .prose a[href^="/"]::after { content: " (proxyquill.com" attr(href) ")"; font-size: 0.85em; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; }
  .prose a { color: #000; text-decoration: underline; }

  /* 别在这些东西中间断页 */
  figure.article-cover, table, .note, .verdict, .scroll-x { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  figure.article-cover { overflow: visible; }
  figure.article-cover svg { width: 100% !important; min-width: 0 !important; }
  .scroll-x { overflow: visible; }
  table.data { font-size: 9.5pt; }

  /* 工具页打出来是空表，可以手填 */
  .field-row input { border: 1px solid #000; }
}