/* Make accordion header thinner */
.accordion-button {
  padding: 6px 12px;   /* default is ~16px 20px */
  /* font-size: 13px;     optional */
  line-height: 1.2;
}

.abcjs-highlight {
  fill: #0a9ecc;
}
.abcjs-cursor {
  stroke: red;
}

#l_message {
  display: none;
  min-height: 200px;
  max-height: 300px;
  overflow: auto;
  font-family: cursive;
  font-size: 12px;
}

pre {
  max-width: 100%;
  overflow-x: auto; /* optional: allows scrolling inside the pre if needed */
  white-space: pre-wrap; /* wraps long lines */
  word-wrap: break-word; /* legacy support */
  overflow-wrap: break-word;
}

.fun-list {
  list-style: none;
  padding-left: 0;
}

.fun-list li i {
  color: #ff4d6d;   /* fun color */
  margin-right: 8px;
}

#pianoContainer svg {
  width: 100%;
  min-height: 220px;
}