.notes-track{z-index:3;--note-row:clamp(22px, 2.2vw, 34px);--note-col:clamp(84px, 9.6vw, 150px);--note-pad:calc(var(--note-row) * .75);--note-h:calc(var(--note-row) * 4 + var(--note-pad) * 2);--note-bg:var(--ink);--note-fg:var(--bone);--note-line:#c9ced680;height:var(--note-h);pointer-events:none;position:relative}.notes{height:var(--note-h);background:var(--note-bg);color:var(--note-fg);position:relative;overflow:hidden;box-shadow:0 -30px 60px #0000008c}.notes__probe{width:var(--note-col);visibility:hidden;height:0;position:absolute;top:0;left:0}.notes__staff{left:0;right:0;top:var(--note-pad);height:calc(var(--note-row) * 4 + 1px);background:repeating-linear-gradient(to bottom, var(--note-line) 0, var(--note-line) 1px, transparent 1px, transparent var(--note-row));position:absolute}.notes__staff:after{content:"";background:var(--note-line);height:1px;position:absolute;bottom:0;left:0;right:0}.notes__move{top:var(--note-pad);width:calc(var(--note-col) * 34);height:calc(var(--note-row) * 4 + 1px);will-change:transform;position:absolute;left:0}.notes__bars{background:repeating-linear-gradient(to right, var(--note-line) 0, var(--note-line) 1px, transparent 1px, transparent var(--note-col));position:absolute;inset:0}.notes__item{left:calc(var(--note-col) * var(--c));top:calc(var(--note-row) * var(--r));height:var(--note-row);align-items:center;gap:calc(var(--note-row) * .08);padding-left:calc(var(--note-row) * .06);white-space:nowrap;display:flex;position:absolute}.notes__dot{width:calc(var(--note-row) * .66);height:calc(var(--note-row) * .66);background:currentColor;border-radius:50%;flex:none}.notes__word{font-family:var(--display);text-transform:uppercase;font-weight:800;font-size:calc(var(--note-row) * .9);letter-spacing:.005em;padding-top:.06em;line-height:1;display:block}@media (max-width:767px){.notes-track{--note-col:84px}}