.xtool-curved-text-placeholder {
	padding: 16px;
	border: 1px dashed #c7c7c7;
	color: #6b6b6b;
	font-size: 13px;
	text-align: center;
}

.xtool-curved-text {
	max-width: 100%;
	line-height: 0;
	color: #222222;
}

.xtool-curved-text svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.xtool-curved-text text {
	/* These are SVG user-units inside a fixed 600-wide viewBox, not real
	   screen pixels — the whole <svg> scales via width:100% below, so a
	   value here (or from the widget's own Typography control) ends up
	   proportional to the widget's actual rendered width at every
	   breakpoint, rather than a fixed on-screen size. 600 was chosen to be
	   close to a typical real content-column width, so a typed Font Size
	   lands reasonably close to what it would be as a real on-screen px
	   value, without being an exact match. */
	fill: currentColor;
	font-size: 34px;
	letter-spacing: 3px;
}

.xtool-curved-text__sparkle {
	/* Drawn in the same abstract viewBox units as the curve/text (see the
	   class docblock in class-curved-text.php) — no font-size/em sizing
	   involved at all, so there is no separate unit system to keep in sync
	   with the curve the way an icon-font glyph would need. */
	fill: currentColor;
}