:root {
  color-scheme: dark;
  --ink: #eef2ef;
  --muted: #91a09a;
  --accent: #b8ff5a;
  --surface: #111713;
  --line: #2a352e;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: #080b09; }
body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  color: var(--ink);
  background: radial-gradient(circle at 78% 18%, #1d3022 0, transparent 30rem), #080b09;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
main { width: min(68rem, calc(100% - 3rem)); margin: auto; padding: 6rem 0; }
.eyebrow { margin: 0 0 2rem; color: var(--accent); letter-spacing: .14em; font-size: .76rem; }
h1 { max-width: 12ch; margin: 0; font: 700 clamp(3rem, 9vw, 7.8rem)/.88 system-ui, sans-serif; letter-spacing: -.065em; }
.lede { max-width: 44rem; margin: 2.5rem 0; color: var(--muted); font: 400 clamp(1rem, 2.2vw, 1.35rem)/1.65 system-ui, sans-serif; }
nav { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: .35rem; }
a:hover, a:focus { color: var(--accent); }
.signal { display: flex; gap: .45rem; align-items: end; height: 3rem; margin-top: 4rem; }
.signal span { display: block; width: .5rem; background: var(--accent); border-radius: 1rem; }
.signal span:nth-child(1) { height: 25%; opacity: .35; }
.signal span:nth-child(2) { height: 50%; opacity: .55; }
.signal span:nth-child(3) { height: 75%; opacity: .75; }
.signal span:nth-child(4) { height: 100%; }
footer { width: min(68rem, calc(100% - 3rem)); margin: 0 auto; padding: 1.5rem 0 2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .72rem; }
@media (max-width: 36rem) { main { padding: 4rem 0; } }