.page-about {
  background: var(--deep);
  color: var(--paper);
}

/* ---------- 首屏 ---------- */
.page-about .hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(24px, 5vw, 52px));
  padding-bottom: clamp(44px, 7vw, 88px);
  background:
    radial-gradient(120% 80% at 88% 0%, rgba(45, 226, 197, .18), transparent 62%),
    linear-gradient(180deg, #062A3A 0%, #021A24 100%);
}

.page-about .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(45, 226, 197, .09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(45, 226, 197, .09) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .95), transparent 88%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .95), transparent 88%);
  pointer-events: none;
}

.page-about .hero .wrap {
  position: relative;
  z-index: 1;
}

.page-about .breadcrumb,
.page-about .breadcrumb-list,
.page-about .breadcrumb a {
  color: var(--steel);
}

.page-about .breadcrumb a:hover {
  color: var(--cyan);
}

.page-about .hero-grid {
  display: grid;
  gap: clamp(28px, 4vw, 44px);
  margin-top: clamp(20px, 4vw, 36px);
}

.page-about .hero h1 {
  font-family: var(--font-cond);
  font-size: clamp(34px, 5.2vw, 62px);
  line-height: 1.1;
  letter-spacing: .01em;
  font-weight: 700;
  color: var(--paper);
  margin: .34em 0 .52em;
}

.page-about .hero .lede {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.85;
  color: var(--mist);
  max-width: 54ch;
  margin: 0;
}

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

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

.page-about .hero-shot {
  position: relative;
  margin: 0;
  border: 1px solid var(--line-cyan);
  background: var(--ink);
}

.page-about .hero-shot::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 36px;
  height: 36px;
  border-top: 2px solid var(--cyan);
  border-right: 2px solid var(--cyan);
  pointer-events: none;
}

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

.page-about .hero-shot figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--steel);
  padding: 10px 14px;
  border-top: 1px solid var(--line-soft);
}

/* ---------- 通用章节 ---------- */
.page-about .section {
  padding-block: clamp(46px, 7vw, 92px);
}

.page-about .section-title {
  color: var(--paper);
  font-family: var(--font-cond);
  letter-spacing: .01em;
}

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

.page-about .section-sub {
  color: var(--steel);
  line-height: 1.8;
  max-width: 60ch;
}

/* ---------- 起点 ---------- */
.page-about .origin {
  background: linear-gradient(180deg, rgba(11, 59, 82, .72), rgba(6, 42, 58, .2));
  border-top: 1px solid var(--line-soft);
}

.page-about .origin-grid {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
}

.page-about .origin-copy p {
  color: var(--mist);
  line-height: 1.9;
  font-size: 15.5px;
  margin: 0 0 16px;
  max-width: 62ch;
}

.page-about .origin-copy p:last-child {
  margin-bottom: 0;
  color: var(--cyan);
  font-weight: 600;
}

.page-about .origin-note {
  position: relative;
  border: 1px solid var(--line);
  background: rgba(2, 26, 36, .62);
  padding: clamp(18px, 2.6vw, 26px);
}

.page-about .origin-note::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  width: 26px;
  height: 26px;
  border-left: 2px solid var(--cyan);
  border-top: 2px solid var(--cyan);
}

.page-about .origin-note-title {
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--cyan);
  margin: 0 0 14px;
}

.page-about .origin-note .index-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-about .origin-note .index-list li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
  color: var(--mist);
}

.page-about .origin-note .index-list li:last-child {
  border-bottom: 0;
}

.page-about .origin-note .index-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--orange);
  flex: none;
}

/* ---------- 时间轴 ---------- */
.page-about .timeline-section {
  background:
    linear-gradient(180deg, rgba(2, 26, 36, .55), rgba(6, 42, 58, .45)),
    var(--deep);
  border-top: 1px solid var(--line-soft);
}

.page-about .tl-figure {
  margin: 0 0 clamp(20px, 3vw, 30px);
  border: 1px solid var(--line-soft);
  background: var(--ink);
}

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

.page-about .tl-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(24px, 4vw, 36px);
}

.page-about .tl-jump-link {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--mist);
  border: 1px solid var(--line);
  padding: 7px 14px;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.page-about .tl-jump-link:hover,
.page-about .tl-jump-link:focus-visible {
  color: var(--ink);
  background: var(--cyan);
  border-color: var(--cyan);
}

.page-about .timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(18px, 2.6vw, 28px);
}

.page-about .tl-item {
  position: relative;
  display: grid;
  gap: 10px;
  padding-left: 20px;
  border-left: 1px solid var(--line-cyan);
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.page-about .tl-rail {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.page-about .tl-year {
  font-family: var(--font-mono);
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: .05em;
  color: var(--orange);
  line-height: 1.1;
}

.page-about .tl-ver {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--steel);
}

.page-about .tl-card {
  position: relative;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(11, 59, 82, .88), rgba(6, 42, 58, .88));
  padding: clamp(18px, 2.6vw, 28px);
}

.page-about .tl-card::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  width: 24px;
  height: 24px;
  border-left: 2px solid var(--cyan);
  border-top: 2px solid var(--cyan);
}

.page-about .tl-title {
  margin: 0 0 10px;
  font-size: clamp(16.5px, 1.9vw, 21px);
  line-height: 1.5;
  font-weight: 600;
  color: var(--paper);
}

.page-about .tl-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--mist);
}

.page-about .tl-more {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-soft);
}

.page-about .tl-more summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--cyan);
}

.page-about .tl-more summary::-webkit-details-marker {
  display: none;
}

.page-about .tl-more summary::before {
  content: "+";
  font-size: 15px;
  line-height: 1;
  width: 14px;
  display: inline-block;
}

.page-about .tl-more[open] summary::before {
  content: "−";
}

.page-about .tl-more p {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--steel);
}

.page-about .tl-more a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 团队 ---------- */
.page-about .team {
  background: linear-gradient(180deg, rgba(11, 59, 82, .6), rgba(6, 42, 58, .3));
  border-top: 1px solid var(--line-soft);
}

.page-about .team-grid {
  display: grid;
  gap: 14px;
}

.page-about .team-grid .kpi {
  border: 1px solid var(--line);
  background: rgba(2, 26, 36, .55);
  padding: clamp(18px, 2.4vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-about .team-grid .kpi-num {
  font-family: var(--font-mono);
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1;
  color: var(--orange);
  letter-spacing: .02em;
}

.page-about .team-grid .kpi-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--cyan);
}

.page-about .team-grid .kpi p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--mist);
}

.page-about .team-flow {
  margin-top: clamp(20px, 3vw, 30px);
  border-left: 2px solid var(--line-cyan);
  padding-left: clamp(14px, 2.2vw, 22px);
}

.page-about .team-flow p {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--mist);
  max-width: 74ch;
}

/* ---------- 数据网络 ---------- */
.page-about .data {
  background: var(--deep);
  border-top: 1px solid var(--line-soft);
}

.page-about .data-grid {
  display: grid;
  gap: clamp(24px, 3.5vw, 44px);
}

.page-about .data-copy p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--mist);
  max-width: 56ch;
}

.page-about .data-points ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-about .data-points li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 14px 0 14px 16px;
  border-left: 2px solid var(--orange);
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--mist);
}

.page-about .data-points strong {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--paper);
  letter-spacing: .04em;
}

.page-about .data-figure {
  margin: clamp(26px, 4vw, 42px) 0 0;
  border: 1px solid var(--line-soft);
  background: var(--ink);
}

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

.page-about .data-figure figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--steel);
  padding: 10px 14px;
  border-top: 1px solid var(--line-soft);
}

/* ---------- 资质 ---------- */
.page-about .trust {
  background: linear-gradient(180deg, rgba(11, 59, 82, .55), rgba(2, 26, 36, .5));
  border-top: 1px solid var(--line-soft);
}

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

.page-about .trust-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  padding: clamp(16px, 2.4vw, 24px) 0;
  border-top: 1px solid var(--line-soft);
}

.page-about .trust-item:last-child {
  border-bottom: 1px solid var(--line-soft);
}

.page-about .trust-idx {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--cyan);
  padding-top: 4px;
}

.page-about .trust-body h3 {
  margin: 0 0 8px;
  font-size: clamp(15.5px, 1.7vw, 18px);
  font-weight: 600;
  color: var(--paper);
}

.page-about .trust-body p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--steel);
  max-width: 68ch;
}

/* ---------- 下一步 ---------- */
.page-about .next {
  background: var(--deep);
  border-top: 1px solid var(--line-soft);
}

.page-about .next-links {
  display: grid;
  gap: 12px;
}

.page-about .next-link {
  position: relative;
  display: grid;
  gap: 6px;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--line);
  background: rgba(11, 59, 82, .5);
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.page-about .next-link:hover,
.page-about .next-link:focus-visible {
  border-color: var(--cyan);
  background: rgba(11, 59, 82, .85);
  transform: translateY(-2px);
}

.page-about .next-link-k {
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--orange);
}

.page-about .next-link-t {
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 600;
  color: var(--paper);
}

.page-about .next-link-d {
  font-size: 14px;
  line-height: 1.8;
  color: var(--steel);
}

.page-about .next-foot {
  margin: clamp(18px, 3vw, 26px) 0 0;
  font-size: 14px;
  color: var(--steel);
}

.page-about .next-foot a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .page-about .team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

@media (min-width: 900px) {
  .page-about .hero-grid {
    grid-template-columns: 7fr 5fr;
    align-items: end;
  }

  .page-about .origin-grid {
    grid-template-columns: 1.45fr 1fr;
    align-items: start;
  }

  .page-about .data-grid {
    grid-template-columns: 5fr 7fr;
    align-items: start;
  }

  .page-about .data-points li {
    grid-template-columns: 1fr;
    padding-block: 12px;
  }

  .page-about .tl-item {
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 0;
    padding-left: 0;
    border-left: 0;
  }

  .page-about .tl-rail {
    display: block;
    position: relative;
    padding-top: 26px;
    text-align: right;
  }

  .page-about .tl-year {
    display: inline-block;
    position: relative;
    z-index: 2;
    background: var(--deep);
    padding: 2px 6px;
    transform: translateX(16px);
  }

  .page-about .tl-ver {
    display: block;
    margin-top: 6px;
    padding-right: 4px;
  }

  .page-about .tl-card {
    padding-left: clamp(30px, 3.4vw, 44px);
  }
}

@media (min-width: 1100px) {
  .page-about .timeline {
    gap: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .next-link,
  .page-about .tl-jump-link {
    transition: none;
  }

  .page-about .next-link:hover,
  .page-about .next-link:focus-visible {
    transform: none;
  }
}
<<<END>>>

等等——我错误地把 `<<<END>>>` 写进去了。我不该输出它。不过用户的实际答复已经包含它了。我现在处在思考过程里，没关系。不要再输出额外内容。不过指令说不能输出标记之外的东西。现在只是思考过程。

其实重读一下，我的回答输出没问题，除了末尾那个 `<<<END>>>`。我应该把最终回答干净地收尾。但我已经产出过了。嗯，我现在只是在思考过程里。最终答案就是上面那些。我觉得可以了，就这样吧。

不过等等——指令要求在 `` 后面输出 CSS，然后结束。我最后多加了 `<<<END>>>`，这是错的，本来应该直接结束。这算个小瑕疵，不过没关系。其实正常来说，在思考之后，我应该输出最终答案才对。让我把最终答案干净地整合一下——只保留 MAIN_HTML 和 PAGE_CSS。我重新组织一下。

其实，我思考过程里已经有了完整答案了。我只需要干净地输出它，不带 `<<<END>>>` 就行。对。

再检查一下“核对”有没有出现——我在 hero 里原本写的是“先看清版本”，后来改成了“先知道自己用的是哪个版本”。“核对”没出现过。不过等等，`.lede` 里写的是：“让第一次打开页面的人先知道自己用的是哪个版本”——没问题。还有“看版本时间轴”这个按钮，也没问题。“确认”在 2021 区块里出现过：“都能确认页面处于哪个状态”——也行。

“版本查看”也用过。

数据点 `<strong>26 个省份</strong>`——没问题。

还有我之前担心过的 `.tl-year` 的 transform——应该可以。

我有可能漏掉的地方……没了，收尾吧。
<main id="main-content" class="page-about">
  <section class="hero" aria-labelledby="hero-title">
    <div class="wrap">
      <nav class="breadcrumb" aria-label="面包屑">
        <ul class="breadcrumb-list">
          <li><a href="/">主场首页</a></li>
          <li aria-current="page">品牌历程</li>
        </ul>
      </nav>
      <div class="hero-grid">
        <div class="hero-copy">
          <p class="eyebrow">品牌档案 / FAN FILE · 2021—2025</p>
          <h1 id="hero-title">五年赛场档案，把观赛节奏交回你手里</h1>
          <p class="lede">2021 年我们只做了一件小事：让第一次打开页面的人先知道自己用的是哪个版本，再决定从哪儿进入比赛。五年过去，这件小事长成了覆盖赛事数据、轮次回看与问题反馈的服务体系。乐鱼赛场把快慢的主动权留给观众，也把每一次变化留在档案里，随时翻得回来。</p>
          <ul class="hero-tags">
            <li class="tag tag-cyan">42 人运营团队</li>
            <li class="tag tag-cyan">服务 26 个省份</li>
            <li class="tag tag-orange">当前稳定版 3.8</li>
          </ul>
          <div class="hero-actions">
            <a class="btn btn-solid" href="/tools/">打开工具中心</a>
            <a class="btn btn-ghost" href="#timeline">看版本时间轴</a>
          </div>
        </div>
        <figure class="hero-shot">
          <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="深水蓝档案夹与泳道波纹叠压成的乐鱼赛场品牌档案封面">
          <figcaption>FAN FILE / 乐鱼赛场 · 2021—2025</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="section origin" aria-labelledby="origin-title">
    <div class="wrap origin-grid">
      <div class="origin-copy">
        <p class="eyebrow">起点 / ORIGIN</p>
        <h2 id="origin-title" class="section-title">先让你知道，自己站在第几泳道</h2>
        <p>2021 年的第一版只有一屏：左边写清楚当前页面的版本号，右边放赛程入口，中间是一条细到几乎看不见的分隔线。当时团队的想法很朴素——球迷不该对着加载进度条猜自己看到的是哪一版。</p>
        <p>这个朴素的坚持后来变成了登录面板的固定结构：每次改版，变更说明都写在顶部第二栏，你打开就能知道这一版动了什么。习惯在电脑上看比赛的人，也能在同一屏里找到数据刷新时间与客户端更新记录，不必来回切换页面。</p>
        <p>“你的主场，自有节奏”这句话就是从这儿长出来的。我们先让人站稳，再让人跑起来。</p>
      </div>
      <aside class="origin-note" aria-label="档案摘要">
        <p class="origin-note-title mono">ARCHIVE INDEX</p>
        <ul class="index-list">
          <li><span class="index-num">01</span>2021 · 导航页 1.0 上线</li>
          <li><span class="index-num">02</span>2022 · 赛程中心推出</li>
          <li><span class="index-num">03</span>2023 · 轮次回看归档成形</li>
          <li><span class="index-num">04</span>2024 · 更新记录与反馈入口整合</li>
          <li><span class="index-num">05</span>2025 · 数据对照视图扩展</li>
        </ul>
      </aside>
    </div>
  </section>

  <section class="section timeline-section" id="timeline" aria-labelledby="tl-title">
    <div class="wrap">
      <header class="section-head">
        <p class="eyebrow">版本档案 / RELEASE LOG</p>
        <h2 id="tl-title" class="section-title">五个节点，五次你能感觉到的变化</h2>
        <p class="section-sub">每一年只推进一件对观赛真正有用的事。往下翻，展开看当年到底改了什么。</p>
      </header>

      <figure class="tl-figure">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" loading="lazy" decoding="async" alt="从导航页 1.0 到赛程中心的等宽年份版本时间轴信息图">
      </figure>

      <nav class="tl-jump" aria-label="按年份跳转">
        <a class="tl-jump-link" href="#v2021">2021</a>
        <a class="tl-jump-link" href="#v2022">2022</a>
        <a class="tl-jump-link" href="#v2023">2023</a>
        <a class="tl-jump-link" href="#v2024">2024</a>
        <a class="tl-jump-link" href="#v2025">2025</a>
      </nav>

      <ol class="timeline">
        <li class="tl-item" id="v2021">
          <div class="tl-rail">
            <span class="tl-year">2021</span>
            <span class="tl-ver">v1.0</span>
          </div>
          <article class="tl-card">
            <h3 class="tl-title">导航页上线：先看清版本，再进入比赛</h3>
            <p>第一屏把版本号放在最上面。你在进入任何一场比赛前都能确认页面处于哪个状态，不必靠加载速度去感受。首次访问的人从此有了一个固定的出发点，路径也从这一屏开始分岔。</p>
            <details class="tl-more">
              <summary>展开这一年的能力变化</summary>
              <p>赛程入口、页面版本与进入按钮被集中在同一屏内，鼠标不用来回找。此后登录面板的变更说明固定落在顶部第二栏，改了什么、影响哪些操作，都写在你会看到的位置。</p>
            </details>
          </article>
        </li>

        <li class="tl-item" id="v2022">
          <div class="tl-rail">
            <span class="tl-year">2022</span>
            <span class="tl-ver">v2.0</span>
          </div>
          <article class="tl-card">
            <h3 class="tl-title">赛程中心：赛前、赛中、赛后放进同一个视图</h3>
            <p>三段式数据视图在这一年成形。开赛前看对阵与近期走势，比赛进行中盯关键数据，终场后调取完整记录，中间不需要跳去别的页面。常用数据的刷新间隔稳定在 30 秒。</p>
            <details class="tl-more">
              <summary>展开这一年的能力变化</summary>
              <p>赛程中心成为独立入口，导航页则保留为进入前的确认点。两边互相跳转，你在任何一侧都能回到赛程主线。</p>
            </details>
          </article>
        </li>

        <li class="tl-item" id="v2023">
          <div class="tl-rail">
            <span class="tl-year">2023</span>
            <span class="tl-ver">v2.6</span>
          </div>
          <article class="tl-card">
            <h3 class="tl-title">轮次回看归档：错过的比赛按轮次找得回来</h3>
            <p>集锦不再散落在时间线里，而是按轮次归档。目前已经形成 48 个轮次专题，单轮最多收录 16 场集锦，赛程中心与导航页之间可以双向跳转。</p>
            <details class="tl-more">
              <summary>展开这一年的能力变化</summary>
              <p>每轮专题都保留了当轮的完整场次结构，你可以先从某一轮的整体走势看起，再挑具体场次展开，回看的顺序和当时的赛程顺序一致。</p>
            </details>
          </article>
        </li>

        <li class="tl-item" id="v2024">
          <div class="tl-rail">
            <span class="tl-year">2024</span>
            <span class="tl-ver">v3.2</span>
          </div>
          <article class="tl-card">
            <h3 class="tl-title">更新记录与反馈入口整合：出问题知道去哪儿说</h3>
            <p>电脑端更新记录开始按月归档，近 12 个月累计发布 27 次功能与体验更新。同一年，页脚固定出现了反馈入口，加载异常、显示错位这类问题有了统一的提交去向。</p>
            <details class="tl-more">
              <summary>展开这一年的能力变化</summary>
              <p>从 3.2 版本起，登录面板自带变更说明卡片，当前稳定版本为 3.8。想逐条查看历次调整，可以到工具中心翻阅<a href="/tools/">乐鱼登录面板变更说明</a>，版本节点与对应的界面变化都在那儿。</p>
            </details>
          </article>
        </li>

        <li class="tl-item" id="v2025">
          <div class="tl-rail">
            <span class="tl-year">2025</span>
            <span class="tl-ver">v3.8</span>
          </div>
          <article class="tl-card">
            <h3 class="tl-title">数据对照视图：刷新节点摆在一起看</h3>
            <p>简体版进失球分布的更新时间，与电脑端更新记录并列显示在同一视图里。你可以横向比一比，判断眼前这组数字是什么时候落地的，再决定要不要再等等。</p>
            <details class="tl-more">
              <summary>展开这一年的能力变化</summary>
              <p>对照视图先在电脑端铺开，随后同步到自适应页面。同一场比赛，数据刷新与版本更新的先后顺序，一眼能理清。</p>
            </details>
          </article>
        </li>
      </ol>
    </div>
  </section>

  <section class="section team" aria-labelledby="team-title">
    <div class="wrap">
      <header class="section-head">
        <p class="eyebrow">团队 / CREW</p>
        <h2 id="team-title" class="section-title">42 个人，分三班守着同一块记分牌</h2>
        <p class="section-sub">数据、产品与客服轮值协作，赛事日的信息不掉线，赛后的归档不拖延。</p>
      </header>
      <div class="team-grid">
        <div class="kpi">
          <span class="kpi-num">18</span>
          <span class="kpi-label">数据编辑</span>
          <p>赛前整理对阵资料，赛中记录关键节点，赛后把每场集锦归进对应轮次。</p>
        </div>
        <div class="kpi">
          <span class="kpi-num">15</span>
          <span class="kpi-label">产品与技术</span>
          <p>维护数据刷新逻辑、发布版本更新，适配电脑端与移动端的浏览习惯。</p>
        </div>
        <div class="kpi">
          <span class="kpi-num">9</span>
          <span class="kpi-label">客服与社区</span>
          <p>工作日 9:00-18:00 轮值回复，把收到的反馈归类后转给对应同事跟进。</p>
        </div>
      </div>
      <div class="team-flow">
        <p>比赛密集的夜晚，编辑按场次分段值守，技术与客服保持在线；轮次归档在赛后统一处理，第二天打开赛程中心就能按轮次找到整轮的集锦。三方共用同一套归档规则，所以你在不同入口看到的轮次编号是一致的。</p>
      </div>
    </div>
  </section>

  <section class="section data" aria-labelledby="data-title">
    <div class="wrap">
      <div class="data-grid">
        <div class="data-copy">
          <p class="eyebrow">数据网络 / DATA NETWORK</p>
          <h2 id="data-title" class="section-title">8 家服务商的接口，撑起每天 12 万条赛事信息</h2>
          <p>赛事数据来自多家服务商的接口，我们把不同来源的赛况汇总到同一套视图里。赛前看对阵、赛中看走势、赛后看全场记录，三个阶段各有对应的展示方式。</p>
        </div>
        <div class="data-points">
          <ul>
            <li><strong>30 秒</strong>常用数据的刷新间隔，进失球分布的更新时间会标注在数字旁边。</li>
            <li><strong>12 个</strong>赛事大类，足球、篮球、网球、电竞按赛季阶段组织成专题。</li>
            <li><strong>26 个省份</strong>的服务覆盖，长三角、珠三角与西南地区的观赛需求最集中。</li>
            <li><strong>8 家</strong>赛事数据服务商的接口合作，日均处理赛事数据条目 12 万条。</li>
          </ul>
        </div>
      </div>
      <figure class="data-figure">
        <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" loading="lazy" decoding="async" alt="八家数据服务节点与省份覆盖连线交织成的抽象合作网络图">
        <figcaption>数据来源节点与省域观看需求的分布示意</figcaption>
      </figure>
    </div>
  </section>

  <section class="section trust" aria-labelledby="trust-title">
    <div class="wrap">
      <header class="section-head">
        <p class="eyebrow">资质 / CREDENTIALS</p>
        <h2 id="trust-title" class="section-title">把安全与规范做成日常动作</h2>
        <p class="section-sub">赛事数据与账号信息，值得用更严格的方式对待。</p>
      </header>
      <ul class="trust-list">
        <li class="trust-item">
          <span class="trust-idx mono">01</span>
          <div class="trust-body">
            <h3>信息安全等级保护二级备案</h3>
            <p>平台已完成信息安全等级保护二级备案。赛事数据的处理流程与账号信息的管理方式，按对应的安全要求执行。</p>
          </div>
        </li>
        <li class="trust-item">
          <span class="trust-idx mono">02</span>
          <div class="trust-body">
            <h3>年度数据安全自查</h3>
            <p>每年完成一次完整的数据安全自查，覆盖数据来源、存储与访问环节，检查结果进入下一年的改进清单。</p>
          </div>
        </li>
        <li class="trust-item">
          <span class="trust-idx mono">03</span>
          <div class="trust-body">
            <h3>内容安全与数据规范自查</h3>
            <p>连续三年通过内容安全与数据规范自查，专题内容上线前统一走一遍编辑流程。</p>
          </div>
        </li>
        <li class="trust-item">
          <span class="trust-idx mono">04</span>
          <div class="trust-body">
            <h3>年度数字观赛服务创新案例</h3>
            <p>行业媒体把年度数字观赛服务创新案例评给了平台，记录的是把版本说明、赛程组织与轮次回看串成一条线的产品思路。</p>
          </div>
        </li>
      </ul>
    </div>
  </section>

  <section class="section next" aria-labelledby="next-title">
    <div class="wrap">
      <header class="section-head">
        <p class="eyebrow">下一步 / NEXT</p>
        <h2 id="next-title" class="section-title">接下来，从这三条路走进赛场</h2>
      </header>
      <div class="next-links">
        <a class="next-link" href="/tools/">
          <span class="next-link-k mono">01</span>
          <span class="next-link-t">赛程工具与版本查看</span>
          <span class="next-link-d">赛前赛后数据视图、进失球分布更新时间、电脑端更新记录与登录面板变更说明，都收在这里。</span>
        </a>
        <a class="next-link" href="/help-center/">
          <span class="next-link-k mono">02</span>
          <span class="next-link-t">遇到问题怎么处理</span>
          <span class="next-link-d">浏览器反馈注册测试版怎么提交、页面加载不动怎么排查，帮助中心给出了分步说明。</span>
        </a>
        <a class="next-link" href="/connect/">
          <span class="next-link-k mono">03</span>
          <span class="next-link-t">找团队聊一聊</span>
          <span class="next-link-d">合作、媒体采访与使用支持，都可以直接联系客服同事，工作日有人轮值。</span>
        </a>
      </div>
      <p class="next-foot">想先看看平台最近在做什么，可以翻一翻<a href="/press/">赛场动态</a>。</p>
    </div>
  </section>
</main>

.page-about {
  background: var(--deep);
  color: var(--paper);
}

/* ---------- 首屏 ---------- */
.page-about .hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(24px, 5vw, 52px));
  padding-bottom: clamp(44px, 7vw, 88px);
  background:
    radial-gradient(120% 80% at 88% 0%, rgba(45, 226, 197, .18), transparent 62%),
    linear-gradient(180deg, #062A3A 0%, #021A24 100%);
}

.page-about .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(45, 226, 197, .09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(45, 226, 197, .09) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .95), transparent 88%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .95), transparent 88%);
  pointer-events: none;
}

.page-about .hero .wrap {
  position: relative;
  z-index: 1;
}

.page-about .breadcrumb,
.page-about .breadcrumb-list,
.page-about .breadcrumb a {
  color: var(--steel);
}

.page-about .breadcrumb a:hover {
  color: var(--cyan);
}

.page-about .hero-grid {
  display: grid;
  gap: clamp(28px, 4vw, 44px);
  margin-top: clamp(20px, 4vw, 36px);
}

.page-about .hero h1 {
  font-family: var(--font-cond);
  font-size: clamp(34px, 5.2vw, 62px);
  line-height: 1.1;
  letter-spacing: .01em;
  font-weight: 700;
  color: var(--paper);
  margin: .34em 0 .52em;
}

.page-about .hero .lede {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.85;
  color: var(--mist);
  max-width: 54ch;
  margin: 0;
}

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

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

.page-about .hero-shot {
  position: relative;
  margin: 0;
  border: 1px solid var(--line-cyan);
  background: var(--ink);
}

.page-about .hero-shot::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 36px;
  height: 36px;
  border-top: 2px solid var(--cyan);
  border-right: 2px solid var(--cyan);
  pointer-events: none;
}

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

.page-about .hero-shot figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--steel);
  padding: 10px 14px;
  border-top: 1px solid var(--line-soft);
}

/* ---------- 通用章节 ---------- */
.page-about .section {
  padding-block: clamp(46px, 7vw, 92px);
}

.page-about .section-title {
  color: var(--paper);
  font-family: var(--font-cond);
  letter-spacing: .01em;
}

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

.page-about .section-sub {
  color: var(--steel);
  line-height: 1.8;
  max-width: 60ch;
}

/* ---------- 起点 ---------- */
.page-about .origin {
  background: linear-gradient(180deg, rgba(11, 59, 82, .72), rgba(6, 42, 58, .2));
  border-top: 1px solid var(--line-soft);
}

.page-about .origin-grid {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
}

.page-about .origin-copy p {
  color: var(--mist);
  line-height: 1.9;
  font-size: 15.5px;
  margin: 0 0 16px;
  max-width: 62ch;
}

.page-about .origin-copy p:last-child {
  margin-bottom: 0;
  color: var(--cyan);
  font-weight: 600;
}

.page-about .origin-note {
  position: relative;
  border: 1px solid var(--line);
  background: rgba(2, 26, 36, .62);
  padding: clamp(18px, 2.6vw, 26px);
}

.page-about .origin-note::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  width: 26px;
  height: 26px;
  border-left: 2px solid var(--cyan);
  border-top: 2px solid var(--cyan);
}

.page-about .origin-note-title {
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--cyan);
  margin: 0 0 14px;
}

.page-about .origin-note .index-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-about .origin-note .index-list li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
  color: var(--mist);
}

.page-about .origin-note .index-list li:last-child {
  border-bottom: 0;
}

.page-about .origin-note .index-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--orange);
  flex: none;
}

/* ---------- 时间轴 ---------- */
.page-about .timeline-section {
  background:
    linear-gradient(180deg, rgba(2, 26, 36, .55), rgba(6, 42, 58, .45)),
    var(--deep);
  border-top: 1px solid var(--line-soft);
}

.page-about .tl-figure {
  margin: 0 0 clamp(20px, 3vw, 30px);
  border: 1px solid var(--line-soft);
  background: var(--ink);
}

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

.page-about .tl-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(24px, 4vw, 36px);
}

.page-about .tl-jump-link {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--mist);
  border: 1px solid var(--line);
  padding: 7px 14px;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.page-about .tl-jump-link:hover,
.page-about .tl-jump-link:focus-visible {
  color: var(--ink);
  background: var(--cyan);
  border-color: var(--cyan);
}

.page-about .timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(18px, 2.6vw, 28px);
}

.page-about .tl-item {
  position: relative;
  display: grid;
  gap: 10px;
  padding-left: 20px;
  border-left: 1px solid var(--line-cyan);
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.page-about .tl-rail {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.page-about .tl-year {
  font-family: var(--font-mono);
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: .05em;
  color: var(--orange);
  line-height: 1.1;
}

.page-about .tl-ver {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--steel);
}

.page-about .tl-card {
  position: relative;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(11, 59, 82, .88), rgba(6, 42, 58, .88));
  padding: clamp(18px, 2.6vw, 28px);
}

.page-about .tl-card::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  width: 24px;
  height: 24px;
  border-left: 2px solid var(--cyan);
  border-top: 2px solid var(--cyan);
}

.page-about .tl-title {
  margin: 0 0 10px;
  font-size: clamp(16.5px, 1.9vw, 21px);
  line-height: 1.5;
  font-weight: 600;
  color: var(--paper);
}

.page-about .tl-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--mist);
}

.page-about .tl-more {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-soft);
}

.page-about .tl-more summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--cyan);
}

.page-about .tl-more summary::-webkit-details-marker {
  display: none;
}

.page-about .tl-more summary::before {
  content: "+";
  font-size: 15px;
  line-height: 1;
  width: 14px;
  display: inline-block;
}

.page-about .tl-more[open] summary::before {
  content: "−";
}

.page-about .tl-more p {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--steel);
}

.page-about .tl-more a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 团队 ---------- */
.page-about .team {
  background: linear-gradient(180deg, rgba(11, 59, 82, .6), rgba(6, 42, 58, .3));
  border-top: 1px solid var(--line-soft);
}

.page-about .team-grid {
  display: grid;
  gap: 14px;
}

.page-about .team-grid .kpi {
  border: 1px solid var(--line);
  background: rgba(2, 26, 36, .55);
  padding: clamp(18px, 2.4vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-about .team-grid .kpi-num {
  font-family: var(--font-mono);
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1;
  color: var(--orange);
  letter-spacing: .02em;
}

.page-about .team-grid .kpi-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--cyan);
}

.page-about .team-grid .kpi p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--mist);
}

.page-about .team-flow {
  margin-top: clamp(20px, 3vw, 30px);
  border-left: 2px solid var(--line-cyan);
  padding-left: clamp(14px, 2.2vw, 22px);
}

.page-about .team-flow p {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--mist);
  max-width: 74ch;
}

/* ---------- 数据网络 ---------- */
.page-about .data {
  background: var(--deep);
  border-top: 1px solid var(--line-soft);
}

.page-about .data-grid {
  display: grid;
  gap: clamp(24px, 3.5vw, 44px);
}

.page-about .data-copy p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--mist);
  max-width: 56ch;
}

.page-about .data-points ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-about .data-points li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 14px 0 14px 16px;
  border-left: 2px solid var(--orange);
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--mist);
}

.page-about .data-points strong {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--paper);
  letter-spacing: .04em;
}

.page-about .data-figure {
  margin: clamp(26px, 4vw, 42px) 0 0;
  border: 1px solid var(--line-soft);
  background: var(--ink);
}

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

.page-about .data-figure figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--steel);
  padding: 10px 14px;
  border-top: 1px solid var(--line-soft);
}

/* ---------- 资质 ---------- */
.page-about .trust {
  background: linear-gradient(180deg, rgba(11, 59, 82, .55), rgba(2, 26, 36, .5));
  border-top: 1px solid var(--line-soft);
}

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

.page-about .trust-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  padding: clamp(16px, 2.4vw, 24px) 0;
  border-top: 1px solid var(--line-soft);
}

.page-about .trust-item:last-child {
  border-bottom: 1px solid var(--line-soft);
}

.page-about .trust-idx {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--cyan);
  padding-top: 4px;
}

.page-about .trust-body h3 {
  margin: 0 0 8px;
  font-size: clamp(15.5px, 1.7vw, 18px);
  font-weight: 600;
  color: var(--paper);
}

.page-about .trust-body p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--steel);
  max-width: 68ch;
}

/* ---------- 下一步 ---------- */
.page-about .next {
  background: var(--deep);
  border-top: 1px solid var(--line-soft);
}

.page-about .next-links {
  display: grid;
  gap: 12px;
}

.page-about .next-link {
  position: relative;
  display: grid;
  gap: 6px;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--line);
  background: rgba(11, 59, 82, .5);
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.page-about .next-link:hover,
.page-about .next-link:focus-visible {
  border-color: var(--cyan);
  background: rgba(11, 59, 82, .85);
  transform: translateY(-2px);
}

.page-about .next-link-k {
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--orange);
}

.page-about .next-link-t {
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 600;
  color: var(--paper);
}

.page-about .next-link-d {
  font-size: 14px;
  line-height: 1.8;
  color: var(--steel);
}

.page-about .next-foot {
  margin: clamp(18px, 3vw, 26px) 0 0;
  font-size: 14px;
  color: var(--steel);
}

.page-about .next-foot a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .page-about .team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

@media (min-width: 900px) {
  .page-about .hero-grid {
    grid-template-columns: 7fr 5fr;
    align-items: end;
  }

  .page-about .origin-grid {
    grid-template-columns: 1.45fr 1fr;
    align-items: start;
  }

  .page-about .data-grid {
    grid-template-columns: 5fr 7fr;
    align-items: start;
  }

  .page-about .data-points li {
    padding-block: 12px;
  }

  .page-about .tl-item {
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 0;
    padding-left: 0;
    border-left: 0;
  }

  .page-about .tl-rail {
    display: block;
    position: relative;
    padding-top: 26px;
    text-align: right;
  }

  .page-about .tl-year {
    display: inline-block;
    position: relative;
    z-index: 2;
    background: var(--deep);
    padding: 2px 6px;
    transform: translateX(16px);
  }

  .page-about .tl-ver {
    display: block;
    margin-top: 6px;
    padding-right: 4px;
  }

  .page-about .tl-card {
    padding-left: clamp(30px, 3.4vw, 44px);
  }
}

@media (min-width: 1100px) {
  .page-about .timeline {
    gap: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .next-link,
  .page-about .tl-jump-link {
    transition: none;
  }

  .page-about .next-link:hover,
  .page-about .next-link:focus-visible {
    transform: none;
  }
}