:root {
  --metro-scale: 1.8;
}

/* Container */
.m-container {
  position: relative;
  top: -125px;
  width: 150px;
  z-index: 1;
  transform: scale(var(--metro-scale));
  transform-origin: top center;
  /* Metronome stick */
}
.m-container .m-stick {
  position: absolute;
  bottom: 44px;
  left: calc(50% - 1.5px);
  width: 2px;
  height: 85px;
  transform-origin: 50% 100%;
  /* JS controls these */
  transform: rotate(var(--angle, 0deg));
  transition: transform var(--swing-time, 300ms) ease-in-out;
  background: linear-gradient(to bottom, rgb(146.1, 146.1, 146.1), rgb(102.75, 102.75, 102.75));
}
.m-container .m-stick::after {
  content: "";
  position: absolute;
  top: 15px;
  left: -4px;
  width: 10px;
  height: 10px;
  background: silver;
  clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 15% 100%);
}
.m-container {
  /* Shadow under metronome */
}
.m-container::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 12px;
  width: 125px;
  height: 15px;
  border-radius: 50%;
  z-index: -1;
  background: radial-gradient(rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0));
  filter: blur(5px);
}

/* Metronome body */
.m-body {
  position: relative;
  width: 100px;
  height: 140px;
  margin: 25% auto 0;
  clip-path: polygon(37% 0, 63% 0, 100% 97%, 93% 97%, 91% 100%, 10% 100%, 7% 97%, 0 97%);
  background: linear-gradient(to top, hsl(30, 53.5211267606%, -22.1568627451%) 3%, #6d4721 3%, rgb(112.9147887324, 73.55, 34.1852112676) 4%, rgb(69.8521126761, 45.5, 21.1478873239) 25%);
}
.m-body .m-base {
  position: absolute;
  bottom: 30%;
  left: 4.5px;
  width: 90px;
  height: 66%;
  clip-path: polygon(40% 0, 60% 0, 88% 100%, 12% 100%);
  background: linear-gradient(to top, rgb(255, 208.0955414013, 123.5), rgb(255, 213.552866242, 138.8));
  border-bottom: 2px solid rgb(76.5, 38.25, 0);
}
.m-body .m-base .m-tempo {
  position: absolute;
  top: 5%;
  left: 45%;
  width: 9%;
  height: 90%;
  opacity: 0.2;
  background: #000;
  box-shadow: 0 1px 0 #333;
}

/*# sourceMappingURL=metronome.css.map */