/* Personalize widget styles */

/* Animated highlight when a harmony value is personalized */
.personalized {
  font-weight: 700;
  transition: color 0.3s ease;
}

/* Pulse on first personalization */
@keyframes personalize-in {
  0%   { background-color: rgba(183, 148, 244, 0.12); }
  100% { background-color: transparent; }
}

.personalized {
  animation: personalize-in 1s ease-out;
  border-radius: 2px;
}