/* get-started.css - Styles for Get Started Guide */

#get-started-overlay {
  /* Overlay styles are inline for better control */
}

#get-started-modal {
  /* Modal styles are inline for better control */
}

.guide-highlight {
  transition: outline 0.3s ease, outline-offset 0.3s ease !important;
  animation: guide-pulse 2s ease-in-out infinite;
}

@keyframes guide-pulse {
  0%, 100% {
    outline-color: var(--accent, #2bd4ff);
  }
  50% {
    outline-color: rgba(43, 212, 255, 0.5);
  }
}

/* Ensure guide is above everything */
#get-started-overlay * {
  box-sizing: border-box;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  #get-started-modal {
    padding: 24px !important;
    max-width: 95% !important;
  }
  
  #get-started-modal h2 {
    font-size: 20px !important;
  }
  
  #get-started-modal p {
    font-size: 14px !important;
  }
}