.wrapper.svelte-wg7iil {
		--railway-color: #ff3a3d;
		--railway-color: var(--gameboy-purple);
		--railway-color: var(--primary-color);
		--railway-width: 6px;
		position: relative;
		width: 100%;
		height: 100%;
		transition: opacity 0.5s ease-in-out;
	}

	.wrapper.svelte-wg7iil:not(.ready) {
		opacity: 0;
	}

	.point.svelte-wg7iil {
		position: absolute;
		width: 20%;
		height: 20%;
		/* background-color: white; */
		box-shadow: inset 0px 0px 0px var(--railway-width) var(--railway-color);
		background: inherit;
		background-color: inherit;
		border-radius: 0px;
		transform: translate(-50%, -50%);
		z-index: 1;
	}

	.item.svelte-wg7iil {
		position: absolute;
		width: 20%;
		height: 20%;

		border-radius: 0px;

		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1rem;

		z-index: 2;
		color: white;
	}

	.curve.svelte-wg7iil {
		z-index: 0;
	}

	.item-inner.svelte-wg7iil {
		position: relative;
		/* display: block; */
		/* animation: fly 0.5s ease-out both; */
	}

	@keyframes svelte-wg7iil-fly {
		to {
			transform: translateY(0);
		}
		from {
			transform: translateY(-10px);
			opacity: 0;
		}
	}

	.wrapper.svelte-16drrtz {
		width: 100%;
		height: 100%;
		position: relative;

		display: flex;
		flex-direction: column;
		/* height: 85vh; */
		max-height: 2200px;
		/* max-width: 1200px; */

		/* max-height: 60vh; */
	}
	.embla.svelte-16drrtz {
		position: relative;
		overflow: hidden;
		border-radius: var(--surface-border-radius);
		max-width: calc(100% - 10px);
		display: flex;
		flex-direction: column;
		/* gap: 1rem; */
		/* width: 100%; */
		align-items: center;
		/* max-width: 100dvw; */
		height: 100%;
		user-select: none;
	}

	.embla__container.svelte-16drrtz {
		display: flex;
		height: 100%;
		width: 100%;

		@media screen and (min-width: 800px) {
			/* padding-left: 10%; */
		}
	}

	.embla__slide.svelte-16drrtz {
		flex: 0 0 55%;
		padding: 10px 5px;
		overflow: visible;
		width: 100%;
		height: 100%;
		/* background: red; */
		/* width: 300px; */

		position: relative;
		display: flex;
		align-items: stretch;
		justify-content: stretch;

		@media screen and (max-width: 800px) {
			flex: 0 0 95%;
		}
	}

	.embla__slide.svelte-16drrtz > * {
		flex: 0.5;
		width: 100%;
		/* height: 50%; */
		height: 100%;

		object-fit: contain;
	}

	.controls.svelte-16drrtz {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 100;
		pointer-events: none;
	}

	.controls.svelte-16drrtz > * {
		pointer-events: all;
	}

	.dot.svelte-16drrtz {
		padding: 8px;
		width: 8px;
		height: 8px;
		border-radius: 100%;
		outline: 5px solid;
		outline-color: var(--surface-color-primary);
		outline-offset: -10px;

		cursor: pointer;
	}

	.dot.active.svelte-16drrtz {
		opacity: 1;
		outline-color: white;
	}

	.indicator.svelte-16drrtz {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0px;
		height: 30px;
	}

	/* .embla:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, var(--bg-color) 0px, transparent 1%, transparent calc(98%), var(--bg-color) 100%);
		z-index: 100;
		pointer-events: none;
	} */

	.row.svelte-123cv2k {
		display: flex;
		flex-direction: row;

		display: grid;
		grid-template-columns: 1.5fr 1fr;

		gap: 3rem;

		@media screen and (max-width: 800px) {
			grid-template-columns: 1fr;
		}
	}

	.dev-info.svelte-123cv2k {
		@media screen and (max-width: 800px) {
			align-items: center;
			justify-content: center;
		}
	}

	.column.svelte-123cv2k {
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		/* justify-content: center; */
		/* padding: 1rem; */
	}

	.action-buttons.svelte-123cv2k {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1rem;

		@media screen and (max-width: 800px) {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
		}
	}

	.intro.svelte-1f76adb {
		display: flex;
		flex-direction: column;
		justify-content: start;
		align-items: start;
		gap: 0px;
	}

	.column.svelte-1f76adb {
		display: flex;
		flex-direction: column;
		@media screen and (max-width: 800px) {
			align-items: center;
			justify-content: center;
			text-align: center;
		}
	}

	.demo-big.svelte-1f76adb {
		position: relative;

		width: 125px;
		height: 125px;
		padding: 10px;
	}

	.demo-small.svelte-1f76adb {
		position: relative;
		width: 50px;
		height: 50px;
		padding: 5px;
	}

	/* kbd with a h1 after it */
	.intro.svelte-1f76adb h1:where(.svelte-1f76adb) + kbd:where(.svelte-1f76adb) {
		margin-bottom: var(--gap-medium-related-blocks);
		font-size: 0.7rem;
	}

	.intro.svelte-1f76adb :where(.svelte-1f76adb):nth-of-type(1n) {
		rotate: -2deg;
	}

	.intro.svelte-1f76adb :where(.svelte-1f76adb):nth-of-type(2n) {
		rotate: 2deg;
	}

	.click.svelte-1f76adb {
		display: inline-block;
		animation: svelte-1f76adb-click 1s ease-in-out infinite;
	}

	.page-video.svelte-1f76adb {
		max-width: 70%;
		margin: auto;

		@media screen and (max-width: 800px) {
			max-width: 95%;
		}
		/* mask-image: linear-gradient(-45deg, transparent 0%, black 15%); */
	}

	.callout-wrapper.svelte-1f76adb {
		cursor: default;
	}

	.stopwatch-icon.svelte-1f76adb {
		position: relative;
	}

	.stopwatch-icon.svelte-1f76adb .icon:where(.svelte-1f76adb) {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px;
		border-radius: 500px;
	}

	.callout-wrapper.svelte-1f76adb:not(:active) .stopwatch-icon.hovering:where(.svelte-1f76adb) .icon:where(.svelte-1f76adb) {
		background: var(--surface-color-primary);
	}

	.icon-tip.svelte-1f76adb {
		position: absolute;
		top: -25%;
		left: 50%;
		transform: translate(-50%, -100%) rotate(-10deg);
		transform-origin: center bottom;
		transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.35, 1.34);
	}

	/* (empty) .icon-tip.otherway {
		/* transform: translate(-50%, -100%) rotate(-10deg); *\/
	}*/

	.descriptive-grid.svelte-1f76adb {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		justify-content: center;

		@media screen and (max-width: 800px) {
			grid-template-columns: 1fr;
		}
	}

	@keyframes svelte-1f76adb-scale-in {
		0% {
			transform: scale(0);
		}
		50% {
			transform: scale(1.1);
		}
		65% {
			transform: scale(0.95);
		}
		80% {
			transform: scale(1.05);
		}
		100% {
			transform: scale(1);
		}
	}

	@keyframes svelte-1f76adb-click {
		0% {
			transform: scale(1);
		}
		10% {
			transform: scale(0.8);
		}
		20% {
			transform: scale(1.05);
		}
		30% {
			transform: scale(0.95);
		}
		40% {
			transform: scale(1.01);
		}
		50% {
			transform: scale(1);
		}
	}

	@keyframes svelte-1f76adb-floatPos {
		0% {
			transform: translateY(0%);
		}
		50% {
			transform: translateY(-10%);
		}
		100% {
			transform: translateY(0%);
		}
	}

	@keyframes svelte-1f76adb-floatRot {
		0%,
		100% {
			rotate: -1deg;
		}
		50% {
			rotate: 1deg;
		}
	}

	.tool-panel.svelte-1f76adb {
		max-width: 250px;
		width: 90%;
		animation:
			svelte-1f76adb-floatPos 2s ease-in-out infinite,
			svelte-1f76adb-floatRot 2s ease-in-out infinite -0.5s;
	}