.pot-timeline {
	--pot-height: 820px;
	--pot-radius: 330px;
	--pot-offset: 145px;
	--pot-copy-gap: 150px;
	--pot-copy-width: 290px;
	--pot-number-distance: 50px;
	--pot-dot-size: 7px;
	--pot-active-dot-size: 9px;
	--pot-inactive-scale: .72;
	--pot-active-scale: 1.6;
	--pot-duration: 800ms;
	--pot-easing: cubic-bezier(.22, 1, .36, 1);
	--pot-progress: 0;
	--pot-progress-color: #303030;
	--pot-progress-width: 2px;
	--pot-effect-color: rgba(48, 48, 48, .35);
	position: relative;
	isolation: isolate;
	width: 100%;
	height: var(--pot-height);
	min-height: 320px;
	overflow: hidden;
	background: transparent;
	color: #303030;
	contain: layout paint;
}

.pot-timeline *,
.pot-timeline *::before,
.pot-timeline *::after {
	box-sizing: border-box;
}

.pot-timeline__orbit {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: calc((var(--pot-radius) + var(--pot-offset)) * -1);
	width: calc(var(--pot-radius) * 2);
	height: calc(var(--pot-radius) * 2);
	border: 1px solid #d3d3d3;
	border-radius: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

.pot-timeline__progress {
	position: absolute;
	inset: 0;
	display: none;
	width: 100%;
	height: 100%;
	overflow: visible;
	transform: rotate(-90deg);
}

.pot-progress--yes .pot-timeline__progress {
	display: block;
}

.pot-timeline__progress circle {
	fill: none;
	stroke: var(--pot-progress-color);
	stroke-width: var(--pot-progress-width);
	stroke-linecap: round;
	stroke-dasharray: 100;
	stroke-dashoffset: calc(100 - var(--pot-progress));
	vector-effect: non-scaling-stroke;
	transition: stroke-dashoffset var(--pot-duration) var(--pot-easing);
}

.pot-timeline__nodes {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.pot-timeline__node {
	position: absolute;
	top: 50%;
	left: calc(var(--pot-offset) * -1);
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	transform: rotate(var(--pot-angle, 0deg)) translateX(var(--pot-radius));
	transform-origin: center;
	transition: transform var(--pot-duration) var(--pot-easing);
	will-change: transform;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.pot-timeline__dot {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: var(--pot-dot-size);
	height: var(--pot-dot-size);
	border-radius: 50%;
	background: #d8d8d8;
	transform: translate(-50%, -50%);
	transition: width var(--pot-duration) var(--pot-easing), height var(--pot-duration) var(--pot-easing), background-color 250ms ease, box-shadow 250ms ease;
}

.pot-timeline__dot::before,
.pot-timeline__dot::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: var(--pot-effect-color);
	content: '';
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.pot-effect--none .pot-timeline__dot::before,
.pot-effect--none .pot-timeline__dot::after,
.pot-timeline__node:not(.is-active) .pot-timeline__dot::before,
.pot-timeline__node:not(.is-active) .pot-timeline__dot::after {
	display: none;
}

.pot-timeline__node.is-active .pot-timeline__dot {
	width: var(--pot-active-dot-size);
	height: var(--pot-active-dot-size);
	background: #303030;
}

.pot-timeline__number {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-flex;
	align-items: baseline;
	justify-content: center;
	width: max-content;
	max-width: min(40vw, 360px);
	color: #d5d5d5;
	font-size: 54px;
	font-weight: 700;
	line-height: .9;
	letter-spacing: -0.055em;
	white-space: nowrap;
	transform: translate(var(--pot-number-distance), -50%) rotate(var(--pot-counter-angle, 0deg)) scale(var(--pot-inactive-scale));
	transform-origin: left center;
	transition: transform var(--pot-duration) var(--pot-easing), color 350ms ease, opacity 350ms ease, background-color 350ms ease, filter 350ms ease;
	will-change: transform;
}

.pot-numbers--hide .pot-timeline__number {
	display: none;
}

.pot-timeline__node.is-active {
	z-index: 3;
}

.pot-timeline__node.is-active .pot-timeline__number {
	color: #303030;
	transform: translate(var(--pot-number-distance), -50%) rotate(var(--pot-counter-angle, 0deg)) scale(var(--pot-active-scale));
}

.pot-timeline__node:focus-visible .pot-timeline__number {
	outline: 2px solid #1e73be;
	outline-offset: 7px;
}

.pot-timeline__prefix,
.pot-timeline__core,
.pot-timeline__suffix {
	display: inline-block;
	font-family: inherit;
	font-style: inherit;
	text-decoration: inherit;
	text-transform: inherit;
}

.pot-timeline__prefix,
.pot-timeline__suffix {
	font-size: .34em;
	font-weight: 500;
	letter-spacing: 0;
}

.pot-timeline__details {
	position: absolute;
	z-index: 4;
	top: 50%;
	left: calc(var(--pot-radius) - var(--pot-offset) + var(--pot-copy-gap));
	width: min(var(--pot-copy-width), calc(100% - var(--pot-radius) + var(--pot-offset) - var(--pot-copy-gap) - 24px));
	max-width: calc(100% - 24px);
	text-align: right;
	direction: rtl;
	transform: translateY(-50%);
}

.pot-timeline__panel[hidden] {
	display: none;
}

.pot-timeline__panel.is-active {
	animation: pot-copy-in var(--pot-duration) var(--pot-easing) both;
}

.pot-timeline__title {
	margin: 0 0 5px;
	color: #333;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
}

.pot-timeline__description {
	margin: 0;
	color: #696969;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.75;
}

.pot-blur--yes .pot-timeline.is-animating .pot-timeline__node:not(.is-active) .pot-timeline__number {
	filter: blur(.35px);
}

.pot-wheel--right .pot-timeline__orbit {
	left: auto;
	right: calc((var(--pot-radius) + var(--pot-offset)) * -1);
}

.pot-wheel--right .pot-timeline__node {
	left: auto;
	right: calc(var(--pot-offset) * -1);
}

.pot-wheel--right .pot-timeline__details {
	right: calc(var(--pot-radius) - var(--pot-offset) + var(--pot-copy-gap));
	left: auto;
}

.pot-wheel--right .pot-timeline__number {
	transform-origin: right center;
}

.pot-effect--pulse .is-active .pot-timeline__dot::before {
	animation: pot-pulse 1.4s ease-out infinite;
}

.pot-effect--pulse .is-active .pot-timeline__dot::after,
.pot-effect--bounce .is-active .pot-timeline__dot::before,
.pot-effect--bounce .is-active .pot-timeline__dot::after,
.pot-effect--glow .is-active .pot-timeline__dot::before,
.pot-effect--glow .is-active .pot-timeline__dot::after,
.pot-effect--breathing .is-active .pot-timeline__dot::before,
.pot-effect--breathing .is-active .pot-timeline__dot::after,
.pot-effect--scale .is-active .pot-timeline__dot::before,
.pot-effect--scale .is-active .pot-timeline__dot::after {
	display: none;
}

.pot-effect--ripple .is-active .pot-timeline__dot::before,
.pot-effect--ripple .is-active .pot-timeline__dot::after {
	animation: pot-ripple 1.8s ease-out infinite;
}

.pot-effect--ripple .is-active .pot-timeline__dot::after {
	animation-delay: .6s;
}

.pot-effect--ping .is-active .pot-timeline__dot::before {
	animation: pot-ping 1.2s cubic-bezier(0, 0, .2, 1) infinite;
}

.pot-effect--ping .is-active .pot-timeline__dot::after {
	display: none;
}

.pot-effect--bounce .is-active .pot-timeline__dot {
	animation: pot-bounce 1.2s ease-in-out infinite;
}

.pot-effect--glow .is-active .pot-timeline__dot {
	animation: pot-glow 1.5s ease-in-out infinite alternate;
}

.pot-effect--rotate .is-active .pot-timeline__dot::before {
	width: 220%;
	height: 220%;
	border: 1px dashed var(--pot-effect-color);
	background: transparent;
	animation: pot-rotate 1.8s linear infinite;
}

.pot-effect--rotate .is-active .pot-timeline__dot::after {
	display: none;
}

.pot-effect--breathing .is-active .pot-timeline__dot {
	animation: pot-breathing 2.4s ease-in-out infinite;
}

.pot-effect--wave .is-active .pot-timeline__dot::before,
.pot-effect--wave .is-active .pot-timeline__dot::after {
	animation: pot-wave 2s ease-out infinite;
}

.pot-effect--wave .is-active .pot-timeline__dot::after {
	animation-delay: 1s;
}

.pot-effect--scale .is-active .pot-timeline__dot {
	animation: pot-scale 1.5s ease-in-out infinite;
}

@keyframes pot-copy-in {
	from {
		opacity: 0;
		transform: translate3d(0, 14px, 0);
		filter: blur(2px);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
		filter: blur(0);
	}
}

@keyframes pot-pulse {
	0% { opacity: .65; transform: translate(-50%, -50%) scale(1); }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(3); }
}

@keyframes pot-ripple {
	0% { opacity: .55; transform: translate(-50%, -50%) scale(.75); }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(4); }
}

@keyframes pot-ping {
	75%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(3.5); }
}

@keyframes pot-bounce {
	0%, 100% { transform: translate(-50%, -50%) translateY(0); }
	50% { transform: translate(-50%, -50%) translateY(-7px); }
}

@keyframes pot-glow {
	from { box-shadow: 0 0 0 0 var(--pot-effect-color); }
	to { box-shadow: 0 0 7px 5px var(--pot-effect-color); }
}

@keyframes pot-rotate {
	to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes pot-breathing {
	0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(.88); }
	50% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
}

@keyframes pot-wave {
	0% { opacity: .5; transform: translate(-50%, -50%) scale(1); }
	65%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(4.5); }
}

@keyframes pot-scale {
	0%, 100% { transform: translate(-50%, -50%) scale(.75); }
	50% { transform: translate(-50%, -50%) scale(1.35); }
}

@media (max-width: 767px) {
	.pot-timeline__number {
		font-size: 42px;
	}

	.pot-timeline__title {
		font-size: 16px;
	}

	.pot-timeline__description {
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pot-timeline,
	.pot-timeline *,
	.pot-timeline *::before,
	.pot-timeline *::after {
		scroll-behavior: auto !important;
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
	}
}