From 00bd2e5ae28207407acf14a0c2aa8d17fbb667d1 Mon Sep 17 00:00:00 2001
From: James <james.russo@heygen.com>
Date: Mon, 23 Mar 2026 22:39:08 +0000
Subject: [PATCH 1/7] docs: add Mintlify documentation site

Set up /docs directory with docs.json config, HeyGen branding (logo, favicon,
#7559FF purple), and 18 MDX pages covering:
- Getting started (introduction, quickstart)
- Concepts (compositions, data attributes, frame adapters, determinism)
- Guides (GSAP animation, templates, rendering, common mistakes, troubleshooting)
- Package docs (core, engine, producer, studio, CLI)
- Reference (HTML schema) and contributing guide

Content adapted from existing repo docs (core/docs/, cli/src/docs/, README).
Validated with `mint validate` and `mint broken-links`.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 docs/concepts/compositions.mdx    | 107 ++++++++++++++++++
 docs/concepts/data-attributes.mdx |  79 ++++++++++++++
 docs/concepts/determinism.mdx     |  59 ++++++++++
 docs/concepts/frame-adapters.mdx  | 100 +++++++++++++++++
 docs/contributing.mdx             |  60 +++++++++++
 docs/docs.json                    |  80 ++++++++++++++
 docs/favicon.ico                  | Bin 0 -> 15406 bytes
 docs/guides/common-mistakes.mdx   |  65 +++++++++++
 docs/guides/gsap-animation.mdx    |  69 ++++++++++++
 docs/guides/rendering.mdx         |  54 ++++++++++
 docs/guides/templates.mdx         |  47 ++++++++
 docs/guides/troubleshooting.mdx   |  68 ++++++++++++
 docs/introduction.mdx             |  58 ++++++++++
 docs/logo/dark.svg                |   1 +
 docs/logo/icon.svg                |  62 +++++++++++
 docs/logo/light.svg               |  77 +++++++++++++
 docs/packages/cli.mdx             |  97 +++++++++++++++++
 docs/packages/core.mdx            |  58 ++++++++++
 docs/packages/engine.mdx          |  44 ++++++++
 docs/packages/producer.mdx        |  63 +++++++++++
 docs/packages/studio.mdx          |  40 +++++++
 docs/quickstart.mdx               |  84 +++++++++++++++
 docs/reference/html-schema.mdx    | 174 ++++++++++++++++++++++++++++++
 23 files changed, 1546 insertions(+)
 create mode 100644 docs/concepts/compositions.mdx
 create mode 100644 docs/concepts/data-attributes.mdx
 create mode 100644 docs/concepts/determinism.mdx
 create mode 100644 docs/concepts/frame-adapters.mdx
 create mode 100644 docs/contributing.mdx
 create mode 100644 docs/docs.json
 create mode 100644 docs/favicon.ico
 create mode 100644 docs/guides/common-mistakes.mdx
 create mode 100644 docs/guides/gsap-animation.mdx
 create mode 100644 docs/guides/rendering.mdx
 create mode 100644 docs/guides/templates.mdx
 create mode 100644 docs/guides/troubleshooting.mdx
 create mode 100644 docs/introduction.mdx
 create mode 100644 docs/logo/dark.svg
 create mode 100644 docs/logo/icon.svg
 create mode 100644 docs/logo/light.svg
 create mode 100644 docs/packages/cli.mdx
 create mode 100644 docs/packages/core.mdx
 create mode 100644 docs/packages/engine.mdx
 create mode 100644 docs/packages/producer.mdx
 create mode 100644 docs/packages/studio.mdx
 create mode 100644 docs/quickstart.mdx
 create mode 100644 docs/reference/html-schema.mdx

diff --git a/docs/concepts/compositions.mdx b/docs/concepts/compositions.mdx
new file mode 100644
index 000000000..5b1ce3def
--- /dev/null
+++ b/docs/concepts/compositions.mdx
@@ -0,0 +1,107 @@
+---
+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 — must live inside a composition.
+
+## Structure
+
+Every composition needs a root element with `data-composition-id`:
+
+```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:
+
+- `<video>` — Video clips, B-roll, A-roll
+- `<img>` — Static images, overlays
+- `<audio>` — Music, sound effects
+- `<div data-composition-id="...">` — Nested compositions (animations, grouped sequences)
+
+## Nested Compositions
+
+Embed one composition inside another by loading it from an external HTML file:
+
+```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>
+```
+
+The framework automatically fetches the HTML file, extracts the `<template>` content, mounts it, executes scripts, and registers the timeline.
+
+### Composition File Format
+
+Each 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>
+```
+
+### Project Structure
+
+```
+project/
+├── index.html              # Root composition
+├── compositions/
+│   ├── intro-anim.html     # Intro animation
+│   ├── caption-overlay.html # Captions
+│   └── outro-title.html     # Outro
+```
+
+## 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.
+- **Script** — effects, transitions, dynamic DOM, canvas, SVG — creative animation via GSAP. 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.
+</Warning>
+
+## Variables
+
+Compositions can expose variables for dynamic content:
+
+```html
+<div data-composition-id="card" data-var-title="string" data-var-color="color">
+```
+
+## Listing Compositions
+
+Use the CLI to see all compositions in a project:
+
+```bash
+npx hyperframes compositions
+```
diff --git a/docs/concepts/data-attributes.mdx b/docs/concepts/data-attributes.mdx
new file mode 100644
index 000000000..0a3d04c78
--- /dev/null
+++ b/docs/concepts/data-attributes.mdx
@@ -0,0 +1,79 @@
+---
+title: Data Attributes
+description: "Core attributes for controlling element timing and behavior."
+---
+
+Hyperframes uses HTML data attributes to control timing, media playback, and composition 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 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 HTML file |
+
+## Element Visibility
+
+Add `class="clip"` to all timed elements so the runtime can manage their visibility lifecycle:
+
+```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
+<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
+<!-- 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>
+
+### Rules
+
+- **Same composition only** — references resolve within the clip's parent composition
+- **No circular references** — A cannot start after B if B starts after A
+- **Referenced clip must have a known duration** — either explicit `data-duration` or inferred from source media
+- **Parsing** — if the value is a valid number, it is absolute seconds; otherwise parsed as `<id>`, `<id> + <number>`, or `<id> - <number>`
diff --git a/docs/concepts/determinism.mdx b/docs/concepts/determinism.mdx
new file mode 100644
index 000000000..4a4080e36
--- /dev/null
+++ b/docs/concepts/determinism.mdx
@@ -0,0 +1,59 @@
+---
+title: Deterministic Rendering
+description: "Same input, identical output. Every time."
+---
+
+Hyperframes is built around a core guarantee: **the same composition 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:
+
+1. **Frame clock**: `time = floor(frame) / fps` — no wall-clock dependency
+2. **Seek contract**: `renderSeek(time)` pauses all animations and deterministically seeks to the exact frame
+3. **Capture**: Chrome's `HeadlessExperimental.beginFrame` API captures the pixel buffer
+4. **Encode**: FFmpeg encodes frames into the final video
+
+No realtime playback is involved in rendering. Every frame is independently seeked and captured.
+
+## What Makes It Deterministic
+
+- **No wall-clock dependencies** — rendering doesn't 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 has a known, finite length
+
+## 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
+
+## 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 seek semantics are the source of truth
+- **Readiness gates** — `__playerReady` and `__renderReady` ensure the composition 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're 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`
diff --git a/docs/concepts/frame-adapters.mdx b/docs/concepts/frame-adapters.mdx
new file mode 100644
index 000000000..c56004fb2
--- /dev/null
+++ b/docs/concepts/frame-adapters.mdx
@@ -0,0 +1,100 @@
+---
+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.
+
+## Adapter API (v0)
+
+```typescript
+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
+normalizedFrame = clamp(Math.floor(frame), 0, durationFrames);
+```
+
+A typical render loop:
+
+```typescript
+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:
+
+- 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 | `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 don't break
+4. **Duration** — returned duration is a finite integer
+5. **Cleanup** — no leaked timers/listeners after `destroy`
+
+<Info>
+  The Adapter API is currently at **v0** (experimental). Breaking changes are possible until v1.
+</Info>
diff --git a/docs/contributing.mdx b/docs/contributing.mdx
new file mode 100644
index 000000000..61e0aeace
--- /dev/null
+++ b/docs/contributing.mdx
@@ -0,0 +1,60 @@
+---
+title: Contributing
+description: "How to contribute to Hyperframes."
+---
+
+Thanks for your interest in contributing to Hyperframes!
+
+## Getting Started
+
+1. Fork the repository
+2. Clone your fork: `git clone https://github.com/YOUR_USERNAME/hyperframes.git`
+3. Install dependencies: `pnpm install`
+4. Create a branch: `git checkout -b my-feature`
+
+## Development
+
+```bash
+pnpm install        # Install all dependencies
+pnpm dev            # Run the studio (composition editor)
+pnpm build          # Build all packages
+pnpm -r typecheck   # Type-check all packages
+```
+
+### Running Tests
+
+```bash
+pnpm --filter @hyperframes/core test          # Core unit tests
+pnpm --filter @hyperframes/engine test        # Engine unit tests
+pnpm --filter @hyperframes/core test:hyperframe-runtime-ci  # Runtime contract tests
+```
+
+## Packages
+
+| Package | Description |
+|---------|-------------|
+| `@hyperframes/core` | Types, HTML generation, runtime, linter |
+| `@hyperframes/engine` | Seekable page-to-video capture engine |
+| `@hyperframes/producer` | Full rendering pipeline (capture + encode) |
+| `@hyperframes/studio` | Composition editor UI |
+| `hyperframes` | CLI for creating, previewing, and rendering |
+
+## Pull Requests
+
+- Use [conventional commit](https://www.conventionalcommits.org/) format for PR titles (e.g., `feat: add timeline export`, `fix: resolve seek overflow`)
+- CI must pass before merge (build, typecheck, tests, semantic PR title)
+- PRs require at least 1 approval
+
+## 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
+- Include reproduction steps for bugs
+
+## Code of Conduct
+
+This project follows the [Contributor Covenant Code of Conduct](https://github.com/heygen-com/hyperframes/blob/main/CODE_OF_CONDUCT.md).
+
+## License
+
+By contributing, you agree that your contributions will be licensed under the [MIT License](https://github.com/heygen-com/hyperframes/blob/main/LICENSE).
diff --git a/docs/docs.json b/docs/docs.json
new file mode 100644
index 000000000..e887ad96c
--- /dev/null
+++ b/docs/docs.json
@@ -0,0 +1,80 @@
+{
+  "$schema": "https://mintlify.com/docs.json",
+  "name": "Hyperframes",
+  "theme": "mint",
+  "colors": {
+    "primary": "#7559FF",
+    "light": "#9F59FF",
+    "dark": "#735CE5"
+  },
+  "logo": {
+    "light": "/logo/light.svg",
+    "dark": "/logo/dark.svg"
+  },
+  "favicon": "/favicon.ico",
+  "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"
+    }
+  }
+}
diff --git a/docs/favicon.ico b/docs/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..f6b3b86a3bcc38bacbe512d3ffb7438018ef6f94
GIT binary patch
literal 15406
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
UQ0{u&x#YjbkpBnre|7}^2M-3l5C8xG

literal 0
HcmV?d00001

diff --git a/docs/guides/common-mistakes.mdx b/docs/guides/common-mistakes.mdx
new file mode 100644
index 000000000..778beaaa2
--- /dev/null
+++ b/docs/guides/common-mistakes.mdx
@@ -0,0 +1,65 @@
+---
+title: Common Mistakes
+description: "Pitfalls that break Hyperframes compositions."
+---
+
+These are mistakes that can't be caught by the linter. For automated checks, run `npx hyperframes lint`.
+
+## Animating Video Element Dimensions
+
+**Symptom**: Video frames stop updating, or browser performance drops.
+
+**Cause**: GSAP animating `width`, `height`, `top`, `left` directly on a `<video>` element can cause the browser to stop rendering frames.
+
+```javascript
+// BROKEN — animating video element dimensions
+tl.to("#el-video", { width: 500, height: 280, top: 700, left: 1400 }, 26);
+
+// FIXED — animate a wrapper div, 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.
+
+## Controlling Media Playback in Scripts
+
+**Symptom**: Audio/video playback is out of sync, or plays when it shouldn't.
+
+**Cause**: Calling `video.play()`, `video.pause()`, or setting `audio.currentTime` in your scripts. The framework owns all media playback.
+
+```javascript
+// BROKEN — conflicts with framework media sync
+document.getElementById("el-video").play();
+document.getElementById("el-audio").currentTime = 5;
+
+// FIXED — don't do this. The framework handles it.
+// Use GSAP for visual animations only:
+tl.to("#el-video", { opacity: 1, duration: 0.5 }, 0);
+```
+
+## 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, not `data-duration` on the video. If your last GSAP animation ends at 8 seconds, the composition is 8 seconds long.
+
+```javascript
+// BROKEN — timeline is only 7.8s long, video cuts off
+tl.to("#lower-third", { left: -640, duration: 0.6 }, 7.2);
+
+// FIXED — extend timeline to match video length
+tl.to("#lower-third", { left: -640, duration: 0.6 }, 7.2);
+tl.set({}, {}, 283); // extends timeline to 283 seconds
+```
+
+`tl.set({}, {}, TIME)` adds a zero-duration tween at the specified time, extending the timeline without affecting any elements.
+
+## Debugging Checklist
+
+When something doesn't 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`?
+3. **GSAP-only animations?** Only animate visual properties (opacity, transform, color)
+4. **Timeline long enough?** Add `tl.set({}, {}, DURATION)` at the end
+5. **Console errors?** Open browser console — runtime errors show as `[Browser:ERROR]`
diff --git a/docs/guides/gsap-animation.mdx b/docs/guides/gsap-animation.mdx
new file mode 100644
index 000000000..7c24782af
--- /dev/null
+++ b/docs/guides/gsap-animation.mdx
@@ -0,0 +1,69 @@
+---
+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.
+
+## Setup
+
+Include GSAP and create a paused timeline:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
+<script>
+  const tl = gsap.timeline({ paused: true });
+  tl.to("#title", { opacity: 1, duration: 0.5 }, 0);
+  window.__timelines = window.__timelines || {};
+  window.__timelines["root"] = tl;
+</script>
+```
+
+## Key Rules
+
+1. **Always create timelines with `{ paused: true }`** — the framework controls playback
+2. **Register timelines on `window.__timelines`** with the `data-composition-id` 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
+
+A composition's duration equals its GSAP timeline duration. If your last animation ends at 8 seconds, the composition is 8 seconds long.
+
+To extend the timeline beyond the last animation (e.g., to match a video clip's length):
+
+```javascript
+// Extends timeline to 283 seconds without affecting any elements
+tl.set({}, {}, 283);
+```
+
+## Sub-Composition Timelines
+
+Each composition registers its own timeline. The framework automatically nests sub-composition timelines into the parent based on `data-start`:
+
+```javascript
+// 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.
+</Warning>
diff --git a/docs/guides/rendering.mdx b/docs/guides/rendering.mdx
new file mode 100644
index 000000000..c7e4a72f8
--- /dev/null
+++ b/docs/guides/rendering.mdx
@@ -0,0 +1,54 @@
+---
+title: Rendering
+description: "Render compositions to MP4 locally or in Docker."
+---
+
+Render your Hyperframes compositions to MP4 with the CLI.
+
+```bash
+npx hyperframes render -o output.mp4
+```
+
+## Rendering Modes
+
+### Local Mode (default)
+
+Uses Puppeteer (bundled Chromium) + system FFmpeg. Fast for iteration.
+
+**Requires**: FFmpeg installed on your system.
+
+```bash
+npx hyperframes render -o output.mp4
+```
+
+### Docker Mode
+
+Deterministic output with an exact Chrome version and fonts. Use this for production renders and CI pipelines.
+
+**Requires**: Docker installed and running.
+
+```bash
+npx hyperframes render --docker -o output.mp4
+```
+
+<Note>
+  Docker mode uses `chrome-headless-shell` with BeginFrame control for frame-perfect, deterministic capture. This is the same pipeline used in production.
+</Note>
+
+## 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 |
+
+## Tips
+
+- Use `draft` quality during development for fast previews
+- 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 across platforms
diff --git a/docs/guides/templates.mdx b/docs/guides/templates.mdx
new file mode 100644
index 000000000..9fc8dd049
--- /dev/null
+++ b/docs/guides/templates.mdx
@@ -0,0 +1,47 @@
+---
+title: Templates
+description: "Built-in templates for common video patterns."
+---
+
+Hyperframes includes starter templates to help you get going quickly.
+
+## Using Templates
+
+```bash
+npx hyperframes init --template <name>
+```
+
+## Available Templates
+
+### blank
+
+Empty 1920x1080 composition with a GSAP timeline wired up. Start from scratch.
+
+```bash
+npx hyperframes init --template blank
+```
+
+### title-card
+
+Animated title and subtitle with GSAP fade-in/out. Good for intro cards.
+
+```bash
+npx hyperframes init --template title-card
+```
+
+### video-edit
+
+Video element with trimming, audio, and track controls. Starting point for video editing workflows.
+
+```bash
+npx hyperframes init --template video-edit
+```
+
+## Custom Templates
+
+Any directory with an `index.html` can serve as a template. Copy it manually or build your own init workflow.
+
+Your custom template just needs:
+1. An `index.html` with a `data-composition-id` root element
+2. A GSAP timeline registered in `window.__timelines`
+3. Any assets in the same directory
diff --git a/docs/guides/troubleshooting.mdx b/docs/guides/troubleshooting.mdx
new file mode 100644
index 000000000..b9a1c6fdd
--- /dev/null
+++ b/docs/guides/troubleshooting.mdx
@@ -0,0 +1,68 @@
+---
+title: Troubleshooting
+description: "Solutions for common Hyperframes issues."
+---
+
+## "No composition found"
+
+Your directory needs an `index.html` with a valid composition. Run `npx hyperframes init` to create one.
+
+## "FFmpeg not found"
+
+Local rendering requires FFmpeg. 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 to your PATH
+```
+</CodeGroup>
+
+## Lint Errors
+
+Run `npx hyperframes lint` to check for common issues:
+
+- Missing `data-composition-id` on root element
+- Missing `class="clip"` on timed elements
+- Overlapping timelines or invalid data attributes
+- Unmuted video elements
+- Deprecated attribute names (`data-layer`, `data-end`)
+
+## Preview Not Updating
+
+Make sure you're editing the `index.html` in the project directory. The preview server watches for file changes and auto-reloads.
+
+If changes still don't appear:
+1. Check the terminal for errors
+2. Try stopping and restarting `npx hyperframes dev`
+3. Hard-refresh the browser (Ctrl+Shift+R / Cmd+Shift+R)
+
+## Render Looks Different from Preview
+
+Use `--docker` mode for deterministic output. Local renders may differ due to:
+
+- Font availability (different fonts on different platforms)
+- Chrome version (local Chromium vs. Docker's pinned version)
+- System-specific rendering differences
+
+```bash
+npx hyperframes render --docker -o output.mp4
+```
+
+## System Diagnostics
+
+Run `npx hyperframes doctor` to check your environment:
+
+```bash
+npx hyperframes doctor
+```
+
+This checks for Node.js version, FFmpeg availability, Docker status, and other requirements.
diff --git a/docs/introduction.mdx b/docs/introduction.mdx
new file mode 100644
index 000000000..d7467d7aa
--- /dev/null
+++ b/docs/introduction.mdx
@@ -0,0 +1,58 @@
+---
+title: Introduction
+description: "Write HTML. Render video. Built for agents."
+---
+
+Hyperframes is an open-source video rendering framework that lets you create, preview, and render HTML-based video compositions — with first-class support for AI agents.
+
+## Why Hyperframes?
+
+- **HTML-native** — AI agents already speak HTML. No React required.
+- **Frame Adapter pattern** — bring your own animation runtime (GSAP, Lottie, CSS, Three.js).
+- **Deterministic rendering** — same input = identical output. Built for automated pipelines.
+- **AI-first design** — not a bolted-on afterthought.
+
+## How It Works
+
+Define your video as HTML with data attributes:
+
+```html
+<div id="stage" data-composition-id="my-video"
+     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>
+  <img id="overlay" data-start="2" data-duration="3"
+       data-track-index="1" src="logo.png" />
+  <audio id="bg-music" data-start="0" data-duration="9"
+         data-track-index="2" data-volume="0.5" src="music.wav"></audio>
+</div>
+```
+
+Preview instantly in the browser. Render to MP4 locally. Let AI agents compose videos using tools they already understand.
+
+## Packages
+
+| Package | npm | Description |
+|---------|-----|-------------|
+| [`@hyperframes/core`](/packages/core) | `@hyperframes/core` | Types, HTML generation, runtime, linter |
+| [`@hyperframes/engine`](/packages/engine) | `@hyperframes/engine` | Seekable page-to-video capture engine |
+| [`@hyperframes/producer`](/packages/producer) | `@hyperframes/producer` | Full rendering pipeline (capture + encode) |
+| [`@hyperframes/studio`](/packages/studio) | `@hyperframes/studio` | Composition editor UI |
+| [`hyperframes`](/packages/cli) | `hyperframes` | CLI for creating, previewing, and rendering |
+
+## Next Steps
+
+<CardGroup cols={2}>
+  <Card title="Quickstart" icon="rocket" href="/quickstart">
+    Create your first video in 60 seconds
+  </Card>
+  <Card title="Compositions" icon="layer-group" href="/concepts/compositions">
+    Learn the core data model
+  </Card>
+  <Card title="GSAP Animation" icon="wand-magic-sparkles" href="/guides/gsap-animation">
+    Add animations to your videos
+  </Card>
+  <Card title="Rendering" icon="film" href="/guides/rendering">
+    Render to MP4 locally or in Docker
+  </Card>
+</CardGroup>
diff --git a/docs/logo/dark.svg b/docs/logo/dark.svg
new file mode 100644
index 000000000..a1e976ba9
--- /dev/null
+++ b/docs/logo/dark.svg
@@ -0,0 +1 @@
+<svg width="2122" height="695" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="prefix__a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="60" y="41" width="588" height="556"><path d="M229.788 509.08c-5.026-2.455-7.729.722-7.729 8.439 0 7.717.294 35.453 6.306 47.25a57.88 57.88 0 0025.293 25.293c9.463 4.821 21.161 5.957 40.623 6.225 53.598-2.39 100.504-30.509 128.665-72.305 2.5-3.711-.25-8.557-4.725-8.557H290.276c-17.766 0-44.453 1.487-60.488-6.345zM207.75 270.45c0-7.896-10.44-10.725-14.387-3.886a781644.405 781644.405 0 01-49.776 86.209c-40.45 70.047-26.516 163.98 51.459 216.834 9.646 6.539 17.363-3.858 15.491-12.001-3.981-16.646-2.787-35.128-2.787-52.213V270.45zM518.215 343.856c.387 5.58 4.49 6.333 11.173 2.474 6.684-3.858 30.556-17.981 37.767-29.086a57.878 57.878 0 009.258-34.551c-.556-10.606-5.421-21.305-14.92-38.293-28.869-45.223-76.674-71.785-126.951-75.274-4.464-.31-7.286 4.494-5.048 8.369L493.467 288.3c8.882 15.385 23.514 37.753 24.748 55.556zM322.572 482.254c-6.838 3.948-4.068 14.403 3.828 14.403 20.774-.001 53.356-.002 99.547.002 80.888.007 155.269-59.027 162.055-152.982.839-11.623-12.023-13.108-18.139-7.415-12.425 11.77-29.028 19.978-43.824 28.52L322.572 482.254zM234.794 178.177c4.638-3.124 3.239-7.054-3.444-10.913-6.683-3.858-30.851-17.471-44.073-18.163a57.881 57.881 0 00-34.551 9.257c-8.907 5.785-15.74 15.348-25.703 32.068-24.729 47.613-23.83 102.294-1.714 147.58 1.964 4.021 7.535 4.062 9.773.187l63.972-110.804c8.883-15.386 20.939-39.241 35.74-49.212zM452.475 278.411c6.838 3.948 14.507-3.678 10.559-10.516-10.388-17.99-26.679-46.207-49.771-86.212-40.438-70.054-128.753-104.953-213.514-63.852-10.486 5.084-5.34 16.966 2.648 19.416 16.406 4.876 31.815 15.15 46.611 23.693l203.467 117.471z" fill="#D9D9D9"/></mask><g mask="url(#prefix__a)"><path fill="#28A7E5" d="M71.574 75.727h555.617v547.9H71.574z"/><g filter="url(#prefix__filter0_f_473_94388)"><circle cx="783.94" cy="429.003" r="525.682" fill="#9F59FF"/></g><g filter="url(#prefix__filter1_f_473_94388)"><circle cx="774.928" cy="208.218" r="230.8" fill="#FF2FC5"/></g><g filter="url(#prefix__filter2_f_473_94388)"><circle cx="-46.128" cy="650.8" r="289.384" fill="#42C7F1"/></g></g><g style="mix-blend-mode:overlay" opacity=".6"><path d="M207.769 481.351v-210.91c0-7.896-10.452-10.696-14.4-3.859l-53.111 91.991 67.511 122.778z" fill="url(#prefix__paint0_linear_473_94388)"/><path d="M505.477 376.684L322.823 482.14c-6.838 3.947-4.037 14.4 3.858 14.4h106.222l72.574-119.856z" fill="url(#prefix__paint1_linear_473_94388)"/><path d="M269.704 172.775L452.358 278.23c6.837 3.948 14.489-3.704 10.541-10.541l-53.111-91.991-140.084-2.923z" fill="url(#prefix__paint2_linear_473_94388)"/></g><rect x="750.836" y="233.035" width="50.876" height="232.957" rx="8.926" fill="#fff"/><rect x="908.816" y="233.035" width="50.876" height="232.957" rx="8.926" fill="#fff"/><rect x="948.09" y="325.861" width="42.843" height="191.899" rx="8.926" transform="rotate(90 948.09 325.861)" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M1180.16 300.625c0 .767.17 1.524.5 2.215l74.08 153.977a7.141 7.141 0 009.53 3.338l28.96-13.931c3.55-1.71 5.05-5.976 3.34-9.53l-65.98-137.134a7.142 7.142 0 00-6.44-4.044h-38.88a5.104 5.104 0 00-5.11 5.109z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M1325.98 295.516a7.127 7.127 0 00-6.56 4.337l-69.52 162.868a51.763 51.763 0 01-36.07 30.144l-6.89 1.575a7.136 7.136 0 00-5.37 8.552l7.16 31.324a7.14 7.14 0 008.55 5.369l6.89-1.575a98.19 98.19 0 0068.42-57.17l74.9-175.481c2.01-4.71-1.45-9.943-6.57-9.943h-34.94zM1592.51 246.616c0-2.865-1.7-5.465-4.37-6.507-19.2-7.502-43.75-12.882-76.4-12.88-33.54.001-63.79 11.942-85.52 35.207-21.62 23.16-32.91 55.484-32.75 92.973.31 70.559 54.81 116.829 115.04 115.93 44.56-.665 66.84-9.611 79.35-16.372 10.15-5.483 15.81-15.96 15.81-26.624v-71.516c0-12.915-10.47-23.385-23.38-23.385h-64.98a7.136 7.136 0 00-7.14 7.141v32.132c0 3.943 3.19 7.14 7.14 7.14h34.81c3.94 0 7.14 3.197 7.14 7.14v25.902c0 3.017-1.89 5.731-4.79 6.569-9.12 2.636-23.18 5.145-44.65 5.466-35.45.529-67.75-26.021-67.93-69.722-.12-28.107 8.23-48.219 20.26-61.097 11.92-12.773 29.34-20.471 51.59-20.472 30.65-.001 50.65 5.61 64.46 11.767 1.75.779 3.39 1.554 4.93 2.326 5.06 2.531 11.38-.94 11.38-6.6v-34.518z" fill="#fff"/><rect x="1834.4" y="288.375" width="50.876" height="177.618" rx="8.926" fill="#fff"/><rect x="1948.64" y="426.721" width="46.413" height="39.272" rx="8.926" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M1862.75 351.384a5.36 5.36 0 01-1.58-3.798l3.57-14.047c0-1.714-13.41 11.546 2.22-4.313 15.64-15.859 33.93-34.157 61.83-34.603 35.28 0 66.27 20.083 66.27 58.81v97.319c0 .037-.03.068-.07.068h-46.28a.069.069 0 01-.07-.068V354.326c0-11.316-10.71-19.538-27.66-19.538-16.96 0-30.31 7.017-44.86 20.556-2.16 2.015-5.55 2.032-7.64-.054l-5.73-3.906zM1088.55 288.375c-26.99 0-50.02 9.123-66.2 26.31-16 16.987-23.385 39.795-23.385 63.792 0 22.378 4.885 46.256 20.575 64.782 16.26 19.193 40.95 28.982 72.64 28.982 26.85 0 51.31-7.601 70.74-16.448a3.534 3.534 0 002.06-3.222v-39.972c0-2.794-3.07-4.519-5.49-3.136-16.86 9.601-41.12 19.936-67.31 19.936-22.7 0-33.91-6.695-39.95-13.829-4.79-5.653-8.11-13.663-9.58-24.113h84.69l.12.002h35.71c1.97 0 3.57-1.597 3.54-3.568-.28-17.172-2.67-39.756-12.31-59.157-5.31-10.697-13.13-21.024-24.51-28.628-11.52-7.692-25.4-11.731-41.34-11.731zm32.59 74.52c-1.22-5.491-2.88-10.624-5.11-15.099-2.78-5.597-6.11-9.505-9.94-12.062-3.69-2.469-9.09-4.516-17.54-4.516-17.07 0-28.13 5.529-35.01 12.837-4.44 4.711-7.92 11.006-9.91 18.84h77.51zM1723.16 288.375c-27 0-50.02 9.123-66.21 26.31-15.99 16.987-23.38 39.795-23.38 63.792 0 22.378 4.88 46.256 20.58 64.782 16.25 19.193 40.94 28.982 72.64 28.982 26.85 0 51.31-7.601 70.74-16.448a3.534 3.534 0 002.06-3.222v-39.972c0-2.794-3.07-4.519-5.5-3.136-16.85 9.601-41.11 19.936-67.3 19.936-22.7 0-33.91-6.695-39.95-13.829-4.79-5.653-8.11-13.663-9.58-24.113h84.68l.13.002h35.7c1.97 0 3.58-1.598 3.53-3.57-.4-17.942-3.91-40.436-14.04-59.62-11.36-21.536-31.95-39.894-64.1-39.894zm31.77 74.52c-1.4-5.258-3.24-10.24-5.56-14.634-5.83-11.054-13.62-17.043-26.21-17.043-17.07 0-28.13 5.529-35.02 12.837-4.43 4.711-7.92 11.006-9.9 18.84h76.69z" fill="#fff"/><defs><linearGradient id="prefix__paint0_linear_473_94388" x1="170.247" y1="241.641" x2="170.247" y2="480.866" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="prefix__paint1_linear_473_94388" x1="316.643" y1="529.035" x2="523.818" y2="409.422" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="prefix__paint2_linear_473_94388" x1="496.06" y1="260.135" x2="288.885" y2="140.522" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><filter id="prefix__filter0_f_473_94388" x="-204.756" y="-559.694" width="1977.39" height="1977.39" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="231.507" result="effect1_foregroundBlur_473_94388"/></filter><filter id="prefix__filter1_f_473_94388" x="383.921" y="-182.79" width="782.014" height="782.016" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="80.104" result="effect1_foregroundBlur_473_94388"/></filter><filter id="prefix__filter2_f_473_94388" x="-527.261" y="169.667" width="962.263" height="962.265" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="95.874" result="effect1_foregroundBlur_473_94388"/></filter></defs></svg>
diff --git a/docs/logo/icon.svg b/docs/logo/icon.svg
new file mode 100644
index 000000000..ab6f785c3
--- /dev/null
+++ b/docs/logo/icon.svg
@@ -0,0 +1,62 @@
+<svg width="640" height="640" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <mask id="prefix__a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="37" y="12" width="588" height="556">
+        <path
+            d="M206.788 480.08c-5.026-2.455-7.729.722-7.729 8.439 0 7.717.294 35.453 6.306 47.25a57.88 57.88 0 0025.293 25.293c9.463 4.821 21.161 5.957 40.623 6.225 53.598-2.39 100.504-30.509 128.665-72.305 2.5-3.711-.25-8.557-4.725-8.557H267.276c-17.766 0-44.453 1.487-60.488-6.345zM184.75 241.45c0-7.896-10.44-10.725-14.387-3.886a781644.405 781644.405 0 01-49.776 86.209c-40.45 70.047-26.516 163.98 51.459 216.834 9.646 6.539 17.363-3.858 15.491-12.001-3.981-16.646-2.787-35.128-2.787-52.213V241.45zM495.215 314.856c.387 5.58 4.49 6.333 11.173 2.474 6.684-3.858 30.556-17.981 37.767-29.086a57.878 57.878 0 009.258-34.551c-.556-10.606-5.421-21.305-14.92-38.293-28.869-45.223-76.674-71.785-126.951-75.274-4.464-.31-7.286 4.494-5.048 8.369L470.467 259.3c8.882 15.385 23.514 37.753 24.748 55.556zM299.572 453.254c-6.838 3.948-4.068 14.403 3.828 14.403 20.774-.001 53.356-.002 99.547.002 80.888.007 155.269-59.027 162.055-152.982.839-11.623-12.023-13.108-18.139-7.415-12.425 11.77-29.028 19.978-43.824 28.52L299.572 453.254zM211.794 149.177c4.638-3.124 3.239-7.054-3.444-10.913-6.683-3.858-30.851-17.471-44.073-18.163a57.881 57.881 0 00-34.551 9.257c-8.907 5.785-15.74 15.348-25.703 32.068-24.73 47.613-23.83 102.294-1.714 147.58 1.964 4.021 7.535 4.062 9.773.187l63.972-110.804c8.883-15.386 20.939-39.241 35.74-49.212zM429.475 249.411c6.838 3.948 14.507-3.678 10.559-10.516-10.388-17.99-26.679-46.207-49.771-86.212C349.825 82.629 261.51 47.73 176.749 88.831c-10.486 5.084-5.34 16.966 2.648 19.416 16.406 4.876 31.815 15.15 46.611 23.693l203.467 117.471z"
+            fill="#D9D9D9" />
+    </mask>
+    <g mask="url(#prefix__a)">
+        <path fill="#28A7E5" d="M48.574 46.727h555.617v547.9H48.574z" />
+        <g filter="url(#prefix__filter0_f_477_98045)">
+            <circle cx="760.94" cy="400.003" r="525.682" fill="#9F59FF" />
+        </g>
+        <g filter="url(#prefix__filter1_f_477_98045)">
+            <circle cx="751.928" cy="179.218" r="230.8" fill="#FF2FC5" />
+        </g>
+        <g filter="url(#prefix__filter2_f_477_98045)">
+            <circle cx="-69.128" cy="621.8" r="289.384" fill="#42C7F1" />
+        </g>
+    </g>
+    <g style="mix-blend-mode:overlay" opacity=".6">
+        <path d="M184.769 452.351v-210.91c0-7.896-10.452-10.696-14.4-3.859l-53.111 91.991 67.511 122.778z"
+            fill="url(#prefix__paint0_linear_477_98045)" />
+        <path d="M482.477 347.684L299.823 453.14c-6.838 3.947-4.037 14.4 3.858 14.4h106.222l72.574-119.856z"
+            fill="url(#prefix__paint1_linear_477_98045)" />
+        <path d="M246.704 143.775L429.358 249.23c6.837 3.948 14.489-3.704 10.541-10.541l-53.111-91.991-140.084-2.923z"
+            fill="url(#prefix__paint2_linear_477_98045)" />
+    </g>
+    <defs>
+        <linearGradient id="prefix__paint0_linear_477_98045" x1="147.247" y1="212.641" x2="147.247" y2="451.866"
+            gradientUnits="userSpaceOnUse">
+            <stop stop-color="#fff" />
+            <stop offset="1" stop-color="#fff" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="prefix__paint1_linear_477_98045" x1="293.643" y1="500.035" x2="500.818" y2="380.422"
+            gradientUnits="userSpaceOnUse">
+            <stop stop-color="#fff" />
+            <stop offset="1" stop-color="#fff" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="prefix__paint2_linear_477_98045" x1="473.06" y1="231.135" x2="265.885" y2="111.522"
+            gradientUnits="userSpaceOnUse">
+            <stop stop-color="#fff" />
+            <stop offset="1" stop-color="#fff" stop-opacity="0" />
+        </linearGradient>
+        <filter id="prefix__filter0_f_477_98045" x="-227.756" y="-588.694" width="1977.39" height="1977.39"
+            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <feGaussianBlur stdDeviation="231.507" result="effect1_foregroundBlur_477_98045" />
+        </filter>
+        <filter id="prefix__filter1_f_477_98045" x="360.921" y="-211.79" width="782.014" height="782.016"
+            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <feGaussianBlur stdDeviation="80.104" result="effect1_foregroundBlur_477_98045" />
+        </filter>
+        <filter id="prefix__filter2_f_477_98045" x="-550.261" y="140.667" width="962.263" height="962.265"
+            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <feGaussianBlur stdDeviation="95.874" result="effect1_foregroundBlur_477_98045" />
+        </filter>
+    </defs>
+</svg>
\ No newline at end of file
diff --git a/docs/logo/light.svg b/docs/logo/light.svg
new file mode 100644
index 000000000..9883738e8
--- /dev/null
+++ b/docs/logo/light.svg
@@ -0,0 +1,77 @@
+<svg width="2122" height="695" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <mask id="prefix__a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="60" y="41" width="588" height="556">
+        <path
+            d="M229.788 509.08c-5.026-2.455-7.729.722-7.729 8.439 0 7.717.294 35.453 6.306 47.25a57.88 57.88 0 0025.293 25.293c9.463 4.821 21.161 5.957 40.623 6.225 53.598-2.39 100.504-30.509 128.665-72.305 2.5-3.711-.25-8.557-4.725-8.557H290.276c-17.766 0-44.453 1.487-60.488-6.345zM207.75 270.45c0-7.896-10.44-10.725-14.387-3.886a781644.405 781644.405 0 01-49.776 86.209c-40.45 70.047-26.516 163.98 51.459 216.834 9.646 6.539 17.363-3.858 15.491-12.001-3.981-16.646-2.787-35.128-2.787-52.213V270.45zM518.215 343.856c.387 5.58 4.49 6.333 11.173 2.474 6.684-3.858 30.556-17.981 37.767-29.086a57.878 57.878 0 009.258-34.551c-.556-10.606-5.421-21.305-14.92-38.293-28.869-45.223-76.674-71.785-126.951-75.274-4.464-.31-7.286 4.494-5.048 8.369L493.467 288.3c8.882 15.385 23.514 37.753 24.748 55.556zM322.572 482.254c-6.838 3.948-4.068 14.403 3.828 14.403 20.774-.001 53.356-.002 99.547.002 80.888.007 155.269-59.027 162.055-152.982.839-11.623-12.023-13.108-18.139-7.415-12.425 11.77-29.028 19.978-43.824 28.52L322.572 482.254zM234.794 178.177c4.638-3.124 3.239-7.054-3.444-10.913-6.683-3.858-30.851-17.471-44.073-18.163a57.881 57.881 0 00-34.551 9.257c-8.907 5.785-15.74 15.348-25.703 32.068-24.729 47.613-23.83 102.294-1.714 147.58 1.964 4.021 7.535 4.062 9.773.187l63.972-110.804c8.883-15.386 20.939-39.241 35.74-49.212zM452.475 278.411c6.838 3.948 14.507-3.678 10.559-10.516-10.388-17.99-26.679-46.207-49.771-86.212-40.438-70.054-128.753-104.953-213.514-63.852-10.486 5.084-5.34 16.966 2.648 19.416 16.406 4.876 31.815 15.15 46.611 23.693l203.467 117.471z"
+            fill="#D9D9D9" />
+    </mask>
+    <g mask="url(#prefix__a)">
+        <path fill="#28A7E5" d="M71.574 75.727h555.617v547.9H71.574z" />
+        <g filter="url(#prefix__filter0_f_473_94381)">
+            <circle cx="783.94" cy="429.003" r="525.682" fill="#9F59FF" />
+        </g>
+        <g filter="url(#prefix__filter1_f_473_94381)">
+            <circle cx="774.928" cy="208.218" r="230.8" fill="#FF2FC5" />
+        </g>
+        <g filter="url(#prefix__filter2_f_473_94381)">
+            <circle cx="-46.128" cy="650.8" r="289.384" fill="#42C7F1" />
+        </g>
+    </g>
+    <g style="mix-blend-mode:overlay" opacity=".6">
+        <path d="M207.769 481.351v-210.91c0-7.896-10.452-10.696-14.4-3.859l-53.111 91.991 67.511 122.778z"
+            fill="url(#prefix__paint0_linear_473_94381)" />
+        <path d="M505.477 376.684L322.823 482.14c-6.838 3.947-4.037 14.4 3.858 14.4h106.222l72.574-119.856z"
+            fill="url(#prefix__paint1_linear_473_94381)" />
+        <path d="M269.704 172.775L452.358 278.23c6.837 3.948 14.489-3.704 10.541-10.541l-53.111-91.991-140.084-2.923z"
+            fill="url(#prefix__paint2_linear_473_94381)" />
+    </g>
+    <rect x="750.836" y="233.035" width="50.876" height="232.957" rx="8.926" fill="#232833" />
+    <rect x="908.816" y="233.035" width="50.876" height="232.957" rx="8.926" fill="#232833" />
+    <rect x="948.09" y="325.861" width="42.843" height="191.899" rx="8.926" transform="rotate(90 948.09 325.861)"
+        fill="#232833" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M1180.16 300.625c0 .767.17 1.524.5 2.215l74.08 153.977a7.141 7.141 0 009.53 3.338l28.96-13.931c3.55-1.71 5.05-5.976 3.34-9.53l-65.98-137.134a7.142 7.142 0 00-6.44-4.044h-38.88a5.104 5.104 0 00-5.11 5.109z"
+        fill="#232833" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M1325.98 295.516a7.127 7.127 0 00-6.56 4.337l-69.52 162.868a51.763 51.763 0 01-36.07 30.144l-6.89 1.575a7.136 7.136 0 00-5.37 8.552l7.16 31.324a7.14 7.14 0 008.55 5.369l6.89-1.575a98.19 98.19 0 0068.42-57.17l74.9-175.481c2.01-4.71-1.45-9.943-6.57-9.943h-34.94zM1592.51 246.616c0-2.865-1.7-5.465-4.37-6.507-19.2-7.502-43.75-12.882-76.4-12.88-33.54.001-63.79 11.942-85.52 35.207-21.62 23.16-32.91 55.484-32.75 92.973.31 70.559 54.81 116.829 115.04 115.93 44.56-.665 66.84-9.611 79.35-16.372 10.15-5.483 15.81-15.96 15.81-26.624v-71.516c0-12.915-10.47-23.385-23.38-23.385h-64.98a7.136 7.136 0 00-7.14 7.141v32.132c0 3.943 3.19 7.14 7.14 7.14h34.81c3.94 0 7.14 3.197 7.14 7.14v25.902c0 3.017-1.89 5.731-4.79 6.569-9.12 2.636-23.18 5.145-44.65 5.466-35.45.529-67.75-26.021-67.93-69.722-.12-28.107 8.23-48.219 20.26-61.097 11.92-12.773 29.34-20.471 51.59-20.472 30.65-.001 50.65 5.61 64.46 11.767 1.75.779 3.39 1.554 4.93 2.326 5.06 2.531 11.38-.94 11.38-6.6v-34.518z"
+        fill="#232833" />
+    <rect x="1834.4" y="288.375" width="50.876" height="177.618" rx="8.926" fill="#232833" />
+    <rect x="1948.64" y="426.721" width="46.413" height="39.272" rx="8.926" fill="#232833" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M1862.75 351.384a5.36 5.36 0 01-1.58-3.798l3.57-14.047c0-1.714-13.41 11.546 2.22-4.313 15.64-15.859 33.93-34.157 61.83-34.603 35.28 0 66.27 20.083 66.27 58.81v97.319c0 .037-.03.068-.07.068h-46.28a.069.069 0 01-.07-.068V354.326c0-11.316-10.71-19.538-27.66-19.538-16.96 0-30.31 7.017-44.86 20.556-2.16 2.015-5.55 2.032-7.64-.054l-5.73-3.906zM1088.55 288.375c-26.99 0-50.02 9.123-66.2 26.31-16 16.987-23.385 39.795-23.385 63.792 0 22.378 4.885 46.256 20.575 64.782 16.26 19.193 40.95 28.982 72.64 28.982 26.85 0 51.31-7.601 70.74-16.448a3.534 3.534 0 002.06-3.222v-39.972c0-2.794-3.07-4.519-5.49-3.136-16.86 9.601-41.12 19.936-67.31 19.936-22.7 0-33.91-6.695-39.95-13.829-4.79-5.653-8.11-13.663-9.58-24.113h84.69l.12.002h35.71c1.97 0 3.57-1.597 3.54-3.568-.28-17.172-2.67-39.756-12.31-59.157-5.31-10.697-13.13-21.024-24.51-28.628-11.52-7.692-25.4-11.731-41.34-11.731zm32.59 74.52c-1.22-5.491-2.88-10.624-5.11-15.099-2.78-5.597-6.11-9.505-9.94-12.062-3.69-2.469-9.09-4.516-17.54-4.516-17.07 0-28.13 5.529-35.01 12.838-4.44 4.71-7.92 11.005-9.91 18.839h77.51zM1723.16 288.375c-27 0-50.02 9.123-66.21 26.31-15.99 16.987-23.38 39.795-23.38 63.792 0 22.378 4.88 46.256 20.58 64.782 16.25 19.193 40.94 28.982 72.64 28.982 26.85 0 51.31-7.601 70.74-16.448a3.534 3.534 0 002.06-3.222v-39.972c0-2.794-3.07-4.519-5.5-3.136-16.85 9.601-41.11 19.936-67.3 19.936-22.7 0-33.91-6.695-39.95-13.829-4.79-5.653-8.11-13.663-9.58-24.113h84.68l.13.002h35.7c1.97 0 3.58-1.598 3.53-3.57-.4-17.942-3.91-40.436-14.04-59.62-11.36-21.536-31.95-39.894-64.1-39.894zm31.77 74.52c-1.4-5.258-3.24-10.24-5.56-14.634-5.83-11.054-13.62-17.043-26.21-17.043-17.07 0-28.13 5.529-35.02 12.838-4.43 4.71-7.92 11.005-9.9 18.839h76.69z"
+        fill="#232833" />
+    <defs>
+        <linearGradient id="prefix__paint0_linear_473_94381" x1="170.247" y1="241.641" x2="170.247" y2="480.866"
+            gradientUnits="userSpaceOnUse">
+            <stop stop-color="#fff" />
+            <stop offset="1" stop-color="#fff" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="prefix__paint1_linear_473_94381" x1="316.643" y1="529.035" x2="523.818" y2="409.422"
+            gradientUnits="userSpaceOnUse">
+            <stop stop-color="#fff" />
+            <stop offset="1" stop-color="#fff" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="prefix__paint2_linear_473_94381" x1="496.06" y1="260.135" x2="288.885" y2="140.522"
+            gradientUnits="userSpaceOnUse">
+            <stop stop-color="#fff" />
+            <stop offset="1" stop-color="#fff" stop-opacity="0" />
+        </linearGradient>
+        <filter id="prefix__filter0_f_473_94381" x="-204.756" y="-559.694" width="1977.39" height="1977.39"
+            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <feGaussianBlur stdDeviation="231.507" result="effect1_foregroundBlur_473_94381" />
+        </filter>
+        <filter id="prefix__filter1_f_473_94381" x="383.921" y="-182.79" width="782.014" height="782.016"
+            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <feGaussianBlur stdDeviation="80.104" result="effect1_foregroundBlur_473_94381" />
+        </filter>
+        <filter id="prefix__filter2_f_473_94381" x="-527.261" y="169.667" width="962.263" height="962.265"
+            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <feGaussianBlur stdDeviation="95.874" result="effect1_foregroundBlur_473_94381" />
+        </filter>
+    </defs>
+</svg>
\ No newline at end of file
diff --git a/docs/packages/cli.mdx b/docs/packages/cli.mdx
new file mode 100644
index 000000000..3d4393fd2
--- /dev/null
+++ b/docs/packages/cli.mdx
@@ -0,0 +1,97 @@
+---
+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.
+
+```bash
+npm install -g hyperframes
+# or use directly with npx
+npx hyperframes <command>
+```
+
+## Commands
+
+### `init`
+
+Create a new composition project from a template:
+
+```bash
+npx hyperframes init --template title-card
+```
+
+See [Templates](/guides/templates) for available templates.
+
+### `dev`
+
+Start a live preview server with hot reload:
+
+```bash
+npx hyperframes dev
+```
+
+Opens your composition in the browser at `http://localhost:3000`. Edits to `index.html` are reflected instantly.
+
+### `render`
+
+Render a composition to MP4:
+
+```bash
+npx hyperframes render -o output.mp4
+npx hyperframes render --docker -o output.mp4  # deterministic mode
+```
+
+See [Rendering](/guides/rendering) for all options.
+
+### `lint`
+
+Check a composition for common issues:
+
+```bash
+npx hyperframes lint
+```
+
+Detects missing attributes, deprecated names, structural problems, and more.
+
+### `compositions`
+
+List all compositions in the current project:
+
+```bash
+npx hyperframes compositions
+```
+
+### `benchmark`
+
+Find optimal render settings for your system:
+
+```bash
+npx hyperframes benchmark
+```
+
+### `doctor`
+
+Check your environment for required dependencies:
+
+```bash
+npx hyperframes doctor
+```
+
+Verifies Node.js version, FFmpeg, Docker, and other requirements.
+
+### `info`
+
+Display system and project information:
+
+```bash
+npx hyperframes info
+```
+
+### `upgrade`
+
+Update Hyperframes to the latest version:
+
+```bash
+npx hyperframes upgrade
+```
diff --git a/docs/packages/core.mdx b/docs/packages/core.mdx
new file mode 100644
index 000000000..101fa12f7
--- /dev/null
+++ b/docs/packages/core.mdx
@@ -0,0 +1,58 @@
+---
+title: "@hyperframes/core"
+description: "Types, HTML generation, runtime, and linter."
+---
+
+The core package provides the foundational types, HTML parsing/generation, runtime, and composition linter that all other packages depend on.
+
+```bash
+npm install @hyperframes/core
+```
+
+## What's Inside
+
+| Module | Description |
+|--------|-------------|
+| `core.types` | TypeScript types for compositions, clips, timelines |
+| `parsers/` | HTML-to-composition parsing |
+| `generators/` | Composition-to-HTML generation |
+| `runtime/` | The Hyperframes runtime (IIFE + ESM builds) |
+| `lint/` | Composition linter rules |
+| `adapters/` | Frame Adapter types and GSAP adapter |
+| `templates/` | HTML composition templates |
+
+## Runtime Builds
+
+The runtime is built in two formats:
+
+- **`hyperframe.runtime.iife.js`** — for browser iframe bootstrap (preview)
+- **`hyperframe.runtime.mjs`** — for Node.js/tooling/tests
+
+Build the runtime:
+
+```bash
+pnpm --filter @hyperframes/core build:hyperframes-runtime
+```
+
+## Linter
+
+The composition linter checks for common structural issues:
+
+```typescript
+import { lintHyperframeHtml } from '@hyperframes/core';
+
+const issues = lintHyperframeHtml(htmlString);
+```
+
+Detected issues include:
+- Missing timeline registration
+- Unmuted video elements
+- Missing `class="clip"` on timed elements
+- Deprecated attribute names
+- Missing composition dimensions
+
+## Types
+
+```typescript
+import type { Composition, Clip, RenderConfig } from '@hyperframes/core';
+```
diff --git a/docs/packages/engine.mdx b/docs/packages/engine.mdx
new file mode 100644
index 000000000..975e2ab45
--- /dev/null
+++ b/docs/packages/engine.mdx
@@ -0,0 +1,44 @@
+---
+title: "@hyperframes/engine"
+description: "Seekable page-to-video capture engine."
+---
+
+The engine package provides the low-level video capture pipeline: loading an HTML page in headless Chrome and capturing it frame-by-frame.
+
+```bash
+npm install @hyperframes/engine
+```
+
+## What It Does
+
+The engine:
+
+1. Launches headless Chrome (`chrome-headless-shell`)
+2. Loads your HTML composition
+3. Uses Chrome's `HeadlessExperimental.beginFrame` API for deterministic frame capture
+4. Captures each frame as a pixel buffer
+5. Hands frames to FFmpeg for encoding
+
+## Key Features
+
+- **BeginFrame rendering** — frame-perfect capture using Chrome DevTools Protocol
+- **Deterministic seek** — every frame is independently seeked, not played in realtime
+- **Configurable FPS** — 24, 30, or 60 frames per second
+- **Quality presets** — draft, standard, high encoding settings
+
+## Configuration
+
+```typescript
+import type { EngineConfig } from '@hyperframes/engine';
+
+const config: EngineConfig = {
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  quality: 'standard',
+};
+```
+
+## When to Use
+
+Most users should use the [`@hyperframes/producer`](/packages/producer) package or the [CLI](/packages/cli) instead of the engine directly. The engine is useful when you need low-level control over the capture pipeline.
diff --git a/docs/packages/producer.mdx b/docs/packages/producer.mdx
new file mode 100644
index 000000000..0764c10e8
--- /dev/null
+++ b/docs/packages/producer.mdx
@@ -0,0 +1,63 @@
+---
+title: "@hyperframes/producer"
+description: "Full HTML-to-video rendering pipeline."
+---
+
+The producer package combines the engine's capture capabilities with FFmpeg encoding to deliver a complete rendering pipeline.
+
+```bash
+npm install @hyperframes/producer
+```
+
+## What It Does
+
+The producer orchestrates the full render:
+
+1. **Loads** the composition HTML
+2. **Injects** the Hyperframes runtime
+3. **Waits** for readiness gates (`__playerReady`, `__renderReady`)
+4. **Captures** frames using the engine's BeginFrame pipeline
+5. **Encodes** to MP4 via FFmpeg
+6. **Mixes** audio tracks
+
+## Features
+
+- **Docker-based rendering** for deterministic output
+- **Quality presets** — draft, standard, high
+- **GPU encoding** support (NVENC, VideoToolbox, VAAPI)
+- **Parallel workers** for faster rendering
+- **Benchmark tooling** for finding optimal settings
+- **Regression harness** for visual regression testing
+
+## Programmatic Usage
+
+```typescript
+import { render } from '@hyperframes/producer';
+
+await render({
+  input: './my-video/index.html',
+  output: './output.mp4',
+  fps: 30,
+  quality: 'standard',
+});
+```
+
+## Docker Rendering
+
+For deterministic output, the producer renders inside a Docker container with a pinned Chrome version and font set:
+
+```bash
+# Via the CLI
+npx hyperframes render --docker -o output.mp4
+```
+
+## Regression Testing
+
+The producer includes a regression harness for comparing render output against golden baselines:
+
+```bash
+cd packages/producer
+pnpm docker:build:test   # Build test Docker image
+pnpm docker:test          # Run regression tests
+pnpm docker:test:update   # Regenerate golden baselines
+```
diff --git a/docs/packages/studio.mdx b/docs/packages/studio.mdx
new file mode 100644
index 000000000..8a54b286a
--- /dev/null
+++ b/docs/packages/studio.mdx
@@ -0,0 +1,40 @@
+---
+title: "@hyperframes/studio"
+description: "Composition editor UI."
+---
+
+The studio package provides a visual editor for creating and previewing Hyperframes compositions in the browser.
+
+```bash
+npm install @hyperframes/studio
+```
+
+## What It Does
+
+The studio is a React-based composition editor that provides:
+
+- **Live preview** — see your composition rendered in real-time
+- **Timeline view** — visual representation of clips and their timing
+- **Player controls** — play, pause, seek through your composition
+- **Hot reload** — edit HTML and see changes instantly
+
+## Running the Studio
+
+```bash
+# From the monorepo root
+pnpm dev
+
+# Or directly
+pnpm --filter @hyperframes/studio dev
+```
+
+The studio starts a development server with live preview.
+
+## Architecture
+
+The studio is a React application that:
+
+1. Loads your composition HTML into an iframe
+2. Injects the Hyperframes runtime for preview playback
+3. Provides a player interface for seeking and playback control
+4. Watches for file changes and hot-reloads the preview
diff --git a/docs/quickstart.mdx b/docs/quickstart.mdx
new file mode 100644
index 000000000..a72a6a71e
--- /dev/null
+++ b/docs/quickstart.mdx
@@ -0,0 +1,84 @@
+---
+title: Quickstart
+description: "Create, preview, and render your first Hyperframes video."
+---
+
+## Create a Project
+
+```bash
+npx create-hyperframe my-video
+cd my-video
+```
+
+This scaffolds a project with an `index.html` composition and assets directory.
+
+## Preview in Browser
+
+```bash
+npx hyperframes dev
+```
+
+Opens a live preview at `http://localhost:3000`. Edit `index.html` and the preview updates automatically.
+
+## Render to MP4
+
+```bash
+npx hyperframes render -o output.mp4
+```
+
+Renders your composition to an MP4 file using the local rendering pipeline (Puppeteer + FFmpeg).
+
+<Note>
+  Local rendering requires FFmpeg. Install it with `brew install ffmpeg` (macOS), `sudo apt install ffmpeg` (Ubuntu), or download from [ffmpeg.org](https://ffmpeg.org/download.html).
+</Note>
+
+## Project Structure
+
+After `create-hyperframe`, your project looks like this:
+
+```
+my-video/
+├── index.html          # Root composition
+├── compositions/       # Sub-compositions (optional)
+└── assets/             # Media files (video, audio, images)
+```
+
+## Your First Composition
+
+Every Hyperframes video is an HTML file. Here's a minimal example:
+
+```html
+<div id="root" data-composition-id="my-video"
+     data-start="0" data-width="1920" data-height="1080">
+
+  <h1 id="title" class="clip"
+      data-start="0" data-duration="5" data-track-index="0"
+      style="font-size: 72px; color: white; text-align: center;">
+    Hello, Hyperframes!
+  </h1>
+
+  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
+  <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>
+```
+
+Key rules:
+- **Root element** needs `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 paused and registered in `window.__timelines`
+
+## Requirements
+
+- **Node.js** 20+
+- **pnpm** (recommended) or npm
+- **FFmpeg** for local rendering
+- **Docker** (optional) for deterministic rendering
+
+<Card title="Templates" icon="grid-2" href="/guides/templates">
+  Browse built-in templates for common video patterns
+</Card>
diff --git a/docs/reference/html-schema.mdx b/docs/reference/html-schema.mdx
new file mode 100644
index 000000000..0c7cc4c22
--- /dev/null
+++ b/docs/reference/html-schema.mdx
@@ -0,0 +1,174 @@
+---
+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** = timing, metadata, styling
+- **CSS** = positioning and appearance
+- **GSAP timeline** = animations and playback sync
+
+## 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.
+</Warning>
+
+## Viewport
+
+Every composition must include `data-width` and `data-height`:
+
+```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"`) |
+| `class="clip"` | Visible elements | Yes | Enables runtime visibility management |
+| `data-start` | All | Yes | Start time in seconds, or clip ID reference |
+| `data-duration` | video, img, audio | Img: yes, others: optional | Duration in seconds |
+| `data-track-index` | All | Yes | Timeline track number (z-ordering) |
+| `data-media-start` | video, audio | No | Playback offset in source file (seconds) |
+| `data-volume` | audio, video | No | Volume 0-1 |
+| `data-composition-id` | div | On compositions | Unique composition ID |
+| `data-composition-src` | div | No | Path to external composition HTML file |
+| `data-width` | div | On compositions | Composition width in pixels |
+| `data-height` | div | On compositions | Composition height in pixels |
+
+## Video Clips
+
+```html
+<video
+  id="el-1"
+  data-start="0"
+  data-duration="15"
+  data-track-index="0"
+  data-media-start="0"
+  src="./assets/video.mp4"
+></video>
+```
+
+- `data-duration` is optional — defaults to remaining duration of source file from `data-media-start`
+- If source media runs out before `data-duration`, the clip shows the last frame
+
+## Image Clips
+
+```html
+<img
+  id="el-2"
+  class="clip"
+  data-start="5"
+  data-duration="4"
+  data-track-index="1"
+  src="./assets/overlay.png"
+/>
+```
+
+- `data-duration` is **required** for images
+
+## Audio Clips
+
+```html
+<audio
+  id="el-4"
+  data-start="0"
+  data-duration="30"
+  data-track-index="2"
+  src="./assets/music.mp3"
+></audio>
+```
+
+- `data-duration` is optional — defaults to remaining duration of source file
+- Audio clips are invisible
+
+## Composition Clips
+
+```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>
+```
+
+- Compositions do **not** use `data-duration` — duration comes from the GSAP timeline
+- External compositions are loaded from `data-composition-src` and wrapped in `<template>` tags
+
+## 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>
+```
+
+Offsets: `data-start="intro + 2"` (2s gap) or `data-start="intro - 0.5"` (0.5s overlap).
+
+## Timeline Contract
+
+The framework initializes `window.__timelines = {}` before any scripts run. Every composition must register a timeline:
+
+```javascript
+const tl = gsap.timeline({ paused: true });
+// ... add tweens
+window.__timelines["<data-composition-id>"] = tl;
+```
+
+### Rules
+
+- Every composition needs a script to create and register its timeline
+- All timelines start paused (`{ paused: true }`)
+- The framework auto-nests sub-timelines — do not manually add them
+- Duration comes from `tl.duration()` — no `data-duration` on compositions
+- Timelines must be finite
+
+## Caption Discoverability
+
+For caption compositions, add these attributes to the root node:
+
+```html
+<div
+  data-composition-id="captions"
+  data-timeline-role="captions"
+  data-caption-root="true"
+  ...
+>
+```
+
+## Output Checklist
+
+- [ ] Every composition has `data-width` and `data-height`
+- [ ] Each reusable composition is in its own HTML file
+- [ ] Compositions loaded via `data-composition-src`
+- [ ] Each composition file uses `<template>` wrapper
+- [ ] All timelines registered in `window.__timelines`
+- [ ] Timed visible elements have `class="clip"`

From 915fe2f47a0ff72c1c1b620f548c090e82b9d7de Mon Sep 17 00:00:00 2001
From: James <james.russo@heygen.com>
Date: Mon, 23 Mar 2026 23:57:01 +0000
Subject: [PATCH 2/7] docs: improve quality based on Remotion/Stripe/Tailwind
 patterns

Major improvements across all 18 pages:

- Use Mintlify components: <Steps> for tutorials, <Tabs> for alternatives,
  <CodeGroup> for multi-platform commands, <Tree> for directory structures,
  <AccordionGroup> for FAQ/scannable content, <Mermaid> for diagrams
- Add filename annotations to all code blocks (e.g., ```html index.html)
- Add numbered comments inside multi-step code examples
- Show expected terminal output after CLI commands
- Add "When to use" / "When NOT to use" sections to all package pages
- Add "Next Steps" CardGroup to every page (no dead-end pages)
- Cross-link between pages at point of curiosity (not just "see also" dumps)
- Expand thin pages (engine, studio) with architecture details and examples
- Add decision guides (rendering modes, template selection)
- Use <Warning> and <Note> sparingly (max 2-3 per page)

Also adds DOCS_GUIDELINES.md at repo root with writing standards.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 DOCS_GUIDELINES.md                | 148 ++++++++++++++++
 docs/concepts/compositions.mdx    | 158 +++++++++++------
 docs/concepts/data-attributes.mdx |  49 ++++--
 docs/concepts/determinism.mdx     |  78 +++++++--
 docs/concepts/frame-adapters.mdx  |  72 ++++++--
 docs/contributing.mdx             | 136 ++++++++++++---
 docs/guides/common-mistakes.mdx   | 183 +++++++++++++++-----
 docs/guides/gsap-animation.mdx    |  89 ++++++++--
 docs/guides/rendering.mdx         | 138 ++++++++++++---
 docs/guides/templates.mdx         | 137 ++++++++++++---
 docs/guides/troubleshooting.mdx   | 157 ++++++++++++-----
 docs/introduction.mdx             |  93 +++++++---
 docs/packages/cli.mdx             | 273 ++++++++++++++++++++++++------
 docs/packages/core.mdx            | 160 ++++++++++++++---
 docs/packages/engine.mdx          | 146 +++++++++++++---
 docs/packages/producer.mdx        | 160 ++++++++++++++---
 docs/packages/studio.mdx          | 124 ++++++++++++--
 docs/quickstart.mdx               | 219 +++++++++++++++++-------
 docs/reference/html-schema.mdx    | 219 +++++++++++++++---------
 19 files changed, 2183 insertions(+), 556 deletions(-)
 create mode 100644 DOCS_GUIDELINES.md

diff --git a/DOCS_GUIDELINES.md b/DOCS_GUIDELINES.md
new file mode 100644
index 000000000..89a915ba9
--- /dev/null
+++ b/DOCS_GUIDELINES.md
@@ -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
diff --git a/docs/concepts/compositions.mdx b/docs/concepts/compositions.mdx
index 5b1ce3def..ea9872163 100644
--- a/docs/concepts/compositions.mdx
+++ b/docs/concepts/compositions.mdx
@@ -3,105 +3,159 @@ 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 — must live inside a composition.
+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
+```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.
+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:
+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)
+- `<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
 
-Embed one composition inside another by loading it from an external HTML file:
+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.
 
-```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>
-```
+<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.
 
-The framework automatically fetches the HTML 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>
+    ```
 
-### Composition File Format
+    Each external composition file wraps its content in a `<template>` tag:
 
-Each 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>
 
-```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>
 
-    <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.
 
-    <script>
-      const tl = gsap.timeline({ paused: true });
-      tl.from(".title", { opacity: 0, y: -50, duration: 1 });
-      window.__timelines["intro-anim"] = tl;
-    </script>
-  </div>
-</template>
-```
+    ```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
 
-```
-project/
-├── index.html              # Root composition
-├── compositions/
-│   ├── intro-anim.html     # Intro animation
-│   ├── caption-overlay.html # Captions
-│   └── outro-title.html     # Outro
-```
+<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.
-- **Script** — effects, transitions, dynamic DOM, canvas, SVG — creative animation via GSAP. Scripts do **not** control media playback or clip visibility.
+- **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.
+  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
+```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 to see all compositions in a project:
+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>
diff --git a/docs/concepts/data-attributes.mdx b/docs/concepts/data-attributes.mdx
index 0a3d04c78..0b7b66e3c 100644
--- a/docs/concepts/data-attributes.mdx
+++ b/docs/concepts/data-attributes.mdx
@@ -3,7 +3,7 @@ title: Data Attributes
 description: "Core attributes for controlling element timing and behavior."
 ---
 
-Hyperframes uses HTML data attributes to control timing, media playback, and composition structure. These are the declarative building blocks of every video.
+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
 
@@ -25,16 +25,16 @@ Hyperframes uses HTML data attributes to control timing, media playback, and com
 
 | Attribute | Example | Description |
 |-----------|---------|-------------|
-| `data-composition-id` | `"root"` | Unique ID for composition wrapper (required on every composition) |
+| `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 HTML file |
+| `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
+```html index.html
 <h1 id="title" class="clip"
     data-start="0" data-duration="5" data-track-index="0">
   Hello World
@@ -45,7 +45,7 @@ Add `class="clip"` to all timed elements so the runtime can manage their visibil
 
 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
+```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>
@@ -57,7 +57,7 @@ Instead of calculating absolute start times, a clip can reference another clip's
 
 Add `+ N` or `- N` after the ID to offset from the end of the referenced clip:
 
-```html
+```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>
@@ -68,12 +68,37 @@ Add `+ N` or `- N` after the ID to offset from the end of the referenced clip:
 ```
 
 <Note>
-  Overlapping clips must be on different tracks — clips on the same track cannot overlap in time.
+  Overlapping clips must be on different tracks -- clips on the same track cannot overlap in time.
 </Note>
 
-### Rules
+<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.
 
-- **Same composition only** — references resolve within the clip's parent composition
-- **No circular references** — A cannot start after B if B starts after A
-- **Referenced clip must have a known duration** — either explicit `data-duration` or inferred from source media
-- **Parsing** — if the value is a valid number, it is absolute seconds; otherwise parsed as `<id>`, `<id> + <number>`, or `<id> - <number>`
+  **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>
diff --git a/docs/concepts/determinism.mdx b/docs/concepts/determinism.mdx
index 4a4080e36..488fbe408 100644
--- a/docs/concepts/determinism.mdx
+++ b/docs/concepts/determinism.mdx
@@ -3,26 +3,49 @@ title: Deterministic Rendering
 description: "Same input, identical output. Every time."
 ---
 
-Hyperframes is built around a core guarantee: **the same composition always produces the same video**. This is what makes automated pipelines, CI testing, and AI-driven workflows reliable.
+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:
+The rendering pipeline is frame-by-frame and seek-driven. No realtime playback is involved -- every frame is independently seeked and captured.
 
-1. **Frame clock**: `time = floor(frame) / fps` — no wall-clock dependency
-2. **Seek contract**: `renderSeek(time)` pauses all animations and deterministically seeks to the exact frame
-3. **Capture**: Chrome's `HeadlessExperimental.beginFrame` API captures the pixel buffer
-4. **Encode**: FFmpeg encodes frames into the final video
+<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>
 
-No realtime playback is involved in rendering. Every frame is independently seeked and captured.
+```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:#7559FF,color:#fff
+    style B fill:#7559FF,color:#fff
+    style C fill:#7559FF,color:#fff
+    style D fill:#7559FF,color:#fff
+    style E fill:#735CE5,color:#fff
+```
 
 ## What Makes It Deterministic
 
-- **No wall-clock dependencies** — rendering doesn't 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 has a known, finite length
+- **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
 
@@ -37,13 +60,15 @@ Docker mode uses an exact Chrome version and font set, ensuring:
 - 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 seek semantics are the source of truth
-- **Readiness gates** — `__playerReady` and `__renderReady` ensure the composition is fully loaded before any frame is captured
+- **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.
@@ -51,9 +76,26 @@ The browser preview and the rendered MP4 should match. Hyperframes achieves this
 
 ## For Adapter Authors
 
-If you're building a [Frame Adapter](/concepts/frame-adapters), your adapter must follow the determinism contract:
+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
+- `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`
+- 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>
diff --git a/docs/concepts/frame-adapters.mdx b/docs/concepts/frame-adapters.mdx
index c56004fb2..3a1d9c3c1 100644
--- a/docs/concepts/frame-adapters.mdx
+++ b/docs/concepts/frame-adapters.mdx
@@ -9,9 +9,40 @@ The Frame Adapter pattern is how Hyperframes supports multiple animation runtime
 
 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
+```typescript adapters/types.ts
 type FrameAdapterContext = {
   compositionId: string;
   fps: number;
@@ -41,13 +72,13 @@ type FrameAdapter = {
 
 The host normalizes frames before calling the adapter:
 
-```typescript
+```typescript engine/render-loop.ts
 normalizedFrame = clamp(Math.floor(frame), 0, durationFrames);
 ```
 
 A typical render loop:
 
-```typescript
+```typescript engine/render-loop.ts
 await adapter.init?.({ compositionId, fps, width, height, rootElement });
 const durationFrames = adapter.getDurationFrames();
 
@@ -61,7 +92,7 @@ await adapter.destroy?.();
 
 ## Determinism Contract
 
-These rules are non-negotiable for any adapter:
+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)
@@ -77,24 +108,37 @@ First-party adapters:
 
 | Runtime | Seek Method | Status |
 |---------|------------|--------|
-| GSAP | `timeline.seek(frame / fps)` | Available |
+| [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.
+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 don't break
-4. **Duration** — returned duration is a finite integer
-5. **Cleanup** — no leaked timers/listeners after `destroy`
+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`
 
-<Info>
-  The Adapter API is currently at **v0** (experimental). Breaking changes are possible until v1.
-</Info>
+## 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>
diff --git a/docs/contributing.mdx b/docs/contributing.mdx
index 61e0aeace..fa8879ce1 100644
--- a/docs/contributing.mdx
+++ b/docs/contributing.mdx
@@ -3,57 +3,149 @@ title: Contributing
 description: "How to contribute to Hyperframes."
 ---
 
-Thanks for your interest in contributing 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
 
-1. Fork the repository
-2. Clone your fork: `git clone https://github.com/YOUR_USERNAME/hyperframes.git`
-3. Install dependencies: `pnpm install`
-4. Create a branch: `git checkout -b my-feature`
+<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            # Run the studio (composition editor)
+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 --filter @hyperframes/core test          # Core unit tests
-pnpm --filter @hyperframes/engine test        # Engine unit tests
-pnpm --filter @hyperframes/core test:hyperframe-runtime-ci  # Runtime contract tests
+pnpm -r test
 ```
 
 ## Packages
 
-| Package | Description |
-|---------|-------------|
-| `@hyperframes/core` | Types, HTML generation, runtime, linter |
-| `@hyperframes/engine` | Seekable page-to-video capture engine |
-| `@hyperframes/producer` | Full rendering pipeline (capture + encode) |
-| `@hyperframes/studio` | Composition editor UI |
-| `hyperframes` | CLI for creating, previewing, and rendering |
+| 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
 
-- Use [conventional commit](https://www.conventionalcommits.org/) format for PR titles (e.g., `feat: add timeline export`, `fix: resolve seek overflow`)
-- CI must pass before merge (build, typecheck, tests, semantic PR title)
-- PRs require at least 1 approval
+### 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
-- Include reproduction steps for bugs
+- For bug reports, include:
+  - Steps to reproduce
+  - Expected behavior vs. actual behavior
+  - Hyperframes version (`npx hyperframes info`)
+  - Operating system and Node.js version
 
-## Code of Conduct
+## Community
 
-This project follows the [Contributor Covenant Code of Conduct](https://github.com/heygen-com/hyperframes/blob/main/CODE_OF_CONDUCT.md).
+<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
 
diff --git a/docs/guides/common-mistakes.mdx b/docs/guides/common-mistakes.mdx
index 778beaaa2..c1d8ae0cd 100644
--- a/docs/guides/common-mistakes.mdx
+++ b/docs/guides/common-mistakes.mdx
@@ -3,63 +3,170 @@ title: Common Mistakes
 description: "Pitfalls that break Hyperframes compositions."
 ---
 
-These are mistakes that can't be caught by the linter. For automated checks, run `npx hyperframes lint`.
+These are mistakes that cannot be caught by the linter. For automated checks, run `npx hyperframes lint` (see [CLI](/packages/cli#lint)).
 
-## Animating Video Element Dimensions
+<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>
 
-**Symptom**: Video frames stop updating, or browser performance drops.
+<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.
+    **Cause:** GSAP animating `width`, `height`, `top`, `left` directly on a `<video>` element can cause the browser to stop rendering frames.
 
-```javascript
-// BROKEN — animating video element dimensions
-tl.to("#el-video", { width: 500, height: 280, top: 700, left: 1400 }, 26);
+    **Before (broken):**
 
-// FIXED — animate a wrapper div, video fills it at 100%
-tl.to("#pip-wrapper", { width: 500, height: 280, top: 700, left: 1400 }, 26);
-```
+    ```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);
+    ```
 
-Use a non-timed wrapper `<div>` for visual effects like picture-in-picture. Animate the wrapper; let the video fill it.
+    **After (fixed):**
 
-## Controlling Media Playback in Scripts
+    ```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>
+    ```
 
-**Symptom**: Audio/video playback is out of sync, or plays when it shouldn't.
+    ```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);
+    ```
 
-**Cause**: Calling `video.play()`, `video.pause()`, or setting `audio.currentTime` in your scripts. The framework owns all media playback.
+    Use a non-timed wrapper `<div>` for visual effects like picture-in-picture. Animate the wrapper; let the video fill it via CSS.
+  </Accordion>
 
-```javascript
-// BROKEN — conflicts with framework media sync
-document.getElementById("el-video").play();
-document.getElementById("el-audio").currentTime = 5;
+  <Accordion title="Controlling media playback in scripts">
+    **Symptom:** Audio/video playback is out of sync, or plays when it should not.
 
-// FIXED — don't do this. The framework handles it.
-// Use GSAP for visual animations only:
-tl.to("#el-video", { opacity: 1, duration: 0.5 }, 0);
-```
+    **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).
 
-## Composition Duration Shorter Than Video
+    **Before (broken):**
 
-**Symptom**: Video plays for a few seconds then stops. Timeline shows 8-10 seconds even though the video is minutes long.
+    ```javascript index.html
+    // Conflicts with framework media sync
+    document.getElementById("el-video").play();
+    document.getElementById("el-audio").currentTime = 5;
+    ```
 
-**Cause**: The composition duration equals the GSAP timeline duration, not `data-duration` on the video. If your last GSAP animation ends at 8 seconds, the composition is 8 seconds long.
+    **After (fixed):**
 
-```javascript
-// BROKEN — timeline is only 7.8s long, video cuts off
-tl.to("#lower-third", { left: -640, duration: 0.6 }, 7.2);
+    ```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);
+    ```
 
-// FIXED — extend timeline to match video length
-tl.to("#lower-third", { left: -640, duration: 0.6 }, 7.2);
-tl.set({}, {}, 283); // extends timeline to 283 seconds
-```
+    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>
 
-`tl.set({}, {}, TIME)` adds a zero-duration tween at the specified time, extending the timeline without affecting any elements.
+  <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 doesn't work, check in this order:
+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`?
-3. **GSAP-only animations?** Only animate visual properties (opacity, transform, color)
-4. **Timeline long enough?** Add `tl.set({}, {}, DURATION)` at the end
+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>
diff --git a/docs/guides/gsap-animation.mdx b/docs/guides/gsap-animation.mdx
index 7c24782af..26d78c6a5 100644
--- a/docs/guides/gsap-animation.mdx
+++ b/docs/guides/gsap-animation.mdx
@@ -3,26 +3,37 @@ 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.
+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
+```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
-2. **Register timelines on `window.__timelines`** with the `data-composition-id` as key
+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
 
@@ -39,22 +50,59 @@ Include GSAP and create a paused timeline:
 
 `opacity`, `x`, `y`, `scale`, `scaleX`, `scaleY`, `rotation`, `width`, `height`, `visibility`, `color`, `backgroundColor`, and any CSS-animatable property.
 
-## Timeline Duration
+## Timeline Duration and Composition Duration
 
-A composition's duration equals its GSAP timeline duration. If your last animation ends at 8 seconds, the composition is 8 seconds long.
+A composition's duration equals its GSAP timeline duration. The two are directly linked:
 
-To extend the timeline beyond the last animation (e.g., to match a video clip's length):
+```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.
+```
 
-```javascript
-// Extends timeline to 283 seconds without affecting any elements
+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 composition registers its own timeline. The framework automatically nests sub-composition timelines into the parent based on `data-start`:
+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
+```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 });
@@ -65,5 +113,22 @@ window.__timelines["intro-anim"] = tl;
 ```
 
 <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.
+  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>
diff --git a/docs/guides/rendering.mdx b/docs/guides/rendering.mdx
index c7e4a72f8..18a3ce22c 100644
--- a/docs/guides/rendering.mdx
+++ b/docs/guides/rendering.mdx
@@ -3,37 +3,110 @@ title: Rendering
 description: "Render compositions to MP4 locally or in Docker."
 ---
 
-Render your Hyperframes compositions to MP4 with the CLI.
+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.
 
-```bash
-npx hyperframes render -o output.mp4
-```
+## 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
 
-### Local Mode (default)
+<Tabs>
+  <Tab title="Local Mode">
+    ### Local Mode (default)
 
-Uses Puppeteer (bundled Chromium) + system FFmpeg. Fast for iteration.
+    Uses Puppeteer (bundled Chromium) and your system's FFmpeg. Fast for iteration during development.
 
-**Requires**: FFmpeg installed on your system.
+    **Requires:** FFmpeg installed on your system. See [Troubleshooting](/guides/troubleshooting) if FFmpeg is not found.
 
-```bash
-npx hyperframes render -o output.mp4
-```
+    ```bash Terminal
+    npx hyperframes render -o output.mp4
+    ```
 
-### Docker Mode
+    **Pros:**
+    - Fast startup, no container overhead
+    - Uses your system GPU for hardware-accelerated encoding (with `--gpu`)
+    - Best for iterative development
 
-Deterministic output with an exact Chrome version and fonts. Use this for production renders and CI pipelines.
+    **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
 
-**Requires**: Docker installed and running.
+    [Deterministic](/concepts/determinism) output with an exact Chrome version and font set. Use this for production renders and CI pipelines.
 
-```bash
-npx hyperframes render --docker -o output.mp4
-```
+    **Requires:** Docker installed and running.
 
-<Note>
-  Docker mode uses `chrome-headless-shell` with BeginFrame control for frame-perfect, deterministic capture. This is the same pipeline used in production.
-</Note>
+    ```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
 
@@ -44,11 +117,32 @@ npx hyperframes render --docker -o output.mp4
 | `-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 |
+| `--docker` | — | off | Use Docker for [deterministic rendering](/concepts/determinism) |
 
 ## Tips
 
-- Use `draft` quality during development for fast previews
+<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 across platforms
+- 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>
diff --git a/docs/guides/templates.mdx b/docs/guides/templates.mdx
index 9fc8dd049..7f24e5a38 100644
--- a/docs/guides/templates.mdx
+++ b/docs/guides/templates.mdx
@@ -3,45 +3,138 @@ title: Templates
 description: "Built-in templates for common video patterns."
 ---
 
-Hyperframes includes starter templates to help you get going quickly.
+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
+```bash Terminal
 npx hyperframes init --template <name>
 ```
 
+This creates a new project directory with an `index.html` composition and any required assets.
+
 ## Available Templates
 
-### blank
+<Tabs>
+  <Tab title="blank">
+    ### blank
 
-Empty 1920x1080 composition with a GSAP timeline wired up. Start from scratch.
+    An empty 1920x1080 composition with a GSAP timeline wired up and nothing else. Start from scratch.
 
-```bash
-npx hyperframes init --template blank
-```
+    **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.
 
-### title-card
+    **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.
 
-Animated title and subtitle with GSAP fade-in/out. Good for intro cards.
+    ```bash Terminal
+    npx hyperframes init --template blank
+    ```
 
-```bash
-npx hyperframes init --template title-card
-```
+    **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
 
-### video-edit
+    Animated title and subtitle with GSAP fade-in/out transitions.
 
-Video element with trimming, audio, and track controls. Starting point for video editing workflows.
+    **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.
 
-```bash
-npx hyperframes init --template video-edit
-```
+    **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. Copy it manually or build your own init workflow.
+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 just needs:
-1. An `index.html` with a `data-composition-id` root element
-2. A GSAP timeline registered in `window.__timelines`
-3. Any assets in the same directory
+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>
diff --git a/docs/guides/troubleshooting.mdx b/docs/guides/troubleshooting.mdx
index b9a1c6fdd..5458cef33 100644
--- a/docs/guides/troubleshooting.mdx
+++ b/docs/guides/troubleshooting.mdx
@@ -3,66 +3,145 @@ title: Troubleshooting
 description: "Solutions for common Hyperframes issues."
 ---
 
-## "No composition found"
+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.
 
-Your directory needs an `index.html` with a valid composition. Run `npx hyperframes init` to create one.
+<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.
 
-## "FFmpeg not found"
+    **Fix:** Run `npx hyperframes init` to create a composition from a [template](/guides/templates), or verify your `index.html` has the correct structure:
 
-Local rendering requires FFmpeg. Install it for your platform:
+    ```html index.html
+    <div id="root" data-composition-id="my-video"
+         data-start="0" data-width="1920" data-height="1080">
+      <!-- elements here -->
+    </div>
+    ```
+  </Accordion>
 
-<CodeGroup>
-```bash macOS
-brew install ffmpeg
-```
+  <Accordion title='"FFmpeg not found"'>
+    Local [rendering](/guides/rendering) requires FFmpeg installed on your system. Install it for your platform:
 
-```bash Ubuntu/Debian
-sudo apt install ffmpeg
-```
+    <CodeGroup>
+    ```bash macOS
+    brew install ffmpeg
+    ```
 
-```bash Windows
-# Download from https://ffmpeg.org/download.html
-# Add to your PATH
-```
-</CodeGroup>
+    ```bash Ubuntu/Debian
+    sudo apt install ffmpeg
+    ```
 
-## Lint Errors
+    ```bash Windows
+    # Download from https://ffmpeg.org/download.html
+    # Add the bin directory to your PATH
+    ```
 
-Run `npx hyperframes lint` to check for common issues:
+    ```bash Verify installation
+    ffmpeg -version
+    ```
+    </CodeGroup>
 
-- Missing `data-composition-id` on root element
-- Missing `class="clip"` on timed elements
-- Overlapping timelines or invalid data attributes
-- Unmuted video elements
-- Deprecated attribute names (`data-layer`, `data-end`)
+    After installing, run `npx hyperframes doctor` to verify the CLI can find it.
 
-## Preview Not Updating
+    <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>
 
-Make sure you're editing the `index.html` in the project directory. The preview server watches for file changes and auto-reloads.
+  <Accordion title="Lint errors">
+    Run `npx hyperframes lint` to check for common structural issues (see [CLI: lint](/packages/cli#lint)):
 
-If changes still don't appear:
-1. Check the terminal for errors
-2. Try stopping and restarting `npx hyperframes dev`
-3. Hard-refresh the browser (Ctrl+Shift+R / Cmd+Shift+R)
+    | 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>
 
-## Render Looks Different from Preview
+  <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.
 
-Use `--docker` mode for deterministic output. Local renders may differ due to:
+    If changes still do not appear:
 
-- Font availability (different fonts on different platforms)
-- Chrome version (local Chromium vs. Docker's pinned version)
-- System-specific rendering differences
+    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>
 
-```bash
-npx hyperframes render --docker -o output.mp4
-```
+  <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
+```bash Terminal
 npx hyperframes doctor
 ```
 
-This checks for Node.js version, FFmpeg availability, Docker status, and other requirements.
+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>
diff --git a/docs/introduction.mdx b/docs/introduction.mdx
index d7467d7aa..aac295f03 100644
--- a/docs/introduction.mdx
+++ b/docs/introduction.mdx
@@ -3,56 +3,97 @@ title: Introduction
 description: "Write HTML. Render video. Built for agents."
 ---
 
-Hyperframes is an open-source video rendering framework that lets you create, preview, and render HTML-based video compositions — with first-class support for AI 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.
 
-## Why Hyperframes?
+## See It in Action
 
-- **HTML-native** — AI agents already speak HTML. No React required.
-- **Frame Adapter pattern** — bring your own animation runtime (GSAP, Lottie, CSS, Three.js).
-- **Deterministic rendering** — same input = identical output. Built for automated pipelines.
-- **AI-first design** — not a bolted-on afterthought.
-
-## How It Works
-
-Define your video as HTML with data attributes:
+Here is a video defined entirely as HTML:
 
 ```html
-<div id="stage" data-composition-id="my-video"
+<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>
-  <img id="overlay" data-start="2" data-duration="3"
-       data-track-index="1" src="logo.png" />
-  <audio id="bg-music" data-start="0" data-duration="9"
+
+  <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>
 ```
 
-Preview instantly in the browser. Render to MP4 locally. Let AI agents compose videos using tools they already understand.
+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
 
-| Package | npm | Description |
-|---------|-----|-------------|
-| [`@hyperframes/core`](/packages/core) | `@hyperframes/core` | Types, HTML generation, runtime, linter |
-| [`@hyperframes/engine`](/packages/engine) | `@hyperframes/engine` | Seekable page-to-video capture engine |
-| [`@hyperframes/producer`](/packages/producer) | `@hyperframes/producer` | Full rendering pipeline (capture + encode) |
-| [`@hyperframes/studio`](/packages/studio) | `@hyperframes/studio` | Composition editor UI |
-| [`hyperframes`](/packages/cli) | `hyperframes` | CLI for creating, previewing, and rendering |
+<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">
-    Create your first video in 60 seconds
+    Build and render your first video in 60 seconds
   </Card>
   <Card title="Compositions" icon="layer-group" href="/concepts/compositions">
-    Learn the core data model
+    Understand the HTML-based data model behind every video
   </Card>
   <Card title="GSAP Animation" icon="wand-magic-sparkles" href="/guides/gsap-animation">
-    Add animations to your videos
+    Add timeline-driven animations with GSAP
   </Card>
   <Card title="Rendering" icon="film" href="/guides/rendering">
-    Render to MP4 locally or in Docker
+    Render locally, in Docker, or in a CI pipeline
   </Card>
 </CardGroup>
diff --git a/docs/packages/cli.mdx b/docs/packages/cli.mdx
index 3d4393fd2..4a2a9c605 100644
--- a/docs/packages/cli.mdx
+++ b/docs/packages/cli.mdx
@@ -3,7 +3,7 @@ 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.
+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
@@ -11,87 +11,256 @@ npm install -g hyperframes
 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
 
-### `init`
+<Tabs>
+  <Tab title="Create">
+    ### `init`
 
-Create a new composition project from a template:
+    Create a new composition project from a template:
 
-```bash
-npx hyperframes init --template title-card
-```
+    ```bash
+    npx hyperframes init --template <name>
+    ```
 
-See [Templates](/guides/templates) for available templates.
+    | 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 |
 
-### `dev`
+    See [Templates](/guides/templates) for full details and previews.
 
-Start a live preview server with hot reload:
+    ### `compositions`
 
-```bash
-npx hyperframes dev
-```
+    List all compositions in the current project:
 
-Opens your composition in the browser at `http://localhost:3000`. Edits to `index.html` are reflected instantly.
+    ```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`
 
-### `render`
+    Start a live preview server with hot reload:
 
-Render a composition to MP4:
+    ```bash
+    npx hyperframes dev
+    ```
+    ```
+    Hyperframes Studio v0.1.0
+    Local: http://localhost:3000
+    Watching for changes...
+    ```
 
-```bash
-npx hyperframes render -o output.mp4
-npx hyperframes render --docker -o output.mp4  # deterministic mode
-```
+    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.
 
-See [Rendering](/guides/rendering) for all options.
+    ### `lint`
 
-### `lint`
+    Check a composition for common issues:
 
-Check a composition for common issues:
+    ```bash
+    npx hyperframes lint
+    ```
+    ```
+    Linting index.html...
 
-```bash
-npx hyperframes lint
-```
+    WARNING  unmuted-video
+      Video element 'clip-1' should have the 'muted' attribute for reliable autoplay.
+      at index.html:5
 
-Detects missing attributes, deprecated names, structural problems, and more.
+    1 issue found (0 errors, 1 warning)
+    ```
 
-### `compositions`
+    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`
 
-List all compositions in the current project:
+    Render a composition to MP4:
 
-```bash
-npx hyperframes compositions
-```
+    ```bash
+    # Local mode (fast iteration)
+    npx hyperframes render -o output.mp4
 
-### `benchmark`
+    # Docker mode (deterministic output)
+    npx hyperframes render --docker -o output.mp4
 
-Find optimal render settings for your system:
+    # 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)
+    ```
 
-```bash
-npx hyperframes benchmark
-```
+    See [Rendering](/guides/rendering) for all options and modes.
 
-### `doctor`
+    ### `benchmark`
 
-Check your environment for required dependencies:
+    Find optimal render settings for your system:
 
-```bash
-npx hyperframes doctor
-```
+    ```bash
+    npx hyperframes benchmark
+    ```
+    ```
+    Running benchmark suite...
 
-Verifies Node.js version, FFmpeg, Docker, and other requirements.
+    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
 
-### `info`
+    Recommended: quality=standard fps=30 (best speed/quality balance)
+    ```
+  </Tab>
+  <Tab title="Utilities">
+    ### `doctor`
 
-Display system and project information:
+    Check your environment for required dependencies:
 
-```bash
-npx hyperframes info
-```
+    ```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)
 
-### `upgrade`
+    All checks passed.
+    ```
 
-Update Hyperframes to the latest version:
+    Verifies Node.js version, FFmpeg, Docker, Chrome, and other requirements.
 
-```bash
-npx hyperframes upgrade
-```
+    ### `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>
diff --git a/docs/packages/core.mdx b/docs/packages/core.mdx
index 101fa12f7..f9c4b4e33 100644
--- a/docs/packages/core.mdx
+++ b/docs/packages/core.mdx
@@ -1,58 +1,162 @@
 ---
 title: "@hyperframes/core"
-description: "Types, HTML generation, runtime, and linter."
+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 packages depend 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 |
-| `parsers/` | HTML-to-composition parsing |
-| `generators/` | Composition-to-HTML generation |
-| `runtime/` | The Hyperframes runtime (IIFE + ESM builds) |
-| `lint/` | Composition linter rules |
-| `adapters/` | Frame Adapter types and GSAP adapter |
-| `templates/` | HTML composition templates |
+| `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 built in two formats:
+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`** — for browser iframe bootstrap (preview)
-- **`hyperframe.runtime.mjs`** — for Node.js/tooling/tests
+- **`hyperframe.runtime.iife.js`** — injected into browser iframes for preview playback
+- **`hyperframe.runtime.mjs`** — for Node.js tooling and tests
 
-Build the runtime:
+Build the runtime from source:
 
 ```bash
 pnpm --filter @hyperframes/core build:hyperframes-runtime
 ```
 
-## Linter
+<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>
 
-The composition linter checks for common structural issues:
+## 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 { lintHyperframeHtml } from '@hyperframes/core';
+import type { FrameAdapterContext } from '@hyperframes/core';
 
-const issues = lintHyperframeHtml(htmlString);
+// Every adapter must answer: "what should the screen look like at this time?"
+// See the Frame Adapters concept page for the full API.
 ```
 
-Detected issues include:
-- Missing timeline registration
-- Unmuted video elements
-- Missing `class="clip"` on timed elements
-- Deprecated attribute names
-- Missing composition dimensions
+## Related Packages
 
-## Types
-
-```typescript
-import type { Composition, Clip, RenderConfig } from '@hyperframes/core';
-```
+<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>
diff --git a/docs/packages/engine.mdx b/docs/packages/engine.mdx
index 975e2ab45..a57d4b592 100644
--- a/docs/packages/engine.mdx
+++ b/docs/packages/engine.mdx
@@ -1,30 +1,54 @@
 ---
 title: "@hyperframes/engine"
-description: "Seekable page-to-video capture engine."
+description: "Seekable page-to-video capture engine using Chrome's BeginFrame API."
 ---
 
-The engine package provides the low-level video capture pipeline: loading an HTML page in headless Chrome and capturing it frame-by-frame.
+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
 ```
 
-## What It Does
+## When to Use
 
-The engine:
+<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>
 
-1. Launches headless Chrome (`chrome-headless-shell`)
-2. Loads your HTML composition
-3. Uses Chrome's `HeadlessExperimental.beginFrame` API for deterministic frame capture
-4. Captures each frame as a pixel buffer
-5. Hands frames to FFmpeg for encoding
+**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)
 
-## Key Features
+**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)
 
-- **BeginFrame rendering** — frame-perfect capture using Chrome DevTools Protocol
-- **Deterministic seek** — every frame is independently seeked, not played in realtime
-- **Configurable FPS** — 24, 30, or 60 frames per second
-- **Quality presets** — draft, standard, high encoding settings
+## 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
 
@@ -32,13 +56,95 @@ The engine:
 import type { EngineConfig } from '@hyperframes/engine';
 
 const config: EngineConfig = {
-  fps: 30,
-  width: 1920,
-  height: 1080,
-  quality: 'standard',
+  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'
 };
 ```
 
-## When to Use
+### Quality Presets
 
-Most users should use the [`@hyperframes/producer`](/packages/producer) package or the [CLI](/packages/cli) instead of the engine directly. The engine is useful when you need low-level control over the capture pipeline.
+| 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>
diff --git a/docs/packages/producer.mdx b/docs/packages/producer.mdx
index 0764c10e8..689aa2e98 100644
--- a/docs/packages/producer.mdx
+++ b/docs/packages/producer.mdx
@@ -1,63 +1,173 @@
 ---
 title: "@hyperframes/producer"
-description: "Full HTML-to-video rendering pipeline."
+description: "Full HTML-to-video rendering pipeline with encoding, audio mixing, and Docker support."
 ---
 
-The producer package combines the engine's capture capabilities with FFmpeg encoding to deliver a complete rendering pipeline.
+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:
+The producer orchestrates the full render pipeline:
 
-1. **Loads** the composition HTML
-2. **Injects** the Hyperframes runtime
-3. **Waits** for readiness gates (`__playerReady`, `__renderReady`)
-4. **Captures** frames using the engine's BeginFrame pipeline
-5. **Encodes** to MP4 via FFmpeg
-6. **Mixes** audio tracks
-
-## Features
-
-- **Docker-based rendering** for deterministic output
-- **Quality presets** — draft, standard, high
-- **GPU encoding** support (NVENC, VideoToolbox, VAAPI)
-- **Parallel workers** for faster rendering
-- **Benchmark tooling** for finding optimal settings
-- **Regression harness** for visual regression testing
+<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';
 
-await render({
+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 renders inside a Docker container with a pinned Chrome version and font set:
+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
+# 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:
+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
-pnpm docker:build:test   # Build test Docker image
-pnpm docker:test          # Run regression tests
-pnpm docker:test:update   # Regenerate golden baselines
+
+# 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>
diff --git a/docs/packages/studio.mdx b/docs/packages/studio.mdx
index 8a54b286a..4f953026c 100644
--- a/docs/packages/studio.mdx
+++ b/docs/packages/studio.mdx
@@ -1,40 +1,132 @@
 ---
 title: "@hyperframes/studio"
-description: "Composition editor UI."
+description: "Visual composition editor with live preview, timeline view, and hot reload."
 ---
 
-The studio package provides a visual editor for creating and previewing Hyperframes compositions in the browser.
+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
 ```
 
-## What It Does
+## When to Use
 
-The studio is a React-based composition editor that provides:
+**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
 
-- **Live preview** — see your composition rendered in real-time
-- **Timeline view** — visual representation of clips and their timing
-- **Player controls** — play, pause, seek through your composition
-- **Hot reload** — edit HTML and see changes instantly
+**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
-# From the monorepo root
+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 directly
+# Or target the studio package directly
 pnpm --filter @hyperframes/studio dev
 ```
 
-The studio starts a development server with live preview.
+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 that:
+The studio is a React application with the following structure:
 
-1. Loads your composition HTML into an iframe
-2. Injects the Hyperframes runtime for preview playback
-3. Provides a player interface for seeking and playback control
-4. Watches for file changes and hot-reloads the preview
+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>
diff --git a/docs/quickstart.mdx b/docs/quickstart.mdx
index a72a6a71e..1feba800a 100644
--- a/docs/quickstart.mdx
+++ b/docs/quickstart.mdx
@@ -1,84 +1,185 @@
 ---
 title: Quickstart
-description: "Create, preview, and render your first Hyperframes video."
+description: "Create, preview, and render your first Hyperframes video in under two minutes."
 ---
 
-## Create a Project
+Go from zero to a rendered MP4 in four steps: scaffold a project, preview it live, customize the composition, and render.
 
-```bash
-npx create-hyperframe my-video
-cd my-video
-```
+## What you'll build
 
-This scaffolds a project with an `index.html` composition and assets directory.
+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.
 
-## Preview in Browser
+## Prerequisites
 
-```bash
-npx hyperframes dev
-```
+<Steps>
+  <Step title="Install Node.js 20+">
+    Hyperframes requires Node.js 20 or later. Check your version:
 
-Opens a live preview at `http://localhost:3000`. Edit `index.html` and the preview updates automatically.
+    ```bash
+    node --version
+    ```
 
-## Render to MP4
+    ```bash Expected output
+    v20.11.0   # or any version >= 20
+    ```
+  </Step>
 
-```bash
-npx hyperframes render -o output.mp4
-```
+  <Step title="Install FFmpeg">
+    FFmpeg is required for local video rendering (encoding captured frames into MP4).
 
-Renders your composition to an MP4 file using the local rendering pipeline (Puppeteer + FFmpeg).
+    <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>
 
-<Note>
-  Local rendering requires FFmpeg. Install it with `brew install ffmpeg` (macOS), `sudo apt install ffmpeg` (Ubuntu), or download from [ffmpeg.org](https://ffmpeg.org/download.html).
-</Note>
+    Verify the installation:
 
-## Project Structure
+    ```bash
+    ffmpeg -version
+    ```
 
-After `create-hyperframe`, your project looks like this:
+    ```bash Expected output
+    ffmpeg version 7.x ...
+    ```
+  </Step>
+</Steps>
 
-```
-my-video/
-├── index.html          # Root composition
-├── compositions/       # Sub-compositions (optional)
-└── assets/             # Media files (video, audio, images)
-```
+## Create your first video
 
-## Your First Composition
+<Steps>
+  <Step title="Scaffold the project">
+    ```bash
+    npx create-hyperframe my-video
+    cd my-video
+    ```
 
-Every Hyperframes video is an HTML file. Here's a minimal example:
+    ```bash Expected output
+    ✔ Created my-video/
+    ✔ index.html
+    ✔ assets/
+    Done. Run `npx hyperframes dev` to preview.
+    ```
 
-```html
-<div id="root" data-composition-id="my-video"
-     data-start="0" data-width="1920" data-height="1080">
+    This generates the following project structure:
 
-  <h1 id="title" class="clip"
-      data-start="0" data-duration="5" data-track-index="0"
-      style="font-size: 72px; color: white; text-align: center;">
-    Hello, Hyperframes!
-  </h1>
+    <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>
 
-  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
-  <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>
-```
+    | 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>
 
-Key rules:
-- **Root element** needs `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 paused and registered in `window.__timelines`
+  <Step title="Preview in the browser">
+    ```bash
+    npx hyperframes dev
+    ```
 
-## Requirements
+    ```bash Expected output
+    ✔ Hyperframes dev server running
+      → http://localhost:3000
+    ```
 
-- **Node.js** 20+
-- **pnpm** (recommended) or npm
-- **FFmpeg** for local rendering
-- **Docker** (optional) for deterministic rendering
+    Open [http://localhost:3000](http://localhost:3000) to see the live preview. Edits to `index.html` reload automatically.
 
-<Card title="Templates" icon="grid-2" href="/guides/templates">
-  Browse built-in templates for common video patterns
-</Card>
+    <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>
diff --git a/docs/reference/html-schema.mdx b/docs/reference/html-schema.mdx
index 0c7cc4c22..dd8877867 100644
--- a/docs/reference/html-schema.mdx
+++ b/docs/reference/html-schema.mdx
@@ -10,9 +10,9 @@ This is the full schema reference for Hyperframes compositions. For a gentler in
 Hyperframes uses HTML as the source of truth for describing a video:
 
 - **HTML clips** = video, image, audio, composition
-- **Data attributes** = timing, metadata, styling
+- **[Data attributes](/concepts/data-attributes)** = timing, metadata, styling
 - **CSS** = positioning and appearance
-- **GSAP timeline** = animations and playback sync
+- **GSAP timeline** = animations and playback sync (see [GSAP Animation](/guides/gsap-animation))
 
 ## Framework-Managed Behavior
 
@@ -27,12 +27,12 @@ The framework reads data attributes and automatically manages:
 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.
+  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`:
+Every composition must include `data-width` and `data-height` on the root element:
 
 ```html
 <div id="main" data-composition-id="my-video"
@@ -49,78 +49,112 @@ Common sizes:
 
 | Attribute | Applies To | Required | Description |
 |-----------|-----------|----------|-------------|
-| `id` | All | Yes | Unique identifier (e.g., `"el-1"`) |
-| `class="clip"` | Visible elements | Yes | Enables runtime visibility management |
-| `data-start` | All | Yes | Start time in seconds, or clip ID reference |
-| `data-duration` | video, img, audio | Img: yes, others: optional | Duration in seconds |
-| `data-track-index` | All | Yes | Timeline track number (z-ordering) |
-| `data-media-start` | video, audio | No | Playback offset in source file (seconds) |
-| `data-volume` | audio, video | No | Volume 0-1 |
-| `data-composition-id` | div | On compositions | Unique composition ID |
-| `data-composition-src` | div | No | Path to external composition HTML file |
-| `data-width` | div | On compositions | Composition width in pixels |
-| `data-height` | div | On compositions | Composition height in pixels |
+| `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. |
 
-## Video Clips
+## Clip Types
 
-```html
-<video
-  id="el-1"
-  data-start="0"
-  data-duration="15"
-  data-track-index="0"
-  data-media-start="0"
-  src="./assets/video.mp4"
-></video>
-```
+<AccordionGroup>
+  <Accordion title="Video Clips">
+    Video clips embed `<video>` elements with timing and playback attributes.
 
-- `data-duration` is optional — defaults to remaining duration of source file from `data-media-start`
-- If source media runs out before `data-duration`, the clip shows the last frame
+    ```html
+    <video
+      id="el-1"
+      data-start="0"
+      data-duration="15"
+      data-track-index="0"
+      data-media-start="0"
+      src="./assets/video.mp4"
+    ></video>
+    ```
 
-## Image Clips
+    **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
 
-```html
-<img
-  id="el-2"
-  class="clip"
-  data-start="5"
-  data-duration="4"
-  data-track-index="1"
-  src="./assets/overlay.png"
-/>
-```
+    <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>
 
-- `data-duration` is **required** for images
+  <Accordion title="Image Clips">
+    Image clips display static images with controlled timing.
 
-## Audio Clips
+    ```html
+    <img
+      id="el-2"
+      class="clip"
+      data-start="5"
+      data-duration="4"
+      data-track-index="1"
+      src="./assets/overlay.png"
+    />
+    ```
 
-```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 **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>
 
-- `data-duration` is optional — defaults to remaining duration of source file
-- Audio clips are invisible
+  <Accordion title="Audio Clips">
+    Audio clips add sound to the composition without any visual element.
 
-## Composition Clips
+    ```html
+    <audio
+      id="el-4"
+      data-start="0"
+      data-duration="30"
+      data-track-index="2"
+      src="./assets/music.mp3"
+    ></audio>
+    ```
 
-```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:**
+    - `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>
 
-- Compositions do **not** use `data-duration` — duration comes from the GSAP timeline
-- External compositions are loaded from `data-composition-src` and wrapped in `<template>` tags
+  <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
 
@@ -131,29 +165,49 @@ Reference another clip's ID in `data-start` to mean "start when that clip ends":
 <video id="main" data-start="intro" data-duration="20" data-track-index="0" src="..."></video>
 ```
 
-Offsets: `data-start="intro + 2"` (2s gap) or `data-start="intro - 0.5"` (0.5s overlap).
+`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 timeline:
+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 tweens
+
+// 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 to create and register its timeline
-- All timelines start paused (`{ paused: true }`)
-- The framework auto-nests sub-timelines — do not manually add them
-- Duration comes from `tl.duration()` — no `data-duration` on compositions
-- Timelines must be finite
+- 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:
+For caption compositions, add these attributes to the root node so the framework can identify and special-case caption rendering:
 
 ```html
 <div
@@ -166,9 +220,16 @@ For caption compositions, add these attributes to the root node:
 
 ## Output Checklist
 
-- [ ] Every composition has `data-width` and `data-height`
-- [ ] Each reusable composition is in its own HTML file
-- [ ] Compositions loaded via `data-composition-src`
-- [ ] Each composition file uses `<template>` wrapper
-- [ ] All timelines registered in `window.__timelines`
-- [ ] Timed visible elements have `class="clip"`
+<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>

From 3f6608f38bf5e92c4dd51c86a5634ee2dbb2a083 Mon Sep 17 00:00:00 2001
From: James <james.russo@heygen.com>
Date: Tue, 24 Mar 2026 00:02:57 +0000
Subject: [PATCH 3/7] chore(docs): update to new HeyGen logo and favicon

Replace old gradient pinwheel logo with the current HeyGen branding:
- Logo light: flat wordmark with #7559FF purple play icon (black text)
- Logo dark: same wordmark with white text
- Favicon: purple rounded square with white play icon (SVG)

Remove old favicon.ico and gradient icon.svg.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 docs/docs.json      |   2 +-
 docs/favicon.ico    | Bin 15406 -> 0 bytes
 docs/favicon.svg    |  12 +++++
 docs/logo/dark.svg  |  33 +++++++++++++-
 docs/logo/icon.svg  |  62 -------------------------
 docs/logo/light.svg | 108 +++++++++++++-------------------------------
 6 files changed, 76 insertions(+), 141 deletions(-)
 delete mode 100644 docs/favicon.ico
 create mode 100644 docs/favicon.svg
 delete mode 100644 docs/logo/icon.svg

diff --git a/docs/docs.json b/docs/docs.json
index e887ad96c..cf7b4a4ea 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -11,7 +11,7 @@
     "light": "/logo/light.svg",
     "dark": "/logo/dark.svg"
   },
-  "favicon": "/favicon.ico",
+  "favicon": "/favicon.svg",
   "navigation": {
     "tabs": [
       {
diff --git a/docs/favicon.ico b/docs/favicon.ico
deleted file mode 100644
index f6b3b86a3bcc38bacbe512d3ffb7438018ef6f94..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 15406
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
UQ0{u&x#YjbkpBnre|7}^2M-3l5C8xG

diff --git a/docs/favicon.svg b/docs/favicon.svg
new file mode 100644
index 000000000..17f42caf2
--- /dev/null
+++ b/docs/favicon.svg
@@ -0,0 +1,12 @@
+<svg width="56" height="62" viewBox="0 0 56 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="56" height="61.5777" rx="5.35458" fill="#7559FF"/>
+<g clip-path="url(#clip0_6999_18707)">
+<path d="M10.709 10.709V50.8683H16.7329V10.709H10.709ZM45.2907 10.709H39.2668V50.8683H45.2907V10.709Z" fill="white"/>
+<path d="M36.0691 29.4973L22.0893 21.3981C21.0979 20.8223 19.8564 21.5415 19.8564 22.6908V38.8871C19.8564 40.0364 21.0979 40.7556 22.0893 40.1798L36.0691 32.0806C37.0605 31.5092 37.0605 30.0709 36.0691 29.4973Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_6999_18707">
+<rect width="45.2908" height="50.8685" fill="white" transform="translate(5.35449 5.35547)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/docs/logo/dark.svg b/docs/logo/dark.svg
index a1e976ba9..27ce2c3e6 100644
--- a/docs/logo/dark.svg
+++ b/docs/logo/dark.svg
@@ -1 +1,32 @@
-<svg width="2122" height="695" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="prefix__a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="60" y="41" width="588" height="556"><path d="M229.788 509.08c-5.026-2.455-7.729.722-7.729 8.439 0 7.717.294 35.453 6.306 47.25a57.88 57.88 0 0025.293 25.293c9.463 4.821 21.161 5.957 40.623 6.225 53.598-2.39 100.504-30.509 128.665-72.305 2.5-3.711-.25-8.557-4.725-8.557H290.276c-17.766 0-44.453 1.487-60.488-6.345zM207.75 270.45c0-7.896-10.44-10.725-14.387-3.886a781644.405 781644.405 0 01-49.776 86.209c-40.45 70.047-26.516 163.98 51.459 216.834 9.646 6.539 17.363-3.858 15.491-12.001-3.981-16.646-2.787-35.128-2.787-52.213V270.45zM518.215 343.856c.387 5.58 4.49 6.333 11.173 2.474 6.684-3.858 30.556-17.981 37.767-29.086a57.878 57.878 0 009.258-34.551c-.556-10.606-5.421-21.305-14.92-38.293-28.869-45.223-76.674-71.785-126.951-75.274-4.464-.31-7.286 4.494-5.048 8.369L493.467 288.3c8.882 15.385 23.514 37.753 24.748 55.556zM322.572 482.254c-6.838 3.948-4.068 14.403 3.828 14.403 20.774-.001 53.356-.002 99.547.002 80.888.007 155.269-59.027 162.055-152.982.839-11.623-12.023-13.108-18.139-7.415-12.425 11.77-29.028 19.978-43.824 28.52L322.572 482.254zM234.794 178.177c4.638-3.124 3.239-7.054-3.444-10.913-6.683-3.858-30.851-17.471-44.073-18.163a57.881 57.881 0 00-34.551 9.257c-8.907 5.785-15.74 15.348-25.703 32.068-24.729 47.613-23.83 102.294-1.714 147.58 1.964 4.021 7.535 4.062 9.773.187l63.972-110.804c8.883-15.386 20.939-39.241 35.74-49.212zM452.475 278.411c6.838 3.948 14.507-3.678 10.559-10.516-10.388-17.99-26.679-46.207-49.771-86.212-40.438-70.054-128.753-104.953-213.514-63.852-10.486 5.084-5.34 16.966 2.648 19.416 16.406 4.876 31.815 15.15 46.611 23.693l203.467 117.471z" fill="#D9D9D9"/></mask><g mask="url(#prefix__a)"><path fill="#28A7E5" d="M71.574 75.727h555.617v547.9H71.574z"/><g filter="url(#prefix__filter0_f_473_94388)"><circle cx="783.94" cy="429.003" r="525.682" fill="#9F59FF"/></g><g filter="url(#prefix__filter1_f_473_94388)"><circle cx="774.928" cy="208.218" r="230.8" fill="#FF2FC5"/></g><g filter="url(#prefix__filter2_f_473_94388)"><circle cx="-46.128" cy="650.8" r="289.384" fill="#42C7F1"/></g></g><g style="mix-blend-mode:overlay" opacity=".6"><path d="M207.769 481.351v-210.91c0-7.896-10.452-10.696-14.4-3.859l-53.111 91.991 67.511 122.778z" fill="url(#prefix__paint0_linear_473_94388)"/><path d="M505.477 376.684L322.823 482.14c-6.838 3.947-4.037 14.4 3.858 14.4h106.222l72.574-119.856z" fill="url(#prefix__paint1_linear_473_94388)"/><path d="M269.704 172.775L452.358 278.23c6.837 3.948 14.489-3.704 10.541-10.541l-53.111-91.991-140.084-2.923z" fill="url(#prefix__paint2_linear_473_94388)"/></g><rect x="750.836" y="233.035" width="50.876" height="232.957" rx="8.926" fill="#fff"/><rect x="908.816" y="233.035" width="50.876" height="232.957" rx="8.926" fill="#fff"/><rect x="948.09" y="325.861" width="42.843" height="191.899" rx="8.926" transform="rotate(90 948.09 325.861)" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M1180.16 300.625c0 .767.17 1.524.5 2.215l74.08 153.977a7.141 7.141 0 009.53 3.338l28.96-13.931c3.55-1.71 5.05-5.976 3.34-9.53l-65.98-137.134a7.142 7.142 0 00-6.44-4.044h-38.88a5.104 5.104 0 00-5.11 5.109z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M1325.98 295.516a7.127 7.127 0 00-6.56 4.337l-69.52 162.868a51.763 51.763 0 01-36.07 30.144l-6.89 1.575a7.136 7.136 0 00-5.37 8.552l7.16 31.324a7.14 7.14 0 008.55 5.369l6.89-1.575a98.19 98.19 0 0068.42-57.17l74.9-175.481c2.01-4.71-1.45-9.943-6.57-9.943h-34.94zM1592.51 246.616c0-2.865-1.7-5.465-4.37-6.507-19.2-7.502-43.75-12.882-76.4-12.88-33.54.001-63.79 11.942-85.52 35.207-21.62 23.16-32.91 55.484-32.75 92.973.31 70.559 54.81 116.829 115.04 115.93 44.56-.665 66.84-9.611 79.35-16.372 10.15-5.483 15.81-15.96 15.81-26.624v-71.516c0-12.915-10.47-23.385-23.38-23.385h-64.98a7.136 7.136 0 00-7.14 7.141v32.132c0 3.943 3.19 7.14 7.14 7.14h34.81c3.94 0 7.14 3.197 7.14 7.14v25.902c0 3.017-1.89 5.731-4.79 6.569-9.12 2.636-23.18 5.145-44.65 5.466-35.45.529-67.75-26.021-67.93-69.722-.12-28.107 8.23-48.219 20.26-61.097 11.92-12.773 29.34-20.471 51.59-20.472 30.65-.001 50.65 5.61 64.46 11.767 1.75.779 3.39 1.554 4.93 2.326 5.06 2.531 11.38-.94 11.38-6.6v-34.518z" fill="#fff"/><rect x="1834.4" y="288.375" width="50.876" height="177.618" rx="8.926" fill="#fff"/><rect x="1948.64" y="426.721" width="46.413" height="39.272" rx="8.926" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M1862.75 351.384a5.36 5.36 0 01-1.58-3.798l3.57-14.047c0-1.714-13.41 11.546 2.22-4.313 15.64-15.859 33.93-34.157 61.83-34.603 35.28 0 66.27 20.083 66.27 58.81v97.319c0 .037-.03.068-.07.068h-46.28a.069.069 0 01-.07-.068V354.326c0-11.316-10.71-19.538-27.66-19.538-16.96 0-30.31 7.017-44.86 20.556-2.16 2.015-5.55 2.032-7.64-.054l-5.73-3.906zM1088.55 288.375c-26.99 0-50.02 9.123-66.2 26.31-16 16.987-23.385 39.795-23.385 63.792 0 22.378 4.885 46.256 20.575 64.782 16.26 19.193 40.95 28.982 72.64 28.982 26.85 0 51.31-7.601 70.74-16.448a3.534 3.534 0 002.06-3.222v-39.972c0-2.794-3.07-4.519-5.49-3.136-16.86 9.601-41.12 19.936-67.31 19.936-22.7 0-33.91-6.695-39.95-13.829-4.79-5.653-8.11-13.663-9.58-24.113h84.69l.12.002h35.71c1.97 0 3.57-1.597 3.54-3.568-.28-17.172-2.67-39.756-12.31-59.157-5.31-10.697-13.13-21.024-24.51-28.628-11.52-7.692-25.4-11.731-41.34-11.731zm32.59 74.52c-1.22-5.491-2.88-10.624-5.11-15.099-2.78-5.597-6.11-9.505-9.94-12.062-3.69-2.469-9.09-4.516-17.54-4.516-17.07 0-28.13 5.529-35.01 12.837-4.44 4.711-7.92 11.006-9.91 18.84h77.51zM1723.16 288.375c-27 0-50.02 9.123-66.21 26.31-15.99 16.987-23.38 39.795-23.38 63.792 0 22.378 4.88 46.256 20.58 64.782 16.25 19.193 40.94 28.982 72.64 28.982 26.85 0 51.31-7.601 70.74-16.448a3.534 3.534 0 002.06-3.222v-39.972c0-2.794-3.07-4.519-5.5-3.136-16.85 9.601-41.11 19.936-67.3 19.936-22.7 0-33.91-6.695-39.95-13.829-4.79-5.653-8.11-13.663-9.58-24.113h84.68l.13.002h35.7c1.97 0 3.58-1.598 3.53-3.57-.4-17.942-3.91-40.436-14.04-59.62-11.36-21.536-31.95-39.894-64.1-39.894zm31.77 74.52c-1.4-5.258-3.24-10.24-5.56-14.634-5.83-11.054-13.62-17.043-26.21-17.043-17.07 0-28.13 5.529-35.02 12.837-4.43 4.711-7.92 11.006-9.9 18.84h76.69z" fill="#fff"/><defs><linearGradient id="prefix__paint0_linear_473_94388" x1="170.247" y1="241.641" x2="170.247" y2="480.866" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="prefix__paint1_linear_473_94388" x1="316.643" y1="529.035" x2="523.818" y2="409.422" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="prefix__paint2_linear_473_94388" x1="496.06" y1="260.135" x2="288.885" y2="140.522" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><filter id="prefix__filter0_f_473_94388" x="-204.756" y="-559.694" width="1977.39" height="1977.39" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="231.507" result="effect1_foregroundBlur_473_94388"/></filter><filter id="prefix__filter1_f_473_94388" x="383.921" y="-182.79" width="782.014" height="782.016" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="80.104" result="effect1_foregroundBlur_473_94388"/></filter><filter id="prefix__filter2_f_473_94388" x="-527.261" y="169.667" width="962.263" height="962.265" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="95.874" result="effect1_foregroundBlur_473_94388"/></filter></defs></svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1015 435" style="enable-background:new 0 0 1015 435;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#A34CDB;}
+</style>
+<g>
+	<path class="st0" d="M883.39,273.67v-59.61c0-17.87-10.82-28.68-24.92-28.68c-6.34,0-13.28,1.62-19.04,5.39l15.6-27.02
+		c3.02-0.62,5.94-0.95,8.56-0.95c27.74,0,44.2,18.57,43.97,49.84v61.02H883.39z M804.8,176.76v96.91h24.16V162.81L804.8,176.76z"/>
+	<g>
+		<path class="st0" d="M131.7,111.68h-24.16v161.99h24.16V111.68z M246.98,111.68h-24.16v161.99h24.16V111.68z"/>
+		<path class="st1" d="M210.51,187.48l-56.34-32.53c-4-2.31-9,0.58-9,5.2v65.06c0,4.62,5,7.51,9,5.2l56.34-32.53
+			C214.51,195.56,214.51,189.79,210.51,187.48z"/>
+	</g>
+	<path class="st0" d="M436.14,229.71l14.04,24.32l-42.85,74.21h-28.08l42.85-74.21l-50.68-87.78h28.08L436.14,229.71z
+		 M500.86,166.25h-28.08l-36.64,63.46h28.08L500.86,166.25z"/>
+	<path class="st0" d="M671.9,180.5l-0.01,24.36h-71.27l14.04-24.32L671.9,180.5z M590.78,252.87c-33.24,0-60.19-26.95-60.19-60.19
+		s26.95-60.19,60.19-60.19c8.57,0,16.73,1.8,24.12,5.05l11.84-20.51c-10.83-5.61-23.04-8.78-35.96-8.78
+		c-46.63,0-84.44,37.8-84.44,84.44s37.8,84.44,84.44,84.44c30.99,0,57.93-18.03,71.64-44.54l-16-27.71
+		C641.09,232.23,618.17,252.87,590.78,252.87z"/>
+	<path class="st0" d="M341.62,246.59c-5.96,4.92-13.61,7.88-21.95,7.88c-15.28,0-28.25-9.94-32.78-23.7l88.91,0
+		c0.67-3.5,1.02-7.1,1.02-10.8c0-31.56-25.59-57.15-57.15-57.15c-16.22,0-30.87,6.76-41.27,17.61l12.14,21.04
+		c6.12-9.62,16.88-16,29.13-16c15.26,0,28.21,9.91,32.76,23.65l-88.88,0c-0.67,3.51-1.03,7.14-1.03,10.85
+		c0,31.56,25.59,57.15,57.15,57.15c12.45,0,23.97-3.98,33.35-10.74L341.62,246.59z"/>
+	<path class="st0" d="M757.56,246.59c-5.96,4.92-13.61,7.88-21.95,7.88c-15.28,0-28.25-9.94-32.78-23.7l88.91,0
+		c0.67-3.5,1.02-7.1,1.02-10.8c0-31.56-25.59-57.15-57.15-57.15c-16.22,0-30.87,6.76-41.27,17.61l12.14,21.04
+		c6.12-9.62,16.88-16,29.13-16c15.26,0,28.21,9.91,32.76,23.65l-88.88,0c-0.67,3.51-1.03,7.14-1.03,10.85
+		c0,31.56,25.59,57.15,57.15,57.15c12.45,0,23.97-3.98,33.35-10.74L757.56,246.59z"/>
+</g>
+</svg>
diff --git a/docs/logo/icon.svg b/docs/logo/icon.svg
deleted file mode 100644
index ab6f785c3..000000000
--- a/docs/logo/icon.svg
+++ /dev/null
@@ -1,62 +0,0 @@
-<svg width="640" height="640" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <mask id="prefix__a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="37" y="12" width="588" height="556">
-        <path
-            d="M206.788 480.08c-5.026-2.455-7.729.722-7.729 8.439 0 7.717.294 35.453 6.306 47.25a57.88 57.88 0 0025.293 25.293c9.463 4.821 21.161 5.957 40.623 6.225 53.598-2.39 100.504-30.509 128.665-72.305 2.5-3.711-.25-8.557-4.725-8.557H267.276c-17.766 0-44.453 1.487-60.488-6.345zM184.75 241.45c0-7.896-10.44-10.725-14.387-3.886a781644.405 781644.405 0 01-49.776 86.209c-40.45 70.047-26.516 163.98 51.459 216.834 9.646 6.539 17.363-3.858 15.491-12.001-3.981-16.646-2.787-35.128-2.787-52.213V241.45zM495.215 314.856c.387 5.58 4.49 6.333 11.173 2.474 6.684-3.858 30.556-17.981 37.767-29.086a57.878 57.878 0 009.258-34.551c-.556-10.606-5.421-21.305-14.92-38.293-28.869-45.223-76.674-71.785-126.951-75.274-4.464-.31-7.286 4.494-5.048 8.369L470.467 259.3c8.882 15.385 23.514 37.753 24.748 55.556zM299.572 453.254c-6.838 3.948-4.068 14.403 3.828 14.403 20.774-.001 53.356-.002 99.547.002 80.888.007 155.269-59.027 162.055-152.982.839-11.623-12.023-13.108-18.139-7.415-12.425 11.77-29.028 19.978-43.824 28.52L299.572 453.254zM211.794 149.177c4.638-3.124 3.239-7.054-3.444-10.913-6.683-3.858-30.851-17.471-44.073-18.163a57.881 57.881 0 00-34.551 9.257c-8.907 5.785-15.74 15.348-25.703 32.068-24.73 47.613-23.83 102.294-1.714 147.58 1.964 4.021 7.535 4.062 9.773.187l63.972-110.804c8.883-15.386 20.939-39.241 35.74-49.212zM429.475 249.411c6.838 3.948 14.507-3.678 10.559-10.516-10.388-17.99-26.679-46.207-49.771-86.212C349.825 82.629 261.51 47.73 176.749 88.831c-10.486 5.084-5.34 16.966 2.648 19.416 16.406 4.876 31.815 15.15 46.611 23.693l203.467 117.471z"
-            fill="#D9D9D9" />
-    </mask>
-    <g mask="url(#prefix__a)">
-        <path fill="#28A7E5" d="M48.574 46.727h555.617v547.9H48.574z" />
-        <g filter="url(#prefix__filter0_f_477_98045)">
-            <circle cx="760.94" cy="400.003" r="525.682" fill="#9F59FF" />
-        </g>
-        <g filter="url(#prefix__filter1_f_477_98045)">
-            <circle cx="751.928" cy="179.218" r="230.8" fill="#FF2FC5" />
-        </g>
-        <g filter="url(#prefix__filter2_f_477_98045)">
-            <circle cx="-69.128" cy="621.8" r="289.384" fill="#42C7F1" />
-        </g>
-    </g>
-    <g style="mix-blend-mode:overlay" opacity=".6">
-        <path d="M184.769 452.351v-210.91c0-7.896-10.452-10.696-14.4-3.859l-53.111 91.991 67.511 122.778z"
-            fill="url(#prefix__paint0_linear_477_98045)" />
-        <path d="M482.477 347.684L299.823 453.14c-6.838 3.947-4.037 14.4 3.858 14.4h106.222l72.574-119.856z"
-            fill="url(#prefix__paint1_linear_477_98045)" />
-        <path d="M246.704 143.775L429.358 249.23c6.837 3.948 14.489-3.704 10.541-10.541l-53.111-91.991-140.084-2.923z"
-            fill="url(#prefix__paint2_linear_477_98045)" />
-    </g>
-    <defs>
-        <linearGradient id="prefix__paint0_linear_477_98045" x1="147.247" y1="212.641" x2="147.247" y2="451.866"
-            gradientUnits="userSpaceOnUse">
-            <stop stop-color="#fff" />
-            <stop offset="1" stop-color="#fff" stop-opacity="0" />
-        </linearGradient>
-        <linearGradient id="prefix__paint1_linear_477_98045" x1="293.643" y1="500.035" x2="500.818" y2="380.422"
-            gradientUnits="userSpaceOnUse">
-            <stop stop-color="#fff" />
-            <stop offset="1" stop-color="#fff" stop-opacity="0" />
-        </linearGradient>
-        <linearGradient id="prefix__paint2_linear_477_98045" x1="473.06" y1="231.135" x2="265.885" y2="111.522"
-            gradientUnits="userSpaceOnUse">
-            <stop stop-color="#fff" />
-            <stop offset="1" stop-color="#fff" stop-opacity="0" />
-        </linearGradient>
-        <filter id="prefix__filter0_f_477_98045" x="-227.756" y="-588.694" width="1977.39" height="1977.39"
-            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-            <feFlood flood-opacity="0" result="BackgroundImageFix" />
-            <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-            <feGaussianBlur stdDeviation="231.507" result="effect1_foregroundBlur_477_98045" />
-        </filter>
-        <filter id="prefix__filter1_f_477_98045" x="360.921" y="-211.79" width="782.014" height="782.016"
-            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-            <feFlood flood-opacity="0" result="BackgroundImageFix" />
-            <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-            <feGaussianBlur stdDeviation="80.104" result="effect1_foregroundBlur_477_98045" />
-        </filter>
-        <filter id="prefix__filter2_f_477_98045" x="-550.261" y="140.667" width="962.263" height="962.265"
-            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-            <feFlood flood-opacity="0" result="BackgroundImageFix" />
-            <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-            <feGaussianBlur stdDeviation="95.874" result="effect1_foregroundBlur_477_98045" />
-        </filter>
-    </defs>
-</svg>
\ No newline at end of file
diff --git a/docs/logo/light.svg b/docs/logo/light.svg
index 9883738e8..fa2528c2f 100644
--- a/docs/logo/light.svg
+++ b/docs/logo/light.svg
@@ -1,77 +1,31 @@
-<svg width="2122" height="695" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <mask id="prefix__a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="60" y="41" width="588" height="556">
-        <path
-            d="M229.788 509.08c-5.026-2.455-7.729.722-7.729 8.439 0 7.717.294 35.453 6.306 47.25a57.88 57.88 0 0025.293 25.293c9.463 4.821 21.161 5.957 40.623 6.225 53.598-2.39 100.504-30.509 128.665-72.305 2.5-3.711-.25-8.557-4.725-8.557H290.276c-17.766 0-44.453 1.487-60.488-6.345zM207.75 270.45c0-7.896-10.44-10.725-14.387-3.886a781644.405 781644.405 0 01-49.776 86.209c-40.45 70.047-26.516 163.98 51.459 216.834 9.646 6.539 17.363-3.858 15.491-12.001-3.981-16.646-2.787-35.128-2.787-52.213V270.45zM518.215 343.856c.387 5.58 4.49 6.333 11.173 2.474 6.684-3.858 30.556-17.981 37.767-29.086a57.878 57.878 0 009.258-34.551c-.556-10.606-5.421-21.305-14.92-38.293-28.869-45.223-76.674-71.785-126.951-75.274-4.464-.31-7.286 4.494-5.048 8.369L493.467 288.3c8.882 15.385 23.514 37.753 24.748 55.556zM322.572 482.254c-6.838 3.948-4.068 14.403 3.828 14.403 20.774-.001 53.356-.002 99.547.002 80.888.007 155.269-59.027 162.055-152.982.839-11.623-12.023-13.108-18.139-7.415-12.425 11.77-29.028 19.978-43.824 28.52L322.572 482.254zM234.794 178.177c4.638-3.124 3.239-7.054-3.444-10.913-6.683-3.858-30.851-17.471-44.073-18.163a57.881 57.881 0 00-34.551 9.257c-8.907 5.785-15.74 15.348-25.703 32.068-24.729 47.613-23.83 102.294-1.714 147.58 1.964 4.021 7.535 4.062 9.773.187l63.972-110.804c8.883-15.386 20.939-39.241 35.74-49.212zM452.475 278.411c6.838 3.948 14.507-3.678 10.559-10.516-10.388-17.99-26.679-46.207-49.771-86.212-40.438-70.054-128.753-104.953-213.514-63.852-10.486 5.084-5.34 16.966 2.648 19.416 16.406 4.876 31.815 15.15 46.611 23.693l203.467 117.471z"
-            fill="#D9D9D9" />
-    </mask>
-    <g mask="url(#prefix__a)">
-        <path fill="#28A7E5" d="M71.574 75.727h555.617v547.9H71.574z" />
-        <g filter="url(#prefix__filter0_f_473_94381)">
-            <circle cx="783.94" cy="429.003" r="525.682" fill="#9F59FF" />
-        </g>
-        <g filter="url(#prefix__filter1_f_473_94381)">
-            <circle cx="774.928" cy="208.218" r="230.8" fill="#FF2FC5" />
-        </g>
-        <g filter="url(#prefix__filter2_f_473_94381)">
-            <circle cx="-46.128" cy="650.8" r="289.384" fill="#42C7F1" />
-        </g>
-    </g>
-    <g style="mix-blend-mode:overlay" opacity=".6">
-        <path d="M207.769 481.351v-210.91c0-7.896-10.452-10.696-14.4-3.859l-53.111 91.991 67.511 122.778z"
-            fill="url(#prefix__paint0_linear_473_94381)" />
-        <path d="M505.477 376.684L322.823 482.14c-6.838 3.947-4.037 14.4 3.858 14.4h106.222l72.574-119.856z"
-            fill="url(#prefix__paint1_linear_473_94381)" />
-        <path d="M269.704 172.775L452.358 278.23c6.837 3.948 14.489-3.704 10.541-10.541l-53.111-91.991-140.084-2.923z"
-            fill="url(#prefix__paint2_linear_473_94381)" />
-    </g>
-    <rect x="750.836" y="233.035" width="50.876" height="232.957" rx="8.926" fill="#232833" />
-    <rect x="908.816" y="233.035" width="50.876" height="232.957" rx="8.926" fill="#232833" />
-    <rect x="948.09" y="325.861" width="42.843" height="191.899" rx="8.926" transform="rotate(90 948.09 325.861)"
-        fill="#232833" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M1180.16 300.625c0 .767.17 1.524.5 2.215l74.08 153.977a7.141 7.141 0 009.53 3.338l28.96-13.931c3.55-1.71 5.05-5.976 3.34-9.53l-65.98-137.134a7.142 7.142 0 00-6.44-4.044h-38.88a5.104 5.104 0 00-5.11 5.109z"
-        fill="#232833" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M1325.98 295.516a7.127 7.127 0 00-6.56 4.337l-69.52 162.868a51.763 51.763 0 01-36.07 30.144l-6.89 1.575a7.136 7.136 0 00-5.37 8.552l7.16 31.324a7.14 7.14 0 008.55 5.369l6.89-1.575a98.19 98.19 0 0068.42-57.17l74.9-175.481c2.01-4.71-1.45-9.943-6.57-9.943h-34.94zM1592.51 246.616c0-2.865-1.7-5.465-4.37-6.507-19.2-7.502-43.75-12.882-76.4-12.88-33.54.001-63.79 11.942-85.52 35.207-21.62 23.16-32.91 55.484-32.75 92.973.31 70.559 54.81 116.829 115.04 115.93 44.56-.665 66.84-9.611 79.35-16.372 10.15-5.483 15.81-15.96 15.81-26.624v-71.516c0-12.915-10.47-23.385-23.38-23.385h-64.98a7.136 7.136 0 00-7.14 7.141v32.132c0 3.943 3.19 7.14 7.14 7.14h34.81c3.94 0 7.14 3.197 7.14 7.14v25.902c0 3.017-1.89 5.731-4.79 6.569-9.12 2.636-23.18 5.145-44.65 5.466-35.45.529-67.75-26.021-67.93-69.722-.12-28.107 8.23-48.219 20.26-61.097 11.92-12.773 29.34-20.471 51.59-20.472 30.65-.001 50.65 5.61 64.46 11.767 1.75.779 3.39 1.554 4.93 2.326 5.06 2.531 11.38-.94 11.38-6.6v-34.518z"
-        fill="#232833" />
-    <rect x="1834.4" y="288.375" width="50.876" height="177.618" rx="8.926" fill="#232833" />
-    <rect x="1948.64" y="426.721" width="46.413" height="39.272" rx="8.926" fill="#232833" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M1862.75 351.384a5.36 5.36 0 01-1.58-3.798l3.57-14.047c0-1.714-13.41 11.546 2.22-4.313 15.64-15.859 33.93-34.157 61.83-34.603 35.28 0 66.27 20.083 66.27 58.81v97.319c0 .037-.03.068-.07.068h-46.28a.069.069 0 01-.07-.068V354.326c0-11.316-10.71-19.538-27.66-19.538-16.96 0-30.31 7.017-44.86 20.556-2.16 2.015-5.55 2.032-7.64-.054l-5.73-3.906zM1088.55 288.375c-26.99 0-50.02 9.123-66.2 26.31-16 16.987-23.385 39.795-23.385 63.792 0 22.378 4.885 46.256 20.575 64.782 16.26 19.193 40.95 28.982 72.64 28.982 26.85 0 51.31-7.601 70.74-16.448a3.534 3.534 0 002.06-3.222v-39.972c0-2.794-3.07-4.519-5.49-3.136-16.86 9.601-41.12 19.936-67.31 19.936-22.7 0-33.91-6.695-39.95-13.829-4.79-5.653-8.11-13.663-9.58-24.113h84.69l.12.002h35.71c1.97 0 3.57-1.597 3.54-3.568-.28-17.172-2.67-39.756-12.31-59.157-5.31-10.697-13.13-21.024-24.51-28.628-11.52-7.692-25.4-11.731-41.34-11.731zm32.59 74.52c-1.22-5.491-2.88-10.624-5.11-15.099-2.78-5.597-6.11-9.505-9.94-12.062-3.69-2.469-9.09-4.516-17.54-4.516-17.07 0-28.13 5.529-35.01 12.838-4.44 4.71-7.92 11.005-9.91 18.839h77.51zM1723.16 288.375c-27 0-50.02 9.123-66.21 26.31-15.99 16.987-23.38 39.795-23.38 63.792 0 22.378 4.88 46.256 20.58 64.782 16.25 19.193 40.94 28.982 72.64 28.982 26.85 0 51.31-7.601 70.74-16.448a3.534 3.534 0 002.06-3.222v-39.972c0-2.794-3.07-4.519-5.5-3.136-16.85 9.601-41.11 19.936-67.3 19.936-22.7 0-33.91-6.695-39.95-13.829-4.79-5.653-8.11-13.663-9.58-24.113h84.68l.13.002h35.7c1.97 0 3.58-1.598 3.53-3.57-.4-17.942-3.91-40.436-14.04-59.62-11.36-21.536-31.95-39.894-64.1-39.894zm31.77 74.52c-1.4-5.258-3.24-10.24-5.56-14.634-5.83-11.054-13.62-17.043-26.21-17.043-17.07 0-28.13 5.529-35.02 12.838-4.43 4.71-7.92 11.005-9.9 18.839h76.69z"
-        fill="#232833" />
-    <defs>
-        <linearGradient id="prefix__paint0_linear_473_94381" x1="170.247" y1="241.641" x2="170.247" y2="480.866"
-            gradientUnits="userSpaceOnUse">
-            <stop stop-color="#fff" />
-            <stop offset="1" stop-color="#fff" stop-opacity="0" />
-        </linearGradient>
-        <linearGradient id="prefix__paint1_linear_473_94381" x1="316.643" y1="529.035" x2="523.818" y2="409.422"
-            gradientUnits="userSpaceOnUse">
-            <stop stop-color="#fff" />
-            <stop offset="1" stop-color="#fff" stop-opacity="0" />
-        </linearGradient>
-        <linearGradient id="prefix__paint2_linear_473_94381" x1="496.06" y1="260.135" x2="288.885" y2="140.522"
-            gradientUnits="userSpaceOnUse">
-            <stop stop-color="#fff" />
-            <stop offset="1" stop-color="#fff" stop-opacity="0" />
-        </linearGradient>
-        <filter id="prefix__filter0_f_473_94381" x="-204.756" y="-559.694" width="1977.39" height="1977.39"
-            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-            <feFlood flood-opacity="0" result="BackgroundImageFix" />
-            <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-            <feGaussianBlur stdDeviation="231.507" result="effect1_foregroundBlur_473_94381" />
-        </filter>
-        <filter id="prefix__filter1_f_473_94381" x="383.921" y="-182.79" width="782.014" height="782.016"
-            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-            <feFlood flood-opacity="0" result="BackgroundImageFix" />
-            <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-            <feGaussianBlur stdDeviation="80.104" result="effect1_foregroundBlur_473_94381" />
-        </filter>
-        <filter id="prefix__filter2_f_473_94381" x="-527.261" y="169.667" width="962.263" height="962.265"
-            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-            <feFlood flood-opacity="0" result="BackgroundImageFix" />
-            <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-            <feGaussianBlur stdDeviation="95.874" result="effect1_foregroundBlur_473_94381" />
-        </filter>
-    </defs>
-</svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1015 435" style="enable-background:new 0 0 1015 435;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#A34CDB;}
+</style>
+<g>
+	<path d="M883.39,273.67v-59.61c0-17.87-10.82-28.68-24.92-28.68c-6.34,0-13.28,1.62-19.04,5.39l15.6-27.02
+		c3.02-0.62,5.94-0.95,8.56-0.95c27.74,0,44.2,18.57,43.97,49.84v61.02H883.39z M804.8,176.76v96.91h24.16V162.81L804.8,176.76z"/>
+	<g>
+		<path d="M131.7,111.68h-24.16v161.99h24.16V111.68z M246.98,111.68h-24.16v161.99h24.16V111.68z"/>
+		<path class="st0" d="M210.51,187.48l-56.34-32.53c-4-2.31-9,0.58-9,5.2v65.06c0,4.62,5,7.51,9,5.2l56.34-32.53
+			C214.51,195.56,214.51,189.79,210.51,187.48z"/>
+	</g>
+	<path d="M436.14,229.71l14.04,24.32l-42.85,74.21h-28.08l42.85-74.21l-50.68-87.78h28.08L436.14,229.71z M500.86,166.25h-28.08
+		l-36.64,63.46h28.08L500.86,166.25z"/>
+	<path d="M671.9,180.5l-0.01,24.36h-71.27l14.04-24.32L671.9,180.5z M590.78,252.87c-33.24,0-60.19-26.95-60.19-60.19
+		s26.95-60.19,60.19-60.19c8.57,0,16.73,1.8,24.12,5.05l11.84-20.51c-10.83-5.61-23.04-8.78-35.96-8.78
+		c-46.63,0-84.44,37.8-84.44,84.44s37.8,84.44,84.44,84.44c30.99,0,57.93-18.03,71.64-44.54l-16-27.71
+		C641.09,232.23,618.17,252.87,590.78,252.87z"/>
+	<path d="M341.62,246.59c-5.96,4.92-13.61,7.88-21.95,7.88c-15.28,0-28.25-9.94-32.78-23.7l88.91,0c0.67-3.5,1.02-7.1,1.02-10.8
+		c0-31.56-25.59-57.15-57.15-57.15c-16.22,0-30.87,6.76-41.27,17.61l12.14,21.04c6.12-9.62,16.88-16,29.13-16
+		c15.26,0,28.21,9.91,32.76,23.65l-88.88,0c-0.67,3.51-1.03,7.14-1.03,10.85c0,31.56,25.59,57.15,57.15,57.15
+		c12.45,0,23.97-3.98,33.35-10.74L341.62,246.59z"/>
+	<path d="M757.56,246.59c-5.96,4.92-13.61,7.88-21.95,7.88c-15.28,0-28.25-9.94-32.78-23.7l88.91,0c0.67-3.5,1.02-7.1,1.02-10.8
+		c0-31.56-25.59-57.15-57.15-57.15c-16.22,0-30.87,6.76-41.27,17.61l12.14,21.04c6.12-9.62,16.88-16,29.13-16
+		c15.26,0,28.21,9.91,32.76,23.65l-88.88,0c-0.67,3.51-1.03,7.14-1.03,10.85c0,31.56,25.59,57.15,57.15,57.15
+		c12.45,0,23.97-3.98,33.35-10.74L757.56,246.59z"/>
+</g>
+</svg>

From 769d34f8f926c3471c988d802f1c3392b9d750bd Mon Sep 17 00:00:00 2001
From: James <james.russo@heygen.com>
Date: Tue, 24 Mar 2026 00:04:26 +0000
Subject: [PATCH 4/7] ci: add docs validation workflow and skip CI on docs-only
 changes

- New docs.yml: runs `mint validate` and `mint broken-links` on docs/** changes
- ci.yml: paths-ignore docs/**, *.md so build/typecheck/tests don't run on docs-only PRs
- regression.yml: same paths-ignore to skip Docker regression tests on docs-only PRs

No branch protection is configured, so paths-ignore won't block merges.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .github/workflows/ci.yml         |  8 ++++++++
 .github/workflows/docs.yml       | 35 ++++++++++++++++++++++++++++++++
 .github/workflows/regression.yml |  8 ++++++++
 3 files changed, 51 insertions(+)
 create mode 100644 .github/workflows/docs.yml

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index b3346785d..f88f89e12 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -2,8 +2,16 @@ name: CI
 
 on:
   pull_request:
+    paths-ignore:
+      - "docs/**"
+      - "*.md"
+      - "DOCS_GUIDELINES.md"
   push:
     branches: [main]
+    paths-ignore:
+      - "docs/**"
+      - "*.md"
+      - "DOCS_GUIDELINES.md"
 
 concurrency:
   group: ci-${{ github.ref }}
diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
new file mode 100644
index 000000000..ad887ec8d
--- /dev/null
+++ b/.github/workflows/docs.yml
@@ -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
diff --git a/.github/workflows/regression.yml b/.github/workflows/regression.yml
index c131bf8c9..6839c403a 100644
--- a/.github/workflows/regression.yml
+++ b/.github/workflows/regression.yml
@@ -2,9 +2,17 @@ name: regression
 
 on:
   pull_request:
+    paths-ignore:
+      - "docs/**"
+      - "*.md"
+      - "DOCS_GUIDELINES.md"
   push:
     branches:
       - main
+    paths-ignore:
+      - "docs/**"
+      - "*.md"
+      - "DOCS_GUIDELINES.md"
 
 jobs:
   regression-shards:

From 7adcb2322d8fd7de51d7556d3edf1c8f2f85e697 Mon Sep 17 00:00:00 2001
From: James <james.russo@heygen.com>
Date: Tue, 24 Mar 2026 00:05:57 +0000
Subject: [PATCH 5/7] ci: use path-based skip instead of paths-ignore for
 required checks

The repo has a ruleset requiring these checks: Build, Typecheck,
Test: core, Test: engine, Test: runtime contract, regression.
With paths-ignore, docs-only PRs would never report these checks,
blocking merge forever.

Fix: add a `changes` job using dorny/paths-filter that detects
whether code files changed. Each job uses `if: needs.changes.outputs.code == 'true'`
which causes GitHub to report the job as "skipped" (counts as passing)
rather than "never started" (counts as pending).

The regression summary job explicitly handles the no-code-changes case
by checking the filter output before evaluating shard results.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .github/workflows/ci.yml         | 41 +++++++++++++++++++++++++-------
 .github/workflows/regression.yml | 37 ++++++++++++++++++++--------
 2 files changed, 60 insertions(+), 18 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index f88f89e12..f13a6ab0b 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -2,24 +2,41 @@ name: CI
 
 on:
   pull_request:
-    paths-ignore:
-      - "docs/**"
-      - "*.md"
-      - "DOCS_GUIDELINES.md"
   push:
     branches: [main]
-    paths-ignore:
-      - "docs/**"
-      - "*.md"
-      - "DOCS_GUIDELINES.md"
 
 concurrency:
   group: ci-${{ github.ref }}
   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*"
+              - ".github/workflows/ci.yml"
+              - ".github/workflows/regression.yml"
+
   build:
     name: Build
+    needs: changes
+    if: needs.changes.outputs.code == 'true'
     runs-on: ubuntu-latest
     timeout-minutes: 10
     steps:
@@ -36,6 +53,8 @@ jobs:
 
   typecheck:
     name: Typecheck
+    needs: changes
+    if: needs.changes.outputs.code == 'true'
     runs-on: ubuntu-latest
     timeout-minutes: 10
     steps:
@@ -53,6 +72,8 @@ jobs:
 
   test-core:
     name: "Test: core"
+    needs: changes
+    if: needs.changes.outputs.code == 'true'
     runs-on: ubuntu-latest
     timeout-minutes: 10
     steps:
@@ -69,6 +90,8 @@ jobs:
 
   test-engine:
     name: "Test: engine"
+    needs: changes
+    if: needs.changes.outputs.code == 'true'
     runs-on: ubuntu-latest
     timeout-minutes: 10
     steps:
@@ -85,6 +108,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:
diff --git a/.github/workflows/regression.yml b/.github/workflows/regression.yml
index 6839c403a..c2a27f9b9 100644
--- a/.github/workflows/regression.yml
+++ b/.github/workflows/regression.yml
@@ -2,20 +2,33 @@ name: regression
 
 on:
   pull_request:
-    paths-ignore:
-      - "docs/**"
-      - "*.md"
-      - "DOCS_GUIDELINES.md"
   push:
     branches:
       - main
-    paths-ignore:
-      - "docs/**"
-      - "*.md"
-      - "DOCS_GUIDELINES.md"
 
 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"
+              - ".github/workflows/regression.yml"
+
   regression-shards:
+    needs: changes
+    if: needs.changes.outputs.code == 'true'
     runs-on: ubuntu-latest
     timeout-minutes: 40
     strategy:
@@ -91,11 +104,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

From 623ba1dc603db2b653a67431ceb2ebd3c5324082 Mon Sep 17 00:00:00 2001
From: James <james.russo@heygen.com>
Date: Tue, 24 Mar 2026 00:09:13 +0000
Subject: [PATCH 6/7] chore(docs): update to Prism brand logo, favicon, and
 colors

Replace pre-Prism logos with the current Prism brand assets:
- Logo light: HeyGen_Logo_Prism_Black.svg (gradient wordmark for light bg)
- Logo dark: HeyGen_Logo_Prism_White.svg (gradient wordmark for dark bg)
- Favicon: PRISM_ORB.svg (the new Prism orb icon)
- Brand color: #00C4FF (Prism cyan) replacing #7559FF (old purple)
- Update Mermaid diagram colors in determinism.mdx to match

Also includes CI fix: switch from paths-ignore to dorny/paths-filter
with `if:` conditions so required checks auto-pass on docs-only PRs
instead of hanging as "pending".

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 docs/concepts/determinism.mdx |  10 +-
 docs/docs.json                |   6 +-
 docs/favicon.svg              | 191 ++++++++++++++++++-
 docs/logo/dark.svg            | 343 ++++++++++++++++++++++++++++++----
 docs/logo/light.svg           | 338 ++++++++++++++++++++++++++++++---
 5 files changed, 810 insertions(+), 78 deletions(-)

diff --git a/docs/concepts/determinism.mdx b/docs/concepts/determinism.mdx
index 488fbe408..11788c6a2 100644
--- a/docs/concepts/determinism.mdx
+++ b/docs/concepts/determinism.mdx
@@ -30,11 +30,11 @@ graph LR
     B --> C["Capture<br/>beginFrame API"]
     C --> D["Encode<br/>FFmpeg"]
     D --> E["MP4"]
-    style A fill:#7559FF,color:#fff
-    style B fill:#7559FF,color:#fff
-    style C fill:#7559FF,color:#fff
-    style D fill:#7559FF,color:#fff
-    style E fill:#735CE5,color:#fff
+    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
diff --git a/docs/docs.json b/docs/docs.json
index cf7b4a4ea..b55aff270 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -3,9 +3,9 @@
   "name": "Hyperframes",
   "theme": "mint",
   "colors": {
-    "primary": "#7559FF",
-    "light": "#9F59FF",
-    "dark": "#735CE5"
+    "primary": "#00C4FF",
+    "light": "#00C4FF",
+    "dark": "#00A8E1"
   },
   "logo": {
     "light": "/logo/light.svg",
diff --git a/docs/favicon.svg b/docs/favicon.svg
index 17f42caf2..dd3a15678 100644
--- a/docs/favicon.svg
+++ b/docs/favicon.svg
@@ -1,12 +1,189 @@
-<svg width="56" height="62" viewBox="0 0 56 62" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="56" height="61.5777" rx="5.35458" fill="#7559FF"/>
-<g clip-path="url(#clip0_6999_18707)">
-<path d="M10.709 10.709V50.8683H16.7329V10.709H10.709ZM45.2907 10.709H39.2668V50.8683H45.2907V10.709Z" fill="white"/>
-<path d="M36.0691 29.4973L22.0893 21.3981C21.0979 20.8223 19.8564 21.5415 19.8564 22.6908V38.8871C19.8564 40.0364 21.0979 40.7556 22.0893 40.1798L36.0691 32.0806C37.0605 31.5092 37.0605 30.0709 36.0691 29.4973Z" fill="white"/>
+<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>
-<clipPath id="clip0_6999_18707">
-<rect width="45.2908" height="50.8685" fill="white" transform="translate(5.35449 5.35547)"/>
+<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>
diff --git a/docs/logo/dark.svg b/docs/logo/dark.svg
index 27ce2c3e6..5d9cf5446 100644
--- a/docs/logo/dark.svg
+++ b/docs/logo/dark.svg
@@ -1,32 +1,311 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1015 435" style="enable-background:new 0 0 1015 435;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-	.st1{fill:#A34CDB;}
-</style>
-<g>
-	<path class="st0" d="M883.39,273.67v-59.61c0-17.87-10.82-28.68-24.92-28.68c-6.34,0-13.28,1.62-19.04,5.39l15.6-27.02
-		c3.02-0.62,5.94-0.95,8.56-0.95c27.74,0,44.2,18.57,43.97,49.84v61.02H883.39z M804.8,176.76v96.91h24.16V162.81L804.8,176.76z"/>
-	<g>
-		<path class="st0" d="M131.7,111.68h-24.16v161.99h24.16V111.68z M246.98,111.68h-24.16v161.99h24.16V111.68z"/>
-		<path class="st1" d="M210.51,187.48l-56.34-32.53c-4-2.31-9,0.58-9,5.2v65.06c0,4.62,5,7.51,9,5.2l56.34-32.53
-			C214.51,195.56,214.51,189.79,210.51,187.48z"/>
-	</g>
-	<path class="st0" d="M436.14,229.71l14.04,24.32l-42.85,74.21h-28.08l42.85-74.21l-50.68-87.78h28.08L436.14,229.71z
-		 M500.86,166.25h-28.08l-36.64,63.46h28.08L500.86,166.25z"/>
-	<path class="st0" d="M671.9,180.5l-0.01,24.36h-71.27l14.04-24.32L671.9,180.5z M590.78,252.87c-33.24,0-60.19-26.95-60.19-60.19
-		s26.95-60.19,60.19-60.19c8.57,0,16.73,1.8,24.12,5.05l11.84-20.51c-10.83-5.61-23.04-8.78-35.96-8.78
-		c-46.63,0-84.44,37.8-84.44,84.44s37.8,84.44,84.44,84.44c30.99,0,57.93-18.03,71.64-44.54l-16-27.71
-		C641.09,232.23,618.17,252.87,590.78,252.87z"/>
-	<path class="st0" d="M341.62,246.59c-5.96,4.92-13.61,7.88-21.95,7.88c-15.28,0-28.25-9.94-32.78-23.7l88.91,0
-		c0.67-3.5,1.02-7.1,1.02-10.8c0-31.56-25.59-57.15-57.15-57.15c-16.22,0-30.87,6.76-41.27,17.61l12.14,21.04
-		c6.12-9.62,16.88-16,29.13-16c15.26,0,28.21,9.91,32.76,23.65l-88.88,0c-0.67,3.51-1.03,7.14-1.03,10.85
-		c0,31.56,25.59,57.15,57.15,57.15c12.45,0,23.97-3.98,33.35-10.74L341.62,246.59z"/>
-	<path class="st0" d="M757.56,246.59c-5.96,4.92-13.61,7.88-21.95,7.88c-15.28,0-28.25-9.94-32.78-23.7l88.91,0
-		c0.67-3.5,1.02-7.1,1.02-10.8c0-31.56-25.59-57.15-57.15-57.15c-16.22,0-30.87,6.76-41.27,17.61l12.14,21.04
-		c6.12-9.62,16.88-16,29.13-16c15.26,0,28.21,9.91,32.76,23.65l-88.88,0c-0.67,3.51-1.03,7.14-1.03,10.85
-		c0,31.56,25.59,57.15,57.15,57.15c12.45,0,23.97-3.98,33.35-10.74L757.56,246.59z"/>
-</g>
-</svg>
+<?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>
\ No newline at end of file
diff --git a/docs/logo/light.svg b/docs/logo/light.svg
index fa2528c2f..dc7fa020d 100644
--- a/docs/logo/light.svg
+++ b/docs/logo/light.svg
@@ -1,31 +1,307 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1015 435" style="enable-background:new 0 0 1015 435;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#A34CDB;}
-</style>
-<g>
-	<path d="M883.39,273.67v-59.61c0-17.87-10.82-28.68-24.92-28.68c-6.34,0-13.28,1.62-19.04,5.39l15.6-27.02
-		c3.02-0.62,5.94-0.95,8.56-0.95c27.74,0,44.2,18.57,43.97,49.84v61.02H883.39z M804.8,176.76v96.91h24.16V162.81L804.8,176.76z"/>
-	<g>
-		<path d="M131.7,111.68h-24.16v161.99h24.16V111.68z M246.98,111.68h-24.16v161.99h24.16V111.68z"/>
-		<path class="st0" d="M210.51,187.48l-56.34-32.53c-4-2.31-9,0.58-9,5.2v65.06c0,4.62,5,7.51,9,5.2l56.34-32.53
-			C214.51,195.56,214.51,189.79,210.51,187.48z"/>
-	</g>
-	<path d="M436.14,229.71l14.04,24.32l-42.85,74.21h-28.08l42.85-74.21l-50.68-87.78h28.08L436.14,229.71z M500.86,166.25h-28.08
-		l-36.64,63.46h28.08L500.86,166.25z"/>
-	<path d="M671.9,180.5l-0.01,24.36h-71.27l14.04-24.32L671.9,180.5z M590.78,252.87c-33.24,0-60.19-26.95-60.19-60.19
-		s26.95-60.19,60.19-60.19c8.57,0,16.73,1.8,24.12,5.05l11.84-20.51c-10.83-5.61-23.04-8.78-35.96-8.78
-		c-46.63,0-84.44,37.8-84.44,84.44s37.8,84.44,84.44,84.44c30.99,0,57.93-18.03,71.64-44.54l-16-27.71
-		C641.09,232.23,618.17,252.87,590.78,252.87z"/>
-	<path d="M341.62,246.59c-5.96,4.92-13.61,7.88-21.95,7.88c-15.28,0-28.25-9.94-32.78-23.7l88.91,0c0.67-3.5,1.02-7.1,1.02-10.8
-		c0-31.56-25.59-57.15-57.15-57.15c-16.22,0-30.87,6.76-41.27,17.61l12.14,21.04c6.12-9.62,16.88-16,29.13-16
-		c15.26,0,28.21,9.91,32.76,23.65l-88.88,0c-0.67,3.51-1.03,7.14-1.03,10.85c0,31.56,25.59,57.15,57.15,57.15
-		c12.45,0,23.97-3.98,33.35-10.74L341.62,246.59z"/>
-	<path d="M757.56,246.59c-5.96,4.92-13.61,7.88-21.95,7.88c-15.28,0-28.25-9.94-32.78-23.7l88.91,0c0.67-3.5,1.02-7.1,1.02-10.8
-		c0-31.56-25.59-57.15-57.15-57.15c-16.22,0-30.87,6.76-41.27,17.61l12.14,21.04c6.12-9.62,16.88-16,29.13-16
-		c15.26,0,28.21,9.91,32.76,23.65l-88.88,0c-0.67,3.51-1.03,7.14-1.03,10.85c0,31.56,25.59,57.15,57.15,57.15
-		c12.45,0,23.97-3.98,33.35-10.74L757.56,246.59z"/>
-</g>
-</svg>
+<?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>
\ No newline at end of file

From 43283348eb968ac54028a17f1deb41a07db2e487 Mon Sep 17 00:00:00 2001
From: James <james.russo@heygen.com>
Date: Tue, 24 Mar 2026 00:15:05 +0000
Subject: [PATCH 7/7] ci: remove workflow files from path filters
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The CI and regression path filters included their own workflow files,
which meant any PR that changed CI config would trigger the full
build/test/regression suite. Workflow file changes don't need code
validation — they need a test run of the workflow itself, which
happens automatically.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .github/workflows/ci.yml         | 2 --
 .github/workflows/regression.yml | 1 -
 2 files changed, 3 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index f13a6ab0b..81f8dbbeb 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -30,8 +30,6 @@ jobs:
               - "pnpm-workspace.yaml"
               - "tsconfig*.json"
               - "Dockerfile*"
-              - ".github/workflows/ci.yml"
-              - ".github/workflows/regression.yml"
 
   build:
     name: Build
diff --git a/.github/workflows/regression.yml b/.github/workflows/regression.yml
index c2a27f9b9..99f8f9708 100644
--- a/.github/workflows/regression.yml
+++ b/.github/workflows/regression.yml
@@ -24,7 +24,6 @@ jobs:
               - "scripts/**"
               - "Dockerfile*"
               - "pnpm-lock.yaml"
-              - ".github/workflows/regression.yml"
 
   regression-shards:
     needs: changes