body {
  background: #f0e4d7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
}
.flute-container { position: relative; }
.hole {
  cursor: pointer;
  fill: #654321;
  transition: fill 0.2s, stroke 0.2s;
  stroke-width: 0;
}
#hole0.active { stroke: #e74c3c; stroke-width: 5; }
#hole1.active { stroke: #27ae60; stroke-width: 5; }
#hole2.active { stroke: #3498db; stroke-width: 5; }
#hole3.active { stroke: #f1c40f; stroke-width: 5; }
.hieroglyphs { display: flex; justify-content: center; margin-top: 20px; gap: 40px; }
.hieroglyph { width: 64px; height: 64px; opacity: 0.3; transition: opacity 0.3s; }
.visible { opacity: 1; }
.controls { margin-top: 20px; text-align: center; }
button { background: none; border: none; cursor: pointer; width: 80px; height: 120px; }
#message { margin-top: 10px; font-size: 18px; }