/* Two cut steel fragments surround the exact pointer hotspot. */
.cursor-dot, .cursor-dot.hover {
  width: 32px; height: 32px; transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff8e9 0 1.5px, transparent 2px);
  filter: drop-shadow(0 1px 1px #000);
}
.cursor-dot::before, .cursor-dot::after {
  inset: 0; border: 0; border-radius: 0; clip-path: none;
  background: linear-gradient(135deg, #fff9e9 15%, #8a9298 47%, #e3e9ea 72%, #6d777d);
  transform: none;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), background .2s;
  -webkit-mask: var(--fragment) center / contain no-repeat;
  mask: var(--fragment) center / contain no-repeat;
}
.cursor-dot::before {
  --fragment: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M8 18 5 15 5 11 17 2 22 3 28 10 27 14 24 17 21 15 24 12 20 7 18 6 9 13 11 15 9 16Z'/%3E%3C/svg%3E");
}
.cursor-dot::after {
  --fragment: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M24 14 27 17 27 21 15 30 10 29 4 22 5 18 8 15 11 17 8 20 12 25 14 26 23 19 21 17 23 16Z'/%3E%3C/svg%3E");
}
.cursor-dot.hover::before { transform: translate(2px,-3px) rotate(-8deg); background: #d5ff3f; }
.cursor-dot.hover::after { transform: translate(-2px,3px) rotate(8deg); background: #d5ff3f; }
.cursor-dot.pressed::before { transform: translate(4px,-5px) rotate(-16deg) scale(.9); }
.cursor-dot.pressed::after { transform: translate(-4px,5px) rotate(16deg) scale(.9); }
.cursor-label { left: 39px; top: 9px; }
@media (prefers-reduced-motion: reduce) {
  .cursor-dot::before, .cursor-dot::after { transition: none; }
}