@import url("https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,500;6..72,600&family=IBM+Plex+Sans:wght@400;600&display=swap");
:root{--bg:#f3f4f2; --surface:#fff; --ink:#1a2422; --ink-2:#4a5a56; --ink-3:#77857f; --line:#d8ddd6; --accent:#0B6C3E}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0d1514; --surface:#131e1c; --ink:#e7eeec; --ink-2:#a6b7b2; --ink-3:#7d8f8a; --line:#243532; --accent:#4CC38A}}
:root[data-theme="dark"]{--bg:#0d1514; --surface:#131e1c; --ink:#e7eeec; --ink-2:#a6b7b2; --ink-3:#7d8f8a; --line:#243532; --accent:#4CC38A}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink); font:15px/1.65 "IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
main{position:relative; overflow:hidden; max-width:760px; margin:32px auto; padding:34px 28px 32px; background:var(--surface); border:1px solid var(--line); border-radius:14px}
main::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,#0B6C3E 0 64%,#E33B32 64% 90%,#FCD108 90%)}
@media (max-width:600px){main{margin:0; border-radius:0; border-width:0 0 1px; padding:24px 16px}}
.brand{display:flex; align-items:center; gap:8px; margin:0 0 18px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent)}
.brand img{border-radius:4px}
h1{font-family:"Newsreader",Georgia,serif; font-weight:600; font-size:32px; line-height:1.15; margin:0 0 4px}
h2{font-size:16px; margin:26px 0 6px}
.meta{color:var(--ink-3); margin:0 0 20px; font-size:13px}
p,li{color:var(--ink-2)}
ul{padding-left:20px}
b{color:var(--ink)}
a{color:var(--accent)}
.foot{margin-top:30px; padding-top:16px; border-top:1px solid var(--line); font-size:13px}
