@font-face {
  font-family: Manrope;

  src:
    url("/assets/Manrope-2f9a44d22ae8.woff2") format("woff2"),
    url("/assets/Manrope-variable.ttf") format("truetype");

  font-weight: 200 800;

  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";

  src:
    url("/assets/SpaceGrotesk-84c7d8a8cdce.woff2") format("woff2"),
    url("/assets/SpaceGrotesk-variable.ttf") format("truetype");

  font-weight: 300 700;

  font-display: swap;
}

:root {
  --bg: #08192b;
  --surface: #10253a;
  --text: #f4f7fa;
  --muted: #a6b5c5;
  --line: #2b4054;
  --green: #10b981;
  /* Emerald is the one interactive color: focus, selected, pressed, checked
     and current states, hover accents, links and outlined actions
     (docs/brand.md). Mint stays for status, confirmation, charts and
     decoration. */
  --interactive: var(--green);
  --mint: #a7f3d0;
  --warn: #f5d38a;
  --bad: #f4a4ae;
  --validation-color: var(--bad);
  /* Named sizes (docs/brand.md, Type and Corners). Shared controls use these;
     screens move over as they are next changed. */
  --text-caption: 12px;
  --text-secondary: 14px;
  --text-body: 16px;
  --text-small-heading: 18px;
  --text-section-heading: 24px;
  --corner-choice: 8px;
  --corner-button: 10px;
  --corner-card: 12px;
}

[hidden] {
  display: none !important;
}