more cosmetic improvements

styles.css

@@ -10,6 +10,7 @@
   --bg-card: #0f3460;
   --accent: #e94560;
   --accent-hover: #ff6b81;
+  --accent-secondary: #ff9a56;
   --text: #eaeaea;
   --text-dim: #a0a0b0;
   --correct: #2ecc71;
@@ -19,6 +20,21 @@
   --safe-bottom: env(safe-area-inset-bottom);
 }
 
+@media (prefers-color-scheme: light) {
+  :root {
+    --bg: #f5f5f5;
+    --bg-light: #ffffff;
+    --bg-card: #ffffff;
+    --accent: #e94560;
+    --accent-hover: #d63851;
+    --accent-secondary: #f09040;
+    --text: #1a1a2e;
+    --text-dim: #555566;
+    --correct: #27ae60;
+    --incorrect: #c0392b;
+  }
+}
+
 @font-face {
   font-family: 'Ponomar';
   src: url('Ponomar-Regular.woff') format('woff');
@@ -72,7 +88,7 @@ body {
 .logo {
   font-size: 3.5rem;
   font-weight: 800;
-  background: linear-gradient(135deg, var(--accent), #ff9a56);
+  background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -626,6 +642,12 @@ body {
   pointer-events: none;
 }
 
+.answer-confetti-burst {
+  position: fixed;
+  pointer-events: none;
+  z-index: 1000;
+}
+
 .confetti-particle {
   position: absolute;
   font-size: 1.4rem;