.preview-demo{min-width:0;align-self:center;border:1px solid #ffffff26;border-radius:24px;overflow:hidden;background:#0c1512;box-shadow:0 22px 70px #0005}
.preview-demo-screen{position:relative;aspect-ratio:16/9;background:#07100d}
.preview-demo-screen video{display:block;width:100%;height:100%;object-fit:contain}
.preview-demo .preview-demo-motion{position:absolute;inset:14px 14px auto auto;z-index:2}
.preview-demo-badge{position:absolute;inset:auto 14px 12px 14px;max-width:calc(100% - 28px);width:max-content;border:1px solid #bcebd52b;border-radius:8px;background:#06110de8;color:#d7eee3;font-size:11px;line-height:1.5;padding:5px 9px;pointer-events:none}
.preview-demo-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:18px}
.preview-demo-actions>span{flex:1;min-width:130px;color:#c0cec7;font-size:12px;line-height:1.6}
.preview-demo .preview-demo-watch{margin:0;gap:9px;min-height:44px}
#dialog:has([data-preview-demo-modal]){width:min(1080px,calc(100vw - 28px));max-width:1080px;max-height:calc(100dvh - 28px)}
.preview-demo-modal video{display:block;width:100%;max-height:70dvh;aspect-ratio:16/9;object-fit:contain;border:1px solid #ffffff26;border-radius:14px;background:#050908}
.preview-demo-modal-label{font-size:12px;line-height:1.5;color:var(--muted,#b7c6bf);margin:0 0 12px}
.preview-demo-status{font-size:13px;line-height:1.6;min-height:1.6em;margin:12px 0}
.preview-demo-modal [hidden]{display:none!important}
.preview-demo-transcript{border-block:1px solid #ffffff21;margin:18px 0;padding:12px 0}
.preview-demo-transcript summary{cursor:pointer;min-height:32px;font-size:14px;font-weight:600;line-height:1.6}
.preview-demo-transcript p{font-size:14px;line-height:1.9;max-width:82ch;margin:12px 0 2px;color:var(--muted,#b7c6bf)}
.preview-demo-terms{line-height:1.7;margin:14px 0!important;max-width:90ch}
.preview-demo-watch:focus-visible,.preview-demo-motion:focus-visible,.preview-demo-transcript summary:focus-visible,[data-preview-demo-retry]:focus-visible,[data-preview-demo-resume]:focus-visible,.preview-demo-modal a:focus-visible,.preview-demo-modal video:focus-visible{outline:3px solid #aaffda;outline-offset:4px}
[data-theme=light] .preview-demo{background:#f3faf6;border-color:#21513b30;box-shadow:0 20px 60px #163c2120}
[data-theme=light] .preview-demo-actions>span{color:#345244}
[data-theme=light] .preview-demo-transcript{border-color:#21513b30}
[data-theme=light] .preview-demo-watch:focus-visible,[data-theme=light] .preview-demo-motion:focus-visible,[data-theme=light] .preview-demo-transcript summary:focus-visible,[data-theme=light] [data-preview-demo-retry]:focus-visible,[data-theme=light] [data-preview-demo-resume]:focus-visible,[data-theme=light] .preview-demo-modal a:focus-visible,[data-theme=light] .preview-demo-modal video:focus-visible{outline-color:#206448}
@media(max-width:600px){.preview-demo{border-radius:18px}.preview-demo-actions{padding:14px;gap:10px}.preview-demo-actions>span{flex-basis:100%}.preview-demo-badge{font-size:10px;inset:auto 9px 9px 9px}.preview-demo .preview-demo-motion{inset:9px 9px auto auto}.preview-demo-transcript p{font-size:13px}#dialog:has([data-preview-demo-modal]){width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}.preview-demo-modal video{border-radius:9px}}
@media(prefers-reduced-motion:reduce){.preview-demo *{scroll-behavior:auto;animation:none!important;transition:none!important}}
