html,
      body {
        margin: 0;
        width: 100%;
        height: 100%;
        background: #000;
      }

      body {
        display: grid;
        place-items: center;
        overflow: hidden;
        user-select: none;
        -webkit-touch-callout: none;
      }

      .player-wrap {
        --bottom-drag: 0px;
        --tap-x: 50%;
        --tap-y: 50%;
        --top-drag: 0px;
        position: relative;
        isolation: isolate;
        width: min(80vw, 960px, 98vh);
        aspect-ratio: 16 / 9;
      }

      .player-wrap::after {
        position: absolute;
        inset: 0;
        z-index: 3;
        background: radial-gradient(
          circle at var(--tap-x) var(--tap-y),
          rgba(255, 255, 255, 0.24) 0,
          rgba(255, 255, 255, 0.08) 15%,
          transparent 42%
        );
        content: "";
        opacity: 0;
        pointer-events: none;
      }

      .player-wrap.is-tapped::after {
        animation: film-tap 360ms ease-out;
      }

      .photo {
        position: absolute;
        left: 50%;
        display: block;
        height: auto;
        cursor: grab;
        pointer-events: auto;
        touch-action: none;
        user-select: none;
        transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
        transform: translateX(-50%);
        -webkit-user-drag: none;
        will-change: transform;
      }

      .player-wrap.is-dragging .photo {
        cursor: grabbing;
        transition: none;
      }

.photo-top {
  z-index: 1;
  top: var(--top-rest, -48%);
  width: min(90%, 864px);
  transform: translateX(-50%) translateY(var(--top-drag)) rotate(180deg);
}

      .photo-bottom {
        z-index: 1;
        bottom: -42%;
        width: min(82%, 787px);
        transform: translateX(-50%) translateY(var(--bottom-drag));
      }

      .pull-hint {
        position: fixed;
        left: 50%;
        z-index: 4;
        width: 14px;
        height: 14px;
        opacity: 0.45;
        touch-action: none;
        user-select: none;
      }

      .pull-hint::before {
        position: absolute;
        inset: 2px;
        border: solid rgba(255, 255, 255, 0.8);
        border-width: 0 1.5px 1.5px 0;
        content: "";
      }

      .pull-hint::after {
        position: absolute;
        inset: -15px;
        content: "";
      }

      .pull-hint-top {
        top: 6px;
        animation: hint-top 1.7s ease-in-out infinite;
      }

      .pull-hint-top::before {
        transform: rotate(-135deg);
      }

      .pull-hint-bottom {
        bottom: 26px;
        animation: hint-bottom 1.7s ease-in-out infinite;
      }

      button.pull-hint {
        padding: 0;
        border: 0;
        appearance: none;
        background: transparent;
        cursor: pointer;
        pointer-events: auto;
        -webkit-tap-highlight-color: transparent;
      }

      .pull-hint-top.is-held {
        animation: hint-top-held 240ms ease-out forwards;
      }

      .pull-hint-bottom.is-held {
        animation: hint-bottom-held 240ms ease-out forwards;
      }

      .pull-hint-bottom::before {
        transform: rotate(45deg);
      }

      .media-slider {
        --media-slider-y: 0px;
        position: absolute;
        top: calc(100% + clamp(44px, 7vh, 64px));
        left: 50%;
        z-index: 5;
        display: flex;
        width: 34px;
        height: 88px;
        padding: 8px 10px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        align-items: center;
        appearance: none;
        background: rgba(0, 0, 0, 0.52);
        border-radius: 999px;
        box-shadow: 0 0 16px rgba(0, 0, 0, 0.62);
        color: rgba(255, 255, 255, 0.92);
        cursor: ns-resize;
        flex-direction: column;
        justify-content: space-between;
        opacity: 0.78;
        touch-action: none;
        transform: translate(-50%, var(--media-slider-y));
        transition:
          opacity 180ms ease,
          transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
        user-select: none;
        -webkit-tap-highlight-color: transparent;
      }

      .media-slider::after {
        position: absolute;
        inset: -10px -8px;
        content: "";
      }

      .media-slider:hover,
      .media-slider:focus-visible,
      .media-slider.is-active {
        opacity: 0.92;
      }

      .media-slider:focus-visible {
        outline: 1px solid rgba(255, 255, 255, 0.65);
        outline-offset: 2px;
      }

      .media-slider.is-active {
        transition: none;
      }

      .media-slider-chevron {
        width: 8px;
        height: 8px;
        border: solid currentColor;
        border-width: 0 1.5px 1.5px 0;
        flex: 0 0 auto;
        pointer-events: none;
      }

      .media-slider-chevron-up {
        transform: rotate(-135deg);
      }

      .media-slider-chevron-down {
        transform: rotate(45deg);
      }

      .media-slider-grip {
        width: 13px;
        height: 31px;
        background: repeating-linear-gradient(
          to bottom,
          currentColor 0 1px,
          transparent 1px 6px
        );
        pointer-events: none;
      }

      @keyframes hint-top {
        0%, 100% {
          opacity: 0.22;
          transform: translate(-50%, 4px);
        }
        50% {
          opacity: 0.62;
          transform: translate(-50%, -2px);
        }
      }

      @keyframes hint-bottom {
        0%, 100% {
          opacity: 0.22;
          transform: translate(-50%, -4px);
        }
        50% {
          opacity: 0.62;
          transform: translate(-50%, 2px);
        }
      }

      @keyframes hint-top-held {
        to {
          opacity: 0.9;
          transform: translate(-50%, -8px);
        }
      }

      @keyframes hint-bottom-held {
        to {
          opacity: 0.9;
          transform: translate(-50%, 8px);
        }
      }

      @keyframes film-tap {
        0% {
          opacity: 0.9;
        }
        100% {
          opacity: 0;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .pull-hint {
          animation: none;
          opacity: 0.45;
          transform: translateX(-50%);
        }

        .photo {
          transition-duration: 0.01ms;
        }

        .media-slider {
          transition-duration: 0.01ms;
        }

        .player-wrap.is-tapped::after {
          animation-duration: 0.01ms;
        }
      }

      @media print {
        html {
          display: none !important;
        }
      }

      #movie {
        display: none;
      }

      canvas {
        position: relative;
        z-index: 2;
        width: 100%;
        height: 100%;
        background: #000;
        cursor: grab;
        display: block;
        touch-action: none;
        -webkit-tap-highlight-color: transparent;
      }

      .player-wrap.is-dragging canvas {
        cursor: grabbing;
      }