.shaking-test{--animation-state: paused;position:relative;--main-color: #faf6fe;--overlay-varient: color-mix( in srgb, var(--main-color) 83%, #fff 10% );background:linear-gradient(to top,var(--overlay-varient),var(--overlay-varient)),url(/assets/target-size/test.png) #faf6fe;padding:2rem;border-radius:12px;min-height:400px;line-height:initial;font-size:initial;overflow:hidden;display:grid;grid-template-columns:1fr;gap:2rem;justify-items:center;align-items:center;animation:moveBG .8s infinite alternate;animation-play-state:var(--animation-state)}.shaking-test nav{all:revert;margin-inline:-16px;padding-inline:8px;background-color:#f6f6f6}.shaking-test .footer{all:revert}.shaking-test ul{all:revert;list-style:none;padding:0;margin:0;display:flex;max-width:90%;margin-inline:auto;padding-block:.5rem}.shaking-test ul li{flex:1;text-align:center;border-radius:6px;padding-top:2px}.shaking-test ul li:hover{background-color:#dedede}.shaking-test li{all:revert}.shaking-test legend{font-weight:700;font-size:1.15rem;margin-bottom:.5rem}.shaking-test h3{all:revert;margin:0;padding:0;font-size:15px}.shaking-test p{all:revert;margin:0;font-size:13px;--shadow-color: #faf6fe;filter:drop-shadow(0 0 10px var(--shadow-color));text-shadow:0 0 10px var(--shadow-color);text-align:center}.shaking-test>p{font-size:1rem!important}.shaking-test .box{display:flex;flex-direction:column;position:relative;cursor:none;aspect-ratio:9/16;width:200px;background-color:#fff;border:6px solid lightgrey;border-radius:40px;overflow:hidden;padding:1rem 1rem 0;animation:shakingOn .3s alternate-reverse infinite;animation-play-state:var(--animation-state, paused)}.shaking-test .box *{-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:none}.shaking-test .touch{--size: 2rem;--transition-function: cubic-bezier(0, .65, .84, .65);position:absolute;left:0;top:0;width:var(--size, 2rem);height:var(--size, 2rem);background:#000 radial-gradient(circle at center,white,transparent) no-repeat;opacity:.5;border-radius:50%;will-change:transform}.shaking-test .header{display:flex;justify-content:space-between;border-bottom:1px solid lightgrey;padding-bottom:.5rem}.shaking-test .content{flex:auto;display:flex;flex-direction:column;justify-content:center;gap:.25rem;text-align:center}.shaking-test .actions{display:flex;justify-content:center;gap:4px;margin-top:.5rem}.shaking-test .btn{display:inline-flex;padding:3px 5px;border:1px solid transparent;border-radius:6px;font-size:11px}.shaking-test .btn--primary{color:#fff;background-color:#9c3ce7}.shaking-test .btn--secondary{border-color:#d6d6d6;color:#222}.shaking-test input[type=checkbox]{outline:solid 1px}.shaking-test input[type=checkbox]:checked+label{color:#9c3ce7;font-weight:700;-webkit-user-select:none;-moz-user-select:none;user-select:none}.shaking-test input[type=checkbox]:checked+label:before{background-color:#9c3ce7;background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.75 12.75L10 15.25L16.25 8.75' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E%0A");background-position:center;background-repeat:no-repeat;border-color:#9c3ce7}.shaking-test input[type=checkbox]:focus+label:before{border-color:#9c3ce7}.shaking-test label{display:flex;align-items:center;gap:.5rem;cursor:pointer}.shaking-test label:before{content:"";border-radius:5px;display:inline-flex;width:1.125rem;height:1.125rem;border:2px solid rgba(0,0,0,.39);background:#fff}.shaking-test .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.shaking-test .flow>*+*{margin-top:.65rem}.shaking-test .info{display:flex;flex-direction:column;gap:1rem}.shaking-test .info>div{display:flex;gap:1rem;justify-content:center}.shaking-test .info .action{display:flex;justify-content:center}.shaking-test .info p{font-size:14px;max-width:65ch;text-align:center}.shaking-test .audioBtn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-bottom-right-radius:70px;position:absolute;left:0;top:0;--size: 3.5rem;width:var(--size);height:var(--size);background-color:#9c3ce7;padding-right:10px;padding-bottom:10px;cursor:pointer}.shaking-test .audioBtn svg{color:#fff;fill:#fff}@keyframes shakingOn{to{transform:rotate(.5deg) translate(-2px) translateY(2px)}}@keyframes moveBG{to{background-position-x:15px}}