@font-face { font-family: "Anton"; src: url("../assets/fonts/Anton-Regular.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "Inter"; src: url("../assets/fonts/Inter-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; } @font-face { font-family: "Inter"; src: url("../assets/fonts/Inter-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; } :root { --bg: #0f0f0f; /* direct instruction, 2026-09-14 - was #0a0a0a */ --panel: #161616; --panel-edge: #2a2a2a; --accent: #6ee7b7; --accent-dim: #2f6b53; --good: #6ee7b7; --bad: #ff4d5e; --text: #f4f4f4; --text-soft: #cfcfcf; --text-dim: #999999; color-scheme: dark; } * { box-sizing: border-box; } [hidden] { display: none !important; } /* Hides the ENTIRE page instantly when arriving via a hub card's own ?autostart=1 link, so nothing flashes before quiz.js's async init() gets a chance to decide what to show itself (that has to wait on a data fetch first). visibility (not display) so .wrap keeps its normal layout box - no reflow/scroll jump when it reappears. The .autostarting class is set synchronously by a tiny inline