Seg: dim AnnotatedImage masks to 50% opacity (RGB shows through), hover pops to 92%

app.py

@@ -194,10 +194,17 @@ CUSTOM_CSS = """
               border-color: #0f172a; transform: translateY(-1px); }
 .pill svg { width: 14px; height: 14px; }
 
-/* AnnotatedImage hover pop: when a region is highlighted, lift + brighten it */
-#seg-out .layer-wrap canvas { transition: transform 200ms ease, filter 200ms ease; }
-#seg-out .layer-wrap.active canvas { transform: translateY(-3px) scale(1.005);
-                                     filter: brightness(1.12) drop-shadow(0 6px 14px rgba(0,0,0,0.18)); }
+/* AnnotatedImage masks: default ~50% opacity so the underlying RGB shows through;
+   hovered region pops to full opacity + slight lift. */
+#seg-out .layer-wrap canvas {
+    opacity: 0.50;
+    transition: opacity 200ms ease, transform 200ms ease, filter 200ms ease;
+}
+#seg-out .layer-wrap.active canvas {
+    opacity: 0.92;
+    transform: translateY(-3px) scale(1.005);
+    filter: brightness(1.10) drop-shadow(0 6px 14px rgba(0,0,0,0.18));
+}
 #seg-out .legend-item { transition: transform 140ms ease; font-weight: 500; }
 #seg-out .legend-item:hover { transform: translateY(-1px); }
 """