body { background: #e6ece7; }
.guide-hero { position: relative; min-height: 88svh; padding: 150px 8vw 100px; overflow: hidden; color: var(--mist); background: radial-gradient(circle at 72% 22%, rgba(240,191,79,.22), transparent 20%), linear-gradient(155deg, #78909c, #3d5966 72%); }
.guide-hero::before { content: ''; position: absolute; z-index: 1; left: -13vw; top: 46%; width: 105vw; height: clamp(90px, 12vw, 170px); transform: rotate(-15deg); background: linear-gradient(90deg, #8c162a, var(--crimson) 44%, #a61a30); box-shadow: 0 15px 28px rgba(50,10,20,.2), inset 0 4px rgba(255,255,255,.08); }
.guide-hero::after { content: ''; position: absolute; inset: auto 0 0; height: 43%; background: linear-gradient(148deg, transparent 30%, rgba(20,47,58,.55) 30.2% 61%, rgba(18,43,53,.85) 61.2%); }
.guide-sky { position: absolute; inset: 0; opacity: .16; background: repeating-linear-gradient(90deg, transparent 0 calc(10vw - 1px), rgba(255,255,255,.45) calc(10vw - 1px) 10vw); }
.guide-sky i { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); }
.guide-sky i:nth-child(1) { right: 12%; top: 13%; width: 230px; height: 230px; }
.guide-sky i:nth-child(2) { right: 18%; top: 19%; width: 110px; height: 110px; }
.guide-sky i:nth-child(3) { right: 5%; top: 7%; width: 360px; height: 360px; }
.guide-kicker, .guide-hero h1, .guide-lede, .code-seal { position: relative; z-index: 3; }
.guide-kicker { margin: 0 0 28px; font-size: .62rem; text-transform: uppercase; letter-spacing: .23em; }
.guide-hero h1 { max-width: 1000px; margin: 0; font-family: var(--display); font-size: clamp(4.4rem, 10vw, 9.8rem); font-weight: 500; letter-spacing: -.07em; line-height: .84; }
.guide-hero h1 em { color: var(--gold); font-weight: 400; }
.guide-lede { max-width: 520px; margin: 38px 0 0; font-family: var(--display); font-size: 1.08rem; line-height: 1.8; }
.guide-home { position: absolute; right: 6vw; top: 26px; z-index: 4; min-height: 44px; padding: 0 6px; display: inline-flex; align-items: center; color: var(--mist); text-decoration: none; font-size: .61rem; text-transform: uppercase; letter-spacing: .15em; }
.guide-home { transition: color .3s, transform .35s var(--ease-out); }
.guide-home:hover, .guide-home:focus-visible { color: var(--gold); transform: translateX(-6px); text-decoration: underline; text-underline-offset: 6px; }
.code-seal { position: absolute; right: 8vw; bottom: 55px; display: flex; align-items: center; gap: 13px; transform: rotate(-7deg); }
.code-seal strong { font-family: var(--display); font-size: 4.5rem; line-height: 1; }
.code-seal span { padding-left: 13px; border-left: 1px solid rgba(242,245,239,.5); font-size: .55rem; text-transform: uppercase; letter-spacing: .15em; }

.guide-body { position: relative; max-width: 1220px; margin: 0 auto; padding: 120px 5vw 140px; display: grid; grid-template-columns: 240px minmax(0, 760px); justify-content: space-between; gap: 8vw; }
.guide-body::before { content: ''; position: absolute; left: calc(5vw + 226px); top: 70px; bottom: 80px; width: 10px; transform: rotate(.8deg); background: linear-gradient(var(--crimson), #8b172a); opacity: .95; }
.guide-index { position: sticky; top: 110px; align-self: start; padding-top: 18px; border-top: 4px solid var(--crimson); }
.guide-index > p { margin: 0; font-family: var(--display); font-size: 1.45rem; }
.guide-index ol { margin: 24px 0 32px; padding: 0; counter-reset: guide; list-style: none; }
.guide-index li { counter-increment: guide; border-top: 1px solid var(--line); }
.guide-index li:last-child { border-bottom: 1px solid var(--line); }
.guide-index a { min-height: 42px; display: flex; align-items: center; text-decoration: none; font-size: .64rem; letter-spacing: .1em; }
.guide-index a::before { content: '0' counter(guide); width: 28px; color: var(--crimson); font-family: var(--display); }
.guide-index a { transition: color .3s, padding-left .4s var(--ease-out); }
.guide-index a:hover, .guide-index a:focus-visible { color: var(--crimson); padding-left: 6px; }
.guide-index > span { color: var(--muted); font-size: .57rem; line-height: 1.9; text-transform: uppercase; letter-spacing: .14em; }
.guide-content section { padding: 0 0 78px; margin-bottom: 80px; border-bottom: 1px solid var(--line); scroll-margin-top: 100px; }
.guide-content section:last-child { margin-bottom: 0; border-bottom: 0; }
.chapter { margin: 0 0 17px !important; color: var(--crimson); font-size: .59rem !important; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; }
.guide-content h2 { margin: 0 0 30px; font-family: var(--display); font-size: clamp(3rem, 5.5vw, 5.6rem); font-weight: 500; letter-spacing: -.06em; line-height: .98; }
.guide-content h3 { margin: 34px 0 9px; font-family: var(--display); font-size: 1.45rem; font-weight: 600; }
.guide-content p { max-width: 690px; margin: 0 0 20px; font-size: .96rem; line-height: 1.9; }
.guide-content .opening { font-family: var(--display); font-size: 1.13rem; line-height: 1.85; }
.guide-content code { padding: 2px 6px; color: #173440; background: rgba(71,96,105,.12); font-family: var(--body); font-size: .84em; }
.path-figure { margin: 38px 0 42px; padding: 25px 28px 17px; color: var(--mist); background: var(--ink); }
.path-figure svg { width: 100%; overflow: visible; }
.path-figure path { fill: none; stroke: var(--crimson); stroke-width: 13; stroke-linecap: round; }
.path-figure circle { fill: var(--gold); stroke: var(--crimson-dark); stroke-width: 2; r: 5; }
.path-figure figcaption { margin-top: 4px; color: #b7c5c2; font-size: .55rem; text-transform: uppercase; letter-spacing: .16em; }
.token-line { margin-top: 35px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.token-line div { padding: 14px 10px; border-right: 1px solid var(--line); }
.token-line div:last-child { border: 0; }
.token-line i { display: block; height: 45px; margin-bottom: 11px; box-shadow: inset 0 0 0 1px rgba(16,42,52,.08); }
.token-line span { font-size: .55rem; text-transform: uppercase; letter-spacing: .09em; }
.type-specimen { margin: 40px 0 14px !important; font-family: var(--display); font-size: clamp(2.2rem, 5vw, 4.7rem) !important; line-height: 1.05 !important; }
.prompt-card { margin-top: 30px; padding: 35px 38px; border-left: 9px solid var(--crimson); color: var(--mist); background: var(--ink); font-family: var(--display); font-size: 1rem; line-height: 1.85; box-shadow: 18px 18px 0 rgba(16,42,52,.08); }

@media (max-width: 700px) {
  .guide-hero { min-height: 740px; padding: 130px 24px 80px; }
  .guide-hero::before { left: -45vw; top: 47%; width: 175vw; height: 112px; }
  .guide-hero h1 { font-size: clamp(4rem, 18vw, 5.4rem); line-height: .87; }
  .guide-lede { margin-top: 30px; font-size: 1rem; }
  .guide-home { right: 14px; }
  .code-seal { right: 24px; bottom: 38px; }
  .code-seal strong { font-size: 3.4rem; }
  .guide-body { display: block; padding: 80px 24px 100px; }
  .guide-body::before { display: none; }
  .guide-index { position: relative; top: auto; margin-bottom: 78px; }
  .guide-index ol { display: grid; grid-template-columns: 1fr 1fr; }
  .guide-index li:nth-child(2) { border-top: 1px solid var(--line); }
  .guide-index a { min-height: 44px; }
  .guide-content section { padding-bottom: 55px; margin-bottom: 58px; }
  .guide-content h2 { font-size: 3.15rem; }
  .path-figure { margin-inline: -8px; padding: 18px 12px 12px; }
  .token-line { grid-template-columns: 1fr 1fr; }
  .token-line div:nth-child(2) { border-right: 0; }
  .token-line div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .prompt-card { padding: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}