:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #0B0E13; color: #F2F5F8; line-height: 1.6;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 56px 24px 96px; }
.brand { font-size: 15px; font-weight: 800; letter-spacing: 3px; color: #F4B400; margin-bottom: 8px; }
.brand a { color: #F4B400; text-decoration: none; }
h1 { font-size: 36px; margin: 0 0 8px; line-height: 1.2; }
h2 { font-size: 20px; margin: 40px 0 12px; }
h3 { font-size: 15px; margin: 24px 0 6px; }
.tag { color: #8A97A6; font-size: 18px; margin-bottom: 32px; }
.hex { display: inline-block; color: #F4B400; }
a { color: #F4B400; }
nav { margin: 0 0 40px; font-size: 14px; }
nav a { margin-right: 16px; color: #8A97A6; }
nav a.on { color: #F4B400; font-weight: 700; }
.note {
  background: #151A22; border: 1px solid #232B36; border-left: 3px solid #F4B400;
  border-radius: 8px; padding: 16px 20px; margin: 24px 0;
}
.note.plain { border-left-color: #3A4552; }
.note p:first-child { margin-top: 0; }
.note p:last-child { margin-bottom: 0; }
table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #232B36; vertical-align: top; }
th { color: #8A97A6; font-weight: 600; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
code { background: #151A22; padding: 1px 5px; border-radius: 4px; }
pre {
  background: #151A22; border: 1px solid #232B36; border-radius: 8px;
  padding: 16px; overflow-x: auto; line-height: 1.5;
}
textarea {
  width: 100%; min-height: 260px; background: #151A22; color: #F2F5F8;
  border: 1px solid #232B36; border-radius: 8px; padding: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.5;
}
input[type=email] {
  width: 100%; background: #151A22; color: #F2F5F8; border: 1px solid #232B36;
  border-radius: 8px; padding: 12px 14px; font-size: 15px;
}
button {
  background: #F4B400; color: #0B0E13; border: 0; border-radius: 8px;
  padding: 12px 20px; font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 12px;
}
button:disabled { opacity: 0.5; cursor: default; }
ul.results { list-style: none; padding: 0; margin: 16px 0; }
ul.results li {
  padding: 10px 14px; border-radius: 8px; margin-bottom: 8px; font-size: 14px;
  background: #151A22; border: 1px solid #232B36; border-left: 3px solid #3A4552;
}
li.fail { border-left-color: #E5484D; }
li.pass { border-left-color: #46A758; }
.muted { color: #8A97A6; }
footer { margin-top: 64px; color: #5A6472; font-size: 13px; }
footer a { color: #8A97A6; }