body {
      margin: 0;
      padding: 0;
      font-family: 'Noto Serif',Crimson Pro,serif;
      line-height: 1.6;
      color: #333;
    }

    .map-content-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    h1 {
      font-size: 2em;
      margin-bottom: 20px;
      color: #222;
    }

    p {
      margin-bottom: 20px;
      font-size: 1.1em;
    }

    .map-embed-container {
       position: relative;
       width: 100%;
       height: 600px;
       margin: 40px 0;
       border: 1px solid #ddd;
       border-radius: 8px;
       overflow: hidden;
       box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

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

    .info-box {
      position: absolute;
      top: 20px;
      left: 20px;
      background: rgba(255, 255, 255, 0.9);
      padding: 10px 15px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      z-index: 1;
      max-width: 300px;
    }

    .info-box h2 {
      margin: 0 0 5px 0;
      font-size: 1.0em;
      color: #333;
    }

    .info-box p {
      margin: 0;
      font-size: 1em;
      color: #555;
    }

    .legend-box {
      position: absolute;
      bottom: 10px;
      left: 20px;
      background: rgba(255, 255, 255, 0.9);
      padding: 10px 15px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      font-size: 0.9em;
      color: #333;
      z-index: 1;
    }

    .legend-box .legend-item {
      display: flex;
      align-items: center;
      margin-bottom: 6px;
    }

    .legend-box .dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      margin-right: 8px;
    }

    .legend-box .black-dot {
      background: black;
    }

    .legend-box .pulse-dot {
      background: rgba(255, 0, 0, 0.7);
      animation: pulse-dot 1.25s infinite;
    }

    .legend-box .green-dot {
      background: #4CAF50;
    }

    .pulsating-circle {
      position: relative;
      width: 20px;
      height: 20px;
    }

    .pulsating-circle::before {
      content: '';
      position: absolute;
      width: 300%;
      height: 300%;
      margin-left: -100%;
      margin-top: -100%;
      border-radius: 50%;
      background-color: rgba(255, 0, 0, 0.5);
      animation: pulse-ring 1.25s infinite;
    }

    .pulsating-circle::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: rgba(255, 0, 0, 0.7);
      box-shadow: 0 0 8px rgba(0,0,0,.3);
      animation: pulse-dot 1.25s -.4s infinite;
    }

    @keyframes pulse-ring {
      0% { transform: scale(.33); opacity: 1; }
      80%, 100% { opacity: 0; }
    }

    @keyframes pulse-dot {
      0% { transform: scale(.8); }
      50% { transform: scale(1); }
      100% { transform: scale(.8); }
    }

    .port-label {
      background-color: rgba(0, 0, 0, 0.7);
      color: white;
      font-size: 12px;
      padding: 3px 8px;
      white-space: nowrap;
      border-radius: 4px;
      font-weight: bold;
    }

    .article-section {
      margin-bottom: 40px;
    }

    @media (max-width: 768px) {
      .map-embed-container {
        height: 400px;
      }
      
      .info-box, .legend-box {
        max-width: 200px;
        font-size: 0.8em;
      }
    }