.page-about {
  --about-rail-w: 56px;
  --about-gap: clamp(18px, 3vw, 36px);
  --about-line: rgba(127, 233, 216, .16);
  background: var(--ink-900);
  color: var(--slate-300);
  overflow-x: clip;
  display: block;
}

.page-about .about-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

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

/* ---------- 左侧章节轨道 ---------- */
.page-about .about-rail {
  display: none;
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  padding-block: clamp(22px, 4vw, 48px) clamp(20px, 3vw, 32px);
}

.page-about .breadcrumb {
  margin-bottom: clamp(20px, 4vw, 40px);
}

.page-about .hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 40px);
  align-items: end;
}

.page-about .hero-lead h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 6.4vw, 72px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--slate-100);
  margin: 12px 0 0;
  text-wrap: balance;
}

.page-about .hero-sub {
  margin-top: 20px;
  max-width: 40ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.6;
  color: var(--slate-300);
}

.page-about .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-about .hero-panel {
  padding: 22px;
  border-color: var(--about-line);
}

.page-about .hero-panel__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin: 0 0 14px;
}

.page-about .hero-stat {
  margin: 0;
  display: grid;
  gap: 2px;
}

.page-about .hero-stat__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(183, 198, 222, .1);
}

.page-about .hero-stat__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-about .hero-stat__label {
  font-size: 13px;
  color: var(--slate-500);
}

.page-about .hero-stat__num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  color: var(--cyan-400);
}

/* ---------- 图片 ---------- */
.page-about .figure__frame {
  overflow: hidden;
  border: var(--edge);
  background: var(--ink-800);
}

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

.page-about .figure__caption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--slate-500);
}

.page-about .about-hero-figure {
  margin: clamp(26px, 4vw, 48px) 0 0;
}

/* ---------- 章节 ---------- */
.page-about .band-divider {
  margin-block: clamp(8px, 2vw, 16px);
}

.page-about .about-section {
  padding-block: clamp(44px, 7vw, 92px);
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.page-about .about-section--last {
  padding-bottom: clamp(56px, 8vw, 110px);
}

.page-about .chapter-band {
  margin-bottom: clamp(26px, 4vw, 44px);
  border-top: 1px solid var(--about-line);
  padding-top: 12px;
}

.page-about .about-section h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 3.4vw, 42px);
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--slate-100);
  margin: 0 0 16px;
  text-wrap: balance;
}

.page-about .about-section h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.35;
  color: var(--slate-100);
  margin: 0 0 8px;
}

.page-about .about-section p {
  font-size: 16px;
  line-height: 1.62;
  margin: 0 0 14px;
  max-width: 40ch;
}

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

.page-about .about-section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
}

.page-about .about-section__intro {
  margin-bottom: clamp(24px, 4vw, 40px);
}

.page-about .about-section__intro h2 {
  margin-bottom: 12px;
}

.page-about .about-section__intro p {
  color: var(--slate-500);
}

/* ---------- 三个统计块 ---------- */
.page-about .stat-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: var(--edge);
}

.page-about .stat-cell {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: var(--edge);
}

.page-about .stat-cell__num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 34px);
  font-variant-numeric: tabular-nums;
  color: var(--amber-400);
  line-height: 1;
}

.page-about .stat-cell__label {
  font-size: 14px;
  line-height: 1.55;
  color: var(--slate-300);
}

/* ---------- 版本时间线 ---------- */
.page-about .version-track {
  display: none;
}

.page-about .version-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 33px;
  position: relative;
  z-index: 1;
  text-decoration: none;
  min-height: 44px;
}

.page-about .version-node__dot {
  width: 14px;
  height: 14px;
  background: var(--amber-400);
  border: 1px solid var(--ink-950);
  transition: background .2s var(--ease), transform .2s var(--ease);
}

.page-about .version-node__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--slate-500);
  transition: color .2s var(--ease);
}

.page-about .version-node:hover .version-node__dot,
.page-about .version-node:focus-visible .version-node__dot {
  background: var(--cyan-400);
  transform: scale(1.25);
}

.page-about .version-node:hover .version-node__num,
.page-about .version-node:focus-visible .version-node__num {
  color: var(--cyan-400);
}

.page-about .version-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
}

.page-about .version-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  padding: 20px 0;
  border-top: var(--edge-soft);
  scroll-margin-top: calc(var(--header-h) + 32px);
}

.page-about .version-item:first-child {
  border-top: 0;
}

.page-about .version-item:target {
  background: rgba(43, 245, 196, .06);
  box-shadow: inset 3px 0 0 var(--cyan-400);
  padding-left: 12px;
}

.page-about .version-item__num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .08em;
  color: var(--cyan-700);
  padding-top: 3px;
}

.page-about .version-item:target .version-item__num {
  color: var(--cyan-400);
}

.page-about .version-item__body h3 {
  margin-bottom: 6px;
}

.page-about .version-item__body p {
  margin: 0;
  color: var(--slate-500);
  font-size: 15px;
}

.page-about .about-version-figure {
  margin: clamp(26px, 4vw, 44px) 0 0;
}

/* ---------- 编排节奏 ---------- */
.page-about .about-edit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 44px);
}

.page-about .prose h2 {
  margin-bottom: 18px;
}

.page-about .rhythm-panel {
  padding: clamp(20px, 3vw, 28px);
  border-color: var(--about-line);
  align-self: start;
}

.page-about .rhythm-panel__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin: 0 0 16px;
}

.page-about .rhythm-list {
  margin: 0;
  display: grid;
  gap: 14px;
}

.page-about .rhythm-item {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(183, 198, 222, .1);
}

.page-about .rhythm-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-about .rhythm-item__key {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--amber-400);
}

.page-about .rhythm-item__val {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--slate-300);
  max-width: none;
}

/* ---------- 团队 ---------- */
.page-about .team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.page-about .team-card {
  position: relative;
  padding: 22px 20px 20px;
  background: var(--ink-800);
  border: var(--edge-soft);
  border-left: 3px solid var(--cyan-700);
  transition: border-left-color .2s var(--ease), background .2s var(--ease);
}

.page-about .team-card:hover {
  border-left-color: var(--cyan-400);
  background: #12203f;
}

.page-about .team-card__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--slate-500);
  margin-bottom: 12px;
}

.page-about .team-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--slate-500);
  max-width: none;
}

/* ---------- 使用场景 ---------- */
.page-about .scene-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.page-about .scene-copy h2 {
  margin-bottom: 14px;
}

.page-about .scene-copy p {
  color: var(--slate-500);
}

.page-about .scene-panel {
  padding: 20px;
  border-color: var(--about-line);
  transition: background .2s var(--ease), transform .2s var(--ease);
}

.page-about .scene-panel:hover {
  background: rgba(127, 233, 216, .2);
  transform: translateY(-2px);
}

.page-about .scene-panel__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--amber-400);
  border: 1px solid rgba(255, 182, 61, .35);
  padding: 3px 8px;
  margin-bottom: 12px;
}

.page-about .scene-panel p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--slate-300);
  max-width: none;
}

.page-about .scene-stack__media {
  margin: 0;
}

/* ---------- 运动大类标签 ---------- */
.page-about .sports-block {
  margin-top: clamp(30px, 5vw, 54px);
  padding-top: clamp(22px, 3vw, 32px);
  border-top: var(--edge);
}

.page-about .sports-block__title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--slate-500);
  margin-bottom: 18px;
}

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

.page-about .sport-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(127, 233, 216, .2);
  background: rgba(127, 233, 216, .05);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}

.page-about .sport-chip:hover,
.page-about .sport-chip:focus-within {
  border-color: var(--cyan-400);
  background: rgba(127, 233, 216, .12);
}

.page-about .sport-chip__name {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--slate-100);
}

.page-about .sport-chip__note {
  font-size: 12px;
  color: var(--slate-500);
  display: none;
}

.page-about .sport-chip:hover .sport-chip__note,
.page-about .sport-chip:focus-within .sport-chip__note {
  display: inline;
  color: var(--cyan-400);
}

/* ---------- 迭代窗口 ---------- */
.page-about .next-windows {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: var(--edge);
}

.page-about .next-window {
  padding: 20px 0;
  border-bottom: var(--edge);
}

.page-about .next-window__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--cyan-700);
  margin-bottom: 10px;
}

.page-about .next-window p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--slate-500);
  max-width: none;
}

/* ---------- 结尾联系 ---------- */
.page-about .about-cta {
  margin-top: clamp(30px, 5vw, 52px);
  padding: clamp(22px, 3vw, 30px);
  border-color: var(--about-line);
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
}

.page-about .about-cta__text h3 {
  margin-bottom: 8px;
}

.page-about .about-cta__text p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--slate-500);
  max-width: 52ch;
}

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

/* ---------- 窄屏细节 ---------- */
@media (max-width: 619px) {
  .page-about .version-item {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
  }

  .page-about .rhythm-item {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .page-about .scene-panel:hover {
    transform: none;
  }
}

/* ---------- 平板 ---------- */
@media (min-width: 720px) {
  .page-about .hero-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }

  .page-about .stat-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 24px;
  }

  .page-about .stat-cell {
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
    border-bottom: 0;
    border-right: var(--edge);
    padding-right: 20px;
  }

  .page-about .stat-cell:last-child {
    border-right: 0;
    padding-right: 0;
  }

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

  .page-about .next-windows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
  }

  .page-about .about-cta {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* ---------- 桌面 ---------- */
@media (min-width: 1024px) {
  .page-about .about-shell {
    grid-template-columns: var(--about-rail-w) minmax(0, 1fr);
    column-gap: var(--about-gap);
  }

  .page-about .about-rail {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: calc(var(--header-h) + 32px);
    align-self: start;
    height: max-content;
    padding-top: clamp(30px, 5vw, 56px);
  }

  .page-about .about-rail__link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    text-decoration: none;
    color: var(--slate-500);
    transition: color .2s var(--ease);
  }

  .page-about .about-rail__num {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .1em;
    min-width: 18px;
  }

  .page-about .about-rail__bar {
    display: block;
    width: 2px;
    height: 18px;
    background: rgba(183, 198, 222, .22);
    transition: background .2s var(--ease), height .2s var(--ease);
  }

  .page-about .about-rail__link:hover,
  .page-about .about-rail__link:focus-visible {
    color: var(--cyan-400);
  }

  .page-about .about-rail__link:hover .about-rail__bar,
  .page-about .about-rail__link:focus-visible .about-rail__bar {
    background: var(--cyan-400);
    height: 26px;
  }

  .page-about .version-track {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    position: relative;
    height: 96px;
    margin: 8px 0 12px;
  }

  .page-about .version-track__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .page-about .about-edit-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
  }

  .page-about .scene-stack {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 20px 36px;
    align-items: start;
  }

  .page-about .scene-copy {
    grid-column: 1;
  }

  .page-about .scene-panel:nth-child(3) {
    transform: translateX(24px);
  }

  .page-about .scene-panel:nth-child(4) {
    transform: translateX(0);
  }

  .page-about .scene-stack__media {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: stretch;
  }

  .page-about .scene-stack__media .figure__frame {
    height: 100%;
  }

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

@media (min-width: 1280px) {
  .page-about .hero-lead h1 {
    max-width: 15ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .version-node__dot,
  .page-about .version-node__num,
  .page-about .team-card,
  .page-about .scene-panel,
  .page-about .sport-chip {
    transition: none;
  }

  .page-about .scene-panel:hover {
    transform: none;
  }
}


<main id="main-content" class="page-about">
  <div class="about-shell wrap">

    <nav class="about-rail" aria-label="页面章节">
      <a class="about-rail__link" href="#sec-01">
        <span class="about-rail__num">01</span>
        <span class="about-rail__bar"></span>
      </a>
      <a class="about-rail__link" href="#sec-02">
        <span class="about-rail__num">02</span>
        <span class="about-rail__bar"></span>
      </a>
      <a class="about-rail__link" href="#sec-03">
        <span class="about-rail__num">03</span>
        <span class="about-rail__bar"></span>
      </a>
      <a class="about-rail__link" href="#sec-04">
        <span class="about-rail__num">04</span>
        <span class="about-rail__bar"></span>
      </a>
      <a class="about-rail__link" href="#sec-05">
        <span class="about-rail__num">05</span>
        <span class="about-rail__bar"></span>
      </a>
      <a class="about-rail__link" href="#sec-06">
        <span class="about-rail__num">06</span>
        <span class="about-rail__bar"></span>
      </a>
    </nav>

    <div class="about-body">

      <header class="about-hero">
        <nav class="breadcrumb" aria-label="当前位置">
          <ol class="breadcrumb__list">
            <li class="breadcrumb__item"><a class="breadcrumb__link" href="/">首页</a></li>
            <li class="breadcrumb__item" aria-hidden="true"><span class="breadcrumb__sep">/</span></li>
            <li class="breadcrumb__item"><span aria-current="page">品牌与团队</span></li>
          </ol>
        </nav>

        <div class="hero-grid" data-reveal-group>
          <div class="hero-lead" data-reveal>
            <p class="eyebrow eyebrow--cyan">品牌与团队</p>
            <h1>七个版本走过来，赛事内容这条线越铺越稳</h1>
            <p class="hero-sub">
              88体育从 2019 年起专注赛事内容编排。今天，12 个运动大类的栏目、单周约 1,800 场赛事条目，
              由一支常驻青岛的编辑团队每天更新。你打开页面看到的每一场重点场次，背后是一条走了七个版本的内容线。
            </p>
            <div class="hero-actions">
              <a class="btn btn--primary" href="/apps/">进应用中心</a>
              <a class="btn btn--ghost" href="/blog/">看赛事观察</a>
            </div>
          </div>

          <aside class="hero-panel glass" data-reveal>
            <p class="hero-panel__title">一眼看清</p>
            <dl class="hero-stat">
              <div class="hero-stat__row">
                <dt class="hero-stat__label">当前版本</dt>
                <dd class="hero-stat__num mono">07</dd>
              </div>
              <div class="hero-stat__row">
                <dt class="hero-stat__label">运动大类</dt>
                <dd class="hero-stat__num mono">12</dd>
              </div>
              <div class="hero-stat__row">
                <dt class="hero-stat__label">单周赛事条目</dt>
                <dd class="hero-stat__num mono">约 1,800</dd>
              </div>
              <div class="hero-stat__row">
                <dt class="hero-stat__label">起始年份</dt>
                <dd class="hero-stat__num mono">2019</dd>
              </div>
            </dl>
          </aside>
        </div>
      </header>

      <figure class="figure figure--cut about-hero-figure" data-reveal>
        <div class="figure__frame" style="--ratio:16/9">
          <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="办公区夜间编排赛程的场景，多块屏幕显示赛事日历与对阵列表，人员在位但只见背影">
        </div>
        <figcaption class="figure__caption">晚间是赛程编排最密集的时段，编辑团队在青岛完成当周条目的录入与发布。</figcaption>
      </figure>

      <div class="band-divider"></div>

      <section class="about-section" id="sec-01">
        <div class="chapter-band">
          <span class="chapter-band__num">01</span>
          <span class="chapter-band__label">每天在做的三件事</span>
          <span class="chapter-band__progress">01 / 06</span>
        </div>

        <div class="about-section__grid" data-reveal-group>
          <div class="about-section__lead" data-reveal>
            <h2>收录赛事、编排栏目、把桌面端打磨顺</h2>
            <p>
              赛事条目每天进来，先进入日历，再被编排到对应的栏目里。同一条赛事要同时照顾到两类人：
              想快速扫一眼比分的，和想翻完整赛程做记录的。栏目结构就是为了让这两件事在同一页面上各走各的路。
            </p>
            <p>
              体验层面同样有具体指标。常规宽带环境下，首屏平均加载时间控制在 1.2 秒以内；页面跳转采用局部刷新，
              连续点开多场比赛时不会出现整屏白闪。这些是编辑之外，团队每周都在盯的部分。
            </p>
          </div>

          <div class="stat-row" data-reveal>
            <div class="stat-cell">
              <span class="stat-cell__num mono">12</span>
              <span class="stat-cell__label">个运动大类，足球、篮球、网球、羽毛球、乒乓球、排球、电竞等并列排布</span>
            </div>
            <div class="stat-cell">
              <span class="stat-cell__num mono">约 1,800</span>
              <span class="stat-cell__label">场单周赛事条目，国际比赛周会明显上升</span>
            </div>
            <div class="stat-cell">
              <span class="stat-cell__num mono">96</span>
              <span class="stat-cell__label">条常见问题，把使用中遇到的卡点整理成可查的答案</span>
            </div>
          </div>
        </div>
      </section>

      <div class="band-divider"></div>

      <section class="about-section" id="sec-02">
        <div class="chapter-band">
          <span class="chapter-band__num">02</span>
          <span class="chapter-band__label">七个版本，一条向前走的线</span>
          <span class="chapter-band__progress">02 / 06</span>
        </div>

        <div class="about-section__intro" data-reveal>
          <h2>每一版改的都是同一件事：让你少点几下、少等一会儿</h2>
          <p>点下面的版本号，可以直接跳到那一版改了什么。</p>
        </div>

        <div class="version-track" aria-hidden="true">
          <svg class="version-track__svg" viewBox="0 0 700 96" preserveAspectRatio="none" focusable="false">
            <defs>
              <linearGradient id="about-version-line" x1="0" y1="0" x2="1" y2="0">
                <stop offset="0" stop-color="#0F8F73"></stop>
                <stop offset="1" stop-color="#2BF5C4"></stop>
              </linearGradient>
            </defs>
            <line x1="50" y1="40" x2="650" y2="40" stroke="url(#about-version-line)" stroke-width="2"></line>
          </svg>
          <a class="version-node" href="#v1"><span class="version-node__dot"></span><span class="version-node__num mono">V1</span></a>
          <a class="version-node" href="#v2"><span class="version-node__dot"></span><span class="version-node__num mono">V2</span></a>
          <a class="version-node" href="#v3"><span class="version-node__dot"></span><span class="version-node__num mono">V3</span></a>
          <a class="version-node" href="#v4"><span class="version-node__dot"></span><span class="version-node__num mono">V4</span></a>
          <a class="version-node" href="#v5"><span class="version-node__dot"></span><span class="version-node__num mono">V5</span></a>
          <a class="version-node" href="#v6"><span class="version-node__dot"></span><span class="version-node__num mono">V6</span></a>
          <a class="version-node" href="#v7"><span class="version-node__dot"></span><span class="version-node__num mono">V7</span></a>
        </div>

        <ol class="version-list" data-reveal-group>
          <li class="version-item" id="v1" data-reveal>
            <span class="version-item__num mono">V1</span>
            <div class="version-item__body">
              <h3>首版：先有日历</h3>
              <p>搭起赛事日历与栏目的基本骨架，足球与篮球先行上线，条目按开赛时段排列。</p>
            </div>
          </li>
          <li class="version-item" id="v2" data-reveal>
            <span class="version-item__num mono">V2</span>
            <div class="version-item__body">
              <h3>栏目分开走</h3>
              <p>赛事日历与观察条目拆成两块，条目可以按联赛翻，不用再从头一路滑到底。</p>
            </div>
          </li>
          <li class="version-item" id="v3" data-reveal>
            <span class="version-item__num mono">V3</span>
            <div class="version-item__body">
              <h3>先把等待压下去</h3>
              <p>整页重载改成局部刷新，首屏加载做减法，连续跳转比赛时不再整屏白闪。</p>
            </div>
          </li>
          <li class="version-item" id="v4" data-reveal>
            <span class="version-item__num mono">V4</span>
            <div class="version-item__body">
              <h3>进场路径收短</h3>
              <p>首次进场的选择收拢成三步：选赛事类别、填基础信息、完成验证，直奔赛事页。</p>
            </div>
          </li>
          <li class="version-item" id="v5" data-reveal>
            <span class="version-item__num mono">V5</span>
            <div class="version-item__body">
              <h3>回访先看重点</h3>
              <p>回访用户的默认视图换成关注球队的重点场次，想翻全部赛程时一键切回去。</p>
            </div>
          </li>
          <li class="version-item" id="v6" data-reveal>
            <span class="version-item__num mono">V6</span>
            <div class="version-item__body">
              <h3>少登一次也是一次</h3>
              <p>账号与关注列表在桌面端和移动端之间同步，换台设备登录后订阅还在，不用重新勾。</p>
            </div>
          </li>
          <li class="version-item" id="v7" data-reveal>
            <span class="version-item__num mono">V7</span>
            <div class="version-item__body">
              <h3>把记录带走</h3>
              <p>当前版本落地设备端导出：CSV 与 JSON 两种格式，单次可覆盖最近 90 天的赛事记录，文件保存在你的本机。</p>
            </div>
          </li>
        </ol>

        <figure class="figure figure--cut about-version-figure" data-reveal>
          <div class="figure__frame" style="--ratio:3/2">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="第七版桌面界面的斜切特写，可见章节编号、赛事列表与比分数字，冷色环境光" loading="lazy" decoding="async">
          </div>
          <figcaption class="figure__caption">第七版的桌面界面：左侧章节编号，右侧赛事列表，比分与统计用等宽字体对齐。</figcaption>
        </figure>
      </section>

      <div class="band-divider"></div>

      <section class="about-section" id="sec-03">
        <div class="chapter-band">
          <span class="chapter-band__num">03</span>
          <span class="chapter-band__label">赛程怎么排，条目怎么来</span>
          <span class="chapter-band__progress">03 / 06</span>
        </div>

        <div class="grid grid--main-side about-edit-grid">
          <div class="prose" data-reveal>
            <h2>日历按周推进，重点场次按三项权重挑</h2>
            <p>
              赛事日历以周为单位往前走。新条目进入日历后，编辑部会再过一遍赛事名称、对阵双方与开赛时段，
              确认信息没有出入才放进栏目。赛事名和球队名同时保留简体中文与英文原名，跨语言对照时对得上号。
            </p>
            <p>
              重点场次不是随手挑的。联赛热度、对阵双方的看点、开赛时段三项分别计权重，重合度高的场次会被标出来，
              在列表里用琥珀金角标与常规场次分开。这样回访时扫一眼就能锁定值得看的那几场。
            </p>
            <p>
              遇到国际比赛周，条目数量会往上跳一截，编辑部会把人力往当周集中；赛季之间的空档，则用来整理栏目结构、
              补齐历史条目。全年 4 个版本迭代窗口就排在这个节奏里，赛季期间加密到每月一次功能更新。
            </p>
          </div>

          <aside class="rhythm-panel glass" data-reveal>
            <p class="rhythm-panel__title">一周的节奏</p>
            <dl class="rhythm-list">
              <div class="rhythm-item">
                <dt class="rhythm-item__key mono">每周</dt>
                <dd class="rhythm-item__val">赛事日历更新，单周收录约 1,800 场，国际比赛周条目上升</dd>
              </div>
              <div class="rhythm-item">
                <dt class="rhythm-item__key mono">每天</dt>
                <dd class="rhythm-item__val">当天条目对完名称与开赛时段，同步中英文两种写法</dd>
              </div>
              <div class="rhythm-item">
                <dt class="rhythm-item__key mono">每赛季</dt>
                <dd class="rhythm-item__val">栏目结构复盘，补齐空档期的历史条目与观察内容</dd>
              </div>
              <div class="rhythm-item">
                <dt class="rhythm-item__key mono">每次发版</dt>
                <dd class="rhythm-item__val">先改进场与加载，再看导出与订阅，顺序不调</dd>
              </div>
            </dl>
          </aside>
        </div>
      </section>

      <div class="band-divider"></div>

      <section class="about-section" id="sec-04">
        <div class="chapter-band">
          <span class="chapter-band__num">04</span>
          <span class="chapter-band__label">四个小组，一条线配合</span>
          <span class="chapter-band__progress">04 / 06</span>
        </div>

        <div class="about-section__intro" data-reveal>
          <h2>内容、体验、接口、支持，各管一段</h2>
          <p>编辑与赛事日历维护团队常驻青岛，其余小组按职能分工，日常都围着同一条赛事线转。</p>
        </div>

        <div class="team-grid" data-reveal-group>
          <article class="team-card" data-reveal>
            <span class="team-card__num mono">01</span>
            <h3>内容编辑</h3>
            <p>负责赛事条目录入、名称对照与栏目更新。12 个运动大类的排布、观察栏目的选题，都从这里出。</p>
          </article>
          <article class="team-card" data-reveal>
            <span class="team-card__num mono">02</span>
            <h3>前端体验</h3>
            <p>盯桌面端的加载与切换、章节导航的滚动节奏，以及减少动效开关这类细项。首屏 1.2 秒是这条线的目标。</p>
          </article>
          <article class="team-card" data-reveal>
            <span class="team-card__num mono">03</span>
            <h3>数据接口</h3>
            <p>把赛事条目整理成可导出的结构，字段覆盖比分、节次或局分、关键事件时间点与统计摘要，输出 CSV 与 JSON。</p>
          </article>
          <article class="team-card" data-reveal>
            <span class="team-card__num mono">04</span>
            <h3>用户支持</h3>
            <p>维护帮助中心的 96 条问题，四类归档里导出相关约占三成。工作日 9:00–18:00 内回复邮件与电话。</p>
          </article>
        </div>
      </section>

      <div class="band-divider"></div>

      <section class="about-section" id="sec-05">
        <div class="chapter-band">
          <span class="chapter-band__num">05</span>
          <span class="chapter-band__label">三种人，三种用法</span>
          <span class="chapter-band__progress">05 / 06</span>
        </div>

        <div class="scene-stack" data-reveal-group>
          <div class="scene-copy" data-reveal>
            <h2>刚来的、常来的、要记录的，走的是三条路</h2>
            <p>
              服务范围覆盖山东及内地用户，桌面端为主，移动端与桌面端账号互通。第一次进来的人、每周回访几次的人、
              把比分导出到本机做记录的人，需要的入口本就不一样。
            </p>
          </div>

          <article class="scene-panel glass" data-reveal>
            <span class="scene-panel__tag mono">第一次来</span>
            <h3>三步进场，直接落到赛事页</h3>
            <p>选赛事类别、填基础信息、完成验证，走完就进赛事页。关注球队的入口放在赛事页顶部，第一次进来就能看见。</p>
          </article>

          <article class="scene-panel glass" data-reveal>
            <span class="scene-panel__tag mono">每周回访</span>
            <h3>打开就是重点场次</h3>
            <p>默认视图只显示关注球队的重点场次，不必从全部赛程往下翻。想看完整赛程，一次点击切回来。</p>
          </article>

          <article class="scene-panel glass" data-reveal>
            <span class="scene-panel__tag mono">多联赛记录</span>
            <h3>订阅八个联赛，导出一份文件</h3>
            <p>最多同时订阅 20 支球队与 8 项联赛。导出支持 CSV 与 JSON，覆盖最近 90 天，文件落在你自己的设备上。</p>
          </article>

          <figure class="figure figure--cut scene-stack__media" data-reveal>
            <div class="figure__frame" style="--ratio:4/5">
              <img src="{zhanqunpic:h:1250w:1000}" width="1000" height="1250" alt="城市夜景与室内屏幕光混合的抽象竖构图，表现夜间观看与记录赛事的使用场景" loading="lazy" decoding="async">
            </div>
            <figcaption class="figure__caption">晚间时段是观看高峰，也是导出记录最集中的时段。</figcaption>
          </figure>
        </div>

        <div class="sports-block" data-reveal>
          <h3 class="sports-block__title">12 个运动大类，栏目按大类分组</h3>
          <ul class="sports-tags">
            <li class="sport-chip"><span class="sport-chip__name mono">足球</span><span class="sport-chip__note">焦点联赛与国家队赛事并列</span></li>
            <li class="sport-chip"><span class="sport-chip__name mono">篮球</span><span class="sport-chip__note">常规赛与季后赛同页排布</span></li>
            <li class="sport-chip"><span class="sport-chip__name mono">网球</span><span class="sport-chip__note">按轮次推进，单日多场</span></li>
            <li class="sport-chip"><span class="sport-chip__name mono">羽毛球</span><span class="sport-chip__note">分站赛集中排期</span></li>
            <li class="sport-chip"><span class="sport-chip__name mono">乒乓球</span><span class="sport-chip__note">团体与单项分开标注</span></li>
            <li class="sport-chip"><span class="sport-chip__name mono">排球</span><span class="sport-chip__note">联赛与杯赛双线</span></li>
            <li class="sport-chip"><span class="sport-chip__name mono">电竞</span><span class="sport-chip__note">赛程随版本节点密集</span></li>
            <li class="sport-chip"><span class="sport-chip__name mono">田径</span><span class="sport-chip__note">按赛会制集中收录</span></li>
            <li class="sport-chip"><span class="sport-chip__name mono">游泳</span><span class="sport-chip__note">分项决赛时段突出</span></li>
            <li class="sport-chip"><span class="sport-chip__name mono">搏击</span><span class="sport-chip__note">按场次卡排列</span></li>
            <li class="sport-chip"><span class="sport-chip__name mono">赛车</span><span class="sport-chip__note">排位与正赛分开</span></li>
            <li class="sport-chip"><span class="sport-chip__name mono">冰雪</span><span class="sport-chip__note">赛季集中，冬春最密</span></li>
          </ul>
        </div>
      </section>

      <div class="band-divider"></div>

      <section class="about-section about-section--last" id="sec-06">
        <div class="chapter-band">
          <span class="chapter-band__num">06</span>
          <span class="chapter-band__label">接下来的一年</span>
          <span class="chapter-band__progress">06 / 06</span>
        </div>

        <div class="about-section__intro" data-reveal>
          <h2>四个迭代窗口，方向都朝着同一个地方</h2>
          <p>每年安排 4 个版本迭代窗口，赛季期间加密到每月一次功能更新。下一轮的重点排在这里。</p>
        </div>

        <div class="next-windows" data-reveal-group>
          <div class="next-window" data-reveal>
            <span class="next-window__num mono">窗口 01</span>
            <h3>再快一点</h3>
            <p>继续压缩首屏加载与页面切换的等待，把局部刷新的覆盖范围扩大。</p>
          </div>
          <div class="next-window" data-reveal>
            <span class="next-window__num mono">窗口 02</span>
            <h3>换个联赛更快</h3>
            <p>多联赛用户切换关注对象的路径再缩短，重点场次的筛选放到更前面。</p>
          </div>
          <div class="next-window" data-reveal>
            <span class="next-window__num mono">窗口 03</span>
            <h3>导出更顺手</h3>
            <p>细化导出字段与格式，让导出的记录拿到本机后能直接用。</p>
          </div>
          <div class="next-window" data-reveal>
            <span class="next-window__num mono">窗口 04</span>
            <h3>问题更好找</h3>
            <p>帮助中心的分类按实际操作重排，把最常卡住的那一步提到前面。</p>
          </div>
        </div>

        <div class="about-cta glass" data-reveal>
          <div class="about-cta__text">
            <h3>想聊合作，或者遇到具体问题</h3>
            <p>工作日 9:00–18:00 内回复。赛事数据导出相关的问题，附上设备型号与联赛名称会更快定位。</p>
          </div>
          <div class="about-cta__actions">
            <a class="btn btn--primary" href="/cooperation/">联系团队</a>
            <a class="btn btn--ghost" href="/faqs/">翻帮助中心</a>
          </div>
        </div>
      </section>

    </div>
  </div>
</main>

.page-about {
  --about-rail-w: 56px;
  --about-gap: clamp(18px, 3vw, 36px);
  --about-line: rgba(127, 233, 216, .16);
  background: var(--ink-900);
  color: var(--slate-300);
  overflow-x: clip;
  display: block;
}

.page-about .about-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

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

/* ---------- 左侧章节轨道 ---------- */
.page-about .about-rail {
  display: none;
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  padding-block: clamp(22px, 4vw, 48px) clamp(20px, 3vw, 32px);
}

.page-about .breadcrumb {
  margin-bottom: clamp(20px, 4vw, 40px);
}

.page-about .hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 40px);
  align-items: end;
}

.page-about .hero-lead h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 6.4vw, 72px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--slate-100);
  margin: 12px 0 0;
  text-wrap: balance;
}

.page-about .hero-sub {
  margin-top: 20px;
  max-width: 40ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.6;
  color: var(--slate-300);
}

.page-about .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-about .hero-panel {
  padding: 22px;
  border-color: var(--about-line);
}

.page-about .hero-panel__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin: 0 0 14px;
}

.page-about .hero-stat {
  margin: 0;
  display: grid;
  gap: 2px;
}

.page-about .hero-stat__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(183, 198, 222, .1);
}

.page-about .hero-stat__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-about .hero-stat__label {
  font-size: 13px;
  color: var(--slate-500);
}

.page-about .hero-stat__num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  color: var(--cyan-400);
}

/* ---------- 图片 ---------- */
.page-about .figure__frame {
  overflow: hidden;
  border: var(--edge);
  background: var(--ink-800);
}

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

.page-about .figure__caption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--slate-500);
}

.page-about .about-hero-figure {
  margin: clamp(26px, 4vw, 48px) 0 0;
}

/* ---------- 章节 ---------- */
.page-about .band-divider {
  margin-block: clamp(8px, 2vw, 16px);
}

.page-about .about-section {
  padding-block: clamp(44px, 7vw, 92px);
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.page-about .about-section--last {
  padding-bottom: clamp(56px, 8vw, 110px);
}

.page-about .chapter-band {
  margin-bottom: clamp(26px, 4vw, 44px);
  border-top: 1px solid var(--about-line);
  padding-top: 12px;
}

.page-about .about-section h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 3.4vw, 42px);
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--slate-100);
  margin: 0 0 16px;
  text-wrap: balance;
}

.page-about .about-section h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.35;
  color: var(--slate-100);
  margin: 0 0 8px;
}

.page-about .about-section p {
  font-size: 16px;
  line-height: 1.62;
  margin: 0 0 14px;
  max-width: 40ch;
}

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

.page-about .about-section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
}

.page-about .about-section__intro {
  margin-bottom: clamp(24px, 4vw, 40px);
}

.page-about .about-section__intro h2 {
  margin-bottom: 12px;
}

.page-about .about-section__intro p {
  color: var(--slate-500);
}

/* ---------- 三个统计块 ---------- */
.page-about .stat-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: var(--edge);
}

.page-about .stat-cell {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: var(--edge);
}

.page-about .stat-cell__num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 34px);
  font-variant-numeric: tabular-nums;
  color: var(--amber-400);
  line-height: 1;
}

.page-about .stat-cell__label {
  font-size: 14px;
  line-height: 1.55;
  color: var(--slate-300);
}

/* ---------- 版本时间线 ---------- */
.page-about .version-track {
  display: none;
}

.page-about .version-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 33px;
  position: relative;
  z-index: 1;
  text-decoration: none;
  min-height: 44px;
}

.page-about .version-node__dot {
  width: 14px;
  height: 14px;
  background: var(--amber-400);
  border: 1px solid var(--ink-950);
  transition: background .2s var(--ease), transform .2s var(--ease);
}

.page-about .version-node__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--slate-500);
  transition: color .2s var(--ease);
}

.page-about .version-node:hover .version-node__dot,
.page-about .version-node:focus-visible .version-node__dot {
  background: var(--cyan-400);
  transform: scale(1.25);
}

.page-about .version-node:hover .version-node__num,
.page-about .version-node:focus-visible .version-node__num {
  color: var(--cyan-400);
}

.page-about .version-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
}

.page-about .version-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  padding: 20px 0;
  border-top: var(--edge-soft);
  scroll-margin-top: calc(var(--header-h) + 32px);
}

.page-about .version-item:first-child {
  border-top: 0;
}

.page-about .version-item:target {
  background: rgba(43, 245, 196, .06);
  box-shadow: inset 3px 0 0 var(--cyan-400);
  padding-left: 12px;
}

.page-about .version-item__num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .08em;
  color: var(--cyan-700);
  padding-top: 3px;
}

.page-about .version-item:target .version-item__num {
  color: var(--cyan-400);
}

.page-about .version-item__body h3 {
  margin-bottom: 6px;
}

.page-about .version-item__body p {
  margin: 0;
  color: var(--slate-500);
  font-size: 15px;
}

.page-about .about-version-figure {
  margin: clamp(26px, 4vw, 44px) 0 0;
}

/* ---------- 编排节奏 ---------- */
.page-about .about-edit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 44px);
}

.page-about .prose h2 {
  margin-bottom: 18px;
}

.page-about .rhythm-panel {
  padding: clamp(20px, 3vw, 28px);
  border-color: var(--about-line);
  align-self: start;
}

.page-about .rhythm-panel__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin: 0 0 16px;
}

.page-about .rhythm-list {
  margin: 0;
  display: grid;
  gap: 14px;
}

.page-about .rhythm-item {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(183, 198, 222, .1);
}

.page-about .rhythm-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-about .rhythm-item__key {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--amber-400);
}

.page-about .rhythm-item__val {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--slate-300);
  max-width: none;
}

/* ---------- 团队 ---------- */
.page-about .team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.page-about .team-card {
  position: relative;
  padding: 22px 20px 20px;
  background: var(--ink-800);
  border: var(--edge-soft);
  border-left: 3px solid var(--cyan-700);
  transition: border-left-color .2s var(--ease), background .2s var(--ease);
}

.page-about .team-card:hover {
  border-left-color: var(--cyan-400);
  background: #12203f;
}

.page-about .team-card__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--slate-500);
  margin-bottom: 12px;
}

.page-about .team-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--slate-500);
  max-width: none;
}

/* ---------- 使用场景 ---------- */
.page-about .scene-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.page-about .scene-copy h2 {
  margin-bottom: 14px;
}

.page-about .scene-copy p {
  color: var(--slate-500);
}

.page-about .scene-panel {
  padding: 20px;
  border-color: var(--about-line);
  transition: background .2s var(--ease), transform .2s var(--ease);
}

.page-about .scene-panel:hover {
  background: rgba(127, 233, 216, .2);
  transform: translateY(-2px);
}

.page-about .scene-panel__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--amber-400);
  border: 1px solid rgba(255, 182, 61, .35);
  padding: 3px 8px;
  margin-bottom: 12px;
}

.page-about .scene-panel p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--slate-300);
  max-width: none;
}

.page-about .scene-stack__media {
  margin: 0;
}

/* ---------- 运动大类标签 ---------- */
.page-about .sports-block {
  margin-top: clamp(30px, 5vw, 54px);
  padding-top: clamp(22px, 3vw, 32px);
  border-top: var(--edge);
}

.page-about .sports-block__title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--slate-500);
  margin-bottom: 18px;
}

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

.page-about .sport-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(127, 233, 216, .2);
  background: rgba(127, 233, 216, .05);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}

.page-about .sport-chip:hover,
.page-about .sport-chip:focus-within {
  border-color: var(--cyan-400);
  background: rgba(127, 233, 216, .12);
}

.page-about .sport-chip__name {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--slate-100);
}

.page-about .sport-chip__note {
  font-size: 12px;
  color: var(--slate-500);
  display: none;
}

.page-about .sport-chip:hover .sport-chip__note,
.page-about .sport-chip:focus-within .sport-chip__note {
  display: inline;
  color: var(--cyan-400);
}

/* ---------- 迭代窗口 ---------- */
.page-about .next-windows {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: var(--edge);
}

.page-about .next-window {
  padding: 20px 0;
  border-bottom: var(--edge);
}

.page-about .next-window__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--cyan-700);
  margin-bottom: 10px;
}

.page-about .next-window p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--slate-500);
  max-width: none;
}

/* ---------- 结尾联系 ---------- */
.page-about .about-cta {
  margin-top: clamp(30px, 5vw, 52px);
  padding: clamp(22px, 3vw, 30px);
  border-color: var(--about-line);
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
}

.page-about .about-cta__text h3 {
  margin-bottom: 8px;
}

.page-about .about-cta__text p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--slate-500);
  max-width: 52ch;
}

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

/* ---------- 窄屏细节 ---------- */
@media (max-width: 619px) {
  .page-about .version-item {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
  }

  .page-about .rhythm-item {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .page-about .scene-panel:hover {
    transform: none;
  }
}

/* ---------- 平板 ---------- */
@media (min-width: 720px) {
  .page-about .hero-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }

  .page-about .stat-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 24px;
  }

  .page-about .stat-cell {
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
    border-bottom: 0;
    border-right: var(--edge);
    padding-right: 20px;
  }

  .page-about .stat-cell:last-child {
    border-right: 0;
    padding-right: 0;
  }

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

  .page-about .next-windows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
  }

  .page-about .about-cta {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* ---------- 桌面 ---------- */
@media (min-width: 1024px) {
  .page-about .about-shell {
    grid-template-columns: var(--about-rail-w) minmax(0, 1fr);
    column-gap: var(--about-gap);
  }

  .page-about .about-rail {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: calc(var(--header-h) + 32px);
    align-self: start;
    height: max-content;
    padding-top: clamp(30px, 5vw, 56px);
  }

  .page-about .about-rail__link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    text-decoration: none;
    color: var(--slate-500);
    transition: color .2s var(--ease);
  }

  .page-about .about-rail__num {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .1em;
    min-width: 18px;
  }

  .page-about .about-rail__bar {
    display: block;
    width: 2px;
    height: 18px;
    background: rgba(183, 198, 222, .22);
    transition: background .2s var(--ease), height .2s var(--ease);
  }

  .page-about .about-rail__link:hover,
  .page-about .about-rail__link:focus-visible {
    color: var(--cyan-400);
  }

  .page-about .about-rail__link:hover .about-rail__bar,
  .page-about .about-rail__link:focus-visible .about-rail__bar {
    background: var(--cyan-400);
    height: 26px;
  }

  .page-about .version-track {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    position: relative;
    height: 96px;
    margin: 8px 0 12px;
  }

  .page-about .version-track__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .page-about .about-edit-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
  }

  .page-about .scene-stack {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 20px 36px;
    align-items: start;
  }

  .page-about .scene-copy {
    grid-column: 1;
  }

  .page-about .scene-panel:nth-child(3) {
    transform: translateX(24px);
  }

  .page-about .scene-stack__media {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: stretch;
  }

  .page-about .scene-stack__media .figure__frame {
    height: 100%;
  }

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

@media (min-width: 1280px) {
  .page-about .hero-lead h1 {
    max-width: 15ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .version-node__dot,
  .page-about .version-node__num,
  .page-about .team-card,
  .page-about .scene-panel,
  .page-about .sport-chip {
    transition: none;
  }

  .page-about .scene-panel:hover {
    transform: none;
  }
}