:root { --bg: #fffff8; --fg: #222222; --soft: #888888; --link: #a3260f; }
@media (prefers-color-scheme: dark) { :root { --bg: #141412; --fg: #d8d8d0; --soft: #808078; --link: #ff8a6b; } }

body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.5 "Courier New", Courier, monospace; }
.page { max-width: 72ch; margin: 0 auto; padding: 32px 16px 64px; }
pre { font: inherit; margin: 0; white-space: pre-wrap; }
.meta { display: flex; justify-content: space-between; gap: 16px; }
.meta div:last-child { text-align: right; }
.meta + p { margin-top: 20px; }
h1 { font-size: 14px; font-weight: 700; text-align: center; margin: 32px 0; }
h2, h3 { font-size: 14px; font-weight: 700; margin: 28px 0 8px; }
p { margin: 0 0 12px; padding-left: 3ch; }
a { color: var(--link); }
.soft { color: var(--soft); }
.list { padding-left: 3ch; }
.list div { display: grid; grid-template-columns: 14ch 1fr; gap: 1ch; margin-bottom: 6px; }
@media (max-width: 520px) { .list div { grid-template-columns: 1fr; gap: 0; } }
.pb { display: flex; justify-content: space-between; color: var(--soft); border-top: 1px dashed var(--soft); margin: 40px 0 0; padding-top: 4px; }

/* Markdown post bodies */
.prose ul, .prose ol { padding-left: 6ch; margin: 0 0 12px; }
.prose pre { margin: 0 0 12px 3ch; padding: 8px 12px; border-left: 2px solid var(--soft); overflow-x: auto; white-space: pre; background: transparent !important; }
.prose blockquote { margin: 0 0 12px 3ch; padding-left: 2ch; border-left: 2px solid var(--soft); color: var(--soft); }
.prose blockquote p { padding-left: 0; }
.prose img { max-width: 100%; height: auto; margin: 0 0 12px 3ch; }
.prose hr { border: 0; border-top: 1px dashed var(--soft); margin: 24px 0; }