:root{color-scheme:dark;font:16px system-ui,sans-serif;background:#111;color:#eee}*{box-sizing:border-box}body{margin:0 auto;max-width:1500px;padding:20px}h1{font-size:1.5rem;margin:0}header p{color:#bbb}form,nav{display:flex;flex-wrap:wrap;gap:12px;align-items:end}label{display:grid;gap:6px}input,button{font:inherit;padding:10px 14px;border:1px solid #777;border-radius:5px;background:#252525;color:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible{outline:3px solid #c0b5ff;outline-offset:2px}#status{min-height:1.5em}main{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:12px;margin-bottom:16px}main[hidden],form[hidden]{display:none}.stage{position:relative;min-height:300px;aspect-ratio:16/9;background:#000;display:grid;place-items:center}#stage{width:100%;height:100%;object-fit:contain}#empty{position:absolute;pointer-events:none}#faces{display:flex;flex-direction:column;gap:8px}.face{margin:0;min-height:80px;background:#252525;overflow:hidden}.face video{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}.face figcaption{padding:5px 8px;overflow-wrap:anywhere}#sounds{display:none}@media(max-width:650px){body{padding:12px}main{grid-template-columns:1fr}.stage{min-height:180px}#faces{flex-direction:row;overflow:auto}.face{flex:0 0 110px}input{max-width:100%}nav button{flex:1 1 42%}}