.mosaic-th {
	--mosaic-th-color: #ffd23f;
}

.mosaic-th__text {
	margin: 0;
	font-weight: 700;
	line-height: 1.25;
}

.mosaic-th__mark {
	position: relative;
	display: inline-block;
	white-space: nowrap;
}

.mosaic-th__words {
	position: relative;
	z-index: 1;
}

/* Marker, underline and box are a gradient behind the words that grows to full width. */
.mosaic-th--marker .mosaic-th__mark,
.mosaic-th--underline .mosaic-th__mark,
.mosaic-th--box .mosaic-th__mark {
	background-image: linear-gradient(var(--mosaic-th-color), var(--mosaic-th-color));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 100%;
}

.mosaic-th--marker .mosaic-th__mark { background-size: 100% 0.45em; background-position: 0 88%; }
.mosaic-th--underline .mosaic-th__mark { background-size: 100% 0.14em; background-position: 0 100%; }
[dir="rtl"] .mosaic-th__mark { background-position-x: 100%; }
.mosaic-th--box .mosaic-th__mark { padding-inline: 0.25em; border-radius: 0.2em; }

.mosaic-th--wavy .mosaic-th__mark {
	text-decoration: underline wavy var(--mosaic-th-color);
	text-decoration-thickness: 0.12em;
	text-underline-offset: 0.18em;
}

.mosaic-th__circle {
	position: absolute;
	inset: -0.25em -0.35em;
	inline-size: calc(100% + 0.7em);
	block-size: calc(100% + 0.5em);
	fill: none;
	stroke: var(--mosaic-th-color);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	vector-effect: non-scaling-stroke;
}

/* The mark is drawn from nothing only when the script that draws it is on its way. */
.mosaic-th__mark,
.mosaic-th__circle {
	transition: background-size 0.8s ease, stroke-dashoffset 1s ease, opacity 0.8s ease;
}

.mosaic-anim-ready .mosaic-th--animate:not(.is-in) .mosaic-th__mark {
	animation: mosaic-th-failsafe 0.01s 4s forwards;
}

.mosaic-anim-ready .mosaic-th--animate.mosaic-th--marker:not(.is-in) .mosaic-th__mark { background-size: 0% 0.45em; }
.mosaic-anim-ready .mosaic-th--animate.mosaic-th--underline:not(.is-in) .mosaic-th__mark { background-size: 0% 0.14em; }
.mosaic-anim-ready .mosaic-th--animate.mosaic-th--box:not(.is-in) .mosaic-th__mark { background-size: 0% 100%; }
.mosaic-anim-ready .mosaic-th--animate.mosaic-th--wavy:not(.is-in) .mosaic-th__mark { text-decoration-color: transparent; }
.mosaic-anim-ready .mosaic-th--animate.mosaic-th--circle:not(.is-in) .mosaic-th__circle { stroke-dashoffset: 1; }

@keyframes mosaic-th-failsafe {
	to {
		background-size: 100% 0.45em;
		text-decoration-color: var(--mosaic-th-color);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mosaic-th__mark,
	.mosaic-th__circle {
		transition: none;
		animation: none !important;
	}
}

/* On a phone a long phrase may wrap instead of running past the edge of the screen. */
@media (max-width: 47.9375rem) {
	.mosaic-th__mark {
		white-space: normal;
		max-inline-size: 100%;
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
	}
}