*{box-sizing:border-box;padding:0;margin:0;font-family:sans-serif}html,body{height:100%}body{padding:16px 32px}body,#container{display:flex;flex-direction:column;justify-content:center;align-items:center}#controls{display:flex;padding:1rem;gap:1rem}#controls>div{text-align:center}h1,h3{text-align:center}h3{margin-top:.5rem}#container{position:relative;width:720px;height:405px;max-width:100%;max-height:100%;border:2px dashed #D1D5DB;border-radius:.75rem;overflow:hidden;margin-top:1rem;background-size:100% 100%;background-position:center;background-repeat:no-repeat}#status{min-height:16px;margin:8px 0}video{width:100%;height:100%}input[type=text]{padding:.25rem .5rem;border:1px solid #D1D5DB;border-radius:.25rem;margin-top:2px}input[type=range]{margin-top:6px}#overlay{position:absolute;top:0;left:0;background-color:#ffffffe6;font-size:1.25rem;border-radius:2px}#overlay:not(:empty){padding:.5rem}