.staves { flex: 1; min-height: 430px; display: grid; }
/* The 18px gap includes the two former inner 1px borders. */
.staff { position: relative; display: grid; grid-template-rows: repeat(2, minmax(198px, 1fr)); gap: 18px; background: var(--white); border: 1px solid var(--mist-200); border-radius: 10px; overflow: hidden; }
.staff-row { position: relative; }
.lines { position: absolute; inset: 26% 3%; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.lines i { display: block; height: 2px; background: var(--neutral-300); }
.staff canvas { position: absolute; width: 100%; height: 100%; inset: 0; touch-action: none; cursor: crosshair; }
.staves.erasing .staff canvas { cursor: cell; }

.staff canvas { color: var(--neutral-900); }