:root {
    color-scheme: light dark;
    --bg: #fbfaf7;
    --text: #222222;
    --secondary: #555555;
    --muted: #777777;
    --link: #1a4d8f;
    --rule: #dddddd;
    --code-bg: #f0eee8;
    --code-border: #e2dfd6;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1b1c1e;
        --text: #ddd8cf;
        --secondary: #b5b0a7;
        --muted: #9a958c;
        --link: #8ab4f8;
        --rule: #3a3b3e;
        --code-bg: #26272a;
        --code-border: #3a3b3e;
    }
}
html { background: var(--bg); color: var(--text); }
body { max-width: 36em; margin: 0 auto; padding: 0 1em; font: 16px/1.6 Georgia, "Times New Roman", serif; overflow-wrap: break-word; }
a { color: var(--link); }
header.site { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--rule); margin: 1em 0 1.5em; }
header.site .name { display: block; color: var(--text); font-weight: bold; font-size: 1.0625em; text-decoration: none; padding: .5em 0 0; }
header.site .tagline { display: block; color: var(--muted); font-size: .8em; font-style: italic; padding-bottom: .5em; }
header.site nav a { display: inline-block; padding: .5em 0 .5em .9em; font-size: .875em; }
h1 { font-size: 28px; line-height: 1.25; margin: .2em 0 .6em; }
h2 { font-size: 20px; line-height: 1.3; margin: 1.4em 0 .4em; }
h1.label { font-size: .75em; font-weight: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 1.5em 0 .5em; }
.date, code, pre { font-family: "DejaVu Sans Mono", Consolas, monospace; }
.date { color: var(--muted); font-size: .8em; margin: 0; }
ul.posts { list-style: none; margin: 0; padding: 0; }
ul.posts li { display: flex; gap: 1em; margin-bottom: .75em; }
ul.posts .date { white-space: nowrap; padding-top: .3em; }
ul.posts li > span:last-child { min-width: 0; }
ul.posts a { display: inline-block; padding: .25em 0; }
.summary { color: var(--secondary); font-size: .875em; }
pre { background: var(--code-bg); border: 1px solid var(--code-border); border-radius: 4px; padding: .6em .75em; overflow-x: auto; font-size: .85em; line-height: 1.45; }
code { background: var(--code-bg); border-radius: 3px; padding: .05em .25em; font-size: .875em; }
pre code { background: none; padding: 0; font-size: 1em; }
img { max-width: 100%; height: auto; }
footer { border-top: 1px solid var(--rule); margin: 2em 0 1.5em; padding-top: .5em; font-size: .75em; color: var(--muted); }
@media (max-width: 30em) {
    header.site { display: block; }
    header.site nav a { padding: .5em .9em .5em 0; }
    ul.posts li { display: block; }
    ul.posts .date { display: block; padding-top: 0; }
    h1 { font-size: 24px; }
}