:root { color-scheme: dark; font-family: system-ui, sans-serif; color: #f3fcff; background: #05080c; }
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.7; }
a { color: #68dfea; text-underline-offset: .2em; overflow-wrap: anywhere; }
a:hover { color: #fff; }
a:focus-visible { outline: 3px solid #68dfea; outline-offset: 4px; }
header, nav, main, footer, .draft { max-width: 56rem; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); }
header { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.75rem; }
.brand { color: #f3fcff; font-size: 1.6rem; font-weight: 750; text-decoration: none; letter-spacing: -.05em; }
.brand span { display: block; font-size: .75rem; letter-spacing: .04em; font-weight: 400; color: #a4b6bc; }
.language { padding: .5rem 0; }
.draft { color: #e0ca92; font-size: .82rem; border-block: 1px solid #29343a; padding-block: .8rem; }
nav { display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; padding-block: 1rem; }
nav a { padding-block: .5rem; font-size: .95rem; }
nav a[aria-current] { color: #fff; font-weight: 700; text-decoration-thickness: .16em; }
main { padding-block: 1.75rem 3rem; }
h1 { font-size: clamp(2rem, 5vw, 3.15rem); letter-spacing: -.045em; line-height: 1.13; margin: 0 0 1.5rem; text-wrap: balance; }
h2 { font-size: 1.4rem; line-height: 1.3; margin: 2.6rem 0 1rem; letter-spacing: -.02em; }
p, li { max-width: 72ch; overflow-wrap: anywhere; }
p { margin: 1rem 0; color: #c1d0d5; }
strong { color: #f3fcff; }
ol { padding-left: 1.6rem; }
li { margin: .85rem 0; padding-left: .25rem; }
mark { background: #29251b; color: #f1d593; padding: .1em .2em; box-decoration-break: clone; }
footer { border-top: 1px solid #29343a; padding-block: 1.5rem 3rem; color: #a4b6bc; font-size: .85rem; }
.skip { position: absolute; left: 1rem; top: -6rem; background: #05080c; padding: .5rem 1rem; z-index: 1; }
.skip:focus { top: .5rem; }
@media print { :root { color-scheme: light; color: #000; background: #fff; } p, strong, a, footer { color: #000; } nav, .language, .skip { display: none; } mark { color: #000; background: #eee; } }