:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:system-ui,sans-serif}*{box-sizing:border-box}body{color:#e7e9ee;background:#0d0f12;margin:0}#app{max-width:1100px;margin:0 auto;padding:24px}.landing{text-align:center;place-content:center;gap:16px;min-height:70vh;display:grid}.landing h1{margin:0;font-size:3rem}button{color:#fff;cursor:pointer;background:#3a7afe;border:0;border-radius:8px;padding:10px 18px;font-size:1rem}button:hover{background:#2f6ae0}input{color:inherit;background:#1a1e24;border:1px solid #333b47;border-radius:8px;padding:10px;font-size:1rem}#join-form{justify-content:center;gap:8px;display:flex}.room>header{border-bottom:1px solid #222;justify-content:space-between;align-items:center;padding-bottom:12px;display:flex}#gate{text-align:center;place-items:center;gap:8px;padding:15vh 0;display:grid}.tiles{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px;padding-top:16px;display:grid}.tile{aspect-ratio:16/9;background:#000;border-radius:10px;position:relative;overflow:hidden}.tile video{object-fit:contain;background:#000;width:100%;height:100%}.tile .controls{background:linear-gradient(#0000,#0009);align-items:center;gap:8px;padding:8px;display:flex;position:absolute;bottom:0;left:0;right:0}.tile .controls .vol{flex:1}.tile .controls button{padding:4px 10px;font-size:.85rem}.tile .gesture{background:#0009;border-radius:0;justify-content:center;align-items:center;font-size:1rem;position:absolute;inset:0}.tile .gesture:not([hidden]){display:flex}code{background:#1a1e24;border-radius:4px;padding:2px 6px}
