/* MindShell 宣传页 —— 只有浅色一套。
   排版规则：等宽字体承担标签、编号、状态、装饰字符；正文用系统无衬线保证中文可读。 */

:root {
  --ink: #14140f;
  --ink-soft: #3c3b34;
  --muted: #6c6a61;
  --faint: #96948b;
  --paper: #ffffff;
  --line: rgba(20, 20, 15, 0.13);
  --line-soft: rgba(20, 20, 15, 0.07);
  --violet: #6f42e8;
  --ember: #e94e2b;
  --acid: #7d9c00;

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "IBM Plex Sans", "IBM Plex Sans SC", system-ui, -apple-system,
          "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;

  /* 首屏配色：由 hero.js 跟着元素写进来。三种元素现在都是白底深字，
     机制留着——哪天某个元素要换回彩色底，改元素的 bg / ink / fg 就够了 */
  --hero-fg: #14140f;
  --hero-fg-soft: #3c3b34;

  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1200px;
  --hero-progress: 0;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* 顶栏是固定的，锚点跳过去要给它让位 */
.cap, .lede, .section { scroll-margin-top: clamp(72px, 9vh, 96px); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }

.skip-link {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 99;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: 13px;
  border-radius: 2px;
  transition: top 0.16s;
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ── 首屏字符场 ─────────────────────────────────────────── */

.field {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* ── 顶栏 ──────────────────────────────────────────────── */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px var(--gutter);
  /* 磨砂玻璃：底下就是字符场，糊一层比压一层实色好看，也省掉一条分隔线 */
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}
/* 不支持 backdrop-filter 时退回一层足够实的白，保证顶栏还读得清 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { background: rgba(255, 255, 255, 0.92); }
}

.brand { display: flex; align-items: center; text-decoration: none; }
.brand img {
  display: block;
  height: clamp(30px, 2.7vw, 38px);
  width: auto;
}

.topnav { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px); }

.topnav__links { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 26px); }
.navlink {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-decoration: none;
  color: var(--ink);
  opacity: 0.62;
  transition: opacity 0.18s;
}
.navlink:hover { opacity: 1; }

.lang {
  background: none;
  border: 0;
  padding: 5px 2px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ink);
  opacity: 0.7;
  transition: opacity 0.18s;
}
.lang:hover { opacity: 1; }

.ghlink {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--ink);
  opacity: 0.72;
  transition: opacity 0.18s, background 0.18s;
}
.ghlink svg { display: block; fill: currentColor; }
.ghlink:hover { opacity: 1; background: rgba(20, 20, 15, 0.06); }
.ghlink[aria-disabled="true"] { opacity: 0.34; cursor: default; }
.ghlink[aria-disabled="true"]:hover { background: none; }

/* ── 首屏 ──────────────────────────────────────────────── */

.hero {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  pointer-events: none;
}

/* 首屏文案贴着页面左栏排，和顶栏品牌同一条左边界；
   宽屏时不跟随内容页那套 1200 居中栅格——否则屏幕一宽，文案就被推进字符场里。 */
.hero__inner {
  width: 100%;
  padding: 0 var(--gutter);
  transform: translateY(calc(var(--hero-progress) * -38px));
}

.hero__copy {
  /* 上限保证最长的一行（`anything` + 光标）永远越不过字符场的左边界 */
  max-width: min(34rem, 40vw);
}

.hero__stage {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(20px, 2.6vh, 30px);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--hero-fg);
  opacity: 0.86;
  transition: color 0.22s linear;
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ember);
  display: inline-block;
  flex: none;
}
/* ── Slogan ───────────────────────────────────────────
   两行、极紧的行距；第二行用 Plex Mono 的真斜体：
   `Code` 是机器那一半（等宽、方正），`anything` 是敞开的那一半。
   末尾一个终端光标在闪，点题「这是个控制台」。 */

.hero__slogan {
  margin: 0;
  color: var(--hero-fg);
  font-family: 'Space Grotesk', var(--sans);
  font-weight: 400;
  font-size: clamp(3.4rem, 7.5vw, 6.5rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  transition: color 0.22s linear;
}
.slogan__lead,
.slogan__tail { display: block; }
/* 两行用字重拉开：`Code` 常规，`anything` 加粗——重音落在敞开的那一半 */
.slogan__tail { font-weight: 700; letter-spacing: -0.045em; }
.slogan__caret {
  display: inline-block;
  width: 0.3em;
  height: 0.62em;
  margin-left: 0.16em;
  background: currentColor;
  vertical-align: -0.015em;
  animation: caret 1.1s steps(1, end) infinite;
}
@keyframes caret {
  0%, 54% { opacity: 1; }
  55%, 100% { opacity: 0; }
}

.hero__sub {
  margin: clamp(30px, 4vh, 46px) 0 0;
  max-width: 26em;
  font-size: clamp(1.02rem, 1.12vw, 1.18rem);
  line-height: 1.85;
  color: var(--hero-fg);
  transition: color 0.22s linear;
}

.hero__foot {
  margin-top: clamp(32px, 5.2vh, 60px);
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  flex-wrap: wrap;
}

.elements {
  display: flex;
  gap: clamp(10px, 1.4vw, 20px);
  pointer-events: auto;
}

/* 三个元素做成一份编号索引：01 / 02 / 03，当前那个把刻度点亮 */
.element {
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--hero-fg);
  opacity: 0.6;
  transition: color 0.22s linear, opacity 0.2s;
}
.element:hover { opacity: 0.85; }
.element[aria-current="true"] { opacity: 1; }
.element__n {
  font-size: 10px;
  letter-spacing: 0.1em;
  opacity: 0.6;
}
.element__tick {
  align-self: center;
  width: 14px;
  height: 1px;
  background: currentColor;
  display: block;
  opacity: 0.45;
  transition: width 0.25s ease, opacity 0.25s;
}
.element[aria-current="true"] .element__tick {
  width: 26px;
  height: 2px;
  opacity: 1;
}

/* 首屏唯一的按钮：一路滚到内容页。
   页面别处的框都拆了，这里留一个——它是要被点的，不是装饰。 */
.hero__jump {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px 9px 18px;
  border: 1px solid color-mix(in srgb, var(--hero-fg) 26%, transparent);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hero-fg);
  opacity: calc(1 - var(--hero-progress) * 1.4);
  transition: color 0.22s linear, background 0.2s, border-color 0.2s;
}
.hero__jump:hover {
  background: color-mix(in srgb, var(--hero-fg) 7%, transparent);
  border-color: color-mix(in srgb, var(--hero-fg) 52%, transparent);
}
/* 箭头用一个小方块画，跟 slogan 末尾的光标是同一套语言 */
.hero__jump-arrow {
  width: 6px;
  height: 6px;
  background: currentColor;
  display: inline-block;
  animation: nudge 2.6s ease-in-out infinite;
}
@keyframes nudge {
  0%, 62%, 100% { transform: translateY(0); opacity: 1; }
  76% { transform: translateY(5px); opacity: 0.4; }
}

.hero-track { height: 340vh; position: relative; z-index: 0; }

/* ── 内容页：从下方盖上来 ─────────────────────────────────── */

.content {
  position: relative;
  z-index: 2;
  background: var(--paper);
  box-shadow: 0 -34px 80px rgba(20, 20, 15, 0.14);
}

.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(72px, 11vh, 132px) var(--gutter);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 26px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow .rule {
  position: relative;
  flex: 1;
  height: 9px;
  user-select: none;
  pointer-events: none;
}
.eyebrow .rule::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 4px;
  height: 1px;
  background: linear-gradient(90deg, rgba(20, 20, 15, 0.2), rgba(20, 20, 15, 0.1) 72%, rgba(20, 20, 15, 0));
}
/* 与路线图竖向时间轴共用同一种视觉语言：细线、短实线、明确刻度。 */
.eyebrow .rule i {
  position: absolute;
  left: clamp(54px, 22%, 220px);
  top: 4px;
  width: clamp(42px, 6vw, 84px);
  height: 1px;
  background: rgba(20, 20, 15, 0.48);
}
.eyebrow .rule i::before,
.eyebrow .rule i::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 1px;
  height: 7px;
  background: rgba(20, 20, 15, 0.48);
}
.eyebrow .rule i::before { left: 0; }
.eyebrow .rule i::after { right: 0; }

h2.section__title {
  margin: 0;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 620;
  max-width: 20em;
  /* 中文可以在任意字之间断行，标题一长就会把词劈开。
     balance 把两行拉匀，断点自然落在词与词之间 */
  text-wrap: balance;
}

.section__lead {
  margin: 20px 0 0;
  font-size: clamp(1.02rem, 1.5vw, 1.24rem);
  line-height: 1.66;
  color: var(--ink-soft);
  max-width: 34em;
}

/* 路线图导语承担完整的架构叙事，宽屏适度放宽；中文优先按词组换行。 */
.roadmap .section__lead {
  font-size: clamp(0.98rem, 1.25vw, 1.12rem);
  max-width: 44em;
  word-break: auto-phrase;
}

.section__body { margin: 26px 0 0; max-width: 40em; color: var(--muted); }
.section__body p { margin: 0 0 15px; }
.section__body p:last-child { margin-bottom: 0; }

/* ── 过渡带：一条，不占屏 ───────────────────────────── */

.lede__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(48px, 7vh, 84px) var(--gutter) clamp(44px, 6vh, 72px);
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 3vw, 46px);
  flex-wrap: wrap;
}
.lede__title {
  margin: 0;
  font-size: clamp(1.45rem, 2.5vw, 2.05rem);
  font-weight: 620;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.lede__lead {
  margin: 0;
  flex: 1;
  min-width: 18em;
  max-width: 40em;
  font-size: clamp(0.98rem, 1.15vw, 1.1rem);
  line-height: 1.7;
  color: var(--muted);
}

/* ── 卖点：六页叠在一块 sticky 舞台上，滚动时从右边盖过来 ── */

.deck { position: relative; }
.deck__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  background: var(--paper);
  will-change: transform;
}
/* 推进来的那一页左缘带一道很轻的投影，才看得出是「盖」上来而不是换了张图 */
.panel::before {
  content: "";
  position: absolute;
  left: -44px;
  top: 0;
  bottom: 0;
  width: 44px;
  background: linear-gradient(to right, rgba(20, 20, 15, 0), rgba(20, 20, 15, 0.08));
  pointer-events: none;
  opacity: 0;
}
.panel[data-moving]::before { opacity: 1; }
.panel[data-i="0"]::before { display: none; }

/* 窄屏 / 减少动态：退回普通竖排 */
.deck[data-mode="stack"] .deck__stage { position: static; height: auto; overflow: visible; }
.deck[data-mode="stack"] .panel {
  position: relative;
  inset: auto;
  transform: none !important;
  will-change: auto;
}
.deck[data-mode="stack"] .panel::before { display: none; }

.panel__inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(84px, 13vh, 128px) var(--gutter) clamp(44px, 7vh, 76px);
  display: grid;
  grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr);
  gap: clamp(30px, 4vw, 64px);
  align-items: center;
}

/* 01 那一页：文案收成窄栏，剩下的整块留给斜放的截图 */
.panel[data-i="0"] .panel__inner {
  max-width: none;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 72px);
}

.panel__copy { max-width: 32em; }

.panel__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
}
.panel__n { font-weight: 600; }
.panel__status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.panel__status::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ember);
}
.panel__status[data-kind="beta"]::before { background: var(--violet); }

.panel__title {
  margin: 0 0 16px;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.26;
  letter-spacing: -0.012em;
  font-weight: 620;
}
.panel__body {
  margin: 0;
  font-size: clamp(0.96rem, 1.05vw, 1.04rem);
  line-height: 1.8;
  color: var(--ink-soft);
}
.panel__note {
  margin: 20px 0 0;
  padding-left: 15px;
  border-left: 2px solid var(--line);
  font-size: 0.89rem;
  line-height: 1.75;
  color: var(--muted);
}

.art__note {
  margin: 18px 0 0;
  font-size: 0.85rem;
  line-height: 1.72;
  color: var(--muted);
  max-width: 44em;
}
.art__note--mono {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
}

/* 翻页控件：钉在舞台右下角，不跟着页一起滑 */
.deck__nav {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(26px, 4.5vh, 46px);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
}
.deck[data-mode="stack"] .deck__nav { display: none; }
.deck__count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--faint);
}
.deck__count b { color: var(--ink); font-weight: 600; }
.deck__next {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.deck__next:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  transform: translateX(3px);
}
.deck__next svg { display: block; }

/* ── 01 截图 ────────────────────────────────────────── */

.shot { margin: 0; }
/* 平放。图本身是完整的一扇窗，圆角交给 border-radius，投影给一点厚度 */
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 9px;
  box-shadow:
    0 2px 4px rgba(20, 20, 15, 0.05),
    0 30px 66px rgba(20, 20, 15, 0.15),
    0 80px 110px rgba(20, 20, 15, 0.06);
}
.panel[data-active] .shot img {
  animation: shotIn 0.85s cubic-bezier(0.2, 0.75, 0.3, 1) backwards;
}
@keyframes shotIn {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
}

/* ── 02 文件状态复核 + 四步 ────────────────────────── */

.diffcard {
  font-family: var(--mono);
  font-size: clamp(12px, 1.05vw, 14px);
  line-height: 2.1;
}
.diffcard__file { margin: 0 0 8px; color: var(--faint); }
.diffcard__row { margin: 0; display: flex; gap: 14px; }
.diffcard__row span { width: 10px; flex: none; color: var(--faint); }
.diffcard__row--minus {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: rgba(233, 78, 43, 0.55);
  text-decoration-thickness: 1px;
}
.diffcard__row--plus { color: var(--ink); }
.diffcard__row--plus span { color: var(--acid); }
.panel[data-active] .diffcard__row--plus {
  animation: rowIn 0.55s 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}
@keyframes rowIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: none; }
}

.rail { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 9px; }
.rail__step {
  display: flex;
  gap: 13px;
  align-items: baseline;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.rail__n { font-family: var(--mono); font-size: 10.5px; color: var(--faint); transition: color 0.3s; }
.panel[data-active] .rail__n {
  animation: railPulse 4.4s linear infinite;
  animation-delay: calc(var(--i, 0) * 0s);
}
.rail__step:nth-child(1) .rail__n { animation-delay: 0s; }
.rail__step:nth-child(2) .rail__n { animation-delay: 1.1s; }
.rail__step:nth-child(3) .rail__n { animation-delay: 2.2s; }
.rail__step:nth-child(4) .rail__n { animation-delay: 3.3s; }
@keyframes railPulse {
  0%, 18%, 100% { color: var(--faint); }
  4%, 12% { color: var(--ember); }
}

/* ── 03 风险条与那道拦住它的线 ──────────────────────── */

.ladder { position: relative; --track: clamp(150px, 22vw, 210px); }
.riskrows { list-style: none; margin: 0; padding: 0; }
.riskrow {
  display: grid;
  grid-template-columns: 30px var(--track) auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 9px 0;
}
.riskrow__lv { font-family: var(--mono); font-size: 12px; font-weight: 600; }
.riskrow__bar { position: relative; height: 7px; background: var(--line-soft); }
.riskrow__bar i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--w);
  background: var(--ink);
  opacity: 0.8;
}
.panel[data-active] .riskrow__bar i {
  animation: barGrow 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}
.riskrow:nth-child(1) .riskrow__bar i { animation-delay: 0.15s; }
.riskrow:nth-child(2) .riskrow__bar i { animation-delay: 0.25s; }
.riskrow:nth-child(3) .riskrow__bar i { animation-delay: 0.35s; }
.riskrow:nth-child(4) .riskrow__bar i { animation-delay: 0.45s; }
.riskrow:nth-child(5) .riskrow__bar i { animation-delay: 0.55s; background: var(--ember); }
@keyframes barGrow { from { width: 0; } }
.riskrow__name { font-size: 0.9rem; white-space: nowrap; }
.riskrow__desc { font-size: 0.84rem; color: var(--muted); }

/* 那道线：风险条再长也过不去 */
.ladder { padding-top: 22px; }
.ladder__gate {
  position: absolute;
  left: calc(30px + 16px + var(--track) + 7px);
  top: 22px;
  bottom: 46px;
  width: 2px;
  background: var(--ink);
}
/* 标签压在竖线正上方，别横穿右边的行文字 */
.ladder__label {
  position: absolute;
  bottom: 100%;
  left: 1px;
  transform: translateX(-50%);
  margin-bottom: 7px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.3em;
  color: var(--ink);
  white-space: nowrap;
}

.modes {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  gap: clamp(20px, 3vw, 44px);
  flex-wrap: wrap;
}
.mode__k { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; color: var(--faint); }
.mode__v { font-size: 0.9rem; }

/* ── 04 自己往下走的事件流 ──────────────────────────── */

.stream {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: clamp(11.5px, 1vw, 13px);
  line-height: 2.15;
}
.ev { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; white-space: nowrap; }
.ev__seq { color: var(--faint); }
.ev__name { color: var(--ink); }
.ev__meta { color: var(--muted); }
.panel[data-active] .ev {
  animation: evIn 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
  animation-delay: var(--d);
}
@keyframes evIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ── 05 一段历史分成两条道 ──────────────────────────── */

/* 两条道的中心在 (100% - gap) / 4 处，分岔线必须落在这里，
   落在容器的 25% / 75% 会差十几个像素 */
.fork { text-align: center; --gap: clamp(24px, 3.4vw, 56px); }
.fork__source {
  display: inline-block;
  margin: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--muted);
}
.fork__split { position: relative; height: 46px; margin: 12px 0 4px; }
.fork__split::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 15px;
  background: var(--line);
}
.fork__split::after {
  content: "";
  position: absolute;
  left: calc((100% - var(--gap)) / 4);
  right: calc((100% - var(--gap)) / 4);
  top: 15px;
  height: 1px;
  background: var(--line);
}
.fork__split i { position: absolute; top: 15px; width: 1px; height: 31px; background: var(--line); }
.fork__split i:first-child { left: calc((100% - var(--gap)) / 4); }
.fork__split i:last-child { right: calc((100% - var(--gap)) / 4); }

.fork__lanes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
.lane__head {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.lane__rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.lane__rules li { font-size: 0.88rem; line-height: 1.7; color: var(--muted); }
/* 两条道的内容跟着分岔线居中，视觉重心才对得上「同一段执行历史」 */
.lane__head, .lane__rules li { text-align: center; }
.panel[data-active] .lane {
  animation: laneIn 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}
.lane:first-child { animation-delay: 0.3s; }
.lane:last-child { animation-delay: 0.44s; }
@keyframes laneIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ── 06 中断后回到安全存档，再经对账继续 ────────────── */

.tl { position: relative; padding: 8px 0 0; }
.tl__rail {
  position: relative;
  height: 2px;
  background: var(--line);
  margin: 34px 8% 0;
}
.tl__head {
  position: absolute;
  top: -5px;
  left: 0;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--ink);
}
.panel[data-active] .tl__head { animation: playhead 7s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes playhead {
  0% { left: 0; opacity: 1; }
  38% { left: 50%; opacity: 1; }
  42% { left: 50%; opacity: 0; }
  44% { left: 25%; opacity: 0; }
  50% { left: 25%; opacity: 1; }
  76% { left: 75%; opacity: 1; }
  100% { left: 100%; opacity: 1; }
}
.tl__marks { list-style: none; margin: 0; padding: 0; }
.tl__mark { position: absolute; left: var(--x); top: 0; transform: translateX(-50%); }
.tl__dot {
  display: block;
  width: 9px;
  height: 9px;
  margin: -4px auto 0;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--violet);
}
.tl__label {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.tl__recover {
  position: absolute;
  left: calc(8% + 0.75 * 84%);
  top: 0;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--ember);
  opacity: 0;
}
.panel[data-active] .tl__recover { animation: recoverFlash 7s linear infinite; }
@keyframes recoverFlash {
  0%, 68% { opacity: 0; }
  74%, 86% { opacity: 1; }
  92%, 100% { opacity: 0; }
}
.tl .art__note { margin-top: 58px; }

/* ── 路线图：编辑式时间轴 ─────────────────────────────
   细线负责建立阅读秩序，短横刻度负责标记节点；越靠后的条目越淡。 */

.rm__list {
  list-style: none;
  margin: clamp(44px, 6vh, 76px) 0 0;
  padding: 0;
  counter-reset: none;
}

.rm__item {
  position: relative;
  display: grid;
  grid-template-columns: clamp(96px, 10.5vw, 148px) minmax(0, 1fr);
  gap: 0 clamp(22px, 3.4vw, 52px);
  padding: 0 0 clamp(44px, 5.5vh, 76px) clamp(24px, 2.4vw, 34px);
}
.rm__item:last-child { padding-bottom: 0; }

.rm__rail {
  position: absolute;
  left: 1px;
  top: 0;
  bottom: 0;
  width: 15px;
  opacity: var(--rail-opacity, 0.3);
  user-select: none;
  pointer-events: none;
}
.rm__rail::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 7px;
  bottom: 0;
  width: 1px;
  background: var(--ink);
}
.rm__rail::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 7px;
  width: 9px;
  height: 1px;
  background: var(--ink);
}
/* 最后一条只保留起点和一小段收尾，不再向页尾贯穿。 */
.rm__item:last-child .rm__rail { bottom: auto; height: 32px; }

.rm__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding-top: 0.1em;
}
.rm__n {
  font-family: var(--mono);
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--faint);
}
.rm__key {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  line-height: 1.5;
  color: var(--muted);
}
.rm__status {
  display: flex;
  /* 英文状态会折成两行，圆点要对第一行，不是对整块居中 */
  align-items: flex-start;
  gap: 7px;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  line-height: 1.5;
  color: var(--muted);
}
.rm__status::before {
  content: "";
  flex: none;
  margin-top: 0.42em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--faint);
}
.rm__status[data-kind="shipped"]::before { background: var(--acid); }
.rm__status[data-kind="now"]::before { background: var(--ember); }
.rm__status[data-kind="next"]::before { background: var(--violet); }

/* 当前主线那一条：编号和状态实起来，其余保持安静 */
.rm__item[data-kind="now"] .rm__n { color: var(--ink); font-weight: 400; }
.rm__item[data-kind="now"] .rm__status { color: var(--ink-soft); }

.rm__title {
  margin: 0;
  font-size: clamp(1.16rem, 1.75vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: -0.008em;
  font-weight: 620;
  max-width: 22em;
}
.rm__body { margin: 15px 0 0; max-width: 40em; }
.rm__body p {
  margin: 0 0 13px;
  font-size: clamp(0.92rem, 1.05vw, 1rem);
  line-height: 1.78;
  color: var(--ink-soft);
}
.rm__body p:last-child { margin-bottom: 0; }

.rm__quote {
  margin: 22px 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--line);
  max-width: 30em;
  font-size: clamp(0.98rem, 1.2vw, 1.1rem);
  line-height: 1.6;
  font-weight: 560;
  color: var(--ink);
}

.rm__basis {
  margin: clamp(40px, 5vh, 64px) 0 0;
  max-width: 58em;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  line-height: 1.9;
  color: var(--faint);
}

/* 页脚 */

/* 页脚不再换底色：全站只有一种纸面 */
.footer { background: var(--paper); }
.footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(56px, 8vh, 92px) var(--gutter) 40px;
  display: grid;
  grid-template-columns: 1.3fr 1.3fr 0.8fr;
  gap: clamp(28px, 4vw, 64px);
}
.footer h3 {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer p { margin: 0; color: var(--ink-soft); font-size: 0.94rem; }
.footer__links { list-style: none; margin: 0; padding: 0; }
.footer__links li { margin-bottom: 10px; }
.footer__links > li > a,
.footer__links > li > span,
.footer__copy {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}
.footer__links > li > a:hover,
.footer__copy:hover { border-bottom-color: var(--ink); }
.footer__links > li > span { color: var(--faint); border-bottom-style: dotted; }
.footer__copy {
  appearance: none;
  margin: 0;
  padding: 0 0 2px;
  border-width: 0 0 1px;
  border-style: solid;
  border-color: var(--line);
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: copy;
}
.footer__copy b { font: inherit; font-weight: inherit; }
.footer__links em {
  font-style: normal;
  font-size: 10px;
  color: var(--faint);
  letter-spacing: 0.16em;
  margin-left: 8px;
}

.footer__bottom {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px var(--gutter) 46px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--faint);
}

.footer__band {
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.1;
  white-space: pre;
  overflow: hidden;
  color: rgba(20, 20, 15, 0.13);
  user-select: none;
  padding: 0 var(--gutter);
  max-width: var(--maxw);
  margin: 0 auto 6px;
}

/* ── 响应式 ────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 窄到放不下左右两栏时，卖点改成上下：文案在上，配图在下 */
@media (max-width: 980px) {
  .panel__inner,
  .panel[data-i="0"] .panel__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(26px, 4vh, 40px);
    padding: clamp(56px, 8vh, 84px) var(--gutter);
    max-width: var(--maxw);
  }
  .panel__copy { max-width: 42em; }
  .shot img { border-radius: 6px; box-shadow: 0 2px 4px rgba(20, 20, 15, 0.05), 0 18px 44px rgba(20, 20, 15, 0.13); }
  .ladder { --track: clamp(110px, 30vw, 180px); }
  .riskrow { grid-template-columns: 28px var(--track) auto; }
  .riskrow__desc { display: none; }
  .ladder__gate { left: calc(28px + 16px + var(--track) + 7px); }
  .tl__rail { margin-left: 12%; margin-right: 12%; }
  .tl__label { font-size: 9px; }
}

@media (max-width: 860px) {
  .hero { align-items: stretch; }
  .hero__inner { height: 100%; }
  /* 窄屏：文案在上、元素在下，中间那块留给月球 / 山 / 水 */
  .hero__copy {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: none;
    padding-top: clamp(92px, 15vh, 150px);
    padding-bottom: clamp(26px, 4vh, 44px);
  }
  .hero__slogan { font-size: clamp(2.9rem, 13.5vw, 4.4rem); }
  .hero__sub { max-width: 100%; }
  .hero__rule { max-width: none; }
  .hero__foot { margin-top: auto; }
  .hero-track { height: 320vh; }
  /* 窄屏：编号那一列收到标题上方，时间轴留着但更轻 */
  .rm__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding-left: 22px;
  }
  .rm__meta { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
  .rm__n { font-size: 1.15rem; }
  .rm__status { margin-top: 0; }
  /* 窄屏条目高得多，整体再压淡，条目之间的浓淡落差仍然保留。 */
  .rm__rail { opacity: calc(var(--rail-opacity, 0.3) * 0.72); }
}

@media (max-width: 640px) {
  .footer__inner { grid-template-columns: 1fr; }
  /* 窄屏没有分岔线可对齐，整段回到左对齐 */
  .fork__lanes { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .fork__split { display: none; }
  .fork { text-align: left; }
  .lane__head, .lane__rules li { text-align: left; }
  .tl__label { display: none; }
  .lede__title { white-space: normal; }
  .navlink { font-size: 11px; letter-spacing: 0.1em; }
}

/* 再窄就放不下了：顶栏只留品牌、语言和 GitHub */
@media (max-width: 359px) {
  .topnav__links { display: none; }
}

/* 矮视口（横屏手机）：首屏得整屏放得下 */
@media (max-height: 560px) {
  .hero__slogan { font-size: clamp(1.9rem, 5vw, 3.1rem); line-height: 0.95; }
  .hero__sub { margin-top: 16px; font-size: 0.94rem; line-height: 1.6; }
  .hero__stage { margin-bottom: 12px; }
  .hero__foot { margin-top: 20px; }
  .hero__copy { padding-top: 74px; padding-bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__jump-arrow { animation: none; }
  /* 光标不闪，但保留——它是版式的一部分，不只是动效 */
  .slogan__caret { animation: none; }
  .panel[data-active] .pin,
  .panel[data-active] .diffcard__row--plus,
  .panel[data-active] .rail__n,
  .panel[data-active] .riskrow__bar i,
  .panel[data-active] .ev,
  .panel[data-active] .lane,
  .panel[data-active] .tl__head,
  .panel[data-active] .tl__recover { animation: none; }
  .panel[data-active] .tl__recover { opacity: 1; }
  .hero__slogan,
  .hero__sub,
  .hero__stage,
  .brand__name,
  .topnav__link,
  .element { transition: none; }
}