:root {
            /* Material You dynamic color system - will be overridden by config.js */
            --primary: #6750A4;
            --on-primary: #FFFFFF;
            --primary-container: #EADDFF;
            --on-primary-container: #21005D;
            --secondary: #625B71;
            --on-secondary: #FFFFFF;
            --secondary-container: #E8DEF8;
            --on-secondary-container: #1D192B;
            --tertiary: #7D5260;
            --on-tertiary: #FFFFFF;
            --surface: #FEF7FF;
            --on-surface: #1D1B20;
            --surface-variant: #E7E0EC;
            --on-surface-variant: #49454F;
            --outline: #79747E;
            
            /* Add missing RGB values for header background */
            --surface-rgb: 254, 247, 255;
            
            --animation-speed: 0.4s;
            --border-radius: 24px;
            --elevation: 0 3px 6px rgba(0,0,0,0.1);
            --hover-elevation: 0 8px 16px rgba(0,0,0,0.15);
        }

        @media (prefers-color-scheme: dark) {
            :root {
                /* Dark mode colors - will be overridden by config.js */
                --primary: #D0BCFF;
                --on-primary: #381E72;
                --primary-container: #4F378B;
                --on-primary-container: #EADDFF;
                --secondary: #CCC2DC;
                --on-secondary: #332D41;
                --secondary-container: #4A4458;
                --on-secondary-container: #E8DEF8;
                --tertiary: #EFB8C8;
                --on-tertiary: #492532;
                --surface: #141218;
                --on-surface: #E6E0E9;
                --surface-variant: #49454F;
                --on-surface-variant: #CAC4D0;
                --outline: #938F99;

                /* Dark mode RGB */
                --surface-rgb: 20, 18, 24;

                --elevation: 0 6px 12px rgba(0,0,0,0.3);
                --hover-elevation: 0 12px 24px rgba(0,0,0,0.4);
            }
        }

        * {
            font-family: 'Roboto Flex', sans-serif;
        }
        html {
            scroll-behavior: smooth;
        }
        body {
            background-color: var(--surface);
            color: var(--on-surface);
            line-height: 1.6;
            overflow-x: hidden;
        }
        /* Page Transitions */
        #app {
            opacity: 1;
            transform: translateY(0);
            transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            will-change: opacity, transform;
            padding-left: 17.5em;
            padding-right: 17.5em;
        }

        #app.fade-out {
            opacity: 0;
            transform: translateY(20px);
            pointer-events: none;
        }

        #app.fade-in {
            opacity: 1;
            transform: translateY(0);
        }
        /* Animations */
        @keyframes float {
            0% {
                transform: translateY(-50%) rotate(0deg);
            }
            50% {
                transform: translateY(-55%) rotate(5deg);
            }
            100% {
                transform: translateY(-50%) rotate(0deg);
            }
        }

        @keyframes pulse {
            0% {
                opacity: 0.1;
            }
            50% {
                opacity: 0.2;
            }
            100% {
                opacity: 0.1;
            }
        }

        .me{
            text-decoration: none;
            color: white;
        }

        /* Screenshots carousel */
#screenshots {
	/* Shot size variables for consistent centering */
	--shot-w: 240px;
	--shot-h: 560px; /* 240 * 21 / 9 = 560 */
}
#screenshots h4 {
	color: #fff;
	margin-bottom: 3rem;
}
#screenshots .carousel {
	position: relative;
	height: 600px;
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 1200px;
	touch-action: pan-y; /* allow horizontal swipe without interfering with page scroll */
}

#screenshots .carousel.smooth .carousel-track {
	/* hint compositor to keep this layer */
	will-change: transform;
}

#screenshots .carousel.smooth .carousel-slide {
	/* Force visibility to stay visible and let opacity animate the hide/show */
	visibility: visible !important;
	/* Smoother animation and less flicker */
	will-change: transform, opacity, filter;
	backface-visibility: hidden;
	transform-style: preserve-3d;
	transition:
		transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		filter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#screenshots .carousel.smooth .carousel-slide img {
	/* Reduce texture popping during transforms */
	will-change: transform, opacity;
}

/* Respect reduced motion: minimize transforms, keep quick fades */
@media (prefers-reduced-motion: reduce) {
	#screenshots .carousel.smooth .carousel-slide {
		transition:
			transform 0s linear,
			opacity 200ms linear,
			filter 200ms linear;
	}
}

#screenshots .carousel-slide {
	position: absolute;
	transform-origin: center center;
	transition:
		transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		filter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	width: var(--shot-w);
	height: var(--shot-h);
	left: 50%;
	top: 50%;
	margin-left: calc(var(--shot-w) / -2);
	margin-top: calc(var(--shot-h) / -2);
}
#screenshots .carousel-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 9 / 21;
	border-radius: 24px;
	display: block;
	box-shadow:
		0 20px 40px rgba(0,0,0,0.35),
		0 0 0 1px rgba(255,255,255,0.08) inset;
}

/* Navigation buttons */
#screenshots .nav {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	pointer-events: none;
	z-index: 10;
}
#screenshots .nav button {
	pointer-events: auto;
	border: none;
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: all 0.3s ease;
	margin: 0 1rem;
}
#screenshots .nav button:hover {
	transform: scale(1.1);
}
#screenshots .nav button:disabled {
	opacity: 0.3;
	cursor: default;
	transform: none;
}

/* Pagination dots */
#screenshots .pagination {
	position: absolute;
	bottom: -15px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 0;
	z-index: 10;
}
#screenshots .pagination:empty {
	display: none; /* avoid flicker before JS builds dots */
}
#screenshots .pagination .dot {
	height: 0.25rem;
	background: rgba(255,255,255,0.15);
	cursor: pointer;
	transition: all 0.3s ease;
	border: none;
}
#screenshots .pagination .dot:focus-visible {
	outline: 2px solid #4fc3f7;
	outline-offset: 2px;
}
#screenshots .pagination .dot.active {
	background: var(--tertiary);
	transform: scale(1.2);
}

/* Feature card aspect ratio */
.feature-card {
	aspect-ratio: 6 / 2.8;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	min-width: 0;
}

/* Ensure card content scales and aligns */
.feature-card .row {
	flex: 1 1 auto;
	align-items: center;
}

/* Responsive: allow cards to shrink on mobile */
@media (max-width: 700px) {
	.feature-card {
		aspect-ratio: 6 / 3;
	}
}

/* Responsive adjustments */
@media (max-width: 768px) {
	#screenshots .carousel { height: 336px; }
	/* Smaller shot size; centering remains correct via variables */
	#screenshots { --shot-w: 144px; --shot-h: 336px; } /* 144 * 21 / 9 = 336 */
	/* img already uses 100% of slide */
}

/* Responsive app padding - consolidated breakpoints */
@media (max-width: 1400px) { #app { padding-left: 8em; padding-right: 8em; } }
@media (max-width: 1100px) { #app { padding-left: 4em; padding-right: 4em; } }
@media (max-width: 900px) { #app { padding-left: 2em; padding-right: 2em; } }
@media (max-width: 700px) { #app { padding-left: 1em; padding-right: 1em; } }
@media (max-width: 500px) { #app { padding-left: 0.5em; padding-right: 0.5em; } }
@media (max-width: 350px) { #app { padding-left: 0.25em; padding-right: 0.25em; } }