.exchange-cinematic{width:min(720px,calc(100% - 24px));max-width:720px;padding:18px;background:#191e2b;border:2px solid #839665;color:#eef3df;overflow:hidden}.exchange-cinematic::backdrop{background:#080d19cc}.exchange-scene-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.exchange-scene-heading small{color:#c8ed81;font-size:11px;letter-spacing:2px}.exchange-scene-heading h2{margin:4px 0;font-size:28px}.exchange-skip{font-size:12px;padding:8px}.exchange-street{height:260px;position:relative;overflow:hidden;margin-top:12px;background:linear-gradient(#182139,#51344a 68%,#222837 69%)}.exchange-city{position:absolute;inset:0 0 30%;opacity:.6;background:repeating-linear-gradient(90deg,transparent 0 22px,#22283b 22px 49px,transparent 49px 60px);clip-path:polygon(0 40%,15% 40%,15% 18%,28% 18%,28% 35%,40% 35%,40% 0,54% 0,54% 42%,73% 42%,73% 20%,90% 20%,90% 44%,100% 44%,100% 100%,0 100%)}.exchange-road{position:absolute;bottom:14px;left:0;right:0;height:2px;background:repeating-linear-gradient(90deg,#97917d 0 30px,transparent 30px 55px)}.stepa-car{position:absolute;bottom:25px;left:5%;width:78%;transform:translateX(-130%)}.stepa-car svg{width:100%;display:block}.stepa-door{opacity:0;transform-origin:243px 88px}.stepa-person{position:absolute;left:48%;bottom:24px;height:145px;opacity:0;transform:translateX(-25px) scale(.8);transform-origin:bottom}.stepa-person svg{height:100%}.stepa-cash{position:absolute;left:59%;bottom:83px;width:44px;opacity:0}.stepa-received{position:absolute;right:12px;top:12px;background:#263b29;color:#daf99e;border:1px solid #8da966;padding:8px;opacity:0}.exchange-result{margin:14px 0 0;color:#c8ed81;font-size:18px;text-align:center}.playing .stepa-car{animation:stepa-drive 7.4s ease-in-out both}.playing .stepa-door{animation:stepa-door 7.4s both}.playing .stepa-person{animation:stepa-walk 7.4s both}.playing .stepa-cash{animation:stepa-pay 7.4s both}.playing .stepa-received{animation:stepa-received 7.4s both}@keyframes stepa-drive{0%{transform:translateX(-130%)}23%,77%{transform:translateX(0)}100%{transform:translateX(145%)}}@keyframes stepa-door{0%,22%,42%,65%,80%,100%{opacity:0;transform:skewY(0)}25%,38%,69%,76%{opacity:1;transform:skewY(-12deg)}}@keyframes stepa-walk{0%,26%,79%,100%{opacity:0;transform:translateX(-25px) scale(.8)}30%{opacity:1;transform:translateX(-25px) scale(.8)}44%,64%{opacity:1;transform:translateX(35px) scale(1)}75%{opacity:1;transform:translateX(-25px) scale(.8)}}@keyframes stepa-pay{0%,43%{opacity:0;transform:translate(0,0) scale(1)}47%,52%{opacity:1;transform:translate(18px,0) scale(1)}63%{opacity:1;transform:translate(65px,-65px) scale(1.7)}68%,100%{opacity:0;transform:translate(65px,-65px) scale(1.7)}}@keyframes stepa-received{0%,59%{opacity:0}65%,100%{opacity:1}}@media(max-width:540px){.exchange-street{height:200px}.stepa-person{height:110px}.stepa-cash{bottom:68px;width:34px}.exchange-scene-heading h2{font-size:22px}.exchange-result{font-size:16px}.exchange-cinematic{padding:12px}.stepa-received{font-size:11px}}@media(prefers-reduced-motion:reduce){.playing .stepa-car{animation:none;transform:none}.playing .stepa-person{animation:none;opacity:1;transform:translateX(35px)}.playing .stepa-cash{animation:none;opacity:1}.playing .stepa-received{animation:none;opacity:1}.playing .stepa-door{animation:none}}

.exchange-cinematic{width:min(820px,calc(100% - 24px));max-width:820px}.exchange-street{height:auto;aspect-ratio:3/2;background:#252535 url('/assets/exchange-courtyard.png') center/cover no-repeat;image-rendering:pixelated}.exchange-city,.exchange-road{display:none}.stepa-car{width:86%;left:2%;bottom:2%;filter:drop-shadow(0 5px 2px #090e1970)}.stepa-car img{width:100%;height:auto;display:block;image-rendering:pixelated}.stepa-person{height:52%;left:46%;bottom:3%;filter:drop-shadow(2px 5px 2px #090e19a0)}.stepa-person img{height:100%;width:auto;display:block;image-rendering:pixelated}.stepa-cash{left:53%;bottom:31%;width:35px}.playing .stepa-person img{animation:stepa-stride 7.4s linear both}.stepa-received{font-size:14px;background:#263b29eb}@keyframes stepa-stride{0%,30%,44%,64%,78%,100%{transform:translateY(0)}33%,39%,68%,74%{transform:translateY(-3px)}36%,42%,71%,77%{transform:translateY(0)}}@media(max-width:540px){.exchange-street{height:auto;aspect-ratio:3/2}.stepa-person{height:52%}.stepa-cash{bottom:31%;width:25px}.stepa-received{font-size:11px}}@media(prefers-reduced-motion:reduce){.playing .stepa-person img{animation:none}}