:root {
  color-scheme: dark;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background: #10141c;
  color: #e7edf7;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
}

main {
  width: min(100%, 50rem);
  border: 1px solid #344055;
  border-radius: 1rem;
  background: #171d28;
  box-shadow: 0 1.5rem 4rem #0008;
  padding: clamp(1.5rem, 5vw, 3.5rem);
}

.eyebrow {
  color: #8cc7ff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  margin: 0 0 1.25rem;
}

h1, h2 { line-height: 1.15; }
h1 { font-size: clamp(2rem, 7vw, 4rem); margin: 0; }
h2 { font-size: 1rem; margin-top: 2rem; color: #b8c7dc; }
.lede, .footnote { color: #bcc8d8; line-height: 1.65; }

dl { margin: 0; }
dl div { border-top: 1px solid #344055; padding: .85rem 0; }
dt { color: #91a0b6; font-size: .83rem; margin-bottom: .35rem; }
dd { margin: 0; overflow-wrap: anywhere; }
code { color: #d4e8ff; }

ul { color: #bcc8d8; line-height: 1.7; padding-left: 1.2rem; }
a { color: #8cc7ff; }
a:hover { color: #d4e8ff; }
.footnote { border-top: 1px solid #344055; margin-top: 2rem; padding-top: 1.25rem; font-size: .9rem; }