:root { color-scheme: light; font-family: system-ui, sans-serif; color: #243e50; background: #ece9df; }
* { box-sizing: border-box; }
body { margin: 0; font-size: 16px; line-height: 1.9; }
a { color: #126077; text-underline-offset: .2em; overflow-wrap: anywhere; }
a:focus-visible, summary:focus-visible { outline: 3px solid #b87322; outline-offset: 4px; }
.site-header { padding: var(--navigation-bottom) max(20px, calc((100% - 760px) / 2)) 18px; background: #18394f; }
.site-header a { color: #e4f3ed; font-weight: 700; text-decoration: none; }
main { max-width: 760px; margin: 28px auto; padding: clamp(22px, 5vw, 48px); background: #fffdf7; border: 1px solid #d3d8d3; border-radius: 10px; box-shadow: 0 5px 20px #263e5010; }
.eyebrow { color: #456b75; font-size: 12px; font-weight: 700; letter-spacing: .16em; }
h1 { margin: 8px 0 24px; font-size: clamp(27px, 5vw, 37px); line-height: 1.4; }
h2 { margin: 36px 0 12px; padding-top: 18px; border-top: 1px solid #d5dfdc; font-size: 22px; line-height: 1.5; }
h2[id] { scroll-margin-top: var(--navigation-bottom, 64px); }
h3 { margin: 24px 0 8px; font-size: 18px; line-height: 1.6; }
p { margin: 12px 0; }
ul { padding-left: 1.4em; }
li { margin: 10px 0; }
.lead { font-size: 18px; }
.note { padding: 14px 18px; border-left: 4px solid #5e9997; background: #edf4ef; }
code { font-size: .9em; overflow-wrap: anywhere; }
.page-nav { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 32px; padding-top: 20px; border-top: 1px solid #d5dfdc; }
@media (max-width: 800px) { main { margin: 16px 12px; } }