@font-face{font-family:"JetBrains Mono";src:url(../fonts/jetbrains-mono-400-normal-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/jetbrains-mono-700-normal-latin.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Metal Mania";src:url(../fonts/metal-mania-400-normal-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Crimson Pro";src:url(../fonts/crimson-pro-400-normal-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Crimson Pro";src:url(../fonts/crimson-pro-600-normal-latin.woff2) format("woff2");font-weight:600;font-display:swap}
:root{
  --void:#050507; --void-2:#0a0a10; --void-3:#14141c; --void-4:#1c1c26;
  --ghost:#e8e6dc; --ghost-dim:#8a877a; --ghost-low:#3a3830;
  --blood:#ff1f2e; --uv:#6f3eff; --crt:#39ff14; --crt-dim:#1a8a09;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --display:"Metal Mania",serif; --serif:"Crimson Pro",Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0; background:var(--void); color:var(--ghost); font-family:var(--serif);
  font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden}
body::before{content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.35;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.35) 2px 3px)}
a{color:var(--crt); text-decoration:none}
a:hover{color:var(--ghost); background:rgba(57,255,20,.09)}
.wrap{max-width:1000px; margin:0 auto; padding:0 26px; position:relative; z-index:2}
.glyph{color:var(--uv); font-family:var(--mono)}
nav{position:sticky; top:0; z-index:5; background:rgba(5,5,7,.92);
  border-bottom:1px solid var(--void-3)}
.nav-in{max-width:1000px; margin:0 auto; padding:14px 26px; display:flex; align-items:center;
  gap:14px; font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase}
.nav-in .brand{color:var(--ghost); font-weight:700}
.nav-in .sep{color:var(--void-4)}
.nav-in .here{color:var(--crt-dim)}
header{padding:64px 0 34px; border-bottom:1px solid var(--void-3); position:relative; z-index:2}
.kicker{font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--crt-dim); margin:0 0 18px}
.kicker b{color:var(--blood); font-weight:700}
h1{font-family:var(--display); font-weight:400; font-size:clamp(2.3rem,7vw,3.8rem);
  line-height:1.05; margin:0 0 16px; color:var(--ghost)}
h1 span{color:var(--blood)}
.sub{color:var(--ghost-dim); max-width:70ch; margin:0 0 26px}
.meta{font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--ghost-low);
  display:flex; flex-wrap:wrap; gap:8px 22px}
.meta b{color:var(--ghost-dim); font-weight:400}
.formats{display:flex; flex-wrap:wrap; gap:10px; margin:28px 0 0}
.formats a{font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--void-4); padding:9px 14px; color:var(--crt-dim)}
.formats a:hover{border-color:var(--crt-dim); color:var(--ghost); background:rgba(57,255,20,.07)}
.notice{border:1px solid var(--void-4); border-left:2px solid var(--uv); background:var(--void-2);
  padding:18px 20px; margin:34px 0 0; color:var(--ghost-dim); font-size:15.5px}
.notice b{color:var(--ghost)}
main{padding:44px 0 80px; position:relative; z-index:2}
pre.doc{white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere;
  font-family:var(--mono); font-size:13.5px; line-height:1.75; color:var(--ghost);
  background:var(--void-2); border:1px solid var(--void-3);
  padding:30px 26px; margin:0; tab-size:2}
@media(max-width:640px){pre.doc{font-size:12.5px; padding:20px 16px}}
footer.site{border-top:1px solid var(--void-3); padding:34px 0 60px; position:relative; z-index:2;
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--ghost-low)}
footer.site a{color:var(--crt-dim)}
footer.site p{margin:0 0 10px}

/* ⸺ annex index ⸺ */
.annexes{margin:44px 0 0}
.annexes h2{font-family:var(--display); font-weight:400; font-size:clamp(1.5rem,4vw,2.1rem);
  margin:0 0 6px; color:var(--ghost)}
.annexes .note{color:var(--ghost-dim); margin:0 0 24px; font-size:15.5px}
.alist{display:grid; grid-template-columns:repeat(auto-fill,minmax(285px,1fr)); gap:12px; margin:0; padding:0; list-style:none}
.alist a{display:block; border:1px solid var(--void-3); background:var(--void-2);
  padding:16px 18px; color:var(--ghost); text-decoration:none}
.alist a:hover{border-color:var(--crt-dim); background:rgba(57,255,20,.04)}
.alist .l{font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--crt-dim); display:block; margin-bottom:7px}
.alist .t{font-size:16px; color:var(--ghost); display:block; line-height:1.35}
.badge{display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; border:1px solid var(--void-4); padding:3px 7px; margin-top:10px;
  color:var(--ghost-low)}
.badge.norm{color:var(--crt-dim); border-color:var(--crt-dim)}
.badge.proc{color:var(--uv); border-color:var(--uv)}

/* ⸺ prev / next ⸺ */
.pager{display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  margin:36px 0 0; padding-top:26px; border-top:1px solid var(--void-3);
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase}
.pager a{color:var(--crt-dim); border:1px solid var(--void-4); padding:10px 15px}
.pager a:hover{border-color:var(--crt-dim); color:var(--ghost); background:rgba(57,255,20,.07)}
.pager .spacer{flex:1}