@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./assets/montserrat-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./assets/montserrat-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./assets/montserrat-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./assets/montserrat-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./assets/jetbrains-mono-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./assets/jetbrains-mono-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  color-scheme: dark;
  --bg: #050505;
  --ink: #f5f7f5;
  --muted: #b9c2ba;
  --line: #343c35;
  --brand: #2e803a;
  --accent: #a2e9ac;
  --mono: "JetBrains Mono", monospace;
  background: var(--bg);
  color: var(--ink);
  font: 1rem/1.75 Montserrat, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--accent); text-underline-offset: .22em; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.wrap { max-width: 68rem; width: calc(100% - 2.5rem); margin-inline: auto; }
header { border-bottom: 1px solid var(--line); }
.bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 4.75rem; }
.bar img { display: block; width: 137px; height: auto; }
nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; font: .82rem/1 var(--mono); }
nav a { display: inline-block; padding: .8rem .65rem; border-radius: .4rem; }
nav a[aria-current] { background: #152d19; color: var(--ink); text-decoration: none; }
.hero { border-bottom: 1px solid var(--line); background: radial-gradient(ellipse at 85% 35%, #16391c, transparent 45%); }
.intro { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3rem, 7vw, 6rem); }
.intro::after {
  content: ""; position: absolute; z-index: -1; right: clamp(-9rem, 0vw, 2rem); top: 50%;
  translate: 0 -50%; width: clamp(15rem, 34vw, 22rem); aspect-ratio: 1; border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 20px, var(--brand) 21px 22px, transparent 23px 34px);
  opacity: .35; mask-image: linear-gradient(125deg, transparent, black);
}
.kicker, time { font: .84rem/1.6 var(--mono); color: var(--accent); }
.kicker { margin: 0 0 .65rem; letter-spacing: .14em; }
h1 { font-size: clamp(2.35rem, 6vw, 4.75rem); line-height: 1.05; letter-spacing: -.055em; margin: 0 0 1.2rem; }
article { max-width: 46rem; padding-block: 2.25rem 4rem; }
article section { border-top: 1px solid var(--line); padding: 1.35rem 0; }
h2 { font-size: 1.15rem; line-height: 1.4; margin: 0 0 .6rem; }
article p { color: var(--muted); margin: 0; overflow-wrap: anywhere; }
.controller { padding-bottom: 1.35rem; }
.links { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: .75rem 0 0; padding: 0; list-style: none; }
footer { border-top: 1px solid var(--line); padding-block: 1.4rem; color: var(--muted); font: .84rem/1.6 var(--mono); }