@font-face { font-family: 'Silkscreen'; font-weight: 700; font-display: swap; src: url('/fonts/silkscreen-700-latin.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400 700; font-display: swap; src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2'); }
:root { --bg: #070d19; --panel: #0d1729; --line: #22304a; --text: #d6e6f7; --muted: #8b9bb8; --cyan: #5ad8f0; --gold: #ffd166; }
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; color: var(--text); font: 15px/1.7 'JetBrains Mono', ui-monospace, monospace; background: var(--bg); }
.wrap { max-width: 760px; margin: 0 auto; padding-inline: 18px; padding-block: 28px 64px; }
nav { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-bottom: 28px; font-size: 13px; }
nav a { color: var(--cyan); text-decoration: none; border: 1px solid var(--line); padding: 6px 10px; }
nav a:hover, nav a:focus-visible { border-color: var(--cyan); outline: none; }
.brand { font: 700 22px/1 'Silkscreen', monospace; color: var(--text); letter-spacing: 2px; margin-right: auto; text-decoration: none; border: 0 !important; padding: 0 !important; }
.brand span { color: var(--cyan); }
h1 { font: 700 clamp(22px, 5vw, 30px)/1.2 'Silkscreen', monospace; letter-spacing: 1px; color: var(--gold); margin: 0 0 6px; text-wrap: balance; }
h2 { font: 700 16px/1.4 'Silkscreen', monospace; letter-spacing: 1px; color: var(--cyan); margin: 34px 0 8px; }
.updated { color: var(--muted); font-size: 13px; margin: 0 0 22px; }
p, li { max-width: 68ch; }
ul { padding-left: 20px; }
li { margin-bottom: 6px; }
a { color: var(--cyan); }
strong { color: #fff; }
.box { background: var(--panel); border: 1px solid var(--line); padding: 14px 16px; margin: 18px 0; }
.lang-sep { border: 0; border-top: 1px dashed var(--line); margin: 56px 0 28px; }
@media (prefers-reduced-motion: no-preference) { nav a { transition: border-color .15s; } }