diff --git a/src/ui.tsx b/src/ui.tsx
index e9c0887..2ca50a1 100644
--- a/src/ui.tsx
+++ b/src/ui.tsx
@@ -286,12 +286,19 @@ function Plugin () {
         .plugin-root { width: 100%; height: 100%; }
         .resize-hitbox {
           opacity: 0;
-          transition: opacity 120ms ease;
-          background: rgba(255, 255, 255, 0.5);
-          border: 1px solid rgba(255, 255, 255, 0.65);
+          transition: opacity 120ms ease, background 120ms ease, border-color 120ms ease;
+          background: rgba(255, 255, 255, 0.4);
+          border: 1px solid rgba(255, 255, 255, 0.55);
           border-radius: 4px;
         }
-        .plugin-root:hover .resize-hitbox { opacity: 1; }
+        /* Hovering any handle (or anywhere in the window) reveals all handles. */
+        .plugin-root:hover .resize-hitbox,
+        .plugin-root:has(.resize-hitbox:hover) .resize-hitbox { opacity: 1; }
+        /* The specifically hovered handle is brighter. */
+        .resize-hitbox:hover {
+          background: rgba(255, 255, 255, 0.9);
+          border-color: rgba(255, 255, 255, 1);
+        }
       `}</style>
       <Container space="medium" style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
         <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>