/* p-resources.css — 资源栏目（v2，2026-10-09）：资源首页、线上课程与专栏、skills 包、资料包、白皮书、获取资料（表单）、资料获取协议。
   全站组件在 fyro.css；这里只写这几页自己的部件。资料包、白皮书是「可以下载的文件」：用纸片样张、文件卡（标题、页数、格式、下载按钮）、
   目录窗口表现。不做 3D、不做滚动入场；动效只有选项卡滑块（fyro.js）和悬停的 1px 上移。
   注意：本文件会进发布版，注释里不写下载目录的路径（gated 模式的发布构建会查所有文本文件）。
   10-27 删废话（Leon「小标、总数、过度解释、过度讨好的措辞和说法，全部删掉改掉」）：各节编号小标删了，节标题顶格（下面 .sec-head 一条）。 */

/* ---------- 节标题：前面没有小标，顶格 ---------- */
.sec-head .sec-title:first-child { margin-top: 0; }

/* ---------- 首屏补充 ---------- */
.page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; font-size: 14px; letter-spacing: 0.02em; color: var(--ink-soft); }
.page-meta .i { width: 16px; height: 16px; color: var(--muted); }
.page-hero .wait-line { margin-top: 30px; }
.page-hero .wait-line .wait-btn { margin-left: 0; padding: 6px 16px; font-size: 14px; }

/* 按钮里的箭头：悬停时下载（↓）往下、去别处（↗）往右上 */
.btn .arrow { display: inline-block; transition: translate 200ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .arrow { translate: 2px -2px; }
  .btn[download]:hover .arrow { translate: 0 2px; }
}

/* 纸片样张：白纸、细边、软阴影（资料包页、白皮书页共用） */
.sheet { display: block; width: 100%; height: auto; border: 1px solid rgb(var(--ink-rgb) / 0.1); border-radius: 3px; background: #fff; box-shadow: 0 1px 2px rgb(var(--shadow-rgb) / 0.08), 0 18px 34px -20px rgb(var(--shadow-rgb) / 0.38); }

/* 样张的底板：比纸深一层的一块，图放在上面 */
.res-pane { position: relative; display: grid; place-items: center; overflow: hidden; margin: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-2); box-shadow: inset 0 1px 2px rgb(var(--shadow-rgb) / 0.06); }
.res-pane > img { width: 100%; height: 100%; object-fit: cover; }
.res-pane.is-sheet { padding: 22px; background: linear-gradient(180deg, var(--paper-2), var(--paper-tint)); }
.res-pane.is-sheet > img { width: auto; height: 100%; max-height: 100%; object-fit: contain; border: 1px solid rgb(var(--ink-rgb) / 0.1); border-radius: 2px; box-shadow: 0 1px 2px rgb(var(--shadow-rgb) / 0.1), 0 20px 36px -18px rgb(var(--shadow-rgb) / 0.45); }

/* 相关服务、更新记录一类的收尾：左边小标题，右边一列 */
.res-tail-sec { padding-block: clamp(64px, 7vw, 96px); }
.sec + .res-tail-sec { padding-top: clamp(24px, 4vw, 56px); }
.sec-tint + .res-tail-sec { padding-top: clamp(64px, 7vw, 96px); }
.res-related { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.2fr); gap: 16px 64px; padding-top: 26px; border-top: 1.5px solid var(--ink); }
.res-related > h2 { font-family: var(--head); font-size: clamp(22px, 2.2vw, 28px); font-weight: var(--w-title); line-height: 1.35; letter-spacing: var(--track-title); }
.res-list { display: grid; }
.res-list > li { padding: 14px 0 15px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.9; color: var(--ink-soft); }
.res-list > li:first-child { padding-top: 2px; }
.res-list > li:last-child { border-bottom: 0; }
@media (max-width: 899px) { .res-related { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 资源首页 ---------- */
/* 01 四项资源：选项卡 + 每项一个窗口（面板叠放在 .tab-stack 里，一样高） */
.res-tabs .tab-panels { margin-top: 26px; }
.res-win { display: flex; flex-direction: column; }
.res-win-body { flex: 1; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 56px); align-items: center; padding: clamp(24px, 3.6vw, 44px); }
.res-win-text h3 { font-family: var(--head); font-size: clamp(28px, 2.8vw, 36px); font-weight: var(--w-title); line-height: 1.3; letter-spacing: var(--track-title); }
.res-state { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 3px 12px 3px 10px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--sheet-hi); font-size: 13px; letter-spacing: 0.03em; color: var(--ink-2); }
.res-state .i { width: 14px; height: 14px; color: var(--cinnabar-text); stroke-width: 2; }
.res-desc { max-width: 30em; margin-top: 18px; font-size: 15.5px; line-height: 1.95; color: var(--ink-soft); text-wrap: pretty; }
.res-win .res-pane { aspect-ratio: 16 / 10; width: 100%; }
@media (max-width: 899px) {
  .res-win-body { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .res-win .res-pane { order: -1; }
}
@media (max-width: 639px) {
  .res-tabs .seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .res-win-body { gap: 22px; padding: 18px 18px 22px; }
  .res-win .window-meta { display: none; }
  .res-pane.is-sheet { padding: 14px; }
}

/* 没有脚本、打印：不显示选项卡，四个窗口依次排开 */
html:not(.js) .res-tabs .seg { display: none; }
html:not(.js) .res-tabs .tab-stack { gap: 20px; }
html:not(.js) .res-tabs .tab-stack > * { grid-area: auto; visibility: visible; opacity: 1; translate: none; }
@media print {
  .res-tabs .seg { display: none; }
  .res-tabs .tab-stack { gap: 20px; }
  .res-tabs .tab-stack > * { grid-area: auto; visibility: visible !important; opacity: 1 !important; translate: none !important; }
}

/* 02 从哪一件开始：三张卡，卡顶是原来的小图（fig-spot-res-*，静止） */
.res-pick-fig { display: grid; place-items: center; height: 132px; margin: -8px -8px 22px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, var(--paper-2), var(--paper-tint)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5); }
.res-spot { display: block; width: 150px; height: 94px; }
.res-spot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.res-pick h3 { margin-top: 6px; font-size: 18px; }
.res-pick p { font-size: 14.5px; }
.res-more { margin-top: 28px; }
/* 资源首页的 h1 一行十个字：电脑上放得下一行（首屏文字栏放宽一点），放不下时在「成」后面折行（「工具和资料」不拆开） */
@media (min-width: 1024px) { .res-hero .page-hero-text { max-width: 840px; } }

/* ---------- 线上课程与专栏 ---------- */
.online-split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.online-forms { display: grid; gap: 16px; }
.online-side .note-line { margin-top: 22px; }
.online-fig { margin: 0; }
.online-fig .window { background: var(--paper-2); }
.online-shot { width: 100%; height: auto; }
.online-fig figcaption { margin-top: 12px; }
@media (max-width: 899px) {
  .online-split { grid-template-columns: minmax(0, 1fr); }
  .online-fig { order: -1; }
}
/* 文章目录（上线之前，可以先读）：标题常常两行，图标靠上；右边只有箭头，手机上不单占一行 */
.res-arts .link-row { align-items: start; }
.res-arts .link-icon { margin-top: 2px; }
.res-arts .link-kind { align-self: center; }
@media (max-width: 479px) { .res-arts .link-kind { display: none; } }

/* ---------- skills 包 ---------- */
/* 左文右图（01 技能库） */
.res-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.res-prose { display: grid; gap: 14px; max-width: 36em; font-size: 16px; line-height: 1.95; color: var(--ink-soft); text-wrap: pretty; }
.skill-pane { aspect-ratio: 16 / 10; }
.skill-pane a { display: block; width: 100%; height: 100%; }
.skill-pane img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: translate 200ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .skill-pane a:hover img { translate: 0 -1px; } }
@media (max-width: 899px) { .res-split { grid-template-columns: minmax(0, 1fr); } }

/* 卡片标题前的小序号（一、二……原文就有，写在 <small> 里） */
.skill-parts h3 small, .skill-pending h3 small { display: block; margin-bottom: 8px; font-family: var(--head); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; color: var(--accent-text-sm); }
.skill-note { margin-top: 24px; }

/* 03 样张：一整张纸 */
.skill-doc { margin: 0; }
.skill-sheet { position: relative; padding: clamp(24px, 4.4vw, 56px) clamp(20px, 4.4vw, 60px) clamp(22px, 3vw, 34px); border: 1px solid var(--line); border-radius: 6px; background: var(--sheet-hi); box-shadow: var(--window-shadow); }
.skill-sheet::after { content: ""; position: absolute; top: -1px; right: -1px; width: 28px; height: 28px; border-radius: 0 6px 0 0; background: linear-gradient(225deg, var(--paper) 50%, var(--paper-tint) 50%); box-shadow: -1px 1px 2px rgb(var(--shadow-rgb) / 0.08); }
.skill-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 32px; padding-bottom: 22px; border-bottom: 1.5px solid var(--ink); }
.skill-kicker { font-size: 12.5px; letter-spacing: 0.14em; color: var(--muted); }
.skill-head h3 { margin-top: 6px; font-family: var(--head); font-size: clamp(26px, 2.8vw, 34px); font-weight: var(--w-title); line-height: 1.3; letter-spacing: var(--track-title); }
.skill-sub { margin-top: 6px; font-size: 15px; color: var(--ink-soft); }
.skill-meta { font-size: 13px; line-height: 1.85; color: var(--muted); text-align: right; }
.skill-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.skill-sec { padding-block: 26px; border-bottom: 1px solid var(--line); }
.skill-row .skill-sec { border-bottom: 0; }
.skill-row { border-bottom: 1px solid var(--line); }
.skill-sec h4 { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; font-family: var(--head); font-size: 19px; font-weight: var(--w-title); letter-spacing: var(--track-tight); }
.skill-sec h4 small { font-size: 14px; letter-spacing: 0.06em; color: var(--accent-text-sm); }
.skill-sec .checks li { font-size: 14.5px; }
.skill-owner { margin-top: 14px; font-size: 14px; line-height: 1.8; color: var(--ink-soft); }
.skill-table { box-shadow: none; background: rgb(255 255 255 / 0.5); }
.skill-steps tbody th { white-space: nowrap; }
.skill-prompt { padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font-size: 14.5px; line-height: 1.85; color: var(--ink-2); }
.skill-prompt ol { display: grid; gap: 4px; margin-top: 8px; counter-reset: sp; }
.skill-prompt li { position: relative; padding-left: 1.6em; counter-increment: sp; }
.skill-prompt li::before { content: counter(sp) "."; position: absolute; left: 0; font-family: var(--mono); font-size: 12.5px; line-height: 2.1; color: var(--muted); }
.skill-fields { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.skill-fields > div { display: grid; align-content: start; gap: 6px; padding: 14px 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: rgb(255 255 255 / 0.55); }
.skill-fields b { font-size: 14.5px; letter-spacing: 0.02em; }
.skill-fields span { font-size: 13px; line-height: 1.7; color: var(--ink-soft); }
.skill-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; margin-top: 22px; font-size: 12px; letter-spacing: 0.04em; color: var(--muted); }
.skill-doc figcaption { margin-top: 14px; }
@media (max-width: 1023px) { .skill-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .skill-row { grid-template-columns: minmax(0, 1fr); }
  .skill-row .skill-sec + .skill-sec { border-top: 1px solid var(--line); }
  .skill-meta { text-align: left; }
  .skill-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 表格在手机上一行一块：步骤做小标题，两栏各带自己的列名（data-label） */
  .skill-steps thead { display: none; }
  .skill-steps, .skill-steps tbody, .skill-steps tr, .skill-steps th, .skill-steps td { display: block; }
  .skill-steps tr { padding: 12px 16px 14px; border-bottom: 1px solid var(--line); }
  .skill-steps tr:last-child { border-bottom: 0; }
  .table-wrap .skill-steps th, .table-wrap .skill-steps td { padding: 0; border: 0; }
  .skill-steps tbody th { font-size: 15px; }
  .skill-steps td { margin-top: 8px; }
  .skill-steps td::before { content: attr(data-label); display: block; font-size: 12px; color: var(--muted); }
}

/* ---------- 资料包 ---------- */
/* 01 五件：文件卡。上半是样张（纸从夹子里露出上半截），下半是标题、页数和格式、下载按钮；路线图是 A3 横版，占两格 */
.files { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.file-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--sheet); box-shadow: var(--sheet-shadow); transition: border-color 160ms ease-out, box-shadow 200ms ease-out, translate 200ms var(--ease); }
.file-card.is-wide { grid-column: span 2; }
.file-thumb { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 248px; padding: 28px 28px 0; overflow: hidden; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--paper-2), var(--paper-tint)); }
.file-thumb img { width: min(74%, 230px); height: auto; border: 1px solid rgb(var(--ink-rgb) / 0.1); border-bottom: 0; border-radius: 3px 3px 0 0; background: #fff; box-shadow: 0 1px 2px rgb(var(--shadow-rgb) / 0.08), 0 16px 30px -14px rgb(var(--shadow-rgb) / 0.4); align-self: flex-start; transition: translate 260ms var(--ease); }
.file-card.is-wide .file-thumb img { width: min(86%, 470px); }
.file-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 22px 22px; }
.file-body h3 { font-size: 17px; font-weight: var(--w-title); line-height: 1.5; letter-spacing: var(--track-tight); }
.file-body h3 a { transition: color 160ms ease-out; }
.file-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.file-meta span + span::before { content: ""; display: inline-block; width: 1px; height: 10px; margin-right: 14px; background: var(--line-2); vertical-align: -1px; }
.file-body .kit-dl { margin-top: auto; }
@media (hover: hover) and (pointer: fine) {
  .file-card:hover { translate: 0 -2px; border-color: rgb(var(--ink-rgb) / 0.2); box-shadow: var(--sheet-shadow-lift); }   /* 10-20：同 fyro.css 能点的卡片，抬起 2px */
  .file-card:hover .file-thumb img { translate: 0 -4px; }
  .file-body h3 a:hover { color: var(--cinnabar-text); }
}
.kit-license { margin-top: 28px; }
@media (max-width: 1023px) {
  .files { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  /* 手机上横过来：左边一小截样张，右边文字和按钮 */
  .files { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .file-card { flex-direction: row; }
  .file-card.is-wide { grid-column: auto; }
  .file-thumb { flex: none; width: 104px; height: auto; padding: 16px 0 0 16px; justify-content: flex-start; border-bottom: 0; border-right: 1px solid var(--line); }
  .file-thumb img, .file-card.is-wide .file-thumb img { width: 112px; max-width: none; }
  .file-body { gap: 6px; padding: 16px 16px 18px; }
  .file-body h3 { font-size: 16px; }
  .file-meta { flex-direction: column; gap: 0; font-size: 12.5px; }
  .file-meta span + span::before { display: none; }
  .file-body .kit-dl { margin-top: 8px; }
}

/* 02 每件：左边正反面样张，右边文字 */
.kit-fig { margin-top: 0; }
.kit-entries { margin-top: clamp(40px, 5vw, 64px); border-top: 1.5px solid var(--ink); }
.kit-entry { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 4.5vw, 64px); align-items: start; padding-block: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line-2); }
.kit-entry:last-child { border-bottom: 0; padding-bottom: 0; }
.kit-entry.is-wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.kit-pages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kit-pages.is-single { grid-template-columns: minmax(0, 1fr); }
.kit-pages figure { margin: 0; }
.kit-pages figcaption { margin-top: 10px; font-size: 12.5px; line-height: 1.7; color: var(--muted); }
.kit-body { min-width: 0; }
.kit-body h3, .kit-pair h3 { font-family: var(--head); font-size: clamp(22px, 2.2vw, 28px); font-weight: var(--w-title); line-height: 1.35; letter-spacing: var(--track-title); }
.kit-start { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 3px 12px 3px 10px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--sheet-hi); font-size: 13px; letter-spacing: 0.02em; color: var(--ink-2); }
.kit-start .i { width: 14px; height: 14px; color: var(--cinnabar-text); stroke-width: 1.8; }
.kit-lead { margin-top: 14px; font-size: 15.5px; line-height: 1.95; color: var(--ink-soft); text-wrap: pretty; }
.kit-facts { margin-top: 20px; }
.kit-facts > div { grid-template-columns: 7.4em minmax(0, 1fr); }
.kit-caution { margin-top: 18px; }
.kit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }
.kit-actions .btn { white-space: normal; text-align: left; }
.kit-actions .btn small { font-size: 12.5px; font-weight: 400; letter-spacing: 0.02em; opacity: 0.82; }
.kit-actions .btn-cinnabar small { opacity: 1; }   /* 朱键上压淡只剩 3.5–3.9:1，靠字重、字号分主次 */
.kit-ref { font-size: 13.5px; line-height: 1.8; color: var(--muted); }
@media (max-width: 1023px) {
  .kit-entry, .kit-entry.is-wide { grid-template-columns: minmax(0, 1fr); }
  .kit-pages { max-width: 560px; }
  .kit-entry.is-wide .kit-pages { max-width: none; }
}
@media (max-width: 479px) {
  .kit-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kit-pages { gap: 10px; }
}

/* 03 另外三件：自测（截图在右）、随课发放的两件 */
.kit-online { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 64px); align-items: start; }
.kit-online .kit-shot { grid-column: 2; grid-row: 1; margin: 0; }
.kit-online .kit-entry { grid-column: 1; grid-row: 1; display: block; padding: 0; border: 0; }
.kit-shot .window { background: var(--paper-2); }
.kit-shot img { display: block; width: 100%; height: auto; }
.kit-shot figcaption { margin-top: 12px; }
.kit-pair { margin-top: clamp(40px, 5vw, 64px); }
.kit-pair .card { padding: 26px 26px 22px; }
.kit-pair h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 22px; }
.kit-tag { display: inline-flex; padding: 1px 10px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--sheet-hi); font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; line-height: 1.75; color: var(--ink-soft); }
.kit-pair .kit-start { align-self: flex-start; margin-top: 12px; font-size: 13px; line-height: 1.75; color: var(--ink-2); }
@media (max-width: 899px) {
  .kit-online { grid-template-columns: minmax(0, 1fr); }
  .kit-online .kit-shot, .kit-online .kit-entry { grid-column: 1; grid-row: auto; }
}

/* ---------- 白皮书 ---------- */
.wp-hero-actions { margin-top: 34px; }
.wp-file-meta { font-size: 13.5px; line-height: 1.8; color: var(--muted); }

/* 01 问题：六张卡，右下角是对应的章 */
.wp-questions .card { justify-content: space-between; gap: 18px; min-height: 148px; }
.wp-questions .wp-q { margin-top: 0; font-size: 16.5px; font-weight: var(--w-title); line-height: 1.7; letter-spacing: var(--track-tight); color: var(--ink); text-wrap: pretty; }
.wp-questions .wp-q-ref { margin-top: 0; align-self: flex-start; padding: 1px 10px; border: 1px solid rgb(var(--accent-rgb) / 0.32); border-radius: 999px; font-size: 12.5px; letter-spacing: 0.06em; line-height: 1.75; color: var(--accent-text-sm); }
.wp-fig-block { margin-top: clamp(32px, 4vw, 48px); }
#fig-wp-path .fig-tall { display: none; }
@media (max-width: 1023px) { #fig-wp-path .fig-wide { display: none; } #fig-wp-path .fig-tall { display: block; max-width: 440px; margin: 0 auto; } }

/* 02 适合谁：一张对照表（部门、关心什么、先读哪几章） */
.wp-readers { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--sheet); box-shadow: var(--sheet-shadow); }
.wp-readers li { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr) auto; align-items: center; gap: 6px 28px; padding: 18px 24px; }
.wp-readers li + li { border-top: 1px solid var(--line); }
.wp-dept { font-family: var(--head); font-size: 18px; font-weight: 600; letter-spacing: 0.03em; }
.wp-why { font-size: 14.5px; line-height: 1.8; color: var(--ink-soft); }
.wp-read { justify-self: end; padding: 2px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--sheet-hi); font-size: 13px; white-space: nowrap; color: var(--ink-2); }
@media (max-width: 767px) {
  .wp-readers li { grid-template-columns: minmax(0, 1fr); align-items: start; padding: 16px 18px; }
  .wp-read { justify-self: start; margin-top: 4px; }
}

/* 03 包含什么：目录窗口 */
.wp-toc li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 4px 24px; align-items: start; padding: 24px clamp(18px, 3vw, 32px); }
.wp-toc li + li { border-top: 1px solid var(--line); }
.wp-toc li.is-appendix { background: rgb(var(--paper-rgb) / 0.55); }
.wp-toc-num { font-family: var(--head); font-size: 26px; font-weight: 600; line-height: 1.2; color: var(--cinnabar-text); }
.wp-toc-body h3 { font-family: var(--head); font-size: 19px; font-weight: var(--w-title); line-height: 1.5; letter-spacing: var(--track-tight); }
.wp-toc-body p { max-width: 46em; margin-top: 6px; font-size: 14.5px; line-height: 1.85; color: var(--ink-soft); }
.wp-toc-body .wp-src { margin-top: 8px; font-size: 13px; color: var(--muted); }
.wp-toc-page { padding-top: 4px; font-family: var(--mono); font-size: 12.5px; white-space: nowrap; color: var(--muted); }
@media (max-width: 639px) {
  .wp-toc li { grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; padding: 20px 18px; }
  .wp-toc-num { font-size: 21px; color: var(--accent-text-sm); }   /* 手机上 21px 算小字（桌面 26px 不动） */
  .wp-toc-page { grid-column: 2; padding-top: 2px; }
}

/* 04 预览：三张内页 */
.wp-pages li { display: grid; gap: 14px; }
.wp-page { display: block; border-radius: 3px; transition: translate 200ms var(--ease); }
.wp-page-cap { font-size: 14px; line-height: 1.7; color: var(--ink-soft); }
.wp-page-cap b { margin-right: 10px; font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--accent-text-sm); }
@media (hover: hover) and (pointer: fine) { .wp-page:hover { translate: 0 -2px; } }
@media (max-width: 639px) { .wp-pages { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .wp-page-cap { font-size: 12.5px; } .wp-page-cap b { display: block; margin: 0 0 2px; } }

/* 05 获取：一张文件卡 */
.wp-file { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--sheet); box-shadow: var(--window-shadow); }
.wp-file-cover { display: grid; place-items: center; padding: clamp(28px, 4vw, 52px); border-right: 1px solid var(--line); background: linear-gradient(180deg, var(--paper-2), var(--paper-tint)); }
.wp-file-cover img { width: min(100%, 330px); height: auto; border: 1px solid rgb(var(--ink-rgb) / 0.1); border-radius: 2px; box-shadow: 0 1px 2px rgb(var(--shadow-rgb) / 0.1), 0 24px 44px -22px rgb(var(--shadow-rgb) / 0.5); }
.wp-file-body { display: flex; flex-direction: column; justify-content: center; padding: clamp(26px, 4vw, 52px); }
.wp-book-title { font-family: var(--head); font-size: clamp(24px, 2.6vw, 32px); font-weight: var(--w-title); line-height: 1.4; letter-spacing: var(--track-title); }
.wp-specs { margin-top: 22px; }
.wp-specs > div { grid-template-columns: 4em minmax(0, 1fr); }
.wp-download-actions { margin-top: 28px; }
.wp-download-actions .btn { white-space: normal; }
.wp-note { margin-top: 12px; font-size: 13.5px; line-height: 1.8; color: var(--muted); }
.wp-download-actions + .wp-note { margin-top: 18px; }
@media (max-width: 767px) {
  .wp-file { grid-template-columns: minmax(0, 1fr); }
  .wp-file-cover { border-right: 0; border-bottom: 1px solid var(--line); }
  .wp-file-cover img { width: min(62%, 260px); }
}

/* 06 常见问题：summary 里的 h3 照旧（读屏软件按标题跳） */
.wp-faq summary h3 { font: inherit; letter-spacing: inherit; }

/* 更新记录 */
.wp-history li { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 4px 20px; }
.wp-history time { font-family: var(--mono); font-size: 13px; line-height: 2.2; color: var(--muted); }
@media (max-width: 639px) { .wp-history li { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 获取资料（表单页 /resources/get/，只在 test、gated 模式发布） ----------
   表单字段的 id、name、类名都照旧（download-request.js 按 id 找字段，出错时给资料框加 .is-invalid、给提示加 .is-error）。
   选项（dl- 开头）由 build.py 按 downloads.json 生成。表单在 HTML 里是 hidden，脚本跑完才显示。 */
.get-hero { padding-block: clamp(48px, 6vw, 80px) clamp(28px, 3.4vw, 44px); }
.get-sec { padding-block: 8px clamp(72px, 9vw, 112px); }
/* 先占位：有脚本而 defer 脚本还没跑完时，表单照常排版、只是看不见，脚本显示它时页面不跳。
   「还没跑完」用 fyro.js 跑完时给 html 加的 .fyro-ready（fyro.js 排在页面脚本 download-request.js 之后执行）。 */
html.js:not(.fyro-ready) .get-form[hidden] { display: block; visibility: hidden; }
.get-noscript { max-width: 680px; }
.get-noscript a, .get-hint a, .get-notice a, .get-done a, .get-check a { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.get-noscript a:hover, .get-hint a:hover, .get-notice a:hover, .get-done a:hover, .get-check a:hover { color: var(--cinnabar-text); text-decoration-color: currentColor; }

/* 表单是一张白纸卡片 */
.get-form { padding: clamp(22px, 4vw, 44px); border: 1px solid var(--line); border-radius: 20px; background: var(--sheet); box-shadow: var(--window-shadow); }
.get-items { min-width: 0; margin: 0; padding: 0; border: 0; }
.get-label { display: block; padding: 0; font-size: 15.5px; font-weight: 600; line-height: 1.6; letter-spacing: 0.02em; color: var(--ink); }
.get-tag { display: inline-block; margin-left: 8px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 11.5px; font-weight: 400; letter-spacing: 0.06em; line-height: 1.7; color: var(--muted); white-space: nowrap; vertical-align: 1px; }
.get-tag.is-required { border-color: rgb(var(--accent-rgb) / 0.3); color: var(--accent-text-sm); }
.get-field { margin-top: 26px; }
.get-input { display: block; max-width: 440px; margin-top: 8px; }
.get-input.is-short { max-width: 200px; }
.get-input[aria-invalid="true"] { border-color: var(--cinnabar); background: rgb(var(--accent-rgb) / 0.05); }
.get-row { display: flex; flex-wrap: wrap; gap: 10px; max-width: 600px; margin-top: 8px; }
.get-row .get-input { flex: 1 1 220px; margin-top: 0; }
.get-code-btn { flex: none; min-width: 9.5em; min-height: 46px; }
.get-code-btn:disabled { cursor: default; color: var(--muted); background: var(--paper-tint); box-shadow: none; translate: none; }
.get-hint { margin-top: 6px; font-size: 13px; line-height: 1.8; color: var(--muted); }
.get-error { margin-top: 6px; font-size: 13.5px; line-height: 1.75; color: var(--rouge); }

/* 资料选项：每组一小块纸 */
.dl-options { display: grid; gap: 12px; margin-top: 12px; }
.dl-group { padding: 12px 16px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--sheet-hi); box-shadow: inset 0 1px 0 var(--key-paper-hi); transition: border-color 160ms ease-out; }
.get-items.is-invalid .dl-group { border-color: rgb(var(--accent-rgb) / 0.5); }
.dl-group-title { font-family: var(--head); font-size: 16px; font-weight: var(--w-title); line-height: 1.6; letter-spacing: var(--track-tight); color: var(--ink); }
.dl-list { margin: 2px 0 0; }
.dl-check { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); cursor: pointer; }
.dl-check input { flex: none; width: 17px; height: 17px; margin: 3px 0 0; cursor: pointer; }
.dl-all { margin-top: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-weight: 500; }

/* 告知：右栏一块浅色纸 */
.get-notice { margin-top: 34px; padding: 18px 20px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.get-notice h3 { font-size: 15.5px; font-weight: var(--w-title); line-height: 1.6; letter-spacing: var(--track-tight); color: var(--ink); }
.get-notice-list { margin-top: 10px; }
.get-notice-list > div { display: grid; grid-template-columns: 6.4em minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.get-notice-list dt { font-size: 12.5px; line-height: 1.85; color: var(--muted); }
.get-notice-list dd { font-size: 13.5px; line-height: 1.85; color: var(--ink-soft); }
.get-notice-more { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.8; color: var(--muted); }

/* 勾选、提交、提示 */
.get-checks { margin-top: 24px; }
.get-check { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: 14.5px; line-height: 1.75; color: var(--ink-2); cursor: pointer; }
.get-check input { flex: none; width: 17px; height: 17px; margin: 4px 0 0; cursor: pointer; }
.get-check input[aria-invalid="true"], html.pointer-input .get-check input[aria-invalid="true"] { outline: 2px solid var(--cinnabar); outline-offset: 2px; }
.get-checks .get-error { margin: 0 0 4px 27px; }
.get-actions { margin-top: 24px; }
.get-submit:disabled { opacity: 0.72; cursor: progress; translate: none; }
.get-status { min-height: 1.8em; margin-top: 14px; font-size: 14.5px; line-height: 1.8; color: var(--ink-2); }
.get-status.is-error { color: var(--rouge); }   /* 出错的话用色板的出错色胭脂（--rouge）：夜里朱字压在卡片上只有 4.4:1，胭脂 5.2:1；昼里两个色几乎一样（10-26 W2） */

/* 提交之后的说明 */
.get-done { max-width: 680px; padding: clamp(22px, 3.4vw, 36px); border: 1px solid var(--line); border-radius: 20px; background: var(--sheet); box-shadow: var(--window-shadow); }
.get-done:focus { outline: none; }
.get-done h2 { font-family: var(--head); font-size: clamp(22px, 2.4vw, 28px); font-weight: var(--w-title); line-height: 1.45; letter-spacing: var(--track-title); }
.get-done p { margin-top: 10px; font-size: 15px; line-height: 1.9; color: var(--ink-soft); }
.get-done b { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.get-done p.get-done-links { margin-top: 16px; font-size: 14px; }
.get-done.is-warning { border-left: 2px solid var(--cinnabar); }

/* 蜜罐：挡机器人的空字段，不显示，读屏软件也不读（aria-hidden，tabindex -1） */
.get-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* 电脑上排成两栏：左栏要填的各项、勾选、提交；右栏告知，屏幕够高时停在页头下方 */
@media (min-width: 1024px) {
  .get-form:not([hidden]), html.js:not(.fyro-ready) .get-form[hidden] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 390px); column-gap: clamp(40px, 5vw, 72px); align-items: start; }
  .get-form > * { grid-column: 1; min-width: 0; }
  .get-form > .get-notice { grid-column: 2; grid-row: 1 / span 9; margin-top: 0; }
  .get-form > .get-notice .get-notice-list > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .get-form > .get-checks { margin-top: 32px; }
}
@media (min-width: 1024px) and (min-height: 861px) { .get-form > .get-notice { position: sticky; top: calc(var(--header-h) + 24px); } }
@media (max-width: 639px) {
  .get-form { border-radius: 16px; }
  .get-notice { padding: 14px 16px 12px; }
  .get-notice-list > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ---------- 资料获取协议（/resources/get/terms/） ---------- */
.terms-hero { padding-block: clamp(48px, 6vw, 80px) clamp(32px, 4vw, 52px); }
.terms-sec { padding-block: 8px clamp(80px, 9vw, 120px); }
.terms-body { max-width: 980px; border-top: 1.5px solid var(--ink); }
.terms-item { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 10px 56px; align-items: start; padding-block: 28px; border-bottom: 1px solid var(--line); }
.terms-item > h2 { position: sticky; top: calc(var(--header-h) + 20px); font-family: var(--head); font-size: 19px; font-weight: var(--w-title); line-height: 1.6; letter-spacing: var(--track-tight); color: var(--ink); }
.terms-item .prose { font-size: 15.5px; line-height: 1.95; }
.terms-item .prose ol > li::before { top: 0.35em; }
.terms-foot { grid-template-columns: minmax(0, 1fr); border-bottom: 0; }
.terms-foot .prose { color: var(--ink-soft); }
@media (min-width: 900px) { .terms-foot .prose { grid-column: 1; margin-left: calc(220px + 56px); } }
@media (max-width: 899px) {
  .terms-item { grid-template-columns: minmax(0, 1fr); padding-block: 22px; }
  .terms-item > h2 { position: static; }
}

/* v0.20（2026-10-21）资源和工具：01 工具和模型（动图在 guide.css）、03 开源项目 文章和教程（「建设中」在 guide.css、building.js） */
.res-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.res-tools-fig { width: 100%; max-width: 460px; justify-self: center; }
.res-tools-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.res-tools-list li { padding: 18px 20px; background: var(--sheet); border: 1px solid var(--line); border-radius: 14px; }
.res-tools-list h3 { margin: 0; font-size: 18px; line-height: 1.4; }
.res-tools-list p { margin: 6px 0 0; color: var(--ink-soft); font-size: 15px; line-height: 1.7; }
.res-tools-links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 28px 0 0; }
.res-read { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.res-read-card { display: flex; flex-direction: column; min-width: 0; padding: 14px 14px 24px; background: var(--sheet); border: 1px solid var(--line); border-radius: 18px; }
.res-read-card .building { min-height: 0; aspect-ratio: 16 / 11; margin-bottom: 20px; }
.res-read-card h3 { margin: 0 10px; font-size: 20px; line-height: 1.4; }
.res-read-card p { margin: 8px 10px 0; color: var(--ink-soft); font-size: 15px; line-height: 1.7; }
.res-read-card > .text-link { align-self: flex-start; margin: auto 10px 0; padding-top: 16px; }
.res-articles { display: grid; align-content: center; aspect-ratio: 16 / 11; margin: 0 0 20px; padding: 6px 0; list-style: none; background: var(--sheet); border: 1px solid var(--line); border-radius: 14px; }
.res-articles li + li { border-top: 1px solid var(--line); }
.res-articles a { display: flex; gap: 10px; align-items: baseline; padding: 10px 14px; color: var(--ink); text-decoration: none; }
.res-articles a:hover .t { color: var(--cinnabar-text); }
.res-articles .k { flex: none; font-family: var(--mono); font-size: 11px; color: var(--cinnabar-text); }
.res-articles .t { font-size: 14px; line-height: 1.5; transition: color .2s; }
.res-pane.building { min-height: 0; background: var(--sheet); box-shadow: none; }
@media (max-width: 1023px) { .res-read { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; } }
@media (max-width: 860px) { .res-tools { grid-template-columns: minmax(0, 1fr); } }