:root {
  color-scheme: dark;
  --bg0: #070708;
  --bg1: #121316;
  --metal: #1c1e24;
  --metal-hi: #2a2d36;
  --ink: #f2f0ea;
  --dim: #8b909c;
  --brass: #d4a84b;
  --brass-dim: #8a6a2c;
  --bang: #b41218;
  --bang-deep: #6e0a0e;
  --safe: #c9c3b4;
  --font: "IBM Plex Sans", "Helvetica Neue", sans-serif;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(120% 80% at 50% -10%, #1a1c22 0%, transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
  color: var(--ink);
  font-family: var(--font);
}

body {
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

button,
input {
  font: inherit;
  color: inherit;
}

button {
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}