.guide-body { background:#090c0a; font-optical-sizing:auto; font-kerning:normal; }
.guide-header { min-height:86px; display:flex; justify-content:space-between; align-items:center; padding:0 clamp(1.2rem,5vw,5rem); border-bottom:1px solid var(--line); }
.guide-mark { display:flex; align-items:center; gap:.85rem; color:var(--moon); text-decoration:none; font-size:1.15rem; line-height:.85; }
.guide-mark svg { width:32px; fill:var(--buff); }
.guide-mark svg circle { fill:var(--black); }
.guide-mark small { display:block; margin-top:.5rem; color:var(--grey); font:.5rem var(--mono); letter-spacing:.11em; text-transform:uppercase; }
.return-link { min-height:44px; display:flex; align-items:center; gap:.7rem; color:var(--green); font:.57rem var(--mono); letter-spacing:.09em; text-transform:uppercase; text-underline-offset:5px; transition:color .25s ease; }
.return-link:hover { color:var(--moon); }
.return-link:focus-visible { color:var(--moon); }
.guide-main { overflow:hidden; }

.guide-hero { position:relative; min-height:calc(100svh - 86px); padding:clamp(7rem,11vw,10rem) clamp(1.2rem,12vw,12rem) 9rem; background:
  linear-gradient(90deg,rgba(242,234,220,.018) 1px,transparent 1px) 0 0/12.5% 100%,
  radial-gradient(circle at 77% 45%,#273128,#0e1410 31%,#080b09 63%); isolation:isolate; }
.guide-hero::before { content:'FIELD\A GUIDE'; white-space:pre; position:absolute; z-index:-1; top:8%; right:-.04em; color:rgba(242,234,220,.028); font:600 clamp(7rem,17vw,17rem)/.72 var(--mono); letter-spacing:-.1em; text-align:right; }
.guide-hero::after { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(103deg,transparent 0 64%,rgba(157,232,174,.035) 64.1%,transparent 64.3%); }
.guide-hero .eyebrow { margin-left:-5vw; }
.guide-hero h1 { position:relative; z-index:2; margin:0; max-width:9ch; font-size:clamp(5rem,10vw,10rem); font-weight:400; line-height:.74; letter-spacing:-.065em; text-shadow:0 25px 60px rgba(0,0,0,.35); }
.guide-hero h1 i { color:var(--buff); font-weight:400; }
.guide-intro { position:relative; z-index:2; width:min(37rem,54%); margin:3rem 7% 0 auto; color:#c8c3b8; font-size:1.38rem; line-height:1.5; }
.guide-scope { position:absolute; left:42%; right:6%; bottom:5.2rem; height:74px; border-block:1px solid rgba(157,232,174,.12); color:var(--green); font-family:var(--mono); overflow:hidden; }
.guide-pigeon { position:absolute; left:0; top:8px; color:var(--buff); font-size:2.1rem; letter-spacing:-.22em; opacity:.62; transform:scaleY(1.6); }
.guide-owl { position:absolute; left:36%; right:0; top:40px; height:1px; background:var(--green); box-shadow:0 0 9px rgba(157,232,174,.8); }
.guide-owl { transform-origin:left; animation:guide-flatline 2.4s .45s cubic-bezier(.18,.78,.2,1) both; }
.guide-scope i,.guide-scope b { position:absolute; bottom:7px; font:400 .45rem var(--mono); letter-spacing:.1em; }
.guide-scope i { left:0; color:#897a66; }
.guide-scope b { right:0; color:var(--green); }
.code-only-stamp { position:absolute; left:5%; bottom:4.6rem; margin:0; color:#798079; font:400 .48rem/1.5 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.code-only-stamp span { color:var(--green); }
@keyframes guide-flatline { from { opacity:0; transform:scaleX(0); } to { opacity:1; transform:scaleX(1); } }

.guide-article { display:grid; grid-template-columns:245px minmax(0,820px); justify-content:center; gap:clamp(3.5rem,8vw,9rem); padding:clamp(7rem,10vw,10rem) clamp(1.2rem,6vw,6rem); background:
  linear-gradient(rgba(9,12,10,.035) 1px,transparent 1px) 0 0/100% 42px,
  radial-gradient(circle at 80% 25%,rgba(255,255,255,.28),transparent 24%),
  #e2d2b7; color:var(--ink); }
.guide-index { position:sticky; top:2rem; align-self:start; display:flex; flex-direction:column; border-top:1px solid rgba(9,12,10,.28); }
.guide-index a { min-height:49px; display:flex; align-items:center; border-bottom:1px solid rgba(9,12,10,.17); color:#405848; font:500 .5rem var(--mono); letter-spacing:.09em; text-decoration:none; text-transform:uppercase; transition:color .2s ease,padding-left .25s ease,background-color .2s ease; }
.guide-index a:hover { padding-left:.65rem; color:#173d23; background:rgba(255,255,255,.16); }
.guide-index a:focus-visible { outline-color:#173d23; }
.guide-copy section { position:relative; scroll-margin-top:2rem; margin-bottom:6.5rem; }
.guide-copy section:not(:last-child)::after { content:''; display:block; width:42%; height:1px; margin-top:3.6rem; background:linear-gradient(90deg,#76907b,transparent); }
.guide-copy section:last-child { margin-bottom:0; }
.chapter { position:absolute; left:-3.5rem; top:.65rem; color:#3d6b49; font:600 .54rem var(--mono); }
.guide-copy h2 { max-width:12ch; margin:0 0 1.35rem; font-size:clamp(3rem,4.6vw,4.6rem); font-weight:400; line-height:.88; letter-spacing:-.045em; }
.guide-copy p { margin:0 0 1.1rem; max-width:45rem; font-size:1.15rem; line-height:1.58; }
.guide-copy code { padding:.1em .32em; color:#174729; background:rgba(255,255,255,.31); font:.74em var(--mono); white-space:nowrap; }
.token-section h2 { max-width:none; }
.swatches { display:grid; grid-template-columns:repeat(5,1fr); margin:2.2rem 0 2rem; border:1px solid rgba(9,12,10,.22); box-shadow:10px 10px 0 rgba(9,12,10,.055); }
.swatches span { position:relative; min-height:145px; padding:5.4rem .75rem .7rem; border-right:1px solid rgba(9,12,10,.16); color:#39443b; font:.51rem/1.4 var(--mono); text-transform:uppercase; }
.swatches span:last-child { border-right:0; }
.swatches span::before { content:''; position:absolute; inset:0 0 auto; height:72px; background:var(--swatch); }
.swatches b { display:block; margin-bottom:.35rem; color:var(--ink); font:700 .48rem var(--mono); }
.reproduce { padding:clamp(2rem,4vw,3.5rem); border:1px solid rgba(9,12,10,.28); background:rgba(255,255,255,.19); box-shadow:14px 14px 0 rgba(74,91,75,.08); }
.reproduce .chapter { left:1.2rem; top:1.1rem; }

@media (max-width:900px) {
  .guide-hero { min-height:690px; padding-left:12%; padding-right:12%; }
  .guide-hero .eyebrow { margin-left:0; }
  .guide-intro { width:68%; margin-right:0; }
  .code-only-stamp { display:none; }
  .guide-scope { left:52%; }
  .guide-article { grid-template-columns:210px minmax(0,1fr); gap:4rem; }
}

@media (max-width:650px) {
  .guide-header { min-height:72px; padding-inline:1rem; }
  .guide-mark { font-size:1.05rem; }
  .guide-mark small { display:none; }
  .return-link { font-size:.48rem; }
  .guide-hero { min-height:720px; padding:7rem 1.2rem 7.5rem; }
  .guide-hero::before { top:9%; font-size:30vw; opacity:.7; }
  .guide-hero h1 { max-width:5.2ch; font-size:clamp(4.45rem,21.5vw,5.35rem); line-height:.76; }
  .guide-intro { width:auto; max-width:20rem; margin:2.7rem 0 0; font-size:1.12rem; }
  .guide-scope { left:1.2rem; right:1.2rem; bottom:3.2rem; }
  .guide-pigeon { font-size:1.55rem; }
  .guide-owl { left:45%; }
  .guide-article { display:block; padding:5rem 1.2rem 6rem; }
  .guide-index { position:static; display:grid; grid-template-columns:1fr 1fr; margin-bottom:5rem; }
  .guide-index a { min-height:48px; }
  .guide-index a:hover { padding-left:0; }
  .guide-copy section { margin-bottom:5rem; }
  .chapter { position:static; display:block; margin-bottom:.85rem; }
  .guide-copy h2 { font-size:clamp(2.8rem,13vw,3.55rem); }
  .guide-copy p { font-size:1.05rem; line-height:1.55; }
  .swatches { grid-template-columns:1fr 1fr; box-shadow:7px 7px 0 rgba(9,12,10,.05); }
  .swatches span { min-height:116px; padding-top:4.45rem; border-bottom:1px solid rgba(9,12,10,.16); }
  .swatches span::before { height:59px; }
  .swatches span:last-child { grid-column:1/-1; min-height:104px; }
  .reproduce { padding:1.5rem; }
  .reproduce .chapter { position:static; }
}

@media (prefers-reduced-motion:reduce) {
  .guide-hero { background:#0d120f; }
  .guide-owl { animation:none; }
}