:root{--bg:#fdfdfc;--fg:#1f2328;--muted:#6b7280;--line:#e5e7eb;--accent:#0b7285;--code-bg:#f4f4f2}
@media (prefers-color-scheme:dark){:root{--bg:#0f1115;--fg:#d7dae0;--muted:#8b93a1;--line:#262a33;--accent:#4dd0e1;--code-bg:#161920}}
html{color-scheme:light dark}
body{max-width:46rem;margin:auto;padding:1.25em 1em 3em;line-height:1.6;background:var(--bg);color:var(--fg);font-size:1.02rem}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.25;letter-spacing:-.01em;font-weight:600}h1{font-size:1.5rem}h2{font-size:1.2rem;margin-top:2em}h3{font-size:1.02rem}
nav{display:flex;flex-wrap:wrap;align-items:baseline;gap:1.2em}nav .brand{color:var(--fg);font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:.95rem}nav .brand:hover{text-decoration:none;color:var(--accent)}nav .menu{padding:0;margin:0;list-style:none;font-size:.88rem;flex:1}nav hr{flex-basis:100%;margin:.6em 0 1.2em}
nav .menu li{display:inline-block;margin-right:1.1em}nav .menu a{color:var(--muted)}nav .menu a:hover{color:var(--accent);text-decoration:none}
hr{border:0;border-top:1px dashed var(--line);margin:1.2em 0}
.article-meta{margin:1.5em 0 2em}.article-meta h1{margin:0}.article-meta .date,.article-meta .author{font-size:.85rem;color:var(--muted);font-weight:400;margin:.3em 0 0}
main+ul,body>ul{list-style:none;padding:0}li .date{color:var(--muted);font-size:.85rem;margin-right:.9em}
pre{border:1px solid var(--line);background:var(--code-bg);padding:.9em 1em;overflow-x:auto;border-radius:4px;font-size:.88rem;line-height:1.5}
code{background:var(--code-bg);padding:.1em .3em;border-radius:3px;font-size:.9em}pre code{background:none;padding:0;font-size:inherit}
blockquote{margin:1em 0;padding:.2em 1em;border-left:3px solid var(--accent);background:var(--code-bg)}
img,iframe,video,svg{max-width:100%;height:auto}figure{margin:1.5em 0}figcaption{font-size:.85rem;color:var(--muted);text-align:center}
table{border-collapse:collapse;margin:1.2em auto;font-size:.92rem}th,td{padding:.4em .7em;border-bottom:1px solid var(--line);text-align:left}thead th{border-bottom:2px solid var(--line)}
footer{margin-top:3em;font-size:.85rem;color:var(--muted);text-align:center}
.mermaid{text-align:center;margin:1.5em 0;background:none;border:0}