:root{
  --bg:#050807;
  --ph:#4af08b;
  --ph-hi:#8affc0;
  --ph-dim:#2f9459;
  --amber:#ffb454;
  --body:#a9cbb6;
  --faint:#5d8a6e;
  --line:#12291c;
  --panel:#070d0a;
  --mono:"Berkeley Mono","SF Mono","JetBrains Mono","Fira Code",Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--body);font:15px/1.7 var(--mono);-webkit-font-smoothing:antialiased}
::selection{background:#1c5c38;color:#eafff2}
a{color:var(--ph);text-decoration:none}
a:hover{color:var(--ph-hi);text-shadow:0 0 8px rgba(74,240,139,.45)}
code{font-family:var(--mono);font-size:.92em}

/* CRT overlay reuses the .glow div every page already has */
.glow{position:fixed;inset:0;pointer-events:none;z-index:60;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.14) 2px 3px)}
.glow::after{content:"";position:fixed;inset:0;
  background:radial-gradient(ellipse 130% 100% at 50% 45%,transparent 55%,rgba(0,0,0,.4) 100%)}

.wrap{max-width:1000px;margin:0 auto;padding:0 22px;position:relative;z-index:1}
nav{display:flex;align-items:center;gap:16px;padding:12px 22px;max-width:1000px;margin:0 auto;position:relative;z-index:2;border-bottom:1px solid var(--line);font-size:.85rem}
nav .brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ph);text-shadow:0 0 10px rgba(74,240,139,.35)}
nav .brand:hover{text-decoration:none;color:var(--ph-hi)}
nav .brand img{width:22px;height:22px}
nav .spacer{flex:1}
nav a.lnk{color:var(--faint)}
nav a.lnk:hover{color:var(--ph);text-decoration:none}
nav a.lnk[aria-current]{color:var(--ph)}
.btn{display:inline-block;padding:9px 18px;font-size:.88rem;border:1px solid var(--line);color:var(--ph)}
.btn:hover{text-decoration:none;border-color:var(--ph-dim);text-shadow:0 0 8px rgba(74,240,139,.45)}
.btn.primary{background:var(--panel);border-color:var(--ph-dim)}

h1{font-size:1.5rem;line-height:1.3;font-weight:700;color:#d7f5e2}
h2{font-size:1.05rem;margin:0 0 8px;color:var(--ph);text-shadow:0 0 7px rgba(74,240,139,.3);font-weight:700}
h3{font-size:.95rem;margin:0 0 6px;color:#d7f5e2}
p{margin:0 0 14px}
.grad{color:var(--amber)}
.js .reveal{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
footer{border-top:1px solid var(--line);margin-top:90px;padding:30px 0;color:var(--faint);font-size:.82rem}
footer a{color:var(--faint)}
footer a:hover{color:var(--ph)}

/* docs layout */
.doc{display:grid;grid-template-columns:212px 1fr;gap:44px;padding:34px 0 0}
.doc aside{position:sticky;top:20px;align-self:start;font-size:.85rem}
.doc aside .grp{color:#3d5c4a;text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;margin:18px 0 7px}
.doc aside a{display:block;color:var(--faint);padding:3px 0;white-space:pre}
.doc aside a::before{content:"  "}
.doc aside a:hover{color:var(--ph);text-decoration:none}
.doc aside a[aria-current]{color:var(--ph)}
.doc aside a[aria-current]::before{content:"> "}
.doc article{min-width:0}
.doc article h1{margin-bottom:10px}
.doc article h1::before{content:"$ ";color:var(--faint)}
.doc article h2{margin-top:36px;padding-top:6px}
.doc article h2::before{content:"## ";color:var(--faint);font-weight:400}
.doc article ul,.doc article ol{margin:0 0 14px 22px}
.doc article li{margin:5px 0}
.doc article li::marker{color:var(--faint)}
.doc article pre{background:var(--panel);border:1px solid var(--line);padding:14px 16px;overflow-x:auto;margin:0 0 16px;font-family:var(--mono);font-size:.85rem;line-height:1.6;color:var(--ph);box-shadow:inset 0 0 30px rgba(74,240,139,.03)}
.doc article :not(pre)>code{color:var(--ph);background:var(--panel);border:1px solid var(--line);padding:1px 6px}
.doc article table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:.85rem;display:block;overflow-x:auto}
.doc article th,.doc article td{border:1px solid var(--line);padding:7px 11px;text-align:left}
.doc article th{background:var(--panel);color:var(--faint);font-weight:400;text-transform:uppercase;font-size:.72rem;letter-spacing:.1em}
.doc article img{max-width:100%;border:1px solid var(--line)}
.note{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--amber);padding:12px 16px;margin:0 0 16px;font-size:.88rem}
.term-shot{border:1px solid var(--line);background:var(--panel);padding:8px;margin:0 0 16px}
.term-shot img{display:block;width:100%;border:none}
.term-shot .cap{color:#3d5c4a;font-size:.76rem;padding:8px 6px 2px}
@media(max-width:760px){.doc{grid-template-columns:1fr;gap:20px}.doc aside{position:static}}

/* guide ergonomics */
.pre-wrap{position:relative;margin:0 0 16px}
.pre-wrap pre{margin:0}
.pre-copy{position:absolute;top:8px;right:8px;background:var(--bg);border:1px solid var(--line);color:var(--faint);font:inherit;font-size:.72rem;padding:3px 10px;cursor:pointer;opacity:0;transition:opacity .15s}
.pre-wrap:hover .pre-copy,.pre-copy:focus{opacity:1}
.pre-copy:hover{color:var(--ph);border-color:var(--ph-dim)}
.hlink{opacity:0;color:var(--faint);font-weight:400}
h2:hover .hlink{opacity:1}
.hlink:hover{color:var(--ph);text-decoration:none}
.pn{display:flex;justify-content:space-between;gap:16px;margin-top:56px;padding-top:18px;border-top:1px solid var(--line);font-size:.88rem}