.of-sprite{--of-cw:calc(var(--of-ch) * 2 / 3);width:var(--of-cw);height:var(--of-ch);background-repeat:no-repeat;background-size:calc(var(--of-cw) * var(--of-cols)) calc(var(--of-ch) * var(--of-rows));background-position:calc(var(--of-cw) * var(--of-col) * -1) calc(var(--of-ch) * var(--of-row) * -1);image-rendering:auto;flex-shrink:0;display:inline-block}.of-sprite-walk{animation:.56s steps(4,end) infinite of-walk}.of-sprite-step{animation:.38s steps(2,jump-none) infinite of-step}@keyframes of-walk{0%{background-position-x:0}to{background-position-x:calc(var(--of-cw) * -4)}}@keyframes of-step{0%{transform:translateY(0)}to{transform:translateY(-6%)}}.of-portrait{background:color-mix(in srgb, var(--of-portrait) 24%, #f4efe6);vertical-align:middle;border-radius:30%;flex-shrink:0;display:inline-block;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #0000001a}.of-portrait .of-sprite{position:absolute}@media (prefers-reduced-motion:reduce){.of-sprite-walk,.of-sprite-step{animation:none}}