.mbv, .mbv * { box-sizing: border-box; }
.mbv { width: 100%; }

.mbv-stage {
  --mbv-bg-a: #ffffff;
  --mbv-bg-b: #e3e6df;
  --mbv-ring: #97dc00;
  --mbv-hl: var(--mbv-ring);
  --mbv-marker: 30px;
  --mbv-b: 30px;
  --mbv-marker-bg: #ffffff;
  --mbv-num: #12171d;
  --mbv-tip-bg: #161b21;
  --mbv-tip-text: #ffffff;
  --mbv-btn-bg: #ffffff;
  --mbv-btn-text: #161b21;
  --mbv-btn-border: #d5d9d0;
  --mbv-btn-active-bg: #161b21;
  --mbv-btn-active-text: #ffffff;

  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 38%, var(--mbv-bg-a), var(--mbv-bg-b));
  font-family: inherit;
  touch-action: none;
}

.mbv-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.mbv-gl:active { cursor: grabbing; }

.mbv-leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.mbv-leaders line { stroke: var(--mbv-ring); stroke-width: 2; stroke-linecap: round; transition: opacity .2s; }
.mbv-leaders circle { fill: var(--mbv-ring); stroke: #fff; stroke-width: 1.5; transition: opacity .2s; }
.mbv-leaders .mbv-occluded { opacity: 0.2; }

.mbv-badges { position: absolute; inset: 0; pointer-events: none; }
.mbv-stage.mbv-nocallouts .mbv-badge:not(.mbv-active),
.mbv-stage.mbv-nocallouts .mbv-leaders line:not(.mbv-active),
.mbv-stage.mbv-nocallouts .mbv-leaders circle:not(.mbv-active) { display: none; }

.mbv .mbv-badge {
  position: absolute; left: 0; top: 0;
  width: var(--mbv-b); height: var(--mbv-b);
  min-width: 0; min-height: 0; margin: 0; padding: 0;
  border-radius: 50%;
  border: 3px solid var(--mbv-ring);
  background: var(--mbv-marker-bg);
  color: var(--mbv-num);
  font-family: inherit;
  font-weight: 700;
  font-size: calc(var(--mbv-b) * 0.46);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  display: grid; place-items: center;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .28);
  transition: opacity .2s, box-shadow .15s;
  will-change: transform;
}
.mbv .mbv-badge:hover,
.mbv .mbv-badge:focus-visible,
.mbv .mbv-badge.mbv-open {
  background: var(--mbv-marker-bg);
  color: var(--mbv-num);
  border-color: var(--mbv-ring);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--mbv-ring) 40%, transparent), 0 1px 5px rgba(0, 0, 0, .28);
  outline: none;
  z-index: 3;
}
.mbv .mbv-badge:focus-visible { outline: 2px solid var(--mbv-tip-bg); outline-offset: 3px; }
.mbv .mbv-badge.mbv-occluded { opacity: 0.25; }
.mbv-num { font-variant-numeric: tabular-nums; }
.mbv-tip {
  position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  background: var(--mbv-tip-bg); color: var(--mbv-tip-text);
  font-family: inherit; font-weight: 500; font-size: 12px; line-height: 1; letter-spacing: 0.02em; white-space: nowrap;
  padding: 6px 9px; border-radius: 4px;
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
/* Part chosen from a page button */
.mbv-stage.mbv-has-active .mbv-badge:not(.mbv-active) { opacity: 0.4; }
.mbv-stage.mbv-has-active .mbv-leaders line:not(.mbv-active),
.mbv-stage.mbv-has-active .mbv-leaders circle:not(.mbv-active) { opacity: 0.25; }
.mbv-leaders line.mbv-active { stroke: var(--mbv-hl); stroke-width: 3; opacity: 1; }
.mbv-leaders circle.mbv-active { fill: var(--mbv-hl); stroke-width: 2; r: 6; opacity: 1; }
.mbv .mbv-badge.mbv-active,
.mbv .mbv-badge.mbv-active.mbv-occluded {
  opacity: 1;
  z-index: 4;
  background: var(--mbv-hl);
  border-color: #fff;
  color: var(--mbv-num);
  box-shadow: 0 0 0 4px var(--mbv-hl), 0 0 0 9px color-mix(in srgb, var(--mbv-hl) 35%, transparent), 0 2px 8px rgba(0, 0, 0, .35);
}
.mbv .mbv-badge.mbv-active::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 3px solid var(--mbv-hl);
  pointer-events: none;
  animation: mbv-pulse 1.6s ease-out infinite;
}
@keyframes mbv-pulse { 0% { transform: scale(0.85); opacity: 0.95; } 100% { transform: scale(2.1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mbv .mbv-badge.mbv-active::after { animation: none; opacity: 0; } }

.mbv-badge:hover .mbv-tip,
.mbv-badge.mbv-active .mbv-tip,
.mbv-badge:focus-visible .mbv-tip,
.mbv-badge.mbv-open .mbv-tip { opacity: 1; }

.mbv-toolbar { position: absolute; top: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; z-index: 5; }
.mbv .mbv-toolbar button {
  margin: 0; min-width: 0;
  font-family: inherit; font-weight: 500; font-size: 12px; line-height: 1; letter-spacing: 0.04em; text-transform: none;
  padding: 9px 12px; border-radius: 4px;
  border: 1px solid var(--mbv-btn-border);
  background: var(--mbv-btn-bg); color: var(--mbv-btn-text);
  box-shadow: none;
  cursor: pointer;
}
.mbv .mbv-toolbar button:hover { border-color: var(--mbv-btn-text); background: var(--mbv-btn-bg); color: var(--mbv-btn-text); }
.mbv .mbv-toolbar button[aria-pressed="true"] { background: var(--mbv-btn-active-bg); color: var(--mbv-btn-active-text); border-color: var(--mbv-btn-active-bg); }
.mbv .mbv-toolbar button:focus-visible { outline: 2px solid var(--mbv-ring); outline-offset: 2px; }

.mbv-hint {
  position: absolute; left: 14px; bottom: 12px; z-index: 5;
  font-size: 12px; line-height: 1.4; color: #566070; letter-spacing: 0.02em; pointer-events: none;
  max-width: calc(100% - 28px);
}

.mbv-fallback { position: absolute; inset: 0; display: none; place-items: center; padding: 24px; text-align: center; color: #566070; }
.mbv-stage.mbv-nogl .mbv-fallback { display: grid; }
.mbv-stage.mbv-nogl .mbv-toolbar,
.mbv-stage.mbv-nogl .mbv-hint,
.mbv-stage.mbv-nogl .mbv-gl { display: none; }

@media (max-width: 560px) {
  .mbv-toolbar { top: 8px; right: 8px; }
  .mbv .mbv-toolbar button { padding: 8px 10px; }
  .mbv-hint { display: none; }
}

/* Page card chosen by clicking a marker (class mbv-card-N on the card) */
.mbv-card-highlight {
  outline: 2px solid var(--mbv-card-hl, #97dc00);
  outline-offset: 0;
  box-shadow: inset 0 0 0 2px var(--mbv-card-hl, #97dc00), 0 0 0 7px color-mix(in srgb, var(--mbv-card-hl, #97dc00) 28%, transparent);
  animation: mbv-card-pop .8s ease-out 1;
}
@keyframes mbv-card-pop {
  0% { box-shadow: inset 0 0 0 2px var(--mbv-card-hl, #97dc00), 0 0 0 0 color-mix(in srgb, var(--mbv-card-hl, #97dc00) 55%, transparent); }
  100% { box-shadow: inset 0 0 0 2px var(--mbv-card-hl, #97dc00), 0 0 0 7px color-mix(in srgb, var(--mbv-card-hl, #97dc00) 28%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .mbv-card-highlight { animation: none; } }