.aab-wrap{display:flex}
.aab{position:relative;display:inline-flex;flex-direction:row;align-items:center;justify-content:space-between;gap:18px;box-sizing:border-box;min-height:56px;padding:8px 8px 8px 22px;border-radius:14px;background:#1c1c1c;color:#fff;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:all .3s ease}
.aab:focus-visible{outline:2px solid #4d90fe;outline-offset:2px}
.aab-stack{display:grid;align-items:center;flex:1 1 auto;min-width:110px}
.aab-text,.aab-player{grid-area:1/1;transition:opacity .3s ease,transform .3s ease}
.aab-text{font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.aab-player{display:flex;align-items:center;gap:10px;min-width:0;opacity:0;transform:translateX(12px);pointer-events:none}
.aab.is-playing .aab-text{opacity:0;transform:translateX(-12px)}
.aab.is-playing .aab-player{opacity:1;transform:none}
.aab-ptext{font-weight:600;white-space:nowrap}
.aab-time{font-size:13px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.aab-wave{flex:1;min-width:30px;height:20px;display:flex;align-items:center;justify-content:space-between}
.aab-wave i{display:block;width:3px;height:100%;border-radius:3px;background:#fff;transform:scaleY(.2);animation:aab-eq .9s ease-in-out infinite;animation-delay:calc(var(--i) * -.13s);animation-play-state:paused}
.aab-wave i:nth-child(3n){animation-duration:.7s}.aab-wave i:nth-child(4n){animation-duration:1.1s}
.aab.is-playing .aab-wave i{animation-play-state:running}
@keyframes aab-eq{0%,100%{transform:scaleY(.2)}50%{transform:scaleY(1)}}
.aab-bar{flex:1;min-width:30px;height:6px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.3)}
.aab-fill{display:block;height:100%;width:0;border-radius:99px;background:#fff;transition:width .25s linear}
.aab-icon{position:relative;flex:none;display:grid;place-items:center;box-sizing:border-box;width:40px;height:40px;border-radius:50%;border:2px solid #fff;color:#fff;font-size:16px;transition:all .3s ease}
.aab-ic{grid-area:1/1;display:flex;line-height:1;transition:opacity .25s ease,transform .25s ease}
.aab-ic svg{width:1em;height:1em;fill:currentColor}
.aab-ic-pause{opacity:0;transform:scale(.4) rotate(-90deg)}
.aab.is-playing .aab-ic-play{opacity:0;transform:scale(.4) rotate(90deg)}
.aab.is-playing .aab-ic-pause{opacity:1;transform:none}
.aab.is-playing .aab-icon{background:#fff;color:#111;border-color:#fff}
@keyframes aab-k-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@keyframes aab-k-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes aab-k-spin{to{transform:rotate(360deg)}}
@keyframes aab-k-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@keyframes aab-k-heartbeat{0%,70%,100%{transform:scale(1)}14%,42%{transform:scale(1.2)}28%{transform:scale(1)}}
@keyframes aab-k-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes aab-k-wobble{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
@keyframes aab-k-ripple{0%{box-shadow:0 0 0 0 var(--aab-ripple,rgba(255,255,255,.45))}100%{box-shadow:0 0 0 14px transparent}}
.aab-i-pulse:not(.is-playing) .aab-icon,.aab-h-pulse:not(.is-playing):hover .aab-icon,.aab-p-pulse.is-playing .aab-icon{animation:aab-k-pulse var(--aab-dur,1.2s) ease-in-out infinite}
.aab-i-bounce:not(.is-playing) .aab-icon,.aab-h-bounce:not(.is-playing):hover .aab-icon,.aab-p-bounce.is-playing .aab-icon{animation:aab-k-bounce var(--aab-dur,1.2s) ease-in-out infinite}
.aab-i-spin:not(.is-playing) .aab-icon,.aab-h-spin:not(.is-playing):hover .aab-icon,.aab-p-spin.is-playing .aab-icon{animation:aab-k-spin var(--aab-dur,1.2s) linear infinite}
.aab-i-shake:not(.is-playing) .aab-icon,.aab-h-shake:not(.is-playing):hover .aab-icon,.aab-p-shake.is-playing .aab-icon{animation:aab-k-shake var(--aab-dur,1.2s) ease-in-out infinite}
.aab-i-heartbeat:not(.is-playing) .aab-icon,.aab-h-heartbeat:not(.is-playing):hover .aab-icon,.aab-p-heartbeat.is-playing .aab-icon{animation:aab-k-heartbeat var(--aab-dur,1.2s) ease-in-out infinite}
.aab-i-float:not(.is-playing) .aab-icon,.aab-h-float:not(.is-playing):hover .aab-icon,.aab-p-float.is-playing .aab-icon{animation:aab-k-float var(--aab-dur,1.2s) ease-in-out infinite}
.aab-i-wobble:not(.is-playing) .aab-icon,.aab-h-wobble:not(.is-playing):hover .aab-icon,.aab-p-wobble.is-playing .aab-icon{animation:aab-k-wobble var(--aab-dur,1.2s) ease-in-out infinite}
.aab-i-ripple:not(.is-playing) .aab-icon,.aab-h-ripple:not(.is-playing):hover .aab-icon,.aab-p-ripple.is-playing .aab-icon{animation:aab-k-ripple var(--aab-dur,1.2s) ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.aab .aab-icon,.aab-wave i{animation:none!important}}