.dom-playfield{--note-scale:1;--lane-dark:.8;--left-note:#70d8e8;--right-note:#ee5d9d;--hit-color:#fff;--note-glow:1;position:absolute;inset:0;overflow:hidden;background:#0b0b0e}.dom-lanes{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr)}.dom-lanes i{display:block;background:rgba(0,0,0,calc(var(--lane-dark)*.42));border-right:1px solid #ffffff18}.dom-lanes i:first-child{border-left:1px solid #ffffff18}.dom-hit-line{position:absolute;z-index:2;left:0;right:0;bottom:47px;height:3px;background:var(--hit-color);opacity:.72}.dom-playfield[data-direction=up] .dom-hit-line{top:47px;bottom:auto}.dom-note{position:absolute;z-index:3;display:block;left:0;top:0;width:25%;height:16px;background:var(--left-note);transform:translateY(-50%) scale(calc(var(--note-scale)));box-shadow:0 0 calc(18px * var(--note-glow)) currentColor}.dom-note[data-lane="1"],.dom-note[data-lane="3"]{background:var(--right-note);color:var(--right-note)}.dom-note[data-lane="0"],.dom-note[data-lane="2"]{color:var(--left-note)}.dom-playfield[data-shape=circles]>.dom-note,.dom-playfield[data-shape=circles] .dom-hold>.dom-note{width:min(11.5%,104px);height:auto;aspect-ratio:1;border-radius:50%;margin-left:6.75%;transform:translate(-50%,-50%) scale(var(--note-scale))}.dom-playfield[data-shape=arrows]>.dom-note,.dom-playfield[data-shape=arrows] .dom-hold>.dom-note{width:10%;height:auto;aspect-ratio:1;margin-left:7.5%;clip-path:polygon(50% 100%,100% 42%,70% 42%,70% 0,30% 0,30% 42%,0 42%);transform:translate(-50%,-50%) scale(var(--note-scale))}.dom-playfield[data-direction=up][data-shape=arrows]>.dom-note,.dom-playfield[data-direction=up][data-shape=arrows] .dom-hold>.dom-note{transform:translate(-50%,-50%) rotate(180deg) scale(var(--note-scale))}.dom-hold{position:absolute;z-index:3;left:0;width:25%;height:1px;color:var(--left-note)}.dom-hold-tail{position:absolute;left:18%;bottom:0;width:64%;height:var(--tail-length);background:color-mix(in srgb,var(--left-note) 48%,transparent)}.dom-hold.up .dom-hold-tail{top:0;bottom:auto}.dom-hold>.dom-note{left:0;top:0;width:100%;color:var(--left-note)}.preview-chart-label,.preview-keys{z-index:8}.preview-keys{background:#0b0b0ecc}