/* A dedicated playable preview, not a full website nested inside a website. */
#demo-modal { padding:20px; overscroll-behavior:contain; }
#demo-modal .modal-panel { display:grid; grid-template-rows:auto minmax(0,1fr) auto; width:min(760px,100%); height:min(94vh,1000px); height:min(94dvh,1000px); max-height:100%; border-radius:24px; background:var(--card); }
#demo-modal .modal-head { gap:16px; padding:12px 16px; }
#demo-modal .modal-title { min-width:0; font-family:var(--sans); font-size:13px; line-height:1.5; letter-spacing:0; font-weight:700; }
.demo-toolbar { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.demo-tool, #demo-modal .modal-close { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 12px; border:1px solid var(--control-border); border-radius:12px; color:var(--ink); background:var(--card); font:inherit; font-size:12px; font-weight:600; line-height:1.4; cursor:pointer; white-space:nowrap; }
.demo-tool:hover, .demo-tool:focus-visible, #demo-modal .modal-close:hover, #demo-modal .modal-close:focus-visible { color:var(--ink); background:var(--card-soft); border-color:var(--yellow); }
.demo-tool:focus-visible, #demo-modal .modal-close:focus-visible { outline:2px solid var(--red); outline-offset:3px; }
.demo-toolbar [hidden], .demo-loader[hidden], #demo-retry[hidden] { display:none; }
#demo-modal .modal-body { position:relative; width:100%; height:100%; min-height:0; background:#202925; }
#demo-modal .modal-body iframe { display:block; width:100%; height:100%; border:0; background:#202925; color-scheme:dark; }
#demo-modal.demo-is-loading iframe { visibility:hidden; }
.demo-loader { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:28px; text-align:center; color:var(--ink); background:var(--card); }
.demo-loader p { max-width:360px; margin:0; font-size:14px; line-height:1.7; }
.demo-foot { padding:10px 16px; border-top:1px solid var(--line); background:var(--card); }
.demo-foot p { margin:0; color:var(--muted); font-size:11px; line-height:1.5; }
#demo-action-status { margin-top:8px; color:var(--red); }
#demo-action-status[hidden] { display:none; }
#demo-modal .modal-panel:fullscreen { width:100vw; height:100vh; height:100dvh; max-height:none; border:0; border-radius:0; }
#demo-modal .modal-panel::backdrop { background:var(--paper); }
@media(max-width:620px) {
  #demo-modal { padding:0; }
  #demo-modal .modal-panel { width:100%; height:100vh; height:100dvh; max-height:none; border:0; border-radius:0; }
  #demo-modal .modal-head { flex-direction:column; align-items:stretch; gap:8px; padding: max(10px,env(safe-area-inset-top)) 12px 10px; }
  #demo-modal .modal-title { font-size:12px; }
  .demo-toolbar { display:grid; grid-template-columns:1fr auto auto; gap:6px; }
  .demo-tool, #demo-modal .modal-close { padding-inline:10px; }
  .demo-foot { padding:8px 12px max(8px,env(safe-area-inset-bottom)); }
}
@media(forced-colors:active) { .demo-tool, #demo-modal .modal-close { border-color:ButtonText; } }