.page-products {
  --pf-line-soft: rgba(43, 49, 44, 0.85);
  --pf-txt-dim: rgba(232, 226, 214, 0.72);
  --pf-txt-mute: rgba(232, 226, 214, 0.5);
  display: block;
  overflow-x: clip;
  padding-bottom: 96px;
  background:
    radial-gradient(120% 70% at 84% 0%, rgba(18, 37, 28, 0.92) 0%, rgba(10, 13, 11, 0) 60%),
    var(--ink);
  color: var(--text-light);
}

/* 面包屑 */
.page-products .pf-crumb-wrap {
  padding-top: 88px;
}

.page-products .pf-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  color: var(--pf-txt-mute);
}

.page-products .pf-crumb a {
  color: var(--gold);
  text-decoration: none;
}

.page-products .pf-crumb a:hover {
  color: var(--gold-bright);
}

.page-products .pf-crumb__sep {
  color: var(--line);
}

/* 首屏 */
.page-products .pf-hero {
  padding-top: 34px;
}

.page-products .pf-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 44px;
}

.page-products .pf-hero__eyebrow {
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  letter-spacing: 0.2em;
  color: var(--gold);
}

.page-products .pf-hero h1 {
  margin: 0 0 22px;
  font-family: var(--font-serif);
  font-size: clamp(32px, 7vw, var(--fs-64));
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: 0.02em;
  color: var(--paper);
}

.page-products .pf-hero__lede {
  max-width: 56ch;
  margin: 0 0 32px;
  font-size: var(--fs-16);
  line-height: 1.85;
  color: var(--pf-txt-dim);
}

.page-products .pf-hero__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--line);
  overflow: hidden;
}

.page-products .pf-metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 16px;
  background: var(--felt);
}

.page-products .pf-metric__v {
  font-family: var(--font-mono);
  font-size: var(--fs-28);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--gold);
}

.page-products .pf-metric__k {
  font-size: var(--fs-13);
  color: var(--pf-txt-mute);
}

.page-products .pf-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.page-products .pf-hero__art {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(158deg, var(--felt) 0%, #0c1712 100%);
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.55);
}

.page-products .pf-art {
  display: block;
  width: 100%;
  height: auto;
}

/* 通用区块 */
.page-products .pf-section {
  padding-top: 92px;
}

.page-products .pf-head {
  max-width: 720px;
  margin-bottom: 40px;
}

/* 分类卡 */
.page-products .pf-cat-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.page-products .pf-cat {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, var(--felt-2) 0%, var(--felt) 70%);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.page-products .pf-cat:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 164, 92, 0.55);
  box-shadow: 0 24px 60px -36px rgba(201, 164, 92, 0.8);
}

.page-products .pf-cat__media {
  overflow: hidden;
  border: 1px solid var(--pf-line-soft);
  border-radius: var(--r-sm);
  aspect-ratio: 16 / 9;
  background: var(--ink);
}

.page-products .pf-cat--a .pf-cat__media {
  aspect-ratio: 16 / 8;
}

.page-products .pf-cat__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.85);
}

.page-products .pf-cat__body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.page-products .pf-cat__index {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.18em;
  color: var(--gold);
}

.page-products .pf-cat__name {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-size: var(--fs-22);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--paper);
}

.page-products .pf-cat__text {
  margin: 0 0 18px;
  font-size: var(--fs-16);
  line-height: 1.85;
  color: var(--pf-txt-dim);
}

.page-products .pf-cat__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.page-products .pf-cat__facts li {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.page-products .pf-cat__fk {
  font-size: var(--fs-12);
  letter-spacing: 0.04em;
  color: var(--pf-txt-mute);
}

.page-products .pf-cat__fv {
  font-family: var(--font-mono);
  font-size: var(--fs-16);
  letter-spacing: 0.02em;
  color: var(--gold-bright);
}

.page-products .pf-cat__link {
  align-self: flex-start;
  margin-top: 18px;
  padding-bottom: 2px;
  font-size: var(--fs-13);
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 164, 92, 0.4);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.page-products .pf-cat__link:hover {
  color: var(--gold-bright);
  border-color: var(--gold-bright);
}

.page-products .pf-cat__visual {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--pf-line-soft);
  border-radius: var(--r-sm);
  background:
    radial-gradient(circle at 50% 50%, rgba(119, 175, 166, 0.16), transparent 62%),
    linear-gradient(160deg, #0e1f18 0%, #0a0d0b 100%);
  overflow: hidden;
}

.page-products .pf-ring-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(201, 164, 92, 0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.page-products .pf-ring-dot--1 {
  width: 34px;
  height: 34px;
  border-color: var(--gold);
}

.page-products .pf-ring-dot--2 {
  width: 78px;
  height: 78px;
  border-color: rgba(201, 164, 92, 0.34);
}

.page-products .pf-ring-dot--3 {
  width: 128px;
  height: 128px;
  border-color: rgba(119, 175, 166, 0.28);
}

.page-products .pf-ring-dot--4 {
  width: 184px;
  height: 184px;
  border-color: rgba(43, 49, 44, 0.9);
}

/* 桌面档位 */
.page-products .pf-levels__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}

.page-products .pf-chip {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--felt);
  color: var(--text-light);
  font-size: var(--fs-13);
  text-decoration: none;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease);
}

.page-products .pf-chip:hover,
.page-products .pf-chip:focus-visible {
  border-color: var(--gold);
  background: var(--felt-2);
  color: var(--gold-bright);
}

.page-products .pf-levels__table {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--line);
}

.page-products .pf-level {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 22px;
  background: var(--ink);
  scroll-margin-top: 120px;
  transition: background 0.3s var(--ease);
}

.page-products .pf-level:target {
  background: linear-gradient(90deg, rgba(201, 164, 92, 0.13) 0%, rgba(10, 13, 11, 0) 62%);
  box-shadow: inset 3px 0 0 var(--gold);
}

.page-products .pf-level__idx {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.2em;
  color: var(--gold);
}

.page-products .pf-level__name {
  margin: 0 0 4px;
  font-family: var(--font-serif);
  font-size: var(--fs-22);
  font-weight: 600;
  color: var(--paper);
}

.page-products .pf-level__tagline {
  margin: 0;
  font-size: var(--fs-13);
  color: var(--pf-txt-mute);
}

.page-products .pf-level__bar {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(43, 49, 44, 0.9);
  overflow: hidden;
}

.page-products .pf-level__bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
}

.page-products .pf-level:nth-child(1) .pf-level__bar-fill { width: 16%; }
.page-products .pf-level:nth-child(2) .pf-level__bar-fill { width: 34%; }
.page-products .pf-level:nth-child(3) .pf-level__bar-fill { width: 56%; }
.page-products .pf-level:nth-child(4) .pf-level__bar-fill { width: 78%; }
.page-products .pf-level:nth-child(5) .pf-level__bar-fill { width: 100%; }

.page-products .pf-level__data {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.page-products .pf-level__data dt {
  margin-bottom: 4px;
  font-size: var(--fs-12);
  color: var(--pf-txt-mute);
}

.page-products .pf-level__data dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-16);
  letter-spacing: 0.04em;
  color: var(--gold-bright);
}

.page-products .pf-levels__foot {
  max-width: 68ch;
  margin: 24px 0 0;
  padding-left: 16px;
  border-left: 2px solid rgba(201, 164, 92, 0.5);
  font-size: var(--fs-16);
  line-height: 1.85;
  color: var(--pf-txt-dim);
}

/* 线路 */
.page-products .pf-lines__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.page-products .pf-line {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--felt);
}

.page-products .pf-line--opt {
  background: linear-gradient(158deg, var(--felt-2) 0%, var(--felt) 78%);
}

.page-products .pf-line--ded {
  background: linear-gradient(158deg, #1a3125 0%, var(--felt) 76%);
}

.page-products .pf-line__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.page-products .pf-line__name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-22);
  font-weight: 600;
  color: var(--paper);
}

.page-products .pf-line__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 5px rgba(119, 175, 166, 0.16);
}

.page-products .pf-line--opt .pf-line__dot {
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(201, 164, 92, 0.18);
}

.page-products .pf-line--ded .pf-line__dot {
  background: var(--gold-bright);
  box-shadow: 0 0 0 5px rgba(235, 208, 138, 0.2);
}

.page-products .pf-line__range {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-36);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--gold-bright);
}

.page-products .pf-line__unit {
  margin-left: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  letter-spacing: 0.06em;
  color: var(--pf-txt-mute);
}

.page-products .pf-wave {
  display: block;
  width: 100%;
  height: 56px;
  border-bottom: 1px solid var(--line);
}

.page-products .pf-line__note {
  margin: 0;
  font-size: var(--fs-16);
  line-height: 1.8;
  color: var(--pf-txt-dim);
}

.page-products .pf-line__meta {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-12);
  letter-spacing: 0.05em;
  color: var(--pf-txt-mute);
}

/* 码率 */
.page-products .pf-rates__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.page-products .pf-rate {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--felt);
}

.page-products .pf-rate__preview {
  margin-bottom: 18px;
  border: 1px solid var(--pf-line-soft);
  border-radius: var(--r-xs);
  aspect-ratio: 16 / 9;
  background-color: #16302a;
  background-image:
    radial-gradient(circle at 30% 38%, rgba(201, 164, 92, 0.55), transparent 42%),
    radial-gradient(circle at 72% 64%, rgba(119, 175, 166, 0.5), transparent 46%),
    repeating-linear-gradient(0deg, rgba(244, 238, 227, 0.14) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(244, 238, 227, 0.14) 0 1px, transparent 1px 7px);
}

.page-products .pf-rate__preview--sd { filter: blur(2.4px); }
.page-products .pf-rate__preview--hd { filter: blur(1.1px); }
.page-products .pf-rate__preview--uhd { filter: blur(0); }

.page-products .pf-rate__name {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-size: var(--fs-22);
  font-weight: 600;
  color: var(--paper);
}

.page-products .pf-rate__bw {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  letter-spacing: 0.04em;
  color: var(--gold);
}

.page-products .pf-rate__note {
  margin: 0;
  font-size: var(--fs-16);
  line-height: 1.8;
  color: var(--pf-txt-dim);
}

/* 节奏与班次 */
.page-products .pf-tempo__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  padding: 32px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(90% 100% at 0% 0%, rgba(28, 58, 43, 0.75) 0%, rgba(10, 13, 11, 0) 68%),
    var(--ink);
}

.page-products .pf-tempo__gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.page-products .pf-gauge {
  display: block;
  width: min(200px, 62vw);
  height: auto;
}

.page-products .pf-tempo__gauge-lbl {
  margin: 0;
  font-size: var(--fs-13);
  letter-spacing: 0.08em;
  color: var(--pf-txt-mute);
}

.page-products .pf-tempo__gauge-num {
  font-family: var(--font-mono);
  font-size: var(--fs-22);
  color: var(--gold-bright);
}

.page-products .pf-tempo__copy {
  min-width: 0;
}

.page-products .pf-tempo__text {
  max-width: 60ch;
  margin: 0 0 26px;
  font-size: var(--fs-16);
  line-height: 1.85;
  color: var(--pf-txt-dim);
}

.page-products .pf-shifts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--line);
  overflow: hidden;
}

.page-products .pf-shift {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  padding: 16px 18px;
  background: var(--felt);
}

.page-products .pf-shift__time {
  font-family: var(--font-mono);
  font-size: var(--fs-16);
  letter-spacing: 0.04em;
  color: var(--gold-bright);
}

.page-products .pf-shift__name {
  font-family: var(--font-serif);
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--paper);
}

.page-products .pf-shift__hint {
  flex: 1 1 100%;
  font-size: var(--fs-13);
  color: var(--pf-txt-mute);
}

.page-products .pf-tempo__peak {
  margin: 0;
  padding: 16px 18px;
  border-left: 2px solid var(--cinnabar);
  background: rgba(196, 64, 47, 0.08);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  font-size: var(--fs-16);
  line-height: 1.8;
  color: var(--pf-txt-dim);
}

.page-products .pf-tempo__peak-num {
  font-family: var(--font-mono);
  font-size: var(--fs-22);
  letter-spacing: 0.04em;
  color: #E4A79C;
}

/* 订阅 */
.page-products .pf-sub__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.page-products .pf-sub__panel {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(150deg, var(--felt-2) 0%, var(--felt) 76%);
}

.page-products .pf-sub__name {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-size: var(--fs-22);
  font-weight: 600;
  color: var(--paper);
}

.page-products .pf-sub__text {
  margin: 0 0 16px;
  font-size: var(--fs-16);
  line-height: 1.85;
  color: var(--pf-txt-dim);
}

.page-products .pf-sub__meta {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-13);
  color: var(--gold);
}

.page-products .pf-sub__foot {
  margin-top: 22px;
  padding: 22px 24px;
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--text-dark);
}

.page-products .pf-sub__foot-text {
  margin: 0;
  font-size: var(--fs-16);
  line-height: 1.85;
}

.page-products .pf-sub__foot-text a {
  color: var(--cinnabar);
  text-decoration: none;
  border-bottom: 1px solid rgba(196, 64, 47, 0.4);
}

.page-products .pf-sub__foot-text a:hover {
  border-color: var(--cinnabar);
}

/* 档位参考 */
.page-products .pf-fit__panel {
  padding: 30px 24px;
  border: 1px solid rgba(201, 164, 92, 0.34);
  border-radius: var(--r-lg);
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(201, 164, 92, 0.14) 0%, rgba(10, 13, 11, 0) 62%),
    var(--felt);
}

.page-products .pf-fit__title {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-size: clamp(24px, 5vw, var(--fs-36));
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--paper);
}

.page-products .pf-fit__text {
  max-width: 58ch;
  margin: 0 0 28px;
  font-size: var(--fs-16);
  line-height: 1.85;
  color: var(--pf-txt-dim);
}

.page-products .pf-fit__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--line);
  overflow: hidden;
}

.page-products .pf-fit__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 16px;
  padding: 16px 18px;
  background: var(--ink);
}

.page-products .pf-fit__case {
  font-size: var(--fs-16);
  color: var(--pf-txt-dim);
}

.page-products .pf-fit__arrow {
  display: none;
  color: var(--gold);
}

.page-products .pf-fit__result {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: var(--fs-16);
  letter-spacing: 0.04em;
  color: var(--gold-bright);
}

.page-products .pf-fit__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* 响应式 */
@media (min-width: 700px) {
  .page-products .pf-cat {
    padding: 28px;
  }

  .page-products .pf-lines__grid,
  .page-products .pf-rates__grid,
  .page-products .pf-sub__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-products .pf-fit__panel {
    padding: 40px;
  }

  .page-products .pf-fit__row {
    grid-template-columns: minmax(0, 1.6fr) auto minmax(0, 1fr);
    gap: 20px;
  }

  .page-products .pf-fit__arrow {
    display: block;
  }

  .page-products .pf-fit__result {
    grid-column: auto;
    text-align: right;
  }
}

@media (min-width: 900px) {
  .page-products .pf-hero__inner {
    grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.86fr);
    gap: 60px;
    align-items: center;
  }

  .page-products .pf-cat-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 30px 26px;
  }

  .page-products .pf-cat--a { grid-column: 1 / 5; }
  .page-products .pf-cat--b { grid-column: 5 / 7; margin-top: 86px; }
  .page-products .pf-cat--c { grid-column: 1 / 3; }
  .page-products .pf-cat--d { grid-column: 3 / 7; margin-top: 44px; }
  .page-products .pf-cat--e { grid-column: 1 / 4; }
  .page-products .pf-cat--f { grid-column: 4 / 7; margin-top: 56px; }

  .page-products .pf-level {
    grid-template-columns: 190px minmax(0, 1fr) 300px;
    align-items: center;
    gap: 30px;
    padding: 26px 30px;
  }

  .page-products .pf-tempo__inner {
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
    gap: 48px;
    padding: 44px;
    align-items: center;
  }
}

@media (min-width: 1100px) {
  .page-products .pf-lines__grid,
  .page-products .pf-rates__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-products .pf-sub__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pf-cat,
  .page-products .pf-chip,
  .page-products .pf-cat__link {
    transition: none;
  }

  .page-products .pf-cat:hover {
    transform: none;
  }
}
</style>
<<<END>>>

等等——我不应该输出 `</style>`。标记协议说 PAGE_CSS 里只放 CSS，只写 CSS 就行。让我去掉那个。

而且末尾的 `<<<END>>>` 也不是协议的一部分。只能有那两个标记。

重新输出一次。
<main id="main-content" class="page-products">

  <div class="pf-crumb-wrap">
    <div class="shell">
      <nav class="breadcrumb pf-crumb" aria-label="所在位置">
        <a href="/">首页</a>
        <span class="pf-crumb__sep" aria-hidden="true">/</span>
        <span aria-current="page">体验中心</span>
      </nav>
    </div>
  </div>

  <header class="pf-hero">
    <div class="shell pf-hero__inner">
      <div class="pf-hero__copy" data-reveal>
        <p class="pf-hero__eyebrow">六个分类 · 五级桌面 · 三档线路</p>
        <h1>坐哪张桌、走哪条线，先看清数据再决定</h1>
        <p class="lede pf-hero__lede">在皇家国际汇，六个固定分类各自的玩法节奏、桌面档位对应的限红区间、每条线路的延迟水平和画面码率，都能在动手之前先看一遍。您只要知道自己习惯的节奏和常玩的那一栏，就能直接判断该进哪张桌、接哪条线、盯哪条规则更新。</p>
        <div class="pf-hero__metrics">
          <div class="pf-metric">
            <span class="pf-metric__v">6</span>
            <span class="pf-metric__k">固定分类</span>
          </div>
          <div class="pf-metric">
            <span class="pf-metric__v">5</span>
            <span class="pf-metric__k">桌面等级</span>
          </div>
          <div class="pf-metric">
            <span class="pf-metric__v">3</span>
            <span class="pf-metric__k">线路档位</span>
          </div>
        </div>
        <div class="pf-hero__actions">
          <a class="btn btn--gold" href="#levels">看桌面等级对照</a>
          <a class="btn btn--ghost" href="#categories">先逛六个分类</a>
        </div>
      </div>

      <div class="pf-hero__art" data-reveal data-reveal-delay="160">
        <svg class="pf-art" viewBox="0 0 480 400" role="img" aria-label="线路延迟波形与桌面筹码环形示意图">
          <defs>
            <linearGradient id="pfWaveGrad" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0" stop-color="#77AFA6"/>
              <stop offset="1" stop-color="#C9A45C"/>
            </linearGradient>
          </defs>
          <circle cx="240" cy="168" r="120" fill="none" stroke="#1C3A2B" stroke-width="1"/>
          <circle cx="240" cy="168" r="88" fill="none" stroke="#2B312C" stroke-width="1" stroke-dasharray="3 9"/>
          <circle cx="240" cy="168" r="58" fill="none" stroke="#1C3A2B" stroke-width="16"/>
          <circle cx="240" cy="168" r="58" fill="none" stroke="#C9A45C" stroke-width="16" stroke-dasharray="91 273" stroke-linecap="round" transform="rotate(-90 240 168)"/>
          <circle cx="240" cy="168" r="6" fill="#EBD08A"/>
          <path d="M0 318 C 46 318, 62 254, 104 254 S 158 312, 200 312 246 226, 288 226 344 300, 386 300 442 246, 480 246"
                fill="none" stroke="url(#pfWaveGrad)" stroke-width="2.6" stroke-linecap="round"/>
          <g stroke="#2B312C" stroke-width="1">
            <line x1="0" y1="356" x2="480" y2="356"/>
            <line x1="96" y1="350" x2="96" y2="362"/>
            <line x1="240" y1="350" x2="240" y2="362"/>
            <line x1="384" y1="350" x2="384" y2="362"/>
          </g>
          <text x="96" y="382" fill="#77AFA6" font-size="12" font-family="monospace">28ms</text>
          <text x="216" y="382" fill="#C9A45C" font-size="12" font-family="monospace">95ms</text>
          <text x="356" y="382" fill="#C4402F" font-size="12" font-family="monospace">165ms</text>
        </svg>
      </div>
    </div>
  </header>

  <section class="pf-section pf-cats" id="categories">
    <div class="shell">
      <div class="sec-head pf-head" data-reveal>
        <p class="eyebrow">分类一览</p>
        <h2 class="sec-head__title">六个分类，各有各的节奏</h2>
        <p class="sec-head__note">有的一局要等四十多秒，有的几秒就转一轮。先对号入座，再决定把时间放在哪一栏。</p>
      </div>

      <div class="pf-cat-grid">

        <article class="pf-cat pf-cat--a" data-reveal>
          <div class="pf-cat__media">
            <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="深绿桌面俯拍，扑克牌扇形摊开与筹码堆叠，暗调浅景深">
          </div>
          <div class="pf-cat__body">
            <p class="pf-cat__index">01</p>
            <h3 class="pf-cat__name">视讯直播</h3>
            <p class="pf-cat__text">真人荷官值守开桌，发牌动作与牌面同步可见。一局约 45 秒，整场节奏均匀，适合每局都想跟得上、看得清的用户。</p>
            <ul class="pf-cat__facts">
              <li><span class="pf-cat__fk">单局时长</span><span class="pf-cat__fv">约 45 秒</span></li>
              <li><span class="pf-cat__fk">桌面档位</span><span class="pf-cat__fv">五级</span></li>
              <li><span class="pf-cat__fk">值守班次</span><span class="pf-cat__fv">每日 3 班</span></li>
            </ul>
            <a class="pf-cat__link" href="#levels">查看该分类的桌面档位</a>
          </div>
        </article>

        <article class="pf-cat pf-cat--b" data-reveal data-reveal-delay="80">
          <div class="pf-cat__media">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" loading="lazy" decoding="async" alt="暗房间中屏幕微光映出的抽象图形界面，画面内容不可辨识">
          </div>
          <div class="pf-cat__body">
            <p class="pf-cat__index">02</p>
            <h3 class="pf-cat__name">电子游艺</h3>
            <p class="pf-cat__text">自动轮转的机台内容，一轮几秒就结束，不用等对手也不用等发牌，适合碎片时间随手看几轮。</p>
            <ul class="pf-cat__facts">
              <li><span class="pf-cat__fk">单轮时长</span><span class="pf-cat__fv">3–8 秒</span></li>
              <li><span class="pf-cat__fk">操作频率</span><span class="pf-cat__fv">高频</span></li>
              <li><span class="pf-cat__fk">值守</span><span class="pf-cat__fv">自动运行</span></li>
            </ul>
          </div>
        </article>

        <article class="pf-cat pf-cat--c" data-reveal data-reveal-delay="120">
          <div class="pf-cat__media">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" loading="lazy" decoding="async" alt="夜色中的记分牌局部，看台虚化背景，冷色调画面没有人物面部">
          </div>
          <div class="pf-cat__body">
            <p class="pf-cat__index">03</p>
            <h3 class="pf-cat__name">体育赛事</h3>
            <p class="pf-cat__text">跟随真实赛程推进，一场通常九十分钟上下，中途可以走开再回来，节奏完全跟着比赛本身走。</p>
            <ul class="pf-cat__facts">
              <li><span class="pf-cat__fk">单场时长</span><span class="pf-cat__fv">约 90 分钟</span></li>
              <li><span class="pf-cat__fk">结算方式</span><span class="pf-cat__fv">按场结算</span></li>
              <li><span class="pf-cat__fk">密度</span><span class="pf-cat__fv">看赛程</span></li>
            </ul>
          </div>
        </article>

        <article class="pf-cat pf-cat--d" data-reveal data-reveal-delay="160">
          <div class="pf-cat__media">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" loading="lazy" decoding="async" alt="桌面上的牌面特写，边缘虚化，光线自左上斜向切入">
          </div>
          <div class="pf-cat__body">
            <p class="pf-cat__index">04</p>
            <h3 class="pf-cat__name">棋牌对决</h3>
            <p class="pf-cat__text">回合制推进，一局大约两到六分钟，思考时间宽裕，适合喜欢慢慢看牌路、不赶节奏的用户。</p>
            <ul class="pf-cat__facts">
              <li><span class="pf-cat__fk">单局时长</span><span class="pf-cat__fv">2–6 分钟</span></li>
              <li><span class="pf-cat__fk">推进方式</span><span class="pf-cat__fv">回合制</span></li>
              <li><span class="pf-cat__fk">思考时间</span><span class="pf-cat__fv">宽裕</span></li>
            </ul>
          </div>
        </article>

        <article class="pf-cat pf-cat--e" data-reveal data-reveal-delay="200">
          <div class="pf-cat__media">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" loading="lazy" decoding="async" alt="暗环境中的键盘鼠标外设与冷青色氛围灯，画面中没有人物">
          </div>
          <div class="pf-cat__body">
            <p class="pf-cat__index">05</p>
            <h3 class="pf-cat__name">电竞竞猜</h3>
            <p class="pf-cat__text">按地图或小局结算，一局二十到四十分钟不等。赛程密集的时段可选场次明显更多，适合习惯先看赛程再落座的用户。</p>
            <ul class="pf-cat__facts">
              <li><span class="pf-cat__fk">单局时长</span><span class="pf-cat__fv">20–40 分钟</span></li>
              <li><span class="pf-cat__fk">结算单位</span><span class="pf-cat__fv">地图 / 小局</span></li>
              <li><span class="pf-cat__fk">场次</span><span class="pf-cat__fv">随赛程</span></li>
            </ul>
          </div>
        </article>

        <article class="pf-cat pf-cat--f" data-reveal data-reveal-delay="240">
          <div class="pf-cat__visual" aria-hidden="true">
            <span class="pf-ring-dot pf-ring-dot--1"></span>
            <span class="pf-ring-dot pf-ring-dot--2"></span>
            <span class="pf-ring-dot pf-ring-dot--3"></span>
            <span class="pf-ring-dot pf-ring-dot--4"></span>
          </div>
          <div class="pf-cat__body">
            <p class="pf-cat__index">06</p>
            <h3 class="pf-cat__name">捕鱼机台</h3>
            <p class="pf-cat__text">连续操作型内容，不设固定回合，一轮五到十五分钟，随时开始随时停，中途接个电话回来也不影响。</p>
            <ul class="pf-cat__facts">
              <li><span class="pf-cat__fk">单轮时长</span><span class="pf-cat__fv">5–15 分钟</span></li>
              <li><span class="pf-cat__fk">推进方式</span><span class="pf-cat__fv">连续操作</span></li>
              <li><span class="pf-cat__fk">中断</span><span class="pf-cat__fv">随时可停</span></li>
            </ul>
          </div>
        </article>

      </div>
    </div>
  </section>

  <section class="pf-section pf-levels" id="levels">
    <div class="shell">
      <div class="sec-head pf-head" data-reveal>
        <p class="eyebrow">桌面档位</p>
        <h2 class="sec-head__title">皇家国际CN 限红区间按五级桌面逐档递进</h2>
        <p class="sec-head__note">从新手桌到贵宾桌，起步档位与上限倍数一路抬升。点下面的档位名称，可以直接跳到对应行查看。</p>
      </div>

      <div class="pf-levels__chips" data-reveal>
        <a class="pf-chip" href="#lv-1">新手桌</a>
        <a class="pf-chip" href="#lv-2">标准桌</a>
        <a class="pf-chip" href="#lv-3">进阶桌</a>
        <a class="pf-chip" href="#lv-4">高级桌</a>
        <a class="pf-chip" href="#lv-5">贵宾桌</a>
      </div>

      <div class="pf-levels__table" data-reveal>

        <article class="pf-level" id="lv-1">
          <div class="pf-level__head">
            <span class="pf-level__idx">L1</span>
            <h3 class="pf-level__name">新手桌</h3>
            <p class="pf-level__tagline">先把流程走顺，再谈节奏</p>
          </div>
          <div class="pf-level__bar" aria-hidden="true"><span class="pf-level__bar-fill"></span></div>
          <dl class="pf-level__data">
            <div><dt>起步档位</dt><dd>P1</dd></div>
            <div><dt>上限倍数</dt><dd>1×</dd></div>
            <div><dt>区间跨度</dt><dd>窄幅</dd></div>
          </dl>
        </article>

        <article class="pf-level" id="lv-2">
          <div class="pf-level__head">
            <span class="pf-level__idx">L2</span>
            <h3 class="pf-level__name">标准桌</h3>
            <p class="pf-level__tagline">常规节奏，规模适中</p>
          </div>
          <div class="pf-level__bar" aria-hidden="true"><span class="pf-level__bar-fill"></span></div>
          <dl class="pf-level__data">
            <div><dt>起步档位</dt><dd>P2</dd></div>
            <div><dt>上限倍数</dt><dd>3×</dd></div>
            <div><dt>区间跨度</dt><dd>中等</dd></div>
          </dl>
        </article>

        <article class="pf-level" id="lv-3">
          <div class="pf-level__head">
            <span class="pf-level__idx">L3</span>
            <h3 class="pf-level__name">进阶桌</h3>
            <p class="pf-level__tagline">对桌面对手与推进速度有偏好</p>
          </div>
          <div class="pf-level__bar" aria-hidden="true"><span class="pf-level__bar-fill"></span></div>
          <dl class="pf-level__data">
            <div><dt>起步档位</dt><dd>P3</dd></div>
            <div><dt>上限倍数</dt><dd>8×</dd></div>
            <div><dt>区间跨度</dt><dd>偏宽</dd></div>
          </dl>
        </article>

        <article class="pf-level" id="lv-4">
          <div class="pf-level__head">
            <span class="pf-level__idx">L4</span>
            <h3 class="pf-level__name">高级桌</h3>
            <p class="pf-level__tagline">单场规模较大，需要独立桌位</p>
          </div>
          <div class="pf-level__bar" aria-hidden="true"><span class="pf-level__bar-fill"></span></div>
          <dl class="pf-level__data">
            <div><dt>起步档位</dt><dd>P4</dd></div>
            <div><dt>上限倍数</dt><dd>20×</dd></div>
            <div><dt>区间跨度</dt><dd>宽幅</dd></div>
          </dl>
        </article>

        <article class="pf-level" id="lv-5">
          <div class="pf-level__head">
            <span class="pf-level__idx">L5</span>
            <h3 class="pf-level__name">贵宾桌</h3>
            <p class="pf-level__tagline">独立包桌，专属服务时段</p>
          </div>
          <div class="pf-level__bar" aria-hidden="true"><span class="pf-level__bar-fill"></span></div>
          <dl class="pf-level__data">
            <div><dt>起步档位</dt><dd>P5</dd></div>
            <div><dt>上限倍数</dt><dd>50×</dd></div>
            <div><dt>区间跨度</dt><dd>极宽</dd></div>
          </dl>
        </article>

      </div>

      <p class="pf-levels__foot" data-reveal>五个档位的起步与上限每周复核一次，确需调整时会提前一个完整周期公告，方便您按原来的节奏安排，不会当天改当天生效。</p>
    </div>
  </section>

  <section class="pf-section pf-lines" id="lines">
    <div class="shell">
      <div class="sec-head pf-head" data-reveal>
        <p class="eyebrow">线路档位</p>
        <h2 class="sec-head__title">三档线路，毫秒区间怎么读</h2>
        <p class="sec-head__note">同一个分类可以接不同线路。数值取最近 12 次采样的中位区间，每 10 分钟刷新一次，您对照自己的实际感受挑一档就行。</p>
      </div>

      <div class="pf-lines__grid">

        <article class="pf-line pf-line--std" data-reveal>
          <header class="pf-line__head">
            <h3 class="pf-line__name">标准线路</h3>
            <span class="pf-line__dot" aria-hidden="true"></span>
          </header>
          <p class="pf-line__range">118–165<span class="pf-line__unit">毫秒</span></p>
          <svg class="pf-wave" viewBox="0 0 320 56" aria-hidden="true" preserveAspectRatio="none">
            <path d="M0 34 C 26 34, 38 18, 64 18 S 102 44, 128 44 166 22, 192 22 230 40, 256 40 296 26, 320 26" fill="none" stroke="#77AFA6" stroke-width="2"/>
          </svg>
          <p class="pf-line__note">覆盖范围最广，多数地区都能稳定连上，网络环境一般时优先选它。</p>
          <p class="pf-line__meta">推荐用于：体育赛事、棋牌对决</p>
        </article>

        <article class="pf-line pf-line--opt" data-reveal data-reveal-delay="80">
          <header class="pf-line__head">
            <h3 class="pf-line__name">优化线路</h3>
            <span class="pf-line__dot" aria-hidden="true"></span>
          </header>
          <p class="pf-line__range">62–95<span class="pf-line__unit">毫秒</span></p>
          <svg class="pf-wave" viewBox="0 0 320 56" aria-hidden="true" preserveAspectRatio="none">
            <path d="M0 30 C 20 30, 30 12, 52 12 S 88 40, 112 40 148 14, 172 14 208 36, 232 36 272 16, 296 16 316 28, 320 28" fill="none" stroke="#C9A45C" stroke-width="2"/>
          </svg>
          <p class="pf-line__note">绕行节点更少，画面推进跟手，日常主要用这一档就够。</p>
          <p class="pf-line__meta">推荐用于：视讯直播、电子游艺</p>
        </article>

        <article class="pf-line pf-line--ded" data-reveal data-reveal-delay="160">
          <header class="pf-line__head">
            <h3 class="pf-line__name">专线</h3>
            <span class="pf-line__dot" aria-hidden="true"></span>
          </header>
          <p class="pf-line__range">28–46<span class="pf-line__unit">毫秒</span></p>
          <svg class="pf-wave" viewBox="0 0 320 56" aria-hidden="true" preserveAspectRatio="none">
            <path d="M0 28 C 14 28, 20 8, 36 8 S 62 44, 84 44 112 10, 132 10 162 42, 184 42 212 8, 234 8 264 40, 288 40 312 20, 320 20" fill="none" stroke="#EBD08A" stroke-width="2"/>
          </svg>
          <p class="pf-line__note">独立通道，在实时桌面和快速回合里差别最明显，追的就是那几十毫秒。</p>
          <p class="pf-line__meta">推荐用于：竞技类快速回合、晚间高峰时段</p>
        </article>

      </div>
    </div>
  </section>

  <section class="pf-section pf-rates" id="rates">
    <div class="shell">
      <div class="sec-head pf-head" data-reveal>
        <p class="eyebrow">画面档位</p>
        <h2 class="sec-head__title">码率选哪一档，看带宽也看内容</h2>
        <p class="sec-head__note">同一个分类里可以随时切换画质，切换后立即生效，不用退出重进。下面是三档的实际观感差异。</p>
      </div>

      <div class="pf-rates__grid">

        <article class="pf-rate" data-reveal>
          <div class="pf-rate__preview pf-rate__preview--sd" aria-hidden="true"></div>
          <h3 class="pf-rate__name">标清</h3>
          <p class="pf-rate__bw">约 3 Mbps</p>
          <p class="pf-rate__note">弱网环境优先选它，画面流畅度最稳，牌面细节会略微柔和。</p>
        </article>

        <article class="pf-rate" data-reveal data-reveal-delay="80">
          <div class="pf-rate__preview pf-rate__preview--hd" aria-hidden="true"></div>
          <h3 class="pf-rate__name">高清</h3>
          <p class="pf-rate__bw">建议 4.5 Mbps 以上</p>
          <p class="pf-rate__note">桌面数字与筹码堆叠看得清楚，是多数用户长期挂着的档位。</p>
        </article>

        <article class="pf-rate" data-reveal data-reveal-delay="160">
          <div class="pf-rate__preview pf-rate__preview--uhd" aria-hidden="true"></div>
          <h3 class="pf-rate__name">超清</h3>
          <p class="pf-rate__bw">建议本地 6 Mbps 以上</p>
          <p class="pf-rate__note">牌面纹理、荷官手部动作都能看清，适合网络条件好、盯着桌面细看的时候。</p>
        </article>

      </div>
    </div>
  </section>

  <section class="pf-section pf-tempo" id="tempo">
    <div class="shell">
      <div class="pf-tempo__inner">

        <div class="pf-tempo__gauge" data-reveal>
          <svg class="pf-gauge" viewBox="0 0 160 160" role="img" aria-label="一局约 45 秒的开局节奏示意">
            <circle cx="80" cy="80" r="62" fill="none" stroke="#1C3A2B" stroke-width="10"/>
            <circle cx="80" cy="80" r="62" fill="none" stroke="#C9A45C" stroke-width="10"
                    stroke-dasharray="390" stroke-dashoffset="0" stroke-linecap="round" transform="rotate(-90 80 80)"/>
            <line x1="80" y1="80" x2="80" y2="30" stroke="#EBD08A" stroke-width="2.5" stroke-linecap="round"/>
            <circle cx="80" cy="80" r="5" fill="#EBD08A"/>
          </svg>
          <p class="pf-tempo__gauge-lbl">一局约 <span class="pf-tempo__gauge-num">45</span> 秒</p>
        </div>

        <div class="pf-tempo__copy" data-reveal data-reveal-delay="80">
          <p class="eyebrow">开局节奏</p>
          <h2 class="sec-head__title">全天有人值守，挑时段比抢时间管用</h2>
          <p class="pf-tempo__text">视讯桌台由荷官每日三班轮转值守，深夜和清晨都不空场。开局频次维持在约每 45 秒一局，节奏均匀，坐在哪一班手感差别不大。</p>
          <ul class="pf-shifts">
            <li class="pf-shift">
              <span class="pf-shift__time">08:00 – 16:00</span>
              <span class="pf-shift__name">早班</span>
              <span class="pf-shift__hint">桌台宽松，适合想慢慢打的时段</span>
            </li>
            <li class="pf-shift">
              <span class="pf-shift__time">16:00 – 00:00</span>
              <span class="pf-shift__name">中班</span>
              <span class="pf-shift__hint">在线桌台逐步增加，选择最全</span>
            </li>
            <li class="pf-shift">
              <span class="pf-shift__time">00:00 – 08:00</span>
              <span class="pf-shift__name">夜班</span>
              <span class="pf-shift__hint">桌台数回落，但仍有荷官值守</span>
            </li>
          </ul>
          <p class="pf-tempo__peak">晚间高峰时段的在线桌台数量约为平峰的 <span class="pf-tempo__peak-num">1.6</span> 倍。如果您更在意不用等桌，平峰时段会更从容。</p>
        </div>

      </div>
    </div>
  </section>

  <section class="pf-section pf-sub" id="subscribe">
    <div class="shell">
      <div class="sec-head pf-head" data-reveal>
        <p class="eyebrow">规则更新</p>
        <h2 class="sec-head__title">只订阅你常玩的那一栏</h2>
        <p class="sec-head__note">挑娱乐平台的时候，分类数量和活动规则往往是最先被翻到的两栏。六个分类的规则周期互不影响，订阅也可以只挑一栏。</p>
      </div>

      <div class="pf-sub__grid">

        <article class="pf-sub__panel" data-reveal>
          <h3 class="pf-sub__name">站内提示</h3>
          <p class="pf-sub__text">您常玩的分类规则一有变动，进入对应页面时会在顶部出现一条提示，看完即可收起，不影响当次操作。</p>
          <p class="pf-sub__meta">适合每天都会上来看看的用户</p>
        </article>

        <article class="pf-sub__panel" data-reveal data-reveal-delay="80">
          <h3 class="pf-sub__name">邮件通知</h3>
          <p class="pf-sub__text">变动汇总成一封邮件，按您选定的分类发送。想一次看全这个周期的调整，用这种方式更省事。</p>
          <p class="pf-sub__meta">适合隔几天才回来看一次的用户</p>
        </article>

      </div>

      <div class="pf-sub__foot" data-reveal>
        <p class="pf-sub__foot-text">两种方式二选一即可，也可以随时关掉。改了什么内容、什么时候生效，在<a href="/trends/">趋势观察</a>里能看到完整的更新记录；如果对某条规则的具体口径拿不准，<a href="/help-center/">帮助中心</a>里按分类整理了常见问答。</p>
      </div>
    </div>
  </section>

  <section class="pf-section pf-fit" id="fit">
    <div class="shell">
      <div class="pf-fit__panel" data-reveal data-reveal-delay="80">
        <div class="pf-fit__copy">
          <p class="eyebrow">档位参考</p>
          <h2 class="pf-fit__title">对照自己的情况，先估一个档次</h2>
          <p class="pf-fit__text">不确定从哪张桌开始，可以按下面的情形对号入座。真正进桌之前，随时还能换档，不用一开始就选到最高。</p>
        </div>

        <ul class="pf-fit__list">
          <li class="pf-fit__row">
            <span class="pf-fit__case">第一次接触，想先熟悉流程</span>
            <span class="pf-fit__arrow" aria-hidden="true">→</span>
            <span class="pf-fit__result">新手桌 / 标准桌</span>
          </li>
          <li class="pf-fit__row">
            <span class="pf-fit__case">已有固定习惯，单场规模适中</span>
            <span class="pf-fit__arrow" aria-hidden="true">→</span>
            <span class="pf-fit__result">标准桌 / 进阶桌</span>
          </li>
          <li class="pf-fit__row">
            <span class="pf-fit__case">在意节奏快慢与桌面对手构成</span>
            <span class="pf-fit__arrow" aria-hidden="true">→</span>
            <span class="pf-fit__result">进阶桌</span>
          </li>
          <li class="pf-fit__row">
            <span class="pf-fit__case">单场规模较大，需要独立桌位</span>
            <span class="pf-fit__arrow" aria-hidden="true">→</span>
            <span class="pf-fit__result">高级桌 / 贵宾桌</span>
          </li>
        </ul>

        <div class="pf-fit__actions">
          <a class="btn btn--gold" href="/help-center/">看分类常见问答</a>
          <a class="btn btn--ghost" href="/connect/">问线路与档位</a>
        </div>
      </div>
    </div>
  </section>

</main>

.page-products {
  --pf-line-soft: rgba(43, 49, 44, 0.85);
  --pf-txt-dim: rgba(232, 226, 214, 0.72);
  --pf-txt-mute: rgba(232, 226, 214, 0.5);
  display: block;
  overflow-x: clip;
  padding-bottom: 96px;
  background:
    radial-gradient(120% 70% at 84% 0%, rgba(18, 37, 28, 0.92) 0%, rgba(10, 13, 11, 0) 60%),
    var(--ink);
  color: var(--text-light);
}

.page-products .pf-crumb-wrap {
  padding-top: 88px;
}

.page-products .pf-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  color: var(--pf-txt-mute);
}

.page-products .pf-crumb a {
  color: var(--gold);
  text-decoration: none;
}

.page-products .pf-crumb a:hover {
  color: var(--gold-bright);
}

.page-products .pf-crumb__sep {
  color: var(--line);
}

.page-products .pf-hero {
  padding-top: 34px;
}

.page-products .pf-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 44px;
}

.page-products .pf-hero__eyebrow {
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  letter-spacing: 0.2em;
  color: var(--gold);
}

.page-products .pf-hero h1 {
  margin: 0 0 22px;
  font-family: var(--font-serif);
  font-size: clamp(32px, 7vw, var(--fs-64));
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: 0.02em;
  color: var(--paper);
}

.page-products .pf-hero__lede {
  max-width: 56ch;
  margin: 0 0 32px;
  font-size: var(--fs-16);
  line-height: 1.85;
  color: var(--pf-txt-dim);
}

.page-products .pf-hero__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--line);
  overflow: hidden;
}

.page-products .pf-metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 16px;
  background: var(--felt);
}

.page-products .pf-metric__v {
  font-family: var(--font-mono);
  font-size: var(--fs-28);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--gold);
}

.page-products .pf-metric__k {
  font-size: var(--fs-13);
  color: var(--pf-txt-mute);
}

.page-products .pf-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.page-products .pf-hero__art {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(158deg, var(--felt) 0%, #0c1712 100%);
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.55);
}

.page-products .pf-art {
  display: block;
  width: 100%;
  height: auto;
}

.page-products .pf-section {
  padding-top: 92px;
}

.page-products .pf-head {
  max-width: 720px;
  margin-bottom: 40px;
}

.page-products .pf-cat-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.page-products .pf-cat {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, var(--felt-2) 0%, var(--felt) 70%);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.page-products .pf-cat:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 164, 92, 0.55);
  box-shadow: 0 24px 60px -36px rgba(201, 164, 92, 0.8);
}

.page-products .pf-cat__media {
  overflow: hidden;
  border: 1px solid var(--pf-line-soft);
  border-radius: var(--r-sm);
  aspect-ratio: 16 / 9;
  background: var(--ink);
}

.page-products .pf-cat--a .pf-cat__media {
  aspect-ratio: 16 / 8;
}

.page-products .pf-cat__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.85);
}

.page-products .pf-cat__body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.page-products .pf-cat__index {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.18em;
  color: var(--gold);
}

.page-products .pf-cat__name {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-size: var(--fs-22);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--paper);
}

.page-products .pf-cat__text {
  margin: 0 0 18px;
  font-size: var(--fs-16);
  line-height: 1.85;
  color: var(--pf-txt-dim);
}

.page-products .pf-cat__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.page-products .pf-cat__facts li {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.page-products .pf-cat__fk {
  font-size: var(--fs-12);
  letter-spacing: 0.04em;
  color: var(--pf-txt-mute);
}

.page-products .pf-cat__fv {
  font-family: var(--font-mono);
  font-size: var(--fs-16);
  letter-spacing: 0.02em;
  color: var(--gold-bright);
}

.page-products .pf-cat__link {
  align-self: flex-start;
  margin-top: 18px;
  padding-bottom: 2px;
  font-size: var(--fs-13);
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 164, 92, 0.4);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.page-products .pf-cat__link:hover {
  color: var(--gold-bright);
  border-color: var(--gold-bright);
}

.page-products .pf-cat__visual {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--pf-line-soft);
  border-radius: var(--r-sm);
  background:
    radial-gradient(circle at 50% 50%, rgba(119, 175, 166, 0.16), transparent 62%),
    linear-gradient(160deg, #0e1f18 0%, #0a0d0b 100%);
  overflow: hidden;
}

.page-products .pf-ring-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(201, 164, 92, 0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.page-products .pf-ring-dot--1 {
  width: 34px;
  height: 34px;
  border-color: var(--gold);
}

.page-products .pf-ring-dot--2 {
  width: 78px;
  height: 78px;
  border-color: rgba(201, 164, 92, 0.34);
}

.page-products .pf-ring-dot--3 {
  width: 128px;
  height: 128px;
  border-color: rgba(119, 175, 166, 0.28);
}

.page-products .pf-ring-dot--4 {
  width: 184px;
  height: 184px;
  border-color: rgba(43, 49, 44, 0.9);
}

.page-products .pf-levels__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}

.page-products .pf-chip {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--felt);
  color: var(--text-light);
  font-size: var(--fs-13);
  text-decoration: none;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease);
}

.page-products .pf-chip:hover,
.page-products .pf-chip:focus-visible {
  border-color: var(--gold);
  background: var(--felt-2);
  color: var(--gold-bright);
}

.page-products .pf-levels__table {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--line);
}

.page-products .pf-level {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 22px;
  background: var(--ink);
  scroll-margin-top: 120px;
  transition: background 0.3s var(--ease);
}

.page-products .pf-level:target {
  background: linear-gradient(90deg, rgba(201, 164, 92, 0.13) 0%, rgba(10, 13, 11, 0) 62%);
  box-shadow: inset 3px 0 0 var(--gold);
}

.page-products .pf-level__idx {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.2em;
  color: var(--gold);
}

.page-products .pf-level__name {
  margin: 0 0 4px;
  font-family: var(--font-serif);
  font-size: var(--fs-22);
  font-weight: 600;
  color: var(--paper);
}

.page-products .pf-level__tagline {
  margin: 0;
  font-size: var(--fs-13);
  color: var(--pf-txt-mute);
}

.page-products .pf-level__bar {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(43, 49, 44, 0.9);
  overflow: hidden;
}

.page-products .pf-level__bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
}

.page-products .pf-level:nth-child(1) .pf-level__bar-fill { width: 16%; }
.page-products .pf-level:nth-child(2) .pf-level__bar-fill { width: 34%; }
.page-products .pf-level:nth-child(3) .pf-level__bar-fill { width: 56%; }
.page-products .pf-level:nth-child(4) .pf-level__bar-fill { width: 78%; }
.page-products .pf-level:nth-child(5) .pf-level__bar-fill { width: 100%; }

.page-products .pf-level__data {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.page-products .pf-level__data dt {
  margin-bottom: 4px;
  font-size: var(--fs-12);
  color: var(--pf-txt-mute);
}

.page-products .pf-level__data dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-16);
  letter-spacing: 0.04em;
  color: var(--gold-bright);
}

.page-products .pf-levels__foot {
  max-width: 68ch;
  margin: 24px 0 0;
  padding-left: 16px;
  border-left: 2px solid rgba(201, 164, 92, 0.5);
  font-size: var(--fs-16);
  line-height: 1.85;
  color: var(--pf-txt-dim);
}

.page-products .pf-lines__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.page-products .pf-line {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--felt);
}

.page-products .pf-line--opt {
  background: linear-gradient(158deg, var(--felt-2) 0%, var(--felt) 78%);
}

.page-products .pf-line--ded {
  background: linear-gradient(158deg, #1a3125 0%, var(--felt) 76%);
}

.page-products .pf-line__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.page-products .pf-line__name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-22);
  font-weight: 600;
  color: var(--paper);
}

.page-products .pf-line__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 5px rgba(119, 175, 166, 0.16);
}

.page-products .pf-line--opt .pf-line__dot {
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(201, 164, 92, 0.18);
}

.page-products .pf-line--ded .pf-line__dot {
  background: var(--gold-bright);
  box-shadow: 0 0 0 5px rgba(235, 208, 138, 0.2);
}

.page-products .pf-line__range {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-36);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--gold-bright);
}

.page-products .pf-line__unit {
  margin-left: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  letter-spacing: 0.06em;
  color: var(--pf-txt-mute);
}

.page-products .pf-wave {
  display: block;
  width: 100%;
  height: 56px;
  border-bottom: 1px solid var(--line);
}

.page-products .pf-line__note {
  margin: 0;
  font-size: var(--fs-16);
  line-height: 1.8;
  color: var(--pf-txt-dim);
}

.page-products .pf-line__meta {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-12);
  letter-spacing: 0.05em;
  color: var(--pf-txt-mute);
}

.page-products .pf-rates__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.page-products .pf-rate {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--felt);
}

.page-products .pf-rate__preview {
  margin-bottom: 18px;
  border: 1px solid var(--pf-line-soft);
  border-radius: var(--r-xs);
  aspect-ratio: 16 / 9;
  background-color: #16302a;
  background-image:
    radial-gradient(circle at 30% 38%, rgba(201, 164, 92, 0.55), transparent 42%),
    radial-gradient(circle at 72% 64%, rgba(119, 175, 166, 0.5), transparent 46%),
    repeating-linear-gradient(0deg, rgba(244, 238, 227, 0.14) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(244, 238, 227, 0.14) 0 1px, transparent 1px 7px);
}

.page-products .pf-rate__preview--sd { filter: blur(2.4px); }
.page-products .pf-rate__preview--hd { filter: blur(1.1px); }
.page-products .pf-rate__preview--uhd { filter: blur(0); }

.page-products .pf-rate__name {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-size: var(--fs-22);
  font-weight: 600;
  color: var(--paper);
}

.page-products .pf-rate__bw {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  letter-spacing: 0.04em;
  color: var(--gold);
}

.page-products .pf-rate__note {
  margin: 0;
  font-size: var(--fs-16);
  line-height: 1.8;
  color: var(--pf-txt-dim);
}

.page-products .pf-tempo__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  padding: 32px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(90% 100% at 0% 0%, rgba(28, 58, 43, 0.75) 0%, rgba(10, 13, 11, 0) 68%),
    var(--ink);
}

.page-products .pf-tempo__gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.page-products .pf-gauge {
  display: block;
  width: min(200px, 62vw);
  height: auto;
}

.page-products .pf-tempo__gauge-lbl {
  margin: 0;
  font-size: var(--fs-13);
  letter-spacing: 0.08em;
  color: var(--pf-txt-mute);
}

.page-products .pf-tempo__gauge-num {
  font-family: var(--font-mono);
  font-size: var(--fs-22);
  color: var(--gold-bright);
}

.page-products .pf-tempo__copy {
  min-width: 0;
}

.page-products .pf-tempo__text {
  max-width: 60ch;
  margin: 0 0 26px;
  font-size: var(--fs-16);
  line-height: 1.85;
  color: var(--pf-txt-dim);
}

.page-products .pf-shifts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--line);
  overflow: hidden;
}

.page-products .pf-shift {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  padding: 16px 18px;
  background: var(--felt);
}

.page-products .pf-shift__time {
  font-family: var(--font-mono);
  font-size: var(--fs-16);
  letter-spacing: 0.04em;
  color: var(--gold-bright);
}

.page-products .pf-shift__name {
  font-family: var(--font-serif);
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--paper);
}

.page-products .pf-shift__hint {
  flex: 1 1 100%;
  font-size: var(--fs-13);
  color: var(--pf-txt-mute);
}

.page-products .pf-tempo__peak {
  margin: 0;
  padding: 16px 18px;
  border-left: 2px solid var(--cinnabar);
  background: rgba(196, 64, 47, 0.08);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  font-size: var(--fs-16);
  line-height: 1.8;
  color: var(--pf-txt-dim);
}

.page-products .pf-tempo__peak-num {
  font-family: var(--font-mono);
  font-size: var(--fs-22);
  letter-spacing: 0.04em;
  color: #E4A79C;
}

.page-products .pf-sub__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.page-products .pf-sub__panel {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(150deg, var(--felt-2) 0%, var(--felt) 76%);
}

.page-products .pf-sub__name {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-size: var(--fs-22);
  font-weight: 600;
  color: var(--paper);
}

.page-products .pf-sub__text {
  margin: 0 0 16px;
  font-size: var(--fs-16);
  line-height: 1.85;
  color: var(--pf-txt-dim);
}

.page-products .pf-sub__meta {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-13);
  color: var(--gold);
}

.page-products .pf-sub__foot {
  margin-top: 22px;
  padding: 22px 24px;
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--text-dark);
}

.page-products .pf-sub__foot-text {
  margin: 0;
  font-size: var(--fs-16);
  line-height: 1.85;
}

.page-products .pf-sub__foot-text a {
  color: var(--cinnabar);
  text-decoration: none;
  border-bottom: 1px solid rgba(196, 64, 47, 0.4);
}

.page-products .pf-sub__foot-text a:hover {
  border-color: var(--cinnabar);
}

.page-products .pf-fit__panel {
  padding: 30px 24px;
  border: 1px solid rgba(201, 164, 92, 0.34);
  border-radius: var(--r-lg);
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(201, 164, 92, 0.14) 0%, rgba(10, 13, 11, 0) 62%),
    var(--felt);
}

.page-products .pf-fit__title {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-size: clamp(24px, 5vw, var(--fs-36));
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--paper);
}

.page-products .pf-fit__text {
  max-width: 58ch;
  margin: 0 0 28px;
  font-size: var(--fs-16);
  line-height: 1.85;
  color: var(--pf-txt-dim);
}

.page-products .pf-fit__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--line);
  overflow: hidden;
}

.page-products .pf-fit__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 16px;
  padding: 16px 18px;
  background: var(--ink);
}

.page-products .pf-fit__case {
  font-size: var(--fs-16);
  color: var(--pf-txt-dim);
}

.page-products .pf-fit__arrow {
  display: none;
  color: var(--gold);
}

.page-products .pf-fit__result {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: var(--fs-16);
  letter-spacing: 0.04em;
  color: var(--gold-bright);
}

.page-products .pf-fit__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

@media (min-width: 700px) {
  .page-products .pf-cat {
    padding: 28px;
  }

  .page-products .pf-lines__grid,
  .page-products .pf-rates__grid,
  .page-products .pf-sub__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-products .pf-fit__panel {
    padding: 40px;
  }

  .page-products .pf-fit__row {
    grid-template-columns: minmax(0, 1.6fr) auto minmax(0, 1fr);
    gap: 20px;
  }

  .page-products .pf-fit__arrow {
    display: block;
  }

  .page-products .pf-fit__result {
    grid-column: auto;
    text-align: right;
  }
}

@media (min-width: 900px) {
  .page-products .pf-hero__inner {
    grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.86fr);
    gap: 60px;
    align-items: center;
  }

  .page-products .pf-cat-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 30px 26px;
  }

  .page-products .pf-cat--a { grid-column: 1 / 5; }
  .page-products .pf-cat--b { grid-column: 5 / 7; margin-top: 86px; }
  .page-products .pf-cat--c { grid-column: 1 / 3; }
  .page-products .pf-cat--d { grid-column: 3 / 7; margin-top: 44px; }
  .page-products .pf-cat--e { grid-column: 1 / 4; }
  .page-products .pf-cat--f { grid-column: 4 / 7; margin-top: 56px; }

  .page-products .pf-level {
    grid-template-columns: 190px minmax(0, 1fr) 300px;
    align-items: center;
    gap: 30px;
    padding: 26px 30px;
  }

  .page-products .pf-tempo__inner {
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
    gap: 48px;
    padding: 44px;
    align-items: center;
  }
}

@media (min-width: 1100px) {
  .page-products .pf-lines__grid,
  .page-products .pf-rates__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-products .pf-sub__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pf-cat,
  .page-products .pf-chip,
  .page-products .pf-cat__link {
    transition: none;
  }

  .page-products .pf-cat:hover {
    transform: none;
  }
}