:root { --ink:#18261f; --muted:#5f6b62; --cream:#f8f3e7; --paper:#fffdf8; --line:#e9e3d6; --green:#1f8758; --green-dark:#176943; --fill:#fff1c7; }
@media (prefers-color-scheme: dark) { :root { --ink:#e8efe9; --muted:#a8b3aa; --cream:#101612; --paper:#161e19; --line:#2a352d; --green:#46b37d; --green-dark:#7fd3a6; --fill:#4a3f16; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--cream); color:var(--ink); font:16px/1.65 system-ui, -apple-system, "Segoe UI", sans-serif; }
header, main, footer { max-width:760px; margin:0 auto; padding:0 16px; }
header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:22px; padding-bottom:22px; }
.brand { display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:800; font-size:22px; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:var(--green); color:#fff; font-size:19px; }
.back { color:var(--green-dark); font-weight:700; text-decoration:none; }
main { background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:28px clamp(18px, 4vw, 40px) 36px; }
h1 { font-size:clamp(28px, 6vw, 38px); line-height:1.15; margin:0 0 6px; }
h2 { font-size:20px; margin:30px 0 8px; }
h3 { font-size:16px; margin:20px 0 6px; }
p, li { color:var(--ink); }
.updated, .muted { color:var(--muted); font-size:14px; }
.note { padding:12px 16px; border-radius:14px; background:var(--fill); font-size:14px; margin:18px 0; }
mark.fill { background:var(--fill); color:inherit; padding:0 4px; border-radius:4px; }
a { color:var(--green-dark); }
table { width:100%; border-collapse:collapse; font-size:14px; margin:10px 0; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
ul { padding-left:22px; }
footer { padding-top:22px; padding-bottom:30px; color:var(--muted); font-size:13px; display:flex; flex-wrap:wrap; gap:14px; }
footer a { color:var(--muted); }