html,body{background:oklch(30.3% .0377 195.76);margin:0}body{min-height:100vh;display:grid}.webstrand{width:0;min-width:100%;height:0;min-height:100%;display:block}@property --rot{syntax:"<angle>";inherits:true;initial-value:0deg}@keyframes webstrand-ratchet{0%{--rot:0deg;animation-timing-function:cubic-bezier(.4,.16,.27,.83)}7.56%{--rot:20deg;animation-timing-function:linear(0, .008 1.4%, .034 3%, .134 6.3%, .264 9.4%, .683 18.5%, .797 21.3%, .89 24%, .967 26.7%, 1.027 29.4%, 1.073 32.3%, 1.104 35.2%, 1.123 39.5%, 1.119 44.3%, 1.018 63.9%, .988 75.6%, .985 84.1%, .9946 100%)}11.11%{--rot:40deg;animation-timing-function:cubic-bezier(.4,.16,.27,.83)}18.67%{--rot:60deg;animation-timing-function:linear(0, .008 1.4%, .034 3%, .134 6.3%, .264 9.4%, .683 18.5%, .797 21.3%, .89 24%, .967 26.7%, 1.027 29.4%, 1.073 32.3%, 1.104 35.2%, 1.123 39.5%, 1.119 44.3%, 1.018 63.9%, .988 75.6%, .985 84.1%, .9946 100%)}22.22%{--rot:80deg;animation-timing-function:cubic-bezier(.4,.16,.27,.83)}29.78%{--rot:100deg;animation-timing-function:linear(0, .008 1.4%, .034 3%, .134 6.3%, .264 9.4%, .683 18.5%, .797 21.3%, .89 24%, .967 26.7%, 1.027 29.4%, 1.073 32.3%, 1.104 35.2%, 1.123 39.5%, 1.119 44.3%, 1.018 63.9%, .988 75.6%, .985 84.1%, .9946 100%)}33.33%{--rot:120deg;animation-timing-function:cubic-bezier(.4,.16,.27,.83)}40.89%{--rot:140deg;animation-timing-function:linear(0, .008 1.4%, .034 3%, .134 6.3%, .264 9.4%, .683 18.5%, .797 21.3%, .89 24%, .967 26.7%, 1.027 29.4%, 1.073 32.3%, 1.104 35.2%, 1.123 39.5%, 1.119 44.3%, 1.018 63.9%, .988 75.6%, .985 84.1%, .9946 100%)}44.44%{--rot:160deg;animation-timing-function:cubic-bezier(.4,.16,.27,.83)}52%{--rot:180deg;animation-timing-function:linear(0, .008 1.4%, .034 3%, .134 6.3%, .264 9.4%, .683 18.5%, .797 21.3%, .89 24%, .967 26.7%, 1.027 29.4%, 1.073 32.3%, 1.104 35.2%, 1.123 39.5%, 1.119 44.3%, 1.018 63.9%, .988 75.6%, .985 84.1%, .9946 100%)}55.56%{--rot:200deg;animation-timing-function:cubic-bezier(.4,.16,.27,.83)}63.11%{--rot:220deg;animation-timing-function:linear(0, .008 1.4%, .034 3%, .134 6.3%, .264 9.4%, .683 18.5%, .797 21.3%, .89 24%, .967 26.7%, 1.027 29.4%, 1.073 32.3%, 1.104 35.2%, 1.123 39.5%, 1.119 44.3%, 1.018 63.9%, .988 75.6%, .985 84.1%, .9946 100%)}66.67%{--rot:240deg;animation-timing-function:cubic-bezier(.4,.16,.27,.83)}74.22%{--rot:260deg;animation-timing-function:linear(0, .008 1.4%, .034 3%, .134 6.3%, .264 9.4%, .683 18.5%, .797 21.3%, .89 24%, .967 26.7%, 1.027 29.4%, 1.073 32.3%, 1.104 35.2%, 1.123 39.5%, 1.119 44.3%, 1.018 63.9%, .988 75.6%, .985 84.1%, .9946 100%)}77.78%{--rot:280deg;animation-timing-function:cubic-bezier(.4,.16,.27,.83)}85.33%{--rot:300deg;animation-timing-function:linear(0, .008 1.4%, .034 3%, .134 6.3%, .264 9.4%, .683 18.5%, .797 21.3%, .89 24%, .967 26.7%, 1.027 29.4%, 1.073 32.3%, 1.104 35.2%, 1.123 39.5%, 1.119 44.3%, 1.018 63.9%, .988 75.6%, .985 84.1%, .9946 100%)}88.89%{--rot:320deg;animation-timing-function:cubic-bezier(.4,.16,.27,.83)}96.44%{--rot:340deg;animation-timing-function:linear(0, .008 1.4%, .034 3%, .134 6.3%, .264 9.4%, .683 18.5%, .797 21.3%, .89 24%, .967 26.7%, 1.027 29.4%, 1.073 32.3%, 1.104 35.2%, 1.123 39.5%, 1.119 44.3%, 1.018 63.9%, .988 75.6%, .985 84.1%, .9946 100%)}to{--rot:360deg}}@keyframes webstrand-spin{0%{rotate:0deg}to{rotate:360deg}}.webstrand .outer{animation:webstrand-spin var(--dur) linear infinite}.webstrand .ratchet{animation:webstrand-spin var(--dur) linear infinite, webstrand-ratchet 30s linear infinite;--period:calc(360deg / 9);--half:calc(180deg / 9);--pm:mod(var(--rot), var(--period));--ps:calc(var(--half) - abs(var(--pm) - var(--half)));--num:calc(.76 * sin(var(--half)));--den:calc(cos(var(--ps)) * .76 * sin(var(--half)) - sin(var(--ps)) * (.76 * cos(var(--half)) - 1));--sc:calc(var(--num) / var(--den))}.webstrand .text{animation:webstrand-spin var(--dur) linear infinite reverse}.webstrand .hidden{visibility:hidden}@keyframes webstrand-bounce{0%,40%,to{baseline-shift:0}60%{baseline-shift:6px}}.webstrand .d{animation:webstrand-bounce 1s ease-in-out calc(var(--d) * .15s) infinite}