.page-home {
  --home-gap: 20px;
  --home-flow: 240ms;
}

.page-home .home-crumb {
  padding-top: 20px;
}

/* ---------- 首屏拼贴 ---------- */
.page-home .hero-collage {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--home-gap);
  padding-block: 24px 44px;
}

.page-home .hero-brand,
.page-home .hero-media,
.page-home .hero-badge-block {
  border-radius: var(--r-lg);
  overflow: hidden;
}

.page-home .hero-brand {
  background:
    linear-gradient(150deg, rgba(47, 227, 208, 0.10), transparent 62%),
    var(--panel);
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.page-home .hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 7.4vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--porcelain);
}

.page-home .hero-sub {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(0.78rem, 2.4vw, 0.96rem);
  letter-spacing: 0.08em;
  color: var(--cyan);
}

.page-home .hero-lede {
  margin: 0;
  max-width: 42ch;
  color: var(--silver);
  font-size: 0.98rem;
  line-height: 1.78;
}

.page-home .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.page-home .hero-media {
  margin: 0;
  background: var(--band);
  position: relative;
}

.page-home .hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.page-home .hero-media figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(6, 24, 38, 0.62);
  color: var(--porcelain);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.page-home .hero-badge-block {
  background-color: var(--band);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 21px,
    rgba(47, 227, 208, 0.13) 21px 22px
  );
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

.page-home .hero-badge-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--sage);
}

.page-home .hero-badge-num {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(2rem, 6.4vw, 3rem);
  line-height: 1;
  color: var(--amber);
}

.page-home .hero-badge-note {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--silver);
}

/* ---------- 版本状态带 ---------- */
.page-home .version-band {
  padding-block: 40px 44px;
  border-top: 1px solid var(--line);
}

.page-home .status-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 26px;
}

.page-home .status-grid .stat {
  background: var(--panel);
  border-radius: var(--r-md);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-home .status-grid .stat__value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.1;
  color: var(--cyan);
}

.page-home .status-grid .stat__label {
  font-size: 0.82rem;
  color: var(--silver);
  letter-spacing: 0.02em;
}

.page-home .status-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 20px;
  padding: 16px 20px;
  border-radius: var(--r-md);
  background: var(--band);
  border-left: 3px solid var(--amber);
}

.page-home .status-note p {
  margin: 0;
  flex: 1 1 220px;
  color: var(--silver);
  font-size: 0.9rem;
  line-height: 1.65;
}

.page-home .status-note .mono-tag {
  color: var(--amber);
}

.page-home .version-trace {
  margin: 22px 0 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--band);
}

.page-home .version-trace img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

/* ---------- 服务入口矩阵 ---------- */
.page-home .entry-section {
  padding-block: 40px 44px;
}

.page-home .entry-filter {
  margin-top: 24px;
}

.page-home .entry-filter__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  opacity: 0;
  pointer-events: none;
}

.page-home .entry-filter__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.page-home .entry-filter__btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--silver);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background var(--home-flow) var(--ease),
              color var(--home-flow) var(--ease),
              border-color var(--home-flow) var(--ease);
}

.page-home .entry-filter__btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

.page-home #ef-all:checked ~ .entry-filter__bar label[for="ef-all"],
.page-home #ef-version:checked ~ .entry-filter__bar label[for="ef-version"],
.page-home #ef-device:checked ~ .entry-filter__bar label[for="ef-device"],
.page-home #ef-info:checked ~ .entry-filter__bar label[for="ef-info"],
.page-home #ef-center:checked ~ .entry-filter__bar label[for="ef-center"] {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--ink);
}

.page-home #ef-version:checked ~ .entry-grid .entry-card:not(.entry-card--version),
.page-home #ef-device:checked ~ .entry-grid .entry-card:not(.entry-card--device),
.page-home #ef-info:checked ~ .entry-grid .entry-card:not(.entry-card--info),
.page-home #ef-center:checked ~ .entry-grid .entry-card:not(.entry-card--center) {
  display: none;
}

.page-home .entry-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.page-home .entry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px;
  border-radius: var(--r-lg);
  background: var(--panel);
  transition: background var(--home-flow) var(--ease);
}

.page-home .entry-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, transparent 20%, rgba(47, 227, 208, 0.7), transparent 80%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--home-flow) var(--ease);
  pointer-events: none;
}

.page-home .entry-card:hover::before,
.page-home .entry-card:focus-within::before {
  opacity: 1;
}

.page-home .entry-card > .mono-tag {
  align-self: flex-start;
  color: var(--sage);
}

.page-home .entry-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--porcelain);
}

.page-home .entry-card p {
  margin: 0;
  color: var(--silver);
  font-size: 0.9rem;
  line-height: 1.72;
}

.page-home .entry-card__media {
  margin: 4px 0 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--band);
}

.page-home .entry-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 7;
  object-fit: cover;
}

.page-home .entry-link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: 4px;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-bottom: 1px solid rgba(47, 227, 208, 0.36);
}

.page-home .entry-link::after {
  content: "→";
  transition: transform 180ms var(--ease);
}

.page-home .entry-link:hover::after {
  transform: translateX(3px);
}

/* ---------- 内容中心精选 ---------- */
.page-home .picks {
  padding-block: 40px 44px;
  border-top: 1px solid var(--line);
}

.page-home .picks-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 24px;
}

.page-home .picks-media {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--band);
}

.page-home .picks-media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.page-home .picks-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-home .pick {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 6px 14px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--panel);
  transition: background var(--home-flow) var(--ease);
}

.page-home .pick:hover {
  background: var(--band);
}

.page-home .pick__num {
  color: var(--cyan);
  padding-top: 2px;
}

.page-home .pick h3 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--porcelain);
}

.page-home .pick p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.62;
  color: var(--silver);
}

.page-home .pick__link {
  grid-column: 2;
  justify-self: start;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(47, 227, 208, 0.3);
}

/* ---------- 适用场景 ---------- */
.page-home .scenarios {
  padding-block: 40px 44px;
}

.page-home .scenario-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.page-home .scenario {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 20px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(18, 63, 85, 0.62), rgba(12, 42, 62, 0.94));
}

.page-home .scenario__num {
  color: var(--amber);
}

.page-home .scenario h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--porcelain);
}

.page-home .scenario p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.68;
  color: var(--silver);
}

/* ---------- 最近变更 ---------- */
.page-home .recent {
  padding-block: 40px 64px;
  border-top: 1px solid var(--line);
}

.page-home .recent .timeline {
  margin: 24px 0 0;
}

.page-home .recent .timeline__body h3 {
  margin: 6px 0 4px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--porcelain);
}

.page-home .recent .timeline__body p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.68;
  color: var(--silver);
}

.page-home .recent .timeline__meta {
  color: var(--amber);
}

.page-home .recent__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .page-home .hero-collage {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    padding-block: 32px 52px;
  }

  .page-home .hero-brand {
    grid-column: 1 / -1;
    padding: 36px 30px;
  }

  .page-home .hero-media {
    grid-column: 1;
  }

  .page-home .hero-badge-block {
    grid-column: 2;
    padding: 28px 24px;
  }

  .page-home .status-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .page-home .entry-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .page-home .scenario-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-home .pick {
    grid-template-columns: auto 1fr auto;
  }

  .page-home .pick__link {
    grid-column: 3;
    justify-self: end;
    margin-top: 2px;
    white-space: nowrap;
  }
}

@media (min-width: 1024px) {
  .page-home .hero-collage {
    grid-template-columns: 6fr 4fr 2fr;
    gap: 24px;
    padding-block: 40px 60px;
    align-items: stretch;
  }

  .page-home .hero-brand {
    grid-column: auto;
    padding: 44px 38px;
    justify-content: center;
  }

  .page-home .hero-media {
    grid-column: auto;
  }

  .page-home .hero-media img {
    aspect-ratio: auto;
    height: 100%;
  }

  .page-home .hero-badge-block {
    grid-column: auto;
    padding: 32px 20px;
  }

  .page-home .version-band {
    padding-block: 52px 48px;
  }

  .page-home .entry-section {
    padding-block: 48px 52px;
  }

  .page-home .entry-grid {
    gap: 20px;
  }
}

@media (min-width: 960px) {
  .page-home .picks-layout {
    grid-template-columns: 5fr 7fr;
    align-items: start;
    gap: 24px;
  }

  .page-home .picks-media img {
    aspect-ratio: 4 / 5;
  }
}

@media (min-width: 1200px) {
  .page-home .scenario-list {
    grid-template-columns: repeat(4, 1fr);
  }

  .page-home .entry-card {
    padding: 28px 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .entry-card,
  .page-home .entry-card::before,
  .page-home .entry-filter__btn,
  .page-home .entry-link::after,
  .page-home .pick {
    transition: none;
  }
}
<<<END>>>

等等——我用了 `<<<END>>>`，但只在要求时使用了 `` 和 ``。格式要求恰好使用这两个标记，每个标记出现一次。多余的 `<<<END>>>` 可能不被期望。让我移除它。而且我也粘贴了原样输出？不，我需要干净地格式化响应。

让我重新整理，只输出这两个标记。

另外：`mask-composite: exclude`——只用在一个地方；带 `-webkit-` 前缀是默认的。好的。

另外我用了 `.home-crumb`——已定义。好的。

问题：我在页面作用域里定义了 `--home-gap` 和 `--home-flow`——这些是新的自定义属性，但先在 `.page-home` 里定义，然后才使用。根据规则这是允许的。

检查所有被使用的 `var()`：`var(--r-lg)`、`var(--r-md)`、`var(--r-pill)`、`var(--panel)`、`var(--band)`、`var(--cyan)`、`var(--porcelain)`、`var(--silver)`、`var(--sage)`、`var(--amber)`、`var(--ink)`、`var(--line)`、`var(--ease)`、`var(--font-display)`、`var(--font-mono)`。这些全都在设计令牌/变量列表里。

等等，`--ink` 在变量列表里——是的。

`--home-gap`、`--home-flow` 在 `.page-home` 里定义。好的。

`--home-flow` 通过 `var()` 在 transition 里用了——是的。

好的。

现在检查 `home-crumb`——它只是在顶部加内边距。

现在：`hero-media img` 在移动端用了 `aspect-ratio: 4/3`。桌面端我把它设为 `auto` 并加上 `height: 100%`。但高度 100% 是针对 `figure` 的，而 `figure` 的高度又来自网格拉伸……当网格列下各面板高度相同时，应该能正常工作。实际上在 `auto` 宽高比和 100% 高度的情况下，图片会填满。没问题。

嗯，在桌面端，如果 `hero-media` 在横向上变高，可能会撑开。但我先这么写并希望顺利。`object-fit: cover`。

实际上，`aspect-ratio: auto` 配合 `height: 100%` 和 `width: 100%`——图片会拉伸到填满容器。好的。

总之就按这个形式输出。

最终的响应格式：只输出这两个标记块。

现在写出来。
<main id="main-content" class="page-home">

  <div class="page-shell home-crumb">
    <nav class="breadcrumb" aria-label="页面位置">
      <span>首页</span>
      <span class="breadcrumb__sep">/</span>
      <span>官方总览</span>
    </nav>
  </div>

  <section class="page-shell hero-collage" aria-labelledby="hero-title" data-reveal>
    <div class="hero-brand">
      <p class="eyebrow">官方总览 · 正版入口</p>
      <h1 id="hero-title" class="hero-title">10博德尔指南</h1>
      <p class="hero-sub">版本档案台 · V2.0 品牌升级</p>
      <p class="hero-lede">
        10博德尔指南自 2019 年上线第一版，现在对外展示的是 V2.0 品牌升级版本。
        你可以在几秒内确认入口是不是正版、核对当前版本号，再按手上的事直接走进对应服务。
      </p>
      <div class="hero-actions">
        <a class="btn btn--primary" href="/inquiry/">进入咨询通道</a>
        <a class="btn btn--ghost" href="/insights/">看最新版本记录</a>
      </div>
    </div>

    <figure class="hero-media">
      <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="深墨蓝背景上叠放的半透明档案卡片与细密数据纹理，青色与琥珀微光勾边，无人物">
      <figcaption>V2.0 · 版本档案台视觉体系</figcaption>
    </figure>

    <div class="hero-badge-block">
      <p class="hero-badge-label">CURRENT VERSION</p>
      <p class="hero-badge-num">V2.0</p>
      <p class="hero-badge-note">品牌升级版<br>全站生效中</p>
    </div>
  </section>

  <section class="page-shell version-band" aria-labelledby="status-title" data-reveal>
    <header class="section-head">
      <p class="eyebrow">当前版本状态</p>
      <h2 id="status-title" class="section-head__title">V2.0 品牌升级已覆盖全部栏目</h2>
      <p class="section-head__note">
        品牌资料、帮助条目与服务入口都在同一组版本号下推进。
        你手上拿到的页面、对外发出的说明，只要版本号一致，内容就是同一份。
      </p>
    </header>

    <div class="status-grid">
      <div class="stat">
        <span class="stat__value">76</span>
        <span class="stat__label">累计版本记录</span>
      </div>
      <div class="stat">
        <span class="stat__value">9</span>
        <span class="stat__label">主版本次数</span>
      </div>
      <div class="stat">
        <span class="stat__value">24</span>
        <span class="stat__label">个月完整条目</span>
      </div>
      <div class="stat">
        <span class="stat__value">99.9%</span>
        <span class="stat__label">近 12 个月可用性</span>
      </div>
    </div>

    <div class="status-note">
      <span class="mono-tag">V2.0.4</span>
      <p>最近一次例行修订覆盖首页入口顺序、服务与版本页的登录说明，以及帮助中心的三条设备问答。</p>
    </div>

    <figure class="version-trace">
      <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="纵向刻度与节点组成的抽象时间轴，节点用胶囊标签表示版本序列" loading="lazy" decoding="async">
    </figure>
  </section>

  <section class="page-shell entry-section" aria-labelledby="entry-title" data-reveal>
    <header class="section-head">
      <p class="eyebrow">四条主线</p>
      <h2 id="entry-title" class="section-head__title">按手上的事挑一条路</h2>
      <p class="section-head__note">
        每条主线对应一类真实需求，选错了也不绕路，页内互相留有入口。
      </p>
    </header>

    <div class="entry-filter">
      <input type="radio" name="entryf" id="ef-all" class="entry-filter__input" checked>
      <input type="radio" name="entryf" id="ef-version" class="entry-filter__input">
      <input type="radio" name="entryf" id="ef-device" class="entry-filter__input">
      <input type="radio" name="entryf" id="ef-info" class="entry-filter__input">
      <input type="radio" name="entryf" id="ef-center" class="entry-filter__input">

      <div class="entry-filter__bar" role="group" aria-label="按需要查看服务入口">
        <label for="ef-all" class="entry-filter__btn">全部</label>
        <label for="ef-version" class="entry-filter__btn">版本记录</label>
        <label for="ef-device" class="entry-filter__btn">跨设备登录</label>
        <label for="ef-info" class="entry-filter__btn">临时查询</label>
        <label for="ef-center" class="entry-filter__btn">内容中心</label>
      </div>

      <ul class="entry-grid">
        <li class="entry-card entry-card--version">
          <span class="mono-tag">01</span>
          <h3>版本记录</h3>
          <p>清楚写出每次调整动了哪块、影响哪些页面、什么时候生效，引用前先对一遍版本号就不容易拿错。</p>
          <a class="entry-link" href="/insights/">查看更新记录</a>
        </li>

        <li class="entry-card entry-card--device">
          <span class="mono-tag">02</span>
          <h3>跨设备登录指引</h3>
          <p>换到平板或第二台电脑，用扫码授权、验证码验证、设备确认三种方式续上会话，四步走完就能接着查资料。</p>
          <figure class="entry-card__media">
            <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="平板、手机与桌面设备的抽象轮廓通过光线连接，近景裁切，无人物出镜" loading="lazy" decoding="async">
          </figure>
          <a class="entry-link" href="/projects/">了解登录方式</a>
        </li>

        <li class="entry-card entry-card--info">
          <span class="mono-tag">03</span>
          <h3>临时信息查询</h3>
          <p>需要马上确认一条品牌信息时，把问题写清楚提交，工作日 9:00–18:00 内平均 2 小时拿到明确答复。</p>
          <a class="entry-link" href="/inquiry/">发起查询</a>
        </li>

        <li class="entry-card entry-card--center">
          <span class="mono-tag">04</span>
          <h3>内容中心</h3>
          <p>品牌资料与说明文章集中在这里，每月新增约 15 篇，适合合作伙伴找可引用的素材和出处。</p>
          <a class="entry-link" href="/mission/">进入内容中心</a>
        </li>
      </ul>
    </div>
  </section>

  <section class="page-shell picks" aria-labelledby="picks-title" data-reveal>
    <header class="section-head">
      <p class="eyebrow">内容中心精选</p>
      <h2 id="picks-title" class="section-head__title">九个专题里，先读这四个</h2>
      <p class="section-head__note">
        专题合集目前收纳了约 420 篇品牌资料与说明文章，下面四组覆盖了最常被问到的开头。
      </p>
    </header>

    <div class="picks-layout">
      <figure class="picks-media">
        <img src="{zhanqunpic:h:600w:800}" width="800" height="600" alt="编号标签与文件卡片层叠的抽象插图，雾灰绿与浅瓷白为主调" loading="lazy" decoding="async">
      </figure>

      <ul class="picks-list">
        <li class="pick">
          <span class="pick__num mono-tag">A</span>
          <div>
            <h3>入门必读</h3>
            <p>52 篇。第一次接触品牌时从这里开始，半小时能把主干脉络走完。</p>
          </div>
          <a class="pick__link" href="/mission/">查看合集</a>
        </li>
        <li class="pick">
          <span class="pick__num mono-tag">B</span>
          <div>
            <h3>版本与变更说明</h3>
            <p>61 篇。适合需要引用某版内容、或对不上改动时间的资料整理者。</p>
          </div>
          <a class="pick__link" href="/mission/">查看合集</a>
        </li>
        <li class="pick">
          <span class="pick__num mono-tag">C</span>
          <div>
            <h3>跨设备使用手册</h3>
            <p>44 篇。常换设备的人先看这里，账号、会话与设备记录一次看懂。</p>
          </div>
          <a class="pick__link" href="/mission/">查看合集</a>
        </li>
        <li class="pick">
          <span class="pick__num mono-tag">D</span>
          <div>
            <h3>品牌资料速查</h3>
            <p>58 篇。对接合作或需要向团队转述品牌信息时，直接取用。</p>
          </div>
          <a class="pick__link" href="/mission/">查看合集</a>
        </li>
      </ul>
    </div>
  </section>

  <section class="page-shell scenarios" aria-labelledby="scenarios-title" data-reveal>
    <header class="section-head">
      <p class="eyebrow">适用场景</p>
      <h2 id="scenarios-title" class="section-head__title">你更像下面哪一种情况</h2>
      <p class="section-head__note">
        不同起点走的路不一样，下面四种对应最常见的开头。
      </p>
    </header>

    <ol class="scenario-list">
      <li class="scenario">
        <span class="scenario__num mono-tag">01</span>
        <h3>第一次到访，先确认真伪</h3>
        <p>先看首屏版本号与品牌徽章，能判断是否为官方入口；需要核实细节，可对照更新记录里的当前条目。</p>
      </li>
      <li class="scenario">
        <span class="scenario__num mono-tag">02</span>
        <h3>换了平板，想接着往下看</h3>
        <p>在新设备上按指引完成一次授权，就能继续查资料；同一账号默认保留 3 台常用设备，单次会话有效期 7 天。</p>
      </li>
      <li class="scenario">
        <span class="scenario__num mono-tag">03</span>
        <h3>手上有两个版本号要比对</h3>
        <p>把两个编号带进更新记录，逐条对照变更范围与影响页面，能看清中间动过哪几块。</p>
      </li>
      <li class="scenario">
        <span class="scenario__num mono-tag">04</span>
        <h3>要尽快拿到能引用的资料</h3>
        <p>从内容中心取现成条目，或在咨询通道提交问题，工作日平均 2 小时内拿到明确答复。</p>
      </li>
    </ol>
  </section>

  <section class="page-shell recent" aria-labelledby="recent-title" data-reveal>
    <header class="section-head">
      <p class="eyebrow">最近变更</p>
      <h2 id="recent-title" class="section-head__title">最近三次调整都动了什么</h2>
      <p class="section-head__note">
        完整清单按月补齐，最近 24 个月的条目都能逐条翻到。
      </p>
    </header>

    <ol class="timeline">
      <li class="timeline__item">
        <span class="timeline__mark" aria-hidden="true"></span>
        <div class="timeline__body">
          <p class="timeline__meta mono-tag">V2.0.4 · 例行修订</p>
          <h3>首页服务入口按使用频率重排</h3>
          <p>临时信息查询上移到第三位，服务与版本页与帮助中心的对应链接同步更新。</p>
        </div>
      </li>
      <li class="timeline__item">
        <span class="timeline__mark" aria-hidden="true"></span>
        <div class="timeline__body">
          <p class="timeline__meta mono-tag">V2.0.3 · 例行修订</p>
          <h3>跨设备登录补充验证码验证说明</h3>
          <p>三种登录方式补齐了常见失败提示，平板与桌面端的操作步骤表述统一。</p>
        </div>
      </li>
      <li class="timeline__item">
        <span class="timeline__mark" aria-hidden="true"></span>
        <div class="timeline__body">
          <p class="timeline__meta mono-tag">V2.0.2 · 例行修订</p>
          <h3>帮助中心条目加注适用版本</h3>
          <p>过期条目现在会标明替代条目与适用版本范围，查阅时能直接跳到仍有效的那条。</p>
        </div>
      </li>
    </ol>

    <div class="recent__foot">
      <a class="btn btn--ghost" href="/insights/">查看完整更新记录</a>
      <a class="btn btn--ghost" href="/questions/">去帮助中心找答案</a>
    </div>
  </section>

</main>

.page-home {
  --home-gap: 20px;
  --home-flow: 240ms;
}

.page-home .home-crumb {
  padding-top: 20px;
}

/* ---------- 首屏拼贴 ---------- */
.page-home .hero-collage {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--home-gap);
  padding-block: 24px 44px;
}

.page-home .hero-brand,
.page-home .hero-media,
.page-home .hero-badge-block {
  border-radius: var(--r-lg);
  overflow: hidden;
}

.page-home .hero-brand {
  background:
    linear-gradient(150deg, rgba(47, 227, 208, 0.10), transparent 62%),
    var(--panel);
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.page-home .hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 7.4vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--porcelain);
}

.page-home .hero-sub {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(0.78rem, 2.4vw, 0.96rem);
  letter-spacing: 0.08em;
  color: var(--cyan);
}

.page-home .hero-lede {
  margin: 0;
  max-width: 42ch;
  color: var(--silver);
  font-size: 0.98rem;
  line-height: 1.78;
}

.page-home .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.page-home .hero-media {
  margin: 0;
  background: var(--band);
  position: relative;
}

.page-home .hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.page-home .hero-media figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(6, 24, 38, 0.62);
  color: var(--porcelain);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.page-home .hero-badge-block {
  background-color: var(--band);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 21px,
    rgba(47, 227, 208, 0.13) 21px 22px
  );
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

.page-home .hero-badge-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--sage);
}

.page-home .hero-badge-num {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(2rem, 6.4vw, 3rem);
  line-height: 1;
  color: var(--amber);
}

.page-home .hero-badge-note {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--silver);
}

/* ---------- 版本状态带 ---------- */
.page-home .version-band {
  padding-block: 40px 44px;
  border-top: 1px solid var(--line);
}

.page-home .status-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 26px;
}

.page-home .status-grid .stat {
  background: var(--panel);
  border-radius: var(--r-md);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-home .status-grid .stat__value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.1;
  color: var(--cyan);
}

.page-home .status-grid .stat__label {
  font-size: 0.82rem;
  color: var(--silver);
  letter-spacing: 0.02em;
}

.page-home .status-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 20px;
  padding: 16px 20px;
  border-radius: var(--r-md);
  background: var(--band);
  border-left: 3px solid var(--amber);
}

.page-home .status-note p {
  margin: 0;
  flex: 1 1 220px;
  color: var(--silver);
  font-size: 0.9rem;
  line-height: 1.65;
}

.page-home .status-note .mono-tag {
  color: var(--amber);
}

.page-home .version-trace {
  margin: 22px 0 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--band);
}

.page-home .version-trace img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

/* ---------- 服务入口矩阵 ---------- */
.page-home .entry-section {
  padding-block: 40px 44px;
}

.page-home .entry-filter {
  margin-top: 24px;
}

.page-home .entry-filter__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  opacity: 0;
  pointer-events: none;
}

.page-home .entry-filter__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.page-home .entry-filter__btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--silver);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background var(--home-flow) var(--ease),
              color var(--home-flow) var(--ease),
              border-color var(--home-flow) var(--ease);
}

.page-home .entry-filter__btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

.page-home #ef-all:checked ~ .entry-filter__bar label[for="ef-all"],
.page-home #ef-version:checked ~ .entry-filter__bar label[for="ef-version"],
.page-home #ef-device:checked ~ .entry-filter__bar label[for="ef-device"],
.page-home #ef-info:checked ~ .entry-filter__bar label[for="ef-info"],
.page-home #ef-center:checked ~ .entry-filter__bar label[for="ef-center"] {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--ink);
}

.page-home #ef-version:checked ~ .entry-grid .entry-card:not(.entry-card--version),
.page-home #ef-device:checked ~ .entry-grid .entry-card:not(.entry-card--device),
.page-home #ef-info:checked ~ .entry-grid .entry-card:not(.entry-card--info),
.page-home #ef-center:checked ~ .entry-grid .entry-card:not(.entry-card--center) {
  display: none;
}

.page-home .entry-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.page-home .entry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px;
  border-radius: var(--r-lg);
  background: var(--panel);
  transition: background var(--home-flow) var(--ease);
}

.page-home .entry-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, transparent 20%, rgba(47, 227, 208, 0.7), transparent 80%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--home-flow) var(--ease);
  pointer-events: none;
}

.page-home .entry-card:hover::before,
.page-home .entry-card:focus-within::before {
  opacity: 1;
}

.page-home .entry-card > .mono-tag {
  align-self: flex-start;
  color: var(--sage);
}

.page-home .entry-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--porcelain);
}

.page-home .entry-card p {
  margin: 0;
  color: var(--silver);
  font-size: 0.9rem;
  line-height: 1.72;
}

.page-home .entry-card__media {
  margin: 4px 0 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--band);
}

.page-home .entry-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 7;
  object-fit: cover;
}

.page-home .entry-link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: 4px;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-bottom: 1px solid rgba(47, 227, 208, 0.36);
}

.page-home .entry-link::after {
  content: "→";
  transition: transform 180ms var(--ease);
}

.page-home .entry-link:hover::after {
  transform: translateX(3px);
}

/* ---------- 内容中心精选 ---------- */
.page-home .picks {
  padding-block: 40px 44px;
  border-top: 1px solid var(--line);
}

.page-home .picks-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 24px;
}

.page-home .picks-media {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--band);
}

.page-home .picks-media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.page-home .picks-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-home .pick {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 6px 14px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--panel);
  transition: background var(--home-flow) var(--ease);
}

.page-home .pick:hover {
  background: var(--band);
}

.page-home .pick__num {
  color: var(--cyan);
  padding-top: 2px;
}

.page-home .pick h3 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--porcelain);
}

.page-home .pick p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.62;
  color: var(--silver);
}

.page-home .pick__link {
  grid-column: 2;
  justify-self: start;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(47, 227, 208, 0.3);
}

/* ---------- 适用场景 ---------- */
.page-home .scenarios {
  padding-block: 40px 44px;
}

.page-home .scenario-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.page-home .scenario {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 20px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(18, 63, 85, 0.62), rgba(12, 42, 62, 0.94));
}

.page-home .scenario__num {
  color: var(--amber);
}

.page-home .scenario h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--porcelain);
}

.page-home .scenario p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.68;
  color: var(--silver);
}

/* ---------- 最近变更 ---------- */
.page-home .recent {
  padding-block: 40px 64px;
  border-top: 1px solid var(--line);
}

.page-home .recent .timeline {
  margin: 24px 0 0;
}

.page-home .recent .timeline__body h3 {
  margin: 6px 0 4px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--porcelain);
}

.page-home .recent .timeline__body p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.68;
  color: var(--silver);
}

.page-home .recent .timeline__meta {
  color: var(--amber);
}

.page-home .recent__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .page-home .hero-collage {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    padding-block: 32px 52px;
  }

  .page-home .hero-brand {
    grid-column: 1 / -1;
    padding: 36px 30px;
  }

  .page-home .hero-media {
    grid-column: 1;
  }

  .page-home .hero-badge-block {
    grid-column: 2;
    padding: 28px 24px;
  }

  .page-home .status-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .page-home .entry-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .page-home .scenario-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-home .pick {
    grid-template-columns: auto 1fr auto;
  }

  .page-home .pick__link {
    grid-column: 3;
    justify-self: end;
    margin-top: 2px;
    white-space: nowrap;
  }
}

@media (min-width: 960px) {
  .page-home .picks-layout {
    grid-template-columns: 5fr 7fr;
    align-items: start;
    gap: 24px;
  }

  .page-home .picks-media img {
    aspect-ratio: 4 / 5;
  }
}

@media (min-width: 1024px) {
  .page-home .hero-collage {
    grid-template-columns: 6fr 4fr 2fr;
    gap: 24px;
    padding-block: 40px 60px;
    align-items: stretch;
  }

  .page-home .hero-brand {
    grid-column: auto;
    padding: 44px 38px;
    justify-content: center;
  }

  .page-home .hero-media {
    grid-column: auto;
  }

  .page-home .hero-media img {
    aspect-ratio: auto;
    height: 100%;
  }

  .page-home .hero-badge-block {
    grid-column: auto;
    padding: 32px 20px;
  }

  .page-home .version-band {
    padding-block: 52px 48px;
  }

  .page-home .entry-section {
    padding-block: 48px 52px;
  }

  .page-home .entry-grid {
    gap: 20px;
  }
}

@media (min-width: 1200px) {
  .page-home .scenario-list {
    grid-template-columns: repeat(4, 1fr);
  }

  .page-home .entry-card {
    padding: 28px 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .entry-card,
  .page-home .entry-card::before,
  .page-home .entry-filter__btn,
  .page-home .entry-link::after,
  .page-home .pick {
    transition: none;
  }
}