/* Overlay base: independent of video playback and transitions. */
    #progressBar {
      position: fixed;
      left: 0;
      right: 0;
      height: var(--progress-height);
      z-index: 30;
      pointer-events: none;
      overflow: hidden;
      background: rgba(0,0,0,.18);
      visibility: hidden;
    }
    #progressBar.top { top: 0; }
    #progressBar.bottom { bottom: 0; }
    #progressFill {
      width: 100%;
      height: 100%;
      background: var(--progress-color);
      transform: scaleX(0);
      transform-origin: 0 50%;
      will-change: transform;
    }

    #clipInfo {
      position: fixed;
      z-index: 25;
      max-width: min(72vw, 980px);
      padding: 14px 18px 14px 20px;
      color: #fff;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: opacity 260ms ease, transform 260ms ease, visibility 0s linear 260ms;
      text-shadow: 0 2px 8px rgba(0,0,0,.65);
    }
    #clipInfo::before {
      content: "";
      position: absolute;
      left: 0;
      top: 8px;
      bottom: 8px;
      width: 4px;
      border-radius: 4px;
      background: var(--progress-color);
    }
    #clipInfo.with-background {
      background: linear-gradient(90deg, rgba(12,12,16,.84), rgba(12,12,16,.58));
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(0,0,0,.18);
    }
    #clipInfo.visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      transition-delay: 0s;
    }
    #clipInfo.top-left { top: 28px; left: 28px; }
    #clipInfo.top-right { top: 28px; right: 28px; }
    #clipInfo.bottom-left { bottom: 28px; left: 28px; }
    #clipInfo.bottom-right { bottom: 28px; right: 28px; }
    #clipInfo.top-right::before, #clipInfo.bottom-right::before {
      left: auto;
      right: 0;
    }
    #clipInfo.top-right, #clipInfo.bottom-right {
      padding-left: 18px;
      padding-right: 20px;
      text-align: right;
    }
    #clipInfoTitle {
      font-size: var(--clip-info-font-size);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -.015em;
      overflow-wrap: anywhere;
    }
    #clipInfoMeta {
      margin-top: 6px;
      font-size: var(--clip-info-meta-size);
      font-weight: 500;
      line-height: 1.25;
      opacity: .88;
    }