#map {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#map svg {
  display: block;
  width: 100%;
  height: 100%;
}

.state-shape {
  stroke: #071111;
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
  transition: fill 180ms ease;
}

.state-shape:hover {
  stroke: #fff;
  stroke-width: 2;
}

.map-inset {
  fill: none;
  stroke: #365050;
  stroke-width: 1;
  stroke-dasharray: 5 5;
}

.map-label {
  fill: #8ca5a5;
  font-size: 13px;
  font-weight: bold;
}

[data-theme="light"] .state-shape { stroke: #f3f7f5; }
[data-theme="light"] .state-shape:hover { stroke: #142323; }
[data-theme="light"] .map-inset { stroke: #829b96; }
[data-theme="light"] .map-label { fill: #587070; }