:root{--bg:#F4EFE6;--card:#FFFDF8;--ink:#1F1A2E;--ink2:#5E5870;--lime:#D3E15A;--line:#ECE5D7;--tomato:#EE5A3A}
@media (prefers-color-scheme:dark){:root{--bg:#16141F;--card:#211E2C;--ink:#F1ECE2;--ink2:#B8B2C4;--line:#2E2A3B}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 "Bricolage Grotesque",system-ui,-apple-system,sans-serif}
main{max-width:720px;margin:0 auto;padding:40px 20px 72px}
header{display:flex;align-items:center;gap:14px;margin-bottom:28px}
.mark{width:52px;height:52px;border-radius:12px;background:var(--lime);display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:9px}
.mark i{background:#FFFDF8;border-radius:3px}.mark i.c{background:#1F1A2E}
.brand{font:400 30px/1 "Instrument Serif",Georgia,serif}
h1{font:400 clamp(40px,8vw,58px)/1.05 "Instrument Serif",Georgia,serif;margin:0 0 12px}
h2{font:400 30px/1.15 "Instrument Serif",Georgia,serif;margin:36px 0 8px}
p,li{color:var(--ink)}
.muted{color:var(--ink2);font-size:15px}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px 22px;margin:18px 0}
a{color:inherit;text-decoration-color:var(--tomato);text-underline-offset:3px}
nav{display:flex;gap:18px;flex-wrap:wrap;margin-top:44px;font-size:15px;color:var(--ink2)}
ul{padding-left:22px}