/**
 * LIVE SPLICE 2026-08-26 — #prototype RIGHT COLUMN only.
 * Widen frame to fill 7fr/stacked column. LOCK viewport height (HITL: no height grow).
 * Mechanic: overflow hidden; p1→p2→p3 duplicated; translateY(-50%).
 * FORBIDDEN: cover-fit on track images; 1+2 grid; horizontal marquee; pagination dots.
 * Cache: ?v=proto-widen-hlock-20260826
 */

#prototype {
  --proto-frame-pad: 10px;
  --proto-frame-radius: 6px;
  --proto-scroll-duration: 36s;
}

#prototype .prototype-split > .prototype-frame {
  margin: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  justify-self: stretch;
  padding: var(--proto-frame-pad);
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, #fff);
  border-radius: calc(var(--proto-frame-radius) + var(--proto-frame-pad));
  box-shadow: 0 18px 48px rgb(10 10 10 / 0.1);
}

#prototype .prototype-frame:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

#prototype .prototype-screen {
  position: relative;
  width: 100%;
  height: 572px;
  max-height: 572px;
  aspect-ratio: auto !important;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--proto-frame-radius);
  background: #141820;
  line-height: 0;
}

#prototype .prototype-screen__track {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  will-change: transform;
  animation: proto-viewport-scroll var(--proto-scroll-duration) linear infinite;
  animation-play-state: paused;
}

#prototype .prototype-screen__track.is-ready {
  animation-play-state: running;
}

#prototype .prototype-screen__track:not(.is-ready) {
  animation-play-state: paused;
}

#prototype .prototype-screen__track picture,
#prototype .prototype-screen__track img,
#prototype .prototype-screen__track canvas {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  flex: 0 0 auto;
  object-fit: unset;
  object-position: unset;
  position: static;
}

#prototype .prototype-frame:hover .prototype-screen__track,
#prototype .prototype-frame:focus-within .prototype-screen__track {
  animation-play-state: paused;
}

@keyframes proto-viewport-scroll {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-50%);
  }
}

@media (min-width: 1024px) {
  #prototype .prototype-split > .prototype-frame {
    position: sticky;
    top: calc(var(--header-h, 72px) + var(--space-4));
  }
}

@media (max-width: 1439px) {
  #prototype .prototype-screen {
    height: 556px;
    max-height: 556px;
  }
}

@media (max-width: 1023px) {
  #prototype .prototype-split > .prototype-frame {
    width: 100%;
    margin-inline: auto;
  }

  #prototype .prototype-screen {
    height: 508px;
    max-height: 508px;
  }
}

@media (max-width: 767px) {
  #prototype .prototype-split > .prototype-frame {
    width: 100%;
  }

  #prototype .prototype-screen {
    height: 444px;
    max-height: 444px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #prototype .prototype-screen__track {
    animation: none;
    transform: none;
    will-change: auto;
  }

  #prototype .prototype-screen__track picture:nth-child(n + 2),
  #prototype .prototype-screen__track img:nth-child(n + 2),
  #prototype .prototype-screen__track canvas:nth-child(n + 2) {
    display: none;
  }
}