.storyfa-wrap {
	--sfa-accent: #e4405f;
	--sfa-accent-2: #833ab4;
	--sfa-accent-3: #fcaf45;
}

.storyfa-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding: 10px 4px 16px;
	scrollbar-width: none;
}

.storyfa-track::-webkit-scrollbar {
	display: none;
}

.storyfa-circle {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	cursor: pointer;
	flex-shrink: 0;
	width: calc(var(--sfa-ring-size, 76px) + 14px);
}

.storyfa-ring {
	width: var(--sfa-ring-size, 76px);
	height: var(--sfa-ring-size, 76px);
	border-radius: 50%;
	padding: 3px;
	background: conic-gradient(from 45deg, var(--sfa-accent-3), var(--sfa-accent), var(--sfa-accent-2), var(--sfa-accent-3));
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.storyfa-circle:active .storyfa-ring {
	transform: scale(0.94);
}

.storyfa-circle.is-seen .storyfa-ring {
	background: #d8dde3;
}

.storyfa-ring-inner {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: #f0f1f3;
	background-size: cover;
	background-position: center;
	border: 2.5px solid #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.storyfa-ring-fallback {
	font-size: calc(var(--sfa-ring-size, 76px) * 0.32);
	opacity: 0.55;
}

.storyfa-circle-label {
	font-size: 12px;
	color: #3c3f44;
	max-width: calc(var(--sfa-ring-size, 76px) + 20px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.storyfa-viewer .sfa-progress-fill,
.storyfa-viewer .sfa-sheet-send {
	background: var(--sfa-accent);
}