.page-news {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: hidden;
}

.page-news img {
  max-width: 100%;
  height: auto;
  display: block;
}

.page-news .news-mast {
  padding: clamp(24px, 4.5vw, 52px) 0 clamp(20px, 3vw, 32px);
  border-bottom: 3px solid var(--ink);
}

.page-news .news-mast__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
}

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

.page-news .crumbs {
  margin-bottom: 18px;
}

.page-news .news-mast__eyebrow {
  margin: 0 0 10px;
  color: var(--ice);
}

.page-news .news-mast__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 8vw, 5.2rem);
  line-height: 1;
  letter-spacing: -0.022em;
}

.page-news .news-mast__accent {
  display: block;
  color: var(--ice);
  margin-top: 6px;
}

.page-news .news-mast__lead {
  margin: 22px 0 0;
  max-width: 54ch;
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.9;
  color: var(--deep);
}

.page-news .news-mast__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-news .news-mast__side {
  background: var(--snow);
  border: var(--line);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 20px clamp(16px, 3vw, 24px) 24px;
  min-width: 0;
}

.page-news .news-mast__side-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--ice);
}

.page-news .news-mast__batch {
  margin: 8px 0 12px;
  font-family: var(--font-mono);
  font-size: clamp(1.35rem, 3.2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
  word-break: break-all;
}

.page-news .news-mast__side-note {
  margin: 0 0 16px;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--deep);
}

.page-news .news-mast__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(16, 24, 32, 0.18);
  font-size: 0.87rem;
}

.page-news .news-mast__row span {
  color: var(--deep);
}

.page-news .news-mast__row strong {
  font-family: var(--font-mono);
  font-weight: 700;
  white-space: nowrap;
}

.page-news .news-mast__side .btn {
  display: flex;
  justify-content: center;
  margin-top: 18px;
  width: 100%;
}

.page-news .news-hero {
  margin-top: clamp(18px, 3vw, 32px);
}

.page-news .news-index {
  margin-top: clamp(26px, 4vw, 46px);
  background: var(--deep);
  color: var(--snow);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}

.page-news .news-index__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.page-news .news-index__label {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--frost);
}

.page-news .news-index__list {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 8px;
  margin: 0;
  padding: 4px 2px 6px;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.page-news .news-index__pill {
  display: inline-block;
  white-space: nowrap;
  padding: 7px 14px;
  border: 2px solid var(--frost);
  color: var(--snow);
  font-size: 0.86rem;
  text-decoration: none;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

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

.page-news .news-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 3vw, 34px);
  margin-top: clamp(28px, 4.5vw, 50px);
  padding-bottom: clamp(24px, 4vw, 42px);
  border-bottom: 3px solid var(--ink);
}

.page-news .news-feature__tagcol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.page-news .news-feature__batch {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ice);
  border-bottom: 2px solid var(--ice);
  padding-bottom: 2px;
  word-break: break-all;
}

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

.page-news .news-feature__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.012em;
}

.page-news .news-feature__text {
  margin: 0 0 20px;
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--deep);
}

.page-news .news-feature__points {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  border-top: 2px solid var(--ink);
}

.page-news .news-feature__points li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(16, 24, 32, 0.2);
  font-size: 0.95rem;
  line-height: 1.7;
}

.page-news .news-feature__k {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: var(--ice);
}

.page-news .news-feature__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.page-news .news-feature__doc {
  font-size: 0.9rem;
  color: var(--deep);
  text-decoration: none;
  border-bottom: 2px solid var(--signal);
  padding-bottom: 2px;
}

.page-news .news-feature__doc:hover {
  color: var(--ink);
}

.page-news .news-timeline-img {
  margin-top: clamp(22px, 3.5vw, 38px);
}

.page-news .news-archive {
  padding-top: clamp(32px, 5vw, 58px);
}

.page-news .news-archive__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding-bottom: 18px;
  border-bottom: 3px solid var(--ink);
}

.page-news .news-archive__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4.4vw, 3rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.012em;
}

.page-news .news-archive__note {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--deep);
}

.page-news .news-group {
  margin-top: clamp(26px, 4vw, 40px);
}

.page-news .news-group__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px;
  background: var(--fog);
  border-left: 8px solid var(--ice);
}

.page-news .news-group__no {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ice);
}

.page-news .news-group__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.page-news .news-group__meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--deep);
  white-space: nowrap;
}

.page-news .news-group__figure {
  padding: 18px 0 4px;
}

.page-news .note-item {
  border-bottom: 1px solid rgba(16, 24, 32, 0.22);
}

.page-news .note-item__sum {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "batch meta"
    "title title"
    "tags  tags";
  align-items: center;
  gap: 8px 14px;
  padding: 16px 34px 16px 0;
  cursor: pointer;
  list-style: none;
  transition: background 0.18s var(--ease);
}

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

.page-news .note-item__sum:hover {
  background: rgba(169, 211, 230, 0.3);
}

.page-news .note-item__sum:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: -3px;
}

.page-news .note-item__sum::after {
  content: "＋";
  position: absolute;
  right: 4px;
  top: 15px;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  color: var(--signal);
  transition: transform 0.2s var(--ease);
}

.page-news .note-item[open] .note-item__sum::after {
  transform: rotate(45deg);
}

.page-news .note-item__batch {
  grid-area: batch;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ice);
  word-break: break-all;
}

.page-news .note-item__title {
  grid-area: title;
  font-size: clamp(1rem, 1.8vw, 1.12rem);
  font-weight: 700;
  line-height: 1.55;
}

.page-news .note-item__meta {
  grid-area: meta;
  display: flex;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--deep);
  white-space: nowrap;
}

.page-news .note-item__tags {
  grid-area: tags;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.page-news .note-item__body {
  display: grid;
  gap: 12px;
  max-width: 68ch;
  padding: 2px 0 22px;
}

.page-news .note-item__body p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.88;
  color: var(--deep);
}

.page-news .note-item__doc {
  justify-self: start;
  font-size: 0.87rem;
  color: var(--ice);
  text-decoration: none;
  border-bottom: 2px solid var(--signal);
  padding-bottom: 2px;
}

.page-news .note-item__doc:hover,
.page-news .note-item__doc:focus-visible {
  color: var(--ink);
}

.page-news .news-quarter {
  margin-top: clamp(44px, 6vw, 74px);
  padding: clamp(30px, 5vw, 58px) 0;
  background: var(--frost);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}

.page-news .news-quarter__head {
  display: grid;
  gap: 14px;
  max-width: 72ch;
}

.page-news .news-quarter__head .eyebrow {
  margin: 0;
  color: var(--deep);
}

.page-news .news-quarter__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.page-news .news-quarter__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink);
}

.page-news .news-quarter__figure {
  margin-top: clamp(20px, 3vw, 32px);
}

.page-news .quarter-list {
  display: grid;
  gap: 14px;
  margin-top: clamp(20px, 3vw, 32px);
}

.page-news .quarter-item {
  background: var(--snow);
  border: var(--line);
  box-shadow: 4px 4px 0 var(--ink);
}

.page-news .quarter-item__sum {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 16px 46px 16px 18px;
  cursor: pointer;
  list-style: none;
}

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

.page-news .quarter-item__sum:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: -3px;
}

.page-news .quarter-item__sum::after {
  content: "＋";
  position: absolute;
  right: 16px;
  top: 14px;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  color: var(--signal);
  transition: transform 0.2s var(--ease);
}

.page-news .quarter-item[open] .quarter-item__sum::after {
  transform: rotate(45deg);
}

.page-news .quarter-item__season {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--ice);
}

.page-news .quarter-item__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.page-news .quarter-item__body {
  display: grid;
  gap: 10px;
  max-width: 66ch;
  padding: 0 18px 18px;
}

.page-news .quarter-item__body p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.85;
  color: var(--deep);
}

.page-news .news-check {
  padding: clamp(38px, 6vw, 72px) 0 clamp(30px, 5vw, 56px);
}

.page-news .news-check__box {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  padding: clamp(22px, 4vw, 40px);
  background: var(--snow);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
}

.page-news .news-check__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.page-news .news-check__p {
  margin: 0;
  max-width: 58ch;
  font-size: 0.97rem;
  line-height: 1.88;
  color: var(--deep);
}

.page-news .news-check__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: start;
}

@media (min-width: 640px) {
  .page-news .news-feature__points li {
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 16px;
    align-items: baseline;
  }
}

@media (min-width: 900px) {
  .page-news .news-mast__grid {
    grid-template-columns: minmax(0, 1.7fr) minmax(248px, 0.72fr);
    align-items: start;
  }

  .page-news .news-feature {
    grid-template-columns: 170px minmax(0, 1fr);
    align-items: start;
  }

  .page-news .news-feature__tagcol {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 6px;
  }

  .page-news .news-archive__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    align-items: end;
    gap: 24px;
  }

  .page-news .note-item__sum {
    grid-template-columns: 150px minmax(0, 1fr) auto 104px;
    grid-template-areas: "batch title tags meta";
    gap: 0 20px;
    padding: 20px 34px 20px 0;
  }

  .page-news .note-item__meta {
    justify-content: flex-end;
  }

  .page-news .note-item__sum::after {
    top: 50%;
    transform: translateY(-50%);
    right: 6px;
  }

  .page-news .note-item[open] .note-item__sum::after {
    transform: translateY(-50%) rotate(45deg);
  }
}

@media (min-width: 1040px) {
  .page-news .news-check__box {
    grid-template-columns: minmax(0, 1.55fr) auto;
    align-items: center;
    gap: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .news-index__pill,
  .page-news .note-item__sum,
  .page-news .note-item__sum::after,
  .page-news .quarter-item__sum::after {
    transition: none;
  }
}
<<<END>>>

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

  <section class="news-mast" aria-labelledby="news-title">
    <div class="wrap news-mast__grid">
      <div class="news-mast__main">
        <nav class="crumbs" aria-label="面包屑">
          <ol class="crumbs__list">
            <li class="crumbs__item"><a class="crumbs__link" href="/">首页</a></li>
            <li class="crumbs__item"><a class="crumbs__link" href="/notes/" aria-current="page">内容笔记</a></li>
          </ol>
        </nav>
        <p class="eyebrow news-mast__eyebrow">内容笔记 · 更新档案</p>
        <h1 id="news-title" class="display news-mast__title">这周改了什么<span class="news-mast__accent">翻一遍就清楚</span></h1>
        <p class="lead news-mast__lead">6686官方 每周三发布一批更新，版本号由年份、批次和修订号组成。版面调了哪里、索引加了哪些标签、旧资料该跟着改什么，都在这里留档；您在电脑和手机上翻到的是同一份记录。</p>
        <div class="news-mast__actions">
          <a class="btn btn--signal" href="#list">看近期条目</a>
          <a class="btn btn--ghost" href="/help-center/">进帮助文档</a>
        </div>
      </div>
      <aside class="news-mast__side" aria-label="最近更新概览">
        <p class="news-mast__side-label">最近一批</p>
        <p class="news-mast__batch">2025-B11-R02</p>
        <p class="news-mast__side-note">这一批动了面板首屏入口、查询标签和帮助文档的归档顺序，共 6 处可见变化。</p>
        <div class="news-mast__row"><span>发布节奏</span><strong>每周三</strong></div>
        <div class="news-mast__row"><span>可回看批次</span><strong>最近 12 批</strong></div>
        <div class="news-mast__row"><span>帮助文档</span><strong>280 余篇</strong></div>
        <a class="btn btn--signal btn--sm" href="/help-center/">看更新记录</a>
      </aside>
    </div>
  </section>

  <div class="wrap news-hero">
    <figure class="img-frame img-frame--banner">
      <img src="{zhanqunpic:h:800w:1400}" width="1400" height="800" alt="抽象档案夹与标签纸层叠排布，冰蓝色块之间点缀橙色标记">
      <figcaption class="img-frame__caption">每一批改动都留档：批次号、修订号与关联文档一并保存</figcaption>
    </figure>
  </div>

  <nav class="news-index" aria-label="按分类浏览">
    <div class="wrap news-index__inner">
      <span class="news-index__label">分类</span>
      <ul class="news-index__list">
        <li><a class="news-index__pill" href="#list">全部条目</a></li>
        <li><a class="news-index__pill" href="#cat-batch">更新批次</a></li>
        <li><a class="news-index__pill" href="#cat-version">版本演进</a></li>
        <li><a class="news-index__pill" href="#cat-migrate">旧资料迁移</a></li>
        <li><a class="news-index__pill" href="#cat-scene">使用场景</a></li>
        <li><a class="news-index__pill" href="#quarterly">季度专题</a></li>
      </ul>
    </div>
  </nav>

  <section class="news-feature wrap" aria-labelledby="feature-title">
    <div class="news-feature__tagcol">
      <span class="tag tag--signal">本批头条</span>
      <span class="news-feature__batch">2025-B11-R02</span>
    </div>
    <div class="news-feature__body">
      <h2 id="feature-title" class="news-feature__title">面板首屏把三条快捷入口提到了手边</h2>
      <p class="news-feature__text">以前要进简体版面板查一个字段，得先过一层目录；这一批把查信息、看版本、找旧资料三条入口直接放在标题下方。对只想临时确认一个信息的访问者来说，少点一次就少一次犹豫；对第一次用官方版的人来说，首屏就能看懂这里能做什么。</p>
      <ul class="news-feature__points">
        <li><span class="news-feature__k">改了哪里</span>简体版面板首屏导航区与快捷按钮位置</li>
        <li><span class="news-feature__k">谁最用得上</span>临时查一个信息的访问者、刚开始使用官方版的新用户</li>
        <li><span class="news-feature__k">配套文档</span>帮助文档「访问与入口」一组的入口说明</li>
        <li><span class="news-feature__k">跨端影响</span>电脑与手机保持同一套栏目顺序，按钮位置一致</li>
      </ul>
      <div class="news-feature__links">
        <a class="btn btn--ink btn--sm" href="/experience/">到体验中心看面板</a>
        <a class="news-feature__doc" href="/help-center/">关联文档：面板入口怎么找</a>
      </div>
    </div>
  </section>

  <div class="wrap news-timeline-img">
    <figure class="img-frame img-frame--wide">
      <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="横向排列的批次节点与版本号，冷色背景上标注修订次数" loading="lazy" decoding="async">
      <figcaption class="img-frame__caption">批次按周向前推进，修订号记录同一批内的追加调整</figcaption>
    </figure>
  </div>

  <section class="news-archive wrap" id="list" aria-labelledby="archive-title">
    <div class="news-archive__head">
      <h2 id="archive-title" class="news-archive__title">近期条目</h2>
      <p class="news-archive__note">按批次倒序排列。点开一条，能看到这次改动的具体内容，以及对应的帮助文档位置。</p>
    </div>

    <div class="news-group" id="cat-batch">
      <div class="news-group__head">
        <span class="news-group__no">01</span>
        <h3 class="news-group__title">更新批次</h3>
        <span class="news-group__meta">4 条</span>
      </div>

      <details class="note-item">
        <summary class="note-item__sum">
          <span class="note-item__batch">2025-B11-R02</span>
          <span class="note-item__title">春季版本批次：面板首页新增三条快捷入口</span>
          <span class="note-item__tags"><span class="tag tag--ice">更新批次</span></span>
          <span class="note-item__meta"><span>2 天前</span><span>4 分钟</span></span>
        </summary>
        <div class="note-item__body">
          <p>首屏导航区重排，查信息、看版本、找旧资料三条入口上移到标题下方，并保留原有的栏目顺序。移动端不做额外折叠，横向空间不足时索引条改为滑动。</p>
          <a class="note-item__doc" href="/help-center/">关联文档：访问与入口</a>
        </div>
      </details>

      <details class="note-item">
        <summary class="note-item__sum">
          <span class="note-item__batch">2025-B10-R01</span>
          <span class="note-item__title">内容索引新增 36 个查询标签</span>
          <span class="note-item__tags"><span class="tag tag--ice">更新批次</span></span>
          <span class="note-item__meta"><span>上周三</span><span>3 分钟</span></span>
        </summary>
        <div class="note-item__body">
          <p>标签围绕访问入口、版本对照、旧资料升级、更新记录等方向补充，日常说法也能命中条目。例如输入「旧版本对不上」会落到版本对照一组，而不是丢回首页重来。</p>
          <a class="note-item__doc" href="/experience/">关联文档：内容索引怎么筛</a>
        </div>
      </details>

      <details class="note-item">
        <summary class="note-item__sum">
          <span class="note-item__batch">2025-B09-R03</span>
          <span class="note-item__title">最近 12 个批次的变更摘要改为倒序归档</span>
          <span class="note-item__tags"><span class="tag tag--ice">更新批次</span></span>
          <span class="note-item__meta"><span>两周前</span><span>4 分钟</span></span>
        </summary>
        <div class="note-item__body">
          <p>摘要按批次从新到旧排列，每条附上修订号。想看某个字段近半年的调整轨迹，从上往下翻一遍就够，不必再逐页比对。</p>
          <a class="note-item__doc" href="/help-center/">关联文档：更新记录查询</a>
        </div>
      </details>

      <details class="note-item">
        <summary class="note-item__sum">
          <span class="note-item__batch">2025-B08-R01</span>
          <span class="note-item__title">合作方版本对接说明补齐五个阶段</span>
          <span class="note-item__tags"><span class="tag tag--ice">更新批次</span></span>
          <span class="note-item__meta"><span>三周前</span><span>5 分钟</span></span>
        </summary>
        <div class="note-item__body">
          <p>需求提交、版本确认、方案沟通、试运行、正式上线，每个阶段该准备哪些材料、由谁牵头，都写在了同一篇里。对接前先读一遍，通常能省掉一轮来回确认。</p>
          <a class="note-item__doc" href="/cooperation/">关联文档：商务合作流程</a>
        </div>
      </details>
    </div>

    <div class="news-group" id="cat-version">
      <div class="news-group__head">
        <span class="news-group__no">02</span>
        <h3 class="news-group__title">版本演进</h3>
        <span class="news-group__meta">3 条</span>
      </div>

      <details class="note-item">
        <summary class="note-item__sum">
          <span class="note-item__batch">2025-B11-R01</span>
          <span class="note-item__title">并排对照模式上线：两个版本摊开来看</span>
          <span class="note-item__tags"><span class="tag tag--ice">版本演进</span></span>
          <span class="note-item__meta"><span>3 天前</span><span>3 分钟</span></span>
        </summary>
        <div class="note-item__body">
          <p>版本对照页支持并排与单屏两种查看方式，新增、变更和需要再看一眼的条目用橙色标出。回查一份旧文件时，不必在两个窗口之间反复切换。</p>
          <a class="note-item__doc" href="/experience/">关联文档：双版本对照怎么用</a>
        </div>
      </details>

      <details class="note-item">
        <summary class="note-item__sum">
          <span class="note-item__batch">2025-B07-R02</span>
          <span class="note-item__title">版本号规则统一为年份＋批次＋修订号</span>
          <span class="note-item__tags"><span class="tag tag--ice">版本演进</span></span>
          <span class="note-item__meta"><span>上个月</span><span>4 分钟</span></span>
        </summary>
        <div class="note-item__body">
          <p>编号形如 2025-B11-R02，分别对应年份、年内第几批、这一批内的第几次追加修订。旧资料封面上的编号可以直接对到批次，缺修订号的按该批最后一次修订处理。</p>
          <a class="note-item__doc" href="/help-center/">关联文档：版本对照</a>
        </div>
      </details>

      <details class="note-item">
        <summary class="note-item__sum">
          <span class="note-item__batch">2025-B06-R01</span>
          <span class="note-item__title">官方版与简体版面板的栏目命名对齐</span>
          <span class="note-item__tags"><span class="tag tag--ice">版本演进</span></span>
          <span class="note-item__meta"><span>上个月</span><span>3 分钟</span></span>
        </summary>
        <div class="note-item__body">
          <p>两端使用同一套栏目名，从电脑换到手机时不用重新认一遍结构。这一条对经常在通勤路上用手机回查资料的人帮助最直接。</p>
          <a class="note-item__doc" href="/overview/">关联文档：跨端信息面板</a>
        </div>
      </details>
    </div>

    <div class="news-group" id="cat-migrate">
      <div class="news-group__head">
        <span class="news-group__no">03</span>
        <h3 class="news-group__title">旧资料迁移</h3>
        <span class="news-group__meta">3 条</span>
      </div>

      <div class="news-group__figure">
        <figure class="img-frame img-frame--flat">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="从旧资料夹指向核对轨道再汇入归档盒的抽象路径示意，冷色调" loading="lazy" decoding="async">
          <figcaption class="img-frame__caption">旧资料不是一次替换，而是沿轨道依次确认来源、版本、变更与归档</figcaption>
        </figure>
      </div>

      <details class="note-item">
        <summary class="note-item__sum">
          <span class="note-item__batch">2025-B10-R02</span>
          <span class="note-item__title">升级核对表：从来源到归档的四步法</span>
          <span class="note-item__tags"><span class="tag tag--ice">旧资料迁移</span></span>
          <span class="note-item__meta"><span>上周三</span><span>6 分钟</span></span>
        </summary>
        <div class="note-item__body">
          <p>确认来源、对齐版本、比对变更、归档结果，每一步都写清了该看哪几个字段，以及最常被漏掉的两处位置。手上有成批旧文件时，按这四步走不容易在中途乱掉。</p>
          <a class="note-item__doc" href="/help-center/">关联文档：旧资料迁移步骤</a>
        </div>
      </details>

      <details class="note-item">
        <summary class="note-item__sum">
          <span class="note-item__batch">2025-B08-R02</span>
          <span class="note-item__title">帮助文档按四组重新归档</span>
          <span class="note-item__tags"><span class="tag tag--ice">旧资料迁移</span></span>
          <span class="note-item__meta"><span>三周前</span><span>3 分钟</span></span>
        </summary>
        <div class="note-item__body">
          <p>280 余篇条目按访问与入口、版本对照、旧资料迁移、更新记录四组排列，每组内部再按使用顺序编号。多数步骤类条目读下来在 3 分钟左右，适合边看边操作。</p>
          <a class="note-item__doc" href="/help-center/">关联文档：帮助文档目录</a>
        </div>
      </details>

      <details class="note-item">
        <summary class="note-item__sum">
          <span class="note-item__batch">2025-B05-R01</span>
          <span class="note-item__title">旧资料封面编号与批次号的对应关系补全</span>
          <span class="note-item__tags"><span class="tag tag--ice">旧资料迁移</span></span>
          <span class="note-item__meta"><span>上季度</span><span>5 分钟</span></span>
        </summary>
        <div class="note-item__body">
          <p>早期资料上印的编号往往只到批次，缺修订号。这一篇给出补全方法，并说明哪两种情况下要以该批最后一次修订为准。</p>
          <a class="note-item__doc" href="/help-center/">关联文档：版本对照</a>
        </div>
      </details>
    </div>

    <div class="news-group" id="cat-scene">
      <div class="news-group__head">
        <span class="news-group__no">04</span>
        <h3 class="news-group__title">使用场景</h3>
        <span class="news-group__meta">3 条</span>
      </div>

      <details class="note-item">
        <summary class="note-item__sum">
          <span class="note-item__batch">2025-B09-R01</span>
          <span class="note-item__title">简体版面板午间高峰的索引优化</span>
          <span class="note-item__tags"><span class="tag tag--ice">使用场景</span></span>
          <span class="note-item__meta"><span>两周前</span><span>5 分钟</span></span>
        </summary>
        <div class="note-item__body">
          <p>工作日午间与晚间是两次访问高峰。索引条改为横向滑动并按常用度预排序，窄屏上一次滑动就能点到常用分类，不用再纵向翻找。</p>
          <a class="note-item__doc" href="/experience/">关联文档：简体版面板</a>
        </div>
      </details>

      <details class="note-item">
        <summary class="note-item__sum">
          <span class="note-item__batch">2025-B07-R01</span>
          <span class="note-item__title">新用户上手路线补到第五步</span>
          <span class="note-item__tags"><span class="tag tag--ice">使用场景</span></span>
          <span class="note-item__meta"><span>上个月</span><span>4 分钟</span></span>
        </summary>
        <div class="note-item__body">
          <p>首次访问、面板定位、版本确认、帮助文档查阅、更新记录收藏，五步走完基本能独立完成一次旧资料回查。第一次使用的人从第一步开始就行，不必先读完所有文档。</p>
          <a class="note-item__doc" href="/help-center/">关联文档：新用户上手</a>
        </div>
      </details>

      <details class="note-item">
        <summary class="note-item__sum">
          <span class="note-item__batch">2025-B04-R01</span>
          <span class="note-item__title">机构培训场景的讲义索引补充</span>
          <span class="note-item__tags"><span class="tag tag--ice">使用场景</span></span>
          <span class="note-item__meta"><span>上季度</span><span>4 分钟</span></span>
        </summary>
        <div class="note-item__body">
          <p>培训组织者可以直接按五步上手路线排课件，每一步配一篇帮助文档。讲义版本跟着批次走，讲完一轮下次再开课，接上新材料就行。</p>
          <a class="note-item__doc" href="/cooperation/">关联文档：机构培训</a>
        </div>
      </details>
    </div>
  </section>

  <section class="news-quarter" id="quarterly" aria-labelledby="quarterly-title">
    <div class="wrap">
      <div class="news-quarter__head">
        <p class="eyebrow">季度专题</p>
        <h2 id="quarterly-title" class="news-quarter__title">三个月翻一次，把散着的改动串成一条线</h2>
        <p class="news-quarter__text">单条笔记解决一个具体问题，季度专题解决一串问题。每个季度把版本变化与旧资料迁移的要点挑出来重新编排，按顺序读一遍，比零散地翻条目省力得多。</p>
      </div>

      <div class="news-quarter__figure">
        <figure class="img-frame img-frame--banner">
          <img src="{zhanqunpic:h:600w:1600}" width="1600" height="600" alt="低透明度冰晶纹理横向横幅，用作长列表之间的分隔" loading="lazy" decoding="async">
          <figcaption class="img-frame__caption">季度专题之间以纹理分隔，阅读位置不被打断</figcaption>
        </figure>
      </div>

      <div class="quarter-list">
        <details class="quarter-item">
          <summary class="quarter-item__sum">
            <span class="quarter-item__season">第一季合集</span>
            <h3 class="quarter-item__title">版本对照从看懂到用顺</h3>
          </summary>
          <div class="quarter-item__body">
            <p>把并排对照模式、版本号规则、旧资料封面编号三篇按使用顺序串起来。先弄清编号怎么读，再学两种查看方式，最后处理早期资料缺修订号的情况。</p>
            <a class="note-item__doc" href="/experience/">进入体验中心看对照模式</a>
          </div>
        </details>

        <details class="quarter-item">
          <summary class="quarter-item__sum">
            <span class="quarter-item__season">第二季合集</span>
            <h3 class="quarter-item__title">旧资料迁移最容易走偏的几处</h3>
          </summary>
          <div class="quarter-item__body">
            <p>四步核对表、四组归档顺序，以及批次号补全时的例外情况。手上文件多、跨了好几个版本时，先读这一组合集再动手，能避开大部分返工。</p>
            <a class="note-item__doc" href="/help-center/">在帮助文档查看迁移步骤</a>
          </div>
        </details>

        <details class="quarter-item">
          <summary class="quarter-item__sum">
            <span class="quarter-item__season">第三季合集</span>
            <h3 class="quarter-item__title">从第一次访问到熟练回查</h3>
          </summary>
          <div class="quarter-item__body">
            <p>五步上手路线配查询标签的用法，再加上更新记录收藏。适合刚接手资料维护的同事，也适合要给新人做内部培训的团队负责人。</p>
            <a class="note-item__doc" href="/help-center/">打开新用户上手路线</a>
          </div>
        </details>
      </div>
    </div>
  </section>

  <section class="news-check wrap" aria-labelledby="check-title">
    <div class="news-check__box">
      <div class="news-check__text">
        <h2 id="check-title" class="news-check__title">想确认最近一批到底动了什么？</h2>
        <p class="news-check__p">帮助文档的更新记录一节按批次列出变更摘要，配合版本对照页，可以一路看到某个字段的调整过程。邮件主题标注「版本对照」，我们会把对应批次的记录一并附上。</p>
      </div>
      <div class="news-check__actions">
        <a class="btn btn--signal" href="/help-center/">查更新记录</a>
        <a class="btn btn--ghost" href="/experience/">打开版本对照</a>
      </div>
    </div>
  </section>

</main>

.page-news {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: hidden;
}

.page-news img {
  max-width: 100%;
  height: auto;
  display: block;
}

.page-news .news-mast {
  padding: clamp(24px, 4.5vw, 52px) 0 clamp(20px, 3vw, 32px);
  border-bottom: 3px solid var(--ink);
}

.page-news .news-mast__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
}

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

.page-news .crumbs {
  margin-bottom: 18px;
}

.page-news .news-mast__eyebrow {
  margin: 0 0 10px;
  color: var(--ice);
}

.page-news .news-mast__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 8vw, 5.2rem);
  line-height: 1;
  letter-spacing: -0.022em;
}

.page-news .news-mast__accent {
  display: block;
  color: var(--ice);
  margin-top: 6px;
}

.page-news .news-mast__lead {
  margin: 22px 0 0;
  max-width: 54ch;
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.9;
  color: var(--deep);
}

.page-news .news-mast__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-news .news-mast__side {
  background: var(--snow);
  border: var(--line);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 20px clamp(16px, 3vw, 24px) 24px;
  min-width: 0;
}

.page-news .news-mast__side-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--ice);
}

.page-news .news-mast__batch {
  margin: 8px 0 12px;
  font-family: var(--font-mono);
  font-size: clamp(1.35rem, 3.2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
  word-break: break-all;
}

.page-news .news-mast__side-note {
  margin: 0 0 16px;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--deep);
}

.page-news .news-mast__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(16, 24, 32, 0.18);
  font-size: 0.87rem;
}

.page-news .news-mast__row span {
  color: var(--deep);
}

.page-news .news-mast__row strong {
  font-family: var(--font-mono);
  font-weight: 700;
  white-space: nowrap;
}

.page-news .news-mast__side .btn {
  display: flex;
  justify-content: center;
  margin-top: 18px;
  width: 100%;
}

.page-news .news-hero {
  margin-top: clamp(18px, 3vw, 32px);
}

.page-news .news-index {
  margin-top: clamp(26px, 4vw, 46px);
  background: var(--deep);
  color: var(--snow);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}

.page-news .news-index__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.page-news .news-index__label {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--frost);
}

.page-news .news-index__list {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 8px;
  margin: 0;
  padding: 4px 2px 6px;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.page-news .news-index__pill {
  display: inline-block;
  white-space: nowrap;
  padding: 7px 14px;
  border: 2px solid var(--frost);
  color: var(--snow);
  font-size: 0.86rem;
  text-decoration: none;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

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

.page-news .news-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 3vw, 34px);
  margin-top: clamp(28px, 4.5vw, 50px);
  padding-bottom: clamp(24px, 4vw, 42px);
  border-bottom: 3px solid var(--ink);
}

.page-news .news-feature__tagcol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.page-news .news-feature__batch {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ice);
  border-bottom: 2px solid var(--ice);
  padding-bottom: 2px;
  word-break: break-all;
}

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

.page-news .news-feature__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.012em;
}

.page-news .news-feature__text {
  margin: 0 0 20px;
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--deep);
}

.page-news .news-feature__points {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  border-top: 2px solid var(--ink);
}

.page-news .news-feature__points li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(16, 24, 32, 0.2);
  font-size: 0.95rem;
  line-height: 1.7;
}

.page-news .news-feature__k {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: var(--ice);
}

.page-news .news-feature__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.page-news .news-feature__doc {
  font-size: 0.9rem;
  color: var(--deep);
  text-decoration: none;
  border-bottom: 2px solid var(--signal);
  padding-bottom: 2px;
}

.page-news .news-feature__doc:hover {
  color: var(--ink);
}

.page-news .news-timeline-img {
  margin-top: clamp(22px, 3.5vw, 38px);
}

.page-news .news-archive {
  padding-top: clamp(32px, 5vw, 58px);
}

.page-news .news-archive__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding-bottom: 18px;
  border-bottom: 3px solid var(--ink);
}

.page-news .news-archive__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4.4vw, 3rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.012em;
}

.page-news .news-archive__note {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--deep);
}

.page-news .news-group {
  margin-top: clamp(26px, 4vw, 40px);
}

.page-news .news-group__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px;
  background: var(--fog);
  border-left: 8px solid var(--ice);
}

.page-news .news-group__no {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ice);
}

.page-news .news-group__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.page-news .news-group__meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--deep);
  white-space: nowrap;
}

.page-news .news-group__figure {
  padding: 18px 0 4px;
}

.page-news .note-item {
  border-bottom: 1px solid rgba(16, 24, 32, 0.22);
}

.page-news .note-item__sum {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "batch meta"
    "title title"
    "tags  tags";
  align-items: center;
  gap: 8px 14px;
  padding: 16px 34px 16px 0;
  cursor: pointer;
  list-style: none;
  transition: background 0.18s var(--ease);
}

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

.page-news .note-item__sum:hover {
  background: rgba(169, 211, 230, 0.3);
}

.page-news .note-item__sum:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: -3px;
}

.page-news .note-item__sum::after {
  content: "＋";
  position: absolute;
  right: 4px;
  top: 15px;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  color: var(--signal);
  transition: transform 0.2s var(--ease);
}

.page-news .note-item[open] .note-item__sum::after {
  transform: rotate(45deg);
}

.page-news .note-item__batch {
  grid-area: batch;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ice);
  word-break: break-all;
}

.page-news .note-item__title {
  grid-area: title;
  font-size: clamp(1rem, 1.8vw, 1.12rem);
  font-weight: 700;
  line-height: 1.55;
}

.page-news .note-item__meta {
  grid-area: meta;
  display: flex;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--deep);
  white-space: nowrap;
}

.page-news .note-item__tags {
  grid-area: tags;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.page-news .note-item__body {
  display: grid;
  gap: 12px;
  max-width: 68ch;
  padding: 2px 0 22px;
}

.page-news .note-item__body p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.88;
  color: var(--deep);
}

.page-news .note-item__doc {
  justify-self: start;
  font-size: 0.87rem;
  color: var(--ice);
  text-decoration: none;
  border-bottom: 2px solid var(--signal);
  padding-bottom: 2px;
}

.page-news .note-item__doc:hover,
.page-news .note-item__doc:focus-visible {
  color: var(--ink);
}

.page-news .news-quarter {
  margin-top: clamp(44px, 6vw, 74px);
  padding: clamp(30px, 5vw, 58px) 0;
  background: var(--frost);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}

.page-news .news-quarter__head {
  display: grid;
  gap: 14px;
  max-width: 72ch;
}

.page-news .news-quarter__head .eyebrow {
  margin: 0;
  color: var(--deep);
}

.page-news .news-quarter__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.page-news .news-quarter__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink);
}

.page-news .news-quarter__figure {
  margin-top: clamp(20px, 3vw, 32px);
}

.page-news .quarter-list {
  display: grid;
  gap: 14px;
  margin-top: clamp(20px, 3vw, 32px);
}

.page-news .quarter-item {
  background: var(--snow);
  border: var(--line);
  box-shadow: 4px 4px 0 var(--ink);
}

.page-news .quarter-item__sum {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 16px 46px 16px 18px;
  cursor: pointer;
  list-style: none;
}

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

.page-news .quarter-item__sum:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: -3px;
}

.page-news .quarter-item__sum::after {
  content: "＋";
  position: absolute;
  right: 16px;
  top: 14px;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  color: var(--signal);
  transition: transform 0.2s var(--ease);
}

.page-news .quarter-item[open] .quarter-item__sum::after {
  transform: rotate(45deg);
}

.page-news .quarter-item__season {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--ice);
}

.page-news .quarter-item__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.page-news .quarter-item__body {
  display: grid;
  gap: 10px;
  max-width: 66ch;
  padding: 0 18px 18px;
}

.page-news .quarter-item__body p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.85;
  color: var(--deep);
}

.page-news .news-check {
  padding: clamp(38px, 6vw, 72px) 0 clamp(30px, 5vw, 56px);
}

.page-news .news-check__box {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  padding: clamp(22px, 4vw, 40px);
  background: var(--snow);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
}

.page-news .news-check__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.page-news .news-check__p {
  margin: 0;
  max-width: 58ch;
  font-size: 0.97rem;
  line-height: 1.88;
  color: var(--deep);
}

.page-news .news-check__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: start;
}

@media (min-width: 640px) {
  .page-news .news-feature__points li {
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 16px;
    align-items: baseline;
  }
}

@media (min-width: 900px) {
  .page-news .news-mast__grid {
    grid-template-columns: minmax(0, 1.7fr) minmax(248px, 0.72fr);
    align-items: start;
  }

  .page-news .news-feature {
    grid-template-columns: 170px minmax(0, 1fr);
    align-items: start;
  }

  .page-news .news-feature__tagcol {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 6px;
  }

  .page-news .news-archive__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    align-items: end;
    gap: 24px;
  }

  .page-news .note-item__sum {
    grid-template-columns: 150px minmax(0, 1fr) auto 104px;
    grid-template-areas: "batch title tags meta";
    gap: 0 20px;
    padding: 20px 34px 20px 0;
  }

  .page-news .note-item__meta {
    justify-content: flex-end;
  }

  .page-news .note-item__sum::after {
    top: 50%;
    transform: translateY(-50%);
    right: 6px;
  }

  .page-news .note-item[open] .note-item__sum::after {
    transform: translateY(-50%) rotate(45deg);
  }
}

@media (min-width: 1040px) {
  .page-news .news-check__box {
    grid-template-columns: minmax(0, 1.55fr) auto;
    align-items: center;
    gap: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .news-index__pill,
  .page-news .note-item__sum,
  .page-news .note-item__sum::after,
  .page-news .quarter-item__sum::after {
    transition: none;
  }
}
<<<END>>>