.cursor-cue {
  position: fixed;
  pointer-events: none;
  width: 150px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  display: none;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  z-index: 9999;
}
.cursor-cue.on {
  display: block;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22150%22%20height%3D%2240%22%20style%3D%22mix-blend-mode%3Adifference%3B%22%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20dominant-baseline%3D%22middle%22%20text-anchor%3D%22middle%22%20font-size%3D%2212%22%20fill%3D%22white%22%20style%3D%22font-family%3AHelvetica%2C%20Arial%2C%20sans-serif%3Bfont-weight%3A400%3B%22%3Eaudio%20on%3C/text%3E%3C/svg%3E");
}
.cursor-cue.off {
  display: block;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22150%22%20height%3D%2240%22%20style%3D%22mix-blend-mode%3Adifference%3B%22%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20dominant-baseline%3D%22middle%22%20text-anchor%3D%22middle%22%20font-size%3D%2212%22%20fill%3D%22white%22%20style%3D%22font-family%3AHelvetica%2C%20Arial%2C%20sans-serif%3Bfont-weight%3A400%3B%22%3Eaudio%20off%3C/text%3E%3C/svg%3E");
}
@media (hover: none) {
  video:hover {
    cursor: auto;
  }
}
video.touch-hover {
  cursor: none;
}