.tappy-tap-scene{width:550px;height:530px;isolation:isolate}.tappy-demo-phone{position:absolute;left:250px;top:8px;width:248px;height:512px;padding:4px;border-radius:47px;background:linear-gradient(110deg,#66696e,#b7b9bf 18%,#41444c 38%,#242830 76%,#969aa3);box-shadow:inset 0 0 0 1px #93979f,0 18px 34px -14px #21324d55,0 35px 50px -30px #13223f55;transform:rotate(5deg);z-index:1}.tappy-demo-screen{position:relative;height:100%;overflow:hidden;border:4px solid #070809;border-radius:42px;background:#000;isolation:isolate}.tappy-demo-screen:after{position:absolute;inset:0;content:'';border-radius:38px;pointer-events:none;z-index:4;box-shadow:inset 0 0 0 1px #ffffff20;background:linear-gradient(110deg,#ffffff07,transparent 35%)}.tappy-demo-profile{position:absolute;inset:0;background:#332b60;opacity:1;animation:tappy-profile 4.8s ease-out both}.tappy-demo-profile>img{display:block;width:100%;height:calc(100% - 43px);margin-top:36px;object-fit:cover;object-position:top;max-width:none}.tappy-demo-status{position:absolute;left:21px;right:17px;top:15px;display:flex;justify-content:space-between;align-items:center;font:600 9px/1 -apple-system,BlinkMacSystemFont,sans-serif;color:#fff}.tappy-demo-status>span:last-child{display:block;width:38px;height:10px;font-size:0;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='13' viewBox='0 0 58 13'%3E%3Cg fill='white'%3E%3Crect x='0' y='8' width='2.7' height='4' rx='.65'/%3E%3Crect x='4' y='6' width='2.7' height='6' rx='.65'/%3E%3Crect x='8' y='3.5' width='2.7' height='8.5' rx='.65'/%3E%3Crect x='12' y='1' width='2.7' height='11' rx='.65'/%3E%3Cpath d='M20 4a10 10 0 0 1 14 0l-1.7 1.7a7.5 7.5 0 0 0-10.6 0Zm3 3a5.8 5.8 0 0 1 8 0l-1.7 1.7a3.4 3.4 0 0 0-4.6 0Zm2.9 3a1.6 1.6 0 0 1 2.2 0L27 12Z'/%3E%3Crect x='40' y='3' width='12' height='7' rx='1'/%3E%3C/g%3E%3Crect x='38' y='1' width='16' height='11' rx='2.4' fill='none' stroke='white' stroke-opacity='.6'/%3E%3Cpath d='M56 4v5' stroke='white' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E")}.tappy-demo-island{position:absolute;left:50%;top:10px;transform:translateX(-50%);width:70px;height:20px;border-radius:30px;background:#030304;box-shadow:inset 0 0 0 1px #101217;z-index:5}.tappy-demo-island:after{content:'';position:absolute;right:7px;top:6px;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#344d6c,#080e1d 55%,#010204);box-shadow:inset 0 0 0 1px #172131}.tappy-demo-homebar{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);height:3px;width:80px;border-radius:9px;background:#fff;opacity:.85;z-index:5}.tappy-demo-key{position:absolute;top:100px;width:2px;height:55px;border-radius:4px;background:#8d929a}.tappy-demo-key-left{left:-2px;box-shadow:0 74px 0 #8d929a}.tappy-demo-key-right{right:-2px;top:147px;height:70px}.tappy-tap-scene .tappy-demo-card{position:absolute;left:10px;top:300px;width:245px;height:auto;max-width:none;z-index:3;filter:drop-shadow(0 16px 13px #172d4c2b);transform:rotate(-14deg);animation:tappy-card-tap 4.8s cubic-bezier(.3,0,.2,1) both}.tappy-demo-stick{display:none;position:absolute;left:92px;top:290px;width:115px;height:115px;overflow:hidden;border-radius:30%;filter:drop-shadow(0 12px 10px #172d4c32);z-index:3;transform:rotate(-13deg);animation:tappy-stick-tap 4.8s cubic-bezier(.3,0,.2,1) both}.tappy-demo-stick img{position:absolute;width:493.8%;height:auto;max-width:none;left:-65.7%;top:-339.3%}.tappy-demo-ripple{position:absolute;left:347px;top:-5px;width:70px;height:70px;border:2px solid #8aaaf2;border-radius:50%;z-index:4;opacity:0;animation:tappy-tap-ripple 4.8s ease-out both}.tappy-tap-scene[data-tap-kind=stick] .tappy-demo-card{display:none}.tappy-tap-scene[data-tap-kind=stick] .tappy-demo-stick{display:block}
@keyframes tappy-card-tap{0%,12%{transform:translate(0,0) rotate(-14deg)}30%,38%{transform:translate(122px,-332px) rotate(-8deg)}58%,100%{transform:translate(0,0) rotate(-14deg)}}
@keyframes tappy-stick-tap{0%,12%{transform:translate(0,0) rotate(-13deg)}30%,38%{transform:translate(178px,-315px) rotate(-5deg)}58%,100%{transform:translate(0,0) rotate(-13deg)}}
@keyframes tappy-profile{0%,32%{opacity:0;transform:translateY(5px)}42%,100%{opacity:1;transform:none}}
@keyframes tappy-tap-ripple{0%,29%{opacity:0;transform:scale(.6)}32%{opacity:.8;transform:scale(.65)}43%,100%{opacity:0;transform:scale(1.65)}}
@media(prefers-reduced-motion:reduce){.tappy-tap-scene *{animation:none!important}.tappy-demo-profile{opacity:1;transform:none}.tappy-demo-ripple{display:none}}

.tappy-tap-scene:not([data-tap-started]) *{animation-play-state:paused}
.tappy-tap-scene[data-tap-kind=stick] .tappy-demo-card{display:none!important}.tappy-tap-scene[data-tap-kind=card] .tappy-demo-stick{display:none!important}