.wf-framed-animation {
	display: flex;
	width: 100%;
	justify-content: center;
}

.wf-framed-animation__stage {
	position: relative;
	width: 100%;
	max-width: 1024px;
	container-type: inline-size;
}

/* Coded dashboard canvas. Every position/size is expressed as
   calc( <figma-px> * var(--u) ), so the whole scene scales with width. */
.wf-fa {
	--u: 0.0833333cqw; /* 100 / 1200 base width, in container query units */
	--blue: #3b7ef7;
	--blue-ink: #4778f5;
	--skel: #cee6ff;
	position: relative;
	width: 100%;
	aspect-ratio: 1200 / 737;
	background: #f0f8ff;
	border-radius: calc(22 * var(--u));
	overflow: hidden;
	font-family: 'Figtree', 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: #243240;
}

.wf-fa * {
	box-sizing: border-box;
}

.wf-fa-abs {
	position: absolute;
}

/* Outer rounded frame */
.wf-fa-frame {
	border: calc(1.8 * var(--u)) solid var(--blue);
	background: transparent;
}

/* Cards */
.wf-fa-card {
	background: #fff;
	border: 1px solid rgba(59, 126, 247, 0.4);
}

/* Top navigation bar */
.wf-fa-navbar {
	background: var(--blue);
}

.wf-fa-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: var(--blue);
	font-weight: 700;
	border-radius: 50%;
}

.wf-fa-navpill {
	background: #fff;
	border-radius: 999px;
}

/* Dashed circle/box targets */
.wf-fa-dashed {
	border: calc(1.5 * var(--u)) dashed rgba(255, 255, 255, 0.77);
	display: flex;
	align-items: center;
	justify-content: center;
}

.wf-fa-dashed--ink {
	border-color: rgba(112, 146, 174, 0.7);
}

/* Skeleton blocks (light blue rounded rects) */
.wf-fa-skel {
	background: var(--skel);
	opacity: 0.9;
	border-radius: calc(5.5 * var(--u));
}

.wf-fa-skel--soft {
	background: rgba(206, 230, 255, 0.8);
}

.wf-fa-skel--dashed {
	background: transparent;
	border: 1px dashed rgba(59, 114, 151, 0.6);
}

/* Tabs row */
.wf-fa-tabs {
	border-radius: 999px;
	display: flex;
	align-items: center;
	gap: calc(22 * var(--u));
	padding-left: calc(24 * var(--u));
}

.wf-fa-tabs .wf-fa-skel {
	border-radius: 999px;
}

/* Avatar placeholder (no image) */
.wf-fa-avatar {
	border-radius: calc(9 * var(--u));
	background: linear-gradient(150deg, #5b7cff 0%, #8a5bd6 55%, #2a3550 120%);
}

/* Text */
.wf-fa-text {
	position: absolute;
	white-space: nowrap;
	line-height: 1;
}

.wf-fa-name {
	font-weight: 700;
	font-size: calc(16.5 * var(--u));
}

.wf-fa-role {
	font-weight: 500;
	font-size: calc(12.8 * var(--u));
	color: rgba(0, 0, 0, 0.5);
}

.wf-fa-company {
	font-weight: 400;
	font-size: calc(12.8 * var(--u));
	color: rgba(0, 0, 0, 0.7);
}

.wf-fa-section {
	font-weight: 600;
	font-size: calc(17 * var(--u));
	color: #111;
}

/* Action buttons */
.wf-fa-btn {
	background: #fff;
	border: 1px solid #e7ebef;
	border-radius: calc(8 * var(--u));
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--blue-ink);
}

.wf-fa-btn--add {
	background: rgba(211, 232, 255, 0.6);
	border: calc(1.5 * var(--u)) dashed rgba(120, 150, 180, 0.6);
}

.wf-fa-btn svg {
	width: 36%;
	height: 36%;
}

/* Plus glyph inside targets */
.wf-fa-plus {
	color: var(--blue);
	display: flex;
	align-items: center;
	justify-content: center;
}

.wf-fa-plus svg {
	width: 62%;
	height: 62%;
}

/* Cursor pointers */
.wf-fa-cursor {
	position: absolute;
	width: calc(20 * var(--u));
	height: calc(20 * var(--u));
	color: var(--blue);
	pointer-events: none;
}

.wf-fa-cursor svg {
	width: 100%;
	height: 100%;
	display: block;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

/* Pulse rings on the targeted element (active step only) */
.wf-fa-spot {
	position: absolute;
	border: calc(2 * var(--u)) solid var(--blue);
	border-radius: 999px;
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 300ms ease;
	pointer-events: none;
}

.wf-fa-spot.is-active {
	opacity: 1;
	animation: wf-fa-pulse 1.6s ease-out infinite;
}

@keyframes wf-fa-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(59, 126, 247, 0.45);
		transform: scale(0.9);
	}
	70% {
		box-shadow: 0 0 0 calc(10 * var(--u)) rgba(59, 126, 247, 0);
		transform: scale(1.05);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(59, 126, 247, 0);
		transform: scale(0.9);
	}
}

/* Callouts (pill label + arrow) */
.wf-fa-callout {
	position: absolute;
	opacity: 0;
	transform: translateY(calc(6 * var(--u)));
	transition: opacity var(--wf-fa-fade, 600ms) ease, transform var(--wf-fa-fade, 600ms) ease;
	pointer-events: none;
}

.wf-fa-callout.is-active {
	opacity: 1;
	transform: translateY(0);
}

.wf-fa-pill {
	position: absolute;
	display: inline-flex;
	align-items: center;
	background: var(--blue);
	color: #fff;
	font-weight: 500;
	font-size: calc(15 * var(--u));
	line-height: 1;
	padding: calc(13 * var(--u)) calc(20 * var(--u));
	border-radius: 999px;
	white-space: nowrap;
	 
	border : calc(13 * var(--u)) solid #F0F8FF;
}

.wf-fa-arrow {
	position: absolute;
	color: var(--blue);
}

.wf-fa-arrow svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
	.wf-fa-callout,
	.wf-fa-spot {
		transition: none;
	}

	.wf-fa-spot.is-active {
		animation: none;
	}
}