:root {
  color-scheme: light dark;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100vh;
  font:
    14px/1.55 system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  background: #f4f4f5;
  color: #52525b;
}
.page {
  padding: 28px 24px 120px;
  max-width: 720px;
}
h1 {
  font-size: 19px;
  margin: 0 0 4px;
  color: #27272a;
}
.muted {
  /* 5.42:1 on the page's #f4f4f5, lighter than body text so it still reads as secondary.
     #a1a1aa measured 2.33:1 and failed WCAG 1.4.3 in the admin's axe scan (RAU-321). */
  color: #63636b;
  font-size: 12px;
  margin: 0 0 20px;
}
.line {
  height: 11px;
  border-radius: 6px;
  background: #e4e4e7;
  margin: 10px 0;
}
.line.medium {
  width: 72%;
}
.line.short {
  width: 45%;
}
#status {
  position: fixed;
  inset: auto auto 10px 10px;
  font:
    11px ui-monospace,
    SFMono-Regular,
    monospace;
  color: #71717a;
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 6px;
  padding: 5px 9px;
  max-width: calc(100% - 20px);
}
#status[data-state="failed"] {
  color: #b91c1c;
  border-color: #fca5a5;
}
@media (prefers-reduced-motion: no-preference) {
  .line {
    transition: none;
  }
}
@media (prefers-color-scheme: dark) {
  body {
    background: #18181b;
    color: #d4d4d8;
  }
  .line {
    background: #27272a;
  }
  h1 {
    color: #fafafa;
  }
  #status {
    background: #27272a;
    border-color: #3f3f46;
    color: #a1a1aa;
  }
  #status[data-state="failed"] {
    color: #fca5a5;
    border-color: #7f1d1d;
  }
}