:root {
  --bg: #dbdee3;
  --fg: #111;
  --muted: #666;
  --link: #0b57d0;
  --maxw: 70ch;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0b0b0f; --fg: #e9e9ee; --muted:#a1a1b0; --link:#8ab4f8; }
}
* { box-sizing: border-box; }
html { font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif; }
body { margin: 0; background: var(--bg); color: var(--fg); }
header, footer { border-top: 1px solid #0000; }
main { max-width: var(--maxw); margin: 3rem auto; padding: 0 1rem; }
h1, h2, h3 { line-height: 1.2; }
p { line-height: 1.6; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
.tag { font-size: .8rem; border: 1px solid currentColor; padding: .1rem .4rem; border-radius: .5rem; opacity: .8; }
.post-list { display: grid; gap: 1.25rem; }
.post-card { padding: 1rem; border: 1px solid #0001; border-radius: 12px; }
pre, code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
pre { padding: 1rem; background: #0000000d; border-radius: 10px; overflow:auto; }


img {
    max-width: -webkit-fill-available;
}

video {
    max-width: -webkit-fill-available;
}

figcaption {
    text-align: center;
}

figure {
    margin-bottom: 30px;
}