:root{color-scheme:light dark;--bg:#f8fafc;--card:#fff;--fg:#0f172a;--muted:#475569;--line:#e2e8f0;--accent:#4f46e5}
@media (prefers-color-scheme:dark){:root{--bg:#020617;--card:#0f172a;--fg:#e2e8f0;--muted:#94a3b8;--line:#1e293b;--accent:#818cf8}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
header,main,footer{max-width:46rem;margin:0 auto;padding:0 1.25rem}
header{display:flex;align-items:center;gap:.75rem;padding-top:1.25rem;padding-bottom:1.25rem}
header a.brand{display:flex;align-items:center;gap:.6rem;color:var(--fg);text-decoration:none;font-weight:700;font-size:1.1rem}
header img{width:36px;height:36px;border-radius:22%}
header .lang{margin-left:auto;font-size:.9rem}
main{background:var(--card);border:1px solid var(--line);border-radius:1rem;padding:1.5rem 1.25rem 2rem}
h1{font-size:1.7rem;line-height:1.25;margin:.25rem 0 .25rem}
h2{font-size:1.15rem;margin:1.8rem 0 .4rem}
p,li{color:var(--fg)}
.meta{color:var(--muted);font-size:.9rem;margin-top:0}
a{color:var(--accent)}
ul{padding-left:1.25rem}
li{margin:.25rem 0}
.box{border-left:4px solid var(--accent);padding:.6rem 1rem;margin:1rem 0;background:rgba(79,70,229,.07);border-radius:.4rem}
table{border-collapse:collapse;width:100%;font-size:.92rem;margin:.5rem 0}
th,td{border:1px solid var(--line);padding:.45rem .55rem;text-align:left;vertical-align:top}
footer{padding-top:1.25rem;padding-bottom:2rem;color:var(--muted);font-size:.85rem;display:flex;flex-wrap:wrap;gap:.4rem 1rem}
code{font-size:.85em;overflow-wrap:anywhere}
@media (max-width:520px){table{font-size:.85rem}th,td{padding:.35rem .4rem}}
main{max-width:44rem}
main p,main li{max-width:68ch}
.toc{border:1px solid var(--line);border-radius:.75rem;padding:.75rem 1rem;margin:1rem 0 1.5rem;font-size:.92rem}
.toc p{margin:0 0 .25rem;font-weight:600;color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
.toc ol{margin:0;padding-left:1.4rem;columns:2;column-gap:2rem}
.toc li{margin:.15rem 0;break-inside:avoid}
.toc a{text-decoration:none}.toc a:hover{text-decoration:underline}
h2{scroll-margin-top:1rem;padding-top:.25rem;border-top:1px solid var(--line);padding-top:1.1rem}
@media (max-width:520px){.toc ol{columns:1}main{border-radius:.75rem;padding:1.1rem 1rem 1.5rem}h1{font-size:1.45rem}}
