* {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }

       body {
           font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
           background: #1a1a1a;
           color: #e0e0e0;
           overflow: hidden;
       }

       #map {
           position: absolute;
           top: 0;
           bottom: 0;
           width: 100%;
       }

       .date-slider-container {
           position: absolute;
           bottom: 20px;
           left: 50%;
           transform: translateX(-50%);
           background: rgba(26, 26, 26, 0.95);
           border-radius: 12px;
           padding: 15px 20px;
           box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
           width: calc(100% - 40px);
           width: 500px;
           max-width: 80vw;
           backdrop-filter: blur(10px);
           z-index: 1000;
       }

       .date-display {
           text-align: center;
           font-size: 16px;
           margin-bottom: 10px;
           color: #fff;
       }

       .date-display-date {
           font-weight: 500;
       }

       .slider-wrapper {
           position: relative;
       }

       #dateSlider {
           width: 100%;
           height: 6px;
           -webkit-appearance: none;
           appearance: none;
           background: #333;
           outline: none;
           border-radius: 3px;
           cursor: pointer;
       }

       #dateSlider::-webkit-slider-thumb {
           -webkit-appearance: none;
           appearance: none;
           width: 20px;
           height: 20px;
           background: #0078d4;
           cursor: pointer;
           border-radius: 50%;
           box-shadow: 0 2px 8px rgba(0, 120, 212, 0.4);
       }

       #dateSlider::-moz-range-thumb {
           width: 20px;
           height: 20px;
           background: #0078d4;
           cursor: pointer;
           border-radius: 50%;
           border: none;
           box-shadow: 0 2px 8px rgba(0, 120, 212, 0.4);
       }

       .social-links {
           position: absolute;
           top: 20px;
           right: 20px;
           display: flex;
           gap: 10px;
           z-index: 1000;
       }

       .social-link {
           background: rgba(26, 26, 26, 0.9);
           padding: 10px 15px;
           border-radius: 8px;
           text-decoration: none;
           color: #e0e0e0;
           font-size: 14px;
           transition: all 0.3s ease;
           backdrop-filter: blur(10px);
           display: flex;
           align-items: center;
           gap: 5px;
       }

       .social-link:hover {
           background: rgba(40, 40, 40, 0.95);
           transform: translateY(-2px);
           box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
       }

       .error-message {
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           background: rgba(26, 26, 26, 0.95);
           padding: 30px;
           border-radius: 12px;
           text-align: center;
           max-width: 400px;
           display: none;
           z-index: 2000;
       }

       .error-message h2 {
           color: #ff6b6b;
           margin-bottom: 10px;
       }

       .loading {
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           font-size: 18px;
           z-index: 2000;
       }

       .maplibregl-popup-content {
           background: rgba(26, 26, 26, 0.98);
           color: #e0e0e0;
           padding: 15px;
           border-radius: 8px;
           box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
       }

       .maplibregl-popup-content h3 {
           margin: 0 0 10px 0;
           color: #fff;
           font-size: 16px;
       }

       .maplibregl-popup-content p {
           margin: 0;
           font-size: 14px;
           line-height: 1.5;
       }

       .maplibregl-popup-close-button {
           color: #999;
           font-size: 20px;
           padding: 5px;
       }

       .maplibregl-popup-close-button:hover {
           color: #fff;
           background: transparent;
       }

       .maplibregl-popup-anchor-top .maplibregl-popup-tip {
           border-bottom-color: rgba(26, 26, 26, 0.98);
       }

       /* Popup Tips - All Orientations */
       .maplibregl-popup-anchor-top .maplibregl-popup-tip {
           border-bottom-color: rgba(26, 26, 26, 0.98);
       }

       .maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
           border-top-color: rgba(26, 26, 26, 0.98);
       }

       .maplibregl-popup-anchor-left .maplibregl-popup-tip {
           border-right-color: rgba(26, 26, 26, 0.98);
       }

       .maplibregl-popup-anchor-right .maplibregl-popup-tip {
           border-left-color: rgba(26, 26, 26, 0.98);
       }

       .maplibregl-popup-anchor-top-left .maplibregl-popup-tip {
           border-bottom-color: rgba(26, 26, 26, 0.98);
       }

       .maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
           border-bottom-color: rgba(26, 26, 26, 0.98);
       }

       .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip {
           border-top-color: rgba(26, 26, 26, 0.98);
       }

       .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
           border-top-color: rgba(26, 26, 26, 0.98);
       }


       .marker:hover {
           transform: scale(1.1);
       }

       .marker:hover>div {
           box-shadow: 0 4px 15px rgba(0, 120, 212, 0.7);
       }

       @keyframes spin {
           from {
               transform: rotate(0deg);
           }

           to {
               transform: rotate(360deg);
           }
       }

       @media (max-width: 600px) {
           .social-links {
               top: 10px;
               right: 10px;
           }

           .social-link {
               padding: 8px 12px;
               font-size: 12px;
           }

           .date-slider-container {
               bottom: 10px;
               width: calc(100% - 20px);
           }
       }



       /* Native Dialog Styling */
       dialog {
           background: rgba(26, 26, 26, 0.98);
           border: 1px solid rgba(255, 255, 255, 0.1);
           border-radius: 16px;
           box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
           max-width: 600px;
           width: calc(100% - 40px);
           max-height: calc(100vh - 40px);
           overflow: hidden;
           backdrop-filter: blur(20px);
           color: #e0e0e0;
           padding: 0;
           margin: 0;
           position: fixed;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
       }

       dialog::backdrop {
           background: rgba(0, 0, 0, 0.7);
           backdrop-filter: blur(5px);
       }

       /* Dialog animations */
       dialog {
           opacity: 0;
           transform: translate(-50%, -50%) scale(0.9);
           transition: all 0.3s ease allow-discrete;
       }

       dialog[open] {
           opacity: 1;
           transform: translate(-50%, -50%) scale(1);
       }

       /* Starting state for transitions */
       @starting-style {
           dialog[open] {
               opacity: 0;
               transform: translate(-50%, -50%) scale(0.9);
           }
       }

       /* Modal Header */
       .modal-header {
           padding: 24px 24px 16px 24px;
           border-bottom: 1px solid rgba(255, 255, 255, 0.1);
           position: relative;
       }

       .modal-title {
           font-size: 28px;
           font-weight: 600;
           color: #fff;
           margin-bottom: 4px;
           background: linear-gradient(135deg, #0078d4, #00bcf2);
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
           background-clip: text;
       }

       .modal-version {
           font-size: 14px;
           color: #888;
           font-weight: 400;
       }

       .modal-close {
           position: absolute;
           top: 20px;
           right: 20px;
           background: none;
           border: none;
           color: #888;
           cursor: pointer;
           font-size: 24px;
           padding: 8px;
           border-radius: 8px;
           transition: all 0.2s ease;
           line-height: 1;
       }

       .modal-close:hover {
           color: #fff;
           background: rgba(255, 255, 255, 0.1);
           transform: scale(1.1);
       }

       /* Modal Body */
       .modal-body {
           padding: 20px 24px;
           max-height: calc(100vh - 200px);
           overflow-y: auto;
       }

       .version-history {
           background: rgba(40, 40, 40, 0.6);
           border-radius: 12px;
           padding: 16px;
           margin-bottom: 20px;
           border: 1px solid rgba(255, 255, 255, 0.05);
       }

       .version-history h3 {
           color: #fff;
           font-size: 16px;
           margin-bottom: 12px;
           font-weight: 500;
       }

       .version-list {
           max-height: 150px;
           overflow-y: auto;
           padding-right: 8px;
       }

       .version-list::-webkit-scrollbar {
           width: 6px;
       }

       .version-list::-webkit-scrollbar-track {
           background: rgba(255, 255, 255, 0.05);
           border-radius: 3px;
       }

       .version-list::-webkit-scrollbar-thumb {
           background: rgba(255, 255, 255, 0.2);
           border-radius: 3px;
       }

       .version-list::-webkit-scrollbar-thumb:hover {
           background: rgba(255, 255, 255, 0.3);
       }

       .version-item {
           margin-bottom: 12px;
           padding-bottom: 12px;
           border-bottom: 1px solid rgba(255, 255, 255, 0.05);
       }

       .version-item:last-child {
           margin-bottom: 0;
           padding-bottom: 0;
           border-bottom: none;
       }

       .version-number {
           font-weight: 600;
           color: #0078d4;
           font-size: 14px;
       }

       .version-date {
           font-size: 12px;
           color: #888;
           margin-left: 8px;
       }

       .version-description {
           font-size: 13px;
           color: #ccc;
           margin-top: 4px;
           line-height: 1.4;
       }

       /* Creator Section */
       .creator-section {
           text-align: center;
           padding-top: 16px;
           border-top: 1px solid rgba(255, 255, 255, 0.1);
       }

       .creator-info {
           margin-bottom: 16px;
       }

       .creator-name {
           color: #fff;
           font-size: 16px;
           font-weight: 500;
           margin-bottom: 4px;
       }

       .creator-subtitle {
           color: #888;
           font-size: 14px;
       }

       .linkedin-link {
           display: inline-flex;
           align-items: center;
           gap: 8px;
           background: #0077b5;
           color: white;
           text-decoration: none;
           padding: 12px 20px;
           border-radius: 8px;
           font-size: 14px;
           font-weight: 500;
           transition: all 0.2s ease;
           margin-bottom: 16px;
       }

       .linkedin-link:hover {
           background: #005885;
           transform: translateY(-2px);
           box-shadow: 0 4px 12px rgba(0, 119, 181, 0.3);
       }

       .contact-note {
           font-size: 12px;
           color: #888;
           line-height: 1.4;
       }

       /* About Description */
       .about-description {
           margin-bottom: 24px;
           line-height: 1.6;
       }

       .about-description p {
           margin-bottom: 12px;
           color: #ccc;
           font-size: 13px;
       }

       .about-description p:last-child {
           margin-bottom: 0;
       }

       .about-description a {
           color: #0078d4;
           text-decoration: none;
           border-bottom: 1px solid transparent;
           transition: all 0.2s ease;
       }

       .about-description a:hover {
           color: #00bcf2;
           border-bottom-color: #00bcf2;
       }

       /* Data Attribution */
       .data-attribution {
           background: rgba(40, 40, 40, 0.4);
           border-radius: 12px;
           padding: 16px;
           margin-bottom: 20px;
           border: 1px solid rgba(255, 255, 255, 0.05);
       }

       .data-attribution h3 {
           color: #fff;
           font-size: 16px;
           margin-bottom: 12px;
           font-weight: 500;
       }

       .data-attribution p {
           margin-bottom: 8px;
           color: #ccc;
           font-size: 14px;
           line-height: 1.5;
       }

       .data-attribution p:last-child {
           margin-bottom: 0;
       }

       .data-attribution a {
           color: #0078d4;
           text-decoration: none;
           border-bottom: 1px solid transparent;
           transition: all 0.2s ease;
       }

       .data-attribution a:hover {
           color: #00bcf2;
           border-bottom-color: #00bcf2;
       }

       .attribution-note {
           font-size: 12px !important;
           color: #888 !important;
           font-style: italic;
           padding-top: 8px;
           border-top: 1px solid rgba(255, 255, 255, 0.05);
           margin-top: 8px !important;
       }

       /* Mobile Responsive */
       @media (max-width: 600px) {
           dialog {
               width: calc(100% - 20px);
               max-height: calc(100vh - 20px);
               border-radius: 12px;
           }

           .modal-header {
               padding: 20px 20px 16px 20px;
           }

           .modal-title {
               font-size: 24px;
           }

           .modal-body {
               padding: 16px 20px;
               max-height: calc(100vh - 160px);
           }

           .version-list {
               max-height: 120px;
           }
       }