/* ═══════════════════════════════════════════════════════════════
   Staff-specific styling — VexFlow Canvas container
   ═══════════════════════════════════════════════════════════════ */

.staff-canvas-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 220px;
  position: relative;
}

#staff-canvas {
  width: 100%;
  max-width: 100%;
  min-height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* VexFlow Canvas element inside the container */
#staff-canvas canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Subtle pulse animation when new content appears */
@keyframes noteAppear {
  0% { opacity: 0; transform: scale(0.97); }
  100% { opacity: 1; transform: scale(1); }
}

#staff-canvas > canvas {
  animation: noteAppear 200ms ease-out;
}