html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #000; color: #fff; font-family: Arial, Helvetica, sans-serif; }
#projection { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; }
#projection.mirrored { -webkit-transform: scaleX(-1); transform: scaleX(-1); }
#stage { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
#invitation { position: absolute; right: 20px; bottom: 20px; width: 166px; text-align: center; background: #000; z-index: 2; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; }
.invite-heading { font-size: 17px; font-weight: bold; line-height: 1.05; letter-spacing: 2px; color: #d8ff9a; margin-bottom: 16px; }
#fullscreen { position: absolute; top: 20px; right: 20px; z-index: 4; width: 48px; height: 48px; border: 1px solid #666; background: #000; color: #fff; border-radius: 5px; padding: 10px; cursor: pointer; opacity: 0; pointer-events: none; -webkit-transition: opacity 180ms ease; transition: opacity 180ms ease; }
#fullscreen.is-visible { opacity: 1; pointer-events: auto; }
#fullscreen svg { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#fullscreen .fullscreen-exit, #fullscreen.is-fullscreen .fullscreen-enter { display: none; }
#fullscreen.is-fullscreen .fullscreen-exit { display: inline; }
#fullscreen:focus { outline: 3px solid #d8ff9a; }
#notice { position: absolute; left: 20px; top: 16px; right: 210px; font-size: 14px; color: #fff4b8; background: #000; z-index: 3; }
.rcRoomQrCodeLink, .rcRoomQrCodeLink * { box-sizing: content-box; }
.rcRoomQrCodeLink { display: block; width: 150px; margin-left: auto; margin-right: auto; border: solid 8px #fff; border-radius: 8px; color: #fff; background-color: #fff; text-align: center; text-decoration: none; }
.rcTechLabel { background-color: #000; color: #fff; font-family: monospace; font-size: 13px; font-weight: bold; margin: 0 0 8px 0; padding: 4px; letter-spacing: 0.2em; border-radius: 8px 8px 0 0; }
.rcRoomQrCode { width: 150px; height: 150px; }
.rcRoomId { background-color: #000; color: #fff; font-family: monospace; font-size: 16px; padding: 4px; margin: 8px 0 0 0; letter-spacing: 0.25em; border-radius: 0 0 8px 8px; }
@media (max-aspect-ratio: 10/11) {
    #invitation { right: 20px; bottom: 14px; }
    .invite-heading { position: absolute; right: 185px; bottom: 140px; width: 170px; font-size: 20px; text-align: left; }
    #notice { right: 20px; }
}
@media (max-width: 370px) { .invite-heading { width: 110px; font-size: 13px; } }
#invitation.stacked .invite-heading { position: static; width: auto; font-size: 17px; text-align: center; }
#projection.shadow, #projection.shadow #invitation { background: #fff; }
#projection.shadow .invite-heading { color: #111; }
#projection.shadow #notice { color: #222; background: #fff; }
#projection.shadow #fullscreen { color: #111; background: #fff; border-color: #999; }