Update icon to match 64x64 Homepage squircle badge standard

public/icon.svg

@@ -1,59 +1,41 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="256" height="256">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Spectra">
   <defs>
     <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="#0b0f19" />
-      <stop offset="100%" stop-color="#04060a" />
+      <stop offset="0%" stop-color="#141926"/>
+      <stop offset="100%" stop-color="#0a0d14"/>
     </linearGradient>
     <linearGradient id="prismEdge" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="#6366f1" />
-      <stop offset="50%" stop-color="#06b6d4" />
-      <stop offset="100%" stop-color="#10b981" />
+      <stop offset="0%" stop-color="#818cf8"/>
+      <stop offset="100%" stop-color="#06b6d4"/>
     </linearGradient>
-    <linearGradient id="beam" x1="0%" y1="50%" x2="100%" y2="50%">
-      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.9" />
-      <stop offset="100%" stop-color="#ffffff" stop-opacity="0.3" />
+    <linearGradient id="beam" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.9"/>
+      <stop offset="100%" stop-color="#ffffff" stop-opacity="0.4"/>
     </linearGradient>
-    <linearGradient id="spectrumRed" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" stop-color="#ff3b30" />
-      <stop offset="100%" stop-color="#ff9500" />
-    </linearGradient>
-    <linearGradient id="spectrumYellow" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" stop-color="#ffcc00" />
-      <stop offset="100%" stop-color="#34c759" />
-    </linearGradient>
-    <linearGradient id="spectrumCyan" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" stop-color="#00c7be" />
-      <stop offset="100%" stop-color="#30b0c7" />
-    </linearGradient>
-    <linearGradient id="spectrumIndigo" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" stop-color="#5856d6" />
-      <stop offset="100%" stop-color="#af52de" />
-    </linearGradient>
-    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
-      <feGaussianBlur stdDeviation="6" result="blur" />
-      <feComposite in="SourceGraphic" in2="blur" operator="over" />
-    </filter>
   </defs>
 
-  <!-- Background rounded squircle -->
-  <rect x="12" y="12" width="232" height="232" rx="56" fill="url(#bg)" stroke="#1e293b" stroke-width="3" />
+  <!-- Rounded Studio Badge matching Homepage custom icons -->
+  <rect width="64" height="64" rx="16" fill="url(#bg)"/>
+  <rect x="1" y="1" width="62" height="62" rx="15" fill="none" stroke="#FFFFFF" stroke-opacity="0.1" stroke-width="1"/>
 
-  <!-- Incoming beam -->
-  <path d="M 28 138 L 102 128" stroke="url(#beam)" stroke-width="4" stroke-linecap="round" />
+  <!-- Incoming light beam from left -->
+  <line x1="6" y1="34" x2="25" y2="32" stroke="url(#beam)" stroke-width="2.5" stroke-linecap="round"/>
 
-  <!-- Refractive Triangular Prism (Play button silhouette) -->
-  <polygon points="128,68 184,168 72,168" fill="#131b2e" stroke="url(#prismEdge)" stroke-width="5" stroke-linejoin="round" />
+  <!-- Refractive triangular prism (glass facet) -->
+  <polygon points="32,16 45,44 19,44" fill="#1e293b" stroke="url(#prismEdge)" stroke-width="2" stroke-linejoin="round"/>
 
-  <!-- Play icon core within prism -->
-  <polygon points="120,118 120,144 142,131" fill="#ffffff" opacity="0.9" filter="url(#glow)" />
+  <!-- Glowing Play symbol inside prism -->
+  <polygon points="29,28 29,36 36,32" fill="#ffffff" opacity="0.95"/>
 
-  <!-- Dispersed Spectral Rays (Right side) -->
-  <path d="M 152 118 L 226 84" stroke="url(#spectrumRed)" stroke-width="4" stroke-linecap="round" opacity="0.95" />
-  <path d="M 156 128 L 230 106" stroke="url(#spectrumYellow)" stroke-width="4" stroke-linecap="round" opacity="0.95" />
-  <path d="M 158 138 L 230 128" stroke="#34c759" stroke-width="4" stroke-linecap="round" opacity="0.95" />
-  <path d="M 156 148 L 228 150" stroke="url(#spectrumCyan)" stroke-width="4" stroke-linecap="round" opacity="0.95" />
-  <path d="M 152 158 L 224 172" stroke="url(#spectrumIndigo)" stroke-width="4" stroke-linecap="round" opacity="0.95" />
-
-  <!-- Subtle optical ring -->
-  <circle cx="128" cy="128" r="92" fill="none" stroke="#334155" stroke-width="1.5" stroke-dasharray="4 8" opacity="0.4" />
-</svg>
+  <!-- Dispersed spectral rays exiting right -->
+  <!-- Red ray -->
+  <line x1="38" y1="28" x2="58" y2="18" stroke="#ef4444" stroke-width="2.2" stroke-linecap="round"/>
+  <!-- Amber ray -->
+  <line x1="39" y1="31" x2="58" y2="25" stroke="#f59e0b" stroke-width="2.2" stroke-linecap="round"/>
+  <!-- Emerald ray -->
+  <line x1="40" y1="34" x2="58" y2="32" stroke="#10b981" stroke-width="2.2" stroke-linecap="round"/>
+  <!-- Cyan ray -->
+  <line x1="39" y1="37" x2="58" y2="39" stroke="#06b6d4" stroke-width="2.2" stroke-linecap="round"/>
+  <!-- Violet ray -->
+  <line x1="38" y1="40" x2="58" y2="46" stroke="#8b5cf6" stroke-width="2.2" stroke-linecap="round"/>
+</svg>