.modi-demo{grid-column:1/-1;width:100%;max-width:100%;margin:24px 0;color:inherit;font:inherit;letter-spacing:0}
.modi-demo [hidden]{display:none!important}
.modi-demo-stage{position:relative;width:100%;height:560px;max-height:78svh;min-height:340px;background:#121416;overflow:hidden;border-radius:4px}
.modi-demo-poster{width:100%;height:100%;object-fit:contain;display:block;margin:0!important;opacity:.8}
.modi-demo-stage iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;margin:0;padding:0}
.modi-demo-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:90%;min-height:48px;padding:12px 24px;border:2px solid #fff;border-radius:4px;background:#15191d;color:#fff;font:700 17px/1.4 system-ui;white-space:normal;cursor:pointer;text-align:center}
.modi-demo-play:hover{background:#30383d}
.modi-demo-play:disabled{cursor:wait;opacity:.7}
.modi-demo-stop{padding:8px 16px;min-height:44px;border:1px solid currentColor;background:transparent;color:inherit;border-radius:4px;font:600 14px/1.4 system-ui;cursor:pointer}
.modi-demo button:focus-visible{outline:3px solid #17a99a;outline-offset:4px}
.modi-demo-tools{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:8px;font-size:13px;line-height:1.5}
.modi-demo-status{min-height:1.5em;margin:4px 0;font-size:14px;line-height:1.5}
.modi-demo-privacy{margin:8px 0;font-size:13px!important;line-height:1.6!important;max-width:100%}
@media(max-width:600px){.modi-demo-stage{height:560px;max-height:75svh;min-height:380px}.modi-demo-play{font-size:16px;padding:10px 18px}.modi-demo-tools{font-size:12px}}

.modi-demo-stage:fullscreen{height:100vh;max-height:none;width:100vw;border-radius:0}

/* Keep exit/close controls reachable in fullscreen, including touch screens. */
.modi-demo:fullscreen{display:flex;flex-direction:column;gap:4px;width:100vw;height:100vh;margin:0;padding:12px;box-sizing:border-box;background:#f8f1f6;color:#221d2a;overflow:auto}
.modi-demo:fullscreen .modi-demo-stage{flex:1 1 auto;height:auto;max-height:none;min-height:0}
.modi-demo:fullscreen .modi-demo-privacy{display:none}
@media(max-width:600px){.modi-demo-stage{height:auto;min-height:0;max-height:none;aspect-ratio:16/10}.modi-demo:fullscreen .modi-demo-stage{aspect-ratio:auto}}