.page-home {
  --page-maxw: 1200px;
  --page-pad: clamp(1.25rem, 4vw, 2.5rem);
  --display-font: "DIN Condensed", "Oswald", "Arial Narrow", sans-serif;
  --body-font: "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --primary-lake: #1B6CA8;
  --lake-deep: #0B3A5C;
  --sunset-orange: #F28705;
  --snow-white: #F8F9FA;
  --grass-green: #7CB342;
  --cloud-gray: #E3E9EF;
  --ink-blue: #172B3A;
  --ink-soft: #4A6578;
  --line-ice: #C5D3E0;
  background: linear-gradient(180deg, #EAF2F8 0%, var(--snow-white) 30%);
  font-family: var(--body-font);
  color: var(--ink-blue);
  overflow-x: clip;
}
.page-home .container {
  max-width: var(--page-maxw);
  margin: 0 auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}
.page-home .home-hero {
  position: relative;
  background: linear-gradient(158deg, var(--lake-deep) 0%, var(--primary-lake) 58%, #2D82B8 88%, rgba(248, 249, 250, 0) 108%);
  color: #fff;
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(4rem, 9vw, 7rem);
  overflow: hidden;
}
.page-home .home-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 9rem;
  background: linear-gradient(180deg, rgba(248, 249, 250, 0) 0%, rgba(248, 249, 250, 0.94) 100%);
  pointer-events: none;
}
.page-home .home-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.page-home .home-hero-copy {
  grid-column: 1;
}
.page-home .home-hero-kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #D7E6F2;
}
.page-home .home-hero-kicker-sep {
  color: var(--sunset-orange);
  font-weight: 700;
}
.page-home .version-stamp {
  border: 1px solid rgba(255, 255, 255, 0.52);
  padding: 0.28rem 0.6rem;
  border-radius: 0;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: #fff;
  text-transform: uppercase;
}
.page-home .home-hero-title {
  font-family: var(--display-font);
  font-weight: 700;
  font-size: clamp(2.8rem, 8.5vw, 5.2rem);
  line-height: 0.96;
  letter-spacing: 0.02em;
  margin: 0 0 1.4rem;
  text-wrap: balance;
}
.page-home .home-hero-lead {
  max-width: 34em;
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.85;
  color: #EDF4FA;
  text-wrap: pretty;
}
.page-home .home-hero-media {
  grid-column: 1;
  position: relative;
}
.page-home .home-hero-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 26rem;
  object-fit: cover;
  object-position: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: var(--primary-lake);
  box-shadow: 0 2.2rem 3rem rgba(4, 32, 54, 0.25);
}
.page-home .home-chapters {
  grid-column: 1;
  margin-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.42);
}
.page-home .home-chapters-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 2rem 0 1.4rem;
}
.page-home .home-chapters-heading {
  font-family: var(--display-font);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  letter-spacing: 0.04em;
  margin: 0;
  color: #fff;
}
.page-home .home-chapters-note {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: #D4E3F0;
}
.page-home .home-chapters-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
.page-home .home-chapters-item {
  border: 0;
}
.page-home .home-chapters-link {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 1rem;
  padding: 1.1rem 0.5rem;
  color: #fff;
  text-decoration: none;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  transition: background var(--ease), padding-left var(--ease);
}
.page-home .home-chapters-link:hover,
.page-home .home-chapters-link:focus-visible {
  background: rgba(255, 255, 255, 0.09);
  padding-left: 1rem;
  outline: none;
}
.page-home .home-chapters-num {
  grid-row: 1 / 3;
  font-family: var(--display-font);
  font-weight: 700;
  font-size: clamp(3rem, 9vw, 5.2rem);
  line-height: 0.85;
  color: rgba(255, 255, 255, 0.24);
  transition: color var(--ease);
  min-width: 1.1em;
}
.page-home .home-chapters-link:hover .home-chapters-num,
.page-home .home-chapters-link:focus-visible .home-chapters-num {
  color: var(--sunset-orange);
}
.page-home .home-chapters-label {
  font-family: var(--display-font);
  font-weight: 600;
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  letter-spacing: 0.03em;
  line-height: 1.2;
}
.page-home .home-chapters-sub {
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: #CDE0EF;
}

/* ========= / 01 实时数据面板 ========= */
.page-home .home-section {
  padding-top: clamp(3rem, 7vw, 5.5rem);
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
  scroll-margin-top: 9rem;
}
.page-home .home-section-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: clamp(1.6rem, 4vw, 2.6rem);
  border-bottom: 1px solid var(--line-ice);
  padding-bottom: 1.2rem;
}
.page-home .home-section-index {
  font-family: var(--display-font);
  font-weight: 700;
  font-size: clamp(3.2rem, 7vw, 5.4rem);
  line-height: 0.9;
  color: var(--cloud-gray);
  letter-spacing: 0.02em;
  margin-top: -0.12em;
  flex: none;
}
.page-home .home-section-heading-block {
  flex: 1;
  min-width: 0;
}
.page-home .home-section-title {
  font-family: var(--display-font);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  line-height: 1.02;
  margin: 0 0 0.3rem;
  letter-spacing: 0.03em;
}
.page-home .home-section-desc {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 40em;
}
.page-home .home-section-link {
  display: inline-block;
  flex: none;
  margin-top: 0.25rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--primary-lake);
  text-decoration: none;
  border-bottom: 1px solid var(--primary-lake);
  padding-bottom: 2px;
  white-space: nowrap;
  transition: color var(--ease), border-color var(--ease);
}
.page-home .home-section-link:hover,
.page-home .home-section-link:focus-visible {
  color: var(--sunset-orange);
  border-color: var(--sunset-orange);
}
.page-home .home-data-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.page-home .home-data-tabs {
  background: var(--snow-white);
  border: 1px solid var(--line-ice);
  box-shadow: 0 1.2rem 2.4rem rgba(11, 58, 92, 0.06);
}
.page-home .home-tab-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.page-home .home-tab-head {
  display: flex;
  width: 100%;
  border-bottom: 1px solid var(--line-ice);
}
.page-home .home-tab-btn {
  display: block;
  flex: 1;
  padding: 1rem 1.2rem;
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--ink-soft);
  border-right: 1px solid var(--line-ice);
  transition: color var(--ease), background var(--ease);
}
.page-home .home-tab-btn:last-child {
  border-right: none;
}
.page-home #home-tab-standings:checked ~ .home-tab-head label[for="home-tab-standings"],
.page-home #home-tab-injuries:checked ~ .home-tab-head label[for="home-tab-injuries"] {
  color: var(--primary-lake);
  background: #fff;
  box-shadow: inset 0 -3px 0 var(--primary-lake);
}
.page-home .home-tab-pane {
  display: none;
}
.page-home #home-tab-standings:checked ~ .home-tab-pane#home-pane-standings,
.page-home #home-tab-injuries:checked ~ .home-tab-pane#home-pane-injuries {
  display: block;
}
.page-home .home-pane-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: clamp(1.25rem, 3.5vw, 2.2rem);
}
.page-home .home-pane-copy {
  min-width: 0;
}
.page-home .home-pane-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.page-home .home-pane-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--line-ice);
  padding: 0.35rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: #fff;
  color: var(--ink-blue);
}
.page-home .home-pane-badge-live {
  border-color: transparent;
  background: rgba(124, 179, 66, 0.14);
  color: #4E7A23;
}
.page-home .home-pane-text {
  margin: 0 0 1.4rem;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink-blue);
  max-width: 44em;
}
.page-home .home-pane-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
}
.page-home .home-pane-stat {
  padding: 1rem 0.6rem;
  border-top: 2px solid var(--primary-lake);
  background: rgba(27, 108, 168, 0.05);
}
.page-home .home-pane-stat-num {
  display: block;
  font-family: var(--display-font);
  font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1;
  color: var(--primary-lake);
}
.page-home .home-pane-stat-label {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
.page-home .home-pane-media {
  display: block;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line-ice);
  background: var(--cloud-gray);
}
.page-home .home-pane-media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 17rem;
  object-fit: cover;
  object-position: center;
}
.page-home .home-data-tip {
  margin: 1rem 0 0;
  padding: 0.9rem 1rem 0.9rem 0.75rem;
  background: rgba(242, 135, 5, 0.1);
  border-left: 4px solid var(--sunset-orange);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--ink-blue);
}
.page-home .home-data-tip-mark {
  font-weight: 700;
  color: var(--sunset-orange);
}
.page-home .home-data-chart {
  background: var(--lake-deep);
  color: #fff;
  padding: clamp(1.4rem, 3.5vw, 2.2rem);
  border: 0;
}
.page-home .home-chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
}
.page-home .home-chart-title {
  font-family: var(--display-font);
  font-weight: 700;
  font-size: 1.6rem;
  margin: 0;
  letter-spacing: 0.03em;
}
.page-home .home-chart-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: #BFD9EA;
}
.page-home .live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grass-green);
  animation: home-pulse 2s ease-in-out infinite;
}
@keyframes home-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.52;
    transform: scale(1.18);
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-home .live-dot {
    animation: none;
  }
  .page-home *,
  .page-home *::before,
  .page-home *::after {
    transition-duration: 0.01ms !important;
  }
}
.page-home .home-chart-svg {
  width: 100%;
  height: auto;
  display: block;
  font-family: var(--display-font);
}
.page-home .home-chart-svg text {
  font-family: var(--display-font);
  font-weight: 600;
  font-size: 12px;
  fill: #C1D8E8;
}
.page-home .home-chart-row rect {
  transition: opacity var(--ease);
}
.page-home .home-chart-row:hover rect {
  opacity: 0.82;
}
.page-home .home-data-chart .home-chart-tip {
  margin: 1.2rem 0 0;
  font-size: 0.84rem;
  line-height: 1.7;
  color: #BFD9EA;
}

/* ========= 02 更新日志 ========= */
.page-home .home-update-log {
  background: var(--snow-white);
  border-top: 1px solid var(--line-ice);
  border-bottom: 1px solid var(--line-ice);
}
.page-home .home-log-list {
  display: flex;
  flex-direction: column;
}
.page-home .home-log-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1.6rem 0 1.2rem;
  border-bottom: 1px solid var(--line-ice);
}
.page-home .home-log-item:first-child {
  padding-top: 0;
}
.page-home .home-log-index {
  font-family: var(--display-font);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 0.95;
  color: var(--primary-lake);
  letter-spacing: 0.04em;
}
.page-home .home-log-body {
  min-width: 0;
}
.page-home .home-log-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}
.page-home .home-log-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.55rem;
  background: var(--cloud-gray);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.page-home .home-log-tag-green {
  background: rgba(124, 179, 66, 0.16);
  color: #4E7A23;
}
.page-home .home-log-tag-orange {
  background: rgba(242, 135, 5, 0.14);
  color: #A86004;
}
.page-home .home-log-title {
  font-family: var(--display-font);
  font-weight: 700;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  margin: 0 0 0.4rem;
  line-height: 1.25;
  letter-spacing: 0.03em;
}
.page-home .home-log-text {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.8;
  color: var(--ink-soft);
  max-width: 52em;
}
.page-home .home-log-link {
  display: inline-block;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--primary-lake);
  text-decoration: none;
  border-bottom: 1px solid var(--primary-lake);
  padding-bottom: 2px;
  justify-self: start;
  transition: color var(--ease), border-color var(--ease);
}
.page-home .home-log-link:hover,
.page-home .home-log-link:focus-visible {
  color: var(--sunset-orange);
  border-color: var(--sunset-orange);
}

/* ========= 03 故障排查速查 ========= */
.page-home .home-trouble-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.page-home .home-trouble-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--line-ice);
  box-shadow: 0 0.5rem 1.2rem rgba(11, 58, 92, 0.04);
  transition: transform var(--ease), box-shadow var(--ease);
}
.page-home .home-trouble-card:hover,
.page-home .home-trouble-card:focus-within {
  transform: translateY(-5px);
  box-shadow: 0 1rem 1.8rem rgba(11, 58, 92, 0.08);
}
.page-home .home-trouble-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}
.page-home .home-trouble-num {
  font-family: var(--display-font);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--line-ice);
}
.page-home .home-trouble-state {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.28rem 0.6rem;
}
.page-home .home-trouble-state-warn {
  background: rgba(242, 135, 5, 0.14);
  color: #A86004;
}
.page-home .home-trouble-state-info {
  background: rgba(27, 108, 168, 0.12);
  color: var(--primary-lake);
}
.page-home .home-trouble-state-ok {
  background: rgba(124, 179, 66, 0.16);
  color: #4E7A23;
}
.page-home .home-trouble-title {
  font-family: var(--display-font);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.5vw, 1.6rem);
  margin: 0;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.page-home .home-trouble-text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--ink-soft);
  flex: 1 1 auto;
}
.page-home .home-trouble-link {
  align-self: flex-start;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--primary-lake);
  text-decoration: none;
  border-bottom: 1px solid var(--primary-lake);
  padding-bottom: 2px;
  transition: color var(--ease), border-color var(--ease);
}
.page-home .home-trouble-link:hover,
.page-home .home-trouble-link:focus-visible {
  color: var(--sunset-orange);
  border-color: var(--sunset-orange);
}
.page-home .home-trouble-note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding: 1rem 1.2rem;
  background: var(--cloud-gray);
  border-left: 4px solid var(--primary-lake);
}
.page-home .home-trouble-note-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0;
  background: var(--primary-lake);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
}
.page-home .home-trouble-note-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--ink-blue);
}

/* ========= 04 链接变更反馈 ========= */
.page-home .home-feedback {
  background: linear-gradient(120deg, var(--lake-deep) 0%, var(--primary-lake) 62%, rgba(242, 135, 5, 0.24) 150%);
  color: #fff;
  border-bottom: 1px solid var(--lake-deep);
}
.page-home .home-feedback-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.2rem;
}
.page-home .home-feedback-copy {
  max-width: 56em;
}
.page-home .home-section-head-invert {
  border-color: rgba(255, 255, 255, 0.24);
}
.page-home .home-feedback .home-section-index {
  color: rgba(255, 255, 255, 0.28);
}
.page-home .home-feedback .home-section-desc {
  color: #D9E8F2;
}
.page-home .home-feedback-steps {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.page-home .home-feedback-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: flex-start;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.page-home .home-feedback-step:last-child {
  border-bottom: none;
}
.page-home .home-feedback-step-num {
  font-family: var(--display-font);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  line-height: 0.9;
  color: var(--sunset-orange);
}
.page-home .home-feedback-step-body {
  padding-top: 0.1rem;
}
.page-home .home-feedback-step-title {
  font-family: var(--display-font);
  font-weight: 600;
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  margin: 0 0 0.3rem;
  line-height: 1.2;
  letter-spacing: 0.03em;
}
.page-home .home-feedback-step-text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.8;
  color: #D7E5F0;
}
.page-home .home-feedback-cta {
  display: inline-block;
  background: var(--sunset-orange);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 0.85rem 1.7rem;
  border: 1px solid var(--sunset-orange);
  transition: background var(--ease), transform var(--ease);
}
.page-home .home-feedback-cta:hover,
.page-home .home-feedback-cta:focus-visible {
  background: #C96E00;
  transform: translateY(-3px);
}
.page-home .home-feedback-media {
  position: relative;
  align-self: end;
}
.page-home .home-feedback-media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 26rem;
  object-fit: cover;
  object-position: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.page-home .home-feedback-media-card {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(11, 58, 92, 0.88);
  color: #fff;
  font-size: 0.82rem;
  backdrop-filter: blur(4px);
}
.page-home .home-feedback-media-card-label {
  letter-spacing: 0.08em;
  color: #BFD9EA;
}
.page-home .home-feedback-media-card-value {
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* ========= 响应式：平板及以上 ========= */
@media (min-width: 600px) {
  .page-home .home-chapters-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 1.25rem;
  }
  .page-home .home-chapters-item:nth-child(even) .home-chapters-link {
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    padding-left: 1.25rem;
    padding-right: 0.5rem;
  }
  .page-home .home-pane-body {
    grid-template-columns: 1fr 0.9fr;
    align-items: stretch;
  }
  .page-home .home-pane-copy {
    order: 1;
  }
  .page-home .home-pane-media {
    order: 2;
  }
  .page-home .home-pane-media img {
    height: 100%;
    max-height: none;
  }
  .page-home .home-log-item {
    grid-template-columns: 7rem 1fr auto;
    align-items: center;
    gap: 1.2rem;
  }
  .page-home .home-log-link {
    grid-column: 2 / 3;
  }
  .page-home .home-trouble-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
  }
}
@media (min-width: 920px) {
  .page-home .home-hero-inner {
    grid-template-columns: minmax(0, 6.5fr) minmax(0, 5.5fr);
    gap: 2.5rem;
  }
  .page-home .home-hero-copy {
    grid-column: 1;
    align-self: start;
    padding-top: 0.6rem;
  }
  .page-home .home-hero-media {
    grid-column: 2;
    margin-top: 1.2rem;
    justify-self: end;
    width: 100%;
    max-width: 30rem;
  }
  .page-home .home-hero-img {
    max-height: 22rem;
  }
  .page-home .home-chapters {
    grid-column: 1 / -1;
    margin-top: 2.4rem;
    padding-top: 0.5rem;
  }
  .page-home .home-chapters-list {
    grid-template-columns: repeat(4, 1fr);
    gap: 0 1.5rem;
  }
  .page-home .home-chapters-item:nth-child(even) .home-chapters-link {
    border-left: none;
    padding-left: 0.5rem;
  }
  .page-home .home-chapters-item + .home-chapters-item .home-chapters-link {
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    padding-left: 1.2rem;
  }
  .page-home .home-chapters-item:first-child .home-chapters-link {
    border-left: none;
    padding-left: 0.5rem;
  }
  .page-home .home-data-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: stretch;
    gap: 1.5rem;
  }
  .page-home .home-data-tabs,
  .page-home .home-data-chart {
    align-self: stretch;
  }
  .page-home .home-feedback-inner {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: end;
    gap: 2.5rem;
  }
}
@media (min-width: 1100px) {
  .page-home .home-chapters-num {
    font-size: clamp(4rem, 11vw, 7.2rem);
  }
  .page-home .home-chapters-label {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-home .home-trouble-card {
    transition: none;
    transform: none !important;
  }
  .page-home .home-chapters-link {
    transition: none;
  }
  .page-home .home-feedback-cta {
    transition: none;
  }
}
</main>TEXT: 用户要求为"小鸟体育"网站创建一个首页，包含章节预览、实时数据面板、更新日志、故障排查速查和链接变更反馈等部分。我需要用HTML和CSS构建这个页面，遵循给定的设计规范和内容要求。

让我先分析一下需求：
1. 页面是首页，slug是home
2. 需要包含5个主要部分：章节预览、实时数据面板、更新日志、故障排查速查、链接变更反馈
3. 使用青海湖蓝、落日橙、雪山白、赛场草绿等颜色
4. 标题用DIN Condensed字体，正文用思源黑体
5. 需要有图片占位符，使用{zhanqunpic:h:高度w:宽度}格式
6. 设计要体现极简文字建筑、非对称布局、数据卡片悬浮等风格

让我创建这个首页的HTML和CSS。由于这是首页，我需要确保它包含导航、hero区域和各个章节。

我注意到用户说"不要Markdown和解释"，所以我将直接输出HTML和CSS。

让我重新审视一下要求：
- main_html从<main id="main-content" class="page-home">开始，到</main>结束
- page_css只包含当前页面专属CSS，限定在.page-home作用域内

我需要使用CSS Grid和flexbox来构建布局，使用渐变背景，以及图片占位符。

让我开始构建这个页面。首页需要包含：
1. Hero区域 - 章节预览，包含大标题和导航章节
2. 实时数据面板 - 积分榜/伤停栏标签切换
3. 更新日志 - 第28轮数据等
4. 故障排查速查 - 三个问题的快速入口
5. 链接变更反馈 - 导航三级菜单指引

我需要自然地融入关键词：
- 小鸟体育会员权益登录异常
- 焕新版导航问题排查
- 平板球员数据浏览失效
- 官网首页链接变更反馈

同时图片占位符使用{zhanqunpic:h:高度w:宽度}格式，例如{zhanqunpic:h:600w:1200}表示高600宽1200。

我注意到在图片过程中，首屏主图要使用fetchpriority="high"或eager，其他可以用loading="lazy"。

让我按照要求构建页面，注意不要违反任何规则。

根据要求13：不要用Markdown代码围栏，不要输出标记以外的说明。所以我要直接输出。

实际上，在我最终输出之前，让我再检查一下用户是在问什么。用户用中文说：同时创作主体HTML和页面专属CSS。不要Markdown和解释。然后是一大段共享上下文，最后是当前页面信息。

所以我只需要输出：

<main>...</main>

/* CSS */

让我仔细设计页面。首页使用"青海湖蓝到雪山白的渐变背景"，超大数字展示章节预览。

我将创建一个有吸引力的首页设计，使用：
- 非对称布局
- 大数字标题（01, 02, 03, 04）
- 卡片悬浮效果
- 内联SVG图表
- 状态指示灯
- 12列网格

让我构建这个页面。我会注意：
- 移动端优先
- 至少一个媒体查询
- 色彩节奏
- 页面作用域限定在.page-home

好的，现在我来构建。考虑到这是首页，页面标题是"小鸟体育CN官方网站｜品牌专区V4"，h1应该与标题保持一致。

我将创建以下几个主要部分：
1. Hero区 - 章节预览：展示4个后续内容路径（数据面板/更新日志/故障排查/反馈）
2. 实时数据面板：积分榜和伤停栏的预览卡片
3. 更新日志：红黄牌记录第28轮数据
4. 故障排查速查：三类问题快速入口
5. 链接变更反馈：导航三级菜单指引

在首屏Hero区，我需要放置一张图片（首屏氛围图，青海湖与运动员剪影，1024x768）。

对于图片：
- 首屏氛围图：{zhanqunpic:h:768w:1024}，width=1024 height=768，首屏主图，不用lazy
- 积分榜区域配图：{zhanqunpic:h:480w:640}，width=640 height=480，lazy
- 伤停栏区域配图：{zhanqunpic:h:480w:640}，width=640 height=480，lazy
- 反馈入口示意图：{zhanqunpic:h:600w:800}，width=800 height=600，lazy

让我现在开始编写最终输出。

我需要注意：
- 图片src格式必须是{zhanqunpic:h:高度w:宽度}，先写h和高度，再写w和宽度
- 例如400高800宽：{zhanqunpic:h:400w:800}
- width和height属性要与src中的数字一致

让我再确认一下图片放置：
对于第一张首屏氛围图：h:768w:1024，width=1024 height=768
对于积分榜图：h:480w:640，width=640 height=480
对于伤停栏图：h:480w:640，width=640 height=480
对于反馈示意图：h:600w:800，width=800 height=600

现在我来构建HTML。

我将在hero区域使用大数字01-04作为章节预览。

让我确保所有内部链接都指向合法的真实路由路径：
- /company/
- /platform/
- /insights/
- /faq/
- /reach-us/
- /privacy/
- /instructions/

这些是允许的路径。

页内锚点必须真的存在于main_html中，所以如果我使用href="#xxx"，必须有id="xxx"元素。

让我现在开始写。由于是首页，我应该让它完整呈现，包括所有章节。我会用section来组织。

标题结构：
h1: 小鸟体育CN官方网站｜品牌专区V4 (或分解)
h2: 各个章节标题
h3: 卡片或子标题

注意：不要用Markdown代码围栏，要直接输出标记。但用户要求格式为：

从<main>开始到</main>结束

CSS

所以我的输出应该只有这两个部分。

让我创建实际的HTML和CSS。

关于经验方向："首屏采用极简文字建筑，居中刊头，超大数字展示章节预览，背景为青海湖蓝到雪山白的渐变。滚动时章节以滑入动画逐一出现，低密度大留白，强调标题排版。"

我需要让首屏有大的数字章节预览，配合渐变背景。由于我无法实际实现滚动滑入动画（需要JS），我可以用CSS过渡和动画来模拟一部分，但最主要的还是布局和视觉。

让我设计Hero区：
- 背景渐变：linear-gradient(135deg, #0B3A5C, #1B6CA8)
- 左上角或中间：品牌标识区域
- 中间偏下：超大数字04/01等章节预览
- 右侧：氛围图

考虑到"居中刊头导航，品牌像杂志报头"，hero应该居中。

我设计：hero区域上部是品牌名+版本戳，中部是超大文字"章节预览"或类似，然后是四个章节的数字卡片。

为了体现"非对称布局"，我可以让章节预览的四个卡片不对称分布。

让我简化一下，设计一个清晰的hero：
1. 顶部：版本戳"品牌专区V4" + 状态徽标
2. 中央：超大标题"小鸟体育CN官方网站"（或h1）
3. 下方：四个章节预览链接卡片，超大数字01-04，不对称排列
4. 背景：青海湖蓝渐变到透明，配合氛围图

让我也加入一些元素如"移动端输入框直达积分榜与伤停栏"的提示。

现在开始写实际的代码吧。我要注意代码要简洁有效，不要过度复杂。

让我想一下首页的完整结构：

```
<main class="page-home">
  <!-- Hero + 章节预览 -->
  <section class="home-hero">
    <div class="container">
      <div class="hero-top">
        <span class="version-stamp">品牌专区V4</span>
        <span class="live-badge"><span class="live-dot"></span>实时更新</span>
      </div>
      <h1>小鸟体育CN官方网站</h1>
      <p class="hero-lead">官网首页重设索引，移动端输入框直达积分榜与伤停栏。红黄牌记录按轮次排列，每场更新至第28轮数据。</p>
      
      <div class="chapter-preview">
        <span class="chapter-label">章节预览</span>
        <div class="chapter-grid">
          <a href="#data-panel" class="chapter-card">01 实时数据面板</a>
          <a href="#update-log" class="chapter-card">02 更新日志</a>
          <a href="#troubleshoot" class="chapter-card">03 故障排查速查</a>
          <a href="#feedback" class="chapter-card">04 链接变更反馈</a>
        </div>
      </div>
      
      <div class="hero-image">
        <img src="{zhanqunpic:h:768w:1024}" ...>
      </div>
    </div>
  </section>

  <!-- 01 实时数据面板 -->
  <section id="data-panel" class="home-section">
    ...
  </section>

  <!-- 02 更新日志 -->
  <section id="update-log" class="home-section">
    ...
  </section>

  <!-- 03 故障排查速查 -->
  <section id="troubleshoot" class="home-section">
    ...
  </section>

  <!-- 04 链接变更反馈 -->
  <section id="feedback" class="home-section">
    ...
  </section>
</main>
```

让我再想想如何把积分榜和伤停栏做成标签切换。由于不能依赖JS，但site_kit有交互协议。实际上，我可以使用CSS+radio来实现tab切换，这是渐进增强的。但要求中说"可访问的标签页或分段切换用于同级内容"。我可以使用role="tablist"等ARIA属性，也可以简单地用两个并排的卡片分别呈现"积分榜"和"伤停栏"作为分段预览，各带链接到/platform/。

考虑到css-only tab需要input和label配合，比较合理。让我用radio input来实现。

但要注意，main_html中不能有form元素？没有明确禁止，但最好避免。让我使用div+radio，radio不需要在form中也可以工作。

实际上，为了可访问性和简洁性，我倾向于直接展示两个数据卡片（积分榜和伤停栏）并排显示，而不是做tab切换。因为首页是"预览卡片"，不需要完全交互。可以在每个卡片中说明"移动端输入框直达积分榜与伤停栏"。

不过用户要求"积分榜/伤停栏标签切换"作为交互机会。让我还是实现tab切换。可以用CSS-only的方式：

```html
<div class="panel-tabs">
  <input type="radio" id="tab-standings" name="data-tab" checked>
  <input type="radio" id="tab-injuries" name="data-tab">
  <div class="tab-labels">
    <label for="tab-standings">积分榜</label>
    <label for="tab-injuries">伤停栏</label>
  </div>
  <div class="tab-content">
    <div class="tab-panel standings-panel">...</div>
    <div class="tab-panel injuries-panel">...</div>
  </div>
</div>
```

CSS来控制显示/隐藏。这是渐进增强的，因为默认第一个checked。

好的，让我这么实现。

现在我要写CSS。首页的CSS会比较长，因为要定义所有首页专属的类。

让我认真设计一下CSS变量和整体风格。

字体：--display-font: "DIN Condensed", "Oswald", "Arial Narrow", sans-serif;
标题：clamp(2rem, 6vw, 5rem)
正文：1rem

颜色：
- --primary-lake: #1B6CA8
- --lake-deep: #0B3A5C
- --sunset-orange: #F28705
- --snow-white: #F8F9FA
- --grass-green: #7CB342
- --cloud-gray: #E3E9EF
- --ink-blue: #172B3A
- --ink-soft: #4A6578
- --line-ice: #C5D3E0

让我保持CSS在.page-home作用域内。

最终输出将包含两个标记块：MAIN_HTML和PAGE_CSS。

让我开始正式编写。

关于数据面板中的内联SVG迷你积分榜条形图，我可以画一个简单的条形图表示积分榜前几名，用SVG rect元素。

我需要注意：不要出现任何真实人物姓名、不实数据。所以积分榜用"示例队A"？不，我不应该用真实球队名。我可以展示"联赛覆盖60+"这样的数据，以及一些抽象的条形图代表"球队数量"或"轮次"。

或者我可以展示球队名称如"曼城、利物浦"等真实球队名？但规则说不要出现真实人物，球队不是人物。但我不确定数据准确性。最好避免具体球队名，用通用表述。

让我在积分榜卡片中展示：
- 当前轮次：28
- 已更新红黄牌记录
- 覆盖联赛60+
- 图表：用SVG条表示"积分榜数据覆盖"

在伤停栏卡片中展示：
- 球员总数40万+
- 伤停信息更新
- 平板设备支持

让我编写更具体的内容。

实际上，考虑到这些是真实网站的数据，我可以相信这些事实。让我用这些数据来填充内容。

首页不需要太详细，但要有足够的信息密度和信任层次。

让我写吧。注意格式要求。

关于交互数据属性：要求中说"不要在site_kit.interaction_data_attributes列表外的data-*属性"。所以我可以使用的data属性有：
data-header, data-nav, data-nav-toggle, data-open, data-scroll-progress, data-search-input, data-search-panel, data-year

我在HTML中可以使用这些已实现的属性。但CSS中不应该依赖它们来实现核心功能（因为可能是JS增强）。实际上data-open用于移动导航开合等。

对于tab切换，我不使用data-*，而是用CSS的:checked，这样更稳健。

好的，让我最终编写。

让我再想想图片位置：
1. 首屏氛围图 - 在hero右侧或背景中，1024x768
2. 积分榜区域配图 - 数据面板下方，640x480
3. 伤停栏区域配图 - 伤停栏卡片旁，640x480
4. 反馈入口示意图 - 反馈区，800x600

由于首屏主图不lazy，其他的加loading="lazy"。

hero中的图我可以放在hero背景层，用position absolute+半透明遮罩。但为了简单，我可以把它放在hero右侧作为一个显著的图框。

实际上，考虑到"极简文字建筑"和"低密度大留白"，hero应该以文字为主，图像可以放在旁边或作为背景。

让我设计：hero是一个大区块，左边是文字（标题+导语），右边是一个方形的图框（青海湖氛围图）。这样既展示图片又保持文字主导。

在章节预览中，04个大数字卡片横向排列（桌面端），移动端纵向。

好，我正式开始写。

我需要确保图片格式正确：src="{zhanqunpic:h:768w:1024}" width="1024" height="768"。

让我用div包裹图片，加class来控制样式。

对于图表SVG，我可以在积分榜面板中放一个SVG条形图：
```svg
<svg viewBox="0 0 300 120" role="img" aria-label="积分榜数据覆盖图表">
  <rect x="0" y="30" width="200" height="16" fill="#1B6CA8"/>
  <rect x="0" y="56" width="160" height="16" fill="#1B6CA8" opacity="0.7"/>
  <rect x="0" y="82" width="120" height="16" fill="#1B6CA8" opacity="0.5"/>
</svg>
```

这可以表示"覆盖联赛60+的积分榜数据规模"。

好的，让我写完整。

由于最终输出必须只有两个区域，让我确保没有多余说明。

让我把h1设为"小鸟体育CN官方网站"，配合一个副标题或版本戳。

标题：小鸟体育CN官方网站（h1）
版本：品牌专区V4（span version-stamp）

body中的主要文案要自然包含关键词组：
- "会员权益登录异常可通过站内提示路径快速排查" → 故障排查章节
- "焕新版导航问题排查指南已更新至官网帮助中心" → 故障排查或更新日志
- "平板球员数据浏览失效问题已解决，刷新后恢复响应" → 更新日志或故障排查
- "官网首页链接变更反馈入口收进导航三级菜单" → 链接变更反馈章节

很好。

现在让我编排出完整的HTML。我会让每个章节都有合适的结构和内容。

让我注意h2的使用：每个主章节标题用h2，子项目用h3。

面包屑或页面上下文提示：首页的话，我可以在hero中放一个context线，如"首页 / 品牌专区V4"或"官方首页索引"。

由于这是首页，面包屑可以是"首页"或省略。但要求中说"包含自然的面包屑或页面上下文提示"，我可以在hero顶部加一行"官方首页索引 · 品牌专区V4"。

好的开始写了。

我发现自己需要非常注意CSS的准确性。让我规划一下CSS结构：

```css
.page-home {
  /* base styles */
}
.page-home .home-hero { ... }
.page-home .hero-container { ... }
.page-home .hero-topbar { ... }
.page-home .hero-title { ... }
.page-home .hero-lead { ... }
.page-home .hero-media { ... }
.page-home .chapter-preview { ... }
.page-home .chapter-grid { ... }
.page-home .chapter-card { ... }
.page-home .chapter-num { ... }
.page-home .chapter-name { ... }
.page-home .section { ... }
.page-home .section-head { ... }
.page-home .section-index { ... }
.page-home .section-title { ... }
.page-home .section-lead { ... }
.page-home .data-panel { ... }
.page-home .tab-list { ... }
.page-home .tab-btn { ... }
.page-home .tab-panel { ... }
... etc
```

让我注意，page_css中所有选择器必须以.page-home开头（或在其作用域内）。这很重要。

我现在会创建完整的页面。

考虑到移动端优先，我先设计移动端样式再在媒体查询中增强。

此外，"确保窄屏不横向溢出"——我需要小心overflow-x和网格。

让我也加入一些细线、直角边框的元素来体现"精密网格"和"锐利直角"风格。

由于数据具体性要求：我可以使用：
- 覆盖全球60+主要足球联赛及杯赛
- 球员数据库包含超过40万名职业球员档案
- 实时数据更新延迟不超过30秒
- 每赛季处理超过15万场比赛事件
- 注册用户超200万，日均数据请求超过800万次
- 红黄牌记录更新至第28轮
- 7×10小时在线支持

这些数据在allowed_facts和验证事实中。

好的，开始。让我用简洁但完整的代码来构建。

在实际编写之前，让我规划好页面的完整内容结构：

```html
<main class="page-home">
  <!-- HERO + 章节预览 -->
  <section class="home-hero">
    <div class="container hero-inner">
      <div class="hero-top">
        <span class="context-link">首页 / 官方网站</span>
        <span class="version-stamp">品牌专区V4</span>
      </div>
      <div class="hero-main">
        <div class="hero-copy">
          <h1>小鸟体育CN官方网站</h1>
          <p class="hero-lead">官网首页重设索引，移动端输入框直达积分榜与伤停栏。红黄牌记录按轮次排列，每场更新至第28轮数据。</p>
          <div class="hero-status">
            <span class="live-dot"></span>数据实时更新中
          </div>
        </div>
        <figure class="hero-media">
          <img src="{zhanqunpic:h:768w:1024}" width="1024" height="768" alt="青海湖与运动员剪影广角构图" fetchpriority="high">
        </figure>
      </div>
      <nav class="chapter-preview" aria-label="章节预览">
        <span class="chapter-preview-label">本章预览</span>
        <div class="chapter-grid">
          <a href="#data-panel" class="chapter-card">
            <span class="chapter-num">01</span>
            <span class="chapter-name">实时数据面板</span>
            <span class="chapter-desc">积分榜 / 伤停栏 / 红黄牌记录</span>
          </a>
          <a href="#update-log" class="chapter-card">
            <span class="chapter-num">02</span>
            <span class="chapter-name">更新日志</span>
            <span class="chapter-desc">第28轮数据 / 版本动态</span>
          </a>
          <a href="#troubleshoot" class="chapter-card">
            <span class="chapter-num">03</span>
            <span class="chapter-name">故障排查速查</span>
            <span class="chapter-desc">登录异常 / 导航问题 / 平板失效</span>
          </a>
          <a href="#feedback" class="chapter-card">
            <span class="chapter-num">04</span>
            <span class="chapter-name">链接变更反馈</span>
            <span class="chapter-desc">导航三级菜单 / 2分钟定位</span>
          </a>
        </div>
      </nav>
    </div>
  </section>

  <!-- 01 实时数据面板 -->
  <section id="data-panel" class="home-section section-data">
    <div class="container">
      <header class="section-head">
        <span class="section-index">01</span>
        <h2 class="section-title">实时数据面板</h2>
        <p class="section-lead">积分榜与伤停栏预览，移动端输入框直达。</p>
      </header>
      <div class="panel-tabs">
        <input type="radio" name="data-tab" id="tab-standings" class="tab-input" checked>
        <input type="radio" name="data-tab" id="tab-injuries" class="tab-input">
        <div class="tab-label-row">
          <label for="tab-standings" class="tab-label">积分榜</label>
          <label for="tab-injuries" class="tab-label">伤停栏</label>
        </div>
        <div class="panel-standings tab-pane">
          <div class="panel-body">
            <div class="panel-copy">
              <h3>积分榜数据</h3>
              <p>我们覆盖全球60+主要足球联赛及杯赛，红黄牌记录按轮次排列，每场更新至第28轮数据。</p>
              <ul class="data-list">
                <li>实时延迟 ≤30s</li>
                <li>联赛覆盖 60+</li>
                <li>已更新轮次 28</li>
              </ul>
            </div>
            <div class="panel-visual">
              <svg>...</svg>
            </div>
            <figure class="panel-img">
              <img src="{zhanqunpic:h:480w:640}" ... alt="足球场数据浮层">
            </figure>
          </div>
        </div>
        <div class="panel-injuries tab-pane">
          类似结构
        </div>
      </div>
    </div>
  </section>

  <!-- 02 更新日志 -->
  <section id="update-log" class="home-section section-log">
    <div class="container">
      <header class="section-head">
        <span class="section-index">02</span>
        <h2>更新日志</h2>
      </header>
      <div class="log-list">
        <article class="log-item">
          <span class="log-tag">红黄牌记录</span>
          <h3>每场更新至第28轮数据</h3>
          <p>...</p>
        </article>
        <article>...</article>
        <article>...</article>
        <article>...</article>
      </div>
    </div>
  </section>

  <!-- 03 故障排查速查 -->
  <section id="troubleshoot" class="home-section section-trouble">
    ...
  </section>

  <!-- 04 链接变更反馈 -->
  <section id="feedback" class="home-section section-feedback">
    ...
  </section>
</main>
```

这个结构清晰。让我完善它。

我现在来填充具体的文案和结构。图片我已经确定好位置了：
1. hero图：1024x768 (h:768w:1024) 不lazy，fetchpriority="high"
2. 积分榜配图：640x480 (h:480w:640) lazy
3. 伤停栏配图：640x480 (h:480w:640) lazy
4. 反馈示意图：800x600 (h:600w:800) lazy

让我确保他们符合格式：{zhanqunpic:h:768w:1024}。

关于内部的跨页面链接，我需要使用：
- /platform/ - 平台服务（积分榜、伤停、球员数据）
- /insights/ - 专题观察（更新日志）
- /faq/ - 常见问题（故障排查）
- /reach-us/ - 联系入口（反馈）
- /company/ - 品牌档案

这些是合法的路由。在首页我可以自然链接到它们。

好，开始写最终版本。我会很细致地构建。

让我认真考虑一下首屏体验：超大数字展示章节预览。所以hero中要有一个大的"章节预览"区块，数字非常大（clamp(6rem,15vw,12rem)）。

但我的h1也需要突出。让我把h1放在hero的copy区，而章节预览的四个数字也很大。不要让h1与章节数字冲突。

设计决策：hero上半部分是标题+导语+氛围图，下半部分是章节预览卡片（大数字01-04）。这样首屏完整展示了"当前页是首页"以及"后面有什么"。

好的，开始写。这个CSS会比较长。

让我注意几个细节：
- 使用CSS变量要从site_kit中已有的变量名引用，如var(--primary-lake)等
- 不要定义:root或body
- 所有选择器限制在.page-home内
- 移动端优先，至少一个媒体查询

关于页脚、导航等共享部分不需要输出，因为它们是全局的。

现在正式输出。注意：不要在输出中加入任何解释性文字，只要那两个标记块。

我想确认一下图片占位符的格式：文档示例是{zhanqunpic:h:600w:1200}表示高600宽1200。对，格式是h:高度w:宽度。所以：
- 高768宽1024：{zhanqunpic:h:768w:1024}
- 高480宽640：{zhanqunpic:h:480w:640}
- 高600宽800：{zhanqunpic:h:600w:800}

这些width/height属性与src中数字必须一致。

好，开始。我会写出精心设计的完整页面。

让我也注意：不要在main_html中加入<script>。CSS中不要重复定义共享类如.site-header等。

另外，我需要在FAQ和反馈部分自然带出联系方式，但注意规则8：联系信息只可使用site.contact。我可以提到"电话13854270241，邮箱email@xniao-sports.com.cn"，这些是允许的。注意不要新增联系信息。

不过首页可以不用展示联系方式，只需链接到/reach-us/即可。

OK，开始写。我会把代码控制在合理长度内。

我需要更仔细地设计hero。让我想象一下：

Hero背景是深蓝色渐变（#0B3A5C到#1B6CA8到部分透明），整个hero区域有较大的padding。

顶部：一行小字 "首页 / 官方网站"，右侧"品牌专区V4"版本戳。

中间：左侧是大标题"小鸟体育CN官方网站"（display字体大号），下面一行导语，再下面一个状态指示"数据实时更新"。

右侧：一张氛围图（青海湖与运动员剪影），带边框和阴影，直角。

再往下：一条分隔线，然后"章节预览"标签，下面是四个大数字卡片。

每个数字卡片有：超大数字01、标题、简短描述、箭头指示。鼠标悬停时上浮。

这个设计不错。

然后在数据面板章节，我用CSS-only tab切换。

更新日志章节：左侧一条垂直线或编号，右侧几个日志条目卡片。

故障排查章节：三个卡片，每个有图标/数字、标题、描述、链接。

链接变更反馈章节：一个醒目的橙色/深蓝CTA区域，加上反馈步骤说明和图片。

好的，我来写详细代码。

由于这是首页，我需要考虑content_rules和site_strategy。正文中自然融入SEO关键词组。注意不要过度堆砌。

让我在正文中自然使用这些词组：
1. "会员权益登录异常可通过站内提示路径快速排查" → 故障排查章节
2. "焕新版导航问题排查指南已更新至官网帮助中心" → 故障排查或更新日志
3. "官网首页链接变更反馈入口收进导航三级菜单，换设备两分钟找到" → 链接变更反馈章节
4. "平板刷新后球员列表恢复响应" → 更新日志或故障排查

这些词组会自然出现在页面中。

好，我开始最终写作。这会花一些时间，但我会确保质量。

最后提醒自己：输出只有和两个部分，内容完整。不要用```围栏。

好的，现在动笔。我理解您的需求，正在按照规范为您创建小鸟体育首页的主体HTML与页面专属CSS，涵盖章节预览、实时数据面板、更新日志、故障排查速查及链接变更反馈。