html { font-size: 16px; color-scheme: light; }
body { margin: 0; }
body {
    --paper: #fdfdfb;
    --ink: #171717;
    --body-ink: #252525;
    --muted: #626262;
    --rule: #9a9a94;
    --rule-light: #d8d8d2;
    --code-bg: #f1f1ed;
    --mark-bg: #eeeeea;
    --body: "Paper Univers", "Helvetica Neue", Arial, sans-serif;
    --ui: "Helvetica Neue", "Arial", sans-serif;
    --mono: "Berkeley Mono", "DejaVu Sans Mono", monospace;
    --page-width: 780px;
    color-scheme: light;
    background: var(--paper);
    color: var(--body-ink);
    font: 0.96rem/1.48 var(--body);
    text-rendering: optimizeLegibility;
    width: 100%;
}
body * { box-sizing: border-box; }
.site-header {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 1.25rem 1.5rem 0.65rem;
    border-bottom: 2px solid var(--ink);
}
body nav {
    font: 600 0.72rem/1.4 var(--ui);
    letter-spacing: 0.055em;
    text-transform: uppercase;
}
body nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
body nav li { margin: 0; }
body nav a { text-decoration: none; }
body nav a:hover { text-decoration: underline; }
body main, body article {
    max-width: var(--page-width);
    margin-inline: auto;
}
body article {
    padding: 2.3rem 1.5rem 4rem;
    counter-reset: section;
}
body h1 {
    max-width: 18em;
    margin: 0 0 0.65rem;
    font: 700 clamp(2rem, 5vw, 2.7rem)/1.03 var(--ui);
    letter-spacing: -0.025em;
}
body .article-meta {
    font: 0.7rem/1.4 var(--mono);
    letter-spacing: 0.025em;
    color: var(--muted);
    text-transform: uppercase;
    margin: 0 0 2rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--rule);
}
body article h2 {
    counter-increment: section;
    margin: 2.4rem 0 0.8rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--rule);
    font: 700 1rem/1.25 var(--ui);
    letter-spacing: 0.035em;
    text-transform: uppercase;
}
body .blog-article h2::before { content: counter(section, upper-roman) ". "; font-weight: 500; }
body article h3 { margin: 1.65rem 0 0.5rem; font: 700 0.88rem/1.3 var(--ui); }
body p { margin: 0 0 0.9rem; hanging-punctuation: first last; }
body strong { font-weight: 700; }
body em { font-style: italic; }
body a {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-thickness: 0.07em;
    text-underline-offset: 0.14em;
    overflow-wrap: anywhere;
}
body a:hover { text-decoration-thickness: 0.12em; }
body ul, body ol { margin: 0.7rem 0 1rem; padding-left: 1.55rem; }
body li { margin: 0.22rem 0; }
body li::marker { font: 0.85em var(--ui); }
body code { font: 0.84em var(--mono); }
body :not(pre) > code {
    padding: 0.08rem 0.25rem;
    background: var(--code-bg);
    border: 1px solid var(--rule-light);
    overflow-wrap: anywhere;
}
body pre {
    margin: 1.15rem 0 1.4rem;
    padding: 0.85rem 1rem;
    overflow-x: auto;
    background: var(--code-bg);
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    font: 0.77rem/1.43 var(--mono);
    tab-size: 4;
}
body pre code { padding: 0; border: 0; background: transparent; font: inherit; }
body .code-line { display: flex; }
body .line-no { flex: 0 0 2.6em; user-select: none; color: var(--muted); }
body .line-source { white-space: pre; }
body details {
    margin: 1.4rem 0;
    padding: 0.7rem 0.9rem;
    background: var(--mark-bg);
    border-left: 3px solid var(--ink);
    font: 0.82rem/1.45 var(--ui);
}
body summary { font-weight: 700; cursor: pointer; }
body details[open] summary { margin-bottom: 0.5rem; }
body details p:last-child { margin-bottom: 0; }
body sup { font: 0.7rem/1.4 var(--ui); color: var(--muted); }
body figure { margin: 1.7rem 0; }
body figure img { display: block; max-width: 100%; height: auto; border: 1px solid var(--rule-light); }
body figcaption { margin-top: 0.45rem; font: 0.7rem/1.35 var(--ui); color: var(--muted); }
body figcaption::before { content: "FIG. "; font-weight: 700; }
body table { width: 100%; margin: 1.5rem 0; border-collapse: collapse; font: 0.76rem/1.35 var(--ui); }
body thead { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); }
body tbody { border-bottom: 2px solid var(--ink); }
body th, body td { padding: 0.38rem 0.5rem; text-align: left; vertical-align: top; }
body tr + tr td { border-top: 1px solid var(--rule-light); }
body hr { margin: 2rem 0; border: 0; border-top: 1px solid var(--rule); }
.site-footer {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 0.75rem 1.5rem 2rem;
    border-top: 2px solid var(--ink);
    font: 0.65rem/1.4 var(--mono);
    color: var(--muted);
}
body ::selection { background: #d8d8d2; color: var(--ink); }
@media (max-width: 600px) {
    body { font-size: 0.9rem; }
    .site-header, body article, .site-footer { padding-left: 1rem; padding-right: 1rem; }
    body article { padding-top: 1.6rem; }
    body h1 { font-size: 2rem; }
    body nav ul { gap: 0.3rem 0.8rem; }
    body pre { margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; }
}

/* Shared content, independent of navigation. */
body h1, body h2, body h3, body h4, body h5, body h6 { color: var(--ink); }
body article.page > h1 { margin-bottom: 1.5rem; }
body article p.doc-meta {
    font: 0.7rem/1.4 var(--mono);
    letter-spacing: 0.025em;
    color: var(--muted);
    text-transform: uppercase;
    margin: 0 0 2rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--rule);
}
body article ul { list-style: disc outside; }
body article ul ul { list-style-type: circle; }
body article ul ul ul { list-style-type: square; }
body article ol { list-style: decimal outside; }
body article li { display: list-item; }
body article p, body article li { overflow-wrap: anywhere; }
body nav .site-nav-list { list-style: none; }
body nav .site-nav-list li { display: block; }
body nav a { text-decoration: underline; text-underline-offset: 0.18em; }
body blockquote {
    margin: 1.2rem 0;
    padding: 0.2rem 0 0.2rem 1rem;
    border-left: 2px solid var(--rule);
}
body blockquote p:last-child { margin-bottom: 0; }
body .callout, body .note, body .notice {
    margin: 1.2rem 0;
    padding: 0.7rem 0.9rem;
    border-left: 3px solid var(--ink);
    background: var(--mark-bg);
    font: 0.82rem/1.45 var(--ui);
}
body .callout p:last-child, body .note p:last-child, body .notice p:last-child { margin-bottom: 0; }
body .note[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.3rem;
    font: 700 0.7rem/1.4 var(--mono);
    text-transform: uppercase;
}
body article img { display: block; max-width: 100%; height: auto; margin: 1.2rem 0; border: 1px solid var(--rule-light); }
body figure img { margin: 0; }
body article pre { max-width: 100%; }
body pre[data-code-kind="syntax"] { color-scheme: dark; background: #282828; color: #ebdbb2; }
body pre[data-code-kind="plain"] { background: var(--code-bg) !important; color: var(--body-ink) !important; }
body pre[data-code-kind="plain"] code { color: inherit; }
body pre[data-code-kind="syntax"] code > span > span:first-child { color: #a89984 !important; }
body .post-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
body .post-index > li { display: grid; grid-template-columns: 7.8rem minmax(0, 1fr); align-items: baseline; column-gap: 0.6rem; margin: 0; padding: 0.65rem 0; }
body .post-index > li + li { border-top: 1px solid var(--rule-light); }
body .post-index time { font: 0.73rem/1.4 var(--mono); color: var(--muted); letter-spacing: 0.025em; }
body .post-index a { font: 500 0.94rem/1.4 var(--ui); }
body table { table-layout: fixed; color: var(--body-ink); }
body th, body td { overflow-wrap: anywhere; }
body th { color: var(--ink); }
body h4, body h5, body h6 { font: 700 0.88rem/1.3 var(--ui); margin: 1.4rem 0 0.5rem; }
body .footnotes { font: 0.75rem/1.45 var(--ui); color: var(--muted); }
body .footnotes li:target { background: var(--mark-bg); }
body a:focus-visible, body summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
body figure { counter-increment: figure; }
body article { counter-reset: section figure; }
body figcaption::before { content: "FIG. " counter(figure) ". "; }
@media (max-width: 400px) {
    body .post-index > li { grid-template-columns: 1fr; row-gap: 0.15rem; }
}
@media print {
    .site-header, .site-footer { display: none; }
    body article { max-width: none; padding: 0; }
    body pre { white-space: pre-wrap; overflow-wrap: anywhere; }
    body figure, body tr { break-inside: avoid; }
}