/*! blueLinesReveal() fades these in, but it can only run once the document is
   parsed -- by then the browser has already painted the lines at full
   strength, so the reveal reads as a flash followed by a fade. Hiding them
   here means the first paint is already the state the fade starts from. */
[data-blue-lines] {
  opacity: 0;
}

.lines {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.lines .lines-container {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.lines .lines-container__left, .lines .lines-container__right {
  width: 50rem;
  height: 100%;
}

@media (orientation: portrait) {
  .lines .lines-container {
    gap: 25rem;
  }

  .lines .lines-container__left, .lines .lines-container__right {
    width: 22rem;
  }

  .lines [data-path-follower] {
    --follower-width: 8rem;
    stroke-width: 4px;
  }
}