:root{font-size:calc(10px + 1vmin);--primary: hsl(260, 100%, 60%);--primary-2: hsl(220, 100%, 60%);--softGrey: #9a97a8;--softTint: rgba(0, 0, 0, .2);--bounce: .3s cubic-bezier(.3, -.1, .5, 1.4);--ease: .2s cubic-bezier(.3, .1, .3, 1)}*,*:before,*:after{margin:0;padding:0;color:inherit;list-style-type:none;box-sizing:border-box;font-family:sans-serif}body{min-height:100vh;display:grid;overflow:hidden;place-items:center;color:var(--softGrey);background-image:url(../../../assets/client/bg.png);background-size:cover;background-position:center}input[type=checkbox]{position:absolute;opacity:.001}form{--size: 3rem;--space: 1rem;padding-left:var(--space);position:relative;display:flex;overflow:hidden;border-radius:calc(var(--size) / 4);box-shadow:0 1em 2em var(--softTint);transition:var(--bounce)}form:focus-within{transform:scale(.94);box-shadow:0 1em 1em var(--softTint)}form .number{-moz-appearance:none;appearance:none;-webkit-appearance:none;height:100%;width:var(--size);height:calc(var(--size) * 1.4);font-size:calc(var(--size) * .7);text-align:center;border:.12em solid var(--softTint);border-radius:calc(var(--size) * .2);outline:none;margin:var(--space);margin-left:0;transition:var(--ease)}form .number::-webkit-outer-spin-button,form .number::-webkit-inner-spin-button{display:none}form .number:not(:-moz-placeholder-shown){border-color:var(--primary)}form .number:not(:placeholder-shown){border-color:var(--primary)}form .submit{-moz-appearance:none;appearance:none;-webkit-appearance:none;border:none;outline:none;display:grid;place-items:center;width:calc(var(--size) + var(--space) * 2);padding:1em;cursor:pointer;background-color:var(--softTint);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3Cpath fill='white' d='M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z'/%3E%3C/svg%3E");background-position:50% 50%;background-size:30%;background-repeat:no-repeat;transition:var(--ease);animation:tension .36s cubic-bezier(.2,.4,.5,1) paused alternate infinite}form .submit:focus{background-color:var(--primary);animation-play-state:running}form .indicator{--i: 0;position:absolute;bottom:0;width:var(--size);height:.5em;border-radius:.5em .5em 0 0;background:#3c884d;transform:translate(calc((var(--size) + var(--space)) * (var(--i) - 1)));transition:var(--bounce)}.submit:focus~.indicator{--i: 9}#n1:focus~.indicator{--i: 1}#n2:focus~.indicator{--i: 2}#n3:focus~.indicator{--i: 3}#n4:focus~.indicator{--i: 4}#n5:focus~.indicator{--i: 5}#n6:focus~.indicator{--i: 6}#submitted:checked~form{background:var(--primary);transform:translate(100vw);transition:var(--ease),transform var(--ease) .3s}#submitted:checked~form input,#submitted:checked~form .indicator{width:0;opacity:0;margin-right:0;transform:scaleX(0)}#submitted:checked~form .submit{background-color:var(--primary);color:#fff}@keyframes tension{to{background-position-x:60%}}