*{box-sizing:border-box}:root{--black:#333}body{font-family:Arial,Helvetica,sans-serif}.outer-container{justify-content:center;align-items:center;height:100vh;display:flex}.applause-button{cursor:pointer;color:var(--black);background:0 0;border:none;outline:none;align-items:center;padding:10px;display:flex;position:relative}.applause-button:disabled{cursor:not-allowed}.applause-button .hands{fill:var(--black);margin-right:7px;transition:transform .25s}.applause-button.clicked .hands{fill:#fc3;transform:scale(1.1)}.applause-button.clicked .spark{animation:.25s forwards spark}.spark-container{z-index:1;position:absolute;top:0;left:0}.spark-container.left{transform:rotate(-20deg)}.spark-container.right{transform:rotate(20deg)}.spark-container .spark{opacity:0;visibility:hidden;transform:scale(.4)}@keyframes spark{20%{opacity:1;visibility:visible}70%{opacity:1}to{opacity:0;transform:scale(1.4)}}.applause-button.active .counter{visibility:hidden}.applause-button.interacted.inactive .bubble{animation:.55s forwards bubble}.applause-button.active .bubble,.applause-button.clicked .bubble{opacity:1;visibility:visible}.applause-button.active .bubble{transform:translateY(-40px)}.applause-button.clicked .bubble{transform:translateY(-40px)scale(1.05)}.bubble{opacity:0;visibility:hidden;background:var(--black);color:#fff;border-radius:30px;justify-content:center;align-items:center;width:42px;height:42px;padding:10px;transition:transform .1s;display:flex;position:absolute;left:3px;transform:translateY(-30px)}@keyframes bubble{0%{opacity:1;visibility:visible;transform:translateY(-40px)}60%{opacity:1}to{opacity:0;transform:translateY(-100px)}}