.guide-body{background:#031018}
.guide-header{position:absolute}.guide-return{font:9px var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:#a7c2c1;justify-self:center}.guide-return:hover{color:var(--green)}
.guide-main{background:linear-gradient(90deg,rgba(31,78,88,.08) 1px,transparent 1px),#031018;background-size:12.5% 100%}
.guide-hero{min-height:760px;position:relative;overflow:hidden;padding:180px var(--pad) 100px;display:flex;flex-direction:column;justify-content:flex-end;border-bottom:1px solid var(--line)}
.guide-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 45%,rgba(41,128,123,.18),transparent 31%),linear-gradient(125deg,transparent 55%,rgba(107,211,158,.05) 55.2%,transparent 55.5%)}
.guide-hero>*:not(.guide-scope){position:relative;z-index:2}.guide-hero h1{font-size:clamp(64px,10vw,150px);line-height:.83;letter-spacing:-.075em;text-transform:uppercase;margin:22px 0 36px;max-width:1200px}.guide-hero h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px #a6ddd0;padding-left:10vw}.guide-deck{max-width:620px;margin:0 0 55px 10vw;font-size:16px;line-height:1.75;color:#a9c0c0}.guide-meta{display:flex;gap:40px;margin-left:10vw;font:8px var(--mono);letter-spacing:.14em;color:#6c9195}.guide-scope{position:absolute;width:min(65vw,830px);aspect-ratio:1;border:1px solid #17434c;border-radius:50%;right:-10%;top:-12%}.guide-scope span{position:absolute;inset:20%;border:1px solid #153b45;border-radius:50%}.guide-scope span:nth-of-type(2){inset:40%}.guide-scope:before,.guide-scope:after{content:"";position:absolute;background:#17434c}.guide-scope:before{left:50%;top:0;bottom:0;width:1px}.guide-scope:after{top:50%;left:0;right:0;height:1px}.guide-scope i{position:absolute;left:50%;top:50%;width:50%;height:1px;background:linear-gradient(90deg,var(--green),transparent);transform:rotate(-30deg);transform-origin:left}.guide-scope b{position:absolute;right:15%;top:43%;width:14px;height:14px;border:2px solid var(--red);transform:rotate(45deg);box-shadow:0 0 14px var(--red)}
.guide-layout{display:grid;grid-template-columns:260px minmax(0,900px);gap:7vw;padding:120px var(--pad) 140px;justify-content:center}.guide-index{position:sticky;top:40px;align-self:start;border-top:1px solid var(--line2);display:flex;flex-direction:column}.guide-index span{font:8px var(--mono);letter-spacing:.17em;color:var(--green);padding:18px 0}.guide-index a{font:9px var(--mono);letter-spacing:.08em;text-decoration:none;color:#799b9e;border-top:1px solid var(--line);padding:16px 4px}.guide-index a:hover{color:var(--green);padding-left:10px}
.guide-article section{position:relative;padding:0 0 105px;margin-bottom:95px;border-bottom:1px solid var(--line)}.guide-number{position:absolute;right:0;top:-35px;font:300 72px var(--mono);color:#143640}.guide-article h2{font-size:clamp(39px,5vw,72px);line-height:.95;letter-spacing:-.055em;margin:13px 0 36px;max-width:750px}.guide-article h3{font:500 15px var(--mono);letter-spacing:.05em;color:var(--green2);margin:38px 0 12px}.guide-article p{max-width:760px;font-size:14px;line-height:1.85;color:#9eb9ba}.guide-article p.lead{font-size:19px;line-height:1.7;color:#d4e6e4}.guide-article code{font-family:var(--mono);font-size:.88em;color:#c7ffd8;background:#0b2b31;padding:2px 5px}
.swatches{display:grid;grid-template-columns:repeat(5,1fr);margin:0 0 38px;border:1px solid var(--line)}.swatches>div{border-right:1px solid var(--line)}.swatches>div:last-child{border:0}.swatches i{display:block;height:110px;background:var(--sw)}.swatches span{display:block;padding:13px 10px;font:8px var(--mono);letter-spacing:.08em}.swatches small{display:block;color:#65868a;margin-top:5px}.guide-article .reproduce{border:1px solid var(--line2);padding:55px;margin-bottom:0;background:radial-gradient(circle at 100% 0,rgba(107,211,158,.09),transparent 40%),#061923}.reproduce .guide-number{right:30px;top:20px}.reproduce a{margin-top:28px;width:220px;height:58px;border:1px solid var(--green);display:flex;align-items:center;justify-content:space-between;padding:0 20px;color:var(--green2);text-decoration:none;font:9px var(--mono);letter-spacing:.12em;text-transform:uppercase}.reproduce a:hover{background:var(--green);color:var(--ink)}.reproduce a span{font-size:18px}
@media(max-width:900px){.guide-layout{grid-template-columns:180px minmax(0,1fr);gap:5vw}.guide-hero{min-height:680px}.guide-hero h1{font-size:82px}.swatches{grid-template-columns:repeat(3,1fr)}.swatches>div{border-bottom:1px solid var(--line)}.swatches i{height:80px}}
@media(max-width:680px){.guide-return{display:none}.guide-hero{min-height:700px;padding-top:150px;padding-bottom:70px}.guide-hero h1{font-size:53px;line-height:.9}.guide-hero h1 em{padding-left:0}.guide-deck,.guide-meta{margin-left:0}.guide-deck{font-size:14px;margin-bottom:38px}.guide-meta{gap:10px;flex-wrap:wrap}.guide-scope{width:110vw;right:-48%;top:-3%}.guide-layout{display:block;padding-top:80px;padding-bottom:90px}.guide-index{position:relative;top:auto;margin-bottom:90px}.guide-index a{min-height:44px;display:flex;align-items:center}.guide-article section{padding-bottom:75px;margin-bottom:75px}.guide-number{font-size:52px;top:-20px}.guide-article h2{font-size:42px;padding-right:35px}.guide-article p.lead{font-size:17px}.swatches{grid-template-columns:1fr 1fr}.swatches i{height:75px}.guide-article .reproduce{padding:35px 22px}.reproduce .guide-number{right:18px;top:17px}.reproduce a{width:100%;min-height:58px}}

@media(max-width:680px){.guide-hero h1{font-size:51px;word-spacing:.08em}.guide-meta{gap:12px;font-size:8.5px}}

/* Pass 2 guide — turn the dossier into an instrument, not a generic article. */
.guide-body{background:radial-gradient(circle at 78% 8%,rgba(13,71,79,.22),transparent 28%),#020d14}
.guide-header{background:linear-gradient(180deg,rgba(2,13,20,.94),rgba(2,13,20,.42))}
.guide-return{min-height:44px;display:flex;align-items:center;transition:color .2s ease,transform .2s ease}
.guide-return:hover{transform:translateX(-4px)}
.guide-main{background:linear-gradient(90deg,rgba(42,104,112,.075) 1px,transparent 1px),radial-gradient(circle at 80% 48%,rgba(13,60,69,.12),transparent 30%),#020d14;background-size:12.5% 100%,auto,auto}
.guide-hero{min-height:max(760px,100svh);isolation:isolate}
.guide-hero:after{content:"BUILD / INTERACTION / ATMOSPHERE";position:absolute;right:28px;bottom:50px;writing-mode:vertical-rl;font:7px var(--mono);letter-spacing:.2em;color:#47747a}
.guide-hero .kicker{opacity:0;animation:guideIn .65s .12s cubic-bezier(.16,1,.3,1) forwards}
.guide-hero h1{opacity:0;animation:guideIn .85s .28s cubic-bezier(.16,1,.3,1) forwards;text-shadow:0 18px 60px rgba(0,0,0,.48)}
.guide-deck{opacity:0;animation:guideIn .7s .5s cubic-bezier(.16,1,.3,1) forwards;border-left:1px solid var(--green);padding-left:20px}
.guide-meta{opacity:0;animation:guideIn .65s .68s cubic-bezier(.16,1,.3,1) forwards}
.guide-scope{box-shadow:0 0 120px rgba(40,148,143,.06) inset}
.guide-scope i{box-shadow:0 0 18px rgba(98,229,170,.2)}
.guide-layout{grid-template-columns:220px minmax(0,980px);gap:6vw;align-items:start}
.guide-index{top:28px;background:rgba(2,16,23,.72);backdrop-filter:blur(8px);z-index:3}
.guide-index a{min-height:48px;display:flex;align-items:center;transition:color .2s ease,padding-left .2s ease,background-color .2s ease}
.guide-index a:hover{background:rgba(98,229,170,.045)}
.guide-article section:before{content:"";position:absolute;left:-36px;top:0;width:1px;height:72px;background:linear-gradient(var(--green),transparent)}
.guide-article h2{font-weight:720;line-height:.9}
.guide-article h3{display:flex;align-items:center;gap:10px}
.guide-article h3:before{content:"";width:18px;height:1px;background:var(--green)}
.guide-article p{font-size:15px;color:#a9c1c2}
.guide-article p.lead{font-size:20px;border-left:1px solid var(--line2);padding-left:20px}
.guide-article code{border-bottom:1px solid rgba(98,229,170,.35);overflow-wrap:anywhere}
.technique-flow{display:grid;grid-template-columns:1fr 34px 1fr 34px 1fr 34px 1fr;align-items:center;margin:4px 0 48px;border-block:1px solid var(--line);padding:16px 0}
.technique-flow span{display:grid;grid-template-columns:24px 1fr;font:8px var(--mono);letter-spacing:.11em;color:#b6d0d0}
.technique-flow b{grid-row:1/3;font:300 17px var(--mono);color:#4f7d82}.technique-flow small{font-size:6px;color:#5d858a;margin-top:5px}
.technique-flow i{height:1px;background:var(--line2);position:relative}.technique-flow i:after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-right:1px solid var(--line2);border-top:1px solid var(--line2);transform:rotate(45deg)}
.technique-flow span:nth-of-type(3){color:#ff9ba5}.technique-flow span:nth-of-type(3) b{color:var(--red)}
.swatches{background:#020e15;box-shadow:0 22px 50px rgba(0,0,0,.22)}
.swatches i{height:135px;box-shadow:inset 0 -30px 45px rgba(0,0,0,.1)}
.swatches span{min-height:60px;display:flex;flex-direction:column;justify-content:center}
.type-ledger{display:grid;grid-template-columns:1.25fr .75fr;margin:0 0 38px;border:1px solid var(--line2);background:linear-gradient(120deg,rgba(8,40,49,.9),rgba(2,14,21,.9))}
.type-ledger>div{min-height:180px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid var(--line)}.type-ledger>div:last-child{border:0}
.type-ledger small{font:7px var(--mono);letter-spacing:.13em;color:#6e9699}.type-ledger strong{font:700 clamp(32px,4.5vw,62px)/.82 var(--sora);letter-spacing:-.065em;color:#dcebea}.type-ledger code{font:10px var(--mono);color:var(--yellow);background:none;padding:0;border:0}.type-ledger span{font:8px var(--mono);letter-spacing:.12em;color:var(--green)}
.guide-article .reproduce{position:relative;overflow:hidden;background:radial-gradient(circle at 100% 0,rgba(98,229,170,.13),transparent 34%),linear-gradient(145deg,#082b35,#04151e)}
.guide-article .reproduce:after{content:"";position:absolute;right:-130px;bottom:-130px;width:300px;height:300px;border:1px solid rgba(98,229,170,.14);border-radius:50%;box-shadow:0 0 0 48px rgba(98,229,170,.025),0 0 0 96px rgba(98,229,170,.018)}
.reproduce>*{position:relative;z-index:1}

@keyframes guideIn{from{opacity:0;transform:translateY(26px);clip-path:inset(0 0 100%)}to{opacity:1;transform:none;clip-path:inset(0)}}

@media(max-width:900px){
  .guide-layout{grid-template-columns:170px minmax(0,1fr)}
  .technique-flow{grid-template-columns:1fr 16px 1fr 16px 1fr 16px 1fr}.technique-flow span{grid-template-columns:1fr}.technique-flow b{grid-row:auto}
  .type-ledger{grid-template-columns:1fr}.type-ledger>div{border-right:0;border-bottom:1px solid var(--line)}
}
@media(max-width:680px){
  .guide-hero{min-height:720px}
  .guide-hero:after{display:none}
  .guide-deck{padding-left:14px}
  .guide-article section:before{left:-12px}
  .guide-article p{font-size:14.5px;line-height:1.78}
  .guide-article p.lead{font-size:17.5px;padding-left:14px}
  .technique-flow{grid-template-columns:1fr 1fr;margin-bottom:38px;gap:1px;background:var(--line);padding:1px;border:0}
  .technique-flow span{min-height:74px;background:#03141d;padding:12px}.technique-flow i{display:none}
  .swatches{gap:1px;background:var(--line)}.swatches>div{background:#020e15;border:0}.swatches i{height:86px}
  .type-ledger>div{min-height:150px;padding:20px}.type-ledger strong{font-size:38px}
}