:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #0a0a0a; background: #fcf9f8; --paper:#fcf9f8; --ink:#0a0a0a; --black:#0a0a0a; --nav-selected:#0a0a0a; --soft:#e5e2e1; --purple:#0a0a0a; --purple-dark:#0a0a0a; --purple-border:#0a0a0a; --cyan:#00f4fe; --safe-right:env(safe-area-inset-right,0px); --safe-bottom:env(safe-area-inset-bottom,0px); --safe-left:env(safe-area-inset-left,0px); }
* { box-sizing: border-box; }
body { margin: 0; padding-bottom: 110px; background: var(--paper); }
header, main, footer { width: min(100% - 40px, 760px); margin-inline: auto; }
header { padding: 32px 0 12px; border-bottom: 2px solid #0a0a0a; }
header a { display: inline-flex; align-items: center; gap: 10px; color: inherit; font-weight: 800; text-decoration: none; }
header img { width: 42px; height: 42px; }
main { padding: 28px 0 48px; line-height: 1.65; }
h1 { margin: 0 0 8px; color: #4f216d; font-size: clamp(2rem, 8vw, 3.6rem); line-height: 1; letter-spacing: -.045em; }
h2 { margin-top: 2.2rem; color: #4f216d; line-height: 1.2; }
h3 { margin-top: 1.5rem; }
p, li { max-width: 70ch; }
a { color: #4f216d; text-underline-offset: 3px; }
.meta { color: #606060; }
.callout { border-left: 4px solid #1dcad3; padding: 12px 16px; background: #f3fcfd; }
footer { display: flex; flex-wrap: wrap; gap: 10px 18px; border-top: 1px solid #bbb; padding: 22px 0 40px; font-size: .85rem; }