.page-news {
  --news-gap: clamp(18px, 3.2vw, 34px);
  --news-cut: 12px;
  display: block;
  padding-bottom: clamp(48px, 8vw, 96px);
  color: var(--text);
  overflow-x: hidden;
}

.page-news .shell {
  width: 100%;
}

/* ---------- Hero ---------- */
.page-news .news-hero {
  position: relative;
  padding: 22px 0 40px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(760px 300px at 92% -20%, rgba(23, 195, 230, .16), transparent 68%),
    radial-gradient(600px 260px at 6% 120%, rgba(225, 29, 46, .12), transparent 70%),
    linear-gradient(158deg, rgba(30, 79, 216, .10) 0%, transparent 58%);
}

.page-news .news-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan) 0%, rgba(23, 195, 230, 0) 42%, rgba(225, 29, 46, .55) 100%);
  opacity: .6;
}

.page-news .news-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

.page-news .news-hero__main .label-micro {
  display: inline-block;
  margin: 0 0 14px;
  color: var(--cyan);
}

.page-news .news-hero h1 {
  margin: 0 0 16px;
  font-size: clamp(28px, 6.4vw, 52px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--text-strong);
  max-width: 20em;
}

.page-news .news-hero__lead {
  margin: 0 0 20px;
  max-width: 40em;
  font-size: 16px;
  line-height: 1.78;
  color: var(--text);
}

.page-news .news-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-news .news-hero__aside {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  clip-path: var(--cut-path);
  align-self: start;
}

.page-news .news-hero__metric {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  padding: 16px 18px;
  background: var(--panel);
}

.page-news .news-hero__value {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-strong);
  letter-spacing: -0.02em;
}

.page-news .news-hero__unit {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--cyan);
}

.page-news .news-hero__metric-label {
  flex: 1 1 100%;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
}

@media (min-width: 900px) {
  .page-news .news-hero {
    padding: 34px 0 56px;
  }
  .page-news .news-hero__grid {
    grid-template-columns: minmax(0, 1.65fr) minmax(240px, .85fr);
    gap: 44px;
    align-items: end;
  }
  .page-news .news-hero__aside {
    margin-bottom: 6px;
  }
}

/* ---------- Blocks ---------- */
.page-news .news-block {
  padding: clamp(36px, 6vw, 68px) 0 0;
}

.page-news .news-block--list {
  padding-top: clamp(30px, 5vw, 54px);
}

/* ---------- Report list ---------- */
.page-news .report-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.page-news .report-item {
  position: relative;
  padding: 22px 0 22px 46px;
  border-bottom: 1px solid var(--line);
  transition: background-color .3s var(--ease);
}

.page-news .report-item::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(35, 44, 56, 0) 0%, var(--line) 18%, var(--line) 82%, rgba(35, 44, 56, 0) 100%);
}

.page-news .report-item__num {
  position: absolute;
  left: 0;
  top: 25px;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--text-dim);
}

.page-news .report-item:hover {
  background: linear-gradient(90deg, rgba(23, 195, 230, .05) 0%, rgba(23, 195, 230, 0) 62%);
}

.page-news .report-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.page-news .report-item__time {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: .04em;
}

.page-news .report-item__title {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}

.page-news .report-item__sum {
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
  color: var(--text);
  max-width: 46em;
}

.page-news .report-item__more {
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
  color: var(--text-dim);
  max-width: 46em;
  overflow: hidden;
}

@media (hover: hover) {
  .page-news .report-item__more {
    max-height: 0;
    opacity: 0;
    transition: max-height .42s var(--ease), opacity .3s var(--ease), margin-top .42s var(--ease);
  }
  .page-news .report-item:hover .report-item__more,
  .page-news .report-item:focus-within .report-item__more {
    max-height: 160px;
    margin-top: 8px;
    opacity: 1;
  }
}

@media (min-width: 960px) {
  .page-news .report-item {
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    gap: 34px;
    padding: 30px 8px 30px 62px;
  }
  .page-news .report-item::before {
    left: 34px;
  }
  .page-news .report-item__num {
    top: 33px;
    left: 4px;
  }
  .page-news .report-item__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 0;
  }
  .page-news .report-item__title {
    font-size: 20px;
  }
}

/* ---------- Figures ---------- */
.page-news .figure {
  margin: 24px 0 0;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  clip-path: var(--cut-path);
  overflow: hidden;
}

.page-news .figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  filter: saturate(.92);
}

.page-news .figure figcaption {
  padding: 12px 16px;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .03em;
  color: var(--text-dim);
  border-top: 1px solid var(--line);
  background: var(--ink-800);
}

/* ---------- Archive arc ---------- */
.page-news .arc {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.page-news .arc__node {
  position: relative;
  padding: 0 0 24px 28px;
  border-left: 1px solid var(--line);
}

.page-news .arc__node::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 5px;
  width: 9px;
  height: 9px;
  transform: translateX(-4px) rotate(45deg);
  background: var(--ink-900);
  border: 1px solid var(--cyan);
}

.page-news .arc__node:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.page-news .arc__range {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-strong);
}

.page-news .arc__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.82;
  color: var(--text-dim);
  max-width: 34em;
}

@media (min-width: 900px) {
  .page-news .arc {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin-top: 30px;
  }
  .page-news .arc__node {
    padding: 32px 22px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .page-news .arc__node::before {
    left: 0;
    top: -5px;
    transform: rotate(45deg);
  }
  .page-news .arc__node:last-child {
    border-top-color: var(--line);
    border-left-color: transparent;
    padding-bottom: 0;
  }
}

/* ---------- Callout ---------- */
.page-news .news-callout {
  margin-top: 30px;
  padding: 20px 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  clip-path: var(--cut-path-sm);
}

.page-news .news-callout p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text);
  max-width: 44em;
}

/* ---------- Version compare ---------- */
.page-news .version-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 22px;
}

.page-news .version-card {
  position: relative;
  padding: 22px 20px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  clip-path: var(--cut-path);
}

.page-news .version-card--before {
  background: linear-gradient(170deg, rgba(225, 29, 46, .08) 0%, var(--panel) 46%);
}

.page-news .version-card--after {
  background: linear-gradient(170deg, rgba(23, 195, 230, .12) 0%, var(--panel) 48%);
}

.page-news .version-card__tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 10px;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--text-dim);
  border: 1px solid var(--line);
  background: rgba(5, 8, 12, .55);
}

.page-news .version-card--after .version-card__tag {
  color: var(--cyan);
  border-color: rgba(23, 195, 230, .45);
}

.page-news .version-card__title {
  margin: 0 0 10px;
  font-size: 19px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--text-strong);
}

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

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

.page-news .version-card__list li {
  position: relative;
  padding: 7px 0 7px 18px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-dim);
  border-top: 1px dashed var(--line-soft);
}

.page-news .version-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 6px;
  height: 1px;
  background: var(--text-dim);
}

.page-news .version-card--after .version-card__list li::before {
  background: var(--cyan);
}

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

/* ---------- Prose ---------- */
.page-news .news-block .prose {
  margin-top: 26px;
  max-width: 44em;
}

.page-news .news-block .prose p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text);
}

.page-news .news-block .prose p:last-child {
  margin-bottom: 0;
}

/* ---------- Seat cards ---------- */
.page-news .seats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 26px;
}

.page-news .seat-card {
  position: relative;
  padding: 20px 18px 22px;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-top: 2px solid var(--cyan);
  clip-path: var(--cut-path-sm);
}

.page-news .seat-card:nth-child(4) {
  border-top-color: var(--red);
}

.page-news .seat-card__num {
  display: block;
  margin-bottom: 8px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}

.page-news .seat-card__title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--cyan);
}

.page-news .seat-card:nth-child(4) .seat-card__title {
  color: var(--red);
}

.page-news .seat-card__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-dim);
}

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

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

/* ---------- Cadence ---------- */
.page-news .cadence-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  margin-top: 22px;
}

.page-news .cadence-grid__figure {
  margin-top: 0;
}

.page-news .cadence-grid__lead {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text);
}

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

.page-news .cadence-list li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.page-news .cadence-list__k {
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--gold);
}

.page-news .cadence-list__v {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text);
}

@media (min-width: 860px) {
  .page-news .cadence-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 40px;
    align-items: start;
  }
  .page-news .cadence-list li {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 20px;
    align-items: baseline;
  }
}

/* ---------- Global tweaks inside page ---------- */
.page-news .section-head {
  margin-bottom: 0;
}

.page-news .btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-news .btn-row .btn {
  white-space: nowrap;
}

@media (max-width: 480px) {
  .page-news .report-item {
    padding-left: 40px;
  }
  .page-news .report-item::before {
    left: 20px;
  }
  .page-news .btn-row .btn {
    flex: 1 1 100%;
    text-align: center;
  }
}
<<<END>>>

等等，我需要去掉那个结尾的标记。实际上，格式里只要求 ``、``，没有别的。我就直接输出那两节吧。我再检查一下。

我用了 `<span class="chip chip--cool">` 这种——这些是已经存在的共享类。没问题。

用了 `.btn`、`.btn--ghost`、`.btn--primary`——都是共享的。

用了 `clip-path: var(--cut-path-sm)`——这个变量是存在的。

`--line-soft` 是存在的。`--gold` 是存在的。`--red`、`--cyan`、`--ink-900`、`--ink-800`、`--panel`、`--text`、`--text-dim`、`--text-strong`、`--line`、`--ease`、`--font-mono`——全都存在。

`--news-gap` 和 `--news-cut` 在本地定义了，但根本没用上……干脆把它们删掉，免得留没用的东西。其实也无伤大雅，但还是删了吧。

另外我没有给 `--news-gap` 和 `--news-cut` 写过 `var()`。删掉。

`.page-news .section-head { margin-bottom: 0; }` 这一句——可能会把共享样式覆盖掉。应该没什么问题。

再核对一遍图片占位符的格式：
`{zhanqunpic:h:800w:1400}`，同时 `width="1400" height="800"` ✓
`{zhanqunpic:h:700w:1200}`，同时 `width="1200" height="700"` ✓
`{zhanqunpic:h:800w:1200}`，同时 `width="1200" height="800"` ✓
`{zhanqunpic:h:675w:1200}`，同时 `width="1200" height="675"` ✓

数量是 4 张，正好等于 image_target ✓

好，把 `--news-gap` / `--news-cut` 那几行去掉，然后输出最终版本。

另外 `.page-news .news-hero__main .label-micro`——`label-micro` 是共享类，没问题。

还有个问题：h1 里面“回放怎么归档、版本改了什么，我们一条条写给你看”，这个没问题。

品牌名“奥迪棋牌包网”在首屏导语里出现了 ✓

再确认一下“本页只做……”之类的治理性用语——没有，这个没问题。

好。
<main id="main-content" class="page-news">
  <div class="shell">
    <nav class="breadcrumb" aria-label="面包屑导航">
      <ol>
        <li><a href="/">首页</a></li>
        <li aria-current="page">观察报告</li>
      </ol>
    </nav>
  </div>

  <section class="news-hero">
    <div class="shell news-hero__grid">
      <div class="news-hero__main" data-reveal>
        <p class="label-micro">观察报告 · 持续更新</p>
        <h1>回放怎么归档、版本改了什么，我们一条条写给你看</h1>
        <p class="news-hero__lead">
          奥迪棋牌包网的对局回放按自然日归档、近 30 天可直接调取；电脑版 V3 把收藏导出搬到了左侧栏；
          玩法规则页给每类对局标上了房间人数区间。这些改动落到你手上到底是什么体验，我们拆开写成可读的报告。
        </p>
        <div class="news-hero__tags">
          <span class="chip chip--cool">回放归档</span>
          <span class="chip chip--cool">版本迭代</span>
          <span class="chip chip--cool">玩法规则</span>
          <span class="chip chip--warm">会员成长</span>
          <span class="chip chip--warm">客服运营</span>
        </div>
      </div>
      <aside class="news-hero__aside" data-reveal>
        <div class="news-hero__metric">
          <span class="news-hero__value">30</span>
          <span class="news-hero__unit">天</span>
          <span class="news-hero__metric-label">会员中心可直接调取的回放区间</span>
        </div>
        <div class="news-hero__metric">
          <span class="news-hero__value">7</span>
          <span class="news-hero__unit">档</span>
          <span class="news-hero__metric-label">新锐到殿堂的段位进度阶梯</span>
        </div>
        <div class="news-hero__metric">
          <span class="news-hero__value">20</span>
          <span class="news-hero__unit">分钟以内</span>
          <span class="news-hero__metric-label">工单平均首次响应</span>
        </div>
      </aside>
    </div>
  </section>

  <section class="news-block news-block--list" id="reports-list">
    <div class="shell">
      <header class="section-head">
        <span class="section-head__num mono">00</span>
        <h2 class="section-head__title">最新一批观察条目</h2>
        <p class="section-head__note">按时间倒序排列，从最近一轮赛季阶段往前看</p>
      </header>

      <ol class="report-list">
        <li class="report-item" data-reveal>
          <span class="report-item__num mono">01</span>
          <div class="report-item__meta">
            <span class="chip chip--cool">回放归档</span>
            <span class="report-item__time mono">近期 · 新一阶段开始后</span>
          </div>
          <div class="report-item__text">
            <h3 class="report-item__title">近 30 天回放统一收进会员中心，按自然日逐天排开</h3>
            <p class="report-item__sum">登录后进入回放调取入口，近 30 天记录每天单独成列，点中某一天就能看到当天打过的全部对局。</p>
            <p class="report-item__more">想回看某次升段前后几局的出牌次序，最快的方法就是先定日期，再顺着列表往下翻，不需要逐条翻页寻找。</p>
          </div>
        </li>

        <li class="report-item" data-reveal>
          <span class="report-item__num mono">02</span>
          <div class="report-item__meta">
            <span class="chip chip--cool">版本迭代</span>
            <span class="report-item__time mono">电脑版 V3 当前版本</span>
          </div>
          <div class="report-item__text">
            <h3 class="report-item__title">收藏导出从二级菜单搬到左侧栏，常用操作少走两步</h3>
            <p class="report-item__sum">电脑版 V3 把会员中心收藏导出提到左侧固定操作区，原先需要三步才能点到的功能，现在一次点击即可完成。</p>
            <p class="report-item__more">左侧栏同时常驻回放调取与段位进度两个入口，习惯在电脑上批量整理收藏的用户，页面跳转次数明显变少。</p>
          </div>
        </li>

        <li class="report-item" data-reveal>
          <span class="report-item__num mono">03</span>
          <div class="report-item__meta">
            <span class="chip chip--cool">玩法规则</span>
            <span class="report-item__time mono">本赛季中段</span>
          </div>
          <div class="report-item__text">
            <h3 class="report-item__title">四档房间人数区间标注上线，进桌前先看规模</h3>
            <p class="report-item__sum">玩法规则页为每类对局标出 2 人、4 人、6 人、8 人四档区间，选桌之前就能判断这桌的节奏适不适合自己。</p>
            <p class="report-item__more">区间标注上线之后，因为人数预期不一致而中途退出对局的情况变少了，长期在线的用户更习惯固定待在 4 人与 6 人两档。</p>
          </div>
        </li>

        <li class="report-item" data-reveal>
          <span class="report-item__num mono">04</span>
          <div class="report-item__meta">
            <span class="chip chip--warm">会员成长</span>
            <span class="report-item__time mono">本赛季中段</span>
          </div>
          <div class="report-item__text">
            <h3 class="report-item__title">七个段位阶梯的进度刻度，怎么读都清楚</h3>
            <p class="report-item__sum">从新锐、进阶、熟练、精英、大师、宗师到殿堂一共七档，每档都有独立的进度刻度，当前走到哪一格一眼能看出来。</p>
            <p class="report-item__more">切换账号后段位进度自动保留，换设备或重新登录都不会清空；升段轨迹按账号独立归档，想看自己是怎么一档一档上来的，翻回放最直观。</p>
          </div>
        </li>

        <li class="report-item" data-reveal>
          <span class="report-item__num mono">05</span>
          <div class="report-item__meta">
            <span class="chip chip--warm">客服运营</span>
            <span class="report-item__time mono">近两周</span>
          </div>
          <div class="report-item__text">
            <h3 class="report-item__title">工单按账号、安装、规则三类分派，首次响应在 20 分钟以内</h3>
            <p class="report-item__sum">提交后按账号问题、安装问题与规则咨询三条线分派，平均首次响应控制在 20 分钟以内，服务时段为工作日 9:00-18:00。</p>
            <p class="report-item__more">账号与段位相关的问题建议优先走站内工单，带上账号信息能一次处理到位，不必来回补充说明。</p>
          </div>
        </li>

        <li class="report-item" data-reveal>
          <span class="report-item__num mono">06</span>
          <div class="report-item__meta">
            <span class="chip chip--cool">回放归档</span>
            <span class="report-item__time mono">上月</span>
          </div>
          <div class="report-item__text">
            <h3 class="report-item__title">超出 30 天窗口的对局记录，怎么找回来看</h3>
            <p class="report-item__sum">会员中心列出的是近 30 天。更早的记录仍按账号保留，通过站内工单申请查看，写清大致时段能更快定位。</p>
            <p class="report-item__more">如果目的是核对升段轨迹，说明这一点会让处理更直接，因为升段轨迹本身就是按账号长期归档的，与回放是两条线。</p>
          </div>
        </li>

        <li class="report-item" data-reveal>
          <span class="report-item__num mono">07</span>
          <div class="report-item__meta">
            <span class="chip chip--cool">版本迭代</span>
            <span class="report-item__time mono">电脑版改版之后</span>
          </div>
          <div class="report-item__text">
            <h3 class="report-item__title">手机端没有跟着搬家，收藏入口仍在「我的」下面</h3>
            <p class="report-item__sum">电脑端改版后，手机端继续保留「我的—收藏」两级路径，习惯在手机上操作的用户不用重新找位置。</p>
            <p class="report-item__more">两端的收藏与段位进度走的是同一份账号数据，在电脑上收藏的内容，手机上打开收藏同样能看到。</p>
          </div>
        </li>

        <li class="report-item" data-reveal>
          <span class="report-item__num mono">08</span>
          <div class="report-item__meta">
            <span class="chip chip--cool">玩法规则</span>
            <span class="report-item__time mono">赛季后段</span>
          </div>
          <div class="report-item__text">
            <h3 class="report-item__title">8 人局的信息量在哪，什么阶段进去比较合适</h3>
            <p class="report-item__sum">8 人局同时出牌的压力更大，适合已经熟悉基础规则、想观察多家节奏的用户。</p>
            <p class="report-item__more">刚上手可以先从 2 人局起步，把基本操作与计分逻辑走顺，再逐步过渡到 4 人与 6 人，最后再考虑满桌。</p>
          </div>
        </li>
      </ol>
    </div>
  </section>

  <section class="news-block news-block--archive" id="replay-archive">
    <div class="shell">
      <header class="section-head">
        <span class="section-head__num mono">01</span>
        <h2 class="section-head__title">回放的归档结构：近 30 天按天排，再往前就走申请</h2>
        <p class="section-head__note">归档区间与调取方式对照</p>
      </header>

      <figure class="figure figure--wide" data-reveal>
        <img src="{zhanqunpic:h:800w:1400}" width="1400" height="800" alt="按日期刻度排列的对局回放归档时间轴，近 30 天区间以青蓝高亮">
        <figcaption>近 30 天区间在会员中心逐日列出，超过这一区间转入按账号申请查看。</figcaption>
      </figure>

      <ol class="arc">
        <li class="arc__node" data-reveal>
          <span class="arc__range mono">第 1 — 7 天</span>
          <p class="arc__desc">调用最频繁的一段，多数人用来回看刚打完的几局，核对出牌次序。</p>
        </li>
        <li class="arc__node" data-reveal>
          <span class="arc__range mono">第 8 — 15 天</span>
          <p class="arc__desc">升段前后那几天的记录会被反复打开，配合段位刻度一起看更清楚。</p>
        </li>
        <li class="arc__node" data-reveal>
          <span class="arc__range mono">第 16 — 23 天</span>
          <p class="arc__desc">进入低频查看区间，通常是有针对性地找某一局，而不是整段回看。</p>
        </li>
        <li class="arc__node" data-reveal>
          <span class="arc__range mono">第 24 — 30 天</span>
          <p class="arc__desc">仍可在会员中心直接列出，这是能自助调取的最后一个区间。</p>
        </li>
        <li class="arc__node" data-reveal>
          <span class="arc__range mono">第 30 天以外</span>
          <p class="arc__desc">会员中心不再列出，按账号通过站内工单申请查看，说明大致时段即可定位。</p>
        </li>
      </ol>

      <div class="news-callout" data-reveal>
        <p>回放的具体调取步骤、账号切换后记录是否还在，都整理在问题解答里，遇到不确定的地方可以先去那边对照。</p>
        <div class="btn-row">
          <a class="btn btn--ghost" href="/questions/">查看调取说明</a>
          <a class="btn btn--ghost" href="/brand/">了解平台版本脉络</a>
        </div>
      </div>
    </div>
  </section>

  <section class="news-block news-block--version" id="version-watch">
    <div class="shell">
      <header class="section-head">
        <span class="section-head__num mono">02</span>
        <h2 class="section-head__title">三代版本走下来，操作位置变了但功能没丢</h2>
        <p class="section-head__note">电脑版 V3 改版前后对照</p>
      </header>

      <div class="version-grid">
        <div class="version-card version-card--before" data-reveal>
          <span class="version-card__tag mono">改版前</span>
          <h3 class="version-card__title">收藏导出藏在二级菜单</h3>
          <p class="version-card__text">进入会员中心后还要再点开一层，才能找到收藏导出。整理一批收藏往往要在页面之间来回跳几次。</p>
          <ul class="version-card__list">
            <li>常用功能分散在不同层级</li>
            <li>回放调取与段位进度需要单独进入</li>
            <li>操作路径偏长，效率型用户感知明显</li>
          </ul>
        </div>
        <div class="version-card version-card--after" data-reveal>
          <span class="version-card__tag mono">电脑版 V3</span>
          <h3 class="version-card__title">左侧栏常驻三个常用入口</h3>
          <p class="version-card__text">收藏导出、回放调取、段位进度固定在左侧操作区，无论翻到哪一层都能直接切过去，常用操作由三步缩短为一步。</p>
          <ul class="version-card__list">
            <li>收藏导出提至固定操作区</li>
            <li>回放与段位进度常驻可见</li>
            <li>页面跳转次数减少，整理节奏更连贯</li>
          </ul>
        </div>
      </div>

      <figure class="figure figure--mid" data-reveal>
        <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="电脑版左侧栏改版前后的界面对照示意，使用剪影化界面而非真实截图文字" loading="lazy" decoding="async">
        <figcaption>左侧栏改版的前后操作位置对照，手机端菜单层级保持原样。</figcaption>
      </figure>

      <div class="prose" data-reveal>
        <p>
          改版只动电脑端的位置，没有削减任何功能。手机端继续沿用「我的—收藏」这一层路径，
          在手机上习惯了的用户不需要重新适应；两端的收藏与段位进度来自同一份账号数据，切换设备后看到的是一致的。
        </p>
        <p>
          从基础对局功能版到带独立操作区与数据可视化的当前版本，三代迭代的主线一直是同一件事：
          把高频操作放到伸手就能碰到的地方。安装方式与系统要求可以在下载中心按设备对照。
        </p>
      </div>
    </div>
  </section>

  <section class="news-block news-block--rule" id="rule-match">
    <div class="shell">
      <header class="section-head">
        <span class="section-head__num mono">03</span>
        <h2 class="section-head__title">房间人数区间上线后，匹配节奏发生了什么变化</h2>
        <p class="section-head__note">四档区间的适用场景</p>
      </header>

      <figure class="figure figure--mid" data-reveal>
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="2人、4人、6人、8人四档房间人数区间的规则索引信息图" loading="lazy" decoding="async">
        <figcaption>玩法规则页为每类对局标注人数区间，选桌前即可判断这一桌的节奏。</figcaption>
      </figure>

      <div class="seats">
        <article class="seat-card" data-reveal>
          <span class="seat-card__num mono">2 人</span>
          <h3 class="seat-card__title">入门与专注对练</h3>
          <p class="seat-card__text">节奏最慢，回合轮转清楚，适合刚接触棋牌电玩、需要把基础操作走顺的新手。</p>
        </article>
        <article class="seat-card" data-reveal>
          <span class="seat-card__num mono">4 人</span>
          <h3 class="seat-card__title">常规对局的主力档</h3>
          <p class="seat-card__text">人数与信息量平衡得最好，等待时间短，多数日常对局在这个区间完成。</p>
        </article>
        <article class="seat-card" data-reveal>
          <span class="seat-card__num mono">6 人</span>
          <h3 class="seat-card__title">想多观察几家的选择</h3>
          <p class="seat-card__text">决策点更密，需要同时留意更多出牌信号，适合已经熟悉规则细节的用户。</p>
        </article>
        <article class="seat-card" data-reveal>
          <span class="seat-card__num mono">8 人</span>
          <h3 class="seat-card__title">满桌强度，节奏最紧</h3>
          <p class="seat-card__text">信息量最大、出手压力最集中，建议在坐稳前两档之后再来尝试满桌。</p>
        </article>
      </div>

      <div class="prose" data-reveal>
        <p>
          区间标注上线前，选桌更多靠经验判断；上线之后，规则页直接给出人数规模，
          你能在进桌之前就知道这桌是慢节奏还是快节奏，因为预期不一致而中途退出的情况随之减少。
          人数区间的完整说明与各档细则，已同步到问题解答中。
        </p>
      </div>
    </div>
  </section>

  <section class="news-block news-block--cadence" id="cadence">
    <div class="shell">
      <header class="section-head">
        <span class="section-head__num mono">04</span>
        <h2 class="section-head__title">下一批报告什么时候出现</h2>
        <p class="section-head__note">更新跟着赛季阶段与版本节点走</p>
      </header>

      <div class="cadence-grid">
        <figure class="figure figure--mid cadence-grid__figure" data-reveal>
          <img src="{zhanqunpic:h:675w:1200}" width="1200" height="675" alt="暗色底上的斜线轨迹与环形刻度组成的专题封面抽象图形" loading="lazy" decoding="async">
          <figcaption>报告随赛季阶段与版本节点推进，分类方向保持一致。</figcaption>
        </figure>

        <div class="cadence-grid__body" data-reveal>
          <p class="cadence-grid__lead">
            报告不会按固定日历发，而是跟着两件事走：赛季阶段切换，以及客户端版本节点。
            阶段开始与结束前后，玩法规则与会员成长两条线的内容会集中出现；
            版本发布前后，版本迭代与回放归档的条目会一起更新。
          </p>
          <ol class="cadence-list">
            <li>
              <span class="cadence-list__k mono">赛季阶段切换</span>
              <span class="cadence-list__v">规则调整、人数区间适用场景、段位进度刻度解读集中更新</span>
            </li>
            <li>
              <span class="cadence-list__k mono">版本节点</span>
              <span class="cadence-list__v">客户端操作位置变化、两端功能对照、安装相关观察同步跟进</span>
            </li>
            <li>
              <span class="cadence-list__k mono">持续跟踪</span>
              <span class="cadence-list__v">回放归档方式与工单响应节奏，按实际运营情况不定期补充</span>
            </li>
          </ol>
          <div class="btn-row">
            <a class="btn btn--primary" href="/download/">获取客户端与教程</a>
            <a class="btn btn--ghost" href="/reach-us/">提交工单咨询</a>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

.page-news {
  display: block;
  padding-bottom: clamp(48px, 8vw, 96px);
  color: var(--text);
  overflow-x: hidden;
}

.page-news .shell {
  width: 100%;
}

/* ---------- Hero ---------- */
.page-news .news-hero {
  position: relative;
  padding: 22px 0 40px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(760px 300px at 92% -20%, rgba(23, 195, 230, .16), transparent 68%),
    radial-gradient(600px 260px at 6% 120%, rgba(225, 29, 46, .12), transparent 70%),
    linear-gradient(158deg, rgba(30, 79, 216, .10) 0%, transparent 58%);
}

.page-news .news-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan) 0%, rgba(23, 195, 230, 0) 42%, rgba(225, 29, 46, .55) 100%);
  opacity: .6;
}

.page-news .news-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

.page-news .news-hero__main .label-micro {
  display: inline-block;
  margin: 0 0 14px;
  color: var(--cyan);
}

.page-news .news-hero h1 {
  margin: 0 0 16px;
  font-size: clamp(28px, 6.4vw, 52px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--text-strong);
  max-width: 20em;
}

.page-news .news-hero__lead {
  margin: 0 0 20px;
  max-width: 40em;
  font-size: 16px;
  line-height: 1.78;
  color: var(--text);
}

.page-news .news-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-news .news-hero__aside {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  clip-path: var(--cut-path);
  align-self: start;
}

.page-news .news-hero__metric {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  padding: 16px 18px;
  background: var(--panel);
}

.page-news .news-hero__value {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-strong);
  letter-spacing: -0.02em;
}

.page-news .news-hero__unit {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--cyan);
}

.page-news .news-hero__metric-label {
  flex: 1 1 100%;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
}

@media (min-width: 900px) {
  .page-news .news-hero {
    padding: 34px 0 56px;
  }
  .page-news .news-hero__grid {
    grid-template-columns: minmax(0, 1.65fr) minmax(240px, .85fr);
    gap: 44px;
    align-items: end;
  }
  .page-news .news-hero__aside {
    margin-bottom: 6px;
  }
}

/* ---------- Blocks ---------- */
.page-news .news-block {
  padding: clamp(36px, 6vw, 68px) 0 0;
}

.page-news .news-block--list {
  padding-top: clamp(30px, 5vw, 54px);
}

.page-news .section-head {
  margin-bottom: 0;
}

/* ---------- Report list ---------- */
.page-news .report-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.page-news .report-item {
  position: relative;
  padding: 22px 0 22px 46px;
  border-bottom: 1px solid var(--line);
  transition: background-color .3s var(--ease);
}

.page-news .report-item::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(35, 44, 56, 0) 0%, var(--line) 18%, var(--line) 82%, rgba(35, 44, 56, 0) 100%);
}

.page-news .report-item__num {
  position: absolute;
  left: 0;
  top: 25px;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--text-dim);
}

.page-news .report-item:hover {
  background: linear-gradient(90deg, rgba(23, 195, 230, .05) 0%, rgba(23, 195, 230, 0) 62%);
}

.page-news .report-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.page-news .report-item__time {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: .04em;
}

.page-news .report-item__title {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}

.page-news .report-item__sum {
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
  color: var(--text);
  max-width: 46em;
}

.page-news .report-item__more {
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
  color: var(--text-dim);
  max-width: 46em;
  overflow: hidden;
}

@media (hover: hover) {
  .page-news .report-item__more {
    max-height: 0;
    opacity: 0;
    transition: max-height .42s var(--ease), opacity .3s var(--ease), margin-top .42s var(--ease);
  }
  .page-news .report-item:hover .report-item__more,
  .page-news .report-item:focus-within .report-item__more {
    max-height: 160px;
    margin-top: 8px;
    opacity: 1;
  }
}

@media (min-width: 960px) {
  .page-news .report-item {
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    gap: 34px;
    padding: 30px 8px 30px 62px;
  }
  .page-news .report-item::before {
    left: 34px;
  }
  .page-news .report-item__num {
    top: 33px;
    left: 4px;
  }
  .page-news .report-item__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 0;
  }
  .page-news .report-item__title {
    font-size: 20px;
  }
}

/* ---------- Figures ---------- */
.page-news .figure {
  margin: 24px 0 0;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  clip-path: var(--cut-path);
  overflow: hidden;
}

.page-news .figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  filter: saturate(.92);
}

.page-news .figure figcaption {
  padding: 12px 16px;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .03em;
  color: var(--text-dim);
  border-top: 1px solid var(--line);
  background: var(--ink-800);
}

/* ---------- Archive arc ---------- */
.page-news .arc {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.page-news .arc__node {
  position: relative;
  padding: 0 0 24px 28px;
  border-left: 1px solid var(--line);
}

.page-news .arc__node::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 5px;
  width: 9px;
  height: 9px;
  transform: translateX(-4px) rotate(45deg);
  background: var(--ink-900);
  border: 1px solid var(--cyan);
}

.page-news .arc__node:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.page-news .arc__range {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-strong);
}

.page-news .arc__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.82;
  color: var(--text-dim);
  max-width: 34em;
}

@media (min-width: 900px) {
  .page-news .arc {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: 30px;
  }
  .page-news .arc__node {
    padding: 32px 22px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .page-news .arc__node::before {
    left: 0;
    top: -5px;
    transform: rotate(45deg);
  }
  .page-news .arc__node:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
  }
}

/* ---------- Callout ---------- */
.page-news .news-callout {
  margin-top: 30px;
  padding: 20px 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  clip-path: var(--cut-path-sm);
}

.page-news .news-callout p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text);
  max-width: 44em;
}

/* ---------- Version compare ---------- */
.page-news .version-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 22px;
}

.page-news .version-card {
  position: relative;
  padding: 22px 20px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  clip-path: var(--cut-path);
}

.page-news .version-card--before {
  background: linear-gradient(170deg, rgba(225, 29, 46, .08) 0%, var(--panel) 46%);
}

.page-news .version-card--after {
  background: linear-gradient(170deg, rgba(23, 195, 230, .12) 0%, var(--panel) 48%);
}

.page-news .version-card__tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 10px;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--text-dim);
  border: 1px solid var(--line);
  background: rgba(5, 8, 12, .55);
}

.page-news .version-card--after .version-card__tag {
  color: var(--cyan);
  border-color: rgba(23, 195, 230, .45);
}

.page-news .version-card__title {
  margin: 0 0 10px;
  font-size: 19px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--text-strong);
}

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

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

.page-news .version-card__list li {
  position: relative;
  padding: 7px 0 7px 18px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-dim);
  border-top: 1px dashed var(--line-soft);
}

.page-news .version-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 6px;
  height: 1px;
  background: var(--text-dim);
}

.page-news .version-card--after .version-card__list li::before {
  background: var(--cyan);
}

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

/* ---------- Prose ---------- */
.page-news .news-block .prose {
  margin-top: 26px;
  max-width: 44em;
}

.page-news .news-block .prose p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text);
}

.page-news .news-block .prose p:last-child {
  margin-bottom: 0;
}

/* ---------- Seat cards ---------- */
.page-news .seats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 26px;
}

.page-news .seat-card {
  position: relative;
  padding: 20px 18px 22px;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-top: 2px solid var(--cyan);
  clip-path: var(--cut-path-sm);
}

.page-news .seat-card:nth-child(4) {
  border-top-color: var(--red);
}

.page-news .seat-card__num {
  display: block;
  margin-bottom: 8px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}

.page-news .seat-card__title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--cyan);
}

.page-news .seat-card:nth-child(4) .seat-card__title {
  color: var(--red);
}

.page-news .seat-card__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-dim);
}

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

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

/* ---------- Cadence ---------- */
.page-news .cadence-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  margin-top: 22px;
}

.page-news .cadence-grid__figure {
  margin-top: 0;
}

.page-news .cadence-grid__lead {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text);
}

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

.page-news .cadence-list li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.page-news .cadence-list__k {
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--gold);
}

.page-news .cadence-list__v {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text);
}

@media (min-width: 860px) {
  .page-news .cadence-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 40px;
    align-items: start;
  }
  .page-news .cadence-list li {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 20px;
    align-items: baseline;
  }
}

/* ---------- Shared component adjustments ---------- */
.page-news .btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-news .btn-row .btn {
  white-space: nowrap;
}

@media (max-width: 480px) {
  .page-news .report-item {
    padding-left: 40px;
  }
  .page-news .report-item::before {
    left: 20px;
  }
  .page-news .btn-row .btn {
    flex: 1 1 100%;
    text-align: center;
  }
}