.brs-keyboard {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.brs-key-natural {
  fill: #fff;
  stroke: #171717;
  stroke-width: 2;
}

.brs-key-anchor {
  fill: #efe9de;
  stroke: #567d46;
  stroke-width: 5;
  stroke-dasharray: 9 5;
}

.brs-key-accidental {
  fill: #171717;
  stroke: #171717;
  stroke-width: 2;
}

.brs-key-label,
.brs-key-accidental-label,
.brs-key-guide-label {
  fill: #171717;
  font: 700 18px/1 Inter, Arial, sans-serif;
}

.brs-key-accidental-label {
  fill: #fff;
  font-size: 12px;
}

.brs-key-guide,
.brs-key-bracket {
  fill: none;
  stroke: #171717;
  stroke-width: 4;
}

.brs-key-direction {
  fill: #963b3f;
}

.worksheet-footer {
  color: #171717;
  font-size: 12pt;
  line-height: 1.35;
}

@media (max-width: 42rem) {
  .figure {
    overflow-x: auto;
  }

  .brs-keyboard {
    min-width: 42rem;
  }
}

@media print {
  .brs-key-anchor {
    fill: #fff;
    stroke: #000;
  }

  .brs-key-natural,
  .brs-key-accidental,
  .brs-key-guide,
  .brs-key-bracket {
    stroke: #000;
  }

  .brs-key-accidental,
  .brs-key-direction,
  .brs-key-label,
  .brs-key-guide-label {
    fill: #000;
  }

  .brs-key-accidental-label {
    fill: #fff;
  }
}