:root {
    color-scheme: light dark;
    font-family: system-ui, sans-serif;
    line-height: 1.7;
    color: #252525;
    background: #faf9f6;
}
* { box-sizing: border-box; }
body { max-width: 48rem; margin: 0 auto; padding: 1.5rem; overflow-wrap: anywhere; }
.site-header { padding: 1rem 0 2rem; font-weight: 700; letter-spacing: -.03em; }
.post-list { list-style: none; padding: 0; }
.post-list > li { margin-bottom: 2.5rem; }
.post-card-heading { display: flex; align-items: flex-start; gap: 1rem; margin-top: 2.25rem; }
.post-card-heading h2 { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.comment-count { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: .75rem 0; }
.tag { max-width: 100%; border: 1px solid currentColor; border-radius: 1rem; padding: .1rem .75rem; font-size: .85rem; }
h1, h2, h3, h4, h5, h6 { line-height: 1.25; margin-top: 1.5em; }
h1 { font-size: clamp(2rem, 6vw, 3.25rem); margin-top: .5em; }
time, figcaption, footer, .comment-count { color: #626262; font-size: .9rem; }
.description { font-size: 1.2rem; white-space: pre-wrap; }
img, video { display: block; max-width: 100%; height: auto; border-radius: .5rem; }
.cover { width: 100%; margin-top: 1.5rem; }
figure { margin: 2rem 0; }
figcaption { margin-top: .5rem; }
blockquote { border-left: .2rem solid #999; margin: 1.5rem 0; padding-left: 1.25rem; }
blockquote p { white-space: pre-wrap; }
pre { overflow-x: auto; padding: 1rem; background: #eeede9; border-radius: .5rem; }
code { font-size: .9em; }
a { color: #205ac7; text-underline-offset: .2em; }
a:focus-visible { outline: .15rem solid currentColor; outline-offset: .2rem; }
footer { border-top: 1px solid #ccc; margin-top: 3rem; padding: 1rem 0; }
.comments { border-top: 1px solid #999; margin-top: 3rem; padding-top: 1rem; }
.comment-list { list-style: none; padding: 0; }
.comment-list > li { border-bottom: 1px solid #999; padding-bottom: 1.5rem; margin-bottom: 1.5rem; }
.comment h3 { margin-bottom: .25rem; }
.comment-form { display: grid; gap: .75rem; }
.comment-form input, .comment-form textarea {
    width: 100%; min-width: 0; padding: .75rem; border: 1px solid #999;
    border-radius: .4rem; font: inherit; color: inherit; background: transparent;
}
.comment-form textarea { resize: vertical; }
button, .button {
    display: inline-block; padding: .65rem 1rem; border: 1px solid currentColor;
    border-radius: .4rem; font: inherit; color: inherit; background: transparent;
    text-decoration: none; cursor: pointer;
}
button:disabled { opacity: .6; cursor: wait; }
button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: .15rem solid currentColor; outline-offset: .2rem;
}
.secondary-button { margin-top: .75rem; }
.comment-error { border-left: .25rem solid #b42318; padding-left: 1rem; }
.comment-notice { border-left: .25rem solid #348044; padding-left: 1rem; }
dialog {
    width: min(36rem, calc(100% - 2rem)); max-height: calc(100% - 2rem);
    overflow-y: auto; border: 1px solid #999; border-radius: .75rem; padding: 1.5rem;
    color: inherit; background: #faf9f6;
}
dialog h2 { margin-top: 0; }
dialog::backdrop { background: rgb(0 0 0 / .55); }
@media (prefers-color-scheme: dark) {
    :root { background: #181818; color: #eee; }
    dialog { background: #181818; }
    time, figcaption, footer, .comment-count { color: #b5b5b5; }
    pre { background: #282828; }
    a { color: #93baff; }
    footer { border-color: #444; }
}