#app{display:flex}button{min-width:130px;border-radius:8px;border:1px solid #1a1a1a;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#f9f9f9;cursor:pointer;transition:border-color .25s}input{border-radius:8px;border:1px solid #1a1a1a;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;transition:border-color .25s}button:hover{background-color:#ddd}button:active{background-color:#ccc}#app .left-side{margin:10px;padding:10px}#app .right-side .waiting{margin:10px;padding:10px;display:flex}#app .right-side{display:flex;margin:10px;padding:10px;flex-wrap:wrap}#app button,#app input{margin:10px;padding:10px}#app h3{padding:0 10px}#app .button-on{background-color:#079eff;color:#fff}#app .right-side video{height:300px!important;max-width:400px;margin:10px;border-radius:4px;aspect-ratio:16/9}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#000;overscroll-behavior:none;touch-action:none}#live-player{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;background:#000;overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none}#live-player .video-container{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#000}#live-player .video-container>video{width:100%;height:100%;object-fit:cover;background:#000;display:block}#live-player .autoplay-mask{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:10;cursor:pointer;animation:mask-fade-in .3s ease}#live-player .autoplay-mask .tip-text{color:#fff;font-size:18px;letter-spacing:4px;text-shadow:0 1px 6px rgba(0,0,0,.8);animation:tip-breathe 1.6s ease-in-out infinite}#live-player .status-tip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:8px 16px;background:rgba(0,0,0,.6);color:#fff;font-size:14px;border-radius:4px;z-index:5;pointer-events:none}#live-player .empty-tip{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:8}#live-player .empty-tip .empty-text{color:rgba(255,255,255,.7);font-size:16px;letter-spacing:2px}@keyframes mask-fade-in{0%{opacity:0}to{opacity:1}}@keyframes tip-breathe{0%,to{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}html,body,#app{width:100%;margin:0;padding:0}#app{display:flex;justify-content:center}