/* Relit design tokens: the one place every color, shadow, radius and font is set.
   Copied from Lorica (12-lorica/public/tokens.css).
   Dark is the default look; light is the alternative (data-theme="light").
   Black, white and greys only; teal means done or good, rose means a warning or an error. No other color. */
:root,:root[data-theme="dark"]{
  --bg:#000000;--bg2:#2f2f2f;--surface:#212121;--raised:#2f2f2f;--line:rgba(255,255,255,.12);--line2:rgba(255,255,255,.2);--track:rgba(255,255,255,.2);
  --text:#ffffff;--muted:#b4b4b4;--faint:#8f8f8f;
  --accent:#ffffff;--accentHi:#e8e8e8;--accentInk:#0d0d0d;--accentSoft:#2f2f2f;
  --rose:#ff5c8a;--roseSoft:#3a1220;--teal:#3ecf9e;--tealSoft:#0e2a21;
  --field:#2f2f2f;--knob:#ffffff;--knobSh:0 1px 3px rgba(0,0,0,.25);
  --scrim:rgba(0,0,0,.6);--sh1:0 4px 16px rgba(0,0,0,.3);--sh2:0 4px 24px rgba(0,0,0,.5);--focus:0 0 0 4px rgba(255,255,255,.09);
  --mediaBg:#171717;--onMedia:#ffffff;--sheetScrim:rgba(0,0,0,.6);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#ffffff;--bg2:#f3f3f3;--surface:#ffffff;--raised:#ffffff;--line:rgba(0,0,0,.1);--line2:rgba(0,0,0,.2);--track:rgba(0,0,0,.2);
  --text:#0d0d0d;--muted:#5d5d5d;--faint:#8f8f8f;
  --accent:#0d0d0d;--accentHi:#2f2f2f;--accentInk:#ffffff;--accentSoft:#f3f3f3;
  --rose:#e0245e;--roseSoft:#fdebf0;--teal:#10a37f;--tealSoft:#e6f6f1;
  --field:#ffffff;--knob:#ffffff;--knobSh:0 1px 3px rgba(0,0,0,.25);
  --scrim:rgba(0,0,0,.32);--sh1:0 4px 16px rgba(0,0,0,.05);--sh2:0 4px 24px rgba(0,0,0,.1);--focus:0 0 0 4px rgba(0,0,0,.06);
  --mediaBg:#171717;--onMedia:#ffffff;--sheetScrim:rgba(0,0,0,.32);
  color-scheme:light;
}
:root{
  --sans:-apple-system-body,ui-sans-serif,-apple-system,system-ui,"Segoe UI",Helvetica,"Apple Color Emoji",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s7:32px;--s8:40px;
  --rk:6px;--r1:10px;--r2:16px;--r3:24px;--rp:999px;--ri:12px;
  --e-out:cubic-bezier(.2,.8,.2,1);--e-in:cubic-bezier(.5,0,.75,0);--e-spring:cubic-bezier(.3,1.45,.5,1);   /* arriving, leaving, a small settle */
  --d1:120ms;--d2:220ms;--d3:320ms;--d4:480ms;   /* press and color, small moves, things arriving, page moments */
  interpolate-size:allow-keywords;   /* lets <details> open to its natural height smoothly */
  --hdrCtl:40px;
  /* Header and footer: full-width backgrounds, content in a centred column with side padding per breakpoint */
  --bar-max:1280px;--gutter:16px;
  --bar-pad:max(var(--gutter),calc((100% - var(--bar-max)) / 2 + var(--gutter)));   /* use as padding-inline on a full-width bar */
  --stage:#000000;--onStage:#ffffff;--qrBg:#ffffff;   /* behind a game (the same in both themes), and behind a QR code */
  --rmark:22.5%;--round:50%;--rhair:1px;   /* the R mark, circles, a hairline bar */
  --stagger:30ms;--stagger-grid:40ms;--stagger-menu:15ms;   /* delay between items arriving one after another */
  --loop-spin:.7s;--loop-sweep:1.1s;--loop-shimmer:1.4s;--loop-calm:2s;   /* repeating loaders; calm is the reduced-motion pace */
}
@media (min-width:768px){:root{--gutter:24px}}
@media (min-width:1024px){:root{--gutter:32px}}