.TeamHero[data-v-40d3cd14] {
	padding: 48px 24px
}

@media (min-width: 768px) {
	.TeamHero[data-v-40d3cd14] {
		padding: 64px 32px 48px
	}
}

.container[data-v-40d3cd14] {
	margin: 0 auto;
	max-width: 960px
}

.title[data-v-40d3cd14],
.lead[data-v-40d3cd14] {
	transition: color .25s
}

.title[data-v-40d3cd14] {
	line-height: 32px;
	font-size: 32px;
	font-weight: 500
}

@media (min-width: 768px) {
	.title[data-v-40d3cd14] {
		line-height: 40px;
		font-size: 40px
	}
}

.lead[data-v-40d3cd14] {
	padding-top: 8px;
	font-size: 16px;
	font-weight: 500;
	max-width: 512px;
	color: var(--vt-c-text-2)
}

.action[data-v-40d3cd14] {
	padding-top: 4px
}

.action[data-v-40d3cd14] a {
	display: inline-block;
	line-height: 20px;
	font-size: 14px;
	font-weight: 500;
	color: var(--vt-c-brand);
	transition: color .25s
}

.action[data-v-40d3cd14] a:hover {
	color: var(--vt-c-brand-dark)
}

.TeamMember[data-v-aa19e85e] {
	position: relative;
	background-color: var(--vt-c-bg-soft);
	transition: background-color .5s
}

@media (min-width: 512px) {
	.TeamMember[data-v-aa19e85e] {
		display: flex
	}
}

@media (min-width: 640px) {
	.TeamMember[data-v-aa19e85e] {
		border-radius: 8px
	}
}

.sponsor[data-v-aa19e85e] {
	position: absolute;
	top: 16px;
	right: 16px;
	display: flex;
	align-items: center;
	border: 1px solid #fd1d7c;
	border-radius: 4px;
	padding: 4px 8px;
	font-size: 12px;
	font-weight: 500;
	color: #fd1d7c;
	transition: color .25s, background-color .25s
}

.sponsor[data-v-aa19e85e]:hover {
	color: var(--vt-c-white);
	background-color: #fd1d7c
}

.sponsor-icon[data-v-aa19e85e] {
	margin-right: 6px;
	width: 14px;
	height: 14px;
	fill: currentColor
}

.avatar[data-v-aa19e85e] {
	flex-shrink: 0;
	padding: 32px 32px 0
}

@media (min-width: 512px) {
	.avatar[data-v-aa19e85e] {
		padding: 32px 0 0 32px
	}
}

.avatar-img[data-v-aa19e85e] {
	border-radius: 50%;
	width: 96px;
	height: 96px;
	transform: translate(-8px)
}

@media (min-width: 512px) {
	.avatar-img[data-v-aa19e85e] {
		width: 80px;
		height: 80px;
		transform: translate(0)
	}
}

.data[data-v-aa19e85e] {
	padding: 20px 32px 32px
}

@media (min-width: 512px) {
	.data[data-v-aa19e85e] {
		padding: 40px 32px 32px
	}
}

.name[data-v-aa19e85e] {
	font-size: 20px;
	font-weight: 500
}

.org[data-v-aa19e85e] {
	padding-top: 4px;
	line-height: 20px;
	max-width: 320px;
	font-size: 14px;
	font-weight: 500;
	color: var(--vt-c-text-2);
	transition: color .5s
}

.company[data-v-aa19e85e] {
	color: var(--vt-c-text-1);
	transition: color .25s
}

.company.link[data-v-aa19e85e]:hover {
	color: var(--vt-c-brand);
	transition: color .5s
}

.profiles[data-v-aa19e85e] {
	padding-top: 16px
}

.desc[data-v-aa19e85e] {
	display: flex
}

.desc+.desc[data-v-aa19e85e] {
	padding-top: 12px
}

.desc-title[data-v-aa19e85e] {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	padding-right: 12px;
	height: 20px
}

.desc-icon[data-v-aa19e85e] {
	width: 16px;
	height: 16px;
	fill: var(--vt-c-text-2);
	transition: fill .25s
}

.desc-icon.code[data-v-aa19e85e] {
	transform: translateY(1px)
}

.desc-list[data-v-aa19e85e] {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -4px
}

.desc-item[data-v-aa19e85e] {
	padding: 0 4px;
	line-height: 20px;
	font-size: 14px;
	font-weight: 500;
	color: var(--vt-c-text-1);
	transition: color .5s
}

.desc-item[data-v-aa19e85e]:after {
	margin-left: 8px;
	content: "\2022";
	color: var(--vt-c-text-3);
	transition: color .25s
}

.desc-item[data-v-aa19e85e]:last-child:after {
	display: none
}

.desc-text[data-v-aa19e85e] {
	line-height: 20px;
	font-size: 14px;
	font-weight: 500;
	color: var(--vt-c-text-1);
	transition: color .25s
}

.desc-link[data-v-aa19e85e] {
	line-height: 20px;
	font-size: 14px;
	font-weight: 500;
	color: var(--vt-c-brand);
	transition: color .25s
}

.desc-link[data-v-aa19e85e]:hover {
	color: var(--vt-c-brand-dark)
}

.social-list[data-v-aa19e85e] {
	display: flex;
	flex-wrap: wrap;
	margin-left: -6px;
	padding-top: 16px
}

.social-item+.social-item[data-v-aa19e85e] {
	padding-left: 8px
}

.social-link[data-v-aa19e85e] {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	color: var(--vt-c-text-2);
	transition: color .25s
}

.social-link[data-v-aa19e85e]:hover {
	color: var(--vt-c-text-1)
}

.social-icon[data-v-aa19e85e] {
	width: 20px;
	height: 20px;
	fill: currentColor
}

@media (min-width: 768px) {
	.TeamList[data-v-dcb58036] {
		padding: 0 32px
	}
}

.container[data-v-dcb58036] {
	border-top: 1px solid var(--vt-c-divider-light);
	padding-top: 24px
}

@media (min-width: 768px) {
	.container[data-v-dcb58036] {
		margin: 0 auto;
		display: flex;
		align-items: flex-start;
		max-width: 960px
	}
}

.info[data-v-dcb58036] {
	flex-shrink: 0;
	padding: 0 24px;
	max-width: 512px
}

@media (min-width: 768px) {
	.info[data-v-dcb58036] {
		position: sticky;
		top: 32px;
		left: 0;
		padding: 0 24px 0 0;
		width: 256px
	}
}

@media (min-width: 960px) {
	.info[data-v-dcb58036] {
		top: 88px;
		padding: 0 64px 0 0;
		width: 384px
	}
}

.title[data-v-dcb58036] {
	font-size: 20px;
	font-weight: 500
}

.lead[data-v-dcb58036] {
	padding-top: 8px;
	line-height: 24px;
	font-size: 14px;
	font-weight: 500;
	color: var(--vt-c-text-2)
}

.members[data-v-dcb58036] {
	padding-top: 24px
}

@media (min-width: 768px) {
	.members[data-v-dcb58036] {
		flex-grow: 1;
		padding-top: 0
	}
}

.member+.member[data-v-dcb58036] {
	padding-top: 16px
}

@media (min-width: 640px) {
	.member[data-v-dcb58036] {
		margin: 0 auto;
		max-width: 592px
	}
}

@media (min-width: 768px) {
	.member[data-v-dcb58036] {
		margin: 0;
		max-width: 100%
	}
}

.TeamPage[data-v-65f5c290] {
	padding-bottom: 16px
}

@media (min-width: 768px) {
	.TeamPage[data-v-65f5c290] {
		padding-bottom: 96px
	}
}

.TeamList+.TeamList[data-v-65f5c290] {
	padding-top: 64px
}

#api-index[data-v-0bab9380] {
	max-width: 1024px;
	margin: 0 auto;
	padding: 64px 32px
}

h1[data-v-0bab9380],
h2[data-v-0bab9380],
h3[data-v-0bab9380] {
	font-weight: 600;
	line-height: 1
}

h1[data-v-0bab9380],
h2[data-v-0bab9380] {
	letter-spacing: -.02em
}

h1[data-v-0bab9380] {
	font-size: 38px
}

h2[data-v-0bab9380] {
	font-size: 24px;
	color: var(--vt-c-text-1);
	margin: 36px 0;
	transition: color .5s;
	padding-top: 36px;
	border-top: 1px solid var(--vt-c-divider-light)
}

h3[data-v-0bab9380] {
	letter-spacing: -.01em;
	color: var(--vt-c-green);
	font-size: 18px;
	margin-bottom: 1em;
	transition: color .5s
}

.api-section[data-v-0bab9380] {
	margin-bottom: 64px
}

.api-groups a[data-v-0bab9380] {
	font-size: 15px;
	font-weight: 500;
	line-height: 2;
	color: var(--vt-c-text-code);
	transition: color .5s
}

.dark api-groups a[data-v-0bab9380] {
	font-weight: 400
}

.api-groups a[data-v-0bab9380]:hover {
	color: var(--vt-c-green);
	transition: none
}

.api-group[data-v-0bab9380] {
	break-inside: avoid;
	overflow: auto;
	margin-bottom: 20px;
	background-color: var(--vt-c-bg-soft);
	border-radius: 8px;
	padding: 28px 32px;
	transition: background-color .5s
}

.header[data-v-0bab9380] {
	display: flex;
	align-items: center;
	justify-content: space-between
}

.api-filter[data-v-0bab9380] {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1rem
}

.api-filter input[data-v-0bab9380] {
	border: 1px solid var(--vt-c-divider);
	border-radius: 8px;
	padding: 6px 12px
}

.api-filter[data-v-0bab9380]:focus {
	border-color: var(--vt-c-green-light)
}

.no-match[data-v-0bab9380] {
	font-size: 1.2em;
	color: var(--vt-c-text-3);
	text-align: center;
	margin-top: 36px;
	padding-top: 36px;
	border-top: 1px solid var(--vt-c-divider-light)
}

@media (max-width: 768px) {
	#api-index[data-v-0bab9380] {
		padding: 42px 24px
	}

	h1[data-v-0bab9380] {
		font-size: 32px;
		margin-bottom: 24px
	}

	h2[data-v-0bab9380] {
		font-size: 22px;
		margin: 42px 0 32px;
		padding-top: 32px
	}

	.api-groups a[data-v-0bab9380] {
		font-size: 14px
	}

	.header[data-v-0bab9380] {
		display: block
	}
}

@media (min-width: 768px) {
	.api-groups[data-v-0bab9380] {
		columns: 2
	}
}

@media (min-width: 1024px) {
	.api-groups[data-v-0bab9380] {
		columns: 3
	}
}

.ThemeHero[data-v-4699da9f] {
	padding: 48px 24px
}

@media (min-width: 768px) {
	.ThemeHero[data-v-4699da9f] {
		padding: 64px 32px 48px
	}
}

.container[data-v-4699da9f] {
	margin: 0 auto;
	max-width: 960px
}

.title[data-v-4699da9f],
.lead[data-v-4699da9f] {
	transition: color .25s
}

.title[data-v-4699da9f] {
	line-height: 32px;
	font-size: 32px;
	font-weight: 500
}

@media (min-width: 768px) {
	.title[data-v-4699da9f] {
		line-height: 40px;
		font-size: 40px
	}
}

.lead[data-v-4699da9f] {
	padding-top: 8px;
	font-size: 16px;
	font-weight: 500;
	max-width: 512px;
	color: var(--vt-c-text-2)
}

.ThemeProduct[data-v-714321d5] {
	display: block
}

.ThemeProduct:hover .figure[data-v-714321d5] {
	transform: translateY(-4px)
}

.ThemeProduct:hover .name[data-v-714321d5] {
	color: var(--vt-c-brand)
}

.figure[data-v-714321d5] {
	border-radius: 8px;
	overflow: hidden;
	transition: transform .25s
}

.data[data-v-714321d5] {
	display: flex;
	justify-content: space-between;
	padding-top: 12px
}

.title[data-v-714321d5] {
	flex-grow: 1;
	padding-right: 8px
}

.name[data-v-714321d5] {
	font-size: 16px;
	font-weight: 500;
	transition: color .25s
}

.description[data-v-714321d5] {
	padding-top: 2px;
	line-height: 20px;
	font-size: 14px;
	font-weight: 500;
	color: var(--vt-c-text-2);
	transition: color .25s
}

.price[data-v-714321d5] {
	text-align: right;
	flex-shrink: 0;
	width: 56px
}

.value[data-v-714321d5] {
	font-size: 16px;
	font-weight: 500
}

.free[data-v-714321d5] {
	display: inline-block;
	border-radius: 4px;
	padding: 0 8px;
	line-height: 24px;
	font-size: 12px;
	font-weight: 500;
	color: var(--vt-c-white);
	background-color: var(--vt-c-brand);
	transform: translateY(-2px)
}

.ThemeListItem[data-v-5b5d9d22] {
	border-top: 1px solid var(--vt-c-divider-light);
	padding-top: 16px
}

@media (min-width: 768px) {
	.ThemeListItem[data-v-5b5d9d22] {
		padding-top: 24px
	}
}

.title[data-v-5b5d9d22] {
	font-size: 20px;
	font-weight: 500;
	transition: color .25s
}

.description[data-v-5b5d9d22] {
	padding-top: 8px;
	font-size: 14px;
	font-weight: 500;
	max-width: 512px;
	color: var(--vt-c-text-2);
	transition: color .25s
}

.description[data-v-5b5d9d22] .link {
	color: var(--vt-c-brand);
	transition: color .25s
}

.description[data-v-5b5d9d22] .link:hover {
	color: var(--vt-c-brand-dark)
}

.container[data-v-5b5d9d22] {
	margin: 0 auto;
	padding-top: 32px;
	max-width: 304px
}

@media (min-width: 640px) {
	.container[data-v-5b5d9d22] {
		max-width: 632px
	}
}

@media (min-width: 960px) {
	.container[data-v-5b5d9d22] {
		max-width: 960px
	}
}

.products[data-v-5b5d9d22] {
	display: flex;
	flex-wrap: wrap;
	margin: -16px -12px
}

.product[data-v-5b5d9d22] {
	flex-shrink: 0;
	padding: 16px 12px;
	width: 100%
}

@media (min-width: 640px) {
	.product[data-v-5b5d9d22] {
		width: 50%
	}
}

@media (min-width: 960px) {
	.product[data-v-5b5d9d22] {
		width: calc(100% / 3)
	}
}

.action[data-v-5b5d9d22] {
	padding-top: 40px;
	text-align: center
}

.action-link[data-v-5b5d9d22] {
	display: inline-block;
	border: 1px solid var(--vt-c-brand);
	border-radius: 24px;
	padding: 0 24px;
	line-height: 48px;
	font-size: 14px;
	font-weight: 500;
	color: var(--vt-c-brand);
	transition: border-color .25s, color .25s
}

.action-link[data-v-5b5d9d22]:hover {
	border-color: var(--vt-c-brand-dark);
	color: var(--vt-c-brand-dark)
}

.ThemeList[data-v-601991b6] {
	padding: 0 24px 96px
}

@media (min-width: 768px) {
	.ThemeList[data-v-601991b6] {
		padding: 0 32px 96px
	}
}

.container[data-v-601991b6] {
	margin: 0 auto;
	max-width: 960px
}

.item+.item[data-v-601991b6] {
	padding-top: 48px
}

@media (min-width: 768px) {
	.item+.item[data-v-601991b6] {
		padding-top: 64px
	}
}

.ThemeContact[data-v-88d40e66] {
	padding: 32px 24px;
	border-bottom: 1px solid var(--vt-c-divider-light);
	background-color: var(--vt-c-bg-soft);
	transition: border-color .25s, background-color .25s
}

.dark .ThemeContact[data-v-88d40e66] {
	border-bottom-color: var(--vt-c-bg-soft)
}

@media (min-width: 768px) {
	.ThemeContact[data-v-88d40e66] {
		padding: 48px 32px
	}
}

.container[data-v-88d40e66] {
	margin: 0 auto;
	max-width: 960px
}

.text[data-v-88d40e66] {
	text-align: center;
	line-height: 24px;
	font-size: 16px;
	font-weight: 500;
	transition: color .25s
}

.text[data-v-88d40e66] .link {
	color: var(--vt-c-brand);
	white-space: nowrap;
	transition: color .25s
}

.text[data-v-88d40e66] .link:hover {
	color: var(--vt-c-brand-dark)
}

.repl-loading {
	font-weight: 600;
	font-size: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 66vh
}

.lds-ring {
	display: inline-block;
	position: relative;
	width: 40px;
	height: 40px;
	margin-bottom: 10px
}

.lds-ring div {
	box-sizing: border-box;
	display: block;
	position: absolute;
	width: 32px;
	height: 32px;
	margin: 4px;
	border: 4px solid;
	border-radius: 50%;
	animation: lds-ring 1.2s cubic-bezier(.5, 0, .5, 1) infinite;
	border-color: var(--vt-c-brand) transparent transparent transparent
}

.lds-ring div:nth-child(1) {
	animation-delay: -.45s
}

.lds-ring div:nth-child(2) {
	animation-delay: -.3s
}

.lds-ring div:nth-child(3) {
	animation-delay: -.15s
}

@keyframes lds-ring {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

.modal-demo {
	position: fixed;
	z-index: 999;
	top: 20%;
	left: 50%;
	width: 300px;
	margin-left: -150px;
	background-color: var(--vt-c-bg);
	padding: 30px;
	border-radius: 8px;
	box-shadow: 0 4px 16px #00000026
}

.list-enter-active,
.list-leave-active {
	transition: all .5s ease
}

.list-enter-from,
.list-leave-to {
	opacity: 0;
	transform: translate(30px)
}

.list2-move,
.list2-enter-active,
.list2-leave-active {
	transition: all .5s ease
}

.list2-enter-from,
.list2-leave-to {
	opacity: 0;
	transform: translate(30px)
}

.list2-leave-active {
	position: absolute !important
}

.fade-enter-active,
.fade-leave-active {
	transition: opacity .5s ease
}

.fade-enter-from,
.fade-leave-to {
	opacity: 0
}

.slide-fade-enter-active {
	transition: all .3s ease-out
}

.slide-fade-leave-active {
	transition: all .8s cubic-bezier(1, .5, .8, 1)
}

.slide-fade-enter-from,
.slide-fade-leave-to {
	transform: translate(20px);
	opacity: 0
}

.bounce-enter-active {
	animation: bounce-in .5s
}

.bounce-leave-active {
	animation: bounce-in .5s reverse
}

@keyframes bounce-in {
	0% {
		transform: scale(0)
	}

	50% {
		transform: scale(1.25)
	}

	to {
		transform: scale(1)
	}
}

.transition-demo-outer,
.transition-demo-inner {
	background: #eee;
	padding: 30px;
	min-height: 100px
}

.transition-demo-inner {
	background: #ccc
}

.nested-enter-active,
.nested-leave-active {
	transition: all .3s ease-in-out
}

.nested-leave-active {
	transition-delay: .25s
}

.nested-enter-from,
.nested-leave-to {
	transform: translateY(30px);
	opacity: 0
}

.nested-enter-active .transition-demo-inner,
.nested-leave-active .transition-demo-inner {
	transition: all .3s ease-in-out
}

.nested-enter-active .transition-demo-inner {
	transition-delay: .25s
}

.nested-enter-from .transition-demo-inner,
.nested-leave-to .transition-demo-inner {
	transform: translate(30px);
	opacity: .001
}

.gsap-box {
	background: var(--vt-c-green);
	margin-top: 20px;
	width: 30px;
	height: 30px;
	border-radius: 50%
}

.transition-demo {
	display: flex;
	align-items: center
}

.transition-demo .btn-container {
	display: inline-block;
	position: relative;
	height: 36px
}

.transition-demo button {
	position: absolute
}

.transition-demo button+button {
	margin: 0
}

.transition-demo .slide-up-enter-active,
.transition-demo .slide-up-leave-active {
	transition: all .25s ease-out
}

.slide-up-enter-from {
	opacity: 0;
	transform: translateY(30px)
}

.slide-up-leave-to {
	opacity: 0;
	transform: translateY(-30px)
}

.draggable[data-v-5901d9d6] {
	background-color: #fff;
	box-shadow: var(--vt-shadow-2);
	width: 320px;
	height: 240px;
	overflow: hidden;
	margin: 30px auto;
	position: relative;
	text-align: center;
	font-size: 14px;
	font-weight: 300;
	user-select: none;
	border-radius: 8px
}

.bg[data-v-5901d9d6] {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0
}

.header[data-v-5901d9d6],
.content[data-v-5901d9d6] {
	position: relative;
	z-index: 1;
	padding: 30px;
	box-sizing: border-box
}

.header[data-v-5901d9d6] {
	color: #fff;
	height: 120px;
	font-size: 2em;
	font-weight: 700
}

.shake {
	animation: shake .82s cubic-bezier(.36, .07, .19, .97) both;
	transform: translate(0)
}

@keyframes shake {

	10%,
	90% {
		transform: translate(-1px)
	}

	20%,
	80% {
		transform: translate(2px)
	}

	30%,
	50%,
	70% {
		transform: translate(-4px)
	}

	40%,
	60% {
		transform: translate(4px)
	}
}

.movearea {
	color: #fff;
	transition: .3s background-color ease;
	border: none
}

.big-number {
	font-weight: 700;
	font-size: 2em
}

.cell[data-v-f36dc108],
.cell input[data-v-f36dc108] {
	height: 1.5em;
	line-height: 1.5;
	font-size: 15px;
	color: var(--vt-c-text-1)
}

.cell span[data-v-f36dc108] {
	padding: 0 6px
}

.cell input[data-v-f36dc108] {
	width: 100%;
	box-sizing: border-box;
	padding: 0 4px
}

.cell input[data-v-f36dc108]:focus {
	border: 2px solid var(--vt-c-divider);
	color: var(--vt-c-text-1)
}

th[data-v-bc75b9c0] {
	color: var(--vt-c-text-1);
	background-color: var(--vt-c-bg-mute);
	padding: 0 1em
}

tr:first-of-type th[data-v-bc75b9c0] {
	width: 100px
}

tr:first-of-type th[data-v-bc75b9c0]:first-of-type {
	width: 25px
}

td[data-v-bc75b9c0] {
	border: 1px solid var(--vt-c-bg-mute);
	padding: 0
}

.vue-mastery-link {
	background-color: var(--vt-c-bg-soft);
	border-radius: 8px;
	padding: 8px 16px 8px 8px;
	transition: color .5s, background-color .5s
}

.vue-mastery-link a {
	display: flex;
	align-items: center
}

.vue-mastery-link .banner {
	background-color: var(--vt-c-white-soft);
	border-radius: 4px;
	width: 96px;
	height: 56px;
	object-fit: cover
}

.vue-mastery-link .description {
	flex: 1;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	color: var(--vt-c-text-1);
	margin: 0 0 0 16px;
	transition: color .5s
}

.vue-mastery-link .description span {
	color: var(--vt-c-brand)
}

.vue-mastery-link .logo-wrapper {
	position: relative;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var(--vt-c-white);
	display: flex;
	justify-content: center;
	align-items: center
}

.vue-mastery-link .logo-wrapper img {
	width: 25px;
	object-fit: contain
}

@media (max-width: 576px) {
	.vue-mastery-link .banner {
		width: 56px
	}

	.vue-mastery-link .description {
		font-size: 12px;
		line-height: 18px
	}

	.vue-mastery-link .logo-wrapper {
		position: relative;
		width: 32px;
		height: 32px
	}
}

.code-examples[data-v-7f91de60] {
	display: flex;
	flex-direction: column
}

.code-example [class*=language][data-v-7f91de60-s] {
	margin-top: 0;
	border-top-left-radius: 0
}

.tabs[data-v-7f91de60] {
	display: flex
}

.tab[data-v-7f91de60] {
	color: #fff;
	background: #292d3ef0;
	border-bottom-color: #ffffff4d;
	padding: 6px 24px;
	border-width: 2px;
	border-style: solid;
	border-top: transparent;
	border-right: transparent;
	border-left: transparent;
	cursor: pointer;
	transition: border, background-color .2s;
	transition-property: border, background-color;
	transition-duration: .2s, .2s;
	transition-timing-function: ease, ease;
	transition-delay: 0s, 0s
}

.tab.active[data-v-7f91de60] {
	background: #292d3e;
	border-bottom: 2px solid var(--vt-c-brand)
}

.tab[data-v-7f91de60]:first-child {
	border-top-left-radius: 8px
}

.tab[data-v-7f91de60]:last-child {
	border-top-right-radius: 8px
}

@media screen and (max-width: 639px) {
	.tabs[data-v-7f91de60] {
		margin: 0 -24px
	}

	.tab[data-v-7f91de60],
	.tab[data-v-7f91de60]:first-child,
	.tab[data-v-7f91de60]:last-child {
		flex-grow: 1;
		text-align: center;
		border-radius: 0
	}
}

.dark .testing-code-examples .tab:not(.active) {
	border-bottom: 2px solid rgba(255, 255, 255, .2);
	background: #2f2f2f;
	color: inherit
}

.dark .testing-code-examples .tab.active {
	background: var(--vt-c-black-soft)
}

[class$=api][data-v-7f91de60-s] {
	display: none
}

.prefers-cypress-api .cypress-api[data-v-7f91de60-s],
.prefers-testing-library-api .testing-library-api[data-v-7f91de60-s],
.prefers-vtu-api .vtu-api[data-v-7f91de60-s] {
	display: block
}

.NewsLetter[data-v-4304c8f1] {
	border-top: 1px solid transparent;
	border-bottom: 1px solid var(--vt-c-divider-light);
	padding: 32px 24px;
	background: var(--vt-c-bg-soft);
	transition: border-color .5s, background-color .5s
}

.dark .NewsLetter[data-v-4304c8f1] {
	border-top-color: var(--vt-c-divider-light);
	border-bottom-color: transparent;
	background: var(--vt-c-bg)
}

@media (min-width: 768px) {
	.NewsLetter[data-v-4304c8f1] {
		padding: 48px 32px
	}
}

.container[data-v-4304c8f1] {
	margin: 0 auto;
	max-width: 512px
}

.title[data-v-4304c8f1] {
	text-align: center;
	font-size: 14px;
	font-weight: 500;
	color: var(--vt-c-text-2);
	transition: color .5s
}

@media (min-width: 375px) {
	.title[data-v-4304c8f1] {
		font-size: 16px
	}
}

.form[data-v-4304c8f1] {
	padding-top: 8px
}

@media (min-width: 375px) {
	.form[data-v-4304c8f1] {
		padding-top: 16px
	}
}

.box[data-v-4304c8f1] {
	position: relative;
	width: 100%
}

.input[data-v-4304c8f1] {
	border: 1px solid var(--vt-c-divider);
	border-radius: 8px;
	padding: 11px 128px 11px 16px;
	font-size: 16px;
	width: 100%;
	color: var(--vt-c-text-1);
	transition: border-color .25s, background-color .25s
}

.input[data-v-4304c8f1]:hover,
.input[data-v-4304c8f1]:focus {
	border-color: var(--vt-c-brand)
}

.input[data-v-4304c8f1]:focus {
	background-color: var(--vt-c-white)
}

.dark .input[data-v-4304c8f1] {
	background-color: var(--vt-c-bg)
}

.dark .input[data-v-4304c8f1]:focus {
	background-color: var(--vt-c-black-pure)
}

.input[data-v-4304c8f1]::placeholder {
	font-weight: 500;
	color: var(--vt-c-text-3);
	transition: color .25s
}

.action[data-v-4304c8f1] {
	position: absolute;
	top: 6px;
	right: 6px
}

.button[data-v-4304c8f1] {
	border-radius: 4px;
	padding: 0 12px;
	letter-spacing: .8px;
	line-height: 36px;
	font-size: 13px;
	font-weight: 500;
	color: var(--vt-c-text-dark-1);
	background-color: var(--vt-c-brand);
	transition: background-color .25s;
	cursor: pointer
}

.button[data-v-4304c8f1]:hover {
	background-color: var(--vt-c-brand-dark)
}

.help[data-v-4304c8f1] {
	margin: 0 auto;
	padding: 8px;
	max-width: 480px;
	text-align: center;
	line-height: 20px;
	font-size: 12px;
	font-weight: 500;
	color: var(--vt-c-text-2);
	transition: color .5s
}

@media (min-width: 375px) {
	.help[data-v-4304c8f1] {
		padding-top: 16px
	}
}

.link[data-v-4304c8f1] {
	color: var(--vt-c-brand);
	transition: color .25s
}

.link[data-v-4304c8f1]:hover {
	color: var(--vt-c-brand-dark)
}

#vuemastery-action[data-v-0c05fbd2] {
	font-size: 16px;
	display: inline-block;
	border-radius: 8px;
	transition: background-color .5s, color .5s;
	position: relative;
	font-weight: 600;
	background-color: var(--vt-c-green);
	color: #fff;
	margin-right: 18px;
	padding: 8px 1em 8px 3em
}

.dark #vuemastery-action[data-v-0c05fbd2] {
	color: var(--vt-c-indigo)
}

#vuemastery-action[data-v-0c05fbd2]:hover {
	background-color: var(--vt-c-green-dark);
	transition-duration: .2s
}

.dark #vuemastery-action[data-v-0c05fbd2]:hover {
	background-color: var(--vt-c-green-light)
}

.icon-play[data-v-0c05fbd2] {
	display: inline;
	position: absolute;
	left: 15px;
	top: 8px;
	margin-left: 2px;
	fill: currentColor;
	width: 1.5em
}

.vuemastery-modal-mask[data-v-0c05fbd2] {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, .2);
	z-index: 30;
	transition: opacity .3s ease
}

.vuemastery-modal-wrapper[data-v-0c05fbd2] {
	display: block;
	box-sizing: border-box;
	border-radius: 8px;
	position: fixed;
	width: 75%;
	height: auto;
	padding: .5em;
	background-color: #f9f9f9;
	box-shadow: 0 0 10px #0003;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 40
}

.dark .vuemastery-modal-wrapper[data-v-0c05fbd2] {
	background-color: var(--vt-c-bg-soft)
}

.vuemastery-modal-content[data-v-0c05fbd2] {
	margin-bottom: 10px
}

.vuemastery-video-space[data-v-0c05fbd2] {
	position: relative;
	padding: 56.25% 0 0
}

.vuemastery-modal-footer-text[data-v-0c05fbd2] {
	color: var(--vt-c-text-2);
	margin-bottom: .5em;
	text-align: center;
	word-spacing: .05em;
	font-size: 12px
}

.vuemastery-modal-footer-text a[data-v-0c05fbd2] {
	color: #42b983;
	font-weight: 600
}

.dark .vuemastery-modal-footer-text[data-v-0c05fbd2] {
	color: var(--vt-c-text-2);
	font-weight: 600
}

@media (max-width: 360px) {
	#vuemastery-action[data-v-0c05fbd2] {
		margin-right: 0
	}
}

section[data-v-0067efe0] {
	padding: 42px 32px
}

#hero[data-v-0067efe0] {
	padding: 96px 32px;
	text-align: center
}

.tagline[data-v-0067efe0] {
	font-size: 76px;
	line-height: 1.25;
	font-weight: 900;
	letter-spacing: -1.5px;
	max-width: 960px;
	margin: 0 auto
}

html:not(.dark) .accent[data-v-0067efe0],
.dark .tagline[data-v-0067efe0] {
	background: -webkit-linear-gradient(315deg, #42d392 25%, #647eff);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent
}

.description[data-v-0067efe0] {
	max-width: 960px;
	line-height: 1.5;
	color: var(--vt-c-text-2);
	transition: color .5s;
	font-size: 22px;
	margin: 24px auto 40px
}

.actions a[data-v-0067efe0] {
	font-size: 16px;
	display: inline-block;
	background-color: var(--vt-c-bg-mute);
	padding: 8px 18px;
	font-weight: 500;
	border-radius: 8px;
	transition: background-color .5s, color .5s
}

.actions .get-started[data-v-0067efe0] {
	margin-right: 18px
}

.actions .icon[data-v-0067efe0] {
	display: inline;
	position: relative;
	top: -1px;
	margin-left: 2px;
	fill: currentColor;
	transition: transform .2s
}

.actions .get-started[data-v-0067efe0]:hover {
	transition-duration: .2s
}

.actions .get-started:hover .icon[data-v-0067efe0] {
	transform: translate(2px)
}

.actions .get-started[data-v-0067efe0],
.actions .setup[data-v-0067efe0] {
	color: var(--vt-c-text-code)
}

.actions .get-started[data-v-0067efe0]:hover,
.actions .setup[data-v-0067efe0]:hover {
	background-color: var(--vt-c-gray-light-4);
	transition-duration: .2s
}

.dark .actions .get-started[data-v-0067efe0]:hover,
.dark .actions .setup[data-v-0067efe0]:hover {
	background-color: var(--vt-c-gray-dark-3)
}

#special-sponsor[data-v-0067efe0] {
	border-top: 1px solid var(--vt-c-divider-light);
	border-bottom: 1px solid var(--vt-c-divider-light);
	padding: 12px 24px;
	text-align: center
}

#special-sponsor span[data-v-0067efe0] {
	color: var(--vt-c-text-2);
	font-weight: 500;
	font-size: 13px;
	vertical-align: middle;
	margin: 0 24px
}

#special-sponsor img[data-v-0067efe0] {
	display: inline-block;
	vertical-align: middle;
	height: 36px
}

.dark #special-sponsor img[data-v-0067efe0] {
	filter: grayscale(1) invert(1)
}

#highlights[data-v-0067efe0] {
	max-width: 960px;
	margin: 0 auto;
	color: var(--vt-c-text-2)
}

#highlights h2[data-v-0067efe0] {
	font-weight: 600;
	font-size: 20px;
	letter-spacing: -.4px;
	color: var(--vt-c-text-1);
	transition: color .5s;
	margin-bottom: .75em
}

#highlights p[data-v-0067efe0] {
	font-weight: 400;
	font-size: 15px
}

#highlights .vt-box[data-v-0067efe0] {
	background-color: transparent
}

#sponsors[data-v-0067efe0] {
	max-width: 900px;
	margin: 0 auto
}

#sponsors h2[data-v-0067efe0] {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 1em
}

#sponsors .sponsor-container[data-v-0067efe0] {
	margin-bottom: 3em
}

@media (max-width: 960px) {
	.tagline[data-v-0067efe0] {
		font-size: 64px;
		letter-spacing: -.5px
	}

	.description[data-v-0067efe0] {
		font-size: 18px;
		margin-bottom: 48px
	}
}

@media (max-width: 768px) {
	.tagline[data-v-0067efe0] {
		font-size: 48px;
		letter-spacing: -.5px
	}
}

@media (max-width: 576px) {
	#hero[data-v-0067efe0] {
		padding: 64px 32px
	}

	.description[data-v-0067efe0] {
		font-size: 16px;
		margin: 18px 0 30px
	}

	#special-sponsor img[data-v-0067efe0] {
		display: block;
		margin: 2px auto 1px
	}

	#highlights h3[data-v-0067efe0] {
		margin-bottom: .6em
	}

	#highlights .vt-box[data-v-0067efe0] {
		padding: 20px 36px
	}

	.actions a[data-v-0067efe0] {
		margin: .5em 0
	}
}

@media (max-width: 370px) {
	.tagline[data-v-0067efe0] {
		font-size: 36px
	}
}

.partner-page[data-v-d2491efe] {
	max-width: 1080px;
	margin: 2em auto;
	padding: 0 28px 64px
}

.back[data-v-d2491efe] {
	display: block;
	font-size: .9em;
	font-weight: 600;
	margin: 24px 0 96px
}

.back a[data-v-d2491efe] {
	color: var(--vt-c-text-3);
	transition: color .5s
}

.back a[data-v-d2491efe]:hover {
	color: var(--vt-c-text-2)
}

.icon[data-v-d2491efe] {
	width: 22px;
	height: 22px;
	display: inline-block;
	fill: var(--vt-c-text-3);
	position: relative;
	top: -1px;
	margin-right: 4px
}

.description[data-v-d2491efe] {
	max-width: 688px;
	margin: 4em auto
}

h2[data-v-d2491efe] {
	font-size: 1.8em;
	font-weight: 700;
	margin-top: 96px;
	margin-bottom: 48px;
	text-align: center
}

.description p[data-v-d2491efe] {
	margin-bottom: 1em;
	font-size: 17px;
	line-height: 1.6em;
	color: var(--vt-c-text-2)
}

.actions[data-v-d2491efe] {
	text-align: center;
	margin-bottom: 24px
}

.actions a[data-v-d2491efe] {
	text-align: center;
	background-color: var(--vt-c-brand);
	color: var(--vt-c-bg);
	padding: 12px 24px;
	font-weight: 600;
	border-radius: 6px;
	transition: background-color .5s, color .5s;
	margin: 0 8px
}

.actions a[data-v-d2491efe]:hover {
	background-color: var(--vt-c-brand-dark)
}

.actions a.contact[data-v-d2491efe] {
	color: var(--vt-c-text-code);
	background-color: var(--vt-c-bg-mute)
}

.actions a.contact[data-v-d2491efe]:hover {
	background-color: var(--vt-c-gray-light-4)
}

.dark .actions a.contact[data-v-d2491efe]:hover {
	background-color: var(--vt-c-gray-dark-3)
}

.hiring[data-v-d2491efe] {
	text-align: center
}

.hiring a[data-v-d2491efe] {
	display: inline-block;
	font-size: 15px;
	font-weight: 500;
	color: var(--vt-c-text-2);
	border-top: 1px solid var(--vt-c-divider-light);
	margin-top: 16px;
	padding-top: 20px
}

.hiring a[data-v-d2491efe]:hover {
	color: var(--vt-c-green)
}

@media (max-width: 768px) {
	.back[data-v-d2491efe] {
		margin-bottom: 48px
	}

	h2[data-v-d2491efe] {
		margin-top: 48px
	}
}

.partner-card[data-v-e4220baa] {
	background-color: var(--vt-c-bg);
	padding: 24px 28px;
	border-radius: 4px;
	box-shadow: 0 12px 12px #0000000d;
	display: flex;
	flex-direction: column;
	width: 48.5%;
	margin-bottom: 36px;
	font-size: 15px;
	transition: background-color .5s, box-shadow .25s ease, border-color .25s ease
}

.partner-card.hero[data-v-e4220baa] {
	font-size: 16px;
	flex-direction: row;
	width: 100%
}

.partner-card.page[data-v-e4220baa] {
	padding: 0
}

h3[data-v-e4220baa] {
	font-size: 1.3em;
	font-weight: 700;
	letter-spacing: -.1px;
	margin-bottom: 1em
}

.logo[data-v-e4220baa] {
	margin-bottom: 1em;
	max-width: 240px;
	max-height: 120px
}

.logo.dark[data-v-e4220baa],
.dark .flipLogo .logo[data-v-e4220baa]:not(.dark) {
	display: none
}

.dark .logo.dark[data-v-e4220baa] {
	display: inline-block
}

.partner-card:not(.hero) .big[data-v-e4220baa] {
	margin-top: auto
}

.partner-card.hero .info[data-v-e4220baa] {
	margin-right: 2em
}

.partner-card.hero .big[data-v-e4220baa] {
	display: inline-block;
	margin-left: auto;
	width: 60%;
	max-height: 360px;
	object-fit: cover
}

@media (max-width: 768px) {
	.partner-card[data-v-e4220baa] {
		width: 100%
	}

	.partner-card.hero[data-v-e4220baa] {
		flex-direction: column
	}

	.logo[data-v-e4220baa] {
		max-width: 200px
	}

	.partner-card.hero .big[data-v-e4220baa] {
		width: 100%
	}
}

.partner-card[data-v-e4220baa]:hover {
	box-shadow: 0 12px 12px #0000001a
}

.partner-card:hover h3[data-v-e4220baa] {
	color: var(--vt-c-green)
}

.partner-card h3[data-v-e4220baa] {
	transition: color .25s ease
}

.dark .partner-card[data-v-e4220baa],
.partner-card.page[data-v-e4220baa] {
	box-shadow: none !important
}

.dark .partner-card[data-v-e4220baa]:not(.hero) {
	border: 1px solid var(--vt-c-divider-light)
}

.dark .partner-card[data-v-e4220baa]:not(.hero):hover {
	border-color: #555
}

.partner-card h3[data-v-e4220baa] {
	font-size: 1.5em;
	font-weight: 700;
	letter-spacing: -.1px;
	margin-bottom: .4em
}

.partner-card p[data-v-e4220baa] {
	margin-bottom: 1.6em
}

.region[data-v-e4220baa] {
	color: var(--vt-c-text-2);
	font-size: .9em
}

.region svg[data-v-e4220baa] {
	display: inline-block;
	opacity: .5;
	position: relative;
	top: -1px;
	left: -2px
}

h4[data-v-e4220baa] {
	font-size: 1.2em;
	font-weight: 600;
	margin-bottom: .6em
}

.proficiency[data-v-e4220baa] {
	display: inline-block;
	color: var(--vt-c-text-code);
	font-weight: 600;
	font-size: .85em;
	margin: 2px;
	background-color: var(--vt-c-bg-mute);
	padding: 4px 10px;
	border-radius: 6px
}

input[data-v-4e4d5704] {
	width: 100%;
	padding: 8px 12px 8px 32px;
	border-bottom: 1px solid var(--vt-c-divider-light);
	margin-bottom: 2em
}

.container[data-v-4e4d5704] {
	max-width: 960px;
	margin: 1em auto 2em;
	padding: 0 28px;
	position: relative
}

.icon[data-v-4e4d5704] {
	width: 18px;
	height: 18px;
	fill: var(--vt-c-text-3);
	position: absolute;
	top: 12px;
	left: 32px
}

.PartnerHero[data-v-410b540a] {
	padding: 48px 24px;
	text-align: center;
	margin: 0 auto;
	max-width: 688px
}

@media (min-width: 768px) {
	.PartnerHero[data-v-410b540a] {
		padding: 64px 32px
	}
}

.title[data-v-410b540a],
.lead[data-v-410b540a],
.PartnerHero[data-v-410b540a] .link {
	transition: color .25s
}

.title[data-v-410b540a] {
	line-height: 32px;
	font-size: 32px;
	font-weight: 500;
	margin-bottom: .3em
}

@media (min-width: 768px) {
	.title[data-v-410b540a] {
		line-height: 40px;
		font-size: 40px
	}
}

.lead[data-v-410b540a] {
	padding-top: 8px;
	font-size: 16px;
	font-weight: 500;
	color: var(--vt-c-text-2)
}

.lead a[data-v-410b540a],
.PartnerHero[data-v-410b540a] .link {
	color: var(--vt-c-brand)
}

.PartnerHero[data-v-410b540a] .link:hover {
	color: var(--vt-c-brand-dark)
}

.PartnerList[data-v-ef782024] {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between
}

.divider[data-v-364b1664] {
	width: 100px;
	margin: 0 auto;
	border-top: 1px solid var(--vt-c-divider-light)
}

.join-container[data-v-364b1664] {
	max-width: 688px;
	padding: 28px 28px 96px;
	text-align: center;
	margin: 0 auto
}

.lead[data-v-364b1664] {
	color: var(--vt-c-text-2);
	font-weight: 500;
	font-size: 18px
}

h2[data-v-364b1664] {
	font-weight: 600;
	letter-spacing: -.5px;
	font-size: 34px;
	line-height: 1.2;
	margin: .5em 0 1em
}

p[data-v-364b1664] {
	color: var(--vt-c-text-2)
}

.join[data-v-364b1664] {
	margin-top: 2em;
	display: inline-block;
	text-align: center;
	background-color: var(--vt-c-bg-mute);
	color: var(--vt-c-text-code);
	padding: 12px 24px;
	font-weight: 600;
	border-radius: 6px;
	transition: background-color .5s, color .5s
}

.join[data-v-364b1664]:hover {
	background-color: var(--vt-c-gray-light-4)
}

.dark .join[data-v-364b1664]:hover {
	background-color: var(--vt-c-gray-dark-3)
}

.PartnerPage[data-v-763baa6a] {
	padding-bottom: 16px
}

.spotlight[data-v-763baa6a] {
	background-color: var(--vt-c-bg-soft)
}

.spotlight-inner[data-v-763baa6a] {
	padding: 36px 48px;
	max-width: 1280px;
	margin: 0 auto
}

h2[data-v-763baa6a] {
	font-size: 1.1em;
	font-weight: 600;
	margin-bottom: 1.5em;
	color: var(--vt-c-text-2)
}

.featured[data-v-763baa6a] {
	padding: 36px 48px;
	max-width: 960px;
	margin: 0 auto
}

.browse-all[data-v-763baa6a] {
	display: block;
	margin: 1.5em auto;
	width: 240px;
	text-align: center;
	background-color: var(--vt-c-brand);
	color: var(--vt-c-bg);
	padding: 12px 24px;
	font-weight: 600;
	border-radius: 6px;
	transition: background-color .5s, color .5s
}

.browse-all[data-v-763baa6a]:hover {
	background-color: var(--vt-c-brand-dark)
}

@media (max-width: 768px) {

	.spotlight-inner[data-v-763baa6a],
	.featured[data-v-763baa6a] {
		padding: 36px 28px
	}
}

.vue-repl[data-v-ea6125de] {
	max-width: 1105px;
	border-right: 1px solid var(--vt-c-divider-light);
	height: calc(100vh - var(--vt-nav-height) - var(--vt-banner-height, 0px))
}

@media (max-width: 960px) {
	.vue-repl[data-v-ea6125de] {
		border: none;
		height: calc(100vh - var(--vt-nav-height) - var(--vt-banner-height, 0px) - 48px)
	}
}

.split-pane[data-v-427f8a98] {
	display: flex;
	height: 100%;
	position: relative
}

.split-pane.dragging[data-v-427f8a98] {
	cursor: ew-resize
}

.dragging .left[data-v-427f8a98],
.dragging .right[data-v-427f8a98] {
	pointer-events: none
}

.left[data-v-427f8a98],
.right[data-v-427f8a98] {
	position: relative;
	height: 100%
}

.left[data-v-427f8a98] {
	border-right: 1px solid var(--border)
}

.dragger[data-v-427f8a98] {
	position: absolute;
	z-index: 3;
	top: 0;
	bottom: 0;
	right: -5px;
	width: 10px;
	cursor: ew-resize
}

.toggler[data-v-427f8a98] {
	display: none;
	z-index: 3;
	font-family: var(--font-code);
	color: var(--text-light);
	position: absolute;
	left: 50%;
	bottom: 20px;
	background-color: var(--bg);
	padding: 8px 12px;
	border-radius: 8px;
	transform: translate(-50%);
	box-shadow: 0 3px 8px #00000040
}

.dark .toggler[data-v-427f8a98] {
	background-color: var(--bg)
}

@media (min-width: 721px) {
	.split-pane.vertical[data-v-427f8a98] {
		display: block
	}

	.split-pane.vertical.dragging[data-v-427f8a98] {
		cursor: ns-resize
	}

	.vertical .dragger[data-v-427f8a98] {
		top: auto;
		height: 10px;
		width: 100%;
		left: 0;
		right: 0;
		bottom: -5px;
		cursor: ns-resize
	}

	.vertical .left[data-v-427f8a98],
	.vertical .right[data-v-427f8a98] {
		width: 100%
	}

	.vertical .left[data-v-427f8a98] {
		border-right: none;
		border-bottom: 1px solid var(--border)
	}
}

@media (max-width: 720px) {

	.left[data-v-427f8a98],
	.right[data-v-427f8a98] {
		width: 100% !important;
		height: 100% !important
	}

	.dragger[data-v-427f8a98] {
		display: none
	}

	.split-pane .toggler[data-v-427f8a98] {
		display: block
	}

	.split-pane .right[data-v-427f8a98] {
		display: none
	}

	.split-pane.show-output .right[data-v-427f8a98] {
		display: block
	}

	.split-pane.show-output .left[data-v-427f8a98] {
		display: none
	}
}

.file-selector[data-v-6e00d5ce] {
	display: flex;
	box-sizing: border-box;
	border-bottom: 1px solid var(--border);
	background-color: var(--bg);
	overflow-y: hidden;
	overflow-x: auto;
	white-space: nowrap;
	position: relative;
	height: var(--header-height)
}

.file-selector[data-v-6e00d5ce]::-webkit-scrollbar {
	height: 1px
}

.file-selector[data-v-6e00d5ce]::-webkit-scrollbar-track {
	background-color: var(--border)
}

.file-selector[data-v-6e00d5ce]::-webkit-scrollbar-thumb {
	background-color: var(--color-branding)
}

.file-selector.has-import-map .add[data-v-6e00d5ce] {
	margin-right: 10px
}

.file[data-v-6e00d5ce] {
	display: inline-block;
	font-size: 13px;
	font-family: var(--font-code);
	cursor: pointer;
	color: var(--text-light);
	box-sizing: border-box
}

.file.active[data-v-6e00d5ce] {
	color: var(--color-branding);
	border-bottom: 3px solid var(--color-branding);
	cursor: text
}

.file span[data-v-6e00d5ce] {
	display: inline-block;
	padding: 8px 10px 6px;
	line-height: 20px
}

.file.pending input[data-v-6e00d5ce] {
	width: 90px;
	height: 30px;
	line-height: 30px;
	outline: none;
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 0 0 0 10px;
	margin-top: 2px;
	margin-left: 6px;
	font-family: var(--font-code);
	font-size: 12px
}

.file .remove[data-v-6e00d5ce] {
	display: inline-block;
	vertical-align: middle;
	line-height: 12px;
	cursor: pointer;
	padding-left: 0
}

.add[data-v-6e00d5ce] {
	font-size: 18px;
	font-family: var(--font-code);
	color: #999;
	vertical-align: middle;
	margin-left: 6px;
	position: relative;
	top: -1px
}

.add[data-v-6e00d5ce]:hover {
	color: var(--color-branding)
}

.icon[data-v-6e00d5ce] {
	margin-top: -1px
}

.import-map-wrapper[data-v-6e00d5ce] {
	position: sticky;
	margin-left: auto;
	top: 0;
	right: 0;
	padding-left: 30px;
	background-color: var(--bg);
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 25%)
}

.dark .import-map-wrapper[data-v-6e00d5ce] {
	background: linear-gradient(90deg, rgba(26, 26, 26, 0) 0%, rgba(26, 26, 26, 1) 25%)
}

.CodeMirror {
	color: var(--symbols);
	--symbols: #777;
	--base: #545281;
	--comment: hsl(210, 25%, 60%);
	--keyword: #af4ab1;
	--variable: var(--base);
	--function: #c25205;
	--string: #2ba46d;
	--number: #c25205;
	--tags: #dd0000;
	--brackets: var(--comment);
	--qualifier: #ff6032;
	--important: var(--string);
	--attribute: #9c3eda;
	--property: #6182b8;
	--selected-bg: #d7d4f0;
	--selected-bg-non-focus: #d9d9d9;
	--cursor: #000;
	direction: ltr;
	font-family: var(--font-code);
	height: auto
}

.dark .CodeMirror {
	color: var(--symbols);
	--symbols: #89ddff;
	--base: #a6accd;
	--comment: #6d6d6d;
	--keyword: #89ddff;
	--string: #c3e88d;
	--variable: #82aaff;
	--number: #f78c6c;
	--tags: #f07178;
	--brackets: var(--symbols);
	--property: #f07178;
	--attribute: #c792ea;
	--cursor: #fff;
	--selected-bg: rgba(255, 255, 255, .1);
	--selected-bg-non-focus: rgba(255, 255, 255, .15)
}

.CodeMirror-lines {
	padding: 4px 0
}

.CodeMirror pre {
	padding: 0 4px
}

.CodeMirror-scrollbar-filler,
.CodeMirror-gutter-filler {
	background-color: #fff
}

.CodeMirror-gutters {
	border-right: 1px solid var(--border);
	background-color: transparent;
	white-space: nowrap
}

.CodeMirror-linenumber {
	padding: 0 3px 0 5px;
	min-width: 20px;
	text-align: right;
	color: var(--comment);
	white-space: nowrap;
	opacity: .6
}

.CodeMirror-guttermarker {
	color: #000
}

.CodeMirror-guttermarker-subtle {
	color: #999
}

.CodeMirror-foldmarker {
	color: #414141;
	text-shadow: #ff9966 1px 1px 2px, #ff9966 -1px -1px 2px, #ff9966 1px -1px 2px, #ff9966 -1px 1px 2px;
	font-family: arial;
	line-height: .3;
	cursor: pointer
}

.CodeMirror-foldgutter {
	width: .7em
}

.CodeMirror-foldgutter-open,
.CodeMirror-foldgutter-folded {
	cursor: pointer
}

.CodeMirror-foldgutter-open:after,
.CodeMirror-foldgutter-folded:after {
	content: ">";
	font-size: .8em;
	opacity: .8;
	transition: transform .2s;
	display: inline-block;
	top: -.1em;
	position: relative;
	transform: rotate(90deg)
}

.CodeMirror-foldgutter-folded:after {
	transform: none
}

.CodeMirror-cursor {
	border-left: 1px solid var(--cursor);
	border-right: none;
	width: 0
}

.CodeMirror div.CodeMirror-secondarycursor {
	border-left: 1px solid silver
}

.cm-fat-cursor .CodeMirror-cursor {
	width: auto;
	border: 0 !important;
	background: #7e7
}

.cm-fat-cursor div.CodeMirror-cursors {
	z-index: 1
}

.cm-fat-cursor-mark {
	background-color: #14ff1480;
	-webkit-animation: blink 1.06s steps(1) infinite;
	-moz-animation: blink 1.06s steps(1) infinite;
	animation: blink 1.06s steps(1) infinite
}

.cm-animate-fat-cursor {
	width: auto;
	border: 0;
	-webkit-animation: blink 1.06s steps(1) infinite;
	-moz-animation: blink 1.06s steps(1) infinite;
	animation: blink 1.06s steps(1) infinite;
	background-color: #7e7
}

@-moz-keyframes blink {
	50% {
		background-color: transparent
	}
}

@-webkit-keyframes blink {
	50% {
		background-color: transparent
	}
}

@keyframes blink {
	50% {
		background-color: transparent
	}
}

.cm-tab {
	display: inline-block;
	text-decoration: inherit
}

.CodeMirror-rulers {
	position: absolute;
	left: 0;
	right: 0;
	top: -50px;
	bottom: -20px;
	overflow: hidden
}

.CodeMirror-ruler {
	border-left: 1px solid #ccc;
	top: 0;
	bottom: 0;
	position: absolute
}

.cm-s-default.CodeMirror {
	background-color: transparent
}

.cm-s-default .cm-header {
	color: #00f
}

.cm-s-default .cm-quote {
	color: #090
}

.cm-negative {
	color: #d44
}

.cm-positive {
	color: #292
}

.cm-header,
.cm-strong {
	font-weight: 700
}

.cm-em {
	font-style: italic
}

.cm-link {
	text-decoration: underline
}

.cm-strikethrough {
	text-decoration: line-through
}

.cm-s-default .cm-atom,
.cm-s-default .cm-def,
.cm-s-default .cm-variable-2,
.cm-s-default .cm-variable-3,
.cm-s-default .cm-punctuation {
	color: var(--base)
}

.cm-s-default .cm-property {
	color: var(--property)
}

.cm-s-default .cm-hr,
.cm-s-default .cm-comment {
	color: var(--comment)
}

.cm-s-default .cm-attribute {
	color: var(--attribute)
}

.cm-s-default .cm-keyword {
	color: var(--keyword)
}

.cm-s-default .cm-variable {
	color: var(--variable)
}

.cm-s-default .cm-tag {
	color: var(--tags)
}

.cm-s-default .cm-bracket {
	color: var(--brackets)
}

.cm-s-default .cm-number {
	color: var(--number)
}

.cm-s-default .cm-string,
.cm-s-default .cm-string-2 {
	color: var(--string)
}

.cm-s-default .cm-type {
	color: #085
}

.cm-s-default .cm-meta {
	color: #555
}

.cm-s-default .cm-qualifier {
	color: var(--qualifier)
}

.cm-s-default .cm-builtin {
	color: #7539ff
}

.cm-s-default .cm-link {
	color: var(--flash)
}

.cm-s-default .cm-error,
.cm-invalidchar {
	color: #ff008c
}

.CodeMirror-composing {
	border-bottom: 2px solid
}

div.CodeMirror span.CodeMirror-matchingbracket {
	color: #0b0
}

div.CodeMirror span.CodeMirror-nonmatchingbracket {
	color: #a22
}

.CodeMirror-matchingtag {
	background: rgba(255, 150, 0, .3)
}

.CodeMirror-activeline-background {
	background: #e8f2ff
}

.CodeMirror {
	position: relative;
	overflow: hidden;
	background: white
}

.CodeMirror-scroll {
	overflow: scroll !important;
	margin-bottom: -30px;
	margin-right: -30px;
	padding-bottom: 30px;
	height: 100%;
	outline: none;
	position: relative
}

.CodeMirror-sizer {
	position: relative;
	border-right: 30px solid transparent
}

.CodeMirror-vscrollbar,
.CodeMirror-hscrollbar,
.CodeMirror-scrollbar-filler,
.CodeMirror-gutter-filler {
	position: absolute;
	z-index: 6;
	display: none
}

.CodeMirror-vscrollbar {
	right: 0;
	top: 0;
	overflow-x: hidden;
	overflow-y: scroll
}

.CodeMirror-hscrollbar {
	bottom: 0;
	left: 0;
	overflow-y: hidden;
	overflow-x: scroll
}

.CodeMirror-scrollbar-filler {
	right: 0;
	bottom: 0
}

.CodeMirror-gutter-filler {
	left: 0;
	bottom: 0
}

.CodeMirror-gutters {
	position: absolute;
	left: 0;
	top: 0;
	min-height: 100%;
	z-index: 3
}

.CodeMirror-gutter {
	white-space: normal;
	height: 100%;
	display: inline-block;
	vertical-align: top;
	margin-bottom: -30px
}

.CodeMirror-gutter-wrapper {
	position: absolute;
	z-index: 4;
	background: none !important;
	border: none !important
}

.CodeMirror-gutter-background {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 4
}

.CodeMirror-gutter-elt {
	position: absolute;
	cursor: default;
	z-index: 4
}

.CodeMirror-gutter-wrapper ::selection {
	background-color: transparent
}

.CodeMirror-gutter-wrapper ::-moz-selection {
	background-color: transparent
}

.CodeMirror-lines {
	cursor: text;
	min-height: 1px
}

.CodeMirror pre {
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
	border-width: 0;
	background: transparent;
	font-family: inherit;
	font-size: inherit;
	margin: 0;
	white-space: pre;
	word-wrap: normal;
	line-height: inherit;
	color: inherit;
	z-index: 2;
	position: relative;
	overflow: visible;
	-webkit-tap-highlight-color: transparent;
	-webkit-font-variant-ligatures: contextual;
	font-variant-ligatures: contextual
}

.CodeMirror-wrap pre {
	word-wrap: break-word;
	white-space: pre-wrap;
	word-break: normal
}

.CodeMirror-linebackground {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 0
}

.CodeMirror-linewidget {
	position: relative;
	z-index: 2;
	padding: .1px
}

.CodeMirror-rtl pre {
	direction: rtl
}

.CodeMirror-code {
	outline: none
}

.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-gutter,
.CodeMirror-gutters,
.CodeMirror-linenumber {
	-moz-box-sizing: content-box;
	box-sizing: content-box
}

.CodeMirror-measure {
	position: absolute;
	width: 100%;
	height: 0;
	overflow: hidden;
	visibility: hidden
}

.CodeMirror-cursor {
	position: absolute;
	pointer-events: none
}

.CodeMirror-measure pre {
	position: static
}

div.CodeMirror-cursors {
	visibility: hidden;
	position: relative;
	z-index: 3
}

div.CodeMirror-dragcursors,
.CodeMirror-focused div.CodeMirror-cursors {
	visibility: visible
}

.CodeMirror-selected {
	background: var(--selected-bg-non-focus)
}

.CodeMirror-focused .CodeMirror-selected {
	background: var(--selected-bg)
}

.CodeMirror-crosshair {
	cursor: crosshair
}

.CodeMirror-line::selection,
.CodeMirror-line>span::selection,
.CodeMirror-line>span>span::selection {
	background: var(--selected-bg)
}

.CodeMirror-line::-moz-selection,
.CodeMirror-line>span::-moz-selection,
.CodeMirror-line>span>span::-moz-selection {
	background: var(--selected-bg)
}

.cm-searching {
	background-color: #ffa;
	background-color: #ff06
}

.cm-force-border {
	padding-right: .1px
}

@media print {
	.CodeMirror div.CodeMirror-cursors {
		visibility: hidden
	}
}

.cm-tab-wrap-hack:after {
	content: ""
}

span.CodeMirror-selectedtext {
	background: none
}

.editor {
	position: relative;
	height: 100%;
	width: 100%;
	overflow: hidden
}

.CodeMirror {
	font-family: var(--font-code);
	line-height: 1.5;
	height: 100%
}

.msg[data-v-e083996a] {
	position: absolute;
	bottom: 0;
	left: 8px;
	right: 8px;
	z-index: 10;
	border: 2px solid transparent;
	border-radius: 6px;
	font-family: var(--font-code);
	white-space: pre-wrap;
	margin-bottom: 8px;
	max-height: calc(100% - 300px);
	min-height: 40px;
	display: flex;
	align-items: stretch
}

pre[data-v-e083996a] {
	margin: 0;
	padding: 12px 20px;
	overflow: scroll
}

.dismiss[data-v-e083996a] {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 18px;
	height: 18px;
	line-height: 18px;
	border-radius: 9px;
	text-align: center;
	display: block;
	font-size: 9px;
	padding: 0;
	background-color: red;
	color: #fff
}

@media (max-width: 720px) {
	.dismiss[data-v-e083996a] {
		top: -9px;
		right: -9px
	}

	.msg[data-v-e083996a] {
		bottom: 50px
	}
}

.msg.err[data-v-e083996a] {
	color: red;
	border-color: red;
	background-color: #ffd7d7
}

.msg.warn[data-v-e083996a] {
	--color: rgb(105, 95, 27);
	color: var(--color);
	border-color: var(--color);
	background-color: #f7f0cd
}

.msg.warn .dismiss[data-v-e083996a] {
	background-color: var(--color)
}

.fade-enter-active[data-v-e083996a],
.fade-leave-active[data-v-e083996a] {
	transition: all .15s ease-out
}

.fade-enter-from[data-v-e083996a],
.fade-leave-to[data-v-e083996a] {
	opacity: 0;
	transform: translateY(10px)
}

.editor-container[data-v-759ba5e9] {
	height: calc(100% - var(--header-height));
	overflow: hidden;
	position: relative
}

.iframe-container[data-v-fed14756],
.iframe-container[data-v-fed14756] iframe {
	width: 100%;
	height: 100%;
	border: none;
	background-color: #fff
}

.output-container[data-v-79065b94] {
	height: calc(100% - var(--header-height));
	overflow: hidden;
	position: relative
}

.tab-buttons[data-v-79065b94] {
	box-sizing: border-box;
	border-bottom: 1px solid var(--border);
	background-color: var(--bg);
	height: var(--header-height);
	overflow: hidden
}

.tab-buttons button[data-v-79065b94] {
	padding: 0;
	box-sizing: border-box
}

.tab-buttons span[data-v-79065b94] {
	font-size: 13px;
	font-family: var(--font-code);
	text-transform: uppercase;
	color: var(--text-light);
	display: inline-block;
	padding: 8px 16px 6px;
	line-height: 20px
}

button.active[data-v-79065b94] {
	color: var(--color-branding-dark);
	border-bottom: 3px solid var(--color-branding-dark)
}

.vue-repl[data-v-75fc3196] {
	--bg: #fff;
	--bg-soft: #f8f8f8;
	--border: #ddd;
	--text-light: #888;
	--font-code: Menlo, Monaco, Consolas, "Courier New", monospace;
	--color-branding: #42b883;
	--color-branding-dark: #416f9c;
	--header-height: 38px;
	font-size: 13px;
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
	margin: 0;
	overflow: hidden;
	background-color: var(--bg-soft)
}

.dark .vue-repl[data-v-75fc3196] {
	--bg: #1a1a1a;
	--bg-soft: #242424;
	--border: #383838;
	--text-light: #aaa;
	--color-branding: #42d392;
	--color-branding-dark: #89ddff
}

[data-v-75fc3196] button {
	border: none;
	outline: none;
	cursor: pointer;
	margin: 0;
	background-color: transparent
}

.tutorial[data-v-0c1c5465] {
	display: flex;
	max-width: 1440px;
	margin: 0 auto;
	--height: calc(100vh - var(--vt-nav-height) - var(--vt-banner-height, 0px))
}

.preference-switch[data-v-0c1c5465] {
	position: relative
}

.instruction[data-v-0c1c5465] {
	width: 45%;
	height: var(--height);
	padding: 0 32px 24px;
	border-right: 1px solid var(--vt-c-divider-light);
	font-size: 15px;
	overflow-y: auto;
	position: relative;
	--vt-nav-height: 40px
}

.vue-repl[data-v-0c1c5465] {
	width: 55%;
	height: var(--height)
}

.vt-flyout[data-v-0c1c5465] {
	z-index: 9;
	position: absolute;
	right: 20px
}

.vt-menu-link.active[data-v-0c1c5465] {
	font-weight: 500;
	color: var(--vt-c-brand)
}

footer[data-v-0c1c5465] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid var(--vt-c-divider);
	margin-top: 1.5em;
	padding-top: 1em
}

footer a[data-v-0c1c5465] {
	font-weight: 500;
	color: var(--vt-c-brand)
}

.next-step[data-v-0c1c5465] {
	margin-left: auto
}

.vt-doc[data-v-0c1c5465] h1 {
	font-size: 1.4em;
	margin: 1em 0
}

.vt-doc[data-v-0c1c5465] h2 {
	font-size: 1.1em;
	margin: 1.2em 0 .5em;
	padding: 0;
	border-top: none
}

.vt-doc[data-v-0c1c5465] .header-anchor {
	display: none
}

.vt-doc[data-v-0c1c5465] summary {
	cursor: pointer
}

.hint[data-v-0c1c5465] {
	padding-top: 1em
}

button[data-v-0c1c5465] {
	background-color: var(--vt-c-brand);
	color: var(--vt-c-bg);
	padding: 4px 12px 3px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14px
}

@media (min-width: 1377px) {
	.vue-repl[data-v-0c1c5465] {
		border-right: 1px solid var(--vt-c-divider-light)
	}
}

@media (min-width: 1441px) {
	.tutorial[data-v-0c1c5465] {
		padding-right: 32px
	}
}

[data-v-0c1c5465] .narrow {
	display: none
}

@media (max-width: 720px) {
	.tutorial[data-v-0c1c5465] {
		display: block
	}

	.instruction[data-v-0c1c5465] {
		width: 100%;
		border-right: none;
		border-bottom: 1px solid var(--vt-c-divider-light);
		height: 30vh;
		padding: 0 24px 24px
	}

	.vue-repl[data-v-0c1c5465] {
		width: 100%;
		height: calc(70vh - var(--vt-nav-height) - var(--vt-banner-height, 0px))
	}

	[data-v-0c1c5465] .wide {
		display: none
	}

	[data-v-0c1c5465] .narrow {
		display: inline
	}
}

@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap);

.vt-doc.api h2 .header-anchor,
.vt-doc.style-guide h2 .header-anchor {
	opacity: 1
}

.vt-doc.sponsor h3 {
	text-align: center;
	padding-bottom: 1em;
	border-bottom: 1px solid var(--vt-c-divider-light)
}

.vt-doc.sponsor h3 .header-anchor {
	display: none
}

.vt-badge.wip:before {
	content: "WIP"
}

.vt-badge.ts {
	background-color: #3178c6
}

.vt-badge.ts:before {
	content: "TS"
}

.vt-badge.dev-only,
.vt-badge.experimental {
	color: var(--vt-c-text-light-1);
	background-color: var(--vt-c-yellow)
}

.vt-badge.dev-only:before {
	content: "Dev only"
}

.vt-badge.experimental:before {
	content: "Experimental"
}

.vt-badge[data-text]:before {
	content: attr(data-text)
}

.next-steps {
	margin-top: 3rem
}

.next-steps .vt-box {
	border: 1px solid var(--vt-c-bg-soft)
}

.next-steps .vt-box:hover {
	border-color: var(--vt-c-green-light);
	transition: border-color .3s cubic-bezier(.25, .8, .25, 1)
}

.vt-doc .next-steps-link {
	font-size: 20px;
	line-height: 1.4;
	letter-spacing: -.02em;
	margin-bottom: .75em;
	display: block;
	color: var(--vt-c-green)
}

.vt-doc .next-steps-caption {
	margin-bottom: 0;
	color: var(--vt-c-text-2);
	transition: color .5s
}

.vt-doc a[href^="https://sfc.vuejs.org"]:before {
	content: "\25b6";
	width: 20px;
	height: 20px;
	display: inline-block;
	border-radius: 10px;
	vertical-align: middle;
	position: relative;
	top: -2px;
	color: var(--vt-c-green);
	border: 2px solid var(--vt-c-green);
	margin-right: 8px;
	margin-left: 4px;
	line-height: 15px;
	padding-left: 4.5px;
	font-size: 11px
}

.demo {
	padding: 22px 24px;
	border-radius: 8px;
	box-shadow: var(--vt-shadow-2);
	margin-bottom: 1.2em;
	transition: background-color .5s ease
}

.dark .demo {
	background-color: var(--vt-c-bg-soft)
}

.demo p {
	margin: 0
}

.demo button {
	background-color: var(--vt-c-bg-mute);
	transition: background-color .5s;
	padding: 5px 12px;
	border: 1px solid var(--vt-c-divider);
	border-radius: 8px;
	font-size: .9em;
	font-weight: 600
}

.demo button+button {
	margin-left: 1em
}

.demo input,
.demo textarea,
.demo select {
	border: 1px solid var(--vt-c-divider);
	border-radius: 4px;
	padding: .2em .6em;
	margin-top: 10px;
	background: transparent;
	transition: background-color .5s
}

.dark .demo select {
	background: var(--vt-c-bg-soft)
}

.dark .demo select option {
	background: transparent
}

.demo input:not([type]):focus,
.demo textarea:focus,
.demo select:focus {
	outline: 1px solid blue
}

.demo select {
	-webkit-appearance: listbox
}

.demo label {
	margin: 0 1em 0 .4em
}

.demo select[multiple] {
	width: 100px
}

.demo h1 {
	margin: 10px 0 0
}

.nowrap {
	white-space: nowrap
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0
}

.style-example {
	border-radius: 8px 8px 12px 12px;
	margin: 1.6em 0;
	padding: 1.6em 1.6em .1px;
	position: relative;
	border: 1px solid transparent;
	transition: background-color .25s ease, border-color .25s ease
}

.vt-doc .style-example h3 {
	margin: 0;
	font-size: 1.1em
}

.style-example-bad {
	background: #f7e8e8
}

.dark .style-example-bad {
	background: transparent;
	border-color: var(--vt-c-red)
}

.style-example-bad h3 {
	color: var(--vt-c-red)
}

.style-example-good {
	background: #ecfaf7
}

.dark .style-example-good {
	background: transparent;
	border-color: var(--vt-c-green)
}

.style-example-good h3 {
	color: var(--vt-c-green)
}

.details summary {
	font-weight: 700 !important
}

.style-verb {
	font-size: .6em;
	display: inline-block;
	border-radius: 6px;
	font-size: .65em;
	line-height: 1;
	font-weight: 600;
	padding: .35em .4em .3em;
	position: relative;
	top: -.15em;
	margin-right: .5em;
	color: var(--vt-c-bg);
	transition: color .5s;
	background-color: var(--vt-c-brand)
}

.style-verb.avoid {
	background-color: var(--vt-c-red)
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%
}

body {
	margin: 0
}

main {
	display: block
}

h1 {
	font-size: 2em;
	margin: .67em 0
}

hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible
}

pre {
	font-family: monospace, monospace;
	font-size: 1em
}

a {
	background-color: transparent
}

abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted
}

b,
strong {
	font-weight: bolder
}

code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em
}

small {
	font-size: 80%
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline
}

sub {
	bottom: -.25em
}

sup {
	top: -.5em
}

img {
	border-style: none
}

button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0
}

button,
input {
	overflow: visible
}

button,
select {
	text-transform: none
}

button,
[type=button],
[type=reset],
[type=submit] {
	-webkit-appearance: button
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
	border-style: none;
	padding: 0
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
	outline: 1px dotted ButtonText
}

fieldset {
	padding: .35em .75em .625em
}

legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal
}

progress {
	vertical-align: baseline
}

textarea {
	overflow: auto
}

[type=checkbox],
[type=radio] {
	box-sizing: border-box;
	padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
	height: auto
}

[type=search] {
	-webkit-appearance: textfield;
	outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
	-webkit-appearance: none
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit
}

details {
	display: block
}

summary {
	display: list-item
}

template {
	display: none
}

[hidden] {
	display: none
}

:root {
	--vt-c-white: #ffffff;
	--vt-c-white-soft: #f9f9f9;
	--vt-c-white-mute: #f1f1f1;
	--vt-c-black: #1a1a1a;
	--vt-c-black-pure: #000000;
	--vt-c-black-soft: #242424;
	--vt-c-black-mute: #2f2f2f;
	--vt-c-indigo: #213547;
	--vt-c-indigo-soft: #476582;
	--vt-c-indigo-light: #aac8e4;
	--vt-c-gray: #8e8e8e;
	--vt-c-gray-light-1: #aeaeae;
	--vt-c-gray-light-2: #c7c7c7;
	--vt-c-gray-light-3: #d1d1d1;
	--vt-c-gray-light-4: #e5e5e5;
	--vt-c-gray-light-5: #f2f2f2;
	--vt-c-gray-dark-1: #636363;
	--vt-c-gray-dark-2: #484848;
	--vt-c-gray-dark-3: #3a3a3a;
	--vt-c-gray-dark-4: #282828;
	--vt-c-gray-dark-5: #202020;
	--vt-c-divider-light-1: rgba(60, 60, 60, .29);
	--vt-c-divider-light-2: rgba(60, 60, 60, .12);
	--vt-c-divider-dark-1: rgba(84, 84, 84, .65);
	--vt-c-divider-dark-2: rgba(84, 84, 84, .48);
	--vt-c-text-light-1: var(--vt-c-indigo);
	--vt-c-text-light-2: rgba(60, 60, 60, .7);
	--vt-c-text-light-3: rgba(60, 60, 60, .33);
	--vt-c-text-light-4: rgba(60, 60, 60, .18);
	--vt-c-text-light-code: var(--vt-c-indigo-soft);
	--vt-c-text-dark-1: rgba(255, 255, 255, .87);
	--vt-c-text-dark-2: rgba(235, 235, 235, .6);
	--vt-c-text-dark-3: rgba(235, 235, 235, .38);
	--vt-c-text-dark-4: rgba(235, 235, 235, .18);
	--vt-c-text-dark-code: var(--vt-c-indigo-light);
	--vt-c-green: #42b883;
	--vt-c-green-light: #42d392;
	--vt-c-green-lighter: #35eb9a;
	--vt-c-green-dark: #33a06f;
	--vt-c-green-darker: #155f3e;
	--vt-c-blue: #3b8eed;
	--vt-c-blue-light: #549ced;
	--vt-c-blue-lighter: #50a2ff;
	--vt-c-blue-dark: #3468a3;
	--vt-c-blue-darker: #255489;
	--vt-c-yellow: #ffc517;
	--vt-c-yellow-light: #ffe417;
	--vt-c-yellow-lighter: #ffff17;
	--vt-c-yellow-dark: #e0ad15;
	--vt-c-yellow-darker: #bc9112;
	--vt-c-red: #ed3c50;
	--vt-c-red-light: #f43771;
	--vt-c-red-lighter: #fd1d7c;
	--vt-c-red-dark: #cd2d3f;
	--vt-c-red-darker: #ab2131;
	--vt-c-purple: #de41e0;
	--vt-c-purple-light: #e936eb;
	--vt-c-purple-lighter: #f616f8;
	--vt-c-purple-dark: #823c83;
	--vt-c-purple-darker: #602960
}

:root {
	--vt-c-bg: var(--vt-c-white);
	--vt-c-bg-soft: var(--vt-c-white-soft);
	--vt-c-bg-mute: var(--vt-c-white-mute);
	--vt-c-divider: var(--vt-c-divider-light-1);
	--vt-c-divider-light: var(--vt-c-divider-light-2);
	--vt-c-divider-inverse: var(--vt-c-divider-dark-1);
	--vt-c-divider-inverse-light: var(--vt-c-divider-dark-2);
	--vt-c-text-1: var(--vt-c-text-light-1);
	--vt-c-text-2: var(--vt-c-text-light-2);
	--vt-c-text-3: var(--vt-c-text-light-3);
	--vt-c-text-4: var(--vt-c-text-light-4);
	--vt-c-text-code: var(--vt-c-text-light-code);
	--vt-c-text-inverse-1: var(--vt-c-text-dark-1);
	--vt-c-text-inverse-2: var(--vt-c-text-dark-2);
	--vt-c-text-inverse-3: var(--vt-c-text-dark-3);
	--vt-c-text-inverse-4: var(--vt-c-text-dark-4);
	--vt-c-brand: var(--vt-c-green);
	--vt-c-brand-light: var(--vt-c-green-light);
	--vt-c-brand-dark: var(--vt-c-green-dark);
	--vt-c-brand-highlight: var(--vt-c-brand-dark)
}

.dark {
	--vt-c-bg: var(--vt-c-black);
	--vt-c-bg-soft: var(--vt-c-black-soft);
	--vt-c-bg-mute: var(--vt-c-black-mute);
	--vt-c-divider: var(--vt-c-divider-dark-1);
	--vt-c-divider-light: var(--vt-c-divider-dark-2);
	--vt-c-divider-inverse: var(--vt-c-divider-light-1);
	--vt-c-divider-inverse-light: var(--vt-c-divider-light-2);
	--vt-c-text-1: var(--vt-c-text-dark-1);
	--vt-c-text-2: var(--vt-c-text-dark-2);
	--vt-c-text-3: var(--vt-c-text-dark-3);
	--vt-c-text-4: var(--vt-c-text-dark-4);
	--vt-c-text-code: var(--vt-c-text-dark-code);
	--vt-c-text-inverse-1: var(--vt-c-text-light-1);
	--vt-c-text-inverse-2: var(--vt-c-text-light-2);
	--vt-c-text-inverse-3: var(--vt-c-text-light-3);
	--vt-c-text-inverse-4: var(--vt-c-text-light-4);
	--vt-c-brand-highlight: var(--vt-c-brand-light)
}

:root {
	--vt-font-family-base: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	--vt-font-family-mono: Menlo, Monaco, Consolas, "Courier New", monospace
}

:root {
	--vt-shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);
	--vt-shadow-2: 0 3px 12px rgba(0, 0, 0, .07), 0 1px 4px rgba(0, 0, 0, .07);
	--vt-shadow-3: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08);
	--vt-shadow-4: 0 14px 44px rgba(0, 0, 0, .12), 0 3px 9px rgba(0, 0, 0, .12);
	--vt-shadow-5: 0 18px 56px rgba(0, 0, 0, .16), 0 4px 12px rgba(0, 0, 0, .16)
}

:root {
	--vt-nav-height: 55px
}

*,
:before,
:after {
	box-sizing: border-box
}

body {
	width: 100%;
	min-width: 320px;
	min-height: 100vh;
	font-family: var(--vt-font-family-base);
	letter-spacing: .2px;
	line-height: 24px;
	font-size: 16px;
	font-weight: 400;
	color: var(--vt-c-text-1);
	background-color: var(--vt-c-bg);
	direction: ltr;
	font-synthesis: none;
	text-rendering: optimizeLegibility;
	transition: color .5s, background-color .5s;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
	margin: 0
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: inherit;
	font-weight: inherit
}

a,
area,
button,
[role=button],
input,
label,
select,
summary,
textarea {
	touch-action: manipulation
}

a {
	color: inherit;
	text-decoration: inherit
}

ol,
ul {
	list-style: none;
	margin: 0;
	padding: 0
}

pre,
code,
kbd,
samp {
	font-family: var(--vt-font-family-mono)
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
	display: block;
	vertical-align: middle
}

img,
video {
	max-width: 100%;
	height: auto
}

button,
input,
optgroup,
select,
textarea {
	border: 0;
	padding: 0;
	line-height: inherit;
	color: inherit
}

button {
	padding: 0;
	background-color: transparent;
	background-image: none
}

button,
[role=button] {
	cursor: pointer
}

button:focus,
button:focus-visible {
	outline: 1px dotted;
	outline: 5px auto -webkit-focus-ring-color
}

button:focus:not(:focus-visible) {
	outline: none !important
}

input:focus,
textarea:focus,
select:focus {
	outline: none
}

table {
	border-collapse: collapse
}

input {
	background-color: transparent
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
	color: var(--vt-c-text-3)
}

input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
	color: var(--vt-c-text-3)
}

input::placeholder,
textarea::placeholder {
	color: var(--vt-c-text-3)
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0
}

input[type=number] {
	-moz-appearance: textfield
}

textarea {
	resize: vertical
}

select {
	-webkit-appearance: none
}

fieldset {
	margin: 0;
	padding: 0
}

.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px
}

.vt-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, .6);
	transition: opacity .5s
}

.vt-backdrop.fade-enter-from,
.vt-backdrop.fade-leave-to {
	opacity: 0
}

.vt-backdrop.fade-leave-active {
	transition-duration: .3s
}

@media (min-width: 960px) {
	.vt-backdrop {
		display: none
	}
}

.vt-doc {
	font-size: 16px;
	line-height: 1.7
}

.vt-doc h1,
.vt-doc h2,
.vt-doc h3,
.vt-doc h4,
.vt-doc h5,
.vt-doc h6 {
	position: relative;
	font-weight: 600;
	line-height: 1.5;
	outline: none
}

.vt-doc h1 {
	margin: 0 0 3rem;
	font-size: 38px;
	line-height: 1.4;
	letter-spacing: -.02em
}

.vt-doc h2 {
	margin: 4rem 0 1.8rem;
	border-top: 1px solid var(--vt-c-divider-light);
	padding-top: 1.8rem;
	font-size: 24px;
	letter-spacing: -.02em
}

@media (max-width: 768px) {
	.vt-doc h1 {
		font-size: 32px;
		margin-bottom: 1.8rem
	}

	.vt-doc h1+h2 {
		margin-top: 36px
	}
}

.vt-doc h3 {
	font-size: 19px;
	letter-spacing: -.01em;
	margin: 3rem 0 1.25rem
}

.vt-doc h2+h3 {
	margin-top: 0
}

.vt-doc h4 {
	font-size: 17px;
	margin: 1.8rem 0 1rem
}

.vt-doc .header-anchor {
	float: left;
	margin-left: -.87em;
	padding-right: .23em;
	font-weight: 500;
	opacity: 0;
	transition: color .25s, opacity .25s
}

.vt-doc h1:hover .header-anchor,
.vt-doc h1 .header-anchor:focus,
.vt-doc h2:hover .header-anchor,
.vt-doc h2 .header-anchor:focus,
.vt-doc h3:hover .header-anchor,
.vt-doc h3 .header-anchor:focus,
.vt-doc h4:hover .header-anchor,
.vt-doc h4 .header-anchor:focus,
.vt-doc h5:hover .header-anchor,
.vt-doc h5 .header-anchor:focus,
.vt-doc h6:hover .header-anchor,
.vt-doc h6 .header-anchor:focus {
	opacity: 1
}

.vt-doc hr {
	border: none;
	border-top: 1px solid var(--vt-c-divider-light);
	margin: 1.8rem 0
}

.vt-doc p,
.vt-doc ul,
.vt-doc ol,
.vt-doc summary {
	margin-bottom: 1.2em
}

.vt-doc a {
	font-weight: 500;
	color: var(--vt-c-brand);
	transition: color .25s;
	text-decoration-style: dotted
}

.vt-doc a:hover {
	color: var(--vt-c-brand-highlight)
}

.vt-doc strong {
	font-weight: 600
}

.vt-doc table {
	display: block;
	border-collapse: collapse;
	margin: 1rem 0;
	overflow-x: auto
}

.vt-doc tr {
	border-top: 1px solid var(--vt-c-divider);
	transition: background-color .5s
}

.vt-doc tr:nth-child(2n) {
	background-color: var(--vt-c-bg-soft)
}

.vt-doc th,
.vt-doc td {
	border: 1px solid var(--vt-c-divider);
	padding: .6em 1em
}

.vt-doc blockquote {
	margin: 1rem 0;
	border-left: .2rem solid var(--vt-c-divider);
	padding-left: 1rem;
	transition: border-color .5s
}

.vt-doc blockquote>p {
	margin: 0;
	font-size: 16px;
	color: var(--vt-c-text-2);
	transition: color .5s
}

.vt-doc figure {
	margin: 0
}

.vt-doc img {
	max-width: 100%
}

.vt-doc p>img {
	margin: 28px auto
}

.vt-doc ol {
	counter-reset: item
}

.vt-doc ol[start="2"] {
	counter-reset: item 1
}

.vt-doc ol[start="3"] {
	counter-reset: item 2
}

.vt-doc ol[start="4"] {
	counter-reset: item 3
}

.vt-doc ol[start="5"] {
	counter-reset: item 4
}

.vt-doc ol[start="6"] {
	counter-reset: item 5
}

.vt-doc ol[start="7"] {
	counter-reset: item 6
}

.vt-doc ol[start="8"] {
	counter-reset: item 7
}

.vt-doc ol[start="9"] {
	counter-reset: item 8
}

.vt-doc ol[start="10"] {
	counter-reset: item 9
}

.vt-doc ol>li {
	counter-increment: item;
	position: relative;
	padding-left: 1.5rem
}

.vt-doc ol>li:before {
	position: absolute;
	left: 2px;
	top: 1px;
	font-weight: 700;
	font-size: 14px;
	color: var(--vt-c-text-3);
	content: counter(item) "."
}

@media (min-width: 768px) {
	.vt-doc ol>li:before {
		top: 2px
	}
}

.vt-doc li {
	position: relative;
	margin: 1px 0
}

.vt-doc ul {
	padding-left: 1.25rem
}

.vt-doc ul>li:before {
	content: "";
	position: absolute;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: var(--vt-c-text-3);
	transition: background-color .5s;
	left: -1.25rem;
	top: .75rem
}

.vt-doc .video:before {
	display: block;
	content: "";
	padding-top: 56.25%
}

.vt-doc .video {
	overflow: hidden;
	width: calc(100% + 48px);
	min-width: 415px;
	position: relative;
	margin: 0 -24px 18px
}

.vt-doc .video-content {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0
}

@media (min-width: 640px) {
	.vt-doc .video {
		border-radius: 8px
	}
}

@media (max-width: 463px) {
	.vt-doc .video {
		width: 100%;
		margin: 0 calc((100vw - 463px)/2) 18px
	}
}

.vt-doc {
	--vt-doc-code-font-size: 14px;
	--vt-doc-code-line-height: 1.5
}

.vt-doc :not(pre)>code {
	background-color: var(--vt-c-bg-mute);
	padding: .15em .5em;
	border-radius: 4px;
	color: var(--vt-c-text-code);
	transition: color .5s, background-color .5s
}

.vt-doc a>code {
	color: var(--vt-c-brand-dark)
}

.vt-doc :not(pre, h1, h2, h3, h4, h5, h6)>code {
	font-size: var(--vt-doc-code-font-size)
}

@media (min-width: 768px) {
	.vt-doc :not(pre)>code {
		white-space: nowrap
	}
}

.vt-doc div[class*=language-] {
	position: relative;
	margin: 28px -24px;
	background-color: #292d3e;
	overflow-x: auto;
	transition: background-color .5s
}

.dark .vt-doc div[class*=language-] {
	background-color: var(--vt-c-bg-soft)
}

@media (min-width: 640px) {
	.vt-doc div[class*=language-] {
		margin: 28px 0;
		border-radius: 8px
	}
}

@media (max-width: 639px) {
	.vt-doc li div[class*=language-] {
		border-radius: 8px 0 0 8px
	}
}

.vt-doc div[class*=language-]+div[class*=language-],
.vt-doc div[class$=-api]+div[class*=language-],
.vt-doc div[class*=language-]+div[class$=-api]>div[class*=language-] {
	margin-top: -16px
}

.vt-doc [class*=language-] pre,
.vt-doc [class*=language-] code {
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none
}

.vt-doc [class*=language-] pre {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 14px 24px;
	background: transparent;
	overflow-x: auto
}

.vt-doc [class*=language-] code {
	display: inline-block;
	padding: 0;
	line-height: var(--vt-doc-code-line-height);
	font-size: var(--vt-doc-code-font-size);
	color: #a6accd;
	transition: color .5s
}

.vt-doc .highlight-lines {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	padding: 13px 0 11px;
	width: 100%;
	font-family: var(--vt-font-family-mono);
	line-height: var(--vt-doc-code-line-height);
	font-size: var(--vt-doc-code-font-size);
	user-select: none;
	overflow: hidden
}

.vt-doc .highlight-lines .highlighted {
	background-color: #0000004d;
	transition: background-color .5s
}

.dark .vt-doc .highlight-lines .highlighted {
	background-color: #ffffff0d
}

.vt-doc div[class*=language-].line-numbers-mode {
	padding-left: 32px
}

.vt-doc .line-numbers-wrapper {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	border-right: 1px solid var(--vt-c-divider-light);
	padding: 13px 0 11px;
	width: 32px;
	text-align: center;
	font-family: var(--vt-font-family-mono);
	line-height: var(--vt-doc-code-line-height);
	font-size: var(--vt-doc-code-font-size);
	color: var(--vt-c-text-3);
	transition: border-color .5s, color .5s
}

.vt-doc [class*=language-]:before {
	position: absolute;
	top: 4px;
	right: 10px;
	z-index: 2;
	font-size: 12px;
	font-weight: 500;
	color: var(--vt-c-text-dark-3);
	transition: color .5s
}

@media (max-width: 480px) {
	.vt-doc [class*=language-]:before {
		top: 1px;
		right: 5px;
		font-size: 11px
	}

	.vt-doc [class*=language-] pre {
		padding: 18px 20px 12px
	}

	.vt-doc .highlight-lines {
		padding-top: 17px
	}
}

.vt-doc [class~=language-vue]:before {
	content: "vue"
}

.vt-doc [class~=language-html]:before {
	content: "html"
}

.vt-doc [class~=language-vue-html]:before {
	content: "template"
}

.vt-doc [class~=language-css]:before {
	content: "css"
}

.vt-doc [class~=language-js]:before {
	content: "js"
}
.vt-doc [class~=language-C]:before {
	content: "C#"
}

.vt-doc [class~=language-jsx]:before {
	content: "jsx"
}

.vt-doc [class~=language-ts]:before {
	content: "ts"
}

.vt-doc [class~=language-tsx]:before {
	content: "tsx"
}

.vt-doc [class~=language-json]:before {
	content: "json"
}

.vt-doc [class~=language-sh]:before,
.vt-doc [class~=language-bash]:before {
	content: "sh"
}

.vt-doc .custom-block {
	margin: 28px 0;
	padding: 20px 24px 4px 42px;
	border-radius: 8px;
	overflow-x: auto;
	transition: color .5s, background-color .5s;
	position: relative;
	font-size: 14px;
	line-height: 1.6;
	font-weight: 500;
	color: #0000008c;
	background-color: var(--vt-c-bg-soft)
}

.dark .vt-doc .custom-block {
	color: var(--vt-c-text-2)
}

.vt-doc .custom-block:before {
	content: "\24d8";
	position: absolute;
	font-weight: 600;
	font-size: 15px;
	top: 20px;
	left: 17px
}

.vt-doc .custom-block.warning:before,
.vt-doc .custom-block.danger:before {
	content: "\26a0";
	font-size: 17px;
	top: 19px;
	left: 16ppx
}

.vt-doc .custom-block .custom-block-title {
	margin-bottom: 8px;
	font-size: 15px;
	font-weight: 500;
	color: var(--vt-c-text-1);
	transition: color .5s
}

.vt-doc .custom-block.tip {
	border: 1px solid var(--vt-c-brand)
}

.vt-doc .custom-block.tip:before {
	color: var(--vt-c-brand)
}

.vt-doc .custom-block.warning {
	border: 1px solid var(--vt-c-yellow)
}

.vt-doc .custom-block.warning:before {
	color: var(--vt-c-yellow)
}

.vt-doc .custom-block.danger {
	border: 1px solid var(--vt-c-red)
}

.vt-doc .custom-block.danger .custom-block-title,
.vt-doc .custom-block.danger:before {
	color: var(--vt-c-red)
}

.vt-doc .custom-block ul li:before {
	top: .55rem
}

.vt-doc .custom-block ol li:before {
	top: 1px;
	font-size: 13px
}

.vt-doc .custom-block :not(pre)>code {
	font-size: 13px;
	background-color: #1b1f230d
}

.dark .vt-doc .custom-block :not(pre)>code {
	background-color: #0003
}

.vt-doc .custom-block.danger a,
.vt-doc .custom-block.warning a {
	color: var(--vt-c-text-code)
}

.vt-flyout {
	position: relative
}

.vt-flyout:hover {
	color: var(--vt-c-bland);
	transition: color .25s
}

.vt-flyout:hover .vt-flyout-button-text {
	color: var(--vt-c-text-2)
}

.vt-flyout:hover .vt-flyout-button-icon {
	fill: var(--vt-c-text-2)
}

.vt-flyout:hover .vt-flyout-menu,
.vt-flyout-button[aria-expanded=true]+.vt-flyout-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0)
}

.vt-flyout-button {
	display: flex;
	align-items: center;
	padding: 0 12px;
	height: var(--vt-nav-height);
	color: var(--vt-c-text-1);
	transition: color .5s
}

.vt-flyout-button-text {
	display: flex;
	align-items: center;
	line-height: var(--vt-nav-height);
	font-size: 13px;
	font-weight: 500;
	color: var(--vt-c-text-1);
	transition: color .25s
}

.vt-flyout-button-text-icon {
	margin-left: 4px;
	width: 14px;
	height: 14px;
	fill: currentColor
}

.vt-flyout-button-icon {
	width: 20px;
	height: 20px;
	fill: currentColor;
	transition: fill .25s
}

.vt-flyout-menu {
	position: absolute;
	top: calc(var(--vt-nav-height) / 2 + 15px);
	right: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .25s, visibility .25s, transform .25s
}

.vt-hamburger {
	display: flex;
	justify-content: center;
	align-items: center
}

.vt-hamburger:hover .vt-hamburger-top {
	top: 0;
	left: 0;
	transform: translate(4px)
}

.vt-hamburger:hover .vt-hamburger-middle {
	top: 6;
	left: 0;
	transform: translate(0)
}

.vt-hamburger:hover .vt-hamburger-bottom {
	top: 12px;
	left: 0;
	transform: translate(8px)
}

.vt-hamburger.is-active .vt-hamburger-top {
	top: 6px;
	transform: translate(0) rotate(225deg)
}

.vt-hamburger.is-active .vt-hamburger-middle {
	top: 6px;
	transform: translate(16px)
}

.vt-hamburger.is-active .vt-hamburger-bottom {
	top: 6px;
	transform: translate(0) rotate(135deg)
}

.vt-hamburger.is-active:hover .vt-hamburger-top,
.vt-hamburger.is-active:hover .vt-hamburger-middle,
.vt-hamburger.is-active:hover .vt-hamburger-bottom {
	background-color: var(--vt-c-text-2);
	transition: top .25s, background-color .25s, transform .25s
}

.vt-hamburger-container {
	position: relative;
	width: 16px;
	height: 14px;
	overflow: hidden
}

.vt-hamburger-top,
.vt-hamburger-middle,
.vt-hamburger-bottom {
	position: absolute;
	width: 16px;
	height: 2px;
	background-color: var(--vt-c-text-1);
	transition: top .25s, background-color .5s, transform .25s
}

.vt-hamburger-top {
	top: 0;
	left: 0;
	transform: translate(0)
}

.vt-hamburger-middle {
	top: 6px;
	left: 0;
	transform: translate(8px)
}

.vt-hamburger-bottom {
	top: 12px;
	left: 0;
	transform: translate(4px)
}

.vt-link-icon {
	display: inline-block;
	margin-top: -2px;
	margin-left: 4px;
	width: 11px;
	height: 11px;
	fill: var(--vt-c-text-3);
	transition: fill .25s
}

.vt-menu {
	border-radius: 8px;
	padding: 12px 0;
	min-width: 192px;
	border: 1px solid transparent;
	background: var(--vt-c-bg);
	box-shadow: var(--vt-shadow-3);
	transition: background-color .5s
}

.dark .vt-menu {
	background: var(--vt-c-bg);
	box-shadow: var(--vt-shadow-1);
	border: 1px solid var(--vt-c-divider-light)
}

.vt-menu-items {
	transition: border-color .5s
}

.vt-menu .vt-menu-group {
	padding: 0 0 12px
}

.vt-menu .vt-menu-group+.vt-menu-group {
	border-top: 1px solid var(--vt-c-divider-light);
	padding: 11px 0 12px
}

.vt-menu .vt-menu-group:last-child {
	padding-bottom: 0
}

.vt-menu .vt-menu-group+.vt-menu-item-item {
	border-top: 1px solid var(--vt-c-divider-light);
	padding: 11px 16px 0
}

.vt-menu .vt-menu-item {
	padding: 0 16px;
	white-space: nowrap
}

.vt-menu-label {
	flex-grow: 1;
	line-height: 28px;
	font-size: 12px;
	font-weight: 500;
	color: var(--vt-c-text-2);
	transition: color .5s
}

.vt-menu-action {
	padding-left: 24px
}

.vt-menu-group-title {
	padding: 0 18px;
	line-height: 28px;
	font-size: 10px;
	font-weight: 600;
	color: var(--vt-c-text-3);
	text-transform: uppercase;
	transition: color .25s
}

.vt-menu-link {
	display: block;
	padding: 0 18px;
	line-height: 28px;
	font-size: 13px;
	font-weight: 400;
	color: var(--vt-c-text-1);
	white-space: nowrap;
	transition: color .25s
}

.vt-menu-link:hover {
	color: var(--vt-c-brand)
}

.vt-social-link {
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--vt-c-text-2);
	transition: color .5s
}

.vt-social-link.is-small {
	width: 36px;
	height: 36px
}

.vt-social-link.is-small .vt-social-link-icon {
	width: 20px;
	height: 20px
}

.vt-social-link.is-medium {
	width: 48px;
	height: 48px
}

.vt-social-link.is-medium .vt-social-link-icon {
	width: 24px;
	height: 24px
}

.vt-social-link:hover {
	color: var(--vt-c-text-1);
	transition: color .25s
}

.vt-social-link-icon {
	fill: currentColor
}

.vt-social-links {
	display: flex;
	justify-content: center
}

.vt-switch {
	position: relative;
	border-radius: 11px;
	display: block;
	width: 40px;
	height: 22px;
	flex-shrink: 0;
	border: 1px solid var(--vt-c-divider);
	background-color: var(--vt-c-bg-mute);
	transition: border-color .25s, background-color .25s
}

.vt-switch:hover {
	border-color: var(--vt-c-gray)
}

.vt-switch-check {
	position: absolute;
	top: 1px;
	left: 1px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: var(--vt-c-white);
	box-shadow: var(--vt-shadow-1);
	transition: background-color .25s, transform .25s
}

.dark .vt-switch-check {
	background-color: var(--vt-c-black)
}

.vt-switch-icon {
	position: relative;
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	overflow: hidden
}

.vt-switch-icon svg {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 12px;
	height: 12px;
	fill: var(--vt-c-text-2)
}

.dark .vt-switch-icon svg {
	fill: var(--vt-c-text-1);
	transition: opacity .25s
}

.vt-switch-appearance-sun {
	opacity: 1
}

.vt-switch-appearance-moon,
.dark .vt-switch-appearance-sun {
	opacity: 0
}

.dark .vt-switch-appearance-moon {
	opacity: 1
}

.dark .vt-switch-appearance .vt-switch-check {
	transform: translate(18px)
}

.vt-box-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between
}

.vt-box-container .vt-box {
	background-color: var(--vt-c-bg-soft);
	transition: color .5s, background-color .5s;
	padding: 28px 36px;
	border-radius: 8px;
	flex: 0 32%;
	font-size: 14px;
	font-weight: 500
}

@media (max-width: 768px) {
	.vt-box-container .vt-box {
		flex: 0 100%;
		margin-bottom: 20px
	}
}

.vt-badge {
	display: inline-block;
	border-radius: 6px;
	font-size: .65em;
	line-height: 1;
	font-weight: 600;
	padding: .35em .4em .3em;
	position: relative;
	top: -.65em;
	margin-left: .5em;
	color: var(--vt-c-bg);
	transition: color .5s;
	background-color: var(--vt-c-brand)
}

.vt-badge.warning {
	color: var(--vt-c-text-light-1);
	background-color: var(--vt-c-yellow)
}

@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(/assets/inter-latin.7b37fe23.woff2) format("woff2");
	unicode-range: U+00??, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd
}

@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 400 500 600 700 900;
	font-display: swap;
	src: url(/assets/inter-latin-ext.65457fee.woff2) format("woff2");
	unicode-range: U+0100-024f, U+0259, U+1e??, U+2020, U+20a0-20ab, U+20ad-20cf, U+2113, U+2c60-2c7f, U+a720-a7ff
}

@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 400 500 600 700 900;
	font-display: swap;
	src: url(/assets/inter-cyrillic.5af0208d.woff2) format("woff2");
	unicode-range: U+0400-045f, U+0490-0491, U+04b0-04b1, U+2116
}

@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 400 500 600 700 900;
	font-display: swap;
	src: url(/assets/inter-cyrillic-ext.dae818a0.woff2) format("woff2");
	unicode-range: U+0460-052f, U+1c80-1c88, U+20b4, U+2de0-2dff, U+a640-a69f, U+fe2e-fe2f
}

@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 400 500 600 700 900;
	font-display: swap;
	src: url(/assets/inter-greek.c347ae24.woff2) format("woff2");
	unicode-range: U+0370-03ff
}

@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 400 500 600 700 900;
	font-display: swap;
	src: url(/assets/inter-greek-ext.311d9dee.woff2) format("woff2");
	unicode-range: U+1f??
}

@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 400 500 600 700 900;
	font-display: swap;
	src: url(/assets/inter-vietnamese.38390954.woff2) format("woff2");
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01a0-01a1, U+01af-01b0, U+1ea0-1ef9, U+20ab
}

:root {
	--vp-z-index-local-nav: 10;
	--vp-z-index-nav: 20;
	--vp-z-index-banner: 30;
	--vp-z-index-backdrop: 40;
	--vp-z-index-sidebar: 50;
	--vp-screen-max-width: 1376px
}

:root {
	--vp-sidebar-width-mobile: 320px;
	--vp-sidebar-width-small: 272px
}

html.dark {
	color-scheme: dark
}

.debug[data-v-22c6141f] {
	box-sizing: border-box;
	position: fixed;
	right: 8px;
	bottom: 8px;
	z-index: 9999;
	border-radius: 4px;
	width: 74px;
	height: 32px;
	color: #eee;
	overflow: hidden;
	cursor: pointer;
	background-color: #000000d9;
	transition: all .15s ease
}

.debug[data-v-22c6141f]:hover {
	background-color: #000000bf
}

.debug.open[data-v-22c6141f] {
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	margin-top: 0;
	border-radius: 0;
	padding: 0;
	overflow: scroll
}

@media (min-width: 512px) {
	.debug.open[data-v-22c6141f] {
		width: 512px
	}
}

.debug.open[data-v-22c6141f]:hover {
	background-color: #000000d9
}

.title[data-v-22c6141f] {
	margin: 0;
	padding: 6px 16px;
	line-height: 20px;
	font-size: 13px
}

.block[data-v-22c6141f] {
	margin: 2px 0 0;
	border-top: 1px solid rgba(255, 255, 255, .16);
	padding: 8px 16px;
	font-family: Hack, monospace;
	font-size: 13px
}

.block+.block[data-v-22c6141f] {
	margin-top: 8px
}

.VPNavBarTitle[data-v-5f26462c] {
	display: flex;
	align-items: center;
	padding-top: 1px;
	height: var(--vt-nav-height);
	transition: opacity .25s
}

.VPNavBarTitle[data-v-5f26462c]:hover {
	opacity: .6
}

.logo[data-v-5f26462c] {
	position: relative
}

.logo+.text[data-v-5f26462c] {
	padding-left: 8px
}

.text[data-v-5f26462c] {
	font-size: 16px;
	font-weight: 500
}

/*! @docsearch/css 3.0.0-alpha.41 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */
:root {
	--docsearch-primary-color: #5468ff;
	--docsearch-text-color: #1c1e21;
	--docsearch-spacing: 12px;
	--docsearch-icon-stroke-width: 1.4;
	--docsearch-highlight-color: var(--docsearch-primary-color);
	--docsearch-muted-color: #969faf;
	--docsearch-container-background: rgba(101, 108, 133, .8);
	--docsearch-logo-color: #5468ff;
	--docsearch-modal-width: 560px;
	--docsearch-modal-height: 600px;
	--docsearch-modal-background: #f5f6f7;
	--docsearch-modal-shadow: inset 1px 1px 0 0 hsla(0, 0%, 100%, .5), 0 3px 8px 0 #555a64;
	--docsearch-searchbox-height: 56px;
	--docsearch-searchbox-background: #ebedf0;
	--docsearch-searchbox-focus-background: #fff;
	--docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
	--docsearch-hit-height: 56px;
	--docsearch-hit-color: #444950;
	--docsearch-hit-active-color: #fff;
	--docsearch-hit-background: #fff;
	--docsearch-hit-shadow: 0 1px 3px 0 #d4d9e1;
	--docsearch-key-gradient: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
	--docsearch-key-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, .4);
	--docsearch-footer-height: 44px;
	--docsearch-footer-background: #fff;
	--docsearch-footer-shadow: 0 -1px 0 0 #e0e3e8, 0 -3px 6px 0 rgba(69, 98, 155, .12)
}

html[data-theme=dark] {
	--docsearch-text-color: #f5f6f7;
	--docsearch-container-background: rgba(9, 10, 17, .8);
	--docsearch-modal-background: #15172a;
	--docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
	--docsearch-searchbox-background: #090a11;
	--docsearch-searchbox-focus-background: #000;
	--docsearch-hit-color: #bec3c9;
	--docsearch-hit-shadow: none;
	--docsearch-hit-background: #090a11;
	--docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
	--docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, .3);
	--docsearch-footer-background: #1e2136;
	--docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, .5), 0 -4px 8px 0 rgba(0, 0, 0, .2);
	--docsearch-logo-color: #fff;
	--docsearch-muted-color: #7f8497
}

.DocSearch-Button {
	align-items: center;
	background: var(--docsearch-searchbox-background);
	border: 0;
	border-radius: 40px;
	color: var(--docsearch-muted-color);
	cursor: pointer;
	display: flex;
	font-weight: 500;
	height: 36px;
	justify-content: space-between;
	margin: 0 0 0 16px;
	padding: 0 8px;
	user-select: none
}

.DocSearch-Button:active,
.DocSearch-Button:focus,
.DocSearch-Button:hover {
	background: var(--docsearch-searchbox-focus-background);
	box-shadow: var(--docsearch-searchbox-shadow);
	color: var(--docsearch-text-color);
	outline: none
}

.DocSearch-Button-Container {
	align-items: center;
	display: flex
}

.DocSearch-Search-Icon {
	stroke-width: 1.6
}

.DocSearch-Button .DocSearch-Search-Icon {
	color: var(--docsearch-text-color)
}

.DocSearch-Button-Placeholder {
	font-size: 1rem;
	padding: 0 12px 0 6px
}

.DocSearch-Button-Keys {
	display: flex;
	min-width: calc(40px + .8em)
}

.DocSearch-Button-Key {
	align-items: center;
	background: var(--docsearch-key-gradient);
	border-radius: 3px;
	box-shadow: var(--docsearch-key-shadow);
	color: var(--docsearch-muted-color);
	display: flex;
	height: 18px;
	justify-content: center;
	margin-right: .4em;
	padding-bottom: 2px;
	position: relative;
	top: -1px;
	width: 20px
}

@media (max-width:750px) {

	.DocSearch-Button-Keys,
	.DocSearch-Button-Placeholder {
		display: none
	}
}

.DocSearch--active {
	overflow: hidden !important
}

.DocSearch-Container,
.DocSearch-Container * {
	box-sizing: border-box
}

.DocSearch-Container {
	background-color: var(--docsearch-container-background);
	height: 100vh;
	left: 0;
	position: fixed;
	top: 0;
	width: 100vw;
	z-index: 200
}

.DocSearch-Container a {
	text-decoration: none
}

.DocSearch-Link {
	appearance: none;
	background: none;
	border: 0;
	color: var(--docsearch-highlight-color);
	cursor: pointer;
	font: inherit;
	margin: 0;
	padding: 0
}

.DocSearch-Modal {
	background: var(--docsearch-modal-background);
	border-radius: 6px;
	box-shadow: var(--docsearch-modal-shadow);
	flex-direction: column;
	margin: 60px auto auto;
	max-width: var(--docsearch-modal-width);
	position: relative
}

.DocSearch-SearchBar {
	display: flex;
	padding: var(--docsearch-spacing) var(--docsearch-spacing) 0
}

.DocSearch-Form {
	align-items: center;
	background: var(--docsearch-searchbox-focus-background);
	border-radius: 4px;
	box-shadow: var(--docsearch-searchbox-shadow);
	display: flex;
	height: var(--docsearch-searchbox-height);
	margin: 0;
	padding: 0 var(--docsearch-spacing);
	position: relative;
	width: 100%
}

.DocSearch-Input {
	appearance: none;
	background: transparent;
	border: 0;
	color: var(--docsearch-text-color);
	flex: 1;
	font: inherit;
	font-size: 1.2em;
	height: 100%;
	outline: none;
	padding: 0 0 0 8px;
	width: 80%
}

.DocSearch-Input::placeholder {
	color: var(--docsearch-muted-color);
	opacity: 1
}

.DocSearch-Input::-webkit-search-cancel-button,
.DocSearch-Input::-webkit-search-decoration,
.DocSearch-Input::-webkit-search-results-button,
.DocSearch-Input::-webkit-search-results-decoration {
	display: none
}

.DocSearch-LoadingIndicator,
.DocSearch-MagnifierLabel,
.DocSearch-Reset {
	margin: 0;
	padding: 0
}

.DocSearch-MagnifierLabel,
.DocSearch-Reset {
	align-items: center;
	color: var(--docsearch-highlight-color);
	display: flex;
	justify-content: center
}

.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,
.DocSearch-LoadingIndicator {
	display: none
}

.DocSearch-Container--Stalled .DocSearch-LoadingIndicator {
	align-items: center;
	color: var(--docsearch-highlight-color);
	display: flex;
	justify-content: center
}

@media screen and (prefers-reduced-motion:reduce) {
	.DocSearch-Reset {
		animation: none;
		appearance: none;
		background: none;
		border: 0;
		border-radius: 50%;
		color: var(--docsearch-icon-color);
		cursor: pointer;
		right: 0;
		stroke-width: var(--docsearch-icon-stroke-width)
	}
}

.DocSearch-Reset {
	animation: fade-in .1s ease-in forwards;
	appearance: none;
	background: none;
	border: 0;
	border-radius: 50%;
	color: var(--docsearch-icon-color);
	cursor: pointer;
	padding: 2px;
	right: 0;
	stroke-width: var(--docsearch-icon-stroke-width)
}

.DocSearch-Reset[hidden] {
	display: none
}

.DocSearch-Reset:focus {
	outline: none
}

.DocSearch-Reset:hover {
	color: var(--docsearch-highlight-color)
}

.DocSearch-LoadingIndicator svg,
.DocSearch-MagnifierLabel svg {
	height: 24px;
	width: 24px
}

.DocSearch-Cancel {
	display: none
}

.DocSearch-Dropdown {
	max-height: calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));
	min-height: var(--docsearch-spacing);
	overflow-y: auto;
	overflow-y: overlay;
	padding: 0 var(--docsearch-spacing);
	scrollbar-color: var(--docsearch-muted-color) var(--docsearch-modal-background);
	scrollbar-width: thin
}

.DocSearch-Dropdown::-webkit-scrollbar {
	width: 12px
}

.DocSearch-Dropdown::-webkit-scrollbar-track {
	background: transparent
}

.DocSearch-Dropdown::-webkit-scrollbar-thumb {
	background-color: var(--docsearch-muted-color);
	border: 3px solid var(--docsearch-modal-background);
	border-radius: 20px
}

.DocSearch-Dropdown ul {
	list-style: none;
	margin: 0;
	padding: 0
}

.DocSearch-Label {
	font-size: .75em;
	line-height: 1.6em
}

.DocSearch-Help,
.DocSearch-Label {
	color: var(--docsearch-muted-color)
}

.DocSearch-Help {
	font-size: .9em;
	margin: 0;
	user-select: none
}

.DocSearch-Title {
	font-size: 1.2em
}

.DocSearch-Logo a {
	display: flex
}

.DocSearch-Logo svg {
	color: var(--docsearch-logo-color);
	margin-left: 8px
}

.DocSearch-Hits:last-of-type {
	margin-bottom: 24px
}

.DocSearch-Hits mark {
	background: none;
	color: var(--docsearch-highlight-color)
}

.DocSearch-HitsFooter {
	color: var(--docsearch-muted-color);
	display: flex;
	font-size: .85em;
	justify-content: center;
	margin-bottom: var(--docsearch-spacing);
	padding: var(--docsearch-spacing)
}

.DocSearch-HitsFooter a {
	border-bottom: 1px solid;
	color: inherit
}

.DocSearch-Hit {
	border-radius: 4px;
	display: flex;
	padding-bottom: 4px;
	position: relative
}

@media screen and (prefers-reduced-motion:reduce) {
	.DocSearch-Hit--deleting {
		transition: none
	}
}

.DocSearch-Hit--deleting {
	opacity: 0;
	transition: all .25s linear
}

@media screen and (prefers-reduced-motion:reduce) {
	.DocSearch-Hit--favoriting {
		transition: none
	}
}

.DocSearch-Hit--favoriting {
	transform: scale(0);
	transform-origin: top center;
	transition: all .25s linear;
	transition-delay: .25s
}

.DocSearch-Hit a {
	background: var(--docsearch-hit-background);
	border-radius: 4px;
	box-shadow: var(--docsearch-hit-shadow);
	display: block;
	padding-left: var(--docsearch-spacing);
	width: 100%
}

.DocSearch-Hit-source {
	background: var(--docsearch-modal-background);
	color: var(--docsearch-highlight-color);
	font-size: .85em;
	font-weight: 600;
	line-height: 32px;
	margin: 0 -4px;
	padding: 8px 4px 0;
	position: sticky;
	top: 0;
	z-index: 10
}

.DocSearch-Hit-Tree {
	color: var(--docsearch-muted-color);
	height: var(--docsearch-hit-height);
	opacity: .5;
	stroke-width: var(--docsearch-icon-stroke-width);
	width: 24px
}

.DocSearch-Hit[aria-selected=true] a {
	background-color: var(--docsearch-highlight-color)
}

.DocSearch-Hit[aria-selected=true] mark {
	text-decoration: underline
}

.DocSearch-Hit-Container {
	align-items: center;
	color: var(--docsearch-hit-color);
	display: flex;
	flex-direction: row;
	height: var(--docsearch-hit-height);
	padding: 0 var(--docsearch-spacing) 0 0
}

.DocSearch-Hit-icon {
	height: 20px;
	width: 20px
}

.DocSearch-Hit-action,
.DocSearch-Hit-icon {
	color: var(--docsearch-muted-color);
	stroke-width: var(--docsearch-icon-stroke-width)
}

.DocSearch-Hit-action {
	align-items: center;
	display: flex;
	height: 22px;
	width: 22px
}

.DocSearch-Hit-action svg {
	display: block;
	height: 18px;
	width: 18px
}

.DocSearch-Hit-action+.DocSearch-Hit-action {
	margin-left: 6px
}

.DocSearch-Hit-action-button {
	appearance: none;
	background: none;
	border: 0;
	border-radius: 50%;
	color: inherit;
	cursor: pointer;
	padding: 2px
}

svg.DocSearch-Hit-Select-Icon {
	display: none
}

.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon {
	display: block
}

.DocSearch-Hit-action-button:focus,
.DocSearch-Hit-action-button:hover {
	background: rgba(0, 0, 0, .2);
	transition: background-color .1s ease-in
}

@media screen and (prefers-reduced-motion:reduce) {

	.DocSearch-Hit-action-button:focus,
	.DocSearch-Hit-action-button:hover {
		transition: none
	}
}

.DocSearch-Hit-action-button:focus path,
.DocSearch-Hit-action-button:hover path {
	fill: #fff
}

.DocSearch-Hit-content-wrapper {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	font-weight: 500;
	justify-content: center;
	line-height: 1.2em;
	margin: 0 8px;
	overflow-x: hidden;
	position: relative;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 80%
}

.DocSearch-Hit-title {
	font-size: .9em
}

.DocSearch-Hit-path {
	color: var(--docsearch-muted-color);
	font-size: .75em
}

.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action,
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-icon,
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path,
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-text,
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-title,
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree,
.DocSearch-Hit[aria-selected=true] mark {
	color: var(--docsearch-hit-active-color) !important
}

@media screen and (prefers-reduced-motion:reduce) {

	.DocSearch-Hit-action-button:focus,
	.DocSearch-Hit-action-button:hover {
		background: rgba(0, 0, 0, .2);
		transition: none
	}
}

.DocSearch-ErrorScreen,
.DocSearch-NoResults,
.DocSearch-StartScreen {
	font-size: .9em;
	margin: 0 auto;
	padding: 36px 0;
	text-align: center;
	width: 80%
}

.DocSearch-Screen-Icon {
	color: var(--docsearch-muted-color);
	padding-bottom: 12px
}

.DocSearch-NoResults-Prefill-List {
	display: inline-block;
	padding-bottom: 24px;
	text-align: left
}

.DocSearch-NoResults-Prefill-List ul {
	display: inline-block;
	padding: 8px 0 0
}

.DocSearch-NoResults-Prefill-List li {
	list-style-position: inside;
	list-style-type: "\bb  "
}

.DocSearch-Prefill {
	appearance: none;
	background: none;
	border: 0;
	border-radius: 1em;
	color: var(--docsearch-highlight-color);
	cursor: pointer;
	display: inline-block;
	font-size: 1em;
	font-weight: 700;
	padding: 0
}

.DocSearch-Prefill:focus,
.DocSearch-Prefill:hover {
	outline: none;
	text-decoration: underline
}

.DocSearch-Footer {
	align-items: center;
	background: var(--docsearch-footer-background);
	border-radius: 0 0 8px 8px;
	box-shadow: var(--docsearch-footer-shadow);
	display: flex;
	flex-direction: row-reverse;
	flex-shrink: 0;
	height: var(--docsearch-footer-height);
	justify-content: space-between;
	padding: 0 var(--docsearch-spacing);
	position: relative;
	user-select: none;
	width: 100%;
	z-index: 300
}

.DocSearch-Commands {
	color: var(--docsearch-muted-color);
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0
}

.DocSearch-Commands li {
	align-items: center;
	display: flex
}

.DocSearch-Commands li:not(:last-of-type) {
	margin-right: .8em
}

.DocSearch-Commands-Key {
	align-items: center;
	background: var(--docsearch-key-gradient);
	border-radius: 2px;
	box-shadow: var(--docsearch-key-shadow);
	display: flex;
	height: 18px;
	justify-content: center;
	margin-right: .4em;
	padding-bottom: 1px;
	width: 20px
}

@media (max-width:750px) {
	:root {
		--docsearch-spacing: 10px;
		--docsearch-footer-height: 40px
	}

	.DocSearch-Dropdown {
		height: 100%
	}

	.DocSearch-Container {
		height: 100vh;
		height: -webkit-fill-available;
		height: calc(var(--docsearch-vh, 1vh)*100);
		position: absolute
	}

	.DocSearch-Footer {
		border-radius: 0;
		bottom: 0;
		position: absolute
	}

	.DocSearch-Hit-content-wrapper {
		display: flex;
		position: relative;
		width: 80%
	}

	.DocSearch-Modal {
		border-radius: 0;
		box-shadow: none;
		height: 100vh;
		height: -webkit-fill-available;
		height: calc(var(--docsearch-vh, 1vh)*100);
		margin: 0;
		max-width: 100%;
		width: 100%
	}

	.DocSearch-Dropdown {
		max-height: calc(var(--docsearch-vh, 1vh)*100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height))
	}

	.DocSearch-Cancel {
		appearance: none;
		background: none;
		border: 0;
		color: var(--docsearch-highlight-color);
		cursor: pointer;
		display: inline-block;
		flex: none;
		font: inherit;
		font-size: 1em;
		font-weight: 500;
		margin-left: var(--docsearch-spacing);
		outline: none;
		overflow: hidden;
		padding: 0;
		user-select: none;
		white-space: nowrap
	}

	.DocSearch-Commands,
	.DocSearch-Hit-Tree {
		display: none
	}
}

@keyframes fade-in {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

.VPNavBarSearch {
	display: flex;
	align-items: center;
	padding-left: 16px
}

@media (min-width: 768px) {
	.VPNavBarSearch {
		flex-grow: 1
	}
}

.DocSearch {
	--docsearch-primary-color: var(--vt-c-brand);
	--docsearch-highlight-color: var(--docsearch-primary-color);
	--docsearch-text-color: var(--vt-c-text-1);
	--docsearch-muted-color: var(--vt-c-text-2);
	--docsearch-searchbox-shadow: none;
	--docsearch-searchbox-focus-background: transparent;
	--docsearch-key-gradient: transparent;
	--docsearch-key-shadow: none;
	--docsearch-modal-background: var(--vt-c-bg-soft);
	--docsearch-footer-background: var(--vt-c-bg)
}

.dark .DocSearch {
	--docsearch-modal-shadow: none;
	--docsearch-footer-shadow: none;
	--docsearch-logo-color: var(--vt-c-text-2);
	--docsearch-hit-background: var(--vt-c-bg-mute);
	--docsearch-hit-color: var(--vt-c-text-2);
	--docsearch-hit-shadow: none
}

.dark .DocSearch-Footer {
	border-top: 1px solid var(--vt-c-divider)
}

.dark .DocSearch-Form {
	background-color: var(--vt-c-bg-mute)
}

.DocSearch-Form {
	background-color: #fff;
	border: 1px solid var(--vt-c-brand)
}

.DocSearch-Button-Container {
	align-items: center;
	display: flex
}

.DocSearch-Button {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	width: 48px;
	height: 55px;
	background: transparent
}

.DocSearch-Button:hover {
	background: transparent
}

.DocSearch-Button:focus {
	outline: 1px dotted;
	outline: 5px auto -webkit-focus-ring-color
}

.DocSearch-Button:focus:not(:focus-visible) {
	outline: none !important
}

@media (min-width: 768px) {
	.DocSearch-Button {
		justify-content: flex-start;
		width: 100%
	}
}

.DocSearch-Button .DocSearch-Search-Icon {
	color: var(--vt-c-text-2);
	transition: color .5s;
	fill: currentColor;
	width: 18px;
	height: 18px;
	position: relative
}

@media (min-width: 768px) {
	.DocSearch-Button .DocSearch-Search-Icon {
		top: 1px;
		margin-right: 10px;
		width: 15px;
		height: 15px
	}
}

.DocSearch-Button:hover .DocSearch-Search-Icon {
	color: var(--vt-c-text-1)
}

.DocSearch-Button-Placeholder {
	transition: color .5s;
	font-size: 13px;
	font-weight: 500;
	color: var(--vt-c-text-2);
	display: none;
	padding: 0 10px 0 0
}

@media (min-width: 960px) {
	.DocSearch-Button-Placeholder {
		display: inline-block
	}
}

.DocSearch-Button:hover .DocSearch-Button-Placeholder {
	color: var(--vt-c-text-1)
}

.DocSearch-Button .DocSearch-Button-Key {
	margin-top: 2px;
	border: 1px solid var(--vt-c-divider);
	border-right: none;
	border-radius: 4px 0 0 4px;
	display: none;
	padding-left: 6px;
	height: 22px;
	line-height: 22px;
	transition: color .5s, border-color .5s;
	min-width: 0
}

.DocSearch-Button .DocSearch-Button-Key+.DocSearch-Button-Key {
	border-right: 1px solid var(--vt-c-divider);
	border-left: none;
	border-radius: 0 4px 4px 0;
	padding-left: 2px;
	padding-right: 6px
}

.DocSearch-Button:hover .DocSearch-Button-Key {
	border-color: var(--vt-c-brand-light);
	color: var(--vt-c-brand-light)
}

@media (min-width: 768px) {
	.DocSearch-Button .DocSearch-Button-Key {
		display: inline-block
	}
}

.DocSearch-Button-Key {
	font-size: 12px;
	font-weight: 500;
	height: 20px;
	margin: 0;
	width: auto;
	color: var(--vt-c-text-3);
	transition: color .5s;
	display: inline-block;
	padding: 0 1px
}

.VPNavBarMenuLink[data-v-c1ab2038] {
	display: block;
	padding: 0 12px;
	line-height: calc(var(--vt-nav-height) - 1px);
	font-size: 13px;
	font-weight: 500;
	color: var(--vt-c-text-1);
	transition: color .25s
}

.VPNavBarMenuLink.active[data-v-c1ab2038] {
	border-bottom: 1px solid var(--vt-c-brand)
}

.VPNavBarMenuLink[data-v-c1ab2038]:hover {
	color: var(--vt-c-brand)
}

.VPNavBarMenuGroup.active[data-v-b598edbc] {
	border-bottom: 1px solid var(--vt-c-brand);
	height: var(--vt-nav-height)
}

.VPNavBarMenu[data-v-68faa570] {
	display: none
}

@media (min-width: 768px) {
	.VPNavBarMenu[data-v-68faa570] {
		display: flex
	}
}

.VPNavBarAppearance[data-v-10e6f5bd] {
	display: none
}

@media (min-width: 1280px) {
	.VPNavBarAppearance[data-v-10e6f5bd] {
		display: block
	}
}

.VPNavBarSocialLinks[data-v-3d7800db] {
	display: none;
	margin-right: -10px
}

@media (min-width: 1280px) {
	.VPNavBarSocialLinks[data-v-3d7800db] {
		display: flex
	}
}

.VPNavBarExtra[data-v-47ed6b06] {
	display: none
}

@media (min-width: 768px) {
	.VPNavBarExtra[data-v-47ed6b06] {
		display: block
	}
}

@media (min-width: 1280px) {
	.VPNavBarExtra[data-v-47ed6b06] {
		display: none
	}
}

.item[data-v-47ed6b06] {
	display: flex;
	align-items: center
}

.action[data-v-47ed6b06] {
	margin-right: -2px
}

.social-links[data-v-47ed6b06] {
	margin: -4px -8px
}

.VPNavBarHamburger[data-v-160e7f70] {
	width: 40px;
	height: var(--vt-nav-height)
}

@media (min-width: 768px) {
	.VPNavBarHamburger[data-v-160e7f70] {
		display: none
	}
}

.VPNavBar[data-v-6a126dd3] {
	position: relative;
	border-bottom: 1px solid var(--vt-c-divider-light);
	padding: 0 12px 0 24px;
	height: var(--vt-nav-height);
	background-color: var(--vt-c-bg);
	transition: border-color .5s, background-color .5s
}

@media (min-width: 768px) {
	.VPNavBar[data-v-6a126dd3] {
		padding: 0 12px 0 32px
	}
}

@media (min-width: 1280px) {
	.VPNavBar[data-v-6a126dd3] {
		padding: 0 32px
	}
}

.container[data-v-6a126dd3] {
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	max-width: var(--vp-screen-max-width)
}

.content[data-v-6a126dd3] {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-grow: 1
}

.menu+.appearance[data-v-6a126dd3] {
	margin-left: 8px
}

.menu+.social-links[data-v-6a126dd3] {
	margin-left: 12px
}

.appearance+.social-links[data-v-6a126dd3] {
	margin-left: 12px
}

.VPNavScreenMenuLink[data-v-3fd32423] {
	display: block;
	border-bottom: 1px solid var(--vt-c-divider-light);
	padding: 12px 0 11px;
	line-height: 24px;
	font-size: 14px;
	font-weight: 500;
	color: var(--vt-c-text-1);
	transition: border-color .5s, color .25s
}

.VPNavScreenMenuLink[data-v-3fd32423]:hover {
	color: var(--vt-c-brand)
}

.VPNavScreenMenuGroupLink[data-v-7d9d92c0] {
	display: block;
	line-height: 32px;
	font-size: 13px;
	font-weight: 400;
	color: var(--vt-c-text-1);
	transition: color .25s;
	margin-left: .6em
}

.VPNavScreenMenuGroupLink[data-v-7d9d92c0]:hover {
	color: var(--vt-c-brand)
}

.VPNavScreenMenuGroupSection[data-v-360485c7] {
	display: block
}

.title[data-v-360485c7] {
	line-height: 32px;
	font-size: 11px;
	font-weight: 700;
	color: var(--vt-c-text-2);
	text-transform: uppercase;
	transition: color .25s
}

.VPNavScreenMenuGroup[data-v-d231d4fc] {
	border-bottom: 1px solid var(--vt-c-divider-light);
	height: 48px;
	overflow: hidden;
	transition: border-color .5s
}

.VPNavScreenMenuGroup .items[data-v-d231d4fc] {
	visibility: hidden
}

.VPNavScreenMenuGroup.open .items[data-v-d231d4fc] {
	visibility: visible
}

.VPNavScreenMenuGroup.open[data-v-d231d4fc] {
	padding-bottom: 10px;
	height: auto
}

.VPNavScreenMenuGroup.open .button[data-v-d231d4fc] {
	padding-bottom: 6px;
	color: var(--vt-c-brand)
}

.VPNavScreenMenuGroup.open .button-icon[data-v-d231d4fc] {
	transform: rotate(45deg)
}

.button[data-v-d231d4fc] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 4px 11px 0;
	width: 100%;
	line-height: 24px;
	font-size: 14px;
	font-weight: 500;
	color: var(--vt-c-text-1);
	transition: color .25s
}

.button[data-v-d231d4fc]:hover {
	color: var(--vt-c-brand)
}

.button-icon[data-v-d231d4fc] {
	width: 14px;
	height: 14px;
	fill: var(--vt-c-text-2);
	transition: fill .5s, transform .25s
}

.group[data-v-d231d4fc]:first-child {
	padding-top: 4px
}

.group+.group[data-v-d231d4fc] {
	padding-top: 8px
}

.group+.item[data-v-d231d4fc] {
	padding-top: 8px
}

.VPNavScreenAppearance[data-v-ad370484] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 8px;
	padding: 12px 14px 12px 16px;
	background-color: var(--vt-c-bg-soft);
	transition: background-color .5s
}

.text[data-v-ad370484] {
	line-height: 24px;
	font-size: 12px;
	font-weight: 500;
	color: var(--vt-c-text-2);
	transition: color .5s
}

.VPNavScreen[data-v-6364a567] {
	position: fixed;
	top: calc(var(--vt-nav-height) + var(--vt-banner-height, 0px));
	right: 0;
	bottom: 0;
	left: 0;
	padding: 0 32px;
	width: 100%;
	background-color: var(--vt-c-bg);
	transition: background-color .5s;
	overflow-y: auto
}

.VPNavScreen.fade-enter-active[data-v-6364a567],
.VPNavScreen.fade-leave-active[data-v-6364a567] {
	transition: opacity .25s
}

.VPNavScreen.fade-enter-active .container[data-v-6364a567],
.VPNavScreen.fade-leave-active .container[data-v-6364a567] {
	transition: transform .25s ease
}

.VPNavScreen.fade-enter-from[data-v-6364a567],
.VPNavScreen.fade-leave-to[data-v-6364a567] {
	opacity: 0
}

.VPNavScreen.fade-enter-from .container[data-v-6364a567],
.VPNavScreen.fade-leave-to .container[data-v-6364a567] {
	transform: translateY(-8px)
}

@media (min-width: 768px) {
	.VPNavScreen[data-v-6364a567] {
		display: none
	}
}

.container[data-v-6364a567] {
	margin: 0 auto;
	padding: 24px 0 96px;
	max-width: 288px
}

.menu+.appearance[data-v-6364a567] {
	margin-top: 24px
}

.menu+.social-links[data-v-6364a567] {
	margin-top: 16px
}

.appearance+.social-links[data-v-6364a567] {
	margin-top: 12px
}

.VPNav[data-v-01dbeacc] {
	position: relative;
	top: 0;
	left: 0;
	z-index: var(--vp-z-index-nav)
}

@media (min-width: 960px) {
	.VPNav[data-v-01dbeacc] {
		position: fixed;
		top: var(--vt-banner-height, 0px);
		width: 100%
	}
}

.VPLocalNav[data-v-27012588] {
	position: sticky;
	top: var(--vt-banner-height, 0px);
	left: 0;
	z-index: var(--vp-z-index-local-nav);
	width: 100%;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid var(--vt-c-divider-light);
	background-color: var(--vt-c-bg);
	transition: border-color .5s, background-color .5s
}

@media (min-width: 960px) {
	.VPLocalNav[data-v-27012588] {
		display: none
	}
}

.menu[data-v-27012588] {
	display: flex;
	align-items: center;
	padding: 0 24px;
	line-height: 47px;
	font-size: 12px;
	font-weight: 500;
	color: var(--vt-c-text-2);
	transition: color .5s
}

.menu[data-v-27012588]:hover {
	color: var(--vt-c-text-1);
	transition: color .25s
}

@media (min-width: 768px) {
	.menu[data-v-27012588] {
		padding: 0 32px
	}
}

.menu-icon[data-v-27012588] {
	margin-right: 8px;
	width: 16px;
	height: 16px;
	fill: currentColor
}

.top-link[data-v-27012588] {
	padding: 0 24px;
	line-height: 47px;
	font-size: 12px;
	font-weight: 500;
	color: var(--vt-c-text-2);
	transition: color .5s
}

.top-link[data-v-27012588]:hover {
	color: var(--vt-c-text-1);
	transition: color .25s
}

@media (min-width: 768px) {
	.top-link[data-v-27012588] {
		padding: 0 32px
	}
}

.VPSkipLink[data-v-4f742274] {
	top: .25rem;
	left: .25rem;
	padding: .65rem 1.5rem;
	z-index: 999;
	font-size: .9em;
	font-weight: 700;
	text-decoration: none;
	color: var(--vt-c-green);
	box-shadow: var(--vt-shadow-3);
	background-color: var(--vt-c-bg);
	border-radius: 8px
}

.dark .VPSkipLink[data-v-4f742274] {
	color: var(--vt-c-green)
}

.VPSkipLink[data-v-4f742274]:focus {
	height: auto;
	width: auto;
	clip: auto;
	clip-path: none
}

.link[data-v-9ad74656] {
	display: block;
	padding: 6px 0
}

@media (min-width: 960px) {
	.link[data-v-9ad74656] {
		padding: 4px 0
	}
}

.link:hover .link-text[data-v-9ad74656] {
	color: var(--vt-c-brand-text-1);
	transition: color .25s
}

.link.active .link-text[data-v-9ad74656] {
	font-weight: 600;
	color: var(--vt-c-brand);
	transition: color .25s
}

.link-text[data-v-9ad74656] {
	line-height: 20px;
	font-size: 13px;
	font-weight: 500;
	color: var(--vt-c-text-2);
	transition: color .5s
}

.title[data-v-39795b07] {
	padding: 6px 0
}

@media (min-width: 960px) {
	.title[data-v-39795b07] {
		padding: 4px 0
	}
}

.title-text[data-v-39795b07] {
	line-height: 20px;
	font-size: 13px;
	font-weight: 600;
	color: var(--vt-c-text-1);
	transition: color .5s
}

.VPSidebar[data-v-305c183a] {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: var(--vp-z-index-sidebar);
	padding: 0 32px 96px;
	width: calc(100vw - 64px);
	max-width: var(--vp-sidebar-width-mobile);
	opacity: 0;
	background-color: var(--vt-c-bg);
	box-shadow: var(--vt-c-shadow-3);
	overflow-x: hidden;
	overflow-y: auto;
	transform: translate(-100%);
	transition: background-color .5s, opacity .5s, transform .3s ease
}

#VPSidebarNav[data-v-305c183a] {
	padding-top: 24px;
	outline: 0
}

@media (min-width: 960px) {
	.VPSidebar[data-v-305c183a] {
		top: calc(var(--vt-nav-height) + var(--vt-banner-height, 0px));
		z-index: 1;
		border-right: 1px solid var(--vt-c-divider-light);
		width: var(--vp-sidebar-width-small);
		max-width: 100%;
		opacity: 1;
		visibility: visible;
		box-shadow: none;
		transform: translate(0);
		transition: border-color .5s, background-color .5s
	}
}

@media (min-width: 1440px) {
	.VPSidebar[data-v-305c183a] {
		padding: 0 32px 96px calc((100% - var(--vp-screen-max-width)) / 2);
		width: calc((100% - var(--vp-screen-max-width)) / 2 + var(--vp-sidebar-width-small))
	}
}

.VPSidebar.open[data-v-305c183a] {
	opacity: 1;
	visibility: visible;
	transform: translate(0);
	transition: background-color .5s, opacity .25s, transform .5s cubic-bezier(.19, 1, .22, 1)
}

.dark .VPSidebar[data-v-305c183a] {
	box-shadow: var(--vt-shadow-1)
}

.group+.group[data-v-305c183a] {
	padding-top: 24px
}

@media (min-width: 960px) {
	.group+.group[data-v-305c183a] {
		padding-top: 16px
	}
}

.VPFooter[data-v-111e6896] {
	border-top: 1px solid var(--vt-c-bg-soft);
	padding: 23px 0 24px;
	background-color: var(--vt-c-bg-soft);
	transition: border-top .5s, background-color .5s
}

.dark .VPFooter[data-v-111e6896] {
	border-top: 1px solid var(--vt-c-divider-light);
	background-color: var(--vt-c-bg)
}

.license[data-v-111e6896],
.copyright[data-v-111e6896] {
	text-align: center;
	line-height: 20px;
	font-size: 12px;
	font-weight: 500;
	color: var(--vt-c-text-2);
	transition: color .25s
}

.link[data-v-111e6896] {
	color: var(--vt-c-text-1);
	transition: color .25s
}

.link[data-v-111e6896]:hover {
	color: var(--vt-c-text-2)
}

.VPContentDocOutline[data-v-a843c894] {
	font-size: 13px;
	font-weight: 500;
	position: relative
}

.outline-title[data-v-a843c894] {
	font-weight: 700;
	margin-bottom: 4px;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: .4px
}

.outline-link[data-v-a843c894] {
	color: var(--vt-c-text-2);
	transition: color .5s;
	line-height: 28px;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.outline-link[data-v-a843c894]:hover,
.outline-link.active[data-v-a843c894] {
	color: var(--vt-c-text-1);
	transition: color .25s
}

.outline-link.nested[data-v-a843c894] {
	padding-left: 1em
}

.outline-marker[data-v-a843c894] {
	opacity: 0;
	position: absolute;
	background-color: var(--vt-c-green);
	border-radius: 4px;
	width: 4px;
	height: 20px;
	top: 32px;
	left: -12px;
	z-index: 0;
	transition: top .25s cubic-bezier(0, 1, .5, 1), opacity .25s, background-color .5s
}

.root[data-v-a843c894] {
	z-index: 1;
	position: relative
}

.VPContentDocFooter[data-v-26eee970] {
	border-top: 1px solid var(--vt-c-divider-light);
	padding-top: 1rem;
	display: flex;
	justify-content: space-between
}

a[data-v-26eee970] {
	display: inline-block;
	font-weight: 500;
	font-size: 16px;
	max-width: 48%
}

.desc[data-v-26eee970] {
	font-size: 11px;
	color: var(--vt-c-text-2);
	display: block
}

.title[data-v-26eee970] {
	color: var(--vt-c-brand);
	transition: color .25s
}

a:hover .title[data-v-26eee970] {
	color: var(--vt-c-brand-highlight)
}

.next-link[data-v-26eee970] {
	margin-left: auto;
	text-align: right
}

.vt-link-icon[data-v-26eee970] {
	margin: -2px 0 0;
	vertical-align: middle
}

.VPCarbonAds {
	margin: 28px 0;
	padding: 20px 24px;
	background-color: var(--vt-c-bg-soft);
	border-radius: 4px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--vt-c-text-2);
	text-align: center;
	transition: color .5s, background-color .5s
}

.VPCarbonAds img {
	margin: 0 auto 12px;
	border-radius: 4px
}

.VPCarbonAds .carbon-poweredby {
	display: block;
	margin-top: 6px;
	text-transform: uppercase;
	transition: color .5s;
	color: var(--vt-c-text-3);
	font-size: 10px
}

.VPContentDoc[data-v-7d3b0a72] {
	padding: 32px 24px 96px
}

.vt-doc[data-v-7d3b0a72] {
	margin-bottom: 54px
}

.content[data-v-7d3b0a72] {
	margin: 0 auto;
	max-width: 688px;
	position: relative
}

.aside[data-v-7d3b0a72] {
	position: relative;
	display: none;
	flex-shrink: 0;
	padding-left: 64px;
	width: 320px
}

.aside-container[data-v-7d3b0a72] {
	position: sticky;
	width: 224px;
	top: calc(var(--vt-nav-height) + var(--vt-banner-height, 0px) + 24px);
	bottom: 0
}

.aside-container[data-v-7d3b0a72]::-webkit-scrollbar {
	display: none
}

.edit-link[data-v-7d3b0a72] {
	margin: 0 0 32px
}

.edit-link .vt-link[data-v-7d3b0a72] {
	font-size: 14px;
	color: var(--vt-c-brand);
	font-weight: 500
}

.vt-icon[data-v-7d3b0a72] {
	width: 18px;
	height: 18px;
	color: var(--vt-c-brand);
	display: inline-block;
	margin-right: 8px;
	position: relative;
	top: -1px
}

@media (min-width: 768px) {
	.VPContentDoc[data-v-7d3b0a72] {
		padding: 48px 32px 96px
	}
}

@media (min-width: 960px) {
	.VPContentDoc[data-v-7d3b0a72] {
		padding: 64px 64px 96px
	}
}

@media (min-width: 1280px) {
	.VPContentDoc[data-v-7d3b0a72] {
		padding: 64px 0 96px 64px
	}

	.VPContentDoc[data-v-7d3b0a72]:not(.has-sidebar.has-aside) {
		padding-left: calc((100vw - 688px)/2)
	}

	.VPContentDoc.has-aside[data-v-7d3b0a72]:not(.has-sidebar) {
		padding-left: calc((100vw - 1008px)/2)
	}

	.container[data-v-7d3b0a72] {
		display: flex
	}

	.content[data-v-7d3b0a72] {
		min-width: 620px;
		margin: 0;
		order: 1
	}

	.VPContentDoc:not(.has-aside) .content[data-v-7d3b0a72] {
		min-width: 688px
	}

	.aside[data-v-7d3b0a72] {
		display: block;
		order: 2
	}
}

@media (min-width: 1440px) {
	.VPContentDoc[data-v-7d3b0a72] {
		padding: 64px 0 96px 96px
	}

	.aside[data-v-7d3b0a72] {
		padding-left: 96px
	}
}

.vt-doc[data-v-e329ed34] {
	padding: 32px 48px;
	background-color: var(--vt-c-bg-soft);
	margin: 32px;
	border-radius: 8px
}

.not-found-path[data-v-e329ed34] {
	font-family: var(--vt-font-family-mono);
	color: var(--vt-c-text-code)
}

@media (max-width: 768px) {
	.VPContent[data-v-f56f3cfe] {
		overflow-x: hidden
	}
}

@media (min-width: 960px) {
	.VPContent[data-v-f56f3cfe] {
		padding-top: var(--vt-nav-height)
	}

	.VPContent.has-sidebar[data-v-f56f3cfe] {
		padding-left: var(--vp-sidebar-width-small)
	}
}

@media (min-width: 1440px) {
	.VPContent.has-sidebar[data-v-f56f3cfe] {
		padding-left: calc((100vw - var(--vp-screen-max-width)) / 2 + var(--vp-sidebar-width-small))
	}
}

.VPApp[data-v-204468d7] {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: var(--vt-c-bg);
	transition: background-color .5s;
	padding-top: var(--vt-banner-height)
}

.backdrop[data-v-204468d7] {
	z-index: var(--vp-z-index-backdrop)
}

.preference-switch[data-v-ea271328] {
	font-size: 12px;
	border-bottom: 1px solid var(--vt-c-divider-light);
	transition: border-color .5s, background-color .5s ease;
	margin-bottom: 20px;
	position: sticky;
	top: -.5px;
	background-color: var(--vt-c-bg);
	padding-top: 10px;
	z-index: 10
}

.toggle[data-v-ea271328] {
	color: var(--vt-c-text-2);
	transition: color .5s;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 2px;
	width: 100%;
	font-weight: 600
}

.toggle[data-v-ea271328]:hover {
	color: var(--vt-c-text-1)
}

.no-outline[data-v-ea271328] {
	outline: 0
}

.vt-link-icon[data-v-ea271328] {
	position: relative;
	top: 1px
}

.vt-link-icon.open[data-v-ea271328] {
	transform: rotate(180deg)
}

#preference-switches[data-v-ea271328] {
	padding: 12px 16px;
	background-color: var(--vt-c-bg-soft);
	transition: background-color .5s;
	margin: 6px 0 12px;
	border-radius: 8px;
	font-weight: 600
}

.switch-container[data-v-ea271328] {
	display: flex;
	align-items: center
}

.switch-container[data-v-ea271328]:nth-child(2) {
	margin-top: 10px
}

.vt-switch[data-v-ea271328] {
	margin-right: 5px;
	transform: scale(.8)
}

.switch-container label[data-v-ea271328] {
	transition: color .5s;
	cursor: pointer
}

.switch-container label[data-v-ea271328]:first-child {
	width: 50px
}

.switch-link[data-v-ea271328] {
	margin-left: 8px;
	font-size: 11px;
	min-width: 14px;
	height: 14px;
	line-height: 13px;
	text-align: center;
	color: var(--vt-c-green);
	border: 1px solid var(--vt-c-green);
	border-radius: 50%
}

@media (max-width: 1439px) {
	#preference-switches[data-v-ea271328] {
		font-size: 11px;
		padding: 8px 12px
	}

	.switch-container label[data-v-ea271328]:first-child {
		width: 46px
	}
}

.composition-api,
.sfc,
.prefer-composition .options-api,
.prefer-sfc .html {
	display: none
}

.prefer-composition .composition-api,
.prefer-sfc .sfc {
	display: initial
}

.prefer-composition .api-switch .vt-switch-check {
	transform: translate(18px)
}

.composition-label,
.sfc-label,
.prefer-composition .options-label,
.prefer-sfc .no-sfc-label {
	color: var(--vt-c-text-3)
}

.prefer-composition .composition-label,
.prefer-sfc .sfc-label {
	color: var(--vt-c-text-1)
}

.prefer-sfc .sfc-switch .vt-switch-check {
	transform: translate(18px)
}

.tip .options-api,
.tip .composition-api {
	color: var(--vt-c-text-code);
	font-weight: 600
}

.vueschool[data-v-50eeed65] {
	margin: 28px 0;
	background-color: var(--vt-c-bg-soft);
	padding: 1em 1.25em;
	position: relative;
	display: flex;
	border-radius: 8px
}

.vueschool a[data-v-50eeed65] {
	color: var(--c-text);
	position: relative;
	padding-left: 36px
}

.vueschool a[data-v-50eeed65]:before {
	content: "";
	position: absolute;
	display: block;
	width: 30px;
	height: 30px;
	top: calc(50% - 15px);
	left: -4px;
	border-radius: 50%;
	background-color: #73abfe
}

.vueschool a[data-v-50eeed65]:after {
	content: "";
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	top: calc(50% - 5px);
	left: 8px;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 8px solid #fff
}

#vs {
	align-items: center;
	background-color: #000c19;
	box-sizing: border-box;
	color: #fff;
	display: flex;
	font-family: Roboto, Oxygen, Fira Sans, Helvetica Neue, sans-serif;
	justify-content: center;
	position: fixed;
	padding: 0 10px;
	left: 0;
	right: 0;
	top: 0;
	z-index: 100;
	height: 5rem;
	line-height: 1;
	background-image: url(/images/vueschool/vs-fw-bg-small.svg);
	background-size: cover;
	background-repeat: no-repeat
}

#vs:hover {
	text-decoration: none
}

#vs .vs-logo {
	position: absolute;
	left: 20px;
	top: 20px
}

#vs .vs-logo .logo-big {
	display: none
}

#vs:hover .vs-core .vs-button-inside {
	background: linear-gradient(257deg, #e19b09 99%, #ffca24 6%)
}

#vs .vs-core .vs-slogan {
	color: #fff;
	margin-left: 8px;
	text-align: center
}

#vs .vs-core {
	align-items: center;
	display: flex;
	justify-content: center
}

#vs .vs-core .vs-slogan .vs-slogan-subtitle {
	font-size: 14px;
	color: #cdc5dc;
	margin-top: 8px
}

#vs .vs-core .vs-slogan .vs-slogan-title {
	font-size: 16px;
	font-weight: 800
}

#vs .vs-core .vs-slogan .vs-slogan-title strong {
	color: #fdc722
}

#vs .vs-core .vs-button {
	background: linear-gradient(0deg, #ffdf4c, #e29d0a);
	padding: 2px;
	margin-right: 18px;
	margin-left: 16px;
	border-radius: 30px;
	display: none
}

#vs .vs-core .vs-button-inside {
	color: #000;
	padding: 7px 10px;
	font-weight: 800;
	font-size: 22px;
	white-space: nowrap;
	border-radius: 30px;
	background: linear-gradient(90deg, #FFC828, #E19C0E);
	text-transform: uppercase
}

#vs .vs-close {
	right: 6px;
	position: absolute
}

#vs .vs-close:hover {
	color: #56d8ff
}

.has-top-banner {
	--vt-banner-height: 80px
}

.has-top-banner .banner {
	height: 24px;
	line-height: 24px;
	top: 80px
}

@media (min-width: 680px) {
	#vs {
		background-image: url(/images/vueschool/vs-fw-bg.svg);
		background-position: top right -110px
	}

	#vs .vs-core .vs-slogan {
		margin-left: 24px
	}

	#vs .vs-core .vs-slogan .vs-slogan-subtitle {
		font-size: 16px
	}

	#vs .vs-core .vs-slogan .vs-slogan-title {
		font-size: 18px
	}

	#vs .vs-core .vs-button {
		display: inline-block;
		margin-right: 0;
		margin-left: 22px
	}

	#vs .vs-core .vs-button-inside {
		padding: 8px 24px
	}

	#vs .vs-close {
		padding: 10px;
		right: 20px
	}
}

@media (min-width: 768px) {
	#vs .vs-logo .logo-small {
		display: none
	}

	#vs .vs-logo .logo-big {
		display: inline-block
	}

	#vs .vs-core {
		width: 430px
	}
}

@media (min-width: 1024px) {
	#vs {
		background-position: top right
	}

	#vs .vs-core .vs-slogan .vs-slogan-title {
		font-size: 24px
	}

	#vs .vs-core .vs-button {
		margin-left: 69px
	}

	#vs .vs-core {
		width: auto
	}
}

.sponsor-container[data-v-3793b348] {
	--max-width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--max-width), 1fr));
	column-gap: 4px
}

.sponsor-container.platinum[data-v-3793b348] {
	--max-width: 240px
}

.sponsor-container.gold[data-v-3793b348] {
	--max-width: 180px
}

.sponsor-container.silver[data-v-3793b348] {
	--max-width: 140px
}

.sponsor-item[data-v-3793b348] {
	margin: 2px 0;
	background-color: var(--vt-c-white-soft);
	display: flex;
	justify-content: space-around;
	align-items: center;
	border-radius: 2px;
	transition: background-color .2s ease;
	height: calc(var(--max-width) / 2 - 6px)
}

.sponsor-item.action[data-v-3793b348] {
	font-size: 11px;
	color: var(--vt-c-text-3)
}

.sponsor-item img[data-v-3793b348] {
	max-width: calc(var(--max-width) - 30px);
	max-height: calc(var(--max-width) / 2 - 20px)
}

.special .sponsor-item[data-v-3793b348] {
	height: 160px
}

.special .sponsor-item img[data-v-3793b348] {
	max-width: 300px;
	max-height: 150px
}

.dark .aside .sponsor-item[data-v-3793b348],
.dark .landing .sponsor-item[data-v-3793b348] {
	background-color: var(--vt-c-bg-soft)
}

.aside .sponsor-item img[data-v-3793b348],
.landing .sponsor-item img[data-v-3793b348] {
	transition: filter .2s ease
}

.dark .aside .sponsor-item img[data-v-3793b348],
.dark .landing .sponsor-item img[data-v-3793b348] {
	filter: grayscale(1) invert(1)
}

.dark .aside .sponsor-item[data-v-3793b348]:hover,
.dark .landing .sponsor-item[data-v-3793b348]:hover {
	color: var(--vt-c-indigo);
	background-color: var(--vt-c-white-mute)
}

.dark .sponsor-item:hover img[data-v-3793b348] {
	filter: none
}

.sponsor-container.platinum.aside[data-v-3793b348] {
	--max-width: 110px;
	column-gap: 1px
}

.aside .sponsor-item[data-v-3793b348] {
	margin: 1px 0
}

.aside .special .sponsor-item[data-v-3793b348] {
	width: 100%;
	height: 60px
}

.aside .special .sponsor-item img[data-v-3793b348] {
	width: 120px
}

.aside .platinum .sponsor-item[data-v-3793b348] {
	width: 111px;
	height: 50px
}

.aside .platinum .sponsor-item img[data-v-3793b348] {
	max-width: 88px
}

@media (max-width: 720px) {
	.sponsor-container.platinum[data-v-3793b348] {
		--max-width: 180px
	}

	.sponsor-container.gold[data-v-3793b348] {
		--max-width: 140px
	}

	.sponsor-container.silver[data-v-3793b348] {
		--max-width: 120px
	}
}

@media (max-width: 480px) {
	.sponsor-container.platinum[data-v-3793b348] {
		--max-width: 150px
	}

	.sponsor-container.gold[data-v-3793b348] {
		--max-width: 120px
	}

	.sponsor-container.silver[data-v-3793b348] {
		--max-width: 100px
	}
}

a.sponsors-aside-text {
	color: var(--vt-c-text-3);
	display: block;
	margin: 3em 0 1em;
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .4px
}

.vuejobs-container[data-v-148cefec] {
	border-radius: 2px;
	background-color: var(--vt-c-bg-soft);
	padding: 3px 10px
}

.vj-item[data-v-148cefec] {
	padding: 10px 0;
	border-bottom: 1px solid var(--vt-c-divider-light);
	display: flex;
	flex-direction: column
}

.vj-item[data-v-148cefec]:last-child {
	border-bottom: none
}

.vuejobs-container p[data-v-148cefec],
.vuejobs-container a[data-v-148cefec] {
	line-height: 16px;
	transition: color .2s ease
}

.vuejobs-container a[data-v-148cefec]:hover {
	color: var(--vt-c-brand)
}

.vj-job-title[data-v-148cefec] {
	font-size: 12px;
	color: var(--vt-c-text-1);
	display: flex;
	flex-direction: row
}

.vj-job-info[data-v-148cefec] {
	font-size: 11px;
	color: var(--vt-c-text-2);
	margin-top: 2px;
	line-height: 12px
}

.vj-company-logo[data-v-148cefec] {
	width: 30px;
	height: 30px;
	margin-bottom: 10px;
	margin-right: 10px
}