body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
            color: #000;
            transition: background-color 0.5s, color 0.5s;
        }
        input, button {
            padding: 10px;
            margin: 5px 0;
            width: 100%;
            font-size: 1rem;
            border: none;
            border-radius: 5px;
        }
        input {
            background-color: #fff;
            color: #000;
            transition: background-color 0.5s, color 0.5s;
        }
        button {
            background-color: #28a745;
            color: white;
            cursor: pointer;
            transition: background-color 0.5s;
        }
        button:hover {
            background-color: #218838;
        }
        #toggleMode {
            background-color: #007bff;
            margin-top: 10px;
        }
        #toggleMode:hover {
            background-color: #0056b3;
        }
        #results {
            margin-top: 20px;
        }
        .path {
            margin-bottom: 15px;
            padding: 10px;
            background-color: white;
            border-left: 5px solid #28a745;
            transition: background-color 0.5s, color 0.5s;
        }
        .sentence {
            margin-left: 20px;
            font-style: italic;
            color: #555;
        }
        .dark-mode {
            background-color: #1c1c1c;
            color: #ddd;
        }
        .dark-mode input {
            background-color: #333;
            color: #ddd;
        }
        .dark-mode button {
            background-color: #0069d9;
        }
        .dark-mode button:hover {
            background-color: #004494;
        }
        .dark-mode .path {
            background-color: #333;
            color: #ddd;
            border-left-color: #17a2b8;
        }
        .dark-mode .sentence {
            color: #bbb;
        }

/* Map-specific styles */

#hex-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Hex outline only, transparent fill */
.hexagon {
/*  fill: rgba(255,255,255,0);
  stroke: #fff;
  stroke-width: 1;
  cursor: pointer;
  transition: stroke 0.2s;
}

/* Overlay polygon for hover effect, hidden by default */
/*.overlay-shape {
/*  fill: rgba(255,255,255,0.8);
/*  display: none;
/*}

/* Label text, hidden by default, kept horizontal */
.hover-text {
  fill: black;
  font-size: 14px;
  font-weight: bold;
  pointer-events: none;
  display: none;
}