:root,
:root[data-theme='light'] {
	color-scheme: light;
	--guide-bg: radial-gradient(circle at top, #f7f2ff 0%, #ece7fb 42%, #d7e2f3 100%);
	--guide-surface: rgba(255, 255, 255, 0.84);
	--guide-surface-border: rgba(120, 88, 184, 0.16);
	--guide-text: #1f2e4f;
	--guide-subtle: rgba(31, 46, 79, 0.72);
	--guide-accent: #7858b8;
	--guide-button: linear-gradient(135deg, #7858b8 0%, #ff43b5 100%);
	--guide-button-hover: linear-gradient(135deg, #5b47a6 0%, #e23aa5 100%);
	--guide-secondary: rgba(120, 88, 184, 0.08);
	--guide-secondary-hover: rgba(120, 88, 184, 0.14);
	--guide-secondary-border: rgba(120, 88, 184, 0.18);
	--guide-shadow: 0 24px 60px rgba(44, 72, 122, 0.18);
	--guide-page-surface: rgba(120, 88, 184, 0.07);
	--guide-page-shadow: 0 10px 24px rgba(44, 72, 122, 0.12);
	--guide-message-bg: rgba(31, 46, 79, 0.06);
	--guide-safe-top: env(safe-area-inset-top);
	--guide-safe-bottom: env(safe-area-inset-bottom);
}

:root[data-theme='dark'] {
	color-scheme: dark;
	--guide-bg: radial-gradient(circle at top, #31275a 0%, #162238 45%, #0a1018 100%);
	--guide-surface: rgba(9, 14, 22, 0.9);
	--guide-surface-border: rgba(142, 111, 206, 0.26);
	--guide-text: #f5f7fb;
	--guide-subtle: rgba(245, 247, 251, 0.74);
	--guide-accent: #8e6fce;
	--guide-button: linear-gradient(135deg, #8e6fce 0%, #2dc4b2 100%);
	--guide-button-hover: linear-gradient(135deg, #7958b8 0%, #23a89a 100%);
	--guide-secondary: rgba(142, 111, 206, 0.14);
	--guide-secondary-hover: rgba(142, 111, 206, 0.22);
	--guide-secondary-border: rgba(142, 111, 206, 0.28);
	--guide-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
	--guide-page-surface: rgba(142, 111, 206, 0.12);
	--guide-page-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
	--guide-message-bg: rgba(255, 255, 255, 0.06);
	--guide-safe-top: env(safe-area-inset-top);
	--guide-safe-bottom: env(safe-area-inset-bottom);
}

.guide-standalone-page {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	font-family: 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
	background: var(--guide-bg);
	color: var(--guide-text);
}

.guide-shell,
.guide-shell * {
	box-sizing: border-box;
}

.guide-shell {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	padding: calc(10px + var(--guide-safe-top)) 10px calc(10px + var(--guide-safe-bottom));
	gap: 10px;
}

.guide-toolbar,
.guide-viewer-shell {
	width: min(100%, 1080px);
	margin: 0 auto;
	background: var(--guide-surface);
	border: 1px solid var(--guide-surface-border);
	border-radius: 18px;
	box-shadow: var(--guide-shadow);
	backdrop-filter: blur(14px);
}

.guide-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px;
	flex-wrap: wrap;
}

.guide-title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	font-size: 0.98rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.guide-title-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.guide-title i {
	color: var(--guide-accent);
}

.guide-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

.guide-action,
.guide-zoom-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 14px;
	border: 1px solid transparent;
	text-decoration: none;
	color: inherit;
	transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
	font-size: 0.95rem;
	font-weight: 700;
	white-space: nowrap;
	background: transparent;
	cursor: pointer;
}

.guide-action:hover,
.guide-action:focus-visible,
.guide-zoom-button:hover,
.guide-zoom-button:focus-visible {
	transform: translateY(-1px);
	outline: none;
}

.guide-action.primary {
	background: var(--guide-button);
	box-shadow: 0 14px 28px rgba(28, 84, 170, 0.25);
}

.guide-action.primary:hover,
.guide-action.primary:focus-visible {
	background: var(--guide-button-hover);
}

.guide-action.secondary,
.guide-zoom-button {
	background: var(--guide-secondary);
	border-color: var(--guide-secondary-border);
}

.guide-action.secondary:hover,
.guide-action.secondary:focus-visible,
.guide-zoom-button:hover,
.guide-zoom-button:focus-visible {
	background: var(--guide-secondary-hover);
	border-color: var(--guide-secondary-border);
}

.guide-zoom-button:disabled {
	opacity: 0.45;
	cursor: default;
	transform: none;
}

.guide-toolbar-meta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	margin-left: auto;
}

.guide-zoom-label {
	min-width: 82px;
	text-align: center;
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--guide-subtle);
}

.guide-status {
	font-size: 0.9rem;
	color: var(--guide-subtle);
	white-space: nowrap;
}

.guide-viewer-shell {
	flex: 1 1 auto;
	min-height: 0;
	padding: 10px;
	display: flex;
	flex-direction: column;
}

.guide-loading,
.guide-error {
	margin: auto;
	padding: 14px 16px;
	border-radius: 14px;
	background: var(--guide-message-bg);
	color: var(--guide-subtle);
	text-align: center;
}

.guide-error a {
	color: var(--guide-text);
}

.guide-error[hidden],
.guide-loading[hidden] {
	display: none;
}

.guide-pages {
	width: 100%;
	min-height: 0;
	height: calc(100vh - var(--guide-safe-top) - var(--guide-safe-bottom) - 96px);
	height: calc(100dvh - var(--guide-safe-top) - var(--guide-safe-bottom) - 96px);
	overflow: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 4px;
	-webkit-overflow-scrolling: touch;
}

.guide-pages[hidden] {
	display: none;
}

.guide-page {
	width: fit-content;
	max-width: 100%;
	padding: 8px;
	border-radius: 14px;
	background: var(--guide-page-surface);
	box-shadow: var(--guide-page-shadow);
}

.guide-canvas {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	background: white;
}

.guide-pages[data-zoom-mode='manual'] {
	align-items: flex-start;
}

.guide-pages[data-zoom-mode='manual'] .guide-page,
.guide-pages[data-zoom-mode='manual'] .guide-canvas {
	max-width: none;
}

.guide-footer {
	width: min(100%, 1080px);
	margin: 0 auto;
	display: flex;
	justify-content: center;
	padding-bottom: 2px;
}

@media (max-width: 640px) {
	.guide-toolbar {
		justify-content: flex-start;
	}

	.guide-action,
	.guide-zoom-button {
		flex: 1 1 auto;
	}

	.guide-toolbar-meta {
		width: 100%;
		margin-left: 0;
		justify-content: space-between;
	}

	.guide-pages {
		height: calc(100vh - var(--guide-safe-top) - var(--guide-safe-bottom) - 150px);
		height: calc(100dvh - var(--guide-safe-top) - var(--guide-safe-bottom) - 150px);
	}

	.guide-footer {
		width: 100%;
	}
}