.page-home {
  --home-cut: 20px;
  --home-panel-bg: linear-gradient(168deg, rgba(18, 36, 74, 0.92), rgba(11, 27, 58, 0.96));
  --home-hairline: rgba(42, 58, 92, 0.7);
  color: var(--crown-paper);
}

/* ---------- 面包屑 ---------- */
.page-home .home-crumb {
  max-width: var(--crown-max);
  margin: 0 auto;
  padding: 20px var(--crown-gutter) 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--crown-font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--crown-muted);
}
.page-home .home-crumb a {
  color: var(--crown-muted);
  text-decoration: none;
  transition: color 0.25s var(--crown-ease);
}
.page-home .home-crumb a:hover,
.page-home .home-crumb a:focus-visible {
  color: var(--crown-cyan);
}
.page-home .home-crumb [aria-current="page"] {
  color: var(--crown-gold);
}

/* ---------- 首屏分屏 ---------- */
.page-home .home-hero {
  position: relative;
  margin-top: 28px;
  border-top: 1px solid var(--crown-steel);
  border-bottom: 1px solid var(--crown-steel);
  background:
    radial-gradient(circle at 84% 16%, rgba(212, 175, 55, 0.13), transparent 46%),
    radial-gradient(circle at 10% 94%, rgba(0, 229, 255, 0.09), transparent 44%),
    var(--crown-ink);
}
.page-home .home-hero__inner {
  max-width: var(--crown-max);
  margin: 0 auto;
  padding: 40px var(--crown-gutter) 48px;
  display: grid;
  gap: 34px;
  align-items: center;
}
.page-home .home-hero__title {
  margin: 16px 0 20px;
  font-family: var(--crown-font-sans);
  font-weight: 900;
  font-size: clamp(30px, 7.4vw, 62px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--crown-paper);
}
.page-home .home-hero__lead {
  margin: 0 0 26px;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.85;
  color: var(--crown-muted);
}
.page-home .home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}
.page-home .home-hero__meta {
  margin: 0;
  font-family: var(--crown-font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--crown-muted);
}
.page-home .home-hero__mono {
  color: var(--crown-gold);
  font-weight: 600;
}
.page-home .home-hero__visual {
  position: relative;
  min-height: 220px;
}
.page-home .home-hero__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
}

@media (min-width: 960px) {
  .page-home .home-hero__inner {
    max-width: none;
    padding-left: max(var(--crown-gutter), calc((100vw - var(--crown-max)) / 2));
    padding-right: 0;
    padding-top: 64px;
    padding-bottom: 68px;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 48px;
  }
  .page-home .home-hero__visual {
    min-height: 470px;
    height: 100%;
  }
  .page-home .home-hero__visual img {
    clip-path: polygon(52px 0, 100% 0, 100% 100%, 0 100%, 0 52px);
  }
}

/* 首屏文案入场 */
@media (prefers-reduced-motion: no-preference) {
  @keyframes home-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
  .page-home .home-hero__copy > * {
    animation: home-fade-up 0.7s var(--crown-ease) both;
  }
  .page-home .home-hero__copy > *:nth-child(2) { animation-delay: 0.08s; }
  .page-home .home-hero__copy > *:nth-child(3) { animation-delay: 0.16s; }
  .page-home .home-hero__copy > *:nth-child(4) { animation-delay: 0.24s; }
  .page-home .home-hero__copy > *:nth-child(5) { animation-delay: 0.32s; }
}

/* ---------- 主体三列骨架 ---------- */
.page-home .home-layout {
  max-width: var(--crown-max);
  margin: 0 auto;
  padding: 40px var(--crown-gutter) 56px;
  display: grid;
  gap: 40px;
}
.page-home .home-version { order: 1; }
.page-home .home-spine   { order: 2; }
.page-home .home-main    { order: 3; }

@media (min-width: 960px) {
  .page-home .home-layout {
    grid-template-columns: 216px minmax(0, 1fr) 300px;
    gap: 44px;
    padding: 72px var(--crown-gutter) 96px;
  }
  .page-home .home-spine   { order: 0; }
  .page-home .home-main    { order: 0; }
  .page-home .home-version { order: 0; }
  .page-home .home-spine,
  .page-home .home-version {
    position: sticky;
    top: calc(var(--crown-header-h) + 24px);
    align-self: start;
  }
}

/* ---------- 版本侧栏 ---------- */
.page-home .home-version {
  position: relative;
  padding: 26px 22px 28px;
  background: linear-gradient(155deg, var(--crown-indigo-2) 0%, var(--crown-indigo) 62%);
  border-top: 1px solid var(--crown-steel);
  border-bottom: 1px solid var(--crown-steel);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.page-home .home-version::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 2px;
  background: linear-gradient(90deg, var(--crown-gold), transparent);
}
.page-home .home-version__eyebrow {
  margin: 0 0 8px;
  font-family: var(--crown-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--crown-cyan);
}
.page-home .home-version__num {
  margin: 0 0 6px;
  font-family: var(--crown-font-mono);
  font-size: clamp(32px, 5vw, 42px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--crown-gold);
  text-shadow: 4px 4px 0 rgba(212, 175, 55, 0.13);
}
.page-home .home-version__date {
  margin: 0 0 20px;
  font-size: 12px;
  color: var(--crown-muted);
}
.page-home .home-version__spec {
  margin: 0 0 22px;
  display: grid;
}
.page-home .home-version__row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--home-hairline);
  font-size: 13px;
}
.page-home .home-version__row:last-child {
  border-bottom: 1px solid var(--home-hairline);
}
.page-home .home-version__row dt {
  margin: 0;
  font-family: var(--crown-font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--crown-muted);
}
.page-home .home-version__row dd {
  margin: 0;
  color: var(--crown-paper);
}
.page-home .home-version__note {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--crown-muted);
}

/* ---------- 左侧脊柱导航 ---------- */
.page-home .home-spine {
  position: relative;
}
.page-home .home-spine__title {
  margin: 0 0 14px;
  font-family: var(--crown-font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--crown-muted);
}
.page-home .home-spine__list {
  list-style: none;
  margin: 0;
  padding: 0 0 8px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.page-home .home-spine__list > li {
  flex: 0 0 auto;
  width: 216px;
  scroll-snap-align: start;
}
.page-home .home-spine__link {
  display: block;
  padding: 13px 14px 14px;
  text-decoration: none;
  color: var(--crown-paper);
  background: var(--crown-indigo);
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--crown-steel);
  transition: background 0.3s var(--crown-ease), border-color 0.3s var(--crown-ease);
}
.page-home .home-spine__link:hover {
  background: var(--crown-indigo-2);
  border-left-color: var(--crown-gold);
}
.page-home .home-spine__link:focus-visible {
  outline: 2px solid var(--crown-cyan);
  outline-offset: 2px;
}
.page-home .home-spine__idx {
  display: block;
  margin-bottom: 5px;
  font-family: var(--crown-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--crown-gold);
}
.page-home .home-spine__label {
  display: block;
  margin-bottom: 5px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.page-home .home-spine__desc {
  display: block;
  font-size: 12px;
  line-height: 1.6;
  color: var(--crown-muted);
}

@media (min-width: 960px) {
  .page-home .home-spine__list {
    flex-direction: column;
    gap: 2px;
    overflow-x: visible;
    padding: 0;
  }
  .page-home .home-spine__list > li {
    width: 100%;
  }
  .page-home .home-spine__link {
    border-bottom: none;
    padding: 13px 14px;
  }
}

/* ---------- 主内容区 ---------- */
.page-home .home-main {
  display: grid;
  gap: 56px;
  min-width: 0;
}
.page-home .home-block {
  position: relative;
  min-width: 0;
  padding: 30px 22px 32px;
  background: var(--home-panel-bg);
  border-top: 1px solid var(--crown-steel);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.page-home .home-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--crown-gold);
}
.page-home .home-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--home-hairline);
}
.page-home .home-block__index {
  font-family: var(--crown-font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--crown-gold);
}
.page-home .home-block__head .crown-h2 {
  margin: 0;
  font-size: clamp(20px, 2.9vw, 27px);
  line-height: 1.32;
}
.page-home .home-block__lead {
  margin: 0 0 24px;
  max-width: 40em;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--crown-muted);
}

@media (min-width: 700px) {
  .page-home .home-block {
    padding: 34px 30px 38px;
  }
}

/* ---------- 跨端对照 ---------- */
.page-home .home-cross__figure {
  margin: 0 0 22px;
  overflow: hidden;
  border: 1px solid var(--crown-steel);
}
.page-home .home-cross__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}
.page-home .home-cross {
  display: grid;
  gap: 14px;
}
.page-home .home-cross__side {
  padding: 20px 18px 22px;
  background: rgba(5, 7, 12, 0.48);
  border-top: 2px solid var(--crown-steel);
}
.page-home .home-cross__side--mobile {
  border-top-color: var(--crown-cyan);
}
.page-home .home-cross__side--desktop {
  border-top-color: var(--crown-gold);
}
.page-home .home-cross__tag {
  margin: 0 0 8px;
  font-family: var(--crown-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--crown-muted);
}
.page-home .home-cross__side--mobile .home-cross__tag {
  color: var(--crown-cyan);
}
.page-home .home-cross__side--desktop .home-cross__tag {
  color: var(--crown-gold);
}
.page-home .home-cross__h3 {
  margin: 0 0 14px;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--crown-paper);
}
.page-home .home-cross__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.page-home .home-cross__list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--crown-paper);
}
.page-home .home-cross__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 1px;
  background: var(--crown-gold);
}
.page-home .home-cross__seam {
  display: none;
}
.page-home .home-cross__note {
  margin: 20px 0 0;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--crown-muted);
  border-left: 2px solid var(--crown-cyan);
  background: rgba(0, 229, 255, 0.05);
}

@media (min-width: 700px) {
  .page-home .home-cross {
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
  }
  .page-home .home-cross__seam {
    display: grid;
    place-items: center;
    position: relative;
  }
  .page-home .home-cross__seam::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: repeating-linear-gradient(
      180deg,
      var(--crown-cyan) 0 4px,
      transparent 4px 9px
    );
    opacity: 0.6;
  }
  .page-home .home-cross__seam span {
    position: relative;
    padding: 8px 0;
    background: var(--crown-indigo);
    font-family: var(--crown-font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    line-height: 1.2;
    color: var(--crown-cyan);
    writing-mode: vertical-rl;
    text-orientation: upright;
  }
}

/* ---------- 更新动态 ---------- */
.page-home .home-updates {
  display: grid;
  gap: 24px;
}
.page-home .home-updates__figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--crown-steel);
}
.page-home .home-updates__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.page-home .home-updates__body {
  min-width: 0;
}
.page-home .crown-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}
.page-home .home-updates__list {
  display: grid;
  gap: 14px;
}
.page-home .home-update {
  position: relative;
  padding: 16px 16px 14px 18px;
  background: rgba(5, 7, 12, 0.4);
  border-left: 1px solid var(--crown-steel);
  transition: border-color 0.3s var(--crown-ease), background 0.3s var(--crown-ease);
}
.page-home .home-update:hover {
  border-left-color: var(--crown-gold);
  background: rgba(18, 36, 74, 0.52);
}
.page-home .home-update__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-family: var(--crown-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--crown-muted);
}
.page-home .home-update__title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--crown-paper);
}
.page-home .home-update__text {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--crown-muted);
}
.page-home .home-update__link {
  display: inline-block;
  font-family: var(--crown-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--crown-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 229, 255, 0.3);
  padding-bottom: 1px;
  transition: color 0.25s var(--crown-ease), border-color 0.25s var(--crown-ease);
}
.page-home .home-update__link:hover,
.page-home .home-update__link:focus-visible {
  color: var(--crown-gold);
  border-bottom-color: rgba(212, 175, 55, 0.55);
}

@media (min-width: 700px) {
  .page-home .home-updates {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }
}

/* ---------- 收束联络 ---------- */
.page-home .home-contact {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid var(--crown-steel);
  background: var(--crown-indigo);
}
.page-home .home-contact__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.24;
}
.page-home .home-contact::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(120deg, rgba(5, 7, 12, 0.94) 32%, rgba(11, 27, 58, 0.68) 100%);
}
.page-home .home-contact__inner {
  position: relative;
  z-index: 1;
  max-width: var(--crown-max);
  margin: 0 auto;
  padding: 56px var(--crown-gutter) 60px;
}
.page-home .home-contact__index {
  display: inline-block;
  font-family: var(--crown-font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--crown-gold);
}
.page-home .home-contact__title {
  margin: 12px 0 16px;
  max-width: 24em;
  font-size: clamp(23px, 4.2vw, 38px);
  font-weight: 900;
  line-height: 1.26;
  letter-spacing: -0.01em;
  color: var(--crown-paper);
}
.page-home .home-contact__lead {
  margin: 0 0 26px;
  max-width: 40em;
  font-size: 15px;
  line-height: 1.85;
  color: var(--crown-muted);
}
.page-home .home-contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.page-home .home-contact__info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--crown-font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--crown-gold);
}

@media (min-width: 960px) {
  .page-home .home-contact__inner {
    padding: 76px var(--crown-gutter) 80px;
  }
}

/* 像素屏收口 */
@media (max-width: 479px) {
  .page-home .home-hero__title {
    letter-spacing: -0.01em;
  }
  .page-home .home-block {
    padding-left: 18px;
    padding-right: 18px;
  }
  .page-home .home-version {
    padding-left: 18px;
    padding-right: 18px;
  }
}
<<<END>>>

等等，我本来应该以闭合标签结束。让我重新检查一下。

其实要求的输出格式是：
```

...

...
```

没有 `<<<END>>>` 标记。让我删掉它。
<main id="main-content" class="page-home">
  <nav class="home-crumb" aria-label="面包屑">
    <a href="/">首页</a>
    <span aria-hidden="true">/</span>
    <span aria-current="page">品牌专区</span>
  </nav>

  <section class="home-hero" aria-labelledby="hero-title">
    <div class="home-hero__inner">
      <div class="home-hero__copy">
        <p class="crown-eyebrow">2019 年起持续运营 · 内地 31 个省级行政区可访问</p>
        <h1 id="hero-title" class="home-hero__title">皇冠体肓官方专区<br>安卓正式版与账号回访，一处走通</h1>
        <p class="home-hero__lead">获取适配您设备的安卓正式版安装包；或者换个角度，在电脑端查品牌信息回访时逐项比对记录。皇冠体肓为内地用户铺好了从下载到查询的完整路径，版本信息与安装说明随包同步更新。</p>
        <div class="home-hero__actions">
          <a class="crown-btn crown-btn--gold" href="/offerings/">获取安卓正式版</a>
          <a class="crown-btn crown-btn--ghost" href="/faq/">进入对照查询</a>
        </div>
        <p class="home-hero__meta">正式版 <span class="home-hero__mono">2026.06</span> · Android 8.0 及以上 · 安装包约 86 MB</p>
      </div>
      <div class="home-hero__visual">
        <img src="{zhanqunpic:h:1000w:1400}" width="1400" height="1000" alt="暗底上由金色三角切面构成的抽象皇冠轮廓，背景有场馆顶灯光弧与细密粒子">
      </div>
    </div>
  </section>

  <div class="home-layout">
    <aside class="home-version" aria-labelledby="version-title">
      <p class="home-version__eyebrow">当前正式版</p>
      <p id="version-title" class="home-version__num">2026.06</p>
      <p class="home-version__date">本期发布 · 安装说明同步更新</p>
      <dl class="home-version__spec">
        <div class="home-version__row">
          <dt>适用系统</dt>
          <dd>Android 8.0 及以上</dd>
        </div>
        <div class="home-version__row">
          <dt>包体大小</dt>
          <dd>约 86 MB</dd>
        </div>
        <div class="home-version__row">
          <dt>界面语言</dt>
          <dd>简体中文 / 繁体中文 / English</dd>
        </div>
        <div class="home-version__row">
          <dt>校验信息</dt>
          <dd>随安装包一同发布</dd>
        </div>
      </dl>
      <a class="crown-btn crown-btn--gold crown-btn--block" href="/offerings/">进入下载与安装说明</a>
      <p class="home-version__note">安装前请确认系统版本与可用存储空间，完整步骤见客户端与下载页。</p>
    </aside>

    <aside class="home-spine" aria-labelledby="spine-title">
      <p id="spine-title" class="home-spine__title">品牌主线</p>
      <ul class="home-spine__list">
        <li>
          <a class="home-spine__link" href="/about/">
            <span class="home-spine__idx">01</span>
            <span class="home-spine__label">品牌档案</span>
            <span class="home-spine__desc">运营历程、内容体系与栏目分工</span>
          </a>
        </li>
        <li>
          <a class="home-spine__link" href="/offerings/">
            <span class="home-spine__idx">02</span>
            <span class="home-spine__label">客户端与下载</span>
            <span class="home-spine__desc">安装包、登录步骤与版本校验</span>
          </a>
        </li>
        <li>
          <a class="home-spine__link" href="/articles/">
            <span class="home-spine__idx">03</span>
            <span class="home-spine__label">品牌资讯</span>
            <span class="home-spine__desc">版本说明、功能解读与赛事专题</span>
          </a>
        </li>
        <li>
          <a class="home-spine__link" href="/faq/">
            <span class="home-spine__idx">04</span>
            <span class="home-spine__label">帮助问答</span>
            <span class="home-spine__desc">登录异常、对照差异与账号安全</span>
          </a>
        </li>
      </ul>
    </aside>

    <article class="home-main">
      <section class="home-block" id="cross" aria-labelledby="cross-title">
        <header class="home-block__head">
          <span class="home-block__index">05</span>
          <h2 id="cross-title" class="crown-h2">手机上快速确认，电脑上逐项比对</h2>
        </header>
        <p class="home-block__lead">移动端的用户中心给的是账号概况、设备状态与最近一次回访的摘要；电脑端回访则能展开完整字段明细与历史记录。两端各有顺手之处，按场合选就行。</p>
        <figure class="home-cross__figure">
          <img src="{zhanqunpic:h:600w:1600}" width="1600" height="600" alt="深靛蓝背景中并置的手机与显示器剪影，两者之间以青色光线连接，无真实人脸" loading="lazy" decoding="async">
        </figure>
        <div class="home-cross">
          <div class="home-cross__side home-cross__side--mobile">
            <p class="home-cross__tag">移动端 · 用户中心</p>
            <h3 class="home-cross__h3">打开就能看到的四类信息</h3>
            <ul class="home-cross__list">
              <li>账号基本资料与已绑定方式</li>
              <li>当前登录设备与最近活跃时间</li>
              <li>最近一次回访记录摘要</li>
              <li>客户端版本与安装状态</li>
            </ul>
          </div>
          <div class="home-cross__seam" aria-hidden="true">
            <span>同一字段</span>
          </div>
          <div class="home-cross__side home-cross__side--desktop">
            <p class="home-cross__tag">电脑端 · 回访视图</p>
            <h3 class="home-cross__h3">在电脑上展开完整明细</h3>
            <ul class="home-cross__list">
              <li>24 个常用字段的完整对照表</li>
              <li>历史回访记录与变更详情</li>
              <li>记录时间与来源渠道</li>
              <li>支持导出后本地留存比对</li>
            </ul>
          </div>
        </div>
        <p class="home-cross__note">两端显示有出入时，多数是最近一次调整尚未同步过来。回到最近一条回访记录重新进入，通常就能看到更新后的结果。</p>
      </section>

      <section class="home-block" id="updates" aria-labelledby="updates-title">
        <header class="home-block__head">
          <span class="home-block__index">06</span>
          <h2 id="updates-title" class="crown-h2">本期在更新什么</h2>
        </header>
        <p class="home-block__lead">版本与功能说明每两周整理一次，品牌回顾按季度发布。下面四条来自本期与上一期栏目，覆盖安装、查询与日常使用的不同侧面。</p>
        <div class="home-updates" data-filter-group data-filter-default="all">
          <figure class="home-updates__figure">
            <img src="{zhanqunpic:h:900w:900}" width="900" height="900" alt="方形构图的金色与青色粒子流线，形成类似赛程数据的抽象轨迹" loading="lazy" decoding="async">
          </figure>
          <div class="home-updates__body">
            <div class="crown-filter">
              <button class="crown-filter__btn" data-filter="all" aria-pressed="true">全部</button>
              <button class="crown-filter__btn" data-filter="版本" aria-pressed="false">版本与功能</button>
              <button class="crown-filter__btn" data-filter="专题" aria-pressed="false">赛事专题</button>
              <button class="crown-filter__btn" data-filter="公告" aria-pressed="false">服务公告</button>
              <p class="crown-filter__status" data-filter-status aria-live="polite"></p>
            </div>
            <div class="home-updates__list">
              <article class="home-update" data-filter-item="版本 功能">
                <p class="home-update__meta"><span class="crown-tag crown-tag--gold">版本说明</span> 本期</p>
                <h3 class="home-update__title">正式版 2026.06 变更摘要</h3>
                <p class="home-update__text">登录流程、安装校验与跨端字段同步的调整说明，已随安装包一起发布。</p>
                <a class="home-update__link" href="/articles/">查看本期说明</a>
              </article>
              <article class="home-update" data-filter-item="版本 功能">
                <p class="home-update__meta"><span class="crown-tag">功能解读</span> 上期</p>
                <h3 class="home-update__title">跨端字段对照表怎么用</h3>
                <p class="home-update__text">24 个常用字段的查找方式，以及两端显示不一致时的处理顺序。</p>
                <a class="home-update__link" href="/faq/">查看帮助问答</a>
              </article>
              <article class="home-update" data-filter-item="专题">
                <p class="home-update__meta"><span class="crown-tag">赛事专题</span> 本季度</p>
                <h3 class="home-update__title">赛季观察系列第 9 期</h3>
                <p class="home-update__text">从赛程节奏看客户端更新频率的调整方向，连载栏目按月更新。</p>
                <a class="home-update__link" href="/articles/">查看专题</a>
              </article>
              <article class="home-update" data-filter-item="公告">
                <p class="home-update__meta"><span class="crown-tag">服务公告</span> 本期</p>
                <h3 class="home-update__title">工单响应时段说明</h3>
                <p class="home-update__text">工作日 9:00–18:00 在线；节假日前会提前发布服务时间调整通知。</p>
                <a class="home-update__link" href="/find-us/">查看联络渠道</a>
              </article>
            </div>
          </div>
        </div>
      </section>
    </article>
  </div>

  <section class="home-contact" aria-labelledby="contact-title">
    <img class="home-contact__bg" src="{zhanqunpic:h:500w:1600}" width="1600" height="500" alt="暗色体育场馆看台结构的低角度剪影，顶部一束金色光，画面无人物特写" loading="lazy" decoding="async">
    <div class="home-contact__inner">
      <span class="home-contact__index">07</span>
      <h2 id="contact-title" class="home-contact__title">两边的记录对不上，直接找我们</h2>
      <p class="home-contact__lead">提交工单是最快的方式。写清账号标识、当前版本号与出现问题的页面位置，客服团队会按提交顺序处理。工作日 9:00–18:00 在线，首次响应平均 18 分钟。</p>
      <div class="home-contact__actions">
        <a class="crown-btn crown-btn--gold" href="/find-us/">提交站内工单</a>
        <a class="crown-btn crown-btn--ghost" href="/faq/">先看帮助问答</a>
      </div>
      <p class="home-contact__info">
        <span>service@hg-champion.com.cn</span>
        <span aria-hidden="true">·</span>
        <span>工作日 9:00–18:00</span>
      </p>
    </div>
  </section>
</main>

.page-home {
  --home-cut: 20px;
  --home-panel-bg: linear-gradient(168deg, rgba(18, 36, 74, 0.92), rgba(11, 27, 58, 0.96));
  --home-hairline: rgba(42, 58, 92, 0.7);
  color: var(--crown-paper);
}

/* ---------- 面包屑 ---------- */
.page-home .home-crumb {
  max-width: var(--crown-max);
  margin: 0 auto;
  padding: 20px var(--crown-gutter) 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--crown-font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--crown-muted);
}
.page-home .home-crumb a {
  color: var(--crown-muted);
  text-decoration: none;
  transition: color 0.25s var(--crown-ease);
}
.page-home .home-crumb a:hover,
.page-home .home-crumb a:focus-visible {
  color: var(--crown-cyan);
}
.page-home .home-crumb [aria-current="page"] {
  color: var(--crown-gold);
}

/* ---------- 首屏分屏 ---------- */
.page-home .home-hero {
  position: relative;
  margin-top: 28px;
  border-top: 1px solid var(--crown-steel);
  border-bottom: 1px solid var(--crown-steel);
  background:
    radial-gradient(circle at 84% 16%, rgba(212, 175, 55, 0.13), transparent 46%),
    radial-gradient(circle at 10% 94%, rgba(0, 229, 255, 0.09), transparent 44%),
    var(--crown-ink);
}
.page-home .home-hero__inner {
  max-width: var(--crown-max);
  margin: 0 auto;
  padding: 40px var(--crown-gutter) 48px;
  display: grid;
  gap: 34px;
  align-items: center;
}
.page-home .home-hero__title {
  margin: 16px 0 20px;
  font-family: var(--crown-font-sans);
  font-weight: 900;
  font-size: clamp(30px, 7.4vw, 62px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--crown-paper);
}
.page-home .home-hero__lead {
  margin: 0 0 26px;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.85;
  color: var(--crown-muted);
}
.page-home .home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}
.page-home .home-hero__meta {
  margin: 0;
  font-family: var(--crown-font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--crown-muted);
}
.page-home .home-hero__mono {
  color: var(--crown-gold);
  font-weight: 600;
}
.page-home .home-hero__visual {
  position: relative;
  min-height: 220px;
}
.page-home .home-hero__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
}

@media (min-width: 960px) {
  .page-home .home-hero__inner {
    max-width: none;
    padding-left: max(var(--crown-gutter), calc((100vw - var(--crown-max)) / 2));
    padding-right: 0;
    padding-top: 64px;
    padding-bottom: 68px;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 48px;
  }
  .page-home .home-hero__visual {
    min-height: 470px;
    height: 100%;
  }
  .page-home .home-hero__visual img {
    clip-path: polygon(52px 0, 100% 0, 100% 100%, 0 100%, 0 52px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes home-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
  .page-home .home-hero__copy > * {
    animation: home-fade-up 0.7s var(--crown-ease) both;
  }
  .page-home .home-hero__copy > *:nth-child(1) { animation-delay: 0s; }
  .page-home .home-hero__copy > *:nth-child(2) { animation-delay: 0.08s; }
  .page-home .home-hero__copy > *:nth-child(3) { animation-delay: 0.16s; }
  .page-home .home-hero__copy > *:nth-child(4) { animation-delay: 0.24s; }
  .page-home .home-hero__copy > *:nth-child(5) { animation-delay: 0.32s; }
}

/* ---------- 主体三列骨架 ---------- */
.page-home .home-layout {
  max-width: var(--crown-max);
  margin: 0 auto;
  padding: 40px var(--crown-gutter) 56px;
  display: grid;
  gap: 40px;
}
.page-home .home-version { order: 1; }
.page-home .home-spine   { order: 2; }
.page-home .home-main    { order: 3; }

@media (min-width: 960px) {
  .page-home .home-layout {
    grid-template-columns: 216px minmax(0, 1fr) 300px;
    gap: 44px;
    padding: 72px var(--crown-gutter) 96px;
  }
  .page-home .home-spine   { order: 0; }
  .page-home .home-main    { order: 0; }
  .page-home .home-version { order: 0; }
  .page-home .home-spine,
  .page-home .home-version {
    position: sticky;
    top: calc(var(--crown-header-h) + 24px);
    align-self: start;
  }
}

/* ---------- 版本侧栏 ---------- */
.page-home .home-version {
  position: relative;
  padding: 26px 22px 28px;
  background: linear-gradient(155deg, var(--crown-indigo-2) 0%, var(--crown-indigo) 62%);
  border-top: 1px solid var(--crown-steel);
  border-bottom: 1px solid var(--crown-steel);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.page-home .home-version::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 2px;
  background: linear-gradient(90deg, var(--crown-gold), transparent);
}
.page-home .home-version__eyebrow {
  margin: 0 0 8px;
  font-family: var(--crown-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--crown-cyan);
}
.page-home .home-version__num {
  margin: 0 0 6px;
  font-family: var(--crown-font-mono);
  font-size: clamp(32px, 5vw, 42px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--crown-gold);
  text-shadow: 4px 4px 0 rgba(212, 175, 55, 0.13);
}
.page-home .home-version__date {
  margin: 0 0 20px;
  font-size: 12px;
  color: var(--crown-muted);
}
.page-home .home-version__spec {
  margin: 0 0 22px;
  display: grid;
}
.page-home .home-version__row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--home-hairline);
  font-size: 13px;
}
.page-home .home-version__row:last-child {
  border-bottom: 1px solid var(--home-hairline);
}
.page-home .home-version__row dt {
  margin: 0;
  font-family: var(--crown-font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--crown-muted);
}
.page-home .home-version__row dd {
  margin: 0;
  color: var(--crown-paper);
}
.page-home .home-version__note {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--crown-muted);
}

/* ---------- 左侧脊柱导航 ---------- */
.page-home .home-spine {
  position: relative;
}
.page-home .home-spine__title {
  margin: 0 0 14px;
  font-family: var(--crown-font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--crown-muted);
}
.page-home .home-spine__list {
  list-style: none;
  margin: 0;
  padding: 0 0 8px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.page-home .home-spine__list > li {
  flex: 0 0 auto;
  width: 216px;
  scroll-snap-align: start;
}
.page-home .home-spine__link {
  display: block;
  padding: 13px 14px 14px;
  text-decoration: none;
  color: var(--crown-paper);
  background: var(--crown-indigo);
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--crown-steel);
  transition: background 0.3s var(--crown-ease), border-color 0.3s var(--crown-ease);
}
.page-home .home-spine__link:hover {
  background: var(--crown-indigo-2);
  border-left-color: var(--crown-gold);
}
.page-home .home-spine__link:focus-visible {
  outline: 2px solid var(--crown-cyan);
  outline-offset: 2px;
}
.page-home .home-spine__idx {
  display: block;
  margin-bottom: 5px;
  font-family: var(--crown-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--crown-gold);
}
.page-home .home-spine__label {
  display: block;
  margin-bottom: 5px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.page-home .home-spine__desc {
  display: block;
  font-size: 12px;
  line-height: 1.6;
  color: var(--crown-muted);
}

@media (min-width: 960px) {
  .page-home .home-spine__list {
    flex-direction: column;
    gap: 2px;
    overflow-x: visible;
    padding: 0;
  }
  .page-home .home-spine__list > li {
    width: 100%;
  }
  .page-home .home-spine__link {
    border-bottom: none;
    padding: 13px 14px;
  }
}

/* ---------- 主内容区 ---------- */
.page-home .home-main {
  display: grid;
  gap: 56px;
  min-width: 0;
}
.page-home .home-block {
  position: relative;
  min-width: 0;
  padding: 30px 22px 32px;
  background: var(--home-panel-bg);
  border-top: 1px solid var(--crown-steel);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.page-home .home-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--crown-gold);
}
.page-home .home-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--home-hairline);
}
.page-home .home-block__index {
  font-family: var(--crown-font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--crown-gold);
}
.page-home .home-block__head .crown-h2 {
  margin: 0;
  font-size: clamp(20px, 2.9vw, 27px);
  line-height: 1.32;
}
.page-home .home-block__lead {
  margin: 0 0 24px;
  max-width: 40em;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--crown-muted);
}

@media (min-width: 700px) {
  .page-home .home-block {
    padding: 34px 30px 38px;
  }
}

/* ---------- 跨端对照 ---------- */
.page-home .home-cross__figure {
  margin: 0 0 22px;
  overflow: hidden;
  border: 1px solid var(--crown-steel);
}
.page-home .home-cross__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}
.page-home .home-cross {
  display: grid;
  gap: 14px;
}
.page-home .home-cross__side {
  padding: 20px 18px 22px;
  background: rgba(5, 7, 12, 0.48);
  border-top: 2px solid var(--crown-steel);
}
.page-home .home-cross__side--mobile {
  border-top-color: var(--crown-cyan);
}
.page-home .home-cross__side--desktop {
  border-top-color: var(--crown-gold);
}
.page-home .home-cross__tag {
  margin: 0 0 8px;
  font-family: var(--crown-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--crown-muted);
}
.page-home .home-cross__side--mobile .home-cross__tag {
  color: var(--crown-cyan);
}
.page-home .home-cross__side--desktop .home-cross__tag {
  color: var(--crown-gold);
}
.page-home .home-cross__h3 {
  margin: 0 0 14px;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--crown-paper);
}
.page-home .home-cross__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.page-home .home-cross__list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--crown-paper);
}
.page-home .home-cross__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 1px;
  background: var(--crown-gold);
}
.page-home .home-cross__seam {
  display: none;
}
.page-home .home-cross__note {
  margin: 20px 0 0;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--crown-muted);
  border-left: 2px solid var(--crown-cyan);
  background: rgba(0, 229, 255, 0.05);
}

@media (min-width: 700px) {
  .page-home .home-cross {
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
  }
  .page-home .home-cross__seam {
    display: grid;
    place-items: center;
    position: relative;
  }
  .page-home .home-cross__seam::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: repeating-linear-gradient(
      180deg,
      var(--crown-cyan) 0 4px,
      transparent 4px 9px
    );
    opacity: 0.6;
  }
  .page-home .home-cross__seam span {
    position: relative;
    padding: 8px 0;
    background: var(--crown-indigo);
    font-family: var(--crown-font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    line-height: 1.2;
    color: var(--crown-cyan);
    writing-mode: vertical-rl;
    text-orientation: upright;
  }
}

/* ---------- 更新动态 ---------- */
.page-home .home-updates {
  display: grid;
  gap: 24px;
}
.page-home .home-updates__figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--crown-steel);
}
.page-home .home-updates__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.page-home .home-updates__body {
  min-width: 0;
}
.page-home .crown-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}
.page-home .home-updates__list {
  display: grid;
  gap: 14px;
}
.page-home .home-update {
  position: relative;
  padding: 16px 16px 14px 18px;
  background: rgba(5, 7, 12, 0.4);
  border-left: 1px solid var(--crown-steel);
  transition: border-color 0.3s var(--crown-ease), background 0.3s var(--crown-ease);
}
.page-home .home-update:hover {
  border-left-color: var(--crown-gold);
  background: rgba(18, 36, 74, 0.52);
}
.page-home .home-update__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-family: var(--crown-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--crown-muted);
}
.page-home .home-update__title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--crown-paper);
}
.page-home .home-update__text {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--crown-muted);
}
.page-home .home-update__link {
  display: inline-block;
  font-family: var(--crown-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--crown-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 229, 255, 0.3);
  padding-bottom: 1px;
  transition: color 0.25s var(--crown-ease), border-color 0.25s var(--crown-ease);
}
.page-home .home-update__link:hover,
.page-home .home-update__link:focus-visible {
  color: var(--crown-gold);
  border-bottom-color: rgba(212, 175, 55, 0.55);
}

@media (min-width: 700px) {
  .page-home .home-updates {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }
}

/* ---------- 收束联络 ---------- */
.page-home .home-contact {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid var(--crown-steel);
  background: var(--crown-indigo);
}
.page-home .home-contact__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.24;
}
.page-home .home-contact::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(120deg, rgba(5, 7, 12, 0.94) 32%, rgba(11, 27, 58, 0.68) 100%);
}
.page-home .home-contact__inner {
  position: relative;
  z-index: 1;
  max-width: var(--crown-max);
  margin: 0 auto;
  padding: 56px var(--crown-gutter) 60px;
}
.page-home .home-contact__index {
  display: inline-block;
  font-family: var(--crown-font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--crown-gold);
}
.page-home .home-contact__title {
  margin: 12px 0 16px;
  max-width: 24em;
  font-size: clamp(23px, 4.2vw, 38px);
  font-weight: 900;
  line-height: 1.26;
  letter-spacing: -0.01em;
  color: var(--crown-paper);
}
.page-home .home-contact__lead {
  margin: 0 0 26px;
  max-width: 40em;
  font-size: 15px;
  line-height: 1.85;
  color: var(--crown-muted);
}
.page-home .home-contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.page-home .home-contact__info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--crown-font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--crown-gold);
}

@media (min-width: 960px) {
  .page-home .home-contact__inner {
    padding: 76px var(--crown-gutter) 80px;
  }
}

@media (max-width: 479px) {
  .page-home .home-hero__title {
    letter-spacing: -0.01em;
  }
  .page-home .home-block,
  .page-home .home-version {
    padding-left: 18px;
    padding-right: 18px;
  }
}
<<<END>>>