.page-news {
  --n-gold: #F2B33D;
  --n-cyan: #35E6D0;
  --n-coral: #FF7A6B;
  --n-violet: #B69CFF;
  --n-service: #4D8DFF;
  --n-grid: #26305A;
  --n-surface: #0F1736;
  --n-line-soft: rgba(38, 48, 90, .68);
  position: relative;
  background:
    radial-gradient(760px 380px at 84% -6%, rgba(139, 92, 246, .17), transparent 64%),
    radial-gradient(640px 340px at 2% 1%, rgba(53, 230, 208, .10), transparent 62%);
}

.page-news a {
  color: var(--n-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(53, 230, 208, .38);
  transition: border-color .22s var(--ease), color .22s var(--ease);
}

.page-news a:hover {
  border-bottom-color: var(--n-cyan);
}

.page-news .section-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(22px, 3.4vw, 34px);
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--ink);
  margin: 8px 0 0;
}

.page-news .prose {
  max-width: 42ch;
  font-size: 15px;
  line-height: 1.85;
  color: var(--muted);
}

.page-news .section + .section,
.page-news .section--tight + .section {
  border-top: 1px solid var(--n-line-soft);
}

/* ---------- 首屏 ---------- */
.page-news .news-hero {
  padding-top: clamp(20px, 4vw, 48px);
  padding-bottom: clamp(28px, 5vw, 56px);
}

.page-news .news-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-bottom: 20px;
}

.page-news .news-hero__edition {
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--n-gold);
  border: 1px solid rgba(242, 179, 61, .42);
  padding: 5px 11px;
  white-space: nowrap;
}

.page-news .news-hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 6.2vw, 66px);
  line-height: 1.08;
  letter-spacing: .01em;
  color: var(--ink);
  margin: 0 0 20px;
  max-width: 17em;
}

.page-news .news-hero__lede {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.9;
  color: var(--muted);
  max-width: 44ch;
  margin: 0 0 clamp(24px, 4vw, 36px);
}

.page-news .news-hero__band {
  position: relative;
  margin-top: clamp(4px, 1.5vw, 14px);
}

.page-news .news-hero__band,
.page-news .news-hero__band .media-frame__inner {
  aspect-ratio: 8 / 3;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

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

.page-news .news-hero__band::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  width: 42%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--n-cyan));
  pointer-events: none;
}

/* ---------- 本期看点 ---------- */
.page-news .news-watch {
  padding-top: clamp(28px, 4vw, 44px);
  padding-bottom: clamp(28px, 4vw, 44px);
}

.page-news .news-watch__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  margin-bottom: 22px;
}

.page-news .news-watch__hint {
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--dim);
}

.page-news .news-watch__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--n-line-soft);
  border: 1px solid var(--n-line-soft);
}

.page-news .news-watch__item {
  position: relative;
  background: var(--n-surface);
  padding: 20px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background-color .24s var(--ease);
}

.page-news .news-watch__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 2px;
  background: var(--tone, var(--n-cyan));
}

.page-news .news-watch__item:hover {
  background: #131C3E;
}

.page-news .news-watch__no {
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--tone, var(--n-cyan));
}

.page-news .news-watch__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

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

/* ---------- 版本对照 ---------- */
.page-news .news-compare {
  padding-top: clamp(32px, 5vw, 56px);
  padding-bottom: clamp(32px, 5vw, 56px);
}

.page-news .news-compare__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3vw, 36px);
  align-items: start;
  margin-top: clamp(20px, 3vw, 30px);
}

.page-news .news-compare__intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.page-news .news-compare__intro .prose {
  max-width: 40ch;
  margin: 0;
}

.page-news .news-fork {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: 0;
}

.page-news .news-fork .f-line {
  fill: none;
  stroke-width: 2;
}

.page-news .news-fork .f-line--base {
  stroke: var(--n-service);
}

.page-news .news-fork .f-line--a {
  stroke: var(--n-gold);
}

.page-news .news-fork .f-line--b {
  stroke: var(--n-cyan);
  stroke-dasharray: 7 6;
}

.page-news .news-fork .f-node {
  fill: var(--n-service);
}

.page-news .news-fork .f-node--a {
  fill: var(--n-gold);
}

.page-news .news-fork .f-node--b {
  fill: var(--n-cyan);
}

@media (prefers-reduced-motion: no-preference) {
  .page-news .news-fork .f-line--b {
    animation: news-dash 6s linear infinite;
  }
}

@keyframes news-dash {
  to { stroke-dashoffset: -52; }
}

.page-news .news-compare__figure {
  margin: 0;
  border: 1px solid var(--n-line-soft);
}

.page-news .news-compare__figure .media-frame__inner {
  aspect-ratio: 14 / 9;
  overflow: hidden;
}

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

.page-news .news-table-scroll {
  margin-top: clamp(26px, 4vw, 42px);
  border: 1px solid var(--n-line-soft);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.page-news .news-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 15px;
}

.page-news .news-table caption {
  caption-side: top;
  text-align: left;
  padding: 14px 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--muted);
  border-bottom: 1px solid var(--n-line-soft);
}

.page-news .news-table th,
.page-news .news-table td {
  text-align: left;
  padding: 14px 18px;
  vertical-align: top;
  border-bottom: 1px solid var(--n-line-soft);
  line-height: 1.65;
}

.page-news .news-table thead th {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  font-weight: 500;
  color: var(--muted);
  background: #0C1330;
  white-space: nowrap;
}

.page-news .news-table thead th:nth-child(2) {
  color: var(--n-gold);
}

.page-news .news-table thead th:nth-child(3) {
  color: var(--n-cyan);
}

.page-news .news-table tbody th {
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

.page-news .news-table tbody td {
  color: var(--muted);
}

.page-news .news-table tbody tr:nth-child(odd) {
  background: rgba(15, 23, 54, .6);
}

.page-news .news-table tbody tr:nth-child(even) {
  background: rgba(7, 11, 31, .35);
}

.page-news .news-table tbody tr:hover {
  background: rgba(53, 230, 208, .07);
}

.page-news .news-table tbody tr:last-child th,
.page-news .news-table tbody tr:last-child td {
  border-bottom: none;
}

.page-news .news-diff {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  background: var(--n-coral);
  transform: translateY(-1px);
}

.page-news .news-compare .note {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}

/* ---------- 更新条目 ---------- */
.page-news .news-log-section {
  padding-top: clamp(32px, 5vw, 56px);
  padding-bottom: clamp(32px, 5vw, 56px);
}

.page-news .news-log {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 34px);
  align-items: start;
  margin-top: clamp(20px, 3vw, 30px);
}

.page-news .news-cats__title {
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--dim);
  margin: 0 0 10px;
}

.page-news .news-cats__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-news .news-cats__link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid var(--n-line-soft);
  background: rgba(15, 23, 54, .55);
  color: var(--ink);
  font-size: 14px;
  white-space: nowrap;
  transition: border-color .22s var(--ease), background-color .22s var(--ease);
}

.page-news .news-cats__link:hover {
  border-color: var(--tone, var(--n-cyan));
  background: rgba(19, 28, 62, .9);
}

.page-news .news-cats__dot {
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--tone, var(--n-cyan));
}

.page-news .news-cats__count {
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--dim);
}

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

.page-news .news-group {
  padding: 4px 14px 4px 18px;
  margin-left: -18px;
  margin-bottom: clamp(26px, 4vw, 40px);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}

.page-news .news-group:last-child {
  margin-bottom: 0;
}

.page-news .news-group:target {
  background: linear-gradient(90deg, rgba(53, 230, 208, .09), transparent 74%);
  box-shadow: inset 3px 0 0 var(--n-cyan);
}

.page-news .news-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--n-line-soft);
}

.page-news .news-group__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 17px;
  letter-spacing: .04em;
  color: var(--ink);
  margin: 0;
}

.page-news .news-group__meta {
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--dim);
}

.page-news .news-entry {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--n-line-soft);
  transition: background-color .24s var(--ease);
}

.page-news .news-entry:last-child {
  border-bottom: none;
}

.page-news .news-entry:hover {
  background: rgba(53, 230, 208, .05);
}

.page-news .news-entry__no {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--tone, var(--n-cyan));
  white-space: nowrap;
}

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

.page-news .news-entry__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 5px;
  transition: color .22s var(--ease);
}

.page-news .news-entry:hover .news-entry__title {
  color: var(--n-cyan);
}

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

.page-news .news-entry__time {
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--dim);
  white-space: nowrap;
}

/* ---------- 更新节奏 ---------- */
.page-news .news-cadence {
  padding-top: clamp(32px, 5vw, 56px);
  padding-bottom: clamp(32px, 5vw, 56px);
}

.page-news .news-cadence__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}

.page-news .news-cadence__text .prose {
  margin: 16px 0 0;
  max-width: 44ch;
}

.page-news .news-cadence__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--n-line-soft);
  border: 1px solid var(--n-line-soft);
  margin: clamp(22px, 3vw, 30px) 0 0;
}

.page-news .news-stat {
  background: var(--n-surface);
  padding: 16px 14px 18px;
  margin: 0;
}

.page-news .news-stat__k {
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--dim);
  margin: 0 0 8px;
}

.page-news .news-stat__v {
  font-size: clamp(16px, 2.2vw, 20px);
  letter-spacing: .06em;
  color: var(--n-gold);
  margin: 0;
}

.page-news .news-cadence__figure {
  margin: 0;
  border: 1px solid var(--n-line-soft);
}

.page-news .news-cadence__figure .media-frame__inner {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

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

/* ---------- 往期回看 ---------- */
.page-news .news-archive {
  padding-top: clamp(32px, 5vw, 56px);
  padding-bottom: clamp(36px, 5vw, 64px);
}

.page-news .news-archive__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 34px);
  align-items: center;
}

.page-news .news-archive__intro .prose {
  margin: 14px 0 0;
  max-width: 46ch;
}

.page-news .news-archive__figure {
  margin: 0;
  border: 1px solid var(--n-line-soft);
}

.page-news .news-archive__figure .media-frame__inner {
  aspect-ratio: 5 / 3;
  overflow: hidden;
}

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

.page-news .news-archive__rail {
  margin-top: clamp(24px, 3vw, 34px);
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.page-news .news-archive__card {
  flex: 0 0 min(268px, 76vw);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 20px;
  background: var(--n-surface);
  border: 1px solid var(--n-line-soft);
  border-top: 2px solid var(--tone, var(--n-cyan));
  transition: background-color .24s var(--ease), transform .24s var(--ease);
}

.page-news .news-archive__card:hover {
  background: #131C3E;
}

.page-news .news-archive__no {
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--tone, var(--n-cyan));
}

.page-news .news-archive__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

.page-news .news-archive__time {
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--dim);
  margin: 0;
}

.page-news .news-archive__desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  margin: 6px 0 0;
  max-height: 2.6em;
  overflow: hidden;
  transition: max-height .32s var(--ease);
}

.page-news .news-archive__card:hover .news-archive__desc,
.page-news .news-archive__card:focus-within .news-archive__desc {
  max-height: 8em;
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .page-news .news-watch__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-news .news-entry {
    grid-template-columns: 96px minmax(0, 1fr) auto;
    align-items: baseline;
    padding: 18px 14px;
  }

  .page-news .news-entry__time {
    text-align: right;
  }

  .page-news .news-archive__head {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }
}

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

  .page-news .news-compare__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(28px, 4vw, 52px);
  }

  .page-news .news-log {
    grid-template-columns: 208px minmax(0, 1fr);
    gap: clamp(26px, 3vw, 44px);
  }

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

  .page-news .news-cats__list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    border-top: 1px solid var(--n-line-soft);
  }

  .page-news .news-cats__link {
    border: none;
    border-bottom: 1px solid var(--n-line-soft);
    border-left: 2px solid transparent;
    background: transparent;
    padding: 12px 10px;
    justify-content: flex-start;
  }

  .page-news .news-cats__link:hover {
    border-left-color: var(--tone, var(--n-cyan));
    background: rgba(19, 28, 62, .75);
  }

  .page-news .news-cats__count {
    margin-left: auto;
  }

  .page-news .news-cadence__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(30px, 4vw, 56px);
  }
}

@media (min-width: 1180px) {
  .page-news .news-hero__meta {
    margin-bottom: 26px;
  }

  .page-news .news-entry {
    padding: 20px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .news-watch__item,
  .page-news .news-entry,
  .page-news .news-archive__card,
  .page-news .news-archive__desc,
  .page-news .news-cats__link,
  .page-news .news-group {
    transition: none;
  }

  .page-news .news-fork .f-line--b {
    animation: none;
  }
}
<<<END>>>

<main id="main-content" class="page-news">
  <div class="wrap">
    <nav class="breadcrumb" aria-label="页面位置">
      <a class="breadcrumb__item" href="/">通道首页</a>
      <span class="breadcrumb__item" aria-current="page">更新说明</span>
    </nav>
  </div>

  <section class="section news-hero">
    <div class="wrap">
      <div class="news-hero__meta">
        <span class="eyebrow">更新说明</span>
        <span class="news-hero__edition mono-text">第 12 期 · 本周更新</span>
      </div>
      <h1 class="news-hero__title">两条版本线怎么选，这一页按期说清楚</h1>
      <p class="news-hero__lede">博万游艺的更新说明已经做到第 12 期。两条版本线在功能、入口布局和适配范围上的差异，以及入口调整、规则归档、移动端适配的每一步变化，都记在下面，沿着分类往前翻就能看全。</p>

      <div class="media-frame media-frame--wide news-hero__band">
        <div class="media-frame__inner">
          <img src="{zhanqunpic:h:600w:1600}" width="1600" height="600" alt="金色与冷青光带在深色背景上横向延伸并分叉，形成两条并行的版本线">
        </div>
      </div>
    </div>
  </section>

  <section class="section news-watch" aria-labelledby="watch-title">
    <div class="wrap">
      <div class="news-watch__head">
        <h2 class="section-title" id="watch-title">本期看点</h2>
        <p class="news-watch__hint mono-text">第 12 期 · 4 项变化</p>
      </div>
      <ul class="news-watch__list">
        <li class="news-watch__item" style="--tone: var(--n-cyan)">
          <span class="news-watch__no mono-text">01</span>
          <h3 class="news-watch__title">移动端入口速取卡</h3>
          <p class="news-watch__desc">换机之后按三步走完，验证环节少一次跳转。</p>
        </li>
        <li class="news-watch__item" style="--tone: var(--n-gold)">
          <span class="news-watch__no mono-text">02</span>
          <h3 class="news-watch__title">两条版本线入口布局差异对照</h3>
          <p class="news-watch__desc">首页与栏目页的落点一次看清，不用来回试。</p>
        </li>
        <li class="news-watch__item" style="--tone: var(--n-service)">
          <span class="news-watch__no mono-text">03</span>
          <h3 class="news-watch__title">专区规则分类页重组</h3>
          <p class="news-watch__desc">玩法流程、时段场次、积分权益、争议处理四类各归各位。</p>
        </li>
        <li class="news-watch__item" style="--tone: var(--n-violet)">
          <span class="news-watch__no mono-text">04</span>
          <h3 class="news-watch__title">换机重新登录流程调整</h3>
          <p class="news-watch__desc">确认账号、验证设备、重新进入，步骤提示更明确。</p>
        </li>
      </ul>
    </div>
  </section>

  <section class="section news-compare" aria-labelledby="compare-title">
    <div class="wrap">
      <header class="section-head">
        <p class="eyebrow">版本对照专题</p>
        <h2 class="section-title" id="compare-title">两条版本线，各自适合谁</h2>
      </header>

      <div class="news-compare__grid">
        <div class="news-compare__intro">
          <svg class="news-fork" viewBox="0 0 300 120" role="img" aria-label="两条版本线从同一入口分叉的路径示意">
            <path class="f-line f-line--base" d="M10 60 H112"></path>
            <path class="f-line f-line--a" d="M112 60 C 168 60, 178 24, 240 24"></path>
            <path class="f-line f-line--b" d="M112 60 C 168 60, 178 96, 240 96"></path>
            <circle class="f-node" cx="112" cy="60" r="4"></circle>
            <circle class="f-node f-node--a" cx="240" cy="24" r="4"></circle>
            <circle class="f-node f-node--b" cx="240" cy="96" r="4"></circle>
          </svg>
          <p class="prose">想比两个版本娱乐平台的功能差异，先看下面这张表。左边一列是稳定线，跟着栏目每期同步；右边一列是尝鲜线，迭代一到就先上新入口。两条线共用同一套规则归档，区别主要在功能范围和入口落点。</p>
          <p class="prose">如果你平时只是查规则、回看往期，稳定线足够用；如果喜欢先试新入口、想随时调出版本速查，尝鲜线更顺手。</p>
        </div>

        <figure class="media-frame news-compare__figure">
          <div class="media-frame__inner">
            <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="两条版本线在功能范围与入口布局上的并列对照示意" loading="lazy" decoding="async">
          </div>
        </figure>
      </div>

      <div class="news-table-scroll">
        <table class="news-table">
          <caption>第 12 期版本对照 · 维度逐项拆开</caption>
          <thead>
            <tr>
              <th scope="col">对照维度</th>
              <th scope="col">稳定线</th>
              <th scope="col">尝鲜线</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">功能范围</th>
              <td>入口导航、规则查询、往期回看</td>
              <td><span class="news-diff"></span>再加版本对照速查与更新订阅</td>
            </tr>
            <tr>
              <th scope="row">入口布局</th>
              <td>首页四格入口，栏目纵向排列</td>
              <td><span class="news-diff"></span>首页入口矩阵横向滑动，栏目轨道吸附顶部</td>
            </tr>
            <tr>
              <th scope="row">适配范围</th>
              <td>320px 至 1440px，主流机型全覆盖</td>
              <td>375px 至 1440px，更早期机型建议走稳定线</td>
            </tr>
            <tr>
              <th scope="row">更新节奏</th>
              <td>跟随栏目每周一期同步</td>
              <td><span class="news-diff"></span>遇到迭代先发一期对照专题</td>
            </tr>
            <tr>
              <th scope="row">适合谁</th>
              <td>想一步到位、不想频繁适应新布局</td>
              <td>愿意先试新入口、能接受小幅调整</td>
            </tr>
          </tbody>
        </table>
      </div>

      <p class="note">两条线之间可以来回切换，规则查询与往期回看的内容完全一致，换过去不会丢记录。</p>
    </div>
  </section>

  <section class="section news-log-section" aria-labelledby="log-title">
    <div class="wrap">
      <header class="section-head">
        <p class="eyebrow">更新条目</p>
        <h2 class="section-title" id="log-title">按分类浏览，往前一期一期看</h2>
      </header>

      <div class="news-log">
        <nav class="news-cats" aria-label="按分类浏览">
          <p class="news-cats__title mono-text">按分类浏览</p>
          <ul class="news-cats__list">
            <li>
              <a class="news-cats__link" style="--tone: var(--n-gold)" href="#cat-compare">
                <span class="news-cats__dot" aria-hidden="true"></span>
                <span class="news-cats__label">版本对照</span>
                <span class="news-cats__count mono-text">3 条</span>
              </a>
            </li>
            <li>
              <a class="news-cats__link" style="--tone: var(--n-cyan)" href="#cat-entry">
                <span class="news-cats__dot" aria-hidden="true"></span>
                <span class="news-cats__label">入口调整</span>
                <span class="news-cats__count mono-text">3 条</span>
              </a>
            </li>
            <li>
              <a class="news-cats__link" style="--tone: var(--n-service)" href="#cat-rules">
                <span class="news-cats__dot" aria-hidden="true"></span>
                <span class="news-cats__label">规则归档</span>
                <span class="news-cats__count mono-text">3 条</span>
              </a>
            </li>
            <li>
              <a class="news-cats__link" style="--tone: var(--n-violet)" href="#cat-mobile">
                <span class="news-cats__dot" aria-hidden="true"></span>
                <span class="news-cats__label">移动端适配</span>
                <span class="news-cats__count mono-text">3 条</span>
              </a>
            </li>
          </ul>
        </nav>

        <div class="news-log__body">
          <section class="news-group" id="cat-compare" aria-labelledby="grp-compare">
            <div class="news-group__head">
              <h3 class="news-group__title" id="grp-compare">版本对照</h3>
              <span class="news-group__meta mono-text">两条线差异 · 每期跟进</span>
            </div>
            <article class="news-entry" data-reveal>
              <span class="news-entry__no mono-text" style="--tone: var(--n-gold)">第 12 期</span>
              <div class="news-entry__main">
                <h4 class="news-entry__title">两条版本线入口布局差异对照</h4>
                <p class="news-entry__desc">首页与栏目页的落点逐项列出，选哪条先看这张表。</p>
              </div>
              <span class="news-entry__time mono-text">3 天前</span>
            </article>
            <article class="news-entry" data-reveal>
              <span class="news-entry__no mono-text" style="--tone: var(--n-gold)">第 11 期</span>
              <div class="news-entry__main">
                <h4 class="news-entry__title">版本对照速查卡补上适配范围</h4>
                <p class="news-entry__desc">从窄屏到宽屏的机型覆盖写清楚了，早期机型也有结论。</p>
              </div>
              <span class="news-entry__time mono-text">一周前</span>
            </article>
            <article class="news-entry" data-reveal>
              <span class="news-entry__no mono-text" style="--tone: var(--n-gold)">第 9 期</span>
              <div class="news-entry__main">
                <h4 class="news-entry__title">迭代后入口落点变化说明</h4>
                <p class="news-entry__desc">这次动了哪些入口、老路径还能不能走，一次说清。</p>
              </div>
              <span class="news-entry__time mono-text">三周前</span>
            </article>
          </section>

          <section class="news-group" id="cat-entry" aria-labelledby="grp-entry">
            <div class="news-group__head">
              <h3 class="news-group__title" id="grp-entry">入口调整</h3>
              <span class="news-group__meta mono-text">入口位置与走法变化</span>
            </div>
            <article class="news-entry" data-reveal>
              <span class="news-entry__no mono-text" style="--tone: var(--n-cyan)">第 12 期</span>
              <div class="news-entry__main">
                <h4 class="news-entry__title">移动端入口速取卡上线</h4>
                <p class="news-entry__desc">换机之后按三步走完，验证环节少一次跳转。</p>
              </div>
              <span class="news-entry__time mono-text">3 天前</span>
            </article>
            <article class="news-entry" data-reveal>
              <span class="news-entry__no mono-text" style="--tone: var(--n-cyan)">第 10 期</span>
              <div class="news-entry__main">
                <h4 class="news-entry__title">首页入口矩阵改为横向滑动</h4>
                <p class="news-entry__desc">四个入口在窄屏上不再挤压，左右滑动逐个看。</p>
              </div>
              <span class="news-entry__time mono-text">两周前</span>
            </article>
            <article class="news-entry" data-reveal>
              <span class="news-entry__no mono-text" style="--tone: var(--n-cyan)">第 8 期</span>
              <div class="news-entry__main">
                <h4 class="news-entry__title">栏目轨道在移动端吸附顶部</h4>
                <p class="news-entry__desc">往下滑也能随时切栏目，不用回到页面顶端。</p>
              </div>
              <span class="news-entry__time mono-text">一个月前</span>
            </article>
          </section>

          <section class="news-group" id="cat-rules" aria-labelledby="grp-rules">
            <div class="news-group__head">
              <h3 class="news-group__title" id="grp-rules">规则归档</h3>
              <span class="news-group__meta mono-text">四类规则 · 逐条归位</span>
            </div>
            <article class="news-entry" data-reveal>
              <span class="news-entry__no mono-text" style="--tone: var(--n-service)">第 12 期</span>
              <div class="news-entry__main">
                <h4 class="news-entry__title">专区规则分类页重组</h4>
                <p class="news-entry__desc">玩法流程、时段场次、积分权益、争议处理四类各归各位。</p>
              </div>
              <span class="news-entry__time mono-text">3 天前</span>
            </article>
            <article class="news-entry" data-reveal>
              <span class="news-entry__no mono-text" style="--tone: var(--n-service)">第 11 期</span>
              <div class="news-entry__main">
                <h4 class="news-entry__title">积分口径说明补全</h4>
                <p class="news-entry__desc">往期条目里的积分表述统一到最新一期的说法上。</p>
              </div>
              <span class="news-entry__time mono-text">一周前</span>
            </article>
            <article class="news-entry" data-reveal>
              <span class="news-entry__no mono-text" style="--tone: var(--n-service)">第 7 期</span>
              <div class="news-entry__main">
                <h4 class="news-entry__title">争议处理流程补上图示</h4>
                <p class="news-entry__desc">从提交到回复走哪几步，对着图看一遍就明白。</p>
              </div>
              <span class="news-entry__time mono-text">五周前</span>
            </article>
          </section>

          <section class="news-group" id="cat-mobile" aria-labelledby="grp-mobile">
            <div class="news-group__head">
              <h3 class="news-group__title" id="grp-mobile">移动端适配</h3>
              <span class="news-group__meta mono-text">换机与窄屏表现</span>
            </div>
            <article class="news-entry" data-reveal>
              <span class="news-entry__no mono-text" style="--tone: var(--n-violet)">第 12 期</span>
              <div class="news-entry__main">
                <h4 class="news-entry__title">换机重新登录流程调整</h4>
                <p class="news-entry__desc">确认账号、验证设备、重新进入，三步不变，提示更明确。</p>
              </div>
              <span class="news-entry__time mono-text">3 天前</span>
            </article>
            <article class="news-entry" data-reveal>
              <span class="news-entry__no mono-text" style="--tone: var(--n-violet)">第 10 期</span>
              <div class="news-entry__main">
                <h4 class="news-entry__title">窄屏下对照表改为逐条展开</h4>
                <p class="news-entry__desc">最窄的屏幕上不用左右拖动，纵向读完就行。</p>
              </div>
              <span class="news-entry__time mono-text">两周前</span>
            </article>
            <article class="news-entry" data-reveal>
              <span class="news-entry__no mono-text" style="--tone: var(--n-violet)">第 6 期</span>
              <div class="news-entry__main">
                <h4 class="news-entry__title">登录页验证步骤合并</h4>
                <p class="news-entry__desc">少一次页面跳转，信号不稳时也能顺利走完。</p>
              </div>
              <span class="news-entry__time mono-text">六周前</span>
            </article>
          </section>
        </div>
      </div>
    </div>
  </section>

  <section class="section news-cadence" aria-labelledby="cadence-title">
    <div class="wrap">
      <div class="news-cadence__grid">
        <div class="news-cadence__text">
          <p class="eyebrow">更新节奏</p>
          <h2 class="section-title" id="cadence-title">每周一期，迭代加发对照</h2>
          <p class="prose">栏目固定一周更新一期，遇到版本迭代会额外加发一期对照专题，把两条线的差异单独拆开讲。这一页已经排到第 12 期，品牌的版本迭代累计走过 6 次，每一期的重点都留在条目里。</p>
          <p class="prose">想第一时间拿到新一期，订阅入口放在 <a href="/download/">下载中心</a>，移动端换机之后也能同步看到。如果发现哪条记录和你的实际使用对不上，走 <a href="/feedback/">反馈通道</a> 说一声，工作日当天会有人对接。</p>
          <dl class="news-cadence__stats">
            <div class="news-stat">
              <dt class="news-stat__k mono-text">当前期数</dt>
              <dd class="news-stat__v mono-text">第 12 期</dd>
            </div>
            <div class="news-stat">
              <dt class="news-stat__k mono-text">更新频率</dt>
              <dd class="news-stat__v mono-text">每周 1 期</dd>
            </div>
            <div class="news-stat">
              <dt class="news-stat__k mono-text">版本迭代</dt>
              <dd class="news-stat__v mono-text">6 次</dd>
            </div>
          </dl>
        </div>

        <figure class="media-frame news-cadence__figure">
          <div class="media-frame__inner">
            <img src="{zhanqunpic:h:800w:800}" width="800" height="800" alt="等距刻度与节点组成的环形纹理，用来表示每周一期的更新节奏" loading="lazy" decoding="async">
          </div>
        </figure>
      </div>
    </div>
  </section>

  <section class="section news-archive" aria-labelledby="archive-title">
    <div class="wrap">
      <div class="news-archive__head">
        <div class="news-archive__intro">
          <p class="eyebrow">往期回看</p>
          <h2 class="section-title" id="archive-title">沿着专题线索一路往前</h2>
          <p class="prose">每一期只解决一件小事，连起来就是两条版本线完整的调整过程。想了解品牌整体的服务范围与对接能力，可以顺路看看 <a href="/about-us/">品牌自述</a>；具体规则怎么查，<a href="/support/">支持中心</a> 里按四类分开写好了。</p>
        </div>
        <figure class="media-frame news-archive__figure">
          <div class="media-frame__inner">
            <img src="{zhanqunpic:h:600w:1000}" width="1000" height="600" alt="多层叠放的卡片轮廓在暗色中依次后退的抽象图形" loading="lazy" decoding="async">
          </div>
        </figure>
      </div>

      <div class="rail news-archive__rail" data-rail tabindex="0" role="region" aria-label="往期主题列表，可横向滑动查看">
        <article class="rail__item news-archive__card" style="--tone: var(--n-gold)">
          <span class="news-archive__no mono-text">11</span>
          <h3 class="news-archive__title">积分口径与权益说明补全</h3>
          <p class="news-archive__time mono-text">一周前</p>
          <p class="news-archive__desc">往期条目里的积分说法统一到最新一期的表述，权益范围一并写明。</p>
        </article>
        <article class="rail__item news-archive__card" style="--tone: var(--n-cyan)">
          <span class="news-archive__no mono-text">10</span>
          <h3 class="news-archive__title">首页入口矩阵改版记录</h3>
          <p class="news-archive__time mono-text">两周前</p>
          <p class="news-archive__desc">四个入口从纵向排列改成横向滑动，窄屏上的挤压问题一并解决。</p>
        </article>
        <article class="rail__item news-archive__card" style="--tone: var(--n-gold)">
          <span class="news-archive__no mono-text">09</span>
          <h3 class="news-archive__title">迭代后入口落点变化</h3>
          <p class="news-archive__time mono-text">三周前</p>
          <p class="news-archive__desc">这次迭代动了哪些入口、老路径还能不能走，逐条对照说明。</p>
        </article>
        <article class="rail__item news-archive__card" style="--tone: var(--n-violet)">
          <span class="news-archive__no mono-text">08</span>
          <h3 class="news-archive__title">移动端顶部吸附与加载表现</h3>
          <p class="news-archive__time mono-text">一个月前</p>
          <p class="news-archive__desc">栏目轨道吸附顶部后，长页面里的切换动作少了来回滚动。</p>
        </article>
        <article class="rail__item news-archive__card" style="--tone: var(--n-service)">
          <span class="news-archive__no mono-text">07</span>
          <h3 class="news-archive__title">规则争议处理流程图示</h3>
          <p class="news-archive__time mono-text">五周前</p>
          <p class="news-archive__desc">从提交到回复分成几步走，图上标好每一步该做什么。</p>
        </article>
        <article class="rail__item news-archive__card" style="--tone: var(--n-violet)">
          <span class="news-archive__no mono-text">06</span>
          <h3 class="news-archive__title">登录验证步骤合并说明</h3>
          <p class="news-archive__time mono-text">六周前</p>
          <p class="news-archive__desc">验证环节少跳一次页面，弱网环境下的完成率明显提升。</p>
        </article>
        <article class="rail__item news-archive__card" style="--tone: var(--n-service)">
          <span class="news-archive__no mono-text">05</span>
          <h3 class="news-archive__title">专区规则四类归档上线</h3>
          <p class="news-archive__time mono-text">七周前</p>
          <p class="news-archive__desc">玩法流程、时段场次、积分权益、争议处理四类框架就此定下。</p>
        </article>
      </div>
    </div>
  </section>
</main>


.page-news {
  --n-gold: #F2B33D;
  --n-cyan: #35E6D0;
  --n-coral: #FF7A6B;
  --n-violet: #B69CFF;
  --n-service: #4D8DFF;
  --n-grid: #26305A;
  --n-surface: #0F1736;
  --n-line-soft: rgba(38, 48, 90, .68);
  position: relative;
  background:
    radial-gradient(760px 380px at 84% -6%, rgba(139, 92, 246, .17), transparent 64%),
    radial-gradient(640px 340px at 2% 1%, rgba(53, 230, 208, .10), transparent 62%);
}

.page-news a {
  color: var(--n-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(53, 230, 208, .38);
  transition: border-color .22s var(--ease), color .22s var(--ease);
}

.page-news a:hover {
  border-bottom-color: var(--n-cyan);
}

.page-news .section-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(22px, 3.4vw, 34px);
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--ink);
  margin: 8px 0 0;
}

.page-news .prose {
  max-width: 42ch;
  font-size: 15px;
  line-height: 1.85;
  color: var(--muted);
}

.page-news .section + .section {
  border-top: 1px solid var(--n-line-soft);
}

/* ---------- 首屏 ---------- */
.page-news .news-hero {
  padding-top: clamp(20px, 4vw, 48px);
  padding-bottom: clamp(28px, 5vw, 56px);
}

.page-news .news-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-bottom: 20px;
}

.page-news .news-hero__edition {
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--n-gold);
  border: 1px solid rgba(242, 179, 61, .42);
  padding: 5px 11px;
  white-space: nowrap;
}

.page-news .news-hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 6.2vw, 66px);
  line-height: 1.08;
  letter-spacing: .01em;
  color: var(--ink);
  margin: 0 0 20px;
  max-width: 17em;
}

.page-news .news-hero__lede {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.9;
  color: var(--muted);
  max-width: 44ch;
  margin: 0 0 clamp(24px, 4vw, 36px);
}

.page-news .news-hero__band {
  position: relative;
  margin-top: clamp(4px, 1.5vw, 14px);
}

.page-news .news-hero__band,
.page-news .news-hero__band .media-frame__inner {
  aspect-ratio: 8 / 3;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

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

.page-news .news-hero__band::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  width: 42%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--n-cyan));
  pointer-events: none;
}

/* ---------- 本期看点 ---------- */
.page-news .news-watch {
  padding-top: clamp(28px, 4vw, 44px);
  padding-bottom: clamp(28px, 4vw, 44px);
}

.page-news .news-watch__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  margin-bottom: 22px;
}

.page-news .news-watch__hint {
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--dim);
}

.page-news .news-watch__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--n-line-soft);
  border: 1px solid var(--n-line-soft);
}

.page-news .news-watch__item {
  position: relative;
  background: var(--n-surface);
  padding: 20px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background-color .24s var(--ease);
}

.page-news .news-watch__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 2px;
  background: var(--tone, var(--n-cyan));
}

.page-news .news-watch__item:hover {
  background: #131C3E;
}

.page-news .news-watch__no {
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--tone, var(--n-cyan));
}

.page-news .news-watch__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

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

/* ---------- 版本对照 ---------- */
.page-news .news-compare {
  padding-top: clamp(32px, 5vw, 56px);
  padding-bottom: clamp(32px, 5vw, 56px);
}

.page-news .news-compare__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3vw, 36px);
  align-items: start;
  margin-top: clamp(20px, 3vw, 30px);
}

.page-news .news-compare__intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.page-news .news-compare__intro .prose {
  max-width: 40ch;
  margin: 0;
}

.page-news .news-fork {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: 0;
}

.page-news .news-fork .f-line {
  fill: none;
  stroke-width: 2;
}

.page-news .news-fork .f-line--base {
  stroke: var(--n-service);
}

.page-news .news-fork .f-line--a {
  stroke: var(--n-gold);
}

.page-news .news-fork .f-line--b {
  stroke: var(--n-cyan);
  stroke-dasharray: 7 6;
}

.page-news .news-fork .f-node {
  fill: var(--n-service);
}

.page-news .news-fork .f-node--a {
  fill: var(--n-gold);
}

.page-news .news-fork .f-node--b {
  fill: var(--n-cyan);
}

@media (prefers-reduced-motion: no-preference) {
  .page-news .news-fork .f-line--b {
    animation: news-dash 6s linear infinite;
  }
}

@keyframes news-dash {
  to { stroke-dashoffset: -52; }
}

.page-news .news-compare__figure {
  margin: 0;
  border: 1px solid var(--n-line-soft);
}

.page-news .news-compare__figure .media-frame__inner {
  aspect-ratio: 14 / 9;
  overflow: hidden;
}

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

.page-news .news-table-scroll {
  margin-top: clamp(26px, 4vw, 42px);
  border: 1px solid var(--n-line-soft);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.page-news .news-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 15px;
}

.page-news .news-table caption {
  caption-side: top;
  text-align: left;
  padding: 14px 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--muted);
  border-bottom: 1px solid var(--n-line-soft);
}

.page-news .news-table th,
.page-news .news-table td {
  text-align: left;
  padding: 14px 18px;
  vertical-align: top;
  border-bottom: 1px solid var(--n-line-soft);
  line-height: 1.65;
}

.page-news .news-table thead th {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  font-weight: 500;
  color: var(--muted);
  background: #0C1330;
  white-space: nowrap;
}

.page-news .news-table thead th:nth-child(2) {
  color: var(--n-gold);
}

.page-news .news-table thead th:nth-child(3) {
  color: var(--n-cyan);
}

.page-news .news-table tbody th {
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

.page-news .news-table tbody td {
  color: var(--muted);
}

.page-news .news-table tbody tr:nth-child(odd) {
  background: rgba(15, 23, 54, .6);
}

.page-news .news-table tbody tr:nth-child(even) {
  background: rgba(7, 11, 31, .35);
}

.page-news .news-table tbody tr:hover {
  background: rgba(53, 230, 208, .07);
}

.page-news .news-table tbody tr:last-child th,
.page-news .news-table tbody tr:last-child td {
  border-bottom: none;
}

.page-news .news-diff {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  background: var(--n-coral);
  transform: translateY(-1px);
}

.page-news .news-compare .note {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}

/* ---------- 更新条目 ---------- */
.page-news .news-log-section {
  padding-top: clamp(32px, 5vw, 56px);
  padding-bottom: clamp(32px, 5vw, 56px);
}

.page-news .news-log {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 34px);
  align-items: start;
  margin-top: clamp(20px, 3vw, 30px);
}

.page-news .news-cats__title {
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--dim);
  margin: 0 0 10px;
}

.page-news .news-cats__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-news .news-cats__link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid var(--n-line-soft);
  background: rgba(15, 23, 54, .55);
  color: var(--ink);
  font-size: 14px;
  white-space: nowrap;
  transition: border-color .22s var(--ease), background-color .22s var(--ease);
}

.page-news .news-cats__link:hover {
  border-color: var(--tone, var(--n-cyan));
  background: rgba(19, 28, 62, .9);
}

.page-news .news-cats__dot {
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--tone, var(--n-cyan));
}

.page-news .news-cats__count {
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--dim);
}

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

.page-news .news-group {
  padding: 4px 14px 4px 18px;
  margin-left: -18px;
  margin-bottom: clamp(26px, 4vw, 40px);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}

.page-news .news-group:last-child {
  margin-bottom: 0;
}

.page-news .news-group:target {
  background: linear-gradient(90deg, rgba(53, 230, 208, .09), transparent 74%);
  box-shadow: inset 3px 0 0 var(--n-cyan);
}

.page-news .news-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--n-line-soft);
}

.page-news .news-group__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 17px;
  letter-spacing: .04em;
  color: var(--ink);
  margin: 0;
}

.page-news .news-group__meta {
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--dim);
}

.page-news .news-entry {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--n-line-soft);
  transition: background-color .24s var(--ease);
}

.page-news .news-entry:last-child {
  border-bottom: none;
}

.page-news .news-entry:hover {
  background: rgba(53, 230, 208, .05);
}

.page-news .news-entry__no {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--tone, var(--n-cyan));
  white-space: nowrap;
}

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

.page-news .news-entry__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 5px;
  transition: color .22s var(--ease);
}

.page-news .news-entry:hover .news-entry__title {
  color: var(--n-cyan);
}

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

.page-news .news-entry__time {
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--dim);
  white-space: nowrap;
}

/* ---------- 更新节奏 ---------- */
.page-news .news-cadence {
  padding-top: clamp(32px, 5vw, 56px);
  padding-bottom: clamp(32px, 5vw, 56px);
}

.page-news .news-cadence__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}

.page-news .news-cadence__text .prose {
  margin: 16px 0 0;
  max-width: 44ch;
}

.page-news .news-cadence__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--n-line-soft);
  border: 1px solid var(--n-line-soft);
  margin: clamp(22px, 3vw, 30px) 0 0;
}

.page-news .news-stat {
  background: var(--n-surface);
  padding: 16px 14px 18px;
  margin: 0;
}

.page-news .news-stat__k {
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--dim);
  margin: 0 0 8px;
}

.page-news .news-stat__v {
  font-size: clamp(16px, 2.2vw, 20px);
  letter-spacing: .06em;
  color: var(--n-gold);
  margin: 0;
}

.page-news .news-cadence__figure {
  margin: 0;
  border: 1px solid var(--n-line-soft);
}

.page-news .news-cadence__figure .media-frame__inner {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

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

/* ---------- 往期回看 ---------- */
.page-news .news-archive {
  padding-top: clamp(32px, 5vw, 56px);
  padding-bottom: clamp(36px, 5vw, 64px);
}

.page-news .news-archive__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 34px);
  align-items: center;
}

.page-news .news-archive__intro .prose {
  margin: 14px 0 0;
  max-width: 46ch;
}

.page-news .news-archive__figure {
  margin: 0;
  border: 1px solid var(--n-line-soft);
}

.page-news .news-archive__figure .media-frame__inner {
  aspect-ratio: 5 / 3;
  overflow: hidden;
}

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

.page-news .news-archive__rail {
  margin-top: clamp(24px, 3vw, 34px);
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.page-news .news-archive__card {
  flex: 0 0 min(268px, 76vw);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 20px;
  background: var(--n-surface);
  border: 1px solid var(--n-line-soft);
  border-top: 2px solid var(--tone, var(--n-cyan));
  transition: background-color .24s var(--ease);
}

.page-news .news-archive__card:hover {
  background: #131C3E;
}

.page-news .news-archive__no {
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--tone, var(--n-cyan));
}

.page-news .news-archive__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

.page-news .news-archive__time {
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--dim);
  margin: 0;
}

.page-news .news-archive__desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  margin: 6px 0 0;
  max-height: 2.6em;
  overflow: hidden;
  transition: max-height .32s var(--ease);
}

.page-news .news-archive__card:hover .news-archive__desc,
.page-news .news-archive__card:focus-within .news-archive__desc {
  max-height: 8em;
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .page-news .news-watch__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-news .news-entry {
    grid-template-columns: 96px minmax(0, 1fr) auto;
    align-items: baseline;
    padding: 18px 14px;
  }

  .page-news .news-entry__time {
    text-align: right;
  }

  .page-news .news-archive__head {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }
}

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

  .page-news .news-compare__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(28px, 4vw, 52px);
  }

  .page-news .news-log {
    grid-template-columns: 208px minmax(0, 1fr);
    gap: clamp(26px, 3vw, 44px);
  }

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

  .page-news .news-cats__list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    border-top: 1px solid var(--n-line-soft);
  }

  .page-news .news-cats__link {
    border: none;
    border-bottom: 1px solid var(--n-line-soft);
    border-left: 2px solid transparent;
    background: transparent;
    padding: 12px 10px;
  }

  .page-news .news-cats__link:hover {
    border-left-color: var(--tone, var(--n-cyan));
    background: rgba(19, 28, 62, .75);
  }

  .page-news .news-cats__count {
    margin-left: auto;
  }

  .page-news .news-cadence__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(30px, 4vw, 56px);
  }
}

@media (min-width: 1180px) {
  .page-news .news-hero__meta {
    margin-bottom: 26px;
  }

  .page-news .news-entry {
    padding: 20px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .news-watch__item,
  .page-news .news-entry,
  .page-news .news-archive__card,
  .page-news .news-archive__desc,
  .page-news .news-cats__link,
  .page-news .news-group {
    transition: none;
  }

  .page-news .news-fork .f-line--b {
    animation: none;
  }
}
<<<END>>>