Better handling of color

src/styles.css

@@ -396,8 +396,9 @@ audio.hidden-audio {
 }
 
 .pulse-orb.playing {
-  background: #7df9ff;
-  animation: hueShift 10s linear infinite;
+  color: #7df9ff;
+  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.35), currentColor 65%);
+  animation: planetShift 4s linear infinite;
 }
 
 .pulse-orb.answer {
@@ -445,11 +446,7 @@ audio.hidden-audio {
   transition: height 0.08s ease-out, opacity 0.08s ease-out, transform 0.08s ease-out, filter 0.08s ease-out;
   mix-blend-mode: screen;
   color: #7df9ff;
-}
-
-.pulse-orb.playing,
-.pulse-tentacles .tentacle {
-  animation: hueShift 10s linear infinite;
+  animation: planetShift 4s linear infinite;
 }
 
 
@@ -463,18 +460,21 @@ audio.hidden-audio {
   }
 }
 
-@keyframes hueShift {
+@keyframes planetShift {
   0% {
-    filter: hue-rotate(0deg);
+    color: #2ea8ff;
   }
-  33% {
-    filter: hue-rotate(120deg);
+  25% {
+    color: #fbd72b;
   }
-  66% {
-    filter: hue-rotate(240deg);
+  50% {
+    color: #ff4b4b;
+  }
+  75% {
+    color: #8a5bff;
   }
   100% {
-    filter: hue-rotate(360deg);
+    color: #2ea8ff;
   }
 }