.audio-map{margin:0 auto;max-width:1200px;position:relative;width:100%}.audio-map__image{display:block;height:auto;width:100%}.audio-bubble{background:transparent;border:none;border-radius:50%;cursor:pointer;height:80px;padding:0;position:absolute;transform:translate(-50%,-50%);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;width:80px}.audio-bubble--small{height:56px;width:56px}.audio-bubble--large{height:104px;width:104px}@media (hover:hover) and (pointer:fine){.audio-bubble:hover{box-shadow:0 0 14px hsla(0,0%,100%,.8);transform:translate(-50%,-50%) scale(1.07)}}.audio-bubble:focus-visible{outline:2px solid hsla(0,0%,100%,.9);outline-offset:4px}.audio-bubble--playing{filter:brightness(1.05)}.audio-bubble--loading .audio-bubble__bg{opacity:.7}.audio-bubble__svg{display:block;height:100%;width:100%}.audio-bubble__bg{fill:hsla(0,0%,100%,.4);stroke:hsla(0,0%,100%,.9);stroke-width:2;transition:opacity .3s ease}.audio-bubble__progress{fill:transparent;stroke:#ff6a6a;stroke-width:3;stroke-linecap:round;stroke-dasharray:0 999;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dasharray .3s ease,stroke-dashoffset .1s linear}.audio-bubble--loading .audio-bubble__progress{stroke-dasharray:30 70;animation:spinner 1s linear infinite}@keyframes spinner{0%{transform:rotate(-90deg);transform-origin:50% 50%}to{transform:rotate(270deg);transform-origin:50% 50%}}:root{--audio-bubble-accent:#ff6a6a}.audio-bubble__progress{stroke:var(--audio-bubble-accent,#ff6a6a)}@media (max-width:768px){.audio-bubble{height:64px;width:64px}.audio-bubble--small{height:48px;width:48px}.audio-bubble--large{height:88px;width:88px}}.audio-bubble--floating{background:rgba(0,0,0,.95);border-radius:16px;bottom:2rem;bottom:calc(2rem + env(safe-area-inset-bottom));box-shadow:0 8px 32px rgba(0,0,0,.4);height:auto;left:50%;opacity:0;padding:0;position:fixed;transform:translateX(-50%) translateY(100px);transition:transform .3s ease,opacity .3s ease;width:auto;z-index:9000}.audio-bubble--floating.audio-bubble--visible{opacity:1;transform:translateX(-50%) translateY(0)}.audio-bubble--floating.audio-bubble--closing{opacity:0;transform:translateX(-50%) translateY(20px)}.audio-bubble--floating .audio-bubble__content{align-items:center;border-bottom:1px solid hsla(0,0%,100%,.1);display:flex;gap:1rem;justify-content:space-between;padding:.75rem 1rem}.audio-bubble--floating .audio-bubble__info{flex:1;min-width:0}.audio-bubble--floating .audio-bubble__title{color:#fff;display:block;font-size:14px;font-weight:500;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.audio-bubble--floating .audio-bubble__close{align-items:center;background:hsla(0,0%,100%,.1);border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;flex-shrink:0;font-size:20px;height:32px;justify-content:center;line-height:1;transition:background .2s ease;width:32px}.audio-bubble--floating .audio-bubble__close:hover{background:hsla(0,0%,100%,.2)}.audio-bubble--floating .audio-bubble__controls{align-items:center;display:flex;gap:.75rem;padding:.75rem 1rem}.audio-bubble--floating .audio-bubble__play-pause{align-items:center;background:hsla(0,0%,100%,.15);border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;flex-shrink:0;height:36px;justify-content:center;transition:background .2s ease;width:36px}.audio-bubble--floating .audio-bubble__play-pause:hover{background:hsla(0,0%,100%,.25)}.audio-bubble--floating .audio-bubble__icon{height:20px;width:20px}.audio-bubble--floating .audio-bubble__progress-bar{background:hsla(0,0%,100%,.2);border-radius:3px;cursor:pointer;flex:1;height:6px;min-width:120px;overflow:hidden}.audio-bubble--floating .audio-bubble__progress-fill{background:var(--audio-bubble-accent,#ff6a6a);border-radius:3px;height:100%;transition:width .1s linear;width:0}@media (max-width:768px){.audio-bubble--floating{bottom:calc(1rem + env(safe-area-inset-bottom));left:1rem;right:1rem;transform:translateY(100px);width:auto}.audio-bubble--floating.audio-bubble--visible{transform:translateY(0)}.audio-bubble--floating.audio-bubble--closing{transform:translateY(20px)}.audio-bubble--floating .audio-bubble__title{max-width:150px}.audio-bubble--floating .audio-bubble__progress-bar{min-width:80px}}
/*# sourceMappingURL=audio-bubbles.css.map */