.learning-city {
  position: relative;
  width: 100%;
  aspect-ratio: 520 / 239;
  background: #122d4e;
  isolation: isolate;
}
.learning-city canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.learning-city canvas.city-pointable { cursor: pointer; }
.learning-city .city-pin {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42em;
  width: auto;
  min-width: 38px;
  max-width: 35%;
  min-height: 25px;
  top: 30.1255%;
  left: 27.5%;
  transform: translate(-50%, -100%);
  padding: 3px 8px;
  border: 1px solid #99b6c9;
  border-radius: 0;
  color: #ecf6ff;
  background: #132c46;
  box-shadow: 2px 2px 0 #0a131e;
  font: 700 clamp(10px, .81vw, 13px)/1.25 var(--street-sans, system-ui, sans-serif);
  letter-spacing: .02em;
  cursor: pointer;
}
.learning-city .city-pin:nth-of-type(2) { left: 63.46%; top: 21.7573%; }
.learning-city .city-pin:nth-of-type(3) { left: 56.3462%; top: 53.9749%; }
.city-pin b {font-family: var(--street-mono, ui-monospace, monospace);}
.city-pin span {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.city-pin::before {
  content: "";
  height: 7px;
  width: 1px;
  position: absolute;
  left: 50%;
  top: 100%;
  background: currentColor;
}
.learning-city .city-pin:hover { background: #21496c; }
.learning-city .city-pin.is-done { border-color: #bddb83; color: #daffa7; }
.city-pin.is-done b::before {content: "✓"; margin-right: 2px;}
.learning-city .city-pin[aria-pressed="true"] {
  background: #d1fd71;
  border-color: #e2ffa0;
  color: #172910;
  box-shadow: 2px 2px 0 #142130, 0 0 14px #c6fd6c44;
}
.learning-city .city-pin[aria-pressed="true"]::before { background: #d1fd71; }
.learning-city .city-pin:focus-visible { outline: 3px solid #fff; outline-offset: 3px; z-index: 1; }
@media (max-width: 600px) {
  .learning-city .city-pin { min-height: 26px; padding-inline: 5px; }
}