.ocarina-view.classroom-key {
  display: block;
  width: min(100%, 144px);
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--art-ink);
  font: inherit;
}
.ocarina-fingering {--hole-open: color-mix(in srgb, var(--art-ink) 69%, #101722); display: block; width: 100%; height: auto; overflow: visible}
.ocarina-body,.ocarina-mouth {
  stroke: var(--art-ink);
  stroke-width: 3;
  stroke-linejoin: round;
}
.ocarina-body {fill: color-mix(in srgb, var(--art-blue) 64%, var(--art-paper))}
.ocarina-mouth {fill: var(--art-blue)}
.ocarina-sheen {
  fill: none;
  stroke: var(--art-paper);
  stroke-opacity: .65;
  stroke-width: 4;
  stroke-linecap: round;
}
.ocarina-hole circle {fill: var(--hole-open); stroke: var(--hole-open); stroke-width: 2.6}
.ocarina-hole path {display: none}
.ocarina-hole[data-state=closed] circle {fill: var(--fingering-color); stroke: color-mix(in srgb, var(--art-paper) 64%, var(--art-blue)); stroke-width: 1.55}
.ocarina-hole[data-state=half] path {display: block; fill: var(--fingering-color)}
.ocarina-view[data-state=sounding] .ocarina-body {
  filter: drop-shadow(0 0 1.25px color-mix(in srgb, var(--art-gold) 62%, transparent));
}
.ocarina-view:is([data-state=rest],[data-state=outside]) .ocarina-fingering {opacity: .45}
.ocarina-view.classroom-key:focus-visible {outline: 2px solid var(--art-teal); outline-offset: 2px; border-radius: 7px}
@media print {
  .ocarina-fingering {print-color-adjust: exact; -webkit-print-color-adjust: exact}
}