:root {
  --map-ui-gutter: clamp(18px, 1.7vw, 34px);
  --map-ui-gap: clamp(12px, 0.85vw, 18px);
  --map-ui-rail: clamp(390px, 28.5vw, 540px);
  --map-ui-accent: #7ee6d6;
}

body.map-grid-desktop .map-grid-v2 {
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  color: rgba(239, 251, 250, 0.94) !important;
  background:
    linear-gradient(135deg, rgba(7, 25, 35, 0.94), rgba(12, 31, 47, 0.88)) !important;
  border: 1px solid rgba(126, 230, 214, 0.25) !important;
  border-radius: 4px !important;
  box-shadow:
    0 18px 48px rgba(0, 8, 17, 0.28),
    inset 3px 0 0 rgba(126, 230, 214, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
  backdrop-filter: blur(15px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(15px) saturate(118%) !important;
  overflow: hidden !important;
  transform: none !important;
  isolation: isolate;
}

body.map-grid-desktop .map-grid-v2::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(126, 230, 214, 0.08), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 42%);
}

body.map-grid-desktop .map-grid-intro-v2,
body.map-grid-desktop .map-grid-bank-v2,
body.map-grid-desktop .map-grid-data-v2 {
  left: var(--map-ui-gutter) !important;
  width: var(--map-ui-rail) !important;
  max-width: var(--map-ui-rail) !important;
}

body.map-grid-desktop .map-grid-intro-v2 {
  top: var(--map-ui-gutter) !important;
  padding: clamp(22px, 1.55vw, 30px) !important;
}

body.map-grid-desktop .map-grid-bank-v2,
body.map-grid-desktop .map-grid-data-v2 {
  padding: clamp(16px, 1.05vw, 21px) !important;
}

body.map-grid-desktop .map-grid-scale-v2 {
  top: var(--map-ui-gutter) !important;
  left: calc(var(--map-ui-gutter) + var(--map-ui-rail) + var(--map-ui-gap)) !important;
  width: clamp(230px, 15vw, 286px) !important;
  min-width: 230px !important;
  padding: 11px 14px !important;
  box-shadow:
    0 12px 34px rgba(0, 8, 17, 0.24),
    inset 3px 0 0 rgba(126, 230, 214, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body.map-grid-desktop .map-grid-v2 h1,
body.map-grid-desktop .map-grid-v2 h2,
body.map-grid-desktop .map-grid-v2 h3,
body.map-grid-desktop .map-grid-v2 p {
  max-width: 100% !important;
}

body.map-grid-desktop .map-grid-v2 button,
body.map-grid-desktop .map-grid-v2 a {
  box-sizing: border-box;
}

@media (max-width: 900px) {
  body.map-grid-desktop .map-grid-v2 {
    position: revert !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    transform: revert !important;
  }
}
