.vo-hero-page {
	--vo-head-bg: #0A0911;
	--vo-topics-bg: #0A0911;
}

.vo-hero-page.vo-hero-page--scrolled,
.vo-hero-page:has(.header-search-panel.is-open) {
	--vo-head-bg: var(--color-surface);
}

.vo-hero {
	--vo-hero-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z'/%3E%3C/svg%3E");
	--vo-hero-ink-a: conic-gradient(from 160deg at 22% 70%, #9FD3F0, #C9A6F0, #F2B8C6, #9FD3F0);
	--vo-hero-ink-b: conic-gradient(from 20deg at 78% 30%, #F3DA94, #F2B8C6, #AEB6F0, #9CCBEA, #F3DA94);
	--vo-hero-text: #F1EFFA;
	--vo-deck-time: 3600ms;
	position: relative;
	z-index: 0;
	isolation: isolate;
	margin: calc(var(--space-32) * -1) 0 calc(var(--vo-home-gap) - var(--space-32));
	padding: var(--space-24) 0 var(--space-32);
}

.vo-hero__bg {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	z-index: -1;
	width: 100vw;
	margin-left: -50vw;
	overflow: hidden;
	pointer-events: none;
}

.vo-hero__base,
.vo-hero__dots {
	position: absolute;
	inset: 0;
}

.vo-hero__base {
	background: linear-gradient(180deg, #0A0911 0%, #0A0911 62%, var(--color-background) 100%);
}

.vo-hero__dots {
	background-image: radial-gradient(circle, rgba(174, 182, 240, 0.22) 1px, transparent 1.6px);
	background-size: 18px 18px;
	-webkit-mask-image: radial-gradient(90% 46% at 72% 64%, #000, transparent 75%);
	mask-image: radial-gradient(90% 46% at 72% 64%, #000, transparent 75%);
}

.vo-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-24);
	align-items: center;
}

.vo-hero__copy {
	min-width: 0;
}

.vo-hero__mark {
	margin: 0;
	color: var(--vo-hero-text);
	font-size: clamp(44px, 3.6vw + 26px, 78px);
	font-weight: var(--font-weight-extrabold);
	line-height: 0.94;
	letter-spacing: -0.04em;
}

.vo-hero__ink,
.vo-hero__ink::before {
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.vo-hero__ink {
	position: relative;
	display: inline-block;
	background-image: var(--vo-hero-ink-a);
}

.vo-hero__ink::before {
	content: attr(data-vo-ink);
	content: attr(data-vo-ink) / '';
	position: absolute;
	inset: 0;
	background-image: var(--vo-hero-ink-b);
	-webkit-mask-image: linear-gradient(90deg, transparent 34%, #000 66%);
	mask-image: linear-gradient(90deg, transparent 34%, #000 66%);
	pointer-events: none;
}

.vo-hero__title {
	margin: var(--space-16) 0 0;
	color: var(--color-foreground);
	font-size: clamp(16px, 0.6vw + 13px, 22px);
	font-weight: var(--font-weight-extrabold);
	line-height: 1.45;
	letter-spacing: 0;
}

.vo-hero__keep {
	display: inline-block;
	white-space: nowrap;
}

.vo-hero__focus {
	display: inline-block;
	margin: 0 0.2em;
	padding: 0.02em 0.28em;
	border-radius: var(--radius-md);
	background-color: rgba(124, 134, 196, 0.2);
	color: #DCE0FF;
	font-style: normal;
}

.vo-hero__lead {
	max-width: 38em;
	margin: var(--space-12) 0 0;
	color: var(--color-muted-foreground);
	font-size: var(--font-size-xs);
	line-height: var(--line-height-relaxed);
}

.vo-deck {
	position: relative;
	width: 100%;
	max-width: 560px;
}

.vo-deck__stack {
	position: relative;
	height: 304px;
	border-radius: 26px;
	background-color: var(--color-card);
}

.vo-deck__card {
	position: absolute;
	right: 6px;
	bottom: 6px;
	left: 6px;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	gap: var(--space-12);
	height: 292px;
	padding: var(--space-16);
	overflow: hidden;
	border-radius: 20px;
	background-color: #050505;
	color: var(--color-foreground);
	text-decoration: none;
	opacity: 0;
	transform: translateX(24px);
	pointer-events: none;
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.45s;
}

.vo-deck__card > * {
	min-width: 0;
}

.vo-deck__card[data-pos="0"] {
	z-index: 5;
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.vo-deck__card.is-leaving {
	z-index: 6;
	animation: vo-deck-out 0.45s cubic-bezier(0.55, 0, 0.7, 0.2) forwards;
}

.vo-deck__card:focus-visible {
	outline: 2px solid var(--color-ring);
	outline-offset: 3px;
}

.vo-deck__backdrop {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.6s;
}

.vo-deck__backdrop.is-ready {
	opacity: 1;
}

.vo-deck__backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(180deg, rgba(5, 5, 5, 0.55) 0%, rgba(5, 5, 5, 0.15) 30%, rgba(5, 5, 5, 0.05) 50%, rgba(5, 5, 5, 0.5) 100%);
}

.vo-deck__haze,
.vo-deck__clear {
	position: absolute;
	inset: 0;
	background-image: var(--vo-deck-cover);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.vo-deck__haze {
	transform: scale(1.15);
	filter: blur(16px) saturate(1.3) brightness(0.9);
}

.vo-deck__clear {
	-webkit-mask-image: linear-gradient(180deg, transparent 14%, #000 32%, #000 56%, transparent 74%);
	mask-image: linear-gradient(180deg, transparent 14%, #000 32%, #000 56%, transparent 74%);
}

.vo-deck__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--space-12);
	align-items: center;
}

.vo-deck__who {
	display: grid;
	min-width: 0;
}

.vo-deck__cat {
	overflow: hidden;
	color: #AEB6F0;
	font-size: 11px;
	line-height: 1.5;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.vo-deck__name {
	overflow: hidden;
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-extrabold);
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.vo-deck__by {
	overflow: hidden;
	color: var(--color-muted-foreground);
	font-size: 11px;
	line-height: 1.5;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.vo-deck__score {
	display: grid;
	justify-items: end;
	gap: 3px;
}

.vo-deck__total {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-extrabold);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.vo-deck__stars {
	position: relative;
	display: block;
	width: 55px;
	height: 11px;
	background-color: var(--color-star-empty);
	-webkit-mask-image: var(--vo-hero-star);
	mask-image: var(--vo-hero-star);
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: 11px 11px;
	mask-size: 11px 11px;
}

.vo-deck__stars-fill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	background-color: var(--color-star);
}

.vo-deck__overall {
	color: var(--color-muted-foreground);
	font-size: 10px;
	line-height: 1.2;
}

.vo-deck__matrix {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 4px var(--space-10);
	align-items: center;
	align-self: end;
	padding: var(--space-10) var(--space-12);
	border-radius: var(--radius-lg);
	background-color: rgba(9, 8, 16, 0.5);
	-webkit-backdrop-filter: blur(18px) saturate(1.2);
	backdrop-filter: blur(18px) saturate(1.2);
}

.vo-deck__row {
	display: contents;
}

.vo-deck__row--rp {
	--vo-deck-tone: #6AB0D8;
}

.vo-deck__row--f {
	--vo-deck-tone: #B48CDB;
}

.vo-deck__row--m {
	--vo-deck-tone: #AEB6F0;
}

.vo-deck__row--d {
	--vo-deck-tone: var(--color-sub);
}

.vo-deck__row--n {
	--vo-deck-tone: var(--color-primary);
}

.vo-deck__label {
	overflow: hidden;
	color: var(--color-muted-foreground);
	font-size: 10px;
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.vo-deck__cells {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: 2px;
}

.vo-deck__cell {
	overflow: hidden;
	height: 16px;
	border-radius: 3px;
	background-color: rgba(255, 255, 255, 0.06);
	color: rgba(202, 197, 229, 0.38);
	font-size: 9px;
	font-weight: var(--font-weight-bold);
	line-height: 16px;
	text-align: center;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.vo-deck__cell.is-on {
	background-color: var(--vo-deck-tone);
	color: var(--color-on-sub);
}

.vo-deck__card.is-fresh .vo-deck__cell.is-on {
	animation: vo-deck-lit 0.5s var(--ease-out) both;
	animation-delay: calc(var(--i, 0) * 45ms + 0.15s);
}

.vo-deck__meta {
	display: flex;
	justify-content: center;
	margin-top: var(--space-12);
}

.vo-deck__ticks {
	display: flex;
	flex: 1;
	gap: var(--space-4);
	max-width: 200px;
}

.vo-deck__tick {
	flex: 1;
	height: 3px;
	overflow: hidden;
	border-radius: 2px;
	background-color: rgba(255, 255, 255, 0.1);
}

.vo-deck__tick.is-done {
	background-color: rgba(210, 168, 64, 0.5);
}

.vo-deck__tick-fill {
	display: block;
	height: 100%;
	background-color: var(--color-primary);
	transform: scaleX(0);
	transform-origin: left;
}

.vo-deck__tick.is-now .vo-deck__tick-fill {
	animation: vo-deck-time var(--vo-deck-time) linear forwards;
}

.vo-deck:hover .vo-deck__tick-fill,
.vo-deck:focus-within .vo-deck__tick-fill,
.vo-hero.is-idle .vo-deck__tick-fill {
	animation-play-state: paused;
}

@keyframes vo-deck-out {
	to {
		opacity: 0;
		transform: translateX(-24px);
	}
}

@keyframes vo-deck-lit {
	from {
		background-color: rgba(255, 255, 255, 0.06);
		color: rgba(202, 197, 229, 0.38);
	}
}

@keyframes vo-deck-time {
	to {
		transform: scaleX(1);
	}
}

@media (min-width: 768px) {
	.vo-hero {
		margin-bottom: calc(var(--vo-home-gap) - var(--space-40));
		padding: var(--space-32) 0 var(--space-40);
	}

	.vo-hero__lead {
		font-size: var(--font-size-sm);
		line-height: 1.85;
	}

	.vo-deck__stack {
		height: 352px;
		border-radius: 28px;
	}

	.vo-deck__card {
		gap: 14px;
		height: 340px;
		padding: var(--space-20) 22px;
		border-radius: 22px;
	}

	.vo-deck__name {
		font-size: var(--font-size-xl);
	}

	.vo-deck__total {
		font-size: 30px;
	}

	.vo-deck__matrix {
		gap: 5px var(--space-12);
		padding: var(--space-12) 14px;
	}

	.vo-deck__label {
		font-size: 10.5px;
	}

	.vo-deck__cell {
		height: 18px;
		font-size: 9.5px;
		line-height: 18px;
	}
}

@media (min-width: 1024px) {
	.vo-hero__grid {
		grid-template-columns: minmax(0, 1fr) 520px;
		gap: 56px;
		align-items: stretch;
		overflow-x: clip;
		overflow-clip-margin: calc(max((100vw - var(--container-max)) / 2, 0px) + var(--container-padding) - 9px);
	}

	.vo-hero__dots {
		-webkit-mask-image: radial-gradient(48% 70% at 74% 40%, #000, transparent 75%);
		mask-image: radial-gradient(48% 70% at 74% 40%, #000, transparent 75%);
	}

	.vo-deck {
		display: flex;
		flex-direction: column;
		max-width: none;
	}

	.vo-deck__stack {
		flex: 1;
		height: auto;
		min-height: 352px;
	}

	.vo-deck__card {
		top: 6px;
		height: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vo-deck__card.is-leaving,
	.vo-deck__card.is-fresh .vo-deck__cell.is-on,
	.vo-deck__tick.is-now .vo-deck__tick-fill {
		animation: none;
	}

	.vo-deck__card,
	.vo-deck__backdrop {
		transition: none;
	}
}