.page-home{
  --ph-line:rgba(156,181,168,.22);
  --ph-ripple:rgba(87,167,163,.16);
  background:var(--deep-ink);
  color:var(--paper-100);
  font-family:var(--font-body);
  line-height:1.75;
  padding-bottom:56px;
}
.page-home *{box-sizing:border-box}
.page-home a{color:inherit}
.page-home .bl-shell{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 16px;
}
.page-home .ph-num{
  font-family:var(--font-mono);
  letter-spacing:.04em;
}

/* 上下文提示 */
.page-home .ph-context{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  padding:16px 0 0;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--sage-300);
}
.page-home .ph-context span+span::before{
  content:"/";
  margin-right:8px;
  color:var(--moss-500);
}

/* 首屏框景 */
.page-home .ph-hero{
  display:grid;
  grid-template-columns:1fr;
  margin-top:14px;
  border:3px solid var(--pine-700);
  background:var(--pine-900);
  box-shadow:var(--shadow);
}
.page-home .ph-hero__brand{
  padding:24px 20px 26px;
  border-bottom:3px solid var(--pine-700);
}
.page-home .ph-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--amber-200);
}
.page-home .ph-kicker::before{
  content:"";
  width:24px;
  height:2px;
  background:var(--copper-600);
}
.page-home .ph-hero__title{
  margin:14px 0 16px;
  font-family:var(--font-display);
  font-size:clamp(34px,7.6vw,58px);
  font-weight:800;
  line-height:1.16;
  letter-spacing:.02em;
  color:var(--bone-50);
}
.page-home .ph-hero__mark{
  border-bottom:6px solid var(--copper-600);
}
.page-home .ph-hero__lede{
  margin:0 0 12px;
  font-size:15px;
  color:var(--paper-100);
  max-width:44ch;
}
.page-home .ph-hero__lede--dim{
  color:var(--sage-300);
  font-size:14px;
}
.page-home .ph-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:22px 0 24px;
}
.page-home .ph-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 20px;
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  border:2px solid var(--amber-500);
  transition:transform .18s var(--ease),background-color .18s var(--ease),color .18s var(--ease);
}
.page-home .ph-btn--solid{
  background:var(--amber-500);
  color:var(--deep-ink);
  box-shadow:4px 4px 0 rgba(0,0,0,.5);
}
.page-home .ph-btn--ghost{
  background:transparent;
  color:var(--amber-200);
}
.page-home .ph-btn:hover{transform:translate(-2px,-2px)}
.page-home .ph-btn--solid:hover{background:var(--amber-200);border-color:var(--amber-200)}
.page-home .ph-btn--ghost:hover{background:rgba(217,154,61,.14)}
.page-home .ph-facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:0;
  padding-top:16px;
  border-top:1px solid var(--ph-line);
}
.page-home .ph-facts__item dt{
  font-size:11px;
  letter-spacing:.12em;
  color:var(--sage-300);
}
.page-home .ph-facts__item dd{
  margin:4px 0 0;
  font-size:14px;
  color:var(--amber-200);
}
.page-home .ph-facts__item .ph-num{
  font-size:19px;
  font-weight:700;
}

.page-home .ph-hero__board{
  display:grid;
  gap:16px;
  align-content:start;
  padding:16px;
  background-image:
    repeating-linear-gradient(0deg,transparent 0 44px,var(--ph-ripple) 44px 45px),
    repeating-linear-gradient(90deg,transparent 0 44px,var(--ph-ripple) 44px 45px);
  background-color:var(--pine-900);
}
.page-home .ph-frame{
  position:relative;
  margin:0;
  border:3px solid var(--copper-600);
  background:var(--deep-ink);
  box-shadow:8px 8px 0 rgba(0,0,0,.5);
}
.page-home .ph-frame img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  aspect-ratio:4 / 3;
  object-fit:cover;
}
.page-home .ph-frame__cap{
  padding:10px 12px;
  border-top:2px solid var(--copper-600);
  background:var(--deep-ink);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--sage-300);
}
.page-home .ph-entry{
  padding:16px 18px 18px;
  border:2px solid var(--pine-700);
  background:var(--bone-50);
  color:var(--ink-900);
  box-shadow:6px 6px 0 rgba(0,0,0,.45);
}
.page-home .ph-entry__h{
  margin:0 0 10px;
  font-family:var(--font-display);
  font-size:16px;
  font-weight:800;
  letter-spacing:.02em;
}
.page-home .ph-lines{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
}
.page-home .ph-lines li{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:14px;
  color:var(--ink-900);
}
.page-home .ph-lines .ph-num{color:var(--copper-600);font-size:13px}
.page-home .ph-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--moss-500);
  box-shadow:0 0 0 3px rgba(87,167,163,.18);
  flex:0 0 auto;
}
.page-home .ph-dot--on{background:var(--ripple-400)}
.page-home .ph-entry__note{
  margin:12px 0 0;
  font-size:13px;
  line-height:1.65;
  color:var(--ink-900);
  opacity:.78;
}
.page-home .ph-entry__link{
  display:inline-block;
  margin-top:12px;
  font-size:13px;
  font-weight:700;
  color:var(--copper-600);
  text-decoration:none;
  border-bottom:2px solid var(--amber-500);
  padding-bottom:2px;
}
.page-home .ph-entry__link:hover{color:var(--pine-700)}

/* 章节 */
.page-home .ph-sec{
  margin-top:44px;
  padding-top:36px;
  border-top:1px solid var(--ph-line);
}
.page-home .ph-sec__head{margin-bottom:4px}
.page-home .ph-sec__title{
  margin:12px 0 12px;
  font-family:var(--font-display);
  font-size:clamp(24px,4.8vw,36px);
  font-weight:800;
  line-height:1.3;
  color:var(--bone-50);
}
.page-home .ph-sec__lede{
  margin:0;
  max-width:60ch;
  font-size:15px;
  color:var(--sage-300);
}

/* 四步 */
.page-home .ph-steps{
  list-style:none;
  margin:26px 0 0;
  padding:0;
  display:grid;
  gap:14px;
}
.page-home .ph-step{
  padding:18px 18px 16px;
  background:var(--paper-100);
  color:var(--ink-900);
  border:2px solid var(--pine-700);
  border-left:6px solid var(--amber-500);
  box-shadow:5px 5px 0 rgba(0,0,0,.5);
}
.page-home .ph-step:nth-child(even){
  background:var(--bone-50);
  border-left-color:var(--copper-600);
}
.page-home .ph-step__no{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--copper-600);
}
.page-home .ph-step h3{
  margin:6px 0 8px;
  font-family:var(--font-display);
  font-size:19px;
  font-weight:800;
  color:var(--ink-900);
}
.page-home .ph-step p{
  margin:0;
  font-size:14.5px;
  line-height:1.7;
  color:var(--ink-900);
  opacity:.82;
}
.page-home .ph-step__link{
  display:inline-block;
  margin-top:12px;
  padding-bottom:2px;
  font-size:13px;
  font-weight:700;
  color:var(--copper-600);
  text-decoration:none;
  border-bottom:2px solid var(--amber-500);
}
.page-home .ph-step__link:hover{color:var(--ink-900)}

.page-home .ph-figure{
  margin:22px 0 0;
  border:2px solid var(--pine-700);
  background:var(--pine-900);
  box-shadow:6px 6px 0 rgba(0,0,0,.45);
}
.page-home .ph-figure img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  max-height:340px;
  object-fit:cover;
}
.page-home .ph-figure figcaption{
  padding:10px 14px;
  border-top:1px solid var(--ph-line);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--sage-300);
}

/* 段位刻度 */
.page-home .ph-scale{
  list-style:none;
  margin:26px 0 0;
  padding:0;
  display:grid;
  gap:6px;
}
.page-home .ph-rank{
  display:grid;
  grid-template-columns:2.2rem 1fr;
  gap:0 12px;
  padding:10px 14px;
  border-left:3px solid var(--moss-500);
  background:linear-gradient(90deg,rgba(27,74,56,.85),rgba(15,43,33,.25));
}
.page-home .ph-rank:nth-child(2){border-left-width:5px}
.page-home .ph-rank:nth-child(3){border-left-width:7px}
.page-home .ph-rank:nth-child(4){border-left-width:9px}
.page-home .ph-rank:nth-child(5){border-left-width:11px}
.page-home .ph-rank:nth-child(6){border-left-width:13px}
.page-home .ph-rank:nth-child(7){
  border-left-width:15px;
  border-left-color:var(--amber-500);
  background:linear-gradient(90deg,rgba(217,154,61,.26),rgba(15,43,33,.25));
}
.page-home .ph-rank__no{
  grid-row:1 / span 2;
  align-self:center;
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--amber-200);
}
.page-home .ph-rank__name{
  font-family:var(--font-display);
  font-size:16px;
  font-weight:700;
  color:var(--bone-50);
}
.page-home .ph-rank__note{
  font-size:13px;
  line-height:1.6;
  color:var(--sage-300);
}
.page-home .ph-note{
  margin:18px 0 0;
  padding:16px 18px;
  border:2px dashed var(--moss-500);
  background:rgba(87,167,163,.08);
  font-size:14px;
  line-height:1.75;
  color:var(--paper-100);
}
.page-home .ph-note a{
  display:inline-block;
  margin-top:6px;
  color:var(--amber-200);
  font-weight:700;
  text-decoration:none;
  border-bottom:1px solid var(--copper-600);
}

/* 记录 */
.page-home .ph-rec{
  display:grid;
  gap:20px;
  margin-top:24px;
}
.page-home .ph-drawer{
  border:3px solid var(--pine-700);
  background:var(--paper-100);
  color:var(--ink-900);
  box-shadow:var(--shadow);
}
.page-home .ph-drawer__toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  background:var(--pine-700);
  color:var(--bone-50);
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  list-style:none;
}
.page-home .ph-drawer__toggle::-webkit-details-marker{display:none}
.page-home .ph-drawer__toggle::after{
  content:"+";
  font-family:var(--font-mono);
  font-size:18px;
  color:var(--amber-200);
}
.page-home .ph-drawer[open] .ph-drawer__toggle::after{content:"−"}
.page-home .ph-drawer__body{padding:16px}
.page-home .ph-rec__steps{
  margin:0;
  padding-left:20px;
  display:grid;
  gap:8px;
  font-size:14.5px;
  line-height:1.7;
  color:var(--ink-900);
}
.page-home .ph-rec__steps li::marker{
  font-family:var(--font-mono);
  color:var(--copper-600);
}
.page-home .ph-drawer__hint{
  margin:14px 0 0;
  padding-top:12px;
  border-top:1px solid rgba(22,32,27,.16);
  font-size:13px;
  line-height:1.65;
  color:var(--ink-900);
  opacity:.78;
}
.page-home .ph-rec__more{margin:16px 0 0;font-size:14px}
.page-home .ph-rec__more a{
  color:var(--amber-200);
  font-weight:700;
  text-decoration:none;
  border-bottom:1px solid var(--copper-600);
}
.page-home .ph-figure--tall img{max-height:none;aspect-ratio:1 / 1}

/* 内容库 */
.page-home .ph-stats{
  list-style:none;
  margin:24px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.page-home .ph-stats li{
  padding:14px;
  border:2px solid var(--pine-700);
  background:linear-gradient(160deg,rgba(27,74,56,.9),rgba(8,23,18,.92));
}
.page-home .ph-stats b{
  display:block;
  font-family:var(--font-mono);
  font-size:26px;
  line-height:1.2;
  color:var(--amber-200);
}
.page-home .ph-stats span{
  display:block;
  margin-top:4px;
  font-size:13px;
  line-height:1.6;
  color:var(--sage-300);
}
.page-home .ph-read{
  display:grid;
  gap:14px;
  margin-top:20px;
}
.page-home .ph-read__card{
  padding:20px 18px;
  border:2px solid var(--pine-700);
  border-top:5px solid var(--amber-500);
  background:var(--paper-100);
  color:var(--ink-900);
  box-shadow:5px 5px 0 rgba(0,0,0,.45);
}
.page-home .ph-read__tag{
  margin:0 0 8px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--copper-600);
}
.page-home .ph-read__card h3{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-size:19px;
  font-weight:800;
  color:var(--ink-900);
}
.page-home .ph-read__card p{
  margin:0;
  font-size:14.5px;
  line-height:1.7;
  color:var(--ink-900);
  opacity:.82;
}
.page-home .ph-read__card a{
  display:inline-block;
  margin-top:12px;
  font-size:13px;
  font-weight:700;
  color:var(--copper-600);
  text-decoration:none;
  border-bottom:2px solid var(--amber-500);
  padding-bottom:2px;
}
.page-home .ph-read__card a:hover{color:var(--ink-900)}
.page-home .ph-figure--glow{margin-top:0;border-color:var(--copper-600)}
.page-home .ph-figure--glow img{max-height:260px}

/* 收束 */
.page-home .ph-close{
  margin-top:48px;
  padding:26px 20px;
  border:3px solid var(--amber-500);
  background:linear-gradient(140deg,rgba(217,154,61,.16),rgba(8,23,18,.92));
  box-shadow:var(--shadow);
}
.page-home .ph-close__title{
  margin:0 0 10px;
  font-family:var(--font-display);
  font-size:clamp(22px,4.4vw,30px);
  font-weight:800;
  color:var(--bone-50);
}
.page-home .ph-close__lede{
  margin:0 0 18px;
  max-width:58ch;
  font-size:14.5px;
  color:var(--sage-300);
}
.page-home .ph-close__links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.page-home .ph-close__links a{
  padding:9px 16px;
  border:2px solid var(--pine-700);
  background:rgba(15,43,33,.8);
  font-size:14px;
  font-weight:700;
  color:var(--paper-100);
  text-decoration:none;
  transition:border-color .18s var(--ease),color .18s var(--ease);
}
.page-home .ph-close__links a:hover{
  border-color:var(--amber-500);
  color:var(--amber-200);
}
.page-home .ph-close__meta{
  margin:18px 0 0;
  font-size:13px;
  line-height:1.8;
  color:var(--sage-300);
}
.page-home .ph-close__meta a{
  color:var(--amber-200);
  text-decoration:none;
  border-bottom:1px solid var(--copper-600);
}
.page-home .ph-close__legal{
  display:flex;
  gap:10px;
  margin:10px 0 0;
  font-size:12px;
  color:var(--moss-500);
}
.page-home .ph-close__legal a{
  color:var(--sage-300);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.page-home .ph-close__legal a:hover{color:var(--amber-200);border-bottom-color:var(--copper-600)}

@media (min-width:720px){
  .page-home .ph-steps{grid-template-columns:1fr 1fr}
  .page-home .ph-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .page-home .ph-read{grid-template-columns:1fr 1fr}
  .page-home .ph-figure--glow{grid-column:1 / -1}
}

@media (min-width:900px){
  .page-home .bl-shell{padding:0 24px}
  .page-home .ph-hero{grid-template-columns:34% 1fr}
  .page-home .ph-hero__brand{
    padding:36px 26px 32px;
    border-bottom:0;
    border-right:3px solid var(--pine-700);
  }
  .page-home .ph-hero__board{padding:26px;gap:20px}
  .page-home .ph-entry{
    margin-left:auto;
    width:84%;
    margin-top:-6px;
  }
  .page-home .ph-sec{margin-top:56px;padding-top:44px}
  .page-home .ph-rec{grid-template-columns:1.35fr .85fr;align-items:start}
  .page-home .ph-rec .ph-figure{margin-top:0}
  .page-home .ph-sec__lede{font-size:16px}
}

@media (min-width:1100px){
  .page-home .ph-hero__brand{padding:44px 32px 38px}
  .page-home .ph-hero__lede{font-size:16px}
  .page-home .ph-scale{gap:8px}
  .page-home .ph-rank{padding:12px 18px}
}

@media (prefers-reduced-motion:reduce){
  .page-home .ph-btn,
  .page-home .ph-close__links a{
    transition:none;
  }
  .page-home .ph-btn:hover{transform:none}
}
<<<END>>>