.mqbd-dots { position: relative; }
.mqbd-bin { cursor: pointer; outline: none; }
.mqbd-bin-hit { fill: transparent; }
.mqbd-dot { transition: opacity .18s ease; }
.mqbd-dots.is-active .mqbd-dot { opacity: .28; }
.mqbd-dots.is-active .mqbd-bin.is-on .mqbd-dot { opacity: 1; }
.mqbd-bin.is-on .mqbd-bin-hit { fill: rgba(201, 168, 122, .14); }
.mqbd-bin:focus-visible .mqbd-bin-hit { stroke: #5b3a22; stroke-width: 1; }
.mqbd-tip {
  position: absolute; z-index: 2; pointer-events: none;
  transform: translate(-50%, calc(-100% - 10px));
  background: #fbf8f2; color: #3c2a12;
  border: 1px solid rgba(91, 58, 34, .22); border-radius: 12px;
  box-shadow: 0 10px 24px rgba(60, 42, 18, .14);
  padding: 10px 14px; min-width: 190px; max-width: 260px;
  font: 400 .8rem/1.45 'Manrope', sans-serif;
}
.mqbd-tip[hidden] { display: none; }
.mqbd-tip-range { display: block; font: 500 1.05rem/1.2 'Cormorant Garamond', serif; margin-bottom: 4px; }
.mqbd-tip-n { display: block; font-weight: 600; }
.mqbd-tip-share { display: block; color: rgba(60, 42, 18, .72); margin-top: 2px; }
.mqbd-tip-years { display: block; margin-top: 8px; padding-top: 7px; border-top: 1px solid rgba(91, 58, 34, .14); }
.mqbd-tip-years-title { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #9a7b3c; margin-bottom: 2px; }
.mqbd-tip-year { display: block; }
@media (prefers-reduced-motion: reduce) { .mqbd-dot { transition: none; } }