@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Space+Grotesk:wght@300;400;500&display=swap");html,
body,
#root {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  background: #020607;
}

html,
body {
  overflow-x: hidden;
  overflow-y: auto;
}

/* -------------------------------------------------------------------------- */

/* BASE                                                                       */

/* -------------------------------------------------------------------------- */

html,
body,
#root {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  background: #020607;
}

html,
body {
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: auto;
  overscroll-behavior-y: auto;
}

body {
  font-family: "Inter", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

button {
  font-family: "Space Grotesk", Inter, sans-serif;
}

body.crystal-hover {
  cursor: pointer;
}

/* -------------------------------------------------------------------------- */

/* GLOBAL SITE / SCROLL                                                        */

/* -------------------------------------------------------------------------- */

.site {
  --mx: 50%;
  --my: 50%;
  position: relative;
  width: 100%;
  min-height: 920vh;
  color: white;
  background: #020607;
}

.site.storySite {
  min-height: 920vh;
}

.storyScrollSpace,
.scroll-space {
  height: 920vh;
  min-height: 920vh;
  pointer-events: none;
}

.storySnapPoint {
  height: 100vh;
  min-height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

html {
  scroll-snap-type: y proximity;
  scroll-padding-top: 0;
}

/* -------------------------------------------------------------------------- */

/* FIXED VIEWPORT / LAYERS                                                     */

/* -------------------------------------------------------------------------- */

.viewport {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(105, 255, 235, 0.095), transparent 26%),
    radial-gradient(circle at 50% 78%, rgba(60, 255, 200, 0.075), transparent 30%),
    radial-gradient(circle at 18% 70%, rgba(80, 255, 170, 0.035), transparent 26%),
    #020607;
}

/* Viewport atmospheric overlay. It stays below real scene layers. */

.viewport::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(150, 255, 240, 0.045), transparent 17%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.012), transparent 22%, rgba(0, 0, 0, 0.18));
  mix-blend-mode: screen;
}

/* Base canvas rule. Specific layer rules below decide pointer ownership. */

canvas {
  position: absolute;
  inset: 0;
  width: 100vw !important;
  height: 100vh !important;
  display: block;
}

/* -------------------------------------------------------------------------- */

/* APP LAYER OWNERSHIP                                                         */

/* -------------------------------------------------------------------------- */

/*
  Important:
  Intro layer can receive events only while it exists.
  CisternSceneLab receives events as the main scene.
  Map layer receives events only when visible/final.
*/

.introSceneLayer,
.cisternSceneHost,
.mapRevealLayer {
  position: absolute !important;
  inset: 0 !important;
}

/* Intro grid layer */

.introSceneLayer {
  z-index: 30 !important;
  pointer-events: auto !important;
}

.introSceneLayer canvas {
  pointer-events: auto !important;
}

/* Main CisternSceneLab layer */

.cisternSceneHost {
  z-index: 20 !important;
  background: #020807 !important;
  filter: none !important;
  pointer-events: auto !important;
}

.cisternSceneHost * {
  pointer-events: auto;
}

/* CisternSceneLab must NOT be fixed/9999 anymore */

.cisternSceneHost .cisternSceneLab,
.cisternSceneLab {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  background: #020807;
  overflow: hidden;
  filter: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.cisternSceneHost .cisternSceneLab canvas,
.cisternSceneLab canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block;
  pointer-events: auto !important;
  touch-action: none;
}

/* Final map layer */

.mapRevealLayer {
  z-index: 8000 !important;
  pointer-events: none;
}

.mapRevealLayer.visible {
  pointer-events: auto;
}

.mapRevealLayer canvas,
.mapRevealLayer * {
  pointer-events: auto;
}

/* -------------------------------------------------------------------------- */

/* OVERLAYS THAT SHOULD NEVER BLOCK 3D INTERACTION                             */

/* -------------------------------------------------------------------------- */

.noise,
.shade,
.rainGlass,
.mouseTrail,
.introOnlyInterface,
.interface,
.storyOverlay,
.footer,
.networkStatus,
.finalMessage {
  pointer-events: none;
}

/* Keep old dark filters lower than the real scene */

.noise {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0.035;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
  background-size: 90px 90px;
  mask-image: radial-gradient(circle at center, black 10%, transparent 84%);
}

.shade {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(circle at 50% 43%, transparent 0%, rgba(2, 6, 7, 0.04) 34%, rgba(2, 6, 7, 0.44) 92%),
    linear-gradient(to bottom, rgba(2, 6, 7, 0.01), rgba(2, 6, 7, 0.18) 72%, rgba(2, 6, 7, 0.42)),
    linear-gradient(90deg, rgba(2, 6, 7, 0.44), transparent 24%, transparent 72%, rgba(2, 6, 7, 0.44));
}

/* When not in intro, avoid the App shade/noise darkening the CisternSceneLab. */

.site:not(.act-drought) .shade,
.site:not(.act-drought) .noise {
  opacity: 0 !important;
}

/* Story focus blur should affect only intro canvas, not CisternSceneLab. */

body.story-focus-mode .introSceneLayer canvas {
  filter: blur(4px) brightness(0.72) saturate(1.18);
  transition: filter 320ms ease;
}

body.story-focus-mode .viewport::after {
  background:
    radial-gradient(circle at var(--mx) var(--my), color-mix(in srgb, var(--focus-color, #9ffff3), transparent 86%), transparent 16%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.01), transparent 26%, rgba(0, 0, 0, 0.38));
}

/* -------------------------------------------------------------------------- */

/* DESIGN MODE                                                                 */

/* -------------------------------------------------------------------------- */

.designToggle {
  pointer-events: auto !important;
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100000 !important;
  width: auto;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid rgba(130, 255, 240, 0.25);
  background: rgba(3, 14, 14, 0.58);
  color: rgba(220, 255, 250, 0.72);
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 9px;
  letter-spacing: 0.24em;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  cursor: pointer;
}

.designToggle.active {
  color: rgba(255, 255, 255, 0.95);
  border-color: rgba(130, 255, 240, 0.65);
  box-shadow: 0 0 28px rgba(120, 255, 230, 0.18);
}

/* -------------------------------------------------------------------------- */

/* CISTERN SCENE LABEL                                                         */

/* -------------------------------------------------------------------------- */

.cisternLabLabel {
  position: absolute;
  left: 32px;
  top: 28px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 7px;
  pointer-events: none !important;
}

.cisternLabLabel span {
  font-size: 10px;
  letter-spacing: 0.28em;
  color: rgba(150, 255, 242, 0.82);
}

.cisternLabLabel b {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(235, 255, 252, 0.58);
  font-weight: 500;
}

/* -------------------------------------------------------------------------- */

/* REALISTIC WET GLASS RAIN                                                    */

/* -------------------------------------------------------------------------- */

.rainGlass {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: var(--rainOpacity, 0);
  overflow: hidden;
  mix-blend-mode: screen;
}

.rainGlass::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.055), transparent 14%),
    radial-gradient(circle at 76% 18%, rgba(120, 255, 235, 0.055), transparent 18%),
    radial-gradient(circle at 42% 72%, rgba(255, 255, 255, 0.035), transparent 20%);
  filter: blur(10px);
  opacity: 0.55;
}

.rainStreaks,
.slidingDroplets {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.rainStreaks span {
  position: absolute;
  top: -180px;
  width: 1px;
  transform-origin: top center;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(180, 255, 246, 0.34),
    rgba(180, 255, 246, 0.02)
  );
  box-shadow:
    0 0 8px rgba(140, 255, 240, 0.16),
    0 0 18px rgba(140, 255, 240, 0.06);
  animation-name: rainFall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes rainFall {
  0% {
    transform: translate3d(0, -20vh, 0) rotate(10deg);
  }

  100% {
    transform: translate3d(-90px, 130vh, 0) rotate(10deg);
  }
}

.wetDrop {
  position: absolute;
  width: calc(22px * var(--s));
  height: calc(48px * var(--s));
  border-radius: 58% 42% 62% 38% / 46% 38% 62% 54%;
  opacity: 0;
  animation: wetSlide var(--speed) ease-in infinite;
  animation-delay: var(--delay);
  transform: translate3d(0, 0, 0);
  backdrop-filter: blur(var(--dropletBlur));
  -webkit-backdrop-filter: blur(var(--dropletBlur));
  background:
    radial-gradient(circle at 35% 18%, rgba(255, 255, 255, 0.55), transparent 12%),
    radial-gradient(circle at 63% 70%, rgba(150, 255, 240, 0.22), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.018));
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 2px 8px rgba(255, 255, 255, 0.16),
    inset 0 -10px 18px rgba(20, 255, 220, 0.05),
    0 0 24px rgba(120, 255, 235, 0.07);
}

.wetDrop::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(-1 * var(--trail));
  width: calc(5px * var(--s));
  height: var(--trail);
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(
    to bottom,
    rgba(190, 255, 246, 0),
    rgba(190, 255, 246, calc(var(--dropletTrailOpacity) * 0.18)),
    rgba(255, 255, 255, calc(var(--dropletTrailOpacity) * 0.28))
  );
  filter: blur(5px);
  opacity: 0.8;
}

.wetDrop::after {
  content: "";
  position: absolute;
  left: 28%;
  top: 16%;
  width: 18%;
  height: 22%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.38);
  filter: blur(1px);
}

@keyframes wetSlide {
  0% {
    opacity: 0;
    transform: translate3d(0, -10vh, 0) scale(var(--s));
  }

  10% {
    opacity: var(--dropOpacity);
  }

  72% {
    opacity: calc(var(--dropOpacity) * 0.76);
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--drift), 135vh, 0) scale(calc(var(--s) * 0.9));
  }
}

/* -------------------------------------------------------------------------- */

/* MOUSE TRAIL                                                                 */

/* -------------------------------------------------------------------------- */

.mouseTrail {
  position: absolute;
  inset: 0;
  z-index: 4;
  mix-blend-mode: screen;
}

.mouseTrail span {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(210, 255, 248, 0.35), rgba(120, 255, 230, 0.09), transparent 72%);
  animation: trailFade 1.05s ease-out forwards;
}

@keyframes trailFade {
  0% {
    opacity: 0.75;
    width: 10px;
    height: 10px;
    filter: blur(0);
  }

  100% {
    opacity: 0;
    width: 135px;
    height: 135px;
    filter: blur(9px);
  }
}

/* -------------------------------------------------------------------------- */

/* BASIC INTERFACE                                                             */

/* -------------------------------------------------------------------------- */

.interface {
  position: absolute;
  inset: 0;
  z-index: 5;
  padding: 30px 44px;
}

.introOnlyInterface {
  position: absolute !important;
  inset: 0 !important;
  z-index: 35 !important;
  pointer-events: none !important;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 9px;
  letter-spacing: 0.34em;
  color: rgba(255, 255, 255, 0.45);
}

.navPill {
  display: flex;
  gap: 22px;
  padding: 10px 16px;
  border: 1px solid rgba(170, 255, 240, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.032);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.hero {
  position: absolute;
  left: 54px;
  bottom: 62px;
  max-width: 500px;
  transition:
    opacity 0.65s ease,
    transform 0.65s ease,
    filter 0.65s ease;
}

.kicker {
  margin: 0 0 14px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 9px;
  letter-spacing: 0.38em;
  color: rgba(148, 255, 241, 0.78);
}

h1 {
  margin: 0;
  font-size: clamp(50px, 5.1vw, 82px);
  line-height: 0.84;
  letter-spacing: -0.075em;
  font-weight: 300;
}

.hero p:not(.kicker) {
  max-width: 450px;
  margin: 22px 0 0;
  font-size: 13px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.62);
}

.introSignal {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 9px;
  letter-spacing: 0.28em;
  color: rgba(160, 255, 244, 0.58);
}

.introSignal span {
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, rgba(130, 255, 240, 0), rgba(130, 255, 240, 0.75), rgba(130, 255, 240, 0));
  box-shadow: 0 0 12px rgba(130, 255, 240, 0.5);
}

/* -------------------------------------------------------------------------- */

/* STORY UI                                                                    */

/* -------------------------------------------------------------------------- */

.storyOverlay {
  position: absolute;
  inset: 0;
  z-index: 7;
}

.storyPanel {
  position: absolute;
  left: 54px;
  top: 50%;
  width: min(480px, calc(100vw - 108px));
  transform: translateY(-50%);
  padding: 26px 28px 24px;
  border-left: 1px solid rgba(150, 255, 240, 0.36);
  background:
    linear-gradient(90deg, rgba(2, 6, 7, 0.64), rgba(2, 6, 7, 0.32) 62%, transparent),
    radial-gradient(circle at 0% 0%, rgba(116, 255, 244, 0.12), transparent 48%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: opacity 260ms ease;
  animation: storyPanelIn 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes storyPanelIn {
  from {
    opacity: 0;
    transform: translateY(calc(-50% + 18px));
  }

  to {
    opacity: 1;
    transform: translateY(-50%);
  }
}

.storyMeta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 9px;
  letter-spacing: 0.24em;
  color: rgba(170, 255, 244, 0.72);
}

.storyMeta span {
  padding: 7px 9px;
  border-radius: 999px;
  border: 1px solid rgba(145, 255, 240, 0.22);
  background: rgba(145, 255, 240, 0.055);
}

.storyMeta i {
  font-style: normal;
  color: rgba(235, 255, 252, 0.42);
}

.storyPanel h1 {
  max-width: 440px;
  margin: 0;
  font-size: clamp(44px, 4.6vw, 74px);
  line-height: 0.88;
  letter-spacing: -0.08em;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 0 46px rgba(116, 255, 244, 0.1);
}

.storyPanel .word,
.storyPanel .char {
  display: inline-block;
}

.storyPanel .word {
  white-space: nowrap;
}

.storyLead {
  max-width: 410px;
  margin: 24px 0 0;
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.24;
  letter-spacing: -0.035em;
  color: rgba(235, 255, 252, 0.92);
}

.storyBody {
  max-width: 390px;
  margin: 17px 0 0;
  font-size: 13px;
  line-height: 1.62;
  color: rgba(232, 248, 245, 0.66);
}

.storyDataLine {
  margin-top: 24px;
  padding-top: 13px;
  border-top: 1px solid rgba(180, 255, 246, 0.12);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgba(200, 255, 248, 0.52);
}

.storyDataLine b {
  color: rgba(153, 255, 242, 0.88);
  font-weight: 400;
  text-align: right;
}

.storyProgress {
  position: absolute;
  right: 44px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 13px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgba(220, 255, 250, 0.28);
  pointer-events: none;
}

.storyProgress span {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(180, 255, 246, 0.12);
  background: rgba(2, 10, 11, 0.24);
  backdrop-filter: blur(10px);
  transition: 260ms ease;
}

.storyProgress span.on {
  color: rgba(245, 255, 252, 0.88);
  border-color: rgba(150, 255, 242, 0.44);
  background: rgba(120, 255, 240, 0.08);
  box-shadow: 0 0 24px rgba(120, 255, 240, 0.13);
}

.storyNextHint {
  position: absolute;
  right: 50px;
  bottom: 58px;
  min-width: 210px;
  padding: 14px 17px;
  border-radius: 18px;
  border: 1px solid rgba(180, 255, 246, 0.13);
  background: rgba(2, 8, 9, 0.42);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-family: "Space Grotesk", Inter, sans-serif;
  pointer-events: none;
}

.storyNextHint span {
  display: block;
  margin-bottom: 5px;
  font-size: 8px;
  letter-spacing: 0.26em;
  color: rgba(180, 255, 246, 0.42);
}

.storyNextHint b {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(235, 255, 252, 0.7);
  font-weight: 400;
  text-transform: uppercase;
}

/* Cistern role strip. Only interactive while App intro/story uses it. */

.storyRoles {
  position: absolute;
  left: 54px;
  right: 54px;
  bottom: 86px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  opacity: 0;
  transform: translateY(22px);
  transition: 420ms ease;
  pointer-events: none;
}

.storyRoles.show {
  opacity: 1;
  transform: translateY(0);
}

.storyRole {
  width: 100%;
  padding: 13px 14px;
  min-height: 74px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--role-color), transparent 72%);
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--role-color), transparent 84%), transparent 44%),
    rgba(2, 10, 11, 0.52);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-family: "Space Grotesk", Inter, sans-serif;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  transition:
    transform 260ms ease,
    border-color 260ms ease,
    background 260ms ease,
    box-shadow 260ms ease;
}

.storyRole:hover,
.storyRole:focus-visible {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--role-color), white 22%);
  background:
    radial-gradient(circle at 22% 12%, color-mix(in srgb, var(--role-color), transparent 68%), transparent 50%),
    rgba(3, 14, 15, 0.72);
  box-shadow:
    0 0 28px color-mix(in srgb, var(--role-color), transparent 72%),
    inset 0 0 26px color-mix(in srgb, var(--role-color), transparent 88%);
}

.storyRole span {
  display: block;
  margin-bottom: 9px;
  color: color-mix(in srgb, var(--role-color), white 18%);
  font-size: 10px;
  letter-spacing: 0.22em;
}

.storyRole b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(248, 255, 253, 0.88);
  font-weight: 400;
  text-transform: uppercase;
}

.storyRole i {
  display: block;
  margin-top: 5px;
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: rgba(220, 255, 250, 0.46);
}

/* Avoid old story furniture on final map. */

.site.act-map .storyRoles,
.site.act-map .storyNextHint {
  opacity: 0;
  transform: translateY(22px);
  pointer-events: none !important;
}

/* -------------------------------------------------------------------------- */

/* MAP / LEGACY ENERGY MAP                                                     */

/* -------------------------------------------------------------------------- */

.energyMap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  transition: 0.45s ease;
}

.energyMap.visible {
  pointer-events: auto;
}

.istanbulOutline {
  pointer-events: none;
  fill: rgba(120, 255, 235, 0.025);
  stroke: rgba(180, 255, 246, 0.14);
  stroke-width: 0.22;
  filter: url(#svgGlow);
}

.istanbulWater {
  pointer-events: none;
  fill: none;
  stroke: rgba(120, 255, 235, 0.09);
  stroke-width: 0.18;
  stroke-dasharray: 0.8 1.4;
}

.mapLine {
  pointer-events: none;
  fill: none;
  stroke: rgba(160, 255, 244, 0.15);
  stroke-width: 0.13;
  filter: url(#svgGlow);
  transition: 0.35s ease;
}

.mapLine.active {
  stroke: rgba(190, 255, 248, 0.78);
  stroke-width: 0.22;
  stroke-dasharray: 1.8 2.8;
  animation: lineFlow 1.2s linear infinite;
}

.energyMap.fullNetwork .mapLine {
  stroke: rgba(225, 255, 250, 0.9);
  stroke-width: 0.26;
}

.flowDot {
  fill: rgba(230, 255, 252, 0.96);
  filter: drop-shadow(0 0 7px rgba(150, 255, 244, 0.9));
}

.mapNode {
  cursor: pointer;
  pointer-events: auto;
}

.mapNode > circle:first-of-type {
  fill: rgba(180, 255, 247, 0.42);
  stroke: rgba(230, 255, 252, 0.35);
  stroke-width: 0.15;
  filter: drop-shadow(0 0 5px rgba(150, 255, 244, 0.45));
}

.mapNodeHalo {
  fill: transparent;
  stroke: rgba(160, 255, 244, 0.18);
  stroke-width: 0.12;
}

.mapNode.active > circle:first-of-type {
  fill: rgba(255, 255, 255, 0.92);
  stroke: rgba(170, 255, 244, 0.9);
  filter:
    drop-shadow(0 0 7px rgba(255, 255, 255, 0.85))
    drop-shadow(0 0 16px rgba(100, 255, 230, 0.78));
}

.mapNode.active .mapNodeHalo {
  stroke: rgba(180, 255, 244, 0.48);
  animation: nodePulse 1.8s ease-in-out infinite;
}

.mapNode text {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 2px;
  letter-spacing: 0.14em;
  fill: rgba(230, 255, 252, 0.46);
  opacity: 0;
  transition: 0.25s ease;
}

.mapNode:hover text,
.mapNode.active text {
  opacity: 1;
  fill: rgba(235, 255, 252, 0.82);
}

@keyframes lineFlow {
  to {
    stroke-dashoffset: -9;
  }
}

@keyframes nodePulse {
  0% {
    r: 2.2;
    opacity: 0.28;
  }

  100% {
    r: 4.2;
    opacity: 0;
  }
}

/* -------------------------------------------------------------------------- */

/* STATUS / FOOTER                                                             */

/* -------------------------------------------------------------------------- */

.networkStatus {
  position: absolute;
  left: 54px;
  top: 50%;
  transform: translateY(-50%) translateX(-20px);
  width: 250px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(160, 255, 244, 0.14);
  background: rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  transition: 0.55s ease;
}

.networkStatus.show {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.networkStatus span {
  display: block;
  margin-bottom: 10px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 9px;
  letter-spacing: 0.28em;
  color: rgba(210, 255, 250, 0.48);
}

.networkStatus b {
  display: block;
  font-size: 36px;
  font-weight: 300;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.92);
}

.networkStatus div {
  display: flex;
  gap: 7px;
  margin-top: 14px;
}

.networkStatus i {
  width: 100%;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
}

.networkStatus i.on {
  background: rgba(150, 255, 240, 0.82);
  box-shadow: 0 0 14px rgba(120, 255, 230, 0.72);
}

.finalMessage {
  position: absolute;
  left: 50%;
  bottom: 70px;
  width: min(620px, calc(100vw - 80px));
  transform: translateX(-50%) translateY(28px);
  text-align: center;
  opacity: 0;
  filter: blur(10px);
  transition: 0.75s ease;
}

.finalMessage.show {
  opacity: 1;
  filter: blur(0);
  transform: translateX(-50%) translateY(0);
}

.finalMessage span {
  display: block;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 10px;
  letter-spacing: 0.4em;
  color: rgba(145, 255, 240, 0.9);
}

.finalMessage p {
  margin: 14px 0 0;
  font-size: clamp(22px, 3vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.92);
}

.footer {
  position: absolute;
  left: 54px;
  right: 54px;
  bottom: 28px;
  display: flex;
  justify-content: space-between;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 9px;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.3);
  transition: 0.45s ease;
}

.footer.mapFooter {
  color: rgba(180, 255, 246, 0.42);
}

/* -------------------------------------------------------------------------- */

/* OLD READOUT PANEL SAFETY                                                    */

/* -------------------------------------------------------------------------- */

.readout {
  pointer-events: auto;
  position: absolute;
  top: 50%;
  min-height: 455px;
  padding: 26px;
  border-radius: 34px;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.17), transparent 18%),
    linear-gradient(
      145deg,
      rgba(230, 255, 252, var(--panelOpacity, 0.08)),
      rgba(255, 255, 255, 0.055) 42%,
      rgba(0, 22, 22, 0.2)
    );
  border: 1px solid color-mix(in srgb, var(--accent), transparent 58%);
  backdrop-filter: blur(var(--panelBlur, 22px)) saturate(155%) contrast(112%);
  -webkit-backdrop-filter: blur(var(--panelBlur, 22px)) saturate(155%) contrast(112%);
  box-shadow:
    0 44px 140px rgba(0, 0, 0, 0.68),
    0 0 46px color-mix(in srgb, var(--accent), transparent 84%),
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(120, 255, 240, 0.16),
    inset 18px 0 45px rgba(255, 255, 255, 0.045),
    inset -20px 0 50px rgba(0, 255, 230, 0.06);
  overflow: hidden;
  transform-style: preserve-3d;
}

.readout::before,
.readout::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.readout::before {
  background:
    radial-gradient(circle at 25% 8%, rgba(255, 255, 255, 0.22), transparent 28%),
    radial-gradient(circle at 72% 24%, color-mix(in srgb, var(--accent), transparent 74%), transparent 24%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.16), transparent 24%, rgba(255, 255, 255, 0.035) 50%, transparent 72%);
  opacity: 0.82;
  mix-blend-mode: screen;
}

.readout::after {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: var(--panelNoise, 0.16);
  mix-blend-mode: screen;
}

.readout > * {
  position: relative;
  z-index: 2;
}

.glassPreview {
  position: relative;
  height: 112px;
  margin-bottom: 26px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background:
    radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--accent), transparent 58%), transparent 28%),
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.14), transparent 22%),
    rgba(0, 0, 0, 0.24);
  box-shadow:
    inset 0 0 35px rgba(255, 255, 255, 0.04),
    inset 0 -20px 50px rgba(0, 0, 0, 0.24);
}

.glassPreview span {
  position: absolute;
  right: 16px;
  top: 14px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--accent);
}

.glassCore {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.62), color-mix(in srgb, var(--accent), transparent 42%) 30%, transparent 66%);
  filter: blur(8px);
  opacity: 0.58;
}

.readoutTop {
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 9px;
  letter-spacing: 0.24em;
  color: rgba(220, 255, 250, 0.52);
}

.readoutTop b {
  color: var(--accent);
  font-weight: 400;
}

.readout h2 {
  margin: 0;
  max-width: 300px;
  font-size: 35px;
  line-height: 0.98;
  letter-spacing: -0.055em;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.95);
}

.readout p {
  margin: 21px 0 0;
  max-width: 300px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.68);
}

.stats {
  margin: 27px 0 24px;
  display: grid;
  gap: 12px;
}

.stats div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.42);
}

.stats b {
  color: var(--accent);
  font-weight: 400;
}

button {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--accent, #7fffee), transparent 52%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(229, 255, 251, 0.9);
  font-size: 9px;
  letter-spacing: 0.26em;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  cursor: pointer;
  transition: 0.25s ease;
}

button:hover {
  background: color-mix(in srgb, var(--accent, #7fffee), transparent 88%);
  border-color: color-mix(in srgb, var(--accent, #7fffee), transparent 25%);
  box-shadow: 0 0 24px color-mix(in srgb, var(--accent, #7fffee), transparent 84%);
}

/* -------------------------------------------------------------------------- */

/* MOBILE                                                                      */

/* -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .interface {
    padding: 26px;
  }

  .hero {
    left: 26px;
    right: 26px;
    bottom: 84px;
  }

  .readout {
    display: none;
  }

  .navPill {
    display: none;
  }

  .networkStatus {
    display: none;
  }

  .footer {
    left: 26px;
    right: 26px;
    gap: 16px;
    flex-direction: column;
  }

  .mapNode text {
    display: none;
  }

  .storyPanel {
    left: 24px;
    top: auto;
    bottom: 112px;
    width: calc(100vw - 48px);
    padding: 20px;
  }

  .storyPanel h1 {
    font-size: 48px;
  }

  .storyLead {
    font-size: 17px;
  }

  .storyBody {
    font-size: 12px;
  }

  .storyProgress {
    right: 20px;
    top: 88px;
    grid-template-columns: repeat(7, 1fr);
    transform: none;
    gap: 6px;
  }

  .storyProgress span {
    width: 26px;
    height: 26px;
    font-size: 8px;
  }

  .storyNextHint {
    display: none;
  }

  .storyRoles {
    left: 20px;
    right: 20px;
    bottom: 24px;
    overflow-x: auto;
    display: flex;
  }

  .storyRole {
    min-width: 132px;
  }
}

/* -------------------------------------------------------------------------- */

/* Cinematic portal/map transition safety layer                                */

/* Append to src/App.css if these classes are not already present.              */

/* -------------------------------------------------------------------------- */

.portalTransitionWash {
  position: absolute;
  inset: 0;
  z-index: 11;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(85, 255, 240, 0.26), rgba(28, 190, 255, 0.12) 24%, rgba(2, 6, 7, 0.0) 58%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.10), transparent 18%);
  mix-blend-mode: screen;
  filter: blur(10px) saturate(1.25);
  transition: opacity 120ms linear;
  will-change: opacity;
}

.cisternSceneHost,
.introSceneLayer,
.mapRevealLayer {
  will-change: opacity, transform;
  transform: translateZ(0);
}

.cisternSceneHost canvas,
.cisternSceneLab canvas {
  touch-action: none !important;
  pointer-events: auto !important;
}

.mapRevealLayer {
  contain: layout paint size;
}

/* FINAL portal reference patch: portal stays a 3D object, no cyan fullscreen wash */

.portalTransitionWash {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.cisternSceneHost,
.cisternSceneHost .cisternSceneLab {
  filter: none !important;
}

.cisternSceneLab canvas {
  pointer-events: auto !important;
}

.designToggle {
  z-index: 100000 !important;
  pointer-events: auto !important;
}

.mapRevealLayer {
  transition: opacity 180ms linear !important;
}

/* FINAL portal reference patch: portal stays a 3D object, no cyan fullscreen wash */

.portalTransitionWash {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.cisternSceneHost,
.cisternSceneHost .cisternSceneLab {
  filter: none !important;
}

.cisternSceneLab canvas {
  pointer-events: auto !important;
}

.designToggle {
  z-index: 100000 !important;
  pointer-events: auto !important;
}

.mapRevealLayer {
  transition: opacity 180ms linear !important;
}

/* FINAL portal reference patch: portal stays a 3D object, no cyan fullscreen wash */

.portalTransitionWash {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.cisternSceneHost,
.cisternSceneHost .cisternSceneLab {
  filter: none !important;
}

.cisternSceneLab canvas {
  pointer-events: auto !important;
}

.designToggle {
  z-index: 100000 !important;
  pointer-events: auto !important;
}

.mapRevealLayer {
  transition: opacity 180ms linear !important;
}

/* -------------------------------------------------------------------------- */

/* Cinematic loading + story typography layer                                  */

/* -------------------------------------------------------------------------- */

.cinematicLoader {
  position: fixed;
  inset: 0;
  z-index: 200000;
  overflow: hidden;
  pointer-events: auto;
  background:
    radial-gradient(circle at 78% 50%, color-mix(in srgb, var(--loaderAccent), transparent 94%), transparent 32%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.018), transparent 38%),
    var(--loaderBg, #020b0b);
  color: var(--loaderText, #f4fffc);
  font-family: "Space Grotesk", Inter, Arial, sans-serif;
  transition:
    opacity 850ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 850ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 850ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cinematicLoader::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 70% 50%, black 0%, transparent 82%);
}

.cinematicLoader.exit {
  opacity: 0;
  filter: blur(18px);
  transform: scale(1.025);
}

.cinematicLoaderTopline {
  position: absolute;
  left: 34px;
  top: 28px;
  display: flex;
  gap: 18px;
  font-size: 9px;
  letter-spacing: 0.32em;
  color: color-mix(in srgb, var(--loaderAccent), transparent 24%);
  opacity: 0.72;
}

.cinematicLoaderCenter {
  position: absolute;
  right: min(8vw, 96px);
  top: 47%;
  display: flex;
  align-items: center;
  gap: 16px;
  transform: translateY(-50%);
}

.loaderGlyph {
  position: relative;
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--loaderAccent), transparent 42%);
  box-shadow:
    0 0 18px color-mix(in srgb, var(--loaderAccent), transparent 78%),
    inset 0 0 14px color-mix(in srgb, var(--loaderAccent), transparent 88%);
  animation: loaderGridRotate 2.1s steps(4, end) infinite;
}

.loaderGlyph span,
.loaderGlyph i {
  position: absolute;
  inset: 6px;
  border: 1px solid color-mix(in srgb, var(--loaderAccent), transparent 58%);
}

.loaderGlyph i {
  inset: 11px;
  background: color-mix(in srgb, var(--loaderAccent), transparent 32%);
  box-shadow: 0 0 16px color-mix(in srgb, var(--loaderAccent), transparent 54%);
  animation: loaderCorePulse 1.15s ease-in-out infinite alternate;
}

.loaderCopy {
  min-width: 390px;
}

.loaderStatusText {
  font-size: clamp(19px, 2.1vw, 31px);
  letter-spacing: -0.055em;
  font-weight: 500;
  color: rgba(247, 255, 253, 0.95);
  text-shadow: 0 0 22px color-mix(in srgb, var(--loaderAccent), transparent 84%);
}

.loaderSubText {
  margin-top: 7px;
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--loaderAccent), transparent 36%);
}

.cinematicLoaderRail {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(47% + 34px);
  height: 13px;
  opacity: var(--loaderLineOpacity, 0.88);
  overflow: hidden;
  border-top: 1px solid rgba(235, 255, 252, 0.16);
  border-bottom: 1px solid rgba(235, 255, 252, 0.08);
  background: rgba(255, 255, 255, 0.025);
}

.cinematicLoaderFill {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--loaderProgress);
  height: 100%;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--loaderAccent), transparent 74%), rgba(255, 255, 255, 0.62)),
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.94) 0 1px, transparent 1px 5px);
  box-shadow: 0 0 24px color-mix(in srgb, var(--loaderAccent), transparent 74%);
  transition: width 120ms linear;
}

.cinematicLoaderScan {
  position: absolute;
  inset: 0;
  width: 200%;
  opacity: 0.65;
  background: repeating-linear-gradient(112deg, transparent 0 7px, rgba(255, 255, 255, 0.62) 7px 8px, transparent 8px 13px);
  animation: loaderRailScan 900ms linear infinite;
}

.cinematicLoader.detected .loaderStatusText {
  animation: loaderDetectedGlitch 660ms steps(2, end) both;
}

@keyframes loaderGridRotate {
  0% { transform: rotate(0deg) scale(1); }
  24% { transform: rotate(0deg) scale(1.05); }
  25% { transform: rotate(90deg) scale(1); }
  49% { transform: rotate(90deg) scale(1.05); }
  50% { transform: rotate(180deg) scale(1); }
  74% { transform: rotate(180deg) scale(1.05); }
  75% { transform: rotate(270deg) scale(1); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes loaderCorePulse {
  from { opacity: 0.36; transform: scale(0.72); }
  to { opacity: 0.95; transform: scale(1.08); }
}

@keyframes loaderRailScan {
  from { transform: translateX(-18%); }
  to { transform: translateX(0%); }
}

@keyframes loaderDetectedGlitch {
  0% { filter: blur(0); transform: translateX(0); }
  24% { filter: blur(1px); transform: translateX(-2px); }
  52% { filter: blur(0); transform: translateX(2px); }
  100% { filter: blur(0); transform: translateX(0); }
}

.cinematicIntroMinimal .nav {
  color: rgba(235, 255, 252, 0.46);
}

.cinematicScrollHint {
  position: absolute;
  left: 54px;
  bottom: 58px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: "Space Grotesk", Inter, Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 0.34em;
  color: rgba(190, 255, 247, 0.58);
}

.cinematicScrollHint span {
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(160,255,244,0.85), transparent);
  box-shadow: 0 0 16px rgba(130, 255, 240, 0.52);
  animation: scrollHintPulse 1.8s ease-in-out infinite alternate;
}

@keyframes scrollHintPulse {
  from { opacity: 0.35; transform: scaleX(0.65); }
  to { opacity: 1; transform: scaleX(1); }
}

.cinematicStoryLayer {
  position: absolute;
  left: var(--storyX);
  top: var(--storyY);
  width: min(var(--storyMaxWidth), calc(100vw - 80px));
  z-index: 48;
  pointer-events: none;
  opacity: var(--storyOpacity);
  filter: blur(var(--storyBlur));
  will-change: transform, opacity, filter;
  transition:
    opacity 220ms linear,
    filter 220ms linear;
}

.cinematicStoryLayer.right {
  left: auto;
  right: var(--storyX);
  text-align: right;
}

.cinematicStoryCard {
  position: relative;
  display: inline-block;
  max-width: 100%;
  pointer-events: auto;
  color: var(--storyColor);
  font-family: "Inter", "Space Grotesk", Arial, sans-serif;
  user-select: none;
  text-shadow:
    0 0 calc(34px * var(--storyGlow)) color-mix(in srgb, var(--storyAccent), transparent 74%),
    0 20px 70px rgba(0, 0, 0, 0.45);
  animation: cinematicStoryIn 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.cinematicStoryKicker {
  position: relative;
  margin-bottom: 18px;
  font-family: "Space Grotesk", Inter, Arial, sans-serif;
  font-size: var(--storyKickerSize);
  letter-spacing: 0.34em;
  color: color-mix(in srgb, var(--storyAccent), transparent 20%);
  text-transform: uppercase;
}

.cinematicStoryText {
  position: relative;
  font-size: clamp(22px, 4.8vw, var(--storyTitleSize));
  line-height: 1.05;
  letter-spacing: -0.075em;
  font-weight: 300;
}

.cinematicStoryText::before,
.cinematicStoryText::after,
.cinematicStoryKicker::before,
.cinematicStoryKicker::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  opacity: calc(var(--storyGlitch) * 0.28);
  mix-blend-mode: screen;
  clip-path: inset(0 0 55% 0);
}

.cinematicStoryLayer.right .cinematicStoryText::before,
.cinematicStoryLayer.right .cinematicStoryText::after,
.cinematicStoryLayer.right .cinematicStoryKicker::before,
.cinematicStoryLayer.right .cinematicStoryKicker::after {
  left: auto;
  right: 0;
}

.cinematicStoryText::before,
.cinematicStoryKicker::before {
  color: #62fff2;
  transform: translate(calc(var(--storyGlitch) * -5px), calc(var(--storyGlitch) * -1px));
  animation: storyGlitchA 1.35s steps(2, end) infinite;
}

.cinematicStoryText::after,
.cinematicStoryKicker::after {
  color: #8b62ff;
  transform: translate(calc(var(--storyGlitch) * 5px), calc(var(--storyGlitch) * 1px));
  clip-path: inset(48% 0 0 0);
  animation: storyGlitchB 1.1s steps(2, end) infinite;
}

.cinematicStoryCard.is-hovering .cinematicStoryText {
  filter: saturate(1.22) contrast(1.08);
}

.cinematicStoryCard.is-hovering .is-strong {
  text-shadow:
    0 0 12px color-mix(in srgb, var(--storyAccent), transparent 30%),
    0 0 34px color-mix(in srgb, var(--storyAccent), transparent 62%);
}

.cinematicStoryLine {
  overflow: hidden;
  padding-bottom: 0.02em;
}

.cinematicStoryLineText {
  display: inline-block;
  animation: storyLineRise 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.cinematicStoryLine:nth-child(2) .cinematicStoryLineText { animation-delay: 70ms; }

.cinematicStoryLine:nth-child(3) .cinematicStoryLineText { animation-delay: 140ms; }

.cinematicStoryLineText span:not(.is-strong) {
  color: var(--storyMuted);
}

.cinematicStoryLineText .is-strong {
  color: var(--storyColor);
  font-weight: 400;
}

.cinematicStoryLineText .is-muted {
  color: var(--storyMuted);
}

@keyframes cinematicStoryIn {
  from { opacity: 0; transform: translateY(18px); filter: blur(12px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes storyLineRise {
  from { opacity: 0; transform: translateY(115%); filter: blur(10px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes storyGlitchA {
  0%, 86%, 100% { clip-path: inset(0 0 58% 0); transform: translate(calc(var(--storyGlitch) * -4px), 0); }
  88% { clip-path: inset(12% 0 62% 0); transform: translate(calc(var(--storyGlitch) * -10px), -1px); }
  91% { clip-path: inset(42% 0 30% 0); transform: translate(calc(var(--storyGlitch) * 6px), 1px); }
}

@keyframes storyGlitchB {
  0%, 80%, 100% { clip-path: inset(48% 0 0 0); transform: translate(calc(var(--storyGlitch) * 4px), 0); }
  82% { clip-path: inset(22% 0 54% 0); transform: translate(calc(var(--storyGlitch) * 11px), 1px); }
  85% { clip-path: inset(62% 0 12% 0); transform: translate(calc(var(--storyGlitch) * -7px), -1px); }
}

@media (max-width: 900px) {
  .cinematicLoaderCenter {
    left: 24px;
    right: 24px;
  }

  .loaderCopy {
    min-width: 0;
  }

  .cinematicStoryLayer,
  .cinematicStoryLayer.right {
    left: 24px;
    right: 24px;
    top: auto;
    bottom: 118px;
    width: auto;
    text-align: left;
  }

  .cinematicStoryText {
    font-size: 34px;
  }
}

/* -------------------------------------------------------------------------- */

/* FINAL STORY VISIBILITY PATCH                                                */

/* Loaded after App.css from App.jsx, so it overrides old faded story rules.    */

/* -------------------------------------------------------------------------- */

.viewport .cinematicStoryLayer,
.cinematicStoryLayer {
  z-index: 12000 !important;
  opacity: var(--storyOpacity, 1) !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  pointer-events: none !important;
  visibility: visible !important;
}

.viewport .cinematicStoryLayer *,
.cinematicStoryLayer * {
  visibility: visible !important;
  mix-blend-mode: normal !important;
}

.viewport .cinematicStoryCard,
.cinematicStoryCard {
  pointer-events: auto !important;
  padding: 20px 24px 22px !important;
  border-left: 1px solid rgba(150, 255, 242, 0.76) !important;
  background:
    linear-gradient(90deg, rgba(2, 8, 9, 0.78), rgba(2, 8, 9, 0.46) 70%, rgba(2, 8, 9, 0.14)) !important;
  backdrop-filter: blur(7px) !important;
  -webkit-backdrop-filter: blur(7px) !important;
  text-shadow:
    0 4px 20px rgba(0,0,0,0.96),
    0 0 18px rgba(127,255,238,0.18) !important;
  opacity: 1 !important;
  filter: none !important;
}

.viewport .cinematicStoryKicker,
.cinematicStoryKicker {
  color: rgba(158,255,243,0.98) !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow:
    0 3px 16px rgba(0,0,0,0.96),
    0 0 16px rgba(127,255,238,0.32) !important;
}

.viewport .cinematicStoryKicker::before,
.viewport .cinematicStoryKicker::after,
.viewport .cinematicStoryText::before,
.viewport .cinematicStoryText::after,
.cinematicStoryKicker::before,
.cinematicStoryKicker::after,
.cinematicStoryText::before,
.cinematicStoryText::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
}

.viewport .cinematicStoryText,
.cinematicStoryText {
  color: rgba(248,255,253,0.99) !important;
  opacity: 1 !important;
  filter: none !important;
  line-height: 1.03 !important;
  letter-spacing: -0.058em !important;
  font-weight: 360 !important;
}

.viewport .cinematicStoryLine,
.viewport .cinematicStoryLineText,
.cinematicStoryLine,
.cinematicStoryLineText {
  opacity: 1 !important;
  filter: none !important;
  color: rgba(248,255,253,0.99) !important;
  transform: none !important;
}

.viewport .cinematicStoryLineText span,
.viewport .cinematicStoryLineText span:not(.is-strong),
.viewport .cinematicStoryLineText .is-muted,
.cinematicStoryLineText span,
.cinematicStoryLineText span:not(.is-strong),
.cinematicStoryLineText .is-muted {
  color: rgba(239,252,249,0.98) !important;
  opacity: 1 !important;
  filter: none !important;
  visibility: visible !important;
  text-shadow:
    0 4px 18px rgba(0,0,0,0.98),
    0 0 10px rgba(220,255,250,0.08) !important;
}

.viewport .cinematicStoryLineText .is-strong,
.cinematicStoryLineText .is-strong {
  color: rgba(127,255,238,1) !important;
  opacity: 1 !important;
  font-weight: 580 !important;
  filter: none !important;
  text-shadow:
    0 4px 20px rgba(0,0,0,0.98),
    0 0 16px rgba(127,255,238,0.62),
    0 0 36px rgba(127,255,238,0.26) !important;
}

/* Hover blur is intentionally tiny: it gives the requested soft-focus feeling
   without making words unreadable. */

.viewport .cinematicStoryCard.is-hovering .cinematicStoryText,
.viewport .cinematicStoryCard.is-hovering .cinematicStoryLineText span,
.cinematicStoryCard.is-hovering .cinematicStoryText,
.cinematicStoryCard.is-hovering .cinematicStoryLineText span {
  filter: blur(0.22px) saturate(1.08) contrast(1.04) !important;
  opacity: 1 !important;
}

.viewport .cinematicStoryCard.is-hovering .cinematicStoryLineText .is-strong,
.cinematicStoryCard.is-hovering .cinematicStoryLineText .is-strong {
  filter: blur(0) saturate(1.18) contrast(1.08) !important;
}

/* -------------------------------------------------------------------------- */

/* V21 STORY TEXT TONE DOWN                                                    */

/* Keeps readability, but stops ACT text from stealing attention from scene.    */

/* -------------------------------------------------------------------------- */

.cinematicStoryLayer {
  opacity: calc(var(--storyOpacity, 1) * 0.86) !important;
}

.cinematicStoryCard {
  background:
    linear-gradient(90deg, rgba(2, 8, 9, 0.48), rgba(2, 8, 9, 0.22) 70%, rgba(2, 8, 9, 0.04)) !important;
  border-left-color: rgba(150,255,242,0.34) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  text-shadow:
    0 3px 14px rgba(0,0,0,0.72),
    0 0 10px rgba(127,255,238,0.08) !important;
}

.cinematicStoryKicker {
  color: rgba(135, 230, 220, 0.72) !important;
  opacity: 0.74 !important;
  text-shadow:
    0 2px 10px rgba(0,0,0,0.78),
    0 0 10px rgba(127,255,238,0.12) !important;
}

.cinematicStoryText {
  color: rgba(220, 235, 232, 0.78) !important;
  text-shadow:
    0 3px 14px rgba(0,0,0,0.76),
    0 0 8px rgba(127,255,238,0.06) !important;
}

.cinematicStoryLine,
.cinematicStoryLineText {
  color: rgba(220, 235, 232, 0.78) !important;
}

.cinematicStoryLineText span,
.cinematicStoryLineText span:not(.is-strong),
.cinematicStoryLineText .is-muted {
  color: rgba(205, 222, 219, 0.66) !important;
  opacity: 0.9 !important;
  text-shadow:
    0 3px 12px rgba(0,0,0,0.72) !important;
}

.cinematicStoryLineText .is-strong {
  color: rgba(132, 245, 232, 0.88) !important;
  opacity: 0.95 !important;
  font-weight: 460 !important;
  text-shadow:
    0 3px 14px rgba(0,0,0,0.78),
    0 0 10px rgba(127,255,238,0.32),
    0 0 22px rgba(127,255,238,0.10) !important;
}

.cinematicStoryText::before,
.cinematicStoryText::after,
.cinematicStoryKicker::before,
.cinematicStoryKicker::after {
  opacity: calc(var(--storyGlitch, 0) * 0.06) !important;
}

.cinematicStoryCard.is-hovering .cinematicStoryText {
  filter: blur(0.24px) saturate(1.04) contrast(1.02) !important;
}

.cinematicStoryCard.is-hovering .cinematicStoryLineText .is-strong {
  filter: blur(0) saturate(1.10) !important;
}

/* The map transition ACT panel should be softer too. */

.cinematicStoryLayer .cinematicStoryCard {
  box-shadow: none !important;
}

/* Guide text in the lower right should remain secondary. */

.cinematicGuideLayer {
  opacity: calc(var(--guideOpacity, 1) * 0.72) !important;
  color: rgba(210, 232, 228, 0.62) !important;
}

.cinematicGuideLayer b {
  color: rgba(210, 232, 228, 0.68) !important;
}

.cinematicGuideLayer small {
  color: rgba(190, 210, 207, 0.42) !important;
}

/* -------------------------------------------------------------------------- */

/* V22 STORY TEXT CLIPPING FIX                                                 */

/* Prevent large ACT letters/glow from being cut by line wrappers.             */

/* -------------------------------------------------------------------------- */

.cinematicStoryCard {
  overflow: visible !important;
  padding-top: 26px !important;
  padding-bottom: 30px !important;
}

.cinematicStoryText {
  overflow: visible !important;
  line-height: 1.14 !important;
  padding-top: 0.08em !important;
  padding-bottom: 0.16em !important;
}

.cinematicStoryLine {
  overflow: visible !important;
  padding-top: 0.04em !important;
  padding-bottom: 0.12em !important;
  margin-top: -0.02em !important;
  margin-bottom: -0.02em !important;
}

.cinematicStoryLineText {
  overflow: visible !important;
  display: inline-block !important;
  padding-top: 0.04em !important;
  padding-bottom: 0.10em !important;
  transform: translateY(0) !important;
}

.cinematicStoryLineText span,
.cinematicStoryLineText .is-strong {
  display: inline !important;
  overflow: visible !important;
  padding-top: 0.02em !important;
  padding-bottom: 0.04em !important;
}

/* Some earlier animation wrappers used clipping for the rise animation.
   Keep the animation feel, but do not crop the final text. */

.cinematicStoryLayer .cinematicStoryLine,
.cinematicStoryLayer .cinematicStoryLineText {
  clip-path: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* Slightly reduce giant type size so it feels cinematic but not cropped. */

.cinematicStoryText {
  font-size: clamp(24px, 4.35vw, calc(var(--storyTitleSize, 52px) * 0.94)) !important;
}

/* The map transition card also needs extra breathing room. */

.cinematicStoryLayer .cinematicStoryCard {
  min-height: auto !important;
}

/* -------------------------------------------------------------------------- */

/* V23 REFERENCE TEXT TONE                                                     */

/* Match requested screenshot: readable, muted, compact, soft white/cyan glow. */

/* -------------------------------------------------------------------------- */

.cinematicStoryLayer {
  opacity: calc(var(--storyOpacity, 1) * 0.78) !important;
}

.cinematicStoryCard {
  padding: 14px 18px 16px !important;
  border-left-color: rgba(150, 255, 242, 0.28) !important;
  background:
    linear-gradient(90deg, rgba(2, 8, 9, 0.50), rgba(2, 8, 9, 0.24) 70%, rgba(2, 8, 9, 0.03)) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  box-shadow: none !important;
  text-shadow:
    0 2px 8px rgba(0,0,0,0.78),
    0 0 7px rgba(215,255,248,0.08) !important;
}

.cinematicStoryKicker {
  margin-bottom: 8px !important;
  font-size: calc(var(--storyKickerSize, 10px) * 0.82) !important;
  letter-spacing: 0.34em !important;
  color: rgba(150, 230, 222, 0.58) !important;
  opacity: 0.78 !important;
  text-shadow:
    0 2px 8px rgba(0,0,0,0.82),
    0 0 8px rgba(127,255,238,0.10) !important;
}

.cinematicStoryText {
  font-size: clamp(19px, 2.45vw, calc(var(--storyTitleSize, 52px) * 0.56)) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.052em !important;
  font-weight: 330 !important;
  color: rgba(216, 229, 226, 0.76) !important;
  text-shadow:
    0 2px 8px rgba(0,0,0,0.80),
    0 0 8px rgba(225,255,250,0.08) !important;
  padding-top: 0.04em !important;
  padding-bottom: 0.08em !important;
}

.cinematicStoryLine {
  overflow: visible !important;
  padding-top: 0.02em !important;
  padding-bottom: 0.04em !important;
  margin-top: -0.035em !important;
  margin-bottom: -0.035em !important;
}

.cinematicStoryLineText {
  overflow: visible !important;
  padding-top: 0.02em !important;
  padding-bottom: 0.05em !important;
}

.cinematicStoryLineText span,
.cinematicStoryLineText span:not(.is-strong),
.cinematicStoryLineText .is-muted {
  color: rgba(205, 218, 215, 0.70) !important;
  opacity: 0.92 !important;
  font-weight: 320 !important;
  text-shadow:
    0 2px 8px rgba(0,0,0,0.82),
    0 0 5px rgba(225,255,250,0.05) !important;
}

.cinematicStoryLineText .is-strong {
  color: rgba(232, 255, 250, 0.92) !important;
  opacity: 0.96 !important;
  font-weight: 560 !important;
  text-shadow:
    0 2px 8px rgba(0,0,0,0.84),
    0 0 8px rgba(210,255,248,0.25),
    0 0 14px rgba(127,255,238,0.10) !important;
}

/* Cyan words should feel like the reference: bright but not neon-heavy. */

.cinematicStoryLineText .is-strong:first-child,
.cinematicStoryLineText span.is-strong {
  color: rgba(222, 255, 250, 0.94) !important;
}

.cinematicStoryText::before,
.cinematicStoryText::after,
.cinematicStoryKicker::before,
.cinematicStoryKicker::after {
  opacity: calc(var(--storyGlitch, 0) * 0.035) !important;
}

/* Hover blur remains nearly invisible, just a soft focus cue. */

.cinematicStoryCard.is-hovering .cinematicStoryText {
  filter: blur(0.18px) saturate(1.02) contrast(1.01) !important;
}

.cinematicStoryCard.is-hovering .cinematicStoryLineText span,
.cinematicStoryCard.is-hovering .cinematicStoryLineText span:not(.is-strong) {
  opacity: 0.94 !important;
}

.cinematicStoryCard.is-hovering .cinematicStoryLineText .is-strong {
  filter: blur(0) saturate(1.06) !important;
}

/* Keep guide secondary and quiet. */

.cinematicGuideLayer {
  opacity: calc(var(--guideOpacity, 1) * 0.58) !important;
  filter: none !important;
}

.cinematicGuideLayer b {
  color: rgba(190, 216, 212, 0.58) !important;
}

.cinematicGuideLayer small {
  color: rgba(170, 194, 190, 0.34) !important;
}

/* -------------------------------------------------------------------------- */

/* V24 INTRO LEFT COPY                                                         */

/* Cinematic intro copy for first screen, left aligned and minimal.            */

/* -------------------------------------------------------------------------- */

.cinematicIntroMinimal {
  pointer-events: none !important;
}

.cinematicIntroNav {
  justify-content: flex-end !important;
}

.cinematicIntroNavSpacer {
  flex: 1 1 auto;
}

.cinematicIntroMinimal .navPill {
  background: rgba(4, 12, 13, 0.28) !important;
  border-color: rgba(145, 255, 242, 0.16) !important;
  color: rgba(220, 242, 239, 0.48) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.cinematicIntroCopy {
  position: absolute;
  left: 54px;
  top: 50%;
  transform: translateY(-44%);
  width: min(420px, calc(100vw - 108px));
  padding: 18px 22px 18px 20px;
  border-left: 1px solid rgba(130, 255, 240, 0.30);
  background:
    linear-gradient(90deg, rgba(2, 8, 9, 0.38), rgba(2, 8, 9, 0.18) 62%, rgba(2, 8, 9, 0.00)),
    radial-gradient(circle at 0% 14%, rgba(120, 255, 240, 0.07), transparent 46%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  text-shadow:
    0 3px 14px rgba(0,0,0,0.80),
    0 0 10px rgba(130,255,240,0.08);
}

.cinematicIntroKicker {
  display: block;
  margin-bottom: 14px;
  font-family: "Space Grotesk", Inter, Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 0.34em;
  color: rgba(160, 240, 232, 0.62);
  text-transform: uppercase;
}

.cinematicIntroTitle {
  margin: 0;
  display: grid;
  gap: 4px;
  font-family: "Inter", "Space Grotesk", Arial, sans-serif;
  font-size: clamp(34px, 4.7vw, 62px);
  line-height: 0.92;
  letter-spacing: -0.065em;
  font-weight: 320;
  color: rgba(236, 244, 242, 0.90);
}

.cinematicIntroTitle span {
  display: block;
}

.cinematicIntroTitle span:first-child {
  color: rgba(228, 238, 236, 0.84);
}

.cinematicIntroTitle span:last-child {
  color: rgba(238, 255, 251, 0.94);
  text-shadow:
    0 3px 16px rgba(0,0,0,0.82),
    0 0 12px rgba(140,255,242,0.16);
}

.cinematicIntroTrace {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: "Space Grotesk", Inter, Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 0.32em;
  color: rgba(188, 228, 222, 0.54);
  text-transform: uppercase;
}

.cinematicIntroTrace span {
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(150,255,240,0.62), transparent);
  box-shadow: 0 0 12px rgba(120,255,230,0.18);
}

.cinematicIntroTrace b {
  font-weight: 400;
  color: rgba(205, 232, 228, 0.60);
}

.cinematicScrollHint {
  display: none !important;
}

@media (max-width: 900px) {
  .cinematicIntroCopy {
    left: 24px;
    right: 24px;
    width: auto;
    top: auto;
    bottom: 104px;
    transform: none;
    padding: 16px 18px 16px 16px;
  }

  .cinematicIntroTitle {
    font-size: clamp(28px, 8vw, 42px);
    line-height: 0.95;
  }

  .cinematicIntroTrace {
    margin-top: 16px;
    gap: 10px;
    font-size: 8px;
    letter-spacing: 0.22em;
  }

  .cinematicIntroTrace span {
    width: 28px;
  }
}

/* -------------------------------------------------------------------------- */

/* V75 RESTORE PANELS + GSAP ACTS ONLY                                         */

/* -------------------------------------------------------------------------- */

.introOpeningTitle {
  position: absolute;
  left: 54px;
  bottom: 92px;
  max-width: 660px;
  pointer-events: none;
  color: rgba(244, 255, 252, 0.94);
  font-family: "Inter", "Space Grotesk", Arial, sans-serif;
  text-shadow: 0 22px 70px rgba(0,0,0,0.45);
}

.introOpeningTitle span {
  display: block;
  margin-bottom: 14px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 10px;
  letter-spacing: 0.34em;
  color: rgba(160, 255, 244, 0.72);
}

.introOpeningTitle b {
  display: block;
  max-width: 620px;
  font-size: clamp(48px, 5.3vw, 86px);
  line-height: 0.84;
  letter-spacing: -0.082em;
  font-weight: 300;
}

.introOpeningTitle small {
  display: block;
  max-width: 520px;
  margin-top: 22px;
  font-size: 13px;
  line-height: 1.72;
  color: rgba(232, 248, 245, 0.62);
}

/* Keep all old panels/UI alive; only the ACT typography renderer is replaced by GSAP. */

.gsapActLayer {
  z-index: 9480 !important;
  width: min(var(--storyMaxWidth), calc(100vw - 84px)) !important;
  transition:
    opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 620ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.gsapActCard {
  padding: 20px 24px 22px !important;
  border-left: 1px solid rgba(150, 255, 240, 0.22) !important;
  border-radius: 0 20px 20px 0 !important;
  background:
    linear-gradient(90deg, rgba(2, 7, 8, 0.42), rgba(2, 7, 8, 0.18) 72%, rgba(2, 7, 8, 0.025)),
    radial-gradient(circle at 0% 0%, rgba(116, 255, 244, 0.055), transparent 56%) !important;
  backdrop-filter: blur(7px) !important;
  -webkit-backdrop-filter: blur(7px) !important;
  box-shadow:
    0 20px 70px rgba(0,0,0,0.22),
    inset 0 0 0 1px rgba(255,255,255,0.016) !important;
  animation: none !important;
}

.cinematicStoryLayer.right .gsapActCard {
  border-left: none !important;
  border-right: 1px solid rgba(150, 255, 240, 0.22) !important;
  border-radius: 20px 0 0 20px !important;
  background:
    linear-gradient(270deg, rgba(2, 7, 8, 0.42), rgba(2, 7, 8, 0.18) 72%, rgba(2, 7, 8, 0.025)),
    radial-gradient(circle at 100% 0%, rgba(116, 255, 244, 0.055), transparent 56%) !important;
}

.gsapActLayer .cinematicStoryKicker {
  margin-bottom: 16px !important;
  font-size: var(--storyKickerSize) !important;
  opacity: 0.82 !important;
  text-shadow: none !important;
}

.gsapActLayer .cinematicStoryText {
  font-size: clamp(40px, 5.45vw, var(--storyTitleSize)) !important;
  line-height: 1.03 !important;
  letter-spacing: -0.078em !important;
  font-weight: 300 !important;
}

.gsapActLayer .cinematicStoryLine {
  overflow: hidden !important;
  min-height: 1.03em !important;
}

.gsapActLayer .cinematicStoryLineText span,
.gsapActLayer .cinematicStoryLineText span:not(.is-strong),
.gsapActLayer .cinematicStoryLineText .is-muted {
  color: var(--storyMuted) !important;
  opacity: 1 !important;
}

.gsapActLayer .cinematicStoryLineText .is-strong {
  color: var(--storyColor) !important;
  font-weight: 410 !important;
  text-shadow:
    0 0 12px color-mix(in srgb, var(--storyAccent), transparent 46%),
    0 0 34px color-mix(in srgb, var(--storyAccent), transparent 72%) !important;
}

.gsapActLayer .cinematicStoryText::before,
.gsapActLayer .cinematicStoryText::after,
.gsapActLayer .cinematicStoryKicker::before,
.gsapActLayer .cinematicStoryKicker::after {
  opacity: calc(var(--storyGlitch) * 0.10) !important;
}

/* Map/detail panels from the reference CSS must not be hidden by the ACT fix. */

.storyOverlay,
.storyRoles,
.storyNextHint,
.storyProgress,
.readout,
.mapRevealLayer,
.mapMissionOverlay,
.cinematicGuideLayer,
.networkStatus,
.finalMessage {
  visibility: visible;
}

/* Mobile keeps the same ACT logic but prevents huge text overlap. */

@media (max-width: 768px) {
  .introOpeningTitle {
    left: 22px;
    right: 22px;
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    max-width: none;
  }

  .introOpeningTitle b {
    font-size: clamp(34px, 10vw, 52px);
    line-height: 0.9;
  }

  .introOpeningTitle small {
    max-width: 92vw;
    font-size: 11px;
    line-height: 1.55;
  }

  .gsapActLayer,
  .gsapActLayer.right {
    left: 18px !important;
    right: 18px !important;
    top: auto !important;
    bottom: calc(106px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    text-align: left !important;
  }

  .gsapActCard,
  .cinematicStoryLayer.right .gsapActCard {
    padding: 15px 16px 16px !important;
    border-left: 1px solid rgba(150,255,240,0.18) !important;
    border-right: none !important;
    border-radius: 0 16px 16px 0 !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }

  .gsapActLayer .cinematicStoryText {
    font-size: clamp(27px, 8.1vw, 39px) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.06em !important;
  }

  .gsapActLayer .cinematicStoryKicker {
    font-size: 8px !important;
    letter-spacing: 0.22em !important;
    margin-bottom: 10px !important;
  }
}

/* -------------------------------------------------------------------------- */

/* V76 PUBLISH MODE: DESIGN MODE REMOVED                                       */

/* -------------------------------------------------------------------------- */

.designToggle,
[class*="leva"],
#leva__root {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* -------------------------------------------------------------------------- */

/* V78 GSAP SAFE STORY: NO SPLITTYPE DOM MUTATION CRASH                         */

/* -------------------------------------------------------------------------- */

.gsapSafeStory {
  position: absolute !important;
  left: var(--storyX) !important;
  top: var(--storyY) !important;
  width: min(var(--storyMaxWidth), calc(100vw - 96px)) !important;
  z-index: 9500 !important;
  pointer-events: none !important;
  will-change: opacity, transform, filter !important;
}

.gsapSafeStory.right {
  left: auto !important;
  right: var(--storyX) !important;
  text-align: right !important;
}

.gsapSafeStoryCard {
  width: min(560px, 100%) !important;
  padding: 28px 30px 26px !important;
  border-left: 1px solid rgba(150, 255, 240, 0.34) !important;
  border-radius: 0 22px 22px 0 !important;
  background:
    linear-gradient(90deg, rgba(2, 6, 7, 0.58), rgba(2, 6, 7, 0.28) 68%, rgba(2, 6, 7, 0.04)),
    radial-gradient(circle at 0% 0%, rgba(116, 255, 244, 0.10), transparent 48%) !important;
  backdrop-filter: blur(11px) !important;
  -webkit-backdrop-filter: blur(11px) !important;
  box-shadow:
    0 26px 72px rgba(0,0,0,0.25),
    inset 0 0 0 1px rgba(255,255,255,0.018) !important;
}

.gsapSafeStory.right .gsapSafeStoryCard {
  border-left: none !important;
  border-right: 1px solid rgba(150, 255, 240, 0.34) !important;
  border-radius: 22px 0 0 22px !important;
  background:
    linear-gradient(270deg, rgba(2, 6, 7, 0.58), rgba(2, 6, 7, 0.28) 68%, rgba(2, 6, 7, 0.04)),
    radial-gradient(circle at 100% 0%, rgba(116, 255, 244, 0.10), transparent 48%) !important;
}

.gsapSafeStory .cinematicStoryKicker {
  margin-bottom: 18px !important;
  font-family: "Space Grotesk", Inter, Arial, sans-serif !important;
  font-size: var(--storyKickerSize) !important;
  letter-spacing: 0.32em !important;
  color: rgba(170, 255, 244, 0.66) !important;
  text-transform: uppercase !important;
}

.gsapSafeStory .cinematicStoryTitle {
  font-family: "Inter", "Space Grotesk", Arial, sans-serif !important;
  font-size: clamp(30px, 3.0vw, var(--storyTitleSize)) !important;
  line-height: 0.90 !important;
  letter-spacing: -0.082em !important;
  font-weight: 300 !important;
  color: rgba(248, 255, 253, 0.96) !important;
  text-shadow: 0 0 38px rgba(116, 255, 244, 0.10) !important;
  overflow: visible !important;
}

.gsapSafeStory .storyWord {
  display: inline-block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  vertical-align: bottom !important;
  padding-bottom: 0.04em !important;
}

.gsapSafeStory .storyChar {
  display: inline-block !important;
  will-change: transform, opacity, filter !important;
}

.gsapSafeStory .storySpace {
  white-space: pre !important;
}

.gsapSafeStory .cinematicStoryLines {
  margin-top: 18px !important;
}

.gsapSafeStory .cinematicStoryLine {
  margin: 8px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.52 !important;
  color: rgba(232, 248, 245, 0.60) !important;
  letter-spacing: -0.01em !important;
}

.gsapSafeStory .cinematicStoryLine strong {
  color: rgba(246, 255, 253, 0.94) !important;
  font-weight: 430 !important;
  text-shadow:
    0 0 12px rgba(127, 255, 238, 0.16),
    0 0 28px rgba(127, 255, 238, 0.08) !important;
}

.designToggle,
[class*="leva"],
#leva__root {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 768px) {
  .gsapSafeStory,
  .gsapSafeStory.right {
    left: 18px !important;
    right: 18px !important;
    top: auto !important;
    bottom: calc(108px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    text-align: left !important;
  }

  .gsapSafeStoryCard,
  .gsapSafeStory.right .gsapSafeStoryCard {
    width: 100% !important;
    padding: 16px 17px 17px !important;
    border-left: 1px solid rgba(150, 255, 240, 0.22) !important;
    border-right: none !important;
    border-radius: 0 16px 16px 0 !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
  }

  .gsapSafeStory .cinematicStoryTitle {
    font-size: clamp(28px, 8.4vw, 40px) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.065em !important;
  }

  .gsapSafeStory .cinematicStoryLine {
    font-size: 10.5px !important;
    line-height: 1.45 !important;
  }

  .gsapSafeStory .cinematicStoryKicker {
    font-size: 7.5px !important;
    letter-spacing: 0.20em !important;
    margin-bottom: 10px !important;
  }
}

/* -------------------------------------------------------------------------- */

/* V79 STORY SIZE / VISUAL BALANCE + AUDIO BUTTON                              */

/* -------------------------------------------------------------------------- */

.gsapSafeStory {
  width: min(620px, calc(100vw - 110px)) !important;
}

.gsapSafeStoryCard {
  width: min(560px, 100%) !important;
  padding: 22px 24px 22px !important;
  border-left: 1px solid rgba(150, 255, 240, 0.30) !important;
  border-radius: 0 20px 20px 0 !important;
  background:
    linear-gradient(90deg, rgba(2, 7, 8, 0.50), rgba(2, 7, 8, 0.24) 70%, rgba(2, 7, 8, 0.035)),
    radial-gradient(circle at 0% 0%, rgba(116, 255, 244, 0.085), transparent 48%) !important;
  backdrop-filter: blur(9px) !important;
  -webkit-backdrop-filter: blur(9px) !important;
  box-shadow:
    0 22px 64px rgba(0,0,0,0.23),
    inset 0 0 0 1px rgba(255,255,255,0.016) !important;
}

.gsapSafeStory.right .gsapSafeStoryCard {
  border-left: none !important;
  border-right: 1px solid rgba(150, 255, 240, 0.30) !important;
  border-radius: 20px 0 0 20px !important;
}

.gsapSafeStory .cinematicStoryTitle {
  font-size: clamp(32px, 3.35vw, var(--storyTitleSize)) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.068em !important;
  font-weight: 300 !important;
  color: rgba(242, 255, 252, 0.94) !important;
  text-shadow:
    0 0 22px rgba(116, 255, 244, 0.08),
    0 12px 42px rgba(0,0,0,0.34) !important;
}

.gsapSafeStory .cinematicStoryKicker {
  margin-bottom: 13px !important;
  font-size: 9px !important;
  letter-spacing: 0.28em !important;
  color: rgba(170, 255, 244, 0.58) !important;
}

.gsapSafeStory .cinematicStoryLines {
  margin-top: 14px !important;
}

.gsapSafeStory .cinematicStoryLine {
  margin: 6px 0 0 !important;
  font-size: 12px !important;
  line-height: 1.46 !important;
  color: rgba(232, 248, 245, 0.56) !important;
}

.soundToggle {
  position: fixed;
  left: 24px;
  top: 22px;
  z-index: 100001;
  pointer-events: auto !important;
  padding: 10px 13px;
  border-radius: 999px;
  border: 1px solid rgba(150, 255, 240, 0.28);
  background: rgba(2, 12, 13, 0.54);
  color: rgba(226, 255, 250, 0.72);
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.22em;
  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 0 22px rgba(120,255,235,0.07);
  transition: opacity 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.soundToggle.active {
  color: rgba(246,255,252,0.96);
  border-color: rgba(150,255,240,0.62);
  box-shadow: 0 0 24px rgba(120,255,235,0.18);
}

.soundToggle.error {
  color: rgba(255, 190, 170, 0.88);
  border-color: rgba(255, 160, 130, 0.42);
}

.soundToggle:hover {
  color: rgba(246,255,252,0.95);
  border-color: rgba(150,255,240,0.58);
}

@media (max-width: 768px) {
  .gsapSafeStory .cinematicStoryTitle {
    font-size: clamp(24px, 6.6vw, 34px) !important;
    line-height: 1.0 !important;
    letter-spacing: -0.052em !important;
  }

  .gsapSafeStoryCard,
  .gsapSafeStory.right .gsapSafeStoryCard {
    padding: 14px 15px 15px !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
  }

  .gsapSafeStory .cinematicStoryLine {
    font-size: 10px !important;
    line-height: 1.42 !important;
  }

  .soundToggle {
    left: 14px;
    top: calc(14px + env(safe-area-inset-top, 0px));
    padding: 9px 10px;
    font-size: 8px;
    letter-spacing: 0.16em;
  }
}

/* -------------------------------------------------------------------------- */

/* V80 ACT SIZE + AUDIO BUTTON SAFETY                                          */

/* -------------------------------------------------------------------------- */

.gsapSafeStory .cinematicStoryTitle {
  font-size: clamp(30px, 3vw, 40px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.055em !important;
}

.gsapSafeStoryCard {
  width: min(560px, 100%) !important;
  padding: 22px 24px 21px !important;
  background:
    linear-gradient(90deg, rgba(2, 6, 7, 0.50), rgba(2, 6, 7, 0.25) 68%, rgba(2, 6, 7, 0.035)),
    radial-gradient(circle at 0% 0%, rgba(116, 255, 244, 0.075), transparent 48%) !important;
  backdrop-filter: blur(9px) !important;
  -webkit-backdrop-filter: blur(9px) !important;
}

.gsapSafeStory .cinematicStoryLine {
  font-size: 12px !important;
  line-height: 1.48 !important;
}

/* Keep audio button above all visual layers */

.presentationAudioButton,
.audioButton,
.soundButton,
[class*="audio"],
[class*="Audio"] {
  z-index: 100200 !important;
}

@media (max-width: 768px) {
  .gsapSafeStory .cinematicStoryTitle {
    font-size: clamp(24px, 6.6vw, 32px) !important;
    line-height: 1.04 !important;
  }

  .gsapSafeStoryCard {
    padding: 14px 15px 15px !important;
  }
}

/* -------------------------------------------------------------------------- */

/* V81 STORY/AUDIO/MAP/PERFORMANCE FIX                                         */

/* -------------------------------------------------------------------------- */

/* Remove the duplicate lower copy inside ACT panels. */

.gsapSafeStory .cinematicStoryLines,
.gsapSafeStory .cinematicStoryLine {
  display: none !important;
}

/* Better panel proportions and no clipped letters. */

.gsapSafeStory {
  width: min(610px, calc(100vw - 96px)) !important;
}

.gsapSafeStoryCard {
  width: min(590px, 100%) !important;
  padding: 23px 25px 27px !important;
  overflow: visible !important;
  border-left: 1px solid rgba(150, 255, 240, 0.28) !important;
  background:
    linear-gradient(90deg, rgba(2, 6, 7, 0.46), rgba(2, 6, 7, 0.22) 70%, rgba(2, 6, 7, 0.025)),
    radial-gradient(circle at 0% 0%, rgba(116, 255, 244, 0.075), transparent 48%) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.gsapSafeStory .cinematicStoryTitle {
  font-size: clamp(31px, 3.05vw, 38px) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.055em !important;
  overflow: visible !important;
  color: rgba(198, 218, 214, 0.54) !important;
  text-shadow: 0 12px 38px rgba(0, 0, 0, 0.34) !important;
}

.gsapSafeStory .storyWord {
  display: inline-block !important;
  white-space: nowrap !important;
  overflow: visible !important;
  vertical-align: baseline !important;
  padding-bottom: 0.16em !important;
}

.gsapSafeStory .storyChar {
  display: inline-block !important;
  will-change: transform, opacity, filter !important;
}

.gsapSafeStory .storyChar.isMuted {
  color: rgba(187, 207, 203, 0.48) !important;
  opacity: 0.86 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.68) !important;
}

.gsapSafeStory .storyChar.isStrong {
  color: rgba(244, 255, 252, 0.98) !important;
  opacity: 1 !important;
  text-shadow:
    0 0 10px rgba(150, 255, 242, 0.35),
    0 0 24px rgba(150, 255, 242, 0.18),
    0 3px 16px rgba(0, 0, 0, 0.74) !important;
}

.gsapSafeStory .isStrongWord {
  font-weight: 390 !important;
}

/* Small top-left sound button. */

.soundToggle {
  left: 14px !important;
  top: 12px !important;
  z-index: 100500 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 98px !important;
  height: auto !important;
  padding: 7px 9px !important;
  border-radius: 999px !important;
  font-size: 7.5px !important;
  line-height: 1 !important;
  letter-spacing: 0.12em !important;
  white-space: nowrap !important;
  background: rgba(2, 12, 13, 0.50) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Restored final-map lower-left mission panel. */

.mapMissionOverlay {
  pointer-events: none !important;
}

.mapMissionInner {
  border: 1px solid rgba(159, 255, 243, 0.20);
  border-radius: 18px;
  padding: 16px 18px 14px;
  background: rgba(2, 6, 7, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 16px 44px rgba(0,0,0,0.28),
    inset 0 0 0 1px rgba(255,255,255,0.025);
}

.mapMissionTop {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(159, 255, 243, 0.88);
  text-transform: uppercase;
}

.mapMissionTitle {
  font-size: 25px;
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: rgba(240,248,246,0.94);
  margin-bottom: 10px;
  font-weight: 600;
}

.mapMissionBody {
  margin: 0;
  font-size: 12px;
  line-height: 1.56;
  color: rgba(208,224,220,0.64);
}

.mapMissionBars {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.mapMissionBars span {
  height: 4px;
  border-radius: 999px;
  transition: 220ms ease;
}

@media (max-width: 768px) {
  .gsapSafeStory .cinematicStoryTitle {
    font-size: clamp(23px, 6.6vw, 31px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.048em !important;
  }

  .gsapSafeStoryCard,
  .gsapSafeStory.right .gsapSafeStoryCard {
    padding: 15px 16px 19px !important;
  }

  .soundToggle {
    left: 10px !important;
    top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    padding: 6px 8px !important;
    font-size: 7px !important;
    letter-spacing: 0.10em !important;
  }

  .mapMissionOverlay {
    left: 16px !important;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
  }

  .mapMissionTitle {
    font-size: 20px;
  }

  .mapMissionBody {
    font-size: 10.5px;
  }
}

/* -------------------------------------------------------------------------- */

/* V82 FINAL CLIPPING + PERSISTENT MAP PANEL + SMOOTH PERFORMANCE              */

/* -------------------------------------------------------------------------- */

/* Prevent ACT letter tips/descenders from being cut by panel or word wrappers. */

.cinematicStoryLayer,
.cinematicStoryCard,
.gsapSafeStory,
.gsapSafeStoryCard,
.gsapSafeStory .cinematicStoryTitle,
.gsapSafeStory .storyWord,
.gsapSafeStory .storyChar {
  overflow: visible !important;
}

.gsapSafeStoryCard {
  padding: 26px 30px 34px 28px !important;
  clip-path: none !important;
  contain: none !important;
  border-radius: 0 24px 24px 0 !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

.gsapSafeStory.right .gsapSafeStoryCard {
  border-radius: 24px 0 0 24px !important;
}

.gsapSafeStory .cinematicStoryTitle {
  line-height: 1.24 !important;
  padding: 0.12em 0.08em 0.28em !important;
  margin: -0.06em -0.08em -0.10em !important;
  max-width: none !important;
  text-wrap: balance;
}

.gsapSafeStory .storyWord {
  line-height: 1.28 !important;
  padding-top: 0.12em !important;
  padding-bottom: 0.26em !important;
  vertical-align: baseline !important;
}

.gsapSafeStory .storyChar {
  padding-top: 0.04em !important;
  padding-bottom: 0.12em !important;
}

/* Keep the final map mission panel on-screen permanently after map reveal. */

.mapMissionOverlay.alwaysVisible,
.mapMissionOverlay.persistent {
  display: block !important;
  visibility: visible !important;
  z-index: 9005 !important;
}

.site.act-map .mapMissionOverlay {
  opacity: 0.96 !important;
  transform: translate3d(0, 0, 0) !important;
}

.mapMissionInner {
  background: rgba(2, 6, 7, 0.90) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Reduce expensive full-screen overlay cost without changing the main visual language. */

.rainGlass {
  opacity: min(var(--rainOpacity, 0), 0.08) !important;
}

.rainStreaks span:nth-child(n+10),
.slidingDroplets span:nth-child(n+3) {
  display: none !important;
}

.noise {
  opacity: 0.018 !important;
}

@media (max-width: 768px) {
  .gsapSafeStoryCard,
  .gsapSafeStory.right .gsapSafeStoryCard {
    padding: 17px 18px 24px !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }

  .gsapSafeStory .cinematicStoryTitle {
    line-height: 1.20 !important;
    padding-bottom: 0.30em !important;
  }

  .mapMissionOverlay.alwaysVisible {
    left: 16px !important;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
  }
}

/* -------------------------------------------------------------------------- */

/* V83 FINAL TEXT SPACING + SMOOTH SCROLL + PERFORMANCE                        */

/* -------------------------------------------------------------------------- */

/* Keep clipping fixed by enlarging the panel safe area, not by huge word padding. */

.gsapSafeStory {
  width: min(650px, calc(100vw - 92px)) !important;
}

.gsapSafeStoryCard {
  width: min(625px, 100%) !important;
  padding: 30px 34px 32px 28px !important;
  overflow: visible !important;
  clip-path: none !important;
  contain: none !important;
  border-radius: 0 24px 24px 0 !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

.gsapSafeStory.right .gsapSafeStoryCard {
  padding: 30px 28px 32px 34px !important;
  border-radius: 24px 0 0 24px !important;
}

/* Restore elegant old-like typography spacing. */

.gsapSafeStory .cinematicStoryTitle {
  font-size: clamp(32px, 3.25vw, 41px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.060em !important;
  padding: 0.06em 0.02em 0.12em !important;
  margin: 0 !important;
  overflow: visible !important;
  text-wrap: balance;
}

.gsapSafeStory .storyWord {
  display: inline-block !important;
  white-space: nowrap !important;
  overflow: visible !important;
  line-height: 1.04 !important;
  padding: 0 !important;
  margin: 0 !important;
  vertical-align: baseline !important;
}

.gsapSafeStory .storyChar {
  display: inline-block !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  will-change: transform, opacity, filter !important;
}

.gsapSafeStory .storySpace {
  white-space: pre !important;
}

/* Extra transparent hit/safe bleed so glow does not feel clipped. */

.gsapSafeStoryCard::after {
  content: "";
  position: absolute;
  inset: -18px -22px -22px -10px;
  pointer-events: none;
}

.gsapSafeStory .storyChar.isMuted {
  color: rgba(184, 206, 201, 0.46) !important;
  opacity: 0.86 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.62) !important;
}

.gsapSafeStory .storyChar.isStrong {
  color: rgba(246, 255, 253, 0.98) !important;
  opacity: 1 !important;
  text-shadow:
    0 0 9px rgba(150, 255, 242, 0.32),
    0 0 22px rgba(150, 255, 242, 0.16),
    0 3px 15px rgba(0, 0, 0, 0.72) !important;
}

/* Reduce expensive full-screen effects a little more, without changing the main scene look. */

.rainGlass {
  opacity: min(var(--rainOpacity, 0), 0.055) !important;
}

.rainStreaks span:nth-child(n+8),
.slidingDroplets span:nth-child(n+2) {
  display: none !important;
}

.noise {
  opacity: 0.012 !important;
}

/* Keep map mission visible. */

.site.act-map .mapMissionOverlay,
.mapMissionOverlay.alwaysVisible,
.mapMissionOverlay.persistent {
  display: block !important;
  visibility: visible !important;
}

/* Mobile final spacing */

@media (max-width: 768px) {
  .gsapSafeStory,
  .gsapSafeStory.right {
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
  }

  .gsapSafeStoryCard,
  .gsapSafeStory.right .gsapSafeStoryCard {
    width: 100% !important;
    padding: 18px 18px 22px !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
  }

  .gsapSafeStory .cinematicStoryTitle {
    font-size: clamp(24px, 6.8vw, 32px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.052em !important;
  }
}

/* -------------------------------------------------------------------------- */

/* V84 MAP ICON SIZE FIX: 2X CISTERN ICONS                                     */

/* -------------------------------------------------------------------------- */

/* Doubles the final MapLibre cistern icons without touching map logic. */

body .site .viewport .mapLibreCrystalStage .mlLogoMarker,
body .site .viewport .mapRevealLayer .mlLogoMarker,
body .mapLibreCrystalStage .mlLogoMarker {
  --logo-size: 124px !important;
  --logo-hover-size: 140px !important;
  --logo-active-size: 132px !important;
  --ring-size: 196px !important;
  --ring-glow: 22px !important;
  min-width: 182px !important;
  min-height: 182px !important;
}

body .site .viewport .mapLibreCrystalStage .mlLogoMarkerInner,
body .site .viewport .mapRevealLayer .mlLogoMarkerInner,
body .mapLibreCrystalStage .mlLogoMarkerInner {
  width: var(--logo-size) !important;
  height: var(--logo-size) !important;
}

body .site .viewport .mapLibreCrystalStage .mlLogoMarkerIcon,
body .site .viewport .mapRevealLayer .mlLogoMarkerIcon,
body .mapLibreCrystalStage .mlLogoMarkerIcon {
  width: var(--logo-size) !important;
  height: var(--logo-size) !important;
}

body .site .viewport .mapLibreCrystalStage .mlLogoMarker:hover .mlLogoMarkerIcon,
body .site .viewport .mapLibreCrystalStage .mlLogoMarker.is-hovered .mlLogoMarkerIcon,
body .site .viewport .mapRevealLayer .mlLogoMarker:hover .mlLogoMarkerIcon,
body .site .viewport .mapRevealLayer .mlLogoMarker.is-hovered .mlLogoMarkerIcon,
body .mapLibreCrystalStage .mlLogoMarker:hover .mlLogoMarkerIcon,
body .mapLibreCrystalStage .mlLogoMarker.is-hovered .mlLogoMarkerIcon {
  width: var(--logo-hover-size) !important;
  height: var(--logo-hover-size) !important;
}

body .site .viewport .mapLibreCrystalStage .mlLogoMarker.is-active .mlLogoMarkerIcon,
body .site .viewport .mapRevealLayer .mlLogoMarker.is-active .mlLogoMarkerIcon,
body .mapLibreCrystalStage .mlLogoMarker.is-active .mlLogoMarkerIcon {
  width: var(--logo-active-size) !important;
  height: var(--logo-active-size) !important;
}

/* Mobile should still be larger, but not so huge that nodes overlap badly. */

@media (max-width: 768px) {
  body .site .viewport .mapLibreCrystalStage .mlLogoMarker,
  body .site .viewport .mapRevealLayer .mlLogoMarker,
  body .mapLibreCrystalStage .mlLogoMarker {
    --logo-size: 94px !important;
    --logo-hover-size: 106px !important;
    --logo-active-size: 100px !important;
    --ring-size: 148px !important;
    min-width: 132px !important;
    min-height: 132px !important;
  }
}

/* -------------------------------------------------------------------------- */

/* V85 PORTAL PERFORMANCE + ACT TIMING FINAL                                   */

/* -------------------------------------------------------------------------- */

/* During the portal-heavy section, full-screen glass/rain overlays add cost.
   Keep the atmosphere but reduce the expensive layer. */

.site.act-roots .rainGlass,
.site.act-reactivation .rainGlass,
.site.act-map .rainGlass {
  opacity: 0.035 !important;
}

.site.act-roots .noise,
.site.act-reactivation .noise,
.site.act-map .noise {
  opacity: 0.008 !important;
}

/* Keep ACT 04/map story quick and readable without long lingering. */

.gsapSafeStory .cinematicStoryTitle {
  text-wrap: balance;
}

/* Map mission panel must remain visible after final map reveal. */

.site.act-map .mapMissionOverlay,
.mapMissionOverlay.alwaysVisible,
.mapMissionOverlay.persistent {
  display: block !important;
  visibility: visible !important;
  opacity: 0.96 !important;
}

/* -------------------------------------------------------------------------- */

/* V86 MOBILE LAYOUT FIX: NO OVERLAPPING PANELS                                */

/* -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  .viewport {
    overflow: hidden !important;
  }

  /* On mobile, only the key story panel should remain. Guide creates overlap. */
  .cinematicGuideLayer,
  .storyProgress,
  .storyNextHint,
  .storyRoles,
  .readout,
  .iceReadout {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Intro copy: smaller, safer and not fighting the 3D intro. */
  .introOpeningTitle,
  .cinematicIntroMinimal .introOpeningTitle {
    left: 18px !important;
    right: 18px !important;
    top: auto !important;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    z-index: 24 !important;
  }

  .introOpeningTitle span {
    font-size: 8px !important;
    letter-spacing: 0.20em !important;
  }

  .introOpeningTitle b {
    display: block !important;
    font-size: clamp(28px, 9vw, 42px) !important;
    line-height: 0.94 !important;
    letter-spacing: -0.075em !important;
    max-width: 92vw !important;
  }

  .introOpeningTitle small {
    display: block !important;
    max-width: 88vw !important;
    font-size: 10.5px !important;
    line-height: 1.45 !important;
    opacity: 0.58 !important;
  }

  .cinematicIntroNav,
  .nav.cinematicIntroNav {
    left: 12px !important;
    right: 12px !important;
    top: calc(14px + env(safe-area-inset-top, 0px)) !important;
    width: auto !important;
  }

  .cinematicScrollHint {
    right: 18px !important;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    transform: scale(0.86) !important;
    transform-origin: right bottom !important;
  }

  /* ACT panels: one clean panel, centered enough, never colliding with sound/map UI. */
  .gsapSafeStory,
  .gsapSafeStory.right,
  .cinematicStoryLayer.gsapSafeStory,
  .cinematicStoryLayer.gsapSafeStory.right {
    left: 14px !important;
    right: 14px !important;
    top: auto !important;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: calc(100vw - 28px) !important;
    text-align: left !important;
    z-index: 9050 !important;
  }

  .gsapSafeStoryCard,
  .gsapSafeStory.right .gsapSafeStoryCard,
  .cinematicStoryCard.gsapSafeStoryCard {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 15px 16px 18px !important;
    border-left: 1px solid rgba(150, 255, 240, 0.24) !important;
    border-right: none !important;
    border-radius: 0 15px 15px 0 !important;
    background:
      linear-gradient(90deg, rgba(2, 6, 7, 0.62), rgba(2, 6, 7, 0.34) 72%, rgba(2, 6, 7, 0.06)),
      radial-gradient(circle at 0% 0%, rgba(116, 255, 244, 0.08), transparent 48%) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }

  .gsapSafeStory .cinematicStoryKicker {
    margin-bottom: 8px !important;
    font-size: 7px !important;
    letter-spacing: 0.18em !important;
  }

  .gsapSafeStory .cinematicStoryTitle {
    font-size: clamp(22px, 7.4vw, 31px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.052em !important;
    padding: 0.03em 0 0.08em !important;
    margin: 0 !important;
    max-width: none !important;
    text-wrap: balance;
  }

  .gsapSafeStory .storyWord {
    line-height: 1.04 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .gsapSafeStory .storyChar {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Sound button: tiny and always out of the ACT panel's way. */
  .soundToggle {
    left: 10px !important;
    top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    padding: 6px 8px !important;
    max-width: 86px !important;
    font-size: 6.5px !important;
    letter-spacing: 0.09em !important;
    z-index: 100500 !important;
  }

  /* Map mission panel: only final map, bottom card. */
  .mapMissionOverlay,
  .mapMissionOverlay.alwaysVisible,
  .mapMissionOverlay.persistent {
    display: none !important;
  }

  .site.act-map .mapMissionOverlay,
  .site.act-map .mapMissionOverlay.alwaysVisible,
  .site.act-map .mapMissionOverlay.persistent {
    display: block !important;
    visibility: visible !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    z-index: 9020 !important;
    opacity: 0.94 !important;
  }

  .site.act-map .gsapSafeStory {
    bottom: calc(176px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mapMissionInner {
    padding: 12px 13px 11px !important;
    border-radius: 14px !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
  }

  .mapMissionTop {
    font-size: 7px !important;
    letter-spacing: 0.15em !important;
    margin-bottom: 7px !important;
  }

  .mapMissionTitle {
    font-size: 17px !important;
    line-height: 1.06 !important;
    margin-bottom: 6px !important;
  }

  .mapMissionBody {
    font-size: 9.5px !important;
    line-height: 1.42 !important;
  }

  .mapMissionBars {
    margin-top: 9px !important;
    gap: 4px !important;
  }

  .mapMissionBars span {
    height: 3px !important;
  }

  /* 2x desktop icons were too aggressive for mobile. Keep them larger, but controlled. */
  body .site .viewport .mapLibreCrystalStage .mlLogoMarker,
  body .site .viewport .mapRevealLayer .mlLogoMarker,
  body .mapLibreCrystalStage .mlLogoMarker {
    --logo-size: 64px !important;
    --logo-hover-size: 72px !important;
    --logo-active-size: 68px !important;
    --ring-size: 104px !important;
    min-width: 92px !important;
    min-height: 92px !important;
  }

  /* Disable expensive decorative overlays on mobile. */
  .rainGlass,
  .mouseTrail,
  .noise {
    display: none !important;
  }

  .shade {
    opacity: 0.18 !important;
  }
}

@media (max-width: 389px) {
  .gsapSafeStory,
  .gsapSafeStory.right,
  .cinematicStoryLayer.gsapSafeStory {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    max-width: calc(100vw - 20px) !important;
  }

  .gsapSafeStoryCard {
    padding: 13px 14px 16px !important;
  }

  .gsapSafeStory .cinematicStoryTitle {
    font-size: clamp(20px, 7vw, 27px) !important;
    line-height: 1.03 !important;
  }

  .site.act-map .gsapSafeStory {
    bottom: calc(166px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mapMissionTitle {
    font-size: 15px !important;
  }

  .mapMissionBody {
    font-size: 8.8px !important;
  }
}

/* Landscape phones: panels go to the side and stay low. */

@media (max-width: 900px) and (orientation: landscape) {
  .introOpeningTitle {
    left: 18px !important;
    right: auto !important;
    bottom: 22px !important;
    width: 46vw !important;
  }

  .introOpeningTitle b {
    font-size: clamp(22px, 5vw, 34px) !important;
  }

  .gsapSafeStory,
  .gsapSafeStory.right {
    left: 14px !important;
    right: auto !important;
    bottom: 18px !important;
    width: 46vw !important;
    max-width: 46vw !important;
  }

  .gsapSafeStory .cinematicStoryTitle {
    font-size: clamp(20px, 4vw, 30px) !important;
  }

  .site.act-map .mapMissionOverlay {
    left: 14px !important;
    right: auto !important;
    width: 42vw !important;
    bottom: 14px !important;
  }

  .site.act-map .gsapSafeStory {
    display: none !important;
  }
}

/* -------------------------------------------------------------------------- */

/* V87 MOBILE SCROLL + OVERLAP FIX                                             */

/* -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  /* Let vertical swipes scroll the page, even when a fixed WebGL/map layer is under the finger. */
  .site,
  .viewport,
  .mapRevealLayer,
  .mapLibreCrystalStage,
  .maplibregl-map,
  .maplibregl-canvas-container,
  .maplibregl-canvas {
    touch-action: pan-y !important;
    overscroll-behavior: auto !important;
  }

  /* MapLibre controls/canvas should not trap vertical scroll.
     Icons/panels remain clickable because their marker elements keep pointer events. */
  .maplibregl-canvas {
    pointer-events: none !important;
  }

  .mapLibreCrystalStage .mlLogoMarker,
  .mapRevealLayer .mlLogoMarker,
  .mapMissionOverlay,
  .mapMissionOverlay * {
    pointer-events: auto !important;
  }

  /* The huge SceneLab analyze/readout panels are the main overlap problem on mobile.
     Hide them; keep the cinematic ACT card and final map panel. */
  .cisternSceneHost [class*="Readout"],
  .cisternSceneHost [class*="readout"],
  .cisternSceneHost [class*="Info"],
  .cisternSceneHost [class*="info"],
  .cisternSceneHost [class*="Panel"],
  .cisternSceneHost [class*="panel"],
  .cisternSceneHost [class*="Analyze"],
  .cisternSceneHost [class*="analyze"],
  .cisternSceneHost [class*="Hint"],
  .cisternSceneHost [class*="hint"],
  .cisternSceneHost [class*="Role"],
  .cisternSceneHost [class*="role"],
  .cisternSceneHost button,
  .cisternSceneHost aside {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* But don't hide the canvas itself. */
  .cisternSceneHost canvas,
  .cisternSceneHost div:has(canvas) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* On final map, ACT text should leave. Map mission panel becomes the only text panel. */
  .site.act-map .gsapSafeStory,
  .site.act-map .cinematicStoryLayer.gsapSafeStory {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Final map panel: smaller and lower, not over the hidden lab panel. */
  .site.act-map .mapMissionOverlay,
  .site.act-map .mapMissionOverlay.alwaysVisible,
  .site.act-map .mapMissionOverlay.persistent {
    display: block !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    z-index: 9060 !important;
    opacity: 0.94 !important;
  }

  .site.act-map .mapMissionInner {
    padding: 10px 12px 10px !important;
    border-radius: 13px !important;
    background: rgba(2, 6, 7, 0.82) !important;
  }

  .site.act-map .mapMissionTop {
    font-size: 6.5px !important;
    letter-spacing: 0.13em !important;
    margin-bottom: 6px !important;
  }

  .site.act-map .mapMissionTitle {
    font-size: 15.5px !important;
    line-height: 1.08 !important;
    margin-bottom: 5px !important;
  }

  .site.act-map .mapMissionBody {
    font-size: 8.5px !important;
    line-height: 1.35 !important;
  }

  .site.act-map .mapMissionBars {
    margin-top: 8px !important;
  }

  /* During non-map ACTs, prevent story card from covering too much of the mobile scene. */
  .gsapSafeStory,
  .gsapSafeStory.right,
  .cinematicStoryLayer.gsapSafeStory {
    bottom: calc(52px + env(safe-area-inset-bottom, 0px)) !important;
    left: 12px !important;
    right: 12px !important;
    max-width: calc(100vw - 24px) !important;
  }

  .gsapSafeStoryCard,
  .cinematicStoryCard.gsapSafeStoryCard {
    padding: 13px 14px 15px !important;
    max-height: 35vh !important;
  }

  .gsapSafeStory .cinematicStoryTitle {
    font-size: clamp(19px, 6.4vw, 27px) !important;
    line-height: 1.02 !important;
  }

  .gsapSafeStory .cinematicStoryKicker {
    font-size: 6.5px !important;
    margin-bottom: 7px !important;
  }

  /* Sound button: even smaller on mobile. */
  .soundToggle {
    left: 9px !important;
    top: calc(9px + env(safe-area-inset-top, 0px)) !important;
    padding: 5px 7px !important;
    font-size: 6px !important;
    max-width: 78px !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  .site.act-map .mapMissionOverlay {
    width: 38vw !important;
    left: 10px !important;
    right: auto !important;
    bottom: 10px !important;
  }

  .site.act-map .mapMissionTitle {
    font-size: 14px !important;
  }

  .site.act-map .mapMissionBody {
    display: none !important;
  }

  .gsapSafeStory,
  .gsapSafeStory.right {
    width: 42vw !important;
    max-width: 42vw !important;
    bottom: 12px !important;
  }
}

/* -------------------------------------------------------------------------- */

/* V88 MOBILE TRUE FIX: DISABLE INTERNAL SCENELAB STORY PANEL                  */

/* -------------------------------------------------------------------------- */

/* App now passes showStory={false} to CisternSceneLab on mobile.
   These CSS rules are a hard backup for any remaining internal overlay. */

@media (max-width: 768px) {
  .site.isMobileLayout .cisternSceneHost .labStoryOverlay,
  .site.isMobileLayout .cisternSceneHost .labStoryPanel,
  .site.isMobileLayout .cisternSceneHost .sceneStoryOverlay,
  .site.isMobileLayout .cisternSceneHost .sceneStoryPanel,
  .site.isMobileLayout .cisternSceneHost .analyzePanel,
  .site.isMobileLayout .cisternSceneHost .analysisPanel,
  .site.isMobileLayout .cisternSceneHost .crystalAnalyzePanel,
  .site.isMobileLayout .cisternSceneHost .crystalStoryPanel,
  .site.isMobileLayout .cisternSceneHost .crystalReadout,
  .site.isMobileLayout .cisternSceneHost .nodeReadout,
  .site.isMobileLayout .cisternSceneHost .labReadout,
  .site.isMobileLayout .cisternSceneHost [data-story],
  .site.isMobileLayout .cisternSceneHost [data-panel],
  .site.isMobileLayout .cisternSceneHost [data-readout] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Important: final map must not show ACT story over mission panel. */
  .site.isMobileLayout.act-map .gsapSafeStory,
  .site.isMobileLayout.act-map .cinematicStoryLayer,
  .site.isMobileLayout.act-map .cinematicStoryCard {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Make the remaining ACT card smaller and not centered over lab UI. */
  .site.isMobileLayout:not(.act-map) .gsapSafeStory,
  .site.isMobileLayout:not(.act-map) .cinematicStoryLayer.gsapSafeStory {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(46px + env(safe-area-inset-bottom, 0px)) !important;
    max-width: calc(100vw - 24px) !important;
    z-index: 9060 !important;
  }

  .site.isMobileLayout:not(.act-map) .gsapSafeStoryCard,
  .site.isMobileLayout:not(.act-map) .cinematicStoryCard.gsapSafeStoryCard {
    max-height: 28vh !important;
    padding: 11px 13px 13px !important;
    background:
      linear-gradient(90deg, rgba(2, 6, 7, 0.52), rgba(2, 6, 7, 0.25) 72%, rgba(2, 6, 7, 0.04)) !important;
  }

  .site.isMobileLayout:not(.act-map) .gsapSafeStory .cinematicStoryTitle {
    font-size: clamp(18px, 5.8vw, 25px) !important;
    line-height: 1.02 !important;
  }

  .site.isMobileLayout:not(.act-map) .gsapSafeStory .cinematicStoryKicker {
    font-size: 6px !important;
    letter-spacing: 0.16em !important;
    margin-bottom: 6px !important;
  }

  /* Final map: mission panel only, compact. */
  .site.isMobileLayout.act-map .mapMissionOverlay,
  .site.isMobileLayout.act-map .mapMissionOverlay.alwaysVisible,
  .site.isMobileLayout.act-map .mapMissionOverlay.persistent {
    display: block !important;
    visibility: visible !important;
    opacity: 0.94 !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    z-index: 9070 !important;
  }

  /* User must be able to scroll back up from map. */
  .site.isMobileLayout .mapRevealLayer,
  .site.isMobileLayout .mapLibreCrystalStage,
  .site.isMobileLayout .maplibregl-map,
  .site.isMobileLayout .maplibregl-canvas,
  .site.isMobileLayout .maplibregl-canvas-container {
    touch-action: pan-y !important;
    overscroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------- */

/* V92 MOBILE BLACK SCREEN FIX                                                 */

/* -------------------------------------------------------------------------- */

/* The previous mobile hard-hide rules were too broad and could hide the R3F
   canvas wrapper. SceneLab must stay visible; only known DOM UI overlays are
   suppressed. */

@media (max-width: 900px) {
  .site.isMobileLayout .cisternSceneHost,
  .site.isMobileLayout .cisternSceneHost canvas {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .site.isMobileLayout .cisternSceneHost {
    pointer-events: none !important;
    touch-action: pan-y !important;
  }

  .site.isMobileLayout .cisternSceneHost canvas {
    pointer-events: none !important;
    touch-action: pan-y !important;
  }

  /* Re-show canvas wrappers in case earlier CSS touched them. */
  .site.isMobileLayout .cisternSceneHost > div,
  .site.isMobileLayout .cisternSceneHost div {
    visibility: visible !important;
  }

  /* Safe overlay hiding: do NOT target every [class] or every div.
     Only target likely UI/readout/panel names. */
  .site.isMobileLayout .cisternSceneHost [class*="readout" i],
  .site.isMobileLayout .cisternSceneHost [class*="analyze" i],
  .site.isMobileLayout .cisternSceneHost [class*="infoPanel" i],
  .site.isMobileLayout .cisternSceneHost [class*="storyPanel" i],
  .site.isMobileLayout .cisternSceneHost [class*="storyOverlay" i],
  .site.isMobileLayout .cisternSceneHost [class*="crystalPanel" i],
  .site.isMobileLayout .cisternSceneHost [class*="nodePanel" i],
  .site.isMobileLayout .cisternSceneHost [class*="labPanel" i],
  .site.isMobileLayout .cisternSceneHost [class*="hudPanel" i] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* On the final map, hide ACT story so only map mission remains. */
  .site.isMobileLayout.act-map .gsapSafeStory,
  .site.isMobileLayout.act-map .cinematicStoryLayer.gsapSafeStory {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .site.isMobileLayout.act-map .mapMissionOverlay,
  .site.isMobileLayout.act-map .mapMissionOverlay.alwaysVisible,
  .site.isMobileLayout.act-map .mapMissionOverlay.persistent {
    display: block !important;
    visibility: visible !important;
    opacity: 0.94 !important;
  }

  .site.isMobileLayout .mapRevealLayer,
  .site.isMobileLayout .mapLibreCrystalStage,
  .site.isMobileLayout .maplibregl-map,
  .site.isMobileLayout .maplibregl-canvas-container,
  .site.isMobileLayout .maplibregl-canvas {
    touch-action: pan-y !important;
    overscroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------- */

/* V93 MOBILE SAFE: CRYSTAL ANALYZE PANEL OFF, CANVAS SAFE                     */

/* -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .site.isMobileLayout .cisternSceneHost,
  .site.isMobileLayout .cisternSceneHost canvas {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .site.isMobileLayout .cisternSceneHost {
    pointer-events: none !important;
    touch-action: pan-y !important;
  }

  .site.isMobileLayout .cisternSceneHost canvas {
    pointer-events: none !important;
    touch-action: pan-y !important;
  }

  /* Do not show ACT story on final map; map mission panel stays alone. */
  .site.isMobileLayout.act-map .gsapSafeStory,
  .site.isMobileLayout.act-map .cinematicStoryLayer.gsapSafeStory {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .site.isMobileLayout.act-map .mapMissionOverlay,
  .site.isMobileLayout.act-map .mapMissionOverlay.alwaysVisible,
  .site.isMobileLayout.act-map .mapMissionOverlay.persistent {
    display: block !important;
    visibility: visible !important;
    opacity: 0.94 !important;
    z-index: 9070 !important;
  }

  /* Mobile visual polish: stronger story glow, smaller safe card. */
  .site.isMobileLayout:not(.act-map) .gsapSafeStory,
  .site.isMobileLayout:not(.act-map) .cinematicStoryLayer.gsapSafeStory {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(50px + env(safe-area-inset-bottom, 0px)) !important;
    max-width: calc(100vw - 24px) !important;
    z-index: 9060 !important;
  }

  .site.isMobileLayout:not(.act-map) .gsapSafeStoryCard,
  .site.isMobileLayout:not(.act-map) .cinematicStoryCard.gsapSafeStoryCard {
    padding: 13px 14px 15px !important;
    border-left: 1px solid rgba(156, 255, 242, 0.32) !important;
    border-radius: 0 16px 16px 0 !important;
    background:
      linear-gradient(90deg, rgba(2, 7, 8, 0.66), rgba(2, 7, 8, 0.34) 68%, rgba(2, 7, 8, 0.08)),
      radial-gradient(circle at 0% 0%, rgba(116, 255, 244, 0.14), transparent 54%) !important;
    box-shadow:
      0 18px 52px rgba(0, 0, 0, 0.30),
      0 0 26px rgba(127, 255, 238, 0.06) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
  }

  .site.isMobileLayout:not(.act-map) .gsapSafeStory .cinematicStoryTitle {
    font-size: clamp(20px, 6.4vw, 28px) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.055em !important;
  }

  .site.isMobileLayout .gsapSafeStory .storyChar.isStrong {
    color: rgba(248,255,253,0.98) !important;
    text-shadow:
      0 0 10px rgba(150,255,242,0.42),
      0 0 24px rgba(150,255,242,0.24),
      0 3px 15px rgba(0,0,0,0.74) !important;
  }

  .site.isMobileLayout .gsapSafeStory .storyChar.isMuted {
    color: rgba(196, 220, 215, 0.54) !important;
  }

  /* Add a subtle mobile cinematic wash without expensive blur overlays. */
  .site.isMobileLayout .viewport::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    background:
      radial-gradient(circle at 50% 46%, rgba(96,255,235,0.045), transparent 38%),
      linear-gradient(180deg, rgba(0,0,0,0.12), transparent 26%, rgba(0,0,0,0.24));
  }

  .site.isMobileLayout .mapRevealLayer,
  .site.isMobileLayout .mapLibreCrystalStage,
  .site.isMobileLayout .maplibregl-map,
  .site.isMobileLayout .maplibregl-canvas-container,
  .site.isMobileLayout .maplibregl-canvas {
    touch-action: pan-y !important;
    overscroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------- */

/* V94 VISUAL CLARITY BALANCED                                                 */

/* -------------------------------------------------------------------------- */

/* Fix mobile pixelated look without returning to heavy ultra settings. */

.cisternSceneHost canvas,
.introSceneLayer canvas,
.mapRevealLayer canvas,
.maplibregl-canvas {
  image-rendering: auto !important;
  image-rendering: smooth !important;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.cisternSceneHost img,
.mapRevealLayer img,
.mapLibreCrystalStage img,
.mlLogoMarkerIcon {
  image-rendering: auto !important;
  image-rendering: smooth !important;
}

@media (max-width: 900px) {
  /* Keep the scene crisp while staying lighter than desktop. */
  .site.isMobileLayout .cisternSceneHost {
    filter: contrast(1.025) saturate(1.04);
  }

  .site.isMobileLayout .gsapSafeStoryCard {
    box-shadow:
      0 18px 52px rgba(0,0,0,0.32),
      0 0 28px rgba(127,255,238,0.07) !important;
  }
}

/* -------------------------------------------------------------------------- */

/* V95 MOBILE CRISP QUALITY                                                    */

/* -------------------------------------------------------------------------- */

/* The remaining pixelated look was caused by too-low mobile DPR.
   V95 raises DPR moderately and keeps particles/bloom controlled. */

.cisternSceneHost canvas,
.introSceneLayer canvas,
.mapRevealLayer canvas,
.maplibregl-canvas {
  image-rendering: auto !important;
  -ms-interpolation-mode: bicubic;
}

@media (max-width: 900px) {
  .site.isMobileLayout .cisternSceneHost {
    filter: saturate(1.05) contrast(1.02);
  }

  /* Avoid browser upscaling artifacts. */
  .site.isMobileLayout .cisternSceneHost canvas {
    width: 100% !important;
    height: 100% !important;
  }
}

/* -------------------------------------------------------------------------- */

/* V97 RESTORE DESKTOP CRYSTAL PANEL                                           */

/* -------------------------------------------------------------------------- */

/* Desktop/web crystal analyze/info panel is restored.
   Mobile still disables SceneLab internal panels via component logic, not broad CSS. */

@media (min-width: 901px) {
  .cisternSceneHost {
    pointer-events: auto !important;
  }

  .cisternSceneHost [class*="readout" i],
  .cisternSceneHost [class*="analyze" i],
  .cisternSceneHost [class*="info" i],
  .cisternSceneHost [class*="panel" i],
  .cisternSceneHost button,
  .cisternSceneHost aside {
    visibility: visible;
  }
}

/* -------------------------------------------------------------------------- */

/* V98 INTEL SAFE PERFORMANCE                                                  */

/* -------------------------------------------------------------------------- */

/* Presentation-safe performance for Intel / integrated GPU machines.
   Keeps the project stable and smooth; avoids high DPR and expensive overlays. */

.cisternSceneHost canvas,
.introSceneLayer canvas {
  image-rendering: auto !important;
}

.rainGlass,
.mouseTrail {
  display: none !important;
}

.noise {
  opacity: 0.006 !important;
}

.shade {
  opacity: 0.12 !important;
}

/* Blur/backdrop filters are expensive on school laptops; reduce them globally. */

.cinematicStoryCard,
.gsapSafeStoryCard,
.mapMissionInner,
.soundToggle {
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}

/* Keep the visual style through opacity/glow rather than GPU-heavy blur. */

.gsapSafeStory .storyChar.isStrong {
  text-shadow:
    0 0 8px rgba(150,255,242,0.30),
    0 0 18px rgba(150,255,242,0.13),
    0 2px 12px rgba(0,0,0,0.72) !important;
}

.gsapSafeStory .storyChar.isMuted {
  color: rgba(190, 214, 209, 0.50) !important;
}

@media (max-width: 900px) {
  .site.isMobileLayout .viewport::after {
    background:
      radial-gradient(circle at 50% 46%, rgba(96,255,235,0.035), transparent 36%),
      linear-gradient(180deg, rgba(0,0,0,0.10), transparent 26%, rgba(0,0,0,0.20)) !important;
  }

  .site.isMobileLayout .cisternSceneHost {
    filter: saturate(1.02) contrast(1.01) !important;
  }
}

/* -------------------------------------------------------------------------- */

/* V99 BOOT LOADER TIMEOUT FIX                                                 */

/* -------------------------------------------------------------------------- */

.loaderSkipButton {
  position: fixed;
  right: 18px;
  top: calc(16px + env(safe-area-inset-top, 0px));
  z-index: 1000000;
  border: 1px solid rgba(159, 255, 243, 0.25);
  border-radius: 999px;
  padding: 8px 11px;
  background: rgba(2, 8, 9, 0.46);
  color: rgba(230, 255, 250, 0.74);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;
  letter-spacing: 0.18em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.loaderSkipButton:active {
  transform: scale(0.96);
}

@media (max-width: 768px) {
  .loaderSkipButton {
    right: 12px;
    top: calc(12px + env(safe-area-inset-top, 0px));
    padding: 7px 9px;
    font-size: 7px;
    letter-spacing: 0.14em;
  }

  .cinematicLoaderCenter {
    transform: scale(0.86);
  }

  .cinematicLoaderTopline {
    left: 14px !important;
    right: 14px !important;
    font-size: 8px !important;
  }
}

/* -------------------------------------------------------------------------- */

/* V100 RUNTIME BLACK SCREEN FIX                                               */

/* -------------------------------------------------------------------------- */

/* Fixes ReferenceError from stale allowCrystalInfoPanels variable. */

/* -------------------------------------------------------------------------- */

/* V101 REMOVE CRYSTAL FLAG SCOPE ERROR                                        */

/* -------------------------------------------------------------------------- */

/* Removes crystalInfoEnabled runtime variable references.
   Desktop panel is restored; mobile internal crystal panel is gated inside SceneLab with !mobile. */

/* -------------------------------------------------------------------------- */

/* V102 BALANCED INTEL + RESPONSIVE ANALYZE PANEL                              */

/* -------------------------------------------------------------------------- */

/* Better approach than v98: keep DPR readable, cut heavy effects instead. */

.cisternSceneHost canvas,
.introSceneLayer canvas {
  image-rendering: auto !important;
}

/* Keep expensive overlays low, but not visually dead. */

.rainGlass,
.mouseTrail {
  display: none !important;
}

.noise {
  opacity: 0.008 !important;
}

.shade {
  opacity: 0.14 !important;
}

.gsapSafeStoryCard,
.mapMissionInner,
.soundToggle {
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}

/* Crystal analyze / info panel responsive scaling for small laptops. */

@media (max-width: 1366px), (max-height: 760px) {
  .cisternSceneHost .crystalAnalyzePanel,
  .cisternSceneHost .crystalInfoPanel,
  .cisternSceneHost .crystalStoryPanel,
  .cisternSceneHost .labStoryPanel,
  .cisternSceneHost .sceneStoryPanel,
  .cisternSceneHost .analysisPanel,
  .cisternSceneHost .analyzePanel,
  .cisternSceneHost [class*="Analyze" i],
  .cisternSceneHost [class*="InfoPanel" i],
  .cisternSceneHost [class*="StoryPanel" i],
  .cisternSceneHost [class*="Readout" i] {
    max-width: min(420px, 42vw) !important;
    max-height: min(54vh, 420px) !important;
    padding: clamp(12px, 1.2vw, 18px) !important;
    font-size: clamp(10px, 0.82vw, 13px) !important;
    line-height: 1.36 !important;
    overflow: auto !important;
  }

  .cisternSceneHost .crystalAnalyzePanel h1,
  .cisternSceneHost .crystalAnalyzePanel h2,
  .cisternSceneHost .crystalInfoPanel h1,
  .cisternSceneHost .crystalInfoPanel h2,
  .cisternSceneHost [class*="Analyze" i] h1,
  .cisternSceneHost [class*="Analyze" i] h2,
  .cisternSceneHost [class*="InfoPanel" i] h1,
  .cisternSceneHost [class*="InfoPanel" i] h2 {
    font-size: clamp(18px, 1.65vw, 28px) !important;
    line-height: 1.02 !important;
  }

  .cisternSceneHost .crystalAnalyzePrompt {
    transform: translateX(-50%) scale(0.84) !important;
    bottom: 5.5vh !important;
  }
}

/* Very small laptop / projector resolution */

@media (max-width: 1180px), (max-height: 680px) {
  .cisternSceneHost .crystalAnalyzePanel,
  .cisternSceneHost .crystalInfoPanel,
  .cisternSceneHost .analysisPanel,
  .cisternSceneHost .analyzePanel,
  .cisternSceneHost [class*="Analyze" i],
  .cisternSceneHost [class*="InfoPanel" i],
  .cisternSceneHost [class*="StoryPanel" i],
  .cisternSceneHost [class*="Readout" i] {
    max-width: min(360px, 40vw) !important;
    max-height: 48vh !important;
    padding: 10px 12px !important;
    font-size: 10px !important;
  }

  .cisternSceneHost [class*="Analyze" i] p,
  .cisternSceneHost [class*="InfoPanel" i] p,
  .cisternSceneHost [class*="StoryPanel" i] p,
  .cisternSceneHost [class*="Readout" i] p {
    margin: 6px 0 !important;
  }
}

/* Mobile remains panel-free internally; only external ACT story. */

@media (max-width: 900px) {
  .site.isMobileLayout .cisternSceneHost {
    filter: saturate(1.03) contrast(1.015) !important;
  }
}

/* -------------------------------------------------------------------------- */

/* V103 REMOVE LOADER SKIP BUTTON                                              */

/* -------------------------------------------------------------------------- */

/* Timeout fallback remains active, but the visible SKIP button is hidden. */

.loaderSkipButton {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* -------------------------------------------------------------------------- */

/* V104 ARCHITECTURE PERFORMANCE                                               */

/* -------------------------------------------------------------------------- */

/* Main performance fix: less React re-rendering + no long SceneLab/Map overlap. */

.mouseTrail {
  display: none !important;
}

.cisternSceneHost {
  contain: layout paint size;
}

.mapRevealLayer {
  contain: layout paint size;
}

/* Keep panels readable without expensive blur. */

.gsapSafeStoryCard,
.cinematicStoryCard,
.mapMissionInner,
.soundToggle {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Small laptop analyze panel safety retained and tightened. */

@media (max-width: 1366px), (max-height: 760px) {
  .cisternSceneHost [class*="Analyze" i],
  .cisternSceneHost [class*="InfoPanel" i],
  .cisternSceneHost [class*="StoryPanel" i],
  .cisternSceneHost [class*="Readout" i] {
    max-width: min(390px, 40vw) !important;
    max-height: 50vh !important;
    font-size: clamp(9.5px, 0.78vw, 12px) !important;
  }
}

/* -------------------------------------------------------------------------- */

/* V105 COMPACT SCREEN: NO ANALYZE / ACT OVERLAP                               */

/* -------------------------------------------------------------------------- */

/* Small laptops/projectors are desktop, but their height is too small for both
   the crystal analyze panel and ACT story panel. App now hides external ACT
   while the crystal panel is active. These CSS rules are fallback/safety. */

.site.isCompactLayout:not(.isMobileLayout) .cisternSceneHost [class*="Analyze" i],
.site.isCompactLayout:not(.isMobileLayout) .cisternSceneHost [class*="InfoPanel" i],
.site.isCompactLayout:not(.isMobileLayout) .cisternSceneHost [class*="StoryPanel" i],
.site.isCompactLayout:not(.isMobileLayout) .cisternSceneHost [class*="Readout" i] {
  max-width: min(360px, 38vw) !important;
  max-height: 46vh !important;
  padding: 10px 12px !important;
  font-size: clamp(9px, 0.74vw, 11.5px) !important;
  line-height: 1.34 !important;
  overflow: auto !important;
}

/* In compact desktop layouts, if story is still visible for any reason,
   make it smaller and lower-priority so it doesn't cover the analyze panel. */

.site.isCompactLayout:not(.isMobileLayout) .gsapSafeStory {
  width: min(440px, 34vw) !important;
  top: auto !important;
  bottom: 5.2vh !important;
  opacity: min(var(--storyOpacityNow, 1), 0.72) !important;
}

.site.isCompactLayout:not(.isMobileLayout) .gsapSafeStoryCard {
  padding: 14px 16px 16px !important;
  background: rgba(2, 7, 8, 0.46) !important;
}

.site.isCompactLayout:not(.isMobileLayout) .gsapSafeStory .cinematicStoryTitle {
  font-size: clamp(22px, 2.1vw, 31px) !important;
  line-height: 1.02 !important;
}

.site.isCompactLayout:not(.isMobileLayout) .gsapSafeStory .cinematicStoryKicker {
  font-size: 7px !important;
  margin-bottom: 8px !important;
}

@media (max-height: 680px) and (min-width: 901px) {
  .site.isCompactLayout:not(.isMobileLayout) .gsapSafeStory {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .site.isCompactLayout:not(.isMobileLayout) .cisternSceneHost [class*="Analyze" i],
  .site.isCompactLayout:not(.isMobileLayout) .cisternSceneHost [class*="InfoPanel" i],
  .site.isCompactLayout:not(.isMobileLayout) .cisternSceneHost [class*="StoryPanel" i],
  .site.isCompactLayout:not(.isMobileLayout) .cisternSceneHost [class*="Readout" i] {
    max-height: 52vh !important;
  }
}

/* -------------------------------------------------------------------------- */

/* V106 ARCHITECTURE VISUAL LIFT                                               */

/* -------------------------------------------------------------------------- */

/* Visual upgrade using cheap color/exposure/panel contrast, not heavy effects.
   Keeps v104/v105 architecture performance improvements. */

.viewport {
  background:
    radial-gradient(circle at 50% 42%, rgba(93, 255, 235, 0.055), transparent 34%),
    radial-gradient(circle at 50% 82%, rgba(42, 132, 126, 0.055), transparent 46%),
    #031011 !important;
}

.cisternSceneHost {
  filter: brightness(1.08) contrast(1.035) saturate(1.08);
}

.mapRevealLayer {
  filter: brightness(1.04) contrast(1.02) saturate(1.04);
}

/* Keep panels readable but avoid expensive backdrop blur. */

.gsapSafeStoryCard,
.cinematicStoryCard {
  background:
    linear-gradient(90deg, rgba(3, 14, 15, 0.66), rgba(3, 14, 15, 0.34) 70%, rgba(3, 14, 15, 0.08)),
    radial-gradient(circle at 0% 0%, rgba(127, 255, 238, 0.13), transparent 52%) !important;
  border-color: rgba(159, 255, 243, 0.30) !important;
  box-shadow:
    0 18px 58px rgba(0,0,0,0.28),
    0 0 28px rgba(127,255,238,0.055) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.mapMissionInner {
  background:
    linear-gradient(180deg, rgba(3, 14, 15, 0.92), rgba(2, 8, 9, 0.86)) !important;
  border-color: rgba(159, 255, 243, 0.24) !important;
  box-shadow:
    0 18px 50px rgba(0,0,0,0.30),
    0 0 22px rgba(127,255,238,0.045) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Strong words pop again, but no expensive blur filters. */

.gsapSafeStory .storyChar.isStrong {
  color: rgba(248, 255, 253, 0.99) !important;
  text-shadow:
    0 0 10px rgba(150,255,242,0.42),
    0 0 22px rgba(150,255,242,0.18),
    0 2px 12px rgba(0,0,0,0.70) !important;
}

.gsapSafeStory .storyChar.isMuted {
  color: rgba(204, 226, 221, 0.58) !important;
}

/* Analyze panels: lighter readability on compact screens. */

.cisternSceneHost [class*="Analyze" i],
.cisternSceneHost [class*="InfoPanel" i],
.cisternSceneHost [class*="StoryPanel" i],
.cisternSceneHost [class*="Readout" i] {
  color: rgba(234, 252, 248, 0.90);
}

@media (max-width: 900px) {
  .site.isMobileLayout .cisternSceneHost {
    filter: brightness(1.10) contrast(1.025) saturate(1.08) !important;
  }

  .site.isMobileLayout .viewport::after {
    background:
      radial-gradient(circle at 50% 46%, rgba(96,255,235,0.055), transparent 38%),
      linear-gradient(180deg, rgba(0,0,0,0.08), transparent 28%, rgba(0,0,0,0.18)) !important;
  }
}

/* -------------------------------------------------------------------------- */

/* V107 SCENELAB ASSET PRELOAD / WARMUP                                        */

/* -------------------------------------------------------------------------- */

/* Prevents SceneLab from appearing before critical GLB/icon assets are cached. */

.sceneWarmupVeil {
  position: absolute;
  inset: 0;
  z-index: 18;
  display: grid;
  place-items: center;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, rgba(127,255,238,0.055), transparent 34%),
    rgba(2, 8, 9, 0.58);
  color: rgba(218,255,249,0.68);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.sceneWarmupVeil span {
  padding: 9px 13px;
  border: 1px solid rgba(159,255,243,0.18);
  border-radius: 999px;
  background: rgba(2, 10, 11, 0.36);
}

@media (max-width: 768px) {
  .sceneWarmupVeil {
    font-size: 7px;
    letter-spacing: 0.16em;
  }
}

/* -------------------------------------------------------------------------- */

/* V108 SELECTIVE VISUAL BOOST                                                 */

/* -------------------------------------------------------------------------- */

/* Richer look close to earlier versions without undoing architecture fixes.
   Uses cheap color/exposure/glow rather than heavy portal distortion/postprocessing. */

.viewport {
  background:
    radial-gradient(circle at 50% 38%, rgba(104, 255, 238, 0.080), transparent 34%),
    radial-gradient(circle at 50% 86%, rgba(42, 132, 126, 0.075), transparent 48%),
    #041819 !important;
}

/* Large desktop can take a slightly richer cinematic treatment. */

@media (min-width: 1367px) and (min-height: 761px) {
  .cisternSceneHost {
    filter: brightness(1.14) contrast(1.045) saturate(1.13) !important;
  }

  .gsapSafeStoryCard,
  .cinematicStoryCard {
    background:
      linear-gradient(90deg, rgba(3, 16, 17, 0.70), rgba(3, 16, 17, 0.38) 70%, rgba(3, 16, 17, 0.10)),
      radial-gradient(circle at 0% 0%, rgba(127, 255, 238, 0.17), transparent 54%) !important;
    border-color: rgba(159, 255, 243, 0.34) !important;
    box-shadow:
      0 20px 64px rgba(0,0,0,0.30),
      0 0 34px rgba(127,255,238,0.075) !important;
  }

  .mapMissionInner {
    background:
      linear-gradient(180deg, rgba(4, 18, 19, 0.94), rgba(2, 10, 11, 0.88)) !important;
    border-color: rgba(159, 255, 243, 0.28) !important;
  }

  .gsapSafeStory .storyChar.isStrong {
    text-shadow:
      0 0 12px rgba(150,255,242,0.50),
      0 0 28px rgba(150,255,242,0.24),
      0 3px 14px rgba(0,0,0,0.74) !important;
  }

  .gsapSafeStory .storyChar.isMuted {
    color: rgba(211, 232, 227, 0.62) !important;
  }
}

/* Compact/Intel safety: don't over-brighten tiny laptops. */

.site.isCompactLayout:not(.isMobileLayout) .cisternSceneHost {
  filter: brightness(1.07) contrast(1.03) saturate(1.07) !important;
}

/* Mobile remains readable but not too heavy. */

@media (max-width: 900px) {
  .site.isMobileLayout .cisternSceneHost {
    filter: brightness(1.10) contrast(1.025) saturate(1.08) !important;
  }
}

/* -------------------------------------------------------------------------- */

/* V109 TEXTURE FIX + VISUAL BOOST                                             */

/* -------------------------------------------------------------------------- */

.viewport {
  background:
    radial-gradient(circle at 50% 36%, rgba(118, 255, 240, 0.105), transparent 34%),
    radial-gradient(circle at 50% 82%, rgba(54, 160, 148, 0.085), transparent 48%),
    #041b1c !important;
}

@media (min-width: 1367px) and (min-height: 761px) {
  .cisternSceneHost {
    filter: brightness(1.18) contrast(1.05) saturate(1.16) !important;
  }
}

.site.isCompactLayout:not(.isMobileLayout) .cisternSceneHost {
  filter: brightness(1.10) contrast(1.035) saturate(1.10) !important;
}

@media (max-width: 900px) {
  .site.isMobileLayout .cisternSceneHost {
    filter: brightness(1.13) contrast(1.03) saturate(1.11) !important;
  }
}

.sceneWarmupVeil {
  background:
    radial-gradient(circle at 50% 48%, rgba(127,255,238,0.080), transparent 34%),
    rgba(2, 10, 11, 0.66) !important;
}

.gsapSafeStory .storyChar.isStrong {
  text-shadow:
    0 0 13px rgba(150,255,242,0.54),
    0 0 30px rgba(150,255,242,0.25),
    0 3px 14px rgba(0,0,0,0.74) !important;
}

/* -------------------------------------------------------------------------- */

/* V110 PROCEDURAL CISTERN COLUMN MATERIAL FIX                                 */

/* -------------------------------------------------------------------------- */

/* Columns are code-generated, not GLB. This version prevents procedural
   column materials from appearing flat white by tinting them to old stone
   through SceneLab material normalization. */

.cisternSceneHost {
  filter: brightness(1.12) contrast(1.07) saturate(1.12) !important;
}

@media (min-width: 1367px) and (min-height: 761px) {
  .cisternSceneHost {
    filter: brightness(1.15) contrast(1.075) saturate(1.14) !important;
  }
}

.site.isCompactLayout:not(.isMobileLayout) .cisternSceneHost {
  filter: brightness(1.08) contrast(1.06) saturate(1.10) !important;
}

@media (max-width: 900px) {
  .site.isMobileLayout .cisternSceneHost {
    filter: brightness(1.10) contrast(1.055) saturate(1.10) !important;
  }
}

/* -------------------------------------------------------------------------- */

/* V111 PROCEDURAL TEXTURE PRELOAD                                             */

/* -------------------------------------------------------------------------- */

/* Procedural columns are code geometry, but their texture maps now preload
   and white fallback material is replaced with stone tint until maps attach. */

.sceneWarmupVeil span::after {
  content: " / procedural stone maps";
  opacity: 0.55;
}

/* -------------------------------------------------------------------------- */

/* V112 RESTORE ORIGINAL VISUALS + COMPACT ANALYZE                             */

/* -------------------------------------------------------------------------- */

/* Keeps architecture/preload fixes, but returns SceneLab visual tone closer to
   the original dark foggy design-mode look. */

.viewport {
  background:
    radial-gradient(circle at 50% 43%, rgba(72, 180, 170, 0.040), transparent 34%),
    radial-gradient(circle at 50% 86%, rgba(24, 92, 86, 0.045), transparent 48%),
    #041012 !important;
}

/* Remove the over-bright lifted look from v108-v111. */

.cisternSceneHost {
  filter: brightness(1.00) contrast(1.035) saturate(1.02) !important;
}

@media (min-width: 1367px) and (min-height: 761px) {
  .cisternSceneHost {
    filter: brightness(1.02) contrast(1.04) saturate(1.03) !important;
  }
}

.site.isCompactLayout:not(.isMobileLayout) .cisternSceneHost {
  filter: brightness(1.00) contrast(1.04) saturate(1.02) !important;
}

@media (max-width: 900px) {
  .site.isMobileLayout .cisternSceneHost {
    filter: brightness(1.02) contrast(1.035) saturate(1.03) !important;
  }
}

/* Compact desktop: DO NOT hide crystal analyze.
   Instead keep analyze readable and push ACT story into a smaller secondary position. */

.site.isCompactLayout:not(.isMobileLayout) .cisternSceneHost [class*="Analyze" i],
.site.isCompactLayout:not(.isMobileLayout) .cisternSceneHost [class*="InfoPanel" i],
.site.isCompactLayout:not(.isMobileLayout) .cisternSceneHost [class*="StoryPanel" i],
.site.isCompactLayout:not(.isMobileLayout) .cisternSceneHost [class*="Readout" i] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: min(390px, 38vw) !important;
  max-height: 54vh !important;
  overflow: auto !important;
  font-size: clamp(9px, 0.76vw, 12px) !important;
  line-height: 1.34 !important;
}

/* External ACT remains visible on compact screens, but secondary and away from analyze. */

.site.isCompactLayout:not(.isMobileLayout) .gsapSafeStory {
  display: block !important;
  visibility: visible !important;
  width: min(390px, 32vw) !important;
  left: auto !important;
  right: 24px !important;
  top: auto !important;
  bottom: 5vh !important;
  opacity: min(var(--storyOpacityNow, 1), 0.70) !important;
  z-index: 9040 !important;
}

.site.isCompactLayout:not(.isMobileLayout) .gsapSafeStoryCard {
  padding: 12px 14px 14px !important;
  background:
    linear-gradient(90deg, rgba(3, 10, 11, 0.54), rgba(3, 10, 11, 0.24) 72%, rgba(3, 10, 11, 0.06)) !important;
  border-color: rgba(159, 255, 243, 0.20) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,0.24) !important;
}

.site.isCompactLayout:not(.isMobileLayout) .gsapSafeStory .cinematicStoryTitle {
  font-size: clamp(20px, 1.8vw, 28px) !important;
  line-height: 1.02 !important;
}

.site.isCompactLayout:not(.isMobileLayout) .gsapSafeStory .cinematicStoryKicker {
  font-size: 6.5px !important;
  margin-bottom: 7px !important;
}

/* Very short screens: keep analyze, hide only ACT if unavoidable. */

@media (max-height: 630px) and (min-width: 901px) {
  .site.isCompactLayout:not(.isMobileLayout) .gsapSafeStory {
    display: none !important;
  }

  .site.isCompactLayout:not(.isMobileLayout) .cisternSceneHost [class*="Analyze" i],
  .site.isCompactLayout:not(.isMobileLayout) .cisternSceneHost [class*="InfoPanel" i],
  .site.isCompactLayout:not(.isMobileLayout) .cisternSceneHost [class*="StoryPanel" i],
  .site.isCompactLayout:not(.isMobileLayout) .cisternSceneHost [class*="Readout" i] {
    max-height: 58vh !important;
  }
}

/* Strong words stay cinematic, not overblown. */

.gsapSafeStory .storyChar.isStrong {
  text-shadow:
    0 0 9px rgba(150,255,242,0.36),
    0 0 20px rgba(150,255,242,0.15),
    0 3px 13px rgba(0,0,0,0.72) !important;
}

/* -------------------------------------------------------------------------- */

/* V113 COMPACT LAPTOP: KEEP ACT STORY VISIBLE                                 */

/* -------------------------------------------------------------------------- */

/* Small desktop/laptop screens must still show the ACT/hikaye layer.
   Crystal analyze remains visible; ACT becomes a smaller secondary card. */

.site.isCompactLayout:not(.isMobileLayout) .gsapSafeStory,
.site.isCompactLayout:not(.isMobileLayout) .cinematicStoryLayer.gsapSafeStory,
.site.isCompactLayout:not(.isMobileLayout) .cinematicStoryCard.gsapSafeStoryCard {
  display: block !important;
  visibility: visible !important;
  pointer-events: none !important;
}

/* Compact positioning: keep ACT away from the analyze panel. */

.site.isCompactLayout:not(.isMobileLayout) .gsapSafeStory,
.site.isCompactLayout:not(.isMobileLayout) .cinematicStoryLayer.gsapSafeStory {
  width: min(380px, 31vw) !important;
  max-width: min(380px, 31vw) !important;
  left: auto !important;
  right: 22px !important;
  top: auto !important;
  bottom: 4.5vh !important;
  opacity: min(var(--storyOpacityNow, 1), 0.76) !important;
  z-index: 9065 !important;
}

.site.isCompactLayout:not(.isMobileLayout) .gsapSafeStoryCard,
.site.isCompactLayout:not(.isMobileLayout) .cinematicStoryCard.gsapSafeStoryCard {
  padding: 11px 13px 13px !important;
  min-height: 0 !important;
  max-height: 32vh !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(3, 10, 11, 0.54), rgba(3, 10, 11, 0.24) 72%, rgba(3, 10, 11, 0.06)) !important;
  border-color: rgba(159, 255, 243, 0.20) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,0.24) !important;
}

.site.isCompactLayout:not(.isMobileLayout) .gsapSafeStory .cinematicStoryTitle {
  font-size: clamp(18px, 1.62vw, 25px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
}

.site.isCompactLayout:not(.isMobileLayout) .gsapSafeStory .cinematicStoryKicker {
  font-size: 6px !important;
  letter-spacing: 0.15em !important;
  margin-bottom: 6px !important;
}

/* Even on very short laptop screens, don't delete story.
   Make it smaller instead. */

@media (max-height: 630px) and (min-width: 901px) {
  .site.isCompactLayout:not(.isMobileLayout) .gsapSafeStory,
  .site.isCompactLayout:not(.isMobileLayout) .cinematicStoryLayer.gsapSafeStory {
    display: block !important;
    visibility: visible !important;
    width: min(330px, 29vw) !important;
    max-width: min(330px, 29vw) !important;
    right: 16px !important;
    bottom: 3.2vh !important;
    opacity: min(var(--storyOpacityNow, 1), 0.66) !important;
  }

  .site.isCompactLayout:not(.isMobileLayout) .gsapSafeStoryCard {
    padding: 9px 11px 11px !important;
    max-height: 26vh !important;
  }

  .site.isCompactLayout:not(.isMobileLayout) .gsapSafeStory .cinematicStoryTitle {
    font-size: clamp(15px, 1.45vw, 21px) !important;
    line-height: 1.01 !important;
  }

  .site.isCompactLayout:not(.isMobileLayout) .gsapSafeStory .cinematicStoryKicker {
    font-size: 5.5px !important;
    margin-bottom: 5px !important;
  }
}

/* Crystal analyze also stays visible; ACT is secondary, not replacement. */

.site.isCompactLayout:not(.isMobileLayout) .cisternSceneHost [class*="Analyze" i],
.site.isCompactLayout:not(.isMobileLayout) .cisternSceneHost [class*="InfoPanel" i],
.site.isCompactLayout:not(.isMobileLayout) .cisternSceneHost [class*="StoryPanel" i],
.site.isCompactLayout:not(.isMobileLayout) .cisternSceneHost [class*="Readout" i] {
  display: block !important;
  visibility: visible !important;
}

/* -------------------------------------------------------------------------- */

/* V114 V83 VISUAL RESTORE / KEEP ARCHITECTURE                                 */

/* -------------------------------------------------------------------------- */

/* Final visual reset: keep v104-v113 architecture/preload/compact fixes, but
   restore SceneLab tone to the v83 dark foggy design look. */

.viewport {
  background:
    radial-gradient(circle at 50% 43%, rgba(72, 180, 170, 0.030), transparent 34%),
    radial-gradient(circle at 50% 86%, rgba(24, 92, 86, 0.035), transparent 48%),
    #020b0a !important;
}

/* Kill over-bright visual boost filters from v106-v113. */

.cisternSceneHost,
.site.isCompactLayout:not(.isMobileLayout) .cisternSceneHost,
.site.isMobileLayout .cisternSceneHost {
  filter: none !important;
}

@media (min-width: 1367px) and (min-height: 761px) {
  .cisternSceneHost {
    filter: none !important;
  }
}

.mapRevealLayer {
  filter: none !important;
}

/* Restore darker cinematic panels close to v83; keep no expensive blur. */

.gsapSafeStoryCard,
.cinematicStoryCard {
  background:
    linear-gradient(90deg, rgba(2, 8, 9, 0.60), rgba(2, 8, 9, 0.30) 70%, rgba(2, 8, 9, 0.06)),
    radial-gradient(circle at 0% 0%, rgba(127, 255, 238, 0.08), transparent 52%) !important;
  border-color: rgba(159, 255, 243, 0.22) !important;
  box-shadow:
    0 18px 56px rgba(0,0,0,0.30),
    0 0 20px rgba(127,255,238,0.040) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.mapMissionInner {
  background:
    linear-gradient(180deg, rgba(2, 8, 9, 0.90), rgba(1, 5, 6, 0.84)) !important;
  border-color: rgba(159, 255, 243, 0.20) !important;
  box-shadow: 0 16px 46px rgba(0,0,0,0.30) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* v83-like word glow: readable, not overblown. */

.gsapSafeStory .storyChar.isStrong {
  text-shadow:
    0 0 9px rgba(150,255,242,0.34),
    0 0 18px rgba(150,255,242,0.13),
    0 3px 13px rgba(0,0,0,0.72) !important;
}

.gsapSafeStory .storyChar.isMuted {
  color: rgba(190, 214, 209, 0.50) !important;
}

/* Keep compact laptop ACT visible but don't let it dominate. */

.site.isCompactLayout:not(.isMobileLayout) .gsapSafeStory,
.site.isCompactLayout:not(.isMobileLayout) .cinematicStoryLayer.gsapSafeStory {
  display: block !important;
  visibility: visible !important;
  width: min(380px, 31vw) !important;
  max-width: min(380px, 31vw) !important;
  left: auto !important;
  right: 22px !important;
  top: auto !important;
  bottom: 4.5vh !important;
  opacity: min(var(--storyOpacityNow, 1), 0.76) !important;
  z-index: 9065 !important;
}

.site.isCompactLayout:not(.isMobileLayout) .cisternSceneHost [class*="Analyze" i],
.site.isCompactLayout:not(.isMobileLayout) .cisternSceneHost [class*="InfoPanel" i],
.site.isCompactLayout:not(.isMobileLayout) .cisternSceneHost [class*="StoryPanel" i],
.site.isCompactLayout:not(.isMobileLayout) .cisternSceneHost [class*="Readout" i] {
  display: block !important;
  visibility: visible !important;
}

/* Warmup veil should not visually replace SceneLab style. */

.sceneWarmupVeil {
  background:
    radial-gradient(circle at 50% 48%, rgba(127,255,238,0.035), transparent 34%),
    rgba(2, 8, 9, 0.46) !important;
}

/* -------------------------------------------------------------------------- */

/* V117 RESTORE V83 SCENELAB / REMOVE TEXTURE EXPERIMENTS                      */

/* -------------------------------------------------------------------------- */

/* CisternSceneLab.jsx is restored from v83 exactly.
   All later texture warmup/material fallback experiments are disabled. */

.sceneWarmupVeil {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Keep v83 SceneLab visual tone. */

.cisternSceneHost,
.site.isCompactLayout:not(.isMobileLayout) .cisternSceneHost,
.site.isMobileLayout .cisternSceneHost {
  filter: none !important;
}

/* -------------------------------------------------------------------------- */

/* V119 COLUMN TEXTURE READY GATE                                              */

/* -------------------------------------------------------------------------- */

/* Original column textures stay enabled. ColumnHall waits until diffuse+normal
   maps are ready, preventing the white fallback flash without recoloring. */

/* -------------------------------------------------------------------------- */

/* V120 EARLY MOUNT SCENELAB TEXTURES                                          */

/* -------------------------------------------------------------------------- */

/* SceneLab now mounts earlier while invisible so column textures can load
   before the user reaches the scene. Do not hide the canvas with display:none. */

.cisternSceneHost {
  display: block !important;
}

/* -------------------------------------------------------------------------- */

/* V122 MOBILE ANALYZE OFF                                                     */

/* -------------------------------------------------------------------------- */

/* Mobile must not show internal crystal analyze/info panels.
   Desktop and compact laptop keep analyze panel. */

@media (max-width: 900px) {
  .site.isMobileLayout .cisternSceneHost [class*="Analyze" i],
  .site.isMobileLayout .cisternSceneHost [class*="InfoPanel" i],
  .site.isMobileLayout .cisternSceneHost [class*="StoryPanel" i],
  .site.isMobileLayout .cisternSceneHost [class*="Readout" i],
  .site.isMobileLayout .cisternSceneHost [class*="crystalStory" i],
  .site.isMobileLayout .cisternSceneHost [class*="crystalInfo" i],
  .site.isMobileLayout .cisternSceneHost [class*="analysis" i],
  .site.isMobileLayout .cisternSceneHost [class*="analyze" i],
  .site.isMobileLayout .cisternSceneHost [class*="readout" i] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .site.isMobileLayout .cisternSceneHost {
    pointer-events: none !important;
    touch-action: pan-y !important;
  }

  .site.isMobileLayout .cisternSceneHost canvas {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }
}

/* -------------------------------------------------------------------------- */

/* V124 MOBILE SHARPNESS ONLY                                                  */

/* -------------------------------------------------------------------------- */

/* Only mobile clarity is improved. Desktop/laptop visual tone remains v123. */

@media (max-width: 900px) {
  .site.isMobileLayout .cisternSceneHost canvas,
  .site.isMobileLayout .introSceneLayer canvas,
  .site.isMobileLayout .mapRevealLayer canvas,
  .site.isMobileLayout .maplibregl-canvas {
    image-rendering: auto !important;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  .site.isMobileLayout .cisternSceneHost {
    /* very subtle edge clarity without changing lighting/fog */
    filter: contrast(1.015) saturate(1.015) !important;
  }
}

@media (min-width: 901px) {
  /* Explicitly keep desktop/laptop from v123 unchanged. */
  .cisternSceneHost {
    filter: none !important;
  }
}

/* -------------------------------------------------------------------------- */

/* V127 RESTORE V100 MAP HOVER / NO MAP FILES                                  */

/* -------------------------------------------------------------------------- */

/* Do not override MapLibre component internals. The real map files in the repo
   stay untouched. This restores v100-style layer ownership so the map's own
   hover logic can receive pointer/mousemove events normally. */

/* Map layer only receives events in final visible phase, as in v100. */

.mapRevealLayer {
  z-index: 8000 !important;
  pointer-events: none;
}

.mapRevealLayer.visible {
  pointer-events: auto;
}

/* Let the actual map component/canvas handle hover. Do not force child rules. */

.mapRevealLayer .maplibregl-map,
.mapRevealLayer .maplibregl-canvas-container,
.mapRevealLayer .maplibregl-canvas {
  pointer-events: auto;
}

/* Keep desktop hover normal. */

@media (min-width: 901px) {
  .mapRevealLayer,
  .mapRevealLayer.visible,
  .mapRevealLayer .maplibregl-map,
  .mapRevealLayer .maplibregl-canvas-container,
  .mapRevealLayer .maplibregl-canvas {
    touch-action: auto;
  }
}

/* Keep mobile scroll behavior. */

@media (max-width: 900px) {
  .mapRevealLayer .maplibregl-canvas {
    touch-action: pan-y;
  }
}

/* -------------------------------------------------------------------------- */

/* V130 EMERGENCY NO CRASH                                                     */

/* -------------------------------------------------------------------------- */

/* Removes reverse portal/mapProgressForScene runtime risk.
   Keeps map files untouched and lowers WebGL context pressure. */

@media (max-width: 900px) {
  .site.isMobileLayout .cisternSceneHost canvas {
    image-rendering: auto !important;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  .site.isMobileLayout .cisternSceneHost {
    filter: contrast(1.018) saturate(1.018) !important;
  }
}

@media (min-width: 901px) {
  .cisternSceneHost {
    filter: none !important;
  }
}

/* -------------------------------------------------------------------------- */

/* V131 FIX APP SYNTAX                                                         */

/* -------------------------------------------------------------------------- */

/* Fixes Vite build syntax error near App.jsx line 3777. */

/* -------------------------------------------------------------------------- */

/* V134 NO MAPLIBRE TOUCH / RESTORE MAP HOVER                                  */

/* -------------------------------------------------------------------------- */

/* MapLibre component files are not changed. This only fixes App/CSS layer
   ownership so the existing MapLibre hover code can receive mousemove events. */

/* Map must sit above SceneLab once map is visible. */

.mapRevealLayer {
  z-index: 9200 !important;
  pointer-events: none !important;
}

.mapRevealLayer.visible,
.site .mapRevealLayer.visible {
  pointer-events: auto !important;
}

/* Let existing MapLibre canvas/layers receive mousemove. */

.mapRevealLayer.visible .maplibregl-map,
.mapRevealLayer.visible .maplibregl-canvas-container,
.mapRevealLayer.visible .maplibregl-canvas,
.mapRevealLayer.visible .mapLibreCrystalStage {
  pointer-events: auto !important;
}

/* During map phase, SceneLab must not cover the map and steal hover. */

.site:has(.mapRevealLayer.visible) .cisternSceneHost {
  pointer-events: none !important;
}

/* Story/panels should not block the map hover. */

.site:has(.mapRevealLayer.visible) .gsapSafeStory,
.site:has(.mapRevealLayer.visible) .cinematicStoryLayer,
.site:has(.mapRevealLayer.visible) .cinematicStoryCard,
.site:has(.mapRevealLayer.visible) .mapMissionPanel,
.site:has(.mapRevealLayer.visible) .mapMissionInner {
  pointer-events: none !important;
}

/* Desktop hover: keep mousemove normal. */

@media (min-width: 901px) {
  .mapRevealLayer.visible,
  .mapRevealLayer.visible .maplibregl-map,
  .mapRevealLayer.visible .maplibregl-canvas-container,
  .mapRevealLayer.visible .maplibregl-canvas {
    touch-action: auto !important;
    cursor: crosshair !important;
  }
}

/* Mobile: let vertical page scroll win, but do not affect desktop hover. */

@media (max-width: 900px) {
  .mapRevealLayer.visible .maplibregl-canvas {
    touch-action: pan-y !important;
  }
}

/* Fallback for browsers without :has(): when map is visible, it is above everything anyway. */

.mapRevealLayer.visible {
  isolation: isolate;
}

/* -------------------------------------------------------------------------- */

/* V140 FINAL MOBILE MAP ICONS + QUALITY                                       */

/* -------------------------------------------------------------------------- */

/* Mobile map icons must be clickable. Do not let earlier mobile scroll fixes
   disable MapLibre markers. */

@media (max-width: 900px) {
  .site.isMobileLayout .mapRevealLayer.visible {
    pointer-events: auto !important;
  }

  .site.isMobileLayout .mapRevealLayer.visible .maplibregl-map,
  .site.isMobileLayout .mapRevealLayer.visible .maplibregl-canvas-container,
  .site.isMobileLayout .mapRevealLayer.visible .mapLibreCrystalStage {
    pointer-events: auto !important;
  }

  /* Canvas can receive map gestures only in map phase; markers must always click. */
  .site.isMobileLayout .mapRevealLayer.visible .maplibregl-canvas {
    pointer-events: auto !important;
    touch-action: pan-x pan-y !important;
  }

  .site.isMobileLayout .mapRevealLayer.visible .maplibregl-marker,
  .site.isMobileLayout .mapRevealLayer.visible .mlLogoMarker,
  .site.isMobileLayout .mapRevealLayer.visible .mlCisternMarker,
  .site.isMobileLayout .mapRevealLayer.visible .cisternMarker,
  .site.isMobileLayout .mapRevealLayer.visible .mapMarker,
  .site.isMobileLayout .mapRevealLayer.visible [class*="Marker" i],
  .site.isMobileLayout .mapRevealLayer.visible [class*="marker" i],
  .site.isMobileLayout .mapRevealLayer.visible button {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
  }

  .site.isMobileLayout .cisternSceneHost {
    filter: contrast(1.022) saturate(1.02) !important;
  }
}
.maplibregl-map{font:12px/20px Helvetica Neue,Arial,Helvetica,sans-serif;overflow:hidden;position:relative;-webkit-tap-highlight-color:rgb(0 0 0/0)}.maplibregl-canvas{left:0;position:absolute;top:0}.maplibregl-map:fullscreen{height:100%;width:100%}.maplibregl-ctrl-group button.maplibregl-ctrl-compass{touch-action:none}.maplibregl-canvas-container.maplibregl-interactive,.maplibregl-ctrl-group button.maplibregl-ctrl-compass{cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none}.maplibregl-canvas-container.maplibregl-interactive.maplibregl-track-pointer{cursor:pointer}.maplibregl-canvas-container.maplibregl-interactive:active,.maplibregl-ctrl-group button.maplibregl-ctrl-compass:active{cursor:grabbing}.maplibregl-canvas-container.maplibregl-touch-zoom-rotate,.maplibregl-canvas-container.maplibregl-touch-zoom-rotate .maplibregl-canvas{touch-action:pan-x pan-y}.maplibregl-canvas-container.maplibregl-touch-drag-pan,.maplibregl-canvas-container.maplibregl-touch-drag-pan .maplibregl-canvas{touch-action:pinch-zoom}.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan,.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan .maplibregl-canvas{touch-action:none}.maplibregl-canvas-container.maplibregl-touch-drag-pan.maplibregl-cooperative-gestures,.maplibregl-canvas-container.maplibregl-touch-drag-pan.maplibregl-cooperative-gestures .maplibregl-canvas{touch-action:pan-x pan-y}.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right,.maplibregl-ctrl-top-left,.maplibregl-ctrl-top-right{pointer-events:none;position:absolute;z-index:2}.maplibregl-ctrl-top-left{left:0;top:0}.maplibregl-ctrl-top-right{right:0;top:0}.maplibregl-ctrl-bottom-left{bottom:0;left:0}.maplibregl-ctrl-bottom-right{bottom:0;right:0}.maplibregl-ctrl{clear:both;pointer-events:auto;transform:translate(0)}.maplibregl-ctrl-top-left .maplibregl-ctrl{float:left;margin:10px 0 0 10px}.maplibregl-ctrl-top-right .maplibregl-ctrl{float:right;margin:10px 10px 0 0}.maplibregl-ctrl-bottom-left .maplibregl-ctrl{float:left;margin:0 0 10px 10px}.maplibregl-ctrl-bottom-right .maplibregl-ctrl{float:right;margin:0 10px 10px 0}.maplibregl-ctrl-group{background:#fff;border-radius:4px}.maplibregl-ctrl-group:not(:empty){box-shadow:0 0 0 2px rgba(0,0,0,.1)}@media (forced-colors:active){.maplibregl-ctrl-group:not(:empty){box-shadow:0 0 0 2px ButtonText}}.maplibregl-ctrl-group button{background-color:transparent;border:0;box-sizing:border-box;cursor:pointer;display:block;height:29px;outline:none;padding:0;width:29px}.maplibregl-ctrl-group button+button{border-top:1px solid #ddd}.maplibregl-ctrl button .maplibregl-ctrl-icon{background-position:50%;background-repeat:no-repeat;display:block;height:100%;width:100%}@media (forced-colors:active){.maplibregl-ctrl-icon{background-color:transparent}.maplibregl-ctrl-group button+button{border-top:1px solid ButtonText}}.maplibregl-ctrl button::-moz-focus-inner{border:0;padding:0}.maplibregl-ctrl-attrib-button:focus,.maplibregl-ctrl-group button:focus{box-shadow:0 0 2px 2px #0096ff}.maplibregl-ctrl button:disabled{cursor:not-allowed}.maplibregl-ctrl button:disabled .maplibregl-ctrl-icon{opacity:.25}.maplibregl-ctrl button:not(:disabled):hover{background-color:rgb(0 0 0/5%)}.maplibregl-ctrl-group button:focus:focus-visible{box-shadow:0 0 2px 2px #0096ff}.maplibregl-ctrl-group button:focus:not(:focus-visible){box-shadow:none}.maplibregl-ctrl-group button:focus:first-child{border-radius:4px 4px 0 0}.maplibregl-ctrl-group button:focus:last-child{border-radius:0 0 4px 4px}.maplibregl-ctrl-group button:focus:only-child{border-radius:inherit}.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5'/%3E%3C/svg%3E")}@media (forced-colors:active){.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5'/%3E%3C/svg%3E")}}@media (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5'/%3E%3C/svg%3E")}}.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1z'/%3E%3C/svg%3E")}@media (forced-colors:active){.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1z'/%3E%3C/svg%3E")}}@media (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1z'/%3E%3C/svg%3E")}}.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='m10.5 14 4-8 4 8z'/%3E%3Cpath fill='%23ccc' d='m10.5 16 4 8 4-8z'/%3E%3C/svg%3E")}@media (forced-colors:active){.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='m10.5 14 4-8 4 8z'/%3E%3Cpath fill='%23ccc' d='m10.5 16 4 8 4-8z'/%3E%3C/svg%3E")}}@media (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='m10.5 14 4-8 4 8z'/%3E%3Cpath fill='%23ccc' d='m10.5 16 4 8 4-8z'/%3E%3C/svg%3E")}}.maplibregl-ctrl button.maplibregl-ctrl-terrain .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='%23333' viewBox='0 0 22 22'%3E%3Cpath d='m1.754 13.406 4.453-4.851 3.09 3.09 3.281 3.277.969-.969-3.309-3.312 3.844-4.121 6.148 6.886h1.082v-.855l-7.207-8.07-4.84 5.187L6.169 6.57l-5.48 5.965v.871ZM.688 16.844h20.625v1.375H.688Zm0 0'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-terrain-enabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='%2333b5e5' viewBox='0 0 22 22'%3E%3Cpath d='m1.754 13.406 4.453-4.851 3.09 3.09 3.281 3.277.969-.969-3.309-3.312 3.844-4.121 6.148 6.886h1.082v-.855l-7.207-8.07-4.84 5.187L6.169 6.57l-5.48 5.965v.871ZM.688 16.844h20.625v1.375H.688Zm0 0'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23aaa' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath fill='red' d='m14 5 1 1-9 9-1-1z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%2333b5e5' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active-error .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23e58978' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%2333b5e5' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background-error .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23e54e33' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-waiting .maplibregl-ctrl-icon{animation:maplibregl-spin 2s linear infinite}@media (forced-colors:active){.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23999' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath fill='red' d='m14 5 1 1-9 9-1-1z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%2333b5e5' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active-error .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23e58978' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%2333b5e5' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background-error .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23e54e33' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3C/svg%3E")}}@media (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23666' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath fill='red' d='m14 5 1 1-9 9-1-1z'/%3E%3C/svg%3E")}}@keyframes maplibregl-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}a.maplibregl-ctrl-logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='23' fill='none'%3E%3Cpath fill='%23000' fill-opacity='.4' fill-rule='evenodd' d='M17.408 16.796h-1.827l2.501-12.095h.198l3.324 6.533.988 2.19.988-2.19 3.258-6.533h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.929 5.644h-.098l-2.914-5.644-.757-1.71-.345 1.71zm1.958-3.42-.726 3.663a1.255 1.255 0 0 1-1.232 1.011h-1.827a1.255 1.255 0 0 1-1.229-1.509l2.501-12.095a1.255 1.255 0 0 1 1.23-1.001h.197a1.25 1.25 0 0 1 1.12.685l3.19 6.273 3.125-6.263a1.25 1.25 0 0 1 1.123-.695h.181a1.255 1.255 0 0 1 1.227.991l1.443 6.71a5 5 0 0 1 .314-.787l.009-.016a4.6 4.6 0 0 1 1.777-1.887c.782-.46 1.668-.667 2.611-.667a4.6 4.6 0 0 1 1.7.32l.306.134c.21-.16.474-.256.759-.256h1.694a1.255 1.255 0 0 1 1.212.925 1.255 1.255 0 0 1 1.212-.925h1.711c.284 0 .545.094.755.252.613-.3 1.312-.45 2.075-.45 1.356 0 2.557.445 3.482 1.4q.47.48.763 1.064V4.701a1.255 1.255 0 0 1 1.255-1.255h1.86A1.255 1.255 0 0 1 54.44 4.7v9.194h2.217c.19 0 .37.043.532.118v-4.77c0-.356.147-.678.385-.906a2.42 2.42 0 0 1-.682-1.71c0-.665.267-1.253.735-1.7a2.45 2.45 0 0 1 1.722-.674 2.43 2.43 0 0 1 1.705.675q.318.302.504.683V4.7a1.255 1.255 0 0 1 1.255-1.255h1.744A1.255 1.255 0 0 1 65.812 4.7v3.335a4.8 4.8 0 0 1 1.526-.246c.938 0 1.817.214 2.59.69a4.47 4.47 0 0 1 1.67 1.743v-.98a1.255 1.255 0 0 1 1.256-1.256h1.777c.233 0 .451.064.639.174a3.4 3.4 0 0 1 1.567-.372c.346 0 .861.02 1.285.232a1.25 1.25 0 0 1 .689 1.004 4.7 4.7 0 0 1 .853-.588c.795-.44 1.675-.647 2.61-.647 1.385 0 2.65.39 3.525 1.396.836.938 1.168 2.173 1.168 3.528q-.001.515-.056 1.051a1.255 1.255 0 0 1-.947 1.09l.408.952a1.255 1.255 0 0 1-.477 1.552c-.418.268-.92.463-1.458.612-.613.171-1.304.244-2.049.244-1.06 0-2.043-.207-2.886-.698l-.015-.008c-.798-.48-1.419-1.135-1.818-1.963l-.004-.008a5.8 5.8 0 0 1-.548-2.512q0-.429.053-.843a1.3 1.3 0 0 1-.333-.086l-.166-.004c-.223 0-.426.062-.643.228-.03.024-.142.139-.142.59v3.883a1.255 1.255 0 0 1-1.256 1.256h-1.777a1.255 1.255 0 0 1-1.256-1.256V15.69l-.032.057a4.8 4.8 0 0 1-1.86 1.833 5.04 5.04 0 0 1-2.484.634 4.5 4.5 0 0 1-1.935-.424 1.25 1.25 0 0 1-.764.258h-1.71a1.255 1.255 0 0 1-1.256-1.255V7.687a2.4 2.4 0 0 1-.428.625c.253.23.412.561.412.93v7.553a1.255 1.255 0 0 1-1.256 1.255h-1.843a1.25 1.25 0 0 1-.894-.373c-.228.23-.544.373-.894.373H51.32a1.255 1.255 0 0 1-1.256-1.255v-1.251l-.061.117a4.7 4.7 0 0 1-1.782 1.884 4.77 4.77 0 0 1-2.485.67 5.6 5.6 0 0 1-1.485-.188l.009 2.764a1.255 1.255 0 0 1-1.255 1.259h-1.729a1.255 1.255 0 0 1-1.255-1.255v-3.537a1.255 1.255 0 0 1-1.167.793h-1.679a1.25 1.25 0 0 1-.77-.263 4.5 4.5 0 0 1-1.945.429c-.885 0-1.724-.21-2.495-.632l-.017-.01a5 5 0 0 1-1.081-.836 1.255 1.255 0 0 1-1.254 1.312h-1.81a1.255 1.255 0 0 1-1.228-.99l-.782-3.625-2.044 3.939a1.25 1.25 0 0 1-1.115.676h-.098a1.25 1.25 0 0 1-1.116-.68l-2.061-3.994zM35.92 16.63l.207-.114.223-.15q.493-.356.735-.785l.061-.118.033 1.332h1.678V9.242h-1.694l-.033 1.267q-.133-.329-.526-.658l-.032-.028a3.2 3.2 0 0 0-.668-.428l-.27-.12a3.3 3.3 0 0 0-1.235-.23q-1.136-.001-1.974.493a3.36 3.36 0 0 0-1.3 1.382q-.445.89-.444 2.074 0 1.2.51 2.107a3.8 3.8 0 0 0 1.382 1.381 3.9 3.9 0 0 0 1.893.477q.795 0 1.455-.33zm-2.789-5.38q-.576.675-.575 1.762 0 1.102.559 1.794.576.675 1.645.675a2.25 2.25 0 0 0 .934-.19 2.2 2.2 0 0 0 .468-.29l.178-.161a2.2 2.2 0 0 0 .397-.561q.244-.5.244-1.15v-.115q0-.708-.296-1.267l-.043-.077a2.2 2.2 0 0 0-.633-.709l-.13-.086-.047-.028a2.1 2.1 0 0 0-1.073-.285q-1.052 0-1.629.692zm2.316 2.706c.163-.17.28-.407.28-.83v-.114c0-.292-.06-.508-.15-.68a.96.96 0 0 0-.353-.389.85.85 0 0 0-.464-.127c-.4 0-.56.114-.664.239l-.01.012c-.148.174-.275.45-.275.945 0 .506.122.801.27.99.097.11.266.224.68.224.303 0 .504-.09.687-.269zm7.545 1.705a2.6 2.6 0 0 0 .331.423q.319.33.755.548l.173.074q.65.255 1.49.255 1.02 0 1.844-.493a3.45 3.45 0 0 0 1.316-1.4q.493-.904.493-2.089 0-1.909-.988-2.913-.988-1.02-2.584-1.02-.898 0-1.575.347a3 3 0 0 0-.415.262l-.199.166a3.4 3.4 0 0 0-.64.82V9.242h-1.712v11.553h1.729l-.017-5.134zm.53-1.138q.206.29.48.5l.155.11.053.034q.51.296 1.119.297 1.07 0 1.645-.675.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.435 0-.835.16a2 2 0 0 0-.284.136 2 2 0 0 0-.363.254 2.2 2.2 0 0 0-.46.569l-.082.162a2.6 2.6 0 0 0-.213 1.072v.115q0 .707.296 1.267l.135.211zm.964-.818a1.1 1.1 0 0 0 .367.385.94.94 0 0 0 .476.118c.423 0 .59-.117.687-.23.159-.194.28-.478.28-.95 0-.53-.133-.8-.266-.952l-.021-.025c-.078-.094-.231-.221-.68-.221a1 1 0 0 0-.503.135l-.012.007a.86.86 0 0 0-.335.343c-.073.133-.132.324-.132.614v.115a1.4 1.4 0 0 0 .14.66zm15.7-6.222q.347-.346.346-.856a1.05 1.05 0 0 0-.345-.79 1.18 1.18 0 0 0-.84-.329q-.51 0-.855.33a1.05 1.05 0 0 0-.346.79q0 .51.346.855.345.346.856.346.51 0 .839-.346zm4.337 9.314.033-1.332q.191.403.59.747l.098.081a4 4 0 0 0 .316.224l.223.122a3.2 3.2 0 0 0 1.44.322 3.8 3.8 0 0 0 1.875-.477 3.5 3.5 0 0 0 1.382-1.366q.527-.89.526-2.09 0-1.184-.444-2.073a3.24 3.24 0 0 0-1.283-1.399q-.823-.51-1.942-.51a3.5 3.5 0 0 0-1.527.344l-.086.043-.165.09a3 3 0 0 0-.33.214q-.432.315-.656.707a2 2 0 0 0-.099.198l.082-1.283V4.701h-1.744v12.095zm.473-2.509a2.5 2.5 0 0 0 .566.7q.117.098.245.18l.144.08a2.1 2.1 0 0 0 .975.232q1.07 0 1.645-.675.576-.69.576-1.778 0-1.102-.576-1.777-.56-.691-1.645-.692a2.2 2.2 0 0 0-1.015.235q-.22.113-.415.282l-.15.142a2.1 2.1 0 0 0-.42.594q-.223.479-.223 1.1v.115q0 .705.293 1.26zm2.616-.293c.157-.191.28-.479.28-.967 0-.51-.13-.79-.276-.961l-.021-.026c-.082-.1-.232-.225-.67-.225a.87.87 0 0 0-.681.279l-.012.011c-.154.155-.274.38-.274.807v.115c0 .285.057.499.144.669a1.1 1.1 0 0 0 .367.405c.137.082.28.123.455.123.423 0 .59-.118.686-.23zm8.266-3.013q.345-.13.724-.14l.069-.002q.493 0 .642.099l.247-1.794q-.196-.099-.717-.099a2.3 2.3 0 0 0-.545.063 2 2 0 0 0-.411.148 2.2 2.2 0 0 0-.4.249 2.5 2.5 0 0 0-.485.499 2.7 2.7 0 0 0-.32.581l-.05.137v-1.48h-1.778v7.553h1.777v-3.884q0-.546.159-.943a1.5 1.5 0 0 1 .466-.636 2.5 2.5 0 0 1 .399-.253 2 2 0 0 1 .224-.099zm9.784 2.656.05-.922q0-1.743-.856-2.698-.838-.97-2.584-.97-1.119-.001-2.007.493a3.46 3.46 0 0 0-1.4 1.382q-.493.906-.493 2.106 0 1.07.428 1.975.428.89 1.332 1.432.906.526 2.255.526.973 0 1.668-.185l.044-.012.135-.04q.613-.184.984-.421l-.542-1.267q-.3.162-.642.274l-.297.087q-.51.131-1.3.131-.954 0-1.497-.444a1.6 1.6 0 0 1-.192-.193q-.366-.44-.512-1.234l-.004-.021zm-5.427-1.256-.003.022h3.752v-.138q-.011-.727-.288-1.118a1 1 0 0 0-.156-.176q-.46-.428-1.316-.428-.986 0-1.494.604-.379.45-.494 1.234zm-27.053 2.77V4.7h-1.86v12.095h5.333V15.15zm7.103-5.908v7.553h-1.843V9.242h1.843z'/%3E%3Cpath fill='%23fff' d='m19.63 11.151-.757-1.71-.345 1.71-1.12 5.644h-1.827L18.083 4.7h.197l3.325 6.533.988 2.19.988-2.19L26.839 4.7h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.93 5.644h-.098l-2.913-5.644zm14.836 5.81q-1.02 0-1.893-.478a3.8 3.8 0 0 1-1.381-1.382q-.51-.906-.51-2.106 0-1.185.444-2.074a3.36 3.36 0 0 1 1.3-1.382q.839-.494 1.974-.494a3.3 3.3 0 0 1 1.234.231 3.3 3.3 0 0 1 .97.575q.396.33.527.659l.033-1.267h1.694v7.553H37.18l-.033-1.332q-.279.593-1.02 1.053a3.17 3.17 0 0 1-1.662.444zm.296-1.482q.938 0 1.58-.642.642-.66.642-1.711v-.115q0-.708-.296-1.267a2.2 2.2 0 0 0-.807-.872 2.1 2.1 0 0 0-1.119-.313q-1.053 0-1.629.692-.575.675-.575 1.76 0 1.103.559 1.795.577.675 1.645.675zm6.521-6.237h1.711v1.4q.906-1.597 2.83-1.597 1.596 0 2.584 1.02.988 1.005.988 2.914 0 1.185-.493 2.09a3.46 3.46 0 0 1-1.316 1.399 3.5 3.5 0 0 1-1.844.493q-.954 0-1.662-.329a2.67 2.67 0 0 1-1.086-.97l.017 5.134h-1.728zm4.048 6.22q1.07 0 1.645-.674.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.592 0-1.12.296-.51.28-.822.823-.296.527-.296 1.234v.115q0 .708.296 1.267.313.543.823.855.51.296 1.119.297z'/%3E%3Cpath fill='%23e1e3e9' d='M51.325 4.7h1.86v10.45h3.473v1.646h-5.333zm7.12 4.542h1.843v7.553h-1.843zm.905-1.415a1.16 1.16 0 0 1-.856-.346 1.17 1.17 0 0 1-.346-.856 1.05 1.05 0 0 1 .346-.79q.346-.329.856-.329.494 0 .839.33a1.05 1.05 0 0 1 .345.79 1.16 1.16 0 0 1-.345.855q-.33.346-.84.346zm7.875 9.133a3.17 3.17 0 0 1-1.662-.444q-.723-.46-1.004-1.053l-.033 1.332h-1.71V4.701h1.743v4.657l-.082 1.283q.279-.658 1.086-1.119a3.5 3.5 0 0 1 1.778-.477q1.119 0 1.942.51a3.24 3.24 0 0 1 1.283 1.4q.445.888.444 2.072 0 1.201-.526 2.09a3.5 3.5 0 0 1-1.382 1.366 3.8 3.8 0 0 1-1.876.477zm-.296-1.481q1.069 0 1.645-.675.577-.69.577-1.778 0-1.102-.577-1.776-.56-.691-1.645-.692a2.12 2.12 0 0 0-1.58.659q-.642.641-.642 1.694v.115q0 .71.296 1.267a2.4 2.4 0 0 0 .807.872 2.1 2.1 0 0 0 1.119.313zm5.927-6.237h1.777v1.481q.263-.757.856-1.217a2.14 2.14 0 0 1 1.349-.46q.527 0 .724.098l-.247 1.794q-.149-.099-.642-.099-.774 0-1.416.494-.626.493-.626 1.58v3.883h-1.777V9.242zm9.534 7.718q-1.35 0-2.255-.526-.904-.543-1.332-1.432a4.6 4.6 0 0 1-.428-1.975q0-1.2.493-2.106a3.46 3.46 0 0 1 1.4-1.382q.889-.495 2.007-.494 1.744 0 2.584.97.855.956.856 2.7 0 .444-.05.92h-5.43q.18 1.005.708 1.45.542.443 1.497.443.79 0 1.3-.131a4 4 0 0 0 .938-.362l.542 1.267q-.411.263-1.119.46-.708.198-1.711.197zm1.596-4.558q.016-1.02-.444-1.432-.46-.428-1.316-.428-1.728 0-1.991 1.86z'/%3E%3Cpath d='M5.074 15.948a.484.657 0 0 0-.486.659v1.84a.484.657 0 0 0 .486.659h4.101a.484.657 0 0 0 .486-.659v-1.84a.484.657 0 0 0-.486-.659zm3.56 1.16H5.617v.838h3.017z' style='fill:%23fff;fill-rule:evenodd;stroke-width:1.03600001'/%3E%3Cg style='stroke-width:1.12603545'%3E%3Cpath d='M-9.408-1.416c-3.833-.025-7.056 2.912-7.08 6.615-.02 3.08 1.653 4.832 3.107 6.268.903.892 1.721 1.74 2.32 2.902l-.525-.004c-.543-.003-.992.304-1.24.639a1.87 1.87 0 0 0-.362 1.121l-.011 1.877c-.003.402.104.787.347 1.125.244.338.688.653 1.23.656l4.142.028c.542.003.99-.306 1.238-.641a1.87 1.87 0 0 0 .363-1.121l.012-1.875a1.87 1.87 0 0 0-.348-1.127c-.243-.338-.688-.653-1.23-.656l-.518-.004c.597-1.145 1.425-1.983 2.348-2.87 1.473-1.414 3.18-3.149 3.2-6.226-.016-3.59-2.923-6.684-6.993-6.707m-.006 1.1v.002c3.274.02 5.92 2.532 5.9 5.6-.017 2.706-1.39 4.026-2.863 5.44-1.034.994-2.118 2.033-2.814 3.633-.018.041-.052.055-.075.065q-.013.004-.02.01a.34.34 0 0 1-.226.084.34.34 0 0 1-.224-.086l-.092-.077c-.699-1.615-1.768-2.669-2.781-3.67-1.454-1.435-2.797-2.762-2.78-5.478.02-3.067 2.7-5.545 5.975-5.523m-.02 2.826c-1.62-.01-2.944 1.315-2.955 2.96-.01 1.646 1.295 2.988 2.916 2.999h.002c1.621.01 2.943-1.316 2.953-2.961.011-1.646-1.294-2.988-2.916-2.998m-.005 1.1c1.017.006 1.829.83 1.822 1.89s-.83 1.874-1.848 1.867c-1.018-.006-1.829-.83-1.822-1.89s.83-1.874 1.848-1.868m-2.155 11.857 4.14.025c.271.002.49.305.487.676l-.013 1.875c-.003.37-.224.67-.495.668l-4.14-.025c-.27-.002-.487-.306-.485-.676l.012-1.875c.003-.37.224-.67.494-.668' style='color:%23000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:evenodd;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:%23000;solid-opacity:1;vector-effect:none;fill:%23000;fill-opacity:.4;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-9.415-.316C-12.69-.338-15.37 2.14-15.39 5.207c-.017 2.716 1.326 4.041 2.78 5.477 1.013 1 2.081 2.055 2.78 3.67l.092.076a.34.34 0 0 0 .225.086.34.34 0 0 0 .227-.083l.019-.01c.022-.009.057-.024.074-.064.697-1.6 1.78-2.64 2.814-3.634 1.473-1.414 2.847-2.733 2.864-5.44.02-3.067-2.627-5.58-5.901-5.601m-.057 8.784c1.621.011 2.944-1.315 2.955-2.96.01-1.646-1.295-2.988-2.916-2.999-1.622-.01-2.945 1.315-2.955 2.96s1.295 2.989 2.916 3' style='clip-rule:evenodd;fill:%23e1e3e9;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-11.594 15.465c-.27-.002-.492.297-.494.668l-.012 1.876c-.003.371.214.673.485.675l4.14.027c.271.002.492-.298.495-.668l.012-1.877c.003-.37-.215-.672-.485-.674z' style='clip-rule:evenodd;fill:%23fff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;cursor:pointer;display:block;height:23px;margin:0 0 -4px -4px;overflow:hidden;width:88px}a.maplibregl-ctrl-logo.maplibregl-compact{width:14px}@media (forced-colors:active){a.maplibregl-ctrl-logo{background-color:transparent;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='23' fill='none'%3E%3Cpath fill='%23000' fill-opacity='.4' fill-rule='evenodd' d='M17.408 16.796h-1.827l2.501-12.095h.198l3.324 6.533.988 2.19.988-2.19 3.258-6.533h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.929 5.644h-.098l-2.914-5.644-.757-1.71-.345 1.71zm1.958-3.42-.726 3.663a1.255 1.255 0 0 1-1.232 1.011h-1.827a1.255 1.255 0 0 1-1.229-1.509l2.501-12.095a1.255 1.255 0 0 1 1.23-1.001h.197a1.25 1.25 0 0 1 1.12.685l3.19 6.273 3.125-6.263a1.25 1.25 0 0 1 1.123-.695h.181a1.255 1.255 0 0 1 1.227.991l1.443 6.71a5 5 0 0 1 .314-.787l.009-.016a4.6 4.6 0 0 1 1.777-1.887c.782-.46 1.668-.667 2.611-.667a4.6 4.6 0 0 1 1.7.32l.306.134c.21-.16.474-.256.759-.256h1.694a1.255 1.255 0 0 1 1.212.925 1.255 1.255 0 0 1 1.212-.925h1.711c.284 0 .545.094.755.252.613-.3 1.312-.45 2.075-.45 1.356 0 2.557.445 3.482 1.4q.47.48.763 1.064V4.701a1.255 1.255 0 0 1 1.255-1.255h1.86A1.255 1.255 0 0 1 54.44 4.7v9.194h2.217c.19 0 .37.043.532.118v-4.77c0-.356.147-.678.385-.906a2.42 2.42 0 0 1-.682-1.71c0-.665.267-1.253.735-1.7a2.45 2.45 0 0 1 1.722-.674 2.43 2.43 0 0 1 1.705.675q.318.302.504.683V4.7a1.255 1.255 0 0 1 1.255-1.255h1.744A1.255 1.255 0 0 1 65.812 4.7v3.335a4.8 4.8 0 0 1 1.526-.246c.938 0 1.817.214 2.59.69a4.47 4.47 0 0 1 1.67 1.743v-.98a1.255 1.255 0 0 1 1.256-1.256h1.777c.233 0 .451.064.639.174a3.4 3.4 0 0 1 1.567-.372c.346 0 .861.02 1.285.232a1.25 1.25 0 0 1 .689 1.004 4.7 4.7 0 0 1 .853-.588c.795-.44 1.675-.647 2.61-.647 1.385 0 2.65.39 3.525 1.396.836.938 1.168 2.173 1.168 3.528q-.001.515-.056 1.051a1.255 1.255 0 0 1-.947 1.09l.408.952a1.255 1.255 0 0 1-.477 1.552c-.418.268-.92.463-1.458.612-.613.171-1.304.244-2.049.244-1.06 0-2.043-.207-2.886-.698l-.015-.008c-.798-.48-1.419-1.135-1.818-1.963l-.004-.008a5.8 5.8 0 0 1-.548-2.512q0-.429.053-.843a1.3 1.3 0 0 1-.333-.086l-.166-.004c-.223 0-.426.062-.643.228-.03.024-.142.139-.142.59v3.883a1.255 1.255 0 0 1-1.256 1.256h-1.777a1.255 1.255 0 0 1-1.256-1.256V15.69l-.032.057a4.8 4.8 0 0 1-1.86 1.833 5.04 5.04 0 0 1-2.484.634 4.5 4.5 0 0 1-1.935-.424 1.25 1.25 0 0 1-.764.258h-1.71a1.255 1.255 0 0 1-1.256-1.255V7.687a2.4 2.4 0 0 1-.428.625c.253.23.412.561.412.93v7.553a1.255 1.255 0 0 1-1.256 1.255h-1.843a1.25 1.25 0 0 1-.894-.373c-.228.23-.544.373-.894.373H51.32a1.255 1.255 0 0 1-1.256-1.255v-1.251l-.061.117a4.7 4.7 0 0 1-1.782 1.884 4.77 4.77 0 0 1-2.485.67 5.6 5.6 0 0 1-1.485-.188l.009 2.764a1.255 1.255 0 0 1-1.255 1.259h-1.729a1.255 1.255 0 0 1-1.255-1.255v-3.537a1.255 1.255 0 0 1-1.167.793h-1.679a1.25 1.25 0 0 1-.77-.263 4.5 4.5 0 0 1-1.945.429c-.885 0-1.724-.21-2.495-.632l-.017-.01a5 5 0 0 1-1.081-.836 1.255 1.255 0 0 1-1.254 1.312h-1.81a1.255 1.255 0 0 1-1.228-.99l-.782-3.625-2.044 3.939a1.25 1.25 0 0 1-1.115.676h-.098a1.25 1.25 0 0 1-1.116-.68l-2.061-3.994zM35.92 16.63l.207-.114.223-.15q.493-.356.735-.785l.061-.118.033 1.332h1.678V9.242h-1.694l-.033 1.267q-.133-.329-.526-.658l-.032-.028a3.2 3.2 0 0 0-.668-.428l-.27-.12a3.3 3.3 0 0 0-1.235-.23q-1.136-.001-1.974.493a3.36 3.36 0 0 0-1.3 1.382q-.445.89-.444 2.074 0 1.2.51 2.107a3.8 3.8 0 0 0 1.382 1.381 3.9 3.9 0 0 0 1.893.477q.795 0 1.455-.33zm-2.789-5.38q-.576.675-.575 1.762 0 1.102.559 1.794.576.675 1.645.675a2.25 2.25 0 0 0 .934-.19 2.2 2.2 0 0 0 .468-.29l.178-.161a2.2 2.2 0 0 0 .397-.561q.244-.5.244-1.15v-.115q0-.708-.296-1.267l-.043-.077a2.2 2.2 0 0 0-.633-.709l-.13-.086-.047-.028a2.1 2.1 0 0 0-1.073-.285q-1.052 0-1.629.692zm2.316 2.706c.163-.17.28-.407.28-.83v-.114c0-.292-.06-.508-.15-.68a.96.96 0 0 0-.353-.389.85.85 0 0 0-.464-.127c-.4 0-.56.114-.664.239l-.01.012c-.148.174-.275.45-.275.945 0 .506.122.801.27.99.097.11.266.224.68.224.303 0 .504-.09.687-.269zm7.545 1.705a2.6 2.6 0 0 0 .331.423q.319.33.755.548l.173.074q.65.255 1.49.255 1.02 0 1.844-.493a3.45 3.45 0 0 0 1.316-1.4q.493-.904.493-2.089 0-1.909-.988-2.913-.988-1.02-2.584-1.02-.898 0-1.575.347a3 3 0 0 0-.415.262l-.199.166a3.4 3.4 0 0 0-.64.82V9.242h-1.712v11.553h1.729l-.017-5.134zm.53-1.138q.206.29.48.5l.155.11.053.034q.51.296 1.119.297 1.07 0 1.645-.675.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.435 0-.835.16a2 2 0 0 0-.284.136 2 2 0 0 0-.363.254 2.2 2.2 0 0 0-.46.569l-.082.162a2.6 2.6 0 0 0-.213 1.072v.115q0 .707.296 1.267l.135.211zm.964-.818a1.1 1.1 0 0 0 .367.385.94.94 0 0 0 .476.118c.423 0 .59-.117.687-.23.159-.194.28-.478.28-.95 0-.53-.133-.8-.266-.952l-.021-.025c-.078-.094-.231-.221-.68-.221a1 1 0 0 0-.503.135l-.012.007a.86.86 0 0 0-.335.343c-.073.133-.132.324-.132.614v.115a1.4 1.4 0 0 0 .14.66zm15.7-6.222q.347-.346.346-.856a1.05 1.05 0 0 0-.345-.79 1.18 1.18 0 0 0-.84-.329q-.51 0-.855.33a1.05 1.05 0 0 0-.346.79q0 .51.346.855.345.346.856.346.51 0 .839-.346zm4.337 9.314.033-1.332q.191.403.59.747l.098.081a4 4 0 0 0 .316.224l.223.122a3.2 3.2 0 0 0 1.44.322 3.8 3.8 0 0 0 1.875-.477 3.5 3.5 0 0 0 1.382-1.366q.527-.89.526-2.09 0-1.184-.444-2.073a3.24 3.24 0 0 0-1.283-1.399q-.823-.51-1.942-.51a3.5 3.5 0 0 0-1.527.344l-.086.043-.165.09a3 3 0 0 0-.33.214q-.432.315-.656.707a2 2 0 0 0-.099.198l.082-1.283V4.701h-1.744v12.095zm.473-2.509a2.5 2.5 0 0 0 .566.7q.117.098.245.18l.144.08a2.1 2.1 0 0 0 .975.232q1.07 0 1.645-.675.576-.69.576-1.778 0-1.102-.576-1.777-.56-.691-1.645-.692a2.2 2.2 0 0 0-1.015.235q-.22.113-.415.282l-.15.142a2.1 2.1 0 0 0-.42.594q-.223.479-.223 1.1v.115q0 .705.293 1.26zm2.616-.293c.157-.191.28-.479.28-.967 0-.51-.13-.79-.276-.961l-.021-.026c-.082-.1-.232-.225-.67-.225a.87.87 0 0 0-.681.279l-.012.011c-.154.155-.274.38-.274.807v.115c0 .285.057.499.144.669a1.1 1.1 0 0 0 .367.405c.137.082.28.123.455.123.423 0 .59-.118.686-.23zm8.266-3.013q.345-.13.724-.14l.069-.002q.493 0 .642.099l.247-1.794q-.196-.099-.717-.099a2.3 2.3 0 0 0-.545.063 2 2 0 0 0-.411.148 2.2 2.2 0 0 0-.4.249 2.5 2.5 0 0 0-.485.499 2.7 2.7 0 0 0-.32.581l-.05.137v-1.48h-1.778v7.553h1.777v-3.884q0-.546.159-.943a1.5 1.5 0 0 1 .466-.636 2.5 2.5 0 0 1 .399-.253 2 2 0 0 1 .224-.099zm9.784 2.656.05-.922q0-1.743-.856-2.698-.838-.97-2.584-.97-1.119-.001-2.007.493a3.46 3.46 0 0 0-1.4 1.382q-.493.906-.493 2.106 0 1.07.428 1.975.428.89 1.332 1.432.906.526 2.255.526.973 0 1.668-.185l.044-.012.135-.04q.613-.184.984-.421l-.542-1.267q-.3.162-.642.274l-.297.087q-.51.131-1.3.131-.954 0-1.497-.444a1.6 1.6 0 0 1-.192-.193q-.366-.44-.512-1.234l-.004-.021zm-5.427-1.256-.003.022h3.752v-.138q-.011-.727-.288-1.118a1 1 0 0 0-.156-.176q-.46-.428-1.316-.428-.986 0-1.494.604-.379.45-.494 1.234zm-27.053 2.77V4.7h-1.86v12.095h5.333V15.15zm7.103-5.908v7.553h-1.843V9.242h1.843z'/%3E%3Cpath fill='%23fff' d='m19.63 11.151-.757-1.71-.345 1.71-1.12 5.644h-1.827L18.083 4.7h.197l3.325 6.533.988 2.19.988-2.19L26.839 4.7h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.93 5.644h-.098l-2.913-5.644zm14.836 5.81q-1.02 0-1.893-.478a3.8 3.8 0 0 1-1.381-1.382q-.51-.906-.51-2.106 0-1.185.444-2.074a3.36 3.36 0 0 1 1.3-1.382q.839-.494 1.974-.494a3.3 3.3 0 0 1 1.234.231 3.3 3.3 0 0 1 .97.575q.396.33.527.659l.033-1.267h1.694v7.553H37.18l-.033-1.332q-.279.593-1.02 1.053a3.17 3.17 0 0 1-1.662.444zm.296-1.482q.938 0 1.58-.642.642-.66.642-1.711v-.115q0-.708-.296-1.267a2.2 2.2 0 0 0-.807-.872 2.1 2.1 0 0 0-1.119-.313q-1.053 0-1.629.692-.575.675-.575 1.76 0 1.103.559 1.795.577.675 1.645.675zm6.521-6.237h1.711v1.4q.906-1.597 2.83-1.597 1.596 0 2.584 1.02.988 1.005.988 2.914 0 1.185-.493 2.09a3.46 3.46 0 0 1-1.316 1.399 3.5 3.5 0 0 1-1.844.493q-.954 0-1.662-.329a2.67 2.67 0 0 1-1.086-.97l.017 5.134h-1.728zm4.048 6.22q1.07 0 1.645-.674.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.592 0-1.12.296-.51.28-.822.823-.296.527-.296 1.234v.115q0 .708.296 1.267.313.543.823.855.51.296 1.119.297z'/%3E%3Cpath fill='%23e1e3e9' d='M51.325 4.7h1.86v10.45h3.473v1.646h-5.333zm7.12 4.542h1.843v7.553h-1.843zm.905-1.415a1.16 1.16 0 0 1-.856-.346 1.17 1.17 0 0 1-.346-.856 1.05 1.05 0 0 1 .346-.79q.346-.329.856-.329.494 0 .839.33a1.05 1.05 0 0 1 .345.79 1.16 1.16 0 0 1-.345.855q-.33.346-.84.346zm7.875 9.133a3.17 3.17 0 0 1-1.662-.444q-.723-.46-1.004-1.053l-.033 1.332h-1.71V4.701h1.743v4.657l-.082 1.283q.279-.658 1.086-1.119a3.5 3.5 0 0 1 1.778-.477q1.119 0 1.942.51a3.24 3.24 0 0 1 1.283 1.4q.445.888.444 2.072 0 1.201-.526 2.09a3.5 3.5 0 0 1-1.382 1.366 3.8 3.8 0 0 1-1.876.477zm-.296-1.481q1.069 0 1.645-.675.577-.69.577-1.778 0-1.102-.577-1.776-.56-.691-1.645-.692a2.12 2.12 0 0 0-1.58.659q-.642.641-.642 1.694v.115q0 .71.296 1.267a2.4 2.4 0 0 0 .807.872 2.1 2.1 0 0 0 1.119.313zm5.927-6.237h1.777v1.481q.263-.757.856-1.217a2.14 2.14 0 0 1 1.349-.46q.527 0 .724.098l-.247 1.794q-.149-.099-.642-.099-.774 0-1.416.494-.626.493-.626 1.58v3.883h-1.777V9.242zm9.534 7.718q-1.35 0-2.255-.526-.904-.543-1.332-1.432a4.6 4.6 0 0 1-.428-1.975q0-1.2.493-2.106a3.46 3.46 0 0 1 1.4-1.382q.889-.495 2.007-.494 1.744 0 2.584.97.855.956.856 2.7 0 .444-.05.92h-5.43q.18 1.005.708 1.45.542.443 1.497.443.79 0 1.3-.131a4 4 0 0 0 .938-.362l.542 1.267q-.411.263-1.119.46-.708.198-1.711.197zm1.596-4.558q.016-1.02-.444-1.432-.46-.428-1.316-.428-1.728 0-1.991 1.86z'/%3E%3Cpath d='M5.074 15.948a.484.657 0 0 0-.486.659v1.84a.484.657 0 0 0 .486.659h4.101a.484.657 0 0 0 .486-.659v-1.84a.484.657 0 0 0-.486-.659zm3.56 1.16H5.617v.838h3.017z' style='fill:%23fff;fill-rule:evenodd;stroke-width:1.03600001'/%3E%3Cg style='stroke-width:1.12603545'%3E%3Cpath d='M-9.408-1.416c-3.833-.025-7.056 2.912-7.08 6.615-.02 3.08 1.653 4.832 3.107 6.268.903.892 1.721 1.74 2.32 2.902l-.525-.004c-.543-.003-.992.304-1.24.639a1.87 1.87 0 0 0-.362 1.121l-.011 1.877c-.003.402.104.787.347 1.125.244.338.688.653 1.23.656l4.142.028c.542.003.99-.306 1.238-.641a1.87 1.87 0 0 0 .363-1.121l.012-1.875a1.87 1.87 0 0 0-.348-1.127c-.243-.338-.688-.653-1.23-.656l-.518-.004c.597-1.145 1.425-1.983 2.348-2.87 1.473-1.414 3.18-3.149 3.2-6.226-.016-3.59-2.923-6.684-6.993-6.707m-.006 1.1v.002c3.274.02 5.92 2.532 5.9 5.6-.017 2.706-1.39 4.026-2.863 5.44-1.034.994-2.118 2.033-2.814 3.633-.018.041-.052.055-.075.065q-.013.004-.02.01a.34.34 0 0 1-.226.084.34.34 0 0 1-.224-.086l-.092-.077c-.699-1.615-1.768-2.669-2.781-3.67-1.454-1.435-2.797-2.762-2.78-5.478.02-3.067 2.7-5.545 5.975-5.523m-.02 2.826c-1.62-.01-2.944 1.315-2.955 2.96-.01 1.646 1.295 2.988 2.916 2.999h.002c1.621.01 2.943-1.316 2.953-2.961.011-1.646-1.294-2.988-2.916-2.998m-.005 1.1c1.017.006 1.829.83 1.822 1.89s-.83 1.874-1.848 1.867c-1.018-.006-1.829-.83-1.822-1.89s.83-1.874 1.848-1.868m-2.155 11.857 4.14.025c.271.002.49.305.487.676l-.013 1.875c-.003.37-.224.67-.495.668l-4.14-.025c-.27-.002-.487-.306-.485-.676l.012-1.875c.003-.37.224-.67.494-.668' style='color:%23000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:evenodd;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:%23000;solid-opacity:1;vector-effect:none;fill:%23000;fill-opacity:.4;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-9.415-.316C-12.69-.338-15.37 2.14-15.39 5.207c-.017 2.716 1.326 4.041 2.78 5.477 1.013 1 2.081 2.055 2.78 3.67l.092.076a.34.34 0 0 0 .225.086.34.34 0 0 0 .227-.083l.019-.01c.022-.009.057-.024.074-.064.697-1.6 1.78-2.64 2.814-3.634 1.473-1.414 2.847-2.733 2.864-5.44.02-3.067-2.627-5.58-5.901-5.601m-.057 8.784c1.621.011 2.944-1.315 2.955-2.96.01-1.646-1.295-2.988-2.916-2.999-1.622-.01-2.945 1.315-2.955 2.96s1.295 2.989 2.916 3' style='clip-rule:evenodd;fill:%23e1e3e9;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-11.594 15.465c-.27-.002-.492.297-.494.668l-.012 1.876c-.003.371.214.673.485.675l4.14.027c.271.002.492-.298.495-.668l.012-1.877c.003-.37-.215-.672-.485-.674z' style='clip-rule:evenodd;fill:%23fff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3C/g%3E%3C/svg%3E")}}@media (forced-colors:active) and (prefers-color-scheme:light){a.maplibregl-ctrl-logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='23' fill='none'%3E%3Cpath fill='%23000' fill-opacity='.4' fill-rule='evenodd' d='M17.408 16.796h-1.827l2.501-12.095h.198l3.324 6.533.988 2.19.988-2.19 3.258-6.533h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.929 5.644h-.098l-2.914-5.644-.757-1.71-.345 1.71zm1.958-3.42-.726 3.663a1.255 1.255 0 0 1-1.232 1.011h-1.827a1.255 1.255 0 0 1-1.229-1.509l2.501-12.095a1.255 1.255 0 0 1 1.23-1.001h.197a1.25 1.25 0 0 1 1.12.685l3.19 6.273 3.125-6.263a1.25 1.25 0 0 1 1.123-.695h.181a1.255 1.255 0 0 1 1.227.991l1.443 6.71a5 5 0 0 1 .314-.787l.009-.016a4.6 4.6 0 0 1 1.777-1.887c.782-.46 1.668-.667 2.611-.667a4.6 4.6 0 0 1 1.7.32l.306.134c.21-.16.474-.256.759-.256h1.694a1.255 1.255 0 0 1 1.212.925 1.255 1.255 0 0 1 1.212-.925h1.711c.284 0 .545.094.755.252.613-.3 1.312-.45 2.075-.45 1.356 0 2.557.445 3.482 1.4q.47.48.763 1.064V4.701a1.255 1.255 0 0 1 1.255-1.255h1.86A1.255 1.255 0 0 1 54.44 4.7v9.194h2.217c.19 0 .37.043.532.118v-4.77c0-.356.147-.678.385-.906a2.42 2.42 0 0 1-.682-1.71c0-.665.267-1.253.735-1.7a2.45 2.45 0 0 1 1.722-.674 2.43 2.43 0 0 1 1.705.675q.318.302.504.683V4.7a1.255 1.255 0 0 1 1.255-1.255h1.744A1.255 1.255 0 0 1 65.812 4.7v3.335a4.8 4.8 0 0 1 1.526-.246c.938 0 1.817.214 2.59.69a4.47 4.47 0 0 1 1.67 1.743v-.98a1.255 1.255 0 0 1 1.256-1.256h1.777c.233 0 .451.064.639.174a3.4 3.4 0 0 1 1.567-.372c.346 0 .861.02 1.285.232a1.25 1.25 0 0 1 .689 1.004 4.7 4.7 0 0 1 .853-.588c.795-.44 1.675-.647 2.61-.647 1.385 0 2.65.39 3.525 1.396.836.938 1.168 2.173 1.168 3.528q-.001.515-.056 1.051a1.255 1.255 0 0 1-.947 1.09l.408.952a1.255 1.255 0 0 1-.477 1.552c-.418.268-.92.463-1.458.612-.613.171-1.304.244-2.049.244-1.06 0-2.043-.207-2.886-.698l-.015-.008c-.798-.48-1.419-1.135-1.818-1.963l-.004-.008a5.8 5.8 0 0 1-.548-2.512q0-.429.053-.843a1.3 1.3 0 0 1-.333-.086l-.166-.004c-.223 0-.426.062-.643.228-.03.024-.142.139-.142.59v3.883a1.255 1.255 0 0 1-1.256 1.256h-1.777a1.255 1.255 0 0 1-1.256-1.256V15.69l-.032.057a4.8 4.8 0 0 1-1.86 1.833 5.04 5.04 0 0 1-2.484.634 4.5 4.5 0 0 1-1.935-.424 1.25 1.25 0 0 1-.764.258h-1.71a1.255 1.255 0 0 1-1.256-1.255V7.687a2.4 2.4 0 0 1-.428.625c.253.23.412.561.412.93v7.553a1.255 1.255 0 0 1-1.256 1.255h-1.843a1.25 1.25 0 0 1-.894-.373c-.228.23-.544.373-.894.373H51.32a1.255 1.255 0 0 1-1.256-1.255v-1.251l-.061.117a4.7 4.7 0 0 1-1.782 1.884 4.77 4.77 0 0 1-2.485.67 5.6 5.6 0 0 1-1.485-.188l.009 2.764a1.255 1.255 0 0 1-1.255 1.259h-1.729a1.255 1.255 0 0 1-1.255-1.255v-3.537a1.255 1.255 0 0 1-1.167.793h-1.679a1.25 1.25 0 0 1-.77-.263 4.5 4.5 0 0 1-1.945.429c-.885 0-1.724-.21-2.495-.632l-.017-.01a5 5 0 0 1-1.081-.836 1.255 1.255 0 0 1-1.254 1.312h-1.81a1.255 1.255 0 0 1-1.228-.99l-.782-3.625-2.044 3.939a1.25 1.25 0 0 1-1.115.676h-.098a1.25 1.25 0 0 1-1.116-.68l-2.061-3.994zM35.92 16.63l.207-.114.223-.15q.493-.356.735-.785l.061-.118.033 1.332h1.678V9.242h-1.694l-.033 1.267q-.133-.329-.526-.658l-.032-.028a3.2 3.2 0 0 0-.668-.428l-.27-.12a3.3 3.3 0 0 0-1.235-.23q-1.136-.001-1.974.493a3.36 3.36 0 0 0-1.3 1.382q-.445.89-.444 2.074 0 1.2.51 2.107a3.8 3.8 0 0 0 1.382 1.381 3.9 3.9 0 0 0 1.893.477q.795 0 1.455-.33zm-2.789-5.38q-.576.675-.575 1.762 0 1.102.559 1.794.576.675 1.645.675a2.25 2.25 0 0 0 .934-.19 2.2 2.2 0 0 0 .468-.29l.178-.161a2.2 2.2 0 0 0 .397-.561q.244-.5.244-1.15v-.115q0-.708-.296-1.267l-.043-.077a2.2 2.2 0 0 0-.633-.709l-.13-.086-.047-.028a2.1 2.1 0 0 0-1.073-.285q-1.052 0-1.629.692zm2.316 2.706c.163-.17.28-.407.28-.83v-.114c0-.292-.06-.508-.15-.68a.96.96 0 0 0-.353-.389.85.85 0 0 0-.464-.127c-.4 0-.56.114-.664.239l-.01.012c-.148.174-.275.45-.275.945 0 .506.122.801.27.99.097.11.266.224.68.224.303 0 .504-.09.687-.269zm7.545 1.705a2.6 2.6 0 0 0 .331.423q.319.33.755.548l.173.074q.65.255 1.49.255 1.02 0 1.844-.493a3.45 3.45 0 0 0 1.316-1.4q.493-.904.493-2.089 0-1.909-.988-2.913-.988-1.02-2.584-1.02-.898 0-1.575.347a3 3 0 0 0-.415.262l-.199.166a3.4 3.4 0 0 0-.64.82V9.242h-1.712v11.553h1.729l-.017-5.134zm.53-1.138q.206.29.48.5l.155.11.053.034q.51.296 1.119.297 1.07 0 1.645-.675.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.435 0-.835.16a2 2 0 0 0-.284.136 2 2 0 0 0-.363.254 2.2 2.2 0 0 0-.46.569l-.082.162a2.6 2.6 0 0 0-.213 1.072v.115q0 .707.296 1.267l.135.211zm.964-.818a1.1 1.1 0 0 0 .367.385.94.94 0 0 0 .476.118c.423 0 .59-.117.687-.23.159-.194.28-.478.28-.95 0-.53-.133-.8-.266-.952l-.021-.025c-.078-.094-.231-.221-.68-.221a1 1 0 0 0-.503.135l-.012.007a.86.86 0 0 0-.335.343c-.073.133-.132.324-.132.614v.115a1.4 1.4 0 0 0 .14.66zm15.7-6.222q.347-.346.346-.856a1.05 1.05 0 0 0-.345-.79 1.18 1.18 0 0 0-.84-.329q-.51 0-.855.33a1.05 1.05 0 0 0-.346.79q0 .51.346.855.345.346.856.346.51 0 .839-.346zm4.337 9.314.033-1.332q.191.403.59.747l.098.081a4 4 0 0 0 .316.224l.223.122a3.2 3.2 0 0 0 1.44.322 3.8 3.8 0 0 0 1.875-.477 3.5 3.5 0 0 0 1.382-1.366q.527-.89.526-2.09 0-1.184-.444-2.073a3.24 3.24 0 0 0-1.283-1.399q-.823-.51-1.942-.51a3.5 3.5 0 0 0-1.527.344l-.086.043-.165.09a3 3 0 0 0-.33.214q-.432.315-.656.707a2 2 0 0 0-.099.198l.082-1.283V4.701h-1.744v12.095zm.473-2.509a2.5 2.5 0 0 0 .566.7q.117.098.245.18l.144.08a2.1 2.1 0 0 0 .975.232q1.07 0 1.645-.675.576-.69.576-1.778 0-1.102-.576-1.777-.56-.691-1.645-.692a2.2 2.2 0 0 0-1.015.235q-.22.113-.415.282l-.15.142a2.1 2.1 0 0 0-.42.594q-.223.479-.223 1.1v.115q0 .705.293 1.26zm2.616-.293c.157-.191.28-.479.28-.967 0-.51-.13-.79-.276-.961l-.021-.026c-.082-.1-.232-.225-.67-.225a.87.87 0 0 0-.681.279l-.012.011c-.154.155-.274.38-.274.807v.115c0 .285.057.499.144.669a1.1 1.1 0 0 0 .367.405c.137.082.28.123.455.123.423 0 .59-.118.686-.23zm8.266-3.013q.345-.13.724-.14l.069-.002q.493 0 .642.099l.247-1.794q-.196-.099-.717-.099a2.3 2.3 0 0 0-.545.063 2 2 0 0 0-.411.148 2.2 2.2 0 0 0-.4.249 2.5 2.5 0 0 0-.485.499 2.7 2.7 0 0 0-.32.581l-.05.137v-1.48h-1.778v7.553h1.777v-3.884q0-.546.159-.943a1.5 1.5 0 0 1 .466-.636 2.5 2.5 0 0 1 .399-.253 2 2 0 0 1 .224-.099zm9.784 2.656.05-.922q0-1.743-.856-2.698-.838-.97-2.584-.97-1.119-.001-2.007.493a3.46 3.46 0 0 0-1.4 1.382q-.493.906-.493 2.106 0 1.07.428 1.975.428.89 1.332 1.432.906.526 2.255.526.973 0 1.668-.185l.044-.012.135-.04q.613-.184.984-.421l-.542-1.267q-.3.162-.642.274l-.297.087q-.51.131-1.3.131-.954 0-1.497-.444a1.6 1.6 0 0 1-.192-.193q-.366-.44-.512-1.234l-.004-.021zm-5.427-1.256-.003.022h3.752v-.138q-.011-.727-.288-1.118a1 1 0 0 0-.156-.176q-.46-.428-1.316-.428-.986 0-1.494.604-.379.45-.494 1.234zm-27.053 2.77V4.7h-1.86v12.095h5.333V15.15zm7.103-5.908v7.553h-1.843V9.242h1.843z'/%3E%3Cpath fill='%23fff' d='m19.63 11.151-.757-1.71-.345 1.71-1.12 5.644h-1.827L18.083 4.7h.197l3.325 6.533.988 2.19.988-2.19L26.839 4.7h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.93 5.644h-.098l-2.913-5.644zm14.836 5.81q-1.02 0-1.893-.478a3.8 3.8 0 0 1-1.381-1.382q-.51-.906-.51-2.106 0-1.185.444-2.074a3.36 3.36 0 0 1 1.3-1.382q.839-.494 1.974-.494a3.3 3.3 0 0 1 1.234.231 3.3 3.3 0 0 1 .97.575q.396.33.527.659l.033-1.267h1.694v7.553H37.18l-.033-1.332q-.279.593-1.02 1.053a3.17 3.17 0 0 1-1.662.444zm.296-1.482q.938 0 1.58-.642.642-.66.642-1.711v-.115q0-.708-.296-1.267a2.2 2.2 0 0 0-.807-.872 2.1 2.1 0 0 0-1.119-.313q-1.053 0-1.629.692-.575.675-.575 1.76 0 1.103.559 1.795.577.675 1.645.675zm6.521-6.237h1.711v1.4q.906-1.597 2.83-1.597 1.596 0 2.584 1.02.988 1.005.988 2.914 0 1.185-.493 2.09a3.46 3.46 0 0 1-1.316 1.399 3.5 3.5 0 0 1-1.844.493q-.954 0-1.662-.329a2.67 2.67 0 0 1-1.086-.97l.017 5.134h-1.728zm4.048 6.22q1.07 0 1.645-.674.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.592 0-1.12.296-.51.28-.822.823-.296.527-.296 1.234v.115q0 .708.296 1.267.313.543.823.855.51.296 1.119.297z'/%3E%3Cpath fill='%23e1e3e9' d='M51.325 4.7h1.86v10.45h3.473v1.646h-5.333zm7.12 4.542h1.843v7.553h-1.843zm.905-1.415a1.16 1.16 0 0 1-.856-.346 1.17 1.17 0 0 1-.346-.856 1.05 1.05 0 0 1 .346-.79q.346-.329.856-.329.494 0 .839.33a1.05 1.05 0 0 1 .345.79 1.16 1.16 0 0 1-.345.855q-.33.346-.84.346zm7.875 9.133a3.17 3.17 0 0 1-1.662-.444q-.723-.46-1.004-1.053l-.033 1.332h-1.71V4.701h1.743v4.657l-.082 1.283q.279-.658 1.086-1.119a3.5 3.5 0 0 1 1.778-.477q1.119 0 1.942.51a3.24 3.24 0 0 1 1.283 1.4q.445.888.444 2.072 0 1.201-.526 2.09a3.5 3.5 0 0 1-1.382 1.366 3.8 3.8 0 0 1-1.876.477zm-.296-1.481q1.069 0 1.645-.675.577-.69.577-1.778 0-1.102-.577-1.776-.56-.691-1.645-.692a2.12 2.12 0 0 0-1.58.659q-.642.641-.642 1.694v.115q0 .71.296 1.267a2.4 2.4 0 0 0 .807.872 2.1 2.1 0 0 0 1.119.313zm5.927-6.237h1.777v1.481q.263-.757.856-1.217a2.14 2.14 0 0 1 1.349-.46q.527 0 .724.098l-.247 1.794q-.149-.099-.642-.099-.774 0-1.416.494-.626.493-.626 1.58v3.883h-1.777V9.242zm9.534 7.718q-1.35 0-2.255-.526-.904-.543-1.332-1.432a4.6 4.6 0 0 1-.428-1.975q0-1.2.493-2.106a3.46 3.46 0 0 1 1.4-1.382q.889-.495 2.007-.494 1.744 0 2.584.97.855.956.856 2.7 0 .444-.05.92h-5.43q.18 1.005.708 1.45.542.443 1.497.443.79 0 1.3-.131a4 4 0 0 0 .938-.362l.542 1.267q-.411.263-1.119.46-.708.198-1.711.197zm1.596-4.558q.016-1.02-.444-1.432-.46-.428-1.316-.428-1.728 0-1.991 1.86z'/%3E%3Cpath d='M5.074 15.948a.484.657 0 0 0-.486.659v1.84a.484.657 0 0 0 .486.659h4.101a.484.657 0 0 0 .486-.659v-1.84a.484.657 0 0 0-.486-.659zm3.56 1.16H5.617v.838h3.017z' style='fill:%23fff;fill-rule:evenodd;stroke-width:1.03600001'/%3E%3Cg style='stroke-width:1.12603545'%3E%3Cpath d='M-9.408-1.416c-3.833-.025-7.056 2.912-7.08 6.615-.02 3.08 1.653 4.832 3.107 6.268.903.892 1.721 1.74 2.32 2.902l-.525-.004c-.543-.003-.992.304-1.24.639a1.87 1.87 0 0 0-.362 1.121l-.011 1.877c-.003.402.104.787.347 1.125.244.338.688.653 1.23.656l4.142.028c.542.003.99-.306 1.238-.641a1.87 1.87 0 0 0 .363-1.121l.012-1.875a1.87 1.87 0 0 0-.348-1.127c-.243-.338-.688-.653-1.23-.656l-.518-.004c.597-1.145 1.425-1.983 2.348-2.87 1.473-1.414 3.18-3.149 3.2-6.226-.016-3.59-2.923-6.684-6.993-6.707m-.006 1.1v.002c3.274.02 5.92 2.532 5.9 5.6-.017 2.706-1.39 4.026-2.863 5.44-1.034.994-2.118 2.033-2.814 3.633-.018.041-.052.055-.075.065q-.013.004-.02.01a.34.34 0 0 1-.226.084.34.34 0 0 1-.224-.086l-.092-.077c-.699-1.615-1.768-2.669-2.781-3.67-1.454-1.435-2.797-2.762-2.78-5.478.02-3.067 2.7-5.545 5.975-5.523m-.02 2.826c-1.62-.01-2.944 1.315-2.955 2.96-.01 1.646 1.295 2.988 2.916 2.999h.002c1.621.01 2.943-1.316 2.953-2.961.011-1.646-1.294-2.988-2.916-2.998m-.005 1.1c1.017.006 1.829.83 1.822 1.89s-.83 1.874-1.848 1.867c-1.018-.006-1.829-.83-1.822-1.89s.83-1.874 1.848-1.868m-2.155 11.857 4.14.025c.271.002.49.305.487.676l-.013 1.875c-.003.37-.224.67-.495.668l-4.14-.025c-.27-.002-.487-.306-.485-.676l.012-1.875c.003-.37.224-.67.494-.668' style='color:%23000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:evenodd;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:%23000;solid-opacity:1;vector-effect:none;fill:%23000;fill-opacity:.4;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-9.415-.316C-12.69-.338-15.37 2.14-15.39 5.207c-.017 2.716 1.326 4.041 2.78 5.477 1.013 1 2.081 2.055 2.78 3.67l.092.076a.34.34 0 0 0 .225.086.34.34 0 0 0 .227-.083l.019-.01c.022-.009.057-.024.074-.064.697-1.6 1.78-2.64 2.814-3.634 1.473-1.414 2.847-2.733 2.864-5.44.02-3.067-2.627-5.58-5.901-5.601m-.057 8.784c1.621.011 2.944-1.315 2.955-2.96.01-1.646-1.295-2.988-2.916-2.999-1.622-.01-2.945 1.315-2.955 2.96s1.295 2.989 2.916 3' style='clip-rule:evenodd;fill:%23e1e3e9;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-11.594 15.465c-.27-.002-.492.297-.494.668l-.012 1.876c-.003.371.214.673.485.675l4.14.027c.271.002.492-.298.495-.668l.012-1.877c.003-.37-.215-.672-.485-.674z' style='clip-rule:evenodd;fill:%23fff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3C/g%3E%3C/svg%3E")}}.maplibregl-ctrl.maplibregl-ctrl-attrib{background-color:hsla(0,0%,100%,.5);margin:0;padding:0 5px}@media screen{.maplibregl-ctrl-attrib.maplibregl-compact{background-color:#fff;border-radius:12px;box-sizing:content-box;color:#000;margin:10px;min-height:20px;padding:2px 24px 2px 0;position:relative}.maplibregl-ctrl-attrib.maplibregl-compact-show{padding:2px 28px 2px 8px;visibility:visible}.maplibregl-ctrl-bottom-left>.maplibregl-ctrl-attrib.maplibregl-compact-show,.maplibregl-ctrl-top-left>.maplibregl-ctrl-attrib.maplibregl-compact-show{border-radius:12px;padding:2px 8px 2px 28px}.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner{display:none}.maplibregl-ctrl-attrib-button{background-color:hsla(0,0%,100%,.5);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill-rule='evenodd' viewBox='0 0 20 20'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E");border:0;border-radius:12px;box-sizing:border-box;cursor:pointer;display:none;height:24px;outline:none;position:absolute;right:0;top:0;width:24px}.maplibregl-ctrl-attrib summary.maplibregl-ctrl-attrib-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;list-style:none}.maplibregl-ctrl-attrib summary.maplibregl-ctrl-attrib-button::-webkit-details-marker{display:none}.maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib-button,.maplibregl-ctrl-top-left .maplibregl-ctrl-attrib-button{left:0}.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button,.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner{display:block}.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button{background-color:rgb(0 0 0/5%)}.maplibregl-ctrl-bottom-right>.maplibregl-ctrl-attrib.maplibregl-compact:after{bottom:0;right:0}.maplibregl-ctrl-top-right>.maplibregl-ctrl-attrib.maplibregl-compact:after{right:0;top:0}.maplibregl-ctrl-top-left>.maplibregl-ctrl-attrib.maplibregl-compact:after{left:0;top:0}.maplibregl-ctrl-bottom-left>.maplibregl-ctrl-attrib.maplibregl-compact:after{bottom:0;left:0}}@media screen and (forced-colors:active){.maplibregl-ctrl-attrib.maplibregl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23fff' fill-rule='evenodd' viewBox='0 0 20 20'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E")}}@media screen and (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl-attrib.maplibregl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill-rule='evenodd' viewBox='0 0 20 20'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E")}}.maplibregl-ctrl-attrib a{color:rgba(0,0,0,.75);text-decoration:none}.maplibregl-ctrl-attrib a:hover{color:inherit;text-decoration:underline}.maplibregl-attrib-empty{display:none}.maplibregl-ctrl-scale{background-color:hsla(0,0%,100%,.75);border:2px solid #333;border-top:#333;box-sizing:border-box;color:#333;font-size:10px;padding:0 5px}.maplibregl-popup{display:flex;left:0;pointer-events:none;position:absolute;top:0;will-change:transform}.maplibregl-popup-anchor-top,.maplibregl-popup-anchor-top-left,.maplibregl-popup-anchor-top-right{flex-direction:column}.maplibregl-popup-anchor-bottom,.maplibregl-popup-anchor-bottom-left,.maplibregl-popup-anchor-bottom-right{flex-direction:column-reverse}.maplibregl-popup-anchor-left{flex-direction:row}.maplibregl-popup-anchor-right{flex-direction:row-reverse}.maplibregl-popup-tip{border:10px solid transparent;height:0;width:0;z-index:1}.maplibregl-popup-anchor-top .maplibregl-popup-tip{align-self:center;border-bottom-color:#fff;border-top:none}.maplibregl-popup-anchor-top-left .maplibregl-popup-tip{align-self:flex-start;border-bottom-color:#fff;border-left:none;border-top:none}.maplibregl-popup-anchor-top-right .maplibregl-popup-tip{align-self:flex-end;border-bottom-color:#fff;border-right:none;border-top:none}.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{align-self:center;border-bottom:none;border-top-color:#fff}.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip{align-self:flex-start;border-bottom:none;border-left:none;border-top-color:#fff}.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip{align-self:flex-end;border-bottom:none;border-right:none;border-top-color:#fff}.maplibregl-popup-anchor-left .maplibregl-popup-tip{align-self:center;border-left:none;border-right-color:#fff}.maplibregl-popup-anchor-right .maplibregl-popup-tip{align-self:center;border-left-color:#fff;border-right:none}.maplibregl-popup-close-button{background-color:transparent;border:0;border-radius:0 3px 0 0;cursor:pointer;position:absolute;right:0;top:0}.maplibregl-popup-close-button:hover{background-color:rgb(0 0 0/5%)}.maplibregl-popup-content{background:#fff;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.1);padding:15px 10px;pointer-events:auto;position:relative}.maplibregl-popup-anchor-top-left .maplibregl-popup-content{border-top-left-radius:0}.maplibregl-popup-anchor-top-right .maplibregl-popup-content{border-top-right-radius:0}.maplibregl-popup-anchor-bottom-left .maplibregl-popup-content{border-bottom-left-radius:0}.maplibregl-popup-anchor-bottom-right .maplibregl-popup-content{border-bottom-right-radius:0}.maplibregl-popup-track-pointer{display:none}.maplibregl-popup-track-pointer *{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.maplibregl-map:hover .maplibregl-popup-track-pointer{display:flex}.maplibregl-map:active .maplibregl-popup-track-pointer{display:none}.maplibregl-marker{left:0;position:absolute;top:0;transition:opacity .2s;will-change:transform}.maplibregl-user-location-dot,.maplibregl-user-location-dot:before{background-color:#1da1f2;border-radius:50%;height:15px;width:15px}.maplibregl-user-location-dot:before{animation:maplibregl-user-location-dot-pulse 2s infinite;content:"";position:absolute}.maplibregl-user-location-dot:after{border:2px solid #fff;border-radius:50%;box-shadow:0 0 3px rgba(0,0,0,.35);box-sizing:border-box;content:"";height:19px;left:-2px;position:absolute;top:-2px;width:19px}@keyframes maplibregl-user-location-dot-pulse{0%{opacity:1;transform:scale(1)}70%{opacity:0;transform:scale(3)}to{opacity:0;transform:scale(1)}}.maplibregl-user-location-dot-stale{background-color:#aaa}.maplibregl-user-location-dot-stale:after{display:none}.maplibregl-user-location-accuracy-circle{background-color:#1da1f233;border-radius:100%;height:1px;width:1px}.maplibregl-crosshair,.maplibregl-crosshair .maplibregl-interactive,.maplibregl-crosshair .maplibregl-interactive:active{cursor:crosshair}.maplibregl-boxzoom{background:#fff;border:2px dotted #202020;height:0;left:0;opacity:.5;position:absolute;top:0;width:0}.maplibregl-cooperative-gesture-screen{align-items:center;background:rgba(0,0,0,.4);color:#fff;display:flex;font-size:1.4em;inset:0;justify-content:center;line-height:1.2;opacity:0;padding:1rem;pointer-events:none;position:absolute;transition:opacity 1s ease 1s;z-index:99999}.maplibregl-cooperative-gesture-screen.maplibregl-show{opacity:1;transition:opacity .05s}.maplibregl-cooperative-gesture-screen .maplibregl-mobile-message{display:none}@media (hover:none),(width <= 480px){.maplibregl-cooperative-gesture-screen .maplibregl-desktop-message{display:none}.maplibregl-cooperative-gesture-screen .maplibregl-mobile-message{display:block}}.maplibregl-pseudo-fullscreen{height:100%!important;left:0!important;position:fixed!important;top:0!important;width:100%!important;z-index:99999}.mapLibreCrystalStage {
  position: absolute;
  inset: 0;
  z-index: 7;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  background: #020607;
  color: #effffb;
  transform: translateY(20px) scale(0.994);
  filter: blur(6px);
  transition:
    opacity 900ms ease,
    transform 900ms ease,
    filter 900ms ease;
  --mx: 50%;
  --my: 50%;
}

.mapLibreCrystalStage.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.mlMapCanvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #020607;
}

.mlMapCanvas .maplibregl-canvas {
  outline: none;
  filter: saturate(1.02) contrast(1.04) brightness(1.12);
  opacity: 1;
}

.mlMapCanvas .maplibregl-ctrl-logo,
.mlMapCanvas .maplibregl-ctrl-attrib {
  opacity: 0.1;
}

.mlMapCanvas .maplibregl-ctrl-group {
  display: none;
}

.mlCursorGlow {
  display: none !important;
}

.mlCityGlow {
  position: absolute;
  inset: -15%;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 45% 58%, rgba(116, 255, 244, 0.22), transparent 30%),
    radial-gradient(circle at 60% 50%, rgba(178, 119, 255, 0.12), transparent 34%),
    radial-gradient(circle at 35% 44%, rgba(159, 251, 240, 0.18), transparent 32%);
  mix-blend-mode: screen;
  filter: blur(18px);
  transition: opacity 900ms ease;
}

.network-complete .mlCityGlow {
  opacity: 0.62;
  animation: mlCityPulse 3.4s ease-in-out infinite;
}

@keyframes mlCityPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.42;
  }

  50% {
    transform: scale(1.025);
    opacity: 0.78;
  }
}

.mlMapLight {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(circle at 52% 48%, rgba(116, 255, 244, 0.035), transparent 36%),
    radial-gradient(circle at 74% 62%, rgba(159, 251, 240, 0.025), transparent 34%);
  mix-blend-mode: screen;
  opacity: 0.26;
}

.mlTerrainMask {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(circle at 54% 48%, rgba(116, 255, 244, 0.025), transparent 38%),
    radial-gradient(circle at 22% 76%, rgba(178, 119, 255, 0.018), transparent 30%);
  mix-blend-mode: screen;
  opacity: 0.12;
}

.mlWaterVeil {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0%, rgba(116, 255, 244, 0.008) 36%, transparent 62%);
  mix-blend-mode: screen;
  opacity: 0.04;
}

.mlCrystalField {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0.045;
  background-image:
    radial-gradient(circle, rgba(122, 255, 238, 0.18) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(255, 255, 255, 0.07) 0 1px, transparent 1.4px);
  background-size: 180px 180px, 280px 280px;
  background-position: 0 0, 80px 120px;
  animation: mlFieldDrift 24s linear infinite;
  mix-blend-mode: screen;
}

@keyframes mlFieldDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-80px, 60px, 0); }
}

.mlScanGrid {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  opacity: 0.02;
  background-image:
    linear-gradient(rgba(135, 255, 240, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(135, 255, 240, 0.035) 1px, transparent 1px);
  background-size: 68px 68px;
  mix-blend-mode: screen;
}

.mlHeavyVignette {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background:
    radial-gradient(circle at 52% 46%, transparent 0%, rgba(1, 5, 6, 0.006) 45%, rgba(1, 5, 6, 0.22) 100%),
    linear-gradient(to bottom, rgba(2, 6, 7, 0.045), transparent 36%, rgba(2, 6, 7, 0.22) 100%),
    linear-gradient(to right, rgba(2, 6, 7, 0.08), transparent 24%, transparent 74%, rgba(2, 6, 7, 0.1));
}

.mlHeader {
  position: absolute;
  left: 42px;
  right: 42px;
  top: 28px;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}

.mlBrand {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mlBrand span {
  font-size: 9px;
  letter-spacing: 0.38em;
  color: rgba(210, 255, 248, 0.44);
}

.mlBrand b {
  font-size: 10px;
  letter-spacing: 0.24em;
  color: rgba(170, 255, 242, 0.76);
  font-weight: 500;
}

.mlModePill {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(155, 255, 242, 0.16);
  background: rgba(2, 10, 11, 0.42);
  backdrop-filter: blur(18px);
}

.mlModePill span {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: rgba(225, 255, 250, 0.58);
}

.mlModePill b {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(240, 255, 252, 0.9);
}

.mlHeroCopy {
  position: absolute;
  left: 52px;
  top: 132px;
  z-index: 18;
  max-width: 420px;
  pointer-events: none;
  transition:
    opacity 520ms ease,
    transform 520ms ease,
    filter 520ms ease;
}

.mode-detail .mlHeroCopy {
  opacity: 0.12;
  transform: translateY(-18px);
  filter: blur(3px);
}

.mlHeroCopy span {
  display: block;
  margin-bottom: 14px;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: rgba(165, 255, 242, 0.74);
}

.mlHeroCopy h2 {
  margin: 0;
  font-size: clamp(42px, 5.3vw, 82px);
  line-height: 0.86;
  font-weight: 300;
  letter-spacing: -0.075em;
  text-shadow: 0 0 30px rgba(120, 255, 240, 0.13), 0 0 90px rgba(0, 0, 0, 0.85);
}

.mlHeroCopy p {
  margin: 20px 0 0;
  max-width: 345px;
  color: rgba(232, 248, 245, 0.78);
  font-size: 13px;
  line-height: 1.58;
}

.mlNodeIndex {
  position: absolute;
  left: 52px;
  bottom: 58px;
  z-index: 21;
  display: flex;
  gap: 10px;
}

.mlNodeIndex button {
  width: 112px;
  height: 50px;
  border-radius: 999px;
  border: 1px solid rgba(175, 255, 244, 0.16);
  background: rgba(2, 9, 10, 0.58);
  color: rgba(238, 255, 252, 0.72);
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  cursor: pointer;
  backdrop-filter: blur(18px);
  transition:
    transform 240ms ease,
    border-color 240ms ease,
    box-shadow 240ms ease,
    background 240ms ease;
}

.mlNodeIndex button:hover,
.mlNodeIndex button.on,
.mlNodeIndex button.current {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--dot-color) 64%, white);
  background: radial-gradient(circle at 30% 50%, color-mix(in srgb, var(--dot-color) 19%, transparent), rgba(2, 9, 10, 0.72));
  box-shadow:
    0 0 25px color-mix(in srgb, var(--dot-color) 42%, transparent),
    inset 0 0 20px color-mix(in srgb, var(--dot-color) 14%, transparent);
}

.mlNodeIndex span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(220, 255, 250, 0.2);
  font-size: 10px;
  letter-spacing: 0.1em;
}

.mlNodeIndex b {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
  font-size: 9px;
  letter-spacing: 0.12em;
  font-weight: 500;
  text-transform: uppercase;
}

.mlHoverPin {
  position: absolute;
  left: var(--mx);
  top: var(--my);
  z-index: 22;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.mlHoverRing {
  width: 190px;
  height: 190px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--hover-color) 56%, transparent);
  background: radial-gradient(circle, color-mix(in srgb, var(--hover-color) 14%, transparent), transparent 62%), rgba(2, 10, 11, 0.05);
  backdrop-filter: blur(1.5px);
  display: grid;
  place-items: center;
  text-align: center;
  box-shadow:
    0 0 46px color-mix(in srgb, var(--hover-color) 28%, transparent),
    inset 0 0 34px rgba(255, 255, 255, 0.035);
  animation: mlHoverRing 1.8s ease-in-out infinite;
}

@keyframes mlHoverRing {
  0%, 100% { transform: scale(0.96); opacity: 0.72; }
  50% { transform: scale(1.04); opacity: 1; }
}

.mlHoverRing span {
  display: block;
  font-size: 20px;
  letter-spacing: -0.04em;
  color: white;
}

.mlHoverRing b {
  display: block;
  margin-top: 5px;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgba(225, 255, 250, 0.64);
}

.mlDetailPanel {
  position: absolute;
  right: 54px;
  top: 50%;
  z-index: 23;
  width: min(410px, calc(100vw - 58px));
  max-height: calc(100vh - 110px);
  overflow: hidden;
  transform: translateY(-50%) translateX(48px) rotateY(-8deg);
  opacity: 0;
  pointer-events: none;
  padding: 24px;
  border-radius: 30px;
  border: 1px solid rgba(175, 255, 242, 0.26);
  background:
    linear-gradient(135deg, rgba(230, 255, 250, 0.14), rgba(6, 18, 20, 0.86)),
    radial-gradient(circle at 0% 0%, rgba(116, 255, 244, 0.22), transparent 42%);
  backdrop-filter: blur(30px) saturate(150%);
  box-shadow:
    0 38px 110px rgba(0, 0, 0, 0.66),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 0 60px rgba(125, 255, 242, 0.06);
  transition:
    opacity 420ms ease,
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mlDetailPanel.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0) rotateY(-4deg);
}

.mlBackButton {
  display: inline-flex;
  margin-bottom: 18px;
  width: 100%;
  justify-content: flex-start;
  border: 1px solid rgba(160, 255, 240, 0.26);
  background: rgba(4, 15, 16, 0.5);
  color: rgba(235, 255, 252, 0.76);
  border-radius: 999px;
  padding: 10px 13px;
  font-size: 10px;
  letter-spacing: 0.18em;
  cursor: pointer;
}

.mlDetailMeta {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(217, 255, 249, 0.72);
}

.mlDetailPanel h3 {
  margin: 0 0 18px;
  font-size: 34px;
  line-height: 0.96;
  font-weight: 300;
  letter-spacing: -0.055em;
}

.mlMediaWindow {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  margin-bottom: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
}

.mlMediaWindow.previewMode {
  height: 250px;
  padding: 0;
  background: #020607;
}

.mlMediaWindow.previewMode::before,
.mlMediaWindow.panoramaMode::before {
  display: none;
}

.mlPreviewImage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
  transform: scale(1.02);
  filter: saturate(0.95) contrast(1.04) brightness(0.82);
}

.mlPreviewShade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(1, 8, 9, 0.78), transparent 58%),
    radial-gradient(circle at 50% 45%, transparent 0%, rgba(1, 8, 9, 0.18) 100%);
}

.mlPanoramaOverlay,
.mapPanelPreviewLabel,
.mapPanelPreviewText,
.mapPanelPreviewCaption {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.mlOpenPanoramaButton {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 14px;
  z-index: 6;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 28px);
  height: 32px;
  border: 1px solid rgba(220, 255, 248, 0.24);
  background: rgba(2, 10, 12, 0.78);
  color: rgba(242, 255, 252, 0.9);
  border-radius: 999px;
  padding: 0 14px;
  font-size: 9px;
  letter-spacing: 0.18em;
  cursor: pointer;
  backdrop-filter: blur(14px);
  text-align: center;
}

.mlOpenPanoramaButton:hover {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(20, 40, 42, 0.88);
  transform: translateX(-50%) translateY(-1px);
}

.mlDetailPanel p {
  margin: 0 0 18px;
  color: rgba(228, 247, 243, 0.76);
  font-size: 13px;
  line-height: 1.56;
}

.mlDetailStats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mlDetailStats div {
  border-radius: 18px;
  padding: 14px;
  background: rgba(2, 8, 9, 0.42);
  border: 1px solid rgba(185, 255, 244, 0.13);
}

.mlDetailStats span {
  display: block;
  margin-bottom: 7px;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgba(195, 255, 246, 0.55);
}

.mlDetailStats b {
  font-size: 13px;
  color: rgba(245, 255, 253, 0.92);
}

.mlFooter {
  position: absolute;
  left: 58px;
  right: 58px;
  bottom: 20px;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
}

.mlFooterZoom {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mlFooterZoom ul {
  list-style: none;
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.mlFooterZoom li {
  width: 20px;
  height: 2px;
  background: rgba(190, 255, 246, 0.22);
}

.mlFooterZoom li.on {
  background: rgba(125, 255, 242, 0.86);
  box-shadow: 0 0 12px rgba(125, 255, 242, 0.55);
}

.mlFooterZoom span {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(225, 255, 250, 0.58);
}

.mlListButton {
  pointer-events: auto;
  border: 1px solid rgba(160, 255, 240, 0.18);
  background: rgba(3, 12, 13, 0.56);
  color: rgba(225, 255, 250, 0.7);
  border-radius: 999px;
  padding: 10px 15px;
  font-size: 10px;
  letter-spacing: 0.18em;
  cursor: pointer;
  backdrop-filter: blur(16px);
}

.mlFinalMessage {
  position: absolute;
  left: 50%;
  bottom: 94px;
  z-index: 25;
  width: min(650px, calc(100vw - 80px));
  transform: translateX(-50%) translateY(26px);
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transition: 700ms ease;
}

.mlFinalMessage.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.mlFinalMessage span {
  display: block;
  margin-bottom: 10px;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(150, 255, 242, 0.8);
}

.mlFinalMessage p {
  margin: 0;
  font-size: clamp(24px, 3.2vw, 42px);
  line-height: 1.04;
  font-weight: 300;
  letter-spacing: -0.055em;
}

.panoramaViewer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: #020607;
  cursor: grab;
}

.panoramaViewer:active {
  cursor: grabbing;
}

.panoramaViewer canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.panoramaFallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(235, 255, 250, 0.55);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.mlPanoPortal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #020607;
  animation: mlPanoPortalIn 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.mlPanoFrame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #020607;
  animation: mlPanoFrameIn 1200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.mlPanoWarp {
  position: absolute;
  inset: -20%;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.52), transparent 12%),
    radial-gradient(circle at 50% 50%, rgba(116, 255, 244, 0.26), transparent 32%),
    radial-gradient(circle at 50% 50%, rgba(159, 251, 240, 0.2), transparent 46%);
  mix-blend-mode: screen;
  filter: blur(10px);
  animation: mlPanoWarpIn 1100ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.mlPanoTopbar {
  position: absolute;
  left: 26px;
  right: 26px;
  top: 24px;
  z-index: 8;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}

.mlPanoTopbar div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mlPanoTopbar span {
  font-size: 10px;
  letter-spacing: 0.34em;
  color: rgba(220, 255, 248, 0.58);
}

.mlPanoTopbar b {
  font-size: clamp(28px, 4vw, 64px);
  line-height: 0.9;
  font-weight: 300;
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
}

.mlPanoTopbar button {
  pointer-events: auto;
  border: 1px solid rgba(220, 255, 248, 0.28);
  background: rgba(2, 10, 12, 0.68);
  color: rgba(242, 255, 252, 0.9);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 10px;
  letter-spacing: 0.18em;
  cursor: pointer;
  backdrop-filter: blur(14px);
}

.mlPanoHint {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 8;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(2, 10, 12, 0.52);
  border: 1px solid rgba(220, 255, 248, 0.16);
  backdrop-filter: blur(14px);
  color: rgba(242, 255, 252, 0.8);
}

.mlPanoHint span,
.mlPanoHint b {
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 500;
}

@keyframes mlPanoPortalIn {
  0% { opacity: 0; transform: scale(0.72); filter: blur(18px); }
  55% { opacity: 1; transform: scale(1.035); filter: blur(4px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

@keyframes mlPanoFrameIn {
  0% { transform: scale(1.5); filter: blur(18px) saturate(1.4); }
  100% { transform: scale(1); filter: blur(0) saturate(1); }
}

@keyframes mlPanoWarpIn {
  0% { opacity: 1; transform: scale(0.15); }
  70% { opacity: 0.6; transform: scale(1.4); }
  100% { opacity: 0; transform: scale(2); }
}

@media (max-width: 920px) {
  .mlHeader { left: 22px; right: 22px; }
  .mlHeroCopy { left: 24px; top: 110px; }
  .mlHeroCopy h2 { font-size: 54px; }
  .mlNodeIndex { left: 22px; right: 22px; bottom: 78px; overflow-x: auto; }
  .mlNodeIndex button { min-width: 102px; }
  .mlDetailPanel {
    left: 18px;
    right: 18px;
    top: auto;
    bottom: 18px;
    width: auto;
    transform: translateY(30px);
  }
  .mlDetailPanel.open { transform: translateY(0); }
  .mlFooter { left: 22px; right: 22px; }
}

/* FINAL FIX: screen-space connection overlay.
   This sits above the MapLibre canvas, so organic network lines never get hidden
   behind 3D building extrusions. */
.mlConnectionOverlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  mix-blend-mode: screen;
}

.mlSvgConnectionGroup {
  opacity: 0.55;
  transition: opacity 260ms ease;
}

.mlSvgConnectionGroup.active,
.mlSvgConnectionGroup.focused {
  opacity: 1;
}

.mlSvgConnectionGroup.branch {
  opacity: 0.22;
}

.mlSvgConnectionGroup.branch.active,
.mlSvgConnectionGroup.branch.focused {
  opacity: 0.55;
}

.mlSvgConnectionShadow,
.mlSvgConnectionGlow,
.mlSvgConnectionCore,
.mlSvgConnectionPulse {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.mlSvgConnectionShadow {
  stroke: rgba(0, 4, 5, 0.98);
  stroke-width: 18px;
  opacity: 0.86;
  filter: blur(2.2px);
}

.mlSvgConnectionGlow {
  stroke: rgba(113, 255, 227, 0.78);
  stroke-width: 10px;
  opacity: 0.52;
  filter: blur(5px);
}

.mlSvgConnectionCore {
  stroke: rgba(238, 255, 250, 0.96);
  stroke-width: 3.6px;
  opacity: 0.9;
  filter: drop-shadow(0 0 8px rgba(113, 255, 227, 0.75));
}

.mlSvgConnectionPulse {
  stroke: rgba(255, 255, 255, 0.98);
  stroke-width: 1.5px;
  opacity: 0;
  stroke-dasharray: 0.07 0.08;
  animation: mlSvgConnectionFlow 1.7s linear infinite;
}

.mlSvgConnectionGroup.active .mlSvgConnectionPulse,
.mlSvgConnectionGroup.focused .mlSvgConnectionPulse {
  opacity: 0.85;
}

.mlSvgConnectionGroup.branch .mlSvgConnectionShadow {
  stroke-width: 7px;
  opacity: 0.45;
  filter: blur(2px);
}

.mlSvgConnectionGroup.branch .mlSvgConnectionGlow {
  stroke-width: 3px;
  opacity: 0.38;
  filter: blur(2.4px);
}

.mlSvgConnectionGroup.branch .mlSvgConnectionCore {
  stroke-width: 1.2px;
  opacity: 0.52;
}

.mlSvgConnectionGroup.branch .mlSvgConnectionPulse {
  display: none;
}

@keyframes mlSvgConnectionFlow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -1; }
}

/* FINAL CONNECTION FIX — screen-space SVG connections above 3D buildings */
.mlConnectionSvg {
  position: absolute;
  inset: 0;
  z-index: 16;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  mix-blend-mode: screen;
}

.mlConnectionGroup {
  opacity: 0.72;
  transition: opacity 240ms ease;
}

.mlConnectionGroup.active,
.mlConnectionGroup.focused {
  opacity: 1;
}

.mlConnectionGroup.branch {
  opacity: 0.32;
}

.mlConnectionGroup.branch.active,
.mlConnectionGroup.branch.focused {
  opacity: 0.72;
}

.mlConnectionShadow,
.mlConnectionBranch,
.mlConnectionGlowPath,
.mlConnectionCorePath,
.mlConnectionPulsePath {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.mlConnectionShadow {
  stroke: rgba(0, 5, 7, 0.98);
  stroke-width: 20px;
  opacity: 0.9;
  filter: blur(2.6px);
}

.mlConnectionBranch {
  stroke: rgba(159, 251, 240, 0.76);
  stroke-width: 2.4px;
  opacity: 0.54;
  filter: drop-shadow(0 0 8px rgba(159, 251, 240, 0.65));
}

.mlConnectionGlowPath {
  stroke: rgba(113, 255, 227, 0.88);
  stroke-width: 10px;
  opacity: 0.76;
  filter: url(#mlConnectionGlowFilter);
}

.mlConnectionCorePath {
  stroke: rgba(244, 255, 252, 0.98);
  stroke-width: 4px;
  opacity: 0.96;
  filter: drop-shadow(0 0 10px rgba(113, 255, 227, 0.86));
}

.mlConnectionPulsePath {
  stroke: rgba(255, 255, 255, 0.98);
  stroke-width: 1.8px;
  opacity: 0;
  stroke-dasharray: 8 18;
  animation: mlConnectionPulseFlow 1.65s linear infinite;
}

.mlConnectionGroup.active .mlConnectionPulsePath,
.mlConnectionGroup.focused .mlConnectionPulsePath {
  opacity: 0.9;
}

.mlConnectionGroup.branch .mlConnectionShadow {
  stroke-width: 8px;
  opacity: 0.58;
  filter: blur(1.8px);
}

@keyframes mlConnectionPulseFlow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -52; }
}

/* MAP ZOOM TOGGLE PANEL */
.mlMapControlPanel {
  position: absolute;
  right: 42px;
  top: 82px;
  z-index: 82;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 999px;
  border: 1px solid rgba(180, 255, 245, 0.18);
  background: rgba(2, 10, 12, 0.58);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.32),
    inset 0 0 22px rgba(140, 255, 240, 0.045);
}

.mlMapControlPanel button {
  border: 1px solid rgba(180, 255, 245, 0.22);
  background: rgba(4, 16, 18, 0.74);
  color: rgba(235, 255, 252, 0.78);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 9px;
  letter-spacing: 0.18em;
  cursor: pointer;
  transition:
    background 220ms ease,
    color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.mlMapControlPanel button:hover {
  transform: translateY(-1px);
  border-color: rgba(210, 255, 248, 0.42);
}

.mlMapControlPanel button.active {
  color: #031211;
  background: #9ffbf0;
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow:
    0 0 22px rgba(159, 251, 240, 0.42),
    0 0 52px rgba(159, 251, 240, 0.22);
}

.mlMapControlPanel span {
  font-size: 9px;
  letter-spacing: 0.12em;
  color: rgba(220, 255, 250, 0.52);
  white-space: nowrap;
}

@media (max-width: 920px) {
  .mlMapControlPanel {
    right: 18px;
    top: 76px;
  }

  .mlMapControlPanel span {
    display: none;
  }
}
/* Map performance/design patch */
.mapLibreCrystalStage {
  contain: layout paint size;
  --ml-fx-opacity: 0.72;
  --ml-vignette-opacity: 0.76;
}

.mapLibreCrystalStage .mlCityGlow,
.mapLibreCrystalStage .mlMapLight,
.mapLibreCrystalStage .mlTerrainMask,
.mapLibreCrystalStage .mlWaterVeil,
.mapLibreCrystalStage .mlCrystalField,
.mapLibreCrystalStage .mlScanGrid {
  will-change: opacity, transform;
}

.mapLibreCrystalStage .mlHeavyVignette {
  opacity: var(--ml-vignette-opacity, 0.76);
}

.mapLibreCrystalStage.svg-connections-off .mlConnectionSvg {
  display: none !important;
}

.mapLibreCrystalStage .maplibregl-canvas {
  outline: none;
}
/* Map performance/design patch */
.mapLibreCrystalStage {
  contain: layout paint size;
  --ml-fx-opacity: 0.72;
  --ml-vignette-opacity: 0.76;
}

.mapLibreCrystalStage .mlCityGlow,
.mapLibreCrystalStage .mlMapLight,
.mapLibreCrystalStage .mlTerrainMask,
.mapLibreCrystalStage .mlWaterVeil,
.mapLibreCrystalStage .mlCrystalField,
.mapLibreCrystalStage .mlScanGrid {
  will-change: opacity, transform;
}

.mapLibreCrystalStage .mlHeavyVignette {
  opacity: var(--ml-vignette-opacity, 0.76);
}

.mapLibreCrystalStage.svg-connections-off .mlConnectionSvg {
  display: none !important;
}

.mapLibreCrystalStage .maplibregl-canvas {
  outline: none;
}


/* -------------------------------------------------------------------------- */
/* FINAL HARD FIX: remove map bands + prevent global button styles on PNG pins */
/* -------------------------------------------------------------------------- */
.mapLibreCrystalStage .mlCityGlow,
.mapLibreCrystalStage .mlMapLight,
.mapLibreCrystalStage .mlTerrainMask,
.mapLibreCrystalStage .mlWaterVeil,
.mapLibreCrystalStage .mlCrystalField,
.mapLibreCrystalStage .mlScanGrid,
.mapLibreCrystalStage .mlHeavyVignette,
.mapLibreCrystalStage .mlCursorGlow {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
}

.mapLibreCrystalStage .mlLogoMarkerLayer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 40 !important;
  pointer-events: none !important;
  background: transparent !important;
  filter: none !important;
}

.mapLibreCrystalStage .mlLogoMarker,
.mapLibreCrystalStage .mlLogoMarker:hover,
.mapLibreCrystalStage .mlLogoMarker:focus,
.mapLibreCrystalStage .mlLogoMarker:active {
  position: absolute !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: auto !important;
  overflow: visible !important;
}

.mapLibreCrystalStage .mlLogoMarkerInner {
  position: relative !important;
  width: var(--logo-size) !important;
  height: var(--logo-size) !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  border-radius: 999px !important;
}

.mapLibreCrystalStage .mlLogoMarkerRing {
  width: var(--ring-size) !important;
  height: var(--ring-size) !important;
  max-width: 92px !important;
  max-height: 92px !important;
  border-radius: 999px !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 0 var(--ring-glow) color-mix(in srgb, var(--node-color) 54%, transparent) !important;
  animation: none !important;
}

.mapLibreCrystalStage .mlLogoMarker.is-pulse .mlLogoMarkerRing {
  animation: none !important;
}

.mapLibreCrystalStage .mlHoverPin,
.mapLibreCrystalStage .mlHoverRing {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  animation: none !important;
}

/* -------------------------------------------------------------------------- */
/* FINAL V11: crystal icon markers, no rings                                  */
/* -------------------------------------------------------------------------- */
.mapLibreCrystalStage .mlLogoMarkerLayer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 40 !important;
  pointer-events: none !important;
  background: transparent !important;
  filter: none !important;
}

.mapLibreCrystalStage .mlLogoMarker,
.mapLibreCrystalStage .mlLogoMarker:hover,
.mapLibreCrystalStage .mlLogoMarker:focus,
.mapLibreCrystalStage .mlLogoMarker:active {
  position: absolute !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: auto !important;
  overflow: visible !important;
}

.mapLibreCrystalStage .mlLogoMarkerInner {
  position: relative !important;
  width: var(--logo-size) !important;
  height: var(--logo-size) !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  border-radius: 999px !important;
  isolation: isolate !important;
}

.mapLibreCrystalStage .mlLogoMarkerRing,
.mapLibreCrystalStage .mlHoverPin,
.mapLibreCrystalStage .mlHoverRing {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
}

.mapLibreCrystalStage .mlLogoMarkerInner::before {
  content: "" !important;
  position: absolute !important;
  inset: -12px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--node-color) 36%, white) 0%, color-mix(in srgb, var(--node-color) 22%, transparent) 34%, transparent 72%) !important;
  filter: blur(12px) !important;
  opacity: 0.72 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  transform: scale(0.92) !important;
  transition: opacity 220ms ease, transform 220ms ease, filter 220ms ease !important;
}

.mapLibreCrystalStage .mlLogoMarkerInner::after {
  content: "" !important;
  position: absolute !important;
  inset: -4px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.28) 34%, transparent 48%, rgba(255,255,255,0.08) 62%, transparent 100%) !important;
  mix-blend-mode: screen !important;
  opacity: 0.34 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  transform: rotate(-18deg) !important;
  transition: opacity 220ms ease, transform 220ms ease !important;
}

.mapLibreCrystalStage .mlLogoMarkerIcon {
  position: relative !important;
  width: var(--logo-size) !important;
  height: var(--logo-size) !important;
  object-fit: contain !important;
  display: block !important;
  opacity: var(--logo-opacity) !important;
  z-index: 2 !important;
  filter:
    drop-shadow(0 0 8px color-mix(in srgb, var(--node-color) 78%, transparent))
    drop-shadow(0 0 var(--logo-glow) color-mix(in srgb, var(--node-color) 68%, transparent))
    drop-shadow(0 8px 18px rgba(0,0,0,0.58)) !important;
  transition: width 180ms ease, height 180ms ease, transform 180ms ease, filter 180ms ease, opacity 180ms ease !important;
}

.mapLibreCrystalStage .mlLogoMarker:hover .mlLogoMarkerInner::before,
.mapLibreCrystalStage .mlLogoMarker.is-hovered .mlLogoMarkerInner::before {
  opacity: 1 !important;
  transform: scale(1.14) !important;
  filter: blur(15px) !important;
}

.mapLibreCrystalStage .mlLogoMarker:hover .mlLogoMarkerInner::after,
.mapLibreCrystalStage .mlLogoMarker.is-hovered .mlLogoMarkerInner::after {
  opacity: 0.62 !important;
  transform: rotate(12deg) scale(1.12) !important;
}

.mapLibreCrystalStage .mlLogoMarker:hover .mlLogoMarkerIcon,
.mapLibreCrystalStage .mlLogoMarker.is-hovered .mlLogoMarkerIcon {
  width: var(--logo-hover-size) !important;
  height: var(--logo-hover-size) !important;
  transform: scale(1.06) !important;
  filter:
    drop-shadow(0 0 12px color-mix(in srgb, var(--node-color) 90%, white))
    drop-shadow(0 0 calc(var(--logo-glow) * 1.35) color-mix(in srgb, var(--node-color) 82%, transparent))
    drop-shadow(0 0 22px rgba(255,255,255,0.24))
    drop-shadow(0 10px 22px rgba(0,0,0,0.62)) !important;
}

.mapLibreCrystalStage .mlLogoMarker.is-active .mlLogoMarkerInner::before {
  opacity: 1 !important;
  transform: scale(1.22) !important;
  filter: blur(18px) !important;
}

.mapLibreCrystalStage .mlLogoMarker.is-active .mlLogoMarkerIcon {
  width: var(--logo-active-size) !important;
  height: var(--logo-active-size) !important;
  transform: scale(1.08) !important;
  filter:
    drop-shadow(0 0 14px color-mix(in srgb, var(--node-color) 100%, white))
    drop-shadow(0 0 calc(var(--logo-glow) * 1.55) color-mix(in srgb, var(--node-color) 88%, transparent))
    drop-shadow(0 0 28px rgba(255,255,255,0.28))
    drop-shadow(0 12px 26px rgba(0,0,0,0.65)) !important;
}


/* -------------------------------------------------------------------------- */
/* V17 PLAIN MAP ICONS — performance-safe                                      */
/* -------------------------------------------------------------------------- */

.mlHoverPin,
.mlHoverRing,
.mlLogoMarkerRing {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
  pointer-events: none !important;
}

.mlLogoMarker {
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.mlLogoMarkerInner {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.mlLogoMarkerInner::before,
.mlLogoMarkerInner::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  animation: none !important;
}

.mlLogoMarkerIcon,
.mlLogoMarker:hover .mlLogoMarkerIcon,
.mlLogoMarker.is-hovered .mlLogoMarkerIcon,
.mlLogoMarker.is-active .mlLogoMarkerIcon {
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.mlLogoMarkerFallback {
  filter: none !important;
  box-shadow: none !important;
}

.mlCityGlow,
.mlMapLight,
.mlTerrainMask,
.mlWaterVeil,
.mlCrystalField,
.mlScanGrid,
.mlHeavyVignette {
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}


/* V19 STORY BUILD / PLAIN ICON SAFETY */
.mlHoverPin,
.mlHoverRing,
.mlLogoMarkerRing {
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}

.mlLogoMarkerIcon,
.mlLogoMarker:hover .mlLogoMarkerIcon,
.mlLogoMarker.is-hovered .mlLogoMarkerIcon,
.mlLogoMarker.is-active .mlLogoMarkerIcon {
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.mlLogoMarkerInner::before,
.mlLogoMarkerInner::after {
  display: none !important;
  content: none !important;
}


/* -------------------------------------------------------------------------- */
/* V41 MAP INTERFACE CLEANUP                                                  */
/* -------------------------------------------------------------------------- */
.mlNodeIndex {
  display: none !important;
}

.mlFooter {
  left: auto !important;
  right: 28px !important;
  bottom: 18px !important;
  width: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 8px !important;
}

.mlFooterZoom {
  gap: 10px !important;
}

.mlFooterZoom li {
  width: 14px !important;
  opacity: 0.9;
}

.mlFooterZoom span {
  font-size: 8px !important;
  letter-spacing: 0.22em !important;
  color: rgba(205, 224, 220, 0.40) !important;
}

.mlListButton {
  padding: 8px 11px !important;
  font-size: 8px !important;
  letter-spacing: 0.22em !important;
  color: rgba(225, 255, 250, 0.56) !important;
  background: rgba(3, 12, 13, 0.36) !important;
  border-color: rgba(160, 255, 240, 0.12) !important;
  box-shadow: none !important;
}

@media (max-width: 900px) {
  .mlFooter {
    right: 22px !important;
    bottom: 16px !important;
  }
}


/* -------------------------------------------------------------------------- */
/* V52 MAP ICON SIZE + STABLE HOVER CIRCLE                                     */
/* -------------------------------------------------------------------------- */

.mapLibreCrystalStage .mlLogoMarker {
  min-width: calc(var(--logo-hover-size) + 38px) !important;
  min-height: calc(var(--logo-hover-size) + 38px) !important;
  display: grid !important;
  place-items: center !important;
  touch-action: manipulation !important;
}

.mapLibreCrystalStage .mlLogoMarkerRing {
  display: block !important;
  visibility: visible !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: var(--ring-size) !important;
  height: var(--ring-size) !important;
  border-radius: 999px !important;
  transform: translate(-50%, -50%) scale(0.88) !important;
  border: var(--ring-thickness) solid color-mix(in srgb, var(--node-color) 62%, white) !important;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--node-color) 14%, transparent), transparent 64%),
    rgba(2, 10, 11, 0.04) !important;
  box-shadow:
    0 0 var(--ring-glow) color-mix(in srgb, var(--node-color) 38%, transparent),
    inset 0 0 26px rgba(255,255,255,0.035) !important;
  opacity: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  transition: opacity 160ms ease, transform 160ms ease !important;
  animation: none !important;
}

.mapLibreCrystalStage .mlLogoMarker:hover .mlLogoMarkerRing,
.mapLibreCrystalStage .mlLogoMarker.is-hovered .mlLogoMarkerRing,
.mapLibreCrystalStage .mlLogoMarker.is-active .mlLogoMarkerRing {
  opacity: var(--ring-opacity) !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

.mapLibreCrystalStage .mlLogoMarkerIcon {
  width: var(--logo-size) !important;
  height: var(--logo-size) !important;
}

.mapLibreCrystalStage .mlLogoMarker:hover .mlLogoMarkerIcon,
.mapLibreCrystalStage .mlLogoMarker.is-hovered .mlLogoMarkerIcon {
  width: var(--logo-hover-size) !important;
  height: var(--logo-hover-size) !important;
}

.mapLibreCrystalStage .mlLogoMarker.is-active .mlLogoMarkerIcon {
  width: var(--logo-active-size) !important;
  height: var(--logo-active-size) !important;
}




/* -------------------------------------------------------------------------- */

.mapLibreCrystalStage {
  contain: layout paint size;
  transform: translateZ(0);
}

@media (max-width: 768px) {
  .mlHeader {
    left: 18px !important;
    right: 18px !important;
    top: 18px !important;
  }

  .mlMapControlPanel {
    display: none !important;
  }

  .mlHeroCopy {
    display: none !important;
  }

  .mlModePill {
    padding: 8px 10px !important;
    font-size: 8px !important;
  }

  .mapMissionOverlay.persistent,
  .mapMissionOverlay {
    left: 18px !important;
    right: 18px !important;
    bottom: 76px !important;
    width: auto !important;
    max-width: none !important;
  }

  .mapLibreCrystalStage .mlLogoMarker {
    min-width: calc(var(--logo-hover-size) + 24px) !important;
    min-height: calc(var(--logo-hover-size) + 24px) !important;
  }

  .mlFooter {
    right: 18px !important;
    bottom: 14px !important;
  }

  .mlDetailPanel {
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
    width: auto !important;
    max-height: 54vh !important;
    overflow-y: auto !important;
  }
}


/* -------------------------------------------------------------------------- */
/* V62 MAP LABEL / RING CLEANUP                                                */
/* -------------------------------------------------------------------------- */

/* Hide all icon text labels, including the remaining Basilica label. */
.mlLogoMarkerLabel,
.mapLibreCrystalStage .mlLogoMarkerLabel {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* The hover circle appears only while hovering, so Basilica does not stay special by default. */
.mapLibreCrystalStage .mlLogoMarker.is-active .mlLogoMarkerRing {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(0.88) !important;
}

.mapLibreCrystalStage .mlLogoMarker:hover .mlLogoMarkerRing,
.mapLibreCrystalStage .mlLogoMarker.is-hovered .mlLogoMarkerRing {
  opacity: var(--ring-opacity) !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

.mapLibreCrystalStage .mlLogoMarker.is-active .mlLogoMarkerIcon {
  width: var(--logo-size) !important;
  height: var(--logo-size) !important;
  transform: scale(1) !important;
}


/* -------------------------------------------------------------------------- */
/* V64 FINAL MAP STABILITY + MOBILE                                            */
/* -------------------------------------------------------------------------- */

/* Keep map visible during detail transitions; prevents black flash perception. */
.mapLibreCrystalStage,
.mapLibreCrystalStage .maplibregl-map,
.mapLibreCrystalStage .maplibregl-canvas,
.mapLibreCrystalStage canvas {
  background: #020607 !important;
}

.mlLogoMarker {
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

.mlLogoMarker,
.mlLogoMarkerInner,
.mlLogoMarkerIcon {
  will-change: transform, opacity !important;
}

.mlDetailPanel,
.mlBottomPanel,
.mapMissionOverlay {
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
}

@media (max-width: 768px) {
  .mapLibreCrystalStage {
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
  }

  .mlHeader {
    left: 16px !important;
    right: 16px !important;
    top: 16px !important;
    gap: 8px !important;
  }

  .mlBrand b {
    font-size: 13px !important;
  }

  .mlBrand span,
  .mlModePill span {
    font-size: 8px !important;
  }

  .mlModePill {
    padding: 8px 10px !important;
  }

  .mlHeroCopy {
    display: none !important;
  }

  .mlMapControlPanel {
    display: none !important;
  }

  .mlBottomPanel {
    left: 16px !important;
    right: 16px !important;
    bottom: 14px !important;
    width: auto !important;
    max-width: none !important;
  }

  .mlDetailPanel {
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
    width: auto !important;
    max-width: none !important;
    max-height: 56svh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  .mapLibreCrystalStage .mlLogoMarker {
    min-width: calc(var(--logo-hover-size) + 22px) !important;
    min-height: calc(var(--logo-hover-size) + 22px) !important;
  }

  .mapLibreCrystalStage .mlLogoMarkerRing {
    box-shadow: 0 0 12px color-mix(in srgb, var(--node-color) 32%, transparent) !important;
  }
}


/* -------------------------------------------------------------------------- */
/* V69 IPHONE MAP LAYOUT FIX                                                   */
/* -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .mapLibreCrystalStage {
    width: 100vw !important;
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
  }

  .mapLibreCrystalStage .maplibregl-map,
  .mapLibreCrystalStage .maplibregl-canvas-container,
  .mapLibreCrystalStage canvas {
    width: 100vw !important;
    height: 100svh !important;
  }

  .mlHeader {
    left: 16px !important;
    right: 16px !important;
    top: calc(14px + env(safe-area-inset-top, 0px)) !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
    z-index: 50 !important;
  }

  .mlBrand {
    max-width: 58vw !important;
  }

  .mlBrand span {
    font-size: 7.5px !important;
    letter-spacing: 0.18em !important;
  }

  .mlBrand b {
    font-size: 13px !important;
    letter-spacing: -0.02em !important;
  }

  .mlModePill {
    padding: 7px 9px !important;
    min-width: auto !important;
    max-width: 34vw !important;
    border-radius: 999px !important;
  }

  .mlModePill span {
    font-size: 7px !important;
    letter-spacing: 0.14em !important;
  }

  .mlModePill b {
    font-size: 11px !important;
  }

  .mlBottomPanel {
    left: 14px !important;
    right: 14px !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    padding: 12px 13px !important;
    border-radius: 16px !important;
    z-index: 48 !important;
  }

  .mlBottomPanel h3,
  .mlDetailPanel h3 {
    font-size: 17px !important;
    line-height: 1.05 !important;
  }

  .mlBottomPanel p,
  .mlDetailPanel p {
    font-size: 11px !important;
    line-height: 1.46 !important;
  }

  .mlDetailPanel {
    left: 14px !important;
    right: 14px !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: 50svh !important;
    overflow-y: auto !important;
    padding: 14px 14px 15px !important;
    border-radius: 18px !important;
    z-index: 70 !important;
    overscroll-behavior: contain !important;
  }

  .mlDetailPanel button,
  .mlBottomPanel button {
    min-height: 38px !important;
    font-size: 9px !important;
    letter-spacing: 0.16em !important;
  }

  .mapLibreCrystalStage .mlLogoMarker {
    min-width: 84px !important;
    min-height: 84px !important;
  }

  .mapLibreCrystalStage .mlLogoMarkerInner {
    width: var(--logo-size) !important;
    height: var(--logo-size) !important;
  }

  .mapLibreCrystalStage .mlLogoMarkerIcon {
    width: 58px !important;
    height: 58px !important;
  }

  .mapLibreCrystalStage .mlLogoMarker:hover .mlLogoMarkerIcon,
  .mapLibreCrystalStage .mlLogoMarker.is-hovered .mlLogoMarkerIcon {
    width: 66px !important;
    height: 66px !important;
  }

  .mapLibreCrystalStage .mlLogoMarkerRing {
    width: 82px !important;
    height: 82px !important;
    box-shadow: 0 0 11px color-mix(in srgb, var(--node-color) 30%, transparent) !important;
  }

  .mlFooter {
    right: 14px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    font-size: 7px !important;
    opacity: 0.55 !important;
  }

  .mlLogoMarkerLabel {
    display: none !important;
  }
}


/* -------------------------------------------------------------------------- */
/* V70 MAP RESPONSIVE BREAKPOINTS FINAL                                        */
/* -------------------------------------------------------------------------- */

/* Tablet map */
@media (min-width: 769px) and (max-width: 1024px) {
  .mapLibreCrystalStage {
    height: 100svh !important;
    min-height: 100svh !important;
  }

  .mlHeader {
    left: 24px !important;
    right: 24px !important;
    top: 24px !important;
  }

  .mlHeroCopy {
    left: 34px !important;
    bottom: 12vh !important;
    max-width: 420px !important;
  }

  .mlBottomPanel,
  .mlDetailPanel {
    left: 24px !important;
    right: auto !important;
    bottom: 24px !important;
    width: min(460px, calc(100vw - 48px)) !important;
  }
}

/* Mobile map */
@media (max-width: 768px) {
  .mapLibreCrystalStage,
  .mapLibreCrystalStage .maplibregl-map,
  .mapLibreCrystalStage .maplibregl-canvas-container,
  .mapLibreCrystalStage canvas {
    width: 100vw !important;
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
  }

  .mlHeader {
    left: 16px !important;
    right: 16px !important;
    top: calc(14px + env(safe-area-inset-top, 0px)) !important;
    gap: 8px !important;
    z-index: 50 !important;
  }

  .mlBrand {
    max-width: 58vw !important;
  }

  .mlBrand span {
    font-size: 7.5px !important;
    letter-spacing: 0.18em !important;
  }

  .mlBrand b {
    font-size: 13px !important;
  }

  .mlModePill {
    padding: 7px 9px !important;
    max-width: 34vw !important;
  }

  .mlModePill span {
    font-size: 7px !important;
    letter-spacing: 0.14em !important;
  }

  .mlHeroCopy,
  .mlMapControlPanel,
  .mlLogoMarkerLabel {
    display: none !important;
  }

  .mlBottomPanel {
    left: 14px !important;
    right: 14px !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    padding: 12px 13px !important;
    border-radius: 16px !important;
  }

  .mlDetailPanel {
    left: 14px !important;
    right: 14px !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: 50svh !important;
    overflow-y: auto !important;
    padding: 14px 14px 15px !important;
    border-radius: 18px !important;
    overscroll-behavior: contain !important;
  }

  .mlBottomPanel h3,
  .mlDetailPanel h3 {
    font-size: 17px !important;
    line-height: 1.05 !important;
  }

  .mlBottomPanel p,
  .mlDetailPanel p {
    font-size: 11px !important;
    line-height: 1.46 !important;
  }

  .mapLibreCrystalStage .mlLogoMarker {
    min-width: 84px !important;
    min-height: 84px !important;
  }

  .mapLibreCrystalStage .mlLogoMarkerIcon {
    width: 58px !important;
    height: 58px !important;
  }

  .mapLibreCrystalStage .mlLogoMarker:hover .mlLogoMarkerIcon,
  .mapLibreCrystalStage .mlLogoMarker.is-hovered .mlLogoMarkerIcon {
    width: 66px !important;
    height: 66px !important;
  }

  .mapLibreCrystalStage .mlLogoMarkerRing {
    width: 82px !important;
    height: 82px !important;
  }

  .mlFooter {
    right: 14px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    font-size: 7px !important;
    opacity: 0.55 !important;
  }
}

/* Small phone map */
@media (max-width: 389px) {
  .mlHeader {
    left: 12px !important;
    right: 12px !important;
  }

  .mlBrand span {
    font-size: 6.8px !important;
  }

  .mlBrand b {
    font-size: 11.5px !important;
  }

  .mlModePill {
    padding: 6px 8px !important;
  }

  .mlBottomPanel,
  .mlDetailPanel {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mapLibreCrystalStage .mlLogoMarker {
    min-width: 76px !important;
    min-height: 76px !important;
  }

  .mapLibreCrystalStage .mlLogoMarkerIcon {
    width: 52px !important;
    height: 52px !important;
  }
}

/* Landscape phone map */
@media (max-width: 900px) and (orientation: landscape) {
  .mlHeader {
    left: 18px !important;
    right: 18px !important;
    top: 12px !important;
  }

  .mlBottomPanel,
  .mlDetailPanel {
    left: 18px !important;
    right: auto !important;
    bottom: 12px !important;
    width: min(420px, 48vw) !important;
    max-height: 68svh !important;
  }
}


/* -------------------------------------------------------------------------- */
/* V140 FINAL MOBILE ICON TAP + DETAIL DRIFT SAFETY                            */
/* -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .mlLogoMarker,
  .mlCisternMarker,
  .cisternMarker,
  .mapMarker,
  .maplibregl-marker {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
  }

  .mlLogoMarker *,
  .mlCisternMarker *,
  .cisternMarker *,
  .mapMarker *,
  .maplibregl-marker * {
    pointer-events: auto !important;
  }
}