Devtool tab transition fix (#1600)

<!--

Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/hexclave/hexclave/blob/dev/CONTRIBUTING.md

-->


<!-- This is an auto-generated description by cubic. -->
---
## Summary by cubic
Fixes devtool tab switching so hidden panes don’t intercept clicks and
active panes render without flicker.

- **Bug Fixes**
- Replace visibility/animation with display: none/block, plus opacity
and z-index, so only the active pane is interactive.
- Add pane background and remove fade-in animation to prevent overlap
and iframe flicker.

<sup>Written for commit ec80835045.
Summary will update on new commits.</sup>

<a
href="https://cubic.dev/pr/hexclave/hexclave/pull/1600?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>

<!-- End of auto-generated description by cubic. -->



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
* Refined dev tool tab pane display behavior for improved visual
rendering and interaction handling.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/template/src/dev-tool/dev-tool-styles.ts

@@ -302,11 +302,14 @@ export const devToolCSS = getInPageUiBaseCSS('.hexclave-devtool') + `
   .hexclave-devtool .sdt-tab-pane {
     position: absolute;
     inset: 0;
+    display: none;
     overflow-y: auto;
     overflow-x: hidden;
     padding: 16px;
-    visibility: hidden;
+    background: var(--sdt-bg);
+    opacity: 0;
     pointer-events: none;
+    z-index: 0;
   }
 
   .hexclave-devtool .sdt-tab-pane-iframe {
@@ -315,20 +318,10 @@ export const devToolCSS = getInPageUiBaseCSS('.hexclave-devtool') + `
   }
 
   .hexclave-devtool .sdt-tab-pane-active {
-    visibility: visible;
+    display: block;
+    opacity: 1;
     pointer-events: auto;
-    animation: sdt-tab-fade-in 0.15s ease-out;
-  }
-
-  @keyframes sdt-tab-fade-in {
-    from {
-      opacity: 0;
-      transform: translateY(6px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
+    z-index: 1;
   }
 
   /* ===== Overview tab — single column ===== */