:root{--foreground-rgb:0, 0, 0;--background-start-rgb:214, 219, 220;--background-end-rgb:255, 255, 255}@media (prefers-color-scheme:dark){:root{--foreground-rgb:255, 255, 255;--background-start-rgb:0, 0, 0;--background-end-rgb:0, 0, 0}}html,body{box-sizing:border-box;height:100vh;max-height:100vh;color:rgb(var(--foreground-rgb));background:#fff;flex-direction:column;margin:2rem;display:flex}hr{margin:1rem 0}table{display:table}canvas{margin-bottom:1rem}video{aspect-ratio:16/9;background:#000;border:.5rem solid #555;border-radius:.5rem;width:100%;max-width:100%;max-height:150px;margin-bottom:1rem}h3{justify-content:center;padding-top:3rem;display:flex}.center{justify-content:center;display:flex}.log{flex:none;height:300px}.content{flex:1 0 auto}.margin-top{margin-top:5rem}.button-container{justify-content:space-around;align-items:center;margin-top:2.5rem;display:flex!important}.button-container .button{width:45%}.local-container{position:relative}.static-controls{text-align:center;margin-left:auto;margin-right:auto;position:relative;bottom:0;left:0;right:0}.static-controls button{margin:1rem;display:inline-block}.hidden{display:none}.participant-container{flex-direction:column;justify-content:center;align-items:center;margin:1rem;display:flex}.relative{position:relative}.overlay-pill{color:#000;background-color:#fff;border-radius:20px;padding:0 12px;font-size:14px;position:absolute;bottom:40px;left:24px}.placeholder{text-align:center;background-color:#333;margin-bottom:1rem;display:flex}.placeholder span{color:#fff;margin:auto}.device-container{justify-content:space-between;width:100%;display:flex}.local-video{width:100vw;max-width:500px;max-height:300px;display:inline-block}.video-container{justify-content:space-evenly;width:100%;display:flex}.margin{margin:3rem}.player-wrapper{max-width:800px;margin:0 auto;padding:20px}.remote-participant-video{aspect-ratio:16/9;flex-direction:row;justify-content:center;align-items:center;width:100%;max-width:300px;height:auto;display:flex}.margin-right{margin-right:1rem}