.guide-page { background: #0c0907; }
.guide-hero { position: relative; min-height: 78svh; display: flex; align-items: flex-end; padding: 9rem clamp(1.3rem,8vw,8rem) 7rem; overflow: hidden; background: linear-gradient(90deg,rgba(7,5,4,.93) 0%,rgba(7,5,4,.34) 53%,rgba(7,5,4,.72) 100%),linear-gradient(0deg,#0c0907,transparent 35%),url('/assets/gen/stationx/hero.jpg') 50% 45%/cover; isolation: isolate; }
.guide-hero::before { content: ''; position: absolute; z-index: -1; inset: -3%; background: url('/assets/gen/stationx/hero.jpg') 50% 45%/cover; filter: sepia(.3) saturate(.62) contrast(1.2) brightness(.48); animation: guidePush 16s ease-in-out infinite alternate; }
.guide-hero::after { content: 'FIELD MANUAL'; position: absolute; z-index: -1; left: -.035em; bottom: -.18em; color: transparent; font: 700 clamp(7rem,21vw,21rem)/.7 var(--display); letter-spacing: -.055em; -webkit-text-stroke: 1px rgba(224,174,89,.16); white-space: nowrap; }
@keyframes guidePush { to { transform: scale(1.08) translate3d(1%,-1%,0); } }
.guide-frame { position: absolute; inset: 1.4rem; border: 1px solid rgba(224,174,89,.18); pointer-events: none; }
.guide-frame::before,.guide-frame::after { content: ''; position: absolute; width: 60px; height: 60px; border-color: var(--red); opacity: .65; }
.guide-frame::before { left: -1px; top: -1px; border-left: 2px solid var(--red); border-top: 2px solid var(--red); }
.guide-frame::after { right: -1px; bottom: -1px; border-right: 2px solid var(--red); border-bottom: 2px solid var(--red); }
.guide-back { position: absolute; z-index: 2; top: 2.4rem; left: clamp(2.4rem,5vw,5rem); display: inline-flex; align-items: center; gap: .8rem; min-height: 44px; color: var(--lamp); font: 500 .58rem var(--mono); letter-spacing: .16em; text-decoration: none; text-transform: uppercase; }
.guide-back span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(224,174,89,.45); border-radius: 50%; transition: transform .2s,background-color .2s; }
.guide-back:hover span { color: var(--ink); background: var(--lamp); transform: translateX(-4px); }
.guide-classification { position: absolute; top: 3.2rem; right: clamp(2.4rem,5vw,5rem); color: var(--red); font: .52rem var(--mono); letter-spacing: .18em; }
.guide-title { position: relative; z-index: 1; width: min(970px,85vw); animation: dossierIn .9s cubic-bezier(.16,1,.3,1) both; }
@keyframes dossierIn { from { opacity: 0; transform: translateY(28px); } }
.guide-title > p { margin: 0 0 1.2rem; color: var(--amber); font: 500 .62rem var(--mono); letter-spacing: .24em; text-transform: uppercase; }
.guide-title h1 { margin: 0; font: 550 clamp(5.5rem,14vw,14rem)/.61 var(--display); letter-spacing: -.07em; }
.guide-title h1 i { margin-left: .42em; color: var(--amber); font-weight: 300; }
.guide-subtitle { position: absolute; left: 72%; bottom: .4rem; display: grid; padding-left: 1rem; border-left: 2px solid var(--red); font: .55rem/1.6 var(--mono); letter-spacing: .14em; }
.guide-subtitle span { color: #94856e; }.guide-subtitle b { color: var(--cream); }
.guide-register { position: absolute; right: 1.15rem; top: 21%; display: grid; gap: 1rem; }
.guide-register i { width: 7px; height: 7px; border: 1px solid var(--brass); border-radius: 50%; }.guide-register i:nth-child(3) { background: var(--red); box-shadow: 0 0 10px var(--red); }
.guide-doc { padding: clamp(6rem,10vw,10rem) clamp(1.3rem,7vw,7rem); background: radial-gradient(circle at 12% 28%,rgba(224,174,89,.055),transparent 22%),repeating-linear-gradient(90deg,transparent 0 109px,rgba(224,174,89,.018) 110px),#15100c; }
.guide-grid { display: grid; grid-template-columns: 230px minmax(0,820px); gap: clamp(4rem,10vw,11rem); max-width: 1260px; margin: auto; }
.guide-index { position: sticky; top: 2rem; align-self: start; display: grid; padding-top: 1rem; border-top: 1px solid var(--line); font: .56rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.guide-index b { margin-bottom: 1rem; color: var(--red); font-size: .5rem; }
.guide-index a { display: flex; gap: 1rem; align-items: center; min-height: 44px; border-bottom: 1px solid rgba(224,174,89,.09); color: #a99b84; text-decoration: none; transition: color .2s,padding-left .2s; }
.guide-index a span { color: #665943; }.guide-index a:hover { padding-left: .4rem; color: var(--lamp); }
.guide-body article { position: relative; scroll-margin-top: 2rem; padding: 0 0 clamp(4.5rem,8vw,7rem); margin: 0 0 clamp(4.5rem,8vw,7rem); border-bottom: 1px solid var(--line); }
.guide-body article:last-child { margin-bottom: 0; border: 0; }
.article-mark { margin-bottom: 1.6rem; color: var(--red); font: .55rem var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.guide-body h2 { margin: 0 0 2.3rem; font-size: clamp(3.4rem,6.2vw,6rem); line-height: .82; }
.guide-body h2 i { font-weight: 300; }
.guide-body p { max-width: 760px; color: #c9bca4; font-size: 1.08rem; line-height: 1.78; }
.guide-body code { padding: .12rem .35rem; color: var(--lamp); background: #090705; font: .78em var(--mono); }
.principle { display: grid; gap: .7rem; margin: 3rem 0 0 12%; padding: 1.5rem 1.8rem; border-left: 3px solid var(--red); background: rgba(7,5,4,.46); }
.principle span { color: var(--red); font: .5rem var(--mono); letter-spacing: .15em; text-transform: uppercase; }.principle b { max-width: 560px; color: var(--cream); font: 400 1.65rem/1.3 var(--display); }
.frame-diagram { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-top: 2.5rem; padding: 1px; border: 1px solid #3f2e1d; background: #3f2e1d; font: .52rem var(--mono); letter-spacing: .1em; }
.frame-diagram span { min-height: 92px; padding: .8rem; color: #9d8d73; background: #0c0907; }.frame-diagram b { grid-column: 1/-1; padding: 1rem; color: var(--ink); background: var(--amber); text-align: center; }
.logic-strip { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: .8rem; margin-top: 2.6rem; padding: 1.2rem; border: 1px solid var(--line); background: #0b0806; }
.logic-strip span { color: var(--cream); font: .58rem/1.6 var(--mono); letter-spacing: .08em; }.logic-strip i { color: var(--red); font-style: normal; }
.pipeline-strip { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: .9rem; margin-top: 2.6rem; padding: 1.1rem; border: 1px solid var(--line); background: linear-gradient(115deg,#090705,#171009); }
.pipeline-strip span { display: grid; gap: .35rem; min-height: 76px; place-content: center; padding: .7rem; border: 1px solid rgba(224,174,89,.13); color: var(--cream); font: 500 .58rem var(--mono); letter-spacing: .09em; text-align: center; }
.pipeline-strip small { color: #8f8069; font-size: .48rem; text-transform: lowercase; }.pipeline-strip i { color: var(--red); font-style: normal; }
.token-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 5px; margin: 2.5rem 0; }
.token { min-height: 145px; display: flex; flex-direction: column; justify-content: flex-end; gap: .25rem; padding: 1rem; border: 1px solid rgba(224,174,89,.22); color: #f3e7ce; font: .49rem var(--mono); }
.token b { font-weight: 500; }.token span { opacity: .78; text-transform: uppercase; }
.token:nth-child(1) { background:#0c0a08; }.token:nth-child(2) { background:#17120d; }.token:nth-child(3) { color:#241b11; background:#e0ae59; }.token:nth-child(4) { color:#241b11; background:#e9ddc1; }.token:nth-child(5) { background:#ba352b; }
.type-specimen { position: relative; margin-top: 2.5rem; padding: 2.2rem; border: 1px solid var(--line); background: #0b0806; overflow: hidden; }
.type-specimen::after { content: 'X'; position: absolute; right: -.1em; top: -.35em; color: transparent; font: 700 10rem var(--display); -webkit-text-stroke: 1px rgba(224,174,89,.12); }
.type-specimen b { position: relative; z-index: 1; display: block; color: var(--cream); font: 500 clamp(2.2rem,4vw,3.5rem) var(--display); }.type-specimen code { position: relative; z-index: 1; display: block; margin-top: 1rem; padding: 0; color: var(--amber); background: none; font: 500 .68rem var(--mono); letter-spacing: .12em; }
.prompt-card { position: relative; margin-top: 2.5rem; padding: 2.7rem; color: #302316; background: radial-gradient(circle at 82% 14%,rgba(255,255,255,.38),transparent 24%),repeating-linear-gradient(0deg,rgba(57,43,27,.035) 0 1px,transparent 1px 5px),#d4c39f; box-shadow: 17px 24px 45px rgba(0,0,0,.4); transform: rotate(-.35deg); }
.prompt-card::after { content: 'APPROVED'; position: absolute; right: 1.5rem; top: 1rem; padding: .35rem .6rem; border: 3px solid rgba(151,40,32,.45); color: rgba(151,40,32,.55); font: 700 .7rem var(--mono); letter-spacing: .14em; transform: rotate(7deg); }
.prompt-card > span { display: block; margin-bottom: 1rem; color: #8f2922; font: .52rem var(--mono); letter-spacing: .14em; text-transform: uppercase; }.prompt-card p { margin: 0; color: #302316; font: 500 .8rem/1.75 var(--mono); }

@media (max-width: 700px) {
  .guide-hero { min-height: 650px; padding: 8rem 1.25rem 5.5rem; background-position: 61% center; }
  .guide-frame { inset: .7rem; }
  .guide-back { top: 1.2rem; left: 1.25rem; }
  .guide-classification { top: 4.7rem; right: 1.25rem; font-size: .43rem; }
  .guide-title { width: 100%; }
  .guide-title h1 { font-size: clamp(5.6rem,29vw,7rem); line-height: .62; }
  .guide-title h1 i { margin-left: .08em; }
  .guide-subtitle { position: static; margin: 2.2rem 0 0 1rem; }
  .guide-register { display: none; }
  .guide-grid { grid-template-columns: 1fr; gap: 4rem; }
  .guide-index { position: static; grid-template-columns: 1fr 1fr; }
  .guide-index b { grid-column: 1/-1; }
  .guide-index a { padding-right: .4rem; }
  .guide-body article { scroll-margin-top: 1rem; }
  .guide-body h2 { font-size: clamp(3.2rem,15vw,4.5rem); }
  .principle { margin-left: 0; }
  .frame-diagram { grid-template-columns: 1fr 1fr; }
  .logic-strip { grid-template-columns: 1fr; gap: .45rem; }.logic-strip i { transform: rotate(90deg); justify-self: center; }
  .pipeline-strip { grid-template-columns: 1fr; }.pipeline-strip i { transform: rotate(90deg); justify-self: center; }
  .token-grid { grid-template-columns: 1fr 1fr; }.token { min-height: 102px; }.token:last-child { grid-column: 1/-1; }
  .prompt-card { padding: 3.2rem 1.4rem 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .guide-hero::before,.guide-title { animation: none; }
}