/* ===================================
   CSS Reset and Base Styles
   =================================== */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

:root {
	/* Color palette - WCAG AAA compliant */
	--color-primary: #1a73e8;
	--color-primary-dark: #0d47a1;
	--color-primary-light: #4285f4;
	--color-secondary: #34a853;
	--color-background: #ffffff;
	--color-surface: #f8f9fa;
	--color-text-primary: #202124;
	--color-text-secondary: #5f6368;
	--color-border: #dadce0;
	--color-error: #d93025;
	--color-overlay: rgba(0, 0, 0, 0.5);
	--color-focus: #1a73e8;
	
	/* High contrast mode colors */
	--color-hc-bg: #000000;
	--color-hc-text: #ffffff;
	--color-hc-border: #ffffff;
	--color-hc-focus: #ffff00;
	
	/* Spacing */
	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 0.75rem;
	--spacing-lg: 1rem;
	--spacing-xl: 1.25rem;
	--spacing-2xl: 1.5rem;
	
	/* Typography */
	--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-size-base: 14px;
	--font-size-sm: 0.875rem;
	--font-size-md: 1rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.25rem;
	--font-size-2xl: 1.5rem;
	--font-size-3xl: 1.875rem;
	--line-height-base: 1.5;
	--line-height-heading: 1.2;
	
	/* Transitions */
	--transition-fast: 150ms ease-in-out;
	--transition-base: 250ms ease-in-out;
	--transition-slow: 350ms ease-in-out;
	
	/* Shadows */
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
	
	/* Border radius */
	--radius-sm: 0.25rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.75rem;
	--radius-xl: 1rem;
	
	/* Z-index */
	--z-base: 1;
	--z-dropdown: 100;
	--z-modal: 1000;
	--z-tooltip: 1100;
}

html {
	font-size: var(--font-size-base);
	scroll-behavior: smooth;
	width: 100%;
	overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	font-family: var(--font-family);
	font-size: var(--font-size-md);
	line-height: var(--line-height-base);
	color: var(--color-text-primary);
	background-color: var(--color-background);
	min-height: 100vh;
	width: 100%;
	max-width: 100vw;
	overflow-x: hidden;
	position: relative;
	-webkit-tap-highlight-color: rgba(26, 115, 232, 0.3);
	-webkit-touch-callout: none;
	touch-action: manipulation;
}

body::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: -2;
}

body::after {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-overlay);
	z-index: -1;
}

/* ===================================
   Accessibility Utilities
   =================================== */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: var(--spacing-md);
	background: var(--color-primary);
	color: white;
	padding: var(--spacing-lg) var(--spacing-xl);
	text-decoration: none;
	z-index: 10000;
	font-weight: 600;
	font-size: var(--font-size-lg);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-xl);
}

.skip-link:focus {
	top: var(--spacing-md);
}

/* Focus styles - highly visible for keyboard navigation */
*:focus {
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
}

/* Touch device optimizations */
button,
a,
input,
select,
textarea {
	-webkit-tap-highlight-color: rgba(26, 115, 232, 0.3);
	touch-action: manipulation;
}

button,
.btn-nav,
.btn-primary,
.btn-audio,
.btn-tts,
.btn-toggle,
.btn-icon,
.btn-font-size {
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}

button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
}

/* ===================================
   Utility Classes
   =================================== */
.hidden {
	display: none !important;
}

/* ===================================
   Loading Screen
   =================================== */
.loading-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.9);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: var(--z-modal);
	gap: var(--spacing-lg);
}

.loading-spinner {
	width: 60px;
	height: 60px;
	border: 4px solid rgba(255, 255, 255, 0.2);
	border-top-color: var(--color-primary-light);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

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

.loading-text {
	color: white;
	font-size: var(--font-size-xl);
	font-weight: 500;
}

/* ===================================
   Splash Screen
   =================================== */
.splash-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: calc(var(--z-modal) + 1);
	overflow: hidden;
}

.splash-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.splash-progress-container {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-lg);
	z-index: 2;
}

.splash-progress-text {
	color: #ffffff;
	font-size: var(--font-size-2xl);
	font-weight: 700;
	text-shadow: 
		0 2px 4px rgba(0, 0, 0, 0.9),
		0 0 8px rgba(0, 0, 0, 0.8),
		2px 2px 4px rgba(0, 0, 0, 0.9);
	margin-bottom: var(--spacing-md);
	letter-spacing: 0.5px;
}

.splash-progress-bar {
	width: 80%;
	max-width: 400px;
	height: 12px;
	background-color: rgba(0, 0, 0, 0.6);
	border: 2px solid rgba(255, 255, 255, 0.8);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 
		0 2px 8px rgba(0, 0, 0, 0.8),
		inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.splash-progress-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #4285f4, #1a73e8);
	border-radius: 4px;
	transition: width 100ms linear;
	box-shadow: 0 0 10px rgba(66, 133, 244, 0.8);
}

.splash-progress-percent {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 768px) {
	.splash-progress-text {
		font-size: var(--font-size-xl);
	}
	
	.splash-progress-bar {
		width: 90%;
	}
}

/* ===================================
   Error Screen
   =================================== */
.error-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.95);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: var(--z-modal);
	padding: var(--spacing-lg);
}

.error-content {
	background: white;
	padding: var(--spacing-2xl);
	border-radius: var(--radius-xl);
	max-width: 500px;
	text-align: center;
	box-shadow: var(--shadow-xl);
}

.error-content h1 {
	color: var(--color-error);
	margin-bottom: var(--spacing-lg);
	font-size: var(--font-size-2xl);
}

.error-content p {
	margin-bottom: var(--spacing-xl);
	color: var(--color-text-secondary);
	font-size: var(--font-size-lg);
}

/* ===================================
   Main Content
   =================================== */
.main-content {
	min-height: 100vh;
	height: 100vh;
	display: flex;
	flex-direction: column;
	padding: var(--spacing-sm);
	gap: var(--spacing-sm);
	max-width: 100vw;
	overflow-x: hidden;
	overflow-y: auto;
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.main-content {
		padding: var(--spacing-xl);
		gap: var(--spacing-xl);
	}
}

/* ===================================
   Gallery Header
   =================================== */
.gallery-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--spacing-sm);
	background: rgba(255, 255, 255, 0.8);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	backdrop-filter: blur(10px);
	flex-wrap: wrap;
	gap: var(--spacing-md);
	min-height: fit-content;
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.gallery-header {
		padding: var(--spacing-lg);
		flex-wrap: nowrap;
	}
}

.gallery-title {
	font-size: var(--font-size-lg);
	font-weight: 700;
	color: var(--color-text-primary);
	margin: 0;
	word-wrap: break-word;
	overflow-wrap: break-word;
	max-width: 100%;
	line-height: 1.3;
	flex: 1 1 100%;
	min-width: 0;
}

@media (min-width: 768px) {
	.gallery-title {
		font-size: var(--font-size-2xl);
	}
}

.gallery-controls {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	flex-wrap: wrap;
	flex: 1 1 100%;
	justify-content: flex-start;
	min-width: 0;
}

/* ===================================
   Accessibility Controls
   =================================== */
.accessibility-group {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.accessibility-label {
	font-size: var(--font-size-md);
	font-weight: 600;
	color: var(--color-text-primary);
	margin-right: var(--spacing-sm);
}

.btn-font-size {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: var(--spacing-xs) var(--spacing-sm);
	background: var(--color-surface);
	border: 2px solid var(--color-border);
	border-radius: var(--radius-md);
	font-size: var(--font-size-md);
	font-weight: 700;
	color: var(--color-text-primary);
	cursor: pointer;
	transition: all var(--transition-base);
}

.btn-font-size:hover {
	background: var(--color-primary);
	color: white;
	border-color: var(--color-primary);
	transform: translateY(-2px);
}

.btn-font-size:active {
	transform: translateY(0);
}

.btn-toggle {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	padding: var(--spacing-xs) var(--spacing-sm);
	background: var(--color-surface);
	border: 2px solid var(--color-border);
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--color-text-primary);
	cursor: pointer;
	transition: all var(--transition-base);
	min-height: 40px;
}

.btn-toggle:hover {
	background: var(--color-primary);
	color: white;
	border-color: var(--color-primary);
}

.btn-toggle.active {
	background: var(--color-primary);
	color: white;
	border-color: var(--color-primary);
}

.btn-toggle svg {
	width: 16px;
	height: 16px;
}

/* ===================================
   Artwork Container
   =================================== */
.artwork-container {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	background: rgba(255, 255, 255, 0.8);
	border-radius: var(--radius-lg);
	padding: var(--spacing-md);
	box-shadow: var(--shadow-lg);
	backdrop-filter: blur(10px);
	overflow-x: hidden;
	overflow-y: auto;
	max-width: 100%;
	width: 100%;
	box-sizing: border-box;
	min-height: 0;
}

@media (min-width: 768px) {
	.artwork-container {
		gap: var(--spacing-xl);
		padding: var(--spacing-xl);
		border-radius: var(--radius-xl);
	}
}

@media (min-width: 1024px) {
	.artwork-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	
	.artwork-container.no-media {
		display: flex;
		flex-direction: column;
	}
}

.artwork-media-wrapper {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-between;
	gap: var(--spacing-sm);
	max-width: 100%;
	flex: 1;
	min-height: 0;
}

.media-container {
	width: 100%;
	max-width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	flex: 1;
	min-height: 0;
}

.media-container.hidden {
	display: none;
}

.artwork-media {
	width: 100%;
	height: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}

img.artwork-media {
	width: 100%;
	height: 100%;
	max-height: 100%;
	object-fit: contain;
}

video.artwork-media {
	position: relative;
	background: #000;
}

/* ===================================
   Artwork Info
   =================================== */
.artwork-info {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
	max-width: 100%;
	overflow-wrap: break-word;
	word-wrap: break-word;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	min-height: 0;
	overflow-y: auto;
}

.artwork-title {
	font-size: var(--font-size-2xl);
	font-weight: 700;
	color: var(--color-text-primary);
	line-height: 1.3;
	margin: 0;
	word-wrap: break-word;
	overflow-wrap: break-word;
	hyphens: auto;
	max-width: 100%;
	padding-bottom: var(--spacing-xs);
}

.description-container {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	max-width: 100%;
}

.btn-tts {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	padding: var(--spacing-xs) var(--spacing-sm);
	background: var(--color-primary);
	color: white;
	border: none;
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	font-weight: 600;
	cursor: pointer;
	transition: all var(--transition-base);
	align-self: flex-start;
	min-height: 40px;
}

.btn-tts:hover {
	background: var(--color-primary-dark);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.btn-tts:active {
	transform: translateY(0);
}

.btn-tts:focus {
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
}

.btn-tts.speaking {
	background: var(--color-error);
}

.btn-tts.speaking:hover {
	background: #b71c1c;
}

.btn-tts svg {
	flex-shrink: 0;
}

.artwork-description {
	font-size: var(--font-size-md);
	color: var(--color-text-secondary);
	line-height: 1.6;
	margin: 0;
	word-wrap: break-word;
	overflow-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
	max-width: 100%;
	white-space: pre-line;
	max-height: none;
	overflow-y: visible;
	padding-right: var(--spacing-sm);
	scrollbar-width: thin;
	scrollbar-color: var(--color-primary) var(--color-surface);
}

.artwork-description::-webkit-scrollbar {
	width: 8px;
}

.artwork-description::-webkit-scrollbar-track {
	background: var(--color-surface);
	border-radius: var(--radius-sm);
}

.artwork-description::-webkit-scrollbar-thumb {
	background: var(--color-primary);
	border-radius: var(--radius-sm);
}

.artwork-description::-webkit-scrollbar-thumb:hover {
	background: var(--color-primary-dark);
}

/* ===================================
   Audio Description Player
   =================================== */
.audio-description-player {
	background: var(--color-surface);
	padding: var(--spacing-xs);
	border-radius: var(--radius-md);
	border: 2px solid var(--color-border);
	overflow: hidden;
	box-sizing: border-box;
	width: 100%;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

.audio-label {
	font-size: var(--font-size-sm);
	font-weight: 600;
	margin-bottom: var(--spacing-xs);
	color: var(--color-text-primary);
}

.audio-controls {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--spacing-xs);
	max-width: 100%;
	overflow: hidden;
	flex-wrap: nowrap;
}

#audio-description {
	display: none;
}

.btn-audio {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	padding: var(--spacing-xs) var(--spacing-sm);
	background: var(--color-primary);
	color: white;
	border: none;
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--transition-base);
	flex-shrink: 0;
	justify-content: center;
	overflow: hidden;
	white-space: nowrap;
	min-height: 32px;
}

.btn-audio:disabled {
	background: var(--color-border);
	color: var(--color-text-secondary);
	cursor: not-allowed;
	opacity: 0.6;
}

.btn-audio:hover {
	background: var(--color-primary-dark);
}

.btn-audio:active {
	transform: scale(0.98);
}

.audio-progress {
	flex: 1;
	height: 6px;
	background: var(--color-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	cursor: pointer;
	min-width: 0;
}

.audio-progress-bar {
	height: 100%;
	background: var(--color-primary);
	width: 0%;
	transition: width 100ms linear;
}

.audio-time {
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
	text-align: center;
	font-variant-numeric: tabular-nums;
	display: none;
}

/* ===================================
   Position Indicator
   =================================== */
.btn-activity-link {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-md) var(--spacing-lg);
	background: var(--color-secondary);
	color: white;
	border: none;
	border-radius: var(--radius-md);
	font-size: var(--font-size-md);
	font-weight: 600;
	text-decoration: none;
	transition: all var(--transition-base);
	justify-content: center;
	max-width: 100%;
	overflow: hidden;
	word-break: break-word;
	box-sizing: border-box;
}

.btn-activity-link:hover {
	background: #2d8e42;
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.btn-activity-link:active {
	transform: translateY(0);
}

.btn-activity-link svg {
	flex-shrink: 0;
}

.position-indicator {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-xs);
	font-size: var(--font-size-lg);
	font-weight: 600;
	color: var(--color-text-primary);
	padding: var(--spacing-xs) var(--spacing-sm);
	background: var(--color-surface);
	border-radius: var(--radius-md);
	border: 2px solid var(--color-border);
	flex-wrap: wrap;
}

.current-position {
	color: var(--color-primary);
	font-size: var(--font-size-xl);
}

/* ===================================
   Navigation Controls
   =================================== */
.navigation-controls {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacing-xs);
	padding: var(--spacing-sm);
	background: rgba(255, 255, 255, 0.95);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	backdrop-filter: blur(10px);
	position: sticky;
	bottom: 0;
	z-index: 100;
}

@media (min-width: 768px) {
	.navigation-controls {
		grid-template-columns: repeat(4, 1fr);
	}
}

.btn-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-md);
	background: var(--color-primary);
	color: white;
	border: none;
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	font-weight: 600;
	cursor: pointer;
	transition: all var(--transition-base);
	min-height: 44px;
}

.btn-nav:hover {
	background: var(--color-primary-dark);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.btn-nav:active {
	transform: translateY(0);
}

.btn-nav:disabled {
	background: var(--color-border);
	color: var(--color-text-secondary);
	cursor: not-allowed;
	transform: none;
}

.btn-nav svg {
	flex-shrink: 0;
}

.btn-text {
	display: none;
}

@media (min-width: 768px) {
	.btn-text {
		display: inline;
		font-size: 1em;
	}
}

/* ===================================
   Buttons
   =================================== */
.btn-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--color-surface);
	border: 2px solid var(--color-border);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: all var(--transition-base);
	color: var(--color-text-primary);
}

.btn-icon:hover {
	background: var(--color-primary);
	color: white;
	border-color: var(--color-primary);
}

.btn-primary {
	padding: var(--spacing-md) var(--spacing-xl);
	background: var(--color-primary);
	color: white;
	border: none;
	border-radius: var(--radius-md);
	font-size: var(--font-size-md);
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--transition-base);
}

.btn-primary:hover {
	background: var(--color-primary-dark);
}

.btn-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: transparent;
	border: none;
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: background-color var(--transition-base);
	color: var(--color-text-primary);
}

.btn-close:hover {
	background: var(--color-surface);
}

/* ===================================
   Keyboard Shortcuts
   =================================== */
.keyboard-shortcuts {
	position: fixed;
	bottom: var(--spacing-lg);
	right: var(--spacing-lg);
	background: rgba(255, 255, 255, 0.98);
	padding: var(--spacing-lg);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xl);
	max-width: 350px;
	z-index: var(--z-dropdown);
	backdrop-filter: blur(10px);
}

.keyboard-shortcuts h3 {
	margin-bottom: var(--spacing-md);
	font-size: var(--font-size-lg);
	color: var(--color-text-primary);
}

.keyboard-shortcuts ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.keyboard-shortcuts li {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
}

kbd {
	display: inline-block;
	padding: var(--spacing-xs) var(--spacing-sm);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-family: monospace;
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--color-text-primary);
	box-shadow: var(--shadow-sm);
}

/* ===================================
   Modals
   =================================== */
.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: var(--z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-lg);
}

.modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(4px);
}

.modal-content {
	position: relative;
	background: white;
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-xl);
	max-width: 600px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	z-index: 1;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--spacing-xl);
	border-bottom: 1px solid var(--color-border);
}

.modal-header h2 {
	font-size: var(--font-size-xl);
	color: var(--color-text-primary);
	margin: 0;
}

.modal-body {
	padding: var(--spacing-xl);
}

.modal-body section {
	margin-bottom: var(--spacing-xl);
}

.modal-body section:last-child {
	margin-bottom: 0;
}

.modal-body h3 {
	font-size: var(--font-size-lg);
	margin-bottom: var(--spacing-md);
	color: var(--color-text-primary);
}

.modal-body p {
	margin-bottom: var(--spacing-md);
	color: var(--color-text-secondary);
	line-height: 1.6;
}

.modal-body ul {
	list-style-position: inside;
	color: var(--color-text-secondary);
	line-height: 1.8;
}

.modal-body li {
	margin-bottom: var(--spacing-sm);
}

/* ===================================
   Settings
   =================================== */
.setting-group {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	padding: var(--spacing-md);
	background: var(--color-surface);
	border-radius: var(--radius-md);
}

.setting-group label {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	font-size: var(--font-size-md);
	color: var(--color-text-primary);
	cursor: pointer;
}

.setting-group input[type="checkbox"] {
	width: 20px;
	height: 20px;
	cursor: pointer;
}

.setting-group input[type="range"] {
	width: 100%;
	height: 8px;
	cursor: pointer;
	accent-color: var(--color-primary);
}

.setting-group output {
	font-weight: 600;
	color: var(--color-primary);
	text-align: center;
}

/* ===================================
   High Contrast Mode
   =================================== */
body.high-contrast {
	--color-background: var(--color-hc-bg);
	--color-surface: #1a1a1a;
	--color-text-primary: var(--color-hc-text);
	--color-text-secondary: #cccccc;
	--color-border: var(--color-hc-border);
	--color-focus: var(--color-hc-focus);
	--color-primary: #4da6ff;
	--color-primary-dark: #3385cc;
}

body.high-contrast::before {
	filter: grayscale(100%) contrast(1.5);
}

body.high-contrast::after {
	background-color: rgba(0, 0, 0, 0.9);
}

body.high-contrast .gallery-header,
body.high-contrast .artwork-container,
body.high-contrast .navigation-controls {
	background: rgba(0, 0, 0, 1) !important;
	border: 2px solid #ffffff !important;
}

body.high-contrast .btn-nav,
body.high-contrast .btn-primary,
body.high-contrast .btn-audio,
body.high-contrast .btn-tts,
body.high-contrast .btn-toggle {
	background: #ffffff !important;
	color: #000000 !important;
	border: 2px solid #ffffff !important;
}

body.high-contrast .btn-nav:hover,
body.high-contrast .btn-primary:hover,
body.high-contrast .btn-audio:hover,
body.high-contrast .btn-tts:hover,
body.high-contrast .btn-toggle:hover {
	background: #ffff00 !important;
	color: #000000 !important;
}

body.high-contrast .btn-tts.speaking {
	background: #ffffff !important;
	color: #000000 !important;
}

/* ===================================
   Reduced Motion
   =================================== */
body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.01ms !important;
}

/* ===================================
   Font Size Scaling
   =================================== */
html[data-font-scale="110"] {
	font-size: calc(14px * 1.1);
}

html[data-font-scale="120"] {
	font-size: calc(14px * 1.2);
}

html[data-font-scale="130"] {
	font-size: calc(14px * 1.3);
}

html[data-font-scale="140"] {
	font-size: calc(14px * 1.4);
}

html[data-font-scale="150"] {
	font-size: calc(14px * 1.5);
}

html[data-font-scale="160"] {
	font-size: calc(14px * 1.6);
}

html[data-font-scale="170"] {
	font-size: calc(14px * 1.7);
}

html[data-font-scale="180"] {
	font-size: calc(14px * 1.8);
}

html[data-font-scale="190"] {
	font-size: calc(14px * 1.9);
}

html[data-font-scale="200"] {
	font-size: calc(14px * 2);
}

/* ===================================
   Font Scale Mobile Adjustments
   =================================== */
@media (max-width: 768px) {
	html[data-font-scale="120"] .gallery-header,
	html[data-font-scale="130"] .gallery-header,
	html[data-font-scale="140"] .gallery-header,
	html[data-font-scale="150"] .gallery-header,
	html[data-font-scale="160"] .gallery-header,
	html[data-font-scale="170"] .gallery-header,
	html[data-font-scale="180"] .gallery-header,
	html[data-font-scale="190"] .gallery-header,
	html[data-font-scale="200"] .gallery-header {
		gap: var(--spacing-sm);
		padding: var(--spacing-md) var(--spacing-sm);
	}
	
	html[data-font-scale="120"] .gallery-title,
	html[data-font-scale="130"] .gallery-title,
	html[data-font-scale="140"] .gallery-title,
	html[data-font-scale="150"] .gallery-title,
	html[data-font-scale="160"] .gallery-title,
	html[data-font-scale="170"] .gallery-title,
	html[data-font-scale="180"] .gallery-title,
	html[data-font-scale="190"] .gallery-title,
	html[data-font-scale="200"] .gallery-title {
		margin-bottom: 0;
		line-height: 1.1;
	}
	
	html[data-font-scale="120"] .gallery-controls,
	html[data-font-scale="130"] .gallery-controls,
	html[data-font-scale="140"] .gallery-controls,
	html[data-font-scale="150"] .gallery-controls,
	html[data-font-scale="160"] .gallery-controls,
	html[data-font-scale="170"] .gallery-controls,
	html[data-font-scale="180"] .gallery-controls,
	html[data-font-scale="190"] .gallery-controls,
	html[data-font-scale="200"] .gallery-controls {
		gap: var(--spacing-xs);
		flex-wrap: nowrap;
	}
	
	html[data-font-scale="120"] .accessibility-group,
	html[data-font-scale="130"] .accessibility-group,
	html[data-font-scale="140"] .accessibility-group,
	html[data-font-scale="150"] .accessibility-group,
	html[data-font-scale="160"] .accessibility-group,
	html[data-font-scale="170"] .accessibility-group,
	html[data-font-scale="180"] .accessibility-group,
	html[data-font-scale="190"] .accessibility-group,
	html[data-font-scale="200"] .accessibility-group {
		display: contents;
	}
	
	html[data-font-scale="120"] .artwork-info,
	html[data-font-scale="130"] .artwork-info,
	html[data-font-scale="140"] .artwork-info,
	html[data-font-scale="150"] .artwork-info,
	html[data-font-scale="160"] .artwork-info,
	html[data-font-scale="170"] .artwork-info,
	html[data-font-scale="180"] .artwork-info,
	html[data-font-scale="190"] .artwork-info,
	html[data-font-scale="200"] .artwork-info {
		gap: var(--spacing-xl);
		margin-top: 2rem;
		padding-top: var(--spacing-lg);
	}
	
	html[data-font-scale="120"] .artwork-title,
	html[data-font-scale="130"] .artwork-title,
	html[data-font-scale="140"] .artwork-title,
	html[data-font-scale="150"] .artwork-title,
	html[data-font-scale="160"] .artwork-title,
	html[data-font-scale="170"] .artwork-title,
	html[data-font-scale="180"] .artwork-title,
	html[data-font-scale="190"] .artwork-title,
	html[data-font-scale="200"] .artwork-title {
		margin-top: var(--spacing-xl);
		padding-top: var(--spacing-md);
	}
	
	html[data-font-scale="120"] .audio-description-player,
	html[data-font-scale="130"] .audio-description-player,
	html[data-font-scale="140"] .audio-description-player,
	html[data-font-scale="150"] .audio-description-player,
	html[data-font-scale="160"] .audio-description-player,
	html[data-font-scale="170"] .audio-description-player,
	html[data-font-scale="180"] .audio-description-player,
	html[data-font-scale="190"] .audio-description-player,
	html[data-font-scale="200"] .audio-description-player {
		margin-bottom: 2rem;
		margin-top: var(--spacing-lg);
		padding-bottom: var(--spacing-md);
	}
	
	html[data-font-scale="120"] .media-container,
	html[data-font-scale="130"] .media-container,
	html[data-font-scale="140"] .media-container,
	html[data-font-scale="150"] .media-container,
	html[data-font-scale="160"] .media-container,
	html[data-font-scale="170"] .media-container,
	html[data-font-scale="180"] .media-container,
	html[data-font-scale="190"] .media-container,
	html[data-font-scale="200"] .media-container {
		min-height: 40vh;
		flex: 1 1 auto;
	}
	
	html[data-font-scale="120"] .artwork-media,
	html[data-font-scale="130"] .artwork-media,
	html[data-font-scale="140"] .artwork-media,
	html[data-font-scale="150"] .artwork-media,
	html[data-font-scale="160"] .artwork-media,
	html[data-font-scale="170"] .artwork-media,
	html[data-font-scale="180"] .artwork-media,
	html[data-font-scale="190"] .artwork-media,
	html[data-font-scale="200"] .artwork-media {
		min-height: 40vh;
		max-height: 50vh;
	}
	
	html[data-font-scale="120"] img.artwork-media,
	html[data-font-scale="130"] img.artwork-media,
	html[data-font-scale="140"] img.artwork-media,
	html[data-font-scale="150"] img.artwork-media,
	html[data-font-scale="160"] img.artwork-media,
	html[data-font-scale="170"] img.artwork-media,
	html[data-font-scale="180"] img.artwork-media,
	html[data-font-scale="190"] img.artwork-media,
	html[data-font-scale="200"] img.artwork-media {
		min-height: 40vh;
		max-height: 50vh;
	}
	
	html[data-font-scale="120"] .artwork-media-wrapper,
	html[data-font-scale="130"] .artwork-media-wrapper,
	html[data-font-scale="140"] .artwork-media-wrapper,
	html[data-font-scale="150"] .artwork-media-wrapper,
	html[data-font-scale="160"] .artwork-media-wrapper,
	html[data-font-scale="170"] .artwork-media-wrapper,
	html[data-font-scale="180"] .artwork-media-wrapper,
	html[data-font-scale="190"] .artwork-media-wrapper,
	html[data-font-scale="200"] .artwork-media-wrapper {
		min-height: 45vh;
		flex: 1 1 auto;
	}
	
	html[data-font-scale="120"] .btn-toggle,
	html[data-font-scale="130"] .btn-toggle,
	html[data-font-scale="140"] .btn-toggle,
	html[data-font-scale="150"] .btn-toggle,
	html[data-font-scale="160"] .btn-toggle,
	html[data-font-scale="170"] .btn-toggle,
	html[data-font-scale="180"] .btn-toggle,
	html[data-font-scale="190"] .btn-toggle,
	html[data-font-scale="200"] .btn-toggle {
		padding: var(--spacing-xs);
		min-width: 40px;
		justify-content: center;
	}
	
	html[data-font-scale="120"] .btn-toggle span,
	html[data-font-scale="130"] .btn-toggle span,
	html[data-font-scale="140"] .btn-toggle span,
	html[data-font-scale="150"] .btn-toggle span,
	html[data-font-scale="160"] .btn-toggle span,
	html[data-font-scale="170"] .btn-toggle span,
	html[data-font-scale="180"] .btn-toggle span,
	html[data-font-scale="190"] .btn-toggle span,
	html[data-font-scale="200"] .btn-toggle span {
		display: none;
	}
	
	html[data-font-scale="120"] .btn-font-size,
	html[data-font-scale="130"] .btn-font-size,
	html[data-font-scale="140"] .btn-font-size,
	html[data-font-scale="150"] .btn-font-size,
	html[data-font-scale="160"] .btn-font-size,
	html[data-font-scale="170"] .btn-font-size,
	html[data-font-scale="180"] .btn-font-size,
	html[data-font-scale="190"] .btn-font-size,
	html[data-font-scale="200"] .btn-font-size {
		min-width: 40px;
		width: 40px;
		height: 40px;
	}
	
	html[data-font-scale="120"] .btn-icon,
	html[data-font-scale="130"] .btn-icon,
	html[data-font-scale="140"] .btn-icon,
	html[data-font-scale="150"] .btn-icon,
	html[data-font-scale="160"] .btn-icon,
	html[data-font-scale="170"] .btn-icon,
	html[data-font-scale="180"] .btn-icon,
	html[data-font-scale="190"] .btn-icon,
	html[data-font-scale="200"] .btn-icon {
		min-width: 40px;
		width: 40px;
		height: 40px;
	}
}

/* ===================================
   Responsive Design
   =================================== */
@media (max-width: 768px) {
	/* Typography adjustments */
	.gallery-title {
		font-size: var(--font-size-lg);
	}
	
	.artwork-title {
		font-size: var(--font-size-xl);
		margin-top: var(--spacing-md);
		padding-top: var(--spacing-sm);
	}
	
	.artwork-description {
		font-size: var(--font-size-sm);
	}
	
	/* Hide keyboard shortcuts on mobile */
	.keyboard-shortcuts {
		display: none !important;
	}
	
	/* Gallery header - compact layout */
	.gallery-header {
		flex-direction: column;
		align-items: stretch;
		gap: var(--spacing-sm);
		padding: var(--spacing-md) var(--spacing-sm);
		min-height: auto;
		flex-wrap: nowrap;
	}
	
	.gallery-title {
		text-align: center;
		width: 100%;
		flex: 0 0 auto;
		margin-bottom: 0;
		order: 1;
		line-height: 1.2;
		padding: 0;
	}
	
	.gallery-controls {
		width: 100%;
		justify-content: center;
		flex-wrap: nowrap;
		gap: var(--spacing-xs);
		flex: 0 0 auto;
		order: 2;
	}
	
	.accessibility-group {
		display: contents;
	}
	
	.btn-toggle {
		flex: 0 0 auto;
		white-space: nowrap;
		padding: var(--spacing-xs);
		min-width: 40px;
	}
	
	.btn-toggle span {
		display: none;
	}
	
	.btn-icon {
		flex-shrink: 0;
		min-width: 40px;
		width: 40px;
		height: 40px;
	}
	
	.btn-font-size {
		min-width: 40px;
		width: 40px;
		height: 40px;
		padding: var(--spacing-xs);
	}
	
	/* Main content adjustments */
	.main-content {
		gap: var(--spacing-md);
		padding: var(--spacing-md) var(--spacing-sm);
	}
	
	/* Buttons - larger touch targets */
	.btn-font-size,
	.btn-toggle,
	.btn-icon,
	.btn-tts,
	.btn-audio,
	.btn-nav {
		min-height: 44px;
		min-width: 44px;
		padding: var(--spacing-sm);
	}
	
	/* Navigation - full width buttons */
	.navigation-controls {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--spacing-sm);
		padding: var(--spacing-md);
	}
	
	.btn-nav {
		font-size: var(--font-size-sm);
	}
	
	/* Artwork container - single column */
	.artwork-container {
		padding: var(--spacing-md);
		gap: var(--spacing-md);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	
	.artwork-info {
		gap: var(--spacing-lg);
		overflow-y: visible;
		margin-top: var(--spacing-2xl);
		padding-top: var(--spacing-md);
		clear: both;
		position: relative;
		z-index: 2;
	}
	
	.artwork-description {
		max-height: none;
		overflow-y: visible;
	}
	
	/* Media - adjust for mobile */
	.artwork-media-wrapper {
		gap: var(--spacing-sm);
		flex: 1 1 auto;
		min-height: 40vh;
	}
	
	.audio-description-player {
		margin-bottom: var(--spacing-2xl);
		margin-top: var(--spacing-md);
		clear: both;
		position: relative;
		z-index: 1;
	}
	
	.media-container {
		border-radius: var(--radius-md);
		min-height: 35vh;
		flex: 1 1 auto;
	}
	
	img.artwork-media {
		width: 100%;
		height: 100%;
		min-height: 35vh;
		max-height: 50vh;
	}
	
	.artwork-media {
		width: 100%;
		height: 100%;
		min-height: 35vh;
		max-height: 50vh;
	}
	
	/* Audio player - stack controls */
	.audio-controls {
		flex-direction: column;
		gap: var(--spacing-sm);
	}
	
	.audio-progress {
		order: -1;
		width: 100%;
	}
	
	.audio-time {
		text-align: center;
		width: 100%;
	}
	
	/* Activity link - full width */
	.btn-activity-link {
		width: 100%;
		justify-content: center;
	}
	
	/* Position indicator - larger */
	.position-indicator {
		font-size: var(--font-size-md);
		padding: var(--spacing-xs) var(--spacing-sm);
	}
	
	/* Modal - full screen on mobile */
	.modal-content {
		width: 95%;
		max-width: 95%;
		max-height: 90vh;
		margin: var(--spacing-md);
	}
	
	.modal-body {
		max-height: calc(90vh - 100px);
	}
}

/* Extra small devices (phones in portrait) */
@media (max-width: 480px) {
	:root {
		--font-size-base: 13px;
	}
	
	.gallery-title {
		font-size: var(--font-size-md);
	}
	
	.artwork-title {
		font-size: var(--font-size-lg);
	}
	
	.btn-nav .btn-text {
		font-size: 0.75rem;
	}
	
	/* Stack navigation vertically on very small screens */
	.navigation-controls {
		grid-template-columns: 1fr;
		gap: var(--spacing-xs);
		padding: var(--spacing-sm);
	}
}

/* ===================================
   Print Styles
   =================================== */
@media print {
	.gallery-controls,
	.navigation-controls,
	.audio-description-player,
	.keyboard-shortcuts,
	.modal,
	.skip-link {
		display: none !important;
	}
	
	body::after {
		display: none;
	}
	
	.artwork-container {
		break-inside: avoid;
	}
}