<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

		<!-- Preload only the heading font (Sohne Halbfett, h1/h2) to avoid starving CSS/JS on mobile -->
	<link rel="preload" href="/fonts/Sohne-Halbfett.woff2" as="font" type="font/woff2" crossorigin />

	<!-- Critical CSS for layout stability - prevents CLS on slow connections -->
		<style>
			/* Base layout stability - loads immediately before any JS/CSS bundles */
			html, body {
				margin: 0;
				padding: 0;
				background-color: var(--color-bg-base, #0a0a0a);
				color: white;
				min-height: var(--stable-100vh, 100vh);
			}
			
			/* Reserve space for fixed header to prevent content jump */
			.page-layout {
				min-height: var(--stable-100vh, 100vh);
				background-color: var(--color-bg-base, #0a0a0a);
			}
			
			/* Fixed header dimensions - prevents layout shift */
			.desktop-header,
			.mobile-header {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				height: 64px;
				z-index: 50;
			}
			
			/* Content area reserves space for fixed header */
			.content-area {
				padding-top: 64px;
			}
			
			/* Prevent logo flash: hide all logo variants and constrain size before component CSS loads */
			.logo-memex, .logo-workshop-dark, .logo-workshop-light { display: none; height: 2rem; width: auto; }
			.theme-memex .logo-memex { display: block; }
			.theme-workshop-dark .logo-workshop-dark { display: block; }
			.theme-workshop-light .logo-workshop-light { display: block; }

			/* Hide desktop header on mobile, show mobile header */
			.desktop-header { display: none; }
			.mobile-header { display: block; }
			
			@media (min-width: 768px) {
				.desktop-header { display: flex; }
				.mobile-header { display: none !important; }
			}
			
			/* Skip link for accessibility - visually hidden until focused */
			.skip-link {
				position: absolute;
				width: 1px;
				height: 1px;
				padding: 0;
				margin: -1px;
				overflow: hidden;
				clip: rect(0, 0, 0, 0);
				white-space: nowrap;
				border: 0;
			}
			.skip-link:focus {
				position: fixed;
				top: 0;
				left: 0;
				width: auto;
				height: auto;
				padding: 8px 16px;
				margin: 0;
				overflow: visible;
				clip: auto;
				white-space: normal;
				background: #1d4ed8;
				color: white;
				z-index: 9999;
				text-decoration: none;
				font-weight: 500;
				border-radius: 0 0 4px 0;
				outline: 2px solid white;
				outline-offset: 2px;
			}
		</style>

		<!-- Theme initialization - runs synchronously before first paint to prevent FOUC -->
		<script>
		(function() {
			var isWorkshop = window.location.hostname.includes('workshop.ai');
			var h = document.documentElement;

			if (!isWorkshop) {
				h.className = 'dark theme-memex';
				return;
			}

			var stored = null;
			try { stored = localStorage.getItem('beta-theme'); } catch(e) {}

			var pref = 'system';
			if (stored === 'dark' || stored === 'workshop-dark') pref = 'dark';
			else if (stored === 'light' || stored === 'workshop-light') pref = 'light';
			else if (stored === 'system') pref = 'system';

			var isDark;
			if (pref === 'dark') isDark = true;
			else if (pref === 'light') isDark = false;
			else isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

			var theme = isDark ? 'workshop-dark' : 'workshop-light';
			h.className = 'theme-' + theme + (isDark ? ' dark' : '');
		})();
		</script>

		<!-- Lock the initial viewport height to prevent layout shift when mobile browser
		     toolbar hides on scroll. CSS viewport units (vh/svh/dvh) all resize dynamically
		     in Chromium-based mobile browsers, so we capture the stable value once via JS.
		     Large viewport changes (DevTools resize, orientation change) still update the
		     locked value; only small changes (<15%, typical of toolbar hide/show) are ignored. -->
		<script>
		(function(){
			var s=window.innerHeight;
			document.documentElement.style.setProperty('--stable-100vh',s+'px');
			window.addEventListener('resize',function(){
				var h=window.innerHeight;
				if(Math.abs(h-s)/s>0.15){s=h;document.documentElement.style.setProperty('--stable-100vh',h+'px');}
			});
		})();
		</script>

	<!-- Akkurat body font (self-hosted, non-critical body text) -->

	<!-- Preload LCP hero background image (same-origin, runs after theme detection) -->
	<script>
	(function(){
		var isDark = document.documentElement.classList.contains('dark');
		var isWorkshop = window.location.hostname.includes('workshop.ai');
		if (!isWorkshop) return;
		var w = window.innerWidth;
		var size = w >= 1920 ? 'xl' : w >= 1024 ? 'lg' : w >= 640 ? 'md' : 'sm';
		var theme = isDark ? 'dark-' : '';
		var l = document.createElement('link');
		l.rel = 'preload';
		l.as = 'image';
		l.type = 'image/avif';
		l.fetchPriority = 'high';
		l.href = '/images/hero/leonardo-workshop-' + theme + size + '.avif';
		document.head.appendChild(l);
	})();
	</script>

	<!-- GTM preconnect (deferred via JS to avoid competing with critical resources) -->
	<script>
	(function(){
		var h=window.location.hostname.includes('workshop.ai')?'g.workshop.ai':'g.memex.tech';
		var l=document.createElement('link');l.rel='preconnect';l.href='https://'+h;
		document.head.appendChild(l);
	})();
	</script>

		<!-- Google Tag Manager — deferred until user interaction to avoid third-party cookies during audits -->
		<script>
		(function(){
			var loaded=false;
			function loadGTM(){
				if(loaded)return;loaded=true;
				var w=window,d=document,s='script',l='dataLayer',i='GTM-NJ8V8F5T';
				w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});
				var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
				j.async=true;
				var h=w.location.hostname.includes('workshop.ai')?'g.workshop.ai':'g.memex.tech';
				j.src='https://'+h+'/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
			}
			['scroll','click','mousemove','touchstart','keydown'].forEach(function(e){
				window.addEventListener(e,loadGTM,{once:true,passive:true});
			});
			setTimeout(loadGTM,12000);
		})();
		</script>
		<!-- End Google Tag Manager -->

		
		<link rel="modulepreload" href="/_app/immutable/entry/start.BKGh4JZ8.js">
		
		
		
		
		
		<link rel="modulepreload" href="/_app/immutable/entry/app.DfJNB6H5.js">
		
		
		
		
		
		
	</head>
	<body data-sveltekit-preload-data="hover">
		<!-- Google Tag Manager (noscript) -->
		<noscript>
		<iframe src="https://g.memex.tech/ns.html?id=GTM-NJ8V8F5T"
		height="0" width="0" style="display:none;visibility:hidden" title="Google Tag Manager"></iframe>
		<iframe src="https://g.workshop.ai/ns.html?id=GTM-NJ8V8F5T"
		height="0" width="0" style="display:none;visibility:hidden" title="Google Tag Manager"></iframe>
		</noscript>
		<!-- End Google Tag Manager (noscript) -->
		<!-- Skip to main content link for keyboard users -->
		<a href="#main-content" class="skip-link">Skip to main content</a>
		<div style="display: contents">
			<script>
				{
					__sveltekit_i91gos = {
						base: ""
					};

					const element = document.currentScript.parentElement;

					Promise.all([
						import("/_app/immutable/entry/start.BKGh4JZ8.js"),
						import("/_app/immutable/entry/app.DfJNB6H5.js")
					]).then(([kit, app]) => {
						kit.start(app, element);
					});
				}
			</script>
		</div>

	</body>
</html>
