/* Oxygen Playground: shared tokens and reset. Values from Figma Xqf7WyLFax4Rpv9t8FHHBI. */
:root {
  --bg-page: #0a090c;
  --bg-side: #0c0b0f;
  --bg-field: #0d0c11;
  --line: #29262f;
  --line-2: #2d2a36;
  --line-3: #322e3b;
  --violet-700: #6d28d9;
  --violet-600: #7c3aed;
  --violet-500: #8b5cf6;
  --violet-400: #a78bfa;
  --violet-300: #c4b5fd;
  --ink-50: #f4f2ec;
  --ink-100: #edebe7;
  --ink-150: #e9e6e1;
  --ink-200: #c3bdce;
  --ink-400: #918b9e;
  --ink-450: #877f94;
  --ink-500: #615c6e;
  --green: #8fa97e;
  --red: #e0786d;

  --font-head: "Schibsted Grotesk", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--ink-150);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 0; }
a { color: inherit; }
input, textarea { font: inherit; color: inherit; border-radius: 0; }
:focus { outline: none; }
/* Rings only while someone moves with the Tab key (.kbd is set by build.js and try.js). */
.kbd :focus-visible { outline: 2px solid var(--violet-400); outline-offset: 2px; }
[hidden] { display: none !important; }

.mono { font-family: var(--font-mono); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Small mono label used everywhere (11px, 8% tracking). */
.label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.88px;
  line-height: 15px;
  text-transform: uppercase;
}

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