
:root { --bg:#fbfbf8; --panel:#f0f1ea; --fg:#22261f; --muted:#5d6358; --line:#d7d9cd; --accent:#1f6b4a; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root { --bg:#16191a; --panel:#20252a; --fg:#e6e8e0; --muted:#a2a89c; --line:#353b3f; --accent:#74cfa1; color-scheme: dark; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16.5px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
a { color:var(--accent); }
.top { display:flex; flex-wrap:wrap; gap:10px 24px; align-items:baseline; justify-content:space-between; padding:14px max(16px,calc(50% - 460px)); border-bottom:1px solid var(--line); }
.brand { font-weight:700; color:var(--fg); text-decoration:none; }
.top nav { display:flex; flex-wrap:wrap; gap:6px 18px; }
.note { margin:0; padding:8px max(16px,calc(50% - 460px)); background:var(--panel); color:var(--muted); font-size:.88rem; }
main { max-width:920px; margin:0 auto; padding:24px 16px 48px; overflow-wrap:break-word; }
h1 { font-size:1.9rem; line-height:1.2; text-wrap:balance; }
h2 { margin-top:2em; font-size:1.35rem; text-wrap:balance; }
h3 { margin-top:1.6em; font-size:1.1rem; }
img { max-width:100%; height:auto; vertical-align:middle; }
img.icon, img[src*="/assets/"] { height:1.1em; width:auto; }
pre, code { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.9em; }
pre { padding:12px; overflow-x:auto; background:var(--panel); border:1px solid var(--line); border-radius:6px; }
dl.code dt, dl.file dt { font-size:.85rem; color:var(--muted); }
dl.code dd, dl.file dd { margin:0; }
table { display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; }
th, td { padding:6px 10px; border:1px solid var(--line); text-align:left; vertical-align:top; }
.toc { float:right; width:16rem; margin:0 0 16px 24px; padding:10px 14px; background:var(--panel); border-radius:6px; font-size:.9rem; }
.toc ul { margin:0; padding-left:1.1em; }
.plan { columns:2 16rem; padding-left:1.2em; }
footer { max-width:920px; margin:0 auto; padding:16px; color:var(--muted); font-size:.9rem; border-top:1px solid var(--line); }
footer a { color:inherit; }
@media (max-width:640px) { .toc { float:none; width:auto; margin:0 0 16px; } }
.leftalign { text-align:left; } .centeralign { text-align:center; } .rightalign { text-align:right; }
.medialeft { float:left; margin:0 16px 8px 0; } .mediaright { float:right; margin:0 0 8px 16px; } .mediacenter { display:block; margin:0 auto; }
