.ac-demo-bar {
	position: fixed;
	bottom: var(--space-5);
	inset-inline-start: 50%;
	transform: translateX(-50%);
	z-index: 99999;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: var(--color-neutral-950);
	color: var(--ac-white);
	padding: 9px var(--space-5);
	border-radius: var(--radius-full);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	box-shadow: 0 4px 24px oklch(0% 0 0 / 40%);
	white-space: nowrap;
	pointer-events: auto;

	&__dot {
		inline-size: 8px;
		block-size: 8px;
		border-radius: var(--radius-full);
		background: oklch(72% 0.17 145);
		flex-shrink: 0;
		box-shadow: 0 0 0 3px oklch(72% 0.17 145 / 30%);
	}

	&__label {
		color: var(--color-neutral-200);
	}

	&__email {
		color: var(--ac-white);
		font-weight: var(--weight-semibold);
		margin-inline-start: 4px;
	}

	&__sep {
		inline-size: 1px;
		block-size: 14px;
		background: var(--color-neutral-600);
		flex-shrink: 0;
	}

	&__exit {
		color: oklch(72% 0.18 25);
		font-weight: var(--weight-semibold);
		text-decoration: none;
		letter-spacing: var(--tracking-tight);
		transition: color var(--duration-base) var(--ease-out);

		&:hover {
			color: oklch(82% 0.15 25);
		}
	}
}