@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  /* ---- grond -------------------------------------------------------
     Vlakke tinten, geen gradients. Een egaal vlak kost na de keyframe
     bijna geen bitrate; een verloop over 2560px kost 'm elke frame en
     gaat banden op 8 Mbps. */
  --ink-900:#0a0b0d;
  --ink-850:#0e1014;
  --ink-800:#131519;
  --ink-750:#171a1f;
  --ink-700:#1e2228;
  --ink-600:#2a2f37;
  --ink-500:#3a414b;
  --ink-400:#5b6470;
  --ink-300:#818b98;
  --ink-200:#a8b1bc;

  /* Niet puur #fff: puur wit clipt en gaat ringen op de AMF-encoder. */
  --paper    :#eef1f5;
  --paper-dim:#c9d0d8;

  /* ---- accenten ----------------------------------------------------
     jade  = Mistweaver Monk (#00ff98) gedempt zodat hij niet bloedt
     holy  = Priest klassekleur, puur wit, alleen voor lichtaccenten */
  --jade      :#3fd9a4;
  --jade-deep :#1f8d68;
  --jade-ghost:rgba(63,217,164,.13);
  --holy      :#ffffff;
  --gold      :#d8b263;
  --rose      :#d98b8b;

  /* ---- vorm (uit Amused: capsules, pillen, ribbons) ---------------- */
  --r-cap :30px;
  --r-pill:999px;
  --pad   :32px;
  --gap   :20px;

  --f-display:'Outfit','Segoe UI',system-ui,-apple-system,sans-serif;
  --f-mono   :'JetBrains Mono','Cascadia Mono',Consolas,monospace;

  /* ---- motion ------------------------------------------------------
     Kort en lokaal. Doorlopende animatie over de volle breedte trekt
     bitrate weg bij je gameplay, dus die zit er nergens in. */
  --t-fast:160ms;
  --t-med :300ms;
  --t-slow:420ms;
  --ease  :cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:var(--f-display);
  color:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.u    {text-transform:uppercase;letter-spacing:.14em}