.vo-pickup {
	--vo-sechead-gap: var(--space-8);
}
.vo-pickup--home {
	padding: calc(var(--vo-home-gap) - var(--space-32)) 0 var(--vo-home-gap);
}
.column-section + .vo-pickup--home {
	padding-top: var(--vo-home-gap);
}
.vo-pickup--home .vo-pickup__inner {
	width: 100%;
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
}
.vo-pickup--post {
	margin-top: var(--space-32);
}
.vo-pickup__nav {
	display: flex;
	align-items: center;
	flex: none;
	gap: var(--space-6);
}
.vo-pickup__nav[hidden] {
	display: none;
}
.vo-pickup__arrow {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: var(--radius-full);
	background-color: var(--color-surface-2);
	color: var(--color-foreground);
	cursor: pointer;
	transition: background-color var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.vo-pickup__arrow::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 38px;
	height: 44px;
	translate: -50% -50%;
}
.vo-pickup__arrow:hover:not(:disabled) {
	background-color: var(--color-surface-3);
	color: var(--color-primary);
}
.vo-pickup__arrow:focus-visible {
	outline: 2px solid var(--color-ring);
	outline-offset: 2px;
}
.vo-pickup__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}
.vo-picks {
	container-type: inline-size;
}
.vo-picks__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-16);
	padding-top: var(--space-16);
}
@property --vo-picks-fade-start {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}
@property --vo-picks-fade-end {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}
.vo-picks--scroll {
	--vo-picks-bleed: var(--container-padding);
}
.vo-picks--scroll .vo-picks__list {
	display: flex;
	gap: var(--space-12);
	margin-right: calc(var(--vo-picks-bleed) * -1);
	margin-left: calc(var(--vo-picks-bleed) * -1);
	padding-right: var(--vo-picks-bleed);
	padding-left: var(--vo-picks-bleed);
	scroll-padding-inline: var(--vo-picks-bleed);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--vo-picks-fade-start), #000 calc(100% - var(--vo-picks-fade-end)), transparent);
	mask-image: linear-gradient(to right, transparent, #000 var(--vo-picks-fade-start), #000 calc(100% - var(--vo-picks-fade-end)), transparent);
	transition: --vo-picks-fade-start var(--dur-3) var(--ease-out), --vo-picks-fade-end var(--dur-3) var(--ease-out);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}
.vo-picks--scroll .vo-picks__list::-webkit-scrollbar {
	display: none;
}
.vo-picks--scroll .vo-pickcard {
	flex: none;
	width: min(80vw, 300px);
	scroll-snap-align: start;
}
@media (max-width: 767px) {
	.vo-picks--swipe .vo-picks__list {
		display: flex;
		gap: var(--space-12);
		margin-right: calc(var(--container-padding) * -1);
		margin-left: calc(var(--container-padding) * -1);
		padding-right: var(--container-padding);
		padding-left: var(--container-padding);
		scroll-padding-inline: var(--container-padding);
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.vo-picks--swipe .vo-picks__list::-webkit-scrollbar {
		display: none;
	}
	.vo-picks--swipe .vo-pickcard {
		flex: none;
		width: min(80vw, 300px);
		scroll-snap-align: start;
	}
}
.vo-pickcard {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: var(--space-8);
	border-radius: 24px;
	background-color: var(--color-card);
	transition: background-color var(--dur-3) var(--ease-out);
}
.vo-pickcard__media {
	position: relative;
	flex: none;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--space-16);
	background-color: #0D0C13;
}
.vo-pickcard__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-4) var(--ease-out);
}
.vo-pickcard__save {
	position: absolute;
	top: var(--space-10);
	right: var(--space-10);
	z-index: 2;
	display: flex;
}
.vo-pickcard__main {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--space-8);
	min-width: 0;
	padding: var(--space-16) var(--space-10) 14px;
}
.vo-pickcard__name {
	display: -webkit-box;
	min-height: 2.7em;
	margin: 0;
	overflow: hidden;
	color: var(--color-foreground);
	font-size: 1.125rem;
	font-weight: var(--font-weight-extrabold);
	line-height: 1.35;
	letter-spacing: var(--letter-spacing-heading);
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}
.vo-pickcard__name a {
	transition: color var(--dur-1) var(--ease-out);
}
.vo-pickcard__name a:focus-visible {
	outline: none;
}
.vo-pickcard__name a:focus-visible::after {
	border-radius: 24px;
	outline: 2px solid var(--color-ring);
	outline-offset: 2px;
}
.vo-pickcard__quote {
	position: relative;
	display: -webkit-box;
	margin: var(--space-2) 0 0;
	padding-left: 26px;
	overflow: hidden;
	color: #C4C0D6;
	font-size: var(--font-size-xs);
	line-height: 1.75;
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}
.vo-pickcard__mark {
	position: absolute;
	top: 3px;
	left: 0;
	color: var(--color-primary);
}
.vo-pickcard__score {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	min-width: 0;
	padding: 11px var(--space-12);
	border-radius: var(--space-16);
	background-color: var(--color-surface-2);
	white-space: nowrap;
	transition: background-color var(--dur-3) var(--ease-out);
}
.vo-pickcard__rate {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
}
.vo-pickcard__stars {
	flex: none;
	width: 71px;
	height: 13px;
	background-image: linear-gradient(90deg, var(--color-primary) var(--vo-pickcard-fill, 0px), var(--color-switch-background) 0);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%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") 0 0 / 14.5px 13px repeat-x;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%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") 0 0 / 14.5px 13px repeat-x;
}
.vo-pickcard__value {
	color: var(--color-foreground);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-extrabold);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.vo-pickcard__chip {
	display: inline-flex;
	align-items: center;
	height: 24px;
	margin-left: auto;
	padding: 0 9px;
	border-radius: var(--radius-full);
	background-color: var(--color-surface-3);
	color: var(--color-foreground);
	font-size: var(--font-size-3xs);
	font-weight: var(--font-weight-bold);
	line-height: 1;
}
.vo-pickcard__chip--beginner {
	background-color: var(--color-positive-tint-18);
	color: var(--color-positive);
}
.vo-pickcard__chip--intermediate {
	background-color: var(--color-sub-tint-28);
	color: var(--color-sub);
}
.vo-pickcard__chip--advanced {
	background-color: var(--color-destructive-tint-18);
	color: var(--color-destructive);
}
@media (hover: hover) {
	.vo-pickcard:hover {
		background-color: #211F31;
	}
	.vo-pickcard:hover .vo-pickcard__media img {
		transform: scale(1.05);
	}
	.vo-pickcard:hover .vo-pickcard__name a {
		color: var(--color-link-hover);
	}
	.vo-pickcard:hover .vo-pickcard__score {
		background-color: #2A2840;
	}
}
.vo-pick {
	--vo-pick-ring: 5px;
	--vo-pick-gap: 6px;
	--vo-pick-curve: 8px;
	--vo-pick-tag: 28px;
	--vo-pick-fillet: radial-gradient(circle at 0 100%, transparent calc(var(--vo-pick-curve) - 0.5px), #000 var(--vo-pick-curve));
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.vo-pick__img {
	position: relative;
	display: block;
	margin: var(--vo-pick-ring);
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-md);
	border-top-right-radius: calc(var(--vo-pick-tag) / 2 + var(--vo-pick-gap) - var(--vo-pick-ring));
	background-color: var(--color-surface-3);
	box-shadow: 0 0 0 var(--vo-pick-ring) var(--color-card);
}
.vo-pick__img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-4) var(--ease-out);
}
.vo-pick:hover .vo-pick__img img {
	transform: scale(1.05);
}
.vo-pick__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	min-width: 0;
	padding: var(--space-12) var(--space-2) 0;
}
.vo-pick__name {
	color: var(--color-foreground);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-extrabold);
	line-height: 1.35;
	letter-spacing: 0;
	overflow-wrap: anywhere;
}
.vo-pick__link {
	transition: color var(--dur-1) var(--ease-out);
}
.vo-pick:hover .vo-pick__link {
	color: var(--color-primary);
}
.vo-pick__link:focus-visible {
	outline: none;
}
.vo-pick__link:focus-visible::after {
	border-radius: var(--radius-xl);
	outline: 2px solid var(--color-ring);
	outline-offset: 2px;
}
.vo-pick__text {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--color-muted-foreground);
	font-size: var(--font-size-xs);
	line-height: var(--line-height-normal);
	overflow-wrap: anywhere;
}
.vo-pick__seal {
	position: absolute;
	top: var(--vo-pick-ring);
	right: var(--vo-pick-ring);
	z-index: 2;
	display: flex;
	padding: calc(var(--vo-pick-gap) - var(--vo-pick-ring)) calc(var(--vo-pick-gap) - var(--vo-pick-ring)) var(--vo-pick-gap) var(--vo-pick-gap);
	border-bottom-left-radius: calc(var(--vo-pick-tag) / 2 + var(--vo-pick-gap));
	pointer-events: none;
}
.vo-pick__seal,
.vo-pick__seal::before,
.vo-pick__seal::after {
	background-color: var(--color-card);
}
.vo-pick__seal::before,
.vo-pick__seal::after {
	content: "";
	position: absolute;
	width: var(--vo-pick-curve);
	height: var(--vo-pick-curve);
	-webkit-mask-image: var(--vo-pick-fillet);
	mask-image: var(--vo-pick-fillet);
}
.vo-pick__seal::before {
	top: 0;
	right: 100%;
}
.vo-pick__seal::after {
	top: 100%;
	right: 0;
}
.vo-pick__tag {
	display: flex;
	align-items: center;
	gap: 5px;
	height: var(--vo-pick-tag);
	padding: 0 var(--space-12) 0 var(--space-10);
	border-radius: var(--radius-full);
	background-color: rgba(210, 168, 64, 0.16);
	color: var(--color-primary);
	font-size: 10.5px;
	font-weight: var(--font-weight-extrabold);
	line-height: 1;
	letter-spacing: 0.12em;
}
.vo-pick__tag-icon {
	flex: none;
}
@media (min-width: 1024px) {
	.vo-picks--scroll {
		--vo-picks-bleed: 0px;
	}
	.vo-picks--scroll.is-scrollable:not(.is-scroll-start) .vo-picks__list {
		--vo-picks-fade-start: 56px;
	}
	.vo-picks--scroll.is-scrollable:not(.is-scroll-end) .vo-picks__list {
		--vo-picks-fade-end: 56px;
	}
}
@container (min-width: 560px) {
	.vo-picks--rows .vo-picks__list,
	.vo-picks--grid .vo-picks__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@container (min-width: 900px) {
	.vo-picks--grid .vo-picks__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.vo-picks--rows .vo-pick {
		flex-direction: row;
		align-items: stretch;
	}
	.vo-picks--rows .vo-pick__media {
		display: flex;
		flex: none;
		width: 46%;
	}
	.vo-picks--rows .vo-pick__img {
		border-top-left-radius: calc(var(--vo-pick-tag) / 2 + var(--vo-pick-gap) - var(--vo-pick-ring));
		border-top-right-radius: var(--radius-md);
		width: 100%;
		min-height: calc(100% - var(--vo-pick-ring) * 2);
	}
	.vo-picks--rows .vo-pick__body {
		justify-content: center;
		padding: var(--space-4) var(--space-4) var(--space-4) var(--space-20);
	}
	.vo-picks--rows .vo-pick {
		--vo-pick-fillet: radial-gradient(circle at 100% 100%, transparent calc(var(--vo-pick-curve) - 0.5px), #000 var(--vo-pick-curve));
	}
	.vo-picks--rows .vo-pick__seal {
		right: auto;
		left: var(--vo-pick-ring);
		padding: calc(var(--vo-pick-gap) - var(--vo-pick-ring)) var(--vo-pick-gap) var(--vo-pick-gap) calc(var(--vo-pick-gap) - var(--vo-pick-ring));
		border-bottom-left-radius: 0;
		border-bottom-right-radius: calc(var(--vo-pick-tag) / 2 + var(--vo-pick-gap));
	}
	.vo-picks--rows .vo-pick__seal::before {
		right: auto;
		left: 100%;
	}
	.vo-picks--rows .vo-pick__seal::after {
		right: auto;
		left: 0;
	}
	.vo-picks--rows .vo-pick__text {
		-webkit-line-clamp: 4;
	}
}
@media (prefers-reduced-motion: reduce) {
	.vo-picks--scroll .vo-picks__list,
	.vo-pickup__arrow,
	.vo-pick__img img,
	.vo-pick__link,
	.vo-pickcard,
	.vo-pickcard__media img,
	.vo-pickcard__name a,
	.vo-pickcard__score {
		transition: none;
	}
	.vo-pick:hover .vo-pick__img img,
	.vo-pickcard:hover .vo-pickcard__media img {
		transform: none;
	}
}
