.page-about {
  --about-spine: 64px;
  background: var(--bg);
  color: var(--ink);
}

/* 面包屑带 */
.page-about .about-crumb {
  padding-top: 22px;
  padding-bottom: 14px;
}

/* 首屏 */
.page-about .about-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  padding: 26px 0 48px;
}

.page-about .about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 120px 120px;
  opacity: .28;
  pointer-events: none;
}

.page-about .about-hero::after {
  content: "";
  position: absolute;
  top: -30%;
  right: -34%;
  width: 70%;
  height: 165%;
  background: linear-gradient(155deg, rgba(43, 35, 96, .78), rgba(14, 90, 120, .28) 62%, transparent);
  border-left: 1px solid var(--indigo-line);
  transform: rotate(10deg);
  pointer-events: none;
}

.page-about .about-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 34px;
}

.page-about .about-hero__kicker {
  margin: 0 0 14px;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue);
}

.page-about .about-hero__title {
  margin: 0 0 18px;
  font-size: clamp(2rem, 6.4vw, 4rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.015em;
  max-width: 17ch;
}

.page-about .about-hero__desc {
  margin: 0 0 26px;
  max-width: 54ch;
  font-size: 1rem;
  line-height: 1.68;
  color: var(--ink);
  opacity: .88;
}

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

.page-about .about-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-line);
}

.page-about .about-stats__row {
  background: var(--panel);
  padding: 16px 16px 18px;
}

.page-about .about-stats__label {
  display: block;
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 8px;
}

.page-about .about-stats__value {
  display: block;
  margin: 0;
  font-size: clamp(1.3rem, 3.4vw, 1.75rem);
  font-weight: 600;
  color: var(--blue);
  letter-spacing: -.01em;
}

/* 主体两栏 */
.page-about .about-body {
  display: grid;
  gap: 30px;
  padding-top: 40px;
  padding-bottom: 56px;
}

.page-about .about-toc {
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}

.page-about .about-toc__title {
  margin: 0 0 14px;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-about .about-toc__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.page-about .about-toc__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-size: .86rem;
  text-decoration: none;
  transition: color .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease);
}

.page-about .about-toc__num {
  font-size: .74rem;
  color: var(--blue);
  letter-spacing: .08em;
}

.page-about .about-toc__link:hover,
.page-about .about-toc__link:focus-visible {
  color: var(--ink);
  border-color: var(--blue);
}

.page-about .about-toc__link.is-active {
  color: var(--ink);
  border-color: var(--blue);
  box-shadow: inset 2px 0 0 var(--blue);
}

/* 章节 */
.page-about .about-flow > .about-section {
  padding: 38px 0;
  border-top: 1px solid var(--line);
}

.page-about .about-flow > .about-section:first-child {
  border-top: 0;
  padding-top: 6px;
}

.page-about .about-section__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 20px;
}

.page-about .about-section__index {
  flex: 0 0 var(--about-spine);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--blue);
  letter-spacing: .1em;
}

.page-about .about-section__title {
  margin: 0;
  font-size: clamp(1.35rem, 3.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -.01em;
}

.page-about .about-section__body p {
  margin: 0 0 1.1em;
  line-height: 1.68;
  max-width: 66ch;
}

.page-about .about-section__body p:last-child {
  margin-bottom: 0;
}

.page-about .about-lead-p {
  color: var(--ink);
  opacity: .9;
}

.page-about .about-note-line {
  color: var(--muted);
  font-size: .92rem;
}

/* 团队分工 */
.page-about .about-split {
  display: grid;
  gap: 28px;
}

.page-about .about-roles {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-about .about-roles__item {
  border: 1px solid var(--line);
  background: var(--panel);
  border-left: 2px solid var(--indigo-line);
  padding: 16px 18px;
  box-shadow: var(--shadow-line);
}

.page-about .about-roles__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.page-about .about-roles__name {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
}

.page-about .about-roles__count {
  font-size: .86rem;
  color: var(--blue);
  letter-spacing: .04em;
  white-space: nowrap;
}

.page-about .about-roles__desc {
  margin: 0;
  font-size: .93rem;
  line-height: 1.62;
  color: var(--muted);
}

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

/* 比赛日流程 */
.page-about .about-flowline {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-left: 1px solid var(--line);
}

.page-about .about-flowline__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 16px 0 16px 24px;
}

.page-about .about-flowline__item::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 24px;
  width: 7px;
  height: 7px;
  background: var(--blue);
  border-radius: 50%;
}

.page-about .about-flowline__item--hot::before {
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 122, 26, .18);
}

.page-about .about-flowline__time {
  font-size: .82rem;
  letter-spacing: .1em;
  color: var(--amber);
}

.page-about .about-flowline__title {
  margin: 0 0 4px;
  font-size: 1.02rem;
  font-weight: 700;
}

.page-about .about-flowline__text p {
  margin: 0;
  font-size: .93rem;
  line-height: 1.62;
  color: var(--muted);
  max-width: 62ch;
}

/* 版本演进 */
.page-about .about-version-figure {
  margin: 0 0 26px;
}

.page-about .about-versions__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 22px;
}

.page-about .about-versions__tab {
  font-family: var(--font-mono);
  font-size: .84rem;
  letter-spacing: .04em;
  padding: 9px 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease);
}

.page-about .about-versions__tab:hover,
.page-about .about-versions__tab:focus-visible {
  color: var(--ink);
  border-color: var(--blue);
}

.page-about .about-versions__tab[aria-selected="true"] {
  color: var(--ink);
  background: var(--indigo);
  border-color: var(--indigo-line);
}

.page-about .about-version-panel {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 22px 20px;
  box-shadow: var(--shadow-line);
}

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

.page-about .about-version-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.page-about .about-version-panel__title {
  margin: 0;
  font-size: clamp(1.1rem, 2.8vw, 1.5rem);
  font-weight: 800;
}

.page-about .about-version-panel__desc {
  margin: 0 0 16px;
  line-height: 1.68;
  color: var(--ink);
  opacity: .9;
  max-width: 64ch;
}

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

.page-about .about-version-panel__list li {
  position: relative;
  padding-left: 20px;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--muted);
}

.page-about .about-version-panel__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 10px;
  height: 1px;
  background: var(--blue);
}

/* 覆盖范围 */
.page-about .about-reach {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 26px;
}

.page-about .about-reach__stat {
  background: var(--panel-deep);
  padding: 18px 16px;
}

.page-about .about-reach__num {
  display: block;
  font-size: clamp(1.35rem, 3.6vw, 1.85rem);
  font-weight: 600;
  color: var(--blue);
  margin-bottom: 6px;
}

.page-about .about-reach__label {
  display: block;
  font-size: .82rem;
  color: var(--muted);
  letter-spacing: .04em;
}

.page-about .about-leagues {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 22px;
  padding: 0;
}

.page-about .about-leagues__item {
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .04em;
  padding: 6px 11px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
}

/* 合作 */
.page-about .about-coops {
  display: grid;
  gap: 14px;
  margin: 24px 0 24px;
}

.page-about .about-coop {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 20px 20px 22px;
  box-shadow: var(--shadow-line);
}

.page-about .about-coop__title {
  margin: 14px 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
}

.page-about .about-coop__desc {
  margin: 0;
  font-size: .93rem;
  line-height: 1.64;
  color: var(--muted);
}

.page-about .about-honor {
  border-left: 2px solid var(--amber);
  padding: 4px 0 4px 16px;
  color: var(--ink);
  opacity: .9;
}

/* 收尾 */
.page-about .about-closing {
  border-top: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 78% 10%, rgba(14, 90, 120, .34), transparent 60%),
    var(--panel-deep);
  padding: 44px 0 56px;
}

.page-about .about-closing__inner {
  display: grid;
  gap: 28px;
}

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

.page-about .about-closing__title {
  margin: 0 0 14px;
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -.01em;
}

.page-about .about-closing__desc {
  margin: 0 0 20px;
  line-height: 1.68;
  max-width: 62ch;
  color: var(--ink);
  opacity: .88;
}

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

.page-about .about-closing__list li {
  position: relative;
  padding-left: 22px;
  font-size: .94rem;
  line-height: 1.6;
  color: var(--muted);
}

.page-about .about-closing__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: 12px;
  height: 1px;
  background: var(--orange);
}

.page-about .about-closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* 响应式 */
@media (min-width: 700px) {
  .page-about .about-flowline__item {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }

  .page-about .about-flowline__time {
    text-align: right;
    padding-top: 2px;
  }

  .page-about .about-flowline__item::before {
    top: 8px;
  }

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

@media (min-width: 900px) {
  .page-about .about-hero {
    padding: 40px 0 68px;
  }

  .page-about .about-hero::after {
    right: -20%;
    width: 52%;
  }

  .page-about .about-hero__inner {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 56px;
    align-items: end;
  }

  .page-about .about-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }

  .page-about .about-closing__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 48px;
    align-items: center;
  }
}

@media (min-width: 980px) {
  .page-about .about-body {
    grid-template-columns: 218px minmax(0, 1fr);
    gap: 56px;
    padding-top: 52px;
  }

  .page-about .about-toc {
    position: sticky;
    top: 92px;
    align-self: start;
    border-bottom: 0;
    border-left: 1px solid var(--line);
    padding: 0 0 0 16px;
  }

  .page-about .about-toc__list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 2px;
  }

  .page-about .about-toc__link {
    border: 0;
    border-left: 2px solid transparent;
    background: transparent;
    padding: 9px 10px;
    width: 100%;
  }

  .page-about .about-toc__link:hover,
  .page-about .about-toc__link:focus-visible {
    background: var(--panel);
  }

  .page-about .about-toc__link.is-active {
    background: var(--panel);
    border-left-color: var(--blue);
    box-shadow: none;
  }

  .page-about .about-flow > .about-section {
    padding: 46px 0;
  }
}
<<<END>>>

等等，我漏了结束标记。让我修正输出格式——只输出两个标记块。


（同上）
<<<END>>>

不需要 <<<END>>>。按协议只输出两个标记。我重新输出。

实际上我已在上面输出了内容，现在需要给出正确格式。让我完整重新输出。

注意：媒体查询里我用了两个断点，符合"至少一个媒体查询"。移动端优先已满足。

还有一个问题：`.page-about .about-section__index { flex: 0 0 var(--about-spine); }` 中 --about-spine 定义在 .page-about，OK。

好，重新完整输出。
<main id="main-content" class="page-about">

  <div class="container about-crumb">
    <nav class="breadcrumb" aria-label="页面位置">
      <ol class="breadcrumb__list">
        <li class="breadcrumb__item"><a class="breadcrumb__link" href="/">矩阵首页</a></li>
        <li class="breadcrumb__sep" aria-hidden="true">/</li>
        <li class="breadcrumb__item"><span class="breadcrumb__text" aria-current="page">品牌文化</span></li>
      </ol>
    </nav>
  </div>

  <header class="about-hero">
    <div class="container about-hero__inner">
      <div class="about-hero__lead">
        <p class="about-hero__kicker mono">矩阵 V2.0 · 内容团队档案</p>
        <h1 class="about-hero__title">八年时间，把多联赛的赛程和回看交到同一批编辑手里</h1>
        <p class="about-hero__desc">威首页体育从一份按开球时间排开的赛程列表起步，今天由 46 人内容团队支撑 18 项赛事的每日更新。你在比赛日打开的那一屏，背后是赛事编辑、视频剪辑与数据支持三条固定班底，各自盯住自己那一段。</p>
        <div class="about-hero__actions">
          <a class="btn btn--pulse" href="/projects/">走进内容栏目中心</a>
          <a class="btn btn--ghost" href="/notes/">阅读赛事笔记</a>
        </div>
      </div>
      <dl class="about-stats">
        <div class="about-stats__row">
          <dt class="about-stats__label">连续运营赛季</dt>
          <dd class="about-stats__value mono">8</dd>
        </div>
        <div class="about-stats__row">
          <dt class="about-stats__label">内容与产品团队</dt>
          <dd class="about-stats__value mono">46 人</dd>
        </div>
        <div class="about-stats__row">
          <dt class="about-stats__label">覆盖赛事</dt>
          <dd class="about-stats__value mono">18 项</dd>
        </div>
        <div class="about-stats__row">
          <dt class="about-stats__label">累计收录集锦</dt>
          <dd class="about-stats__value mono">42,000 条</dd>
        </div>
      </dl>
    </div>
  </header>

  <div class="container about-body">

    <aside class="about-toc" aria-label="章节导航">
      <p class="about-toc__title mono">章节 01–06</p>
      <ol class="about-toc__list">
        <li><a class="about-toc__link" href="#origin" data-toc-link><span class="about-toc__num mono">01</span><span class="about-toc__txt">起点与定位</span></a></li>
        <li><a class="about-toc__link" href="#team" data-toc-link><span class="about-toc__num mono">02</span><span class="about-toc__txt">团队与分工</span></a></li>
        <li><a class="about-toc__link" href="#workflow" data-toc-link><span class="about-toc__num mono">03</span><span class="about-toc__txt">比赛日节奏</span></a></li>
        <li><a class="about-toc__link" href="#versions" data-toc-link><span class="about-toc__num mono">04</span><span class="about-toc__txt">版本演进</span></a></li>
        <li><a class="about-toc__link" href="#reach" data-toc-link><span class="about-toc__num mono">05</span><span class="about-toc__txt">覆盖与人群</span></a></li>
        <li><a class="about-toc__link" href="#partners" data-toc-link><span class="about-toc__num mono">06</span><span class="about-toc__txt">内容来源</span></a></li>
      </ol>
    </aside>

    <div class="about-flow">

      <section class="about-section" id="origin">
        <header class="about-section__head">
          <span class="about-section__index mono">01</span>
          <h2 class="about-section__title">从一份赛程列表开始</h2>
        </header>
        <div class="about-section__body">
          <p>最早的时候这里只有一个页面：把当天的比赛按开球时间排清楚——谁对谁、几点开始、属于哪个联赛。做这件事的只有几位赛事编辑，一场一场地填。它解决的是最直接的问题：打开就知道今天有什么可看。</p>
          <p>用户很快用行动告诉我们，他们不会只看一个联赛。同时关注两到五个联赛是常态，切换于是变成负担：看完英超去中超要换入口，补集锦又要重新找一次。赛程、回看与频道视频被收进同一个入口之后，固定访问的人每天从同一个位置开始，不必重新摸索路径。</p>
        </div>
      </section>

      <section class="about-section" id="team">
        <header class="about-section__head">
          <span class="about-section__index mono">02</span>
          <h2 class="about-section__title">谁在维护这些内容</h2>
        </header>
        <div class="about-section__body">
          <div class="about-split">
            <div>
              <p>内容与产品团队一共 46 人，按工作性质分成三条线。三条线各自有明确的交付物，也各自有能被追问的节奏，内容因此能一天接一天地跟上赛历。</p>
              <ul class="about-roles">
                <li class="about-roles__item">
                  <div class="about-roles__top">
                    <h3 class="about-roles__name">赛事编辑</h3>
                    <span class="about-roles__count mono">20 人</span>
                  </div>
                  <p class="about-roles__desc">负责每天的赛程录入、时段分组与开赛前后状态更新，同时维护专题策划与数据观察栏目的长期内容。</p>
                </li>
                <li class="about-roles__item">
                  <div class="about-roles__top">
                    <h3 class="about-roles__name">视频剪辑</h3>
                    <span class="about-roles__count mono">14 人</span>
                  </div>
                  <p class="about-roles__desc">负责终场后的集锦选段、剪辑与上线，也承接 PC 端频道 12 个视频栏目的日常片单编排。</p>
                </li>
                <li class="about-roles__item">
                  <div class="about-roles__top">
                    <h3 class="about-roles__name">数据与技术支持</h3>
                    <span class="about-roles__count mono">12 人</span>
                  </div>
                  <p class="about-roles__desc">负责数据接口对接、播放链路稳定性与使用记录的跨端同步，出现问题第一时间在链路上找原因。</p>
                </li>
              </ul>
            </div>
            <figure class="media-frame media-frame--4x3 media-frame--crosshair about-team-figure">
              <img class="media-frame__img" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="夜间调光环境下的多屏工作位，屏幕上显示剪辑时间线与赛程表格，画面没有可辨识的人物面部" loading="lazy" decoding="async">
              <figcaption class="media-frame__caption">编辑与剪辑在同一层办公区协作，赛程确认后素材随即进入剪辑队列。</figcaption>
            </figure>
          </div>
        </div>
      </section>

      <section class="about-section" id="workflow">
        <header class="about-section__head">
          <span class="about-section__index mono">03</span>
          <h2 class="about-section__title">一个比赛日是怎么走完的</h2>
        </header>
        <div class="about-section__body">
          <p class="about-lead-p">赛程在每天 06:00 与 18:00 完成两次更新，覆盖凌晨、下午、晚间三个时段，单个比赛日约 180 条赛程条目进入编排流程。时间点固定下来，用户就知道什么时候刷新能看到最新安排。</p>
          <ol class="about-flowline">
            <li class="about-flowline__item">
              <span class="about-flowline__time mono">06:00</span>
              <div class="about-flowline__text">
                <h3 class="about-flowline__title">早间全量更新</h3>
                <p>复核当日全部赛程，补齐跨时区的开球时间调整，把凌晨与下午两个时段先排定。</p>
              </div>
            </li>
            <li class="about-flowline__item">
              <span class="about-flowline__time mono">赛中</span>
              <div class="about-flowline__text">
                <h3 class="about-flowline__title">状态实时跟进</h3>
                <p>开赛、进行中、已结束三种状态随比赛推进切换，晚间场次的开球时间再做一次确认。</p>
              </div>
            </li>
            <li class="about-flowline__item">
              <span class="about-flowline__time mono">18:00</span>
              <div class="about-flowline__text">
                <h3 class="about-flowline__title">晚间复核</h3>
                <p>整理晚间与次日凌晨场次，为习惯夜间看球的用户备好完整的一天安排。</p>
              </div>
            </li>
            <li class="about-flowline__item about-flowline__item--hot">
              <span class="about-flowline__time mono">终场后</span>
              <div class="about-flowline__text">
                <h3 class="about-flowline__title">90 分钟内集锦上线</h3>
                <p>剪辑完成后进入回看集锦库，按栏目归档，赛后补看不用等太久。</p>
              </div>
            </li>
          </ol>
        </div>
      </section>

      <section class="about-section" id="versions">
        <header class="about-section__head">
          <span class="about-section__index mono">04</span>
          <h2 class="about-section__title">三次公开版本，把入口一步步收拢</h2>
        </header>
        <div class="about-section__body">
          <figure class="media-frame media-frame--21x9 about-version-figure">
            <img class="media-frame__img" src="{zhanqunpic:h:600w:1600}" width="1600" height="600" alt="深墨绿底色上的横向版本刻度线，电光蓝节点标注三个公开版本，橙色标记当前版本，刻度对应功能上线顺序" loading="lazy" decoding="async">
          </figure>

          <div class="about-versions" data-tabs>
            <div class="tabs about-versions__tabs" role="tablist" aria-label="矩阵公开版本">
              <button class="tab about-versions__tab" role="tab" id="tab-v1" aria-controls="panel-v1" aria-selected="true">V1.0 赛程列表</button>
              <button class="tab about-versions__tab" role="tab" id="tab-v15" aria-controls="panel-v15" aria-selected="false" tabindex="-1">V1.5 频道视频</button>
              <button class="tab about-versions__tab" role="tab" id="tab-v2" aria-controls="panel-v2" aria-selected="false" tabindex="-1">V2.0 各归其位</button>
            </div>

            <div class="tab-panel about-version-panel" id="panel-v1" role="tabpanel" aria-labelledby="tab-v1" tabindex="0">
              <div class="about-version-panel__head">
                <span class="tag tag--version mono">V1.0</span>
                <h3 class="about-version-panel__title">先把「今天看什么」说清楚</h3>
              </div>
              <p class="about-version-panel__desc">当日全部比赛按开球时间排成一列，不同联赛第一次出现在同一个页面上。用户不用再为换联赛找新入口，代价是集锦仍然得另外找地方看。</p>
              <ul class="about-version-panel__list">
                <li>按开球时间纵向排列，一屏读完当天安排</li>
                <li>多联赛同页呈现，切换成本开始下降</li>
                <li>移动端可读，通勤路上也能扫一眼</li>
              </ul>
            </div>

            <div class="tab-panel about-version-panel" id="panel-v15" role="tabpanel" aria-labelledby="tab-v15" tabindex="0" hidden>
              <div class="about-version-panel__head">
                <span class="tag tag--version mono">V1.5</span>
                <h3 class="about-version-panel__title">视频进入同一个屏</h3>
              </div>
              <p class="about-version-panel__desc">PC 端频道上线 12 个视频栏目，播放器与栏目切换放在同一屏内完成。选完栏目就能直接看，不必再经历一次跳转和等待。</p>
              <ul class="about-version-panel__list">
                <li>12 个视频栏目覆盖集锦、专题与观察类内容</li>
                <li>播放与选栏同屏完成，观看不被打断</li>
                <li>为集锦归档积累了栏目分类经验</li>
              </ul>
            </div>

            <div class="tab-panel about-version-panel" id="panel-v2" role="tabpanel" aria-labelledby="tab-v2" tabindex="0" hidden>
              <div class="about-version-panel__head">
                <span class="tag tag--live mono">V2.0 当前版本</span>
                <h3 class="about-version-panel__title">赛程与回看各归其位</h3>
              </div>
              <p class="about-version-panel__desc">赛程中心按日期与联赛双轴组织，回看集锦按六类内容栏目归档，PC 端频道保持同屏切换。注册焕新版后，筛选联赛与调取历史记录的操作步骤分别减少约一半。</p>
              <ul class="about-version-panel__list">
                <li>日期轴加联赛轴，多联赛取交集即可筛出想看的场次</li>
                <li>六类栏目归档，42,000 条集锦能被快速定位</li>
                <li>使用记录在 PC 网页、移动网页与平板之间自动同步</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <section class="about-section" id="reach">
        <header class="about-section__head">
          <span class="about-section__index mono">05</span>
          <h2 class="about-section__title">服务的范围有多大</h2>
        </header>
        <div class="about-section__body">
          <div class="about-reach">
            <div class="about-reach__stat">
              <span class="about-reach__num mono">320 万</span>
              <span class="about-reach__label">注册用户规模</span>
            </div>
            <div class="about-reach__stat">
              <span class="about-reach__num mono">48 万</span>
              <span class="about-reach__label">比赛日活跃访问</span>
            </div>
            <div class="about-reach__stat">
              <span class="about-reach__num mono">31 个</span>
              <span class="about-reach__label">省级行政区用户来源</span>
            </div>
          </div>
          <p class="about-lead-p">赛程中心覆盖的赛事以国内球迷关注度最高的几类为主，欧洲五大联赛、亚洲赛事与女子赛事都在其中。名单会随赛历调整，赛季开始与结束时有增有减。</p>
          <ul class="about-leagues">
            <li class="about-leagues__item">英超</li>
            <li class="about-leagues__item">中超</li>
            <li class="about-leagues__item">西甲</li>
            <li class="about-leagues__item">意甲</li>
            <li class="about-leagues__item">德甲</li>
            <li class="about-leagues__item">法甲</li>
            <li class="about-leagues__item">欧冠</li>
            <li class="about-leagues__item">亚冠</li>
            <li class="about-leagues__item">世预赛</li>
            <li class="about-leagues__item">女超</li>
            <li class="about-leagues__item">J 联赛</li>
            <li class="about-leagues__item">K 联赛</li>
            <li class="about-leagues__item">葡超</li>
            <li class="about-leagues__item">荷甲</li>
            <li class="about-leagues__item">巴甲</li>
            <li class="about-leagues__item">阿甲</li>
            <li class="about-leagues__item">美职联</li>
            <li class="about-leagues__item">澳超</li>
          </ul>
          <p class="about-note-line">除国内用户之外，也有部分海外地区访问。登录后，联赛筛选条件与最近浏览的栏目、调取过的集锦都会替你留着。</p>
        </div>
      </section>

      <section class="about-section" id="partners">
        <header class="about-section__head">
          <span class="about-section__index mono">06</span>
          <h2 class="about-section__title">内容是从哪里来的</h2>
        </header>
        <div class="about-section__body">
          <p class="about-lead-p">我们与 14 家赛事数据与视频合作方保持长期协作，按三种方式分工。合作的核心不是名单长度，而是让每天那 180 条赛程和赛后集锦有稳定、说得清来路的出处。</p>
          <div class="about-coops">
            <article class="about-coop">
              <span class="tag tag--blue mono">数据合作</span>
              <h3 class="about-coop__title">赛程与比分数据接口</h3>
              <p class="about-coop__desc">为 18 项赛事提供结构化的赛程与状态数据，编辑在此之上完成时段分组与人工复核。</p>
            </article>
            <article class="about-coop">
              <span class="tag tag--amber mono">视频合作</span>
              <h3 class="about-coop__title">集锦与栏目视频素材</h3>
              <p class="about-coop__desc">为回看集锦库与 PC 端 12 个视频栏目提供素材来源，剪辑团队负责二次编排与上线。</p>
            </article>
            <article class="about-coop">
              <span class="tag tag--version mono">内容共创</span>
              <h3 class="about-coop__title">专题与赛季长线内容</h3>
              <p class="about-coop__desc">围绕赛季节点一起策划专题，把零散的比赛日内容串成可以连续读下去的系列。</p>
            </article>
          </div>
          <p class="about-honor">连续三个赛季获得行业媒体评选的体育内容体验类提名。这类评价对我们更像一次外部回看，真正的答案还是在用户愿不愿意每天回来这件事上。</p>
        </div>
      </section>

    </div>
  </div>

  <section class="about-closing" aria-labelledby="about-closing-title">
    <div class="container about-closing__inner">
      <figure class="media-frame media-frame--21x9 about-closing__figure">
        <img class="media-frame__img" src="{zhanqunpic:h:700w:1600}" width="1600" height="700" alt="夜场灯光下的空看台与草皮纹理，冷色调画面中没有人物，远处看台灯带呈点状延伸" loading="lazy" decoding="async">
      </figure>
      <div class="about-closing__body">
        <h2 class="about-closing__title" id="about-closing-title">八年下来，我们最在意的还是同一件事</h2>
        <p class="about-closing__desc">一个观赛入口值不值得长期用，看的不是某一天做得多热闹，而是每个普通的比赛日它是否还在原处、信息是否还对得上。赛程每天两次更新，集锦终场后 90 分钟内上线，使用记录自动存好——这些动作重复了八个赛季，也构成了用户愿意把这里当作固定起点的理由。</p>
        <ul class="about-closing__list">
          <li>内容有人负责：三条线分工明确，每条线都有拿得出的交付物</li>
          <li>节奏可预期：赛程与集锦按固定时点推进，不靠临时救火</li>
          <li>版本持续迭代：从赛程列表走到 V2.0，入口一次比一次顺手</li>
        </ul>
        <div class="about-closing__actions">
          <a class="btn btn--pulse" href="/projects/">查看内容栏目</a>
          <a class="btn btn--ghost" href="/support/">前往观赛支持中心</a>
          <a class="btn btn--ghost" href="/reach-us/">联络与合作</a>
        </div>
      </div>
    </div>
  </section>

</main>

.page-about {
  --about-spine: 64px;
  background: var(--bg);
  color: var(--ink);
}

.page-about .about-crumb {
  padding-top: 22px;
  padding-bottom: 14px;
}

/* 首屏 */
.page-about .about-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  padding: 26px 0 48px;
}

.page-about .about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 120px 120px;
  opacity: .28;
  pointer-events: none;
}

.page-about .about-hero::after {
  content: "";
  position: absolute;
  top: -30%;
  right: -38%;
  width: 78%;
  height: 168%;
  background: linear-gradient(155deg, rgba(43, 35, 96, .78), rgba(14, 90, 120, .28) 62%, transparent);
  border-left: 1px solid var(--indigo-line);
  transform: rotate(10deg);
  pointer-events: none;
}

.page-about .about-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 34px;
}

.page-about .about-hero__kicker {
  margin: 0 0 14px;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue);
}

.page-about .about-hero__title {
  margin: 0 0 18px;
  font-size: clamp(2rem, 6.4vw, 4rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.015em;
  max-width: 17ch;
}

.page-about .about-hero__desc {
  margin: 0 0 26px;
  max-width: 54ch;
  font-size: 1rem;
  line-height: 1.68;
  opacity: .9;
}

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

.page-about .about-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-line);
}

.page-about .about-stats__row {
  background: var(--panel);
  padding: 16px 16px 18px;
}

.page-about .about-stats__label {
  display: block;
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 8px;
}

.page-about .about-stats__value {
  display: block;
  margin: 0;
  font-size: clamp(1.3rem, 3.4vw, 1.75rem);
  font-weight: 600;
  color: var(--blue);
  letter-spacing: -.01em;
}

/* 主体两栏 */
.page-about .about-body {
  display: grid;
  gap: 30px;
  padding-top: 40px;
  padding-bottom: 56px;
}

.page-about .about-toc {
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}

.page-about .about-toc__title {
  margin: 0 0 14px;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-about .about-toc__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.page-about .about-toc__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-size: .86rem;
  text-decoration: none;
  transition: color .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease);
}

.page-about .about-toc__num {
  font-size: .74rem;
  color: var(--blue);
  letter-spacing: .08em;
}

.page-about .about-toc__link:hover,
.page-about .about-toc__link:focus-visible {
  color: var(--ink);
  border-color: var(--blue);
}

.page-about .about-toc__link.is-active {
  color: var(--ink);
  border-color: var(--blue);
  box-shadow: inset 2px 0 0 var(--blue);
}

/* 章节 */
.page-about .about-flow > .about-section {
  padding: 38px 0;
  border-top: 1px solid var(--line);
}

.page-about .about-flow > .about-section:first-child {
  border-top: 0;
  padding-top: 6px;
}

.page-about .about-section__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 20px;
}

.page-about .about-section__index {
  flex: 0 0 var(--about-spine);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--blue);
  letter-spacing: .1em;
}

.page-about .about-section__title {
  margin: 0;
  font-size: clamp(1.35rem, 3.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -.01em;
}

.page-about .about-section__body p {
  margin: 0 0 1.1em;
  line-height: 1.68;
  max-width: 66ch;
}

.page-about .about-section__body p:last-child {
  margin-bottom: 0;
}

.page-about .about-lead-p {
  opacity: .92;
}

.page-about .about-note-line {
  color: var(--muted);
  font-size: .92rem;
}

/* 团队分工 */
.page-about .about-split {
  display: grid;
  gap: 28px;
}

.page-about .about-roles {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-about .about-roles__item {
  border: 1px solid var(--line);
  border-left: 2px solid var(--indigo-line);
  background: var(--panel);
  padding: 16px 18px;
  box-shadow: var(--shadow-line);
}

.page-about .about-roles__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.page-about .about-roles__name {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
}

.page-about .about-roles__count {
  font-size: .86rem;
  color: var(--blue);
  letter-spacing: .04em;
  white-space: nowrap;
}

.page-about .about-roles__desc {
  margin: 0;
  font-size: .93rem;
  line-height: 1.62;
  color: var(--muted);
}

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

/* 比赛日流程 */
.page-about .about-flowline {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  border-left: 1px solid var(--line);
}

.page-about .about-flowline__item {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 16px 0 16px 24px;
}

.page-about .about-flowline__item::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 24px;
  width: 7px;
  height: 7px;
  background: var(--blue);
  border-radius: 50%;
}

.page-about .about-flowline__item--hot::before {
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 122, 26, .18);
}

.page-about .about-flowline__time {
  font-size: .82rem;
  letter-spacing: .1em;
  color: var(--amber);
}

.page-about .about-flowline__title {
  margin: 0 0 4px;
  font-size: 1.02rem;
  font-weight: 700;
}

.page-about .about-flowline__text p {
  margin: 0;
  font-size: .93rem;
  line-height: 1.62;
  color: var(--muted);
  max-width: 62ch;
}

/* 版本演进 */
.page-about .about-version-figure {
  margin: 0 0 26px;
}

.page-about .about-versions__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 22px;
}

.page-about .about-versions__tab {
  font-family: var(--font-mono);
  font-size: .84rem;
  letter-spacing: .04em;
  padding: 9px 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease);
}

.page-about .about-versions__tab:hover,
.page-about .about-versions__tab:focus-visible {
  color: var(--ink);
  border-color: var(--blue);
}

.page-about .about-versions__tab[aria-selected="true"] {
  color: var(--ink);
  background: var(--indigo);
  border-color: var(--indigo-line);
}

.page-about .about-version-panel {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 22px 20px;
  box-shadow: var(--shadow-line);
}

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

.page-about .about-version-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.page-about .about-version-panel__title {
  margin: 0;
  font-size: clamp(1.1rem, 2.8vw, 1.5rem);
  font-weight: 800;
}

.page-about .about-version-panel__desc {
  margin: 0 0 16px;
  line-height: 1.68;
  opacity: .92;
  max-width: 64ch;
}

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

.page-about .about-version-panel__list li {
  position: relative;
  padding-left: 20px;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--muted);
}

.page-about .about-version-panel__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 10px;
  height: 1px;
  background: var(--blue);
}

/* 覆盖范围 */
.page-about .about-reach {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 26px;
}

.page-about .about-reach__stat {
  background: var(--panel-deep);
  padding: 18px 16px;
}

.page-about .about-reach__num {
  display: block;
  font-size: clamp(1.35rem, 3.6vw, 1.85rem);
  font-weight: 600;
  color: var(--blue);
  margin-bottom: 6px;
}

.page-about .about-reach__label {
  display: block;
  font-size: .82rem;
  color: var(--muted);
  letter-spacing: .04em;
}

.page-about .about-leagues {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 22px;
  padding: 0;
}

.page-about .about-leagues__item {
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .04em;
  padding: 6px 11px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
}

/* 内容来源 */
.page-about .about-coops {
  display: grid;
  gap: 14px;
  margin: 24px 0;
}

.page-about .about-coop {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 20px 20px 22px;
  box-shadow: var(--shadow-line);
}

.page-about .about-coop__title {
  margin: 14px 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
}

.page-about .about-coop__desc {
  margin: 0;
  font-size: .93rem;
  line-height: 1.64;
  color: var(--muted);
}

.page-about .about-honor {
  border-left: 2px solid var(--amber);
  padding: 4px 0 4px 16px;
  opacity: .92;
}

/* 收尾 */
.page-about .about-closing {
  border-top: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(14, 90, 120, .34), transparent 62%),
    var(--panel-deep);
  padding: 44px 0 56px;
}

.page-about .about-closing__inner {
  display: grid;
  gap: 28px;
}

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

.page-about .about-closing__title {
  margin: 0 0 14px;
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -.01em;
}

.page-about .about-closing__desc {
  margin: 0 0 20px;
  line-height: 1.68;
  max-width: 62ch;
  opacity: .9;
}

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

.page-about .about-closing__list li {
  position: relative;
  padding-left: 22px;
  font-size: .94rem;
  line-height: 1.6;
  color: var(--muted);
}

.page-about .about-closing__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 12px;
  height: 1px;
  background: var(--orange);
}

.page-about .about-closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* 响应式 */
@media (min-width: 700px) {
  .page-about .about-flowline__item {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }

  .page-about .about-flowline__time {
    text-align: right;
    padding-top: 2px;
  }

  .page-about .about-flowline__item::before {
    top: 9px;
  }

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

@media (min-width: 900px) {
  .page-about .about-hero {
    padding: 40px 0 68px;
  }

  .page-about .about-hero::after {
    right: -20%;
    width: 52%;
  }

  .page-about .about-hero__inner {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 56px;
    align-items: end;
  }

  .page-about .about-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }

  .page-about .about-closing__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 48px;
    align-items: center;
  }
}

@media (min-width: 980px) {
  .page-about .about-body {
    grid-template-columns: 218px minmax(0, 1fr);
    gap: 56px;
    padding-top: 52px;
  }

  .page-about .about-toc {
    position: sticky;
    top: 92px;
    align-self: start;
    border-bottom: 0;
    border-left: 1px solid var(--line);
    padding: 0 0 0 16px;
  }

  .page-about .about-toc__list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 2px;
  }

  .page-about .about-toc__link {
    border: 0;
    border-left: 2px solid transparent;
    background: transparent;
    padding: 9px 10px;
    width: 100%;
  }

  .page-about .about-toc__link:hover,
  .page-about .about-toc__link:focus-visible {
    background: var(--panel);
  }

  .page-about .about-toc__link.is-active {
    background: var(--panel);
    border-left-color: var(--blue);
    box-shadow: none;
  }

  .page-about .about-flow > .about-section {
    padding: 46px 0;
  }
}