* {
  box-sizing: border-box;
}

#outer.fg { /* grand */
  --fg-adjust: calc(-2 * (7 * var(--step-percent)));
  --step-percent-line: calc(var(--step-percent) / 2);
  --fg-adjust-line: calc(12 * var(--step-percent-line));
}

#outer {
  --max-bar-height: 6rem;
  --bar-margin-top-base: 4rem;
  --bar-margin-top: calc(var(--bar-margin-top-base) + 1rem); /* space above */
  --bar-margin-bottom-base: 4rem;
  --bar-margin-bottom: calc(var(--bar-margin-bottom-base) + 2rem); /* space for arrow */
  --width-pianokey-max: 2.6rem;
  --width-pianokey-min: 0.8rem;
  --piano-trim-half: 0.15rem;
  --neg-piano-trim-half: -0.15rem;

  /* img is 78 x 243.14961 */
  /* note is at bottom of img on the b4 gap */
  /* 14 steps, and we're same height as parent .note "reference" img */
  /* (/ (- 100 1.52606) 14) */
  /* minus 1.52606% because note is a bit higher in img for sharp/flat overhang */
  /* (/ (- 204.703 (+ 179.228 (/ 243.14961 14))) 243.14961) */
  /* (/ (- 243.14961 (+ 204.703 34.736)) 243.14961) */
  --step-percent: 7.03385286%;
  --step-percent-line: var(--step-percent);
  --fg-adjust: 0%;
  --fg-adjust-line: 0%;
  --translate-c: calc(-1 * (1 * var(--step-percent) - 3.3342314%));
  --translate-d: calc(-1 * (2 * var(--step-percent) - 3.3342314%));
  --translate-e: calc(-1 * (3 * var(--step-percent) - 3.3342314%));
  --translate-f: calc(-1 * (4 * var(--step-percent) - 3.3342314%));
  --translate-g: calc(-1 * (5 * var(--step-percent) - 3.3342314%));
  --translate-a: calc(-1 * (6 * var(--step-percent) - 3.3342314%));
  --translate-b: calc(-1 * (7 * var(--step-percent) - 3.3342314%));

  /* note is at top of img on the f5 line */
  /* plus 3.14045% because note is a bit lower in img for sharp/flat overhang */
  /* (/ (- 30.285 22.649) 243.14961) */
  --translate-c-down: calc(1 * (3 * var(--step-percent) - 3.14045%));
  --translate-d-down: calc(1 * (2 * var(--step-percent) - 3.14045%));
  --translate-e-down: calc(1 * (1 * var(--step-percent) - 3.14045%));
  --translate-f-down: calc(1 * (0 * var(--step-percent) - 3.14045%));
  --translate-g-down: calc(1 * (-1 * var(--step-percent) - 3.14045%));
  --translate-a-down: calc(1 * (-2 * var(--step-percent) - 3.14045%));
  --translate-b-down: calc(1 * (-3 * var(--step-percent) - 3.14045%));

  --translate-octave-0: calc(4 * (7 * var(--step-percent)) + var(--fg-adjust));
  --translate-octave-1: calc(3 * (7 * var(--step-percent)) + var(--fg-adjust));
  --translate-octave-2: calc(2 * (7 * var(--step-percent)) + var(--fg-adjust));
  --translate-octave-3: calc(1 * (7 * var(--step-percent)) + var(--fg-adjust));
  --translate-octave-4: calc(0% + var(--fg-adjust));
  --translate-octave-5: calc(-1 * (7 * var(--step-percent)) + var(--fg-adjust));
  --translate-octave-6: calc(-2 * (7 * var(--step-percent)) + var(--fg-adjust));
  --translate-octave-7: calc(-3 * (7 * var(--step-percent)) + var(--fg-adjust));
  --translate-octave-8: calc(-4 * (7 * var(--step-percent)) + var(--fg-adjust));

  --translate-octave-5-down: calc(0% + var(--fg-adjust));
  --translate-octave-6-down: calc(-1 * (7 * var(--step-percent)) + var(--fg-adjust));
  --translate-octave-7-down: calc(-2 * (7 * var(--step-percent)) + var(--fg-adjust));
  --translate-octave-8-down: calc(-3 * (7 * var(--step-percent)) + var(--fg-adjust));

  /* for older browser, menu close will only work for top part of pg */
  min-height: auto;
  /* dvh prevents shift due to url bar */
  min-height: 100dvh;
}

#heading {
  /* trying to get next,done button on small phones */
  grid-template-rows: minmax(1.8rem, max-content);
}

#appWrapper {
  padding-top: 0;
}

#messageWrapper {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 2rem;
  height: auto;
  z-index: 10;

  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* more space for highest note */
  align-items: center;
}

#message, #result {
  background-color: var(--color-primary-light);
}

#staffW, #callStaff {
  display: flex;
  pointer-events: none; /* prevent click of absolute grand imgs that can cover buttons */
}

#staffW.bass, #callStaff.bass {
  --translate-octave-0: calc(2 * (7 * var(--step-percent)) + 2 * var(--step-percent));
  --translate-octave-1: calc(1 * (7 * var(--step-percent)) + 2 * var(--step-percent));
  --translate-octave-2: calc(0 * (7 * var(--step-percent)) + 2 * var(--step-percent));
  --translate-octave-3: calc(-1 * (7 * var(--step-percent)) + 2 * var(--step-percent));
  --translate-octave-4: calc(-2 * (7 * var(--step-percent)) + 2 * var(--step-percent));
  --translate-octave-5: calc(-3 * (7 * var(--step-percent)) + 2 * var(--step-percent));
  --translate-octave-6: calc(-4 * (7 * var(--step-percent)) + 2 * var(--step-percent));
  --translate-octave-7: calc(-5 * (7 * var(--step-percent)) + 2 * var(--step-percent));
  --translate-octave-8: calc(-6 * (7 * var(--step-percent)) + 2 * var(--step-percent));

  --translate-octave-8-down: calc(-5 * (7 * var(--step-percent)) + 2 * var(--step-percent));
  --translate-octave-7-down: calc(-4 * (7 * var(--step-percent)) + 2 * var(--step-percent));
  --translate-octave-6-down: calc(-3 * (7 * var(--step-percent)) + 2 * var(--step-percent));
  --translate-octave-5-down: calc(-2 * (7 * var(--step-percent)) + 2 * var(--step-percent));
  --translate-octave-4-down: calc(-1 * (7 * var(--step-percent)) + 2 * var(--step-percent));
  --translate-octave-3-down: calc(0 * (7 * var(--step-percent)) + 2 * var(--step-percent));
  --translate-octave-2-down: calc(1 * (7 * var(--step-percent)) + 2 * var(--step-percent));
  --translate-octave-1-down: calc(2 * (7 * var(--step-percent)) + 2 * var(--step-percent));
}

#staffW.alto, #callStaff.alto {
  --translate-octave-0: calc(3 * (7 * var(--step-percent)) + 1 * var(--step-percent));
  --translate-octave-1: calc(2 * (7 * var(--step-percent)) + 1 * var(--step-percent));
  --translate-octave-2: calc(1 * (7 * var(--step-percent)) + 1 * var(--step-percent));
  --translate-octave-3: calc(0 * (7 * var(--step-percent)) + 1 * var(--step-percent));
  --translate-octave-4: calc(-1 * (7 * var(--step-percent)) + 1 * var(--step-percent));
  --translate-octave-5: calc(-2 * (7 * var(--step-percent)) + 1 * var(--step-percent));
  --translate-octave-6: calc(-3 * (7 * var(--step-percent)) + 1 * var(--step-percent));
  --translate-octave-7: calc(-4 * (7 * var(--step-percent)) + 1 * var(--step-percent));
  --translate-octave-8: calc(-5 * (7 * var(--step-percent)) + 1 * var(--step-percent));

  --translate-octave-8-down: calc(-4 * (7 * var(--step-percent)) + 1 * var(--step-percent));
  --translate-octave-7-down: calc(-3 * (7 * var(--step-percent)) + 1 * var(--step-percent));
  --translate-octave-6-down: calc(-2 * (7 * var(--step-percent)) + 1 * var(--step-percent));
  --translate-octave-5-down: calc(-1 * (7 * var(--step-percent)) + 1 * var(--step-percent));
  --translate-octave-4-down: calc(0 * (7 * var(--step-percent)) + 1 * var(--step-percent));
  --translate-octave-3-down: calc(1 * (7 * var(--step-percent)) + 1 * var(--step-percent));
  --translate-octave-2-down: calc(2 * (7 * var(--step-percent)) + 1 * var(--step-percent));
  --translate-octave-1-down: calc(3 * (7 * var(--step-percent)) + 1 * var(--step-percent));
}

#staffW.tenor, #callStaff.tenor {
  --translate-octave-0: calc(3 * (7 * var(--step-percent)) - 1 * var(--step-percent));
  --translate-octave-1: calc(2 * (7 * var(--step-percent)) - 1 * var(--step-percent));
  --translate-octave-2: calc(1 * (7 * var(--step-percent)) - 1 * var(--step-percent));
  --translate-octave-3: calc(0 * (7 * var(--step-percent)) - 1 * var(--step-percent));
  --translate-octave-4: calc(-1 * (7 * var(--step-percent)) - 1 * var(--step-percent));
  --translate-octave-5: calc(-2 * (7 * var(--step-percent)) - 1 * var(--step-percent));
  --translate-octave-6: calc(-3 * (7 * var(--step-percent)) - 1 * var(--step-percent));
  --translate-octave-7: calc(-4 * (7 * var(--step-percent)) - 1 * var(--step-percent));
  --translate-octave-8: calc(-5 * (7 * var(--step-percent)) - 1 * var(--step-percent));

  --translate-octave-8-down: calc(-4 * (7 * var(--step-percent)) - 1 * var(--step-percent));
  --translate-octave-7-down: calc(-3 * (7 * var(--step-percent)) - 1 * var(--step-percent));
  --translate-octave-6-down: calc(-2 * (7 * var(--step-percent)) - 1 * var(--step-percent));
  --translate-octave-5-down: calc(-1 * (7 * var(--step-percent)) - 1 * var(--step-percent));
  --translate-octave-4-down: calc(0 * (7 * var(--step-percent)) - 1 * var(--step-percent));
  --translate-octave-3-down: calc(1 * (7 * var(--step-percent)) - 1 * var(--step-percent));
  --translate-octave-2-down: calc(2 * (7 * var(--step-percent)) - 1 * var(--step-percent));
  --translate-octave-1-down: calc(3 * (7 * var(--step-percent)) - 1 * var(--step-percent));
}

#nameBars {
  display: flex;
  flex-direction: column;
}

.nameBar {
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
  display: flex;
}

button.nameBar.check {
  pointer-events: none;
  border-color: var(--color-primary-fill);
  background-color: var(--color-primary-fill);
}

.namePitch {
  padding: 0.5rem 1rem 0.5rem 1rem;
  width: 100%;
}

.namePitch.check {
  color: var(--color-secondary-text);
}

.bar {
  background-image: url("/static/131/images/stafflines.svg");
  background-repeat: repeat;
  background-position: center;
  background-size: auto 100%;

  max-height: var(--max-bar-height);
  max-width: 100%;
  margin-top: var(--bar-margin-top);
  margin-bottom: var(--bar-margin-bottom);

  display: flex;
  align-items: stretch;
}

.bar.fg {
  background-image: url("/static/131/images/stafflines-fg.svg");
  background-repeat: repeat;
  background-position: top left;
  background-size: auto 100%;

  max-height: calc(2 * var(--max-bar-height));
  max-width: 100%;
  margin-top: var(--bar-margin-top);
  margin-bottom: var(--bar-margin-bottom);

  display: flex;
  align-items: stretch;
}

.bar.trainerPiano {
  margin-bottom: calc(var(--bar-margin-bottom) - 2rem);
}

.bar.trainerBar {
  margin-bottom: 5rem;
}

.clefW, .endW {
  display: flex;
}

.endW {
  margin-left: auto;
}

.note {
  position: relative;

  padding-left: 0.5rem;
  padding-right: 0.5rem;

  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.note.correct {
  opacity: 0.1;
}

.updown.note.correct {
  opacity: 0.3;
}

.noteImg, .clefImg, .keyImg {
  max-height: var(--max-bar-height);
}

.clefImg {
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}

.endW > .clefImg {
  padding-right: 0;
  padding-left: 0;
}

.bar.fg > .noteImg, .bar.fg > .clefImg {
  max-height: calc(2 * var(--max-bar-height));
}

#staffW.tenor > .bar > .clefImg {
  transform: translateY(calc(-2 * var(--step-percent)));
}

.keyImgW {
  /* only for grand */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
}

.keyImg.bass {
  transform: translateY(calc(2 * var(--step-percent)));
}

.keyImg.alto {
  transform: translateY(calc(1 * var(--step-percent)));
}

.keyImg.tenor.flatDown {
  transform: translateY(calc(-1 * var(--step-percent)));
}

.lineImg {
  position: absolute;
  /* we are 78 wide and note is 41.544 wide and basically flush right */
  /* want to be centered around note */
  /* so want mid of note minus half of our size */
  /* (/ (- (- 78 (/ 41.544 2)) (/ 78 2)) 78) */
  transform: translateX(23.369231%);
  max-height: 100%;
}

.botLineImg {
  /* X same as lineImg */
  transform: translate(23.369231%, calc(var(--fg-adjust-line)));
}

.botLine2Img {
  /* X same as lineImg */
  transform: translate(23.369231%, calc(2 * var(--step-percent-line) + var(--fg-adjust-line)));
}

.botLine3Img {
  /* X same as lineImg */
  transform: translate(23.369231%, calc(4 * var(--step-percent-line) + var(--fg-adjust-line)));
}

.botLine4Img {
  /* X same as lineImg */
  transform: translate(23.369231%, calc(6 * var(--step-percent-line) + var(--fg-adjust-line)));
}

.botLine5Img {
  /* X same as lineImg */
  transform: translate(23.369231%, calc(8 * var(--step-percent-line) + var(--fg-adjust-line)));
}

.topLineImg {
  /* X same as lineCImg */
  transform: translate(23.369231%, calc(-12 * var(--step-percent-line)));
}

.topLine2Img {
  /* X same as lineCImg */
  transform: translate(23.369231%, calc(-14 * var(--step-percent-line)));
}

.topLine3Img {
  /* X same as lineCImg */
  transform: translate(23.369231%, calc(-16 * var(--step-percent-line)));
}

.topLine4Img {
  /* X same as lineCImg */
  transform: translate(23.369231%, calc(-18 * var(--step-percent-line)));
}

.topLine5Img {
  /* X same as lineCImg */
  transform: translate(23.369231%, calc(-20 * var(--step-percent-line)));
}

/* C */

.noteImg.pitchC, .noteImg.pitchCs, .noteImg.pitchCb {
  transform: translateY(calc(var(--translate-c) + var(--translate-octave-4)));
}

.noteImg.pitchC.octave1, .noteImg.pitchCs.octave1, .noteImg.pitchCb.octave1 {
  transform: translateY(calc(var(--translate-c) + var(--translate-octave-1)));
}

.noteImg.pitchC.octave2, .noteImg.pitchCs.octave2, .noteImg.pitchCb.octave2 {
  transform: translateY(calc(var(--translate-c) + var(--translate-octave-2)));
}

.noteImg.pitchC.octave3, .noteImg.pitchCs.octave3, .noteImg.pitchCb.octave3 {
  transform: translateY(calc(var(--translate-c) + var(--translate-octave-3)));
}

.noteImg.pitchC.octave5, .noteImg.pitchCs.octave5, .noteImg.pitchCb.octave5 {
  transform: translateY(calc(var(--translate-c) + var(--translate-octave-5)));
}

.noteImg.pitchC.octave6, .noteImg.pitchCs.octave6, .noteImg.pitchCb.octave6 {
  transform: translateY(calc(var(--translate-c) + var(--translate-octave-6)));
}

.noteImg.pitchC.octave3.noteDown, .noteImg.pitchCs.octave3.noteDown, .noteImg.pitchCb.octave3.noteDown {
  transform: translateY(calc(var(--translate-c-down) + var(--translate-octave-3-down)));
}

.noteImg.pitchC.octave4.noteDown, .noteImg.pitchCs.octave4.noteDown, .noteImg.pitchCb.octave4.noteDown {
  transform: translateY(calc(var(--translate-c-down) + var(--translate-octave-4-down)));
}

.noteImg.pitchC.octave5.noteDown, .noteImg.pitchCs.octave5.noteDown, .noteImg.pitchCb.octave5.noteDown {
  transform: translateY(calc(var(--translate-c-down) + var(--translate-octave-5-down)));
}

.noteImg.pitchC.octave6.noteDown, .noteImg.pitchCs.octave6.noteDown, .noteImg.pitchCb.octave6.noteDown {
  transform: translateY(calc(var(--translate-c-down) + var(--translate-octave-6-down)));
}

.noteImg.pitchC.octave7.noteDown, .noteImg.pitchCs.octave7.noteDown, .noteImg.pitchCb.octave7.noteDown {
  transform: translateY(calc(var(--translate-c-down) + var(--translate-octave-7-down)));
}

.noteImg.pitchC.octave8.noteDown, .noteImg.pitchCs.octave8.noteDown, .noteImg.pitchCb.octave8.noteDown {
  transform: translateY(calc(var(--translate-c-down) + var(--translate-octave-8-down)));
}

/* D */

.noteImg.pitchD, .noteImg.pitchDs, .noteImg.pitchDb {
  transform: translateY(calc(var(--translate-d) + var(--translate-octave-4)));
}

.noteImg.pitchD.octave1, .noteImg.pitchDs.octave1, .noteImg.pitchDb.octave1 {
  transform: translateY(calc(var(--translate-d) + var(--translate-octave-1)));
}

.noteImg.pitchD.octave2, .noteImg.pitchDs.octave2, .noteImg.pitchDb.octave2 {
  transform: translateY(calc(var(--translate-d) + var(--translate-octave-2)));
}

.noteImg.pitchD.octave3, .noteImg.pitchDs.octave3, .noteImg.pitchDb.octave3 {
  transform: translateY(calc(var(--translate-d) + var(--translate-octave-3)));
}

.noteImg.pitchD.octave5, .noteImg.pitchDs.octave5, .noteImg.pitchDb.octave5 {
  transform: translateY(calc(var(--translate-d) + var(--translate-octave-5)));
}

.noteImg.pitchD.octave6, .noteImg.pitchDs.octave6, .noteImg.pitchDb.octave6 {
  transform: translateY(calc(var(--translate-d) + var(--translate-octave-6)));
}

.noteImg.pitchD.octave3.noteDown, .noteImg.pitchDs.octave3.noteDown, .noteImg.pitchDb.octave3.noteDown {
  transform: translateY(calc(var(--translate-d-down) + var(--translate-octave-3-down)));
}

.noteImg.pitchD.octave4.noteDown, .noteImg.pitchDs.octave4.noteDown, .noteImg.pitchDb.octave4.noteDown {
  transform: translateY(calc(var(--translate-d-down) + var(--translate-octave-4-down)));
}

.noteImg.pitchD.octave5.noteDown, .noteImg.pitchDs.octave5.noteDown, .noteImg.pitchDb.octave5.noteDown {
  transform: translateY(calc(var(--translate-d-down) + var(--translate-octave-5-down)));
}

.noteImg.pitchD.octave6.noteDown, .noteImg.pitchDs.octave6.noteDown, .noteImg.pitchDb.octave6.noteDown {
  transform: translateY(calc(var(--translate-d-down) + var(--translate-octave-6-down)));
}

.noteImg.pitchD.octave7.noteDown, .noteImg.pitchDs.octave7.noteDown, .noteImg.pitchDb.octave7.noteDown {
  transform: translateY(calc(var(--translate-d-down) + var(--translate-octave-7-down)));
}

.noteImg.pitchD.octave8.noteDown, .noteImg.pitchDs.octave8.noteDown, .noteImg.pitchDb.octave8.noteDown {
  transform: translateY(calc(var(--translate-d-down) + var(--translate-octave-8-down)));
}

/* E */

.noteImg.pitchE, .noteImg.pitchEs, .noteImg.pitchEb {
  transform: translateY(calc(var(--translate-e) + var(--translate-octave-4)));
}

.noteImg.pitchE.octave1, .noteImg.pitchEs.octave1, .noteImg.pitchEb.octave1 {
  transform: translateY(calc(var(--translate-e) + var(--translate-octave-1)));
}

.noteImg.pitchE.octave2, .noteImg.pitchEs.octave2, .noteImg.pitchEb.octave2 {
  transform: translateY(calc(var(--translate-e) + var(--translate-octave-2)));
}

.noteImg.pitchE.octave3, .noteImg.pitchEs.octave3, .noteImg.pitchEb.octave3 {
  transform: translateY(calc(var(--translate-e) + var(--translate-octave-3)));
}

.noteImg.pitchE.octave5, .noteImg.pitchEs.octave5, .noteImg.pitchEb.octave5 {
  transform: translateY(calc(var(--translate-e) + var(--translate-octave-5)));
}

.noteImg.pitchE.octave6, .noteImg.pitchEs.octave6, .noteImg.pitchEb.octave6 {
  transform: translateY(calc(var(--translate-e) + var(--translate-octave-6)));
}

.noteImg.pitchE.octave3.noteDown, .noteImg.pitchEs.octave3.noteDown, .noteImg.pitchEb.octave3.noteDown {
  transform: translateY(calc(var(--translate-e-down) + var(--translate-octave-3-down)));
}

.noteImg.pitchE.octave4.noteDown, .noteImg.pitchEs.octave4.noteDown, .noteImg.pitchEb.octave4.noteDown {
  transform: translateY(calc(var(--translate-e-down) + var(--translate-octave-4-down)));
}

.noteImg.pitchE.octave5.noteDown, .noteImg.pitchEs.octave5.noteDown, .noteImg.pitchEb.octave5.noteDown {
  transform: translateY(calc(var(--translate-e-down) + var(--translate-octave-5-down)));
}

.noteImg.pitchE.octave6.noteDown, .noteImg.pitchEs.octave6.noteDown, .noteImg.pitchEb.octave6.noteDown {
  transform: translateY(calc(var(--translate-e-down) + var(--translate-octave-6-down)));
}

.noteImg.pitchE.octave7.noteDown, .noteImg.pitchEs.octave7.noteDown, .noteImg.pitchEb.octave7.noteDown {
  transform: translateY(calc(var(--translate-e-down) + var(--translate-octave-7-down)));
}

.noteImg.pitchE.octave8.noteDown, .noteImg.pitchEs.octave8.noteDown, .noteImg.pitchEb.octave8.noteDown {
  transform: translateY(calc(var(--translate-e-down) + var(--translate-octave-8-down)));
}

/* F */

.noteImg.pitchF, .noteImg.pitchFs, .noteImg.pitchFb {
  transform: translateY(calc(var(--translate-f) + var(--translate-octave-4)));
}

.noteImg.pitchF.octave1, .noteImg.pitchFs.octave1, .noteImg.pitchFb.octave1 {
  transform: translateY(calc(var(--translate-f) + var(--translate-octave-1)));
}

.noteImg.pitchF.octave2, .noteImg.pitchFs.octave2, .noteImg.pitchFb.octave2 {
  transform: translateY(calc(var(--translate-f) + var(--translate-octave-2)));
}

.noteImg.pitchF.octave3, .noteImg.pitchFs.octave3, .noteImg.pitchFb.octave3 {
  transform: translateY(calc(var(--translate-f) + var(--translate-octave-3)));
}

.noteImg.pitchF.octave5, .noteImg.pitchFs.octave5, .noteImg.pitchFb.octave5 {
  transform: translateY(calc(var(--translate-f) + var(--translate-octave-5)));
}

.noteImg.pitchF.octave6, .noteImg.pitchFs.octave6, .noteImg.pitchFb.octave6 {
  transform: translateY(calc(var(--translate-f) + var(--translate-octave-6)));
}

.noteImg.pitchF.octave3.noteDown, .noteImg.pitchFs.octave3.noteDown, .noteImg.pitchFb.octave3.noteDown {
  transform: translateY(calc(var(--translate-f-down) + var(--translate-octave-3-down)));
}

.noteImg.pitchF.octave4.noteDown, .noteImg.pitchFs.octave4.noteDown, .noteImg.pitchFb.octave4.noteDown {
  transform: translateY(calc(var(--translate-f-down) + var(--translate-octave-4-down)));
}

.noteImg.pitchF.octave5.noteDown, .noteImg.pitchFs.octave5.noteDown, .noteImg.pitchFb.octave5.noteDown {
  transform: translateY(calc(var(--translate-f-down) + var(--translate-octave-5-down)));
}

.noteImg.pitchF.octave6.noteDown, .noteImg.pitchFs.octave6.noteDown, .noteImg.pitchFb.octave6.noteDown {
  transform: translateY(calc(var(--translate-f-down) + var(--translate-octave-6-down)));
}

.noteImg.pitchF.octave7.noteDown, .noteImg.pitchFs.octave7.noteDown, .noteImg.pitchFb.octave7.noteDown {
  transform: translateY(calc(var(--translate-f-down) + var(--translate-octave-7-down)));
}

.noteImg.pitchF.octave8.noteDown, .noteImg.pitchFs.octave8.noteDown, .noteImg.pitchFb.octave8.noteDown {
  transform: translateY(calc(var(--translate-f-down) + var(--translate-octave-8-down)));
}

/* G */

.noteImg.pitchG, .noteImg.pitchGs, .noteImg.pitchGb {
  transform: translateY(calc(var(--translate-g) + var(--translate-octave-4)));
}

.noteImg.pitchG.octave1, .noteImg.pitchGs.octave1, .noteImg.pitchGb.octave1 {
  transform: translateY(calc(var(--translate-g) + var(--translate-octave-1)));
}

.noteImg.pitchG.octave2, .noteImg.pitchGs.octave2, .noteImg.pitchGb.octave2 {
  transform: translateY(calc(var(--translate-g) + var(--translate-octave-2)));
}

.noteImg.pitchG.octave3, .noteImg.pitchGs.octave3, .noteImg.pitchGb.octave3 {
  transform: translateY(calc(var(--translate-g) + var(--translate-octave-3)));
}

.noteImg.pitchG.octave5, .noteImg.pitchGs.octave5, .noteImg.pitchGb.octave5 {
  transform: translateY(calc(var(--translate-g) + var(--translate-octave-5)));
}

.noteImg.pitchG.octave6, .noteImg.pitchGs.octave6, .noteImg.pitchGb.octave6 {
  transform: translateY(calc(var(--translate-g) + var(--translate-octave-6)));
}

.noteImg.pitchG.octave3.noteDown, .noteImg.pitchGs.octave3.noteDown, .noteImg.pitchGb.octave3.noteDown {
  transform: translateY(calc(var(--translate-g-down) + var(--translate-octave-3-down)));
}

.noteImg.pitchG.octave4.noteDown, .noteImg.pitchGs.octave4.noteDown, .noteImg.pitchGb.octave4.noteDown {
  transform: translateY(calc(var(--translate-g-down) + var(--translate-octave-4-down)));
}

.noteImg.pitchG.octave5.noteDown, .noteImg.pitchGs.octave5.noteDown, .noteImg.pitchGb.octave5.noteDown {
  transform: translateY(calc(var(--translate-g-down) + var(--translate-octave-5-down)));
}

.noteImg.pitchG.octave6.noteDown, .noteImg.pitchGs.octave6.noteDown, .noteImg.pitchGb.octave6.noteDown {
  transform: translateY(calc(var(--translate-g-down) + var(--translate-octave-6-down)));
}

.noteImg.pitchG.octave7.noteDown, .noteImg.pitchGs.octave7.noteDown, .noteImg.pitchGb.octave7.noteDown {
  transform: translateY(calc(var(--translate-g-down) + var(--translate-octave-7-down)));
}

.noteImg.pitchG.octave8.noteDown, .noteImg.pitchGs.octave8.noteDown, .noteImg.pitchGb.octave8.noteDown {
  transform: translateY(calc(var(--translate-g-down) + var(--translate-octave-8-down)));
}

/* A */

.noteImg.pitchA, .noteImg.pitchAs, .noteImg.pitchAb {
  transform: translateY(calc(var(--translate-a) + var(--translate-octave-4)));
}

.noteImg.pitchA.octave1, .noteImg.pitchAs.octave1, .noteImg.pitchAb.octave1 {
  transform: translateY(calc(var(--translate-a) + var(--translate-octave-1)));
}

.noteImg.pitchA.octave2, .noteImg.pitchAs.octave2, .noteImg.pitchAb.octave2 {
  transform: translateY(calc(var(--translate-a) + var(--translate-octave-2)));
}

.noteImg.pitchA.octave3, .noteImg.pitchAs.octave3, .noteImg.pitchAb.octave3 {
  transform: translateY(calc(var(--translate-a) + var(--translate-octave-3)));
}

.noteImg.pitchA.octave5, .noteImg.pitchAs.octave5, .noteImg.pitchAb.octave5 {
  transform: translateY(calc(var(--translate-a) + var(--translate-octave-5)));
}

.noteImg.pitchA.octave6, .noteImg.pitchAs.octave6, .noteImg.pitchAb.octave6 {
  transform: translateY(calc(var(--translate-a) + var(--translate-octave-6)));
}

.noteImg.pitchA.octave3.noteDown, .noteImg.pitchAs.octave3.noteDown, .noteImg.pitchAb.octave3.noteDown {
  transform: translateY(calc(var(--translate-a-down) + var(--translate-octave-3-down)));
}

.noteImg.pitchA.octave4.noteDown, .noteImg.pitchAs.octave4.noteDown, .noteImg.pitchAb.octave4.noteDown {
  transform: translateY(calc(var(--translate-a-down) + var(--translate-octave-4-down)));
}

.noteImg.pitchA.octave5.noteDown, .noteImg.pitchAs.octave5.noteDown, .noteImg.pitchAb.octave5.noteDown {
  transform: translateY(calc(var(--translate-a-down) + var(--translate-octave-5-down)));
}

.noteImg.pitchA.octave6.noteDown, .noteImg.pitchAs.octave6.noteDown, .noteImg.pitchAb.octave6.noteDown {
  transform: translateY(calc(var(--translate-a-down) + var(--translate-octave-6-down)));
}

.noteImg.pitchA.octave7.noteDown, .noteImg.pitchAs.octave7.noteDown, .noteImg.pitchAb.octave7.noteDown {
  transform: translateY(calc(var(--translate-a-down) + var(--translate-octave-7-down)));
}

.noteImg.pitchA.octave8.noteDown, .noteImg.pitchAs.octave8.noteDown, .noteImg.pitchAb.octave8.noteDown {
  transform: translateY(calc(var(--translate-a-down) + var(--translate-octave-8-down)));
}

/* B */

.noteImg.pitchB, .noteImg.pitchBs, .noteImg.pitchBb {
  transform: translateY(calc(var(--translate-b) + var(--translate-octave-4)));
}

.noteImg.pitchB.octave1, .noteImg.pitchBs.octave1, .noteImg.pitchBb.octave1 {
  transform: translateY(calc(var(--translate-b) + var(--translate-octave-1)));
}

.noteImg.pitchB.octave2, .noteImg.pitchBs.octave2, .noteImg.pitchBb.octave2 {
  transform: translateY(calc(var(--translate-b) + var(--translate-octave-2)));
}

.noteImg.pitchB.octave3, .noteImg.pitchBs.octave3, .noteImg.pitchBb.octave3 {
  transform: translateY(calc(var(--translate-b) + var(--translate-octave-3)));
}

.noteImg.pitchB.octave5, .noteImg.pitchBs.octave5, .noteImg.pitchBb.octave5 {
  transform: translateY(calc(var(--translate-b) + var(--translate-octave-5)));
}

.noteImg.pitchB.octave6, .noteImg.pitchBs.octave6, .noteImg.pitchBb.octave6 {
  transform: translateY(calc(var(--translate-b) + var(--translate-octave-6)));
}

.noteImg.pitchB.octave3.noteDown, .noteImg.pitchBs.octave3.noteDown, .noteImg.pitchBb.octave3.noteDown {
  transform: translateY(calc(var(--translate-b-down) + var(--translate-octave-3-down)));
}

.noteImg.pitchB.octave4.noteDown, .noteImg.pitchBs.octave4.noteDown, .noteImg.pitchBb.octave4.noteDown {
  transform: translateY(calc(var(--translate-b-down) + var(--translate-octave-4-down)));
}

.noteImg.pitchB.octave5.noteDown, .noteImg.pitchBs.octave5.noteDown, .noteImg.pitchBb.octave5.noteDown {
  transform: translateY(calc(var(--translate-b-down) + var(--translate-octave-5-down)));
}

.noteImg.pitchB.octave6.noteDown, .noteImg.pitchBs.octave6.noteDown, .noteImg.pitchBb.octave6.noteDown {
  transform: translateY(calc(var(--translate-b-down) + var(--translate-octave-6-down)));
}

.noteImg.pitchB.octave7.noteDown, .noteImg.pitchBs.octave7.noteDown, .noteImg.pitchBb.octave7.noteDown {
  transform: translateY(calc(var(--translate-b-down) + var(--translate-octave-7-down)));
}

.noteImg.pitchB.octave8.noteDown, .noteImg.pitchBs.octave8.noteDown, .noteImg.pitchBb.octave8.noteDown {
  transform: translateY(calc(var(--translate-b-down) + var(--translate-octave-8-down)));
}

.question, .answer {
  position: absolute;
  bottom: 0;
  transform: translateY(250%);

  width: 100%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;

  font-size: 1.4rem;

  display: flex;
  justify-content: flex-end;
}

.answer {
  transform: translateY(350%);
}

.note.on > .answer {
  color: var(--color-secondary-text);
  visibility: visible;
  transform: translateY(250%);
}

.note.on > .answer.fill {
  transform: translateY(350%);
}

.bar.trainerPiano > .note > .answer {
  display: none;
}

/*
.note.on > .noteImg {
  filter: var(--filter-color-secondary-text);
}
*/

.marker {
  display: none;
}

.note.on > .marker,
.note.onleft.updown > .marker {
  height: calc(100% + var(--bar-margin-top) + var(--bar-margin-bottom));
  padding-top: var(--bar-margin-top);
  position: absolute;
  top: calc(-1 * var(--bar-margin-top));
  left: 0;
  right: 0;
  bottom: 0;

  font-size: 3rem;
  color: var(--color-secondary-text);

  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.note.on.updown > .marker,
.note.onleft.updown > .marker {
  border: 0.12rem solid var(--color-emphasis-fill);
}

.note.on.updown > .marker {
  border-left: none;
}

.note.onleft.updown > .marker {

  border-right: none;
}

.question {
  color: var(--color-secondary-text);
}

.updown.correct > .question {
  color: var(--color-primary-text);
}

.question.fill {
  color: var(--color-primary-text);
}

.question.fill.check {
  color: var(--color-secondary-text);
}

.question.ok {
  color: var(--color-primary-text);
}

.bar.trainerPiano > .note > .question {
  display: none;
}

#namesW {
  margin-bottom: 1rem;
  width: 100%;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#namesW.piano {
  width: 100%;
  max-width: calc(100vw - 0.5rem * 2 - var(--piano-trim-half) * 2);
  overflow-x: scroll;
  justify-content: normal; /* done in edge children instead */

  padding-top: 1rem; /* else "P I A N O" is hidden due to overflow-x ~ creating new context */
  padding-bottom: var(--piano-trim-half);
  padding-left: var(--piano-trim-half);
  padding-right: var(--piano-trim-half);

  flex-wrap: nowrap;
}

#namesW.checking > div {
  pointer-events: none;
}

#namesW.piano > div:first-child {
  margin-left: auto; /* justify-content interferes with overflow-x */
  box-shadow: var(--neg-piano-trim-half) var(--piano-trim-half) 0 var(--piano-trim-half) var(--color-emphasis-fill);
}

#namesW.piano > div:last-child {
  margin-right: auto; /* justify-content interferes with overflow-x */
  box-shadow: var(--piano-trim-half) var(--piano-trim-half) 0 var(--piano-trim-half) var(--color-emphasis-fill);
}

#namesW.piano.checking > div:first-child {
  box-shadow: var(--neg-piano-trim-half) var(--piano-trim-half) 0 var(--piano-trim-half) var(--color-primary-fill);
}

#namesW.piano.checking > div:last-child {
  box-shadow: var(--piano-trim-half) var(--piano-trim-half) 0 var(--piano-trim-half) var(--color-primary-fill);
}

#namesW.subdue {
  opacity: 0.8; /* for very light flash when perfect */
}

.pitchButton {
  padding: 1rem;
  margin: 0.5rem;
  font-size: 1.4rem;
}

.pianoBW {
  position: relative;
  display: flex;
  width: 100%;
  max-width: var(--width-pianokey-max);
  min-width: var(--width-pianokey-min);
  box-shadow: 0 calc(2 * var(--piano-trim-half)) 0 0 var(--color-emphasis-fill);
}

#namesW.piano.checking > .pianoBW {
  box-shadow: 0 calc(2 * var(--piano-trim-half)) 0 0 var(--color-primary-fill);
}

/* set aspect ratio */
.pianoBW::before {
  content: "";
  display: block;
  padding-top: calc(100% * (90 / 23.5));
}

.pianoBW.pianoMiddle::after {
  content: "P I A N O";
  font-size: 0.8rem;
  width: 5rem;
  text-align: center;
  position: absolute;
  transform: translate(-50%, calc(-100%));
  display: block;
}

button.pianoButton {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  width: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--color-primary-fill);
  border: 0.12rem solid var(--color-emphasis-border);
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

button.blackKey {
  position: absolute;
  top: 0;
  left: 100%;
  transform: translateX(-50%);
  height: calc(100% * (9 / 15));
  width: calc(100% / 23.5 * 13.7);
  background-color: var(--color-primary-text);
  border-color: var(--color-primary-text);
  z-index: 2;
}

button.pianoButton.down {
  background-color: var(--color-primary-border);
}

button.pianoButton.blackKey.down {
  background-color: var(--color-emphasis-border);
  border-color: var(--color-emphasis-fill);
}

.dot {
  display: none;
  width: 80%;
  min-width: 0.7rem;
  margin-bottom: 10%;
  background-color: var(--color-secondary-text);
  border-radius: 50%;
  z-index: 3;
}

/* set aspect ratio */
.dot::before {
  content: "";
  display: block;
  padding-top: 100%;
}

button.pianoButton.questionKey > .dot {
  display: flex;
}

button.pianoButton.blackKey.questionKey {
  background-color: var(--color-secondary-text);
  border-color: var(--color-secondary-text);
}

button.pianoButton.blackKey > .dot {
  display: none;
}

button.pianoButton.answerKey > .dot {
  display: none;
}

#buttonsW {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

#buttonsW.trainerPiano {
  margin-top: 1rem;
}

#setupB, #setupEx {
  margin-right: auto;
}

#undoB {
  padding: 0.5rem;
  height: 4rem;
}

.arrowB {
  padding: 0.5rem;
  margin: 0.5rem;
  height: 3.6rem;
  width: 3.6rem;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.arrowBArrow {
  display: flex;
}

.arrowBArrowImg {
  width: 100%;
}

.arrowBName {
  display: none;
}

.arrowBNameIv {
  display: flex;
}

@media screen and (max-height: 50rem) {
  /* trying to get next,done button on small phones */
  #namesW {
    margin: 0;
  }
}

@media screen and (min-width: 0) and (max-width: 500px) {
  /* for worst case, when have wide key sig */

  #outer[data-bpb="6"] {
    --max-bar-height: 4.4rem;
  }

  #outer[data-bpb="5"] {
    --max-bar-height: 4.8rem;
  }
}

.answer.retracted {
  display: none;
}