:root { color-scheme: light dark; }
* { box-sizing: border-box; }

body {
  max-width: 42rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
  font: 1.05rem/1.65 ui-serif, Georgia, Cambria, "Times New Roman", serif;
  color: #1a1a1a;
  background: #fafafa;
}
@media (prefers-color-scheme: dark) {
  body { color: #d6d6d6; background: #141414; }
  a { color: #8ab4f8; }
}

a { color: #1a5fb4; text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header { margin-bottom: 2.5rem; border-bottom: 1px solid #88888844; padding-bottom: 1rem; }
.site-title { font-size: 1.6rem; font-weight: 700; font-family: ui-sans-serif, system-ui, sans-serif; }
.site-tagline { margin: .25rem 0 0; color: #888; font-size: .95rem; }

.post-list { list-style: none; padding: 0; }
.post-list li { display: flex; gap: 1rem; margin: .45rem 0; }
.post-list time {
  color: #888; flex: none;
  font: .9rem ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

article h1 { font-family: ui-sans-serif, system-ui, sans-serif; margin-bottom: .2rem; }
.post-date { display: block; color: #888; font-size: .9rem; margin-bottom: 2rem; }
.tags { margin-top: 2.5rem; font-size: .85rem; }
.tags a { margin-right: .5rem; }
.tag-list .count { color: #888; font-size: .85rem; }
.back { margin-top: 3rem; }

pre { overflow-x: auto; padding: 1rem; border-radius: 6px; background: #80808018; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }
pre code { font-size: .85rem; }
blockquote { border-left: 3px solid #88888866; margin: 0; padding-left: 1rem; color: #888; }
img { max-width: 100%; height: auto; }

.site-footer { margin-top: 4rem; border-top: 1px solid #88888844; padding-top: 1rem; font-size: .85rem; }