.page-news {
  --news-c-login: var(--jz-vermillion);
  --news-c-device: var(--jz-celadon);
  --news-c-fav: var(--jz-amber);
  --news-c-notice: var(--jz-mint-text);
  --news-c-sec: var(--jz-warm);
  --news-c-fix: #8FA8E8;
  --news-line-x: 6px;
  --news-content-x: 30px;
  background: var(--jz-ink-deep);
  color: var(--jz-paper);
  display: block;
  overflow-x: clip;
}

.page-news .jz-path {
  padding-top: var(--jz-step-24);
}

/* ---------- 首屏 ---------- */
.page-news .news-hero {
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(43, 64, 122, .75) 0%, rgba(14, 27, 60, 0) 62%),
    var(--jz-ink-deep);
  padding: var(--jz-step-24) 0 var(--jz-step-64);
}

.page-news .news-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--jz-step-24);
  align-items: center;
}

.page-news .news-hero__title {
  margin: var(--jz-step-14) 0 var(--jz-step-20);
  font-family: var(--jz-font-head);
  font-weight: 900;
  font-size: clamp(2.4rem, 9vw, var(--jz-step-96));
  line-height: .98;
  letter-spacing: -.02em;
  color: var(--jz-paper);
}

.page-news .news-hero__lede {
  max-width: 34ch;
  color: var(--jz-warm);
}

.page-news .news-hero__facts {
  list-style: none;
  margin: var(--jz-step-24) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--jz-step-20);
}

.page-news .news-hero__fact {
  display: inline-flex;
  align-items: baseline;
  gap: .35em;
  padding: .45rem .9rem;
  border: 1px solid var(--jz-hair);
  border-radius: 999px;
  background: rgba(24, 42, 85, .56);
}

.page-news .news-hero__num {
  font-family: var(--jz-font-mono);
  font-size: var(--jz-step-20);
  color: var(--jz-vermillion);
  letter-spacing: .02em;
}

.page-news .news-hero__unit {
  font-size: var(--jz-step-14);
  color: var(--jz-warm);
}

.page-news .news-hero__figure {
  margin: 0;
  border-radius: var(--jz-radius);
  overflow: hidden;
  border: 1px solid var(--jz-hair);
  background: var(--jz-ink-night);
}

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

/* ---------- 最新一条 ---------- */
.page-news .news-latest {
  background: var(--jz-paper);
  color: var(--jz-black);
  padding: var(--jz-step-64) 0;
}

.page-news .jz-eyebrow.news-eyebrow--ink {
  color: var(--jz-vermillion);
}

.page-news .news-latest__head {
  margin-bottom: var(--jz-step-24);
}

.page-news .news-latest__heading {
  color: var(--jz-black);
  margin: var(--jz-step-14) 0 0;
}

.page-news .news-latest__card {
  background: var(--jz-ink-deep);
  color: var(--jz-paper);
  border: 1px solid rgba(10, 14, 26, .12);
  box-shadow: var(--jz-shadow-lift);
  padding: var(--jz-step-24);
  display: grid;
  gap: var(--jz-step-20);
  overflow: hidden;
}

.page-news .news-latest__stamp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--jz-step-14);
  padding-bottom: var(--jz-step-20);
  border-bottom: 1px dashed var(--jz-hair-strong);
}

.page-news .news-latest__time {
  font-family: var(--jz-font-mono);
  font-size: var(--jz-step-14);
  color: var(--jz-text-amber, var(--jz-amber));
}

.page-news .news-latest__title {
  margin: var(--jz-step-14) 0;
  color: var(--jz-paper);
  font-size: clamp(1.4rem, 5vw, var(--jz-step-40));
  line-height: 1.2;
}

.page-news .news-latest__text {
  margin: 0 0 var(--jz-step-20);
  max-width: 46ch;
  color: var(--jz-warm);
}

.page-news .news-latest__meta {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--jz-step-14);
  padding: var(--jz-step-20) 0 0;
  border-top: 1px solid var(--jz-hair);
}

.page-news .news-latest__metaitem dt {
  font-size: var(--jz-step-14);
  letter-spacing: .04em;
  color: var(--jz-celadon);
  margin-bottom: .2em;
}

.page-news .news-latest__metaitem dd {
  margin: 0;
  color: var(--jz-paper);
  font-size: var(--jz-step-17);
}

.page-news .news-latest__link {
  margin: var(--jz-step-24) 0 0;
}

/* ---------- 时间轴 ---------- */
.page-news .news-stream {
  background:
    linear-gradient(180deg, rgba(24, 42, 85, .55) 0%, rgba(14, 27, 60, 0) 30%),
    var(--jz-ink-deep);
  padding: var(--jz-step-64) 0;
}

.page-news .news-stream__head {
  margin-bottom: var(--jz-step-24);
}

.page-news .news-stream__heading {
  color: var(--jz-paper);
  margin: var(--jz-step-14) 0 var(--jz-step-14);
}

.page-news .news-stream__note {
  color: var(--jz-warm);
  max-width: 42ch;
}

/* 筛选条 */
.page-news .news-filter {
  margin: var(--jz-step-24) 0 var(--jz-step-40);
  padding: var(--jz-step-20);
  border: 1px solid var(--jz-hair);
  border-radius: var(--jz-radius);
  background: rgba(43, 64, 122, .34);
  display: grid;
  gap: var(--jz-step-14);
}

.page-news .news-filter__figure {
  margin: 0 0 var(--jz-step-14);
  border-radius: var(--jz-radius-sm);
  overflow: hidden;
  background: var(--jz-ink-night);
}

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

.page-news .news-filter__label {
  margin: 0;
  font-family: var(--jz-font-head);
  font-size: var(--jz-step-14);
  letter-spacing: .14em;
  color: var(--jz-celadon);
}

.page-news .news-filter__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

/* 标签 */
.page-news .news-tag {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .3rem .75rem;
  border-radius: 999px;
  font-family: var(--jz-font-head);
  font-size: var(--jz-step-14);
  line-height: 1.5;
  text-decoration: none;
  border: 1px solid currentColor;
  background: rgba(10, 14, 26, .32);
  transition: background-color 180ms var(--jz-ease), color 180ms var(--jz-ease), transform 180ms var(--jz-ease);
}

.page-news a.news-tag:hover,
.page-news a.news-tag:focus-visible {
  background: currentColor;
  transform: translateY(-2px);
}

.page-news a.news-tag:hover span,
.page-news a.news-tag:focus-visible span {
  color: var(--jz-ink-deep);
}

.page-news a.news-tag:hover,
.page-news a.news-tag:focus-visible {
  color: inherit;
}

.page-news .news-tag--login { color: var(--news-c-login); }
.page-news .news-tag--device { color: var(--news-c-device); }
.page-news .news-tag--fav { color: var(--news-c-fav); }
.page-news .news-tag--notice { color: var(--news-c-notice); }
.page-news .news-tag--sec { color: var(--news-c-sec); }
.page-news .news-tag--fix { color: var(--news-c-fix); }

.page-news a.news-tag {
  background: rgba(10, 14, 26, .32);
  transition: background-color 180ms var(--jz-ease), transform 180ms var(--jz-ease), box-shadow 180ms var(--jz-ease);
}

.page-news a.news-tag:hover,
.page-news a.news-tag:focus-visible {
  background: rgba(246, 243, 236, .14);
  box-shadow: 0 0 0 1px currentColor inset;
}

/* 时间线主体 */
.page-news .news-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.page-news .news-timeline::before {
  content: "";
  position: absolute;
  left: var(--news-line-x);
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--jz-glass) 0%, rgba(43, 64, 122, .28) 100%);
}

.page-news .news-item {
  position: relative;
  padding: 0 0 var(--jz-step-24) var(--news-content-x);
  margin: 0;
}

.page-news .news-item::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--jz-glass);
  box-shadow: 0 0 0 4px var(--jz-ink-deep);
  z-index: 1;
  transition: background-color 200ms var(--jz-ease), transform 200ms var(--jz-ease);
}

.page-news .news-item[data-state="current"]::before {
  background: var(--jz-vermillion);
  transform: scale(1.15);
  box-shadow: 0 0 0 4px var(--jz-ink-deep), 0 0 0 8px rgba(242, 98, 46, .22);
}

.page-news .news-item:hover::before {
  background: var(--jz-amber);
}

.page-news .news-item__stamp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--jz-step-14);
  margin-bottom: .5rem;
}

.page-news .news-item__time {
  font-family: var(--jz-font-mono);
  font-size: var(--jz-step-14);
  color: var(--jz-warm);
  letter-spacing: .02em;
}

.page-news .news-item__title {
  margin: .5rem 0 .4rem;
  color: var(--jz-paper);
  font-size: var(--jz-step-20);
  line-height: 1.35;
}

.page-news .news-item__desc {
  margin: 0;
  max-width: 46ch;
  color: var(--jz-warm);
  font-size: var(--jz-step-17);
}

.page-news .news-item:hover .news-item__title {
  color: var(--jz-amber);
}

.page-news .news-stream__foot {
  margin: var(--jz-step-24) 0 0;
  padding-top: var(--jz-step-20);
  border-top: 1px dashed var(--jz-hair);
  color: var(--jz-warm);
}

.page-news .news-inline-link {
  color: var(--jz-celadon);
  text-decoration: none;
  border-bottom: 1px solid rgba(47, 179, 155, .55);
  transition: color 180ms var(--jz-ease), border-color 180ms var(--jz-ease);
}

.page-news .news-inline-link:hover,
.page-news .news-inline-link:focus-visible {
  color: var(--jz-amber);
  border-bottom-color: var(--jz-amber);
}

/* ---------- 如何查看版本 ---------- */
.page-news .news-howto {
  background: var(--jz-paper);
  color: var(--jz-black);
  padding: var(--jz-step-64) 0;
}

.page-news .news-howto__heading {
  color: var(--jz-black);
  margin: var(--jz-step-14) 0 0;
}

.page-news .news-howto__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--jz-step-24);
  margin-top: var(--jz-step-24);
}

.page-news .news-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: news-step;
  display: grid;
  gap: var(--jz-step-20);
}

.page-news .news-step {
  position: relative;
  padding: var(--jz-step-20) var(--jz-step-20) var(--jz-step-20) 4.2rem;
  border-radius: var(--jz-radius);
  background: #FFFFFF;
  border: 1px solid rgba(10, 14, 26, .1);
  box-shadow: 0 12px 28px -22px rgba(10, 14, 26, .55);
  transition: transform 200ms var(--jz-ease), box-shadow 200ms var(--jz-ease);
}

.page-news .news-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -24px rgba(10, 14, 26, .7);
}

.page-news .news-step__num {
  position: absolute;
  left: var(--jz-step-20);
  top: var(--jz-step-20);
  font-family: var(--jz-font-mono);
  font-size: var(--jz-step-24);
  color: var(--jz-vermillion);
  letter-spacing: .02em;
  line-height: 1;
}

.page-news .news-step__title {
  margin: 0 0 .4rem;
  color: var(--jz-black);
  font-size: var(--jz-step-20);
}

.page-news .news-step__desc {
  margin: 0;
  color: #3A3F4C;
  font-size: var(--jz-step-17);
}

.page-news .news-howto__figure {
  margin: 0;
  border-radius: var(--jz-radius);
  overflow: hidden;
  background: var(--jz-ink-night);
  border: 1px solid rgba(10, 14, 26, .12);
  padding: var(--jz-step-20);
}

.page-news .news-howto__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  border-radius: var(--jz-radius-sm);
}

.page-news .news-howto__figure .jz-figure__caption {
  margin-top: var(--jz-step-14);
  color: var(--jz-warm);
  font-size: var(--jz-step-14);
}

/* ---------- 归档 ---------- */
.page-news .news-archive {
  background:
    radial-gradient(110% 80% at 8% 4%, rgba(47, 179, 155, .16) 0%, rgba(14, 27, 60, 0) 60%),
    var(--jz-ink-night);
  padding: var(--jz-step-64) 0;
}

.page-news .news-archive__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--jz-step-40);
  align-items: center;
}

.page-news .news-archive__heading {
  color: var(--jz-paper);
  margin: var(--jz-step-14) 0 var(--jz-step-20);
}

.page-news .news-archive__copy p {
  color: var(--jz-warm);
  max-width: 46ch;
  margin: 0 0 var(--jz-step-20);
}

.page-news .news-archive__points {
  list-style: none;
  margin: 0 0 var(--jz-step-24);
  padding: 0;
  display: grid;
  gap: .7rem;
}

.page-news .news-archive__points li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--jz-paper);
  font-size: var(--jz-step-17);
}

.page-news .news-archive__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--jz-celadon);
  transform: rotate(45deg);
}

.page-news .news-archive__cta {
  margin: var(--jz-step-24) 0 0;
}

.page-news .news-archive__figure {
  margin: 0;
  border-radius: var(--jz-radius);
  overflow: hidden;
  border: 1px solid var(--jz-hair);
  background: var(--jz-ink-deep);
  box-shadow: var(--jz-shadow);
}

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

/* ---------- 呼吸与节奏 ---------- */
.page-news .news-hero,
.page-news .news-latest,
.page-news .news-stream,
.page-news .news-howto,
.page-news .news-archive {
  scroll-margin-top: calc(var(--jz-header-h) + 12px);
}

/* ---------- 中等宽度 ---------- */
@media (min-width: 768px) {
  .page-news {
    --news-content-x: 46px;
    --news-line-x: 16px;
  }

  .page-news .news-hero {
    padding: var(--jz-step-40) 0 var(--jz-step-96);
  }

  .page-news .news-hero__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: var(--jz-step-40);
  }

  .page-news .news-item::before {
    left: 11px;
    top: 12px;
  }

  .page-news .news-item__title {
    font-size: var(--jz-step-24);
  }

  .page-news .news-latest__card {
    padding: var(--jz-step-40);
    grid-template-columns: minmax(0, 1fr);
  }

  .page-news .news-latest__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--jz-step-24);
  }

  .page-news .news-filter {
    padding: var(--jz-step-20) var(--jz-step-24) var(--jz-step-24);
  }

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

  .page-news .news-archive__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  }
}

/* ---------- 桌面 ---------- */
@media (min-width: 1024px) {
  .page-news {
    --news-content-x: 0px;
    --news-line-x: 110px;
  }

  .page-news .news-hero__title {
    line-height: .94;
  }

  .page-news .news-timeline::before {
    top: 18px;
    bottom: 18px;
  }

  .page-news .news-item {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    column-gap: 48px;
    padding-left: 0;
    padding-bottom: var(--jz-step-40);
  }

  .page-news .news-item::before {
    left: 104px;
    top: 14px;
  }

  .page-news .news-item__stamp {
    grid-column: 1;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
    margin-bottom: 0;
    text-align: right;
  }

  .page-news .news-item__body {
    grid-column: 2;
    padding-bottom: var(--jz-step-14);
    border-bottom: 1px solid rgba(43, 64, 122, .5);
  }

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

  .page-news .news-howto__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: var(--jz-step-40);
    align-items: start;
  }

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

  .page-news .news-archive__inner {
    gap: var(--jz-step-64);
  }
}

/* ---------- 减少动态 ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-news .news-tag,
  .page-news .news-item::before,
  .page-news .news-step,
  .page-news a.news-tag {
    transition-duration: 90ms;
  }

  .page-news .news-step:hover,
  .page-news a.news-tag:hover,
  .page-news a.news-tag:focus-visible {
    transform: none;
  }
}


<main id="main-content" class="page-news">
  <div class="jz-container">
    <nav class="jz-path" aria-label="当前位置">
      <ol class="jz-path__list">
        <li class="jz-path__item"><a class="jz-path__link" href="/">首页</a></li>
        <li class="jz-path__item"><a class="jz-path__link" href="/updates/" aria-current="page">更新公告</a></li>
      </ol>
    </nav>
  </div>

  <section class="news-hero">
    <div class="jz-container news-hero__inner">
      <div class="news-hero__copy">
        <p class="jz-eyebrow">版本记录</p>
        <h1 class="jz-display news-hero__title">九洲CN更新公告</h1>
        <p class="jz-lede news-hero__lede">近 30 天发布 12 条版本记录。哪一条动到你正在用的功能、要不要动手处理，扫一眼就能判断。</p>
        <ul class="news-hero__facts">
          <li class="news-hero__fact"><span class="jz-mono news-hero__num">30</span><span class="news-hero__unit">天</span></li>
          <li class="news-hero__fact"><span class="jz-mono news-hero__num">12</span><span class="news-hero__unit">条记录</span></li>
          <li class="news-hero__fact"><span class="jz-mono news-hero__num">260</span><span class="news-hero__unit">条累计</span></li>
        </ul>
      </div>
      <figure class="jz-figure news-hero__figure">
        <img src="{zhanqunpic:h:820w:1400}" width="1400" height="820" alt="垂直轴线串联多个节点与徽章的抽象时间轴图形">
      </figure>
    </div>
  </section>

  <section class="news-latest">
    <div class="jz-container">
      <div class="news-latest__head">
        <p class="jz-eyebrow news-eyebrow--ink">最新一条</p>
        <h2 class="jz-h2 news-latest__heading">刚刚放出的改动，先看这条</h2>
      </div>

      <article class="jz-card news-latest__card">
        <div class="news-latest__stamp">
          <span class="jz-chip jz-chip--version">v3.8.2</span>
          <span class="jz-mono news-latest__time">2 小时前</span>
        </div>
        <div class="news-latest__body">
          <span class="news-tag news-tag--login">账号与登录</span>
          <h3 class="jz-h3 news-latest__title">登录态续期更稳，不再被中途退出</h3>
          <p class="news-latest__text">挂着页面去处理别的事，回来照常继续，不用重新走一遍身份校验。桌面端已全量生效，手机端下次打开时自动更新到这一版。</p>
          <dl class="news-latest__meta">
            <div class="news-latest__metaitem">
              <dt>影响范围</dt>
              <dd>所有已登录用户</dd>
            </div>
            <div class="news-latest__metaitem">
              <dt>需要操作</dt>
              <dd>不需要，打开即生效</dd>
            </div>
          </dl>
          <p class="news-latest__link"><a class="jz-btn jz-btn--ghost" href="/tutorial/">去帮助中心看登录说明</a></p>
        </div>
      </article>
    </div>
  </section>

  <section class="news-stream">
    <div class="jz-container">
      <div class="news-stream__head">
        <p class="jz-eyebrow">近 30 天</p>
        <h2 class="jz-h2 news-stream__heading">改动一条条排在这根线上</h2>
        <p class="jz-note news-stream__note">每条一到两行讲完，按时间倒序排列。想只看某一类，点下面的标签直接跳过去。</p>
      </div>

      <div class="news-filter" data-reveal>
        <figure class="jz-figure news-filter__figure">
          <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="六个不同轮廓的几何标签图标横向排列" loading="lazy" decoding="async">
        </figure>
        <p class="news-filter__label">按类别定位</p>
        <ul class="news-filter__list">
          <li><a class="news-tag news-tag--login" href="#tl-login">账号与登录</a></li>
          <li><a class="news-tag news-tag--device" href="#tl-device">设备切换</a></li>
          <li><a class="news-tag news-tag--fav" href="#tl-fav">收藏同步</a></li>
          <li><a class="news-tag news-tag--notice" href="#tl-notice">版本公告</a></li>
          <li><a class="news-tag news-tag--sec" href="#tl-sec">权限与安全</a></li>
          <li><a class="news-tag news-tag--fix" href="#tl-fix">自助排查</a></li>
        </ul>
      </div>

      <ol class="news-timeline">
        <li class="news-item" id="tl-login" data-state="current" data-reveal>
          <div class="news-item__stamp">
            <span class="jz-chip jz-chip--version">v3.8.2</span>
            <span class="jz-mono news-item__time">2 小时前</span>
          </div>
          <div class="news-item__body">
            <span class="news-tag news-tag--login">账号与登录</span>
            <h3 class="jz-h3 news-item__title">优化登录态续期</h3>
            <p class="news-item__desc">长时间挂着页面不再被强制退出，切回标签页后继续原来的操作。</p>
          </div>
        </li>

        <li class="news-item" id="tl-fav" data-reveal>
          <div class="news-item__stamp">
            <span class="jz-chip jz-chip--version">v3.8.1</span>
            <span class="jz-mono news-item__time">昨天</span>
          </div>
          <div class="news-item__body">
            <span class="news-tag news-tag--fav">收藏同步</span>
            <h3 class="jz-h3 news-item__title">修复收藏重名同步冲突</h3>
            <p class="news-item__desc">两台设备上的同名胶囊不再互相覆盖，冲突时以最近一次编辑为准。</p>
          </div>
        </li>

        <li class="news-item" id="tl-device" data-reveal>
          <div class="news-item__stamp">
            <span class="jz-chip jz-chip--version">v3.8.0</span>
            <span class="jz-mono news-item__time">3 天前</span>
          </div>
          <div class="news-item__body">
            <span class="news-tag news-tag--device">设备切换</span>
            <h3 class="jz-h3 news-item__title">缩短换机身份校验耗时</h3>
            <p class="news-item__desc">换设备重新登录的完整流程平均 90 秒，比上一版少了一道确认。</p>
          </div>
        </li>

        <li class="news-item" id="tl-sec" data-reveal>
          <div class="news-item__stamp">
            <span class="jz-chip jz-chip--version">v3.7.9</span>
            <span class="jz-mono news-item__time">5 天前</span>
          </div>
          <div class="news-item__body">
            <span class="news-tag news-tag--sec">权限与安全</span>
            <h3 class="jz-h3 news-item__title">新增管理员二次确认开关</h3>
            <p class="news-item__desc">批量调整角色前会多弹一次确认，管理员可自行决定是否开启。</p>
          </div>
        </li>

        <li class="news-item" id="tl-fix" data-reveal>
          <div class="news-item__stamp">
            <span class="jz-chip jz-chip--version">v3.7.8</span>
            <span class="jz-mono news-item__time">6 天前</span>
          </div>
          <div class="news-item__body">
            <span class="news-tag news-tag--fix">自助排查</span>
            <h3 class="jz-h3 news-item__title">补充换机类自助解答 12 条</h3>
            <p class="news-item__desc">帮助中心换机相关条目增加到 12 条，覆盖新旧机型迁移的常见卡点。</p>
          </div>
        </li>

        <li class="news-item" id="tl-notice" data-reveal>
          <div class="news-item__stamp">
            <span class="jz-chip jz-chip--version">v3.7.7</span>
            <span class="jz-mono news-item__time">8 天前</span>
          </div>
          <div class="news-item__body">
            <span class="news-tag news-tag--notice">版本公告</span>
            <h3 class="jz-h3 news-item__title">调整公告列表的版本号位置</h3>
            <p class="news-item__desc">版本号移到条目左侧，扫读时不用再横着找。</p>
          </div>
        </li>

        <li class="news-item" data-reveal>
          <div class="news-item__stamp">
            <span class="jz-chip jz-chip--version">v3.7.6</span>
            <span class="jz-mono news-item__time">10 天前</span>
          </div>
          <div class="news-item__body">
            <span class="news-tag news-tag--login">账号与登录</span>
            <h3 class="jz-h3 news-item__title">支持手机号快速找回密码</h3>
            <p class="news-item__desc">忘记密码时，验证手机号后可以直接重设，不用再走邮箱确认。</p>
          </div>
        </li>

        <li class="news-item" data-reveal>
          <div class="news-item__stamp">
            <span class="jz-chip jz-chip--version">v3.7.5</span>
            <span class="jz-mono news-item__time">12 天前</span>
          </div>
          <div class="news-item__body">
            <span class="news-tag news-tag--fav">收藏同步</span>
            <h3 class="jz-h3 news-item__title">明确收藏胶囊上限为 12 个</h3>
            <p class="news-item__desc">超过 12 个时给出提示，并支持自定义命名与调整排序。</p>
          </div>
        </li>

        <li class="news-item" data-reveal>
          <div class="news-item__stamp">
            <span class="jz-chip jz-chip--version">v3.7.4</span>
            <span class="jz-mono news-item__time">15 天前</span>
          </div>
          <div class="news-item__body">
            <span class="news-tag news-tag--device">设备切换</span>
            <h3 class="jz-h3 news-item__title">修复平板端收藏拉取延迟</h3>
            <p class="news-item__desc">平板端换机后，快捷胶囊出现的等待时间回到正常水平。</p>
          </div>
        </li>

        <li class="news-item" data-reveal>
          <div class="news-item__stamp">
            <span class="jz-chip jz-chip--version">v3.7.3</span>
            <span class="jz-mono news-item__time">18 天前</span>
          </div>
          <div class="news-item__body">
            <span class="news-tag news-tag--sec">权限与安全</span>
            <h3 class="jz-h3 news-item__title">角色权限变更全程留痕</h3>
            <p class="news-item__desc">每一次调整都会记下操作人、时间与范围，事后可以回查。</p>
          </div>
        </li>

        <li class="news-item" data-reveal>
          <div class="news-item__stamp">
            <span class="jz-chip jz-chip--version">v3.7.2</span>
            <span class="jz-mono news-item__time">22 天前</span>
          </div>
          <div class="news-item__body">
            <span class="news-tag news-tag--fix">自助排查</span>
            <h3 class="jz-h3 news-item__title">故障排查入口提到首页</h3>
            <p class="news-item__desc">首页侧栏新增故障排查快捷入口，遇到问题少点两步。</p>
          </div>
        </li>

        <li class="news-item" data-reveal>
          <div class="news-item__stamp">
            <span class="jz-chip jz-chip--version">v3.7.1</span>
            <span class="jz-mono news-item__time">26 天前</span>
          </div>
          <div class="news-item__body">
            <span class="news-tag news-tag--notice">版本公告</span>
            <h3 class="jz-h3 news-item__title">归档页新增年份快速索引</h3>
            <p class="news-item__desc">归档页顶部加上年份索引，翻旧记录可以直接跳转。</p>
          </div>
        </li>
      </ol>

      <p class="news-stream__foot jz-note">找不到你要的那条？<a class="news-inline-link" href="/tutorial/">帮助中心</a>里有按功能整理的对照说明，也可以直接<a class="news-inline-link" href="/feedback/">联系我们</a>。</p>
    </div>
  </section>

  <section class="news-howto">
    <div class="jz-container">
      <div class="news-howto__head">
        <p class="jz-eyebrow news-eyebrow--ink">对照检查</p>
        <h2 class="jz-h2 news-howto__heading">三步确认你在用哪一版</h2>
      </div>

      <div class="news-howto__grid">
        <ol class="news-steps">
          <li class="news-step">
            <span class="jz-mono news-step__num">01</span>
            <h3 class="jz-h3 news-step__title">打开个人中心</h3>
            <p class="news-step__desc">登录后在页面右上角点开个人中心，往下翻到「关于」一栏。</p>
          </li>
          <li class="news-step">
            <span class="jz-mono news-step__num">02</span>
            <h3 class="jz-h3 news-step__title">读三段编号</h3>
            <p class="news-step__desc">版本号由主版本、次版本、修订号三段组成，例如 3.8.2，从左到右依次收窄。</p>
          </li>
          <li class="news-step">
            <span class="jz-mono news-step__num">03</span>
            <h3 class="jz-h3 news-step__title">跟本页比一比</h3>
            <p class="news-step__desc">编号跟最上面那条记录一致，就说明你已经更新到最新；不一致时重启一次即可。</p>
          </li>
        </ol>

        <figure class="jz-figure news-howto__figure">
          <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="三段编号的等宽徽章并排排列的图形" loading="lazy" decoding="async">
          <figcaption class="jz-figure__caption">三段编号从左到右依次代表主版本、次版本、修订号</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="news-archive">
    <div class="jz-container news-archive__inner">
      <div class="news-archive__copy">
        <p class="jz-eyebrow">翻旧账</p>
        <h2 class="jz-h2 news-archive__heading">旧版本都留着，想查就查</h2>
        <p>所有记录按年份归拢，同一年的条目留在同一个入口。想确认半年前的某次调整，从年份索引进去就能翻到。</p>
        <p>每年年初发布一份年度更新回顾，把当年的版本条数、帮助条目增补与体验改动收在一处。最近一次帮助中心复查新增了 36 条解答，也一并记在回顾里。</p>
        <ul class="news-archive__points">
          <li>按月平均发布 4 至 6 条记录，节奏稳定</li>
          <li>归档页支持按年份直接跳转，不用逐条往下翻</li>
          <li>历史条目的编号与描述保持原样，方便对照工单与截图</li>
        </ul>
        <p class="news-archive__cta"><a class="jz-btn jz-btn--primary" href="/catalog/">看看六大能力分别管什么</a></p>
      </div>
      <figure class="jz-figure news-archive__figure">
        <img src="{zhanqunpic:h:620w:1000}" width="1000" height="620" alt="折叠纸页上排列刻度与年份刻痕的抽象图形" loading="lazy" decoding="async">
      </figure>
    </div>
  </section>
</main>

.page-news {
  --news-c-login: var(--jz-vermillion);
  --news-c-device: var(--jz-celadon);
  --news-c-fav: var(--jz-amber);
  --news-c-notice: var(--jz-mint-text);
  --news-c-sec: var(--jz-warm);
  --news-c-fix: #8FA8E8;
  --news-line-x: 6px;
  --news-content-x: 30px;
  background: var(--jz-ink-deep);
  color: var(--jz-paper);
  display: block;
  overflow-x: clip;
}

.page-news .jz-path {
  padding-top: var(--jz-step-24);
}

/* ---------- 首屏 ---------- */
.page-news .news-hero {
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(43, 64, 122, .75) 0%, rgba(14, 27, 60, 0) 62%),
    var(--jz-ink-deep);
  padding: var(--jz-step-24) 0 var(--jz-step-64);
}

.page-news .news-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--jz-step-24);
  align-items: center;
}

.page-news .news-hero__title {
  margin: var(--jz-step-14) 0 var(--jz-step-20);
  font-family: var(--jz-font-head);
  font-weight: 900;
  font-size: clamp(2.4rem, 9vw, var(--jz-step-96));
  line-height: .98;
  letter-spacing: -.02em;
  color: var(--jz-paper);
}

.page-news .news-hero__lede {
  max-width: 34ch;
  color: var(--jz-warm);
}

.page-news .news-hero__facts {
  list-style: none;
  margin: var(--jz-step-24) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--jz-step-20);
}

.page-news .news-hero__fact {
  display: inline-flex;
  align-items: baseline;
  gap: .35em;
  padding: .45rem .9rem;
  border: 1px solid var(--jz-hair);
  border-radius: 999px;
  background: rgba(24, 42, 85, .56);
}

.page-news .news-hero__num {
  font-family: var(--jz-font-mono);
  font-size: var(--jz-step-20);
  color: var(--jz-vermillion);
  letter-spacing: .02em;
}

.page-news .news-hero__unit {
  font-size: var(--jz-step-14);
  color: var(--jz-warm);
}

.page-news .news-hero__figure {
  margin: 0;
  border-radius: var(--jz-radius);
  overflow: hidden;
  border: 1px solid var(--jz-hair);
  background: var(--jz-ink-night);
}

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

/* ---------- 最新一条 ---------- */
.page-news .news-latest {
  background: var(--jz-paper);
  color: var(--jz-black);
  padding: var(--jz-step-64) 0;
}

.page-news .jz-eyebrow.news-eyebrow--ink {
  color: var(--jz-vermillion);
}

.page-news .news-latest__head {
  margin-bottom: var(--jz-step-24);
}

.page-news .news-latest__heading {
  color: var(--jz-black);
  margin: var(--jz-step-14) 0 0;
}

.page-news .news-latest__card {
  background: var(--jz-ink-deep);
  color: var(--jz-paper);
  border: 1px solid rgba(10, 14, 26, .12);
  box-shadow: var(--jz-shadow-lift);
  padding: var(--jz-step-24);
  display: grid;
  gap: var(--jz-step-20);
  overflow: hidden;
}

.page-news .news-latest__stamp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--jz-step-14);
  padding-bottom: var(--jz-step-20);
  border-bottom: 1px dashed var(--jz-hair-strong);
}

.page-news .news-latest__time {
  font-family: var(--jz-font-mono);
  font-size: var(--jz-step-14);
  color: var(--jz-amber);
}

.page-news .news-latest__title {
  margin: var(--jz-step-14) 0;
  color: var(--jz-paper);
  font-size: clamp(1.4rem, 5vw, var(--jz-step-40));
  line-height: 1.2;
}

.page-news .news-latest__text {
  margin: 0 0 var(--jz-step-20);
  max-width: 46ch;
  color: var(--jz-warm);
}

.page-news .news-latest__meta {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--jz-step-14);
  padding: var(--jz-step-20) 0 0;
  border-top: 1px solid var(--jz-hair);
}

.page-news .news-latest__metaitem dt {
  font-size: var(--jz-step-14);
  letter-spacing: .04em;
  color: var(--jz-celadon);
  margin-bottom: .2em;
}

.page-news .news-latest__metaitem dd {
  margin: 0;
  color: var(--jz-paper);
  font-size: var(--jz-step-17);
}

.page-news .news-latest__link {
  margin: var(--jz-step-24) 0 0;
}

/* ---------- 时间轴 ---------- */
.page-news .news-stream {
  background:
    linear-gradient(180deg, rgba(24, 42, 85, .55) 0%, rgba(14, 27, 60, 0) 30%),
    var(--jz-ink-deep);
  padding: var(--jz-step-64) 0;
}

.page-news .news-stream__head {
  margin-bottom: var(--jz-step-24);
}

.page-news .news-stream__heading {
  color: var(--jz-paper);
  margin: var(--jz-step-14) 0 var(--jz-step-14);
}

.page-news .news-stream__note {
  color: var(--jz-warm);
  max-width: 42ch;
}

/* 筛选条 */
.page-news .news-filter {
  margin: var(--jz-step-24) 0 var(--jz-step-40);
  padding: var(--jz-step-20);
  border: 1px solid var(--jz-hair);
  border-radius: var(--jz-radius);
  background: rgba(43, 64, 122, .34);
  display: grid;
  gap: var(--jz-step-14);
}

.page-news .news-filter__figure {
  margin: 0 0 var(--jz-step-14);
  border-radius: var(--jz-radius-sm);
  overflow: hidden;
  background: var(--jz-ink-night);
}

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

.page-news .news-filter__label {
  margin: 0;
  font-family: var(--jz-font-head);
  font-size: var(--jz-step-14);
  letter-spacing: .14em;
  color: var(--jz-celadon);
}

.page-news .news-filter__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

/* 标签 */
.page-news .news-tag {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .3rem .75rem;
  border-radius: 999px;
  font-family: var(--jz-font-head);
  font-size: var(--jz-step-14);
  line-height: 1.5;
  text-decoration: none;
  border: 1px solid currentColor;
  background: rgba(10, 14, 26, .32);
  transition: background-color 180ms var(--jz-ease), transform 180ms var(--jz-ease), box-shadow 180ms var(--jz-ease);
}

.page-news a.news-tag:hover,
.page-news a.news-tag:focus-visible {
  background: rgba(246, 243, 236, .14);
  box-shadow: 0 0 0 1px currentColor inset;
  transform: translateY(-2px);
}

.page-news .news-tag--login { color: var(--news-c-login); }
.page-news .news-tag--device { color: var(--news-c-device); }
.page-news .news-tag--fav { color: var(--news-c-fav); }
.page-news .news-tag--notice { color: var(--news-c-notice); }
.page-news .news-tag--sec { color: var(--news-c-sec); }
.page-news .news-tag--fix { color: var(--news-c-fix); }

/* 时间线主体 */
.page-news .news-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.page-news .news-timeline::before {
  content: "";
  position: absolute;
  left: var(--news-line-x);
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--jz-glass) 0%, rgba(43, 64, 122, .28) 100%);
}

.page-news .news-item {
  position: relative;
  padding: 0 0 var(--jz-step-24) var(--news-content-x);
  margin: 0;
}

.page-news .news-item::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--jz-glass);
  box-shadow: 0 0 0 4px var(--jz-ink-deep);
  z-index: 1;
  transition: background-color 200ms var(--jz-ease), transform 200ms var(--jz-ease);
}

.page-news .news-item[data-state="current"]::before {
  background: var(--jz-vermillion);
  transform: scale(1.15);
  box-shadow: 0 0 0 4px var(--jz-ink-deep), 0 0 0 8px rgba(242, 98, 46, .22);
}

.page-news .news-item:hover::before {
  background: var(--jz-amber);
}

.page-news .news-item__stamp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--jz-step-14);
  margin-bottom: .5rem;
}

.page-news .news-item__time {
  font-family: var(--jz-font-mono);
  font-size: var(--jz-step-14);
  color: var(--jz-warm);
  letter-spacing: .02em;
}

.page-news .news-item__title {
  margin: .5rem 0 .4rem;
  color: var(--jz-paper);
  font-size: var(--jz-step-20);
  line-height: 1.35;
  transition: color 180ms var(--jz-ease);
}

.page-news .news-item__desc {
  margin: 0;
  max-width: 46ch;
  color: var(--jz-warm);
  font-size: var(--jz-step-17);
}

.page-news .news-item:hover .news-item__title {
  color: var(--jz-amber);
}

.page-news .news-stream__foot {
  margin: var(--jz-step-24) 0 0;
  padding-top: var(--jz-step-20);
  border-top: 1px dashed var(--jz-hair);
  color: var(--jz-warm);
}

.page-news .news-inline-link {
  color: var(--jz-celadon);
  text-decoration: none;
  border-bottom: 1px solid rgba(47, 179, 155, .55);
  transition: color 180ms var(--jz-ease), border-color 180ms var(--jz-ease);
}

.page-news .news-inline-link:hover,
.page-news .news-inline-link:focus-visible {
  color: var(--jz-amber);
  border-bottom-color: var(--jz-amber);
}

/* ---------- 如何查看版本 ---------- */
.page-news .news-howto {
  background: var(--jz-paper);
  color: var(--jz-black);
  padding: var(--jz-step-64) 0;
}

.page-news .news-howto__heading {
  color: var(--jz-black);
  margin: var(--jz-step-14) 0 0;
}

.page-news .news-howto__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--jz-step-24);
  margin-top: var(--jz-step-24);
}

.page-news .news-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--jz-step-20);
}

.page-news .news-step {
  position: relative;
  padding: var(--jz-step-20) var(--jz-step-20) var(--jz-step-20) 4.2rem;
  border-radius: var(--jz-radius);
  background: #FFFFFF;
  border: 1px solid rgba(10, 14, 26, .1);
  box-shadow: 0 12px 28px -22px rgba(10, 14, 26, .55);
  transition: transform 200ms var(--jz-ease), box-shadow 200ms var(--jz-ease);
}

.page-news .news-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -24px rgba(10, 14, 26, .7);
}

.page-news .news-step__num {
  position: absolute;
  left: var(--jz-step-20);
  top: var(--jz-step-20);
  font-family: var(--jz-font-mono);
  font-size: var(--jz-step-24);
  color: var(--jz-vermillion);
  letter-spacing: .02em;
  line-height: 1;
}

.page-news .news-step__title {
  margin: 0 0 .4rem;
  color: var(--jz-black);
  font-size: var(--jz-step-20);
}

.page-news .news-step__desc {
  margin: 0;
  color: #3A3F4C;
  font-size: var(--jz-step-17);
}

.page-news .news-howto__figure {
  margin: 0;
  border-radius: var(--jz-radius);
  overflow: hidden;
  background: var(--jz-ink-night);
  border: 1px solid rgba(10, 14, 26, .12);
  padding: var(--jz-step-20);
}

.page-news .news-howto__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  border-radius: var(--jz-radius-sm);
}

.page-news .news-howto__figure .jz-figure__caption {
  margin-top: var(--jz-step-14);
  color: var(--jz-warm);
  font-size: var(--jz-step-14);
}

/* ---------- 归档 ---------- */
.page-news .news-archive {
  background:
    radial-gradient(110% 80% at 8% 4%, rgba(47, 179, 155, .16) 0%, rgba(14, 27, 60, 0) 60%),
    var(--jz-ink-night);
  padding: var(--jz-step-64) 0;
}

.page-news .news-archive__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--jz-step-40);
  align-items: center;
}

.page-news .news-archive__heading {
  color: var(--jz-paper);
  margin: var(--jz-step-14) 0 var(--jz-step-20);
}

.page-news .news-archive__copy p {
  color: var(--jz-warm);
  max-width: 46ch;
  margin: 0 0 var(--jz-step-20);
}

.page-news .news-archive__points {
  list-style: none;
  margin: 0 0 var(--jz-step-24);
  padding: 0;
  display: grid;
  gap: .7rem;
}

.page-news .news-archive__points li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--jz-paper);
  font-size: var(--jz-step-17);
}

.page-news .news-archive__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--jz-celadon);
  transform: rotate(45deg);
}

.page-news .news-archive__cta {
  margin: var(--jz-step-24) 0 0;
}

.page-news .news-archive__figure {
  margin: 0;
  border-radius: var(--jz-radius);
  overflow: hidden;
  border: 1px solid var(--jz-hair);
  background: var(--jz-ink-deep);
  box-shadow: var(--jz-shadow);
}

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

/* ---------- 中等宽度 ---------- */
@media (min-width: 768px) {
  .page-news {
    --news-content-x: 46px;
    --news-line-x: 16px;
  }

  .page-news .news-hero {
    padding: var(--jz-step-40) 0 var(--jz-step-96);
  }

  .page-news .news-hero__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: var(--jz-step-40);
  }

  .page-news .news-timeline::before {
    top: 16px;
    bottom: 16px;
  }

  .page-news .news-item::before {
    left: 11px;
    top: 12px;
  }

  .page-news .news-item__title {
    font-size: var(--jz-step-24);
  }

  .page-news .news-latest__card {
    padding: var(--jz-step-40);
  }

  .page-news .news-latest__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--jz-step-24);
  }

  .page-news .news-filter {
    padding: var(--jz-step-20) var(--jz-step-24) var(--jz-step-24);
  }

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

  .page-news .news-archive__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  }
}

/* ---------- 桌面 ---------- */
@media (min-width: 1024px) {
  .page-news {
    --news-content-x: 0px;
    --news-line-x: 110px;
  }

  .page-news .news-hero__title {
    line-height: .94;
  }

  .page-news .news-timeline::before {
    top: 18px;
    bottom: 18px;
  }

  .page-news .news-item {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    column-gap: 48px;
    padding-left: 0;
    padding-bottom: var(--jz-step-40);
  }

  .page-news .news-item::before {
    left: 104px;
    top: 14px;
  }

  .page-news .news-item__stamp {
    grid-column: 1;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
    margin-bottom: 0;
    text-align: right;
  }

  .page-news .news-item__body {
    grid-column: 2;
    padding-bottom: var(--jz-step-14);
    border-bottom: 1px solid rgba(43, 64, 122, .5);
  }

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

  .page-news .news-howto__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: var(--jz-step-40);
    align-items: start;
  }

  .page-news .news-archive__inner {
    gap: var(--jz-step-64);
  }
}

/* ---------- 减少动态 ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-news .news-tag,
  .page-news .news-item::before,
  .page-news .news-item__title,
  .page-news .news-step,
  .page-news .news-inline-link {
    transition-duration: 90ms;
  }

  .page-news .news-step:hover,
  .page-news a.news-tag:hover,
  .page-news a.news-tag:focus-visible {
    transform: none;
  }
}

.page-news {
  --jz-text-amber: currentColor;
}