/* Theme packs — each theme overrides CSS variables and may apply a backdrop. Apply by adding ko-theme- class to . */ body.ko-theme-bright { --ko-bg: #f7fbff; --ko-primary: #28a745; --ko-primary-dark: #218838; --ko-accent: #ffb703; } body.ko-theme-bright::before { content: ""; position: fixed; inset: -10%; pointer-events: none; z-index: -1; background: radial-gradient(24% 24% at 12% 18%, rgba(255, 221, 150, 0.45), transparent 70%), radial-gradient(22% 22% at 86% 14%, rgba(173, 216, 230, 0.45), transparent 70%), radial-gradient(22% 22% at 20% 82%, rgba(186, 255, 201, 0.45), transparent 70%), radial-gradient(20% 20% at 78% 80%, rgba(255, 179, 186, 0.45), transparent 70%); } body.ko-theme-ocean { --ko-bg: #e0f4ff; --ko-primary: #0288d1; --ko-primary-dark: #0277bd; --ko-accent: #ffd54f; --ko-correct: #006064; --ko-correct-bg: #b2ebf2; } body.ko-theme-ocean::before { content: ""; position: fixed; inset: -10%; pointer-events: none; z-index: -1; background: radial-gradient(28% 28% at 20% 22%, rgba(129, 212, 250, 0.55), transparent 70%), radial-gradient(28% 28% at 80% 20%, rgba(178, 235, 242, 0.55), transparent 70%), radial-gradient(35% 35% at 50% 90%, rgba(2, 136, 209, 0.18), transparent 70%); } body.ko-theme-forest { --ko-bg: #effaef; --ko-primary: #2e7d32; --ko-primary-dark: #1b5e20; --ko-accent: #ffb300; --ko-correct: #1b5e20; --ko-correct-bg: #c8e6c9; } body.ko-theme-forest::before { content: ""; position: fixed; inset: -10%; pointer-events: none; z-index: -1; background: radial-gradient(28% 28% at 14% 20%, rgba(165, 214, 167, 0.6), transparent 70%), radial-gradient(26% 26% at 86% 18%, rgba(220, 237, 200, 0.7), transparent 70%), radial-gradient(34% 34% at 50% 92%, rgba(46, 125, 50, 0.16), transparent 70%); } body.ko-theme-space { --ko-bg: #0b1020; --ko-card: #15203a; --ko-text: #f5f7ff; --ko-muted: #b6bedb; --ko-primary: #7c4dff; --ko-primary-dark: #5e35b1; --ko-accent: #ffd54f; --ko-border: rgba(255,255,255,0.12); --ko-correct: #69f0ae; --ko-correct-bg: rgba(105, 240, 174, 0.15); --ko-wrong: #ff8a80; --ko-wrong-bg: rgba(255, 138, 128, 0.15); } body.ko-theme-space::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(2px 2px at 12% 22%, #fff, transparent 60%), radial-gradient(1px 1px at 28% 70%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 60% 30%, #fff, transparent 60%), radial-gradient(2px 2px at 80% 60%, #fff, transparent 60%), radial-gradient(1px 1px at 50% 85%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 92% 12%, #fff, transparent 60%); opacity: 0.7; } body.ko-theme-space .ko-topbar { background: rgba(21, 32, 58, 0.85); } body.ko-theme-space .ko-topbar a.ko-back { color: #f5f7ff; } body.ko-theme-space .ko-choice { background: #1c2747; color: #f5f7ff; } body.ko-theme-candy { --ko-bg: #fff0f6; --ko-primary: #d81b60; --ko-primary-dark: #ad1457; --ko-accent: #ffeb3b; --ko-correct: #ad1457; --ko-correct-bg: #fce4ec; } body.ko-theme-candy::before { content: ""; position: fixed; inset: -10%; pointer-events: none; z-index: -1; background: radial-gradient(26% 26% at 12% 18%, rgba(244, 143, 177, 0.55), transparent 70%), radial-gradient(26% 26% at 86% 14%, rgba(248, 187, 208, 0.55), transparent 70%), radial-gradient(32% 32% at 50% 88%, rgba(255, 235, 59, 0.25), transparent 70%); } body.ko-theme-sunny { --ko-bg: #fff8e1; --ko-primary: #f57c00; --ko-primary-dark: #e65100; --ko-accent: #fbc02d; --ko-correct: #ef6c00; --ko-correct-bg: #fff3e0; } body.ko-theme-sunny::before { content: ""; position: fixed; inset: -10%; pointer-events: none; z-index: -1; background: radial-gradient(28% 28% at 18% 22%, rgba(255, 213, 79, 0.55), transparent 70%), radial-gradient(26% 26% at 84% 18%, rgba(255, 224, 130, 0.55), transparent 70%), radial-gradient(32% 32% at 50% 92%, rgba(245, 124, 0, 0.18), transparent 70%); }