html,
body{
    margin:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#000;
    font-family:Arial,Helvetica,sans-serif;
}

canvas{
    display:block;
}

#crosshair{
    position:fixed;
    left:50%;
    top:50%;
    width:18px;
    height:18px;
    transform:translate(-50%,-50%);
    pointer-events:none;
    z-index:100;
}

#crosshair::before,
#crosshair::after{
    content:"";
    position:absolute;
    background:white;
}

#crosshair::before{
    left:8px;
    top:0;
    width:2px;
    height:18px;
}

#crosshair::after{
    left:0;
    top:8px;
    width:18px;
    height:2px;
}

#tips{
    position:fixed;
    left:20px;
    top:20px;
    color:white;
    background:rgba(0,0,0,.45);
    padding:12px;
    border-radius:8px;
    line-height:1.8;
    z-index:100;
    user-select:none;
}

.locked #tips{
    display:none;
}