@keyframes gear-clockwise{to{transform:rotate(360deg)}}@keyframes gear-counter-clockwise{to{transform:rotate(-360deg)}}.gearbox{background:#111;border:none;border-radius:6px;width:200px;height:150px;position:relative;overflow:hidden;box-shadow:0 0 0 1px #ffffff1a}.gearbox .overlay{z-index:10;background:0 0;border-radius:6px;width:100%;height:100%;position:absolute;top:0;left:0;box-shadow:inset 0 0 20px #000}.gearbox .gear{border-radius:30px;width:60px;height:60px;position:absolute;box-shadow:0 -1px #888,0 1px #000}.gearbox .gear.large{border-radius:60px;width:120px;height:120px}.gearbox .gear.large:after{border-radius:48px;width:96px;height:96px;margin-top:-48px;margin-left:-48px}.gearbox .gear.one{top:12px;left:10px}.gearbox .gear.two{top:61px;left:60px}.gearbox .gear.three{top:110px;left:10px}.gearbox .gear.four{top:13px;left:128px}.gearbox .gear:after{content:"";z-index:3;background:#111;border-radius:36px;width:36px;height:36px;margin-top:-18px;margin-left:-18px;position:absolute;top:50%;left:50%;box-shadow:0 0 10px #ffffff1a,inset 0 0 10px #0000001a,inset 0 2px #090909,inset 0 -1px #888}.gearbox .gear-inner{background:#555;border:1px solid #ffffff1a;border-radius:30px;width:100%;height:100%;position:relative}.gearbox .large .gear-inner{border-radius:60px}.gearbox .gear.one .gear-inner{animation:3s linear infinite gear-counter-clockwise}.gearbox .gear.two .gear-inner{animation:3s linear infinite gear-clockwise}.gearbox .gear.three .gear-inner{animation:3s linear infinite gear-counter-clockwise}.gearbox .gear.four .gear-inner{animation:6s linear infinite gear-counter-clockwise}.gearbox .gear-inner .bar{background:#555;border-left:1px solid #ffffff1a;border-right:1px solid #ffffff1a;border-radius:2px;width:76px;height:16px;margin-top:-8px;margin-left:-38px;position:absolute;top:50%;left:50%}.gearbox .large .gear-inner .bar{width:136px;margin-left:-68px}.gearbox .gear-inner .bar:nth-child(2){transform:rotate(60deg)}.gearbox .gear-inner .bar:nth-child(3){transform:rotate(120deg)}.gearbox .gear-inner .bar:nth-child(4){transform:rotate(90deg)}.gearbox .gear-inner .bar:nth-child(5){transform:rotate(30deg)}.gearbox .gear-inner .bar:nth-child(6){transform:rotate(150deg)}@media (prefers-reduced-motion:reduce){.gearbox .gear-inner{animation:none!important}}