.skeleton {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  padding: 20px 30px;
  background-color: #fff;
  z-index: 10;
  --van-skeleton-paragraph-height: .8rem;
}

.detail {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  --header-height: 62px;
  background: #01c1b5;

  .headHeight {
    width: 100%;
    height: var(--header-height);
    transition: margin .3s;
    z-index: 10;

    &.headHide {
      margin-top: calc(0Px - var(--header-height));
    }
  }

  .container {
    position: relative;
    height: calc(100vh - var(--header-height) - 15px);
    border-radius: 10px;
    margin: 0 15px;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #fff;

    &::-webkit-scrollbar {
      width: 0;
      display: none;
    }

    :global {
      #musicAndSelection {
        overflow: auto;
        border-radius: 12px;
      }
    }
  }
}

.shareBox {

  :global {

    #cursorImg-0 {
      display: none !important;
    }

    #selectionBox {
      pointer-events: none;
    }
  }
}

.demos {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 6px 10px;
  z-index: 1;
  color: #2c3e50;
  &>div {
    display: flex;
    align-items: center;
    margin-right: 6px;

    &>span {
      margin-left: 4px;
    }
  }
}

.right {
  path {
    fill: #01C1B5;
    stroke: #01C1B5;
  }
}

.wrong {
  path {
    fill: #FF4444;
    stroke: #FF4444;
  }
}

.notPlay {
  path {
    fill: #000;
    stroke: #000;
  }
}

.cadence_wrong {
  path {
    fill: #067DD7;
    stroke: #067DD7;
  }
}

.intonation_wrong {
  path {
    fill: #FFAB25;
    stroke: #FFAB25;
  }
}

.integrity_wrong {
  path {
    fill: #CC75FF;
    stroke: #CC75FF;
  }
}