:root {
  color-scheme: light dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: #202124;
  background: #fcfcfc;
}

a { color: #005ea8; }
a:hover { color: #003f73; }
a:focus-visible {
  outline: 3px solid #ff9d00;
  outline-offset: 3px;
  border-radius: 2px;
}

.container {
  width: min(100% - 2rem, 46rem);
  margin: 0 auto;
}

header, footer { background: #f0f4f7; }

header { border-bottom: 1px solid #d6dde3; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
}

.brand {
  color: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
}

nav ul, .language-links {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

main { padding: 2.5rem 0; }
section + section { margin-top: 3rem; }
h1, h2, h3 { line-height: 1.2; }
h1 { font-size: clamp(2rem, 6vw, 3rem); }
h2 { margin-top: 0; }
.lead { font-size: 1.15rem; }
.card {
  margin-top: 1.25rem;
  padding: 1.25rem;
  border: 1px solid #d6dde3;
  border-radius: .75rem;
  background: #fff;
}
.eyebrow { color: #52606d; font-weight: 600; }
footer { border-top: 1px solid #d6dde3; padding: 1.25rem 0; }
footer p { margin: 0; }

@media (prefers-color-scheme: dark) {
  body { color: #eef3f7; background: #15191d; }
  header, footer { background: #20272d; border-color: #39434d; }
  .card { background: #20272d; border-color: #39434d; }
  a { color: #73c2ff; }
  a:hover { color: #b4dfff; }
  .eyebrow { color: #b7c3cd; }
}

@media (max-width: 34rem) {
  .site-header { align-items: flex-start; flex-direction: column; }
}

ul.plain { padding-left: 1.25rem; }
ul.plain li + li { margin-top: .35rem; }
.todo {
  padding: .1rem .35rem;
  border-radius: .3rem;
  background: #ffe8a3;
  color: #5c4400;
  font-weight: 600;
}