.runner{--runner-size:calc(var(--size) * var(--scale,1));--lean:calc(var(--speed) * 7deg);width:calc(var(--runner-size) * .85);height:var(--runner-size);flex:none;position:relative}.runner__body{transform-origin:50% 100%;z-index:2;position:absolute;inset:0 0 6%}.runner__art{object-fit:contain;object-position:bottom;width:100%;height:100%;display:block}.runner__pose{height:100%;animation:.18s ease-out runner-enter}@keyframes runner-enter{0%{opacity:.35}}.runner__sheet{height:100%;aspect-ratio:var(--cell);margin:0 auto;overflow:hidden}.runner__strip{left:calc(var(--crop-x,0) / var(--crop-w,1) * -100%);top:calc(var(--crop-y,0) / var(--crop-h,1) * -100%);height:calc(100% / var(--crop-h,1));width:calc(var(--frames) * 100% / var(--crop-w,1));max-width:none;animation:runner-frames calc(var(--step) * 2) steps(var(--frames)) infinite;display:block;position:relative}@keyframes runner-frames{to{transform:translate(-100%)}}.runner__shadow{z-index:1;background:radial-gradient(closest-side,#2b1b3f52,#2b1b3f00);border-radius:50%;height:7%;position:absolute;bottom:2%;left:18%;right:18%}.runner--idle .runner__body{animation:2.6s ease-in-out infinite runner-breathe}@keyframes runner-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.015,.975)translateY(1%)}}.runner--run.runner--sheet .runner__body{animation-name:runner-stride-soft}@keyframes runner-stride-soft{0%,to{transform:rotate(calc(var(--lean) * .5)) translateY(0)}50%{transform:rotate(calc(var(--lean) * .5)) translateY(-2.5%)}}.runner--run .runner__body{animation:runner-stride var(--step) ease-in-out infinite}@keyframes runner-stride{0%,to{transform:rotate(var(--lean)) translateY(0) scale(1.05, .95)}15%{transform:rotate(var(--lean)) translateY(-2%) scale(.98, 1.03)}50%{transform:rotate(var(--lean)) translateY(calc(-6% - var(--speed) * 6%)) scale(.97, 1.04)}85%{transform:rotate(var(--lean)) translateY(-1%) scale(1.01, .99)}}.runner--run .runner__shadow{animation:runner-shadow var(--step) ease-in-out infinite}@keyframes runner-shadow{0%,to{opacity:1;transform:scaleX(1)}50%{opacity:.6;transform:scaleX(.72)}}.runner__dust{z-index:1;pointer-events:none;width:40%;height:20%;position:absolute;bottom:3%;left:8%}.runner__dust i{width:calc(var(--runner-size) * .13);height:calc(var(--runner-size) * .13);opacity:0;background:radial-gradient(circle at 40% 40%,#fffaf2,#e9d6c2 70%);border-radius:50%;position:absolute;bottom:0;left:40%}.runner--run .runner__dust i{animation:runner-dust calc(var(--step) * 2) ease-out infinite}.runner--run .runner__dust i:nth-child(2){animation-delay:calc(var(--step) * .66)}.runner--run .runner__dust i:nth-child(3){animation-delay:calc(var(--step) * 1.33)}@keyframes runner-dust{0%{opacity:calc(.25 + var(--speed) * .6);transform:translate(0)scale(.35)}to{transform:translate(calc(var(--runner-size) * -.38), calc(var(--runner-size) * -.12)) scale(1.15);opacity:0}}.runner__lines{z-index:1;pointer-events:none;opacity:0;width:45%;height:46%;transition:opacity .3s;position:absolute;top:22%;left:-30%}.runner--fast .runner__lines{opacity:1}.runner__lines i{background:linear-gradient(90deg,#f4511e00,#f4511ea6);border-radius:3px;height:3px;position:absolute;right:0}.runner__lines i:first-child{width:70%;top:10%}.runner__lines i:nth-child(2){width:100%;top:45%}.runner__lines i:nth-child(3){width:55%;top:80%}.runner--fast .runner__lines i{animation:runner-lines calc(var(--step) * 1.5) linear infinite}.runner--fast .runner__lines i:nth-child(2){animation-delay:calc(var(--step) * -.5)}.runner--fast .runner__lines i:nth-child(3){animation-delay:calc(var(--step) * -1)}@keyframes runner-lines{0%{opacity:0;transform:translate(30%)}30%{opacity:1}to{opacity:0;transform:translate(-60%)}}.runner--win .runner__body{animation:1.2s cubic-bezier(.3,.7,.4,1) infinite runner-win}@keyframes runner-win{0%,to{transform:translateY(0)scale(1.06,.94)}10%{transform:translateY(0)scale(1.08,.9)}35%{transform:translateY(-28%)rotate(-6deg)scale(.96,1.06)}55%{transform:translateY(0)scale(1.08,.92)}70%{transform:translateY(-8%)rotate(3deg)}85%{transform:translateY(0)scale(1.02,.98)}}.runner--win .runner__shadow{animation:1.2s cubic-bezier(.3,.7,.4,1) infinite runner-win-shadow}@keyframes runner-win-shadow{0%,to,55%,85%{transform:scaleX(1)}35%{opacity:.5;transform:scaleX(.55)}70%{transform:scaleX(.85)}}.runner__stars{z-index:3;pointer-events:none;position:absolute;top:30%;left:50%}.runner__stars i{width:calc(var(--runner-size) * .12);height:calc(var(--runner-size) * .12);margin:calc(var(--runner-size) * -.06);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);opacity:0;background:#ffc531;position:absolute}.runner--win .runner__stars i{animation:1.2s ease-out infinite runner-star}.runner__stars i:first-child{--dx:-.55;--dy:-.45}.runner__stars i:nth-child(2){--dx:.55;--dy:-.5;background:#ff8a3d}.runner__stars i:nth-child(3){--dx:-.2;--dy:-.75;background:#8d68f5}.runner__stars i:nth-child(4){--dx:.3;--dy:-.78}.runner__stars i:nth-child(5){--dx:.7;--dy:-.15;background:#e83e7a}@keyframes runner-star{0%,25%{opacity:0;transform:translate(0)scale(.2)rotate(0)}35%{opacity:1}80%{transform:translate(calc(var(--dx) * var(--runner-size)), calc(var(--dy) * var(--runner-size))) scale(1) rotate(140deg);opacity:0}to{opacity:0}}.runner--out .runner__body{filter:grayscale()brightness(1.05);opacity:.75;animation:.5s cubic-bezier(.3,1.4,.6,1) forwards runner-out}@keyframes runner-out{0%{transform:rotate(0)translateY(0)}to{transform:rotate(-14deg)translate(-6%,3%)}}.runner--out .runner__shadow{opacity:.6;transform:scaleX(1.15)}.runner--ride{width:calc(var(--runner-size) * max(.85, var(--cell)))}.runner--run.runner--ride .runner__body{animation:runner-ride var(--step) linear infinite}@keyframes runner-ride{0%,to{transform:rotate(calc(var(--lean) * .35)) translateY(0)}25%{transform:rotate(calc(var(--lean) * .35)) translateY(-0.9%)}50%{transform:rotate(calc(var(--lean) * .35)) translateY(0.3%)}75%{transform:rotate(calc(var(--lean) * .35)) translateY(-0.5%)}}.runner--run.runner--ride .runner__shadow{animation:none}.runner--ride .runner__shadow{left:8%;right:8%}.runner--ride .runner__dust{height:12%;bottom:1%;left:0}.runner--run.runner--ride .runner__dust i{animation-name:runner-ride-dust;animation-timing-function:linear}@keyframes runner-ride-dust{0%{opacity:calc(.2 + var(--speed) * .6);transform:translate(0)scale(.3)}to{transform:translate(calc(var(--runner-size) * -.5), calc(var(--runner-size) * -.05)) scale(1);opacity:0}}@media (prefers-reduced-motion:reduce){.runner__dust,.runner__lines,.runner__stars{display:none}}.lab__controls{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;width:100%;display:grid}.lab__controls .tabs{grid-column:1/-1}.lab__stage{background:linear-gradient(#fff 0%,#fff6ec 70%,#ffe3c7 70%,#ffd5ad 100%);justify-content:center;align-items:center;min-height:300px}.lab__track{background:repeating-linear-gradient(90deg,#0000 0 46px,#ffffffb3 46px 52px) 0 70%/100% 4px no-repeat,linear-gradient(#fff2e3,#f7c99e);border-radius:14px;width:100%;height:92px;position:relative;overflow:hidden}.lab__mover{position:absolute;bottom:6px;left:2%}.lab__track--moving .lab__mover{animation:lab-cross var(--cross) linear infinite}@keyframes lab-cross{0%{left:-60px}to{left:100%}}.lab__grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:18px 10px;width:100%;display:grid}.lab__cell{flex-direction:column;align-items:center;gap:4px;margin:0;font-size:.85rem;font-weight:700;display:flex}
