Add more categories

src/styles.css

@@ -373,8 +373,8 @@ audio.hidden-audio {
 }
 
 .custom-player {
-  width: min(420px, 100%);
-  min-height: 200px;
+  width: min(840px, 100%);
+  min-height: 400px;
   border-radius: 20px;
   border: 1px solid rgba(255, 255, 255, 0.12);
   background: radial-gradient(circle at top, rgba(61, 214, 255, 0.2), rgba(8, 12, 26, 0.9) 70%);
@@ -445,36 +445,18 @@ audio.hidden-audio {
 
 .pulse-rays {
   position: absolute;
-  inset: -20%;
+  inset: -10%;
   border-radius: 50%;
   background:
-    radial-gradient(circle at 30% 20%, hsla(var(--ray-hue, 200), 90%, 70%, 0.35), transparent 55%),
-    radial-gradient(circle at 75% 35%, hsla(var(--ray-hue, 200), 90%, 70%, 0.28), transparent 60%),
-    radial-gradient(circle at 40% 80%, hsla(var(--ray-hue, 200), 90%, 70%, 0.25), transparent 58%),
-    radial-gradient(circle at 70% 70%, hsla(var(--ray-hue, 200), 90%, 70%, 0.22), transparent 62%),
-    radial-gradient(circle at 50% 50%, hsla(var(--ray-hue, 200), 90%, 70%, 0.18), transparent 65%);
-  opacity: calc(0.08 + var(--ray, 0) * 0.75);
-  filter: blur(calc(8px - var(--ray, 0) * 2px));
-  transform: scale(calc(0.9 + var(--ray, 0) * 0.5));
-  transition: opacity 0.14s ease-out, transform 0.14s ease-out, filter 0.14s ease-out;
-  mask-image: radial-gradient(
-    circle,
-    rgba(0, 0, 0, 0) 0%,
-    rgba(0, 0, 0, 0.5) calc(25% + var(--ray, 0) * 10%),
-    rgba(0, 0, 0, 1) calc(55% + var(--ray, 0) * 20%),
-    rgba(0, 0, 0, 0) 100%
-  );
-  -webkit-mask-image: radial-gradient(
-    circle,
-    rgba(0, 0, 0, 0) 0%,
-    rgba(0, 0, 0, 0.5) calc(25% + var(--ray, 0) * 10%),
-    rgba(0, 0, 0, 1) calc(55% + var(--ray, 0) * 20%),
-    rgba(0, 0, 0, 0) 100%
-  );
-  mask-size: 100% 100%;
-  mask-repeat: no-repeat;
-  -webkit-mask-size: 100% 100%;
-  -webkit-mask-repeat: no-repeat;
+    radial-gradient(circle at 50% 50%, hsla(var(--ray-hue, 200), 95%, 72%, 0.45) 0%, transparent 45%),
+    radial-gradient(circle at 50% 50%, hsla(var(--ray-hue, 200), 90%, 68%, 0.35) 0%, transparent 60%),
+    radial-gradient(circle at 50% 50%, hsla(var(--ray-hue, 200), 85%, 65%, 0.25) 0%, transparent 72%),
+    radial-gradient(circle at 50% 50%, hsla(var(--ray-hue, 200), 80%, 60%, 0.2) 0%, transparent 85%);
+  opacity: calc(0.15 + var(--ray, 0) * 0.7);
+  filter: blur(calc(10px - var(--ray, 0) * 3px));
+  transform: scale(calc(0.95 + var(--ray, 0) * 0.7));
+  transition: opacity 0.12s ease-out, transform 0.12s ease-out, filter 0.12s ease-out;
+  mix-blend-mode: screen;
   z-index: 1;
 }