.vo-figrail {
	--vo-figrail-gutter: var(--space-20);
	--vo-figrail-gap: 10px;
	--vo-figrail-size: min(60vw, 240px);
	min-width: 0;
	margin: var(--space-24) 0 var(--space-32);
}

.vo-figrail__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-12);
	min-height: 28px;
	margin-bottom: var(--space-12);
}

.vo-figrail__title {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-10);
	margin: 0;
	color: var(--color-muted-foreground);
	font-size: var(--font-size-3xs);
	font-weight: 800;
	line-height: 1.5;
	letter-spacing: 0.14em;
}

.vo-figrail__total {
	color: var(--color-foreground);
	font-weight: 700;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}

.vo-figrail__nav {
	display: none;
	gap: var(--space-4);
}

.vo-figrail__move {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(202, 197, 229, 0.08);
	color: var(--color-muted-foreground);
	cursor: pointer;
	line-height: 0;
	transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}

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

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

.vo-figrail__move:focus-visible {
	outline: 2px solid var(--color-sub);
	outline-offset: 2px;
}

.vo-figrail__body {
	position: relative;
}

.vo-figrail__viewport {
	--vo-figrail-fade-start: #000;
	--vo-figrail-fade-end: #000;
	--vo-figrail-fade-len: var(--vo-figrail-gutter);
	position: relative;
	margin-inline: calc(var(--vo-figrail-gutter) * -1);
	-webkit-mask-image: linear-gradient(to right, var(--vo-figrail-fade-start) 0, #000 var(--vo-figrail-gutter), #000 calc(100% - var(--vo-figrail-fade-len)), var(--vo-figrail-fade-end) 100%);
	mask-image: linear-gradient(to right, var(--vo-figrail-fade-start) 0, #000 var(--vo-figrail-gutter), #000 calc(100% - var(--vo-figrail-fade-len)), var(--vo-figrail-fade-end) 100%);
}

.vo-figrail__viewport.is-clip-start {
	--vo-figrail-fade-start: transparent;
}

.vo-figrail__viewport.is-clip-end {
	--vo-figrail-fade-end: transparent;
}

.vo-figrail__list {
	display: flex;
	margin: 0;
	padding: 0 var(--vo-figrail-gutter);
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--vo-figrail-gutter);
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

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

.vo-figrail__item {
	flex: 0 0 auto;
	width: calc(var(--vo-figrail-size) + var(--vo-figrail-gap));
	margin: 0;
	padding: 0 var(--vo-figrail-gap) 0 0;
	scroll-snap-align: start;
}

.vo-figrail__item:last-child {
	width: var(--vo-figrail-size);
	padding-right: 0;
}

.vo-figrail__thumb {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 10px;
	background-color: var(--color-section);
	color: inherit;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.vo-figrail__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-image: linear-gradient(to top, rgba(10, 9, 16, 0.78) 0%, rgba(10, 9, 16, 0) 46%);
	box-shadow: inset 0 0 0 0 var(--color-sub);
	pointer-events: none;
	transition: box-shadow var(--dur-2) var(--ease-out);
}

.vo-figrail__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	transform: scale(1.02);
	filter: brightness(0.8) saturate(0.9);
	transition: transform var(--dur-3) var(--ease-out), filter var(--dur-3) var(--ease-out);
	-webkit-user-drag: none;
	user-select: none;
}

.vo-figrail__no {
	position: absolute;
	left: 10px;
	bottom: 8px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--color-foreground);
	font-size: var(--font-size-3xs);
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
	transition: color var(--dur-2) var(--ease-out);
}

.vo-figrail__no::before {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: var(--color-muted-foreground);
	transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

.vo-figrail__item.is-seen .vo-figrail__no::before {
	background-color: var(--color-sub);
}

.vo-figrail__thumb:focus-visible {
	outline: 2px solid var(--color-sub);
	outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
	.vo-figrail__thumb:hover .vo-figrail__img {
		transform: scale(1.1);
		filter: none;
	}

	.vo-figrail__thumb:hover::after {
		box-shadow: inset 0 0 0 2px var(--color-sub);
	}

	.vo-figrail__thumb:hover .vo-figrail__no {
		color: var(--color-primary);
	}

	.vo-figrail__thumb:hover .vo-figrail__no::before {
		background-color: var(--color-primary);
		transform: scale(1.5);
	}
}

.vo-figrail__more {
	position: absolute;
	top: 50%;
	right: 0;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	height: 32px;
	margin-top: -16px;
	padding: 0 10px 0 12px;
	border: 0;
	border-radius: var(--radius-full);
	background-color: rgba(20, 19, 30, 0.62);
	box-shadow: inset 0 0 0 1px rgba(219, 216, 233, 0.18);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	backdrop-filter: blur(12px) saturate(140%);
	color: #E6E8FA;
	font-family: inherit;
	font-size: var(--font-size-2xs);
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
	-webkit-tap-highlight-color: transparent;
}

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

.vo-figrail__more.is-gone {
	opacity: 0;
	transform: translateX(10px);
	pointer-events: none;
}

.vo-figrail__more-icon {
	flex: none;
	color: var(--color-primary);
}

.vo-figrail__body.is-hint .vo-figrail__item {
	animation: vo-figrail-hint 1.2s var(--ease-out);
}

.vo-figrail__body.is-hint .vo-figrail__more-icon {
	animation: vo-figrail-tug 0.6s var(--ease-out) 2;
}

.vo-figrail__list.vo-drag--grab {
	cursor: grab;
}

.vo-figrail__list.vo-drag--active {
	cursor: grabbing;
}

.vo-figrail__list.vo-drag--active .vo-figrail__thumb {
	pointer-events: none;
}

@media (max-width: 767px) {
	.vo-figrail__viewport.is-clip-end {
		--vo-figrail-fade-len: 72px;
	}
}

@media (min-width: 768px) {
	.vo-figrail__more {
		display: none;
	}

	.vo-figrail {
		--vo-figrail-gutter: var(--space-32);
		--vo-figrail-size: 156px;
		margin: calc(var(--space-8) * -1) 0 0;
		padding: 0 var(--space-32) var(--space-32);
	}

	.vo-figrail__nav {
		display: inline-flex;
	}

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

@media (min-width: 1024px) {
	.vo-figrail {
		--vo-figrail-size: 168px;
	}
}

.vo-figview-lock {
	overflow: hidden;
}

.vo-figview {
	--vo-figview-ratio: 1.26;
	--vo-figview-side: var(--space-12);
	--vo-figview-chrome: 140px;
	--vo-figview-arrow: 36px;
	--vo-figview-arrow-gap: 20px;
	--vo-figview-w: min(1080px, calc(100vw - var(--vo-figview-side) * 2), calc((100vh - var(--vo-figview-chrome)) * var(--vo-figview-ratio)));
	--vo-figview-arrow-x: clamp(calc((var(--vo-figview-arrow) + var(--vo-figview-arrow-gap)) * -1), calc(var(--vo-figview-arrow-gap) - (100vw - var(--vo-figview-w)) / 2), 8px);
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	padding: var(--space-12) var(--vo-figview-side);
	font-family: var(--font-family-base);
	animation: vo-figview-fade var(--dur-2) var(--ease-out);
}

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

.vo-figview__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(10, 9, 16, 0.72);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

.vo-figview__frame {
	position: relative;
	display: grid;
	justify-items: center;
	gap: var(--space-12);
	animation: vo-figview-rise var(--dur-3) var(--ease-out);
}

.vo-figview__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-16);
	width: 100%;
}

.vo-figview__count {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-8);
	height: 40px;
	margin: 0;
	padding: 11px var(--space-16) 0;
	border-radius: var(--radius-full);
	background-color: rgba(28, 27, 41, 0.86);
	color: var(--color-muted-foreground);
	font-size: var(--font-size-xs);
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.vo-figview__count-label {
	font-size: var(--font-size-3xs);
	font-weight: 800;
	letter-spacing: 0.14em;
}

.vo-figview__count-now {
	color: var(--color-foreground);
	font-size: var(--font-size-xl);
	font-weight: 800;
	letter-spacing: 0.02em;
}

.vo-figview__acts {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	min-width: 0;
}

.vo-figview__jump {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	height: 40px;
	min-width: 0;
	padding: 0 var(--space-16) 0 14px;
	border-radius: var(--radius-full);
	background-color: rgba(28, 27, 41, 0.86);
	color: var(--color-foreground);
	font-size: var(--font-size-xs);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}

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

.vo-figview__jump-icon {
	flex: none;
	color: var(--color-sub);
	transition: color var(--dur-2) var(--ease-out);
}

.vo-figview__jump-text {
	overflow: hidden;
	text-overflow: ellipsis;
}

.vo-figview__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(28, 27, 41, 0.86);
	color: var(--color-foreground);
	cursor: pointer;
	line-height: 0;
	transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}

.vo-figview__stage {
	position: relative;
	width: var(--vo-figview-w);
	aspect-ratio: var(--vo-figview-ratio);
	touch-action: pan-y;
}

.vo-figview__canvas {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 14px;
	background-color: var(--color-section);
	transition: transform var(--dur-3) var(--ease-out);
}

.vo-figview__canvas.is-dragging {
	transition: none;
}

.vo-figview__canvas.is-moving {
	animation: vo-figview-slide var(--dur-3) var(--ease-out);
}

.vo-figview__low,
.vo-figview__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
}

.vo-figview__low {
	top: var(--vo-figview-low-top, 0%);
	bottom: auto;
	height: var(--vo-figview-low-span, 100%);
	object-fit: cover;
	filter: blur(10px) brightness(0.85);
}

.vo-figview__img {
	opacity: 0;
	transition: opacity var(--dur-3) var(--ease-out);
}

.vo-figview__stage.is-ready .vo-figview__img {
	opacity: 1;
}

.vo-figview__load {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	overflow: hidden;
	opacity: 1;
	transition: opacity var(--dur-2) var(--ease-out);
}

.vo-figview__load::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 34%;
	background-image: linear-gradient(to right, transparent, var(--color-sub), transparent);
	animation: vo-figview-load 1.1s linear infinite;
}

.vo-figview__stage.is-ready .vo-figview__load {
	opacity: 0;
}

.vo-figview__stage.is-ready .vo-figview__load::before {
	animation: none;
}

.vo-figview__arrow {
	position: absolute;
	top: 50%;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--vo-figview-arrow);
	height: var(--vo-figview-arrow);
	margin-top: calc(var(--vo-figview-arrow) / -2);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(20, 19, 30, 0.55);
	box-shadow: inset 0 0 0 1px rgba(219, 216, 233, 0.18);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	backdrop-filter: blur(12px) saturate(140%);
	color: #E6E8FA;
	cursor: pointer;
	line-height: 0;
	transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

.vo-figview__arrow--prev {
	left: var(--vo-figview-arrow-x);
}

.vo-figview__arrow--next {
	right: var(--vo-figview-arrow-x);
}

.vo-figview__arrow--prev:active {
	transform: translateX(-2px);
}

.vo-figview__arrow--next:active {
	transform: translateX(2px);
}

.vo-figview__steps {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 100%;
	padding: var(--space-4) var(--space-10);
	border-radius: var(--radius-full);
	background-color: rgba(28, 27, 41, 0.86);
}

.vo-figview__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	padding: 0 3px;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.vo-figview__dot-bar {
	display: block;
	width: 16px;
	height: 4px;
	border-radius: 2px;
	background-color: rgba(219, 216, 233, 0.22);
	transition: width var(--dur-3) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}

.vo-figview__dot.is-on .vo-figview__dot-bar {
	width: 32px;
	background-color: var(--color-primary);
}

@media (hover: hover) and (pointer: fine) {
	.vo-figview__close:hover {
		background-color: var(--color-surface-3);
		color: var(--color-primary);
	}

	.vo-figview__jump:hover {
		background-color: var(--color-primary);
		color: var(--color-primary-foreground);
	}

	.vo-figview__jump:hover .vo-figview__jump-icon {
		color: inherit;
	}

	.vo-figview__arrow:hover {
		background-color: var(--color-primary);
		box-shadow: none;
		color: var(--color-primary-foreground);
	}

	.vo-figview__dot:hover .vo-figview__dot-bar {
		background-color: rgba(219, 216, 233, 0.5);
	}
}

.vo-figview__jump:focus-visible,
.vo-figview__close:focus-visible,
.vo-figview__arrow:focus-visible,
.vo-figview__dot:focus-visible {
	outline: 2px solid var(--color-sub);
	outline-offset: 2px;
}

@media (min-width: 768px) {
	.vo-figview {
		--vo-figview-side: var(--space-48);
		--vo-figview-chrome: 176px;
		--vo-figview-arrow: 48px;
		--vo-figview-arrow-gap: 16px;
		padding-block: var(--space-24);
	}

	.vo-figview__frame {
		gap: var(--space-16);
	}
}

@supports (height: 100dvh) {
	.vo-figview {
		--vo-figview-w: min(1080px, calc(100vw - var(--vo-figview-side) * 2), calc((100dvh - var(--vo-figview-chrome)) * var(--vo-figview-ratio)));
	}
}

@media (max-width: 399px) {
	.vo-figview__count-label {
		display: none;
	}
}

@keyframes vo-figrail-hint {
	0% {
		transform: none;
	}

	38% {
		transform: translateX(-44px);
	}

	72% {
		transform: translateX(4px);
	}

	100% {
		transform: none;
	}
}

@keyframes vo-figrail-tug {
	0%,
	100% {
		transform: none;
	}

	50% {
		transform: translateX(3px);
	}
}

@keyframes vo-figview-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes vo-figview-rise {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.97);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes vo-figview-slide {
	from {
		opacity: 0.2;
		transform: translateX(calc(var(--vo-figview-dir, 1) * 28px));
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes vo-figview-load {
	from {
		transform: translateX(-100%);
	}

	to {
		transform: translateX(300%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vo-figrail__move,
	.vo-figrail__more,
	.vo-figview__jump,
	.vo-figview__jump-icon,
	.vo-figrail__thumb::after,
	.vo-figrail__img,
	.vo-figrail__no,
	.vo-figrail__no::before,
	.vo-figview__close,
	.vo-figview__canvas,
	.vo-figview__img,
	.vo-figview__arrow,
	.vo-figview__dot-bar {
		transition: none;
	}

	.vo-figview,
	.vo-figview__frame,
	.vo-figview__canvas.is-moving,
	.vo-figrail__body.is-hint .vo-figrail__item,
	.vo-figrail__body.is-hint .vo-figrail__more-icon {
		animation: none;
	}
}