.page-home{
  --home-panel:rgba(15,18,25,.9);
  --home-line:rgba(139,92,246,.28);
  --home-line-soft:rgba(155,161,180,.18);
  --home-block:clamp(28px,5vw,72px);
  background:var(--bg);
  color:var(--text);
  overflow-x:clip;
  padding-top:clamp(78px,9vw,116px);
}

.page-home a{ color:inherit; }

/* ---------- Hero ---------- */
.page-home .hero{
  position:relative;
  padding:clamp(14px,2.5vw,28px) 0 clamp(30px,5vw,64px);
}

.page-home .hero::before{
  content:"";
  position:absolute;
  inset:-10% -6% 0 -6%;
  background:
    radial-gradient(58% 66% at 16% 10%, rgba(139,92,246,.30), transparent 68%),
    radial-gradient(46% 58% at 94% 6%, rgba(56,189,248,.20), transparent 72%),
    radial-gradient(30% 40% at 62% 96%, rgba(255,77,157,.12), transparent 74%);
  pointer-events:none;
}

.page-home .hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  gap:clamp(24px,3.4vw,46px);
}

.page-home .hero-copy{ min-width:0; }

.page-home .hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:.7em;
  margin:0;
  padding:6px 14px;
  border-radius:var(--radius-pill);
  border:1px solid var(--home-line);
  background:rgba(139,92,246,.10);
  color:var(--violet-soft);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.page-home .hero h1{
  margin:.45em 0 .42em;
  font-size:clamp(30px,6.6vw,58px);
  line-height:1.08;
  font-weight:900;
  letter-spacing:-.02em;
  text-wrap:balance;
}

.page-home .hero-lede{
  margin:0;
  max-width:46ch;
  color:var(--text-dim);
  font-size:clamp(15px,1.7vw,17px);
  line-height:1.9;
}

.page-home .hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:clamp(20px,3vw,30px);
}

.page-home .hero-visual{
  position:relative;
  margin:0;
  border-radius:var(--radius-lg);
  border:1px solid var(--home-line);
  background:var(--bg-card);
  box-shadow:var(--glow-violet);
  overflow:hidden;
}

.page-home .hero-visual img{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:3/4;
  max-height:520px;
  object-fit:cover;
}

.page-home .hero-visual figcaption{
  position:absolute;
  left:14px;
  bottom:14px;
  padding:5px 12px;
  border-radius:var(--radius-pill);
  border:1px solid rgba(196,181,253,.35);
  background:rgba(5,6,10,.72);
  color:var(--violet-soft);
  font-size:11px;
  letter-spacing:.12em;
  backdrop-filter:blur(6px);
}

@media (min-width:900px){
  .page-home .hero-grid{
    grid-template-columns:minmax(0,1.06fr) minmax(260px,.68fr);
    align-items:end;
  }
  .page-home .hero-visual img{ max-height:none; }
}

/* ---------- Quick bar ---------- */
.page-home .quickbar{
  border-top:1px solid var(--home-line-soft);
  border-bottom:1px solid var(--home-line-soft);
  background:linear-gradient(180deg, rgba(15,18,25,.92), rgba(5,6,10,.55));
}

.page-home .quick-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
}

.page-home .quick-list li + li{ border-top:1px solid var(--home-line-soft); }

.page-home .quick-list a{
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:clamp(18px,2.4vw,26px) clamp(14px,2vw,24px);
  text-decoration:none;
  transition:background .25s ease, box-shadow .25s ease;
}

.page-home .quick-list a:hover,
.page-home .quick-list a:focus-visible{
  background:rgba(139,92,246,.14);
  box-shadow:inset 0 0 0 1px rgba(56,189,248,.32);
}

.page-home .quick-num{
  color:var(--violet);
  font-size:12px;
  letter-spacing:.2em;
}

.page-home .quick-name{
  font-size:clamp(16px,1.8vw,18px);
  font-weight:800;
  letter-spacing:-.01em;
}

.page-home .quick-desc{
  color:var(--text-dim);
  font-size:13.5px;
  line-height:1.75;
}

@media (min-width:780px){
  .page-home .quick-list{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .page-home .quick-list li + li{
    border-top:0;
    border-left:1px solid var(--home-line-soft);
  }
}

/* ---------- Body layout ---------- */
.page-home .home-body{
  display:grid;
  gap:clamp(26px,4vw,52px);
  padding-top:clamp(38px,6vw,76px);
  padding-bottom:clamp(40px,6vw,80px);
}

.page-home .home-chapters{ min-width:0; }

@media (min-width:1080px){
  .page-home .home-body{
    grid-template-columns:178px minmax(0,1fr);
  }
}

/* ---------- Chapter rail ---------- */
.page-home .chapter-rail{ display:none; }

@media (min-width:1080px){
  .page-home .chapter-rail{
    display:block;
    position:sticky;
    top:112px;
    align-self:start;
    border-left:1px solid var(--home-line);
    padding-left:16px;
  }
}

.page-home .rail-title{
  margin:0 0 14px;
  color:var(--text-dim);
  font-size:11px;
  letter-spacing:.28em;
}

.page-home .chapter-rail ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}

.page-home .chapter-rail a{
  position:relative;
  display:flex;
  align-items:baseline;
  gap:8px;
  text-decoration:none;
  color:var(--text-dim);
  font-size:13.5px;
  line-height:1.5;
  transition:color .2s ease;
}

.page-home .chapter-rail a .mono{
  font-size:11px;
  color:rgba(155,161,180,.6);
}

.page-home .chapter-rail a::before{
  content:"";
  position:absolute;
  left:-21px;
  top:.5em;
  width:8px;
  height:8px;
  border-radius:50%;
  border:1px solid var(--home-line);
  background:var(--ink-000);
  transition:background .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.page-home .chapter-rail a:hover{ color:var(--violet-soft); }

.page-home .chapter-rail a[aria-current="true"]{
  color:var(--white);
  font-weight:700;
}

.page-home .chapter-rail a[aria-current="true"] .mono{ color:var(--blue); }

.page-home .chapter-rail a[aria-current="true"]::before{
  background:var(--violet);
  border-color:var(--violet);
  box-shadow:0 0 0 4px rgba(139,92,246,.18);
}

/* ---------- Chapters ---------- */
.page-home .chapter{
  scroll-margin-top:118px;
  padding-bottom:clamp(34px,5vw,62px);
}

.page-home .chapter + .chapter{
  border-top:1px solid var(--home-line-soft);
  padding-top:clamp(32px,4.6vw,56px);
}

.page-home .chapter-head{
  display:grid;
  gap:12px;
  max-width:74ch;
}

.page-home .chapter-index{
  display:inline-flex;
  align-items:center;
  gap:.75em;
  color:var(--violet);
  font-size:12px;
  letter-spacing:.26em;
}

.page-home .chapter-index::after{
  content:"";
  height:1px;
  width:clamp(36px,8vw,92px);
  background:linear-gradient(90deg, var(--violet), rgba(139,92,246,0));
}

.page-home .chapter h2{
  margin:0;
  font-size:clamp(23px,3.4vw,38px);
  line-height:1.22;
  font-weight:800;
  letter-spacing:-.015em;
  text-wrap:balance;
}

.page-home .chapter-lede{
  margin:0;
  color:var(--text-dim);
  font-size:clamp(15px,1.6vw,17px);
  line-height:1.9;
}

.page-home .chapter-foot{
  margin:clamp(18px,2.6vw,26px) 0 0;
  padding-left:14px;
  border-left:2px solid var(--gold);
  color:var(--text-dim);
  font-size:14.5px;
  line-height:1.85;
}

.page-home .chapter-foot a{
  color:var(--blue);
  text-decoration:none;
  border-bottom:1px solid rgba(56,189,248,.4);
}

.page-home .chapter-foot a:hover{ color:var(--white); }

.page-home .chapter-figure{
  margin:clamp(20px,3vw,30px) 0 0;
}

.page-home .chapter-figure img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--radius);
  border:1px solid var(--home-line);
  object-fit:cover;
}

.page-home .chapter-figure figcaption{
  margin-top:10px;
  color:var(--text-dim);
  font-size:13px;
  line-height:1.7;
}

.page-home .band-strip{
  height:6px;
  margin:clamp(20px,3vw,32px) 0;
  border-radius:3px;
  background:linear-gradient(90deg, var(--violet) 0 36%, var(--blue) 36% 70%, var(--pink) 70% 100%);
  opacity:.85;
}

/* ---------- Channel cards ---------- */
.page-home .channel-scroll{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(230px,76vw);
  gap:16px;
  overflow-x:auto;
  padding:8px 4px 20px;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
}

@media (min-width:720px){
  .page-home .channel-scroll{ grid-auto-columns:minmax(240px,290px); }
}

.page-home .channel-card{
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:18px 18px 16px;
  border-radius:var(--radius);
  border:1px solid var(--home-line);
  background:linear-gradient(160deg, rgba(27,31,43,.92), rgba(15,18,25,.94));
  box-shadow:var(--paper);
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.page-home .channel-card:nth-child(3n+1){ min-height:212px; }
.page-home .channel-card:nth-child(3n+2){ min-height:238px; }
.page-home .channel-card:nth-child(3n){ min-height:196px; }

.page-home .channel-card:hover,
.page-home .channel-card:focus-within{
  transform:translateY(-4px);
  border-color:rgba(56,189,248,.55);
  box-shadow:0 24px 44px -32px rgba(56,189,248,.95);
}

.page-home .channel-card .tag{ align-self:flex-start; }

.page-home .channel-name{
  margin:0;
  font-size:19px;
  font-weight:800;
  letter-spacing:-.01em;
}

.page-home .channel-text{
  margin:0;
  color:var(--text-dim);
  font-size:13.5px;
  line-height:1.8;
}

.page-home .channel-meta{
  margin:auto 0 0;
  display:grid;
  gap:6px;
  padding-top:10px;
  border-top:1px dashed rgba(155,161,180,.22);
  font-size:12.5px;
}

.page-home .channel-meta > div{
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.page-home .channel-meta dt{
  color:var(--text-dim);
  letter-spacing:.06em;
}

.page-home .channel-meta dd{
  margin:0;
  color:var(--gold);
}

/* ---------- Split blocks ---------- */
.page-home .split{
  display:grid;
  gap:clamp(20px,3vw,38px);
  margin-top:clamp(18px,2.6vw,26px);
}

.page-home .split-main{ min-width:0; }

@media (min-width:900px){
  .page-home .split{
    grid-template-columns:minmax(0,1fr) minmax(220px,.6fr);
    align-items:start;
  }
  .page-home .split--reverse{
    grid-template-columns:minmax(220px,.72fr) minmax(0,1fr);
  }
  .page-home .split--reverse .split-figure{ order:-1; }
}

.page-home .split-figure{
  margin:0;
  border-radius:var(--radius-lg);
  border:1px solid var(--home-line);
  background:var(--bg-card);
  box-shadow:var(--glow-violet);
  overflow:hidden;
}

.page-home .split-figure img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

.page-home .split-figure figcaption{
  padding:10px 14px;
  color:var(--violet-soft);
  font-size:11px;
  letter-spacing:.16em;
  border-top:1px solid var(--home-line-soft);
}

/* ---------- Steps ---------- */
.page-home .step-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}

.page-home .step{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:14px;
  padding:15px 17px;
  border-radius:var(--radius);
  border:1px solid var(--home-line-soft);
  background:rgba(15,18,25,.72);
  transition:border-color .25s ease, background .25s ease;
}

.page-home .step:hover{
  border-color:rgba(139,92,246,.5);
  background:rgba(27,31,43,.82);
}

.page-home .step-num{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-pill);
  border:1px solid var(--home-line);
  background:rgba(139,92,246,.10);
  color:var(--violet-soft);
  font-size:12.5px;
}

.page-home .step-title{
  margin:0 0 5px;
  font-size:16px;
  font-weight:800;
}

.page-home .step-text{
  margin:0;
  color:var(--text-dim);
  font-size:14px;
  line-height:1.85;
}

/* ---------- Tiers ---------- */
.page-home .tier-list{
  list-style:none;
  margin:clamp(18px,2.6vw,26px) 0 0;
  padding:0;
  display:grid;
  gap:10px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.page-home .tier{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:96px;
  padding:15px 15px 14px;
  border-radius:var(--radius-sm);
  border:1px solid rgba(242,200,121,.28);
  border-top:3px solid var(--gold);
  background:linear-gradient(170deg, rgba(74,58,34,.55), rgba(15,18,25,.9));
}

.page-home .tier-name{
  font-size:15.5px;
  font-weight:800;
  color:var(--white);
}

.page-home .tier-note{
  margin-top:auto;
  color:var(--text-dim);
  font-size:12.5px;
  line-height:1.65;
}

.page-home .tier:nth-child(3n+1){ border-top-color:var(--violet); }
.page-home .tier:nth-child(3n+2){ border-top-color:var(--blue); }
.page-home .tier:nth-child(3n){ border-top-color:var(--pink); }

@media (min-width:820px){
  .page-home .tier-list{ grid-template-columns:repeat(5,minmax(0,1fr)); }
}

/* ---------- Scenes / notes ---------- */
.page-home .scene-grid,
.page-home .grid-2{
  display:grid;
  gap:14px;
  margin-top:clamp(18px,2.6vw,26px);
}

@media (min-width:760px){
  .page-home .scene-grid,
  .page-home .grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.page-home .scene{
  padding:18px 18px 16px;
  border-radius:var(--radius);
  border:1px solid var(--home-line-soft);
  background:linear-gradient(150deg, rgba(27,31,43,.8), rgba(15,18,25,.86));
}

.page-home .scene-title{
  margin:0 0 8px;
  font-size:17px;
  font-weight:800;
  color:var(--violet-soft);
}

.page-home .scene-text{
  margin:0;
  color:var(--text-dim);
  font-size:14px;
  line-height:1.9;
}

.page-home .note-card{
  padding:18px 18px 16px;
  border-radius:var(--radius);
  border:1px solid var(--home-line-soft);
  background:rgba(15,18,25,.78);
}

.page-home .note-card--line{
  border-left:3px solid var(--blue);
}

.page-home .note-title{
  margin:0 0 8px;
  font-size:16.5px;
  font-weight:800;
}

.page-home .note-text{
  margin:0;
  color:var(--text-dim);
  font-size:14px;
  line-height:1.9;
}

.page-home .note-text a{
  color:var(--blue);
  text-decoration:none;
  border-bottom:1px solid rgba(56,189,248,.4);
}

.page-home .note-text a:hover{ color:var(--white); }

/* ---------- Route svg ---------- */
.page-home .route-svg{
  display:block;
  width:100%;
  height:auto;
  max-width:720px;
  margin:clamp(18px,2.8vw,28px) 0 0;
  padding:14px;
  border-radius:var(--radius);
  border:1px solid var(--home-line-soft);
  background:radial-gradient(70% 100% at 50% 0%, rgba(139,92,246,.16), rgba(5,6,10,.6));
}

/* ---------- Archive stats ---------- */
.page-home .archive-stats{
  list-style:none;
  margin:clamp(18px,2.6vw,26px) 0 0;
  padding:0;
  display:grid;
  gap:12px;
}

@media (min-width:760px){
  .page-home .archive-stats{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

.page-home .archive-stats li{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:18px 18px 16px;
  border-radius:var(--radius);
  border:1px solid var(--home-line);
  background:linear-gradient(160deg, rgba(27,31,43,.9), rgba(15,18,25,.92));
}

.page-home .archive-num{
  font-size:clamp(26px,3.6vw,36px);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--gold);
  text-shadow:0 0 24px rgba(242,200,121,.28);
}

.page-home .archive-label{
  color:var(--text-dim);
  font-size:13.5px;
  line-height:1.75;
}

.page-home .site-line{
  margin:clamp(22px,3vw,32px) 0 0;
  padding:12px 16px;
  border-radius:var(--radius-sm);
  border:1px dashed rgba(155,161,180,.28);
  color:var(--text-dim);
  font-size:12.5px;
  letter-spacing:.04em;
  word-break:break-word;
}

@media (max-width:420px){
  .page-home .channel-scroll{ grid-auto-columns:minmax(210px,82vw); }
  .page-home .tier-list{ grid-template-columns:minmax(0,1fr); }
}
<<<END>>>