:root{color-scheme:dark;font:16px system-ui,sans-serif;background:#10151c;color:#ebf0f6}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;padding:24px}main{width:min(100%,480px);padding:32px;background:#19212c;border:1px solid #334155;border-radius:20px}h1{font-size:26px}p{line-height:1.6;color:#bac7d7}label{display:grid;gap:10px}input,button{font:inherit;border-radius:8px;padding:12px;border:1px solid #526078}input{background:#10151c;color:inherit}button{margin-top:18px;background:#b9ed74;color:#182716;font-weight:650;cursor:pointer}button:disabled{opacity:.5;cursor:wait}.brand{color:#b9ed74;font-weight:700}.notice{border-top:1px solid #334155;margin-top:24px;padding-top:20px;font-size:14px}.state{font-size:22px;color:#b9ed74}.error{color:#ffb6b6}small{display:block;color:#9aaac0;margin-top:16px}
:root{--accent:#b9ed74;--border:#334155;--panel:#19212c}
main.with-media{width:min(100%,960px)}
.guest-media{margin-top:20px;display:grid;gap:14px}
.guest-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.guest-tile{position:relative;margin:0;aspect-ratio:16/9;background:#0b0f15;border:1px solid #334155;border-radius:12px;overflow:hidden}
.guest-tile.self{border-color:#b9ed74}
.guest-tile video{width:100%;height:100%;object-fit:cover;display:block}
.guest-tile video.contain{object-fit:contain}
.guest-tile-off{display:grid;place-items:center;height:100%;color:#9aaac0;font-size:14px}
.guest-tile figcaption{position:absolute;left:8px;bottom:8px;padding:3px 8px;border-radius:6px;background:rgba(10,14,20,.78);font-size:13px}
.guest-controls{display:flex;flex-wrap:wrap;gap:8px}
.guest-controls button{margin-top:0}
.guest-devices{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.guest-devices label{display:flex;flex-direction:column;gap:4px;flex:1 1 180px;min-width:0;font-size:.85rem}
.guest-devices select{width:100%;min-width:0}
button.secondary{background:#243041;color:#ebf0f6;font-weight:550}
button.off{background:#5a2328;color:#ffd9dc;border-color:#8a3a41}
.device-setup button,.device-setup .button{margin-top:0}
.device-setup select{font:inherit;background:#10151c;color:inherit;border:1px solid #526078;border-radius:8px;padding:8px}
@media (max-width:600px){body{padding:10px}main{padding:20px}.guest-controls button{flex:1 1 45%}}