:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:#0b1119;color:#e7edf5}*{box-sizing:border-box}body{margin:0}main{max-width:1480px;margin:auto;padding:26px 30px}header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.eyebrow{font-size:10px;letter-spacing:.2em;color:#73b5b8;font-weight:700}h1{font-size:25px;letter-spacing:-.6px;margin:7px 0}h1 span{font-weight:400;color:#8e9aaa;margin-left:10px}.actions{display:flex;gap:8px}button{font:inherit;font-size:13px;padding:10px 16px;border:1px solid #344252;border-radius:8px;background:#172231;color:#e7edf5;cursor:pointer}button:hover{background:#26374b}button:disabled{opacity:.4;cursor:default}button.active{background:#236f67;border-color:#47b5a6}#pair{display:flex;align-items:center;gap:12px;padding:15px;background:#121d2a;border:1px solid #26364b;border-radius:10px;margin-bottom:16px}#pair label{font-size:12px;color:#a5b3c5}input{font:inherit;background:#0b1119;color:#e7edf5;border:1px solid #344252;padding:10px;border-radius:6px;flex:1;min-width:0}.state{display:flex;align-items:center;gap:9px;font-size:12px;margin-bottom:12px;color:#b9c8d9}#dot{width:7px;height:7px;border-radius:50%;background:#778396}#dot.live{background:#69d5b4;box-shadow:0 0 14px #69d5b450}#detail{margin-left:auto;color:#8e9aaa}#stage{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;max-height:calc(100dvh - 245px);width:100%;background:#03070b;border:1px solid #283648;border-radius:12px;overflow:hidden;touch-action:none;user-select:none;overscroll-behavior:contain}video{width:100%;height:100%;object-fit:contain;pointer-events:none}#empty{position:absolute;text-align:center;color:#8796a8;font-size:20px;pointer-events:none}#empty span{display:block;font-size:13px;margin-top:10px;color:#5f7188}footer{display:flex;justify-content:space-between;gap:20px;color:#a3b1c2;font-size:12px;margin-top:12px}footer p{margin:0}#stats{font-variant-numeric:tabular-nums;white-space:nowrap}.note{font-size:11px;color:#65758a;margin-top:17px}a{color:#7ea6ba}#stage:fullscreen{max-height:none;height:100dvh;border:none;border-radius:0}#pair[hidden],#empty[hidden]{display:none}@media(max-width:700px){main{padding:16px 12px}h1{font-size:20px}h1 span{display:block;margin:2px 0}header{margin-bottom:14px}#pair{flex-wrap:wrap}#pair label{width:100%}footer{display:block}#stats{margin-top:10px}#stage{max-height:70dvh}.actions button{padding:9px}}

#liveCanvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain} [hidden]{display:none!important}