:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: #eaf5f3; background: radial-gradient(circle at 82% 4%, #123d3b 0, transparent 35%), #071018; line-height: 1.7; }
a { color: #79edcf; text-underline-offset: .2em; }
a:hover { color: #b8ffe9; }
a:focus-visible { outline: 3px solid #79edcf; outline-offset: 4px; border-radius: 2px; }
.skip-link { position: absolute; top: -5rem; left: 1rem; padding: .5rem 1rem; background: #071018; }
.skip-link:focus { top: 1rem; }
.header { max-width: 900px; margin: 0 auto; padding: 1.5rem clamp(1.25rem, 5vw, 2.5rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #ffffff25; }
.brand { color: #fff; font-weight: 800; letter-spacing: .08em; text-decoration: none; }
.brand span { color: #79edcf; }
main { max-width: 900px; margin: 0 auto; padding: clamp(2.5rem, 7vw, 5rem) clamp(1.25rem, 5vw, 2.5rem); }
.eyebrow { color: #79edcf; font-size: .78rem; font-weight: 800; letter-spacing: .2em; }
h1 { max-width: 18ch; margin: .4rem 0 1.2rem; font-size: clamp(2.4rem, 7vw, 4.4rem); line-height: 1.1; letter-spacing: -.04em; }
.intro { max-width: 64ch; color: #c4d5d2; font-size: clamp(1.02rem, 2.5vw, 1.2rem); }
section { border-top: 1px solid #ffffff25; padding: 1.25rem 0; }
section:first-of-type { margin-top: 2.5rem; }
h2 { margin: .4rem 0; color: #fff; font-size: clamp(1.2rem, 3vw, 1.55rem); }
section p { max-width: 68ch; margin: .55rem 0; color: #c4d5d2; }
code { padding: .12rem .35rem; border: 1px solid #79edcf55; border-radius: .3rem; color: #b8ffe9; }
footer { max-width: 900px; margin: 0 auto; padding: 1.5rem clamp(1.25rem, 5vw, 2.5rem) 3rem; border-top: 1px solid #ffffff25; color: #a8bfbb; }
@media (max-width: 480px) { .header { align-items: flex-start; flex-direction: column; } }