:root {
  color-scheme: light dark;
  --ink: #1b1f23;
  --muted: #5b6570;
  --rule: #d8dee4;
  --bg: #ffffff;
  /* Status colours are read as text, so each must clear 4.5:1 on its own
     background. These do on #ffffff; the dark block restates them for #14171a,
     where the light values fall to roughly 3:1. */
  --fail: #b3261e;
  --warn: #8a5a00;
  --pass: #17603a;
  --skip: #5b6570;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e7ebef;
    --muted: #9aa5b1;
    --rule: #333b44;
    --bg: #14171a;
    --fail: #ff9a90;
    --warn: #f0b34a;
    --pass: #6fdba0;
    --skip: #9aa5b1;
  }
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font:
    16px / 1.55 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
}
main {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 16px 64px;
}
h1 {
  font-size: 1.6rem;
  line-height: 1.25;
  margin: 0 0 12px;
}
h2 {
  font-size: 1.15rem;
  margin: 32px 0 8px;
}
p {
  margin: 0 0 12px;
}
.lead {
  font-size: 1.05rem;
}
.meta,
footer {
  color: var(--muted);
  font-size: 0.875rem;
}
code {
  font:
    0.875em ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  word-break: break-all;
}
a {
  color: inherit;
}
form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 20px 0;
}
label {
  font-size: 0.875rem;
  color: var(--muted);
}
input {
  font: inherit;
  padding: 10px 12px;
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
}
button {
  font: 600 1rem / 1 inherit;
  padding: 12px 18px;
  margin-top: 8px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--ink);
  color: var(--bg);
  cursor: pointer;
  align-self: flex-start;
}
.checks {
  list-style: none;
  margin: 0;
  padding: 0;
}
.checks li {
  padding: 10px 12px;
  margin: 0 0 8px;
  background: transparent;
}
.checks li.fail {
  border-left: 4px solid var(--fail);
}
.checks li.warn {
  border-left: 4px solid var(--warn);
}
.checks li.pass {
  border-left: 4px solid var(--pass);
}
.checks li.skip {
  border-left: 4px solid var(--skip);
}
.badge {
  font:
    600 11px ui-monospace,
    monospace;
  letter-spacing: 0.06em;
}
.badge.fail {
  color: var(--fail);
}
.badge.warn {
  color: var(--warn);
}
.badge.pass {
  color: var(--pass);
}
.badge.skip {
  color: var(--skip);
}
.fix {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}
footer {
  border-top: 1px solid var(--rule);
  margin-top: 40px;
  padding-top: 16px;
}
@media print {
  button,
  footer a {
    display: none;
  }
  body {
    color: #000;
    background: #fff;
  }
}