.page-news {
  --news-tag: 132px;
  --news-time: 142px;
}

/* ---------- 首屏 ---------- */
.page-news .news-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + 48px) 0 54px;
  background:
    radial-gradient(120% 92% at 84% 6%, rgba(43, 227, 208, 0.16), transparent 58%),
    radial-gradient(92% 74% at 4% 98%, rgba(224, 68, 124, 0.15), transparent 62%),
    linear-gradient(180deg, #04101b 0%, var(--ink) 100%);
  border-bottom: 1px solid var(--line);
}

.page-news .news-hero__inner {
  position: relative;
  z-index: 1;
}

.page-news .news-hero .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  font-size: 13px;
  color: var(--muted);
}

.page-news .news-hero .breadcrumb a {
  color: var(--muted);
  text-decoration: none;
  transition: color var(--t) var(--ease);
}

.page-news .news-hero .breadcrumb a:hover {
  color: var(--neon-soft);
}

.page-news .news-hero .breadcrumb span[aria-current] {
  color: var(--amber);
}

.page-news .news-hero__title {
  margin: 12px 0 0;
  letter-spacing: 0.05em;
  color: var(--text);
}

.page-news .news-hero__lede {
  margin: 20px 0 0;
  max-width: 46em;
  color: var(--muted);
}

.page-news .news-hero__stats {
  display: grid;
  grid-template-columns: 1fr;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-news .news-stat {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.page-news .news-stat__num {
  flex: 0 0 auto;
  min-width: 60px;
  font-family: var(--font-num);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--amber);
}

.page-news .news-stat__label {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- 归档区头部 ---------- */
.page-news .news-archive__head {
  display: grid;
  gap: 18px;
  margin-bottom: 26px;
}

.page-news .news-archive__head h2 {
  margin: 10px 0 0;
}

.page-news .news-archive__note {
  margin: 0;
  max-width: 48em;
  font-size: 14px;
  line-height: 1.85;
  color: var(--muted);
}

/* ---------- 分组跳转条 ---------- */
.page-news .news-jump {
  margin-bottom: 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-news .news-jump__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.page-news .news-jump__list::-webkit-scrollbar {
  display: none;
}

.page-news .news-jump__link {
  display: block;
  margin-right: 22px;
  padding: 13px 2px;
  white-space: nowrap;
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.page-news .news-jump__link:hover,
.page-news .news-jump__link:focus-visible {
  color: var(--neon-soft);
  border-bottom-color: var(--neon);
}

/* ---------- 主体分栏 ---------- */
.page-news .news-body {
  display: grid;
  gap: 44px;
}

.page-news .news-aside {
  display: grid;
  gap: 24px;
  align-content: start;
}

.page-news .news-aside__media {
  margin: 0;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--ink-2);
}

.page-news .news-aside__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-news .news-aside__panel {
  padding: 22px 20px;
}

.page-news .news-aside__list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.page-news .news-aside__list li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--muted);
}

.page-news .news-aside__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background: var(--neon);
  transform: rotate(45deg);
}

/* ---------- 分组标题 ---------- */
.page-news .news-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 0 12px;
  border-top: 1px solid var(--line);
}

.page-news .news-group-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(19px, 3.4vw, 26px);
  letter-spacing: 0.04em;
  color: var(--text);
}

.page-news .news-group-head__meta {
  font-family: var(--font-num);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--amber);
  white-space: nowrap;
}

.page-news .news-log__group + .news-log__group {
  margin-top: 10px;
}

/* ---------- 条目 ---------- */
.page-news .news-entry {
  border-bottom: 1px solid var(--line);
}

.page-news .news-entry__head {
  display: grid;
  grid-template-columns: auto 1fr auto 18px;
  align-items: baseline;
  gap: 8px 12px;
  padding: 16px 10px 16px 12px;
  cursor: pointer;
  list-style: none;
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.page-news .news-entry__head::-webkit-details-marker {
  display: none;
}

.page-news .news-entry__head::marker {
  content: "";
}

.page-news .news-entry__head:hover {
  background-color: rgba(43, 227, 208, 0.055);
}

.page-news .news-entry[open] > .news-entry__head {
  background-color: rgba(43, 227, 208, 0.04);
}

.page-news .news-entry__tag {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-size: 11px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.page-news .news-entry__tag--nav {
  color: var(--neon);
  background: rgba(43, 227, 208, 0.08);
}

.page-news .news-entry__tag--android {
  color: var(--amber);
  background: rgba(233, 178, 60, 0.09);
}

.page-news .news-entry__tag--ios {
  color: var(--magenta);
  background: rgba(224, 68, 124, 0.09);
}

.page-news .news-entry__tag--rules {
  color: var(--neon-soft);
  background: rgba(140, 246, 234, 0.07);
}

.page-news .news-entry__tag--site {
  color: var(--muted);
  background: rgba(147, 169, 188, 0.08);
}

.page-news .news-entry__title {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background-image: linear-gradient(var(--neon-soft), var(--neon-soft));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--t) var(--ease);
}

.page-news .news-entry__head:hover .news-entry__title {
  background-size: 100% 1px;
}

.page-news .news-entry__time {
  grid-column: 2 / 4;
  grid-row: 1;
  text-align: right;
  font-family: var(--font-num);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
}

.page-news .news-entry__toggle {
  grid-column: 4;
  grid-row: 1;
  position: relative;
  align-self: center;
  width: 18px;
  height: 18px;
}

.page-news .news-entry__toggle::before,
.page-news .news-entry__toggle::after {
  content: "";
  position: absolute;
  background: var(--neon);
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}

.page-news .news-entry__toggle::before {
  left: 3px;
  top: 8px;
  width: 12px;
  height: 1.5px;
}

.page-news .news-entry__toggle::after {
  left: 8px;
  top: 3px;
  width: 1.5px;
  height: 12px;
}

.page-news .news-entry[open] .news-entry__toggle::after {
  transform: scaleY(0);
  opacity: 0;
}

.page-news .news-entry__body {
  padding: 0 12px 20px;
}

.page-news .news-entry__body p {
  margin: 0;
  max-width: 46em;
  padding-left: 12px;
  border-left: 2px solid rgba(43, 227, 208, 0.34);
  font-size: 14px;
  line-height: 1.85;
  color: var(--muted);
}

/* ---------- 阶段分隔 ---------- */
.page-news .news-break {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 30px 0 8px;
}

.page-news .news-break::before,
.page-news .news-break::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(43, 227, 208, 0), rgba(43, 227, 208, 0.7), rgba(43, 227, 208, 0));
}

.page-news .news-break__label {
  font-family: var(--font-num);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--neon);
  white-space: nowrap;
}

/* ---------- 回到版本线 ---------- */
.page-news .news-back {
  margin: 26px 0 0;
}

.page-news .news-back .arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--neon);
  text-decoration: none;
  transition: color var(--t) var(--ease);
}

.page-news .news-back .arrow-link:hover {
  color: var(--neon-soft);
}

/* ---------- 版本迭代线 ---------- */
.page-news .news-versions__head {
  margin-bottom: 32px;
}

.page-news .news-versions__head h2 {
  margin: 10px 0 0;
}

.page-news .news-versions__lede {
  margin: 16px 0 0;
  max-width: 46em;
  font-size: 15px;
  line-height: 1.85;
  color: var(--muted);
}

.page-news .news-versions__media {
  margin: 0 0 36px;
  border: 1px solid rgba(43, 227, 208, 0.24);
  overflow: hidden;
}

.page-news .news-versions__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-news .news-vline__track {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 10px 0 10px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.page-news .news-vline__node {
  position: relative;
  flex: 0 0 min(268px, 76vw);
  padding: 28px 0 0;
  scroll-snap-align: start;
}

.page-news .news-vline__node::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 6px;
  width: 24px;
  height: 1px;
  background: rgba(43, 227, 208, 0.45);
}

.page-news .news-vline__node:first-child::before {
  display: none;
}

.page-news .news-vline__dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(233, 178, 60, 0.15);
  transition: box-shadow var(--t) var(--ease);
}

.page-news .news-vline__node:hover .news-vline__dot {
  box-shadow: 0 0 0 8px rgba(233, 178, 60, 0.24);
}

.page-news .news-vline__num {
  display: block;
  font-family: var(--font-num);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--amber);
}

.page-news .news-vline__title {
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.page-news .news-vline__desc {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--muted);
}

.page-news .news-vline__count {
  display: inline-block;
  margin-top: 12px;
  padding: 2px 8px;
  border: 1px solid rgba(43, 227, 208, 0.42);
  font-family: var(--font-num);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--neon);
}

.page-news .news-versions__foot {
  margin: 28px 0 0;
  padding-left: 12px;
  border-left: 2px solid rgba(233, 178, 60, 0.5);
}

/* ---------- 栏目改版说明 ---------- */
.page-news .news-restructure__inner {
  display: grid;
  gap: 36px;
}

.page-news .news-restructure__media {
  margin: 0;
  border: 1px solid rgba(224, 68, 124, 0.32);
  overflow: hidden;
}

.page-news .news-restructure__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-news .news-restructure__copy h2 {
  margin: 10px 0 0;
}

.page-news .news-restructure__lede {
  margin: 18px 0 0;
  max-width: 44em;
  font-size: 15px;
  line-height: 1.85;
  color: var(--muted);
}

.page-news .news-restructure__list {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.page-news .news-restructure__item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid rgba(224, 68, 124, 0.26);
}

.page-news .news-restructure__idx {
  font-family: var(--font-num);
  font-size: 17px;
  font-weight: 700;
  color: var(--amber);
}

.page-news .news-restructure__title {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text);
}

.page-news .news-restructure__item p {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--muted);
}

/* ---------- 厂商列表同步记录 ---------- */
.page-news .news-sync__head h2 {
  margin: 10px 0 0;
}

.page-news .news-sync__lede {
  margin: 16px 0 0;
  max-width: 46em;
  font-size: 14px;
  line-height: 1.85;
  color: var(--muted);
}

.page-news .news-sync__rows {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-news .news-sync__row {
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px 18px;
  padding: 18px 10px 18px 0;
  border-bottom: 1px solid var(--line);
  transition: background-color var(--t) var(--ease);
}

.page-news .news-sync__row:hover {
  background-color: rgba(233, 178, 60, 0.05);
}

.page-news .news-sync__round {
  font-family: var(--font-num);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--amber);
  white-space: nowrap;
}

.page-news .news-sync__letters {
  font-family: var(--font-num);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text);
}

.page-news .news-sync__note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--muted);
}

.page-news .news-sync__foot {
  margin: 24px 0 0;
  padding-left: 12px;
  border-left: 2px solid rgba(43, 227, 208, 0.4);
}

/* ---------- 订阅与回看 ---------- */
.page-news .news-subscribe__inner {
  display: grid;
  gap: 32px;
}

.page-news .news-subscribe__copy h2 {
  margin: 10px 0 0;
}

.page-news .news-subscribe__lede {
  margin: 18px 0 0;
  max-width: 42em;
  font-size: 15px;
  line-height: 1.85;
  color: var(--muted);
}

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

.page-news .news-subscribe__list li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.page-news .news-subscribe__idx {
  font-family: var(--font-num);
  font-size: 15px;
  font-weight: 700;
  color: var(--amber);
}

.page-news .news-subscribe__list p {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--muted);
}

.page-news .news-subscribe__list a {
  color: var(--neon);
  text-decoration: none;
  border-bottom: 1px solid rgba(43, 227, 208, 0.42);
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.page-news .news-subscribe__list a:hover {
  color: var(--neon-soft);
  border-bottom-color: var(--neon-soft);
}

.page-news .news-subscribe__media {
  margin: 0;
  border: 1px solid var(--line);
  overflow: hidden;
  order: -1;
}

.page-news .news-subscribe__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 平板 ---------- */
@media (min-width: 720px) {
  .page-news .news-hero__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-news .news-stat {
    flex-direction: column;
    gap: 8px;
    padding: 22px 22px 22px 0;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }

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

  .page-news .news-sync__row {
    grid-template-columns: 92px 92px minmax(0, 1fr);
    align-items: baseline;
    gap: 0 22px;
  }

  .page-news .news-sync__note {
    grid-column: 3;
  }
}

/* ---------- 桌面 ---------- */
@media (min-width: 900px) {
  .page-news .news-archive__head {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: end;
    gap: 40px;
  }

  .page-news .news-entry__head {
    grid-template-columns: var(--news-tag) minmax(0, 1fr) var(--news-time) 18px;
    gap: 0 20px;
  }

  .page-news .news-entry__tag {
    grid-column: 1;
    grid-row: 1;
  }

  .page-news .news-entry__title {
    grid-column: 2;
    grid-row: 1;
  }

  .page-news .news-entry__time {
    grid-column: 3;
    grid-row: 1;
  }

  .page-news .news-entry__toggle {
    grid-column: 4;
    grid-row: 1;
  }

  .page-news .news-restructure__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: start;
    gap: 56px;
  }

  .page-news .news-subscribe__inner {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: center;
    gap: 52px;
  }

  .page-news .news-subscribe__media {
    order: 0;
  }
}

@media (min-width: 1000px) {
  .page-news .news-body {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 54px;
  }
}
</main>
<<<END>>>

等等，结尾的 `</main>` 和 `<<<END>>>` 放一起了。检查一下：输出必须以 `</main>` 结尾，然后 ``，再然后是 CSS。结尾不应该有 `<<<END>>>` 标记——说明里只要求这两个标记。

再确认一下：`` …… `` …… CSS。

那我删除掉 `<<<END>>>` 和重复的部分。

再检查一下 `.page-news .news-entry__time { grid-column: 2 / 4; }` 移动端——4 列网格里，`grid-column: 2 / 4` 会跨第 2 列和第 3 列。而 toggle 在第 4 列。没问题。

嗯，等等，移动端 `grid-template-columns: auto 1fr auto 18px`——标签在第 1 列 auto，第 2 列 1fr，第 3 列 auto，第 4 列 18px。时间从 2 跨到 4，意思是第 2 列和第 3 列合并。`text-align: right` 会让它靠近 toggle。行。

还有 `.news-entry__title`，移动端 `grid-column: 1 / -1; grid-row: 2`。没问题。

好，定稿。

再检查一下版本线的 `::before`——`left: -24px; width: 24px`。因为 `overflow-x: auto` 加上轨道里的 padding，第一个节点的线被藏起来了。没问题。

其实等等，横向滚动容器会裁切左溢出——对，但第一个节点的线反正也被隐藏了。

没问题。

好，现在把完整内容再正式输出一遍。
<main id="main-content" class="page-news">

  <section class="news-hero">
    <div class="wrap news-hero__inner">
      <nav class="breadcrumb" aria-label="当前位置">
        <a href="/">首页</a>
        <span aria-hidden="true">/</span>
        <span aria-current="page">内容笔记</span>
      </nav>
      <p class="eyebrow">更新记录 · 归档至第12版</p>
      <h1 class="display-1 news-hero__title">内容笔记</h1>
      <p class="lede news-hero__lede">这里记的是 38娱乐站 自己改了什么。栏目导航怎么调、安卓稳定版说明改到哪一步、苹果端厂商列表这一轮同步了哪些字母分组、活动规则的卡片锚点怎么走——按栏目收成条目，再按版本阶段串成线。想确认站点还在不在维护，或者回头找某一版说明，从这张表往下看就行。</p>
      <ul class="news-hero__stats">
        <li class="news-stat">
          <span class="news-stat__num num">46</span>
          <span class="news-stat__label">苹果端厂商列表收录条目</span>
        </li>
        <li class="news-stat">
          <span class="news-stat__num num">12</span>
          <span class="news-stat__label">栏目导航覆盖的一级分类</span>
        </li>
        <li class="news-stat">
          <span class="news-stat__num num">3</span>
          <span class="news-stat__label">内容小组分工</span>
        </li>
      </ul>
    </div>
  </section>

  <section class="section section--panel news-archive" id="news-archive" data-section data-reveal>
    <div class="wrap">
      <div class="news-archive__head">
        <div>
          <p class="eyebrow">按栏目归档</p>
          <h2 class="display-3">条目列表</h2>
        </div>
        <p class="news-archive__note">每条只写一次改动动作和它影响的栏目。收起时栏目标签、标题与时间线索仍然可读，展开能看更细的说明。厂商列表与活动规则只记录变更动作，不复述内容本身。</p>
      </div>

      <nav class="news-jump" aria-label="跳转到条目分组">
        <ul class="news-jump__list">
          <li><a class="news-jump__link" href="#notes-nav">栏目导航与版本</a></li>
          <li><a class="news-jump__link" href="#notes-android">安卓安装说明</a></li>
          <li><a class="news-jump__link" href="#notes-ios">厂商列表</a></li>
          <li><a class="news-jump__link" href="#notes-rules">活动规则与答疑</a></li>
          <li><a class="news-jump__link" href="#notes-site">站点结构</a></li>
        </ul>
      </nav>

      <div class="news-body">
        <div class="news-log">

          <section class="news-log__group" id="notes-nav">
            <header class="news-group-head">
              <h3 class="news-group-head__title">栏目导航与版本</h3>
              <span class="news-group-head__meta">5 条</span>
            </header>

            <details class="news-entry">
              <summary class="news-entry__head">
                <span class="news-entry__tag news-entry__tag--site">内容笔记</span>
                <span class="news-entry__title">归档方式从按月排列改为按版本阶段排列</span>
                <span class="news-entry__time">第12版发布当周</span>
                <span class="news-entry__toggle" aria-hidden="true"></span>
              </summary>
              <div class="news-entry__body">
                <p>此前条目按月份堆在一起，跨版本的改动要依次翻。现在分成第12版、上一阶段、更早阶段三段，每条改动先归到它发生的阶段，再归到栏目。翻找时先定位版本，再看这一版动了哪些栏目。</p>
              </div>
            </details>

            <details class="news-entry">
              <summary class="news-entry__head">
                <span class="news-entry__tag news-entry__tag--nav">栏目导航</span>
                <span class="news-entry__title">12 个一级分类的入口名称做了一次统一复核</span>
                <span class="news-entry__time">第12版发布当周</span>
                <span class="news-entry__toggle" aria-hidden="true"></span>
              </summary>
              <div class="news-entry__body">
                <p>同一件事在不同页面出现过不止一种叫法。这一轮把栏目导航总表、答疑中心与服务页的入口名称收成一套写法，用户照着某一页记下的名字，到另一页仍然能找到同一个入口。</p>
              </div>
            </details>

            <details class="news-entry">
              <summary class="news-entry__head">
                <span class="news-entry__tag news-entry__tag--nav">栏目导航</span>
                <span class="news-entry__title">原本分散的设置项并回栏目导航总表</span>
                <span class="news-entry__time">第12版发布当周</span>
                <span class="news-entry__toggle" aria-hidden="true"></span>
              </summary>
              <div class="news-entry__body">
                <p>设置入口此前分列在两处，查一项要跳一次页面。合并后全部落在栏目导航总表页同一个区域，分类入口与设置项在同页可见。</p>
              </div>
            </details>

            <details class="news-entry">
              <summary class="news-entry__head">
                <span class="news-entry__tag news-entry__tag--nav">栏目导航</span>
                <span class="news-entry__title">一级分类由 10 个扩到 12 个</span>
                <span class="news-entry__time">上一阶段</span>
                <span class="news-entry__toggle" aria-hidden="true"></span>
              </summary>
              <div class="news-entry__body">
                <p>扩充后每个分类下面都配了对应的入口与说明位置，总表行数变多但分组层级不变。这一版也是当前 12 个一级分类的起点。</p>
              </div>
            </details>

            <details class="news-entry">
              <summary class="news-entry__head">
                <span class="news-entry__tag news-entry__tag--site">站点结构</span>
                <span class="news-entry__title">长页面侧栏目录由静态列表改为粘性锚点</span>
                <span class="news-entry__time">上一阶段</span>
                <span class="news-entry__toggle" aria-hidden="true"></span>
              </summary>
              <div class="news-entry__body">
                <p>规则页与说明页向下滚动时目录跟随，当前章节在左侧保持高亮。目录本身不折叠，跳转全部走页内锚点，不刷新页面。</p>
              </div>
            </details>
          </section>

          <div class="news-break">
            <span class="news-break__label">第12版 之前 · 上一阶段</span>
          </div>

          <section class="news-log__group" id="notes-android">
            <header class="news-group-head">
              <h3 class="news-group-head__title">安卓稳定版安装说明</h3>
              <span class="news-group-head__meta">3 条</span>
            </header>

            <details class="news-entry">
              <summary class="news-entry__head">
                <span class="news-entry__tag news-entry__tag--android">安卓安装</span>
                <span class="news-entry__title">第 3 步与第 5 步的版本备注重写为一句可核对的话</span>
                <span class="news-entry__time">本季度</span>
                <span class="news-entry__toggle" aria-hidden="true"></span>
              </summary>
              <div class="news-entry__body">
                <p>原先这两步的备注写得偏长，读起来像解释。改后每一步只留一句可对照的说明，装到哪一步出问题就回看哪一条，不必通读全文。</p>
              </div>
            </details>

            <details class="news-entry">
              <summary class="news-entry__head">
                <span class="news-entry__tag news-entry__tag--android">安卓安装</span>
                <span class="news-entry__title">说明开头补上「先读哪三条」的置顶提示</span>
                <span class="news-entry__time">本季度</span>
                <span class="news-entry__toggle" aria-hidden="true"></span>
              </summary>
              <div class="news-entry__body">
                <p>安装说明是连续编号的步骤结构，步骤之外还有版本备注。置顶提示把动手前必须先看的三条单独拎出来，剩下步骤按顺序读即可。</p>
              </div>
            </details>

            <details class="news-entry">
              <summary class="news-entry__head">
                <span class="news-entry__tag news-entry__tag--android">安卓安装</span>
                <span class="news-entry__title">步骤编号与正文分色，编号统一为琥珀金</span>
                <span class="news-entry__time">上一阶段</span>
                <span class="news-entry__toggle" aria-hidden="true"></span>
              </summary>
              <div class="news-entry__body">
                <p>编号自此全站统一取琥珀金，与版本号同色。正文保持近白，两侧不混色，扫读时先看到编号再看到内容。</p>
              </div>
            </details>
          </section>

          <section class="news-log__group" id="notes-ios">
            <header class="news-group-head">
              <h3 class="news-group-head__title">苹果端厂商列表</h3>
              <span class="news-group-head__meta">2 条</span>
            </header>

            <details class="news-entry">
              <summary class="news-entry__head">
                <span class="news-entry__tag news-entry__tag--ios">厂商列表</span>
                <span class="news-entry__title">本轮同步覆盖 A–F 段，新增 5 条并合并 2 条重名</span>
                <span class="news-entry__time">本季度</span>
                <span class="news-entry__toggle" aria-hidden="true"></span>
              </summary>
              <div class="news-entry__body">
                <p>同步按首字母分组推进，本轮只处理 A 到 F 开头的条目。重名条目合并后只保留一条，字母分组编号顺延。厂商列表整体按字母分组，与栏目导航的复核节奏不同步。</p>
              </div>
            </details>

            <details class="news-entry">
              <summary class="news-entry__head">
                <span class="news-entry__tag news-entry__tag--ios">厂商列表</span>
                <span class="news-entry__title">按更新时间排序的切换入口移到列表顶部</span>
                <span class="news-entry__time">上一阶段</span>
                <span class="news-entry__toggle" aria-hidden="true"></span>
              </summary>
              <div class="news-entry__body">
                <p>列表支持字母轴与更新时间轴两个视角。切换入口原先压在列表底部，改到顶部后，进页即可选择用哪种顺序看，切换时只重排容器顺序，不刷新页面。</p>
              </div>
            </details>
          </section>

          <section class="news-log__group" id="notes-rules">
            <header class="news-group-head">
              <h3 class="news-group-head__title">活动规则与答疑</h3>
              <span class="news-group-head__meta">2 条</span>
            </header>

            <details class="news-entry">
              <summary class="news-entry__head">
                <span class="news-entry__tag news-entry__tag--rules">活动规则</span>
                <span class="news-entry__title">规则栏目拆成独立卡片，每张卡片配独立锚点</span>
                <span class="news-entry__time">上一阶段</span>
                <span class="news-entry__toggle" aria-hidden="true"></span>
              </summary>
              <div class="news-entry__body">
                <p>原先规则集中在同一段落里，引用其中一条只能贴整页地址。拆成卡片后每张卡片有独立锚点，答疑中心可以直接指到具体那一条，用户不必在长页面里再找一遍。</p>
              </div>
            </details>

            <details class="news-entry">
              <summary class="news-entry__head">
                <span class="news-entry__tag news-entry__tag--rules">答疑中心</span>
                <span class="news-entry__title">答疑中心与内容笔记之间补上双向入口</span>
                <span class="news-entry__time">本季度</span>
                <span class="news-entry__toggle" aria-hidden="true"></span>
              </summary>
              <div class="news-entry__body">
                <p>答疑中心回答某一类条件怎么算，内容笔记记录规则本身改过什么。两边互跳后，用户从一个问题能直接看到它对应的那条改动，不用自己回翻。</p>
              </div>
            </details>
          </section>

          <section class="news-log__group" id="notes-site">
            <header class="news-group-head">
              <h3 class="news-group-head__title">站点结构</h3>
              <span class="news-group-head__meta">2 条</span>
            </header>

            <details class="news-entry">
              <summary class="news-entry__head">
                <span class="news-entry__tag news-entry__tag--site">站点结构</span>
                <span class="news-entry__title">页脚三列链接按使用频率重排</span>
                <span class="news-entry__time">上一阶段</span>
                <span class="news-entry__toggle" aria-hidden="true"></span>
              </summary>
              <div class="news-entry__body">
                <p>站点、帮助、规则与条款三列的内容与分组名称保持不变，只是把常走的站点与帮助两列提前，规则类链接留在第三列。</p>
              </div>
            </details>

            <details class="news-entry">
              <summary class="news-entry__head">
                <span class="news-entry__tag news-entry__tag--site">品牌概况</span>
                <span class="news-entry__title">品牌概况页时间线补上厂商列表上线那一节</span>
                <span class="news-entry__time">上一阶段</span>
                <span class="news-entry__toggle" aria-hidden="true"></span>
              </summary>
              <div class="news-entry__body">
                <p>时间线此前只写到栏目导航初版。补上苹果端厂商列表上线一节后，站点从搭起第一版栏目框架到今天的三个阶段连得上了。</p>
              </div>
            </details>

            <p class="news-back">
              <a class="arrow-link" href="#news-versions">回到版本迭代线<span class="arrow-link__arrow" aria-hidden="true">→</span></a>
            </p>
          </section>

        </div>

        <aside class="news-aside">
          <figure class="media media--wide news-aside__media">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="分栏式编辑界面的抽象形态，多列短条目并排排布" loading="lazy" decoding="async">
            <figcaption class="media__label">条目在编辑视图里的排布</figcaption>
          </figure>
          <div class="panel news-aside__panel">
            <p class="eyebrow">怎么读这些条目</p>
            <ul class="news-aside__list">
              <li>标题写改了什么，展开后写它影响哪个栏目、影响到什么程度。</li>
              <li>时间一律用栏目化表述，不给具体年月日。</li>
              <li>厂商列表与活动规则只留变更动作，内容本身不搬到这里。</li>
              <li>同一条改动只记一次，不因为涉及两个栏目就写两遍。</li>
            </ul>
          </div>
        </aside>
      </div>
    </div>
  </section>

  <section class="section section--teal news-versions" id="news-versions" data-section data-reveal>
    <div class="wrap">
      <header class="news-versions__head">
        <p class="eyebrow">版本迭代线</p>
        <h2 class="display-3">与版本号有关的那几条，单独串起来</h2>
        <p class="news-versions__lede">栏目导航以季度为复核节奏，厂商列表按字母分组同步，两类内容更新时间不同步。下面按阶段从近到远排，每个节点标出它包含的条目数，点回上面的列表能对上原文。</p>
      </header>

      <figure class="media media--wide news-versions__media">
        <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="延续向前的抽象光轨与节点，象征版本迭代的推移" loading="lazy" decoding="async">
      </figure>

      <ol class="news-vline__track">
        <li class="news-vline__node">
          <span class="news-vline__dot" aria-hidden="true"></span>
          <span class="num news-vline__num">第12版</span>
          <h3 class="news-vline__title">当前版本</h3>
          <p class="news-vline__desc">12 个一级分类的入口与说明位置收在同页，设置项并回总表，入口名称统一复核。</p>
          <span class="news-vline__count">5 条记录</span>
        </li>
        <li class="news-vline__node">
          <span class="news-vline__dot" aria-hidden="true"></span>
          <span class="num news-vline__num">第11版阶段</span>
          <h3 class="news-vline__title">分类扩容与目录改造</h3>
          <p class="news-vline__desc">一级分类由 10 个扩到 12 个，长页面侧栏目录改为粘性锚点，安装说明步骤编号统一取色。</p>
          <span class="news-vline__count">3 条记录</span>
        </li>
        <li class="news-vline__node">
          <span class="news-vline__dot" aria-hidden="true"></span>
          <span class="num news-vline__num">更早阶段</span>
          <h3 class="news-vline__title">规则卡片化与厂商列表上线</h3>
          <p class="news-vline__desc">活动规则拆成独立卡片并配锚点，苹果端厂商列表正式进入栏目体系，页脚三列重排。</p>
          <span class="news-vline__count">6 条记录</span>
        </li>
      </ol>

      <p class="news-versions__foot meta">版本号全站统一写作「第12版」。栏目导航与厂商列表不会在同一天更新，回溯时请分开看。</p>
    </div>
  </section>

  <section class="section section--wine news-restructure" id="news-restructure" data-section data-reveal>
    <div class="wrap news-restructure__inner">
      <figure class="media media--square news-restructure__media">
        <img src="{zhanqunpic:h:1200w:1200}" width="1200" height="1200" alt="多层卡片边缘错位叠加的抽象特写" loading="lazy" decoding="async">
      </figure>
      <div class="news-restructure__copy">
        <p class="eyebrow">结构性调整</p>
        <h2 class="display-3">栏目改版说明</h2>
        <p class="news-restructure__lede">这里收的是动到结构本身的改动：栏目怎么分、卡片怎么排、入口放在哪一层。内容一条没改、只换了位置的调整也记在这里，方便按记忆翻回旧路径的人找到新落点。</p>
        <ul class="news-restructure__list">
          <li class="news-restructure__item">
            <span class="num news-restructure__idx">01</span>
            <div>
              <h3 class="news-restructure__title">活动规则从连续段落改为卡片分区</h3>
              <p>每张卡片一个独立锚点，卡片之间不互相引用。引用某一条时直接用该卡片地址，收件人打开后停在那一条上。</p>
            </div>
          </li>
          <li class="news-restructure__item">
            <span class="num news-restructure__idx">02</span>
            <div>
              <h3 class="news-restructure__title">栏目导航总表吸收设置项</h3>
              <p>分类入口与设置项并到同页之后，总表页的行数增加，但分组层级不变。原来的两个入口保留跳转，不做二次跳转。</p>
            </div>
          </li>
          <li class="news-restructure__item">
            <span class="num news-restructure__idx">03</span>
            <div>
              <h3 class="news-restructure__title">规则页与说明页启用粘性锚点目录</h3>
              <p>只在长页面启用。目录跟随滚动但不折叠，跳转全部走页内锚点，不使用新窗口。</p>
            </div>
          </li>
          <li class="news-restructure__item">
            <span class="num news-restructure__idx">04</span>
            <div>
              <h3 class="news-restructure__title">厂商列表排序入口从底部移到顶部</h3>
              <p>字母轴与更新时间轴两个视角的切换按钮位置调整，排序逻辑不变，切换时只重排容器顺序。</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="section news-sync" id="news-sync" data-section data-reveal>
    <div class="wrap">
      <header class="section-head news-sync__head">
        <p class="eyebrow">同步记录</p>
        <h2 class="display-3">厂商列表每一轮改了什么</h2>
        <p class="news-sync__lede">厂商列表按首字母分组推进，一次只做一段字母。轮次连续编号，字母区间沿前一版顺延。下面只记覆盖范围与调整方向，不列具体厂商名称。</p>
      </header>

      <ol class="news-sync__rows">
        <li class="news-sync__row">
          <span class="num news-sync__round">第 4 轮</span>
          <span class="news-sync__letters">A–F</span>
          <p class="news-sync__note">新增 5 条条目，合并 2 条重名，字母分组编号向后顺延。本轮同时复核了这一段条目的更新时间字段。</p>
        </li>
        <li class="news-sync__row">
          <span class="num news-sync__round">第 3 轮</span>
          <span class="news-sync__letters">G–M</span>
          <p class="news-sync__note">补全该段缺失的更新时间字段，未新增条目。字母轴顺序保持不变。</p>
        </li>
        <li class="news-sync__row">
          <span class="num news-sync__round">第 2 轮</span>
          <span class="news-sync__letters">N–S</span>
          <p class="news-sync__note">按更新时间轴重排该段显示顺序，条目内容不变，仅调整列表呈现的先后。</p>
        </li>
        <li class="news-sync__row">
          <span class="num news-sync__round">第 1 轮</span>
          <span class="news-sync__letters">T–Z</span>
          <p class="news-sync__note">完成首轮建档，确定按首字母分组的基本结构，并留出更新时间字段的位置。</p>
        </li>
      </ol>

      <p class="news-sync__foot meta">当前厂商列表共 46 条，四个字母区段均已至少复核一轮。下一轮从 A 段起按同样结构复走，具体节奏以本页条目为准。</p>
    </div>
  </section>

  <section class="section section--deep news-subscribe" id="news-subscribe" data-section data-reveal>
    <div class="wrap news-subscribe__inner">
      <div class="news-subscribe__copy">
        <p class="eyebrow">订阅与回看</p>
        <h2 class="display-3">多久来一次，看哪里</h2>
        <p class="news-subscribe__lede">内容笔记不做推送，也不占一个固定日期。栏目导航以季度为复核节奏，厂商列表按字母分组往前推，安装说明随版本改。想知道有没有新东西，看本页最上面那一组条目即可，最新的永远排在最前。</p>
        <ul class="news-subscribe__list">
          <li>
            <span class="num news-subscribe__idx">01</span>
            <p>要核对安装步骤，去 <a href="/services/">服务与下载</a> 看当前说明；本页只记说明改过哪几步。</p>
          </li>
          <li>
            <span class="num news-subscribe__idx">02</span>
            <p>要确认某个条件怎么算，去 <a href="/answers/">答疑中心</a> 找对应问题；本页只记规则栏目结构动过什么。</p>
          </li>
          <li>
            <span class="num news-subscribe__idx">03</span>
            <p>想知道站点从哪一版走来，去 <a href="/profile/">品牌概况</a> 看时间线；本页只保留与版本号直接相关的那几段。</p>
          </li>
          <li>
            <span class="num news-subscribe__idx">04</span>
            <p>发现条目与实际不一致，走 <a href="/feedback/">反馈通道</a> 提交，写清栏目名和大致位置即可。</p>
          </li>
        </ul>
      </div>
      <figure class="media media--wide news-subscribe__media">
        <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="夜间城市轮廓与横向光带的抽象切片，不指向具体地点" loading="lazy" decoding="async">
      </figure>
    </div>
  </section>

</main>

.page-news {
  --news-tag: 132px;
  --news-time: 142px;
}

/* ---------- 首屏 ---------- */
.page-news .news-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + 48px) 0 54px;
  background:
    radial-gradient(120% 92% at 84% 6%, rgba(43, 227, 208, 0.16), transparent 58%),
    radial-gradient(92% 74% at 4% 98%, rgba(224, 68, 124, 0.15), transparent 62%),
    linear-gradient(180deg, #04101b 0%, var(--ink) 100%);
  border-bottom: 1px solid var(--line);
}

.page-news .news-hero__inner {
  position: relative;
  z-index: 1;
}

.page-news .news-hero .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  font-size: 13px;
  color: var(--muted);
}

.page-news .news-hero .breadcrumb a {
  color: var(--muted);
  text-decoration: none;
  transition: color var(--t) var(--ease);
}

.page-news .news-hero .breadcrumb a:hover {
  color: var(--neon-soft);
}

.page-news .news-hero .breadcrumb span[aria-current] {
  color: var(--amber);
}

.page-news .news-hero__title {
  margin: 12px 0 0;
  letter-spacing: 0.05em;
  color: var(--text);
}

.page-news .news-hero__lede {
  margin: 20px 0 0;
  max-width: 46em;
  color: var(--muted);
}

.page-news .news-hero__stats {
  display: grid;
  grid-template-columns: 1fr;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-news .news-stat {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.page-news .news-stat__num {
  flex: 0 0 auto;
  min-width: 60px;
  font-family: var(--font-num);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--amber);
}

.page-news .news-stat__label {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- 归档区头部 ---------- */
.page-news .news-archive__head {
  display: grid;
  gap: 18px;
  margin-bottom: 26px;
}

.page-news .news-archive__head h2 {
  margin: 10px 0 0;
}

.page-news .news-archive__note {
  margin: 0;
  max-width: 48em;
  font-size: 14px;
  line-height: 1.85;
  color: var(--muted);
}

/* ---------- 分组跳转条 ---------- */
.page-news .news-jump {
  margin-bottom: 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-news .news-jump__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.page-news .news-jump__list::-webkit-scrollbar {
  display: none;
}

.page-news .news-jump__link {
  display: block;
  margin-right: 22px;
  padding: 13px 2px;
  white-space: nowrap;
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.page-news .news-jump__link:hover,
.page-news .news-jump__link:focus-visible {
  color: var(--neon-soft);
  border-bottom-color: var(--neon);
}

/* ---------- 主体分栏 ---------- */
.page-news .news-body {
  display: grid;
  gap: 44px;
}

.page-news .news-aside {
  display: grid;
  gap: 24px;
  align-content: start;
}

.page-news .news-aside__media {
  margin: 0;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--ink-2);
}

.page-news .news-aside__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-news .news-aside__panel {
  padding: 22px 20px;
}

.page-news .news-aside__list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.page-news .news-aside__list li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--muted);
}

.page-news .news-aside__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background: var(--neon);
  transform: rotate(45deg);
}

/* ---------- 分组标题 ---------- */
.page-news .news-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 0 12px;
  border-top: 1px solid var(--line);
}

.page-news .news-group-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(19px, 3.4vw, 26px);
  letter-spacing: 0.04em;
  color: var(--text);
}

.page-news .news-group-head__meta {
  font-family: var(--font-num);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--amber);
  white-space: nowrap;
}

.page-news .news-log__group + .news-log__group {
  margin-top: 10px;
}

/* ---------- 条目 ---------- */
.page-news .news-entry {
  border-bottom: 1px solid var(--line);
}

.page-news .news-entry__head {
  display: grid;
  grid-template-columns: auto 1fr auto 18px;
  align-items: baseline;
  gap: 8px 12px;
  padding: 16px 10px 16px 12px;
  cursor: pointer;
  list-style: none;
  transition: background-color var(--t) var(--ease);
}

.page-news .news-entry__head::-webkit-details-marker {
  display: none;
}

.page-news .news-entry__head::marker {
  content: "";
}

.page-news .news-entry__head:hover {
  background-color: rgba(43, 227, 208, 0.055);
}

.page-news .news-entry[open] > .news-entry__head {
  background-color: rgba(43, 227, 208, 0.04);
}

.page-news .news-entry__tag {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-size: 11px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.page-news .news-entry__tag--nav {
  color: var(--neon);
  background: rgba(43, 227, 208, 0.08);
}

.page-news .news-entry__tag--android {
  color: var(--amber);
  background: rgba(233, 178, 60, 0.09);
}

.page-news .news-entry__tag--ios {
  color: var(--magenta);
  background: rgba(224, 68, 124, 0.09);
}

.page-news .news-entry__tag--rules {
  color: var(--neon-soft);
  background: rgba(140, 246, 234, 0.07);
}

.page-news .news-entry__tag--site {
  color: var(--muted);
  background: rgba(147, 169, 188, 0.08);
}

.page-news .news-entry__title {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background-image: linear-gradient(var(--neon-soft), var(--neon-soft));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--t) var(--ease);
}

.page-news .news-entry__head:hover .news-entry__title {
  background-size: 100% 1px;
}

.page-news .news-entry__time {
  grid-column: 2 / 4;
  grid-row: 1;
  text-align: right;
  font-family: var(--font-num);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
}

.page-news .news-entry__toggle {
  grid-column: 4;
  grid-row: 1;
  position: relative;
  align-self: center;
  width: 18px;
  height: 18px;
}

.page-news .news-entry__toggle::before,
.page-news .news-entry__toggle::after {
  content: "";
  position: absolute;
  background: var(--neon);
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}

.page-news .news-entry__toggle::before {
  left: 3px;
  top: 8px;
  width: 12px;
  height: 1.5px;
}

.page-news .news-entry__toggle::after {
  left: 8px;
  top: 3px;
  width: 1.5px;
  height: 12px;
}

.page-news .news-entry[open] .news-entry__toggle::after {
  transform: scaleY(0);
  opacity: 0;
}

.page-news .news-entry__body {
  padding: 0 12px 20px;
}

.page-news .news-entry__body p {
  margin: 0;
  max-width: 46em;
  padding-left: 12px;
  border-left: 2px solid rgba(43, 227, 208, 0.34);
  font-size: 14px;
  line-height: 1.85;
  color: var(--muted);
}

/* ---------- 阶段分隔 ---------- */
.page-news .news-break {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 30px 0 8px;
}

.page-news .news-break::before,
.page-news .news-break::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(43, 227, 208, 0), rgba(43, 227, 208, 0.7), rgba(43, 227, 208, 0));
}

.page-news .news-break__label {
  font-family: var(--font-num);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--neon);
  white-space: nowrap;
}

/* ---------- 回到版本线 ---------- */
.page-news .news-back {
  margin: 26px 0 0;
}

.page-news .news-back .arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--neon);
  text-decoration: none;
  transition: color var(--t) var(--ease);
}

.page-news .news-back .arrow-link:hover {
  color: var(--neon-soft);
}

/* ---------- 版本迭代线 ---------- */
.page-news .news-versions__head {
  margin-bottom: 32px;
}

.page-news .news-versions__head h2 {
  margin: 10px 0 0;
}

.page-news .news-versions__lede {
  margin: 16px 0 0;
  max-width: 46em;
  font-size: 15px;
  line-height: 1.85;
  color: var(--muted);
}

.page-news .news-versions__media {
  margin: 0 0 36px;
  border: 1px solid rgba(43, 227, 208, 0.24);
  overflow: hidden;
}

.page-news .news-versions__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-news .news-vline__track {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.page-news .news-vline__node {
  position: relative;
  flex: 0 0 min(268px, 76vw);
  padding: 28px 0 0;
  scroll-snap-align: start;
}

.page-news .news-vline__node::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 6px;
  width: 24px;
  height: 1px;
  background: rgba(43, 227, 208, 0.45);
}

.page-news .news-vline__node:first-child::before {
  display: none;
}

.page-news .news-vline__dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(233, 178, 60, 0.15);
  transition: box-shadow var(--t) var(--ease);
}

.page-news .news-vline__node:hover .news-vline__dot {
  box-shadow: 0 0 0 8px rgba(233, 178, 60, 0.24);
}

.page-news .news-vline__num {
  display: block;
  font-family: var(--font-num);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--amber);
}

.page-news .news-vline__title {
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.page-news .news-vline__desc {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--muted);
}

.page-news .news-vline__count {
  display: inline-block;
  margin-top: 12px;
  padding: 2px 8px;
  border: 1px solid rgba(43, 227, 208, 0.42);
  font-family: var(--font-num);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--neon);
}

.page-news .news-versions__foot {
  margin: 28px 0 0;
  padding-left: 12px;
  border-left: 2px solid rgba(233, 178, 60, 0.5);
}

/* ---------- 栏目改版说明 ---------- */
.page-news .news-restructure__inner {
  display: grid;
  gap: 36px;
}

.page-news .news-restructure__media {
  margin: 0;
  border: 1px solid rgba(224, 68, 124, 0.32);
  overflow: hidden;
}

.page-news .news-restructure__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-news .news-restructure__copy h2 {
  margin: 10px 0 0;
}

.page-news .news-restructure__lede {
  margin: 18px 0 0;
  max-width: 44em;
  font-size: 15px;
  line-height: 1.85;
  color: var(--muted);
}

.page-news .news-restructure__list {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.page-news .news-restructure__item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid rgba(224, 68, 124, 0.26);
}

.page-news .news-restructure__idx {
  font-family: var(--font-num);
  font-size: 17px;
  font-weight: 700;
  color: var(--amber);
}

.page-news .news-restructure__title {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text);
}

.page-news .news-restructure__item p {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--muted);
}

/* ---------- 厂商列表同步记录 ---------- */
.page-news .news-sync__head h2 {
  margin: 10px 0 0;
}

.page-news .news-sync__lede {
  margin: 16px 0 0;
  max-width: 46em;
  font-size: 14px;
  line-height: 1.85;
  color: var(--muted);
}

.page-news .news-sync__rows {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-news .news-sync__row {
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px 18px;
  padding: 18px 10px 18px 0;
  border-bottom: 1px solid var(--line);
  transition: background-color var(--t) var(--ease);
}

.page-news .news-sync__row:hover {
  background-color: rgba(233, 178, 60, 0.05);
}

.page-news .news-sync__round {
  font-family: var(--font-num);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--amber);
  white-space: nowrap;
}

.page-news .news-sync__letters {
  font-family: var(--font-num);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text);
}

.page-news .news-sync__note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--muted);
}

.page-news .news-sync__foot {
  margin: 24px 0 0;
  padding-left: 12px;
  border-left: 2px solid rgba(43, 227, 208, 0.4);
}

/* ---------- 订阅与回看 ---------- */
.page-news .news-subscribe__inner {
  display: grid;
  gap: 32px;
}

.page-news .news-subscribe__copy h2 {
  margin: 10px 0 0;
}

.page-news .news-subscribe__lede {
  margin: 18px 0 0;
  max-width: 42em;
  font-size: 15px;
  line-height: 1.85;
  color: var(--muted);
}

.page-news .news-subscribe__list {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.page-news .news-subscribe__list li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.page-news .news-subscribe__idx {
  font-family: var(--font-num);
  font-size: 15px;
  font-weight: 700;
  color: var(--amber);
}

.page-news .news-subscribe__list p {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--muted);
}

.page-news .news-subscribe__list a {
  color: var(--neon);
  text-decoration: none;
  border-bottom: 1px solid rgba(43, 227, 208, 0.42);
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.page-news .news-subscribe__list a:hover {
  color: var(--neon-soft);
  border-bottom-color: var(--neon-soft);
}

.page-news .news-subscribe__media {
  margin: 0;
  border: 1px solid var(--line);
  overflow: hidden;
  order: -1;
}

.page-news .news-subscribe__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 平板 ---------- */
@media (min-width: 720px) {
  .page-news .news-hero__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-news .news-stat {
    flex-direction: column;
    gap: 8px;
    padding: 22px 22px 22px 0;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }

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

  .page-news .news-sync__row {
    grid-template-columns: 92px 92px minmax(0, 1fr);
    align-items: baseline;
    gap: 0 22px;
  }

  .page-news .news-sync__note {
    grid-column: 3;
  }
}

/* ---------- 桌面 ---------- */
@media (min-width: 900px) {
  .page-news .news-archive__head {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: end;
    gap: 40px;
  }

  .page-news .news-entry__head {
    grid-template-columns: var(--news-tag) minmax(0, 1fr) var(--news-time) 18px;
    gap: 0 20px;
  }

  .page-news .news-entry__tag {
    grid-column: 1;
    grid-row: 1;
  }

  .page-news .news-entry__title {
    grid-column: 2;
    grid-row: 1;
  }

  .page-news .news-entry__time {
    grid-column: 3;
    grid-row: 1;
  }

  .page-news .news-entry__toggle {
    grid-column: 4;
    grid-row: 1;
  }

  .page-news .news-restructure__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: start;
    gap: 56px;
  }

  .page-news .news-subscribe__inner {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: center;
    gap: 52px;
  }

  .page-news .news-subscribe__media {
    order: 0;
  }
}

@media (min-width: 1000px) {
  .page-news .news-body {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 54px;
  }
}