/* Heedit 官网首页 —— #381 版面系统：把官网当成一篇 Heedit 文档来排版。
   一个基准（正文列 720px）五档宽度（mark/text/wide/figure/full），
   标题标记悬挂在正文左缘之外，章与章之间用通栏视差图带分隔。
   零 JS：主题跟系统（D13），视差与揭示全部走 CSS 滚动驱动动画（D6/D11）。 */

:root {
  /* —— 间距事实源：4px 基础尺度 + 页面语义层。
     基础 token 只表达尺寸，组件只引用 flow / foot 等语义 token。 */
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-18: 4.5rem;
  --space-22: 5.5rem;
  --space-24: 6rem;
  --space-30: 7.5rem;
  --space-optical-3: 0.1875rem;

  --flow-cover: var(--space-8);
  --flow-copy: var(--space-6);
  --flow-list-item: var(--space-3);
  --flow-related-item: var(--space-5);
  --flow-media: var(--space-12);
  --flow-workflow-media: var(--space-10);
  --flow-media-to-heading: var(--space-12);
  --flow-subsection: var(--space-12);
  --flow-section: var(--space-18);
  --flow-band-before: var(--space-30);
  --flow-note-attach: var(--space-optical-3);
  --band-height: clamp(11rem, 27svh, 17rem);

  /* —— 色板：继承现站冷中性调。正文对比 ≥7:1，muted/accent ≥4.5:1（质量线）。
     accent 只用于焦点环与按钮 hover——正文链接不用蓝色（D4）。 —— */
  --paper: #f6f7f8;
  --ink: #141618;
  --body: #22262a;
  --mut: #4e555c;
  --accent: #2670a7;
  --brand-blue: #0e88ff;
  /* 行动链接蓝：浅色档压深到 4.5:1 质量线，暗色档复用品牌蓝。 */
  --link-accent: #006cdb;
  /* 比 --mut 再淡一档：给 Markdown 结构符与 URL 用，不与正文抢注意力 */
  --mut-soft: #666e76;
  --wash: #e9ecef;
  /* 页脚（#383 / #388）：比 --paper 压深一档的独立底色，上缘发丝线 + 紧贴缝下的阴影。
     边界由细线交代，阴影向下补足层次，不做成一道黑带。 */
  --foot-bg: #eaedef;
  --foot-edge: #c9ced3;
  /* 页脚正文色压到 4.5:1 质量线附近：像印在纸面上的次要信息，不与正文争抢。 */
  --foot-mut: #656c74;
  --foot-shadow: rgb(20 22 24 / 0.24);
  --foot-letterpress-edge: rgb(255 255 255 / 0.72);
  --foot-pad-block: var(--space-10);
  --foot-pad-block-compact: var(--space-8);
  --foot-separation: var(--space-24);
  --foot-separation-compact: var(--space-18);
  --foot-column-gap: var(--space-8);
  --foot-row-gap-compact: var(--space-4);
  --foot-text-size: 0.875rem;
  --foot-company-size: 0.8125rem;
  --foot-icp-size: 0.75rem;
  --sel: #d5e6f2;
  /* 首页功能图解：组件只消费这一层语义 token，素材换成视频时仍复用同一舞台。 */
  --feature-radius: 0.625rem;
  --feature-inner-radius: 0.5rem;
  --feature-pad: var(--space-12);
  --feature-pad-compact: var(--space-6);
  --feature-gap: var(--space-4);
  --feature-gap-compact: var(--space-3);
  --feature-label-size: 0.6875rem;
  --feature-code-size: 0.8125rem;
  --feature-copy-size: 1rem;
  --feature-title-size: 1.125rem;
  --feature-label-tracking: 0.08em;
  --feature-file-leading: 1.4;
  --feature-copy-leading: 1.65;
  --feature-emphasis-weight: 600;
  --feature-aspect-ratio: 16 / 9;
  --feature-max-height: 62svh;
  --feature-content-width: 40rem;
  --feature-flow-step-height: 9rem;
  --feature-cursor-width: 0.0625rem;
  --feature-cursor-height: 1.25em;
  --feature-selection-pad: 0.16em;
  --feature-arrow-compact-rotation: 90deg;
  --feature-surface: var(--wash);
  --feature-card: var(--paper);
  --feature-review-surface: var(--foot-bg);
  --feature-selection: var(--sel);
  --feature-cursor: var(--accent);
  /* 标题标记专用：与标题同字号，但明色更浅、暗色更暗——它是一把安静的尺，
     不参与阅读，因此刻意落在正文对比度线之下（装饰性 ::before，非内容）。 */
  --marker: #dfe3e6;
  /* 覆盖边缘：板块压在截图上的那条边。它标示层叠关系（一块板子盖上来），
     不是内容分隔线——所以做得极淡，且只在真有覆盖发生的宽度档出现。 */
  --edge-line: rgba(20, 22, 24, 0.13);
  --edge-shadow: rgba(20, 22, 24, 0.07);
  /* 图带浮层：与页面同色的半透明罩，把图压回背景层，切边不再突兀 */
  --band-focus-y: 75%;
  --band-veil: 0.48;

  /* —— 家族层：换字体只改这里（D1：原样继承现站，本 issue 不改） —— */
  --face-display: "Zodiak";
  --face-body: "Gambetta";
  --face-doc: "Space Grotesk";
  --face-footer-symbol: "Heedit Footer Symbol";
  --face-display-cjk: "Heedit Display CJK";
  --face-body-cjk: "LXGW Neo ZhiSong Web";
  --face-display-cjk-sys: "Songti SC";
  --face-body-cjk-sys: "Songti SC";

  /* —— 角色层：fallback 链恒为「西文 → 中文 → 通用族」（铁律）。
     西文必须在前，否则中文字体会把拉丁字母一并接管，中西混排立刻垮掉。 —— */
  --font-display: var(--face-display), var(--face-display-cjk), var(--face-display-cjk-sys), serif;
  --font-body: var(--face-body), var(--face-body-cjk), var(--face-body-cjk-sys), serif;
  --font-doc: var(--face-doc), var(--face-body-cjk), var(--face-body-cjk-sys), sans-serif;
  /* 该字面仅覆盖 U+0040，其余字符继续落回正文角色字体。 */
  --font-foot-mark: var(--face-footer-symbol), var(--font-body);
  /* 标记与行内代码的等宽族：结构尺是系统件，不占 webfont 字节 */
  --font-mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  /* 排版 token —— latin 档：大字号负字距是拉丁排版惯例 */
  --weight-heading: 500;
  --tracking-heading: -0.012em;
  --leading-heading: 1.12;
  --leading-lede: 1.55;
  --leading-body: 1.6;

  /* —— 版面基准（D2）：24px 基线族 + 五档宽度，数值取自现站 —— */
  --gutter: var(--space-12);
  --w-text: 840px;
  --w-wide: 1040px;
  --w-figure: 1280px;

  /* 悬挂标记槽（D3）：标记右对齐、右缘距正文 --hang-gap，层级越深向左伸得越远 */
  --hang: var(--space-24);
  --hang-gap: var(--space-3);
  /* 板块初始就压进截图底部的量：进页面第一眼就是「已经叠上去」的状态，
     不是先并排、滚动后才叠。截图被遮住的部分不必看见。 */
  --overlap: 132px;
  /* 截图高度由它自己的宽高比推出（源图 1641×1118 → 1.4678），因此各宽度档自洽：
     大屏封顶正文列 840px，中屏跟着视口收窄。 */
  --shot-h: calc(min(var(--w-text), 100vw - 2 * var(--gutter)) / 1.4678);
  /* 截图钉住期间要补掉的滚动量 = 它自己的高度：补满即 100% 抵消，
     截图在这段里完全静止，下方板块以整个页面的速度追上来。 */
  --cover: var(--shot-h);
  /* 列表标记（- / 1. / [n]）是小号 muted */
  --marker-size: 0.9375rem;
  /* 标题字号：Markdown 标记仍与所领标题同大，但正文层级重新交给字号表达。
     H1 保留封面感，H2 收成章节标题，H3 再降一级；悬挂长度继续补充层级。 */
  --heading-h1-size: clamp(28px, 24px + 1vw, 36px);
  --heading-h2-size: clamp(26px, 22px + 0.8vw, 32px);
  --heading-h3-size: clamp(22px, 20px + 0.35vw, 24px);
  --body-size: 17px;
  --lede-size: clamp(18px, 17.5px + 0.125vw, 19px);
  --marker-weight: 600;

  color-scheme: light dark;
}

/* —— cjk 档（zh / ja）：方块字不吃负字距、标题一律 400、行高更松（D1） —— */
:root:lang(zh),
:root:lang(ja) {
  --weight-heading: 400;
  --tracking-heading: 0.015em;
  --leading-heading: 1.4;
  --leading-lede: 1.8;
  --leading-body: 1.85;
}

/* 主题只跟系统（D13）：无切换控件、无主题属性、无本地存储 */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121212;
    --ink: #f2f4f6;
    --body: #dee3e7;
    --mut: #a6adb3;
    --accent: #80d1ff;
    /* 暗色链接与 Docs 字标共用品牌蓝；避免原来的浅蓝在页面上过亮。 */
    --link-accent: var(--brand-blue);
    --mut-soft: #8a9199;
    --wash: #1d2023;
    --foot-bg: #17191b;
    --foot-edge: #08090a;
    --foot-mut: #7a828a;
    --foot-shadow: rgb(0 0 0 / 0.72);
    --foot-letterpress-edge: rgb(0 0 0 / 0.72);
    --sel: #263a4a;
    --marker: #26292b;
    --edge-line: rgba(255, 255, 255, 0.10);
    --edge-shadow: rgba(0, 0, 0, 0.55);
    --band-veil: 0.72;
  }
}

/* ================= 基础 ================= */

*, *::before, *::after { box-sizing: border-box; }

/* 浏览器滚到底部回弹时会露出根画布；用页脚色承接，避免 Footer 后闪出纸张白条。 */
html {
  background: var(--foot-bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--font-body);
  /* 正文不随视口放大：17px 同时守住窄屏可读性和长页的克制密度。 */
  font-size: var(--body-size);
  line-height: var(--leading-body);
}

/* 普通正文链接保持正文色；明确的行动入口再取 --link-accent。 */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
a:hover { text-decoration-thickness: 2px; }

a:focus-visible,
button:focus-visible,
summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

::selection { background: var(--sel); }

img { max-width: 100%; }

/* 加粗（D4）：同字族 500（Gambetta 可用上限），色值不变 */
strong { font-weight: 500; }

/* 斜体（D4）：西文斜体；中日文禁止伪斜体，按 :lang 换着重号 */
em { font-style: italic; }
em:lang(zh) { font-style: normal; text-emphasis: filled circle; }
em:lang(ja) { font-style: normal; text-emphasis: filled sesame; }

/* 行内代码（D4）：等宽 + 0.92em + 正文色，无背景块、无边框 */
code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: inherit;
}

/* 跳过导航：默认移出视口，获得焦点时落回左上角 */
.skip-link {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 20;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
}
.skip-link:focus { top: 16px; }

/* ================= 版面网格（D2）：一个基准，五档宽度 =================
   关键在 minmax(0, …)：视口收窄时外侧轨道压到 0，各档自然坍缩成同一列。
   text 轨取 min(720px, 100% − 两侧 gutter)，保证任何宽度下不出横向滚动。 */

.article {
  display: grid;
  grid-template-columns:
    [full-start]   minmax(var(--gutter), 1fr)
    [figure-start] minmax(0, calc((var(--w-figure) - var(--w-wide)) / 2))
    [wide-start]   minmax(0, calc((var(--w-wide) - var(--w-text)) / 2 - 4ch))
    [mark-start]   minmax(0, 4ch)
    [text-start]   min(var(--w-text), calc(100% - 2 * var(--gutter))) [text-end]
                   minmax(0, calc((var(--w-wide) - var(--w-text)) / 2)) [wide-end]
                   minmax(0, calc((var(--w-figure) - var(--w-wide)) / 2)) [figure-end]
                   minmax(var(--gutter), 1fr) [full-end];
}
/* 插图与正文同宽：截图讲的是正文正在说的事，出血只会把它读成独立展品。
   wide / figure 两档留给将来的宽表格与并排图（用 .u-wide / .u-figure 显式取用）。 */
.article > *         { grid-column: text; }
.article > .u-wide   { grid-column: wide; }
.article > .u-figure { grid-column: figure; }
.article > .band,
.article > .u-full   { grid-column: full; }

/* ================= 首屏舞台与覆盖板块 =================
   H1 与 H2 的区隔不靠图带，也不靠反色，靠「覆盖」：
   首屏截图钉在舞台里不动，下面这块带着不透明底色滑上来，一路把它吃掉。
   板块用负 margin 初始就压进截图底部（--overlap），进页面第一眼即是叠合状态。

   滚动分两段，速度差只在第二段发生：
     一、截图跟着页面正常上行——它上方的标题与入口链接照常滚走，不留空隙；
     二、截图顶边碰到视口上沿后原地钉住（向下补掉等量滚动），板块继续以页面
         的速度上行，于是「下面比上面快」，一路把截图吃干净。
   时间线因此必须用 view() 的 exit 段——它的 0% 恰好定义为「元素顶边与视口
   顶边对齐」，正是第二段的起点；用 scroll() 从第一像素起算会让截图永远到不了
   上沿，它上方的内容却继续滚，两者之间就会拉开一片空白。 */

.stage { grid-column: text; }
.stage .shot { position: relative; z-index: 0; }

.board {
  grid-column: full;
  position: relative;
  z-index: 1; /* 压在滞留的截图之上，滑过时把它盖掉 */
  margin-top: calc(-1 * var(--overlap)); /* 初始即叠在截图底部 */
  padding-block: var(--flow-section) 0;
  background: var(--paper); /* 必须不透明，否则盖不住下面的截图 */
}
/* 覆盖边缘的那条线：比正文列两侧各宽出一档（wide 档），让它读成「板子的边」
   而不是「某段内容的框」；0.5px 在 2x 屏上正好一个物理像素。
   向上的柔和投影把板子抬到截图之上，覆盖关系因此可信。 */
.board::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: min(var(--w-wide), 100% - 2 * var(--gutter));
  block-size: 0.5px;
  background: var(--edge-line);
  box-shadow: 0 -6px 18px var(--edge-shadow);
  pointer-events: none;
}

.board > h2:first-child { margin-top: 0; }

/* ================= 站点身份（D12） =================
/* ================= 站点身份（D12） =================
   字标 heedit 贴正文列硬左缘（与 H1 文字同一条线），mark 悬挂进标记槽内右对齐——
   与标题标记共用同一条安静车道。不吸顶、随页面滚走；尺寸取 H2 档，层级 H1 > logo > H2。 */

.masthead { padding-block-start: var(--flow-cover); }

.brand {
  margin: 0;
  display: flex;
  justify-self: start;
  align-items: center;
  inline-size: max-content;
  gap: 0.42em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 20px + 0.5vw, 27px);
  letter-spacing: -0.01em; /* 字标恒为拉丁串，字距不随 locale 变 */
  color: var(--ink);
  line-height: 1;
  text-decoration: none;
  /* mark 的 SVG 画布内左侧有 18.5% 留白（图形 x 95–459 / 512），盒对齐硬左缘时
     图形本身会右移 0.185 × 1.52em ≈ 0.28em。这里把整组左移同样的量，让**图形**
     左缘落在硬左缘上，再加约 1.5% 的弧形光学补偿。数值随 --mark-size 等比缩放。 */
  margin-left: -0.30em;
}

.brand-mark {
  flex: 0 0 auto;
  width: 1.52em;
  height: 1.52em;
  /* 画布内图形垂直中心在 55.6%（不是 50%），居中对齐后仍显低——
     上提 0.056 × 1.52em ≈ 0.085em 找回视觉居中 */
  position: relative;
  top: -0.085em;
  background: url("./heedit-mark.svg") center / contain no-repeat;
}

/* ================= 标题与悬挂标记（D3） =================
   标题文字与正文共用同一条硬左缘；标记以负缩进悬挂进 mark 槽，
   在定宽盒内右对齐——层级越深（# → ###）向左伸得越远，成为边缘层级尺。 */

h1, h2, h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  text-indent: calc(-1 * var(--hang));
  text-wrap: balance;
}

h1::before { content: "#"; }
h2::before { content: "##"; }
h3::before { content: "###"; }

h1::before, h2::before, h3::before {
  display: inline-block;
  width: var(--hang);
  padding-right: var(--hang-gap);
  text-align: right;
  text-indent: 0; /* 不继承标题的负缩进 */
  font-family: var(--font-mono);
  font-size: inherit; /* 标记跟随所领标题，不另造一套字号事实源 */
  font-weight: var(--marker-weight);
  letter-spacing: 0;
  color: var(--marker);
}

/* 标题共用字体、字重与行高；字号由语义层级分别取 token。 */
h1, h2, h3 {
  margin-bottom: 0;
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
}
h1 { font-size: var(--heading-h1-size); }
h2 { font-size: var(--heading-h2-size); }
h3 { font-size: var(--heading-h3-size); }

/* 上距是层级的另一把尺：H2 领起一章，H3 领起一节，取其半（D6） */
/* logo 与 H1 保持一档紧凑章距，让首屏读成同一个品牌句组 */
h1 { margin-block-start: var(--flow-cover); }
h2 { margin-block-start: var(--flow-section); }
h3 { margin-block-start: var(--flow-subsection); }

/* ================= 正文 ================= */

p {
  margin: var(--flow-copy) 0 0;
  /* px 容器之上的 em 段落上限（D2）：字号变大时行宽跟着走，measure 保持恒定。
     必须比 --w-text 换算出的 em 数略宽，否则真正决定行宽的是它而不是容器。 */
  max-inline-size: 44em;
}

.lede {
  font-size: var(--lede-size);
  line-height: var(--leading-lede);
}

/* 列表同语汇（D3）：markdown 标记悬挂在文字左侧，muted 等宽。
   只作用于正文（main）；页脚的功能列表不是文档内容，不挂标记。 */
main ul,
main ol {
  margin: var(--flow-copy) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: item;
}
main li {
  margin: var(--flow-list-item) 0 0;
  text-indent: calc(-1 * var(--hang));
}
main li::before {
  display: inline-block;
  width: var(--hang);
  padding-right: var(--hang-gap);
  text-align: right;
  text-indent: 0;
  font-family: var(--font-mono);
  font-size: var(--marker-size);
  color: var(--mut);
}
main ul > li::before { content: "-"; }
main ol > li { counter-increment: item; }
main ol > li::before { content: counter(item) "."; }

/* 引用链接组（D4 书末样式）：[n] 等宽 muted 编号 + 正文色下划线标题 + 一行 muted 说明。
   上距由它自己的 H2 承担，这里只留正常块距。 */
ol.refs { margin-top: 0; }
ol.refs > li { margin-block-start: var(--flow-related-item); }
main ol.refs > li::before { content: "[" counter(item) "]"; }

/* 首页与 Docs 的相关入口编号从文档 gutter 收回正文列：编号本身与 H2 文字左缘对齐，
   链接与说明在其后另起一列。颜色与页脚辅助文字共用同一事实源。 */
main ol.start-links > li,
main ol.docs-links > li {
  position: relative;
  padding-inline-start: calc(3ch + var(--hang-gap));
  text-indent: 0;
}
main ol.start-links > li::before,
main ol.docs-links > li::before {
  position: absolute;
  inset-inline-start: 0;
  width: auto;
  padding-right: 0;
  text-align: left;
  color: var(--foot-mut);
}
.ref-note {
  display: block;
  text-indent: 0;
  margin-block-start: var(--flow-note-attach);
  font-size: 0.875em;
  color: var(--mut);
}

/* 首页上手链接仍与 H2 文字共用 --hang 左缘；箭头在首页与 Docs 补充“进入内容”的方向感。
   使用 mask 继承链接色，伪元素不进入可访问名称，也不另造点击目标。 */
ol.start-links > li > a::after,
ol.docs-links > li > a::after {
  content: "";
  display: inline-block;
  inline-size: 0.72em;
  block-size: 0.72em;
  margin-inline-start: 0.42em;
  vertical-align: 0;
  background-color: currentColor;
  -webkit-mask: url("./arrow_right.svg") center / contain no-repeat;
  mask: url("./arrow_right.svg") center / contain no-repeat;
}

/* 默认保持正文色，只在悬停时与 Docs 字标、页面行动入口共用语义蓝。 */
ol.start-links > li > a:hover,
ol.docs-links > li > a:hover {
  color: var(--link-accent);
  text-decoration-thickness: 1px;
}

/* ================= 入口链接 ================= */

.cta { margin-block-start: var(--flow-copy); }

/* Markdown 行内链接的完整源码形态：[链接文字](URL)。
   方括号走等宽 muted（与标题标记同一套语汇），链接文字走 accent 蓝 + 下划线——
   全站唯一一处蓝色链接，正文链接仍是正文色。
   源码里的 (URL) 一段不显示：它对读者没有信息量，地址已在链接本身。 */
.md-link {
  /* 链接文字走标题的字体与字重：它是页面上唯一的行动点，份量对齐标题 */
  font-family: var(--font-display);
  font-weight: var(--weight-heading);
  color: var(--link-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  font-size: 1.0625em;
}
.md-link::before { content: "["; }
.md-link::after  { content: "]"; }
.md-link::before,
.md-link::after {
  color: var(--mut-soft);
  font-family: var(--font-mono);
  font-weight: 400; /* 结构符不跟随标题字重 */
  font-size: 0.86em;
  text-decoration: none;
  display: inline-block; /* 结构符不吃链接的下划线 */
}
.md-link:hover { text-decoration-thickness: 2px; }


/* ================= 插图（D7） ================= */

.shot { margin-block-start: var(--flow-media); } /* 图与正文的间距大于段落间距 */
.board > .shot { margin-block-start: var(--flow-workflow-media); }
.board > .shot + h2,
.band + h2 { margin-block-start: var(--flow-media-to-heading); }
.shot img {
  display: block;
  width: 100%;
  height: auto;
  max-block-size: 80svh; /* 大屏上不让一张图独占一屏 */
  object-fit: contain;
  /* 应用窗口截图给圆角、不给边框：源图已裁掉窗口自带的小圆角与四角壁纸残留，
     弧线只有这一条，不会叠出双重边。overflow 交给 border-radius 自身裁切。 */
  border-radius: 10px;
}

/* 四块首发素材使用同一居中舞台。它们是文案的静态证明，不伪装成尚未完成的产品截图。 */
.feature-visual {
  aspect-ratio: var(--feature-aspect-ratio);
  max-block-size: var(--feature-max-height);
  padding: var(--feature-pad);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--feature-surface);
  border-radius: var(--feature-radius);
}

.format-grid {
  inline-size: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--feature-gap);
}
.format-card {
  min-inline-size: 0;
  padding: var(--space-5);
  display: grid;
  gap: var(--space-3);
  background: var(--feature-card);
  border-radius: var(--feature-inner-radius);
}
.format-ext,
.format-file,
.mock-editor-bar,
.md-mark,
.mock-code,
.review-actions,
.review-note > span,
.workflow-kicker,
.workflow-step code,
.workflow-arrow {
  font-family: var(--font-mono);
}
.format-ext {
  font-size: var(--feature-title-size);
  color: var(--body);
}
.format-file {
  overflow-wrap: anywhere;
  font-size: var(--feature-label-size);
  line-height: var(--feature-file-leading);
  color: var(--mut);
}

.mock-editor,
.review-surface {
  inline-size: min(100%, var(--feature-content-width));
  background: var(--feature-card);
  border-radius: var(--feature-inner-radius);
}
.mock-editor-bar {
  padding: var(--space-3) var(--space-4);
  display: flex;
  justify-content: space-between;
  gap: var(--feature-gap);
  background: var(--feature-surface);
  font-size: var(--feature-label-size);
  color: var(--mut);
}
.mock-document {
  padding: var(--space-8);
  font-family: var(--font-doc);
  font-size: var(--feature-copy-size);
  color: var(--body);
}
.mock-line { margin-block-end: var(--space-3); }
.mock-line:last-child { margin-block-end: 0; }
.mock-heading {
  font-size: var(--feature-title-size);
  font-weight: var(--feature-emphasis-weight);
}
.mock-list { padding-inline-start: var(--space-4); }
.md-mark { color: var(--mut-soft); }
.mock-code {
  display: flex;
  align-items: center;
  font-size: var(--feature-code-size);
}
.mock-cursor {
  inline-size: var(--feature-cursor-width);
  block-size: var(--feature-cursor-height);
  margin-inline-start: var(--space-2);
  background: var(--feature-cursor);
}

.review-surface {
  padding: var(--space-8);
  background: var(--feature-review-surface);
}
.review-copy {
  font-family: var(--font-doc);
  font-size: var(--feature-copy-size);
  line-height: var(--feature-copy-leading);
  color: var(--body);
}
.review-surface mark {
  padding: 0 var(--feature-selection-pad);
  background: var(--feature-selection);
  color: inherit;
}
.review-actions {
  width: max-content;
  max-width: 100%;
  margin-block-start: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--feature-gap-compact);
}
.review-actions span,
.review-note { border-radius: var(--feature-inner-radius); }
.review-actions span {
  padding: var(--space-2) var(--space-3);
  background: var(--feature-surface);
  font-size: var(--feature-code-size);
  color: var(--body);
}
.review-note {
  margin-block-start: var(--space-6);
  padding: var(--space-4);
  background: var(--feature-surface);
}
.review-note > span {
  display: block;
  font-size: var(--feature-label-size);
  letter-spacing: var(--feature-label-tracking);
  color: var(--mut);
}
.review-note > div {
  margin: var(--space-2) 0 0;
  font-family: var(--font-doc);
  font-size: var(--feature-copy-size);
  color: var(--body);
}

.workflow {
  inline-size: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--feature-gap-compact);
  align-items: center;
}
.workflow-step {
  min-inline-size: 0;
  min-block-size: var(--feature-flow-step-height);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  background: var(--feature-card);
  border-radius: var(--feature-inner-radius);
}
.workflow-kicker {
  font-size: var(--feature-label-size);
  letter-spacing: var(--feature-label-tracking);
  color: var(--mut);
}
.workflow-step strong {
  font-family: var(--font-doc);
  font-size: var(--feature-title-size);
  font-weight: var(--feature-emphasis-weight);
  color: var(--body);
}
.workflow-step code {
  overflow-wrap: anywhere;
  font-size: var(--feature-label-size);
  color: var(--mut);
}
.workflow-arrow {
  font-size: var(--feature-title-size);
  color: var(--mut-soft);
}

/* ================= 图带（D6）：通栏硬切边 + 单层视差 + 同色浮层 =================
   上下各一条水平硬边直接切进页面底色：无边框、无圆角、无渐隐、无 caption。
   图上覆一层页面底色的半透明浮层，把图压回背景层——明色提亮、暗色压暗，
   切边两侧的明度差随之收窄，图不再从版面里跳出来。
   图高 124%，滚动全程位移 22%；不用 fixed 背景（iOS Safari 无效）。 */

.band {
  position: relative;
  block-size: var(--band-height);
  margin: var(--flow-band-before) 0 0;
  /* clip 而非 hidden：不生成滚动容器，也不给合成器多一层滚动盒 */
  overflow: clip;
  /* 图带内部的绘制与外部完全隔离——滚动时浏览器不必重算带外区域 */
  contain: paint;
  view-timeline: --band block;
}
.band picture { display: block; height: 100%; }
.band img {
  display: block;
  width: 100%;
  /* 图高 = 100% + 位移量 + 余量：位移到底时图底仍要盖住带底 */
  height: 140%;
  object-fit: cover;
  object-position: center var(--band-focus-y);
}

/* 同色浮层：跟着主题走的一层 --paper，不拦事件、不进无障碍树 */
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper);
  opacity: var(--band-veil);
  pointer-events: none;
}

/* 截图向下补位，抵消掉等量的滚动——看起来它停在那儿，等着被下方板块吃掉。
   只有一个元素在动，合成器独立处理。 */
@keyframes shot-hold {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, var(--cover), 0); }
}

@keyframes band-drift {
  from { transform: translate3d(0, 0, 0); }
  /* 自身高 140% 的 28.5% ≈ 带高的 40%；图底在终点仍完整覆盖容器，不露空白。 */
  to   { transform: translate3d(0, -28.5%, 0); }
}

/* 滚动驱动动画只在支持的引擎里启用：不支持 → 图静止、内容全量可见，
   没有降级提示，也没有先藏后显的空窗（D10：内容不等 JS，也不等 CSS 特性）。 */
/* 滚动揭示（D11）已移除：20 个文字元素各跑一条 view timeline、用独立 translate
   属性且未提升为合成层，滚动时每帧都要主线程重算样式并重绘文字（CJK 字形光栅化
   尤其贵）——单帧不足 50ms 抓不到长任务，累积却让主线程持续繁忙，滚动就是不跟手。
   页面因此也更贴「一篇文档」：文档不会渐进出现。整页只剩 3 条滚动驱动动画。 */
@supports (animation-timeline: view()) {
  /* 视差只给 ≥600px：移动端无收益且耗电（D6） */
  @media (prefers-reduced-motion: no-preference) and (min-width: 600px) {
    .stage .shot {
      animation: shot-hold linear both;
      animation-timeline: view();
      /* exit 0% = 截图顶边碰到视口上沿（钉住开始）；100% = 底边越过上沿 */
      animation-range: exit 0% exit 100%;
      will-change: transform;
    }
    .band img {
      animation: band-drift linear both;
      animation-timeline: --band;
      animation-range: cover 0% cover 100%;
      /* 提前提升为合成层：否则每帧都要把整张位图重新光栅化进带内，
         这正是首版滚到图带就掉帧的原因。 */
      will-change: transform;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .band img, .stage .shot { animation: none; }
}

/* ================= 页脚（#383） =================
   #388 收紧高度、发丝接缝与符号字体；#392 以极淡右下字影模拟油墨压印。
   页脚不再是正文的续行，而是页面的收束：通栏出血换独立底色，上缘发丝线
   把它切开，阴影只向下贴在缝后几像素补厚度，不做大扩散。这是整页第三处块级视觉手段，
   只用在收束处。信息带三栏：身份 / 内容入口 / 公司事务——落在正文列（text 档）
   而非图档，左缘与文章同线、右缘止于 text-end，页脚不另起一套版心，也不另起字号。页脚跟随 region 根语言（global 英语、cn 中文），语言切换器暂时收起（中日未对外支持）。 */

.colophon {
  margin-top: var(--foot-separation);
  padding: var(--foot-pad-block) 0;
  background: var(--foot-bg);
  border-top: 1px solid var(--foot-edge);
  box-shadow: inset 0 6px 12px -8px var(--foot-shadow);
  /* 与正文同族同风格，使用独立的小号信息角色：页脚是收束，不与正文抢注意力 */
  font-size: var(--foot-text-size);
  color: var(--foot-mut);
}

.foot-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--foot-column-gap);
  align-items: start;
}

.foot-mark {
  margin: 0;
  color: var(--foot-mut);
  font-family: var(--font-foot-mark);
  font-weight: 400;
  /* 原来的压印阴影会在小字号上形成一层伪加粗；身份行保持单层字形。 */
  text-shadow: none;
}

.foot-nav {
  grid-column: span 2;
  display: grid;
  /* 列数跟随实际链接数，不写死。cn 比 global 多一份法律文档（#806），
     固定三列会让第四条掉到第二行，把页脚撑高一倍。 */
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: space-between;
  align-items: start;
  justify-items: start;
}
.foot-nav a {
  display: inline-block;
  color: var(--foot-mut);
  text-decoration: none;
  text-shadow: 1px 1px 0 var(--foot-letterpress-edge);
}
.foot-nav a:hover { color: var(--body); }
.foot-contact {
  font-size: var(--foot-company-size);
  line-height: inherit;
}

/* 备案号（#806）。工信部要求在首页底部展示并链到备案系统，故不能省；但它是
   合规标注不是导航，所以跟在身份行下方、用更小一档、不画下划线——与
   「Heedit @ 2026」同属「这个站是谁的」这一组信息。global 无备案号，整块不输出。 */
.foot-icp {
  margin: var(--space-2) 0 0;
  font-size: var(--foot-icp-size);
  line-height: var(--leading-lede);
  color: var(--foot-mut);
}
.foot-icp a {
  color: inherit;
  text-decoration: none;
}
.foot-icp a:hover { color: var(--body); }

@media (forced-colors: active) {
  .foot-mark,
  .foot-nav a { text-shadow: none; }
}

/* Retina 屏幕把一条 CSS 像素画成两条物理像素；压到半像素才是真正的一像素发丝线。 */
@media (min-resolution: 2dppx) {
  .colophon { border-top-width: 0.5px; }
}

/* ================= 窄屏（D9）：各档坍缩为单列 ================= */

@media (max-width: 599.98px) {
  :root {
    --gutter: var(--space-5);
    --flow-section: var(--space-16);
    --flow-band-before: var(--space-22);
  }

  /* 覆盖效果在窄屏关掉：屏幕短，滞留只会让人以为页面卡住。
     没有覆盖也就没有「板子的边」，那条线随之收起——留着会读成内容分隔线。 */
  .board { margin-top: 0; padding-block-start: var(--flow-section); }
  .board::before { display: none; }

  .masthead { padding-block-start: var(--flow-cover); }
  h1 { margin-block-start: var(--flow-cover); }
  h2 { margin-block-start: var(--flow-section); }
  .band { margin-block-start: var(--flow-band-before); }
  .colophon { margin-block-start: var(--foot-separation-compact); padding: var(--foot-pad-block-compact) 0; }
  .foot-cols { grid-template-columns: 1fr; gap: var(--foot-row-gap-compact); }
  .foot-nav {
    grid-column: auto;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    gap: var(--foot-row-gap-compact);
  }

  /* 标记切回行内流：退化后的样子正好是 Markdown 源码样（D3） */
  h1, h2, h3, main li { text-indent: 0; }
  h1::before, h2::before, h3::before, main li::before {
    display: inline;
    width: auto;
    padding: 0;
    margin-right: 0.6ch;
  }

  .feature-visual {
    aspect-ratio: auto;
    max-block-size: none;
    padding: var(--feature-pad-compact);
  }
  .format-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .format-card { padding: var(--space-4); }
  .mock-document,
  .review-surface { padding: var(--feature-pad-compact); }
  .workflow { grid-template-columns: minmax(0, 1fr); }
  .workflow-step { min-block-size: 0; }
  .workflow-arrow {
    justify-self: center;
    rotate: var(--feature-arrow-compact-rotation);
  }
}

/* 中等宽度仍保留悬挂标记，但把它降为结构字号，避免大号井号贴住视口边缘。 */
@media (min-width: 600px) and (max-width: 1099.98px) {
  h1::before,
  h2::before,
  h3::before { font-size: var(--marker-size); }
}