Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- CYBERTYPE - 
A HYPER REACTIVE TYPING APP
 MADE IN SVELTE -->

<!-- PRACTISE TYPING WITH THE 1000
 MOST COMMON ENGLISH WORDS -->

<!--  USE IT ON FULLSCREEN MODE  -->

<!-- CLICK ON BOTTOM LEFT CORNER TO 
CHANGE THE THEME -->

<!-- HOVER OVER KEYS TO SEE PER KEY SPEEDS -->
<!-- SET YOUR TARGET SPEED WITH SLIDER  -->
<!-- TRY SHADOW MODE AND CHASE YOUR TARGET SPEED ! -->



<!-- DESIGNED BY MANAN TANK ⚡-->
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css2?family=Orbitron&display=swap");
html {
	font-size: 1vw;
}
body {
	font-family: "Orbitron", sans-serif;
	background-color: var(--bodybg);
	color: var(--fontcolor);
	user-select: none;
	transition: all 200ms ease;
	overflow: hidden;
}
.cybertype.svelte-1no0zd6.svelte-1no0zd6 {
	cursor: pointer;
	position: absolute;
	bottom: 2vh;
	font-size: 1rem;
	right: 50%;
	transform: translateX(50%);
	text-transform: uppercase;
	letter-spacing: 1.5em;
	font-weight: bold;
	padding-top: 2rem;
}
.cybertype.svelte-1no0zd6:hover .info.svelte-1no0zd6 {
	opacity: 1;
	pointer-events: initial;
}
.cybertype.svelte-1no0zd6 .info.svelte-1no0zd6 {
	opacity: 0;
	pointer-events: none;
	transition: all 400ms ease;
	transform: translateX(50%);
	box-shadow: 0 0 20px var(--bodybg);
	width: 90vw;
	color: var(--fontcolor);
	font-size: 2vh;
	position: fixed;
	z-index: 1000;
	bottom: 3rem;
	text-align: center;
	right: 50%;
	background: var(--bodybg);
	padding: 7vh;
}
@media (max-width: 992px) {
	.cybertype.svelte-1no0zd6 .info.svelte-1no0zd6 {
		padding: 12vh;
	}
}
.cybertype.svelte-1no0zd6 .info .app.svelte-1no0zd6 {
	margin-bottom: 50px;
}
.cybertype.svelte-1no0zd6 .info .creator p.svelte-1no0zd6 {
	margin-bottom: 30px;
	color: var(--activechar);
}
.cybertype.svelte-1no0zd6 .info .creator a.svelte-1no0zd6 {
	color: inherit;
	font-size: 3vh;
	background: linear-gradient(to right, var(--fontcolor), var(--activechar));
	background-size: 0 1px;
	background-repeat: no-repeat;
	background-position: bottom left;
	text-decoration: none;
	text-shadow: 0 0 1rem var(--fontcolor);
	padding: 10px;
	animation: svelte-1no0zd6-glow 3s ease infinite alternate;
	transition: all 200ms ease;
}
.cybertype.svelte-1no0zd6 .info .creator a.svelte-1no0zd6:hover {
	background-size: 100% 1px;
}
.theme-switch.svelte-1no0zd6.svelte-1no0zd6 {
	cursor: pointer;
	position: absolute;
	bottom: 2vh;
	left: 1rem;
	display: flex;
	align-items: center;
	padding: 0;
	padding-top: 2rem;
}
.theme-switch.svelte-1no0zd6:hover .tip.svelte-1no0zd6 {
	opacity: 1;
}
.theme-switch.svelte-1no0zd6 .s2.svelte-1no0zd6,
.theme-switch.svelte-1no0zd6 .s3.svelte-1no0zd6,
.theme-switch.svelte-1no0zd6 .s4.svelte-1no0zd6 {
	width: 1rem;
	flex-shrink: 0;
	height: 1rem;
	display: block;
	box-shadow: 0 0 40px var(--fontcolor);
	margin-right: 0.2em;
	animation: svelte-1no0zd6-spin 2s ease infinite;
}
.theme-switch.svelte-1no0zd6 .s2.svelte-1no0zd6 {
	animation-delay: 100ms;
	background: var(--activeword);
}
.theme-switch.svelte-1no0zd6 .s3.svelte-1no0zd6 {
	animation-delay: 200ms;
	background: var(--activechar);
}
.theme-switch.svelte-1no0zd6 .s4.svelte-1no0zd6 {
	animation-delay: 300ms;
	background: var(--fontcolor);
}
.theme-switch.svelte-1no0zd6 .theme-name.svelte-1no0zd6 {
	width: 100%;
	margin-left: 1rem;
	letter-spacing: 0.5em;
	font-size: 1rem;
	text-shadow: 0 0 1rem var(--fontcolor);
}
.theme-switch.svelte-1no0zd6 .tip.svelte-1no0zd6 {
	position: absolute;
	top: 0;
	left: 0;
	font-size: 1rem;
	padding: 0.5rem;
	max-width: 200px;
	letter-spacing: 0.5em;
	transform: translateY(-100%);
	text-transform: uppercase;
	text-align: center;
	opacity: 0;
	transition: all 200ms ease;
}
.reset.svelte-1no0zd6.svelte-1no0zd6 {
	font-size: 1rem;
	letter-spacing: 0.5em;
	position: absolute;
	bottom: 2vh;
	right: 2vh;
	text-shadow: 0 0 1rem var(--fontcolor);
	cursor: pointer;
	padding-top: 2rem;
	text-transform: uppercase;
}
@-moz-keyframes svelte-1no0zd6-glow {
	from {
		text-shadow: 0 0 10px var(--fontcolor);
	}
	to {
		text-shadow: 0 0 20px var(--fontcolor);
	}
}
@-webkit-keyframes svelte-1no0zd6-glow {
	from {
		text-shadow: 0 0 10px var(--fontcolor);
	}
	to {
		text-shadow: 0 0 20px var(--fontcolor);
	}
}
@-o-keyframes svelte-1no0zd6-glow {
	from {
		text-shadow: 0 0 10px var(--fontcolor);
	}
	to {
		text-shadow: 0 0 20px var(--fontcolor);
	}
}
@keyframes svelte-1no0zd6-glow {
	from {
		text-shadow: 0 0 10px var(--fontcolor);
	}
	to {
		text-shadow: 0 0 20px var(--fontcolor);
	}
}
@-moz-keyframes svelte-1no0zd6-spin {
	to {
		transform: rotate(1turn);
	}
}
@-webkit-keyframes svelte-1no0zd6-spin {
	to {
		transform: rotate(1turn);
	}
}
@-o-keyframes svelte-1no0zd6-spin {
	to {
		transform: rotate(1turn);
	}
}
@keyframes svelte-1no0zd6-spin {
	to {
		transform: rotate(1turn);
	}
}
.keys.svelte-1tksfjy.svelte-1tksfjy {
	display: grid;
	position: absolute;
	bottom: 12vh;
	left: 50%;
	transform: translateX(-50%);
	grid-template-columns: repeat(13, 1fr);
	justify-items: center;
	grid-gap: 1.5rem;
	margin: 0 auto;
}
@media (max-width: 800px) {
	.keys.svelte-1tksfjy.svelte-1tksfjy {
		grid-template-columns: repeat(7, 1fr);
		grid-gap: 1.5rem 3rem;
	}
	.keys.svelte-1tksfjy .key.svelte-1tksfjy:nth-child(22) {
		grid-column: 2/3;
	}
}
.key.svelte-1tksfjy.svelte-1tksfjy {
	transition: all 200ms ease;
	border-radius: 50%;
	position: relative;
	cursor: pointer;
	display: grid;
	place-items: center;
	text-transform: uppercase;
	width: 7vh;
	height: 7vh;
	display: grid;
	place-items: center;
}
.key.svelte-1tksfjy .name.svelte-1tksfjy {
	font-size: 4vh;
	display: grid;
	place-items: center;
}
@media (max-width: 800px) {
	.key.svelte-1tksfjy .name.svelte-1tksfjy {
		font-size: 3.5vh;
		width: 5vh;
		height: 5vh;
	}
}
.key.svelte-1tksfjy .stats.svelte-1tksfjy {
	opacity: 0;
	padding: 10px;
	position: absolute;
	transform: translateY(-120%);
	top: 0;
	font-size: 2vh;
	min-width: 200px;
	z-index: 100;
	pointer-events: none;
	box-shadow: 0 -10px 40px var(--bodybg), 0 -10px 50px var(--bodybg);
}
.key.svelte-1tksfjy .stats .speed.svelte-1tksfjy {
	font-size: 2em;
	margin-bottom: 0.2em;
	font-weight: bold;
}
.key.svelte-1tksfjy .stats .speed .unit.svelte-1tksfjy {
	font-size: 1em;
	margin-left: 0.5rem;
}
.key.svelte-1tksfjy .stats .times.svelte-1tksfjy {
	font-size: 0.8em;
	letter-spacing: 0.2em;
}
.fastest.svelte-1tksfjy.svelte-1tksfjy {
	animation: svelte-1tksfjy-glowfastest 2s ease infinite alternate;
	box-shadow: 0 0 2rem var(--fastest);
	transition: all 200ms ease;
	color: var(--fastest);
	background: var(--bodybg);
}
.fastest.svelte-1tksfjy.svelte-1tksfjy:hover {
	color: var(--bodybg);
	background: var(--fastest) !important;
	animation: none;
	transform: scale(1.3);
}
.fastest.svelte-1tksfjy:hover .stats.svelte-1tksfjy {
	opacity: 1;
}
.fastest.svelte-1tksfjy .stats.svelte-1tksfjy {
	transition: all 200ms ease-out;
	background: var(--fastest) !important;
	color: var(--bodybg);
	z-index: 100;
}
.fastest.pressed.svelte-1tksfjy.svelte-1tksfjy {
	color: var(--bodybg);
	background: var(--fastest) !important;
	transform: scale(1.5);
}
.fastest.pressed.svelte-1tksfjy .stats.svelte-1tksfjy {
	transition: none;
}
@-moz-keyframes svelte-1tksfjy-glowfastest {
	from {
		box-shadow: 0 0 2rem var(--fastest);
	}
	to {
		box-shadow: 0 0 4rem var(--fastest);
	}
}
@-webkit-keyframes svelte-1tksfjy-glowfastest {
	from {
		box-shadow: 0 0 2rem var(--fastest);
	}
	to {
		box-shadow: 0 0 4rem var(--fastest);
	}
}
@-o-keyframes svelte-1tksfjy-glowfastest {
	from {
		box-shadow: 0 0 2rem var(--fastest);
	}
	to {
		box-shadow: 0 0 4rem var(--fastest);
	}
}
@keyframes svelte-1tksfjy-glowfastest {
	from {
		box-shadow: 0 0 2rem var(--fastest);
	}
	to {
		box-shadow: 0 0 4rem var(--fastest);
	}
}
.fast.svelte-1tksfjy.svelte-1tksfjy {
	animation: svelte-1tksfjy-glowfast 2s ease infinite alternate;
	box-shadow: 0 0 2rem var(--fast);
	transition: all 200ms ease;
	color: var(--fast);
	background: var(--bodybg);
}
.fast.svelte-1tksfjy.svelte-1tksfjy:hover {
	color: var(--bodybg);
	background: var(--fast) !important;
	animation: none;
	transform: scale(1.3);
}
.fast.svelte-1tksfjy:hover .stats.svelte-1tksfjy {
	opacity: 1;
}
.fast.svelte-1tksfjy .stats.svelte-1tksfjy {
	transition: all 200ms ease-out;
	background: var(--fast) !important;
	color: var(--bodybg);
	z-index: 100;
}
.fast.pressed.svelte-1tksfjy.svelte-1tksfjy {
	color: var(--bodybg);
	background: var(--fast) !important;
	transform: scale(1.5);
}
.fast.pressed.svelte-1tksfjy .stats.svelte-1tksfjy {
	transition: none;
}
@-moz-keyframes svelte-1tksfjy-glowfast {
	from {
		box-shadow: 0 0 2rem var(--fast);
	}
	to {
		box-shadow: 0 0 4rem var(--fast);
	}
}
@-webkit-keyframes svelte-1tksfjy-glowfast {
	from {
		box-shadow: 0 0 2rem var(--fast);
	}
	to {
		box-shadow: 0 0 4rem var(--fast);
	}
}
@-o-keyframes svelte-1tksfjy-glowfast {
	from {
		box-shadow: 0 0 2rem var(--fast);
	}
	to {
		box-shadow: 0 0 4rem var(--fast);
	}
}
@keyframes svelte-1tksfjy-glowfast {
	from {
		box-shadow: 0 0 2rem var(--fast);
	}
	to {
		box-shadow: 0 0 4rem var(--fast);
	}
}
.normal.svelte-1tksfjy.svelte-1tksfjy {
	animation: svelte-1tksfjy-glownormal 2s ease infinite alternate;
	box-shadow: 0 0 2rem var(--normal);
	transition: all 200ms ease;
	color: var(--normal);
	background: var(--bodybg);
}
.normal.svelte-1tksfjy.svelte-1tksfjy:hover {
	color: var(--bodybg);
	background: var(--normal) !important;
	animation: none;
	transform: scale(1.3);
}
.normal.svelte-1tksfjy:hover .stats.svelte-1tksfjy {
	opacity: 1;
}
.normal.svelte-1tksfjy .stats.svelte-1tksfjy {
	transition: all 200ms ease-out;
	background: var(--normal) !important;
	color: var(--bodybg);
	z-index: 100;
}
.normal.pressed.svelte-1tksfjy.svelte-1tksfjy {
	color: var(--bodybg);
	background: var(--normal) !important;
	transform: scale(1.5);
}
.normal.pressed.svelte-1tksfjy .stats.svelte-1tksfjy {
	transition: none;
}
@-moz-keyframes svelte-1tksfjy-glownormal {
	from {
		box-shadow: 0 0 2rem var(--normal);
	}
	to {
		box-shadow: 0 0 4rem var(--normal);
	}
}
@-webkit-keyframes svelte-1tksfjy-glownormal {
	from {
		box-shadow: 0 0 2rem var(--normal);
	}
	to {
		box-shadow: 0 0 4rem var(--normal);
	}
}
@-o-keyframes svelte-1tksfjy-glownormal {
	from {
		box-shadow: 0 0 2rem var(--normal);
	}
	to {
		box-shadow: 0 0 4rem var(--normal);
	}
}
@keyframes svelte-1tksfjy-glownormal {
	from {
		box-shadow: 0 0 2rem var(--normal);
	}
	to {
		box-shadow: 0 0 4rem var(--normal);
	}
}
.slow.svelte-1tksfjy.svelte-1tksfjy {
	animation: svelte-1tksfjy-glowslow 2s ease infinite alternate;
	box-shadow: 0 0 2rem var(--slow);
	transition: all 200ms ease;
	color: var(--slow);
	background: var(--bodybg);
}
.slow.svelte-1tksfjy.svelte-1tksfjy:hover {
	color: var(--bodybg);
	background: var(--slow) !important;
	animation: none;
	transform: scale(1.3);
}
.slow.svelte-1tksfjy:hover .stats.svelte-1tksfjy {
	opacity: 1;
}
.slow.svelte-1tksfjy .stats.svelte-1tksfjy {
	transition: all 200ms ease-out;
	background: var(--slow) !important;
	color: var(--bodybg);
	z-index: 100;
}
.slow.pressed.svelte-1tksfjy.svelte-1tksfjy {
	color: var(--bodybg);
	background: var(--slow) !important;
	transform: scale(1.5);
}
.slow.pressed.svelte-1tksfjy .stats.svelte-1tksfjy {
	transition: none;
}
@-moz-keyframes svelte-1tksfjy-glowslow {
	from {
		box-shadow: 0 0 2rem var(--slow);
	}
	to {
		box-shadow: 0 0 4rem var(--slow);
	}
}
@-webkit-keyframes svelte-1tksfjy-glowslow {
	from {
		box-shadow: 0 0 2rem var(--slow);
	}
	to {
		box-shadow: 0 0 4rem var(--slow);
	}
}
@-o-keyframes svelte-1tksfjy-glowslow {
	from {
		box-shadow: 0 0 2rem var(--slow);
	}
	to {
		box-shadow: 0 0 4rem var(--slow);
	}
}
@keyframes svelte-1tksfjy-glowslow {
	from {
		box-shadow: 0 0 2rem var(--slow);
	}
	to {
		box-shadow: 0 0 4rem var(--slow);
	}
}
.slowest.svelte-1tksfjy.svelte-1tksfjy {
	animation: svelte-1tksfjy-glowslowest 2s ease infinite alternate;
	box-shadow: 0 0 2rem var(--slowest);
	transition: all 200ms ease;
	color: var(--slowest);
	background: var(--bodybg);
}
.slowest.svelte-1tksfjy.svelte-1tksfjy:hover {
	color: var(--bodybg);
	background: var(--slowest) !important;
	animation: none;
	transform: scale(1.3);
}
.slowest.svelte-1tksfjy:hover .stats.svelte-1tksfjy {
	opacity: 1;
}
.slowest.svelte-1tksfjy .stats.svelte-1tksfjy {
	transition: all 200ms ease-out;
	background: var(--slowest) !important;
	color: var(--bodybg);
	z-index: 100;
}
.slowest.pressed.svelte-1tksfjy.svelte-1tksfjy {
	color: var(--bodybg);
	background: var(--slowest) !important;
	transform: scale(1.5);
}
.slowest.pressed.svelte-1tksfjy .stats.svelte-1tksfjy {
	transition: none;
}
@-moz-keyframes svelte-1tksfjy-glowslowest {
	from {
		box-shadow: 0 0 2rem var(--slowest);
	}
	to {
		box-shadow: 0 0 4rem var(--slowest);
	}
}
@-webkit-keyframes svelte-1tksfjy-glowslowest {
	from {
		box-shadow: 0 0 2rem var(--slowest);
	}
	to {
		box-shadow: 0 0 4rem var(--slowest);
	}
}
@-o-keyframes svelte-1tksfjy-glowslowest {
	from {
		box-shadow: 0 0 2rem var(--slowest);
	}
	to {
		box-shadow: 0 0 4rem var(--slowest);
	}
}
@keyframes svelte-1tksfjy-glowslowest {
	from {
		box-shadow: 0 0 2rem var(--slowest);
	}
	to {
		box-shadow: 0 0 4rem var(--slowest);
	}
}
.target.svelte-6li567.svelte-6li567 {
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.target.svelte-6li567 .goal.svelte-6li567 {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.5em;
}
.target.svelte-6li567 .goal .text.svelte-6li567 {
	margin-right: 1rem;
}
.target.svelte-6li567 .goal .value.svelte-6li567 {
	font-size: 2rem;
	margin-right: 0.5rem;
	text-shadow: 0 0 1rem var(--fontcolor);
}
.target.svelte-6li567:hover .tip.svelte-6li567 {
	opacity: 1;
}
.target.svelte-6li567 .tip.svelte-6li567 {
	opacity: 0;
	transition: 200ms ease;
	position: absolute;
	color: var(--activechar);
	width: 100%;
	text-align: center;
	bottom: 0;
	pointer-events: none;
	padding: 1rem;
	transform: translateY(100%);
	letter-spacing: 0.5em;
	text-transform: uppercase;
}
.slider.svelte-6li567.svelte-6li567 {
	position: relative;
	margin-top: 0.3rem;
	width: 25rem;
}
.slider.svelte-6li567.svelte-6li567::before {
	content: "";
	width: 100%;
	height: 2px;
	position: absolute;
	display: block;
	top: 50%;
	transform: translateY(-50%);
	background: linear-gradient(to left, var(--fontcolor), var(--typedword));
}
input.svelte-6li567.svelte-6li567 {
	width: 100%;
	opacity: 0;
	cursor: pointer;
}
.bubble.svelte-6li567.svelte-6li567 {
	position: absolute;
	width: 1.2rem;
	height: 1.2rem;
	background: var(--fontcolor);
	top: 50%;
	pointer-events: none;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 20px var(--activechar);
	animation: svelte-6li567-spin 4s linear infinite;
}
@-moz-keyframes svelte-6li567-spin {
	to {
		transform: translate(-50%, -50%) rotate(1turn);
	}
}
@-webkit-keyframes svelte-6li567-spin {
	to {
		transform: translate(-50%, -50%) rotate(1turn);
	}
}
@-o-keyframes svelte-6li567-spin {
	to {
		transform: translate(-50%, -50%) rotate(1turn);
	}
}
@keyframes svelte-6li567-spin {
	to {
		transform: translate(-50%, -50%) rotate(1turn);
	}
}
.stats.svelte-12n1c2w.svelte-12n1c2w {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: center;
	justify-content: center;
	margin-bottom: 4rem;
	padding: 1rem;
}
.center.svelte-12n1c2w.svelte-12n1c2w {
	text-align: center;
	color: var(--fontcolor);
	position: relative;
	cursor: pointer;
}
.center.svelte-12n1c2w:hover .word-stats.svelte-12n1c2w {
	opacity: 1;
}
.center.svelte-12n1c2w .speed.svelte-12n1c2w {
	letter-spacing: 0.4em;
}
.center.svelte-12n1c2w .speed .value.svelte-12n1c2w {
	font-size: 4rem;
	text-shadow: 0 0 3rem var(--fontcolor);
}
.left.svelte-12n1c2w.svelte-12n1c2w,
.right.svelte-12n1c2w.svelte-12n1c2w {
	display: grid;
	justify-content: center;
}
.word-stats.svelte-12n1c2w.svelte-12n1c2w {
	transition: 200ms ease;
	opacity: 0;
	pointer-events: none;
	font-size: 0.8rem;
	padding-top: 1rem;
	position: absolute;
	width: 600px;
	bottom: 0;
	left: 50%;
	text-transform: uppercase;
	transform: translate(-50%, 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	letter-spacing: 0.5em;
}
.word-stats > * + .svelte-12n1c2w.svelte-12n1c2w {
	margin-left: 1rem;
}
.word-stats.svelte-12n1c2w .count.svelte-12n1c2w {
	font-size: 1.2rem;
	text-shadow: 0 0 20px var(--fontcolor);
}
.chase-mode.svelte-12n1c2w.svelte-12n1c2w {
	text-transform: uppercase;
	letter-spacing: 0.5em;
	justify-content: center;
	display: flex;
	align-items: center;
	cursor: pointer;
	position: relative;
	width: 25rem;
	padding-bottom: 0.7rem;
	background: linear-gradient(to right, var(--fontcolor), var(--typedword));
	background-size: 100% 2px;
	background-repeat: no-repeat;
	background-position: bottom;
}
.chase-mode.svelte-12n1c2w:hover .tip.svelte-12n1c2w {
	opacity: 1;
}
.chase-mode.svelte-12n1c2w .tip.svelte-12n1c2w {
	opacity: 0;
	transition: 200ms ease;
	position: absolute;
	color: var(--activechar);
	max-width: 400px;
	text-align: center;
	bottom: 0;
	pointer-events: none;
	padding: 1rem;
	transform: translateY(100%);
}
.chase-mode.svelte-12n1c2w .value.svelte-12n1c2w {
	font-size: 2rem;
	margin-left: 10px;
	transition: 200ms ease;
}
.chase-mode.svelte-12n1c2w .value.on.svelte-12n1c2w {
	font-weight: bold;
	text-shadow: 0 0 2rem var(--fontcolor);
}
.words.svelte-rtsb3r.svelte-rtsb3r {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	max-width: 1000px;
	margin: 0 auto;
	flex-wrap: wrap;
	padding: 2vh 4rem;
}
.word.svelte-rtsb3r.svelte-rtsb3r {
	margin-bottom: 2vh;
	display: flex;
	transition: all 50ms ease;
}
.word.current-word.svelte-rtsb3r .character.svelte-rtsb3r {
	background: var(--activeword);
}
.word.typed.svelte-rtsb3r .character.svelte-rtsb3r {
	color: var(--typedword);
	text-shadow: 0 0 1em var(--typedword);
}
.character.svelte-rtsb3r.svelte-rtsb3r {
	font-size: 4vh;
	padding: 0.15em;
	display: inline-block;
	border-bottom: 1px solid transparent;
	transition: border 200ms ease;
}
.character.space.svelte-rtsb3r.svelte-rtsb3r {
	margin: 0 0.3em;
	background: transparent !important;
	text-shadow: 0 0 10px var(--activechar), 0 0 20px var(--activechar);
}
.character.error.svelte-rtsb3r.svelte-rtsb3r {
	position: relative;
	color: var(--error) !important;
	text-shadow: 0 0 30px var(--error), 0 0 40px var(--error) !important;
	font-weight: bold;
	filter: none !important;
}
.character.error.current-char.svelte-rtsb3r.svelte-rtsb3r {
	animation: svelte-rtsb3r-cursor-error 200ms ease infinite;
}
.character.current-char.svelte-rtsb3r.svelte-rtsb3r {
	animation: svelte-rtsb3r-cursor 500ms ease infinite;
}
.character.typed-by-target.svelte-rtsb3r.svelte-rtsb3r {
	border-bottom: 1px solid var(--activechar);
}
@-moz-keyframes svelte-rtsb3r-cursor {
	0%,
	60% {
		background: var(--activechar);
		color: var(--bodybg);
	}
	70%,
	100% {
		background: var(--bodybg);
		color: var(--activechar);
	}
}
@-webkit-keyframes svelte-rtsb3r-cursor {
	0%,
	60% {
		background: var(--activechar);
		color: var(--bodybg);
	}
	70%,
	100% {
		background: var(--bodybg);
		color: var(--activechar);
	}
}
@-o-keyframes svelte-rtsb3r-cursor {
	0%,
	60% {
		background: var(--activechar);
		color: var(--bodybg);
	}
	70%,
	100% {
		background: var(--bodybg);
		color: var(--activechar);
	}
}
@keyframes svelte-rtsb3r-cursor {
	0%,
	60% {
		background: var(--activechar);
		color: var(--bodybg);
	}
	70%,
	100% {
		background: var(--bodybg);
		color: var(--activechar);
	}
}
@-moz-keyframes svelte-rtsb3r-cursor-error {
	0%,
	60% {
		background: var(--error);
		color: var(--bodybg);
	}
	70%,
	100% {
		background: var(--bodybg);
		color: var(--error);
	}
}
@-webkit-keyframes svelte-rtsb3r-cursor-error {
	0%,
	60% {
		background: var(--error);
		color: var(--bodybg);
	}
	70%,
	100% {
		background: var(--bodybg);
		color: var(--error);
	}
}
@-o-keyframes svelte-rtsb3r-cursor-error {
	0%,
	60% {
		background: var(--error);
		color: var(--bodybg);
	}
	70%,
	100% {
		background: var(--bodybg);
		color: var(--error);
	}
}
@keyframes svelte-rtsb3r-cursor-error {
	0%,
	60% {
		background: var(--error);
		color: var(--bodybg);
	}
	70%,
	100% {
		background: var(--bodybg);
		color: var(--error);
	}
}

              
            
!

JS

              
                //  Minified
var app = (function () {
	"use strict";
	function e() {}
	const t = (e) => e;
	function n(e, t) {
		for (const n in t) e[n] = t[n];
		return e;
	}
	function r(e) {
		return e();
	}
	function s() {
		return Object.create(null);
	}
	function o(e) {
		e.forEach(r);
	}
	function a(e) {
		return "function" == typeof e;
	}
	function l(e, t) {
		return e != e
			? t == t
			: e !== t || (e && "object" == typeof e) || "function" == typeof e;
	}
	function i(t, n, r) {
		t.$$.on_destroy.push(
			(function (t, ...n) {
				if (null == t) return e;
				const r = t.subscribe(...n);
				return r.unsubscribe ? () => r.unsubscribe() : r;
			})(n, r)
		);
	}
	function c(e, t, n = t) {
		return e.set(n), t;
	}
	const d = "undefined" != typeof window;
	let u = d ? () => window.performance.now() : () => Date.now(),
		f = d ? (e) => requestAnimationFrame(e) : e;
	const h = new Set();
	function p(e) {
		h.forEach((t) => {
			t.c(e) || (h.delete(t), t.f());
		}),
			0 !== h.size && f(p);
	}
	function m(e, t) {
		e.appendChild(t);
	}
	function g(e, t, n) {
		e.insertBefore(t, n || null);
	}
	function w(e) {
		e.parentNode.removeChild(e);
	}
	function b(e, t) {
		for (let n = 0; n < e.length; n += 1) e[n] && e[n].d(t);
	}
	function y(e) {
		return document.createElement(e);
	}
	function v(e) {
		return document.createTextNode(e);
	}
	function k(e, t, n, r) {
		return e.addEventListener(t, n, r), () => e.removeEventListener(t, n, r);
	}
	function $(e, t, n) {
		null == n
			? e.removeAttribute(t)
			: e.getAttribute(t) !== n && e.setAttribute(t, n);
	}
	function x(e, t) {
		(t = "" + t), e.data !== t && (e.data = t);
	}
	function E(e, t, n) {
		e.classList[n ? "add" : "remove"](t);
	}
	let F;
	function j(e) {
		F = e;
	}
	function C(e) {
		(function () {
			if (!F) throw new Error("Function called outside component initialization");
			return F;
		})().$$.on_mount.push(e);
	}
	const A = [],
		D = [],
		_ = [],
		z = [],
		M = Promise.resolve();
	let S = !1;
	function q(e) {
		_.push(e);
	}
	let O = !1;
	const B = new Set();
	function L() {
		if (!O) {
			O = !0;
			do {
				for (let e = 0; e < A.length; e += 1) {
					const t = A[e];
					j(t), T(t.$$);
				}
				for (A.length = 0; D.length; ) D.pop()();
				for (let e = 0; e < _.length; e += 1) {
					const t = _[e];
					B.has(t) || (B.add(t), t());
				}
				_.length = 0;
			} while (A.length);
			for (; z.length; ) z.pop()();
			(S = !1), (O = !1), B.clear();
		}
	}
	function T(e) {
		if (null !== e.fragment) {
			e.update(), o(e.before_update);
			const t = e.dirty;
			(e.dirty = [-1]),
				e.fragment && e.fragment.p(e.ctx, t),
				e.after_update.forEach(q);
		}
	}
	const P = new Set();
	function W(e, t) {
		e && e.i && (P.delete(e), e.i(t));
	}
	function H(e, t, n, r) {
		if (e && e.o) {
			if (P.has(e)) return;
			P.add(e),
				(void 0).c.push(() => {
					P.delete(e), r && (n && e.d(1), r());
				}),
				e.o(t);
		}
	}
	function N(e) {
		e && e.c();
	}
	function X(e, t, n) {
		const { fragment: s, on_mount: l, on_destroy: i, after_update: c } = e.$$;
		s && s.m(t, n),
			q(() => {
				const t = l.map(r).filter(a);
				i ? i.push(...t) : o(t), (e.$$.on_mount = []);
			}),
			c.forEach(q);
	}
	function I(e, t) {
		const n = e.$$;
		null !== n.fragment &&
			(o(n.on_destroy),
			n.fragment && n.fragment.d(t),
			(n.on_destroy = n.fragment = null),
			(n.ctx = []));
	}
	function R(e, t) {
		-1 === e.$$.dirty[0] &&
			(A.push(e), S || ((S = !0), M.then(L)), e.$$.dirty.fill(0)),
			(e.$$.dirty[(t / 31) | 0] |= 1 << t % 31);
	}
	function K(t, n, r, a, l, i, c = [-1]) {
		const d = F;
		j(t);
		const u = n.props || {},
			f = (t.$$ = {
				fragment: null,
				ctx: null,
				props: i,
				update: e,
				not_equal: l,
				bound: s(),
				on_mount: [],
				on_destroy: [],
				before_update: [],
				after_update: [],
				context: new Map(d ? d.$$.context : []),
				callbacks: s(),
				dirty: c
			});
		let h = !1;
		if (
			((f.ctx = r
				? r(t, u, (e, n, ...r) => {
						const s = r.length ? r[0] : n;
						return (
							f.ctx &&
								l(f.ctx[e], (f.ctx[e] = s)) &&
								(f.bound[e] && f.bound[e](s), h && R(t, e)),
							n
						);
				  })
				: []),
			f.update(),
			(h = !0),
			o(f.before_update),
			(f.fragment = !!a && a(f.ctx)),
			n.target)
		) {
			if (n.hydrate) {
				const e = (function (e) {
					return Array.from(e.childNodes);
				})(n.target);
				f.fragment && f.fragment.l(e), e.forEach(w);
			} else f.fragment && f.fragment.c();
			n.intro && W(t.$$.fragment), X(t, n.target, n.anchor), L();
		}
		j(d);
	}
	class V {
		$destroy() {
			I(this, 1), (this.$destroy = e);
		}
		$on(e, t) {
			const n = this.$$.callbacks[e] || (this.$$.callbacks[e] = []);
			return (
				n.push(t),
				() => {
					const e = n.indexOf(t);
					-1 !== e && n.splice(e, 1);
				}
			);
		}
		$set() {}
	}
	const U = [];
	function G(t, n = e) {
		let r;
		const s = [];
		function o(e) {
			if (l(t, e) && ((t = e), r)) {
				const e = !U.length;
				for (let e = 0; e < s.length; e += 1) {
					const n = s[e];
					n[1](), U.push(n, t);
				}
				if (e) {
					for (let e = 0; e < U.length; e += 2) U[e][0](U[e + 1]);
					U.length = 0;
				}
			}
		}
		return {
			set: o,
			update: function (e) {
				o(e(t));
			},
			subscribe: function (a, l = e) {
				const i = [a, l];
				return (
					s.push(i),
					1 === s.length && (r = n(o) || e),
					a(t),
					() => {
						const e = s.indexOf(i);
						-1 !== e && s.splice(e, 1), 0 === s.length && (r(), (r = null));
					}
				);
			}
		};
	}
	var J = [
		"as",
		"his",
		"that",
		"he",
		"was",
		"for",
		"on",
		"are",
		"with",
		"they",
		"be",
		"at",
		"one",
		"have",
		"this",
		"from",
		"by",
		"hot",
		"word",
		"but",
		"what",
		"some",
		"is",
		"it",
		"you",
		"or",
		"had",
		"the",
		"of",
		"to",
		"and",
		"a",
		"in",
		"we",
		"can",
		"out",
		"other",
		"were",
		"which",
		"do",
		"their",
		"time",
		"if",
		"will",
		"how",
		"said",
		"an",
		"each",
		"tell",
		"does",
		"set",
		"three",
		"want",
		"air",
		"well",
		"also",
		"play",
		"small",
		"end",
		"put",
		"home",
		"read",
		"hand",
		"port",
		"large",
		"spell",
		"add",
		"even",
		"land",
		"here",
		"must",
		"big",
		"high",
		"such",
		"follow",
		"act",
		"why",
		"ask",
		"men",
		"change",
		"went",
		"light",
		"kind",
		"off",
		"need",
		"house",
		"picture",
		"try",
		"us",
		"again",
		"animal",
		"point",
		"mother",
		"world",
		"near",
		"build",
		"self",
		"earth",
		"father",
		"any",
		"new",
		"work",
		"part",
		"take",
		"get",
		"place",
		"made",
		"live",
		"where",
		"after",
		"back",
		"little",
		"only",
		"round",
		"man",
		"year",
		"came",
		"show",
		"every",
		"good",
		"me",
		"give",
		"our",
		"under",
		"name",
		"very",
		"through",
		"just",
		"form",
		"sentence",
		"great",
		"think",
		"say",
		"help",
		"low",
		"line",
		"differ",
		"turn",
		"cause",
		"much",
		"mean",
		"before",
		"move",
		"right",
		"boy",
		"old",
		"too",
		"same",
		"she",
		"all",
		"there",
		"when",
		"up",
		"use",
		"your",
		"way",
		"about",
		"many",
		"then",
		"them",
		"write",
		"would",
		"like",
		"so",
		"these",
		"her",
		"long",
		"make",
		"thing",
		"see",
		"him",
		"two",
		"has",
		"look",
		"more",
		"day",
		"could",
		"go",
		"come",
		"did",
		"number",
		"sound",
		"no",
		"most",
		"people",
		"my",
		"over",
		"know",
		"water",
		"than",
		"call",
		"first",
		"who",
		"may",
		"down",
		"side",
		"been",
		"now",
		"find",
		"head",
		"stand",
		"own",
		"page",
		"should",
		"country",
		"found",
		"answer",
		"school",
		"grow",
		"study",
		"still",
		"learn",
		"plant",
		"cover",
		"food",
		"sun",
		"four",
		"between",
		"state",
		"keep",
		"eye",
		"never",
		"last",
		"let",
		"thought",
		"city",
		"tree",
		"cross",
		"farm",
		"hard",
		"start",
		"might",
		"story",
		"saw",
		"far",
		"sea",
		"draw",
		"left",
		"late",
		"run",
		"while",
		"press",
		"close",
		"night",
		"real",
		"life",
		"few",
		"north",
		"book",
		"carry",
		"took",
		"science",
		"eat",
		"room",
		"friend",
		"began",
		"idea",
		"fish",
		"mountain",
		"stop",
		"once",
		"base",
		"hear",
		"horse",
		"cut",
		"sure",
		"watch",
		"color",
		"face",
		"wood",
		"main",
		"open",
		"seem",
		"together",
		"next",
		"white",
		"children",
		"begin",
		"got",
		"walk",
		"example",
		"ease",
		"paper",
		"group",
		"always",
		"music",
		"those",
		"both",
		"mark",
		"often",
		"letter",
		"until",
		"mile",
		"river",
		"car",
		"feet",
		"care",
		"second",
		"enough",
		"plain",
		"girl",
		"usual",
		"young",
		"ready",
		"above",
		"ever",
		"red",
		"list",
		"though",
		"feel",
		"talk",
		"bird",
		"soon",
		"body",
		"dog",
		"family",
		"direct",
		"pose",
		"leave",
		"song",
		"measure",
		"door",
		"product",
		"black",
		"short",
		"numeral",
		"class",
		"wind",
		"question",
		"happen",
		"complete",
		"ship",
		"area",
		"half",
		"rock",
		"order",
		"fire",
		"south",
		"problem",
		"piece",
		"told",
		"knew",
		"pass",
		"since",
		"top",
		"whole",
		"king",
		"street",
		"inch",
		"multiply",
		"nothing",
		"course",
		"stay",
		"wheel",
		"full",
		"force",
		"blue",
		"object",
		"decide",
		"surface",
		"deep",
		"moon",
		"island",
		"foot",
		"system",
		"busy",
		"test",
		"record",
		"boat",
		"common",
		"gold",
		"possible",
		"plane",
		"stead",
		"dry",
		"wonder",
		"laugh",
		"thousand",
		"ago",
		"ran",
		"check",
		"game",
		"shape",
		"equate",
		"hot",
		"miss",
		"brought",
		"heat",
		"snow",
		"tire",
		"bring",
		"yes",
		"distant",
		"fill",
		"east",
		"paint",
		"language",
		"among",
		"unit",
		"power",
		"town",
		"fine",
		"certain",
		"fly",
		"fall",
		"lead",
		"cry",
		"dark",
		"machine",
		"note",
		"wait",
		"plan",
		"figure",
		"star",
		"box",
		"noun",
		"field",
		"rest",
		"correct",
		"able",
		"pound",
		"done",
		"beauty",
		"drive",
		"stood",
		"contain",
		"front",
		"teach",
		"week",
		"final",
		"gave",
		"green",
		"oh",
		"quick",
		"develop",
		"ocean",
		"warm",
		"free",
		"minute",
		"strong",
		"special",
		"mind",
		"behind",
		"clear",
		"tail",
		"produce",
		"fact",
		"space",
		"heard",
		"best",
		"hour",
		"better",
		"true",
		"during",
		"hundred",
		"five",
		"remember",
		"step",
		"early",
		"hold",
		"west",
		"ground",
		"interest",
		"reach",
		"fast",
		"verb",
		"sing",
		"listen",
		"six",
		"table",
		"travel",
		"less",
		"morning",
		"ten",
		"simple",
		"several",
		"vowel",
		"toward",
		"war",
		"lay",
		"against",
		"pattern",
		"slow",
		"center",
		"love",
		"person",
		"money",
		"serve",
		"appear",
		"road",
		"map",
		"rain",
		"rule",
		"govern",
		"pull",
		"cold",
		"notice",
		"voice",
		"energy",
		"hunt",
		"probable",
		"bed",
		"brother",
		"egg",
		"ride",
		"cell",
		"believe",
		"perhaps",
		"pick",
		"sudden",
		"count",
		"square",
		"reason",
		"length",
		"represent",
		"art",
		"subject",
		"region",
		"size",
		"vary",
		"settle",
		"speak",
		"weight",
		"general",
		"ice",
		"matter",
		"circle",
		"pair",
		"include",
		"divide",
		"syllable",
		"felt",
		"grand",
		"ball",
		"yet",
		"wave",
		"drop",
		"heart",
		"am",
		"present",
		"heavy",
		"dance",
		"engine",
		"position",
		"arm",
		"wide",
		"sail",
		"material",
		"fraction",
		"forest",
		"sit",
		"race",
		"window",
		"store",
		"summer",
		"train",
		"sleep",
		"prove",
		"lone",
		"leg",
		"exercise",
		"wall",
		"catch",
		"mount",
		"wish",
		"sky",
		"board",
		"joy",
		"winter",
		"sat",
		"written",
		"wild",
		"instrument",
		"kept",
		"glass",
		"grass",
		"cow",
		"job",
		"edge",
		"sign",
		"visit",
		"past",
		"soft",
		"fun",
		"bright",
		"gas",
		"weather",
		"month",
		"million",
		"bear",
		"finish",
		"happy",
		"hope",
		"flower",
		"clothe",
		"strange",
		"gone",
		"trade",
		"melody",
		"trip",
		"office",
		"receive",
		"row",
		"mouth",
		"exact",
		"symbol",
		"die",
		"least",
		"trouble",
		"shout",
		"except",
		"wrote",
		"seed",
		"tone",
		"join",
		"suggest",
		"clean",
		"break",
		"lady",
		"yard",
		"rise",
		"bad",
		"blow",
		"oil",
		"blood",
		"touch",
		"grew",
		"cent",
		"mix",
		"team",
		"wire",
		"cost",
		"lost",
		"brown",
		"wear",
		"garden",
		"equal",
		"sent",
		"choose",
		"fell",
		"fit",
		"flow",
		"fair",
		"bank",
		"collect",
		"save",
		"control",
		"decimal",
		"ear",
		"else",
		"quite",
		"broke",
		"case",
		"middle",
		"kill",
		"son",
		"lake",
		"moment",
		"scale",
		"loud",
		"spring",
		"observe",
		"child",
		"straight",
		"consonant",
		"nation",
		"dictionary",
		"milk",
		"speed",
		"method",
		"organ",
		"pay",
		"age",
		"section",
		"dress",
		"cloud",
		"surprise",
		"quiet",
		"stone",
		"tiny",
		"climb",
		"cool",
		"design",
		"poor",
		"lot",
		"experiment",
		"bottom",
		"key",
		"iron",
		"single",
		"stick",
		"flat",
		"twenty",
		"skin",
		"smile",
		"crease",
		"hole",
		"jump",
		"baby",
		"eight",
		"village",
		"meet",
		"root",
		"buy",
		"raise",
		"solve",
		"metal",
		"whether",
		"push",
		"seven",
		"paragraph",
		"third",
		"shall",
		"held",
		"hair",
		"describe",
		"cook",
		"floor",
		"either",
		"result",
		"burn",
		"hill",
		"safe",
		"cat",
		"century",
		"consider",
		"type",
		"law",
		"bit",
		"coast",
		"copy",
		"phrase",
		"silent",
		"tall",
		"sand",
		"soil",
		"roll",
		"temperature",
		"finger",
		"industry",
		"value",
		"fight",
		"lie",
		"beat",
		"excite",
		"natural",
		"view",
		"sense",
		"capital",
		"chair",
		"danger",
		"fruit",
		"rich",
		"thick",
		"soldier",
		"process",
		"operate",
		"practice",
		"separate",
		"difficult",
		"doctor",
		"please",
		"protect",
		"noon",
		"crop",
		"modern",
		"element",
		"hit",
		"student",
		"corner",
		"party",
		"supply",
		"whose",
		"locate",
		"ring",
		"character",
		"insect",
		"caught",
		"period",
		"indicate",
		"radio",
		"spoke",
		"atom",
		"human",
		"history",
		"effect",
		"electric",
		"expect",
		"bone",
		"rail",
		"imagine",
		"provide",
		"agree",
		"thus",
		"gentle",
		"woman",
		"captain",
		"guess",
		"necessary",
		"sharp",
		"wing",
		"create",
		"neighbor",
		"wash",
		"bat",
		"rather",
		"crowd",
		"corn",
		"compare",
		"poem",
		"string",
		"bell",
		"depend",
		"meat",
		"rub",
		"tube",
		"famous",
		"dollar",
		"stream",
		"fear",
		"sight",
		"thin",
		"triangle",
		"planet",
		"hurry",
		"chief",
		"colony",
		"clock",
		"mine",
		"tie",
		"enter",
		"major",
		"fresh",
		"search",
		"send",
		"yellow",
		"gun",
		"allow",
		"print",
		"dead",
		"spot",
		"desert",
		"suit",
		"current",
		"lift",
		"rose",
		"arrive",
		"master",
		"track",
		"parent",
		"shore",
		"division",
		"sheet",
		"substance",
		"favor",
		"connect",
		"post",
		"spend",
		"chord",
		"fat",
		"glad",
		"original",
		"share",
		"station",
		"dad",
		"bread",
		"charge",
		"proper",
		"bar",
		"offer",
		"segment",
		"slave",
		"duck",
		"instant",
		"market",
		"degree",
		"populate",
		"chick",
		"dear",
		"enemy",
		"reply",
		"drink",
		"occur",
		"support",
		"speech",
		"nature",
		"range",
		"steam",
		"motion",
		"path",
		"liquid",
		"log",
		"meant",
		"quotient",
		"teeth",
		"shell",
		"neck",
		"oxygen",
		"sugar",
		"death",
		"pretty",
		"skill",
		"women",
		"season",
		"solution",
		"magnet",
		"silver",
		"thank",
		"branch",
		"match",
		"suffix",
		"especially",
		"fig",
		"afraid",
		"huge",
		"sister",
		"steel",
		"discuss",
		"forward",
		"similar",
		"guide",
		"experience",
		"score",
		"apple",
		"bought",
		"led",
		"pitch",
		"coat",
		"mass",
		"card",
		"band",
		"rope",
		"slip",
		"win",
		"dream",
		"evening",
		"condition",
		"feed",
		"tool",
		"total",
		"basic",
		"smell",
		"valley",
		"nor",
		"double",
		"seat",
		"continue",
		"block",
		"chart",
		"hat",
		"sell",
		"success",
		"company",
		"subtract",
		"event",
		"particular",
		"deal",
		"swim",
		"term",
		"opposite",
		"wife",
		"shoe",
		"shoulder",
		"spread",
		"arrange",
		"camp",
		"invent",
		"cotton",
		"born",
		"determine",
		"quart",
		"nine",
		"truck",
		"noise",
		"level",
		"chance",
		"gather",
		"shop",
		"stretch",
		"throw",
		"shine",
		"property",
		"column",
		"molecule",
		"select",
		"wrong",
		"gray",
		"repeat",
		"require",
		"broad",
		"prepare",
		"salt",
		"nose",
		"plural",
		"anger",
		"claim",
		"continent"
	];
	const Q = () => {
		let e = [];
		for (let t = 0; t < 12; t++) {
			const t = Math.floor(Math.random() * J.length);
			e.push(J[t] + " ");
		}
		return e;
	};
	var Y = (() => {
			let e = Q(),
				t = null;
			const { subscribe: n, set: r } = G(e);
			return {
				subscribe: n,
				change: function () {
					(e = Q()),
						r(e),
						(function () {
							t = 0;
							for (let n = 0; n < e.length; n++) t += e[n].length;
						})();
				},
				charCount: t
			};
		})(),
		Z = (() => {
			let e = { word: 0, char: 0 };
			const { subscribe: t, set: n, update: r } = G(e);
			return {
				subscribe: t,
				reset: function () {
					(e = { word: 0, char: 0 }), n(e);
				},
				nextChar: function () {
					e.char++, n(e);
				},
				nextWord: function () {
					e.word++, (e.char = 0), n(e);
				}
			};
		})(),
		ee = (e) => e.getMilliseconds() + 1e3 * e.getSeconds() + 6e4 * e.getMinutes(),
		te = (() => {
			let e = [];
			const { subscribe: t, set: n } = G(e);
			return {
				subscribe: t,
				reset: function () {
					(e = []), n(e);
				},
				update: function (t, r) {
					e[t] || (e[t] = []), (e[t][r] = !0), n(e);
				}
			};
		})(),
		ne = (() => {
			let e,
				t = { time: 0, words: 0, speed: 0 };
			const { subscribe: n, set: r } = G(t);
			return {
				subscribe: n,
				reset: function () {
					(t = { time: 0, words: 0, speed: 0 }), r(t), (e = null);
				},
				log: function () {
					t.words++,
						(t.time = ee(new Date()) - e),
						(t.speed = (t.words / t.time) * 1e3 * 60),
						r(t);
				},
				typingStarted: function () {
					e || (e = ee(new Date())), r(t);
				}
			};
		})(),
		re = (() => {
			const { subscribe: e, set: t } = G(50);
			return {
				subscribe: e,
				setSpeed: function (e) {
					t(e), Z.reset(), te.reset(), ne.reset();
				}
			};
		})();
	let se;
	re.subscribe((e) => (se = e));
	const oe = (e, t = 50) => {
		const n = e / t;
		return n >= 1
			? "fastest"
			: n >= 0.9
			? "fast"
			: n >= 0.8
			? "normal"
			: n >= 0.7
			? "slow"
			: "slowest";
	};
	let ae = {};
	function le() {
		for (let e = 97; e < 123; e++)
			ae[String.fromCharCode(e)] = { typed: 0, time: 0, speed: 0 };
	}
	le();
	var ie = (() => {
		let e = null;
		const { subscribe: t, set: n } = G(ae);
		return (
			re.subscribe((e) => {
				!(function (e) {
					for (let t in ae) 0 !== ae[t].typed && (ae[t].label = oe(ae[t].speed, e));
				})(e),
					n(ae);
			}),
			{
				subscribe: t,
				updateKey: function (t) {
					var r;
					ae[t.key] &&
						(e
							? (ae[t.key].typed++,
							  (ae[t.key].time += ee(t.time) - ee(e)),
							  (ae[t.key].speed =
									((r = ae[t.key]), Math.round((r.typed / r.time) * 12e3))),
							  (ae[t.key].label = oe(ae[t.key].speed, se)),
							  (e = new Date()),
							  n(ae))
							: (e = new Date()));
				},
				reset: le
			}
		);
	})();
	let ce, de;
	Z.subscribe((e) => (ce = e)), Y.subscribe((e) => (de = e));
	var ue = (() => {
			let e = { key: null, time: null };
			function t() {
				ie.updateKey(e),
					ce.char < de[ce.word].length - 1
						? Z.nextChar()
						: ce.word < de.length - 1
						? Z.nextWord()
						: (Z.reset(), Y.change(), te.reset());
			}
			function n() {
				e.key === de[ce.word][ce.char] ? t() : te.update(ce.word, ce.char);
			}
			const { subscribe: r, set: s } = G(e, (t) => {
				function r(r) {
					(e = { key: r.key, time: new Date() }), t(e), n();
				}
				return (
					window.addEventListener("keydown", r),
					() => window.removeEventListener("keydown", r)
				);
			});
			return {
				subscribe: r,
				reset: function () {
					(e = { key: null, time: null }), s(e);
				}
			};
		})(),
		fe = (() => {
			let e = !1;
			const { set: t, subscribe: n } = G(e);
			return {
				toggle: function () {
					(e = !e), t(e), Z.reset(), ue.reset(), ne.reset(), te.reset();
				},
				subscribe: n
			};
		})();
	let he, pe, me;
	Y.subscribe((e) => {
		pe = e;
	});
	var ge = (() => {
		let e = { word: 0, char: 0 };
		const { subscribe: t, set: n } = G(e);
		let r;
		function s() {
			clearInterval(r);
		}
		function o() {
			(e = { word: 0, char: 0 }), n(e);
		}
		return (
			re.subscribe((e) => {
				(me = e), o(), s();
			}),
			fe.subscribe((e) => {
				(he = e), o(), s();
			}),
			Z.subscribe((t) => {
				if (!he) return;
				const a = pe.length - 1,
					l = pe[a].length - 1;
				1 === t.char && 0 === t.word
					? (r && s(),
					  (r = setInterval(() => {
							e.char < pe[e.word].length - 1
								? (e.char++, n(e))
								: e.word < pe.length - 1
								? (e.word++, (e.char = 0), n(e))
								: s();
					  }, 6e4 / 6.2 / me)))
					: t.word === a && t.char === l && o();
			}),
			{ subscribe: t, reset: o, stop: s }
		);
	})();
	function we(e, t, n) {
		const r = e.slice();
		return (r[8] = t[n]), (r[10] = n), r;
	}
	function be(e, t, n) {
		const r = e.slice();
		return (r[5] = t[n]), (r[7] = n), r;
	}
	function ye(e) {
		let t,
			n,
			r = (" " === e[8] ? "·" : e[8]) + "";
		return {
			c() {
				(t = y("span")),
					(n = v(r)),
					$(t, "class", "character svelte-rtsb3r"),
					E(t, "current-char", e[1].char === e[10] && e[1].word === e[7]),
					E(t, "space", " " === e[8]),
					E(t, "error", e[2][e[7]] && e[2][e[7]][e[10]]),
					E(
						t,
						"typed-by-target",
						e[3] && (e[4].word > e[7] || (e[4].char >= e[10] && e[4].word === e[7]))
					);
			},
			m(e, r) {
				g(e, t, r), m(t, n);
			},
			p(e, s) {
				1 & s && r !== (r = (" " === e[8] ? "·" : e[8]) + "") && x(n, r),
					2 & s && E(t, "current-char", e[1].char === e[10] && e[1].word === e[7]),
					1 & s && E(t, "space", " " === e[8]),
					4 & s && E(t, "error", e[2][e[7]] && e[2][e[7]][e[10]]),
					24 & s &&
						E(
							t,
							"typed-by-target",
							e[3] && (e[4].word > e[7] || (e[4].char >= e[10] && e[4].word === e[7]))
						);
			},
			d(e) {
				e && w(t);
			}
		};
	}
	function ve(e) {
		let t,
			n = e[5],
			r = [];
		for (let t = 0; t < n.length; t += 1) r[t] = ye(we(e, n, t));
		return {
			c() {
				t = y("div");
				for (let e = 0; e < r.length; e += 1) r[e].c();
				$(t, "class", "word svelte-rtsb3r"),
					E(t, "current-word", e[1].word === e[7]),
					E(t, "typed", e[1].word > e[7]);
			},
			m(e, n) {
				g(e, t, n);
				for (let e = 0; e < r.length; e += 1) r[e].m(t, null);
			},
			p(e, s) {
				if (31 & s) {
					let o;
					for (n = e[5], o = 0; o < n.length; o += 1) {
						const a = we(e, n, o);
						r[o] ? r[o].p(a, s) : ((r[o] = ye(a)), r[o].c(), r[o].m(t, null));
					}
					for (; o < r.length; o += 1) r[o].d(1);
					r.length = n.length;
				}
				2 & s && E(t, "current-word", e[1].word === e[7]),
					2 & s && E(t, "typed", e[1].word > e[7]);
			},
			d(e) {
				e && w(t), b(r, e);
			}
		};
	}
	function ke(t) {
		let n,
			r = t[0],
			s = [];
		for (let e = 0; e < r.length; e += 1) s[e] = ve(be(t, r, e));
		return {
			c() {
				n = y("div");
				for (let e = 0; e < s.length; e += 1) s[e].c();
				$(n, "class", "words svelte-rtsb3r");
			},
			m(e, t) {
				g(e, n, t);
				for (let e = 0; e < s.length; e += 1) s[e].m(n, null);
			},
			p(e, [t]) {
				if (31 & t) {
					let o;
					for (r = e[0], o = 0; o < r.length; o += 1) {
						const a = be(e, r, o);
						s[o] ? s[o].p(a, t) : ((s[o] = ve(a)), s[o].c(), s[o].m(n, null));
					}
					for (; o < s.length; o += 1) s[o].d(1);
					s.length = r.length;
				}
			},
			i: e,
			o: e,
			d(e) {
				e && w(n), b(s, e);
			}
		};
	}
	function $e(e, t, n) {
		let r, s, o, a, l;
		return (
			i(e, Y, (e) => n(0, (r = e))),
			i(e, Z, (e) => n(1, (s = e))),
			i(e, te, (e) => n(2, (o = e))),
			i(e, fe, (e) => n(3, (a = e))),
			i(e, ge, (e) => n(4, (l = e))),
			[r, s, o, a, l]
		);
	}
	class xe extends V {
		constructor(e) {
			super(), K(this, e, $e, ke, l, {});
		}
	}
	function Ee(e) {
		return "[object Date]" === Object.prototype.toString.call(e);
	}
	function Fe(e, t) {
		if (e === t || e != e) return () => e;
		const n = typeof e;
		if (n !== typeof t || Array.isArray(e) !== Array.isArray(t))
			throw new Error("Cannot interpolate values of different type");
		if (Array.isArray(e)) {
			const n = t.map((t, n) => Fe(e[n], t));
			return (e) => n.map((t) => t(e));
		}
		if ("object" === n) {
			if (!e || !t) throw new Error("Object cannot be null");
			if (Ee(e) && Ee(t)) {
				e = e.getTime();
				const n = (t = t.getTime()) - e;
				return (t) => new Date(e + t * n);
			}
			const n = Object.keys(t),
				r = {};
			return (
				n.forEach((n) => {
					r[n] = Fe(e[n], t[n]);
				}),
				(e) => {
					const t = {};
					return (
						n.forEach((n) => {
							t[n] = r[n](e);
						}),
						t
					);
				}
			);
		}
		if ("number" === n) {
			const n = t - e;
			return (t) => e + t * n;
		}
		throw new Error(`Cannot interpolate ${n} values`);
	}
	function je(e, r = {}) {
		const s = G(e);
		let o,
			a = e;
		function l(l, i) {
			if (null == e) return s.set((e = l)), Promise.resolve();
			a = l;
			let c = o,
				d = !1,
				{ delay: m = 0, duration: g = 400, easing: w = t, interpolate: b = Fe } = n(
					n({}, r),
					i
				);
			const y = u() + m;
			let v;
			return (
				(o = (function (e) {
					let t;
					return (
						0 === h.size && f(p),
						{
							promise: new Promise((n) => {
								h.add((t = { c: e, f: n }));
							}),
							abort() {
								h.delete(t);
							}
						}
					);
				})((t) => {
					if (t < y) return !0;
					d || ((v = b(e, l)), "function" == typeof g && (g = g(e, l)), (d = !0)),
						c && (c.abort(), (c = null));
					const n = t - y;
					return n > g ? (s.set((e = l)), !1) : (s.set((e = v(w(n / g)))), !0);
				})),
				o.promise
			);
		}
		return { set: l, update: (t, n) => l(t(a, e), n), subscribe: s.subscribe };
	}
	function Ce(t) {
		let n, r, s, o, a, l, i, c, d, u, f;
		return {
			c() {
				(n = y("div")),
					(r = y("span")),
					(s = y("span")),
					(s.textContent = "Target is"),
					(o = y("span")),
					(a = v(t[1])),
					(l = y("span")),
					(l.textContent = "WPM"),
					(i = y("div")),
					(c = y("input")),
					(d = y("div")),
					(u = y("div")),
					(u.textContent = "What is your target typing speed ?"),
					$(s, "class", "text svelte-6li567"),
					$(o, "class", "value svelte-6li567"),
					$(l, "class", "unit"),
					$(r, "class", "goal svelte-6li567"),
					$(c, "min", Ae),
					$(c, "max", De),
					$(c, "type", "range"),
					$(c, "class", "svelte-6li567"),
					$(d, "class", "bubble svelte-6li567"),
					$(u, "class", "tip svelte-6li567"),
					$(i, "class", "slider svelte-6li567"),
					$(n, "class", "target svelte-6li567");
			},
			m(e, h, p) {
				g(e, n, h),
					m(n, r),
					m(r, s),
					m(r, o),
					m(o, a),
					m(r, l),
					m(n, i),
					m(i, c),
					m(i, d),
					t[3](d),
					m(i, u),
					p && f(),
					(f = k(c, "input", t[2]));
			},
			p(e, [t]) {
				2 & t && x(a, e[1]);
			},
			i: e,
			o: e,
			d(e) {
				e && w(n), t[3](null), f();
			}
		};
	}
	const Ae = 20,
		De = 150;
	function _e(e, t, n) {
		let r, s;
		i(e, re, (e) => n(1, (r = e)));
		return (
			(e.$$.update = () => {
				if (3 & e.$$.dirty) {
					const e = ((r - Ae) / (De - Ae)) * 100;
					s &&
						(n(0, (s.style.left = e + "%"), s),
						n(0, (s.style.animationDuration = 50 / (e + 10) + "s"), s));
				}
			}),
			[
				s,
				r,
				(e) => {
					re.setSpeed(e.target.value);
				},
				function (e) {
					D[e ? "unshift" : "push"](() => {
						n(0, (s = e));
					});
				}
			]
		);
	}
	class ze extends V {
		constructor(e) {
			super(), K(this, e, _e, Ce, l, {});
		}
	}
	function Me(e) {
		let t,
			n,
			r,
			s,
			o,
			a,
			l,
			i,
			c,
			d,
			u,
			f,
			h,
			p,
			b,
			F,
			j,
			C,
			A,
			D,
			_,
			z,
			M = Math.round(e[0]) + "",
			S = e[1].words + "",
			q = (e[2] / 1e3).toFixed(2) + "",
			O = e[3] ? "on" : "off";
		const B = new ze({});
		return {
			c() {
				(t = y("div")),
					(n = y("div")),
					N(B.$$.fragment),
					(r = y("div")),
					(s = y("div")),
					(o = y("div")),
					(a = v(M)),
					(l = y("div")),
					(l.textContent = "WPM"),
					(i = y("div")),
					(c = y("span")),
					(d = v(S)),
					(u = y("span")),
					(u.textContent = "words typed in"),
					(f = y("span")),
					(h = v(q)),
					(p = v(" S")),
					(b = y("div")),
					(F = y("div")),
					(j = y("div")),
					(j.textContent = "SHADOOW mode"),
					(C = y("div")),
					(A = v(O)),
					(D = y("div")),
					(D.innerHTML =
						'<p class="svelte-12n1c2w">compete with your target speed</p>'),
					$(n, "class", "left svelte-12n1c2w"),
					$(o, "class", "value svelte-12n1c2w"),
					$(l, "class", "unit svelte-12n1c2w"),
					$(s, "class", "speed svelte-12n1c2w"),
					$(c, "class", "count svelte-12n1c2w"),
					$(u, "class", "info svelte-12n1c2w"),
					$(f, "class", "count svelte-12n1c2w"),
					$(i, "class", "word-stats svelte-12n1c2w"),
					$(r, "class", "center svelte-12n1c2w"),
					$(j, "class", "text svelte-12n1c2w"),
					$(C, "class", "value svelte-12n1c2w"),
					E(C, "on", e[3]),
					$(D, "class", "tip svelte-12n1c2w"),
					$(F, "class", "chase-mode svelte-12n1c2w"),
					$(b, "class", "right svelte-12n1c2w"),
					$(t, "class", "stats svelte-12n1c2w");
			},
			m(e, w, y) {
				g(e, t, w),
					m(t, n),
					X(B, n, null),
					m(t, r),
					m(r, s),
					m(s, o),
					m(o, a),
					m(s, l),
					m(r, i),
					m(i, c),
					m(c, d),
					m(i, u),
					m(i, f),
					m(f, h),
					m(f, p),
					m(t, b),
					m(b, F),
					m(F, j),
					m(F, C),
					m(C, A),
					m(F, D),
					(_ = !0),
					y && z(),
					(z = k(F, "click", fe.toggle));
			},
			p(e, [t]) {
				(!_ || 1 & t) && M !== (M = Math.round(e[0]) + "") && x(a, M),
					(!_ || 2 & t) && S !== (S = e[1].words + "") && x(d, S),
					(!_ || 4 & t) && q !== (q = (e[2] / 1e3).toFixed(2) + "") && x(h, q),
					(!_ || 8 & t) && O !== (O = e[3] ? "on" : "off") && x(A, O),
					8 & t && E(C, "on", e[3]);
			},
			i(e) {
				_ || (W(B.$$.fragment, e), (_ = !0));
			},
			o(e) {
				H(B.$$.fragment, e), (_ = !1);
			},
			d(e) {
				e && w(t), I(B), z();
			}
		};
	}
	function Se(e, t, n) {
		let r, s, o, a, l, d, u;
		i(e, ue, (e) => n(6, (r = e))),
			i(e, Z, (e) => n(7, (s = e))),
			i(e, Y, (e) => n(8, (o = e))),
			i(e, ne, (e) => n(1, (l = e))),
			i(e, fe, (e) => n(3, (u = e)));
		let f = je(0);
		i(e, f, (e) => n(0, (a = e)));
		let h = je(0);
		return (
			i(e, h, (e) => n(2, (d = e))),
			(e.$$.update = () => {
				192 & e.$$.dirty &&
					r.key &&
					" " !== r.key &&
					1 === s.char &&
					0 === s.word &&
					ne.typingStarted(),
					384 & e.$$.dirty && s.char === o[s.word].length - 1 && ne.log(),
					2 & e.$$.dirty && c(f, (a = l.speed)),
					2 & e.$$.dirty && c(h, (d = l.time));
			}),
			[a, l, d, u, f, h]
		);
	}
	class qe extends V {
		constructor(e) {
			super(), K(this, e, Se, Me, l, {});
		}
	}
	function Oe(e, t, n) {
		const r = e.slice();
		return (r[2] = t[n]), r;
	}
	function Be(e) {
		let t,
			n,
			r,
			s,
			o,
			a,
			l,
			i,
			c,
			d,
			u,
			f,
			h,
			p = e[2] + "",
			b = e[0][e[2]].speed + "",
			k = e[0][e[2]].typed + "",
			E = 1 === e[0][e[2]].typed ? "time" : "times";
		return {
			c() {
				(t = y("div")),
					(n = y("div")),
					(r = v(p)),
					(s = y("div")),
					(o = y("div")),
					(a = v(b)),
					(l = y("span")),
					(l.textContent = "WPM"),
					(i = y("div")),
					(c = v("typed ")),
					(d = v(k)),
					(u = v(" ")),
					(f = v(E)),
					$(n, "class", "name svelte-1tksfjy"),
					$(l, "class", "unit svelte-1tksfjy"),
					$(o, "class", "speed svelte-1tksfjy"),
					$(i, "class", "times svelte-1tksfjy"),
					$(s, "class", "stats svelte-1tksfjy"),
					$(
						t,
						"class",
						(h =
							"key " +
							e[0][e[2]].label +
							" " +
							(e[1].key === e[2] ? "pressed" : "") +
							" svelte-1tksfjy")
					);
			},
			m(e, h) {
				g(e, t, h),
					m(t, n),
					m(n, r),
					m(t, s),
					m(s, o),
					m(o, a),
					m(o, l),
					m(s, i),
					m(i, c),
					m(i, d),
					m(i, u),
					m(i, f);
			},
			p(e, n) {
				1 & n && p !== (p = e[2] + "") && x(r, p),
					1 & n && b !== (b = e[0][e[2]].speed + "") && x(a, b),
					1 & n && k !== (k = e[0][e[2]].typed + "") && x(d, k),
					1 & n && E !== (E = 1 === e[0][e[2]].typed ? "time" : "times") && x(f, E),
					3 & n &&
						h !==
							(h =
								"key " +
								e[0][e[2]].label +
								" " +
								(e[1].key === e[2] ? "pressed" : "") +
								" svelte-1tksfjy") &&
						$(t, "class", h);
			},
			d(e) {
				e && w(t);
			}
		};
	}
	function Le(t) {
		let n,
			r = Object.keys(t[0]),
			s = [];
		for (let e = 0; e < r.length; e += 1) s[e] = Be(Oe(t, r, e));
		return {
			c() {
				n = y("div");
				for (let e = 0; e < s.length; e += 1) s[e].c();
				$(n, "class", "keys svelte-1tksfjy");
			},
			m(e, t) {
				g(e, n, t);
				for (let e = 0; e < s.length; e += 1) s[e].m(n, null);
			},
			p(e, [t]) {
				if (3 & t) {
					let o;
					for (r = Object.keys(e[0]), o = 0; o < r.length; o += 1) {
						const a = Oe(e, r, o);
						s[o] ? s[o].p(a, t) : ((s[o] = Be(a)), s[o].c(), s[o].m(n, null));
					}
					for (; o < s.length; o += 1) s[o].d(1);
					s.length = r.length;
				}
			},
			i: e,
			o: e,
			d(e) {
				e && w(n), b(s, e);
			}
		};
	}
	function Te(e, t, n) {
		let r, s;
		return i(e, ie, (e) => n(0, (r = e))), i(e, ue, (e) => n(1, (s = e))), [r, s];
	}
	class Pe extends V {
		constructor(e) {
			super(), K(this, e, Te, Le, l, {});
		}
	}
	let We = ["HAXXIUM", "LASERWAVE", "XXPRESSO", "DODECAHEDRON"],
		He = [
			{
				bodybg: "#07110a",
				activeword: "#1E3B28",
				activechar: "#A0FF2B",
				typedword: "#2C4D39",
				fontcolor: "#27FF27",
				error: "#E6F8FC",
				fastest: "#27FF27",
				fast: "#acce3d",
				normal: "#FFF216",
				slow: "#FB885C",
				slowest: "#DA274B"
			},
			{
				bodybg: "#200401",
				activeword: "#410802",
				typedword: "#900",
				activechar: "#fa7769",
				fontcolor: "#faa",
				error: "#F1F1F1",
				fastest: "#fbfbfa",
				fast: "#faa",
				normal: "#f77",
				slow: "#f44",
				slowest: "#f00"
			},
			{
				bodybg: "#171717",
				activeword: "#4E3F35",
				activechar: "#CE9A48",
				typedword: "#5E5452",
				fontcolor: "#E5AB6B",
				error: "#E6F8FC",
				fastest: "#00cec9",
				fast: "#55efc4",
				normal: "#81ecec",
				slow: "#74b9ff",
				slowest: "#ff7675"
			},
			{
				bodybg: "#100019",
				activeword: "#360850",
				typedword: "#581B7B",
				activechar: "#fbfbfa",
				fontcolor: "#E2ACFF",
				error: "#FF329B",
				fastest: "#fbfbfa",
				fast: "#642887",
				normal: "#EF50A2",
				slow: "#D62D7E",
				slowest: "#BE0D5D"
			}
		],
		Ne = -1;
	var Xe = () => {
		Ne = Ne == He.length - 1 ? 0 : Ne + 1;
		for (let e in He[Ne])
			document.documentElement.style.setProperty("--" + e, He[Ne][e]),
				document.body.classList.add("fade-in"),
				(document.querySelector(".theme-name").textContent = We[Ne]),
				setTimeout(() => {
					document.body.classList.remove("fade-in");
				}, 1e3);
	};
	function Ie(t) {
		let n, r, s, a, l;
		const i = new qe({}),
			c = new xe({}),
			d = new Pe({});
		return {
			c() {
				N(i.$$.fragment),
					N(c.$$.fragment),
					N(d.$$.fragment),
					(n = y("div")),
					(n.textContent = "reset"),
					(r = y("div")),
					(r.innerHTML =
						'<div class="s1"></div><div class="s2 svelte-1no0zd6"></div><div class="s3 svelte-1no0zd6"></div><div class="s4 svelte-1no0zd6"></div><div class="theme-name svelte-1no0zd6"></div><div class="tip svelte-1no0zd6">theme switcher</div>'),
					(s = y("div")),
					(s.innerHTML =
						'<div class="app svelte-1no0zd6">cybertype</div><div class="info svelte-1no0zd6"><div class="app svelte-1no0zd6"><div class="version"> V.1.0</div></div><div class="creator"><p class="svelte-1no0zd6"> Designed by</p><a href="https://twitter.com/_MananTank" target="black" class="svelte-1no0zd6"> Manan Tank</a></div></div>'),
					$(n, "class", "reset svelte-1no0zd6"),
					$(r, "class", "theme-switch svelte-1no0zd6"),
					$(s, "class", "cybertype svelte-1no0zd6");
			},
			m(e, t, u) {
				X(i, e, t),
					X(c, e, t),
					X(d, e, t),
					g(e, n, t),
					g(e, r, t),
					g(e, s, t),
					(a = !0),
					u && o(l),
					(l = [k(n, "click", Re), k(r, "click", Xe)]);
			},
			p: e,
			i(e) {
				a ||
					(W(i.$$.fragment, e), W(c.$$.fragment, e), W(d.$$.fragment, e), (a = !0));
			},
			o(e) {
				H(i.$$.fragment, e), H(c.$$.fragment, e), H(d.$$.fragment, e), (a = !1);
			},
			d(e) {
				I(i, e), I(c, e), I(d, e), e && w(n), e && w(r), e && w(s), o(l);
			}
		};
	}
	function Re() {
		ue.reset(),
			te.reset(),
			Z.reset(),
			ge.reset(),
			ge.stop(),
			ie.reset(),
			ne.reset();
	}
	function Ke(e) {
		return C(Xe), [];
	}
	return new (class extends V {
		constructor(e) {
			super(), K(this, e, Ke, Ie, l, {});
		}
	})({ target: document.body });
})();

              
            
!
999px

Console