.demo-window {margin:32px 0;min-width:0;}
.demo-window-launch {display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;border-block:1px solid var(--border);}
.demo-window-launch h3 {font-size:1.5rem;margin-top:0;}
.demo-window-launch p,.demo-window-note,.demo-window-guidance {color:var(--muted);line-height:1.6;}
.demo-window-launch .button {flex-shrink:0;}
.demo-window-toolbar {display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--dark);color:var(--dark-text);padding:12px 16px;border-radius:12px 12px 0 0;}
.demo-window-toolbar>div {display:flex;gap:8px;}
.demo-window-toolbar button {font:inherit;min-height:44px;padding:8px 12px;color:var(--dark-text);border:1px solid #536171;background:transparent;border-radius:8px;cursor:pointer;}
.demo-window button:focus-visible {outline:3px solid var(--blue-focus);outline-offset:3px;}
.demo-window iframe {display:block;width:100%;height:720px;border:1px solid var(--border);background:var(--canvas);}
.demo-window-guidance {padding:12px 16px;border-inline:1px solid var(--border);background:#fff;}
.demo-window-guidance p {margin:.35rem 0;}
.demo-window-note {font-size:.85rem;margin:12px 0;}
.demo-window.is-running + #feature-demo-panel .feature-demo-device {display:none;}
.demo-window.is-running + #feature-demo-panel {display:block;}
.demo-window.is-expanded {position:fixed;inset:12px;z-index:1000;margin:0;background:var(--canvas);padding:8px;display:flex;flex-direction:column;box-shadow:0 0 0 20px rgba(23,27,34,.85);}
.demo-window.is-expanded iframe {flex:1;min-height:0;height:100%;}
@media(max-width:700px){.demo-window-launch{align-items:stretch;flex-direction:column}.demo-window iframe{height:680px}.demo-window-toolbar{padding:10px;flex-wrap:wrap}.demo-window-toolbar button{font-size:.85rem}.demo-window.is-expanded{inset:4px;padding:4px}.demo-window-note{font-size:.8rem}}