:root{color-scheme:light;--canvas:#f7f4ed;--paper:#fff;--ink:#252c29;--muted:#56635c;--accent:#225f49;--line:#e5e7df}
*{box-sizing:border-box}
html{font-family:Helvetica,Arial,sans-serif;font-size:16px;line-height:1.55}
body{margin:0;background:var(--canvas);color:var(--ink)}
.wrap{width:min(100% - 32px,820px);margin:auto}
header{padding:28px 0 16px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-weight:700;text-decoration:none;font-size:1.1rem}
.mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--accent);color:#fff;font-weight:700}
nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
nav a{display:inline-block;padding:7px 12px;border-radius:10px;color:var(--accent);text-decoration:none;font-weight:700}
nav a[aria-current="page"]{background:#e4ece6}
main{padding:18px 0 55px}
article{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:clamp(22px,4vw,38px);box-shadow:0 2px 8px #1e33210c}
h1{font-size:clamp(1.7rem,5vw,2.2rem);line-height:1.2;margin:0 0 12px}
h2{font-size:1.18rem;line-height:1.3;margin:30px 0 8px}
p{margin:0 0 14px}
ul{margin:0 0 18px;padding-left:24px}
li+li{margin-top:5px}
a{color:var(--accent);text-underline-offset:3px;overflow-wrap:anywhere}
.lead{font-size:1.06rem;color:var(--muted);margin-bottom:25px}
.note{padding:14px 16px;border-left:3px solid var(--accent);background:#f2f6f2;border-radius:0 10px 10px 0}
.date,footer{color:var(--muted);font-size:.88rem}
footer{padding:0 0 32px}
@media(prefers-color-scheme:dark){:root{color-scheme:dark;--canvas:#161a17;--paper:#222824;--ink:#edf3ed;--muted:#bdc9be;--accent:#9bd9b5;--line:#39443c}.mark{background:#315f48}.note{background:#2d3930}nav a[aria-current="page"]{background:#2f4235}}