.guide-page{background:#050606}
.guide-header{position:absolute}
.guide-hero{height:94vh;min-height:700px;position:relative;display:grid;grid-template-columns:minmax(32px,1fr) minmax(0,1280px) minmax(32px,1fr);grid-template-rows:132px 1fr 110px;overflow:hidden;background:linear-gradient(105deg,#020303 0,#071011 72%,#030505 100%);border-bottom:1px solid var(--line);isolation:isolate}
.guide-hero:before{content:"";position:absolute;z-index:-1;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(8.333% - 1px),rgba(158,243,255,.055) calc(8.333% - 1px) 8.333%),linear-gradient(transparent 49.9%,rgba(158,243,255,.08) 50%,transparent 50.1%);mask-image:linear-gradient(90deg,transparent,black 35%)}
.guide-hero>p{grid-area:2/2;align-self:start;margin:4vh 0 0;color:var(--cyan);font:8px var(--display);letter-spacing:.1em;text-transform:uppercase}
.guide-hero h1{grid-area:2/2;align-self:center;position:relative;z-index:2;margin:0;font:400 clamp(74px,12.5vw,178px)/.76 var(--display);letter-spacing:-.105em;text-transform:lowercase;animation:guideTitle 1s cubic-bezier(.16,1,.3,1) .25s both}
.guide-hero h1 span{display:inline-block;margin-left:10vw;color:transparent;-webkit-text-stroke:1px rgba(241,244,241,.92)}
.guide-hero-note{grid-area:2/2;justify-self:end;align-self:end;margin:0 0 5vh;position:relative;z-index:3;display:flex;gap:18px;align-items:end;border-left:1px solid var(--rose);padding-left:18px}
.guide-hero-note b{font:25px var(--display);font-weight:400;color:var(--rose);letter-spacing:-.08em}.guide-hero-note span{font:7px/1.55 var(--display);color:#aeb5b3;text-transform:uppercase}
.guide-contact-caption{position:absolute;right:4vw;top:20%;font:6px var(--display);color:#7b8787;letter-spacing:.12em;writing-mode:vertical-rl}
.guide-scope{position:absolute;z-index:1;right:7vw;top:19%;width:min(39vw,560px);aspect-ratio:4/3;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:1px;background:#263334;border:1px solid #334345;transform:rotate(-2.5deg);box-shadow:0 34px 100px rgba(0,0,0,.55);animation:contactReveal 1.2s cubic-bezier(.16,1,.3,1) .5s both}
.guide-scope i{position:relative;background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(177,248,255,.65) 0 2px,rgba(64,184,200,.22) 3px 11%,#061011 12% 100%);overflow:hidden}
.guide-scope i:after{content:"";position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;border:1px solid rgba(158,243,255,.32);border-radius:48% 52% 46% 54%;transform:translate(-50%,-50%) scale(var(--s,.5));box-shadow:0 0 22px rgba(158,243,255,.08)}
.guide-scope i:nth-child(2n){--x:46%;--y:53%;--s:.65}.guide-scope i:nth-child(3n){--x:55%;--y:45%;--s:.82}.guide-scope i:nth-child(5n){--x:51%;--y:49%;--s:1.05}.guide-scope i:nth-child(n+9){--s:1.24;background:radial-gradient(circle at 50% 50%,rgba(255,120,152,.65) 0 2px,rgba(255,120,152,.13) 3px 14%,#10080b 15% 100%)}
.guide-scope b{position:absolute;z-index:2;left:-1px;right:-1px;top:66%;height:1px;background:var(--rose);box-shadow:0 0 12px var(--rose)}
.guide-article{width:min(1120px,calc(100% - 64px));margin:auto;counter-reset:guide}
.guide-article>section{display:grid;grid-template-columns:105px minmax(0,760px);justify-content:center;gap:64px;padding:112px 0;border-bottom:1px solid var(--line);position:relative}
.guide-article>section:before{content:"";position:absolute;left:0;top:0;width:34%;height:1px;background:var(--rose)}
.guide-article>section:nth-child(even):before{left:auto;right:0;background:var(--cyan)}
.guide-index{font:9px var(--display);color:var(--rose);padding-top:8px}.guide-index:after{content:" / 04";color:#596262}
.guide-copy h2{font:400 clamp(46px,6.2vw,82px)/.92 var(--display);letter-spacing:-.08em;margin:0 0 55px;max-width:800px}.guide-copy h2:first-letter{color:var(--white)}
.guide-copy>p{font-size:17px;line-height:1.82;color:#b6bdbb;max-width:68ch}.guide-copy .standfirst{font-size:26px;line-height:1.4;color:var(--white);margin-bottom:35px;max-width:53ch}
.guide-copy code{font-family:var(--display);font-size:.72em;color:var(--cyan);background:#101617;padding:.14em .38em;border-bottom:1px solid #315458}
.token-section .guide-copy{max-width:none}.swatches{display:grid;grid-template-columns:1.2fr .75fr 1fr 1fr;margin:10px 0 45px;border-block:1px solid var(--line)}
.swatches div{position:relative;min-height:195px;padding:18px 14px;border-right:1px solid var(--line);display:flex;flex-direction:column}.swatches div:last-child{border:0}
.swatches i{display:block;height:102px;background:var(--swatch);margin-bottom:auto;border:1px solid rgba(255,255,255,.15);box-shadow:inset 0 0 30px rgba(255,255,255,.04)}
.swatches div:first-child i{background:linear-gradient(90deg,transparent 49.5%,rgba(158,243,255,.3) 50%,transparent 50.5%),linear-gradient(transparent 49.5%,rgba(158,243,255,.3) 50%,transparent 50.5%),#050606}
.swatches b{display:block;margin-top:18px;font-size:11px}.swatches span{font:7px var(--display);color:#818a89;margin-top:6px}
.return-link{margin-top:58px;min-height:74px;border-block:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;text-decoration:none;font:9px var(--display);text-transform:uppercase;transition:padding .3s cubic-bezier(.16,1,.3,1),color .25s}
.return-link b{font:25px var(--body);color:var(--rose)}.return-link:hover{padding-inline:16px;color:var(--cyan)}
@keyframes guideTitle{from{opacity:0;filter:blur(8px);clip-path:inset(0 0 100%);transform:translateY(20px)}to{opacity:1;filter:none;clip-path:inset(0);transform:none}}
@keyframes contactReveal{from{opacity:0;clip-path:inset(0 100% 0 0);transform:rotate(-2.5deg) translateX(40px)}to{opacity:1;clip-path:inset(0);transform:rotate(-2.5deg)}}
@media(max-width:900px){
  .guide-hero{grid-template-columns:20px 1fr 20px}.guide-scope{width:58vw;right:-4vw;top:23%}.guide-article{width:calc(100% - 40px)}.guide-article>section{grid-template-columns:62px minmax(0,1fr);gap:28px;padding:96px 0}.swatches{grid-template-columns:1fr 1fr}.swatches div:nth-child(2){border-right:0}.swatches div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:600px){
  .guide-header nav a:nth-child(1):after{content:'idea'}.guide-header nav a:nth-child(2):after{content:'method'}.guide-header nav a:nth-child(3):after{content:'tokens'}.guide-header nav a:nth-child(4):after{content:'prompt'}
  .guide-hero{height:82svh;min-height:650px;grid-template-columns:16px 1fr 16px}.guide-hero h1{font-size:19vw;line-height:.82}.guide-hero h1 span{margin-left:0}.guide-hero-note{margin-bottom:2vh}.guide-hero-note b{font-size:17px}.guide-scope{width:94vw;right:-36vw;top:27%;opacity:.72}.guide-contact-caption{display:none}
  .guide-article{width:calc(100% - 32px)}.guide-article>section{grid-template-columns:1fr;gap:20px;padding:74px 0}.guide-index{border-bottom:1px solid var(--line);padding-bottom:12px}.guide-copy h2{font-size:41px;margin-bottom:38px}.guide-copy>p{font-size:15px;line-height:1.78}.guide-copy .standfirst{font-size:21px}.swatches{grid-template-columns:1fr 1fr}.swatches div{min-height:160px;padding:12px}.swatches i{height:70px}.swatches b{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.guide-hero h1,.guide-scope{animation:none}}