/* =========================================================
   Base — reset, document defaults, typography, small utilities.
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; color: var(--ink); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.swarm h2, .vm__card--dark h3 { color: inherit; }
p { margin: 0; }

.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.hl { color: var(--accent); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* only shown when the page is opened straight from disk (see the end of index.html) */
.dev-note {
  position: fixed; left: 50%; bottom: 16px; z-index: 100; translate: -50% 0;
  padding: 10px 16px; border-radius: 12px;
  background: var(--ink); color: var(--accent-light);
  font: 500 13px var(--mono);
}
.dev-note code { color: #fff; }

/* Stagger order for entrance animations: d-N = reveal delay step, i-N = position in a sequence.
   (Classes rather than inline style="--d:N" — the Content Security Policy forbids inline styles.) */
.d-0 { --d: 0; } .d-1 { --d: 1; } .d-2 { --d: 2; } .d-3 { --d: 3; } .d-4 { --d: 4; } .d-5 { --d: 5; }
.i-0 { --i: 0; } .i-1 { --i: 1; } .i-2 { --i: 2; } .i-3 { --i: 3; } .i-4 { --i: 4; }
.i-5 { --i: 5; } .i-6 { --i: 6; } .i-7 { --i: 7; } .i-8 { --i: 8; } .i-9 { --i: 9; }