.note > * {
  position: absolute;
}

.note-bloom {
  z-index: 2!important;
}

.position-bloom_click {
  --body-height: calc(var(--innerHeight) * 0.5) ;
  --body-width: calc(var(--body-height) * 1.0);
  
  position: absolute;
  left: calc(100% * var(--x, 0));
  bottom: calc(100% * var(--y, 0));

  height: 0;
  width: 0;
}

.body-bloom_click {
  width: var(--body-width);
  height: var(--body-height);
  margin: calc(-1 * var(--body-height) / 2) calc(-1 * var(--body-width) / 2);
  background-image: url('./note.png');
  background-size: calc(44.0 * var(--body-width)) calc(43.5 * var(--body-height));
  background-repeat: no-repeat;
  opacity: 0;

  animation-duration: calc(var(--fadein-time, 1.6s) / var(--playspeed, 1));
  animation-delay: calc(var(--delay-time, 0s) / var(--playspeed, 1));

  animation-name: keyframes-bloom_click;
  animation-play-state: paused;
  animation-iteration-count: 1;
  animation-fill-mode: none;
  animation-timing-function: steps(1);
}

@keyframes keyframes-bloom_click {

  0.0% {
    opacity: 1;
    background-position: 65.11627906976744% 94.11764705882352%;
  }

  10.0% {
    opacity: 1;
    background-position: 67.44186046511628% 94.11764705882352%;
  }

  20.0% {
    opacity: 1;
    background-position: 69.76744186046511% 94.11764705882352%;
  }

  30.0% {
    opacity: 1;
    background-position: 72.09302325581395% 94.11764705882352%;
  }

  40.0% {
    opacity: 1;
    background-position: 74.4186046511628% 94.11764705882352%;
  }

  50.0% {
    opacity: 1;
    background-position: 76.74418604651163% 94.11764705882352%;
  }

  60.0% {
    opacity: 1;
    background-position: 79.06976744186046% 94.11764705882352%;
  }

  70.0% {
    opacity: 1;
    background-position: 81.3953488372093% 94.11764705882352%;
  }

  80.0% {
    opacity: 1;
    background-position: 83.72093023255815% 94.11764705882352%;
  }

  90.0%,
  100% {
    opacity: 1;
    background-position: 86.04651162790698% 94.11764705882352%;
  }

}

.position-bloom_flick {
  --body-height: calc(var(--innerHeight) * 0.6) ;
  --body-width: calc(var(--body-height) * 2.0);
  
  position: absolute;
  left: calc(100% * var(--x, 0));
  bottom: calc(100% * var(--y, 0));

  height: 0;
  width: 0;
}

.body-bloom_flick {
  width: var(--body-width);
  height: var(--body-height);
  margin: calc(-1 * var(--body-height) / 2) calc(-1 * var(--body-width) / 2);
  background-image: url('./note.png');
  background-size: calc(11.0 * var(--body-width)) calc(21.75 * var(--body-height));
  background-repeat: no-repeat;
  opacity: 0;

  animation-duration: calc(var(--fadein-time, 1.6s) / var(--playspeed, 1));
  animation-delay: calc(var(--delay-time, 0s) / var(--playspeed, 1));

  animation-name: keyframes-bloom_flick;
  animation-play-state: paused;
  animation-iteration-count: 1;
  animation-fill-mode: none;
  animation-timing-function: steps(1);
}

@keyframes keyframes-bloom_flick {

  0.0% {
    opacity: 1;
    background-position: 0.0% 0.0%;
  }

  5.3% {
    opacity: 1;
    background-position: 0.0% 4.819277108433735%;
  }

  10.5% {
    opacity: 1;
    background-position: 20.0% 14.457831325301203%;
  }

  15.8% {
    opacity: 1;
    background-position: 0.0% 19.27710843373494%;
  }

  21.1% {
    opacity: 1;
    background-position: 10.0% 19.27710843373494%;
  }

  26.3% {
    opacity: 1;
    background-position: 20.0% 19.27710843373494%;
  }

  31.6% {
    opacity: 1;
    background-position: 0.0% 24.096385542168676%;
  }

  36.8% {
    opacity: 1;
    background-position: 10.0% 24.096385542168676%;
  }

  42.1% {
    opacity: 1;
    background-position: 20.0% 24.096385542168676%;
  }

  47.4% {
    opacity: 1;
    background-position: 30.0% 0.0%;
  }

  52.6% {
    opacity: 1;
    background-position: 10.0% 0.0%;
  }

  57.9% {
    opacity: 1;
    background-position: 10.0% 4.819277108433735%;
  }

  63.2% {
    opacity: 1;
    background-position: 0.0% 9.63855421686747%;
  }

  68.4% {
    opacity: 1;
    background-position: 10.0% 9.63855421686747%;
  }

  73.7% {
    opacity: 1;
    background-position: 0.0% 14.457831325301203%;
  }

  78.9% {
    opacity: 1;
    background-position: 10.0% 14.457831325301203%;
  }

  84.2% {
    opacity: 1;
    background-position: 20.0% 0.0%;
  }

  89.5% {
    opacity: 1;
    background-position: 20.0% 4.819277108433735%;
  }

  94.7%,
  100% {
    opacity: 1;
    background-position: 20.0% 9.63855421686747%;
  }

}

.position-bloom_other {
  --body-height: calc(var(--innerHeight) * 0.5) ;
  --body-width: calc(var(--body-height) * 1.0);
  
  position: absolute;
  left: calc(100% * var(--x, 0));
  bottom: calc(100% * var(--y, 0));

  height: 0;
  width: 0;
}

.body-bloom_other {
  width: var(--body-width);
  height: var(--body-height);
  margin: calc(-1 * var(--body-height) / 2) calc(-1 * var(--body-width) / 2);
  background-image: url('./note.png');
  background-size: calc(44.0 * var(--body-width)) calc(43.5 * var(--body-height));
  background-repeat: no-repeat;
  opacity: 0;

  animation-duration: calc(var(--fadein-time, 1.6s) / var(--playspeed, 1));
  animation-delay: calc(var(--delay-time, 0s) / var(--playspeed, 1));

  animation-name: keyframes-bloom_other;
  animation-play-state: paused;
  animation-iteration-count: 1;
  animation-fill-mode: none;
  animation-timing-function: steps(1);
}

@keyframes keyframes-bloom_other {

  0.0% {
    opacity: 1;
    background-position: 88.37209302325581% 94.11764705882352%;
  }

  10.0% {
    opacity: 1;
    background-position: 90.69767441860465% 94.11764705882352%;
  }

  20.0% {
    opacity: 1;
    background-position: 93.02325581395348% 94.11764705882352%;
  }

  30.0% {
    opacity: 1;
    background-position: 95.34883720930233% 94.11764705882352%;
  }

  40.0% {
    opacity: 1;
    background-position: 65.11627906976744% 96.47058823529412%;
  }

  50.0% {
    opacity: 1;
    background-position: 67.44186046511628% 96.47058823529412%;
  }

  60.0% {
    opacity: 1;
    background-position: 69.76744186046511% 96.47058823529412%;
  }

  70.0% {
    opacity: 1;
    background-position: 72.09302325581395% 96.47058823529412%;
  }

  80.0% {
    opacity: 1;
    background-position: 74.4186046511628% 96.47058823529412%;
  }

  90.0%,
  100% {
    opacity: 1;
    background-position: 76.74418604651163% 96.47058823529412%;
  }

}

.position-cdrag_child_down {
  --body-height: calc(var(--innerHeight) * 0.125) ;
  --body-width: calc(var(--body-height) * 1.0);
  
  position: absolute;
  left: calc(100% * var(--x, 0));
  bottom: calc(100% * var(--y, 0));

  height: 0;
  width: 0;
}

.body-cdrag_child_down {
  width: var(--body-width);
  height: var(--body-height);
  margin: calc(-1 * var(--body-height) / 2) calc(-1 * var(--body-width) / 2);
  background-image: url('./note.png');
  background-size: calc(176.0 * var(--body-width)) calc(174.0 * var(--body-height));
  background-repeat: no-repeat;
  opacity: 0;

  animation-duration: calc(var(--fadein-time, 1.6s) / var(--playspeed, 1));
  animation-delay: calc(var(--delay-time, 0s) / var(--playspeed, 1));

  animation-name: keyframes-cdrag_child_down;
  animation-play-state: paused;
  animation-iteration-count: 1;
  animation-fill-mode: none;
  animation-timing-function: steps(1);
}

@keyframes keyframes-cdrag_child_down {

  0.0% {
    opacity: 1;
    background-position: 19.428571428571427% 99.56647398843931%;
  }

  2.1% {
    opacity: 1;
    background-position: 20.0% 99.56647398843931%;
  }

  4.3% {
    opacity: 1;
    background-position: 26.285714285714285% 99.56647398843931%;
  }

  6.4% {
    opacity: 1;
    background-position: 32.57142857142858% 99.56647398843931%;
  }

  8.5% {
    opacity: 1;
    background-position: 38.857142857142854% 99.56647398843931%;
  }

  10.6% {
    opacity: 1;
    background-position: 43.42857142857143% 99.56647398843931%;
  }

  12.8% {
    opacity: 1;
    background-position: 44.0% 99.56647398843931%;
  }

  14.9% {
    opacity: 1;
    background-position: 44.57142857142857% 99.56647398843931%;
  }

  17.0% {
    opacity: 1;
    background-position: 45.14285714285714% 99.56647398843931%;
  }

  19.1% {
    opacity: 1;
    background-position: 45.714285714285715% 99.56647398843931%;
  }

  21.3% {
    opacity: 1;
    background-position: 20.57142857142857% 99.56647398843931%;
  }

  23.4% {
    opacity: 1;
    background-position: 21.142857142857142% 99.56647398843931%;
  }

  25.5% {
    opacity: 1;
    background-position: 21.714285714285715% 99.56647398843931%;
  }

  27.7% {
    opacity: 1;
    background-position: 22.285714285714285% 99.56647398843931%;
  }

  29.8% {
    opacity: 1;
    background-position: 22.857142857142858% 99.56647398843931%;
  }

  31.9% {
    opacity: 1;
    background-position: 23.42857142857143% 99.56647398843931%;
  }

  34.0% {
    opacity: 1;
    background-position: 24.0% 99.56647398843931%;
  }

  36.2% {
    opacity: 1;
    background-position: 24.571428571428573% 99.56647398843931%;
  }

  38.3% {
    opacity: 1;
    background-position: 25.142857142857146% 99.56647398843931%;
  }

  40.4% {
    opacity: 1;
    background-position: 25.71428571428571% 99.56647398843931%;
  }

  42.6% {
    opacity: 1;
    background-position: 26.857142857142858% 99.56647398843931%;
  }

  44.7% {
    opacity: 1;
    background-position: 27.42857142857143% 99.56647398843931%;
  }

  46.8% {
    opacity: 1;
    background-position: 28.000000000000004% 99.56647398843931%;
  }

  48.9% {
    opacity: 1;
    background-position: 28.57142857142857% 99.56647398843931%;
  }

  51.1% {
    opacity: 1;
    background-position: 29.142857142857142% 99.56647398843931%;
  }

  53.2% {
    opacity: 1;
    background-position: 29.714285714285715% 99.56647398843931%;
  }

  55.3% {
    opacity: 1;
    background-position: 30.28571428571429% 99.56647398843931%;
  }

  57.4% {
    opacity: 1;
    background-position: 30.857142857142854% 99.56647398843931%;
  }

  59.6% {
    opacity: 1;
    background-position: 31.428571428571427% 99.56647398843931%;
  }

  61.7% {
    opacity: 1;
    background-position: 32.0% 99.56647398843931%;
  }

  63.8% {
    opacity: 1;
    background-position: 33.14285714285714% 99.56647398843931%;
  }

  66.0% {
    opacity: 1;
    background-position: 33.714285714285715% 99.56647398843931%;
  }

  68.1% {
    opacity: 1;
    background-position: 34.285714285714285% 99.56647398843931%;
  }

  70.2% {
    opacity: 1;
    background-position: 34.85714285714286% 99.56647398843931%;
  }

  72.3% {
    opacity: 1;
    background-position: 35.42857142857142% 99.56647398843931%;
  }

  74.5% {
    opacity: 1;
    background-position: 36.0% 99.56647398843931%;
  }

  76.6% {
    opacity: 1;
    background-position: 36.57142857142857% 99.56647398843931%;
  }

  78.7% {
    opacity: 1;
    background-position: 37.142857142857146% 99.56647398843931%;
  }

  80.9% {
    opacity: 1;
    background-position: 37.714285714285715% 99.56647398843931%;
  }

  83.0% {
    opacity: 1;
    background-position: 38.285714285714285% 99.56647398843931%;
  }

  85.1% {
    opacity: 1;
    background-position: 39.42857142857143% 99.56647398843931%;
  }

  87.2% {
    opacity: 1;
    background-position: 40.0% 99.56647398843931%;
  }

  89.4% {
    opacity: 1;
    background-position: 40.57142857142857% 99.56647398843931%;
  }

  91.5% {
    opacity: 1;
    background-position: 41.14285714285714% 99.56647398843931%;
  }

  93.6% {
    opacity: 1;
    background-position: 41.714285714285715% 99.56647398843931%;
  }

  95.7% {
    opacity: 1;
    background-position: 42.285714285714285% 99.56647398843931%;
  }

  97.9%,
  100% {
    opacity: 1;
    background-position: 42.857142857142854% 99.56647398843931%;
  }

}

.position-cdrag_child_up {
  --body-height: calc(var(--innerHeight) * 0.125) ;
  --body-width: calc(var(--body-height) * 1.0);
  
  position: absolute;
  left: calc(100% * var(--x, 0));
  bottom: calc(100% * var(--y, 0));

  height: 0;
  width: 0;
}

.body-cdrag_child_up {
  width: var(--body-width);
  height: var(--body-height);
  margin: calc(-1 * var(--body-height) / 2) calc(-1 * var(--body-width) / 2);
  background-image: url('./note.png');
  background-size: calc(176.0 * var(--body-width)) calc(174.0 * var(--body-height));
  background-repeat: no-repeat;
  opacity: 0;

  animation-duration: calc(var(--fadein-time, 1.6s) / var(--playspeed, 1));
  animation-delay: calc(var(--delay-time, 0s) / var(--playspeed, 1));

  animation-name: keyframes-cdrag_child_up;
  animation-play-state: paused;
  animation-iteration-count: 1;
  animation-fill-mode: none;
  animation-timing-function: steps(1);
}

@keyframes keyframes-cdrag_child_up {

  0.0% {
    opacity: 1;
    background-position: 46.285714285714285% 99.56647398843931%;
  }

  2.1% {
    opacity: 1;
    background-position: 46.85714285714286% 99.56647398843931%;
  }

  4.3% {
    opacity: 1;
    background-position: 53.142857142857146% 99.56647398843931%;
  }

  6.4% {
    opacity: 1;
    background-position: 59.42857142857143% 99.56647398843931%;
  }

  8.5% {
    opacity: 1;
    background-position: 65.71428571428571% 99.56647398843931%;
  }

  10.6% {
    opacity: 1;
    background-position: 70.28571428571428% 99.56647398843931%;
  }

  12.8% {
    opacity: 1;
    background-position: 70.85714285714285% 99.56647398843931%;
  }

  14.9% {
    opacity: 1;
    background-position: 71.42857142857143% 99.56647398843931%;
  }

  17.0% {
    opacity: 1;
    background-position: 72.0% 99.56647398843931%;
  }

  19.1% {
    opacity: 1;
    background-position: 72.57142857142857% 99.56647398843931%;
  }

  21.3% {
    opacity: 1;
    background-position: 47.42857142857143% 99.56647398843931%;
  }

  23.4% {
    opacity: 1;
    background-position: 48.0% 99.56647398843931%;
  }

  25.5% {
    opacity: 1;
    background-position: 48.57142857142857% 99.56647398843931%;
  }

  27.7% {
    opacity: 1;
    background-position: 49.142857142857146% 99.56647398843931%;
  }

  29.8% {
    opacity: 1;
    background-position: 49.714285714285715% 99.56647398843931%;
  }

  31.9% {
    opacity: 1;
    background-position: 50.28571428571429% 99.56647398843931%;
  }

  34.0% {
    opacity: 1;
    background-position: 50.857142857142854% 99.56647398843931%;
  }

  36.2% {
    opacity: 1;
    background-position: 51.42857142857142% 99.56647398843931%;
  }

  38.3% {
    opacity: 1;
    background-position: 52.0% 99.56647398843931%;
  }

  40.4% {
    opacity: 1;
    background-position: 52.57142857142857% 99.56647398843931%;
  }

  42.6% {
    opacity: 1;
    background-position: 53.714285714285715% 99.56647398843931%;
  }

  44.7% {
    opacity: 1;
    background-position: 54.285714285714285% 99.56647398843931%;
  }

  46.8% {
    opacity: 1;
    background-position: 54.85714285714286% 99.56647398843931%;
  }

  48.9% {
    opacity: 1;
    background-position: 55.42857142857143% 99.56647398843931%;
  }

  51.1% {
    opacity: 1;
    background-position: 56.00000000000001% 99.56647398843931%;
  }

  53.2% {
    opacity: 1;
    background-position: 56.57142857142857% 99.56647398843931%;
  }

  55.3% {
    opacity: 1;
    background-position: 57.14285714285714% 99.56647398843931%;
  }

  57.4% {
    opacity: 1;
    background-position: 57.714285714285715% 99.56647398843931%;
  }

  59.6% {
    opacity: 1;
    background-position: 58.285714285714285% 99.56647398843931%;
  }

  61.7% {
    opacity: 1;
    background-position: 58.857142857142854% 99.56647398843931%;
  }

  63.8% {
    opacity: 1;
    background-position: 60.0% 99.56647398843931%;
  }

  66.0% {
    opacity: 1;
    background-position: 60.57142857142858% 99.56647398843931%;
  }

  68.1% {
    opacity: 1;
    background-position: 61.142857142857146% 99.56647398843931%;
  }

  70.2% {
    opacity: 1;
    background-position: 61.71428571428571% 99.56647398843931%;
  }

  72.3% {
    opacity: 1;
    background-position: 62.28571428571429% 99.56647398843931%;
  }

  74.5% {
    opacity: 1;
    background-position: 62.857142857142854% 99.56647398843931%;
  }

  76.6% {
    opacity: 1;
    background-position: 63.42857142857142% 99.56647398843931%;
  }

  78.7% {
    opacity: 1;
    background-position: 64.0% 99.56647398843931%;
  }

  80.9% {
    opacity: 1;
    background-position: 64.57142857142857% 99.56647398843931%;
  }

  83.0% {
    opacity: 1;
    background-position: 65.14285714285715% 99.56647398843931%;
  }

  85.1% {
    opacity: 1;
    background-position: 66.28571428571428% 99.56647398843931%;
  }

  87.2% {
    opacity: 1;
    background-position: 66.85714285714286% 99.56647398843931%;
  }

  89.4% {
    opacity: 1;
    background-position: 67.42857142857143% 99.56647398843931%;
  }

  91.5% {
    opacity: 1;
    background-position: 68.0% 99.56647398843931%;
  }

  93.6% {
    opacity: 1;
    background-position: 68.57142857142857% 99.56647398843931%;
  }

  95.7% {
    opacity: 1;
    background-position: 69.14285714285714% 99.56647398843931%;
  }

  97.9%,
  100% {
    opacity: 1;
    background-position: 69.71428571428572% 99.56647398843931%;
  }

}

.position-click_down {
  --body-height: calc(var(--innerHeight) * 1.15) ;
  --body-width: calc(var(--body-height) * 1.0);
  
  position: absolute;
  left: calc(100% * var(--x, 0));
  bottom: calc(100% * var(--y, 0));

  height: 0;
  width: 0;
}

.body-click_down {
  width: var(--body-width);
  height: var(--body-height);
  margin: calc(-1 * var(--body-height) / 2) calc(-1 * var(--body-width) / 2);
  background-image: url('./note.png');
  background-size: calc(22.0 * var(--body-width)) calc(21.75 * var(--body-height));
  background-repeat: no-repeat;
  opacity: 0;

  animation-duration: calc(var(--fadein-time, 1.6s) / var(--playspeed, 1));
  animation-delay: calc(var(--delay-time, 0s) / var(--playspeed, 1));

  animation-name: keyframes-click_down;
  animation-play-state: paused;
  animation-iteration-count: 1;
  animation-fill-mode: none;
  animation-timing-function: steps(1);
}

@keyframes keyframes-click_down {

  0.0% {
    opacity: 1;
    background-position: 66.66666666666666% 14.457831325301203%;
  }

  2.4% {
    opacity: 1;
    background-position: 71.42857142857143% 14.457831325301203%;
  }

  4.9% {
    opacity: 1;
    background-position: 66.66666666666666% 43.373493975903614%;
  }

  7.3% {
    opacity: 1;
    background-position: 4.761904761904762% 67.46987951807229%;
  }

  9.8% {
    opacity: 1;
    background-position: 57.14285714285714% 67.46987951807229%;
  }

  12.2% {
    opacity: 1;
    background-position: 66.66666666666666% 67.46987951807229%;
  }

  14.6% {
    opacity: 1;
    background-position: 71.42857142857143% 67.46987951807229%;
  }

  17.1% {
    opacity: 1;
    background-position: 0.0% 72.28915662650603%;
  }

  19.5% {
    opacity: 1;
    background-position: 4.761904761904762% 72.28915662650603%;
  }

  22.0% {
    opacity: 1;
    background-position: 9.523809523809524% 72.28915662650603%;
  }

  24.4% {
    opacity: 1;
    background-position: 66.66666666666666% 19.27710843373494%;
  }

  26.8% {
    opacity: 1;
    background-position: 71.42857142857143% 19.27710843373494%;
  }

  29.3% {
    opacity: 1;
    background-position: 66.66666666666666% 24.096385542168676%;
  }

  31.7% {
    opacity: 1;
    background-position: 71.42857142857143% 24.096385542168676%;
  }

  34.1% {
    opacity: 1;
    background-position: 66.66666666666666% 28.915662650602407%;
  }

  36.6% {
    opacity: 1;
    background-position: 71.42857142857143% 28.915662650602407%;
  }

  39.0% {
    opacity: 1;
    background-position: 66.66666666666666% 33.734939759036145%;
  }

  41.5% {
    opacity: 1;
    background-position: 71.42857142857143% 33.734939759036145%;
  }

  43.9% {
    opacity: 1;
    background-position: 66.66666666666666% 38.55421686746988%;
  }

  46.3% {
    opacity: 1;
    background-position: 71.42857142857143% 38.55421686746988%;
  }

  48.8% {
    opacity: 1;
    background-position: 71.42857142857143% 43.373493975903614%;
  }

  51.2% {
    opacity: 1;
    background-position: 66.66666666666666% 48.19277108433735%;
  }

  53.7% {
    opacity: 1;
    background-position: 71.42857142857143% 48.19277108433735%;
  }

  56.1% {
    opacity: 1;
    background-position: 66.66666666666666% 53.01204819277109%;
  }

  58.5% {
    opacity: 1;
    background-position: 71.42857142857143% 53.01204819277109%;
  }

  61.0% {
    opacity: 1;
    background-position: 66.66666666666666% 57.831325301204814%;
  }

  63.4% {
    opacity: 1;
    background-position: 71.42857142857143% 57.831325301204814%;
  }

  65.9% {
    opacity: 1;
    background-position: 66.66666666666666% 62.65060240963856%;
  }

  68.3% {
    opacity: 1;
    background-position: 71.42857142857143% 62.65060240963856%;
  }

  70.7% {
    opacity: 1;
    background-position: 0.0% 67.46987951807229%;
  }

  73.2% {
    opacity: 1;
    background-position: 9.523809523809524% 67.46987951807229%;
  }

  75.6% {
    opacity: 1;
    background-position: 14.285714285714285% 67.46987951807229%;
  }

  78.0% {
    opacity: 1;
    background-position: 19.047619047619047% 67.46987951807229%;
  }

  80.5% {
    opacity: 1;
    background-position: 23.809523809523807% 67.46987951807229%;
  }

  82.9% {
    opacity: 1;
    background-position: 28.57142857142857% 67.46987951807229%;
  }

  85.4% {
    opacity: 1;
    background-position: 33.33333333333333% 67.46987951807229%;
  }

  87.8% {
    opacity: 1;
    background-position: 38.095238095238095% 67.46987951807229%;
  }

  90.2% {
    opacity: 1;
    background-position: 42.857142857142854% 67.46987951807229%;
  }

  92.7% {
    opacity: 1;
    background-position: 47.61904761904761% 67.46987951807229%;
  }

  95.1% {
    opacity: 1;
    background-position: 52.38095238095239% 67.46987951807229%;
  }

  97.6%,
  100% {
    opacity: 1;
    background-position: 61.904761904761905% 67.46987951807229%;
  }

}

.position-click_up {
  --body-height: calc(var(--innerHeight) * 1.15) ;
  --body-width: calc(var(--body-height) * 1.0);
  
  position: absolute;
  left: calc(100% * var(--x, 0));
  bottom: calc(100% * var(--y, 0));

  height: 0;
  width: 0;
}

.body-click_up {
  width: var(--body-width);
  height: var(--body-height);
  margin: calc(-1 * var(--body-height) / 2) calc(-1 * var(--body-width) / 2);
  background-image: url('./note.png');
  background-size: calc(22.0 * var(--body-width)) calc(21.75 * var(--body-height));
  background-repeat: no-repeat;
  opacity: 0;

  animation-duration: calc(var(--fadein-time, 1.6s) / var(--playspeed, 1));
  animation-delay: calc(var(--delay-time, 0s) / var(--playspeed, 1));

  animation-name: keyframes-click_up;
  animation-play-state: paused;
  animation-iteration-count: 1;
  animation-fill-mode: none;
  animation-timing-function: steps(1);
}

@keyframes keyframes-click_up {

  0.0% {
    opacity: 1;
    background-position: 14.285714285714285% 72.28915662650603%;
  }

  2.4% {
    opacity: 1;
    background-position: 19.047619047619047% 72.28915662650603%;
  }

  4.9% {
    opacity: 1;
    background-position: 71.42857142857143% 72.28915662650603%;
  }

  7.3% {
    opacity: 1;
    background-position: 76.19047619047619% 48.19277108433735%;
  }

  9.8% {
    opacity: 1;
    background-position: 23.809523809523807% 77.10843373493977%;
  }

  12.2% {
    opacity: 1;
    background-position: 33.33333333333333% 77.10843373493977%;
  }

  14.6% {
    opacity: 1;
    background-position: 38.095238095238095% 77.10843373493977%;
  }

  17.1% {
    opacity: 1;
    background-position: 42.857142857142854% 77.10843373493977%;
  }

  19.5% {
    opacity: 1;
    background-position: 47.61904761904761% 77.10843373493977%;
  }

  22.0% {
    opacity: 1;
    background-position: 52.38095238095239% 77.10843373493977%;
  }

  24.4% {
    opacity: 1;
    background-position: 23.809523809523807% 72.28915662650603%;
  }

  26.8% {
    opacity: 1;
    background-position: 28.57142857142857% 72.28915662650603%;
  }

  29.3% {
    opacity: 1;
    background-position: 33.33333333333333% 72.28915662650603%;
  }

  31.7% {
    opacity: 1;
    background-position: 38.095238095238095% 72.28915662650603%;
  }

  34.1% {
    opacity: 1;
    background-position: 42.857142857142854% 72.28915662650603%;
  }

  36.6% {
    opacity: 1;
    background-position: 47.61904761904761% 72.28915662650603%;
  }

  39.0% {
    opacity: 1;
    background-position: 52.38095238095239% 72.28915662650603%;
  }

  41.5% {
    opacity: 1;
    background-position: 57.14285714285714% 72.28915662650603%;
  }

  43.9% {
    opacity: 1;
    background-position: 61.904761904761905% 72.28915662650603%;
  }

  46.3% {
    opacity: 1;
    background-position: 66.66666666666666% 72.28915662650603%;
  }

  48.8% {
    opacity: 1;
    background-position: 76.19047619047619% 0.0%;
  }

  51.2% {
    opacity: 1;
    background-position: 76.19047619047619% 4.819277108433735%;
  }

  53.7% {
    opacity: 1;
    background-position: 76.19047619047619% 9.63855421686747%;
  }

  56.1% {
    opacity: 1;
    background-position: 76.19047619047619% 14.457831325301203%;
  }

  58.5% {
    opacity: 1;
    background-position: 76.19047619047619% 19.27710843373494%;
  }

  61.0% {
    opacity: 1;
    background-position: 76.19047619047619% 24.096385542168676%;
  }

  63.4% {
    opacity: 1;
    background-position: 76.19047619047619% 28.915662650602407%;
  }

  65.9% {
    opacity: 1;
    background-position: 76.19047619047619% 33.734939759036145%;
  }

  68.3% {
    opacity: 1;
    background-position: 76.19047619047619% 38.55421686746988%;
  }

  70.7% {
    opacity: 1;
    background-position: 76.19047619047619% 43.373493975903614%;
  }

  73.2% {
    opacity: 1;
    background-position: 76.19047619047619% 53.01204819277109%;
  }

  75.6% {
    opacity: 1;
    background-position: 76.19047619047619% 57.831325301204814%;
  }

  78.0% {
    opacity: 1;
    background-position: 76.19047619047619% 62.65060240963856%;
  }

  80.5% {
    opacity: 1;
    background-position: 76.19047619047619% 67.46987951807229%;
  }

  82.9% {
    opacity: 1;
    background-position: 76.19047619047619% 72.28915662650603%;
  }

  85.4% {
    opacity: 1;
    background-position: 0.0% 77.10843373493977%;
  }

  87.8% {
    opacity: 1;
    background-position: 4.761904761904762% 77.10843373493977%;
  }

  90.2% {
    opacity: 1;
    background-position: 9.523809523809524% 77.10843373493977%;
  }

  92.7% {
    opacity: 1;
    background-position: 14.285714285714285% 77.10843373493977%;
  }

  95.1% {
    opacity: 1;
    background-position: 19.047619047619047% 77.10843373493977%;
  }

  97.6%,
  100% {
    opacity: 1;
    background-position: 28.57142857142857% 77.10843373493977%;
  }

}

.position-drag_child {
  --body-height: calc(var(--innerHeight) * 0.125) ;
  --body-width: calc(var(--body-height) * 1.0);
  
  position: absolute;
  left: calc(100% * var(--x, 0));
  bottom: calc(100% * var(--y, 0));

  height: 0;
  width: 0;
}

.body-drag_child {
  width: var(--body-width);
  height: var(--body-height);
  margin: calc(-1 * var(--body-height) / 2) calc(-1 * var(--body-width) / 2);
  background-image: url('./note.png');
  background-size: calc(176.0 * var(--body-width)) calc(174.0 * var(--body-height));
  background-repeat: no-repeat;
  opacity: 0;

  animation-duration: calc(var(--fadein-time, 1.6s) / var(--playspeed, 1));
  animation-delay: calc(var(--delay-time, 0s) / var(--playspeed, 1));

  animation-name: keyframes-drag_child;
  animation-play-state: paused;
  animation-iteration-count: 1;
  animation-fill-mode: none;
  animation-timing-function: steps(1);
}

@keyframes keyframes-drag_child {

  0.0% {
    opacity: 1;
    background-position: 73.14285714285714% 99.56647398843931%;
  }

  2.1% {
    opacity: 1;
    background-position: 73.71428571428571% 99.56647398843931%;
  }

  4.3% {
    opacity: 1;
    background-position: 80.0% 99.56647398843931%;
  }

  6.4% {
    opacity: 1;
    background-position: 86.28571428571429% 99.56647398843931%;
  }

  8.5% {
    opacity: 1;
    background-position: 92.57142857142857% 99.56647398843931%;
  }

  10.6% {
    opacity: 1;
    background-position: 97.14285714285714% 99.56647398843931%;
  }

  12.8% {
    opacity: 1;
    background-position: 97.71428571428571% 99.56647398843931%;
  }

  14.9% {
    opacity: 1;
    background-position: 98.28571428571429% 99.56647398843931%;
  }

  17.0% {
    opacity: 1;
    background-position: 98.85714285714286% 99.56647398843931%;
  }

  19.1% {
    opacity: 1;
    background-position: 99.42857142857143% 99.56647398843931%;
  }

  21.3% {
    opacity: 1;
    background-position: 74.28571428571429% 99.56647398843931%;
  }

  23.4% {
    opacity: 1;
    background-position: 74.85714285714286% 99.56647398843931%;
  }

  25.5% {
    opacity: 1;
    background-position: 75.42857142857143% 99.56647398843931%;
  }

  27.7% {
    opacity: 1;
    background-position: 76.0% 99.56647398843931%;
  }

  29.8% {
    opacity: 1;
    background-position: 76.57142857142857% 99.56647398843931%;
  }

  31.9% {
    opacity: 1;
    background-position: 77.14285714285715% 99.56647398843931%;
  }

  34.0% {
    opacity: 1;
    background-position: 77.71428571428571% 99.56647398843931%;
  }

  36.2% {
    opacity: 1;
    background-position: 78.28571428571428% 99.56647398843931%;
  }

  38.3% {
    opacity: 1;
    background-position: 78.85714285714286% 99.56647398843931%;
  }

  40.4% {
    opacity: 1;
    background-position: 79.42857142857143% 99.56647398843931%;
  }

  42.6% {
    opacity: 1;
    background-position: 80.57142857142857% 99.56647398843931%;
  }

  44.7% {
    opacity: 1;
    background-position: 81.14285714285714% 99.56647398843931%;
  }

  46.8% {
    opacity: 1;
    background-position: 81.71428571428572% 99.56647398843931%;
  }

  48.9% {
    opacity: 1;
    background-position: 82.28571428571428% 99.56647398843931%;
  }

  51.1% {
    opacity: 1;
    background-position: 82.85714285714286% 99.56647398843931%;
  }

  53.2% {
    opacity: 1;
    background-position: 83.42857142857143% 99.56647398843931%;
  }

  55.3% {
    opacity: 1;
    background-position: 84.0% 99.56647398843931%;
  }

  57.4% {
    opacity: 1;
    background-position: 84.57142857142857% 99.56647398843931%;
  }

  59.6% {
    opacity: 1;
    background-position: 85.14285714285714% 99.56647398843931%;
  }

  61.7% {
    opacity: 1;
    background-position: 85.71428571428571% 99.56647398843931%;
  }

  63.8% {
    opacity: 1;
    background-position: 86.85714285714286% 99.56647398843931%;
  }

  66.0% {
    opacity: 1;
    background-position: 87.42857142857143% 99.56647398843931%;
  }

  68.1% {
    opacity: 1;
    background-position: 88.0% 99.56647398843931%;
  }

  70.2% {
    opacity: 1;
    background-position: 88.57142857142857% 99.56647398843931%;
  }

  72.3% {
    opacity: 1;
    background-position: 89.14285714285714% 99.56647398843931%;
  }

  74.5% {
    opacity: 1;
    background-position: 89.71428571428571% 99.56647398843931%;
  }

  76.6% {
    opacity: 1;
    background-position: 90.28571428571428% 99.56647398843931%;
  }

  78.7% {
    opacity: 1;
    background-position: 90.85714285714286% 99.56647398843931%;
  }

  80.9% {
    opacity: 1;
    background-position: 91.42857142857143% 99.56647398843931%;
  }

  83.0% {
    opacity: 1;
    background-position: 92.0% 99.56647398843931%;
  }

  85.1% {
    opacity: 1;
    background-position: 93.14285714285714% 99.56647398843931%;
  }

  87.2% {
    opacity: 1;
    background-position: 93.71428571428572% 99.56647398843931%;
  }

  89.4% {
    opacity: 1;
    background-position: 94.28571428571428% 99.56647398843931%;
  }

  91.5% {
    opacity: 1;
    background-position: 94.85714285714286% 99.56647398843931%;
  }

  93.6% {
    opacity: 1;
    background-position: 95.42857142857143% 99.56647398843931%;
  }

  95.7% {
    opacity: 1;
    background-position: 96.0% 99.56647398843931%;
  }

  97.9%,
  100% {
    opacity: 1;
    background-position: 96.57142857142857% 99.56647398843931%;
  }

}

.position-drag {
  --body-height: calc(var(--innerHeight) * 0.29) ;
  --body-width: calc(var(--body-height) * 1.0);
  
  position: absolute;
  left: calc(100% * var(--x, 0));
  bottom: calc(100% * var(--y, 0));

  height: 0;
  width: 0;
}

.body-drag {
  width: var(--body-width);
  height: var(--body-height);
  margin: calc(-1 * var(--body-height) / 2) calc(-1 * var(--body-width) / 2);
  background-image: url('./note.png');
  background-size: calc(88.0 * var(--body-width)) calc(87.0 * var(--body-height));
  background-repeat: no-repeat;
  opacity: 0;

  animation-duration: calc(var(--fadein-time, 1.6s) / var(--playspeed, 1));
  animation-delay: calc(var(--delay-time, 0s) / var(--playspeed, 1));

  animation-name: keyframes-drag;
  animation-play-state: paused;
  animation-iteration-count: 1;
  animation-fill-mode: none;
  animation-timing-function: steps(1);
}

@keyframes keyframes-drag {

  0.0% {
    opacity: 1;
    background-position: 100.0% 74.4186046511628%;
  }

  2.1% {
    opacity: 1;
    background-position: 100.0% 75.5813953488372%;
  }

  4.3% {
    opacity: 1;
    background-position: 98.85057471264368% 89.53488372093024%;
  }

  6.4% {
    opacity: 1;
    background-position: 100.0% 95.34883720930233%;
  }

  8.5% {
    opacity: 1;
    background-position: 4.597701149425287% 100.0%;
  }

  10.6% {
    opacity: 1;
    background-position: 13.793103448275861% 100.0%;
  }

  12.8% {
    opacity: 1;
    background-position: 14.942528735632186% 100.0%;
  }

  14.9% {
    opacity: 1;
    background-position: 16.091954022988507% 100.0%;
  }

  17.0% {
    opacity: 1;
    background-position: 17.24137931034483% 100.0%;
  }

  19.1% {
    opacity: 1;
    background-position: 18.39080459770115% 100.0%;
  }

  21.3% {
    opacity: 1;
    background-position: 98.85057471264368% 83.72093023255815%;
  }

  23.4% {
    opacity: 1;
    background-position: 100.0% 83.72093023255815%;
  }

  25.5% {
    opacity: 1;
    background-position: 98.85057471264368% 84.88372093023256%;
  }

  27.7% {
    opacity: 1;
    background-position: 100.0% 84.88372093023256%;
  }

  29.8% {
    opacity: 1;
    background-position: 98.85057471264368% 86.04651162790698%;
  }

  31.9% {
    opacity: 1;
    background-position: 100.0% 86.04651162790698%;
  }

  34.0% {
    opacity: 1;
    background-position: 98.85057471264368% 87.20930232558139%;
  }

  36.2% {
    opacity: 1;
    background-position: 100.0% 87.20930232558139%;
  }

  38.3% {
    opacity: 1;
    background-position: 98.85057471264368% 88.37209302325581%;
  }

  40.4% {
    opacity: 1;
    background-position: 100.0% 88.37209302325581%;
  }

  42.6% {
    opacity: 1;
    background-position: 100.0% 89.53488372093024%;
  }

  44.7% {
    opacity: 1;
    background-position: 98.85057471264368% 90.69767441860465%;
  }

  46.8% {
    opacity: 1;
    background-position: 100.0% 90.69767441860465%;
  }

  48.9% {
    opacity: 1;
    background-position: 98.85057471264368% 91.86046511627907%;
  }

  51.1% {
    opacity: 1;
    background-position: 100.0% 91.86046511627907%;
  }

  53.2% {
    opacity: 1;
    background-position: 98.85057471264368% 93.02325581395348%;
  }

  55.3% {
    opacity: 1;
    background-position: 100.0% 93.02325581395348%;
  }

  57.4% {
    opacity: 1;
    background-position: 98.85057471264368% 94.18604651162791%;
  }

  59.6% {
    opacity: 1;
    background-position: 100.0% 94.18604651162791%;
  }

  61.7% {
    opacity: 1;
    background-position: 98.85057471264368% 95.34883720930233%;
  }

  63.8% {
    opacity: 1;
    background-position: 98.85057471264368% 96.51162790697676%;
  }

  66.0% {
    opacity: 1;
    background-position: 100.0% 96.51162790697676%;
  }

  68.1% {
    opacity: 1;
    background-position: 98.85057471264368% 97.67441860465115%;
  }

  70.2% {
    opacity: 1;
    background-position: 100.0% 97.67441860465115%;
  }

  72.3% {
    opacity: 1;
    background-position: 98.85057471264368% 98.83720930232558%;
  }

  74.5% {
    opacity: 1;
    background-position: 100.0% 98.83720930232558%;
  }

  76.6% {
    opacity: 1;
    background-position: 0.0% 100.0%;
  }

  78.7% {
    opacity: 1;
    background-position: 1.1494252873563218% 100.0%;
  }

  80.9% {
    opacity: 1;
    background-position: 2.2988505747126435% 100.0%;
  }

  83.0% {
    opacity: 1;
    background-position: 3.4482758620689653% 100.0%;
  }

  85.1% {
    opacity: 1;
    background-position: 5.747126436781609% 100.0%;
  }

  87.2% {
    opacity: 1;
    background-position: 6.896551724137931% 100.0%;
  }

  89.4% {
    opacity: 1;
    background-position: 8.045977011494253% 100.0%;
  }

  91.5% {
    opacity: 1;
    background-position: 9.195402298850574% 100.0%;
  }

  93.6% {
    opacity: 1;
    background-position: 10.344827586206897% 100.0%;
  }

  95.7% {
    opacity: 1;
    background-position: 11.494252873563218% 100.0%;
  }

  97.9%,
  100% {
    opacity: 1;
    background-position: 12.643678160919542% 100.0%;
  }

}

.position-flick_down {
  --body-height: calc(var(--innerHeight) * 0.6) ;
  --body-width: calc(var(--body-height) * 2.0);
  
  position: absolute;
  left: calc(100% * var(--x, 0));
  bottom: calc(100% * var(--y, 0));

  height: 0;
  width: 0;
}

.body-flick_down {
  width: var(--body-width);
  height: var(--body-height);
  margin: calc(-1 * var(--body-height) / 2) calc(-1 * var(--body-width) / 2);
  background-image: url('./note.png');
  background-size: calc(11.0 * var(--body-width)) calc(21.75 * var(--body-height));
  background-repeat: no-repeat;
  opacity: 0;

  animation-duration: calc(var(--fadein-time, 1.6s) / var(--playspeed, 1));
  animation-delay: calc(var(--delay-time, 0s) / var(--playspeed, 1));

  animation-name: keyframes-flick_down;
  animation-play-state: paused;
  animation-iteration-count: 1;
  animation-fill-mode: none;
  animation-timing-function: steps(1);
}

@keyframes keyframes-flick_down {

  0.0% {
    opacity: 1;
    background-position: 30.0% 4.819277108433735%;
  }

  2.4% {
    opacity: 1;
    background-position: 30.0% 9.63855421686747%;
  }

  4.9% {
    opacity: 1;
    background-position: 30.0% 33.734939759036145%;
  }

  7.3% {
    opacity: 1;
    background-position: 20.0% 38.55421686746988%;
  }

  9.8% {
    opacity: 1;
    background-position: 50.0% 14.457831325301203%;
  }

  12.2% {
    opacity: 1;
    background-position: 50.0% 24.096385542168676%;
  }

  14.6% {
    opacity: 1;
    background-position: 50.0% 28.915662650602407%;
  }

  17.1% {
    opacity: 1;
    background-position: 50.0% 33.734939759036145%;
  }

  19.5% {
    opacity: 1;
    background-position: 50.0% 38.55421686746988%;
  }

  22.0% {
    opacity: 1;
    background-position: 50.0% 43.373493975903614%;
  }

  24.4% {
    opacity: 1;
    background-position: 30.0% 14.457831325301203%;
  }

  26.8% {
    opacity: 1;
    background-position: 30.0% 19.27710843373494%;
  }

  29.3% {
    opacity: 1;
    background-position: 30.0% 24.096385542168676%;
  }

  31.7% {
    opacity: 1;
    background-position: 0.0% 28.915662650602407%;
  }

  34.1% {
    opacity: 1;
    background-position: 10.0% 28.915662650602407%;
  }

  36.6% {
    opacity: 1;
    background-position: 20.0% 28.915662650602407%;
  }

  39.0% {
    opacity: 1;
    background-position: 30.0% 28.915662650602407%;
  }

  41.5% {
    opacity: 1;
    background-position: 0.0% 33.734939759036145%;
  }

  43.9% {
    opacity: 1;
    background-position: 10.0% 33.734939759036145%;
  }

  46.3% {
    opacity: 1;
    background-position: 20.0% 33.734939759036145%;
  }

  48.8% {
    opacity: 1;
    background-position: 40.0% 0.0%;
  }

  51.2% {
    opacity: 1;
    background-position: 40.0% 4.819277108433735%;
  }

  53.7% {
    opacity: 1;
    background-position: 40.0% 9.63855421686747%;
  }

  56.1% {
    opacity: 1;
    background-position: 40.0% 14.457831325301203%;
  }

  58.5% {
    opacity: 1;
    background-position: 40.0% 19.27710843373494%;
  }

  61.0% {
    opacity: 1;
    background-position: 40.0% 24.096385542168676%;
  }

  63.4% {
    opacity: 1;
    background-position: 40.0% 28.915662650602407%;
  }

  65.9% {
    opacity: 1;
    background-position: 40.0% 33.734939759036145%;
  }

  68.3% {
    opacity: 1;
    background-position: 0.0% 38.55421686746988%;
  }

  70.7% {
    opacity: 1;
    background-position: 10.0% 38.55421686746988%;
  }

  73.2% {
    opacity: 1;
    background-position: 30.0% 38.55421686746988%;
  }

  75.6% {
    opacity: 1;
    background-position: 40.0% 38.55421686746988%;
  }

  78.0% {
    opacity: 1;
    background-position: 0.0% 43.373493975903614%;
  }

  80.5% {
    opacity: 1;
    background-position: 10.0% 43.373493975903614%;
  }

  82.9% {
    opacity: 1;
    background-position: 20.0% 43.373493975903614%;
  }

  85.4% {
    opacity: 1;
    background-position: 30.0% 43.373493975903614%;
  }

  87.8% {
    opacity: 1;
    background-position: 40.0% 43.373493975903614%;
  }

  90.2% {
    opacity: 1;
    background-position: 50.0% 0.0%;
  }

  92.7% {
    opacity: 1;
    background-position: 50.0% 4.819277108433735%;
  }

  95.1% {
    opacity: 1;
    background-position: 50.0% 9.63855421686747%;
  }

  97.6%,
  100% {
    opacity: 1;
    background-position: 50.0% 19.27710843373494%;
  }

}

.position-flick_up {
  --body-height: calc(var(--innerHeight) * 0.6) ;
  --body-width: calc(var(--body-height) * 2.0);
  
  position: absolute;
  left: calc(100% * var(--x, 0));
  bottom: calc(100% * var(--y, 0));

  height: 0;
  width: 0;
}

.body-flick_up {
  width: var(--body-width);
  height: var(--body-height);
  margin: calc(-1 * var(--body-height) / 2) calc(-1 * var(--body-width) / 2);
  background-image: url('./note.png');
  background-size: calc(11.0 * var(--body-width)) calc(21.75 * var(--body-height));
  background-repeat: no-repeat;
  opacity: 0;

  animation-duration: calc(var(--fadein-time, 1.6s) / var(--playspeed, 1));
  animation-delay: calc(var(--delay-time, 0s) / var(--playspeed, 1));

  animation-name: keyframes-flick_up;
  animation-play-state: paused;
  animation-iteration-count: 1;
  animation-fill-mode: none;
  animation-timing-function: steps(1);
}

@keyframes keyframes-flick_up {

  0.0% {
    opacity: 1;
    background-position: 0.0% 48.19277108433735%;
  }

  2.4% {
    opacity: 1;
    background-position: 10.0% 48.19277108433735%;
  }

  4.9% {
    opacity: 1;
    background-position: 60.0% 0.0%;
  }

  7.3% {
    opacity: 1;
    background-position: 60.0% 53.01204819277109%;
  }

  9.8% {
    opacity: 1;
    background-position: 30.0% 62.65060240963856%;
  }

  12.2% {
    opacity: 1;
    background-position: 50.0% 62.65060240963856%;
  }

  14.6% {
    opacity: 1;
    background-position: 60.0% 62.65060240963856%;
  }

  17.1% {
    opacity: 1;
    background-position: 70.0% 0.0%;
  }

  19.5% {
    opacity: 1;
    background-position: 70.0% 4.819277108433735%;
  }

  22.0% {
    opacity: 1;
    background-position: 70.0% 9.63855421686747%;
  }

  24.4% {
    opacity: 1;
    background-position: 20.0% 48.19277108433735%;
  }

  26.8% {
    opacity: 1;
    background-position: 30.0% 48.19277108433735%;
  }

  29.3% {
    opacity: 1;
    background-position: 40.0% 48.19277108433735%;
  }

  31.7% {
    opacity: 1;
    background-position: 50.0% 48.19277108433735%;
  }

  34.1% {
    opacity: 1;
    background-position: 0.0% 53.01204819277109%;
  }

  36.6% {
    opacity: 1;
    background-position: 10.0% 53.01204819277109%;
  }

  39.0% {
    opacity: 1;
    background-position: 20.0% 53.01204819277109%;
  }

  41.5% {
    opacity: 1;
    background-position: 30.0% 53.01204819277109%;
  }

  43.9% {
    opacity: 1;
    background-position: 40.0% 53.01204819277109%;
  }

  46.3% {
    opacity: 1;
    background-position: 50.0% 53.01204819277109%;
  }

  48.8% {
    opacity: 1;
    background-position: 60.0% 4.819277108433735%;
  }

  51.2% {
    opacity: 1;
    background-position: 60.0% 9.63855421686747%;
  }

  53.7% {
    opacity: 1;
    background-position: 60.0% 14.457831325301203%;
  }

  56.1% {
    opacity: 1;
    background-position: 60.0% 19.27710843373494%;
  }

  58.5% {
    opacity: 1;
    background-position: 60.0% 24.096385542168676%;
  }

  61.0% {
    opacity: 1;
    background-position: 60.0% 28.915662650602407%;
  }

  63.4% {
    opacity: 1;
    background-position: 60.0% 33.734939759036145%;
  }

  65.9% {
    opacity: 1;
    background-position: 60.0% 38.55421686746988%;
  }

  68.3% {
    opacity: 1;
    background-position: 60.0% 43.373493975903614%;
  }

  70.7% {
    opacity: 1;
    background-position: 60.0% 48.19277108433735%;
  }

  73.2% {
    opacity: 1;
    background-position: 0.0% 57.831325301204814%;
  }

  75.6% {
    opacity: 1;
    background-position: 10.0% 57.831325301204814%;
  }

  78.0% {
    opacity: 1;
    background-position: 20.0% 57.831325301204814%;
  }

  80.5% {
    opacity: 1;
    background-position: 30.0% 57.831325301204814%;
  }

  82.9% {
    opacity: 1;
    background-position: 40.0% 57.831325301204814%;
  }

  85.4% {
    opacity: 1;
    background-position: 50.0% 57.831325301204814%;
  }

  87.8% {
    opacity: 1;
    background-position: 60.0% 57.831325301204814%;
  }

  90.2% {
    opacity: 1;
    background-position: 0.0% 62.65060240963856%;
  }

  92.7% {
    opacity: 1;
    background-position: 10.0% 62.65060240963856%;
  }

  95.1% {
    opacity: 1;
    background-position: 20.0% 62.65060240963856%;
  }

  97.6%,
  100% {
    opacity: 1;
    background-position: 40.0% 62.65060240963856%;
  }

}

.position-holding_down {
  --body-height: calc(var(--innerHeight) * 0.5) ;
  --body-width: calc(var(--body-height) * 1.0);
  
  position: absolute;
  left: calc(100% * var(--x, 0));
  bottom: calc(100% * var(--y, 0));

  height: 0;
  width: 0;
}

.body-holding_down {
  width: var(--body-width);
  height: var(--body-height);
  margin: calc(-1 * var(--body-height) / 2) calc(-1 * var(--body-width) / 2);
  background-image: url('./note.png');
  background-size: calc(22.0 * var(--body-width)) calc(21.75 * var(--body-height));
  background-repeat: no-repeat;
  opacity: 0;

  animation-duration: calc(var(--fadein-time, 1.6s) / var(--playspeed, 1));
  animation-delay: calc(var(--delay-time, 0s) / var(--playspeed, 1));

  animation-name: keyframes-holding_down;
  animation-play-state: paused;
  animation-iteration-count: 1;
  animation-fill-mode: none;
  animation-timing-function: steps(1);
}

@keyframes keyframes-holding_down {

  0.0% {
    opacity: 1;
    background-position: 57.14285714285714% 77.10843373493977%;
  }

  10.0% {
    opacity: 1;
    background-position: 61.904761904761905% 77.10843373493977%;
  }

  20.0% {
    opacity: 1;
    background-position: 66.66666666666666% 77.10843373493977%;
  }

  30.0% {
    opacity: 1;
    background-position: 71.42857142857143% 77.10843373493977%;
  }

  40.0% {
    opacity: 1;
    background-position: 76.19047619047619% 77.10843373493977%;
  }

  50.0% {
    opacity: 1;
    background-position: 80.95238095238095% 0.0%;
  }

  60.0% {
    opacity: 1;
    background-position: 80.95238095238095% 4.819277108433735%;
  }

  70.0% {
    opacity: 1;
    background-position: 80.95238095238095% 9.63855421686747%;
  }

  80.0% {
    opacity: 1;
    background-position: 80.95238095238095% 14.457831325301203%;
  }

  90.0%,
  100% {
    opacity: 1;
    background-position: 80.95238095238095% 19.27710843373494%;
  }

}

.position-holding_up {
  --body-height: calc(var(--innerHeight) * 0.5) ;
  --body-width: calc(var(--body-height) * 1.0);
  
  position: absolute;
  left: calc(100% * var(--x, 0));
  bottom: calc(100% * var(--y, 0));

  height: 0;
  width: 0;
}

.body-holding_up {
  width: var(--body-width);
  height: var(--body-height);
  margin: calc(-1 * var(--body-height) / 2) calc(-1 * var(--body-width) / 2);
  background-image: url('./note.png');
  background-size: calc(22.0 * var(--body-width)) calc(21.75 * var(--body-height));
  background-repeat: no-repeat;
  opacity: 0;

  animation-duration: calc(var(--fadein-time, 1.6s) / var(--playspeed, 1));
  animation-delay: calc(var(--delay-time, 0s) / var(--playspeed, 1));

  animation-name: keyframes-holding_up;
  animation-play-state: paused;
  animation-iteration-count: 1;
  animation-fill-mode: none;
  animation-timing-function: steps(1);
}

@keyframes keyframes-holding_up {

  0.0% {
    opacity: 1;
    background-position: 85.71428571428571% 48.19277108433735%;
  }

  10.0% {
    opacity: 1;
    background-position: 85.71428571428571% 53.01204819277109%;
  }

  20.0% {
    opacity: 1;
    background-position: 85.71428571428571% 57.831325301204814%;
  }

  30.0% {
    opacity: 1;
    background-position: 85.71428571428571% 62.65060240963856%;
  }

  40.0% {
    opacity: 1;
    background-position: 85.71428571428571% 67.46987951807229%;
  }

  50.0% {
    opacity: 1;
    background-position: 85.71428571428571% 72.28915662650603%;
  }

  60.0% {
    opacity: 1;
    background-position: 85.71428571428571% 77.10843373493977%;
  }

  70.0% {
    opacity: 1;
    background-position: 85.71428571428571% 81.92771084337349%;
  }

  80.0% {
    opacity: 1;
    background-position: 0.0% 86.74698795180723%;
  }

  90.0%,
  100% {
    opacity: 1;
    background-position: 4.761904761904762% 86.74698795180723%;
  }

}

.position-hold_down {
  --body-height: calc(var(--innerHeight) * 0.35) ;
  --body-width: calc(var(--body-height) * 1.0);
  
  position: absolute;
  left: calc(100% * var(--x, 0));
  bottom: calc(100% * var(--y, 0));

  height: 0;
  width: 0;
}

.body-hold_down {
  width: var(--body-width);
  height: var(--body-height);
  margin: calc(-1 * var(--body-height) / 2) calc(-1 * var(--body-width) / 2);
  background-image: url('./note.png');
  background-size: calc(44.0 * var(--body-width)) calc(43.5 * var(--body-height));
  background-repeat: no-repeat;
  opacity: 0;

  animation-duration: calc(var(--fadein-time, 1.6s) / var(--playspeed, 1));
  animation-delay: calc(var(--delay-time, 0s) / var(--playspeed, 1));

  animation-name: keyframes-hold_down;
  animation-play-state: paused;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: steps(1);
}

@keyframes keyframes-hold_down {

  0.0% {
    opacity: 1;
    background-position: 83.72093023255815% 96.47058823529412%;
  }

  2.4% {
    opacity: 1;
    background-position: 86.04651162790698% 96.47058823529412%;
  }

  4.9% {
    opacity: 1;
    background-position: 97.67441860465115% 14.117647058823529%;
  }

  7.3% {
    opacity: 1;
    background-position: 97.67441860465115% 40.0%;
  }

  9.8% {
    opacity: 1;
    background-position: 97.67441860465115% 65.88235294117646%;
  }

  12.2% {
    opacity: 1;
    background-position: 97.67441860465115% 70.58823529411765%;
  }

  14.6% {
    opacity: 1;
    background-position: 97.67441860465115% 72.94117647058823%;
  }

  17.1% {
    opacity: 1;
    background-position: 97.67441860465115% 75.29411764705883%;
  }

  19.5% {
    opacity: 1;
    background-position: 97.67441860465115% 77.64705882352942%;
  }

  22.0% {
    opacity: 1;
    background-position: 97.67441860465115% 80.0%;
  }

  24.4% {
    opacity: 1;
    background-position: 88.37209302325581% 96.47058823529412%;
  }

  26.8% {
    opacity: 1;
    background-position: 90.69767441860465% 96.47058823529412%;
  }

  29.3% {
    opacity: 1;
    background-position: 93.02325581395348% 96.47058823529412%;
  }

  31.7% {
    opacity: 1;
    background-position: 95.34883720930233% 96.47058823529412%;
  }

  34.1% {
    opacity: 1;
    background-position: 97.67441860465115% 0.0%;
  }

  36.6% {
    opacity: 1;
    background-position: 97.67441860465115% 2.3529411764705883%;
  }

  39.0% {
    opacity: 1;
    background-position: 97.67441860465115% 4.705882352941177%;
  }

  41.5% {
    opacity: 1;
    background-position: 97.67441860465115% 7.0588235294117645%;
  }

  43.9% {
    opacity: 1;
    background-position: 97.67441860465115% 9.411764705882353%;
  }

  46.3% {
    opacity: 1;
    background-position: 97.67441860465115% 11.76470588235294%;
  }

  48.8% {
    opacity: 1;
    background-position: 97.67441860465115% 16.470588235294116%;
  }

  51.2% {
    opacity: 1;
    background-position: 97.67441860465115% 18.823529411764707%;
  }

  53.7% {
    opacity: 1;
    background-position: 97.67441860465115% 21.176470588235293%;
  }

  56.1% {
    opacity: 1;
    background-position: 97.67441860465115% 23.52941176470588%;
  }

  58.5% {
    opacity: 1;
    background-position: 97.67441860465115% 25.882352941176475%;
  }

  61.0% {
    opacity: 1;
    background-position: 97.67441860465115% 28.235294117647058%;
  }

  63.4% {
    opacity: 1;
    background-position: 97.67441860465115% 30.58823529411765%;
  }

  65.9% {
    opacity: 1;
    background-position: 97.67441860465115% 32.94117647058823%;
  }

  68.3% {
    opacity: 1;
    background-position: 97.67441860465115% 35.294117647058826%;
  }

  70.7% {
    opacity: 1;
    background-position: 97.67441860465115% 37.64705882352941%;
  }

  73.2% {
    opacity: 1;
    background-position: 97.67441860465115% 42.35294117647059%;
  }

  75.6% {
    opacity: 1;
    background-position: 97.67441860465115% 44.70588235294118%;
  }

  78.0% {
    opacity: 1;
    background-position: 97.67441860465115% 47.05882352941176%;
  }

  80.5% {
    opacity: 1;
    background-position: 97.67441860465115% 49.411764705882355%;
  }

  82.9% {
    opacity: 1;
    background-position: 97.67441860465115% 51.76470588235295%;
  }

  85.4% {
    opacity: 1;
    background-position: 97.67441860465115% 54.11764705882353%;
  }

  87.8% {
    opacity: 1;
    background-position: 97.67441860465115% 56.470588235294116%;
  }

  90.2% {
    opacity: 1;
    background-position: 97.67441860465115% 58.82352941176471%;
  }

  92.7% {
    opacity: 1;
    background-position: 97.67441860465115% 61.1764705882353%;
  }

  95.1% {
    opacity: 1;
    background-position: 97.67441860465115% 63.52941176470588%;
  }

  97.6%,
  100% {
    opacity: 1;
    background-position: 97.67441860465115% 68.23529411764706%;
  }

}

.position-hold_up {
  --body-height: calc(var(--innerHeight) * 0.35) ;
  --body-width: calc(var(--body-height) * 1.0);
  
  position: absolute;
  left: calc(100% * var(--x, 0));
  bottom: calc(100% * var(--y, 0));

  height: 0;
  width: 0;
}

.body-hold_up {
  width: var(--body-width);
  height: var(--body-height);
  margin: calc(-1 * var(--body-height) / 2) calc(-1 * var(--body-width) / 2);
  background-image: url('./note.png');
  background-size: calc(44.0 * var(--body-width)) calc(43.5 * var(--body-height));
  background-repeat: no-repeat;
  opacity: 0;

  animation-duration: calc(var(--fadein-time, 1.6s) / var(--playspeed, 1));
  animation-delay: calc(var(--delay-time, 0s) / var(--playspeed, 1));

  animation-name: keyframes-hold_up;
  animation-play-state: paused;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: steps(1);
}

@keyframes keyframes-hold_up {

  0.0% {
    opacity: 1;
    background-position: 97.67441860465115% 82.35294117647058%;
  }

  2.4% {
    opacity: 1;
    background-position: 97.67441860465115% 84.70588235294117%;
  }

  4.9% {
    opacity: 1;
    background-position: 11.627906976744185% 98.82352941176471%;
  }

  7.3% {
    opacity: 1;
    background-position: 37.2093023255814% 98.82352941176471%;
  }

  9.8% {
    opacity: 1;
    background-position: 62.7906976744186% 98.82352941176471%;
  }

  12.2% {
    opacity: 1;
    background-position: 67.44186046511628% 98.82352941176471%;
  }

  14.6% {
    opacity: 1;
    background-position: 69.76744186046511% 98.82352941176471%;
  }

  17.1% {
    opacity: 1;
    background-position: 72.09302325581395% 98.82352941176471%;
  }

  19.5% {
    opacity: 1;
    background-position: 74.4186046511628% 98.82352941176471%;
  }

  22.0% {
    opacity: 1;
    background-position: 76.74418604651163% 98.82352941176471%;
  }

  24.4% {
    opacity: 1;
    background-position: 97.67441860465115% 87.05882352941177%;
  }

  26.8% {
    opacity: 1;
    background-position: 97.67441860465115% 89.41176470588236%;
  }

  29.3% {
    opacity: 1;
    background-position: 97.67441860465115% 91.76470588235294%;
  }

  31.7% {
    opacity: 1;
    background-position: 97.67441860465115% 94.11764705882352%;
  }

  34.1% {
    opacity: 1;
    background-position: 97.67441860465115% 96.47058823529412%;
  }

  36.6% {
    opacity: 1;
    background-position: 0.0% 98.82352941176471%;
  }

  39.0% {
    opacity: 1;
    background-position: 2.3255813953488373% 98.82352941176471%;
  }

  41.5% {
    opacity: 1;
    background-position: 4.651162790697675% 98.82352941176471%;
  }

  43.9% {
    opacity: 1;
    background-position: 6.976744186046512% 98.82352941176471%;
  }

  46.3% {
    opacity: 1;
    background-position: 9.30232558139535% 98.82352941176471%;
  }

  48.8% {
    opacity: 1;
    background-position: 13.953488372093023% 98.82352941176471%;
  }

  51.2% {
    opacity: 1;
    background-position: 16.27906976744186% 98.82352941176471%;
  }

  53.7% {
    opacity: 1;
    background-position: 18.6046511627907% 98.82352941176471%;
  }

  56.1% {
    opacity: 1;
    background-position: 20.930232558139537% 98.82352941176471%;
  }

  58.5% {
    opacity: 1;
    background-position: 23.25581395348837% 98.82352941176471%;
  }

  61.0% {
    opacity: 1;
    background-position: 25.581395348837212% 98.82352941176471%;
  }

  63.4% {
    opacity: 1;
    background-position: 27.906976744186046% 98.82352941176471%;
  }

  65.9% {
    opacity: 1;
    background-position: 30.23255813953488% 98.82352941176471%;
  }

  68.3% {
    opacity: 1;
    background-position: 32.55813953488372% 98.82352941176471%;
  }

  70.7% {
    opacity: 1;
    background-position: 34.883720930232556% 98.82352941176471%;
  }

  73.2% {
    opacity: 1;
    background-position: 39.53488372093023% 98.82352941176471%;
  }

  75.6% {
    opacity: 1;
    background-position: 41.86046511627907% 98.82352941176471%;
  }

  78.0% {
    opacity: 1;
    background-position: 44.18604651162791% 98.82352941176471%;
  }

  80.5% {
    opacity: 1;
    background-position: 46.51162790697674% 98.82352941176471%;
  }

  82.9% {
    opacity: 1;
    background-position: 48.837209302325576% 98.82352941176471%;
  }

  85.4% {
    opacity: 1;
    background-position: 51.162790697674424% 98.82352941176471%;
  }

  87.8% {
    opacity: 1;
    background-position: 53.48837209302325% 98.82352941176471%;
  }

  90.2% {
    opacity: 1;
    background-position: 55.81395348837209% 98.82352941176471%;
  }

  92.7% {
    opacity: 1;
    background-position: 58.139534883720934% 98.82352941176471%;
  }

  95.1% {
    opacity: 1;
    background-position: 60.46511627906976% 98.82352941176471%;
  }

  97.6%,
  100% {
    opacity: 1;
    background-position: 65.11627906976744% 98.82352941176471%;
  }

}

.position-long_hold {
  --body-height: calc(var(--innerHeight) * 0.35) ;
  --body-width: calc(var(--body-height) * 1.0);
  
  position: absolute;
  left: calc(100% * var(--x, 0));
  bottom: calc(100% * var(--y, 0));

  height: 0;
  width: 0;
}

.body-long_hold {
  width: var(--body-width);
  height: var(--body-height);
  margin: calc(-1 * var(--body-height) / 2) calc(-1 * var(--body-width) / 2);
  background-image: url('./note.png');
  background-size: calc(44.0 * var(--body-width)) calc(43.5 * var(--body-height));
  background-repeat: no-repeat;
  opacity: 0;

  animation-duration: calc(var(--fadein-time, 1.6s) / var(--playspeed, 1));
  animation-delay: calc(var(--delay-time, 0s) / var(--playspeed, 1));

  animation-name: keyframes-long_hold;
  animation-play-state: paused;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: steps(1);
}

@keyframes keyframes-long_hold {

  0.0% {
    opacity: 1;
    background-position: 79.06976744186046% 98.82352941176471%;
  }

  2.4% {
    opacity: 1;
    background-position: 81.3953488372093% 98.82352941176471%;
  }

  4.9% {
    opacity: 1;
    background-position: 100.0% 7.0588235294117645%;
  }

  7.3% {
    opacity: 1;
    background-position: 100.0% 32.94117647058823%;
  }

  9.8% {
    opacity: 1;
    background-position: 100.0% 58.82352941176471%;
  }

  12.2% {
    opacity: 1;
    background-position: 100.0% 63.52941176470588%;
  }

  14.6% {
    opacity: 1;
    background-position: 100.0% 65.88235294117646%;
  }

  17.1% {
    opacity: 1;
    background-position: 100.0% 68.23529411764706%;
  }

  19.5% {
    opacity: 1;
    background-position: 100.0% 70.58823529411765%;
  }

  22.0% {
    opacity: 1;
    background-position: 100.0% 72.94117647058823%;
  }

  24.4% {
    opacity: 1;
    background-position: 83.72093023255815% 98.82352941176471%;
  }

  26.8% {
    opacity: 1;
    background-position: 86.04651162790698% 98.82352941176471%;
  }

  29.3% {
    opacity: 1;
    background-position: 88.37209302325581% 98.82352941176471%;
  }

  31.7% {
    opacity: 1;
    background-position: 90.69767441860465% 98.82352941176471%;
  }

  34.1% {
    opacity: 1;
    background-position: 93.02325581395348% 98.82352941176471%;
  }

  36.6% {
    opacity: 1;
    background-position: 95.34883720930233% 98.82352941176471%;
  }

  39.0% {
    opacity: 1;
    background-position: 97.67441860465115% 98.82352941176471%;
  }

  41.5% {
    opacity: 1;
    background-position: 100.0% 0.0%;
  }

  43.9% {
    opacity: 1;
    background-position: 100.0% 2.3529411764705883%;
  }

  46.3% {
    opacity: 1;
    background-position: 100.0% 4.705882352941177%;
  }

  48.8% {
    opacity: 1;
    background-position: 100.0% 9.411764705882353%;
  }

  51.2% {
    opacity: 1;
    background-position: 100.0% 11.76470588235294%;
  }

  53.7% {
    opacity: 1;
    background-position: 100.0% 14.117647058823529%;
  }

  56.1% {
    opacity: 1;
    background-position: 100.0% 16.470588235294116%;
  }

  58.5% {
    opacity: 1;
    background-position: 100.0% 18.823529411764707%;
  }

  61.0% {
    opacity: 1;
    background-position: 100.0% 21.176470588235293%;
  }

  63.4% {
    opacity: 1;
    background-position: 100.0% 23.52941176470588%;
  }

  65.9% {
    opacity: 1;
    background-position: 100.0% 25.882352941176475%;
  }

  68.3% {
    opacity: 1;
    background-position: 100.0% 28.235294117647058%;
  }

  70.7% {
    opacity: 1;
    background-position: 100.0% 30.58823529411765%;
  }

  73.2% {
    opacity: 1;
    background-position: 100.0% 35.294117647058826%;
  }

  75.6% {
    opacity: 1;
    background-position: 100.0% 37.64705882352941%;
  }

  78.0% {
    opacity: 1;
    background-position: 100.0% 40.0%;
  }

  80.5% {
    opacity: 1;
    background-position: 100.0% 42.35294117647059%;
  }

  82.9% {
    opacity: 1;
    background-position: 100.0% 44.70588235294118%;
  }

  85.4% {
    opacity: 1;
    background-position: 100.0% 47.05882352941176%;
  }

  87.8% {
    opacity: 1;
    background-position: 100.0% 49.411764705882355%;
  }

  90.2% {
    opacity: 1;
    background-position: 100.0% 51.76470588235295%;
  }

  92.7% {
    opacity: 1;
    background-position: 100.0% 54.11764705882353%;
  }

  95.1% {
    opacity: 1;
    background-position: 100.0% 56.470588235294116%;
  }

  97.6%,
  100% {
    opacity: 1;
    background-position: 100.0% 61.1764705882353%;
  }

}

.position-long_holding {
  --body-height: calc(var(--innerHeight) * 0.5) ;
  --body-width: calc(var(--body-height) * 1.0);
  
  position: absolute;
  left: calc(100% * var(--x, 0));
  bottom: calc(100% * var(--y, 0));

  height: 0;
  width: 0;
}

.body-long_holding {
  width: var(--body-width);
  height: var(--body-height);
  margin: calc(-1 * var(--body-height) / 2) calc(-1 * var(--body-width) / 2);
  background-image: url('./note.png');
  background-size: calc(22.0 * var(--body-width)) calc(21.75 * var(--body-height));
  background-repeat: no-repeat;
  opacity: 0;

  animation-duration: calc(var(--fadein-time, 1.6s) / var(--playspeed, 1));
  animation-delay: calc(var(--delay-time, 0s) / var(--playspeed, 1));

  animation-name: keyframes-long_holding;
  animation-play-state: paused;
  animation-iteration-count: 1;
  animation-fill-mode: none;
  animation-timing-function: steps(1);
}

@keyframes keyframes-long_holding {

  0.0% {
    opacity: 1;
    background-position: 19.047619047619047% 91.56626506024097%;
  }

  10.0% {
    opacity: 1;
    background-position: 23.809523809523807% 91.56626506024097%;
  }

  20.0% {
    opacity: 1;
    background-position: 28.57142857142857% 91.56626506024097%;
  }

  30.0% {
    opacity: 1;
    background-position: 33.33333333333333% 91.56626506024097%;
  }

  40.0% {
    opacity: 1;
    background-position: 38.095238095238095% 91.56626506024097%;
  }

  50.0% {
    opacity: 1;
    background-position: 42.857142857142854% 91.56626506024097%;
  }

  60.0% {
    opacity: 1;
    background-position: 47.61904761904761% 91.56626506024097%;
  }

  70.0% {
    opacity: 1;
    background-position: 52.38095238095239% 91.56626506024097%;
  }

  80.0% {
    opacity: 1;
    background-position: 57.14285714285714% 91.56626506024097%;
  }

  90.0%,
  100% {
    opacity: 1;
    background-position: 61.904761904761905% 91.56626506024097%;
  }

}

/* 
.position-perfect {
  --body-height: calc(var(--innerHeight) * 0.5) ;
  --body-width: calc(var(--body-height) * 4.0);
  
  position: absolute;
  left: calc(100% * var(--x, 0));
  bottom: calc(100% * var(--y, 0));

  height: 0;
  width: 0;
} 
*/


.body-perfect {
  --body-height: calc(var(--innerHeight) * 0.18) ;
  --body-width: calc(var(--body-height) * 4.0);
  width: var(--body-width);
  height: var(--body-height);
  margin: calc(-1 * var(--body-height) / 2) calc(-1 * var(--body-width) / 2);
  background-image: url('./note.png');
  background-size: calc(44.0 * var(--body-width)) calc(174.0 * var(--body-height));
  background-repeat: no-repeat;
  opacity: 0;

  animation-duration: calc(var(--fadein-time, 1.6s) / var(--playspeed, 1));
  animation-delay: calc(var(--delay-time, 0s) / var(--playspeed, 1));

  animation-name: keyframes-perfect;
  animation-play-state: paused;
  animation-iteration-count: 1;
  animation-fill-mode: none;
  animation-timing-function: steps(1);
}

@keyframes keyframes-perfect {

  0.0% {
    opacity: 1;
    background-position: 100.0% 76.30057803468208%;
  }

  8.3% {
    opacity: 1;
    background-position: 100.0% 76.878612716763%;
  }

  16.7% {
    opacity: 1;
    background-position: 100.0% 78.61271676300578%;
  }

  25.0% {
    opacity: 1;
    background-position: 100.0% 79.1907514450867%;
  }

  33.3% {
    opacity: 1;
    background-position: 100.0% 79.76878612716763%;
  }

  41.7% {
    opacity: 1;
    background-position: 100.0% 80.34682080924856%;
  }

  50.0% {
    opacity: 1;
    background-position: 100.0% 80.92485549132948%;
  }

  58.3% {
    opacity: 1;
    background-position: 100.0% 81.5028901734104%;
  }

  66.7% {
    opacity: 1;
    background-position: 100.0% 82.08092485549133%;
  }

  75.0% {
    opacity: 1;
    background-position: 100.0% 82.65895953757226%;
  }

  83.3% {
    opacity: 1;
    background-position: 100.0% 77.45664739884393%;
  }

  91.7%,
  100% {
    opacity: 1;
    background-position: 100.0% 78.03468208092485%;
  }

}





/* long hold  */
.holding > .bodying-long_hold {
  width: var(--body-width);
  height: var(--body-height);
  margin: calc(-1 * var(--body-height) / 2) calc(-1 * var(--body-width) / 2);
}
.holding > .bodying-long_hold:before {
  content: '';
  position: absolute;
  width: var(--body-width);
  height: var(--body-height);
  border-radius: 50%;
  background-color: #EEDB78;
  opacity: 0;
  animation: holding-effect calc(0.5s / var(--playspeed, 1)) linear infinite;
}
.holding > .bodying-long_hold:after {
  content: '';
  position: absolute;
  width: var(--body-width);
  height: var(--body-height);
  border-radius: 50%;
  background-color: #EEDB78;
  opacity: 0;
  animation: holding-effect calc(0.5s / var(--playspeed, 1)) linear calc(0.25s / var(--playspeed, 1)) infinite;
}




.holding > .bodying-hold_up {
  width: var(--body-width);
  height: var(--body-height);
  margin: calc(-1 * var(--body-height) / 2) calc(-1 * var(--body-width) / 2);
}
.holding > .bodying-hold_up:before {
  content: '';
  position: absolute;
  width: var(--body-width);
  height: var(--body-height);
  border-radius: 50%;
  background-color: #78C2EE;
  opacity: 0;
  animation: holding-effect calc(0.5s / var(--playspeed, 1)) linear infinite;
}
.holding > .bodying-hold_up:after {
  content: '';
  position: absolute;
  width: var(--body-width);
  height: var(--body-height);
  border-radius: 50%;
  background-color: #78C2EE;
  opacity: 0;
  animation: holding-effect calc(0.5s / var(--playspeed, 1)) linear calc(0.25s / var(--playspeed, 1)) infinite;
}



.holding > .bodying-hold_down {
  width: var(--body-width);
  height: var(--body-height);
  margin: calc(-1 * var(--body-height) / 2) calc(-1 * var(--body-width) / 2);
}
.holding > .bodying-hold_down:before {
  content: '';
  position: absolute;
  width: var(--body-width);
  height: var(--body-height);
  border-radius: 50%;
  background-color: #EE7E78;
  opacity: 0;
  animation: holding-effect calc(0.5s / var(--playspeed, 1)) linear infinite;
}
.holding > .bodying-hold_down:after {
  content: '';
  position: absolute;
  width: var(--body-width);
  height: var(--body-height);
  border-radius: 50%;
  background-color: #EE7E78;
  opacity: 0;
  animation: holding-effect calc(0.5s / var(--playspeed, 1)) linear calc(0.25s / var(--playspeed, 1)) infinite;
}


@keyframes holding-effect {
  from {
    opacity:0.3;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.5);
  }
}


/* Hold ring , thanks: https://blog.csdn.net/weixin_43017935/article/details/89396346 */
.holding > .ring {
  --ring-size: calc(var(--body-width) * 1.2);
  --ring-time: var(--hold-time);

  width: var(--ring-size);
  height: var(--ring-size);
  margin: calc(-1 * var(--ring-size) / 2) calc(-1 * var(--ring-size) / 2);
}
.holding > .ring.ring-side {
  --ring-time: calc(0.75 * var(--hold-time));
}
.holding > .ring div {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
}

.holding > .ring .hull {
  width: 200px;
  height: 200px;
  transform: rotate(0deg);
  /* 控制初始角度 */
}

.holding > .ring .section {
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.holding > .ring .section_right {
  width: 50%;
  left: 50%;
  transform: rotate(180deg);
}

.holding > .ring .section_left {
  width: 50%;
  transform-origin: right center;
}

.holding > .ring .box {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.holding > .ring .box_left {
  transform-origin: right center;
  transform: rotate(180deg);
  /*扇形<180°时，box_left值为180°,扇形>180°时，这个控制*/
  animation: box_left calc(var(--ring-time) / 2 / var(--playspeed, 1)) linear;
  animation-delay: calc(var(--ring-time) * (0.5 + var(--ring-delay-ratio,0)) / var(--playspeed, 1));
  animation-fill-mode: forwards;
}

.holding > .ring .box_right {
  left: 100%;
  transform-origin: left center;
  transform: rotate(0deg);
  /*扇形<180°时，box_right控制,扇形>180°时，值为180°*/
  animation: box_right calc(var(--ring-time) / 2 / var(--playspeed, 1)) linear;
  animation-fill-mode: forwards;
  animation-delay: calc(var(--ring-time) * var(--ring-delay-ratio,0) / var(--playspeed, 1));
}

.holding > .ring .circle {
  width: 200%;
  height: 100%;
  border-radius: 50%;
}

.holding > .ring .circle_left {
  /* background-color: red; */
  border: calc(0.05 * var(--ring-size)) solid var(--ring-color, white);
}

.holding > .ring .circle_right {
  left: -100%;
  /* background-color: red; */
  border: calc(0.05 * var(--ring-size)) solid var(--ring-color, white);
}

@keyframes box_right {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(180deg);
  }
}

@keyframes box_left {
  from {
    transform: rotate(180deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.holding > .ring-long_hold {
  --ring-color: #CAB547;
}
.holding > .ring-hold_down {
  --ring-color: #BD6560;
}
.holding > .ring-hold_up {
  --ring-color: #44A8D6;
}

/* Hold Line */
.position-line_long_hold {
  --body-width: calc(var(--innerHeight) * 0.5 * 0.15) ;
  --body-height: calc(var(--height));
  
  position: absolute;
  left: calc(100% * var(--x, 0));
  /* bottom: calc(100% * var(--y, 0)); */
  top: calc(0px - var(--innerOffset) - (var(--height) - var(--innerHeight)) / 2);

  height: 0;
  width: 0;
}

.body-line_long_hold {
  --line-i-height: calc(var(--innerHeight) * 0.01);
  background: linear-gradient(to bottom, #fff, #fff var(--line-i-height), transparent var(--line-i-height), transparent);
  background-size: 100% calc(3 * var(--line-i-height));
  transform: rotate(180deg);


  width: var(--body-width);
  height: var(--body-height);
  position: absolute;
  /* margin: calc(-1 * var(--body-height) / 2) calc(-1 * var(--body-width) / 2); */
  margin: 0 calc(-1 * var(--body-width) / 2);
  opacity: 0;

  animation-duration: calc(var(--fadein-time, 1.6s) / var(--playspeed, 1));
  animation-delay: calc(var(--delay-time, 0s) / var(--playspeed, 1));

  animation-name: keyframes-line_long_hold;
  animation-play-state: paused;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes keyframes-line_long_hold {
  0% {
    opacity: 0;
    /* width: 0; */
    width: var(--body-width);
    /* margin: calc(-1 * var(--body-height) / 2) 0; */
  }
  100% {
    opacity: 1;
    width: var(--body-width);
    /* margin: calc(-1 * var(--body-height) / 2) calc(-1 * var(--body-width) / 2); */
  }
}
.body-line-color_long_hold {
  width: 100%;
  height: 0%;
  background: linear-gradient(to bottom, #EEDB78, #EEDB78 var(--line-i-height), transparent var(--line-i-height), transparent);
  background-size: 100% calc(3 * var(--line-i-height));
  
  animation-duration: calc(var(--hold-time, 0s) / var(--playspeed, 1));
  animation-delay: calc((var(--fadein-time, 0s) + var(--delay-time, 0s)) / var(--playspeed, 1));

  animation-name: keyframes-line_color_long_hold;
  animation-play-state: paused;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes keyframes-line_color_long_hold {
  from {
    height: 0%;
  }
  to {
    height: 100%;
  }
}


.position-line_hold_down {
  --body-width: calc(var(--innerHeight) * 0.5 * 0.15) ;
  --body-height: calc(var(--innerHeight) * var(--hold-length));
  
  position: absolute;
  left: calc(100% * var(--x, 0));
  bottom: calc(100% * var(--y, 0));
  /* top: calc(0px - var(--innerOffset) - (var(--height) - var(--innerHeight)) / 2); */

  height: 0;
  width: 0;
}

.body-line_hold_down {
  --line-i-height: calc(var(--innerHeight) * 0.01);
  background: linear-gradient(to bottom, #fff, #fff var(--line-i-height), transparent var(--line-i-height), transparent);
  background-size: 100% calc(3 * var(--line-i-height));
  /* transform: rotate(180deg); */


  width: var(--body-width);
  height: var(--body-height);
  position: absolute;
  /* margin: calc(-1 * var(--body-height) / 2) calc(-1 * var(--body-width) / 2); */
  margin: 0 calc(-1 * var(--body-width) / 2);
  opacity: 0;

  animation-duration: calc(var(--fadein-time, 1.6s) / var(--playspeed, 1));
  animation-delay: calc(var(--delay-time, 0s) / var(--playspeed, 1));

  animation-name: keyframes-line_hold_down;
  animation-play-state: paused;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes keyframes-line_hold_down {
  0% {
    opacity: 0;
    /* width: 0; */
    width: var(--body-width);
    /* margin: calc(-1 * var(--body-height) / 2) 0; */
  }
  100% {
    opacity: 1;
    width: var(--body-width);
    /* margin: calc(-1 * var(--body-height) / 2) calc(-1 * var(--body-width) / 2); */
  }
}
.body-line-color_hold_down {
  width: 100%;
  height: 0%;
  background: linear-gradient(to bottom, #EE7E78, #EE7E78 var(--line-i-height), transparent var(--line-i-height), transparent);
  background-size: 100% calc(3 * var(--line-i-height));
  
  animation-duration: calc(var(--hold-time, 0s) / var(--playspeed, 1));
  animation-delay: calc((var(--fadein-time, 0s) + var(--delay-time, 0s)) / var(--playspeed, 1));

  animation-name: keyframes-line_color_hold;
  animation-play-state: paused;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes keyframes-line_color_hold {
  from {
    height: 0%;
  }
  to {
    height: 100%;
  }
}



.position-line_hold_up {
  --body-width: calc(var(--innerHeight) * 0.5 * 0.15) ;
  --body-height: calc(var(--innerHeight) * var(--hold-length));
  
  position: absolute;
  left: calc(100% * var(--x, 0));
  bottom: calc(100% * var(--y, 0));
  /* top: calc(0px - var(--innerOffset) - (var(--height) - var(--innerHeight)) / 2); */

  height: 0;
  width: 0;
}

.body-line_hold_up {
  --line-i-height: calc(var(--innerHeight) * 0.01);
  background: linear-gradient(to bottom, #fff, #fff var(--line-i-height), transparent var(--line-i-height), transparent);
  background-size: 100% calc(3 * var(--line-i-height));
  transform: rotate(180deg);
  transform-origin: top;

  width: var(--body-width);
  height: var(--body-height);
  position: absolute;
  /* margin: calc(-1 * var(--body-height) / 2) calc(-1 * var(--body-width) / 2); */
  margin: 0 calc(-1 * var(--body-width) / 2);
  opacity: 0;

  animation-duration: calc(var(--fadein-time, 1.6s) / var(--playspeed, 1));
  animation-delay: calc(var(--delay-time, 0s) / var(--playspeed, 1));

  animation-name: keyframes-line_hold;
  animation-play-state: paused;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes keyframes-line_hold {
  0% {
    opacity: 0;
    /* width: 0; */
    width: var(--body-width);
    /* margin: calc(-1 * var(--body-height) / 2) 0; */
  }
  100% {
    opacity: 1;
    width: var(--body-width);
    /* margin: calc(-1 * var(--body-height) / 2) calc(-1 * var(--body-width) / 2); */
  }
}
.body-line-color_hold_up {
  width: 100%;
  height: 0%;
  background: linear-gradient(to bottom, #78C2EE, #78C2EE var(--line-i-height), transparent var(--line-i-height), transparent);
  background-size: 100% calc(3 * var(--line-i-height));
  
  animation-duration: calc(var(--hold-time, 0s) / var(--playspeed, 1));
  animation-delay: calc((var(--fadein-time, 0s) + var(--delay-time, 0s)) / var(--playspeed, 1));

  animation-name: keyframes-line_color_hold;
  animation-play-state: paused;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes keyframes-line_color_hold {
  from {
    height: 0%;
  }
  to {
    height: 100%;
  }
}


.position-drag-head {
  --body-height: calc(var(--innerHeight) * 0.29) ;
  --body-width: calc(var(--body-height) * 1.0);
  
  position: absolute;
  z-index: 1;
  left: calc(100% * var(--x, 0));
  bottom: calc(100% * var(--y, 0));

  height: 0;
  width: 0;

  animation-duration: calc(var(--draging-time, 1.6s) / var(--playspeed, 1));
  animation-delay: calc(var(--delay-time, 0s) / var(--playspeed, 1));

  animation-name: drag-head;
  animation-play-state: paused;
  animation-iteration-count: 1;
  animation-fill-mode: none;
  animation-timing-function: linear;
}

.body-drag-head {
  width: var(--body-width);
  height: var(--body-height);
  margin: calc(-1 * var(--body-height) / 2) calc(-1 * var(--body-width) / 2);
  background-image: url('./note.png');
  background-size: calc(88.0 * var(--body-width)) calc(87.0 * var(--body-height));
  background-repeat: no-repeat;
  background-position: 12.643678160919542% 100.0%;
}
.body-cdrag-head-up {
  width: var(--body-width);
  height: var(--body-height);
  margin: calc(-1 * var(--body-height) / 2) calc(-1 * var(--body-width) / 2);
  background-image: url('./note.png');
  background-size: calc(44.0 * var(--body-width)) calc(43.5 * var(--body-height));
  background-repeat: no-repeat;
  background-position: 81.3953488372093% 96.47058823529412%;
}
.body-cdrag-head-down {
  width: var(--body-width);
  height: var(--body-height);
  margin: calc(-1 * var(--body-height) / 2) calc(-1 * var(--body-width) / 2);
  background-image: url('./note.png');
  background-size: calc(44.0 * var(--body-width)) calc(43.5 * var(--body-height));
  background-repeat: no-repeat;
  background-position: 79.06976744186046% 96.47058823529412%;
}
@keyframes drag-head {
  from {
    left: calc(100% * var(--x, 0));
    bottom: calc(100% * var(--y, 0));
  }
  to {
    left: calc(100% * var(--end-x, 0));
    bottom: calc(100% * var(--end-y, 0));
  }
}


.position-drag-line {
  top: calc(100% * var(--x));
  bottom: calc(100% * var(--end-x));
  left: calc(100% * var(--y));
  right: calc(100% * var(--end-y));
}

.body-drag-line {
  top: calc(100% * var(--x));
  bottom: calc(100% * var(--end-x));
  left: calc(100% * var(--y));
  right: calc(100% * var(--end-y));
}




/* Drop Click & Drag */
.position-drop_click {
  --body-height: calc(var(--innerHeight) * 0.03) ;
  --body-width: calc(var(--body-height) * 9.0);
  
  position: absolute;
  left: calc(100% * var(--x, 0));
  /* bottom: calc(100% * var(--y, 0)); */

  height: 0;
  width: 0;

  animation-duration: calc(var(--fadein-time, 1.6s) / var(--playspeed, 1));
  animation-delay: calc(var(--delay-time, 0s) / var(--playspeed, 1));

  animation-name: keyframes-drop;
  animation-play-state: paused;
  animation-iteration-count: 1;
  animation-fill-mode: none;
  animation-timing-function: linear;
}
.body-drop_click {
  width: var(--body-width);
  height: var(--body-height);
  margin: calc(-1 * var(--body-height) / 2) calc(-1 * var(--body-width) / 2);
  background-image: linear-gradient(to right, #fff, #fff 12.5%, #78C2EE 12.5%, #78C2EE 87.5%, #fff 87.5%, #fff);;
  border-radius: calc(0.5 * var(--body-height));
  /* background-image: url('./note.png');
  background-position: 20.689655172413794% 98.99280575539568%;
  background-size: calc(88.0 * var(--body-width)) calc(696.0 * var(--body-height));
  background-repeat: no-repeat; */
  /* opacity: 0; */
}

.position-drop_drag {
  --body-height: calc(var(--innerHeight) * 0.03) ;
  --body-width: calc(var(--body-height) * 6.0);
  
  position: absolute;
  left: calc(100% * var(--x, 0));
  /* bottom: calc(100% * var(--y, 0)); */

  height: 0;
  width: 0;

  animation-duration: calc(var(--fadein-time, 1.6s) / var(--playspeed, 1));
  animation-delay: calc(var(--delay-time, 0s) / var(--playspeed, 1));

  animation-name: keyframes-drop;
  animation-play-state: paused;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}
.body-drop_drag {
  width: var(--body-width);
  height: var(--body-height);
  margin: calc(-1 * var(--body-height) / 2) calc(-1 * var(--body-width) / 2);
  background-image: linear-gradient(to right, #fff, #fff 12.5%, #7CEE78 12.5%, #7CEE78 87.5%, #fff 87.5%, #fff);;
  border-radius: calc(0.5 * var(--body-height));
  /* background-image: url('./note.png');
  background-position: 20.689655172413794% 98.99280575539568%;
  background-size: calc(88.0 * var(--body-width)) calc(696.0 * var(--body-height));
  background-repeat: no-repeat; */
  /* opacity: 0; */
}

@keyframes keyframes-drop {
  0% {
    bottom: 10000%;
  }
  0.001% {
    bottom: calc((100% + var(--innerOffset) + var(--height)) / 2 + (var(--from-y, 1) - 1) * var(--height));
    /* * var(--from-y, 1) */
    /* (0px - var(--innerOffset) - (var(--height) - var(--innerHeight)) / 2) */
  }
  99.999% {
    opacity: 1;
    bottom: calc(100% * var(--y, 0));
  }
  100% {
    opacity: 0;
    bottom: calc(100% * var(--y, 0));
  }
}