.page-news {
  --news-rule: 1px solid rgba(196, 207, 224, 0.72);
  --news-rule-soft: 1px solid rgba(196, 207, 224, 0.45);
  padding-bottom: 72px;
  color: var(--ink);
}

.page-news .news-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--slate);
  margin: 0 0 12px;
}

/* ---------- 首屏 ---------- */
.page-news .news-hero {
  display: grid;
  gap: 28px;
  padding-top: 24px;
  padding-bottom: 36px;
  border-bottom: var(--news-rule);
}

.page-news .news-hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(32px, 8vw, 62px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}

.page-news .news-hero__lead {
  font-size: 16px;
  line-height: 1.75;
  color: var(--slate);
  margin: 0 0 20px;
  max-width: 46ch;
}

.page-news .news-hero__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.9;
  color: var(--slate);
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid var(--flare);
}

.page-news .news-hero__aside {
  background: var(--sand);
  border: var(--news-rule);
  padding: 20px 18px;
}

.page-news .news-hero__aside-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--slate);
  margin: 0 0 14px;
}

.page-news .news-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-news .news-stats li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(196, 207, 224, 0.9);
}

.page-news .news-stats li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-news .news-stats__num {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--ember);
  line-height: 1;
}

.page-news .news-stats__label {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
}

/* ---------- 分类条 ---------- */
.page-news .news-strip {
  border-bottom: var(--news-rule);
  padding: 16px 0;
  background: var(--paper);
}

.page-news .news-strip__scroll {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

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

.page-news .news-strip__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: max-content;
}

.page-news .news-strip__list li {
  margin-right: 8px;
}

.page-news .news-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: var(--news-rule);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--slate);
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.page-news .news-strip__item:hover,
.page-news .news-strip__item:focus-visible {
  border-color: var(--flare);
  color: var(--ink);
}

.page-news .news-strip__item.is-current {
  background: var(--flare);
  border-color: var(--flare);
  color: #fff;
}

.page-news .news-strip__count {
  font-size: 11px;
  opacity: 0.75;
}

/* ---------- 条目列表 ---------- */
.page-news .news-index {
  padding-top: 44px;
}

.page-news .news-index h2,
.page-news .news-feedback h2,
.page-news .news-co h2,
.page-news .deep-body h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 5.2vw, 42px);
  line-height: 1.16;
  letter-spacing: -0.018em;
  margin: 0 0 10px;
}

.page-news .news-index__intro,
.page-news .news-feedback__lead,
.page-news .news-co__lead {
  font-size: 15px;
  line-height: 1.75;
  color: var(--slate);
  margin: 0 0 8px;
  max-width: 58ch;
}

.page-news .news-index__figure {
  margin: 26px 0 6px;
  border: var(--news-rule);
}

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

.page-news .news-group {
  margin-top: 40px;
}

.page-news .news-group__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
}

.page-news .news-group__mark {
  flex: none;
  width: 11px;
  height: 11px;
  background: var(--flare);
  clip-path: polygon(0 0, 100% 0, 100% 68%, 68% 100%, 0 100%);
}

.page-news .news-group__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.01em;
  margin: 0;
}

.page-news .news-group__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--slate);
}

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

.page-news .entry {
  border-bottom: var(--news-rule-soft);
}

.page-news .entry__link {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0;
  align-items: start;
  text-decoration: none;
  color: inherit;
}

.page-news .entry__aside {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.page-news .entry__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 22px;
  background: var(--sand);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--slate);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.page-news .entry__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--mist);
  color: #8592a8;
  line-height: 1.4;
}

.page-news .entry__body {
  display: block;
}

.page-news .entry__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 6px;
  transition: transform var(--dur) var(--ease);
}

.page-news .entry__desc {
  display: block;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
}

.page-news .entry__link:hover .entry__no,
.page-news .entry__link:focus-visible .entry__no {
  background: var(--amber);
  color: var(--ink);
}

.page-news .entry__link:hover .entry__title,
.page-news .entry__link:focus-visible .entry__title {
  transform: translateY(1px);
  color: var(--ember);
}

.page-news .entry__link:focus-visible {
  outline: 2px solid var(--flare);
  outline-offset: 2px;
}

.page-news .news-plate {
  margin: 18px 0 0;
  border-bottom: var(--news-rule-soft);
  padding-bottom: 16px;
}

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

/* ---------- 深度条目 ---------- */
.page-news .news-deep {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 2px solid var(--ink);
}

.page-news .news-deep__inner {
  display: grid;
  gap: 22px;
}

.page-news .deep-toc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 10px 0;
  border-top: var(--news-rule);
  border-bottom: var(--news-rule);
}

.page-news .deep-toc__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--slate);
  margin: 0;
}

.page-news .deep-toc__link {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--slate);
  text-decoration: none;
  padding: 3px 0;
  transition: color var(--dur) var(--ease);
}

.page-news .deep-toc__link:hover {
  color: var(--ember);
}

.page-news .deep-toc__link[aria-current="true"] {
  color: var(--ember);
  font-weight: 700;
}

.page-news .deep-body__lead {
  font-size: 16px;
  line-height: 1.8;
  color: var(--slate);
  margin: 0 0 8px;
  max-width: 60ch;
}

.page-news .deep-part {
  position: relative;
  padding: 20px 0 8px;
  border-top: var(--news-rule);
  margin-top: 18px;
}

.page-news .chapter-marker {
  position: absolute;
  top: 22px;
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--mist);
  transition: background var(--dur) var(--ease);
}

.page-news .deep-part.is-active .chapter-marker,
.page-news .deep-part.is-active h3 .num {
  background: var(--flare);
}

.page-news .deep-part h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.4;
  margin: 0 0 12px;
  padding-left: 18px;
}

.page-news .deep-part h3 .num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--slate);
  background: var(--sand);
  padding: 1px 6px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.page-news .deep-part.is-active h3 .num {
  color: var(--ink);
}

.page-news .deep-part p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--slate);
  margin: 0 0 12px;
  max-width: 60ch;
  padding-left: 18px;
}

.page-news .deep-figure {
  margin: 24px 0 0;
  border: var(--news-rule);
}

.page-news .deep-note {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.8;
  color: var(--slate);
  margin: 18px 0 0;
  padding-top: 10px;
  border-top: var(--news-rule);
  max-width: 60ch;
}

.page-news .deep-close {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink);
  margin: 18px 0 0;
  padding-left: 14px;
  border-left: 3px solid var(--amber);
  max-width: 58ch;
}

/* ---------- 反馈落地 ---------- */
.page-news .news-feedback {
  margin-top: 60px;
  padding: 40px 0;
  background: var(--sand);
}

.page-news .fixes {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}

.page-news .fix {
  display: grid;
  gap: 10px;
  padding: 16px 0;
  border-bottom: var(--news-rule);
}

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

.page-news .fix__heard {
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid var(--mist);
}

.page-news .fix__done {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid var(--flare);
}

/* ---------- 栏目共建 ---------- */
.page-news .news-co {
  margin-top: 60px;
}

.page-news .news-co__grid {
  display: grid;
  gap: 28px;
  align-items: start;
}

.page-news .news-co__list {
  list-style: none;
  margin: 20px 0 24px;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-news .news-co__list li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--slate);
}

.page-news .news-co__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 9px;
  height: 9px;
  background: var(--amber);
  clip-path: polygon(0 0, 100% 0, 100% 68%, 68% 100%, 0 100%);
}

.page-news .news-co__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

.page-news .news-co__figure {
  margin: 0;
  border: var(--news-rule);
  background: var(--sand);
}

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

/* ---------- 平板与桌面 ---------- */
@media (min-width: 760px) {
  .page-news .news-hero {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 44px;
    padding-top: 40px;
    padding-bottom: 56px;
    align-items: start;
  }

  .page-news .news-hero__lead {
    font-size: 17px;
  }

  .page-news .entry__link {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 24px;
    padding: 20px 0;
  }

  .page-news .entry__title {
    font-size: 18px;
  }

  .page-news .fix {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    padding: 20px 0;
  }

  .page-news .news-index__figure {
    margin-top: 32px;
  }
}

@media (min-width: 900px) {
  .page-news {
    padding-bottom: 96px;
  }

  .page-news .news-index {
    padding-top: 56px;
  }

  .page-news .news-deep {
    margin-top: 80px;
    padding-top: 52px;
  }

  .page-news .news-deep__inner {
    grid-template-columns: 176px minmax(0, 1fr);
    gap: 52px;
  }

  .page-news .deep-toc {
    position: sticky;
    top: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 0 0 0 14px;
    border-top: 0;
    border-bottom: 0;
    border-left: 2px solid var(--mist);
  }

  .page-news .deep-toc__title {
    margin-bottom: 4px;
  }

  .page-news .chapter-marker {
    left: -18px;
  }

  .page-news .deep-part {
    padding-left: 0;
  }

  .page-news .news-co {
    margin-top: 80px;
  }

  .page-news .news-co__grid {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: 52px;
  }

  .page-news .news-feedback {
    margin-top: 80px;
    padding: 56px 0;
  }

  .page-news .news-group__name {
    font-size: 20px;
  }
}

@media (min-width: 1180px) {
  .page-news .news-hero h1 {
    max-width: 16ch;
  }

  .page-news .entry__title {
    font-size: 19px;
  }

  .page-news .entry__desc {
    font-size: 15px;
  }
}


<main id="main-content" class="page-news">
  <nav class="breadcrumb shell" aria-label="面包屑">
    <a href="/">首页</a>
    <span class="breadcrumb__sep">/</span>
    <span aria-current="page">平台故事</span>
  </nav>

  <header class="news-hero shell">
    <div class="news-hero__main">
      <p class="news-kicker">平台故事 · 持续更新</p>
      <h1>每一次调整，都有一个用得上的理由</h1>
      <p class="news-hero__lead">
        博乐CN 每两周发布一个小版本，每季度做一次结构更新。这里把改动写成能对上号的场景：换一台手机怎么把收藏找回来，小屏上会不会少入口，你提的意见最后落在哪一栏。
      </p>
      <p class="news-hero__meta">当前版本 4.2 ／ 8 个一级栏目 ／ 46 个二级索引位</p>
    </div>
    <aside class="news-hero__aside">
      <p class="news-hero__aside-title">最近这一年</p>
      <ul class="news-stats">
        <li>
          <span class="news-stats__num">12</span>
          <span class="news-stats__label">家栏目共建合作方</span>
        </li>
        <li>
          <span class="news-stats__num">30</span>
          <span class="news-stats__label">篇左右联合更新的内容，每月</span>
        </li>
        <li>
          <span class="news-stats__num">1860</span>
          <span class="news-stats__label">万次站内索引点击，过去一年</span>
        </li>
        <li>
          <span class="news-stats__num">99.9</span>
          <span class="news-stats__label">％ 页面年均可用率</span>
        </li>
      </ul>
    </aside>
  </header>

  <div class="news-strip">
    <div class="shell">
      <div class="news-strip__scroll">
        <ul class="news-strip__list">
          <li>
            <a class="news-strip__item is-current" href="#latest">全部条目 <span class="news-strip__count">10</span></a>
          </li>
          <li>
            <a class="news-strip__item" href="#cat-adjust">栏目调整 <span class="news-strip__count">3</span></a>
          </li>
          <li>
            <a class="news-strip__item" href="#cat-version">版本迭代 <span class="news-strip__count">3</span></a>
          </li>
          <li>
            <a class="news-strip__item" href="#cat-story">使用故事 <span class="news-strip__count">2</span></a>
          </li>
          <li>
            <a class="news-strip__item" href="#cat-feedback">反馈落地 <span class="news-strip__count">2</span></a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <section class="news-index shell" id="latest">
    <h2>近期条目</h2>
    <p class="news-index__intro">顺着期号往下读，或者按上面的分类跳到你想看的那一段。</p>

    <figure class="media-frame media-frame--wide news-index__figure">
      <img src="{zhanqunpic:h:675w:1200}" width="1200" height="675" alt="两组细线网格对照示意，左侧疏朗右侧密集，新增区域以焰橙标记">
      <figcaption class="media-frame__caption">电脑端首页加入产品线索引区前后的栏目密度对照</figcaption>
    </figure>

    <div class="news-group" id="cat-adjust">
      <div class="news-group__head">
        <span class="news-group__mark" aria-hidden="true"></span>
        <h3 class="news-group__name">栏目调整</h3>
        <span class="news-group__count">3 条</span>
      </div>
      <ol class="entries">
        <li class="entry">
          <a class="entry__link" href="/introduction/">
            <span class="entry__aside">
              <span class="entry__no">01</span>
              <span class="entry__tag">栏目调整</span>
            </span>
            <span class="entry__body">
              <span class="entry__title">一级栏目归并成八条，横着排开</span>
              <span class="entry__desc">原先散在不同入口的栏目收进一条导航，按类排开，点一次就落在目标页上。</span>
            </span>
          </a>
        </li>
        <li class="entry">
          <a class="entry__link" href="/introduction/">
            <span class="entry__aside">
              <span class="entry__no">02</span>
              <span class="entry__tag">栏目调整</span>
            </span>
            <span class="entry__body">
              <span class="entry__title">二级索引位排到 46 个</span>
              <span class="entry__desc">上一个月做完的一轮整理，把常去的二级页面固定到编号上，翻起来有落脚点。</span>
            </span>
          </a>
        </li>
        <li class="entry">
          <a class="entry__link" href="/apps/">
            <span class="entry__aside">
              <span class="entry__no">03</span>
              <span class="entry__tag">栏目调整</span>
            </span>
            <span class="entry__body">
              <span class="entry__title">手机端改成单列，最小适配到 320 像素</span>
              <span class="entry__desc">点击区域同步放大，窄屏上不再把两列挤成一条缝，入口还是一个不少。</span>
            </span>
          </a>
        </li>
      </ol>
    </div>

    <div class="news-group" id="cat-version">
      <div class="news-group__head">
        <span class="news-group__mark" aria-hidden="true"></span>
        <h3 class="news-group__name">版本迭代</h3>
        <span class="news-group__count">3 条</span>
      </div>
      <figure class="news-plate">
        <img src="{zhanqunpic:h:600w:1400}" width="1400" height="600" alt="横向细线时间轴与版本节点方块，节点旁以等宽数字标注版本号" loading="lazy" decoding="async">
      </figure>
      <ol class="entries">
        <li class="entry">
          <a class="entry__link" href="/apps/">
            <span class="entry__aside">
              <span class="entry__no">04</span>
              <span class="entry__tag">版本迭代</span>
            </span>
            <span class="entry__body">
              <span class="entry__title">电脑首页加了产品线索引区</span>
              <span class="entry__desc">4.2 版本发布时上线，从首页能直接抵达的信息比上一版多出约三成半。</span>
            </span>
          </a>
        </li>
        <li class="entry">
          <a class="entry__link" href="/apps/">
            <span class="entry__aside">
              <span class="entry__no">05</span>
              <span class="entry__tag">版本迭代</span>
            </span>
            <span class="entry__body">
              <span class="entry__title">两周一个小版本，季度一次结构更新</span>
              <span class="entry__desc">4.2 就是这么一步步走过来的，中间每次调整都能在这里找到对应的那一条。</span>
            </span>
          </a>
        </li>
        <li class="entry">
          <a class="entry__link" href="/apps/">
            <span class="entry__aside">
              <span class="entry__no">06</span>
              <span class="entry__tag">版本迭代</span>
            </span>
            <span class="entry__body">
              <span class="entry__title">高峰时段首屏也在 1.2 秒以内</span>
              <span class="entry__desc">页面年均可用率保持在 99.9%，赶时间点进去不用等转圈。</span>
            </span>
          </a>
        </li>
      </ol>
    </div>

    <div class="news-group" id="cat-story">
      <div class="news-group__head">
        <span class="news-group__mark" aria-hidden="true"></span>
        <h3 class="news-group__name">使用故事</h3>
        <span class="news-group__count">2 条</span>
      </div>
      <ol class="entries">
        <li class="entry">
          <a class="entry__link" href="/guide/">
            <span class="entry__aside">
              <span class="entry__no">07</span>
              <span class="entry__tag">使用故事</span>
            </span>
            <span class="entry__body">
              <span class="entry__title">换一台手机，十几秒回到原来的列表</span>
              <span class="entry__desc">换设备后博乐重登只差扫一次码，收藏与最近浏览一起回来，不用一条条重新加。</span>
            </span>
          </a>
        </li>
        <li class="entry">
          <a class="entry__link" href="/guide/">
            <span class="entry__aside">
              <span class="entry__no">08</span>
              <span class="entry__tag">使用故事</span>
            </span>
            <span class="entry__body">
              <span class="entry__title">只带手机出门的那批人</span>
              <span class="entry__desc">站内约六成三的访问来自手机与平板，分布在 27 个国家和地区；小屏华人看博乐的入口和电脑上一样齐。</span>
            </span>
          </a>
        </li>
      </ol>
    </div>

    <div class="news-group" id="cat-feedback">
      <div class="news-group__head">
        <span class="news-group__mark" aria-hidden="true"></span>
        <h3 class="news-group__name">反馈落地</h3>
        <span class="news-group__count">2 条</span>
      </div>
      <ol class="entries">
        <li class="entry">
          <a class="entry__link" href="/reach-us/">
            <span class="entry__aside">
              <span class="entry__no">09</span>
              <span class="entry__tag">反馈落地</span>
            </span>
            <span class="entry__body">
              <span class="entry__title">收藏加到快满时，会先提醒一句</span>
              <span class="entry__desc">单个账户能存 200 条页面记录，接近上限先给提示，不至于添加失败才发现。</span>
            </span>
          </a>
        </li>
        <li class="entry">
          <a class="entry__link" href="/reach-us/">
            <span class="entry__aside">
              <span class="entry__no">10</span>
              <span class="entry__tag">反馈落地</span>
            </span>
            <span class="entry__body">
              <span class="entry__title">页脚那行小字，一周内会排进版本</span>
              <span class="entry__desc">写得越具体改得越快，附上设备型号和截图，基本不用来回追问。</span>
            </span>
          </a>
        </li>
      </ol>
    </div>
  </section>

  <section class="news-deep" id="device">
    <div class="news-deep__inner shell">
      <nav class="deep-toc" aria-label="本条目小节">
        <p class="deep-toc__title">本条目</p>
        <a class="deep-toc__link" href="#d-1" data-chapter-link>01 出发前</a>
        <a class="deep-toc__link" href="#d-2" data-chapter-link>02 扫码之后</a>
      </nav>
      <div class="deep-body">
        <p class="news-kicker">使用故事 · 换设备</p>
        <h2>换设备的那个下午，收藏一条没少</h2>
        <p class="deep-body__lead">
          一位用了四年的老用户换了新手机。她最担心的不是记不住网址，是那两百条收藏要重新找一遍。整个过程比她算的短很多。
        </p>

        <div class="deep-part" id="d-1" data-chapter>
          <span class="chapter-marker" aria-hidden="true"></span>
          <h3><span class="num">01</span>出发前，先算了一笔账</h3>
          <p>她平时固定访问的栏目有六七个，收藏夹里攒下一百多条。按每条半分钟算，一条条重新加要一个多小时。</p>
          <p>她在旧手机上翻到页脚的反馈通道，问了一句换手机怎么办。回复里给了两条路：扫码，或者手动重加。</p>
        </div>

        <div class="deep-part" id="d-2" data-chapter>
          <span class="chapter-marker" aria-hidden="true"></span>
          <h3><span class="num">02</span>扫码之后，等的是十几秒</h3>
          <p>新手机登录后点开扫码入口，对着旧手机上的码扫了一下。收藏夹和最近浏览的记录一起回来了，前后不到 15 秒。</p>
          <p>她后来提到，唯一的差别是收藏顺序按最近使用重排了一遍，常用的反而更靠前，找起来比原来顺手。</p>
        </div>

        <figure class="media-frame deep-figure">
          <img src="{zhanqunpic:h:750w:1000}" width="1000" height="750" alt="桌面局部：手机、便签与摊开的笔记本，暖光，画面中没有人物正脸" loading="lazy" decoding="async">
          <figcaption class="media-frame__caption">换设备那天的桌面：旧手机、新手机和一张写着栏目名的便签</figcaption>
        </figure>

        <p class="deep-note">扫码通行随 4.2 版本一并开放，手动重加的办法一直都在。</p>

        <p class="deep-close">
          再往后她又加了几个新页面，200 条的额度还用不到一半。浏览记录保留最近 90 天，几个月前翻过的内容照样找得回来。
        </p>
      </div>
    </div>
  </section>

  <section class="news-feedback" id="feedback">
    <div class="shell">
      <p class="news-kicker">反馈落地</p>
      <h2>你提的那几条，后来都改了</h2>
      <p class="news-feedback__lead">页脚通道每天都能收到意见。能改的排进最近一个小版本，改完在这里留一条。</p>
      <ul class="fixes">
        <li class="fix">
          <p class="fix__heard">手机上字偏小，点下去常常落空。</p>
          <p class="fix__done">最小适配宽度定到 320 像素，可点区域同步加大，单列排版下每个入口都留着。</p>
        </li>
        <li class="fix">
          <p class="fix__heard">换了手机，收藏得一条条重新加回来。</p>
          <p class="fix__done">扫码通行的路径做出来了，收藏和最近浏览一起恢复，不用再一条条补。</p>
        </li>
        <li class="fix">
          <p class="fix__heard">出问题时不知道往哪儿交。</p>
          <p class="fix__done">反馈入口固定在每页页脚，工作日内提交的意见平均 4 小时内拿到首次回复。</p>
        </li>
      </ul>
    </div>
  </section>

  <section class="news-co shell" id="co-build">
    <div class="news-co__grid">
      <div class="news-co__text">
        <p class="news-kicker">栏目共建 · 专题预告</p>
        <h2>每个月三十篇，和十二家合作方一起排</h2>
        <p class="news-co__lead">
          栏目内容不全靠自己写。十二家内容合作方按专题分工，每月联合更新约三十篇，把资讯、产品、指南、动态与服务几类内容分开做深。
        </p>
        <ul class="news-co__list">
          <li>第三季度：版本迭代回顾。把 4.x 系列每次调整的理由串成一条线，从 4.2 的产品线索引区往回看。</li>
          <li>下一步：年度索引使用观察。手机端和电脑端的访问结构分开看，哪类栏目在小屏上最常被点开会讲清楚。</li>
          <li>持续更新：换设备与多端使用的实操心得分批整理，配合使用指南一起读更省事。</li>
        </ul>
        <p class="news-co__cta">
          <a class="btn btn--flare" href="/guide/">查看换设备步骤</a>
          <a class="btn btn--ghost" href="/reach-us/">提一个选题</a>
        </p>
      </div>
      <figure class="news-co__figure">
        <img src="{zhanqunpic:h:800w:800}" width="800" height="800" alt="焰橙与米白几何色块构成的抽象封面图形，中央是一个带缺口的方形索引符号" loading="lazy" decoding="async">
      </figure>
    </div>
  </section>
</main>

.page-news {
  --news-rule: 1px solid rgba(196, 207, 224, 0.72);
  --news-rule-soft: 1px solid rgba(196, 207, 224, 0.42);
  padding-bottom: 72px;
  color: var(--ink);
}

.page-news .news-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--slate);
  margin: 0 0 12px;
}

/* 首屏 */
.page-news .news-hero {
  display: grid;
  gap: 28px;
  padding-top: 24px;
  padding-bottom: 36px;
  border-bottom: var(--news-rule);
}

.page-news .news-hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(32px, 8vw, 62px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}

.page-news .news-hero__lead {
  font-size: 16px;
  line-height: 1.75;
  color: var(--slate);
  margin: 0 0 20px;
  max-width: 46ch;
}

.page-news .news-hero__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.9;
  color: var(--slate);
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid var(--flare);
}

.page-news .news-hero__aside {
  background: var(--sand);
  border: var(--news-rule);
  padding: 20px 18px;
}

.page-news .news-hero__aside-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--slate);
  margin: 0 0 14px;
}

.page-news .news-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-news .news-stats li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(196, 207, 224, 0.9);
}

.page-news .news-stats li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-news .news-stats__num {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--ember);
  line-height: 1;
}

.page-news .news-stats__label {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
}

/* 分类条 */
.page-news .news-strip {
  border-bottom: var(--news-rule);
  padding: 16px 0;
  background: var(--paper);
}

.page-news .news-strip__scroll {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

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

.page-news .news-strip__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: max-content;
}

.page-news .news-strip__list li {
  margin-right: 8px;
}

.page-news .news-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: var(--news-rule);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--slate);
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.page-news .news-strip__item:hover,
.page-news .news-strip__item:focus-visible {
  border-color: var(--flare);
  color: var(--ink);
}

.page-news .news-strip__item.is-current {
  background: var(--flare);
  border-color: var(--flare);
  color: #fff;
}

.page-news .news-strip__count {
  font-size: 11px;
  opacity: 0.78;
}

/* 条目列表 */
.page-news .news-index {
  padding-top: 44px;
}

.page-news .news-index h2,
.page-news .news-feedback h2,
.page-news .news-co h2,
.page-news .deep-body h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 5.2vw, 42px);
  line-height: 1.16;
  letter-spacing: -0.018em;
  margin: 0 0 10px;
}

.page-news .news-index__intro,
.page-news .news-feedback__lead,
.page-news .news-co__lead {
  font-size: 15px;
  line-height: 1.75;
  color: var(--slate);
  margin: 0 0 8px;
  max-width: 58ch;
}

.page-news .news-index__figure {
  margin: 26px 0 6px;
  border: var(--news-rule);
}

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

.page-news .news-group {
  margin-top: 40px;
}

.page-news .news-group__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
}

.page-news .news-group__mark {
  flex: none;
  width: 11px;
  height: 11px;
  background: var(--flare);
  clip-path: polygon(0 0, 100% 0, 100% 68%, 68% 100%, 0 100%);
}

.page-news .news-group__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.01em;
  margin: 0;
}

.page-news .news-group__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--slate);
}

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

.page-news .entry {
  border-bottom: var(--news-rule-soft);
}

.page-news .entry__link {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0;
  align-items: start;
  text-decoration: none;
  color: inherit;
}

.page-news .entry__aside {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.page-news .entry__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 22px;
  background: var(--sand);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--slate);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.page-news .entry__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: #7d8ba3;
  line-height: 1.4;
}

.page-news .entry__body {
  display: block;
}

.page-news .entry__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 6px;
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}

.page-news .entry__desc {
  display: block;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
}

.page-news .entry__link:hover .entry__no,
.page-news .entry__link:focus-visible .entry__no {
  background: var(--amber);
  color: var(--ink);
}

.page-news .entry__link:hover .entry__title,
.page-news .entry__link:focus-visible .entry__title {
  transform: translateY(1px);
  color: var(--ember);
}

.page-news .entry__link:focus-visible {
  outline: 2px solid var(--flare);
  outline-offset: 2px;
}

.page-news .news-plate {
  margin: 18px 0 0;
  padding-bottom: 16px;
  border-bottom: var(--news-rule-soft);
}

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

/* 深度条目 */
.page-news .news-deep {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 2px solid var(--ink);
}

.page-news .news-deep__inner {
  display: grid;
  gap: 22px;
}

.page-news .deep-toc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 10px 0;
  border-top: var(--news-rule);
  border-bottom: var(--news-rule);
}

.page-news .deep-toc__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--slate);
  margin: 0;
}

.page-news .deep-toc__link {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--slate);
  text-decoration: none;
  padding: 3px 0;
  transition: color var(--dur) var(--ease);
}

.page-news .deep-toc__link:hover,
.page-news .deep-toc__link:focus-visible {
  color: var(--ember);
}

.page-news .deep-toc__link[aria-current="true"] {
  color: var(--ember);
  font-weight: 700;
}

.page-news .deep-body__lead {
  font-size: 16px;
  line-height: 1.8;
  color: var(--slate);
  margin: 0 0 8px;
  max-width: 60ch;
}

.page-news .deep-part {
  position: relative;
  padding: 20px 0 8px;
  margin-top: 18px;
  border-top: var(--news-rule);
}

.page-news .chapter-marker {
  position: absolute;
  top: 24px;
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--mist);
  transition: background var(--dur) var(--ease);
}

.page-news .deep-part.is-active .chapter-marker {
  background: var(--flare);
}

.page-news .deep-part h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.4;
  margin: 0 0 12px;
  padding-left: 18px;
}

.page-news .deep-part h3 .num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--slate);
  background: var(--sand);
  padding: 1px 6px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.page-news .deep-part.is-active h3 .num {
  background: var(--amber);
  color: var(--ink);
}

.page-news .deep-part p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--slate);
  margin: 0 0 12px;
  max-width: 60ch;
  padding-left: 18px;
}

.page-news .deep-figure {
  margin: 24px 0 0;
  border: var(--news-rule);
}

.page-news .deep-note {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.8;
  color: var(--slate);
  margin: 18px 0 0;
  padding-top: 10px;
  border-top: var(--news-rule);
  max-width: 60ch;
}

.page-news .deep-close {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink);
  margin: 18px 0 0;
  padding-left: 14px;
  border-left: 3px solid var(--amber);
  max-width: 58ch;
}

/* 反馈落地 */
.page-news .news-feedback {
  margin-top: 60px;
  padding: 40px 0;
  background: var(--sand);
}

.page-news .fixes {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}

.page-news .fix {
  display: grid;
  gap: 10px;
  padding: 16px 0;
  border-bottom: var(--news-rule);
}

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

.page-news .fix__heard {
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid var(--mist);
}

.page-news .fix__done {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid var(--flare);
}

/* 栏目共建 */
.page-news .news-co {
  margin-top: 60px;
}

.page-news .news-co__grid {
  display: grid;
  gap: 28px;
  align-items: start;
}

.page-news .news-co__list {
  list-style: none;
  margin: 20px 0 24px;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-news .news-co__list li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--slate);
}

.page-news .news-co__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 9px;
  height: 9px;
  background: var(--amber);
  clip-path: polygon(0 0, 100% 0, 100% 68%, 68% 100%, 0 100%);
}

.page-news .news-co__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

.page-news .news-co__figure {
  margin: 0;
  border: var(--news-rule);
  background: var(--sand);
}

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

/* 平板与桌面 */
@media (min-width: 760px) {
  .page-news .news-hero {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 44px;
    padding-top: 40px;
    padding-bottom: 56px;
    align-items: start;
  }

  .page-news .news-hero__lead {
    font-size: 17px;
  }

  .page-news .entry__link {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 24px;
    padding: 20px 0;
  }

  .page-news .entry__title {
    font-size: 18px;
  }

  .page-news .fix {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    padding: 20px 0;
  }

  .page-news .news-index__figure {
    margin-top: 32px;
  }
}

@media (min-width: 900px) {
  .page-news {
    padding-bottom: 96px;
  }

  .page-news .news-index {
    padding-top: 56px;
  }

  .page-news .news-deep {
    margin-top: 80px;
    padding-top: 52px;
  }

  .page-news .news-deep__inner {
    grid-template-columns: 176px minmax(0, 1fr);
    gap: 52px;
  }

  .page-news .deep-toc {
    position: sticky;
    top: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 0 0 0 14px;
    border-top: 0;
    border-bottom: 0;
    border-left: 2px solid var(--mist);
  }

  .page-news .deep-toc__title {
    margin-bottom: 4px;
  }

  .page-news .chapter-marker {
    left: -18px;
  }

  .page-news .news-co {
    margin-top: 80px;
  }

  .page-news .news-co__grid {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: 52px;
  }

  .page-news .news-feedback {
    margin-top: 80px;
    padding: 56px 0;
  }

  .page-news .news-group__name {
    font-size: 20px;
  }
}

@media (min-width: 1180px) {
  .page-news .entry__title {
    font-size: 19px;
  }

  .page-news .entry__desc {
    font-size: 15px;
  }

  .page-news .news-hero h1 {
    max-width: 15ch;
  }
}