:root {
	--stage: #d9dcdf;
	--surface: #ffffff;
	--ink: #1d2329;
	--muted: #56616b;
	--line: #c3c9cf;
	--accent: #2f6f5e;
	--shadow: rgb(0 0 0 / 0.18);
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root {
		--stage: #1a1e22;
		--surface: #262c32;
		--ink: #e6eaee;
		--muted: #9aa5af;
		--line: #3a434b;
		--accent: #6cc3a8;
		--shadow: rgb(0 0 0 / 0.5);
		color-scheme: dark;
	}
}

* {
	box-sizing: border-box;
}

[hidden] {
	display: none !important;
}

html,
body {
	height: 100%;
	margin: 0;
}

body {
	background: var(--stage);
	color: var(--ink);
	font:
		15px/1.4 system-ui,
		-apple-system,
		'Segoe UI',
		Roboto,
		sans-serif;
	display: grid;
	grid-template-rows: auto 1fr auto;
	padding-left: max(12px, env(safe-area-inset-left, 0px));
	padding-right: max(12px, env(safe-area-inset-right, 0px));
}

.bar {
	display: flex;
	align-items: center;
	gap: 12px;
}

.top {
	justify-content: space-between;
	padding-top: max(10px, env(safe-area-inset-top, 0px));
	padding-bottom: 6px;
}

.bottom {
	justify-content: center;
	padding-top: 8px;
	padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

h1 {
	font-size: 1rem;
	font-weight: 600;
	margin: 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.count {
	color: var(--muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.stage {
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	touch-action: pan-y pinch-zoom;
	user-select: none;
}

.stage img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	height: auto;
	object-fit: contain;
	background: var(--surface);
	box-shadow:
		0 1px 2px var(--shadow),
		0 8px 24px var(--shadow);
}

.stage.spread img {
	max-width: 50%;
}

.missing {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 4;
	height: min(100%, 80vh);
	max-width: 100%;
	padding: 24px;
	text-align: center;
	color: var(--muted);
	background: var(--surface);
	box-shadow: 0 1px 2px var(--shadow);
}

.message {
	grid-row: 2;
	align-self: center;
	justify-self: center;
	max-width: 40ch;
	text-align: center;
	color: var(--muted);
}

button {
	font: inherit;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 8px 18px;
	cursor: pointer;
}

button:hover:not(:disabled) {
	border-color: var(--accent);
}

button:disabled {
	opacity: 0.4;
	cursor: default;
}

button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}