Use purple for distributed algorithms instead of blue

Distributed algorithms now have a distinct purple color scheme:
- Card border: #7c4dff (purple)
- Badge: #e8daef bg / #4a148c text (light purple / dark purple)
- Linear oracle text: #4a148c (dark purple)

Previously shared the same blue as gradient algorithms.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: LaurentLessard

webapp/css/style.css

@@ -394,6 +394,10 @@ body {
   border-left-color: #f9ab00;
 }
 
+.algo-card.distributed {
+  border-left-color: #7c4dff;
+}
+
 .algo-card-title {
   font-size: 0.95rem;
   font-weight: 600;

webapp/js/katex-helpers.js

@@ -43,7 +43,7 @@ function compositionLatex(tfLatex, oracles, distributed) {
 function linearOracleElement(distributed) {
   if (!distributed) return null;
   const div = document.createElement('div');
-  div.style.cssText = 'margin-top:0.3rem;font-size:0.85rem;color:#0d47a1;';
+  div.style.cssText = 'margin-top:0.3rem;font-size:0.85rem;color:#4a148c;';
   try {
     katex.render(
       '\\text{Linear oracle: } L \\text{ (eigenvalue } \\lambda \\text{)}',

webapp/js/library-ui.js

@@ -92,7 +92,7 @@ function renderLibraryCards(data) {
 
   for (const algo of data) {
     const card = document.createElement('div');
-    card.className = 'algo-card ' + (algo.oracleType || 'gradient');
+    card.className = 'algo-card ' + (algo.distributed ? 'distributed' : (algo.oracleType || 'gradient'));
 
     // Title
     const title = document.createElement('div');
@@ -151,7 +151,7 @@ function renderLibraryCards(data) {
       const distBadge = document.createElement('span');
       distBadge.style.cssText =
         'display:inline-block;margin-top:0.4rem;padding:0.15rem 0.5rem;' +
-        'font-size:0.72rem;background:#bbdefb;color:#0d47a1;border-radius:10px;';
+        'font-size:0.72rem;background:#e8daef;color:#4a148c;border-radius:10px;';
       distBadge.textContent = 'Distributed';
       card.appendChild(distBadge);
     }

webapp/js/results.js

@@ -36,7 +36,7 @@ function displayResults(result) {
   if (result.user_distributed) {
     const distLabel = document.createElement('span');
     distLabel.className = 'match-badge';
-    distLabel.style.cssText = 'background:#bbdefb;color:#0d47a1;margin-top:0.3rem;display:inline-block;';
+    distLabel.style.cssText = 'background:#e8daef;color:#4a148c;margin-top:0.3rem;display:inline-block;';
     distLabel.textContent = 'Distributed';
     tfSection.appendChild(distLabel);
   }
@@ -137,7 +137,7 @@ function displayResults(result) {
     if (match.distributed) {
       const distBadge = document.createElement('span');
       distBadge.className = 'match-badge';
-      distBadge.style.cssText = 'background:#bbdefb;color:#0d47a1;';
+      distBadge.style.cssText = 'background:#e8daef;color:#4a148c;';
       distBadge.textContent = 'Distributed';
       chipsRow.appendChild(distBadge);
     }