.pixel-dispersion-widget {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: var(--pde-aspect, 1.7777778);
	overflow: hidden;
	background: #0d0d0f;
	touch-action: pan-y;
	contain: layout paint;
}

.pixel-dispersion-widget canvas {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
}

.pixel-dispersion-widget .pixel-dispersion-fallback,
.pixel-dispersion-widget .pixel-dispersion-text-fallback {
	position: absolute;
	z-index: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	transition: opacity 180ms ease;
}

.pixel-dispersion-widget .pixel-dispersion-fallback {
	display: block;
	object-fit: cover;
}

.pixel-dispersion-widget .pixel-dispersion-text-fallback {
	display: grid;
	place-items: center;
	padding: 8%;
	color: #fff;
	font: 800 clamp(32px, 10vw, 160px)/0.9 Arial, sans-serif;
	text-align: center;
	white-space: pre-wrap;
}

.pixel-dispersion-widget.is-ready:not(.pde-show-fallback) .pixel-dispersion-fallback,
.pixel-dispersion-widget.is-ready:not(.pde-show-fallback) .pixel-dispersion-text-fallback {
	opacity: 0;
}

.pixel-dispersion-widget .pixel-dispersion-icon-source {
	position: absolute;
	z-index: 0;
	top: 50%;
	left: 50%;
	display: block;
	width: 1em;
	height: 1em;
	color: #fff;
	font-size: 256px;
	line-height: 1;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, -50%);
}

.pixel-dispersion-widget .pixel-dispersion-icon-source svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.pixel-dispersion-widget .pixel-dispersion-camera-button {
	position: absolute;
	z-index: 4;
	top: 50%;
	left: 50%;
	display: none;
	padding: 10px 14px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	background: rgba(15, 15, 17, 0.9);
	color: #fff;
	font: 600 12px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	cursor: pointer;
	transform: translate(-50%, -50%);
}

.pixel-dispersion-widget.is-camera-awaiting .pixel-dispersion-camera-button {
	display: block;
}

.pixel-dispersion-widget .pixel-dispersion-stats {
	position: absolute;
	z-index: 4;
	top: 10px;
	right: 10px;
	display: none;
	padding: 5px 7px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 4px;
	background: rgba(10, 10, 12, 0.78);
	color: rgba(255, 255, 255, 0.72);
	font: 500 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
	pointer-events: none;
}

.pixel-dispersion-widget.has-performance-stats .pixel-dispersion-stats {
	display: block;
}

.pixel-dispersion-widget.pde-show-fallback canvas {
	display: none;
}

.pixel-dispersion-widget.pde-show-fallback .pixel-dispersion-icon-source {
	z-index: 2;
	width: min(50%, 320px);
	height: min(50%, 320px);
	font-size: min(50vw, 320px);
	opacity: 1;
}

.pixel-dispersion-widget.pde-show-fallback .pixel-dispersion-icon-source svg {
	width: 100%;
	height: 100%;
}

.pixel-dispersion-widget.pde-disabled {
	display: none;
}

.pixel-dispersion-widget .pixel-dispersion-message {
	position: absolute;
	z-index: 5;
	inset: auto 16px 16px;
	display: none;
	padding: 9px 11px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 6px;
	background: rgba(15, 15, 17, 0.86);
	color: rgba(255, 255, 255, 0.72);
	font: 500 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	backdrop-filter: blur(8px);
}

.pixel-dispersion-widget .pixel-dispersion-message:not(:empty) {
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.pixel-dispersion-widget {
		cursor: default;
	}
}