*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#080808;color:#fff;font:14px system-ui}#stage{position:fixed;inset:0}#camera,#overlay{position:absolute;width:100%;height:100%;object-fit:cover}#message{position:absolute;inset:45% 1rem auto;text-align:center;text-shadow:0 1px 4px #000}#gear{position:fixed;right:1rem;top:1rem;font-size:22px;background:#171717dd;color:#fff;border:1px solid #777;border-radius:50%;width:44px;height:44px}#settings{position:fixed;right:1rem;top:4.5rem;width:min(300px,calc(100% - 2rem));max-height:calc(100% - 8rem);overflow:auto;padding:1rem;background:#111e;border:1px solid #777;border-radius:8px}label{display:block;margin:0 0 .8rem}input[type=range],select{width:100%}.tip{display:none;color:#ccc;font-size:12px;margin-top:2px}:focus+.tip,label:focus-within>.tip,#gear:focus .tip,#reset:focus .tip{display:block}footer{position:fixed;bottom:.4rem;left:.6rem;font-size:11px;text-shadow:0 1px 3px #000}a{color:inherit}.ui-hidden #gear,.ui-hidden #settings{display:none}#stage.pip{inset:auto 1rem 2.5rem auto;box-shadow:0 2px 18px #000;aspect-ratio:16/9}.pip #camera,.pip #overlay{object-fit:cover}