.page-faq {
  --faq-line: rgba(157, 180, 192, 0.18);
  --faq-line-soft: rgba(157, 180, 192, 0.1);
  --faq-band: #0E2A24;
  --faq-cell: #12352E;
  color: var(--cream);
  background: var(--ink-night);
  overflow-x: hidden;
}

.page-faq h1,
.page-faq h2,
.page-faq h3 {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin: 0;
}

.page-faq p {
  margin: 0;
}

.page-faq a {
  color: inherit;
}

.page-faq .num,
.page-faq .step__num,
.page-faq .path__num {
  font-family: var(--font-mono);
}

/* 面包屑 */
.page-faq .crumbs {
  margin-bottom: clamp(20px, 4vw, 40px);
}
.page-faq .crumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--mist);
}
.page-faq .crumbs__list li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--stone);
}
.page-faq .crumbs__list a {
  text-decoration: none;
  color: var(--mist);
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.page-faq .crumbs__list a:hover,
.page-faq .crumbs__list a:focus-visible {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}
.page-faq .crumbs__list [aria-current="page"] {
  color: var(--cream);
}

/* 首屏 */
.page-faq .tut-hero {
  position: relative;
  padding: clamp(26px, 5vw, 60px) 0 clamp(34px, 6vw, 76px);
  border-bottom: 1px solid var(--faq-line);
  background:
    radial-gradient(115% 85% at 88% -5%, rgba(95, 242, 214, 0.16), transparent 62%),
    radial-gradient(90% 75% at -5% 100%, rgba(78, 107, 88, 0.4), transparent 66%),
    var(--ink-night);
}
.page-faq .tut-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    100deg,
    transparent 0 68px,
    rgba(157, 180, 192, 0.05) 68px 69px
  );
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent 70%);
}
.page-faq .tut-hero .shell {
  position: relative;
  z-index: 1;
}
.page-faq .tut-hero__grid {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
}
.page-faq .tut-hero__lead h1 {
  font-size: clamp(2rem, 8vw, 4.4rem);
  line-height: 1.06;
  max-width: 18ch;
  margin-top: 14px;
}
.page-faq .tut-hero__lede {
  margin-top: clamp(16px, 2.4vw, 24px);
  max-width: 60ch;
  font-size: clamp(15px, 2.4vw, 17px);
  line-height: 1.8;
  color: rgba(244, 235, 221, 0.82);
}
.page-faq .tut-hero__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(20px, 3vw, 30px);
}
.page-faq .tut-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: clamp(18px, 3vw, 26px) 0 0;
  padding: 0;
}

.page-faq .tut-hero__path {
  border: 1px solid var(--faq-line);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 3vw, 26px);
  background: linear-gradient(158deg, rgba(18, 53, 46, 0.94), rgba(11, 27, 43, 0.88));
  box-shadow: inset 0 1px 0 rgba(95, 242, 214, 0.12);
}
.page-faq .tut-hero__path .annotation {
  display: block;
  margin-bottom: 12px;
}
.page-faq .path {
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-faq .path__item + .path__item {
  border-top: 1px dashed var(--faq-line-soft);
}
.page-faq .path__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 12px 4px;
  text-decoration: none;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.page-faq .path__link:hover,
.page-faq .path__link:focus-visible {
  color: var(--cyan);
  transform: translateX(3px);
  outline: none;
}
.page-faq .path__num {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--stone);
}
.page-faq .path__link:hover .path__num,
.page-faq .path__link:focus-visible .path__num {
  color: var(--cyan);
}
.page-faq .path__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.page-faq .path__body strong {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.page-faq .path__body span {
  font-size: 13px;
  line-height: 1.6;
  color: var(--mist);
}

/* 主体两栏 */
.page-faq .tut-body {
  display: grid;
  gap: clamp(20px, 4vw, 44px);
  padding: clamp(30px, 5vw, 64px) 0 clamp(44px, 7vw, 92px);
}
.page-faq .tut-toc .annotation {
  display: block;
  margin-bottom: 10px;
}
.page-faq .tut-toc__list {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.page-faq .tut-toc__list li {
  flex: 0 0 auto;
}
.page-faq .tut-toc__list a {
  display: inline-block;
  white-space: nowrap;
  padding: 7px 14px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--mist);
  border: 1px solid var(--faq-line);
  border-radius: var(--radius-pill);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.page-faq .tut-toc__list a:hover,
.page-faq .tut-toc__list a:focus-visible {
  color: var(--ink-night);
  background: var(--cyan);
  border-color: var(--cyan);
  outline: none;
}

/* 章节 */
.page-faq .tut-section {
  padding: clamp(26px, 4.4vw, 48px) 0;
  border-top: 1px solid var(--faq-line);
}
.page-faq .tut-section:first-child {
  border-top: 0;
  padding-top: 0;
}
.page-faq .tut-section--band {
  margin-top: 6px;
  padding: clamp(24px, 4vw, 44px) clamp(18px, 3vw, 34px);
  border-radius: var(--radius-lg);
  background: linear-gradient(172deg, var(--faq-band), #0b2422 78%);
  border-top: 1px solid rgba(95, 242, 214, 0.14);
}
.page-faq .tut-section__head {
  margin-bottom: clamp(20px, 3vw, 30px);
}
.page-faq .tut-section__head h2,
.page-faq .tut-split__text h2 {
  font-size: clamp(1.45rem, 4.6vw, 2.35rem);
  line-height: 1.18;
  margin-top: 12px;
  max-width: 24ch;
}
.page-faq .tut-section__lede {
  margin-top: 14px;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.78;
  color: rgba(244, 235, 221, 0.78);
}

/* 步骤 */
.page-faq .steps {
  display: grid;
  gap: 14px;
}
.page-faq .step {
  position: relative;
  padding: clamp(18px, 3vw, 26px);
  border-radius: var(--radius-md);
  background: var(--faq-cell);
  border: 1px solid var(--faq-line-soft);
}
.page-faq .step__num {
  display: block;
  font-size: clamp(26px, 6vw, 40px);
  line-height: 1;
  font-weight: 600;
  color: var(--cyan);
  letter-spacing: -0.02em;
}
.page-faq .step h3 {
  margin-top: 12px;
  font-size: clamp(16px, 2.6vw, 19px);
  line-height: 1.4;
}
.page-faq .step p {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.78;
  color: rgba(244, 235, 221, 0.78);
}

/* 图片 */
.page-faq .tut-figure {
  margin: clamp(22px, 3.4vw, 34px) 0 0;
}
.page-faq .tut-figure img,
.page-faq .tut-split__media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: linear-gradient(150deg, #12352E, #07121D);
}
.page-faq .tut-figure__cap {
  display: block;
  margin-top: 10px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--mist);
}
.page-faq .tut-figure__cap .num {
  color: var(--amber);
  margin-right: 8px;
}

/* 提示条 */
.page-faq .tut-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: clamp(18px, 3vw, 26px);
  padding: 14px 16px;
  border-left: 2px solid var(--amber);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(245, 166, 35, 0.07);
  font-size: 14px;
  line-height: 1.75;
  color: rgba(244, 235, 221, 0.85);
}
.page-faq .tut-note__dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--amber);
}

/* 三维筛选 */
.page-faq .filters {
  display: grid;
  gap: 1px;
  background: rgba(157, 180, 192, 0.16);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.page-faq .filter-cell {
  padding: clamp(18px, 3vw, 24px);
  background: #0b2422;
}
.page-faq .filter-cell h3 {
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--cyan);
}
.page-faq .filter-cell p {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.78;
  color: rgba(244, 235, 221, 0.78);
}

.page-faq .defaults {
  margin-top: clamp(18px, 3vw, 26px);
  padding-top: clamp(16px, 2.6vw, 22px);
  border-top: 1px dashed var(--faq-line);
}
.page-faq .defaults__title {
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--stone);
}
.page-faq .defaults__list {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
}
.page-faq .defaults__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(244, 235, 221, 0.86);
}
.page-faq .defaults__list .num {
  color: var(--moss);
  font-size: 13px;
}

/* 收藏分栏 */
.page-faq .tut-split {
  display: grid;
  gap: clamp(20px, 3.6vw, 36px);
}
.page-faq .tut-split__text p {
  margin-top: 14px;
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(244, 235, 221, 0.8);
}
.page-faq .checklist {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
}
.page-faq .checklist li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(244, 235, 221, 0.86);
}
.page-faq .checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--cyan);
}
.page-faq .tut-split__media {
  margin: 0;
}
.page-faq .tut-split__media .tut-figure__cap {
  color: var(--mist);
}

/* 条件保持时间线 */
.page-faq .track {
  list-style: none;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
}
.page-faq .track__item {
  position: relative;
  padding: 0 0 clamp(18px, 3vw, 26px) 26px;
  border-left: 1px solid var(--faq-line);
}
.page-faq .track__item:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}
.page-faq .track__marker {
  position: absolute;
  left: -5px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.14);
}
.page-faq .track__item h3 {
  font-size: 16px;
  line-height: 1.45;
}
.page-faq .track__item p {
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.78;
  color: rgba(244, 235, 221, 0.78);
  max-width: 58ch;
}

/* 端上对照 */
.page-faq .device-grid {
  display: grid;
  gap: 14px;
}
.page-faq .device {
  padding: clamp(18px, 3vw, 26px);
  border-radius: var(--radius-md);
  background: linear-gradient(165deg, #12352E, #0b1f22);
  border: 1px solid var(--faq-line-soft);
}
.page-faq .device .pill {
  display: inline-block;
}
.page-faq .device h3 {
  margin-top: 14px;
  font-size: clamp(16px, 2.6vw, 19px);
  line-height: 1.4;
}
.page-faq .device p {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.8;
  color: rgba(244, 235, 221, 0.78);
}

/* 常见问题折叠 */
.page-faq .fold {
  border-top: 1px solid var(--faq-line);
}
.page-faq .fold:last-of-type {
  border-bottom: 1px solid var(--faq-line);
}
.page-faq .fold__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 4px;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--font-sans);
  font-size: clamp(14.5px, 2.4vw, 16.5px);
  font-weight: 700;
  color: var(--cream);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.page-faq .fold__head:hover,
.page-faq .fold__head:focus-visible {
  color: var(--cyan);
  outline: none;
}
.page-faq .fold__head[aria-expanded="true"] {
  color: var(--cyan);
}
.page-faq .fold__icon {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--stone);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.page-faq .fold__head[aria-expanded="true"] .fold__icon {
  transform: rotate(90deg);
  color: var(--cyan);
}
.page-faq .fold__body {
  padding: 0 4px 20px;
  max-width: 66ch;
  font-size: 14.5px;
  line-height: 1.82;
  color: rgba(244, 235, 221, 0.78);
}

/* 后续入口 */
.page-faq .tut-next {
  margin-top: clamp(30px, 5vw, 56px);
  padding-top: clamp(24px, 4vw, 38px);
  border-top: 1px solid var(--faq-line);
}
.page-faq .tut-next h2 {
  font-size: clamp(1.2rem, 3.6vw, 1.75rem);
  line-height: 1.3;
}
.page-faq .tut-next__grid {
  display: grid;
  gap: 12px;
  margin-top: clamp(16px, 3vw, 24px);
}
.page-faq .next-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(16px, 3vw, 22px);
  border-radius: var(--radius-md);
  border: 1px solid var(--faq-line);
  text-decoration: none;
  background: rgba(14, 42, 36, 0.55);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.page-faq .next-card:hover,
.page-faq .next-card:focus-visible {
  border-color: var(--cyan);
  background: rgba(18, 53, 46, 0.9);
  transform: translateY(-2px);
  outline: none;
}
.page-faq .next-card .annotation {
  color: var(--mist);
}
.page-faq .next-card strong {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.page-faq .next-card span:last-child {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--mist);
}

/* 平板及以上 */
@media (min-width: 640px) {
  .page-faq .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-faq .tut-next__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 760px) {
  .page-faq .filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-faq .device-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .page-faq .tut-hero__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    align-items: end;
  }
  .page-faq .tut-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .page-faq .tut-body {
    grid-template-columns: 210px minmax(0, 1fr);
    align-items: start;
  }
  .page-faq .tut-toc {
    position: sticky;
    top: 96px;
  }
  .page-faq .tut-toc__list {
    display: grid;
    gap: 4px;
    overflow: visible;
    padding-bottom: 0;
  }
  .page-faq .tut-toc__list a {
    display: block;
    white-space: normal;
    padding: 8px 10px;
    border-color: transparent;
    border-radius: var(--radius-sm);
    border-left: 2px solid var(--faq-line);
  }
  .page-faq .tut-toc__list a:hover,
  .page-faq .tut-toc__list a:focus-visible {
    background: rgba(95, 242, 214, 0.1);
    color: var(--cyan);
    border-color: var(--cyan);
    border-left-color: var(--cyan);
  }
  .page-faq .step__num {
    font-size: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .path__link,
  .page-faq .next-card,
  .page-faq .fold__icon {
    transition: none;
  }
  .page-faq .path__link:hover,
  .page-faq .path__link:focus-visible,
  .page-faq .next-card:hover,
  .page-faq .next-card:focus-visible {
    transform: none;
  }
}

Wait — I output PAGE_CSS marker once. Let me check the output above: I wrote `` once after main .page-faq, then CSS, then at the end I wrote `` again and repeated. That's wrong. I must output only markers once each. Let me fix by re-outputting the whole thing correctly.

Actually the final answer must contain exactly: MAIN_HTML then PAGE_CSS, each once. My CSS content follows PAGE_CSS marker once; the trailing duplicate must be removed. I'll re-emit the full answer.
<main id="main-content" class="page-faq">
  <section class="tut-hero">
    <div class="shell">
      <nav class="crumbs" aria-label="面包屑">
        <ol class="crumbs__list">
          <li><a href="/">赛季主页</a></li>
          <li aria-current="page">使用教程</li>
        </ol>
      </nav>

      <div class="tut-hero__grid">
        <div class="tut-hero__lead">
          <p class="eyebrow">操作指引</p>
          <h1>从收藏入口出发，两步落到目标球队的积分与动态</h1>
          <p class="tut-hero__lede">赛前十分钟要确认阵容，赛后想核对排名变化，最耗时间的往往不是看，而是来回翻联赛。十博体育中文站把筛选、收藏和球队动态接成一条短路径：先把常看的联赛固定住，之后从顶部入口点两下，就能停在你要的那支球队上。</p>
          <div class="tut-hero__acts">
            <a class="btn btn--accent" href="#step-two">从第一步开始</a>
            <a class="btn btn--quiet" href="#faq">先看常见问题</a>
          </div>
          <ul class="tut-hero__tags" aria-label="要点提示">
            <li class="pill pill--league">收藏上限 12 个组合</li>
            <li class="pill pill--points">本地保存</li>
            <li class="pill pill--moss">移动端同样两步</li>
          </ul>
        </div>

        <div class="tut-hero__path">
          <p class="annotation">完整学习路径 · 01 → 06</p>
          <ol class="path">
            <li class="path__item">
              <a class="path__link" href="#step-two">
                <span class="path__num">01</span>
                <span class="path__body"><strong>两步定位</strong><span>收藏入口 → 积分榜或球队动态</span></span>
              </a>
            </li>
            <li class="path__item">
              <a class="path__link" href="#filters">
                <span class="path__num">02</span>
                <span class="path__body"><strong>三维筛选</strong><span>联赛、赛季、球队组合过滤</span></span>
              </a>
            </li>
            <li class="path__item">
              <a class="path__link" href="#favorite">
                <span class="path__num">03</span>
                <span class="path__body"><strong>收藏固定</strong><span>把常看的联赛钉在入口</span></span>
              </a>
            </li>
            <li class="path__item">
              <a class="path__link" href="#states">
                <span class="path__num">04</span>
                <span class="path__body"><strong>条件保持</strong><span>多联赛并行浏览不重选</span></span>
              </a>
            </li>
            <li class="path__item">
              <a class="path__link" href="#devices">
                <span class="path__num">05</span>
                <span class="path__body"><strong>端上差异</strong><span>手机与桌面的两种手感</span></span>
              </a>
            </li>
            <li class="path__item">
              <a class="path__link" href="#faq">
                <span class="path__num">06</span>
                <span class="path__body"><strong>疑难处理</strong><span>找不到球队、收藏丢失等</span></span>
              </a>
            </li>
          </ol>
        </div>
      </div>
    </div>
  </section>

  <div class="shell tut-body">
    <aside class="tut-toc" aria-label="本页目录">
      <p class="annotation">目录索引</p>
      <ul class="tut-toc__list">
        <li><a href="#step-two">01 两步定位</a></li>
        <li><a href="#filters">02 三维筛选</a></li>
        <li><a href="#favorite">03 收藏固定</a></li>
        <li><a href="#states">04 条件保持</a></li>
        <li><a href="#devices">05 端上差异</a></li>
        <li><a href="#faq">06 常见问题</a></li>
      </ul>
    </aside>

    <div class="tut-main">
      <section class="tut-section" id="step-two" aria-labelledby="step-two-title">
        <div class="tut-section__head">
          <p class="eyebrow">快速入门</p>
          <h2 id="step-two-title">第一步选中联赛或球队，第二步落到积分榜</h2>
          <p class="tut-section__lede">整条路径只有两个动作。收藏入口常驻页面顶部，点开就是一行胶囊标签；选完以后，顶部视图切换决定你看到的是排名还是球队近况。</p>
        </div>

        <div class="steps">
          <article class="step">
            <span class="step__num">01</span>
            <h3>在收藏入口点一支球队，或一个联赛</h3>
            <p>胶囊按联赛与球队两类排列，点哪一项就以哪一项为准展开。还没收藏过也没关系，从左侧联赛轴挑一个联赛，同样算作这一步。</p>
          </article>
          <article class="step">
            <span class="step__num">02</span>
            <h3>在视图切换里选积分榜或球队动态</h3>
            <p>两个视图共用同一套筛选条件，来回切不用重选。积分榜看排名与净胜球，球队动态看阵容变化和赛前消息。</p>
          </article>
        </div>

        <figure class="media-frame media-frame--wide tut-figure">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="两步定位路径示意：收藏入口的联赛与球队胶囊经荧光青路径连接到积分榜视图和球队动态视图" loading="lazy" decoding="async">
          <figcaption class="tut-figure__cap"><span class="num">01 → 02</span> 选中球队之后，积分榜与球队动态在同一条件上切换</figcaption>
        </figure>

        <p class="tut-note"><span class="tut-note__dot" aria-hidden="true"></span>开赛前十分钟最赶，这时从收藏入口进入比逐级翻菜单省事得多；常看的联赛越多，省下的步骤越明显。</p>
      </section>

      <section class="tut-section tut-section--band" id="filters" aria-labelledby="filters-title">
        <div class="tut-section__head">
          <p class="eyebrow">组合筛选</p>
          <h2 id="filters-title">联赛、赛季、球队三个维度，怎么叠都清楚</h2>
          <p class="tut-section__lede">三个条件是叠加关系，不是互相覆盖。先定联赛，再定赛季，最后锁定球队，任一步改动都会立刻反映到下面的列表。</p>
        </div>

        <div class="filters">
          <article class="filter-cell">
            <h3>联赛</h3>
            <p>全部联赛分足球与综合体育两组排列，当前覆盖 28 个联赛。选中最外层联赛后，赛季与球队选项随之收窄。</p>
          </article>
          <article class="filter-cell">
            <h3>赛季</h3>
            <p>可回溯 6 个赛季的历史资料。切到早前的赛季，积分榜、战报和球队动态一起回到那个赛季的对应内容。</p>
          </article>
          <article class="filter-cell">
            <h3>球队</h3>
            <p>点选或输入球队名都能定位。命中之后，积分榜中该球队所在行以琥珀橙标出，方便一眼看到排名与积分。</p>
          </article>
        </div>

        <div class="defaults">
          <p class="defaults__title">筛选轴的默认顺序</p>
          <ol class="defaults__list">
            <li><span class="num">①</span> 已收藏的联赛排在最前，常用的不用找</li>
            <li><span class="num">②</span> 其次是最近浏览过的联赛，接着上次继续看</li>
            <li><span class="num">③</span> 最后是全部联赛，按分组完整展开</li>
          </ol>
        </div>
      </section>

      <section class="tut-section" id="favorite" aria-labelledby="favorite-title">
        <div class="tut-split">
          <div class="tut-split__text">
            <p class="eyebrow">收藏固定</p>
            <h2 id="favorite-title">把常看的联赛钉在入口，最多 12 个组合</h2>
            <p>收藏体育赛事积分榜页面筛选的思路很简单：你固定下来的是一套条件——某个联赛、某个赛季、某支球队的搭配。以后打开入口，点的就是这一整套，不用每次重新挑。</p>
            <ul class="checklist">
              <li>组合上限为 12 个，涵盖联赛与球队两类固定项</li>
              <li>收藏信息保存在本地浏览器，无需登录即可使用</li>
              <li>再点一次同一个胶囊即可取消收藏，入口即时更新</li>
              <li>收藏区末尾提供整理入口，可对照清单逐项清理</li>
            </ul>
          </div>
          <figure class="tut-split__media">
            <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="收藏示意图：荧光青收藏胶囊、联赛与球队筛选标签以及本地保存标识组成的组合关系" loading="lazy" decoding="async">
            <figcaption class="tut-figure__cap">一个胶囊对应一套固定条件</figcaption>
          </figure>
        </div>
        <p class="tut-note"><span class="tut-note__dot" aria-hidden="true"></span>收藏已满 12 个时，先取消一个较少查看的组合再添加新的，入口内的排序不会因此被打乱。</p>
      </section>

      <section class="tut-section tut-section--band" id="states" aria-labelledby="states-title">
        <div class="tut-section__head">
          <p class="eyebrow">多联赛并行</p>
          <h2 id="states-title">几个联赛轮着看，筛选条件不会被清掉</h2>
          <p class="tut-section__lede">同一轮里同时盯争冠组和保级组是常事。在联赛之间来回切换时，你之前定下的赛季与球队条件会跟着保留，回到列表还是原来那一屏。</p>
        </div>

        <ol class="track">
          <li class="track__item">
            <span class="track__marker" aria-hidden="true"></span>
            <h3>切换联赛，赛季不退回</h3>
            <p>从足球联赛跳到综合体育联赛再回来，先前选定的赛季仍然是原来那个，不必重新点一遍。</p>
          </li>
          <li class="track__item">
            <span class="track__marker" aria-hidden="true"></span>
            <h3>球队条件随联赛走</h3>
            <p>球队名会一直保留在筛选位置。换到的联赛里没有这支球队时，筛选停在球队一栏等你重新挑选，其余条件不动。</p>
          </li>
          <li class="track__item">
            <span class="track__marker" aria-hidden="true"></span>
            <h3>从详情页返回，回到原位置</h3>
            <p>看完一场战报或一条球队动态再返回，列表停在刚才那一页，滚动位置与筛选条件一起回来。</p>
          </li>
        </ol>
      </section>

      <section class="tut-section" id="devices" aria-labelledby="devices-title">
        <div class="tut-section__head">
          <p class="eyebrow">端上差异</p>
          <h2 id="devices-title">手机和桌面，各有各的顺手方式</h2>
        </div>

        <div class="device-grid">
          <article class="device">
            <span class="pill pill--league">移动端</span>
            <h3>顶部收藏条 + 底部筛选抽屉</h3>
            <p>收藏条常驻屏幕上方，一点即开；联赛、赛季、球队三组条件收在底部抽屉里，向上滑出即可切换。页面上还有一条步骤条，告诉你当前停在第几步，两下点到目标球队的路径在手机上同样成立。</p>
          </article>
          <article class="device">
            <span class="pill pill--moss">桌面端</span>
            <h3>左侧筛选轴 + 右侧动态卡</h3>
            <p>筛选轴沿页面左侧纵向固定，滚动到积分榜深处也能随手切换。右侧球队动态卡随页面停留，改完条件后不必回到顶部就能看到新的赛前消息。</p>
          </article>
        </div>
      </section>

      <section class="tut-section" id="faq" aria-labelledby="faq-title">
        <div class="tut-section__head">
          <p class="eyebrow">常见问题</p>
          <h2 id="faq-title">操作中卡住时，先看这几条</h2>
          <p class="tut-section__lede">展开任意一条查看处理方式，用键盘回车或空格同样可以打开。</p>
        </div>

        <div class="fold" data-fold>
          <button class="fold__head" data-fold-head aria-expanded="false" type="button">
            筛选之后找不到目标球队<span class="fold__icon">›</span>
          </button>
          <div class="fold__panel">
            <div class="fold__body">
              <p>先确认赛季是否被切到较早的年份，历史赛季只收录当季参赛的球队。其次检查联赛层级，足球与综合体育分开编排，跨组查找时要先切回对应分组。若球队名含常见简称，改用全称前两个字再试一次。</p>
            </div>
          </div>
        </div>

        <div class="fold" data-fold>
          <button class="fold__head" data-fold-head aria-expanded="false" type="button">
            收藏的联赛突然不见了<span class="fold__icon">›</span>
          </button>
          <div class="fold__panel">
            <div class="fold__body">
              <p>收藏保存在当前浏览器本地。清理浏览记录、切换无痕窗口或换用另一台设备后，入口会显示为未收藏状态。重新收藏一次即可恢复，之前固定过的组合按同样的条件再选一遍就回来了。</p>
            </div>
          </div>
        </div>

        <div class="fold" data-fold>
          <button class="fold__head" data-fold-head aria-expanded="false" type="button">
            积分榜多久刷新一次<span class="fold__icon">›</span>
          </button>
          <div class="fold__panel">
            <div class="fold__body">
              <p>积分与比分每 60 秒同步一次，页面停留期间会持续更新。战报在赛后 30 分钟内发布，球队动态每天 09:00、15:00、21:00 三个时段更新，看到的时间标记就是当次更新的时刻。</p>
            </div>
          </div>
        </div>

        <div class="fold" data-fold>
          <button class="fold__head" data-fold-head aria-expanded="false" type="button">
            条件选完，列表却是空的<span class="fold__icon">›</span>
          </button>
          <div class="fold__panel">
            <div class="fold__body">
              <p>多半是三个维度的交集没有对上，例如某支球队在该赛季并未参加所选联赛。把球队一栏清空回到联赛层级，再逐个加条件，就能看出是哪一层把结果收窄到了空集。</p>
            </div>
          </div>
        </div>

        <div class="fold" data-fold>
          <button class="fold__head" data-fold-head aria-expanded="false" type="button">
            收藏到 12 个以后想再加一个<span class="fold__icon">›</span>
          </button>
          <div class="fold__panel">
            <div class="fold__body">
              <p>从收藏区末尾进入整理入口，先取消一个查看频率较低的组合，腾出位置后再收藏新的。取消会立即从入口移除，重新加入时按当时的条件重新固定即可。</p>
            </div>
          </div>
        </div>

        <div class="fold" data-fold>
          <button class="fold__head" data-fold-head aria-expanded="false" type="button">
            收藏需要注册账号吗<span class="fold__icon">›</span>
          </button>
          <div class="fold__panel">
            <div class="fold__body">
              <p>不需要。收藏信息保存在本地浏览器，打开即用，最多可固定 12 个组合。也正因如此，换设备之后需要在新设备上重新收藏一次。</p>
            </div>
          </div>
        </div>
      </section>

      <section class="tut-next" aria-labelledby="tut-next-title">
        <h2 id="tut-next-title">学会操作之后，接着往这几处走</h2>
        <div class="tut-next__grid">
          <a class="next-card" href="/solutions/">
            <span class="annotation">功能总览</span>
            <strong>方案中心</strong>
            <span>筛选、排序、收藏与媒体数据接口的完整说明</span>
          </a>
          <a class="next-card" href="/updates/">
            <span class="annotation">版本与栏目</span>
            <strong>最新动态</strong>
            <span>赛季版本调整、战报专题与合作进展</span>
          </a>
          <a class="next-card" href="/consult/">
            <span class="annotation">联系与支持</span>
            <strong>咨询服务</strong>
            <span>使用问题、内容纠错与数据合作咨询</span>
          </a>
        </div>
      </section>
    </div>
  </div>
</main>

.page-faq {
  --faq-line: rgba(157, 180, 192, 0.18);
  --faq-line-soft: rgba(157, 180, 192, 0.1);
  --faq-band: #0E2A24;
  --faq-cell: #12352E;
  color: var(--cream);
  background: var(--ink-night);
  overflow-x: hidden;
}

.page-faq h1,
.page-faq h2,
.page-faq h3 {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin: 0;
}

.page-faq p {
  margin: 0;
}

.page-faq a {
  color: inherit;
}

.page-faq .num,
.page-faq .step__num,
.page-faq .path__num {
  font-family: var(--font-mono);
}

/* 面包屑 */
.page-faq .crumbs {
  margin-bottom: clamp(20px, 4vw, 40px);
}
.page-faq .crumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--mist);
}
.page-faq .crumbs__list li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--stone);
}
.page-faq .crumbs__list a {
  text-decoration: none;
  color: var(--mist);
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.page-faq .crumbs__list a:hover,
.page-faq .crumbs__list a:focus-visible {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}
.page-faq .crumbs__list [aria-current="page"] {
  color: var(--cream);
}

/* 首屏 */
.page-faq .tut-hero {
  position: relative;
  padding: clamp(26px, 5vw, 60px) 0 clamp(34px, 6vw, 76px);
  border-bottom: 1px solid var(--faq-line);
  background:
    radial-gradient(115% 85% at 88% -5%, rgba(95, 242, 214, 0.16), transparent 62%),
    radial-gradient(90% 75% at -5% 100%, rgba(78, 107, 88, 0.4), transparent 66%),
    var(--ink-night);
}
.page-faq .tut-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    100deg,
    transparent 0 68px,
    rgba(157, 180, 192, 0.05) 68px 69px
  );
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent 70%);
}
.page-faq .tut-hero .shell {
  position: relative;
  z-index: 1;
}
.page-faq .tut-hero__grid {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
}
.page-faq .tut-hero__lead h1 {
  font-size: clamp(2rem, 8vw, 4.4rem);
  line-height: 1.06;
  max-width: 18ch;
  margin-top: 14px;
}
.page-faq .tut-hero__lede {
  margin-top: clamp(16px, 2.4vw, 24px);
  max-width: 60ch;
  font-size: clamp(15px, 2.4vw, 17px);
  line-height: 1.8;
  color: rgba(244, 235, 221, 0.82);
}
.page-faq .tut-hero__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(20px, 3vw, 30px);
}
.page-faq .tut-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: clamp(18px, 3vw, 26px) 0 0;
  padding: 0;
}

.page-faq .tut-hero__path {
  border: 1px solid var(--faq-line);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 3vw, 26px);
  background: linear-gradient(158deg, rgba(18, 53, 46, 0.94), rgba(11, 27, 43, 0.88));
  box-shadow: inset 0 1px 0 rgba(95, 242, 214, 0.12);
}
.page-faq .tut-hero__path .annotation {
  display: block;
  margin-bottom: 12px;
}
.page-faq .path {
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-faq .path__item + .path__item {
  border-top: 1px dashed var(--faq-line-soft);
}
.page-faq .path__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 12px 4px;
  text-decoration: none;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.page-faq .path__link:hover,
.page-faq .path__link:focus-visible {
  color: var(--cyan);
  transform: translateX(3px);
  outline: none;
}
.page-faq .path__num {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--stone);
}
.page-faq .path__link:hover .path__num,
.page-faq .path__link:focus-visible .path__num {
  color: var(--cyan);
}
.page-faq .path__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.page-faq .path__body strong {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.page-faq .path__body span {
  font-size: 13px;
  line-height: 1.6;
  color: var(--mist);
}

/* 主体两栏 */
.page-faq .tut-body {
  display: grid;
  gap: clamp(20px, 4vw, 44px);
  padding: clamp(30px, 5vw, 64px) 0 clamp(44px, 7vw, 92px);
}
.page-faq .tut-toc .annotation {
  display: block;
  margin-bottom: 10px;
}
.page-faq .tut-toc__list {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.page-faq .tut-toc__list li {
  flex: 0 0 auto;
}
.page-faq .tut-toc__list a {
  display: inline-block;
  white-space: nowrap;
  padding: 7px 14px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--mist);
  border: 1px solid var(--faq-line);
  border-radius: var(--radius-pill);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.page-faq .tut-toc__list a:hover,
.page-faq .tut-toc__list a:focus-visible {
  color: var(--ink-night);
  background: var(--cyan);
  border-color: var(--cyan);
  outline: none;
}

/* 章节 */
.page-faq .tut-section {
  padding: clamp(26px, 4.4vw, 48px) 0;
  border-top: 1px solid var(--faq-line);
}
.page-faq .tut-section:first-child {
  border-top: 0;
  padding-top: 0;
}
.page-faq .tut-section--band {
  margin-top: 6px;
  padding: clamp(24px, 4vw, 44px) clamp(18px, 3vw, 34px);
  border-radius: var(--radius-lg);
  background: linear-gradient(172deg, var(--faq-band), #0b2422 78%);
  border-top: 1px solid rgba(95, 242, 214, 0.14);
}
.page-faq .tut-section__head {
  margin-bottom: clamp(20px, 3vw, 30px);
}
.page-faq .tut-section__head h2,
.page-faq .tut-split__text h2 {
  font-size: clamp(1.45rem, 4.6vw, 2.35rem);
  line-height: 1.18;
  margin-top: 12px;
  max-width: 24ch;
}
.page-faq .tut-section__lede {
  margin-top: 14px;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.78;
  color: rgba(244, 235, 221, 0.78);
}

/* 步骤 */
.page-faq .steps {
  display: grid;
  gap: 14px;
}
.page-faq .step {
  position: relative;
  padding: clamp(18px, 3vw, 26px);
  border-radius: var(--radius-md);
  background: var(--faq-cell);
  border: 1px solid var(--faq-line-soft);
}
.page-faq .step__num {
  display: block;
  font-size: clamp(26px, 6vw, 40px);
  line-height: 1;
  font-weight: 600;
  color: var(--cyan);
  letter-spacing: -0.02em;
}
.page-faq .step h3 {
  margin-top: 12px;
  font-size: clamp(16px, 2.6vw, 19px);
  line-height: 1.4;
}
.page-faq .step p {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.78;
  color: rgba(244, 235, 221, 0.78);
}

/* 图片 */
.page-faq .tut-figure {
  margin: clamp(22px, 3.4vw, 34px) 0 0;
}
.page-faq .tut-figure img,
.page-faq .tut-split__media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: linear-gradient(150deg, #12352E, #07121D);
}
.page-faq .tut-figure__cap {
  display: block;
  margin-top: 10px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--mist);
}
.page-faq .tut-figure__cap .num {
  color: var(--amber);
  margin-right: 8px;
}

/* 提示条 */
.page-faq .tut-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: clamp(18px, 3vw, 26px);
  padding: 14px 16px;
  border-left: 2px solid var(--amber);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(245, 166, 35, 0.07);
  font-size: 14px;
  line-height: 1.75;
  color: rgba(244, 235, 221, 0.85);
}
.page-faq .tut-note__dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--amber);
}

/* 三维筛选 */
.page-faq .filters {
  display: grid;
  gap: 1px;
  background: rgba(157, 180, 192, 0.16);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.page-faq .filter-cell {
  padding: clamp(18px, 3vw, 24px);
  background: #0b2422;
}
.page-faq .filter-cell h3 {
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--cyan);
}
.page-faq .filter-cell p {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.78;
  color: rgba(244, 235, 221, 0.78);
}

.page-faq .defaults {
  margin-top: clamp(18px, 3vw, 26px);
  padding-top: clamp(16px, 2.6vw, 22px);
  border-top: 1px dashed var(--faq-line);
}
.page-faq .defaults__title {
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--stone);
}
.page-faq .defaults__list {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
}
.page-faq .defaults__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(244, 235, 221, 0.86);
}
.page-faq .defaults__list .num {
  color: var(--moss);
  font-size: 13px;
}

/* 收藏分栏 */
.page-faq .tut-split {
  display: grid;
  gap: clamp(20px, 3.6vw, 36px);
}
.page-faq .tut-split__text p {
  margin-top: 14px;
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(244, 235, 221, 0.8);
}
.page-faq .checklist {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
}
.page-faq .checklist li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(244, 235, 221, 0.86);
}
.page-faq .checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--cyan);
}
.page-faq .tut-split__media {
  margin: 0;
}
.page-faq .tut-split__media .tut-figure__cap {
  color: var(--mist);
}

/* 条件保持时间线 */
.page-faq .track {
  list-style: none;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
}
.page-faq .track__item {
  position: relative;
  padding: 0 0 clamp(18px, 3vw, 26px) 26px;
  border-left: 1px solid var(--faq-line);
}
.page-faq .track__item:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}
.page-faq .track__marker {
  position: absolute;
  left: -5px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.14);
}
.page-faq .track__item h3 {
  font-size: 16px;
  line-height: 1.45;
}
.page-faq .track__item p {
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.78;
  color: rgba(244, 235, 221, 0.78);
  max-width: 58ch;
}

/* 端上对照 */
.page-faq .device-grid {
  display: grid;
  gap: 14px;
}
.page-faq .device {
  padding: clamp(18px, 3vw, 26px);
  border-radius: var(--radius-md);
  background: linear-gradient(165deg, #12352E, #0b1f22);
  border: 1px solid var(--faq-line-soft);
}
.page-faq .device .pill {
  display: inline-block;
}
.page-faq .device h3 {
  margin-top: 14px;
  font-size: clamp(16px, 2.6vw, 19px);
  line-height: 1.4;
}
.page-faq .device p {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.8;
  color: rgba(244, 235, 221, 0.78);
}

/* 常见问题折叠 */
.page-faq .fold {
  border-top: 1px solid var(--faq-line);
}
.page-faq .fold:last-of-type {
  border-bottom: 1px solid var(--faq-line);
}
.page-faq .fold__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 4px;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--font-sans);
  font-size: clamp(14.5px, 2.4vw, 16.5px);
  font-weight: 700;
  color: var(--cream);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.page-faq .fold__head:hover,
.page-faq .fold__head:focus-visible {
  color: var(--cyan);
  outline: none;
}
.page-faq .fold__head[aria-expanded="true"] {
  color: var(--cyan);
}
.page-faq .fold__icon {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--stone);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.page-faq .fold__head[aria-expanded="true"] .fold__icon {
  transform: rotate(90deg);
  color: var(--cyan);
}
.page-faq .fold__body {
  padding: 0 4px 20px;
  max-width: 66ch;
  font-size: 14.5px;
  line-height: 1.82;
  color: rgba(244, 235, 221, 0.78);
}

/* 后续入口 */
.page-faq .tut-next {
  margin-top: clamp(30px, 5vw, 56px);
  padding-top: clamp(24px, 4vw, 38px);
  border-top: 1px solid var(--faq-line);
}
.page-faq .tut-next h2 {
  font-size: clamp(1.2rem, 3.6vw, 1.75rem);
  line-height: 1.3;
}
.page-faq .tut-next__grid {
  display: grid;
  gap: 12px;
  margin-top: clamp(16px, 3vw, 24px);
}
.page-faq .next-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(16px, 3vw, 22px);
  border-radius: var(--radius-md);
  border: 1px solid var(--faq-line);
  text-decoration: none;
  background: rgba(14, 42, 36, 0.55);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.page-faq .next-card:hover,
.page-faq .next-card:focus-visible {
  border-color: var(--cyan);
  background: rgba(18, 53, 46, 0.9);
  transform: translateY(-2px);
  outline: none;
}
.page-faq .next-card .annotation {
  color: var(--mist);
}
.page-faq .next-card strong {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.page-faq .next-card span:last-child {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--mist);
}

/* 响应式 */
@media (min-width: 640px) {
  .page-faq .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-faq .tut-next__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 760px) {
  .page-faq .filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-faq .device-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .page-faq .tut-hero__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    align-items: end;
  }
  .page-faq .tut-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .page-faq .tut-body {
    grid-template-columns: 210px minmax(0, 1fr);
    align-items: start;
  }
  .page-faq .tut-toc {
    position: sticky;
    top: 96px;
  }
  .page-faq .tut-toc__list {
    display: grid;
    gap: 4px;
    overflow: visible;
    padding-bottom: 0;
  }
  .page-faq .tut-toc__list a {
    display: block;
    white-space: normal;
    padding: 8px 10px;
    border-color: transparent;
    border-left: 2px solid var(--faq-line);
    border-radius: var(--radius-sm);
  }
  .page-faq .tut-toc__list a:hover,
  .page-faq .tut-toc__list a:focus-visible {
    background: rgba(95, 242, 214, 0.1);
    color: var(--cyan);
    border-left-color: var(--cyan);
  }
  .page-faq .step__num {
    font-size: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .path__link,
  .page-faq .next-card,
  .page-faq .fold__icon,
  .page-faq .crumbs__list a {
    transition: none;
  }
  .page-faq .path__link:hover,
  .page-faq .path__link:focus-visible,
  .page-faq .next-card:hover,
  .page-faq .next-card:focus-visible {
    transform: none;
  }
}