:root {
  color-scheme: light dark;
  --background: #f8f6f1;
  --surface: #fffefa;
  --text: #292832;
  --muted: #62616b;
  --accent: #5e589c;
  --border: #dedbe7;
  --tint: #efedf8;
  --space-sm: .75rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --radius: 1.25rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.75;
  background: var(--background);
  color: var(--text);
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--accent); text-underline-offset: .2em; overflow-wrap: anywhere; }
a:hover { text-decoration-thickness: .14em; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: .2rem; }
.skip { position: absolute; top: -6rem; left: var(--space-md); padding: var(--space-sm); background: var(--surface); }
.skip:focus { top: var(--space-sm); }
.wrap { width: min(100% - 3rem, 58rem); margin-inline: auto; }
.topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); padding-block: var(--space-md); border-bottom: 1px solid var(--border); }
.brand { font-weight: 750; letter-spacing: -.03em; font-size: 1.35rem; color: var(--text); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; gap: .6rem; }
.brand-mark { color: var(--accent); font-size: 1.7rem; }
.languages { display: flex; flex-wrap: wrap; gap: .3rem; }
.languages a { display: inline-flex; align-items: center; min-height: 44px; padding: .35rem .65rem; font-size: .9rem; }
.languages [aria-current] { background: var(--tint); border-radius: .5rem; text-decoration: none; font-weight: 650; }
main { max-width: 46rem; margin-inline: auto; padding-block: var(--space-lg); }
.eyebrow { margin: 0 0 .5rem; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 650; color: var(--accent); }
h1 { font-size: clamp(2.2rem, 6vw, 3.5rem); line-height: 1.16; letter-spacing: -.045em; margin: 0 0 1rem; }
.updated { color: var(--muted); font-size: .9rem; margin-bottom: 2rem; }
.intro { font-size: 1.12rem; }
.summary { padding: var(--space-md); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-block: 2rem; }
.summary p { margin: 0; }
.summary p + p { margin-top: var(--space-sm); }
.contents { margin-block: 2rem var(--space-lg); padding-bottom: 2rem; border-bottom: 1px solid var(--border); }
.contents h2 { font-size: 1rem; margin: 0 0 .5rem; }
.contents ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; padding-left: 1.5rem; margin: 0; }
.contents a { display: inline-block; padding-block: .5rem; }
section { scroll-margin-top: 1.5rem; margin-top: var(--space-lg); }
h2 { font-size: 1.4rem; letter-spacing: -.02em; line-height: 1.45; margin: 0 0 1rem; }
p { margin: 0 0 1rem; }
ul { padding-left: 1.35rem; }
li { margin-block: .55rem; }
.contact { padding: var(--space-md); background: var(--tint); border-radius: var(--radius); }
.contact a { display: inline-block; padding-block: .5rem; }
footer { color: var(--muted); border-top: 1px solid var(--border); padding-block: 1.5rem; font-size: .9rem; }
footer a { display: inline-block; min-height: 44px; padding-block: .5rem; }
@media (max-width: 36rem) {
  .wrap { width: min(100% - 2rem, 58rem); }
  main { padding-top: 2rem; }
  .contents ol { grid-template-columns: 1fr; }
}
@media (prefers-color-scheme: dark) {
  :root { --background: #1d1c21; --surface: #27262d; --text: #f3f0f8; --muted: #b9b5c2; --accent: #bcb6f2; --border: #45414f; --tint: #302d43; }
}
@media print {
  :root { color-scheme: light; --background: white; --text: black; --muted: #333; --accent: #333; }
  .languages, .contents, footer { display: none; }
  main { max-width: none; padding-top: 1rem; }
  section { break-inside: avoid; }
}