.demo-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; text-align: left; }
.demo-actions [role="status"] { flex: 1; font: 12px/1.5 system-ui; color: var(--muted, #777); min-width: 160px; }
.demo-stage { position: relative; }
.js .demo-stage { height: clamp(360px, calc(100dvh - 180px), 760px); }
.js [data-demo-src]:not(.demo-failed) .demo-stage > .app-window { display: none; }
.js .demo-stage > .app-window, .js .demo-stage > .app-window img { height: 100%; }
.js .demo-stage > .app-window img { width: 100%; object-fit: contain; }
.demo-stage .app-window { margin: 0; }
.demo-mount { display: none; }
.demo-loading .demo-mount { display: block; position: absolute; inset: 0; visibility: hidden; }
.demo-running .demo-mount { display: block; }
.demo-running .demo-stage > .app-window { display: none; }
.demo-mount iframe { display: block; width: 100%; height: clamp(360px, calc(100dvh - 180px), 760px); border: 1px solid var(--line); border-radius: 12px; background: transparent; }
.demo-expanded { position: fixed !important; inset: 0; z-index: 1000; margin: 0 !important; padding: 16px; max-width: none !important; width: 100%; height: 100dvh; background: var(--bg, #fafaf8); display: flex; flex-direction: column; }
.demo-expanded .demo-stage { flex: 1; min-height: 0; overflow: auto; }
.demo-expanded .demo-mount, .demo-expanded iframe { height: 100%; }
.demo-expanded .image-footnote, .demo-expanded .product-label { display: none; }
body:has(.demo-expanded) .hero { isolation: auto; }
.demo-actions button[hidden] { display: none; }
@media (max-width: 600px) {
  .demo-actions { gap: 8px; }
  .demo-actions [role="status"] { flex-basis: 100%; }
  .demo-expanded { padding: 8px; }
  .demo-mount iframe { height: clamp(360px, calc(100dvh - 180px), 600px); }
  .js .demo-stage { height: clamp(360px, calc(100dvh - 180px), 600px); }
}