.vue-pincode{--pc-color-button: #010101;--pc-color-button-pressed: #474747;--pc-color-button-bg: #f6f6f6;--pc-color-button-bg-pressed: #eaeaea;--pc-color-field-normal: #234567;--pc-color-field-success: #42b983;--pc-color-field-error: #eb0c0c;--pc-custom-button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='%23000' fill-rule='nonzero'%3E%3Cpath d='M4.1 22v-9c0-5 3.9-8.9 9-8.9h8.8A2 2 0 1 0 22 0H13C5.7 0 0 5.7 0 13v9a2 2 0 1 0 4.1 0ZM75.9 22v-9c0-5-3.9-8.9-9-8.9h-8.8A2 2 0 1 1 58 0H67c7.3 0 13 5.7 13 13v9a2 2 0 1 1-4.1 0ZM4.1 58v9c0 5 3.9 8.9 9 8.9h8.8a2 2 0 1 1 0 4.1H13C5.7 80 0 74.3 0 67v-9a2 2 0 1 1 4.1 0ZM75.9 58v9c0 5-3.9 8.9-9 8.9h-8.8a2 2 0 1 0 0 4.1H67c7.3 0 13-5.7 13-13v-9a2 2 0 1 0-4.1 0ZM21.8 30.2V36c0 1.2.8 2.2 2 2.2 1 0 2-1 2-2.2v-5.7c0-1.2-1-2.1-2-2.1-1.2 0-2 1-2 2.1ZM54.7 30.2V36c0 1.2 1 2.2 2 2.2 1.1 0 2-1 2-2.2v-5.7c0-1.2-.9-2.1-2-2.1-1 0-2 1-2 2.1ZM26 59a20 20 0 0 0 14 5.6A20 20 0 0 0 54 59a2.1 2.1 0 0 0-2.8-3.1c-3.1 3-6.8 4.4-11.2 4.4-4.4 0-8-1.5-11.2-4.4a2.1 2.1 0 0 0-2.9 3ZM40 30.2v14.7c0 1-.5 1.4-1.4 1.4h-1.4a2.1 2.1 0 1 0 0 4.2h1.4c3.3 0 5.6-2.3 5.6-5.6V30.2a2.1 2.1 0 1 0-4.2 0Z'/%3E%3C/g%3E%3C/svg%3E");padding:1rem}.vue-pincode .vue-pincode-fields{display:flex;justify-content:space-between;align-items:center;max-width:200px;padding:0 20px;margin:20px auto 50px}.vue-pincode .vue-pincode-fields span{height:.875rem;width:.875rem;box-shadow:inset 0 0 0 2px var(--pc-color-field-normal);background-color:transparent;border-radius:100%;position:relative;display:inline-block;text-align:center;transition:box-shadow .2s linear}.vue-pincode .vue-pincode-fields span.active{animation:scale .3s ease-out 1;box-shadow:inset 0 0 0 7px var(--pc-color-field-normal)}.vue-pincode .vue-pincode-fields.is-miss{animation:miss .8s ease-out 1}.vue-pincode .vue-pincode-fields.is-success{animation:success 1s ease 1}.vue-pincode .vue-pincode-fields.is-success span{box-shadow:inset 0 0 0 7px var(--pc-color-field-success)}.vue-pincode .vue-pincode-numbers{display:grid;grid-template-columns:1fr 1fr 1fr;place-items:center center;gap:1rem 1rem}.vue-pincode .vue-pincode-numbers button{display:flex;justify-content:center;align-items:center;width:4.5rem;height:4.5rem;border-radius:50%;color:var(--pc-color-button);background-color:var(--pc-color-button-bg);-webkit-user-select:none;user-select:none;font-size:1.5rem;outline:none;cursor:pointer;border:none;transition:all .125s ease-in}.vue-pincode .vue-pincode-numbers button:active{background-color:var(--pc-color-button-bg-pressed);color:var(--pc-color-button-pressed)}.vue-pincode .vue-pincode-numbers button.is-pressed{background-color:var(--pc-color-button-bg-pressed);color:var(--pc-color-button-pressed);transition:background-color .05s}.vue-pincode .vue-pincode-numbers button span{opacity:1;transition:all .2s linear}.vue-pincode .vue-pincode-numbers button span.is-custom{background:transparent var(--pc-custom-button-icon) no-repeat center;width:2rem;height:100%;background-size:contain}.vue-pincode .vue-pincode-undo:active svg{transform:rotate(-135deg)}.vue-pincode .vue-pincode-undo span{transform:translateY(3px)}.vue-pincode .vue-pincode-undo svg{width:1.75rem;height:1.75rem;transform:rotate(45deg);transition:transform .15s cubic-bezier(.85,0,.15,1);fill:var(--pc-color-button)}.vue-pincode.is-success .vue-pincode-numbers button{box-shadow:0 0 #bbcfda,0 0 #fff,inset 0 0 #d1d9e659,inset 0 0 #ffffff4d;background-color:var(--pc-color-button-bg);transform:translateY(2px);color:#36485e52}.vue-pincode.is-success .vue-pincode-numbers button span{opacity:.4}.vue-pincode.is-success .vue-pincode-numbers button span.is-custom{opacity:.1}.vue-pincode.is-success .vue-pincode-undo svg{fill:#36485e52}.vue-pincode.is-error{color:var(--pc-color-field-error)}.vue-pincode.is-error .vue-pincode-fields span{box-shadow:inset 0 0 0 7px var(--pc-color-field-error)!important}@keyframes scale{0%{transform:scale(1)}50%{transform:scale(1.5)}to{transform:scale(1)}}@keyframes success{0%{transform:scale(1);transform:translate(0)}30%{transform:scale(1.05);transform:translateY(-5px)}to{transform:scale(1);transform:translate(0)}}@keyframes miss{0%{transform:translate(0)}10%{transform:translate(-25px)}20%{transform:translate(25px)}30%{transform:translate(-20px)}40%{transform:translate(20px)}50%{transform:translate(-10px)}60%{transform:translate(10px)}70%{transform:translate(-5px)}80%{transform:translate(5px)}to{transform:translate(0)}}:root{--color-bg: #fefefe;--color-lightestgray: #f7f7f7;--color-lightgray: #eaeaea;--color-mediumgray: #c1c6c7;--color-gray: #8f989a;--color-text: #414d63;--color-theme: #42b983;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif}html,body,#app{margin-top:2.5rem;background-color:var(--color-bg);color:var(--color-text);text-rendering:optimizelegibility}.container{width:60rem;max-width:96%;margin:0 auto}.container.is-content{width:35rem}a{transition:color .2s ease,border-bottom-color .2s ease;border:none;color:var(--color-theme);font-family:inherit;line-height:inherit;text-decoration:none;cursor:pointer}h1,h2,h4{margin:0;margin-bottom:.5rem;color:inherit;font-style:normal;font-weight:800;letter-spacing:-1px;text-rendering:optimizelegibility}h1{font-size:1.75rem}h2{font-size:1.125rem}section{margin-bottom:1rem}section h1,section h2{text-align:center}button{font-weight:500;font-family:inherit}.version{margin-left:.5rem;font-size:.75rem;font-weight:700;line-height:.75rem}.btn{padding:.5rem 1.25rem;transition:all .2s ease;border:1px solid var(--color-text);border-radius:.25rem;background-color:var(--color-bg);color:var(--color-text);font-size:.875rem;font-weight:500}.btn:hover{border-color:var(--color-theme);background-color:var(--color-lightestgray);color:var(--color-theme);cursor:pointer}.btn:active{background-color:var(--color-theme);color:var(--color-bg)}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem 1rem;align-items:center}.grid.is-1{grid-template-columns:repeat(1,1fr);padding:.5rem 0 0}.grid.is-4{grid-template-columns:repeat(4,1fr);padding:.5rem 0}.grid .item{max-width:100%;overflow:hidden}.grid .item label{display:block;margin-bottom:.25rem;font-size:.875rem}.grid .item input{box-sizing:border-box}.grid .item input[type=text],.grid .item input[type=color],.grid .item input[type=number]{display:block;position:relative;width:100%;min-width:100%;max-width:100%;height:2rem;padding:.125rem .5rem;transition:all .2s ease;border:1px solid var(--color-lightgray);border-radius:.25rem;background-color:var(--color-bg);color:var(--color-gray);font-size:.75rem;line-height:.75rem;cursor:text}.grid .item input[type=text]:hover,.grid .item input[type=color]:hover,.grid .item input[type=number]:hover{border-color:var(--color-mediumgray)}.grid .item input[type=text]:focus,.grid .item input[type=text].focus,.grid .item input[type=color]:focus,.grid .item input[type=color].focus,.grid .item input[type=number]:focus,.grid .item input[type=number].focus{border-color:var(--color-theme);outline:none}.grid .item input[type=text]:disabled,.grid .item input[type=color]:disabled,.grid .item input[type=number]:disabled{opacity:1;background-color:var(--color-lightestgray);cursor:not-allowed}.grid .item input[type=text]:disabled:hover,.grid .item input[type=color]:disabled:hover,.grid .item input[type=number]:disabled:hover{border-color:var(--color-lightgray)}.grid .item input[type=color]{padding:0;border:none;cursor:pointer}nav,footer{width:100%;background-color:var(--color-bg)}nav{position:fixed;z-index:5;top:0;left:0;height:50px;border-bottom:1px solid var(--color-lightgray)}nav .container{display:flex;align-items:center;justify-content:space-between}nav .container>div{display:flex;align-items:center}nav h4{margin:0;font-size:1rem;line-height:50px}nav img{width:24px;height:auto;margin-right:.5rem}nav .nav-item{margin-left:1rem;transition:all .3s ease;color:var(--color-gray);font-size:12px;font-weight:700}nav .nav-item:hover{color:var(--color-theme)}nav .nav-icon{width:20px;height:auto;margin-top:4px;transition:all .3s ease;fill:var(--color-gray)}nav .nav-icon:hover{fill:var(--color-theme)}footer{margin-top:1rem;padding:1rem 0;border-top:1px solid var(--color-lightgray);font-size:.875rem;line-height:1.25;text-align:center}footer a{font-size:.75rem}.head{text-align:center}.head .logo{width:3rem;height:auto}.head .description{margin-bottom:1rem}.demo-section{width:20rem;margin:3rem auto}.actions-section{display:grid;gap:.5rem;grid-template-columns:1fr 1fr}.actions-section h2{grid-column:1/3;margin-bottom:0}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em rgba(100,108,255,.6666666667))}.logo.vue:hover{filter:drop-shadow(0 0 2em rgba(66,184,131,.6666666667))}