.page-news {
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(85% 55% at 100% 8%, rgba(142, 45, 226, .12), transparent 62%),
    radial-gradient(70% 45% at 0% 52%, rgba(30, 144, 255, .09), transparent 60%);
}

/* ---------- 首屏：框景式刊头 ---------- */
.page-news .news-masthead {
  position: relative;
  padding: clamp(1.25rem, 4vw, 2.5rem) 0 clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--fh-line);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 94% 0%, rgba(255, 77, 26, .22), transparent 60%),
    radial-gradient(100% 80% at 2% 100%, rgba(30, 144, 255, .2), transparent 58%);
}

.page-news .news-masthead::before {
  content: "";
  position: absolute;
  inset: auto auto -8rem -6rem;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 255, 61, .12), transparent 68%);
  pointer-events: none;
}

.page-news .news-masthead::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--fh-orange), var(--fh-lime), var(--fh-blue), transparent);
  background-size: 220% 100%;
  animation: news-track 7s linear infinite;
}

@keyframes news-track {
  from { background-position: 0 0; }
  to { background-position: 220% 0; }
}

.page-news .news-masthead__inner {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: end;
}

.page-news .news-masthead h1 {
  margin: .35rem 0 .9rem;
  font-family: var(--fh-font-display);
  font-size: clamp(2.6rem, 9vw, 5.5rem);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--fh-ink);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .page-news .news-masthead h1 {
    background: linear-gradient(102deg, #ffffff 26%, var(--fh-orange) 68%, var(--fh-red) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.page-news .news-masthead__lead .fh-lede {
  max-width: 40rem;
}

.page-news .news-masthead__btns {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1.35rem;
}

.page-news .news-masthead__rail {
  padding: clamp(.9rem, 2.5vw, 1.25rem);
  border: 1px solid var(--fh-line);
  border-radius: var(--fh-radius);
  background: linear-gradient(155deg, rgba(18, 11, 46, .78), rgba(7, 6, 15, .6));
}

.page-news .rail-stack {
  display: grid;
  gap: .55rem;
  margin-top: .7rem;
}

.page-news .rail-item {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "num unit"
    "label label";
  align-items: baseline;
  gap: 0 .35rem;
  padding: .7rem .85rem;
  border-left: 3px solid var(--fh-blue);
  border-radius: var(--fh-radius-sm);
  background: linear-gradient(120deg, rgba(30, 144, 255, .14), rgba(255, 255, 255, .03));
}

.page-news .rail-item--hot {
  border-left-color: var(--fh-orange);
  background: linear-gradient(120deg, rgba(255, 77, 26, .2), rgba(255, 255, 255, .03));
}

.page-news .rail-num {
  grid-area: num;
  font-family: var(--fh-font-mono);
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  font-weight: 700;
  line-height: 1;
  color: var(--fh-ink);
}

.page-news .rail-unit {
  grid-area: unit;
  font-family: var(--fh-font-mono);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--fh-cyan);
}

.page-news .rail-item--hot .rail-unit {
  color: var(--fh-lime);
}

.page-news .rail-label {
  grid-area: label;
  margin-top: .3rem;
  font-size: var(--fh-note);
  line-height: 1.5;
  color: var(--fh-muted);
}

/* ---------- 通用区块标题 ---------- */
.page-news .news-head {
  max-width: 46rem;
  margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
}

.page-news .news-head h2,
.page-news .version-copy h2,
.page-news .scene-copy h2 {
  margin: .3rem 0 .7rem;
  font-family: var(--fh-font-display);
  font-size: var(--fh-h2);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--fh-ink);
}

/* ---------- 头条条目 ---------- */
.page-news .news-feature {
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--fh-line);
  border-radius: var(--fh-radius);
  background: linear-gradient(150deg, rgba(255, 77, 26, .15), rgba(18, 11, 46, .72) 46%, rgba(30, 144, 255, .13));
  box-shadow: 0 24px 60px -40px rgba(255, 77, 26, .6);
}

.page-news .news-feature__media {
  overflow: hidden;
  border-radius: var(--fh-radius-sm);
}

.page-news .news-feature__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

.page-news .news-feature__body h3 {
  margin: .8rem 0 .65rem;
  font-family: var(--fh-font-display);
  font-size: clamp(1.35rem, 3.2vw, 2.05rem);
  font-weight: 800;
  line-height: 1.22;
  color: var(--fh-ink);
}

.page-news .news-feature__body p {
  margin: 0 0 .7rem;
  font-size: var(--fh-body);
  line-height: 1.72;
  color: var(--fh-muted);
}

.page-news .news-feature__meta {
  font-family: var(--fh-font-mono);
  font-size: var(--fh-note);
  letter-spacing: .03em;
  color: var(--fh-cyan) !important;
}

/* ---------- 分类看板 ---------- */
.page-news .news-board {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(2rem, 5vw, 3.25rem);
}

.page-news .news-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .6rem;
}

.page-news .fh-tab {
  padding: .5rem .95rem;
  border: 1px solid var(--fh-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: var(--fh-muted);
  font-family: var(--fh-font-mono);
  font-size: .8rem;
  letter-spacing: .04em;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.page-news .fh-tab:hover,
.page-news .fh-tab:focus-visible {
  border-color: var(--fh-line-strong);
  color: var(--fh-ink);
}

.page-news .fh-tab[aria-selected="true"] {
  border-color: var(--fh-orange);
  background: linear-gradient(120deg, rgba(255, 77, 26, .3), rgba(255, 77, 26, .07));
  color: var(--fh-ink);
}

/* ---------- 条目 ---------- */
.page-news .news-item {
  position: relative;
  padding: 1.05rem 0 1.05rem 1.1rem;
  border-top: 1px solid var(--fh-line);
}

.page-news .news-item:first-child {
  border-top: 0;
  padding-top: .4rem;
}

.page-news .news-item:first-child::before {
  top: .45rem;
}

.page-news .news-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.2rem;
  bottom: 1.2rem;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--fh-orange), var(--fh-red));
}

.page-news .news-item:nth-child(2n)::before {
  background: linear-gradient(180deg, var(--fh-blue), var(--fh-cyan));
}

.page-news .news-item__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.page-news .news-item__trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .85rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.page-news .news-item__text {
  font-family: var(--fh-font-display);
  font-size: clamp(1.02rem, 1.5vw, 1.24rem);
  font-weight: 700;
  line-height: 1.42;
  color: var(--fh-ink);
  transition: color .2s ease;
}

.page-news .news-item__trigger:hover .news-item__text,
.page-news .news-item__trigger:focus-visible .news-item__text {
  color: var(--fh-orange);
}

.page-news .fh-panel__icon {
  position: relative;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin-top: .15rem;
  border: 1px solid var(--fh-line-strong);
  border-radius: 50%;
  transition: transform .25s ease, border-color .25s ease;
}

.page-news .fh-panel__icon::before,
.page-news .fh-panel__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 2px;
  background: var(--fh-cyan);
  transform: translate(-50%, -50%);
}

.page-news .fh-panel__icon::before {
  width: 11px;
  height: 1.5px;
}

.page-news .fh-panel__icon::after {
  width: 1.5px;
  height: 11px;
}

.page-news .fh-panel__trigger[aria-expanded="true"] .fh-panel__icon {
  transform: rotate(135deg);
  border-color: var(--fh-orange);
}

.page-news .fh-panel__trigger[aria-expanded="true"] .fh-panel__icon::before,
.page-news .fh-panel__trigger[aria-expanded="true"] .fh-panel__icon::after {
  background: var(--fh-orange);
}

.page-news .fh-panel__body {
  padding: .75rem 0 0;
}

.page-news .fh-panel__body p {
  margin: 0 0 .55rem;
  max-width: 46rem;
  font-size: var(--fh-body);
  line-height: 1.74;
  color: var(--fh-muted);
}

.page-news .news-item__meta {
  font-family: var(--fh-font-mono);
  font-size: var(--fh-note);
  letter-spacing: .03em;
  color: var(--fh-sand) !important;
}

/* ---------- 预测区块 ---------- */
.page-news .predict-section {
  position: relative;
}

.page-news .predict-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
  margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
}

.page-news .predict-stat {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .85rem .9rem;
  border: 1px solid var(--fh-line);
  border-radius: var(--fh-radius-sm);
  background: linear-gradient(160deg, rgba(30, 144, 255, .14), rgba(255, 255, 255, .03));
}

.page-news .predict-stat--hot {
  border-color: rgba(255, 77, 26, .5);
  background: linear-gradient(160deg, rgba(255, 77, 26, .24), rgba(255, 255, 255, .03));
}

.page-news .predict-stat__value {
  font-family: var(--fh-font-mono);
  font-size: clamp(1.85rem, 4.5vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--fh-ink);
}

.page-news .predict-stat__unit {
  font-family: var(--fh-font-mono);
  font-size: .8rem;
  letter-spacing: .05em;
  color: var(--fh-cyan);
}

.page-news .predict-stat--hot .predict-stat__unit {
  color: var(--fh-lime);
}

.page-news .predict-stat__label {
  font-size: var(--fh-note);
  line-height: 1.5;
  color: var(--fh-muted);
}

.page-news .predict-layout {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.25rem);
}

.page-news .predict-copy h3 {
  margin: 0 0 .5rem;
  font-family: var(--fh-font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 700;
  color: var(--fh-ink);
}

.page-news .predict-copy h3 + p {
  margin: 0 0 1.25rem;
  font-size: var(--fh-body);
  line-height: 1.74;
  color: var(--fh-muted);
}

.page-news .predict-dimensions {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .55rem;
}

.page-news .predict-dimensions li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem;
  align-items: center;
  padding: .6rem .8rem;
  border-radius: var(--fh-radius-sm);
  background: rgba(255, 255, 255, .04);
  font-size: var(--fh-body);
  line-height: 1.6;
  color: var(--fh-muted);
}

.page-news .predict-dimensions li span {
  font-family: var(--fh-font-mono);
  font-size: .82rem;
  font-weight: 700;
  color: var(--fh-blue);
}

.page-news .predict-figure,
.page-news .version-figure,
.page-news .scene-media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--fh-radius);
  border: 1px solid var(--fh-line);
  background: linear-gradient(140deg, rgba(30, 144, 255, .16), rgba(7, 6, 15, .85));
}

.page-news .predict-figure img,
.page-news .version-figure img,
.page-news .scene-media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

.page-news .predict-figure figcaption,
.page-news .version-figure figcaption {
  padding: .7rem .9rem .85rem;
  font-size: var(--fh-note);
  line-height: 1.6;
  color: var(--fh-muted-soft);
}

/* ---------- 版本日志 ---------- */
.page-news .version-layout {
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
}

.page-news .fh-timeline {
  position: relative;
  margin-top: 1.5rem;
  padding-left: 1.75rem;
}

.page-news .fh-timeline::before {
  content: "";
  position: absolute;
  left: .5rem;
  top: .5rem;
  bottom: .5rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--fh-blue), var(--fh-orange), var(--fh-lime));
}

.page-news .fh-timeline__item {
  position: relative;
  padding: .55rem 0 1.15rem;
}

.page-news .fh-timeline__item::before {
  content: "";
  position: absolute;
  left: calc(-1.25rem - 5px);
  top: 1rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fh-lime);
  box-shadow: 0 0 0 3px rgba(200, 255, 61, .16);
}

.page-news .fh-timeline__mark {
  display: inline-block;
  margin-bottom: .4rem;
  padding: .18rem .55rem;
  border: 1px solid rgba(30, 144, 255, .45);
  border-radius: 999px;
  font-family: var(--fh-font-mono);
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--fh-cyan);
}

.page-news .fh-timeline__item h3 {
  margin: 0 0 .4rem;
  font-family: var(--fh-font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--fh-ink);
}

.page-news .fh-timeline__item p {
  margin: 0;
  font-size: var(--fh-body);
  line-height: 1.74;
  color: var(--fh-muted);
}

/* ---------- 数据专题 ---------- */
.page-news .report-list {
  display: grid;
  gap: 0;
}

.page-news .report-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 1.25rem 0;
  border-top: 1px solid var(--fh-line);
}

.page-news .report-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.page-news .report-item__no {
  font-family: var(--fh-font-mono);
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 77, 26, .45);
  -webkit-text-stroke: 1px rgba(255, 77, 26, .85);
}

.page-news .report-item h3 {
  margin: 0 0 .45rem;
  font-family: var(--fh-font-display);
  font-size: clamp(1.08rem, 1.9vw, 1.42rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--fh-ink);
}

.page-news .report-item p {
  margin: 0;
  max-width: 52rem;
  font-size: var(--fh-body);
  line-height: 1.76;
  color: var(--fh-muted);
}

/* ---------- 社区现场 ---------- */
.page-news .scene-layout {
  display: grid;
  gap: clamp(1.35rem, 3.5vw, 2.25rem);
  align-items: center;
}

.page-news .scene-media {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
  border-radius: var(--fh-radius) var(--fh-radius) 0 var(--fh-radius);
}

.page-news .scene-list {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .9rem;
}

.page-news .scene-list li {
  padding-left: .95rem;
  border-left: 3px solid var(--fh-magenta);
}

.page-news .scene-list li:nth-child(2) {
  border-left-color: var(--fh-orange);
}

.page-news .scene-list li:nth-child(3) {
  border-left-color: var(--fh-lime);
}

.page-news .scene-list h3 {
  margin: 0 0 .3rem;
  font-family: var(--fh-font-display);
  font-size: clamp(1rem, 1.6vw, 1.22rem);
  font-weight: 700;
  color: var(--fh-ink);
}

.page-news .scene-list p {
  margin: 0;
  font-size: var(--fh-body);
  line-height: 1.72;
  color: var(--fh-muted);
}

/* ---------- 信息获取 ---------- */
.page-news .get-grid {
  display: grid;
  gap: .85rem;
}

.page-news .get-card {
  position: relative;
  display: block;
  padding: 1.15rem 1rem 1.15rem 1.15rem;
  border: 1px solid var(--fh-line);
  border-radius: var(--fh-radius-sm);
  background: linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(18, 11, 46, .55));
  text-decoration: none;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.page-news .get-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15rem;
  bottom: 1.15rem;
  width: 3px;
  border-radius: 2px;
  background: var(--fh-blue);
  transition: background .22s ease;
}

.page-news .get-card:hover,
.page-news .get-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--fh-orange);
  background: linear-gradient(160deg, rgba(255, 77, 26, .16), rgba(18, 11, 46, .6));
}

.page-news .get-card:hover::after,
.page-news .get-card:focus-visible::after {
  background: var(--fh-lime);
}

.page-news .get-card__no {
  display: block;
  margin-bottom: .5rem;
  font-family: var(--fh-font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--fh-cyan);
}

.page-news .get-card h3 {
  margin: 0 0 .4rem;
  font-family: var(--fh-font-display);
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.38;
  color: var(--fh-ink);
}

.page-news .get-card p {
  margin: 0;
  font-size: var(--fh-note);
  line-height: 1.68;
  color: var(--fh-muted);
}

/* ---------- 断点 ---------- */
@media (min-width: 640px) {
  .page-news .predict-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-news .get-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 720px) {
  .page-news .news-feature__body h3 {
    max-width: 30rem;
  }

  .page-news .report-item:nth-child(2n) {
    margin-left: clamp(1rem, 5vw, 4rem);
  }

  .page-news .news-item:nth-child(odd) {
    padding-right: clamp(0rem, 4vw, 3.5rem);
  }

  .page-news .news-item:nth-child(even) {
    margin-left: clamp(1rem, 5vw, 3.75rem);
  }
}

@media (min-width: 860px) {
  .page-news .news-feature {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    align-items: center;
  }
}

@media (min-width: 900px) {
  .page-news .news-masthead__inner {
    grid-template-columns: minmax(0, 1.6fr) minmax(240px, .78fr);
  }

  .page-news .predict-layout {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    align-items: start;
  }

  .page-news .version-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: start;
  }

  .page-news .scene-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
  }
}

@media (min-width: 940px) {
  .page-news .news-board {
    grid-template-columns: minmax(170px, 210px) minmax(0, 1fr);
    align-items: start;
  }

  .page-news .news-filters {
    flex-direction: column;
    flex-wrap: nowrap;
    position: sticky;
    top: 7rem;
  }

  .page-news .fh-tab {
    border-radius: var(--fh-radius-sm);
    text-align: left;
  }
}

@media (min-width: 1000px) {
  .page-news .get-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .page-news .news-feature__body h3 {
    font-size: 1.3rem;
  }

  .page-news .report-item {
    grid-template-columns: minmax(0, 1fr);
    gap: .5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .news-masthead::after {
    animation: none;
  }

  .page-news .get-card {
    transition: none;
  }
}
</style>
<<<END>>>

等等，我加了一个不需要的 `</style>`。让我删掉它。

其实输出格式应该是 MAIN_HTML 然后是 PAGE_CSS。绝对不能包含 `</style>` 或者 `<style>` 标签。让我修正。
<main id="main-content" class="page-news">

  <div class="fh-shell">
    <nav class="fh-breadcrumb" aria-label="当前位置">
      <ol>
        <li><a href="/">首页</a></li>
        <li aria-current="page">火马快讯</li>
      </ol>
    </nav>
  </div>

  <header class="news-masthead">
    <div class="fh-shell news-masthead__inner">
      <div class="news-masthead__lead">
        <p class="fh-kicker">FIRE HORSE DISPATCH · 赛道快讯</p>
        <h1>火马快讯</h1>
        <p class="fh-lede">哪个小组的出线形势刚刚翻转、选手的经济曲线在哪一分钟被拉开、稳定版又多了哪项顺手的新功能——火马电竞把这些每天都会改变观赛判断的信息整理成一条条快讯，让你花几分钟就能跟上整条火马赛道。</p>
        <div class="news-masthead__btns">
          <a class="fh-btn fh-btn--fire" href="/projects/">打开赛事项目中心</a>
          <a class="fh-btn fh-btn--lime" href="/questions/">查找使用问题</a>
        </div>
      </div>

      <aside class="news-masthead__rail" aria-label="更新节奏">
        <p class="fh-kicker">更新节奏</p>
        <div class="rail-stack">
          <div class="rail-item">
            <span class="rail-num">72</span>
            <span class="rail-unit">小时</span>
            <span class="rail-label">常规赛段预测刷新一轮</span>
          </div>
          <div class="rail-item rail-item--hot">
            <span class="rail-num">48</span>
            <span class="rail-unit">小时</span>
            <span class="rail-label">赛程密集期加速更新</span>
          </div>
          <div class="rail-item">
            <span class="rail-num">12</span>
            <span class="rail-unit">个项目</span>
            <span class="rail-label">预测覆盖主流赛事</span>
          </div>
        </div>
      </aside>
    </div>
  </header>

  <section class="fh-section" aria-labelledby="latest-heading">
    <div class="fh-shell">
      <div class="news-head">
        <p class="fh-kicker">LATEST · 持续更新</p>
        <h2 id="latest-heading">最新赛道快讯</h2>
        <p class="fh-lede">从赛事现场到版本日志，从数据专题到社区活动，按你关心的方向挑一条往下读。</p>
      </div>

      <article class="news-feature" data-reveal>
        <div class="news-feature__media fh-media fh-media--16x9">
          <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="低角度广角的电竞赛事舞台，橙红与霓虹蓝灯光交织在观众灯牌之间">
        </div>
        <div class="news-feature__body">
          <span class="fh-tag fh-tag--lime">赛事报道</span>
          <h3>小组赛阶段对阵图同步完成，出线形势一眼看得见</h3>
          <p>抽签仪式结束后的十分钟内，完整对阵图与各组种子顺位就已经在赛事项目中心上线。你可以按小组逐个展开，对照战队近几个赛季的交手记录，判断哪一场才是真正的分水岭。</p>
          <p class="news-feature__meta">赛季阶段 · 小组赛 / 版本阶段 · 当前比赛版本</p>
          <a class="fh-link" href="/projects/">查看实时签表与对阵 →</a>
        </div>
      </article>

      <div class="news-board fh-tabs" data-tabs>
        <div class="news-board__rail">
          <p class="fh-kicker">分类</p>
          <div class="news-filters" role="tablist" aria-label="快讯分类">
            <button type="button" class="fh-tab" data-tab id="tab-match" role="tab" aria-selected="true" aria-controls="panel-match">赛事报道</button>
            <button type="button" class="fh-tab" data-tab id="tab-predict" role="tab" aria-selected="false" aria-controls="panel-predict">排名预测</button>
            <button type="button" class="fh-tab" data-tab id="tab-version" role="tab" aria-selected="false" aria-controls="panel-version">版本更新</button>
            <button type="button" class="fh-tab" data-tab id="tab-data" role="tab" aria-selected="false" aria-controls="panel-data">数据专题</button>
            <button type="button" class="fh-tab" data-tab id="tab-community" role="tab" aria-selected="false" aria-controls="panel-community">社区现场</button>
          </div>
        </div>

        <div class="news-board__panel">

          <div class="fh-tabpanel" data-tabpanel id="panel-match" role="tabpanel" aria-labelledby="tab-match">
            <div class="fh-panel news-item" data-panel>
              <h3 class="news-item__title">
                <button type="button" class="news-item__trigger fh-panel__trigger" data-panel-trigger aria-expanded="false" aria-controls="nx-match-1">
                  <span class="news-item__text">职业与半职业赛事跟踪报道，一年覆盖 220 场以上</span>
                  <span class="fh-panel__icon" aria-hidden="true"></span>
                </button>
              </h3>
              <div class="fh-panel__body" data-panel-body id="nx-match-1">
                <p>报道团队跟着赛程走，从顶级联赛一直排到半职业公开赛。每个赛段收尾时，你会看到完整的对局回顾，以及值得回看的几个关键节点。</p>
                <p class="news-item__meta">赛季阶段 · 赛季进行中</p>
              </div>
            </div>

            <div class="fh-panel news-item" data-panel>
              <h3 class="news-item__title">
                <button type="button" class="news-item__trigger fh-panel__trigger" data-panel-trigger aria-expanded="false" aria-controls="nx-match-2">
                  <span class="news-item__text">与 48 家电竞俱乐部、26 家赛事主办方的内容合作陆续落地</span>
                  <span class="fh-panel__icon" aria-hidden="true"></span>
                </button>
              </h3>
              <div class="fh-panel__body" data-panel-body id="nx-match-2">
                <p>战队首发变动、教练组调整、主办方赛制说明，这些直接影响你判断走向的一手信息，会在确认后第一时间出现在快讯里。</p>
                <p class="news-item__meta">赛季阶段 · 转会与报名窗口</p>
              </div>
            </div>

            <div class="fh-panel news-item" data-panel>
              <h3 class="news-item__title">
                <button type="button" class="news-item__trigger fh-panel__trigger" data-panel-trigger aria-expanded="false" aria-controls="nx-match-3">
                  <span class="news-item__text">赛场之外也在更新：设备调试与选手备战节奏</span>
                  <span class="fh-panel__icon" aria-hidden="true"></span>
                </button>
              </h3>
              <div class="fh-panel__body" data-panel-body id="nx-match-3">
                <p>比分之外还有场馆布置、外设更换和赛前热身的记录。看懂一场比赛是怎么被打完的，比只看结果有意思得多。</p>
                <p class="news-item__meta">赛季阶段 · 比赛周</p>
              </div>
            </div>
          </div>

          <div class="fh-tabpanel" data-tabpanel id="panel-predict" role="tabpanel" aria-labelledby="tab-predict">
            <div class="fh-panel news-item" data-panel>
              <h3 class="news-item__title">
                <button type="button" class="news-item__trigger fh-panel__trigger" data-panel-trigger aria-expanded="false" aria-controls="nx-predict-1">
                  <span class="news-item__text">华人电竞小组排名预测完成本轮刷新</span>
                  <span class="fh-panel__icon" aria-hidden="true"></span>
                </button>
              </h3>
              <div class="fh-panel__body" data-panel-body id="nx-predict-1">
                <p>本轮结果已经更新，模型重新计算了各组的出线概率与淘汰赛对位。进入连续比赛日之后，下一轮刷新会在 48 小时内到来。</p>
                <p class="news-item__meta">赛季阶段 · 小组赛后半程 / 本轮已完成</p>
              </div>
            </div>

            <div class="fh-panel news-item" data-panel>
              <h3 class="news-item__title">
                <button type="button" class="news-item__trigger fh-panel__trigger" data-panel-trigger aria-expanded="false" aria-controls="nx-predict-2">
                  <span class="news-item__text">模型换版：当前版本的战队胜率权重上调</span>
                  <span class="fh-panel__icon" aria-hidden="true"></span>
                </button>
              </h3>
              <div class="fh-panel__body" data-panel-body id="nx-predict-2">
                <p>比赛版本更替之后，历史交手记录的参考价值会明显衰减。这次调整把当前版本的胜率权重抬高，让排名更贴近战队眼下的真实手感。</p>
                <p class="news-item__meta">赛季阶段 · 版本更替窗口</p>
              </div>
            </div>

            <div class="fh-panel news-item" data-panel>
              <h3 class="news-item__title">
                <button type="button" class="news-item__trigger fh-panel__trigger" data-panel-trigger aria-expanded="false" aria-controls="nx-predict-3">
                  <span class="news-item__text">预测区间怎么读：看概率，也看两支战队的差值</span>
                  <span class="fh-panel__icon" aria-hidden="true"></span>
                </button>
              </h3>
              <div class="fh-panel__body" data-panel-body id="nx-predict-3">
                <p>同一小组里两支战队的出线概率如果只差几个百分点，说明赛程强度几乎抵消了纸面上的差距——这种组往往要打到最后一轮才见分晓。</p>
                <p class="news-item__meta">赛季阶段 · 全赛段通用</p>
              </div>
            </div>
          </div>

          <div class="fh-tabpanel" data-tabpanel id="panel-version" role="tabpanel" aria-labelledby="tab-version">
            <div class="fh-panel news-item" data-panel>
              <h3 class="news-item__title">
                <button type="button" class="news-item__trigger fh-panel__trigger" data-panel-trigger aria-expanded="false" aria-controls="nx-ver-1">
                  <span class="news-item__text">网页稳定版 4.2 上线，观赛偏好可以跟着账号走</span>
                  <span class="fh-panel__icon" aria-hidden="true"></span>
                </button>
              </h3>
              <div class="fh-panel__body" data-panel-body id="nx-ver-1">
                <p>换设备登录之后，常看的项目、默认赛区和回看清晰度会跟着账号恢复，不用再一项项重设。账号进度同时支持云同步，中途切设备也不丢进度。</p>
                <p class="news-item__meta">版本阶段 · 4.2 已全量</p>
              </div>
            </div>

            <div class="fh-panel news-item" data-panel>
              <h3 class="news-item__title">
                <button type="button" class="news-item__trigger fh-panel__trigger" data-panel-trigger aria-expanded="false" aria-controls="nx-ver-2">
                  <span class="news-item__text">中英双语赛事数据接口开放申请</span>
                  <span class="fh-panel__icon" aria-hidden="true"></span>
                </button>
              </h3>
              <div class="fh-panel__body" data-panel-body id="nx-ver-2">
                <p>社区创作者、数据爱好者和校园战队都可以提交申请，用同一套字段搭建自己的数据看板，省掉反复对表头的功夫。</p>
                <p class="news-item__meta">版本阶段 · 接口服务持续开放</p>
              </div>
            </div>
          </div>

          <div class="fh-tabpanel" data-tabpanel id="panel-data" role="tabpanel" aria-labelledby="tab-data">
            <div class="fh-panel news-item" data-panel>
              <h3 class="news-item__title">
                <button type="button" class="news-item__trigger fh-panel__trigger" data-panel-trigger aria-expanded="false" aria-controls="nx-data-1">
                  <span class="news-item__text">经济曲线专题：30 秒采样，还原经济差是怎么被拉开的</span>
                  <span class="fh-panel__icon" aria-hidden="true"></span>
                </button>
              </h3>
              <div class="fh-panel__body" data-panel-body id="nx-data-1">
                <p>每一次团战前后的装备差、补刀差和野区收益都落在曲线上。你可以拖动到任意时间点，看看那条线到底是在哪一波被掰弯的。</p>
                <p class="news-item__meta">覆盖选手 · 8600 余名现役与退役选手</p>
              </div>
            </div>

            <div class="fh-panel news-item" data-panel>
              <h3 class="news-item__title">
                <button type="button" class="news-item__trigger fh-panel__trigger" data-panel-trigger aria-expanded="false" aria-controls="nx-data-2">
                  <span class="news-item__text">对局时长分析：版本节奏变了，比赛是提速还是变慢</span>
                  <span class="fh-panel__icon" aria-hidden="true"></span>
                </button>
              </h3>
              <div class="fh-panel__body" data-panel-body id="nx-data-2">
                <p>把各个版本的平均对局时长排在一条线上，就能看出哪次改动把比赛拖进了后期，哪次改动又把节奏整体提前。</p>
                <p class="news-item__meta">观察方式 · 单局时长与参团率联合阅读</p>
              </div>
            </div>

            <div class="fh-panel news-item" data-panel>
              <h3 class="news-item__title">
                <button type="button" class="news-item__trigger fh-panel__trigger" data-panel-trigger aria-expanded="false" aria-controls="nx-data-3">
                  <span class="news-item__text">《华人电竞观赛趋势报告》最新一期发布</span>
                  <span class="fh-panel__icon" aria-hidden="true"></span>
                </button>
              </h3>
              <div class="fh-panel__body" data-panel-body id="nx-data-3">
                <p>报告汇总了赛段内的观赛时段分布、项目热度变化与社群讨论走向。连续发布 4 期以来，已被 60 余家媒体与行业机构引用。</p>
                <p class="news-item__meta">发布周期 · 每年度一期</p>
              </div>
            </div>
          </div>

          <div class="fh-tabpanel" data-tabpanel id="panel-community" role="tabpanel" aria-labelledby="tab-community">
            <div class="fh-panel news-item" data-panel>
              <h3 class="news-item__title">
                <button type="button" class="news-item__trigger fh-panel__trigger" data-panel-trigger aria-expanded="false" aria-controls="nx-com-1">
                  <span class="news-item__text">天山杯华人电竞邀请赛进入新一届筹备</span>
                  <span class="fh-panel__icon" aria-hidden="true"></span>
                </button>
              </h3>
              <div class="fh-panel__body" data-panel-body id="nx-com-1">
                <p>这项自有赛事已经连续举办 5 届，累计参赛战队超过 1200 支。新一届的赛程安排与报名节奏会通过快讯陆续放出。</p>
                <p class="news-item__meta">赛事阶段 · 筹备期</p>
              </div>
            </div>

            <div class="fh-panel news-item" data-panel>
              <h3 class="news-item__title">
                <button type="button" class="news-item__trigger fh-panel__trigger" data-panel-trigger aria-expanded="false" aria-controls="nx-com-2">
                  <span class="news-item__text">校园电竞社团合作覆盖 210 所高校</span>
                  <span class="fh-panel__icon" aria-hidden="true"></span>
                </button>
              </h3>
              <div class="fh-panel__body" data-panel-body id="nx-com-2">
                <p>从校内联赛到线上观赛夜，社团可以用平台开放的赛程数据，做自己的解说台本、赛果海报和赛后复盘。</p>
                <p class="news-item__meta">覆盖范围 · 高校社团持续招募中</p>
              </div>
            </div>

            <div class="fh-panel news-item" data-panel>
              <h3 class="news-item__title">
                <button type="button" class="news-item__trigger fh-panel__trigger" data-panel-trigger aria-expanded="false" aria-controls="nx-com-3">
                  <span class="news-item__text">新疆本地电竞文化公益课与青少年解说培训持续开课</span>
                  <span class="fh-panel__icon" aria-hidden="true"></span>
                </button>
              </h3>
              <div class="fh-panel__body" data-panel-body id="nx-com-3">
                <p>累计参与学员超过 4300 人次。课程从赛事规则一直讲到解说节奏，让更多本地年轻人第一次站到镜头前把一场比赛说清楚。</p>
                <p class="news-item__meta">活动地点 · 乌鲁木齐内容运营中心</p>
              </div>
            </div>
          </div>

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

  <section class="fh-section predict-section" aria-labelledby="predict-heading">
    <div class="fh-shell">
      <div class="news-head">
        <p class="fh-kicker">PREDICTION · 跟随赛程</p>
        <h2 id="predict-heading">小组排名预测更新</h2>
        <p class="fh-lede">每一轮打完，出线形势都会重新洗牌。我们把近三个赛季的交手记录、当前版本的战队胜率、选手状态和赛程强度放在一起算，给你一个能对照实际比分的参考。</p>
      </div>

      <div class="predict-stats">
        <div class="predict-stat">
          <span class="predict-stat__value">72</span>
          <span class="predict-stat__unit">小时</span>
          <span class="predict-stat__label">常规赛段刷新间隔</span>
        </div>
        <div class="predict-stat">
          <span class="predict-stat__value">48</span>
          <span class="predict-stat__unit">小时</span>
          <span class="predict-stat__label">赛程密集期加速</span>
        </div>
        <div class="predict-stat">
          <span class="predict-stat__value">12</span>
          <span class="predict-stat__unit">个</span>
          <span class="predict-stat__label">覆盖主流电竞项目</span>
        </div>
        <div class="predict-stat predict-stat--hot">
          <span class="predict-stat__value">78</span>
          <span class="predict-stat__unit">%</span>
          <span class="predict-stat__label">预测准确率稳定区间</span>
        </div>
      </div>

      <div class="predict-layout">
        <div class="predict-copy">
          <h3>什么时候会看到新结果</h3>
          <p>常规赛段每 72 小时重新计算一轮。一旦进入连续比赛日，节奏会压缩到 48 小时，确保你在下一场开打之前拿到最新的出线概率和淘汰赛对位。</p>
          <h3>模型在看哪几件事</h3>
          <ul class="predict-dimensions">
            <li><span>01</span>近三个赛季的战队交手记录与胜负分布</li>
            <li><span>02</span>当前比赛版本下的战队胜率与阵容适配度</li>
            <li><span>03</span>首发选手近期状态与轮换、伤病情况</li>
            <li><span>04</span>剩余赛程强度，包括连续客场与背靠背日程</li>
          </ul>
          <p class="fh-note">预测用于加深观赛理解，实际赛果仍由赛场决定。想直接查选手数据，可以到赛事项目中心翻经济曲线和对局时长。</p>
        </div>

        <figure class="predict-figure">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="排名预测双时间轴信息图，标注 72 小时常规刷新与 48 小时密集期提速节点" loading="lazy" decoding="async">
          <figcaption>常规阶段与密集阶段的两条更新节奏，以及对应的经济曲线变化节点。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="fh-section version-section" aria-labelledby="version-heading">
    <div class="fh-shell">
      <div class="version-layout">
        <div class="version-copy">
          <p class="fh-kicker">RELEASE LOG · 版本与功能</p>
          <h2 id="version-heading">版本与功能日志</h2>
          <p class="fh-lede">稳定版一直在往前走。每一次改动都为了解决一个具体麻烦——卡顿、丢进度、换设备要重设、想用数据却找不到现成接口。</p>

          <div class="fh-timeline">
            <div class="fh-timeline__item">
              <span class="fh-timeline__mark">稳定版基础</span>
              <h3>连续观赛不中断，低带宽也能看</h3>
              <p>兼容主流浏览器与低带宽网络，连续观赛 4 小时平均无卡顿，页面加载时间控制在 1.8 秒以内。在宿舍、在通勤路上，画面都不容易掉链子。</p>
            </div>
            <div class="fh-timeline__item">
              <span class="fh-timeline__mark">4.2</span>
              <h3>网页稳定版 4.2：进度能同步，偏好能迁移</h3>
              <p>账号进度支持云同步，观赛偏好跟着账号走，无插件回看也一并上线。老用户回来不用重新熟悉，打开就是熟悉的赛区和画质。</p>
            </div>
            <div class="fh-timeline__item">
              <span class="fh-timeline__mark">数据接口</span>
              <h3>中英双语接口对社区开放</h3>
              <p>字段统一、中英双语，社区创作者与校园战队免费申请使用，省下自己去清洗数据的时间。</p>
            </div>
          </div>
        </div>

        <figure class="version-figure">
          <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="网页稳定版界面窗口示意图，带有 4.2 版本号发光标识与赛道流光边框" loading="lazy" decoding="async">
          <figcaption>稳定版 4.2 的账号同步与偏好迁移面板。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="fh-section report-section" aria-labelledby="report-heading">
    <div class="fh-shell">
      <div class="news-head">
        <p class="fh-kicker">DOSSIER · 数据专题</p>
        <h2 id="report-heading">数据专题与报告</h2>
        <p class="fh-lede">赛果之外，还有一层看得见的逻辑。下面这些专题会一直做下去，因为它们回答的是同一个问题：这场比赛为什么会打成这样。</p>
      </div>

      <div class="report-list">
        <article class="report-item">
          <span class="report-item__no">01</span>
          <div>
            <h3>《华人电竞观赛趋势报告》</h3>
            <p>汇总赛段内的观赛时段分布、项目热度变化和社群讨论走向，连续发布 4 期，已被 60 余家媒体与行业机构引用。做赛事运营或品牌投放的团队，常把它当作判断窗口期的参考。</p>
          </div>
        </article>
        <article class="report-item">
          <span class="report-item__no">02</span>
          <div>
            <h3>经济曲线专题</h3>
            <p>以 30 秒为采样间隔，可以回看单局任意时间段的团队经济差与核心装备节点。想知道哪一波团战真正改变了胜负天平，从这条曲线往下找就行。</p>
          </div>
        </article>
        <article class="report-item">
          <span class="report-item__no">03</span>
          <div>
            <h3>对局时长与参团率分析</h3>
            <p>把不同版本的平均对局时长并排看，能分辨哪次改动把比赛带进了后期运营，哪次改动让节奏整体提速。配合参团率一起读，阵容风格的变化会更清楚。</p>
          </div>
        </article>
        <article class="report-item">
          <span class="report-item__no">04</span>
          <div>
            <h3>选手资料与历史对局</h3>
            <p>覆盖 8600 余名现役与退役选手的基础资料、历史对局与状态走势。解说备稿、社团复盘、写赛评，都可以直接从这份档案查起。</p>
          </div>
        </article>
      </div>
    </div>
  </section>

  <section class="fh-section scene-section" aria-labelledby="scene-heading">
    <div class="fh-shell">
      <div class="scene-layout">
        <figure class="scene-media">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="社区观赛聚会剪影，背景是天山轮廓与霓虹蓝、橙红交织的灯光" loading="lazy" decoding="async">
        </figure>

        <div class="scene-copy">
          <p class="fh-kicker">COMMUNITY · 社区与现场</p>
          <h2 id="scene-heading">社区与赛事现场</h2>
          <p class="fh-lede">火马赛道不只存在于屏幕上。从乌鲁木齐的公益课堂到全国高校的观赛夜，这些现场构成了平台的另一半。</p>

          <ul class="scene-list">
            <li>
              <h3>天山杯华人电竞邀请赛</h3>
              <p>连续举办 5 届，累计参赛战队超过 1200 支。从报名、分组到决赛，整条链路都按职业赛事的节奏来跑。</p>
            </li>
            <li>
              <h3>校园电竞社团联动</h3>
              <p>合作覆盖 210 所高校，社区注册战队达到 7800 余支。社团可以直接调用平台数据，做自己的解说台本和赛后复盘。</p>
            </li>
            <li>
              <h3>新疆本地电竞文化公益课</h3>
              <p>面向本地青少年开设解说与赛事规则课程，累计参与学员超过 4300 人次，让更多人第一次站到镜头前说清楚一场比赛。</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <section class="fh-section get-section" aria-labelledby="get-heading">
    <div class="fh-shell">
      <div class="news-head">
        <p class="fh-kicker">STAY ON TRACK · 保持跟随</p>
        <h2 id="get-heading">不会错过后面的更新</h2>
        <p class="fh-lede">快讯按赛季阶段滚动发布，排名预测和版本日志都有固定的更新节奏。想持续拿到这些信息，下面几条路都可以走。</p>
      </div>

      <div class="get-grid">
        <a class="get-card" href="/press/">
          <span class="get-card__no">A</span>
          <h3>常回快讯页</h3>
          <p>预测刷新、版本日志与社区动态都会在这里按分类排好，直接挑你关心的那一条。</p>
        </a>
        <a class="get-card" href="/projects/">
          <span class="get-card__no">B</span>
          <h3>盯住签表和选手数据</h3>
          <p>赛事项目中心提供实时对阵图、经济曲线与对局时长查询，适合边看边对照。</p>
        </a>
        <a class="get-card" href="/questions/">
          <span class="get-card__no">C</span>
          <h3>遇到问题先查问答</h3>
          <p>回归账号、进入观赛入口、预测多久更新一次，常见问题的答案都整理在一起。</p>
        </a>
        <a class="get-card" href="/feedback/">
          <span class="get-card__no">D</span>
          <h3>合作与反馈走商务通道</h3>
          <p>赛事合作、品牌对接和数据接口申请，都可以通过联系与反馈页面提交。</p>
        </a>
      </div>
    </div>
  </section>

</main>

.page-news {
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(85% 55% at 100% 8%, rgba(142, 45, 226, .12), transparent 62%),
    radial-gradient(70% 45% at 0% 52%, rgba(30, 144, 255, .09), transparent 60%);
}

/* ---------- 首屏：框景式刊头 ---------- */
.page-news .news-masthead {
  position: relative;
  overflow: hidden;
  padding: clamp(1.25rem, 4vw, 2.5rem) 0 clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--fh-line);
  background:
    radial-gradient(120% 90% at 94% 0%, rgba(255, 77, 26, .22), transparent 60%),
    radial-gradient(100% 80% at 2% 100%, rgba(30, 144, 255, .2), transparent 58%);
}

.page-news .news-masthead::before {
  content: "";
  position: absolute;
  left: -6rem;
  bottom: -8rem;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 255, 61, .12), transparent 68%);
  pointer-events: none;
}

.page-news .news-masthead::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--fh-orange), var(--fh-lime), var(--fh-blue), transparent);
  background-size: 220% 100%;
  animation: news-track 7s linear infinite;
}

@keyframes news-track {
  from { background-position: 0 0; }
  to { background-position: 220% 0; }
}

.page-news .news-masthead__inner {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: end;
}

.page-news .news-masthead h1 {
  margin: .35rem 0 .9rem;
  font-family: var(--fh-font-display);
  font-size: clamp(2.6rem, 9vw, 5.5rem);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--fh-ink);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .page-news .news-masthead h1 {
    background: linear-gradient(102deg, #ffffff 26%, var(--fh-orange) 68%, var(--fh-red) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.page-news .news-masthead__lead .fh-lede {
  max-width: 40rem;
}

.page-news .news-masthead__btns {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1.35rem;
}

.page-news .news-masthead__rail {
  padding: clamp(.9rem, 2.5vw, 1.25rem);
  border: 1px solid var(--fh-line);
  border-radius: var(--fh-radius);
  background: linear-gradient(155deg, rgba(18, 11, 46, .78), rgba(7, 6, 15, .6));
}

.page-news .rail-stack {
  display: grid;
  gap: .55rem;
  margin-top: .7rem;
}

.page-news .rail-item {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "num unit"
    "label label";
  align-items: baseline;
  gap: 0 .35rem;
  padding: .7rem .85rem;
  border-left: 3px solid var(--fh-blue);
  border-radius: var(--fh-radius-sm);
  background: linear-gradient(120deg, rgba(30, 144, 255, .14), rgba(255, 255, 255, .03));
}

.page-news .rail-item--hot {
  border-left-color: var(--fh-orange);
  background: linear-gradient(120deg, rgba(255, 77, 26, .2), rgba(255, 255, 255, .03));
}

.page-news .rail-num {
  grid-area: num;
  font-family: var(--fh-font-mono);
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  font-weight: 700;
  line-height: 1;
  color: var(--fh-ink);
}

.page-news .rail-unit {
  grid-area: unit;
  font-family: var(--fh-font-mono);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--fh-cyan);
}

.page-news .rail-item--hot .rail-unit {
  color: var(--fh-lime);
}

.page-news .rail-label {
  grid-area: label;
  margin-top: .3rem;
  font-size: var(--fh-note);
  line-height: 1.5;
  color: var(--fh-muted);
}

/* ---------- 通用区块标题 ---------- */
.page-news .news-head {
  max-width: 46rem;
  margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
}

.page-news .news-head h2,
.page-news .version-copy h2,
.page-news .scene-copy h2 {
  margin: .3rem 0 .7rem;
  font-family: var(--fh-font-display);
  font-size: var(--fh-h2);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--fh-ink);
}

/* ---------- 头条条目 ---------- */
.page-news .news-feature {
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--fh-line);
  border-radius: var(--fh-radius);
  background: linear-gradient(150deg, rgba(255, 77, 26, .15), rgba(18, 11, 46, .72) 46%, rgba(30, 144, 255, .13));
  box-shadow: 0 24px 60px -40px rgba(255, 77, 26, .6);
}

.page-news .news-feature__media {
  overflow: hidden;
  border-radius: var(--fh-radius-sm);
}

.page-news .news-feature__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

.page-news .news-feature__body h3 {
  margin: .8rem 0 .65rem;
  font-family: var(--fh-font-display);
  font-size: clamp(1.35rem, 3.2vw, 2.05rem);
  font-weight: 800;
  line-height: 1.22;
  color: var(--fh-ink);
}

.page-news .news-feature__body p {
  margin: 0 0 .7rem;
  font-size: var(--fh-body);
  line-height: 1.72;
  color: var(--fh-muted);
}

.page-news .news-feature__meta {
  font-family: var(--fh-font-mono);
  font-size: var(--fh-note);
  letter-spacing: .03em;
  color: var(--fh-cyan) !important;
}

/* ---------- 分类看板 ---------- */
.page-news .news-board {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(2rem, 5vw, 3.25rem);
}

.page-news .news-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .6rem;
}

.page-news .fh-tab {
  padding: .5rem .95rem;
  border: 1px solid var(--fh-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: var(--fh-muted);
  font-family: var(--fh-font-mono);
  font-size: .8rem;
  letter-spacing: .04em;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.page-news .fh-tab:hover,
.page-news .fh-tab:focus-visible {
  border-color: var(--fh-line-strong);
  color: var(--fh-ink);
}

.page-news .fh-tab[aria-selected="true"] {
  border-color: var(--fh-orange);
  background: linear-gradient(120deg, rgba(255, 77, 26, .3), rgba(255, 77, 26, .07));
  color: var(--fh-ink);
}

/* ---------- 条目 ---------- */
.page-news .news-item {
  position: relative;
  padding: 1.05rem 0 1.05rem 1.1rem;
  border-top: 1px solid var(--fh-line);
}

.page-news .news-item:first-child {
  padding-top: .45rem;
  border-top: 0;
}

.page-news .news-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.2rem;
  bottom: 1.2rem;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--fh-orange), var(--fh-red));
}

.page-news .news-item:first-child::before {
  top: .6rem;
}

.page-news .news-item:nth-child(2n)::before {
  background: linear-gradient(180deg, var(--fh-blue), var(--fh-cyan));
}

.page-news .news-item__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.page-news .news-item__trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .85rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.page-news .news-item__text {
  font-family: var(--fh-font-display);
  font-size: clamp(1.02rem, 1.5vw, 1.24rem);
  font-weight: 700;
  line-height: 1.42;
  color: var(--fh-ink);
  transition: color .2s ease;
}

.page-news .news-item__trigger:hover .news-item__text,
.page-news .news-item__trigger:focus-visible .news-item__text {
  color: var(--fh-orange);
}

.page-news .fh-panel__icon {
  position: relative;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin-top: .15rem;
  border: 1px solid var(--fh-line-strong);
  border-radius: 50%;
  transition: transform .25s ease, border-color .25s ease;
}

.page-news .fh-panel__icon::before,
.page-news .fh-panel__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 2px;
  background: var(--fh-cyan);
  transform: translate(-50%, -50%);
}

.page-news .fh-panel__icon::before {
  width: 11px;
  height: 1.5px;
}

.page-news .fh-panel__icon::after {
  width: 1.5px;
  height: 11px;
}

.page-news .fh-panel__trigger[aria-expanded="true"] .fh-panel__icon {
  transform: rotate(135deg);
  border-color: var(--fh-orange);
}

.page-news .fh-panel__trigger[aria-expanded="true"] .fh-panel__icon::before,
.page-news .fh-panel__trigger[aria-expanded="true"] .fh-panel__icon::after {
  background: var(--fh-orange);
}

.page-news .fh-panel__body {
  padding: .75rem 0 0;
}

.page-news .fh-panel__body p {
  margin: 0 0 .55rem;
  max-width: 46rem;
  font-size: var(--fh-body);
  line-height: 1.74;
  color: var(--fh-muted);
}

.page-news .news-item__meta {
  font-family: var(--fh-font-mono);
  font-size: var(--fh-note);
  letter-spacing: .03em;
  color: var(--fh-sand) !important;
}

/* ---------- 预测区块 ---------- */
.page-news .predict-section {
  position: relative;
}

.page-news .predict-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
  margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
}

.page-news .predict-stat {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .85rem .9rem;
  border: 1px solid var(--fh-line);
  border-radius: var(--fh-radius-sm);
  background: linear-gradient(160deg, rgba(30, 144, 255, .14), rgba(255, 255, 255, .03));
}

.page-news .predict-stat--hot {
  border-color: rgba(255, 77, 26, .5);
  background: linear-gradient(160deg, rgba(255, 77, 26, .24), rgba(255, 255, 255, .03));
}

.page-news .predict-stat__value {
  font-family: var(--fh-font-mono);
  font-size: clamp(1.85rem, 4.5vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--fh-ink);
}

.page-news .predict-stat__unit {
  font-family: var(--fh-font-mono);
  font-size: .8rem;
  letter-spacing: .05em;
  color: var(--fh-cyan);
}

.page-news .predict-stat--hot .predict-stat__unit {
  color: var(--fh-lime);
}

.page-news .predict-stat__label {
  font-size: var(--fh-note);
  line-height: 1.5;
  color: var(--fh-muted);
}

.page-news .predict-layout {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.25rem);
}

.page-news .predict-copy h3 {
  margin: 0 0 .5rem;
  font-family: var(--fh-font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 700;
  color: var(--fh-ink);
}

.page-news .predict-copy h3 + p {
  margin: 0 0 1.25rem;
  font-size: var(--fh-body);
  line-height: 1.74;
  color: var(--fh-muted);
}

.page-news .predict-dimensions {
  display: grid;
  gap: .55rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.page-news .predict-dimensions li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .7rem;
  align-items: center;
  padding: .6rem .8rem;
  border-radius: var(--fh-radius-sm);
  background: rgba(255, 255, 255, .04);
  font-size: var(--fh-body);
  line-height: 1.6;
  color: var(--fh-muted);
}

.page-news .predict-dimensions li span {
  font-family: var(--fh-font-mono);
  font-size: .82rem;
  font-weight: 700;
  color: var(--fh-blue);
}

.page-news .predict-figure,
.page-news .version-figure,
.page-news .scene-media {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--fh-line);
  border-radius: var(--fh-radius);
  background: linear-gradient(140deg, rgba(30, 144, 255, .16), rgba(7, 6, 15, .85));
}

.page-news .predict-figure img,
.page-news .version-figure img,
.page-news .scene-media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

.page-news .predict-figure figcaption,
.page-news .version-figure figcaption {
  padding: .7rem .9rem .85rem;
  font-size: var(--fh-note);
  line-height: 1.6;
  color: var(--fh-muted-soft);
}

/* ---------- 版本日志 ---------- */
.page-news .version-layout {
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
}

.page-news .fh-timeline {
  position: relative;
  margin-top: 1.5rem;
  padding-left: 1.75rem;
}

.page-news .fh-timeline::before {
  content: "";
  position: absolute;
  left: .5rem;
  top: .5rem;
  bottom: .5rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--fh-blue), var(--fh-orange), var(--fh-lime));
}

.page-news .fh-timeline__item {
  position: relative;
  padding: .55rem 0 1.15rem;
}

.page-news .fh-timeline__item::before {
  content: "";
  position: absolute;
  left: calc(-1.25rem - 5px);
  top: 1rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fh-lime);
  box-shadow: 0 0 0 3px rgba(200, 255, 61, .16);
}

.page-news .fh-timeline__mark {
  display: inline-block;
  margin-bottom: .4rem;
  padding: .18rem .55rem;
  border: 1px solid rgba(30, 144, 255, .45);
  border-radius: 999px;
  font-family: var(--fh-font-mono);
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--fh-cyan);
}

.page-news .fh-timeline__item h3 {
  margin: 0 0 .4rem;
  font-family: var(--fh-font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--fh-ink);
}

.page-news .fh-timeline__item p {
  margin: 0;
  font-size: var(--fh-body);
  line-height: 1.74;
  color: var(--fh-muted);
}

/* ---------- 数据专题 ---------- */
.page-news .report-list {
  display: grid;
  gap: 0;
}

.page-news .report-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 1.25rem 0;
  border-top: 1px solid var(--fh-line);
}

.page-news .report-item:first-child {
  padding-top: 0;
  border-top: 0;
}

.page-news .report-item__no {
  font-family: var(--fh-font-mono);
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 77, 26, .45);
  -webkit-text-stroke: 1px rgba(255, 77, 26, .85);
}

.page-news .report-item h3 {
  margin: 0 0 .45rem;
  font-family: var(--fh-font-display);
  font-size: clamp(1.08rem, 1.9vw, 1.42rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--fh-ink);
}

.page-news .report-item p {
  margin: 0;
  max-width: 52rem;
  font-size: var(--fh-body);
  line-height: 1.76;
  color: var(--fh-muted);
}

/* ---------- 社区现场 ---------- */
.page-news .scene-layout {
  display: grid;
  gap: clamp(1.35rem, 3.5vw, 2.25rem);
  align-items: center;
}

.page-news .scene-media {
  border-radius: var(--fh-radius) var(--fh-radius) 0 var(--fh-radius);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
}

.page-news .scene-list {
  display: grid;
  gap: .9rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.page-news .scene-list li {
  padding-left: .95rem;
  border-left: 3px solid var(--fh-magenta);
}

.page-news .scene-list li:nth-child(2) {
  border-left-color: var(--fh-orange);
}

.page-news .scene-list li:nth-child(3) {
  border-left-color: var(--fh-lime);
}

.page-news .scene-list h3 {
  margin: 0 0 .3rem;
  font-family: var(--fh-font-display);
  font-size: clamp(1rem, 1.6vw, 1.22rem);
  font-weight: 700;
  color: var(--fh-ink);
}

.page-news .scene-list p {
  margin: 0;
  font-size: var(--fh-body);
  line-height: 1.72;
  color: var(--fh-muted);
}

/* ---------- 信息获取 ---------- */
.page-news .get-grid {
  display: grid;
  gap: .85rem;
}

.page-news .get-card {
  position: relative;
  display: block;
  padding: 1.15rem 1rem 1.15rem 1.15rem;
  border: 1px solid var(--fh-line);
  border-radius: var(--fh-radius-sm);
  background: linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(18, 11, 46, .55));
  text-decoration: none;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.page-news .get-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15rem;
  bottom: 1.15rem;
  width: 3px;
  border-radius: 2px;
  background: var(--fh-blue);
  transition: background .22s ease;
}

.page-news .get-card:hover,
.page-news .get-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--fh-orange);
  background: linear-gradient(160deg, rgba(255, 77, 26, .16), rgba(18, 11, 46, .6));
}

.page-news .get-card:hover::after,
.page-news .get-card:focus-visible::after {
  background: var(--fh-lime);
}

.page-news .get-card__no {
  display: block;
  margin-bottom: .5rem;
  font-family: var(--fh-font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--fh-cyan);
}

.page-news .get-card h3 {
  margin: 0 0 .4rem;
  font-family: var(--fh-font-display);
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.38;
  color: var(--fh-ink);
}

.page-news .get-card p {
  margin: 0;
  font-size: var(--fh-note);
  line-height: 1.68;
  color: var(--fh-muted);
}

/* ---------- 断点 ---------- */
@media (min-width: 640px) {
  .page-news .predict-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-news .get-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 720px) {
  .page-news .news-feature__body h3 {
    max-width: 30rem;
  }

  .page-news .news-item:nth-child(odd) {
    padding-right: clamp(0rem, 4vw, 3.5rem);
  }

  .page-news .news-item:nth-child(even) {
    margin-left: clamp(1rem, 5vw, 3.75rem);
  }

  .page-news .report-item:nth-child(2n) {
    margin-left: clamp(1rem, 5vw, 4rem);
  }
}

@media (min-width: 860px) {
  .page-news .news-feature {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    align-items: center;
  }
}

@media (min-width: 900px) {
  .page-news .news-masthead__inner {
    grid-template-columns: minmax(0, 1.6fr) minmax(240px, .78fr);
  }

  .page-news .predict-layout {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    align-items: start;
  }

  .page-news .version-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: start;
  }

  .page-news .scene-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
  }
}

@media (min-width: 940px) {
  .page-news .news-board {
    grid-template-columns: minmax(170px, 210px) minmax(0, 1fr);
    align-items: start;
  }

  .page-news .news-filters {
    position: sticky;
    top: 7rem;
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .page-news .fh-tab {
    border-radius: var(--fh-radius-sm);
  }
}

@media (min-width: 1000px) {
  .page-news .get-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .page-news .news-feature__body h3 {
    font-size: 1.3rem;
  }

  .page-news .report-item {
    grid-template-columns: minmax(0, 1fr);
    gap: .5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .news-masthead::after {
    animation: none;
  }

  .page-news .get-card,
  .page-news .fh-tab,
  .page-news .news-item__text {
    transition: none;
  }
}