.page-home{
  --home-band: clamp(56px, 7vw, 112px);
  --home-hair: rgba(140, 163, 180, .28);
  background: var(--base);
  color: var(--paper);
}

.page-home .band{ padding: var(--home-band) 0; }
.page-home .band--paper{ background: var(--paper); color: var(--carbon); }
.page-home .band--deep{ background: var(--base-2); color: var(--paper); }

.page-home .band--paper .label{ color: var(--lime-deep); }
.page-home .band--paper .panel-text,
.page-home .band--paper .review__more{ color: var(--base); }
.page-home .band--paper .link{ color: var(--base); }

.page-home .panel-text{
  font-size: 16px;
  line-height: 1.75;
  margin: 14px 0 0;
  max-width: 36em;
}
.page-home .label{ color: var(--steel); }

/* ---------- 首屏 ---------- */
.page-home .hero{
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 3vw, 40px) 0 clamp(48px, 6vw, 88px);
}
.page-home .hero::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(200, 255, 61, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(200, 255, 61, .07) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 88%);
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
}
.page-home .hero__grid{
  position: relative;
  display: grid;
  gap: clamp(32px, 5vw, 52px);
  align-items: start;
}
.page-home .hero__eyebrow{ margin: 0 0 12px; }
.page-home .hero__title{ margin: 0; }
.page-home .hero__intro{
  margin: 18px 0 0;
  max-width: 30em;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.75;
  color: var(--steel-lt);
}

.page-home .hero__metrics{
  list-style: none;
  margin: clamp(24px, 4vw, 36px) 0 0;
  padding: 0;
  border-top: 2px solid var(--home-hair);
}
.page-home .metric{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 16px;
  padding: 15px 0;
  border-bottom: 2px solid var(--home-hair);
}
.page-home .metric__label{
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--steel);
}
.page-home .metric__value{
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}
.page-home .metric__unit{
  font-size: .42em;
  letter-spacing: .04em;
  margin-left: 5px;
  color: var(--steel-lt);
}
.page-home .metric__note{
  grid-column: 1 / -1;
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--steel);
}

.page-home .hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 4vw, 34px);
}

.page-home .hero__shot{
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 4px solid var(--ink);
  box-shadow: 10px 10px 0 var(--ink);
  background: var(--base-2);
  transform: skewY(-6deg);
}
.page-home .hero__shot img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: skewY(6deg) scale(1.14);
  filter: saturate(.85) contrast(1.05);
}
.page-home .hero__shot::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(200, 255, 61, .16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(200, 255, 61, .16) 1px, transparent 1px);
  background-size: 52px 52px;
}
.page-home .hero__stamp{
  position: absolute;
  left: 12px;
  bottom: 22px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  padding: 10px 14px;
  background: var(--ink);
  border-left: 4px solid var(--lime);
  transform: skewY(6deg);
}
.page-home .hero__stamp .label{ color: var(--steel-lt); }
.page-home .hero__stamp-time{ color: var(--lime); font-size: 13px; }

/* ---------- 章节索引 ---------- */
.page-home .index-nav{
  padding: var(--home-band) 0;
  border-top: 2px solid var(--home-hair);
}
.page-home .index-nav__title{ margin: 0; }
.page-home .index-nav__list{
  list-style: none;
  margin: clamp(24px, 4vw, 40px) 0 0;
  padding: 0;
}
.page-home .index-item a{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 2px solid var(--home-hair);
  text-decoration: none;
  color: var(--paper);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.page-home .index-item__num{
  font-size: clamp(34px, 6vw, 58px);
  line-height: 1;
  color: var(--steel);
  -webkit-text-stroke: 1px var(--steel);
  transition: color .2s var(--ease);
}
.page-home .index-item__name{
  display: block;
  font-size: clamp(19px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: .01em;
}
.page-home .index-item__desc{
  display: block;
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--steel);
}
.page-home .index-item a:hover,
.page-home .index-item a:focus-visible{
  border-bottom-color: var(--lime);
  color: var(--lime);
}
.page-home .index-item a:hover .index-item__num,
.page-home .index-item a:focus-visible .index-item__num{
  color: var(--lime);
  -webkit-text-stroke: 1px var(--lime);
}

/* ---------- 三项信息分段切换 ---------- */
.page-home .views{ margin-top: clamp(26px, 4vw, 44px); }
.page-home .views__tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  border-bottom: 2px solid var(--steel-lt);
}
.page-home .views__tab{
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 12px 2px;
  min-height: 44px;
  font: inherit;
  font-size: 15px;
  letter-spacing: .06em;
  color: var(--steel);
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.page-home .views__tab:hover{ color: var(--carbon); }
.page-home .views__tab[aria-selected="true"]{
  color: var(--carbon);
  font-weight: 700;
  border-bottom-color: var(--lime-deep);
}
.page-home .views__tab:focus-visible{
  outline: 2px solid var(--lime-deep);
  outline-offset: 3px;
}
.page-home .views__panel{ padding-top: clamp(22px, 3.5vw, 34px); }
.page-home .views__panel:focus-visible{
  outline: 2px solid var(--lime-deep);
  outline-offset: 6px;
}

.page-home .panel-grid{ display: grid; gap: clamp(20px, 3vw, 32px); }
.page-home .panel-grid__text h3{ margin: 0 0 4px; }
.page-home .panel-figure{ margin: 0; }

.page-home .clause{
  border-top: 2px solid var(--steel-lt);
  padding: 4px 0;
}
.page-home .clause summary{
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 44px;
  padding: 10px 0;
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  color: var(--carbon);
}
.page-home .clause summary::-webkit-details-marker{ display: none; }
.page-home .clause summary::before{
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  background: var(--lime);
  border: 2px solid var(--ink);
  transform: translateY(1px);
  transition: background .2s var(--ease);
}
.page-home .clause[open] summary::before{ background: var(--orange); }
.page-home .clause p{
  margin: 0 0 10px 22px;
  font-size: 15px;
  line-height: 1.72;
  color: var(--base);
}
.page-home .views__more{ margin: 18px 0 0; }
.page-home .views__more .link{ font-weight: 600; }

.page-home .lineup{ display: grid; gap: 16px; margin-top: 20px; }
.page-home .lineup__card{
  border: 2px solid var(--ink);
  background: rgba(255, 255, 255, .7);
  padding: 16px 18px 18px;
  box-shadow: 4px 4px 0 var(--ink);
}
.page-home .lineup__card--now{ background: rgba(200, 255, 61, .22); }
.page-home .lineup__card .label{ margin: 0 0 10px; color: var(--base); }
.page-home .roster{ list-style: none; margin: 0; padding: 0; }
.page-home .roster li{
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 8px 0;
  font-size: 15px;
  border-bottom: 1px solid var(--steel-lt);
}
.page-home .roster li:last-child{ border-bottom: 0; }
.page-home .roster .mono{ color: var(--steel); font-size: 12px; }
.page-home .roster__changed{ color: var(--carbon); font-weight: 700; }
.page-home .roster__changed .mono{ color: var(--lime-deep); }

.page-home .injury{ list-style: none; margin: 20px 0 0; padding: 0; }
.page-home .injury__item{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 2px solid var(--steel-lt);
  font-size: 15px;
  line-height: 1.65;
}
.page-home .injury__time{
  font-size: 12px;
  color: var(--card, var(--base));
  background: var(--lime);
  border: 2px solid var(--ink);
  padding: 2px 8px;
  white-space: nowrap;
}

/* ---------- 刷新节奏 ---------- */
.page-home .refresh{ display: grid; gap: clamp(28px, 4vw, 46px); align-items: start; }
.page-home .refresh__lead{ color: var(--steel-lt); }
.page-home .countdown{
  position: relative;
  height: 12px;
  margin: 24px 0 12px;
  background: rgba(140, 163, 180, .18);
  border: 2px solid var(--ink);
}
.page-home .countdown__bar{
  display: block;
  height: 100%;
  width: 62%;
  background: linear-gradient(to right, var(--lime-deep), var(--lime));
  animation: home-fill 6s var(--ease) infinite;
}
.page-home .countdown__dot{
  position: absolute;
  top: 50%;
  right: -5px;
  width: 14px;
  height: 14px;
  background: var(--lime);
  border: 2px solid var(--ink);
  transform: translateY(-50%);
  animation: home-pulse 1.6s ease-in-out infinite;
}
.page-home .refresh__stamp{
  margin: 0;
  font-size: 13px;
  color: var(--steel);
}
.page-home .records{ list-style: none; margin: 22px 0 0; padding: 0; }
.page-home .records__row{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 2px solid var(--home-hair);
  transition: background .2s var(--ease);
}
.page-home .records__row:hover,
.page-home .records__row:focus-visible{
  background: rgba(200, 255, 61, .08);
  outline: none;
}
.page-home .records__time{ font-size: 13px; color: var(--lime); }
.page-home .records__what{ font-size: 15px; color: var(--paper); }
.page-home .records__more{
  grid-column: 1 / -1;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--steel);
  transition: max-height .28s var(--ease), opacity .28s var(--ease), margin .28s var(--ease);
}
.page-home .records__row:hover .records__more,
.page-home .records__row:focus-within .records__more,
.page-home .records__row:focus .records__more{
  max-height: 90px;
  opacity: 1;
  margin-top: 6px;
}
.page-home .refresh__jump{ margin: 18px 0 0; }
.page-home .refresh__phone{
  margin: 0;
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  overflow: hidden;
  background: var(--base);
}
.page-home .refresh__phone img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 对比评测 ---------- */
.page-home .review__head{ display: grid; gap: 16px; }
.page-home .review__head h2{ margin: 0; }
.page-home .review__lead{ margin: 0; }
.page-home .score{ list-style: none; margin: clamp(24px, 4vw, 40px) 0 0; padding: 0; }
.page-home .score__row{
  display: grid;
  gap: 8px;
  padding: 16px 0;
  border-bottom: 2px solid var(--steel-lt);
}
.page-home .score__name{ font-weight: 700; font-size: 16px; color: var(--carbon); }
.page-home .score__bar{
  height: 14px;
  background: rgba(11, 43, 34, .08);
  border: 2px solid var(--ink);
}
.page-home .score__bar span{
  display: block;
  height: 100%;
  width: var(--w, 50%);
  background: var(--lime-deep);
}
.page-home .score__row:first-child .score__bar span{ background: var(--orange); }
.page-home .score__num{ font-size: 12px; letter-spacing: .08em; color: var(--steel); }
.page-home .review__more{
  margin: 22px 0 0;
  max-width: 44em;
  font-size: 15px;
  line-height: 1.75;
}
.page-home .review__more .link{ margin-left: 4px; font-weight: 600; }

/* ---------- 起步路径 ---------- */
.page-home .path{
  list-style: none;
  margin: clamp(26px, 4vw, 44px) 0 0;
  padding: 0;
}
.page-home .path__step{
  position: relative;
  margin-left: 15px;
  padding: 4px 0 30px 42px;
  border-left: 2px solid var(--home-hair);
  transition: border-color .2s var(--ease);
}
.page-home .path__step:last-child{ padding-bottom: 6px; }
.page-home .path__step::before{
  content: "";
  position: absolute;
  left: -10px;
  top: 8px;
  width: 16px;
  height: 16px;
  background: var(--base-2);
  border: 3px solid var(--lime);
  transition: background .2s var(--ease);
}
.page-home .path__step:hover,
.page-home .path__step:focus-within{ border-left-color: var(--lime); }
.page-home .path__step:hover::before,
.page-home .path__step:focus-within::before{ background: var(--lime); }
.page-home .path__num{
  display: block;
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--steel);
  margin-bottom: 6px;
}
.page-home .path__step h3{ margin: 0; }
.page-home .path__text{
  margin: 10px 0 10px;
  max-width: 34em;
  font-size: 15px;
  line-height: 1.75;
  color: var(--steel-lt);
}
.page-home .versions{
  display: grid;
  gap: 14px;
  margin-top: clamp(28px, 4vw, 42px);
  padding-top: 24px;
  border-top: 2px solid var(--home-hair);
}
.page-home .version{
  border-left: 3px solid var(--lime);
  padding-left: 12px;
}
.page-home .version__name{
  display: block;
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--steel);
  margin-bottom: 6px;
}
.page-home .version__val{ font-size: 16px; color: var(--paper); }

/* ---------- 联络收口 ---------- */
.page-home .closing{ display: grid; gap: clamp(26px, 4vw, 44px); align-items: start; }
.page-home .closing__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.page-home .facts{ margin: 0; }
.page-home .facts__row{
  display: grid;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 2px solid var(--steel-lt);
}
.page-home .facts__row dt{
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--lime-deep);
}
.page-home .facts__row dd{
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--carbon);
  word-break: break-word;
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px){
  .page-home .lineup{ grid-template-columns: 1fr 1fr; }
  .page-home .score__row{
    grid-template-columns: 150px 1fr 110px;
    align-items: center;
    gap: 20px;
  }
  .page-home .versions{ grid-template-columns: repeat(2, 1fr); }
  .page-home .facts__row{
    grid-template-columns: 120px 1fr;
    align-items: baseline;
    gap: 16px;
  }
  .page-home .review__head{ grid-template-columns: 1.1fr .9fr; align-items: end; gap: 32px; }
  .page-home .refresh{ grid-template-columns: 1.35fr .65fr; }
}

@media (min-width: 980px){
  .page-home .hero__grid{ grid-template-columns: 7fr 5fr; }
  .page-home .index-nav__list{ grid-template-columns: 1fr 1fr; column-gap: 56px; }
  .page-home .panel-grid{ grid-template-columns: 1.15fr .85fr; align-items: start; }
  .page-home .panel-grid--flip{ grid-template-columns: .85fr 1.15fr; }
  .page-home .closing{ grid-template-columns: 1.2fr .8fr; }
  .page-home .versions{ grid-template-columns: repeat(4, 1fr); }
  .page-home .path{ max-width: 780px; }
}

@keyframes home-fill{
  0%{ width: 8%; }
  100%{ width: 100%; }
}
@keyframes home-pulse{
  0%, 100%{ opacity: 1; transform: translateY(-50%) scale(1); }
  50%{ opacity: .45; transform: translateY(-50%) scale(.82); }
}

@media (prefers-reduced-motion: reduce){
  .page-home *{
    animation: none !important;
    transition: none !important;
  }
}
<<<END>>>

.page-home {
  --card: currentColor;
  --w: 1rem;
}