Merge pull request #33 from heygen-com/docs/mintlify-setup

docs: add Mintlify documentation site
2026-09-01 19:42:03 +00:00 · 2026-03-23 18:09:57 -07:00
parent 20be2ea1c2 43283348eb
commit 2a6b547b74
26 changed files with 3932 additions and 2 deletions
@@ -10,8 +10,31 @@ concurrency:
  cancel-in-progress: true

 jobs:
+  changes:
+    name: Detect changes
+    runs-on: ubuntu-latest
+    timeout-minutes: 2
+    outputs:
+      code: ${{ steps.filter.outputs.code }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: dorny/paths-filter@v3
+        id: filter
+        with:
+          filters: |
+            code:
+              - "packages/**"
+              - "scripts/**"
+              - "package.json"
+              - "pnpm-lock.yaml"
+              - "pnpm-workspace.yaml"
+              - "tsconfig*.json"
+              - "Dockerfile*"
+
  build:
    name: Build
+    needs: changes
+    if: needs.changes.outputs.code == 'true'
    runs-on: ubuntu-latest
    timeout-minutes: 10
    steps:
@@ -28,6 +51,8 @@ jobs:

  typecheck:
    name: Typecheck
+    needs: changes
+    if: needs.changes.outputs.code == 'true'
    runs-on: ubuntu-latest
    timeout-minutes: 10
    steps:
@@ -45,6 +70,8 @@ jobs:

  test-core:
    name: "Test: core"
+    needs: changes
+    if: needs.changes.outputs.code == 'true'
    runs-on: ubuntu-latest
    timeout-minutes: 10
    steps:
@@ -61,6 +88,8 @@ jobs:

  test-engine:
    name: "Test: engine"
+    needs: changes
+    if: needs.changes.outputs.code == 'true'
    runs-on: ubuntu-latest
    timeout-minutes: 10
    steps:
@@ -77,6 +106,8 @@ jobs:

  test-runtime-contract:
    name: "Test: runtime contract"
+    needs: changes
+    if: needs.changes.outputs.code == 'true'
    runs-on: ubuntu-latest
    timeout-minutes: 10
    steps:
@@ -0,0 +1,35 @@
+name: Docs
+
+on:
+  pull_request:
+    paths:
+      - "docs/**"
+      - "DOCS_GUIDELINES.md"
+  push:
+    branches: [main]
+    paths:
+      - "docs/**"
+
+concurrency:
+  group: docs-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  validate:
+    name: Validate docs
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Validate build
+        working-directory: docs
+        run: npx mint validate
+
+      - name: Check broken links
+        working-directory: docs
+        run: npx mint broken-links
@@ -7,7 +7,27 @@ on:
      - main

 jobs:
+  changes:
+    name: Detect changes
+    runs-on: ubuntu-latest
+    timeout-minutes: 2
+    outputs:
+      code: ${{ steps.filter.outputs.code }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: dorny/paths-filter@v3
+        id: filter
+        with:
+          filters: |
+            code:
+              - "packages/**"
+              - "scripts/**"
+              - "Dockerfile*"
+              - "pnpm-lock.yaml"
+
  regression-shards:
+    needs: changes
+    if: needs.changes.outputs.code == 'true'
    runs-on: ubuntu-latest
    timeout-minutes: 40
    strategy:
@@ -83,11 +103,15 @@ jobs:
  # Summary job — matches the required check name in branch protection
  regression:
    runs-on: ubuntu-latest
-    needs: regression-shards
+    needs: [changes, regression-shards]
    if: always()
    steps:
-      - name: Check shard results
+      - name: Check results
        run: |
+          if [ "${{ needs.changes.outputs.code }}" != "true" ]; then
+            echo "No code changes — skipping regression (auto-pass)"
+            exit 0
+          fi
          if [ "${{ needs.regression-shards.result }}" != "success" ]; then
            echo "One or more regression shards failed"
            exit 1
@@ -0,0 +1,148 @@
+# Documentation Guidelines
+
+Standards for writing and maintaining Hyperframes documentation. Based on patterns from Remotion, Stripe, Tailwind CSS, and Astro.
+
+## Core Principles
+
+1. **One-sentence intro rule** — Every page opens with a single sentence telling the reader what this page helps them do or understand. No preamble, no history.
+
+2. **Outcome before implementation** — Show what the code produces (rendered result, terminal output, file structure) before showing the code itself.
+
+3. **Show, don't tell** — Use concrete examples with realistic values. Never use `foo`/`bar`/`baz`. Prefer a working HTML snippet over a description of what to write.
+
+4. **Two content modes** — Guides build narratives with progressive complexity. References enable scanning with standardized structure. Never mix them.
+
+5. **No dead ends** — Every page links forward (next steps), backward (prerequisites), and sideways (related concepts). Readers should never reach a page with nowhere to go.
+
+## Page Structure
+
+### Guides (concepts/, guides/)
+
+```
+Title
+├── One-sentence purpose statement
+├── What this looks like (output, demo, or visual)
+├── Minimal working example
+├── Deeper explanation with progressive complexity
+├── Common patterns / best practices
+├── Warnings and pitfalls (sparingly)
+└── Next steps (cards or links to related pages)
+```
+
+### Reference pages (reference/)
+
+```
+Title
+├── One-sentence definition
+├── Complete attribute/API table
+├── Detailed section per item (type, default, description, example)
+├── Rules and constraints
+└── Related pages
+```
+
+### Package pages (packages/)
+
+```
+Title
+├── One-line description + install command
+├── When to use this package (and when NOT to)
+├── Key features list
+├── Minimal usage example with expected output
+├── Configuration reference
+└── Related packages
+```
+
+## Writing Style
+
+- **Second person, active voice, imperative mood**: "Use X to do Y." Not "The developer should consider using X."
+- **Present tense**: "The runtime manages media playback." Not "The runtime will manage..."
+- **Be direct**: "This breaks rendering." Not "This may potentially cause issues with the rendering pipeline."
+- **Prerequisites at point of need**: State requirements where they matter, not in a wall at the top.
+- **Conversational but precise**: Friendly tone, exact technical details.
+
+## Code Examples
+
+### Always annotate code blocks
+
+```mdx
+```html index.html
+<div data-composition-id="root" ...>
+```
+```
+
+The filename after the language tag tells readers where the code goes.
+
+### Use numbered comments for multi-step code
+
+```javascript
+// 1. Create a paused timeline
+const tl = gsap.timeline({ paused: true });
+
+// 2. Add animations
+tl.from("#title", { opacity: 0, y: -50, duration: 1 }, 0);
+
+// 3. Register the timeline
+window.__timelines["my-video"] = tl;
+```
+
+### Show expected output
+
+After CLI commands, show what the user should see:
+
+```bash
+npx hyperframes dev
+# ✓ Server running at http://localhost:3000
+# ✓ Watching for changes...
+```
+
+### Use CodeGroup for multi-platform commands
+
+```mdx
+<CodeGroup>
+```bash macOS
+brew install ffmpeg
+```
+```bash Ubuntu
+sudo apt install ffmpeg
+```
+</CodeGroup>
+```
+
+## Mintlify Components — When to Use
+
+| Component | Use When |
+|-----------|----------|
+| `<Steps>` | Sequential setup or tutorial instructions |
+| `<CodeGroup>` | Same action across platforms/languages |
+| `<Tabs>` | Alternative approaches with equal weight |
+| `<Card>` / `<Columns>` | Navigation to related pages, next steps |
+| `<Accordion>` | FAQ or optional detail that would bloat the page |
+| `<Note>` | Non-obvious behavior the reader should know |
+| `<Warning>` | Something that will break if ignored |
+| `<Tip>` | Helpful shortcut or best practice |
+| `<Info>` | Context that aids understanding |
+| `<Tree>` | File/directory structure |
+| `<Frame>` | Screenshots or diagrams with captions |
+
+### Callout budget: max 2-3 per page
+
+More than 3 callouts creates alert fatigue and readers skip them all. Reserve `<Warning>` for things that genuinely break. Use inline prose for tips.
+
+## Cross-Linking
+
+- **Link at the point of curiosity**: When you mention a concept that has its own page, link it immediately. Don't hoard links.
+- **"See also" at page bottom**: Only for genuinely related content that doesn't fit inline.
+- **Next steps cards**: End guide pages with `<Card>` links to logical next pages.
+
+## File Conventions
+
+- All doc pages are `.mdx` (not `.md`)
+- Use kebab-case for filenames: `frame-adapters.mdx`, not `frameAdapters.mdx`
+- Frontmatter requires `title` and `description`
+- Description should be under 160 characters (used for SEO/social)
+
+## Maintenance
+
+- Docs live in the repo at `/docs` and deploy automatically on merge to `main`
+- PRs that change user-facing behavior should update relevant doc pages
+- Run `mint validate` and `mint broken-links` before pushing doc changes
@@ -0,0 +1,161 @@
+---
+title: Compositions
+description: "The fundamental building block of a Hyperframes video."
+---
+
+A composition is an HTML document that defines a video timeline. Every clip -- video, image, audio -- lives inside a composition.
+
+## Structure
+
+Every composition needs a root element with `data-composition-id`:
+
+```html index.html
+<div id="root" data-composition-id="root"
+     data-start="0" data-width="1920" data-height="1080">
+  <!-- Elements go here -->
+</div>
+```
+
+The `index.html` file is the top-level composition. It can contain nested compositions within it. Any composition can be imported into another -- there is no special "root" type.
+
+## Clip Types
+
+A clip is any discrete block on the timeline, represented as an HTML element with [data attributes](/concepts/data-attributes):
+
+- `<video>` -- Video clips, B-roll, A-roll
+- `<img>` -- Static images, overlays
+- `<audio>` -- Music, sound effects
+- `<div data-composition-id="...">` -- Nested compositions (animations, grouped sequences)
+
+See the [HTML Schema Reference](/reference/html-schema) for the full list of attributes on each clip type.
+
+## Nested Compositions
+
+You can embed one composition inside another in two ways: loading from an external file or defining it inline. External files are the recommended approach for reusable compositions.
+
+<Tabs>
+  <Tab title="External file">
+    Reference another HTML file with `data-composition-src`. The framework automatically fetches the file, extracts the `<template>` content, mounts it, executes scripts, and registers the timeline.
+
+    ```html index.html
+    <div
+      id="el-5"
+      data-composition-id="intro-anim"
+      data-composition-src="compositions/intro-anim.html"
+      data-start="0"
+      data-track-index="3"
+    ></div>
+    ```
+
+    Each external composition file wraps its content in a `<template>` tag:
+
+    ```html compositions/intro-anim.html
+    <template id="intro-anim-template">
+      <div data-composition-id="intro-anim" data-width="1920" data-height="1080">
+        <div class="title">Welcome!</div>
+
+        <style>
+          [data-composition-id="intro-anim"] .title {
+            font-size: 72px; color: white; text-align: center;
+          }
+        </style>
+
+        <script>
+          const tl = gsap.timeline({ paused: true });
+          tl.from(".title", { opacity: 0, y: -50, duration: 1 });
+          window.__timelines["intro-anim"] = tl;
+        </script>
+      </div>
+    </template>
+    ```
+  </Tab>
+  <Tab title="Inline">
+    Define a nested composition directly inside the parent. This is simpler for one-off compositions that do not need to be reused.
+
+    ```html index.html
+    <div id="root" data-composition-id="root"
+         data-start="0" data-width="1920" data-height="1080">
+
+      <!-- Inline nested composition -->
+      <div id="el-5" data-composition-id="intro-anim"
+           data-start="0" data-track-index="3"
+           data-width="1920" data-height="1080">
+        <div class="title">Welcome!</div>
+      </div>
+
+      <script>
+        // Timeline for the inline composition
+        const introTl = gsap.timeline({ paused: true });
+        introTl.from(".title", { opacity: 0, y: -50, duration: 1 });
+        window.__timelines["intro-anim"] = introTl;
+      </script>
+    </div>
+    ```
+
+    Inline compositions do not use `<template>` tags or `data-composition-src`.
+  </Tab>
+</Tabs>
+
+### Project Structure
+
+<Tree>
+  <Tree.Folder name="project" defaultOpen>
+    <Tree.File name="index.html" />
+    <Tree.Folder name="compositions" defaultOpen>
+      <Tree.File name="intro-anim.html" />
+      <Tree.File name="caption-overlay.html" />
+      <Tree.File name="outro-title.html" />
+    </Tree.Folder>
+    <Tree.Folder name="assets">
+      <Tree.File name="video.mp4" />
+      <Tree.File name="music.mp3" />
+      <Tree.File name="logo.png" />
+    </Tree.Folder>
+  </Tree.Folder>
+</Tree>
+
+## Two Layers: Primitives and Scripts
+
+Every composition has two layers:
+
+- **HTML** -- primitive clips (`video`, `img`, `audio`, nested compositions). The declarative structure: what plays, when, and on which track. Controlled by [data attributes](/concepts/data-attributes).
+- **Script** -- effects, transitions, dynamic DOM, canvas, SVG -- creative animation via [GSAP](/guides/gsap-animation). Scripts do **not** control media playback or clip visibility.
+
+<Warning>
+  Never use scripts to play/pause/seek media elements or to show/hide clips based on timing. The framework handles this automatically from data attributes. Scripts that duplicate this behavior will conflict with the framework. See [Common Mistakes](/guides/common-mistakes) for examples.
+</Warning>
+
+## Variables
+
+Compositions can expose variables for dynamic content:
+
+```html compositions/card.html
+<div data-composition-id="card" data-var-title="string" data-var-color="color">
+```
+
+Variables make compositions reusable as [templates](/guides/templates) -- the same composition can render different content by injecting variable values at render time.
+
+## Listing Compositions
+
+Use the [CLI](/packages/cli) to see all compositions in a project:
+
+```bash
+npx hyperframes compositions
+```
+
+## Next Steps
+
+<CardGroup cols={2}>
+  <Card title="Data Attributes" icon="code" href="/concepts/data-attributes">
+    Full reference for timing, media, and composition attributes
+  </Card>
+  <Card title="GSAP Animation" icon="wand-magic-sparkles" href="/guides/gsap-animation">
+    Add animations to your compositions with GSAP timelines
+  </Card>
+  <Card title="Templates" icon="grid-2" href="/guides/templates">
+    Start from built-in templates for common video patterns
+  </Card>
+  <Card title="HTML Schema Reference" icon="book" href="/reference/html-schema">
+    Complete schema for authoring compositions
+  </Card>
+</CardGroup>
@@ -0,0 +1,104 @@
+---
+title: Data Attributes
+description: "Core attributes for controlling element timing and behavior."
+---
+
+Hyperframes uses HTML data attributes to control timing, media playback, and [composition](/concepts/compositions) structure. These are the declarative building blocks of every video.
+
+## Timing Attributes
+
+| Attribute | Example | Description |
+|-----------|---------|-------------|
+| `data-start` | `"0"` or `"intro"` | Start time in seconds, or a clip ID reference for [relative timing](#relative-timing) |
+| `data-duration` | `"5"` | Duration in seconds. Required for images. Optional for video/audio (defaults to source duration). Not used on compositions. |
+| `data-track-index` | `"0"` | Timeline track number. Controls z-ordering (higher = in front) and groups clips into rows. Clips on the same track cannot overlap. |
+
+## Media Attributes
+
+| Attribute | Example | Description |
+|-----------|---------|-------------|
+| `data-media-start` | `"2"` | Media playback offset / trim point in seconds. Default: `0` |
+| `data-volume` | `"0.8"` | Audio/video volume, 0 to 1 |
+| `data-has-audio` | `"true"` | Indicates video has an audio track |
+
+## Composition Attributes
+
+| Attribute | Example | Description |
+|-----------|---------|-------------|
+| `data-composition-id` | `"root"` | Unique ID for [composition](/concepts/compositions) wrapper (required on every composition) |
+| `data-width` | `"1920"` | Composition width in pixels |
+| `data-height` | `"1080"` | Composition height in pixels |
+| `data-composition-src` | `"./intro.html"` | Path to external [composition](/concepts/compositions) HTML file |
+
+## Element Visibility
+
+Add `class="clip"` to all timed elements so the runtime can manage their visibility lifecycle:
+
+```html index.html
+<h1 id="title" class="clip"
+    data-start="0" data-duration="5" data-track-index="0">
+  Hello World
+</h1>
+```
+
+## Relative Timing
+
+Instead of calculating absolute start times, a clip can reference another clip's `id` in its `data-start` attribute. This means "start when that clip ends":
+
+```html index.html
+<video id="intro" data-start="0" data-duration="10" data-track-index="0" src="..."></video>
+<video id="main" data-start="intro" data-duration="20" data-track-index="0" src="..."></video>
+<video id="outro" data-start="main" data-duration="5" data-track-index="0" src="..."></video>
+```
+
+`main` resolves to second 10, `outro` resolves to second 30. If `intro`'s duration changes, downstream clips shift automatically.
+
+### Offsets (Gaps and Overlaps)
+
+Add `+ N` or `- N` after the ID to offset from the end of the referenced clip:
+
+```html index.html
+<!-- 2-second gap after intro -->
+<video id="scene-a" data-start="intro + 2" data-duration="20"
+       data-track-index="0" src="..."></video>
+
+<!-- 0.5-second overlap with intro (crossfade) -->
+<video id="scene-b" data-start="intro - 0.5" data-duration="20"
+       data-track-index="1" src="..."></video>
+```
+
+<Note>
+  Overlapping clips must be on different tracks -- clips on the same track cannot overlap in time.
+</Note>
+
+<Accordion title="Relative timing rules and constraints">
+  **Same composition only** -- references resolve within the clip's parent [composition](/concepts/compositions). You cannot reference a clip in a sibling or parent composition.
+
+  **No circular references** -- A cannot start after B if B starts after A. The resolver detects cycles and throws an error.
+
+  **Referenced clip must have a known duration** -- either an explicit `data-duration` or a duration inferred from source media. If the referenced clip has no known duration, the reference cannot resolve.
+
+  **Parsing rules** -- if the value is a valid number, it is treated as absolute seconds. Otherwise it is parsed as one of:
+  - `<id>` -- start when that clip ends
+  - `<id> + <number>` -- start N seconds after that clip ends
+  - `<id> - <number>` -- start N seconds before that clip ends
+
+  **Chain length** -- references can chain (`A` -> `B` -> `C`), but deeply nested chains make the timeline harder to reason about. Keep chains under 3-4 levels for readability.
+</Accordion>
+
+## Next Steps
+
+<CardGroup cols={2}>
+  <Card title="Compositions" icon="layer-group" href="/concepts/compositions">
+    How compositions use data attributes to define video structure
+  </Card>
+  <Card title="HTML Schema Reference" icon="book" href="/reference/html-schema">
+    Complete attribute reference with per-element details
+  </Card>
+  <Card title="GSAP Animation" icon="wand-magic-sparkles" href="/guides/gsap-animation">
+    Animate elements alongside data-attribute-driven timing
+  </Card>
+  <Card title="Common Mistakes" icon="triangle-exclamation" href="/guides/common-mistakes">
+    Pitfalls to avoid when setting up timing and attributes
+  </Card>
+</CardGroup>
@@ -0,0 +1,101 @@
+---
+title: Deterministic Rendering
+description: "Same input, identical output. Every time."
+---
+
+Hyperframes is built around a core guarantee: **the same [composition](/concepts/compositions) always produces the same video**. This is what makes automated pipelines, CI testing, and AI-driven workflows reliable.
+
+## How It Works
+
+The rendering pipeline is frame-by-frame and seek-driven. No realtime playback is involved -- every frame is independently seeked and captured.
+
+<Steps>
+  <Step title="Frame clock">
+    The [engine](/packages/engine) computes the time for each frame using integer math: `time = floor(frame) / fps`. There is no wall-clock dependency -- rendering is entirely decoupled from real time.
+  </Step>
+  <Step title="Seek">
+    The [frame adapter](/concepts/frame-adapters) receives a `seekFrame(frame)` call and deterministically positions all animations, DOM state, and canvas content to the exact frame. The adapter's `renderSeek` pauses all [GSAP](/guides/gsap-animation) timelines and seeks them to the computed time.
+  </Step>
+  <Step title="Capture">
+    Chrome's `HeadlessExperimental.beginFrame` API captures the pixel buffer for the current frame. This is a single, atomic operation -- no partial paints or race conditions.
+  </Step>
+  <Step title="Encode">
+    FFmpeg encodes the captured frames into the final MP4 video. Audio tracks from `<audio>` and `<video>` elements are mixed in during this stage.
+  </Step>
+</Steps>
+
+```mermaid
+graph LR
+    A["Frame Clock<br/>t = frame / fps"] --> B["Seek<br/>adapter.seekFrame(frame)"]
+    B --> C["Capture<br/>beginFrame API"]
+    C --> D["Encode<br/>FFmpeg"]
+    D --> E["MP4"]
+    style A fill:#00C4FF,color:#fff
+    style B fill:#00C4FF,color:#fff
+    style C fill:#00C4FF,color:#fff
+    style D fill:#00C4FF,color:#fff
+    style E fill:#00A8E1,color:#fff
+```
+
+## What Makes It Deterministic
+
+- **No wall-clock dependencies** -- rendering does not use `Date.now()`, `requestAnimationFrame`, or system timers
+- **No unseeded randomness** -- `Math.random()` without a seed breaks determinism
+- **No render-time network fetches** -- all assets must be loaded before rendering starts
+- **Fixed output parameters** -- `fps`, `width`, and `height` are locked before the first frame
+- **Finite duration** -- every [composition](/concepts/compositions) has a known, finite length
+
+These same rules apply to every [frame adapter](/concepts/frame-adapters). If you are building a custom adapter, you must follow the [determinism contract](/concepts/frame-adapters#determinism-contract).
+
+## Docker Mode
+
+For maximum reproducibility, render in Docker:
+
+```bash
+npx hyperframes render --docker -o output.mp4
+```
+
+Docker mode uses an exact Chrome version and font set, ensuring:
+- Same Chromium rendering engine across all platforms
+- Same system fonts (no platform-specific font substitution)
+- Same FFmpeg encoder version
+
+See the [Rendering guide](/guides/rendering) for all rendering options.
+
+## Preview vs. Render Parity
+
+The browser preview and the rendered MP4 should match. Hyperframes achieves this through:
+
+- **One runtime** -- the same `hyperframe.runtime` drives both preview and render
+- **Producer-canonical behavior** -- the [producer's](/packages/producer) seek semantics are the source of truth
+- **Readiness gates** -- `__playerReady` and `__renderReady` ensure the [composition](/concepts/compositions) is fully loaded before any frame is captured
+
+<Note>
+  Local rendering (without Docker) may show slight differences due to platform-specific font rendering and Chrome version. Use Docker mode when exact reproducibility matters.
+</Note>
+
+## For Adapter Authors
+
+If you are building a [frame adapter](/concepts/frame-adapters), your adapter must follow the determinism contract:
+
+- `seekFrame(frame)` must be idempotent -- same frame, same result
+- No side effects that depend on call order (must handle random access)
+- No async operations that resolve after the frame is "committed"
+- Clean lifecycle: `init` -> `seekFrame` (N times) -> `destroy`
+
+## Next Steps
+
+<CardGroup cols={2}>
+  <Card title="Frame Adapters" icon="plug" href="/concepts/frame-adapters">
+    Build adapters that uphold the determinism contract
+  </Card>
+  <Card title="Rendering" icon="film" href="/guides/rendering">
+    Render to MP4 locally or in Docker
+  </Card>
+  <Card title="@hyperframes/producer" icon="clapperboard" href="/packages/producer">
+    The full rendering pipeline that orchestrates deterministic output
+  </Card>
+  <Card title="Common Mistakes" icon="triangle-exclamation" href="/guides/common-mistakes">
+    Pitfalls that break determinism and how to avoid them
+  </Card>
+</CardGroup>
@@ -0,0 +1,144 @@
+---
+title: Frame Adapters
+description: "Bring your own animation runtime to Hyperframes."
+---
+
+The Frame Adapter pattern is how Hyperframes supports multiple animation runtimes. The core question every adapter answers:
+
+> What should the screen look like at frame N?
+
+If a runtime can answer that, it can plug into Hyperframes.
+
+<Info>
+  The Adapter API is currently at **v0** (experimental). Breaking changes are possible until v1. The core contract (seek-by-frame, deterministic output) is stable, but method signatures may evolve.
+</Info>
+
+## How It Works
+
+The host application (the [engine](/packages/engine) or [producer](/packages/producer)) drives rendering by calling adapter methods in a strict sequence. The adapter never controls its own clock -- it only responds to seek commands.
+
+```mermaid
+sequenceDiagram
+    participant Host as Host (Engine)
+    participant Adapter as Frame Adapter
+    participant Chrome as Chrome / Browser
+
+    Host->>Adapter: init(context)
+    Adapter-->>Host: ready
+    Host->>Adapter: getDurationFrames()
+    Adapter-->>Host: 300 frames
+
+    loop For each frame 0..300
+        Host->>Host: normalize frame (clamp, floor)
+        Host->>Adapter: seekFrame(frame)
+        Adapter->>Chrome: Update DOM / canvas state
+        Adapter-->>Host: done
+        Host->>Chrome: Capture pixel buffer
+    end
+
+    Host->>Adapter: destroy()
+    Adapter-->>Host: cleaned up
+```
+
+## Adapter API (v0)
+
+```typescript adapters/types.ts
+type FrameAdapterContext = {
+  compositionId: string;
+  fps: number;
+  width: number;
+  height: number;
+  rootElement?: HTMLElement;
+};
+
+type FrameAdapter = {
+  id: string;
+  init?: (ctx: FrameAdapterContext) => Promise<void> | void;
+  getDurationFrames: () => number;
+  seekFrame: (frame: number) => Promise<void> | void;
+  destroy?: () => Promise<void> | void;
+};
+```
+
+## Required Semantics
+
+- `getDurationFrames()` must return a finite integer >= 0
+- `seekFrame(frame)` must support arbitrary seek order (forward, backward, random)
+- `seekFrame(frame)` must be idempotent for the same input frame
+- `seekFrame(frame)` must clamp internal time to the adapter's range
+- Adapters should be paused/seek-driven, not clock-driven
+
+## Host Orchestration
+
+The host normalizes frames before calling the adapter:
+
+```typescript engine/render-loop.ts
+normalizedFrame = clamp(Math.floor(frame), 0, durationFrames);
+```
+
+A typical render loop:
+
+```typescript engine/render-loop.ts
+await adapter.init?.({ compositionId, fps, width, height, rootElement });
+const durationFrames = adapter.getDurationFrames();
+
+for (let frame = 0; frame <= durationFrames; frame += 1) {
+  await adapter.seekFrame(frame);
+  // capture pixel buffer for this frame
+}
+
+await adapter.destroy?.();
+```
+
+## Determinism Contract
+
+These rules are non-negotiable for any adapter. They are the foundation of Hyperframes' [deterministic rendering](/concepts/determinism) guarantee.
+
+- Canonical clock: `t = frame / fps`
+- No wall-clock dependencies (`Date.now`, drift-dependent logic)
+- No unseeded randomness
+- No render-time network fetches
+- Fixed output params (`fps`, `width`, `height`)
+- Finite duration only
+- Deterministic frame quantization before seek
+
+## Supported Runtimes
+
+First-party adapters:
+
+| Runtime | Seek Method | Status |
+|---------|------------|--------|
+| [GSAP](/guides/gsap-animation) | `timeline.seek(frame / fps)` | Available |
+| CSS/WAAPI | `animation.currentTime` | Planned |
+| Lottie | Set animation frame/progress | Planned |
+| Three.js/WebGL | Compute deterministic scene state | Planned |
+| SVG/Anime | Implement seek + duration contract | Planned |
+
+Community adapters are welcome -- if it can seek by frame, it belongs in Hyperframes.
+
+## Conformance Tests
+
+Every adapter should pass these minimum tests:
+
+1. **Repeatability** -- seek same frame twice, get identical output
+2. **Random seek** -- seek order `[90, 10, 50, 10]` produces deterministic results
+3. **Bounds** -- negative and overflow frame values do not break
+4. **Duration** -- returned duration is a finite integer
+5. **Cleanup** -- no leaked timers/listeners after `destroy`
+
+## Next Steps
+
+<CardGroup cols={2}>
+  <Card title="Deterministic Rendering" icon="lock" href="/concepts/determinism">
+    Understand the determinism guarantees adapters must uphold
+  </Card>
+  <Card title="GSAP Animation" icon="wand-magic-sparkles" href="/guides/gsap-animation">
+    See the first-party GSAP adapter in action
+  </Card>
+  <Card title="@hyperframes/engine" icon="gear" href="/packages/engine">
+    The capture engine that drives adapters during rendering
+  </Card>
+  <Card title="Contributing" icon="code-branch" href="/contributing">
+    Build and contribute your own adapter
+  </Card>
+</CardGroup>
@@ -0,0 +1,152 @@
+---
+title: Contributing
+description: "How to contribute to Hyperframes."
+---
+
+Thanks for your interest in contributing to Hyperframes! This guide covers everything you need to get set up, run tests, and submit a pull request.
+
+## Getting Started
+
+<Steps>
+  <Step title="Fork and clone">
+    Fork the repository on GitHub, then clone your fork:
+    ```bash
+    git clone https://github.com/YOUR_USERNAME/hyperframes.git
+    cd hyperframes
+    ```
+  </Step>
+  <Step title="Install dependencies">
+    Hyperframes uses [pnpm](https://pnpm.io/) for package management:
+    ```bash
+    pnpm install
+    ```
+  </Step>
+  <Step title="Build all packages">
+    Build the monorepo to ensure everything compiles:
+    ```bash
+    pnpm build
+    ```
+  </Step>
+  <Step title="Run the studio">
+    Start the development server to verify your setup:
+    ```bash
+    pnpm dev
+    ```
+    If the studio opens at `http://localhost:3000` with a preview, your environment is ready.
+  </Step>
+  <Step title="Create a branch">
+    Create a feature branch for your work:
+    ```bash
+    git checkout -b my-feature
+    ```
+  </Step>
+</Steps>
+
+## Development
+
+### Common Commands
+
+```bash
+pnpm install        # Install all dependencies
+pnpm dev            # Start the studio (composition editor + live preview)
+pnpm build          # Build all packages
+pnpm -r typecheck   # Type-check all packages
+```
+
+### Running Tests
+
+<CodeGroup>
+```bash Core
+pnpm --filter @hyperframes/core test
+```
+```bash Engine
+pnpm --filter @hyperframes/engine test
+```
+```bash Runtime Contract
+pnpm --filter @hyperframes/core test:hyperframe-runtime-ci
+```
+```bash Producer (Docker)
+cd packages/producer && pnpm docker:build:test && pnpm docker:test
+```
+</CodeGroup>
+
+### Running All Tests
+
+```bash
+pnpm -r test
+```
+
+## Packages
+
+| Package | Path | Description |
+|---------|------|-------------|
+| [`@hyperframes/core`](/packages/core) | `packages/core` | Types, HTML generation, runtime, linter |
+| [`@hyperframes/engine`](/packages/engine) | `packages/engine` | Seekable page-to-video capture engine |
+| [`@hyperframes/producer`](/packages/producer) | `packages/producer` | Full rendering pipeline (capture + encode) |
+| [`@hyperframes/studio`](/packages/studio) | `packages/studio` | Composition editor UI |
+| [`hyperframes`](/packages/cli) | `packages/cli` | CLI for creating, previewing, and rendering |
+
+## What to Work On
+
+Not sure where to start? Here are some ideas:
+
+- **Good first issues** — look for issues labeled `good first issue` on GitHub
+- **Documentation** — improve docs, add examples, fix typos
+- **Linter rules** — add new rules to catch more composition mistakes
+- **Templates** — create new starter templates
+- **Bug fixes** — check the issue tracker for reported bugs
+
+## Pull Requests
+
+### Commit Format
+
+Use [conventional commit](https://www.conventionalcommits.org/) format for all commits and PR titles:
+
+```
+feat: add timeline export
+fix: resolve seek overflow at composition boundary
+docs: add GSAP easing examples
+refactor: extract frame buffer pool into shared module
+test: add regression test for nested composition timing
+```
+
+### CI Requirements
+
+All of the following must pass before your PR can be merged:
+
+- **Build** — `pnpm build` succeeds
+- **Type check** — `pnpm -r typecheck` reports no errors
+- **Tests** — all test suites pass
+- **Semantic PR title** — PR title follows conventional commit format
+
+### Review Process
+
+- PRs require at least 1 approval from a maintainer
+- Keep PRs focused — one feature or fix per PR
+- Include a clear description of what changed and why
+- Add tests for new features and bug fixes
+
+## Reporting Issues
+
+- Use [GitHub Issues](https://github.com/heygen-com/hyperframes/issues) for bug reports and feature requests
+- Search existing issues before creating a new one
+- For bug reports, include:
+  - Steps to reproduce
+  - Expected behavior vs. actual behavior
+  - Hyperframes version (`npx hyperframes info`)
+  - Operating system and Node.js version
+
+## Community
+
+<CardGroup cols={2}>
+  <Card title="GitHub Issues" icon="github" href="https://github.com/heygen-com/hyperframes/issues">
+    Report bugs, request features, and discuss ideas.
+  </Card>
+  <Card title="Code of Conduct" icon="handshake" href="https://github.com/heygen-com/hyperframes/blob/main/CODE_OF_CONDUCT.md">
+    Our community standards and expectations.
+  </Card>
+</CardGroup>
+
+## License
+
+By contributing, you agree that your contributions will be licensed under the [MIT License](https://github.com/heygen-com/hyperframes/blob/main/LICENSE).
@@ -0,0 +1,80 @@
+{
+  "$schema": "https://mintlify.com/docs.json",
+  "name": "Hyperframes",
+  "theme": "mint",
+  "colors": {
+    "primary": "#00C4FF",
+    "light": "#00C4FF",
+    "dark": "#00A8E1"
+  },
+  "logo": {
+    "light": "/logo/light.svg",
+    "dark": "/logo/dark.svg"
+  },
+  "favicon": "/favicon.svg",
+  "navigation": {
+    "tabs": [
+      {
+        "tab": "Documentation",
+        "groups": [
+          {
+            "group": "Getting Started",
+            "pages": ["introduction", "quickstart"]
+          },
+          {
+            "group": "Concepts",
+            "pages": [
+              "concepts/compositions",
+              "concepts/data-attributes",
+              "concepts/frame-adapters",
+              "concepts/determinism"
+            ]
+          },
+          {
+            "group": "Guides",
+            "pages": [
+              "guides/gsap-animation",
+              "guides/templates",
+              "guides/rendering",
+              "guides/common-mistakes",
+              "guides/troubleshooting"
+            ]
+          }
+        ]
+      },
+      {
+        "tab": "Packages",
+        "groups": [
+          {
+            "group": "Packages",
+            "pages": [
+              "packages/core",
+              "packages/engine",
+              "packages/producer",
+              "packages/studio",
+              "packages/cli"
+            ]
+          }
+        ]
+      },
+      {
+        "tab": "Reference",
+        "groups": [
+          {
+            "group": "Reference",
+            "pages": ["reference/html-schema"]
+          },
+          {
+            "group": "Community",
+            "pages": ["contributing"]
+          }
+        ]
+      }
+    ]
+  },
+  "footer": {
+    "socials": {
+      "github": "https://github.com/heygen-com/hyperframes"
+    }
+  }
+}
@@ -0,0 +1,189 @@
+<svg width="286" height="286" viewBox="0 0 286 286" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_38479_43706)">
+<path d="M126.577 246.167C126.577 246.167 56.9989 192.871 46.3968 184.839C40.4925 180.37 34.0742 169.896 35.4093 161.657C36.4036 155.535 39.9395 152.39 44.7322 150.72C59.6578 145.508 107.021 129.152 119.751 125.064C126.767 122.807 137.906 124.874 146.223 131.672C152.815 137.057 158.021 144.95 158.088 155.127C158.238 178.152 159.456 232.045 159.456 238.978C159.456 242.932 157.792 249.636 149.999 251.987C142.414 254.272 132.979 251.071 126.572 246.167H126.577Z" fill="url(#paint0_linear_38479_43706)"/>
+<path d="M145.709 132.13C152.301 137.515 157.289 145.011 157.356 155.189C157.507 178.214 159.462 232.051 159.462 238.983C159.462 232.051 158.998 177.242 158.847 154.211C158.697 131.186 133.549 119.215 120.975 123.762C108.401 128.309 59.6634 145.514 44.7378 150.725C59.6634 145.514 107.261 129.761 119.992 125.672C127.007 123.416 137.397 125.332 145.715 132.13H145.709Z" fill="url(#paint1_linear_38479_43706)"/>
+<path d="M145.709 132.13C152.301 137.515 157.289 145.011 157.356 155.189C157.507 178.214 159.462 232.051 159.462 238.983C159.462 232.051 158.998 177.242 158.847 154.211C158.697 131.186 133.549 119.215 120.975 123.762C108.401 128.309 59.6634 145.514 44.7378 150.725C59.6634 145.514 107.261 129.761 119.992 125.672C127.007 123.416 137.397 125.332 145.715 132.13H145.709Z" fill="#AB81E9"/>
+<path d="M126.577 246.167C126.577 246.167 56.9989 192.871 46.3968 184.839C40.4925 180.37 34.0742 169.896 35.4093 161.657C36.4036 155.535 39.9395 152.39 44.7322 150.72C59.6578 145.508 107.021 129.152 119.751 125.064C126.767 122.807 137.906 124.874 146.223 131.672C152.815 137.057 158.691 145.028 158.803 155.205C158.914 165.226 158.948 181.035 159.071 196.279C159.233 216.12 159.389 235.012 159.378 238.978C159.367 242.932 157.797 249.636 149.999 251.987C142.414 254.272 132.979 251.071 126.572 246.167H126.577Z" fill="url(#paint2_linear_38479_43706)"/>
+<path d="M146.178 131.633C152.77 137.012 157.993 144.899 158.065 155.077C158.239 178.102 159.512 231.995 159.518 238.927C159.512 231.995 158.993 177.186 158.819 154.161C158.646 131.136 133.487 119.193 120.913 123.745C108.345 128.304 59.6244 145.558 44.6987 150.781C59.6188 145.558 106.971 129.153 119.696 125.053C126.711 122.79 137.85 124.84 146.173 131.633H146.178Z" fill="url(#paint3_radial_38479_43706)"/>
+<path d="M146.178 131.633C152.77 137.012 157.993 144.899 158.065 155.077C158.239 178.102 159.512 231.995 159.518 238.927C159.512 231.995 158.993 177.186 158.819 154.161C158.646 131.136 133.487 119.193 120.913 123.745C108.345 128.304 59.6244 145.558 44.6987 150.781C59.6188 145.558 106.971 129.153 119.696 125.053C126.711 122.79 137.85 124.84 146.173 131.633H146.178Z" fill="url(#paint4_radial_38479_43706)"/>
+<path d="M126.929 123.36C130.175 123.36 133.75 124.08 137.269 125.449C140.928 126.868 144.447 128.968 147.43 131.51C150.714 134.308 153.317 137.571 155.166 141.207C157.211 145.229 158.261 149.603 158.289 154.211C158.35 163.78 158.468 178.979 158.585 193.676C158.747 214.891 158.903 234.928 158.903 238.978C158.903 240.38 158.68 243.139 157.166 245.809C155.619 248.558 153.15 250.457 149.837 251.451C148.234 251.937 146.48 252.183 144.631 252.183C141.693 252.183 138.459 251.552 135.286 250.356C132.292 249.228 129.393 247.63 126.907 245.725C126.209 245.189 57.2057 192.335 46.7208 184.397C43.7547 182.152 40.7439 178.415 38.6715 174.41C37.5487 172.242 36.7388 170.086 36.264 168.008C35.7501 165.752 35.6439 163.646 35.9512 161.752C36.4092 158.92 37.4258 156.68 39.0514 154.898C40.4981 153.312 42.4141 152.116 44.911 151.245C60.2667 145.888 108.591 128.823 121.153 124.282C122.84 123.673 124.784 123.36 126.924 123.36M126.929 122.807C124.762 122.807 122.74 123.12 120.969 123.762C108.395 128.309 59.6579 145.514 44.7323 150.725C39.9395 152.396 36.4036 155.54 35.4093 161.663C34.0687 169.902 40.4925 180.37 46.3969 184.844C56.999 192.877 126.577 246.172 126.577 246.172C131.538 249.971 138.313 252.747 144.642 252.747C146.486 252.747 148.296 252.512 150.005 251.993C157.797 249.641 159.462 242.938 159.462 238.983C159.462 232.051 158.998 177.242 158.847 154.211C158.719 134.426 140.14 122.807 126.935 122.807H126.929Z" fill="url(#paint5_linear_38479_43706)"/>
+<path d="M171.198 152.558C171.198 146.251 173.605 135.9 179.253 127.879C182.431 123.366 186.442 119.243 190.592 117.355C193.821 115.886 195.368 115.646 199.194 116.433C199.194 116.433 245.597 126.382 248.429 126.957C251.261 127.533 254.344 129.454 254.758 135.353C255.171 141.252 253.618 150.575 247.01 160.194C240.408 169.807 200.194 227.89 195.15 235.174C190.101 242.458 182.515 247.105 178.214 245.971C172.751 244.53 171.583 239.497 171.622 236.023C171.7 229.61 171.198 152.563 171.198 152.563V152.558Z" fill="url(#paint6_linear_38479_43706)"/>
+<path d="M178.208 244.893C173.147 243.519 173.421 239.642 173.376 236.017C173.287 229.314 172.957 152.558 172.957 152.558C172.957 146.251 175.136 137.124 180.783 129.102C183.962 124.589 186.816 121.176 190.721 118.925C193.798 117.16 196.781 116.741 200.608 117.534C200.608 117.534 245.597 126.382 248.429 126.957C245.597 126.382 199.194 116.433 199.194 116.433C195.363 115.64 193.821 115.886 190.592 117.355C186.442 119.243 182.431 123.366 179.253 127.879C173.6 135.906 171.198 146.251 171.198 152.558C171.198 152.558 171.7 229.605 171.622 236.017C171.578 239.492 172.745 244.525 178.214 245.966C182.52 247.1 190.101 242.452 195.15 235.168C190.101 242.452 182.509 246.066 178.214 244.899L178.208 244.893Z" fill="url(#paint7_linear_38479_43706)"/>
+<path d="M178.208 244.893C173.147 243.519 173.421 239.642 173.376 236.017C173.287 229.314 172.957 152.558 172.957 152.558C172.957 146.251 175.136 137.124 180.783 129.102C183.962 124.589 186.816 121.176 190.721 118.925C193.798 117.16 196.781 116.741 200.608 117.534C200.608 117.534 245.597 126.382 248.429 126.957C245.597 126.382 199.194 116.433 199.194 116.433C195.363 115.64 193.821 115.886 190.592 117.355C186.442 119.243 182.431 123.366 179.253 127.879C173.6 135.906 171.198 146.251 171.198 152.558C171.198 152.558 171.7 229.605 171.622 236.017C171.578 239.492 172.745 244.525 178.214 245.966C182.52 247.1 190.101 242.452 195.15 235.168C190.101 242.452 182.509 246.066 178.214 244.899L178.208 244.893Z" fill="#00BA97"/>
+<path d="M172.957 152.558C172.957 146.251 175.13 137.124 180.783 129.102C183.962 124.589 186.816 121.176 190.726 118.925C193.804 117.16 196.787 116.741 200.613 117.534C200.613 117.534 245.602 126.382 248.434 126.957C251.267 127.533 254.35 129.454 254.763 135.353C255.177 141.252 253.618 150.575 247.016 160.194C240.413 169.807 200.205 227.89 195.156 235.174C190.106 242.458 182.515 247.139 178.219 245.971C173.158 244.597 173.432 239.648 173.387 236.023C173.298 229.32 172.968 152.563 172.968 152.563L172.957 152.558Z" fill="url(#paint8_linear_38479_43706)"/>
+<path d="M178.208 244.893C173.147 243.519 173.421 239.642 173.376 236.017C173.287 229.314 172.957 152.558 172.957 152.558C172.957 146.251 175.136 137.124 180.783 129.102C183.962 124.589 186.816 121.176 190.721 118.925C193.798 117.16 196.781 116.741 200.608 117.534C200.608 117.534 245.597 126.382 248.429 126.957C245.597 126.382 199.194 116.433 199.194 116.433C195.363 115.64 193.821 115.886 190.592 117.355C186.442 119.243 182.431 123.366 179.253 127.879C173.6 135.906 171.198 146.251 171.198 152.558C171.198 152.558 171.7 229.605 171.622 236.017C171.578 239.492 172.745 244.525 178.214 245.966C182.52 247.1 190.101 242.452 195.15 235.168C190.101 242.452 182.509 246.066 178.214 244.899L178.208 244.893Z" fill="url(#paint9_radial_38479_43706)"/>
+<path d="M178.208 244.893C173.147 243.519 173.421 239.642 173.376 236.017C173.287 229.314 172.957 152.558 172.957 152.558C172.957 146.251 175.136 137.124 180.783 129.102C183.962 124.589 186.816 121.176 190.721 118.925C193.798 117.16 196.781 116.741 200.608 117.534C200.608 117.534 245.597 126.382 248.429 126.957C245.597 126.382 199.194 116.433 199.194 116.433C195.363 115.64 193.821 115.886 190.592 117.355C186.442 119.243 182.431 123.366 179.253 127.879C173.6 135.906 171.198 146.251 171.198 152.558C171.198 152.558 171.7 229.605 171.622 236.017C171.578 239.492 172.745 244.525 178.214 245.966C182.52 247.1 190.101 242.452 195.15 235.168C190.101 242.452 182.509 246.066 178.214 244.899L178.208 244.893Z" fill="url(#paint10_radial_38479_43706)"/>
+<path d="M195.687 115.987V116.607C196.586 116.607 197.63 116.741 199.072 117.037C199.552 117.137 245.507 126.996 248.312 127.561C249.859 127.873 251.116 128.549 252.049 129.572C253.261 130.901 253.97 132.862 254.143 135.392C254.305 137.705 254.222 141.481 252.92 146.329C251.635 151.122 249.473 155.742 246.502 160.065C239.938 169.623 200.004 227.309 194.642 235.04C192.519 238.095 189.799 240.86 186.978 242.826C184.274 244.709 181.655 245.742 179.61 245.742C179.163 245.742 178.75 245.692 178.37 245.591C176.102 244.994 174.432 243.687 173.404 241.692C172.415 239.776 172.226 237.676 172.242 236.246C172.321 229.912 171.823 153.714 171.818 152.776C171.818 149.396 172.471 145.179 173.605 141.207C174.985 136.381 177.046 131.94 179.565 128.365C183.073 123.382 187.185 119.573 190.849 117.902C192.715 117.053 194.039 116.595 195.687 116.595V115.975M195.687 115.987C193.994 115.987 192.631 116.428 190.592 117.349C186.442 119.238 182.236 123.5 179.057 128.013C173.404 136.04 171.198 146.48 171.198 152.787C171.198 152.787 171.7 229.839 171.622 236.246C171.578 239.721 172.745 244.754 178.214 246.195C178.649 246.306 179.113 246.362 179.61 246.362C184.023 246.362 190.609 241.944 195.15 235.392C200.2 228.107 240.408 170.03 247.016 160.411C253.618 150.798 255.171 141.241 254.763 135.342C254.35 129.443 251.267 127.521 248.435 126.946C245.602 126.371 199.2 116.422 199.2 116.422C197.787 116.132 196.681 115.981 195.687 115.981V115.987Z" fill="url(#paint11_linear_38479_43706)"/>
+<path d="M31.1807 135.23C31.1807 131.002 33.9904 124.656 37.6883 120.238C37.6883 120.238 93.2795 53.4911 97.0333 48.9721C100.793 44.4531 108.317 38.6326 114.065 36.2083C119.813 33.7895 123.589 34.3593 125.309 38.0963C127.035 41.8333 141.57 73.7346 143.307 77.533C144.949 81.1248 144.653 84.2808 141.263 91.0286C136.962 99.5863 125.533 109.613 117.807 112.428C109.322 115.523 47.7374 137.917 41.2968 140.246C34.8562 142.581 31.1863 138.867 31.1863 135.225L31.1807 135.23Z" fill="url(#paint12_linear_38479_43706)"/>
+<path d="M143.302 77.5274C141.57 73.729 127.03 41.8277 125.304 38.0907C124.108 35.4932 121.919 34.4263 118.768 34.8285C121.556 34.5269 123.282 35.6552 124.455 38.1913C126.181 41.9282 140.201 72.2934 141.877 76.1142C143.235 79.1976 143.251 82.4151 140.118 88.5876C135.984 96.7207 124.287 107.714 116.567 110.529C108.082 113.624 46.1007 136.403 39.6657 138.738C33.2251 141.073 31.5996 138.051 31.5996 134.409C31.5996 131.912 32.4375 128.957 33.8843 126.047C32.2308 129.281 31.1863 132.644 31.1863 135.219C31.1863 138.861 34.8618 142.57 41.2968 140.241C47.7374 137.906 109.317 115.517 117.807 112.423C125.533 109.602 136.962 99.5751 141.263 91.023C144.653 84.2752 144.949 81.1192 143.307 77.5274H143.302Z" fill="url(#paint13_linear_38479_43706)"/>
+<path d="M143.302 77.5274C141.57 73.729 127.03 41.8277 125.304 38.0907C124.108 35.4932 121.919 34.4263 118.768 34.8285C121.556 34.5269 123.282 35.6552 124.455 38.1913C126.181 41.9282 140.201 72.2934 141.877 76.1142C143.235 79.1976 143.251 82.4151 140.118 88.5876C135.984 96.7207 124.287 107.714 116.567 110.529C108.082 113.624 46.1007 136.403 39.6657 138.738C33.2251 141.073 31.5996 138.051 31.5996 134.409C31.5996 131.912 32.4375 128.957 33.8843 126.047C32.2308 129.281 31.1863 132.644 31.1863 135.219C31.1863 138.861 34.8618 142.57 41.2968 140.241C47.7374 137.906 109.317 115.517 117.807 112.423C125.533 109.602 136.962 99.5751 141.263 91.023C144.653 84.2752 144.949 81.1192 143.307 77.5274H143.302Z" fill="#128414"/>
+<path d="M31.594 134.414C31.594 130.186 33.9904 124.656 37.6883 120.237C37.6883 120.237 93.2795 53.491 97.0333 48.972C100.793 44.453 108.317 38.6324 114.065 36.2081C119.813 33.7894 122.734 34.4597 124.46 38.1967C126.186 41.9337 140.201 72.2989 141.883 76.1196C143.24 79.2031 143.257 82.4206 140.123 88.593C135.99 96.7262 124.293 107.719 116.573 110.535C108.088 113.629 46.1063 136.409 39.6713 138.744C33.2307 141.079 31.6052 138.057 31.6052 134.414H31.594Z" fill="url(#paint14_linear_38479_43706)"/>
+<path d="M143.302 77.5274C141.57 73.729 127.03 41.8277 125.304 38.0907C124.108 35.4932 121.919 34.4263 118.768 34.8285C121.556 34.5269 123.282 35.6552 124.455 38.1913C126.181 41.9282 140.201 72.2934 141.877 76.1142C143.235 79.1976 143.251 82.4151 140.118 88.5876C135.984 96.7207 124.287 107.714 116.567 110.529C108.082 113.624 46.1007 136.403 39.6657 138.738C33.2251 141.073 31.5996 138.051 31.5996 134.409C31.5996 131.912 32.4375 128.957 33.8843 126.047C32.2308 129.281 31.1863 132.644 31.1863 135.219C31.1863 138.861 34.8618 142.57 41.2968 140.241C47.7374 137.906 109.317 115.517 117.807 112.423C125.533 109.602 136.962 99.5751 141.263 91.023C144.653 84.2752 144.949 81.1192 143.307 77.5274H143.302Z" fill="url(#paint15_radial_38479_43706)"/>
+<path d="M143.302 77.5274C141.57 73.729 127.03 41.8277 125.304 38.0907C124.108 35.4932 121.919 34.4263 118.768 34.8285C121.556 34.5269 123.282 35.6552 124.455 38.1913C126.181 41.9282 140.201 72.2934 141.877 76.1142C143.235 79.1976 143.251 82.4151 140.118 88.5876C135.984 96.7207 124.287 107.714 116.567 110.529C108.082 113.624 46.1007 136.403 39.6657 138.738C33.2251 141.073 31.5996 138.051 31.5996 134.409C31.5996 131.912 32.4375 128.957 33.8843 126.047C32.2308 129.281 31.1863 132.644 31.1863 135.219C31.1863 138.861 34.8618 142.57 41.2968 140.241C47.7374 137.906 109.317 115.517 117.807 112.423C125.533 109.602 136.962 99.5751 141.263 91.023C144.653 84.2752 144.949 81.1192 143.307 77.5274H143.302Z" fill="#128414"/>
+<path d="M143.302 77.5274C141.57 73.729 127.03 41.8277 125.304 38.0907C124.108 35.4932 121.919 34.4263 118.768 34.8285C121.556 34.5269 123.282 35.6552 124.455 38.1913C126.181 41.9282 140.201 72.2934 141.877 76.1142C143.235 79.1976 143.251 82.4151 140.118 88.5876C135.984 96.7207 124.287 107.714 116.567 110.529C108.082 113.624 46.1007 136.403 39.6657 138.738C33.2251 141.073 31.5996 138.051 31.5996 134.409C31.5996 131.912 32.4375 128.957 33.8843 126.047C32.2308 129.281 31.1863 132.644 31.1863 135.219C31.1863 138.861 34.8618 142.57 41.2968 140.241C47.7374 137.906 109.317 115.517 117.807 112.423C125.533 109.602 136.962 99.5751 141.263 91.023C144.653 84.2752 144.949 81.1192 143.307 77.5274H143.302Z" fill="url(#paint16_radial_38479_43706)"/>
+<path d="M120.003 35.5267C122.198 35.5267 123.516 36.6159 124.416 38.5654C125.806 41.5818 135.71 62.7414 140.375 72.9804C141.464 75.3712 142.268 77.1308 142.598 77.8569C143.413 79.6444 143.654 81.1806 143.397 82.9904C143.117 84.9622 142.246 87.3307 140.564 90.6822C139.548 92.6988 138.107 94.8549 136.263 97.0949C134.515 99.2231 132.51 101.312 130.292 103.306C125.857 107.3 121.204 110.361 117.534 111.702C109.378 114.679 47.7374 137.09 41.0287 139.52C39.783 139.973 38.5932 140.202 37.5039 140.202C35.817 140.202 34.387 139.654 33.3648 138.626C32.471 137.721 31.9515 136.487 31.9515 135.23C31.9515 133.303 32.5939 130.778 33.7558 128.114C34.9177 125.455 36.5208 122.829 38.2804 120.729C38.8334 120.064 93.9107 53.9324 97.6254 49.4636C99.4241 47.3018 102.211 44.7323 105.267 42.4197C108.468 39.9954 111.702 38.0404 114.361 36.9232C116.562 35.9959 118.455 35.5267 120.003 35.5267ZM120.003 34.7502C118.344 34.7502 116.361 35.2418 114.059 36.2082C108.311 38.6269 100.787 44.453 97.0277 48.972C93.2684 53.4911 37.6827 120.237 37.6827 120.237C33.9904 124.656 31.1807 131.002 31.1807 135.23C31.1807 138.085 33.4318 140.978 37.5039 140.978C38.6323 140.978 39.8947 140.755 41.2912 140.252C47.7318 137.917 109.311 115.528 117.802 112.434C125.527 109.613 136.956 99.5862 141.257 91.0342C144.648 84.2863 144.944 81.1303 143.302 77.5385C141.57 73.7401 127.03 41.8388 125.304 38.1018C124.27 35.8618 122.494 34.7558 119.997 34.7558L120.003 34.7502Z" fill="url(#paint17_linear_38479_43706)"/>
+<path d="M140.028 38.6157C138.933 36.264 138.772 35.644 139.392 34.767C140.012 33.89 140.252 32.851 143.302 33.4487C146.352 34.0464 152.926 36.6439 164.176 44.9948C175.426 53.3458 224.996 90.2018 232.816 96.0056C240.637 101.804 246.323 108.077 247.435 110.758C248.334 112.858 247.921 113.305 247.295 114.048C246.776 114.668 246.435 115.316 244.631 115.132C244.631 115.132 238.19 113.73 230.571 111.959C222.952 110.188 203.68 105.764 194.357 103.597C185.034 101.424 174.566 93.6093 170.874 90.6711C168.422 88.716 164.646 85.6661 160.763 81.0074C159.199 79.1305 158.138 77.2648 156.747 74.2316C152.524 65.0037 140.017 38.6213 140.017 38.6213L140.028 38.6157Z" fill="url(#paint18_radial_38479_43706)"/>
+<path d="M246.787 109.786C247.105 110.697 247.29 112.356 246.826 112.803C246.401 113.21 245.619 113.054 244.201 112.724C244.201 112.724 238.777 111.205 231.157 109.434C223.538 107.664 204.255 102.988 194.933 100.821C185.61 98.6478 176.382 91.2297 172.689 88.2859C170.237 86.3308 167.288 83.9791 163.405 79.3149C161.841 77.438 159.495 73.0475 158.049 70.0366C153.63 60.8366 141.793 37.3477 141.793 37.3477C140.699 34.996 140.889 34.3146 141.419 33.8621C141.682 33.6387 142.268 33.5828 143.698 33.8286C146.67 34.3369 152.541 36.5042 163.137 44.2352C152.518 36.4875 146.257 34.0297 143.302 33.4543C140.252 32.8566 140.012 33.8956 139.392 34.7726C138.772 35.6496 138.933 36.2696 140.028 38.6213C140.028 38.6213 152.535 65.0093 156.758 74.2317C158.149 77.2648 159.21 79.1305 160.775 81.0074C164.657 85.6661 168.433 88.716 170.885 90.6711C174.577 93.6149 185.045 101.43 194.368 103.597C203.691 105.77 222.963 110.188 230.582 111.959C238.201 113.73 244.642 115.132 244.642 115.132C246.446 115.316 246.787 114.668 247.306 114.048C247.926 113.305 247.692 111.881 246.792 109.781L246.787 109.786Z" fill="url(#paint19_radial_38479_43706)"/>
+<path d="M246.787 109.786C247.105 110.697 247.29 112.356 246.826 112.803C246.401 113.21 245.619 113.054 244.201 112.724C244.201 112.724 238.777 111.205 231.157 109.434C223.538 107.664 204.255 102.988 194.933 100.821C185.61 98.6478 176.382 91.2297 172.689 88.2859C170.237 86.3308 167.288 83.9791 163.405 79.3149C161.841 77.438 159.495 73.0475 158.049 70.0366C153.63 60.8366 141.793 37.3477 141.793 37.3477C140.699 34.996 140.889 34.3146 141.419 33.8621C141.682 33.6387 142.268 33.5828 143.698 33.8286C146.67 34.3369 152.541 36.5042 163.137 44.2352C152.518 36.4875 146.257 34.0297 143.302 33.4543C140.252 32.8566 140.012 33.8956 139.392 34.7726C138.772 35.6496 138.933 36.2696 140.028 38.6213C140.028 38.6213 152.535 65.0093 156.758 74.2317C158.149 77.2648 159.21 79.1305 160.775 81.0074C164.657 85.6661 168.433 88.716 170.885 90.6711C174.577 93.6149 185.045 101.43 194.368 103.597C203.691 105.77 222.963 110.188 230.582 111.959C238.201 113.73 244.642 115.132 244.642 115.132C246.446 115.316 246.787 114.668 247.306 114.048C247.926 113.305 247.692 111.881 246.792 109.781L246.787 109.786Z" fill="#0079FF"/>
+<path d="M140.922 37.5823C139.827 35.2306 139.877 34.1861 140.408 33.7336C140.671 33.5102 142.307 33.3314 143.726 33.6498C146.809 34.3425 152.926 36.6383 164.182 44.9949C175.432 53.3458 224.677 90.3527 232.503 96.1565C240.324 101.955 245.803 107.915 246.915 110.596C247.233 111.507 247.792 112.937 247.323 113.383C246.898 113.791 246.373 113.853 244.954 113.523C244.954 113.523 238.464 111.825 230.844 110.054C223.225 108.284 204.233 103.731 194.91 101.564C185.587 99.3907 176.208 91.9 172.516 88.9618C170.064 87.0067 166.729 84.4763 162.847 79.812C161.283 77.9351 159.411 76.0862 158.02 73.0474C153.797 63.8195 140.927 37.5879 140.927 37.5879L140.922 37.5823Z" fill="url(#paint20_linear_38479_43706)"/>
+<path d="M140.922 37.5823C139.827 35.2306 139.877 34.1861 140.408 33.7336C140.671 33.5102 142.307 33.3314 143.726 33.6498C146.809 34.3425 152.926 36.6383 164.182 44.9949C175.432 53.3458 224.677 90.3527 232.503 96.1565C240.324 101.955 245.803 107.915 246.915 110.596C247.233 111.507 247.792 112.937 247.323 113.383C246.898 113.791 246.373 113.853 244.954 113.523C244.954 113.523 238.464 111.825 230.844 110.054C223.225 108.284 204.233 103.731 194.91 101.564C185.587 99.3907 176.208 91.9 172.516 88.9618C170.064 87.0067 166.729 84.4763 162.847 79.812C161.283 77.9351 159.411 76.0862 158.02 73.0474C153.797 63.8195 140.927 37.5879 140.927 37.5879L140.922 37.5823Z" fill="url(#paint21_linear_38479_43706)" fill-opacity="0.2"/>
+<path d="M246.329 109.786C246.647 110.697 246.831 112.356 246.368 112.802C245.943 113.21 245.161 113.054 243.742 112.724C243.742 112.724 238.318 111.205 230.699 109.434C223.08 107.663 203.797 102.988 194.474 100.821C185.151 98.6477 175.923 91.2296 172.231 88.2858C169.779 86.3307 166.98 83.521 163.104 78.8623C161.54 76.9854 159.266 73.0529 157.819 70.0421C153.401 60.8421 141.643 37.3532 141.643 37.3532C140.548 35.0015 140.436 34.32 140.967 33.8676C141.229 33.6441 141.81 33.5883 143.246 33.834C146.217 34.3424 152.088 36.5097 162.685 44.2406C152.066 36.493 145.815 33.9905 142.849 33.4598C140.173 32.9794 139.984 34.0687 139.336 34.9792C138.838 35.6774 138.939 36.2751 140.039 38.6268C140.039 38.6268 152.261 64.3891 156.484 73.6171C157.875 76.6503 159.221 79.136 160.786 81.0129C164.668 85.6715 168.114 88.4142 170.572 90.3693C174.264 93.3131 184.598 101.284 193.921 103.457C203.244 105.63 222.516 110.049 230.135 111.819C237.754 113.59 244.195 115.07 244.195 115.07C245.999 115.255 246.34 114.685 246.859 114.059C247.479 113.316 247.245 111.892 246.345 109.792L246.329 109.786Z" fill="url(#paint22_radial_38479_43706)"/>
+<path d="M246.329 109.786C246.647 110.697 246.831 112.356 246.368 112.802C245.943 113.21 245.161 113.054 243.742 112.724C243.742 112.724 238.318 111.205 230.699 109.434C223.08 107.663 203.797 102.988 194.474 100.821C185.151 98.6477 175.923 91.2296 172.231 88.2858C169.779 86.3307 166.98 83.521 163.104 78.8623C161.54 76.9854 159.266 73.0529 157.819 70.0421C153.401 60.8421 141.643 37.3532 141.643 37.3532C140.548 35.0015 140.436 34.32 140.967 33.8676C141.229 33.6441 141.81 33.5883 143.246 33.834C146.217 34.3424 152.088 36.5097 162.685 44.2406C152.066 36.493 145.815 33.9905 142.849 33.4598C140.173 32.9794 139.984 34.0687 139.336 34.9792C138.838 35.6774 138.939 36.2751 140.039 38.6268C140.039 38.6268 152.261 64.3891 156.484 73.6171C157.875 76.6503 159.221 79.136 160.786 81.0129C164.668 85.6715 168.114 88.4142 170.572 90.3693C174.264 93.3131 184.598 101.284 193.921 103.457C203.244 105.63 222.516 110.049 230.135 111.819C237.754 113.59 244.195 115.07 244.195 115.07C245.999 115.255 246.664 114.434 247.189 113.808C247.809 113.065 247.474 111.83 246.345 109.792L246.329 109.786Z" fill="#00E1FF"/>
+<path d="M246.329 109.786C246.647 110.697 246.831 112.356 246.368 112.802C245.943 113.21 245.161 113.054 243.742 112.724C243.742 112.724 238.318 111.205 230.699 109.434C223.08 107.663 203.797 102.988 194.474 100.821C185.151 98.6477 175.923 91.2296 172.231 88.2858C169.779 86.3307 166.98 83.521 163.104 78.8623C161.54 76.9854 159.266 73.0529 157.819 70.0421C153.401 60.8421 141.643 37.3532 141.643 37.3532C140.548 35.0015 140.436 34.32 140.967 33.8676C141.229 33.6441 141.81 33.5883 143.246 33.834C146.217 34.3424 152.088 36.5097 162.685 44.2406C152.066 36.493 145.815 33.9905 142.849 33.4598C140.173 32.9794 139.984 34.0687 139.336 34.9792C138.838 35.6774 138.939 36.2751 140.039 38.6268C140.039 38.6268 152.261 64.3891 156.484 73.6171C157.875 76.6503 159.221 79.136 160.786 81.0129C164.668 85.6715 168.114 88.4142 170.572 90.3693C174.264 93.3131 184.598 101.284 193.921 103.457C203.244 105.63 222.516 110.049 230.135 111.819C237.754 113.59 244.195 115.07 244.195 115.07C245.999 115.255 246.34 114.685 246.859 114.059C247.479 113.316 247.245 111.892 246.345 109.792L246.329 109.786Z" fill="#00E1FF"/>
+<path d="M246.329 109.786C246.647 110.697 246.831 112.356 246.368 112.802C245.943 113.21 245.161 113.054 243.742 112.724C243.742 112.724 238.318 111.205 230.699 109.434C223.08 107.663 203.797 102.988 194.474 100.821C185.151 98.6477 175.923 91.2296 172.231 88.2858C169.779 86.3307 166.98 83.521 163.104 78.8623C161.54 76.9854 159.266 73.0529 157.819 70.0421C153.401 60.8421 141.643 37.3532 141.643 37.3532C140.548 35.0015 140.436 34.32 140.967 33.8676C141.229 33.6441 141.81 33.5883 143.246 33.834C146.217 34.3424 152.088 36.5097 162.685 44.2406C152.066 36.493 145.815 33.9905 142.849 33.4598C140.173 32.9794 139.984 34.0687 139.336 34.9792C138.838 35.6774 138.939 36.2751 140.039 38.6268C140.039 38.6268 152.261 64.3891 156.484 73.6171C157.875 76.6503 159.221 79.136 160.786 81.0129C164.668 85.6715 168.114 88.4142 170.572 90.3693C174.264 93.3131 184.598 101.284 193.921 103.457C203.244 105.63 222.516 110.049 230.135 111.819C237.754 113.59 244.195 115.07 244.195 115.07C245.999 115.255 246.34 114.685 246.859 114.059C247.479 113.316 247.245 111.892 246.345 109.792L246.329 109.786Z" fill="url(#paint23_radial_38479_43706)"/>
+<path d="M246.329 109.786C246.647 110.697 246.831 112.356 246.368 112.802C245.943 113.21 245.161 113.054 243.742 112.724C243.742 112.724 238.318 111.205 230.699 109.434C223.08 107.663 203.797 102.988 194.474 100.821C185.151 98.6477 175.923 91.2296 172.231 88.2858C169.779 86.3307 166.98 83.521 163.104 78.8623C161.54 76.9854 159.266 73.0529 157.819 70.0421C153.401 60.8421 141.643 37.3532 141.643 37.3532C140.548 35.0015 140.436 34.32 140.967 33.8676C141.229 33.6441 141.81 33.5883 143.246 33.834C146.217 34.3424 152.088 36.5097 162.685 44.2406C152.066 36.493 145.815 33.9905 142.849 33.4598C140.173 32.9794 139.984 34.0687 139.336 34.9792C138.838 35.6774 138.939 36.2751 140.039 38.6268C140.039 38.6268 152.261 64.3891 156.484 73.6171C157.875 76.6503 159.221 79.136 160.786 81.0129C164.668 85.6715 168.114 88.4142 170.572 90.3693C174.264 93.3131 184.598 101.284 193.921 103.457C203.244 105.63 222.516 110.049 230.135 111.819C237.754 113.59 244.195 115.07 244.195 115.07C245.999 115.255 246.34 114.685 246.859 114.059C248.083 112.786 247.245 111.892 246.345 109.792L246.329 109.786Z" fill="url(#paint24_linear_38479_43706)" fill-opacity="0.7"/>
+<path d="M246.329 109.786C246.647 110.697 246.831 112.356 246.368 112.802C245.943 113.21 245.161 113.054 243.742 112.724C243.742 112.724 238.318 111.205 230.699 109.434C223.08 107.663 203.797 102.988 194.474 100.821C185.151 98.6477 175.923 91.2296 172.231 88.2858C169.779 86.3307 166.98 83.521 163.104 78.8623C161.54 76.9854 159.266 73.0529 157.819 70.0421C153.401 60.8421 141.643 37.3532 141.643 37.3532C140.548 35.0015 140.436 34.32 140.967 33.8676C141.229 33.6441 141.81 33.5883 143.246 33.834C146.217 34.3424 152.088 36.5097 162.685 44.2406C152.066 36.493 145.815 33.9905 142.849 33.4598C140.173 32.9794 139.984 34.0687 139.336 34.9792C138.838 35.6774 138.939 36.2751 140.039 38.6268C140.039 38.6268 152.261 64.3891 156.484 73.6171C157.875 76.6503 159.221 79.136 160.786 81.0129C164.668 85.6715 168.114 88.4142 170.572 90.3693C174.264 93.3131 184.598 101.284 193.921 103.457C203.244 105.63 222.516 110.049 230.135 111.819C237.754 113.59 244.195 115.07 244.195 115.07C245.999 115.255 246.34 114.685 246.859 114.059C247.479 113.316 247.245 111.892 246.345 109.792L246.329 109.786Z" fill="url(#paint25_radial_38479_43706)"/>
+<path d="M246.329 109.786C246.647 110.697 246.831 112.356 246.368 112.802C245.943 113.21 245.161 113.054 243.742 112.724C243.742 112.724 238.318 111.205 230.699 109.434C223.08 107.663 203.797 102.988 194.474 100.821C185.151 98.6477 175.923 91.2296 172.231 88.2858C169.779 86.3307 166.98 83.521 163.104 78.8623C161.54 76.9854 159.266 73.0529 157.819 70.0421C153.401 60.8421 141.643 37.3532 141.643 37.3532C140.548 35.0015 140.436 34.32 140.967 33.8676C141.229 33.6441 141.81 33.5883 143.246 33.834C146.217 34.3424 152.088 36.5097 162.685 44.2406C152.066 36.493 145.815 33.9905 142.849 33.4598C140.173 32.9794 139.984 34.0687 139.336 34.9792C138.838 35.6774 138.939 36.2751 140.039 38.6268C140.039 38.6268 152.261 64.3891 156.484 73.6171C157.875 76.6503 159.221 79.136 160.786 81.0129C164.668 85.6715 168.114 88.4142 170.572 90.3693C174.264 93.3131 184.598 101.284 193.921 103.457C203.244 105.63 222.516 110.049 230.135 111.819C237.754 113.59 244.195 115.07 244.195 115.07C245.999 115.255 246.34 114.685 246.859 114.059C247.479 113.316 247.245 111.892 246.345 109.792L246.329 109.786Z" fill="url(#paint26_radial_38479_43706)"/>
+<path d="M246.329 109.786C246.647 110.697 246.831 112.356 246.368 112.802C245.943 113.21 245.161 113.054 243.742 112.724C243.742 112.724 238.318 111.205 230.699 109.434C223.08 107.663 203.797 102.988 194.474 100.821C185.151 98.6477 175.923 91.2296 172.231 88.2858C169.779 86.3307 166.98 83.521 163.104 78.8623C161.54 76.9854 159.266 73.0529 157.819 70.0421C153.401 60.8421 141.643 37.3532 141.643 37.3532C140.548 35.0015 140.436 34.32 140.967 33.8676C141.229 33.6441 141.81 33.5883 143.246 33.834C146.217 34.3424 152.088 36.5097 162.685 44.2406C152.066 36.493 145.815 33.9905 142.849 33.4598C140.173 32.9794 139.984 34.0687 139.336 34.9792C138.838 35.6774 138.939 36.2751 140.039 38.6268C140.039 38.6268 152.261 64.3891 156.484 73.6171C157.875 76.6503 159.221 79.136 160.786 81.0129C164.668 85.6715 168.114 88.4142 170.572 90.3693C174.264 93.3131 184.598 101.284 193.921 103.457C203.244 105.63 222.516 110.049 230.135 111.819C237.754 113.59 244.195 115.07 244.195 115.07C245.999 115.255 246.34 114.685 246.859 114.059C247.479 113.316 247.245 111.892 246.345 109.792L246.329 109.786Z" fill="url(#paint27_radial_38479_43706)"/>
+<path d="M246.329 109.786C246.647 110.697 246.831 112.356 246.368 112.802C245.943 113.21 245.161 113.054 243.742 112.724C243.742 112.724 238.318 111.205 230.699 109.434C223.08 107.663 203.797 102.988 194.474 100.821C185.151 98.6477 175.923 91.2296 172.231 88.2858C169.779 86.3307 166.98 83.521 163.104 78.8623C161.54 76.9854 159.266 73.0529 157.819 70.0421C153.401 60.8421 141.643 37.3532 141.643 37.3532C140.548 35.0015 140.436 34.32 140.967 33.8676C141.229 33.6441 141.81 33.5883 143.246 33.834C146.217 34.3424 152.088 36.5097 162.685 44.2406C152.066 36.493 145.815 33.9905 142.849 33.4598C140.173 32.9794 139.984 34.0687 139.336 34.9792C138.838 35.6774 138.939 36.2751 140.039 38.6268C140.039 38.6268 152.261 64.3891 156.484 73.6171C157.875 76.6503 159.221 79.136 160.786 81.0129C164.668 85.6715 168.114 88.4142 170.572 90.3693C174.264 93.3131 184.598 101.284 193.921 103.457C203.244 105.63 222.516 110.049 230.135 111.819C237.754 113.59 244.195 115.07 244.195 115.07C245.999 115.255 246.34 114.685 246.859 114.059C247.479 113.316 247.245 111.892 246.345 109.792L246.329 109.786Z" fill="url(#paint28_radial_38479_43706)"/>
+<path d="M246.58 109.909C246.898 110.82 247.083 112.479 246.619 112.925C246.189 113.333 245.413 113.177 243.994 112.847C243.994 112.847 238.57 111.328 230.951 109.557C223.331 107.786 204.049 103.111 194.726 100.944C185.403 98.7707 176.175 91.3526 172.483 88.4088C170.03 86.4537 167.232 83.644 163.355 78.9853C161.791 77.1085 159.518 73.176 158.071 70.1651C153.652 60.9651 141.894 37.4762 141.894 37.4762C140.799 35.1246 140.687 34.4431 141.218 33.9906C141.481 33.7672 142.062 33.7113 143.497 33.9571C146.469 34.4654 152.34 36.6328 162.936 44.3637C152.317 36.616 146.067 34.1135 143.101 33.5828C140.425 33.1024 140.235 34.1917 139.587 35.1022C139.084 35.8005 139.19 36.3982 140.291 38.7498C140.291 38.7498 152.513 64.5122 156.736 73.7401C158.127 76.7733 159.473 79.259 161.037 81.1359C164.919 85.7946 168.366 88.5373 170.824 90.4924C174.516 93.4362 184.85 101.407 194.173 103.58C203.496 105.753 222.773 110.172 230.386 111.942C238.006 113.713 244.446 115.193 244.446 115.193C246.251 115.378 246.591 114.808 247.111 114.182C247.731 113.439 247.496 112.015 246.597 109.915L246.58 109.909Z" fill="url(#paint29_radial_38479_43706)"/>
+<path d="M141.743 33.8845C142.14 33.8845 142.62 33.9403 143.184 34.052C144.475 34.3034 146.765 34.9961 150.385 36.8618C154.3 38.8783 158.819 41.783 163.813 45.4921C169.232 49.5139 183.755 60.306 197.793 70.7461C212.841 81.9291 228.398 93.4976 232.453 96.5028C237 99.8767 240.262 102.977 242.206 104.982C244.592 107.451 246.34 109.702 246.876 110.998V111.004C247.239 111.847 247.39 112.44 247.334 112.814C247.295 113.093 247.195 113.3 246.899 113.652L246.871 113.685C246.82 113.741 246.776 113.797 246.731 113.858C246.362 114.311 245.971 114.277 245.083 114.277C244.938 114.277 244.776 114.272 244.597 114.249C243.385 114.015 237.95 113.048 230.71 111.367C227.286 110.568 222.08 109.004 215.93 107.585C208.21 105.809 199.625 104.195 194.497 102.999C190.542 102.078 185.945 100.028 180.822 96.8994C176.549 94.2852 172.991 91.576 171.254 90.1907C168.316 87.8502 165.132 84.9902 161.49 80.6164C160.009 78.8178 158.898 77.0023 157.456 73.8519C153.289 64.7412 140.743 38.7107 140.576 38.3532C139.442 35.9233 139.503 35.6552 139.883 35.1134C139.961 35.0072 140.028 34.9011 140.095 34.795C140.464 34.2196 140.687 33.8733 141.738 33.8733L141.743 33.8845ZM141.743 33.2756C140.134 33.2756 139.883 34.0744 139.392 34.7671C138.772 35.644 138.933 36.2641 140.028 38.6158C140.028 38.6158 152.535 65.0037 156.758 74.2261C158.149 77.2593 159.032 79.3428 160.596 81.2197C164.478 85.8784 168.288 88.9506 170.745 90.9057C174.438 93.8495 184.984 101.821 194.307 103.988C203.63 106.161 222.963 110.188 230.582 111.959C238.201 113.73 244.642 115.132 244.642 115.132C244.854 115.154 245.044 115.165 245.217 115.165C246.524 115.165 246.843 114.596 247.306 114.048C247.926 113.305 248.345 112.864 247.446 110.758C246.334 108.071 240.648 101.804 232.828 96.0057C225.007 90.2075 175.438 53.3459 164.188 44.9949C152.937 36.6439 146.363 34.0465 143.313 33.4488C142.682 33.3259 142.173 33.27 141.754 33.27L141.743 33.2756Z" fill="url(#paint30_linear_38479_43706)"/>
+<path d="M141.743 33.8845C142.14 33.8845 142.62 33.9403 143.184 34.052C144.475 34.3034 146.765 34.9961 150.385 36.8618C154.3 38.8783 158.819 41.783 163.813 45.4921C169.232 49.5139 183.755 60.306 197.793 70.7461C212.841 81.9291 228.398 93.4976 232.453 96.5028C237 99.8767 240.262 102.977 242.206 104.982C244.592 107.451 246.34 109.702 246.876 110.998V111.004C247.239 111.847 247.39 112.44 247.334 112.814C247.295 113.093 247.195 113.3 246.899 113.652L246.871 113.685C246.82 113.741 246.776 113.797 246.731 113.858C246.362 114.311 245.971 114.277 245.083 114.277C244.938 114.277 244.776 114.272 244.597 114.249C243.385 114.015 237.95 113.048 230.71 111.367C227.286 110.568 222.08 109.004 215.93 107.585C208.21 105.809 199.625 104.195 194.497 102.999C190.542 102.078 185.945 100.028 180.822 96.8994C176.549 94.2852 172.991 91.576 171.254 90.1907C168.316 87.8502 165.132 84.9902 161.49 80.6164C160.009 78.8178 158.898 77.0023 157.456 73.8519C153.289 64.7412 140.743 38.7107 140.576 38.3532C139.442 35.9233 139.503 35.6552 139.883 35.1134C139.961 35.0072 140.028 34.9011 140.095 34.795C140.464 34.2196 140.687 33.8733 141.738 33.8733L141.743 33.8845ZM141.743 33.2756C140.134 33.2756 139.883 34.0744 139.392 34.7671C138.772 35.644 138.933 36.2641 140.028 38.6158C140.028 38.6158 152.535 65.0037 156.758 74.2261C158.149 77.2593 159.032 79.3428 160.596 81.2197C164.478 85.8784 168.288 88.9506 170.745 90.9057C174.438 93.8495 184.984 101.821 194.307 103.988C203.63 106.161 222.963 110.188 230.582 111.959C238.201 113.73 244.642 115.132 244.642 115.132C244.854 115.154 245.044 115.165 245.217 115.165C246.524 115.165 246.843 114.596 247.306 114.048C247.926 113.305 248.345 112.864 247.446 110.758C246.334 108.071 240.648 101.804 232.828 96.0057C225.007 90.2075 175.438 53.3459 164.188 44.9949C152.937 36.6439 146.363 34.0465 143.313 33.4488C142.682 33.3259 142.173 33.27 141.754 33.27L141.743 33.2756Z" fill="url(#paint31_linear_38479_43706)"/>
+<path d="M141.732 33.8732C142.128 33.8732 142.62 33.9291 143.184 34.0408C144.48 34.2922 146.793 34.9904 150.435 36.8729C154.378 38.9061 158.925 41.8276 163.958 45.5646C169.416 49.6144 184.04 60.4846 198.178 70.9974C213.332 82.2586 229.001 93.9053 233.079 96.9329C237.659 100.329 240.944 103.452 242.899 105.474C245.301 107.96 247.06 110.227 247.602 111.535V111.54C247.965 112.389 247.786 112.752 247.736 113.126C247.602 113.4 247.552 113.59 247.256 113.942L247.228 113.976C247.178 114.031 247.133 114.087 247.088 114.149C246.72 114.607 246.491 114.886 245.597 114.886C245.452 114.886 245.284 114.875 245.111 114.858C244.586 114.746 238.62 113.601 231.33 111.909C227.884 111.104 222.035 109.758 215.841 108.334C208.065 106.541 199.535 105.027 194.368 103.826C190.385 102.899 185.755 100.832 180.599 97.6814C176.292 95.0504 172.711 92.3189 170.963 90.9224C168.003 88.5651 164.539 85.6772 160.875 81.2755C159.406 79.5103 158.367 77.7619 156.92 74.5891C152.725 65.417 140.738 38.7442 140.564 38.3811C139.425 35.9288 139.481 35.6663 139.866 35.1189C139.944 35.0127 140.011 34.901 140.078 34.8005C140.447 34.2251 140.676 33.8732 141.732 33.8732ZM141.732 33.2588C140.112 33.2588 139.855 34.0631 139.363 34.7614C138.743 35.644 138.9 36.2696 140.006 38.638C140.006 38.638 152.15 65.7131 156.401 75.0025C157.797 78.058 158.87 79.9349 160.445 81.8285C164.355 86.5207 168.153 89.5929 170.628 91.5592C174.348 94.5197 184.889 102.39 194.273 104.58C203.663 106.764 223.521 110.719 231.191 112.501C238.86 114.283 245.016 115.461 245.016 115.461C245.228 115.484 245.424 115.495 245.597 115.495C246.915 115.495 247.233 114.925 247.697 114.367C248.323 113.618 248.602 112.992 248.021 111.294C246.898 108.591 241.173 102.279 233.297 96.4357C225.42 90.5928 175.655 53.4743 164.321 45.0618C152.988 36.655 146.368 34.0352 143.296 33.4319C142.659 33.309 142.151 33.2532 141.726 33.2532L141.732 33.2588Z" fill="url(#paint32_linear_38479_43706)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_38479_43706" x1="67.0425" y1="138.146" x2="169.449" y2="213.081" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FDA1FF"/>
+<stop offset="1" stop-color="#97C5FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_38479_43706" x1="154.596" y1="107.585" x2="133.722" y2="142.285" gradientUnits="userSpaceOnUse">
+<stop offset="0.49" stop-color="#B78EFA"/>
+<stop offset="1" stop-color="#8F6CCD"/>
+</linearGradient>
+<linearGradient id="paint2_linear_38479_43706" x1="86.9898" y1="141.391" x2="149.848" y2="251.624" gradientUnits="userSpaceOnUse">
+<stop offset="0.2" stop-color="#FDA1FF"/>
+<stop offset="0.3" stop-color="#F3A4FF"/>
+<stop offset="0.48" stop-color="#D9ADFF"/>
+<stop offset="0.71" stop-color="#AFBCFF"/>
+<stop offset="0.83" stop-color="#97C5FF"/>
+</linearGradient>
+<radialGradient id="paint3_radial_38479_43706" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(147.657 140.865) rotate(53.1) scale(13.5939 0.815268)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint4_radial_38479_43706" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(155.226 134.992) rotate(53.1) scale(13.5939 3.80654)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint5_linear_38479_43706" x1="90.0845" y1="133.113" x2="127.896" y2="270.281" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EEBEFF"/>
+<stop offset="1" stop-color="#79EDFF"/>
+</linearGradient>
+<linearGradient id="paint6_linear_38479_43706" x1="215.796" y1="132.476" x2="193.893" y2="229.152" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00B99A"/>
+<stop offset="1" stop-color="#009CBD"/>
+</linearGradient>
+<linearGradient id="paint7_linear_38479_43706" x1="214.137" y1="123.494" x2="176.426" y2="239.804" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00CC9E"/>
+<stop offset="0.22" stop-color="#00884A"/>
+<stop offset="0.31" stop-color="#008D64"/>
+<stop offset="0.55" stop-color="#009A9D"/>
+<stop offset="0.75" stop-color="#00A3C7"/>
+<stop offset="0.91" stop-color="#00A8E1"/>
+<stop offset="1" stop-color="#00ABEB"/>
+</linearGradient>
+<linearGradient id="paint8_linear_38479_43706" x1="188.285" y1="127.583" x2="219.393" y2="199.323" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3CE6AC"/>
+<stop offset="1" stop-color="#00E3FF"/>
+</linearGradient>
+<radialGradient id="paint9_radial_38479_43706" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(196.903 118.263) scale(22.3021 22.3021)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint10_radial_38479_43706" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(197.828 124.408) scale(5.58119)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint11_linear_38479_43706" x1="171.198" y1="181.174" x2="254.819" y2="181.174" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00E4FF"/>
+<stop offset="1" stop-color="#00E3F7"/>
+</linearGradient>
+<linearGradient id="paint12_linear_38479_43706" x1="68.7964" y1="53.1727" x2="91.2742" y2="118.461" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00CDC2"/>
+<stop offset="1" stop-color="#288822"/>
+</linearGradient>
+<linearGradient id="paint13_linear_38479_43706" x1="68.8914" y1="53.4464" x2="91.2798" y2="118.478" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00CDC2"/>
+<stop offset="1" stop-color="#288822"/>
+</linearGradient>
+<linearGradient id="paint14_linear_38479_43706" x1="68.5729" y1="53.2117" x2="90.4698" y2="116.796" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00CDC3"/>
+<stop offset="1" stop-color="#4FDB5E"/>
+</linearGradient>
+<radialGradient id="paint15_radial_38479_43706" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(135.831 92.6318) scale(58.2057)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint16_radial_38479_43706" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(142.36 85.1002) rotate(96.41) scale(24.117 2.34693)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint17_linear_38479_43706" x1="73.7846" y1="73.282" x2="94.1286" y2="124.092" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00CDC3"/>
+<stop offset="1" stop-color="#4FDB5E"/>
+</linearGradient>
+<radialGradient id="paint18_radial_38479_43706" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(198.277 71.1581) scale(37.5635 37.5635)">
+<stop stop-color="#88D2FF"/>
+<stop offset="1" stop-color="#0079FF"/>
+</radialGradient>
+<radialGradient id="paint19_radial_38479_43706" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(188.638 76.0921) scale(53.2287 53.2287)">
+<stop stop-color="#88D2FF"/>
+<stop offset="1" stop-color="#0079FF"/>
+</radialGradient>
+<linearGradient id="paint20_linear_38479_43706" x1="170.125" y1="83.9512" x2="214.941" y2="64.406" gradientUnits="userSpaceOnUse">
+<stop offset="0.04" stop-color="#62C7FF"/>
+<stop offset="0.79" stop-color="#D9B5FF"/>
+</linearGradient>
+<linearGradient id="paint21_linear_38479_43706" x1="185.487" y1="73.8574" x2="222.756" y2="88.1797" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C07DFF" stop-opacity="0"/>
+<stop offset="1" stop-color="#A855F5"/>
+</linearGradient>
+<radialGradient id="paint22_radial_38479_43706" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(162.835 63.273) rotate(61.84) scale(22.3734 2.79939)">
+<stop stop-color="#0079FF"/>
+<stop offset="1" stop-color="#0079FF"/>
+</radialGradient>
+<radialGradient id="paint23_radial_38479_43706" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(131.761 58.5752) rotate(64.3) scale(24.7035 1.47971)">
+<stop stop-color="#0079FF"/>
+<stop offset="1" stop-color="#0079FF" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint24_linear_38479_43706" x1="200.362" y1="77.0133" x2="251.942" y2="90.8497" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0079FF"/>
+<stop offset="1" stop-color="#0079FF" stop-opacity="0.5"/>
+</linearGradient>
+<radialGradient id="paint25_radial_38479_43706" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(214.954 102.925) rotate(13.66) scale(30.6182 0.612498)">
+<stop stop-color="#CDA2FD"/>
+<stop offset="1" stop-color="#0079FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint26_radial_38479_43706" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(181.034 112.951) rotate(20.22) scale(10.6772 1.81487)">
+<stop offset="0.11" stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint27_radial_38479_43706" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(154.157 89.1055) rotate(33.25) scale(15.206 4.33106)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint28_radial_38479_43706" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(181.034 112.951) rotate(20.22) scale(10.6772 1.81487)">
+<stop offset="0.11" stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint29_radial_38479_43706" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(216.335 100.866) rotate(13.89) scale(32.1943 1.34649)">
+<stop stop-color="#0079FF"/>
+<stop offset="1" stop-color="#0079FF" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint30_linear_38479_43706" x1="139.034" y1="74.2205" x2="247.96" y2="74.2205" gradientUnits="userSpaceOnUse">
+<stop stop-color="#88D2FF"/>
+<stop offset="1" stop-color="#F6B6FF"/>
+</linearGradient>
+<linearGradient id="paint31_linear_38479_43706" x1="173.281" y1="92.1402" x2="194.972" y2="72.8631" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0079FF"/>
+<stop offset="1" stop-color="#0079FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint32_linear_38479_43706" x1="139" y1="74.3768" x2="248.697" y2="74.3768" gradientUnits="userSpaceOnUse">
+<stop stop-color="#88D2FF"/>
+<stop offset="1" stop-color="#F6B6FF"/>
+</linearGradient>
+<clipPath id="clip0_38479_43706">
+<rect width="286" height="286" fill="white"/>
+</clipPath>
+</defs>
+</svg>
@@ -0,0 +1,172 @@
+---
+title: Common Mistakes
+description: "Pitfalls that break Hyperframes compositions."
+---
+
+These are mistakes that cannot be caught by the linter. For automated checks, run `npx hyperframes lint` (see [CLI](/packages/cli#lint)).
+
+<Warning>
+  The first two mistakes — animating video element dimensions and controlling media playback in scripts — are the most common causes of broken compositions. If your video looks wrong, check these first.
+</Warning>
+
+<AccordionGroup>
+  <Accordion title="Animating video element dimensions">
+    **Symptom:** Video frames stop updating, or browser performance drops severely.
+
+    **Cause:** GSAP animating `width`, `height`, `top`, `left` directly on a `<video>` element can cause the browser to stop rendering frames.
+
+    **Before (broken):**
+
+    ```javascript index.html
+    // Animating the video element directly — causes frame rendering to stop
+    tl.to("#el-video", { width: 500, height: 280, top: 700, left: 1400 }, 26);
+    ```
+
+    **After (fixed):**
+
+    ```html index.html
+    <!-- Wrap the video in a div and animate the wrapper -->
+    <div id="pip-wrapper" style="position: absolute; width: 1920px; height: 1080px;">
+      <video id="el-video" data-start="0" data-track-index="0"
+             src="./assets/video.mp4" style="width: 100%; height: 100%;"></video>
+    </div>
+    ```
+
+    ```javascript index.html
+    // Animate the wrapper — the video fills it at 100%
+    tl.to("#pip-wrapper", { width: 500, height: 280, top: 700, left: 1400 }, 26);
+    ```
+
+    Use a non-timed wrapper `<div>` for visual effects like picture-in-picture. Animate the wrapper; let the video fill it via CSS.
+  </Accordion>
+
+  <Accordion title="Controlling media playback in scripts">
+    **Symptom:** Audio/video playback is out of sync, or plays when it should not.
+
+    **Cause:** Calling `video.play()`, `video.pause()`, or setting `audio.currentTime` in your scripts. The [framework owns all media playback](/reference/html-schema#framework-managed-behavior).
+
+    **Before (broken):**
+
+    ```javascript index.html
+    // Conflicts with framework media sync
+    document.getElementById("el-video").play();
+    document.getElementById("el-audio").currentTime = 5;
+    ```
+
+    **After (fixed):**
+
+    ```javascript index.html
+    // Don't control media playback at all. The framework handles it.
+    // Use GSAP for visual animations only:
+    tl.to("#el-video", { opacity: 1, duration: 0.5 }, 0);
+    ```
+
+    The framework reads [`data-start`](/concepts/data-attributes#timing-attributes), [`data-media-start`](/concepts/data-attributes#media-attributes), and [`data-volume`](/concepts/data-attributes#media-attributes) to control when and how media plays. See [Compositions: Two Layers](/concepts/compositions#two-layers-primitives-and-scripts) for the separation between HTML primitives and scripts.
+  </Accordion>
+
+  <Accordion title="Composition duration shorter than video">
+    **Symptom:** Video plays for a few seconds then stops. Timeline shows 8-10 seconds even though the video is minutes long.
+
+    **Cause:** The composition duration equals the [GSAP timeline duration](/guides/gsap-animation#timeline-duration-and-composition-duration), not `data-duration` on the video. If your last GSAP animation ends at 8 seconds, the composition is 8 seconds long — regardless of how long the video source is.
+
+    **Before (broken):**
+
+    ```javascript index.html
+    // Timeline is only 7.8s long — video cuts off after 7.8 seconds
+    tl.to("#lower-third", { left: -640, duration: 0.6 }, 7.2);
+    ```
+
+    **After (fixed):**
+
+    ```javascript index.html
+    tl.to("#lower-third", { left: -640, duration: 0.6 }, 7.2);
+
+    // Extend the timeline to 283 seconds to match the video length
+    tl.set({}, {}, 283);
+    ```
+
+    `tl.set({}, {}, TIME)` adds a zero-duration tween at the specified time, extending the timeline without affecting any elements.
+
+    <Tip>
+      A quick check: run `npx hyperframes compositions` to see the resolved duration of each composition. If it is shorter than expected, your timeline needs extending.
+    </Tip>
+  </Accordion>
+
+  <Accordion title="Missing class='clip' on timed elements">
+    **Symptom:** Elements are always visible, ignoring their `data-start` and `data-duration` timing.
+
+    **Cause:** The [`class="clip"`](/concepts/data-attributes#element-visibility) attribute tells the runtime to manage the element's visibility lifecycle. Without it, the element is always rendered.
+
+    **Before (broken):**
+
+    ```html index.html
+    <!-- Missing class="clip" — this element is always visible -->
+    <h1 id="title" data-start="2" data-duration="5" data-track-index="0">
+      Hello World
+    </h1>
+    ```
+
+    **After (fixed):**
+
+    ```html index.html
+    <!-- With class="clip", the runtime shows this only from 2s to 7s -->
+    <h1 id="title" class="clip" data-start="2" data-duration="5" data-track-index="0">
+      Hello World
+    </h1>
+    ```
+
+    <Note>
+      The linter catches this one: `npx hyperframes lint` will flag timed elements missing `class="clip"`.
+    </Note>
+  </Accordion>
+
+  <Accordion title="Timeline key doesn't match data-composition-id">
+    **Symptom:** Animations don't play. The composition appears static.
+
+    **Cause:** The key used in `window.__timelines` must exactly match the [`data-composition-id`](/concepts/data-attributes#composition-attributes) attribute on the composition root element.
+
+    **Before (broken):**
+
+    ```javascript index.html
+    // Mismatch: HTML says "my-video", script registers "root"
+    // <div data-composition-id="my-video" ...>
+    window.__timelines["root"] = tl;
+    ```
+
+    **After (fixed):**
+
+    ```javascript index.html
+    // Key matches the data-composition-id attribute
+    // <div data-composition-id="my-video" ...>
+    window.__timelines["my-video"] = tl;
+    ```
+  </Accordion>
+</AccordionGroup>
+
+## Debugging Checklist
+
+When something does not work, check in this order:
+
+1. **Run the linter:** `npx hyperframes lint` — catches most structural issues
+2. **Timeline registered?** Is `window.__timelines["<id>"]` set? Does the key match [`data-composition-id`](/concepts/data-attributes#composition-attributes)?
+3. **GSAP-only animations?** Only animate visual properties (opacity, transform, color) — see [GSAP Animation](/guides/gsap-animation#key-rules)
+4. **Timeline long enough?** Add `tl.set({}, {}, DURATION)` at the end — see [Timeline Duration](/guides/gsap-animation#timeline-duration-and-composition-duration)
+5. **Console errors?** Open browser console — runtime errors show as `[Browser:ERROR]`
+6. **Still stuck?** See [Troubleshooting](/guides/troubleshooting) for environment and rendering issues
+
+## Next Steps
+
+<CardGroup cols={2}>
+  <Card title="Troubleshooting" icon="wrench" href="/guides/troubleshooting">
+    Fix environment and rendering issues
+  </Card>
+  <Card title="GSAP Animation" icon="wand-magic-sparkles" href="/guides/gsap-animation">
+    Review animation rules and patterns
+  </Card>
+  <Card title="HTML Schema Reference" icon="code" href="/reference/html-schema">
+    Full attribute reference and checklist
+  </Card>
+  <Card title="Data Attributes" icon="database" href="/concepts/data-attributes">
+    Timing, media, and composition attributes
+  </Card>
+</CardGroup>
@@ -0,0 +1,134 @@
+---
+title: GSAP Animation
+description: "Add animations to your Hyperframes compositions with GSAP."
+---
+
+Hyperframes uses [GSAP](https://gsap.com/) for animation. Timelines are paused and controlled by the runtime — you define the animations, the framework handles playback. For background on how animation runtimes plug into Hyperframes, see [Frame Adapters](/concepts/frame-adapters).
+
+## Setup
+
+Include GSAP and create a paused timeline:
+
+```html index.html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
+<script>
+  // 1. Create a paused timeline — the framework controls playback
+  const tl = gsap.timeline({ paused: true });
+
+  // 2. Add animations using the position parameter (3rd arg) for absolute timing
+  tl.to("#title", { opacity: 1, duration: 0.5 }, 0);
+
+  // 3. Initialize the global timelines registry (if not already present)
+  window.__timelines = window.__timelines || {};
+
+  // 4. Register the timeline using the data-composition-id as the key
+  window.__timelines["root"] = tl;
+</script>
+```
+
+<Note>
+  The key you use in `window.__timelines` must match the `data-composition-id` attribute on your composition's root element. See [Compositions](/concepts/compositions) for how the root element is structured.
+</Note>
+
+## Key Rules
+
+1. **Always create timelines with `{ paused: true }`** — the framework controls playback via [deterministic seeking](/concepts/determinism)
+2. **Register timelines on `window.__timelines`** with the [`data-composition-id`](/concepts/data-attributes#composition-attributes) as key
+3. **Use the position parameter** (3rd argument) for absolute timing: `tl.to(el, vars, 1.5)`
+4. **Only animate visual properties** — never control media playback in scripts
+
+## Supported Methods
+
+| Method | Description |
+|--------|-------------|
+| `tl.to(target, vars, position)` | Animate to values |
+| `tl.from(target, vars, position)` | Animate from values |
+| `tl.fromTo(target, fromVars, toVars, position)` | Animate from/to values |
+| `tl.set(target, vars, position)` | Set values instantly |
+
+## Supported Properties
+
+`opacity`, `x`, `y`, `scale`, `scaleX`, `scaleY`, `rotation`, `width`, `height`, `visibility`, `color`, `backgroundColor`, and any CSS-animatable property.
+
+## Timeline Duration and Composition Duration
+
+A composition's duration equals its GSAP timeline duration. The two are directly linked:
+
+```javascript compositions/intro-anim.html
+// Your last animation ends at 3 seconds...
+tl.from("#title", { opacity: 0, y: -50, duration: 1 }, 0);
+tl.to("#title", { opacity: 0, duration: 1 }, 2);
+// ...so this composition is exactly 3 seconds long.
+```
+
+If your composition contains a video clip that is 283 seconds long, but your last GSAP animation ends at 8 seconds, the composition will be only 8 seconds long and the video will be cut short. To extend the timeline to match the video:
+
+```javascript index.html
+// All your visual animations
+tl.to("#lower-third", { left: -640, duration: 0.6 }, 7.2);
+
+// Extend the timeline to 283 seconds to match the video length.
+// This adds a zero-duration tween at 283s without affecting any elements.
+tl.set({}, {}, 283);
+```
+
+<Warning>
+  This is one of the most common mistakes in Hyperframes. If your video cuts off early, the timeline is too short. See [Common Mistakes: Composition Duration Shorter Than Video](/guides/common-mistakes) for more details.
+</Warning>
+
+## What NOT to Do
+
+These patterns will break your composition or cause sync issues:
+
+```javascript index.html
+// WRONG: Playing media in scripts — the framework owns media playback
+document.getElementById("el-video").play();
+document.getElementById("el-audio").currentTime = 5;
+
+// WRONG: Creating a non-paused timeline
+const tl = gsap.timeline(); // missing { paused: true }!
+
+// WRONG: Animating dimensions directly on a <video> element
+tl.to("#el-video", { width: 500, height: 280 }, 5);
+
+// WRONG: Manually nesting sub-timelines
+const masterTL = window.__timelines["root"];
+masterTL.add(window.__timelines["intro-anim"], 0);
+```
+
+The framework automatically manages [media playback](/reference/html-schema#framework-managed-behavior), [clip lifecycle](/concepts/compositions#two-layers-primitives-and-scripts), and [sub-composition nesting](#sub-composition-timelines). Scripts that duplicate this behavior will conflict.
+
+## Sub-Composition Timelines
+
+Each [nested composition](/concepts/compositions#nested-compositions) registers its own timeline. The framework automatically nests sub-composition timelines into the parent based on [`data-start`](/concepts/data-attributes#timing-attributes):
+
+```javascript compositions/intro-anim.html
+// In compositions/intro-anim.html
+const tl = gsap.timeline({ paused: true });
+tl.from(".title", { opacity: 0, y: -50, duration: 1 });
+window.__timelines["intro-anim"] = tl;
+
+// DO NOT manually add sub-timelines to the master:
+// masterTL.add(window.__timelines["intro-anim"], 0); // UNNECESSARY
+```
+
+<Warning>
+  Don't animate `width`, `height`, `top`, or `left` directly on `<video>` elements — this can cause the browser to stop rendering frames. Wrap the video in a `<div>` and animate the wrapper instead. See [Common Mistakes](/guides/common-mistakes) for a detailed explanation.
+</Warning>
+
+## Next Steps
+
+<CardGroup cols={2}>
+  <Card title="Compositions" icon="layer-group" href="/concepts/compositions">
+    Understand the building blocks that timelines animate
+  </Card>
+  <Card title="Frame Adapters" icon="plug" href="/concepts/frame-adapters">
+    Learn how GSAP plugs into the render pipeline
+  </Card>
+  <Card title="Common Mistakes" icon="triangle-exclamation" href="/guides/common-mistakes">
+    Avoid pitfalls that break animations
+  </Card>
+  <Card title="HTML Schema Reference" icon="code" href="/reference/html-schema">
+    Full reference for composition attributes
+  </Card>
+</CardGroup>
@@ -0,0 +1,148 @@
+---
+title: Rendering
+description: "Render compositions to MP4 locally or in Docker."
+---
+
+Render your Hyperframes [compositions](/concepts/compositions) to MP4 with the [CLI](/packages/cli). The rendering pipeline is frame-by-frame and seek-driven — see [Deterministic Rendering](/concepts/determinism) for how this works under the hood.
+
+## Getting Started
+
+<Steps>
+  <Step title="Verify your environment">
+    Run the diagnostics command to check for required dependencies:
+
+    ```bash Terminal
+    npx hyperframes doctor
+    ```
+
+    Expected output:
+
+    ```
+    ✓ Node.js 20.x
+    ✓ FFmpeg found (7.x)
+    ✓ Docker available
+    ✓ Disk space OK
+    ```
+  </Step>
+  <Step title="Preview your composition">
+    Before rendering, preview your composition in the browser to verify it looks correct:
+
+    ```bash Terminal
+    npx hyperframes dev
+    ```
+  </Step>
+  <Step title="Render to MP4">
+    Run the render command from your project directory:
+
+    ```bash Terminal
+    npx hyperframes render -o output.mp4
+    ```
+
+    Expected output:
+
+    ```
+    ⠋ Rendering composition "root" (30fps, standard quality)
+    ✓ Captured 240 frames in 8.2s
+    ✓ Encoded to output.mp4 (8.0s, 1920x1080, 4.2MB)
+    ```
+  </Step>
+</Steps>
+
+## Rendering Modes
+
+<Tabs>
+  <Tab title="Local Mode">
+    ### Local Mode (default)
+
+    Uses Puppeteer (bundled Chromium) and your system's FFmpeg. Fast for iteration during development.
+
+    **Requires:** FFmpeg installed on your system. See [Troubleshooting](/guides/troubleshooting) if FFmpeg is not found.
+
+    ```bash Terminal
+    npx hyperframes render -o output.mp4
+    ```
+
+    **Pros:**
+    - Fast startup, no container overhead
+    - Uses your system GPU for hardware-accelerated encoding (with `--gpu`)
+    - Best for iterative development
+
+    **Cons:**
+    - Output may vary across platforms due to font and Chrome version differences
+    - Not suitable for CI/CD pipelines that require reproducibility
+  </Tab>
+  <Tab title="Docker Mode">
+    ### Docker Mode
+
+    [Deterministic](/concepts/determinism) output with an exact Chrome version and font set. Use this for production renders and CI pipelines.
+
+    **Requires:** Docker installed and running.
+
+    ```bash Terminal
+    npx hyperframes render --docker -o output.mp4
+    ```
+
+    **Pros:**
+    - Identical output on every platform — same Chrome, same fonts, same FFmpeg
+    - The same pipeline used in production
+    - Ideal for CI/CD and automated workflows
+
+    **Cons:**
+    - Slower startup due to container initialization
+    - No GPU acceleration inside the container
+
+    <Note>
+      Docker mode uses `chrome-headless-shell` with [BeginFrame](/concepts/determinism#how-it-works) control for frame-perfect, deterministic capture.
+    </Note>
+  </Tab>
+</Tabs>
+
+## When to Use Each Mode
+
+| Scenario | Recommended Mode |
+|----------|-----------------|
+| Local development and iteration | Local |
+| CI/CD pipeline | Docker |
+| Sharing renders with a team | Docker |
+| Quick preview export | Local |
+| AI agent-driven rendering | Docker |
+| Benchmarking performance | Local |
+
+## Options
+
+| Flag | Values | Default | Description |
+|------|--------|---------|-------------|
+| `-f, --fps` | 24, 30, 60 | 30 | Frames per second |
+| `-q, --quality` | draft, standard, high | standard | Encoding quality preset |
+| `-w, --workers` | 1-8 | auto | Parallel render workers |
+| `--gpu` | — | off | GPU encoding (NVENC, VideoToolbox, VAAPI) |
+| `-o, --output` | path | — | Output file path |
+| `--docker` | — | off | Use Docker for [deterministic rendering](/concepts/determinism) |
+
+## Tips
+
+<Tip>
+  Use `draft` quality during development for fast previews. Switch to `standard` or `high` for final output.
+</Tip>
+
+- Use `npx hyperframes benchmark` to find optimal settings for your system
+- 4 workers is usually the sweet spot for most compositions
+- Docker mode is slower but guarantees [identical output](/concepts/determinism) across platforms
+- For compositions with many frames, `--gpu` can significantly speed up local encoding
+
+## Next Steps
+
+<CardGroup cols={2}>
+  <Card title="Deterministic Rendering" icon="lock" href="/concepts/determinism">
+    Understand the determinism guarantees
+  </Card>
+  <Card title="CLI Reference" icon="terminal" href="/packages/cli">
+    Full list of CLI commands and flags
+  </Card>
+  <Card title="Troubleshooting" icon="wrench" href="/guides/troubleshooting">
+    Fix common rendering issues
+  </Card>
+  <Card title="Common Mistakes" icon="triangle-exclamation" href="/guides/common-mistakes">
+    Avoid pitfalls that affect render output
+  </Card>
+</CardGroup>
@@ -0,0 +1,140 @@
+---
+title: Templates
+description: "Built-in templates for common video patterns."
+---
+
+Hyperframes includes starter templates to help you scaffold compositions quickly. Each template gives you a working project with the correct [composition structure](/concepts/compositions), [data attributes](/concepts/data-attributes), and a [GSAP timeline](/guides/gsap-animation) already wired up.
+
+## Using Templates
+
+```bash Terminal
+npx hyperframes init --template <name>
+```
+
+This creates a new project directory with an `index.html` composition and any required assets.
+
+## Available Templates
+
+<Tabs>
+  <Tab title="blank">
+    ### blank
+
+    An empty 1920x1080 composition with a GSAP timeline wired up and nothing else. Start from scratch.
+
+    **What it produces:** A black (empty) canvas at 1920x1080 resolution. No visible elements, no animations. The timeline is registered and ready for you to add tweens.
+
+    **When to use it:** You have a specific design in mind and want full control. Good for AI agent workflows that will generate the entire composition programmatically.
+
+    ```bash Terminal
+    npx hyperframes init --template blank
+    ```
+
+    **What you get:**
+    ```
+    my-video/
+    ├── index.html          # Empty root composition with GSAP setup
+    └── assets/             # Empty directory for your media files
+    ```
+  </Tab>
+  <Tab title="title-card">
+    ### title-card
+
+    Animated title and subtitle with GSAP fade-in/out transitions.
+
+    **What it produces:** A centered title and subtitle that fade in from the top, hold for a few seconds, then fade out. Clean, minimal typography on a solid background. Good for intro cards, chapter markers, or end screens.
+
+    **When to use it:** You need a simple text-based segment — an intro, outro, or interstitial card between video clips.
+
+    ```bash Terminal
+    npx hyperframes init --template title-card
+    ```
+
+    **What you get:**
+    ```
+    my-video/
+    ├── index.html          # Title + subtitle with fade animations
+    └── assets/             # Empty directory for your media files
+    ```
+  </Tab>
+  <Tab title="video-edit">
+    ### video-edit
+
+    A video element with trimming, audio, and track controls.
+
+    **What it produces:** A full-screen video clip with [`data-media-start`](/concepts/data-attributes#media-attributes) for trimming, a background audio track on a separate [timeline track](/concepts/data-attributes#timing-attributes), and a lower-third text overlay animated with GSAP. Demonstrates how multiple clip types work together.
+
+    **When to use it:** You are building a video editing workflow — cutting clips, adding overlays, mixing audio. This template shows the patterns for media-heavy compositions.
+
+    ```bash Terminal
+    npx hyperframes init --template video-edit
+    ```
+
+    **What you get:**
+    ```
+    my-video/
+    ├── index.html          # Video + audio + overlay composition
+    └── assets/             # Place your video and audio files here
+    ```
+  </Tab>
+</Tabs>
+
+## Choosing a Template
+
+| Template | Best for | Complexity |
+|----------|----------|------------|
+| `blank` | Full control, agent-generated compositions | Minimal |
+| `title-card` | Text intros, outros, chapter markers | Simple |
+| `video-edit` | Video cutting, overlays, multi-track editing | Moderate |
+
+<Tip>
+  If you are new to Hyperframes, start with `title-card` to see a working animation, then move to `blank` when you are comfortable with the [composition model](/concepts/compositions) and [GSAP animation](/guides/gsap-animation).
+</Tip>
+
+## Custom Templates
+
+Any directory with an `index.html` can serve as a template. You can copy a directory manually or build your own init workflow.
+
+Your custom template needs:
+
+1. An `index.html` with a [`data-composition-id`](/concepts/data-attributes#composition-attributes) root element
+2. A [GSAP timeline](/guides/gsap-animation) registered in `window.__timelines`
+3. Any assets in the same directory or a subdirectory
+
+```html index.html
+<div id="root" data-composition-id="my-template"
+     data-start="0" data-width="1920" data-height="1080">
+
+  <!-- Your elements here -->
+
+  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
+  <script>
+    const tl = gsap.timeline({ paused: true });
+    // Add your animations...
+    window.__timelines = window.__timelines || {};
+    window.__timelines["my-template"] = tl;
+  </script>
+</div>
+```
+
+After creating a custom template, validate it with the [linter](/packages/cli#lint):
+
+```bash Terminal
+npx hyperframes lint
+```
+
+## Next Steps
+
+<CardGroup cols={2}>
+  <Card title="Quickstart" icon="rocket" href="/quickstart">
+    Create, preview, and render your first video
+  </Card>
+  <Card title="GSAP Animation" icon="wand-magic-sparkles" href="/guides/gsap-animation">
+    Add animations to your template
+  </Card>
+  <Card title="Compositions" icon="layer-group" href="/concepts/compositions">
+    Understand the composition data model
+  </Card>
+  <Card title="Rendering" icon="film" href="/guides/rendering">
+    Render your composition to MP4
+  </Card>
+</CardGroup>
@@ -0,0 +1,147 @@
+---
+title: Troubleshooting
+description: "Solutions for common Hyperframes issues."
+---
+
+If your issue is about a specific coding mistake (animations not working, video cutting off early), see [Common Mistakes](/guides/common-mistakes) first. This page covers environment, tooling, and rendering issues.
+
+<AccordionGroup>
+  <Accordion title='"No composition found"'>
+    Your directory needs an `index.html` with a valid [composition](/concepts/compositions). The root element must have a [`data-composition-id`](/concepts/data-attributes#composition-attributes) attribute.
+
+    **Fix:** Run `npx hyperframes init` to create a composition from a [template](/guides/templates), or verify your `index.html` has the correct structure:
+
+    ```html index.html
+    <div id="root" data-composition-id="my-video"
+         data-start="0" data-width="1920" data-height="1080">
+      <!-- elements here -->
+    </div>
+    ```
+  </Accordion>
+
+  <Accordion title='"FFmpeg not found"'>
+    Local [rendering](/guides/rendering) requires FFmpeg installed on your system. Install it for your platform:
+
+    <CodeGroup>
+    ```bash macOS
+    brew install ffmpeg
+    ```
+
+    ```bash Ubuntu/Debian
+    sudo apt install ffmpeg
+    ```
+
+    ```bash Windows
+    # Download from https://ffmpeg.org/download.html
+    # Add the bin directory to your PATH
+    ```
+
+    ```bash Verify installation
+    ffmpeg -version
+    ```
+    </CodeGroup>
+
+    After installing, run `npx hyperframes doctor` to verify the CLI can find it.
+
+    <Tip>
+      If you cannot install FFmpeg, use [Docker mode](/guides/rendering) instead — it bundles FFmpeg inside the container: `npx hyperframes render --docker -o output.mp4`
+    </Tip>
+  </Accordion>
+
+  <Accordion title="Lint errors">
+    Run `npx hyperframes lint` to check for common structural issues (see [CLI: lint](/packages/cli#lint)):
+
+    | Error | Meaning |
+    |-------|---------|
+    | Missing `data-composition-id` | Root element needs this attribute. See [Compositions](/concepts/compositions). |
+    | Missing `class="clip"` | Timed visible elements need this class. See [Data Attributes](/concepts/data-attributes#element-visibility). |
+    | Overlapping timelines | Clips on the same [`data-track-index`](/concepts/data-attributes#timing-attributes) cannot overlap in time. |
+    | Unmuted video elements | Video elements should be `muted` unless `data-has-audio="true"` is set. |
+    | Deprecated attribute names | `data-layer` and `data-end` have been replaced. Check the [HTML Schema Reference](/reference/html-schema). |
+  </Accordion>
+
+  <Accordion title="Preview not updating">
+    Make sure you are editing the `index.html` in the project directory. The [preview server](/packages/cli#dev) watches for file changes and auto-reloads.
+
+    If changes still do not appear:
+
+    1. Check the terminal for errors from the dev server
+    2. Stop and restart `npx hyperframes dev`
+    3. Hard-refresh the browser: **Ctrl+Shift+R** (Windows/Linux) or **Cmd+Shift+R** (macOS)
+    4. Clear the browser cache if CSS changes are not reflected
+  </Accordion>
+
+  <Accordion title="Render looks different from preview">
+    Use `--docker` mode for [deterministic output](/concepts/determinism). Local renders may differ due to:
+
+    - **Font availability** — different fonts on different platforms cause text reflow
+    - **Chrome version** — local Chromium vs. Docker's pinned version can render slightly differently
+    - **System-specific rendering** — GPU compositing, subpixel antialiasing, etc.
+
+    ```bash Terminal
+    npx hyperframes render --docker -o output.mp4
+    ```
+
+    See [Rendering: When to Use Each Mode](/guides/rendering#when-to-use-each-mode) for guidance on choosing between local and Docker rendering.
+  </Accordion>
+
+  <Accordion title="Docker mode fails to start">
+    Verify Docker is installed and the daemon is running:
+
+    ```bash Terminal
+    docker info
+    ```
+
+    Common issues:
+    - **Docker not running:** Start Docker Desktop or the Docker daemon
+    - **Permission denied:** Add your user to the `docker` group (`sudo usermod -aG docker $USER`) and restart your shell
+    - **Image pull fails:** Check your internet connection; the first render downloads the Hyperframes Docker image
+  </Accordion>
+
+  <Accordion title="Render is slow">
+    Try these optimizations:
+
+    1. Use `--quality draft` during development for faster encoding
+    2. Run `npx hyperframes benchmark` to find the optimal worker count for your system
+    3. Use `--gpu` for hardware-accelerated encoding (local mode only)
+    4. Reduce `--fps` to 24 if 30fps is not needed
+    5. Check that your composition does not have unnecessary elements or overly complex animations
+
+    See [Rendering: Options](/guides/rendering#options) for all available flags.
+  </Accordion>
+</AccordionGroup>
+
+## System Diagnostics
+
+Run `npx hyperframes doctor` to check your environment:
+
+```bash Terminal
+npx hyperframes doctor
+```
+
+This checks for Node.js version, FFmpeg availability, Docker status, and other requirements. If `doctor` reports issues, address them before rendering.
+
+## Still Stuck?
+
+If none of the above resolves your issue:
+
+1. Run `npx hyperframes info` to gather system and project details
+2. Check [GitHub Issues](https://github.com/heygen-com/hyperframes/issues) for similar reports
+3. Open a new issue with the output of `npx hyperframes info` and steps to reproduce
+
+## Next Steps
+
+<CardGroup cols={2}>
+  <Card title="Common Mistakes" icon="triangle-exclamation" href="/guides/common-mistakes">
+    Coding pitfalls that break compositions
+  </Card>
+  <Card title="Rendering" icon="film" href="/guides/rendering">
+    Rendering modes, options, and tips
+  </Card>
+  <Card title="CLI Reference" icon="terminal" href="/packages/cli">
+    Full list of CLI commands
+  </Card>
+  <Card title="Contributing" icon="code-branch" href="/contributing">
+    Report bugs and contribute fixes
+  </Card>
+</CardGroup>
@@ -0,0 +1,99 @@
+---
+title: Introduction
+description: "Write HTML. Render video. Built for agents."
+---
+
+Hyperframes is an open-source framework that turns HTML into deterministic, frame-by-frame rendered video — so you can define a video the same way you build a web page.
+
+## See It in Action
+
+Here is a video defined entirely as HTML:
+
+```html
+<div id="root" data-composition-id="demo"
+     data-start="0" data-width="1920" data-height="1080">
+
+  <video id="clip-1" data-start="0" data-duration="5"
+         data-track-index="0" src="intro.mp4" muted playsinline></video>
+
+  <h1 id="title" class="clip"
+      data-start="1" data-duration="4" data-track-index="1"
+      style="font-size: 72px; color: white;">
+    Welcome to Hyperframes
+  </h1>
+
+  <audio id="bg-music" data-start="0" data-duration="5"
+         data-track-index="2" data-volume="0.5" src="music.wav"></audio>
+</div>
+```
+
+Run `npx hyperframes render -o demo.mp4` and this produces an MP4 with deterministic, frame-by-frame capture. Same input, identical output, every time. No timeline editor. No proprietary format. Just HTML.
+
+## Why Hyperframes?
+
+<Tabs>
+  <Tab title="For developers">
+    **You already know the stack.** Compositions are HTML files with data attributes. Animations use GSAP, Lottie, CSS, or any runtime that can seek to a given frame. There is no custom DSL, no proprietary component system, and no React requirement. If you can build a web page, you can build a video.
+  </Tab>
+  <Tab title="For AI agents">
+    **Agents already speak HTML.** Most video tools require complex APIs or drag-and-drop interfaces that agents cannot operate. Hyperframes compositions are plain HTML documents — the format LLMs are best at generating. An agent can compose, modify, and render videos using tools it already understands.
+  </Tab>
+  <Tab title="For automated pipelines">
+    **Determinism by design.** The rendering pipeline is seek-driven with no wall-clock dependencies. `frame = floor(time * fps)` — every frame is independently captured via Chrome's `beginFrame` API and encoded with FFmpeg. Same input always produces identical output, making CI testing and batch rendering reliable.
+  </Tab>
+</Tabs>
+
+<Tip>
+  Hyperframes was designed from the ground up for AI agent integration. Because compositions are plain HTML, any LLM can generate, edit, and iterate on video content without specialized tooling. Pair it with function-calling agents to build fully automated video pipelines.
+</Tip>
+
+## How It Works
+
+<Steps>
+  <Step title="Write HTML">
+    Define your video as an HTML document. Each element gets data attributes for timing (`data-start`, `data-duration`) and layout (`data-track-index`). Add animations with GSAP, Lottie, CSS transitions, or any seekable runtime via the Frame Adapter pattern.
+  </Step>
+  <Step title="Preview in the browser">
+    Run `npx hyperframes dev` to open a live preview at `localhost:3000`. Edit your HTML and see changes instantly — no build step, no compilation.
+  </Step>
+  <Step title="Render to MP4">
+    Run `npx hyperframes render -o output.mp4` to produce a final video. The engine seeks each frame in headless Chrome, captures it with `beginFrame`, and pipes the result through FFmpeg. Run locally or in Docker for fully reproducible output.
+  </Step>
+</Steps>
+
+## Packages
+
+<CardGroup cols={2}>
+  <Card title="@hyperframes/core" icon="cube" href="/packages/core">
+    Types, HTML parsing, runtime, and composition linter — the foundation everything else builds on.
+  </Card>
+  <Card title="@hyperframes/engine" icon="gear" href="/packages/engine">
+    Seekable page-to-video capture engine. Loads HTML in headless Chrome and captures frame-by-frame.
+  </Card>
+  <Card title="@hyperframes/producer" icon="video" href="/packages/producer">
+    Full rendering pipeline combining capture and FFmpeg encoding into a single API call.
+  </Card>
+  <Card title="@hyperframes/studio" icon="palette" href="/packages/studio">
+    Visual composition editor UI for building and previewing timelines interactively.
+  </Card>
+  <Card title="hyperframes (CLI)" icon="terminal" href="/packages/cli">
+    Command-line tool for creating, previewing, and rendering compositions.
+  </Card>
+</CardGroup>
+
+## Next Steps
+
+<CardGroup cols={2}>
+  <Card title="Quickstart" icon="rocket" href="/quickstart">
+    Build and render your first video in 60 seconds
+  </Card>
+  <Card title="Compositions" icon="layer-group" href="/concepts/compositions">
+    Understand the HTML-based data model behind every video
+  </Card>
+  <Card title="GSAP Animation" icon="wand-magic-sparkles" href="/guides/gsap-animation">
+    Add timeline-driven animations with GSAP
+  </Card>
+  <Card title="Rendering" icon="film" href="/guides/rendering">
+    Render locally, in Docker, or in a CI pipeline
+  </Card>
+</CardGroup>
@@ -0,0 +1,311 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 12229 2741">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: url(#linear-gradient-15);
+        fill-opacity: .7;
+      }
+
+      .cls-2 {
+        fill: url(#linear-gradient-14);
+        fill-opacity: .2;
+      }
+
+      .cls-3 {
+        fill: url(#radial-gradient-7);
+      }
+
+      .cls-4 {
+        fill: url(#radial-gradient-6);
+      }
+
+      .cls-5 {
+        fill: url(#radial-gradient-5);
+      }
+
+      .cls-6 {
+        fill: url(#radial-gradient-4);
+      }
+
+      .cls-7 {
+        fill: url(#radial-gradient-9);
+      }
+
+      .cls-8 {
+        fill: url(#radial-gradient-8);
+      }
+
+      .cls-9 {
+        fill: url(#radial-gradient-3);
+      }
+
+      .cls-10 {
+        fill: url(#radial-gradient-2);
+      }
+
+      .cls-11 {
+        fill: url(#linear-gradient-8);
+      }
+
+      .cls-12 {
+        fill: url(#linear-gradient-7);
+      }
+
+      .cls-13 {
+        fill: url(#linear-gradient-5);
+      }
+
+      .cls-14 {
+        fill: url(#linear-gradient-6);
+      }
+
+      .cls-15 {
+        fill: url(#linear-gradient-9);
+      }
+
+      .cls-16 {
+        fill: url(#linear-gradient-4);
+      }
+
+      .cls-17 {
+        fill: url(#linear-gradient-3);
+      }
+
+      .cls-18 {
+        fill: url(#linear-gradient-2);
+      }
+
+      .cls-19 {
+        fill: #128414;
+      }
+
+      .cls-20 {
+        fill: url(#radial-gradient);
+      }
+
+      .cls-21 {
+        fill: url(#linear-gradient);
+      }
+
+      .cls-22 {
+        fill: #ab81e9;
+      }
+
+      .cls-23 {
+        fill: url(#radial-gradient-12);
+      }
+
+      .cls-24 {
+        fill: url(#radial-gradient-14);
+      }
+
+      .cls-25 {
+        fill: url(#radial-gradient-13);
+      }
+
+      .cls-26 {
+        fill: url(#radial-gradient-10);
+      }
+
+      .cls-27 {
+        fill: url(#radial-gradient-11);
+      }
+
+      .cls-28 {
+        fill: #fff;
+      }
+
+      .cls-29 {
+        fill: #0079ff;
+      }
+
+      .cls-30 {
+        fill: url(#linear-gradient-10);
+      }
+
+      .cls-31 {
+        fill: url(#linear-gradient-11);
+      }
+
+      .cls-32 {
+        fill: url(#linear-gradient-12);
+      }
+
+      .cls-33 {
+        fill: url(#linear-gradient-13);
+      }
+
+      .cls-34 {
+        fill: url(#linear-gradient-16);
+      }
+
+      .cls-35 {
+        fill: url(#linear-gradient-17);
+      }
+
+      .cls-36 {
+        fill: url(#linear-gradient-18);
+      }
+
+      .cls-37 {
+        fill: #00e1ff;
+      }
+
+      .cls-38 {
+        fill: #00ba97;
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="9885.06" y1="4166.65" x2="11163.05" y2="3231.54" gradientTransform="translate(0 5476.58) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#fda1ff"/>
+      <stop offset="1" stop-color="#97c5ff"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-2" x1="10977.63" y1="4548.03" x2="10717.14" y2="4115.05" gradientTransform="translate(0 5476.58) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset=".49" stop-color="#b78efa"/>
+      <stop offset="1" stop-color="#8f6ccd"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-3" x1="10133.99" y1="4126.16" x2="10918.38" y2="2750.53" gradientTransform="translate(0 5476.58) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset=".2" stop-color="#fda1ff"/>
+      <stop offset=".3" stop-color="#f3a4ff"/>
+      <stop offset=".48" stop-color="#d9adff"/>
+      <stop offset=".71" stop-color="#afbcff"/>
+      <stop offset=".83" stop-color="#97c5ff"/>
+    </linearGradient>
+    <radialGradient id="radial-gradient" cx="5000.91" cy="3779.28" fx="5000.91" fy="3779.28" r="1.01" gradientTransform="translate(-505614.61 -625435.78) rotate(53.1) scale(162.24 -9.73)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#fff"/>
+      <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="radial-gradient-2" cx="5000.91" cy="3385.64" fx="5000.91" fy="3385.64" r="1.01" gradientTransform="translate(-599193.58 -555175.07) rotate(53.1) scale(162.24 -45.43)" xlink:href="#radial-gradient"/>
+    <linearGradient id="linear-gradient-4" x1="10172.56" y1="4229.46" x2="10644.45" y2="2517.64" gradientTransform="translate(0 5476.58) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#eebeff"/>
+      <stop offset="1" stop-color="#79edff"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-5" x1="11741.37" y1="4237.41" x2="11468.06" y2="3030.99" gradientTransform="translate(0 5476.58) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#00b99a"/>
+      <stop offset="1" stop-color="#009cbd"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-6" x1="11720.67" y1="4349.51" x2="11250.05" y2="2898.07" gradientTransform="translate(0 5476.58) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#00cc9e"/>
+      <stop offset=".22" stop-color="#00884a"/>
+      <stop offset=".31" stop-color="#008d64"/>
+      <stop offset=".55" stop-color="#009a9d"/>
+      <stop offset=".75" stop-color="#00a3c7"/>
+      <stop offset=".91" stop-color="#00a8e1"/>
+      <stop offset="1" stop-color="#00abeb"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-7" x1="11398.05" y1="4298.52" x2="11786.26" y2="3403.21" gradientTransform="translate(0 5476.58) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#3ce6ac"/>
+      <stop offset="1" stop-color="#00e3ff"/>
+    </linearGradient>
+    <radialGradient id="radial-gradient-3" cx="5011.94" cy="3286.5" fx="5011.94" fy="3286.5" r="1.01" gradientTransform="translate(-1322545.38 875817.22) scale(266.17 -266.17)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#fff"/>
+      <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="radial-gradient-4" cx="5062.2" cy="3311.1" fx="5062.2" fy="3311.1" r="1.01" gradientTransform="translate(-325760.14 221632.44) scale(66.61 -66.61)" xlink:href="#radial-gradient"/>
+    <linearGradient id="linear-gradient-8" x1="11184.82" y1="3629.72" x2="12228.38" y2="3629.72" gradientTransform="translate(0 5476.58) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#00e4ff"/>
+      <stop offset="1" stop-color="#00e3f7"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-9" x1="9906.89" y1="5227.07" x2="10187.45" y2="4412.31" gradientTransform="translate(0 5476.58) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#00cdc2"/>
+      <stop offset="1" stop-color="#288822"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-10" x1="9908.06" y1="5223.68" x2="10187.52" y2="4412.12" xlink:href="#linear-gradient-9"/>
+    <linearGradient id="linear-gradient-11" x1="9904.1" y1="5226.65" x2="10177.35" y2="4433.13" gradientTransform="translate(0 5476.58) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#00cdc3"/>
+      <stop offset="1" stop-color="#4fdb5e"/>
+    </linearGradient>
+    <radialGradient id="radial-gradient-5" cx="5001.58" cy="3281.44" fx="5001.58" fy="3281.44" r="1.01" gradientTransform="translate(-3463696.84 2280291.84) scale(694.67 -694.67)" xlink:href="#radial-gradient"/>
+    <radialGradient id="radial-gradient-6" cx="4985.87" cy="3427.74" fx="4985.87" fy="3427.74" r="1.01" gradientTransform="translate(75643.69 -1436104.03) rotate(96.41) scale(287.83 -28.01)" xlink:href="#radial-gradient"/>
+    <linearGradient id="linear-gradient-12" x1="9969.18" y1="4976.15" x2="10223.05" y2="4342.04" xlink:href="#linear-gradient-11"/>
+    <radialGradient id="radial-gradient-7" cx="5005.12" cy="3283.18" fx="5005.12" fy="3283.18" r="1.01" gradientTransform="translate(-2232295.66 1472395.23) scale(448.31 -448.31)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#88d2ff"/>
+      <stop offset="1" stop-color="#0079ff"/>
+    </radialGradient>
+    <radialGradient id="radial-gradient-8" cx="5002.19" cy="3281.74" fx="5002.19" fy="3281.74" r="1.01" gradientTransform="translate(-3166398.37 2085321.22) scale(635.28 -635.28)" xlink:href="#radial-gradient-7"/>
+    <linearGradient id="linear-gradient-13" x1="11171.43" y1="4843.03" x2="11730.7" y2="5086.9" gradientTransform="translate(0 5476.58) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset=".04" stop-color="#62c7ff"/>
+      <stop offset=".79" stop-color="#d9b5ff"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-14" x1="11363.16" y1="4968.93" x2="11828.27" y2="4790.22" gradientTransform="translate(0 5476.58) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#c07dff" stop-opacity="0"/>
+      <stop offset="1" stop-color="#a855f5"/>
+    </linearGradient>
+    <radialGradient id="radial-gradient-9" cx="4995.8" cy="3426.98" fx="4995.8" fy="3426.98" r="1.01" gradientTransform="translate(-719552.54 -1121706.87) rotate(61.84) scale(267.03 -33.41)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#0079ff"/>
+      <stop offset="1" stop-color="#0079ff"/>
+    </radialGradient>
+    <radialGradient id="radial-gradient-10" cx="4995.01" cy="3559.73" fx="4995.01" fy="3559.73" r="1.01" gradientTransform="translate(-684297.79 -1299492) rotate(64.3) scale(294.83 -17.66)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#0079ff"/>
+      <stop offset="1" stop-color="#0079ff" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="linear-gradient-15" x1="11548.74" y1="4929.56" x2="12192.44" y2="4756.92" gradientTransform="translate(0 5476.58) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#0079ff"/>
+      <stop offset="1" stop-color="#0079ff" stop-opacity=".5"/>
+    </linearGradient>
+    <radialGradient id="radial-gradient-11" cx="5005.63" cy="3713.52" fx="5005.63" fy="3713.52" r="1.01" gradientTransform="translate(-1772066.81 -404692.94) rotate(13.66) scale(365.42 -7.31)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#cda2fd"/>
+      <stop offset="1" stop-color="#0079ff" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="radial-gradient-12" cx="5022.1" cy="3444.33" fx="5022.1" fy="3444.33" r="1.01" gradientTransform="translate(-614899.34 -150408.56) rotate(20.22) scale(127.43 -21.66)" gradientUnits="userSpaceOnUse">
+      <stop offset=".11" stop-color="#fff"/>
+      <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="radial-gradient-13" cx="5009.1" cy="3361.08" fx="5009.1" fy="3361.08" r="1.01" gradientTransform="translate(-844346.1 -352652.71) rotate(33.25) scale(181.48 -51.69)" xlink:href="#radial-gradient"/>
+    <radialGradient id="radial-gradient-14" cx="5005.09" cy="3477.13" fx="5005.09" fy="3477.13" r="1.01" gradientTransform="translate(-1868546.64 -406432.07) rotate(13.89) scale(384.23 -16.07)" xlink:href="#radial-gradient-10"/>
+    <linearGradient id="linear-gradient-16" x1="10783.39" y1="4964.43" x2="12142.76" y2="4964.43" gradientTransform="translate(0 5476.58) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#88d2ff"/>
+      <stop offset="1" stop-color="#f6b6ff"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-17" x1="11210.8" y1="4740.81" x2="11481.49" y2="4981.36" gradientTransform="translate(0 5476.58) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#0079ff"/>
+      <stop offset="1" stop-color="#0079ff" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-18" x1="10783.01" y1="4962.47" x2="12151.93" y2="4962.47" xlink:href="#linear-gradient-16"/>
+  </defs>
+  <path class="cls-28" d="M7718.15,2280.85V847.79h388.71v209.91c85.52-150.3,243.59-241,440.54-241,303.2,0,487.19,209.91,487.19,549.38v914.77h-388.71v-829.25c0-207.31-80.33-305.79-235.82-305.79-181.4,0-303.2,139.94-303.2,355.02v780.02h-388.71ZM6999.09,2317.13c-471.64,0-785.21-310.97-785.21-748.92s303.21-756.69,725.61-756.69c378.35,0,647.84,259.14,678.94,645.26l-976.97,352.43c75.15,121.8,217.69,191.77,412.05,191.77,152.89,0,300.6-38.87,409.44-114.02v313.56c-106.25,69.97-282.47,116.61-463.86,116.61ZM6581.86,1534.52l647.85-235.82c-41.46-116.61-147.7-186.58-290.23-186.58-228.04,0-380.95,176.22-357.63,422.4ZM5450.47,2322.31c-572.7,0-984.74-401.67-984.74-945.87s427.58-951.05,1010.65-951.05c230.64,0,448.32,59.6,567.52,152.89v362.8c-124.39-114.02-316.15-181.4-513.1-181.4-401.67,0-660.81,248.78-660.81,616.76s248.78,614.17,603.8,614.17c90.7,0,191.77-18.14,274.69-51.83v-412.04h-388.71v-310.97h741.15v896.63c-168.44,132.16-399.08,209.91-650.45,209.91ZM3260.92,2682.52l272.1-585.66-562.34-1249.06h422.4l347.26,800.75,344.65-800.75h393.9l-816.3,1834.72h-401.67ZM2420.07,2317.13c-471.64,0-785.2-310.97-785.2-748.92s303.2-756.69,725.6-756.69c378.35,0,647.85,259.14,678.95,645.26l-976.97,352.43c75.15,121.8,217.68,191.77,412.04,191.77,152.89,0,300.6-38.87,409.44-114.02v313.56c-106.25,69.97-282.46,116.61-463.86,116.61ZM2002.85,1534.52l647.85-235.82c-41.46-116.61-147.71-186.58-290.24-186.58-228.04,0-380.94,176.22-357.62,422.4ZM.61,2280.85V466.85h393.9v681.54h730.78V466.85h393.9v1813.99h-393.9v-785.2H394.51v785.2H.61Z"/>
+  <g>
+    <path class="cls-21" d="M10627.99,2657.98s-868.31-665.14-1000.64-765.35c-73.68-55.78-153.79-186.47-137.09-289.26,12.42-76.42,56.55-115.67,116.35-136.53,186.28-65,777.35-269.13,936.21-320.18,87.58-28.15,226.55-2.4,330.37,82.46,82.23,67.22,147.24,165.71,148.08,292.72,1.88,287.37,17.09,959.9,17.09,1046.42,0,49.35-20.75,133.02-118,162.34-94.64,28.53-212.39-11.45-292.37-72.63h0Z"/>
+    <path class="cls-18" d="M10866.73,1234.81c82.23,67.21,144.52,160.73,145.36,287.74,1.88,287.37,26.25,959.2,26.25,1045.73,0-86.53-5.79-770.51-7.68-1057.88-1.88-287.37-315.72-436.72-472.64-380-156.93,56.71-765.15,271.46-951.43,336.45,186.28-65,780.27-261.59,939.12-312.64,87.58-28.15,217.18-4.27,321.01,80.6h.01Z"/>
+    <path class="cls-22" d="M10866.73,1234.81c82.23,67.21,144.52,160.73,145.36,287.74,1.88,287.37,26.25,959.2,26.25,1045.73,0-86.53-5.79-770.51-7.68-1057.88-1.88-287.37-315.72-436.72-472.64-380-156.93,56.71-765.15,271.46-951.43,336.45,186.28-65,780.27-261.59,939.12-312.64,87.58-28.15,217.18-4.27,321.01,80.6h.01Z"/>
+    <path class="cls-17" d="M10627.99,2657.98s-868.31-665.14-1000.64-765.35c-73.68-55.78-153.79-186.47-137.09-289.26,12.42-76.42,56.55-115.67,116.35-136.53,186.28-65,777.35-269.13,936.21-320.18,87.58-28.15,226.55-2.4,330.37,82.46,82.23,67.22,155.56,166.7,156.97,293.7,1.4,125.09,1.83,322.36,3.37,512.59,2.01,247.64,3.99,483.38,3.85,532.86-.13,49.35-19.75,133.02-117.01,162.34-94.64,28.53-212.39-11.45-292.37-72.63h0Z"/>
+    <path class="cls-20" d="M10872.6,1228.61c82.29,67.13,147.4,165.57,148.36,292.57,2.18,287.37,18.03,959.89,18.11,1046.42-.08-86.53-6.54-770.5-8.7-1057.88-2.18-287.37-316.15-436.41-473.02-379.54-156.86,56.88-764.88,272.2-951.1,337.38,186.21-65.19,777.09-269.89,935.9-321.1,87.55-28.24,226.53-2.62,330.45,82.15Z"/>
+    <path class="cls-10" d="M10872.6,1228.61c82.29,67.13,147.4,165.57,148.36,292.57,2.18,287.37,18.03,959.89,18.11,1046.42-.08-86.53-6.54-770.5-8.7-1057.88-2.18-287.37-316.15-436.41-473.02-379.54-156.86,56.88-764.88,272.2-951.1,337.38,186.21-65.19,777.09-269.89,935.9-321.1,87.55-28.24,226.53-2.62,330.45,82.15Z"/>
+    <path class="cls-16" d="M10632.39,1125.43c40.53,0,85.15,9.01,129.03,26.05,45.69,17.74,89.54,43.92,126.82,75.67,41.02,34.95,73.49,75.66,96.53,121.01,25.49,50.2,38.62,104.8,38.99,162.3.78,119.44,2.25,309.08,3.68,492.48,2.05,264.75,3.99,514.81,3.99,565.35,0,17.52-2.8,51.91-21.64,85.28-19.33,34.27-50.1,57.97-91.44,70.43-20.03,6.04-41.89,9.1-64.96,9.1-36.69,0-77.02-7.88-116.65-22.8-37.36-14.06-73.51-34.05-104.55-57.8-8.68-6.65-869.83-666.29-1000.67-765.36-37.04-28.04-74.6-74.65-100.47-124.67-13.98-27.04-24.09-53.92-30.04-79.9-6.44-28.16-7.77-54.43-3.92-78.07,5.74-35.34,18.4-63.32,38.68-85.55,18.08-19.8,41.99-34.7,73.12-45.56,191.65-66.88,794.69-279.81,951.5-336.48,21.06-7.62,45.29-11.49,72.01-11.49M10632.38,1118.52c-27.02,0-52.25,3.9-74.35,11.88-156.92,56.71-765.14,271.46-951.42,336.46-59.8,20.87-103.94,60.09-116.35,136.52-16.7,102.79,63.41,233.48,137.09,289.27,132.34,100.2,1000.64,765.34,1000.64,765.34,61.92,47.37,146.46,82.03,225.41,82.03,23.03,0,45.58-2.96,66.96-9.4,97.26-29.31,118-112.98,118-162.33,0-86.53-5.79-770.51-7.68-1057.88-1.62-246.89-233.49-391.9-398.29-391.9h-.01Z"/>
+    <path class="cls-13" d="M11184.83,1489.7c0-78.68,30.02-207.84,100.55-307.99,39.67-56.34,89.69-107.79,141.49-131.36,40.29-18.33,59.58-21.36,107.38-11.5,0,0,579.09,124.18,614.4,131.34,35.31,7.18,73.84,31.14,78.97,104.77,5.13,73.62-14.26,189.97-96.68,309.97-82.42,119.99-584.21,844.79-647.23,935.69-63.01,90.9-157.64,148.93-211.37,134.78-68.18-17.96-82.76-80.79-82.23-124.15.97-80-5.28-1041.54-5.28-1041.54h.01Z"/>
+    <path class="cls-14" d="M11272.32,2642.04c-63.19-17.15-59.72-65.53-60.33-110.8-1.12-83.66-5.25-1041.54-5.25-1041.54,0-78.68,27.14-192.58,97.67-292.73,39.67-56.34,75.27-98.94,124.06-126.98,38.38-22.06,75.61-27.24,123.4-17.38,0,0,561.45,110.41,596.77,117.58-35.31-7.17-614.4-131.34-614.4-131.34-47.79-9.87-67.09-6.83-107.38,11.5-51.81,23.57-101.82,75.02-141.49,131.36-70.53,100.15-100.55,229.32-100.55,307.99,0,0,6.25,961.55,5.28,1041.54-.54,43.36,14.04,106.18,82.23,124.15,53.73,14.15,148.35-43.87,211.37-134.78-63.02,90.91-157.75,135.99-211.37,121.42h-.01Z"/>
+    <path class="cls-38" d="M11272.32,2642.04c-63.19-17.15-59.72-65.53-60.33-110.8-1.12-83.66-5.25-1041.54-5.25-1041.54,0-78.68,27.14-192.58,97.67-292.73,39.67-56.34,75.27-98.94,124.06-126.98,38.38-22.06,75.61-27.24,123.4-17.38,0,0,561.45,110.41,596.77,117.58-35.31-7.17-614.4-131.34-614.4-131.34-47.79-9.87-67.09-6.83-107.38,11.5-51.81,23.57-101.82,75.02-141.49,131.36-70.53,100.15-100.55,229.32-100.55,307.99,0,0,6.25,961.55,5.28,1041.54-.54,43.36,14.04,106.18,82.23,124.15,53.73,14.15,148.35-43.87,211.37-134.78-63.02,90.91-157.75,135.99-211.37,121.42h-.01Z"/>
+    <path class="cls-12" d="M11206.75,1489.73c0-78.68,27.14-192.58,97.68-292.73,39.67-56.34,75.27-98.94,124.05-126.98,38.38-22.06,75.61-27.24,123.41-17.38,0,0,561.45,110.41,596.77,117.58,35.31,7.18,73.83,31.14,78.97,104.77,5.13,73.62-14.26,189.97-96.68,309.97-82.42,119.99-584.21,844.79-647.23,935.69-63.02,90.89-157.75,149.34-211.37,134.78-63.19-17.15-59.72-78.89-60.33-124.15-1.12-83.65-5.26-1041.54-5.26-1041.54h0Z"/>
+    <path class="cls-9" d="M11272.32,2642.04c-63.19-17.15-59.72-65.53-60.33-110.8-1.12-83.66-5.25-1041.54-5.25-1041.54,0-78.68,27.14-192.58,97.67-292.73,39.67-56.34,75.27-98.94,124.06-126.98,38.38-22.06,75.61-27.24,123.4-17.38,0,0,561.45,110.41,596.77,117.58-35.31-7.17-614.4-131.34-614.4-131.34-47.79-9.87-67.09-6.83-107.38,11.5-51.81,23.57-101.82,75.02-141.49,131.36-70.53,100.15-100.55,229.32-100.55,307.99,0,0,6.25,961.55,5.28,1041.54-.54,43.36,14.04,106.18,82.23,124.15,53.73,14.15,148.35-43.87,211.37-134.78-63.02,90.91-157.75,135.99-211.37,121.42h-.01Z"/>
+    <path class="cls-6" d="M11272.32,2642.04c-63.19-17.15-59.72-65.53-60.33-110.8-1.12-83.66-5.25-1041.54-5.25-1041.54,0-78.68,27.14-192.58,97.67-292.73,39.67-56.34,75.27-98.94,124.06-126.98,38.38-22.06,75.61-27.24,123.4-17.38,0,0,561.45,110.41,596.77,117.58-35.31-7.17-614.4-131.34-614.4-131.34-47.79-9.87-67.09-6.83-107.38,11.5-51.81,23.57-101.82,75.02-141.49,131.36-70.53,100.15-100.55,229.32-100.55,307.99,0,0,6.25,961.55,5.28,1041.54-.54,43.36,14.04,106.18,82.23,124.15,53.73,14.15,148.35-43.87,211.37-134.78-63.02,90.91-157.75,135.99-211.37,121.42h-.01Z"/>
+    <path class="cls-11" d="M11490.41,1033.32v7.74c11.21,0,24.24,1.65,42.21,5.36,5.99,1.29,579.52,124.27,614.47,131.36,19.33,3.92,35.02,12.37,46.63,25.09,15.16,16.61,23.97,41.05,26.17,72.62,2,28.85.99,75.96-15.26,136.49-16.05,59.79-42.99,117.47-80.07,171.45-81.94,119.29-580.28,839.14-647.21,935.66-26.45,38.16-60.43,72.66-95.65,97.17-33.76,23.48-66.42,36.41-91.95,36.41-5.57,0-10.75-.63-15.45-1.86-28.29-7.46-49.14-23.81-61.99-48.64-12.37-23.87-14.69-50.13-14.48-67.95.96-79.05-5.2-1029.97-5.28-1041.65,0-42.19,8.14-94.81,22.31-144.37,17.21-60.22,42.94-115.66,74.38-160.3,43.77-62.16,95.1-109.74,140.81-130.53,23.29-10.6,39.81-16.33,60.35-16.33v-7.74M11490.41,1033.32c-21.1,0-38.15,5.49-63.55,17.03-51.81,23.57-104.27,76.78-143.94,133.11-70.53,100.15-98.1,230.47-98.1,309.15,0,0,6.25,961.55,5.28,1041.54-.54,43.36,14.04,106.18,82.23,124.15,5.41,1.43,11.24,2.12,17.43,2.12,55.05,0,137.27-55.17,193.95-136.9,63.03-90.91,564.82-815.7,647.23-935.69,82.42-120,101.81-239.25,96.68-312.87-5.13-73.62-43.66-97.58-78.97-104.76-35.31-7.18-614.4-131.34-614.4-131.34-17.67-3.65-31.44-5.55-43.83-5.55h-.01Z"/>
+    <path class="cls-15" d="M9437.47,1273.5c0-52.74,35.09-131.94,81.18-187.1,0,0,693.73-832.95,740.62-889.37s140.83-129.06,212.54-159.28c71.7-30.22,118.82-23.05,140.33,23.56,21.52,46.61,202.95,444.75,224.58,492.12,20.45,44.84,16.78,84.22-25.54,168.45-53.66,106.78-196.32,231.91-292.73,267.09-105.9,38.64-874.43,318.06-954.78,347.18-80.35,29.12-126.19-17.2-126.19-62.66Z"/>
+    <path class="cls-30" d="M10836.71,553.42c-21.62-47.38-203.06-445.51-224.58-492.12-14.95-32.38-42.25-45.72-81.56-40.72,34.78-3.73,56.32,10.31,70.92,41.97,21.52,46.61,196.48,425.61,217.44,473.27,16.91,38.48,17.16,78.63-21.98,155.65-51.59,101.53-197.53,238.66-293.93,273.84-105.91,38.64-879.37,322.93-959.72,352.05-80.35,29.13-100.68-8.58-100.68-54.03,0-31.16,10.45-68.02,28.51-104.34-20.61,40.38-33.66,82.34-33.66,114.49,0,45.45,45.84,91.77,126.19,62.63,80.35-29.12,848.87-308.54,954.78-347.18,96.41-35.18,239.06-160.31,292.73-267.09,42.32-84.23,46-123.6,25.54-168.45h-.01Z"/>
+    <path class="cls-19" d="M10836.71,553.42c-21.62-47.38-203.06-445.51-224.58-492.12-14.95-32.38-42.25-45.72-81.56-40.72,34.78-3.73,56.32,10.31,70.92,41.97,21.52,46.61,196.48,425.61,217.44,473.27,16.91,38.48,17.16,78.63-21.98,155.65-51.59,101.53-197.53,238.66-293.93,273.84-105.91,38.64-879.37,322.93-959.72,352.05-80.35,29.13-100.68-8.58-100.68-54.03,0-31.16,10.45-68.02,28.51-104.34-20.61,40.38-33.66,82.34-33.66,114.49,0,45.45,45.84,91.77,126.19,62.63,80.35-29.12,848.87-308.54,954.78-347.18,96.41-35.18,239.06-160.31,292.73-267.09,42.32-84.23,46-123.6,25.54-168.45h-.01Z"/>
+    <path class="cls-31" d="M9442.61,1263.34c0-52.74,29.94-121.79,76.04-176.95,0,0,693.73-832.95,740.62-889.37,46.89-56.42,140.83-129.06,212.54-159.28,71.7-30.22,108.19-21.79,129.7,24.81,21.52,46.6,196.48,425.61,217.43,473.27,16.91,38.48,17.16,78.63-21.97,155.65-51.59,101.53-197.54,238.66-293.94,273.84-105.91,38.64-879.37,322.93-959.72,352.05-80.35,29.13-100.68-8.57-100.68-54.02h0Z"/>
+    <path class="cls-5" d="M10836.71,553.42c-21.62-47.38-203.06-445.51-224.58-492.12-14.95-32.38-42.25-45.72-81.56-40.72,34.78-3.73,56.32,10.31,70.92,41.97,21.52,46.61,196.48,425.61,217.44,473.27,16.91,38.48,17.16,78.63-21.98,155.65-51.59,101.53-197.53,238.66-293.93,273.84-105.91,38.64-879.37,322.93-959.72,352.05-80.35,29.13-100.68-8.58-100.68-54.03,0-31.16,10.45-68.02,28.51-104.34-20.61,40.38-33.66,82.34-33.66,114.49,0,45.45,45.84,91.77,126.19,62.63,80.35-29.12,848.87-308.54,954.78-347.18,96.41-35.18,239.06-160.31,292.73-267.09,42.32-84.23,46-123.6,25.54-168.45h-.01Z"/>
+    <path class="cls-19" d="M10836.71,553.42c-21.62-47.38-203.06-445.51-224.58-492.12-14.95-32.38-42.25-45.72-81.56-40.72,34.78-3.73,56.32,10.31,70.92,41.97,21.52,46.61,196.48,425.61,217.44,473.27,16.91,38.48,17.16,78.63-21.98,155.65-51.59,101.53-197.53,238.66-293.93,273.84-105.91,38.64-879.37,322.93-959.72,352.05-80.35,29.13-100.68-8.58-100.68-54.03,0-31.16,10.45-68.02,28.51-104.34-20.61,40.38-33.66,82.34-33.66,114.49,0,45.45,45.84,91.77,126.19,62.63,80.35-29.12,848.87-308.54,954.78-347.18,96.41-35.18,239.06-160.31,292.73-267.09,42.32-84.23,46-123.6,25.54-168.45h-.01Z"/>
+    <path class="cls-4" d="M10836.71,553.42c-21.62-47.38-203.06-445.51-224.58-492.12-14.95-32.38-42.25-45.72-81.56-40.72,34.78-3.73,56.32,10.31,70.92,41.97,21.52,46.61,196.48,425.61,217.44,473.27,16.91,38.48,17.16,78.63-21.98,155.65-51.59,101.53-197.53,238.66-293.93,273.84-105.91,38.64-879.37,322.93-959.72,352.05-80.35,29.13-100.68-8.58-100.68-54.03,0-31.16,10.45-68.02,28.51-104.34-20.61,40.38-33.66,82.34-33.66,114.49,0,45.45,45.84,91.77,126.19,62.63,80.35-29.12,848.87-308.54,954.78-347.18,96.41-35.18,239.06-160.31,292.73-267.09,42.32-84.23,46-123.6,25.54-168.45h-.01Z"/>
+    <path class="cls-32" d="M10545.94,29.24c27.42,0,43.82,13.58,55.03,37.89,17.39,37.66,140.95,301.72,199.18,429.45,13.62,29.86,23.61,51.79,27.75,60.86,10.18,22.32,13.18,41.49,10,64.1-3.45,24.58-14.36,54.19-35.38,96-12.65,25.18-30.69,52.11-53.65,80.03-21.8,26.53-46.87,52.61-74.52,77.52-55.36,49.87-113.4,88.08-159.22,104.79-101.76,37.13-871.06,316.83-954.77,347.18-15.57,5.65-30.36,8.51-43.99,8.51-21.02,0-38.88-6.8-51.64-19.66-11.19-11.27-17.61-26.73-17.61-42.39,0-24.03,7.99-55.55,22.5-88.79,14.5-33.21,34.54-65.92,56.45-92.14,6.93-8.33,694.27-833.61,740.62-889.39,22.44-27.01,57.2-59.06,95.36-87.93,39.97-30.25,80.28-54.62,113.49-68.61,27.45-11.56,51.13-17.42,70.39-17.42M10545.94,19.57c-20.75,0-45.48,6.1-74.14,18.19-71.71,30.22-165.66,102.86-212.54,159.28-46.89,56.42-740.62,889.37-740.62,889.37-46.08,55.16-81.17,134.35-81.17,187.11,0,35.59,28.12,71.72,78.92,71.72,14.06,0,29.86-2.76,47.27-9.08,80.35-29.13,848.87-308.54,954.78-347.18,96.41-35.18,239.06-160.31,292.73-267.09,42.32-84.23,46-123.6,25.54-168.45-21.62-47.38-203.06-445.51-224.58-492.12-12.9-27.98-35.05-41.74-66.2-41.74h0Z"/>
+    <path class="cls-3" d="M10795.84,67.84c-13.68-29.38-15.69-37.1-7.96-48.05,7.72-10.95,10.71-23.9,48.8-16.43,38.09,7.47,120.12,39.88,260.54,144.12,140.41,104.23,759,564.19,856.6,636.58,97.6,72.38,168.57,150.62,182.45,184.12,11.24,26.23,6.03,31.8-1.73,41.04-6.51,7.76-10.73,15.85-33.26,13.55,0,0-80.39-17.51-175.44-39.6-95.05-22.09-335.58-77.29-451.93-104.39-116.35-27.1-246.96-124.62-293.06-161.33-30.6-24.39-77.73-62.44-126.16-120.61-19.53-23.45-32.77-46.69-50.11-84.56-52.7-115.15-208.75-444.43-208.75-444.43h.01Z"/>
+    <path class="cls-8" d="M12128.13,955.97c4,11.35,6.29,32.09.49,37.64-5.32,5.1-15.04,3.15-32.74-.98,0,0-67.69-18.96-162.75-41.05-95.06-22.09-335.74-80.43-452.1-107.52-116.35-27.09-231.51-119.68-277.61-156.4-30.6-24.39-67.4-53.75-115.83-111.93-19.52-23.45-48.83-78.23-66.87-115.77-55.15-114.81-202.86-407.96-202.86-407.96-13.69-29.38-11.25-37.86-4.65-43.48,3.27-2.79,10.56-3.49,28.44-.44,37.07,6.32,110.37,33.41,242.57,129.85-132.53-96.69-210.67-127.33-247.56-134.57-38.09-7.47-41.08,5.48-48.8,16.43-7.72,10.95-5.72,18.67,7.96,48.05,0,0,156.06,329.28,208.75,444.43,17.34,37.88,30.57,61.11,50.11,84.56,48.43,58.17,95.56,96.23,126.16,120.61,46.09,36.72,176.71,134.24,293.06,161.33,116.35,27.1,356.87,82.29,451.93,104.39,95.06,22.09,175.43,39.6,175.43,39.6,22.54,2.3,26.76-5.79,33.27-13.55,7.76-9.25,4.84-27.02-6.42-53.25h.01Z"/>
+    <path class="cls-29" d="M12128.13,955.97c4,11.35,6.29,32.09.49,37.64-5.32,5.1-15.04,3.15-32.74-.98,0,0-67.69-18.96-162.75-41.05-95.06-22.09-335.74-80.43-452.1-107.52-116.35-27.09-231.51-119.68-277.61-156.4-30.6-24.39-67.4-53.75-115.83-111.93-19.52-23.45-48.83-78.23-66.87-115.77-55.15-114.81-202.86-407.96-202.86-407.96-13.69-29.38-11.25-37.86-4.65-43.48,3.27-2.79,10.56-3.49,28.44-.44,37.07,6.32,110.37,33.41,242.57,129.85-132.53-96.69-210.67-127.33-247.56-134.57-38.09-7.47-41.08,5.48-48.8,16.43-7.72,10.95-5.72,18.67,7.96,48.05,0,0,156.06,329.28,208.75,444.43,17.34,37.88,30.57,61.11,50.11,84.56,48.43,58.17,95.56,96.23,126.16,120.61,46.09,36.72,176.71,134.24,293.06,161.33,116.35,27.1,356.87,82.29,451.93,104.39,95.06,22.09,175.43,39.6,175.43,39.6,22.54,2.3,26.76-5.79,33.27-13.55,7.76-9.25,4.84-27.02-6.42-53.25h.01Z"/>
+    <g>
+      <path class="cls-33" d="M10807,54.96c-13.69-29.38-13.06-42.37-6.45-48,3.27-2.79,23.71-4.99,41.4-1.02,38.47,8.64,114.85,37.31,255.27,141.55,140.41,104.23,754.99,566.07,852.59,638.45,97.61,72.38,165.94,146.71,179.83,180.21,3.99,11.35,10.92,29.2,5.11,34.75-5.32,5.1-11.85,5.85-29.57,1.72,0,0-81.01-21.21-176.07-43.3-95.06-22.09-332.09-78.89-448.43-105.98-116.35-27.1-233.41-120.57-279.49-157.28-30.61-24.39-72.26-56-120.69-114.17-19.52-23.45-42.89-46.52-60.23-84.39-52.7-115.15-213.29-442.53-213.29-442.53h.02Z"/>
+      <path class="cls-2" d="M10807,54.96c-13.69-29.38-13.06-42.37-6.45-48,3.27-2.79,23.71-4.99,41.4-1.02,38.47,8.64,114.85,37.31,255.27,141.55,140.41,104.23,754.99,566.07,852.59,638.45,97.61,72.38,165.94,146.71,179.83,180.21,3.99,11.35,10.92,29.2,5.11,34.75-5.32,5.1-11.85,5.85-29.57,1.72,0,0-81.01-21.21-176.07-43.3-95.06-22.09-332.09-78.89-448.43-105.98-116.35-27.1-233.41-120.57-279.49-157.28-30.61-24.39-72.26-56-120.69-114.17-19.52-23.45-42.89-46.52-60.23-84.39-52.7-115.15-213.29-442.53-213.29-442.53h.02Z"/>
+    </g>
+    <path class="cls-7" d="M12122.38,955.98c4,11.35,6.29,32.09.49,37.64-5.32,5.1-15.04,3.15-32.74-.98,0,0-67.71-18.96-162.75-41.05-95.06-22.09-335.74-80.43-452.1-107.52-116.35-27.09-231.51-119.68-277.61-156.4-30.6-24.39-65.5-59.46-113.92-117.63-19.53-23.45-47.88-72.53-65.91-110.07-55.15-114.81-201.91-407.96-201.91-407.96-13.69-29.38-15.06-37.86-8.45-43.48,3.27-2.79,10.56-3.49,28.44-.44,37.07,6.32,110.37,33.41,242.56,129.85-132.52-96.69-210.54-127.91-247.55-134.57-33.39-6.02-35.76,7.59-43.87,18.95-6.24,8.74-4.92,16.16,8.77,45.54,0,0,152.49,321.52,205.19,436.67,17.34,37.88,34.14,68.86,53.66,92.31,48.43,58.17,91.49,92.36,122.1,116.74,46.09,36.72,175.03,136.2,291.39,163.3,116.35,27.09,356.87,82.29,451.93,104.39,95.06,22.09,175.43,40.56,175.43,40.56,22.54,2.29,26.76-4.84,33.27-12.61,7.76-9.25,4.84-27.02-6.42-53.25h.01Z"/>
+    <path class="cls-37" d="M12122.38,955.98c4,11.35,6.29,32.09.49,37.64-5.32,5.1-15.04,3.15-32.74-.98,0,0-67.71-18.96-162.75-41.05-95.06-22.09-335.74-80.43-452.1-107.52-116.35-27.09-231.51-119.68-277.61-156.4-30.6-24.39-65.5-59.46-113.92-117.63-19.53-23.45-47.88-72.53-65.91-110.07-55.15-114.81-201.91-407.96-201.91-407.96-13.69-29.38-15.06-37.86-8.45-43.48,3.27-2.79,10.56-3.49,28.44-.44,37.07,6.32,110.37,33.41,242.56,129.85-132.52-96.69-210.54-127.91-247.55-134.57-33.39-6.02-35.76,7.59-43.87,18.95-6.24,8.74-4.92,16.16,8.77,45.54,0,0,152.49,321.52,205.19,436.67,17.34,37.88,34.14,68.86,53.66,92.31,48.43,58.17,91.49,92.36,122.1,116.74,46.09,36.72,175.03,136.2,291.39,163.3,116.35,27.09,356.87,82.29,451.93,104.39,95.06,22.09,175.43,40.56,175.43,40.56,22.54,2.29,30.85-7.98,37.35-15.75,7.76-9.25,3.53-24.67-10.51-50.11h.01Z"/>
+    <path class="cls-37" d="M12122.38,955.98c4,11.35,6.29,32.09.49,37.64-5.32,5.1-15.04,3.15-32.74-.98,0,0-67.71-18.96-162.75-41.05-95.06-22.09-335.74-80.43-452.1-107.52-116.35-27.09-231.51-119.68-277.61-156.4-30.6-24.39-65.5-59.46-113.92-117.63-19.53-23.45-47.88-72.53-65.91-110.07-55.15-114.81-201.91-407.96-201.91-407.96-13.69-29.38-15.06-37.86-8.45-43.48,3.27-2.79,10.56-3.49,28.44-.44,37.07,6.32,110.37,33.41,242.56,129.85-132.52-96.69-210.54-127.91-247.55-134.57-33.39-6.02-35.76,7.59-43.87,18.95-6.24,8.74-4.92,16.16,8.77,45.54,0,0,152.49,321.52,205.19,436.67,17.34,37.88,34.14,68.86,53.66,92.31,48.43,58.17,91.49,92.36,122.1,116.74,46.09,36.72,175.03,136.2,291.39,163.3,116.35,27.09,356.87,82.29,451.93,104.39,95.06,22.09,175.43,40.56,175.43,40.56,22.54,2.29,26.76-4.84,33.27-12.61,7.76-9.25,4.84-27.02-6.42-53.25h.01Z"/>
+    <path class="cls-26" d="M12122.38,955.98c4,11.35,6.29,32.09.49,37.64-5.32,5.1-15.04,3.15-32.74-.98,0,0-67.71-18.96-162.75-41.05-95.06-22.09-335.74-80.43-452.1-107.52-116.35-27.09-231.51-119.68-277.61-156.4-30.6-24.39-65.5-59.46-113.92-117.63-19.53-23.45-47.88-72.53-65.91-110.07-55.15-114.81-201.91-407.96-201.91-407.96-13.69-29.38-15.06-37.86-8.45-43.48,3.27-2.79,10.56-3.49,28.44-.44,37.07,6.32,110.37,33.41,242.56,129.85-132.52-96.69-210.54-127.91-247.55-134.57-33.39-6.02-35.76,7.59-43.87,18.95-6.24,8.74-4.92,16.16,8.77,45.54,0,0,152.49,321.52,205.19,436.67,17.34,37.88,34.14,68.86,53.66,92.31,48.43,58.17,91.49,92.36,122.1,116.74,46.09,36.72,175.03,136.2,291.39,163.3,116.35,27.09,356.87,82.29,451.93,104.39,95.06,22.09,175.43,40.56,175.43,40.56,22.54,2.29,26.76-4.84,33.27-12.61,7.76-9.25,4.84-27.02-6.42-53.25h.01Z"/>
+    <path class="cls-1" d="M12122.38,955.98c4,11.35,6.29,32.09.49,37.64-5.32,5.1-15.04,3.15-32.74-.98,0,0-67.71-18.96-162.75-41.05-95.06-22.09-335.74-80.43-452.1-107.52-116.35-27.09-231.51-119.68-277.61-156.4-30.6-24.39-65.5-59.46-113.92-117.63-19.53-23.45-47.88-72.53-65.91-110.07-55.15-114.81-201.91-407.96-201.91-407.96-13.69-29.38-15.06-37.86-8.45-43.48,3.27-2.79,10.56-3.49,28.44-.44,37.07,6.32,110.37,33.41,242.56,129.85-132.52-96.69-210.54-127.91-247.55-134.57-33.39-6.02-35.76,7.59-43.87,18.95-6.24,8.74-4.92,16.16,8.77,45.54,0,0,152.49,321.52,205.19,436.67,17.34,37.88,34.14,68.86,53.66,92.31,48.43,58.17,91.49,92.36,122.1,116.74,46.09,36.72,175.03,136.2,291.39,163.3,116.35,27.09,356.87,82.29,451.93,104.39,95.06,22.09,175.43,40.56,175.43,40.56,22.54,2.29,26.76-4.84,33.27-12.61,15.25-15.91,4.84-27.02-6.42-53.25h.01Z"/>
+    <path class="cls-27" d="M12122.38,955.98c4,11.35,6.29,32.09.49,37.64-5.32,5.1-15.04,3.15-32.74-.98,0,0-67.71-18.96-162.75-41.05-95.06-22.09-335.74-80.43-452.1-107.52-116.35-27.09-231.51-119.68-277.61-156.4-30.6-24.39-65.5-59.46-113.92-117.63-19.53-23.45-47.88-72.53-65.91-110.07-55.15-114.81-201.91-407.96-201.91-407.96-13.69-29.38-15.06-37.86-8.45-43.48,3.27-2.79,10.56-3.49,28.44-.44,37.07,6.32,110.37,33.41,242.56,129.85-132.52-96.69-210.54-127.91-247.55-134.57-33.39-6.02-35.76,7.59-43.87,18.95-6.24,8.74-4.92,16.16,8.77,45.54,0,0,152.49,321.52,205.19,436.67,17.34,37.88,34.14,68.86,53.66,92.31,48.43,58.17,91.49,92.36,122.1,116.74,46.09,36.72,175.03,136.2,291.39,163.3,116.35,27.09,356.87,82.29,451.93,104.39,95.06,22.09,175.43,40.56,175.43,40.56,22.54,2.29,26.76-4.84,33.27-12.61,7.76-9.25,4.84-27.02-6.42-53.25h.01Z"/>
+    <path class="cls-23" d="M12122.38,955.98c4,11.35,6.29,32.09.49,37.64-5.32,5.1-15.04,3.15-32.74-.98,0,0-67.71-18.96-162.75-41.05-95.06-22.09-335.74-80.43-452.1-107.52-116.35-27.09-231.51-119.68-277.61-156.4-30.6-24.39-65.5-59.46-113.92-117.63-19.53-23.45-47.88-72.53-65.91-110.07-55.15-114.81-201.91-407.96-201.91-407.96-13.69-29.38-15.06-37.86-8.45-43.48,3.27-2.79,10.56-3.49,28.44-.44,37.07,6.32,110.37,33.41,242.56,129.85-132.52-96.69-210.54-127.91-247.55-134.57-33.39-6.02-35.76,7.59-43.87,18.95-6.24,8.74-4.92,16.16,8.77,45.54,0,0,152.49,321.52,205.19,436.67,17.34,37.88,34.14,68.86,53.66,92.31,48.43,58.17,91.49,92.36,122.1,116.74,46.09,36.72,175.03,136.2,291.39,163.3,116.35,27.09,356.87,82.29,451.93,104.39,95.06,22.09,175.43,40.56,175.43,40.56,22.54,2.29,26.76-4.84,33.27-12.61,7.76-9.25,4.84-27.02-6.42-53.25h.01Z"/>
+    <path class="cls-25" d="M12122.38,955.98c4,11.35,6.29,32.09.49,37.64-5.32,5.1-15.04,3.15-32.74-.98,0,0-67.71-18.96-162.75-41.05-95.06-22.09-335.74-80.43-452.1-107.52-116.35-27.09-231.51-119.68-277.61-156.4-30.6-24.39-65.5-59.46-113.92-117.63-19.53-23.45-47.88-72.53-65.91-110.07-55.15-114.81-201.91-407.96-201.91-407.96-13.69-29.38-15.06-37.86-8.45-43.48,3.27-2.79,10.56-3.49,28.44-.44,37.07,6.32,110.37,33.41,242.56,129.85-132.52-96.69-210.54-127.91-247.55-134.57-33.39-6.02-35.76,7.59-43.87,18.95-6.24,8.74-4.92,16.16,8.77,45.54,0,0,152.49,321.52,205.19,436.67,17.34,37.88,34.14,68.86,53.66,92.31,48.43,58.17,91.49,92.36,122.1,116.74,46.09,36.72,175.03,136.2,291.39,163.3,116.35,27.09,356.87,82.29,451.93,104.39,95.06,22.09,175.43,40.56,175.43,40.56,22.54,2.29,26.76-4.84,33.27-12.61,7.76-9.25,4.84-27.02-6.42-53.25h.01Z"/>
+    <path class="cls-23" d="M12122.38,955.98c4,11.35,6.29,32.09.49,37.64-5.32,5.1-15.04,3.15-32.74-.98,0,0-67.71-18.96-162.75-41.05-95.06-22.09-335.74-80.43-452.1-107.52-116.35-27.09-231.51-119.68-277.61-156.4-30.6-24.39-65.5-59.46-113.92-117.63-19.53-23.45-47.88-72.53-65.91-110.07-55.15-114.81-201.91-407.96-201.91-407.96-13.69-29.38-15.06-37.86-8.45-43.48,3.27-2.79,10.56-3.49,28.44-.44,37.07,6.32,110.37,33.41,242.56,129.85-132.52-96.69-210.54-127.91-247.55-134.57-33.39-6.02-35.76,7.59-43.87,18.95-6.24,8.74-4.92,16.16,8.77,45.54,0,0,152.49,321.52,205.19,436.67,17.34,37.88,34.14,68.86,53.66,92.31,48.43,58.17,91.49,92.36,122.1,116.74,46.09,36.72,175.03,136.2,291.39,163.3,116.35,27.09,356.87,82.29,451.93,104.39,95.06,22.09,175.43,40.56,175.43,40.56,22.54,2.29,26.76-4.84,33.27-12.61,7.76-9.25,4.84-27.02-6.42-53.25h.01Z"/>
+    <path class="cls-24" d="M12125.55,957.53c3.99,11.35,6.29,32.09.49,37.64-5.32,5.1-15.04,3.15-32.74-.98,0,0-67.71-18.96-162.76-41.05-95.06-22.09-335.73-80.43-452.09-107.52-116.35-27.1-231.52-119.68-277.61-156.4-30.61-24.38-65.5-59.46-113.92-117.63-19.53-23.45-47.88-72.53-65.91-110.07-55.15-114.81-201.92-407.96-201.92-407.96-13.68-29.38-15.06-37.86-8.45-43.48,3.27-2.79,10.57-3.49,28.45-.44,37.07,6.32,110.37,33.41,242.56,129.85-132.51-96.69-210.54-127.91-247.54-134.57-33.39-6.02-35.76,7.59-43.88,18.95-6.23,8.74-4.91,16.16,8.77,45.54,0,0,152.5,321.52,205.2,436.67,17.34,37.88,34.13,68.86,53.66,92.31,48.43,58.17,91.49,92.36,122.09,116.74,46.1,36.72,175.03,136.2,291.39,163.3,116.36,27.09,356.88,82.29,451.94,104.39,95.06,22.09,175.43,40.56,175.43,40.56,22.53,2.29,26.76-4.85,33.27-12.61,7.76-9.25,4.83-27.02-6.42-53.25h0Z"/>
+    <path class="cls-34" d="M10817.23,8.75c4.93,0,10.97.69,17.97,2.07,16.08,3.15,44.71,11.79,89.88,35.07,48.86,25.17,105.25,61.4,167.59,107.68,67.62,50.21,248.83,184.89,424.06,315.15,187.77,139.58,381.94,283.9,432.53,321.43,56.73,42.08,97.48,80.77,121.69,105.82,29.77,30.82,51.56,58.9,58.27,75.1l.02.04.02.04c4.5,10.5,6.39,17.9,5.75,22.61-.47,3.46-1.75,6.1-5.43,10.49l-.36.44c-.6.71-1.17,1.42-1.74,2.13-4.6,5.67-9.48,5.24-20.58,5.24-1.83,0-3.87-.1-6.03-.31-15.13-2.92-82.94-15-173.31-36-42.74-9.94-107.71-29.5-184.43-47.17-96.35-22.2-203.46-42.3-267.49-57.22-49.35-11.49-106.75-37.11-170.64-76.14-53.36-32.61-97.72-66.45-119.41-83.73-36.7-29.22-76.43-64.9-121.84-119.45-18.47-22.45-32.35-45.13-50.34-84.42-52.01-113.66-208.56-438.54-210.68-443.02-14.15-30.36-13.41-33.66-8.63-40.43.94-1.34,1.79-2.67,2.62-3.95,4.59-7.16,7.39-11.47,20.51-11.47ZM10817.23,1.15c-20.08,0-23.24,9.95-29.36,18.64-7.72,10.95-5.72,18.67,7.96,48.05,0,0,156.06,329.28,208.75,444.43,17.34,37.88,28.38,63.86,47.9,87.31,48.44,58.17,96.03,96.47,126.64,120.86,46.1,36.72,177.7,136.18,294.05,163.27,116.35,27.1,357.61,77.36,452.67,99.46,95.06,22.09,175.43,39.6,175.43,39.6,2.65.27,5.04.39,7.22.39,16.34,0,20.31-7.1,26.05-13.96,7.76-9.24,12.97-14.81,1.73-41.04-13.89-33.5-84.85-111.73-182.45-184.12-97.61-72.38-716.2-532.35-856.6-636.58-140.43-104.21-222.46-136.63-260.55-144.1-7.86-1.54-14.22-2.22-19.44-2.22Z"/>
+    <path class="cls-35" d="M10817.23,8.75c4.93,0,10.97.69,17.97,2.07,16.08,3.15,44.71,11.79,89.88,35.07,48.86,25.17,105.25,61.4,167.59,107.68,67.62,50.21,248.83,184.89,424.06,315.15,187.77,139.58,381.94,283.9,432.53,321.43,56.73,42.08,97.48,80.77,121.69,105.82,29.77,30.82,51.56,58.9,58.27,75.1l.02.04.02.04c4.5,10.5,6.39,17.9,5.75,22.61-.47,3.46-1.75,6.1-5.43,10.49l-.36.44c-.6.71-1.17,1.42-1.74,2.13-4.6,5.67-9.48,5.24-20.58,5.24-1.83,0-3.87-.1-6.03-.31-15.13-2.92-82.94-15-173.31-36-42.74-9.94-107.71-29.5-184.43-47.17-96.35-22.2-203.46-42.3-267.49-57.22-49.35-11.49-106.75-37.11-170.64-76.14-53.36-32.61-97.72-66.45-119.41-83.73-36.7-29.22-76.43-64.9-121.84-119.45-18.47-22.45-32.35-45.13-50.34-84.42-52.01-113.66-208.56-438.54-210.68-443.02-14.15-30.36-13.41-33.66-8.63-40.43.94-1.34,1.79-2.67,2.62-3.95,4.59-7.16,7.39-11.47,20.51-11.47ZM10817.23,1.15c-20.08,0-23.24,9.95-29.36,18.64-7.72,10.95-5.72,18.67,7.96,48.05,0,0,156.06,329.28,208.75,444.43,17.34,37.88,28.38,63.86,47.9,87.31,48.44,58.17,96.03,96.47,126.64,120.86,46.1,36.72,177.7,136.18,294.05,163.27,116.35,27.1,357.61,77.36,452.67,99.46,95.06,22.09,175.43,39.6,175.43,39.6,2.65.27,5.04.39,7.22.39,16.34,0,20.31-7.1,26.05-13.96,7.76-9.24,12.97-14.81,1.73-41.04-13.89-33.5-84.85-111.73-182.45-184.12-97.61-72.38-716.2-532.35-856.6-636.58-140.43-104.21-222.46-136.63-260.55-144.1-7.86-1.54-14.22-2.22-19.44-2.22Z"/>
+    <path class="cls-36" d="M10817.09,8.64c4.96,0,11.05.7,18.11,2.09,16.19,3.17,45.03,11.87,90.52,35.32,49.2,25.35,105.99,61.84,168.76,108.44,68.11,50.56,250.59,186.19,427.05,317.37,189.1,140.56,384.63,285.9,435.57,323.69,57.14,42.37,98.18,81.34,122.55,106.57,29.99,31.04,51.93,59.32,58.69,75.63l.02.04.02.04c4.53,10.58,2.28,15.09,1.63,19.83-1.63,3.45-2.28,5.76-5.98,10.19l-.37.44c-.61.72-1.17,1.43-1.75,2.14-4.64,5.71-7.43,9.17-18.61,9.17-1.85,0-3.89-.11-6.07-.31-6.53-1.43-80.97-15.69-171.98-36.84-43.04-10-116.03-26.82-193.29-44.62-97.01-22.35-203.49-41.23-267.97-56.26-49.69-11.57-107.5-37.37-171.84-76.68-53.74-32.84-98.41-66.92-120.25-84.32-36.95-29.43-80.19-65.44-125.93-120.37-18.35-22.04-31.27-43.88-49.37-83.44-52.38-114.46-201.96-447.36-204.1-451.87-14.25-30.57-13.5-33.9-8.69-40.72.95-1.35,1.81-2.69,2.64-3.97,4.64-7.21,7.44-11.56,20.66-11.56ZM10817.09.98c-20.22,0-23.4,10.02-29.56,18.77-7.77,11.03-5.76,18.8,8.03,48.39,0,0,151.54,337.86,204.6,453.82,17.46,38.14,30.8,61.54,50.46,85.16,48.77,58.58,96.22,96.9,127.05,121.46,46.41,36.97,177.95,135.18,295.11,162.47,117.17,27.28,365,76.6,460.73,98.85,95.72,22.25,172.5,36.95,172.5,36.95,2.66.26,5.07.39,7.27.39,16.46,0,20.45-7.16,26.23-14.06,7.81-9.31,11.26-17.13,4.03-38.33-13.99-33.74-85.45-112.52-183.74-185.41-98.29-72.89-719.36-536.15-860.75-641.12-141.42-104.95-224.02-137.59-262.38-145.11-7.91-1.55-14.32-2.23-19.58-2.23Z"/>
+  </g>
+</svg>
@@ -0,0 +1,307 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 12229 2741">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: url(#linear-gradient-15);
+        fill-opacity: .7;
+      }
+
+      .cls-2 {
+        fill: url(#linear-gradient-14);
+        fill-opacity: .2;
+      }
+
+      .cls-3 {
+        fill: url(#radial-gradient-7);
+      }
+
+      .cls-4 {
+        fill: url(#radial-gradient-6);
+      }
+
+      .cls-5 {
+        fill: url(#radial-gradient-5);
+      }
+
+      .cls-6 {
+        fill: url(#radial-gradient-4);
+      }
+
+      .cls-7 {
+        fill: url(#radial-gradient-9);
+      }
+
+      .cls-8 {
+        fill: url(#radial-gradient-8);
+      }
+
+      .cls-9 {
+        fill: url(#radial-gradient-3);
+      }
+
+      .cls-10 {
+        fill: url(#radial-gradient-2);
+      }
+
+      .cls-11 {
+        fill: url(#linear-gradient-8);
+      }
+
+      .cls-12 {
+        fill: url(#linear-gradient-7);
+      }
+
+      .cls-13 {
+        fill: url(#linear-gradient-5);
+      }
+
+      .cls-14 {
+        fill: url(#linear-gradient-6);
+      }
+
+      .cls-15 {
+        fill: url(#linear-gradient-9);
+      }
+
+      .cls-16 {
+        fill: url(#linear-gradient-4);
+      }
+
+      .cls-17 {
+        fill: url(#linear-gradient-3);
+      }
+
+      .cls-18 {
+        fill: url(#linear-gradient-2);
+      }
+
+      .cls-19 {
+        fill: #128414;
+      }
+
+      .cls-20 {
+        fill: url(#radial-gradient);
+      }
+
+      .cls-21 {
+        fill: url(#linear-gradient);
+      }
+
+      .cls-22 {
+        fill: #ab81e9;
+      }
+
+      .cls-23 {
+        fill: url(#radial-gradient-12);
+      }
+
+      .cls-24 {
+        fill: url(#radial-gradient-14);
+      }
+
+      .cls-25 {
+        fill: url(#radial-gradient-13);
+      }
+
+      .cls-26 {
+        fill: url(#radial-gradient-10);
+      }
+
+      .cls-27 {
+        fill: url(#radial-gradient-11);
+      }
+
+      .cls-28 {
+        fill: #0079ff;
+      }
+
+      .cls-29 {
+        fill: url(#linear-gradient-10);
+      }
+
+      .cls-30 {
+        fill: url(#linear-gradient-11);
+      }
+
+      .cls-31 {
+        fill: url(#linear-gradient-12);
+      }
+
+      .cls-32 {
+        fill: url(#linear-gradient-13);
+      }
+
+      .cls-33 {
+        fill: url(#linear-gradient-16);
+      }
+
+      .cls-34 {
+        fill: url(#linear-gradient-17);
+      }
+
+      .cls-35 {
+        fill: url(#linear-gradient-18);
+      }
+
+      .cls-36 {
+        fill: #00e1ff;
+      }
+
+      .cls-37 {
+        fill: #00ba97;
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="9885.06" y1="4166.65" x2="11163.05" y2="3231.54" gradientTransform="translate(0 5476.58) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#fda1ff"/>
+      <stop offset="1" stop-color="#97c5ff"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-2" x1="10977.63" y1="4548.03" x2="10717.14" y2="4115.05" gradientTransform="translate(0 5476.58) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset=".49" stop-color="#b78efa"/>
+      <stop offset="1" stop-color="#8f6ccd"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-3" x1="10133.99" y1="4126.16" x2="10918.38" y2="2750.53" gradientTransform="translate(0 5476.58) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset=".2" stop-color="#fda1ff"/>
+      <stop offset=".3" stop-color="#f3a4ff"/>
+      <stop offset=".48" stop-color="#d9adff"/>
+      <stop offset=".71" stop-color="#afbcff"/>
+      <stop offset=".83" stop-color="#97c5ff"/>
+    </linearGradient>
+    <radialGradient id="radial-gradient" cx="5000.91" cy="3779.28" fx="5000.91" fy="3779.28" r="1.01" gradientTransform="translate(-505614.61 -625435.78) rotate(53.1) scale(162.24 -9.73)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#fff"/>
+      <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="radial-gradient-2" cx="5000.91" cy="3385.64" fx="5000.91" fy="3385.64" r="1.01" gradientTransform="translate(-599193.58 -555175.07) rotate(53.1) scale(162.24 -45.43)" xlink:href="#radial-gradient"/>
+    <linearGradient id="linear-gradient-4" x1="10172.56" y1="4229.46" x2="10644.45" y2="2517.64" gradientTransform="translate(0 5476.58) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#eebeff"/>
+      <stop offset="1" stop-color="#79edff"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-5" x1="11741.37" y1="4237.41" x2="11468.06" y2="3030.99" gradientTransform="translate(0 5476.58) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#00b99a"/>
+      <stop offset="1" stop-color="#009cbd"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-6" x1="11720.67" y1="4349.51" x2="11250.05" y2="2898.07" gradientTransform="translate(0 5476.58) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#00cc9e"/>
+      <stop offset=".22" stop-color="#00884a"/>
+      <stop offset=".31" stop-color="#008d64"/>
+      <stop offset=".55" stop-color="#009a9d"/>
+      <stop offset=".75" stop-color="#00a3c7"/>
+      <stop offset=".91" stop-color="#00a8e1"/>
+      <stop offset="1" stop-color="#00abeb"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-7" x1="11398.05" y1="4298.52" x2="11786.26" y2="3403.21" gradientTransform="translate(0 5476.58) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#3ce6ac"/>
+      <stop offset="1" stop-color="#00e3ff"/>
+    </linearGradient>
+    <radialGradient id="radial-gradient-3" cx="5011.94" cy="3286.5" fx="5011.94" fy="3286.5" r="1.01" gradientTransform="translate(-1322545.38 875817.22) scale(266.17 -266.17)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#fff"/>
+      <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="radial-gradient-4" cx="5062.2" cy="3311.1" fx="5062.2" fy="3311.1" r="1.01" gradientTransform="translate(-325760.14 221632.44) scale(66.61 -66.61)" xlink:href="#radial-gradient"/>
+    <linearGradient id="linear-gradient-8" x1="11184.82" y1="3629.72" x2="12228.38" y2="3629.72" gradientTransform="translate(0 5476.58) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#00e4ff"/>
+      <stop offset="1" stop-color="#00e3f7"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-9" x1="9906.89" y1="5227.07" x2="10187.45" y2="4412.31" gradientTransform="translate(0 5476.58) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#00cdc2"/>
+      <stop offset="1" stop-color="#288822"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-10" x1="9908.06" y1="5223.68" x2="10187.52" y2="4412.12" xlink:href="#linear-gradient-9"/>
+    <linearGradient id="linear-gradient-11" x1="9904.1" y1="5226.65" x2="10177.35" y2="4433.13" gradientTransform="translate(0 5476.58) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#00cdc3"/>
+      <stop offset="1" stop-color="#4fdb5e"/>
+    </linearGradient>
+    <radialGradient id="radial-gradient-5" cx="5001.58" cy="3281.44" fx="5001.58" fy="3281.44" r="1.01" gradientTransform="translate(-3463696.84 2280291.84) scale(694.67 -694.67)" xlink:href="#radial-gradient"/>
+    <radialGradient id="radial-gradient-6" cx="4985.87" cy="3427.74" fx="4985.87" fy="3427.74" r="1.01" gradientTransform="translate(75643.69 -1436104.03) rotate(96.41) scale(287.83 -28.01)" xlink:href="#radial-gradient"/>
+    <linearGradient id="linear-gradient-12" x1="9969.18" y1="4976.15" x2="10223.05" y2="4342.04" xlink:href="#linear-gradient-11"/>
+    <radialGradient id="radial-gradient-7" cx="5005.12" cy="3283.18" fx="5005.12" fy="3283.18" r="1.01" gradientTransform="translate(-2232295.66 1472395.23) scale(448.31 -448.31)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#88d2ff"/>
+      <stop offset="1" stop-color="#0079ff"/>
+    </radialGradient>
+    <radialGradient id="radial-gradient-8" cx="5002.19" cy="3281.74" fx="5002.19" fy="3281.74" r="1.01" gradientTransform="translate(-3166398.37 2085321.22) scale(635.28 -635.28)" xlink:href="#radial-gradient-7"/>
+    <linearGradient id="linear-gradient-13" x1="11171.43" y1="4843.03" x2="11730.7" y2="5086.9" gradientTransform="translate(0 5476.58) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset=".04" stop-color="#62c7ff"/>
+      <stop offset=".79" stop-color="#d9b5ff"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-14" x1="11363.16" y1="4968.93" x2="11828.27" y2="4790.22" gradientTransform="translate(0 5476.58) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#c07dff" stop-opacity="0"/>
+      <stop offset="1" stop-color="#a855f5"/>
+    </linearGradient>
+    <radialGradient id="radial-gradient-9" cx="4995.8" cy="3426.98" fx="4995.8" fy="3426.98" r="1.01" gradientTransform="translate(-719552.54 -1121706.87) rotate(61.84) scale(267.03 -33.41)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#0079ff"/>
+      <stop offset="1" stop-color="#0079ff"/>
+    </radialGradient>
+    <radialGradient id="radial-gradient-10" cx="4995.01" cy="3559.73" fx="4995.01" fy="3559.73" r="1.01" gradientTransform="translate(-684297.79 -1299492) rotate(64.3) scale(294.83 -17.66)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#0079ff"/>
+      <stop offset="1" stop-color="#0079ff" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="linear-gradient-15" x1="11548.74" y1="4929.56" x2="12192.44" y2="4756.92" gradientTransform="translate(0 5476.58) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#0079ff"/>
+      <stop offset="1" stop-color="#0079ff" stop-opacity=".5"/>
+    </linearGradient>
+    <radialGradient id="radial-gradient-11" cx="5005.63" cy="3713.52" fx="5005.63" fy="3713.52" r="1.01" gradientTransform="translate(-1772066.81 -404692.94) rotate(13.66) scale(365.42 -7.31)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#cda2fd"/>
+      <stop offset="1" stop-color="#0079ff" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="radial-gradient-12" cx="5022.1" cy="3444.33" fx="5022.1" fy="3444.33" r="1.01" gradientTransform="translate(-614899.34 -150408.56) rotate(20.22) scale(127.43 -21.66)" gradientUnits="userSpaceOnUse">
+      <stop offset=".11" stop-color="#fff"/>
+      <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="radial-gradient-13" cx="5009.1" cy="3361.08" fx="5009.1" fy="3361.08" r="1.01" gradientTransform="translate(-844346.1 -352652.71) rotate(33.25) scale(181.48 -51.69)" xlink:href="#radial-gradient"/>
+    <radialGradient id="radial-gradient-14" cx="5005.09" cy="3477.13" fx="5005.09" fy="3477.13" r="1.01" gradientTransform="translate(-1868546.64 -406432.07) rotate(13.89) scale(384.23 -16.07)" xlink:href="#radial-gradient-10"/>
+    <linearGradient id="linear-gradient-16" x1="10783.39" y1="4964.43" x2="12142.76" y2="4964.43" gradientTransform="translate(0 5476.58) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#88d2ff"/>
+      <stop offset="1" stop-color="#f6b6ff"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-17" x1="11210.8" y1="4740.81" x2="11481.49" y2="4981.36" gradientTransform="translate(0 5476.58) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#0079ff"/>
+      <stop offset="1" stop-color="#0079ff" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-18" x1="10783.01" y1="4962.47" x2="12151.93" y2="4962.47" xlink:href="#linear-gradient-16"/>
+  </defs>
+  <path d="M7718.15,2280.85V847.79h388.71v209.91c85.52-150.3,243.59-241,440.54-241,303.2,0,487.19,209.91,487.19,549.38v914.77h-388.71v-829.25c0-207.31-80.33-305.79-235.82-305.79-181.4,0-303.2,139.94-303.2,355.02v780.02h-388.71ZM6999.09,2317.13c-471.64,0-785.21-310.97-785.21-748.92s303.21-756.69,725.61-756.69c378.35,0,647.84,259.14,678.94,645.26l-976.97,352.43c75.15,121.8,217.69,191.77,412.05,191.77,152.89,0,300.6-38.87,409.44-114.02v313.56c-106.25,69.97-282.47,116.61-463.86,116.61ZM6581.86,1534.52l647.85-235.82c-41.46-116.61-147.7-186.58-290.23-186.58-228.04,0-380.95,176.22-357.63,422.4ZM5450.47,2322.31c-572.7,0-984.74-401.67-984.74-945.87s427.58-951.05,1010.65-951.05c230.64,0,448.32,59.6,567.52,152.89v362.8c-124.39-114.02-316.15-181.4-513.1-181.4-401.67,0-660.81,248.78-660.81,616.76s248.78,614.17,603.8,614.17c90.7,0,191.77-18.14,274.69-51.83v-412.04h-388.71v-310.97h741.15v896.63c-168.44,132.16-399.08,209.91-650.45,209.91ZM3260.92,2682.52l272.1-585.66-562.34-1249.06h422.4l347.26,800.75,344.65-800.75h393.9l-816.3,1834.72h-401.67ZM2420.07,2317.13c-471.64,0-785.2-310.97-785.2-748.92s303.2-756.69,725.6-756.69c378.35,0,647.85,259.14,678.95,645.26l-976.97,352.43c75.15,121.8,217.68,191.77,412.04,191.77,152.89,0,300.6-38.87,409.44-114.02v313.56c-106.25,69.97-282.46,116.61-463.86,116.61ZM2002.85,1534.52l647.85-235.82c-41.46-116.61-147.71-186.58-290.24-186.58-228.04,0-380.94,176.22-357.62,422.4ZM.61,2280.85V466.85h393.9v681.54h730.78V466.85h393.9v1813.99h-393.9v-785.2H394.51v785.2H.61Z"/>
+  <g>
+    <path class="cls-21" d="M10627.99,2657.98s-868.31-665.14-1000.64-765.35c-73.68-55.78-153.79-186.47-137.09-289.26,12.42-76.42,56.55-115.67,116.35-136.53,186.28-65,777.35-269.13,936.21-320.18,87.58-28.15,226.55-2.4,330.37,82.46,82.23,67.22,147.24,165.71,148.08,292.72,1.88,287.37,17.09,959.9,17.09,1046.42,0,49.35-20.75,133.02-118,162.34-94.64,28.53-212.39-11.45-292.37-72.63h0Z"/>
+    <path class="cls-18" d="M10866.73,1234.81c82.23,67.21,144.52,160.73,145.36,287.74,1.88,287.37,26.25,959.2,26.25,1045.73,0-86.53-5.79-770.51-7.68-1057.88-1.88-287.37-315.72-436.72-472.64-380-156.93,56.71-765.15,271.46-951.43,336.45,186.28-65,780.27-261.59,939.12-312.64,87.58-28.15,217.18-4.27,321.01,80.6h.01Z"/>
+    <path class="cls-22" d="M10866.73,1234.81c82.23,67.21,144.52,160.73,145.36,287.74,1.88,287.37,26.25,959.2,26.25,1045.73,0-86.53-5.79-770.51-7.68-1057.88-1.88-287.37-315.72-436.72-472.64-380-156.93,56.71-765.15,271.46-951.43,336.45,186.28-65,780.27-261.59,939.12-312.64,87.58-28.15,217.18-4.27,321.01,80.6h.01Z"/>
+    <path class="cls-17" d="M10627.99,2657.98s-868.31-665.14-1000.64-765.35c-73.68-55.78-153.79-186.47-137.09-289.26,12.42-76.42,56.55-115.67,116.35-136.53,186.28-65,777.35-269.13,936.21-320.18,87.58-28.15,226.55-2.4,330.37,82.46,82.23,67.22,155.56,166.7,156.97,293.7,1.4,125.09,1.83,322.36,3.37,512.59,2.01,247.64,3.99,483.38,3.85,532.86-.13,49.35-19.75,133.02-117.01,162.34-94.64,28.53-212.39-11.45-292.37-72.63h0Z"/>
+    <path class="cls-20" d="M10872.6,1228.61c82.29,67.13,147.4,165.57,148.36,292.57,2.18,287.37,18.03,959.89,18.11,1046.42-.08-86.53-6.54-770.5-8.7-1057.88-2.18-287.37-316.15-436.41-473.02-379.54-156.86,56.88-764.88,272.2-951.1,337.38,186.21-65.19,777.09-269.89,935.9-321.1,87.55-28.24,226.53-2.62,330.45,82.15Z"/>
+    <path class="cls-10" d="M10872.6,1228.61c82.29,67.13,147.4,165.57,148.36,292.57,2.18,287.37,18.03,959.89,18.11,1046.42-.08-86.53-6.54-770.5-8.7-1057.88-2.18-287.37-316.15-436.41-473.02-379.54-156.86,56.88-764.88,272.2-951.1,337.38,186.21-65.19,777.09-269.89,935.9-321.1,87.55-28.24,226.53-2.62,330.45,82.15Z"/>
+    <path class="cls-16" d="M10632.39,1125.43c40.53,0,85.15,9.01,129.03,26.05,45.69,17.74,89.54,43.92,126.82,75.67,41.02,34.95,73.49,75.66,96.53,121.01,25.49,50.2,38.62,104.8,38.99,162.3.78,119.44,2.25,309.08,3.68,492.48,2.05,264.75,3.99,514.81,3.99,565.35,0,17.52-2.8,51.91-21.64,85.28-19.33,34.27-50.1,57.97-91.44,70.43-20.03,6.04-41.89,9.1-64.96,9.1-36.69,0-77.02-7.88-116.65-22.8-37.36-14.06-73.51-34.05-104.55-57.8-8.68-6.65-869.83-666.29-1000.67-765.36-37.04-28.04-74.6-74.65-100.47-124.67-13.98-27.04-24.09-53.92-30.04-79.9-6.44-28.16-7.77-54.43-3.92-78.07,5.74-35.34,18.4-63.32,38.68-85.55,18.08-19.8,41.99-34.7,73.12-45.56,191.65-66.88,794.69-279.81,951.5-336.48,21.06-7.62,45.29-11.49,72.01-11.49M10632.38,1118.52c-27.02,0-52.25,3.9-74.35,11.88-156.92,56.71-765.14,271.46-951.42,336.46-59.8,20.87-103.94,60.09-116.35,136.52-16.7,102.79,63.41,233.48,137.09,289.27,132.34,100.2,1000.64,765.34,1000.64,765.34,61.92,47.37,146.46,82.03,225.41,82.03,23.03,0,45.58-2.96,66.96-9.4,97.26-29.31,118-112.98,118-162.33,0-86.53-5.79-770.51-7.68-1057.88-1.62-246.89-233.49-391.9-398.29-391.9h-.01Z"/>
+    <path class="cls-13" d="M11184.83,1489.7c0-78.68,30.02-207.84,100.55-307.99,39.67-56.34,89.69-107.79,141.49-131.36,40.29-18.33,59.58-21.36,107.38-11.5,0,0,579.09,124.18,614.4,131.34,35.31,7.18,73.84,31.14,78.97,104.77,5.13,73.62-14.26,189.97-96.68,309.97-82.42,119.99-584.21,844.79-647.23,935.69-63.01,90.9-157.64,148.93-211.37,134.78-68.18-17.96-82.76-80.79-82.23-124.15.97-80-5.28-1041.54-5.28-1041.54h.01Z"/>
+    <path class="cls-14" d="M11272.32,2642.04c-63.19-17.15-59.72-65.53-60.33-110.8-1.12-83.66-5.25-1041.54-5.25-1041.54,0-78.68,27.14-192.58,97.67-292.73,39.67-56.34,75.27-98.94,124.06-126.98,38.38-22.06,75.61-27.24,123.4-17.38,0,0,561.45,110.41,596.77,117.58-35.31-7.17-614.4-131.34-614.4-131.34-47.79-9.87-67.09-6.83-107.38,11.5-51.81,23.57-101.82,75.02-141.49,131.36-70.53,100.15-100.55,229.32-100.55,307.99,0,0,6.25,961.55,5.28,1041.54-.54,43.36,14.04,106.18,82.23,124.15,53.73,14.15,148.35-43.87,211.37-134.78-63.02,90.91-157.75,135.99-211.37,121.42h-.01Z"/>
+    <path class="cls-37" d="M11272.32,2642.04c-63.19-17.15-59.72-65.53-60.33-110.8-1.12-83.66-5.25-1041.54-5.25-1041.54,0-78.68,27.14-192.58,97.67-292.73,39.67-56.34,75.27-98.94,124.06-126.98,38.38-22.06,75.61-27.24,123.4-17.38,0,0,561.45,110.41,596.77,117.58-35.31-7.17-614.4-131.34-614.4-131.34-47.79-9.87-67.09-6.83-107.38,11.5-51.81,23.57-101.82,75.02-141.49,131.36-70.53,100.15-100.55,229.32-100.55,307.99,0,0,6.25,961.55,5.28,1041.54-.54,43.36,14.04,106.18,82.23,124.15,53.73,14.15,148.35-43.87,211.37-134.78-63.02,90.91-157.75,135.99-211.37,121.42h-.01Z"/>
+    <path class="cls-12" d="M11206.75,1489.73c0-78.68,27.14-192.58,97.68-292.73,39.67-56.34,75.27-98.94,124.05-126.98,38.38-22.06,75.61-27.24,123.41-17.38,0,0,561.45,110.41,596.77,117.58,35.31,7.18,73.83,31.14,78.97,104.77,5.13,73.62-14.26,189.97-96.68,309.97-82.42,119.99-584.21,844.79-647.23,935.69-63.02,90.89-157.75,149.34-211.37,134.78-63.19-17.15-59.72-78.89-60.33-124.15-1.12-83.65-5.26-1041.54-5.26-1041.54h0Z"/>
+    <path class="cls-9" d="M11272.32,2642.04c-63.19-17.15-59.72-65.53-60.33-110.8-1.12-83.66-5.25-1041.54-5.25-1041.54,0-78.68,27.14-192.58,97.67-292.73,39.67-56.34,75.27-98.94,124.06-126.98,38.38-22.06,75.61-27.24,123.4-17.38,0,0,561.45,110.41,596.77,117.58-35.31-7.17-614.4-131.34-614.4-131.34-47.79-9.87-67.09-6.83-107.38,11.5-51.81,23.57-101.82,75.02-141.49,131.36-70.53,100.15-100.55,229.32-100.55,307.99,0,0,6.25,961.55,5.28,1041.54-.54,43.36,14.04,106.18,82.23,124.15,53.73,14.15,148.35-43.87,211.37-134.78-63.02,90.91-157.75,135.99-211.37,121.42h-.01Z"/>
+    <path class="cls-6" d="M11272.32,2642.04c-63.19-17.15-59.72-65.53-60.33-110.8-1.12-83.66-5.25-1041.54-5.25-1041.54,0-78.68,27.14-192.58,97.67-292.73,39.67-56.34,75.27-98.94,124.06-126.98,38.38-22.06,75.61-27.24,123.4-17.38,0,0,561.45,110.41,596.77,117.58-35.31-7.17-614.4-131.34-614.4-131.34-47.79-9.87-67.09-6.83-107.38,11.5-51.81,23.57-101.82,75.02-141.49,131.36-70.53,100.15-100.55,229.32-100.55,307.99,0,0,6.25,961.55,5.28,1041.54-.54,43.36,14.04,106.18,82.23,124.15,53.73,14.15,148.35-43.87,211.37-134.78-63.02,90.91-157.75,135.99-211.37,121.42h-.01Z"/>
+    <path class="cls-11" d="M11490.41,1033.32v7.74c11.21,0,24.24,1.65,42.21,5.36,5.99,1.29,579.52,124.27,614.47,131.36,19.33,3.92,35.02,12.37,46.63,25.09,15.16,16.61,23.97,41.05,26.17,72.62,2,28.85.99,75.96-15.26,136.49-16.05,59.79-42.99,117.47-80.07,171.45-81.94,119.29-580.28,839.14-647.21,935.66-26.45,38.16-60.43,72.66-95.65,97.17-33.76,23.48-66.42,36.41-91.95,36.41-5.57,0-10.75-.63-15.45-1.86-28.29-7.46-49.14-23.81-61.99-48.64-12.37-23.87-14.69-50.13-14.48-67.95.96-79.05-5.2-1029.97-5.28-1041.65,0-42.19,8.14-94.81,22.31-144.37,17.21-60.22,42.94-115.66,74.38-160.3,43.77-62.16,95.1-109.74,140.81-130.53,23.29-10.6,39.81-16.33,60.35-16.33v-7.74M11490.41,1033.32c-21.1,0-38.15,5.49-63.55,17.03-51.81,23.57-104.27,76.78-143.94,133.11-70.53,100.15-98.1,230.47-98.1,309.15,0,0,6.25,961.55,5.28,1041.54-.54,43.36,14.04,106.18,82.23,124.15,5.41,1.43,11.24,2.12,17.43,2.12,55.05,0,137.27-55.17,193.95-136.9,63.03-90.91,564.82-815.7,647.23-935.69,82.42-120,101.81-239.25,96.68-312.87-5.13-73.62-43.66-97.58-78.97-104.76-35.31-7.18-614.4-131.34-614.4-131.34-17.67-3.65-31.44-5.55-43.83-5.55h-.01Z"/>
+    <path class="cls-15" d="M9437.47,1273.5c0-52.74,35.09-131.94,81.18-187.1,0,0,693.73-832.95,740.62-889.37s140.83-129.06,212.54-159.28c71.7-30.22,118.82-23.05,140.33,23.56,21.52,46.61,202.95,444.75,224.58,492.12,20.45,44.84,16.78,84.22-25.54,168.45-53.66,106.78-196.32,231.91-292.73,267.09-105.9,38.64-874.43,318.06-954.78,347.18-80.35,29.12-126.19-17.2-126.19-62.66Z"/>
+    <path class="cls-29" d="M10836.71,553.42c-21.62-47.38-203.06-445.51-224.58-492.12-14.95-32.38-42.25-45.72-81.56-40.72,34.78-3.73,56.32,10.31,70.92,41.97,21.52,46.61,196.48,425.61,217.44,473.27,16.91,38.48,17.16,78.63-21.98,155.65-51.59,101.53-197.53,238.66-293.93,273.84-105.91,38.64-879.37,322.93-959.72,352.05-80.35,29.13-100.68-8.58-100.68-54.03,0-31.16,10.45-68.02,28.51-104.34-20.61,40.38-33.66,82.34-33.66,114.49,0,45.45,45.84,91.77,126.19,62.63,80.35-29.12,848.87-308.54,954.78-347.18,96.41-35.18,239.06-160.31,292.73-267.09,42.32-84.23,46-123.6,25.54-168.45h-.01Z"/>
+    <path class="cls-19" d="M10836.71,553.42c-21.62-47.38-203.06-445.51-224.58-492.12-14.95-32.38-42.25-45.72-81.56-40.72,34.78-3.73,56.32,10.31,70.92,41.97,21.52,46.61,196.48,425.61,217.44,473.27,16.91,38.48,17.16,78.63-21.98,155.65-51.59,101.53-197.53,238.66-293.93,273.84-105.91,38.64-879.37,322.93-959.72,352.05-80.35,29.13-100.68-8.58-100.68-54.03,0-31.16,10.45-68.02,28.51-104.34-20.61,40.38-33.66,82.34-33.66,114.49,0,45.45,45.84,91.77,126.19,62.63,80.35-29.12,848.87-308.54,954.78-347.18,96.41-35.18,239.06-160.31,292.73-267.09,42.32-84.23,46-123.6,25.54-168.45h-.01Z"/>
+    <path class="cls-30" d="M9442.61,1263.34c0-52.74,29.94-121.79,76.04-176.95,0,0,693.73-832.95,740.62-889.37,46.89-56.42,140.83-129.06,212.54-159.28,71.7-30.22,108.19-21.79,129.7,24.81,21.52,46.6,196.48,425.61,217.43,473.27,16.91,38.48,17.16,78.63-21.97,155.65-51.59,101.53-197.54,238.66-293.94,273.84-105.91,38.64-879.37,322.93-959.72,352.05-80.35,29.13-100.68-8.57-100.68-54.02h0Z"/>
+    <path class="cls-5" d="M10836.71,553.42c-21.62-47.38-203.06-445.51-224.58-492.12-14.95-32.38-42.25-45.72-81.56-40.72,34.78-3.73,56.32,10.31,70.92,41.97,21.52,46.61,196.48,425.61,217.44,473.27,16.91,38.48,17.16,78.63-21.98,155.65-51.59,101.53-197.53,238.66-293.93,273.84-105.91,38.64-879.37,322.93-959.72,352.05-80.35,29.13-100.68-8.58-100.68-54.03,0-31.16,10.45-68.02,28.51-104.34-20.61,40.38-33.66,82.34-33.66,114.49,0,45.45,45.84,91.77,126.19,62.63,80.35-29.12,848.87-308.54,954.78-347.18,96.41-35.18,239.06-160.31,292.73-267.09,42.32-84.23,46-123.6,25.54-168.45h-.01Z"/>
+    <path class="cls-19" d="M10836.71,553.42c-21.62-47.38-203.06-445.51-224.58-492.12-14.95-32.38-42.25-45.72-81.56-40.72,34.78-3.73,56.32,10.31,70.92,41.97,21.52,46.61,196.48,425.61,217.44,473.27,16.91,38.48,17.16,78.63-21.98,155.65-51.59,101.53-197.53,238.66-293.93,273.84-105.91,38.64-879.37,322.93-959.72,352.05-80.35,29.13-100.68-8.58-100.68-54.03,0-31.16,10.45-68.02,28.51-104.34-20.61,40.38-33.66,82.34-33.66,114.49,0,45.45,45.84,91.77,126.19,62.63,80.35-29.12,848.87-308.54,954.78-347.18,96.41-35.18,239.06-160.31,292.73-267.09,42.32-84.23,46-123.6,25.54-168.45h-.01Z"/>
+    <path class="cls-4" d="M10836.71,553.42c-21.62-47.38-203.06-445.51-224.58-492.12-14.95-32.38-42.25-45.72-81.56-40.72,34.78-3.73,56.32,10.31,70.92,41.97,21.52,46.61,196.48,425.61,217.44,473.27,16.91,38.48,17.16,78.63-21.98,155.65-51.59,101.53-197.53,238.66-293.93,273.84-105.91,38.64-879.37,322.93-959.72,352.05-80.35,29.13-100.68-8.58-100.68-54.03,0-31.16,10.45-68.02,28.51-104.34-20.61,40.38-33.66,82.34-33.66,114.49,0,45.45,45.84,91.77,126.19,62.63,80.35-29.12,848.87-308.54,954.78-347.18,96.41-35.18,239.06-160.31,292.73-267.09,42.32-84.23,46-123.6,25.54-168.45h-.01Z"/>
+    <path class="cls-31" d="M10545.94,29.24c27.42,0,43.82,13.58,55.03,37.89,17.39,37.66,140.95,301.72,199.18,429.45,13.62,29.86,23.61,51.79,27.75,60.86,10.18,22.32,13.18,41.49,10,64.1-3.45,24.58-14.36,54.19-35.38,96-12.65,25.18-30.69,52.11-53.65,80.03-21.8,26.53-46.87,52.61-74.52,77.52-55.36,49.87-113.4,88.08-159.22,104.79-101.76,37.13-871.06,316.83-954.77,347.18-15.57,5.65-30.36,8.51-43.99,8.51-21.02,0-38.88-6.8-51.64-19.66-11.19-11.27-17.61-26.73-17.61-42.39,0-24.03,7.99-55.55,22.5-88.79,14.5-33.21,34.54-65.92,56.45-92.14,6.93-8.33,694.27-833.61,740.62-889.39,22.44-27.01,57.2-59.06,95.36-87.93,39.97-30.25,80.28-54.62,113.49-68.61,27.45-11.56,51.13-17.42,70.39-17.42M10545.94,19.57c-20.75,0-45.48,6.1-74.14,18.19-71.71,30.22-165.66,102.86-212.54,159.28-46.89,56.42-740.62,889.37-740.62,889.37-46.08,55.16-81.17,134.35-81.17,187.11,0,35.59,28.12,71.72,78.92,71.72,14.06,0,29.86-2.76,47.27-9.08,80.35-29.13,848.87-308.54,954.78-347.18,96.41-35.18,239.06-160.31,292.73-267.09,42.32-84.23,46-123.6,25.54-168.45-21.62-47.38-203.06-445.51-224.58-492.12-12.9-27.98-35.05-41.74-66.2-41.74h0Z"/>
+    <path class="cls-3" d="M10795.84,67.84c-13.68-29.38-15.69-37.1-7.96-48.05,7.72-10.95,10.71-23.9,48.8-16.43,38.09,7.47,120.12,39.88,260.54,144.12,140.41,104.23,759,564.19,856.6,636.58,97.6,72.38,168.57,150.62,182.45,184.12,11.24,26.23,6.03,31.8-1.73,41.04-6.51,7.76-10.73,15.85-33.26,13.55,0,0-80.39-17.51-175.44-39.6-95.05-22.09-335.58-77.29-451.93-104.39-116.35-27.1-246.96-124.62-293.06-161.33-30.6-24.39-77.73-62.44-126.16-120.61-19.53-23.45-32.77-46.69-50.11-84.56-52.7-115.15-208.75-444.43-208.75-444.43h.01Z"/>
+    <path class="cls-8" d="M12128.13,955.97c4,11.35,6.29,32.09.49,37.64-5.32,5.1-15.04,3.15-32.74-.98,0,0-67.69-18.96-162.75-41.05-95.06-22.09-335.74-80.43-452.1-107.52-116.35-27.09-231.51-119.68-277.61-156.4-30.6-24.39-67.4-53.75-115.83-111.93-19.52-23.45-48.83-78.23-66.87-115.77-55.15-114.81-202.86-407.96-202.86-407.96-13.69-29.38-11.25-37.86-4.65-43.48,3.27-2.79,10.56-3.49,28.44-.44,37.07,6.32,110.37,33.41,242.57,129.85-132.53-96.69-210.67-127.33-247.56-134.57-38.09-7.47-41.08,5.48-48.8,16.43-7.72,10.95-5.72,18.67,7.96,48.05,0,0,156.06,329.28,208.75,444.43,17.34,37.88,30.57,61.11,50.11,84.56,48.43,58.17,95.56,96.23,126.16,120.61,46.09,36.72,176.71,134.24,293.06,161.33,116.35,27.1,356.87,82.29,451.93,104.39,95.06,22.09,175.43,39.6,175.43,39.6,22.54,2.3,26.76-5.79,33.27-13.55,7.76-9.25,4.84-27.02-6.42-53.25h.01Z"/>
+    <path class="cls-28" d="M12128.13,955.97c4,11.35,6.29,32.09.49,37.64-5.32,5.1-15.04,3.15-32.74-.98,0,0-67.69-18.96-162.75-41.05-95.06-22.09-335.74-80.43-452.1-107.52-116.35-27.09-231.51-119.68-277.61-156.4-30.6-24.39-67.4-53.75-115.83-111.93-19.52-23.45-48.83-78.23-66.87-115.77-55.15-114.81-202.86-407.96-202.86-407.96-13.69-29.38-11.25-37.86-4.65-43.48,3.27-2.79,10.56-3.49,28.44-.44,37.07,6.32,110.37,33.41,242.57,129.85-132.53-96.69-210.67-127.33-247.56-134.57-38.09-7.47-41.08,5.48-48.8,16.43-7.72,10.95-5.72,18.67,7.96,48.05,0,0,156.06,329.28,208.75,444.43,17.34,37.88,30.57,61.11,50.11,84.56,48.43,58.17,95.56,96.23,126.16,120.61,46.09,36.72,176.71,134.24,293.06,161.33,116.35,27.1,356.87,82.29,451.93,104.39,95.06,22.09,175.43,39.6,175.43,39.6,22.54,2.3,26.76-5.79,33.27-13.55,7.76-9.25,4.84-27.02-6.42-53.25h.01Z"/>
+    <g>
+      <path class="cls-32" d="M10807,54.96c-13.69-29.38-13.06-42.37-6.45-48,3.27-2.79,23.71-4.99,41.4-1.02,38.47,8.64,114.85,37.31,255.27,141.55,140.41,104.23,754.99,566.07,852.59,638.45,97.61,72.38,165.94,146.71,179.83,180.21,3.99,11.35,10.92,29.2,5.11,34.75-5.32,5.1-11.85,5.85-29.57,1.72,0,0-81.01-21.21-176.07-43.3-95.06-22.09-332.09-78.89-448.43-105.98-116.35-27.1-233.41-120.57-279.49-157.28-30.61-24.39-72.26-56-120.69-114.17-19.52-23.45-42.89-46.52-60.23-84.39-52.7-115.15-213.29-442.53-213.29-442.53h.02Z"/>
+      <path class="cls-2" d="M10807,54.96c-13.69-29.38-13.06-42.37-6.45-48,3.27-2.79,23.71-4.99,41.4-1.02,38.47,8.64,114.85,37.31,255.27,141.55,140.41,104.23,754.99,566.07,852.59,638.45,97.61,72.38,165.94,146.71,179.83,180.21,3.99,11.35,10.92,29.2,5.11,34.75-5.32,5.1-11.85,5.85-29.57,1.72,0,0-81.01-21.21-176.07-43.3-95.06-22.09-332.09-78.89-448.43-105.98-116.35-27.1-233.41-120.57-279.49-157.28-30.61-24.39-72.26-56-120.69-114.17-19.52-23.45-42.89-46.52-60.23-84.39-52.7-115.15-213.29-442.53-213.29-442.53h.02Z"/>
+    </g>
+    <path class="cls-7" d="M12122.38,955.98c4,11.35,6.29,32.09.49,37.64-5.32,5.1-15.04,3.15-32.74-.98,0,0-67.71-18.96-162.75-41.05-95.06-22.09-335.74-80.43-452.1-107.52-116.35-27.09-231.51-119.68-277.61-156.4-30.6-24.39-65.5-59.46-113.92-117.63-19.53-23.45-47.88-72.53-65.91-110.07-55.15-114.81-201.91-407.96-201.91-407.96-13.69-29.38-15.06-37.86-8.45-43.48,3.27-2.79,10.56-3.49,28.44-.44,37.07,6.32,110.37,33.41,242.56,129.85-132.52-96.69-210.54-127.91-247.55-134.57-33.39-6.02-35.76,7.59-43.87,18.95-6.24,8.74-4.92,16.16,8.77,45.54,0,0,152.49,321.52,205.19,436.67,17.34,37.88,34.14,68.86,53.66,92.31,48.43,58.17,91.49,92.36,122.1,116.74,46.09,36.72,175.03,136.2,291.39,163.3,116.35,27.09,356.87,82.29,451.93,104.39,95.06,22.09,175.43,40.56,175.43,40.56,22.54,2.29,26.76-4.84,33.27-12.61,7.76-9.25,4.84-27.02-6.42-53.25h.01Z"/>
+    <path class="cls-36" d="M12122.38,955.98c4,11.35,6.29,32.09.49,37.64-5.32,5.1-15.04,3.15-32.74-.98,0,0-67.71-18.96-162.75-41.05-95.06-22.09-335.74-80.43-452.1-107.52-116.35-27.09-231.51-119.68-277.61-156.4-30.6-24.39-65.5-59.46-113.92-117.63-19.53-23.45-47.88-72.53-65.91-110.07-55.15-114.81-201.91-407.96-201.91-407.96-13.69-29.38-15.06-37.86-8.45-43.48,3.27-2.79,10.56-3.49,28.44-.44,37.07,6.32,110.37,33.41,242.56,129.85-132.52-96.69-210.54-127.91-247.55-134.57-33.39-6.02-35.76,7.59-43.87,18.95-6.24,8.74-4.92,16.16,8.77,45.54,0,0,152.49,321.52,205.19,436.67,17.34,37.88,34.14,68.86,53.66,92.31,48.43,58.17,91.49,92.36,122.1,116.74,46.09,36.72,175.03,136.2,291.39,163.3,116.35,27.09,356.87,82.29,451.93,104.39,95.06,22.09,175.43,40.56,175.43,40.56,22.54,2.29,30.85-7.98,37.35-15.75,7.76-9.25,3.53-24.67-10.51-50.11h.01Z"/>
+    <path class="cls-36" d="M12122.38,955.98c4,11.35,6.29,32.09.49,37.64-5.32,5.1-15.04,3.15-32.74-.98,0,0-67.71-18.96-162.75-41.05-95.06-22.09-335.74-80.43-452.1-107.52-116.35-27.09-231.51-119.68-277.61-156.4-30.6-24.39-65.5-59.46-113.92-117.63-19.53-23.45-47.88-72.53-65.91-110.07-55.15-114.81-201.91-407.96-201.91-407.96-13.69-29.38-15.06-37.86-8.45-43.48,3.27-2.79,10.56-3.49,28.44-.44,37.07,6.32,110.37,33.41,242.56,129.85-132.52-96.69-210.54-127.91-247.55-134.57-33.39-6.02-35.76,7.59-43.87,18.95-6.24,8.74-4.92,16.16,8.77,45.54,0,0,152.49,321.52,205.19,436.67,17.34,37.88,34.14,68.86,53.66,92.31,48.43,58.17,91.49,92.36,122.1,116.74,46.09,36.72,175.03,136.2,291.39,163.3,116.35,27.09,356.87,82.29,451.93,104.39,95.06,22.09,175.43,40.56,175.43,40.56,22.54,2.29,26.76-4.84,33.27-12.61,7.76-9.25,4.84-27.02-6.42-53.25h.01Z"/>
+    <path class="cls-26" d="M12122.38,955.98c4,11.35,6.29,32.09.49,37.64-5.32,5.1-15.04,3.15-32.74-.98,0,0-67.71-18.96-162.75-41.05-95.06-22.09-335.74-80.43-452.1-107.52-116.35-27.09-231.51-119.68-277.61-156.4-30.6-24.39-65.5-59.46-113.92-117.63-19.53-23.45-47.88-72.53-65.91-110.07-55.15-114.81-201.91-407.96-201.91-407.96-13.69-29.38-15.06-37.86-8.45-43.48,3.27-2.79,10.56-3.49,28.44-.44,37.07,6.32,110.37,33.41,242.56,129.85-132.52-96.69-210.54-127.91-247.55-134.57-33.39-6.02-35.76,7.59-43.87,18.95-6.24,8.74-4.92,16.16,8.77,45.54,0,0,152.49,321.52,205.19,436.67,17.34,37.88,34.14,68.86,53.66,92.31,48.43,58.17,91.49,92.36,122.1,116.74,46.09,36.72,175.03,136.2,291.39,163.3,116.35,27.09,356.87,82.29,451.93,104.39,95.06,22.09,175.43,40.56,175.43,40.56,22.54,2.29,26.76-4.84,33.27-12.61,7.76-9.25,4.84-27.02-6.42-53.25h.01Z"/>
+    <path class="cls-1" d="M12122.38,955.98c4,11.35,6.29,32.09.49,37.64-5.32,5.1-15.04,3.15-32.74-.98,0,0-67.71-18.96-162.75-41.05-95.06-22.09-335.74-80.43-452.1-107.52-116.35-27.09-231.51-119.68-277.61-156.4-30.6-24.39-65.5-59.46-113.92-117.63-19.53-23.45-47.88-72.53-65.91-110.07-55.15-114.81-201.91-407.96-201.91-407.96-13.69-29.38-15.06-37.86-8.45-43.48,3.27-2.79,10.56-3.49,28.44-.44,37.07,6.32,110.37,33.41,242.56,129.85-132.52-96.69-210.54-127.91-247.55-134.57-33.39-6.02-35.76,7.59-43.87,18.95-6.24,8.74-4.92,16.16,8.77,45.54,0,0,152.49,321.52,205.19,436.67,17.34,37.88,34.14,68.86,53.66,92.31,48.43,58.17,91.49,92.36,122.1,116.74,46.09,36.72,175.03,136.2,291.39,163.3,116.35,27.09,356.87,82.29,451.93,104.39,95.06,22.09,175.43,40.56,175.43,40.56,22.54,2.29,26.76-4.84,33.27-12.61,15.25-15.91,4.84-27.02-6.42-53.25h.01Z"/>
+    <path class="cls-27" d="M12122.38,955.98c4,11.35,6.29,32.09.49,37.64-5.32,5.1-15.04,3.15-32.74-.98,0,0-67.71-18.96-162.75-41.05-95.06-22.09-335.74-80.43-452.1-107.52-116.35-27.09-231.51-119.68-277.61-156.4-30.6-24.39-65.5-59.46-113.92-117.63-19.53-23.45-47.88-72.53-65.91-110.07-55.15-114.81-201.91-407.96-201.91-407.96-13.69-29.38-15.06-37.86-8.45-43.48,3.27-2.79,10.56-3.49,28.44-.44,37.07,6.32,110.37,33.41,242.56,129.85-132.52-96.69-210.54-127.91-247.55-134.57-33.39-6.02-35.76,7.59-43.87,18.95-6.24,8.74-4.92,16.16,8.77,45.54,0,0,152.49,321.52,205.19,436.67,17.34,37.88,34.14,68.86,53.66,92.31,48.43,58.17,91.49,92.36,122.1,116.74,46.09,36.72,175.03,136.2,291.39,163.3,116.35,27.09,356.87,82.29,451.93,104.39,95.06,22.09,175.43,40.56,175.43,40.56,22.54,2.29,26.76-4.84,33.27-12.61,7.76-9.25,4.84-27.02-6.42-53.25h.01Z"/>
+    <path class="cls-23" d="M12122.38,955.98c4,11.35,6.29,32.09.49,37.64-5.32,5.1-15.04,3.15-32.74-.98,0,0-67.71-18.96-162.75-41.05-95.06-22.09-335.74-80.43-452.1-107.52-116.35-27.09-231.51-119.68-277.61-156.4-30.6-24.39-65.5-59.46-113.92-117.63-19.53-23.45-47.88-72.53-65.91-110.07-55.15-114.81-201.91-407.96-201.91-407.96-13.69-29.38-15.06-37.86-8.45-43.48,3.27-2.79,10.56-3.49,28.44-.44,37.07,6.32,110.37,33.41,242.56,129.85-132.52-96.69-210.54-127.91-247.55-134.57-33.39-6.02-35.76,7.59-43.87,18.95-6.24,8.74-4.92,16.16,8.77,45.54,0,0,152.49,321.52,205.19,436.67,17.34,37.88,34.14,68.86,53.66,92.31,48.43,58.17,91.49,92.36,122.1,116.74,46.09,36.72,175.03,136.2,291.39,163.3,116.35,27.09,356.87,82.29,451.93,104.39,95.06,22.09,175.43,40.56,175.43,40.56,22.54,2.29,26.76-4.84,33.27-12.61,7.76-9.25,4.84-27.02-6.42-53.25h.01Z"/>
+    <path class="cls-25" d="M12122.38,955.98c4,11.35,6.29,32.09.49,37.64-5.32,5.1-15.04,3.15-32.74-.98,0,0-67.71-18.96-162.75-41.05-95.06-22.09-335.74-80.43-452.1-107.52-116.35-27.09-231.51-119.68-277.61-156.4-30.6-24.39-65.5-59.46-113.92-117.63-19.53-23.45-47.88-72.53-65.91-110.07-55.15-114.81-201.91-407.96-201.91-407.96-13.69-29.38-15.06-37.86-8.45-43.48,3.27-2.79,10.56-3.49,28.44-.44,37.07,6.32,110.37,33.41,242.56,129.85-132.52-96.69-210.54-127.91-247.55-134.57-33.39-6.02-35.76,7.59-43.87,18.95-6.24,8.74-4.92,16.16,8.77,45.54,0,0,152.49,321.52,205.19,436.67,17.34,37.88,34.14,68.86,53.66,92.31,48.43,58.17,91.49,92.36,122.1,116.74,46.09,36.72,175.03,136.2,291.39,163.3,116.35,27.09,356.87,82.29,451.93,104.39,95.06,22.09,175.43,40.56,175.43,40.56,22.54,2.29,26.76-4.84,33.27-12.61,7.76-9.25,4.84-27.02-6.42-53.25h.01Z"/>
+    <path class="cls-23" d="M12122.38,955.98c4,11.35,6.29,32.09.49,37.64-5.32,5.1-15.04,3.15-32.74-.98,0,0-67.71-18.96-162.75-41.05-95.06-22.09-335.74-80.43-452.1-107.52-116.35-27.09-231.51-119.68-277.61-156.4-30.6-24.39-65.5-59.46-113.92-117.63-19.53-23.45-47.88-72.53-65.91-110.07-55.15-114.81-201.91-407.96-201.91-407.96-13.69-29.38-15.06-37.86-8.45-43.48,3.27-2.79,10.56-3.49,28.44-.44,37.07,6.32,110.37,33.41,242.56,129.85-132.52-96.69-210.54-127.91-247.55-134.57-33.39-6.02-35.76,7.59-43.87,18.95-6.24,8.74-4.92,16.16,8.77,45.54,0,0,152.49,321.52,205.19,436.67,17.34,37.88,34.14,68.86,53.66,92.31,48.43,58.17,91.49,92.36,122.1,116.74,46.09,36.72,175.03,136.2,291.39,163.3,116.35,27.09,356.87,82.29,451.93,104.39,95.06,22.09,175.43,40.56,175.43,40.56,22.54,2.29,26.76-4.84,33.27-12.61,7.76-9.25,4.84-27.02-6.42-53.25h.01Z"/>
+    <path class="cls-24" d="M12125.55,957.53c3.99,11.35,6.29,32.09.49,37.64-5.32,5.1-15.04,3.15-32.74-.98,0,0-67.71-18.96-162.76-41.05-95.06-22.09-335.73-80.43-452.09-107.52-116.35-27.1-231.52-119.68-277.61-156.4-30.61-24.38-65.5-59.46-113.92-117.63-19.53-23.45-47.88-72.53-65.91-110.07-55.15-114.81-201.92-407.96-201.92-407.96-13.68-29.38-15.06-37.86-8.45-43.48,3.27-2.79,10.57-3.49,28.45-.44,37.07,6.32,110.37,33.41,242.56,129.85-132.51-96.69-210.54-127.91-247.54-134.57-33.39-6.02-35.76,7.59-43.88,18.95-6.23,8.74-4.91,16.16,8.77,45.54,0,0,152.5,321.52,205.2,436.67,17.34,37.88,34.13,68.86,53.66,92.31,48.43,58.17,91.49,92.36,122.09,116.74,46.1,36.72,175.03,136.2,291.39,163.3,116.36,27.09,356.88,82.29,451.94,104.39,95.06,22.09,175.43,40.56,175.43,40.56,22.53,2.29,26.76-4.85,33.27-12.61,7.76-9.25,4.83-27.02-6.42-53.25h0Z"/>
+    <path class="cls-33" d="M10817.23,8.75c4.93,0,10.97.69,17.97,2.07,16.08,3.15,44.71,11.79,89.88,35.07,48.86,25.17,105.25,61.4,167.59,107.68,67.62,50.21,248.83,184.89,424.06,315.15,187.77,139.58,381.94,283.9,432.53,321.43,56.73,42.08,97.48,80.77,121.69,105.82,29.77,30.82,51.56,58.9,58.27,75.1l.02.04.02.04c4.5,10.5,6.39,17.9,5.75,22.61-.47,3.46-1.75,6.1-5.43,10.49l-.36.44c-.6.71-1.17,1.42-1.74,2.13-4.6,5.67-9.48,5.24-20.58,5.24-1.83,0-3.87-.1-6.03-.31-15.13-2.92-82.94-15-173.31-36-42.74-9.94-107.71-29.5-184.43-47.17-96.35-22.2-203.46-42.3-267.49-57.22-49.35-11.49-106.75-37.11-170.64-76.14-53.36-32.61-97.72-66.45-119.41-83.73-36.7-29.22-76.43-64.9-121.84-119.45-18.47-22.45-32.35-45.13-50.34-84.42-52.01-113.66-208.56-438.54-210.68-443.02-14.15-30.36-13.41-33.66-8.63-40.43.94-1.34,1.79-2.67,2.62-3.95,4.59-7.16,7.39-11.47,20.51-11.47ZM10817.23,1.15c-20.08,0-23.24,9.95-29.36,18.64-7.72,10.95-5.72,18.67,7.96,48.05,0,0,156.06,329.28,208.75,444.43,17.34,37.88,28.38,63.86,47.9,87.31,48.44,58.17,96.03,96.47,126.64,120.86,46.1,36.72,177.7,136.18,294.05,163.27,116.35,27.1,357.61,77.36,452.67,99.46,95.06,22.09,175.43,39.6,175.43,39.6,2.65.27,5.04.39,7.22.39,16.34,0,20.31-7.1,26.05-13.96,7.76-9.24,12.97-14.81,1.73-41.04-13.89-33.5-84.85-111.73-182.45-184.12-97.61-72.38-716.2-532.35-856.6-636.58-140.43-104.21-222.46-136.63-260.55-144.1-7.86-1.54-14.22-2.22-19.44-2.22Z"/>
+    <path class="cls-34" d="M10817.23,8.75c4.93,0,10.97.69,17.97,2.07,16.08,3.15,44.71,11.79,89.88,35.07,48.86,25.17,105.25,61.4,167.59,107.68,67.62,50.21,248.83,184.89,424.06,315.15,187.77,139.58,381.94,283.9,432.53,321.43,56.73,42.08,97.48,80.77,121.69,105.82,29.77,30.82,51.56,58.9,58.27,75.1l.02.04.02.04c4.5,10.5,6.39,17.9,5.75,22.61-.47,3.46-1.75,6.1-5.43,10.49l-.36.44c-.6.71-1.17,1.42-1.74,2.13-4.6,5.67-9.48,5.24-20.58,5.24-1.83,0-3.87-.1-6.03-.31-15.13-2.92-82.94-15-173.31-36-42.74-9.94-107.71-29.5-184.43-47.17-96.35-22.2-203.46-42.3-267.49-57.22-49.35-11.49-106.75-37.11-170.64-76.14-53.36-32.61-97.72-66.45-119.41-83.73-36.7-29.22-76.43-64.9-121.84-119.45-18.47-22.45-32.35-45.13-50.34-84.42-52.01-113.66-208.56-438.54-210.68-443.02-14.15-30.36-13.41-33.66-8.63-40.43.94-1.34,1.79-2.67,2.62-3.95,4.59-7.16,7.39-11.47,20.51-11.47ZM10817.23,1.15c-20.08,0-23.24,9.95-29.36,18.64-7.72,10.95-5.72,18.67,7.96,48.05,0,0,156.06,329.28,208.75,444.43,17.34,37.88,28.38,63.86,47.9,87.31,48.44,58.17,96.03,96.47,126.64,120.86,46.1,36.72,177.7,136.18,294.05,163.27,116.35,27.1,357.61,77.36,452.67,99.46,95.06,22.09,175.43,39.6,175.43,39.6,2.65.27,5.04.39,7.22.39,16.34,0,20.31-7.1,26.05-13.96,7.76-9.24,12.97-14.81,1.73-41.04-13.89-33.5-84.85-111.73-182.45-184.12-97.61-72.38-716.2-532.35-856.6-636.58-140.43-104.21-222.46-136.63-260.55-144.1-7.86-1.54-14.22-2.22-19.44-2.22Z"/>
+    <path class="cls-35" d="M10817.09,8.64c4.96,0,11.05.7,18.11,2.09,16.19,3.17,45.03,11.87,90.52,35.32,49.2,25.35,105.99,61.84,168.76,108.44,68.11,50.56,250.59,186.19,427.05,317.37,189.1,140.56,384.63,285.9,435.57,323.69,57.14,42.37,98.18,81.34,122.55,106.57,29.99,31.04,51.93,59.32,58.69,75.63l.02.04.02.04c4.53,10.58,2.28,15.09,1.63,19.83-1.63,3.45-2.28,5.76-5.98,10.19l-.37.44c-.61.72-1.17,1.43-1.75,2.14-4.64,5.71-7.43,9.17-18.61,9.17-1.85,0-3.89-.11-6.07-.31-6.53-1.43-80.97-15.69-171.98-36.84-43.04-10-116.03-26.82-193.29-44.62-97.01-22.35-203.49-41.23-267.97-56.26-49.69-11.57-107.5-37.37-171.84-76.68-53.74-32.84-98.41-66.92-120.25-84.32-36.95-29.43-80.19-65.44-125.93-120.37-18.35-22.04-31.27-43.88-49.37-83.44-52.38-114.46-201.96-447.36-204.1-451.87-14.25-30.57-13.5-33.9-8.69-40.72.95-1.35,1.81-2.69,2.64-3.97,4.64-7.21,7.44-11.56,20.66-11.56ZM10817.09.98c-20.22,0-23.4,10.02-29.56,18.77-7.77,11.03-5.76,18.8,8.03,48.39,0,0,151.54,337.86,204.6,453.82,17.46,38.14,30.8,61.54,50.46,85.16,48.77,58.58,96.22,96.9,127.05,121.46,46.41,36.97,177.95,135.18,295.11,162.47,117.17,27.28,365,76.6,460.73,98.85,95.72,22.25,172.5,36.95,172.5,36.95,2.66.26,5.07.39,7.27.39,16.46,0,20.45-7.16,26.23-14.06,7.81-9.31,11.26-17.13,4.03-38.33-13.99-33.74-85.45-112.52-183.74-185.41-98.29-72.89-719.36-536.15-860.75-641.12-141.42-104.95-224.02-137.59-262.38-145.11-7.91-1.55-14.32-2.23-19.58-2.23Z"/>
+  </g>
+</svg>
@@ -0,0 +1,266 @@
+---
+title: CLI
+description: "Create, preview, and render HTML video compositions from the command line."
+---
+
+The `hyperframes` CLI is the primary way to work with Hyperframes. It handles project creation, live preview, rendering, linting, and diagnostics — all from your terminal.
+
+```bash
+npm install -g hyperframes
+# or use directly with npx
+npx hyperframes <command>
+```
+
+## When to Use
+
+**Use the CLI when you want to:**
+- Create a new composition project from a template
+- Preview compositions with live hot reload during development
+- Render compositions to MP4 (locally or in Docker)
+- Lint compositions for structural issues
+- Check your environment for missing dependencies
+
+**Use a different package if you want to:**
+- Render programmatically from Node.js code — use the [producer](/packages/producer)
+- Build a custom frame capture pipeline — use the [engine](/packages/engine)
+- Embed a composition editor in your own web app — use the [studio](/packages/studio)
+- Parse or generate composition HTML in code — use [core](/packages/core)
+
+<Tip>
+  The CLI is the recommended starting point for all Hyperframes users. It wraps the producer, engine, and studio packages so you do not need to install them separately.
+</Tip>
+
+## Getting Started
+
+<Steps>
+  <Step title="Create a project">
+    Scaffold a new composition from a template:
+    ```bash
+    npx hyperframes init --template title-card
+    ```
+    ```
+    Creating composition in ./title-card...
+      index.html
+      assets/
+      package.json
+    Done! Run `cd title-card && npx hyperframes dev` to preview.
+    ```
+    See [Templates](/guides/templates) for all available templates.
+  </Step>
+  <Step title="Preview in browser">
+    Start the development server with live hot reload:
+    ```bash
+    cd title-card
+    npx hyperframes dev
+    ```
+    ```
+    Hyperframes Studio v0.1.0
+    Local: http://localhost:3000
+    Watching for changes...
+    ```
+    Edit `index.html` and the preview updates instantly.
+  </Step>
+  <Step title="Lint your composition">
+    Check for structural issues before rendering:
+    ```bash
+    npx hyperframes lint
+    ```
+    ```
+    Linting index.html...
+    No issues found.
+    ```
+  </Step>
+  <Step title="Render to MP4">
+    Produce the final video:
+    ```bash
+    npx hyperframes render -o output.mp4
+    ```
+    ```
+    Rendering index.html...
+    [========================================] 100% (900/900 frames)
+    Output: output.mp4 (30s, 1920x1080, 30fps)
+    ```
+    For deterministic output, add `--docker`:
+    ```bash
+    npx hyperframes render --docker -o output.mp4
+    ```
+  </Step>
+</Steps>
+
+## Commands
+
+<Tabs>
+  <Tab title="Create">
+    ### `init`
+
+    Create a new composition project from a template:
+
+    ```bash
+    npx hyperframes init --template <name>
+    ```
+
+    | Template | Description |
+    |----------|-------------|
+    | `blank` | Empty 1920x1080 composition with a GSAP timeline wired up |
+    | `title-card` | Animated title and subtitle with GSAP fade-in/out |
+    | `slideshow` | Image slideshow with crossfade transitions |
+    | `lower-third` | Broadcast-style lower-third overlay |
+
+    See [Templates](/guides/templates) for full details and previews.
+
+    ### `compositions`
+
+    List all compositions in the current project:
+
+    ```bash
+    npx hyperframes compositions
+    ```
+    ```
+    Compositions in ./my-video:
+      root          index.html           (30s, 1920x1080)
+      intro-anim    compositions/intro.html  (5s, 1920x1080)
+    ```
+  </Tab>
+  <Tab title="Develop">
+    ### `dev`
+
+    Start a live preview server with hot reload:
+
+    ```bash
+    npx hyperframes dev
+    ```
+    ```
+    Hyperframes Studio v0.1.0
+    Local: http://localhost:3000
+    Watching for changes...
+    ```
+
+    Opens your composition in the browser. Edits to `index.html` and any referenced sub-compositions are reflected instantly. The preview uses the same Hyperframes runtime as production rendering, so what you see is what you get.
+
+    ### `lint`
+
+    Check a composition for common issues:
+
+    ```bash
+    npx hyperframes lint
+    ```
+    ```
+    Linting index.html...
+
+    WARNING  unmuted-video
+      Video element 'clip-1' should have the 'muted' attribute for reliable autoplay.
+      at index.html:5
+
+    1 issue found (0 errors, 1 warning)
+    ```
+
+    The linter detects missing attributes, deprecated names, structural problems, and more. See [Common Mistakes](/guides/common-mistakes) for details on each rule.
+  </Tab>
+  <Tab title="Build">
+    ### `render`
+
+    Render a composition to MP4:
+
+    ```bash
+    # Local mode (fast iteration)
+    npx hyperframes render -o output.mp4
+
+    # Docker mode (deterministic output)
+    npx hyperframes render --docker -o output.mp4
+
+    # With options
+    npx hyperframes render -o output.mp4 --fps 60 --quality high
+    ```
+    ```
+    Rendering index.html...
+    [========================================] 100% (900/900 frames)
+    Output: output.mp4 (30s, 1920x1080, 30fps)
+    ```
+
+    See [Rendering](/guides/rendering) for all options and modes.
+
+    ### `benchmark`
+
+    Find optimal render settings for your system:
+
+    ```bash
+    npx hyperframes benchmark
+    ```
+    ```
+    Running benchmark suite...
+
+    Quality: draft    FPS: 30   Time: 4.2s   Speed: 7.1x realtime
+    Quality: standard FPS: 30   Time: 8.7s   Speed: 3.4x realtime
+    Quality: high     FPS: 30   Time: 15.1s  Speed: 2.0x realtime
+    Quality: standard FPS: 60   Time: 16.3s  Speed: 1.8x realtime
+
+    Recommended: quality=standard fps=30 (best speed/quality balance)
+    ```
+  </Tab>
+  <Tab title="Utilities">
+    ### `doctor`
+
+    Check your environment for required dependencies:
+
+    ```bash
+    npx hyperframes doctor
+    ```
+    ```
+    Checking environment...
+      Node.js  v20.11.0     OK
+      FFmpeg   6.1.1        OK
+      Docker   24.0.7       OK
+      Chrome   120.0.6099   OK (bundled)
+
+    All checks passed.
+    ```
+
+    Verifies Node.js version, FFmpeg, Docker, Chrome, and other requirements.
+
+    ### `info`
+
+    Display system and project information:
+
+    ```bash
+    npx hyperframes info
+    ```
+    ```
+    Hyperframes v0.1.0
+    Node.js    v20.11.0
+    Platform   linux x64
+    FFmpeg     6.1.1
+    Project    ./my-video (2 compositions)
+    ```
+
+    ### `upgrade`
+
+    Update Hyperframes to the latest version:
+
+    ```bash
+    npx hyperframes upgrade
+    ```
+    ```
+    Current: 0.1.0
+    Latest:  0.2.0
+    Upgrading...
+    Done! Run `npx hyperframes doctor` to verify.
+    ```
+  </Tab>
+</Tabs>
+
+## Related Packages
+
+<CardGroup cols={2}>
+  <Card title="Producer" icon="film" href="/packages/producer">
+    The rendering pipeline the CLI calls under the hood. Use directly for programmatic rendering.
+  </Card>
+  <Card title="Studio" icon="palette" href="/packages/studio">
+    The editor UI that powers `hyperframes dev`. Use directly to embed in your own app.
+  </Card>
+  <Card title="Core" icon="cube" href="/packages/core">
+    Types, linter, and runtime. Use directly for custom tooling and integrations.
+  </Card>
+  <Card title="Engine" icon="gear" href="/packages/engine">
+    The capture engine. Use directly for custom frame capture pipelines.
+  </Card>
+</CardGroup>
@@ -0,0 +1,162 @@
+---
+title: "@hyperframes/core"
+description: "Types, HTML generation, runtime, and linter — the foundation every other package depends on."
+---
+
+The core package provides the foundational types, HTML parsing/generation, runtime, and composition linter that all other Hyperframes packages build on. If you are building tooling, writing a custom integration, or extending Hyperframes itself, this is the package you need.
+
+```bash
+npm install @hyperframes/core
+```
+
+## When to Use
+
+<Tip>
+  **Most users do not need to install `@hyperframes/core` directly.** The [CLI](/packages/cli), [producer](/packages/producer), and [studio](/packages/studio) packages all depend on core internally. You only need it if you are doing one of the things listed below.
+</Tip>
+
+**Use `@hyperframes/core` when you need to:**
+- Lint compositions programmatically (CI pipelines, editor plugins)
+- Parse HTML compositions into structured TypeScript objects
+- Generate composition HTML from data (e.g., from an API or AI agent)
+- Access the Hyperframes type system for your own tooling
+- Embed the Hyperframes runtime in a custom player
+
+**Use a different package if you want to:**
+- Preview compositions in the browser — use the [CLI](/packages/cli) (`npx hyperframes dev`) or [studio](/packages/studio)
+- Render compositions to MP4 — use the [CLI](/packages/cli) (`npx hyperframes render`) or [producer](/packages/producer)
+- Capture frames from a headless browser — use the [engine](/packages/engine)
+
+## What's Inside
+
+| Module | Description |
+|--------|-------------|
+| `core.types` | TypeScript types for compositions, clips, timelines, and render config |
+| `parsers/` | HTML-to-composition parsing — turns an HTML string into a typed `Composition` object |
+| `generators/` | Composition-to-HTML generation — turns a `Composition` object back into HTML |
+| `runtime/` | The Hyperframes runtime that manages playback, seeking, and clip lifecycle |
+| `lint/` | Composition linter with rules for structural correctness |
+| `adapters/` | Frame Adapter types and the built-in GSAP adapter |
+| `templates/` | HTML composition templates used by `hyperframes init` |
+
+## Linter
+
+The composition linter checks for structural issues that would cause rendering failures or unexpected behavior. You can run it from the CLI with `npx hyperframes lint`, or call it programmatically:
+
+```typescript
+import { lintHyperframeHtml } from '@hyperframes/core';
+
+const html = `
+<div id="root" data-composition-id="root"
+     data-start="0" data-width="1920" data-height="1080">
+  <video id="clip-1" data-start="0" data-track-index="0"
+         src="intro.mp4"></video>
+</div>
+`;
+
+const issues = lintHyperframeHtml(html);
+// => [{ rule: "unmuted-video", message: "Video element 'clip-1' should have the 'muted' attribute ...", severity: "warning" }]
+```
+
+Detected issues include:
+
+- Missing timeline registration (`window.__timelines`)
+- Unmuted video elements (causes autoplay failures)
+- Missing `class="clip"` on timed visible elements
+- Deprecated attribute names
+- Missing composition dimensions (`data-width`, `data-height`)
+- Invalid `data-start` references to nonexistent clip IDs
+
+<Info>
+  For a full list of what the linter catches and how to fix each issue, see [Common Mistakes](/guides/common-mistakes) and [Troubleshooting](/guides/troubleshooting).
+</Info>
+
+## Types
+
+Import the core types for use in your own tooling or integrations:
+
+```typescript
+import type {
+  Composition,
+  Clip,
+  RenderConfig,
+  FrameAdapterContext,
+} from '@hyperframes/core';
+
+// Example: define a render configuration
+const config: RenderConfig = {
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  quality: 'standard',
+};
+
+// Example: work with a parsed composition
+function getClipCount(composition: Composition): number {
+  return composition.clips.length;
+}
+```
+
+## Parsing and Generating HTML
+
+Round-trip between HTML and structured data:
+
+```typescript
+import { parseHyperframeHtml, generateHyperframeHtml } from '@hyperframes/core';
+
+// Parse HTML into a Composition object
+const composition = parseHyperframeHtml(htmlString);
+console.log(composition.id);       // "root"
+console.log(composition.width);    // 1920
+console.log(composition.clips);    // [{ id: "clip-1", start: 0, ... }, ...]
+
+// Generate HTML from a Composition object
+const html = generateHyperframeHtml(composition);
+```
+
+This is especially useful for AI agents that generate video programmatically — they can construct a `Composition` object in code and then serialize it to HTML for rendering.
+
+## Runtime Builds
+
+The runtime is the JavaScript that runs inside the browser (or headless Chrome) to manage clip lifecycle, media playback, and timeline synchronization. It is built in two formats:
+
+- **`hyperframe.runtime.iife.js`** — injected into browser iframes for preview playback
+- **`hyperframe.runtime.mjs`** — for Node.js tooling and tests
+
+Build the runtime from source:
+
+```bash
+pnpm --filter @hyperframes/core build:hyperframes-runtime
+```
+
+<Warning>
+  You should not need to build the runtime yourself unless you are developing the Hyperframes framework itself. The CLI and producer packages bundle the runtime automatically.
+</Warning>
+
+## Frame Adapters
+
+The core package defines the [Frame Adapter](/concepts/frame-adapters) interface — the abstraction that lets Hyperframes work with any animation runtime. The built-in GSAP adapter lives here:
+
+```typescript
+import type { FrameAdapterContext } from '@hyperframes/core';
+
+// Every adapter must answer: "what should the screen look like at this time?"
+// See the Frame Adapters concept page for the full API.
+```
+
+## Related Packages
+
+<CardGroup cols={2}>
+  <Card title="CLI" icon="terminal" href="/packages/cli">
+    The easiest way to create, preview, lint, and render compositions.
+  </Card>
+  <Card title="Engine" icon="gear" href="/packages/engine">
+    Low-level frame capture pipeline that uses core types and runtime.
+  </Card>
+  <Card title="Producer" icon="film" href="/packages/producer">
+    Full rendering pipeline built on top of core and engine.
+  </Card>
+  <Card title="Studio" icon="palette" href="/packages/studio">
+    Visual composition editor that embeds the core runtime for preview.
+  </Card>
+</CardGroup>
@@ -0,0 +1,150 @@
+---
+title: "@hyperframes/engine"
+description: "Seekable page-to-video capture engine using Chrome's BeginFrame API."
+---
+
+The engine package provides the low-level video capture pipeline: it loads an HTML page in headless Chrome, seeks to each frame independently, and captures pixel buffers using Chrome's `HeadlessExperimental.beginFrame` API. This is the layer that makes Hyperframes rendering deterministic.
+
+```bash
+npm install @hyperframes/engine
+```
+
+## When to Use
+
+<Warning>
+  **Most users should NOT use the engine directly.** Use the [CLI](/packages/cli) (`npx hyperframes render`) or the [producer](/packages/producer) package instead — they handle runtime injection, audio mixing, and encoding for you.
+</Warning>
+
+**Use `@hyperframes/engine` when you need to:**
+- Build a custom rendering pipeline with full control over frame capture
+- Integrate Hyperframes capture into an existing video processing system
+- Capture individual frames (e.g., for thumbnails or sprite sheets) without encoding to video
+- Implement a custom encoding backend (not FFmpeg)
+
+**Use a different package if you want to:**
+- Render an HTML composition to a finished MP4 — use the [producer](/packages/producer) or [CLI](/packages/cli)
+- Preview compositions in the browser — use the [CLI](/packages/cli) or [studio](/packages/studio)
+- Lint or parse composition HTML — use [core](/packages/core)
+
+## How It Works
+
+The engine implements a **seek-and-capture** loop that is fundamentally different from screen recording:
+
+<Steps>
+  <Step title="Launch headless Chrome">
+    The engine starts `chrome-headless-shell`, a minimal headless Chrome binary optimized for programmatic control via the Chrome DevTools Protocol (CDP).
+  </Step>
+  <Step title="Load the composition">
+    Your HTML composition is loaded into a browser page. The Hyperframes runtime is injected to manage timeline seeking.
+  </Step>
+  <Step title="Seek to each frame">
+    For every frame in the video (e.g., 900 frames for a 30-second video at 30fps), the engine calls `renderSeek(time)` to advance the composition to the exact timestamp. No wall clock is involved — each frame is independently positioned.
+  </Step>
+  <Step title="Capture via BeginFrame">
+    Chrome's `HeadlessExperimental.beginFrame` API captures the compositor output as a pixel buffer. This produces pixel-perfect frames without any screen recording artifacts.
+  </Step>
+  <Step title="Hand off frames">
+    Captured frame buffers are passed to a consumer — typically FFmpeg (via the producer) for encoding into MP4, but you can provide your own consumer.
+  </Step>
+</Steps>
+
+This approach guarantees [deterministic rendering](/concepts/determinism): the same HTML always produces the identical video, regardless of system load or timing.
+
+## Configuration
+
+```typescript
+import type { EngineConfig } from '@hyperframes/engine';
+
+const config: EngineConfig = {
+  fps: 30,              // Frames per second: 24, 30, or 60
+  width: 1920,          // Output width in pixels
+  height: 1080,         // Output height in pixels
+  quality: 'standard',  // Encoding preset: 'draft', 'standard', or 'high'
+};
+```
+
+### Quality Presets
+
+| Preset | Use Case | Speed |
+|--------|----------|-------|
+| `draft` | Fast iteration during development | Fastest |
+| `standard` | Production renders with good quality/speed balance | Moderate |
+| `high` | Final delivery, maximum quality | Slowest |
+
+### FPS Options
+
+| FPS | Use Case |
+|-----|----------|
+| `24` | Cinematic look, smaller file size |
+| `30` | Standard web video, good balance |
+| `60` | Smooth motion, UI animations, screen recordings |
+
+## Programmatic Usage
+
+```typescript
+import { createEngine } from '@hyperframes/engine';
+
+const engine = createEngine({
+  fps: 30,
+  width: 1920,
+  height: 1080,
+});
+
+// Capture all frames from a composition
+const frames = await engine.capture('./my-video/index.html');
+
+// Each frame is a pixel buffer (PNG/raw)
+for (const frame of frames) {
+  // Process frames however you need:
+  // - pipe to FFmpeg
+  // - save as individual PNGs
+  // - generate a thumbnail
+  // - feed into a custom encoder
+}
+
+await engine.close();
+```
+
+## Key Concepts
+
+### BeginFrame Rendering
+
+Traditional screen capture records at wall-clock speed — if your system is under load, frames get dropped. The engine uses Chrome's `HeadlessExperimental.beginFrame` to explicitly advance the compositor, producing each frame on demand. This means:
+
+- **No dropped frames** — every frame is captured
+- **No timing dependency** — a 60-second video does not take 60 seconds to capture
+- **Pixel-perfect output** — the compositor produces the exact pixels it would display
+
+For more on how this enables deterministic output, see [Deterministic Rendering](/concepts/determinism).
+
+### Seek Contract
+
+The engine relies on the Hyperframes runtime's `renderSeek(time)` function. When called, `renderSeek`:
+
+1. Pauses all GSAP timelines
+2. Seeks every timeline to the exact timestamp
+3. Updates all media elements (video, audio) to match
+4. Mounts/unmounts clips based on their `data-start` and `data-duration`
+
+This contract is what makes frame-by-frame capture possible — each frame is a complete, independent snapshot of the composition at that point in time.
+
+### Chrome Requirements
+
+The engine requires `chrome-headless-shell`, which is included when you install the package. It uses a pinned Chrome version to ensure consistent rendering across environments. For fully deterministic output (including fonts), use Docker mode via the [producer](/packages/producer).
+
+## Related Packages
+
+<CardGroup cols={2}>
+  <Card title="Producer" icon="film" href="/packages/producer">
+    Wraps the engine with runtime injection, FFmpeg encoding, and audio mixing for complete MP4 output.
+  </Card>
+  <Card title="Core" icon="cube" href="/packages/core">
+    Provides the types, runtime, and linter that the engine depends on.
+  </Card>
+  <Card title="CLI" icon="terminal" href="/packages/cli">
+    The easiest way to render — calls the producer (and engine) under the hood.
+  </Card>
+  <Card title="Studio" icon="palette" href="/packages/studio">
+    Visual editor for building compositions before rendering them with the engine.
+  </Card>
+</CardGroup>
@@ -0,0 +1,173 @@
+---
+title: "@hyperframes/producer"
+description: "Full HTML-to-video rendering pipeline with encoding, audio mixing, and Docker support."
+---
+
+The producer package combines the [engine's](/packages/engine) frame capture with FFmpeg encoding to deliver a complete HTML-to-MP4 rendering pipeline. It handles runtime injection, readiness gates, audio mixing, and optional Docker-based deterministic rendering.
+
+```bash
+npm install @hyperframes/producer
+```
+
+## When to Use
+
+**Use `@hyperframes/producer` when you need to:**
+- Render compositions to MP4 programmatically from Node.js (e.g., in a backend service or CI pipeline)
+- Build a custom rendering service with fine-grained control over the pipeline
+- Run visual regression tests against golden baselines
+- Benchmark render performance across different configurations
+
+**Use a different package if you want to:**
+- Render from the command line without writing code — use the [CLI](/packages/cli) (`npx hyperframes render`)
+- Preview compositions in the browser — use the [CLI](/packages/cli) or [studio](/packages/studio)
+- Capture frames without encoding — use the [engine](/packages/engine)
+- Lint or parse composition HTML — use [core](/packages/core)
+
+<Tip>
+  If you are building a web application or script that just needs to render a video, the [CLI](/packages/cli) is the fastest path. The producer package is for when you need programmatic control inside Node.js.
+</Tip>
+
+## What It Does
+
+The producer orchestrates the full render pipeline:
+
+<Steps>
+  <Step title="Load the composition HTML">
+    Reads your `index.html` and any referenced sub-compositions.
+  </Step>
+  <Step title="Inject the Hyperframes runtime">
+    Adds the runtime script that manages timeline seeking, clip lifecycle, and media playback.
+  </Step>
+  <Step title="Wait for readiness gates">
+    Polls for `window.__playerReady` and `window.__renderReady` to ensure all assets (fonts, images, video) are loaded before capture begins.
+  </Step>
+  <Step title="Capture frames via the engine">
+    Uses the [engine's](/packages/engine) BeginFrame pipeline to capture each frame as a pixel buffer.
+  </Step>
+  <Step title="Encode to MP4 via FFmpeg">
+    Pipes frame buffers into FFmpeg with the selected quality preset and encoding settings.
+  </Step>
+  <Step title="Mix audio tracks">
+    Extracts audio from video clips and audio elements, applies `data-volume` and `data-media-start` offsets, and mixes them into the final MP4.
+  </Step>
+</Steps>
+
+## Programmatic Usage
+
+```typescript
+import { render } from '@hyperframes/producer';
+
+const result = await render({
+  input: './my-video/index.html',
+  output: './output.mp4',
+  fps: 30,
+  quality: 'standard',
+});
+
+console.log(result.duration);    // Total render time in ms
+console.log(result.frameCount);  // Number of frames captured
+console.log(result.outputPath);  // Absolute path to the output file
+```
+
+### With All Options
+
+```typescript
+await render({
+  input: './my-video/index.html',
+  output: './output.mp4',
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  quality: 'high',
+  docker: true,       // Use Docker for deterministic rendering
+});
+```
+
+## Docker Rendering
+
+For deterministic output, the producer can render inside a Docker container with a pinned Chrome version and font set. This guarantees identical output across machines — critical for CI pipelines and production services.
+
+```bash
+# Via the CLI (recommended)
+npx hyperframes render --docker -o output.mp4
+
+# Via the producer API
+await render({ input: './index.html', output: './out.mp4', docker: true });
+```
+
+<Info>
+  Docker mode requires Docker to be installed and running. Run `npx hyperframes doctor` to verify your environment. See [Deterministic Rendering](/concepts/determinism) for details on what makes Docker mode deterministic.
+</Info>
+
+## Quality Presets
+
+| Preset | Resolution | Encoding | Use Case |
+|--------|-----------|----------|----------|
+| `draft` | Original | Fast CRF | Quick iteration, previewing edits |
+| `standard` | Original | Balanced CRF | Production renders, sharing |
+| `high` | Original | High-quality CRF | Final delivery, archival |
+
+## GPU Encoding
+
+The producer supports hardware-accelerated encoding for faster renders:
+
+| Platform | Encoder | Flag |
+|----------|---------|------|
+| NVIDIA | NVENC | Auto-detected |
+| macOS | VideoToolbox | Auto-detected |
+| Linux | VAAPI | Auto-detected |
+
+GPU encoding is automatically used when available. To check your system's capabilities:
+
+```bash
+npx hyperframes doctor
+```
+
+## Regression Testing
+
+The producer includes a regression harness for comparing render output against golden baselines. This is useful for catching visual regressions when changing the runtime, engine, or rendering pipeline.
+
+```bash
+cd packages/producer
+
+# Build the test Docker image
+pnpm docker:build:test
+
+# Run regression tests (compares output against golden baselines)
+pnpm docker:test
+
+# Regenerate golden baselines after intentional changes
+pnpm docker:test:update
+```
+
+## Benchmarking
+
+Find optimal render settings for your hardware:
+
+```bash
+# Via the CLI
+npx hyperframes benchmark
+
+# Directly from the producer package
+cd packages/producer
+pnpm benchmark
+```
+
+The benchmark runs several compositions with different quality and FPS settings and reports timing for each combination.
+
+## Related Packages
+
+<CardGroup cols={2}>
+  <Card title="CLI" icon="terminal" href="/packages/cli">
+    Command-line interface that wraps the producer for rendering, previewing, and more.
+  </Card>
+  <Card title="Engine" icon="gear" href="/packages/engine">
+    The low-level capture pipeline that the producer uses to grab frames.
+  </Card>
+  <Card title="Core" icon="cube" href="/packages/core">
+    Types, runtime, and linter that the producer depends on.
+  </Card>
+  <Card title="Studio" icon="palette" href="/packages/studio">
+    Visual editor for building compositions before rendering with the producer.
+  </Card>
+</CardGroup>
@@ -0,0 +1,132 @@
+---
+title: "@hyperframes/studio"
+description: "Visual composition editor with live preview, timeline view, and hot reload."
+---
+
+The studio package provides a browser-based visual editor for creating and previewing Hyperframes compositions. It gives you a real-time preview of your video, a visual timeline of all clips, and player controls for seeking and playback — all updating live as you edit your HTML.
+
+```bash
+npm install @hyperframes/studio
+```
+
+## When to Use
+
+**Use `@hyperframes/studio` when you need to:**
+- Build a custom composition editor UI (e.g., embedded in your own web application)
+- Integrate the Hyperframes preview player into a larger product
+- Extend the editor with custom panels, toolbars, or integrations
+
+**Use a different package if you want to:**
+- Preview compositions during development — use the [CLI](/packages/cli) (`npx hyperframes dev`), which launches the studio for you
+- Render compositions to MP4 — use the [CLI](/packages/cli) or [producer](/packages/producer)
+- Capture frames programmatically — use the [engine](/packages/engine)
+
+<Tip>
+  **For most development workflows, you do not need to install the studio directly.** Running `npx hyperframes dev` starts the studio automatically with hot reload. Install `@hyperframes/studio` only if you are embedding the editor into your own application.
+</Tip>
+
+## Running the Studio
+
+### Via the CLI (recommended)
+
+```bash
+npx hyperframes dev
+```
+
+This starts the studio development server, opens your composition in the browser, and watches for file changes. This is the easiest way to get a live preview.
+
+### From the monorepo
+
+```bash
+# From the root
+pnpm dev
+
+# Or target the studio package directly
+pnpm --filter @hyperframes/studio dev
+```
+
+The studio starts at `http://localhost:3000` by default.
+
+## Features
+
+### Live Preview
+
+The studio renders your composition in an iframe using the Hyperframes runtime. What you see in the preview is exactly what will be captured during rendering — the same runtime code, the same seek logic, the same clip lifecycle.
+
+Changes to your HTML are picked up automatically through hot reload, so you can edit `index.html` in your editor and see the result in the browser within milliseconds.
+
+### Timeline View
+
+The timeline panel provides a visual representation of your composition's structure:
+
+- Each clip appears as a colored bar on its track
+- Bar position and width reflect `data-start` and `data-duration`
+- Tracks are stacked by `data-track-index` (higher tracks render in front)
+- Relative timing references (e.g., `data-start="intro"`) are resolved and displayed as absolute positions
+
+This makes it easy to understand the temporal structure of complex compositions with many overlapping clips.
+
+### Player Controls
+
+The studio includes a full set of playback controls:
+
+- **Play / Pause** — start and stop playback
+- **Seek** — click anywhere on the timeline to jump to that point
+- **Scrub** — drag the playhead to scrub through the composition frame by frame
+- **Frame step** — advance or rewind one frame at a time for precise positioning
+
+### Hot Reload
+
+File changes are detected and applied without restarting the server. The preview maintains its current playback position when possible, so you can tweak an animation at the 5-second mark without having to seek back to it after every save.
+
+## Architecture
+
+The studio is a React application with the following structure:
+
+1. **Iframe preview** — your composition HTML is loaded in an isolated iframe with the Hyperframes runtime injected. This ensures the preview uses the same rendering path as production.
+
+2. **Runtime bridge** — the studio communicates with the iframe via `postMessage` to control playback (play, pause, seek) and receive state updates (current time, duration, readiness).
+
+3. **Timeline component** — parses the composition using `@hyperframes/core` to extract clip timing data and renders the visual timeline panel.
+
+4. **File watcher** — a development server (Vite-based) watches your project files and triggers hot module replacement when changes are detected.
+
+## Embedding in Your Own Application
+
+If you are building a product that includes a composition editor, you can use the studio's components directly:
+
+```typescript
+import { Player, Timeline } from '@hyperframes/studio';
+
+// Embed the preview player
+<Player
+  src="./my-composition/index.html"
+  width={1920}
+  height={1080}
+  autoPlay={false}
+/>
+
+// Embed the timeline view
+<Timeline compositionHtml={htmlString} />
+```
+
+<Info>
+  The studio depends on `@hyperframes/core` for parsing and runtime injection. You do not need to install core separately — it is included as a dependency.
+</Info>
+
+## Related Packages
+
+<CardGroup cols={2}>
+  <Card title="CLI" icon="terminal" href="/packages/cli">
+    Launches the studio via `npx hyperframes dev` — the easiest way to preview compositions.
+  </Card>
+  <Card title="Core" icon="cube" href="/packages/core">
+    Types, parsing, and runtime that the studio uses for preview and timeline rendering.
+  </Card>
+  <Card title="Producer" icon="film" href="/packages/producer">
+    Renders the compositions you build in the studio to finished MP4 files.
+  </Card>
+  <Card title="Engine" icon="gear" href="/packages/engine">
+    The capture engine that powers production rendering of your compositions.
+  </Card>
+</CardGroup>
@@ -0,0 +1,185 @@
+---
+title: Quickstart
+description: "Create, preview, and render your first Hyperframes video in under two minutes."
+---
+
+Go from zero to a rendered MP4 in four steps: scaffold a project, preview it live, customize the composition, and render.
+
+## What you'll build
+
+A 1920x1080 video with an animated title that fades in from above — rendered to MP4 on your local machine. The entire composition is a single HTML file.
+
+## Prerequisites
+
+<Steps>
+  <Step title="Install Node.js 20+">
+    Hyperframes requires Node.js 20 or later. Check your version:
+
+    ```bash
+    node --version
+    ```
+
+    ```bash Expected output
+    v20.11.0   # or any version >= 20
+    ```
+  </Step>
+
+  <Step title="Install FFmpeg">
+    FFmpeg is required for local video rendering (encoding captured frames into MP4).
+
+    <CodeGroup>
+    ```bash macOS
+    brew install ffmpeg
+    ```
+    ```bash Ubuntu / Debian
+    sudo apt install ffmpeg
+    ```
+    ```bash Windows
+    # Download from https://ffmpeg.org/download.html
+    # or install via winget:
+    winget install ffmpeg
+    ```
+    </CodeGroup>
+
+    Verify the installation:
+
+    ```bash
+    ffmpeg -version
+    ```
+
+    ```bash Expected output
+    ffmpeg version 7.x ...
+    ```
+  </Step>
+</Steps>
+
+## Create your first video
+
+<Steps>
+  <Step title="Scaffold the project">
+    ```bash
+    npx create-hyperframe my-video
+    cd my-video
+    ```
+
+    ```bash Expected output
+    ✔ Created my-video/
+    ✔ index.html
+    ✔ assets/
+    Done. Run `npx hyperframes dev` to preview.
+    ```
+
+    This generates the following project structure:
+
+    <Tree>
+      <Tree.Folder name="my-video" defaultOpen>
+        <Tree.File name="index.html" />
+        <Tree.Folder name="compositions" defaultOpen>
+          <Tree.File name=".gitkeep" />
+        </Tree.Folder>
+        <Tree.Folder name="assets" defaultOpen>
+          <Tree.File name=".gitkeep" />
+        </Tree.Folder>
+      </Tree.Folder>
+    </Tree>
+
+    | Path | Purpose |
+    |------|---------|
+    | `index.html` | Root composition — your video's entry point |
+    | `compositions/` | Sub-compositions loaded via `data-composition-src` |
+    | `assets/` | Media files (video, audio, images) |
+  </Step>
+
+  <Step title="Preview in the browser">
+    ```bash
+    npx hyperframes dev
+    ```
+
+    ```bash Expected output
+    ✔ Hyperframes dev server running
+      → http://localhost:3000
+    ```
+
+    Open [http://localhost:3000](http://localhost:3000) to see the live preview. Edits to `index.html` reload automatically.
+
+    <Tip>
+      The dev server supports hot reload — save your HTML file and the preview updates instantly, no manual refresh needed.
+    </Tip>
+  </Step>
+
+  <Step title="Edit the composition">
+    Open `index.html` and replace it with this composition:
+
+    ```html index.html
+    <div id="root" data-composition-id="my-video"
+         data-start="0" data-width="1920" data-height="1080">
+
+      <!-- 1. Define a timed text clip on track 0 -->
+      <h1 id="title" class="clip"
+          data-start="0" data-duration="5" data-track-index="0"
+          style="font-size: 72px; color: white; text-align: center;
+                 position: absolute; top: 50%; left: 50%;
+                 transform: translate(-50%, -50%);">
+        Hello, Hyperframes!
+      </h1>
+
+      <!-- 2. Load GSAP for animation -->
+      <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
+
+      <!-- 3. Create a paused timeline and register it -->
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.from("#title", { opacity: 0, y: -50, duration: 1 }, 0);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["my-video"] = tl;
+      </script>
+    </div>
+    ```
+
+    Three rules to remember:
+
+    - **Root element** must have `data-composition-id`, `data-width`, and `data-height`
+    - **Timed elements** need `data-start`, `data-duration`, `data-track-index`, and `class="clip"`
+    - **GSAP timeline** must be created with `{ paused: true }` and registered on `window.__timelines`
+  </Step>
+
+  <Step title="Render to MP4">
+    ```bash
+    npx hyperframes render -o output.mp4
+    ```
+
+    ```bash Expected output
+    ✔ Capturing frames... 150/150
+    ✔ Encoding MP4...
+    ✔ output.mp4 (1920x1080, 5.0s, 30fps)
+    ```
+
+    Your video is now at `output.mp4`. Open it with any media player.
+  </Step>
+</Steps>
+
+## Requirements summary
+
+| Dependency | Required | Notes |
+|-----------|----------|-------|
+| **Node.js** 20+ | Yes | Runtime for CLI and dev server |
+| **pnpm** or npm | Yes | Package manager (pnpm recommended) |
+| **FFmpeg** | Yes | Video encoding for local renders |
+| **Docker** | No | Optional — for deterministic, reproducible renders |
+
+## Next steps
+
+<CardGroup cols={2}>
+  <Card title="Compositions" icon="layer-group" href="/concepts/compositions">
+    Learn how compositions, clips, and nested timelines work together
+  </Card>
+  <Card title="GSAP Animation" icon="wand-magic-sparkles" href="/guides/gsap-animation">
+    Add fade, slide, scale, and custom animations to your videos
+  </Card>
+  <Card title="Templates" icon="grid-2" href="/guides/templates">
+    Start from built-in templates like title-card and video-edit
+  </Card>
+  <Card title="Rendering" icon="film" href="/guides/rendering">
+    Explore render options: quality presets, Docker mode, and GPU encoding
+  </Card>
+</CardGroup>
@@ -0,0 +1,235 @@
+---
+title: HTML Schema Reference
+description: "Complete reference for authoring Hyperframes HTML compositions."
+---
+
+This is the full schema reference for Hyperframes compositions. For a gentler introduction, see [Compositions](/concepts/compositions) and [Data Attributes](/concepts/data-attributes).
+
+## Overview
+
+Hyperframes uses HTML as the source of truth for describing a video:
+
+- **HTML clips** = video, image, audio, composition
+- **[Data attributes](/concepts/data-attributes)** = timing, metadata, styling
+- **CSS** = positioning and appearance
+- **GSAP timeline** = animations and playback sync (see [GSAP Animation](/guides/gsap-animation))
+
+## Framework-Managed Behavior
+
+The framework reads data attributes and automatically manages:
+
+- **Primitive clip timeline entries** — reads `data-start`, `data-duration`, and `data-track-index` from clips and adds them to the GSAP timeline
+- **Media playback** (play, pause, seek) for `<video>` and `<audio>`
+- **Clip lifecycle** — clips are mounted/unmounted based on `data-start` and `data-duration`
+- **Timeline synchronization** — keeps media in sync with the GSAP master timeline
+- **Media loading** — waits for all media to load before resolving timing
+
+Mounting/unmounting controls **presence**, not appearance. Transitions (fade in, slide in) are animated in scripts.
+
+<Warning>
+  Do not manually call `video.play()`, `video.pause()`, set `audio.currentTime`, or mount/unmount clips in scripts. The framework owns media playback and clip lifecycle. See [Common Mistakes](/guides/common-mistakes) for more details.
+</Warning>
+
+## Viewport
+
+Every composition must include `data-width` and `data-height` on the root element:
+
+```html
+<div id="main" data-composition-id="my-video"
+     data-start="0" data-width="1920" data-height="1080">
+  <!-- clips -->
+</div>
+```
+
+Common sizes:
+- **Landscape**: `data-width="1920" data-height="1080"`
+- **Portrait**: `data-width="1080" data-height="1920"`
+
+## All Clip Attributes
+
+| Attribute | Applies To | Required | Description |
+|-----------|-----------|----------|-------------|
+| `id` | All | Yes | Unique identifier (e.g., `"el-1"`). Used for relative timing references and CSS targeting. |
+| `class="clip"` | Visible elements | Yes | Enables runtime visibility management. Omit for audio-only clips. |
+| `data-start` | All | Yes | Start time in seconds (e.g., `"0"`, `"5.5"`), or a clip ID reference for [relative timing](#relative-timing) (e.g., `"intro"`). |
+| `data-duration` | video, img, audio | See below | Duration in seconds. **Required** for images. Optional for video/audio (defaults to source duration). Not used on compositions. |
+| `data-track-index` | All | Yes | Timeline track number. Controls z-ordering (higher = in front). Clips on the same track cannot overlap. |
+| `data-media-start` | video, audio | No | Playback offset / trim point in source file (seconds). Default: `0`. See [Data Attributes](/concepts/data-attributes). |
+| `data-volume` | audio, video | No | Volume level from `0` to `1`. Default: `1`. |
+| `data-composition-id` | div | On compositions | Unique composition ID. Must match the key used in `window.__timelines`. |
+| `data-composition-src` | div | No | Path to external composition HTML file (for [nested compositions](#composition-clips)). |
+| `data-width` | div | On compositions | Composition width in pixels. |
+| `data-height` | div | On compositions | Composition height in pixels. |
+
+## Clip Types
+
+<AccordionGroup>
+  <Accordion title="Video Clips">
+    Video clips embed `<video>` elements with timing and playback attributes.
+
+    ```html
+    <video
+      id="el-1"
+      data-start="0"
+      data-duration="15"
+      data-track-index="0"
+      data-media-start="0"
+      src="./assets/video.mp4"
+    ></video>
+    ```
+
+    **Key behavior:**
+    - `data-duration` is **optional** — defaults to the remaining duration of the source file from `data-media-start`
+    - If source media runs out before `data-duration`, the clip shows the last frame (freeze frame)
+    - `data-media-start` trims the beginning of the source video — `data-media-start="5"` starts playback 5 seconds into the source file
+    - `data-volume` controls the audio volume of the video — set to `"0"` for silent video
+    - Do **not** add `class="clip"` to video elements — the framework manages their visibility directly
+
+    <Warning>
+      Do not animate `width`, `height`, `top`, or `left` directly on `<video>` elements with GSAP. This can cause Chrome to stop rendering video frames. Wrap the video in a `<div>` and animate the wrapper instead. See [Common Mistakes](/guides/common-mistakes).
+    </Warning>
+  </Accordion>
+
+  <Accordion title="Image Clips">
+    Image clips display static images with controlled timing.
+
+    ```html
+    <img
+      id="el-2"
+      class="clip"
+      data-start="5"
+      data-duration="4"
+      data-track-index="1"
+      src="./assets/overlay.png"
+    />
+    ```
+
+    **Key behavior:**
+    - `data-duration` is **required** for images (unlike video/audio, there is no source duration to default to)
+    - `class="clip"` is **required** — this enables the runtime to show/hide the image based on timing
+    - Supported formats: PNG, JPG, WebP, SVG, GIF (first frame only)
+    - Position and size with CSS — the image renders at its natural size unless styled otherwise
+  </Accordion>
+
+  <Accordion title="Audio Clips">
+    Audio clips add sound to the composition without any visual element.
+
+    ```html
+    <audio
+      id="el-4"
+      data-start="0"
+      data-duration="30"
+      data-track-index="2"
+      src="./assets/music.mp3"
+    ></audio>
+    ```
+
+    **Key behavior:**
+    - `data-duration` is **optional** — defaults to the remaining duration of the source file from `data-media-start`
+    - Audio clips are invisible — do not add `class="clip"` (there is nothing to show/hide)
+    - `data-volume` controls volume — use `"0.5"` for background music at 50% volume
+    - `data-media-start` trims the beginning of the audio source, just like video
+    - Multiple audio clips can overlap on different tracks for layered sound design
+  </Accordion>
+
+  <Accordion title="Composition Clips (Nested)">
+    Composition clips embed one composition inside another, enabling modular, reusable video building blocks.
+
+    ```html
+    <div
+      id="el-5"
+      data-composition-id="intro-anim"
+      data-composition-src="compositions/intro-anim.html"
+      data-start="0"
+      data-track-index="3"
+    ></div>
+    ```
+
+    **Key behavior:**
+    - Compositions do **not** use `data-duration` — duration is determined by the composition's GSAP timeline (`tl.duration()`)
+    - External compositions are loaded from `data-composition-src` and wrapped in `<template>` tags
+    - Each nested composition has its own `window.__timelines` entry, registered by its own `<script>` block
+    - The framework automatically nests sub-timelines — do not manually add them to the parent timeline
+    - Any composition can be nested inside any other — there is no special "root" type
+
+    For more on how compositions work, see [Compositions](/concepts/compositions).
+  </Accordion>
+</AccordionGroup>
+
+## Relative Timing
+
+Reference another clip's ID in `data-start` to mean "start when that clip ends":
+
+```html
+<video id="intro" data-start="0" data-duration="10" data-track-index="0" src="..."></video>
+<video id="main" data-start="intro" data-duration="20" data-track-index="0" src="..."></video>
+```
+
+`main` starts at second 10 (when `intro` ends).
+
+**Offsets** let you add gaps or overlaps:
+
+```html
+<!-- 2-second gap after intro -->
+<video id="main" data-start="intro + 2" data-duration="20" data-track-index="0" src="..."></video>
+
+<!-- 0.5-second overlap with intro -->
+<video id="main" data-start="intro - 0.5" data-duration="20" data-track-index="0" src="..."></video>
+```
+
+For a deeper explanation, see the [relative timing section](/concepts/data-attributes#relative-timing) in the Data Attributes concept page.
+
+## Timeline Contract
+
+The framework initializes `window.__timelines = {}` before any scripts run. Every composition must register a GSAP timeline at the key matching its `data-composition-id`:
+
+```javascript
+const tl = gsap.timeline({ paused: true });
+
+// Add animations
+tl.to("#title", { opacity: 1, duration: 0.5 }, 0);
+tl.to("#title", { opacity: 0, duration: 0.5 }, 4.5);
+
+// Register the timeline
+window.__timelines["<data-composition-id>"] = tl;
+```
+
+### Rules
+
+- Every composition needs a `<script>` block that creates and registers its timeline
+- All timelines must start paused (`{ paused: true }`)
+- The framework auto-nests sub-timelines into the parent — do **not** manually add them
+- Duration comes from `tl.duration()` — do **not** add `data-duration` on composition elements
+- Timelines must be finite (no infinite loops or repeats)
+- The timeline ID must exactly match the `data-composition-id` attribute on the root element
+
+For a complete guide to working with GSAP timelines, see [GSAP Animation](/guides/gsap-animation).
+
+## Caption Discoverability
+
+For caption compositions, add these attributes to the root node so the framework can identify and special-case caption rendering:
+
+```html
+<div
+  data-composition-id="captions"
+  data-timeline-role="captions"
+  data-caption-root="true"
+  ...
+>
+```
+
+## Output Checklist
+
+<Check>
+  Before rendering, verify your composition meets these requirements:
+
+  - Every composition has `data-width` and `data-height` on the root element
+  - Each reusable composition is in its own HTML file
+  - External compositions are loaded via `data-composition-src`
+  - Each external composition file uses a `<template>` wrapper
+  - All GSAP timelines are registered in `window.__timelines` with the correct ID
+  - Timed visible elements (images, divs) have `class="clip"`
+  - Video elements do **not** have `class="clip"` (framework manages them directly)
+  - All `data-start` references point to existing clip IDs
+  - Run `npx hyperframes lint` to catch structural issues automatically
+</Check>