:root { color-scheme: light dark; }
body {
  font: 1.125rem/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
  max-width: 68ch;
  margin: 0 auto;
  padding: 1rem;
}
header { margin-bottom: 2rem; font-size: 2.25rem; line-height:1.1; letter-spacing: -.02em; font-weight: 300;}
header a { text-decoration: none; }
h1, h2, h3 { line-height: 1.2; margin-top: 2em; }
article > h1:first-child { margin-top: 0; }
a { text-decoration: underline; }
a:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
img, video { max-width: 100%; height: auto; }
figure { margin: 1.5rem 0; }
figcaption { font-size: .9em; opacity: .8; }
pre, code { font-family: ui-monospace, monospace; font-size: .9em; }
pre { overflow-x: auto; padding: 1rem; border: 1px solid; }
blockquote { margin-left: 0; padding-left: 1rem; border-left: 3px solid; }
ul.posts { list-style: none; padding: 0; }
ul.posts li { margin: .5rem 0; }
ul.posts time { font-variant-numeric: tabular-nums; margin-right: .75rem; font-size: .85rem; opacity: .7; }
article footer { margin-top: 2rem; font-size: .9em; opacity: .8; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
.tags { font-size: .8em; opacity: .75; margin-left: .5rem; }
body > footer { margin-top: 3rem; font-size: .85em; opacity: .7; }