/* =================================
	   Typography System
	   ================================= */
	:root {
		--font-display:
			"Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display",
			system-ui, sans-serif;
		--font-body:
			"Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text",
			system-ui, sans-serif;
		--font-mono: "SF Mono", "Fira Code", "Consolas", monospace;

		/* Spacing Scale */
		--space-xs: 0.25rem;
		--space-sm: 0.5rem;
		--space-md: 1rem;
		--space-lg: 1.5rem;
		--space-xl: 2rem;
		--space-2xl: 3rem;
		--space-3xl: 4rem;

		/* Easing */
		--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
		--ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	/* =================================
	   Backdrop
	   ================================= */
	.sidebar-backdrop.svelte-1gpls4x {
		position: fixed;
		inset: 0;
		z-index: 40;
		background: rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(12px) saturate(150%);
		-webkit-backdrop-filter: blur(12px) saturate(150%);
	}

	/* =================================
	   Sidebar Panel
	   ================================= */
	.sidebar-panel.svelte-1gpls4x {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 50;
		display: flex;
		justify-content: center;
		padding-top: 3rem;
		max-height: 100vh;
		overflow-y: auto;
	}

	.sidebar-panel.closing.svelte-1gpls4x {
		pointer-events: none;
	}

	.sidebar-inner.svelte-1gpls4x {
		width: 100%;
		max-width: 80rem;
		margin: 0 1rem;
		background: rgb(255, 255, 255);
		border-radius: 1.25rem;
		box-shadow:
			0 0 0 1px rgba(0, 0, 0, 0.03),
			0 4px 6px -1px rgba(0, 0, 0, 0.05),
			0 20px 40px -8px rgba(0, 0, 0, 0.12);
		overflow: hidden;
	}

	.dark .sidebar-inner.svelte-1gpls4x {
		background: rgb(18, 18, 20);
		box-shadow:
			0 0 0 1px rgba(255, 255, 255, 0.05),
			0 4px 6px -1px rgba(0, 0, 0, 0.2),
			0 20px 40px -8px rgba(0, 0, 0, 0.5);
	}

	/* =================================
	   Grid Layout
	   ================================= */
	.sidebar-grid.svelte-1gpls4x {
		display: grid;
		grid-template-columns: 1fr;
		min-height: 24rem;
	}

	@media (min-width: 1024px) {
		.sidebar-grid.svelte-1gpls4x {
			grid-template-columns: 1fr 1.2fr;
		}
	}

	/* =================================
	   Left Column
	   ================================= */
	.sidebar-left.svelte-1gpls4x {
		display: none;
		flex-direction: column;
		justify-content: center;
		gap: var(--space-xl);
		padding: var(--space-3xl);
		border-right: 1px solid rgba(0, 0, 0, 0.04);
	}

	.dark .sidebar-left.svelte-1gpls4x {
		border-right-color: rgba(255, 255, 255, 0.04);
	}

	@media (min-width: 1024px) {
		.sidebar-left.svelte-1gpls4x {
			display: flex;
		}
	}

	/* Brand Block */
	.brand-block.svelte-1gpls4x {
		display: flex;
		flex-direction: column;
		gap: var(--space-sm);
	}

	.brand-btn.svelte-1gpls4x {
		display: flex;
		flex-direction: column;
		gap: 0;
		padding: 0;
		border: none;
		background: transparent;
		text-align: left;
		cursor: pointer;
	}

	.brand-name.svelte-1gpls4x {
		font-family: var(--font-display);
		font-size: 2.75rem;
		font-weight: 900;
		letter-spacing: -0.04em;
		text-transform: uppercase;
		color: rgb(9, 9, 11);
		line-height: 0.9;
		transition: opacity 150ms ease;
	}

	.dark .brand-name.svelte-1gpls4x {
		color: rgb(250, 250, 250);
	}

	.brand-btn.svelte-1gpls4x:hover .brand-name:where(.svelte-1gpls4x) {
		opacity: 0.6;
	}

	.brand-tagline.svelte-1gpls4x {
		font-family: var(--font-body);
		font-size: 1rem;
		font-weight: 300;
		letter-spacing: 0.01em;
		color: rgb(113, 113, 122);
	}

	.dark .brand-tagline.svelte-1gpls4x {
		color: rgb(113, 113, 122);
	}

	.brand-meta.svelte-1gpls4x {
		display: flex;
		align-items: center;
		gap: var(--space-sm);
		margin-top: var(--space-xs);
	}

	.meta-date.svelte-1gpls4x,
	.meta-location.svelte-1gpls4x {
		font-size: 0.75rem;
		font-weight: 500;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		color: rgb(161, 161, 170);
	}

	.meta-divider.svelte-1gpls4x {
		color: rgb(212, 212, 216);
	}

	.dark .meta-divider.svelte-1gpls4x {
		color: rgb(63, 63, 70);
	}

	/* Contact Block */
	.contact-block.svelte-1gpls4x {
		display: flex;
		flex-direction: column;
		gap: var(--space-md);
	}

	.contact-text.svelte-1gpls4x {
		margin: 0;
		font-size: 0.75rem;
		font-weight: 400;
		line-height: 1.6;
		color: rgb(82, 82, 91);
		max-width: 22ch;
	}

	.dark .contact-text.svelte-1gpls4x {
		color: rgb(161, 161, 170);
	}

	/* (unused) .contact-email-btn {
		display: inline-flex;
		align-items: center;
		gap: var(--space-sm);
		padding: 0.625rem 1rem;
		border: 1px solid rgba(0, 0, 0, 0.08);
		border-radius: 0.5rem;
		background: transparent;
		font-size: 0.75rem;
		font-weight: 500;
		color: rgb(24, 24, 27);
		text-decoration: none;
		transition: all 150ms ease;
	}*/

	/* (unused) :global(.dark) .contact-email-btn {
		border-color: rgba(255, 255, 255, 0.08);
		color: rgb(250, 250, 250);
	}*/

	/* (unused) .contact-email-btn:hover {
		background: rgb(24, 24, 27);
		border-color: rgb(24, 24, 27);
		color: rgb(255, 255, 255);
	}*/

	/* (unused) :global(.dark) .contact-email-btn:hover {
		background: rgb(250, 250, 250);
		border-color: rgb(250, 250, 250);
		color: rgb(24, 24, 27);
	}*/

	/* (unused) .email-icon {
		width: 1rem;
		height: 1rem;
		opacity: 0.6;
	}*/

	/* Social Block */
	.social-block.svelte-1gpls4x {
		display: flex;
		flex-direction: column;
		gap: var(--space-md);
	}

	.social-label.svelte-1gpls4x {
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: rgb(161, 161, 170);
	}

	.social-grid.svelte-1gpls4x {
		display: flex;
		gap: var(--space-sm);
	}

	.social-link.svelte-1gpls4x {
		display: flex;
		align-items: center;
		gap: var(--space-xs);
		padding: 0.5rem 0.75rem;
		border-radius: 0.5rem;
		background: rgb(244, 244, 245);
		color: rgb(63, 63, 70);
		text-decoration: none;
		transition: all 150ms ease;
	}

	.dark .social-link.svelte-1gpls4x {
		background: rgb(39, 39, 42);
		color: rgb(212, 212, 216);
	}

	.social-link.svelte-1gpls4x:hover {
		background: rgb(24, 24, 27);
		color: rgb(255, 255, 255);
		transform: translateY(-2px);
	}

	.dark .social-link.svelte-1gpls4x:hover {
		background: rgb(63, 63, 70);
	}

	/* (unused) .social-link svg {
		width: 0.875rem;
		height: 0.875rem;
	}*/

	.social-name.svelte-1gpls4x {
		font-size: 0.75rem;
		font-weight: 500;
	}

	/* Links CTA */
	.links-cta.svelte-1gpls4x {
		display: inline-flex;
		align-items: center;
		gap: var(--space-sm);
		margin-top: auto;
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: rgb(24, 24, 27);
		text-decoration: none;
		transition: gap 200ms ease;
	}

	.dark .links-cta.svelte-1gpls4x {
		color: rgb(250, 250, 250);
	}

	.links-cta.svelte-1gpls4x:hover {
		gap: var(--space-md);
	}

	.cta-icon.svelte-1gpls4x {
		width: 0.875rem;
		height: 0.875rem;
	}

	/* =================================
	   Right Column: Navigation
	   ================================= */
	.sidebar-nav.svelte-1gpls4x {
		position: relative;
		padding: var(--space-xl);
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	@media (min-width: 1024px) {
		.sidebar-nav.svelte-1gpls4x {
			padding: var(--space-3xl);
		}
	}

	/* Scroll Container */
	.nav-scroll-container.svelte-1gpls4x {
		max-height: 16rem; /* Approximately 2 items */
		overflow-y: auto;
		overflow-x: hidden;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;

		/* Custom scrollbar */
		scrollbar-width: thin;
		scrollbar-color: rgba(113, 113, 122, 0.3) transparent;
	}

	@media (min-width: 768px) {
		.nav-scroll-container.svelte-1gpls4x {
			max-height: 18rem; /* Slightly taller on larger screens */
		}
	}

	/* Webkit scrollbar styling */
	.nav-scroll-container.svelte-1gpls4x::-webkit-scrollbar {
		width: 4px;
	}

	.nav-scroll-container.svelte-1gpls4x::-webkit-scrollbar-track {
		background: transparent;
	}

	.nav-scroll-container.svelte-1gpls4x::-webkit-scrollbar-thumb {
		background: rgba(113, 113, 122, 0.25);
		border-radius: 999px;
		transition: background 200ms ease;
	}

	.nav-scroll-container.svelte-1gpls4x::-webkit-scrollbar-thumb:hover {
		background: rgba(113, 113, 122, 0.5);
	}

	.dark .nav-scroll-container.svelte-1gpls4x::-webkit-scrollbar-thumb {
		background: rgba(161, 161, 170, 0.2);
	}

	.dark .nav-scroll-container.svelte-1gpls4x::-webkit-scrollbar-thumb:hover {
		background: rgba(161, 161, 170, 0.4);
	}

	/* Scroll Hint Indicators */
	.nav-scroll-hint.svelte-1gpls4x {
		pointer-events: none;
	}

	.nav-scroll-hint-top.svelte-1gpls4x {
		position: absolute;
		top: var(--space-xl);
		left: var(--space-xl);
		right: var(--space-xl);
		height: 2rem;
		background: linear-gradient(
			to bottom,
			rgb(255, 255, 255) 0%,
			transparent 100%
		);
		z-index: 10;
		opacity: 0;
		transition: opacity 200ms ease;
	}

	.dark .nav-scroll-hint-top.svelte-1gpls4x {
		background: linear-gradient(
			to bottom,
			rgb(18, 18, 20) 0%,
			transparent 100%
		);
	}

	@media (min-width: 1024px) {
		.nav-scroll-hint-top.svelte-1gpls4x {
			top: var(--space-3xl);
			left: var(--space-3xl);
			right: var(--space-3xl);
		}
	}

	.nav-scroll-hint-bottom.svelte-1gpls4x {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-sm);
		padding: var(--space-md) 0;
		margin-top: var(--space-sm);
	}

	.scroll-hint-text.svelte-1gpls4x {
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: rgb(161, 161, 170);
	}

	.dark .scroll-hint-text.svelte-1gpls4x {
		color: rgb(113, 113, 122);
	}

	/* (unused) .scroll-hint-icon {
		width: 0.875rem;
		height: 0.875rem;
		color: rgb(161, 161, 170);
		animation: bounce-down 1.5s ease-in-out infinite;
	}*/

	/* (unused) :global(.dark) .scroll-hint-icon {
		color: rgb(113, 113, 122);
	}*/

	@keyframes svelte-1gpls4x-bounce-down {
		0%,
		100% {
			transform: translateY(0);
		}
		50% {
			transform: translateY(4px);
		}
	}

	.nav-list.svelte-1gpls4x {
		display: flex;
		flex-direction: column;
		gap: 0;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.nav-item.svelte-1gpls4x {
		position: relative;
		border-bottom: 1px solid rgba(0, 0, 0, 0.04);
	}

	.dark .nav-item.svelte-1gpls4x {
		border-bottom-color: rgba(255, 255, 255, 0.04);
	}

	.nav-item.svelte-1gpls4x:last-child {
		border-bottom: none;
	}

	.nav-link.svelte-1gpls4x {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--space-lg) 0;
		padding-left: var(--space-lg);
		text-decoration: none;
		transition: all 250ms var(--ease-out-expo);
	}

	/* Hover indicator line */
	.nav-link.svelte-1gpls4x::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%) scaleY(0);
		width: 3px;
		height: 60%;
		background: rgb(24, 24, 27);
		border-radius: 999px;
		transition: transform 250ms var(--ease-out-expo);
		transform-origin: center;
	}

	.dark .nav-link.svelte-1gpls4x::before {
		background: rgb(250, 250, 250);
	}

	.nav-link.active.svelte-1gpls4x::before {
		transform: translateY(-50%) scaleY(1);
	}

	.nav-link.active.svelte-1gpls4x {
		padding-left: calc(var(--space-lg) + var(--space-md));
		background: linear-gradient(
			90deg,
			rgba(0, 0, 0, 0.02) 0%,
			transparent 100%
		);
	}

	.dark .nav-link.active.svelte-1gpls4x {
		background: linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.03) 0%,
			transparent 100%
		);
	}

	.nav-content.svelte-1gpls4x {
		display: flex;
		align-items: baseline;
		gap: var(--space-lg);
	}

	.nav-number.svelte-1gpls4x {
		font-family: var(--font-mono);
		font-size: 0.75rem;
		font-weight: 500;
		color: rgb(161, 161, 170);
		transition: color 150ms ease;
	}

	.dark .nav-number.svelte-1gpls4x {
		color: rgb(82, 82, 91);
	}

	.nav-link.active.svelte-1gpls4x .nav-number:where(.svelte-1gpls4x) {
		color: rgb(24, 24, 27);
	}

	.dark .nav-link.active.svelte-1gpls4x .nav-number:where(.svelte-1gpls4x) {
		color: rgb(250, 250, 250);
	}

	.nav-info.svelte-1gpls4x {
		display: flex;
		flex-direction: column;
		gap: 0.125rem;
	}

	.nav-name.svelte-1gpls4x {
		position: relative;
		font-family: var(--font-display);
		font-size: clamp(1.75rem, 6vw, 3.5rem);
		font-weight: 800;
		letter-spacing: -0.03em;
		text-transform: uppercase;
		color: rgb(24, 24, 27);
		line-height: 1;
		transform-origin: left center;
		transform: scale(1);
		transition:
			color 200ms ease,
			transform 300ms var(--ease-out-back);
	}

	/* Hover out: bounce back from small to large */
	@keyframes svelte-1gpls4x-bounce-back {
		0% {
			transform: scale(0.92);
		}
		50% {
			transform: scale(1.03);
		}
		100% {
			transform: scale(1);
		}
	}

	/* Hover in: shrink from large to small */
	.nav-link.active.svelte-1gpls4x .nav-name:where(.svelte-1gpls4x) {
		transform: scale(0.92);
	}

	/* When hover ends, play bounce-back animation */
	.nav-link.svelte-1gpls4x:not(.active) .nav-name:where(.svelte-1gpls4x) {
		animation: svelte-1gpls4x-bounce-back 350ms var(--ease-out-back) forwards;
	}

	/* Underline animation */
	.nav-name.svelte-1gpls4x::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: -2px;
		width: 100%;
		height: 3px;
		background: rgb(24, 24, 27);
		border-radius: 999px;
		transform: scaleX(0);
		transform-origin: right;
		transition: transform 300ms var(--ease-out-expo);
	}

	.dark .nav-name.svelte-1gpls4x::after {
		background: rgb(250, 250, 250);
	}

	.nav-link.active.svelte-1gpls4x .nav-name:where(.svelte-1gpls4x)::after {
		transform: scaleX(1);
		transform-origin: left;
	}

	.dark .nav-name.svelte-1gpls4x {
		color: rgb(250, 250, 250);
	}

	/* Slight color shift on hover */
	.nav-link.active.svelte-1gpls4x .nav-name:where(.svelte-1gpls4x) {
		color: rgb(9, 9, 11);
	}

	.dark .nav-link.active.svelte-1gpls4x .nav-name:where(.svelte-1gpls4x) {
		color: rgb(255, 255, 255);
	}

	.nav-desc.svelte-1gpls4x {
		font-size: 0.75rem;
		font-weight: 400;
		letter-spacing: 0.02em;
		color: rgb(113, 113, 122);
		opacity: 0;
		transform: translateX(-8px);
		transition: all 250ms var(--ease-out-expo);
	}

	.dark .nav-desc.svelte-1gpls4x {
		color: rgb(161, 161, 170);
	}

	.nav-link.active.svelte-1gpls4x .nav-desc:where(.svelte-1gpls4x) {
		opacity: 1;
		transform: translateX(0);
	}

	.nav-arrow.svelte-1gpls4x {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.5rem;
		height: 2.5rem;
		border-radius: 50%;
		background: transparent;
		opacity: 0;
		transform: translateX(-12px);
		transition: all 300ms var(--ease-out-expo);
	}

	.nav-link.active.svelte-1gpls4x .nav-arrow:where(.svelte-1gpls4x) {
		opacity: 1;
		transform: translateX(0);
		background: rgba(0, 0, 0, 0.04);
	}

	.dark .nav-link.active.svelte-1gpls4x .nav-arrow:where(.svelte-1gpls4x) {
		background: rgba(255, 255, 255, 0.06);
	}

	.nav-arrow.svelte-1gpls4x svg:where(.svelte-1gpls4x) {
		width: 1.25rem;
		height: 1.25rem;
		color: rgb(24, 24, 27);
		transition: transform 200ms ease;
	}

	.nav-link.active.svelte-1gpls4x .nav-arrow:where(.svelte-1gpls4x) svg:where(.svelte-1gpls4x) {
		transform: translateX(2px);
	}

	.dark .nav-arrow.svelte-1gpls4x svg:where(.svelte-1gpls4x) {
		color: rgb(250, 250, 250);
	}

	/* =================================
	   Mobile Footer
	   ================================= */
	.mobile-footer.svelte-1gpls4x {
		display: flex;
		justify-content: center;
		padding: var(--space-lg);
		border-top: 1px solid rgba(0, 0, 0, 0.04);
	}

	.dark .mobile-footer.svelte-1gpls4x {
		border-top-color: rgba(255, 255, 255, 0.04);
	}

	@media (min-width: 1024px) {
		.mobile-footer.svelte-1gpls4x {
			display: none;
		}
	}

	.mobile-behance.svelte-1gpls4x {
		display: flex;
		align-items: center;
		gap: var(--space-sm);
		font-size: 0.75rem;
		font-weight: 400;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		color: rgb(113, 113, 122);
		text-decoration: none;
		transition: color 150ms ease;
	}

	.mobile-behance.svelte-1gpls4x:hover {
		color: rgb(24, 24, 27);
	}

	.dark .mobile-behance.svelte-1gpls4x:hover {
		color: rgb(250, 250, 250);
	}

	.mobile-behance.svelte-1gpls4x strong:where(.svelte-1gpls4x) {
		font-weight: 700;
	}

	.mobile-behance.svelte-1gpls4x svg:where(.svelte-1gpls4x) {
		width: 0.75rem;
		height: 0.75rem;
	}

	/* =================================
	   Reduced Motion
	   ================================= */
	@media (prefers-reduced-motion: reduce) {
		.sidebar-backdrop.svelte-1gpls4x,
		.sidebar-panel.svelte-1gpls4x,
		.nav-link.svelte-1gpls4x,
		.nav-desc.svelte-1gpls4x,
		.nav-arrow.svelte-1gpls4x /* (unused) .pill-btn,
		.blog-btn*/,
		.social-link.svelte-1gpls4x /* (unused) .contact-email-btn*/ {
			transition: none;
		}
	}

	/* =================================
	   Footer Bar Wrapper
	   Premium Floating Container
	   ================================= */
	.footer-bar-wrapper.svelte-1snn0kt {
		position: fixed;
		bottom: 1rem;
		right: 1rem;
		z-index: 40;
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
	}

	/* =================================
	   Footer Bar Container
	   Glassmorphism Pill Design
	   ================================= */
	.footer-bar-container.svelte-1snn0kt {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.25rem;
		padding: 0.375rem;
		background: rgba(255, 255, 255, 0.85);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border: 1px solid rgba(228, 228, 231, 0.8);
		border-radius: 0.75rem;
		box-shadow:
			0 4px 6px -1px rgba(0, 0, 0, 0.05),
			0 2px 4px -2px rgba(0, 0, 0, 0.05),
			0 0 0 1px rgba(0, 0, 0, 0.02);
		transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	}

	/* Dark mode styling */
	.dark .footer-bar-container.svelte-1snn0kt {
		background: rgba(24, 24, 27, 0.9);
		border-color: rgba(63, 63, 70, 0.6);
		box-shadow:
			0 4px 6px -1px rgba(0, 0, 0, 0.3),
			0 2px 4px -2px rgba(0, 0, 0, 0.2),
			0 0 0 1px rgba(255, 255, 255, 0.03);
	}

	/* Hover state for container */
	.footer-bar-container.svelte-1snn0kt:hover {
		box-shadow:
			0 10px 15px -3px rgba(0, 0, 0, 0.08),
			0 4px 6px -4px rgba(0, 0, 0, 0.05),
			0 0 0 1px rgba(0, 0, 0, 0.03);
	}

	.dark .footer-bar-container.svelte-1snn0kt:hover {
		box-shadow:
			0 10px 15px -3px rgba(0, 0, 0, 0.4),
			0 4px 6px -4px rgba(0, 0, 0, 0.3),
			0 0 0 1px rgba(255, 255, 255, 0.05);
	}

	/* =================================
	   Action Buttons Group
	   ================================= */
	.footer-bar-actions.svelte-1snn0kt {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.125rem;
	}

	/* =================================
	   Divider Line
	   ================================= */
	.footer-bar-divider.svelte-1snn0kt {
		width: 1px;
		height: 1.5rem;
		background: rgba(228, 228, 231, 0.8);
		margin: 0 0.25rem;
	}

	.dark .footer-bar-divider.svelte-1snn0kt {
		background: rgba(63, 63, 70, 0.6);
	}

	/* =================================
	   Custom Buttons
	   ================================= */
	.footer-bar-btn.svelte-1snn0kt {
		width: 2rem;
		height: 2rem;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 0.5rem;
		color: rgb(82, 82, 91);
		transition: all 0.2s ease;
		cursor: pointer;
		border: none;
		background: transparent;
	}

	.dark .footer-bar-btn.svelte-1snn0kt {
		color: rgb(161, 161, 170);
	}

	.footer-bar-btn.svelte-1snn0kt:hover {
		background: rgba(0, 0, 0, 0.05);
		color: rgb(24, 24, 27);
	}

	.dark .footer-bar-btn.svelte-1snn0kt:hover {
		background: rgba(255, 255, 255, 0.05);
		color: rgb(250, 250, 250);
	}

	.footer-bar-divider-mini.svelte-1snn0kt {
		width: 1px;
		height: 1rem;
		background: rgba(228, 228, 231, 0.8);
		margin: 0 0.125rem;
	}

	.dark .footer-bar-divider-mini.svelte-1snn0kt {
		background: rgba(63, 63, 70, 0.6);
	}

	/* =================================
	   Responsive Adjustments
	   ================================= */
	@media (max-width: 640px) {
		.footer-bar-wrapper.svelte-1snn0kt {
			bottom: 0.75rem;
			right: 0.75rem;
		}

		.footer-bar-container.svelte-1snn0kt {
			padding: 0.25rem;
			gap: 0.125rem;
		}
	}

	@keyframes svelte-1uz5r03-loading-bar {
		0% {
			transform: translateX(-100%);
		}
		100% {
			transform: translateX(300%);
		}
	}

	.user-dropdown-trigger.svelte-1jpiivj {
		display: flex;
		align-items: center;
		gap: 0.625rem;
		padding: 0.35rem 0.75rem 0.35rem 0.35rem;
		border-radius: 2rem;
		background: rgba(255, 255, 255, 0.4);
		backdrop-filter: blur(20px) saturate(180%);
		border: 1px solid rgba(0, 0, 0, 0.04);
		box-shadow:
			0 1px 2px rgba(0, 0, 0, 0.01),
			0 4px 12px -2px rgba(0, 0, 0, 0.02);
		transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
		cursor: pointer;
		position: relative;
		overflow: hidden;
		color: rgb(63, 63, 70);
	}

	.dark .user-dropdown-trigger.svelte-1jpiivj {
		background: rgba(18, 18, 20, 0.5);
		border-color: rgba(255, 255, 255, 0.05);
		box-shadow:
			0 1px 2px rgba(0, 0, 0, 0.1),
			0 4px 16px -4px rgba(0, 0, 0, 0.2);
		color: rgb(161, 161, 170);
	}

	.user-dropdown-trigger.svelte-1jpiivj:hover {
		transform: translateY(-1px);
		background: rgba(255, 255, 255, 0.8);
		border-color: rgba(0, 0, 0, 0.08);
		box-shadow:
			0 1px 2px rgba(0, 0, 0, 0.02),
			0 6px 18px -4px rgba(0, 0, 0, 0.04);
	}

	.dark .user-dropdown-trigger.svelte-1jpiivj:hover {
		background: rgba(24, 24, 27, 0.8);
		border-color: rgba(255, 255, 255, 0.1);
		box-shadow:
			0 1px 2px rgba(0, 0, 0, 0.2),
			0 8px 24px -4px rgba(0, 0, 0, 0.3);
	}

	.user-dropdown-trigger.svelte-1jpiivj:active {
		transform: translateY(0) scale(0.98);
	}

	.user-avatar-placeholder.svelte-1jpiivj {
		width: 1.5rem;
		height: 1.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, 0.03);
		border-radius: 999px;
		transition: background 300ms ease;
	}

	.dark .user-avatar-placeholder.svelte-1jpiivj {
		background: rgba(255, 255, 255, 0.05);
	}

	.user-dropdown-trigger.svelte-1jpiivj:hover .user-avatar-placeholder:where(.svelte-1jpiivj) {
		background: rgba(0, 0, 0, 0.05);
	}

	.dark .user-dropdown-trigger.svelte-1jpiivj:hover .user-avatar-placeholder:where(.svelte-1jpiivj) {
		background: rgba(255, 255, 255, 0.08);
	}

	.user-name.svelte-1jpiivj {
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: -0.01em;
		color: inherit;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 180px;
	}

	.user-info.svelte-1jpiivj {
		padding: 0.5rem;
		display: flex;
		flex-direction: column;
		gap: 0.125rem;
	}

	.user-info.svelte-1jpiivj .name:where(.svelte-1jpiivj) {
		font-size: 0.875rem;
		font-weight: 700;
		letter-spacing: -0.02em;
		color: rgb(24, 24, 27);
	}

	.dark .user-info.svelte-1jpiivj .name:where(.svelte-1jpiivj) {
		color: rgb(250, 250, 250);
	}

	.user-info.svelte-1jpiivj .email:where(.svelte-1jpiivj) {
		font-size: 0.65rem;
		font-weight: 500;
		color: rgb(113, 113, 122);
	}

	/* =================================
	   Premium Sans-Serif Typography
	   ================================= */
	.navbar-wrapper.svelte-1j91rhr {
		--font-display:
			"Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display",
			"Segoe UI", Roboto, sans-serif;
		--font-body:
			"Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text",
			"Segoe UI", Roboto, sans-serif;

		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 40;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-family: var(--font-body);
	}

	/* =================================
	   Main Navbar
	   ================================= */
	.navbar.svelte-1j91rhr {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		max-width: 72rem; /* 1152px */
		padding: 0 1.5rem;
		height: 5rem; /* 80px - luxury height */
		background: rgba(250, 250, 250, 0.85);
		backdrop-filter: blur(16px) saturate(180%);
		-webkit-backdrop-filter: blur(16px) saturate(180%);
		border-bottom: 1px solid rgba(0, 0, 0, 0.04);
		transition: all 300ms cubic-bezier(0.22, 1, 0.36, 1);
		position: relative;
		z-index: 10;
	}

	.dark .navbar.svelte-1j91rhr {
		background: oklch(0% 0 0 / 0.85); /* Consistent dark mode background */
		border-bottom-color: rgba(0, 0, 0, 0.04);
	}

	.navbar.sidebar-open.svelte-1j91rhr {
		background: transparent;
		backdrop-filter: none;
		border-bottom-color: transparent;
	}

	/* =================================
	   Logo Section
	   ================================= */
	.navbar-logo.svelte-1j91rhr {
		display: flex;
		align-items: center;
		gap: 0.875rem;
		padding: 0.75rem 0;
		text-decoration: none;
		transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.navbar-logo.is-hovered.svelte-1j91rhr {
		transform: translateX(4px);
	}

	.logo-icon.svelte-1j91rhr {
		position: relative;
		width: 2.75rem;
		height: 2.75rem;
		flex-shrink: 0;
	}

	.logo-img.svelte-1j91rhr {
		width: 100%;
		height: 100%;
		object-fit: contain;
		transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.navbar-logo.is-hovered.svelte-1j91rhr .logo-img:where(.svelte-1j91rhr) {
		transform: scale(1.05);
	}

	.logo-text.svelte-1j91rhr {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.logo-brand.svelte-1j91rhr {
		font-family: var(--font-display);
		font-size: 1.125rem;
		font-weight: 800;
		letter-spacing: -0.01em;
		text-transform: uppercase;
		color: rgb(24, 24, 27);
		line-height: 1.2;
	}

	.dark .logo-brand.svelte-1j91rhr {
		color: rgb(250, 250, 250);
	}

	.logo-tagline.svelte-1j91rhr {
		font-size: 0.625rem;
		font-weight: 300;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: rgb(113, 113, 122);
		line-height: 1.2;
	}

	.dark .logo-tagline.svelte-1j91rhr {
		color: rgb(161, 161, 170);
	}

	/* =================================
	   Navbar Actions
	   ================================= */
	.navbar-actions.svelte-1j91rhr {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	/* =================================
	   Premium Hamburger Menu
	   ================================= */
	.menu-toggle.svelte-1j91rhr {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
		gap: 6px;
		width: 3rem;
		height: 3rem;
		padding: 0.75rem;
		margin-right: 0.5rem;
		border: none;
		border-radius: 0.5rem;
		background: transparent;
		cursor: pointer;
		transition: background-color 200ms ease;
	}

	.menu-toggle.svelte-1j91rhr:hover,
	.menu-toggle.hovered.svelte-1j91rhr {
		background: rgba(0, 0, 0, 0.04);
	}

	.dark .menu-toggle.svelte-1j91rhr:hover,
	.dark .menu-toggle.hovered.svelte-1j91rhr {
		background: rgba(255, 255, 255, 0.06);
	}

	.menu-toggle.svelte-1j91rhr:focus-visible {
		outline: 2px solid rgb(161, 161, 170);
		outline-offset: 2px;
	}

	.menu-line.svelte-1j91rhr {
		display: block;
		height: 2px;
		background: rgb(24, 24, 27);
		border-radius: 1px;
		transition:
			width 300ms cubic-bezier(0.22, 1, 0.36, 1),
			transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
			opacity 200ms ease;
		transform-origin: center;
	}

	.dark .menu-line.svelte-1j91rhr {
		background: rgb(250, 250, 250);
	}

	.menu-line-1.svelte-1j91rhr {
		width: 14px;
	}

	.menu-line-2.svelte-1j91rhr {
		width: 24px;
	}

	/* Hover: Lines equalize */
	.menu-toggle.hovered.svelte-1j91rhr .menu-line-1:where(.svelte-1j91rhr) {
		width: 24px;
	}

	/* Active/Open: X transformation */
	.menu-toggle.active.svelte-1j91rhr .menu-line-1:where(.svelte-1j91rhr) {
		width: 24px;
		transform: translateY(4px) rotate(45deg);
	}

	.menu-toggle.active.svelte-1j91rhr .menu-line-2:where(.svelte-1j91rhr) {
		transform: translateY(-4px) rotate(-45deg);
	}

	/* =================================
	   Cart Button (Ecommerce)
	   ================================= */
	.cart-btn.svelte-1j91rhr {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 3rem;
		height: 3rem;
		padding: 0;
		border: none;
		border-radius: 0.5rem;
		background: transparent;
		cursor: pointer;
		transition: background-color 200ms ease;
	}

	.cart-btn.svelte-1j91rhr:hover {
		background: rgba(0, 0, 0, 0.04);
	}

	.dark .cart-btn.svelte-1j91rhr:hover {
		background: rgba(255, 255, 255, 0.06);
	}

	.cart-btn.svelte-1j91rhr .cart-icon {
		width: 1.375rem;
		height: 1.375rem;
		color: rgb(24, 24, 27);
	}

	.dark .cart-btn.svelte-1j91rhr .cart-icon {
		color: rgb(250, 250, 250);
	}

	.cart-badge.svelte-1j91rhr {
		position: absolute;
		top: 0.375rem;
		right: 0.375rem;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 1.125rem;
		height: 1.125rem;
		padding: 0 0.25rem;
		border-radius: 999px;
		background: rgb(24, 24, 27);
		color: white;
		font-size: 0.625rem;
		font-weight: 600;
	}

	.dark .cart-badge.svelte-1j91rhr {
		background: rgb(250, 250, 250);
		color: rgb(24, 24, 27);
	}

	/* =================================
	   Circle Bottom Bar Override
	   ================================= */
	.navbar-circle-btn {
		background: transparent !important;
	}

	/* =================================
	   Mini Banner
	   ================================= */
	.navbar-banner.svelte-1j91rhr {
		display: flex;
		align-items: center;
		width: 100%;
		max-width: 72rem;
		height: 2rem;
		background: rgba(250, 250, 250, 0.6);
		backdrop-filter: blur(8px);
		border-top: 1px solid rgba(0, 0, 0, 0.03);
		border-bottom: 1px solid rgba(0, 0, 0, 0.03);
	}

	.dark .navbar-banner.svelte-1j91rhr {
		background: rgba(24, 24, 27, 0.6);
		border-color: rgba(255, 255, 255, 0.03);
	}

	/* =================================
	   Premium Marquee
	   ================================= */
	.marquee-container.svelte-1j91rhr {
		flex: 1;
		display: flex;
		overflow: hidden;
		-webkit-mask-image: linear-gradient(
			to right,
			transparent,
			black 5%,
			black 95%,
			transparent
		);
		mask-image: linear-gradient(
			to right,
			transparent,
			black 5%,
			black 95%,
			transparent
		);
	}

	.marquee-track.svelte-1j91rhr {
		display: flex;
		flex-shrink: 0;
		align-items: center;
		animation: svelte-1j91rhr-marquee 35s linear infinite;
		will-change: transform;
	}

	.marquee-container.svelte-1j91rhr:hover .marquee-track:where(.svelte-1j91rhr) {
		animation-play-state: paused;
	}

	.marquee-item.svelte-1j91rhr {
		display: flex;
		align-items: center;
		gap: 0.625rem;
		padding: 0 2rem;
		text-decoration: none;
		white-space: nowrap;
		transition: opacity 200ms ease;
	}

	.marquee-item.svelte-1j91rhr:hover {
		opacity: 0.7;
	}

	.marquee-dot.svelte-1j91rhr {
		width: 4px;
		height: 4px;
		border-radius: 50%;
		background: rgb(113, 113, 122);
		flex-shrink: 0;
	}

	.dark .marquee-dot.svelte-1j91rhr {
		background: rgb(161, 161, 170);
	}

	.marquee-text.svelte-1j91rhr {
		font-size: 0.6875rem;
		font-weight: 400;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: rgb(113, 113, 122);
	}

	.dark .marquee-text.svelte-1j91rhr {
		color: rgb(161, 161, 170);
	}

	.marquee-text.svelte-1j91rhr strong:where(.svelte-1j91rhr) {
		font-weight: 600;
		color: rgb(63, 63, 70);
	}

	.dark .marquee-text.svelte-1j91rhr strong:where(.svelte-1j91rhr) {
		color: rgb(212, 212, 216);
	}

	@keyframes svelte-1j91rhr-marquee {
		from {
			transform: translateX(0);
		}
		to {
			transform: translateX(-100%);
		}
	}

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

	/* =================================
	   Responsive Adjustments
	   ================================= */
	@media (max-width: 768px) {
		.navbar.svelte-1j91rhr {
			padding: 0 1rem;
			height: 4.5rem;
		}

		.logo-icon.svelte-1j91rhr {
			width: 2.5rem;
			height: 2.5rem;
		}

		.logo-brand.svelte-1j91rhr {
			font-size: 1rem;
		}

		.logo-tagline.svelte-1j91rhr {
			font-size: 0.5625rem;
		}

		.menu-toggle.svelte-1j91rhr {
			margin-right: 0;
		}

		.navbar-banner.svelte-1j91rhr {
			height: 1.75rem;
		}

		.marquee-item.svelte-1j91rhr {
			padding: 0 1.5rem;
		}

		.marquee-text.svelte-1j91rhr {
			font-size: 0.625rem;
		}
	}

	/* =================================
	   Reduced Motion
	   ================================= */
	@media (prefers-reduced-motion: reduce) {
		.navbar-logo.svelte-1j91rhr,
		.logo-img.svelte-1j91rhr,
		.menu-line.svelte-1j91rhr,
		.marquee-track.svelte-1j91rhr,
		.auth-btn.svelte-1j91rhr {
			transition: none;
			animation: none;
		}
	}

	/* =================================
	   Auth Button
	   ================================= */
	.auth-action-wrapper.svelte-1j91rhr {
		display: flex;
		align-items: center;
		margin-left: 0.5rem;
	}

	.auth-btn.svelte-1j91rhr {
		display: flex;
		align-items: center;
		gap: 0.625rem;
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		padding: 0.6rem 1.2rem;
		border-radius: 99px;
		transition: all 400ms cubic-bezier(0.22, 1, 0.36, 1);
		color: rgb(24, 24, 27);
		background: rgba(0, 0, 0, 0.04);
		border: 1px solid rgba(0, 0, 0, 0.08);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		text-decoration: none;
		cursor: pointer;
		white-space: nowrap;
		line-height: 1;
		position: relative;
		overflow: hidden;
	}

	.auth-btn.svelte-1j91rhr .auth-icon {
		width: 1rem;
		height: 1rem;
		stroke-width: 2.5;
		transition: transform 300ms ease;
	}

	.auth-btn-text.svelte-1j91rhr {
		position: relative;
		z-index: 1;
	}

	.dark .auth-btn.svelte-1j91rhr {
		color: rgb(250, 250, 250);
		background: rgba(255, 255, 255, 0.06);
		border-color: rgba(255, 255, 255, 0.1);
	}

	.auth-btn.svelte-1j91rhr:hover {
		background: rgb(24, 24, 27);
		color: white;
		transform: translateY(-1.5px);
		border-color: rgb(24, 24, 27);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}

	.auth-btn.svelte-1j91rhr:hover .auth-icon {
		transform: scale(1.1);
	}

	.dark .auth-btn.svelte-1j91rhr:hover {
		background: rgb(250, 250, 250);
		color: rgb(24, 24, 27);
		border-color: rgb(250, 250, 250);
		box-shadow:
			0 0 0 1px rgba(255, 255, 255, 0.1),
			0 8px 16px rgba(255, 255, 255, 0.05);
	}

	.auth-btn.svelte-1j91rhr:active {
		transform: translateY(0) scale(0.98);
		opacity: 0.9;
	}

	@media (max-width: 768px) {
		.auth-btn.svelte-1j91rhr {
			padding: 0.5rem 1rem;
			font-size: 0.725rem;
			gap: 0.45rem;
			background: rgba(255, 255, 255, 0.1);
			border-color: rgba(255, 255, 255, 0.1);
		}

		.dark .auth-btn.svelte-1j91rhr {
			background: rgba(255, 255, 255, 0.08);
		}

		.auth-btn.svelte-1j91rhr .auth-icon {
			width: 0.9375rem;
			height: 0.9375rem;
		}

		/* Optional: hide text on very small screens if it overlaps, but keep for now */
		/* @media (max-width: 380px) { .auth-btn-text { display: none; } } */
	}

	.custom-scrollbar.svelte-1hmli4x::-webkit-scrollbar {
		width: 4px;
	}
	.custom-scrollbar.svelte-1hmli4x::-webkit-scrollbar-track {
		background: transparent;
	}
	.custom-scrollbar.svelte-1hmli4x::-webkit-scrollbar-thumb {
		background-color: rgba(113, 113, 122, 0.3);
		border-radius: 99px;
	}
	.dark .custom-scrollbar.svelte-1hmli4x::-webkit-scrollbar-thumb {
		background-color: rgba(161, 161, 170, 0.3);
	}

	.glass-container.svelte-3vv81u {
		background: rgba(23, 23, 23, 0.7);
		backdrop-filter: blur(20px);
	}

	.scrollbar-hide.svelte-3vv81u::-webkit-scrollbar {
		display: none;
	}
	.scrollbar-hide.svelte-3vv81u {
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	.glass-container.svelte-1egdwmz {
		background: rgba(23, 23, 23, 0.8);
		backdrop-filter: blur(20px);
	}

	.glass-container.svelte-6rd939 {
		background: rgba(15, 15, 15, 0.85);
		backdrop-filter: blur(24px);
	}

	.scrollbar-hide.svelte-6rd939::-webkit-scrollbar {
		display: none;
	}
	.scrollbar-hide.svelte-6rd939 {
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	.glass-container.svelte-18o9s50 {
		background: rgba(15, 15, 15, 0.85);
		backdrop-filter: blur(24px);
	}

	.scrollbar-hide.svelte-18o9s50::-webkit-scrollbar {
		display: none;
	}
	.scrollbar-hide.svelte-18o9s50 {
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	.blog-skeleton.svelte-bmlhxl {
		cursor: wait;
	}