:root { color-scheme: dark; }
* { box-sizing: border-box }
body {
  margin: 0; padding: 3rem 1.5rem 6rem;
  background: #0d0f12; color: #d7dae0;
  font: 16px/1.7 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
main { max-width: 46rem; margin: 0 auto }
a { color: #8ab4ff }
h1 { font-size: 2rem; letter-spacing: -.02em; color: #f2f3f5; margin: 0 0 .25rem }
h2 { font-size: 1.15rem; color: #f2f3f5; margin: 2.75rem 0 .75rem; letter-spacing: -.01em }
h3 { font-size: 1rem; color: #f2f3f5; margin: 1.75rem 0 .5rem }
.meta { color: #6b7280; font-size: .9rem; margin: 0 0 2.5rem }
.back { display: inline-block; margin-bottom: 2rem; color: #6b7280; text-decoration: none; font-size: .9rem }
.back:hover { color: #d7dae0 }
ul { padding-left: 1.25rem }
li { margin: .4rem 0 }
table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .93rem; display: block; overflow-x: auto }
th, td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid #23262c; vertical-align: top }
th { color: #f2f3f5; font-weight: 600; white-space: nowrap }
code { background: #1a1d22; padding: .1rem .35rem; border-radius: 4px; font-size: .88em }
.note { border-left: 3px solid #3b3f47; padding: .75rem 0 .75rem 1rem; margin: 1.25rem 0; color: #a4abb5 }
footer { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid #23262c; color: #6b7280; font-size: .875rem }

/* --- support form --- */
form { margin-top: 2rem }
.field { margin-bottom: 1.25rem }
label { display: block; margin-bottom: .4rem; color: #f2f3f5; font-size: .95rem; font-weight: 500 }
input[type=email], textarea {
  width: 100%; padding: .75rem .9rem; border-radius: 10px;
  border: 1px solid #2b2f36; background: #15181d; color: #f2f3f5;
  font: inherit; font-size: 1rem;
}
input[type=email]:focus, textarea:focus { outline: 2px solid #8ab4ff; outline-offset: 1px; border-color: transparent }
textarea { min-height: 10rem; resize: vertical }
.hint { margin: .4rem 0 0; font-size: .85rem; color: #6b7280 }
button {
  padding: .8rem 1.6rem; border: 0; border-radius: 999px;
  background: #f2f3f5; color: #0d0f12; font: inherit; font-weight: 600; cursor: pointer;
}
button:hover:not(:disabled) { background: #fff }
button:disabled { opacity: .5; cursor: default }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.status { margin-top: 1.25rem; font-size: .95rem; min-height: 1.5rem }
.status.err { color: #ff8b8b }
.status.ok { color: #7ee0a5 }