pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
}
code.hljs {
  padding: 3px 5px;
}
.hljs {
  color: #abb2bf;
  background: #282c34;
}
.hljs-keyword,
.hljs-operator,
.hljs-pattern-match {
  color: #f92672;
}
.hljs-pattern-match .hljs-constructor,
.hljs-function {
  color: #61aeee;
}
.hljs-function .hljs-params {
  color: #a6e22e;
}
.hljs-function .hljs-params .hljs-typing {
  color: #fd971f;
}
.hljs-module-access .hljs-module {
  color: #7e57c2;
}
.hljs-constructor {
  color: #e2b93d;
}
.hljs-constructor .hljs-string {
  color: #9ccc65;
}
.hljs-comment,
.hljs-quote {
  color: #b18eb1;
  font-style: italic;
}
.hljs-doctag,
.hljs-formula {
  color: #c678dd;
}
.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst {
  color: #e06c75;
}
.hljs-literal {
  color: #56b6c2;
}
.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta .hljs-string {
  color: #98c379;
}
.hljs-built_in,
.hljs-title.class_,
.hljs-class .hljs-title {
  color: #e6c07b;
}
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number {
  color: #d19a66;
}
.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title {
  color: #61aeee;
}
.hljs-emphasis {
  font-style: italic;
}
.hljs-strong {
  font-weight: bold;
}
.hljs-link {
  text-decoration: underline;
}

	.hero-quickstart {
		transition-property: color, background-color, border-color, box-shadow, transform;
		transition-duration: 150ms;
		transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
	}

	.hero-quickstart:active {
		transform: scale(0.97);
	}

	@media (prefers-reduced-motion: reduce) {
		.hero-quickstart {
			transition: none;
		}

		.hero-quickstart:active {
			transform: none;
		}
	}

	.hero-install-glass {
		backdrop-filter: blur(1px);
		background: rgb(255 255 255 / 80%);
		box-shadow:
			0 18px 38px rgb(15 23 42 / 8%),
			0 0 24px rgb(255 255 255 / 24%);
		isolation: isolate;
		overflow: hidden;
		position: relative;
	}

	.hero-install-glass::before {
		background: rgb(100 116 139 / 22%);
		border-radius: inherit;
		content: "";
		inset: 0;
		-webkit-mask:
			linear-gradient(#fff 0 0) content-box,
			linear-gradient(#fff 0 0);
		-webkit-mask-composite:
			xor;
		        -webkit-mask:
			linear-gradient(#fff 0 0) content-box,
			linear-gradient(#fff 0 0);
		        -webkit-mask-composite:
			xor;
		                mask:
			linear-gradient(#fff 0 0) content-box exclude,
			linear-gradient(#fff 0 0);
		padding: 1px;
		pointer-events: none;
		position: absolute;
		z-index: 0;
	}

	.hero-install-glass::after {
		background: radial-gradient(
			150% 120% at 22% 32%,
			rgb(255 255 255 / 22%) 0%,
			rgb(255 255 255 / 8%) 38%,
			transparent 72%
		);
		border-radius: inherit;
		box-shadow:
			inset 0 1px rgb(255 255 255 / 55%),
			inset 0 -18px 32px rgb(15 23 42 / 5%),
			inset 0 22px 38px rgb(255 255 255 / 12%);
		content: "";
		inset: 0;
		mix-blend-mode: screen;
		opacity: 0.65;
		pointer-events: none;
		position: absolute;
		z-index: 0;
	}

	.hero-install-glass > * {
		position: relative;
		z-index: 1;
	}

	.hero-contrast-copy.svelte-11cf2sh {
		filter: drop-shadow(0 0 2px rgb(255 255 255 / 95%)) drop-shadow(0 0 5px rgb(255 255 255 / 75%));
	}

	@media (min-width: 1280px) {
		.hero-art.svelte-11cf2sh {
			/* Lower the ribbon linearly from -4rem at xl to -7rem at 2xl, then hold that offset. */
			bottom: clamp(-7rem, calc(11rem - 18.75vw), -4rem);
		}
	}

	@media (min-width: 1536px) {
		.hero-art.svelte-11cf2sh {
			/* Put the fade in a 5% bleed beyond each edge of the original 1536px viewport. */
			--hero-fade-extension: 76.8px;
			height: 864px;
			width: 1689.6px;
			--hero-edge-fade: linear-gradient(
				in oklch to right,
				oklch(0% 0 0 / 0) 0,
				oklch(0% 0 0 / 0.0086) calc(var(--hero-fade-extension) * 0.1),
				oklch(0% 0 0 / 0.0579) calc(var(--hero-fade-extension) * 0.2),
				oklch(0% 0 0 / 0.1631) calc(var(--hero-fade-extension) * 0.3),
				oklch(0% 0 0 / 0.3174) calc(var(--hero-fade-extension) * 0.4),
				oklch(0% 0 0 / 0.5) calc(var(--hero-fade-extension) * 0.5),
				oklch(0% 0 0 / 0.6826) calc(var(--hero-fade-extension) * 0.6),
				oklch(0% 0 0 / 0.8369) calc(var(--hero-fade-extension) * 0.7),
				oklch(0% 0 0 / 0.9421) calc(var(--hero-fade-extension) * 0.8),
				oklch(0% 0 0 / 0.9914) calc(var(--hero-fade-extension) * 0.9),
				oklch(0% 0 0) var(--hero-fade-extension),
				oklch(0% 0 0) calc(100% - var(--hero-fade-extension)),
				oklch(0% 0 0 / 0.9914) calc(100% - var(--hero-fade-extension) * 0.9),
				oklch(0% 0 0 / 0.9421) calc(100% - var(--hero-fade-extension) * 0.8),
				oklch(0% 0 0 / 0.8369) calc(100% - var(--hero-fade-extension) * 0.7),
				oklch(0% 0 0 / 0.6826) calc(100% - var(--hero-fade-extension) * 0.6),
				oklch(0% 0 0 / 0.5) calc(100% - var(--hero-fade-extension) * 0.5),
				oklch(0% 0 0 / 0.3174) calc(100% - var(--hero-fade-extension) * 0.4),
				oklch(0% 0 0 / 0.1631) calc(100% - var(--hero-fade-extension) * 0.3),
				oklch(0% 0 0 / 0.0579) calc(100% - var(--hero-fade-extension) * 0.2),
				oklch(0% 0 0 / 0.0086) calc(100% - var(--hero-fade-extension) * 0.1),
				oklch(0% 0 0 / 0) 100%
			);
			-webkit-mask-image: var(--hero-edge-fade);
			mask-image: var(--hero-edge-fade);
		}
	}