animot-presenter 0.5.18 → 0.5.20

package/dist/AnimotPresenter.svelte

@@ -7,6 +7,8 @@
 	import ConfettiEffect from './effects/ConfettiEffect.svelte';
 	import CounterRenderer from './renderers/CounterRenderer.svelte';
 	import ChartRenderer from './renderers/ChartRenderer.svelte';
+	import ProgressBar from './renderers/ProgressBar.svelte';
+	import Container from './renderers/Container.svelte';
 	import IconRenderer from './renderers/IconRenderer.svelte';
 	import FlowMarkers from './FlowMarkers.svelte';
 	import { traceSvgPaths } from './utils/trace-svg-paths';
@@ -16,11 +18,11 @@
 	import { cameraTransform, defaultCamera, parallaxOffset } from './utils/camera';
 	import { parseEmbedUrl } from './utils/video-embed';
 	import EmbedPlayer from './EmbedPlayer.svelte';
-	import { easeInOutCubic, getEasingFn, getBackgroundStyle, hashFraction, getFloatAnimName, computeFloatAmp, computeFloatSpeed } from './engine/utils';
+	import { easeInOutCubic, getEasingFn, getBackgroundStyle, gradientShapeToCss, hashFraction, getFloatAnimName, computeFloatAmp, computeFloatSpeed } from './engine/utils';
 	import type {
 		AnimotProject, AnimotPresenterProps, CanvasElement, CodeElement, TextElement,
 		ArrowElement, ImageElement, VideoElement, ShapeElement, CounterElement, ChartElement, IconElement,
-		SvgElement, MotionPathElement, PathPoint,
+		SvgElement, MotionPathElement, ProgressElement, ContainerElement, PathPoint,
 		Slide, CodeAnimationMode, AnimatableProperty
 	} from './types';
 	import './styles/presenter.css';
@@ -53,6 +55,92 @@
 		if (motionPathLoopAbort) { motionPathLoopAbort.abort(); motionPathLoopAbort = null; }
 	}
 
+	// Keyframe schedule loop — independent from motion-path / morph engines.
+	let keyframeLoopAbort: AbortController | null = null;
+	let keyframeOverrides = $state<Map<string, Record<string, any>>>(new Map());
+	function cancelKeyframeLoops() {
+		if (keyframeLoopAbort) { keyframeLoopAbort.abort(); keyframeLoopAbort = null; }
+	}
+	function setKeyframeOverride(elementId: string, prop: string, value: any) {
+		const cur = keyframeOverrides.get(elementId) ?? {};
+		keyframeOverrides.set(elementId, { ...cur, [prop]: value });
+		keyframeOverrides = new Map(keyframeOverrides);
+	}
+	function easingForTween(name: string | undefined): string {
+		// Animotion tween easing accepts strings; pass-through with default.
+		switch (name) {
+			case 'linear': case 'ease-in': case 'ease-out': case 'ease-in-out': return name;
+			case 'spring': return 'ease-out';
+			case 'ease': default: return 'ease-out';
+		}
+	}
+	function animateKeyframes(slide: Slide) {
+		cancelKeyframeLoops();
+		keyframeLoopAbort = new AbortController();
+		const signal = keyframeLoopAbort.signal;
+		if (keyframeOverrides.size > 0) keyframeOverrides = new Map();
+		for (const element of slide.canvas.elements) {
+			if (!element.keyframes || element.keyframes.length === 0) continue;
+			const animated = animatedElements.get(element.id) as any;
+			if (!animated) continue;
+			const sorted = [...element.keyframes].sort((a, b) => a.time - b.time);
+			const first = sorted[0];
+
+			// Snap to KF1 instantly so the slide-displayed pose IS the start.
+			if (first.position) { animated.x?.to(first.position.x, { duration: 0 }); animated.y?.to(first.position.y, { duration: 0 }); }
+			if (first.size) { animated.width?.to(first.size.width, { duration: 0 }); animated.height?.to(first.size.height, { duration: 0 }); }
+			if (first.rotation !== undefined) animated.rotation?.to(first.rotation, { duration: 0 });
+			if (first.opacity !== undefined) animated.opacity?.to(first.opacity, { duration: 0 });
+			if (first.skewX !== undefined) animated.skewX?.to(first.skewX, { duration: 0 });
+			if (first.skewY !== undefined) animated.skewY?.to(first.skewY, { duration: 0 });
+			if (first.tiltX !== undefined) animated.tiltX?.to(first.tiltX, { duration: 0 });
+			if (first.tiltY !== undefined) animated.tiltY?.to(first.tiltY, { duration: 0 });
+			if (first.borderRadius !== undefined) animated.borderRadius?.to(first.borderRadius, { duration: 0 });
+			if (first.fontSize !== undefined) animated.fontSize?.to(first.fontSize, { duration: 0 });
+			if (first.fillColor !== undefined) animated.fillColor?.to(first.fillColor, { duration: 0 });
+			if (first.strokeColor !== undefined) animated.strokeColor?.to(first.strokeColor, { duration: 0 });
+			if (first.strokeWidth !== undefined) animated.strokeWidth?.to(first.strokeWidth, { duration: 0 });
+			if (first.blur !== undefined) animated.blur?.to(first.blur, { duration: 0 });
+			if (first.brightness !== undefined) animated.brightness?.to(first.brightness, { duration: 0 });
+			if (first.contrast !== undefined) animated.contrast?.to(first.contrast, { duration: 0 });
+			if (first.saturate !== undefined) animated.saturate?.to(first.saturate, { duration: 0 });
+			if (first.grayscale !== undefined) animated.grayscale?.to(first.grayscale, { duration: 0 });
+			if (first.backgroundColor !== undefined) setKeyframeOverride(element.id, 'backgroundColor', first.backgroundColor);
+			if (first.color !== undefined) setKeyframeOverride(element.id, 'color', first.color);
+
+			for (const kf of sorted.slice(1)) {
+				const delay = Math.max(0, kf.time);
+				setTimeout(() => {
+					if (signal.aborted) return;
+					const easing = easingForTween(kf.easing);
+					const idx = sorted.indexOf(kf);
+					const prevTime = idx === 0 ? 0 : sorted[idx - 1].time;
+					const span = Math.max(50, kf.time - prevTime);
+					if (kf.position) { animated.x?.to(kf.position.x, { duration: span, easing }); animated.y?.to(kf.position.y, { duration: span, easing }); }
+					if (kf.size) { animated.width?.to(kf.size.width, { duration: span, easing }); animated.height?.to(kf.size.height, { duration: span, easing }); }
+					if (kf.rotation !== undefined) animated.rotation?.to(kf.rotation, { duration: span, easing });
+					if (kf.opacity !== undefined) animated.opacity?.to(kf.opacity, { duration: span, easing });
+					if (kf.skewX !== undefined) animated.skewX?.to(kf.skewX, { duration: span, easing });
+					if (kf.skewY !== undefined) animated.skewY?.to(kf.skewY, { duration: span, easing });
+					if (kf.tiltX !== undefined) animated.tiltX?.to(kf.tiltX, { duration: span, easing });
+					if (kf.tiltY !== undefined) animated.tiltY?.to(kf.tiltY, { duration: span, easing });
+					if (kf.borderRadius !== undefined) animated.borderRadius?.to(kf.borderRadius, { duration: span, easing });
+					if (kf.fontSize !== undefined) animated.fontSize?.to(kf.fontSize, { duration: span, easing });
+					if (kf.fillColor !== undefined) animated.fillColor?.to(kf.fillColor, { duration: span, easing });
+					if (kf.strokeColor !== undefined) animated.strokeColor?.to(kf.strokeColor, { duration: span, easing });
+					if (kf.strokeWidth !== undefined) animated.strokeWidth?.to(kf.strokeWidth, { duration: span, easing });
+					if (kf.blur !== undefined) animated.blur?.to(kf.blur, { duration: span, easing });
+					if (kf.brightness !== undefined) animated.brightness?.to(kf.brightness, { duration: span, easing });
+					if (kf.contrast !== undefined) animated.contrast?.to(kf.contrast, { duration: span, easing });
+					if (kf.saturate !== undefined) animated.saturate?.to(kf.saturate, { duration: span, easing });
+					if (kf.grayscale !== undefined) animated.grayscale?.to(kf.grayscale, { duration: span, easing });
+					if (kf.backgroundColor !== undefined) setKeyframeOverride(element.id, 'backgroundColor', kf.backgroundColor);
+					if (kf.color !== undefined) setKeyframeOverride(element.id, 'color', kf.color);
+				}, delay);
+			}
+		}
+	}
+
 	// --- Motion Path Utilities ---
 	function buildPresenterPathD(points: PathPoint[], closed: boolean): string {
 		if (points.length < 2) return '';
@@ -179,6 +267,7 @@
 	// Snapshot of charts on the OUTGOING slide so the renderer can tween
 	// data values into the new slide. Updated alongside previousCodeContent.
 	let previousChartContent = $state<Map<string, ChartElement>>(new Map());
+	let previousProgressContent = $state<Map<string, ProgressElement>>(new Map());
 	let codeMorphState = $state<Map<string, {oldCode: string, newCode: string, mode: CodeAnimationMode, speed: number, highlightColor: string}>>(new Map());
 	let textTypewriterState = $state<Map<string, {fullText: string, displayedChars: number, isAnimating: boolean}>>(new Map());
 	let typewriterIntervals = new Map<string, ReturnType<typeof setInterval>>();
@@ -261,8 +350,67 @@
 		return elements.map(e => e.id);
 	});
 
-	function getElementInSlide(slide: Slide | null, elementId: string): CanvasElement | undefined {
-		return slide?.canvas.elements.find(el => el.id === elementId);
+	/**
+	 * Resolve an element's pose on a slide, taking per-element keyframes
+	 * into account. Keyframes turn the element's "effective state" into
+	 * something time-dependent — `pose='enter'` returns the FIRST keyframe's
+	 * state (used as morph TARGET / initial-tween-seed), `pose='exit'` the
+	 * LAST keyframe's (used as morph SOURCE on slide leave).
+	 */
+	function getElementInSlide(slide: Slide | null, elementId: string, pose: 'enter' | 'exit' = 'enter'): CanvasElement | undefined {
+		const el = slide?.canvas.elements.find(el => el.id === elementId);
+		if (!el) return el;
+		if (!el.keyframes || el.keyframes.length === 0) return el;
+		const sorted = [...el.keyframes].sort((a, b) => a.time - b.time);
+		const k = pose === 'exit' ? sorted[sorted.length - 1] : sorted[0];
+		const out: any = { ...el };
+		if (k.position) out.position = k.position;
+		if (k.size) out.size = k.size;
+		if (k.rotation !== undefined) out.rotation = k.rotation;
+		if (k.opacity !== undefined) out.opacity = k.opacity;
+		if (k.skewX !== undefined) out.skewX = k.skewX;
+		if (k.skewY !== undefined) out.skewY = k.skewY;
+		if (k.tiltX !== undefined) out.tiltX = k.tiltX;
+		if (k.tiltY !== undefined) out.tiltY = k.tiltY;
+		if (k.borderRadius !== undefined) out.borderRadius = k.borderRadius;
+		if (k.fontSize !== undefined) out.fontSize = k.fontSize;
+		if (k.fillColor !== undefined) out.fillColor = k.fillColor;
+		if (k.strokeColor !== undefined) out.strokeColor = k.strokeColor;
+		if (k.strokeWidth !== undefined) out.strokeWidth = k.strokeWidth;
+		if (k.blur !== undefined) out.blur = k.blur;
+		if (k.brightness !== undefined) out.brightness = k.brightness;
+		if (k.contrast !== undefined) out.contrast = k.contrast;
+		if (k.saturate !== undefined) out.saturate = k.saturate;
+		if (k.grayscale !== undefined) out.grayscale = k.grayscale;
+		return out as CanvasElement;
+	}
+
+	/**
+	 * Overlay the current LIVE tween values for properties that the renderer
+	 * reads directly from element data. Lets per-element keyframes drive
+	 * borderRadius / fontSize / shape colors / stroke width / CSS filters
+	 * at render time, plus non-tweened overrides (backgroundColor, color).
+	 */
+	function liveProps<T extends CanvasElement>(element: T): T {
+		const a = animatedElements.get(element.id);
+		const overrides = keyframeOverrides.get(element.id);
+		if (!a && !overrides) return element;
+		const e = element as any;
+		const out: any = { ...element };
+		if (a) {
+			if ((a as any).borderRadius && e.borderRadius !== undefined) out.borderRadius = (a as any).borderRadius.current;
+			if ((a as any).fontSize && e.fontSize !== undefined) out.fontSize = (a as any).fontSize.current;
+			if ((a as any).fillColor && e.fillColor !== undefined) out.fillColor = (a as any).fillColor.current;
+			if ((a as any).strokeColor && e.strokeColor !== undefined) out.strokeColor = (a as any).strokeColor.current;
+			if ((a as any).strokeWidth && e.strokeWidth !== undefined) out.strokeWidth = (a as any).strokeWidth.current;
+			if ((a as any).blur && e.blur !== undefined) out.blur = (a as any).blur.current;
+			if ((a as any).brightness && e.brightness !== undefined) out.brightness = (a as any).brightness.current;
+			if ((a as any).contrast && e.contrast !== undefined) out.contrast = (a as any).contrast.current;
+			if ((a as any).saturate && e.saturate !== undefined) out.saturate = (a as any).saturate.current;
+			if ((a as any).grayscale && e.grayscale !== undefined) out.grayscale = (a as any).grayscale.current;
+		}
+		if (overrides) Object.assign(out, overrides);
+		return out as T;
 	}
 
 	// Typewriter
@@ -495,6 +643,7 @@
 		isTransitioning = true;
 		clearAllTypewriterAnimations();
 		cancelMotionPathLoops();
+		cancelKeyframeLoops();
 		const firstSlide = slides[0];
 		if (!firstSlide) { isTransitioning = false; return; }
 
@@ -554,6 +703,7 @@
 		codeMorphState = new Map();
 		previousCodeContent = newPreviousCodeContent;
 		previousChartContent = new Map();
+		previousProgressContent = new Map();
 		shapeMorphStates = new Map();
 		elementContent = new Map(elementContent);
 		currentSlideIndex = 0;
@@ -572,6 +722,7 @@
 			}
 		}
 
+		animateKeyframes(firstSlide);
 		animateMotionPaths(firstSlide);
 		onslidechange?.(0, slides.length);
 	}
@@ -585,6 +736,7 @@
 		const targetSlide = slides[targetIndex];
 		clearAllTypewriterAnimations();
 		cancelMotionPathLoops();
+		cancelKeyframeLoops();
 		// Manual arrow nav and the autoplay timer are both forms of "user
 		// is moving forward in the deck" — both should swap narration to
 		// the new slide. The pause button is what stops audio. Without
@@ -603,6 +755,7 @@
 			const newCodeMorphState = new Map(codeMorphState);
 			const newPreviousCodeContent = new Map(previousCodeContent);
 			const newPreviousChartContent = new Map(previousChartContent);
+			const newPreviousProgressContent = new Map(previousProgressContent);
 			for (const elementId of allElementIds) {
 				const targetEl = getElementInSlide(targetSlide, elementId);
 				const animated = animatedElements.get(elementId);
@@ -619,6 +772,12 @@
 							newPreviousChartContent.set(elementId, JSON.parse(JSON.stringify(outgoing)));
 						}
 					}
+					if (targetEl.type === 'progress') {
+						const outgoing = elementContent.get(elementId);
+						if (outgoing && outgoing.type === 'progress') {
+							newPreviousProgressContent.set(elementId, JSON.parse(JSON.stringify(outgoing)));
+						}
+					}
 					newElementContent.set(elementId, JSON.parse(JSON.stringify(targetEl)));
 					if (animated) {
 						animated.x.to(targetEl.position.x, { duration: 0 }); animated.y.to(targetEl.position.y, { duration: 0 });
@@ -660,6 +819,7 @@
 			codeMorphState = newCodeMorphState;
 			previousCodeContent = newPreviousCodeContent;
 			previousChartContent = newPreviousChartContent;
+			previousProgressContent = newPreviousProgressContent;
 			elementContent = newElementContent;
 			animatedElements = new Map(animatedElements);
 			currentSlideIndex = targetIndex;
@@ -673,6 +833,7 @@
 			transitionClass = `transition-${transition.type}-in`;
 			await new Promise(r => setTimeout(r, duration * 0.6));
 			transitionClass = '';
+			animateKeyframes(targetSlide);
 			animateMotionPaths(targetSlide);
 			isTransitioning = false;
 			onslidechange?.(targetIndex, slides.length);
@@ -683,7 +844,9 @@
 		// Per-element morphing (transition type = 'none')
 		const animations: Promise<void>[] = [];
 		for (const elementId of allElementIds) {
-			const currentEl = getElementInSlide(currentSlide, elementId);
+			// FROM-sync: use the EXIT pose (last keyframe) so morph starts
+			// from where the keyframe loop left the element on screen.
+			const currentEl = getElementInSlide(currentSlide, elementId, 'exit');
 			const animated = animatedElements.get(elementId);
 			if (!animated) continue;
 			if (currentEl) {
@@ -727,18 +890,25 @@
 						previousChartContent.set(elementId, JSON.parse(JSON.stringify(outgoing)));
 					}
 				}
+				if (targetEl.type === 'progress') {
+					const outgoing = elementContent.get(elementId);
+					if (outgoing && outgoing.type === 'progress') {
+						previousProgressContent.set(elementId, JSON.parse(JSON.stringify(outgoing)));
+					}
+				}
 				elementContent.set(elementId, JSON.parse(JSON.stringify(targetEl)));
 			}
 		}
 		elementContent = new Map(elementContent);
+		previousProgressContent = new Map(previousProgressContent);
 		previousChartContent = new Map(previousChartContent);
 
 		interface AnimationTask { elementId: string; order: number; delay: number; elementDuration: number; run: () => Promise<void>[]; }
 		const animationTasks: AnimationTask[] = [];
 
 		for (const elementId of allElementIds) {
-			const currentEl = getElementInSlide(currentSlide, elementId);
-			const targetEl = getElementInSlide(targetSlide, elementId);
+			const currentEl = getElementInSlide(currentSlide, elementId, 'exit');
+			const targetEl = getElementInSlide(targetSlide, elementId, 'enter');
 			const animated = animatedElements.get(elementId);
 			if (!animated) continue;
 			const animConfig = targetEl?.animationConfig || currentEl?.animationConfig;
@@ -981,6 +1151,7 @@
 			const animated = animatedElements.get(elementId);
 			if (!onSlide && animated) { animated.opacity.to(0, { duration: 0 }); }
 		}
+		animateKeyframes(slides[targetIndex]);
 		animateMotionPaths(slides[targetIndex]);
 		onslidechange?.(targetIndex, slides.length);
 		if (targetIndex === slides.length - 1 && !loop) oncomplete?.();
@@ -1149,7 +1320,7 @@
 			initAllAnimatedElements();
 			await loadCodeHighlights();
 			loading = false;
-			if (currentSlide) setTimeout(() => animateMotionPaths(currentSlide!), 300);
+			if (currentSlide) setTimeout(() => { animateKeyframes(currentSlide!); animateMotionPaths(currentSlide!); }, 300);
 			// Narration starts via the play-state effect below — not on
 			// mount. That way the user's click on Play is the gesture
 			// that unlocks audio, and a paused deck stays silent.
@@ -1281,7 +1452,7 @@
 							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) : ''}` }}
 						>
 							{#if element.type === 'code'}
-								{@const codeEl = element as CodeElement}
+								{@const codeEl = liveProps(element) as CodeElement}
 								{@const morphState = codeMorphState.get(codeEl.id)}
 								<div class="animot-code-block" class:transparent-bg={codeEl.transparentBackground} style:font-size="{codeEl.fontSize}px" style:font-weight={codeEl.fontWeight || 400} style:padding="{codeEl.padding}px" style:border-radius="{animated.borderRadius.current}px" style:background={codeEl.bgColor ?? '#0d1117'}>
 									{#if codeEl.showHeader}
@@ -1338,7 +1509,7 @@
 									</div>
 								</div>
 							{:else if element.type === 'text'}
-								{@const textEl = element as TextElement}
+								{@const textEl = liveProps(element) as TextElement}
 								{@const animFontSize = animated.fontSize?.current ?? textEl.fontSize}
 								{@const typewriterState = textTypewriterState.get(element.id)}
 								{@const displayText = typewriterState?.isAnimating ? typewriterState.fullText.slice(0, typewriterState.displayedChars) : textEl.content}
@@ -1351,13 +1522,13 @@
 									style:font-family="'{textEl.fontFamily}', sans-serif"
 									style:font-style={textEl.fontStyle ?? 'normal'}
 									style:text-decoration={textEl.textDecoration ?? 'none'}
-									style:color={textEl.backgroundImage ? 'transparent' : (textEl.hollow && textEl.textStroke?.enabled ? 'transparent' : textEl.color)}
-									style:background-color={textEl.backgroundImage ? 'transparent' : textEl.backgroundColor}
-									style:background-image={textEl.backgroundImage ? `url(${textEl.backgroundImage})` : 'none'}
-									style:background-size={textEl.backgroundImage ? `${textEl.backgroundScale ?? 100}%` : 'cover'}
-									style:background-position={textEl.backgroundImage ? `${textEl.backgroundPositionX ?? 50}% ${textEl.backgroundPositionY ?? 50}%` : 'center'}
-									style:-webkit-background-clip={textEl.backgroundImage ? 'text' : 'border-box'}
-									style:background-clip={textEl.backgroundImage ? 'text' : 'border-box'}
+									style:color={(textEl.gradient || textEl.backgroundImage) ? 'transparent' : (textEl.hollow && textEl.textStroke?.enabled ? 'transparent' : textEl.color)}
+									style:background-color={(textEl.gradient || textEl.backgroundImage) ? 'transparent' : textEl.backgroundColor}
+									style:background-image={textEl.gradient ? gradientShapeToCss(textEl.gradient) : textEl.backgroundImage ? `url(${textEl.backgroundImage})` : 'none'}
+									style:background-size={textEl.backgroundImage && !textEl.gradient ? `${textEl.backgroundScale ?? 100}%` : 'cover'}
+									style:background-position={textEl.backgroundImage && !textEl.gradient ? `${textEl.backgroundPositionX ?? 50}% ${textEl.backgroundPositionY ?? 50}%` : 'center'}
+									style:-webkit-background-clip={(textEl.gradient || textEl.backgroundImage) ? 'text' : 'border-box'}
+									style:background-clip={(textEl.gradient || textEl.backgroundImage) ? 'text' : 'border-box'}
 									style:padding="{textEl.padding}px"
 									style:border-radius="{textEl.borderRadius}px"
 									style:text-align={textEl.textAlign}
@@ -1369,7 +1540,7 @@
 									{#if !isActionTextMode}{displayText}{#if typewriterState?.isAnimating}<span class="animot-typewriter-cursor">|</span>{/if}{/if}
 								</div>
 							{:else if element.type === 'arrow'}
-								{@const arrowEl = element as ArrowElement}
+								{@const arrowEl = liveProps(element) as ArrowElement}
 								{@const cp = arrowEl.controlPoints || []}
 								{@const pathD = cp.length === 0 ? `M ${arrowEl.startPoint.x} ${arrowEl.startPoint.y} L ${arrowEl.endPoint.x} ${arrowEl.endPoint.y}` : cp.length === 1 ? `M ${arrowEl.startPoint.x} ${arrowEl.startPoint.y} Q ${cp[0].x} ${cp[0].y} ${arrowEl.endPoint.x} ${arrowEl.endPoint.y}` : cp.length === 2 ? `M ${arrowEl.startPoint.x} ${arrowEl.startPoint.y} C ${cp[0].x} ${cp[0].y} ${cp[1].x} ${cp[1].y} ${arrowEl.endPoint.x} ${arrowEl.endPoint.y}` : buildCatmullRomPath(arrowEl.startPoint, cp, arrowEl.endPoint)}
 								{@const lastCp = cp.length > 0 ? cp[cp.length - 1] : arrowEl.startPoint}
@@ -1392,11 +1563,11 @@
 									{/if}
 								</svg>
 							{:else if element.type === 'image'}
-								{@const imgEl = element as ImageElement}
+								{@const imgEl = liveProps(element) as ImageElement}
 								{@const clipPath = imgEl.clipMask?.enabled ? (imgEl.clipMask.shapeType === 'circle' ? 'circle(50% at 50% 50%)' : imgEl.clipMask.shapeType === 'ellipse' ? 'ellipse(50% 50% at 50% 50%)' : imgEl.clipMask.shapeType === 'triangle' ? 'polygon(50% 0%, 0% 100%, 100% 100%)' : imgEl.clipMask.shapeType === 'star' ? 'polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)' : imgEl.clipMask.shapeType === 'hexagon' ? 'polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)' : (imgEl.clipMask.borderRadius ?? 0) > 0 ? `inset(0 round ${imgEl.clipMask.borderRadius}px)` : 'none') : 'none'}
 								<img class="animot-image-element" src={imgEl.src} alt="" style:object-fit={imgEl.objectFit} style:border-radius="{imgEl.clipMask?.enabled ? 0 : imgEl.borderRadius}px" style:clip-path={clipPath} style:background-color={imgEl.backgroundColor ?? 'transparent'} />
 								{:else if element.type === 'video'}
-									{@const videoEl = element as VideoElement}
+									{@const videoEl = liveProps(element) as VideoElement}
 									{@const videoEmbed = parseEmbedUrl(videoEl.src)}
 									{#if videoEmbed}
 										<div class="animot-video-element animot-embed-wrap" style:border-radius="{videoEl.borderRadius}px" style:opacity={videoEl.opacity}>
@@ -1406,7 +1577,7 @@
 										<video class="animot-video-element" src={videoEl.src} poster={videoEl.posterImage} autoplay={videoEl.autoplay} loop={videoEl.loop} muted={videoEl.muted} controls={!!videoEl.showControls} playsinline preload="auto" style:object-fit={videoEl.objectFit} style:border-radius="{videoEl.borderRadius}px" style:opacity={videoEl.opacity}></video>
 									{/if}
 							{:else if element.type === 'shape'}
-								{@const shapeEl = element as ShapeElement}
+								{@const shapeEl = liveProps(element) as ShapeElement}
 								{@const animFill = animated.fillColor?.current ?? shapeEl.fillColor}
 								{@const animStroke = animated.strokeColor?.current ?? shapeEl.strokeColor}
 								{@const animStrokeWidth = animated.strokeWidth?.current ?? shapeEl.strokeWidth}
@@ -1433,6 +1604,15 @@
 									slideId={currentSlide?.id ?? ''}
 									previousElement={previousChartContent.get(element.id) ?? null}
 								/>
+							{:else if element.type === 'progress'}
+								<ProgressBar
+									element={element as ProgressElement}
+									isPresenting={true}
+									slideId={currentSlide?.id ?? ''}
+									previousElement={previousProgressContent.get(element.id) ?? null}
+								/>
+							{:else if element.type === 'container'}
+								<Container element={element as ContainerElement} />
 							{:else if element.type === 'icon'}
 								<IconRenderer element={element as IconElement} />
 							{:else if element.type === 'svg'}

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}.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}}.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}