diff --git a/content/demo/index.md b/content/demo/index.md
index 6c6b5a8..5d17843 100644
--- a/content/demo/index.md
+++ b/content/demo/index.md
@@ -237,6 +237,8 @@ Alright, this one doesn't simplify anything, it just adds a CRT-like effect arou
 
 {% end %}
 
+There's also a `cursor` class that you can add to a span with e.g. `█` character to simulate the terminal cursor. It doesn't work from inside Markdown code blocks though.
+
 ### Description List (`<dl>`)
 
 ```html
diff --git a/sass/_crt.scss b/sass/_crt.scss
index 1307278..d906b69 100644
--- a/sass/_crt.scss
+++ b/sass/_crt.scss
@@ -1,10 +1,6 @@
 .crt {
 	margin: 1rem 0 1rem;
-	box-shadow:
-		var(--edge-highlight),
-		0 0 0 0.0625rem var(--primary-color-alpha),
-		0 0.125rem 0.375rem 0.125rem var(--primary-color-alpha),
-		0 0.25rem 1.5rem 0.25rem var(--primary-color-alpha);
+	box-shadow: var(--edge-highlight), 0 0 0 0.0625rem var(--primary-color-alpha), 0 0.125rem 0.375rem 0.125rem var(--primary-color-alpha), 0 0.25rem 1.5rem 0.25rem var(--primary-color-alpha);
 	border-radius: var(--rounded-corner);
 	background: radial-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.85)), var(--primary-color);
 
@@ -18,10 +14,6 @@
 		text-shadow: var(--primary-color-alpha) 0 0 0.25rem, var(--primary-color) 0 0 0.75rem;
 
 		@keyframes flicker {
-			from {
-				opacity: 1;
-			}
-
 			25% {
 				opacity: 0.95;
 			}
@@ -38,10 +30,6 @@
 				opacity: 0.9;
 			}
 		}
-
-		@media (prefers-reduced-motion) {
-			animation: none;
-		}
 	}
 }
 
@@ -52,60 +40,38 @@
 	&::before {
 		display: block;
 		position: absolute;
-		top: 0;
-		left: 0;
 		z-index: 1;
-		animation: scanlines 0.25s linear infinite;
-		background: repeating-linear-gradient(to top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 0.0625rem, transparent 0.1875rem, transparent 0.25rem);
-		width: 100%;
-		height: calc(100% + 0.5rem);
+		animation: scanlines 0.1s linear infinite;
+		inset: 0;
+		background-image: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 0.125rem, transparent 0.125rem, transparent 0.25rem);
 		pointer-events: none;
 		content: "";
 
 		@keyframes scanlines {
-			from {
-				transform: translateY(-0.5rem);
-			}
-
 			to {
-				transform: translateY(0);
+				background-position-y: 0.25rem;
 			}
 		}
-
-		@media (prefers-reduced-motion) {
-			animation: none;
-		}
 	}
 
 	&::after {
 		display: block;
 		position: absolute;
-		bottom: 100%;
-		left: 0;
 		animation: scanline 5s linear infinite;
-		background: linear-gradient(to top, transparent 0%, var(--primary-color-alpha) 10%, transparent 100%);
-		width: 100%;
-		height: 8rem;
+		inset: 0;
+		background-image: linear-gradient(to bottom, transparent, var(--primary-color-alpha) 7rem, transparent 8rem);
+		background-size: auto 8rem;
+		background-repeat: no-repeat;
+		background-position-y: -8rem;
 		pointer-events: none;
 		content: "";
 
 		@keyframes scanline {
-			from {
-				bottom: 100%;
-			}
-
-			50% {
-				bottom: 100%;
-			}
-
+			50%,
 			to {
-				bottom: -8rem;
+				background-position-y: calc(100% + 8rem);
 			}
 		}
-
-		@media (prefers-reduced-motion) {
-			animation: none;
-		}
 	}
 }
 
@@ -113,20 +79,8 @@
 	animation: cursor-blink 1s infinite;
 
 	@keyframes cursor-blink {
-		from {
-			opacity: 1;
-		}
-
 		50% {
 			opacity: 0;
 		}
-
-		75% {
-			opacity: 1;
-		}
-	}
-
-	@media (prefers-reduced-motion) {
-		animation: none;
 	}
 }