.page-about {
  --about-rule: #D8C193;
  --about-paper-2: #EFE6D2;
  color: var(--ink);
  background: var(--paper);
}

.page-about .about-hero {
  position: relative;
  background: var(--table-green);
  color: var(--paper);
  overflow: hidden;
  padding: 72px 0 84px;
}

.page-about .about-hero::before {
  content: "";
  position: absolute;
  inset: auto -20% -60% 40%;
  height: 340px;
  background: var(--table-green-2);
  transform: rotate(-7deg);
  border-radius: var(--radius-l);
  pointer-events: none;
}

.page-about .about-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  z-index: 1;
}

.page-about .about-hero .crumbs__link,
.page-about .about-hero .crumbs__item {
  color: rgba(246, 240, 226, 0.62);
}

.page-about .about-hero__eyebrow {
  color: var(--gold);
  margin: 18px 0 14px;
}

.page-about .about-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 8vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  color: var(--paper);
}

.page-about .about-hero__lead-text {
  max-width: 60ch;
  color: rgba(246, 240, 226, 0.82);
}

.page-about .about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-about .about-hero__figure {
  position: relative;
  margin: 0;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-plate);
  border: 1px solid rgba(200, 160, 56, 0.34);
}

.page-about .about-hero__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.03);
}

.page-about .about-hero__figure-plate {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: var(--table-deep);
  font-family: var(--font-display);
  font-size: 1.4rem;
  border-radius: var(--radius-s);
  box-shadow: 0 10px 24px -14px rgba(8, 40, 30, 0.9);
}

.page-about .about-canvas {
  position: relative;
  background: var(--paper);
}

.page-about .chapter {
  padding: 56px 0 8px;
}

.page-about .chapter + .chapter {
  border-top: 1px solid var(--about-rule);
  margin-top: 48px;
  padding-top: 56px;
}

.page-about .chapter__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.page-about .chapter__rail {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.page-about .chapter__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 13vw, 5.6rem);
  line-height: 0.9;
  color: var(--table-green);
  opacity: 0.28;
  letter-spacing: -0.04em;
}

.page-about .chapter__idx {
  color: var(--gold-dark);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.page-about .chapter__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 5.2vw, 2.5rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--ink-green);
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--about-rule);
}

.page-about .chapter__body .prose {
  color: var(--ink);
  max-width: 68ch;
}

.page-about .prose--tight {
  margin-top: 20px;
  color: #3A3026;
}

.page-about .about-facets {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 30px;
}

.page-about .about-facet {
  position: relative;
  padding: 20px 22px 22px;
  background: var(--about-paper-2);
  border-radius: var(--radius-m);
  border-left: 3px solid var(--gold);
}

.page-about .about-facet__no {
  display: inline-block;
  font-family: var(--font-index);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--vermilion);
  margin-bottom: 6px;
}

.page-about .about-facet__name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink-green);
  margin: 0 0 8px;
}

.page-about .about-facet p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #3A3026;
}

.page-about .flowbar {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 30px 0 0;
  padding: 0;
}

.page-about .flowbar__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: var(--table-green);
  color: var(--paper);
  border-radius: var(--radius-s);
  transition: background 260ms var(--ease-flip), transform 260ms var(--ease-flip);
}

.page-about .flowbar__step + .flowbar__step::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 30px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 11px solid var(--gold);
}

.page-about .flowbar__step:hover,
.page-about .flowbar__step:focus-within {
  background: var(--table-green-2);
  transform: translateY(-2px);
}

.page-about .flowbar__no {
  font-family: var(--font-index);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--gold-hi);
}

.page-about .flowbar__name {
  font-size: 1.02rem;
  letter-spacing: 0.04em;
}

.page-about .flowbar__note {
  font-size: 0.86rem;
  color: rgba(246, 240, 226, 0.7);
}

.page-about .about-band {
  margin: 64px 0 8px;
  background: var(--cream);
  border-top: 1px solid var(--about-rule);
  border-bottom: 1px solid var(--about-rule);
}

.page-about .about-band__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 40px 0;
}

.page-about .about-band__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-m);
  object-fit: cover;
}

.page-about .about-band__caption {
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink-green);
  border-left: 3px solid var(--gold);
  padding-left: 16px;
}

.page-about .team-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 28px;
}

.page-about .team-split__col {
  padding: 24px 22px;
  background: var(--about-paper-2);
  border-radius: var(--radius-m);
  border-top: 3px solid var(--gold);
}

.page-about .team-split__col--alt {
  background: var(--cream);
  border-top-color: var(--vermilion);
}

.page-about .team-split__count {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 10vw, 3.4rem);
  line-height: 1;
  color: var(--table-green);
}

.page-about .team-split__role {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-green);
  margin: 10px 0 14px;
}

.page-about .team-split__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.page-about .team-split__list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.94rem;
  line-height: 1.7;
  color: #3A3026;
}

.page-about .team-split__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 8px;
  background: var(--gold);
  transform: rotate(45deg);
}

.page-about .team-split__col--alt .team-split__list li::before {
  background: var(--vermilion);
}

.page-about .timeline {
  margin-top: 30px;
}

.page-about .timeline__axis {
  display: block;
  width: 100%;
  height: 70px;
  margin-bottom: 8px;
}

.page-about .timeline__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  border-left: 1px solid var(--about-rule);
}

.page-about .timeline__item {
  padding-left: 0;
}

.page-about .tl-node {
  background: transparent;
  border: 0;
}

.page-about .tl-node__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-s);
  transition: background 220ms var(--ease-flip);
}

.page-about .tl-node__head::-webkit-details-marker {
  display: none;
}

.page-about .tl-node__head:hover {
  background: var(--cream);
}

.page-about .tl-node__ver {
  font-family: var(--font-index);
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  color: var(--vermilion);
}

.page-about .tl-node__year {
  font-family: var(--font-index);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--gold-dark);
}

.page-about .tl-node__label {
  font-size: 0.98rem;
  color: var(--ink-green);
}

.page-about .tl-node__body {
  padding: 0 14px 16px 14px;
}

.page-about .tl-node__body p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.75;
  color: #3A3026;
  border-left: 2px solid var(--gold);
  padding-left: 14px;
}

.page-about .about-figure-pair {
  margin: 64px 0 8px;
  background: var(--table-green);
  color: var(--paper);
}

.page-about .about-figure-pair__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 46px 0;
}

.page-about .about-figure-pair__item {
  margin: 0;
}

.page-about .about-figure-pair__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-m);
  object-fit: cover;
  filter: saturate(0.9);
}

.page-about .about-figure-pair .media-frame__caption {
  display: block;
  margin-top: 12px;
  font-size: 0.86rem;
  color: rgba(246, 240, 226, 0.7);
}

.page-about .about-figure-pair__note .idx {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0.18em;
}

.page-about .about-figure-pair__note .prose {
  color: rgba(246, 240, 226, 0.86);
  max-width: 46ch;
  margin: 12px 0 20px;
}

.page-about .rhythm {
  margin-top: 28px;
  border-top: 1px solid var(--about-rule);
}

.page-about .rhythm__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--about-rule);
}

.page-about .rhythm__key {
  font-family: var(--font-index);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--gold-dark);
  text-transform: uppercase;
}

.page-about .rhythm__val {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--ink);
}

.page-about .stat-bars {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-about .stat-bars__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 14px;
}

.page-about .stat-bars__label {
  font-size: 0.92rem;
  color: var(--ink-green);
}

.page-about .stat-bars__value {
  font-family: var(--font-index);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--table-green);
  text-align: right;
}

.page-about .stat-bars__track {
  grid-column: 1 / -1;
  display: block;
  height: 6px;
  border-radius: var(--pill);
  background: rgba(200, 160, 56, 0.2);
  overflow: hidden;
}

.page-about .stat-bars__fill {
  display: block;
  height: 100%;
  width: var(--pct, 50%);
  background: linear-gradient(90deg, var(--gold), var(--gold-hi));
  border-radius: var(--pill);
}

.page-about .about-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.page-about .about-canvas > .chapter:last-of-type {
  padding-bottom: 72px;
}

@media (min-width: 720px) {
  .page-about .about-facets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-about .flowbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .page-about .flowbar__step + .flowbar__step::before {
    top: 50%;
    left: -11px;
    margin-top: -6px;
    border-left: none;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 11px solid var(--gold);
    border-top-color: transparent;
    border-bottom-color: transparent;
  }

  .page-about .team-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-about .about-band__inner {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
  }

  .page-about .rhythm__row {
    grid-template-columns: 200px 1fr;
    align-items: baseline;
    gap: 18px;
  }
}

@media (min-width: 1024px) {
  .page-about .about-hero {
    padding: 96px 0 110px;
  }

  .page-about .about-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: 56px;
  }

  .page-about .about-hero__figure {
    transform: translateY(26px) rotate(-1.5deg);
  }

  .page-about .chapter {
    padding-top: 72px;
  }

  .page-about .chapter + .chapter {
    margin-top: 64px;
    padding-top: 72px;
  }

  .page-about .chapter__grid {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }

  .page-about .chapter__rail {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    position: sticky;
    top: 108px;
  }

  .page-about .chapter__num {
    font-size: 5.4rem;
  }

  .page-about .about-facets {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }

  .page-about .flowbar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-about .about-figure-pair__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 48px;
    padding: 60px 0;
  }

  .page-about .timeline {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 36px;
    align-items: start;
  }

  .page-about .timeline__axis {
    height: 220px;
    margin-bottom: 0;
    position: sticky;
    top: 120px;
  }

  .page-about .stat-bars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .flowbar__step,
  .page-about .tl-node__head,
  .page-about .about-hero__figure {
    transition: none;
    transform: none;
  }
}
<<<END>>>

等等，我注意到最后的 <<<END>>> 标记不应该出现，只保留 MAIN_HTML 和 PAGE_CSS 两个标记。让我移除它。

实际上，让我重新查看需求——它说每个标记只能出现一次，标记必须是三个尖括号。所以应该只有  和 。让我修订。

其实，回看我之前的输出，我在末尾加了 <<<END>>> 是不正确的。让我重新输出。


<main id="main-content" class="page-about">

  <section class="about-hero">
    <div class="wrap about-hero__grid">
      <div class="about-hero__lead">
        <nav class="crumbs" aria-label="面包屑">
          <ol class="crumbs__list">
            <li class="crumbs__item"><a class="crumbs__link" href="/">首页</a></li>
            <li class="crumbs__item"><span aria-current="page">平台介绍</span></li>
          </ol>
        </nav>
        <p class="eyebrow about-hero__eyebrow">SINCE 2019 · CN SITE</p>
        <h1 class="about-hero__title">一张摊开的牌桌，<br>六年没换过位置</h1>
        <p class="lead about-hero__lead-text">
          万豪斗地主电自 2019 年做起，把斗地主和棋牌电玩的内容收拾成能随手取用的样子：电脑端一屏直达，牌局回放按时上新，新手装机包配齐规则解释，旧的版本资料留档可查。你不需要在几个页面之间来回找，想入座、想看回放、想弄清一条规则，都能在两步之内拿到。
        </p>
        <div class="about-hero__actions">
          <a class="btn btn--rush" href="/journal/">看回放日志</a>
          <a class="btn btn--quiet" href="/download/">下载装机包</a>
        </div>
      </div>
      <figure class="about-hero__figure">
        <span class="about-hero__figure-plate" aria-hidden="true">W</span>
        <img src="{zhanqunpic:h:800w:1400}" width="1400" height="800" alt="老牌棋牌室木质牌桌空景，绿色桌布与吊灯光晕，桌面无筹码" class="about-hero__img">
      </figure>
    </div>
  </section>

  <section class="about-canvas" aria-label="平台介绍正文">

    <article class="chapter" id="chapter-01">
      <div class="wrap chapter__grid">
        <div class="chapter__rail">
          <span class="chapter__num num" aria-hidden="true">01</span>
          <span class="chapter__idx idx">WHAT WE DO</span>
        </div>
        <div class="chapter__body">
          <h2 class="chapter__title">这里做什么内容</h2>
          <p class="prose">
            打开站点，你面对的是四件互相接得住的事：直接进牌桌、翻看别人打过的牌局、把客户端装到电脑上并把规则一条条看明白、回头找某个旧版本的资料。它们不是四个孤岛——回放里出现的规则疑点，能顺着标签落到规则条目上；规则条目里提到的版本差别，能顺着版本号回到资料目录；看完资料想自己上手，首页的直达按钮就把你送进牌桌。
          </p>
          <div class="about-facets">
            <div class="about-facet">
              <span class="about-facet__no num">A</span>
              <h3 class="about-facet__name">电脑端入口</h3>
              <p>首页一屏之内就能抵达，不绕跳转，加载通常在 1.2 秒以内。</p>
            </div>
            <div class="about-facet">
              <span class="about-facet__no num">B</span>
              <h3 class="about-facet__name">牌局回放</h3>
              <p>按牌桌编号、座位、出牌时间轴三种方式回溯，配 1×、2×、4× 三档速度。</p>
            </div>
            <div class="about-facet">
              <span class="about-facet__no num">C</span>
              <h3 class="about-facet__name">装机包与规则解释</h3>
              <p>当前主版本 3.6，装机包约 86 MB，配 136 条规则条目，分六类逐条说明。</p>
            </div>
            <div class="about-facet">
              <span class="about-facet__no num">D</span>
              <h3 class="about-facet__name">旧版本资料</h3>
              <p>2024 年起的目录按季度分册编号存档，过期条目的索引继续保留可查。</p>
            </div>
          </div>
        </div>
      </div>
    </article>

    <article class="chapter" id="chapter-02">
      <div class="wrap chapter__grid">
        <div class="chapter__rail">
          <span class="chapter__num num" aria-hidden="true">02</span>
          <span class="chapter__idx idx">HOW IT'S MADE</span>
        </div>
        <div class="chapter__body">
          <h2 class="chapter__title">一条内容从采集到发布</h2>
          <p class="prose">
            你在回放页看到的那一条记录，通常已经过了四道手。采集的人先把原始过程整理成可读的结构，校对的人对着规则条文逐项确认，再由负责标签的人打上反馈与登录两条主线下的子标签，最后排进发布队列。四条线下来，单条回放平均会被完整校对两次。
          </p>
          <ol class="flowbar" aria-label="内容处理四步">
            <li class="flowbar__step" data-reveal>
              <span class="flowbar__no num">01</span>
              <strong class="flowbar__name">采集</strong>
              <span class="flowbar__note">整理成可读结构</span>
            </li>
            <li class="flowbar__step" data-reveal data-reveal-index="1">
              <span class="flowbar__no num">02</span>
              <strong class="flowbar__name">校对</strong>
              <span class="flowbar__note">对着规则复核</span>
            </li>
            <li class="flowbar__step" data-reveal data-reveal-index="2">
              <span class="flowbar__no num">03</span>
              <strong class="flowbar__name">打标签</strong>
              <span class="flowbar__note">归入反馈或登录线</span>
            </li>
            <li class="flowbar__step" data-reveal data-reveal-index="3">
              <span class="flowbar__no num">04</span>
              <strong class="flowbar__name">发布</strong>
              <span class="flowbar__note">排进上新队列</span>
            </li>
          </ol>
          <p class="prose prose--tight">
            这一套最直接的用处是：你翻到一条半年前的回放，规则解释不会跟当时的版本对不上。如果确实发现某处说法和你的记忆有出入，可以通过咨询通道提出来，我们会给出处理反馈。
          </p>
        </div>
      </div>
    </article>

    <figure class="about-band">
      <div class="wrap about-band__inner">
        <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="木质墙面上的烫金标牌特写，金漆边缘有使用过的磨痕" loading="lazy" decoding="async" class="about-band__img">
        <figcaption class="media-frame__caption about-band__caption">烫金标牌会旧，规矩不会旧——这是我们校对岗存在的理由。</figcaption>
      </div>
    </figure>

    <article class="chapter" id="chapter-03">
      <div class="wrap chapter__grid">
        <div class="chapter__rail">
          <span class="chapter__num num" aria-hidden="true">03</span>
          <span class="chapter__idx idx">THE TEAM</span>
        </div>
        <div class="chapter__body">
          <h2 class="chapter__title">团队与分工</h2>
          <p class="prose">
            站点的内容由 13 个人维持：9 名编辑负责采集、整理、打标签与发布，4 名规则校对负责核对每一条规则解释与资料条目。两组人不是上下游流水线，而是交叉复核——编辑整理出来的条目要过校对的手，校对提出的修订意见再回到编辑这边落到条目里。
          </p>
          <div class="team-split">
            <div class="team-split__col">
              <span class="team-split__count num">9</span>
              <h3 class="team-split__role">编辑</h3>
              <ul class="team-split__list">
                <li>采集牌局过程并整理成可读记录</li>
                <li>按反馈、登录两条主线归入 24 个子标签</li>
                <li>维护版本目录与季度分册编号</li>
                <li>排定每周上新队列</li>
              </ul>
            </div>
            <div class="team-split__col team-split__col--alt">
              <span class="team-split__count num">4</span>
              <h3 class="team-split__role">规则校对</h3>
              <ul class="team-split__list">
                <li>逐条核对 136 条规则解释的表述</li>
                <li>比对叫牌、倍数、出牌、结算四类的边界情况</li>
                <li>跟进异常处理与常见误判的修订</li>
                <li>反馈内容纠错通道收到的修正意见</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </article>

    <article class="chapter" id="chapter-04">
      <div class="wrap chapter__grid">
        <div class="chapter__rail">
          <span class="chapter__num num" aria-hidden="true">04</span>
          <span class="chapter__idx idx">TIMELINE</span>
        </div>
        <div class="chapter__body">
          <h2 class="chapter__title">栏目与版本一路走来</h2>
          <p class="prose">
            2019 年站点上线时，能做的事情只有一件：把人送到电脑端的牌桌前。后来回放日志独立成页，规则解释随客户端版本一起长出来，旧资料开始按季度归档，才有了今天你看到的四个去处。客户端本身也从 1.0 走到 3.6，每个大版本都留了存档。
          </p>

          <div class="timeline">
            <svg class="timeline__axis" viewBox="0 0 620 90" preserveAspectRatio="none" role="img" aria-label="2019 年至当前版本演进折线">
              <polyline points="30,70 150,56 270,44 390,30 510,18 590,14" fill="none" stroke="#C8A038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <circle cx="30" cy="70" r="5" fill="#C8A038"/>
              <circle cx="150" cy="56" r="5" fill="#C8A038"/>
              <circle cx="270" cy="44" r="5" fill="#C8A038"/>
              <circle cx="390" cy="30" r="5" fill="#C8A038"/>
              <circle cx="510" cy="18" r="5" fill="#C8A038"/>
              <circle cx="590" cy="14" r="7" fill="#E8CE7A"/>
            </svg>
            <ul class="timeline__list">
              <li class="timeline__item">
                <details class="tl-node" open>
                  <summary class="tl-node__head">
                    <span class="tl-node__ver num">1.0</span>
                    <span class="tl-node__year num">2019</span>
                    <span class="tl-node__label">站点上线，只做直达</span>
                  </summary>
                  <div class="tl-node__body">
                    <p>第一版只保留一个用途：把访客送到电脑端牌桌。入口一屏可见，没有多余跳转。</p>
                  </div>
                </details>
              </li>
              <li class="timeline__item">
                <details class="tl-node">
                  <summary class="tl-node__head">
                    <span class="tl-node__ver num">2.0</span>
                    <span class="tl-node__year num">2021</span>
                    <span class="tl-node__label">回放独立成页</span>
                  </summary>
                  <div class="tl-node__body">
                    <p>牌局记录开始单独成页，按牌桌编号、座位与出牌时间轴三种方式回溯，并加入变速播放。</p>
                  </div>
                </details>
              </li>
              <li class="timeline__item">
                <details class="tl-node">
                  <summary class="tl-node__head">
                    <span class="tl-node__ver num">3.0</span>
                    <span class="tl-node__year num">2023</span>
                    <span class="tl-node__label">标签体系铺开</span>
                  </summary>
                  <div class="tl-node__body">
                    <p>资料按反馈与登录两条主线拆成 24 个子标签，标签同时用于筛选回放与资料条目，翻找速度明显变快。</p>
                  </div>
                </details>
              </li>
              <li class="timeline__item">
                <details class="tl-node">
                  <summary class="tl-node__head">
                    <span class="tl-node__ver num">3.6</span>
                    <span class="tl-node__year num">当前</span>
                    <span class="tl-node__label">规则目录补齐</span>
                  </summary>
                  <div class="tl-node__body">
                    <p>装机包稳定在约 86 MB，配套 136 条规则条目覆盖叫牌、倍数、出牌、结算、异常处理与常见误判六类，2024 年起的旧目录按季度分册留档。</p>
                  </div>
                </details>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </article>

    <aside class="about-figure-pair">
      <div class="wrap about-figure-pair__grid">
        <figure class="about-figure-pair__item">
          <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="档案盒与纸质目录卡俯拍，卡片边缘泛黄，带手写编号" loading="lazy" decoding="async" class="about-figure-pair__img">
          <figcaption class="media-frame__caption">旧版本的目录卡一张都没丢，翻起来还是当年那份手感。</figcaption>
        </figure>
        <div class="about-figure-pair__note">
          <span class="idx">ARCHIVE</span>
          <p class="prose">
            按季度分册编号的旧目录，让「三年前那版规则是怎么写的」这类问题有地方可查。你只要记得大致年份或版本号，就能顺着分册找到对应的解释条目。
          </p>
          <a class="btn btn--quiet btn--sm" href="/journal/">去回放日志翻目录</a>
        </div>
      </div>
    </aside>

    <article class="chapter" id="chapter-05">
      <div class="wrap chapter__grid">
        <div class="chapter__rail">
          <span class="chapter__num num" aria-hidden="true">05</span>
          <span class="chapter__idx idx">RHYTHM</span>
        </div>
        <div class="chapter__body">
          <h2 class="chapter__title">更新节奏与服务范围</h2>
          <p class="prose">
            回放日志每周二和周五集中上新，一次补一批，不会零散地冒出来打断你的阅读。规则条目与资料目录跟着客户端版本走——版本一动，解释同步修订。这两条节奏叠在一起，你能大致预判「什么时候来会有新东西」。
          </p>
          <div class="rhythm">
            <div class="rhythm__row">
              <span class="rhythm__key">上新日</span>
              <span class="rhythm__val">每周二、周五</span>
            </div>
            <div class="rhythm__row">
              <span class="rhythm__key">规则修订</span>
              <span class="rhythm__val">随客户端版本发布同步进行</span>
            </div>
            <div class="rhythm__row">
              <span class="rhythm__key">单条保留</span>
              <span class="rhythm__val">默认 90 天，过期后目录索引继续留档</span>
            </div>
            <div class="rhythm__row">
              <span class="rhythm__key">覆盖面</span>
              <span class="rhythm__val">全国 31 个省级行政区的玩法习惯差异说明</span>
            </div>
          </div>
          <p class="prose prose--tight">
            如果你习惯的打法在条目里没被提到，或者某地的叫牌习惯跟站点写的不太一样，欢迎从咨询通道留言，我们会安排跟进。
          </p>
        </div>
      </div>
    </article>

    <article class="chapter" id="chapter-06">
      <div class="wrap chapter__grid">
        <div class="chapter__rail">
          <span class="chapter__num num" aria-hidden="true">06</span>
          <span class="chapter__idx idx">SCALE</span>
        </div>
        <div class="chapter__body">
          <h2 class="chapter__title">内容体量与稳定运营</h2>
          <p class="prose">
            站点累计访问用户超过 380 万，这份体量背后是六年不间断的维护：内容每天有人看，每周有人补，版本一变就有人改。对打算长期来的人来说，这意味着你今天收藏的入口和标签，明年还在原来的位置上。
          </p>
          <ul class="stat-bars">
            <li class="stat-bars__row">
              <span class="stat-bars__label">累计访问用户</span>
              <span class="stat-bars__track"><span class="stat-bars__fill" style="--pct:92%"></span></span>
              <span class="stat-bars__value num">380 万+</span>
            </li>
            <li class="stat-bars__row">
              <span class="stat-bars__label">资料子标签</span>
              <span class="stat-bars__track"><span class="stat-bars__fill" style="--pct:74%"></span></span>
              <span class="stat-bars__value num">24 个</span>
            </li>
            <li class="stat-bars__row">
              <span class="stat-bars__label">规则解释条目</span>
              <span class="stat-bars__track"><span class="stat-bars__fill" style="--pct:88%"></span></span>
              <span class="stat-bars__value num">136 条</span>
            </li>
            <li class="stat-bars__row">
              <span class="stat-bars__label">省级玩法差异说明</span>
              <span class="stat-bars__track"><span class="stat-bars__fill" style="--pct:66%"></span></span>
              <span class="stat-bars__value num">31 个</span>
            </li>
            <li class="stat-bars__row">
              <span class="stat-bars__label">内容与校对团队</span>
              <span class="stat-bars__track"><span class="stat-bars__fill" style="--pct:40%"></span></span>
              <span class="stat-bars__value num">13 人</span>
            </li>
          </ul>
          <p class="prose prose--tight">
            如果你更关心怎么用起来，装机包的系统要求、五步安装向导和登录排查都写在下载中心；还没想清楚从哪开始，可以先看看常见问题里的场景化解答。
          </p>
          <div class="about-cta">
            <a class="btn btn--gold" href="/download/">前往下载中心</a>
            <a class="btn btn--ghost" href="/faq/">查看常见问题</a>
            <a class="btn btn--quiet" href="/inquiry/">联系咨询通道</a>
          </div>
        </div>
      </div>
    </article>

  </section>

</main>

.page-about {
  --about-rule: #D8C193;
  --about-paper-2: #EFE6D2;
  color: var(--ink);
  background: var(--paper);
}

.page-about .about-hero {
  position: relative;
  background: var(--table-green);
  color: var(--paper);
  overflow: hidden;
  padding: 72px 0 84px;
}

.page-about .about-hero::before {
  content: "";
  position: absolute;
  inset: auto -20% -60% 40%;
  height: 340px;
  background: var(--table-green-2);
  transform: rotate(-7deg);
  border-radius: var(--radius-l);
  pointer-events: none;
}

.page-about .about-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  z-index: 1;
}

.page-about .about-hero .crumbs__link,
.page-about .about-hero .crumbs__item {
  color: rgba(246, 240, 226, 0.62);
}

.page-about .about-hero__eyebrow {
  color: var(--gold);
  margin: 18px 0 14px;
}

.page-about .about-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 8vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  color: var(--paper);
}

.page-about .about-hero__lead-text {
  max-width: 60ch;
  color: rgba(246, 240, 226, 0.82);
}

.page-about .about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-about .about-hero__figure {
  position: relative;
  margin: 0;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-plate);
  border: 1px solid rgba(200, 160, 56, 0.34);
}

.page-about .about-hero__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.03);
}

.page-about .about-hero__figure-plate {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: var(--table-deep);
  font-family: var(--font-display);
  font-size: 1.4rem;
  border-radius: var(--radius-s);
  box-shadow: 0 10px 24px -14px rgba(8, 40, 30, 0.9);
}

.page-about .about-canvas {
  position: relative;
  background: var(--paper);
}

.page-about .chapter {
  padding: 56px 0 8px;
}

.page-about .chapter + .chapter {
  border-top: 1px solid var(--about-rule);
  margin-top: 48px;
  padding-top: 56px;
}

.page-about .chapter__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.page-about .chapter__rail {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.page-about .chapter__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 13vw, 5.6rem);
  line-height: 0.9;
  color: var(--table-green);
  opacity: 0.28;
  letter-spacing: -0.04em;
}

.page-about .chapter__idx {
  color: var(--gold-dark);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.page-about .chapter__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 5.2vw, 2.5rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--ink-green);
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--about-rule);
}

.page-about .chapter__body .prose {
  color: var(--ink);
  max-width: 68ch;
}

.page-about .prose--tight {
  margin-top: 20px;
  color: #3A3026;
}

.page-about .about-facets {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 30px;
}

.page-about .about-facet {
  position: relative;
  padding: 20px 22px 22px;
  background: var(--about-paper-2);
  border-radius: var(--radius-m);
  border-left: 3px solid var(--gold);
}

.page-about .about-facet__no {
  display: inline-block;
  font-family: var(--font-index);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--vermilion);
  margin-bottom: 6px;
}

.page-about .about-facet__name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink-green);
  margin: 0 0 8px;
}

.page-about .about-facet p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #3A3026;
}

.page-about .flowbar {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 30px 0 0;
  padding: 0;
}

.page-about .flowbar__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: var(--table-green);
  color: var(--paper);
  border-radius: var(--radius-s);
  transition: background 260ms var(--ease-flip), transform 260ms var(--ease-flip);
}

.page-about .flowbar__step + .flowbar__step::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 30px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 11px solid var(--gold);
}

.page-about .flowbar__step:hover,
.page-about .flowbar__step:focus-within {
  background: var(--table-green-2);
  transform: translateY(-2px);
}

.page-about .flowbar__no {
  font-family: var(--font-index);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--gold-hi);
}

.page-about .flowbar__name {
  font-size: 1.02rem;
  letter-spacing: 0.04em;
}

.page-about .flowbar__note {
  font-size: 0.86rem;
  color: rgba(246, 240, 226, 0.7);
}

.page-about .about-band {
  margin: 64px 0 8px;
  background: var(--cream);
  border-top: 1px solid var(--about-rule);
  border-bottom: 1px solid var(--about-rule);
}

.page-about .about-band__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 40px 0;
}

.page-about .about-band__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-m);
  object-fit: cover;
}

.page-about .about-band__caption {
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink-green);
  border-left: 3px solid var(--gold);
  padding-left: 16px;
}

.page-about .team-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 28px;
}

.page-about .team-split__col {
  padding: 24px 22px;
  background: var(--about-paper-2);
  border-radius: var(--radius-m);
  border-top: 3px solid var(--gold);
}

.page-about .team-split__col--alt {
  background: var(--cream);
  border-top-color: var(--vermilion);
}

.page-about .team-split__count {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 10vw, 3.4rem);
  line-height: 1;
  color: var(--table-green);
}

.page-about .team-split__role {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-green);
  margin: 10px 0 14px;
}

.page-about .team-split__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.page-about .team-split__list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.94rem;
  line-height: 1.7;
  color: #3A3026;
}

.page-about .team-split__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 8px;
  background: var(--gold);
  transform: rotate(45deg);
}

.page-about .team-split__col--alt .team-split__list li::before {
  background: var(--vermilion);
}

.page-about .timeline {
  margin-top: 30px;
}

.page-about .timeline__axis {
  display: block;
  width: 100%;
  height: 70px;
  margin-bottom: 8px;
}

.page-about .timeline__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  border-left: 1px solid var(--about-rule);
}

.page-about .timeline__item {
  padding-left: 0;
}

.page-about .tl-node {
  background: transparent;
  border: 0;
}

.page-about .tl-node__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-s);
  transition: background 220ms var(--ease-flip);
}

.page-about .tl-node__head::-webkit-details-marker {
  display: none;
}

.page-about .tl-node__head:hover {
  background: var(--cream);
}

.page-about .tl-node__ver {
  font-family: var(--font-index);
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  color: var(--vermilion);
}

.page-about .tl-node__year {
  font-family: var(--font-index);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--gold-dark);
}

.page-about .tl-node__label {
  font-size: 0.98rem;
  color: var(--ink-green);
}

.page-about .tl-node__body {
  padding: 0 14px 16px 14px;
}

.page-about .tl-node__body p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.75;
  color: #3A3026;
  border-left: 2px solid var(--gold);
  padding-left: 14px;
}

.page-about .about-figure-pair {
  margin: 64px 0 8px;
  background: var(--table-green);
  color: var(--paper);
}

.page-about .about-figure-pair__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 46px 0;
}

.page-about .about-figure-pair__item {
  margin: 0;
}

.page-about .about-figure-pair__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-m);
  object-fit: cover;
  filter: saturate(0.9);
}

.page-about .about-figure-pair .media-frame__caption {
  display: block;
  margin-top: 12px;
  font-size: 0.86rem;
  color: rgba(246, 240, 226, 0.7);
}

.page-about .about-figure-pair__note .idx {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0.18em;
}

.page-about .about-figure-pair__note .prose {
  color: rgba(246, 240, 226, 0.86);
  max-width: 46ch;
  margin: 12px 0 20px;
}

.page-about .rhythm {
  margin-top: 28px;
  border-top: 1px solid var(--about-rule);
}

.page-about .rhythm__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--about-rule);
}

.page-about .rhythm__key {
  font-family: var(--font-index);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--gold-dark);
  text-transform: uppercase;
}

.page-about .rhythm__val {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--ink);
}

.page-about .stat-bars {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-about .stat-bars__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 14px;
}

.page-about .stat-bars__label {
  font-size: 0.92rem;
  color: var(--ink-green);
}

.page-about .stat-bars__value {
  font-family: var(--font-index);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--table-green);
  text-align: right;
}

.page-about .stat-bars__track {
  grid-column: 1 / -1;
  display: block;
  height: 6px;
  border-radius: var(--pill);
  background: rgba(200, 160, 56, 0.2);
  overflow: hidden;
}

.page-about .stat-bars__fill {
  display: block;
  height: 100%;
  width: var(--pct, 50%);
  background: linear-gradient(90deg, var(--gold), var(--gold-hi));
  border-radius: var(--pill);
}

.page-about .about-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.page-about .about-canvas > .chapter:last-of-type {
  padding-bottom: 72px;
}

@media (min-width: 720px) {
  .page-about .about-facets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-about .flowbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .page-about .flowbar__step + .flowbar__step::before {
    top: 50%;
    left: -11px;
    margin-top: -6px;
    border-left: none;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 11px solid var(--gold);
    border-top-color: transparent;
    border-bottom-color: transparent;
  }

  .page-about .team-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-about .about-band__inner {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
  }

  .page-about .rhythm__row {
    grid-template-columns: 200px 1fr;
    align-items: baseline;
    gap: 18px;
  }
}

@media (min-width: 1024px) {
  .page-about .about-hero {
    padding: 96px 0 110px;
  }

  .page-about .about-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: 56px;
  }

  .page-about .about-hero__figure {
    transform: translateY(26px) rotate(-1.5deg);
  }

  .page-about .chapter {
    padding-top: 72px;
  }

  .page-about .chapter + .chapter {
    margin-top: 64px;
    padding-top: 72px;
  }

  .page-about .chapter__grid {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }

  .page-about .chapter__rail {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    position: sticky;
    top: 108px;
  }

  .page-about .chapter__num {
    font-size: 5.4rem;
  }

  .page-about .about-facets {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }

  .page-about .flowbar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-about .about-figure-pair__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 48px;
    padding: 60px 0;
  }

  .page-about .timeline {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 36px;
    align-items: start;
  }

  .page-about .timeline__axis {
    height: 220px;
    margin-bottom: 0;
    position: sticky;
    top: 120px;
  }

  .page-about .stat-bars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .flowbar__step,
  .page-about .tl-node__head,
  .page-about .about-hero__figure {
    transition: none;
    transform: none;
  }
}