.map-province-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.map-province-label {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 1px 2px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #f7f5ea;
  background: transparent;
  font: 500 11px/1.3 'Noto Sans SC', sans-serif;
  letter-spacing: .5px;
  white-space: nowrap;
  text-shadow: 0 1px 3px #122721, 0 0 6px #122721b3;
  cursor: pointer;
  pointer-events: auto;
  transition: color .18s, background .18s, border-color .18s;
}
.map-province-label.is-callout { background: #14382bcc; border-color: #adc7af30; }
.map-province-label:hover, .map-province-label:focus-visible { color: #fff9e4; background: #264e3be8; border-color: #c7d5b79c; }
.map-province-label:focus-visible { outline: 2px solid #ecd8a8; outline-offset: 3px; }
.map-province-label[aria-pressed="true"] {
  color: #18392b;
  background: #e6d3a1;
  border-color: #f5e6be;
  text-shadow: none;
  box-shadow: 0 2px 8px #071a103d;
}
.map-province-leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map-province-leaders g { color: #b6d1be; opacity: .7; }
.map-province-leaders path { stroke: currentColor; stroke-width: .8; fill: none; }
.map-province-leaders circle { fill: currentColor; }
.map-province-leaders .is-selected { color: #ead49b; opacity: 1; }
@media (max-width: 760px) {
  .map-province-label { padding: 0 1px; font-size: 10px; line-height: 1.2; letter-spacing: .15px; border-radius: 4px; }
  .map-province-leaders path { stroke-width: .65; }
}
