/* Fixed vertical gradient stripe on the right */
      .gradient-stripe {
        display: none;
          position: fixed;
          right: var(--spacer); /* Distance from the right edge */
          top: 0;
          width: 2px; /* Width of the stripe */
          height: 80vh;
          /* Static gradient using the provided colors, ordered for a smooth transition */
          background: linear-gradient(to bottom,
              #144391, /* Brightest blue */
              #123c82, /* Mid blue */
              #103472, /* Darkest blue */
              #c3534e, /* Darkest red */
              #cc5652, /* Mid red */
              #da5c57  /* Brightest red */
          );
          z-index: 5; /* Ensure stripe is above main background but below time label if needed */
      }

      /* Time label on the left, dynamically positioned */
      .time-label {
        display: none;
          position: absolute;
          right: 35px;
          transform: translateY(-50%);
          font-size: var(--text-xs);
          font-weight: bold;
          color: white;
          /* text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7); */
          z-index: 10;
          transition: top 60s linear;
      }

      .time-label::after {
          content: '\2192';
          display: block;
      }

      @media (min-width: 1200px) {
          .gradient-stripe {
              display: block;
          }
          .time-label {
              display: flex; 
              gap: calc(var(--spacer)/10);
          }
      }