/* IBM Plex Sans (SIL Open Font License, fonts/ibm-plex-sans/OFL.txt), self-hosted. */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans/ibm-plex-sans-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 100 700;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans/ibm-plex-sans-latin-wght-italic.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --paper: #111013;
  --surface: #18171b;
  --card: #1e1d22;
  --panel: #26252b;
  --ink: #f5f3f1;
  --ink-soft: #b6b2b1;
  --ink-faint: #999390;
  --rule: #2d2b30;
  --accent: #ff6a4d;
  --good: #4cc38a;
  --warn: #f5b041;
  --font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --paper: #f3f3f4;
    --surface: #ffffff;
    --card: #ffffff;
    --panel: #e9e9eb;
    --ink: #151417;
    --ink-soft: #4a474f;
    --ink-faint: #6b6870;
    --rule: #dcdbe0;
    --accent: #b8352f;
    --good: #1f7a50;
    --warn: #8a5a00;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.soon {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 16px;
}
.mark { width: 48px; height: 48px; margin-bottom: 8px; }
h1 { margin: 0; font-size: clamp(32px, 6vw, 48px); font-weight: 650; letter-spacing: -0.02em; line-height: 1.05; }
h1 span { color: var(--ink-soft); font-weight: 450; }
p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--ink-soft); }
.status {
  margin-top: 24px;
  font-size: 13px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.status::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--ink-faint);
  vertical-align: 1px;
}
.status.ok::before { background: var(--good); }
.status.bad::before { background: var(--warn); }