*{box-sizing:border-box}

html,body{
margin:0;
width:100%;
height:100%;
overflow:hidden;
background:#000
}

body{
display:flex;
justify-content:center;
align-items:center
}

#glass{
position:fixed;
inset:0;
background:#000
}

video{
display:none
}

canvas{
width:100%;
height:100%;
display:block
}

button{
position:fixed;
z-index:10;
border:0
}

#start{
left:50%;
bottom:110px;
transform:translateX(-50%);
padding:16px 32px;
border-radius:32px;
background:#222;
color:#fff;
font-size:18px
}

#capture{
display:block;
left:50%;
bottom:35px;
transform:translateX(-50%);
width:72px;
height:72px;
border-radius:50%;
background:#fff;
box-shadow:0 0 0 5px rgba(255,255,255,.3);
font-size:0
}

#capture:active{
transform:translateX(-50%) scale(.9)
}

#capture[hidden]{
display:none
}

#start[hidden]{
display:none
}