.musicControl{position:relative;width:40px;height:40px;border:none;border-radius:50%;background:hsla(0,0%,100%,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;margin-right:1rem}.musicControl:hover{background:hsla(0,0%,100%,.2);transform:scale(1.05);box-shadow:0 0 20px rgba(var(--primary-color-rgb),.3)}.musicControl:disabled{opacity:.6;cursor:not-allowed}.musicControl:disabled:hover{transform:none;box-shadow:none}.musicControl--loading .musicControl__icon{animation:pulse 1.5s ease-in-out infinite}.musicControl--needsInteraction{animation:attractAttention 2s ease-in-out infinite;border:2px solid hsla(0,0%,100%,.3)}.musicControl--needsInteraction:hover{border-color:hsla(0,0%,100%,.5)}.musicControl--needsInteraction .musicControl__wave{animation:pulseWave 1.5s ease-in-out infinite}.musicControl__icon{width:20px;height:20px;position:relative}.musicControl__icon,.musicControl__loading{display:flex;align-items:center;justify-content:center}.musicControl__loading{gap:2px}.musicControl__loadingDot{width:3px;height:3px;background:var(--white);border-radius:50%;animation:loadingDots 1.4s ease-in-out infinite both}.musicControl__loadingDot:first-child{animation-delay:-.32s}.musicControl__loadingDot:nth-child(2){animation-delay:-.16s}.musicControl__loadingDot:nth-child(3){animation-delay:0s}.musicControl__waves{display:flex;gap:2px;align-items:center;justify-content:center;height:100%}.musicControl__wave{width:2px;height:4px;background:var(--white);border-radius:1px}.musicControl__wave:first-child{animation:wave1 1.1s ease-in-out infinite;animation-delay:0s}.musicControl__wave:nth-child(2){animation:wave2 1.4s ease-in-out infinite;animation-delay:.2s}.musicControl__wave:nth-child(3){animation:wave3 1.3s ease-in-out infinite;animation-delay:.7s}.musicControl__wave:nth-child(4){animation:wave4 1.2s ease-in-out infinite;animation-delay:.4s}.musicControl--playing .musicControl__wave:first-child{animation:wave1 1.1s ease-in-out infinite;animation-delay:0s}.musicControl--playing .musicControl__wave:nth-child(2){animation:wave2 1.4s ease-in-out infinite;animation-delay:.2s}.musicControl--playing .musicControl__wave:nth-child(3){animation:wave3 1.3s ease-in-out infinite;animation-delay:.7s}.musicControl--playing .musicControl__wave:nth-child(4){animation:wave4 1.2s ease-in-out infinite;animation-delay:.4s}.musicControl:not(.musicControl--playing) .musicControl__wave{animation:none;height:4px;opacity:.5}@keyframes loadingDots{0%,80%,to{transform:scale(0);opacity:.5}40%{transform:scale(1);opacity:1}}@keyframes wave1{0%,to{height:4px;opacity:.6}30%{height:10px;opacity:1}70%{height:14px;opacity:.8}}@keyframes wave2{0%,to{height:4px;opacity:.5}25%{height:8px;opacity:.7}60%{height:12px;opacity:1}85%{height:6px;opacity:.8}}@keyframes wave3{0%,to{height:4px;opacity:.4}40%{height:16px;opacity:1}75%{height:7px;opacity:.6}}@keyframes wave4{0%,to{height:4px;opacity:.5}20%{height:11px;opacity:.9}50%{height:5px;opacity:.7}80%{height:13px;opacity:1}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes attractAttention{0%,to{transform:scale(1);box-shadow:0 0 0 0 hsla(0,0%,100%,.4)}50%{transform:scale(1.02);box-shadow:0 0 0 8px hsla(0,0%,100%,.1)}}@keyframes pulseWave{0%,to{opacity:.3;transform:scaleY(1)}50%{opacity:.8;transform:scaleY(1.2)}}@media(max-width:768px){.musicControl{width:24px;height:24px;margin-right:1.5rem}.musicControl__icon{width:16px;height:16px}.musicControl__wave{width:1px;height:2px}.musicControl--playing .musicControl__wave:first-child{animation:waveSmall1 1.1s ease-in-out infinite;animation-delay:0s}.musicControl--playing .musicControl__wave:nth-child(2){animation:waveSmall2 1.4s ease-in-out infinite;animation-delay:.2s}.musicControl--playing .musicControl__wave:nth-child(3){animation:waveSmall3 1.3s ease-in-out infinite;animation-delay:.7s}.musicControl--playing .musicControl__wave:nth-child(4){animation:waveSmall4 1.2s ease-in-out infinite;animation-delay:.4s}}@keyframes waveSmall1{0%,to{height:3px;opacity:.6}30%{height:8px;opacity:1}70%{height:11px;opacity:.8}}@keyframes waveSmall2{0%,to{height:3px;opacity:.5}25%{height:6px;opacity:.7}60%{height:9px;opacity:1}85%{height:5px;opacity:.8}}@keyframes waveSmall3{0%,to{height:3px;opacity:.4}40%{height:12px;opacity:1}75%{height:5px;opacity:.6}}@keyframes waveSmall4{0%,to{height:3px;opacity:.5}20%{height:8px;opacity:.9}50%{height:4px;opacity:.7}80%{height:10px;opacity:1}}.navbar{position:fixed;top:0;left:0;right:0;z-index:990;display:flex;justify-content:space-between;align-items:center;padding:.85rem var(--app-side-safe-area);height:var(--navbar-height);width:100%;background:rgba(0,0,0,0);border-bottom:2px solid hsla(0,0%,100%,.08);transition:background-color .6s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.navbar .navbarLogo{height:100%;width:auto;object-fit:contain}.navbar .navbarCTA{display:flex;align-items:center;justify-content:center}