.demo-dialog {
  --demo-width: 960px;
  --demo-radius: 20px;
  --demo-backdrop: .92;
  --demo-duration: 320ms;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  border: 0;
  background: transparent;
  color: #fff;
  overflow: auto;
  overscroll-behavior: contain;
}
.demo-dialog[open] { display: grid; place-items: center; }
.demo-dialog::backdrop { background: rgb(0 0 0 / var(--demo-backdrop)); }
.demo-shell {
  width: min(100%, var(--demo-width), calc((100dvh - 180px) * 1.33333));
  border: 1px solid #ffffff26;
  border-radius: var(--demo-radius);
  overflow: hidden;
  background: #0c0c0c;
  box-shadow: 0 30px 100px #0009;
}
.demo-dialog[open] .demo-shell { animation: demo-reveal var(--demo-duration) cubic-bezier(.2,.75,.2,1) both; }
.demo-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px 10px 24px; }
.demo-header h2 { font-size: clamp(18px,2.2vw,24px); font-weight: 650; letter-spacing: -.04em; }
.demo-close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #ffffff0d; color: #fff; cursor: pointer; font: 32px/1 Arial,sans-serif; }
.demo-close:hover { background: #ffffff24; }
.demo-player { width: 100%; aspect-ratio: 4/3; background: #000; }
.demo-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.demo-footer { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 14px 24px; }
.demo-watch { display: inline-flex; align-items: center; min-height: 44px; color: #c9c9c9; font-size: 13px; text-underline-offset: 4px; }
.demo-watch:hover { color: #fff; }
.demo-dialog :focus-visible,#demo-trigger:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@keyframes demo-reveal { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) {
  .demo-dialog { padding: 16px; }
  .demo-header { padding: 8px 10px 8px 16px; }
  .demo-footer { gap: 10px; padding: 10px 16px; }
  .demo-watch { font-size: 11px; }
}
@media (max-height: 440px) {
  .demo-dialog { padding: 8px; }
  .demo-shell { width: min(100%, var(--demo-width), calc((100dvh - 140px) * 1.33333)); }
  .demo-header { padding-block: 4px; }
  .demo-footer { padding: 6px 12px; gap: 8px; }
  .demo-watch { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-dialog[open] .demo-shell { animation: none; }
  .demo-dialog * { transition: none !important; }
}