@property --vo-shelf-edge-l {
	syntax: '<length>';
	inherits: false;
	initial-value: 0px;
}

@property --vo-shelf-edge-r {
	syntax: '<length>';
	inherits: false;
	initial-value: 0px;
}

.vo-shelf {
	--vo-shelf-gap: var(--space-12);
	--vo-shelf-tile: 196px;
	--vo-shelf-tile-h: 216px;
	--vo-shelf-pad: 14px;
	--vo-shelf-shade: 48px;
	position: relative;
}

.vo-shelf__seek {
	position: relative;
	z-index: 3;
	margin-top: var(--space-24);
}

.vo-shelf__search {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-12);
	height: 54px;
	padding: 0 var(--space-6) 0 var(--space-20);
	border-radius: var(--radius-full);
	background-color: var(--color-surface-2);
	color: var(--color-muted-foreground);
	transition: background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

.vo-shelf__search:focus-within {
	background-color: var(--color-surface-3);
	box-shadow: 0 0 0 4px var(--color-sub-tint-16);
}

.vo-shelf__search-icon {
	flex: none;
}

.vo-shelf__search .vo-shelf__input {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--color-foreground);
	font: inherit;
	font-size: var(--font-size-md);
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.vo-shelf__input::placeholder {
	color: var(--color-muted-foreground);
	opacity: 0.75;
}

.vo-shelf__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.vo-shelf__go {
	flex: none;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--color-primary);
	color: var(--color-primary-foreground);
	cursor: pointer;
	transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

.vo-shelf__go:active {
	transform: scale(0.94);
}

.vo-shelf__go:focus-visible,
.vo-shelf__hot-word:focus-visible,
.vo-shelf__nav-btn:focus-visible,
.vo-shelf__tile:focus-visible {
	outline: 2px solid var(--color-ring);
	outline-offset: 2px;
}

.vo-shelf__suggest {
	position: absolute;
	top: calc(100% + var(--space-8));
	left: 0;
	right: 0;
	display: grid;
	gap: 2px;
	padding: var(--space-8);
	border-radius: 18px;
	background-color: var(--color-popover);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
	animation: vo-shelf-pop var(--dur-2) var(--ease-out);
}

.vo-shelf__suggest[hidden] {
	display: none;
}

.vo-shelf__opt {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	min-width: 0;
	padding: var(--space-8) var(--space-10);
	border-radius: var(--radius-lg);
	color: var(--color-foreground);
	text-decoration: none;
}

.vo-shelf__opt.is-active {
	background-color: rgba(255, 255, 255, 0.06);
}

.vo-shelf__opt-thumb {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-md);
	background-color: var(--color-section);
	object-fit: cover;
}

.vo-shelf__opt-thumb--icon {
	display: grid;
	place-items: center;
	color: var(--color-sub);
}

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

.vo-shelf__opt-name {
	overflow: hidden;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.vo-shelf__opt-name mark {
	background: none;
	color: var(--color-primary);
}

.vo-shelf__opt-meta {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	min-width: 0;
	margin-top: 3px;
	color: var(--color-muted-foreground);
	font-size: var(--font-size-3xs);
	line-height: 1.4;
}

.vo-shelf__opt-star {
	flex: none;
	color: var(--color-star);
}

.vo-shelf__opt-creator {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.vo-shelf__opt-empty {
	padding: var(--space-10);
	color: var(--color-muted-foreground);
	font-size: var(--font-size-xs);
}

.vo-shelf__hot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-6) var(--space-16);
	margin: var(--space-12) 0 0;
	padding-left: var(--space-4);
	color: var(--color-muted-foreground);
	font-size: var(--font-size-2xs);
	line-height: 1.6;
}

.vo-shelf__hot-word {
	color: var(--color-foreground);
	font-weight: var(--font-weight-bold);
	text-decoration: none;
	transition: color var(--dur-2) var(--ease-out);
}

.vo-shelf__hot-word::before {
	content: '#';
	margin-right: 2px;
	color: var(--color-sub);
}

.vo-shelf__head {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	margin: var(--space-32) 0 var(--space-16);
}

.vo-shelf__title {
	margin: 0;
	color: var(--color-foreground);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-extrabold);
	line-height: var(--line-height-tight);
}

.vo-shelf__title--echo {
	letter-spacing: var(--letter-spacing-heading);
	font-feature-settings: 'palt' 1;
	text-wrap: wrap;
}

.vo-shelf__pos {
	flex: none;
	margin-left: auto;
	padding: 3px var(--space-10);
	border-radius: var(--radius-full);
	background-color: var(--color-surface);
	color: var(--color-muted-foreground);
	font-size: var(--font-size-2xs);
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
}

.vo-shelf__pos[hidden] {
	display: none;
}

.vo-shelf__pos-now {
	color: var(--color-foreground);
	font-weight: var(--font-weight-bold);
}

.vo-shelf__nav {
	display: none;
	gap: var(--space-4);
	margin-left: auto;
}

.vo-shelf__nav-btn {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(202, 197, 229, 0.08);
	color: var(--color-foreground);
	cursor: pointer;
	transition: background-color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}

.vo-shelf__nav-btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.vo-shelf__rail {
	--vo-shelf-edge-l: 0px;
	--vo-shelf-edge-r: var(--vo-shelf-shade);
	position: relative;
	margin: 0 calc(var(--container-padding) * -1);
	-webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.2) calc(var(--vo-shelf-edge-l) * 0.2), rgba(0, 0, 0, 0.55) calc(var(--vo-shelf-edge-l) * 0.45), rgba(0, 0, 0, 0.85) calc(var(--vo-shelf-edge-l) * 0.72), #000 var(--vo-shelf-edge-l), #000 calc(100% - var(--vo-shelf-edge-r)), rgba(0, 0, 0, 0.85) calc(100% - var(--vo-shelf-edge-r) * 0.72), rgba(0, 0, 0, 0.55) calc(100% - var(--vo-shelf-edge-r) * 0.45), rgba(0, 0, 0, 0.2) calc(100% - var(--vo-shelf-edge-r) * 0.2), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.2) calc(var(--vo-shelf-edge-l) * 0.2), rgba(0, 0, 0, 0.55) calc(var(--vo-shelf-edge-l) * 0.45), rgba(0, 0, 0, 0.85) calc(var(--vo-shelf-edge-l) * 0.72), #000 var(--vo-shelf-edge-l), #000 calc(100% - var(--vo-shelf-edge-r)), rgba(0, 0, 0, 0.85) calc(100% - var(--vo-shelf-edge-r) * 0.72), rgba(0, 0, 0, 0.55) calc(100% - var(--vo-shelf-edge-r) * 0.45), rgba(0, 0, 0, 0.2) calc(100% - var(--vo-shelf-edge-r) * 0.2), transparent 100%);
	transition: --vo-shelf-edge-l var(--dur-3) var(--ease-out), --vo-shelf-edge-r var(--dur-3) var(--ease-out);
}

.vo-shelf__rail.is-scrolled {
	--vo-shelf-edge-l: calc(var(--vo-shelf-shade) * 0.6);
}

.vo-shelf__rail.is-end {
	--vo-shelf-edge-r: 0px;
}

.vo-shelf__track {
	display: flex;
	gap: var(--vo-shelf-gap);
	padding: 0 var(--container-padding) var(--space-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--container-padding);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.vo-shelf__track::-webkit-scrollbar {
	display: none;
}

.vo-shelf__tile {
	--vo-shelf-tone: var(--color-sub);
	position: relative;
	flex: 0 0 var(--vo-shelf-tile);
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	min-height: var(--vo-shelf-tile-h);
	padding: var(--vo-shelf-pad);
	overflow: hidden;
	border-radius: 20px;
	background-color: var(--color-card);
	color: var(--color-foreground);
	text-decoration: none;
	scroll-snap-align: start;
	-webkit-user-drag: none;
	transition: background-color var(--dur-3) var(--ease-out);
}

.vo-shelf__art {
	position: relative;
	display: grid;
	flex: none;
	align-content: end;
	min-height: 100px;
	margin: calc(var(--vo-shelf-pad) * -1) calc(var(--vo-shelf-pad) * -1) 0;
	padding: var(--vo-shelf-pad);
}

.vo-shelf__mark {
	position: absolute;
	top: -26px;
	right: -24px;
	width: 124px;
	height: 124px;
	padding: 10px;
	color: var(--vo-shelf-tone);
	opacity: 0.32;
	-webkit-mask-image: linear-gradient(186deg, #000 30%, transparent 85%);
	mask-image: linear-gradient(186deg, #000 30%, transparent 85%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	pointer-events: none;
	transition: opacity var(--dur-3) var(--ease-out);
}

.vo-shelf__mark-art {
	display: block;
	width: 100%;
	height: 100%;
	transform: rotate(-14deg);
	transition: transform var(--dur-4) var(--ease-out);
}

.vo-shelf__row {
	position: relative;
	display: grid;
	gap: var(--space-6);
	min-width: 0;
}

.vo-shelf__key {
	display: flex;
	justify-content: space-between;
	gap: var(--space-8);
	min-width: 0;
	color: var(--color-muted-foreground);
	font-size: 10px;
	line-height: 1.4;
}

.vo-shelf__also {
	overflow: hidden;
	color: var(--vo-shelf-tone);
	font-weight: var(--font-weight-bold);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.vo-shelf__seg {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	overflow: hidden;
	border-radius: 6px;
}

.vo-shelf__seg-cell {
	flex: 1 1 0;
	min-width: 14px;
	height: 24px;
	background-color: rgba(255, 255, 255, 0.06);
}

.vo-shelf__seg-cell.is-on {
	display: grid;
	flex: 1 0 auto;
	place-items: center;
	padding: 0 var(--space-10);
	background-color: var(--vo-shelf-tone);
	color: var(--color-background);
	font-size: 10.5px;
	font-weight: var(--font-weight-bold);
	line-height: 1;
	white-space: nowrap;
}

.vo-shelf__name {
	position: relative;
	flex: 1;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-extrabold);
	line-height: var(--line-height-tight);
	word-break: auto-phrase;
	text-wrap: balance;
}

.vo-shelf__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-8);
}

.vo-shelf__count {
	color: var(--color-muted-foreground);
	font-size: var(--font-size-2xs);
	line-height: 1.2;
	white-space: nowrap;
}

.vo-shelf__num {
	margin-right: 2px;
	color: var(--color-foreground);
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-extrabold);
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.vo-shelf__faces {
	display: flex;
	flex: none;
	padding-left: 12px;
}

.vo-shelf__face {
	display: block;
	width: 34px;
	height: 34px;
	margin-left: -12px;
	border-radius: 50%;
	background-color: var(--color-section);
	object-fit: cover;
	box-shadow: 0 0 0 2px var(--color-card);
	-webkit-user-drag: none;
	transition: margin var(--dur-4) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}

.vo-shelf__tile--keep,
.vo-shelf__tile--beginner {
	--vo-shelf-tone: var(--color-positive);
}

.vo-shelf__tile--alert,
.vo-shelf__tile--top {
	--vo-shelf-tone: var(--color-primary);
}

.vo-shelf__tile--trend,
.vo-shelf__tile--range,
.vo-shelf__tile--volatile {
	--vo-shelf-tone: #6AB0D8;
}

.vo-shelf__tile--fast,
.vo-shelf__tile--long {
	--vo-shelf-tone: #B48CDB;
}

.vo-shelf__tile--whale,
.vo-shelf__tile--structure,
.vo-shelf__tile--breakout,
.vo-shelf__tile--momentum,
.vo-shelf__tile--profile {
	--vo-shelf-tone: #AEB6F0;
}

.vo-shelf__tile--turn {
	--vo-shelf-tone: var(--color-destructive);
}

.vo-shelf-band {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-padding) var(--vo-home-gap);
}

.vo-shelf--lost {
	max-width: 840px;
	margin: 0 auto;
}

.vo-find__empty[hidden] + .vo-shelf--finder {
	display: none;
}

.vo-shelf__track.vo-drag--active .vo-shelf__tile {
	pointer-events: none;
}

@supports (grid-template-rows: subgrid) {
	.vo-shelf__track {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: var(--vo-shelf-tile);
		grid-template-rows: auto 1fr auto;
		gap: var(--space-12) var(--vo-shelf-gap);
		min-height: calc(var(--vo-shelf-tile-h) + var(--space-4));
	}

	.vo-shelf__tile {
		display: grid;
		grid-row: span 3;
		grid-template-rows: subgrid;
	}

	.vo-shelf__name {
		grid-row: 2;
	}

	.vo-shelf__foot {
		grid-row: 3;
	}
}

@keyframes vo-shelf-pop {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
}

@media (hover: hover) {
	.vo-shelf__go:hover {
		background-color: var(--color-primary-hover);
	}

	.vo-shelf__hot-word:hover {
		color: var(--color-primary);
	}

	.vo-shelf__nav-btn:hover:not(:disabled) {
		background-color: rgba(202, 197, 229, 0.14);
	}

	.vo-shelf__opt:hover {
		background-color: rgba(255, 255, 255, 0.06);
	}

	.vo-shelf__tile:hover {
		background-color: var(--color-surface-2);
	}

	.vo-shelf__tile:hover .vo-shelf__mark {
		opacity: 0.46;
	}

	.vo-shelf__tile:hover .vo-shelf__mark-art {
		transform: rotate(-6deg) scale(1.06);
	}

	.vo-shelf__tile:hover .vo-shelf__face {
		margin-left: -4px;
		box-shadow: 0 0 0 2px var(--color-surface-2);
	}
}

@media (min-width: 768px) {
	.vo-shelf {
		--vo-shelf-tile: 236px;
		--vo-shelf-tile-h: 236px;
		--vo-shelf-pad: var(--space-16);
		--vo-shelf-shade: 112px;
	}

	.vo-shelf__art {
		min-height: 112px;
	}

	.vo-shelf__search {
		height: 60px;
		padding-left: var(--space-24);
	}

	.vo-shelf__go {
		width: 46px;
		height: 46px;
	}

	.vo-shelf__hot {
		padding-left: var(--space-20);
	}

	.vo-shelf__nav:not([hidden]) {
		display: flex;
	}

	.vo-shelf__pos {
		margin-left: 0;
	}

	.vo-shelf__rail {
		margin: 0;
	}

	.vo-shelf__track {
		padding: 0 0 var(--space-4);
		scroll-padding-left: 0;
	}

	.vo-shelf__name {
		font-size: var(--font-size-md);
	}
}

@media (min-width: 1024px) {
	.vo-shelf--home .vo-shelf__track {
		flex-wrap: wrap;
		grid-auto-flow: row;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		grid-template-rows: none;
		grid-auto-rows: auto;
		overflow: visible;
	}

	.vo-shelf--home .vo-shelf__tile {
		display: flex;
		grid-row: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vo-shelf__suggest {
		animation: none;
	}

	.vo-shelf__tile,
	.vo-shelf__face,
	.vo-shelf__mark,
	.vo-shelf__mark-art {
		transition: none;
	}
}