.page-about {
  --about-line: rgba(159, 179, 209, .18);
  --about-tick: rgba(0, 229, 255, .28);
  background: var(--c-deep);
  color: var(--c-ice);
  font-family: var(--font-sans);
  font-size: var(--step-body);
  line-height: 1.75;
  overflow-x: hidden;
}

.page-about a {
  color: var(--c-cyan);
  text-decoration: none;
}

.page-about a:hover,
.page-about a:focus-visible {
  color: var(--c-cyan-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-about .about-shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.page-about .about-shell--narrow {
  max-width: var(--narrow);
}

/* ---------- 面包屑 ---------- */

.page-about .about-crumb {
  border-bottom: 2px solid var(--about-line);
  background: var(--c-night);
}

.page-about .about-crumb ol {
  list-style: none;
  margin: 0;
  padding: 12px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  letter-spacing: .08em;
  color: var(--c-mist);
}

.page-about .about-crumb li + li::before {
  content: "/";
  margin-right: 8px;
  color: rgba(159, 179, 209, .45);
}

.page-about .about-crumb li[aria-current="page"] {
  color: var(--c-cyan);
}

/* ---------- 首屏 ---------- */

.page-about .about-hero {
  border-bottom: 2px solid var(--about-line);
}

.page-about .about-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 4vw, 44px);
  padding-top: clamp(24px, 4.5vw, 52px);
  padding-bottom: clamp(28px, 5vw, 60px);
}

.page-about .about-eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-orange);
}

.page-about .about-hero__title {
  margin: 0;
  font-size: var(--step-h1);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: .01em;
  transform: skewX(-1.5deg);
}

.page-about .about-hero__kicker {
  margin: 12px 0 0;
  font-size: var(--step-h3);
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-cyan-soft);
}

.page-about .about-hero__anchor {
  margin-top: clamp(26px, 5vw, 52px);
  display: flex;
  align-items: center;
  gap: 16px;
  border-left: 6px solid var(--c-orange);
  padding-left: 16px;
}

.page-about .about-hero__year {
  font-family: var(--font-mono);
  font-size: clamp(3rem, 11vw, 5.25rem);
  font-weight: 700;
  line-height: .92;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  transform: skewX(-2deg);
  color: var(--c-ice);
}

.page-about .about-hero__year-label {
  font-size: var(--step-sm);
  line-height: 1.5;
  color: var(--c-mist);
}

.page-about .about-hero__body p {
  margin: 0 0 16px;
  font-size: var(--step-body);
  max-width: 30em;
}

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

.page-about .about-hero__media {
  margin: 0;
  border-top: 2px solid var(--about-tick);
  background: var(--c-night);
}

.page-about .about-hero__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 章节骨架 ---------- */

.page-about .about-section {
  border-bottom: 2px solid var(--about-line);
  padding-block: clamp(40px, 7vw, 88px);
}

.page-about .about-section--tight {
  padding-block: clamp(28px, 5vw, 56px);
}

.page-about .about-section--night {
  background: var(--c-night);
}

.page-about .about-section--steel {
  background: var(--c-steel);
}

.page-about .about-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: clamp(20px, 3vw, 32px);
}

.page-about .about-index {
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  letter-spacing: .14em;
  color: var(--c-orange);
  border-bottom: 2px solid var(--c-orange);
  padding-bottom: 2px;
}

.page-about .about-h2 {
  margin: 0;
  font-size: var(--step-h2);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: .005em;
  transform: skewX(-1deg);
}

.page-about .about-lede {
  margin: 0 0 20px;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.7;
  color: var(--c-ice);
  max-width: 34em;
}

.page-about .about-body p {
  margin: 0 0 18px;
  max-width: 38em;
}

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

.page-about .about-body--tight {
  margin-top: clamp(22px, 3vw, 34px);
}

.page-about .about-inline-link {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: .06em;
}

/* ---------- 三列文字建筑 ---------- */

.page-about .about-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
}

.page-about .about-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: start;
}

.page-about .about-tags .tag {
  display: inline-block;
  padding: 5px 12px;
  border: 2px solid var(--c-orange);
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  letter-spacing: .1em;
  color: var(--c-orange-soft);
  background: rgba(255, 107, 26, .08);
}

/* ---------- 六道工序 ---------- */

.page-about .about-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  counter-reset: step;
}

.page-about .about-step {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 16px 16px 0;
  border-top: 2px solid var(--about-line);
}

.page-about .about-step:last-child {
  border-bottom: 2px solid var(--about-line);
}

.page-about .about-step--key {
  background: rgba(0, 229, 255, .05);
  border-left: 4px solid var(--c-cyan);
  padding-left: 14px;
}

.page-about .about-step__no {
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  letter-spacing: .12em;
  color: var(--c-cyan);
  padding-top: 4px;
}

.page-about .about-step--key .about-step__no {
  color: var(--c-orange);
}

.page-about .about-step__title {
  margin: 0 0 4px;
  font-size: var(--step-h3);
  font-weight: 700;
  line-height: 1.3;
}

.page-about .about-step p {
  margin: 0;
  font-size: var(--step-sm);
  color: var(--c-mist);
  max-width: 34em;
}

.page-about .about-side-media {
  margin: 0;
  align-self: start;
  border: 2px solid var(--about-tick);
  box-shadow: var(--shadow-hard);
  background: var(--c-night);
}

.page-about .about-side-media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 团队条形 ---------- */

.page-about .about-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(20px, 3vw, 30px);
}

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

.page-about .about-bar__label {
  font-size: var(--step-h3);
  font-weight: 700;
}

.page-about .about-bar__value {
  font-family: var(--font-mono);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--c-cyan);
}

.page-about .about-bar__track {
  height: 14px;
  border: 2px solid var(--about-tick);
  background: rgba(7, 23, 51, .8);
  overflow: hidden;
}

.page-about .about-bar__fill {
  display: block;
  height: 100%;
}

.page-about .about-bar__fill--cyan {
  background: linear-gradient(90deg, var(--c-cyan), var(--c-cyan-soft));
}

.page-about .about-bar__fill--orange {
  background: linear-gradient(90deg, var(--c-orange), var(--c-orange-soft));
}

.page-about .about-bar__fill--soft {
  background: linear-gradient(90deg, rgba(159, 179, 209, .85), rgba(159, 179, 209, .4));
}

.page-about .about-bar__desc {
  margin: 10px 0 0;
  font-size: var(--step-sm);
  color: var(--c-mist);
  max-width: 36em;
}

/* ---------- 合作点阵 ---------- */

.page-about .about-partners {
  margin-top: clamp(28px, 4vw, 44px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 32px);
}

.page-about .about-partners__caption {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: .1em;
  color: var(--c-mist);
}

.page-about .about-partners__caption .num {
  color: var(--c-ice);
  font-size: var(--step-h3);
  font-weight: 700;
  margin-right: 4px;
  font-variant-numeric: tabular-nums;
}

.page-about .about-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 320px;
}

.page-about .about-dots i {
  display: block;
  width: 12px;
  height: 12px;
}

.page-about .about-dots--data i {
  background: var(--c-cyan);
  box-shadow: 2px 2px 0 rgba(2, 8, 20, .5);
}

.page-about .about-dots--content i {
  background: var(--c-orange);
  box-shadow: 2px 2px 0 rgba(2, 8, 20, .5);
}

/* ---------- 时间轴 ---------- */

.page-about .about-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.page-about .about-timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 24px;
  width: 2px;
  background: linear-gradient(180deg, var(--c-cyan) 0%, rgba(0, 229, 255, .5) 55%, rgba(0, 229, 255, .12) 100%);
}

.page-about .about-timeline__item {
  position: relative;
  padding: 0 0 30px 34px;
}

.page-about .about-timeline__item:last-child {
  padding-bottom: 0;
}

.page-about .about-timeline__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 16px;
  height: 16px;
  background: var(--c-cyan);
  box-shadow: 4px 4px 0 rgba(2, 8, 20, .5);
}

.page-about .about-timeline__item--latest::before {
  background: var(--c-orange);
}

.page-about .about-timeline__year {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  letter-spacing: .16em;
  font-variant-numeric: tabular-nums;
  color: var(--c-cyan);
  line-height: 1;
  margin-bottom: 8px;
}

.page-about .about-timeline__item--latest .about-timeline__year {
  color: var(--c-orange);
}

.page-about .about-timeline__title {
  margin: 0 0 6px;
  font-size: var(--step-h3);
  font-weight: 700;
  line-height: 1.3;
}

.page-about .about-timeline__item p {
  margin: 0;
  font-size: var(--step-sm);
  color: var(--c-mist);
  max-width: 36em;
}

/* ---------- 使用规模 ---------- */

.page-about .about-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  border-top: 2px solid var(--about-line);
}

.page-about .about-stat {
  display: grid;
  gap: 6px;
  padding: 20px 0;
  border-bottom: 2px solid var(--about-line);
}

.page-about .about-stat__num {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
  color: var(--c-ice);
  transform: skewX(-1.5deg);
}

.page-about .about-stat__unit {
  font-size: .42em;
  letter-spacing: .1em;
  margin-left: .25em;
  color: var(--c-orange);
  transform: none;
  display: inline-block;
}

.page-about .about-stat__label {
  font-size: var(--step-sm);
  color: var(--c-mist);
}

/* ---------- 收束 ---------- */

.page-about .about-outro {
  padding-block: clamp(44px, 8vw, 104px) clamp(56px, 9vw, 120px);
}

.page-about .about-outro__text {
  margin: 18px 0 0;
  max-width: 34em;
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
}

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

.page-about .about-outro .btn {
  display: inline-block;
  padding: 12px 22px;
  font-size: var(--step-sm);
  font-weight: 700;
  letter-spacing: .04em;
  border: 2px solid var(--c-cyan);
  text-decoration: none;
}

.page-about .about-outro .btn--solid {
  background: var(--c-cyan);
  color: var(--c-night);
  box-shadow: 6px 6px 0 rgba(2, 8, 20, .45);
}

.page-about .about-outro .btn--solid:hover,
.page-about .about-outro .btn--solid:focus-visible {
  background: var(--c-cyan-soft);
  color: var(--c-night);
  text-decoration: none;
}

.page-about .about-outro .btn--ghost {
  color: var(--c-cyan);
  background: transparent;
}

.page-about .about-outro .btn--ghost:hover,
.page-about .about-outro .btn--ghost:focus-visible {
  background: rgba(0, 229, 255, .12);
  color: var(--c-cyan-soft);
  text-decoration: none;
}

/* ---------- 显现 ---------- */

.page-about [data-reveal] {
  opacity: 1;
}

.js-reveal .page-about [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}

.js-reveal .page-about [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- 断点 ---------- */

@media (min-width: 640px) {
  .page-about .about-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 4vw, 56px);
  }

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

@media (min-width: 900px) {
  .page-about .about-hero__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: end;
    column-gap: clamp(32px, 6vw, 96px);
  }

  .page-about .about-hero__body {
    padding-bottom: 6px;
  }

  .page-about .about-cols {
    grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr);
    column-gap: clamp(28px, 4vw, 52px);
  }

  .page-about .about-cols--process {
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
    align-items: start;
  }

  .page-about .about-cols--process .about-side-media {
    position: sticky;
    top: 96px;
  }

  .page-about .about-range-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 3fr);
  }

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

  .page-about .about-stat {
    padding: 26px 18px 26px 0;
  }
}

@media (min-width: 1180px) {
  .page-about .about-hero__year {
    font-size: 5.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about [data-reveal],
  .js-reveal .page-about [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
</style>
<<<END>>>
Need to check the output format. The instructions say output markers in order:  ...  ... The last CSS I wrote ended with `</style>` and `<<<END>>>` which is wrong — I must not include `</style>` and the END marker. Let me correct: end with the CSS only. Also I should double check the CSS for the extra media query referencing `.about-range-grid` which doesn't exist in HTML — remove or ignore. Let me remove that rule.

Also I put `<a>` tags inside paragraphs inside sections; fine.

Let me re-output cleanly.
<main id="main-content" class="page-about">

  <nav class="about-crumb" aria-label="面包屑导航">
    <div class="about-shell">
      <ol>
        <li><a href="/">首页</a></li>
        <li aria-current="page">平台介绍</li>
      </ol>
    </div>
  </nav>

  <section class="about-hero" aria-labelledby="about-hero-title">
    <div class="about-shell about-hero__grid">
      <div class="about-hero__lead" data-reveal>
        <p class="about-eyebrow">平台介绍</p>
        <h1 class="about-hero__title" id="about-hero-title">关于九游体育</h1>
        <p class="about-hero__kicker">从一条检索轨道，到 186 个联赛专题</p>
        <div class="about-hero__anchor">
          <span class="about-hero__year num">2016</span>
          <span class="about-hero__year-label">起持续运营<br>主站与拼音索引共用同一套页面地址</span>
        </div>
      </div>
      <div class="about-hero__body" data-reveal>
        <p>一支 68 人的团队在维护这些内容：41 位编辑与数据核对人员把赛事名称、球队名和历史记录对齐，17 位前端与工程人员负责让页面在两三步之内打开，10 位专题策划负责把一场比赛的来龙去脉讲清楚。</p>
        <p>你要查的东西固定在页面顶部就能找到——输入赛事名称、球队名、联赛简称或者拼音首字母，都能直接落到对应的联赛专题。想长期跟一项赛事的人，通常收藏 7 个常用页面就够了，收藏上限是 30 个。</p>
      </div>
    </div>
    <figure class="about-hero__media">
      <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="深蓝底色上叠加浅青色细线网格的归档纹理，呈现长年积累的内容层次">
    </figure>
  </section>

  <section class="about-section" aria-labelledby="about-what">
    <div class="about-shell">
      <header class="about-head" data-reveal>
        <span class="about-index num">01</span>
        <h2 class="about-h2" id="about-what">从想看，到看到</h2>
      </header>
      <div class="about-cols">
        <p class="about-lede" data-reveal>关注一项赛事的人，赛前想知道谁伤停、上一次交手什么结果，赛中想看到比分和积分怎么动，赛后想回头读一段战术拆解。九游体育把这些放进同一个联赛专题，板块位置固定，换一个联赛也不用重新找。</p>
        <div class="about-body" data-reveal>
          <p>每条专题固定提供四块内容：积分榜、赛程、伤停名单、历史交锋。点开就是你要的那一块，不用在几个入口之间来回跳。专题页支持一键切换到相邻联赛，切过去之后板块位置保持不变，习惯不用重新建立。</p>
          <p>用得越久，路径越短。把常看的页面收藏下来之后，从检索到数据面板的点击次数由 4 次降到 2 次。收藏按钮固定在视口边缘，换页面时位置不变，手指记得住。</p>
          <p class="about-inline-link"><a href="/product/">打开联赛专题与数据面板 &rarr;</a></p>
        </div>
        <ul class="about-tags" data-reveal>
          <li class="tag tag--accent">积分榜</li>
          <li class="tag tag--accent">赛程</li>
          <li class="tag tag--accent">伤停名单</li>
          <li class="tag tag--accent">历史交锋</li>
        </ul>
      </div>
    </div>
  </section>

  <section class="about-section about-section--night" aria-labelledby="about-process">
    <div class="about-shell">
      <header class="about-head" data-reveal>
        <span class="about-index num">02</span>
        <h2 class="about-h2" id="about-process">一条内容从哪来</h2>
      </header>
      <div class="about-cols about-cols--process">
        <p class="about-lede" data-reveal>一个专题页面看着只是几行数字，背后要走完六道工序才会出现在你面前。这六步在赛季密集期照样不省，因为省下来的是别人对页面的信任。</p>
        <ol class="about-steps" data-reveal>
          <li class="about-step">
            <span class="about-step__no num">01</span>
            <div>
              <h3 class="about-step__title">数据接收</h3>
              <p>26 家赛事数据机构把赛程、比分与积分变动送进来，按运动大类和赛事先行归档。</p>
            </div>
          </li>
          <li class="about-step">
            <span class="about-step__no num">02</span>
            <div>
              <h3 class="about-step__title">名称对齐</h3>
              <p>同一支球队在不同来源里的写法并不一样，先把赛事名称与球队名统一成站内的固定写法。</p>
            </div>
          </li>
          <li class="about-step">
            <span class="about-step__no num">03</span>
            <div>
              <h3 class="about-step__title">板块落位</h3>
              <p>积分榜、赛程、伤停名单、历史交锋四个板块分别填充，各自归位、互不串位。</p>
            </div>
          </li>
          <li class="about-step about-step--key">
            <span class="about-step__no num">04</span>
            <div>
              <h3 class="about-step__title">编辑复核</h3>
              <p>41 位编辑与数据核对人员逐条确认，比分、日期、排名都要对得上才放行。</p>
            </div>
          </li>
          <li class="about-step">
            <span class="about-step__no num">05</span>
            <div>
              <h3 class="about-step__title">索引登记</h3>
              <p>新页面按拼音首字母登记进导航，下次想找的时候按字母就能找回来。</p>
            </div>
          </li>
          <li class="about-step">
            <span class="about-step__no num">06</span>
            <div>
              <h3 class="about-step__title">上线复查</h3>
              <p>页面发布之后再看一遍，确认板块位置、相邻联赛跳转和链接都没因为更新而改变。</p>
            </div>
          </li>
        </ol>
        <figure class="about-side-media" data-reveal>
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="电光青节点依次连接的抽象工序示意图，橙色方块标出其中的复核环节" loading="lazy" decoding="async">
        </figure>
      </div>
    </div>
  </section>

  <section class="about-section" aria-labelledby="about-team">
    <div class="about-shell">
      <header class="about-head" data-reveal>
        <span class="about-index num">03</span>
        <h2 class="about-h2" id="about-team">68 个人，每天 60 到 80 条</h2>
      </header>
      <p class="about-lede" data-reveal>内容团队一共 68 人，分成三个方向。平常每天新增 60 到 80 条条目，赛季密集期会到 140 条，三个方向按周排班衔接，不让某一段更新断掉。</p>
      <ul class="about-bars" data-reveal>
        <li class="about-bar">
          <div class="about-bar__head">
            <span class="about-bar__label">编辑与数据核对</span>
            <span class="about-bar__value num">41</span>
          </div>
          <div class="about-bar__track"><span class="about-bar__fill about-bar__fill--cyan" style="width:60%"></span></div>
          <p class="about-bar__desc">专题板块的日常填充、赛事名称与历史记录对齐、上线前的逐条确认。</p>
        </li>
        <li class="about-bar">
          <div class="about-bar__head">
            <span class="about-bar__label">前端与工程</span>
            <span class="about-bar__value num">17</span>
          </div>
          <div class="about-bar__track"><span class="about-bar__fill about-bar__fill--orange" style="width:25%"></span></div>
          <p class="about-bar__desc">页面加载、检索建议、数据面板的刷新频率与视图切换。</p>
        </li>
        <li class="about-bar">
          <div class="about-bar__head">
            <span class="about-bar__label">专题策划</span>
            <span class="about-bar__value num">10</span>
          </div>
          <div class="about-bar__track"><span class="about-bar__fill about-bar__fill--soft" style="width:15%"></span></div>
          <p class="about-bar__desc">赛事选题、板块结构设计，以及整个赛季的更新排期。</p>
        </li>
      </ul>
      <p class="about-body about-body--tight" data-reveal>团队人数和排班方式，直接决定了赛季密集期专题能不能按时更新。一个联赛的周末赛程结束之后的几个小时内，积分榜和赛程是同步动的，不是隔天补。</p>
    </div>
  </section>

  <section class="about-section about-section--steel" aria-labelledby="about-range">
    <div class="about-shell">
      <header class="about-head" data-reveal>
        <span class="about-index num">04</span>
        <h2 class="about-h2" id="about-range">12 个运动大类，46 个细分栏目</h2>
      </header>
      <div class="about-cols">
        <p class="about-lede" data-reveal>从每年反复进行的联赛，到赛季时间错开的项目，都能找到对应的栏目入口。同一个运动大类里的不同联赛各自有独立栏目，赛季重叠的时候也各自按自己的节奏更新。</p>
        <div class="about-body" data-reveal>
          <p>累计上线的联赛专题有 186 个，覆盖 12 个运动大类与 46 个细分赛事栏目。数据面板每 90 秒刷新一轮比分与积分，历史数据可以回溯到 2016 赛季，早期赛季的完整度约 85%。</p>
          <p>除了联赛专题和数据面板，站内还有专家专栏与赛事动态两个内容方向。34 位签约撰稿人长期供稿，方向覆盖战术拆解、数据建模、伤病与体能、青训观察、装备与规则——看完比分之后想再往深里读一层，站内就有。</p>
        </div>
        <figure class="about-side-media about-side-media--narrow" data-reveal>
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="由中心向外扩散的抽象连线网络图，深色背景上的青色与橙色节点代表长期供稿关系" loading="lazy" decoding="async">
        </figure>
      </div>
      <div class="about-partners" data-reveal>
        <div class="about-partners__group">
          <p class="about-partners__caption"><span class="num">26</span> 家赛事数据机构</p>
          <div class="about-dots about-dots--data" aria-hidden="true">
            <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
            <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
          </div>
        </div>
        <div class="about-partners__group">
          <p class="about-partners__caption"><span class="num">12</span> 家内容合作方</p>
          <div class="about-dots about-dots--content" aria-hidden="true">
            <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
          </div>
        </div>
      </div>
      <p class="about-inline-link" data-reveal><a href="/press/">看看本周更新的专栏与动态 &rarr;</a></p>
    </div>
  </section>

  <section class="about-section" aria-labelledby="about-timeline">
    <div class="about-shell">
      <header class="about-head" data-reveal>
        <span class="about-index num">05</span>
        <h2 class="about-h2" id="about-timeline">每一个节点，解决一个具体问题</h2>
      </header>
      <ol class="about-timeline" data-reveal>
        <li class="about-timeline__item">
          <span class="about-timeline__year num">2016</span>
          <h3 class="about-timeline__title">第一批联赛专题上线</h3>
          <p>主站与拼音索引共用同一套页面地址，同一个入口既能读内容也能按字母找页面。</p>
        </li>
        <li class="about-timeline__item">
          <span class="about-timeline__year num">2019</span>
          <h3 class="about-timeline__title">拼音导航上线</h3>
          <p>按 A–Z 首字母分组收录 1,240 个页面与数据面板入口，记得住名字就能直接跳过去。</p>
        </li>
        <li class="about-timeline__item">
          <span class="about-timeline__year num">2022</span>
          <h3 class="about-timeline__title">数据面板上线</h3>
          <p>比分与积分每 90 秒刷新一轮，同时提供悬浮玻璃卡片视图与紧凑表格视图。</p>
        </li>
        <li class="about-timeline__item">
          <span class="about-timeline__year num">2023</span>
          <h3 class="about-timeline__title">可访问性改造完成</h3>
          <p>正文与背景对比度不低于 7:1，字号三档切换与键盘可达性提示补齐，长时间阅读更省力。</p>
        </li>
        <li class="about-timeline__item about-timeline__item--latest">
          <span class="about-timeline__year num">2024</span>
          <h3 class="about-timeline__title">浏览器简体版 4.x 系列发布</h3>
          <p>针对固定查阅场景做了裁剪，首屏在两次资源请求内完成渲染，比完整功能版本快约 40%。当前主版本为 4.2，单页样式与脚本合计约 180KB。</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="about-section about-section--night" aria-labelledby="about-stable">
    <div class="about-shell about-shell--narrow">
      <header class="about-head" data-reveal>
        <span class="about-index num">06</span>
        <h2 class="about-h2" id="about-stable">地址不变，索引每周过一遍</h2>
      </header>
      <div class="about-body" data-reveal>
        <p>收藏一个页面、在报道里放一条链接，最怕的是过一阵子点开变成别的东西。专题页的固定链接长期有效，板块调整不改地址——加内容、换板块位置，原来那条链接还是通向同一个联赛。</p>
        <p>拼音索引每周三做一次全量校对，每月对专题板块做一次结构复核。搜错字的时候也不会直接把门关上，站内检索对输入错误提供同音与近似词提示，覆盖常见错别字 3,000 余组。</p>
        <p>引用方需要的正是这种可预期。<a href="/feedback/">需要长期稳定的专题链接，或者发现内容要更正，可以直接联系我们</a>。</p>
      </div>
    </div>
  </section>

  <section class="about-section" aria-labelledby="about-scale">
    <div class="about-shell">
      <header class="about-head" data-reveal>
        <span class="about-index num">07</span>
        <h2 class="about-h2" id="about-scale">被用到什么程度</h2>
      </header>
      <ul class="about-stats" data-reveal>
        <li class="about-stat">
          <span class="about-stat__num num">470<span class="about-stat__unit">万次</span></span>
          <span class="about-stat__label">近一年站内检索月均请求量</span>
        </li>
        <li class="about-stat">
          <span class="about-stat__num num">1<span class="about-stat__unit">分 40 秒</span></span>
          <span class="about-stat__label">检索结果页平均停留时长</span>
        </li>
        <li class="about-stat">
          <span class="about-stat__num num">62<span class="about-stat__unit">%</span></span>
          <span class="about-stat__label">浏览器简体版用户通过收藏入口直接进入固定页面</span>
        </li>
        <li class="about-stat">
          <span class="about-stat__num num">400<span class="about-stat__unit">余家</span></span>
          <span class="about-stat__label">媒体与自媒体在赛季报道中引用过站内联赛专题</span>
        </li>
      </ul>
      <p class="about-body about-body--tight" data-reveal>近三年获得内容与数据类行业奖项 9 项，其中专题策划类 4 项。奖项不是重点，重点是从 2016 年到现在，这套专题结构一路在原来的地址上长内容，没有被推倒重来过。</p>
    </div>
  </section>

  <section class="about-outro" aria-labelledby="about-outro-title">
    <div class="about-shell about-shell--narrow">
      <h2 class="about-h2" id="about-outro-title">下一步从哪开始</h2>
      <p class="about-outro__text" data-reveal>想知道你关心的联赛在站内长什么样，直接去联赛专题与数据面板挑一个打开；第一次用的话，使用帮助里写了检索的四种写法和拼音导航的用法，几分钟就能上手。</p>
      <p class="about-outro__actions" data-reveal>
        <a class="btn btn--solid" href="/product/">进入数据面板</a>
        <a class="btn btn--ghost" href="/support/">查看使用帮助</a>
      </p>
    </div>
  </section>

</main>

.page-about {
  --about-line: rgba(159, 179, 209, .18);
  --about-tick: rgba(0, 229, 255, .28);
  background: var(--c-deep);
  color: var(--c-ice);
  font-family: var(--font-sans);
  font-size: var(--step-body);
  line-height: 1.75;
  overflow-x: hidden;
}

.page-about a {
  color: var(--c-cyan);
  text-decoration: none;
}

.page-about a:hover,
.page-about a:focus-visible {
  color: var(--c-cyan-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-about .about-shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.page-about .about-shell--narrow {
  max-width: var(--narrow);
}

.page-about .about-crumb {
  border-bottom: 2px solid var(--about-line);
  background: var(--c-night);
}

.page-about .about-crumb ol {
  list-style: none;
  margin: 0;
  padding: 12px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  letter-spacing: .08em;
  color: var(--c-mist);
}

.page-about .about-crumb li + li::before {
  content: "/";
  margin-right: 8px;
  color: rgba(159, 179, 209, .45);
}

.page-about .about-crumb li[aria-current="page"] {
  color: var(--c-cyan);
}

.page-about .about-hero {
  border-bottom: 2px solid var(--about-line);
}

.page-about .about-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 4vw, 44px);
  padding-top: clamp(24px, 4.5vw, 52px);
  padding-bottom: clamp(28px, 5vw, 60px);
}

.page-about .about-eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-orange);
}

.page-about .about-hero__title {
  margin: 0;
  font-size: var(--step-h1);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: .01em;
  transform: skewX(-1.5deg);
}

.page-about .about-hero__kicker {
  margin: 12px 0 0;
  font-size: var(--step-h3);
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-cyan-soft);
}

.page-about .about-hero__anchor {
  margin-top: clamp(26px, 5vw, 52px);
  display: flex;
  align-items: center;
  gap: 16px;
  border-left: 6px solid var(--c-orange);
  padding-left: 16px;
}

.page-about .about-hero__year {
  font-family: var(--font-mono);
  font-size: clamp(3rem, 11vw, 5.25rem);
  font-weight: 700;
  line-height: .92;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  transform: skewX(-2deg);
  color: var(--c-ice);
}

.page-about .about-hero__year-label {
  font-size: var(--step-sm);
  line-height: 1.5;
  color: var(--c-mist);
}

.page-about .about-hero__body p {
  margin: 0 0 16px;
  font-size: var(--step-body);
  max-width: 30em;
}

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

.page-about .about-hero__media {
  margin: 0;
  border-top: 2px solid var(--about-tick);
  background: var(--c-night);
}

.page-about .about-hero__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-about .about-section {
  border-bottom: 2px solid var(--about-line);
  padding-block: clamp(40px, 7vw, 88px);
}

.page-about .about-section--night {
  background: var(--c-night);
}

.page-about .about-section--steel {
  background: var(--c-steel);
}

.page-about .about-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: clamp(20px, 3vw, 32px);
}

.page-about .about-index {
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  letter-spacing: .14em;
  color: var(--c-orange);
  border-bottom: 2px solid var(--c-orange);
  padding-bottom: 2px;
}

.page-about .about-h2 {
  margin: 0;
  font-size: var(--step-h2);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: .005em;
  transform: skewX(-1deg);
}

.page-about .about-lede {
  margin: 0 0 20px;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.7;
  color: var(--c-ice);
  max-width: 34em;
}

.page-about .about-body p {
  margin: 0 0 18px;
  max-width: 38em;
}

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

.page-about .about-body--tight {
  margin-top: clamp(22px, 3vw, 34px);
}

.page-about .about-inline-link {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: .06em;
}

.page-about .about-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
}

.page-about .about-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: start;
}

.page-about .about-tags .tag {
  display: inline-block;
  padding: 5px 12px;
  border: 2px solid var(--c-orange);
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  letter-spacing: .1em;
  color: var(--c-orange-soft);
  background: rgba(255, 107, 26, .08);
}

.page-about .about-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.page-about .about-step {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 16px 16px 0;
  border-top: 2px solid var(--about-line);
}

.page-about .about-step:last-child {
  border-bottom: 2px solid var(--about-line);
}

.page-about .about-step--key {
  background: rgba(0, 229, 255, .05);
  border-left: 4px solid var(--c-cyan);
  padding-left: 14px;
}

.page-about .about-step__no {
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  letter-spacing: .12em;
  color: var(--c-cyan);
  padding-top: 4px;
}

.page-about .about-step--key .about-step__no {
  color: var(--c-orange);
}

.page-about .about-step__title {
  margin: 0 0 4px;
  font-size: var(--step-h3);
  font-weight: 700;
  line-height: 1.3;
}

.page-about .about-step p {
  margin: 0;
  font-size: var(--step-sm);
  color: var(--c-mist);
  max-width: 34em;
}

.page-about .about-side-media {
  margin: 0;
  align-self: start;
  border: 2px solid var(--about-tick);
  box-shadow: var(--shadow-hard);
  background: var(--c-night);
}

.page-about .about-side-media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-about .about-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(20px, 3vw, 30px);
}

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

.page-about .about-bar__label {
  font-size: var(--step-h3);
  font-weight: 700;
}

.page-about .about-bar__value {
  font-family: var(--font-mono);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--c-cyan);
}

.page-about .about-bar__track {
  height: 14px;
  border: 2px solid var(--about-tick);
  background: rgba(7, 23, 51, .8);
  overflow: hidden;
}

.page-about .about-bar__fill {
  display: block;
  height: 100%;
}

.page-about .about-bar__fill--cyan {
  background: linear-gradient(90deg, var(--c-cyan), var(--c-cyan-soft));
}

.page-about .about-bar__fill--orange {
  background: linear-gradient(90deg, var(--c-orange), var(--c-orange-soft));
}

.page-about .about-bar__fill--soft {
  background: linear-gradient(90deg, rgba(159, 179, 209, .85), rgba(159, 179, 209, .4));
}

.page-about .about-bar__desc {
  margin: 10px 0 0;
  font-size: var(--step-sm);
  color: var(--c-mist);
  max-width: 36em;
}

.page-about .about-partners {
  margin-top: clamp(28px, 4vw, 44px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 32px);
}

.page-about .about-partners__caption {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: .1em;
  color: var(--c-mist);
}

.page-about .about-partners__caption .num {
  color: var(--c-ice);
  font-size: var(--step-h3);
  font-weight: 700;
  margin-right: 4px;
  font-variant-numeric: tabular-nums;
}

.page-about .about-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 320px;
}

.page-about .about-dots i {
  display: block;
  width: 12px;
  height: 12px;
}

.page-about .about-dots--data i {
  background: var(--c-cyan);
  box-shadow: 2px 2px 0 rgba(2, 8, 20, .5);
}

.page-about .about-dots--content i {
  background: var(--c-orange);
  box-shadow: 2px 2px 0 rgba(2, 8, 20, .5);
}

.page-about .about-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.page-about .about-timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 24px;
  width: 2px;
  background: linear-gradient(180deg, var(--c-cyan) 0%, rgba(0, 229, 255, .5) 55%, rgba(0, 229, 255, .12) 100%);
}

.page-about .about-timeline__item {
  position: relative;
  padding: 0 0 30px 34px;
}

.page-about .about-timeline__item:last-child {
  padding-bottom: 0;
}

.page-about .about-timeline__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 16px;
  height: 16px;
  background: var(--c-cyan);
  box-shadow: 4px 4px 0 rgba(2, 8, 20, .5);
}

.page-about .about-timeline__item--latest::before {
  background: var(--c-orange);
}

.page-about .about-timeline__year {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  letter-spacing: .16em;
  font-variant-numeric: tabular-nums;
  color: var(--c-cyan);
  line-height: 1;
  margin-bottom: 8px;
}

.page-about .about-timeline__item--latest .about-timeline__year {
  color: var(--c-orange);
}

.page-about .about-timeline__title {
  margin: 0 0 6px;
  font-size: var(--step-h3);
  font-weight: 700;
  line-height: 1.3;
}

.page-about .about-timeline__item p {
  margin: 0;
  font-size: var(--step-sm);
  color: var(--c-mist);
  max-width: 36em;
}

.page-about .about-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  border-top: 2px solid var(--about-line);
}

.page-about .about-stat {
  display: grid;
  gap: 6px;
  padding: 20px 0;
  border-bottom: 2px solid var(--about-line);
}

.page-about .about-stat__num {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
  color: var(--c-ice);
  transform: skewX(-1.5deg);
}

.page-about .about-stat__unit {
  display: inline-block;
  font-size: .42em;
  letter-spacing: .1em;
  margin-left: .25em;
  color: var(--c-orange);
  transform: none;
}

.page-about .about-stat__label {
  font-size: var(--step-sm);
  color: var(--c-mist);
}

.page-about .about-outro {
  padding-block: clamp(44px, 8vw, 104px) clamp(56px, 9vw, 120px);
}

.page-about .about-outro__text {
  margin: 18px 0 0;
  max-width: 34em;
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
}

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

.page-about .about-outro .btn {
  display: inline-block;
  padding: 12px 22px;
  font-size: var(--step-sm);
  font-weight: 700;
  letter-spacing: .04em;
  border: 2px solid var(--c-cyan);
  text-decoration: none;
}

.page-about .about-outro .btn--solid {
  background: var(--c-cyan);
  color: var(--c-night);
  box-shadow: 6px 6px 0 rgba(2, 8, 20, .45);
}

.page-about .about-outro .btn--solid:hover,
.page-about .about-outro .btn--solid:focus-visible {
  background: var(--c-cyan-soft);
  color: var(--c-night);
  text-decoration: none;
}

.page-about .about-outro .btn--ghost {
  color: var(--c-cyan);
  background: transparent;
}

.page-about .about-outro .btn--ghost:hover,
.page-about .about-outro .btn--ghost:focus-visible {
  background: rgba(0, 229, 255, .12);
  color: var(--c-cyan-soft);
  text-decoration: none;
}

.page-about [data-reveal] {
  opacity: 1;
}

.js-reveal .page-about [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}

.js-reveal .page-about [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (min-width: 640px) {
  .page-about .about-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 4vw, 56px);
  }

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

@media (min-width: 900px) {
  .page-about .about-hero__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: end;
    column-gap: clamp(32px, 6vw, 96px);
  }

  .page-about .about-hero__body {
    padding-bottom: 6px;
  }

  .page-about .about-cols {
    grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr);
    column-gap: clamp(28px, 4vw, 52px);
  }

  .page-about .about-cols--process {
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
    align-items: start;
  }

  .page-about .about-cols--process .about-side-media {
    position: sticky;
    top: 96px;
  }

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

  .page-about .about-stat {
    padding: 26px 18px 26px 0;
  }
}

@media (min-width: 1180px) {
  .page-about .about-hero__year {
    font-size: 5.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about [data-reveal],
  .js-reveal .page-about [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}