/* System fonts and local CSS keep the foundation small and self-contained. */
:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #101419; color: #edf2f5; line-height: 1.65; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #a5e9c4; text-underline-offset: .25em; }
a:focus-visible { outline: 2px solid #a5e9c4; outline-offset: 6px; }
.site-header, main, footer { width: min(1080px, calc(100% - 3rem)); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.6rem; border-bottom: 1px solid #303840; }
.brand { font-size: 1.65rem; font-weight: 800; letter-spacing: -.06em; color: #edf2f5; text-decoration: none; }
.brand span, .eyebrow { color: #a5e9c4; }
.status { font-size: .8rem; color: #c1cbd3; border: 1px solid #3b4751; border-radius: 2rem; padding: .25rem .8rem; }
.hero { padding-block: clamp(3rem, 8vw, 7rem); max-width: 850px; }
.eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
h1 { font-size: clamp(2.6rem, 7vw, 5.5rem); line-height: 1.08; letter-spacing: -.055em; margin: 1.2rem 0 1.8rem; }
h1 span { color: #a5e9c4; }
.intro { max-width: 590px; font-size: 1.15rem; color: #bdc7d0; }
.panel { padding: clamp(1.4rem, 4vw, 2.5rem); border: 1px solid #303840; border-radius: 1rem; background: #181e25; margin-bottom: 4rem; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.3; letter-spacing: -.025em; }
.panel p:last-child { max-width: 650px; color: #bdc7d0; }
footer { border-top: 1px solid #303840; padding-block: 1.5rem; color: #aab6c0; font-size: .8rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.skip-link { position: absolute; top: -5rem; left: 1rem; background: #101419; padding: .5rem; }
.skip-link:focus { top: .5rem; }
code { overflow-wrap: anywhere; }