From a3e4463dab3a2191abc7f58a24f93c3ced298295 Mon Sep 17 00:00:00 2001
From: Saahith <22772542+saahithjanapati@users.noreply.github.com>
Date: Sat, 11 Oct 2025 19:51:55 -0400
Subject: [PATCH] Align output projection matrix palette

---
 src/index.css | 42 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/src/index.css b/src/index.css
index 60d3192..1c06f80 100644
--- a/src/index.css
+++ b/src/index.css
@@ -290,4 +290,46 @@ select:hover{
   }
 }
 
+/*
+ * Transformer visualization tweaks
+ * Ensure the output projection matrices share the same neutral gray palette
+ * as the surrounding MHA heads and MLP weights.
+ */
+:root {
+  --transformer-component-gray: #3d4048;
+  --transformer-component-border: #585c65;
+}
+
+.matrix.output-projection,
+.output-projection-matrix,
+.layer-output-projection {
+  background-color: var(--transformer-component-gray);
+  border-color: var(--transformer-component-border);
+  color: #f2f4f8;
+}
+
+.matrix.output-projection svg rect,
+.output-projection-matrix svg rect,
+.layer-output-projection svg rect {
+  fill: var(--transformer-component-gray);
+  stroke: var(--transformer-component-border);
+}
+
+@media (prefers-color-scheme: light) {
+  .matrix.output-projection,
+  .output-projection-matrix,
+  .layer-output-projection {
+    background-color: #d5d8e0;
+    border-color: #aab0bb;
+    color: #1a1c20;
+  }
+
+  .matrix.output-projection svg rect,
+  .output-projection-matrix svg rect,
+  .layer-output-projection svg rect {
+    fill: #d5d8e0;
+    stroke: #aab0bb;
+  }
+}
+