:root { color-scheme: light; --ink:#171626; --muted:#68677a; --purple:#6655e8; --paper:#fff; --canvas:#f6f5fb; }
* { box-sizing: border-box; }
body { margin:0; background:var(--canvas); color:var(--ink); font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
main { width:min(760px,calc(100% - 32px)); margin:48px auto; background:var(--paper); border-radius:28px; padding:clamp(24px,6vw,56px); box-shadow:0 18px 55px rgba(33,27,88,.09); }
.brand { display:inline-flex; gap:10px; align-items:center; color:var(--purple); font-weight:800; text-decoration:none; }
.mark { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; color:white; background:linear-gradient(145deg,var(--purple),#4035a8); }
h1 { margin:32px 0 6px; font-size:clamp(2rem,7vw,3.3rem); line-height:1.08; letter-spacing:-.045em; }
h2 { margin-top:32px; font-size:1.18rem; }
p,li { color:var(--muted); }
.lede { font-size:1.12rem; }
.updated { font-size:.86rem; color:var(--muted); }
a { color:var(--purple); }
.button { display:inline-block; margin-top:12px; padding:12px 18px; border-radius:999px; background:var(--purple); color:white; font-weight:700; text-decoration:none; }
nav { display:flex; flex-wrap:wrap; gap:16px; margin-top:36px; padding-top:24px; border-top:1px solid #eceaf4; font-size:.9rem; }
ul { padding-left:1.25rem; }
@media (max-width:520px) { main { margin:0; width:100%; min-height:100vh; border-radius:0; } }