diff --git a/public/streak-animation.html b/public/streak-animation.html
index 8bc5235..0202938 100644
--- a/public/streak-animation.html
+++ b/public/streak-animation.html
@@ -6,7 +6,7 @@
 <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
 <style>
   :root{
-    --navy-900:#081226; --navy-800:#0c1c39; --navy-700:#13294d;
+    --navy-900:#000000; --navy-800:#000000; --navy-700:#000000;
     --gold-200:#fdeeb8; --gold-300:#f6dd93; --gold-400:#e8c463; --gold-500:#d4af37;
     --gold-600:#b1892a; --gold-700:#7d5f18;
     --ink:#e9eefb; --badge:240px; --grow:1.18; --halo-w:170%;
@@ -16,12 +16,12 @@
   html,body{height:100%}
   body{
     margin:0; font-family:var(--font); color:var(--ink);
-    background:radial-gradient(120% 90% at 50% -10%, #16305c 0%, var(--navy-800) 42%, var(--navy-900) 100%);
+    background:radial-gradient(120% 90% at 50% -10%, #000000 0%, var(--navy-800) 42%, var(--navy-900) 100%);
     display:flex; align-items:center; justify-content:center; overflow:hidden;
     -webkit-font-smoothing:antialiased; transition:background .6s ease;
   }
   /* sad sky */
-  body.sad{background:radial-gradient(120% 90% at 50% -10%, #22303f 0%, #131c26 46%, #0a1017 100%)}
+  body.sad{background:radial-gradient(120% 90% at 50% -10%, #000000 0%, #000000 46%, #000000 100%)}
   body::after{
     content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
     background:radial-gradient(70% 60% at 50% 44%, transparent 55%, rgba(0,0,0,.45) 100%);
@@ -56,7 +56,7 @@
   }
   .stage.play.happy .halo{animation:bloom 850ms cubic-bezier(.2,.8,.3,1) 1850ms forwards, pulse 2.8s ease-in-out 2700ms infinite}
   .stage.sad .halo{
-    background:radial-gradient(circle, rgba(130,160,200,.30) 0%, rgba(96,124,164,.14) 42%, transparent 70%);
+    background:radial-gradient(circle, rgba(100,100,100,.30) 0%, rgba(80,80,80,.14) 42%, transparent 70%);
   }
   .stage.play.sad .halo{animation:bloomcold 1000ms ease-out 1900ms forwards}
 
@@ -227,7 +227,7 @@
 
   const SPARK=['#f6dd93','#e8c463','#d4af37','#fff4cf','#ffffff','#8fb4ff'];
   const CONF =['#f6dd93','#e8c463','#d4af37','#ffffff','#ffd34d'];
-  let parts=[], running=false, mode='fireworks', rafFW=null, fwTimers=[], fadeCol='rgba(8,18,38,0.22)';
+  let parts=[], running=false, mode='fireworks', rafFW=null, fwTimers=[], fadeCol='rgba(0,0,0,0.22)';
 
   function burst(xr,yr,count){
     const x=xr*W, y=yr*H, n=count|0;
@@ -318,7 +318,7 @@
   function stopFw(){ fwTimers.forEach(clearTimeout); fwTimers=[]; running=false; parts=[]; if(W&&H) ctx.clearRect(0,0,W,H); }
 
   function celebrate(t){                    // t: 0..1 intensity
-    stopFw(); parts=[]; mode='fireworks'; fadeCol='rgba(8,18,38,0.22)'; running=true;
+    stopFw(); parts=[]; mode='fireworks'; fadeCol='rgba(0,0,0,0.22)'; running=true;
     if(!rafFW) rafFW=requestAnimationFrame(tick);
     const rounds=Math.round(5+t*10);        // 5..15
     const gap=Math.round(345-t*155);        // 345..190 ms
diff --git a/scratch/port_streak_clean.py b/scratch/port_streak_clean.py
index 174d1d4..e1c2ce8 100644
--- a/scratch/port_streak_clean.py
+++ b/scratch/port_streak_clean.py
@@ -61,6 +61,23 @@ def port_html():
     html = html.replace("Math.max(target,5)/5", "Math.max(target,3)/3")
     html = html.replace("(4 - target) / 3", "(3 - target) / 3")
     
+    # Replace blue canvas trailing colors
+    html = html.replace("'rgba(8,18,38,0.22)'", "'rgba(0,0,0,0.22)'")
+    html = html.replace("'rgba(10,16,23,0.3)'", "'rgba(0,0,0,0.3)'")
+    html = html.replace("rgba(8,18,38,0.22)", "rgba(0,0,0,0.22)")
+    html = html.replace("rgba(10,16,23,0.3)", "rgba(0,0,0,0.3)")
+    
+    # Replace blue root CSS variables
+    html = html.replace("#081226", "#000000")
+    html = html.replace("#0c1c39", "#000000")
+    html = html.replace("#13294d", "#000000")
+    html = html.replace("#16305c", "#000000")
+    html = html.replace("#22303f", "#000000")
+    html = html.replace("#131c26", "#000000")
+    html = html.replace("#0a1017", "#000000")
+    html = html.replace("rgba(130,160,200,.30)", "rgba(100,100,100,.30)")
+    html = html.replace("rgba(96,124,164,.14)", "rgba(80,80,80,.14)")
+
     # 5. Adjust badge size from 230px to 240px
     html = html.replace("--badge:230px;", "--badge:240px;")