:root { color-scheme: normal; }
html, body, #stage { margin: 0; width: 100%; height: 100%; overflow: hidden; background: transparent !important; }
#stage { position: fixed; inset: 0; pointer-events: none; }
.presentation { position: absolute; inset: 0; box-sizing: border-box; }
.media-panel { position: absolute; inset: 0; }
.media-panel > img, .media-panel > video { display: block; width: 100%; height: 100%; object-fit: contain; }
.layout-video { background: rgba(0,0,0,.9); padding: 12px; }
.layout-video .media-panel { inset: 12px; }
.layout-full-screen { background: rgba(0,0,0,.9); }
.countdown { position: absolute; top: 10px; right: 10px; z-index: 10; min-width: 32px; height: 32px; padding: 0 7px; box-sizing: border-box; border-radius: 18px; background: rgb(182,118,230); color: white; font: 300 1em/32px monospace; text-align: center; }
.qr { position: absolute; z-index: 9; display: flex; padding: 10px; background: white; --qr-size: 150px; }
.qr svg { display: block; width: var(--qr-size); height: var(--qr-size); }
.qr[data-position='rt'], .qr[data-position='rb'] { right: 30px; }
.qr[data-position='lt'], .qr[data-position='lb'] { left: 30px; }
.qr[data-position='rt'], .qr[data-position='lt'] { top: 30px; }
.qr[data-position='rb'], .qr[data-position='lb'] { bottom: 30px; }
.layout-one-third .media-panel { inset: auto; z-index: 5; }
.layout-one-third[data-direction='top'] .media-panel { top: 0; left: 0; width: 100%; }
.layout-one-third[data-direction='bottom'] .media-panel { bottom: 0; left: 0; width: 100%; }
.layout-one-third[data-direction='left'] .media-panel { left: 0; top: 0; height: calc(100% - 7px); }
.layout-one-third[data-direction='right'] .media-panel { right: 0; top: 0; height: calc(100% - 7px); }
.layout-one-third[data-direction='top'] .media-panel > :is(img,video), .layout-one-third[data-direction='bottom'] .media-panel > :is(img,video) { height: auto; }
.layout-one-third[data-direction='left'] .media-panel > :is(img,video), .layout-one-third[data-direction='right'] .media-panel > :is(img,video) { width: auto; }
.layout-one-third .qr { --qr-size: 115px; }
.layout-one-third .qr[data-position='rt'], .layout-one-third .qr[data-position='rb'] { right: 15px; }
.layout-one-third .qr[data-position='lt'], .layout-one-third .qr[data-position='lb'] { left: 15px; }
.layout-one-third .qr[data-position='rt'], .layout-one-third .qr[data-position='lt'] { top: 15px; }
.layout-one-third .qr[data-position='rb'], .layout-one-third .qr[data-position='lb'], .qr[data-position='lb-special'] { bottom: 15px; }
.qr[data-position='lb-special'] { left: calc(15px + 14%); }
.progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 7px; background: #192140; z-index: 7; overflow: hidden; }
.layout-one-third[data-direction='top'] .progress { top: 0; bottom: auto; }
.progress-fill { height: 100%; width: 0; background: #4870ff; }
.confetti { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 8; }
.layout-video .media-panel > video, .layout-full-screen .media-panel > :is(img,video) { height: auto; max-height: 100%; }