diff --git a/new/includes/examples/custom-ca.md b/new/includes/examples/custom-ca.md
new file mode 100644
index 0000000..4c139c3
--- /dev/null
+++ b/new/includes/examples/custom-ca.md
@@ -0,0 +1,26 @@
+<script>
+document.addEventListener("DOMContentLoaded", (event) => {
+	window.$('.ex-custom-ca pre.chroma').classList.add('light');
+});
+</script>
+
+<div class="ex-custom-ca">
+
+```caddy
+{
+	pki {
+		ca corporate {
+			name "Our Corporation Authority"
+		}
+	}
+}
+
+internal.example.com {
+	# ACME endpoint: /acme/corporate/directory
+	acme_server {
+		ca corporate
+	}
+}
+```
+
+</div>
diff --git a/new/includes/examples/file-server.md b/new/includes/examples/file-server.md
new file mode 100644
index 0000000..f12836b
--- /dev/null
+++ b/new/includes/examples/file-server.md
@@ -0,0 +1,63 @@
+<script>
+document.addEventListener("DOMContentLoaded", (event) => {
+	let startElement, endElement;
+
+	startElement = findWithContent('.ex-fs pre.chroma code span.line', 'file_server /downloads/* {');
+	endElement = findNextText(startElement, '}');
+	wrapRangeWithSpan(startElement, endElement, 'rollover-compress rollover-blue');
+
+	startElement = findWithContent('.ex-fs pre.chroma code span', 'encode');
+	endElement = findNextText(startElement, 'gzip');
+	wrapRangeWithSpan(startElement, endElement, 'rollover-compress rollover-blue');
+
+	startElement = findWithContent('.ex-fs pre.chroma code span.line', 'file_server /database/* {');
+	endElement = findNextText(startElement, '}');
+	wrapRangeWithSpan(startElement, endElement, 'rollover-vfs rollover-green');
+
+	startElement = findWithContent('.ex-fs pre.chroma code span.line', 'file_server /embedded/* {');
+	endElement = findNextText(startElement, '}');
+	wrapRangeWithSpan(startElement, endElement, 'rollover-vfs rollover-green');
+
+	startElement = findWithContent('.ex-fs pre.chroma code span', '# (Range/Etag/etc. all work without extra config)');
+	wrapRangeWithSpan(startElement, startElement, 'rollover-range rollover-yellow');
+
+	startElement = findWithContent('.ex-fs pre.chroma code span', 'file_server');
+	endElement = findNextText(startElement, 'browse');
+	wrapRangeWithSpan(startElement, endElement, 'rollover-browse rollover-purple');
+
+	window.$('.ex-fs pre.chroma').classList.add('light');
+});
+</script>
+
+<div class="ex-fs">
+
+```caddy
+example.com
+
+root * /var/www
+
+# Serve precompressed files if present
+file_server /downloads/* {
+	precompressed gzip zstd br
+}
+
+# Compress everything else that would benefit
+encode zstd gzip
+
+# Get files from a database
+file_server /database/* {
+	fs sqlite data.sql 
+}
+
+# Get files from within the Caddy binary
+file_server /embedded/* {
+	fs embedded
+}
+
+# (Range/Etag/etc. all work without extra config)
+
+# Serve static site with directory listings as needed
+file_server browse
+```
+
+</div>
diff --git a/new/includes/examples/json-automate-certs.md b/new/includes/examples/json-automate-certs.md
new file mode 100644
index 0000000..e4786f7
--- /dev/null
+++ b/new/includes/examples/json-automate-certs.md
@@ -0,0 +1,25 @@
+<script>
+document.addEventListener("DOMContentLoaded", (event) => {
+	window.$('.ex-json-automate-certs pre.chroma').classList.add('light');
+});
+</script>
+
+<div class="ex-json-automate-certs">
+
+```json
+{
+  "apps": {
+    "tls": {
+      "certificates": {
+        "automate": [
+          "example.com",
+          "sub.example.com",
+          "example.net"
+        ]
+      }
+    }
+  }
+}
+```
+
+</div>
diff --git a/new/includes/examples/local-https.md b/new/includes/examples/local-https.md
new file mode 100644
index 0000000..a3dd713
--- /dev/null
+++ b/new/includes/examples/local-https.md
@@ -0,0 +1,23 @@
+<script>
+document.addEventListener("DOMContentLoaded", (event) => {
+	window.$('.ex-local-https pre.chroma').classList.add('light');
+});
+</script>
+
+<div class="ex-local-https">
+
+```caddy
+localhost {
+	respond "Hello from HTTPS!"
+}
+
+192.168.1.10 {
+	respond "Also HTTPS!"
+}
+
+http://localhost {
+	respond "Plain HTTP"
+}
+```
+
+</div>
diff --git a/new/includes/examples/proxy.md b/new/includes/examples/proxy.md
new file mode 100644
index 0000000..9f6b035
--- /dev/null
+++ b/new/includes/examples/proxy.md
@@ -0,0 +1,51 @@
+<script>
+document.addEventListener("DOMContentLoaded", (event) => {
+	let startElement, endElement;
+
+	startElement = findWithContent('.ex-proxy pre.chroma code span', 'php_fastcgi');
+	endElement = findNextText(startElement, '9000');
+	wrapRangeWithSpan(startElement, endElement, 'rollover-php rollover-green');
+
+	startElement = findWithContent('.ex-proxy pre.chroma code span.line', 'reverse_proxy /api/* {');
+	endElement = findNextText(startElement, '}');
+	wrapRangeWithSpan(startElement, endElement, 'rollover-dynamic-backends rollover-purple');
+
+	startElement = findWithContent('.ex-proxy pre.chroma code span.line', 'reverse_proxy /service/* {');
+	endElement = findNextText(startElement, '}');
+	wrapRangeWithSpan(startElement, endElement, 'rollover-ha rollover-blue');
+});
+</script>
+
+<div class="ex-proxy">
+
+```caddy
+example.com
+
+# Serve PHP sites
+handle /blog/* {
+	root * /var/www/wordpress
+	php_fastcgi localhost:9000
+	file_server
+}
+
+# Proxy an autoscaling API with dynamic backends
+reverse_proxy /api/* {
+	dynamic srv _api._tcp.example.com
+}
+
+# Proxy a compute-heavy distributed service
+# with load balancing and health checks
+reverse_proxy /service/* {
+	to              10.0.1.1:80 10.0.1.2:80 10.0.1.3:80
+	lb_policy       least_conn
+	lb_try_duration 10s
+	fail_duration   5s
+}
+
+# Proxy everything else to an HTTPS upstream
+reverse_proxy https://service.example.com {
+	header_up Host {upstream_hostport}
+}
+```
+
+</div>
diff --git a/new/includes/examples/website-caddyfile.md b/new/includes/examples/website-caddyfile.md
new file mode 100644
index 0000000..966a878
--- /dev/null
+++ b/new/includes/examples/website-caddyfile.md
@@ -0,0 +1,25 @@
+<script>
+document.addEventListener("DOMContentLoaded", (event) => {
+	window.$('.ex-website-caddyfile pre.chroma').classList.add('light');
+});
+</script>
+
+<div class="ex-website-caddyfile">
+
+```caddy
+caddyserver.com
+
+root * src
+
+file_server
+templates # markdown & syntax highlighting!
+encode zstd gzip
+
+redir   /docs/json   /docs/json/
+rewrite /docs/json/* /docs/json/index.html
+rewrite /docs/*      /docs/index.html
+
+reverse_proxy /api/* localhost:9002
+```
+
+</div>
diff --git a/new/index.html b/new/index.html
index 6a9958c..ab82483 100644
--- a/new/index.html
+++ b/new/index.html
@@ -138,7 +138,7 @@
 					<span class="site-on">site on</span><br>
 					HTTPS
 				</div>
-				<h2>
+				<h2 id="every-site-https">
 					<b>By default, </b>Caddy <b>automatically obtains</b> and <b>renews</b> TLS certificates for <b>all your sites.</b>
 				</h2>
 
@@ -175,7 +175,7 @@
 			<section class="light">
 				<div class="section-upset">
 					<div class="wrapper">
-						<h2>The <b>most advanced</b> HTTPS server <b>in the world</b></h2>
+						<h2 id="most-advanced">The <b>most advanced</b> HTTPS server <b>in the world</b></h2>
 					</div>
 				</div>
 				<div class="wrapper">
@@ -220,7 +220,7 @@
 					</div>
 
 					<div class="demobox">
-						<h2>Experience it</h2>
+						<h2 id="on-demand-demo">Experience it</h2>
 						<p>
 							<b>Discover Caddy's automagic HTTPS features.</b>
 						</p>
@@ -263,7 +263,7 @@
 			<section class="diagonal up light gray feature">
 				<div class="wrapper">
 
-					<h2>Deploy your own PKI with Caddy</h2>
+					<h2 id="your-own-pki">Deploy your own PKI with Caddy</h2>
 					<p>
 						Not only is Caddy the industry leader in certificate automation, it also sports a fully-featured PKI suite for your own fully-automated internal PKI and private CAs.
 					</p>
@@ -278,17 +278,7 @@
 					<div class="asides">
 						<div>
 							<div class="display left">
-								<code class="light">localhost {
-	respond "Hello from HTTPS!"
-}
-
-192.168.1.10 {
-	respond "Also HTTPS!"
-}
-
-http://localhost {
-	respond "Plain HTTP"
-}</code>
+								{{ markdown (include "/includes/examples/local-https.md") }}
 							</div>
 						</div>
 						<div>
@@ -312,55 +302,16 @@ http://localhost {
 						</div>
 						<div>
 							<div class="display right">
-								<code class="light">{
-	pki {
-		ca corporate {
-			name "Our Corporation Authority"
-		}
-	}
-}
-
-internal.example.com {
-	<span class="comment"># ACME endpoint: /acme/corporate/directory</span>
-	acme_server {
-		ca corporate
-	}
-}</code></div>
-						<!-- <div class="display right">
-								<code class="light">{
-	pki {
-		ca our_own {
-			name "Our Own Authority"
-		}
-	}
-}
-
-internal.example.com {
-	tls {
-		issuer internal {
-			ca our_own
-		}
-	}
-}</code></div> -->
+								{{ markdown (include "/includes/examples/custom-ca.md") }}
+							</div>
 						</div>
 					</div>
 
 					<div class="asides">
 						<div>
 							<div class="display left">
-								<code class="light">{
-  "apps": {
-    "tls": {
-      "certificates": {
-        "automate": [
-          "example.com",
-		  "sub.example.com",
-          "example.net"
-        ]
-      }
-    }
-  }
-}</code></div>
+								{{ markdown (include "/includes/examples/json-automate-certs.md") }}
+							</div>
 						</div>
 						<div>
 							<h3 class="green">Keep certificates renewed</h3>
@@ -391,7 +342,7 @@ internal.example.com {
 
 			<section class="diagonal down dark feature">
 				<div class="wrapper">
-					<h2>A forward-thinking reverse proxy</h2>
+					<h2 id="reverse-proxy">A forward-thinking reverse proxy</h2>
 					<p>
 						Caddy's proxy was designed to be as forward-compatible as possible and has major batteries included: load balancing, active and passive health checks, dynamic upstreams, retries, pluggable transports, and of course, best-in-class TLS security.
 					</p>
@@ -419,34 +370,8 @@ internal.example.com {
 							</div>
 						</div>
 						<div>
-							<div class="display right">
-								<code class="dark">example.com
-
-<span class="comment"># Serve PHP sites</span>
-handle /blog/* {
-	root * /var/www/wordpress
-	<span class="rollover-php rollover-green">php_fastcgi localhost:9000</span>
-	file_server
-}
-
-<span class="comment"># Proxy an autoscaling API with dynamic backends</span>
-<span class="rollover-dynamic-backends rollover-purple">reverse_proxy /api/* {
-	dynamic srv _api._tcp.example.com
-}</span>
-
-<span class="comment"># Proxy a compute-heavy distributed service
-# with load balancing and health checks</span>
-<span class="rollover-ha rollover-blue">reverse_proxy /service/* {
-	to              10.0.1.1:80 10.0.1.2:80 10.0.1.3:80
-	lb_policy       least_conn
-	lb_try_duration 10s
-	fail_duration   5s
-}</span>
-
-<span class="comment"># Proxy everything else to an HTTPS upstream</span>
-reverse_proxy https://service.example.com {
-	header_up Host {upstream_hostport}
-}<div class="blinking"></div></code>
+							<div class="display right dark">
+								{{ markdown (include "/includes/examples/proxy.md") }}
 							</div>
 						</div>
 					</div>
@@ -482,7 +407,7 @@ reverse_proxy https://service.example.com {
 					</div>
 
 
-					<h2>Production-grade static file server</h2>
+					<h2 id="file-server">Production-grade static file server</h2>
 					<p>
 						Serving static files is a tried-and-true method of delivering sites to numerous clients efficiently. Caddy has a robust file server that can be combined with other middleware features for the ultimate effortless website.
 					</p>
@@ -516,33 +441,8 @@ reverse_proxy https://service.example.com {
 							</div>
 						</div>
 						<div>
-							<div class="display right">
-								<code class="light">example.com
-
-root * /var/www
-
-<span class="comment"># Serve precompressed files if present</span>
-<span class="rollover-compress rollover-blue">file_server /downloads/* {
-	precompressed gzip zstd br
-}</span>
-
-<span class="comment"># Compress everything else that would benefit</span>
-<span class="rollover-compress rollover-blue">encode zstd gzip</span>
-
-<span class="comment"># Get files from a database</span>
-<span class="rollover-vfs rollover-green">file_server /database/* {
-	fs sqlite data.sql 
-}</span>
-
-<span class="comment"># Get files from within the Caddy binary</span>
-<span class="rollover-vfs rollover-green">file_server /embedded/* {
-	fs embedded
-}</span>
-
-<span class="comment rollover-range rollover-yellow"># (Range/Etag/etc. all work without extra config)</span>
-
-<span class="comment"># Serve static site with directory listings as needed</span>
-<span class="rollover-browse rollover-purple">file_server browse</span></code>
+							<div class="display right light">
+								{{ markdown (include "/includes/examples/file-server.md") }}
 							</div>
 						</div>
 					</div>
@@ -560,7 +460,7 @@ root * /var/www
 
 			<section class="light feature">
 				<div class="wrapper">
-					<h2>Flexible configuration compatible with any workflow</h2>
+					<h2 id="flexible-config">Flexible configuration compatible with any workflow</h2>
 					<p>
 						Configure your server your way. Caddy's native configuration format is JSON, and with Caddy's config adapters, you can use any config format you prefer. All configuration is posted through a RESTful admin API, and Caddy's CLI helps you work with config files easily.
 					</p>
@@ -610,20 +510,8 @@ $ curl localhost:2019/config/ | jq<div class="blinking"></div></code>
 							</p>
 						</div>
 						<div>
-							<div class="display right">
-								<code class="light">caddyserver.com
-	
-root * src
-
-file_server
-templates
-encode zstd gzip
-
-redir   /docs/json   /docs/json/
-rewrite /docs/json/* /docs/json/index.html
-rewrite /docs/*      /docs/index.html
-
-reverse_proxy /api/* localhost:9002</code>
+							<div class="display right light">
+								{{ markdown (include "/includes/examples/website-caddyfile.md") }}
 								<div class="caption">Actual config used by this site.</div>
 							</div>
 						</div>
@@ -689,7 +577,7 @@ reverse_proxy /api/* localhost:9002</code>
 
 			<section class="diagonal up light gray feature">
 				<div class="wrapper">
-					<h2>Unparalleled extensibility</h2>
+					<h2 id="extensibility">Unparalleled extensibility</h2>
 					<p>
 						Caddy is the only server in the world with its novel, modular architecture. At its core, Caddy is a configuration manager that runs apps like an HTTP server, internal certificate authority, TLS certificate manager, process supervisor, and more.
 					</p>
@@ -722,7 +610,7 @@ reverse_proxy /api/* localhost:9002</code>
 
 			<section class="light feature">
 				<div class="wrapper">
-					<h2>The <span class="gold">gold standard</span> web server</h2>
+					<h2 id="gold-standard">The <span class="gold">gold standard</span> web server</h2>
 					<p>
 						Caddy has the most robust TLS stack on the market. With stronger memory safety guarantees than OpenSSL (Apache &amp; NGINX) and more advanced certificate automation logic than any other server or utility, Caddy keeps your sites online through problems when other servers... won't.
 					</p>
@@ -754,7 +642,7 @@ reverse_proxy /api/* localhost:9002</code>
 
 			<section class="light gray feature">
 				<div class="wrapper">
-					<h2>Recommended by experts</h2>
+					<h2 id="experts-recommend">Recommended by experts</h2>
 					<p>
 						Academic and industry experts recommend Caddy, which has been cited in peer-reviewed journals for its security defaults, best practices, and its uniquely advanced feature set.
 					</p>
diff --git a/new/resources/css/chroma.css b/new/resources/css/chroma.css
index 49d53a4..d0df757 100644
--- a/new/resources/css/chroma.css
+++ b/new/resources/css/chroma.css
@@ -9,8 +9,7 @@
 	Derived from http://ethanschoonover.com/solarized
 */
 .chroma {
-	/* background: linear-gradient(0deg, #f8fbfd 0%, #edf5fd 100%); */
-	background: linear-gradient(to bottom, #eff7f9, transparent);
+	background: linear-gradient(0deg, #f8fbfd 0%, #edf5fd 100%);
 	color: #254048;
 }
 .chroma .c { color: #93a1a1 } /* Comment */
@@ -88,75 +87,75 @@
 	Solarized Dark (High Contrast)
 	Derived from http://ethanschoonover.com/solarized
 */
-.dark .chroma {
+.dark .chroma:not(.light) {
 	background: linear-gradient(to bottom, #24454f, transparent);
 	color: #93a1a1;
 }
-.dark .chroma .c { color: #586e75 } /* Comment */
-.dark .chroma .err { color: #93a1a1 } /* Error */
-.dark .chroma .g { color: #93a1a1 } /* Generic */
-.dark .chroma .k { color: #76a507 } /* Keyword */
-.dark .chroma .l { color: #93a1a1 } /* Literal */
-.dark .chroma .n { color: #93a1a1 } /* Name */
-.dark .chroma .o { color: #76a507 } /* Operator */
-.dark .chroma .x { color: #ec662e } /* Other */
-.dark .chroma .p { color: #93a1a1 } /* Punctuation */
-.dark .chroma .cm { color: #586e75 } /* Comment.Multiline */
-.dark .chroma .cp { color: #76a507 } /* Comment.Preproc */
-.dark .chroma .c1 { color: #586e75 } /* Comment.Single */
-.dark .chroma .cs { color: #76a507 } /* Comment.Special */
-.dark .chroma .gd { color: #dc322f; background-color: #efdede } /* Generic.Deleted */
-.dark .chroma .ge { color: #93a1a1; font-style: italic } /* Generic.Emph */
-.dark .chroma .gr { color: #dc322f } /* Generic.Error */
-.dark .chroma .gh { color: #ec662e } /* Generic.Heading */
-.dark .chroma .gi { color: #76a507 } /* Generic.Inserted */
-.dark .chroma .go { color: #93a1a1 } /* Generic.Output */
-.dark .chroma .gp { color: #93a1a1 } /* Generic.Prompt */
-.dark .chroma .gs { color: #93a1a1; font-weight: bold } /* Generic.Strong */
-.dark .chroma .gu { color: #ec662e } /* Generic.Subheading */
-.dark .chroma .gt { color: #93a1a1 } /* Generic.Traceback */
-.dark .chroma .kc { color: #ec662e } /* Keyword.Constant */
-.dark .chroma .kd { color: #0090f5 } /* Keyword.Declaration */
-.dark .chroma .kn { color: #76a507 } /* Keyword.Namespace */
-.dark .chroma .kp { color: #76a507 } /* Keyword.Pseudo */
-.dark .chroma .kr { color: #0090f5 } /* Keyword.Reserved */
-.dark .chroma .kt { color: #dc322f } /* Keyword.Type */
-.dark .chroma .ld { color: #93a1a1 } /* Literal.Date */
-.dark .chroma .m { color: #09a598 } /* Literal.Number */
-.dark .chroma .s { color: #09a598 } /* Literal.String */
-.dark .chroma .na { color: #93a1a1 } /* Name.Attribute */
-.dark .chroma .nb { color: #B58900 } /* Name.Builtin */
-.dark .chroma .nc { color: #0090f5 } /* Name.Class */
-.dark .chroma .no { color: #ec662e } /* Name.Constant */
-.dark .chroma .nd { color: #0090f5 } /* Name.Decorator */
-.dark .chroma .ni { color: #ec662e } /* Name.Entity */
-.dark .chroma .ne { color: #ec662e } /* Name.Exception */
-.dark .chroma .nf { color: #0090f5 } /* Name.Function */
-.dark .chroma .nl { color: #93a1a1 } /* Name.Label */
-.dark .chroma .nn { color: #93a1a1 } /* Name.Namespace */
-.dark .chroma .nx { color: #93a1a1 } /* Name.Other */
-.dark .chroma .py { color: #93a1a1 } /* Name.Property */
-.dark .chroma .nt { color: #0090f5 } /* Name.Tag */
-.dark .chroma .nv { color: #0090f5 } /* Name.Variable */
-.dark .chroma .ow { color: #76a507 } /* Operator.Word */
-.dark .chroma .w { color: #93a1a1 } /* Text.Whitespace */
-.dark .chroma .mf { color: #09a598 } /* Literal.Number.Float */
-.dark .chroma .mh { color: #09a598 } /* Literal.Number.Hex */
-.dark .chroma .mi { color: #09a598 } /* Literal.Number.Integer */
-.dark .chroma .mo { color: #09a598 } /* Literal.Number.Oct */
-.dark .chroma .sb { color: #586e75 } /* Literal.String.Backtick */
-.dark .chroma .sc { color: #09a598 } /* Literal.String.Char */
-.dark .chroma .sd { color: #93a1a1 } /* Literal.String.Doc */
-.dark .chroma .s2 { color: #09a598 } /* Literal.String.Double */
-.dark .chroma .se { color: #ec662e } /* Literal.String.Escape */
-.dark .chroma .sh { color: #93a1a1 } /* Literal.String.Heredoc */
-.dark .chroma .si { color: #09a598 } /* Literal.String.Interpol */
-.dark .chroma .sx { color: #09a598 } /* Literal.String.Other */
-.dark .chroma .sr { color: #dc322f } /* Literal.String.Regex */
-.dark .chroma .s1 { color: #09a598 } /* Literal.String.Single */
-.dark .chroma .ss { color: #09a598 } /* Literal.String.Symbol */
-.dark .chroma .bp { color: #0090f5 } /* Name.Builtin.Pseudo */
-.dark .chroma .vc { color: #0090f5 } /* Name.Variable.Class */
-.dark .chroma .vg { color: #0090f5 } /* Name.Variable.Global */
-.dark .chroma .vi { color: #0090f5 } /* Name.Variable.Instance */
-.dark .chroma .il { color: #09a598 } /* Literal.Number.Integer.Long */
+.dark .chroma:not(.light) .c { color: #586e75 } /* Comment */
+.dark .chroma:not(.light) .err { color: #93a1a1 } /* Error */
+.dark .chroma:not(.light) .g { color: #93a1a1 } /* Generic */
+.dark .chroma:not(.light) .k { color: #76a507 } /* Keyword */
+.dark .chroma:not(.light) .l { color: #93a1a1 } /* Literal */
+.dark .chroma:not(.light) .n { color: #93a1a1 } /* Name */
+.dark .chroma:not(.light) .o { color: #76a507 } /* Operator */
+.dark .chroma:not(.light) .x { color: #ec662e } /* Other */
+.dark .chroma:not(.light) .p { color: #93a1a1 } /* Punctuation */
+.dark .chroma:not(.light) .cm { color: #586e75 } /* Comment.Multiline */
+.dark .chroma:not(.light) .cp { color: #76a507 } /* Comment.Preproc */
+.dark .chroma:not(.light) .c1 { color: #586e75 } /* Comment.Single */
+.dark .chroma:not(.light) .cs { color: #76a507 } /* Comment.Special */
+.dark .chroma:not(.light) .gd { color: #dc322f; background-color: #efdede } /* Generic.Deleted */
+.dark .chroma:not(.light) .ge { color: #93a1a1; font-style: italic } /* Generic.Emph */
+.dark .chroma:not(.light) .gr { color: #dc322f } /* Generic.Error */
+.dark .chroma:not(.light) .gh { color: #ec662e } /* Generic.Heading */
+.dark .chroma:not(.light) .gi { color: #76a507 } /* Generic.Inserted */
+.dark .chroma:not(.light) .go { color: #93a1a1 } /* Generic.Output */
+.dark .chroma:not(.light) .gp { color: #93a1a1 } /* Generic.Prompt */
+.dark .chroma:not(.light) .gs { color: #93a1a1; font-weight: bold } /* Generic.Strong */
+.dark .chroma:not(.light) .gu { color: #ec662e } /* Generic.Subheading */
+.dark .chroma:not(.light) .gt { color: #93a1a1 } /* Generic.Traceback */
+.dark .chroma:not(.light) .kc { color: #ec662e } /* Keyword.Constant */
+.dark .chroma:not(.light) .kd { color: #0090f5 } /* Keyword.Declaration */
+.dark .chroma:not(.light) .kn { color: #76a507 } /* Keyword.Namespace */
+.dark .chroma:not(.light) .kp { color: #76a507 } /* Keyword.Pseudo */
+.dark .chroma:not(.light) .kr { color: #0090f5 } /* Keyword.Reserved */
+.dark .chroma:not(.light) .kt { color: #dc322f } /* Keyword.Type */
+.dark .chroma:not(.light) .ld { color: #93a1a1 } /* Literal.Date */
+.dark .chroma:not(.light) .m { color: #09a598 } /* Literal.Number */
+.dark .chroma:not(.light) .s { color: #09a598 } /* Literal.String */
+.dark .chroma:not(.light) .na { color: #93a1a1 } /* Name.Attribute */
+.dark .chroma:not(.light) .nb { color: #B58900 } /* Name.Builtin */
+.dark .chroma:not(.light) .nc { color: #0090f5 } /* Name.Class */
+.dark .chroma:not(.light) .no { color: #ec662e } /* Name.Constant */
+.dark .chroma:not(.light) .nd { color: #0090f5 } /* Name.Decorator */
+.dark .chroma:not(.light) .ni { color: #ec662e } /* Name.Entity */
+.dark .chroma:not(.light) .ne { color: #ec662e } /* Name.Exception */
+.dark .chroma:not(.light) .nf { color: #0090f5 } /* Name.Function */
+.dark .chroma:not(.light) .nl { color: #93a1a1 } /* Name.Label */
+.dark .chroma:not(.light) .nn { color: #93a1a1 } /* Name.Namespace */
+.dark .chroma:not(.light) .nx { color: #93a1a1 } /* Name.Other */
+.dark .chroma:not(.light) .py { color: #93a1a1 } /* Name.Property */
+.dark .chroma:not(.light) .nt { color: #0090f5 } /* Name.Tag */
+.dark .chroma:not(.light) .nv { color: #0090f5 } /* Name.Variable */
+.dark .chroma:not(.light) .ow { color: #76a507 } /* Operator.Word */
+.dark .chroma:not(.light) .w { color: #93a1a1 } /* Text.Whitespace */
+.dark .chroma:not(.light) .mf { color: #09a598 } /* Literal.Number.Float */
+.dark .chroma:not(.light) .mh { color: #09a598 } /* Literal.Number.Hex */
+.dark .chroma:not(.light) .mi { color: #09a598 } /* Literal.Number.Integer */
+.dark .chroma:not(.light) .mo { color: #09a598 } /* Literal.Number.Oct */
+.dark .chroma:not(.light) .sb { color: #586e75 } /* Literal.String.Backtick */
+.dark .chroma:not(.light) .sc { color: #09a598 } /* Literal.String.Char */
+.dark .chroma:not(.light) .sd { color: #93a1a1 } /* Literal.String.Doc */
+.dark .chroma:not(.light) .s2 { color: #09a598 } /* Literal.String.Double */
+.dark .chroma:not(.light) .se { color: #ec662e } /* Literal.String.Escape */
+.dark .chroma:not(.light) .sh { color: #93a1a1 } /* Literal.String.Heredoc */
+.dark .chroma:not(.light) .si { color: #09a598 } /* Literal.String.Interpol */
+.dark .chroma:not(.light) .sx { color: #09a598 } /* Literal.String.Other */
+.dark .chroma:not(.light) .sr { color: #dc322f } /* Literal.String.Regex */
+.dark .chroma:not(.light) .s1 { color: #09a598 } /* Literal.String.Single */
+.dark .chroma:not(.light) .ss { color: #09a598 } /* Literal.String.Symbol */
+.dark .chroma:not(.light) .bp { color: #0090f5 } /* Name.Builtin.Pseudo */
+.dark .chroma:not(.light) .vc { color: #0090f5 } /* Name.Variable.Class */
+.dark .chroma:not(.light) .vg { color: #0090f5 } /* Name.Variable.Global */
+.dark .chroma:not(.light) .vi { color: #0090f5 } /* Name.Variable.Instance */
+.dark .chroma:not(.light) .il { color: #09a598 } /* Literal.Number.Integer.Long */
diff --git a/new/resources/css/home.css b/new/resources/css/home.css
index b610c82..959ceaf 100644
--- a/new/resources/css/home.css
+++ b/new/resources/css/home.css
@@ -200,12 +200,15 @@ div.ap-wrapper:fullscreen div.ap-player {
 	transition: background-color 250ms;
 }
 
-.rollover-green.show { background-color: #41e68fc7; }
-.rollover-purple.show { background-color: #a52fa59d; }
-.rollover-blue.show { background-color: #0a62aaa3; }
-.rollover-yellow.show { background-color: #ffcb50; }
-
+.dark .rollover-green.show { background-color: #41e68e2b; }
+.dark .rollover-purple.show { background-color: #a52fa55f; }
+.dark .rollover-blue.show { background-color: #0a62aa5b; }
+.dark .rollover-yellow.show { background-color: #ffcb5064; }
 
+.light .rollover-green.show { background-color: #41e68e4b; }
+.light .rollover-purple.show { background-color: #a52fa545; }
+.light .rollover-blue.show { background-color: #0a62aa3a; }
+.light .rollover-yellow.show { background-color: #ffcb5064; }
 
 
 
diff --git a/new/resources/css/marketing.css b/new/resources/css/marketing.css
index 432a175..30485fe 100644
--- a/new/resources/css/marketing.css
+++ b/new/resources/css/marketing.css
@@ -55,7 +55,7 @@ h1 .subheading b {
 
 p,
 h2 {
-	max-width: 850px;
+	max-width: 950px;
 }
 
 h2 {
diff --git a/new/resources/js/common.js b/new/resources/js/common.js
index cbcaf74..f5fcc7c 100644
--- a/new/resources/js/common.js
+++ b/new/resources/js/common.js
@@ -49,6 +49,63 @@ function cloneTemplate(tplSelector) {
 	// return document.importNode(elem.content, true);
 }
 
+// Find the first element matching a selector which contains the specified text
+function findWithContent(selector, text) {
+	const selected = document.querySelectorAll(selector);
+	let found = null;
+	selected.forEach(element => {
+		if (element.textContent.includes(text)) {
+			found = element;
+		}
+	});
+	return found;
+}
+
+// Find the next element containing the specified text
+function findNextText(startElement, nextText) {
+	let currentElement = startElement.nextSibling;
+	while (currentElement) {
+		if (currentElement.textContent.includes(nextText)) {
+			return currentElement;
+		}
+		currentElement = currentElement.nextSibling;
+	}
+	return null;
+}
+
+// Function to wrap the range between startElement and endElement in a new span
+function wrapRangeWithSpan(startElement, endElement, className) {
+    // Check if startElement and endElement are the same
+    if (startElement === endElement) {
+        const span = document.createElement('span');
+        span.className = className;
+        span.appendChild(startElement.cloneNode(true));
+        startElement.parentNode.replaceChild(span, startElement);
+        return span;
+    }
+
+    // Create a new span element
+    const span = document.createElement('span');
+    span.className = className;
+
+    // Reference the parent node of the common ancestor
+    const parent = startElement.parentNode;
+
+    // Iterate through siblings and wrap them in the span
+	const toRemove = [];
+    for (var node = startElement; node; node = node.nextSibling) {
+		var clonedNode = node.cloneNode(true);
+		span.appendChild(clonedNode);
+        if (node === endElement) {
+			parent.replaceChild(span, endElement);
+			toRemove.forEach(node => parent.removeChild(node));
+            break;
+        }
+		toRemove.push(node);
+    }
+
+    return span;
+}
 
 
 
@@ -130,4 +187,4 @@ on('mouseover', '.button:not(.cool), button:not(.cool)', (e) => {
 
 
 // immediately set the configured theme to avoid flash
-setTheme(getTheme());
\ No newline at end of file
+setTheme(getTheme());