.cst-marquee {
	--cst-speed: 30s;
	--cst-gap: 48px;
	--cst-font-size: 18px;
	--cst-text-color: #ffffff;
	--cst-background: #111827;
	--cst-padding: 12px;

	width: 100%;
	overflow: hidden;
	background: var(--cst-background);
	color: var(--cst-text-color);
	font-size: var(--cst-font-size);
	line-height: 1.4;
}

.cst-viewport {
	overflow: hidden;
	width: 100%;
	padding-block: var(--cst-padding);
}

.cst-track {
	display: flex;
	width: max-content;
	will-change: transform;
	animation: cst-scroll var(--cst-speed) linear infinite;
}

.cst-direction-right .cst-track {
	animation-name: cst-scroll-reverse;
}

.cst-segment {
	flex: 0 0 auto;
	white-space: nowrap;
	padding-right: var(--cst-gap);
}

.cst-colorful .cst-segment {
	background: linear-gradient(
		90deg,
		#ff3b3b,
		#ff9f1a,
		#ffe600,
		#2ecc71,
		#00bcd4,
		#3b82f6,
		#a855f7,
		#ff3b3b
	);
	background-size: 400% 100%;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	animation: cst-color-shift var(--cst-color-speed, 5s) linear infinite;
}

@keyframes cst-color-shift {
	from {
		background-position: 0% 50%;
	}

	to {
		background-position: 400% 50%;
	}
}

.cst-pause-on-hover:hover .cst-track,
.cst-pause-on-hover:focus-within .cst-track {
	animation-play-state: paused;
}

@keyframes cst-scroll {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(calc(-1 * var(--cst-loop-width, 50%)), 0, 0);
	}
}

@keyframes cst-scroll-reverse {
	from {
		transform: translate3d(calc(-1 * var(--cst-loop-width, 50%)), 0, 0);
	}

	to {
		transform: translate3d(0, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cst-track {
		animation: none;
		transform: none;
		flex-wrap: wrap;
		width: 100%;
		white-space: normal;
	}

	.cst-segment[aria-hidden="true"] {
		display: none;
	}

	.cst-colorful .cst-segment {
		animation: none;
		background: none;
		color: var(--cst-text-color);
		-webkit-text-fill-color: currentColor;
	}
}

.cst-global-bar {
	width: 100%;
}

.cst-global-bar .cst-marquee {
	margin: 0;
}

.cst-global-sticky {
	position: sticky;
	top: 0;
	z-index: 9999;
}