.page-about {
  --about-rail: 210px;
  background-color: var(--ink-900);
  color: var(--fog);
  padding-bottom: clamp(40px, 7vw, 88px);
}

.page-about .about-crumb {
  padding-top: clamp(18px, 3vw, 30px);
  padding-bottom: clamp(10px, 2vw, 18px);
}

/* ---------- 章节骨架 ---------- */
.page-about .about-chapter {
  border-top: 1px solid var(--rule);
  padding-block: clamp(36px, 6vw, 76px);
}

.page-about .about-chapter--first {
  border-top: 0;
  padding-top: clamp(20px, 4vw, 44px);
}

.page-about .about-chapter__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.page-about .about-chapter__body {
  min-width: 0;
}

/* ---------- 大编号脊线 ---------- */
.page-about .about-num {
  display: block;
  font-family: var(--font-num);
  font-weight: 600;
  font-size: clamp(52px, 11vw, 112px);
  line-height: 0.82;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: transparent;
  -webkit-text-stroke: 1px var(--rule);
  transition: -webkit-text-stroke-color 300ms var(--ease), color 300ms var(--ease);
}

@supports not (-webkit-text-stroke: 1px #000000) {
  .page-about .about-num {
    color: var(--ink-700);
  }
}

.page-about .about-chapter:target .about-num {
  -webkit-text-stroke-color: var(--signal);
  color: transparent;
}

.page-about .about-tag {
  display: block;
  margin-top: 12px;
  padding-left: 10px;
  border-left: 2px solid var(--rule);
  color: var(--fog-dim);
  letter-spacing: 0.14em;
}

.page-about .about-chapter:target .about-tag {
  border-left-color: var(--signal);
  color: var(--signal);
}

/* ---------- 文本 ---------- */
.page-about .about-h1 {
  margin: 0 0 clamp(16px, 2.6vw, 26px);
  max-width: 22ch;
  color: var(--fog);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(28px, 5.6vw, 52px);
  line-height: 1.28;
  letter-spacing: 0.01em;
}

.page-about .about-h2 {
  margin: 0 0 clamp(14px, 2vw, 22px);
  color: var(--fog);
  font-family: var(--font-serif);
  font-size: clamp(22px, 3.6vw, 32px);
  line-height: 1.34;
}

.page-about .about-lede {
  max-width: 42rem;
  margin: 0 0 clamp(16px, 2.4vw, 24px);
  color: var(--fog);
  font-size: clamp(16px, 1.9vw, 18px);
  line-height: 1.8;
}

.page-about .about-p {
  max-width: 42rem;
  margin: 0 0 clamp(14px, 2vw, 20px);
  color: var(--fog-dim);
  line-height: 1.85;
}

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

.page-about .about-link {
  color: var(--signal);
  text-decoration: none;
  border-bottom: 1px solid rgba(43, 242, 192, 0.4);
  transition: border-color 200ms var(--ease), color 200ms var(--ease);
}

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

/* ---------- 图片 ---------- */
.page-about .about-plate {
  margin: clamp(20px, 3.4vw, 34px) 0 clamp(20px, 3.4vw, 34px);
}

.page-about .about-plate .figure__media,
.page-about .about-history__plate .figure__media,
.page-about .about-team__fig .figure__media {
  border: 1px solid var(--rule);
  background-color: var(--ink-800);
  overflow: hidden;
}

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

.page-about .figure__caption {
  margin-top: 10px;
  color: var(--fog-dim);
  font-size: 13px;
  line-height: 1.7;
}

/* ---------- 四步路径 ---------- */
.page-about .about-path {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.page-about .about-path__step {
  position: relative;
  padding: 20px 18px 22px;
  background-color: var(--ink-800);
  border: 1px solid var(--rule);
  outline: none;
  transition: border-color 240ms var(--ease), background-color 240ms var(--ease);
}

.page-about .about-path__step::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 26px;
  width: 1px;
  height: 16px;
  background-color: var(--rule);
}

.page-about .about-path__step:last-child::after {
  display: none;
}

.page-about .about-path__step:hover,
.page-about .about-path__step:focus-visible {
  background-color: var(--ink-700);
  border-color: var(--signal);
}

.page-about .about-path__idx {
  display: block;
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
}

.page-about .about-path__title {
  margin: 10px 0 8px;
  color: var(--fog);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.04em;
}

.page-about .about-path__desc {
  margin: 0;
  color: var(--fog-dim);
  font-size: 14px;
  line-height: 1.75;
  opacity: 0.82;
  transition: opacity 240ms var(--ease), color 240ms var(--ease);
}

.page-about .about-path__step:hover .about-path__desc,
.page-about .about-path__step:focus-visible .about-path__desc {
  opacity: 1;
  color: var(--fog);
}

/* ---------- 团队 ---------- */
.page-about .about-team {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 30px);
  margin-bottom: clamp(16px, 2.6vw, 26px);
}

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

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

.page-about .about-role__n {
  grid-row: span 2;
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
}

.page-about .about-role__t {
  margin: 0;
  color: var(--fog);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.page-about .about-role__d {
  margin: 0;
  color: var(--fog-dim);
  font-size: 14px;
  line-height: 1.75;
}

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

/* ---------- 时间线 ---------- */
.page-about .about-history__plate {
  margin: 0 0 clamp(24px, 4vw, 40px);
}

.page-about .about-timeline__scale {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-about .about-timeline__tick {
  flex: 1 0 auto;
  min-width: 88px;
}

.page-about .about-timeline__tick > a {
  display: block;
  padding: 14px 10px 16px;
  border-top: 2px solid transparent;
  border-left: 1px solid var(--rule);
  color: var(--fog-dim);
  font-family: var(--font-num);
  font-size: 16px;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: color 200ms var(--ease), background-color 200ms var(--ease);
}

.page-about .about-timeline__tick:last-child > a {
  border-right: 1px solid var(--rule);
}

.page-about .about-timeline__tick > a::before {
  content: "";
  display: block;
  width: 2px;
  height: 14px;
  margin-bottom: 10px;
  background-color: var(--coral);
}

.page-about .about-timeline__tick > a:hover,
.page-about .about-timeline__tick > a:focus-visible {
  color: var(--signal);
  background-color: var(--ink-800);
}

.page-about .about-seasons {
  margin: 0 0 clamp(18px, 3vw, 26px);
  padding: 0;
  list-style: none;
}

.page-about .about-season {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 16px 0 16px 14px;
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--rule);
  transition: border-left-color 240ms var(--ease), background-color 240ms var(--ease);
}

.page-about .about-season:target {
  border-left-color: var(--coral);
  background-color: var(--ink-800);
}

.page-about .about-season__k {
  font-family: var(--font-num);
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--signal);
}

.page-about .about-season__d {
  margin: 0;
  color: var(--fog-dim);
  font-size: 15px;
  line-height: 1.8;
}

/* ---------- 更新节奏 ---------- */
.page-about .about-rhythm {
  margin: 0 0 clamp(18px, 3vw, 28px);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.page-about .about-rhythm__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}

.page-about .about-rhythm__when {
  display: inline-block;
  justify-self: start;
  padding: 2px 10px;
  border: 1px solid var(--coral);
  color: var(--coral);
  font-family: var(--font-num);
  font-size: 14px;
  letter-spacing: 0.1em;
}

.page-about .about-rhythm__what {
  margin: 0;
  color: var(--fog-dim);
  font-size: 15px;
  line-height: 1.8;
}

.page-about .about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(18px, 3vw, 26px);
}

/* ---------- 桌面端 ---------- */
@media (min-width: 720px) {
  .page-about .about-path {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
  }

  .page-about .about-path__step:not(:last-child)::after {
    top: 34px;
    left: 100%;
    width: 28px;
    height: 1px;
  }

  .page-about .about-rhythm__item {
    grid-template-columns: 140px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
  }
}

@media (min-width: 920px) {
  .page-about .about-chapter__grid {
    grid-template-columns: minmax(150px, var(--about-rail)) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
  }

  .page-about .about-chapter__rail {
    position: sticky;
    top: 112px;
    align-self: start;
  }

  .page-about .about-team {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    align-items: start;
  }

  .page-about .about-season {
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 18px;
    align-items: baseline;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-num,
  .page-about .about-path__step,
  .page-about .about-path__desc,
  .page-about .about-season,
  .page-about .about-timeline__tick > a,
  .page-about .about-link {
    transition: none;
  }
}
<<<END>>>

等等，我需要去掉结尾那个 <<<END>>> —— 标记必须严格按顺序出现。让我修正一下：指令要求 MAIN_HTML 然后 PAGE_CSS，每个只出现一次。我不应该加上 END 标记。让我干净地重新输出。

另外，把 `align-items: start` 写了两遍（一次在 grid 里，一次在 rail 里）—— 还算凑合，但有点冗余。还有 `.about-chapter__rail` 的 `align-self: start` 是给 sticky 用的，需要保留。

我重新输出干净版本。
<main id="main-content" class="page-about">
  <div class="container">
    <nav class="breadcrumb about-crumb" aria-label="当前位置">
      <a href="/">赛场首页</a>
      <span class="breadcrumb__sep" aria-hidden="true">/</span>
      <span aria-current="page">品牌总览</span>
    </nav>
  </div>

  <section class="section about-chapter about-chapter--first" id="sec-origin" data-filter-key="起点 定位 轮次 骨架">
    <div class="container">
      <div class="about-chapter__grid">
        <div class="about-chapter__rail">
          <span class="about-num" aria-hidden="true">01</span>
          <span class="t-label about-tag">起点与定位</span>
        </div>
        <div class="about-chapter__body">
          <h1 class="t-display about-h1">乐鱼赛场把每一轮比赛，整理成一块可以随时翻开的战术板</h1>
          <p class="t-lede about-lede">看球的人常常在开赛前半小时才想起确认阵容，在终场哨响后十分钟就想知道另一块场地打成什么样。乐鱼赛场从六个赛季以前就在做这件事：把赛程、比分、战报和伤停按轮次排好，你翻到那一轮，看到的就是当时完整的现场。</p>
          <p class="about-p">我们选了轮次来组织内容，而不是简单按日期堆。一个赛季像一条来回走的路线，主客场各走一遍，同一轮里的比赛挤在同一天发生，彼此咬得很紧。按轮次放，你查完一场就能顺手看到同轮的另外几场，不必再退回首页重新找一次。</p>
          <p class="about-p">所以这里能接住好几种不同的查法。临时想知道排名和比分的，打开就拿到结果；周末同时盯两三场的，可以先把伤停和开赛时间叠在一起看；刚开始看球、还分不清主客场胜率怎么读的，帮助中心里有从零讲起的图示，读完再回来对数字就顺了。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="section about-chapter" id="sec-path" data-filter-key="整理 流程 采集 校对">
    <div class="container">
      <div class="about-chapter__grid">
        <div class="about-chapter__rail">
          <span class="about-num" aria-hidden="true">02</span>
          <span class="t-label about-tag">整理路径</span>
        </div>
        <div class="about-chapter__body">
          <h2 class="t-chapter about-h2">一条资料从进场到上线</h2>
          <p class="about-p">每一条进入页面的比分和说明，都走过同一条路径。四个环节各管一段，前一步没落定，后一步不动手。</p>

          <figure class="figure figure--wide about-plate">
            <div class="figure__media">
              <img src="{zhanqunpic:h:700w:1400}" width="1400" height="700" alt="俯拍的工作台，打印出来的纸质赛程表、削好的铅笔、直尺与摊开的笔记本并排放着">
            </div>
            <figcaption class="figure__caption">当轮赛程先打印出来，在上面标出需要回看的场次，再逐条录进表单。</figcaption>
          </figure>

          <ol class="about-path">
            <li class="about-path__step" tabindex="0">
              <span class="about-path__idx">01</span>
              <h3 class="about-path__title">采集</h3>
              <p class="about-path__desc">终场哨响，先把原始记录收齐。赛程、比分、关键事件按统一格式落进当轮表单，缺哪一项当场标出来。</p>
            </li>
            <li class="about-path__step" tabindex="0">
              <span class="about-path__idx">02</span>
              <h3 class="about-path__title">交叉校对</h3>
              <p class="about-path__desc">两个来源对不上，就由第二个人回看原始记录。确认之后再往下走，宁可慢一步，也不带着疑问上线。</p>
            </li>
            <li class="about-path__step" tabindex="0">
              <span class="about-path__idx">03</span>
              <h3 class="about-path__title">轮次编排</h3>
              <p class="about-path__desc">把散落的条目排进对应位置：主客场对照归两栏，伤停归标签，摘要归当轮顶部，读的人不用自己拼。</p>
            </li>
            <li class="about-path__step" tabindex="0">
              <span class="about-path__idx">04</span>
              <h3 class="about-path__title">发布复核</h3>
              <p class="about-path__desc">上线前整轮再走一遍，确认数字与栏目没有错位。同时把这一轮接进归档目录，日后能原样翻回来。</p>
            </li>
          </ol>
        </div>
      </div>
    </div>
  </section>

  <section class="section about-chapter" id="sec-team" data-filter-key="团队 分工 编辑 技术">
    <div class="container">
      <div class="about-chapter__grid">
        <div class="about-chapter__rail">
          <span class="about-num" aria-hidden="true">03</span>
          <span class="t-label about-tag">团队与分工</span>
        </div>
        <div class="about-chapter__body">
          <h2 class="t-chapter about-h2">谁在维护这份资料</h2>
          <p class="about-p">18 个人分布在三个方向上，各自盯着不同的一段，交接点落在每天固定的两个时刻。</p>

          <div class="about-team">
            <ul class="about-roles">
              <li class="about-role">
                <span class="about-role__n">9</span>
                <h3 class="about-role__t">数据整理</h3>
                <p class="about-role__d">负责赛程录入、比分核对与伤停跟踪。比赛密集时分组轮班，保证当轮不压单，第二天不会积成一片。</p>
              </li>
              <li class="about-role">
                <span class="about-role__n">5</span>
                <h3 class="about-role__t">内容编辑</h3>
                <p class="about-role__d">把数据写成读得进去的摘要和说明，帮助中心里那些概念条目也由这一组整理，写完先给新同事看一遍。</p>
              </li>
              <li class="about-role">
                <span class="about-role__n">4</span>
                <h3 class="about-role__t">技术支持</h3>
                <p class="about-role__d">维护速查工具与桌面端比分面板，处理访问异常和页面定位问题，比赛高峰时段在后台盯着。</p>
              </li>
            </ul>

            <figure class="figure figure--portrait about-team__fig">
              <div class="figure__media">
                <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="几个人围坐讨论的桌面局部，摊开的文件旁摆着笔和贴好标记的便签，人影只露出肩膀与手" loading="lazy" decoding="async">
              </div>
              <figcaption class="figure__caption">每天午后与晚间各碰一次头，把当轮对不上的地方摊开说清。</figcaption>
            </figure>
          </div>

          <p class="about-p">三组之间每天有两次碰头：一次在午后那次伤停更新前后，一次在晚间比赛集中结束之后。谁发现对不上的地方，直接标注在当轮表单上，不需要再走一层转述。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="section about-chapter" id="sec-history" data-filter-key="赛季 归档 时间线 范围">
    <div class="container">
      <div class="about-chapter__grid">
        <div class="about-chapter__rail">
          <span class="about-num" aria-hidden="true">04</span>
          <span class="t-label about-tag">六个赛季</span>
        </div>
        <div class="about-chapter__body">
          <h2 class="t-chapter about-h2">从一张表到一份归档</h2>
          <p class="about-p">最开始只有一张自己看的表格，现在是一套能按轮次逐轮翻回去的归档。范围是一点点加上去的，每一步都先把手上的活做稳。</p>

          <figure class="figure about-history__plate">
            <div class="figure__media">
              <img src="{zhanqunpic:h:600w:1600}" width="1600" height="600" alt="球场中圈与边线的极简线稿横向延展，画面上方留出大片空白" loading="lazy" decoding="async">
            </div>
            <figcaption class="figure__caption">归档像球场的中圈：每一轮从边线出发，最后回到同一个位置。</figcaption>
          </figure>

          <ol class="about-timeline__scale" aria-label="赛季刻度">
            <li class="about-timeline__tick"><a href="#season-1"><span class="about-timeline__lbl">第 1 季</span></a></li>
            <li class="about-timeline__tick"><a href="#season-2"><span class="about-timeline__lbl">第 2 季</span></a></li>
            <li class="about-timeline__tick"><a href="#season-3"><span class="about-timeline__lbl">第 3 季</span></a></li>
            <li class="about-timeline__tick"><a href="#season-4"><span class="about-timeline__lbl">第 4 季</span></a></li>
            <li class="about-timeline__tick"><a href="#season-5"><span class="about-timeline__lbl">第 5 季</span></a></li>
            <li class="about-timeline__tick"><a href="#season-6"><span class="about-timeline__lbl">第 6 季</span></a></li>
          </ol>

          <ol class="about-seasons">
            <li class="about-season" id="season-1">
              <span class="about-season__k">第 1 季</span>
              <p class="about-season__d">从一个自己最常看的联赛做起，每轮把赛程和结果抄进表格，一轮下来不过十几场，收工很快。</p>
            </li>
            <li class="about-season" id="season-2">
              <span class="about-season__k">第 2 季</span>
              <p class="about-season__d">加上赛后摘要，比赛结束两小时内先发一条短的，第二天再把数据对照补齐。</p>
            </li>
            <li class="about-season" id="season-3">
              <span class="about-season__k">第 3 季</span>
              <p class="about-season__d">开始整理伤停消息，最初只覆盖两个联赛，每天更新一次，攒下第一批可回看的记录。</p>
            </li>
            <li class="about-season" id="season-4">
              <span class="about-season__k">第 4 季</span>
              <p class="about-season__d">主客场表现拆成两栏，排名、胜率与近期走势摆在一起，看一支球队不必再翻好几个页面。</p>
            </li>
            <li class="about-season" id="season-5">
              <span class="about-season__k">第 5 季</span>
              <p class="about-season__d">联赛范围扩到两位数，球队底数与今天的规模接近；归档方式也从按日期改成按轮次推进。</p>
            </li>
            <li class="about-season" id="season-6">
              <span class="about-season__k">第 6 季</span>
              <p class="about-season__d">把业余赛事组织的资料互通接进来，同时让战报目录能逐轮翻回去，六个完整赛季的资料都留在归档里。</p>
            </li>
          </ol>

          <p class="about-p">到今天，手上的范围是 12 个联赛、约 480 支球队，平均每轮要整理 60 场以上赛事。这个数字不是一次加上去的，而是一季一季试出来的。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="section about-chapter" id="sec-partners" data-filter-key="合作 互通 业余联赛 校园赛事">
    <div class="container">
      <div class="about-chapter__grid">
        <div class="about-chapter__rail">
          <span class="about-num" aria-hidden="true">05</span>
          <span class="t-label about-tag">合作与互通</span>
        </div>
        <div class="about-chapter__body">
          <h2 class="t-chapter about-h2">和办赛的人一起把记录留下来</h2>
          <p class="about-p">三十余家业余联赛组委会和校园赛事组织在跟我们互通资料。对方把当轮的赛程和结果发过来，我们按统一格式整理、补上时间标记、归档到对应的轮次页面里。</p>
          <p class="about-p">对方拿到的好处很实在：一份能长期留存的赛季记录。赛后要复盘、要给队员看、要跟赞助方交代，直接翻那一轮就行，不用再翻聊天记录找回当时的比分。</p>
          <p class="about-p">这件事对两边都划算。他们缺的常常不是热情，而是整理和留存的人手；我们缺的是基层赛事的现场信息，越贴近场边，记录越靠得住。合作方式也简单，从一个赛季内的资料对接开始，觉得顺手再往下走。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="section about-chapter" id="sec-rhythm" data-filter-key="更新 节奏 伤停 战报 时间">
    <div class="container">
      <div class="about-chapter__grid">
        <div class="about-chapter__rail">
          <span class="about-num" aria-hidden="true">06</span>
          <span class="t-label about-tag">更新节奏</span>
        </div>
        <div class="about-chapter__body">
          <h2 class="t-chapter about-h2">什么时候来查最合适</h2>
          <p class="about-p">更新时间固定下来，你就知道该挑哪个时段过来。战报目前已经排到第 27 轮，后续按同一节奏往下走。</p>

          <ul class="about-rhythm">
            <li class="about-rhythm__item">
              <span class="about-rhythm__when">午后</span>
              <p class="about-rhythm__what">伤停信息第一次更新。周末要同时照看几个联赛的，这个时段之后来看，几条线的阵容状况都齐了。</p>
            </li>
            <li class="about-rhythm__item">
              <span class="about-rhythm__when">晚间</span>
              <p class="about-rhythm__what">第二次伤停更新，一般在当日比赛集中开始前完成，出门前扫一眼还来得及调整。伤停覆盖 5 个主要联赛。</p>
            </li>
            <li class="about-rhythm__item">
              <span class="about-rhythm__when">赛后两小时</span>
              <p class="about-rhythm__what">当轮摘要上线，先给结果和关键节点，够你在群里把话说明白。</p>
            </li>
            <li class="about-rhythm__item">
              <span class="about-rhythm__when">次日</span>
              <p class="about-rhythm__what">完整数据对照补齐。主客场两栏、走势与伤停追踪在这个时间点读起来最完整，适合想细看的人。</p>
            </li>
          </ul>

          <p class="about-p">如果你更习惯把比分挂在桌面浏览器上，桌面端入口可以同屏看多个联赛的比分与状态；想把伤停单独拿出来速查，那边也有并排的入口。<a class="about-link" href="/tools/">去速查工具看看</a>，或者先翻<a class="about-link" href="/reports/">战报目录</a>找某一轮。</p>

          <div class="about-actions">
            <a class="btn btn--ghost" href="/help-center/">新手说明</a>
            <a class="btn btn--ghost" href="/connect/">联系我们</a>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

.page-about {
  --about-rail: 210px;
  background-color: var(--ink-900);
  color: var(--fog);
  padding-bottom: clamp(40px, 7vw, 88px);
}

.page-about .about-crumb {
  padding-top: clamp(18px, 3vw, 30px);
  padding-bottom: clamp(10px, 2vw, 18px);
}

/* ---------- 章节骨架 ---------- */
.page-about .about-chapter {
  border-top: 1px solid var(--rule);
  padding-block: clamp(36px, 6vw, 76px);
}

.page-about .about-chapter--first {
  border-top: 0;
  padding-top: clamp(20px, 4vw, 44px);
}

.page-about .about-chapter__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.page-about .about-chapter__body {
  min-width: 0;
}

/* ---------- 大编号脊线 ---------- */
.page-about .about-num {
  display: block;
  font-family: var(--font-num);
  font-weight: 600;
  font-size: clamp(52px, 11vw, 112px);
  line-height: 0.82;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: transparent;
  -webkit-text-stroke: 1px var(--rule);
  transition: -webkit-text-stroke-color 300ms var(--ease), color 300ms var(--ease);
}

@supports not (-webkit-text-stroke: 1px #000000) {
  .page-about .about-num {
    color: var(--ink-700);
  }
}

.page-about .about-chapter:target .about-num {
  -webkit-text-stroke-color: var(--signal);
  color: transparent;
}

.page-about .about-tag {
  display: block;
  margin-top: 12px;
  padding-left: 10px;
  border-left: 2px solid var(--rule);
  color: var(--fog-dim);
  letter-spacing: 0.14em;
}

.page-about .about-chapter:target .about-tag {
  border-left-color: var(--signal);
  color: var(--signal);
}

/* ---------- 文本 ---------- */
.page-about .about-h1 {
  margin: 0 0 clamp(16px, 2.6vw, 26px);
  max-width: 22ch;
  color: var(--fog);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(28px, 5.6vw, 52px);
  line-height: 1.28;
  letter-spacing: 0.01em;
}

.page-about .about-h2 {
  margin: 0 0 clamp(14px, 2vw, 22px);
  color: var(--fog);
  font-family: var(--font-serif);
  font-size: clamp(22px, 3.6vw, 32px);
  line-height: 1.34;
}

.page-about .about-lede {
  max-width: 42rem;
  margin: 0 0 clamp(16px, 2.4vw, 24px);
  color: var(--fog);
  font-size: clamp(16px, 1.9vw, 18px);
  line-height: 1.8;
}

.page-about .about-p {
  max-width: 42rem;
  margin: 0 0 clamp(14px, 2vw, 20px);
  color: var(--fog-dim);
  line-height: 1.85;
}

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

.page-about .about-link {
  color: var(--signal);
  text-decoration: none;
  border-bottom: 1px solid rgba(43, 242, 192, 0.4);
  transition: border-color 200ms var(--ease), color 200ms var(--ease);
}

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

/* ---------- 图片 ---------- */
.page-about .about-plate {
  margin: clamp(20px, 3.4vw, 34px) 0;
}

.page-about .about-plate .figure__media,
.page-about .about-history__plate .figure__media,
.page-about .about-team__fig .figure__media {
  border: 1px solid var(--rule);
  background-color: var(--ink-800);
  overflow: hidden;
}

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

.page-about .figure__caption {
  margin-top: 10px;
  color: var(--fog-dim);
  font-size: 13px;
  line-height: 1.7;
}

/* ---------- 四步路径 ---------- */
.page-about .about-path {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .about-path__step {
  position: relative;
  padding: 20px 18px 22px;
  background-color: var(--ink-800);
  border: 1px solid var(--rule);
  outline: none;
  transition: border-color 240ms var(--ease), background-color 240ms var(--ease);
}

.page-about .about-path__step::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 26px;
  width: 1px;
  height: 16px;
  background-color: var(--rule);
}

.page-about .about-path__step:last-child::after {
  display: none;
}

.page-about .about-path__step:hover,
.page-about .about-path__step:focus-visible {
  background-color: var(--ink-700);
  border-color: var(--signal);
}

.page-about .about-path__idx {
  display: block;
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
}

.page-about .about-path__title {
  margin: 10px 0 8px;
  color: var(--fog);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.04em;
}

.page-about .about-path__desc {
  margin: 0;
  color: var(--fog-dim);
  font-size: 14px;
  line-height: 1.75;
  opacity: 0.82;
  transition: opacity 240ms var(--ease), color 240ms var(--ease);
}

.page-about .about-path__step:hover .about-path__desc,
.page-about .about-path__step:focus-visible .about-path__desc {
  opacity: 1;
  color: var(--fog);
}

/* ---------- 团队 ---------- */
.page-about .about-team {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 30px);
  margin-bottom: clamp(16px, 2.6vw, 26px);
}

.page-about .about-roles {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

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

.page-about .about-role__n {
  grid-row: span 2;
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
}

.page-about .about-role__t {
  margin: 0;
  color: var(--fog);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.page-about .about-role__d {
  margin: 0;
  color: var(--fog-dim);
  font-size: 14px;
  line-height: 1.75;
}

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

/* ---------- 时间线 ---------- */
.page-about .about-history__plate {
  margin: 0 0 clamp(24px, 4vw, 40px);
}

.page-about .about-timeline__scale {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-about .about-timeline__tick {
  flex: 1 0 auto;
  min-width: 88px;
}

.page-about .about-timeline__tick > a {
  display: block;
  padding: 14px 10px 16px;
  border-top: 2px solid transparent;
  border-left: 1px solid var(--rule);
  color: var(--fog-dim);
  font-family: var(--font-num);
  font-size: 16px;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: color 200ms var(--ease), background-color 200ms var(--ease);
}

.page-about .about-timeline__tick:last-child > a {
  border-right: 1px solid var(--rule);
}

.page-about .about-timeline__tick > a::before {
  content: "";
  display: block;
  width: 2px;
  height: 14px;
  margin-bottom: 10px;
  background-color: var(--coral);
}

.page-about .about-timeline__tick > a:hover,
.page-about .about-timeline__tick > a:focus-visible {
  color: var(--signal);
  background-color: var(--ink-800);
}

.page-about .about-seasons {
  margin: 0 0 clamp(18px, 3vw, 26px);
  padding: 0;
  list-style: none;
}

.page-about .about-season {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 16px 0 16px 14px;
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--rule);
  transition: border-left-color 240ms var(--ease), background-color 240ms var(--ease);
}

.page-about .about-season:target {
  border-left-color: var(--coral);
  background-color: var(--ink-800);
}

.page-about .about-season__k {
  font-family: var(--font-num);
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--signal);
}

.page-about .about-season__d {
  margin: 0;
  color: var(--fog-dim);
  font-size: 15px;
  line-height: 1.8;
}

/* ---------- 更新节奏 ---------- */
.page-about .about-rhythm {
  margin: 0 0 clamp(18px, 3vw, 28px);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.page-about .about-rhythm__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}

.page-about .about-rhythm__when {
  display: inline-block;
  justify-self: start;
  padding: 2px 10px;
  border: 1px solid var(--coral);
  color: var(--coral);
  font-family: var(--font-num);
  font-size: 14px;
  letter-spacing: 0.1em;
}

.page-about .about-rhythm__what {
  margin: 0;
  color: var(--fog-dim);
  font-size: 15px;
  line-height: 1.8;
}

.page-about .about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(18px, 3vw, 26px);
}

/* ---------- 桌面端 ---------- */
@media (min-width: 720px) {
  .page-about .about-path {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
  }

  .page-about .about-path__step:not(:last-child)::after {
    top: 34px;
    left: 100%;
    width: 28px;
    height: 1px;
  }

  .page-about .about-rhythm__item {
    grid-template-columns: 140px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
  }
}

@media (min-width: 920px) {
  .page-about .about-chapter__grid {
    grid-template-columns: minmax(150px, var(--about-rail)) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
  }

  .page-about .about-chapter__rail {
    position: sticky;
    top: 112px;
    align-self: start;
  }

  .page-about .about-team {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    align-items: start;
  }

  .page-about .about-season {
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 18px;
    align-items: baseline;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-num,
  .page-about .about-path__step,
  .page-about .about-path__desc,
  .page-about .about-season,
  .page-about .about-timeline__tick > a,
  .page-about .about-link {
    transition: none;
  }
}