:root {
  color-scheme: light dark;
  --canvas: #f6f8f9;
  --surface: #fff;
  --text: #14212a;
  --muted: #52636c;
  --border: #d7e1e5;
  --accent: #087e8b;
  --notice: #fff4cc;
  --notice-text: #584200;
  font-family: system-ui, sans-serif;
  line-height: 1.75;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--text); }
a { color: var(--accent); text-underline-offset: .25em; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
header, .pages, main, footer { max-width: 58rem; margin: auto; padding: 1.5rem 2rem; }
header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.brand { font-size: 2rem; font-weight: 800; color: var(--text); text-decoration: none; }
.brand span { color: var(--accent); }
.languages, .pages { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.languages { font-size: .875rem; }
.pages { padding-top: 0; border-bottom: 1px solid var(--border); }
[aria-current] { font-weight: 750; }
main { min-height: 50vh; }
article { background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; padding: clamp(1.25rem, 4vw, 3rem); overflow-wrap: anywhere; }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.25; margin-block: 0 1.5rem; letter-spacing: -.025em; }
h2 { font-size: 1.25rem; line-height: 1.5; margin-block: 2.25rem .75rem; }
p { margin-block: 0 1.25rem; }
.intro, footer { color: var(--muted); }
.directory { list-style: none; padding: 0; margin: 2rem 0 0; }
.directory li { border-top: 1px solid var(--border); }
.directory a { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1rem; font-weight: 650; text-decoration: none; }
.directory a:hover { text-decoration: underline; }
.preview { padding: .6rem 1.25rem; background: var(--notice); color: var(--notice-text); text-align: center; font-size: .875rem; }
footer { font-size: .875rem; }
footer p { margin-block: 0 .5rem; }
.skip { position: absolute; top: -10rem; inset-inline-start: 1rem; padding: .75rem; background: var(--surface); }
.skip:focus { top: 1rem; }
@media (prefers-color-scheme: dark) {
  :root { --canvas: #10181d; --surface: #192329; --text: #eef4f6; --muted: #afc0c8; --border: #364750; --accent: #71d6df; --notice: #342d13; --notice-text: #ffdf80; }
}
@media (max-width: 36rem) {
  header, .pages, main, footer { padding-inline: 1rem; }
  .pages { gap: .75rem 1rem; font-size: .875rem; }
}
@media print {
  body, article { background: #fff; color: #000; }
  header, nav, footer, .skip { display: none; }
  article { border: 0; padding: 0; }
}