/* ── fonts (self-hosted from @fontsource) ───────────────────────────── */
@font-face { font-family: "Pixelify Sans"; src: url(/assets/fonts/pixelify-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url(/assets/fonts/pixelify-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "VT323"; src: url(/assets/fonts/vt323.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url(/assets/fonts/atkinson-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url(/assets/fonts/atkinson-400i.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url(/assets/fonts/atkinson-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

/* ── tokens ─────────────────────────────────────────────────────────── */
:root {
  --font-ui: "Pixelify Sans", "Courier New", monospace;
  --font-mono: "VT323", ui-monospace, monospace;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ink: #1a1a24;
  --ink-soft: #55526a;
  --paper: #efe9dc;
  --paper-2: #e2dac7;
  --paper-3: #fbf8f1;
  --line: #1a1a24;

  --mustard: #f2c14e;
  --tomato: #e2583e;
  --teal: #3aa79b;
  --blue: #4a6fd1;
  --purple: #8a63d2;
  --pink: #f08bb4;
  --amber: #ffb000;
  --night: #1b1930;

  --link: #2f4fb5;
  --select: #4a6fd1;
  --shadow: 4px 4px 0 rgba(10, 8, 24, 0.55);
}

/* ── reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--paper); }
img, video, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px dashed var(--tomato); outline-offset: 2px; }
.px-icon { image-rendering: pixelated; flex: none; }
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.skip { position: absolute; left: -999px; top: 8px; z-index: 9999; background: var(--mustard); color: var(--ink); padding: 6px 10px; font-family: var(--font-ui); }
.skip:focus { left: 8px; }
mark { background: var(--mustard); color: var(--ink); padding: 0 4px; font-family: var(--font-ui); font-size: 0.8em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
img[width][height] { height: auto; }