/* Map explorer (js/map/**). Owner: the map module agent.
   Loaded after app.css. Every class is prefixed .mx- so modules never collide; the app.css components (.card, .btn, .seg-toggle,
   .chip, table.data, .m-D/.m-R, .map-tip, .map-legend, .lg-*) and colour variables (--d, --r, --d-fill, --r-fill, --mid, --accent ...) are reused.
   Colours that depend on a margin or probability come from js/core/colors.js, not from CSS. */

/* ---- page frame ------------------------------------------------------------------------------------------------------ */

.mx-root {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  min-height: 540px;
  background: var(--bg);
}
.mx-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px var(--gutter) 8px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.mx-bar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.mx-opt-toggle {
  display: none;
}
.mx-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
}
.mx-crumbs li + li::before {
  content: '›';
  margin-right: 6px;
  color: var(--faint);
}
.mx-crumbs [aria-current='page'] {
  font-weight: 650;
}
.mx-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 16px;
}
.mx-ctl {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  color: var(--muted);
  font-size: 11.5px;
}
.mx-ctl[hidden] {
  display: none;
}
.mx-lab {
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mx-ctl select {
  min-height: 32px;
  max-width: 270px;
}
.mx-controls .seg-toggle button[disabled] {
  opacity: 0.38;
  cursor: not-allowed;
}
.mx-main {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) 400px;
  min-height: 0;
}

/* ---- the map ----------------------------------------------------------------------------------------------------------- */

.mx-map {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, var(--sunken) 0%, var(--bg) 70%);
}
/* the stage and every overlay live here; the attribution is a normal-flow row UNDER it, so it can never cover the legend or the buttons (WCAG 1.4.12 / 2.4.11) */
.mx-stagewrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
.mx-stagehost {
  position: absolute;
  inset: 0;
}
.mx-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  outline-offset: -3px;
  user-select: none;
  -webkit-user-select: none;
}
.mx-stage.is-moving {
  cursor: grabbing;
}
/* WCAG 2.4.7: the stage's own inset outline is painted UNDER the full-size canvas and svg children, so the ring is drawn on an overlay above them (and above the legend/status cards) */
.mx-stagewrap:has(.mx-stage:focus-visible)::after,
.mx-embed-host:has(.mx-stage:focus-visible)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 7;
  border-radius: 2px;
  outline: 3px solid var(--focus);
  outline-offset: -3px;
  pointer-events: none;
}
.mx-touchhint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 16px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 5;
  text-align: center;
  max-width: 80%;
}
.mx-touchhint.is-on {
  opacity: 1;
}
.mx-svg,
.mx-canvas {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
}
.mx-stage.is-precinct .mx-svg {
  pointer-events: none;
}
/* In precinct view the canvas holds the map. The SVG sits above it in the DOM, and at precinct zoom (k of 35-85) its flat
   backdrop (the other states) and base (the other counties of this state) paths are thousands of pixels wide, so depending on
   the county and the viewport one of them paints an opaque fill over the whole canvas and the map looks empty. Nothing in those
   two layers is wanted at that zoom (the county outlines stay), so take them out of rendering. */
.mx-stage.is-precinct .mx-backdrop,
.mx-stage.is-precinct .mx-base {
  display: none;
}
.mx-layer path {
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}
.mx-grp path {
  stroke: var(--bg);
  stroke-width: 0.6px;
  transition: fill 0.3s ease;
}
.mx-fill path {
  cursor: pointer;
}
.mx-flat path {
  fill: var(--panel2) !important;
  stroke: #0d1117;
  stroke-width: 0.5px;
  pointer-events: none;
}
.mx-backdrop.mx-layer path {
  fill: var(--panel2) !important;
}
.mx-outline path {
  fill: none !important;
  stroke: color-mix(in srgb, var(--map-ink) 24%, transparent);
  stroke-width: 0.6px;
  pointer-events: none;
}
.mx-outline.mx-strong path {
  stroke: color-mix(in srgb, var(--map-ink) 50%, transparent);
  stroke-width: 0.9px;
}
.mx-fill path.is-projected {
  stroke: var(--accent);
  stroke-width: 1.5px;
}
.mx-fill path.is-final {
  stroke: var(--accent);
  stroke-width: 2.3px;
}
.mx-stage[data-base='district'] .mx-fill path.is-projected {
  stroke-width: 1px;
}
.mx-stage[data-base='district'] .mx-fill path.is-final {
  stroke-width: 1.6px;
}
.mx-sel {
  fill: none;
  pointer-events: none;
}
.mx-sel-state {
  stroke: color-mix(in srgb, var(--map-ink) 85%, transparent);
  stroke-width: 1.4px;
}
.mx-sel-district,
.mx-sel-county {
  stroke: var(--map-ink);
  stroke-width: 2.5px;
}
.mx-sel-hover {
  stroke: color-mix(in srgb, var(--map-ink) 95%, transparent);
  stroke-width: 1.8px;
}
.mx-sel-focus {
  stroke: var(--focus);
  stroke-width: 3px;
  stroke-dasharray: 6 3;
}
.mx-label {
  fill: #fff;
  font: 650 11px/1 var(--font);
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(8, 11, 15, 0.9); /* a heavier halo: pixel-sampled labels were 4.35-4.7:1 at 0.7 (WCAG 1.4.3) */
  stroke-width: 3.4px;
  stroke-linejoin: round;
  pointer-events: none;
}
.mx-mark > circle {
  fill: color-mix(in srgb, var(--panel) 18%, transparent);
  stroke: var(--accent);
  stroke-width: 2.4px;
}
.mx-badge circle {
  fill: var(--accent-fill);
  stroke: var(--on-gold);
  stroke-width: 1px;
}
.mx-badge text {
  fill: var(--on-gold);
  font: 750 10px var(--font);
  text-anchor: middle;
  pointer-events: none;
}
.mx-mark-key > circle {
  stroke: var(--map-ink);
  stroke-width: 2px;
  fill: color-mix(in srgb, var(--accent-fill) 25%, transparent);
}
.mx-mark-tipc > circle {
  stroke-dasharray: 4 2;
}
.mx-marks {
  pointer-events: none;
}

/* zoom buttons */
.mx-ui {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--line);
}
.mx-ui button {
  width: 36px;
  height: 36px;
  border: 0;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.mx-ui button:hover {
  background: var(--surface-3);
}
/* pan arrows (WCAG 2.5.7): a 2 x 2 block under the zoom buttons, only while zoomed in */
.mx-pan {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
}
.mx-pan[hidden] {
  display: none;
}
.mx-pan button {
  width: 36px;
  height: 30px;
  font-size: 12px;
}

/* legend, status, attribution (overlays) */
.mx-legend {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 3;
  width: min(340px, calc(100% - 80px));
  padding: 8px 11px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  font-size: 12px;
  color: var(--muted);
  pointer-events: auto;
}
.mx-legend .map-legend {
  display: block;
  margin-top: 4px;
}
.mx-legend .lg-bar {
  height: 9px;
}
.mx-legend .lg-scale {
  margin-top: 3px;
}
.mx-lg-title {
  color: var(--text);
  font-weight: 650;
  font-size: 12px;
}
.mx-lg-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 6px;
}
.mx-lg-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mx-lg-none,
.mx-lg-proj {
  display: inline-block;
  width: 20px;
  height: 12px;
  border-radius: 2px;
}
.mx-lg-none {
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.mx-lg-proj {
  background: var(--surface-3);
  border: 2px solid var(--accent);
}
.mx-notebar {
  position: absolute;
  left: 12px;
  top: 10px;
  z-index: 3;
  max-width: min(520px, calc(100% - 90px));
  padding: 5px 10px 5px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  pointer-events: none;
}
.mx-notebar[hidden] {
  display: none;
}
.mx-note-ic {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  border: 1px solid var(--muted);
  border-radius: 50%;
  font-size: 10px;
  font-style: italic;
  line-height: 12px;
  text-align: center;
}
.mx-legend.is-wide {
  width: min(470px, calc(100% - 80px));
}
/* while zoomed in, the 2 x 2 pan block makes the control cluster 75px wide (12px margin + 75px + gap): the legend must stop short of it, or it covers Fit / Move up / Move right (WCAG 2.5.7, 2.4.11) */
.mx-stagewrap:has(.mx-pan:not([hidden])) .mx-legend {
  width: min(340px, calc(100% - 112px));
}
.mx-stagewrap:has(.mx-pan:not([hidden])) .mx-legend.is-wide {
  width: min(470px, calc(100% - 112px));
}
.mx-lg-ratings {
  margin-top: 6px;
  font-size: 10.5px;
}
.mx-lg-ratings li {
  padding-inline: 2px;
}
.mx-status {
  position: absolute;
  left: 50%;
  top: 14px;
  z-index: 4;
  transform: translateX(-50%);
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 95%, transparent);
  font-size: 13px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
}
.mx-status[hidden] {
  display: none;
}
.mx-attrib {
  position: relative;
  flex: 0 0 auto;
  z-index: 3;
  margin: 0;
  padding: 4px 12px;
  border-top: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.mx-attrib .linklike {
  font-size: 11px;
}

/* ---- embeddable map (js/map/embed.js) ---------------------------------------------------------------------------------- */

.mx-embed {
  display: grid;
  gap: 6px;
}
.mx-embed-host {
  position: relative;
  width: 100%;
  min-height: 240px;
  max-height: 560px;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: radial-gradient(ellipse at 50% 40%, var(--sunken) 0%, var(--bg) 70%);
}
.mx-embed-host .mx-ui {
  bottom: 10px;
}
.mx-embed-msg {
  padding: 60px 14px;
}
.mx-embed-legend {
  color: var(--muted);
  font-size: 12px;
}
.mx-embed-legend[hidden] {
  display: none;
}
.mx-embed-legend .map-legend {
  display: block;
  max-width: 340px;
  margin-top: 4px;
}
.mx-embed-legend .lg-bar {
  height: 9px;
}
.mx-embed-legend .lg-scale {
  margin-top: 3px;
}

/* ---- tooltip bodies --------------------------------------------------------------------------------------------------- */

.map-tip .mx-tr {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-variant-numeric: tabular-nums;
}
.map-tip .mx-tr > span:first-child {
  color: var(--muted);
}
.map-tip .mx-sub {
  margin-top: 4px;
  font-weight: 650;
  color: var(--text);
}
.map-tip .mx-cands,
.map-tip .mx-note {
  margin: 1px 0 2px;
  font-size: 11.5px;
}
.map-tip .mx-note {
  color: var(--accent);
}
.mx-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}
.mx-tag-amber {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---- side panel ------------------------------------------------------------------------------------------------------- */

.mx-panel {
  min-height: 0;
  overflow-y: auto;
  padding: 12px var(--gutter) 40px;
  border-left: 1px solid var(--line);
  background: var(--surface);
  overscroll-behavior: contain;
}
.mx-sec {
  margin-bottom: 16px;
}
.mx-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}
.mx-title h2 {
  font-size: 21px;
  font-weight: 750;
}
.mx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.mx-h {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mx-h .muted,
.mx-more {
  font-size: 11px;
  letter-spacing: normal;
  text-transform: none;
  font-weight: 500;
}
.mx-list {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}
.mx-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.mx-row:hover {
  background: var(--surface-3);
}
.mx-row.is-sel {
  border-color: var(--gold);
  background: var(--surface-3);
  box-shadow: inset 3px 0 0 var(--accent);
}
.mx-row-main {
  display: grid;
  min-width: 0;
}
.mx-row-sub {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mx-row-side {
  display: grid;
  flex: none;
  justify-items: end;
  gap: 2px;
  font-size: 13px;
}
.mx-row-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  font-size: 11.5px;
}
.mx-unit {
  color: var(--faint);
  font-size: 11px;
}
.mx-card {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.mx-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.mx-card h3 {
  font-size: 17px;
  font-weight: 700;
}
.mx-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.mx-cands {
  margin: 9px 0 0;
  font-size: 14px;
}
.mx-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.mx-kpi {
  display: grid;
  gap: 1px;
  padding: 7px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}
.mx-kpi-l {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mx-kpi-v {
  font-size: 19px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.mx-kpi-s {
  color: var(--muted);
  font-size: 11.5px;
}
.mx-bench {
  margin-top: 10px;
  padding: 8px 10px;
  border-left: 3px solid var(--accent);
  background: var(--surface-2);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
}
.mx-fine {
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.4;
}
.mx-notes {
  margin-top: 8px;
  font-size: 12.5px;
}
.mx-notes summary {
  color: var(--muted);
  cursor: pointer;
}
.mx-notes p {
  margin-top: 6px;
}
.mx-tablewrap {
  max-height: 340px;
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}
.mx-table {
  font-size: 13px;
}
.mx-table th,
.mx-table td {
  padding: 5px 9px;
}
.mx-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}
.mx-table tbody th {
  position: static;
  white-space: normal;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text);
  background: none;
  font-size: 13px;
}
.mx-table tr.is-sel {
  background: var(--surface-3);
}
.mx-table .linklike {
  text-align: left;
}
.mx-cell-c {
  font-size: 11.5px;
}
.mx-spark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: none;
  letter-spacing: normal;
}
.mx-ctl-grid {
  display: grid;
  gap: 8px;
}
.mx-ctl-card {
  display: grid;
  gap: 3px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--text);
}
.mx-ctl-card:hover {
  background: var(--surface-3);
  text-decoration: none;
}
.mx-ctl-name {
  font-weight: 700;
}
.mx-ctl-val {
  font-size: 17px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.mx-ctl-bar,
.mx-bar-track {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--r-fill);
}
.mx-ctl-bar i {
  display: block;
  height: 100%;
  background: var(--d-fill);
}
.mx-bar-track {
  background: var(--surface-3);
}
.mx-bar-track i {
  display: block;
  height: 100%;
  background: var(--accent-fill);
}
.mx-ctl-sub {
  font-size: 12px;
}
.mx-prog {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 2px 10px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
}
.mx-prog .muted {
  grid-column: 2;
  font-size: 12px;
}
.mx-alerts {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mx-alert a {
  display: block;
  padding: 6px 9px;
  border-left: 3px solid var(--faint);
  border-radius: 0 8px 8px 0;
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
}
.mx-alert-D a {
  border-left-color: var(--d-fill);
}
.mx-alert-R a {
  border-left-color: var(--r-fill);
}
.mx-hint {
  font-size: 12.5px;
  line-height: 1.45;
}

/* ---- narrow screens: map on top (touch-pan is captured by the map, so keep it short), panel below as normal page flow --------------- */

@media (max-width: 960px) {
  .mx-root {
    height: auto;
    min-height: 0;
  }
  .mx-main {
    display: flex;
    flex-direction: column;
  }
  .mx-map {
    height: 60vh;
    height: 60dvh;
    min-height: 340px;
    max-height: 640px;
  }
  .mx-panel {
    overflow: visible;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .mx-ctl select {
    max-width: 100%;
  }
  .mx-ctl-layer {
    width: 100%;
  }
}
@media (max-width: 760px) {
  .mx-opt-toggle {
    display: inline-flex;
  }
  .mx-ctl-2:not([hidden]) {
    display: none;
  }
  .mx-bar.is-open .mx-ctl-2:not([hidden]) {
    display: flex;
  }
  /* the Show toggle wraps onto more rows instead of scrolling sideways (WCAG 1.4.10: no option is ever clipped) */
  .mx-ctl-layer {
    flex: 1 1 100%;
  }
  .mx-ctl-layer .seg-toggle {
    flex-wrap: wrap;
    max-width: 100%;
  }
}
@media (max-width: 560px) {
  .mx-controls {
    gap: 8px 10px;
  }
  .mx-ctl {
    flex: 1 1 140px;
  }
  .mx-ctl .seg-toggle {
    width: 100%;
  }
  .mx-ctl .seg-toggle button {
    flex: 1 1 auto;
    padding-inline: 7px;
  }
  .mx-ctl.mx-ctl-layer {
    flex: 1 1 100%;
  }
  .mx-legend {
    width: calc(100% - 64px);
    bottom: 10px;
    padding: 6px 8px;
    font-size: 11px;
  }
  .mx-notebar {
    font-size: 11px;
    max-width: calc(100% - 72px);
  }
  .mx-ui {
    bottom: 10px;
  }
  .mx-attrib {
    font-size: 10.5px;
    padding: 3px 8px;
  }
  .mx-attrib-long {
    display: none;
  }
  .mx-kpi-v {
    font-size: 17px;
  }
  .mx-table th,
  .mx-table td {
    padding: 5px 6px;
  }
  .mx-table {
    font-size: 12.5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mx-grp path {
    transition: none;
  }
}

/* ---- connection state: shapes or race list failed to load, retrying with backoff ---- */
.mx-conn {
  position: absolute;
  left: 50%;
  top: 56px; /* below the note bar (top-left) so both stay readable */
  z-index: 5;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: min(640px, calc(100% - 24px));
  padding: 8px 12px;
  border: 1px solid var(--warn);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
}
.mx-conn[hidden] {
  display: none;
}
.mx-conn-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--warn);
  animation: mx-conn-pulse 1.4s ease-in-out infinite;
}
.mx-conn-eta {
  white-space: nowrap;
  color: var(--muted);
}
.mx-conn .btn {
  flex: none;
}
@keyframes mx-conn-pulse {
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mx-conn-dot {
    animation: none;
  }
}
@media (max-width: 560px) {
  .mx-conn {
    top: 52px;
    flex-wrap: wrap;
    font-size: 12px;
  }
}
.mx-embed-conn {
  margin: 6px 0 0;
  font-size: 12px;
}
.mx-embed-conn[hidden] {
  display: none;
}