.page-home{
  --home-line:rgba(184,255,249,.14);
  --home-card:rgba(9,32,53,.72);
  --home-gap:clamp(20px,3vw,36px);
  background:
    radial-gradient(1100px 560px at 88% -8%, rgba(34,224,214,.13), transparent 62%),
    radial-gradient(900px 520px at -10% 32%, rgba(90,31,46,.35), transparent 60%),
    var(--night);
  color:var(--paper);
  font-family:var(--font-sans);
  overflow-x:clip;
}
.page-home img{max-width:100%;height:auto;display:block}
.page-home a{color:var(--cyan);text-decoration:none}
.page-home a:hover{color:var(--metal)}

/* 上下文条 */
.page-home .home-context{
  background:var(--night-deep);
  border-bottom:1px solid var(--home-line);
  padding:10px 0;
}
.page-home .home-context__inner{
  display:flex;
  flex-wrap:wrap;
  gap:10px 20px;
  align-items:center;
  justify-content:space-between;
}
.page-home .home-context__now{
  margin:0;
  font-size:13px;
  color:var(--mist);
  letter-spacing:.04em;
}
.page-home .home-jump{
  display:flex;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
  max-width:100%;
}
.page-home .home-jump::-webkit-scrollbar{display:none}
.page-home .home-jump a{
  flex:0 0 auto;
  font-size:12px;
  color:var(--mist);
  border:1px solid var(--home-line);
  border-radius:var(--radius-pill);
  padding:5px 12px;
  white-space:nowrap;
}
.page-home .home-jump a:hover{color:var(--ink);background:var(--cyan);border-color:var(--cyan)}

/* 首屏 */
.page-home .hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(32px,5vw,64px) 0 clamp(30px,4vw,52px);
  background:linear-gradient(158deg, var(--night-deep) 0%, var(--night) 46%, #0a2438 100%);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 38px), 0 100%);
}
.page-home .hero__bg{
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.3;
}
.page-home .hero__bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:72% 42%;
}
.page-home .hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(120deg, rgba(7,26,47,.94) 0%, rgba(7,26,47,.66) 48%, rgba(36,27,74,.55) 100%);
}
.page-home .hero__inner{
  display:grid;
  gap:clamp(24px,4vw,44px);
  align-items:end;
}
.page-home .hero__kicker{
  margin:0 0 14px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cyan);
}
.page-home .hero h1{
  margin:0;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(30px,6.4vw,66px);
  line-height:1.12;
  letter-spacing:.01em;
  max-width:15em;
}
.page-home .hero__desc{
  margin:18px 0 0;
  font-size:clamp(15px,1.6vw,17px);
  line-height:1.85;
  color:rgba(242,245,247,.82);
  max-width:38em;
}
.page-home .hero__cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}
.page-home .hero__panel{
  border:1px solid var(--home-line);
  border-radius:22px 4px 22px 4px;
  background:linear-gradient(160deg, rgba(36,27,74,.85), rgba(18,58,53,.7));
  padding:clamp(18px,2.6vw,26px);
  box-shadow:0 24px 60px -40px rgba(0,0,0,.9);
}
.page-home .hero__panelTop{
  display:flex;
  align-items:flex-end;
  gap:14px;
}
.page-home .hero__roundLabel{
  font-size:12px;
  letter-spacing:.18em;
  color:var(--mist);
  padding-bottom:12px;
}
.page-home .hero__roundNum{
  font-family:var(--font-mono);
  font-size:clamp(76px,15vw,132px);
  line-height:.82;
  font-weight:700;
  color:var(--paper);
  letter-spacing:-.03em;
  text-shadow:0 0 42px rgba(34,224,214,.28);
}
.page-home .roundline{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  list-style:none;
  margin:22px 0 14px;
  padding:0;
}
.page-home .roundline li{
  position:relative;
  padding-top:20px;
  text-align:center;
  font-size:12px;
  color:var(--mist);
}
.page-home .roundline li::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--night);
  border:2px solid rgba(184,255,249,.28);
}
.page-home .roundline li::after{
  content:"";
  position:absolute;
  top:4px;
  left:50%;
  width:100%;
  height:2px;
  background:rgba(184,255,249,.14);
}
.page-home .roundline li:last-child::after{display:none}
.page-home .roundline li.is-done::before,
.page-home .roundline li.is-current::before{background:var(--cyan);border-color:var(--cyan)}
.page-home .roundline li.is-done::after{background:rgba(34,224,214,.45)}
.page-home .roundline li.is-current{color:var(--paper)}
.page-home .roundline li.is-current::before{box-shadow:0 0 0 5px rgba(34,224,214,.18)}
.page-home .hero__panelNote{
  margin:0;
  font-size:12.5px;
  line-height:1.7;
  color:var(--mist);
}

/* 徽章矩阵 */
.page-home .hero__mat{
  margin-top:clamp(30px,4vw,52px);
  border-top:1px solid var(--home-line);
  padding-top:clamp(20px,3vw,32px);
}
.page-home .hero__matHead{
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
  align-items:baseline;
  margin-bottom:16px;
}
.page-home .hero__matTitle{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(19px,2.4vw,24px);
  letter-spacing:.02em;
}
.page-home .hero__matHint{
  margin:0;
  font-size:13px;
  color:var(--mist);
}
.page-home .badges{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  list-style:none;
  margin:0;
  padding:0;
}
.page-home .badge{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  background:var(--home-card);
  border:1px solid var(--home-line);
  border-radius:16px 4px 16px 4px;
  padding:10px 12px;
  transition:border-color .2s ease, background .2s ease;
}
.page-home .badge:hover{border-color:rgba(34,224,214,.42)}
.page-home .badge__mark{
  font-family:var(--font-display);
  font-size:20px;
  line-height:1;
  color:var(--metal);
}
.page-home .badge__name{
  flex:1 1 auto;
  font-size:12.5px;
  color:var(--mist);
  white-space:nowrap;
}
.page-home .badge__fav{
  flex:0 0 auto;
  font-family:var(--font-sans);
  font-size:11.5px;
  padding:4px 10px;
  border-radius:var(--radius-pill);
  border:1px solid rgba(255,107,44,.55);
  background:transparent;
  color:var(--orange);
  cursor:pointer;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.page-home .badge__fav:hover{background:rgba(255,107,44,.14)}
.page-home .badge__fav.is-active{
  background:var(--orange);
  border-color:var(--orange);
  color:var(--ink);
  font-weight:700;
  transform:translateY(-1px);
}

/* 首屏摘要条 */
.page-home .hero__strip{
  display:grid;
  gap:12px;
  margin-top:clamp(22px,3vw,34px);
}
.page-home .stripcard{
  border-left:3px solid var(--orange);
  background:rgba(11,18,25,.55);
  border-radius:0 18px 18px 0;
  padding:14px 18px;
}
.page-home .stripcard__k{
  margin:0 0 4px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--cyan);
}
.page-home .stripcard__v{
  margin:0;
  font-size:14px;
  line-height:1.6;
  color:rgba(242,245,247,.86);
}

/* 区块通用 */
.page-home .sec-head{
  max-width:760px;
  margin-bottom:clamp(24px,3vw,38px);
}
.page-home .sec-head h2{
  margin:14px 0 12px;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(26px,4.2vw,44px);
  line-height:1.2;
  letter-spacing:.01em;
}
.page-home .sec-head .lead{
  margin:0;
  font-size:clamp(14.5px,1.6vw,16.5px);
  line-height:1.85;
  color:rgba(242,245,247,.78);
}

/* 01 周末连看两场 */
.page-home .weekend{
  padding:clamp(48px,7vw,88px) 0;
  background:linear-gradient(180deg, rgba(18,58,53,.92), rgba(18,58,53,.55) 70%, transparent);
  clip-path:polygon(0 0, 100% 26px, 100% 100%, 0 100%);
}
.page-home .weekend__grid{
  display:grid;
  gap:clamp(16px,2.2vw,24px);
}
.page-home .scene{
  border-top:2px solid rgba(34,224,214,.45);
  padding-top:16px;
}
.page-home .scene__num{
  margin:0;
  font-family:var(--font-mono);
  font-size:34px;
  line-height:1;
  color:rgba(34,224,214,.5);
}
.page-home .scene__title{
  margin:8px 0 8px;
  font-family:var(--font-display);
  font-size:clamp(18px,2.2vw,22px);
  line-height:1.35;
}
.page-home .scene__text{
  margin:0;
  font-size:14.5px;
  line-height:1.8;
  color:rgba(242,245,247,.78);
}
.page-home .weekend__figure{
  margin:0;
  border-radius:22px 4px 22px 4px;
  overflow:hidden;
  border:1px solid var(--home-line);
}
.page-home .weekend__figure img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
}
.page-home .media-frame__caption{
  display:block;
  padding:10px 14px;
  font-size:12.5px;
  color:var(--mist);
  background:rgba(7,26,47,.75);
}

/* 02 V3.1 */
.page-home .v31{
  padding:clamp(48px,7vw,88px) 0;
  background:linear-gradient(200deg, rgba(90,31,46,.55), rgba(7,26,47,.9) 72%);
}
.page-home .v31__inner{
  display:grid;
  gap:clamp(26px,4vw,48px);
  align-items:start;
}
.page-home .v31__copy h2{
  margin:14px 0 14px;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(25px,4vw,42px);
  line-height:1.22;
}
.page-home .v31__copy .lead{
  margin:0 0 26px;
  font-size:15.5px;
  line-height:1.85;
  color:rgba(242,245,247,.8);
  max-width:36em;
}
.page-home .v31__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:18px;
}
.page-home .v31item{
  padding-left:16px;
  border-left:2px solid rgba(34,224,214,.5);
}
.page-home .v31item__title{
  margin:0 0 6px;
  font-size:16.5px;
  font-weight:600;
  line-height:1.5;
  color:var(--paper);
}
.page-home .v31item__text{
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:rgba(242,245,247,.76);
}
.page-home .v31__more{
  margin:24px 0 0;
  font-size:13.5px;
  color:var(--mist);
}
.page-home .v31__figure{
  margin:0;
  border-radius:4px 22px 4px 22px;
  overflow:hidden;
  border:1px solid var(--home-line);
  background:var(--home-card);
}
.page-home .v31__figure img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
}
.page-home .v31__figure .media-frame__caption{
  background:rgba(11,18,25,.72);
}

/* 03 战报索引 */
.page-home .stories{
  padding:clamp(48px,7vw,88px) 0;
  background:linear-gradient(180deg, rgba(36,27,74,.55), rgba(7,26,47,.95) 60%);
}
.page-home .stories__grid{
  display:grid;
  gap:clamp(22px,3vw,32px);
  align-items:start;
}
.page-home .storytabs{min-width:0}
.page-home .storytab-input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.page-home .storytabs__bar{
  display:flex;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
  padding-bottom:6px;
  margin-bottom:20px;
}
.page-home .storytabs__bar::-webkit-scrollbar{display:none}
.page-home .storytabs__tab{
  flex:0 0 auto;
  cursor:pointer;
  font-size:13px;
  padding:8px 16px;
  border-radius:var(--radius-pill);
  border:1px solid var(--home-line);
  color:var(--mist);
  white-space:nowrap;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.page-home .storytabs__tab:hover{color:var(--paper);border-color:rgba(34,224,214,.45)}
.page-home #tab-pre:checked ~ .storytabs__bar .t-pre,
.page-home #tab-post:checked ~ .storytabs__bar .t-post,
.page-home #tab-data:checked ~ .storytabs__bar .t-data,
.page-home #tab-file:checked ~ .storytabs__bar .t-file{
  background:var(--orange);
  border-color:var(--orange);
  color:var(--ink);
  font-weight:700;
}
.page-home .storytabs__panel{display:none}
.page-home #tab-pre:checked ~ .storytabs__panels .p-pre,
.page-home #tab-post:checked ~ .storytabs__panels .p-post,
.page-home #tab-data:checked ~ .storytabs__panels .p-data,
.page-home #tab-file:checked ~ .storytabs__panels .p-file{
  display:grid;
  gap:14px;
}
.page-home .story{
  border:1px solid var(--home-line);
  border-radius:18px 4px 18px 4px;
  background:var(--home-card);
  padding:18px;
  transition:border-color .2s ease, transform .2s ease;
}
.page-home .story:hover{border-color:rgba(34,224,214,.38);transform:translateY(-2px)}
.page-home .story__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0 0 10px;
}
.page-home .story__time{
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--mist);
}
.page-home .story__title{
  margin:0 0 8px;
  font-size:clamp(16px,1.9vw,18.5px);
  font-weight:600;
  line-height:1.5;
  color:var(--paper);
}
.page-home .story__desc{
  margin:0 0 14px;
  font-size:13.5px;
  line-height:1.75;
  color:rgba(242,245,247,.74);
}
.page-home .story__fav.is-active{
  background:var(--orange);
  border-color:var(--orange);
  color:var(--ink);
}
.page-home .storytabs__more{margin:22px 0 0}

/* 侧边收藏夹 */
.page-home .favcard{
  border-radius:4px 22px 4px 22px;
  border:1px solid rgba(184,255,249,.2);
  background:linear-gradient(165deg, rgba(36,27,74,.95), rgba(11,18,25,.9));
  padding:22px;
}
.page-home .favcard__kicker{
  margin:0 0 8px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.2em;
  color:var(--cyan);
}
.page-home .favcard__title{
  margin:0 0 16px;
  font-family:var(--font-display);
  font-size:20px;
  line-height:1.4;
}
.page-home .favcard__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}
.page-home .favcard__list li{
  display:grid;
  gap:2px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(184,255,249,.1);
}
.page-home .favcard__list li:last-child{border-bottom:0;padding-bottom:0}
.page-home .favcard__k{
  font-size:11.5px;
  letter-spacing:.12em;
  color:var(--mist);
}
.page-home .favcard__v{
  font-size:14px;
  line-height:1.6;
  color:var(--paper);
}
.page-home .favcard__note{
  margin:16px 0 0;
  font-size:13px;
  line-height:1.75;
  color:var(--mist);
}

/* 04 多端 */
.page-home .multi{
  padding:clamp(48px,7vw,88px) 0;
  background:linear-gradient(135deg, rgba(18,58,53,.85), rgba(7,26,47,.98) 65%);
  clip-path:polygon(0 22px, 100% 0, 100% 100%, 0 100%);
}
.page-home .multi__grid{
  display:grid;
  gap:clamp(16px,2.2vw,24px);
}
.page-home .device{
  padding:20px;
  border-radius:20px 4px 20px 4px;
  background:rgba(11,18,25,.55);
  border:1px solid var(--home-line);
}
.page-home .device__title{
  margin:0 0 10px;
  font-family:var(--font-display);
  font-size:19px;
  letter-spacing:.02em;
  color:var(--metal);
}
.page-home .device__text{
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:rgba(242,245,247,.78);
}
.page-home .multi__figure{
  margin:0;
  border-radius:22px 4px 22px 4px;
  overflow:hidden;
  border:1px solid var(--home-line);
}
.page-home .multi__figure img{
  width:100%;
  aspect-ratio:14/9;
  object-fit:cover;
}
.page-home .multi__figure .media-frame__caption{
  background:rgba(11,18,25,.75);
}
.page-home .multi__cta{margin:26px 0 0}

/* 05 天津 */
.page-home .harbor{
  padding:clamp(48px,7vw,88px) 0;
  background:linear-gradient(190deg, rgba(90,31,46,.7), rgba(7,26,47,.98) 70%);
}
.page-home .harbor__inner{
  display:grid;
  gap:clamp(24px,4vw,44px);
  align-items:center;
}
.page-home .harbor__copy h2{
  margin:14px 0 16px;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(25px,4vw,42px);
  line-height:1.22;
}
.page-home .harbor__text{
  margin:0 0 14px;
  font-size:15px;
  line-height:1.85;
  color:rgba(242,245,247,.8);
  max-width:36em;
}
.page-home .harbor__contact{
  list-style:none;
  margin:20px 0 14px;
  padding:0;
  display:grid;
  gap:10px;
}
.page-home .harbor__contact li{
  display:flex;
  flex-wrap:wrap;
  gap:4px 14px;
  align-items:baseline;
  padding:12px 16px;
  border-radius:14px 4px 14px 4px;
  background:rgba(11,18,25,.5);
  border:1px solid var(--home-line);
}
.page-home .harbor__k{
  font-size:11.5px;
  letter-spacing:.14em;
  color:var(--mist);
  flex:0 0 auto;
}
.page-home .harbor__v{
  font-family:var(--font-mono);
  font-size:14.5px;
  color:var(--paper);
  word-break:break-all;
}
.page-home .harbor__note{
  margin:0;
  font-size:13px;
  line-height:1.8;
  color:var(--mist);
}
.page-home .harbor__visual{
  border-radius:22px 4px 22px 4px;
  background:
    linear-gradient(160deg, rgba(34,224,214,.16), transparent 55%),
    repeating-linear-gradient(90deg, rgba(184,255,249,.09) 0 1px, transparent 1px 34px),
    var(--night-deep);
  border:1px solid var(--home-line);
  padding:clamp(24px,4vw,40px);
  text-align:center;
}
.page-home .harbor__figureNum{
  margin:0;
  font-family:var(--font-mono);
  font-size:clamp(72px,16vw,120px);
  line-height:.9;
  color:var(--orange);
  letter-spacing:-.04em;
}
.page-home .harbor__figureLabel{
  margin:10px 0 0;
  font-size:13px;
  letter-spacing:.08em;
  color:var(--mist);
}

/* 06 下一步 */
.page-home .next{
  padding:clamp(48px,7vw,88px) 0 clamp(52px,7vw,92px);
  background:linear-gradient(180deg, rgba(7,26,47,.98), #04101e);
}
.page-home .next__grid{
  display:grid;
  gap:14px;
}
.page-home .nextcard{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  padding:20px;
  border-radius:18px 4px 18px 4px;
  background:var(--home-card);
  border:1px solid var(--home-line);
}
.page-home .nextcard__title{
  margin:0;
  font-family:var(--font-display);
  font-size:18px;
  line-height:1.4;
}
.page-home .nextcard__text{
  margin:0;
  font-size:13.5px;
  line-height:1.75;
  color:rgba(242,245,247,.75);
  flex:1 1 auto;
}
.page-home .next__legal{
  margin:26px 0 0;
  font-size:12.5px;
  line-height:1.9;
  color:var(--mist);
}

@media (min-width:600px){
  .page-home .badges{grid-template-columns:repeat(3,minmax(0,1fr))}
  .page-home .hero__strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .page-home .next__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (min-width:768px){
  .page-home .weekend__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-home .weekend__figure{grid-column:1 / -1}
  .page-home .multi__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-home .multi__figure{grid-column:1 / -1}
  .page-home .badges{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (min-width:1024px){
  .page-home .hero__inner{grid-template-columns:1.35fr .75fr}
  .page-home .hero__panel{justify-self:end;width:100%;max-width:420px}
  .page-home .badges{grid-template-columns:repeat(6,minmax(0,1fr))}
  .page-home .weekend__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .page-home .weekend__figure{grid-column:1 / -1}
  .page-home .v31__inner{grid-template-columns:1.1fr .9fr}
  .page-home .v31__figure{margin-top:26px}
  .page-home .stories__grid{grid-template-columns:minmax(0,1fr) 320px}
  .page-home .stories__aside{position:sticky;top:96px}
  .page-home .multi__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .page-home .multi__figure{grid-column:1 / -1}
  .page-home .harbor__inner{grid-template-columns:1.25fr .75fr}
  .page-home .next__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (min-width:1280px){
  .page-home .weekend__grid{grid-template-columns:repeat(3,minmax(0,1fr)) 1.1fr;align-items:start}
  .page-home .weekend__figure{grid-column:4 / 5}
}

@media (prefers-reduced-motion:reduce){
  .page-home .badge,
  .page-home .story,
  .page-home .badge__fav{transition:none}
  .page-home .badge__fav.is-active{transform:none}
  .page-home .story:hover{transform:none}
}
<<<END>>>