diff --git a/docs/chapters/control/content.en-GB.md b/docs/chapters/control/content.en-GB.md
index 77ced803..f186175d 100644
--- a/docs/chapters/control/content.en-GB.md
+++ b/docs/chapters/control/content.en-GB.md
@@ -60,7 +60,7 @@ function Bezier(n,t,w[]):
   return sum
 ```
 
-And now for the extremely optimized versions:
+And now for the optimized versions:
 
 ```
 function Bezier(2,t,w[]):
diff --git a/docs/chapters/control/lerp.js b/docs/chapters/control/lerp.js
index 030aecfa..ab20edc9 100644
--- a/docs/chapters/control/lerp.js
+++ b/docs/chapters/control/lerp.js
@@ -57,7 +57,7 @@ draw() {
 
 drawHighlight() {
     let c = screenToWorld({
-        x: map(this.position, 0, 1, -10, this.width + 10),
+        x: map(this.position, -0.1, 1.1, 0, this.width),
         y: this.height/2
     });
 
diff --git a/docs/images/chapters/arclength/4b5d220d02b08f6c9aa19389255ef8bb.png b/docs/images/chapters/arclength/4b5d220d02b08f6c9aa19389255ef8bb.png
index 98508780..b5d26f69 100644
Binary files a/docs/images/chapters/arclength/4b5d220d02b08f6c9aa19389255ef8bb.png and b/docs/images/chapters/arclength/4b5d220d02b08f6c9aa19389255ef8bb.png differ
diff --git a/docs/images/chapters/arclength/4bffba7dda2a3556cf5b2ae7392083c6.png b/docs/images/chapters/arclength/4bffba7dda2a3556cf5b2ae7392083c6.png
index 031f5d45..3803a718 100644
Binary files a/docs/images/chapters/arclength/4bffba7dda2a3556cf5b2ae7392083c6.png and b/docs/images/chapters/arclength/4bffba7dda2a3556cf5b2ae7392083c6.png differ
diff --git a/docs/images/chapters/arclength/dc74a2f2da19470b8d721ece5f3ce268.png b/docs/images/chapters/arclength/dc74a2f2da19470b8d721ece5f3ce268.png
index cb152f45..260e5240 100644
Binary files a/docs/images/chapters/arclength/dc74a2f2da19470b8d721ece5f3ce268.png and b/docs/images/chapters/arclength/dc74a2f2da19470b8d721ece5f3ce268.png differ
diff --git a/docs/images/chapters/control/71d891b569460c79765670d3f49d2da9.png b/docs/images/chapters/control/42328a6806cce466a84762d24a0bf7f2.png
similarity index 100%
rename from docs/images/chapters/control/71d891b569460c79765670d3f49d2da9.png
rename to docs/images/chapters/control/42328a6806cce466a84762d24a0bf7f2.png
diff --git a/docs/images/chapters/control/2cc2f0127510f2700656c2f894b36674.png b/docs/images/chapters/control/50ae7279f2827b557f76379c80d00a83.png
similarity index 100%
rename from docs/images/chapters/control/2cc2f0127510f2700656c2f894b36674.png
rename to docs/images/chapters/control/50ae7279f2827b557f76379c80d00a83.png
diff --git a/docs/images/chapters/control/3b627846198c0cb3c542fe13cb923029.png b/docs/images/chapters/control/d77c40cdea1037003e9d8aafea57f9a2.png
similarity index 100%
rename from docs/images/chapters/control/3b627846198c0cb3c542fe13cb923029.png
rename to docs/images/chapters/control/d77c40cdea1037003e9d8aafea57f9a2.png
diff --git a/docs/images/chapters/reordering/71f47629388901b821976e034be159e4.png b/docs/images/chapters/reordering/71f47629388901b821976e034be159e4.png
index 4eca9278..0450a9ec 100644
Binary files a/docs/images/chapters/reordering/71f47629388901b821976e034be159e4.png and b/docs/images/chapters/reordering/71f47629388901b821976e034be159e4.png differ
diff --git a/docs/index.html b/docs/index.html
index ca812916..cf0a30ac 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -682,7 +682,7 @@ function Bezier(3,t):
 						<graphics-element title="Quadratic interpolations" width="275" height="275" src="./chapters/control/lerp.js" data-degree="3">
 							<fallback-image>
 								<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-								<img width="275px" height="275px" src="images\chapters\control\71d891b569460c79765670d3f49d2da9.png" />
+								<img width="275px" height="275px" src="images\chapters\control\42328a6806cce466a84762d24a0bf7f2.png" />
 								<label>Quadratic interpolations</label>
 							</fallback-image>
 							<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
@@ -691,7 +691,7 @@ function Bezier(3,t):
 						<graphics-element title="Cubic interpolations" width="275" height="275" src="./chapters/control/lerp.js" data-degree="4">
 							<fallback-image>
 								<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-								<img width="275px" height="275px" src="images\chapters\control\3b627846198c0cb3c542fe13cb923029.png" />
+								<img width="275px" height="275px" src="images\chapters\control\d77c40cdea1037003e9d8aafea57f9a2.png" />
 								<label>Cubic interpolations</label>
 							</fallback-image>
 							<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
@@ -700,7 +700,7 @@ function Bezier(3,t):
 						<graphics-element title="15th degree interpolations" width="275" height="275" src="./chapters/control/lerp.js" data-degree="15">
 							<fallback-image>
 								<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-								<img width="275px" height="275px" src="images\chapters\control\2cc2f0127510f2700656c2f894b36674.png" />
+								<img width="275px" height="275px" src="images\chapters\control\50ae7279f2827b557f76379c80d00a83.png" />
 								<label>15th degree interpolations</label>
 							</fallback-image>
 							<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
@@ -745,7 +745,7 @@ function Bezier(3,t):
   for(k=0; k&lt;=n; k++):
     sum += w[k] * binomial(n,k) * (1-t)^(n-k) * t^(k)
   return sum</code></pre>
-						<p>And now for the extremely optimized versions:</p>
+						<p>And now for the optimized versions:</p>
 						<pre><code>function Bezier(2,t,w[]):
   t2 = t * t
   mt = 1-t
diff --git a/docs/ja-JP/index.html b/docs/ja-JP/index.html
index 4cec0e1a..a38eb186 100644
--- a/docs/ja-JP/index.html
+++ b/docs/ja-JP/index.html
@@ -602,7 +602,7 @@ function Bezier(3,t):
 						<graphics-element title="2次の補間" width="275" height="275" src="./chapters/control/lerp.js" data-degree="3">
 							<fallback-image>
 								<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-								<img width="275px" height="275px" src="images\chapters\control\71d891b569460c79765670d3f49d2da9.png" />
+								<img width="275px" height="275px" src="images\chapters\control\42328a6806cce466a84762d24a0bf7f2.png" />
 								<label>2次の補間</label>
 							</fallback-image>
 							<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
@@ -611,7 +611,7 @@ function Bezier(3,t):
 						<graphics-element title="3次の補間" width="275" height="275" src="./chapters/control/lerp.js" data-degree="4">
 							<fallback-image>
 								<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-								<img width="275px" height="275px" src="images\chapters\control\3b627846198c0cb3c542fe13cb923029.png" />
+								<img width="275px" height="275px" src="images\chapters\control\d77c40cdea1037003e9d8aafea57f9a2.png" />
 								<label>3次の補間</label>
 							</fallback-image>
 							<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
@@ -620,7 +620,7 @@ function Bezier(3,t):
 						<graphics-element title="15次の補間" width="275" height="275" src="./chapters/control/lerp.js" data-degree="15">
 							<fallback-image>
 								<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-								<img width="275px" height="275px" src="images\chapters\control\2cc2f0127510f2700656c2f894b36674.png" />
+								<img width="275px" height="275px" src="images\chapters\control\50ae7279f2827b557f76379c80d00a83.png" />
 								<label>15次の補間</label>
 							</fallback-image>
 							<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
diff --git a/docs/placeholder-style.css b/docs/placeholder-style.css
index bf1aa241..380d61b0 100644
--- a/docs/placeholder-style.css
+++ b/docs/placeholder-style.css
@@ -205,20 +205,22 @@ pre img.LaTeX.SVG {
 
 pre {
   display: inline-block;
-  margin-left: 1em;
+  margin-left: 0;
   background-color: var(--code-block-color);
   padding: 0.5em;
   border: 1px dotted gray;
 }
 
-code {
-  position: relative;
-  font-family: monospace;
-  font-size: 0.9rem;
+@media screen and (min-width: 768px) {
+  pre { margin-left: 1em; }
 }
 
-p code {
+
+code {
   font-family: monospace;
+}
+
+li code, p code {
   display: inline-block;
   border: 1px solid #DDD;
   border-radius: 5px;
diff --git a/docs/zh-CN/index.html b/docs/zh-CN/index.html
index d0d96d20..fcd57e40 100644
--- a/docs/zh-CN/index.html
+++ b/docs/zh-CN/index.html
@@ -572,7 +572,7 @@ function Bezier(3,t):
 						<graphics-element title="二次插值" width="275" height="275" src="./chapters/control/lerp.js" data-degree="3">
 							<fallback-image>
 								<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-								<img width="275px" height="275px" src="images\chapters\control\71d891b569460c79765670d3f49d2da9.png" />
+								<img width="275px" height="275px" src="images\chapters\control\42328a6806cce466a84762d24a0bf7f2.png" />
 								<label>二次插值</label>
 							</fallback-image>
 							<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
@@ -581,7 +581,7 @@ function Bezier(3,t):
 						<graphics-element title="三次插值" width="275" height="275" src="./chapters/control/lerp.js" data-degree="4">
 							<fallback-image>
 								<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-								<img width="275px" height="275px" src="images\chapters\control\3b627846198c0cb3c542fe13cb923029.png" />
+								<img width="275px" height="275px" src="images\chapters\control\d77c40cdea1037003e9d8aafea57f9a2.png" />
 								<label>三次插值</label>
 							</fallback-image>
 							<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
@@ -590,7 +590,7 @@ function Bezier(3,t):
 						<graphics-element title="15次插值" width="275" height="275" src="./chapters/control/lerp.js" data-degree="15">
 							<fallback-image>
 								<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-								<img width="275px" height="275px" src="images\chapters\control\2cc2f0127510f2700656c2f894b36674.png" />
+								<img width="275px" height="275px" src="images\chapters\control\50ae7279f2827b557f76379c80d00a83.png" />
 								<label>15次插值</label>
 							</fallback-image>
 							<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />