.cursor-zoom {
  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-zoom.on {
  display: block;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='40' style='mix-blend-mode:difference;'%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-size='12' fill='white' style='font-family:Helvetica, Arial, sans-serif;font-weight:400;'%3Escroll%20to%20zoom%3C/text%3E%3C/svg%3E");
}

@media (hover: none) {
  .zoom-dial:hover {
    cursor: auto;
  }
}