body{margin:0;background:#131316;color:#eee;font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;overflow-x:hidden}div.video-section{padding-top:min(60px,5vh);width:100%}div.wrapper{margin:0 auto;max-width:1280px;width:95%;padding:0 10px;box-sizing:border-box}#video{width:100%;display:block;box-shadow:2px 2px 6px 4px rgba(0,0,0,.3);aspect-ratio:16/9;background-color:#000;max-height:85vh;object-fit:contain}div.controls-grid{height:60px;padding:0 10px;display:flex;align-items:center;gap:20px;font-size:16px}div.controls-grid i{font-size:24px;color:#fff}div.controls-grid .right-grid{margin-left:auto;display:flex;align-items:center;gap:20px}div.controls-grid .video-settings-group{display:flex;align-items:center;gap:15px}div.controls-grid button{background:none;border:none;color:#fff}div.controls-grid select{background:url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='8' height='8' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='white'/></g></svg>") no-repeat;background-position:right 5px top 50%;padding:3px 15px 3px 5px;color:#fff;background-color:rgba(19,19,22,.8);border-radius:3px;cursor:pointer;width:auto;z-index:10;appearance:none;-webkit-appearance:none;-moz-appearance:none;border:none}div.controls-grid select:focus{outline:none;background-color:#1e1e24}div.controls-grid select option{background-color:#131316;padding:5px}div.controls-grid .control{display:flex;align-items:center;gap:8px;cursor:pointer;opacity:.8;transition:opacity .2s ease-in}div.controls-grid .control:hover,div.controls-grid .control:focus-within{opacity:1}div.controls-grid .control#resolution select,div.controls-grid .control#framerate select{min-width:100px;display:inline-block}div.controls-grid .control#resolution:hover select,div.controls-grid .control#resolution:focus-within select,div.controls-grid .control#framerate:hover select,div.controls-grid .control#framerate:focus-within select{opacity:1}div.controls-grid .control#record{position:relative}div.controls-grid .control#record.recording{color:red;animation:pulse 2s infinite}div.controls-grid .control#record.recording:before{content:"";position:absolute;width:12px;height:12px;background-color:red;border-radius:50%;top:-5px;right:-5px}div.controls-grid .control:focus-within,div.controls-grid .control#record.recording{opacity:1}@keyframes pulse{0%{opacity:1}50%{opacity:.5}100%{opacity:1}}.bottom-text{color:#4f4486;font-size:12px;position:fixed;bottom:5px;right:5px;opacity:.5;transition:opacity .2s ease}.bottom-text:hover{opacity:1}.bottom-text a{text-decoration:none;color:#3e2ea7;opacity:.5;transition:opacity .2s ease}.bottom-text a:hover{opacity:1}.bottom-text #status-message{margin-right:10px;font-weight:bold}.bottom-text #status-message.error{color:#f33}.bottom-text #status-message.loading{color:#3e2ea7}.bottom-text #status-message.success{color:#3c3}@media(max-width: 768px){div.video-section{padding-top:10px}div.controls-grid{flex-direction:column;height:auto;padding:10px;gap:15px}div.controls-grid .right-grid{margin-left:0;width:100%;justify-content:space-between}div.controls-grid .video-settings-group{width:100%;flex-wrap:wrap;justify-content:center}}@media(min-width: 769px)and (max-width: 1024px){div.wrapper{width:98%}div.controls-grid{flex-wrap:wrap;height:auto;padding:10px 5px}}