:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#10151d;color:#b8c5d5}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center}main{width:min(1200px,100%);padding:20px}header,footer{display:flex;justify-content:space-between;align-items:center;gap:14px}header{margin-bottom:14px;font-size:14px}header div{display:flex;align-items:center;gap:18px;flex-wrap:wrap}strong{background:#ed2935;color:#fff;padding:3px 9px;font-size:20px;letter-spacing:1px}button{background:#202c3b;border:1px solid #354357;border-radius:6px;color:inherit;padding:8px 14px;cursor:pointer}canvas{display:block;width:100%;height:auto;aspect-ratio:5/3;touch-action:none;outline:none;border:1px solid #28374a;border-radius:5px}footer{margin-top:12px;font-size:12px;color:#8494a9}main:fullscreen,.hardware-fullscreen main{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100vh;max-width:none;padding:0;background:#000}main:fullscreen header,main:fullscreen footer,.hardware-fullscreen header,.hardware-fullscreen footer{display:none}main:fullscreen canvas,.hardware-fullscreen canvas{width:min(100vw,calc(100vh * 5 / 3));height:auto;max-width:none;max-height:100vh;flex:none;border:0;border-radius:0}#connection.live{color:#5bd8b8}#connection.offline{color:#f4b663}