@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk.ttf") format("truetype"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono.ttf") format("truetype"); font-weight: 100 800; font-display: swap; }
html {
    color-scheme: dark;
    --bg: oklch(0.17 0.005 80);
    --bg2: oklch(0.12 0.005 80);
    --bg3: oklch(0.21 0.005 80);
    --fg: oklch(0.93 0.005 80);
    --fg2: oklch(0.65 0.005 80);
    --line: oklch(0.3 0.005 80);
    --line2: oklch(0.42 0.005 80);
    --acc: oklch(0.8 0.12 80);
    --accfg: oklch(0.17 0.005 80);
    --err: oklch(0.75 0.14 30);
    --ok: oklch(0.75 0.12 150);
}
html[data-theme="light"], html:has(#theme-toggle:checked) {
    color-scheme: light;
    --bg: oklch(0.975 0.004 80);
    --bg2: oklch(1 0 0);
    --bg3: oklch(0.94 0.005 80);
    --fg: oklch(0.2 0.005 80);
    --fg2: oklch(0.5 0.005 80);
    --line: oklch(0.87 0.005 80);
    --line2: oklch(0.72 0.005 80);
    --acc: oklch(0.5 0.11 75);
    --accfg: oklch(0.98 0.005 80);
    --err: oklch(0.5 0.16 30);
    --ok: oklch(0.5 0.13 150);
}
html { font-family: "Space Grotesk", sans-serif; color: var(--fg); background: var(--bg); }
body { margin: 0; }
* { box-sizing: border-box; }
a { color: inherit; text-underline-offset: 4px; }
button, input { font: inherit; }
button, a, label { -webkit-tap-highlight-color: transparent; }
a:hover, button:hover { opacity: .75; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; }
h1, h2, p { margin: 0; }
h1, h2 { font-weight: 400; letter-spacing: -.02em; }
p { line-height: 1.6; }
.mono { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--fg2); }
.brand { font-weight: 500; font-size: 17px; letter-spacing: .02em; text-transform: lowercase; text-decoration: none; }