/* Minimalist style. No JS, no web fonts, ~50 lines. */
:root {
  --fg: #111;
  --muted: #555;
  --bg: #fff;
  --link: #0050a0;
  --code-bg: #f4f4f6;
  --rule: #e3e3e8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fg: #e7e7ea;
    --muted: #9c9ca6;
    --bg: #121214;
    --link: #6cb2ff;
    --code-bg: #1d1d22;
    --rule: #2c2c33;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.55 system-ui, -apple-system, sans-serif; }
body { max-width: 72ch; margin: 0 auto; padding: 1rem; }
a { color: var(--link); }
a.skip { position: absolute; left: -9999px; }
a.skip:focus { left: 1rem; top: 1rem; background: var(--bg); padding: .5rem; }
header nav { padding: .5rem 0; border-bottom: 1px solid var(--rule); }
header nav a { font-weight: 600; text-decoration: none; }
main { padding: 1.5rem 0; }
h1 { font-size: 1.8rem; margin: 0 0 .25rem; }
h2 { font-size: 1.35rem; margin: 2rem 0 .5rem; }
h3 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
.subtitle { color: var(--muted); margin: 0 0 .5rem; }
.meta { color: var(--muted); font-size: .92rem; margin: .25rem 0 1.5rem; }
.toc { background: var(--code-bg); padding: 1rem; border-radius: .25rem; margin: 1rem 0 2rem; }
.toc h2 { font-size: 1rem; margin: 0 0 .5rem; }
.toc ul { margin: 0; padding-left: 1.25rem; }
.body p { margin: 0 0 1rem; }
.body img { max-width: 100%; height: auto; }
.body code { background: var(--code-bg); padding: .1rem .35rem; border-radius: .2rem; font-size: .92em; }
.body pre { background: var(--code-bg); padding: .75rem 1rem; border-radius: .25rem; overflow-x: auto; }
.body pre code { background: transparent; padding: 0; }
.body blockquote { border-left: 3px solid var(--rule); padding-left: 1rem; color: var(--muted); margin: 1rem 0; }
ul.post-list { list-style: none; padding: 0; }
ul.post-list li { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
footer { border-top: 1px solid var(--rule); padding: 1rem 0; color: var(--muted); font-size: .92rem; }