*{box-sizing:border-box}html,body{width:100%;max-width:100%;overflow:hidden}body{margin:0;background:#090909;color:#fff;font:14px system-ui,-apple-system,sans-serif}main{width:100%;height:100dvh;overflow:hidden;position:relative}video{display:block;width:100%;height:100%;object-fit:cover;background:#111}#hud{position:absolute;top:0;left:0;right:0;padding:16px max(16px,env(safe-area-inset-right)) 16px max(16px,env(safe-area-inset-left));display:flex;justify-content:space-between;gap:12px;text-shadow:0 1px 3px #000}#status{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#rec{color:#ff3b30;font-weight:700;white-space:nowrap}#panel{position:absolute;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}button,select{min-width:0;width:100%;border:0;border-radius:10px;min-height:44px;padding:0 10px;background:#242424;color:#fff;font:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}button:disabled{opacity:.45}#connect,#record{grid-column:span 2;font-weight:800}#connect{background:#f2f2f2;color:#111}#connect.connecting{position:relative;color:transparent}#connect.connecting:after{content:"";position:absolute;inset:0;margin:auto;width:17px;height:17px;border:2px solid #777;border-top-color:#111;border-radius:50%;animation:spin .8s linear infinite}#record{background:#d92d20}#save{background:#343434}@keyframes spin{to{transform:rotate(360deg)}}