.guide-page{background:#01080e}
.guide-page .site-header{backdrop-filter:none;background:linear-gradient(180deg,rgba(1,8,14,.99),rgba(1,8,14,.94))}
#guide-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;background:#01080e}
.guide-main{position:relative;z-index:3}
.guide-hero{height:min(100svh,900px);min-height:720px;display:flex;flex-direction:column;justify-content:flex-end;padding:10rem var(--pad) 7rem;border-bottom:1px solid var(--line);position:relative;overflow:hidden;isolation:isolate}
.guide-hero:before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(1,8,14,.05),rgba(1,8,14,.82) 90%),linear-gradient(90deg,rgba(1,8,14,.2),transparent 70%)}
.guide-code{font-size:.58rem;letter-spacing:.22em;color:var(--cyan);text-transform:uppercase;margin:0 0 1.5rem}
.guide-hero h1{font-family:var(--display);font-weight:300;font-size:clamp(5.8rem,12.5vw,12.5rem);line-height:.61;letter-spacing:-.064em;margin:0;max-width:1180px;color:#eff7f7;text-wrap:balance}
.guide-hero h1 em{display:block;color:transparent;-webkit-text-stroke:1px rgba(77,240,255,.9);font-weight:300;margin-left:15%;text-shadow:0 0 28px rgba(77,240,255,.13)}
.guide-deck{font-family:var(--display);font-size:clamp(1.3rem,2vw,1.9rem);font-style:italic;color:#d1e0e1;margin:3.3rem 0 0 39%;max-width:36rem;line-height:1.35}
.guide-proof{position:absolute;right:var(--pad);bottom:2.2rem;margin:0;font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:#7f9ea4}.guide-proof b{font-family:var(--display);font-size:1.6rem;font-weight:300;color:var(--cyan);vertical-align:-.2rem;margin-right:.3rem}.guide-proof span{padding:0 .45rem;color:#53757c}
.guide-orbit{position:absolute;z-index:-1;right:7%;top:13%;width:min(31vw,430px);aspect-ratio:1;border:1px solid rgba(191,235,238,.13);border-radius:50%;box-shadow:0 0 0 6vw rgba(8,51,61,.06)}
.guide-orbit:before,.guide-orbit:after{content:"";position:absolute;border-radius:50%;inset:17%;border:1px solid rgba(77,240,255,.15)}
.guide-orbit:after{inset:37%;background:#01080e;box-shadow:-6px -2px 16px rgba(216,250,252,.2),0 0 60px rgba(77,240,255,.13)}
.guide-orbit span{position:absolute;right:7%;top:24%;width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 16px 3px rgba(77,240,255,.8);animation:manual-orbit 8s ease-in-out infinite}
@keyframes manual-orbit{50%{transform:translate(-12px,9px) scale(.45);opacity:.45}}
.guide-article{max-width:1260px;margin:auto;padding:0 var(--pad);position:relative}
.guide-article section{display:grid;grid-template-columns:190px minmax(0,820px);gap:clamp(2rem,8vw,8rem);padding:clamp(7rem,10vw,10rem) 0;border-bottom:1px solid var(--line);position:relative}
.guide-article section:nth-child(even){padding-left:6%}
.guide-article section:after{content:"";position:absolute;left:9%;right:-20%;bottom:-1px;height:6rem;border-bottom:1px solid rgba(77,240,255,.08);border-radius:50%;transform:translateY(48%) rotate(-1deg)}
.guide-article aside{font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:#91abb0;padding-top:.4rem}
.guide-article aside span{display:block;font-family:var(--display);font-size:5.2rem;color:transparent;-webkit-text-stroke:1px rgba(77,240,255,.37);line-height:.76;margin-bottom:1.2rem}
.guide-article h2{font-family:var(--display);font-size:clamp(3.5rem,5.6vw,6rem);line-height:.88;font-weight:300;letter-spacing:-.05em;margin:0 0 2.7rem;color:#eff7f7;text-wrap:balance}
.guide-article p{font-size:.93rem;line-height:1.95;color:#bfd0d3;margin:0 0 1.55rem;max-width:74ch}
.guide-article code{font-family:'Sora',sans-serif;font-size:.82em;color:var(--phosphor);background:rgba(77,240,255,.075);padding:.1rem .32rem;border-bottom:1px solid rgba(77,240,255,.2);overflow-wrap:anywhere}
.tech-ledger{margin:2.8rem 0;display:grid;grid-template-columns:1fr 1.3fr auto;border-top:1px solid var(--line)}
.tech-ledger span,.tech-ledger strong,.tech-ledger i{padding:1rem 0;border-bottom:1px solid var(--line);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase}
.tech-ledger span{color:#8faab0}.tech-ledger strong{font-weight:400;color:#dce9ea}.tech-ledger i{font-family:var(--display);font-size:1.45rem;color:transparent;-webkit-text-stroke:1px rgba(77,240,255,.48);font-style:normal}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);margin:0 0 2.7rem;border-block:1px solid var(--line)}
.swatches span{min-height:160px;padding:6.2rem .8rem 1.1rem;font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;color:#d0dfe1;position:relative;border-right:1px solid var(--line)}.swatches span:last-child{border-right:0}
.swatches span:before{content:"";position:absolute;top:1.4rem;left:.8rem;width:49px;height:49px;border-radius:50%;background:var(--sw);border:1px solid rgba(255,255,255,.3);box-shadow:0 0 22px color-mix(in srgb,var(--sw),transparent 32%)}
.prompt-spec{margin:3rem 0 0;padding:2rem 0 2rem 2.2rem;border-left:1px solid var(--cyan);font-family:var(--display);font-size:clamp(1.4rem,2.2vw,2rem);font-style:italic;line-height:1.42;color:#e4f0f1;max-width:36ch}

@media(max-width:900px){
  .guide-hero{height:min(100svh,920px)}.guide-orbit{width:47vw;right:5%;top:15%}.guide-deck{margin-left:34%}
  .guide-article section{grid-template-columns:150px minmax(0,1fr);gap:3rem}.guide-article section:nth-child(even){transform:none}.guide-article aside span{font-size:4rem}
}
@media(max-width:600px){
  .guide-hero{height:100svh;min-height:720px;padding:8rem var(--pad) 6.2rem}.guide-code{margin-bottom:1.2rem}.guide-hero h1{font-size:22.5vw;line-height:.7}.guide-hero h1 em{margin-left:7%}.guide-deck{margin:2.4rem 0 0 14%;font-size:1.25rem;max-width:17rem}.guide-orbit{top:13%;right:-26%;width:76vw;opacity:.82}.guide-proof{right:auto;left:var(--pad);bottom:1.4rem;font-size:.42rem}
  .guide-page .site-header nav a{font-size:.48rem;letter-spacing:.08em;white-space:nowrap}
  .guide-article section{grid-template-columns:1fr;gap:2rem;padding:6rem 0}.guide-article section:after{right:-8%;left:2%}.guide-article aside{display:flex;align-items:center;gap:1rem}.guide-article aside span{font-size:3.4rem;margin:0}.guide-article h2{font-size:3.35rem;margin-bottom:2.1rem}.guide-article p{font-size:.88rem;line-height:1.85}
  .tech-ledger{grid-template-columns:1fr 1.15fr auto}.tech-ledger span,.tech-ledger strong{font-size:.49rem}.tech-ledger i{font-size:1.2rem}
  .swatches{grid-template-columns:repeat(2,1fr)}.swatches span{min-height:132px;padding-top:5.5rem}.swatches span:nth-child(2){border-right:0}.swatches span:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .prompt-spec{padding-left:1.3rem;font-size:1.4rem}
}
@media(prefers-reduced-motion:reduce){.guide-orbit span{animation:none}}

/* Pass 3 — manual details */
.guide-article section{transition:border-color .4s ease}
.guide-article section:hover{border-color:rgba(77,240,255,.42)}
.guide-article aside span{transition:-webkit-text-stroke-color .5s ease,text-shadow .5s ease,transform .6s cubic-bezier(.16,.8,.2,1)}
.guide-article section:hover aside span{transform:translateY(-4px);-webkit-text-stroke-color:rgba(141,255,255,.8);text-shadow:0 0 25px rgba(77,240,255,.14)}
.guide-article code{color:var(--phosphor)}
.prompt-spec::selection,.guide-article h2::selection{background:var(--phosphor);color:#01080e;-webkit-text-stroke:0}
@media(max-width:600px){.guide-article section:hover aside span{transform:none}}