@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; } /* Same design system as quizebra.com/geography (geoquiz/css/style.css, kept byte-for-byte identical below) - only --accent/--accent-dim and the rgba() tints derived from them differ, swapped to this project's own blue (#7ec6ff) in place of geography's mint (#6ee7b7). Never hand-adapt this file again without also re-diffing against geography's - see chat, 2026-09-10: an earlier hand-ported version silently drifted (missing the narrow start-panel card width, the game-mode header shrink, the hub's 375-511px responsive tier, and more), which is exactly what byte-for-byte copying + a mechanical color swap avoids. */ :root { --bg: #0f0f0f; /* direct instruction, 2026-09-14 - was #0a0a0a */ --panel: #161616; --panel-edge: #2a2a2a; --accent: #7ec6ff; --accent-dim: #395973; --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