.product-theater{--stage-w:var(--stage-w-compact);--stage-h:var(--stage-h-compact);--stage-ratio:var(--stage-ratio-compact);max-width:var(--stage-w);margin-inline:auto}@media (min-width:640px){.product-theater{--stage-w:var(--stage-w-medium);--stage-h:var(--stage-h-medium);--stage-ratio:var(--stage-ratio-medium)}}@media (min-width:1024px){.product-theater{max-width:none;--stage-w:var(--stage-w-wide);--stage-h:var(--stage-h-wide);--stage-ratio:var(--stage-ratio-wide)}}.product-theater-viewport{aspect-ratio:var(--stage-ratio);container-type:inline-size;content-visibility:auto}.product-theater-camera{width:var(--stage-w);height:var(--stage-h);transform:scale(tan(atan2(100cqw,var(--stage-w))));transform-origin:0 0;will-change:transform}.product-theater-pointer{width:24px;height:24px;margin:-2px 0 0 -3px;background:no-repeat 50%/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2.5v17.2l4.6-4.2 2.9 6.6 3-1.3-2.9-6.5h6.1z' fill='%23111' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");filter:drop-shadow(0 2px 3px rgb(0 0 0/.25));transition:opacity .2s ease;will-change:transform}.product-theater-pointer,.product-theater-ripple{position:absolute;top:0;left:0;opacity:0;pointer-events:none}.product-theater-ripple{width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:9999px;background:color-mix(in oklab,var(--primary) 32%,transparent);box-shadow:0 0 0 1px color-mix(in oklab,var(--primary) 45%,transparent)}.product-theater-pointer[data-visible=true]{opacity:1}.product-theater:is([data-playback=still],[data-playback=complete],[data-playback=ready]) :is(.product-theater-pointer,.product-theater-ripple){display:none}.product-theater-ripple[data-visible=false]{opacity:0!important}@media (max-width:639px){.product-theater-pointer{width:30px;height:30px;margin:-15px 0 0 -15px;border:2px solid rgb(255 255 255/.9);border-radius:9999px;background:rgb(17 17 17/.28)}}.product-theater-caption{transition:opacity .3s ease}.product-theater-caption[data-visible=false]{opacity:0}@media (prefers-reduced-motion:reduce){.product-theater-camera{animation:none}.product-theater-caption{transition:none}}