:root {
  --bg: #000;
  --fg: #fff;
  --dim: #8a8a8a;
  --line: #1f1f1f;
  --line-2: #333;
  --display: "Archivo Black", Impact, sans-serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--fg);
  font: 400 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--fg); color: var(--bg); }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; }

.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; }
.dim { color: var(--dim); }
.caps { text-transform: uppercase; }

canvas.smear { display: block; width: 100%; height: 100%; }

/* full-screen transition overlay */
.fx-overlay { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 999; pointer-events: none; }

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