cursor styling not showing in the global css

[AlaaMX]

Hello I'm trying to style the waveform cursor as shown in the example in the official docs

  #waveform ::part(cursor) {
    height: 100px;
    top: 28px;
    border-radius: 4px;
    border: 1px solid #fff;
  }

  #waveform ::part(cursor):after {
    content: '🏄';
    font-size: 1.5em;
    position: absolute;
    left: 0;
    top: -28px;
    transform: translateX(-50%);
  }

im using nextjs and putting the styles in the global.css file but seems not working, thanks!