:root { color-scheme:dark light; --bg:#0c141b; --surface:#17232e; --text:#eef4f7; --muted:#bdccd5; --line:#536776; --link:#84e4c4; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:1rem/1.65 system-ui,sans-serif; }
header,main,footer { width:min(100% - 2rem,54rem); margin-inline:auto; }
header { padding-block:1.5rem; display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; }
.brand { color:var(--text); font-weight:750; font-size:1.25rem; text-decoration:none; }
nav { display:flex; flex-wrap:wrap; gap:.25rem 1rem; }
a { color:var(--link); text-underline-offset:.2em; overflow-wrap:anywhere; }
nav a { display:inline-flex; align-items:center; min-height:44px; }
:focus-visible { outline:3px solid var(--link); outline-offset:4px; }
.skip { position:absolute; top:-100px; left:1rem; padding:.75rem; background:var(--surface); }
.skip:focus { top:0; }
main { padding-block:1rem 2rem; }
h1 { font-size:clamp(1.8rem,6vw,2.4rem); line-height:1.2; letter-spacing:-.025em; }
h2 { font-size:1.2rem; line-height:1.4; margin-block:0 .75rem; }
p { margin-block:.6rem; overflow-wrap:anywhere; }
section,.status { padding:clamp(1rem,3vw,1.5rem); margin-block:1rem; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.status { border-inline-start:4px solid var(--link); }
.muted,footer { color:var(--muted); }
ul { padding-inline-start:1.25rem; }
li { margin-block:.5rem; }
footer { padding-block:1rem 2rem; border-top:1px solid var(--line); }
@media(prefers-color-scheme:light) { :root { --bg:#f5f8fa; --surface:#fff; --text:#14232e; --muted:#405766; --line:#758793; --link:#086148; } }
@media(forced-colors:active) { section,.status { border:1px solid CanvasText; } }