/* Scatterhaus brand tokens, shared by the studio site and the instant-game demos */
:root {
  --bg: #09080d;
  --bg-2: #100e17;
  --card: #15121e;
  --card-2: #1c1828;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --text: #f4f1f8;
  --muted: #a59db5;
  --dim: #6f6880;
  --lime: #c8ff2e;
  --lime-ink: #12160a;
  --gold: #ffc443;
  --pink: #ff3d7f;
  --violet: #8b5cff;
  --radius: 18px;
  --display: 'Unbounded', 'Inter', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.55 var(--body); }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
button { font: inherit; }
::selection { background: var(--lime); color: var(--lime-ink); }

.logo { display: inline-flex; align-items: center; gap: 10px; font: 700 19px/1 var(--display); letter-spacing: -.02em; text-decoration: none; }
.logo svg { width: 30px; height: 30px; flex: none; }
.logo b { color: var(--lime); font-weight: 700; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; border-radius: 999px;
  border: 1px solid var(--line-2); background: transparent; color: var(--text); font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease; }
.btn:hover { transform: translateY(-2px); border-color: var(--text); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-lime { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); }
.btn-lime:hover { background: #d8ff66; border-color: #d8ff66; }

.mono { font-family: var(--mono); }