/* Shared SVG coordinates keep the falling notes directly above their keys. */
.pianola-premium .step .step-art.feature-note-art,
.pianola-premium .step .step-art.feature-tempo-art {
  display: block;
  padding: 0;
  overflow: hidden;
  background: #ececec;
}
.feature-roll,
.feature-tempo {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  font-family: inherit;
}
.feature-art-caption {
  fill: #656565;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 1.5px;
}
.feature-roll-background { fill: #e2e2e2; }
.feature-roll-grid { stroke: #cbcbcb; stroke-width: 1; }
.feature-roll-note { fill: #858585; }
.feature-roll-note.is-playing { fill: #515151; }
.feature-roll-key { stroke-width: 1; }
.feature-roll-key-white { fill: #fafafa; stroke: #c3c3c3; }
.feature-roll-key-black { fill: #292929; stroke: #151515; }
.feature-roll-key-white.is-playing { fill: #aaa; stroke: #848484; }
.feature-roll-key-black.is-playing { fill: #aaa; stroke: #737373; }
.feature-roll-play-line { stroke: #6c6c6c; stroke-width: 1.5; }
.feature-tempo-title { fill: #555; font-size: 19px; font-weight: 500; letter-spacing: -.5px; }
.feature-tempo-value { fill: #292929; font-size: 33px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.feature-tempo-rail { stroke: #c6c6c6; stroke-width: 4; stroke-linecap: round; }
.feature-tempo-fill { stroke: #747474; stroke-width: 4; stroke-linecap: round; }
.feature-tempo-thumb { fill: #fafafa; stroke: #3d3d3d; stroke-width: 2.5; }
.feature-tempo-endpoint { fill: #727272; font-size: 11px; font-weight: 500; }