.replay-stage{container-type:inline-size}.replay-screens{--gap:.75rem;--bar:1.25rem;--phone-x:2px;--phone-y:calc(var(--bar) + 2px);--cursor:11px;--touch:12px;--frame:calc(( 100cqw - var(--gap) - var(--phone-x) - 3px + (var(--bar) + 2px) * 16 / 9 + var(--phone-y) * 390 / 760 ) / (16 / 9 + 390 / 760))}@media (width>=40rem){.replay-screens{--gap:1.5rem;--bar:2rem;--cursor:17px;--touch:22px}}.replay-desktop-screen{height:calc(var(--frame) - var(--bar) - 2px);width:calc((var(--frame) - var(--bar) - 2px) * 16 / 9)}.replay-phone-screen{height:calc(var(--frame) - var(--phone-y));width:calc((var(--frame) - var(--phone-y)) * 390 / 760)}.replay-screen .replayer-mouse{width:calc(var(--cursor) / var(--replay-scale,1));height:calc(var(--cursor) / var(--replay-scale,1));filter:drop-shadow(0 1px 1px #0000004d);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 1.5v18.2l4.9-4.4 3.2 7.2 3.4-1.5-3.2-7.1 6.6-.4z' fill='%23111' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E");background-position:0 0}.replay-screen .replayer-mouse:after{width:calc(var(--cursor) * 2.4 / var(--replay-scale,1));height:calc(var(--cursor) * 2.4 / var(--replay-scale,1));background:var(--primary);opacity:0;position:absolute;top:0;left:0}.replay-screen .replayer-mouse.active:after{animation:.5s ease-out replay-click}.replay-screen .replayer-mouse.touch-device{width:calc(var(--touch) / var(--replay-scale,1));height:calc(var(--touch) / var(--replay-scale,1));margin-top:calc(var(--touch) / var(--replay-scale,1) / -2);margin-left:calc(var(--touch) / var(--replay-scale,1) / -2);filter:none;background-color:#0000;background-image:none;border-width:0;transition:left linear,top linear,background-color .2s ease-in-out,box-shadow .2s ease-in-out}.replay-screen .replayer-mouse.touch-device.touch-active{background-color:color-mix(in oklab, var(--primary) 45%, transparent);box-shadow:0 0 0 calc(1.5px / var(--replay-scale,1)) var(--primary);transition:left .25s linear,top .25s linear,background-color .15s ease-in-out,box-shadow .15s ease-in-out}.replay-screen .replayer-mouse.touch-device:after{top:50%;left:50%}@keyframes replay-click{0%{opacity:.55;transform:translate(-50%,-50%)scale(.25)}to{opacity:0;transform:translate(-50%,-50%)scale(1)}}