@media (max-width: 768px) {
	#nav-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#sidebar {
		transform: translateX(-100%);
		transition: transform var(--duration-slow) var(--ease-out-expo);
		width: min(var(--sidebar-width), calc(100vw - 56px));
	}

	body.sidebar-open #sidebar {
		transform: translateX(0);
	}

	body.sidebar-open #sidebar-backdrop {
		display: block;
	}

	#lesson-content {
		margin-left: 0;
		padding: var(--space-7) var(--space-4);
		padding-top: 64px;
	}

	.nav-item {
		padding: var(--space-3) var(--space-4);
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	pre {
		box-shadow: var(--shadow-panel), inset -12px 0 8px -12px rgba(0, 0, 0, 0.4);
	}

	#lesson-content table {
		box-shadow: inset -12px 0 8px -12px rgba(0, 0, 0, 0.4);
	}
}

@media (max-width: 640px) {
	#lesson-content {
		padding: var(--space-6) var(--space-4);
		padding-top: 64px;
	}

	#lesson-content h1 {
		font-size: 25px;
	}

	.lesson-nav a {
		min-width: 120px;
		font-size: var(--font-sm);
	}
}

@media (max-width: 560px) {
	#lesson-content {
		padding: var(--space-5) var(--space-3);
		padding-top: 64px;
	}

	#lesson-content h1 {
		font-size: 23px;
	}

	#lesson-content h2 {
		font-size: 20px;
	}

	.lesson-meta {
		flex-wrap: wrap;
		gap: var(--space-1);
	}

	#lesson-content ul,
	#lesson-content ol {
		padding-left: var(--space-4);
	}

	.lesson-nav {
		flex-direction: column;
	}

	.lesson-nav a {
		width: 100%;
		text-align: center;
	}

	.lesson-nav .nav-placeholder {
		display: none;
	}
}

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

/* Lesson content entrance animation */
@media (prefers-reduced-motion: no-preference) {
	@keyframes lesson-enter {
		from {
			opacity: 0;
			transform: translateY(8px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	#lesson-content.loading {
		opacity: 0;
	}

	#lesson-content.loaded {
		animation: lesson-enter 0.3s var(--ease-out-expo) forwards;
	}
}