body{
margin:0;
background:#050505;
color:#fff;
font-family:Arial,"Microsoft Yahei";
text-align:center
}

.wrap{
padding:35px 15px
}

.logo{
font-size:70px
}

h1{
color:#ff6600;
font-size:38px
}

.camera{
position:relative;
max-width:420px;
margin:25px auto;
border:3px solid #ff6600;
border-radius:25px;
overflow:hidden
}

video{
width:100%;
display:block
}

.frame{
position:absolute;
left:15%;
top:15%;
width:70%;
height:70%;
border:2px solid #ff9900;
border-radius:20px
}

.scan{
position:absolute;
height:3px;
width:100%;
background:#ff6600;
animation:move 2s infinite
}

@keyframes move{
from{top:0}
to{top:100%}
}

button{
background:#ff6600;
border:0;
color:white;
padding:16px 55px;
border-radius:40px;
font-size:20px
}

.progress{
width:80%;
height:10px;
background:#333;
margin:25px auto;
border-radius:20px
}

#bar{
height:100%;
width:0;
background:#ff6600
}

#result{
font-size:24px;
color:#ff9900;
line-height:1.8
}

canvas{
display:none
}