/* The design system: the tokens and base styles of Explore, the Demo map and Duet. */

:root {
  --page: #000;
  --line: rgba(255, 255, 255, 0.1);
  --text: #fff;
  --muted: #b3b3b3;
  --faint: #7a7a7a;
  --a: #5cc8ff;          /* first person */
  --b: #ff6fb5;          /* second person */
  --a-soft: rgba(92, 200, 255, 0.16);
  --b-soft: rgba(255, 111, 181, 0.16);
  --play: #1ed760;
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: hidden makes a scroll box, and a sticky panel stops sticking. */
  overflow-x: clip;
}

a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}