.page-about {
  --about-idx-w: 208px;
  --about-band: 72px;
  position: relative;
  color: var(--text);
}

/* ---------- 面包屑 ---------- */
.page-about .crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 22px;
  padding-bottom: 22px;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--muted);
}
.page-about .crumbs a {
  color: var(--muted);
  text-decoration: none;
  transition: color .25s var(--ease);
}
.page-about .crumbs a:hover,
.page-about .crumbs a:focus-visible {
  color: var(--cyan);
}
.page-about .crumbs [aria-current="page"] {
  color: var(--amber);
  font-weight: 600;
}
.page-about .crumbs__sep {
  color: var(--line);
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  position: relative;
  overflow: hidden;
  padding-bottom: 8px;
}
.page-about .about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(980px 520px at 10% -12%, rgba(47, 224, 206, .14), transparent 62%),
    radial-gradient(760px 460px at 98% 112%, rgba(242, 179, 61, .13), transparent 60%);
  pointer-events: none;
}
.page-about .about-hero__inner {
  position: relative;
  display: grid;
  gap: 30px;
  padding-bottom: 54px;
}

.page-about .about-hero__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, var(--panel-2), var(--panel));
  aspect-ratio: 16 / 9;
}
.page-about .about-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-about .about-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 23, 48, 0) 44%, rgba(10, 23, 48, .72) 100%),
    linear-gradient(115deg, rgba(47, 224, 206, .16) 0%, transparent 42%);
  pointer-events: none;
}
.page-about .about-hero__badeg {
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--amber-soft);
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(242, 179, 61, .45);
  background: rgba(10, 23, 48, .62);
}

.page-about .about-hero__body {
  display: flex;
  flex-direction: column;
}
.page-about .about-hero h1 {
  margin: 12px 0 0;
  font-size: 30px;
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
}
.page-about .about-hero__lede {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.78;
  color: var(--muted);
  max-width: 48ch;
}

.page-about .about-hero__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}
.page-about .about-fact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.page-about .about-fact__num {
  font-size: 26px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}
.page-about .about-fact:nth-child(2) .about-fact__num { color: var(--cyan); }
.page-about .about-fact:nth-child(3) .about-fact__num { color: var(--amber-soft); }
.page-about .about-fact:nth-child(4) .about-fact__num { color: var(--text); }
.page-about .about-fact__label {
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 主体框架：左索引 + 右流 ---------- */
.page-about .about-frame {
  display: grid;
  gap: 30px;
  padding-bottom: var(--about-band);
}

.page-about .about-index {
  min-width: 0;
}
.page-about .about-index__title {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--muted);
  text-transform: uppercase;
}
.page-about .about-index__list {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}
.page-about .about-index__link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  border-bottom: 2px solid transparent;
  text-decoration: none;
  transition: background .25s var(--ease), border-color .25s var(--ease),
              transform .25s var(--ease);
}
.page-about .about-index__year {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--muted);
  transition: color .25s var(--ease);
  font-variant-numeric: tabular-nums;
}
.page-about .about-index__tag {
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--line);
  white-space: nowrap;
}
.page-about .about-index__link:hover,
.page-about .about-index__link:focus-visible {
  background: rgba(242, 179, 61, .1);
  border-bottom-color: var(--amber);
}
.page-about .about-index__link:hover .about-index__year,
.page-about .about-index__link:focus-visible .about-index__year {
  color: var(--amber);
}
.page-about .about-index__link:hover .about-index__tag,
.page-about .about-index__link:focus-visible .about-index__tag {
  color: var(--muted);
}

/* ---------- 叙述流 ---------- */
.page-about .about-stream {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.page-about .about-sec {
  padding: 44px 0;
  border-top: 1px solid var(--line-soft);
}
.page-about .about-sec:first-child {
  padding-top: 4px;
  border-top: 0;
}
.page-about .about-sec h2 {
  margin: 12px 0 0;
  font-size: 25px;
  line-height: 1.32;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--text);
}
.page-about .about-sec h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.page-about .about-prose {
  max-width: 68ch;
  margin-top: 20px;
}
.page-about .about-prose p {
  margin: 0;
  font-size: 16px;
  line-height: 1.78;
  color: var(--muted);
}
.page-about .about-prose p + p {
  margin-top: 16px;
}

/* ---------- 图 ---------- */
.page-about .about-figure {
  margin: 24px 0 0;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
}
.page-about .about-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.page-about .about-figure--wide img {
  aspect-ratio: 8 / 3;
}

/* ---------- 覆盖章节的窄栏对照 ---------- */
.page-about .about-grid {
  display: grid;
  gap: 22px;
  margin-top: 26px;
}
.page-about .about-aside {
  padding: 18px 20px 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
}
.page-about .about-aside p:last-child {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--muted);
}

/* ---------- 分类矩阵 ---------- */
.page-about .about-matrix-scroll {
  margin-top: 26px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.page-about .about-matrix {
  display: grid;
  grid-template-columns: minmax(62px, auto) repeat(4, minmax(0, 1fr));
  gap: 7px;
  min-width: 400px;
  padding: 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--panel);
}
.page-about .about-matrix__corner {
  border-radius: 6px;
}
.page-about .about-matrix__col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 2px;
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(255, 122, 69, .9);
  white-space: nowrap;
}
.page-about .about-matrix__row {
  display: flex;
  align-items: center;
  padding-right: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  white-space: nowrap;
}
.page-about .about-matrix__row--high { color: var(--cyan); }
.page-about .about-matrix__row--mid  { color: var(--amber); }
.page-about .about-matrix__row--low  { color: var(--green); }

.page-about .about-matrix__cell {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  border: 1px solid var(--line-soft);
  background: linear-gradient(150deg, var(--panel-2), rgba(37, 64, 107, .32));
  transition: background .25s var(--ease), border-color .25s var(--ease),
              transform .25s var(--ease);
}
.page-about .about-matrix__cell:hover {
  background: linear-gradient(150deg, rgba(242, 179, 61, .3), rgba(47, 224, 206, .16));
  border-color: var(--amber);
  transform: scale(1.06);
}

/* ---------- 更新节奏 ---------- */
.page-about .about-cadence {
  display: grid;
  gap: 14px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.page-about .about-cadence__item {
  position: relative;
  overflow: hidden;
  padding: 22px 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--panel);
}
.page-about .about-cadence__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--muted);
}
.page-about .about-cadence__item--daily::before     { background: var(--cyan); }
.page-about .about-cadence__item--weekly::before    { background: var(--amber); }
.page-about .about-cadence__item--quarterly::before { background: var(--green); }

.page-about .about-cadence__freq {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--muted);
}
.page-about .about-cadence__item h3 {
  margin-top: 10px;
}
.page-about .about-cadence__item p:last-child {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--muted);
}

/* ---------- 团队 ---------- */
.page-about .about-team {
  display: grid;
  gap: 14px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.page-about .about-team li {
  position: relative;
  padding: 20px 20px 20px 56px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: var(--panel-2);
}
.page-about .about-team li::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 23px;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  border: 1.5px solid var(--amber);
  box-shadow: inset 0 0 0 3px rgba(242, 179, 61, .14);
}
.page-about .about-team li:nth-child(2)::before {
  border-color: var(--cyan);
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px rgba(47, 224, 206, .14);
}
.page-about .about-team li:nth-child(3)::before {
  border-color: var(--green);
  border-radius: 3px;
  transform: rotate(45deg);
  box-shadow: inset 0 0 0 2px rgba(78, 216, 160, .16);
}
.page-about .about-team li:nth-child(4)::before {
  border-color: var(--amber-soft);
  border-radius: 6px 2px 6px 2px;
  box-shadow: inset 0 0 0 3px rgba(255, 215, 130, .14);
}
.page-about .about-team li p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- 时间线 ---------- */
.page-about .about-timeline {
  position: relative;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.page-about .about-timeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 10px;
  bottom: 18px;
  width: 1px;
  background: linear-gradient(180deg, var(--amber) 0%, var(--cyan) 62%, transparent 100%);
}
.page-about .about-node {
  position: relative;
  padding: 0 0 26px 42px;
}
.page-about .about-node:last-child {
  padding-bottom: 0;
}
.page-about .about-node::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--amber);
  box-shadow: 0 0 0 4px rgba(242, 179, 61, .12);
}
.page-about .about-node:last-child::before {
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px rgba(47, 224, 206, .14);
}
.page-about .about-node__year {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}
.page-about .about-node:last-child .about-node__year {
  color: var(--cyan);
}
.page-about .about-node h3 {
  margin: 7px 0 0;
  font-size: 18px;
}
.page-about .about-node p:last-child {
  margin: 8px 0 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.72;
  color: var(--muted);
}

/* ---------- 收尾 ---------- */
.page-about .about-sec--closing {
  border-top: 1px solid var(--line);
}
.page-about .about-next {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-about .about-hero h1 {
    font-size: 36px;
  }
  .page-about .about-hero__lede {
    font-size: 17px;
  }
  .page-about .about-hero__facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
  .page-about .about-team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 780px) {
  .page-about .about-hero__inner {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
    padding-bottom: 78px;
  }
  .page-about .about-hero h1 {
    font-size: 42px;
  }
  .page-about .about-cadence {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-about .about-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 268px);
    gap: 34px;
    align-items: start;
  }
}

@media (min-width: 960px) {
  .page-about {
    --about-band: 104px;
  }
  .page-about .about-frame {
    grid-template-columns: var(--about-idx-w) minmax(0, 1fr);
    gap: 52px;
    align-items: start;
  }
  .page-about .about-index {
    position: sticky;
    top: 34px;
  }
  .page-about .about-index__list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 2px;
    padding-bottom: 0;
    overflow: visible;
  }
  .page-about .about-index__link {
    width: 100%;
    padding: 11px 14px;
    border-bottom: 0;
    border-left: 2px solid transparent;
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
  }
  .page-about .about-index__link:hover,
  .page-about .about-index__link:focus-visible {
    border-bottom-color: transparent;
    border-left-color: var(--amber);
    background: linear-gradient(90deg, rgba(242, 179, 61, .14), transparent 88%);
    transform: translateX(3px);
  }
  .page-about .about-index__year {
    font-size: 18px;
  }
  .page-about .about-sec {
    padding: 54px 0;
  }
  .page-about .about-sec h2 {
    font-size: 31px;
  }
}

@media (min-width: 1200px) {
  .page-about .about-hero h1 {
    font-size: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-index__link,
  .page-about .about-matrix__cell,
  .page-about .crumbs a {
    transition: none;
  }
  .page-about .about-index__link:hover,
  .page-about .about-index__link:focus-visible {
    transform: none;
  }
  .page-about .about-matrix__cell:hover {
    transform: none;
  }
}
<<<END>>>

稍等，我需要确认一下输出标记的格式是否正确。让我重新检查一下要求：标记必须是三个尖括号，每个标记只能出现一次，严格按照顺序输出。

我上面用了 ``、`` 和 `<<<END>>>`。但要求里只说了 `MAIN_HTML` 和 `PAGE_CSS` 两个标记，没有提到 `END`。

让我重新读一下要求：

"严格按照以下标记顺序输出，每个标记只能出现一次，标记必须是三个尖括号：

从 <main id="main-content" class="page-about"> 开始，到 </main> 结束

当前页面专属 CSS，页面专属选择器全部限定在 .page-about 作用域内"

所以只需要两个标记：`` 和 ``。我不应该加 `<<<END>>>`。

我把它去掉，重新输出。
<main id="main-content" class="page-about">

  <nav class="crumbs wrap" aria-label="面包屑导航">
    <a href="/">首页</a>
    <span class="crumbs__sep" aria-hidden="true">/</span>
    <span aria-current="page">平台概览</span>
  </nav>

  <section class="about-hero" aria-labelledby="about-title">
    <div class="about-hero__inner wrap">

      <div class="about-hero__media">
        <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900"
             alt="层叠的编号牌与网格线构成的抽象版面，暗示一份被持续维护的桌台清单">
        <span class="about-hero__badge" aria-hidden="true">EST. 2021</span>
      </div>

      <div class="about-hero__body">
        <p class="kicker kicker--amber">平台概览</p>
        <h1 id="about-title">一套从 2021 年维护至今的桌台信息体系</h1>
        <p class="about-hero__lede">
          新宝5 简体中文站把这些年积累的桌台资料整理成一份能长期对照的底本：420 张在线桌台分属九种玩法方向，开局频次划成三档，派彩等待划成四类区间。您不用先试上几十局才摸到规律，看清节奏就能挑。
        </p>

        <div class="about-hero__facts">
          <div class="about-fact">
            <span class="about-fact__num num">2021</span>
            <span class="about-fact__label">站点启用</span>
          </div>
          <div class="about-fact">
            <span class="about-fact__num num">420</span>
            <span class="about-fact__label">在线桌台</span>
          </div>
          <div class="about-fact">
            <span class="about-fact__num num">9</span>
            <span class="about-fact__label">玩法方向</span>
          </div>
          <div class="about-fact">
            <span class="about-fact__num num">28</span>
            <span class="about-fact__label">团队人数</span>
          </div>
        </div>
      </div>

    </div>
  </section>

  <div class="about-frame wrap">

    <aside class="about-index" aria-label="年份索引">
      <p class="about-index__title">年份索引</p>
      <ol class="about-index__list">
        <li>
          <a class="about-index__link" href="#m-2021">
            <span class="about-index__year num">2021</span>
            <span class="about-index__tag">清单起步</span>
          </a>
        </li>
        <li>
          <a class="about-index__link" href="#m-2022">
            <span class="about-index__year num">2022</span>
            <span class="about-index__tag">扩至 300</span>
          </a>
        </li>
        <li>
          <a class="about-index__link" href="#m-2023">
            <span class="about-index__year num">2023</span>
            <span class="about-index__tag">编号检索</span>
          </a>
        </li>
        <li>
          <a class="about-index__link" href="#m-2024">
            <span class="about-index__year num">2024</span>
            <span class="about-index__tag">稳定 420</span>
          </a>
        </li>
      </ol>
    </aside>

    <div class="about-stream">

      <section class="about-sec" id="origin" data-section data-reveal>
        <p class="kicker">起点</p>
        <h2>2021 年，从一份 160 张的清单开始</h2>
        <div class="about-prose">
          <p>站点刚启用那会儿，能直接拿来对照的桌台说明并不多，同一张桌台在不同地方叫法不一样，时段和玩法方向也各写各的。团队干脆从头做一次：把当时能确认下来的 160 张桌台一张一张排号，配上玩法方向和大致活跃时段，做成一份能翻、能查的清单。</p>
          <p>排号规则从那天定下就没推倒重来过——按玩法方向分组、组内顺序往下排，后面新增的桌台往后顺延，编号只往前走。这份从 160 张长起来的年新宝5台子目录，后来成了站内所有内容的底本，节奏分档、派彩区间、记录回溯都挂在同一套编号上。</p>
        </div>
      </section>

      <section class="about-sec" id="coverage" data-section data-reveal>
        <p class="kicker">覆盖</p>
        <h2>420 张桌台是怎么排出来的</h2>

        <figure class="about-figure">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" loading="lazy" decoding="async"
               alt="由数百个细小方块排成的矩形阵列，局部方块以霓虹青与琥珀金高亮">
        </figure>

        <div class="about-grid">
          <div class="about-prose">
            <p>今天的 420 张在线桌台按九种玩法方向分成小组，组内再按频次落档。三档的占比大致稳定在高频 126 张、常规 210 张、低频 84 张，也就是三成、五成、两成——这个比例在过去两年里没有大起大落。</p>
            <p>时段上的规律同样明显：晚间是桌台密度最高的窗口，午后则集中了更多低频档的桌台。如果您习惯固定时间上来，直接按这两个特征去筛，比一张张点开快得多。</p>
          </div>
          <aside class="about-aside">
            <p class="kicker kicker--amber">每季度一次</p>
            <p>桌台目录每个季度做一次全量复核，确认玩法方向、时段标注和编号没有错位。年内新增与淘汰的调整规模通常在 20 到 40 张之间，能保留的编号尽量保留。</p>
          </aside>
        </div>
      </section>

      <section class="about-sec" id="system" data-section data-reveal>
        <p class="kicker">分类</p>
        <h2>把节奏分成三档，把等待分成四类</h2>
        <div class="about-prose">
          <p>桌台看得多了会发现，真正左右体验的其实就两件事：多久开一局，以及开局之后要等多久结算。前者归成高频、常规、低频三档，后者归成即时、3 分钟、5 分钟、10 分钟四类区间。</p>
          <p>把这两条线交叉起来看，挑桌台这件事就变成了对号入座——您手头有半小时，就看高频配即时的组合；只想慢慢跟，就落到低频配长区间的格子里。省下的是反复试错的时间。</p>
        </div>

        <div class="about-matrix-scroll">
          <div class="about-matrix" aria-label="开局频次三档与派彩时长四类区间的交叉分类">
            <div class="about-matrix__corner" aria-hidden="true"></div>
            <div class="about-matrix__col">即时</div>
            <div class="about-matrix__col">3 分钟</div>
            <div class="about-matrix__col">5 分钟</div>
            <div class="about-matrix__col">10 分钟</div>

            <div class="about-matrix__row about-matrix__row--high">高频</div>
            <span class="about-matrix__cell" aria-hidden="true"></span>
            <span class="about-matrix__cell" aria-hidden="true"></span>
            <span class="about-matrix__cell" aria-hidden="true"></span>
            <span class="about-matrix__cell" aria-hidden="true"></span>

            <div class="about-matrix__row about-matrix__row--mid">常规</div>
            <span class="about-matrix__cell" aria-hidden="true"></span>
            <span class="about-matrix__cell" aria-hidden="true"></span>
            <span class="about-matrix__cell" aria-hidden="true"></span>
            <span class="about-matrix__cell" aria-hidden="true"></span>

            <div class="about-matrix__row about-matrix__row--low">低频</div>
            <span class="about-matrix__cell" aria-hidden="true"></span>
            <span class="about-matrix__cell" aria-hidden="true"></span>
            <span class="about-matrix__cell" aria-hidden="true"></span>
            <span class="about-matrix__cell" aria-hidden="true"></span>
          </div>
        </div>
      </section>

      <section class="about-sec" id="cadence" data-section data-reveal>
        <p class="kicker">更新节奏</p>
        <h2>每天、每周、每季，各自在刷什么</h2>

        <ul class="about-cadence">
          <li class="about-cadence__item about-cadence__item--daily">
            <p class="about-cadence__freq">EVERY DAY</p>
            <h3>档位刷新</h3>
            <p>高频、常规、低频三档每天更新一次，夜里跑完。您第二天上来看到的档位，是按接下来一个周期重新排过的结果。</p>
          </li>
          <li class="about-cadence__item about-cadence__item--weekly">
            <p class="about-cadence__freq">EVERY WEEK</p>
            <h3>观察笔记出稿</h3>
            <p>内容笔记保持每周 3 篇左右的节奏。节奏观察栏目会在每个赛季阶段集中出稿，把这段时间的时段变化一次讲清楚。</p>
          </li>
          <li class="about-cadence__item about-cadence__item--quarterly">
            <p class="about-cadence__freq">EVERY QUARTER</p>
            <h3>目录复核</h3>
            <p>桌台目录每季度全量复核一次，同时处理这一季的新增与淘汰。复核之后，编号和玩法方向的对应关系会重新确认一遍。</p>
          </li>
        </ul>
      </section>

      <section class="about-sec" id="team" data-section data-reveal>
        <p class="kicker">团队</p>
        <h2>维护这套体系的 28 个人</h2>
        <p class="about-prose">站点的日常由四个小组分担，加起来 28 人。每个小组盯住的东西不一样，但目标一致：让您翻到的每一条信息都对得上。</p>

        <ul class="about-team">
          <li>
            <h3>内容编辑</h3>
            <p>负责选题、写稿和栏目排期，盯的是内容笔记的更新节奏，以及赛季专题有没有把当季的变化覆盖到。</p>
          </li>
          <li>
            <h3>数据整理</h3>
            <p>负责三档档位的每日刷新、目录的季度复核，还有编号与桌台资料之间的对应关系。</p>
          </li>
          <li>
            <h3>前端支持</h3>
            <p>负责桌面端与移动端的浏览体验，包含夜间模式的适配、页面加载速度和窄屏下的排版。</p>
          </li>
          <li>
            <h3>客户沟通</h3>
            <p>负责客服邮箱的日常应答与商务合作接洽，工作日 9:00 至 21:00 在线，非工作时间的留言顺延处理。</p>
          </li>
        </ul>
      </section>

      <section class="about-sec about-sec--wide" id="timeline" data-section>
        <p class="kicker">节点</p>
        <h2>从 160 张到 420 张</h2>

        <figure class="about-figure about-figure--wide">
          <img src="{zhanqunpic:h:600w:1600}" width="1600" height="600" loading="lazy" decoding="async"
               alt="横向延伸的时间轴图形，节点以圆形徽记标记，末端向右渐隐">
        </figure>

        <ol class="about-timeline">
          <li class="about-node" id="m-2021">
            <p class="about-node__year num">2021</p>
            <h3>清单起步</h3>
            <p>站点启用，160 张桌台逐条排号，第一批桌台说明上线，中文字用户第一次有了可以对着看的桌台清单。</p>
          </li>
          <li class="about-node" id="m-2022">
            <p class="about-node__year num">2022</p>
            <h3>扩容到 300 张</h3>
            <p>桌台规模扩至 300 张，开局频次三档的分类同步引入，档位也从按月调整改为按日刷新。</p>
          </li>
          <li class="about-node" id="m-2023">
            <p class="about-node__year num">2023</p>
            <h3>编号查记录上线</h3>
            <p>规模扩至 380 张，按桌台编号查记录开放，每局结果与结算时刻一一对应，往回翻的时候能对得上号。</p>
          </li>
          <li class="about-node" id="m-2024">
            <p class="about-node__year num">2024</p>
            <h3>稳定在 420 张</h3>
            <p>桌台数量稳定在 420 张，派彩时长划成即时、3 分钟、5 分钟、10 分钟四类区间，移动端与夜间模式完成适配。</p>
          </li>
        </ol>
      </section>

      <section class="about-sec about-sec--closing" id="longrun" data-section data-reveal>
        <p class="kicker kicker--amber">长期使用</p>
        <h2>用久了，您会认得这里的节奏</h2>
        <div class="about-prose">
          <p>编号稳定是长期用下来最先感受到的一点。一张桌台只要还在目录里，编号就跟着它——您收藏过的、记在便签上的号码，隔一段时间回来还是指向同一个位置，不用重新认一遍。</p>
          <p>记录也能往回翻。按编号查记录的时候，每局结果与对应的结算时刻是绑在一起的；赛季阶段的专题又把同一时期的观察文档串成一条线。加上桌面端、移动端和夜间模式的表现一致，换个设备接着看就行。</p>
        </div>
        <div class="about-next">
          <a class="btn btn--amber" href="/apps/">按编号查桌台</a>
          <a class="btn btn--ghost" href="/notes/">看最近的观察笔记</a>
          <a class="btn btn--ghost" href="/cooperation/">洽谈商务合作</a>
        </div>
      </section>

    </div>
  </div>

</main>

.page-about {
  --about-idx-w: 208px;
  --about-band: 72px;
  position: relative;
  color: var(--text);
}

/* ---------- 面包屑 ---------- */
.page-about .crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 22px;
  padding-bottom: 22px;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--muted);
}
.page-about .crumbs a {
  color: var(--muted);
  text-decoration: none;
  transition: color .25s var(--ease);
}
.page-about .crumbs a:hover,
.page-about .crumbs a:focus-visible {
  color: var(--cyan);
}
.page-about .crumbs [aria-current="page"] {
  color: var(--amber);
  font-weight: 600;
}
.page-about .crumbs__sep {
  color: var(--line);
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  position: relative;
  overflow: hidden;
  padding-bottom: 8px;
}
.page-about .about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(980px 520px at 10% -12%, rgba(47, 224, 206, .14), transparent 62%),
    radial-gradient(760px 460px at 98% 112%, rgba(242, 179, 61, .13), transparent 60%);
  pointer-events: none;
}
.page-about .about-hero__inner {
  position: relative;
  display: grid;
  gap: 30px;
  padding-bottom: 54px;
}

.page-about .about-hero__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, var(--panel-2), var(--panel));
  aspect-ratio: 16 / 9;
}
.page-about .about-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-about .about-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 23, 48, 0) 44%, rgba(10, 23, 48, .72) 100%),
    linear-gradient(115deg, rgba(47, 224, 206, .16) 0%, transparent 42%);
  pointer-events: none;
}
.page-about .about-hero__badge {
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--amber-soft);
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(242, 179, 61, .45);
  background: rgba(10, 23, 48, .62);
}

.page-about .about-hero__body {
  display: flex;
  flex-direction: column;
}
.page-about .about-hero h1 {
  margin: 12px 0 0;
  font-size: 30px;
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
}
.page-about .about-hero__lede {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.78;
  color: var(--muted);
  max-width: 48ch;
}

.page-about .about-hero__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}
.page-about .about-fact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.page-about .about-fact__num {
  font-size: 26px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}
.page-about .about-fact:nth-child(2) .about-fact__num { color: var(--cyan); }
.page-about .about-fact:nth-child(3) .about-fact__num { color: var(--amber-soft); }
.page-about .about-fact:nth-child(4) .about-fact__num { color: var(--text); }
.page-about .about-fact__label {
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 主体框架：左索引 + 右流 ---------- */
.page-about .about-frame {
  display: grid;
  gap: 30px;
  padding-bottom: var(--about-band);
}

.page-about .about-index {
  min-width: 0;
}
.page-about .about-index__title {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--muted);
  text-transform: uppercase;
}
.page-about .about-index__list {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}
.page-about .about-index__link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  border-bottom: 2px solid transparent;
  text-decoration: none;
  transition: background .25s var(--ease), border-color .25s var(--ease),
              transform .25s var(--ease);
}
.page-about .about-index__year {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--muted);
  transition: color .25s var(--ease);
  font-variant-numeric: tabular-nums;
}
.page-about .about-index__tag {
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--line);
  white-space: nowrap;
}
.page-about .about-index__link:hover,
.page-about .about-index__link:focus-visible {
  background: rgba(242, 179, 61, .1);
  border-bottom-color: var(--amber);
}
.page-about .about-index__link:hover .about-index__year,
.page-about .about-index__link:focus-visible .about-index__year {
  color: var(--amber);
}
.page-about .about-index__link:hover .about-index__tag,
.page-about .about-index__link:focus-visible .about-index__tag {
  color: var(--muted);
}

/* ---------- 叙述流 ---------- */
.page-about .about-stream {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.page-about .about-sec {
  padding: 44px 0;
  border-top: 1px solid var(--line-soft);
}
.page-about .about-sec:first-child {
  padding-top: 4px;
  border-top: 0;
}
.page-about .about-sec h2 {
  margin: 12px 0 0;
  font-size: 25px;
  line-height: 1.32;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--text);
}
.page-about .about-sec h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.page-about .about-prose {
  max-width: 68ch;
  margin-top: 20px;
}
.page-about .about-prose p {
  margin: 0;
  font-size: 16px;
  line-height: 1.78;
  color: var(--muted);
}
.page-about .about-prose p + p {
  margin-top: 16px;
}

/* ---------- 图 ---------- */
.page-about .about-figure {
  margin: 24px 0 0;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
}
.page-about .about-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.page-about .about-figure--wide img {
  aspect-ratio: 8 / 3;
}

/* ---------- 覆盖章节的窄栏对照 ---------- */
.page-about .about-grid {
  display: grid;
  gap: 22px;
  margin-top: 26px;
}
.page-about .about-aside {
  padding: 18px 20px 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
}
.page-about .about-aside p:last-child {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--muted);
}

/* ---------- 分类矩阵 ---------- */
.page-about .about-matrix-scroll {
  margin-top: 26px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.page-about .about-matrix {
  display: grid;
  grid-template-columns: minmax(62px, auto) repeat(4, minmax(0, 1fr));
  gap: 7px;
  min-width: 400px;
  padding: 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--panel);
}
.page-about .about-matrix__corner {
  border-radius: 6px;
}
.page-about .about-matrix__col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 2px;
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(255, 122, 69, .9);
  white-space: nowrap;
}
.page-about .about-matrix__row {
  display: flex;
  align-items: center;
  padding-right: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  white-space: nowrap;
}
.page-about .about-matrix__row--high { color: var(--cyan); }
.page-about .about-matrix__row--mid  { color: var(--amber); }
.page-about .about-matrix__row--low  { color: var(--green); }

.page-about .about-matrix__cell {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  border: 1px solid var(--line-soft);
  background: linear-gradient(150deg, var(--panel-2), rgba(37, 64, 107, .32));
  transition: background .25s var(--ease), border-color .25s var(--ease),
              transform .25s var(--ease);
}
.page-about .about-matrix__cell:hover {
  background: linear-gradient(150deg, rgba(242, 179, 61, .3), rgba(47, 224, 206, .16));
  border-color: var(--amber);
  transform: scale(1.06);
}

/* ---------- 更新节奏 ---------- */
.page-about .about-cadence {
  display: grid;
  gap: 14px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.page-about .about-cadence__item {
  position: relative;
  overflow: hidden;
  padding: 22px 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--panel);
}
.page-about .about-cadence__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--muted);
}
.page-about .about-cadence__item--daily::before     { background: var(--cyan); }
.page-about .about-cadence__item--weekly::before    { background: var(--amber); }
.page-about .about-cadence__item--quarterly::before { background: var(--green); }

.page-about .about-cadence__freq {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--muted);
}
.page-about .about-cadence__item h3 {
  margin-top: 10px;
}
.page-about .about-cadence__item p:last-child {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--muted);
}

/* ---------- 团队 ---------- */
.page-about .about-team {
  display: grid;
  gap: 14px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.page-about .about-team li {
  position: relative;
  padding: 20px 20px 20px 56px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: var(--panel-2);
}
.page-about .about-team li::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 23px;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  border: 1.5px solid var(--amber);
  box-shadow: inset 0 0 0 3px rgba(242, 179, 61, .14);
}
.page-about .about-team li:nth-child(2)::before {
  border-color: var(--cyan);
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px rgba(47, 224, 206, .14);
}
.page-about .about-team li:nth-child(3)::before {
  border-color: var(--green);
  border-radius: 3px;
  transform: rotate(45deg);
  box-shadow: inset 0 0 0 2px rgba(78, 216, 160, .16);
}
.page-about .about-team li:nth-child(4)::before {
  border-color: var(--amber-soft);
  border-radius: 6px 2px 6px 2px;
  box-shadow: inset 0 0 0 3px rgba(255, 215, 130, .14);
}
.page-about .about-team li p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- 时间线 ---------- */
.page-about .about-timeline {
  position: relative;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.page-about .about-timeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 10px;
  bottom: 18px;
  width: 1px;
  background: linear-gradient(180deg, var(--amber) 0%, var(--cyan) 62%, transparent 100%);
}
.page-about .about-node {
  position: relative;
  padding: 0 0 26px 42px;
}
.page-about .about-node:last-child {
  padding-bottom: 0;
}
.page-about .about-node::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--amber);
  box-shadow: 0 0 0 4px rgba(242, 179, 61, .12);
}
.page-about .about-node:last-child::before {
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px rgba(47, 224, 206, .14);
}
.page-about .about-node__year {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}
.page-about .about-node:last-child .about-node__year {
  color: var(--cyan);
}
.page-about .about-node h3 {
  margin: 7px 0 0;
  font-size: 18px;
}
.page-about .about-node p:last-child {
  margin: 8px 0 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.72;
  color: var(--muted);
}

/* ---------- 收尾 ---------- */
.page-about .about-sec--closing {
  border-top: 1px solid var(--line);
}
.page-about .about-next {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-about .about-hero h1 {
    font-size: 36px;
  }
  .page-about .about-hero__lede {
    font-size: 17px;
  }
  .page-about .about-hero__facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
  .page-about .about-team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 780px) {
  .page-about .about-hero__inner {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
    padding-bottom: 78px;
  }
  .page-about .about-hero h1 {
    font-size: 42px;
  }
  .page-about .about-cadence {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-about .about-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 268px);
    gap: 34px;
    align-items: start;
  }
}

@media (min-width: 960px) {
  .page-about {
    --about-band: 104px;
  }
  .page-about .about-frame {
    grid-template-columns: var(--about-idx-w) minmax(0, 1fr);
    gap: 52px;
    align-items: start;
  }
  .page-about .about-index {
    position: sticky;
    top: 34px;
  }
  .page-about .about-index__list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 2px;
    padding-bottom: 0;
    overflow: visible;
  }
  .page-about .about-index__link {
    width: 100%;
    padding: 11px 14px;
    border-bottom: 0;
    border-left: 2px solid transparent;
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
  }
  .page-about .about-index__link:hover,
  .page-about .about-index__link:focus-visible {
    border-bottom-color: transparent;
    border-left-color: var(--amber);
    background: linear-gradient(90deg, rgba(242, 179, 61, .14), transparent 88%);
    transform: translateX(3px);
  }
  .page-about .about-index__year {
    font-size: 18px;
  }
  .page-about .about-sec {
    padding: 54px 0;
  }
  .page-about .about-sec h2 {
    font-size: 31px;
  }
}

@media (min-width: 1200px) {
  .page-about .about-hero h1 {
    font-size: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-index__link,
  .page-about .about-matrix__cell,
  .page-about .crumbs a {
    transition: none;
  }
  .page-about .about-index__link:hover,
  .page-about .about-index__link:focus-visible {
    transform: none;
  }
  .page-about .about-matrix__cell:hover {
    transform: none;
  }
}