/* generated: sprite atlas (pixel art, PNG data URIs) */ :root{ --sp-chair:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAUCAYAAAC9BQwsAAAAtUlEQVR42mNkQANWGmX/GbCAYze6GJH5LNgUPXxxAYUvL2HAQDSQFnD7Ly3g9h+XPBMDmYD+GhmxCYqLy6D47eXLJ4wETRIXl/nvobPv/+md//+f3vn/v4fOvv/oBuGMDgYGBgZZhl4oy4iwU7GZjMvJGDaGGT/GqmnVWVnCTtU1QeVfPoOpBqtGbApx+pGQ/9D9iWKjsmAUXk133y/D7lRkCZIAPueiy1GeyGEmYrMVnxzJAADZeTimUsniVwAAAABJRU5ErkJggg==); --sp-chair_empty:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAUCAYAAAC9BQwsAAAAf0lEQVR42mNkQANWGmX/GbCAYze6GJH5LNgUPXxxAYUvL2HAQDSQFnD7Ly3g9h+XPBMDmYD+GocQQIlUcXGZ//gUv3z5hBFnAlAWjMKq6e77ZQwEU46mBqrw9Rt/MNRg1YhNIU4/EvIfuj9ZiPEfNn+y4AsAogE+56LLDaG0CgCfUiKzAkyt8QAAAABJRU5ErkJggg==); --sp-guest_0:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA10lEQVR42mNkwALExWX+o4u9fPmEEZtaFmyahbmksZjK8B+bISzYNCtIqWMa8Ay7ISzYnNVYtxBDLD7DgoEoL7z99pRBlqEXRUw/bgLOcGDB5vekpksMxAImYhQZqzgx+FjGYY0dJmJt2nJ8EX4vvHz5hJFBnOH/b2Y1hhf3n2AYwEqqF1j/3mJg/XuLoMsYkQPxN7MaXDPMueji6LGBYsD3j2wMDAwMDJz8v1BsgYmHekRghAcLTLOxihNB5x6/uBd3Qnrw7CZBA95+e4rfC4QMwJUjKQIAjBNacbsf6VAAAAAASUVORK5CYII=); --sp-guest_1:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA2ElEQVR42mNkwALExWX+o4u9fPmEEZtaFmyajWV5MBSeZZD5j80QFmya1WSEsFmG1RAWbAqjM49iiNVXazIQ9MLLl08YzzLI/Jdl6EVRpB83AWc4MKJ7IdJSDsOW5ccf4QxEJmTN9ZFmDKQCJmTnNy4/RbIBGIF468k7DEXGsjw4o5EJl8lnH39hOPv4C0EXMGJLQGcff4EHGro4emygGPD9IxsDAwMDAyf/LxRbYOIdGQYMDAwMDI3LT8ENYcEXfehgy5FruAMRW+BhCxe8XiBkAK7ERBEAADEzYgpqT6c4AAAAAElFTkSuQmCC); --sp-guest_2:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA2ElEQVR42mNkwALExWX+o4u9fPmEEZtaFmyaOXRlMA1lYPiPzRAWbJpFdJQwDHiDwxAWbM6a4bkUQyzkiiUDUV74cfkJgyxDL4qYftwEnOHAgs3v3tvPMRALmIhRJBNpx2BcEYY1dpiItelsxyr8Xnj58gmjOAPDfw5dGYY3V+5R7oUfl58w/Lj8hKABWAPxx+UncOfCXMWhK8MgzsDwHz02GJEN+P6RjYGBgYGBk/8Xii0wcZv2AIzwYIFplom0I+jcq1uP4fYCMQEHCxOcXiBkAK4cSREAAL1vWmpYIsorAAAAAElFTkSuQmCC); --sp-guest_3:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAyElEQVR42mNkwALExWX+o4u9fPmEEZtaRmyafzOrYShk/XsLqyEs2DQLiChhGPDhDQODuDjDf3RDWLA5a2X3bAwx90RnbEpRDXj58gmjuDjDf1mGXhRF+nETGFhxhAMjJf5nYGBgYELWzC3uwUAqYEJ2/teXO8g3AB/4zayGNW3gNYD17y0G1r+3CBrOiC0AkQMNXRw9VaJE4593DyAK+VGTM0zcIKAFIrC/Bp6gGEmJgQ9v7mG4kAVdEh/A5gVGfDmQ2BxJEQAA5k5iD+XHAiMAAAAASUVORK5CYII=); --sp-guest_4:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA40lEQVR42mNkwALExWX+o4u9fPmEEZtaFmyajVWcMBSeZdj3H5shjNg0S4rKYBjw/PUThrN39mG4hAWbszIyWzHE6pviGYjywtk7+xhkGXpRxPTjJuAMBxZsfq+e/o6BWMBEjCIfyziG0vgJWGOHiVibuhcWMBAVC8Jc0lgNePvtKVYDcLrg7benDG+/PSXoMhZstqPYJs7wX5hLmkGYS5qBQZzhP3psMCIb8P0jGwMDAwMDJ/8vFFtg4nV5XRjhwQLT7GMZR9C5+45uwu2F56+fEDTg7J19DHi9QMgAXDmSIgAAjMdfwwkLTS0AAAAASUVORK5CYII=); --sp-guest_5:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA1klEQVR42mNkwALExWX+o4u9fPmEEZtaFmyaOXRlMA1lYPiPzRAWbJpFdJQwDHiDwxAWbM6a4bkUQyzkiiUDQS+8fPmEUZyB4b8sQy+KIv24CTjDgZEY//+4/ARnIDIha5aJtGMgFTAhO//J8kPkG4APcOjKYE0beA34cfkJw4/LTwgazoItAJEDTZyB4T+HrgzEFQwM/9FjgxHZgO8f2RgYGBgYOPl/odgCE1fNsGBgYGBgeLL8ENwQFmTbOXCFASw1XrlHOC/gA7AwwekFQgbgSkwUAQBDjlaiD3xVugAAAABJRU5ErkJggg==); --sp-lodge:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAiCAYAAAADILqZAAACS0lEQVR42uVYMUvDQBT+TvIXSlNptwjq4FIXQUQ6SgfxB+jg4FZcCuKui4s4CA4O9hc4dC5FCk5VcFCUDEKrpoiraxxK2uRyd7kkF9s0b+m19zX3vrx37757BFNu+XzR5s0NBn0S9nkEKbD97WMf6evb00i+/xth27Y9ThNCSJgol40K3j9fAQA/vx+RogsAc0mTdEw0F2QqfdKSimBYM7/GY6OQXBC0SRGclMWKsK6XhPOdx550tNw4d7Qd65otJYRJnCjqegllo8Kc65otWFYvtoMs8kFpLyqISvYw/fZ5LyGK8SIfdc9rqvaidbU5jPpBO7H9F5T2Mpmpif4Yaj8ziKp6dtS0Z6a7SLrNohG3dGveN2aSZHVtFwBwdHkyJOyOssqCMw3mLqidx96wSju6NJ8v2oVcEQDw9d2HM071d3PMb2Ge8I+lrtkCTLo6eFPEsdFWYOC5WAa+mhNgKTydiSJ/pS8P1l0N1l3NN04zViw8Xp7Y4xRj55Ax02TFRJCCSguWS7hsVIRVkD7ngqomfSay8DysDJ7nL134iGzDLM3mbgf5IlzfO1e+4NnNoTRW9fr02j7CL28PyoUAfRYLC20C60vtYd5BznKeJzwcIdG8b6C+dy6MtDPvfj5PeLB8kBUeWpDw8FTBjYvYWPe9WeYOrdoHeeERmIshsEsrANrDzzBiQoEPkxEejmNhyPy38IjS8UiqkxIHm6jwUHVxD1o/tPDISptnMOgTcnm44yHb7Dyjur7sP3pS/vsowluri9lq4mWta/kHXPDiRS51aJMAAAAASUVORK5CYII=); --sp-pine_far:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAATklEQVR42mNgQAP/////jy7GiMwJc5rzX0pKieHZs3sMq/alwOWY0HU9e3YPXQihKMxpzn90U3GahA0wYTMF3TSiTGLEZQpeYKUlh6EJAGThGjP7OqCmAAAAAElFTkSuQmCC); --sp-pine_mid:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAOCAYAAAD0f5bSAAAAjklEQVR42mNgwAH+////n4EU8P/////GBVH/cWlkwiao4GqJQhPUhG46NtuYcNmCi4+hCZcf0MWZCJmKTZwJl2lvrtyDsx/sPo6iiRHGkHexIBgvD/ecYITbRGxEwtQxEmsLsm1MpCaX/////2fEJmGlJfdfRICH4c2HLwzHrj1iJCoZMTAwMLz58AWndQAbMUxmXAN4fQAAAABJRU5ErkJggg==); --sp-pine_near:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAUCAYAAABroNZJAAAAvUlEQVR42p2UoRKDMAyGk9zkxMT0QI8XgGpQPO/cNLcX2NTMZmYQCHxQcL2OJml/1yb9+92fXgEUMTNrPaQZvH+60UEqll0DVe/geRvySMLbJRqyUFS9g7Jr0khit8b2yUKh0VDqSPfqZKWQaCj1Ye31ob8o2norxmhWfe4P/CMJ3SWD8Az5WaSoaGtGRNxMYllIFD4NhlmkaM2FrBORpoS5FD4NSg3ueuHz6QjjNMPw+mLWp2SVajJOs+qyAIsSj7IeWDgBAAAAAElFTkSuQmCC); --sp-puff:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAHCAYAAAA8sqwkAAAAVElEQVR42nWQSwrAIBBDX+YW3ff+J+q+xxgXNZCKPhBjyHwQgp6wkF7tzJ32Xfl43u+sRfYAlOHkvmZAUne3JAGUxcqva2TKhjvmBAdzPZ1+4zR5AKM2PXllARZ4AAAAAElFTkSuQmCC); --sp-pylon:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAUCAYAAAC9BQwsAAAAi0lEQVR42qWRwQ2AIAxFSyfgBgkmrMAUDO08evDmBnhRA6Vgwd5o/6ePj4K7jFkSCOo4NlU0HiN3QW/2ClpG2lfcBU7HQrSfa6XD1lu8DeBtAHE5HVO+kZ67RmrgjAiThb1QerNqI5fgUKpiVElyuQa/kFqzf6iiDya4KMHkNPOoI5g5LkoxKe406gUtvD61sGZQ/gAAAABJRU5ErkJggg==); --sp-race_c1:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAABrUlEQVR42u1Wv0sCYRh+vojIRQmyD+TOIfuxpovgkEi0hYI0NfgH5ND/0C40RUGTQ1NLUlNENLaYYyRCnB/aV1LkEulwDfEdd+d9d2ckKPRs933P+z73/rp7CUygVNFjczvGc+P9FJwzYudclJsAgK2C6njv5sNCNhvIxOLhsoV//1qQijr5cBT8/JgBAARCPcOAUkXfXL1C561tN7GIyuwFpuGA1NKJ4ciMh6dL+IHMXioow+PLIa7PG5azjVwMgZB/H1P2A84ZEW8WD5dBqaKL80Coh369CBUlqCihXy8OpF3U2Km2viMUogCwf7RtukkAqFjuvUDcRMTbrqcyaDN3R3XtxrVzpSkdNYifVO7lfgZdFqWITtReFp1nDTlnxF4fc+oAYDmaGbAZqktHjX/BP4evwa89Fw12cNHWWDhDd1ab8AgFWEtDo1mznKWTWSiRKFhLG12EnDPiNW+T0aWUKno6mbWk0xwZ54zc3lUAAEokipi65vnnGL+Pt9hPZDuKH854j8XKwi7mgwl0ulU0vw5+zRm/GjotvU47qBdnqJTm85lBZ8fDc8z4Btde5DxDLgERAAAAAElFTkSuQmCC); --sp-race_c1_v0:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAABrUlEQVR42u1Wv0sCYRh+vojIRQmyD+TOIfuxpovgkEi0hYI0NfgH5ND/0C40RUGTQ1NLUlNENLaYYyRCnB/aV1LkEulwDfEdd+d9d2ckKPRs933P+z73/rp7CUygVNFjczvGc+P9FJwzYudclJsAgK2C6njv5sNCNhvIxOLhsoV//1qQijr5cBT8/JgBAARCPcOAUkXfXL1C561tN7GIyuwFpuGA1NKJ4ciMh6dL+IHMXioow+PLIa7PG5azjVwMgZB/H1P2A84ZEW8WD5dBqaKL80Coh369CBUlqCihXy8OpF3U2Km2viMUogCwf7RtukkAqFjuvUDcRMTbrqcyaDN3R3XtxrVzpSkdNYifVO7lfgZdFqWITtReFp1nDTlnxF4fc+oAYDmaGbAZqktHjX/BP4evwa89Fw12cNHWWDhDd1ab8AgFWEtDo1mznKWTWSiRKFhLG12EnDPiNW+T0aWUKno6mbWk0xwZ54zc3lUAAEokipi65vnnGL+Pt9hPZDuKH854j8XKwi7mgwl0ulU0vw5+zRm/GjotvU47qBdnqJTm85lBZ8fDc8z4Btde5DxDLgERAAAAAElFTkSuQmCC); --sp-race_c1_v1:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAABu0lEQVR42u1Wv0vDQBT+IiIUxP6g9jSkRSw6OVgRCoIUcW+ho4N/gJ07Cf4DUnDQwdXByUUHNwehFHSw7qUgbShcG1rs4I90iEO5kktzSSoWWvCbknffe9+99+6SJ8EEQhQjHjwYvFc716BUlaycSvkOALCWSNuuO8XgyGYHkVg+GOL4p522UNQuhq3g5/scAMDn1wcOhCjGxfIS3r50qwsnKvJnmIUNTlbmB4HMuNfa8AKRv1BQhBsNeLitcrb9TBw+v/cYM1YDparEdpYPhkCIYjC7z6+jV8khigKiKKBXyQ2VnfXYrreeM2SiAFA6L6KEonDdDZKTCNttZmMVrWbXMVCpqTmeXGFJxw3JSymLu9sAIMySZcd6L8rOtYeUqpK1P+bSAcBOJDzkM9IpHTf+Bf8cni7+sS73HwIyEODXngGoH7X+S6c9pRkyqI0aqvVXzpZKpqHIMaiN2vh6SKkqud236TilhChGKpnmymnOjFJVenzqzzeKHEM8uun655i8jzebT0QzihfOZF+L9cgRwgtb0LovqH+f/ZozeT0kRDESi1dD9nLrkBua3DgjlTSb3RsOdjk6x4wfvZzoV1FSp38AAAAASUVORK5CYII=); --sp-race_c1_v2:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAABvElEQVR42u1WMUgCURj+LlKQIAnKB8fpItUW6uIo1eJk4NjQ1GLu0SZtLYJbRE0NrVGTS0NtLeoYmBD6OHwmZVFEGlxD3HHvvOedkaDQN9397/v//33/f+/eL8EEQhQtPLdpvNeez8AYlaycavkSALAYTdmuD4rBkc0OomQzJMnx31lRmNQuhm3CjxcvAMDn7xoOhCgaWd7GW4daXbikIn8d07DBwd4aAGD/sMjZ6f2NHR0el/7ChCJ8PT3g6qLG2dY3wvD43ceYshoYo5K+s1wmCUIUTbf7/F30qlkEkUcQefSq2b6y5zJJQ521nK4V6kkBoNLuotK+E647QRqURN9tJLaCVrM5MJCqtoxnkTrbko4akptSnh/vAoBQpa5O771InWMPGaOStT/m0gGALAf6fIb6SkeN/4R/DlcHv3BiPuhefrHUAVWbE67QuC3UOmqNCmdLxFNQ5BCoWh+dQsao5HTeJuMrJUTREvEUV06zMsaodH37M98ocgjhYMTx5hi/n7c+n4hmFDec8T4WS4EdzM/G0H4tofFZ+DVn/HpIiKJFF0777OXHLW5ocuIMVdJ0erU/2NHwHDO+AbCB6mxmTiaNAAAAAElFTkSuQmCC); --sp-race_c1_v3:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAABvUlEQVR42u1WPU/CUBQ9lY9EBlGCvIRUQkoEo4u6MBJ0x8jo4OSkf8Mf4Gri5OBqdHfQzUVZgUAINE2eEvxYjCKpQ9Omj75HC4kIiXdpe9+59/Sed/t6JdiMEFlPLexZz7WXC1CqSv2Yy0waALBbrnDXB+VgwPYAERnJHDB4Wj4TkvJycAk/3oIAgNnwlxVAiKyv5Y/R1hr9IQypKN40PzjmjySNm16F8ZfuznlwBDzGCwlF9t1p4Oaqxvi2d1IIhL3ncBBSqkqEQO/60uj60iAEOqWqZPhlvVs9grKsAADq1bpD9q7PaKhAz9lQ3D3kBdrN9FtyCtaHIuwnVVa30HlqDJTqtV1nXoJHBgAzGLMJCSlVpUCvYkkWiSVdqzPxoupcu9RsFJF0ADAfVRwxI1U4dkn/CUc1T0ebEtKMazIIJFcc62owZPyKWtNaoVWJ1kStVWJ8uWwBcjwBVWv+3h6ah/n0dykhsp7LFhg57ZVRqkq399cAADmeQGppHf0n059XKLlVaM4nohnFC2ayP4t07BDRuU203x/Q+jwZGTN5e0iIrG8sOsfCx+d9ZmhywwwlabGYdyY7HR5jtx9o5fCmNzx08gAAAABJRU5ErkJggg==); --sp-race_c2:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAABsklEQVR42tVWPUvDUBQ9T0R0qQjWhyXt0FpdbZdCh5YiblKhODn0B9h/4S9wVHDq0MnFopOI6CC42I5CSZHkUX0oFLuIOsRBEvLxkiYtLfFOycu5571z7n3cENiCUknTnzlnRPT9oq4CAHaqcVeMGwexA1NL+8a73G9YEiiVtEy0biFvvVUdGC+OGXMy54zI/YbrZtsbV3YxyETrDkVuHAAwiwDx9HyJcUPo/+fHHABgYfHbOKG+fn0uW/Bbuykhzp7vqTC/dmrUx2wVpZL206khmU4CALqdrpBUlO/bUnN9AODweM/0lgXQdGACWWrvxkK+BAB4Yd5EHeXGs3uFXTqNEG7IOSO6/3f3fydflcZXF/haiMjTiVKgfNcNOWekhaoGAAWovsh0V9zUDa2hV+KoOeFomkmGr6Zpv9YMdCRpsxBnGMwr/1yhHqynQFbblrVirgwplgDrKZNTyDkjo3Rw+LqUUkkr5soWO83KOGfk9qEJAJBiCaTim0Mnx9QVkmEK9entNsH9YMJ9LdZXDrAcyeJ98Aj162hkTPhqKPrptQ9XP5hAllYqzuHaOgmOMccvcDzv1PfvFk0AAAAASUVORK5CYII=); --sp-race_c2_v0:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAABsklEQVR42tVWPUvDUBQ9T0R0qQjWhyXt0FpdbZdCh5YiblKhODn0B9h/4S9wVHDq0MnFopOI6CC42I5CSZHkUX0oFLuIOsRBEvLxkiYtLfFOycu5571z7n3cENiCUknTnzlnRPT9oq4CAHaqcVeMGwexA1NL+8a73G9YEiiVtEy0biFvvVUdGC+OGXMy54zI/YbrZtsbV3YxyETrDkVuHAAwiwDx9HyJcUPo/+fHHABgYfHbOKG+fn0uW/Bbuykhzp7vqTC/dmrUx2wVpZL206khmU4CALqdrpBUlO/bUnN9AODweM/0lgXQdGACWWrvxkK+BAB4Yd5EHeXGs3uFXTqNEG7IOSO6/3f3fydflcZXF/haiMjTiVKgfNcNOWekhaoGAAWovsh0V9zUDa2hV+KoOeFomkmGr6Zpv9YMdCRpsxBnGMwr/1yhHqynQFbblrVirgwplgDrKZNTyDkjo3Rw+LqUUkkr5soWO83KOGfk9qEJAJBiCaTim0Mnx9QVkmEK9entNsH9YMJ9LdZXDrAcyeJ98Aj162hkTPhqKPrptQ9XP5hAllYqzuHaOgmOMccvcDzv1PfvFk0AAAAASUVORK5CYII=); --sp-race_c2_v1:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAABvUlEQVR42tVWv0tCURg9NyIIwlTUW4+XhGJTQ7YILRLtCo4N/QE1OwX9Ay4NNbQ2uNvQ1hCIUEM2tMlz0ItwVZQcimx4DfLk/f6hKK9vuu/e8537zvm+y70EuqBUlJUx54yYrTfqDwCAVDpnibHiIHpgMnQ6/ZaGZU0CpaJcDIU15KXhwICx41hRJ3POiDQsW252u72lF4NiKGxQZMUBAKvwEI/9AeYNU/+/P9cAAOub4+kfKvNPFUmDP8knTXH6fFuFV7sb0/qoraJUlH8bF0ikEgCAZqNpSmqW79pSdX0AoHZTRQ1VW4wnS/XdmN+fqOl1R7ZEtW7ftntNu3QZYboh54wo/lc+mgCAaCwwtzrPx8KM/CgW8ZRvuSHnjJQAGQDySLgiU1yxUudYQ7vEWXP80TSLDFdNczkWJoOgAAS1a68A2Fdr8jEc/FOFSrBOC1L7XTOXzeQgCnGwTmtxNeSckVk62H9dSqkoZzM5jZ1qZZwz8vwyed+IQhzJnQPHm2PpComTQuX2trrB3WD8fSz2YueIBA7RH72h/XM9M8Z/NaRUlNPRe8N8vXemeaE5YTxZWigcG8nuvGPU8Qf8tPLeP6gHBgAAAABJRU5ErkJggg==); --sp-race_c2_v2:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAABxElEQVR42tVWMU/CQBT+SpTEkGhMlCOkMkDQjQALI1EXJkwYHZxc1D/gZtgc2YjRyYHV6MTioJsLNE4mWAZoGg5JUBNjxKEOWNIr10IxkPqm3rvvfdfv3Xt5J8BkhIia/k2pIvD2a9UbAEA0kbXEWHEIZmBkeXewlrslJoAQUfORDEP+QctDGDsOjzGYUkWQuyXLw8jGvlkMfCQzpMiKAwDm4MCU53uuf94BBzf/n29eAMDCUm/wh7r/9lpm8Ns7ES7OHG+r8PR4CwCQL5aZdBMiat+1I4SjYQBAvVbnkvLix06p8X4AQOr0IHWebDGOUqoTnBz0qzGejAEA2q2WLZGqtpl1vljmtowHMzbugZQqgp5/qfIIAPAHAn9W57gteOTBoN9RvOWBvyo1ALg6j41FpmfFSt3IO7QLnDTGHUUzTRuraAoXxkb3spuVVyhq658rHEwLtQG5KTG+dCoLMRiCojamp5BSRZikgt1XpYSIWjqVZdJpVEapItw99N83YjCEyFp85OSYuUJhlEJ9eltN8HEw7m6Ldf8hVhaT6LxX0PwqTIxx3x0SImqJ1cshf/Vlj3mhjcI4SmkutzlMduYcY7QfnRD0K4iDLaIAAAAASUVORK5CYII=); --sp-race_c2_v3:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAABwUlEQVR42tVWv0/CQBT+qkAigz8IcgmppCkRjC7qwkjAHSOjgxOT/hv+Aa4mTg6sRndNdHNRJhMgbQw0JKdE1MUoIXWobTh6LRSDqW9pe/e979337r3eCRgwQkTdfKdUE3jzZ+kUAGCnWnPEOHEIg8Dkwq71rXTKjAMhok7SJYacVk9sGDeOKcaZaoLSKTsGW8sdwqYmXbIpcuIAgAA8WOXmlDse9MDBzf/HWwgAMDP3Za3QHL88Vxj81naSixv0d1UYiEjGS6/GpJsQUe/WDyAvywAAta7ySTn+rgq700YVBjkO5pyVThdMsFdzr1JeUHk1DwB4eXp03ZvXtmpbCK9lpvDHxg1IqSaYqVIfrgAAkZj0a3We24JHPh+VPfk7BjSqEj8NnR+JzMyKk7qhe+jmOK6PP4pmkjZS0cjhlvGUQoC0YpvXQmHjZ938rwotJa0GlGaFGctmChDjCWitxuT2kFJNGKeC/VelhIh6NlNg0tmvjFJNuL69AACI8QSSS+vM6e8LhcIwhebp7XSCj4Lxd1ukYvuIzm6i/X6H5ufR2Bj/7SEhor6xaL8W3j/vMTe0YRhPKS0Wc3ayY++YfvsGnUvyqv42ecUAAAAASUVORK5CYII=); --sp-race_d:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAByklEQVR42u1Wv0/CQBh9bRoNi4REvUhKBxqcVQZGgu6QMDAw6K6D/ilMJo46MLDpBCZKdDAxBnGWwEAbTdWE6GLQ4RxMsZTrtdcQJm/q/ej3vnf33n0H/DdGI0SlhKh0ZmB3DUrvGjQUqCQKtr50MjbWft2GZZnS1AEJUWli/oA5ZwwrgUEVEYaPL4e4OO2OjW0VdESiwWMEBrQsUyJEpd+dPSRTSQBAr9NDJPo13S11C4N1hu7EQgMSotL9ggEAeDb5iXX6zUAiknlgpbSB65umkOxLaQM8u8g8MDtrAFhR/dnZ3zxQRdS4zuAAkNJyQv/LXoqstRKjYCLbmtJyqLUSnufoK5rP97lRf2ezy2R4fKmP+n42kYJYIpvJc1mZT30AQNd48LUGV6V6rCx8ueuxMlelCg+sO6hOMLFZ2C2byUONa38sB1X8JlqlLKYyD8xrayzLlHhzNiiLqTzr4i2Lsgt60XuxlP1UaivUPj9nIpZlSle3ZwAANa5BT6zB7xXge9PUz+sOj4VfM8EwrA1EbaKM17EqdRt3dXkXiwsbePu4hzGsMIOy1njFU0SKZxjxBL7aWC80d4ENskZINMXiZOlpH4mvcbYfW1j/zGN4TUkAAAAASUVORK5CYII=); --sp-race_d_v0:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAByklEQVR42u1Wv0/CQBh9bRoNi4REvUhKBxqcVQZGgu6QMDAw6K6D/ilMJo46MLDpBCZKdDAxBnGWwEAbTdWE6GLQ4RxMsZTrtdcQJm/q/ej3vnf33n0H/DdGI0SlhKh0ZmB3DUrvGjQUqCQKtr50MjbWft2GZZnS1AEJUWli/oA5ZwwrgUEVEYaPL4e4OO2OjW0VdESiwWMEBrQsUyJEpd+dPSRTSQBAr9NDJPo13S11C4N1hu7EQgMSotL9ggEAeDb5iXX6zUAiknlgpbSB65umkOxLaQM8u8g8MDtrAFhR/dnZ3zxQRdS4zuAAkNJyQv/LXoqstRKjYCLbmtJyqLUSnufoK5rP97lRf2ezy2R4fKmP+n42kYJYIpvJc1mZT30AQNd48LUGV6V6rCx8ueuxMlelCg+sO6hOMLFZ2C2byUONa38sB1X8JlqlLKYyD8xrayzLlHhzNiiLqTzr4i2Lsgt60XuxlP1UaivUPj9nIpZlSle3ZwAANa5BT6zB7xXge9PUz+sOj4VfM8EwrA1EbaKM17EqdRt3dXkXiwsbePu4hzGsMIOy1njFU0SKZxjxBL7aWC80d4ENskZINMXiZOlpH4mvcbYfW1j/zGN4TUkAAAAASUVORK5CYII=); --sp-race_d_v1:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAB2UlEQVR42u1WQUsCQRh9u2xBF8VQB2STUNJrRSQIIdElCAw9eugH1Llf0aVr1w57CsQgkKBDEEEdrEMXFSVyEVYlyUukh+kQq6vuzu4s4qk57c58+73vzbz3zQL/w2QQIlNCZDo3sF6zRHvNkitQgRfs1Lc8NnfW/YSmqcLMAQmR6cHCounazaDvGFTiYXjVAe4KtbG5vcMolrzOczgG1DRVIESmg+oJImsRAEC9WseStz/bLZ0UhtkZThbmGpAQmT7sbAEA2q0es7DHVseRiEQWWD4eQ+GtziX7fDwGll1EFpheNQAEgh5bdvozC1TiNa4xOQAkg36u70UrRWbKlWEynm1NBv3IlCuW52grmu+vkdmL26umDPef34fvdjYRnFgilUgzWanNDwBArfFqaw2mSqO+HHdzj/pyTJVKLLBaV5liorPQRyqRhhwKj1h2FfwVqlAzpiILzGprNE0VWGs6qBlTcd6Xt8jLzmmjt2Ip2qlUV6h+fsZCNE0V7p+uAQByKIzoyjrs/gJsO03xtmjwmPuYKYZubcBrE2n8HlPopHFjwWP4PZvo9Epo/JybJjWLscon8VyebsTjuLURItONwOXU/Ev7aJjISQyXaLLZ3elkF/wxxvELbHf/zEyvPpAAAAAASUVORK5CYII=); --sp-race_d_v2:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAB4UlEQVR42u1WMUvDQBh9iakgglLQnoTYoUFndelYxMWpgpN0yCooOLo5iH9AXKS4dQhuolMRHBxdanESpSI2hF4tigURqxIHSU1NcpcrpZM35S5fvve97967C/A/AgYhmkOI5vQNrGmXnKZd6gpUEgUbJosda6+0CEotqeeAhGjOx8B04LvY101kUEWE4efTPc6OKx1rC0s6YqPRc0QGpNSSCNGcj9t1pKZSAIC72zsMjbaEWqpEaaV3Xm60UG5ch8bwwCUe2NHBJgCgXqsxC7PtOgBge58tIpkFlt8xUC5dCck+v2OAZReZBeZWDQCJiQkuO/eZBaqIGtebHABUNSH0vRymyNWtQjuZSFtVNYHVrULoPnJF8/Yy2J4X9lYCGRobh+05zyZSFEtk0lkmK8t+AABUqmWuNZgq1eM54cNdj+eYKlVYYJVn08fEZeGOTDoLTU3+snw28VOo6QQxlVlgYa2h1JJY71zQIKZyvy9vWZRd1IM+jKXMU6mrUHf/vIVQaknnFycAAE1NQp+cAe8vgHvSFE+LHo91H+Nj2K0NRG2idN5jpvPXuNOJNYyNzKHRLKH6vhuYNCgmLJ/yd7N7yS4on8QSzOx4wbd++Wi0E0WJERLN8vK8P1lePMY7vgFYWAXcj5y6uwAAAABJRU5ErkJggg==); --sp-race_d_v3:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAB4UlEQVR42u1Wz0sCQRT+dlNBhNQwB2QVUdIIguriUaqLJyOPHTp1iPpnugadOniNOklQ0LFLdQpSFNFFmBKtQCJNtoOsv3Z3dmepTs1pd/bN+9733vvmLfC/dBYhkkKIpNg567ADdpZMAAC2AYVSWeA5L3AzS+5N7NGnE/CACjxgvZmE7jdnv2gZlCulX60qrs7LE3ubW3E4vb9QQ0plgRBJ6ZUOEVuIAQAqpQrc3u7PpnS6G6fT6uwXNYHZBiREUsLL+wCA1nOVGdhrs2KpniILzEMyqDxec8nGQzJgaVRkgalRA8BcMGrKTn1mgXILf9w5APgCMa7zolFHdmhh6Iwnrb5ADB1aMKyjadN8vLmG74HEhi7DZnEUkJlMTFPq9naRTmVHG9FFjY3sWgIAlOsP9lKqsov7d7inQdy/w+xSBwus3M5PMmnUNCzSqSykUARyozZg2c5jEGhed5KILDCjWlAqC6xvKqgeU/Gvh7fIy87qRW/EUjSThdqhav3GA6FUFm5uLwAAUiiCeHgFZr8eprIoXBbGJGLfRsPQrgx4ZeKYnGN5ZXqmJYIHCMyuofl+h/rnka5TPRsjfw6e4WmneSzfpYRIyur8qWb//mV36MiKDVfT5HLrWmfH/Dbj6xukJvdaZf2sVQAAAABJRU5ErkJggg==); --sp-race_l:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAACHUlEQVR42q1WMU/bQBT+bFlULEWRoKdWdoa4gRXKgJQBZFWtmIjEkMFDf0A7lJ8CCxISSxk8sCUbQrRiRIi2cyMz1JYit5UQLBXtcAzombNjPy6JnxQpubvc977ve+/ZABNC2PL8SMrzIymFsCUqCIMDW5o7yKx9+/0OSRIbkwCaumAA8GbhGJMyZRk6T7YK96Lb7bGZWtzmj1+7OOmGmbXXbRfTM+MzLAVMktgQwpb/+x/QaDYAAJf9S0zP/JvIR6NMTvr+sR1l9na6TmmCYwEKYUsCGcT8n/s/v2C15WEQA4cXjhaoWUVvPbeBznKkVcFmnl1nOcpcxLFTJdYFNXWyJwD106x7AICluYORQM08OwIoK46iUD1/zMuJPVxtedpgQ1VKUqhMKQbxg28UzbqHT5/d9LdOj1pFvXR44cgOIrZoKFov99PB7tZ8AIHk+pKdpQDw93oqXVt/u86Cn571AABuzUd4FRSCsrPUrfkIEcB1FrU9vQcJJLHNg1o6l4TR9wwoMUkTcxZhv6hjbWUDp2c9yYGWPg85WYgJVyBJEhvhVQC35mf6spLRxg3/kTzMVa8EMCQd7ZHsaysbJHuhtKZuxuQTeajKqfOUIGnZtlB9FMKWaosUNXnZGZI4SWLD4sCqCjUxi+ul/OH5Z+8x+/QV/tx8RXS7XXj5Y2csnayqDEO3aIreU9UXY50z2m0BAJub3vBle6OfuQPBLj8dHp8NbAAAAABJRU5ErkJggg==); --sp-race_l_v0:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAACHUlEQVR42q1WMU/bQBT+bFlULEWRoKdWdoa4gRXKgJQBZFWtmIjEkMFDf0A7lJ8CCxISSxk8sCUbQrRiRIi2cyMz1JYit5UQLBXtcAzombNjPy6JnxQpubvc977ve+/ZABNC2PL8SMrzIymFsCUqCIMDW5o7yKx9+/0OSRIbkwCaumAA8GbhGJMyZRk6T7YK96Lb7bGZWtzmj1+7OOmGmbXXbRfTM+MzLAVMktgQwpb/+x/QaDYAAJf9S0zP/JvIR6NMTvr+sR1l9na6TmmCYwEKYUsCGcT8n/s/v2C15WEQA4cXjhaoWUVvPbeBznKkVcFmnl1nOcpcxLFTJdYFNXWyJwD106x7AICluYORQM08OwIoK46iUD1/zMuJPVxtedpgQ1VKUqhMKQbxg28UzbqHT5/d9LdOj1pFvXR44cgOIrZoKFov99PB7tZ8AIHk+pKdpQDw93oqXVt/u86Cn571AABuzUd4FRSCsrPUrfkIEcB1FrU9vQcJJLHNg1o6l4TR9wwoMUkTcxZhv6hjbWUDp2c9yYGWPg85WYgJVyBJEhvhVQC35mf6spLRxg3/kTzMVa8EMCQd7ZHsaysbJHuhtKZuxuQTeajKqfOUIGnZtlB9FMKWaosUNXnZGZI4SWLD4sCqCjUxi+ul/OH5Z+8x+/QV/tx8RXS7XXj5Y2csnayqDEO3aIreU9UXY50z2m0BAJub3vBle6OfuQPBLj8dHp8NbAAAAABJRU5ErkJggg==); --sp-race_l_v1:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAACMElEQVR42q2VwWsTURDGf7usQkFatiRZla1IFtNLD1WEQlGKCBIQGtpjDv4Beu7Vf8CLFw9ePexJCBY8Ci2KUJHoVcsWoSGwSTC4HsT28DyUt+5uNq8vyQ4ENu/NzjfffDOzoDDHcUXUbYuo2xaO4woKMEMFtmMvps6eDX8Shh1jFkBTFwzgxZXLzMpUyfDhhYu5d29PT6ZmaqkuXw/g3ZsgdXa/4TG3MD3DsYBh2DEcxxWnh0+o3qgCcHR4xNzCyUw6WuPKKZ/Le11+73XPnnPukwlOpaHjuOLD3dsA9HuR8uWPvQGNlSr9XsTWt+9aoGYRs1WuzNNarml1sJll11qupQKp2AHcef95IlBTJ3sJkPytV0oA7NiLE4GaWXYSQAbRsaTm52k5s4aNlao22EiXylIkmUrr96JYN2nrlRL1Tz/i/zozauXN0haIFjVl00h7ev1SvNg9uwn4QjWXyl0K8OfX/31af1BXgu8f7ALg2U2CoZ8Lqtylnt0kwMdbWtXW9AzEF5JtFtTSCRIcf02BSiZxYkuruFevsbG2yf7BrlCBjv0eqsoimagaJAw7RjD08exmai4LWW2q5T+RhpnuFcBI6eSdLPvG2qYse25pTd2MpU5Sw2Q5db4SsrTKsUjq6DiuSI5I3pCP85ElDsOOYanAirJkYpZqlrLOtcpjSvO3GERtjv8+zw1+no+lk1WRZug2zc3yq5HzL/1HcWI6PtpjAbC9fW802MvJff4BPjRDrnvzRmoAAAAASUVORK5CYII=); --sp-race_l_v2:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAACJ0lEQVR42q2VMWgUQRSGv103ggiGA70JyyZFFqNVOK9JGUSQqyKmvOIqRVSwtBORdFZ2ctilOOyCV6WxSJnmtDbsIeQ4dk8xeCASo4yFzLq7tzuZy+2Dhd03b9//3v/PmwGNCeHJ8bAnx8OeFMKTlGCWDuyiaKR8P6JdomhgzQJom4IBiGv3mLVTbYcn51Zy1+b+fDpzp45u8fe3z7x/F6R8t+74zM2fvcNCwCgaWEJ48uTgMctXlwHoH/S5MP9rJh2dIjrjj6Xr9I//v0M3V0fTIqw8sJ03TwEYhaH25+FwRK2+yigMefBs2wjULmO2qgsLtLdaRjvYznbX3mqlEum6A7h7/+VUoLZJ9Qog+bhuFYDnDxtTgdrZ7hSASmJiSc1P03JmDWv1VWOwiV2qqEh2qmwUhrFuyly3SuvJ2/jbZEatojnMghYBKt+L17v4lSbBUUc7l9qzFODn9/Oxr3G7oaV3b78LEAPngWrPUr/SJKCDv1gz1vQfSEf6lSbQkVlQxyRJcPgxBao6iQtbrOG5S6yvbbC335U60ML7UEeL6kS3QaJoYAVHHfxKMzWXpRxt2sN/Gg0zN4EEJqhTa4r29bUNRXsutbZpxUonpWGSTpNbQlGrHYukjkJ4MjkieUNeFKMojqKB5ejAyrJkYY5ulrLBK9VHXL5U5+u4x+Hxq9zkp8U4JlWVaZbpprlxZXvC/+FLKy7MJMZ4LAA2N29OJmtPH/MX1TZKrbdSvHIAAAAASUVORK5CYII=); --sp-race_l_v3:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAACK0lEQVR42rWVTWsTURSGn5lOBSnYpsReCBMpM5hCRahuuiytILOq2GUWrlyIgr/CH+BSwZWL2apddaPQZTcquGrLhECyuTGkKogfUcZFvePMZHJ78+GBQObeM+c9533POWOhMSHc+MVKDYDbh0dI2baY0CwdmFi5mzmTh88mBrVNwQCubD5CCDf+bxX2Z2qFd7O/x6fX0V3+6jV5/SrKnN245TM7P36FQwGlbFtCuHH/+AHeZQ+AxnGD8/M/J9LRGUan+v/wZQX4/vepMnCfTnAsDYVw4+rVewD0Ok3ty5+6DbzVLXqdJl/lnhGozRRscWmZOREYdbCdr25OBJlAuuoAWh+ejARqm2SvANK/hfJpI/VnaiOB2vnqFIAKYmJpzc/ScmINvdUtY7CBLlVUpCtV1us0E92ULZQ9ukdvkmeTGXWKZkmwF0OgbZokwOJysu78Uh0IY91cancpwLfP55Kz4GagBd8/2AXAL9WJTsJCUO0u9Ut1IkL86pqxpqcgYayqzYM6JkGi1vsMqKokSay6hlu5xMb6NvsHu7EOdOj3UEeLqkTXIFK2regkxC/VM3M5ldWmW/4jaZjr3hgYoE7dKdo31rcV7YXU2qYZK52Uhmk6Tb4SilrtWKR1FMKN0yNSNOTDfBTFUrYtRwc2LUsn5uhmKe9cW7pP+cJ1ul/e0vrxuDD4WT6OSVbTNMu0aa5dfD5w/u7jnX/718DHeCwAdnY2B4M9Hd3nD1xPP5dxC2/NAAAAAElFTkSuQmCC); --sp-race_lp:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAACKUlEQVR42rVWMUscQRh9OxyGazwOPAdl9giuZ5oUd1oIVyiL2CqIWFyRH6BF8lOSJhCwyRVXpNNOQhIsRYIpxMLjLNwFWVOIVYgpJoX5zllvZpzbvQws7M58O+9773vf7AKWwbmQxwdSHh9IybmQGMHwbGCNSjs1d/LzFZIk9vIAMlcwAFh98Rl5mVoZ+s/eaNei328zMy3YFs+v3+PLXi81t7IeoFjKztAImCSxx7mQf7o7mKnNAAAuuhcolu5y1dEzyUn3r9ej1Nq7Pd+YYCZAzoUkkKvY/nL38huWmiGuYuDTd98JlD0G21qIhpZpSgBbC5GTg9ljsCmR3sjGTpXYFZSZFtSNCEC9atUQANCotIcCZaM4rtSaP1XL3IBLzdAZbMClah1JJjV7qhuNWjXEx69B/9mlRwt5GTZnd/sHe1BuAehIW19q+/DX7Vg/YwAI/DoAQExXreCHR/v38eUWejcdLSjTnRjF0h1ePt/MxDhJYq9300FQbmndWnDZAIAklioTGoFfh5iuYnlxDYdH+/L+nY4kiVWmmV2aJLFnM4iJ6Uj60Hb4Z3IpyUrGUaWjtV70A4Ffx/LiGsmulZa5Zkx1ohqqcrp8JUjaoRienp79mxkD50JqQA0xD73JtGzKrVRWeWuqGoyZ3AVgoHnnJrfRnN3F3OS2cfOnYv6LSzN9D3X/qRPj8wCAifF5NCrtlNwuMca2oEKrcm5shANxJx/Szy4xfwF2Mzae/BrrcwAAAABJRU5ErkJggg==); --sp-race_lp_v0:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAACKUlEQVR42rVWMUscQRh9OxyGazwOPAdl9giuZ5oUd1oIVyiL2CqIWFyRH6BF8lOSJhCwyRVXpNNOQhIsRYIpxMLjLNwFWVOIVYgpJoX5zllvZpzbvQws7M58O+9773vf7AKWwbmQxwdSHh9IybmQGMHwbGCNSjs1d/LzFZIk9vIAMlcwAFh98Rl5mVoZ+s/eaNei328zMy3YFs+v3+PLXi81t7IeoFjKztAImCSxx7mQf7o7mKnNAAAuuhcolu5y1dEzyUn3r9ej1Nq7Pd+YYCZAzoUkkKvY/nL38huWmiGuYuDTd98JlD0G21qIhpZpSgBbC5GTg9ljsCmR3sjGTpXYFZSZFtSNCEC9atUQANCotIcCZaM4rtSaP1XL3IBLzdAZbMClah1JJjV7qhuNWjXEx69B/9mlRwt5GTZnd/sHe1BuAehIW19q+/DX7Vg/YwAI/DoAQExXreCHR/v38eUWejcdLSjTnRjF0h1ePt/MxDhJYq9300FQbmndWnDZAIAklioTGoFfh5iuYnlxDYdH+/L+nY4kiVWmmV2aJLFnM4iJ6Uj60Hb4Z3IpyUrGUaWjtV70A4Ffx/LiGsmulZa5Zkx1ohqqcrp8JUjaoRienp79mxkD50JqQA0xD73JtGzKrVRWeWuqGoyZ3AVgoHnnJrfRnN3F3OS2cfOnYv6LSzN9D3X/qRPj8wCAifF5NCrtlNwuMca2oEKrcm5shANxJx/Szy4xfwF2Mzae/BrrcwAAAABJRU5ErkJggg==); --sp-race_lp_v1:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAACPElEQVR42rWVwWsTQRTGf7vEQEAStiS7WjalZDW95JAWoRCUIl4EocHiKX9CPffqP+DZg+Cph5yEYqFHoUURKlI9FEFLimAIbFoMxoOQHsZDnDib7G43u3FgYXfmzXzv+773ZiFkWJYt+p0j0e8cCcuyBTMYWhjYljHnmXva+4HrtrUkgHpUMIBn16+RlGkowwdX0r5rexeD2ExTYYsvz+H1q5Zn7l7dIZOLzzAQ0HXbmmXZ4uLkMaWbJQBOT07J5AaJfEwFySnfC/sdfu13hu8+62qCsTy0LFu8vXMLgLNuP3Tzu+459UqJs26fh1++RgLVx8F2lspTy1Qws+wslSNVsD4OVjCznoPC2AHcfvNhKlA9aEE9SAKoT83MA7BlzE0Fqs/iulI9v8zLxID1Siky2ESVqj5KmdTspW9y1Mw8999/G31H6dFUUoZPFq+OLnbHaABNEdaXvn34+2d6lDGAU6wCYM8vhIIfHO4O440GrV7TF1T3uzEyuQGVxUexGLtuW2v1mjhGw7daU1EOAIRkqTKRwylWsecXWFtd5+BwVwz3NIWUWGUau0pdt62FFUgQ05n0YdjlH6tKpayycFTp5Frr+yecYpW11XUpu6+0etSMpU/SQ1XOKH8JKe1UDI+PP/+dSWNZtvABDYj515u6Lxuj4ckqqadqgelB1QVMNG/Z3KR24wVlczPw8Mti/kuVxvofjsu8XNgmn10BIJ9dYbmw7ZE7SkxgW0ijVTk3Nu5OxH187v2OEvMHi2Q80j6UsT0AAAAASUVORK5CYII=); --sp-race_lp_v2:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAACQElEQVR42rWVsWsTURzHP3emhSI0BNq7cFyC9DQ6SEmzFLoUdelUsThlyKSIFRzFRUS6iP9ACTplCG7STF0cOnapDsXBkiAYQi6DxYKIrXIO9aXvkrvry118cHDvvd+97+/7/X1/7yBimKbtHXX2vKPOnmeatscYhhYFdtFc8a39cLdx3baWBFBXBQMwr94jKdNIhicXCoF7E38+x2aaitr8/e0L77eavrVbtx0m0vEZhgK6blszTds7OXjE3JU5AFoHLabSx4nqmAqTsz/JX6P16+wdGoF1VE1CCwJ79/oJAL1uN/LjTqdHsTRPr9vlwbOaEqg+CFbdqIwsk5HNUt2oKDlYHwQzslnfQVHsAO7cfzUSqB62IR8kAOTHsgwAnj9cGQlUH8d1Jdf8vFomBiyW5pXBhlwq11HIJGcv6iaGZRlUHr/tz1V6NJWU4cunNwF4sbmNkykDdS+qLwP78Of3yX7GAE6uCIBt5SPBd3Ybp/GZMs3DeiCoHnRjTKWPuX7pbizGrtvWmod1nEw50K0plQMAT7CUmYjh5IrYVp7lxVV2dhve6Td1T0gsM43tUtdta1EGCWM6lj6MvPzjuFTIKowjSyf2ml8/4uSKLC+uCtkDpdVVMxZ1EjWU5VT5SwhpR2K4v//p38okpml7AaAhMWe9qQeyyZR9WSWtqWwwPcxdwFDzFox1li6/oWCshx5+Xsx/cWms/+GgzAuzNWamSwDMTJdYmK355FaJCW0LUWhZzrW1G0NxH6r+uUrMX4dMPeUkp7g3AAAAAElFTkSuQmCC); --sp-race_lp_v3:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAACNElEQVR42rWVwUsbQRTGf7uuggjGhJiBsJGQbVewLUQvQi+ivXiyVHrKuYdioX9F/4gWPHnIta2nXlrw6KmCUlBJCJjLiMT2UFpMy/YQJ51NdtfNrg4s7My8ne993/verEHEEML23s+7ADw7PkHKtkHKYUSBifkXvjV5vJ0a1IwLBvBg9Q1C2N6dMeyOuYF743+Ty2tFbf7ptPj8seFbe/LUYTyTnGEooJRtQwjb656+onK/AkDztMlk5ipVHa0wOdX76w9F4Pf1rDi0ryeYqIZC2F7p0UsAOuetyI+/XzSpLKzROW/xU36KBWoOgk2J9ZFlyhXKTIn1WA42B8FyhbLvoCh2AGeHb0cCNcM29IMUgP7M5HtG6o65I4Ga3MLQa35TLVMDVhbWYoMNuVSvo5JJz17VTY2ZfIWLky/9eZwetdIytHLl/nXnZGtA3Yvqy8A+/PVjop8xgFOqAmAX5yLB9/Z3e/HZGo3LeiCoGXRjTGaueFh+noixlG2jcVnHydYC3WrFOQDwFEudiRpOqYpdnGNleYO9/V2v903dUxLrTBO7VMq2EWWQMKa30odRl38ilypZlXF06dRe4+wAp1RlZXlDyR4orRk3Y1UnVUNdzjh/CSXtSAyPjr5dr0wghO0FgIbE/O9NM5BNtubLKm1NdYOZYe4ChprXLWzx+N42bmEr9PCbYu7EpYn+h4MyL87ukJ9eAiA/vcTi7I5P7jgxoW2hCq3Lubm5OhT39Z1/HifmHzFiOLu/UXRXAAAAAElFTkSuQmCC); --sp-race_p:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAB80lEQVR42sWWv0vDQBTHvzmK0Kl0kGBJMxiCq+LgKFVc282hg44ODv4FTs6Ck6CTOmRwU3AookUHQUR0FENEmqCcDuIk6nAOciW5Xi69WvVBoTku93k/vu9dAE0zTYtdNBi7aDBmmhbTfd/QhY0N7iTWrp7nQGnU9TlEBzYzctixPja4A51IczoR3twf4KemBbx9WsfRXpBYm645yBd+AUhpZJimxT79RQy7wwCAO/8O+cKHVg2Nbmon1kwUjehYz0DTtNhSLQQAPEZqx/xWsyvVEhVsdjzE6VlTSxSz46FStUQF414DwJCVHR3/r4KSLJhYI7/VTPxk9VRBCf7YiEz+u5dluHZFqkqV8b2uXcHuZVkqHpLWc3GojnBUsK7a4u11oP08PxV01M21K9g+dtrPWYPAUMGcYh3Bi4fJiaoyquihBQAIwmvwd9KgJAuma8GLB6dYT22LnArG52c8kiC8TuyfnKjCKtntKL8j85hTrAPwmBhpT21BaWToDOxUoBhdr71GaWSkpZZkqZQLhqcz7gilkXFyvg8AsEo2nPJo5u3/f5OGp7PfJqbVkF22PG1i48uaWrVHPC+18eMeiYfJLG2PTHjSCHUGtsr4dRUH5+KwlYXvz4nNrdW+APl5yxvl9gBITBoOCt/X+gLc3Opc/AK1dSJAbdnwYgAAAABJRU5ErkJggg==); --sp-race_p_v0:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAB80lEQVR42sWWv0vDQBTHvzmK0Kl0kGBJMxiCq+LgKFVc282hg44ODv4FTs6Ck6CTOmRwU3AookUHQUR0FENEmqCcDuIk6nAOciW5Xi69WvVBoTku93k/vu9dAE0zTYtdNBi7aDBmmhbTfd/QhY0N7iTWrp7nQGnU9TlEBzYzctixPja4A51IczoR3twf4KemBbx9WsfRXpBYm645yBd+AUhpZJimxT79RQy7wwCAO/8O+cKHVg2Nbmon1kwUjehYz0DTtNhSLQQAPEZqx/xWsyvVEhVsdjzE6VlTSxSz46FStUQF414DwJCVHR3/r4KSLJhYI7/VTPxk9VRBCf7YiEz+u5dluHZFqkqV8b2uXcHuZVkqHpLWc3GojnBUsK7a4u11oP08PxV01M21K9g+dtrPWYPAUMGcYh3Bi4fJiaoyquihBQAIwmvwd9KgJAuma8GLB6dYT22LnArG52c8kiC8TuyfnKjCKtntKL8j85hTrAPwmBhpT21BaWToDOxUoBhdr71GaWSkpZZkqZQLhqcz7gilkXFyvg8AsEo2nPJo5u3/f5OGp7PfJqbVkF22PG1i48uaWrVHPC+18eMeiYfJLG2PTHjSCHUGtsr4dRUH5+KwlYXvz4nNrdW+APl5yxvl9gBITBoOCt/X+gLc3Opc/AK1dSJAbdnwYgAAAABJRU5ErkJggg==); --sp-race_p_v1:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAB/ElEQVR42sWVMUjDQBSG/xxF6KJEaqOSFjFoVwVRKIiDi5PStYOrg7Ojk6MILg46iUMnodRBXBwEEXRQBxeVFLGhcG2x2EXUIQ5yJbleLr1a9UGhOS733f/e/14AxTAM022Ur91G+do1DNNVfV9Tha3p/b61zfoLKHXaPoeowHaGBlvW1/R+qCiNqCg8rr3gp6EEPKwBpwXbtza/ZCHa9wtASh3NMEz383EVo2OjAIDiYxHRvg+lGmrt1I6vGW8a/mIdAw3DdM9npwAA1UpDerGLSq0t1xIZLJ8aR+GuqGSKfGpc6loig7FbA8BAvDdUHfsvg5IwGF+ji0rN9xPVUwYl+OMgIvtn7h+QjseErpQF25uOx5C5fxCahwT1nBeqYhwZrK22eHvtaT6fTI+01C0dj2Hh6qn5HDYINBnM0rOw6znMzSxKVTnlZwCAXboFeycISsJgqmHXc7D0bGBbRGQwNj+9SuzSrW//3MwizOFkU+W3spxr6VkAOZdX2lFbUOpoKgM7EMir67TXKHW0oNSSMJcyw7B0ei9CqaOdXR4BAMzhJKzEROjX//8mDUtnt4NPqyb62LK08Y0vamrZHv68wMb33og/TBRBe0TGEyqcHDjoSjpvqsst4IgXtrFSAgDs7W91BcjOW99NNAeAb9IwUOl9uyvAvf3WxS/TLiIy83GZeAAAAABJRU5ErkJggg==); --sp-race_p_v2:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAACA0lEQVR42r2VP0jDQBTGvzuqIB2kgz0JsYNB3ERdHB1cnHSVDp2EDoKjWwfpLIiLVBfpUNxEJxcH3VxqcBJqRGwInoqiIOIfiINcSNPLpSfVB4Hc4/J+97289w7QNMZM/8Wr+y9e3WfM9HW/J7qwNJtt8b3yQ3DudhyH6sDY6GKbP81moaM0paPQvTyR+ns0YmgBvx6vcbTvtPhm5i309P8BkHOXMGb6n40lDI8MAwCuGlfo6//Q+oepTv5deG0/fMB+uIjdkwQnSbC97RUAwN3trfJgnncHAFjdVFctVcEq5QLs+rlWn1XKBWXVUhVMnBoAsoODierEuwpKk2Crm4dtwcNP2MReFZTin410ktLxybGgcKKqDCMr9RVLVWnx0LieK5aqMIzsTytoFI4K1lFbvD33BuvqxoJUTWF5N1gnDQKiglmZPJynGqan5tQz1rsBADhNG+KbOChNguma81SDlcnHtkVKBRPzM6zEadot+6en5mAauUDlj7Kab2XyAGp+VOmv2oJzl+gM7FhgVN1ve41zl8SlliZVqSgYkc7wQTh3yfHpAQDANHKwhsYTb/9/nzQ0ms5uWzStRHaRirRFG1/W1Ko90XjKWSreo8FkFrdHVnhShRMD1a6k8+y+0AZOhWHlYhMAsLWz1hWgiFeqDAUDoGXSCFDzfb0rwK2dduc37yIv0Y6NWLAAAAAASUVORK5CYII=); --sp-race_p_v3:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAACEUlEQVR42sWVz0sbURDHv+81EYoHE0n7QDYSdjEplkI9eZS2F08Wrzl4Cij0b+ipXgWvhh6Ch72KPeXSQr31ZE6CkV3ELMJrg8ZDEH+xPb24P96+zQuxHQjszk7mMzNvZh6BpjBm+HuVMgBg9bgNzj2i83+iC2OVWkjHj79qQakO7PW7zbi+UgNjhj+sn4xOhq2DXak+q+FDC3h/cYrv+05I9+GjhezUEwA59whjhn938gnmnAkAcE9cPJ+61TpDMszZBd/vnpXD5XxoxwIbGciY4RffbAAALn6fKgPrdd1BACooVcEm2TLcox9aczrJlpVdS1UwETUATL8spWYnnlVQmgaLnlGv64Z+svNUQSn+sVBZ+/d5E7mCKe1KlQjbXMFEnzelzUOTZi4I1WkcFWyosbi+mhi8F8rvY+eWK5joth8DSlsEGRXMylfhwMbS4srjh9KrmK03MQ8AcDotWPkqANtPglIl7NLWbgrn0oaVryaORUYFE/tzkMn5GZxOK2S/tLgCY2YW3vlZYLXZflKmI40F5x7RvemlwGh2o84a5x5JKi1N61LRMKKcwUA498jPX98AAMbMLKzi29Tb//9tGlHOcUu0rER22YqyRQdfNtQqm6i/xE0TjCjqTCZJNrLGk2a48GJ3LOU8/LMWA2eCsC/rHQBAvbE1FqDw93mnOFgAoU0jQJ2b7bEA64248i/5pBv4QFaQfgAAAABJRU5ErkJggg==); --sp-race_r:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAACAUlEQVR42q1Wv0vDQBh9CUHpYimoh5J0MFRBOqgdBAcliqtCB4cOuuugf4qT4OrQwU0nq0jRQZDij9kQhyRYooLoItbhHCSSmNzl0vSbkrsv9/Le974vAXoQhKi01aC01aCUEJXycqVegE0PHYTW7l7W4Xlu7NlyVrDlibPI+vTQAVhMpSxgWv9O7J7ztctkqGRh+PC8h/MjK7S2tKojl2c/0zWg57kSISr9NrcwVhoDADyaj8jlO0x2qSRl1STOMMGX6gqQEJWuVRyYdhPzcwbaLj/ftJtMt8ppwHoRchowX64RNZkdAKxVnEgplDRg26sOAKDtIsK4VDSEVJB5Ljy80VAqGrHm4IWvhGk3IyzlJOsHQS+vstdREjHN53vf3/3GoiUkZ6lo4PBGi7SHktR3eqEGC/VQ/ZLCBxPuQ0JUqhdqsN7qAICF2RUuwMnpyd91Lt9hNn1sDYNgvBEVjHJ5EuXyJHL5DvRCjZur8MAIUanPzn2yYTn3oYeDzP/vJbaFKDPPcyXWvue5kvVWh16oMWevnHZYZw0ljZQ+s7h90XrLPpjI9y94fXF9DABQR4vQtSlhRaSgfD67YKPHfVBZOSI+kJOM0E3wTBM7acaHNzE4MIPXj1s4X7sQzfl96TrlNb7SaxcmKSUl/dT+/1UQyRGeNABQrRrRw/bT57DiBx9DQBKNCCQaAAAAAElFTkSuQmCC); --sp-race_r_v0:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAACAUlEQVR42q1Wv0vDQBh9CUHpYimoh5J0MFRBOqgdBAcliqtCB4cOuuugf4qT4OrQwU0nq0jRQZDij9kQhyRYooLoItbhHCSSmNzl0vSbkrsv9/Le974vAXoQhKi01aC01aCUEJXycqVegE0PHYTW7l7W4Xlu7NlyVrDlibPI+vTQAVhMpSxgWv9O7J7ztctkqGRh+PC8h/MjK7S2tKojl2c/0zWg57kSISr9NrcwVhoDADyaj8jlO0x2qSRl1STOMMGX6gqQEJWuVRyYdhPzcwbaLj/ftJtMt8ppwHoRchowX64RNZkdAKxVnEgplDRg26sOAKDtIsK4VDSEVJB5Ljy80VAqGrHm4IWvhGk3IyzlJOsHQS+vstdREjHN53vf3/3GoiUkZ6lo4PBGi7SHktR3eqEGC/VQ/ZLCBxPuQ0JUqhdqsN7qAICF2RUuwMnpyd91Lt9hNn1sDYNgvBEVjHJ5EuXyJHL5DvRCjZur8MAIUanPzn2yYTn3oYeDzP/vJbaFKDPPcyXWvue5kvVWh16oMWevnHZYZw0ljZQ+s7h90XrLPpjI9y94fXF9DABQR4vQtSlhRaSgfD67YKPHfVBZOSI+kJOM0E3wTBM7acaHNzE4MIPXj1s4X7sQzfl96TrlNb7SaxcmKSUl/dT+/1UQyRGeNABQrRrRw/bT57DiBx9DQBKNCCQaAAAAAElFTkSuQmCC); --sp-race_r_v1:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAACEElEQVR42q1VMUvkQBh9CVHYxiWyZk6JIhtcQVJ4x6GwcIhYCoqWW/gDtPZX2NhY2FpsJYiCsBxccXAs2KwW16hkCw0LyQaXS3O4FmMh0cRkJpPNflWY+WZe3vve9w0whCBEp36nRf1OixKiU16uNAywfXU8snbQe4Lj2Il3y3nBjia/xNb31XGwmEp5wNZHRhP3Ll/6TIZKHoanHvDr3IqsrW0aKBTZZwYGdBxbIkSnL/d7KM+VAQDt+zYKRTa7TJKyapJkmPBPDQRIiE7P5itouh42zTK6rs/Nb7oe061yFrBhhJwFLJBrQhtLZQcAZ/OVWCmULGB/fnwHAHRdP8a4qpWEVJB5Lty6vUNVKyWagxeBEk3Xi7GU06wfBj3/285dQ0nENP//fUyUxtKskJxVrYSt27tYeyhpfWeoNVioR+qXFgGYcB8SolNDrcHq1QEAK8sbXIDGz8b7d6HYZzZ9Yg3DYLwRFQ7TXIBpLqBQ7MNQa9xchQdGiE4DdnbnAdbjTeRwmPnnvdS2EGXmOLbE2nccW7J6dRhqjTl75azDOm8oWaQMmCXti9ZbDsBE3r/w9++rCwCAPjUDY3pRWBEpLF/ALtzoSQ8qK0fEB3KaEQYJnmkSJ01F20Vp7Bs8v4XH50OI5rz9dJ3yGl8ZtgvTlIrV5uvESSzpursTcWhajvCkAYDt7dX4ZcfZc1jxCgLlQUUGhAOsAAAAAElFTkSuQmCC); --sp-race_r_v2:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAACIElEQVR42q2Vv2vUYBjHP4mpcBQ8DjRvCdGhwQrlkNrFUcTlJoVOcsNNQlF3tyKl/4C4lMPthltFp0NwcHQ5DyexpIgN4RIPiwciXpU4SEpy+fWmuWdK3veb95vv83yf54UFhBBmMHWHwdQdBkKYQR5WWQTZsmjF1n56AzzPST1brUomrj1IrC+LFllKlSpkJ+fWUveW/n7OVKhVUfjn+xfevrJja3fuWSzVs785M6HnOYoQZnBy8JjVq6sAHB4cUqvPMtWVIsyqyWgyYzT5lIpNI1Zkybp7HVzXZ2PzOv54nIt3XR+A3f2kW9UyZIsItQzZ7v4AAH1lpVAdQHevkyiFVobs5YsnAPjjcUKxYehSWVDzXLi908MwdACePmxJpy3MhOv6CZVqkfWjpKPhx8o1VGRM8+vH+dP33vP7Uuk0DJ3tnR7z7aEV9Z3VaGPTj9WvKEIy6T4UwgysRhv7uA/ArZt3cwkGbwanz7X6jKymT61hlCxvREWj2Vyn2VynVp9hNdq5WC2PTAgzCNU57lfso1Hs46jy+b3CtpBV5nmOkrXveY5iH/exGu3M2auWHdZVQyuTylBZ2r5svdWQTOb+iz6/e/8aANO4gnV5Qzojyvz9Nd/oaRdqFkbGB2qREc4SeaZJnTRr+iMuXthkMh1y9PsZspj/P90P8hpfW7QLizKVqM2NS70E6MO3TsyhRRjpSQOwtXU7eVi3PCYr/gF+ckbnHhGggQAAAABJRU5ErkJggg==); --sp-race_r_v3:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAACEklEQVR42q1VMWvbQBT+pMoBE6jtoPpBUUKRiA2uC22WjCXJkqmlHj108lDav5EfkDXQqYPX0kymkEDHLEmmghMkTCMClwrHLZgSp0EdiowU6U4nW2+S7t7pu+9733tSkEMQGf7neg0A8KZ/BsZchZer5AFG9U5kjfU/ckHVecGebuzE1+sdEBl+rgyJDP/2QS1xr3DHl1Wbh+Hf4QAHX+zI2tZrC4US/8zMgIy5CpHh355/gLlqAgCccwfF0iQf0/Bqcl/Wwt1Z5FIzARIZ/iJtY+Q5MBubGF4NhPkjz+HWUs0ClkeoWcACuZaqT1LZAcAibcdKoWUBW372DgAwvBrEGJd1U0oFVeTCMeuhrJuJ5hBFoMTIc2Is1TTrh0Gd74dz11CRMc2fXwvTd722KSVnWTcxZr1Ye2hpfWdV2rDRjdQvLQIw6T4kMnyr0oZ93QUAvFx/JQTofe1Nn4ulCbfpE2sYBhONqHA0mw00mw0USxNYlbYwVxOBERl+wM69/AH74jRyOMz8/l5qW8gyY8xVePuMuYp93YVVaXNnr5p1WM8bWhYpA2ZJ+7L1VgMwmf9f+Pnb0T4AwHi8Amv5ubQiSli+gF240ZN+qLwcGR+oaUaYJUSmSZw0tep76A/X4P0+xsXNLmRz/l+664saX8vbhWlKxWrz4tGnWNLJz7cRh6blSE8aAGi1NuIf28uew4t/Rmc75C+ebLsAAAAASUVORK5CYII=); --sp-race_rp:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAB9klEQVR42r1Wv0sDMRh9dxTFRRHUoFyLeFYXB38MQgeliKuCiEMH/4A66J/iJAguOnRw001Eiw6CiOhsOYdeqEQHcRJ1iIOk3PWSXK5X/KaQfMnLe3n5EqADQYjD7844vzvjnBCH63KtToDNDB6F+h7eNsEYla5tpwVbnjyP9M8MHkHF1EoDlu3ekY75X7tKhpk0DJ9e93Bx4oX6llZd9PSp57QNyBi1CHH4T20LY/kxAMBz7Rk9fd9KdokkVZ2JzDDBTbUFSIjDN+Z81OpVLBSKeKH6/Fq9qnSrnQQsaWzM+RFl7CRgQq5hJ56daLeCZpKAba/6AIAXigjjfK4Yym0921iGjFHr+D6LfK4oNUe7YcdZPwh6fVNNDWh0Dw8v3YB0Xqycwf7j+2zIqZm4e+f2l+ChEjq/NGGpwNz+Erz3CgBgcX5Fuwht1AEAnv8IAPj86AIAadWxdWC6EqWLqdF1ZYnL6MAIcbhgRxv1JgMRQeae/9icY+RSU2aMUatd5tprEbfTVNfCVErBTDZuytoWYCbvX7B9dXsKAHBGcnCz08aKWEH5BDtha5W1dTlxXrA7YYRW44mCIWMtNc3EUBmF8QNMDJWVi8tyGKOWKBZahv8ZtuxTO9A7CwAY6J2N/DFNchK9FmtrxUjSw755zp+MFa7yxC8zxj3jVYO03AAAAABJRU5ErkJggg==); --sp-race_rp_v0:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAB9klEQVR42r1Wv0sDMRh9dxTFRRHUoFyLeFYXB38MQgeliKuCiEMH/4A66J/iJAguOnRw001Eiw6CiOhsOYdeqEQHcRJ1iIOk3PWSXK5X/KaQfMnLe3n5EqADQYjD7844vzvjnBCH63KtToDNDB6F+h7eNsEYla5tpwVbnjyP9M8MHkHF1EoDlu3ekY75X7tKhpk0DJ9e93Bx4oX6llZd9PSp57QNyBi1CHH4T20LY/kxAMBz7Rk9fd9KdokkVZ2JzDDBTbUFSIjDN+Z81OpVLBSKeKH6/Fq9qnSrnQQsaWzM+RFl7CRgQq5hJ56daLeCZpKAba/6AIAXigjjfK4Yym0921iGjFHr+D6LfK4oNUe7YcdZPwh6fVNNDWh0Dw8v3YB0Xqycwf7j+2zIqZm4e+f2l+ChEjq/NGGpwNz+Erz3CgBgcX5Fuwht1AEAnv8IAPj86AIAadWxdWC6EqWLqdF1ZYnL6MAIcbhgRxv1JgMRQeae/9icY+RSU2aMUatd5tprEbfTVNfCVErBTDZuytoWYCbvX7B9dXsKAHBGcnCz08aKWEH5BDtha5W1dTlxXrA7YYRW44mCIWMtNc3EUBmF8QNMDJWVi8tyGKOWKBZahv8ZtuxTO9A7CwAY6J2N/DFNchK9FmtrxUjSw755zp+MFa7yxC8zxj3jVYO03AAAAABJRU5ErkJggg==); --sp-race_rp_v1:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAB/0lEQVR42r1VMUsDMRh9d5yCS6WlvaicIq3WxUFFEAoi4iIIiuLUn1Dn/gpnB8HJoZNQKjg6CCLooA4urVwRPQqpRbGLoMM5SOSuTXK5XvGbwpcveXkvL1+APgQhlttu3Lrtxq1LiOXKarV+gBXjCV9u//0NlDrcvfWoYAejI135YjwBEVMtCtjGwCB37uz7S8jQiMLwpAWcV2xfbm0rg6Fh8ZqeASl1NEIs9/txD+npNACg/ljH0LCYXShJRXfCM4z3UD0BEmK55ZksrpotbM2m8dpsS+uvmi2hW/UwYGGjPJPtUkYPA8bkSpmxQHZs3AlqhAG7XF4EALw2212Mc2bSV9t5t4EMKXW07WoNOTPJNUevoQdZ3wtaeahHBlR6h+s3Tx7pguX05rerNZ9TjaB3l4nnYaPku78ooYnAMvE87PcSAGBlaVO6idN4BgDYL/cAgM+P3x7L6zq6DEzWomQxO7krbHGGDIwQy2XsnMbzHwMWXub2y/3fGiWXqjKj1NF6ZS59FkEnjfQsVKVkzHjzqqx1Bqby/3nHF9enAABrbAKZ8TllRTSvfIwds7XI2rKaIC/o/TBCp/FYw+Cx5pomaxaQmzpC1iwIN+fVUOporFlIGf5n6J2SzKeOkYwtAACSsQXMp4590qjUhPotdnZWu4ruDtVrfmUsuSJP/AAGNj/IVejCGwAAAABJRU5ErkJggg==); --sp-race_rp_v2:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAACGUlEQVR42r2VsWvUUBzHP4lXQQothTavhCjS03MRaW8RXERcblIoTh1uEooVHN2KlP4HLuXQKcPRTXTq4uDocgYnsaRIG8IlFMWCCK0SB8nRJO+9S3qnXwg83vvlffl+3/f9HowBQjjJUdhLjsJeIoST6GqNcZBNilZm7ke0QxQF0r3NUcnEtYeF+UnRQqXUGIXs5FxDujbx+7NSYW0Uhb++fuHtaz8zd/d+nYlp9T9nJoyiwBDCSU52H7NwdQGAvd09LkwfK9VVIlSdiXd4jHf4SVorIzbKknU224RhzGLzBnG/r60PwxiAja1iWs0qZFXR2WwXnDGrkG1s7QBgzc8PVZeO86RmFbJXL54CEPf7hGGc+fJWqmDqUri67mLbFgDPHrXG0QX1luZJvd7HkQlLXYv2k+3B2H1uFQJk25bUTtu2WF13M0mtDbt39ZkVfLqZ8xsFhoqsPrOC/60LwO2b97SbBOE+AP6BB8DP7+cBpF3H1JHpWpQO1y8/ULa4mo5MCCdJ1QXh/kBBitPK/QNv8E+plJZVFkWBcVblQy8+/wC1KlamymTrZVWbKVmZ9+/0+N37NwA49iXqFxdLO2Lk3y8hnCSNtSraupphWTDHEYR88NKGIVMtDU3DWuPWlZc0rDXl5rKaKAqMtFloFf5PmHlLluZcZqeaAMxONVmaczPWlKmp9FosL98pFH3olK/5a2M3UWXiD1KkS7Qw7iIwAAAAAElFTkSuQmCC); --sp-race_rp_v3:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAB+klEQVR42r1Vv0sDMRh9F1tBCvUHbQNyily1BX+Augguoi6dFMXJ2UH03/CfEJwcuopOLgqOTjoJVu4oeggppepQBLWcg0Tv2ksu1zv8ppB8yct7ed8XDTEEpbpzUiwAADbuK2DM1kS5WhxgtLjjmWP3R0JQEhVsavmgc764A0p1J1aGlOrOZ0/Bdy3ZEsuaiMLwq1HFxanpmVtdzyPZL97TNSBjtkap7nw+7MOYMAAA1oOFvv6PeEwjepN2WZOtiudSXQFSqjspWsJr3YIxuYJGrSrNf61bwrckYcDCRoqWOpQhYcC4XEO5sUB2fNwOmggDNjKzCwBo1KodjAcyhidXVDJE5sImO8dAxvA1R7dBgqzvBrXuLiMDKtVhvfIHpCKne77Jzj1OTQTVXX5wGybKnveLEpoILD+4DfOlDABYWliTHmI/PwIAzKdbAMD7Wy8A+HYdIgOTtShZTI9tCVtcQgZGqe5wdvbz4y8DHm7m5tPt7x4ll6oyY8zWumUuLYugm0YqC1UpOTO/dVXWhIOp/H/u8dX1GQBAHx5FfmRWWRHNLR9nx20tsrYsJ8gLJA4jtBuPNww/1r6mKeT2sDh+hEJuT3i4Xw5jtsabhZThfwZpl2Que4xMeh4AkEnPYy577JFGJSfUb7G5udyRdHOonvMjY9kReeIbNa48jY66WRsAAAAASUVORK5CYII=); --sp-race_s:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAB9UlEQVR42tVWv0sDMRT+IkVwUQrWoKQdPKqrtYObIuKqINKhQycnHfwf/AucREc7dHBTcBDRokNBitZR7A+kdyhRQXQRdYjD2TN3vetd/FV8W5KX9+X78t5LAEWjlIninhDFPSEoZUJ1P1EFS0SytrnSXQacG4HjdKiATQ/vN80nIlmoMA2pMLy42sV3LeRkAcBTosvbNRxsV21zU7Maunq8VXHGC8mLWjj9McoJJyjnBqGUibfyEgbjgwCAWrmGrp5X1wN6xQsFuTt5vLI+L41GAezYfPwSqAmw+pCzNlHKxPKsDgC4MdwDxGPmermeN7MWGcG5QcwYOYmlI0s5N0j1IQctnAalTFDKRCqp47iQV0qKVFK39mvhtI1Ay7JIJXXr1ADQz7xBZL9yPY9UUg8maUMGGax0l8E4dNfgpqSTtiaQiGQt0K3TaNOdduCPrf2AnBtk6zRqk0rV4rFJVzlb1uHmoQYAnl3EywqVBRQq3vtIkIKfGJtpCWJc180a1s/h1wA8GcrFr8JQudP4MZFZNNizgZjF8ley9LN1/ceycCZOI2Eacn6V2Y8w5NwgRyc7AAA2EIMWHfFNMuLH8Pmx0xq7PbZBfNp6h75lMdS3iN7uUdw/nUF/Wf2yT9sYEpVPr/PjG8RHSdK5ueYXo7Sh7iPbO3XrA4OuA2DHAAAAAElFTkSuQmCC); --sp-race_s_v0:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAB9UlEQVR42tVWv0sDMRT+IkVwUQrWoKQdPKqrtYObIuKqINKhQycnHfwf/AucREc7dHBTcBDRokNBitZR7A+kdyhRQXQRdYjD2TN3vetd/FV8W5KX9+X78t5LAEWjlIninhDFPSEoZUJ1P1EFS0SytrnSXQacG4HjdKiATQ/vN80nIlmoMA2pMLy42sV3LeRkAcBTosvbNRxsV21zU7Maunq8VXHGC8mLWjj9McoJJyjnBqGUibfyEgbjgwCAWrmGrp5X1wN6xQsFuTt5vLI+L41GAezYfPwSqAmw+pCzNlHKxPKsDgC4MdwDxGPmermeN7MWGcG5QcwYOYmlI0s5N0j1IQctnAalTFDKRCqp47iQV0qKVFK39mvhtI1Ay7JIJXXr1ADQz7xBZL9yPY9UUg8maUMGGax0l8E4dNfgpqSTtiaQiGQt0K3TaNOdduCPrf2AnBtk6zRqk0rV4rFJVzlb1uHmoQYAnl3EywqVBRQq3vtIkIKfGJtpCWJc180a1s/h1wA8GcrFr8JQudP4MZFZNNizgZjF8ley9LN1/ceycCZOI2Eacn6V2Y8w5NwgRyc7AAA2EIMWHfFNMuLH8Pmx0xq7PbZBfNp6h75lMdS3iN7uUdw/nUF/Wf2yT9sYEpVPr/PjG8RHSdK5ueYXo7Sh7iPbO3XrA4OuA2DHAAAAAElFTkSuQmCC); --sp-race_s_v1:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAACAklEQVR42tWVv2sTYRjHP1eC0KUlJb3TcnZI8LI4qAhCQERcnCzp2ME/QOf+A65dHHRwdcgkHHVwcxBCoA6xQ5e2NAR7BN70SDAURB1ehzTxvbu8uXvjj+Czve993+f7fp/3+zwHhuE4rhx0mnLQaUrHcaXpecuUbDu/Etnb6fcQIsicZ8GE7OWVy4n97fwKJkpzJgrfhT1+N3JxFYC2RG9CeL97Etl7sFFicVlflXi+nPqxlN+6WNVknFSIwHIcV/44fkrxWhGA1nGLxeXvEy+oy5fL8nbquvGiToO6FpNmoAThSb82PuQ4rqzfvQ3AWXcwMYFvF4YX6YZD14IUIrCGOWqKyhhhFFCTAH7ZY/egxcb1YmZT+GWPKkiAUn4rImBqW/hlb3xrgFV7SUui4hrdEL/sZW98x3GlSrbT76GWVU0OULELEexoMFTsAtXDo8SbLvCPY/6EQgRW9fCIyoX7ZgldOaf24cOPbQDtFNHFs/Y5tM+156wsDX/vzqOpJEHn87CHT/dJGwBahWrzmyg0njRpSlQVI/Xu2vpY5V9x6a/R9T+2Rdw4I8OMyjmrsj+iUIjA+rD3FgB3bZ3S1RupJrPSFH79cmm8nvSzzYKZ6xumtoVnP6GwdItw0OT02/OZMXNTOHW03Vx9ndj/dPY4MoXSMEYl3dy8n0z2yhyjxk9TAwDSCZ6x+gAAAABJRU5ErkJggg==); --sp-race_s_v2:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAB7klEQVR42tVVPUhCURT+XmggQRKUNx4vB6XawlwaI1qaChwbnAKhoDFaHKSlsS2izeHRFjW5FNTWYo5BKVGPR9ckSYjIgtdg167vx+sVQzogeI/nfp/feec7D5AMQjSrZuatmpm3CNEs2fuKLNkQWWrJvdEcKDU6xhmQISPTa478EFmCjFKfjELj7tI175fA8NlVAPBs0dfLPc5Oii25xZUo/EHvrtjxfPyP0ZHVn5Nu2UkpNRRCNOvzdgORyQgAoHRbQiBYd/2DXni+Tp4dfy5U6ihUbjxrRAPkICxW9eYlQjTr+HALAFB+enIFONhJAgBMswwAyOznLEoNpYGhcypdbMHaUKzqTTDTLCMWn/EkZMEIVTWEVDoLAGBYvGpPWzAyFqHxcSEZ+85UC31IqaEUq3oLWWY/5wDnP3ywWkZqVydl/F5F/wkpNZRUOgtVDXUNygbHzSKePkxuHgEAAkE5su3d87b3lE4MPz+33H7Hmg8NDz8WIFoAngp588solN40IiW8CqZeU8NNlX8ypb+r6z/awj44bGBYO7tV1hOFlBrKxdUpAEBTw4hOxIRDpogUvr8ONs9uL9tOavr6DIW2mAqtY3Q4jkotj8ePva5r+qaw7WqbHcs68tfPyZYtJKqRamkiseAEO5Cv4eMbPtIOnMJPjqMAAAAASUVORK5CYII=); --sp-race_s_v3:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAACCklEQVR42tWWv2sTYRjHP1cToQRMKmlfKNciF0xAEdTFUVqXG6SlHTs4dRD9N8TZVXByuFV0ymKhbi61k7QpOYI9hFePmApFtC3nkCZ971fu3qIGn+1973m/3/f7/HrPQNOEMINXjToAK7stpPQMnfOGLplorIf25O4LLdIJHbLrC0/i+411hDCDvDgFHYXb714m7hc1MApRFUBqiI67Hd6+bof27i3XKJbToxLFK6gfa1NrpysniJJK6RlCmMHR3mOsqxYA7p7LZPlX4gXT8Ap5cqeu7z/dAXZC4VR9sgooRtj+5gwPCWEGczceAtD90kmB6Kvt+e7pBQmk9Iw+hqOojBCGHZwAoCRs3I8bWNcWcxdFSdgImgFAbWotJGBkW5SEPbw1wOWZK6kkql/PdykJO19IBypVsuJJC1hMBAeoVK2zfJ60OLpQp+e7VIRNWzqxnE7wj238hFJ6xqFshkKla5WqxaFsJrZIah/6rY1+Xsp6ZMfdDn63w2RZ87VQm/nunaWRJN7nT/0e3t8mawCkKlSbX0eh9qTJUqKqGKg3Z+eHKv9KlZ6Nrv+xLaKFMyiYQTjPq+yPKJTSMzbfvwHAnJ2nNnczs8iMLIU/Di4O10mPbR6fseYwsy3qM4+oXrqN/32L/Z/Pzu0zNoUjR9ut6fhv4YevD0JTKMtHK6SrqwtxsOf6Pqr9BvpU/Ka3JrnIAAAAAElFTkSuQmCC); --sp-race_t:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAB70lEQVR42r1Wv0vDQBT+cgTBRSmoQUkzGKKrP4aOUsXVgoNDB9118F9xEhx1yOCmILSKFh0EKWpHMUSkCcqpILqIOpyDpCTX5JKr2AeB3PHufffd+967AyRN03RWrzJWrzKmaTqTXa/Igk0O7kTmrp+XQamfOQ6RAZsfP2qbnxzcgQxTVYbhzf0B/mpSgLdPmzjecyNzcyUTvf3/AEipr2iazr6dNYxaowCAO+cOvf1fUjlUsuSOzxkvGn5jHQNqms7WSx4A4NEXb8xp1jKplojAlqY9nJ3XpESxNO0JVUtEYMGuAWBYT2cX/ItASRoYnyOnWYt8cfkUgRJ02Uic/Hcv87CMYqwqRRb4WkYRu5f5WPGQpJoLg8oIRwSWqSw+3npa45VZty1vllHE9onZGqc1AkUEZubKcF9tzBQWhKz8hyYAwPUaCNYkgZI0MFlzX22YuXJiWagisKB/hpm4XiPiP1NYgD5itFj+MrOZmSsDsBnPtKOyoNRXZBp2IiDPrtNao9RXko6WpKk0EExwnOGNUOorpxf7AAB9xICZn0i9/bveaVT+OHmrHFZCNRYfROTDi0eNXpw2y3KJZs1jXDw17bYeG1rFQN8UXt6v4H1uxAZP8sncS//TFJlHL/+EyOIj9WpbXCy2B9uS9wnbD+jlJC/szWM+AAAAAElFTkSuQmCC); --sp-race_t_v0:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAB70lEQVR42r1Wv0vDQBT+cgTBRSmoQUkzGKKrP4aOUsXVgoNDB9118F9xEhx1yOCmILSKFh0EKWpHMUSkCcqpILqIOpyDpCTX5JKr2AeB3PHufffd+967AyRN03RWrzJWrzKmaTqTXa/Igk0O7kTmrp+XQamfOQ6RAZsfP2qbnxzcgQxTVYbhzf0B/mpSgLdPmzjecyNzcyUTvf3/AEipr2iazr6dNYxaowCAO+cOvf1fUjlUsuSOzxkvGn5jHQNqms7WSx4A4NEXb8xp1jKplojAlqY9nJ3XpESxNO0JVUtEYMGuAWBYT2cX/ItASRoYnyOnWYt8cfkUgRJ02Uic/Hcv87CMYqwqRRb4WkYRu5f5WPGQpJoLg8oIRwSWqSw+3npa45VZty1vllHE9onZGqc1AkUEZubKcF9tzBQWhKz8hyYAwPUaCNYkgZI0MFlzX22YuXJiWagisKB/hpm4XiPiP1NYgD5itFj+MrOZmSsDsBnPtKOyoNRXZBp2IiDPrtNao9RXko6WpKk0EExwnOGNUOorpxf7AAB9xICZn0i9/bveaVT+OHmrHFZCNRYfROTDi0eNXpw2y3KJZs1jXDw17bYeG1rFQN8UXt6v4H1uxAZP8sncS//TFJlHL/+EyOIj9WpbXCy2B9uS9wnbD+jlJC/szWM+AAAAAElFTkSuQmCC); --sp-race_t_v1:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAB+0lEQVR42r1WMUvDQBT+cgTBRYnUREsUMVhXFVEoiIiLk6JjB3+Azv4KFxcHV4dMguggRXAQpKBDdXCpkiI2FK4Gi11EHc5BUpJrcslV9EEgd7y87333vvcugKQZhsla9TJr1cvMMEwm+70iC7ajDYT2dpuvoNRNHYfIgO0PD3Xs72gDkGGqyjA8817xW5MCPPKAixMntLe8ZqG3/w8AKXUVwzDZ1+M2xifGAQDVxyp6+z+laqikqR1fM140fGJdAxqGya4WZgEAL42WMLFSw0ulWiICO57M4eS+KiWK48mcULVEBOZnDQCDel8iO/9dBEqSwPgalRpe6ImqpwiU4J+NRMl/vfKAvJ6JVKXIfN+8nsF65SFSPCSu54KgMsIRgaVqi/e3nva6ODfWUbe8nsHKzVN7nTQIFBGYpRXgNG0szq8KWbn1ZwCAU7uD/00cKEkCkzWnacPSCrFtoYrA/PkZZOLU7kL+i/OrMLOjbZY/zGxmaQUANuOZdtUWlLqKzMCOBeTZddtrlLpK3NGSJJX6gvGPM5gIpa5yeX0KADCzo7BGphJv/3+fNCp/nLwVz4uBHosOIvLhxaOGL06bpblE09YxKp6adFvn9C1k+mbgtcqofexFBo/zST1L/9KEo2168LBj//Zls515Gh+pv7aNjaXOYAfyPkH7BgatJCHMZvirAAAAAElFTkSuQmCC); --sp-race_t_v2:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAACBklEQVR42r1WO0vDUBT+EqIggqWgvRKiQ4O6ibo4irg4KThJh05CQcHRzUH8A+Iixa1DcBOdiuCgm0sNTkJNERuCV4vFgogPiIMk5HmTK9gDgdzDyfnOd+55BOAUQhS7Y9XsjlWzCVFs3u8FXrB+sujTvdEqKDVT+xF5wMjEWkjfTxbBw1TiYWjeXUbqezh8cAF+v9zj/MTw6RaWVfRk/gGQUlMgRLG/6hvIj+UBAI16A32ZT647lNLcnfestz6ht25jbZLAhSSw48MtAMDT4yMzMMt6AgDsHLCrVmSBlXeL0Gs3XH1W3i0yq1ZkgTlRA0BueDiRnfPOAhWTwHYOqiHn3scrji0LVESXRUiT0qmZSbdwgqxkORepK21XIotHjOu50nYFspz7bQWOwmGBpWqL99de91zZX41kU9w8cs9Jg0BgganZAoy2hrnZJfaMtR4AAEZTh/NNHKiYBMYrRluDmi3EtoXEAnPmp5eJ0dR99nOzS1DkUZflLzPNVrMFAJodZPqntqDUFHgGdixgkN1fe41SU4hLrZhUpU7BOOn0BkKpKVxcnQIAFHkU6shU4vbv+qSRgukMSvWs6umxaCcsm2DxSP7Fqdlplmjae4zyJ4WN/DKeW8fgwAxanRqaH3uRzuNsUs/Srm8L506nhyoh/fVz0Y08jQ3XT9TKynzYWZnfxis/IqExwPIkSLoAAAAASUVORK5CYII=); --sp-race_t_v3:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAACEklEQVR42r2Wv2vbQBTHv3dVAiFQ20HxgVFCkKhdWgptl4wm6ZIppR49dPIQ0n+jf0DXQqcMWkMzmUIL7dYl9VSIjUSwReASY6eFUJI0KJMc/TiddIb4gcE6P7/Pe/d+iUBRGDP8/VoVAPDmqAvOPaLyf6IKY7VW5IwffVKCUhXY0433yfNaC4wZfl47mkqEnR97wvM5BRtKwP+jY3z97ETOXr22MFe4ByDnHmHM8K9772A+MgEAbs/FQuFKKYckT+7Cz9cPqtHrvOkmHJsayJjhrzzbAQCMTo+ljp0P3YkDMiiVwRbZFtzf35T6dJFtSauWymCB1wCwVF7LjC74LoPSLFg8R+dDN/IR5VMGpZixUFH5X/A2iroprEqZBLpF3cQFbwuLh6b1XBiqUjgyWK62+PdnfvKsVzcTeSvqJobdO4eyBoEmg1mlJhzYqK9v3/2w9jih680/AQA4gw6sUhOA7adBqRQ2tpWLwhnbsErN1LbQZLBgfk4iOenDGXQi+vX1bRiVVXgn/dBos/20SKdqC849orrphcB4dNP2GuceSbtamlWlQcEE1xl2hHOPfP95AAAwKquwVp5nbv+ZTxotfp1xaX9ph3pMbESmEy8eLbo4bT/PEs2bR5E9LWtbV8u70B++xPDvIQaXH4TG03Ryz9L7FCKr0BfLydfCX2dvJ57n0VF6a2s0NpLGPqrrhOUWLSMd5zeXce0AAAAASUVORK5CYII=); --sp-skier_idle_a:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABX0lEQVR42rWUv0vDQBTHP5FQ6BQcQpZ26uCcyU0RcbXQ0SGT4Ohf4OTcwUWwU8ngWKggtIqIiyCFdhV/gNhAOeOii9DlHOzFhvzo1eJ3yr177/vy7vu9A004Tkn2ulL2ulI6Tknq1hm65K7tx2KD0EOIYGb9kg751splIu7aPjqTmDoT3L+c81doNXh4O+aq/RyLbVYrFK0FG6gjKFpjytRje0VrHOXkaWFMk6lERbxfHQIwCtKLH1+vI8EBpuvVt6kCleUd4FQqAeeByh/gSQDFJURgmJnJoccaw9ifZmEQeri2j2v70TTaNl0UiQlun3YnIs5HlFWXaKDcIURgHLXLEmB9dRuAm7sz0tZCBEbWpUsckRCBoRyg8xRM56blm1neV/j6KNC56ExWBYDYetZzEfn2cO/HMa2WnmPyUKttAHBwUv6doNGsawv6/tnP3W80++k3WYc8T9Asff4V386emKzbDirYAAAAAElFTkSuQmCC); --sp-skier_idle_a_v0:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABX0lEQVR42rWUv0vDQBTHP5FQ6BQcQpZ26uCcyU0RcbXQ0SGT4Ohf4OTcwUWwU8ngWKggtIqIiyCFdhV/gNhAOeOii9DlHOzFhvzo1eJ3yr177/vy7vu9A004Tkn2ulL2ulI6Tknq1hm65K7tx2KD0EOIYGb9kg751splIu7aPjqTmDoT3L+c81doNXh4O+aq/RyLbVYrFK0FG6gjKFpjytRje0VrHOXkaWFMk6lERbxfHQIwCtKLH1+vI8EBpuvVt6kCleUd4FQqAeeByh/gSQDFJURgmJnJoccaw9ifZmEQeri2j2v70TTaNl0UiQlun3YnIs5HlFWXaKDcIURgHLXLEmB9dRuAm7sz0tZCBEbWpUsckRCBoRyg8xRM56blm1neV/j6KNC56ExWBYDYetZzEfn2cO/HMa2WnmPyUKttAHBwUv6doNGsawv6/tnP3W80++k3WYc8T9Asff4V386emKzbDirYAAAAAElFTkSuQmCC); --sp-skier_idle_a_v1:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABZ0lEQVR42rWUP0vDQBjGf5FQ6FQSkCi0i/0EguCiiLhb6Ojg6ifI6KJj6ehgp+LgJAUdpAgioggu8RMIgqFwbUgxCEKXONiLDfnTq8VnunvveZ+79573DhRhWeUw6Dlh0HNCyyqHqnmaqrhtmLFYY+gjhDs1f0FF/GR5KRG3DROVSnSVCq49n79CaYMLD24vX2OxnVqVYmnODeQVFEsjKjRja8XSKOLkeaFNikmiFH7cXANg0A9Sk5/6XmQ4wGS+HOsyUDX2gPNQGjgLJL8BIYDUEsLV9Ezy0KfGSuykWWgMfWzDxDbMqBrlNp0XiQqO3j7HJs4mlJWX2EB2hxCutvHwc6db67sA3D9fkTYXwtWyHl3iioRwNdkBKl/BJDeNr2f1vsTXR4HuTXc8KwDE5tO+i6hvjw/eAeh07nJP/DLYZ3XxLJdTr28DcHha+a2g1W4qG+oFTu56q+2kv2QV8TxDs/z5V3wDip6XEO2MK4gAAAAASUVORK5CYII=); --sp-skier_idle_a_v2:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABZklEQVR42rWUMUsDQRCFvwtJIKQIFrJNUqWwtrIUsUmlmNLCShH/gNiIBBsRUgdjEywsI1odgop2NucfUBA8jmwUwYAIQVgbN+a4vcsGycDB7eybNzP7ZhcsTYii6gWe6gWeEqKobOMcW/K8qIR8n9JFSn9kfMqGXMysR/x5UcGmk7RNB/7jndGfsYi1SvD9/szV+VPIt7hcJlP4ZwJ9BLlCnxL10F6u0B9gkrRwhsk0UBOfHW8D0O10jMFB0AWg1nABGI7X/2ntKE+tAqcKYG+rwjim8bWGqwA0l5S+k0oAhyo1fdo01lRYiglbROSdg+tfEccjiouLJNDTIaXvrGwcKoD5uSUAbu8vMK2l9J24Sxc5Iil9R0+AzVMwjDXh03Gzr+3rI4t7qQXPAoTWo56Lwdzub74A0G7fJFb88LrG7PRJIqZaXQBg96j010GzVbcW9K3nJe43W575JtuQJwkap89E7QeGDqOe7jKSPgAAAABJRU5ErkJggg==); --sp-skier_idle_a_v3:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABaUlEQVR42rWUv0tCURTHPzefgpM0xF10Ep5DNDQ1htVc5NjQJNQ/0VSre0mDODQaNUkQUVuLtSoUQm+5JVItgSav4XXNl+89b0hnuufc7/n9vVdgKFKm3dOcDcBms4VSjjDxE6bBZa7os6nmsVGSGZPg8/mDcXuuiJRpd5K/ZdLB/U010B438DVK8Nltc3n24LOtbmSJp6ZMoEeQTPXIUPLdJVO9ISZqF2I0mAbqwJmFXQC6z+1A59fOozeqQctb/Ii/PlvakJ3dAk5cgH7M5i+i8VLiAuhYSjnCCgN7Va34Kg2T+KBFP2bTj9nDboxpOq1YQYwBjBhi4jeWQLPDW9KhC7C2tA7A9e05AMu/dKUcEfboxkaklCM0A0y+glFsEN4K476Wj7cE9Yv6t5YA8OmTvoshb/d3ngCo1a4iK7572WZxrhqJKRTyAOwdZX46KFdKxgvtvDci78uVRvBLNgketdCw/fyrfAHLuZVocl317AAAAABJRU5ErkJggg==); --sp-skier_idle_b:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABbUlEQVR42rWUv0vDUBDHP5FS6CQOIUsLQgUXl0yCi6i4WihODnERHPsXODl3cBEsDiWDY6GC0CoiLoIU2lXUgthAiRWkLgWX55CmNml+vKJ+p3f3jvty9707kISmpYWmpQV/AX8yTUuLRl2IRl1MTaIEJR/0kwCkZr8A0FXTE9PqGdi2pcgQzAQ5l+a3WVk4BWBz8WriX1dNZCtJxAU8vFz8qt2xBI9vx1xX2x7fRi5LatZpZ1yrIgkKuQ5dCzIUPf7d9TZPrzeOHhgC8GgyTqz4Bc7O7dD+OKOQ6wDQtYLJXQK/8OM5bNtSYlvkT+RHq2egqya6ao6qiZ2iadHqGYHjLCWyLO6e94a7E0Lg791RNTMqd3V5C4Db+/MJ2xUzbC9CW2TbliK7rVHxibBb5L4H/SS1y9rQck7IuB230aPyDvedsaxU5KYmCvn8GgAHJ5mfCkrlorSg75/NyP9SuTl5TWWPl7tMsrH8N74BHUqeNY0efgIAAAAASUVORK5CYII=); --sp-skier_idle_b_v0:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABbUlEQVR42rWUv0vDUBDHP5FS6CQOIUsLQgUXl0yCi6i4WihODnERHPsXODl3cBEsDiWDY6GC0CoiLoIU2lXUgthAiRWkLgWX55CmNml+vKJ+p3f3jvty9707kISmpYWmpQV/AX8yTUuLRl2IRl1MTaIEJR/0kwCkZr8A0FXTE9PqGdi2pcgQzAQ5l+a3WVk4BWBz8WriX1dNZCtJxAU8vFz8qt2xBI9vx1xX2x7fRi5LatZpZ1yrIgkKuQ5dCzIUPf7d9TZPrzeOHhgC8GgyTqz4Bc7O7dD+OKOQ6wDQtYLJXQK/8OM5bNtSYlvkT+RHq2egqya6ao6qiZ2iadHqGYHjLCWyLO6e94a7E0Lg791RNTMqd3V5C4Db+/MJ2xUzbC9CW2TbliK7rVHxibBb5L4H/SS1y9rQck7IuB230aPyDvedsaxU5KYmCvn8GgAHJ5mfCkrlorSg75/NyP9SuTl5TWWPl7tMsrH8N74BHUqeNY0efgIAAAAASUVORK5CYII=); --sp-skier_idle_b_v1:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABcklEQVR42rWUP0vDUBTFf5FSKAglAYlCC4WuLkLRxSLiriBODq5+gow66Fg6OtipODhJQQcpgohYBJf6CQqCpZA2JDQIBZc4tGmbNH9eUc+Ud9/lntxz3r0gCFXNOKqacfgL+IupasaxO03H7jTnJpGCig/6SQBS6W8ANFnx5JQsE11vSyIEC0HB1dwBp7lFAC5WlmfuNVlBtJNEXMK9Yf5K7liCGwMeb1ue2M5enlR6KGecVJEEjWKBXtcmS9kTr6/neO0aQz/AATyeTBNLfoPz8iEt65pGsQBAr2sHkrsEfuOna+h6W4qVyF/Ij5JloskKmqyMu4l9RfOiZJmBz1nIZFGcfXyNZieEwK/d5suk3a2NXQCe3+5mzq6ZYXMRKpGutyXRaY3KT4TtIvd70E9Sf6iPTsMVMn2Om+hxe+fHnwDUak+Rf/reO2Jt6SoyZ39/G4CTy+ykg0q1LGyoYTcj7yvV5uw2FV1e7jCJ5vLf+AHGsZyX9WeiXgAAAABJRU5ErkJggg==); --sp-skier_idle_b_v2:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABeklEQVR42rWUv0sCYRjHPycqhIM0xC0KgUNLS1NjVItTkTREQ1MR/QPiEiEtEri0SLqIQ6NSkwQVtbVc/0BC0HHcWRQKIURwDefZqffjDeyBg3uf9+H5vs/3y/cBwZDlhCnLCZNJxGgzWU6YXU0xu5ryZxDJrXmvEwVgKv4FQExOD9V8Gk0MQ5VEAEJuyfnZTQq5FQtwbnfsPianEZ0kHFSgPt275iOCFAUCfL8/c33RGsqtrqeIxC06g6jyBWhUsrR1nSTFoXztdAtNawOQLzVNYEgTJ7A0KnBqepvWxzmNShaAtq67gtsAduRLlvDOHoahSqEgijSt7fo5GwMcHbgLH5qEb5wgfxZZNHKFm753PABGudvYOxmMu7S4BsDdw+XY2RbTyxeeFBmGKom61a8+7LWL7P9eJ0rzqtk/WSvEeQ5y9GC84/0XAOr1W9+XPr7usDBT863JZJYBODxL/k5QrhaFBX3rKr735aoyvk1Fl5dtJtFa/jt+AFxIrNMTu+IXAAAAAElFTkSuQmCC); --sp-skier_idle_b_v3:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABd0lEQVR42rWUv0sCYRjHP5ee0CRFcYsHgnAO5dDUGNZeJE0NTUL+E021upc0iEOjUZMEEbW1WGuCIeRyJle2CKnYcL7m+ePuPaLv9jzvw/O8z/f7PA9IQtMifU2L9PGJ4KxkAKZZV4R9GTcA2IW+8MtAmZa83QoBMB/+tn3xtCPGfDlHtsjcNOdqdI/gYhSAleTJZIfxNLJ0Bb0Cnh8KU/3qXzQYRdeqcXtVdfi2dmKoYZtOL6pcC+iJDFajhk7W4V8yNvlsvg40wzEQQkdhK+MCxxb2qX5coCcyAFiN2tTiosCQsl4F06wrozlMs654UjSeaEKLXoVOwKATMIbdeE6RX6i9CgCdgOFfZFl0LZtKNTyjwDh3cNoX47ixvg3A/eM1jNmj2y69aGIq/JyEWfGutwig3QpRuikNLPuEjNpeGz1s7/jwDYBi8c71p0/vB6wtF1xjUqkkAEdn+m8HuXxWWtDmV9n1PZcvT15T2eMllkk2lv/GDzT8mQhuZ/RMAAAAAElFTkSuQmCC); --sp-skier_idle_c:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABYklEQVR42qVUv0vDQBT+EqSQKTiEWxIQOri4ZBIcFBFXheLk4CT4Vzg5d3AR7FQyOBYqCK0ixUWQQl1FLRQNyKkgdhGCcA56Mblck9f2m3Iv7/f33gOIYMwV3bYQ3bYQjLmCamdQnftOkJLdvu2A87DQ3qQ4X5+/yMh9JwClkhlKBXeDM0wKUoD71yNcNvsp2dpmGZY9RgDGXCF7qpZu2RE8VKHKVN2kvfyOBeXZbfQ/TuL+AsDy0ioA4CXUZ/fw1MkQDwDSF+ehYerISypTIHXVSctwMMq5mumoIL4TwHcCDL9b+gDXj7t//Z1sYqT9wtyWfg8sO4JlR6QFUsF5aEj73DGVzjkPjcOmJwBgZXEDAHB1cwrdO2mjTqBZlBUl87EWTc3g67OE1rkkrQQAqXfRuYj34GDvGQDQaHRI05KHSuV3f/aPvf8KavUqmdD3YS/3f63ey55r6o3XETkNh1PjB2r+m3O2qL9PAAAAAElFTkSuQmCC); --sp-skier_idle_c_v0:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABYklEQVR42qVUv0vDQBT+EqSQKTiEWxIQOri4ZBIcFBFXheLk4CT4Vzg5d3AR7FQyOBYqCK0ixUWQQl1FLRQNyKkgdhGCcA56Mblck9f2m3Iv7/f33gOIYMwV3bYQ3bYQjLmCamdQnftOkJLdvu2A87DQ3qQ4X5+/yMh9JwClkhlKBXeDM0wKUoD71yNcNvsp2dpmGZY9RgDGXCF7qpZu2RE8VKHKVN2kvfyOBeXZbfQ/TuL+AsDy0ioA4CXUZ/fw1MkQDwDSF+ehYerISypTIHXVSctwMMq5mumoIL4TwHcCDL9b+gDXj7t//Z1sYqT9wtyWfg8sO4JlR6QFUsF5aEj73DGVzjkPjcOmJwBgZXEDAHB1cwrdO2mjTqBZlBUl87EWTc3g67OE1rkkrQQAqXfRuYj34GDvGQDQaHRI05KHSuV3f/aPvf8KavUqmdD3YS/3f63ey55r6o3XETkNh1PjB2r+m3O2qL9PAAAAAElFTkSuQmCC); --sp-skier_idle_c_v1:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABZElEQVR42qWUPUvDUBSGnxQpZAoJSBRaELt2cXIRRNwtdHRw9Rdk7KKjdHSwU3FwkoIOUgQREQSX+AsKgqFw29BiEIQucWlqe/PR2/ZMuSfnPec9n6Aotl0Ig64bBl03tO1CqIrTVJ07pjWjuxgOEMKbi8+pOL/c3IjpHdNCJZM1lQwe/AHLilKAWx+e7jozusNKCd1YIIBtF8KopnLqujGiSB1ZJ9tO46PviaJkHtMZ3kzqC1ApbwPQ7wWJ7N56fqzxAJEvITwtl9S8aWMViWzlSYv1IM25zDQtiGNaOKZFKy3A2efPuL7LTUyEL2+l7IFujNCNkdICySKEp0X4zDGNnAvhaXuvhAD7u0cAvLzfk/SexsgTmJvHSoX5QosmM/j9ztN+bI9feYCZ97xzMdmD89MvAFqt50zGH/0TdtavM22q1QMAalfF/wwazbpyQ/3AzfzfaLrxc61645MauUoPV5Y/8OaZLY17+fcAAAAASUVORK5CYII=); --sp-skier_idle_c_v2:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABbklEQVR42qWUPUsDQRCGnxMTCCkOC9kmASGFjYjaWIrYpFIMVhZWivgPbETERoTUYqpgYRnQKggq2tmcf8CA4HFkoygGRAjCWejG3OWSTMzAws3cvPOx7+yAUJRK+XXP8eue4yuV8qU4Sxo8qbIB24cuo7XbEz8kCa7G19vsSZVF0smwpAP34TbSHhNgRQm+Xh+5PKsEbAtLGWJ2HwmUSvnmTsOtJ+wGafKEbWHfVrz5bhoyI6tU3k4B2N36IXRqZhKAWrUaWZ3n1QL63lEZABNLa9dqI9kEN84SMb4G23GKOgX3vFrkkSQJkLx9cPV7v/xLDH5ibCW6g4TdIGE3RA8oLFq7lsF3HVMTXGvXWt449AHmZhcBuLk7J0pvxYQncKhXVZLK+3po4Qo+3+OULwzpcYCA3mtdNN/B/uYTAKXSddeK75/XmB496eqTy80DsHOc/uugUMyLCX2pO13/F4pO+7qW7vgoIgfhcGD5BoHopcWxdKrfAAAAAElFTkSuQmCC); --sp-skier_idle_c_v3:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABa0lEQVR42qWUv0tCURTHP89f4NKjId6iS4JCTUHQGFZzkWNDk9Bf0VSre0mDODQaNUkQUVuLtSoYQi6vxH4sgRavwa757vM9j3SX+85553t+3O85x0B4LCvhnGXSAGzXG9h225DgDKlzK5N36ez6iShISOJ8MXvo1WfyWFbCmYSPSCp4uC2P1UcFWFGAr26Lq/OmS7e+lSJqThHAshKOelO99LjZI0kBXafbjuLV91CRmt2h+XoKQD886Jb5hTUAus+tsdm9dR7dT/bdAED5su224SFZOVfGkqNsFdaXAz/neqZ+QfrhtCdIRCcTEJHn1wwAzCyPn4O42SNu9sRT6ho8u20ofGCbKueD+8gB2FjZBODm7gKAVU0exegdGJqUlSTzqQZNz+DzPUb1svorxQBc8qR1MZyDg70nACqV68CM7192WZorB9rkclkA9o+TfxUUSwUxoZ2PWuD/YqnmXdeSzehH5H84/Pf5AS2Al9EVxzE7AAAAAElFTkSuQmCC); --sp-skier_idle_d:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABY0lEQVR42q1Uv0vDQBT+IqGQxeAQbkkWO3TO1M0i4tpCR4dMgqN/gZNzBxfBTiWDY6GC0CoiLoIUmlX8AWIDco2LLkKWc7CXJu3lvFi/7d5973v38r0XoAAIsdlwwNhwwBghNlPJ0YqIu5afiQWRB0pDqcaKqvh25XIh7lo+futEV+3g/uUcf4FygYfJMa56z5nYVqMMw1yyAP8EhhnDQStzZ5hxwsnzQpsX40QuvN8YAwDeQvEDHl+vE8MBIJ1PaajpafHy2g6AU8YNLALOD+AxAOBaupQcedjAOPPSPASRB9fy4Vp+0o3ymC4DYQe3T7tTE4uJifKEBfh0UBpqRz2H1ap1rK4DN3dnAIBatQ5gduZc0dIJC8jW/+ujhP5Ff3oqwTDjhD8/gbkF0gSRoIwv3ANCbHa49zMt3a7atMjQbG4CAA5OnFkH7U5L2cz3z5H0vt0ZLW6y6v89z8yiXv4bvgF9yJNdIWyIBwAAAABJRU5ErkJggg==); --sp-skier_idle_d_v0:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABY0lEQVR42q1Uv0vDQBT+IqGQxeAQbkkWO3TO1M0i4tpCR4dMgqN/gZNzBxfBTiWDY6GC0CoiLoIUmlX8AWIDco2LLkKWc7CXJu3lvFi/7d5973v38r0XoAAIsdlwwNhwwBghNlPJ0YqIu5afiQWRB0pDqcaKqvh25XIh7lo+futEV+3g/uUcf4FygYfJMa56z5nYVqMMw1yyAP8EhhnDQStzZ5hxwsnzQpsX40QuvN8YAwDeQvEDHl+vE8MBIJ1PaajpafHy2g6AU8YNLALOD+AxAOBaupQcedjAOPPSPASRB9fy4Vp+0o3ymC4DYQe3T7tTE4uJifKEBfh0UBpqRz2H1ap1rK4DN3dnAIBatQ5gduZc0dIJC8jW/+ujhP5Ff3oqwTDjhD8/gbkF0gSRoIwv3ANCbHa49zMt3a7atMjQbG4CAA5OnFkH7U5L2cz3z5H0vt0ZLW6y6v89z8yiXv4bvgF9yJNdIWyIBwAAAABJRU5ErkJggg==); --sp-skier_idle_d_v1:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABaUlEQVR42q2UsUvDQBTGf5FSyBQSkKi0iwV3QeiiFHFvwdHB1b8go4uOpaODnYqDkxR0kCKIiCK4xL9AECyFtCHFIAhdzqWJTXuJifXb7t33vnfvvnsHGWCaBeH3bOH3bGGaBZEmR8kibulGJFYfejhON1FjIa34yfLSTNzSDX7rJJe2g2vX4y9IXeDChdvL10hsp1ZC1eYsEFyBqo0o0ojsqdoo5MR5oUyLBcRA+HFrA4BB35ce4KnvhoYDTOY7TlfJTYqX9D3gXAQGZkHAr4MACLRyieShR43VyEnjUB96WLqBpRthN6mf6TyQdnD09jk2MZuYLE9aIHgdjtNVNh8QlXIV1la4f74CoFKuAoTrgCsbOmmBpPH/+sjTuemMV3lUbRTyp19gbIFJgkwwiS+dA9MsiOODdwDa7bvEe34Z7LO+eJbI2d3dBuDwtPjTQbPVSG2m69uJ+82WPTvJaf/3ODOzevlv+AZn4JHRlL/s5AAAAABJRU5ErkJggg==); --sp-skier_idle_d_v2:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABaElEQVR42rWUMUsDQRCFvwtJIKQ4LGSbpEphbWUpYpNKMaWFlSL+AbERCTYipA7GJlhYKlodgop2NucfUBA8jmwUwYAIQVgL3TOXbC53qANX7OybNzP7Zg4SmBAF1fFd1fFdJURBxYmxkpDnRTnke5MOUnqRHKm45GJiecCfF2VGdZKO24F3d230Z0bExU7w8fLA+cl9yDc7XyJj/zKBfoKc3aVILXSXs7sBZpgWVj+ZBmri4/11ANqtlrEA328DUK07APTGS+lZ6V7y0tgicKgAttbKSSY4wFfrjgLQXKkR4FClpk+bxvYXluKfzSjyxs7Ft4jJyExxxgR6OqT0rIWVXTU9NQdkubo5BeDrTHDWWNPSGRNErf/7axbnTGuTJWd3A3z/BA5N0AswEUbhjXsgREFtrz4CcHR0GfnOt09LTI4fRGIqlRkANveKPx00mrXYYj533Mj7RtMd3OS4//dhYibV8s/sE6DDniXUtdrgAAAAAElFTkSuQmCC); --sp-skier_idle_d_v3:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABcklEQVR42rVUP0vDQBx9MblCXIKD3JIsFpKCOAj9AtXuYkcHp4J+CSddu2txKB0cK25FEMEPUAWnBpRCg3BairoIiSEOMTFpk0tC8bb73Xvv9/8EFDiUqt6loQMAdocmGLOELI5QRJwazZiNDc8znSzlFV+vnczbjSYoVT0eV8qbwcNdN9FOMni5HXxPR7i5eorZtnfKIMqCDoISyIoNDa3Ym6zYISatF8KsWAAMhLWNQwDA9HWUGMD75NkvlWv6jY/wGbMEKSpeXtkDcOEBgCPqRSY4xFMKDwACLYkH9qPaikWadohrwhF1OKIeZpN7TBc5UtrEAMickDy8xAxkxYas2GDMEsaPp1hbfkG9WgFxTRDXRL1aid2J638bAS8zA976f32U0L/u/95KYSCzE8R1EAUkCfLwiXtAqeodH4wBAL3eLbfO92/72FztcjGNRg0AcHSm/WXQ7rRyN3PyOeC+tzuD+U3O+hWj/SmC/e81wA+d3pjE2UFDJQAAAABJRU5ErkJggg==); --sp-skier_idle_e:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABZ0lEQVR42rVUMUvDQBT+TkKgU3EIWZKpg3MmwaGi4qrQ0SEugn/Bxcm5g6OdSgbHQgWhVURcBCm0q6AF0QM5KkhdCi7nEC+9mMvlqvZt792777v33vcOMDDX9bjrehzzMNf1eK/Lea/Lf0VCisADJ0rFBqMQjFFiSrCgA99cuszEAyfCLJVYusP7p/M/t5joKpiMbVy1h6n4xnYFpfJnKqZrmSUDikTRgoNwCB/11IXd9Snhw/N1PBeEXCaSsZJAZXEHw/fTpM8AUF1ZAwC8UvXrBIEsAAAQWIxRYqmGKJKreFEC/bTBKETgRAicKCEpVNF/WaaC28c9AECpPBtQ3r0MgVAIY5Qct30OAKvLWwCAm7szqHzGKMnbjUyLGKNEKMBkY+VcVb6l0r/sT8Y2Ohedb88GgJRftNWJTI/2Y8W0WmaK0VmtFsv78MSfVtBo1o0H+vbR1543mv3sV2H6gekGmjefudoXlVKdz+YOeY4AAAAASUVORK5CYII=); --sp-skier_idle_e_v0:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABZ0lEQVR42rVUMUvDQBT+TkKgU3EIWZKpg3MmwaGi4qrQ0SEugn/Bxcm5g6OdSgbHQgWhVURcBCm0q6AF0QM5KkhdCi7nEC+9mMvlqvZt792777v33vcOMDDX9bjrehzzMNf1eK/Lea/Lf0VCisADJ0rFBqMQjFFiSrCgA99cuszEAyfCLJVYusP7p/M/t5joKpiMbVy1h6n4xnYFpfJnKqZrmSUDikTRgoNwCB/11IXd9Snhw/N1PBeEXCaSsZJAZXEHw/fTpM8AUF1ZAwC8UvXrBIEsAAAQWIxRYqmGKJKreFEC/bTBKETgRAicKCEpVNF/WaaC28c9AECpPBtQ3r0MgVAIY5Qct30OAKvLWwCAm7szqHzGKMnbjUyLGKNEKMBkY+VcVb6l0r/sT8Y2Ohedb88GgJRftNWJTI/2Y8W0WmaK0VmtFsv78MSfVtBo1o0H+vbR1543mv3sV2H6gekGmjefudoXlVKdz+YOeY4AAAAASUVORK5CYII=); --sp-skier_idle_e_v1:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABcElEQVR42rVUMUvDQBT+TkKgg5QEJAoRxO6Ciy6CiKtY6Ojg6i/I6KJj6OhgXYqDY0EHCYKIKIKD8RcIgqFwbUloFAou5xCvXkhyvap90713371373vfHaBglmUzy7IZJmGWZbO47bO47f+qCBmV3DHMVMyNQlAaENUCU7LkR3OzmbhjmBinE022edkL/0wxkXUw6Ou4Pn9JxTerFZTKn6mYjDJNTMiBnIKnrSVMo5464K0sDNcPnV4yF4CJhcRcGg9UjB0AZ4zzzO395B7dTiylgeN5IZ6L0oBoheAoRBWLqZsWmRuFcAwTjmHCjUI1Ff2XZTo4eP0AAJTK4yUqOpcpwBVCaUDW7hJO11e3AQC3jxfI8ykNSNHbyFBEaUC4AlRerIjNw2t5+hf9QV+Hd+V9e3oiVcEf9aqHuj3cewMAtFo30hs/d3exPHMqxdRqGwCA/eP5nw4azbryQHuxL91vNP3sV6H6gckGWjSfidoX6mCaBZI7zD8AAAAASUVORK5CYII=); --sp-skier_idle_e_v2:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABb0lEQVR42rWTMUsDQRCFv5MYCSmChWxzNqawE7WxFLFJpZjSwkoR/4DYiIiNCNZibIKFZUSrIKhopc35B0whHkc2ipKABGzOQjbeeZv1IsnAwe3b2Te7895AjBDC9oWwfXoRQth+w3P8huf8q4j1F3la5ELYhywjpWvFLdBnbMvocgRPixydvCRh2nQfb7V4fzdaJITtN+tJLs8qIXx2Pksq8xnCTC2zgoQqUbXg9GidkYEw2d3TW+vf82oAbB+UQ4WCXC0gO7hI5f0EgK21b2HHJ8cAqFWr2tupAipUIcUlpWtFRFbkKlkR6b7fxOpsLBd1KyIu2ti9AiCV6Yyo3blIAeUQKV1rYWXPB5iemgPg5v4c3VpK12o3G5EWSelaygFxJjaYq8tP6PwfXDfrScoXSvAkQGj911S3bLqz+gxAqXRtvPHDyxITQ8fGnHx+BoDNw+GfFxSK+7EFfW04xv1C0dFPchxyk6Dt9OlpfAHCOaicrRVAyAAAAABJRU5ErkJggg==); --sp-skier_idle_e_v3:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABc0lEQVR42rWUsUvDUBDGf7FJwakISpZ2KqSDk5OLIK2OotjRwUEK/hVOukl3LQ6lg2NFpyKI6OZSXS0oglmelmJdKtYSh/bVxDSvqdSbcpfvvrv33b0HIcw0445pxh3+YHoY8pOUBcA6OELY2igFtKGdp3KemLg/YpQiEyry2fSeP57KMYpcSonurksD48Y4JDLNuNNqRrk4ffDEl9aSTMY+vbIpJNPdhBIoJbAWtkiQ9yRMW5n+91v9sZeL4y7k5tJlIDm1ARw7AO2I1SdZ2f+g8fKklEHiZSHJJYSt6UFgo1MDMp5Og8zo1GhHLNoRq5cXYovGZb4TfDW6chix0YiC8nwF5IZ0h3TgACzPrwJwdXMGwOIvXwhbC7obPomEsDW5AWFurBs7CK8P2n+332pGqZxXel4UwOMPu9X9vd3dfgagXL5Udnz7usncTEmJyWbTAOwcJn5OUCjmQw+0/l5V/i8Uq/6nIuwDphpo0Hz+1b4BUsuVqO87IgAAAAAASUVORK5CYII=); --sp-skier_idle_f:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABcklEQVR42rWUPUhCURTHf08egpM0yIPQSaLZqTEqakxwbLAlaIqG5qZodHDMSRwaBYNAi3gEEYSga2BC2KO42GKL4HIb7Jqv93UjOtO95+N/7zn/cw5oimWlZbslZbslpWWlpW6coQueS9Vcuu6wiBBOZHxMB3xz+dqjz6Vq6GRi6mTw+HwZau+9ytlDS4uGoV0i9cPxKM5No++ybeSzJJIT7rovBIGHZmBZaXmYnwa/OZCh5LLvrvfpDWwOtuxQPsx5QOXkV9vT8lEkV/Px6mwqRXZhBziXikBXjQd2KLjy71KUAApLCMeIBToPi7qtPvP9+TGtNv2reEi+f9oDIJH8HVBQnOeBRHICgBCOUW5kJMDqyjYAtw8X+N2FcIygofOUSAjHUB2gswrmff38zaDhUjIexWleNb9ucQDXPWpdzPr2ZH86VPW6Hdkxft0yL4XCGgDHZ5nvDCrVkjah7x+dUHul2vHuIt0dH0ZoED//Kp+1xZ9sQDukkwAAAABJRU5ErkJggg==); --sp-skier_idle_f_v0:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABcklEQVR42rWUPUhCURTHf08egpM0yIPQSaLZqTEqakxwbLAlaIqG5qZodHDMSRwaBYNAi3gEEYSga2BC2KO42GKL4HIb7Jqv93UjOtO95+N/7zn/cw5oimWlZbslZbslpWWlpW6coQueS9Vcuu6wiBBOZHxMB3xz+dqjz6Vq6GRi6mTw+HwZau+9ytlDS4uGoV0i9cPxKM5No++ybeSzJJIT7rovBIGHZmBZaXmYnwa/OZCh5LLvrvfpDWwOtuxQPsx5QOXkV9vT8lEkV/Px6mwqRXZhBziXikBXjQd2KLjy71KUAApLCMeIBToPi7qtPvP9+TGtNv2reEi+f9oDIJH8HVBQnOeBRHICgBCOUW5kJMDqyjYAtw8X+N2FcIygofOUSAjHUB2gswrmff38zaDhUjIexWleNb9ucQDXPWpdzPr2ZH86VPW6Hdkxft0yL4XCGgDHZ5nvDCrVkjah7x+dUHul2vHuIt0dH0ZoED//Kp+1xZ9sQDukkwAAAABJRU5ErkJggg==); --sp-skier_idle_f_v1:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABcklEQVR42rWUv0oDQRDGfxeOQKqQgJxKbAw+gCDYKCJ2FgopLWx9glRio6QKlhamChZWEtAiBEFEFMHmfAAxCB6BTY4ED0GwWQvdeOfl7lbEqXZ2vvmz880OaIplFaTXsaXXsaVlFaSun6EbvJzLB+6qgz5COIn+KZ3gBxPjoftyLo/OS0ydFzTdfqz9oSOHiWYmDUM7garwxIWL08eAbWW9SCYbHzyWA8sqyJvFOQB6XY/p7dWAvV1pctt1E/kw/QEVaFRv25VmIld+f3U21UUxtwEcS0WgX1SlUaLwVZAAKpYQjpGKBA/6uqM+xP4sTGtM/yqhKdp9egUgk/1doCi/UIJM9h0AIRxj4fqzp0vzawBc3Z0xShfCMaI+XahFQjiGmgCdVeDHjsKbUZ9LydtLmtZ560tLAwT0pHUxnNu9rWcAGo3L2Irve5vMjh3FYkqlZQB2Dqe+X1Cr72sT6np2rL1Wt8OrQnfHxxEaxc+/ygfSbp8xL7G5qQAAAABJRU5ErkJggg==); --sp-skier_idle_f_v2:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABeElEQVR42rWUPUsDQRCGnwtJQFIEBVmQiEUQayvtRGxSKaa0sFLEPyA2IsFGBOtgbIKFZUSrIKhoFZvzB6hg8DiyUQIGRBBhbdyY8z6yIk5ztzPvfO07O2AoQmRU27VV27WVEBll6meZBk+JnEf3KqtI6fT0j5kEF2NLPn1K5DDpJG7SgXN3FahPfH1vXdVJNDpkWcYJdIUfrQfOju89tpm5LIl0dPBIDoTIqKP9NQCajQaTIwMee63ewnWbABSK4XzEuwNqUNDd1uqtnlx1++v/uFZk+xeAQwWwueqdGF1pmGh8oVhVADqWlI4ViwCbjnoH+7MwozH9q/imaH37HIC+9O8Chfn5EvSl3wGQ0rHml3cUwNTELACX1ycEnaV0rLBH57siKR1LT4DJKujGBuHjYY9Ly9tLkuqpJjwJ4Dn3Whedud1aeQSgUrmIrPjmaZHxwYNITD4/DcDG3vB3B6XyrjGhz2070l4q2/5VYbrjowgN4+df5RNS+aIi043iLwAAAABJRU5ErkJggg==); --sp-skier_idle_f_v3:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABfUlEQVR42rWUO0sDQRDHf6uXgFWwkAWJVTARxMJKSCNBa8WUFlYB/QKWVtqJvQaLkMIyolUQRLQQbKJlVJSAh7AqQW0EH5xFsjGXy92tiNPczcx/XjsPgSFJGXd2U0kA5i6vUMoWJnbC1LlM5VwydbltFKTHxPloZs0rT+WQMu6E2VsmFVycFLvKI83v9b3TCjQ8KIRxAJ3hZ73G4d6NSzc1myASC3Ye2AMp487Q2BIA9Ycap+sjLn16ucrz022jki//plvtDjWo29uml6uhvWq31/+WFiT654EdB+CjN+ky1pn6kcZLiQOgfSllix4/cOTrynRFWtjOxIzG9K/kmaLPeq2RVex3jvzsPAH6Yu+NTVW2gE0HYHpiBoDjs30AJjt4pWzht3SeJ1LKFnoCTE5BO7Yb3vJbLk1vL1HKB+UmFwVw8WHnojW3q4t3AJRKR4EZnz8uMD5QDMRksxkAVraGfirIFzaMG/r0WgnU5wsV76kwuYxhDfXrz7/SN+7inSbE289UAAAAAElFTkSuQmCC); --sp-skier_mini:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA10lEQVR42mNkwALExWX+o4u9fPmEEZtaFmyahbmksZjK8B+bISzYNCtIqWMa8Ay7ISzYnNVYtxBDLD7DgoEoL7z99pRBlqEXRUw/bgLOcGDB5vekpksMxAImYhQZqzgx+FjGYY0dJmJt2nJ8EX4vvHz5hJFBnOH/b2Y1hhf3n2AYwEqqF1j/3mJg/XuLoMsYkQPxN7MaXDPMueji6LGBYsD3j2wMDAwMDJz8v1BsgYmHekRghAcLTLOxihNB5x6/uBd3Qnrw7CZBA95+e4rfC4QMwJUjKQIAjBNacbsf6VAAAAAASUVORK5CYII=); --sp-start_house:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA+CAYAAACbQR1vAAAEwElEQVR42u1bQWgUSRR9pQMLnhTR7tGZycGJS7IgBDEQDIJRRFCErKcR0cuC6EEj6LIgaxDxpODoIeBREXMzInFZFtcVSQy47s6yYlwng5hMm5kx6HoQQRDKQ9I9PTXVVdUznZ7uyfxTd1X1r/9f//r/d9VvAkXStBgd+XZjVXv/yyxKJYMgpBRxM3hjZ6Kq7XlnAt+N3Kd+gaBpMWq/r3deVwBkJ2cC8fY3rDqA6eI/+PLNpLcWQCmlAEAI4SrV/zIrRN18XsSjkcTTr8oCcoX5gTwFRG/brryIh6qQdkHtbboerxg/NTvf175OPJedh3AJJKP1KcDyMBWRWZcTiF69dSciPDR51NsVx1gm3zDzTUbLFmD3AaZM08ZbZV47uzXCBYD1sGOZfMXEvHaeWcqIfd5vHvalXAXA3p5DvrzRn4YuWAr80H/GNx6jEzfEAKxesR7NTO8+vakAIMIbsJSIuM28wkayRE0pEzx9OB1K5S9eH/AmFX6R/bu1BIJGxd8uQd91qu4loATA6cNpPBi/23Cl/8o9EPZvTvZZ131b9+Hi9QFvfAAARNfErDjqNZm5B4/35mSfNTdychkLc0Z5vNefw5b5PTpe1aZvu8ptV+ljTdvqczDxK4MZ/Hh2v3X/efkrf/YDyl7xX3ftbF/HJsexbTuGMP37MbTtGAKW81mdONfl2OcPABIlagZw4W3qu045Kmhf5wDw4Z2OlauLUv/gKQD6kYcAHjq0i56R+wJ2DRfmDK4vKt8DQEzqH5omDLIWIIsQTZUJyjI7Vk6VTFC6O+P2Oz1wCVMxL9yjdLQAXY9jMNWNwVR3qAHQ9ThSPYmKJZ3qSSB95zEBgGVuGY6OTYZuTM0+IPu66Ko9yGNqAmB4YobvcfMf5Xl7wMa4BoANH5oWo4OpbmRfF5E13tc16WIQK5spvyyMR+qZ9PyRfCCU//maPFINDXxPAeDc8BPvAHj2NDzRgFXcpGVYIlQqGYSXFS4ZABbFB0zN/GFdtye2+yq4fW4V8sQH3Pw1CSC5cHcLmTn7KdINXwGonLtaNlUf4AqAg7tzVqjB/5WhMoNDtFH7/ZoWo6xsTuPZsBjx6wCiKX1AmGhR8oAwUSsPaOUBLR8g9wFOBUVBLHnz3AeIqqm8qNYKtA9oBgXr8gGEEKKy/y9LNxtJMtmUfIB9B3h0bBJ7ezsr1o8s3WwkyWRT+hZgNxfr2WwMaq0Qa+mtPAAe1+EGNWT69i3AghIUQJR8AHsOYG598+pygfmKbl67nzmEkwy5AmgyWj7bLBbz3GgXYZ3E1CylMqXAVHA3kpxk4LVPzVLa2xUXL4H2dYTwyuZ7u+JVhw+NLJ93K1uuMK+b0o4Qi5Jo4qCSXbbhiRkML9yXSgZJ3zHk9QGm1wRzEmsmR2HrO5a+7a4+gE2CLo+M46jD2JP9W6WJE6/PK56XR8Yr2o8yPOC2QoRSSvds6QAA3PvzhbLZmc/IyCueqnz2bOnAL0//I7y/xyJOYaqW09/FODH2gqedh11fSiklPAByhepwwktoZDHezocNTbxf4njzmP0iXqqbOCyvZBQgoj/FnEBwo7j5N1dbbG3NuYPJb9p4a/Fhf9ETgSwCktx/UlqymyEA8BWAsuts2UU1cgAAAABJRU5ErkJggg==); --sp-station:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAiCAYAAAAZHFoXAAACZUlEQVR42u1YPUsjQRh+xwsIxzVBcNe7LIGLFlpFjggnVwoWl8L2UqQVLMR/YK2V+QsW+QUqCFeICMJZKBbGbwzGZHMidoKgvBb6JjOTmd1ssmom+MCS2c18PM/7MTO8DBERNGCMMfmbV3+v8YiI8nyIiKcVcczgQHNciEfEiwB1YoyxIMR1YuX300ojYVmQjgv1Yyfl4MQ6CcyyYkYJ2Nq9hF+jjigg/TNrpPVXtpefc6ByXTI2hCIAABflI7MF3NxdmZvE1DAtmavVEms4B/o+fwt9oZu7K0hEMwAAkMsthDZvapKB9iDzCykSqusnG+LsNg+JaAZSk+JpSl4ngfIY3tL8GL5/j46kuzkL7uas0Kb3MEFkiu6e8KsSpU1iJQr76rYCvY/fAQDg/tN508R5SxbdPXjoPYBcbh3SWQeKLkDcTr6IyKPsBR49nZSY6azT2jbaLoJYXkvkfgTidrIWQm0LsKc3lO0Gq0nXkJXt5QDbYB4T0UwD8bidrCWyV/hoBbS6nRYOHwKPoR2KSPPk3ySEmrW4zguWFUMS4beFdvdJnIhmQLaE7OZO+f4sYLHLPDD/Z8yoW+jMUklM4uML9+M6/R4hxFR3lLAWcd3L+mFoO22Tbeoc+OF8gdWdAvxODbdFfnWnINR4SEwr865VAxSiEBFPylhDkNvl3NQ48nOoHh3mpsbRz/sqTkLFTVUV4ytnVN7zEqarrPmB1vEqZ9LcQ1/rPCJ+C/L/yxOFCZpTZRx5PZ6H8aXFSLH0v36NjfUbQZrnLMTb339VpTfeSxhPlMfEmMWUAnTQCXtt8ES7Fk9EhJL0zJYIJAAAAABJRU5ErkJggg==); --sp-yeti:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAADFUlEQVR42t1XzWrbQBD+VjE0BEKpSSwFbOqDDXavAT1BTS/xQedAXqHPklcI9KxDeynqMeQgaAM51AH5kGDhWDnYNIHgHML2YI+6Wq1WP24vHRC72h3NfDM7MzsC/gcyzSZXzauQUVW5OKrW/rkH6Jk/LPn8YckvrqaJuWk2+cXVtDSQWtkPZrMJAGDx+Izrmzl67Tqub+YAgF67DtfzE56LopAVkcuqxMMoGOPN7issHp+VvP1uJ54XBVLKI58+f08oGgVjJQDiOx4eJgzRgarleSGKQkbeeL1oAAC+nE3WilsJflrHQu3J0h6R09L1fDgDG2enwMlH4OiklbCc6GjYigGdna7WKGYAwBnYmXHDskCIAp6WWzgeHibW1oITx6DbF4mOTATEZBCu5+NpuYWd7ZcUkCqkAkJgRCCGWB/IIhGEKn1nswl2+bvUSHNK8TyAYggYRVIsC1jX/JAYNy7xojfE45BpFIxhWauADKKvqX1as6xWKl50XjHNJjfIPb12XcnsDOzEu+v5sKwWLKuFR/Yz8dC6DCIvvqIoZDWxTsjH4QxsRFHInIHNXc9Hv9uB6/mFrHUGNlZpvwrK4+EhzwpcAGCm2eSjYBzfF6Igih3ioeopV1RViSewspysdC5U4qMoZP1uh4+CMUbBOHGXqIhKgJyi2ktPtPbH9a84Q2RB3/yoUo/x3ja13iCPJFwvApHBqDKrSJzQt3mFzShSL+h4nIGNXrseZ5g4l9NdjI0iLYahux13tl/ger7yBqWGqN/tpFJcVqLLFjLSiKKQrYOx9PmT1ev0VBZBHYkxGB/N+eUkdvH+3kHMvL93gDyL8qrn22Yjfhfn55eTtLdNs8mDKeeqUeShRnn+sEztXVxN40fey5Od+6sg71cBUkS2IQeNahQvRrkC64qaqEwnu/APllj0dMrK7lfu4rNuaLl10NWjv/bLqQLGOec6YBv/YJECaoZ07aOOh1pHxhgrDUS0cny3WRvYORAUZoCp6UAQgNvwfsOOtBED4pxzFZiaDgQBEKuhim7Dey3PH0MamWB+A8xjVZgg9FovAAAAAElFTkSuQmCC); --sp-yeti_b:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAC+UlEQVR42rVYwWoiQRB9MxE2BMKykjgKynpQ0L0K/oHsJR48C/mF/Zb8gpCzh+xl8RpyELKBXAyMhwTFdXJQYiCYQ+g9bKq3pqenZ3okBUOP3TVdr6urXlcL7CCeVxa69yziZjXOW10fPlrI8GqzFavNVlzdLkLvnlcWV7cLayCOrSeWyxkAYP38irv7FRrVvGwB4O5+BQDoddoIgrnzYUAAYOJP8eXwE9bPr3Kcg2nWa6Fv0wDK2bjv/OI6ZGjiT+VYo5qX/aTX77ZSe8UKyOd1AQDwczB7B1QJjVM/1nqPmkDlkrYjCOYObcvgDDj9AZycVkIrJznpViSgwZldWjtJ8QAAw9EYvU4bw9E4pNfrtEPboBvnfb1OOzZmnDgQfIKX7R763VamdFe9RqBVQK4KYjgaaz8mWS5nWC5nOBTfIi29U4rbgHM5SZEXDvbfUq227n0Ptbae4iHgpslzAjbxpygW/wWkH/yK6FFfsViJxEuq9OXe4HGh8wwHo0YY9acFcX5xjX63JQBApubEn0p65kB45OsyJ05IlwI9Lu6I9HKcJ9TtoPOi12mL4WiMiT9Fs14LMapOmvWaBEyG+t2WMCWB43lloXpDPbRIhxsyicodfJ64dE5F8UEwd37fPQlT+oXjy+7AC/FIo5rHy3YvNr363RYO9t+sHk6Ccd6QQIJg7uhcfbD/FgHTqOblw3+nKSGSgtXV8YW633T4mWKDe5PHRpInCKhrCkATw1Jl1qzX5GFmK+QN6RGbkk636vf0jHglUxV/eTOTLj4+KkmF46NSYpYksefXckH+5u+XN7NoveJ5ZeEvhNC1XIcq9tVmGxm7ul3IRx1LmjvxzqKOZwGSZm5XV22rLT8YVQY2sSs3Zpo79U1Ppfg4Y7bjmav4JPKirElbWO1099UBE0KINCSX+aZHBmQhZKhjTTpUwzqO41gD4auc/tnt4l4rMYMxYHImEATgYf64438IBQlICCF0YHImEASAs6FOHuaPRp3/CynEgvkLqqFLEr0L48gAAAAASUVORK5CYII=); --kit-frames:"race_c1 race_c2 race_d race_l race_lp race_p race_r race_rp race_s race_t skier_idle_a skier_idle_b skier_idle_c skier_idle_d skier_idle_e skier_idle_f"; } /* ========================================================================== DEVEXANA CONSULTING — alpine race course Palette dusk #241663 · #6f52e6 · #cbb9ff snow #fdfcf8 · #f1ede4 violet #6d4aff (fill) · #5b34f0 (text on light) · #cdb6ff (on dusk) ink #140b30 Type Georgia display · system sans body · ui-monospace game-UI labels Grammar the page is one race run: start shed at the summit, numbered race gates for sections, a scroll-linked racer that whacks each pole, a chrono that posts splits, a finish banner at the lodge. ========================================================================== */ :root{ --ink:#140b30; --ink2:#2b2050; --cream:#fdfcf8; --snow:#fdfcf8; --snow2:#f1ede4; --snow3:#e3ddd0; /* CLOTH — the light half of every race fabric (gate panels, the finish banner and its posts). It is deliberately DARKER than the snow it hangs over: the piste is --snow #fdfcf8 and the panels used to be painted in --cream #fdfcf8, i.e. THE EXACT SAME COLOUR as the hill behind them. Up at gate 1, where the snow shelf and the light sky band are at their whitest, a cream banner dissolved into the mountain and only its outline survived; gates 2 and 4 are cream-bodied and did the same over their own snow. Cloth is a race bib, not a snowfield — keep these three off --snow and every gate reads on any background it crosses. */ --cloth-l:#efe8d6; /* the lit top hem */ --cloth:#ded6c2; /* the body */ --cloth-d:#c5baa1; /* where it bags out into shadow */ --vio:#6d4aff; --vio-t:#5b34f0; --vio-d:#472bc4; --vio-l:#cdb6ff; --vio-l2:#b9a4ff; --ser:Georgia,"Iowan Old Style","Times New Roman",Times,serif; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace; --page:#0c0722; --page-ink:#c9c0e8; --page-ink2:#8d84ad; --page-line:#241b46; /* The piste is the spine of the page, so it is wide: the course, not the column of text, is what you are looking at. --gut is the chrono lane on the right — a guaranteed content-free strip the HUD lives in, so no card text can ever pass beneath it. */ --rail:360px; /* piste width */ --net:40px; /* how far the safety netting hangs outside the snow */ --pad:416px; /* content offset = rail + net + air */ --gut:200px; /* chrono lane: reserved, never holds content */ --wrap:min(1400px,100vw - 64px); --shedw:252px; /* start shed: 9x the 28x23 sprite */ --shedh:216px; --skw:88px; /* racer sprite: 4x the 22x28 front-view grid */ --skh:112px; /* -- and it MUST stay 22:28, or he is squashed */ --amp:.29; /* racing-line reach from the fall line, as a share of rail */ /* HE GOES AROUND THE GATE, NOT THROUGH IT. --amp is the racer's apex, out near the edge of the piste. The turning pole stands --gin back INBOARD of it, and the panel hangs from that pole further inboard still — so the whole gate structure is on the fall-line side of him and he rounds the outside of it, with a clear strip of snow between his skis and the pole he is about to knock. It used to be the other way round: --gapx was `rail * --amp + --gout`, which planted the turning pole OUTBOARD of the line and slung the banner back across the fall line — so the racer's apex landed in the middle of the panel span and he passed UNDER the cloth every time. That is what the owner was looking at when he said the racer was not going around the gates. The sign of that term is the entire fix. The clearance is deliberately the same 20px at every breakpoint: --amp is a share of the rail and --gin is an absolute distance, so the two are re-tuned together whenever the rail changes width, and the racer's own width is re-tuned with them (see --skw below the 1380 breakpoint). */ --gin:82px; /* turning pole, INBOARD of the racing line */ --gwf:.34; /* panel span, as a share of rail */ --p:0; /* scroll progress 0..1 (set by JS) */ --sy:0; /* scrollY in px, unitless (set by JS) */ --rx:0px; /* racer x inside the piste */ --ry:58vh; /* racer y in the viewport */ color-scheme:dark; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;overflow-x:clip} body{ margin:0; background:#0c0722; color:#e7e1fb; font-family:var(--sans); line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:clip; } img{max-width:100%;display:block} a{color:inherit} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip{position:absolute;left:-9999px;top:0;z-index:99} .skip:focus{left:16px;top:16px;background:var(--cream);color:var(--ink);padding:10px 14px; font-family:var(--mono);font-size:11px;border:2px solid var(--ink)} /* ========================================================================== 1. THE WORLD — fixed dusk sky, parallax ridges, treeline, weather ========================================================================== */ .world{ position:fixed;inset:0;z-index:0;overflow:hidden; image-rendering:pixelated; background:linear-gradient(180deg, #120a34 0%, #1b1049 12%, #241663 26%, #3a259a 42%, #4630b4 54%, #6f52e6 66%, #9b7dfb 76%, #cbb9ff 87%, #ddd0ff 100%); } .world>*{position:absolute} /* warm dusk wash that deepens as you descend toward the lodge */ .dusk2{ inset:0;z-index:1;pointer-events:none;opacity:calc(var(--p) * .85); background:linear-gradient(180deg, rgba(11,5,32,.92) 0%, rgba(24,12,66,.72) 30%, rgba(60,30,120,.30) 60%, rgba(255,176,92,.10) 88%, rgba(255,200,140,.16) 100%); } .stars{ left:0;right:0;top:0;height:60%;z-index:1;pointer-events:none; opacity:calc(1 - var(--p) * .75); background-image: radial-gradient(circle 1px at 18px 14px,rgba(255,255,255,.90) 100%,transparent 0), radial-gradient(circle 1.5px at 66px 40px,rgba(255,255,255,.95) 100%,transparent 0), radial-gradient(circle 1px at 112px 10px,rgba(255,255,255,.55) 100%,transparent 0), radial-gradient(circle 1px at 148px 62px,rgba(255,255,255,.80) 100%,transparent 0), radial-gradient(circle 1.5px at 196px 28px,rgba(255,255,255,.95) 100%,transparent 0), radial-gradient(circle 1px at 232px 88px,rgba(255,255,255,.50) 100%,transparent 0), radial-gradient(circle 1px at 40px 104px,rgba(255,255,255,.70) 100%,transparent 0), radial-gradient(circle 1px at 124px 126px,rgba(255,255,255,.45) 100%,transparent 0); background-size:260px 150px; -webkit-mask-image:linear-gradient(180deg,#000 46%,rgba(0,0,0,0) 100%); mask-image:linear-gradient(180deg,#000 46%,rgba(0,0,0,0) 100%); } /* checkerboard dither bands hide the gradient's seams */ .dith{left:0;right:0;z-index:2;pointer-events:none; background-image:repeating-conic-gradient(rgba(255,255,255,.5) 0 25%,transparent 0 50%); -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0),#000); mask-image:linear-gradient(180deg,rgba(0,0,0,0),#000)} .d1{top:12%;height:88px;background-size:8px 8px;opacity:.13} .d2{top:32%;height:74px;background-size:6px 6px;opacity:.15} .d3{top:52%;height:62px;background-size:4px 4px;opacity:.18} .d4{top:68%;height:54px;background-size:3px 3px;opacity:.20} /* Low sun, dithered. It stays in the SKY BAND and sets early: it used to travel 26% of the viewport down and hold most of its opacity all the way to the bottom, which parked it in the middle of the lodge section's copy. It now drops a little and is gone well before the finish, which is also what dusk actually does. */ .sun{left:66%;top:calc(7% + var(--p) * 15%);width:48px;height:48px;background:#f6ecd8;z-index:2; opacity:clamp(0,calc(1 - var(--p) * 1.7),1); clip-path:polygon(12px 0,36px 0,36px 6px,42px 6px,42px 12px,48px 12px,48px 36px,42px 36px, 42px 42px,36px 42px,36px 48px,12px 48px,12px 42px,6px 42px,6px 36px,0 36px,0 12px,6px 12px,6px 6px,12px 6px)} .sun::after{content:"";position:absolute;left:12px;top:12px;width:6px;height:6px;background:#e2d6bd; box-shadow:18px 6px 0 #e2d6bd,6px 24px 0 #e2d6bd,24px 26px 0 0 #e8dcc6} .halo{left:calc(66% - 44px);top:calc(7% - 44px + var(--p) * 15%);width:136px;height:136px;z-index:1; opacity:clamp(0,calc(.5 - var(--p) * .85),1);border-radius:50%; background:radial-gradient(circle,rgba(246,236,216,.42),rgba(246,236,216,0) 68%)} /* --- parallax ridgelines: four layers, atmospheric depth ---------------- */ .ridge{left:-2%;right:-2%;background-repeat:repeat-x;background-position:bottom center} .r1{bottom:34%;height:180px;z-index:3;opacity:.55; transform:translateY(calc(var(--p) * -26px)); clip-path:polygon(0% 120px,4% 110px,8% 118px,12% 96px,16% 104px,20% 78px,24% 88px,28% 62px, 32% 74px,36% 90px,40% 82px,44% 100px,48% 88px,52% 70px,56% 84px,60% 96px,64% 86px,68% 104px, 72% 92px,76% 108px,80% 98px,84% 116px,88% 106px,92% 120px,96% 110px,100% 122px,100% 100%,0 100%); background:linear-gradient(180deg,#c9b8ff 0 10px,#8f78dd 10px 22px,#6a55b4 22px)} .r2{bottom:26%;height:210px;z-index:4;opacity:.72; transform:translateY(calc(var(--p) * -58px)); clip-path:polygon(0% 150px,5% 132px,10% 144px,15% 110px,20% 122px,25% 86px,30% 70px,35% 92px, 40% 116px,45% 100px,50% 124px,55% 106px,60% 88px,65% 108px,70% 130px,75% 116px,80% 142px, 85% 126px,90% 148px,95% 134px,100% 152px,100% 100%,0 100%); background:linear-gradient(180deg,#e6dcff 0 14px,#a78ee6 14px 30px,#553d9c 30px)} .r3{bottom:14%;height:250px;z-index:5; transform:translateY(calc(var(--p) * -104px)); clip-path:polygon(0% 190px,6% 168px,12% 182px,18% 140px,24% 120px,30% 148px,36% 172px, 42% 152px,48% 128px,54% 150px,60% 178px,66% 158px,72% 186px,78% 164px,84% 194px, 90% 172px,96% 198px,100% 186px,100% 100%,0 100%); background:linear-gradient(180deg,#f3edff 0 18px,#9b83dd 18px 36px,#3b2878 36px)} .r4{bottom:0;height:230px;z-index:6; transform:translateY(calc(var(--p) * -150px)); clip-path:polygon(0% 150px,8% 130px,16% 146px,24% 112px,32% 134px,40% 158px,48% 138px, 56% 116px,64% 142px,72% 164px,80% 144px,88% 168px,94% 150px,100% 170px,100% 100%,0 100%); background:linear-gradient(180deg,#efe7ff 0 16px,#7c64c8 16px 34px,#251a55 34px)} /* treeline sitting on the near ridge */ .trees{left:0;right:0;bottom:0;height:230px;z-index:7;pointer-events:none; transform:translateY(calc(var(--p) * -150px))} .trees>i{position:absolute;bottom:0;background-repeat:no-repeat;background-size:100% 100%; image-rendering:pixelated} .tf{width:27px;height:27px;background-image:var(--sp-pine_far);opacity:.75} .tm{width:39px;height:42px;background-image:var(--sp-pine_mid)} .tn{width:51px;height:60px;background-image:var(--sp-pine_near)} /* the base: the ground rises to meet you over the last stretch of the run */ .base{left:0;right:0;bottom:0;height:250px;z-index:8;pointer-events:none; transform:translateY(calc((1 - var(--pb,0)) * 260px))} .base .snowbank{position:absolute;left:-2%;right:-2%;bottom:0;height:120px;background:var(--snow); clip-path:polygon(0% 40px,10% 30px,20% 38px,30% 24px,40% 34px,50% 22px,60% 32px,70% 26px, 80% 36px,90% 28px,100% 38px,100% 100%,0 100%)} .base .snowbank::after{content:"";position:absolute;inset:0;opacity:.7; background-image:repeating-conic-gradient(var(--snow2) 0 25%,transparent 0 50%);background-size:6px 6px; -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,0));mask-image:linear-gradient(180deg,#000,rgba(0,0,0,0))} .base>i{position:absolute;bottom:60px;background-repeat:no-repeat;background-size:100% 100%; image-rendering:pixelated} .base .bl{width:160px;height:90px;background-image:var(--sp-lodge);bottom:52px} .base .smoke{position:absolute;width:5px;height:5px;background:transparent;bottom:150px; box-shadow:0 0 0 rgba(0,0,0,0);animation:smoke 5.5s linear infinite} @keyframes smoke{ 0%{opacity:.75;transform:translate(0,0) scale(.7)} 55%{opacity:.34;transform:translate(9px,-42px) scale(1.7)} 100%{opacity:0;transform:translate(19px,-82px) scale(2.5)} } /* drifting snow */ .flakes{ inset:0;z-index:9;pointer-events:none;opacity:.85; background-image: radial-gradient(circle 1.5px at 20px 10px,rgba(255,255,255,.72) 100%,transparent 0), radial-gradient(circle 1.5px at 74px 44px,rgba(255,255,255,.50) 100%,transparent 0), radial-gradient(circle 1.5px at 118px 22px,rgba(255,255,255,.66) 100%,transparent 0), radial-gradient(circle 1.5px at 46px 92px,rgba(255,255,255,.44) 100%,transparent 0), radial-gradient(circle 1.5px at 100px 112px,rgba(255,255,255,.62) 100%,transparent 0), radial-gradient(circle 1.5px at 8px 138px,rgba(255,255,255,.40) 100%,transparent 0), radial-gradient(circle 1.5px at 138px 152px,rgba(255,255,255,.58) 100%,transparent 0); background-size:160px 180px; animation:fall 12s linear infinite} @keyframes fall{from{background-position:0 0}to{background-position:-26px 180px}} .vig{position:fixed;inset:0;z-index:10;pointer-events:none; box-shadow:inset 0 0 170px 8px rgba(8,3,26,.42)} /* ========================================================================== 2. THE COURSE — the piste is an SVG the page's terrain is cut out of The slope is NOT a straight column: site.js draws two wandering, pixel- stepped snow edges lined with red B-net safety fencing, tiles them, and shifts the whole thing by scrollY so the terrain flows past the racer. `--pct` / `--pcb` clip it to the stretch between the start shed and the finish banner, so the hero viewport never contains a strip of piste. ========================================================================== */ .railwrap{position:fixed;inset:0;z-index:1;pointer-events:none} .railwrap.front{z-index:4} .railwrap .inner{max-width:var(--wrap);margin:0 auto;height:100%;position:relative} /* the svg is inset by --net so the fencing can hang outside the snow */ .piste{position:absolute;left:calc(20px - var(--net));top:0;height:100%; width:calc(var(--rail) + var(--net) * 2);overflow:visible; clip-path:inset(var(--pct,100%) 0 var(--pcb,0px) 0); /* the run-out: the course dissolves back into the dusk past the last gate */ -webkit-mask-image:linear-gradient(180deg,#000 0 var(--pmf,100%),rgba(0,0,0,0) var(--pmb,100%)); mask-image:linear-gradient(180deg,#000 0 var(--pmf,100%),rgba(0,0,0,0) var(--pmb,100%))} /* --- the racer ---------------------------------------------------------- */ .racer{position:absolute;left:calc(20px + var(--rx));top:var(--ry);width:var(--rail); height:var(--skh);z-index:4;pointer-events:none;opacity:var(--rop,1)} /* One character: neutral tuck, left/right carve, the two pole-plant frames, deep tuck, push-off, parked, and the two celebration beats. EVERY frame is drawn on the same 28-cell grid — 22 cells of athlete with three cells of margin each side for his POLES — so they all get the same box and the same centre line. It used to be 22 for most of them and 28 for the two carves, and that is why the poles were stubs: on a 22-cell canvas there is nowhere for a pole to be except on top of the glove. */ .racer .sk{position:absolute;left:50%;top:0;height:var(--skh);opacity:0; width:calc(var(--skw) / 22 * 28);margin-left:calc(var(--skw) / 22 * -14); background-repeat:no-repeat;background-size:100% 100%;image-rendering:pixelated} .sk-t{background-image:var(--sp-race_t)} .sk-d{background-image:var(--sp-race_d)} .sk-p{background-image:var(--sp-race_p)} .sk-s{background-image:var(--sp-race_s)} .sk-l{background-image:var(--sp-race_l)} .sk-r{background-image:var(--sp-race_r)} .sk-c1{background-image:var(--sp-race_c1)} .sk-c2{background-image:var(--sp-race_c2)} /* the same two carves at the instant the inside pole goes in */ .sk-lp{background-image:var(--sp-race_lp)} .sk-rp{background-image:var(--sp-race_rp)} .racer[data-pose="t"] .sk-t,.racer[data-pose="d"] .sk-d,.racer[data-pose="p"] .sk-p, .racer[data-pose="s"] .sk-s, .racer[data-pose="l"] .sk-l,.racer[data-pose="r"] .sk-r, .racer[data-pose="lp"] .sk-lp,.racer[data-pose="rp"] .sk-rp{opacity:1} /* the finish: two frames hard-cut into a fist pump, then he holds it */ .racer[data-pose="c"] .sk-c1{opacity:1;animation:cel1 .34s steps(1,end) infinite} .racer[data-pose="c"] .sk-c2{opacity:0;animation:cel2 .34s steps(1,end) infinite} @keyframes cel1{0%,49.9%{opacity:1}50%,100%{opacity:0}} @keyframes cel2{0%,49.9%{opacity:0}50%,100%{opacity:1}} /* a short burst of snow-kick confetti off the tails, then gone */ .racer .cheer{position:absolute;left:50%;top:calc(var(--skh) * .30); width:2px;height:2px;margin-left:-1px;opacity:0; box-shadow: -30px 0 0 3px var(--vio-l), 26px 4px 0 3px var(--cream), -14px -14px 0 2px var(--vio-l2), 18px -18px 0 2px var(--vio-l), -40px 14px 0 2px var(--cream), 38px 16px 0 3px var(--vio-l2), 0 -26px 0 2px var(--vio-l)} .racer[data-pose="c"] .cheer{animation:cheer 1.5s steps(6,end) 2} @keyframes cheer{ 0%{opacity:0;transform:translateY(10px) scale(.5)} 18%{opacity:1;transform:translateY(-4px) scale(1)} 70%{opacity:.85;transform:translateY(-22px) scale(1.15)} 100%{opacity:0;transform:translateY(-34px) scale(1.25)}} @media (prefers-reduced-motion:reduce){ .racer[data-pose="c"] .sk-c1{animation:none;opacity:1} .racer[data-pose="c"] .sk-c2{display:none} .racer[data-pose="c"] .cheer{animation:none;opacity:0}} /* contact shadow: without it he floats a few pixels above the piste */ .racer::after{content:"";position:absolute;left:50%;top:calc(var(--skh) * .84); width:calc(var(--skw) * .62);height:12px;margin-left:calc(var(--skw) * -.31); border-radius:50%;background:radial-gradient(ellipse,rgba(58,36,120,.42),rgba(58,36,120,0) 70%)} /* snow thrown off the edged ski, on the inside of the turn */ .racer .spray{position:absolute;top:calc(var(--skh) * .82);width:38px;height:22px; background-image:var(--sp-puff);background-repeat:no-repeat;background-size:100% 100%; image-rendering:pixelated;opacity:0;transition:opacity .12s linear} .racer .spray.l{left:50%;margin-left:calc(var(--skw) / -2 - 12px)} .racer .spray.r{left:50%;margin-left:calc(var(--skw) / 2 - 26px);transform:scaleX(-1)} .racer[data-pose="l"] .spray.l,.racer[data-pose="r"] .spray.r, .racer[data-pose="lp"] .spray.l,.racer[data-pose="rp"] .spray.r{opacity:var(--sp,0)} /* THE POLE PLANT'S OWN SNOW. A planted tip throws a small burst where it goes in, and that burst is most of what says "planted" rather than "held low". It sits at the tip of the drawn shaft: cell 21.5 of the 28-cell frame, which is .341 of the frame's width right of centre — keep the two in step if the plant ladder in sprites.py ever moves. Smaller than the ski spray, because it is one tip and not two edged skis. */ .racer .tip{position:absolute;top:calc(var(--skh) * .855);width:26px;height:16px; background-image:var(--sp-puff);background-repeat:no-repeat;background-size:100% 100%; image-rendering:pixelated;opacity:0;transition:opacity .1s linear} .racer .tip.pr{left:50%;margin-left:calc(var(--skw) / 22 * 28 * .341 - 13px)} .racer .tip.pl{left:50%;margin-left:calc(var(--skw) / 22 * 28 * -.341 - 13px);transform:scaleX(-1)} .racer[data-pose="rp"] .tip.pr,.racer[data-pose="lp"] .tip.pl{ opacity:.9;animation:sprayjit 200ms steps(3,end) infinite} /* the carved line, drawn in page space and clipped to end at the skis */ .trail{position:absolute;left:calc(20px - var(--net));top:0;height:100%; width:calc(var(--rail) + var(--net) * 2);overflow:visible;pointer-events:none; clip-path:inset(var(--tct,100%) 0 var(--tcb,100%) 0); -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) var(--tf0,0px),#000 var(--tf1,0px)); mask-image:linear-gradient(180deg,rgba(0,0,0,0) var(--tf0,0px),#000 var(--tf1,0px))} /* foreground snow streaming past faster than the ground: pure speed cue */ .rush{position:absolute;left:calc(20px - var(--net));top:0;height:100%; width:calc(var(--rail) + var(--net) * 2);pointer-events:none;opacity:.5; clip-path:inset(var(--pct,100%) 0 var(--pcb,100%) 0); background-image: radial-gradient(circle 2px at 24px 18px,rgba(255,255,255,.85) 100%,transparent 0), radial-gradient(circle 1.5px at 118px 74px,rgba(255,255,255,.7) 100%,transparent 0), radial-gradient(circle 2px at 66px 132px,rgba(255,255,255,.75) 100%,transparent 0), radial-gradient(circle 1.5px at 168px 40px,rgba(255,255,255,.6) 100%,transparent 0), radial-gradient(circle 2px at 210px 158px,rgba(255,255,255,.8) 100%,transparent 0), radial-gradient(circle 1.5px at 8px 190px,rgba(255,255,255,.55) 100%,transparent 0); background-size:250px 230px; background-position-y:calc(var(--sy) * 1.34px)} /* THE START HOUSE — the hero's ONLY scene element, planted bottom-left on the snow field, exactly where the course starts. The sprite is a raised timing hut on timber posts with an open bay under it; the athlete, the sign and the light tree are HTML layered into that bay. Percentages below are read straight off the 64 x 62 sprite grid: posts x10-14 / x49-53 bay x15..x48 (centre 49.2%) banner x13..x50, rows 28-35 (top 45.2%, 11.3% tall) deck surface row 51 (bottom 17.7%) Nothing here may re-create the two shapes that made this read as a video player: a filled dark interior, or a full-width horizontal bar under the sprite. The bay stays OPEN SKY — nothing crosses it, so the warm-up cycle is visible from the first frame. */ .shed{position:absolute;left:0;bottom:30px;transform:translateY(var(--par,0px)); width:var(--shedw);height:var(--shedh); background-image:var(--sp-start_house);background-repeat:no-repeat;background-size:100% 100%; image-rendering:pixelated;z-index:4} /* the START banner's own lettering, printed on the slung fabric */ .shed .sign{position:absolute;left:21.5%;right:21.5%;top:45.2%;height:11.3%; display:flex;align-items:center;justify-content:center; font-family:var(--mono);font-size:10px;letter-spacing:.11em;color:#f4f0ff;font-weight:700; text-shadow:0 1px 0 rgba(24,10,64,.6);white-space:nowrap} /* THE START BURST. There used to be a start wand slung across the bay — a knee-high violet bar that sat straight over the athlete's body and hid the entire warm-up cycle. It is gone. The bay is open sky, you watch him stretch, and the first scroll simply kicks a rooster-tail of snow out of the gate as he goes. Nothing crosses the opening at any viewport. */ .kick{position:absolute;left:49.2%;bottom:14%;width:76px;height:30px;margin-left:-38px;z-index:6; background-image:var(--sp-puff);background-repeat:no-repeat;background-size:100% 100%; image-rendering:pixelated;opacity:0;pointer-events:none} html[data-race="run"] .kick{animation:kickoff 620ms steps(5,end) 1 both} @keyframes kickoff{ 0%{opacity:0;transform:translate(6px,6px) scale(.4)} 16%{opacity:1;transform:translate(0,0) scale(.8)} 55%{opacity:.9;transform:translate(-26px,10px) scale(1.35)} 100%{opacity:0;transform:translate(-58px,20px) scale(1.9)}} /* the start light tree, bolted to the left post */ .beeps{position:absolute;left:19.5%;top:56%;transform:translateX(-50%);z-index:6; display:flex;flex-direction:column;gap:4px;padding:4px; background:#160c38;border:2px solid var(--ink);box-shadow:2px 2px 0 rgba(8,3,26,.5)} .beeps i{width:8px;height:8px;border:1px solid rgba(255,255,255,.45);background:#2a1b5e} .beeps i.on{background:#ffd9c4;border-color:#fff} .beeps i.go{background:#4ade80;border-color:#eafff2} /* --- the racer warming up in the shed ---------------------------------- */ /* Four hand-drawn frames, hard-cut with long holds between them: stand, side stretch, pole check, ski-to-ski shift. No tweening anywhere. */ /* integer 4x of the 24x18 grid, so the warm-up frames stay pixel-crisp */ .idler{position:absolute;left:49.2%;margin-left:-36px;bottom:17.7%;width:72px;height:54px;z-index:5} .idler .f{position:absolute;inset:0;background-repeat:no-repeat;background-size:100% 100%; image-rendering:pixelated;opacity:0} .idler .fa{background-image:var(--sp-skier_idle_a)} .idler .fb{background-image:var(--sp-skier_idle_b)} .idler .fc{background-image:var(--sp-skier_idle_c)} .idler .fd{background-image:var(--sp-skier_idle_d)} .idler .fe{background-image:var(--sp-skier_idle_e)} .idler .ff{background-image:var(--sp-skier_idle_f)} .idler .fa{opacity:1} /* Six warm-up beats on ONE timeline. Every frame is GENERATED from the same segment list, so exactly one of them is opaque at any instant — hand-tuned per-frame keyframes drift against each other and the skier double-exposes: 0.0% - 22.0% stand 22.0% - 28.0% a breath in the cold 28.0% - 34.0% stand 34.0% - 38.0% side stretch 38.0% - 41.0% pole check 41.0% - 45.0% side stretch 45.0% - 55.0% stand 55.0% - 59.0% ski to ski 59.0% - 62.0% stand 62.0% - 66.0% ski to ski 66.0% - 74.0% stand 74.0% - 80.0% neck roll 80.0% - 84.0% stand 84.0% - 88.0% neck roll 88.0% - 100.0% stand */ .idler .fa{animation:idl-a 7.8s steps(1,end) infinite} .idler .fb{animation:idl-b 7.8s steps(1,end) infinite} .idler .fc{animation:idl-c 7.8s steps(1,end) infinite} .idler .fd{animation:idl-d 7.8s steps(1,end) infinite} .idler .fe{animation:idl-e 7.8s steps(1,end) infinite} .idler .ff{animation:idl-f 7.8s steps(1,end) infinite} @keyframes idl-a{0%{opacity:1} 21.9%{opacity:1} 22%{opacity:0} 27.9%{opacity:0} 28%{opacity:1} 33.9%{opacity:1} 34%{opacity:0} 44.9%{opacity:0} 45%{opacity:1} 54.9%{opacity:1} 55%{opacity:0} 58.9%{opacity:0} 59%{opacity:1} 61.9%{opacity:1} 62%{opacity:0} 65.9%{opacity:0} 66%{opacity:1} 73.9%{opacity:1} 74%{opacity:0} 79.9%{opacity:0} 80%{opacity:1} 83.9%{opacity:1} 84%{opacity:0} 87.9%{opacity:0} 88%{opacity:1} 100%{opacity:1}} @keyframes idl-b{0%{opacity:0} 33.9%{opacity:0} 34%{opacity:1} 37.9%{opacity:1} 38%{opacity:0} 40.9%{opacity:0} 41%{opacity:1} 44.9%{opacity:1} 45%{opacity:0} 100%{opacity:0}} @keyframes idl-c{0%{opacity:0} 37.9%{opacity:0} 38%{opacity:1} 40.9%{opacity:1} 41%{opacity:0} 100%{opacity:0}} @keyframes idl-d{0%{opacity:0} 54.9%{opacity:0} 55%{opacity:1} 58.9%{opacity:1} 59%{opacity:0} 61.9%{opacity:0} 62%{opacity:1} 65.9%{opacity:1} 66%{opacity:0} 100%{opacity:0}} @keyframes idl-e{0%{opacity:0} 73.9%{opacity:0} 74%{opacity:1} 79.9%{opacity:1} 80%{opacity:0} 83.9%{opacity:0} 84%{opacity:1} 87.9%{opacity:1} 88%{opacity:0} 100%{opacity:0}} @keyframes idl-f{0%{opacity:0} 21.9%{opacity:0} 22%{opacity:1} 27.9%{opacity:1} 28%{opacity:0} 100%{opacity:0}} /* the moment the run starts, the shed empties and the fixed racer takes over */ html[data-race="run"] .idler{opacity:0;visibility:hidden} html[data-race="run"] .idler .f{animation-play-state:paused} html[data-race="idle"] .racer{opacity:0} /* ========================================================================== 3. RACE GATES ========================================================================== */ /* gates are planted in the snow: left edge of the piste column is `20px` inside the wrap, and .page is inset by --pad, hence 20 - pad */ /* A gate is what it is on a real hill: TWO poles with one fabric panel slung between them. The turning pole (.pn) is the OUTBOARD one — the one the racer rounds — the far pole sits back across the fall line, and the panel spans pole centre to pole centre so it reads as tied to them instead of floating in front. --s flips the whole gate to the other side, so consecutive gates slalom. --gapx is `rail * --amp - --gin`, which puts the turning pole INBOARD of the racing line: the racer's apex is outboard of the whole structure and he passes around it with clear snow under his skis. The panel is also shorter than it was (--gwf), for the same reason — a banner that reached the edge of the piste left nowhere to go around. */ .gate{position:absolute;left:calc(20px - var(--pad));top:0;width:var(--rail);height:172px; pointer-events:none;z-index:3; --s:-1;--gapx:calc(var(--rail) * var(--amp) - var(--gin)); --gw:calc(var(--rail) * var(--gwf)); /* the sag, as the panel's own outline and its fill, 2px apart */ --sag-o:polygon(0 0,16% 3px,36% 5px,50% 6px,64% 5px,84% 3px,100% 0, 100% 44px,84% 49px,64% 53px,50% 54px,36% 53px,16% 49px,0 44px); --sag-i:polygon(0 0,16% 3px,36% 5px,50% 6px,64% 5px,84% 3px,100% 0, 100% 40px,84% 45px,64% 49px,50% 50px,36% 49px,16% 45px,0 40px)} /* The rod carries a FULL-STRENGTH 2px ink edge and a hard pixel drop shadow. It used to be a 1px 85%-alpha edge with no shadow, which is a line that half-dissolves the moment the pole is standing on white snow instead of dusk — the top of the course, exactly where gate 1 lives. Width is unchanged (border-box), so the gradient stops move in by the 2px the border now eats: the lit face is 2-4, the roll-off 4-5, the shaded flank 8-10. */ .gate .pole{position:absolute;bottom:0;width:12px;height:138px;z-index:2; background: linear-gradient(90deg,rgba(255,255,255,.42) 2px 4px,rgba(255,255,255,.16) 4px 5px, rgba(0,0,0,0) 5px 8px,rgba(6,2,20,.42) 8px 10px), repeating-linear-gradient(180deg,var(--vio) 0 18px,var(--ink) 18px 36px); border:2px solid var(--ink);transform-origin:50% 100%; box-shadow:3px 3px 0 rgba(10,4,32,.42)} /* cap on top, so a pole is a rod and not a stripe that stops */ .gate .pole::before{content:"";position:absolute;left:-3px;right:-3px;top:-6px;height:7px; background:var(--vio-l);border:2px solid var(--ink); box-shadow:3px 3px 0 rgba(10,4,32,.42)} /* Where the pole is planted: a dark pool the rod stands in, with the kicked cup of snow sitting on top of it. The cup alone was white-on-white — the pole read as ending in mid-air anywhere the snow was bright. */ .gate .pole::after{content:"";position:absolute;left:-8px;bottom:-6px;width:28px;height:11px; background: radial-gradient(ellipse at 48% 24%,rgba(255,255,255,.95) 0 46%,rgba(220,212,240,0) 74%), radial-gradient(ellipse at 54% 68%,rgba(10,4,32,.40) 0 42%,rgba(10,4,32,0) 70%)} /* ONE POLE MOVES. The turning pole is the one he hits, so it is the only one that ever leaves vertical; --hit is written per frame by site.js and already carries the spring, so there is no transition here to fight it. The far pole used to carry a counter-rotation of its own (--hit2) and the two of them splayed in opposite directions, which is what turned a struck gate into a banner floating over two spider legs. It is planted, and it stays planted. */ .gate .pn{left:calc(50% + var(--s) * var(--gapx) - 6px); transform:rotate(calc(var(--s) * var(--hit,0deg)))} .gate .pf{left:calc(50% + var(--s) * (var(--gapx) - var(--gw)) - 6px)} /* the fabric. .panel is the ink outline; ::before is the cloth inside it, and both carry the same sag so the hem droops without losing the 2px edge. */ .gate .panel{position:absolute;left:50%;width:calc(var(--gw) + 14px); margin-left:calc((var(--gw) + 14px) / -2);bottom:86px;height:54px;z-index:1; background:var(--ink);clip-path:var(--sag-o); filter:drop-shadow(4px 4px 0 rgba(10,4,32,.55)); display:flex;align-items:center; transform:translate(calc(var(--s) * (var(--gapx) - var(--gw) / 2) + var(--shx,0px)),0); will-change:transform} .gate .panel::before{content:"";position:absolute;inset:2px;clip-path:var(--sag-i)} .gate .gn,.gate .gl{position:relative;z-index:1} /* the number is printed ON the cloth, in a bib patch */ .gate .gn{flex:none;width:28px;height:28px;margin:0 0 8px 10px; display:flex;align-items:center;justify-content:center; border:2px solid var(--ink);box-shadow:2px 2px 0 rgba(10,4,32,.4); font-family:var(--mono);font-size:16px;font-weight:700;line-height:1} .gate .gl{flex:1;padding:0 12px 8px 10px; font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase; font-weight:700;line-height:1.2} /* alternating panel tones, like a real slalom course. The hard-stop gradient is the cloth's shading: lit along the top hem, falling into shadow at the bottom where it bags out. */ The light half of both tones is CLOTH, never --cream: cream is the snow colour, and a banner painted in it is invisible over the piste. */ .gate[data-tone="a"] .panel{color:#fff} .gate[data-tone="a"] .panel::before{ background:linear-gradient(180deg,var(--vio-l2) 0 3px,var(--vio) 3px 30px,var(--vio-d) 30px 42px, var(--cloth) 42px 100%)} .gate[data-tone="a"] .gn{background:var(--cloth-l);color:var(--vio-t)} .gate[data-tone="b"] .panel{color:var(--vio-t)} .gate[data-tone="b"] .panel::before{ background:linear-gradient(180deg,var(--cloth-l) 0 3px,var(--cloth) 3px 30px,var(--cloth-d) 30px 42px, var(--vio) 42px 100%)} .gate[data-tone="b"] .gn{background:var(--vio);color:#fff} .gate .puff{position:absolute;left:calc(50% + var(--s) * var(--gapx) - 40px);bottom:-8px;z-index:3; width:74px;height:44px; background-image:var(--sp-puff);background-repeat:no-repeat;background-size:100% 100%; image-rendering:pixelated;opacity:0;transform:translate(0,0) scale(.7)} .gate.hit .puff{opacity:1;animation:puff 420ms steps(4) forwards} @keyframes puff{ 0%{opacity:.95;transform:translate(0,4px) scale(.6)} 60%{opacity:.7;transform:translate(-16px,-10px) scale(1.15)} 100%{opacity:0;transform:translate(-30px,-20px) scale(1.5)} } /* a struck gate keeps a halo, but a WHITE one is nothing over white snow — the violet reads on the piste and on the dusk below it alike */ .gate.passed .panel{filter:drop-shadow(4px 4px 0 rgba(10,4,32,.55)) drop-shadow(0 0 3px rgba(109,74,255,.65))} /* ========================================================================== 4. CHRONO HUD ========================================================================== */ /* The chrono lives in --gut, the reserved lane to the right of the content, so at desktop widths nothing ever passes beneath it. Below that the lane is gone, so site.js measures the HUD against every text block on screen and ducks it: full -> mini pill -> out of the way entirely. */ .hud{position:fixed;right:clamp(12px,2vw,26px);top:clamp(12px,2.2vh,24px);z-index:20; width:184px;background:#120b32;border:2px solid var(--ink); box-shadow:5px 5px 0 rgba(6,2,20,.6);font-family:var(--mono);color:#e9e2ff; transition:opacity .16s linear} .hud[data-duck="1"]{opacity:0;visibility:hidden} @media (min-width:641px){ .hud[data-fit="mini"]{width:auto;display:flex;align-items:stretch} .hud[data-fit="mini"] .bar{border-bottom:0;border-right:2px solid var(--ink);padding:7px 8px} .hud[data-fit="mini"] .bar span:not(.bulb),.hud[data-fit="mini"] .bar .x{display:none} .hud[data-fit="mini"] .t{padding:7px 11px 6px;font-size:18px} .hud[data-fit="mini"] .t .ms{font-size:12px} .hud[data-fit="mini"] .meta,.hud[data-fit="mini"] .splits{display:none} } .hud .bar{display:flex;align-items:center;gap:8px;padding:5px 8px; border-bottom:2px solid var(--ink);background:var(--cream);color:var(--ink); font-size:9px;letter-spacing:.16em;font-weight:700} .hud .bar .x{margin-left:auto;width:12px;height:12px;border:1.5px solid var(--ink); display:flex;align-items:center;justify-content:center;font-size:8px;line-height:1} .hud .t{padding:9px 10px 6px;font-size:26px;letter-spacing:.02em;font-weight:700; color:#fff;font-variant-numeric:tabular-nums;line-height:1} .hud .t .ms{font-size:16px;color:var(--vio-l)} .hud .meta{padding:0 10px 8px;font-size:8.5px;letter-spacing:.14em;color:#9b8ecb} .hud .splits{border-top:2px solid #2a1c60;padding:6px 10px 9px;display:flex;flex-direction:column;gap:3px; font-size:9px;letter-spacing:.08em;min-height:22px} .hud .splits div{display:flex;gap:8px;color:#c3b7ee;white-space:nowrap;overflow:hidden} .hud .splits div span:nth-child(2){overflow:hidden;text-overflow:clip} .hud .splits div b{color:#fff;font-weight:700;margin-left:auto;font-variant-numeric:tabular-nums} .hud .splits div.new{color:#fff;animation:flash 500ms steps(2) 2} @keyframes flash{0%,100%{background:transparent}50%{background:rgba(109,74,255,.55)}} .hud .bulb{width:8px;height:8px;background:#4ade80;flex:none} .hud[data-state="idle"] .bulb{background:#7b6fae} .hud[data-state="fin"] .bulb{background:#ffd9c4} /* ========================================================================== 5. PAGE + WINDOW-CHROME PANELS ========================================================================== */ .page{position:relative;z-index:3;max-width:var(--wrap);margin:0 auto; padding:0 var(--gut) 0 var(--pad)} section{position:relative} .win{background:var(--cream);color:var(--ink);border:2px solid var(--ink); box-shadow:7px 7px 0 rgba(8,3,26,.55);margin:0 0 22px} .win>.wbar{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:2px solid var(--ink); font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;font-weight:700;color:var(--ink); background:var(--snow2)} .win>.wbar .dots{display:flex;gap:4px} .win>.wbar .dots i{width:8px;height:8px;border:1.5px solid var(--ink);background:var(--cream)} .win>.wbar .x{margin-left:auto;width:13px;height:13px;border:1.5px solid var(--ink); display:flex;align-items:center;justify-content:center;font-size:8px;line-height:1} .win>.wbody{padding:clamp(16px,2vw,24px)} .win.dark{background:#170e3c;color:#e7e1fb;border-color:#0b0426} .win.dark>.wbar{background:#241663;color:#e7e1fb;border-bottom-color:#0b0426} .win.dark>.wbar .dots i{background:#170e3c;border-color:#c9bcf5} .win.dark>.wbar .x{border-color:#c9bcf5} /* section headers */ .shead{margin:0 0 18px;position:relative} .shead>*{position:relative;z-index:1} .shead .k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase; color:var(--vio-l);font-weight:700;margin:0 0 10px;display:flex;align-items:center;gap:10px} .shead .k::before{content:"";width:34px;border-top:2px solid var(--vio-l2)} .shead h2{font-family:var(--ser);font-weight:400;font-size:clamp(26px,3vw,38px);line-height:1.1; letter-spacing:-.02em;color:var(--cream);margin:0 0 10px} .shead p{margin:0;max-width:52ch;color:#d9d0f7;font-size:clamp(14.5px,1.1vw,16.5px)} .sec{padding:clamp(64px,9vh,120px) 0 clamp(20px,3vh,40px)} /* ========================================================================== 6. HERO ========================================================================== */ /* The hero owns the whole canvas: it steps back out of the page's piste gutter so the lockup starts at the left edge of the wrap. The only scene element in it is the start shed on the snow field, bottom-left. */ .hero{position:relative;min-height:100svh;min-height:100vh; display:flex;flex-direction:column;justify-content:center; margin-left:calc(20px - var(--pad)); padding-top:clamp(28px,5vh,64px);padding-bottom:clamp(176px,25vh,268px)} .hero .grid{display:grid;grid-template-columns:minmax(0,1fr) 224px; gap:clamp(24px,3vw,44px);align-items:start;position:relative;z-index:3} .hero .grid>*{min-width:0} /* a full-bleed wash under the hero copy: it runs off the left edge of the window and fades out before the right, so it never reads as a slab */ .hero::before{content:"";position:absolute;z-index:0;pointer-events:none; top:0;bottom:0;right:0;left:-50vw; background:linear-gradient(90deg,rgba(10,4,28,.72) 0%,rgba(10,4,28,.66) 52%, rgba(10,4,28,.40) 66%,rgba(10,4,28,0) 80%); -webkit-mask-image:linear-gradient(180deg,#000 0 56%,rgba(0,0,0,0) 88%); mask-image:linear-gradient(180deg,#000 0 56%,rgba(0,0,0,0) 88%)} /* The snow shelf the shed stands on: full-bleed, pixel-stepped top AND bottom. It is opaque and it ends exactly at the fold, so the course can begin underneath it — no piste ever appears in the hero — and the first scroll reveals the run emerging from under the cornice. */ .hero .field{position:absolute;z-index:1;bottom:-26px;transform:translateY(var(--par,0px));height:clamp(236px,27vh,290px); left:calc(-1 * (max(0px,(100vw - var(--wrap)) / 2) + 20px));width:100vw; background:linear-gradient(180deg,var(--snow) 0 38%,#f6f2fb 76%,#e7e0f2 100%); filter:drop-shadow(0 4px 0 rgba(18,8,48,.52)); clip-path:polygon(0% 30px,7% 18px,15% 27px,23% 14px,32% 24px,41% 11px,50% 22px, 59% 13px,68% 26px,77% 16px,86% 28px,94% 18px,100% 27px, 100% calc(100% - 13px),92% calc(100% - 4px),84% calc(100% - 15px), 74% calc(100% - 6px),64% calc(100% - 17px),54% calc(100% - 4px), 44% calc(100% - 13px),34% calc(100% - 2px),24% calc(100% - 15px), 14% calc(100% - 6px),6% calc(100% - 14px),0% calc(100% - 4px))} .hero .field::after{content:"";position:absolute;inset:0;opacity:.6; background-image:repeating-conic-gradient(var(--snow2) 0 25%,transparent 0 50%); background-size:6px 6px; -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,0) 86%); mask-image:linear-gradient(180deg,#000,rgba(0,0,0,0) 86%)} /* --- the credential, as a race bib --- Hung off a pin toward the middle of the hero rather than pinned in the far corner: it is a centrepiece over the scene. The whole assembly tilts a few degrees off vertical and sways very slightly, like something actually hanging there. It is placed to clear both the headline and the chrono. */ .bib-hold{position:relative;padding-top:62px;display:flex;justify-content:center; margin-right:clamp(0px,4.4vw,74px);margin-left:clamp(-96px,-5vw,0px); transform:rotate(-5deg);transform-origin:50% 22px} .bib-pin{position:absolute;top:26px;left:50%;margin-left:-9px;width:18px;height:18px; border:2px solid var(--ink);border-radius:50%;background:transparent} .bib-pin::after{content:"";position:absolute;left:6px;top:14px;width:2px;height:24px;background:var(--ink)} .bib{position:relative;width:206px;background:#fff;border:2px solid var(--ink); box-shadow:7px 8px 0 rgba(11,4,34,.5);transform-origin:50% 0;color:var(--ink); animation:bibsway 9s ease-in-out infinite alternate} @keyframes bibsway{from{transform:rotate(1.6deg)}to{transform:rotate(-1.2deg)}} .bib-bar{display:flex;align-items:center;gap:8px;padding:5px 9px;border-bottom:2px solid var(--ink); font-family:var(--mono);font-size:9px;letter-spacing:.16em;font-weight:700} .bib-bar .x{margin-left:auto;width:13px;height:13px;border:1.5px solid var(--ink); display:flex;align-items:center;justify-content:center;font-size:8px;line-height:1} .bib-hole{position:absolute;left:50%;margin-left:-7px;top:32px;width:10px;height:10px;border-radius:50%; background:#241663;border:2px solid var(--ink);z-index:2} .bib-no{display:flex;align-items:baseline;justify-content:center;gap:8px;padding:20px 10px 6px; border-bottom:2px dashed var(--ink)} .bib-no b{font-family:var(--mono);font-size:38px;font-weight:700;line-height:.9;letter-spacing:.02em} .bib-no span{font-family:var(--mono);font-size:8px;letter-spacing:.18em;color:#5a5372} .bib-name{padding:7px 10px;text-align:center;font-family:var(--mono);font-size:9px; letter-spacing:.14em;font-weight:700;background:var(--vio);color:#fff; border-bottom:2px solid var(--ink)} /* BOTH Anthropic credentials ride the bib, each in its own crop window. Credly's embed script REPLACES the div it is handed with a bare iframe, so the crop has to live on .cw — the one wrapper that always survives — and the iframe is placed from .cw's own top-left corner rather than from whatever the script left behind. Targeting the authored div alone is what once made the real badge vanish behind the fallback mark. Inside Credly's 150x270 frame the artwork is a 105x105 image at (22.5,23), identical for every badge, and the title Credly truncates with an ellipsis starts at y=152. Scaling the frame by --s about its TOP CENTRE keeps the art horizontally centred for free; --t then lifts it so the art sits vertically centred inside --h and the title lands below the crop, where it never paints. --t = (--h - 105 * --s) / 2 - 23 * --s At --s:.70/--h:86px that puts the title at y=96.6, a clear 10.6px below the window. The window is a --h square, so the 73.5px artwork sits inside even 6.25px margins on all four sides; being narrower than the scaled 105px card also crops off Credly's own card edges, which otherwise ruled two faint vertical lines either side of each badge. */ .bib-badge{display:block;overflow:hidden;height:auto;padding:0;position:relative} .bcu{border-top:2px dashed rgba(20,11,48,.28)} .bcu:first-child{border-top:0} .cw{--s:.70;--h:86px;position:relative;overflow:hidden; width:var(--h);height:var(--h);margin:5px auto 0} .cw iframe{position:absolute;top:-9.85px;left:50%;margin-left:-75px; width:150px!important;height:280px!important;max-width:150px;border:0;display:block; transform:scale(var(--s));transform-origin:50% 0} /* Credly down: drop the empty windows but keep the printed labels, so the bib still says what it certifies. .bib-fb supplies the mark above them. */ .bib .nocred .bib-badge,.bib.nocred .bib-badge{display:block} .bib.nocred .cw{display:none} .bib-cred{padding:5px 8px 9px;text-align:center;border-top:0} .bib-cred b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.17em; font-weight:700;color:var(--ink);line-height:1.2} .bib-cred i{display:block;margin-top:3px;font-family:var(--ser);font-style:italic; font-size:12px;color:var(--vio-t)} .bib-fb{display:none;justify-content:center;padding:22px 6px 14px} .bib.nocred .bib-fb{display:flex} .bib-fb .m{width:46px;height:46px;border-radius:50%;background:var(--vio); box-shadow:inset -14px 0 0 #fff;border:2px solid var(--ink)} .bib-f{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px; background:#f4f0ff;border-top:2px solid var(--ink); font-family:var(--mono);font-size:8px;letter-spacing:.15em;color:#5a5372} .bib-f .n{color:var(--ink)} .say{max-width:none;position:relative} .say>*{position:relative;z-index:1} .shead::before{content:"";position:absolute;inset:-32px -110px -28px -56px;pointer-events:none; background:radial-gradient(96% 118% at 24% 48%,rgba(11,5,30,.76),rgba(11,5,30,0) 72%)} @media (max-width:1000px){.shead::before{inset:-22px -24px; background:linear-gradient(180deg,rgba(11,5,30,.62),rgba(11,5,30,.72))}} /* The brand mark reads first and reads big, but the headline still wins the page: mono caps against the serif H1, so they never compete for the same kind of attention. */ .lock{display:flex;flex-direction:column;line-height:1.16;margin-bottom:30px} .lock-n{font-family:var(--mono);font-size:clamp(19px,2vw,29px);letter-spacing:.16em; font-weight:700;color:var(--cream);text-shadow:0 2px 0 rgba(14,6,40,.4)} .lock-b{font-family:var(--ser);font-style:italic;font-size:clamp(13.5px,1.15vw,17px); color:var(--vio-l);margin-top:7px;letter-spacing:.01em} footer .lock{line-height:1.3} footer .lock-n{font-size:13px;letter-spacing:.17em;text-shadow:none} footer .lock-b{font-size:12.5px;margin-top:2px} .eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--vio-l);font-weight:700;margin:0 0 14px} .eyebrow::before{content:"";display:block;width:54px;border-top:2px solid var(--vio-l2);margin-bottom:11px} .hero h1{font-family:var(--ser);font-weight:400;letter-spacing:-.023em;line-height:1.03; color:var(--cream);margin:0 0 20px;font-size:clamp(34px,4.6vw,62px); text-shadow:0 2px 0 rgba(16,7,48,.28)} @media (min-width:1181px){.hl-a,.hl-b{white-space:nowrap}} .sub{font-size:clamp(15px,1.35vw,19px);line-height:1.5;color:#ded5fb;max-width:44ch;margin:0 0 30px} .row{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px; letter-spacing:.11em;text-transform:uppercase;font-weight:700;padding:14px 20px; background:var(--vio);color:#fff;text-decoration:none; border:2px solid #efeaff;box-shadow:4px 4px 0 #150a3a;white-space:nowrap; transition:transform .08s steps(2),box-shadow .08s steps(2)} .cta:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 #150a3a} .cta:active{transform:translate(4px,4px);box-shadow:0 0 0 #150a3a} .cta.ghost{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:4px 4px 0 rgba(10,4,32,.4)} .chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px; letter-spacing:.02em;padding:14px 16px;cursor:pointer;min-height:46px; background:rgba(20,10,54,.42);color:#e9e2ff;border:2px solid var(--vio-l); box-shadow:3px 3px 0 rgba(11,4,34,.5);max-width:100%;white-space:nowrap; transition:transform .08s steps(2),box-shadow .08s steps(2);font-family:var(--mono)} .chip:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 rgba(11,4,34,.5)} .chip:active{transform:translate(3px,3px);box-shadow:0 0 0 rgba(11,4,34,.5)} .chip .st{color:var(--vio-l)} .chip.light{background:var(--cream);color:var(--ink);border-color:var(--ink);text-decoration:none} .chip.light .st{color:var(--vio-t)} .cta:focus-visible,.chip:focus-visible,summary:focus-visible{outline:2px solid #fff;outline-offset:3px} .scrollcue{margin-top:30px;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--vio-l);display:flex;align-items:center;gap:9px} .scrollcue i{width:9px;height:9px;border-right:2px solid var(--vio-l);border-bottom:2px solid var(--vio-l); transform:rotate(45deg);animation:bob 1.6s steps(2) infinite} @keyframes bob{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(3px,3px)}} /* ========================================================================== 7. SERVICES — three runs ========================================================================== */ .runs{display:grid;gap:18px} .run-h{display:flex;align-items:center;gap:11px;margin:0 0 4px} .run-h .mk{width:17px;height:17px;flex:none;border:2px solid var(--ink)} .mk.green{border-radius:50%;background:#2f8f5b} .mk.blue{background:#2b62c9} .mk.dia{background:#12091f;transform:rotate(45deg) scale(.84)} .run-h .lvl{font-family:var(--mono);font-size:9px;letter-spacing:.17em;text-transform:uppercase; color:#6b6285;font-weight:700} .run-t{font-family:var(--ser);font-size:clamp(20px,2.1vw,26px);line-height:1.18;margin:0 0 10px; letter-spacing:-.015em} .run-p{margin:0 0 16px;font-size:15px;line-height:1.6;color:#3a3352;max-width:60ch} .spec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0; border-top:2px solid var(--ink)} .spec div{padding:11px 12px 12px;border-right:2px solid rgba(20,11,48,.16)} .spec div:last-child{border-right:0} .spec dt{font-family:var(--mono);font-size:8.5px;letter-spacing:.15em;text-transform:uppercase; color:#6b6285;font-weight:700;margin:0 0 6px} .spec dd{margin:0;font-size:13px;line-height:1.45;color:var(--ink2)} /* ========================================================================== 8. WORK — recent runs ========================================================================== */ .cards{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))} .card{display:flex;flex-direction:column} .card .wbody{display:flex;flex-direction:column;gap:10px;flex:1} .card h3{font-family:var(--ser);font-size:clamp(18px,1.7vw,21px);line-height:1.22;margin:0; letter-spacing:-.012em} .card p{margin:0;font-size:14px;line-height:1.6;color:#3a3352} .card .tags{margin-top:auto;padding-top:12px;border-top:2px solid rgba(20,11,48,.14); display:flex;flex-wrap:wrap;gap:6px} .card .tags span{font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;text-transform:uppercase; color:var(--vio-t);border:1.5px solid rgba(91,52,240,.35);padding:3px 6px;font-weight:700} /* ========================================================================== 9. THE LIFT — one chairlift, on the hero, running The cable crests the ridge at the upper right and drops to a top station standing on the snow shelf. Chairs ride up it; each arrival hands off to a drop-off skier who takes a short run toward the start. Chair and skier share a duration AND a delay, so the hand-off never drifts out of sync: the chair reaches the station at 100% of its cycle, which is the same instant the skier's next cycle begins at 0%. ========================================================================== */ .lift{position:absolute;z-index:2;pointer-events:none;bottom:0; left:calc(-1 * (max(0px,(100vw - var(--wrap)) / 2) + 20px));width:100vw; height:clamp(300px,44vh,460px);overflow:hidden; transform:translateY(var(--par,0px)); --stx:48%; /* station, across the shelf */ --sty:96px; /* station, up off the hero's bottom edge */ --stw:180px; /* station width; the sprite is 48x34, so the box and the cable's anchor are both derived from this one number and stay in register at every breakpoint */ --dur:28s} .lift>i{position:absolute} /* The rope. It is a POSITIONING BOX ONLY — the cable itself is ::before. That split is the whole fix for a bug that had eaten every chair and every pylon on the site, desktop and phone alike: the fade at the far end used to be a mask-image ON .rope, and a mask clips its DESCENDANTS to the masked box. The rope box is 8px tall, so every chair hanging off it was being sliced down to an 8px stub. What looked like "no chairs on the mobile cable" was no chairs anywhere, for the same reason. The mask now lives on the pseudo-element, which has no children, and the chairs ride free. The rope is anchored to the BULL WHEEL inside the station's machine bay — (35/48, 13/34) of the station sprite — so the cable runs down out of the sky and terminates INSIDE the building, which then paints over the last stretch of it. It used to anchor above the roofline and stop in mid-air. */ .lift .rope{ left:calc(var(--stx) + var(--stw) * 0.2); bottom:calc(var(--sty) + var(--stw) / 48 * 34 * 0.618); width:min(72vw,860px);height:8px; transform-origin:0 0;transform:rotate(-13deg); --cw:56px;--ch:80px} .lift .rope::before{content:"";position:absolute;inset:0; background:linear-gradient(180deg,#180d43 0 4px,rgba(203,185,255,.3) 4px 7px, rgba(0,0,0,0) 7px 100%); /* solid at the station end, dissolving into the dusk at the ridge end */ -webkit-mask-image:linear-gradient(90deg,#000 0,#000 84%,rgba(0,0,0,0) 99%); mask-image:linear-gradient(90deg,#000 0,#000 84%,rgba(0,0,0,0) 99%)} .lift .rope>i{position:absolute;top:0} /* Anything that hangs on the cable is CENTRED on it by one rule, driven off --cw/--ch. The old per-breakpoint overrides mixed `left` and `margin-left` and ended up stacking both, which slid every chair up to a full sprite width off the cable — the detached chairs in the phone screenshots. */ .lift .pyl{left:var(--px);width:var(--cw);height:var(--ch);margin-left:calc(var(--cw) / -2); margin-top:-2px; background-image:var(--sp-pylon);background-repeat:no-repeat;background-size:100% 100%; image-rendering:pixelated;transform:rotate(13deg);transform-origin:50% 0} .lift .cab{left:0;width:100%;height:0;transform:translateX(var(--x)); animation:ride var(--dur) linear infinite;animation-delay:var(--t)} .lift .cab .w{position:absolute;left:calc(var(--cw) / -2);top:-4px; width:var(--cw);height:var(--ch); background-image:var(--sp-chair);background-repeat:no-repeat;background-size:100% 100%; image-rendering:pixelated;transform:rotate(13deg);transform-origin:50% 4px} .lift .cab.e .w{background-image:var(--sp-chair_empty)} /* A chair rides all the way in and is swallowed by the station sprite, which paints above the cable. It never blinks out over open snow. */ /* A chair fades in exactly where the cable does at the ridge end, rides all the way down and is swallowed by the station sprite, which paints above the rope. It never blinks out over open snow. */ @keyframes ride{ 0%{transform:translateX(106%);opacity:0} 9%{opacity:1} 100%{transform:translateX(-4%);opacity:1} } .lift .stn{left:var(--stx);bottom:var(--sty); width:var(--stw);height:calc(var(--stw) / 48 * 34); margin-left:calc(var(--stw) * -0.529); background-image:var(--sp-station);background-repeat:no-repeat;background-size:100% 100%; image-rendering:pixelated;z-index:2; /* a soft contact shadow, not a hard offset: the station now carries its own snow bank, and a 3px solid drop-shadow traced the bank's outline and made the whole thing read as a sticker laid on the piste */ filter:drop-shadow(0 2px 1px rgba(16,7,44,.30))} /* the drop-offs: unload at the station, short run away, gone */ /* The drop-offs. A different visitor every cycle: six colourways across two builds (beanie / helmet-and-daypack) crossed with four ways of leaving the station, so the top of the lift never hands off the same person twice. */ .lift .hop{left:var(--stx);bottom:calc(var(--sty) + 10px);width:64px;height:64px; margin-left:calc(var(--stw) * 0.18); background-image:var(--sp-guest_0);background-repeat:no-repeat;background-size:100% 100%; image-rendering:pixelated;opacity:0; animation:hopA var(--dur) linear infinite;animation-delay:var(--t)} .lift .hop.g0{background-image:var(--sp-guest_0)} .lift .hop.g1{background-image:var(--sp-guest_1)} .lift .hop.g2{background-image:var(--sp-guest_2)} .lift .hop.g3{background-image:var(--sp-guest_3)} .lift .hop.g4{background-image:var(--sp-guest_4)} .lift .hop.g5{background-image:var(--sp-guest_5)} .lift .hop.pA{animation-name:hopA} /* skates straight off, quickest */ .lift .hop.pB{animation-name:hopB} /* stops, looks around, then goes */ .lift .hop.pC{animation-name:hopC} /* fiddles with a binding first */ .lift .hop.pD{animation-name:hopD} /* ambles, drifts wide, takes his time */ @keyframes hopA{ 0%{opacity:0;transform:translate(12px,-8px)} 2%{opacity:1;transform:translate(0,0)} 10%{opacity:1;transform:translate(188px,36px)} 14%{opacity:0;transform:translate(244px,50px)} 100%{opacity:0;transform:translate(244px,50px)} } @keyframes hopB{ 0%{opacity:0;transform:translate(12px,-8px)} 2%{opacity:1;transform:translate(0,0)} 5%{opacity:1;transform:translate(34px,7px)} 11%{opacity:1;transform:translate(38px,8px)} 12%{opacity:1;transform:translate(34px,7px)} 20%{opacity:1;transform:translate(196px,38px)} 24%{opacity:0;transform:translate(244px,50px)} 100%{opacity:0;transform:translate(244px,50px)} } @keyframes hopC{ 0%{opacity:0;transform:translate(12px,-8px)} 2%{opacity:1;transform:translate(0,0)} 4%{opacity:1;transform:translate(6px,4px)} 6%{opacity:1;transform:translate(6px,1px)} 8%{opacity:1;transform:translate(6px,4px)} 10%{opacity:1;transform:translate(6px,1px)} 19%{opacity:1;transform:translate(190px,36px)} 23%{opacity:0;transform:translate(244px,50px)} 100%{opacity:0;transform:translate(244px,50px)} } @keyframes hopD{ 0%{opacity:0;transform:translate(12px,-8px)} 3%{opacity:1;transform:translate(0,0)} 9%{opacity:1;transform:translate(58px,20px)} 13%{opacity:1;transform:translate(96px,14px)} 22%{opacity:1;transform:translate(198px,40px)} 27%{opacity:0;transform:translate(244px,52px)} 100%{opacity:0;transform:translate(244px,52px)} } /* ========================================================================== 10. TOOLKIT ========================================================================== */ .nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--ink)} .nums div{padding:16px 14px 18px;border-right:2px solid rgba(20,11,48,.16)} .nums div:last-child{border-right:0} .nums b{display:block;font-family:var(--mono);font-size:clamp(20px,2.4vw,30px);font-weight:700; line-height:1;color:var(--vio-t);margin-bottom:8px;letter-spacing:-.01em} .nums span{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase; color:#6b6285;font-weight:700;line-height:1.5;display:block} .partner{margin:20px 0 0;font-size:15px;line-height:1.62;color:#3a3352;max-width:64ch} .partner q{font-style:italic;color:var(--vio-t)} /* ========================================================================== 11. FAQ ========================================================================== */ .faqwin .wbody{padding:0;display:flex} .faqlist{flex:1;min-width:0;max-height:520px;overflow-y:auto;padding:6px 4px 6px 0; scrollbar-width:none} .faqlist::-webkit-scrollbar{display:none} .faqbar{flex:none;width:16px;border-left:2px solid var(--ink);background:var(--snow2); position:relative;padding:2px} .faqbar i{position:absolute;left:2px;right:2px;background:var(--ink);opacity:.75} .faqbar .up,.faqbar .dn{height:12px;background:var(--snow3);border:1.5px solid var(--ink);opacity:1; display:block} .faqbar .up{top:2px} .faqbar .dn{bottom:2px} .faqbar .thumb{background:var(--vio);border:1.5px solid var(--ink);opacity:1} details{border-bottom:2px solid rgba(20,11,48,.14)} details:last-child{border-bottom:0} summary{list-style:none;cursor:pointer;padding:16px clamp(14px,1.6vw,20px);min-height:46px; display:flex;gap:12px;align-items:flex-start;font-weight:600;font-size:15px;color:var(--ink); line-height:1.4} summary::-webkit-details-marker{display:none} summary .q{flex:none;width:16px;height:16px;margin-top:2px;border:2px solid var(--ink); background:var(--cream);position:relative} summary .q::before,summary .q::after{content:"";position:absolute;background:var(--ink)} summary .q::before{left:2px;right:2px;top:5px;height:2px} summary .q::after{top:2px;bottom:2px;left:5px;width:2px;transition:opacity .1s} details[open] summary .q{background:var(--vio)} details[open] summary .q::before,details[open] summary .q::after{background:#fff} details[open] summary .q::after{opacity:0} details p{margin:0;padding:0 clamp(14px,1.6vw,20px) 16px 42px;font-size:14.5px;line-height:1.62; color:#3a3352;max-width:66ch} /* ========================================================================== 12. FINISH / THE LODGE ========================================================================== */ /* the banner runs the whole course: piste lane, content, chrono lane */ /* The finish is the same object as a gate, scaled up: two planted posts with a banner slung between them and a checked apron hanging off its hem. Same sag, same 2px ink outline, same hard-stop cloth shading. */ /* The posts stand IN FRONT of the fabric, the way a real finish gantry does. They used to paint behind it: the banner is inset 13px and the post is 26px wide, so each post was bisected — half of it swallowed, half of it sticking out beside the hem with its cap cut off. That is the "floating white/violet fragments" where the right post should be. Now the rod reads whole, cap to snow cup, with the banner tied between the two. */ .finish{position:relative;z-index:3;margin:clamp(40px,7vh,80px) 0 0;height:132px; margin-left:calc(-1 * (var(--pad) - 20px)); width:calc(100% + var(--pad) - 20px)} .finish .post{position:absolute;bottom:0;width:26px;height:126px;z-index:2; background: linear-gradient(90deg,rgba(255,255,255,.40) 0 4px,rgba(255,255,255,.14) 4px 7px, rgba(0,0,0,0) 7px 17px,rgba(6,2,20,.45) 17px 26px), repeating-linear-gradient(180deg,var(--vio) 0 22px,var(--cloth) 22px 44px); border:2px solid var(--ink);box-shadow:4px 4px 0 rgba(8,3,26,.45)} .finish .post::before{content:"";position:absolute;left:-5px;right:-5px;top:-9px;height:9px; background:var(--vio-l);border:2px solid var(--ink)} .finish .post::after{content:"";position:absolute;left:-11px;right:-11px;bottom:-6px;height:14px; background:var(--snow);border:2px solid var(--ink)} .finish .post.l{left:0} .finish .post.r{right:0} .finish .ban{position:absolute;left:13px;right:13px;top:14px;height:60px; background:var(--ink);display:flex;align-items:center;justify-content:center;gap:14px; clip-path:polygon(0 0,14% 3px,34% 5px,50% 6px,66% 5px,86% 3px,100% 0, 100% 50px,86% 55px,66% 59px,50% 60px,34% 59px,14% 55px,0 50px); filter:drop-shadow(5px 5px 0 rgba(8,3,26,.5))} .finish .ban::before{content:"";position:absolute;inset:2px; background:linear-gradient(180deg,var(--vio-l2) 0 3px,var(--vio) 3px 36px,var(--vio-d) 36px 48px, var(--cloth) 48px 100%); clip-path:polygon(0 0,14% 3px,34% 5px,50% 6px,66% 5px,86% 3px,100% 0, 100% 46px,86% 51px,66% 55px,50% 56px,34% 55px,14% 51px,0 46px)} .finish .ban b{position:relative;z-index:1;font-family:var(--mono); font-size:clamp(13px,1.6vw,18px);letter-spacing:.42em; font-weight:700;color:#fff;padding:0 0 8px .42em;text-shadow:0 2px 0 rgba(16,6,48,.5)} /* the checked apron, hung off the banner's hem with a stepped bottom edge */ .finish .chk{position:absolute;left:13px;right:13px;top:72px;height:30px; background-image:repeating-conic-gradient(var(--cloth) 0 25%,var(--ink) 0 50%); background-size:22px 22px;border:2px solid var(--ink);border-top:0; clip-path:polygon(0 0,100% 0,100% 22px,88% 26px,74% 30px,60% 26px,46% 30px, 32% 26px,18% 30px,6% 26px,0 22px)} .board{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0;align-items:stretch} .board .bt{background:#12082f;color:#fff;padding:14px 18px;border-right:2px solid var(--ink); display:flex;flex-direction:column;justify-content:center;gap:5px} .board .bt span{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;color:#a596e0;font-weight:700} .board .bt b{font-family:var(--mono);font-size:clamp(22px,2.6vw,30px);font-weight:700;line-height:1; font-variant-numeric:tabular-nums} .board .bm{padding:14px 18px;display:flex;flex-direction:column;justify-content:center;gap:4px} .board .bm strong{font-family:var(--ser);font-size:17px;font-weight:400} .board .bm span{font-size:13.5px;color:#3a3352} .cal{border:2px solid var(--ink);background:#fff;min-height:740px;position:relative} .cal .fb{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:14px;text-align:center;padding:24px;background:var(--cream)} .cal .fb p{margin:0;font-size:14px;color:#3a3352;max-width:38ch} .cal.loaded .fb{display:none} .contact{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px} /* ========================================================================== 13. FOOTER + YETI ========================================================================== */ .yetibar{position:relative;z-index:3;margin-top:clamp(40px,7vh,80px);height:280px; margin-left:calc(-1 * (max(0px,(100vw - var(--wrap)) / 2) + var(--pad))); width:100vw;overflow:hidden; background:linear-gradient(180deg,rgba(18,10,52,0),rgba(36,22,99,.5) 45%,rgba(90,64,170,.35))} .yetibar .snow{position:absolute;left:0;right:0;bottom:0;height:104px;background:var(--snow); clip-path:polygon(0% 34px,8% 22px,18% 32px,28% 18px,40% 30px,52% 16px,64% 28px,76% 18px,88% 30px,100% 20px,100% 100%,0 100%)} .yetibar .snow::after{content:"";position:absolute;inset:0;opacity:.7; background-image:repeating-conic-gradient(var(--snow2) 0 25%,transparent 0 50%);background-size:6px 6px; -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,0));mask-image:linear-gradient(180deg,#000,rgba(0,0,0,0))} .yetibar .lodge{position:absolute;right:9%;bottom:74px;width:240px;height:135px; background-image:var(--sp-lodge);background-repeat:no-repeat;background-size:100% 100%; image-rendering:pixelated;filter:drop-shadow(0 0 22px rgba(255,190,120,.35))} .yetibar .puffsmoke{position:absolute;right:calc(9% + 112px);bottom:198px;width:9px;height:9px; border-radius:50%;background:rgba(233,224,255,.85);animation:smoke 5.4s linear infinite} .yetibar .puffsmoke.b{animation-delay:-1.8s} .yetibar .puffsmoke.c{animation-delay:-3.6s} .yetibar .pine{position:absolute;bottom:66px;background-repeat:no-repeat;background-size:100% 100%; image-rendering:pixelated;width:51px;height:60px;background-image:var(--sp-pine_near)} .yeti{position:absolute;bottom:52px;left:6%;width:102px;height:102px; background-image:var(--sp-yeti);background-repeat:no-repeat;background-size:100% 100%; image-rendering:pixelated;z-index:2;animation:lurk 3.2s steps(2) infinite} /* the second frame rides on top and cuts in for the inhale: hips down are identical between the two, so this reads as a breath, not a jitter */ .yeti::after{content:"";position:absolute;inset:0;background-image:var(--sp-yeti_b); background-repeat:no-repeat;background-size:100% 100%;image-rendering:pixelated; opacity:0;animation:breathe 4.6s steps(1,end) infinite} @keyframes lurk{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-4px)}} @keyframes breathe{0%,56%{opacity:0}58%,79%{opacity:1}81%,100%{opacity:0}} .yetibar .say{position:absolute;bottom:80px;left:calc(6% + 118px);max-width:none; background:var(--cream);color:var(--ink);border:2px solid var(--ink);padding:8px 12px; font-family:var(--mono);font-size:10px;letter-spacing:.1em;box-shadow:4px 4px 0 rgba(8,3,26,.5)} .yetibar .say::before{content:"";position:absolute;left:-9px;bottom:11px;width:8px;height:8px; background:var(--cream);border-left:2px solid var(--ink);border-bottom:2px solid var(--ink); transform:rotate(45deg)} footer{position:relative;z-index:3;background:#0a0520;border-top:2px solid #241b46; padding:26px 0 34px;margin-top:-2px} footer .in{max-width:var(--wrap);margin:0 auto;padding:0 24px; display:flex;flex-wrap:wrap;gap:18px 34px;align-items:flex-start} footer .lock{margin:0} footer .fl{display:flex;flex-direction:column;gap:0;font-family:var(--mono);font-size:10.5px; letter-spacing:.08em;color:#8d84ad} footer .fl a{color:#c9c0e8;text-decoration:none;display:inline-flex;align-items:center; min-height:44px;padding:2px 0} footer .fl a:hover{color:#fff;text-decoration:underline} footer .fl .pl{padding-top:11px} footer .cp{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:#6b6389} /* ========================================================================== 14. RESPONSIVE ========================================================================== */ /* very wide: the course gets wider still and the scene frames the content */ @media (min-width:1560px){ :root{--wrap:min(1480px,100vw - 72px);--rail:400px;--pad:460px;--net:44px;--gut:210px; --shedw:284px;--shedh:275px} .idler{width:80px;height:60px;margin-left:-40px} .shed .sign{font-size:11px} } /* short desktop viewports centre the hero grid high enough that the bib would slide under the chrono; drop it clear */ @media (min-width:1001px) and (max-height:860px){ .bib-hold{padding-top:118px} .bib-pin{top:82px} } @media (max-width:1380px){ :root{--wrap:min(1260px,100vw - 48px);--rail:312px;--pad:364px;--net:36px;--gut:194px; /* THE RACER SHRINKS WITH THE RAIL. He used to be 96x72 here — which is not merely smaller, it is the 22x28 sprite squashed to 0.75:1, so the athlete himself came out a third shorter and a third wider on every laptop. He is 3x the grid now (66x84), which keeps him at the same share of the piste as the 4x cut above and lets the racing line keep its full reach instead of being pulled in to make room for him. */ --skw:66px;--skh:84px;--shedw:228px;--shedh:221px; --gin:68px;--gwf:.40} .idler{width:64px;height:48px;margin-left:-32px} .shed .sign{font-size:9px} .beeps i{width:7px;height:7px} } @media (max-width:1180px){ :root{--rail:268px;--pad:316px;--net:32px;--gut:194px;--shedw:206px;--shedh:200px; --amp:.28;--gin:68px;--gwf:.38} .gate .gl{font-size:9.5px;letter-spacing:.09em} .cards{grid-template-columns:1fr} .hero h1{font-size:clamp(28px,4.1vw,46px)} .hero .grid{grid-template-columns:minmax(0,1fr) 190px;gap:22px} .bib{width:190px} .bib-hold{padding-top:52px;margin-right:0;margin-left:0;transform:rotate(-4deg)} .bib-pin{top:18px} .bib-no b{font-size:32px} .lift{--sty:92px;--stw:132px} .lift .rope{width:74vw;--cw:42px;--ch:60px} .lift .hop{width:48px;height:48px} } @media (max-width:1000px){ :root{--pad:24px;--gut:24px;--wrap:1180px} /* single column means the scene runs straight under the copy, so the wash goes edge to edge: the moon must never sit inside the brand lockup */ .hero::before{left:-24px;right:-24px; background:linear-gradient(90deg,rgba(10,4,28,.80) 0%,rgba(10,4,28,.72) 68%, rgba(10,4,28,.42) 100%)} /* one column puts the lockup where the moon used to hang, so the moon moves down into the open sky beside the bib instead of sitting on the wordmark */ /* NO MOON on one column. It cannot win here and it was the "ghost blob" the owner photographed: a large, faint, square-ish grey shape sitting in the mid-mountains beside the lift. On this layout the scene runs straight under the copy, so .hero::before lays a near-opaque readability wash (alpha .80 -> .42) across the entire width — and .page sits at z-index 3 over a fixed .world at z-index 0, so NOTHING in the world can paint above that wash. A cream moon under 70% black is (85,78,72): a grey blob, exactly. Raising its z-index only moves it within the world and changes nothing; there is no position on this layout where the wash is thin enough to save it. So it comes off, which is the honest fix. The one-column sky still has stars, four ridges, the dither bands and a working lift in it. */ .sun,.halo{display:none} .railwrap{display:none} .page{padding:0 24px} /* Stacked layout: the gate stops being a slalom obstacle and becomes the section's heading — but it is still a panel slung between two poles, just stood on the page instead of planted in the piste. */ .gate{position:relative;display:block;width:100%;max-width:360px;height:auto; margin:0 0 20px;padding-bottom:26px;pointer-events:auto} .gate .puff{display:none} .gate .pole{display:block;left:auto;bottom:0;width:11px;height:74px; transform:none!important;transition:none} .gate .pn{left:3px} .gate .pf{left:auto;right:3px} .gate .pole::after{left:-6px;bottom:-5px;width:23px;height:9px} .gate .panel{position:static;width:auto;left:auto;margin-left:0;bottom:auto; transform:none;max-width:360px;height:54px} .hero{margin-left:0;padding-bottom:clamp(24px,4vh,40px)} .hero .grid{grid-template-columns:1fr;justify-items:start;gap:30px} .hero .bib-hold{justify-content:flex-start;padding-left:6px;width:100%;transform:none} .hero .field{display:none} /* the shed drops into the flow, still the one scene element up here */ /* still position:relative — the sign, beeps, idler and start burst are absolutely positioned inside it and must not escape to the hero */ .shed{position:relative;order:2;transform:none;margin:30px 0 0;width:216px;height:209px;flex:none;bottom:auto} .idler{width:68px;height:51px;margin-left:-34px} .shed .sign{font-size:9px;letter-spacing:.07em} .beeps{padding:3px;gap:3px} .beeps i{width:6px;height:6px} .kick{width:62px;margin-left:-31px;height:24px} .bib-hold{padding-top:36px;margin:0} .bib-pin{top:0} .bib{animation:none} /* the lift drops into the flow under the shed, still the one lift */ .lift{position:relative;order:3;left:auto;bottom:auto;width:auto;transform:none; height:186px;margin:26px -24px 0;border-top:2px solid rgba(120,98,190,.35); background:linear-gradient(180deg,rgba(18,10,52,.5),rgba(72,48,150,.3) 62%,rgba(203,185,255,.2)); --stx:34%;--sty:12px;--stw:112px} /* The band's snow shelf paints ABOVE the station (z-index 3 over its 2), so the station's legs and its own snow drift are BURIED in the terrain instead of standing on top of it. That is what actually grounds it: with the shelf underneath, the station could only ever sit on the snow, and on a phone it read as a building on stilts floating in the sky. */ .lift::after{content:"";position:absolute;left:-2%;right:-2%;bottom:0;height:46px;z-index:3; background:var(--snow); clip-path:polygon(0% 18px,14% 10px,28% 20px,44% 8px,60% 18px,76% 8px,90% 18px,100% 10px,100% 100%,0 100%)} .lift .rope{width:74vw;--cw:40px;--ch:56px} /* ONE SKIER ON SCREEN AT A TIME. Below 1000px the lift band sits directly under the start house, so a drop-off guest and the warming-up racer land on the phone together — which is exactly what the owner saw, and read as the hero character duplicated. The chairs keep running, because a lift with nothing on the cable reads as broken, but nobody gets off and every chair is empty. The racer is the only person on a phone. */ .lift .hop{display:none} .lift .cab .w{background-image:var(--sp-chair_empty)} .farskier{display:none} /* the shed keeps its warm-up vignette running down here... */ html[data-race="run"] .idler{opacity:1;visibility:visible} html[data-race="run"] .idler .f{animation-play-state:running} /* ...EXCEPT while the scroll-linked racer is mid-pass. Both are the same character, and on a phone their windows overlap at the foot of the hero: the shed is still on screen when the first pass starts. Two of him at once is what the owner read as a duplicated hero. Ordered after the rule above on purpose — the two selectors have identical specificity. */ html[data-mpass="1"] .idler{opacity:0;visibility:hidden} .say{max-width:100%} .cards{grid-template-columns:1fr} .nums{grid-template-columns:repeat(2,minmax(0,1fr))} .nums div:nth-child(2){border-right:0} .nums div:nth-child(-n+2){border-bottom:2px solid rgba(20,11,48,.16)} .hud{width:180px} .hud .t{font-size:22px} } @media (max-width:640px){ .hero{padding-bottom:56px;min-height:0;padding-top:78px} .spec{grid-template-columns:1fr} .spec div{border-right:0;border-bottom:2px solid rgba(20,11,48,.16)} .spec div:last-child{border-bottom:0} .board{grid-template-columns:1fr} .board .bt{border-right:0;border-bottom:2px solid var(--ink)} .hud{width:auto;left:10px;right:10px;top:8px;display:flex;align-items:center;gap:0} .hud .bar{flex:none;width:auto;border-bottom:0;border-right:2px solid var(--ink); padding:8px 8px;letter-spacing:.1em} .hud .bar span:not(.bulb){display:none} .hud .bar .x{display:none} .hud .t{padding:6px 10px;font-size:19px;flex:none} .hud .meta{display:none} .hud .splits{border-top:0;border-left:2px solid #2a1c60;padding:6px 9px;flex:1;min-width:0; justify-content:center} .hud .splits div:not(:last-child){display:none} /* the lift, scaled so the whole machine still fits the band */ .lift{height:158px;--stx:34%;--sty:8px;--stw:96px} .lift::after{height:38px} .lift .rope{width:76vw;transform:rotate(-15deg);--cw:34px;--ch:48px} /* no drop-offs on a phone at all, so the four phone-sized departure keyframes that used to live here have gone with them */ /* the base scene */ .yetibar{height:236px} .yetibar .snow{height:82px} .yetibar .lodge{width:154px;height:87px;right:4%;bottom:64px} .yetibar .puffsmoke{right:calc(4% + 70px);bottom:150px} .yetibar .pine{width:36px;height:42px;bottom:60px} .yetibar .pine:nth-of-type(3){display:none} .yeti{width:76px;height:76px;left:8px;bottom:40px} .finish{height:112px} .finish .post{width:20px;height:106px} .finish .post::before{left:-4px;right:-4px;top:-8px;height:8px} .finish .post::after{left:-8px;right:-8px;height:11px} .finish .ban{height:50px;left:10px;right:10px;top:12px; clip-path:polygon(0 0,14% 3px,34% 4px,50% 5px,66% 4px,86% 3px,100% 0, 100% 41px,86% 45px,66% 49px,50% 50px,34% 49px,14% 45px,0 41px)} .finish .ban::before{ background:linear-gradient(180deg,var(--vio-l2) 0 3px,var(--vio) 3px 30px,var(--vio-d) 30px 40px, var(--cloth) 40px 100%); clip-path:polygon(0 0,14% 3px,34% 4px,50% 5px,66% 4px,86% 3px,100% 0, 100% 37px,86% 41px,66% 45px,50% 46px,34% 45px,14% 41px,0 37px)} .finish .ban b{padding-bottom:6px} .finish .chk{top:60px;height:24px;left:10px;right:10px;background-size:16px 16px; clip-path:polygon(0 0,100% 0,100% 17px,88% 20px,74% 24px,60% 20px,46% 24px, 32% 20px,18% 24px,6% 20px,0 17px)} .yetibar .say{left:92px;right:10px;bottom:12px;font-size:9px;letter-spacing:.05em;padding:7px 9px} .yetibar .say::before{bottom:9px} .cal{min-height:760px} footer .cp{margin-left:0} .sec{padding-top:52px} } /* ========================================================================== 15. REDUCED MOTION — full static fallback ========================================================================== */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} /* the chrono lists every gate up front here, so it is taller: drop the bib clear of it */ .bib-hold{padding-top:112px} .bib-pin{top:76px} *,*::before,*::after{animation:none!important;transition:none!important} /* the lift stands still: chairs parked along the cable, no drop-offs */ .lift .hop{display:none} .lift .cab{animation:none} .bib{animation:none;transform:rotate(1deg)} .racer{position:absolute;top:34vh} .racer .rooster{opacity:0} .gate .pole{transform:none!important} .gate .puff{display:none} /* the skier stands ready in the shed; no warm-up cycle */ .idler .fa{opacity:1} .idler .fb,.idler .fc,.idler .fd,.idler .fe,.idler .ff{opacity:0} /* the piste is pinned to the course instead of tracking scroll */ .railwrap.back{position:absolute;inset:auto 0 auto 0} .piste{clip-path:none} } /* ========================================================================== 16. THE PAYOFF, THE PHONE, AND THE LIFE IN THE SCENE Added in the stabilisation pass: the finish actually pays off, the racer exists on a phone, and the mountain has weather and inhabitants. Everything here is transform/opacity only. The reduced-motion block above carries !important, so all of it is silent when motion is off. ========================================================================== */ /* --- the finish payoff -------------------------------------------------- */ /* The scoreboard used to sit at --:--.-- forever because the finish never fired. It fires now, and when it does the time is STAMPED on. */ .board{position:relative} .board .bt b{display:inline-block;transform-origin:0 50%} .board.posted .bt b{animation:stamp 640ms steps(4,end) 1 both} @keyframes stamp{ 0%{transform:scale(2.4) translateY(-5px);opacity:0} 28%{transform:scale(1.16);opacity:1} 48%{transform:scale(.93)} 70%{transform:scale(1.05)} 100%{transform:scale(1)}} .board.posted .bt::before{content:"";position:absolute;inset:0;background:var(--vio); opacity:0;pointer-events:none;animation:btflash 520ms steps(3,end) 2} @keyframes btflash{0%,100%{opacity:0}50%{opacity:.55}} /* a burst of pixel confetti over the board, twice, then gone */ .board::after{content:"";position:absolute;left:26%;top:58%;width:3px;height:3px;opacity:0; pointer-events:none;z-index:2; box-shadow: -72px 0 0 2px var(--vio), 64px 9px 0 2px var(--vio-l2), -28px -20px 0 3px var(--vio-t), 36px -26px 0 2px var(--vio), -112px 18px 0 2px var(--vio-l2), 106px 22px 0 3px var(--vio-t), 0 -36px 0 2px var(--vio), -56px 28px 0 2px var(--vio-l2), 80px -14px 0 2px var(--vio), 124px -4px 0 2px var(--vio), -140px -10px 0 2px var(--vio-t)} .board.posted::after{animation:confetti 1.45s steps(7,end) 2} @keyframes confetti{ 0%{opacity:0;transform:translateY(24px) scale(.35)} 14%{opacity:1;transform:translateY(0) scale(1)} 68%{opacity:.9;transform:translateY(-42px) scale(1.2)} 100%{opacity:0;transform:translateY(-74px) scale(1.4)}} /* the chrono takes the flag too */ .hud.justfin{animation:hudfin 540ms steps(3,end) 2} @keyframes hudfin{ 0%,100%{box-shadow:5px 5px 0 rgba(6,2,20,.6)} 50%{box-shadow:5px 5px 0 rgba(6,2,20,.6),0 0 0 3px var(--vio-l)}} .hud[data-state="fin"] .meta{color:var(--vio-l)} .hud .splits div.new{color:#fff;animation:splitstamp 480ms steps(3,end) 1} @keyframes splitstamp{ 0%{background:rgba(109,74,255,.85);transform:translateX(7px)} 42%{background:rgba(109,74,255,.4);transform:translateX(0)} 100%{background:transparent}} @media (max-width:640px){ /* the phone HUD is one bar; on the finish it says so instead of listing */ .hud[data-state="fin"] .meta{display:flex;align-items:center;padding:0 10px; font-size:8px;flex:1;min-width:0;white-space:nowrap;overflow:hidden} .hud[data-state="fin"] .splits{display:none} } /* --- gate hits get a cloth ripple and a kicked snow cup ------------------ */ .gate.hit .panel::before{animation:ripple 420ms steps(4,end) 1} @keyframes ripple{ 0%{transform:skewY(0deg) scaleY(1)} 26%{transform:skewY(1.8deg) scaleY(1.07)} 56%{transform:skewY(-1.1deg) scaleY(.96)} 80%{transform:skewY(.6deg) scaleY(1.02)} 100%{transform:skewY(0deg) scaleY(1)}} .gate.hit .pn::after{animation:cupkick 320ms steps(3,end) 1} @keyframes cupkick{ 0%{transform:scale(1);opacity:1} 35%{transform:scale(1.7) translateY(-3px);opacity:.85} 100%{transform:scale(1);opacity:1}} /* --- the run reads faster when it IS faster ----------------------------- */ .rush{opacity:calc(.22 + var(--vel,0) * .46)} /* the rooster tail off the edged ski breathes instead of sitting still */ .racer[data-pose="l"] .spray.l{animation:sprayjit 240ms steps(3,end) infinite} .racer[data-pose="r"] .spray.r{animation:sprayjitr 240ms steps(3,end) infinite} @keyframes sprayjit{0%{transform:scale(.88)}50%{transform:scale(1.1)}100%{transform:scale(.96)}} @keyframes sprayjitr{ 0%{transform:scaleX(-1) scale(.88)}50%{transform:scaleX(-1) scale(1.1)} 100%{transform:scaleX(-1) scale(.96)}} /* a camera flash off the finish-line photographers, twice */ .racer[data-pose="c"]::before{content:"";position:absolute;inset:-46px -70px; background:radial-gradient(circle,rgba(255,255,255,.8),rgba(255,255,255,0) 60%); opacity:0;pointer-events:none;animation:flashpop 1.7s steps(1,end) 2} @keyframes flashpop{ 0%,6%{opacity:0} 7%,9%{opacity:.9} 10%,44%{opacity:0} 45%,47%{opacity:.55} 48%,100%{opacity:0}} /* --- ambient life ------------------------------------------------------- */ .stars::after{content:"";position:absolute;inset:0; background-image: radial-gradient(circle 1px at 52px 30px,rgba(255,255,255,.92) 100%,transparent 0), radial-gradient(circle 1px at 170px 76px,rgba(255,255,255,.85) 100%,transparent 0), radial-gradient(circle 1.5px at 96px 118px,rgba(255,255,255,.80) 100%,transparent 0), radial-gradient(circle 1px at 214px 52px,rgba(255,255,255,.70) 100%,transparent 0); background-size:260px 150px;animation:twinkle 4.4s steps(2,end) infinite} @keyframes twinkle{0%,100%{opacity:.2}50%{opacity:1}} /* thin cloud wisps drifting across the high sky, slow enough to be weather. Soft bands only — a dashed mask here read as a dotted rule ruled across the headline rather than as cloud. */ .wisp{left:-20%;right:-20%;z-index:2;pointer-events:none;height:34px; background:radial-gradient(60% 100% at 50% 50%,rgba(233,224,255,.20),rgba(233,224,255,0) 72%); opacity:calc(.85 - var(--p) * .7); animation:drift 92s linear infinite} .wisp.w1{top:17%} .wisp.w2{top:27%;height:24px;animation-duration:136s;animation-delay:-52s; opacity:calc(.6 - var(--p) * .5)} @keyframes drift{from{transform:translateX(-26%)}to{transform:translateX(26%)}} /* one far-off skier working down the third ridge: a speck, on the ridge, in the ridge's own colour. Any bigger and he reads as debris on the snow. */ .farskier{width:11px;height:11px;z-index:6;pointer-events:none; left:0;bottom:37%;opacity:.42; background-image:var(--sp-guest_3);background-repeat:no-repeat;background-size:100% 100%; image-rendering:pixelated; animation:farrun 58s linear infinite} @keyframes farrun{ 0%,3%{opacity:0;transform:translate(4vw,-10px)} 8%{opacity:.42} 48%{opacity:.42;transform:translate(38vw,16px)} 90%{opacity:.42;transform:translate(76vw,-2px)} 96%,100%{opacity:0;transform:translate(82vw,0)}} /* the chimney actually smokes, and the smoke leans with the wind */ .yetibar .puffsmoke{animation:smokedrift 6.4s linear infinite} @keyframes smokedrift{ 0%{opacity:0;transform:translate(0,0) scale(.5)} 12%{opacity:.8;transform:translate(2px,-8px) scale(.75)} 52%{opacity:.44;transform:translate(15px,-54px) scale(1.55)} 100%{opacity:0;transform:translate(40px,-106px) scale(2.4)}} /* the yeti breathes, and every so often he stretches for you */ .yeti{animation:lurk 6.4s steps(1,end) infinite} @keyframes lurk{ 0%,42%{transform:translate(0,0)} 44%,52%{transform:translate(0,-4px)} 54%,84%{transform:translate(0,0)} 86%,91%{transform:translate(4px,-8px)} 93%,100%{transform:translate(0,0)}} /* the chairs breathe on the cable instead of hanging like props */ .lift .cab .w{animation:sway 5.2s ease-in-out infinite alternate;animation-delay:var(--t)} @keyframes sway{from{transform:rotate(11.5deg)}to{transform:rotate(14.5deg)}} /* ========================================================================== 17. THE RACER ON A PHONE There is no side-rail course under 1000px, so the racer stops trying to be a persistent fixture and becomes an EVENT: he carves through the view between sections, throws snow, and is gone. Position is a pure function of scroll inside each window, so scrubbing back up runs it backwards cleanly and there is no state to get stuck in. ========================================================================== */ /* --mw/--mh are DECLARED here, not just defaulted at the point of use: the carve frames size themselves off --mw, and an undeclared custom property makes those declarations invalid-at-computed-value-time, which collapsed them to zero width and made him vanish on exactly the frames he carves. */ .mracer{--mw:66px;--mh:84px; position:fixed;left:0;top:0;z-index:6;pointer-events:none;display:none; width:var(--mw);height:var(--mh); transform:translate3d(var(--mx,-300px),var(--my,300px),0) scaleX(var(--mf,1)); opacity:var(--mo,0);will-change:transform,opacity} html[data-mrace="1"] .mracer{display:block} .mracer i{position:absolute;left:0;top:0;width:100%;height:100%; background-repeat:no-repeat;background-size:100% 100%; image-rendering:pixelated;opacity:0} .mracer .m-t{background-image:var(--sp-race_t)} .mracer .m-l{background-image:var(--sp-race_l)} .mracer .m-r{background-image:var(--sp-race_r)} .mracer .m-d{background-image:var(--sp-race_d)} /* every racing frame is drawn on the same 28-cell grid now (22 of athlete plus three cells of pole margin each side), so they all take the same box */ .mracer .m-t,.mracer .m-l,.mracer .m-r,.mracer .m-d{ width:calc(var(--mw) / 22 * 28);left:calc(var(--mw) / 22 * -3)} .mracer[data-pose="t"] .m-t,.mracer[data-pose="d"] .m-d, .mracer[data-pose="l"] .m-l,.mracer[data-pose="r"] .m-r{opacity:1} /* the snow he throws, trailing the uphill edge */ .mracer .m-sp{left:auto;right:calc(var(--mw) * .58);top:auto;bottom:2px; width:calc(var(--mw) * .62);height:calc(var(--mw) * .38); background-image:var(--sp-puff);opacity:var(--mspo,0); animation:sprayjit 220ms steps(3,end) infinite} .mracer::after{content:"";position:absolute;left:50%;top:84%; width:calc(var(--mw) * .6);height:9px;margin-left:calc(var(--mw) * -.3); border-radius:50%;background:radial-gradient(ellipse,rgba(38,22,90,.5),rgba(38,22,90,0) 70%)} @media (min-width:1001px){.mracer{display:none!important}} @media (max-width:420px){.mracer{--mw:58px;--mh:74px}} @media (prefers-reduced-motion:reduce){.mracer{display:none!important}}