.guide-body { background: #0a0b08; }
.guide-rail { grid-template-columns: 160px 1fr auto; }
.guide-battery { max-width: 620px; width: 100%; justify-self: center; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; color: var(--green); font: 400 8px/1 var(--display); }
.guide-battery span em { font-style:normal; }
.guide-battery i { display: block; position:relative; overflow:hidden; width: 100%; min-width: 40px; height: 9px; border: 1px solid var(--green); background:rgba(121,236,152,.05); }
.guide-battery i u { display:block; width:100%; height:100%; background:repeating-linear-gradient(90deg,var(--green) 0 18px,transparent 18px 22px); transform-origin:left; will-change:transform; }
.guide-battery b { font-weight: 400; }
.back-link { min-height: 44px; display: inline-flex; align-items: center; color: var(--amber); font: 400 9px/1 var(--display); text-decoration: none; transition:color .22s,text-shadow .22s; }
.back-link:hover { color:var(--green); text-shadow:0 0 13px rgba(121,236,152,.3); }
.guide-shell { padding-top: 72px; }
.guide-hero { min-height: 78vh; padding: 110px max(36px, calc((100vw - 1280px)/2)) 70px; display: grid; align-content: center; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: linear-gradient(90deg,rgba(121,236,152,.025) 1px,transparent 1px),radial-gradient(circle at 78% 35%, rgba(131,230,154,.11), transparent 24%),#0a0b08; background-size:8.333% 100%,auto,auto; }
.guide-hero::after { content: 'AUX'; position: absolute; right: -3vw; bottom: -8vw; color: rgba(242,165,43,.045); font: 700 30vw/.8 var(--display); letter-spacing: -.15em; }
.guide-code { position: relative; z-index: 2; color: var(--green); font: 400 9px/1 var(--display); }
.guide-hero h1 { position: relative; z-index: 2; margin: 28px 0 40px; max-width:1100px; font: 900 clamp(66px,10vw,152px)/.72 var(--body); letter-spacing: -.095em; }
.guide-hero h1 span { display:block; margin-left:8%; color: var(--amber); font-family:var(--display); font-size:.74em; letter-spacing:-.12em; }
.guide-hero > p { position: relative; z-index: 2; max-width: 690px; color: #d8cfb8; font-size: clamp(20px,2.2vw,31px); line-height: 1.38; letter-spacing: -.025em; }
.guide-specs { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 35px; }
.guide-specs span { padding: 9px 11px; border: 1px solid var(--line); color: var(--muted); font: 400 8px/1 var(--display); background: var(--black); }
.manual-rail { position:absolute; z-index:2; right:max(36px,calc((100vw - 1280px)/2)); top:50%; width:175px; display:grid; border-top:1px solid rgba(121,236,152,.4); }
.manual-rail span { min-height:42px; display:flex; align-items:center; justify-content:flex-end; border-bottom:1px solid var(--line); color:var(--green); font:400 7px/1 var(--display); }
.manual-rail span:nth-child(n+2){color:var(--amber)}
.guide-article { width: var(--content); margin: 0 auto; padding: 120px 0 150px; display: grid; grid-template-columns: 230px minmax(0,820px); gap: clamp(55px,9vw,140px); align-items: start; }
.guide-toc { position: sticky; top: 110px; display: grid; border-top: 1px solid var(--line); }
.guide-toc span { padding: 16px 0; color: var(--green); font: 400 8px/1 var(--display); }
.guide-toc a { min-height: 46px; padding: 15px 4px; border-bottom: 1px solid var(--line); color: var(--muted); font: 400 9px/1 var(--display); text-decoration: none; transition:color .22s,padding .32s cubic-bezier(.16,.8,.2,1),background .22s; }
.guide-toc a:hover,.guide-toc a:focus-visible { color: var(--amber); padding-left: 10px; background:linear-gradient(90deg,rgba(245,166,35,.06),transparent); }
.guide-copy section { padding-bottom: 110px; margin-bottom: 110px; border-bottom: 1px solid var(--line); scroll-margin-top: 110px; }
.guide-copy section:last-child { margin-bottom: 0; }
.guide-index { margin-bottom: 35px; color: var(--amber); font: 400 9px/1 var(--display); }
.guide-copy h2 { max-width: 840px; font-size: clamp(34px,5vw,64px); line-height: 1.03; letter-spacing:-.045em; word-spacing:.08em; }
.guide-copy p { max-width: 740px; color: #c5bdab; font-size: 18px; line-height: 1.75; }
.guide-copy strong { color: var(--bone); font-weight: 600; }
.guide-copy code { padding: 2px 5px; color: var(--green); background: rgba(131,230,154,.07); font-family: var(--display); font-size: .72em; overflow-wrap: anywhere; }
.load-ladder { margin:55px 0 5px; display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); }
.load-ladder article { min-height:210px; padding:22px; position:relative; border-right:1px solid var(--line); background:linear-gradient(to bottom,rgba(121,236,152,.045),transparent); transition:background .3s,transform .3s cubic-bezier(.16,.8,.2,1); }
.load-ladder article:hover { background:linear-gradient(to bottom,rgba(121,236,152,.11),transparent); transform:translateY(-4px); }
.load-ladder article:last-child{border-right:0;background:linear-gradient(to bottom,rgba(245,166,35,.07),transparent)}
.load-ladder b { display:block; color:var(--green); font:400 24px/1 var(--display); }
.load-ladder span { display:block; margin:38px 0 12px; color:var(--amber); font:400 8px/1 var(--display); }
.load-ladder p { margin:0; color:var(--muted); font-size:13px; line-height:1.45; }
.swatches { display: grid; grid-template-columns: repeat(2,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin: 55px 0 38px; }
.swatches div { min-height: 150px; padding: 18px; display: grid; grid-template-columns: 56px 1fr; align-content: end; gap: 6px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font: 400 8px/1.4 var(--display); }
.swatches i { grid-row: 1/3; width: 56px; height: 56px; background: var(--swatch); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 0 24px color-mix(in srgb, var(--swatch) 35%, transparent); }
.swatches span { color: var(--bone); align-self: end; }
.swatches b { color: var(--muted); font-weight: 400; }
.reproduce { position: relative; }
.reproduce::before { content: '>'; position: absolute; left: -60px; top: 60px; color: var(--green); font: 700 30px/1 var(--display); animation: colonBlink 1s steps(1) infinite; }
.guide-footer { position: relative; }

@media (max-width: 760px) {
  .guide-rail { grid-template-columns: 74px 1fr auto; }
  .guide-battery { display: block; width: 100%; }
  .guide-battery span, .guide-battery b { display: none; }
  .back-link { font-size: 0; }
  .back-link::after { content: '← NIGHT'; font: 400 8px/1 var(--display); }
  .guide-shell { padding-top: 66px; }
  .guide-hero { min-height: 650px; padding: 90px 16px 55px; }
  .guide-hero h1 { font-size: clamp(52px,16vw,70px); }
  .guide-hero h1 span { margin:8px 0 0; font-size:.78em; }
  .manual-rail { position:relative; right:auto; top:auto; width:100%; margin-top:42px; grid-template-columns:repeat(2,1fr); }
  .manual-rail span { justify-content:flex-start; padding:0 9px; border-right:1px solid var(--line); }
  .guide-article { width: calc(100vw - 32px); padding: 80px 0 100px; grid-template-columns: 1fr; gap: 60px; }
  .guide-toc { position: relative; top: auto; grid-template-columns: repeat(2,1fr); }
  .guide-toc span { grid-column: 1/-1; }
  .guide-copy section { padding-bottom: 75px; margin-bottom: 75px; }
  .guide-copy p { font-size: 16px; }
  .load-ladder { grid-template-columns:1fr; }
  .load-ladder article { min-height:140px; border-right:0; border-bottom:1px solid var(--line); }
  .load-ladder article:last-child{border-bottom:0}
  .load-ladder span { margin-top:22px; }
  .swatches { grid-template-columns: 1fr; }
  .swatches div { min-height: 120px; }
  .reproduce::before { display: none; }
}

@media (prefers-reduced-motion: reduce) { .reproduce::before { animation: none; } }