:root {
	--vp-c-brand: hsl(0 85% 57%);
	--vp-c-brand-light: hsl(0 85% 70%);
	--vp-c-brand-lighter: hsl(0 85% 80%);
	--vp-c-brand-dark: hsl(0 85% 57%);
	--vp-c-brand-darker: hsl(0 85% 40%);

	--vp-home-hero-name-color: transparent;
	--vp-home-hero-name-background: -webkit-linear-gradient(
		120deg,
		hsl(0 100% 60%),
		hsl(15 100% 60%) 35%,
		hsl(23 96% 62%) 45%,
		hsl(0 100% 60%) 65%,
		hsl(358 58% 47%)
	);
	--vp-home-hero-image-background-image: linear-gradient(
		-45deg,
		hsl(0 100% 60% / 80%),
		hsl(15 100% 60% / 80%) 40%,
		hsl(23 96% 62% / 80%) 45%,
		hsl(0 100% 60% / 80%) 60%,
		hsl(358 58% 47% / 80%)
	);
	--vp-home-hero-image-filter: blur(40px);

	--vp-c-gray-light-3: #d1d1d1;
	--vp-c-gray-light-5: #f2f2f2;
	--vp-c-gray-dark-2: #484848;
	--vp-c-gray-dark-3: #3a3a3a;
}

@media (min-width: 640px) {
	:root {
		--vp-home-hero-image-filter: blur(56px);
	}
}

@media (min-width: 960px) {
	:root {
		--vp-home-hero-image-filter: blur(72px);
	}
}

.vp-doc h4 {
	margin-top: 24px;
}

.vp-doc tr.transposed-table:nth-child(2n) {
	background: transparent;
}

.vp-doc tr.transposed-table:nth-child(2n + 1) {
	background: var(--vp-c-bg-soft);
}

.vp-doc tr.transposed-table > th {
	white-space: nowrap;
}

svg[id^='mermaid-'] {
	line-height: 1.5;
	background-color: transparent !important;
}

svg[id^='mermaid-'] .edgeLabel {
	padding: 0 !important;
}

.dark svg[id^='mermaid-'] .flowchart-link {
	stroke: lightgrey !important;
}

.dark svg[id^='mermaid-'] .marker {
	stroke: lightgrey !important;
	fill: lightgrey !important;
}

.dark svg[id^='mermaid-'] .edgeLabel {
	background-color: #585858 !important;
}

.dark svg[id^='mermaid-'] span {
	color: #ccc !important;
}
