.page-products{
  background:var(--ink);
  color:var(--white);
  font-family:var(--font-body);
  overflow-x:clip;
}

/* ---------- 排版底座 ---------- */
.page-products h1,
.page-products h2,
.page-products h3{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.06;
  margin:0;
}
.page-products h1{font-size:clamp(2rem,5.4vw,3.5rem);text-wrap:balance;}
.page-products h2{font-size:clamp(1.5rem,3.3vw,2.3rem);text-wrap:balance;}
.page-products h3{font-size:1.12rem;letter-spacing:0;line-height:1.3;}
.page-products p{margin:0;}
.page-products a{color:inherit;}
.page-products .pp-num{
  font-family:var(--font-mono);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.page-products .pp-text{
  margin-top:14px;
  font-size:16.5px;
  line-height:1.78;
  color:var(--white);
  max-width:36em;
}
.page-products .pp-list{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  display:grid;
  gap:12px;
  max-width:38em;
}
.page-products .pp-list li{
  position:relative;
  padding-left:20px;
  font-size:15.5px;
  line-height:1.72;
  color:var(--mist);
}
.page-products .pp-list li strong{color:var(--white);font-weight:600;}
.page-products .pp-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:8px;
  height:8px;
  background:var(--lime);
}
.page-products .pp-code{
  font-family:var(--font-mono);
  font-size:.9em;
  padding:1px 6px;
  border:1px solid var(--grid);
  background:var(--ink-3);
  color:var(--lime);
  white-space:nowrap;
}
.page-products .pp-inline-links{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}

/* ---------- 区块节奏 ---------- */
.page-products .pp-sec{
  position:relative;
  padding:clamp(46px,6.5vw,94px) 0;
}
.page-products .pp-sec__head{
  display:grid;
  gap:12px;
  margin-bottom:clamp(26px,3.6vw,46px);
  max-width:46em;
}
.page-products .pp-sec__lead{
  font-size:15.5px;
  line-height:1.75;
  color:var(--mist);
  max-width:38em;
}
.page-products .pp-sec--overview{background:var(--ink-2);border-top:1px solid var(--grid);border-bottom:1px solid var(--grid);}
.page-products .pp-sec--live{background:var(--ink);}
.page-products .pp-sec--dist{background:var(--ink-2);border-top:1px solid var(--grid);border-bottom:1px solid var(--grid);}
.page-products .pp-sec--ha{background:var(--ink);}
.page-products .pp-sec--wide{background:var(--ink-3);border-top:1px solid var(--grid);border-bottom:1px solid var(--grid);}
.page-products .pp-sec--news{background:var(--ink);}
.page-products .pp-sec--mobile{background:var(--ink-2);border-top:1px solid var(--grid);border-bottom:1px solid var(--grid);}
.page-products .pp-sec--path{background:var(--ink);}

/* ---------- 分屏 ---------- */
.page-products .pp-split{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(28px,4vw,54px);
  align-items:start;
}
.page-products .pp-col{min-width:0;}

/* ---------- 首屏 ---------- */
.page-products .pp-hero{
  padding-top:clamp(26px,4vw,54px);
  padding-bottom:clamp(38px,5.5vw,78px);
}
.page-products .pp-hero .crumbs{margin-bottom:clamp(18px,2.6vw,30px);}
.page-products .pp-hero__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(26px,4vw,46px);
  align-items:end;
}
.page-products .pp-hero__lead .label{margin-bottom:14px;}
.page-products .pp-hero__sub{
  margin-top:18px;
  font-size:16.5px;
  line-height:1.78;
  color:var(--mist);
  max-width:34em;
}
.page-products .pp-hero__act{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}

.page-products .pp-board{
  background:var(--ink-3);
  border:1px solid var(--grid);
  padding:clamp(18px,2.4vw,26px);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%);
}
.page-products .pp-board__top{
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:14px;
  border-bottom:1px solid var(--grid);
}
.page-products .pp-board__note{
  font-size:12px;
  letter-spacing:.08em;
  color:var(--mist);
}
.page-products .pp-board__stats{
  list-style:none;
  margin:0;
  padding:0;
}
.page-products .pp-board__stats li{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 16px;
  padding:16px 0;
  border-bottom:1px solid var(--grid);
}
.page-products .pp-board__stats li:last-child{border-bottom:0;padding-bottom:4px;}
.page-products .pp-board__big{
  font-size:clamp(2.1rem,5vw,2.9rem);
  color:var(--lime);
  line-height:1;
}
.page-products .pp-board__unit{font-size:.42em;margin-left:2px;}
.page-products .pp-board__cap{
  font-size:13px;
  line-height:1.5;
  color:var(--mist);
}

/* ---------- 四宫格总览 ---------- */
.page-products .pp-ov{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.page-products .pp-ov__card{
  position:relative;
  display:block;
  padding:22px 22px 24px;
  background:var(--ink);
  border:1px solid var(--grid);
  text-decoration:none;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);
  transition:background .28s var(--ease),transform .28s var(--ease);
}
.page-products .pp-ov__card:hover,
.page-products .pp-ov__card:focus-visible{
  background:var(--ink-3);
  transform:translateY(-3px);
}
.page-products .pp-ov__idx{
  display:block;
  font-size:12px;
  letter-spacing:.16em;
  color:var(--lime);
  margin-bottom:16px;
}
.page-products .pp-ov__card h3{color:var(--white);}
.page-products .pp-ov__stat{
  margin-top:8px;
  font-size:14px;
  color:var(--mist);
  font-variant-numeric:tabular-nums;
}
.page-products .pp-ov__stat .pp-num{color:var(--lime);font-size:1.1em;}
.page-products .pp-ov__q{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--grid);
  font-size:13.5px;
  line-height:1.65;
  color:var(--white);
  transition:opacity .3s var(--ease);
}

/* ---------- 实时比分 ---------- */
.page-products .pp-strip{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px 16px;
  background:var(--ink-3);
  border-left:4px solid var(--orange);
  padding:12px 16px;
}
.page-products .pp-strip__live{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  background:var(--orange);
  color:var(--ink);
  padding:3px 7px;
}
.page-products .pp-strip__match{
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.1em;
  color:var(--mist);
}
.page-products .pp-strip__score{
  font-size:clamp(1.8rem,4vw,2.4rem);
  color:var(--lime);
  line-height:1;
}
.page-products .pp-strip__colon{color:var(--mist);}
.page-products .pp-strip__min{
  font-size:14px;
  color:var(--orange);
  margin-left:auto;
}

.page-products .pp-seq{
  list-style:none;
  counter-reset:none;
  margin:20px 0 0;
  padding:0;
  display:grid;
  gap:1px;
  background:var(--grid);
  border:1px solid var(--grid);
}
.page-products .pp-seq li{
  display:flex;
  gap:14px;
  align-items:flex-start;
  background:var(--ink-2);
  padding:14px 16px;
  font-size:14.5px;
  line-height:1.65;
  color:var(--white);
}
.page-products .pp-seq__n{
  color:var(--lime);
  font-size:12px;
  letter-spacing:.1em;
  flex:none;
  padding-top:2px;
}

.page-products .pp-fig{
  margin:22px 0 0;
  position:relative;
  background:var(--ink-3);
  border:1px solid var(--grid);
  overflow:hidden;
}
.page-products .pp-fig img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:cover;
  opacity:.92;
}
.page-products .pp-fig--board{margin-top:22px;}
.page-products .pp-fig__cap{
  display:block;
  padding:12px 16px;
  font-size:13px;
  line-height:1.6;
  color:var(--mist);
  border-top:1px solid var(--grid);
}

/* ---------- 进失球分布 ---------- */
.page-products .pp-dist{
  position:relative;
  margin-top:26px;
  border:1px solid var(--grid);
  background:var(--ink);
  padding:18px 16px 20px;
}
.page-products .pp-dist__radio{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}
.page-products .pp-dist__tabs{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:22px;
}
.page-products .pp-dist__tabs label{
  cursor:pointer;
  padding:7px 14px;
  font-size:13px;
  letter-spacing:.04em;
  color:var(--mist);
  border:1px solid var(--grid);
  background:transparent;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.page-products .pp-dist__tabs label:hover{
  color:var(--white);
  border-color:var(--mist);
}
.page-products .pp-dist__pane{display:none;}

.page-products .pp-bars{
  display:flex;
  align-items:flex-end;
  gap:8px;
  height:172px;
  border-bottom:1px solid var(--grid);
}
.page-products .pp-bar{
  flex:1;
  min-height:4px;
  height:var(--h,10%);
  background:var(--lime);
  transition:height .5s var(--ease);
}
.page-products .pp-bar--alt{background:var(--cyan);}
.page-products .pp-ticks{
  display:flex;
  gap:8px;
  margin-top:8px;
}
.page-products .pp-ticks span{
  flex:1;
  text-align:center;
  font-size:10.5px;
  letter-spacing:.04em;
  color:var(--mist);
  line-height:1.35;
}
.page-products .pp-dist__read{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--grid);
  font-size:14px;
  line-height:1.7;
  color:var(--white);
}

.page-products #pp-dist-a:checked ~ .pp-dist__panes .pp-dist__pane[data-pane="a"],
.page-products #pp-dist-b:checked ~ .pp-dist__panes .pp-dist__pane[data-pane="b"],
.page-products #pp-dist-c:checked ~ .pp-dist__panes .pp-dist__pane[data-pane="c"]{
  display:block;
}
.page-products #pp-dist-a:checked ~ .pp-dist__tabs label[for="pp-dist-a"],
.page-products #pp-dist-b:checked ~ .pp-dist__tabs label[for="pp-dist-b"],
.page-products #pp-dist-c:checked ~ .pp-dist__tabs label[for="pp-dist-c"]{
  background:var(--lime);
  border-color:var(--lime);
  color:var(--ink);
  font-weight:600;
}

/* ---------- 主客场表现 ---------- */
.page-products .pp-ha{
  margin-top:26px;
  padding:20px 18px;
  border:1px solid var(--grid);
  background:var(--ink-2);
  display:grid;
  gap:14px;
}
.page-products .pp-ha__row{
  display:flex;
  align-items:center;
  gap:14px;
}
.page-products .pp-ha__k{
  flex:none;
  width:44px;
  font-size:12.5px;
  letter-spacing:.08em;
  color:var(--mist);
}
.page-products .pp-ha__track{
  flex:1;
  height:14px;
  background:var(--ink-3);
  border:1px solid var(--grid);
  display:block;
  overflow:hidden;
}
.page-products .pp-ha__fill{
  display:block;
  width:var(--w,50%);
  height:100%;
  background:var(--lime);
  transition:width .6s var(--ease);
}
.page-products .pp-ha__fill--alt{background:var(--orange);}
.page-products .pp-ha__scale{
  display:flex;
  justify-content:space-between;
  font-size:11px;
  letter-spacing:.08em;
  color:var(--mist);
  border-top:1px solid var(--grid);
  padding-top:10px;
}

/* ---------- 节奏中段宽块 ---------- */
.page-products .pp-wide{
  display:grid;
  gap:clamp(24px,4vw,46px);
}
.page-products .pp-wide__head .label{margin-bottom:14px;}
.page-products .pp-wide__head .pp-text{max-width:40em;}
.page-products .pp-wide__grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  background:var(--grid);
  border:1px solid var(--grid);
}
.page-products .pp-wide__grid li{
  background:var(--ink-3);
  padding:20px 18px;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 18px;
}
.page-products .pp-wide__n{
  font-size:clamp(1.9rem,4.4vw,2.6rem);
  line-height:1;
  color:var(--lime);
}
.page-products .pp-wide__plus{font-size:.42em;}
.page-products .pp-wide__cap{
  flex:1;
  min-width:180px;
  font-size:14px;
  line-height:1.6;
  color:var(--mist);
}
.page-products .pp-wide__link{
  justify-self:start;
  font-size:14px;
  color:var(--cyan);
  text-decoration:none;
  border-bottom:1px solid var(--cyan);
  padding-bottom:2px;
}
.page-products .pp-wide__link:hover{color:var(--lime);border-color:var(--lime);}

/* ---------- 专栏与订阅联动 ---------- */
.page-products .pp-flow{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:14px;
}
.page-products .pp-flow li{
  position:relative;
  padding:20px 20px 20px 22px;
  background:var(--ink-2);
  border:1px solid var(--grid);
  border-left:3px solid var(--grid);
  transition:border-left-color .25s var(--ease),background .25s var(--ease);
}
.page-products .pp-flow li:hover{
  border-left-color:var(--orange);
  background:var(--ink-3);
}
.page-products .pp-flow__n{
  display:block;
  font-size:11px;
  letter-spacing:.16em;
  color:var(--orange);
  margin-bottom:10px;
}
.page-products .pp-flow li h3{margin-bottom:8px;}
.page-products .pp-flow li p{
  font-size:14.5px;
  line-height:1.7;
  color:var(--mist);
}

/* ---------- 移动端看台 ---------- */
.page-products .pp-phone{
  width:min(290px,100%);
  margin:0 auto;
  padding:10px;
  background:var(--ink-3);
  border:1px solid var(--grid);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.page-products .pp-phone__screen{
  background:var(--ink);
  border:1px solid var(--grid);
  overflow:hidden;
}
.page-products .pp-phone__screen img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:cover;
}

/* ---------- 三步路径 ---------- */
.page-products .pp-path{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.page-products .pp-path__step{
  display:block;
  position:relative;
  padding:22px 20px;
  background:var(--ink-2);
  border:1px solid var(--grid);
  text-decoration:none;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.page-products .pp-path__step:hover,
.page-products .pp-path__step:focus-visible{
  background:var(--ink-3);
  border-color:var(--lime);
  transform:translateY(-2px);
}
.page-products .pp-path__n{
  display:block;
  font-size:26px;
  color:var(--lime);
  line-height:1;
  margin-bottom:14px;
}
.page-products .pp-path__step h3{margin-bottom:8px;}
.page-products .pp-path__step p{
  font-size:14.5px;
  line-height:1.7;
  color:var(--mist);
}

.page-products .pp-close{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  margin-top:clamp(30px,4.5vw,54px);
  padding-top:clamp(24px,4vw,40px);
  border-top:1px solid var(--grid);
  align-items:center;
}
.page-products .pp-fig--close{margin:0;}
.page-products .pp-close__line{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.4rem,3vw,2rem);
  letter-spacing:-.01em;
  color:var(--lime);
}
.page-products .pp-close__body .pp-text{margin-top:10px;}

/* ---------- 媒体查询 ---------- */
@media (min-width:760px){
  .page-products .pp-ov{grid-template-columns:1.15fr .85fr 1fr .95fr;gap:16px;}
  .page-products .pp-ov__card:nth-child(2){margin-top:34px;}
  .page-products .pp-ov__card:nth-child(4){margin-top:18px;}

  .page-products .pp-wide__grid{grid-template-columns:1fr 1fr;}

  .page-products .pp-path{grid-template-columns:repeat(3,1fr);}
  .page-products .pp-path__step:nth-child(2){margin-top:20px;}
  .page-products .pp-path__step:nth-child(3){margin-top:40px;}
}

@media (min-width:960px){
  .page-products .pp-hero__grid{grid-template-columns:7fr 5fr;}
  .page-products .pp-split{grid-template-columns:5fr 7fr;}
  .page-products .pp-split--rev{grid-template-columns:7fr 5fr;}
  .page-products .pp-wide{grid-template-columns:5fr 7fr;align-items:start;}
  .page-products .pp-close{grid-template-columns:7fr 5fr;}
}

@media (hover:hover) and (pointer:fine){
  .page-products .pp-ov__q{opacity:0;}
  .page-products .pp-ov__card:hover .pp-ov__q,
  .page-products .pp-ov__card:focus-visible .pp-ov__q,
  .page-products .pp-ov__card:focus-within .pp-ov__q{opacity:1;}
}

@media (prefers-reduced-motion:reduce){
  .page-products .pp-ov__card,
  .page-products .pp-bar,
  .page-products .pp-ha__fill,
  .page-products .pp-path__step,
  .page-products .pp-flow li,
  .page-products .pp-ov__q{transition:none;}
  .page-products .pp-ov__card:hover,
  .page-products .pp-path__step:hover{transform:none;}
}
<<<END>>>

.page-products {
  --h: 1rem;
  --w: 1rem;
}