body{
    background-color: teal;
  }
  .book {
    font-size: 20px;
    width: 60%;
    margin: 10px auto;
    perspective: 1200px;
    border: 3px solid #cbb09c;
    border-radius: 15px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.8);
  }
  #page {
  transition: transform 1s ease, opacity 1s ease;
  transform-origin: left center;
}

.turn {
  transform: rotateY(-180deg);
  opacity: 0;
}

.highlight {
  background-color: yellow;
  animation: pulse 1.5s ease-in-out infinite;
}

/* Base karaoke pulse */
@keyframes pulse {
  0%   { opacity: 0.4; }
  50%  { opacity: 1; }
  100% { opacity: 0.4; }
}

.highlight-Hasan {
  background-color: #F1E6C9;
  animation: pulse 1.5s ease-in-out infinite;
}

.highlight-Arul {
  background-color: lightblue;
  animation: pulse 1.5s ease-in-out infinite;
}



.turn {
  transform: rotateY(-180deg);
  opacity: 0;
}
.img{
  max-width: 400px;
  width: 100%;
  
}
.img img{
  width: 100%;
  height: 100%;
  border-radius:15px;
}
#Om{
  max-width: 100px;
  width: 100%;
}

</style>
<style>
.heart-frame {
  width: 100px;
  height: 100px;
  position: relative;
  display: inline-block;
}

.heart-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(
    50% 15%, 61% 0, 78% 0, 100% 25%, 100% 50%, 
    85% 75%, 50% 100%, 15% 75%, 0 50%, 0 25%, 
    22% 0, 39% 0
  );
  border: 6px solid red;
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.6);
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from { box-shadow: 0 0 10px rgba(255, 0, 0, 0.4); }
  to   { box-shadow: 0 0 25px rgba(255, 0, 0, 0.9); }
}
#ttsBtn{
  background-color: skyblue;
  padding: 8px 12px;
  border-radius: 8px;
}
#nextLessonBtn {
  padding: 12px 24px;
  font-size: 16px;
  background-color: #28a745; /* Green for celebration */
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
#nextLessonBtn:hover {
  background-color: #218838;
}
#modeMessage {
    font-size: 14px;
    color: black;
    background-color: #f0f0f0;   /* soft grey background */
    border: 1px solid #ccc;      /* light border */
    border-radius: 6px;          /* rounded corners */
    padding: 8px 12px;           /* breathing space */
    margin-bottom: 12px;         /* gap below banner */
    font-family: Arial, sans-serif;
}