diff --git a/src/components/FloatingPanel.tsx b/src/components/FloatingPanel.tsx
index 43183d4..92e5c0e 100644
--- a/src/components/FloatingPanel.tsx
+++ b/src/components/FloatingPanel.tsx
@@ -29,7 +29,8 @@ const GAP = 12
  * Drag (header), collapse (header double-click / button) and focus-to-front come from the ported
  * `makePanelDraggableAndCollapsible` (src/engine/panelUtils.ts, unchanged); resizing is CSS `resize: both` on the
  * frame, as in the sample. The frame keeps a static className because panelUtils toggles `collapsed` on it, and
- * React would overwrite a changing className. Open/closed only touches `style.display`.
+ * React would overwrite a changing className; panelUtils also owns its inline left/top/z-index/height. Open/closed
+ * is the `hidden` attribute, so neither of those is touched.
  */
 export function FloatingPanel({ title, icon, meta, actions, open, onClose, slot, anchorRef, size = "tall", children }: Props) {
   const frameRef = useRef<HTMLElement>(null)
@@ -71,7 +72,7 @@ export function FloatingPanel({ title, icon, meta, actions, open, onClose, slot,
       className="viewer-window"
       data-size={size}
       aria-label={title}
-      style={{ display: open ? undefined : "none" }}
+      hidden={!open}
     >
       <Card size="sm" className="viewer-window-card">
         <CardHeader ref={headerRef} className="viewer-window-header border-b">
diff --git a/src/hm-theme.css b/src/hm-theme.css
index 1e50111..1b8b561 100644
--- a/src/hm-theme.css
+++ b/src/hm-theme.css
@@ -126,6 +126,9 @@
   border-radius: var(--hm-radius-container);
   box-shadow: var(--hm-sem-floating-shadow);
 }
+.viewer-window[hidden] {
+  display: none;
+}
 .viewer-window[data-size="auto"] {
   height: auto;
   max-height: min(78dvh, 760px);