.page-news {
  --lane-1: #2FE6C6;
  --lane-2: #1AB79C;
  --lane-3: #7DE0CB;
  --lane-4: #2E9F8C;
  --lane-5: #9AF0E0;
  --lane-6: #4FBFAB;
  --news-gap: clamp(72px, 10vw, 128px);
  display: block;
  padding-bottom: clamp(60px, 9vw, 110px);
}

.page-news .c-league { --lane-color: var(--lane-1); }
.page-news .c-cup    { --lane-color: var(--lane-2); }
.page-news .c-youth  { --lane-color: var(--lane-3); }
.page-news .c-venue  { --lane-color: var(--lane-4); }
.page-news .c-device { --lane-color: var(--lane-5); }
.page-news .c-faq    { --lane-color: var(--lane-6); }

.page-news .news-block {
  margin-top: var(--news-gap);
}

.page-news .block-head {
  max-width: 62ch;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.page-news .block-head .section-title {
  margin: 10px 0 14px;
}

.page-news .block-head .prose {
  margin: 0;
  color: var(--mist);
}

.page-news .inline-link {
  color: var(--signal);
  text-decoration: none;
  border-bottom: 1px solid rgba(47, 230, 198, 0.4);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-news .inline-link:hover,
.page-news .inline-link:focus-visible {
  color: var(--white);
  border-color: var(--white);
}

/* ---------- 首屏框景 ---------- */

.page-news .news-hero {
  margin-top: 26px;
}

.page-news .hero-frame {
  position: relative;
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 5vw, 60px);
  background:
    radial-gradient(130% 100% at 0% 0%, rgba(47, 230, 198, 0.12), transparent 58%),
    linear-gradient(160deg, var(--deep-green), var(--ink) 78%);
  overflow: hidden;
}

.page-news .hero-frame::before,
.page-news .hero-frame::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 48px;
  background: var(--signal);
  opacity: 0.6;
}

.page-news .hero-frame::before {
  left: 0;
  top: 40px;
}

.page-news .hero-frame::after {
  right: 0;
  bottom: 40px;
}

.page-news .news-hero h1 {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 6.4vw, 58px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--white);
  max-width: 18ch;
}

.page-news .news-hero .lede {
  margin: 20px 0 0;
  max-width: 58ch;
  color: var(--mist);
  font-size: 16px;
  line-height: 1.85;
}

.page-news .hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px dashed var(--edge);
}

.page-news .hero-shot {
  margin: clamp(20px, 3vw, 34px) 0 0;
  border-radius: var(--radius-md);
}

.page-news .hero-caption {
  margin: 12px 0 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ---------- 栏目轨道 ---------- */

.page-news .lane-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 12px;
  margin-bottom: clamp(24px, 3vw, 36px);
  scrollbar-width: thin;
  scrollbar-color: var(--edge) transparent;
  -webkit-overflow-scrolling: touch;
}

.page-news .lane-track::-webkit-scrollbar {
  height: 4px;
}

.page-news .lane-track::-webkit-scrollbar-thumb {
  background: var(--edge);
  border-radius: 4px;
}

.page-news .lane-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: rgba(22, 48, 42, 0.5);
  color: var(--mist);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-news .lane-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lane-color, var(--signal));
}

.page-news .lane-pill:hover,
.page-news .lane-pill:focus-visible {
  color: var(--ink);
  background: var(--lane-color, var(--signal));
  border-color: var(--lane-color, var(--signal));
}

.page-news .lane-pill:hover::before,
.page-news .lane-pill:focus-visible::before {
  background: var(--ink);
}

.page-news .lane-list {
  display: grid;
  gap: 0;
}

.page-news .lane {
  padding: clamp(26px, 3.4vw, 40px) 0;
  border-top: 1px solid var(--edge);
  border-left: 2px solid var(--lane-color, var(--signal));
  padding-left: clamp(18px, 2.6vw, 32px);
}

.page-news .lane:last-child {
  border-bottom: 1px solid var(--edge);
}

.page-news .lane-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lane-color, var(--signal));
  margin-bottom: 12px;
}

.page-news .lane-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(21px, 2.6vw, 28px);
  letter-spacing: -0.01em;
  color: var(--white);
}

.page-news .lane-desc {
  margin: 0 0 12px;
  max-width: 56ch;
  color: var(--white);
  opacity: 0.86;
  font-size: 15px;
  line-height: 1.8;
}

.page-news .lane-note {
  margin: 0;
  max-width: 56ch;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

.page-news .lane-media {
  margin: 0;
  border-radius: var(--radius-md);
}

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

.page-news .feed-count {
  margin: 14px 0 0;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.page-news .feed-count .stat-num {
  color: var(--signal);
  font-weight: 700;
}

.page-news .feed-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 clamp(24px, 3vw, 36px);
}

.page-news .feed-list::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg, var(--signal) 0%, var(--edge) 55%, rgba(31, 64, 56, 0) 100%);
}

.page-news .feed-item {
  position: relative;
  padding: clamp(20px, 2.6vw, 30px) 0;
  border-bottom: 1px solid var(--edge);
}

.page-news .feed-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(24px, 3vw, 36px));
  top: clamp(30px, 3.4vw, 40px);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--lane-color, var(--signal));
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.page-news .feed-item:hover::before {
  transform: scale(1.4);
  box-shadow: 0 0 0 5px rgba(47, 230, 198, 0.14);
}

.page-news .feed-item .lane-tag {
  margin-bottom: 8px;
}

.page-news .feed-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(17px, 2.1vw, 22px);
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: var(--white);
}

.page-news .feed-desc {
  margin: 0 0 12px;
  max-width: 62ch;
  color: var(--mist);
  font-size: 14.5px;
  line-height: 1.8;
}

.page-news .feed-when {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 4px 10px;
  border: 1px dashed var(--edge);
  border-radius: 999px;
}

/* ---------- 赛季阶段 ---------- */

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

.page-news .phase {
  position: relative;
  padding: clamp(22px, 3vw, 30px);
  border-radius: var(--radius-md);
  background: var(--deep-green);
  border-top: 3px solid var(--phase-color, var(--signal));
  overflow: hidden;
}

.page-news .phase--pre  { --phase-color: var(--lane-1); }
.page-news .phase--live { --phase-color: var(--score); }
.page-news .phase--post { --phase-color: var(--lane-2); }
.page-news .phase--off  { --phase-color: var(--lane-4); }

.page-news .phase-step {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--phase-color, var(--signal));
  margin-bottom: 14px;
}

.page-news .phase-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  line-height: 1.4;
  color: var(--white);
}

.page-news .phase p {
  margin: 0;
  font-size: 14px;
  line-height: 1.78;
  color: var(--mist);
}

/* ---------- 版本与入口更新 ---------- */

.page-news .update-strip {
  margin: 0 0 clamp(34px, 4.6vw, 54px);
  border-radius: var(--radius-md);
}

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

.page-news .update-item {
  padding: clamp(20px, 2.4vw, 28px) 0;
  border-bottom: 1px solid var(--edge);
  display: grid;
  gap: 8px;
}

.page-news .update-item:first-child {
  border-top: 1px solid var(--edge);
}

.page-news .update-when {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--signal-deep);
}

.page-news .update-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(16px, 1.9vw, 20px);
  line-height: 1.45;
  color: var(--white);
}

.page-news .update-item p {
  margin: 0;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--mist);
}

/* ---------- 回访节奏 ---------- */

.page-news .revisit-panel {
  padding: clamp(28px, 5vw, 56px);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(255, 138, 61, 0.12), transparent 58%),
    linear-gradient(200deg, var(--charcoal), var(--ink) 70%);
  border: 1px solid var(--edge);
}

.page-news .revisit-panel .section-title {
  margin: 10px 0 16px;
}

.page-news .revisit-panel .prose {
  margin: 0;
  max-width: 58ch;
  color: var(--mist);
}

.page-news .revisit-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  margin: clamp(26px, 3.6vw, 40px) 0;
  padding-top: clamp(22px, 3vw, 32px);
  border-top: 1px dashed var(--edge);
}

.page-news .revisit-stats .stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-news .revisit-stats .stat-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--signal);
}

.page-news .revisit-stats .stat:nth-child(2) .stat-value {
  color: var(--score);
}

.page-news .revisit-stats .stat-label {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--mist);
}

.page-news .revisit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-news .revisit-stamp {
  margin: 22px 0 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ---------- 响应式 ---------- */

@media (min-width: 640px) {
  .page-news .phase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (min-width: 900px) {
  .page-news .lane {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
  }

  .page-news .lane--media-right {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }

  .page-news .lane--media-left {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  }

  .page-news .lane--media-left .lane-copy {
    order: 2;
  }

  .page-news .lane--media-left .lane-media {
    order: 1;
  }

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

  .page-news .feed-list {
    padding-left: 44px;
  }

  .page-news .feed-item::before {
    left: -44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .lane-pill,
  .page-news .feed-item::before,
  .page-news .inline-link {
    transition: none;
  }
}
<<<END>>>

等等，我刚才不小心在 `` 后面加了 `<<<END>>>`，这是错的。标记顺序必须严格是 ``、``。我来修正这个。

其实我打的是 ``，然后 CSS，然后 `<<<END>>>`。但指令里写的是“标记顺序输出，每个标记只能出现一次，标记必须是三个尖括号”，顺序是：
``
``

所以 `<<<END>>>` 应该去掉。让我修正输出。而且我注意到在 `lane--media-right` 那里我给了 `grid-template-columns`，虽然 `.lane` 本身已经有 `display: grid` 和 `grid-template-columns: minmax(0, 1fr)`。那没问题。

另外 `.lane--media-left` 的 order 在移动端也适用？不，它在媒体查询里。好。

我重新输出一下，把 `<<<END>>>` 去掉。
<main id="main-content" class="page-news">
  <div class="page-shell">

    <nav class="breadcrumb" aria-label="页面路径">
      <ol>
        <li><a href="/">首页</a></li>
        <li aria-current="page">赛事观察</li>
      </ol>
    </nav>

    <header class="news-hero">
      <div class="hero-frame">
        <p class="eyebrow">赛事观察 · 长期栏目</p>
        <h1>六个长期栏目，跟着赛季阶段往前推</h1>
        <p class="lede">
          196体育赛事把联赛、杯赛、青少年赛事、场馆活动、设备入口和常见问题分成六个固定栏目，
          每一条都归到赛前、赛中、赛后或休赛期。想判断今天值不值得回来看一眼，
          扫一遍栏目轨道和条目时间轴就够。
        </p>
        <div class="hero-meta">
          <span class="signal-chip"><span class="signal-dot" aria-hidden="true"></span>信号在线</span>
          <span class="stamp">最近一次刷新时间戳 · 随页面同步更新</span>
        </div>
      </div>
      <figure class="media-frame hero-shot" data-ratio="wide">
        <img src="{zhanqunpic:h:720w:1600}" width="1600" height="720" alt="夜间球场上空俯瞰的照明灯组特写，光束穿过雾气，画面整体偏暗">
        <figcaption class="hero-caption">夜间赛场的光照条件直接决定观赛与转播窗口，栏目条目常从这里起笔。</figcaption>
      </figure>
    </header>

    <section class="news-block lane-section" id="lanes">
      <div class="block-head">
        <p class="eyebrow">栏目轨道</p>
        <h2 class="section-title">先挑栏目，再看条目</h2>
        <p class="prose">
          六个栏目各有各的关注面，互不重叠。你要追积分变动就停在联赛追踪，
          想看单场定胜负的节奏就切到杯赛节点，惦记本地孩子打球的往青少年赛事走。
        </p>
      </div>

      <nav class="lane-track" aria-label="栏目快速跳转">
        <a class="lane-pill c-league" href="#lane-league">联赛追踪</a>
        <a class="lane-pill c-cup" href="#lane-cup">杯赛节点</a>
        <a class="lane-pill c-youth" href="#lane-youth">青少年赛事</a>
        <a class="lane-pill c-venue" href="#lane-venue">场馆与活动</a>
        <a class="lane-pill c-device" href="#lane-device">设备与入口</a>
        <a class="lane-pill c-faq" href="#lane-faq">常见问题</a>
      </nav>

      <div class="lane-list">

        <article class="lane lane--media-right c-league" id="lane-league" data-reveal data-search-item="联赛追踪 积分 排名 对阵 开球时段 阵容">
          <div class="lane-copy">
            <span class="lane-tag">联赛追踪</span>
            <h3 class="lane-title">联赛追踪</h3>
            <p class="lane-desc">
              盯常设联赛的整轮走势：积分梯队的拉扯、连续比赛日的开球时段、
              换帅与伤停带来的排名浮动，都会在每一轮结束后归拢成一条。
            </p>
            <p class="lane-note">适合每周固定看一次积分变化，再顺手把关注对象挪进关注列表。</p>
          </div>
          <figure class="media-frame lane-media" data-ratio="tall">
            <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="球场边线附近器材箱与水瓶的局部特写，斜角构图" loading="lazy" decoding="async">
          </figure>
        </article>

        <article class="lane c-cup" id="lane-cup" data-reveal data-search-item="杯赛节点 淘汰赛 对阵树 两回合 决赛窗口">
          <div class="lane-copy">
            <span class="lane-tag">杯赛节点</span>
            <h3 class="lane-title">杯赛节点</h3>
            <p class="lane-desc">
              单场定胜负的节奏最容易漏看。分组结果一出，对阵树跟着刷新，
              两回合的先后顺序、主客次序和决赛窗口都会标在同一个条目里。
            </p>
            <p class="lane-note">杯赛周期短、变化快，临近抽签和开赛的几天建议每天看一次。</p>
          </div>
        </article>

        <article class="lane lane--media-left c-youth" id="lane-youth" data-reveal data-search-item="青少年赛事 青训 分区 邀请赛 年龄组 场地时段">
          <div class="lane-copy">
            <span class="lane-tag">青少年赛事</span>
            <h3 class="lane-title">青少年赛事</h3>
            <p class="lane-desc">
              分区名单、年龄组划分与场地安排都在这一栏。地方青训机构和社团提供的赛程会持续补进来，
              家长可以按日期直接挑要去现场看的那一场。
            </p>
            <p class="lane-note">赛季中段的邀请赛排期最密集，一周看一次不容易错过。</p>
          </div>
          <figure class="media-frame lane-media" data-ratio="tall">
            <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="空置的青少年训练场地与球门网局部，清晨侧光，画面中不出现人物" loading="lazy" decoding="async">
          </figure>
        </article>

        <article class="lane c-venue" id="lane-venue" data-reveal data-search-item="场馆与活动 开放时段 观赛动线 看台 照明改造">
          <div class="lane-copy">
            <span class="lane-tag">场馆与活动</span>
            <h3 class="lane-title">场馆与活动</h3>
            <p class="lane-desc">
              长春、吉林、四平、延边等地场馆的开放时段、入场动线与看台分区变化集中在这里。
              出差换城市时先看一眼，比到门口再问人要快。
            </p>
            <p class="lane-note">改造或临时调整期间，条目会跟着活动安排一起变。</p>
          </div>
        </article>

        <article class="lane c-device" id="lane-device" data-reveal data-search-item="设备与入口 网页版 多设备 关注列表 登录状态 改版">
          <div class="lane-copy">
            <span class="lane-tag">设备与入口</span>
            <h3 class="lane-title">设备与入口</h3>
            <p class="lane-desc">
              换手机、换平板、一家人共用一台电脑，入口和栏目结构在哪一版对齐过，
              都记在这一栏。想直接看对照关系，可到<a class="inline-link" href="/downloads/">网页版下载对照</a>逐类核对。
            </p>
            <p class="lane-note">功能调整后的头几天，这一栏更新得最勤。</p>
          </div>
        </article>

        <article class="lane c-faq" id="lane-faq" data-reveal data-search-item="常见问题 比分不更新 关注列表不同步 登录确认 帮助文档">
          <div class="lane-copy">
            <span class="lane-tag">常见问题</span>
            <h3 class="lane-title">常见问题</h3>
            <p class="lane-desc">
              比分迟迟不动、换设备后关注对象对不上、阵容变动标识看不懂，
              这几类高频疑问按登录、关注列表、比分刷新、设备切换四类归档在<a class="inline-link" href="/questions/">常见问答</a>。
            </p>
            <p class="lane-note">遇到问题先来这里翻一遍，多数情况两三步就能自己解决。</p>
          </div>
        </article>

      </div>
    </section>

    <section class="news-block feed-section" id="feed">
      <div class="block-head">
        <p class="eyebrow">近期条目</p>
        <h2 class="section-title">这一轮值得点开的条目</h2>
        <p class="prose">
          条目按最新在前排列，一条一句话说清看点和适用人群。左侧时间轴上的圆点跟随悬停放大，
          方便你在快速扫读时锁定当前这一行。
        </p>
        <p class="feed-count mono">当前列出 <span class="stat-num">14</span> 条 · 覆盖全部六个栏目</p>
      </div>

      <ol class="feed-list">
        <li class="feed-item c-league" data-search-item="联赛追踪 半程 排名 分差 关注列表">
          <span class="lane-tag">联赛追踪</span>
          <h3 class="feed-title">半程分差压缩到两场以内</h3>
          <p class="feed-desc">上一轮联赛周期走完，前六名的差距收窄，这个节点值得对着关注列表重新排一次优先级。</p>
          <span class="feed-when mono">本赛季初 · 已完成归档</span>
        </li>

        <li class="feed-item c-league" data-search-item="联赛追踪 对阵 开球时段 比赛日 晚场">
          <span class="lane-tag">联赛追踪</span>
          <h3 class="feed-title">连续四个比赛日的开球时段排定</h3>
          <p class="feed-desc">晚场集中落在同一时段，追比分的人可以提前把关注对象按当晚出场顺序排好。</p>
          <span class="feed-when mono">本周 · 赛前</span>
        </li>

        <li class="feed-item c-league" data-search-item="联赛追踪 换帅 伤停 租借 阵容变动">
          <span class="lane-tag">联赛追踪</span>
          <h3 class="feed-title">换帅、伤停与归队情况汇总</h3>
          <p class="feed-desc">三类人员变动一并收进阵容模块，标识样式与重新登录确认时看到的那套一致。</p>
          <span class="feed-when mono">临近半程 · 赛中</span>
        </li>

        <li class="feed-item c-cup" data-search-item="杯赛节点 淘汰赛 对阵树 分组 两回合">
          <span class="lane-tag">杯赛节点</span>
          <h3 class="feed-title">淘汰赛对阵树随分组结果同步刷新</h3>
          <p class="feed-desc">每个节点都标出两回合的先后顺序，哪一场先打、哪一场回主场，一眼分清。</p>
          <span class="feed-when mono">淘汰赛分段后 · 赛前</span>
        </li>

        <li class="feed-item c-cup" data-search-item="杯赛节点 决赛 窗口 时段 赛程模块">
          <span class="lane-tag">杯赛节点</span>
          <h3 class="feed-title">决赛阶段的开赛窗口收窄</h3>
          <p class="feed-desc">具体时段以赛程模块为准，页面底部会跟着给出最近一次刷新时间戳。</p>
          <span class="feed-when mono">决赛窗口临近 · 赛中</span>
        </li>

        <li class="feed-item c-youth" data-search-item="青少年赛事 青训 分区 场地 本地队伍">
          <span class="lane-tag">青少年赛事</span>
          <h3 class="feed-title">青训联赛分区名单与场地落位</h3>
          <p class="feed-desc">分区与场地安排同步进栏目，惦记本地队伍成长的用户可以直接把它们加进关注列表。</p>
          <span class="feed-when mono">赛季起步阶段 · 赛前</span>
        </li>

        <li class="feed-item c-youth" data-search-item="青少年赛事 邀请赛 年龄组 时段 家长">
          <span class="lane-tag">青少年赛事</span>
          <h3 class="feed-title">青少年邀请赛按年龄组排开时段</h3>
          <p class="feed-desc">参赛队伍按年龄组分列，场地与开赛时段一次列清，家长按日期挑场次即可。</p>
          <span class="feed-when mono">赛季中段 · 赛中</span>
        </li>

        <li class="feed-item c-venue" data-search-item="场馆与活动 开放时段 观赛动线 看台分区">
          <span class="lane-tag">场馆与活动</span>
          <h3 class="feed-title">九地市州场馆开放时段与入场动线</h3>
          <p class="feed-desc">看台分区与入场通道的变化集中更新，出远门前先看一眼比到现场再问省事得多。</p>
          <span class="feed-when mono">本地球季 · 常驻更新</span>
        </li>

        <li class="feed-item c-venue" data-search-item="场馆与活动 照明改造 看台 临时调整">
          <span class="lane-tag">场馆与活动</span>
          <h3 class="feed-title">照明与看台分区改造期间的活动调整</h3>
          <p class="feed-desc">改造期部分场次顺延或改址，栏目会跟着活动安排的变化逐条补上。</p>
          <span class="feed-when mono">场馆改造周期内 · 临时调整</span>
        </li>

        <li class="feed-item c-device" data-search-item="设备与入口 网页版 多设备 栏目结构 改版">
          <span class="lane-tag">设备与入口</span>
          <h3 class="feed-title">桌面、平板与手机三类视图入口对齐</h3>
          <p class="feed-desc">三类设备的栏目结构统一到同一条路径上，一家人共用一台电脑切换视图不再迷路。</p>
          <span class="feed-when mono">最近一次改版 · 已生效</span>
        </li>

        <li class="feed-item c-device" data-search-item="设备与入口 关注列表 排序 分组 状态标签">
          <span class="lane-tag">设备与入口</span>
          <h3 class="feed-title">关注列表的排序方式扩展至三种</h3>
          <p class="feed-desc">按项目、赛季阶段或关注时间都能排，每个关注对象还可以挂上自定分组与状态标签。</p>
          <span class="feed-when mono">关注列表独立成页后的首个迭代</span>
        </li>

        <li class="feed-item c-device" data-search-item="设备与入口 登录确认 状态标识 阵容变动">
          <span class="lane-tag">设备与入口</span>
          <h3 class="feed-title">换设备登录与阵容变动共用一套状态标识</h3>
          <p class="feed-desc">从任一路径进来看到的提示样式一致，不必再分辨两种不同的红点是什么意思。</p>
          <span class="feed-when mono">同期版本 · 已生效</span>
        </li>

        <li class="feed-item c-faq" data-search-item="常见问题 比分不更新 刷新时间戳 刷新节奏">
          <span class="lane-tag">常见问题</span>
          <h3 class="feed-title">比分迟迟不动，先看哪一步</h3>
          <p class="feed-desc">先确认页面底部的刷新时间戳，再对照比分模块的刷新节奏，两步之内基本能判断出来。</p>
          <span class="feed-when mono">常驻条目 · 按需查阅</span>
        </li>

        <li class="feed-item c-faq" data-search-item="常见问题 关注列表 换设备 不同步 分组标签">
          <span class="lane-tag">常见问题</span>
          <h3 class="feed-title">换设备后关注对象对不上怎么处理</h3>
          <p class="feed-desc">按同一套状态提示重新确认登录，再回到关注列表页核对分组标签是否恢复。</p>
          <span class="feed-when mono">常驻条目 · 按需查阅</span>
        </li>
      </ol>
    </section>

    <section class="news-block phase-section" id="phases">
      <div class="block-head">
        <p class="eyebrow">赛季阶段</p>
        <h2 class="section-title">条目按赛前、赛中、赛后、休赛期归档</h2>
        <p class="prose">
          同一个赛场在不同阶段要看的完全不一样。阶段标签决定了你该点哪一条，
          也决定了你隔多久回来一次更划算。
        </p>
      </div>

      <ol class="phase-grid">
        <li class="phase phase--pre" data-reveal>
          <span class="phase-step mono">赛前</span>
          <h3 class="phase-title">排期和对阵先落定</h3>
          <p>场地、开赛时段与对阵关系先排好，适合提前两三周挑出要看的场次。</p>
        </li>
        <li class="phase phase--live" data-reveal>
          <span class="phase-step mono">赛中</span>
          <h3 class="phase-title">比分与阵容同步走</h3>
          <p>比分按 30 秒节奏刷新，阵容变动与人员调整紧跟着同一条时间轴往下排。</p>
        </li>
        <li class="phase phase--post" data-reveal>
          <span class="phase-step mono">赛后</span>
          <h3 class="phase-title">结果和积分归档</h3>
          <p>结果、积分变化与后续影响收进条目，第二天早上起来补看一遍也不会落下什么。</p>
        </li>
        <li class="phase phase--off" data-reveal>
          <span class="phase-step mono">休赛期</span>
          <h3 class="phase-title">赛程让位给场馆和青训</h3>
          <p>没有正式比赛的日子，场馆活动与青少年赛事顶上来，栏目不会空着。</p>
        </li>
      </ol>
    </section>

    <section class="news-block update-section" id="updates">
      <figure class="media-frame update-strip" data-ratio="wide">
        <img src="{zhanqunpic:h:500w:1300}" width="1300" height="500" alt="设备界面更新示意图的抽象线稿，无文字，线条为青色" loading="lazy" decoding="async">
      </figure>

      <div class="block-head">
        <p class="eyebrow">版本与入口</p>
        <h2 class="section-title">功能调整过的地方，这里能对上</h2>
        <p class="prose">
          入口挪了位置、栏目结构调整、状态提示换了样式，都会在设备与入口栏目留一条。
          对照之后如果还是不放心，直接到<a class="inline-link" href="/products/">服务与工具</a>看当前的入口清单。
        </p>
      </div>

      <ol class="update-list">
        <li class="update-item">
          <span class="update-when mono">最近一次改版</span>
          <h3 class="update-title">三类设备视图的栏目结构对齐</h3>
          <p>检索框与关注列表入口前置到顶部浮岛，桌面、平板与手机上走的是同一条路径。</p>
        </li>
        <li class="update-item">
          <span class="update-when mono">关注列表独立成页之后</span>
          <h3 class="update-title">管理上限与排序方式一次补齐</h3>
          <p>单页可管理最多 200 个关注对象，分组与状态标签在同一页完成设置。</p>
        </li>
        <li class="update-item">
          <span class="update-when mono">阵容模块上线后的一次补充</span>
          <h3 class="update-title">变动标识与登录确认合并样式</h3>
          <p>两处提示改用同一套视觉语言，用户在任一入口看到的含义完全对应。</p>
        </li>
      </ol>
    </section>

    <section class="news-block revisit-section" id="revisit">
      <div class="revisit-panel panel">
        <p class="eyebrow">回访节奏</p>
        <h2 class="section-title">什么时候回来看看更值</h2>
        <p class="prose">
          追比分的人可以每天固定时段来一次；只看趋势的人一周来一次足够。
          功能入口调过之后的那几天，多来一趟能少绕不少弯。
        </p>

        <div class="revisit-stats">
          <div class="stat">
            <span class="stat-value mono">30</span>
            <span class="stat-label">秒 · 比分刷新节奏</span>
          </div>
          <div class="stat">
            <span class="stat-value mono">5</span>
            <span class="stat-label">分钟 · 赛程与阵容</span>
          </div>
          <div class="stat">
            <span class="stat-value mono">1200</span>
            <span class="stat-label">条 · 每日更新赛事条目</span>
          </div>
          <div class="stat">
            <span class="stat-value mono">64%</span>
            <span class="stat-label">回访用户占比</span>
          </div>
        </div>

        <div class="revisit-actions">
          <a class="btn btn-signal" href="/products/">看服务分类</a>
          <a class="btn btn-ghost" href="/watchlist/">管理关注列表</a>
        </div>

        <p class="revisit-stamp mono">页面底部显示最近一次刷新时间戳 · 各栏目同步更新</p>
      </div>
    </section>

  </div>
</main>

.page-news {
  --lane-1: #2FE6C6;
  --lane-2: #1AB79C;
  --lane-3: #7DE0CB;
  --lane-4: #2E9F8C;
  --lane-5: #9AF0E0;
  --lane-6: #4FBFAB;
  --news-gap: clamp(72px, 10vw, 128px);
  display: block;
  padding-bottom: clamp(60px, 9vw, 110px);
}

.page-news .c-league { --lane-color: var(--lane-1); }
.page-news .c-cup    { --lane-color: var(--lane-2); }
.page-news .c-youth  { --lane-color: var(--lane-3); }
.page-news .c-venue  { --lane-color: var(--lane-4); }
.page-news .c-device { --lane-color: var(--lane-5); }
.page-news .c-faq    { --lane-color: var(--lane-6); }

.page-news .news-block {
  margin-top: var(--news-gap);
}

.page-news .block-head {
  max-width: 62ch;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.page-news .block-head .section-title {
  margin: 10px 0 14px;
}

.page-news .block-head .prose {
  margin: 0;
  color: var(--mist);
}

.page-news .inline-link {
  color: var(--signal);
  text-decoration: none;
  border-bottom: 1px solid rgba(47, 230, 198, 0.4);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-news .inline-link:hover,
.page-news .inline-link:focus-visible {
  color: var(--white);
  border-color: var(--white);
}

/* ---------- 首屏框景 ---------- */

.page-news .news-hero {
  margin-top: 26px;
}

.page-news .hero-frame {
  position: relative;
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 5vw, 60px);
  background:
    radial-gradient(130% 100% at 0% 0%, rgba(47, 230, 198, 0.12), transparent 58%),
    linear-gradient(160deg, var(--deep-green), var(--ink) 78%);
  overflow: hidden;
}

.page-news .hero-frame::before,
.page-news .hero-frame::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 48px;
  background: var(--signal);
  opacity: 0.6;
}

.page-news .hero-frame::before {
  left: 0;
  top: 40px;
}

.page-news .hero-frame::after {
  right: 0;
  bottom: 40px;
}

.page-news .news-hero h1 {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 6.4vw, 58px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--white);
  max-width: 18ch;
}

.page-news .news-hero .lede {
  margin: 20px 0 0;
  max-width: 58ch;
  color: var(--mist);
  font-size: 16px;
  line-height: 1.85;
}

.page-news .hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px dashed var(--edge);
}

.page-news .hero-shot {
  margin: clamp(20px, 3vw, 34px) 0 0;
  border-radius: var(--radius-md);
}

.page-news .hero-caption {
  margin: 12px 0 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ---------- 栏目轨道 ---------- */

.page-news .lane-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 12px;
  margin-bottom: clamp(24px, 3vw, 36px);
  scrollbar-width: thin;
  scrollbar-color: var(--edge) transparent;
  -webkit-overflow-scrolling: touch;
}

.page-news .lane-track::-webkit-scrollbar {
  height: 4px;
}

.page-news .lane-track::-webkit-scrollbar-thumb {
  background: var(--edge);
  border-radius: 4px;
}

.page-news .lane-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: rgba(22, 48, 42, 0.5);
  color: var(--mist);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-news .lane-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lane-color, var(--signal));
}

.page-news .lane-pill:hover,
.page-news .lane-pill:focus-visible {
  color: var(--ink);
  background: var(--lane-color, var(--signal));
  border-color: var(--lane-color, var(--signal));
}

.page-news .lane-pill:hover::before,
.page-news .lane-pill:focus-visible::before {
  background: var(--ink);
}

.page-news .lane-list {
  display: grid;
  gap: 0;
}

.page-news .lane {
  padding: clamp(26px, 3.4vw, 40px) 0;
  border-top: 1px solid var(--edge);
  border-left: 2px solid var(--lane-color, var(--signal));
  padding-left: clamp(18px, 2.6vw, 32px);
}

.page-news .lane:last-child {
  border-bottom: 1px solid var(--edge);
}

.page-news .lane-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--lane-color, var(--signal));
  margin-bottom: 12px;
}

.page-news .lane-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(21px, 2.6vw, 28px);
  letter-spacing: -0.01em;
  color: var(--white);
}

.page-news .lane-desc {
  margin: 0 0 12px;
  max-width: 56ch;
  color: var(--white);
  opacity: 0.86;
  font-size: 15px;
  line-height: 1.8;
}

.page-news .lane-note {
  margin: 0;
  max-width: 56ch;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

.page-news .lane-media {
  margin: 0;
  border-radius: var(--radius-md);
}

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

.page-news .feed-count {
  margin: 14px 0 0;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.page-news .feed-count .stat-num {
  color: var(--signal);
  font-weight: 700;
}

.page-news .feed-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 clamp(24px, 3vw, 36px);
}

.page-news .feed-list::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg, var(--signal) 0%, var(--edge) 55%, rgba(31, 64, 56, 0) 100%);
}

.page-news .feed-item {
  position: relative;
  padding: clamp(20px, 2.6vw, 30px) 0;
  border-bottom: 1px solid var(--edge);
}

.page-news .feed-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(24px, 3vw, 36px));
  top: clamp(30px, 3.4vw, 40px);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--lane-color, var(--signal));
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.page-news .feed-item:hover::before {
  transform: scale(1.4);
  box-shadow: 0 0 0 5px rgba(47, 230, 198, 0.14);
}

.page-news .feed-item .lane-tag {
  margin-bottom: 8px;
}

.page-news .feed-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(17px, 2.1vw, 22px);
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: var(--white);
}

.page-news .feed-desc {
  margin: 0 0 12px;
  max-width: 62ch;
  color: var(--mist);
  font-size: 14.5px;
  line-height: 1.8;
}

.page-news .feed-when {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 4px 10px;
  border: 1px dashed var(--edge);
  border-radius: 999px;
}

/* ---------- 赛季阶段 ---------- */

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

.page-news .phase {
  position: relative;
  padding: clamp(22px, 3vw, 30px);
  border-radius: var(--radius-md);
  background: var(--deep-green);
  border-top: 3px solid var(--phase-color, var(--signal));
  overflow: hidden;
}

.page-news .phase--pre  { --phase-color: var(--lane-1); }
.page-news .phase--live { --phase-color: var(--score); }
.page-news .phase--post { --phase-color: var(--lane-2); }
.page-news .phase--off  { --phase-color: var(--lane-4); }

.page-news .phase-step {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--phase-color, var(--signal));
  margin-bottom: 14px;
}

.page-news .phase-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  line-height: 1.4;
  color: var(--white);
}

.page-news .phase p {
  margin: 0;
  font-size: 14px;
  line-height: 1.78;
  color: var(--mist);
}

/* ---------- 版本与入口更新 ---------- */

.page-news .update-strip {
  margin: 0 0 clamp(34px, 4.6vw, 54px);
  border-radius: var(--radius-md);
}

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

.page-news .update-item {
  padding: clamp(20px, 2.4vw, 28px) 0;
  border-bottom: 1px solid var(--edge);
  display: grid;
  gap: 8px;
}

.page-news .update-item:first-child {
  border-top: 1px solid var(--edge);
}

.page-news .update-when {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--signal-deep);
}

.page-news .update-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(16px, 1.9vw, 20px);
  line-height: 1.45;
  color: var(--white);
}

.page-news .update-item p {
  margin: 0;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--mist);
}

/* ---------- 回访节奏 ---------- */

.page-news .revisit-panel {
  padding: clamp(28px, 5vw, 56px);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(255, 138, 61, 0.12), transparent 58%),
    linear-gradient(200deg, var(--charcoal), var(--ink) 70%);
  border: 1px solid var(--edge);
}

.page-news .revisit-panel .section-title {
  margin: 10px 0 16px;
}

.page-news .revisit-panel .prose {
  margin: 0;
  max-width: 58ch;
  color: var(--mist);
}

.page-news .revisit-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  margin: clamp(26px, 3.6vw, 40px) 0;
  padding-top: clamp(22px, 3vw, 32px);
  border-top: 1px dashed var(--edge);
}

.page-news .revisit-stats .stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-news .revisit-stats .stat-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--signal);
}

.page-news .revisit-stats .stat:nth-child(2) .stat-value {
  color: var(--score);
}

.page-news .revisit-stats .stat-label {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--mist);
}

.page-news .revisit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-news .revisit-stamp {
  margin: 22px 0 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ---------- 响应式 ---------- */

@media (min-width: 640px) {
  .page-news .phase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (min-width: 900px) {
  .page-news .lane {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
  }

  .page-news .lane--media-right {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }

  .page-news .lane--media-left {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  }

  .page-news .lane--media-left .lane-copy {
    order: 2;
  }

  .page-news .lane--media-left .lane-media {
    order: 1;
  }

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

  .page-news .feed-list {
    padding-left: 44px;
  }

  .page-news .feed-item::before {
    left: -44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .lane-pill,
  .page-news .feed-item::before,
  .page-news .inline-link {
    transition: none;
  }
}