:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #0b1826; color: #e4eef8; line-height: 1.75; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #86e0f3; text-underline-offset: .2em; }
a:hover { color: #fff; }
a:focus-visible { outline: 3px solid #fcd34d; outline-offset: 5px; }
.site-header, main, footer { width: min(100% - 2.5rem, 52rem); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-block: 1.5rem; border-bottom: 1px solid #36506d; }
.brand { font-size: 1.4rem; font-weight: 750; text-decoration: none; }
.brand span { font-size: .85rem; font-weight: 400; color: #c0d5e9; }
main { padding-block: 1.25rem 3rem; }
h1 { font-size: clamp(2rem, 6vw, 3rem); line-height: 1.15; letter-spacing: -.035em; margin: 1.5rem 0 1rem; color: #f1faff; }
h2 { font-size: 1.4rem; line-height: 1.35; margin-top: 2.25rem; color: #c5f3ff; }
p, li, dd { max-width: 72ch; }
li + li { margin-top: .7rem; }
ol, ul { padding-left: 1.5rem; }
dt { font-weight: 700; color: #c5f3ff; margin-top: 1rem; }
dd { margin: .2rem 0 0; }
.lead { font-size: 1.2rem; color: #bdd5ee; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; font-size: .85rem; color: #b5c9dc; }
.breadcrumbs li + li { margin-top: 0; }
.breadcrumbs li + li::before { content: '/'; margin-right: .5rem; }
.cta { display: inline-block; margin-top: 1.5rem; padding: .85rem 1.2rem; border-radius: .65rem; background: #b6edff; color: #102846; font-weight: 700; text-decoration: none; }
.cta:hover { background: #fff; color: #102846; }
.related-guides { border-top: 1px solid #36506d; margin-top: 2.5rem; }
footer { border-top: 1px solid #36506d; padding-block: 1.5rem; font-size: .85rem; color: #b5c9dc; }
.skip-link { position: absolute; top: -8rem; left: 1rem; padding: .7rem 1rem; background: #102846; z-index: 100; }
.skip-link:focus { top: 1rem; }