:root { --paper: #F5F3EE; --ink: #1E1C19; --ink-2: #4A4741; --muted: #6B675F; --cobalt: #2E55D9; --cobalt-deep: #1F3DA6; --line: #E2DED5; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 "Instrument Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
main { max-width: 680px; margin: 0 auto; padding: 32px 16px 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 15px "Bricolage Grotesque", system-ui, sans-serif; color: var(--ink); text-decoration: none; }
.bm { width: 20px; height: 20px; border-radius: 50%; background: var(--cobalt); position: relative; }
.bm::after { content: ""; position: absolute; left: 21%; top: 27%; width: 29%; height: 29%; border-radius: 50%; background: var(--paper); }
h1 { font: 800 clamp(30px, 6vw, 42px)/1.08 "Bricolage Grotesque", system-ui, sans-serif; letter-spacing: -.02em; margin: 36px 0 8px; }
h2 { font: 700 20px/1.25 "Bricolage Grotesque", system-ui, sans-serif; margin: 32px 0 6px; }
p, li { color: var(--ink-2); }
ul { padding-left: 20px; }
li { margin: 4px 0; }
a { color: var(--cobalt-deep); }
.updated { color: var(--muted); font-size: 14px; margin: 0 0 16px; }
.box { background: #fff; border-radius: 16px; padding: 16px 18px; box-shadow: inset 0 0 0 1px var(--line); }
.box p { margin: 0; }
footer { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; display: flex; gap: 18px; }