.demo-video { box-sizing:border-box; width:1040px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px); margin:auto; padding:24px; border:0; border-radius:20px; background:#fff; color:#17212d; box-shadow:0 24px 80px #17212d26; overflow:auto; overscroll-behavior:contain; font-family:var(--f-body,Inter,sans-serif); }
.demo-video:not([open]), .demo-video [hidden] { display:none!important; }
.demo-video::backdrop { background:rgb(23 33 45 / .28); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
html.demo-video-open { overflow:hidden; scrollbar-gutter:stable; }
.demo-video__head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.demo-video .demo-video__head h2 { margin:0; font-size:26px; font-weight:600; line-height:1.3; letter-spacing:-.025em; }
.demo-video__close { display:grid; place-items:center; flex:none; width:44px; height:44px; padding:0; border:0; border-radius:8px; color:inherit; background:transparent; cursor:pointer; }
.demo-video__close:hover { background:#fff2e8; }
.demo-video__close:focus-visible { outline:2px solid #ed7117; outline-offset:2px; }
.demo-video video { display:block; width:100%; max-height:calc(100dvh - 160px); aspect-ratio:16 / 9; object-fit:contain; border-radius:10px; background:#fff; }
.demo-video__error { margin:16px 0 0; font-size:16px; line-height:1.5; }
.demo-video__error a { color:#b64e00; text-decoration:underline; }
@media(max-width:640px) {
 .demo-video { max-width:calc(100vw - 20px); padding:16px; border-radius:16px; }
 .demo-video .demo-video__head h2 { font-size:22px; }
 .demo-video video { max-height:calc(100dvh - 144px); }
}