:root {
  --lapis: #1B2A6B;
  --lapis-deep: #121D4D;
  --paper: #F5F7FB;
  --surface: #FFFFFF;
  --ink: #0F1730;
  --muted: #5E6787;
  --line: #D9DEEA;
  --signal: #F2A93B;
  --ok: #2E9E6B;
  --danger: #C2413A;
  --focus: #F2A93B;
  --display: "Bricolage Grotesque", "IBM Plex Sans", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0B1024;
    --surface: #121935;
    --ink: #E8ECF7;
    --muted: #96A0C2;
    --line: #26305A;
    --lapis: #1B2A6B;
    --lapis-deep: #0E1640;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

/* the orbit mark: services circling the one who keeps them running */
.orbit { position: relative; width: 132px; height: 132px; }
.orbit .core {
  position: absolute; inset: 50% auto auto 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 6px rgba(242, 169, 59, .18);
}
.orbit .ring { position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; animation: spin 60s linear infinite; }
.orbit .ring.inner { inset: 26px; animation-duration: 38s; animation-direction: reverse; }
.orbit .ring i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: .85; }
.orbit .ring i:nth-child(1) { top: -4px; left: calc(50% - 4px); }
.orbit .ring i:nth-child(2) { bottom: 14%; right: 4%; opacity: .55; }
.orbit .ring i:nth-child(3) { bottom: 14%; left: 4%; opacity: .7; }
.orbit .ring.inner i:nth-child(1) { top: auto; bottom: -4px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .orbit .ring { animation: none; } }

.brand { font: 600 15px/1 var(--mono); letter-spacing: .02em; color: rgba(255, 255, 255, .82); }
.brand b { color: var(--signal); font-weight: 600; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--lapis); color: #fff; font: 600 15px/1 var(--body);
  transition: background .15s ease, transform .15s ease;
}
.btn:hover { background: var(--lapis-deep); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn.ghost:hover { background: var(--surface); }
@media (prefers-color-scheme: dark) { .btn { background: #3046A6; } .btn:hover { background: #3A52BE; } }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.dot.ok { background: var(--ok); }
.dot.warn { background: var(--signal); }