@import url('https://fonts.googleapis.com/css2?family=Exo:wght@300;400;500;600;700&family=Roboto+Mono:wght@300;400;500;700&display=swap');

:root{
  --ink:#0d0d0d;
  --panel:#130b1d;
  --violet:#8000ff;
  --magenta:#ff00ff;
  --text:#ddd2f2;
  --muted:#a48fc4;
  --line:rgba(128,0,255,.30);
  --glow:0 0 14px rgba(255,0,255,.45);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:
    radial-gradient(70vw 60vh at 88% -10%,rgba(128,0,255,.22),transparent 70%),
    radial-gradient(50vw 50vh at 0% 100%,rgba(255,0,255,.13),transparent 70%),
    var(--ink);
  background-attachment:fixed;
  color:var(--text);
  font:400 16px/1.75 "Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:9;
  pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(128,0,255,.07) 0 1px,rgba(0,0,0,0) 1px 3px);
}
::selection{background:rgba(255,0,255,.4);color:#fff}
a{color:#ff8bff}
img{max-width:100%}

.frame{padding-left:236px}

.topbar{
  position:fixed;
  top:0;left:0;
  z-index:8;
  width:236px;
  display:flex;
  align-items:center;
  padding:20px 0 0 18px;
}

.sigil{
  display:grid;
  place-items:center;
  width:46px;height:46px;
  border:1px solid rgba(255,0,255,.6);
  border-radius:12px;
  background:rgba(13,13,13,.9);
  color:#ff8bff;
  font:700 20px/1 "Exo",sans-serif;
  text-decoration:none;
  box-shadow:0 0 18px rgba(255,0,255,.35);
  transition:transform .18s ease,box-shadow .18s ease;
}
.sigil:hover,.sigil:focus-visible{transform:skewX(-8deg);box-shadow:0 0 26px rgba(255,0,255,.7)}

.rail{
  position:fixed;
  top:0;left:0;bottom:0;
  z-index:6;
  width:236px;
  padding:96px 18px 32px;
  overflow-y:auto;
  border-right:1px solid var(--line);
  background:linear-gradient(180deg,rgba(19,11,29,.98),rgba(13,13,13,.94));
}

.rail>ol{list-style:none;margin:0;padding:0}
.rail>ol>li{margin-bottom:6px}
.rail>ol>li>a{
  display:block;
  min-height:44px;
  padding:12px 12px 12px 14px;
  color:#cdb9ec;
  font-size:15px;
  line-height:1.35;
  letter-spacing:.03em;
  text-decoration:none;
  border-left:2px solid rgba(128,0,255,.35);
  border-radius:0 10px 10px 0;
  transition:color .2s,background .2s,border-color .2s,box-shadow .2s;
}
.rail>ol>li>a:hover,.rail>ol>li>a:focus-visible{
  color:#fff;
  background:rgba(128,0,255,.16);
  border-left-color:var(--magenta);
  box-shadow:inset 0 0 22px rgba(255,0,255,.18);
  text-shadow:var(--glow);
}
.rail ul{list-style:none;margin:2px 0 0;padding:0 0 0 12px}
.rail ul a{
  display:block;
  min-height:40px;
  padding:9px 10px;
  color:var(--muted);
  font-size:14px;
  line-height:1.35;
  text-decoration:none;
  border-left:1px dashed rgba(128,0,255,.25);
}
.rail ul a:hover,.rail ul a:focus-visible{color:#ffb3ff;text-shadow:var(--glow)}

main{padding:0 clamp(16px,3vw,48px)}
.wrap{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:186px minmax(0,1fr);
  grid-template-areas:"side hero" "side read";
  gap:26px;
  align-items:start;
}

.hero{
  grid-area:hero;
  position:relative;
  min-height:70vh;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:30px;
  align-items:center;
  padding:64px 0 56px;
  overflow:hidden;
}
.hero::after{
  content:"01";
  position:absolute;
  right:-.06em;
  bottom:-.16em;
  z-index:0;
  font:700 clamp(110px,17vw,230px)/1 "Exo",sans-serif;
  color:rgba(128,0,255,.10);
  -webkit-text-stroke:1px rgba(255,0,255,.22);
  pointer-events:none;
}
.hero-copy{position:relative;z-index:1;max-width:56ch}
.hero-copy h2{
  margin:0;
  font:500 13px/1.5 "Roboto Mono",monospace;
  letter-spacing:.32em;
  color:#ff7bff;
  text-shadow:var(--glow);
  animation:flick 5s ease-in-out infinite;
}
.hero-copy hr{
  width:72px;height:2px;
  border:0;
  margin:12px 0 18px;
  background:linear-gradient(90deg,var(--magenta),var(--violet),transparent);
}
h1{
  margin:0;
  font:700 clamp(28px,4.4vw,50px)/1.16 "Exo",sans-serif;
  letter-spacing:-.01em;
  color:#fff;
  text-shadow:0 0 18px rgba(255,0,255,.45),0 0 44px rgba(128,0,255,.42);
}
.lede{margin:16px 0 0;max-width:44ch;color:#bda9dc}

.hero-fig{margin:0;position:relative;z-index:1}
.hero-fig img{
  display:block;
  width:100%;
  height:auto;
  border-radius:24px;
  border:1px solid rgba(255,0,255,.32);
  box-shadow:0 0 0 1px rgba(128,0,255,.2),0 24px 60px rgba(0,0,0,.65),0 0 42px rgba(128,0,255,.28);
}

.side{
  grid-area:side;
  position:sticky;
  top:88px;
  margin-top:56px;
  padding:16px 14px 18px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(19,11,29,.72);
  box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.side h2{
  margin:0;
  font:600 13px/1.4 "Exo",sans-serif;
  letter-spacing:.24em;
  color:var(--magenta);
}
.side hr{height:1px;border:0;margin:10px 0 12px;background:linear-gradient(90deg,var(--magenta),transparent)}
.side ol{list-style:none;margin:0;padding:0;counter-reset:s}
.side li a{
  display:block;
  min-height:40px;
  padding:9px 2px;
  color:#bda9dc;
  font-size:14px;
  line-height:1.35;
  text-decoration:none;
  border-bottom:1px solid rgba(128,0,255,.14);
}
.side li a::before{
  counter-increment:s;
  content:counter(s,decimal-leading-zero);
  margin-right:8px;
  color:#a06bff;
  font-size:12px;
}
.side li a:hover,.side li a:focus-visible{color:#fff;text-shadow:var(--glow)}

.reader{grid-area:read;padding-bottom:8px}
.body{
  padding:clamp(20px,3vw,40px);
  border:1px solid var(--line);
  border-radius:28px;
  background:linear-gradient(180deg,rgba(19,11,29,.93),rgba(13,13,13,.93));
  box-shadow:0 26px 70px rgba(0,0,0,.6),inset 0 0 60px rgba(128,0,255,.06);
}
.body h2{
  margin:0 0 2px;
  font:600 clamp(21px,2.4vw,28px)/1.3 "Exo",sans-serif;
  color:#fff;
  text-shadow:0 0 16px rgba(128,0,255,.55);
}
.body h2+hr{
  height:2px;
  border:0;
  margin:12px 0 20px;
  background:linear-gradient(90deg,var(--violet),rgba(255,0,255,.5),transparent);
}
.body h3{
  margin:26px 0 8px;
  font:600 18px/1.45 "Exo",sans-serif;
  color:#ffb3ff;
}
.body p{margin:0 0 16px}
.body ul,.body ol{margin:0 0 16px;padding-left:22px}
.body li{margin:6px 0}
.body a{color:#ff8bff;text-underline-offset:3px}
.body blockquote{
  margin:0 0 16px;
  padding:12px 16px;
  border-left:3px solid var(--magenta);
  border-radius:0 12px 12px 0;
  background:rgba(255,0,255,.06);
}
.body code{
  padding:1px 5px;
  border-radius:4px;
  background:rgba(128,0,255,.18);
  font-family:"Roboto Mono",monospace;
  font-size:.95em;
}
.body table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:15px}
.body th,.body td{border:1px solid rgba(128,0,255,.3);padding:8px 10px;text-align:left}
.body img{height:auto;border-radius:16px}
.body section+section{margin-top:38px;padding-top:34px;border-top:1px dashed rgba(128,0,255,.28)}
.body section[id]{scroll-margin-top:24px}

.foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 20px;
  max-width:1180px;
  margin:44px auto 0;
  padding:22px clamp(16px,3vw,48px) 34px;
  border-top:1px solid var(--line);
}
.foot-brand{display:flex;align-items:center;gap:10px;color:#cbb6ea;font-size:15px}
.mini{
  display:grid;
  place-items:center;
  width:34px;height:34px;
  border:1px solid rgba(255,0,255,.5);
  border-radius:10px;
  color:#ff8bff;
  font:700 15px/1 "Exo",sans-serif;
  text-decoration:none;
}
.foot-nav ol{display:flex;flex-wrap:wrap;gap:0 14px;list-style:none;margin:0;padding:0}
.foot-nav a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  color:var(--muted);
  font-size:14px;
  text-decoration:none;
}
.foot-nav a:hover,.foot-nav a:focus-visible{color:#fff;text-shadow:var(--glow)}
.foot-legal{color:#8a76a8;font-size:13px}

.totop{
  position:fixed;
  right:14px;bottom:14px;
  z-index:10;
  min-height:44px;
  padding:10px 15px;
  border:1px solid rgba(255,0,255,.45);
  border-radius:12px;
  background:rgba(13,13,13,.92);
  color:#ffb3ff;
  font:500 14px/1.2 "Roboto Mono",monospace;
  letter-spacing:.06em;
  cursor:pointer;
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .25s,transform .25s;
}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{box-shadow:0 0 20px rgba(255,0,255,.5)}

.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.js .reveal.in{opacity:1;transform:none}

@keyframes flick{
  0%,100%{opacity:1}
  48%{opacity:.82}
  52%{opacity:.94}
}

@media (min-width:900px){
  .rail ul{max-height:0;overflow:hidden;padding-left:12px;transition:max-height .28s ease}
  .rail li:hover>ul,.rail li:focus-within>ul{max-height:180px}
}

@media (max-width:899px){
  .frame{padding-left:0;display:flex;flex-direction:column}
  .topbar{position:static;width:auto;order:0;padding:16px 16px 6px}
  main{order:1;padding:0 16px}
  .rail{
    order:2;
    position:static;
    width:auto;
    padding:14px 16px 16px;
    border-right:0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:rgba(19,11,29,.55);
    overflow:visible;
  }
  .rail>ol{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px}
  .rail>ol>li{margin-bottom:0}
  .rail>ol>li>a{padding:10px 8px;font-size:14px}
  .foot{order:3;flex-direction:column;align-items:flex-start;gap:12px;padding-bottom:28px}
  .wrap{
    grid-template-columns:1fr;
    grid-template-areas:"hero" "side" "read";
    gap:20px;
  }
  .hero{grid-template-columns:1fr;min-height:0;padding:34px 0 30px;gap:22px}
  .hero::after{font-size:120px;opacity:.8;bottom:-.1em}
  .side{position:static;margin-top:6px}
  h1{font-size:clamp(26px,7.2vw,34px)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .hero-copy h2{animation:none}
  .sigil,.totop,.rail a,.side a{transition:none}
}

button[aria-expanded]{min-width:44px;min-height:44px}