diff --git a/BrowserNoEditor.htm b/BrowserNoEditor.htm
index 5d3dda8..8733fcf 100644
--- a/BrowserNoEditor.htm
+++ b/BrowserNoEditor.htm
@@ -21,9 +21,7 @@
     .bgm .volume{width:30px;padding:3px 0}
     .bgm .volume_slider{width:50px;padding:0 15px 0 5px}
     .bgm .volume_slider input[type=range]{height:40px;margin:0;padding:0;width:100%}
-    .long-audio .bgm {width:1000px}
-    .bgm .volume{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJjb250ZXh0LWZpbGwiIGZpbGwtb3BhY2l0eT0iY29udGV4dC1maWxsLW9wYWNpdHkiPgogIDxwYXRoIGQ9Ik03LjI0NSAxLjM1IDQuMTE3IDUgMiA1YTIgMiAwIDAgMC0yIDJsMCAyYTIgMiAwIDAgMCAyIDJsMi4xMTcgMCAzLjEyOCAzLjY1QzcuODQ4IDE1LjM1MyA5IDE0LjkyNyA5IDE0TDkgMmMwLS45MjctMS4xNTItMS4zNTMtMS43NTUtLjY1eiIvPgogIDxwYXRoIGQ9Ik0xMS43NjQgMTVhLjYyMy42MjMgMCAwIDEtLjMyLTEuMTYyIDYuNzgzIDYuNzgzIDAgMCAwIDMuMzA2LTUuODA1IDYuNzY3IDYuNzY3IDAgMCAwLTMuNDA5LTUuODY0LjYyNC42MjQgMCAxIDEgLjYxOS0xLjA4NUE4LjAxNSA4LjAxNSAwIDAgMSAxNiA4LjAzM2E4LjAzOCA4LjAzOCAwIDAgMS0zLjkxOCA2Ljg3OWMtLjEuMDYtLjIxLjA4OC0uMzE4LjA4OHoiLz4KICA8cGF0aCBkPSJNMTEuNDM0IDExLjg1QTQuOTgyIDQuOTgyIDAgMCAwIDEzLjI1IDhhNC45ODIgNC45ODIgMCAwIDAtMS44MTktMy44NTJsLS40MzEgMCAwIDcuNzAyLjQzNCAweiIvPgo8L3N2Zz4=")}
-    .bgm .volume.muted{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJjb250ZXh0LWZpbGwiIGZpbGwtb3BhY2l0eT0iY29udGV4dC1maWxsLW9wYWNpdHkiPgogIDxwYXRoIGQ9Im0xMSA0LjE0OSAwIDQuMTgxIDEuNzc1IDEuNzc1Yy4zLS42NDEuNDc1LTEuMzUuNDc1LTIuMTA1YTQuOTgxIDQuOTgxIDAgMCAwLTEuODE4LTMuODUxbC0uNDMyIDB6Ii8+CiAgPHBhdGggZD0iTTIuMDY3IDEuMTgzYS42MjYuNjI2IDAgMCAwLS44ODUuODg1TDQuMTE1IDUgMiA1YTIgMiAwIDAgMC0yIDJsMCAyYTIgMiAwIDAgMCAyIDJsMi4xMTcgMCAzLjEyOCAzLjY1QzcuODQ4IDE1LjM1MyA5IDE0LjkyNyA5IDE0bDAtNC4xMTYgMy4zMTcgMy4zMTdjLS4yNzMuMjMyLS41Ni40NS0uODczLjYzNmEuNjI0LjYyNCAwIDAgMC0uMjE4Ljg1Ni42MjEuNjIxIDAgMCAwIC44NTYuMjE5IDcuNTggNy41OCAwIDAgMCAxLjEyMi0uODIzbC43MjkuNzI5YS42MjYuNjI2IDAgMCAwIC44ODQtLjg4NkwyLjA2NyAxLjE4M3oiLz4KICA8cGF0aCBkPSJNOSAyYzAtLjkyNi0xLjE1Mi0xLjM1Mi0xLjc1NS0uNjQ5TDUuNzU3IDMuMDg3IDkgNi4zMyA5IDJ6Ii8+CiAgPHBhdGggZD0iTTExLjM0MSAyLjE2OWE2Ljc2NyA2Ljc2NyAwIDAgMSAzLjQwOSA1Ljg2NCA2LjczMiA2LjczMiAwIDAgMS0uODMgMy4yMTdsLjkxMi45MTJBNy45OTIgNy45OTIgMCAwIDAgMTYgOC4wMzNhOC4wMTggOC4wMTggMCAwIDAtNC4wNC02Ljk1LjYyNS42MjUgMCAwIDAtLjYxOSAxLjA4NnoiLz4KPC9zdmc+")}
+    .long-audio .bgm {width:1000px;max-width:calc(100vw - 16px)}
   </style>
 </head>
 <body ontouchstart>
diff --git a/main.js b/main.js
index ca3cd29..7cc20a7 100644
--- a/main.js
+++ b/main.js
@@ -454,7 +454,36 @@ function parseNotesFromText(text) {noteList = [];
     ])
   }
 
-  laneToggleList = noteList.filter(i => (i.noteType === '12' || i.noteType === '13'))
+  laneToggleList = []
+  let laneToggleRawList = noteList.filter(i => (i.noteType === '12' || i.noteType === '13'))
+  laneToggleRawList.forEach(i => {
+    const value = i.noteType === '12' ? 1 : 0
+    const startTime = i.timestamp
+    if (i.extParam2 === 2) {
+      const width = i.noteWidth / 2
+      for (let j=0; j<width; j++) {
+        const stepTime = startTime ? startTime + Math.round(j * 1000 / 60 / 2) : 0
+        if (value === 1) {
+          laneToggleList.push({timestamp: stepTime, value, lane: Math.floor(i.laneOffset + width - 0.5 - j) % 60})
+          laneToggleList.push({timestamp: stepTime, value, lane: Math.floor(i.laneOffset + width + j) % 60})
+        } else {
+          laneToggleList.push({timestamp: stepTime, value, lane: Math.floor(i.laneOffset + j) % 60})
+          laneToggleList.push({timestamp: stepTime, value, lane: Math.floor(i.laneOffset + i.noteWidth - 0.5 - j) % 60})
+        }
+      }
+    } else if (i.extParam2 === 0) {
+      for (let j=0; j<i.noteWidth; j++) {
+        const stepTime = startTime ? startTime + Math.round(j * 1000 / 60 / 2) : 0
+        laneToggleList.push({timestamp: stepTime, value, lane: (i.laneOffset + j) % 60})
+      }
+    } else if (i.extParam2 === 1) {
+      for (let j=0; j<i.noteWidth; j++) {
+        const stepTime = startTime ? startTime + Math.round(j * 1000 / 60 / 2) : 0
+        laneToggleList.push({timestamp: stepTime, value, lane: (i.laneOffset + i.noteWidth - 1 - j) % 60})
+      }
+    }
+  })
+  laneToggleList.sort((a,b) => a.timestamp-b.timestamp)
 
   console.log('parsed notes')
 
@@ -1145,51 +1174,9 @@ function updateLaneOnState(fromTs, toTs) {
   while (laneChangeIdx < laneToggleList.length) {
     let i = laneToggleList[laneChangeIdx]
     if (i.timestamp > toTs) break
-    const transitionWidth = i.noteWidth / (i.extParam2 === 2 ? 2 : 1)
-    const transitionLength = transitionWidth * 1000 / 60 / 2
-    if (i.tickTotal === 0 || toTs - i.timestamp > transitionLength) {
-      const value = i.noteType === '12' ? 1 : 0
-      const width = i.noteWidth * laneEffectMul
-      for (let idx = 0; idx < width; idx++) {
-        laneOnState[(i.laneOffset * laneEffectMul + idx) % (60 * laneEffectMul)] = value
-      }
-    } else if (pendingLaneChange.indexOf(i) === -1) {
-      pendingLaneChange.push(i)
-    }
+    laneOnState[i.lane] = i.value
     laneChangeIdx++
   }
-  for (let i_ = 0; i_<pendingLaneChange.length; i_++) {
-    const i = pendingLaneChange[i_]
-    const value = i.noteType === '12' ? 1 : 0
-    const transitionWidth = i.noteWidth / (i.extParam2 === 2 ? 2 : 1)
-    const transitionLength = transitionWidth * 1000 / 60 / 2
-    const transitionPercent = Math.min(toTs - i.timestamp, transitionLength) / transitionLength
-    const width = i.noteWidth * laneEffectMul
-    if (toTs - i.timestamp > transitionLength) {
-      for (let idx = 0; idx < width; idx++) {
-        laneOnState[(i.laneOffset * laneEffectMul + idx) % (60 * laneEffectMul)] = value
-      }
-      pendingLaneChange.splice(i_, 1)
-      i_--
-      continue
-    }
-    for (let idx = 0; idx < width; idx++) {
-      let idxCompare = idx + 0.5
-      if (i.extParam2 === 0) {
-        if (idxCompare > width * transitionPercent) continue
-      } else if (i.extParam2 === 1) {
-        if (width - idxCompare > width * transitionPercent) continue
-      } else if (i.extParam2 === 2) {
-        const transitionBorder = width * transitionPercent / 2
-        if (value === 1) {
-          if (Math.abs(width/2 - idxCompare) > transitionBorder) continue
-        } else {
-          if (Math.abs(width/2 - idxCompare) < (width / 2 - transitionBorder)) continue
-        }
-      }
-      laneOnState[(i.laneOffset * laneEffectMul + idx) % (60 * laneEffectMul)] = value
-    }
-  }
 }
 
 speed_input.addEventListener('input', e => {
@@ -1199,7 +1186,7 @@ speed_input.addEventListener('input', e => {
   drawForNextFrame = true
 })
 function resize() {
-  const w = Math.round(window.innerWidth * displayRatio), h = Math.round(window.innerHeight * displayRatio)
+  const w = Math.round(window.innerWidth * devicePixelRatio), h = Math.round(window.innerHeight * devicePixelRatio)
   canvas.width = w
   canvas.height = h
   maxR = Math.round(Math.min(w, h) * 0.45)