.ttf-wrap {
	display: grid;
	gap: 0;
}

.ttf-shell {
	display: flex;
	justify-content: center;
}

.ttf-stage {
	position: relative;
	width: min(100%, 780px);
	min-height: 320px;
}

.ttf-loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 18px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.82)),
		var(--ttf-placeholder-image, none),
		linear-gradient(180deg, #f4f4f4, #ececec);
	background-position: center, center, 0 0;
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-size: cover, cover, auto;
	opacity: 1;
	visibility: visible;
	transition: opacity 320ms ease, visibility 320ms ease;
}

.ttf-spinner {
	width: 48px;
	height: 48px;
	border: 4px solid rgba(0, 0, 0, 0.12);
	border-top-color: #111;
	border-radius: 999px;
	animation: ttf-spin 0.8s linear infinite;
}

.ttf-embed {
	min-height: 0;
	position: relative;
	z-index: 1;
}

.ttf-embed > * {
	margin-left: auto;
	margin-right: auto;
}

.ttf-shell.is-loaded .ttf-loading {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.ttf-embed iframe,
.ttf-embed blockquote {
	max-width: 100%;
}

.ttf-embed blockquote {
	margin-left: 0 !important;
	padding-left: 0 !important;
	border-left: 0 !important;
	box-shadow: none !important;
}

@keyframes ttf-spin {
	to {
		transform: rotate(360deg);
	}
}