diff --git a/crates/adapters/template-askama/templates/profile.html b/crates/adapters/template-askama/templates/profile.html
index 3730fa4..9a942b2 100644
--- a/crates/adapters/template-askama/templates/profile.html
+++ b/crates/adapters/template-askama/templates/profile.html
@@ -37,7 +37,7 @@
     <div class="heatmap-label">Movies watched this year</div>
     <div class="heatmap">
       {% for cell in heatmap %}
-      <div class="heatmap-cell" style="background: rgba(74, 158, 255, {{ cell.alpha }})">
+      <div class="heatmap-cell" style="--alpha: {{ cell.alpha }}">
         <div class="heatmap-count">{{ cell.count }}</div>
         <div class="heatmap-month">{{ cell.month_label }}</div>
       </div>
diff --git a/static/style.css b/static/style.css
index 4b84305..17d635e 100644
--- a/static/style.css
+++ b/static/style.css
@@ -471,6 +471,7 @@ form button[type="submit"]:hover {
   text-align: center;
   min-height: 48px;
   display: flex; flex-direction: column; align-items: center; justify-content: center;
+  background: oklch(85.2% 0.199 91.936 / var(--alpha, 0.05));
 }
 .heatmap-count { font-size: 0.85rem; font-weight: 700; }
 .heatmap-month { font-size: 0.65rem; opacity: 0.6; margin-top: 2px; }