diff --git a/src/app/web.css b/src/app/web.css
index d19fd8f..721d27b 100644
--- a/src/app/web.css
+++ b/src/app/web.css
@@ -998,8 +998,14 @@ html[data-theme="web"][data-scheme="dark"] .heatmap-legend-cell[data-level="4"]
   right: 18px;
   padding: 3px 9px;
   border-radius: 999px;
-  background: var(--glass-hi);
+  background-color: var(--glass-lo);
+  background-image: linear-gradient(155deg, var(--glass-hi), var(--glass-lo));
   border: 1px solid var(--glass-border);
+  /* Frosted pill: blurs the footer's border line passing behind it so the two
+     stop visually colliding. */
+  -webkit-backdrop-filter: blur(14px) saturate(180%);
+  backdrop-filter: blur(14px) saturate(180%);
+  box-shadow: 0 6px 16px -12px rgba(0, 0, 0, 0.55);
   font-size: 0.66rem;
   font-weight: 700;
   letter-spacing: 0.08em;