:root{--bg:#fbfbfa;--fg:#1c1d1f;--mut:#6b6f76;--line:#e3e3e0;--acc:#2f5d7c}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.6 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
header{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;border-bottom:1px solid var(--line)}
.mark{font-weight:700;letter-spacing:.5px}.mark span{color:var(--acc)}
nav a{margin-left:20px;color:var(--mut);text-decoration:none;font-size:14px}
nav a:hover{color:var(--acc)}
main{max-width:860px;margin:0 auto;padding:44px 32px}
h1{font-size:28px;margin:0 0 6px}h1 small{font-weight:400;font-size:15px;color:var(--mut);margin-left:8px}
.lead{color:var(--mut);margin:0 0 34px;max-width:60ch}
.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
article{border:1px solid var(--line);border-radius:6px;padding:18px;background:#fff}
article h2{font-size:15px;margin:0 0 8px}article p{margin:0;color:var(--mut);font-size:14px}
.note{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);color:var(--mut);font-size:13px}
footer{padding:22px 32px;border-top:1px solid var(--line);color:var(--mut);font-size:13px}
@media(prefers-color-scheme:dark){:root{--bg:#141517;--fg:#e8e8e6;--mut:#9aa0a6;--line:#2a2c30;--acc:#6ea8cc}article{background:#1b1d20}}