.mapExperience{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 350px;
  min-height:690px;
  overflow:hidden;
  background:#071019;
  border:1px solid #315168;
  box-shadow:0 40px 100px rgba(0,0,0,.42);
}
.mapExperience::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(101,236,243,.12),transparent 1px),linear-gradient(rgba(101,236,243,.08),transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(90deg,#000,transparent 48%);
  opacity:.28;
}
.mapViewport{
  position:relative;
  min-width:0;
  min-height:690px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 38%,rgba(24,103,133,.38),transparent 42%),
    linear-gradient(145deg,#0a1722,#03070c 72%);
  border-right:1px solid #29465a;
}
.mapViewport::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.018) 50%,transparent 50%);
  background-size:100% 4px;
  mix-blend-mode:screen;
}
.mapViewport::after{
  content:"";
  position:absolute;
  inset:18px;
  z-index:3;
  pointer-events:none;
  border:1px solid rgba(112,227,237,.18);
  clip-path:polygon(0 0,88px 0,88px 1px,1px 1px,1px 74px,0 74px,0 100%,100% 100%,100% calc(100% - 74px),calc(100% - 1px) calc(100% - 74px),calc(100% - 1px) calc(100% - 1px),calc(100% - 88px) calc(100% - 1px),calc(100% - 88px) 100%,0 100%);
}
.mapViewport canvas{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  cursor:grab;
  touch-action:none;
  outline:none;
}
.mapViewport canvas:active{cursor:grabbing}
.mapViewport canvas:focus-visible{box-shadow:inset 0 0 0 3px var(--cyan)}
.mapFallback{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.72) contrast(1.15) brightness(.46);
}
.mapViewport.webgl-ready .mapFallback{opacity:0}
.mapViewerTop{
  position:absolute;
  z-index:5;
  top:34px;
  left:38px;
  right:38px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  pointer-events:none;
}
.mapLiveStatus{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 11px;
  color:#baf9fd;
  background:rgba(4,12,18,.8);
  border:1px solid rgba(101,236,243,.38);
  backdrop-filter:blur(8px);
  font:900 9px/1 var(--display);
  letter-spacing:1.35px;
}
.mapLiveStatus i{
  width:7px;
  height:7px;
  background:var(--green);
  box-shadow:0 0 11px var(--green);
  animation:mapPulse 1.7s ease-in-out infinite;
}
@keyframes mapPulse{50%{opacity:.35;transform:scale(.7)}}
.mapCoord{
  color:rgba(188,232,239,.55);
  font:800 8px/1.5 var(--display);
  letter-spacing:1.2px;
  text-align:right;
}
.mapViewerBottom{
  position:absolute;
  z-index:5;
  left:38px;
  right:38px;
  bottom:34px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  pointer-events:none;
}
.mapIdentity{max-width:620px}
.mapIdentity small{
  display:block;
  margin-bottom:9px;
  color:var(--cyan);
  font:900 9px/1 var(--display);
  letter-spacing:2px;
}
.mapIdentity h3{
  margin:0;
  font:900 clamp(40px,5.3vw,76px)/.82 var(--display);
  letter-spacing:-1.5px;
  text-transform:uppercase;
  text-shadow:0 5px 28px #000;
}
.mapIdentity p{
  max-width:560px;
  margin:14px 0 0;
  color:#b6c9d4;
  text-shadow:0 2px 8px #000;
  font-size:13px;
}
.mapViewerControls{
  display:grid;
  gap:7px;
  justify-items:end;
  pointer-events:auto;
}
.mapControlButtons{display:flex;gap:7px}
.mapControl{
  min-height:36px;
  padding:0 12px;
  color:#c9e7ec;
  background:rgba(5,14,21,.85);
  border:1px solid #36566b;
  cursor:pointer;
  font:900 8px/1 var(--display);
  letter-spacing:1.1px;
}
.mapControl[aria-pressed="true"]{color:#061116;background:var(--cyan);border-color:var(--cyan2)}
.mapHelp{
  color:#738b9c;
  background:rgba(4,11,17,.68);
  padding:6px 8px;
  font:800 7px/1 var(--display);
  letter-spacing:.9px;
}
.mapLoading{
  position:absolute;
  inset:0;
  z-index:7;
  display:grid;
  place-items:center;
  color:var(--cyan);
  background:#050b11;
  font:900 10px/1 var(--display);
  letter-spacing:2px;
  transition:opacity .25s,visibility .25s;
}
.mapLoading::before{
  content:"";
  position:absolute;
  width:74px;
  height:74px;
  border:1px solid #31576c;
  border-top-color:var(--cyan);
  border-radius:50%;
  animation:mapSpin .9s linear infinite;
}
.mapLoading[hidden]{display:grid;opacity:0;visibility:hidden}
@keyframes mapSpin{to{transform:rotate(360deg)}}
.mapDirectory{
  position:relative;
  z-index:5;
  display:flex;
  min-width:0;
  flex-direction:column;
  background:linear-gradient(180deg,#0b1620,#071019);
}
.mapDirectoryHeader{
  padding:24px 22px 19px;
  border-bottom:1px solid #29465a;
}
.mapDirectoryHeader small{
  display:block;
  color:#6f8799;
  font:800 8px/1 var(--display);
  letter-spacing:1.5px;
}
.mapDirectoryHeader strong{
  display:block;
  margin-top:9px;
  font:900 20px/1 var(--display);
  letter-spacing:.8px;
}
.mapChoices{
  display:grid;
  flex:1;
  grid-template-rows:repeat(6,1fr);
}
.mapChoice{
  position:relative;
  display:grid;
  grid-template-columns:96px minmax(0,1fr) auto;
  align-items:center;
  gap:13px;
  min-width:0;
  padding:12px 16px;
  color:#8399a9;
  background:transparent;
  border:0;
  border-bottom:1px solid #203948;
  cursor:pointer;
  text-align:left;
  transition:background .16s,color .16s;
}
.mapChoice:last-child{border-bottom:0}
.mapChoice:hover,.mapChoice:focus-visible{color:#e7f5f7;background:#10212d;outline:none}
.mapChoice[aria-pressed="true"]{color:#fff;background:linear-gradient(90deg,rgba(101,236,243,.18),rgba(101,236,243,.03))}
.mapChoice[aria-pressed="true"]::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--map-accent,var(--cyan));
  box-shadow:0 0 14px var(--map-accent,var(--cyan));
}
.mapThumb{
  position:relative;
  display:block;
  height:59px;
  overflow:hidden;
  background:#101b24;
  border:1px solid #365268;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);
}
.mapThumb img{width:100%;height:100%;object-fit:cover;filter:saturate(.62) contrast(1.15);transition:filter .16s,transform .16s}
.mapChoice:hover .mapThumb img,.mapChoice[aria-pressed="true"] .mapThumb img{filter:saturate(1) contrast(1.08);transform:scale(1.04)}
.mapChoiceCopy{min-width:0}
.mapChoiceCopy b{
  display:block;
  overflow:hidden;
  color:currentColor;
  font:900 12px/1 var(--display);
  letter-spacing:.75px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mapChoiceCopy small{
  display:block;
  overflow:hidden;
  margin-top:7px;
  color:#667e8f;
  font:800 7px/1 var(--display);
  letter-spacing:.8px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mapChoiceIndex{
  color:rgba(182,224,230,.24);
  font:900 18px/1 var(--display);
  -webkit-text-stroke:1px #587184;
}
.mapChoice[aria-pressed="true"] .mapChoiceIndex{color:var(--map-accent,var(--cyan));-webkit-text-stroke:0}
.mapTelemetry{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:11px;
  border:1px solid #29465a;
  background:#08111a;
}
.mapTelemetry div{padding:15px 17px;border-right:1px solid #29465a}
.mapTelemetry div:last-child{border-right:0}
.mapTelemetry small{display:block;color:#658091;font:800 7px/1 var(--display);letter-spacing:1.1px}
.mapTelemetry b{display:block;margin-top:6px;color:#d9f4f7;font:900 13px/1 var(--display);letter-spacing:.6px}
.mapSectionAction{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:28px}
.mapSectionAction p{max-width:700px;margin:0;color:#7f94a3;font-size:12px}
.webglNote{color:#647f91;font:800 8px/1 var(--display);letter-spacing:1px}
@media(max-width:1050px){
  .mapExperience{grid-template-columns:1fr;min-height:0}
  .mapViewport{min-height:620px;border-right:0;border-bottom:1px solid #29465a}
  .mapChoices{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,118px)}
  .mapChoice{grid-template-columns:74px 1fr;padding:10px}
  .mapChoiceIndex{display:none}
  .mapTelemetry{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:700px){
  .mapViewport{min-height:570px}
  .mapViewerTop{top:25px;left:24px;right:24px}
  .mapCoord{display:none}
  .mapViewerBottom{left:24px;right:24px;bottom:24px;display:block}
  .mapIdentity h3{font-size:43px}
  .mapIdentity p{font-size:12px}
  .mapViewerControls{justify-items:start;margin-top:18px}
  .mapHelp{display:none}
  .mapChoices{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,104px)}
  .mapChoice{grid-template-columns:58px minmax(0,1fr);gap:9px;padding:8px}
  .mapThumb{height:50px}
  .mapChoiceCopy b{font-size:10px}
  .mapTelemetry{grid-template-columns:1fr 1fr}
  .mapTelemetry div:nth-child(2){border-right:0}
  .mapTelemetry div:nth-child(-n+2){border-bottom:1px solid #29465a}
  .mapSectionAction{align-items:stretch;flex-direction:column}
  .mapSectionAction .button{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .mapLiveStatus i,.mapLoading::before{animation:none}
}