@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600;700&display=swap'); :root { --bg-color: #121212; --panel-bg: #1a1a1a; --block-color: #242424; --text-color: #ffffff; --accent-color: rgba(46, 204, 113, 0.4); --grid-size: 100px; --grid-gap: 10px; --radius: 12px; --border-color: #333; --border-subtle: #2a2a2a; --bg-mid: #1f1f1f; --bg-elevated: #222; --bg-input: #1a1a1a; --text-secondary: #ccc; --text-muted: #888; --text-dim: #555; --shadow-md: rgba(0,0,0,0.5); --shadow-lg: rgba(0,0,0,0.8); /* Chart Colors */ --c-draw: #6b7280; /* Semantic result colours */ --c-win: #2ecc71; --c-loss: #e74c3c; --c-draw: #888888; /* Transition speeds */ --transition-fast: 0.15s ease; --transition-base: 0.2s ease; --transition-slow: 0.35s ease; /* Type scale tokens */ --t-micro: 0.5rem; --t-label: 0.6rem; --t-data: 0.7rem; --t-body: 0.7rem; --t-title: 1rem; --t-heading: 1.25rem; --t-hero: 1.75rem; } [data-theme="light"] { --bg-color: #f0f0f2; --panel-bg: #ffffff; --block-color: #e8e8ec; --text-color: #111111; --accent-color: rgba(46, 204, 113, 0.35); --border-color: #d0d0d8; --border-subtle: #e0e0e8; --bg-mid: #f8f8fa; --bg-elevated: #eeeeef; --bg-input: #f5f5f7; --text-secondary: #444; --text-muted: #71717a; --text-dim: #a1a1aa; --shadow-md: rgba(0,0,0,0.12); --shadow-lg: rgba(0,0,0,0.18); } html { background-color: var(--bg-color); background-image: linear-gradient(to right, #1f1f1f 1px, transparent 1px), linear-gradient(to bottom, #1f1f1f 1px, transparent 1px); background-size: calc(var(--grid-size) + var(--grid-gap)) calc(var(--grid-size) + var(--grid-gap)); background-position: 51px 61px; } body { margin: 0; padding: 0; min-width: 100vw; min-height: 100vh; color: var(--text-color); font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } /* Loading overlay (index.html) — covers the whole real page while js/catalyst-data.js's own real ~70MB downloads and executes, per direct instruction once this is about to be hosted publicly rather than run locally. Hardcoded #121212 (not var(--bg-color)) deliberately — this has to render correctly the instant the very first bytes of HTML/CSS arrive, before the theme-detection