.beacon-wrapper{width:var(--beacon-size);height:var(--beacon-size);justify-content:center;align-items:center;display:inline-flex;position:relative}.beacon-center{background:var(--beacon-color);border-radius:999px;width:100%;height:100%;box-shadow:0 0 10px #00000040}.beacon-wave{border:2px solid var(--beacon-color);opacity:0;animation:beacon-ripple var(--beacon-duration)linear infinite;border-radius:999px;position:absolute;inset:0;transform:scale(.1)}.wave-1{animation-delay:0s}.wave-2{animation-delay:calc(var(--beacon-duration)/3)}.wave-3{animation-delay:calc(2*var(--beacon-duration)/3)}@keyframes beacon-ripple{0%{opacity:.5;transform:scale(.2)}70%{opacity:.15;transform:scale(16)}to{opacity:0;transform:scale(19)}}
.bubble{--tail-length:var(--tail-length);--tail-width:var(--tail-width);background:linear-gradient(#4ca0f5,#55b5e0);border:0 solid #555;border-radius:14px;padding:6px 10px;display:inline-block;position:relative}.bubble:before{content:"";left:50%;bottom:calc(-1*var(--tail-length) - 2px);border-left:calc(var(--tail-width) + 2px)solid transparent;border-right:calc(var(--tail-width) + 2px)solid transparent;border-top:calc(var(--tail-length) + 2px)solid #55b5e0;width:0;height:0;position:absolute;transform:translate(-50%)}.bubble:after{content:"";left:50%;bottom:calc(-1*var(--tail-length));border-left:var(--tail-width)solid transparent;border-right:var(--tail-width)solid transparent;border-top:var(--tail-length)solid #55b5e0;width:0;height:0;position:absolute;transform:translate(-50%)}.bubble-wrap{width:500px;height:100px;position:relative}.bubble-wrap svg{position:absolute;top:0;left:0}.bubble-text{color:#fff;pointer-events:none;font-family:sans-serif;font-size:18px;line-height:1.3;position:absolute;top:20px;left:30px;right:30px}