.play-button__icon{width:0;height:0;border-top:solid rgba(0,0,0,0);border-bottom:solid rgba(0,0,0,0);border-left:solid var(--background);position:absolute}.play-button__notes-animation{position:relative}.play-button__notes-animation:after,.play-button__notes-animation:before{content:"";width:20px;height:20px;position:absolute;bottom:calc(100% + 15px);left:calc(50% - 10px);transform:scale(.5);background-image:url(/images/note_1.png);background-position:50%;background-size:contain;background-repeat:no-repeat;z-index:9;opacity:0}.play-button__notes-animation:before{animation:ClickNoteB 1s}.play-button__notes-animation:after{background-image:url(/images/note_2.png);animation:ClickNoteA 1s}.play-button__loader{width:50%;margin:auto;padding:4px;aspect-ratio:1;border-radius:50%;background:var(--background);--_m:conic-gradient(#0000 10%,#000),linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;mask-composite:subtract;animation:l3 1s linear infinite}@keyframes l3{to{transform:rotate(1turn)}}.play-button__element.pressed{animation:PlayButtonPress .4s}@keyframes PlayButtonPress{0%{transform:scale(1)}40%{transform:scale(.7)}80%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes ClickNoteA{0%{opacity:0;bottom:calc(100% + 14px)}20%{opacity:1}50%{left:50%;transform:scale(1)}80%{opacity:1}to{left:calc(50% - 3px);bottom:calc(100% + 36px);opacity:0;transform:scale(0)}}@keyframes ClickNoteB{20%{opacity:0;left:0;bottom:calc(100% + 12px)}30%{opacity:1}50%{transform:scale(1)}80%{opacity:1}to{left:-5px;bottom:calc(100% + 30px);opacity:0;transform:scale(0)}}