:root { color-scheme: light dark; background: var(--paper); color: var(--ink); }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 760px; margin: auto; padding: 52px 28px 40px; }
a { color: var(--accent); text-underline-offset: .2em; }
.home,.eyebrow,h2,h3,footer { font: 13px/1.6 var(--font-mono); }
.home { display: inline-block; margin-bottom: 54px; }
.eyebrow { color: var(--ink-soft); }
h1 { font: 400 clamp(42px,8vw,68px)/1.05 var(--font-display); letter-spacing: -.02em; margin: 16px 0 24px; }
p,dd,blockquote { font-size: 17px; line-height: 1.65; }
.intro { font-size: 23px; line-height: 1.45; }
section { margin-top: 38px; border-top: 1px solid var(--ink-faint); padding-top: 20px; }
h2 { text-transform: uppercase; letter-spacing: .06em; }
h3 { margin-bottom: 8px; }
pre { overflow-x: auto; padding: 17px; background: var(--paper-deep); border: 1px solid var(--ink-faint); border-radius: var(--edition-radius); }
code { font: 13px/1.65 var(--font-mono); }
dt { margin-top: 20px; }
dd { margin: 4px 0 0; }
blockquote { margin: 24px 0; padding-left: 20px; border-left: 2px solid var(--accent); }
footer { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 48px; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (max-width:480px) { main { padding:28px 20px; } .home { margin-bottom:32px; } .intro { font-size:21px; } }