.psv {
	--psv-max-width: 800px;
	--psv-gap: 16px;
	--psv-bg: transparent;
	--psv-page-bg: #f2f2f2;
	--psv-shadow: 1;

	display: block;
	max-width: var( --psv-max-width );
	margin: 0 auto;
	background: var( --psv-bg );
}

.psv__pages {
	display: flex;
	flex-direction: column;
	gap: var( --psv-gap );
}

.psv__pages--loading-doc {
	min-height: 200px;
}

.psv__page {
	position: relative;
	width: 100%;
	overflow: hidden;
	background-color: var( --psv-page-bg );
	line-height: 0;
}

.psv__page canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.psv__page--loading {
	background-image: linear-gradient(
		100deg,
		var( --psv-page-bg ) 30%,
		rgba( 255, 255, 255, 0.6 ) 50%,
		var( --psv-page-bg ) 70%
	);
	background-size: 200% 100%;
	animation: psv-shimmer 1.6s ease-in-out infinite;
}

@keyframes psv-shimmer {
	0% {
		background-position: 150% 0;
	}
	100% {
		background-position: -50% 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.psv__page--loading {
		animation: none;
	}
}

.psv--empty-state {
	padding: 40px 20px;
	text-align: center;
	border: 2px dashed #ccc;
	border-radius: 6px;
	color: #888;
}

.psv__noscript {
	padding: 20px;
	text-align: center;
}

.psv__error {
	padding: 24px;
	text-align: center;
	color: #a33;
	background: #fff5f5;
	border-radius: 6px;
}