header, main, footer { width: min(var(--reading-width), calc(100% - var(--page-gutter) * 2)); margin-inline: auto; }
header { padding-block: var(--space-6); border-bottom: var(--border) solid var(--line); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
header nav { font-size: var(--type-sm); }
main { padding-block: var(--space-8) var(--space-12); }
h1 { margin: var(--space-3) 0 var(--space-5); }
h2 { font-size: var(--type-subtitle); margin-top: var(--space-10); }
h3 { margin-top: var(--space-6); }
p, li { color: var(--muted); }
li { margin-block: var(--space-2); }
ol, ul { padding-left: var(--space-6); }
.intro { font-size: var(--type-lg); }
.note { padding: var(--space-4); background: var(--action-bg); border-inline-start: var(--border-strong) solid var(--brand); }
.toc { padding: var(--space-4) var(--space-5); background: var(--surface); border: var(--border) solid var(--line); border-radius: var(--radius); }
.toc ol { margin-bottom: 0; }
.article-meta, figcaption { color: var(--muted); font-size: var(--type-xs); }
figure { margin: var(--space-6) 0; }
figure img { display: block; width: 100%; height: auto; border: var(--border) solid var(--line); border-radius: var(--radius); }
figcaption { margin-top: var(--space-2); }
.example-table { width: 100%; border-collapse: collapse; font-size: var(--type-sm); }
.example-table th, .example-table td { padding: var(--space-3); border-bottom: var(--border) solid var(--line); text-align: left; }
.example-table th { color: var(--muted); font-weight: var(--weight-medium); }
.example-table td { font-family: var(--font-mono); }
.not-found { min-height: var(--viewport-height); display: grid; place-items: center; }
.not-found main { text-align: center; }
.not-found img { width: var(--logo-large); height: var(--logo-large); margin-bottom: var(--space-5); }