@font-face { font-family: "Instrument Sans"; src: url(fonts/instrument-sans-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(fonts/instrument-sans-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
:root {
  --bg: #080d16; --panel: #0c1320; --line: #22304a; --ink: #e8eef7; --mute: #8d9cb3;
  --amber: #f5a524; --fresh: #ff5e3a; --aurora: #4fe3a1;
  --sans: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; color: var(--ink); font: 17px/1.65 var(--sans);
  background: radial-gradient(120% 60% at 50% -10%, #12203a 0%, var(--bg) 60%) no-repeat, var(--bg); }
.top, main, footer { max-width: 760px; margin: 0 auto; padding-inline: 16px; }
.top { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; padding-block: 28px 8px; }
.brand { display: inline-flex; align-items: center; gap: .4em; font-size: 26px; letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.brand b { color: var(--amber); }
.mark { width: .62em; height: .62em; border-radius: 50%; border: .08em solid var(--ink); position: relative; flex: none; }
.mark::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: var(--fresh); }
nav { display: flex; gap: 18px; font: 500 13px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
nav a { color: var(--mute); text-decoration: none; }
nav a[aria-current="page"], nav a:hover { color: var(--ink); }
main { padding-block: 24px 48px; }
h1 { font-size: clamp(30px, 6vw, 44px); line-height: 1.12; letter-spacing: -.02em; margin: 24px 0 16px; text-wrap: balance; }
h2 { font-size: 22px; margin: 40px 0 8px; letter-spacing: -.01em; }
p, li { color: #cfd8e6; overflow-wrap: anywhere; }
strong { color: var(--ink); }
a { color: var(--amber); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 2px; }
ul { padding-left: 1.2em; }
li { margin: 6px 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0 20px; }
code { font: 500 .9em var(--mono); }
footer { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding-block: 20px 40px; border-top: 1px solid var(--line); color: var(--mute); font: 500 12px/1.6 var(--mono); }
footer a { color: var(--mute); }