:root {
  --fg: #1a1a1a; --muted: #666; --bg: #fff; --link: #0b57d0; --rule: #e5e5e5;
}
@media (prefers-color-scheme: dark) {
  :root { --fg: #e8e8e8; --muted: #9a9a9a; --bg: #131313; --link: #7ab3ff; --rule: #2c2c2c; }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
main, .site-header, .site-footer { max-width: 44rem; margin: 0 auto; padding: 0 1.25rem; }
.site-header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding-top: 2.5rem; padding-bottom: 2rem;
}
.site-title { font-weight: 700; font-size: 1.25rem; text-decoration: none; color: var(--fg); }
nav a { margin-left: 1rem; color: var(--muted); text-decoration: none; font-size: .95rem; }
nav a:hover { color: var(--link); }
a { color: var(--link); }
h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 .35rem; }
h2 { font-size: 1.35rem; line-height: 1.3; margin: 2rem 0 .5rem; }
h3 { font-size: 1.1rem; margin: 1.75rem 0 .5rem; }
time { color: var(--muted); font-size: .9rem; }
.post-content { margin-top: 2rem; }
figure { margin: 1.5rem 0; }
figcaption { color: var(--muted); font-size: .9rem; text-align: center; margin-top: .5rem; }
img { max-width: 100%; height: auto; display: block; margin: 1.5rem auto; }

/* Nearly every diagram on this site is a transparent PNG with dark strokes,
   which vanishes against a dark background. Give content images a light
   backing in dark mode so they read the same way in both themes. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .post-content img {
    background: #fff;
    padding: .6rem;
    border-radius: 4px;
  }
}
:root[data-theme="dark"] .post-content img {
  background: #fff;
  padding: .6rem;
  border-radius: 4px;
}
blockquote {
  margin: 1.5rem 0; padding: .25rem 0 .25rem 1.25rem;
  border-left: 3px solid var(--rule); color: var(--muted);
}
pre {
  background: rgba(127,127,127,.12); padding: 1rem; border-radius: 6px;
  overflow-x: auto; font-size: .9rem; line-height: 1.5;
}
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }
:not(pre) > code { background: rgba(127,127,127,.15); padding: .15em .35em; border-radius: 3px; }
table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.post-list { list-style: none; padding: 0; margin: 0; }
.post-list li { padding-bottom: 2.25rem; margin-bottom: 2.25rem; border-bottom: 1px solid var(--rule); }
.post-list li:last-child { border-bottom: 0; }
.post-list h2 { margin: .2rem 0 .4rem; font-size: 1.4rem; }
.post-list h2 a { text-decoration: none; }
.post-list h2 a:hover { text-decoration: underline; }
.post-list p { color: var(--muted); margin: 0; }
.site-footer { color: var(--muted); font-size: .85rem; padding-top: 3rem; padding-bottom: 3rem; }