country-map {
  display: block;
  min-width: 0;
  .toolbar {
    margin-bottom: 0.6rem;
  }
  [data-map] {
    background: white;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    overflow: hidden;
    touch-action: none;
    cursor: grab;
  }
  [data-map] svg {
    width: 100%;
    height: auto;
    display: block;
  }
  [data-map] .water {
    fill: oklch(94% 0.025 220);
    pointer-events: none;
  }
  [data-map] [data-code] {
    cursor: pointer;
  }
  [data-map] [data-code]:hover {
    fill: oklch(75% 0.12 170);
  }
  [data-map] .selected-country {
    fill: oklch(55% 0.12 170);
  }
  [data-map] circle {
    display: block;
    stroke-width: 0.2;
  }
  [data-map] [data-code] {
    fill: #c0c0c0;
  }
  [data-map] [data-code].selected-country {
    fill: oklch(55% 0.12 170);
  }
  [data-map] [data-code]:hover {
    fill: oklch(75% 0.12 170);
  }
  [data-map] .student-markers circle {
    display: block;
    stroke-width: 0.5;
  }
  [data-map] [data-code].speaking-country {
    fill: oklch(77% 0.15 85);
  }
  .toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
  }
  button,
  select {
    font: inherit;
    min-height: 44px;
  }
  button {
    cursor: pointer;
  }
  select {
    display: block;
    max-width: 100%;
  }
  .hint,
  .credit {
    color: var(--muted, #555);
  }
  .credit {
    font-size: .8rem;
  }
}