.page-news {
  --news-cat-dir: var(--neon);
  --news-cat-res: var(--mist);
  --news-cat-doc: var(--cold);
  --news-cat-ux: #a7b6d9;
  --news-cat-obs: var(--violet);
  --news-head-top: 64px;

  background: var(--void);
  color: var(--near-white);
  font-family: var(--font-body);
  font-size: var(--fs-5);
  line-height: 1.75;
  letter-spacing: 0.01em;
}

.page-news h1,
.page-news h2,
.page-news h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--near-white);
}

.page-news .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.page-news :focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.page-news .news-hero {
  position: relative;
  padding: 116px 0 56px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(110% 70% at 88% 0%, rgba(79, 227, 208, 0.12), transparent 62%),
    radial-gradient(80% 60% at 6% 12%, rgba(110, 106, 138, 0.16), transparent 68%),
    linear-gradient(180deg, var(--night) 0%, var(--void) 82%);
}

.page-news .news-hero__grid {
  display: grid;
  gap: 28px;
}

.page-news .news-hero__copy {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.page-news .news-hero__copy h1 {
  font-size: var(--fs-1);
  max-width: 15em;
}

.page-news .news-hero__copy .lede {
  max-width: 42em;
  color: var(--cold);
  font-size: var(--fs-5);
}

.page-news .news-hero__panel {
  align-self: start;
  display: grid;
  gap: 8px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: rgba(12, 23, 48, 0.72);
  box-shadow: var(--shadow-soft);
  min-width: 0;
}

.page-news .news-hero__panel-label {
  font-size: var(--fs-7);
  color: var(--violet);
  text-transform: uppercase;
}

.page-news .news-hero__panel-ver {
  font-size: var(--fs-2);
  font-weight: 500;
  color: var(--neon);
  line-height: 1.1;
  text-shadow: 0 0 22px rgba(79, 227, 208, 0.35);
}

.page-news .news-hero__panel-note {
  font-size: var(--fs-6);
  color: var(--cold);
}

.page-news .news-hero__panel-list {
  display: grid;
  gap: 6px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-6);
  color: var(--cold);
}

.page-news .news-hero__panel-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.page-news .news-hero__panel-list .mono {
  color: var(--near-white);
}

.page-news .news-hero__figure {
  margin: 36px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--night);
  box-shadow: var(--shadow-lift);
}

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

/* ---------- 栏目主题带 ---------- */

.page-news .topic-band {
  position: sticky;
  top: var(--news-head-top);
  z-index: 5;
  border-bottom: 1px solid var(--line);
  background: rgba(6, 11, 24, 0.94);
  backdrop-filter: blur(12px);
}

.page-news .topic-band__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 13px;
  padding-bottom: 13px;
  min-width: 0;
}

.page-news .topic-band__label {
  flex: none;
  font-size: var(--fs-7);
  color: var(--violet);
  text-transform: uppercase;
}

.page-news .topic-band__scroller {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 4px;
}

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

.page-news .chip {
  flex: none;
  padding: 7px 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-7);
  letter-spacing: 0.04em;
  color: var(--cold);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-chip);
  white-space: nowrap;
  cursor: pointer;
  transition: color 180ms var(--ease-path), background 180ms var(--ease-path),
    border-color 180ms var(--ease-path);
}

.page-news .chip:hover {
  color: var(--near-white);
  border-color: rgba(154, 167, 189, 0.4);
}

.page-news .chip[aria-pressed="true"] {
  color: var(--void);
  background: var(--neon);
  border-color: var(--neon);
  box-shadow: var(--glow-neon);
}

/* ---------- 区块通用 ---------- */

.page-news .section {
  padding: 64px 0;
}

.page-news .section--tight {
  padding: 56px 0;
  border-top: 1px solid var(--line);
}

.page-news .section-head {
  display: grid;
  gap: 10px;
  max-width: 46em;
  margin-bottom: 32px;
}

.page-news .section-head h2 {
  font-size: var(--fs-2);
}

.page-news .section-head p {
  color: var(--cold);
}

/* ---------- 最近更新 ---------- */

.page-news .news-layout {
  display: grid;
  gap: 28px;
}

.page-news .news-list {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.page-news .news-item {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--night);
  box-shadow: var(--shadow-soft);
  min-width: 0;
  transition: border-color 220ms var(--ease-path), transform 220ms var(--ease-path),
    box-shadow 220ms var(--ease-path);
}

.page-news .news-item:hover {
  border-color: rgba(79, 227, 208, 0.38);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}

.page-news .news-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.page-news .news-item__ver {
  font-size: var(--fs-6);
  color: var(--neon);
}

.page-news .news-item__cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-7);
  letter-spacing: 0.04em;
  color: var(--cold);
  border: 1px solid var(--line);
  border-radius: var(--radius-chip);
  background: rgba(23, 35, 61, 0.6);
}

.page-news .news-item__cat::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--news-cat-doc);
}

.page-news .news-item__cat[data-cat="目录调整"]::before {
  background: var(--news-cat-dir);
}

.page-news .news-item__cat[data-cat="资源更新"]::before {
  background: var(--news-cat-res);
}

.page-news .news-item__cat[data-cat="帮助文档"]::before {
  background: var(--news-cat-doc);
}

.page-news .news-item__cat[data-cat="体验优化"]::before {
  background: var(--news-cat-ux);
}

.page-news .news-item__cat[data-cat="运营观察"]::before {
  background: var(--news-cat-obs);
}

.page-news .news-item__when {
  margin-left: auto;
  font-size: var(--fs-7);
  color: var(--violet);
}

.page-news .news-item h3 {
  font-size: var(--fs-4);
  font-weight: 800;
}

.page-news .news-item p {
  color: var(--cold);
  font-size: var(--fs-6);
  line-height: 1.8;
}

.page-news .news-item__foot {
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
  margin-top: 2px;
  border-top: 1px solid var(--line-soft);
}

.page-news .copy-link {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: var(--fs-7);
  letter-spacing: 0.04em;
  color: var(--violet);
  cursor: pointer;
  transition: color 180ms var(--ease-path);
}

.page-news .copy-link:hover,
.page-news .copy-link[data-copied="true"] {
  color: var(--neon);
}

/* ---------- 侧栏 ---------- */

.page-news .news-side {
  display: grid;
  gap: 18px;
  align-content: start;
  min-width: 0;
}

.page-news .news-side__figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--night);
}

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

.page-news .news-side__legend {
  display: grid;
  gap: 14px;
  padding: 20px;
}

.page-news .news-side__legend-title {
  font-size: var(--fs-7);
  color: var(--violet);
  text-transform: uppercase;
}

.page-news .news-side__legend ul {
  display: grid;
  gap: 9px;
}

.page-news .news-side__legend li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-6);
  color: var(--cold);
}

.page-news .news-side__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--news-cat-doc);
}

.page-news .news-side__dot[data-dot="目录调整"] {
  background: var(--news-cat-dir);
}

.page-news .news-side__dot[data-dot="资源更新"] {
  background: var(--news-cat-res);
}

.page-news .news-side__dot[data-dot="帮助文档"] {
  background: var(--news-cat-doc);
}

.page-news .news-side__dot[data-dot="体验优化"] {
  background: var(--news-cat-ux);
}

.page-news .news-side__dot[data-dot="运营观察"] {
  background: var(--news-cat-obs);
}

/* ---------- 版本时间线 ---------- */

.page-news .timeline {
  display: grid;
  gap: 28px;
}

.page-news .timeline__scroller {
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}

.page-news .timeline__track {
  position: relative;
  display: flex;
  min-width: max-content;
  padding: 6px 4px 4px;
  list-style: none;
}

.page-news .timeline__track::before {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  top: 41px;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(154, 167, 189, 0.08) 0%,
    rgba(79, 227, 208, 0.42) 20%,
    rgba(79, 227, 208, 0.42) 86%,
    rgba(79, 227, 208, 0.7) 100%
  );
}

.page-news .timeline__node {
  flex: 0 0 auto;
  width: 132px;
  display: grid;
  grid-template-rows: 24px 22px auto auto;
  align-items: start;
  padding-right: 18px;
  min-width: 0;
}

.page-news .timeline__ver {
  font-size: var(--fs-7);
  color: var(--cold);
  align-self: start;
}

.page-news .timeline__dot {
  align-self: center;
  justify-self: start;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--structure);
  border: 1px solid rgba(154, 167, 189, 0.35);
}

.page-news .timeline__node--dense .timeline__dot {
  background: rgba(79, 227, 208, 0.45);
  border-color: rgba(79, 227, 208, 0.6);
}

.page-news .timeline__node.is-latest .timeline__ver {
  color: var(--neon);
}

.page-news .timeline__node.is-latest .timeline__dot {
  background: var(--neon);
  border-color: var(--neon);
  box-shadow: var(--glow-neon);
}

.page-news .timeline__count {
  margin-top: 10px;
  font-size: var(--fs-3);
  color: var(--near-white);
  line-height: 1.1;
}

.page-news .timeline__label {
  font-size: var(--fs-7);
  color: var(--violet);
}

.page-news .timeline__figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--night);
  box-shadow: var(--shadow-soft);
}

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

.page-news .timeline__figure figcaption {
  padding: 12px 18px 14px;
  font-size: var(--fs-7);
  color: var(--violet);
  border-top: 1px solid var(--line-soft);
}

/* ---------- 观察与说明 ---------- */

.page-news .obs-grid {
  display: grid;
  gap: 18px;
}

.page-news .obs {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, rgba(12, 23, 48, 0.9), rgba(12, 23, 48, 0.6));
  box-shadow: var(--shadow-soft);
  min-width: 0;
}

.page-news .obs__meta {
  font-size: var(--fs-7);
  color: var(--violet);
}

.page-news .obs h3 {
  font-size: var(--fs-4);
}

.page-news .obs p {
  color: var(--cold);
  font-size: var(--fs-6);
  line-height: 1.8;
}

.page-news .obs__figure {
  margin: 0;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  overflow: hidden;
  background: var(--void);
}

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

.page-news .obs--lead {
  border-color: rgba(79, 227, 208, 0.28);
  box-shadow: var(--shadow-lift);
}

.page-news .obs__body {
  display: grid;
  gap: 12px;
  align-content: start;
}

/* ---------- 回看与跟进 ---------- */

.page-news .follow-grid {
  display: grid;
  gap: 18px;
}

.page-news .follow-card {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--night);
  box-shadow: var(--shadow-soft);
  min-width: 0;
  position: relative;
  overflow: hidden;
}

.page-news .follow-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--neon), transparent 72%);
  opacity: 0.55;
}

.page-news .follow-card__num {
  font-size: var(--fs-7);
  color: var(--neon);
}

.page-news .follow-card h3 {
  font-size: var(--fs-4);
}

.page-news .follow-card p {
  color: var(--cold);
  font-size: var(--fs-6);
  line-height: 1.8;
}

.page-news .follow-card__link {
  justify-self: start;
  margin-top: 4px;
  font-size: var(--fs-6);
  color: var(--mist);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 243, 235, 0.35);
  padding-bottom: 2px;
  transition: color 180ms var(--ease-path), border-color 180ms var(--ease-path);
}

.page-news .follow-card__link:hover {
  color: var(--neon);
  border-color: var(--neon);
}

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

@media (min-width: 720px) {
  .page-news .news-hero {
    padding: 140px 0 64px;
  }

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

  .page-news .news-item--wide {
    grid-column: span 2;
  }

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

@media (min-width: 960px) {
  .page-news .news-hero__grid {
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: start;
    gap: 40px;
  }

  .page-news .section {
    padding: 84px 0;
  }

  .page-news .section--tight {
    padding: 72px 0;
  }

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

  .page-news .obs--lead {
    grid-column: span 2;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: 28px;
  }

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

@media (min-width: 1080px) {
  .page-news .news-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 32px;
  }

  .page-news .news-side {
    position: sticky;
    top: calc(var(--news-head-top) + 78px);
  }

  .page-news .timeline__node {
    width: 148px;
  }
}

@media (max-width: 719px) {
  .page-news .news-hero__panel-ver {
    font-size: var(--fs-3);
  }

  .page-news .timeline__track::before {
    top: 41px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .news-item,
  .page-news .chip,
  .page-news .copy-link,
  .page-news .follow-card__link {
    transition: none;
  }

  .page-news .news-item:hover {
    transform: none;
  }
}
</final>
<<<END>>>

等一下——我来修正一下收尾部分。输出应该是：


...

...

不需要再加一个 `</final>` 之类的标记。保持简洁。下面就是修正后的版本。以下是修正后的完整输出：


<main id="main-content" class="page-news">

  <section class="news-hero">
    <div class="container">
      <div class="news-hero__grid" data-stagger="60">
        <div class="news-hero__copy reveal">
          <nav class="breadcrumb" aria-label="页面路径">
            <ol>
              <li><a href="/">首页</a></li>
              <li aria-current="page">更新与观察</li>
            </ol>
          </nav>
          <p class="eyebrow">INSIGHTS · 版本轨迹</p>
          <h1>改了什么、为什么改，顺着版本号可查</h1>
          <p class="lede">9393网页版把每一轮迭代按版本公开：目录怎么调、资源补了什么、体验改在哪个环节，你关心过的那次变化都可以从这里往回翻。</p>
        </div>

        <aside class="news-hero__panel reveal">
          <p class="mono news-hero__panel-label">当前公开版本</p>
          <p class="mono news-hero__panel-ver">v3.26</p>
          <p class="news-hero__panel-note">本版收录 8 条变化，集中在入口位置与筛选操作上。</p>
          <ul class="news-hero__panel-list">
            <li><span class="mono">2 周</span>推进一步小版本</li>
            <li><span class="mono">240+</span>条更新记录在案</li>
          </ul>
        </aside>
      </div>

      <figure class="news-hero__figure reveal">
        <img src="{zhanqunpic:h:480w:1080}" width="1080" height="480" alt="多条水平轨道叠加的版本时间线抽象图，节点亮度表示更新密集程度">
      </figure>
    </div>
  </section>

  <div class="topic-band">
    <div class="container topic-band__inner">
      <span class="topic-band__label mono">按栏目</span>
      <div class="topic-band__scroller" role="group" aria-label="按栏目查看更新条目">
        <button class="chip" type="button" aria-pressed="true">全部</button>
        <button class="chip" type="button" aria-pressed="false">目录调整</button>
        <button class="chip" type="button" aria-pressed="false">资源更新</button>
        <button class="chip" type="button" aria-pressed="false">帮助文档</button>
        <button class="chip" type="button" aria-pressed="false">体验优化</button>
        <button class="chip" type="button" aria-pressed="false">运营观察</button>
      </div>
    </div>
  </div>

  <section class="section" id="recent">
    <div class="container">
      <header class="section-head reveal">
        <p class="eyebrow eyebrow--mute">RECENT</p>
        <h2>最近更新</h2>
        <p>条目按版本从新到旧排列，每条写清楚属于哪个栏目、改在哪里。点一下上面的栏目名，就能把范围收窄再看。</p>
      </header>

      <div class="news-layout">
        <div class="news-list" data-stagger="60">

          <article class="news-item news-item--wide reveal" id="entry-v326">
            <div class="news-item__head">
              <span class="news-item__ver mono">v3.26</span>
              <span class="news-item__cat" data-cat="体验优化">体验优化</span>
              <span class="news-item__when mono">最近</span>
            </div>
            <h3>窄屏下的首页路径轴收起为顶部细条</h3>
            <p>手机端不再被左侧一整列占走宽度，首屏能看见的内容块多出约两成。当前位置标记改为跟着滚动挂在顶部，翻到哪一段都知道自己站在哪。</p>
            <div class="news-item__foot">
              <button class="copy-link" type="button" data-copy-current data-copy-label="复制直达链接">复制直达链接</button>
            </div>
          </article>

          <article class="news-item reveal" id="entry-v325">
            <div class="news-item__head">
              <span class="news-item__ver mono">v3.25</span>
              <span class="news-item__cat" data-cat="目录调整">目录调整</span>
              <span class="news-item__when mono">最近</span>
            </div>
            <h3>一级目录拆出终端支持分区</h3>
            <p>桌面端与移动端的入口分开摆放，找移动端相关条目的动作从三次跳转压到一次。</p>
            <div class="news-item__foot">
              <button class="copy-link" type="button" data-copy-current data-copy-label="复制直达链接">复制直达链接</button>
            </div>
          </article>

          <article class="news-item reveal" id="entry-v324">
            <div class="news-item__head">
              <span class="news-item__ver mono">v3.24</span>
              <span class="news-item__cat" data-cat="资源更新">资源更新</span>
              <span class="news-item__when mono">上一个小版本</span>
            </div>
            <h3>资源下载补入接口说明文档</h3>
            <p>安装包、离线手册与接口说明归到同一个版本号下，早期版本仍然翻得到，接手同事不用再到处问文件在哪。</p>
            <div class="news-item__foot">
              <button class="copy-link" type="button" data-copy-current data-copy-label="复制直达链接">复制直达链接</button>
            </div>
          </article>

          <article class="news-item news-item--wide reveal" id="entry-v323">
            <div class="news-item__head">
              <span class="news-item__ver mono">v3.23</span>
              <span class="news-item__cat" data-cat="帮助文档">帮助文档</span>
              <span class="news-item__when mono">上一个小版本</span>
            </div>
            <h3>帮助中心补齐访问类问题的分步排查</h3>
            <p>从页面打不开到登录反复失败，每一种情况都给出自己能做完的动作顺序，并标清楚做到哪一步该停下来找人。配合新版服务范围调整说明一起看，更快判断问题出在本地还是在服务侧。</p>
            <div class="news-item__foot">
              <button class="copy-link" type="button" data-copy-current data-copy-label="复制直达链接">复制直达链接</button>
            </div>
          </article>

          <article class="news-item reveal" id="entry-v322">
            <div class="news-item__head">
              <span class="news-item__ver mono">v3.22</span>
              <span class="news-item__cat" data-cat="体验优化">体验优化</span>
              <span class="news-item__when mono">上一个小版本</span>
            </div>
            <h3>更新记录列表支持按版本区间回看</h3>
            <p>早期条目默认折叠，需要用的时候再展开，长列表滚起来轻松不少。</p>
            <div class="news-item__foot">
              <button class="copy-link" type="button" data-copy-current data-copy-label="复制直达链接">复制直达链接</button>
            </div>
          </article>

          <article class="news-item reveal" id="entry-v321">
            <div class="news-item__head">
              <span class="news-item__ver mono">v3.21</span>
              <span class="news-item__cat" data-cat="目录调整">目录调整</span>
              <span class="news-item__when mono">近期</span>
            </div>
            <h3>三组同义分类完成合并</h3>
            <p>筛选同一个含义不再冒出两三个近义选项，选项变少了，命中的条目反而更准。</p>
            <div class="news-item__foot">
              <button class="copy-link" type="button" data-copy-current data-copy-label="复制直达链接">复制直达链接</button>
            </div>
          </article>

          <article class="news-item news-item--wide reveal" id="entry-v320">
            <div class="news-item__head">
              <span class="news-item__ver mono">v3.20</span>
              <span class="news-item__cat" data-cat="运营观察">运营观察</span>
              <span class="news-item__when mono">近期</span>
            </div>
            <h3>按使用数据重排二级分类</h3>
            <p>内容团队回看了一段时间的检索记录，把打开频次高的二级分类提到前面，冷门分类往下沉但不藏起来，老路径依然走得通。</p>
            <div class="news-item__foot">
              <button class="copy-link" type="button" data-copy-current data-copy-label="复制直达链接">复制直达链接</button>
            </div>
          </article>

        </div>

        <aside class="news-side reveal">
          <figure class="news-side__figure">
            <img src="{zhanqunpic:h:520w:800}" width="800" height="520" alt="以不同色阶色块区分的条目分类示意图形，无文字内容" loading="lazy" decoding="async">
          </figure>
          <div class="panel news-side__legend">
            <p class="mono news-side__legend-title">栏目对应色阶</p>
            <ul>
              <li><span class="news-side__dot" data-dot="目录调整"></span>目录调整</li>
              <li><span class="news-side__dot" data-dot="资源更新"></span>资源更新</li>
              <li><span class="news-side__dot" data-dot="帮助文档"></span>帮助文档</li>
              <li><span class="news-side__dot" data-dot="体验优化"></span>体验优化</li>
              <li><span class="news-side__dot" data-dot="运营观察"></span>运营观察</li>
            </ul>
          </div>
        </aside>
      </div>
    </div>
  </section>

  <section class="section section--tight" id="timeline">
    <div class="container">
      <header class="section-head reveal">
        <p class="eyebrow eyebrow--mute">TIMELINE</p>
        <h2>版本时间线</h2>
        <p>每两周推进一步小版本，每个月做一轮全量目录复核。下面是从当前版本往前的七个节点，节拍疏密一眼看得清。</p>
      </header>

      <div class="timeline reveal">
        <div class="timeline__scroller">
          <ol class="timeline__track">
            <li class="timeline__node">
              <span class="timeline__ver mono">v3.20</span>
              <span class="timeline__dot" aria-hidden="true"></span>
              <span class="timeline__count mono">6</span>
              <span class="timeline__label">条变化</span>
            </li>
            <li class="timeline__node">
              <span class="timeline__ver mono">v3.21</span>
              <span class="timeline__dot" aria-hidden="true"></span>
              <span class="timeline__count mono">9</span>
              <span class="timeline__label">条变化</span>
            </li>
            <li class="timeline__node">
              <span class="timeline__ver mono">v3.22</span>
              <span class="timeline__dot" aria-hidden="true"></span>
              <span class="timeline__count mono">5</span>
              <span class="timeline__label">条变化</span>
            </li>
            <li class="timeline__node timeline__node--dense">
              <span class="timeline__ver mono">v3.23</span>
              <span class="timeline__dot" aria-hidden="true"></span>
              <span class="timeline__count mono">11</span>
              <span class="timeline__label">条变化</span>
            </li>
            <li class="timeline__node">
              <span class="timeline__ver mono">v3.24</span>
              <span class="timeline__dot" aria-hidden="true"></span>
              <span class="timeline__count mono">7</span>
              <span class="timeline__label">条变化</span>
            </li>
            <li class="timeline__node timeline__node--dense">
              <span class="timeline__ver mono">v3.25</span>
              <span class="timeline__dot" aria-hidden="true"></span>
              <span class="timeline__count mono">10</span>
              <span class="timeline__label">条变化</span>
            </li>
            <li class="timeline__node is-latest">
              <span class="timeline__ver mono">v3.26</span>
              <span class="timeline__dot" aria-hidden="true"></span>
              <span class="timeline__count mono">8</span>
              <span class="timeline__label">条变化</span>
            </li>
          </ol>
        </div>

        <figure class="timeline__figure">
          <img src="{zhanqunpic:h:420w:900}" width="900" height="420" alt="霓虹青色柱条按版本顺序排列的抽象柱状图，柱高表示条目数量" loading="lazy" decoding="async">
          <figcaption>柱高对应该版本收录的条目数量，越靠右越新。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="section" id="observations">
    <div class="container">
      <header class="section-head reveal">
        <p class="eyebrow eyebrow--mute">NOTES</p>
        <h2>观察与说明</h2>
        <p>目录怎么分、标签怎么收、记录按什么节奏往外发，这些决定背后的考虑在这里展开讲，也顺带说清楚对使用者的影响。</p>
      </header>

      <div class="obs-grid" data-stagger="60">

        <article class="obs obs--lead reveal">
          <figure class="obs__figure">
            <img src="{zhanqunpic:h:540w:960}" width="960" height="540" alt="由同心节点与连线构成的抽象专题封面图形，深蓝底色配青色描边" loading="lazy" decoding="async">
          </figure>
          <div class="obs__body">
            <p class="obs__meta mono">运营观察 · v3.21</p>
            <h3>内容目录分类标签排查为什么先看版本，再看栏目</h3>
            <p>同一个栏目在不同版本里可能换过叫法，一上来就按栏目名去翻旧条目，很容易翻到空处。先把版本锁定，再选栏目，两次操作就能落到目标条目上。这个顺序调整之后，用户自己找到答案的比例比之前高出一截，需要转到人工的访问类问题也随之减少。</p>
          </div>
        </article>

        <article class="obs reveal">
          <p class="obs__meta mono">目录调整 · v3.20</p>
          <h3>同义分类合并之后，筛选列表短了多少</h3>
          <p>原来“下载”“安装包”“资源包”其实指向同一批内容，用户往往要挨个试一遍。合并成一个分类之后，从打开筛选到拿到文件少了两步，第一次使用的人尤其省事。</p>
        </article>

        <article class="obs reveal">
          <p class="obs__meta mono">更新节奏 · v3.22</p>
          <h3>为什么坚持按版本发记录，而不是按日期堆叠</h3>
          <p>日期只说明什么时候改的，版本能说明改在哪一轮、跟前一轮后一轮是什么关系。要回头核对手上这份资料对不对时，版本号比一串日期好找得多。</p>
        </article>

      </div>
    </div>
  </section>

  <section class="section" id="follow">
    <div class="container">
      <header class="section-head reveal">
        <p class="eyebrow eyebrow--mute">FOLLOW</p>
        <h2>怎么回看与跟进</h2>
        <p>不管你是在核对某个版本，还是只想盯住接下来会改什么，下面三种方式都能用得上。</p>
      </header>

      <div class="follow-grid" data-stagger="60">

        <article class="follow-card reveal">
          <p class="follow-card__num mono">01</p>
          <h3>从最新版本往前翻</h3>
          <p>列表默认从最近一轮排起，每过两周会多出一条新版本，条目按栏目分好，不用在整页里找。</p>
          <a class="follow-card__link" href="/features/">看资源下载与更新记录</a>
        </article>

        <article class="follow-card reveal">
          <p class="follow-card__num mono">02</p>
          <h3>用栏目把范围收窄</h3>
          <p>顶部的栏目条点一下就能筛，同一个分类在每一条里的颜色固定，翻到哪条都能对得上。</p>
          <a class="follow-card__link" href="/help-center/">打不开或登录失败怎么自查</a>
        </article>

        <article class="follow-card reveal">
          <p class="follow-card__num mono">03</p>
          <h3>说清楚卡在哪一版</h3>
          <p>把版本号和出问题的那一步一起说明白，附上截图里的版本信息，沟通起来会快很多。</p>
          <a class="follow-card__link" href="/consult/">联系我们说明情况</a>
        </article>

      </div>
    </div>
  </section>

</main>

.page-news {
  --news-cat-dir: var(--neon);
  --news-cat-res: var(--mist);
  --news-cat-doc: var(--cold);
  --news-cat-ux: #a7b6d9;
  --news-cat-obs: var(--violet);
  --news-head-top: 64px;

  background: var(--void);
  color: var(--near-white);
  font-family: var(--font-body);
  font-size: var(--fs-5);
  line-height: 1.75;
  letter-spacing: 0.01em;
}

.page-news h1,
.page-news h2,
.page-news h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--near-white);
}

.page-news .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.page-news :focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.page-news .news-hero {
  position: relative;
  padding: 116px 0 56px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(110% 70% at 88% 0%, rgba(79, 227, 208, 0.12), transparent 62%),
    radial-gradient(80% 60% at 6% 12%, rgba(110, 106, 138, 0.16), transparent 68%),
    linear-gradient(180deg, var(--night) 0%, var(--void) 82%);
}

.page-news .news-hero__grid {
  display: grid;
  gap: 28px;
}

.page-news .news-hero__copy {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.page-news .news-hero__copy h1 {
  font-size: var(--fs-1);
  max-width: 15em;
}

.page-news .news-hero__copy .lede {
  max-width: 42em;
  color: var(--cold);
  font-size: var(--fs-5);
}

.page-news .news-hero__panel {
  align-self: start;
  display: grid;
  gap: 8px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: rgba(12, 23, 48, 0.72);
  box-shadow: var(--shadow-soft);
  min-width: 0;
}

.page-news .news-hero__panel-label {
  font-size: var(--fs-7);
  color: var(--violet);
  text-transform: uppercase;
}

.page-news .news-hero__panel-ver {
  font-size: var(--fs-2);
  font-weight: 500;
  color: var(--neon);
  line-height: 1.1;
  text-shadow: 0 0 22px rgba(79, 227, 208, 0.35);
}

.page-news .news-hero__panel-note {
  font-size: var(--fs-6);
  color: var(--cold);
}

.page-news .news-hero__panel-list {
  display: grid;
  gap: 6px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-6);
  color: var(--cold);
}

.page-news .news-hero__panel-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.page-news .news-hero__panel-list .mono {
  color: var(--near-white);
}

.page-news .news-hero__figure {
  margin: 36px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--night);
  box-shadow: var(--shadow-lift);
}

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

/* ---------- 栏目主题带 ---------- */

.page-news .topic-band {
  position: sticky;
  top: var(--news-head-top);
  z-index: 5;
  border-bottom: 1px solid var(--line);
  background: rgba(6, 11, 24, 0.94);
  backdrop-filter: blur(12px);
}

.page-news .topic-band__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 13px;
  padding-bottom: 13px;
  min-width: 0;
}

.page-news .topic-band__label {
  flex: none;
  font-size: var(--fs-7);
  color: var(--violet);
  text-transform: uppercase;
}

.page-news .topic-band__scroller {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 4px;
}

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

.page-news .chip {
  flex: none;
  padding: 7px 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-7);
  letter-spacing: 0.04em;
  color: var(--cold);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-chip);
  white-space: nowrap;
  cursor: pointer;
  transition: color 180ms var(--ease-path), background 180ms var(--ease-path),
    border-color 180ms var(--ease-path);
}

.page-news .chip:hover {
  color: var(--near-white);
  border-color: rgba(154, 167, 189, 0.4);
}

.page-news .chip[aria-pressed="true"] {
  color: var(--void);
  background: var(--neon);
  border-color: var(--neon);
  box-shadow: var(--glow-neon);
}

/* ---------- 区块通用 ---------- */

.page-news .section {
  padding: 64px 0;
}

.page-news .section--tight {
  padding: 56px 0;
  border-top: 1px solid var(--line);
}

.page-news .section-head {
  display: grid;
  gap: 10px;
  max-width: 46em;
  margin-bottom: 32px;
}

.page-news .section-head h2 {
  font-size: var(--fs-2);
}

.page-news .section-head p {
  color: var(--cold);
}

/* ---------- 最近更新 ---------- */

.page-news .news-layout {
  display: grid;
  gap: 28px;
}

.page-news .news-list {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.page-news .news-item {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--night);
  box-shadow: var(--shadow-soft);
  min-width: 0;
  transition: border-color 220ms var(--ease-path), transform 220ms var(--ease-path),
    box-shadow 220ms var(--ease-path);
}

.page-news .news-item:hover {
  border-color: rgba(79, 227, 208, 0.38);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}

.page-news .news-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.page-news .news-item__ver {
  font-size: var(--fs-6);
  color: var(--neon);
}

.page-news .news-item__cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-7);
  letter-spacing: 0.04em;
  color: var(--cold);
  border: 1px solid var(--line);
  border-radius: var(--radius-chip);
  background: rgba(23, 35, 61, 0.6);
}

.page-news .news-item__cat::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--news-cat-doc);
}

.page-news .news-item__cat[data-cat="目录调整"]::before {
  background: var(--news-cat-dir);
}

.page-news .news-item__cat[data-cat="资源更新"]::before {
  background: var(--news-cat-res);
}

.page-news .news-item__cat[data-cat="帮助文档"]::before {
  background: var(--news-cat-doc);
}

.page-news .news-item__cat[data-cat="体验优化"]::before {
  background: var(--news-cat-ux);
}

.page-news .news-item__cat[data-cat="运营观察"]::before {
  background: var(--news-cat-obs);
}

.page-news .news-item__when {
  margin-left: auto;
  font-size: var(--fs-7);
  color: var(--violet);
}

.page-news .news-item h3 {
  font-size: var(--fs-4);
  font-weight: 800;
}

.page-news .news-item p {
  color: var(--cold);
  font-size: var(--fs-6);
  line-height: 1.8;
}

.page-news .news-item__foot {
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
  margin-top: 2px;
  border-top: 1px solid var(--line-soft);
}

.page-news .copy-link {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: var(--fs-7);
  letter-spacing: 0.04em;
  color: var(--violet);
  cursor: pointer;
  transition: color 180ms var(--ease-path);
}

.page-news .copy-link:hover,
.page-news .copy-link[data-copied="true"] {
  color: var(--neon);
}

/* ---------- 侧栏 ---------- */

.page-news .news-side {
  display: grid;
  gap: 18px;
  align-content: start;
  min-width: 0;
}

.page-news .news-side__figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--night);
}

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

.page-news .news-side__legend {
  display: grid;
  gap: 14px;
  padding: 20px;
}

.page-news .news-side__legend-title {
  font-size: var(--fs-7);
  color: var(--violet);
  text-transform: uppercase;
}

.page-news .news-side__legend ul {
  display: grid;
  gap: 9px;
}

.page-news .news-side__legend li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-6);
  color: var(--cold);
}

.page-news .news-side__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--news-cat-doc);
}

.page-news .news-side__dot[data-dot="目录调整"] {
  background: var(--news-cat-dir);
}

.page-news .news-side__dot[data-dot="资源更新"] {
  background: var(--news-cat-res);
}

.page-news .news-side__dot[data-dot="帮助文档"] {
  background: var(--news-cat-doc);
}

.page-news .news-side__dot[data-dot="体验优化"] {
  background: var(--news-cat-ux);
}

.page-news .news-side__dot[data-dot="运营观察"] {
  background: var(--news-cat-obs);
}

/* ---------- 版本时间线 ---------- */

.page-news .timeline {
  display: grid;
  gap: 28px;
}

.page-news .timeline__scroller {
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}

.page-news .timeline__track {
  position: relative;
  display: flex;
  min-width: max-content;
  padding: 6px 4px 4px;
  list-style: none;
}

.page-news .timeline__track::before {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  top: 41px;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(154, 167, 189, 0.08) 0%,
    rgba(79, 227, 208, 0.42) 20%,
    rgba(79, 227, 208, 0.42) 86%,
    rgba(79, 227, 208, 0.7) 100%
  );
}

.page-news .timeline__node {
  flex: 0 0 auto;
  width: 132px;
  display: grid;
  grid-template-rows: 24px 22px auto auto;
  align-items: start;
  padding-right: 18px;
  min-width: 0;
}

.page-news .timeline__ver {
  font-size: var(--fs-7);
  color: var(--cold);
  align-self: start;
}

.page-news .timeline__dot {
  align-self: center;
  justify-self: start;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--structure);
  border: 1px solid rgba(154, 167, 189, 0.35);
}

.page-news .timeline__node--dense .timeline__dot {
  background: rgba(79, 227, 208, 0.45);
  border-color: rgba(79, 227, 208, 0.6);
}

.page-news .timeline__node.is-latest .timeline__ver {
  color: var(--neon);
}

.page-news .timeline__node.is-latest .timeline__dot {
  background: var(--neon);
  border-color: var(--neon);
  box-shadow: var(--glow-neon);
}

.page-news .timeline__count {
  margin-top: 10px;
  font-size: var(--fs-3);
  color: var(--near-white);
  line-height: 1.1;
}

.page-news .timeline__label {
  font-size: var(--fs-7);
  color: var(--violet);
}

.page-news .timeline__figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--night);
  box-shadow: var(--shadow-soft);
}

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

.page-news .timeline__figure figcaption {
  padding: 12px 18px 14px;
  font-size: var(--fs-7);
  color: var(--violet);
  border-top: 1px solid var(--line-soft);
}

/* ---------- 观察与说明 ---------- */

.page-news .obs-grid {
  display: grid;
  gap: 18px;
}

.page-news .obs {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, rgba(12, 23, 48, 0.9), rgba(12, 23, 48, 0.6));
  box-shadow: var(--shadow-soft);
  min-width: 0;
}

.page-news .obs__meta {
  font-size: var(--fs-7);
  color: var(--violet);
}

.page-news .obs h3 {
  font-size: var(--fs-4);
}

.page-news .obs p {
  color: var(--cold);
  font-size: var(--fs-6);
  line-height: 1.8;
}

.page-news .obs__figure {
  margin: 0;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  overflow: hidden;
  background: var(--void);
}

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

.page-news .obs--lead {
  border-color: rgba(79, 227, 208, 0.28);
  box-shadow: var(--shadow-lift);
}

.page-news .obs__body {
  display: grid;
  gap: 12px;
  align-content: start;
}

/* ---------- 回看与跟进 ---------- */

.page-news .follow-grid {
  display: grid;
  gap: 18px;
}

.page-news .follow-card {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--night);
  box-shadow: var(--shadow-soft);
  min-width: 0;
  position: relative;
  overflow: hidden;
}

.page-news .follow-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--neon), transparent 72%);
  opacity: 0.55;
}

.page-news .follow-card__num {
  font-size: var(--fs-7);
  color: var(--neon);
}

.page-news .follow-card h3 {
  font-size: var(--fs-4);
}

.page-news .follow-card p {
  color: var(--cold);
  font-size: var(--fs-6);
  line-height: 1.8;
}

.page-news .follow-card__link {
  justify-self: start;
  margin-top: 4px;
  font-size: var(--fs-6);
  color: var(--mist);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 243, 235, 0.35);
  padding-bottom: 2px;
  transition: color 180ms var(--ease-path), border-color 180ms var(--ease-path);
}

.page-news .follow-card__link:hover {
  color: var(--neon);
  border-color: var(--neon);
}

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

@media (min-width: 720px) {
  .page-news .news-hero {
    padding: 140px 0 64px;
  }

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

  .page-news .news-item--wide {
    grid-column: span 2;
  }

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

@media (min-width: 960px) {
  .page-news .news-hero__grid {
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: start;
    gap: 40px;
  }

  .page-news .section {
    padding: 84px 0;
  }

  .page-news .section--tight {
    padding: 72px 0;
  }

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

  .page-news .obs--lead {
    grid-column: span 2;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: 28px;
  }

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

@media (min-width: 1080px) {
  .page-news .news-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 32px;
  }

  .page-news .news-side {
    position: sticky;
    top: calc(var(--news-head-top) + 78px);
  }

  .page-news .timeline__node {
    width: 148px;
  }
}

@media (max-width: 719px) {
  .page-news .news-hero__panel-ver {
    font-size: var(--fs-3);
  }

  .page-news .timeline__track::before {
    top: 41px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .news-item,
  .page-news .chip,
  .page-news .copy-link,
  .page-news .follow-card__link {
    transition: none;
  }

  .page-news .news-item:hover {
    transform: none;
  }
}