* {
  cursor: none;
}

/* Shared layout for the cursor layers (positions are set from JS). */
.cursor-dot, .cursor-outline {
  position: fixed;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.cursor-dot {
  width: 15px;
  height: 15px;
  background: #000;
  border-radius: 50%;
  z-index: 9999;
  transition: transform 0.15s ease;
}

.cursor-outline {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border: 2px solid #000;
  border-radius: 50%;
  z-index: 9998;
  transition: none;
  opacity: 1;
}

.cursor-dot.hover {
  transform: translate(-50%, -50%) scale(0.5);
}