@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap');
:root{
  --ink:#000000;
  --green:#00ff80;
  --blue:#0000ff;
  --blue-lt:#5a5aff;
  --fg:#f1fff8;
  --dim:#93c9ad;
  --edge:#16301f;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  padding-bottom:196px;
  background:var(--ink);
  color:var(--fg);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:17px;
  line-height:1.75;
  overflow-x:hidden;
}
a{color:inherit}
.hero{
  position:relative;
  overflow:hidden;
  min-height:70vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:18px;
  padding:68px 20px 40px;
  border-top:4px solid var(--green);
  border-bottom:4px solid var(--green);
  background-image:
    linear-gradient(var(--edge) 2px,transparent 2px),
    linear-gradient(90deg,var(--edge) 2px,transparent 2px);
  background-size:56px 56px;
  background-position:-2px -2px;
}
.hero::before{
  content:"";
  position:absolute;
  top:13%;
  right:-56px;
  width:min(56vw,440px);
  height:32%;
  background:var(--blue);
  transform:rotate(-5deg);
  z-index:0;
}
.hero-tag{
  position:relative;
  z-index:1;
  align-self:flex-start;
  margin:0;
  padding:6px 12px;
  background:var(--green);
  color:#000;
  font-size:16px;
  line-height:1.4;
  font-weight:700;
  letter-spacing:.02em;
}
.hero h1{
  position:relative;
  z-index:1;
  margin:0;
  max-width:15em;
  font-size:clamp(2.1rem,8.6vw,5.4rem);
  line-height:.96;
  font-weight:900;
  letter-spacing:-.045em;
  color:#fff;
  word-break:break-word;
}
.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:48px 20px 0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:44px;
}
.block{
  border-left:4px solid var(--blue-lt);
  padding-left:18px;
}
.block>h2{
  margin:0 0 8px;
  font-size:clamp(1.5rem,4.4vw,2rem);
  font-weight:900;
  letter-spacing:-.03em;
  line-height:1.1;
}
.subtitle{
  margin:0 0 30px;
  padding-bottom:16px;
  border-bottom:2px solid var(--blue-lt);
  color:var(--dim);
  font-size:16px;
  line-height:1.6;
}
.prose{
  font-size:17px;
  line-height:1.8;
  overflow-wrap:break-word;
}
.prose p{margin:0 0 1.2em}
.prose h2{
  margin:2.2em 0 .7em;
  padding-top:16px;
  border-top:3px solid var(--green);
  font-size:clamp(1.35rem,3.6vw,1.8rem);
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.02em;
}
.prose h3,.prose h4{
  margin:1.6em 0 .5em;
  font-size:1.12rem;
  font-weight:700;
  line-height:1.35;
}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.5em}
.prose li{margin:0 0 .5em}
.prose a{
  color:var(--green);
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
.prose a:hover{background:var(--green);color:#000;text-decoration:none}
.prose blockquote{
  margin:1.6em 0;
  padding:6px 0 6px 16px;
  border-left:6px solid var(--green);
  color:var(--dim);
}
.prose img{display:block;max-width:100%;height:auto;margin:0 0 1.2em;border:3px solid var(--green)}
.prose table{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:16px}
.prose th,.prose td{border:2px solid var(--edge);padding:8px 10px;text-align:left;vertical-align:top}
.prose th{background:#0c1f15;color:var(--green)}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;background:#0c1f15;padding:1px 5px}
.prose section{scroll-margin-top:28px}
.rail{
  align-self:start;
  border:3px solid var(--green);
  background:#000;
  padding:16px 16px 10px;
}
.rail>h2{
  margin:0 0 14px;
  padding:3px 8px;
  background:var(--green);
  color:#000;
  font-size:16px;
  font-weight:800;
  line-height:1.5;
  letter-spacing:.06em;
}
.rail-list{list-style:none;counter-reset:r;margin:0;padding:0}
.rail-list li{counter-increment:r;border-bottom:2px solid var(--edge)}
.rail-list li:last-child{border-bottom:0}
.rail-list a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:40px;
  padding:6px 4px;
  font-size:16px;
  line-height:1.4;
  text-decoration:none;
  color:var(--fg);
}
.rail-list a::before{content:counter(r,decimal-leading-zero);color:var(--blue-lt);font-weight:700}
.rail-list a:hover{background:var(--green);color:#000}
.rail-list a:hover::before{color:#000}
.dock{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:60;
  background:#000;
  border-top:4px solid var(--green);
  padding:8px 12px;
}
.dock nav{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px}
.dock dl{display:contents;margin:0}
.dock dt{margin:0}
.dock dd{display:none;margin:0}
.dock a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 8px;
  font-size:16px;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  color:#fff;
  border-bottom:2px solid var(--blue-lt);
}
.dock a:hover{background:var(--green);color:#000;border-color:var(--green)}
.dock-brand{
  order:-1;
  flex:0 0 100%;
  margin-bottom:4px;
  padding-bottom:4px;
  text-align:center;
  border-bottom:2px solid var(--edge);
}
.dock-brand a{
  min-height:40px;
  justify-content:center;
  padding:0 6px;
  border-bottom:0;
  color:var(--green);
  font-size:17px;
  font-weight:900;
  letter-spacing:-.02em;
}
.dock-copy{
  margin:6px 0 0;
  text-align:center;
  font-size:16px;
  line-height:1.4;
  color:var(--dim);
}
.has-rv .rv{opacity:0;transform:translateY(12px)}
.has-rv .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .has-rv .rv{opacity:1;transform:none}
}
@media (min-width:760px){
  body{padding-bottom:124px}
  .hero{padding:88px 40px 56px}
  .hero::before{right:-46px;width:min(42vw,420px);height:30%}
  .wrap{
    grid-template-columns:minmax(0,1fr) 248px;
    gap:56px;
    padding:64px 32px 0;
    align-items:start;
  }
  .rail{position:sticky;top:24px}
  .dock{padding:6px 28px}
  .dock nav{flex-wrap:nowrap;gap:14px}
  .dock dl{display:flex;gap:8px;flex:0 0 auto}
  .dock-brand{order:0;flex:1 1 auto;margin:0;padding:0;border:0}
  .dock-copy{margin-top:2px}
}
@media (min-width:1100px){
  .hero{padding-left:56px;padding-right:56px}
  .wrap{padding-left:40px;padding-right:40px}
}

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