/* Interface mockup scroll-tilt + device bezel ("laptop screen" look) */
.hz-tilt-wrap{
  will-change:transform;
  transform-origin:center center;
  /* device bezel framing the dashboard "screen" */
  padding:10px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,#26262b,#191919);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    0 40px 70px -25px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(255,255,255,.06);
}
@media (min-width:768px){
  .hz-tilt-wrap{padding:16px;border-radius:26px;}
}
/* let the inner screen fill the bezel cleanly */
.hz-tilt-wrap > .dashboard-glow{margin:0;}
/* The card content was fading in via the bundle's scroll-reveal, leaving the
   bezel looking like a blank tablet for ~3s. Show it immediately — the
   scroll-tilt is the entrance motion now. */
.hz-tilt-wrap > .dashboard-glow{opacity:1 !important;transform:none !important;}

/* Taller card + slightly wider AI panel (desktop only). The SLD/AI row is a
   5-col grid (SLD col-span-3, AI col-span-2 = 60/40). Re-split to ~57/43 and
   give both panels more height so the diagram and the AI chat have room. */
@media (min-width:1024px){
  [code-path*="InterfacePreview.tsx:105"]{grid-template-columns:1.32fr 1fr !important;}
  [code-path*="InterfacePreview.tsx:106"]{grid-column:1 !important;}
  [code-path*="InterfacePreview.tsx:130"]{grid-column:2 !important;}
  [code-path*="InterfacePreview.tsx:106"],
  [code-path*="InterfacePreview.tsx:130"]{min-height:440px;}
}

@media (prefers-reduced-motion:reduce){
  .hz-tilt-wrap{transform:none!important;}
}