.page-home{
  --home-hair:rgba(51,80,143,.5);
  --home-hair-soft:rgba(195,201,218,.14);
  --home-panel:rgba(16,28,62,.72);
  --home-gap:clamp(20px,3vw,40px);
  display:block;
  overflow-x:clip;
}

.page-home .section{
  padding-block:clamp(48px,7vw,104px);
}

/* ---------- 页面上下文 ---------- */
.page-home .home-context{
  padding-top:clamp(16px,3vw,26px);
}
.page-home .home-context__line{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0;
  font-size:12.5px;
  letter-spacing:.14em;
  color:var(--mist-300);
}
.page-home .home-context__line strong{
  color:var(--gold-300);
  font-weight:600;
}

/* ---------- 首屏 ---------- */
.page-home .home-open{
  position:relative;
  isolation:isolate;
  padding-top:clamp(22px,3.4vw,44px);
  background:
    radial-gradient(120% 82% at 84% -12%, rgba(217,164,65,.15), transparent 62%),
    linear-gradient(180deg, rgba(10,18,41,0) 0%, rgba(10,18,41,.55) 100%);
}
.page-home .home-open::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:repeating-linear-gradient(90deg, rgba(51,80,143,.16) 0 1px, transparent 1px 46px);
  opacity:.5;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 78%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 78%);
}
.page-home .home-open__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(26px,4vw,40px);
}

/* 窄栏 */
.page-home .home-open__rail{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:12px;
  letter-spacing:.18em;
  color:var(--mist-300);
}
.page-home .home-open__rail-note{
  color:var(--mist-300);
  font-size:12px;
  letter-spacing:.18em;
}
.page-home .home-open__issue{
  display:inline-flex;
  align-items:center;
  padding:5px 12px;
  border:1px solid rgba(217,164,65,.5);
  border-radius:999px;
  color:var(--gold-300);
  font-family:var(--font-sans);
  font-size:11.5px;
  letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* 标题与导语 */
.page-home .home-open__body h1{
  margin:14px 0 0;
  font-family:var(--font-serif);
  font-weight:800;
  font-size:clamp(30px,4.6vw,56px);
  line-height:1.24;
  letter-spacing:.02em;
  color:var(--snow-50);
  max-width:16em;
}
.page-home .home-open__body .lead{
  margin:20px 0 0;
  max-width:44em;
  font-size:clamp(16px,1.1vw,18px);
  line-height:1.85;
  color:var(--snow-50);
  opacity:.92;
}
.page-home .home-open__note{
  margin:16px 0 0;
  max-width:42em;
  color:var(--mist-300);
  font-size:14.5px;
  line-height:1.8;
}

/* 索引条带 */
.page-home .home-index{
  margin-top:clamp(26px,3.4vw,38px);
}
.page-home .home-index__title{
  margin:0 0 14px;
  font-size:12.5px;
  letter-spacing:.2em;
  color:var(--gold-300);
}
.page-home .home-index__list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
.page-home .home-index__item{
  position:relative;
}
.page-home .home-index__link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 18px;
  border:1px solid var(--home-hair);
  border-radius:999px;
  background:rgba(30,49,96,.5);
  color:var(--snow-50);
  font-size:14px;
  letter-spacing:.02em;
  text-decoration:none;
  transition:border-color .28s ease, background-color .28s ease, color .28s ease;
}
.page-home .home-index__link::after{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--banner-cyan);
  transition:background-color .28s ease;
}
.page-home .home-index__item--lib .home-index__link::after{background:var(--banner-cyan);}
.page-home .home-index__item--fit .home-index__link::after{background:var(--banner-green);}
.page-home .home-index__item--log .home-index__link::after{background:var(--banner-yellow);}
.page-home .home-index__item--v4 .home-index__link::after{background:var(--banner-red);}
.page-home .home-index__link:hover,
.page-home .home-index__link:focus-visible{
  border-color:var(--gold-500);
  background:rgba(30,49,96,.92);
  color:var(--gold-300);
}
.page-home .home-index__link:focus-visible{
  outline:2px solid var(--gold-500);
  outline-offset:2px;
}
.page-home .home-index__pop{
  position:absolute;
  left:0;
  top:calc(100% + 10px);
  z-index:6;
  width:max-content;
  max-width:min(300px,74vw);
  padding:14px 16px;
  border:1px solid var(--home-hair);
  border-radius:var(--radius-sm);
  background:var(--ink-950);
  color:var(--mist-300);
  font-size:13px;
  line-height:1.75;
  letter-spacing:.01em;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .28s ease, transform .28s ease, visibility .28s ease;
}
.page-home .home-index__item:hover .home-index__pop,
.page-home .home-index__item:focus-within .home-index__pop{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* 状态面板 */
.page-home .home-open__console{
  margin-top:clamp(28px,3.6vw,42px);
}

/* 首屏配图 */
.page-home .home-open__media{
  margin:0;
  aspect-ratio:4/5;
  border:1px solid var(--home-hair);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:linear-gradient(180deg, var(--ink-700), var(--ink-950));
}
.page-home .home-open__media .media__img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:cover;
}

/* ---------- 三条路径 ---------- */
.page-home .home-layers{
  position:relative;
  padding:clamp(28px,4.4vw,60px) clamp(20px,3vw,48px);
  border:1px solid var(--home-hair);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:linear-gradient(165deg, rgba(10,18,41,.96), rgba(16,28,62,.86));
}
.page-home .home-layers__bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.page-home .home-layers__bg img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:cover;
  opacity:.16;
}
.page-home .home-layers__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(90% 70% at 14% 0%, rgba(46,140,158,.18), transparent 62%),
    linear-gradient(170deg, rgba(10,18,41,.68), rgba(10,18,41,.94));
}
.page-home .home-layers__inner{
  position:relative;
  z-index:1;
}
.page-home .home-layers__lead{
  margin:16px 0 0;
  max-width:48em;
  color:var(--mist-300);
  font-size:15.5px;
  line-height:1.85;
}
.page-home .home-layers__grid{
  margin-top:clamp(28px,3.6vw,44px);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(16px,2vw,22px);
}
.page-home .home-layer{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--home-hair-soft);
  border-top:3px solid var(--banner-cyan);
  border-radius:var(--radius-md);
  background:rgba(10,18,41,.66);
  transition:transform .4s ease, border-color .4s ease;
}
.page-home .home-layer--lib{border-top-color:var(--banner-cyan);}
.page-home .home-layer--fit{border-top-color:var(--banner-green);}
.page-home .home-layer--log{border-top-color:var(--banner-yellow);}
.page-home .home-layer:hover{transform:translateY(-3px);}
.page-home .home-layer__no{
  margin:0;
  font-family:var(--font-sans);
  font-size:12px;
  letter-spacing:.2em;
  color:var(--mist-300);
  font-variant-numeric:tabular-nums;
}
.page-home .home-layer__title{
  margin:0;
  font-family:var(--font-serif);
  font-weight:700;
  font-size:clamp(19px,1.7vw,23px);
  line-height:1.5;
  color:var(--snow-50);
}
.page-home .home-layer__text{
  margin:0;
  color:var(--mist-300);
  font-size:14.5px;
  line-height:1.85;
}
.page-home .home-layer__meta{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:2px 0 0;
  padding:0;
  list-style:none;
  font-size:13px;
  color:var(--mist-300);
}
.page-home .home-layer__meta li{
  position:relative;
  padding-left:14px;
  line-height:1.7;
}
.page-home .home-layer__meta li::before{
  content:"";
  position:absolute;
  left:0;
  top:.66em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--gold-500);
}
.page-home .home-layer__link{
  margin-top:auto;
  align-self:flex-start;
  padding-bottom:2px;
  color:var(--gold-300);
  font-size:14px;
  text-decoration:none;
  border-bottom:1px solid rgba(240,206,134,.4);
  transition:color .28s ease, border-color .28s ease;
}
.page-home .home-layer__link:hover{
  color:var(--gold-500);
  border-bottom-color:var(--gold-500);
}
.page-home .home-layer__link:focus-visible{
  outline:2px solid var(--gold-500);
  outline-offset:3px;
}

/* ---------- 本期推荐 ---------- */
.page-home .home-picks__grid{
  margin-top:clamp(28px,3.6vw,44px);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(16px,2vw,22px);
}
.page-home .home-pick{
  position:relative;
  padding:clamp(22px,2.6vw,32px);
  border:1px solid var(--home-hair-soft);
  border-radius:var(--radius-md);
  overflow:hidden;
  background:linear-gradient(200deg, rgba(30,49,96,.6), rgba(10,18,41,.74));
}
.page-home .home-pick--a::before,
.page-home .home-pick--d::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
}
.page-home .home-pick--a::before{background:var(--banner-cyan);}
.page-home .home-pick--d::before{background:var(--banner-yellow);}
.page-home .home-pick--b::before,
.page-home .home-pick--c::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
}
.page-home .home-pick--b::before{background:var(--banner-red);}
.page-home .home-pick--c::before{background:var(--banner-green);}
.page-home .home-pick__kicker{
  margin:0;
  font-size:12px;
  letter-spacing:.14em;
  color:var(--mist-300);
}
.page-home .home-pick__title{
  margin:12px 0 0;
  font-family:var(--font-serif);
  font-weight:700;
  font-size:clamp(20px,1.8vw,25px);
  line-height:1.44;
  color:var(--snow-50);
}
.page-home .home-pick__for{
  margin:12px 0 0;
  font-size:13.5px;
  letter-spacing:.02em;
  color:var(--gold-300);
}
.page-home .home-pick__text{
  margin:10px 0 0;
  color:var(--mist-300);
  font-size:14.5px;
  line-height:1.85;
}
.page-home .home-pick__link{
  display:inline-block;
  margin-top:18px;
  padding-bottom:2px;
  color:var(--gold-300);
  font-size:14px;
  text-decoration:none;
  border-bottom:1px solid rgba(240,206,134,.4);
  transition:color .28s ease, border-color .28s ease;
}
.page-home .home-pick__link:hover{
  color:var(--gold-500);
  border-bottom-color:var(--gold-500);
}
.page-home .home-pick__link:focus-visible{
  outline:2px solid var(--gold-500);
  outline-offset:3px;
}

/* ---------- 更新记录 ---------- */
.page-home .home-log__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(28px,4vw,56px);
}
.page-home .home-log__lead{
  margin:14px 0 0;
  max-width:30em;
  color:var(--mist-300);
  font-size:15px;
  line-height:1.85;
}
.page-home .home-log__media{
  margin:clamp(22px,3vw,32px) 0 0;
  max-width:320px;
  aspect-ratio:1/1;
  border:1px solid var(--home-hair-soft);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:linear-gradient(180deg, var(--ink-700), var(--ink-950));
}
.page-home .home-log__media .media__img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:cover;
}
.page-home .home-log__aside .btn{
  margin-top:22px;
}
.page-home .home-log__list{
  margin:0;
  padding:0 0 0 22px;
  list-style:none;
  border-left:1px solid var(--home-hair);
}
.page-home .home-log__item{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:6px;
  padding:16px 0;
  border-bottom:1px solid var(--home-hair-soft);
}
.page-home .home-log__item::before{
  content:"";
  position:absolute;
  left:-22px;
  top:22px;
  width:9px;
  height:9px;
  transform:translateX(-50%);
  border:2px solid var(--gold-500);
  border-radius:50%;
  background:var(--ink-900);
}
.page-home .home-log__item:first-child::before{
  background:var(--gold-500);
  box-shadow:0 0 0 4px rgba(217,164,65,.18);
}
.page-home .home-log__issue{
  font-family:var(--font-sans);
  font-size:12.5px;
  letter-spacing:.1em;
  color:var(--gold-300);
  font-variant-numeric:tabular-nums;
}
.page-home .home-log__topic{
  color:var(--snow-50);
  font-size:15px;
  line-height:1.7;
}
.page-home .home-log__scope{
  color:var(--mist-300);
  font-size:12.5px;
  letter-spacing:.04em;
}

/* ---------- 服务网络 ---------- */
.page-home .home-reach__head{
  max-width:62em;
}
.page-home .home-reach__head p{
  margin:14px 0 0;
  color:var(--mist-300);
  font-size:15.5px;
  line-height:1.85;
}
.page-home .home-reach__grid{
  margin-top:clamp(28px,3.6vw,44px);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0 clamp(16px,2.4vw,32px);
}
.page-home .home-reach__item{
  padding:20px 0 24px;
  border-top:1px solid var(--home-hair);
}
.page-home .home-reach__num{
  display:block;
  font-family:var(--font-sans);
  font-weight:600;
  font-size:clamp(30px,3.4vw,44px);
  line-height:1.1;
  letter-spacing:-.01em;
  color:var(--gold-500);
  font-variant-numeric:tabular-nums;
}
.page-home .home-reach__unit{
  margin-left:6px;
  font-size:.42em;
  letter-spacing:.06em;
  color:var(--gold-300);
}
.page-home .home-reach__label{
  display:block;
  margin-top:10px;
  color:var(--snow-50);
  font-size:15px;
  letter-spacing:.01em;
}
.page-home .home-reach__desc{
  display:block;
  margin-top:6px;
  color:var(--mist-300);
  font-size:13.5px;
  line-height:1.75;
}
.page-home .home-reach__foot{
  margin:clamp(24px,3vw,36px) 0 0;
  padding-top:20px;
  max-width:60em;
  border-top:1px solid var(--home-hair-soft);
  color:var(--mist-300);
  font-size:14px;
  line-height:1.85;
}

/* ---------- 常用页与收藏 ---------- */
.page-home .home-save__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(26px,4vw,52px);
}
.page-home .home-save__intro p{
  margin:14px 0 0;
  max-width:32em;
  color:var(--mist-300);
  font-size:15px;
  line-height:1.85;
}
.page-home .home-save__list{
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--home-hair);
}
.page-home .home-save__item{
  display:grid;
  gap:6px;
  padding:18px 0;
  border-bottom:1px solid var(--home-hair-soft);
}
.page-home .home-save__link{
  justify-self:start;
  font-family:var(--font-serif);
  font-size:17px;
  letter-spacing:.02em;
  color:var(--snow-50);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .28s ease, border-color .28s ease;
}
.page-home .home-save__link:hover{
  color:var(--gold-300);
  border-bottom-color:rgba(240,206,134,.5);
}
.page-home .home-save__link:focus-visible{
  outline:2px solid var(--gold-500);
  outline-offset:3px;
}
.page-home .home-save__desc{
  color:var(--mist-300);
  font-size:14px;
  line-height:1.8;
}

/* ---------- 下一步 ---------- */
.page-home .home-start__grid{
  margin-top:clamp(28px,3.6vw,44px);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(18px,2.4vw,26px);
}
.page-home .home-start__card{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:clamp(24px,3vw,36px);
  border:1px solid var(--home-hair-soft);
  border-radius:var(--radius-lg);
  background:rgba(16,28,62,.5);
}
.page-home .home-start__card--gold{
  border-color:rgba(217,164,65,.44);
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(217,164,65,.2), transparent 58%),
    linear-gradient(180deg, rgba(30,49,96,.8), rgba(10,18,41,.86));
}
.page-home .home-start__no{
  margin:0;
  font-family:var(--font-sans);
  font-size:12px;
  letter-spacing:.2em;
  color:var(--gold-300);
}
.page-home .home-start__card h3{
  margin:0;
  font-family:var(--font-serif);
  font-weight:700;
  font-size:clamp(20px,1.9vw,26px);
  line-height:1.42;
  color:var(--snow-50);
}
.page-home .home-start__card p{
  margin:0;
  color:var(--mist-300);
  font-size:14.5px;
  line-height:1.85;
}
.page-home .home-start__card .btn{
  margin-top:auto;
  align-self:flex-start;
}

/* ---------- 收尾横图 ---------- */
.page-home .home-band{
  padding-bottom:clamp(56px,7vw,108px);
}
.page-home .home-band__media{
  margin:0;
  aspect-ratio:16/9;
  border:1px solid var(--home-hair-soft);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:linear-gradient(180deg, var(--ink-700), var(--ink-950));
}
.page-home .home-band__media img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:cover;
}

/* ---------- 显现 ---------- */
@media (prefers-reduced-motion: no-preference){
  .page-home .reveal{
    opacity:0;
    transform:translateY(12px);
    transition:opacity .6s ease-out, transform .6s ease-out;
  }
  .page-home .reveal.is-visible{
    opacity:1;
    transform:none;
  }
}

/* ---------- 响应式 ---------- */
@media (min-width:640px){
  .page-home .home-reach__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .page-home .home-band__media{
    aspect-ratio:3/1;
  }
}

@media (min-width:700px){
  .page-home .home-log__item{
    grid-template-columns:100px minmax(0,1fr) 170px;
    gap:16px;
    align-items:baseline;
  }
  .page-home .home-save__item{
    grid-template-columns:minmax(160px,3fr) minmax(0,7fr);
    gap:18px;
    align-items:baseline;
  }
}

@media (min-width:860px){
  .page-home .home-layers__grid{
    grid-template-columns:repeat(12,minmax(0,1fr));
    align-items:stretch;
  }
  .page-home .home-layer--lib{grid-column:span 5;}
  .page-home .home-layer--fit{grid-column:span 3;}
  .page-home .home-layer--log{grid-column:span 4;}

  .page-home .home-picks__grid{
    grid-template-columns:repeat(12,minmax(0,1fr));
  }
  .page-home .home-pick--a{grid-column:span 7;}
  .page-home .home-pick--b{grid-column:span 5;}
  .page-home .home-pick--c{grid-column:span 5;}
  .page-home .home-pick--d{grid-column:span 7;}

  .page-home .home-start__grid{
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  }
}

@media (min-width:960px){
  .page-home .home-log__grid{
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    align-items:start;
  }
  .page-home .home-save__grid{
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    align-items:start;
  }
  .page-home .home-reach__grid{
    grid-template-columns:repeat(12,minmax(0,1fr));
  }
  .page-home .home-reach__item:nth-child(1){grid-column:span 5;}
  .page-home .home-reach__item:nth-child(2){grid-column:span 4;}
  .page-home .home-reach__item:nth-child(3){grid-column:span 3;}
  .page-home .home-reach__item:nth-child(4){grid-column:span 3;}
  .page-home .home-reach__item:nth-child(5){grid-column:span 4;}
  .page-home .home-reach__item:nth-child(6){grid-column:span 5;}
}

@media (min-width:1000px){
  .page-home .home-open__grid{
    grid-template-columns:52px minmax(0,1fr) minmax(300px,380px);
    column-gap:clamp(22px,2.6vw,40px);
    align-items:start;
  }
  .page-home .home-open__rail{
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    padding-top:8px;
  }
  .page-home .home-open__rail-note{
    writing-mode:vertical-rl;
    text-orientation:mixed;
    letter-spacing:.22em;
    padding-block:6px;
  }
}

@media (min-width:1200px){
  .page-home .home-band__media{
    aspect-ratio:4/1;
  }
}
<<<END>>>