    :root {
      --star-color: white;
      --background-color: black;
    }

    body.day {
      --star-color: #444;
      --background-color: #e6f0ff;
    }

    body.night {
      --star-color: white;
      --background-color: black;
    }

    body {
      margin: 0;
      overflow: hidden;
      background-color: var(--background-color);
      transition: background-color 0.5s;
    }

    .star {
      position: absolute;
      border-radius: 50%;
      background-color: var(--star-color);
      animation: twinkle 2s infinite ease-in-out;
      z-index: -1;  
  }

    @keyframes twinkle {
      0%, 100% { opacity: 0.8; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.2); }
    }

    #themeToggle {
      position: absolute;
      top: 10px;
      left: 10px;
      padding: 8px 12px;
      font-size: 14px;
      z-index: 1000;
    }

.star.special {
  box-shadow: 0 0 10px 3px gold;
  transform: scale(1.4);
  z-index: 10;
}

.star-tooltip {
  position: absolute;
  font-size: 12px;
  color: white;
  font-family: sans-serif;
  pointer-events: none;
  z-index: 9999;
  white-space: nowrap;
  text-shadow: 1px 1px 2px black;
  display: none;
  padding: 2px 6px;
}
.star-popup {
  position: absolute;
  max-width: 300px;
  color: #fff;
  font-family: sans-serif;
  font-size: 14px;
  z-index: 10000;
  text-shadow: 1px 1px 3px black;
  display: none;
  padding: 10px;
  border-radius: 12px;
}


.star:hover {
  cursor: pointer;
}

.star-popup {
  position: absolute;
  max-width: 300px;
  background: white;
  color: black;
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  z-index: 10000;
  font-family: sans-serif;
  font-size: 14px;
  display: none;
}

.star-popup h3 {
  margin: 0 0 5px;
  font-size: 16px;
}

.star-popup button {
  margin-top: 10px;
}

.demo-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3em;
  color: white;
  font-family: 'Segoe UI', sans-serif;
  font-weight: 300;
  text-align: center;
  text-shadow: 0 0 20px rgba(0,0,0,0.8);
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.6s ease;
  max-width: 80vw;
  pointer-events: none;
}

@keyframes demoFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -60%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes demoPulse {
  0% {
    box-shadow: 0 0 0 rgba(255, 255, 150, 0);
    transform: scale(1);
  }
  30% {
    box-shadow: 0 0 30px 15px rgba(255, 255, 150, 0.9);
    transform: scale(1.05);
  }
  100% {
    box-shadow: 0 0 0 rgba(255, 255, 150, 0);
    transform: scale(1);
  }
}

.demo-highlight {
  animation: demoPulse 1.5s ease-out;
  font-weight: bold;

  position: relative;
  z-index: 9999;
}

.star-notify-container {
  position: fixed;
  top: 50px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  z-index: 9999;
  pointer-events: none;
}

.star-notify {
  opacity: 0;
  background: transparent;
  padding: 5px 10px;
  color: white;
  font-weight: 300;
  text-shadow: 0 0 10px rgba(0,0,0,0.7);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transform: translateY(-10px);
  font-family: 'Segoe UI', sans-serif;
}

