.page-about {
  --about-sticky: 6.5rem;
  --about-rail-node: 9px;
}

/* ---------- 页首 ---------- */
.page-about .breadcrumb {
  padding-top: clamp(1.25rem, 3vw, 2.25rem);
}

.page-about .about-lede {
  padding: clamp(1.5rem, 4vw, 2.75rem) 0 clamp(2rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
}

.page-about .about-lede .display {
  margin: 0.6rem 0 1.1rem;
  max-width: 18ch;
}

.page-about .about-lede .lede {
  max-width: 40ch;
}

.page-about .about-lede__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.page-about .about-stat {
  background: var(--panel);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.page-about .about-stat__label {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--mute);
}

.page-about .about-stat__value {
  margin: 0;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  font-weight: 800;
  line-height: 1;
  color: var(--frost);
}

/* ---------- 版本脉络：左轴右叙 ---------- */
.page-about .trail-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: start;
}

.page-about .trail-rail-title {
  margin: 0.5rem 0 0.85rem;
}

.page-about .trail-rail-note {
  margin-bottom: 1.75rem;
}

.page-about .trail-rail {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.25rem;
  border-left: 1px solid var(--line);
}

.page-about .trail-rail__node {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.65rem 0 0.65rem 1.4rem;
  color: var(--mute);
  font-weight: 600;
  transition: color 120ms linear;
}

.page-about .trail-rail__node::before {
  content: "";
  position: absolute;
  left: calc(-1 * (var(--about-rail-node) / 2) - 1px);
  top: 1.15rem;
  width: var(--about-rail-node);
  height: var(--about-rail-node);
  border-radius: 50%;
  background: var(--line);
  transition: background 120ms linear, box-shadow 120ms linear;
}

.page-about .trail-rail__node[data-active] {
  color: var(--frost);
}

.page-about .trail-rail__node[data-active]::before {
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(61, 255, 158, 0.16);
}

.page-about .trail-rail__idx {
  font-size: 0.78rem;
  color: var(--mute);
}

.page-about .trail-rail__node[data-active] .trail-rail__idx {
  color: var(--green);
}

.page-about .trail-step {
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.page-about .trail-step + .trail-step {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
}

.page-about .trail-step__ver {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--green);
  margin-bottom: 0.55rem;
}

.page-about .trail-step .h3 {
  margin: 0 0 0.85rem;
}

.page-about .trail-step .body + .body {
  margin-top: 0.85rem;
}

.page-about .trail-step .disclosure {
  margin-top: 1.1rem;
}

.page-about .trail-step__link-line {
  color: var(--mute);
}

.page-about .about-link {
  color: var(--frost);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
  transition: color 120ms linear, border-color 120ms linear;
  position: relative;
}

.page-about .about-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -1px;
  height: 1px;
  background: var(--green);
  transition: right 160ms ease-out;
}

.page-about .about-link:hover,
.page-about .about-link:focus-visible {
  color: var(--green);
  border-color: transparent;
}

.page-about .about-link:hover::after,
.page-about .about-link:focus-visible::after {
  right: 0;
}

/* ---------- 团队 ---------- */
.page-about .about-team__head {
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.page-about .about-team__head .h1 {
  margin: 0.5rem 0 0.85rem;
  max-width: 20ch;
}

.page-about .about-team__figure {
  margin: 0 0 clamp(2rem, 5vw, 3.25rem);
}

.page-about .about-team__figure .media-frame--wide {
  aspect-ratio: 16 / 7;
}

.page-about .team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

.page-about .team-cell {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 3vw, 1.85rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: border-color 140ms linear, background-color 140ms linear;
}

.page-about .team-cell:hover,
.page-about .team-cell:focus-within {
  border-color: var(--green);
  background-color: rgba(61, 255, 158, 0.08);
}

.page-about .team-cell__idx {
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  color: var(--green);
  margin: 0;
}

.page-about .team-cell .h3 {
  margin: 0;
}

.page-about .team-cell__meta {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--mute);
}

/* ---------- 数据链路 ---------- */
.page-about .about-flow__head {
  margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
}

.page-about .about-flow__head .h2 {
  margin: 0.5rem 0 0.85rem;
  max-width: 22ch;
}

.page-about .flow {
  margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
}

.page-about .flow__svg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1rem;
  box-sizing: border-box;
}

.page-about .flow .figure__cap {
  margin-top: 0.75rem;
}

.page-about .about-flow__tabs {
  border-top: 1px solid var(--line);
}

.page-about .about-flow__tabs .tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
}

.page-about .about-flow__tabs .tabs__tab {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--mute);
  font: inherit;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  padding: 0.5rem 1.1rem;
  border-radius: var(--pill);
  cursor: pointer;
  transition: color 120ms linear, border-color 120ms linear, background-color 120ms linear;
}

.page-about .about-flow__tabs .tabs__tab:hover,
.page-about .about-flow__tabs .tabs__tab:focus-visible {
  color: var(--frost);
  border-color: var(--mute);
}

.page-about .about-flow__tabs .tabs__tab[aria-selected="true"] {
  color: var(--on-green);
  background: var(--green);
  border-color: var(--green);
}

.page-about .about-flow__panel {
  padding: clamp(1.25rem, 3.5vw, 2.25rem) 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 1.25rem;
}

.page-about .about-flow__panel[hidden] {
  display: none;
}

.page-about .about-flow__big {
  margin: 0;
  font-size: clamp(3.5rem, 10vw, 6rem);
  font-weight: 800;
  line-height: 0.9;
  color: var(--green);
}

.page-about .about-flow__big-label {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  color: var(--mute);
}

.page-about .about-flow__panel .body {
  grid-column: 1 / -1;
  margin-top: 1.25rem;
}

/* ---------- 看球方式 ---------- */
.page-about .about-watch__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}

.page-about .about-watch__text .h2 {
  margin: 0.5rem 0 0.85rem;
  max-width: 20ch;
}

.page-about .watch-list {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.page-about .watch-list__item {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

.page-about .watch-list__key {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--teal);
  align-self: start;
  padding-top: 0.15rem;
}

.page-about .watch-list__desc {
  color: var(--frost);
  font-size: 0.98rem;
  line-height: 1.65;
}

.page-about .about-watch__figure {
  margin: 0;
}

.page-about .about-watch__figure .media-frame--tall {
  aspect-ratio: 4 / 5;
}

/* ---------- 合作方向 ---------- */
.page-about .about-coop__head {
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.page-about .about-coop__head .h2 {
  margin: 0.5rem 0 0.85rem;
  max-width: 22ch;
}

.page-about .coop-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  border-top: 1px solid var(--line);
  padding-top: clamp(1.5rem, 4vw, 2.25rem);
}

.page-about .coop-cell {
  padding-left: 1.1rem;
  border-left: 2px solid var(--line);
  transition: border-color 140ms linear;
}

.page-about .coop-cell:hover,
.page-about .coop-cell:focus-within {
  border-left-color: var(--orange);
}

.page-about .coop-cell .h3 {
  margin: 0 0 0.6rem;
}

.page-about .about-coop__cta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: clamp(1.5rem, 4vw, 2.25rem);
  border-top: 1px solid var(--line);
}

.page-about .about-coop__note {
  margin: 0;
  max-width: 42ch;
  color: var(--mute);
  line-height: 1.7;
}

/* ---------- 年鉴 ---------- */
.page-about .about-annual .wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}

.page-about .about-annual__figure {
  margin: 0;
}

.page-about .about-annual__figure .media-frame--square {
  aspect-ratio: 3 / 2;
}

.page-about .about-annual__text .h1 {
  margin: 0.5rem 0 1rem;
  max-width: 18ch;
}

.page-about .about-annual__text .lede {
  max-width: 40ch;
  margin-bottom: 1rem;
}

.page-about .about-annual__text .body + .body {
  margin-top: 0.85rem;
}

.page-about .about-annual__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* ---------- 收束 ---------- */
.page-about .about-tail {
  border-top: 1px solid var(--line);
}

.page-about .about-tail__inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.page-about .about-tail__title {
  margin: 0;
  max-width: 30ch;
}

.page-about .about-tail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ---------- 断点 ---------- */
@media (min-width: 600px) {
  .page-about .about-lede__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page-about .about-flow__panel {
    grid-template-columns: auto 1fr;
    align-items: end;
  }
}

@media (min-width: 720px) {
  .page-about .team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-about .coop-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
  }
  .page-about .about-tail__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .page-about .about-coop__cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }
}

@media (min-width: 960px) {
  .page-about .trail-layout {
    grid-template-columns: minmax(230px, 3fr) minmax(0, 9fr);
    column-gap: clamp(2.5rem, 6vw, 5.5rem);
  }
  .page-about .trail-rail-wrap {
    position: sticky;
    top: var(--about-sticky);
  }
  .page-about .about-watch__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  .page-about .about-annual .wrap {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    column-gap: clamp(2.5rem, 5vw, 4rem);
  }
  .page-about .about-annual__figure {
    order: 2;
  }
  .page-about .about-annual__text {
    order: 1;
  }
}

@media (min-width: 1280px) {
  .page-about .about-lede .display {
    max-width: 16ch;
  }
}
</style>
<<<END>>>

等等——我违反了规则：不能写 `</style>`，也不能写 `:root`。让我重新检查。

我写了 `</style>` —— 不允许。而且我用了 `:root` —— 也不允许。

另外，我用了 `--about-sticky` 和 `--about-rail-node`，它们定义在 `.page-about` 作用域内 —— 这是可以的，因为规则里说可以在页面作用域内定义新变量。

但 `</style>` 必须去掉。

让我修正。

另外，检查 `var()` 使用情况：
- `var(--about-sticky)` —— 在 `.page-about` 内定义 ✓
- `var(--about-rail-node)` —— 在 `.page-about` 内定义 ✓
- `var(--line)`, `var(--panel)`, `var(--mute)`, `var(--frost)`, `var(--green)`, `var(--on-green)`, `var(--teal)`, `var(--orange)`, `var(--pill)`, `var(--r-lg)`, `var(--gap)` —— 都在 var 列表里 ✓

好，所以只需要去掉 `</style>` 和 `:root`。

其实等等——我完全没写 `:root`。让我再扫一眼……

我没看到 `:root`。好。

只需要去掉 `</style>`。

让我重新检查 HTML 的问题：

1. `data-trail-rail` —— 不在 `interaction_data_attributes` 列表里。应该去掉或者只使用 `data-active`。我只保留了 `data-active`。好的。

2. 带 `id` 的 `<svg>` 标记 —— 可以，使用 `about-flow-arrow` 没问题。

3. 可点击的 `<button>` 放在 disclosure 里 —— 没问题。

4. 标签页上的 `aria-controls` 指向的 id 是存在的。✓

5. `data-tabs`、`data-tab`、`data-tab-panel` —— 都在列表里 ✓

6. `data-disclosure`、`data-disclosure-trigger`、`data-disclosure-panel` —— 都在列表里 ✓

7. `data-active` —— 在列表里 ✓

8. `data-year` —— 没用到。

好，让我输出修正后的版本。

另外检查一下：我用了 `<dl>` 和 `<dt>/<dd>` —— 有效 HTML。

再检查一下 —— `<main>` 上用的是 `.page-about`，CSS 里用 `.page-about .foo` —— 没问题。

关于 `</style>` —— 去掉。

最终版本里，`page_css` 标记后面的内容以 `.page-about { ... }` 开头，以最后一个 media query 结束。

让我最终确定。
<main id="main-content" class="page-about">
  <div class="wrap">
    <nav class="breadcrumb" aria-label="面包屑">
      <ol class="breadcrumb__list">
        <li class="breadcrumb__item"><a class="breadcrumb__link" href="/">赛事首页</a></li>
        <li class="breadcrumb__current" aria-current="page">品牌价值</li>
      </ol>
    </nav>

    <header class="about-lede">
      <p class="eyebrow">赛季准备 / BRAND VALUE</p>
      <h1 class="display">比赛日之前，数据已经先跑了一轮</h1>
      <p class="lede">自 2019 年起，悦博体育持续整理中文赛事入口与赛前数据。12 人的内容团队、9 家数据服务商的接口合作，让每一轮的阵容、比分与对阵在你的屏幕亮起之前，就已经落在该在的位置。</p>
      <dl class="about-lede__stats">
        <div class="about-stat">
          <dt class="about-stat__label">收录联赛</dt>
          <dd class="about-stat__value num">32</dd>
        </div>
        <div class="about-stat">
          <dt class="about-stat__label">球队档案</dt>
          <dd class="about-stat__value num">186</dd>
        </div>
        <div class="about-stat">
          <dt class="about-stat__label">内容运营</dt>
          <dd class="about-stat__value num">12</dd>
        </div>
        <div class="about-stat">
          <dt class="about-stat__label">接口合作</dt>
          <dd class="about-stat__value num">9</dd>
        </div>
      </dl>
    </header>
  </div>

  <section class="section section--loose about-trail" aria-labelledby="trail-title">
    <div class="wrap trail-layout">
      <div class="trail-rail-wrap">
        <p class="eyebrow">版本脉络</p>
        <h2 id="trail-title" class="h2 trail-rail-title">把赛前准备这件事，一步步拆细</h2>
        <p class="body trail-rail-note">每一次改版都围绕同一个出发点：球迷在赛前该操心的，只有比赛本身。</p>
        <ol class="trail-rail" aria-label="站点版本节点">
          <li class="trail-rail__node" data-active>
            <span class="trail-rail__idx num">01</span>
            <span class="trail-rail__name">起点 · 2019 赛季</span>
          </li>
          <li class="trail-rail__node">
            <span class="trail-rail__idx num">02</span>
            <span class="trail-rail__name">阵容字段接入</span>
          </li>
          <li class="trail-rail__node">
            <span class="trail-rail__idx num">03</span>
            <span class="trail-rail__name">内容分层</span>
          </li>
          <li class="trail-rail__node">
            <span class="trail-rail__idx num">04</span>
            <span class="trail-rail__name">V4 · 2024 赛季</span>
          </li>
        </ol>
      </div>

      <div class="trail-steps">
        <article class="trail-step">
          <p class="trail-step__ver mono">2019 赛季</p>
          <h3 class="h3">先把赛程摆清楚</h3>
          <p class="body">最初的一批页面只回答一件事：这一轮什么时候开踢。我们把分散在不同来源的轮次时间收拢到同一条线上，一轮的全部对阵可以一屏扫完，找下一场比赛不用再翻三个页面。</p>
          <div class="disclosure" data-disclosure>
            <button type="button" class="disclosure__trigger" data-disclosure-trigger aria-expanded="false">
              <span>当时的页面做到了什么程度</span>
              <span class="disclosure__mark" aria-hidden="true"></span>
            </button>
            <div class="disclosure__panel" data-disclosure-panel hidden>
              <p class="body">赛程与比分是页面上仅有的两栏内容。用户最常见的去向是首页和当轮列表，深度资料需要从场次页再点两次才能触达。这个阶段的经验，直接决定了后面几次改版的方向。</p>
            </div>
          </div>
        </article>

        <article class="trail-step">
          <p class="trail-step__ver mono">阵容字段接入</p>
          <h3 class="h3">比分之外，把人跟状态也放进来</h3>
          <p class="body">知道几点开踢只是第一步。赛前谁首发、谁伤停、谁状态回升，往往才是决定这场看不看的理由。我们把阵容与伤停字段接进页面，每轮更新量稳定在 40 条以上，覆盖当轮全部场次。</p>
          <div class="disclosure" data-disclosure>
            <button type="button" class="disclosure__trigger" data-disclosure-trigger aria-expanded="false">
              <span>阵容信息什么时候落定</span>
              <span class="disclosure__mark" aria-hidden="true"></span>
            </button>
            <div class="disclosure__panel" data-disclosure-panel hidden>
              <p class="body">阵容变动会一路同步到开赛前 24 小时。临场调整发生时，页面上的对应位置会即时更新，不会让你拿着过期的名单做判断。</p>
            </div>
          </div>
        </article>

        <article class="trail-step">
          <p class="trail-step__ver mono">内容分层</p>
          <h3 class="h3">一场比赛，拆成三种看法</h3>
          <p class="body">赛前想看前瞻，赛后想找集锦，赛季中途想核对某支球队近三个赛季的统计——三种诉求需要三种入口。我们把内容按使用时刻分层，前瞻、速查与轮次集锦各自找到了位置，互相之间可以顺着点过去。</p>
          <p class="body trail-step__link-line">现在这些内容分别落在<a class="about-link" href="/apps/">应用中心</a>与<a class="about-link" href="/information/">赛事资讯</a>两个栏目里，速查与集锦共用同一套轮次标记。</p>
        </article>

        <article class="trail-step">
          <p class="trail-step__ver mono">V4 · 2024 赛季</p>
          <h3 class="h3">把所有入口收进一块面板</h3>
          <p class="body">V4 改版把 32 个联赛、186 支球队的入口收进同一块导航面板，按国内联赛、洲际杯赛、国际邀请赛、青年梯队四类分组。第一次打开的人也能直接找到自己要的那一场。</p>
          <div class="disclosure" data-disclosure>
            <button type="button" class="disclosure__trigger" data-disclosure-trigger aria-expanded="false">
              <span>速度与跳转变化</span>
              <span class="disclosure__mark" aria-hidden="true"></span>
            </button>
            <div class="disclosure__panel" data-disclosure-panel hidden>
              <p class="body">首屏加载时间从 3.2 秒压到 1.1 秒以内，主要访问路径的跳转层级从平均三级收到两级。原来要点过两三次才能看到的赛前资料，现在大多在一屏之内。</p>
            </div>
          </div>
        </article>
      </div>
    </div>
  </section>

  <section class="section section--stand about-team" aria-labelledby="team-title">
    <div class="wrap">
      <div class="about-team__head">
        <p class="eyebrow">团队组构</p>
        <h2 id="team-title" class="h1">12 个人，盯住三条工作线</h2>
        <p class="lede">内容不是自动生成的。赛事数据、视频剪辑、栏目编辑三个小组各管一段，前后串成一条从开哨到赛季收尾的连续作业。</p>
      </div>

      <figure class="figure about-team__figure">
        <div class="media-frame media-frame--wide">
          <img class="media-frame__img" src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="俯拍的多屏数据工作台，屏幕上显示赛程表格与轮次时间轴，画面中不出现可识别人物" decoding="async">
        </div>
        <figcaption class="figure__cap">赛前 24 小时是工作台最忙的时段，阵容、伤停与时间轴在这个窗口里被反复确认。</figcaption>
      </figure>

      <div class="team-grid">
        <article class="team-cell">
          <p class="team-cell__idx num">01</p>
          <h3 class="h3">赛事数据组</h3>
          <p class="body">负责赛程、比分、阵容、伤停与赛后统计的整理与核对，也是与数据服务商接口对接的第一线。每一轮的字段变更都从这里出发。</p>
          <p class="team-cell__meta mono">赛程 / 比分 / 阵容 / 伤停</p>
        </article>
        <article class="team-cell">
          <p class="team-cell__idx num">02</p>
          <h3 class="h3">视频剪辑组</h3>
          <p class="body">把每一轮的精彩片段剪成 8 至 14 条集锦，按进球、扑救、战术片段、赛后采访四类打标签，配上中文解说字幕与轮次标记，方便你按类型挑着看。</p>
          <p class="team-cell__meta mono">轮次集锦 / 标签 / 中文字幕</p>
        </article>
        <article class="team-cell">
          <p class="team-cell__idx num">03</p>
          <h3 class="h3">栏目编辑组</h3>
          <p class="body">负责赛前前瞻、专题复盘与赛季末的年鉴。每年约 260 期前瞻从这条线产出，把零散的数据变成开赛前能读下去的一段话。</p>
          <p class="team-cell__meta mono">赛前前瞻 / 专题 / 数据年鉴</p>
        </article>
      </div>
    </div>
  </section>

  <section class="section section--loose about-flow" aria-labelledby="flow-title">
    <div class="wrap">
      <div class="about-flow__head">
        <p class="eyebrow">数据链路</p>
        <h2 id="flow-title" class="h2">从接口到页面，中间隔着几道确认</h2>
        <p class="body">赛程与比分不是拿来就用。每一条进入页面的信息，都走过一段固定的路径。</p>
      </div>

      <figure class="flow">
        <svg class="flow__svg" viewBox="0 0 880 220" role="img" aria-label="数据从九家服务商接口出发，经每日两次校准与赛后两小时复核进入页面展示，并通过用户纠错反馈回传处理" preserveAspectRatio="xMidYMid meet">
          <defs>
            <marker id="about-flow-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
              <path d="M0,0 L10,5 L0,10 z" fill="#2A4869"></path>
            </marker>
          </defs>
          <line x1="210" y1="100" x2="244" y2="100" stroke="#2A4869" stroke-width="1.5" marker-end="url(#about-flow-arrow)"></line>
          <line x1="420" y1="100" x2="454" y2="100" stroke="#2A4869" stroke-width="1.5" marker-end="url(#about-flow-arrow)"></line>
          <line x1="630" y1="100" x2="664" y2="100" stroke="#2A4869" stroke-width="1.5" marker-end="url(#about-flow-arrow)"></line>

          <rect x="40" y="60" width="170" height="80" rx="16" fill="none" stroke="#2A4869" stroke-width="1"></rect>
          <text x="125" y="94" text-anchor="middle" font-size="15" fill="#E9EFF6">接口输入</text>
          <text x="125" y="118" text-anchor="middle" font-size="12" fill="#93A6BC" font-family="monospace">9 家服务商</text>

          <rect x="250" y="60" width="170" height="80" rx="16" fill="none" stroke="#2A4869" stroke-width="1"></rect>
          <text x="335" y="94" text-anchor="middle" font-size="15" fill="#E9EFF6">每日校准</text>
          <text x="335" y="118" text-anchor="middle" font-size="12" fill="#93A6BC" font-family="monospace">×2 / 日</text>

          <rect x="460" y="60" width="170" height="80" rx="16" fill="none" stroke="#2A4869" stroke-width="1"></rect>
          <text x="545" y="94" text-anchor="middle" font-size="15" fill="#E9EFF6">赛后复核</text>
          <text x="545" y="118" text-anchor="middle" font-size="12" fill="#93A6BC" font-family="monospace">2 小时内</text>

          <rect x="670" y="60" width="170" height="80" rx="16" fill="#16304D" stroke="#3DFF9E" stroke-width="1"></rect>
          <text x="755" y="94" text-anchor="middle" font-size="15" fill="#E9EFF6">页面呈现</text>
          <text x="755" y="118" text-anchor="middle" font-size="12" fill="#3DFF9E" font-family="monospace">多端同源</text>

          <path d="M755,140 L755,180 L125,180 L125,144" fill="none" stroke="#2A4869" stroke-width="1.5" stroke-dasharray="5 5" marker-end="url(#about-flow-arrow)"></path>
          <text x="440" y="204" text-anchor="middle" font-size="12" fill="#93A6BC">用户纠错反馈 · 平均 6 小时内处理</text>
        </svg>
        <figcaption class="figure__cap">接口到页面是一段闭环：用户提交的纠错会回流到数据组，重新进入校准流程。</figcaption>
      </figure>

      <div class="tabs about-flow__tabs" data-tabs>
        <div class="tabs__list" role="tablist" aria-label="数据校准指标">
          <button type="button" class="tabs__tab" data-tab="calibrate" role="tab" aria-selected="true" aria-controls="about-panel-calibrate" id="about-tab-calibrate">每日校准</button>
          <button type="button" class="tabs__tab" data-tab="review" role="tab" aria-selected="false" aria-controls="about-panel-review" id="about-tab-review" tabindex="-1">赛后复核</button>
          <button type="button" class="tabs__tab" data-tab="fix" role="tab" aria-selected="false" aria-controls="about-panel-fix" id="about-tab-fix" tabindex="-1">纠错响应</button>
        </div>

        <div class="tabs__panel about-flow__panel" data-tab-panel="calibrate" role="tabpanel" id="about-panel-calibrate" aria-labelledby="about-tab-calibrate">
          <p class="about-flow__big num">2</p>
          <p class="about-flow__big-label">次 / 每日</p>
          <p class="body">与 9 家数据服务商保持接口合作，赛程与比分字段每日校准两次。日期、场次编号与主客关系这些容易出岔子的字段，是校准的重点。改版后主要路径的跳转层级从平均三级收到两级，数据在页面上的落位也更稳定。</p>
        </div>

        <div class="tabs__panel about-flow__panel" data-tab-panel="review" role="tabpanel" id="about-panel-review" aria-labelledby="about-tab-review" hidden>
          <p class="about-flow__big num">2</p>
          <p class="about-flow__big-label">小时 / 赛后</p>
          <p class="body">终场哨响之后，统计条目在 2 小时内完成录入与复核。每轮更新 40 条以上阵容与伤停信息，覆盖当轮全部场次，球队档案里近三个赛季的统计条目也会同步补齐。</p>
        </div>

        <div class="tabs__panel about-flow__panel" data-tab-panel="fix" role="tabpanel" id="about-panel-fix" aria-labelledby="about-tab-fix" hidden>
          <p class="about-flow__big num">6</p>
          <p class="about-flow__big-label">小时 / 平均处理</p>
          <p class="body">通过站内反馈通道提交的纠错，平均 6 小时内处理完毕。你不需要知道是谁在跟进——只要提交一次，处理结果会回到你提交时留下的联系渠道。发现问题的入口在<a class="about-link" href="/consult/">联系咨询</a>页面。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="section about-watch" aria-labelledby="watch-title">
    <div class="wrap about-watch__grid">
      <div class="about-watch__text">
        <p class="eyebrow">设备场景</p>
        <h2 id="watch-title" class="h2">同一套数据，跟着你的看球姿势走</h2>
        <p class="body">手机、平板与桌面共用同一套数据源，切换设备不会看到不一样的阵容。7 至 13 英寸的屏幕上，都能在一屏之内定位到目标赛事。</p>
        <ul class="watch-list">
          <li class="watch-list__item">
            <span class="watch-list__key mono">PHONE</span>
            <span class="watch-list__desc">通勤路上先扫一眼当轮时间，关键场次加进赛季提醒订阅。</span>
          </li>
          <li class="watch-list__item">
            <span class="watch-list__key mono">TABLET</span>
            <span class="watch-list__desc">横屏时左时间轴、右阵容卡同时展开，赛前 24 小时的阵容变动一眼看全。</span>
          </li>
          <li class="watch-list__item">
            <span class="watch-list__key mono">DESKTOP</span>
            <span class="watch-list__desc">多窗口并行，一边看轮次集锦一边核对球队近三个赛季的统计。</span>
          </li>
        </ul>
        <p class="body">站点服务以北京地区用户为主，同时面向全国中文球迷开放。北京地区每赛季组织 6 至 8 场观赛交流活动，具体场次会在站内提前公布。</p>
      </div>

      <figure class="figure about-watch__figure">
        <div class="media-frame media-frame--tall">
          <img class="media-frame__img" src="{zhanqunpic:h:700w:1600}" width="1600" height="700" alt="城市夜景中远处体育场灯光的远景剪影，画面偏暗，以成片光点为主" loading="lazy" decoding="async">
        </div>
        <figcaption class="figure__cap">北京的赛季节奏，从场馆灯光亮起的那一刻开始。</figcaption>
      </figure>
    </div>
  </section>

  <section class="section section--loose about-coop" aria-labelledby="coop-title">
    <div class="wrap">
      <div class="about-coop__head">
        <p class="eyebrow">合作方向</p>
        <h2 id="coop-title" class="h2">我们和外部伙伴一起把内容做厚</h2>
        <p class="body">合作围绕三个方向展开，每一类都有明确的交付内容与对接方式。</p>
      </div>

      <div class="coop-row">
        <article class="coop-cell">
          <h3 class="h3">数据接口合作</h3>
          <p class="body">与数据服务商对接赛程、比分与统计字段，明确字段口径、更新频率与异常回退方式。目前已有 9 家服务商在这条线上合作。</p>
        </article>
        <article class="coop-cell">
          <h3 class="h3">栏目共建</h3>
          <p class="body">围绕特定轮次或赛季阶段共同策划专题栏目，内容由双方共同署名。适合已经在做内容、希望扩大触达的合作方。</p>
        </article>
        <article class="coop-cell">
          <h3 class="h3">视频素材共建</h3>
          <p class="body">按轮次剪辑集锦片段并配中文解说字幕，目前归档已整理到第 12 轮。素材来源与使用范围在合作前明确约定。</p>
        </article>
      </div>

      <div class="about-coop__cta">
        <p class="about-coop__note">有合作意向，或想先了解我们已经做到哪一步，可以从联系咨询页找到合适的入口。</p>
        <a class="btn btn--primary" href="/consult/">发起合作咨询</a>
      </div>
    </div>
  </section>

  <section class="section about-annual" aria-labelledby="annual-title">
    <div class="wrap">
      <figure class="figure about-annual__figure">
        <div class="media-frame media-frame--square">
          <img class="media-frame__img" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="白板上手绘的流程线稿与彩色便签，纸面上的文字模糊不可辨认，画面中不含真实姓名" loading="lazy" decoding="async">
        </div>
        <figcaption class="figure__cap">年鉴的框架每年都会重新讨论一次：哪些维度值得留下，哪些可以精简。</figcaption>
      </figure>

      <div class="about-annual__text">
        <p class="eyebrow">赛季沉淀</p>
        <h2 id="annual-title" class="h1">赛季结束时，我们把这一轮收进年鉴</h2>
        <p class="lede">每年赛季末发布的《联赛数据年鉴》，汇总当年的轮次统计、阵容变化与射手榜。它不是一份流水账，而是给下一个赛季留一份可以翻回去的参照。</p>
        <p class="body">过去一个赛季的数据条目在这里被重新组织：哪些球队的阵容轮换最频繁，哪一轮的场均进球数最高，哪些球员在关键场次的数据出现明显跃升——这些问题在年鉴里都有对应的表格。</p>
        <p class="body">内容运营团队每年产出约 260 期赛前前瞻与 480 条轮次集锦，其中相当一部分会在年鉴里被重新引用。目前平台累计关注用户 47 万，赛季期间的活跃访问占比 63%。</p>
        <div class="about-annual__actions">
          <a class="btn btn--ghost" href="/information/">浏览轮次集锦</a>
          <a class="btn btn--ghost" href="/apps/">进入球队资料速查</a>
        </div>
      </div>
    </div>
  </section>

  <section class="section section--tight about-tail" aria-labelledby="tail-title">
    <div class="wrap about-tail__inner">
      <h2 id="tail-title" class="h2 about-tail__title">开赛前 24 小时，阵容和数据已经在你要打开的那块屏幕上。</h2>
      <div class="about-tail__actions">
        <a class="btn btn--primary" href="/">回到联赛导航面板</a>
        <a class="btn btn--ghost" href="/faq/">查看帮助中心</a>
      </div>
    </div>
  </section>
</main>

.page-about {
  --about-sticky: 6.5rem;
  --about-rail-node: 9px;
}

.page-about .breadcrumb {
  padding-top: clamp(1.25rem, 3vw, 2.25rem);
}

.page-about .about-lede {
  padding: clamp(1.5rem, 4vw, 2.75rem) 0 clamp(2rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
}

.page-about .about-lede .display {
  margin: 0.6rem 0 1.1rem;
  max-width: 18ch;
}

.page-about .about-lede .lede {
  max-width: 40ch;
}

.page-about .about-lede__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.page-about .about-stat {
  background: var(--panel);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.page-about .about-stat__label {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--mute);
}

.page-about .about-stat__value {
  margin: 0;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  font-weight: 800;
  line-height: 1;
  color: var(--frost);
}

.page-about .trail-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: start;
}

.page-about .trail-rail-title {
  margin: 0.5rem 0 0.85rem;
}

.page-about .trail-rail-note {
  margin-bottom: 1.75rem;
}

.page-about .trail-rail {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.25rem;
  border-left: 1px solid var(--line);
}

.page-about .trail-rail__node {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.65rem 0 0.65rem 1.4rem;
  color: var(--mute);
  font-weight: 600;
  transition: color 120ms linear;
}

.page-about .trail-rail__node::before {
  content: "";
  position: absolute;
  left: calc(-1 * (var(--about-rail-node) / 2) - 1px);
  top: 1.15rem;
  width: var(--about-rail-node);
  height: var(--about-rail-node);
  border-radius: 50%;
  background: var(--line);
  transition: background 120ms linear, box-shadow 120ms linear;
}

.page-about .trail-rail__node[data-active] {
  color: var(--frost);
}

.page-about .trail-rail__node[data-active]::before {
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(61, 255, 158, 0.16);
}

.page-about .trail-rail__idx {
  font-size: 0.78rem;
  color: var(--mute);
}

.page-about .trail-rail__node[data-active] .trail-rail__idx {
  color: var(--green);
}

.page-about .trail-step {
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.page-about .trail-step + .trail-step {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
}

.page-about .trail-step__ver {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--green);
  margin-bottom: 0.55rem;
}

.page-about .trail-step .h3 {
  margin: 0 0 0.85rem;
}

.page-about .trail-step .body + .body {
  margin-top: 0.85rem;
}

.page-about .trail-step .disclosure {
  margin-top: 1.1rem;
}

.page-about .trail-step__link-line {
  color: var(--mute);
}

.page-about .about-link {
  color: var(--frost);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
  position: relative;
  transition: color 120ms linear, border-color 120ms linear;
}

.page-about .about-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -1px;
  height: 1px;
  background: var(--green);
  transition: right 160ms ease-out;
}

.page-about .about-link:hover,
.page-about .about-link:focus-visible {
  color: var(--green);
  border-color: transparent;
}

.page-about .about-link:hover::after,
.page-about .about-link:focus-visible::after {
  right: 0;
}

.page-about .about-team__head {
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.page-about .about-team__head .h1 {
  margin: 0.5rem 0 0.85rem;
  max-width: 20ch;
}

.page-about .about-team__figure {
  margin: 0 0 clamp(2rem, 5vw, 3.25rem);
}

.page-about .about-team__figure .media-frame--wide {
  aspect-ratio: 16 / 7;
}

.page-about .team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

.page-about .team-cell {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 3vw, 1.85rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: border-color 140ms linear, background-color 140ms linear;
}

.page-about .team-cell:hover,
.page-about .team-cell:focus-within {
  border-color: var(--green);
  background-color: rgba(61, 255, 158, 0.08);
}

.page-about .team-cell__idx {
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  color: var(--green);
  margin: 0;
}

.page-about .team-cell .h3 {
  margin: 0;
}

.page-about .team-cell__meta {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--mute);
}

.page-about .about-flow__head {
  margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
}

.page-about .about-flow__head .h2 {
  margin: 0.5rem 0 0.85rem;
  max-width: 22ch;
}

.page-about .flow {
  margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
}

.page-about .flow__svg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1rem;
  box-sizing: border-box;
}

.page-about .flow .figure__cap {
  margin-top: 0.75rem;
}

.page-about .about-flow__tabs {
  border-top: 1px solid var(--line);
}

.page-about .about-flow__tabs .tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
}

.page-about .about-flow__tabs .tabs__tab {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--mute);
  font: inherit;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  padding: 0.5rem 1.1rem;
  border-radius: var(--pill);
  cursor: pointer;
  transition: color 120ms linear, border-color 120ms linear, background-color 120ms linear;
}

.page-about .about-flow__tabs .tabs__tab:hover,
.page-about .about-flow__tabs .tabs__tab:focus-visible {
  color: var(--frost);
  border-color: var(--mute);
}

.page-about .about-flow__tabs .tabs__tab[aria-selected="true"] {
  color: var(--on-green);
  background: var(--green);
  border-color: var(--green);
}

.page-about .about-flow__panel {
  padding: clamp(1.25rem, 3.5vw, 2.25rem) 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 1.25rem;
}

.page-about .about-flow__panel[hidden] {
  display: none;
}

.page-about .about-flow__big {
  margin: 0;
  font-size: clamp(3.5rem, 10vw, 6rem);
  font-weight: 800;
  line-height: 0.9;
  color: var(--green);
}

.page-about .about-flow__big-label {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  color: var(--mute);
}

.page-about .about-flow__panel .body {
  grid-column: 1 / -1;
  margin-top: 1.25rem;
}

.page-about .about-watch__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}

.page-about .about-watch__text .h2 {
  margin: 0.5rem 0 0.85rem;
  max-width: 20ch;
}

.page-about .watch-list {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.page-about .watch-list__item {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

.page-about .watch-list__key {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--teal);
  align-self: start;
  padding-top: 0.15rem;
}

.page-about .watch-list__desc {
  color: var(--frost);
  font-size: 0.98rem;
  line-height: 1.65;
}

.page-about .about-watch__figure {
  margin: 0;
}

.page-about .about-watch__figure .media-frame--tall {
  aspect-ratio: 4 / 5;
}

.page-about .about-coop__head {
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.page-about .about-coop__head .h2 {
  margin: 0.5rem 0 0.85rem;
  max-width: 22ch;
}

.page-about .coop-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  border-top: 1px solid var(--line);
  padding-top: clamp(1.5rem, 4vw, 2.25rem);
}

.page-about .coop-cell {
  padding-left: 1.1rem;
  border-left: 2px solid var(--line);
  transition: border-color 140ms linear;
}

.page-about .coop-cell:hover,
.page-about .coop-cell:focus-within {
  border-left-color: var(--orange);
}

.page-about .coop-cell .h3 {
  margin: 0 0 0.6rem;
}

.page-about .about-coop__cta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: clamp(1.5rem, 4vw, 2.25rem);
  border-top: 1px solid var(--line);
}

.page-about .about-coop__note {
  margin: 0;
  max-width: 42ch;
  color: var(--mute);
  line-height: 1.7;
}

.page-about .about-annual .wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}

.page-about .about-annual__figure {
  margin: 0;
}

.page-about .about-annual__figure .media-frame--square {
  aspect-ratio: 3 / 2;
}

.page-about .about-annual__text .h1 {
  margin: 0.5rem 0 1rem;
  max-width: 18ch;
}

.page-about .about-annual__text .lede {
  max-width: 40ch;
  margin-bottom: 1rem;
}

.page-about .about-annual__text .body + .body {
  margin-top: 0.85rem;
}

.page-about .about-annual__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.page-about .about-tail {
  border-top: 1px solid var(--line);
}

.page-about .about-tail__inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.page-about .about-tail__title {
  margin: 0;
  max-width: 30ch;
}

.page-about .about-tail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (min-width: 600px) {
  .page-about .about-lede__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page-about .about-flow__panel {
    grid-template-columns: auto 1fr;
    align-items: end;
  }
}

@media (min-width: 720px) {
  .page-about .team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-about .coop-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
  }
  .page-about .about-tail__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .page-about .about-coop__cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }
}

@media (min-width: 960px) {
  .page-about .trail-layout {
    grid-template-columns: minmax(230px, 3fr) minmax(0, 9fr);
    column-gap: clamp(2.5rem, 6vw, 5.5rem);
  }
  .page-about .trail-rail-wrap {
    position: sticky;
    top: var(--about-sticky);
  }
  .page-about .about-watch__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  .page-about .about-annual .wrap {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    column-gap: clamp(2.5rem, 5vw, 4rem);
  }
  .page-about .about-annual__figure {
    order: 2;
  }
  .page-about .about-annual__text {
    order: 1;
  }
}

@media (min-width: 1280px) {
  .page-about .about-lede .display {
    max-width: 16ch;
  }
}