.page-news {
  --news-side-w: 176px;
  --news-indent: 14px;
  background: var(--ink-900);
  color: var(--white-100);
}

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

.page-news .news-hero {
  padding: calc(var(--header-h) + 48px) 0 56px;
  border-bottom: 1px solid var(--grid-600);
}

.page-news .news-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: end;
}

.page-news .news-hero-main .breadcrumb {
  margin-bottom: 24px;
}

.page-news .news-hero-title {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(56px, 14vw, 128px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--white-100);
}

.page-news .news-hero-lede {
  margin: 0;
  max-width: 44ch;
  font-size: 17px;
  line-height: 1.75;
  color: var(--muted-400);
}

.page-news .news-hero-facts {
  list-style: none;
  margin: 32px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--grid-600);
  display: grid;
  gap: 12px;
}

.page-news .news-hero-facts li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--white-100);
}

.page-news .news-hero-facts .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 700;
  color: var(--neon-500);
  min-width: 3.4em;
}

@media (min-width: 960px) {
  .page-news .news-hero {
    padding-bottom: 88px;
  }

  .page-news .news-hero-grid {
    grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
    gap: 72px;
  }
}

/* ---------- 日志主体 ---------- */

.page-news .news-log-section {
  padding: var(--band) 0;
}

.page-news .news-log-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

.page-news .news-side-label {
  margin: 0 0 14px;
  color: var(--muted-400);
}

.page-news .news-filter {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}

.page-news .news-filter a {
  display: inline-block;
  padding: 6px 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--muted-400);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}

.page-news .news-filter a:hover,
.page-news .news-filter a:focus-visible {
  color: var(--neon-500);
  border-bottom-color: var(--neon-500);
}

.page-news .news-log-head {
  margin-bottom: 36px;
}

@media (min-width: 1000px) {
  .page-news .news-log-layout {
    grid-template-columns: var(--news-side-w) minmax(0, 1fr);
    gap: 56px;
  }

  .page-news .news-side {
    position: sticky;
    top: calc(var(--header-h) + 32px);
    align-self: start;
  }

  .page-news .news-filter {
    flex-direction: column;
    gap: 0;
  }

  .page-news .news-filter a {
    display: block;
    padding: 9px 0;
    border-bottom: 1px solid var(--grid-600);
  }

  .page-news .news-filter li:last-child a {
    border-bottom: 0;
  }
}

/* ---------- 条目 ---------- */

.page-news .news-entry {
  position: relative;
  padding: 28px 0 28px var(--news-indent);
  border-top: 1px solid var(--grid-600);
  border-left: 2px solid transparent;
  transition: border-left-color 220ms var(--ease);
}

.page-news .news-entry:hover,
.page-news .news-entry:focus-within {
  border-left-color: var(--neon-500);
}

.page-news .news-entry--lead {
  border-top: 0;
  padding-top: 0;
  padding-bottom: 40px;
}

.page-news .news-lead-media {
  margin: 0 0 28px;
  aspect-ratio: 14 / 9;
}

.page-news .news-entry-grid {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 14px;
}

.page-news .news-entry-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--muted-400);
  text-align: right;
  padding-top: 5px;
}

.page-news .news-entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.page-news .news-entry-time {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--orange-500);
}

.page-news .news-entry-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: var(--white-100);
}

.page-news .news-entry--lead .news-entry-title {
  font-size: clamp(26px, 5.2vw, 42px);
  line-height: 1.14;
}

.page-news .news-entry-text {
  margin: 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.72;
  color: var(--muted-400);
}

.page-news .news-entry-link {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--neon-500);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 180ms var(--ease);
}

.page-news .news-entry-link:hover,
.page-news .news-entry-link:focus-visible {
  border-bottom-color: var(--neon-500);
}

@media (min-width: 700px) {
  .page-news .news-entry-grid {
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 24px;
  }

  .page-news .news-entry-title {
    font-size: 26px;
  }
}

/* ---------- 分类说明 ---------- */

.page-news .news-topics {
  padding: var(--band) 0;
  background: var(--ink-800);
}

.page-news .news-topic-list {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--grid-600);
}

.page-news .news-topic {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 28px 0;
  background: var(--ink-800);
}

.page-news .news-topic-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--violet-500);
}

.page-news .news-topic-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.2;
  color: var(--white-100);
}

.page-news .news-topic-text {
  margin: 0;
  max-width: 58ch;
  font-size: 16px;
  line-height: 1.72;
  color: var(--muted-400);
}

.page-news .news-topic-cadence {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--orange-500);
}

@media (min-width: 820px) {
  .page-news .news-topic {
    grid-template-columns: 3.5rem minmax(0, 1fr) 11rem;
    gap: 32px;
    align-items: start;
    padding: 36px 24px;
  }

  .page-news .news-topic-cadence {
    text-align: right;
    padding-top: 4px;
  }
}

/* ---------- 图文分栏 ---------- */

.page-news .news-structure,
.page-news .news-terminal {
  padding: var(--band) 0;
}

.page-news .news-panel-nodes {
  padding: var(--band) 0;
  background: var(--ink-800);
}

.page-news .news-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.page-news .news-split-media {
  margin: 0;
  aspect-ratio: 3 / 2;
}

.page-news .news-split-media--tall {
  aspect-ratio: 4 / 3;
}

.page-news .news-split-text {
  margin: 0 0 24px;
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted-400);
}

.page-news .news-structure-list,
.page-news .news-terminal-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-news .news-structure-list li {
  padding: 14px 0;
  border-top: 1px solid var(--grid-600);
  font-size: 15px;
  line-height: 1.7;
  color: var(--white-100);
}

.page-news .news-structure-key {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-400);
}

.page-news .news-terminal-list {
  display: grid;
  gap: 20px;
  margin-bottom: 28px;
}

.page-news .news-terminal-list li {
  padding-left: 16px;
  border-left: 2px solid var(--panel-700);
}

.page-news .news-terminal-list h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.3;
  color: var(--white-100);
}

.page-news .news-terminal-list p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted-400);
}

.page-news .news-terminal-link {
  text-decoration: none;
}

@media (min-width: 900px) {
  .page-news .news-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 64px;
  }

  .page-news .news-split--flip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .page-news .news-split--flip .news-split-media {
    grid-column: 1;
    grid-row: 1;
  }

  .page-news .news-split--flip .news-split-body {
    grid-column: 2;
    grid-row: 1;
  }
}

/* ---------- 功能节点 ---------- */

.page-news .news-node-flow {
  margin-top: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--grid-600);
}

.page-news .news-node {
  padding: 28px 0;
  background: var(--ink-800);
}

.page-news .news-node-step {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--neon-500);
}

.page-news .news-node-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.22;
  color: var(--white-100);
}

.page-news .news-node-text {
  margin: 0;
  max-width: 44ch;
  font-size: 15px;
  line-height: 1.72;
  color: var(--muted-400);
}

@media (min-width: 840px) {
  .page-news .news-node-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    background: transparent;
    border-top: 1px solid var(--grid-600);
  }

  .page-news .news-node {
    padding: 32px 28px 32px 0;
    border-right: 1px solid var(--grid-600);
    background: transparent;
  }

  .page-news .news-node:last-child {
    border-right: 0;
    padding-right: 0;
  }

  .page-news .news-node + .news-node {
    padding-left: 28px;
  }
}

/* ---------- 下一阶段 ---------- */

.page-news .news-next {
  padding: var(--band) 0;
  background: var(--panel-700);
}

.page-news .news-next-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
}

.page-news .news-next-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 24px;
}

.page-news .news-next-item {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--grid-600);
}

.page-news .news-next-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--neon-500);
  padding-top: 4px;
}

.page-news .news-next-item h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.3;
  color: var(--white-100);
}

.page-news .news-next-item p {
  margin: 0;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted-400);
}

.page-news .news-next-foot {
  margin: 40px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--grid-600);
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted-400);
}

.page-news .news-next-foot a {
  color: var(--neon-500);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 180ms var(--ease);
}

.page-news .news-next-foot a:hover,
.page-news .news-next-foot a:focus-visible {
  border-bottom-color: var(--neon-500);
}

@media (min-width: 900px) {
  .page-news .news-next-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 64px;
    align-items: start;
  }

  .page-news .news-next-head {
    position: sticky;
    top: calc(var(--header-h) + 32px);
  }
}
</main>
<<<END>>>

等等，我不小心在最后多写了 `</main>`。让我修正一下——main_html 应该到 `</main>` 结束，后面不能再有内容。

另外我再复查一下：在 `news-next-foot` 里用了 `/cooperation/` 和 `/team/` 这两个链接——这两个都是合法路由。很好。

其实重新检查一下——我确实在 `</main>` 之后不小心写了一个多余的 `</main>`。需要删掉。

重新输出修正后的版本。

其实更仔细地看一下——主 HTML 是以 `</main>` 结束的，然后直接跟着 ``。最后多出来的那个 `</main>` 在页面 CSS 后面。这是错的，得删掉。

让我把整个内容正确地重新输出一遍。
<main id="main-content" class="page-news">

  <section class="news-hero" data-chapter="本阶段更新">
    <div class="container news-hero-grid">
      <div class="news-hero-main">
        <nav class="breadcrumb" aria-label="页面位置">
          <ul>
            <li><a href="/">首页</a></li>
            <li>品牌日志</li>
          </ul>
        </nav>
        <p class="eyebrow">2026 赛季 · 第八个连续赛季</p>
        <h1 class="news-hero-title">品牌日志</h1>
      </div>
      <div class="news-hero-aside">
        <p class="news-hero-lede">
          球队库补了哪些字段、数据面板升到哪一版、平板端的布局又改过几次，爱游戏赛场把这些改动都按赛季阶段记了下来。想知道这个赛季又动了哪些地方，往下翻就能看见。
        </p>
        <ul class="news-hero-facts">
          <li><span class="num">60–80</span><span>条更新记录 / 每赛季</span></li>
          <li><span class="num">04</span><span>类改动方向</span></li>
          <li><span class="num">12</span><span>人资料校对团队</span></li>
        </ul>
      </div>
    </div>
  </section>

  <section class="news-log-section" data-chapter="本阶段更新">
    <div class="container news-log-layout">
      <aside class="news-side" aria-label="更新分类导航">
        <p class="annotation news-side-label">更新分类</p>
        <ul class="news-filter">
          <li><a href="#topic-league">联赛接入</a></li>
          <li><a href="#topic-version">版本更新</a></li>
          <li><a href="#topic-format">资料格式</a></li>
          <li><a href="#topic-terminal">终端体验</a></li>
        </ul>
      </aside>

      <div class="news-log">
        <header class="section-head news-log-head">
          <p class="section-index">01</p>
          <h2 class="section-title">本阶段更新总览</h2>
          <p class="section-lede">最近一轮赛程前后，四类改动各有落点。条目按时间倒序排列，每一行都可以点开看完整说明。</p>
        </header>

        <article class="news-entry news-entry--lead" data-reveal>
          <figure class="media-frame media-frame--wide news-lead-media">
            <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="深色数据面板切片中突出显示 AYX 数据面板 4.2 版本号与积分榜读秒刷新数字">
            <figcaption>数据面板 4.2 的积分榜读秒刷新与赛后分布入口</figcaption>
          </figure>
          <div class="news-entry-grid">
            <span class="news-entry-num num">01</span>
            <div class="news-entry-body">
              <div class="news-entry-meta">
                <span class="tag tag--violet">版本更新</span>
                <span class="news-entry-time">本轮</span>
              </div>
              <h3 class="news-entry-title">AYX 数据面板 4.2 上线，积分榜开始读秒刷新</h3>
              <p class="news-entry-text">
                核心榜单在比赛进行中连续刷新，排名变化不再等到终场才同步。射门、控球、犯规三类赛后分布并入同一入口，比赛结束后可以直接对照直播印象复盘，不用在多张表之间来回切。
              </p>
              <a class="news-entry-link" href="/download/">到下载中心拿新版本</a>
            </div>
          </div>
        </article>

        <article class="news-entry" data-reveal>
          <div class="news-entry-grid">
            <span class="news-entry-num num">02</span>
            <div class="news-entry-body">
              <div class="news-entry-meta">
                <span class="tag tag--neon">联赛接入</span>
                <span class="news-entry-time">上阶段</span>
              </div>
              <h3 class="news-entry-title">新一批联赛球队条目补入，基础字段同步扩充</h3>
              <p class="news-entry-text">
                新接入的球队条目带上了主场、成立年份与近三个赛季的排名走势。整理者导入后不用再手工补空列，直接可以进入二次加工。
              </p>
            </div>
          </div>
        </article>

        <article class="news-entry" data-reveal>
          <div class="news-entry-grid">
            <span class="news-entry-num num">03</span>
            <div class="news-entry-body">
              <div class="news-entry-meta">
                <span class="tag tag--orange">资料格式</span>
                <span class="news-entry-time">两周前</span>
              </div>
              <h3 class="news-entry-title">球队库分卷粒度调细，单卷压到 80MB 以内</h3>
              <p class="news-entry-text">
                原来按整季打包的联赛资料拆成更小的分卷，弱网环境下也能一段一段拿完。已经下载过整卷的用户，下一阶段可以只补差异部分。
              </p>
            </div>
          </div>
        </article>

        <article class="news-entry" data-reveal>
          <div class="news-entry-grid">
            <span class="news-entry-num num">04</span>
            <div class="news-entry-body">
              <div class="news-entry-meta">
                <span class="tag tag--violet">终端体验</span>
                <span class="news-entry-time">本轮</span>
              </div>
              <h3 class="news-entry-title">平板横屏支持三个联赛并排查看</h3>
              <p class="news-entry-text">
                横屏时三个联赛的赛程与积分变化各占一栏，切换联赛靠触控横向滑动，不再跳回列表重选。夜间长时间看赛，眼睛和手指都省力。
              </p>
            </div>
          </div>
        </article>

        <article class="news-entry" data-reveal>
          <div class="news-entry-grid">
            <span class="news-entry-num num">05</span>
            <div class="news-entry-body">
              <div class="news-entry-meta">
                <span class="tag tag--violet">版本更新</span>
                <span class="news-entry-time">本赛季初</span>
              </div>
              <h3 class="news-entry-title">赛后核对入口并进数据面板</h3>
              <p class="news-entry-text">
                核对入口不再单独开页，跟积分榜放在同一块画布里。看完比分往下一划，射门、控球、犯规三类分布就在眼前。
              </p>
            </div>
          </div>
        </article>

        <article class="news-entry" data-reveal>
          <div class="news-entry-grid">
            <span class="news-entry-num num">06</span>
            <div class="news-entry-body">
              <div class="news-entry-meta">
                <span class="tag tag--orange">资料格式</span>
                <span class="news-entry-time">上阶段</span>
              </div>
              <h3 class="news-entry-title">资料包新增 PDF 版本，排版直接可读</h3>
              <p class="news-entry-text">
                需要拿去开会或直接印发时，PDF 版本省去二次排版；要拆字段做统计的，仍然走 CSV 那一套。两种格式同一批内容，按需取用。
              </p>
            </div>
          </div>
        </article>

        <article class="news-entry" data-reveal>
          <div class="news-entry-grid">
            <span class="news-entry-num num">07</span>
            <div class="news-entry-body">
              <div class="news-entry-meta">
                <span class="tag tag--violet">终端体验</span>
                <span class="news-entry-time">近三周</span>
              </div>
              <h3 class="news-entry-title">常用页面收藏可以按联赛和栏目分组</h3>
              <p class="news-entry-text">
                收藏入口最多保存 60 个，按联赛、栏目和使用频率分成三组。每天固定要翻的那几个页面，开机就能点到。
              </p>
            </div>
          </div>
        </article>

        <article class="news-entry" data-reveal>
          <div class="news-entry-grid">
            <span class="news-entry-num num">08</span>
            <div class="news-entry-body">
              <div class="news-entry-meta">
                <span class="tag tag--neon">联赛接入</span>
                <span class="news-entry-time">本赛季初</span>
              </div>
              <h3 class="news-entry-title">联赛覆盖扩到 46 个，球队条目过 3200 支</h3>
              <p class="news-entry-text">
                新增联赛球队条目经过资料校对后统一发布，赛事录入与校对分头处理，接入一批就上线一批，不压到赛季末集中放。
              </p>
            </div>
          </div>
        </article>
      </div>
    </div>
  </section>

  <section class="news-topics" data-chapter="按类型翻记录">
    <div class="container">
      <header class="section-head">
        <p class="section-index">02</p>
        <h2 class="section-title">按类型翻记录</h2>
        <p class="section-lede">四类改动各有自己的节奏。想找跟手头事情最沾边的那一批，从下面挑一类往下看就行。</p>
      </header>

      <ul class="news-topic-list">
        <li class="news-topic" id="topic-league" data-reveal>
          <span class="news-topic-num num">01</span>
          <div class="news-topic-body">
            <h3 class="news-topic-title">联赛接入</h3>
            <p class="news-topic-text">
              新联赛与球队条目一般成批进来，资料校对先过一遍基础字段，赛事录入再补轮次与排名。做资料整理的人最关心这一类，因为每次接入都会让资料包的目录结构动一次。
            </p>
          </div>
          <p class="news-topic-cadence">赛季前后各一轮</p>
        </li>
        <li class="news-topic" id="topic-version" data-reveal>
          <span class="news-topic-num num">02</span>
          <div class="news-topic-body">
            <h3 class="news-topic-title">版本更新</h3>
            <p class="news-topic-text">
              数据面板的大版本一个赛季一到两次，中间穿插读秒刷新、榜单排序这类小幅修正。终端体验团队会跟着版本走一轮回归，确认旧收藏和新入口都不打架。
            </p>
          </div>
          <p class="news-topic-cadence">每赛季 1–2 次</p>
        </li>
        <li class="news-topic" id="topic-format" data-reveal>
          <span class="news-topic-num num">03</span>
          <div class="news-topic-body">
            <h3 class="news-topic-title">资料格式</h3>
            <p class="news-topic-text">
              分卷粒度、字段顺序、文件版本号都归在这一类。改动多数来自使用者的反馈，比如弱网下载中断、表格列对不齐。每赛季通常动一到两次，跟着资料包的更新节奏走。
            </p>
          </div>
          <p class="news-topic-cadence">每赛季 1–2 次</p>
        </li>
        <li class="news-topic" id="topic-terminal" data-reveal>
          <span class="news-topic-num num">04</span>
          <div class="news-topic-body">
            <h3 class="news-topic-title">终端体验</h3>
            <p class="news-topic-text">
              平板横屏布局、收藏分组、快捷入口这些都属于这一类，改动最频繁。夜间的横屏用户多，一轮赛程里往往就有一次小调整，看看触控距离和视线落点顺不顺。
            </p>
          </div>
          <p class="news-topic-cadence">按轮次跟进</p>
        </li>
      </ul>
    </div>
  </section>

  <section class="news-structure" data-chapter="联赛接入与资料结构">
    <div class="container">
      <div class="news-split">
        <div class="news-split-body">
          <header class="section-head">
            <p class="section-index">03</p>
            <h2 class="section-title">新联赛进来，资料里会多出什么</h2>
          </header>
          <p class="news-split-text">
            一批联赛接入后，球队库不是简单加几行名字。每支球队会同步补上主场、成立年份、近三季排名走势和常用简称，校对通过之后才对外发布。资料包的分卷目录会按新联赛各自成章，旧赛季的卷册原样保留，不用重新下载。
          </p>
          <ul class="news-structure-list">
            <li><span class="news-structure-key">新增字段</span>主场、成立年份、近三季排名走势、常用简称</li>
            <li><span class="news-structure-key">发布方式</span>校对完成一批就上线一批，不等赛季末集中处理</li>
            <li><span class="news-structure-key">旧资料</span>历史赛季分卷保持原样，新增内容只落在当前赛季目录</li>
          </ul>
        </div>
        <figure class="media-frame news-split-media">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="多个联赛标识以环形排列的深色数据抽象图，环绕中心球队资料条目" loading="lazy" decoding="async">
          <figcaption>新增联赛按环形结构并入现有球队库目录</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="news-panel-nodes" data-chapter="数据面板的功能节点">
    <div class="container">
      <header class="section-head">
        <p class="section-index">04</p>
        <h2 class="section-title">数据面板的几步走</h2>
        <p class="section-lede">从能看比分，到能对照直播印象复盘，功能是一步一步加上来的。回头看这几步，用起来会更有数。</p>
      </header>

      <div class="news-node-flow">
        <article class="news-node" data-reveal>
          <span class="news-node-step num">STEP 01</span>
          <h3 class="news-node-title">积分榜读秒刷新</h3>
          <p class="news-node-text">
            比赛进行中核心榜单连着刷新，排名变化跟着比分走。盯多场同时开打的轮次时，不用隔一会儿手动按下刷新。
          </p>
        </article>
        <article class="news-node" data-reveal>
          <span class="news-node-step num">STEP 02</span>
          <h3 class="news-node-title">赛后核对入口合并</h3>
          <p class="news-node-text">
            终场之后核对入口就在榜单下方，不再单开一页。从看比分到看分布，中间不打断。
          </p>
        </article>
        <article class="news-node" data-reveal>
          <span class="news-node-step num">STEP 03</span>
          <h3 class="news-node-title">三类分布对照</h3>
          <p class="news-node-text">
            射门、控球、犯规三类分布并排摆开，和直播时的直观印象对着看，哪些判断需要修正一眼就清楚。
          </p>
        </article>
      </div>
    </div>
  </section>

  <section class="news-terminal" data-chapter="终端体验的改动">
    <div class="container">
      <div class="news-split news-split--flip">
        <figure class="media-frame news-split-media news-split-media--tall">
          <img src="{zhanqunpic:h:1050w:1400}" width="1400" height="1050" alt="横屏平板并排展示三个联赛的赛程与积分变化，手指正在横向切换联赛标签" loading="lazy" decoding="async">
          <figcaption>平板横屏下三联赛并排，触控滑动即可切换</figcaption>
        </figure>
        <div class="news-split-body">
          <header class="section-head">
            <p class="section-index">05</p>
            <h2 class="section-title">平板端这几处改完，顺手多了</h2>
          </header>
          <p class="news-split-text">
            夜里横屏看赛的人多，改动基本围着这块屏转。三联赛并排解决了来回切页的麻烦，收藏分组解决了入口越攒越乱的问题，快捷入口则让每天固定要翻的那几页一开机就能点到。
          </p>
          <ul class="news-terminal-list">
            <li>
              <h3>三联赛并排</h3>
              <p>赛程与积分变化各占一栏，横向滑动切换，视线不用重新定位。</p>
            </li>
            <li>
              <h3>收藏分组</h3>
              <p>按联赛、栏目、使用频率分组，最多存 60 个入口，找起来不靠记忆。</p>
            </li>
            <li>
              <h3>常用页面快捷入口</h3>
              <p>高频率访问的页面单独拎出来，开机直达，省掉一层层点进去的过程。</p>
            </li>
          </ul>
          <a class="btn btn-ghost news-terminal-link" href="/answers/">遇到问题去答疑中心</a>
        </div>
      </div>
    </div>
  </section>

  <section class="news-next" data-chapter="接下来一个阶段">
    <div class="container">
      <div class="news-next-grid">
        <header class="section-head news-next-head">
          <p class="section-index">06</p>
          <h2 class="section-title">接下来一个阶段</h2>
          <p class="section-lede">方向已经排好队，落地节奏会照旧写进日志里。</p>
        </header>
        <ul class="news-next-list">
          <li class="news-next-item">
            <span class="num news-next-num">01</span>
            <div>
              <h3>球队库资料字段扩充</h3>
              <p>在现有字段基础上补入更多可与赛程对应的维度，让二次整理的匹配步骤再少一点。</p>
            </div>
          </li>
          <li class="news-next-item">
            <span class="num news-next-num">02</span>
            <div>
              <h3>筛选方式调整</h3>
              <p>联赛与轮次的筛选组合会支持多选，方便一次拉出跨联赛的对阵清单。</p>
            </div>
          </li>
          <li class="news-next-item">
            <span class="num news-next-num">03</span>
            <div>
              <h3>赛后核对面板提速</h3>
              <p>终场后的三类分布对照将进一步缩短出现时间，具体节奏会在上线后随日志公布。</p>
            </div>
          </li>
        </ul>
      </div>
      <p class="news-next-foot">
        想聊资料共建或者栏目合作，走<a href="/cooperation/">商务合作</a>；想先看看是谁在做这些事，走<a href="/team/">品牌团队</a>。
      </p>
    </div>
  </section>

</main>

.page-news {
  --news-side-w: 176px;
  --news-indent: 14px;
  background: var(--ink-900);
  color: var(--white-100);
}

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

.page-news .news-hero {
  padding: calc(var(--header-h) + 48px) 0 56px;
  border-bottom: 1px solid var(--grid-600);
}

.page-news .news-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: end;
}

.page-news .news-hero-main .breadcrumb {
  margin-bottom: 24px;
}

.page-news .news-hero-title {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(56px, 14vw, 128px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--white-100);
}

.page-news .news-hero-lede {
  margin: 0;
  max-width: 44ch;
  font-size: 17px;
  line-height: 1.75;
  color: var(--muted-400);
}

.page-news .news-hero-facts {
  list-style: none;
  margin: 32px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--grid-600);
  display: grid;
  gap: 12px;
}

.page-news .news-hero-facts li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--white-100);
}

.page-news .news-hero-facts .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 700;
  color: var(--neon-500);
  min-width: 3.4em;
}

@media (min-width: 960px) {
  .page-news .news-hero {
    padding-bottom: 88px;
  }

  .page-news .news-hero-grid {
    grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
    gap: 72px;
  }
}

/* ---------- 日志主体 ---------- */

.page-news .news-log-section {
  padding: var(--band) 0;
}

.page-news .news-log-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

.page-news .news-side-label {
  margin: 0 0 14px;
  color: var(--muted-400);
}

.page-news .news-filter {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}

.page-news .news-filter a {
  display: inline-block;
  padding: 6px 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--muted-400);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}

.page-news .news-filter a:hover,
.page-news .news-filter a:focus-visible {
  color: var(--neon-500);
  border-bottom-color: var(--neon-500);
}

.page-news .news-log-head {
  margin-bottom: 36px;
}

@media (min-width: 1000px) {
  .page-news .news-log-layout {
    grid-template-columns: var(--news-side-w) minmax(0, 1fr);
    gap: 56px;
  }

  .page-news .news-side {
    position: sticky;
    top: calc(var(--header-h) + 32px);
    align-self: start;
  }

  .page-news .news-filter {
    flex-direction: column;
    gap: 0;
  }

  .page-news .news-filter a {
    display: block;
    padding: 9px 0;
    border-bottom: 1px solid var(--grid-600);
  }

  .page-news .news-filter li:last-child a {
    border-bottom: 0;
  }
}

/* ---------- 条目 ---------- */

.page-news .news-entry {
  position: relative;
  padding: 28px 0 28px var(--news-indent);
  border-top: 1px solid var(--grid-600);
  border-left: 2px solid transparent;
  transition: border-left-color 220ms var(--ease);
}

.page-news .news-entry:hover,
.page-news .news-entry:focus-within {
  border-left-color: var(--neon-500);
}

.page-news .news-entry--lead {
  border-top: 0;
  padding-top: 0;
  padding-bottom: 40px;
}

.page-news .news-lead-media {
  margin: 0 0 28px;
  aspect-ratio: 14 / 9;
}

.page-news .news-entry-grid {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 14px;
}

.page-news .news-entry-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--muted-400);
  text-align: right;
  padding-top: 5px;
}

.page-news .news-entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.page-news .news-entry-time {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--orange-500);
}

.page-news .news-entry-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: var(--white-100);
}

.page-news .news-entry--lead .news-entry-title {
  font-size: clamp(26px, 5.2vw, 42px);
  line-height: 1.14;
}

.page-news .news-entry-text {
  margin: 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.72;
  color: var(--muted-400);
}

.page-news .news-entry-link {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--neon-500);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 180ms var(--ease);
}

.page-news .news-entry-link:hover,
.page-news .news-entry-link:focus-visible {
  border-bottom-color: var(--neon-500);
}

@media (min-width: 700px) {
  .page-news .news-entry-grid {
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 24px;
  }

  .page-news .news-entry-title {
    font-size: 26px;
  }
}

/* ---------- 分类说明 ---------- */

.page-news .news-topics {
  padding: var(--band) 0;
  background: var(--ink-800);
}

.page-news .news-topic-list {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--grid-600);
}

.page-news .news-topic {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 28px 0;
  background: var(--ink-800);
}

.page-news .news-topic-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--violet-500);
}

.page-news .news-topic-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.2;
  color: var(--white-100);
}

.page-news .news-topic-text {
  margin: 0;
  max-width: 58ch;
  font-size: 16px;
  line-height: 1.72;
  color: var(--muted-400);
}

.page-news .news-topic-cadence {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--orange-500);
}

@media (min-width: 820px) {
  .page-news .news-topic {
    grid-template-columns: 3.5rem minmax(0, 1fr) 11rem;
    gap: 32px;
    align-items: start;
    padding: 36px 24px;
  }

  .page-news .news-topic-cadence {
    text-align: right;
    padding-top: 4px;
  }
}

/* ---------- 图文分栏 ---------- */

.page-news .news-structure,
.page-news .news-terminal {
  padding: var(--band) 0;
}

.page-news .news-panel-nodes {
  padding: var(--band) 0;
  background: var(--ink-800);
}

.page-news .news-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.page-news .news-split-media {
  margin: 0;
  aspect-ratio: 3 / 2;
}

.page-news .news-split-media--tall {
  aspect-ratio: 4 / 3;
}

.page-news .news-split-text {
  margin: 0 0 24px;
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted-400);
}

.page-news .news-structure-list,
.page-news .news-terminal-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-news .news-structure-list li {
  padding: 14px 0;
  border-top: 1px solid var(--grid-600);
  font-size: 15px;
  line-height: 1.7;
  color: var(--white-100);
}

.page-news .news-structure-key {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-400);
}

.page-news .news-terminal-list {
  display: grid;
  gap: 20px;
  margin-bottom: 28px;
}

.page-news .news-terminal-list li {
  padding-left: 16px;
  border-left: 2px solid var(--panel-700);
}

.page-news .news-terminal-list h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.3;
  color: var(--white-100);
}

.page-news .news-terminal-list p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted-400);
}

.page-news .news-terminal-link {
  text-decoration: none;
}

@media (min-width: 900px) {
  .page-news .news-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 64px;
  }

  .page-news .news-split--flip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .page-news .news-split--flip .news-split-media {
    grid-column: 1;
    grid-row: 1;
  }

  .page-news .news-split--flip .news-split-body {
    grid-column: 2;
    grid-row: 1;
  }
}

/* ---------- 功能节点 ---------- */

.page-news .news-node-flow {
  margin-top: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--grid-600);
}

.page-news .news-node {
  padding: 28px 0;
  background: var(--ink-800);
}

.page-news .news-node-step {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--neon-500);
}

.page-news .news-node-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.22;
  color: var(--white-100);
}

.page-news .news-node-text {
  margin: 0;
  max-width: 44ch;
  font-size: 15px;
  line-height: 1.72;
  color: var(--muted-400);
}

@media (min-width: 840px) {
  .page-news .news-node-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    background: transparent;
    border-top: 1px solid var(--grid-600);
  }

  .page-news .news-node {
    padding: 32px 28px 32px 0;
    border-right: 1px solid var(--grid-600);
    background: transparent;
  }

  .page-news .news-node:last-child {
    border-right: 0;
    padding-right: 0;
  }

  .page-news .news-node + .news-node {
    padding-left: 28px;
  }
}

/* ---------- 下一阶段 ---------- */

.page-news .news-next {
  padding: var(--band) 0;
  background: var(--panel-700);
}

.page-news .news-next-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
}

.page-news .news-next-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 24px;
}

.page-news .news-next-item {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--grid-600);
}

.page-news .news-next-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--neon-500);
  padding-top: 4px;
}

.page-news .news-next-item h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.3;
  color: var(--white-100);
}

.page-news .news-next-item p {
  margin: 0;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted-400);
}

.page-news .news-next-foot {
  margin: 40px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--grid-600);
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted-400);
}

.page-news .news-next-foot a {
  color: var(--neon-500);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 180ms var(--ease);
}

.page-news .news-next-foot a:hover,
.page-news .news-next-foot a:focus-visible {
  border-bottom-color: var(--neon-500);
}

@media (min-width: 900px) {
  .page-news .news-next-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 64px;
    align-items: start;
  }

  .page-news .news-next-head {
    position: sticky;
    top: calc(var(--header-h) + 32px);
  }
}