* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: #f4f7f6;
  color: #243832;
  font: 15px/1.6 Arial, sans-serif;
}
main {
  width: min(460px, calc(100% - 32px));
  margin: 10vh auto;
  padding: 32px;
  background: white;
  border: 1px solid #dfe7e3;
  border-radius: 14px;
}
header { margin-bottom: 30px; }
header strong { display: block; font-size: 26px; }
header span { color: #687b72; }
h1 { font-size: 25px; margin: 0 0 10px; }
p { color: #586d63; }
form { display: grid; gap: 10px; }
label { font-weight: bold; margin-top: 10px; }
input, button {
  font: inherit;
  padding: 12px;
  border-radius: 7px;
}
input { width: 100%; border: 1px solid #bacbc2; }
button {
  margin-top: 16px;
  background: #17654b;
  color: white;
  border: 0;
  cursor: pointer;
}
button:disabled { opacity: .6; cursor: wait; }
input:focus-visible, button:focus-visible {
  outline: 3px solid #8abca3;
  outline-offset: 3px;
}
dt { margin-top: 12px; color: #687b72; }
dd { margin: 0; overflow-wrap: anywhere; }
#message { color: #9c342b; white-space: pre-wrap; }