:root {
  --ink-0: #07060a;
  --ink-1: #0f0d14;
  --ink-2: #17141f;
  --line: rgba(255, 255, 255, 0.12);
  --fg-0: #fff8fb;
  --fg-1: rgba(255, 248, 251, 0.86);
  --fg-2: rgba(255, 248, 251, 0.62);
  --pink: #ffa7f6;
  --pink-hot: #ff6fd8;
  --yellow: #ffe566;
  --cyan: #8ef0ff;
  --r-pill: 999px;
  --f-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --f-body: "Geist", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;
  --nav-h: 72px;
  --title-mask: url("../assets/hero/title-middle.png");
  --title-aspect: 4266 / 2400;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh;
  background: var(--ink-0);
  color: var(--fg-0);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
::selection { background: var(--pink-hot); color: var(--ink-0); }