*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
  height:100%;
  overflow-x:hidden;
}

body{
  font-family:Arial, Helvetica, sans-serif;
  background:transparent;
  color:#111;
}

.tl-map-wrap{
  position:relative;
  width:100%;
  max-width:none;
  margin:0;
  border-radius:0;
  overflow:hidden;
}

.tl-map-svg{
  width:100%;
  height:auto;
  display:block;
}

.map-bg{
  filter:brightness(1.08) saturate(1.06) contrast(1);
}

.blue-wash{
  fill:#bfe3ff;
  mix-blend-mode:screen;
  opacity:.28;
  pointer-events:none;
}

.connection-line{
  pointer-events:none;
  vector-effect:non-scaling-stroke;
  stroke:#f58220;
  stroke-width:1.4;
  opacity:.55;
  stroke-linecap:round;
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
  animation:drawLine 1.5s ease forwards;
}

@keyframes drawLine{
  to{
    stroke-dashoffset:0;
  }
}

.city-link{
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

/* Clicks focus the <a> and draw a huge bbox ring around dot+label; hide that for pointer use */
.city-link:focus:not(:focus-visible){
  outline:none;
}

.city-link:focus-visible{
  outline:2px solid rgba(245,130,32,.95);
  outline-offset:2px;
}

.city-dot{
  fill:#f58220;
  transform-box:fill-box;
  transform-origin:center;
  transition:transform .25s ease, filter .25s ease, opacity .25s ease;
  filter:drop-shadow(0 0 5px rgba(245,130,32,.4));
  animation:blinkPulse 2.5s infinite ease-in-out;
}

.city-link:hover .city-dot{
  transform:scale(1.35);
  filter:drop-shadow(0 0 8px rgba(245,130,32,.65));
}

@keyframes blinkPulse{
  0%{
    transform:scale(1);
    opacity:.96;
  }
  50%{
    transform:scale(1.18);
    opacity:.76;
  }
  100%{
    transform:scale(1);
    opacity:.96;
  }
}

.city-name{
  font-size:3.6px;
  font-weight:700;
  fill:#111;
  dominant-baseline:middle;
  paint-order:stroke;
  stroke:rgba(255,255,255,.9);
  stroke-width:.35px;
  transition:transform .25s ease, opacity .25s ease;
  pointer-events:none;
}

.city-link:hover .city-name{
  transform:translateY(-.4px);
  opacity:.88;
}

.city-link.is-london .city-dot{
  fill:#0f62fe;
  filter:drop-shadow(0 0 6px rgba(15,98,254,.45));
}

.city-link.is-london:hover .city-dot{
  filter:drop-shadow(0 0 10px rgba(15,98,254,.55));
}

.map-tooltip{
  position:absolute;
  left:0;
  top:0;
  transform:translate(-50%, calc(-100% - 14px));
  background:rgba(17,17,17,.92);
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  font-size:.9rem;
  line-height:1.2;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease, visibility .2s ease;
  white-space:nowrap;
  box-shadow:0 10px 25px rgba(0,0,0,.18);
  z-index:5;
}

.map-tooltip.show{
  opacity:1;
  visibility:visible;
}

.map-tooltip span{
  display:block;
}

.map-tooltip .tooltip-title{
  font-weight:700;
  margin-bottom:3px;
}

.map-tooltip .tooltip-url{
  font-size:.78rem;
  color:#d5e8ff;
}

@media (max-width:900px){
  .city-name{
    font-size:4.3px;
    stroke-width:.45px;
  }
}

@media (max-width:640px){
  .city-name{
    font-size:5.1px;
    stroke-width:.55px;
  }

  .map-tooltip{
    font-size:.8rem;
    padding:8px 10px;
  }
}