*,
      *::before,
      *::after {
          box-sizing: border-box;
      }

      body {
          font-family: system-ui, sans-serif;
          max-width: 60rem;
          margin: 2rem auto;
          padding: 0 1rem;
          color: #1a1a1a;
      }

      h1 {
          font-size: 1.4rem;
          margin-bottom: 1.5rem;
      }

      form {
          display: flex;
          flex-direction: column;
          gap: 0.75rem;
      }

      button {
          align-self: flex-start;
          padding: 0.4rem 1rem;
          cursor: pointer;
      }

      button:disabled {
          cursor: not-allowed;
          opacity: 0.6;
      }

      textarea {
          width: 100%;
          min-height: 20rem;
          margin-top: 1rem;
          font-family: ui-monospace, monospace;
          font-size: 0.85rem;
          tab-size: 2;
      }

      .error {
          color: #b00;
      }

      #map {
          width: 100%;
          height: 28rem;
          margin-top: 1rem;
          border: 1px solid #ccc;
      }

      #timeline {
          width: 100%;
          height: 20rem;
          margin-top: 1rem;
          border: 1px solid #ccc;
      }

      .marker-popup h3 {
          margin: 0 0 0.3rem;
          font-size: 0.85rem;
      }

      .marker-popup p {
          margin: 0;
          font-size: 0.8rem;
          line-height: 1.35;
      }

      .marker-popup .time {
          color: #555;
          font-style: italic;
          margin-bottom: 0.25rem;
      }