Merge pull request #8 from ion-design/codex/readme-usage-guide

[codex] Simplify README usage guide
2026-06-29 16:31:56 -07:00
parent ca476b1a0f 12dc7d9220
commit 2b9ebd9a9b
2 changed files with 234 additions and 300 deletions
@@ -1,326 +1,231 @@
 <p align="center">
  <img src="docs/assets/ditto.svg" alt="ditto.site logo" width="112" />
 </p>
 # ditto.site
 [![CI](https://github.com/ion-design/ditto.site/actions/workflows/ci.yml/badge.svg)](https://github.com/ion-design/ditto.site/actions/workflows/ci.yml)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
 [![Node](https://img.shields.io/badge/node-%3E%3D20-brightgreen.svg)](.nvmrc)
-ditto.site is a deterministic website compiler. Given a public URL, it compiles the
+ditto.site turns a public URL into a self-contained TypeScript app. It captures
-observed rendered site into a modern TypeScript app, defaulting to Next.js App
+what the browser actually rendered, then emits a deterministic Next.js App
-Router with an option for Vite React, using
+Router project by default, or Vite React when requested.
 browser-captured evidence: DOM, computed styles, layout boxes, CSS rules, fonts,
 assets, source metadata, screenshots, interaction states, and motion specs where
 they can be reproduced safely.
-The compiler is not an LLM page author. The normal clone path is a pure
+The compiler is not an LLM page author. It is a capture-to-code pipeline: same
-generation pipeline over a frozen capture, so the same capture produces
+frozen capture in, byte-stable app out.
 byte-stable output. The generated app uses `ditto` naming for clone-specific
 runtime helpers and documentation.
-## What It Produces
+## Usage
-A generated app is a self-contained project under `generated/app/` during
+The hosted URLs below are placeholders until the public service is live:
 validation and under `<out>/<site>/app` for delivery. The default framework is
 Next.js App Router:
- `src/app/layout.tsx`: root layout, captured language, Next metadata, viewport,
+- REST API: `https://api.ditto.site`
-  JSON-LD, and shared multi-route shell.
+- MCP server: `https://mcp.ditto.site/mcp`
 - `src/app/page.tsx` and route pages: JSX reconstructed from the captured render
  tree.
 - `src/app/globals.css`: reset, font faces, design tokens, Tailwind setup when
  enabled.
 - `src/app/ditto.css`: clone-specific CSS that still needs stylesheet emission,
  including pseudo-elements, keyframes, raw CSS fallbacks, and non-Tailwind
  fidelity rules.
 - `src/app/content.ts` or `content.tsx`: semantic editable data when repeated
  regions are promoted into components or sections.
 - `src/app/components/`, `src/app/sections/`, `src/app/svgs/`: generated modules
  split from repeated components, page sections, and inline SVGs.
 - `src/app/ditto/`: small generated runtime helpers for recognized interactions,
  accordions, dropdown menus, and reproducible motion.
 - `src/app/robots.ts`, `src/app/sitemap.ts`, `src/app/llms.txt/route.ts`, and
  sometimes `src/app/llms-full.txt/route.ts`.
 - App Router file-based icons such as `src/app/favicon.ico`, `src/app/icon.png`,
  and `src/app/apple-icon.png` when the source exposes them.
 - `public/assets/cloned/`: materialized images, fonts, manifest files, manifest
  icons/screenshots, and other source assets needed by the clone.
 - `AGENTS.md` and `ARCHITECTURE.md`: generated documentation for the delivered
  app, derived from clone metadata.
-With `--framework=vite` or API option `framework: "vite"`, the generated app is
+### REST API
 a Vite React project. Single-page output uses `index.html`, `src/main.tsx`,
 `src/page.tsx`, `src/globals.css`, and `src/ditto.css`. Multi-route Vite output
 is a Vite multi-page app with one HTML entry per cloned route and route modules
 under `src/routes/<routeKey>/`.
-Validation builds keep internal `data-cid` attributes so gates can align source
+Start a clone job:
 and clone nodes exactly. The exported app strips validation-only ids and only
 keeps deterministic `data-ditto-id` anchors where generated CSS or runtime
 recipes still need a stable target.
-## Quickstart
+```bash
 export DITTO_API_URL="https://api.ditto.site"
 export DITTO_API_KEY="ditto_live_example"
 curl -sS -X POST "$DITTO_API_URL/v1/clones" \
  -H "authorization: Bearer $DITTO_API_KEY" \
  -H "content-type: application/json" \
  -d '{
    "url": "https://example.com/",
    "options": {
      "mode": "single",
      "styling": "tailwind",
      "framework": "next"
    }
  }'
 ```
 The service returns either an inline result or a queued job:
 ```json
 { "jobId": "job_123", "status": "queued" }
 ```
 Poll and download the generated app:
 ```bash
 JOB_ID="job_123"
 curl -sS -H "authorization: Bearer $DITTO_API_KEY" \
  "$DITTO_API_URL/v1/clones/$JOB_ID"
 curl -L -H "authorization: Bearer $DITTO_API_KEY" \
  "$DITTO_API_URL/v1/clones/$JOB_ID/bundle?format=tgz" \
  -o ditto-clone.tgz
 ```
 Useful options:
 | Option | Values | Default |
 | --- | --- | --- |
 | `mode` | `single`, `multi` | `single` |
 | `styling` | `tailwind`, `css` | `tailwind` |
 | `framework` | `next`, `vite` | `next` |
 | `verify` | `true`, `false` | `false` |
 | `asyncVerify` | `true`, `false` | `false` |
 | `maxRoutes` | number | service default |
 REST endpoints:
 | Method | Path | Purpose |
 | --- | --- | --- |
 | `POST` | `/v1/clones` | Start a clone |
 | `GET` | `/v1/clones/:id` | Read job status and metadata |
 | `GET` | `/v1/clones/:id/result` | Read the eager file map |
 | `GET` | `/v1/clones/:id/files/*` | Stream one generated file |
 | `GET` | `/v1/clones/:id/bundle?format=tgz` | Download the whole app |
 | `DELETE` | `/v1/clones/:id` | Delete a clone and its artifacts |
 ### MCP
 Connect an MCP client to the hosted Streamable HTTP endpoint:
 ```json
 {
  "mcpServers": {
    "ditto": {
      "url": "https://mcp.ditto.site/mcp",
      "headers": {
        "Authorization": "Bearer ${DITTO_API_KEY}"
      }
    }
  }
 }
 ```
 The MCP server is designed for agents. It returns job ids, metadata, manifests,
 and file references first, then lets the agent read only the files it needs.
 Core MCP tools:
 | Tool | Purpose |
 | --- | --- |
 | `clone_website` | Start a clone and return `{ jobId, status }` |
 | `get_clone_status` | Poll job progress |
 | `get_clone_result` | Read result metadata without file contents |
 | `list_clone_files` | List generated file paths, sizes, and hashes |
 | `read_clone_files` | Read selected text files or binary URLs |
 | `get_clone_bundle` | Get a download URL for the generated app |
 Example agent prompt:
 ```text
 Use the ditto MCP server to clone https://example.com as a Next.js app.
 Wait for the job to finish, list the generated files, then read package.json,
 src/app/page.tsx, and src/app/ditto.css.
 ```
 ### Local CLI
 ```bash
 git clone https://github.com/ion-design/ditto.site.git
 cd ditto.site
 npm ci
 npx playwright install chromium
 npm run clone -- https://example.com/ --out=./output
 ```
 The generated app lands under `output/<site>/app`.
 Common local variants:
 ```bash
 npm run clone -- https://example.com/ --mode=multi
 npm run clone -- https://example.com/ --styling=css
 npm run clone -- https://example.com/ --framework=vite
 npm run validate-site -- runs/site-example.com/<timestamp>
 ```
 ### Local REST And MCP Service
 Quick inline mode, with no database:
 ```bash
 npm ci
 npx playwright install chromium
-# Single-page clone, Tailwind output by default.
+SSRF_ALLOW_LOOPBACK=true npm run dev:api
 npm run clone -- https://example.com/
 # Explicit product choices.
 npm run clone -- https://example.com/ --mode=single --styling=tailwind
 npm run clone -- https://example.com/ --mode=single --styling=css
 npm run clone -- https://example.com/ --mode=multi --styling=tailwind
 npm run clone -- https://example.com/ --mode=multi --styling=css
 npm run clone -- https://example.com/ --mode=single --framework=vite
 npm run clone -- https://example.com/ --mode=multi --framework=vite
 # Deliver into a clean app directory.
 npm run clone -- https://example.com/ --out=./output
 # Benchmark and validation helpers.
 npm run bench -- --tier=easy
 npm run bench -- --tier=stage2 --reuse
 npm run bench-site
 npm run validate-site -- runs/site-example.com/<timestamp>
 # Faster multi-page runs on larger sites. Validation is opt-in.
 npm run clone -- https://example.com/ --mode=multi --concurrency=5
 npm run clone -- https://example.com/ --mode=multi --validate --validate-concurrency=3 --viewport-concurrency=2
 npm run validate-site -- runs/site-example.com/<timestamp> --validate-concurrency=3 --viewport-concurrency=2
 ```
-The root scripts forward into the `compiler` workspace. Running the same commands
+Then call the local REST API:
 from `compiler/` also works.
 The repository is MIT-licensed open source. The npm workspaces are intentionally
 marked `private` for now because the source package boundaries are available for
 contributors, but the packages are not yet prepared for public npm publishing.
 Multi-page generation defaults to the fast no-validation path. For production
 delivery, keep first response and QA as separate phases: run single-page first,
 expand to multi-page with default CLI behavior or service `verify:false`, then
 run strict validation separately. Use service `asyncVerify:true` when a DB worker
 should persist the clone first and attach the verify report afterward. Capture
 route parallelism is controlled by `--concurrency`; validation route and viewport
 parallelism are controlled by `--validate-concurrency` and
 `--viewport-concurrency`.
 ## Architecture
 ```bash
 curl -sS -X POST "http://localhost:8787/v1/clones" \
  -H "content-type: application/json" \
  -d '{"url":"https://example.com/","options":{"mode":"single"}}'
 ```
 For the queued service with Postgres and MinIO:
 ```bash
 docker compose up -d
 cp .env.example .env
 DATABASE_URL=postgresql://postgres:postgres@localhost:5432/ditto_site \
  npm run db:migrate
 npm run dev:api
 npm run dev:worker
 ```
 The local MCP endpoint is `http://localhost:8787/mcp`.
 ## What You Get
 A generated app includes:
 - a runnable Next.js or Vite React project,
 - reconstructed pages and route modules,
 - captured assets, fonts, icons, manifest files, and metadata,
 - `robots`, `sitemap`, `llms.txt`, and JSON-LD when discoverable,
 - small `ditto` runtime helpers for recognized interactions and motion,
 - generated `AGENTS.md` and `ARCHITECTURE.md` handoff docs.
 Delivery output is under `generated/app/` during validation and under
 `<out>/<site>/app` for CLI delivery.
 ## How It Works
 ```text
 URL
-  -> capture
+  -> browser capture
-  -> normalize render IR
+  -> normalized render IR
-  -> infer assets, fonts, sections, recipes, SEO, metadata
+  -> deterministic inference
-  -> generate app (Next by default, Vite optional)
+  -> app generation
-  -> materialize assets
+  -> asset materialization
-  -> build and validate
+  -> optional validation
  -> export delivery app
 ```
-### 1. Capture
+Capture records DOM, computed styles, layout boxes, source metadata, CSS, fonts,
 assets, screenshots, interaction states, and reproducible motion where it can be
 observed safely. Unsupported app logic, auth, payments, personalization, and
 arbitrary third-party JavaScript are not replayed.
-Capture is Playwright-based. A page is loaded once and resized through the target
+For the detailed service API, see [docs/SERVICE.md](docs/SERVICE.md). For
-viewports, normally `375`, `768`, `1280`, and `1920`, so responsive snapshots are
+deployment, see [docs/DEPLOY.md](docs/DEPLOY.md).
 aligned to the same page state instead of four unrelated reloads.
 The in-page walker records:
 - DOM tree shape and text.
 - Curated computed styles.
 - Document-coordinate bounding boxes.
 - Per-viewport visibility, scroll dimensions, and page backgrounds.
 - Pseudo-element content and styles.
 - Inline SVG markup.
 - Source attributes that are safe and meaningful, including accessibility
  attributes.
 - Head metadata, link tags, JSON-LD, icons, manifest links, alternates, and SEO
  discovery resources.
 - CSS, fonts, images, SVGs, videos, manifests, and other linked assets.
 Capture also handles common state problems before the snapshot:
 - Cookie, consent, newsletter, and modal overlays are dismissed when a safe
  deterministic rule recognizes them.
 - Scroll-locked and iframe-backed overlays are removed only when they match the
  blocker patterns.
 - Poster-less videos get a representative still when possible.
 - Lazy background images and responsive assets are backfilled from CSS, DOM, and
  manifest evidence.
 - Interaction capture stamps temporary `data-cid-cap` ids in the browser,
  explores recognized controls, and records state deltas.
 - Motion capture extracts declarative CSS keyframes, WAAPI effects, rotating text,
  scroll reveals, and marquee-like tracks when they can be replayed deterministically.
 ### 2. Normalize
 The normalizer merges viewport snapshots into one render IR. Each node receives a
 stable pre-order id and carries per-viewport style, box, and visibility data.
 Temporary capture ids are kept only as needed for interaction and motion mapping.
 The IR is intentionally close to rendered browser facts. Higher-level intent is
 inferred later so fidelity gates can always fall back to measured evidence when a
 semantic guess is uncertain.
 ### 3. Infer
 Inference is deterministic and local to the capture:
 - Sections are detected from rendered structure and visible hierarchy.
 - Design tokens are extracted from repeated color, spacing, and type values.
 - Semantic color roles are assigned where source evidence and usage make them
  stable enough.
 - Primitive roles identify headings, links, buttons, images, icons, nav, badges,
  forms, and related UI pieces.
 - Asset and font graphs classify linked files, download them content-addressably,
  rewrite references, and preserve fallbacks.
 - Recipe inference recognizes repeated card grids, feature grids, product grids,
  logo clouds, galleries, navs, and other common section patterns.
 - Interaction recipes map captured deltas to small runtime helpers rather than
  replaying arbitrary site JavaScript.
 - Motion recipes emit reproducible templates for the safe declarative families
  and freeze unsupported motion honestly.
 - SEO inventory records source title, description, keywords, canonical URL,
  robots/referrer/theme-color/color-scheme, Open Graph, Twitter cards, icons,
  manifest links and assets, alternates/hreflang, JSON-LD, robots/sitemap links,
  and `llms.txt` or `llms-full.txt` when discoverable.
 - Code quality inventory records module organization, generated component split,
  content-model extraction, metadata, and markup hygiene.
 ### 4. Generate
 The generator emits a Next.js App Router app by default, or a Vite React app when
 `framework` is `vite`. Tailwind v4 is the default styling mode; plain CSS remains
 available.
 In Tailwind mode, most exact geometry, typography, display, and spacing becomes
 utility classes. Values that do not belong in class names, pseudo-elements,
 keyframes, and recipe/runtime selectors stay in `ditto.css`. In CSS mode, shared
 semantic classes and per-rule stylesheet emission preserve the same computed
 style contract.
 The generator also:
 - Splits clean page regions into `sections/`.
 - Extracts repeated DOM skeletons into `components/`.
 - Keeps editable semantic data in `content.ts`, while validation ids and
  per-instance class overrides stay in generated plumbing modules.
 - Hoists inline SVGs into `svgs/` where that improves readability.
 - Emits `ditto` runtime utilities only for recognized recipes that need them.
 - Rewrites same-origin internal links for generated routes.
 - Emits framework-appropriate metadata, JSON-LD, robots, sitemap, `llms.txt`,
  icons, web manifests, and manifest assets from the SEO inventory.
 - Emits generated `AGENTS.md` and `ARCHITECTURE.md` for the delivered app.
 ### 5. Multi-Route Cloning
 Multi-route mode starts at one entry URL, crawls same-origin links, groups routes
 by deterministic URL templates, and applies a CMS/template boundary:
 - Singletons are reproduced.
 - Pairs are reproduced because there is not enough evidence to collapse them.
 - Larger collections are represented by the listing and one representative route.
 - The full instance list is recorded as a handoff boundary rather than cloning
  every CMS item.
 Each selected route is captured separately. The site generator then emits one app
 with shared assets, shared tokens, link rewriting, optional shared header/footer
 chrome, and route-level pages. A multi-route job can reuse a prior single-page
 entry capture to return the first page quickly and expand later.
 ### 6. Validate
 Validation builds and serves the generated app, captures it with the same walker,
 and grades deterministic gates:
 - Build and static export success.
 - Capture sanity: the source was not an empty shell, bot wall, or polluted overlay
  state.
 - Asset and font materialization.
 - DOM shape and valid retags.
 - Computed-style fidelity.
 - Layout boxes, section positions, page dimensions, and responsive behavior.
 - Byte determinism from regenerating the same frozen capture.
 - Perceptual screenshot similarity.
 - Interaction recipe behavior for menus, tabs, accordions, carousels, modals,
  hover, and focus states that were captured.
 - Motion reproduction for supported declarative families.
 - Site-level link integrity and site determinism for multi-route output.
 - Output quality, including componentization, naming, content extraction,
  styling organization, and metadata hygiene.
 The gates are intended to be deterministic grading functions. Failures should
 produce a reproducible artifact and a narrow compiler improvement, not a manual
 one-off patch to an output app.
 ## SEO And Documentation Layer
 ditto.site treats source metadata as part of the clone contract. The current
 generator preserves source-provided metadata in the generated framework shell
 where possible, materializes linked icons and manifest assets, preserves JSON-LD
 with safe script emission, and generates or preserves `llms.txt`.
 If a source exposes `llms.txt` or `llms-full.txt`, those files are preserved as
 static routes. If not, the generator creates a concise `llms.txt` from captured
 route titles, descriptions, and visible content summaries. The generated app also
 receives root `AGENTS.md` and `ARCHITECTURE.md` files that explain the app
 structure, safe edit zones, `src/app/ditto`, `content.ts`, components, sections,
 SVG modules, `ditto.css`, and `ditto-meta.ts`.
 SEO inventory metrics are written beside generated artifacts as `seo.json` and
 `seo.md` so coverage can be inspected without changing output behavior.
 ## Service Layer
 The hosted service wraps the compiler without changing clone semantics:
 ```
 compiler/            # capture, IR, inference, generation, validation
 packages/core/       # compiler adapter and file-map collection
 packages/db/         # Drizzle schema, migrations, repository, queue wrapper
 packages/storage/    # local and S3/R2 artifact storage
 packages/api/        # Hono REST API and MCP server
 packages/worker/     # queued clone runner and optional verify harness
 packages/test-utils/ # fixture server and integration-test helpers
 ```
 REST accepts a URL and clone options, then returns either an inline result or an
 async job id depending on whether a database queue is configured. The MCP server
 uses a list-then-read model: agents get job metadata and file manifests first,
 then request only the files they need.
 See [docs/SERVICE.md](docs/SERVICE.md) and [docs/DEPLOY.md](docs/DEPLOY.md) for
 the operational API and deployment details.
 ## Repository Map
 | Path | Purpose |
 | --- | --- |
-| `compiler/` | deterministic clone compiler |
+| `compiler/` | deterministic capture, inference, generation, and validation |
-| `compiler/src/capture/` | Playwright capture, walker, assets, SEO resources, interactions, motion |
+| `packages/core/` | compiler adapter and file-map helpers |
-| `compiler/src/normalize/` | render IR construction |
+| `packages/api/` | Hono REST API and MCP server |
-| `compiler/src/infer/` | sections, tokens, assets, fonts, recipes, primitives |
+| `packages/db/` | Drizzle schema, migrations, repository, and queue wrapper |
-| `compiler/src/generate/` | app generation, SEO/docs layer, code quality reports |
+| `packages/storage/` | local and S3/R2 artifact storage |
-| `compiler/src/site/` | multi-route crawl/generate/validate flow |
+| `packages/worker/` | queued clone runner and optional verification |
-| `compiler/src/validate/` | fidelity, perceptual, interaction, motion, and determinism gates |
+| `docs/` | service, deployment, release, and responsible-use docs |
-| `compiler/benchmarks/` | benchmark URL lists |
+| `examples/` | benchmark results and visual evidence |
 | `packages/` | REST, MCP, queue, storage, and service adapters |
 | `docs/SERVICE.md` | service architecture and API reference |
 | `docs/DEPLOY.md` | Railway, Neon, and R2 deployment guide |
 | `examples/` | benchmark result summaries, composites, motion evidence, and small runnable outputs |
 ## Deferred Work
 ditto.site intentionally does not attempt arbitrary JavaScript replay. It does not
 recreate full third-party applications, live personalization, auth, payments,
 analytics behavior, or remote iframe internals. It can preserve static scaffolding
 around those regions and may emit placeholders when that is the more faithful
 self-contained representation.
 Video-like animation replay, scroll-scrubbed canvases, WebGL, and finished
 entrance animations remain outside the deterministic contract unless a safe,
 observable recipe exists. Unsupported motion is frozen rather than shipped as a
 broken imitation.
 ## Responsible Use
@@ -329,18 +234,27 @@ operate on the target content. Do not use it for phishing, impersonation,
 credential capture, bypassing access controls, or high-volume third-party
 capture without permission.
-See [docs/RESPONSIBLE_USE.md](docs/RESPONSIBLE_USE.md) for the project policy.
+See [docs/RESPONSIBLE_USE.md](docs/RESPONSIBLE_USE.md).
 ## Contributing
-Use `npm run typecheck` and `npm test` before opening a PR. Browser tests require
+```bash
-Chromium; Postgres-backed tests use `TEST_DATABASE_URL` or the local compose
+npm ci
-stack. Changes that alter compiler output should include focused fixture or
+npx playwright install chromium
-benchmark evidence.
+npm run typecheck
 npm test
 ```
-See [CONTRIBUTING.md](CONTRIBUTING.md), [SECURITY.md](SECURITY.md), and
+Browser tests require Chromium. Postgres-backed tests use `TEST_DATABASE_URL` or
-[CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md). For questions and support expectations,
+the local compose stack. Changes that alter compiler output should include a
-see [SUPPORT.md](SUPPORT.md).
+focused fixture or benchmark note.
 The repository is MIT-licensed open source. The npm workspaces are intentionally
 marked `private` until the package boundaries are ready for public npm
 publishing.
 See [CONTRIBUTING.md](CONTRIBUTING.md), [SECURITY.md](SECURITY.md),
 [SUPPORT.md](SUPPORT.md), and [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md).
 ## License
@@ -0,0 +1,20 @@
 <svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M186.935 89.0296L315.178 89L315.205 106.293L362.428 106.264C362.519 112.028 362.496 117.792 362.364 123.554L380.675 123.56L380.687 141.045L397.053 141.055L397.075 158.448C402.572 158.451 408.255 158.379 413.733 158.485L413.741 192.667H430.38C430.391 201.865 429.53 218.852 430.349 226.705C435.827 226.772 441.305 226.775 446.783 226.713C446.783 232.219 446.689 238.018 446.802 243.497C446.814 257.192 447.019 271.358 446.806 285.011L462.994 285.007C462.941 291.301 462.922 297.594 462.941 303.892C463.21 317.879 462.421 333.186 462.952 346.855C457.705 346.885 452.36 346.972 447.121 346.935C447.125 351.999 446.89 359.704 447.201 364.59L447.155 366.722L447.182 381.404C443.403 381.354 438.392 381.206 434.651 381.525C429.473 381.969 420.649 383.213 415.547 382.443L414.511 383.357C414.56 387.602 414.53 392.105 414.78 396.324L397.777 396.358L397.751 409.985L97.4585 410C97.7962 406.669 97.6497 399.894 97.6588 396.316L85.6744 396.343C85.685 391.927 85.6353 387.633 85.9862 383.228L85.9889 382.523C82.8007 381.851 77.7954 382.583 74.4323 382.219C67.2232 381.445 60.3237 381.423 53.0745 381.453L53.1208 364.617C47.738 364.457 41.9511 364.594 36.5334 364.632C36.5995 358.676 36.5596 352.72 36.4143 346.768L20.0235 346.756L20 285.144C25.1851 284.92 31.0395 285.011 36.3153 284.912C36.8403 272.5 36.3669 256.373 36.3468 243.653C41.8874 243.675 47.428 243.653 52.9682 243.588L52.9755 226.757L69.4911 226.742C69.3955 215.408 69.6026 204.113 69.427 192.751C74.8879 192.601 80.6895 192.679 86.177 192.663C86.603 182.182 86.2692 169.131 86.3196 158.482C91.888 158.346 97.8375 158.449 103.435 158.449C103.378 152.688 103.441 146.836 103.451 141.066L120.724 141.006C120.391 135.57 120.569 129.083 120.595 123.558L139.505 123.595C139.772 117.953 139.673 112 139.661 106.326L186.883 106.274L186.935 89.0296Z" fill="#52E4DE"/>
 <path d="M186.935 89.0296L315.178 89L315.205 106.293L362.428 106.264C362.519 112.028 362.496 117.792 362.363 123.554L380.675 123.56L380.687 141.045L397.052 141.055L397.075 158.448C402.572 158.451 408.255 158.379 413.733 158.485L413.741 192.667H430.38C430.391 201.865 429.53 218.852 430.349 226.705L413.71 226.659L413.748 192.67L397.052 192.714L397.075 158.532L380.307 158.572L380.349 141.131L362.177 141.115L362.2 123.626L315.186 123.624L315.197 106.399L186.928 106.409L186.883 123.616L139.504 123.595C139.772 117.953 139.672 112 139.661 106.326L186.882 106.274L186.935 89.0296Z" fill="#091B2E"/>
 <path d="M85.9862 383.228C88.0214 383.737 95.3242 383.509 97.8963 383.505C97.8694 386.624 97.7886 389.898 97.8572 393.005L398.597 392.959L398.672 383.475C403.437 383.482 409.886 383.665 414.511 383.357C414.56 387.602 414.53 392.105 414.78 396.324L397.777 396.358L397.751 409.985L97.4585 410C97.7961 406.669 97.6497 399.894 97.6588 396.316L85.6743 396.343C85.6849 391.927 85.6353 387.633 85.9862 383.228Z" fill="#091B2E"/>
 <path d="M462.572 329.969C462.561 326.847 462.22 305.144 462.94 303.892C463.21 317.879 462.421 333.186 462.952 346.855C457.705 346.885 452.36 346.972 447.121 346.935C447.125 351.999 446.889 359.704 447.201 364.59L447.155 366.722L447.182 381.404C443.403 381.354 438.392 381.206 434.651 381.525C429.473 381.969 420.649 383.213 415.546 382.443L414.511 383.357C409.886 383.665 403.437 383.482 398.672 383.475L398.596 392.959L97.857 393.005C97.7884 389.898 97.8692 386.624 97.8961 383.505C97.785 381.901 97.7375 380.683 97.7557 379.074C98.3574 382.136 99.1632 381.4 102.313 381.404L289.446 381.392L350.436 381.381C363.145 381.385 376.802 381.627 389.427 381.092L389.499 365.068C391.502 365.099 393.414 364.973 395.406 364.89C406.779 364.416 418.088 364.753 429.477 364.4C429.704 359.014 429.64 353.046 429.689 347.617C435.338 347.598 440.987 347.481 446.631 347.261L446.722 329.931L462.572 329.969Z" fill="#1EC3C0"/>
 <path d="M447.155 366.722L447.182 381.404C443.403 381.354 438.392 381.206 434.651 381.525C429.473 381.969 420.649 383.213 415.547 382.443C415.93 380.334 415.793 369.556 415.797 366.772C426.241 366.863 436.7 366.605 447.155 366.722Z" fill="#091B2E"/>
 <path d="M120.595 123.558L139.505 123.595L139.491 141.129L121.307 141.086L121.321 158.598L103.477 158.552L103.486 192.67C100.243 192.66 88.6622 192.465 86.1986 192.886C86.2305 198.476 86.3197 204.168 86.273 209.749C86.2499 215.234 86.1122 221.234 86.2992 226.677L69.6743 226.722C69.6641 232.305 69.6132 237.941 69.6694 243.52L52.9815 243.554L53.0085 285.022L36.5444 284.999C36.0391 288.243 36.2865 300.751 36.2914 304.776L36.3752 346.745C39.3631 346.775 50.8267 346.688 53.0642 347.098C52.9861 352.705 51.7531 361.085 54.4026 365.967C56.5354 367.671 80.5943 366.438 85.463 366.866C89.8675 366.225 92.567 367.276 98.0781 366.039C97.6304 370.353 98.2059 375.307 97.756 379.074C97.7378 380.683 97.7852 381.9 97.8963 383.505C95.3243 383.509 88.0215 383.737 85.9862 383.228L85.9889 382.523C82.8007 381.851 77.7954 382.583 74.4323 382.219C67.2232 381.445 60.3237 381.422 53.0745 381.453L53.1208 364.617C47.738 364.457 41.9511 364.594 36.5334 364.632C36.5995 358.676 36.5596 352.72 36.4143 346.768L20.0235 346.756L20 285.144C25.1851 284.92 31.0395 285.011 36.3153 284.912C36.8403 272.499 36.3669 256.373 36.3468 243.653C41.8874 243.675 47.428 243.653 52.9682 243.588L52.9755 226.756L69.4911 226.742C69.3955 215.408 69.6026 204.113 69.427 192.751C74.8879 192.601 80.6895 192.679 86.177 192.663C86.603 182.182 86.2692 169.131 86.3196 158.482C91.888 158.346 97.8375 158.449 103.435 158.449C103.378 152.688 103.441 146.836 103.451 141.066L120.724 141.006C120.391 135.57 120.569 129.083 120.595 123.558Z" fill="#091B2E"/>
 <path d="M85.4631 366.866C89.8675 366.225 92.567 367.276 98.0781 366.039C97.6304 370.353 98.2059 375.307 97.756 379.074C97.7378 380.683 97.7852 381.901 97.8964 383.505C95.3243 383.509 88.0215 383.737 85.9862 383.228L85.9889 382.523L86.0708 382.348C85.1247 379.313 85.3659 370.338 85.4631 366.866Z" fill="#17B1AE"/>
 <path d="M86.1987 192.887C90.6358 193.335 98.7819 193.042 103.667 193.09C109.797 193.684 114.549 193.152 120.448 193.21L120.453 201.353C114.871 201.273 108.862 201.398 103.365 201.202C103.459 204.035 103.495 206.868 103.471 209.702C99.2636 209.724 89.9969 210.107 86.2731 209.749C86.3197 204.168 86.2306 198.476 86.1987 192.887Z" fill="#91F8F3"/>
 <path d="M53.0643 347.098C55.2832 347.697 67.5154 347.431 70.4702 347.405C70.5131 353.092 70.6535 359.07 70.5746 364.738C74.2677 364.693 96.1278 364.135 97.7913 365.072L98.0781 366.039C92.5671 367.276 89.8675 366.225 85.4631 366.866C80.5943 366.438 56.5354 367.671 54.4027 365.967C51.7532 361.085 52.9861 352.705 53.0643 347.098Z" fill="#1EC3C0"/>
 <path d="M36.3752 346.745L36.2914 304.776C36.2865 300.751 36.0391 288.243 36.5444 285C36.9151 289.844 36.7197 296.908 36.7193 301.889L36.6837 329.981L53.0308 329.912L53.0642 347.098C50.8267 346.688 39.3631 346.775 36.3752 346.745Z" fill="#1EC3C0"/>
 <path d="M430.349 226.705C435.827 226.772 441.305 226.775 446.783 226.713C446.783 232.219 446.689 238.018 446.802 243.497L430.399 243.52C430.425 237.915 430.41 232.31 430.349 226.705Z" fill="#091B2E"/>
 <path d="M319.992 243.508L366.096 243.478L366.221 254.924C372.204 254.874 374.438 255.834 379.681 256.058V307.238L366.138 307.219L366.111 320.762L319.909 320.774C319.742 316.225 319.852 311.779 319.931 307.234L306.764 307.257L306.805 256.149C311.081 256.187 315.455 256.126 319.738 256.103C319.78 251.904 319.863 247.704 319.992 243.508Z" fill="#091B2E"/>
 <path d="M331.828 256.043H354.571L354.609 279.984L331.718 279.965C331.635 271.991 331.673 264.017 331.828 256.043Z" fill="#FEFEFE"/>
 <path d="M136.984 243.497L183.118 243.459L183.131 254.851C186.439 254.783 193.029 254.635 195.863 256.475C196.484 259.798 196.225 270.311 196.216 274.4L196.24 307.249L183.139 307.227L183.052 320.679C168.204 321.104 151.954 320.728 136.965 320.793C136.865 316.369 136.945 311.669 136.953 307.227L123.864 307.253L123.876 256.172L136.885 256.103C136.843 251.942 136.94 247.666 136.984 243.497Z" fill="#091B2E"/>
 <path d="M150.169 256.077C157.835 256.024 165.501 256.016 173.167 256.058L173.205 279.973L150.149 279.943L150.169 256.077Z" fill="#FEFEFE"/>
 <path d="M164.833 141.215L204.009 141.183C204.357 146.268 204.114 153.555 204.084 158.803L187.299 158.723L187.338 176.342C181.785 176.407 176.158 176.363 170.597 176.366L170.581 194.163L160.913 194.2L121.319 194.138L121.369 176.726L139.416 176.685L139.436 158.936C147.915 158.878 156.394 158.873 164.873 158.921C164.902 153.019 164.889 147.117 164.833 141.215Z" fill="#91F8F3"/>
 <path d="M222.894 292.814L235.828 292.811L235.836 304.23L267.257 304.195L267.291 292.826H280.281C280.277 295.542 280.842 305.33 279.917 307.063L278.801 307.23L267.731 307.257L267.709 320.72C257.03 320.887 246.043 320.762 235.345 320.758L235.314 307.264C231.249 307.189 226.96 307.249 222.88 307.249C222.775 302.575 222.881 297.519 222.894 292.814Z" fill="#091B2E"/>
 <path d="M446.802 243.497C452.136 243.603 457.47 243.626 462.804 243.573C462.842 255.83 462.307 273.141 462.914 285.037C467.971 285.041 474.06 285.159 479.06 284.924C479.067 305.22 478.741 326.57 479.128 346.805L462.948 346.836C462.941 352.522 463.066 358.934 462.793 364.56L447.201 364.59C446.89 359.704 447.125 351.999 447.121 346.934C452.36 346.972 457.705 346.885 462.952 346.855C462.421 333.186 463.21 317.879 462.941 303.892C462.922 297.594 462.941 291.301 462.994 285.007L446.806 285.011C447.019 271.358 446.814 257.192 446.802 243.497Z" fill="#091B2E"/>
 </svg>