.dot {
  position: fixed;
  top: 0; left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sage-500);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, background 0.2s, opacity 0.2s;
  will-change: transform;
}

.ring {
  position: fixed;
  top: 0; left: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--sage-400);
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s, border-color 0.3s, opacity 0.3s;
  will-change: transform;
  opacity: 0.6;
}

/* Hover state — expand ring, fill dot */
.dot.hover {
  width: 12px;
  height: 12px;
  background: var(--sage-400);
}
.ring.hover {
  width: 52px;
  height: 52px;
  border-color: var(--sage-400);
  opacity: 0.4;
}

/* Press state — squish */
.dot.pressed {
  width: 6px;
  height: 6px;
  background: var(--sage-600, #5a6b42);
}
.ring.pressed {
  width: 28px;
  height: 28px;
  border-color: var(--sage-500);
  opacity: 0.8;
}

/* Hide on touch devices */
@media (hover: none) {
  .dot, .ring { display: none; }
}