body {
    font: 100%/1.5 system-ui, sans-serif;
    display: flex;
    flex-flow: column;
    max-width: 80em;
    min-height: 100vh;
    box-sizing: border-box;
    margin: auto;
    padding: 1em;
  }
  
  header {
    display: flex;
    gap: 1em;
    align-items: baseline;
    width: 100%;
  }
  
  header label {
    margin-left: auto;
  }
  
  #selected-time,
  #any-time {
    display: block;
    text-align: right;
    font-size: 0.8em;
  }
  
  #any-time {
    color: gray;
    font-style: italic;
  }
  
  #time-slider {
    width: 200px;
  }
  
  #map {
    width: 100%;
    height: 80vh;
    box-shadow: 0 4px 8px rgb(0 0 0 / 0.1);
    border-radius: 8px;
    position: relative;
  }
  
  #map svg {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  
  circle {
    --color-departures: steelblue;
    --color-arrivals: darkorange;
    --color: color-mix(
      in oklch,
      var(--color-departures) calc(100% * var(--departure-ratio)),
      var(--color-arrivals)
    );
  
    fill: var(--color);
  }
  
  .legend {
    display: flex;
    margin-block: 1em;
    width: 100%;
  }
  
  .legend div {
    flex: 1;
    padding: 0.5em 1em;
    text-align: center;
    color: white;
    font-weight: bold;
  
    --color-departures: steelblue;
    --color-arrivals: darkorange;
    --color: color-mix(
      in oklch,
      var(--color-departures) calc(100% * var(--departure-ratio)),
      var(--color-arrivals)
    );
  
    background: var(--color);
  }