@font-face { font-family: "Instrument Sans"; src: url("InstrumentSans-Variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("InstrumentSans-Italic-Variable.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }

/* Familiar tokens (design/familiar/tokens.css), plus the site's deeper grounds. */
:root {
  --void: #070708;
  --bg: #0e0e0e;
  --bg-raised: #161616;
  --bg-elevated: #1f1f1f;
  --line: #262626;
  --line-strong: #767676;
  --ink: #f2f2f2;
  --ink-secondary: #a3a3a3;
  --ink-tertiary: #8a8a8a;
  --neon: #8b4bfa;
  --neon-ink: #a884ff;
  --neon-soft: #22153d;
  --neon-glow: rgba(139, 75, 250, 0.35);
  --electric: #1e90ff;
  --electric-deep: #0a5cff;
  --electric-ink: #d6f0ff;
  --fox: #1a3cff;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --font: "Instrument Sans", -apple-system, system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--void); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--neon-ink); outline-offset: 2px; border-radius: 6px; }

.appstore {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px 10px 16px;
  border-radius: 14px; background: var(--ink); color: #0b0b0b; text-decoration: none;
  transition: transform 150ms var(--ease), box-shadow 150ms var(--ease);
}
.appstore:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.2); }
.appstore svg { width: 24px; height: 24px; flex: none; }
.appstore span { display: grid; line-height: 1.05; }
.appstore small { font-size: 11px; font-weight: 500; letter-spacing: .01em; }
.appstore b { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}