:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#101b22;color:#eff9f6}body{margin:0}main{max-width:620px;margin:auto;padding:28px 20px}small{letter-spacing:3px;color:#83cdb5}h1{font-size:40px;margin:8px 0}h1 span{color:#9be4c8;font-size:18px;margin-left:12px}p,footer{color:#a8bbb9;line-height:1.5}section{background:#1b2b33;border-radius:18px;padding:18px;margin:20px 0}h2{font-size:18px}label{display:block;margin:12px 0}input:not([type=checkbox]),select{box-sizing:border-box;width:100%;padding:13px;margin-top:8px;background:#101b22;color:inherit;border:1px solid #4a626b;border-radius:9px}button{padding:13px 17px;border:0;border-radius:12px;background:#a8e5ce;color:#12352c;font-weight:700;cursor:pointer}button:disabled{opacity:.35;cursor:default}#end{background:#edaaa9}.buttons{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}.stage{position:relative;background:#071217;border-radius:20px;overflow:hidden;aspect-ratio:4/3}.stage video#remote{width:100%;height:100%;object-fit:contain;position:relative;z-index:1}.placeholder{position:absolute;top:45%;width:100%;text-align:center;color:#758e90}#local{position:absolute;right:12px;bottom:12px;width:28%;border-radius:12px;z-index:2}footer,#stats{font-size:12px}button[hidden]{display:none}