body,html{overflow:hidden}*{margin:0;color:#fff;font-family:Nova Mono,serif;-webkit-user-select:none;-moz-user-select:none;user-select:none}a{text-decoration:none;display:inline-block}body{background-image:url(/img/door.png);background-size:100% 100%;background-position:50%;background-repeat:no-repeat;height:100vh;margin:0}.bottom,.button,.container,.keys,.shadow,.shine{position:absolute}.container{background:#000;width:400px;height:620px;margin:40px auto;border-radius:10px;border:6px solid grey;top:-150px;right:930px;left:-50px;bottom:0;transform:scale(.6);transform-origin:center}.shine{width:300px;height:400px;top:-123px;left:-50px;z-index:2;transform:rotate(35deg)}.display{display:flex;justify-content:center;align-items:center;background:#333;border-radius:5px;width:300px;height:100px;margin:30px auto 0;text-align:center;position:relative}svg{height:24px;max-height:24px;width:139px}.pin-circle{transition:all .1s ease-out;fill:#fff;stroke-width:2px;stroke:#000;outline-offset:-2px;outline-width:2px;&.entered{fill:#000}&.success{fill:green;stroke:green}&.error{fill:red;stroke:red}}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}.shake{animation:shake .3s}.text{top:0;bottom:0;margin:auto;font-size:35px}.text.success{color:#8ac147}.text.failure{color:#c63623}.keys{width:300px;right:0;left:0;margin:40px auto;position:relative;z-index:3}.key{border-radius:5px;padding:5px 24px;font-size:32px;display:inline-block;margin:10px 0}.key:not(:nth-child(3n)){margin-right:42px}.key:hover{cursor:pointer;background:#444}.key:active{color:#000;background:#555}.key.delete{font-size:25px;padding-right:15px;padding-left:15px}.button{width:40px;height:40px;background:#aaa;bottom:22px;right:0;left:0;border-radius:100%;border:3px solid #555;margin:auto;z-index:9999}.shadow{width:40px;height:10px;top:9px;left:3px;border-bottom:20px solid hsla(0,0%,47%,.7);border-radius:0 0 20px 20px;transform:rotate(-40deg)}.bottom{width:100%;height:100px;background:grey;bottom:0}.display.unlocked{padding:12px 14px;box-sizing:border-box;overflow:hidden}.token-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;min-width:0;position:relative;z-index:3}.text.token{font-size:20px;line-height:1.2;letter-spacing:.5px;max-width:100%;overflow-wrap:anywhere;word-break:break-all;-webkit-user-select:text;-moz-user-select:text;user-select:text}.copy-button{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 9px;font-size:13px;line-height:1;letter-spacing:.5px;color:#8ac147;background:rgba(138,193,71,.12);border:1px solid rgba(138,193,71,.45);border-radius:999px;cursor:pointer;transition:background .12s ease-out,border-color .12s ease-out,color .12s ease-out}.copy-button:hover{background:rgba(138,193,71,.22);border-color:#8ac147}.copy-button:active{background:rgba(138,193,71,.35)}.copy-button:focus-visible{outline:2px solid #8ac147;outline-offset:2px}.copy-button.copied{color:#111;background:#8ac147;border-color:#8ac147}.copy-button .copy-label{color:inherit}.copy-icon{width:16px;height:16px;max-height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}@media (max-width:320px){.container{transform:translate(-50%,-50%) scale(.8)}}