.page-news {
  background: var(--ink-950);
  color: var(--text-100);
  --news-node: var(--grid-line);
}

/* ---------- 首屏 ---------- */
.page-news .news-hero {
  position: relative;
  padding: 28px 0 36px;
  border-bottom: 1px solid var(--grid-line);
  background-image:
    repeating-linear-gradient(0deg, rgba(36, 53, 111, 0.34) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(36, 53, 111, 0.34) 0 1px, transparent 1px 48px),
    radial-gradient(120% 90% at 12% 0%, rgba(47, 227, 232, 0.12), transparent 62%);
}

.page-news .news-hero .breadcrumb {
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--text-400);
}

.page-news .news-hero .breadcrumb a {
  color: var(--text-400);
  text-decoration: none;
}

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

.page-news .news-hero .eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--cyan-400);
}

.page-news .news-hero h1 {
  margin: 10px 0 14px;
  font-size: 30px;
  line-height: 1.24;
  font-weight: 700;
  letter-spacing: -0.01em;
  max-width: 22em;
}

.page-news .news-hero .lead {
  margin: 0;
  max-width: 64ch;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-400);
}

.page-news .news-quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.page-news .news-quick-note {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--cyan-200);
  padding-left: 12px;
  border-left: 1px solid var(--cyan-400);
}

/* ---------- 主体布局 ---------- */
.page-news .news-body {
  padding: 30px 0 56px;
}

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

.page-news .news-rail {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.page-news .rail-block,
.page-news .rail-index {
  border: 1px solid var(--grid-line);
  background: var(--ink-900);
  padding: 12px 12px 14px;
}

.page-news .rail-title {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-400);
  text-transform: uppercase;
}

.page-news .news-flow {
  min-width: 0;
}

/* ---------- 筛选按钮 ---------- */
.page-news .filter-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

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

.page-news .filter-btn {
  flex: 0 0 auto;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  padding: 9px 13px;
  color: var(--text-400);
  background: var(--ink-800);
  border: 1px solid var(--grid-line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}

.page-news .filter-btn:hover {
  color: var(--text-100);
  border-color: var(--cyan-400);
}

.page-news .filter-btn[aria-pressed="true"] {
  color: var(--ink-950);
  background: var(--cyan-400);
  border-color: var(--cyan-400);
  font-weight: 600;
}

/* ---------- 页内索引 ---------- */
.page-news .rail-index ol {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.page-news .rail-index ol::-webkit-scrollbar {
  display: none;
}

.page-news .rail-index a {
  display: block;
  white-space: nowrap;
  padding: 8px 11px;
  font-size: 12px;
  color: var(--text-400);
  text-decoration: none;
  background: var(--ink-800);
  border: 1px solid var(--grid-line);
  border-radius: var(--radius);
  transition: color var(--t-fast), border-color var(--t-fast);
}

.page-news .rail-index a[aria-current="true"] {
  color: var(--cyan-200);
  border-color: var(--cyan-400);
}

/* ---------- 区块通用 ---------- */
.page-news .news-sec {
  scroll-margin-top: 96px;
}

.page-news .news-sec + .news-sec {
  margin-top: 50px;
  padding-top: 40px;
  border-top: 1px solid var(--grid-line);
}

.page-news .sec-head {
  margin-bottom: 4px;
}

.page-news .sec-num {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--cyan-400);
  border: 1px solid var(--grid-line);
  padding: 3px 8px;
}

.page-news .news-sec h2 {
  margin: 12px 0 8px;
  font-size: 23px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.page-news .news-sec .muted {
  margin: 0;
  max-width: 64ch;
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-400);
}

/* ---------- 图片容器 ---------- */
.page-news .media {
  position: relative;
  overflow: hidden;
  margin: 20px 0 0;
  border: 1px solid var(--grid-line);
  background: var(--ink-800);
}

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

.page-news .media--wide img {
  aspect-ratio: 21 / 9;
}

.page-news .media--square img {
  aspect-ratio: 1 / 1;
}

.page-news .media-caption {
  display: block;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-400);
  border-top: 1px solid var(--grid-line);
  background: var(--ink-900);
}

/* ---------- 本月摘要 ---------- */
.page-news .digest {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 22px;
}

.page-news .digest-card {
  padding: 16px;
  background: var(--ink-900);
  border: 1px solid var(--grid-line);
  border-top: 2px solid var(--cyan-400);
}

.page-news .digest-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.page-news .digest-code {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-400);
}

.page-news .digest-card h3 {
  margin: 12px 0 6px;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 700;
}

.page-news .digest-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-400);
}

/* ---------- 记录时间线 ---------- */
.page-news .stream-legend {
  margin-top: 20px;
}

.page-news .news-timeline {
  list-style: none;
  position: relative;
  margin: 26px 0 0;
  padding: 0 0 0 24px;
}

.page-news .news-timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--cyan-400), var(--grid-line) 24%, var(--grid-line));
}

.page-news .news-item {
  position: relative;
  padding-bottom: 20px;
}

.page-news .news-item:last-child {
  padding-bottom: 0;
}

.page-news .news-item::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 16px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ink-950);
  border: 1px solid var(--news-node);
  transition: background var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.page-news .news-item[data-category="入口优化"] { --news-node: var(--cyan-400); }
.page-news .news-item[data-category="反馈处理"] { --news-node: var(--signal-500); }
.page-news .news-item[data-category="跨端适配"] { --news-node: var(--cyan-200); }
.page-news .news-item[data-category="内容归档"] { --news-node: var(--text-400); }

.page-news .news-item.is-current::before {
  background: var(--news-node);
  box-shadow: 0 0 0 4px rgba(47, 227, 232, 0.14);
}

.page-news .news-item[hidden] {
  display: none;
}

.page-news .news-card {
  padding: 15px 17px;
  background: var(--ink-900);
  border: 1px solid var(--grid-line);
  border-left: 2px solid var(--news-node);
  transition: background var(--t-fast), border-color var(--t-fast);
}

.page-news .news-card:hover {
  background: var(--ink-800);
}

.page-news .news-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.page-news .news-cat {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  padding: 5px 9px;
  letter-spacing: 0.04em;
  color: var(--news-node);
  border: 1px solid var(--news-node);
  background: rgba(255, 255, 255, 0.03);
}

.page-news .news-ver {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-400);
}

.page-news .news-card h3 {
  margin: 0 0 6px;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 700;
}

.page-news .news-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-400);
}

.page-news .news-card .news-meta {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--cyan-200);
  opacity: 0.72;
}

/* ---------- 版本节奏 ---------- */
.page-news .version-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  margin-top: 22px;
}

.page-news .version-figure {
  margin-top: 0;
}

.page-news .version-track {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-news .version-track li {
  position: relative;
  padding: 0 0 18px 20px;
  border-left: 1px solid var(--grid-line);
}

.page-news .version-track li:last-child {
  padding-bottom: 0;
}

.page-news .version-track li::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 6px;
  width: 7px;
  height: 7px;
  background: var(--ink-950);
  border: 1px solid var(--cyan-400);
}

.page-news .vt-key {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-400);
}

.page-news .version-track strong {
  display: block;
  margin: 4px 0 3px;
  font-size: 16px;
  font-weight: 700;
  color: var(--cyan-200);
}

.page-news .version-track p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-400);
}

/* ---------- 季度档案 ---------- */
.page-news .archive-cover {
  max-width: 300px;
}

.page-news .archive-list {
  margin-top: 22px;
  border-top: 1px solid var(--grid-line);
}

.page-news .archive-item {
  border-bottom: 1px solid var(--grid-line);
}

.page-news .archive-item summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 14px 2px;
  cursor: pointer;
  list-style: none;
  transition: background var(--t-fast);
}

.page-news .archive-item summary::-webkit-details-marker {
  display: none;
}

.page-news .archive-item summary::marker {
  content: "";
}

.page-news .archive-item summary:hover {
  background: rgba(47, 227, 232, 0.05);
}

.page-news .archive-id {
  flex: 0 0 auto;
  width: 58px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--cyan-400);
}

.page-news .archive-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-100);
}

.page-news .archive-when {
  flex: 0 0 100%;
  padding-left: 70px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-400);
}

.page-news .archive-item[open] .archive-name {
  color: var(--cyan-200);
}

.page-news .archive-panel {
  padding: 0 2px 16px 70px;
}

.page-news .archive-panel p {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-400);
}

/* ---------- 记录生成流程 ---------- */
.page-news .flow {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 24px 0 0;
  padding: 0;
}

.page-news .flow-step {
  position: relative;
  padding: 18px 16px 16px;
  background: var(--ink-900);
  border: 1px solid var(--grid-line);
}

.page-news .flow-step::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 2px;
  background: var(--cyan-400);
}

.page-news .flow-num {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--cyan-400);
}

.page-news .flow-step h3 {
  margin: 10px 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.page-news .flow-step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-400);
}

/* ---------- 快速定位 ---------- */
.page-news .find-list {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 24px 0 0;
  padding: 0;
}

.page-news .find-item {
  padding: 16px;
  border-left: 2px solid var(--cyan-400);
  border-top: 1px solid var(--grid-line);
  border-right: 1px solid var(--grid-line);
  border-bottom: 1px solid var(--grid-line);
  background: linear-gradient(180deg, rgba(47, 227, 232, 0.07), transparent 72%);
}

.page-news .find-key {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--cyan-400);
}

.page-news .find-item h3 {
  margin: 10px 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.page-news .find-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-400);
}

/* ---------- 相关入口 ---------- */
.page-news .entry-links {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
}

.page-news .entry-link {
  display: block;
  padding: 15px 16px;
  background: var(--ink-900);
  border: 1px solid var(--grid-line);
  text-decoration: none;
  color: var(--text-100);
  transition: border-color var(--t-fast), background var(--t-fast);
}

.page-news .entry-link:hover {
  border-color: var(--cyan-400);
  background: var(--ink-800);
}

.page-news .entry-name {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.page-news .entry-note {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-400);
}

/* ---------- 断点 ---------- */
@media (min-width: 600px) {
  .page-news .news-hero h1 {
    font-size: 38px;
  }

  .page-news .news-hero .lead {
    font-size: 16px;
  }

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

  .page-news .archive-item summary {
    flex-wrap: nowrap;
    align-items: center;
  }

  .page-news .archive-when {
    flex: 0 0 auto;
    padding-left: 0;
    text-align: right;
  }

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

@media (min-width: 768px) {
  .page-news .news-hero {
    padding: 40px 0 48px;
  }

  .page-news .news-hero h1 {
    font-size: 44px;
  }

  .page-news .news-sec h2 {
    font-size: 30px;
  }

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

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

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

@media (min-width: 1024px) {
  .page-news .news-hero h1 {
    font-size: 52px;
  }

  .page-news .news-layout {
    grid-template-columns: 264px minmax(0, 1fr);
    gap: 52px;
    align-items: start;
  }

  .page-news .news-rail {
    position: sticky;
    top: 104px;
    align-self: start;
  }

  .page-news .filter-bar {
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: 0;
  }

  .page-news .rail-index ol {
    flex-direction: column;
    gap: 0;
    overflow: visible;
    padding: 0;
  }

  .page-news .rail-index a {
    white-space: normal;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    border-left: 2px solid var(--grid-line);
    border-radius: 0;
  }

  .page-news .rail-index a:hover {
    color: var(--text-100);
    border-left-color: var(--cyan-200);
  }

  .page-news .rail-index a[aria-current="true"] {
    color: var(--cyan-200);
    background: rgba(47, 227, 232, 0.06);
    border-left-color: var(--cyan-400);
  }

  .page-news .version-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 34px;
    align-items: start;
  }

  .page-news .version-figure {
    position: sticky;
    top: 104px;
  }
}

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

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

@media (prefers-reduced-motion: reduce) {
  .page-news .news-item::before,
  .page-news .news-card,
  .page-news .filter-btn,
  .page-news .entry-link {
    transition: none;
  }
}
</style>
<<<END>>>

等等，我在 PAGE_CSS 末尾误加了 `</style>` 和 `<<<END>>>`。必须删掉。只输出 CSS。

让我修正最终输出。
<main id="main-content" class="page-news">

  <header class="news-hero">
    <div class="shell">
      <nav class="breadcrumb" aria-label="当前位置">
        <a href="/">首页</a>
        <span class="breadcrumb-sep">/</span>
        <span aria-current="page">更新记录</span>
      </nav>
      <p class="eyebrow mono">索引 04 · 版本归档</p>
      <h1>改了什么、哪一版上的，顺着时间线一次翻到</h1>
      <p class="lead">365平台登录 保持每月第一周发布一次常规更新的节奏，累计已发布 52 个版本。入口调整、反馈修复、跨端适配与内容归档，都带编号写进下面的记录流，按月份、标签或编号都能定位到那一版。</p>
      <div class="news-quick">
        <a class="btn btn-primary" href="/">进入登录入口</a>
        <a class="btn btn-signal" href="/">提交反馈</a>
        <span class="news-quick-note mono">当前版本 v52 · 本月更新已上线</span>
      </div>
    </div>
  </header>

  <div class="shell news-body">
    <div class="news-layout">

      <aside class="news-rail" aria-label="记录筛选与页内索引">
        <div class="rail-block">
          <p class="rail-title mono">按标签筛选记录</p>
          <div class="filter-bar" data-filter-bar="记录分类" role="group" aria-label="按标签筛选记录">
            <button class="filter-btn" type="button" data-filter="all" aria-pressed="true">全部</button>
            <button class="filter-btn" type="button" data-filter="入口优化" aria-pressed="false">入口优化</button>
            <button class="filter-btn" type="button" data-filter="反馈处理" aria-pressed="false">反馈处理</button>
            <button class="filter-btn" type="button" data-filter="跨端适配" aria-pressed="false">跨端适配</button>
            <button class="filter-btn" type="button" data-filter="内容归档" aria-pressed="false">内容归档</button>
          </div>
        </div>

        <nav class="rail-index" data-toc aria-label="页内索引">
          <p class="rail-title mono">页内索引</p>
          <ol>
            <li><a href="#monthly">01 本月更新摘要</a></li>
            <li><a href="#stream">02 记录流</a></li>
            <li><a href="#versions">03 版本节奏</a></li>
            <li><a href="#archive">04 季度档案</a></li>
            <li><a href="#how">05 一条记录的产生</a></li>
            <li><a href="#find">06 快速定位</a></li>
            <li><a href="#links">07 相关入口</a></li>
          </ol>
        </nav>
      </aside>

      <div class="news-flow">

        <section class="news-sec" id="monthly">
          <div class="sec-head">
            <span class="mono sec-num">01</span>
            <h2>本月更新已经上线</h2>
            <p class="muted">三条内容随本月第一周的常规版本一并发布，编号连在一起，方便客服和回访用户对着看。</p>
          </div>

          <figure class="media media--wide news-cover">
            <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="深色档案封面与本月编号排版的局部特写">
            <figcaption class="media-caption">本月档案封面 · 编号 0521 – 0523</figcaption>
          </figure>

          <div class="digest">
            <article class="digest-card">
              <div class="digest-top">
                <span class="tag">入口优化</span>
                <span class="mono digest-code">0521</span>
              </div>
              <h3>窄屏登录路径压到两步</h3>
              <p>320px 宽度下，首页到登录面板由三步减为两步；问题反馈入口留在第一屏，单手握着手机也能点到。</p>
            </article>
            <article class="digest-card">
              <div class="digest-top">
                <span class="tag">跨端适配</span>
                <span class="mono digest-code">0522</span>
              </div>
              <h3>苹果端完成一轮回归</h3>
              <p>iOS 浏览器与 iOS PWA 各跑一遍主流程，320／375／768／1280／1920 五档宽度全部通过。</p>
            </article>
            <article class="digest-card">
              <div class="digest-top">
                <span class="tag">内容归档</span>
                <span class="mono digest-code">0523</span>
              </div>
              <h3>知识中心补入四条自助条目</h3>
              <p>按上月高频反馈整理，覆盖账号与适配两类，能在知识中心自己查到的，就不必再走一遍工单。</p>
            </article>
          </div>
        </section>

        <section class="news-sec" id="stream">
          <div class="sec-head">
            <span class="mono sec-num">02</span>
            <h2>选一个标签，剩下的按时间从近到远排</h2>
            <p class="muted">每次改动只归一个类别：是入口调整，就走入口优化；是排查修复，就走反馈处理。同一条不会在这里出现两遍。</p>
          </div>

          <figure class="media media--wide stream-legend">
            <img src="{zhanqunpic:h:600w:1000}" width="1000" height="600" alt="四类更新标签的方块矩阵与图例排版" loading="lazy" decoding="async">
            <figcaption class="media-caption">四类标签的颜色与明度对应关系</figcaption>
          </figure>

          <ol class="news-timeline">
            <li class="news-item reveal" data-filter-item data-filter-scope="记录分类" data-category="入口优化">
              <article class="news-card">
                <div class="news-card-top">
                  <span class="news-cat">入口优化</span>
                  <span class="mono news-ver">v52</span>
                </div>
                <h3>窄屏登录路径压到两步</h3>
                <p>把首页的中转层去掉，320px 宽度下直接落到登录面板；反馈按钮固定在第一屏右下角，不再随滚动消失。</p>
                <p class="news-meta mono">本月第一周 · 编号 0521</p>
              </article>
            </li>

            <li class="news-item reveal" data-filter-item data-filter-scope="记录分类" data-category="跨端适配">
              <article class="news-card">
                <div class="news-card-top">
                  <span class="news-cat">跨端适配</span>
                  <span class="mono news-ver">v52</span>
                </div>
                <h3>苹果端浏览器与 PWA 跑完一轮回归</h3>
                <p>iOS Safari 与 iOS PWA 各走一遍登录、反馈、查看记录三条主流程，五档宽度下没有出现横向溢出。</p>
                <p class="news-meta mono">本月第一周 · 编号 0522</p>
              </article>
            </li>

            <li class="news-item reveal" data-filter-item data-filter-scope="记录分类" data-category="内容归档">
              <article class="news-card">
                <div class="news-card-top">
                  <span class="news-cat">内容归档</span>
                  <span class="mono news-ver">v52</span>
                </div>
                <h3>知识中心补入四条自助排查条目</h3>
                <p>按上月高频反馈整理，账号类两条、适配类两条，写清第一步先看哪里、第二步换什么环境再试。</p>
                <p class="news-meta mono">本月第二周 · 编号 0523</p>
              </article>
            </li>

            <li class="news-item reveal" data-filter-item data-filter-scope="记录分类" data-category="反馈处理">
              <article class="news-card">
                <div class="news-card-top">
                  <span class="news-cat">反馈处理</span>
                  <span class="mono news-ver">v51</span>
                </div>
                <h3>桌面端反馈面板不再遮挡状态灯</h3>
                <p>宽屏下反馈面板改为右侧贴边展开，站点状态与版本号始终露在外面，提交反馈时也能瞄一眼当前状态。</p>
                <p class="news-meta mono">本月第二周 · 编号 0518</p>
              </article>
            </li>

            <li class="news-item reveal" data-filter-item data-filter-scope="记录分类" data-category="入口优化">
              <article class="news-card">
                <div class="news-card-top">
                  <span class="news-cat">入口优化</span>
                  <span class="mono news-ver">v50</span>
                </div>
                <h3>顶部命令栏三条快捷动作并成一行</h3>
                <p>进入登录、提交反馈、查看记录压成同一条紧凑命令栏，桌面端不用滚动就能看到入口与当前状态。</p>
                <p class="news-meta mono">上月第一周 · 编号 0512</p>
              </article>
            </li>

            <li class="news-item reveal" data-filter-item data-filter-scope="记录分类" data-category="跨端适配">
              <article class="news-card">
                <div class="news-card-top">
                  <span class="news-cat">跨端适配</span>
                  <span class="mono news-ver">v49</span>
                </div>
                <h3>768px 宽度下索引条折叠为横向标签</h3>
                <p>平板竖屏原本会把侧栏挤成一条窄缝，现在索引整体折到顶部，横向滑动即可切换。</p>
                <p class="news-meta mono">上月 · 编号 0507</p>
              </article>
            </li>

            <li class="news-item reveal" data-filter-item data-filter-scope="记录分类" data-category="反馈处理">
              <article class="news-card">
                <div class="news-card-top">
                  <span class="news-cat">反馈处理</span>
                  <span class="mono news-ver">v47</span>
                </div>
                <h3>工单编号可以直接在知识中心检索</h3>
                <p>提交反馈后拿到的编号，粘进知识中心的检索框就能翻到处理进度与对应记录，不用再回头翻邮件。</p>
                <p class="news-meta mono">上一季度 · 编号 0491</p>
              </article>
            </li>

            <li class="news-item reveal" data-filter-item data-filter-scope="记录分类" data-category="内容归档">
              <article class="news-card">
                <div class="news-card-top">
                  <span class="news-cat">内容归档</span>
                  <span class="mono news-ver">v45</span>
                </div>
                <h3>36 个季度档案完成主题归类</h3>
                <p>每一册档案补上统一主题名，入口调整、适配修复、内容条目各自成段，按编号就能抽出一册来看。</p>
                <p class="news-meta mono">上一季度 · 编号 0476</p>
              </article>
            </li>
          </ol>
        </section>

        <section class="news-sec" id="versions">
          <div class="sec-head">
            <span class="mono sec-num">03</span>
            <h2>每月第一周，一次常规版本</h2>
            <p class="muted">从 2016 年 3 月的首个公开版本算起，52 个版本里有 9 个是跨端适配大版本，其余按月度节奏小步推进。</p>
          </div>

          <div class="version-grid">
            <figure class="media media--wide version-figure">
              <img src="{zhanqunpic:h:700w:1400}" width="1400" height="700" alt="横向时间轴与版本节点分布示意图" loading="lazy" decoding="async">
              <figcaption class="media-caption">2016 年至今的版本节点分布</figcaption>
            </figure>

            <ol class="version-track">
              <li>
                <span class="mono vt-key">本月第一周</span>
                <strong>第 52 版</strong>
                <p>入口压缩与苹果端回归同批上线，内容侧补入四条自助条目。</p>
              </li>
              <li>
                <span class="mono vt-key">上月第一周</span>
                <strong>第 51 版</strong>
                <p>桌面端命令栏并成一行，反馈面板改为右侧贴边展开。</p>
              </li>
              <li>
                <span class="mono vt-key">上一季度</span>
                <strong>第 47 – 50 版</strong>
                <p>集中处理平板宽度下的索引折叠，并为工单编号打通检索入口。</p>
              </li>
              <li>
                <span class="mono vt-key">今年上半年</span>
                <strong>第 40 – 46 版</strong>
                <p>跨端适配大版本落在这一区间，六类主流访问环境逐一比对。</p>
              </li>
              <li>
                <span class="mono vt-key">过往年度</span>
                <strong>第 1 – 39 版</strong>
                <p>完成从单一桌面入口到多端统一的过渡，视觉与组件规范自 2021 年起固定下来。</p>
              </li>
            </ol>
          </div>
        </section>

        <section class="news-sec" id="archive">
          <div class="sec-head">
            <span class="mono sec-num">04</span>
            <h2>季度档案，按编号回查</h2>
            <p class="muted">每季度把当季的入口调整、适配修复与内容条目整理成一册，目前已归档 36 个季度档案，编号越大越新。</p>
          </div>

          <figure class="media media--square archive-cover">
            <img src="{zhanqunpic:h:900w:900}" width="900" height="900" alt="低对比灰度信号波纹与蓝图网格叠加的档案底纹" loading="lazy" decoding="async">
            <figcaption class="media-caption">档案底纹 · 波纹与网格叠加</figcaption>
          </figure>

          <div class="archive-list">
            <details class="archive-item">
              <summary>
                <span class="mono archive-id">A-36</span>
                <span class="archive-name">跨端入口与状态提示统一</span>
                <span class="mono archive-when">上一季度</span>
              </summary>
              <div class="archive-panel">
                <p>本册收录 4 个版本，重点是把六类访问环境下的入口位置、状态灯语义和反馈按钮坐标拉齐，减少来回切换时的错位感。</p>
              </div>
            </details>

            <details class="archive-item">
              <summary>
                <span class="mono archive-id">A-35</span>
                <span class="archive-name">小屏首屏信息密度调整</span>
                <span class="mono archive-when">上一季度</span>
              </summary>
              <div class="archive-panel">
                <p>针对 320px 与 375px 两档宽度重排首页拼贴块，登录入口保持最大块，反馈入口锁定第一屏，更新摘要收窄为一条。</p>
              </div>
            </details>

            <details class="archive-item">
              <summary>
                <span class="mono archive-id">A-34</span>
                <span class="archive-name">工单编号与记录编号打通</span>
                <span class="mono archive-when">上两季度</span>
              </summary>
              <div class="archive-panel">
                <p>反馈提交后生成的工单编号，与更新记录里的条目编号建立对应关系。客服凭编号可直接抽出当版记录，回访用户也能自己查。</p>
              </div>
            </details>

            <details class="archive-item">
              <summary>
                <span class="mono archive-id">A-33</span>
                <span class="archive-name">苹果端 PWA 进入路径收束</span>
                <span class="mono archive-when">上两季度</span>
              </summary>
              <div class="archive-panel">
                <p>把 iOS 浏览器与 PWA 的分支判断合并，两条路径共用同一套入口组件，主流程步骤数保持一致。</p>
              </div>
            </details>

            <details class="archive-item">
              <summary>
                <span class="mono archive-id">A-32</span>
                <span class="archive-name">境内边缘节点扩充后的加载表现</span>
                <span class="mono archive-when">上三年度</span>
              </summary>
              <div class="archive-panel">
                <p>境内 CDN 边缘节点增至 12 个后，静态页面首字节平均耗时降到约 180ms，本册记录了各节点的覆盖与回落策略。</p>
              </div>
            </details>

            <details class="archive-item">
              <summary>
                <span class="mono archive-id">A-31</span>
                <span class="archive-name">知识中心条目体系成形</span>
                <span class="mono archive-when">上三年度</span>
              </summary>
              <div class="archive-panel">
                <p>把零散问答按登录、适配、账号、反馈、记录五个类别重排，条目数量从此稳定在 86 条上下并持续补充。</p>
              </div>
            </details>
          </div>
        </section>

        <section class="news-sec" id="how">
          <div class="sec-head">
            <span class="mono sec-num">05</span>
            <h2>一条记录是怎么产生的</h2>
            <p class="muted">记录不是事后补写的说明，它跟工单走的是同一条流水线。工作日 9:00–18:00 内提交的工单，平均首次响应时间约 25 分钟。</p>
          </div>

          <ol class="flow">
            <li class="flow-step">
              <span class="mono flow-num">01</span>
              <h3>受理</h3>
              <p>你在反馈面板选好分类，附上截图和当前的设备与浏览器，系统随即生成一个可引用的工单编号。</p>
            </li>
            <li class="flow-step">
              <span class="mono flow-num">02</span>
              <h3>定位</h3>
              <p>工程侧按工单编号复现问题，判断它落在入口类、适配类、账号类、内容类还是其他，再决定改动范围。</p>
            </li>
            <li class="flow-step">
              <span class="mono flow-num">03</span>
              <h3>修复</h3>
              <p>能随下一个常规版本上线的排进当月；需要跨端回归的，排进季度一轮的统一测试。</p>
            </li>
            <li class="flow-step">
              <span class="mono flow-num">04</span>
              <h3>写成记录</h3>
              <p>上线后补一条带编号的条目，归入四个标签中的一个。你截图里的工单编号，就指向这条记录。</p>
            </li>
          </ol>
        </section>

        <section class="news-sec" id="find">
          <div class="sec-head">
            <span class="mono sec-num">06</span>
            <h2>回访时，三条路都能翻到那一版</h2>
            <p class="muted">记不清是哪个版本改的没关系，从你知道的那一点出发就行。</p>
          </div>

          <ul class="find-list">
            <li class="find-item">
              <span class="mono find-key">按标题</span>
              <h3>记得大概改了什么</h3>
              <p>用页面里的关键词回想描述，比如“命令栏”“索引折叠”“反馈面板”，条目标题里一般都有对应的说法。</p>
            </li>
            <li class="find-item">
              <span class="mono find-key">按标签</span>
              <h3>只想看某一类变动</h3>
              <p>点左栏的四个标签之一，列表只留下这一类。想知道入口这块最近动过什么，选“入口优化”就够。</p>
            </li>
            <li class="find-item">
              <span class="mono find-key">按编号</span>
              <h3>手上留着截图或工单</h3>
              <p>截图里的版本号、工单编号，都是等宽数字，直接对着条目右下角的编号找，比翻时间线快得多。</p>
            </li>
          </ul>
        </section>

        <section class="news-sec" id="links">
          <div class="sec-head">
            <span class="mono sec-num">07</span>
            <h2>看完记录，下一步去哪</h2>
            <p class="muted">记录是往回看的，入口是往前走的。几个常去的地方放在下面。</p>
          </div>

          <ul class="entry-links">
            <li>
              <a class="entry-link" href="/">
                <span class="entry-name">进入登录入口</span>
                <span class="entry-note">小屏与桌面共用同一入口，手机端从首页到登录面板平均两步完成。</span>
              </a>
            </li>
            <li>
              <a class="entry-link" href="/experience/">
                <span class="entry-name">电脑端品牌站面板怎么用</span>
                <span class="entry-note">一屏之内看完入口、状态与反馈位置，先点哪里最快。</span>
              </a>
            </li>
            <li>
              <a class="entry-link" href="/knowledge/">
                <span class="entry-name">CN 回访用户自助排查</span>
                <span class="entry-note">进不去、打不开、想查工单进度，先在知识中心过一遍。</span>
              </a>
            </li>
            <li>
              <a class="entry-link" href="/about/">
                <span class="entry-name">平台的来路与服务范围</span>
                <span class="entry-note">服务覆盖 31 个省级行政区，团队分工与协作生态都写在这一页。</span>
              </a>
            </li>
            <li>
              <a class="entry-link" href="/cooperation/">
                <span class="entry-name">渠道对接与内容共建</span>
                <span class="entry-note">合作方向与对接方式，提交后两个工作日内收到回复。</span>
              </a>
            </li>
          </ul>
        </section>

      </div>
    </div>
  </div>
</main>

.page-news {
  background: var(--ink-950);
  color: var(--text-100);
  --news-node: var(--grid-line);
}

/* ---------- 首屏 ---------- */
.page-news .news-hero {
  position: relative;
  padding: 28px 0 36px;
  border-bottom: 1px solid var(--grid-line);
  background-image:
    repeating-linear-gradient(0deg, rgba(36, 53, 111, 0.34) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(36, 53, 111, 0.34) 0 1px, transparent 1px 48px),
    radial-gradient(120% 90% at 12% 0%, rgba(47, 227, 232, 0.12), transparent 62%);
}

.page-news .news-hero .breadcrumb {
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--text-400);
}

.page-news .news-hero .breadcrumb a {
  color: var(--text-400);
  text-decoration: none;
}

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

.page-news .news-hero .eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--cyan-400);
}

.page-news .news-hero h1 {
  margin: 10px 0 14px;
  font-size: 30px;
  line-height: 1.24;
  font-weight: 700;
  letter-spacing: -0.01em;
  max-width: 22em;
}

.page-news .news-hero .lead {
  margin: 0;
  max-width: 64ch;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-400);
}

.page-news .news-quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.page-news .news-quick-note {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--cyan-200);
  padding-left: 12px;
  border-left: 1px solid var(--cyan-400);
}

/* ---------- 主体布局 ---------- */
.page-news .news-body {
  padding: 30px 0 56px;
}

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

.page-news .news-rail {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.page-news .rail-block,
.page-news .rail-index {
  border: 1px solid var(--grid-line);
  background: var(--ink-900);
  padding: 12px 12px 14px;
}

.page-news .rail-title {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-400);
  text-transform: uppercase;
}

.page-news .news-flow {
  min-width: 0;
}

/* ---------- 筛选按钮 ---------- */
.page-news .filter-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

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

.page-news .filter-btn {
  flex: 0 0 auto;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  padding: 9px 13px;
  color: var(--text-400);
  background: var(--ink-800);
  border: 1px solid var(--grid-line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}

.page-news .filter-btn:hover {
  color: var(--text-100);
  border-color: var(--cyan-400);
}

.page-news .filter-btn[aria-pressed="true"] {
  color: var(--ink-950);
  background: var(--cyan-400);
  border-color: var(--cyan-400);
  font-weight: 600;
}

/* ---------- 页内索引 ---------- */
.page-news .rail-index ol {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.page-news .rail-index ol::-webkit-scrollbar {
  display: none;
}

.page-news .rail-index a {
  display: block;
  white-space: nowrap;
  padding: 8px 11px;
  font-size: 12px;
  color: var(--text-400);
  text-decoration: none;
  background: var(--ink-800);
  border: 1px solid var(--grid-line);
  border-radius: var(--radius);
  transition: color var(--t-fast), border-color var(--t-fast);
}

.page-news .rail-index a[aria-current="true"] {
  color: var(--cyan-200);
  border-color: var(--cyan-400);
}

/* ---------- 区块通用 ---------- */
.page-news .news-sec {
  scroll-margin-top: 96px;
}

.page-news .news-sec + .news-sec {
  margin-top: 50px;
  padding-top: 40px;
  border-top: 1px solid var(--grid-line);
}

.page-news .sec-head {
  margin-bottom: 4px;
}

.page-news .sec-num {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--cyan-400);
  border: 1px solid var(--grid-line);
  padding: 3px 8px;
}

.page-news .news-sec h2 {
  margin: 12px 0 8px;
  font-size: 23px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.page-news .news-sec .muted {
  margin: 0;
  max-width: 64ch;
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-400);
}

/* ---------- 图片容器 ---------- */
.page-news .media {
  position: relative;
  overflow: hidden;
  margin: 20px 0 0;
  border: 1px solid var(--grid-line);
  background: var(--ink-800);
}

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

.page-news .media--wide img {
  aspect-ratio: 21 / 9;
}

.page-news .media--square img {
  aspect-ratio: 1 / 1;
}

.page-news .media-caption {
  display: block;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-400);
  border-top: 1px solid var(--grid-line);
  background: var(--ink-900);
}

/* ---------- 本月摘要 ---------- */
.page-news .digest {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 22px;
}

.page-news .digest-card {
  padding: 16px;
  background: var(--ink-900);
  border: 1px solid var(--grid-line);
  border-top: 2px solid var(--cyan-400);
}

.page-news .digest-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.page-news .digest-code {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-400);
}

.page-news .digest-card h3 {
  margin: 12px 0 6px;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 700;
}

.page-news .digest-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-400);
}

/* ---------- 记录时间线 ---------- */
.page-news .stream-legend {
  margin-top: 20px;
}

.page-news .news-timeline {
  list-style: none;
  position: relative;
  margin: 26px 0 0;
  padding: 0 0 0 24px;
}

.page-news .news-timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--cyan-400), var(--grid-line) 24%, var(--grid-line));
}

.page-news .news-item {
  position: relative;
  padding-bottom: 20px;
}

.page-news .news-item:last-child {
  padding-bottom: 0;
}

.page-news .news-item::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 16px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ink-950);
  border: 1px solid var(--news-node);
  transition: background var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.page-news .news-item[data-category="入口优化"] { --news-node: var(--cyan-400); }
.page-news .news-item[data-category="反馈处理"] { --news-node: var(--signal-500); }
.page-news .news-item[data-category="跨端适配"] { --news-node: var(--cyan-200); }
.page-news .news-item[data-category="内容归档"] { --news-node: var(--text-400); }

.page-news .news-item.is-current::before {
  background: var(--news-node);
  box-shadow: 0 0 0 4px rgba(47, 227, 232, 0.14);
}

.page-news .news-item[hidden] {
  display: none;
}

.page-news .news-card {
  padding: 15px 17px;
  background: var(--ink-900);
  border: 1px solid var(--grid-line);
  border-left: 2px solid var(--news-node);
  transition: background var(--t-fast), border-color var(--t-fast);
}

.page-news .news-card:hover {
  background: var(--ink-800);
}

.page-news .news-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.page-news .news-cat {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  padding: 5px 9px;
  letter-spacing: 0.04em;
  color: var(--news-node);
  border: 1px solid var(--news-node);
  background: rgba(255, 255, 255, 0.03);
}

.page-news .news-ver {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-400);
}

.page-news .news-card h3 {
  margin: 0 0 6px;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 700;
}

.page-news .news-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-400);
}

.page-news .news-card .news-meta {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--cyan-200);
  opacity: 0.72;
}

/* ---------- 版本节奏 ---------- */
.page-news .version-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  margin-top: 22px;
}

.page-news .version-figure {
  margin-top: 0;
}

.page-news .version-track {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-news .version-track li {
  position: relative;
  padding: 0 0 18px 20px;
  border-left: 1px solid var(--grid-line);
}

.page-news .version-track li:last-child {
  padding-bottom: 0;
}

.page-news .version-track li::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 6px;
  width: 7px;
  height: 7px;
  background: var(--ink-950);
  border: 1px solid var(--cyan-400);
}

.page-news .vt-key {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-400);
}

.page-news .version-track strong {
  display: block;
  margin: 4px 0 3px;
  font-size: 16px;
  font-weight: 700;
  color: var(--cyan-200);
}

.page-news .version-track p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-400);
}

/* ---------- 季度档案 ---------- */
.page-news .archive-cover {
  max-width: 300px;
}

.page-news .archive-list {
  margin-top: 22px;
  border-top: 1px solid var(--grid-line);
}

.page-news .archive-item {
  border-bottom: 1px solid var(--grid-line);
}

.page-news .archive-item summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 14px 2px;
  cursor: pointer;
  list-style: none;
  transition: background var(--t-fast);
}

.page-news .archive-item summary::-webkit-details-marker {
  display: none;
}

.page-news .archive-item summary::marker {
  content: "";
}

.page-news .archive-item summary:hover {
  background: rgba(47, 227, 232, 0.05);
}

.page-news .archive-id {
  flex: 0 0 auto;
  width: 58px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--cyan-400);
}

.page-news .archive-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-100);
}

.page-news .archive-when {
  flex: 0 0 100%;
  padding-left: 70px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-400);
}

.page-news .archive-item[open] .archive-name {
  color: var(--cyan-200);
}

.page-news .archive-panel {
  padding: 0 2px 16px 70px;
}

.page-news .archive-panel p {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-400);
}

/* ---------- 记录生成流程 ---------- */
.page-news .flow {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 24px 0 0;
  padding: 0;
}

.page-news .flow-step {
  position: relative;
  padding: 18px 16px 16px;
  background: var(--ink-900);
  border: 1px solid var(--grid-line);
}

.page-news .flow-step::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 2px;
  background: var(--cyan-400);
}

.page-news .flow-num {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--cyan-400);
}

.page-news .flow-step h3 {
  margin: 10px 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.page-news .flow-step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-400);
}

/* ---------- 快速定位 ---------- */
.page-news .find-list {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 24px 0 0;
  padding: 0;
}

.page-news .find-item {
  padding: 16px;
  border-left: 2px solid var(--cyan-400);
  border-top: 1px solid var(--grid-line);
  border-right: 1px solid var(--grid-line);
  border-bottom: 1px solid var(--grid-line);
  background: linear-gradient(180deg, rgba(47, 227, 232, 0.07), transparent 72%);
}

.page-news .find-key {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--cyan-400);
}

.page-news .find-item h3 {
  margin: 10px 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.page-news .find-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-400);
}

/* ---------- 相关入口 ---------- */
.page-news .entry-links {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
}

.page-news .entry-link {
  display: block;
  padding: 15px 16px;
  background: var(--ink-900);
  border: 1px solid var(--grid-line);
  text-decoration: none;
  color: var(--text-100);
  transition: border-color var(--t-fast), background var(--t-fast);
}

.page-news .entry-link:hover {
  border-color: var(--cyan-400);
  background: var(--ink-800);
}

.page-news .entry-name {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.page-news .entry-note {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-400);
}

/* ---------- 断点 ---------- */
@media (min-width: 600px) {
  .page-news .news-hero h1 {
    font-size: 38px;
  }

  .page-news .news-hero .lead {
    font-size: 16px;
  }

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

  .page-news .archive-item summary {
    flex-wrap: nowrap;
    align-items: center;
  }

  .page-news .archive-when {
    flex: 0 0 auto;
    padding-left: 0;
    text-align: right;
  }

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

@media (min-width: 768px) {
  .page-news .news-hero {
    padding: 40px 0 48px;
  }

  .page-news .news-hero h1 {
    font-size: 44px;
  }

  .page-news .news-sec h2 {
    font-size: 30px;
  }

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

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

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

@media (min-width: 1024px) {
  .page-news .news-hero h1 {
    font-size: 52px;
  }

  .page-news .news-layout {
    grid-template-columns: 264px minmax(0, 1fr);
    gap: 52px;
    align-items: start;
  }

  .page-news .news-rail {
    position: sticky;
    top: 104px;
    align-self: start;
  }

  .page-news .filter-bar {
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: 0;
  }

  .page-news .rail-index ol {
    flex-direction: column;
    gap: 0;
    overflow: visible;
    padding: 0;
  }

  .page-news .rail-index a {
    white-space: normal;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    border-left: 2px solid var(--grid-line);
    border-radius: 0;
  }

  .page-news .rail-index a:hover {
    color: var(--text-100);
    border-left-color: var(--cyan-200);
  }

  .page-news .rail-index a[aria-current="true"] {
    color: var(--cyan-200);
    background: rgba(47, 227, 232, 0.06);
    border-left-color: var(--cyan-400);
  }

  .page-news .version-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 34px;
    align-items: start;
  }

  .page-news .version-figure {
    position: sticky;
    top: 104px;
  }
}

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

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

@media (prefers-reduced-motion: reduce) {
  .page-news .news-item::before,
  .page-news .news-card,
  .page-news .filter-btn,
  .page-news .entry-link {
    transition: none;
  }
}