:root { color-scheme: dark; background: #171717; position: relative; min-height: 100%; }
.blog { max-width: 43rem; margin: 4rem auto; padding: 0 1.25rem 3rem; font-family: system-ui, sans-serif; line-height: 1.3; overflow-wrap: anywhere; color: #ededed; background: #171717; }
.blog-title { font-size: 2rem; line-height: 1.2; font-weight: 700; margin: .67em 0 .5rem; }
.blog-title a { color: inherit; text-decoration: none; }
.blog-description { color: #b5b5b5; }
.blog-nav { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0 3rem; }
.blog a { color: #9fc3e8; text-underline-offset: .2em; }
.blog a:hover { text-decoration-thickness: 2px; }
.blog-post-list { list-style: none; padding: 0; }
.blog-post-list li { margin: 1rem 0; }
.blog-post-date { color: #b5b5b5; font-size: .85rem; margin-right: .75rem; }
.blog-post-title { font-size: 1.5em; line-height: 1.25; margin: .83em 0; }
.blog-section > h1 { font-size: 1.5em; margin: .83em 0; }
.blog-footer { margin-top: 3rem; font-size: .85rem; }
.blog pre { max-width: 100%; overflow-x: auto; overflow-wrap: normal; padding: 1rem; box-sizing: border-box; background: #242424; }
.blog code { font-family: monospace; }
.blog img { max-width: 100%; height: auto; }
.blog pre, .blog-table { scrollbar-color: #777 #171717; }
.blog-table { max-width: 100%; overflow-x: auto; margin: 1rem 0; }
.blog table { width: 100%; border-collapse: collapse; overflow-wrap: normal; }
.blog th, .blog td { padding: .4rem .7rem; text-align: left; vertical-align: top; border-bottom: 1px solid #555; }
.blog .markdown-align-left { text-align: left; }
.blog .markdown-align-center { text-align: center; }
.blog .markdown-align-right { text-align: right; }
.blog blockquote { margin-left: 0; padding-left: 1rem; border-left: 2px solid #aaa; }
.blog-owner { display: flex; gap: 1rem; margin: 1rem 0; }
.blog-settings { position: absolute; right: 1.25rem; bottom: 1.25rem; line-height: 1; }
.blog svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.5; }
.blog :focus-visible { outline: 2px solid #9fc3e8; outline-offset: 3px; }
@media (max-width: 600px) { .blog { margin: 2rem auto; } }

.blog .markdown-alert { padding: .6rem 1rem; background: #202020; }
.blog .markdown-alert-title { margin: 0 0 .4rem; font-weight: 600; }
.blog .markdown-alert > :last-child { margin-bottom: 0; }
.blog .markdown-alert-note { border-color: #9fc3e8; }
.blog .markdown-alert-tip { border-color: #afd3a0; }
.blog .markdown-alert-warning { border-color: #e0c384; }

.blog .hljs-comment, .blog .hljs-quote { color: #b0b0b0; }
.blog .hljs-keyword, .blog .hljs-selector-tag, .blog .hljs-meta { color: #cdb4e8; }
.blog .hljs-string, .blog .hljs-regexp, .blog .hljs-addition { color: #afd3a0; }
.blog .hljs-number, .blog .hljs-literal, .blog .hljs-attr, .blog .hljs-attribute { color: #e0c384; }
.blog .hljs-title, .blog .hljs-built_in, .blog .hljs-section, .blog .hljs-name { color: #9fc3e8; }
.blog .hljs-deletion { color: #eda7a7; }
.blog .hljs-emphasis { font-style: italic; }
.blog .hljs-strong { font-weight: bold; }


.blog math { font-family: math; font-size: 1.05em; }
.math-block { display: block; max-width: 100%; overflow-x: auto; padding: .5rem 0; margin: 1.2rem 0; scrollbar-color: #777 #171717; }
.math-block math { margin: 0 auto; }

.blog-diagram { max-width: 100%; margin: 1rem 0; scrollbar-color: #777 #171717; }
.blog .mermaid-diagram { display: block; width: auto; height: auto; max-width: 100%; font: 14px ui-monospace, monospace; }
.blog .mermaid-node { fill: #242424; stroke: #9fc3e8; }
.blog .mermaid-edge { fill: none; stroke: #b5b5b5; }
.blog .mermaid-arrow { fill: #b5b5b5; stroke: none; }
.blog .mermaid-label-background { fill: #171717; stroke: none; }
.blog .mermaid-label { fill: #ededed; stroke: none; text-anchor: middle; }

/* Native SVG carries presentation attributes; do not inherit owner-icon strokes. */
.blog .mermaid-native { fill: initial; stroke: none; stroke-width: initial; font: initial; }


:root {
    color-scheme: dark;
    background: #000;
}
body.blog {
    max-width: 800px;
    margin: 3rem auto;
    padding: 0 20px 56px;
    background: #000;
    color: #ddd;
    font-family: system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    text-align: center;
}
.blog .blog-title {
    margin: 0 0 .5rem;
    font-size: 1.75rem;
    font-weight: 400;
}
.blog .blog-description, .blog .blog-post-date { color: #888; }
.blog .blog-description { margin: 0; }
.blog .blog-nav {
    justify-content: center;
    gap: .5rem 1.25rem;
    margin: 1.5rem 0 2.5rem;
}
.blog a { color: #bbb; }
.blog a:hover { color: #fff; }
.blog .blog-title a { color: inherit; }
.blog .blog-section > h1, .blog .blog-post-title {
    font-size: 1.25rem;
    font-weight: 400;
    text-align: center;
}
.blog .blog-post-list {
    padding: 0;
    list-style: none;
    text-align: center;
}
.blog .blog-post-list li { margin: .65rem 0; }
.blog .blog-post-date { margin-right: .5rem; }
.blog .blog-post > p { text-align: center; }
.blog .blog-post-body {
    margin-top: 2rem;
    text-align: justify;
    text-justify: inter-word;
}
.blog .blog-owner { justify-content: center; gap: .5rem; }
.blog :is(.blog-owner, .blog-section > h1, .blog-post-list > li) > a:has(> svg) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: .25rem;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    vertical-align: middle;
    text-decoration: none;
}
.blog :is(.blog-owner, .blog-section > h1, .blog-post-list > li) > a > svg {
    display: block;
    width: 16px;
    height: 16px;
}
.blog .blog-settings {
    position: fixed;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 10;
}
.blog .blog-settings > a {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    border: 1px solid #333;
    background: #111;
}
.blog .blog-settings > a:hover { border-color: #888; }
.blog .blog-settings svg { width: 14px; height: 14px; }
.blog :focus-visible { outline: 2px solid #bbb; outline-offset: 3px; }
.blog pre { background: #111; text-align: left; }
.blog th, .blog td { text-align: center; }
.blog .blog-post-body th, .blog .blog-post-body td { text-align: left; }
.blog .markdown-alert { background: #111; }
@media (max-width: 600px) {
    body.blog { margin: 1.75rem auto; padding-right: 16px; padding-left: 16px; }
}

.blog pre, .blog code {
    font-family: monospace;
    font-size: inherit;
}

.blog .blog-title { font-weight: 700; text-align: center; }
.blog .blog-title a::before { content: "~"; }