:root {--hi:#fff;--fg:#ddd;--li:#aaa;--lo:#222;--bg:#000;}
@media (prefers-color-scheme: light) {
:root {--hi:#000;--fg:#222;--li:#555;--lo:#ddd;--bg:#fff;}
}
*	{margin:0;line-height:1.4;color:inherit;}
body	{color:var(--fg);background-color:var(--bg);font-family:monospace;font-size:18px;height:100%;max-width:72ch;margin:auto;padding:0;}
footer	{padding:4em 0;color:var(--li);}
hr	{border:1px solid var(--fg);margin:0.4375em 0;}
p, pre, ul, ol, blockquote, nav	{margin:1em 0;}
blockquote	{padding:0 0 0 2ch;font-style:italic;border-left:4px solid var(--lo);color:var(--li);}
pre	{line-height:1.2;padding:1em 0 1em 4ch;overflow:auto;}
code, pre	{background-color:var(--lo);}
code	{display:inline-block;}
ul,dl	{display:block;list-style:none;}
ul li::before	{content:"- ";}
h1, h2, h3, h4	{font-size:inherit;margin:4rem 0 1em 0;}
h1	{border:solid;border-width:2px 0;margin:1em 0 2em 0;padding:0.5em 0;}
h2	{border-bottom:2px solid var(--li);}
h3	{border-bottom:2px solid var(--lo);}
h2	{counter-reset:h3c;}
h3:before	{content: counter(h3c)". ";counter-increment:h3c;}
nav	{padding:0;list-style:none;}
nav a	{text-decoration:none;}
a	{font-weight:bold;}
h1 a, h2 a, h3 a {float:inline-end;text-decoration:none;}
h1 a	{color:transparent}
h2 a	{color:var(--li);}
h3 a	{color:var(--lo);}
b	{color:var(--hi);}
a:hover	{background-color:var(--hi);color:var(--bg);}
img	{width:100%;}
footer img {width:2ch;display:inline;vertical-align:text-bottom;mix-blend-mode:screen;};
@media (max-width: 500px) {
body	{font-size:12px;padding:0 2em;}
}