diff --git a/src/ui.tsx b/src/ui.tsx
index e48d3de..f04b582 100644
--- a/src/ui.tsx
+++ b/src/ui.tsx
@@ -276,32 +276,33 @@ function Plugin () {
   }
 
   const [isMaxToggled, setIsMaxToggled] = useState(false)
+  // Resize-handle visibility is state-driven (not CSS :hover/:has) for Figma webview
+  // reliability: show all handles when the window or any handle is hovered; hoveredHandle
+  // tracks the one under the cursor, rendered brighter.
+  const [rootHover, setRootHover] = useState(false)
+  const [hoveredHandle, setHoveredHandle] = useState<string | null>(null)
+  const handleVisible = rootHover || hoveredHandle !== null
+  function hitboxStyle (dir: string, pos: { [k: string]: number | string }) {
+    const active = hoveredHandle === dir
+    return {
+      ...pos,
+      position: 'fixed',
+      zIndex: 3,
+      opacity: handleVisible ? 1 : 0,
+      background: active ? 'rgba(255,255,255,0.95)' : 'rgba(255,255,255,0.5)',
+      border: '1.5px solid ' + (active ? 'rgba(80,80,80,1)' : 'rgba(110,110,110,0.9)'),
+      borderRadius: 4,
+      transition: 'opacity 120ms ease, background 120ms ease, border-color 120ms ease'
+    } as any
+  }
   // "Maximized" flag drives the icon (expand/collapse). Real size after maximize is
   // clamped by Figma, so we track it explicitly rather than comparing sizes.
   const isMaximized = isMaxToggled
 
   return (
-    <div className="plugin-root" style={{ width: '100%', height: '100%' }}>
-      <style>{`
-        .plugin-root { width: 100%; height: 100%; }
-        .resize-hitbox {
-          opacity: 0;
-          transition: opacity 120ms ease, background 120ms ease, border-color 120ms ease;
-          /* Light fill (visible on dark themes) + mid-gray border (visible on light
-             themes) so the handles read on either Figma theme. */
-          background: rgba(255, 255, 255, 0.5);
-          border: 1.5px solid rgba(110, 110, 110, 0.9);
-          border-radius: 4px;
-        }
-        /* 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.95);
-          border-color: rgba(80, 80, 80, 1);
-        }
-      `}</style>
+    <div className="plugin-root" style={{ width: '100%', height: '100%' }}
+      onPointerEnter={function () { setRootHover(true) }}
+      onPointerLeave={function () { setRootHover(false) }}>
       <Container space="medium" style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
         <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
           <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
@@ -349,18 +350,16 @@ function Plugin () {
           <path d="M10 1C10.5523 1 11 1.44772 11 2C11 2.55228 10.5523 3 10 3C9.44772 3 9 2.55228 9 2C9 1.44772 9.44772 1 10 1Z" fill="currentColor" />
         </svg>
       </div>
-      {/* Perimeter hitboxes (4 edges + 4 corners). Visible for debugging.
-          Corners = violet. Edges colored per side: top=red, bottom=green, left=blue, right=orange.
-          Edge handles span the FULL side length (left:0;right:0 / top:0;bottom:0).
-          Center is button-only (not in perimeter). */}
-      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'top-left', 'top-left') }} style={{ position: 'fixed', top: -3, left: -3, width: 12, height: 12, zIndex: 3, className: 'resize-hitbox', cursor: 'nwse-resize' }} aria-hidden="true" />
-      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'top', 'top-center') }} style={{ position: 'fixed', top: -3, left: 16, right: 16, height: 8, zIndex: 3, className: 'resize-hitbox', cursor: 'ns-resize' }} aria-hidden="true" />
-      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'top-right', 'top-right') }} style={{ position: 'fixed', top: -3, right: -3, width: 12, height: 12, zIndex: 3, className: 'resize-hitbox', cursor: 'nesw-resize' }} aria-hidden="true" />
-      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'left', 'center-left') }} style={{ position: 'fixed', top: 16, bottom: 16, left: -3, width: 8, zIndex: 3, className: 'resize-hitbox', cursor: 'ew-resize' }} aria-hidden="true" />
-      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'right', 'center-right') }} style={{ position: 'fixed', top: 16, bottom: 16, right: -3, width: 8, zIndex: 3, className: 'resize-hitbox', cursor: 'ew-resize' }} aria-hidden="true" />
-      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'bottom-left', 'bottom-left') }} style={{ position: 'fixed', bottom: -3, left: -3, width: 12, height: 12, zIndex: 3, className: 'resize-hitbox', cursor: 'nesw-resize' }} aria-hidden="true" />
-      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'bottom', 'bottom-center') }} style={{ position: 'fixed', bottom: -3, left: 16, right: 16, height: 8, zIndex: 3, className: 'resize-hitbox', cursor: 'ns-resize' }} aria-hidden="true" />
-      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'bottom-right', 'bottom-right') }} style={{ position: 'fixed', bottom: -3, right: -3, width: 12, height: 12, zIndex: 3, className: 'resize-hitbox', cursor: 'nwse-resize' }} aria-hidden="true" />
+      {/* Perimeter hitboxes (4 edges + 4 corners). Hidden until the window or any handle is
+          hovered; the handle under the cursor is rendered brighter. */}
+      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'top-left', 'top-left') }} onPointerEnter={function () { setHoveredHandle('top-left') }} onPointerLeave={function () { setHoveredHandle(null) }} style={hitboxStyle('top-left', { top: -3, left: -3, width: 12, height: 12, cursor: 'nwse-resize' })} aria-hidden="true" />
+      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'top', 'top-center') }} onPointerEnter={function () { setHoveredHandle('top') }} onPointerLeave={function () { setHoveredHandle(null) }} style={hitboxStyle('top', { top: -3, left: 16, right: 16, height: 8, cursor: 'ns-resize' })} aria-hidden="true" />
+      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'top-right', 'top-right') }} onPointerEnter={function () { setHoveredHandle('top-right') }} onPointerLeave={function () { setHoveredHandle(null) }} style={hitboxStyle('top-right', { top: -3, right: -3, width: 12, height: 12, cursor: 'nesw-resize' })} aria-hidden="true" />
+      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'left', 'center-left') }} onPointerEnter={function () { setHoveredHandle('left') }} onPointerLeave={function () { setHoveredHandle(null) }} style={hitboxStyle('left', { top: 16, bottom: 16, left: -3, width: 8, cursor: 'ew-resize' })} aria-hidden="true" />
+      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'right', 'center-right') }} onPointerEnter={function () { setHoveredHandle('right') }} onPointerLeave={function () { setHoveredHandle(null) }} style={hitboxStyle('right', { top: 16, bottom: 16, right: -3, width: 8, cursor: 'ew-resize' })} aria-hidden="true" />
+      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'bottom-left', 'bottom-left') }} onPointerEnter={function () { setHoveredHandle('bottom-left') }} onPointerLeave={function () { setHoveredHandle(null) }} style={hitboxStyle('bottom-left', { bottom: -3, left: -3, width: 12, height: 12, cursor: 'nesw-resize' })} aria-hidden="true" />
+      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'bottom', 'bottom-center') }} onPointerEnter={function () { setHoveredHandle('bottom') }} onPointerLeave={function () { setHoveredHandle(null) }} style={hitboxStyle('bottom', { bottom: -3, left: 16, right: 16, height: 8, cursor: 'ns-resize' })} aria-hidden="true" />
+      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'bottom-right', 'bottom-right') }} onPointerEnter={function () { setHoveredHandle('bottom-right') }} onPointerLeave={function () { setHoveredHandle(null) }} style={hitboxStyle('bottom-right', { bottom: -3, right: -3, width: 12, height: 12, cursor: 'nwse-resize' })} aria-hidden="true" />
     </div>
   )
 }