.site-header[data-astro-cid-3ef6ksr2]{position:sticky;top:0;z-index:40;min-height:var(--layout-topbar, 56px);background:color-mix(in srgb,var(--v2-surface) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--v2-line)}.header-inner[data-astro-cid-3ef6ksr2]{min-height:var(--layout-topbar, 56px);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding-top:8px;padding-bottom:8px}.brand[data-astro-cid-3ef6ksr2]{display:inline-flex;align-items:center;font-weight:700;font-size:16px;letter-spacing:-.02em;color:var(--v2-text);text-decoration:none;flex-shrink:0}.brand-wordmark[data-astro-cid-3ef6ksr2]{display:inline-flex;align-items:center}.brand-wordmark-img[data-astro-cid-3ef6ksr2]{height:28px;width:auto;display:block}.main-nav[data-astro-cid-3ef6ksr2]{display:flex;align-items:center}.nav-list[data-astro-cid-3ef6ksr2]{display:flex;align-items:center;flex-wrap:wrap;gap:2px;list-style:none;margin:0;padding:0}.nav-link[data-astro-cid-3ef6ksr2]{display:inline-flex;align-items:center;padding:6px 12px;border-radius:var(--radius-md);font-size:var(--text-base);font-weight:500;color:var(--v2-text-2);text-decoration:none;transition:color var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard)}.nav-link[data-astro-cid-3ef6ksr2]:hover{color:var(--v2-text);background:color-mix(in srgb,var(--v2-teal) 8%,transparent)}.nav-link[data-astro-cid-3ef6ksr2].active{color:var(--v2-teal-deep);background:color-mix(in srgb,var(--v2-teal) 14%,transparent);font-weight:600}.header-actions[data-astro-cid-3ef6ksr2]{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}.nav-signin[data-astro-cid-3ef6ksr2]{display:inline-flex;align-items:center;padding:6px 10px;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;color:var(--v2-text-2);text-decoration:none;transition:color var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard)}.nav-signin[data-astro-cid-3ef6ksr2]:hover{color:var(--v2-text);background:color-mix(in srgb,var(--v2-teal) 8%,transparent)}@media(max-width:820px){.header-inner[data-astro-cid-3ef6ksr2]{flex-wrap:wrap;row-gap:6px;padding-top:8px;padding-bottom:8px}.brand[data-astro-cid-3ef6ksr2]{order:1}.header-actions[data-astro-cid-3ef6ksr2]{order:2}.nav-signin[data-astro-cid-3ef6ksr2]{display:none}.main-nav[data-astro-cid-3ef6ksr2]{order:3;width:100%;border-top:1px solid var(--v2-line);padding-top:6px}.nav-list[data-astro-cid-3ef6ksr2]{width:100%;justify-content:flex-start;gap:4px}.nav-link[data-astro-cid-3ef6ksr2]{padding:5px 9px;font-size:var(--text-sm)}}.site-footer[data-astro-cid-sz7xmlte]{background:var(--v2-band);color:var(--v2-band-text-2);border-top:0;padding:var(--space-12) 0 var(--space-8);margin-top:auto}.footer-content[data-astro-cid-sz7xmlte]{display:grid;grid-template-columns:1.4fr 2fr;gap:var(--space-12);margin-bottom:var(--space-10)}.footer-brand[data-astro-cid-sz7xmlte]{max-width:360px}.footer-brand-dark[data-astro-cid-sz7xmlte]{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:700;font-size:18px;text-decoration:none;margin-bottom:var(--space-3)}.footer-brand-dark[data-astro-cid-sz7xmlte] img[data-astro-cid-sz7xmlte]{height:30px;width:auto;display:block}.footer-tagline[data-astro-cid-sz7xmlte]{color:var(--v2-band-text-2);font-size:var(--text-sm);line-height:1.6;margin-bottom:var(--space-2)}.footer-nav[data-astro-cid-sz7xmlte]{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8)}.footer-col[data-astro-cid-sz7xmlte] h2[data-astro-cid-sz7xmlte].footer-heading{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff;margin-bottom:var(--space-3)}.footer-col[data-astro-cid-sz7xmlte] ul[data-astro-cid-sz7xmlte]{list-style:none;padding:0;margin:0}.footer-col[data-astro-cid-sz7xmlte] li[data-astro-cid-sz7xmlte]{margin-bottom:var(--space-2)}.footer-col[data-astro-cid-sz7xmlte] a[data-astro-cid-sz7xmlte]{color:#c9d6e3;font-size:var(--text-sm);text-decoration:none;transition:color var(--dur-fast) var(--ease-standard)}.footer-col[data-astro-cid-sz7xmlte] a[data-astro-cid-sz7xmlte]:hover{color:#fff;text-decoration:underline}.footer-bottom[data-astro-cid-sz7xmlte]{padding-top:var(--space-6);border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-3)}.footer-bottom[data-astro-cid-sz7xmlte] p[data-astro-cid-sz7xmlte]{color:var(--v2-band-text-2);font-size:var(--text-xs);margin:0}@media(max-width:768px){.footer-content[data-astro-cid-sz7xmlte]{grid-template-columns:1fr;gap:var(--space-8)}.footer-nav[data-astro-cid-sz7xmlte]{grid-template-columns:repeat(2,1fr);gap:var(--space-6)}}@media(max-width:480px){.footer-nav[data-astro-cid-sz7xmlte]{grid-template-columns:1fr}}:root{--product-name: "AnimJS Studio";--product-short: "AnimJS";--product-domain: "animjs.com";--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--weight-regular: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--text-display: 48px;--leading-display: 56px;--tracking-display: -.02em;--text-3xl: 36px;--leading-3xl: 44px;--tracking-3xl: -.02em;--text-2xl: 28px;--leading-2xl: 36px;--tracking-2xl: -.015em;--text-xl: 22px;--leading-xl: 30px;--tracking-xl: -.01em;--text-lg: 18px;--leading-lg: 28px;--tracking-lg: -.005em;--text-md: 16px;--leading-md: 24px;--tracking-md: 0em;--type-www-body: 15px;--leading-www-body: 24px;--text-base: 14px;--leading-base: 22px;--tracking-base: 0em;--text-sm: 13px;--leading-sm: 20px;--tracking-sm: 0em;--text-xs: 12px;--leading-xs: 16px;--tracking-xs: .01em;--space-0: 0px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--space-20: 80px;--radius-xs: 4px;--radius-sm: 8px;--radius-md: 10px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 24px;--radius-pill: 999px;--dur-instant: 80ms;--dur-fast: .12s;--dur-base: .2s;--dur-slow: .3s;--dur-deliberate: .5s;--ease-standard: cubic-bezier(.2,0,0,1);--ease-enter: cubic-bezier(0,0,.2,1);--ease-exit: cubic-bezier(.4,0,1,1);--ease-linear: linear;--layout-topbar: 56px;--layout-sidebar: 232px;--layout-sidebar-collapsed: 64px;--layout-panel-right: 380px;--layout-panel-left: 264px;--layout-timeline: 232px;--layout-content-max: 1200px;--layout-hit-target-min: 32px;--layout-hit-target-touch: 44px;--z-base: 0;--z-sticky: 10;--z-dropdown: 30;--z-overlay: 40;--z-dialog: 50;--z-toast: 60;--z-tooltip: 70}:root{--color-bg-canvas: #F8FAFC;--color-bg-surface: #FFFFFF;--color-bg-subtle: #F1F5F9;--color-bg-hover: #EEF2F6;--color-bg-selected: #EAF9F6;--color-bg-overlay: #FFFFFF;--color-bg-scrim: rgba(1,41,61,.48);--color-bg-stage: #0B1620;--color-border-subtle: #E2E8F0;--color-border-default: #CBD5E1;--color-border-control: #74859A;--color-text-primary: #0F2233;--color-text-secondary: #475569;--color-text-muted: #5B6B7F;--color-text-disabled: #94A3B8;--color-text-on-accent: #012A3D;--color-text-on-navy: #FFFFFF;--color-text-link: #0B5F85;--color-brand-navy: #014465;--color-brand-navy-deep: #01293D;--color-accent: #37C3A8;--color-accent-hover: #2DA38C;--color-accent-strong: #014465;--color-accent-soft: #EAF9F6;--color-accent-soft-border: #2DA38C;--color-cta-bg: #FFD400;--color-cta-bg-hover: #F2C800;--color-cta-fg: #01293D;--color-solid-bg: #014465;--color-solid-bg-hover: #01293D;--color-solid-fg: #FFFFFF;--color-ai-fg: #0B7D68;--color-ai-soft: #E6F7F3;--color-ai-border: #9ADBCB;--color-success-fg: #15703A;--color-success-soft: #E3F6EA;--color-success-border: #9BD8B3;--color-warning-fg: #8A5200;--color-warning-soft: #FFF4DB;--color-warning-border: #E8C26B;--color-danger-fg: #B42318;--color-danger-soft: #FDECEA;--color-danger-border: #F1A9A2;--color-danger-solid: #B42318;--color-danger-solid-fg: #FFFFFF;--color-info-fg: #0B5F85;--color-info-soft: #E0F2FE;--color-info-border: #9CCDE8;--color-focus-ring: #0B6A94;--color-selection-stroke: #37C3A8;--color-selection-under: #01293D;--color-selection-fill: rgba(55,195,168,.14);--color-handle-fill: #FFFFFF;--color-handle-stroke: #01293D;--color-guide: #FF4DA6;--color-tl-beat-bg: #FFFFFF;--color-tl-beat-border: #74859A;--color-tl-beat-active: #EAF9F6;--color-tl-action-bg: #014465;--color-tl-action-fg: #FFFFFF;--color-tl-audio-bg: #E6F7F3;--color-tl-audio-wave: #0B7D68;--color-tl-playhead: #D92D20;--color-tl-ruler: #5B6B7F;--shadow-0: none;--shadow-1: 0 1px 2px rgba(1,41,61,.06), 0 0 0 1px rgba(1,41,61,.02);--shadow-2: 0 2px 6px rgba(1,41,61,.07), 0 1px 2px rgba(1,41,61,.05);--shadow-3: 0 8px 24px rgba(1,41,61,.1), 0 2px 6px rgba(1,41,61,.06);--shadow-4: 0 20px 48px rgba(1,41,61,.16), 0 4px 12px rgba(1,41,61,.08);--v2-ink: #09152B;--v2-navy: #01293D;--v2-teal: #37C3A8;--v2-teal-deep: #146B7D;--v2-teal-ink: #0E5664;--v2-paper: #FBF8F3;--v2-paper-2: #F4EFE6;--v2-surface: #FFFFFF;--v2-text: #0F2233;--v2-text-2: #43546A;--v2-line: #E6E0D5;--v2-band: #09152B;--v2-band-2: #0D2240;--v2-band-text: #FFFFFF;--v2-band-text-2: #B9C8D8;--v2-grad-teal: linear-gradient(135deg, #37C3A8 0%, #2AA6A0 55%, #146B7D 100%);--v2-grad-hero: radial-gradient(60% 70% at 85% 20%, rgba(55,195,168,.28), transparent 60%), radial-gradient(50% 60% at 10% 100%, rgba(20,107,125,.45), transparent 65%), linear-gradient(180deg, #09152B 0%, #0B1E36 55%, #01293D 100%);--v2-grad-mint: linear-gradient(135deg, #37C3A8 0%, #6FD9C4 100%);--v2-cta-bg: #37C3A8;--v2-cta-bg-hover: #52D2B9;--v2-cta-fg: #09152B;--v2-card-shadow: 0 1px 2px rgba(9,21,43,.05), 0 10px 30px rgba(9,21,43,.06);color-scheme:light}.brand-name:before{content:var(--product-name)}.brand-short:before{content:var(--product-short)}@media(prefers-reduced-motion:reduce){:root{--dur-instant:0ms;--dur-fast:.12s;--dur-base:.12s;--dur-slow:.12s;--dur-deliberate:0ms}*{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}:root{--bg: var(--color-bg-canvas);--bg-app: var(--color-bg-canvas);--bg-alt: var(--color-bg-subtle);--bg-panel: var(--color-bg-subtle);--bg-surface: var(--color-bg-surface);--bg-hover: var(--color-bg-hover);--card: var(--color-bg-surface);--text: var(--color-text-primary);--text-primary: var(--color-text-primary);--text-secondary: var(--color-text-secondary);--text-muted: var(--color-text-muted);--navy: var(--color-brand-navy);--navy-dark: var(--color-brand-navy-deep);--teal: var(--color-accent);--teal-dark: var(--color-accent-hover);--teal-light: var(--color-accent-soft);--yellow: var(--color-cta-bg);--accent: var(--color-accent);--accent-hover: var(--color-accent-hover);--accent-subtle: var(--color-accent-soft);--accent-text: var(--color-accent-strong);--success: var(--color-success-fg);--success-subtle: var(--color-success-soft);--warning: var(--color-warning-fg);--warning-subtle: var(--color-warning-soft);--danger: var(--color-danger-fg);--danger-subtle: var(--color-danger-soft);--border: var(--color-border-default);--border-subtle: var(--color-border-subtle);--border-strong: var(--color-border-control);--sp-0: var(--space-0);--sp-1: var(--space-1);--sp-2: var(--space-2);--sp-3: var(--space-3);--sp-4: var(--space-4);--sp-5: var(--space-5);--sp-6: var(--space-6);--sp-8: var(--space-8);--sp-10: var(--space-10);--sp-12: var(--space-12);--sp-16: var(--space-16);--sp-20: var(--space-20);--fs-xs: var(--text-xs);--fs-sm: var(--text-sm);--fs-base: var(--text-base);--fs-md: var(--text-md);--fs-lg: var(--text-lg);--fs-xl: var(--text-xl);--fs-2xl: var(--text-2xl);--fs-3xl: var(--text-3xl);--r-xs: var(--radius-xs);--r-sm: var(--radius-sm);--r-md: var(--radius-md);--r-lg: var(--radius-lg);--r-xl: var(--radius-xl);--r-2xl: var(--radius-2xl);--r-full: var(--radius-pill);--shadow-sm: var(--shadow-1);--shadow-md: var(--shadow-2);--shadow-lg: var(--shadow-3);--shadow-xl: var(--shadow-4);--ease-out: var(--ease-standard);--transition-fast: var(--dur-fast) var(--ease-standard);--transition-base: var(--dur-base) var(--ease-standard);--topbar-h: var(--layout-topbar);--container-max: var(--layout-content-max);--container-narrow: 720px}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-height:100vh;display:flex;flex-direction:column;font-family:var(--font-sans);font-size:var(--type-www-body);line-height:var(--leading-www-body);letter-spacing:var(--tracking-base);color:var(--color-text-primary);background:var(--color-bg-canvas)}main{flex:1}:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px;box-shadow:0 0 0 4px color-mix(in srgb,var(--color-focus-ring) 24%,transparent)}a{color:var(--color-text-link);text-decoration:none;transition:color var(--dur-fast) var(--ease-standard)}a:hover{text-decoration:underline}img,video{max-width:100%;height:auto;display:block}h1,h2,h3,h4,h5,h6{margin:0;font-weight:var(--weight-bold);line-height:1.2;color:var(--color-text-primary)}p{margin:0}code{font-family:var(--font-mono);font-size:.9em;padding:1px 5px;border-radius:var(--radius-xs);background:var(--color-bg-subtle);color:var(--color-text-primary)}pre code{padding:0;background:transparent;color:#e8f0f5}.container{max-width:var(--layout-content-max);margin:0 auto;padding-left:var(--space-6);padding-right:var(--space-6)}@media(max-width:640px){.container{padding-left:var(--space-4);padding-right:var(--space-4)}}.container--narrow{max-width:720px}.section{padding:96px 0}@media(max-width:768px){.section{padding:56px 0}}.section-head{max-width:680px;margin-bottom:var(--space-10);text-align:left}.section-head h2{font-size:var(--text-3xl);line-height:var(--leading-3xl);letter-spacing:var(--tracking-3xl);font-weight:var(--weight-bold);color:var(--color-text-primary);margin-bottom:var(--space-2)}.section-head p{font-size:var(--text-base);line-height:var(--leading-base);color:var(--color-text-secondary)}.eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-sans);font-size:var(--text-xs);line-height:var(--leading-sm);font-weight:var(--weight-semibold);letter-spacing:.05em;text-transform:uppercase;color:var(--v2-teal-deep);margin-bottom:var(--space-2)}.eyebrow-dot{width:6px;height:6px;border-radius:var(--radius-pill);background:var(--v2-teal)}.grad{background:linear-gradient(90deg,#37c3a8,#8be6d3);-webkit-background-clip:text;background-clip:text;color:transparent}.card{background:var(--color-bg-surface);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-1);transition:border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}.card-interactive:hover{border-color:var(--color-border-control);box-shadow:var(--shadow-2);transform:translateY(-2px)}@media(prefers-reduced-motion:reduce){.card-interactive:hover{transform:none}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:38px;padding:0 var(--space-4);border-radius:var(--radius-md);font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--weight-semibold);line-height:1.2;text-decoration:none;cursor:pointer;border:1px solid transparent;white-space:nowrap;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}.btn:hover{text-decoration:none}.btn-sm{min-height:32px;padding:0 var(--space-3);font-size:var(--text-sm);border-radius:var(--radius-sm)}.btn-lg{min-height:44px;padding:0 var(--space-5);font-size:var(--text-md);border-radius:var(--radius-md)}.btn-primary{background:var(--v2-cta-bg);color:var(--v2-cta-fg);border-color:transparent;box-shadow:0 6px 20px #37c3a84d}.btn-primary:hover{background:var(--v2-cta-bg-hover);color:var(--v2-cta-fg)}.btn-solid{background:var(--color-solid-bg);color:var(--color-solid-fg);border-color:transparent}.btn-solid:hover{background:var(--color-solid-bg-hover);color:var(--color-solid-fg)}.btn-outline{background:transparent;color:var(--v2-teal-deep);border-color:color-mix(in srgb,var(--v2-teal-deep) 45%,transparent)}.btn-outline:hover{background:color-mix(in srgb,var(--v2-teal) 10%,transparent);border-color:var(--v2-teal-deep);color:var(--v2-teal-deep)}.on-navy .btn-outline{color:#fff;border-color:#ffffff61}.on-navy .btn-outline:hover{background:#ffffff14;border-color:#fff9}.btn:focus-visible{outline:3px solid #FFD400;outline-offset:2px}.btn-secondary{background:var(--color-bg-surface);color:var(--color-text-primary);border-color:var(--color-border-default)}.btn-secondary:hover{background:var(--color-bg-hover);border-color:var(--color-border-control);color:var(--color-text-primary)}.btn-ghost{background:transparent;color:var(--color-text-secondary);border-color:transparent}.btn-ghost:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}.tabular-nums{font-variant-numeric:tabular-nums}.pd{background:var(--color-warning-soft);color:var(--color-warning-fg);padding:1px 5px;border-radius:var(--radius-xs);text-decoration:underline dashed var(--color-warning-border);text-underline-offset:3px}@media(prefers-reduced-motion:no-preference){.reveal-on-scroll{opacity:0;transform:translateY(14px);transition:opacity var(--dur-slow) var(--ease-enter),transform var(--dur-slow) var(--ease-enter)}.reveal-on-scroll.is-visible{opacity:1;transform:translateY(0)}}.skip-link{position:absolute;top:-100%;left:var(--space-4);padding:var(--space-2) var(--space-4);background:var(--color-brand-navy);color:var(--color-text-on-navy);border-radius:var(--radius-md);z-index:var(--z-toast);transition:top var(--dur-fast) var(--ease-standard)}.skip-link:focus{top:var(--space-4)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/Inter-400.woff2) format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/Inter-700.woff2) format("woff2")}