animot-presenter 0.5.25 → 0.6.1

package/dist/AnimotPresenter.svelte

@@ -18,7 +18,7 @@
 	import { cameraTransform, defaultCamera, parallaxOffset } from './utils/camera';
 	import { parseEmbedUrl } from './utils/video-embed';
 	import EmbedPlayer from './EmbedPlayer.svelte';
-	import { easeInOutCubic, getEasingFn, getBackgroundStyle, gradientShapeToCss, hashFraction, getFloatAnimName, computeFloatAmp, computeFloatSpeed } from './engine/utils';
+	import { easeInOutCubic, getEasingFn, getBackgroundStyle, gradientShapeToCss, hashFraction, getFloatAnimName, getIdleAnimName, computeFloatAmp, computeFloatSpeed, entranceRuntimeKeyframe, exitRuntimeKeyframe, emphasisKeyframeName } from './engine/utils';
 	import type {
 		AnimotProject, AnimotPresenterProps, CanvasElement, CodeElement, TextElement,
 		ArrowElement, ImageElement, VideoElement, ShapeElement, CounterElement, ChartElement, IconElement,
@@ -329,6 +329,60 @@
 	let error = $state<string | null>(null);
 	let currentSlideIndex = $state(0);
 	let isTransitioning = $state(false);
+	// Phase 2 — runtime entrance/exit registry. Read by the inline
+	// style:animation-name on each element render. Window-scoped so the
+	// rendering closure can pull the current value without each render
+	// needing to be a $derived (Svelte 5 reactive cost). Cleared by timers.
+	if (typeof window !== 'undefined') {
+		(window as any).__animotPresenterRuntime ||= new Map<string, { entrance?: string; exit?: string; durationMs: number }>();
+	}
+	const runtimeAnimTimersPresenter = new Map<string, number>();
+	function presenterRegisterRuntimeAnim(elementId: string, kind: 'entrance' | 'exit', keyframe: string, durationMs: number, delayMs: number = 0) {
+		if (typeof window === 'undefined') return;
+		const reg: Map<string, { entrance?: string; exit?: string; durationMs: number; entranceDelayMs?: number; exitDelayMs?: number }> = (window as any).__animotPresenterRuntime;
+		const existing = reg.get(elementId) ?? { durationMs };
+		const delayKey = kind === 'entrance' ? 'entranceDelayMs' : 'exitDelayMs';
+		const next = { ...existing, [kind]: keyframe, durationMs, [delayKey]: delayMs };
+		// Drop any stale entrance entry when registering exit so it can't
+		// re-fire after the exit clears (would briefly flash the element back).
+		if (kind === 'exit' && next.entrance) {
+			delete (next as any).entrance;
+			delete (next as any).entranceDelayMs;
+			const prevEntrTimer = runtimeAnimTimersPresenter.get(`${elementId}:entrance`);
+			if (prevEntrTimer) { clearTimeout(prevEntrTimer); runtimeAnimTimersPresenter.delete(`${elementId}:entrance`); }
+		}
+		reg.set(elementId, next);
+		runtimeBump = (runtimeBump + 1) % 1000;
+		const key = `${elementId}:${kind}`;
+		const prev = runtimeAnimTimersPresenter.get(key);
+		if (prev) clearTimeout(prev);
+		const t = window.setTimeout(() => {
+			const cur = reg.get(elementId);
+			if (!cur) return;
+			const cleared = { ...cur };
+			delete cleared[kind];
+			delete cleared[delayKey as 'entranceDelayMs' | 'exitDelayMs'];
+			if (!cleared.entrance && !cleared.exit) reg.delete(elementId);
+			else reg.set(elementId, cleared);
+			runtimeBump = (runtimeBump + 1) % 1000;
+			// On exit completion, force inline opacity to 0 so the keyframe's
+			// fill-mode-hold state is preserved when the animation-name drops.
+			if (kind === 'exit') {
+				const animated = animatedElements.get(elementId);
+				if (animated) animated.opacity.to(0, { duration: 0 });
+			}
+			// On entrance completion, snap inline opacity to the element's
+			// declared opacity (replaces the keyframe's fill-mode hold).
+			if (kind === 'entrance') {
+				const animated = animatedElements.get(elementId);
+				const el = elementContent.get(elementId);
+				const targetOpacity = (el as any)?.opacity ?? 1;
+				if (animated) animated.opacity.to(targetOpacity, { duration: 0 });
+			}
+		}, delayMs + durationMs + 50);
+		runtimeAnimTimersPresenter.set(key, t);
+	}
+	let runtimeBump = $state(0);
 	let isAutoplay = $state(false);
 	let transitionClass = $state('');
 	let transitionDirection = $state<'forward' | 'backward'>('forward');
@@ -810,6 +864,9 @@
 
 		animateKeyframes(firstSlide);
 		animateMotionPaths(firstSlide);
+		// Fire entrance presets so a looping autoplay re-plays the first
+		// slide's entrance the same way the initial mount did.
+		firePresenterEntrancePresets(0);
 		onslidechange?.(0, slides.length);
 	}
 
@@ -835,6 +892,25 @@
 		const hasSlideTransition = transition.type !== 'none';
 
 		if (hasSlideTransition) {
+			// Phase 2 sprint-1 polish — fire per-element exit presets BEFORE
+			// the slide-level CSS transition starts so they're visible alongside
+			// the cross-fade. Skip elements still on the target slide (morph case).
+			for (const el of currentSlide.canvas.elements) {
+				const exitMode = el.animationConfig?.exit;
+				if (!exitMode || exitMode === 'none' || exitMode === 'fade') continue;
+				const kf = exitRuntimeKeyframe(exitMode);
+				if (!kf) continue;
+				const stillOnTarget = !!getElementInSlide(targetSlide, el.id);
+				if (stillOnTarget) continue;
+				const dur = el.animationConfig?.exitDuration ?? el.animationConfig?.duration ?? 600;
+				presenterRegisterRuntimeAnim(el.id, 'exit', kf, dur);
+				// Snap opacity to 0 after the CSS exit keyframe finishes so the
+				// element vanishes cleanly once the runtime registry entry expires.
+				const elId = el.id;
+				const animatedRef = animatedElements.get(elId);
+				if (animatedRef) setTimeout(() => animatedRef.opacity.to(0, { duration: 0 }), dur);
+			}
+
 			transitionClass = `transition-${transition.type}-out`;
 			await new Promise(r => setTimeout(r, duration * 0.4));
 			const newElementContent = new Map(elementContent);
@@ -888,7 +964,13 @@
 						}
 						if (animated.motionPathProgress) animated.motionPathProgress.to(0, { duration: 0 });
 					}
-				} else if (animated) { animated.opacity.to(0, { duration: 0 }); }
+				} else if (animated) {
+					// Skip instant opacity snap when an exit preset is mid-animation;
+					// its setTimeout handles the opacity-to-0 after exit duration.
+					const reg = typeof window !== 'undefined' ? (window as any).__animotPresenterRuntime as Map<string, { exit?: string }> | undefined : undefined;
+					const hasActiveExit = !!reg?.get(elementId)?.exit;
+					if (!hasActiveExit) animated.opacity.to(0, { duration: 0 });
+				}
 			}
 			for (const [, element] of newElementContent) {
 				if (element.type === 'code') {
@@ -917,6 +999,10 @@
 				}
 			}
 			transitionClass = `transition-${transition.type}-in`;
+			// Fire per-element entrance presets on the target slide so they
+			// play alongside the slide-level cross-fade-in. Without this,
+			// slide-level transitions skip per-element entrance animations.
+			firePresenterEntrancePresets(targetIndex);
 			await new Promise(r => setTimeout(r, duration * 0.6));
 			transitionClass = '';
 			animateKeyframes(targetSlide);
@@ -1000,6 +1086,55 @@
 			const delay = animConfig?.delay ?? 0;
 			const elementDuration = animConfig?.duration ?? duration;
 
+			// Phase 2 opt-out: when currentEl has an exit preset and element
+			// continues to next slide, exit on current, snap to target pose,
+			// then play target's entrance. Overrides morph.
+			const exitPresetMode = currentEl?.animationConfig?.exit;
+			const hasExitOptOut = !!currentEl && !!targetEl
+				&& exitPresetMode && exitPresetMode !== 'none' && exitPresetMode !== 'fade';
+			if (hasExitOptOut) {
+				const exitKf = exitRuntimeKeyframe(exitPresetMode);
+				const exitDuration = currentEl.animationConfig?.exitDuration ?? elementDuration;
+				const entranceMode = targetEl.animationConfig?.entrance;
+				const entranceKf = entranceMode ? entranceRuntimeKeyframe(entranceMode) : null;
+				const entranceDuration = entranceMode && entranceMode !== 'none' && entranceMode !== 'fade'
+					? (targetEl.animationConfig?.entranceDuration ?? targetEl.animationConfig?.duration ?? 600)
+					: 0;
+				if (exitKf) presenterRegisterRuntimeAnim(currentEl.id, 'exit', exitKf, exitDuration);
+				animationTasks.push({
+					elementId,
+					order,
+					delay,
+					elementDuration: exitDuration + entranceDuration,
+					run: () => [(async () => {
+						await new Promise(r => setTimeout(r, exitDuration));
+						animated.x.to(targetEl.position.x, { duration: 0 });
+						animated.y.to(targetEl.position.y, { duration: 0 });
+						animated.width.to(targetEl.size.width, { duration: 0 });
+						animated.height.to(targetEl.size.height, { duration: 0 });
+						animated.rotation.to(targetEl.rotation, { duration: 0 });
+						animated.skewX.to(targetEl.skewX ?? 0, { duration: 0 });
+						animated.skewY.to(targetEl.skewY ?? 0, { duration: 0 });
+						animated.tiltX.to(targetEl.tiltX ?? 0, { duration: 0 });
+						animated.tiltY.to(targetEl.tiltY ?? 0, { duration: 0 });
+						animated.perspective.to(targetEl.perspective ?? 1000, { duration: 0 });
+						animated.borderRadius.to((targetEl as any).borderRadius ?? 0, { duration: 0 });
+						animated.opacity.to((targetEl as any).opacity ?? 1, { duration: 0 });
+						if (targetEl.type === 'text' && animated.fontSize) {
+							animated.fontSize.to((targetEl as TextElement).fontSize, { duration: 0 });
+						}
+						if (targetEl.type === 'shape') {
+							const shapeEl = targetEl as ShapeElement;
+							if (animated.fillColor) animated.fillColor.to(shapeEl.fillColor, { duration: 0 });
+							if (animated.strokeColor) animated.strokeColor.to(shapeEl.strokeColor, { duration: 0 });
+							if (animated.strokeWidth) animated.strokeWidth.to(shapeEl.strokeWidth, { duration: 0 });
+						}
+						if (entranceKf) presenterRegisterRuntimeAnim(targetEl.id, 'entrance', entranceKf, entranceDuration);
+					})()]
+				});
+				continue;
+			}
+
 			if (targetEl) {
 				const easing = getEasingFn(animConfig?.easing);
 				const propertySequences = targetEl.animationConfig?.propertySequences;
@@ -1036,7 +1171,9 @@
 							if (!sequencedProps.has('perspective')) anims.push(animated.perspective.to(targetEl.perspective ?? 1000, { duration: elementDuration, easing }));
 							if (!sequencedProps.has('opacity')) {
 								const targetOpacity = (targetEl as any).opacity ?? 1;
-								if (animated.opacity.current !== targetOpacity) anims.push(animated.opacity.to(targetOpacity, { duration: elementDuration, easing }));
+								const entrPreset = (targetEl as any).animationConfig?.entrance;
+								const hasPresetEntrance = entrPreset && entrPreset !== 'fade' && entrPreset !== 'none';
+								if (!hasPresetEntrance && animated.opacity.current !== targetOpacity) anims.push(animated.opacity.to(targetOpacity, { duration: elementDuration, easing }));
 							}
 							const sortedSeqs = [...propertySequences].sort((a, b) => a.order - b.order);
 							let cumulativeDelay = 0;
@@ -1086,10 +1223,13 @@
 							anims.push(animated.contrast.to(targetEl.contrast ?? 100, { duration: elementDuration, easing }));
 							anims.push(animated.saturate.to(targetEl.saturate ?? 100, { duration: elementDuration, easing }));
 							anims.push(animated.grayscale.to(targetEl.grayscale ?? 0, { duration: elementDuration, easing }));
-							// Opacity interpolation for morphing elements
+							// Opacity. Skip when a preset entrance is configured so the
+							// CSS keyframe owns opacity for the entire entrance.
+							const entrPreset = (targetEl as any).animationConfig?.entrance;
+							const hasPresetEntrance = entrPreset && entrPreset !== 'fade' && entrPreset !== 'none';
 							const currOpacity = animated.opacity.current;
 							const targetOpacity = (targetEl as any).opacity ?? 1;
-							if (currOpacity !== targetOpacity) {
+							if (!hasPresetEntrance && currOpacity !== targetOpacity) {
 								anims.push(animated.opacity.to(targetOpacity, { duration: elementDuration, easing }));
 							}
 						}
@@ -1154,7 +1294,11 @@
 							}
 							const entrance = targetEl.animationConfig?.entrance ?? 'fade';
 							const targetOpacity = (targetEl as any).opacity ?? 1;
-							if (entrance === 'fade') {
+							const presetKf = entranceRuntimeKeyframe(entrance);
+							if (presetKf && entrance !== 'fade' && entrance !== 'none') {
+								// Let CSS keyframe own opacity for entire entrance (no inline snap).
+								presenterRegisterRuntimeAnim(targetEl.id, 'entrance', presetKf, targetEl.animationConfig?.entranceDuration ?? elementDuration, order * 100 + delay);
+							} else if (entrance === 'fade') {
 								anims.push(animated.opacity.to(targetOpacity, { duration: elementDuration / 2, easing }));
 							} else {
 								anims.push(animated.opacity.to(targetOpacity, { duration: 0 }));
@@ -1164,8 +1308,23 @@
 					}
 				});
 			} else if (currentEl) {
-				const exit = currentEl.animationConfig?.exit ?? 'fade';
-				if (exit === 'fade') {
+				// Default to instant when no exit preset is set; explicit 'fade' still fades.
+				const exit = currentEl.animationConfig?.exit ?? 'none';
+				const exitKf = exitRuntimeKeyframe(exit);
+				if (exitKf && exit !== 'fade' && exit !== 'none') {
+					const exitDuration = currentEl.animationConfig?.exitDuration ?? elementDuration;
+					presenterRegisterRuntimeAnim(currentEl.id, 'exit', exitKf, exitDuration);
+					animationTasks.push({
+						elementId,
+						order,
+						delay,
+						elementDuration: exitDuration,
+						run: () => [(async () => {
+							await new Promise(r => setTimeout(r, exitDuration));
+							await animated.opacity.to(0, { duration: 0 });
+						})()]
+					});
+				} else if (exit === 'fade') {
 					const fadeOutDuration = Math.min(elementDuration / 2, 300);
 					animationTasks.push({ elementId, order, delay, elementDuration, run: () => [animated.opacity.to(0, { duration: fadeOutDuration, easing: easeInOutCubic })] });
 				} else {
@@ -1228,12 +1387,17 @@
 		elementContent = newElementContent;
 		currentSlideIndex = targetIndex;
 		isTransitioning = false;
-		// Ensure elements not on the new slide are fully hidden
+		// Ensure elements not on the new slide are fully hidden. Phase 2:
+		// skip elements with an active runtime exit registration — their
+		// exit task snaps opacity itself after the keyframe finishes, so a
+		// preemptive snap here would cut the visual exit short.
 		const newSlide = slides[targetIndex];
+		const reg = typeof window !== 'undefined' ? (window as any).__animotPresenterRuntime as Map<string, { exit?: string }> | undefined : undefined;
 		for (const elementId of allElementIds) {
 			const onSlide = getElementInSlide(newSlide, elementId);
 			const animated = animatedElements.get(elementId);
-			if (!onSlide && animated) { animated.opacity.to(0, { duration: 0 }); }
+			const hasActiveExit = !!reg?.get(elementId)?.exit;
+			if (!onSlide && animated && !hasActiveExit) { animated.opacity.to(0, { duration: 0 }); }
 		}
 		animateKeyframes(slides[targetIndex]);
 		animateMotionPaths(slides[targetIndex]);
@@ -1415,6 +1579,24 @@
 	// ResizeObserver
 	let resizeObserver: ResizeObserver;
 
+	// Phase 2 sprint-1 polish — fire entrance presets for elements on the
+	// currently visible slide. Used at initial load AND every time the
+	// reactive `currentSlide` flips (covers navigation, autoplay loop reset,
+	// remote-controlled slide jumps).
+	function firePresenterEntrancePresets(slideIdx: number) {
+		const slide = slides[slideIdx];
+		if (!slide) return;
+		for (const el of slide.canvas.elements) {
+			const mode = el.animationConfig?.entrance;
+			if (!mode || mode === 'none' || mode === 'fade') continue;
+			const kf = entranceRuntimeKeyframe(mode);
+			if (!kf) continue;
+			const dur = el.animationConfig?.entranceDuration ?? el.animationConfig?.duration ?? 600;
+			const delay = (el.animationConfig?.order ?? 0) * 100 + (el.animationConfig?.delay ?? 0);
+			presenterRegisterRuntimeAnim(el.id, 'entrance', kf, dur, delay);
+		}
+	}
+
 	onMount(() => {
 		loadProject();
 		resizeObserver = new ResizeObserver(entries => {
@@ -1425,6 +1607,9 @@
 		});
 		if (containerEl) resizeObserver.observe(containerEl);
 		resetMouseIdleTimer();
+		// Slide 0 entrance presets need to fire on initial mount — the
+		// transition pipeline only runs on navigation, not on load.
+		queueMicrotask(() => firePresenterEntrancePresets(currentSlideIndex));
 
 		return () => {
 			resizeObserver?.disconnect();
@@ -1432,6 +1617,14 @@
 			clearAllTypewriterAnimations();
 			if (mouseIdleTimer) clearTimeout(mouseIdleTimer);
 			stopNarration();
+			// Phase 2 — clean up runtime entrance/exit timers + registry to
+			// avoid leaks when the presenter is unmounted (e.g. modal close).
+			for (const t of runtimeAnimTimersPresenter.values()) clearTimeout(t);
+			runtimeAnimTimersPresenter.clear();
+			if (typeof window !== 'undefined') {
+				const reg = (window as any).__animotPresenterRuntime as Map<string, unknown> | undefined;
+				reg?.clear();
+			}
 		};
 	});
 
@@ -1514,7 +1707,8 @@
 						? mpPoint.angle + (mpConfig.orientationOffset ?? 0)
 						: null}
 					{@const parallax = isCinemaMode && element?.depth ? parallaxOffset(currentCamera, element.depth, worldWidth, worldHeight) : { x: 0, y: 0 }}
-					{#if element && animated && animated.opacity.current > 0.01 && element.visible !== false && !(element.type === 'motionPath' && !(element as MotionPathElement).showInPresentation)}
+					{@const _entranceActive = (() => { void runtimeBump; const hasReg = typeof window !== 'undefined' && !!((window as any).__animotPresenterRuntime as Map<string, { entrance?: string }> | undefined)?.get(elementId)?.entrance; return hasReg && !!getElementInSlide(currentSlide, elementId); })()}
+					{#if element && animated && (animated.opacity.current > 0.01 || _entranceActive) && element.visible !== false && !(element.type === 'motionPath' && !(element as MotionPathElement).showInPresentation)}
 						<div
 							class="animot-element"
 							class:floating={hasFloat}
@@ -1529,9 +1723,44 @@
 							style:backface-visibility={element.backfaceVisibility ?? 'visible'}
 							style:z-index={element.zIndex}
 							style:--float-amp="{hasFloat ? computeFloatAmp(floatCfg, floatGroupId || elementId) : 10}px"
+							style:--float-amp-scale={hasFloat ? 1 + computeFloatAmp(floatCfg, floatGroupId || elementId) / 200 : 1.05}
+							style:--float-amp-rot="{hasFloat ? computeFloatAmp(floatCfg, floatGroupId || elementId) / 2 : 5}deg"
 							style:--float-speed="{hasFloat ? computeFloatSpeed(floatCfg, floatGroupId || elementId) : 3}s"
 							style:--float-delay="{hashFraction(floatGroupId || elementId, 3) * 2}s"
-							style:animation-name={hasFloat ? getFloatAnimName(floatCfg!.direction, floatGroupId || elementId) : 'none'}
+							style:animation={(() => {
+								// Phase 2 — single CSS `animation:` shorthand composing
+								// runtime exit + entrance + emphasis + floating. One
+								// inline write keeps all layers in sync.
+								void runtimeBump;
+								const parts: string[] = [];
+								const ra = (typeof window !== 'undefined' && (window as any).__animotPresenterRuntime)
+									? (window as any).__animotPresenterRuntime.get(elementId)
+									: null;
+								if (ra?.exit) {
+									const xd = ra.exitDelayMs ?? 0;
+									if (xd > 0) parts.push(`${ra.durationMs}ms ease-in ${xd}ms 1 forwards ${ra.exit}`);
+									else parts.push(`${ra.durationMs}ms ease-in 1 forwards ${ra.exit}`);
+								}
+								if (ra?.entrance) {
+									const ed = ra.entranceDelayMs ?? 0;
+									if (ed > 0) parts.push(`${ra.durationMs}ms ease-out ${ed}ms 1 both ${ra.entrance}`);
+									else parts.push(`${ra.durationMs}ms ease-out 1 both ${ra.entrance}`);
+								}
+								const emphKf = emphasisKeyframeName(element?.animationConfig?.emphasis);
+								if (emphKf) {
+									const isOneShot = element?.animationConfig?.emphasis === 'tada' || element?.animationConfig?.emphasis === 'bob-once';
+									const cfgDur = element?.animationConfig?.emphasisDuration;
+									const defaultDur = isOneShot ? 1200 : 2200;
+									const dur = typeof cfgDur === 'number' && cfgDur > 0 ? cfgDur : defaultDur;
+									const delay = element?.animationConfig?.emphasisDelay ?? 0;
+									parts.push(`${dur}ms ease-in-out ${delay}ms ${isOneShot ? '1' : 'infinite'} ${isOneShot ? 'both' : 'none'} ${emphKf}`);
+								}
+								if (hasFloat) {
+									const speed = computeFloatSpeed(floatCfg, floatGroupId || elementId);
+									parts.push(`${speed}s ease-in-out infinite none ${getIdleAnimName(floatCfg, floatGroupId || elementId)}`);
+								}
+								return parts.length ? parts.join(', ') : 'none';
+							})()}
 							style:filter={(() => { const parts: string[] = []; const b = animated.blur.current; const br2 = animated.brightness.current; const c = animated.contrast.current; const s = animated.saturate.current; const g = animated.grayscale.current; if (b) parts.push(`blur(${b}px)`); if (br2 !== 100) parts.push(`brightness(${br2}%)`); if (c !== 100) parts.push(`contrast(${c}%)`); if (s !== 100) parts.push(`saturate(${s}%)`); if (g) parts.push(`grayscale(${g}%)`); return parts.length ? parts.join(' ') : 'none'; })()}
 							use:decorations={{ config: element.decorations, slideDuration: currentSlide?.duration, shape: element.type === 'shape' ? { type: (element as any).shapeType, borderRadius: (element as any).borderRadius } : undefined, key: `${currentSlideIndex}-${JSON.stringify(element.decorations ?? null)}-${element.type === 'shape' ? (element as any).shapeType + ':' + ((element as any).borderRadius ?? 0) : ''}` }}
 						>
@@ -1598,7 +1827,7 @@
 								{@const typewriterState = textTypewriterState.get(element.id)}
 								{@const displayText = typewriterState?.isAnimating ? typewriterState.fullText.slice(0, typewriterState.displayedChars) : textEl.content}
 								{@const textAnimMode = textEl.animation?.mode ?? 'instant'}
-								{@const isActionTextMode = textAnimMode === 'fade-letters' || textAnimMode === 'bounce-in' || textAnimMode === 'handwriting'}
+								{@const isActionTextMode = textAnimMode === 'fade-letters' || textAnimMode === 'bounce-in' || textAnimMode === 'handwriting' || textAnimMode === 'scramble-in' || textAnimMode === 'slot-machine' || textAnimMode === 'drop' || textAnimMode === 'glitch' || textAnimMode === 'marquee' || textAnimMode === 'blur-in' || textAnimMode === 'stretch' || textAnimMode === 'slide-words' || textAnimMode === 'wave' || textAnimMode === 'typewriter-erase'}
 								<div
 									class="animot-text-element"
 									style:font-size="{animFontSize}px"

package/dist/cdn/animot-presenter.css

@@ -1 +1 @@
-.code-morph.svelte-1hmk0l{width:100%;height:100%;margin:0;padding:0;background:transparent;font-family:var(--font-mono, "JetBrains Mono", monospace);font-size:inherit;line-height:1.6;white-space:pre-wrap;word-wrap:break-word;color:#e6edf3;box-sizing:border-box;overflow:visible}.code-morph.svelte-1hmk0l pre{margin:0;padding:16px;background:transparent!important;font-family:var(--font-mono);font-size:inherit;line-height:1.6;overflow:visible}.code-morph.svelte-1hmk0l code{font-family:inherit;font-size:inherit;font-weight:inherit}.code-morph.svelte-1hmk0l .line-number{display:inline-block;width:2.5em;margin-right:1em;text-align:right;color:#6e7681;-webkit-user-select:none;user-select:none;opacity:.6}.code-morph.svelte-1hmk0l .word-highlight{background:var(--highlight-color, #facc15);color:#000;border-radius:3px;padding:1px 3px;margin:0 -3px;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:svelte-1hmk0l-fadeHighlight var(--duration, 1s) ease-out forwards}@keyframes svelte-1hmk0l-fadeHighlight{0%{background:var(--highlight-color, #facc15);color:#000}70%{background:var(--highlight-color, #facc15);color:#000}to{background:transparent;color:inherit}}.counter.svelte-1er5jjj{width:100%;height:100%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;overflow:hidden;white-space:nowrap}.animot-chart.svelte-1mq2d7j{width:100%;height:100%;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden}.animot-chart-title.svelte-1mq2d7j{font-weight:600;text-align:center;margin-bottom:8px}.animot-chart-content.svelte-1mq2d7j{flex:1;min-height:0;display:flex;flex-direction:column}.animot-chart-content.svelte-1mq2d7j svg:where(.svelte-1mq2d7j){width:100%;flex:1;min-height:0}.animot-bar-chart.svelte-1mq2d7j,.animot-line-chart.svelte-1mq2d7j{overflow:visible}.animot-series-legend.svelte-1mq2d7j{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;padding:6px 0 0;font-size:.85em}.animot-legend-item.svelte-1mq2d7j{display:inline-flex;align-items:center;gap:5px}.animot-swatch.svelte-1mq2d7j{width:10px;height:10px;border-radius:2px;display:inline-block}.progress-element.svelte-10tny4e{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;position:relative;box-sizing:border-box}.bar-track.svelte-10tny4e,.ring-svg.svelte-10tny4e{flex-shrink:0}.progress-element.ring.svelte-10tny4e .ring-svg:where(.svelte-10tny4e){width:100%;height:100%;min-height:0;min-width:0}.bar-track.svelte-10tny4e{position:relative;overflow:hidden}.bar-fill.svelte-10tny4e{position:absolute;display:flex;align-items:center;justify-content:center;transition:width 0s,height 0s}.bar-stripe-clip.svelte-10tny4e{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.bar-stripe-tape.svelte-10tny4e{position:absolute;top:0;left:0;width:calc(100% + var(--stripe-cycle));height:100%;mask-image:var(--stripe-mask);-webkit-mask-image:var(--stripe-mask);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;animation:svelte-10tny4e-progress-stripe-x var(--stripe-speed) linear infinite;animation-direction:var(--stripe-direction);will-change:transform}.bar-stripe-tape.vertical.svelte-10tny4e{width:100%;height:calc(100% + var(--stripe-cycle));animation-name:svelte-10tny4e-progress-stripe-y}@keyframes svelte-10tny4e-progress-stripe-x{0%{transform:translate(0)}to{transform:translate(calc(-1 * var(--stripe-cycle)))}}@keyframes svelte-10tny4e-progress-stripe-y{0%{transform:translateY(0)}to{transform:translateY(calc(-1 * var(--stripe-cycle)))}}.ring-svg.svelte-10tny4e{width:100%;height:100%}.ring-spin.svelte-10tny4e{animation:svelte-10tny4e-progress-ring-spin 1.4s linear infinite;transform-origin:50% 50%}@keyframes svelte-10tny4e-progress-ring-spin{to{transform:rotate(360deg)}}.label.svelte-10tny4e{text-align:center;white-space:nowrap;pointer-events:none}.label.center.svelte-10tny4e{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.label.inside.svelte-10tny4e{padding:0 8px;flex-shrink:0}.label.inside-vertical.svelte-10tny4e{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-orientation:mixed;writing-mode:horizontal-tb}.animot-container-element.svelte-e5oeuv{box-sizing:border-box;pointer-events:none}.icon-element.svelte-2ld65o{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.icon-element.svelte-2ld65o svg{width:100%;height:100%}.flow-markers.svelte-15cxp1m{pointer-events:none}.embed-player.svelte-1u59mvz{position:relative;width:100%;height:100%;background:#000;overflow:hidden}.embed-frame.svelte-1u59mvz{width:100%;height:100%;display:block;border:0}.embed-frame.passthrough.svelte-1u59mvz{pointer-events:none}.custom-controls.svelte-1u59mvz{position:absolute;left:8px;right:8px;bottom:8px;display:flex;align-items:center;gap:10px;padding:6px 10px;background:#0009;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:8px;opacity:0;transition:opacity .2s}.embed-player.svelte-1u59mvz:hover .custom-controls:where(.svelte-1u59mvz),.custom-controls.svelte-1u59mvz:focus-within{opacity:1}.ctrl-btn.svelte-1u59mvz{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:4px;color:#fff;cursor:pointer}.ctrl-btn.svelte-1u59mvz:hover{background:#ffffff26}.ctrl-btn.svelte-1u59mvz svg:where(.svelte-1u59mvz){width:16px;height:16px}.scrub.svelte-1u59mvz{flex:1;accent-color:#6366f1}.time.svelte-1u59mvz{font-size:11px;color:#ffffffd9;font-variant-numeric:tabular-nums;min-width:80px;text-align:right}@keyframes float-vertical{0%,to{translate:0 0}50%{translate:0 calc(-1 * var(--float-amp, 10px))}}@keyframes float-horizontal{0%,to{translate:0 0}50%{translate:var(--float-amp, 10px) 0}}@keyframes float-both-0{0%{translate:0 0}15%{translate:calc(.8 * var(--float-amp, 10px)) calc(-.6 * var(--float-amp, 10px))}35%{translate:calc(-.4 * var(--float-amp, 10px)) calc(-1 * var(--float-amp, 10px))}55%{translate:calc(-.9 * var(--float-amp, 10px)) calc(.3 * var(--float-amp, 10px))}75%{translate:calc(.3 * var(--float-amp, 10px)) calc(.7 * var(--float-amp, 10px))}to{translate:0 0}}@keyframes float-both-1{0%{translate:0 0}20%{translate:calc(-.7 * var(--float-amp, 10px)) calc(-.8 * var(--float-amp, 10px))}40%{translate:calc(.5 * var(--float-amp, 10px)) calc(-.3 * var(--float-amp, 10px))}60%{translate:calc(.9 * var(--float-amp, 10px)) calc(.6 * var(--float-amp, 10px))}80%{translate:calc(-.4 * var(--float-amp, 10px)) calc(.9 * var(--float-amp, 10px))}to{translate:0 0}}@keyframes float-both-2{0%{translate:0 0}12%{translate:calc(.6 * var(--float-amp, 10px)) calc(.5 * var(--float-amp, 10px))}30%{translate:calc(1 * var(--float-amp, 10px)) calc(-.4 * var(--float-amp, 10px))}50%{translate:calc(-.3 * var(--float-amp, 10px)) calc(-.9 * var(--float-amp, 10px))}70%{translate:calc(-.8 * var(--float-amp, 10px)) calc(.2 * var(--float-amp, 10px))}88%{translate:calc(.2 * var(--float-amp, 10px)) calc(.8 * var(--float-amp, 10px))}to{translate:0 0}}@keyframes float-both-3{0%{translate:0 0}17%{translate:calc(-.9 * var(--float-amp, 10px)) calc(.4 * var(--float-amp, 10px))}33%{translate:calc(-.5 * var(--float-amp, 10px)) calc(-.7 * var(--float-amp, 10px))}50%{translate:calc(.7 * var(--float-amp, 10px)) calc(-.9 * var(--float-amp, 10px))}67%{translate:calc(.9 * var(--float-amp, 10px)) calc(.5 * var(--float-amp, 10px))}83%{translate:calc(-.2 * var(--float-amp, 10px)) calc(.8 * var(--float-amp, 10px))}to{translate:0 0}}.animot-svg-element.icon-anim-draw path,.animot-svg-element.icon-anim-draw circle,.animot-svg-element.icon-anim-draw rect,.animot-svg-element.icon-anim-draw line,.animot-svg-element.icon-anim-draw polyline,.animot-svg-element.icon-anim-draw polygon,.animot-svg-element.icon-anim-draw ellipse{stroke-dashoffset:var(--path-len, 1000);animation:animot-svg-draw var(--icon-anim-duration, .8s) ease-out forwards}.animot-svg-element.icon-anim-undraw path,.animot-svg-element.icon-anim-undraw circle,.animot-svg-element.icon-anim-undraw rect,.animot-svg-element.icon-anim-undraw line,.animot-svg-element.icon-anim-undraw polyline,.animot-svg-element.icon-anim-undraw polygon,.animot-svg-element.icon-anim-undraw ellipse{stroke-dashoffset:0;animation:animot-svg-undraw var(--icon-anim-duration, .8s) ease-out forwards}.animot-svg-element.icon-anim-draw-undraw path,.animot-svg-element.icon-anim-draw-undraw circle,.animot-svg-element.icon-anim-draw-undraw rect,.animot-svg-element.icon-anim-draw-undraw line,.animot-svg-element.icon-anim-draw-undraw polyline,.animot-svg-element.icon-anim-draw-undraw polygon,.animot-svg-element.icon-anim-draw-undraw ellipse{stroke-dashoffset:var(--path-len, 1000);animation:animot-svg-draw-undraw var(--icon-anim-duration, .8s) ease-out forwards}.animot-svg-element.icon-anim-loop path,.animot-svg-element.icon-anim-loop circle,.animot-svg-element.icon-anim-loop rect,.animot-svg-element.icon-anim-loop line,.animot-svg-element.icon-anim-loop polyline,.animot-svg-element.icon-anim-loop polygon,.animot-svg-element.icon-anim-loop ellipse{animation-iteration-count:infinite!important}.animot-svg-element.icon-anim-reverse path,.animot-svg-element.icon-anim-reverse circle,.animot-svg-element.icon-anim-reverse rect,.animot-svg-element.icon-anim-reverse line,.animot-svg-element.icon-anim-reverse polyline,.animot-svg-element.icon-anim-reverse polygon,.animot-svg-element.icon-anim-reverse ellipse{animation-direction:reverse!important}@keyframes animot-svg-draw{to{stroke-dashoffset:0}}@keyframes animot-svg-undraw{0%{stroke-dashoffset:0}to{stroke-dashoffset:var(--path-len, 1000)}}@keyframes animot-svg-draw-undraw{0%{stroke-dashoffset:var(--path-len, 1000)}50%{stroke-dashoffset:0}to{stroke-dashoffset:var(--path-len, 1000)}}.animot-presenter.svelte-16ocdv9 *{margin:0;padding:0;box-sizing:border-box}.animot-presenter.svelte-16ocdv9{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;background:transparent;line-height:normal;font-size:16px;font-weight:400;font-style:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;text-indent:0;text-align:left;color:inherit}.animot-canvas-wrapper.svelte-16ocdv9{display:flex;align-items:center;justify-content:center}.animot-canvas.svelte-16ocdv9{position:relative;overflow:hidden}.animot-element.svelte-16ocdv9{position:absolute;box-sizing:border-box;will-change:transform,opacity,left,top,width,height;isolation:isolate}.animot-element.floating.svelte-16ocdv9{animation-duration:var(--float-speed, 3s);animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-delay:var(--float-delay, 0s)}.animot-code-block.svelte-16ocdv9{width:100%;height:100%;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 32px #0006;margin:0;box-sizing:border-box}.animot-code-block.transparent-bg.svelte-16ocdv9{background:transparent!important;box-shadow:none}.animot-code-block.transparent-bg.svelte-16ocdv9 .animot-code-header:where(.svelte-16ocdv9){background:transparent;border-bottom-color:#ffffff0f}.animot-code-header.svelte-16ocdv9{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#0003;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0;min-height:40px}.animot-window-controls.svelte-16ocdv9{display:flex;gap:8px;align-items:center;flex-shrink:0}.macos.svelte-16ocdv9 .animot-control:where(.svelte-16ocdv9){width:12px;height:12px;border-radius:50%;display:block}.macos.svelte-16ocdv9 .animot-control.close:where(.svelte-16ocdv9){background:#ff5f57}.macos.svelte-16ocdv9 .animot-control.minimize:where(.svelte-16ocdv9){background:#febc2e}.macos.svelte-16ocdv9 .animot-control.maximize:where(.svelte-16ocdv9){background:#28c840}.windows.svelte-16ocdv9 .animot-window-controls:where(.svelte-16ocdv9){order:99;margin-left:auto;gap:0}.windows.svelte-16ocdv9 .animot-control:where(.svelte-16ocdv9){display:flex;align-items:center;justify-content:center;width:28px;height:24px;border-radius:4px;color:#ffffff73}.animot-filename-tab.svelte-16ocdv9{display:flex;align-items:center;gap:6px;background:#ffffff0f;border:1px solid rgba(255,255,255,.08);border-radius:6px;padding:4px 10px;max-width:220px;color:#fff6}.animot-file-icon.svelte-16ocdv9{flex-shrink:0}.animot-filename.svelte-16ocdv9{color:#ffffff8c;font-size:12px;line-height:18px}.animot-copy-code-btn.svelte-16ocdv9{display:flex;align-items:center;gap:5px;height:28px;padding:0 8px;margin-left:auto;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#fff6;cursor:pointer;opacity:0;transition:opacity .2s,background .15s,color .15s;flex-shrink:0;font-size:12px;font-family:inherit;white-space:nowrap}.animot-copy-code-btn.svelte-16ocdv9:hover{background:#ffffff1f;color:#fffc}.animot-copy-code-btn.svelte-16ocdv9 svg:where(.svelte-16ocdv9){width:14px;height:14px;flex-shrink:0}.animot-copy-code-btn.svelte-16ocdv9 .animot-check-icon:where(.svelte-16ocdv9){display:none}.animot-copy-code-btn.svelte-16ocdv9 .animot-copied-label:where(.svelte-16ocdv9){display:none}.animot-copy-code-btn.copied.svelte-16ocdv9 .animot-copy-icon:where(.svelte-16ocdv9){display:none}.animot-copy-code-btn.copied.svelte-16ocdv9 .animot-copy-label:where(.svelte-16ocdv9){display:none}.animot-copy-code-btn.copied.svelte-16ocdv9 .animot-check-icon:where(.svelte-16ocdv9){display:block;color:#4ade80}.animot-copy-code-btn.copied.svelte-16ocdv9 .animot-copied-label:where(.svelte-16ocdv9){display:inline;color:#4ade80}.animot-copy-code-btn.animot-floating.svelte-16ocdv9{position:absolute;top:8px;right:8px;z-index:2}.animot-code-block.svelte-16ocdv9:hover .animot-copy-code-btn:where(.svelte-16ocdv9){opacity:1}.animot-code-content.svelte-16ocdv9{flex:1;overflow:hidden;position:relative}.animot-highlighted-code.svelte-16ocdv9{width:100%;height:100%}.animot-code-content.svelte-16ocdv9 pre,.animot-highlighted-code.svelte-16ocdv9 pre{margin:0;padding:16px;background:transparent!important;line-height:1.6;font-size:inherit;overflow:visible}.animot-highlighted-code.svelte-16ocdv9 code{font-family:inherit;font-size:inherit;font-weight:inherit}.animot-highlighted-code.svelte-16ocdv9 .line-number{display:inline-block;width:2.5em;margin-right:1em;text-align:right;color:#6e7681;-webkit-user-select:none;user-select:none;opacity:.6}.animot-text-element.svelte-16ocdv9{width:100%;height:100%;display:flex;align-items:center;white-space:pre-wrap;word-wrap:break-word}.animot-typewriter-cursor.svelte-16ocdv9{animation:svelte-16ocdv9-animot-blink .7s infinite;font-weight:100}@keyframes svelte-16ocdv9-animot-blink{0%,50%{opacity:1}51%,to{opacity:0}}.animot-arrow-element.svelte-16ocdv9{width:100%;height:100%}.arrow-animate-draw.svelte-16ocdv9 .arrow-path:where(.svelte-16ocdv9){stroke-dashoffset:var(--path-len, 1000);animation:svelte-16ocdv9-animot-arrow-draw var(--arrow-anim-duration, .5s) ease-out forwards}.arrow-animate-undraw.svelte-16ocdv9 .arrow-path:where(.svelte-16ocdv9){stroke-dashoffset:0;animation:svelte-16ocdv9-animot-arrow-undraw var(--arrow-anim-duration, .5s) ease-out forwards}.arrow-animate-draw-undraw.svelte-16ocdv9 .arrow-path:where(.svelte-16ocdv9){stroke-dashoffset:var(--path-len, 1000);animation:svelte-16ocdv9-animot-arrow-draw-undraw var(--arrow-anim-duration, .5s) ease-out forwards}.arrow-head-styled-draw.svelte-16ocdv9{opacity:0;animation:svelte-16ocdv9-animot-arrow-head-appear var(--arrow-anim-duration, .5s) ease-out forwards;animation-delay:calc(var(--arrow-anim-duration, .5s) * .7)}.arrow-animate-draw.svelte-16ocdv9 .arrow-head:where(.svelte-16ocdv9){opacity:0;animation:svelte-16ocdv9-animot-arrow-head-appear var(--arrow-anim-duration, .5s) ease-out forwards;animation-delay:calc(var(--arrow-anim-duration, .5s) * .7)}.arrow-animate-undraw.svelte-16ocdv9 .arrow-head:where(.svelte-16ocdv9),.arrow-head-undraw.svelte-16ocdv9{opacity:1;animation:svelte-16ocdv9-animot-arrow-head-disappear var(--arrow-anim-duration, .5s) ease-out forwards}.arrow-animate-draw-undraw.svelte-16ocdv9 .arrow-head:where(.svelte-16ocdv9),.arrow-head-draw-undraw.svelte-16ocdv9{opacity:0;animation:svelte-16ocdv9-animot-arrow-head-draw-undraw var(--arrow-anim-duration, .5s) ease-out forwards}.arrow-animate-grow.svelte-16ocdv9{transform-origin:left center;animation:svelte-16ocdv9-animot-arrow-grow var(--arrow-anim-duration, .5s) ease-out forwards}.arrow-anim-loop.svelte-16ocdv9 .arrow-path:where(.svelte-16ocdv9),.arrow-anim-loop.svelte-16ocdv9 .arrow-head:where(.svelte-16ocdv9){animation-iteration-count:infinite!important}.arrow-anim-reverse.svelte-16ocdv9 .arrow-path:where(.svelte-16ocdv9),.arrow-anim-reverse.svelte-16ocdv9 .arrow-head:where(.svelte-16ocdv9){animation-direction:reverse!important}@keyframes svelte-16ocdv9-animot-arrow-draw{to{stroke-dashoffset:0}}@keyframes svelte-16ocdv9-animot-arrow-undraw{0%{stroke-dashoffset:0}to{stroke-dashoffset:var(--path-len, 1000)}}@keyframes svelte-16ocdv9-animot-arrow-draw-undraw{0%{stroke-dashoffset:var(--path-len, 1000)}50%{stroke-dashoffset:0}to{stroke-dashoffset:var(--path-len, 1000)}}@keyframes svelte-16ocdv9-animot-arrow-head-appear{0%{opacity:0}to{opacity:1}}@keyframes svelte-16ocdv9-animot-arrow-head-disappear{0%{opacity:1}70%{opacity:1}to{opacity:0}}@keyframes svelte-16ocdv9-animot-arrow-head-draw-undraw{0%{opacity:0}35%{opacity:1}65%{opacity:1}to{opacity:0}}@keyframes svelte-16ocdv9-animot-arrow-grow{0%{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}.animot-image-element.svelte-16ocdv9{width:100%;height:100%;display:block}.animot-video-element.svelte-16ocdv9{width:100%;height:100%;display:block;background:#000}.animot-video-element.animot-embed-frame.svelte-16ocdv9{border:0;background:transparent}.animot-video-element.animot-embed-wrap.svelte-16ocdv9{overflow:hidden;background:#000}.animot-cinema-camera.svelte-16ocdv9{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:0 0}.animot-cinema-camera.active.svelte-16ocdv9{transition:transform var(--cinema-transition-duration, .8s) cubic-bezier(.65,0,.35,1)}.animot-cinema-camera.active.svelte-16ocdv9 .animot-element:where(.svelte-16ocdv9){transition:translate var(--cinema-transition-duration, .8s) cubic-bezier(.65,0,.35,1)}.animot-shape-element.svelte-16ocdv9{width:100%;height:100%;display:block;overflow:visible}.animot-canvas.svelte-16ocdv9{--transition-duration: .5s;transition:transform calc(var(--transition-duration) * .4) ease,opacity calc(var(--transition-duration) * .4) ease}.animot-canvas.transition-fade-out.svelte-16ocdv9{opacity:0}.animot-canvas.transition-fade-in.svelte-16ocdv9{animation:svelte-16ocdv9-animot-fadeIn calc(var(--transition-duration) * .6) ease forwards}.animot-canvas.transition-slide-left-out.forward.svelte-16ocdv9{transform:translate(-100%);opacity:0}.animot-canvas.transition-slide-left-in.forward.svelte-16ocdv9{animation:svelte-16ocdv9-animot-slideInFromRight calc(var(--transition-duration) * .6) ease forwards}.animot-canvas.transition-slide-left-out.backward.svelte-16ocdv9{transform:translate(100%);opacity:0}.animot-canvas.transition-slide-left-in.backward.svelte-16ocdv9{animation:svelte-16ocdv9-animot-slideInFromLeft calc(var(--transition-duration) * .6) ease forwards}.animot-canvas.transition-slide-right-out.forward.svelte-16ocdv9{transform:translate(100%);opacity:0}.animot-canvas.transition-slide-right-in.forward.svelte-16ocdv9{animation:svelte-16ocdv9-animot-slideInFromLeft calc(var(--transition-duration) * .6) ease forwards}.animot-canvas.transition-slide-up-out.svelte-16ocdv9{transform:translateY(-100%);opacity:0}.animot-canvas.transition-slide-up-in.svelte-16ocdv9{animation:svelte-16ocdv9-animot-slideInFromBottom calc(var(--transition-duration) * .6) ease forwards}.animot-canvas.transition-slide-down-out.svelte-16ocdv9{transform:translateY(100%);opacity:0}.animot-canvas.transition-slide-down-in.svelte-16ocdv9{animation:svelte-16ocdv9-animot-slideInFromTop calc(var(--transition-duration) * .6) ease forwards}.animot-canvas.transition-zoom-in-out.svelte-16ocdv9{transform:scale(.5);opacity:0}.animot-canvas.transition-zoom-in-in.svelte-16ocdv9{animation:svelte-16ocdv9-animot-zoomIn calc(var(--transition-duration) * .6) ease forwards}.animot-canvas.transition-zoom-out-out.svelte-16ocdv9{transform:scale(1.5);opacity:0}.animot-canvas.transition-zoom-out-in.svelte-16ocdv9{animation:svelte-16ocdv9-animot-zoomOut calc(var(--transition-duration) * .6) ease forwards}.animot-canvas.transition-flip-out.svelte-16ocdv9{transform:perspective(1000px) rotateY(90deg);opacity:0}.animot-canvas.transition-flip-in.svelte-16ocdv9{animation:svelte-16ocdv9-animot-flipIn calc(var(--transition-duration) * .6) ease forwards}@keyframes svelte-16ocdv9-animot-fadeIn{0%{opacity:0}to{opacity:1}}@keyframes svelte-16ocdv9-animot-slideInFromRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes svelte-16ocdv9-animot-slideInFromLeft{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes svelte-16ocdv9-animot-slideInFromBottom{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes svelte-16ocdv9-animot-slideInFromTop{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes svelte-16ocdv9-animot-zoomIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes svelte-16ocdv9-animot-zoomOut{0%{transform:scale(1.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes svelte-16ocdv9-animot-flipIn{0%{transform:perspective(1000px) rotateY(-90deg);opacity:0}to{transform:perspective(1000px) rotateY(0);opacity:1}}.animot-canvas.transition-flip-x-out.svelte-16ocdv9{transform:perspective(1000px) rotateX(90deg);opacity:0}.animot-canvas.transition-flip-x-in.svelte-16ocdv9{animation:svelte-16ocdv9-animot-flipXIn calc(var(--transition-duration) * .6) ease forwards}@keyframes svelte-16ocdv9-animot-flipXIn{0%{transform:perspective(1000px) rotateX(-90deg);opacity:0}to{transform:perspective(1000px) rotateX(0);opacity:1}}.animot-canvas.transition-flip-y-out.svelte-16ocdv9{transform:perspective(1000px) rotateY(90deg);opacity:0}.animot-canvas.transition-flip-y-in.svelte-16ocdv9{animation:svelte-16ocdv9-animot-flipYIn calc(var(--transition-duration) * .6) ease forwards}@keyframes svelte-16ocdv9-animot-flipYIn{0%{transform:perspective(1000px) rotateY(-90deg);opacity:0}to{transform:perspective(1000px) rotateY(0);opacity:1}}.animot-svg-element.svelte-16ocdv9{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.animot-svg-element.svelte-16ocdv9 svg{width:100%;height:100%}.animot-controls.svelte-16ocdv9{position:absolute;bottom:12px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:8px;padding:8px 16px;background:#000000b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:10px;opacity:0;transition:opacity .3s ease .15s;z-index:100}.animot-presenter.svelte-16ocdv9:hover .animot-controls:where(.svelte-16ocdv9),.animot-menu-visible.svelte-16ocdv9 .animot-controls:where(.svelte-16ocdv9){opacity:1;transition-delay:0s}.animot-controls.svelte-16ocdv9 button:where(.svelte-16ocdv9){display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;border:none;cursor:pointer;background:#ffffff1a;color:#fff;transition:background .2s}.animot-controls.svelte-16ocdv9 button:where(.svelte-16ocdv9):hover:not(:disabled){background:#fff3}.animot-controls.svelte-16ocdv9 button:where(.svelte-16ocdv9):disabled{opacity:.3;cursor:not-allowed}.animot-controls.svelte-16ocdv9 button.active:where(.svelte-16ocdv9){background:#6366f199}.animot-controls.svelte-16ocdv9 button:where(.svelte-16ocdv9) svg:where(.svelte-16ocdv9){width:16px;height:16px}.animot-slide-indicator.svelte-16ocdv9{font-size:12px;color:#fff;min-width:50px;text-align:center;font-family:system-ui,sans-serif}.animot-arrow.svelte-16ocdv9{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;background:#00000080;color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s .15s;z-index:100;padding:0;margin:0}.animot-presenter.svelte-16ocdv9:hover .animot-arrow:where(.svelte-16ocdv9){opacity:1;transition-delay:0s}.animot-presenter.svelte-16ocdv9:hover .animot-arrow:where(.svelte-16ocdv9):disabled{opacity:.3;cursor:not-allowed}.animot-arrow.svelte-16ocdv9:hover:not(:disabled){background:#000000b3}.animot-arrow.svelte-16ocdv9 svg:where(.svelte-16ocdv9){width:20px;height:20px}.animot-arrow-left.svelte-16ocdv9{left:8px}.animot-arrow-right.svelte-16ocdv9{right:8px}.animot-progress-bar.svelte-16ocdv9{position:absolute;bottom:0;left:0;right:0;height:3px;background:#ffffff1a;z-index:100;opacity:0;transition:opacity .3s .15s}.animot-presenter.svelte-16ocdv9:hover .animot-progress-bar:where(.svelte-16ocdv9){opacity:1;transition-delay:0s}.animot-progress-fill.svelte-16ocdv9{height:100%;background:linear-gradient(135deg,#7c3aed,#ec4899);transition:width .6s ease}.animot-loading.svelte-16ocdv9{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.animot-spinner.svelte-16ocdv9{width:32px;height:32px;border:3px solid rgba(255,255,255,.2);border-top-color:#7c3aed;border-radius:50%;animation:svelte-16ocdv9-animot-spin .8s linear infinite}@keyframes svelte-16ocdv9-animot-spin{to{transform:rotate(360deg)}}.animot-error.svelte-16ocdv9{color:#ef4444;padding:20px;text-align:center;font-family:system-ui,sans-serif}
+.code-morph.svelte-1hmk0l{width:100%;height:100%;margin:0;padding:0;background:transparent;font-family:var(--font-mono, "JetBrains Mono", monospace);font-size:inherit;line-height:1.6;white-space:pre-wrap;word-wrap:break-word;color:#e6edf3;box-sizing:border-box;overflow:visible}.code-morph.svelte-1hmk0l pre{margin:0;padding:16px;background:transparent!important;font-family:var(--font-mono);font-size:inherit;line-height:1.6;overflow:visible}.code-morph.svelte-1hmk0l code{font-family:inherit;font-size:inherit;font-weight:inherit}.code-morph.svelte-1hmk0l .line-number{display:inline-block;width:2.5em;margin-right:1em;text-align:right;color:#6e7681;-webkit-user-select:none;user-select:none;opacity:.6}.code-morph.svelte-1hmk0l .word-highlight{background:var(--highlight-color, #facc15);color:#000;border-radius:3px;padding:1px 3px;margin:0 -3px;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:svelte-1hmk0l-fadeHighlight var(--duration, 1s) ease-out forwards}@keyframes svelte-1hmk0l-fadeHighlight{0%{background:var(--highlight-color, #facc15);color:#000}70%{background:var(--highlight-color, #facc15);color:#000}to{background:transparent;color:inherit}}.counter.svelte-1er5jjj{width:100%;height:100%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;overflow:hidden;white-space:nowrap}.animot-chart.svelte-1mq2d7j{width:100%;height:100%;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden}.animot-chart-title.svelte-1mq2d7j{font-weight:600;text-align:center;margin-bottom:8px}.animot-chart-content.svelte-1mq2d7j{flex:1;min-height:0;display:flex;flex-direction:column}.animot-chart-content.svelte-1mq2d7j svg:where(.svelte-1mq2d7j){width:100%;flex:1;min-height:0}.animot-bar-chart.svelte-1mq2d7j,.animot-line-chart.svelte-1mq2d7j{overflow:visible}.animot-series-legend.svelte-1mq2d7j{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;padding:6px 0 0;font-size:.85em}.animot-legend-item.svelte-1mq2d7j{display:inline-flex;align-items:center;gap:5px}.animot-swatch.svelte-1mq2d7j{width:10px;height:10px;border-radius:2px;display:inline-block}.progress-element.svelte-10tny4e{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;position:relative;box-sizing:border-box}.bar-track.svelte-10tny4e,.ring-svg.svelte-10tny4e{flex-shrink:0}.progress-element.ring.svelte-10tny4e .ring-svg:where(.svelte-10tny4e){width:100%;height:100%;min-height:0;min-width:0}.bar-track.svelte-10tny4e{position:relative;overflow:hidden}.bar-fill.svelte-10tny4e{position:absolute;display:flex;align-items:center;justify-content:center;transition:width 0s,height 0s}.bar-stripe-clip.svelte-10tny4e{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.bar-stripe-tape.svelte-10tny4e{position:absolute;top:0;left:0;width:calc(100% + var(--stripe-cycle));height:100%;mask-image:var(--stripe-mask);-webkit-mask-image:var(--stripe-mask);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;animation:svelte-10tny4e-progress-stripe-x var(--stripe-speed) linear infinite;animation-direction:var(--stripe-direction);will-change:transform}.bar-stripe-tape.vertical.svelte-10tny4e{width:100%;height:calc(100% + var(--stripe-cycle));animation-name:svelte-10tny4e-progress-stripe-y}@keyframes svelte-10tny4e-progress-stripe-x{0%{transform:translate(0)}to{transform:translate(calc(-1 * var(--stripe-cycle)))}}@keyframes svelte-10tny4e-progress-stripe-y{0%{transform:translateY(0)}to{transform:translateY(calc(-1 * var(--stripe-cycle)))}}.ring-svg.svelte-10tny4e{width:100%;height:100%}.ring-spin.svelte-10tny4e{animation:svelte-10tny4e-progress-ring-spin 1.4s linear infinite;transform-origin:50% 50%}@keyframes svelte-10tny4e-progress-ring-spin{to{transform:rotate(360deg)}}.label.svelte-10tny4e{text-align:center;white-space:nowrap;pointer-events:none}.label.center.svelte-10tny4e{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.label.inside.svelte-10tny4e{padding:0 8px;flex-shrink:0}.label.inside-vertical.svelte-10tny4e{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-orientation:mixed;writing-mode:horizontal-tb}.animot-container-element.svelte-e5oeuv{box-sizing:border-box;pointer-events:none}.icon-element.svelte-2ld65o{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.icon-element.svelte-2ld65o svg{width:100%;height:100%}.flow-markers.svelte-15cxp1m{pointer-events:none}.embed-player.svelte-1u59mvz{position:relative;width:100%;height:100%;background:#000;overflow:hidden}.embed-frame.svelte-1u59mvz{width:100%;height:100%;display:block;border:0}.embed-frame.passthrough.svelte-1u59mvz{pointer-events:none}.custom-controls.svelte-1u59mvz{position:absolute;left:8px;right:8px;bottom:8px;display:flex;align-items:center;gap:10px;padding:6px 10px;background:#0009;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:8px;opacity:0;transition:opacity .2s}.embed-player.svelte-1u59mvz:hover .custom-controls:where(.svelte-1u59mvz),.custom-controls.svelte-1u59mvz:focus-within{opacity:1}.ctrl-btn.svelte-1u59mvz{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:4px;color:#fff;cursor:pointer}.ctrl-btn.svelte-1u59mvz:hover{background:#ffffff26}.ctrl-btn.svelte-1u59mvz svg:where(.svelte-1u59mvz){width:16px;height:16px}.scrub.svelte-1u59mvz{flex:1;accent-color:#6366f1}.time.svelte-1u59mvz{font-size:11px;color:#ffffffd9;font-variant-numeric:tabular-nums;min-width:80px;text-align:right}@keyframes float-vertical{0%,to{translate:0 0}50%{translate:0 calc(-1 * var(--float-amp, 10px))}}@keyframes float-horizontal{0%,to{translate:0 0}50%{translate:var(--float-amp, 10px) 0}}@keyframes float-both-0{0%{translate:0 0}15%{translate:calc(.8 * var(--float-amp, 10px)) calc(-.6 * var(--float-amp, 10px))}35%{translate:calc(-.4 * var(--float-amp, 10px)) calc(-1 * var(--float-amp, 10px))}55%{translate:calc(-.9 * var(--float-amp, 10px)) calc(.3 * var(--float-amp, 10px))}75%{translate:calc(.3 * var(--float-amp, 10px)) calc(.7 * var(--float-amp, 10px))}to{translate:0 0}}@keyframes float-both-1{0%{translate:0 0}20%{translate:calc(-.7 * var(--float-amp, 10px)) calc(-.8 * var(--float-amp, 10px))}40%{translate:calc(.5 * var(--float-amp, 10px)) calc(-.3 * var(--float-amp, 10px))}60%{translate:calc(.9 * var(--float-amp, 10px)) calc(.6 * var(--float-amp, 10px))}80%{translate:calc(-.4 * var(--float-amp, 10px)) calc(.9 * var(--float-amp, 10px))}to{translate:0 0}}@keyframes float-both-2{0%{translate:0 0}12%{translate:calc(.6 * var(--float-amp, 10px)) calc(.5 * var(--float-amp, 10px))}30%{translate:calc(1 * var(--float-amp, 10px)) calc(-.4 * var(--float-amp, 10px))}50%{translate:calc(-.3 * var(--float-amp, 10px)) calc(-.9 * var(--float-amp, 10px))}70%{translate:calc(-.8 * var(--float-amp, 10px)) calc(.2 * var(--float-amp, 10px))}88%{translate:calc(.2 * var(--float-amp, 10px)) calc(.8 * var(--float-amp, 10px))}to{translate:0 0}}@keyframes float-both-3{0%{translate:0 0}17%{translate:calc(-.9 * var(--float-amp, 10px)) calc(.4 * var(--float-amp, 10px))}33%{translate:calc(-.5 * var(--float-amp, 10px)) calc(-.7 * var(--float-amp, 10px))}50%{translate:calc(.7 * var(--float-amp, 10px)) calc(-.9 * var(--float-amp, 10px))}67%{translate:calc(.9 * var(--float-amp, 10px)) calc(.5 * var(--float-amp, 10px))}83%{translate:calc(-.2 * var(--float-amp, 10px)) calc(.8 * var(--float-amp, 10px))}to{translate:0 0}}@keyframes idle-breathe{0%,to{scale:1}50%{scale:var(--float-amp-scale, 1.05)}}@keyframes idle-pulse{0%,to{scale:1}45%{scale:var(--float-amp-scale, 1.05)}55%{scale:var(--float-amp-scale, 1.05)}}@keyframes idle-wiggle{0%,to{translate:0 0;rotate:0deg}25%{translate:calc(-.4 * var(--float-amp, 10px)) 0;rotate:calc(-.5 * var(--float-amp-rot, 5deg))}50%{translate:0 0;rotate:0deg}75%{translate:calc(.4 * var(--float-amp, 10px)) 0;rotate:calc(.5 * var(--float-amp-rot, 5deg))}}@keyframes idle-sway{0%,to{rotate:calc(-1 * var(--float-amp-rot, 5deg))}50%{rotate:var(--float-amp-rot, 5deg)}}@keyframes idle-tilt{0%,to{transform:skew(0)}50%{transform:skew(var(--float-amp-rot, 5deg))}}@keyframes idle-bob{0%,to{translate:0 0}50%{translate:0 calc(-1 * var(--float-amp, 10px))}}@keyframes idle-drift{0%{translate:0 0}25%{translate:calc(.5 * var(--float-amp, 10px)) calc(-.3 * var(--float-amp, 10px))}50%{translate:calc(.1 * var(--float-amp, 10px)) calc(.5 * var(--float-amp, 10px))}75%{translate:calc(-.4 * var(--float-amp, 10px)) calc(-.2 * var(--float-amp, 10px))}to{translate:0 0}}@keyframes emphasis-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}@keyframes emphasis-shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}@keyframes emphasis-flash{0%,to{opacity:1}50%{opacity:.55}}@keyframes emphasis-wobble{0%,to{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}@keyframes emphasis-glow-flash{0%,to{filter:drop-shadow(0 0 0 rgba(124,58,237,0))}50%{filter:drop-shadow(0 0 16px rgba(124,58,237,.85))}}@keyframes emphasis-bob-once{0%{transform:translateY(0)}30%{transform:translateY(-12px)}60%{transform:translateY(0)}to{transform:translateY(0)}}@keyframes emphasis-tada{0%{transform:scale(1) rotate(0)}10%,20%{transform:scale(.95) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.08) rotate(3deg)}40%,60%,80%{transform:scale(1.08) rotate(-3deg)}to{transform:scale(1) rotate(0)}}@keyframes runtime-entrance-fade{0%{opacity:0}to{opacity:1}}@keyframes runtime-entrance-slide-up{0%{translate:0 60px;opacity:0}to{translate:0 0;opacity:1}}@keyframes runtime-entrance-slide-down{0%{translate:0 -60px;opacity:0}to{translate:0 0;opacity:1}}@keyframes runtime-entrance-slide-left{0%{translate:60px 0;opacity:0}to{translate:0 0;opacity:1}}@keyframes runtime-entrance-slide-right{0%{translate:-60px 0;opacity:0}to{translate:0 0;opacity:1}}@keyframes runtime-entrance-pop{0%{scale:.4;opacity:0}60%{scale:1.08;opacity:1}to{scale:1;opacity:1}}@keyframes runtime-entrance-scale-in{0%{scale:.7;opacity:0}to{scale:1;opacity:1}}@keyframes runtime-entrance-rotate-in{0%{rotate:-15deg;scale:.8;opacity:0}to{rotate:0deg;scale:1;opacity:1}}@keyframes runtime-entrance-blur-in{0%{filter:blur(20px);opacity:0}to{filter:blur(0);opacity:1}}@keyframes runtime-entrance-rise{0%{translate:0 30px;opacity:0}to{translate:0 0;opacity:1}}@keyframes runtime-entrance-flip-x{0%{opacity:0}to{opacity:1}}@keyframes runtime-entrance-flip-y{0%{opacity:0}to{opacity:1}}@keyframes runtime-entrance-bounce-in{0%{scale:.3;opacity:0}50%{scale:1.15;opacity:1}75%{scale:.92}90%{scale:1.04}to{scale:1;opacity:1}}@keyframes runtime-exit-fade{0%{opacity:1}to{opacity:0}}@keyframes runtime-exit-slide-up{0%{translate:0 0;opacity:1}to{translate:0 -60px;opacity:0}}@keyframes runtime-exit-slide-down{0%{translate:0 0;opacity:1}to{translate:0 60px;opacity:0}}@keyframes runtime-exit-slide-left{0%{translate:0 0;opacity:1}to{translate:-60px 0;opacity:0}}@keyframes runtime-exit-slide-right{0%{translate:0 0;opacity:1}to{translate:60px 0;opacity:0}}@keyframes runtime-exit-pop{0%{scale:1;opacity:1}50%{scale:1.25;opacity:1}to{scale:1.6;opacity:0}}@keyframes runtime-exit-scale-out{0%{scale:1;opacity:1}to{scale:.5;opacity:0}}@keyframes runtime-exit-rotate-out{0%{rotate:0deg;scale:1;opacity:1}to{rotate:15deg;scale:.8;opacity:0}}@keyframes runtime-exit-blur-out{0%{filter:blur(0);opacity:1}to{filter:blur(20px);opacity:0}}@keyframes runtime-exit-sink{0%{translate:0 0;opacity:1}to{translate:0 30px;opacity:0}}@keyframes runtime-exit-flip-x{0%{opacity:1}to{opacity:0}}@keyframes runtime-exit-flip-y{0%{opacity:1}to{opacity:0}}.animot-svg-element.icon-anim-draw path,.animot-svg-element.icon-anim-draw circle,.animot-svg-element.icon-anim-draw rect,.animot-svg-element.icon-anim-draw line,.animot-svg-element.icon-anim-draw polyline,.animot-svg-element.icon-anim-draw polygon,.animot-svg-element.icon-anim-draw ellipse{stroke-dashoffset:var(--path-len, 1000);animation:animot-svg-draw var(--icon-anim-duration, .8s) ease-out forwards}.animot-svg-element.icon-anim-undraw path,.animot-svg-element.icon-anim-undraw circle,.animot-svg-element.icon-anim-undraw rect,.animot-svg-element.icon-anim-undraw line,.animot-svg-element.icon-anim-undraw polyline,.animot-svg-element.icon-anim-undraw polygon,.animot-svg-element.icon-anim-undraw ellipse{stroke-dashoffset:0;animation:animot-svg-undraw var(--icon-anim-duration, .8s) ease-out forwards}.animot-svg-element.icon-anim-draw-undraw path,.animot-svg-element.icon-anim-draw-undraw circle,.animot-svg-element.icon-anim-draw-undraw rect,.animot-svg-element.icon-anim-draw-undraw line,.animot-svg-element.icon-anim-draw-undraw polyline,.animot-svg-element.icon-anim-draw-undraw polygon,.animot-svg-element.icon-anim-draw-undraw ellipse{stroke-dashoffset:var(--path-len, 1000);animation:animot-svg-draw-undraw var(--icon-anim-duration, .8s) ease-out forwards}.animot-svg-element.icon-anim-loop path,.animot-svg-element.icon-anim-loop circle,.animot-svg-element.icon-anim-loop rect,.animot-svg-element.icon-anim-loop line,.animot-svg-element.icon-anim-loop polyline,.animot-svg-element.icon-anim-loop polygon,.animot-svg-element.icon-anim-loop ellipse{animation-iteration-count:infinite!important}.animot-svg-element.icon-anim-reverse path,.animot-svg-element.icon-anim-reverse circle,.animot-svg-element.icon-anim-reverse rect,.animot-svg-element.icon-anim-reverse line,.animot-svg-element.icon-anim-reverse polyline,.animot-svg-element.icon-anim-reverse polygon,.animot-svg-element.icon-anim-reverse ellipse{animation-direction:reverse!important}@keyframes animot-svg-draw{to{stroke-dashoffset:0}}@keyframes animot-svg-undraw{0%{stroke-dashoffset:0}to{stroke-dashoffset:var(--path-len, 1000)}}@keyframes animot-svg-draw-undraw{0%{stroke-dashoffset:var(--path-len, 1000)}50%{stroke-dashoffset:0}to{stroke-dashoffset:var(--path-len, 1000)}}.animot-presenter.svelte-16ocdv9 *{margin:0;padding:0;box-sizing:border-box}.animot-presenter.svelte-16ocdv9{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;background:transparent;line-height:normal;font-size:16px;font-weight:400;font-style:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;text-indent:0;text-align:left;color:inherit}.animot-canvas-wrapper.svelte-16ocdv9{display:flex;align-items:center;justify-content:center}.animot-canvas.svelte-16ocdv9{position:relative;overflow:hidden}.animot-element.svelte-16ocdv9{position:absolute;box-sizing:border-box;will-change:transform,opacity,left,top,width,height;isolation:isolate}.animot-element.floating.svelte-16ocdv9{animation-duration:var(--float-speed, 3s);animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-delay:var(--float-delay, 0s)}.animot-code-block.svelte-16ocdv9{width:100%;height:100%;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 32px #0006;margin:0;box-sizing:border-box}.animot-code-block.transparent-bg.svelte-16ocdv9{background:transparent!important;box-shadow:none}.animot-code-block.transparent-bg.svelte-16ocdv9 .animot-code-header:where(.svelte-16ocdv9){background:transparent;border-bottom-color:#ffffff0f}.animot-code-header.svelte-16ocdv9{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#0003;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0;min-height:40px}.animot-window-controls.svelte-16ocdv9{display:flex;gap:8px;align-items:center;flex-shrink:0}.macos.svelte-16ocdv9 .animot-control:where(.svelte-16ocdv9){width:12px;height:12px;border-radius:50%;display:block}.macos.svelte-16ocdv9 .animot-control.close:where(.svelte-16ocdv9){background:#ff5f57}.macos.svelte-16ocdv9 .animot-control.minimize:where(.svelte-16ocdv9){background:#febc2e}.macos.svelte-16ocdv9 .animot-control.maximize:where(.svelte-16ocdv9){background:#28c840}.windows.svelte-16ocdv9 .animot-window-controls:where(.svelte-16ocdv9){order:99;margin-left:auto;gap:0}.windows.svelte-16ocdv9 .animot-control:where(.svelte-16ocdv9){display:flex;align-items:center;justify-content:center;width:28px;height:24px;border-radius:4px;color:#ffffff73}.animot-filename-tab.svelte-16ocdv9{display:flex;align-items:center;gap:6px;background:#ffffff0f;border:1px solid rgba(255,255,255,.08);border-radius:6px;padding:4px 10px;max-width:220px;color:#fff6}.animot-file-icon.svelte-16ocdv9{flex-shrink:0}.animot-filename.svelte-16ocdv9{color:#ffffff8c;font-size:12px;line-height:18px}.animot-copy-code-btn.svelte-16ocdv9{display:flex;align-items:center;gap:5px;height:28px;padding:0 8px;margin-left:auto;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#fff6;cursor:pointer;opacity:0;transition:opacity .2s,background .15s,color .15s;flex-shrink:0;font-size:12px;font-family:inherit;white-space:nowrap}.animot-copy-code-btn.svelte-16ocdv9:hover{background:#ffffff1f;color:#fffc}.animot-copy-code-btn.svelte-16ocdv9 svg:where(.svelte-16ocdv9){width:14px;height:14px;flex-shrink:0}.animot-copy-code-btn.svelte-16ocdv9 .animot-check-icon:where(.svelte-16ocdv9){display:none}.animot-copy-code-btn.svelte-16ocdv9 .animot-copied-label:where(.svelte-16ocdv9){display:none}.animot-copy-code-btn.copied.svelte-16ocdv9 .animot-copy-icon:where(.svelte-16ocdv9){display:none}.animot-copy-code-btn.copied.svelte-16ocdv9 .animot-copy-label:where(.svelte-16ocdv9){display:none}.animot-copy-code-btn.copied.svelte-16ocdv9 .animot-check-icon:where(.svelte-16ocdv9){display:block;color:#4ade80}.animot-copy-code-btn.copied.svelte-16ocdv9 .animot-copied-label:where(.svelte-16ocdv9){display:inline;color:#4ade80}.animot-copy-code-btn.animot-floating.svelte-16ocdv9{position:absolute;top:8px;right:8px;z-index:2}.animot-code-block.svelte-16ocdv9:hover .animot-copy-code-btn:where(.svelte-16ocdv9){opacity:1}.animot-code-content.svelte-16ocdv9{flex:1;overflow:hidden;position:relative}.animot-highlighted-code.svelte-16ocdv9{width:100%;height:100%}.animot-code-content.svelte-16ocdv9 pre,.animot-highlighted-code.svelte-16ocdv9 pre{margin:0;padding:16px;background:transparent!important;line-height:1.6;font-size:inherit;overflow:visible}.animot-highlighted-code.svelte-16ocdv9 code{font-family:inherit;font-size:inherit;font-weight:inherit}.animot-highlighted-code.svelte-16ocdv9 .line-number{display:inline-block;width:2.5em;margin-right:1em;text-align:right;color:#6e7681;-webkit-user-select:none;user-select:none;opacity:.6}.animot-text-element.svelte-16ocdv9{width:100%;height:100%;display:flex;align-items:center;white-space:pre-wrap;word-wrap:break-word}.animot-typewriter-cursor.svelte-16ocdv9{animation:svelte-16ocdv9-animot-blink .7s infinite;font-weight:100}@keyframes svelte-16ocdv9-animot-blink{0%,50%{opacity:1}51%,to{opacity:0}}.animot-arrow-element.svelte-16ocdv9{width:100%;height:100%}.arrow-animate-draw.svelte-16ocdv9 .arrow-path:where(.svelte-16ocdv9){stroke-dashoffset:var(--path-len, 1000);animation:svelte-16ocdv9-animot-arrow-draw var(--arrow-anim-duration, .5s) ease-out forwards}.arrow-animate-undraw.svelte-16ocdv9 .arrow-path:where(.svelte-16ocdv9){stroke-dashoffset:0;animation:svelte-16ocdv9-animot-arrow-undraw var(--arrow-anim-duration, .5s) ease-out forwards}.arrow-animate-draw-undraw.svelte-16ocdv9 .arrow-path:where(.svelte-16ocdv9){stroke-dashoffset:var(--path-len, 1000);animation:svelte-16ocdv9-animot-arrow-draw-undraw var(--arrow-anim-duration, .5s) ease-out forwards}.arrow-head-styled-draw.svelte-16ocdv9{opacity:0;animation:svelte-16ocdv9-animot-arrow-head-appear var(--arrow-anim-duration, .5s) ease-out forwards;animation-delay:calc(var(--arrow-anim-duration, .5s) * .7)}.arrow-animate-draw.svelte-16ocdv9 .arrow-head:where(.svelte-16ocdv9){opacity:0;animation:svelte-16ocdv9-animot-arrow-head-appear var(--arrow-anim-duration, .5s) ease-out forwards;animation-delay:calc(var(--arrow-anim-duration, .5s) * .7)}.arrow-animate-undraw.svelte-16ocdv9 .arrow-head:where(.svelte-16ocdv9),.arrow-head-undraw.svelte-16ocdv9{opacity:1;animation:svelte-16ocdv9-animot-arrow-head-disappear var(--arrow-anim-duration, .5s) ease-out forwards}.arrow-animate-draw-undraw.svelte-16ocdv9 .arrow-head:where(.svelte-16ocdv9),.arrow-head-draw-undraw.svelte-16ocdv9{opacity:0;animation:svelte-16ocdv9-animot-arrow-head-draw-undraw var(--arrow-anim-duration, .5s) ease-out forwards}.arrow-animate-grow.svelte-16ocdv9{transform-origin:left center;animation:svelte-16ocdv9-animot-arrow-grow var(--arrow-anim-duration, .5s) ease-out forwards}.arrow-anim-loop.svelte-16ocdv9 .arrow-path:where(.svelte-16ocdv9),.arrow-anim-loop.svelte-16ocdv9 .arrow-head:where(.svelte-16ocdv9){animation-iteration-count:infinite!important}.arrow-anim-reverse.svelte-16ocdv9 .arrow-path:where(.svelte-16ocdv9),.arrow-anim-reverse.svelte-16ocdv9 .arrow-head:where(.svelte-16ocdv9){animation-direction:reverse!important}@keyframes svelte-16ocdv9-animot-arrow-draw{to{stroke-dashoffset:0}}@keyframes svelte-16ocdv9-animot-arrow-undraw{0%{stroke-dashoffset:0}to{stroke-dashoffset:var(--path-len, 1000)}}@keyframes svelte-16ocdv9-animot-arrow-draw-undraw{0%{stroke-dashoffset:var(--path-len, 1000)}50%{stroke-dashoffset:0}to{stroke-dashoffset:var(--path-len, 1000)}}@keyframes svelte-16ocdv9-animot-arrow-head-appear{0%{opacity:0}to{opacity:1}}@keyframes svelte-16ocdv9-animot-arrow-head-disappear{0%{opacity:1}70%{opacity:1}to{opacity:0}}@keyframes svelte-16ocdv9-animot-arrow-head-draw-undraw{0%{opacity:0}35%{opacity:1}65%{opacity:1}to{opacity:0}}@keyframes svelte-16ocdv9-animot-arrow-grow{0%{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}.animot-image-element.svelte-16ocdv9{width:100%;height:100%;display:block}.animot-video-element.svelte-16ocdv9{width:100%;height:100%;display:block;background:#000}.animot-video-element.animot-embed-frame.svelte-16ocdv9{border:0;background:transparent}.animot-video-element.animot-embed-wrap.svelte-16ocdv9{overflow:hidden;background:#000}.animot-cinema-camera.svelte-16ocdv9{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:0 0}.animot-cinema-camera.active.svelte-16ocdv9{transition:transform var(--cinema-transition-duration, .8s) cubic-bezier(.65,0,.35,1)}.animot-cinema-camera.active.svelte-16ocdv9 .animot-element:where(.svelte-16ocdv9){transition:translate var(--cinema-transition-duration, .8s) cubic-bezier(.65,0,.35,1)}.animot-shape-element.svelte-16ocdv9{width:100%;height:100%;display:block;overflow:visible}.animot-canvas.svelte-16ocdv9{--transition-duration: .5s;transition:transform calc(var(--transition-duration) * .4) ease,opacity calc(var(--transition-duration) * .4) ease}.animot-canvas.transition-fade-out.svelte-16ocdv9{opacity:0}.animot-canvas.transition-fade-in.svelte-16ocdv9{animation:svelte-16ocdv9-animot-fadeIn calc(var(--transition-duration) * .6) ease forwards}.animot-canvas.transition-slide-left-out.forward.svelte-16ocdv9{transform:translate(-100%);opacity:0}.animot-canvas.transition-slide-left-in.forward.svelte-16ocdv9{animation:svelte-16ocdv9-animot-slideInFromRight calc(var(--transition-duration) * .6) ease forwards}.animot-canvas.transition-slide-left-out.backward.svelte-16ocdv9{transform:translate(100%);opacity:0}.animot-canvas.transition-slide-left-in.backward.svelte-16ocdv9{animation:svelte-16ocdv9-animot-slideInFromLeft calc(var(--transition-duration) * .6) ease forwards}.animot-canvas.transition-slide-right-out.forward.svelte-16ocdv9{transform:translate(100%);opacity:0}.animot-canvas.transition-slide-right-in.forward.svelte-16ocdv9{animation:svelte-16ocdv9-animot-slideInFromLeft calc(var(--transition-duration) * .6) ease forwards}.animot-canvas.transition-slide-up-out.svelte-16ocdv9{transform:translateY(-100%);opacity:0}.animot-canvas.transition-slide-up-in.svelte-16ocdv9{animation:svelte-16ocdv9-animot-slideInFromBottom calc(var(--transition-duration) * .6) ease forwards}.animot-canvas.transition-slide-down-out.svelte-16ocdv9{transform:translateY(100%);opacity:0}.animot-canvas.transition-slide-down-in.svelte-16ocdv9{animation:svelte-16ocdv9-animot-slideInFromTop calc(var(--transition-duration) * .6) ease forwards}.animot-canvas.transition-zoom-in-out.svelte-16ocdv9{transform:scale(.5);opacity:0}.animot-canvas.transition-zoom-in-in.svelte-16ocdv9{animation:svelte-16ocdv9-animot-zoomIn calc(var(--transition-duration) * .6) ease forwards}.animot-canvas.transition-zoom-out-out.svelte-16ocdv9{transform:scale(1.5);opacity:0}.animot-canvas.transition-zoom-out-in.svelte-16ocdv9{animation:svelte-16ocdv9-animot-zoomOut calc(var(--transition-duration) * .6) ease forwards}.animot-canvas.transition-flip-out.svelte-16ocdv9{transform:perspective(1000px) rotateY(90deg);opacity:0}.animot-canvas.transition-flip-in.svelte-16ocdv9{animation:svelte-16ocdv9-animot-flipIn calc(var(--transition-duration) * .6) ease forwards}@keyframes svelte-16ocdv9-animot-fadeIn{0%{opacity:0}to{opacity:1}}@keyframes svelte-16ocdv9-animot-slideInFromRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes svelte-16ocdv9-animot-slideInFromLeft{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes svelte-16ocdv9-animot-slideInFromBottom{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes svelte-16ocdv9-animot-slideInFromTop{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes svelte-16ocdv9-animot-zoomIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes svelte-16ocdv9-animot-zoomOut{0%{transform:scale(1.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes svelte-16ocdv9-animot-flipIn{0%{transform:perspective(1000px) rotateY(-90deg);opacity:0}to{transform:perspective(1000px) rotateY(0);opacity:1}}.animot-canvas.transition-flip-x-out.svelte-16ocdv9{transform:perspective(1000px) rotateX(90deg);opacity:0}.animot-canvas.transition-flip-x-in.svelte-16ocdv9{animation:svelte-16ocdv9-animot-flipXIn calc(var(--transition-duration) * .6) ease forwards}@keyframes svelte-16ocdv9-animot-flipXIn{0%{transform:perspective(1000px) rotateX(-90deg);opacity:0}to{transform:perspective(1000px) rotateX(0);opacity:1}}.animot-canvas.transition-flip-y-out.svelte-16ocdv9{transform:perspective(1000px) rotateY(90deg);opacity:0}.animot-canvas.transition-flip-y-in.svelte-16ocdv9{animation:svelte-16ocdv9-animot-flipYIn calc(var(--transition-duration) * .6) ease forwards}@keyframes svelte-16ocdv9-animot-flipYIn{0%{transform:perspective(1000px) rotateY(-90deg);opacity:0}to{transform:perspective(1000px) rotateY(0);opacity:1}}.animot-svg-element.svelte-16ocdv9{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.animot-svg-element.svelte-16ocdv9 svg{width:100%;height:100%}.animot-controls.svelte-16ocdv9{position:absolute;bottom:12px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:8px;padding:8px 16px;background:#000000b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:10px;opacity:0;transition:opacity .3s ease .15s;z-index:100}.animot-presenter.svelte-16ocdv9:hover .animot-controls:where(.svelte-16ocdv9),.animot-menu-visible.svelte-16ocdv9 .animot-controls:where(.svelte-16ocdv9){opacity:1;transition-delay:0s}.animot-controls.svelte-16ocdv9 button:where(.svelte-16ocdv9){display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;border:none;cursor:pointer;background:#ffffff1a;color:#fff;transition:background .2s}.animot-controls.svelte-16ocdv9 button:where(.svelte-16ocdv9):hover:not(:disabled){background:#fff3}.animot-controls.svelte-16ocdv9 button:where(.svelte-16ocdv9):disabled{opacity:.3;cursor:not-allowed}.animot-controls.svelte-16ocdv9 button.active:where(.svelte-16ocdv9){background:#6366f199}.animot-controls.svelte-16ocdv9 button:where(.svelte-16ocdv9) svg:where(.svelte-16ocdv9){width:16px;height:16px}.animot-slide-indicator.svelte-16ocdv9{font-size:12px;color:#fff;min-width:50px;text-align:center;font-family:system-ui,sans-serif}.animot-arrow.svelte-16ocdv9{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;background:#00000080;color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s .15s;z-index:100;padding:0;margin:0}.animot-presenter.svelte-16ocdv9:hover .animot-arrow:where(.svelte-16ocdv9){opacity:1;transition-delay:0s}.animot-presenter.svelte-16ocdv9:hover .animot-arrow:where(.svelte-16ocdv9):disabled{opacity:.3;cursor:not-allowed}.animot-arrow.svelte-16ocdv9:hover:not(:disabled){background:#000000b3}.animot-arrow.svelte-16ocdv9 svg:where(.svelte-16ocdv9){width:20px;height:20px}.animot-arrow-left.svelte-16ocdv9{left:8px}.animot-arrow-right.svelte-16ocdv9{right:8px}.animot-progress-bar.svelte-16ocdv9{position:absolute;bottom:0;left:0;right:0;height:3px;background:#ffffff1a;z-index:100;opacity:0;transition:opacity .3s .15s}.animot-presenter.svelte-16ocdv9:hover .animot-progress-bar:where(.svelte-16ocdv9){opacity:1;transition-delay:0s}.animot-progress-fill.svelte-16ocdv9{height:100%;background:linear-gradient(135deg,#7c3aed,#ec4899);transition:width .6s ease}.animot-loading.svelte-16ocdv9{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.animot-spinner.svelte-16ocdv9{width:32px;height:32px;border:3px solid rgba(255,255,255,.2);border-top-color:#7c3aed;border-radius:50%;animation:svelte-16ocdv9-animot-spin .8s linear infinite}@keyframes svelte-16ocdv9-animot-spin{to{transform:rotate(360deg)}}.animot-error.svelte-16ocdv9{color:#ef4444;padding:20px;text-align:center;font-family:system-ui,sans-serif}