@font-face {
	font-family: "Source Serif 4";
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src: url("../fonts/source-serif-4/source-serif-4-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Source Serif 4";
	font-style: normal;
	font-display: swap;
	font-weight: 600;
	src: url("../fonts/source-serif-4/source-serif-4-latin-600-normal.woff2") format("woff2");
}

:root {
	--jser-paper: #f5efe2;
	--jser-paper-deep: #eee4d2;
	--jser-ink: #2f2b24;
	--jser-muted: #6f6659;
	--jser-rule: #d6c9b4;
	--jser-accent: #53665f;
	--jser-accent-strong: #344941;
	--jser-focus: #0b67c2;
}

html,
body.jatsstudio-epub-reader-page {
	width: 100%;
	height: 100%;
	margin: 0;
}

body.jatsstudio-epub-reader-page {
	overflow: hidden;
	background: var(--jser-paper);
	color: var(--jser-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jser,
.jser * {
	box-sizing: border-box;
}

.jser [hidden] {
	display: none !important;
}

.jser {
	display: flex;
	width: 100%;
	height: 100vh;
	height: 100svh;
	height: 100dvh;
	min-height: 320px;
	flex-direction: column;
	background:
		radial-gradient(circle at 50% -15%, rgba(255, 255, 255, 0.62), transparent 42%),
		var(--jser-paper);
}

.jser__header {
	z-index: 20;
	display: grid;
	min-height: 64px;
	padding: 8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 20px;
	background: rgba(245, 239, 226, 0.96);
	border-bottom: 1px solid var(--jser-rule);
	box-shadow: 0 5px 18px rgba(80, 65, 43, 0.08);
}

.jser__identity {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 14px;
}

.jser__return,
.jser__title {
	color: inherit;
	text-decoration: none;
}

.jser__title-heading {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
}

.jser__return {
	display: inline-flex;
	min-height: 42px;
	padding: 0 12px;
	align-items: center;
	gap: 8px;
	border-radius: 999px;
	font-size: 0.92rem;
	font-weight: 650;
	white-space: nowrap;
}

.jser__return:hover,
.jser__return:focus-visible {
	background: rgba(83, 102, 95, 0.1);
	color: var(--jser-accent-strong);
}

.jser__return-icon {
	font-size: 1.35rem;
	font-weight: 400;
	line-height: 1;
}

.jser__divider {
	width: 1px;
	height: 26px;
	flex: 0 0 1px;
	background: var(--jser-rule);
}

.jser__title {
	overflow: hidden;
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.jser__title:hover,
.jser__title:focus-visible {
	color: var(--jser-accent-strong);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.jser__controls {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.jser__download {
	display: inline-flex;
	min-height: 42px;
	padding: 0 13px;
	align-items: center;
	gap: 7px;
	border: 1px solid var(--jser-rule);
	border-radius: 9px;
	background: #fffaf0;
	box-shadow: 0 1px 4px rgba(80, 65, 43, 0.1);
	color: var(--jser-accent-strong);
	font-size: 0.84rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.jser__download:hover,
.jser__download:focus-visible {
	background: #fffdf7;
	color: var(--jser-ink);
}

.jser__download-icon {
	font-size: 1.2rem;
	line-height: 1;
}

.jser__layout {
	display: inline-flex;
	padding: 3px;
	gap: 2px;
	background: rgba(226, 215, 197, 0.72);
	border: 1px solid var(--jser-rule);
	border-radius: 10px;
}

.jser__layout-button {
	display: inline-flex;
	min-height: 38px;
	padding: 0 11px;
	align-items: center;
	gap: 7px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--jser-muted);
	cursor: pointer;
	font: inherit;
	font-size: 0.82rem;
	font-weight: 650;
}

.jser__layout-button:hover {
	color: var(--jser-ink);
}

.jser__layout-button[aria-pressed="true"] {
	background: #fffaf0;
	box-shadow: 0 1px 4px rgba(80, 65, 43, 0.14);
	color: var(--jser-accent-strong);
}

.jser__layout-icon {
	display: inline-grid;
	width: 18px;
	height: 15px;
	padding: 2px;
	gap: 2px;
	border: 1px solid currentColor;
	border-radius: 2px;
}

.jser__layout-icon--one {
	grid-template-columns: 1fr;
}

.jser__layout-icon--two {
	grid-template-columns: 1fr 1fr;
}

.jser__layout-icon span {
	display: block;
	background: currentColor;
	opacity: 0.45;
}

.jser__notice {
	z-index: 15;
	padding: 9px 20px;
	background: #fff3cb;
	border-bottom: 1px solid #dfcf98;
	color: #594b20;
	font-size: 0.88rem;
	line-height: 1.4;
	text-align: center;
}

.jser__notice a {
	color: inherit;
	font-weight: 700;
}

.jser__stage {
	position: relative;
	min-width: 0;
	min-height: 0;
	flex: 1 1 auto;
	overflow: hidden;
}

.jser__viewport,
.jser__viewport > div,
.jser__viewport .epub-container {
	width: 100% !important;
	height: 100% !important;
}

.jser__viewport {
	padding: clamp(8px, 1.8vw, 24px) clamp(28px, 5vw, 76px);
	overflow: hidden;
}

.jser__viewport iframe {
	border: 0 !important;
	background: var(--jser-paper) !important;
	box-shadow: 0 10px 32px rgba(82, 67, 44, 0.08);
}

.jser__nav {
	position: absolute;
	z-index: 12;
	top: 50%;
	display: grid;
	width: 46px;
	height: 64px;
	padding: 0;
	place-items: center;
	transform: translateY(-50%);
	border: 1px solid rgba(125, 109, 84, 0.24);
	border-radius: 14px;
	background: rgba(255, 250, 240, 0.82);
	box-shadow: 0 5px 18px rgba(77, 61, 38, 0.12);
	color: var(--jser-accent-strong);
	cursor: pointer;
	font: inherit;
	transition: background 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.jser__nav span {
	margin-top: -4px;
	font-family: Georgia, serif;
	font-size: 2.45rem;
	font-weight: 400;
	line-height: 1;
}

.jser__nav--previous {
	left: max(8px, env(safe-area-inset-left));
}

.jser__nav--next {
	right: max(8px, env(safe-area-inset-right));
}

.jser__nav:hover:not(:disabled) {
	background: #fffaf0;
	box-shadow: 0 7px 22px rgba(77, 61, 38, 0.18);
}

.jser__nav:disabled {
	opacity: 0;
	pointer-events: none;
}

.jser__status,
.jser__fallback {
	position: absolute;
	z-index: 14;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--jser-paper);
}

.jser__status {
	gap: 12px;
	color: var(--jser-muted);
	font-size: 0.94rem;
}

.jser__spinner {
	width: 20px;
	height: 20px;
	border: 2px solid rgba(83, 102, 95, 0.22);
	border-top-color: var(--jser-accent);
	border-radius: 50%;
	animation: jser-spin 750ms linear infinite;
}

.jser.is-ready .jser__status {
	display: none;
}

.jser__fallback {
	padding: 28px;
	flex-direction: column;
	gap: 12px;
	color: var(--jser-ink);
	text-align: center;
}

.jser__fallback p {
	max-width: 520px;
	margin: 0;
	line-height: 1.5;
}

.jser__fallback a,
.jser__noscript a {
	display: inline-flex;
	min-height: 42px;
	padding: 0 16px;
	align-items: center;
	border-radius: 8px;
	background: var(--jser-accent-strong);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.jser__noscript {
	position: fixed;
	z-index: 30;
	inset: 64px 0 0;
	display: grid;
	place-items: center;
	background: var(--jser-paper);
}

.jser a:focus-visible,
.jser button:focus-visible {
	outline: 3px solid var(--jser-focus);
	outline-offset: 2px;
}

@keyframes jser-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 820px) {
	.jser__header {
		min-height: 56px;
		padding-top: max(6px, env(safe-area-inset-top));
		padding-bottom: 6px;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 8px;
	}

	.jser__layout {
		display: none;
	}

	.jser__identity {
		gap: 9px;
	}

	.jser__return {
		min-width: 42px;
		padding: 0 8px;
	}

	.jser__return-label,
	.jser__divider {
		display: none;
	}

	.jser__title {
		font-size: 0.94rem;
	}

	.jser__download {
		min-width: 42px;
		padding: 0 10px;
		justify-content: center;
	}

	.jser__download-label {
		display: none;
	}

	.jser__viewport {
		padding: 4px 5px 58px;
	}

	.jser__viewport iframe {
		box-shadow: none;
	}

	.jser__nav {
		top: auto;
		bottom: max(8px, env(safe-area-inset-bottom));
		width: 48px;
		height: 44px;
		transform: none;
		border-radius: 999px;
	}

	.jser__nav--previous {
		left: max(12px, env(safe-area-inset-left));
	}

	.jser__nav--next {
		right: max(12px, env(safe-area-inset-right));
	}

	.jser__notice {
		padding: 7px 12px;
		font-size: 0.78rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jser__nav {
		transition: none;
	}

	.jser__spinner {
		animation-duration: 1.5s;
	}
}

@media (forced-colors: active) {
	.jser__header,
	.jser__layout,
	.jser__download,
	.jser__nav {
		border: 1px solid CanvasText;
	}

	.jser__layout-button[aria-pressed="true"] {
		outline: 2px solid Highlight;
	}
}