:root{
/* Inter for everything read, Manrope at 800 for the display line — the pair Scott chose for Avota,
so his products read as one house. The mono is SYSTEM-ONLY on purpose: it is used for serials,
checksums and enrolment codes, where monospace is doing work rather than decoration, and a third
downloaded family for that is not worth the bytes. Any change here needs the matching change to
the font in EVERY marketing page's head — there is a test on it (test_chrome.mjs).
Before this the site asked for system fonts only and loaded none, which is consistent but gives a
page no voice at all: the same end result as Avota, whose CSS named three families the head never
fetched. */
--sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,Cantarell,"Helvetica Neue",Helvetica,Arial,sans-serif;
--display:Manrope,var(--sans);
--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
--bg:oklch(0.965 0.008 248);
--surface:oklch(1 0 0);
--surface-2:oklch(0.945 0.011 248);
--ink:oklch(0.290 0.045 255);
--ink-2:oklch(0.480 0.030 255);
--ink-3:oklch(0.615 0.022 255);
--line:oklch(0.912 0.012 252);
--line-2:oklch(0.845 0.016 252);
--brand:oklch(0.520 0.185 258);
--brand-ink:oklch(0.430 0.180 258);
--alert:oklch(0.545 0.185 32);
--ok:oklch(0.520 0.090 160);
--warn:oklch(0.585 0.145 62);
--ok-wash:oklch(0.955 0.030 160);
--warn-wash:oklch(0.960 0.040 75);
--alert-wash:oklch(0.955 0.030 30);
--brand-wash:oklch(0.960 0.025 258);
/* The code block is dark in BOTH themes on purpose — a terminal transcript reads as a terminal, and
flipping it to a light box in light mode makes a command look like prose. */
--code-bg:oklch(0.245 0.030 258);
--code-ink:oklch(0.930 0.015 250);
--code-dim:oklch(0.700 0.030 250);
--on-brand:oklch(1 0 0);
--shadow:0 1px 2px oklch(0.235 0.014 258 / 0.06), 0 8px 24px -16px oklch(0.235 0.014 258 / 0.22);
--shadow-lg:0 2px 4px oklch(0.235 0.014 258 / .07), 0 24px 60px -28px oklch(0.235 0.014 258 / .42);
--band:oklch(0.245 0.045 262);
}
html[data-theme="dark"]{
--bg:oklch(0.165 0.016 258);
--surface:oklch(0.228 0.015 258);
--surface-2:oklch(0.262 0.016 258);
--ink:oklch(0.950 0.012 255);
--ink-2:oklch(0.775 0.020 255);
--ink-3:oklch(0.655 0.020 255);
--line:oklch(0.330 0.030 256);
--line-2:oklch(0.410 0.032 256);
--brand:oklch(0.700 0.115 250);
--brand-ink:oklch(0.780 0.105 250);
--alert:oklch(0.740 0.130 45);
--ok:oklch(0.740 0.085 160);
--warn:oklch(0.800 0.125 68);
--ok-wash:oklch(0.280 0.045 160);
--warn-wash:oklch(0.290 0.050 75);
--alert-wash:oklch(0.285 0.055 30);
--brand-wash:oklch(0.280 0.045 258);
--code-bg:oklch(0.120 0.018 258);
--code-ink:oklch(0.930 0.015 250);
--code-dim:oklch(0.680 0.030 250);
--on-brand:oklch(0.200 0.030 258);
--shadow:0 1px 2px oklch(0 0 0 / 0.30), 0 10px 30px -18px oklch(0 0 0 / 0.60);
--shadow-lg:0 2px 6px oklch(0 0 0 / .45), 0 28px 70px -30px oklch(0 0 0 / .85);
--band:oklch(0.205 0.038 262);
}
/* The same tokens, keyed off the operating system.
These were unreachable until now: the dark palette only applied when a script stamped
data-theme on , that script lived on the home page alone, and the button that set it was
wired to a function the four sub-pages never defined. So the guides have always been light-only
whatever the visitor's machine was set to, and nobody could tell because the CSS looked complete.
Keeping the [data-theme] block above as well means an explicit choice still wins if one is ever
reintroduced. */
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) {
--bg:oklch(0.165 0.016 258);
--surface:oklch(0.228 0.015 258);
--surface-2:oklch(0.262 0.016 258);
--ink:oklch(0.950 0.012 255);
--ink-2:oklch(0.775 0.020 255);
--ink-3:oklch(0.655 0.020 255);
--line:oklch(0.330 0.030 256);
--line-2:oklch(0.410 0.032 256);
--brand:oklch(0.700 0.115 250);
--brand-ink:oklch(0.780 0.105 250);
--alert:oklch(0.740 0.130 45);
--ok:oklch(0.740 0.085 160);
--warn:oklch(0.800 0.125 68);
--ok-wash:oklch(0.280 0.045 160);
--warn-wash:oklch(0.290 0.050 75);
--alert-wash:oklch(0.285 0.055 30);
--brand-wash:oklch(0.280 0.045 258);
--code-bg:oklch(0.120 0.018 258);
--code-ink:oklch(0.930 0.015 250);
--code-dim:oklch(0.680 0.030 250);
--on-brand:oklch(0.200 0.030 258);
--shadow:0 1px 2px oklch(0 0 0 / 0.30), 0 10px 30px -18px oklch(0 0 0 / 0.60);
--shadow-lg:0 2px 6px oklch(0 0 0 / .45), 0 28px 70px -30px oklch(0 0 0 / .85);
--band:oklch(0.205 0.038 262);
}
}
html{background:var(--bg);}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;}
*{box-sizing:border-box;}
a{color:var(--brand-ink);text-underline-offset:2px;}
/* THE MASTHEAD, FOR EVERY PAGE.
This lived in each page's own