:root {
  color-scheme: dark;
  font-family: system-ui, sans-serif;
  color: #f4f6fa;
  background: #0c1018;
}
main { max-width: 44rem; margin: 4rem auto; padding: 0 1.25rem; }
a { color: #b7d9ff; }
h1 { font-size: 2.5rem; margin: 1rem 0 2rem; }
h2 { margin-top: 2rem; }
p, dt { color: #b8c2d2; }
form { display: grid; gap: .75rem; max-width: 24rem; }
input, button {
  box-sizing: border-box;
  width: 100%;
  font: inherit;
  padding: .8rem 1rem;
  border: 1px solid #596477;
  border-radius: .6rem;
}
button { cursor: pointer; color: #0c1018; background: #b7d9ff; font-weight: 650; }
dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .75rem; }
dl div { background: #192231; padding: 1rem; border-radius: .6rem; }
dd { margin: .3rem 0 0; font-size: 1.9rem; font-weight: 650; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .7rem; border-bottom: 1px solid #394759; }
th:last-child, td:last-child { text-align: right; }