:root { color-scheme: dark; }
html, body { height: 100%; margin: 0; }
body {
  display: grid; place-items: center; padding: 16px; box-sizing: border-box;
  background: #0d0f14; color: #c9d0e6;
  font: 15px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
main { max-width: 440px; }
.mark { font-size: 13px; font-weight: 700; letter-spacing: 6px; color: #2ec3e6; margin: 0 0 28px; }
h1 { margin: 0 0 10px; font-size: 26px; font-weight: 600; color: #f4f6fc; }
p { margin: 0; color: #8794bd; }

/* The report form. */
.report { max-width: 480px; width: 100%; }
.report form { display: grid; gap: 8px; margin-top: 24px; }
.report label { margin-top: 8px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #6c7799; }
.report .optional { text-transform: none; letter-spacing: 0; }
.report select, .report textarea, .report input {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #262b3a; border-radius: 6px;
  background: #151821; color: #f4f6fc; font: inherit;
}
.report textarea { resize: vertical; }
.report button {
  margin-top: 16px; justify-self: start; padding: 12px 22px; border: 0; border-radius: 6px;
  background: #ffa64d; color: #0d0f14; font: inherit; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer;
}
.report button:disabled { opacity: 0.5; cursor: default; }
.report .status { min-height: 1.4em; color: #ffb36b; }
.report .thanks { color: #2ec3e6; }