* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	min-height: 100vh;
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
	color: #18202a;
	background: #fff url(../images/bg.gif) repeat-x center top;
}
.page {
	width: 100%;
	margin: 3em auto 0;
	padding: 0;
}
.viewer-wrap {
	display: grid;
	gap: 14px;
}
.viewer-shell {
	display: grid;
	place-items: center;
	width: 100%;
}
.stage {
	position: relative;
	width: min(calc(100vw - 24px), 1000px);
	max-width: 100%;
	aspect-ratio: 1000 / 1129;
	box-shadow: none;
	isolation: isolate;
	touch-action: auto;
}
.stage::before { content: none; }
.layer {
	position: absolute;
	left: var(--left);
	top: var(--top);
	width: var(--width);
	height: var(--height);
	z-index: var(--z);
	transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(var(--scale, 1));
	transform-origin: center center;
	will-change: transform;
	pointer-events: none;
}
.layer img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
	filter: none;
}
@media (max-width: 736px) {
	.page {
		padding: 0;
	}
	.stage { width: 100%; }
	.viewer-header { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
	.layer { transition: none !important; }
}