@font-face { font-family: "Archivo"; src: url("/fonts/archivo-400.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/fonts/archivo-600.ttf") format("truetype"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/fonts/archivo-700.ttf") format("truetype"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/fonts/barlow-condensed-600.ttf") format("truetype"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/fonts/barlow-condensed-800.ttf") format("truetype"); font-style: normal; font-weight: 800; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/fonts/barlow-condensed-900.ttf") format("truetype"); font-style: normal; font-weight: 900; font-display: swap; }

:root {
  --void: #05070a;
  --black: #090c11;
  --steel: #161b22;
  --steel-line: #343b45;
  --paper: #ebe8de;
  --white: #f6f7f4;
  --muted: #969da6;
  --blue: #2b64ff;
  --blue-hot: #5a84ff;
  --amber: #ff5a1f;
  --green: #51e49a;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Archivo", Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; height: 100%; background: var(--void); color-scheme: dark; }
body { margin: 0; min-width: 320px; height: 100%; background: var(--void); color: var(--white); font-family: var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }

.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 10px 14px; transform: translateY(-160%); background: var(--paper); color: var(--black); font-size: 12px; font-weight: 700; }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--white); font: 800 22px/1 var(--display); letter-spacing: .13em; text-decoration: none; }
.wordmark > span { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(255,255,255,.4); color: var(--blue-hot); font: 900 18px/1 var(--display); letter-spacing: 0; }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  video { display: none !important; }
}