diff --git a/css/style.css b/css/style.css
index 1342a0e..63ee3a3 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1606,10 +1606,8 @@ footer.footer-modern a:hover {
 	border-radius: 50%;
 	background: var(--accent);
 	color: var(--accent-contrast);
-	font-size: 1.25rem;
-	display: flex;
-	align-items: center;
-	justify-content: center;
+	display: grid;
+	place-items: center;
 	cursor: pointer;
 	box-shadow: var(--shadow-md);
 	opacity: 0;
@@ -1629,15 +1627,10 @@ footer.footer-modern a:hover {
 	background: var(--accent-hover);
 }
 
-/* The <i> fills the button and flex-centres its ::before glyph, so neither
-   Bootstrap Icons' vertical-align:-.125em nor glyph side-bearing can offset it */
-.back-to-top i {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 100%;
-	height: 100%;
-	line-height: 1;
+/* Inline SVG arrow — centred in its own viewBox, so no font baseline/bearing
+   offsets. grid place-items on the button does the rest. */
+.back-to-top svg {
+	display: block;
 }
 
 /* ========================================
diff --git a/js/blowdit.js b/js/blowdit.js
index d38543d..ae4d4df 100644
--- a/js/blowdit.js
+++ b/js/blowdit.js
@@ -644,7 +644,9 @@
 		btn.type = 'button';
 		btn.className = 'back-to-top';
 		btn.setAttribute('aria-label', T.backToTop);
-		btn.innerHTML = '<i class="bi bi-arrow-up" aria-hidden="true"></i>';
+		btn.innerHTML = '<svg viewBox="0 0 24 24" width="20" height="20" fill="none" ' +
+			'stroke="currentColor" stroke-width="2" stroke-linecap="round" ' +
+			'stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg>';
 		document.body.appendChild(btn);
 
 		btn.addEventListener('click', function () {