:root {
  color-scheme: dark;
  font-family: Inter, system-ui, sans-serif;
  background: #11171b;
  color: #edf1ee;
}
body {
  margin: 0;
  padding: clamp(1.1rem, 6vw, 5rem);
}
main {
  max-width: 38rem;
  margin: auto;
}
h1 {
  margin: .5rem 0 1rem;
  font-size: clamp(1.65rem, 6vw, 2.4rem);
}
p {
  line-height: 1.55;
}
.context {
  color: #b4e0ce;
  font-weight: 600;
}
.status {
  padding: .9rem 1rem;
  border: 1px solid #45564e;
  border-radius: .55rem;
}
fieldset {
  margin: 1.2rem 0;
  padding: 1rem;
  border: 1px solid #45564e;
  border-radius: .55rem;
}
input, button, .action {
  box-sizing: border-box;
  min-height: 2.75rem;
  margin: .35rem 0;
  padding: .45rem .8rem;
  border: 1px solid #687c71;
  border-radius: .35rem;
  font: inherit;
}
button, .action {
  display: inline-flex;
  align-items: center;
  background: #b4e0ce;
  color: #132c23;
  font-weight: 600;
  text-decoration: none;
}
input {
  max-width: 100%;
}
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 3px solid #fcda8a;
  outline-offset: 3px;
}
code {
  font-size: 1.15rem;
  overflow-wrap: anywhere;
}