#reader{border:0px solid #ccc}.warn{color:orange}.succ{color:green}.fail{color:red}.link{background-color:transparent;color:rgb(var(--v-theme-success));border:1px solid rgb(var(--v-theme-success));padding:5px 10px;text-align:center;text-decoration:none;display:inline-block;border-radius:5px}.link:hover,.link:active{background-color:rgb(var(--v-theme-success));color:#fff}.link-icon{color:rgb(var(--v-theme-success))}.link .v-icon{vertical-align:inherit}.link:hover .link-icon{color:#fff}.link-text{margin-left:4px}.scanner-wrapper{display:flex;justify-content:center;align-items:flex-start;width:100%;height:50vh}.scanner-container{width:80vw;max-width:400px;height:auto;aspect-ratio:1;position:relative;overflow:hidden}.loading-indicator{font-weight:700;font-size:2rem;text-align:center}.qr-scanner{background-image:linear-gradient(0deg,transparent 24%,rgba(32,255,77,.1) 25%,rgba(32,255,77,.1) 26%,transparent 27%,transparent 74%,rgba(32,255,77,.1) 75%,rgba(32,255,77,.1) 76%,transparent 77%,transparent),linear-gradient(90deg,transparent 24%,rgba(32,255,77,.1) 25%,rgba(32,255,77,.1) 26%,transparent 27%,transparent 74%,rgba(32,255,77,.1) 75%,rgba(32,255,77,.1) 76%,transparent 77%,transparent);background-size:3rem 3rem;background-position:-1rem -1rem}.qr-scanner .box{width:100%;height:100%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);overflow:hidden;border:.1rem solid rgba(0,255,51,.2)}.qr-scanner .line{height:100%;width:100%;background:linear-gradient(180deg,#0f30 43%,#0f3 211%);border-bottom:3px solid #00ff33;transform:translateY(-100%);animation:radar-beam 2s infinite alternate;animation-timing-function:cubic-bezier(.53,0,.43,.99)}.qr-scanner .box:after,.qr-scanner .box:before,.qr-scanner .angle:after,.qr-scanner .angle:before{content:"";display:block;position:absolute;width:3vw;height:3vw;border:.2rem solid transparent}.qr-scanner .box:after,.qr-scanner .box:before{top:0;border-top-color:#0f3}.qr-scanner .angle:after,.qr-scanner .angle:before{bottom:0;border-bottom-color:#0f3}.qr-scanner .box:before,.qr-scanner .angle:before{left:0;border-left-color:#0f3}.qr-scanner .box:after,.qr-scanner .angle:after{right:0;border-right-color:#0f3}@keyframes radar-beam{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes move{0%{transform:translateY(-100%)}to{transform:translateY(400px)}}