/* ========== Theme Tokens ========== */ /* Three-way toggle (#themeSelect in index.html): "browser" leaves data-theme unset on and lets the prefers-color-scheme media query below decide; "light"/"dark" set data-theme explicitly and always win over system preference (that's what the :not([data-theme="dark"]) guard is for). Dark is this app's original look, so it's also the plain :root default — covers "browser" mode on a dark system, and any browser too old to evaluate prefers-color-scheme at all. See app.js's applyTheme()/setTheme() for the JS half, and the inline script in index.html's for the pre-paint flash fix. */ :root { --bg: #0f1722; --text: #e6eef6; --muted: #9fb2c8; --text-bright: #cfe6ff; --panel-title: #dbeeff; --button-bg: #1f2937; --button-border: rgba(255, 255, 255, 0.04); --panel-grad-1: rgba(255, 255, 255, 0.02); --panel-grad-2: rgba(255, 255, 255, 0.01); --panel-border: rgba(255, 255, 255, 0.03); --circle-border: rgba(255, 255, 255, 0.18); --key-cap: #e6eef6; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #f4f6f9; --text: #182430; --muted: #5a6b7d; --text-bright: #1f5f96; --panel-title: #14497a; --button-bg: #e3e8ee; --button-border: rgba(0, 0, 0, 0.12); --panel-grad-1: rgba(0, 0, 0, 0.025); --panel-grad-2: rgba(0, 0, 0, 0.01); --panel-border: rgba(0, 0, 0, 0.06); --circle-border: rgba(0, 0, 0, 0.15); --key-cap: #182430; } } :root[data-theme="light"] { --bg: #f4f6f9; --text: #182430; --muted: #5a6b7d; --text-bright: #1f5f96; --panel-title: #14497a; --button-bg: #e3e8ee; --button-border: rgba(0, 0, 0, 0.12); --panel-grad-1: rgba(0, 0, 0, 0.025); --panel-grad-2: rgba(0, 0, 0, 0.01); --panel-border: rgba(0, 0, 0, 0.06); --circle-border: rgba(0, 0, 0, 0.15); --key-cap: #182430; } :root[data-theme="dark"] { --bg: #0f1722; --text: #e6eef6; --muted: #9fb2c8; --text-bright: #cfe6ff; --panel-title: #dbeeff; --button-bg: #1f2937; --button-border: rgba(255, 255, 255, 0.04); --panel-grad-1: rgba(255, 255, 255, 0.02); --panel-grad-2: rgba(255, 255, 255, 0.01); --panel-border: rgba(255, 255, 255, 0.03); --circle-border: rgba(255, 255, 255, 0.18); --key-cap: #e6eef6; } /* ========== Base / Global Styles ========== */ * { box-sizing: border-box; font-family: Segoe UI, Roboto, Arial, sans-serif; } body { margin: 0; padding: 16px; background: var(--bg); color: var(--text); } /* ========== Compatibility Banners ========== */ /* Shared style for the two "this won't work" messages: