.sources-div {
	display: grid;
	place-items: center;
}

.example-wrapper {
	position: relative;
	--outline-color: #de6cd2;
	--outline-width: 2px;
	background-color: #ebf6fe;
	padding: 1rem;
	border-radius: 8px;
	min-height: 180px;
	margin-block: 2rem;
	overflow: hidden
}

.example-wrapper.center {
	display: flex;
	justify-content: center;
	align-items: center
}

.example-wrapper * {
	line-height: initial
}

.example-wrapper pre {
	font-size: 15px !important;
	border-radius: 0 !important;
	margin: 0 !important;
	background-color: #011627 !important
}

.example-wrapper code {
	background-color: #0000000d !important
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border-width: 0;
	white-space: nowrap
}

.demoActions {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	padding: 1rem;
	background-color: #0000000d;
	display: flex;
	justify-content: center;
	gap: 1rem
}

.demoActions--file {
	justify-content: center !important
}

.button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 0;
	font-size: 14px;
	background-color: #fff;
	padding: 8px 12px;
	border-radius: 8px;
	transition: .3s ease-out;
	cursor: pointer;
	box-shadow: 0 0 0 1px #0000000d
}

.button:hover {
	background-color: var(--brand-1);
	color: #fff
}

.button[disabled] {
	pointer-events: none;
	opacity: .75
}

._banner_1mmo4_11 {
	display: flex;
	align-items: center;
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	background-color: #0000001a;
	padding: 1rem;
	z-index: 1
}

._banner_1mmo4_11 p {
	font-size: 1rem;
	flex: 1
}

._actions_1mmo4_30 {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem
}

._actions_1mmo4_30 a {
	color: #222;
	padding: .5rem .75rem;
	background-color: #fff;
	border-radius: 8px;
	font-size: 14px
}

._fab_1mmo4_11 {
	position: absolute;
	right: 1.5rem;
	bottom: 1.5rem;
	--size: 2.5rem;
	width: var(--size);
	height: var(--size);
	background-color: var(--brand-1);
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 18.25C15.866 18.25 19.25 16.1552 19.25 11.5C19.25 6.84483 15.866 4.75 12 4.75C8.13401 4.75 4.75 6.84483 4.75 11.5C4.75 13.2675 5.23783 14.6659 6.05464 15.7206C6.29358 16.0292 6.38851 16.4392 6.2231 16.7926C6.12235 17.0079 6.01633 17.2134 5.90792 17.4082C5.45369 18.2242 6.07951 19.4131 6.99526 19.2297C8.0113 19.0263 9.14752 18.722 10.0954 18.2738C10.2933 18.1803 10.5134 18.1439 10.7305 18.1714C11.145 18.224 11.5695 18.25 12 18.25Z' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 50%;
	cursor: pointer
}

._fab_1mmo4_11:hover {
	background-color: color-mix(in srgb, var(--brand-1), #000 15%)
}