:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #17202a;
  background: #f4f6f8;
}

* { box-sizing: border-box; }

body { margin: 0; }

.page {
  width: min(100% - 2rem, 42rem);
  margin: 0 auto;
  padding: 2rem 0 3rem;
}

.eyebrow {
  margin: 0 0 .5rem;
  color: #5c6873;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

h1, h2 { line-height: 1.2; }
h1 { margin: 0 0 .75rem; font-size: clamp(1.8rem, 8vw, 2.5rem); }
h2 { margin: 0 0 1rem; font-size: 1.15rem; }

.status {
  margin: 0 0 1.5rem;
  color: #46525e;
}

.preview {
  padding: 1.25rem;
  border: 1px solid #d4dbe1;
  border-radius: .75rem;
  background: #fff;
  box-shadow: 0 2px 8px rgb(23 32 42 / 6%);
}

dl { margin: 0; }
dl > div { padding: .75rem 0; border-top: 1px solid #e8ecef; }
dl > div:first-child { padding-top: 0; border-top: 0; }
dl > div:last-child { padding-bottom: 0; }
dt { color: #5c6873; font-size: .8rem; font-weight: 700; }
dd { margin: .25rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.launch {
  display: inline-block;
  margin-top: 1.5rem;
  padding: .8rem 1rem;
  border-radius: .5rem;
  background: #1d4ed8;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.launch[aria-disabled="true"] {
  background: #aab4be;
  cursor: not-allowed;
  pointer-events: none;
}

.instructions {
  margin: 1rem 0 0;
  color: #46525e;
  font-size: .92rem;
  line-height: 1.5;
}

@media (min-width: 40rem) {
  .page { padding-top: 4rem; }
}