:root {
  --syn-bg-top: rgba(14, 20, 30, 0.88);
  --syn-bg-mid: rgba(8, 14, 24, 0.96);
  --syn-bg-bottom: rgba(5, 10, 18, 0.98);

  --syn-lane-line: rgba(255, 255, 255, 0.08);
  --syn-hit-line: rgba(255, 255, 255, 0.24);

  --syn-note-L-from: #ff8b78;
  --syn-note-L-to: #d95449;
  --syn-note-R-from: #66c4ff;
  --syn-note-R-to: #2a86d4;

  --syn-note-edge: rgba(255, 255, 255, 0.16);
  --syn-note-shadow: rgba(0, 0, 0, 0.45);
}

#synthesia {
  background:
    linear-gradient(to bottom, var(--syn-bg-top) 0%, var(--syn-bg-mid) 48%, var(--syn-bg-bottom) 100%);
}

.synth-note {
  border: 1px solid var(--syn-note-edge) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 2px rgba(0, 0, 0, 0.28) !important;
}

.synth-note.hand-L .synth-bg {
  background: linear-gradient(to bottom, var(--syn-note-L-from), var(--syn-note-L-to)) !important;
}

.synth-note.hand-R .synth-bg {
  background: linear-gradient(to bottom, var(--syn-note-R-from), var(--syn-note-R-to)) !important;
}