:root { color-scheme: light dark; font-family: system-ui, sans-serif; line-height: 1.65; }
* { box-sizing: border-box; }
body { margin: 0; background: #101623; color: #edf2ff; }
header, main, footer { max-width: 62rem; margin: auto; padding: 1.5rem; }
header { display: flex; flex-wrap: wrap; gap: 1.2rem; border-bottom: 1px solid #53627d; }
a { color: #a9d8ff; text-underline-offset: .2em; }
a:hover { color: #fff; }
a:focus-visible { outline: 3px solid #ffd86b; outline-offset: 4px; }
h1, h2, h3 { line-height: 1.2; text-wrap: balance; }
h1 { font-size: clamp(2rem, 6vw, 3rem); }
h2 { margin-top: 2rem; }
section, article { scroll-margin-top: 1rem; }
article, .notice { padding: 1.2rem; margin-block: 1rem; border: 1px solid #53627d; border-radius: .75rem; background: #192338; }
.notice { border-left: .35rem solid #ffd86b; }
code { font-size: .92em; color: #ffe3a1; overflow-wrap: anywhere; }
pre { padding: 1rem; overflow-x: auto; background: #0c111c; border-radius: .5rem; }
li { margin-block: .8rem; }
ol { padding-left: 1.6rem; }
footer { color: #c1ccdf; border-top: 1px solid #53627d; font-size: .9rem; }
.links { display: flex; flex-wrap: wrap; gap: 1rem; }
@media (prefers-color-scheme: light) {
  body { background: #f7f9ff; color: #18243a; }
  a { color: #064e96; }
  a:hover { color: #18243a; }
  article, .notice { background: #fff; }
  code { color: #754200; }
  pre { background: #e8effb; }
  footer { color: #3e4d66; }
}