:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #050505; overflow: hidden; }
main, video { width: 100vw; height: 100vh; }
video { display: block; object-fit: contain; background: #000; }
#panel { position: fixed; inset: auto 4vw 5vh; padding: 24px; border-radius: 18px; background: rgba(20,20,20,.88); backdrop-filter: blur(18px); }
h1 { margin: 0 0 6px; font-size: 26px; }
p { margin: 0 0 16px; color: #bbb; }
form { display: flex; gap: 10px; }
input, button { min-height: 48px; border: 0; border-radius: 10px; font-size: 18px; }
input { width: min(520px, 60vw); padding: 0 14px; background: #303030; color: white; }
button { padding: 0 28px; background: #e82127; color: white; font-weight: 700; cursor: pointer; }
.connected #panel { opacity: 0; pointer-events: none; transition: opacity .4s; }
.connected #panel:hover { opacity: 1; pointer-events: auto; }