.page-faq {
  --faq-line: rgba(14, 27, 42, 0.14);
  --faq-line-strong: rgba(14, 27, 42, 0.28);
  --faq-rail: 13rem;
  background: var(--warm);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.75;
  overflow-x: hidden;
}

.page-faq .faq-wrap {
  width: 100%;
  max-width: 78rem;
  margin: 0 auto;
  padding-inline: 1.15rem;
}

.page-faq .faq-crumb {
  padding-block: 0.9rem 0.6rem;
}

.page-faq .breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: rgba(14, 27, 42, 0.62);
}

.page-faq .breadcrumb__item + .breadcrumb__item::before {
  content: "/";
  margin-right: 0.4rem;
  color: var(--slate);
}

.page-faq .breadcrumb__link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--faq-line-strong);
}

.page-faq .breadcrumb__link:hover {
  border-bottom-color: var(--red);
  color: var(--red-dark);
}

/* ---------- 首屏框景 ---------- */
.page-faq .faq-hero {
  background: var(--ink);
  color: var(--warm);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  padding-block: 2rem 2.4rem;
}

.page-faq .faq-hero__inner {
  display: grid;
  gap: 1.75rem;
}

.page-faq .faq-issue {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin: 0 0 0.4rem;
  font-family: var(--font-mono);
  line-height: 1;
}

.page-faq .faq-issue__num {
  font-size: clamp(2.6rem, 11vw, 4rem);
  font-weight: 700;
  color: var(--red);
  letter-spacing: -0.02em;
}

.page-faq .faq-issue__unit {
  font-size: 0.95rem;
  color: var(--warm);
}

.page-faq .faq-issue__label {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--slate);
}

.page-faq .faq-hero h1 {
  margin: 0.5rem 0 1rem;
  font-size: clamp(1.85rem, 6vw, 3.2rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.page-faq .faq-hero__lead {
  margin: 0;
  max-width: 34rem;
  font-size: 1rem;
  color: rgba(243, 235, 221, 0.86);
}

.page-faq .faq-hero__hint {
  margin: 1rem 0 0;
  font-size: 0.8125rem;
  color: var(--slate);
}

.page-faq .faq-hero__code {
  font-family: var(--font-mono);
  color: var(--gold);
  letter-spacing: 0.04em;
}

.page-faq .faq-hero__figure {
  margin: 0;
  border: 1px solid var(--line-strong);
  background: var(--midnight);
}

.page-faq .faq-hero__figure .image-frame__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.page-faq .faq-hero__figure .image-frame__caption {
  padding: 0.55rem 0.75rem;
  font-size: 0.75rem;
  color: var(--slate);
  border-top: 1px solid var(--line-strong);
}

/* ---------- 通用区块 ---------- */
.page-faq .section {
  padding-block: 2.2rem;
}

.page-faq .section-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--faq-line);
}

.page-faq .section-head__num {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  color: var(--red);
}

.page-faq .section-head__title {
  margin: 0;
  font-size: clamp(1.3rem, 3.6vw, 1.9rem);
  line-height: 1.25;
  font-weight: 700;
}

.page-faq .faq-lead,
.page-faq .faq-group__intro {
  max-width: 44rem;
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
  color: rgba(14, 27, 42, 0.78);
}

.page-faq .faq-group__tail {
  margin: 1.4rem 0 0;
  font-size: 0.875rem;
  color: rgba(14, 27, 42, 0.66);
}

.page-faq .qa-link {
  color: var(--red-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(181, 51, 34, 0.45);
}

.page-faq .qa-link:hover {
  color: var(--red);
  border-bottom-color: var(--red);
}

.page-faq .qa-link--light {
  color: var(--warm);
  border-bottom-color: rgba(243, 235, 221, 0.4);
}

.page-faq .qa-link--light:hover {
  color: #ffffff;
  border-bottom-color: var(--warm);
}

/* ---------- 分类入口 ---------- */
.page-faq .faq-lookup {
  border-bottom: 1px solid var(--faq-line);
}

.page-faq .faq-cats {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: 1fr;
}

.page-faq .faq-cat {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.7rem;
  padding: 0.95rem 0.9rem;
  background: var(--paper);
  border: 1px solid var(--faq-line);
  color: inherit;
  text-decoration: none;
  transition: border-color 200ms ease, transform 200ms ease;
}

.page-faq .faq-cat:hover,
.page-faq .faq-cat:focus-visible {
  border-color: var(--red);
  transform: translateY(-2px);
}

.page-faq .faq-cat__num {
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--red);
  line-height: 1.3;
}

.page-faq .faq-cat__title {
  font-size: 1rem;
  font-weight: 700;
}

.page-faq .faq-cat__desc {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgba(14, 27, 42, 0.68);
}

/* ---------- 高频编号 ---------- */
.page-faq .faq-nums {
  margin-top: 1.6rem;
}

.page-faq .faq-nums__caption {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: rgba(14, 27, 42, 0.55);
}

.page-faq .faq-nums__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--faq-line);
}

.page-faq .faq-nums__link {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--faq-line);
  color: inherit;
  text-decoration: none;
  font-size: 0.875rem;
}

.page-faq .faq-nums__link:hover .faq-nums__code {
  background: var(--red);
  color: var(--paper);
}

.page-faq .faq-nums__code {
  flex: none;
  padding: 0.1rem 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--red);
  border: 1px solid rgba(181, 51, 34, 0.4);
  transition: background-color 200ms ease, color 200ms ease;
}

.page-faq .faq-nums__text {
  color: rgba(14, 27, 42, 0.8);
}

/* ---------- 双栏骨架 ---------- */
.page-faq .faq-layout {
  display: grid;
  gap: 1rem;
  padding-block: 0.5rem 3rem;
}

.page-faq .faq-rail {
  position: sticky;
  top: 0;
  z-index: 4;
  margin-inline: -1.15rem;
  padding: 0.5rem 1.15rem;
  background: var(--warm);
  border-bottom: 1px solid var(--faq-line);
}

.page-faq .faq-rail__caption {
  margin: 0 0 0.35rem;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: rgba(14, 27, 42, 0.5);
}

.page-faq .faq-rail__list {
  display: flex;
  gap: 0.9rem;
  margin: 0;
  padding: 0 0 0.15rem;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-faq .faq-rail__item {
  flex: none;
}

.page-faq .faq-rail__link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding-bottom: 0.2rem;
  font-size: 0.8125rem;
  color: rgba(14, 27, 42, 0.75);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}

.page-faq .faq-rail__link:hover,
.page-faq .faq-rail__link[aria-current] {
  color: var(--red-dark);
  border-bottom-color: var(--red);
}

.page-faq .faq-rail__num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--red);
}

/* ---------- 问答组 ---------- */
.page-faq .faq-group {
  padding-top: 1.6rem;
}

.page-faq .faq-group + .faq-group {
  margin-top: 1.4rem;
  border-top: 1px solid var(--faq-line-strong);
}

.page-faq .qa {
  border-bottom: 1px solid var(--faq-line);
}

.page-faq .qa > summary {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.95rem 0;
  cursor: pointer;
  list-style: none;
}

.page-faq .qa > summary::-webkit-details-marker {
  display: none;
}

.page-faq .qa > summary::after {
  content: "+";
  margin-left: auto;
  flex: none;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--red);
  line-height: 1.2;
}

.page-faq .qa[open] > summary::after {
  content: "\2212";
}

.page-faq .qa-num {
  flex: none;
  padding-top: 0.18rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--red);
}

.page-faq .qa-q {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

.page-faq .qa[open] .qa-q {
  color: var(--ink);
}

.page-faq .qa-a {
  padding: 0 0 1.1rem 0;
}

.page-faq .qa-a p {
  margin: 0;
  max-width: 46rem;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: rgba(14, 27, 42, 0.82);
}

/* ---------- 附图 ---------- */
.page-faq .faq-figure {
  margin: 0 0 1.4rem;
  border: 1px solid var(--faq-line);
  background: var(--paper);
}

.page-faq .faq-figure .image-frame__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 7;
  object-fit: cover;
}

.page-faq .faq-figure .image-frame__caption {
  padding: 0.5rem 0.7rem;
  font-size: 0.75rem;
  color: rgba(14, 27, 42, 0.6);
  border-top: 1px solid var(--faq-line);
}

/* ---------- 归档清单 ---------- */
.page-faq .faq-archive {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--faq-line);
}

.page-faq .faq-archive__row {
  display: grid;
  gap: 0.15rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--faq-line);
}

.page-faq .faq-archive__key {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--green);
}

.page-faq .faq-archive__val {
  font-size: 0.9rem;
  color: rgba(14, 27, 42, 0.8);
}

/* ---------- 联系块 ---------- */
.page-faq .faq-contact {
  background: var(--midnight);
  color: var(--warm);
  border-top: 3px solid var(--red);
  padding: 1.5rem 1.15rem 1.6rem;
}

.page-faq .faq-contact__lead {
  margin: 0 0 1.1rem;
  font-size: 0.9375rem;
  color: rgba(243, 235, 221, 0.88);
}

.page-faq .faq-contact__list {
  margin: 0 0 1.3rem;
}

.page-faq .faq-contact__row {
  display: grid;
  gap: 0.1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(243, 235, 221, 0.16);
}

.page-faq .faq-contact__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--slate);
}

.page-faq .faq-contact__value {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--warm);
  overflow-wrap: anywhere;
}

.page-faq .faq-contact__btn {
  display: inline-block;
}

/* ---------- 断点 ---------- */
@media (min-width: 40rem) {
  .page-faq .faq-cats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-faq .faq-nums__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.6rem;
  }

  .page-faq .faq-archive__row {
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: 1rem;
    align-items: baseline;
  }

  .page-faq .faq-contact {
    padding: 1.8rem 1.6rem;
  }
}

@media (min-width: 60rem) {
  .page-faq .faq-wrap {
    padding-inline: 2.25rem;
  }

  .page-faq .faq-hero {
    padding-block: 2.8rem 3.2rem;
  }

  .page-faq .faq-hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 2.75rem;
    align-items: center;
  }

  .page-faq .section {
    padding-block: 2.8rem;
  }

  .page-faq .faq-layout {
    grid-template-columns: var(--faq-rail) minmax(0, 1fr);
    gap: 3rem;
    padding-block: 1.8rem 4rem;
  }

  .page-faq .faq-rail {
    position: sticky;
    top: 2rem;
    align-self: start;
    margin-inline: 0;
    padding: 0;
    background: transparent;
    border-bottom: 0;
    border-top: 2px solid var(--ink);
  }

  .page-faq .faq-rail__caption {
    margin-block: 0.6rem 0.4rem;
  }

  .page-faq .faq-rail__list {
    display: block;
    overflow: visible;
  }

  .page-faq .faq-rail__item + .faq-rail__item {
    border-top: 1px solid var(--faq-line);
  }

  .page-faq .faq-rail__link {
    display: flex;
    gap: 0.5rem;
    padding: 0.55rem 0 0.55rem 0.5rem;
    border-bottom: 0;
    border-left: 2px solid transparent;
    white-space: normal;
  }

  .page-faq .faq-rail__link:hover,
  .page-faq .faq-rail__link[aria-current] {
    border-left-color: var(--red);
    border-bottom-color: transparent;
    background: rgba(181, 51, 34, 0.05);
  }

  .page-faq .faq-group:first-child {
    padding-top: 0;
  }

  .page-faq .qa-q {
    font-size: 1.0625rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-cat,
  .page-faq .faq-nums__code {
    transition: none;
  }

  .page-faq .faq-cat:hover,
  .page-faq .faq-cat:focus-visible {
    transform: none;
  }
}
<<<END>>>

I need to output only markers. Let me output properly. Actually format requires two markers only. Remove <<<END>>>.
<main id="main-content" class="page-faq">
  <div class="faq-wrap faq-crumb">
    <nav class="breadcrumb" aria-label="页面路径">
      <ol class="breadcrumb__list">
        <li class="breadcrumb__item"><a class="breadcrumb__link" href="/">内容中心首页</a></li>
        <li class="breadcrumb__item"><span aria-current="page">条目答疑</span></li>
      </ol>
    </nav>
  </div>

  <header class="faq-hero">
    <div class="faq-wrap faq-hero__inner">
      <div class="faq-hero__text">
        <p class="faq-issue">
          <span class="faq-issue__num">204</span>
          <span class="faq-issue__unit">期</span>
          <span class="faq-issue__label">条目答疑 · 简体中文</span>
        </p>
        <h1>问题按编号排好，答案就近可取</h1>
        <p class="faq-hero__lead">注册卡在哪一步、桌面端记录从哪里翻起、收藏过的条目去哪儿找——日博真人馆把新手最常碰到的问题写成带编号的条目，累计答复480条，近三期新增36条。手里有编号就能翻到那一条，也可以从下面四类里顺着找。</p>
        <p class="faq-hero__hint">编号形如 <span class="faq-hero__code">204-044</span>，前段是期号，后段是这一期里的序号。</p>
      </div>
      <figure class="image-frame faq-hero__figure">
        <img class="image-frame__img" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="暖米白索引卡按编号排列，每张卡片印着问题标签与朱砂红编号">
        <figcaption class="image-frame__caption">一问一卡，编号即位置。</figcaption>
      </figure>
    </div>
  </header>

  <section class="section faq-lookup" id="lookup">
    <div class="faq-wrap">
      <div class="section-head">
        <span class="section-head__num">01</span>
        <h2 class="section-head__title">四条路径，挑一条进来</h2>
      </div>
      <p class="faq-lead">想追踪日博真人常见问题条目的读者，多半手里已经有一个编号，或者只记得问题出在哪个环节。下面四个类别对应四类提问场景，点进去就是成组的编号与答复；记不住编号也不要紧，标题里带着关键词，扫一眼就能认出来。</p>

      <div class="faq-cats">
        <a class="faq-cat" href="#flow" data-reveal>
          <span class="faq-cat__num">A</span>
          <span class="faq-cat__title">注册流程问题</span>
          <span class="faq-cat__desc">六步引导里的每一步、资料填写与中途退出的处理</span>
        </a>
        <a class="faq-cat" href="#desktop" data-reveal data-reveal-delay="1">
          <span class="faq-cat__num">B</span>
          <span class="faq-cat__title">桌面端与收藏</span>
          <span class="faq-cat__desc">进入页面、编号检索、分类筛选、打印与本地收藏</span>
        </a>
        <a class="faq-cat" href="#history" data-reveal data-reveal-delay="2">
          <span class="faq-cat__num">C</span>
          <span class="faq-cat__title">更新与历史条目</span>
          <span class="faq-cat__desc">整理节奏、季度归档与往期答复的查找方式</span>
        </a>
        <a class="faq-cat" href="#contact" data-reveal data-reveal-delay="3">
          <span class="faq-cat__num">D</span>
          <span class="faq-cat__title">没有对应编号</span>
          <span class="faq-cat__desc">把问题发给我们，写清编号能更快拿到答复</span>
        </a>
      </div>

      <div class="faq-nums">
        <p class="faq-nums__caption">近期被问得最多的六条</p>
        <ul class="faq-nums__list">
          <li><a class="faq-nums__link" href="#q-204-004"><span class="faq-nums__code">204-004</span><span class="faq-nums__text">注册一共分几步</span></a></li>
          <li><a class="faq-nums__link" href="#q-204-044"><span class="faq-nums__code">204-044</span><span class="faq-nums__text">收藏存在哪里</span></a></li>
          <li><a class="faq-nums__link" href="#q-204-031"><span class="faq-nums__code">204-031</span><span class="faq-nums__text">桌面端首屏显示什么</span></a></li>
          <li><a class="faq-nums__link" href="#q-204-011"><span class="faq-nums__code">204-011</span><span class="faq-nums__text">中途退出能否续上</span></a></li>
          <li><a class="faq-nums__link" href="#q-204-066"><span class="faq-nums__code">204-066</span><span class="faq-nums__text">旧答复还留着吗</span></a></li>
          <li><a class="faq-nums__link" href="#q-204-052"><span class="faq-nums__code">204-052</span><span class="faq-nums__text">打印版式怎么排</span></a></li>
        </ul>
      </div>
    </div>
  </section>

  <div class="faq-wrap faq-layout">
    <aside class="faq-rail">
      <nav class="anchor-index faq-rail__index" data-spy-nav aria-label="本页索引">
        <p class="faq-rail__caption">本页索引</p>
        <ul class="faq-rail__list">
          <li class="faq-rail__item"><a class="faq-rail__link" href="#lookup"><span class="faq-rail__num">01</span>四条路径</a></li>
          <li class="faq-rail__item"><a class="faq-rail__link" href="#flow"><span class="faq-rail__num">02</span>注册流程</a></li>
          <li class="faq-rail__item"><a class="faq-rail__link" href="#desktop"><span class="faq-rail__num">03</span>桌面端与收藏</a></li>
          <li class="faq-rail__item"><a class="faq-rail__link" href="#history"><span class="faq-rail__num">04</span>更新与历史</a></li>
          <li class="faq-rail__item"><a class="faq-rail__link" href="#contact"><span class="faq-rail__num">05</span>联系我们</a></li>
        </ul>
      </nav>
    </aside>

    <div class="faq-answers">
      <section class="faq-group" id="flow">
        <div class="section-head">
          <span class="section-head__num">02</span>
          <h2 class="section-head__title">注册流程里最容易停下的几处</h2>
        </div>
        <p class="faq-group__intro">新手注册流程拆成6个步骤，每一步单独占一个编号。首页的六步引导给顺序，这里给细节，两处对着看，哪一步没走通一目了然。</p>

        <details class="qa" id="q-204-004">
          <summary>
            <span class="qa-num">204-004</span>
            <span class="qa-q">注册一共分几步，每步都能单独查吗？</span>
          </summary>
          <div class="qa-a">
            <p>是六步，从准备资料到最后完成登录依次排开，每一步对应一个独立编号。想先看整体顺序，可以打开<a class="qa-link" href="/">内容中心首页</a>的六步引导，再回到这里查某一步的细节。</p>
          </div>
        </details>

        <details class="qa" id="q-204-011">
          <summary>
            <span class="qa-num">204-011</span>
            <span class="qa-q">注册走到一半退出，回来要从头再来吗？</span>
          </summary>
          <div class="qa-a">
            <p>不用从头走，重新进入后接着未完成的那一步继续即可，之前填过的内容按页面提示确认一遍。要是记不清停在哪一步，把上一次看到的编号发到客服邮箱，我们能直接定位。</p>
          </div>
        </details>

        <details class="qa" id="q-204-019">
          <summary>
            <span class="qa-num">204-019</span>
            <span class="qa-q">提示信息不一致，先从哪一条查起？</span>
          </summary>
          <div class="qa-a">
            <p>先看当前步骤编号下的填写说明，多数情况是姓名或证件信息与所选类型对不上。按说明改过仍不通过，就把编号和提示原文一起发到客服邮箱，并注明使用的浏览器。</p>
          </div>
        </details>

        <details class="qa" id="q-204-023">
          <summary>
            <span class="qa-num">204-023</span>
            <span class="qa-q">同一个手机号能给两个人办注册吗？</span>
          </summary>
          <div class="qa-a">
            <p>一个手机号对应一份注册，重复使用会提示已被占用。替家人办理时请换成未注册过的号码，判断标准和替换方式写在该步骤编号的条目里。</p>
          </div>
        </details>
      </section>

      <section class="faq-group" id="desktop">
        <div class="section-head">
          <span class="section-head__num">03</span>
          <h2 class="section-head__title">桌面端怎么用，收藏放在哪</h2>
        </div>
        <p class="faq-group__intro">查记录的场景多在电脑上完成，<a class="qa-link" href="/app-download/">桌面端入口页</a>为此调整了首屏顺序：先给最近更新的编号与时间，再给检索和筛选。</p>

        <figure class="image-frame faq-figure">
          <img class="image-frame__img" src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="桌面端答疑界面局部，左侧编号检索栏与分类标签，右侧为答复正文" loading="lazy" decoding="async">
          <figcaption class="image-frame__caption">桌面端首屏：最近更新编号在上，检索与筛选在下。</figcaption>
        </figure>

        <details class="qa" id="q-204-031">
          <summary>
            <span class="qa-num">204-031</span>
            <span class="qa-q">进入桌面端页面后，先看到的是什么？</span>
          </summary>
          <div class="qa-a">
            <p>首屏先列最近更新的编号和更新时间，方便您判断有没有新答复。往下依次是最近查看、分类筛选、编号检索和打印版式四个区域，都是给翻记录准备的。</p>
          </div>
        </details>

        <details class="qa" id="q-204-044">
          <summary>
            <span class="qa-num">204-044</span>
            <span class="qa-q">收藏的条目存在哪里，换台电脑还看得到吗？</span>
          </summary>
          <div class="qa-a">
            <p>收藏记录保存在当前浏览器的本地存储里，最多120条，按最近查看排序。换电脑或换浏览器不会自动带过去，重要条目建议把编号另存一份，随时能重新打开。</p>
          </div>
        </details>

        <details class="qa" id="q-204-052">
          <summary>
            <span class="qa-num">204-052</span>
            <span class="qa-q">想打印某一条答复，版式会乱吗？</span>
          </summary>
          <div class="qa-a">
            <p>条目详情自带打印版式，输出时会隐去导航与操作按钮，一条答复单独成页，正文行高保持1.75。桌面端在1366×768及以上分辨率阅读最舒展，长答复也不容易断行。</p>
          </div>
        </details>

        <details class="qa" id="q-204-058">
          <summary>
            <span class="qa-num">204-058</span>
            <span class="qa-q">收藏满120条以后，新收的会把旧的挤掉吗？</span>
          </summary>
          <div class="qa-a">
            <p>达到上限后，新收藏会替换掉最早查看的那一条，顺序仍按最近查看排列。经常回看的答复，可以把编号记在邮件草稿里，就不占收藏名额了。</p>
          </div>
        </details>
      </section>

      <section class="faq-group" id="history">
        <div class="section-head">
          <span class="section-head__num">04</span>
          <h2 class="section-head__title">旧答复去哪儿找</h2>
        </div>
        <p class="faq-group__intro">条目会随版本往前走，但过往的答复不会一删了之。想找几个月前看过的那一条，按下面的节奏翻就够。</p>

        <ul class="faq-archive">
          <li class="faq-archive__row">
            <span class="faq-archive__key">整理节奏</span>
            <span class="faq-archive__val">每周二、周五各整理一次条目，重大版本变更另发更新说明。</span>
          </li>
          <li class="faq-archive__row">
            <span class="faq-archive__key">季度归档</span>
            <span class="faq-archive__val">已解答条目按季度归档，同一主题的答复聚在一起，便于连着看。</span>
          </li>
          <li class="faq-archive__row">
            <span class="faq-archive__key">历史全文</span>
            <span class="faq-archive__val">历史版本保留最近12期全文，更早的期号只留标题与结论。</span>
          </li>
        </ul>

        <details class="qa" id="q-204-066">
          <summary>
            <span class="qa-num">204-066</span>
            <span class="qa-q">已经答过的问题，以后还能翻到吗？</span>
          </summary>
          <div class="qa-a">
            <p>能。已解答条目按季度归档，最近12期保留全文。要找较早的答复，去<a class="qa-link" href="/updates/">更新记录</a>按期号往下翻，找到对应期再点开编号即可。</p>
          </div>
        </details>

        <details class="qa" id="q-204-071">
          <summary>
            <span class="qa-num">204-071</span>
            <span class="qa-q">新条目一般什么时候出来？</span>
          </summary>
          <div class="qa-a">
            <p>每周二和周五各整理一次，当期新增与修订的编号会在更新记录页列成摘要，最近8至10条变更一眼能看完。遇到重大版本变更，会单独发一条更新说明。</p>
          </div>
        </details>

        <details class="qa" id="q-204-079">
          <summary>
            <span class="qa-num">204-079</span>
            <span class="qa-q">翻遍条目也没找到我的情况，怎么办？</span>
          </summary>
          <div class="qa-a">
            <p>现有480条答复覆盖的是高频场景，您的具体情况可能还没成条。把操作到哪一步、看到什么提示写清楚发邮件，答复之后会补进相应类别并给出新编号。</p>
          </div>
        </details>

        <p class="faq-group__tail">想了解编号是怎么排的、几类条目怎么分，可以看<a class="qa-link" href="/overview/">品牌总览</a>里的说明。</p>
      </section>

      <section class="faq-group faq-group--contact" id="contact">
        <div class="section-head">
          <span class="section-head__num">05</span>
          <h2 class="section-head__title">把编号告诉我们，答复更快</h2>
        </div>

        <div class="faq-contact">
          <p class="faq-contact__lead">邮件里写上编号，我们能直接翻到对应条目，省去来回确认您说的是哪一条。</p>
          <dl class="faq-contact__list">
            <div class="faq-contact__row">
              <dt class="faq-contact__label">客服邮箱</dt>
              <dd class="faq-contact__value"><a class="qa-link qa-link--light" href="mailto:kefu@live-ribo.com.cn">kefu@live-ribo.com.cn</a></dd>
            </div>
            <div class="faq-contact__row">
              <dt class="faq-contact__label">客服电话</dt>
              <dd class="faq-contact__value">400-2551-5967</dd>
            </div>
            <div class="faq-contact__row">
              <dt class="faq-contact__label">服务时间</dt>
              <dd class="faq-contact__value">工作日 10:00-18:00</dd>
            </div>
            <div class="faq-contact__row">
              <dt class="faq-contact__label">联系地址</dt>
              <dd class="faq-contact__value">北京市朝阳区建国路88号院7号楼1203室</dd>
            </div>
            <div class="faq-contact__row">
              <dt class="faq-contact__label">标题写法</dt>
              <dd class="faq-contact__value">条目咨询｜204-044，再接一句问题摘要</dd>
            </div>
          </dl>
          <a class="button button--primary faq-contact__btn" href="/find-us/">查看全部联系方式</a>
        </div>
      </section>
    </div>
  </div>
</main>

.page-faq {
  --faq-line: rgba(14, 27, 42, 0.14);
  --faq-line-strong: rgba(14, 27, 42, 0.28);
  --faq-rail: 13rem;
  background: var(--warm);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.75;
  overflow-x: hidden;
}

.page-faq .faq-wrap {
  width: 100%;
  max-width: 78rem;
  margin: 0 auto;
  padding-inline: 1.15rem;
}

.page-faq .faq-crumb {
  padding-block: 0.9rem 0.6rem;
}

.page-faq .breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: rgba(14, 27, 42, 0.62);
}

.page-faq .breadcrumb__item + .breadcrumb__item::before {
  content: "/";
  margin-right: 0.4rem;
  color: var(--slate);
}

.page-faq .breadcrumb__link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--faq-line-strong);
}

.page-faq .breadcrumb__link:hover {
  border-bottom-color: var(--red);
  color: var(--red-dark);
}

/* ---------- 首屏框景 ---------- */
.page-faq .faq-hero {
  background: var(--ink);
  color: var(--warm);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  padding-block: 2rem 2.4rem;
}

.page-faq .faq-hero__inner {
  display: grid;
  gap: 1.75rem;
}

.page-faq .faq-issue {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin: 0 0 0.4rem;
  font-family: var(--font-mono);
  line-height: 1;
}

.page-faq .faq-issue__num {
  font-size: clamp(2.6rem, 11vw, 4rem);
  font-weight: 700;
  color: var(--red);
  letter-spacing: -0.02em;
}

.page-faq .faq-issue__unit {
  font-size: 0.95rem;
  color: var(--warm);
}

.page-faq .faq-issue__label {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--slate);
}

.page-faq .faq-hero h1 {
  margin: 0.5rem 0 1rem;
  font-size: clamp(1.85rem, 6vw, 3.2rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.page-faq .faq-hero__lead {
  margin: 0;
  max-width: 34rem;
  font-size: 1rem;
  color: rgba(243, 235, 221, 0.86);
}

.page-faq .faq-hero__hint {
  margin: 1rem 0 0;
  font-size: 0.8125rem;
  color: var(--slate);
}

.page-faq .faq-hero__code {
  font-family: var(--font-mono);
  color: var(--gold);
  letter-spacing: 0.04em;
}

.page-faq .faq-hero__figure {
  margin: 0;
  border: 1px solid var(--line-strong);
  background: var(--midnight);
}

.page-faq .faq-hero__figure .image-frame__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.page-faq .faq-hero__figure .image-frame__caption {
  padding: 0.55rem 0.75rem;
  font-size: 0.75rem;
  color: var(--slate);
  border-top: 1px solid var(--line-strong);
}

/* ---------- 通用区块 ---------- */
.page-faq .section {
  padding-block: 2.2rem;
}

.page-faq .section-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--faq-line);
}

.page-faq .section-head__num {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  color: var(--red);
}

.page-faq .section-head__title {
  margin: 0;
  font-size: clamp(1.3rem, 3.6vw, 1.9rem);
  line-height: 1.25;
  font-weight: 700;
}

.page-faq .faq-lead,
.page-faq .faq-group__intro {
  max-width: 44rem;
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
  color: rgba(14, 27, 42, 0.78);
}

.page-faq .faq-group__tail {
  margin: 1.4rem 0 0;
  font-size: 0.875rem;
  color: rgba(14, 27, 42, 0.66);
}

.page-faq .qa-link {
  color: var(--red-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(181, 51, 34, 0.45);
}

.page-faq .qa-link:hover {
  color: var(--red);
  border-bottom-color: var(--red);
}

.page-faq .qa-link--light {
  color: var(--warm);
  border-bottom-color: rgba(243, 235, 221, 0.4);
}

.page-faq .qa-link--light:hover {
  color: #ffffff;
  border-bottom-color: var(--warm);
}

/* ---------- 分类入口 ---------- */
.page-faq .faq-lookup {
  border-bottom: 1px solid var(--faq-line);
}

.page-faq .faq-cats {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: 1fr;
}

.page-faq .faq-cat {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.7rem;
  padding: 0.95rem 0.9rem;
  background: var(--paper);
  border: 1px solid var(--faq-line);
  color: inherit;
  text-decoration: none;
  transition: border-color 200ms ease, transform 200ms ease;
}

.page-faq .faq-cat:hover,
.page-faq .faq-cat:focus-visible {
  border-color: var(--red);
  transform: translateY(-2px);
}

.page-faq .faq-cat__num {
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--red);
  line-height: 1.3;
}

.page-faq .faq-cat__title {
  font-size: 1rem;
  font-weight: 700;
}

.page-faq .faq-cat__desc {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgba(14, 27, 42, 0.68);
}

/* ---------- 高频编号 ---------- */
.page-faq .faq-nums {
  margin-top: 1.6rem;
}

.page-faq .faq-nums__caption {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: rgba(14, 27, 42, 0.55);
}

.page-faq .faq-nums__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--faq-line);
}

.page-faq .faq-nums__link {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--faq-line);
  color: inherit;
  text-decoration: none;
  font-size: 0.875rem;
}

.page-faq .faq-nums__link:hover .faq-nums__code {
  background: var(--red);
  color: var(--paper);
}

.page-faq .faq-nums__code {
  flex: none;
  padding: 0.1rem 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--red);
  border: 1px solid rgba(181, 51, 34, 0.4);
  transition: background-color 200ms ease, color 200ms ease;
}

.page-faq .faq-nums__text {
  color: rgba(14, 27, 42, 0.8);
}

/* ---------- 双栏骨架 ---------- */
.page-faq .faq-layout {
  display: grid;
  gap: 1rem;
  padding-block: 0.5rem 3rem;
}

.page-faq .faq-rail {
  position: sticky;
  top: 0;
  z-index: 4;
  margin-inline: -1.15rem;
  padding: 0.5rem 1.15rem;
  background: var(--warm);
  border-bottom: 1px solid var(--faq-line);
}

.page-faq .faq-rail__caption {
  margin: 0 0 0.35rem;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: rgba(14, 27, 42, 0.5);
}

.page-faq .faq-rail__list {
  display: flex;
  gap: 0.9rem;
  margin: 0;
  padding: 0 0 0.15rem;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-faq .faq-rail__item {
  flex: none;
}

.page-faq .faq-rail__link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding-bottom: 0.2rem;
  font-size: 0.8125rem;
  color: rgba(14, 27, 42, 0.75);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}

.page-faq .faq-rail__link:hover,
.page-faq .faq-rail__link[aria-current] {
  color: var(--red-dark);
  border-bottom-color: var(--red);
}

.page-faq .faq-rail__num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--red);
}

/* ---------- 问答组 ---------- */
.page-faq .faq-group {
  padding-top: 1.6rem;
}

.page-faq .faq-group + .faq-group {
  margin-top: 1.4rem;
  border-top: 1px solid var(--faq-line-strong);
}

.page-faq .qa {
  border-bottom: 1px solid var(--faq-line);
}

.page-faq .qa > summary {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.95rem 0;
  cursor: pointer;
  list-style: none;
}

.page-faq .qa > summary::-webkit-details-marker {
  display: none;
}

.page-faq .qa > summary::after {
  content: "+";
  margin-left: auto;
  flex: none;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--red);
  line-height: 1.2;
}

.page-faq .qa[open] > summary::after {
  content: "\2212";
}

.page-faq .qa-num {
  flex: none;
  padding-top: 0.18rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--red);
}

.page-faq .qa-q {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

.page-faq .qa[open] .qa-q {
  color: var(--ink);
}

.page-faq .qa-a {
  padding: 0 0 1.1rem 0;
}

.page-faq .qa-a p {
  margin: 0;
  max-width: 46rem;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: rgba(14, 27, 42, 0.82);
}

/* ---------- 附图 ---------- */
.page-faq .faq-figure {
  margin: 0 0 1.4rem;
  border: 1px solid var(--faq-line);
  background: var(--paper);
}

.page-faq .faq-figure .image-frame__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 7;
  object-fit: cover;
}

.page-faq .faq-figure .image-frame__caption {
  padding: 0.5rem 0.7rem;
  font-size: 0.75rem;
  color: rgba(14, 27, 42, 0.6);
  border-top: 1px solid var(--faq-line);
}

/* ---------- 归档清单 ---------- */
.page-faq .faq-archive {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--faq-line);
}

.page-faq .faq-archive__row {
  display: grid;
  gap: 0.15rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--faq-line);
}

.page-faq .faq-archive__key {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--green);
}

.page-faq .faq-archive__val {
  font-size: 0.9rem;
  color: rgba(14, 27, 42, 0.8);
}

/* ---------- 联系块 ---------- */
.page-faq .faq-contact {
  background: var(--midnight);
  color: var(--warm);
  border-top: 3px solid var(--red);
  padding: 1.5rem 1.15rem 1.6rem;
}

.page-faq .faq-contact__lead {
  margin: 0 0 1.1rem;
  font-size: 0.9375rem;
  color: rgba(243, 235, 221, 0.88);
}

.page-faq .faq-contact__list {
  margin: 0 0 1.3rem;
}

.page-faq .faq-contact__row {
  display: grid;
  gap: 0.1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(243, 235, 221, 0.16);
}

.page-faq .faq-contact__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--slate);
}

.page-faq .faq-contact__value {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--warm);
  overflow-wrap: anywhere;
}

.page-faq .faq-contact__btn {
  display: inline-block;
}

/* ---------- 断点 ---------- */
@media (min-width: 40rem) {
  .page-faq .faq-cats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-faq .faq-nums__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.6rem;
  }

  .page-faq .faq-archive__row {
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: 1rem;
    align-items: baseline;
  }

  .page-faq .faq-contact {
    padding: 1.8rem 1.6rem;
  }
}

@media (min-width: 60rem) {
  .page-faq .faq-wrap {
    padding-inline: 2.25rem;
  }

  .page-faq .faq-hero {
    padding-block: 2.8rem 3.2rem;
  }

  .page-faq .faq-hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 2.75rem;
    align-items: center;
  }

  .page-faq .section {
    padding-block: 2.8rem;
  }

  .page-faq .faq-layout {
    grid-template-columns: var(--faq-rail) minmax(0, 1fr);
    gap: 3rem;
    padding-block: 1.8rem 4rem;
  }

  .page-faq .faq-rail {
    position: sticky;
    top: 2rem;
    align-self: start;
    margin-inline: 0;
    padding: 0;
    background: transparent;
    border-bottom: 0;
    border-top: 2px solid var(--ink);
  }

  .page-faq .faq-rail__caption {
    margin-block: 0.6rem 0.4rem;
  }

  .page-faq .faq-rail__list {
    display: block;
    overflow: visible;
  }

  .page-faq .faq-rail__item + .faq-rail__item {
    border-top: 1px solid var(--faq-line);
  }

  .page-faq .faq-rail__link {
    display: flex;
    gap: 0.5rem;
    padding: 0.55rem 0 0.55rem 0.5rem;
    border-bottom: 0;
    border-left: 2px solid transparent;
    white-space: normal;
  }

  .page-faq .faq-rail__link:hover,
  .page-faq .faq-rail__link[aria-current] {
    border-left-color: var(--red);
    border-bottom-color: transparent;
    background: rgba(181, 51, 34, 0.05);
  }

  .page-faq .faq-group:first-child {
    padding-top: 0;
  }

  .page-faq .qa-q {
    font-size: 1.0625rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-cat,
  .page-faq .faq-nums__code {
    transition: none;
  }

  .page-faq .faq-cat:hover,
  .page-faq .faq-cat:focus-visible {
    transform: none;
  }
}