From 84534b2f58e536552ec1e49e0ff0f97a35b8836e Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Wed, 26 Aug 2026 18:12:03 +0500
Subject: [PATCH] docs: add new design references

---
 docs/plan-redesign.md                         |  191 +
 refs-html/README.md                           |   37 +
 refs-html/background-remover.html             | 2218 ++++++++++
 refs-html/demo.html                           | 2576 +++++++++++
 refs-html/gradient.html                       | 2209 +++++++++
 refs-html/index.html                          | 2576 +++++++++++
 refs-html/list-tools.html                     | 2912 ++++++++++++
 refs/.gitignore                               |   15 +
 .../background-remover/page.tsx               |   29 +
 refs/app/easy-png-tools/demo/page.tsx         |    1 +
 refs/app/easy-png-tools/gradient/page.tsx     |   33 +
 refs/app/easy-png-tools/list-tools/page.tsx   |   27 +
 refs/app/globals.css                          |   15 +
 refs/app/layout.tsx                           |   18 +
 refs/app/page.tsx                             |   40 +
 refs/components.json                          |   21 +
 refs/components/ui/button.tsx                 |   58 +
 refs/extract-static.mjs                       |  118 +
 refs/lib/utils.ts                             |    6 +
 refs/next-env.d.ts                            |    7 +
 refs/next.config.mjs                          |   11 +
 refs/package.json                             |   38 +
 refs/pnpm-lock.yaml                           | 3931 +++++++++++++++++
 refs/pnpm-workspace.yaml                      |    2 +
 refs/postcss.config.mjs                       |    8 +
 refs/public/placeholder-user.jpg              |  Bin 0 -> 1635 bytes
 refs/public/placeholder.svg                   |    1 +
 refs/tsconfig.json                            |   33 +
 28 files changed, 17131 insertions(+)
 create mode 100644 docs/plan-redesign.md
 create mode 100644 refs-html/README.md
 create mode 100644 refs-html/background-remover.html
 create mode 100644 refs-html/demo.html
 create mode 100644 refs-html/gradient.html
 create mode 100644 refs-html/index.html
 create mode 100644 refs-html/list-tools.html
 create mode 100644 refs/.gitignore
 create mode 100644 refs/app/easy-png-tools/background-remover/page.tsx
 create mode 100644 refs/app/easy-png-tools/demo/page.tsx
 create mode 100644 refs/app/easy-png-tools/gradient/page.tsx
 create mode 100644 refs/app/easy-png-tools/list-tools/page.tsx
 create mode 100644 refs/app/globals.css
 create mode 100644 refs/app/layout.tsx
 create mode 100644 refs/app/page.tsx
 create mode 100644 refs/components.json
 create mode 100644 refs/components/ui/button.tsx
 create mode 100644 refs/extract-static.mjs
 create mode 100644 refs/lib/utils.ts
 create mode 100644 refs/next-env.d.ts
 create mode 100644 refs/next.config.mjs
 create mode 100644 refs/package.json
 create mode 100644 refs/pnpm-lock.yaml
 create mode 100644 refs/pnpm-workspace.yaml
 create mode 100644 refs/postcss.config.mjs
 create mode 100644 refs/public/placeholder-user.jpg
 create mode 100644 refs/public/placeholder.svg
 create mode 100644 refs/tsconfig.json

diff --git a/docs/plan-redesign.md b/docs/plan-redesign.md
new file mode 100644
index 0000000..f361d96
--- /dev/null
+++ b/docs/plan-redesign.md
@@ -0,0 +1,191 @@
+# План: переезд на новый дизайн (refs)
+
+> Статус: план к выполнению.
+>
+> Источники: `refs/` — Next/React-референс (правда по пикселям), `refs-html/` —
+> статические HTML-снимки для быстрого просмотра в браузере.
+
+## 1. Что происходит
+
+В `refs/` лежит новый визуальный язык проекта: «чертёжный» техно-стиль —
+сетка на фоне, IBM Plex Sans/Mono, моно-микролейблы в верхнем регистре,
+острые углы 4px, панели с 1px-бордером, акценты синий/циан/амбер, зелёные
+статус-точки. Референс написан на Next 16 + Tailwind v4, но **переезд
+дизайновый, а не фреймворковый**: SvelteKit в `web/` остаётся, переносится
+только дизайн-слой (токены → примитивы → UI-kit → страницы).
+
+Чего не делаем: не тащим Tailwind и React в проект. Токены из
+`refs/app/globals.css` переносятся в наш vanilla-CSS слой почти один в один,
+классы референса (`step-card`, `setting-group`, …) воспроизводятся как наши
+глобальные утилиты и стили компонентов.
+
+## 2. Токены (фундамент)
+
+Маппинг старых токенов `web/src/app.css` → новые из референса:
+
+| Старый         | Новый          | Light     | Dark                     |
+| -------------- | -------------- | --------- | ------------------------ |
+| `--bg`         | `--background` | `#eef1f4` | `#11171d`                |
+| `--surface`    | `--panel`      | `#f8fafb` | `#182129`                |
+| `--text`       | `--foreground` | `#17212b` | `#e8eef2`                |
+| `--text-muted` | `--muted`      | `#6d7883` | `#91a0ac`                |
+| `--border`     | `--line`       | `#cbd3da` | `#33414c`                |
+| `--accent`     | `--blue`       | `#1769d2` | `#54a2ff`                |
+| —              | `--cyan`       | `#00a8c7` | `#00a8c7`                |
+| —              | `--amber`      | `#bd7411` | `#bd7411`                |
+| —              | `--success`    | `#25a96a` | `#25a96a` (статус-точки) |
+| `--danger`     | без изменений  | `#e5484d` | `#ff7479`                |
+
+Прочее:
+
+- Радиусы: вместо `--radius-s/m` один `--radius: 4px`. Скруглённая мягкость
+  старой темы уходит.
+- Шрифты: `IBM Plex Sans` + `IBM Plex Mono`, self-host через `@fontsource`
+  (проект offline-first, CDN нельзя). Mono — рабочий шрифт для лейблов,
+  метаданных, цифр; Sans — для заголовков и текста.
+- Фон-сетка приложения (32px blueprint-grid) и шахматка канвасов —
+  отдельные утилиты `.app-shell`, `.checker-canvas`, не токены.
+- Тёмная тема остаётся на `[data-theme='dark']` (инлайн-скрипт в `app.html`
+  уже есть); класс `.dark-mode` из референса не переносим.
+- На переходный период старые имена живут как алиасы
+  (`--bg: var(--background)` …), чтобы существующие компоненты не ломались
+  до этапа D. В конце алиасы удаляются.
+
+## 3. Базовые примитивы дизайн-системы
+
+Повторяющиеся паттерны референса выносим в глобальные классы `app.css`
+(по одному определению, без копипасты между компонентами):
+
+- `.mono-label` — микро-лейбл: mono 10px, uppercase, letter-spacing .1em,
+  цвет muted; модификаторы `.mono-label--accent` (синие eyebrow/version).
+- `.status-dot` / `.status-line` — точка `--success` + подпись
+  («AUTO PIPELINE», «LIVE PREVIEW»).
+- `.panel` — панель: фон `--panel`, бордер `--line`; композиция
+  `.panel-heading` (label + strong + правый слот) / `.setting-group` /
+  `.settings-footer` с разделителями.
+- `.checker-canvas` — рабочая поверхность превью: тёмная подложка +
+  шахматка; размеры через контейнер.
+- `.meta-row` — пары «CAPTION значение» (dimensions/format/size,
+  result-meta).
+- `.segmented` — сегмент-переключатель (общий для языка, типа градиента,
+  пресетов).
+
+## 4. Минимальный UI-kit (`src/lib/components/ui/`)
+
+API компонентов сохраняем, меняем внутренности. Новые компоненты — только
+те, для которых нет аналога:
+
+| Компонент                                     | Статус    | Что меняется                                                                                            |
+| --------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------- |
+| `Button.svelte`                               | рестайл   | варианты `primary` (синий solid) / `secondary` (outline) / `ghost` + `icon`-режим; busy-логика остаётся |
+| `Field.svelte`                                | рестайл   | обёртка в стиле `.setting-group`: mono-label + output справа                                            |
+| `SliderField`                                 | рестайл   | range + `<output>` значения, опциональная строка подсказок («strict edges … more removal»)              |
+| `ColorField`                                  | рестайл   | swatch + hex-input + нативный color-picker в одном поле                                                 |
+| `TextField` / `SelectField` / `CheckboxField` | рестайл   | чекбокс → switch-toggle 32×18 как в рефе                                                                |
+| `SegmentedControl.svelte`                     | **новый** | RU/EN, Linear/Radial, пресеты прозрачности                                                              |
+| `Badge.svelte`                                | **новый** | тег типа шага (BACKGROUND/TRANSFORM/STYLE), чип «✓ AUTO»                                                |
+| `MetaList.svelte`                             | **новый** | `.meta-row` для DIMENSIONS/FORMAT/SIZE                                                                  |
+| `EmptyState.svelte`                           | рестайл   | под новый стиль панелей                                                                                 |
+
+Иконки: в рефе lucide-react; берём `lucide-svelte` (те же пути, MIT) —
+16–17px, stroke, приглушённый цвет.
+
+## 5. Шелл и страницы
+
+### 5.1 Layout (`+layout.svelte`)
+
+- Topbar: brand-mark «EP» (синий квадрат 30px) + `easy-png-tools` + версия
+  суффиксом `/ v0.x`; справа — статус «LOCAL-ONLY», icon-btn темы
+  (Moon/Sun), сегмент RU|EN.
+- Footer: `easy-png-tools vX` · `pipeline is local-only` · © год.
+- Фон-сетка на корневом контейнере `.app-shell`.
+
+### 5.2 `/` — воркспейс
+
+Текущий hero + ToolSearch переезжает в рампу референса: eyebrow
+«PNG PROCESSING / WORKSPACE», крупный h1 (clamp 36–64px, tracking −0.06em),
+lede; поиск — строка в стиле file-chip/pipeline-head. «Открыть последний» —
+кнопка secondary. Каталог `/list-tools` — сетка карточек в стиле
+`image-card` (label сверху, canvas-превью).
+
+### 5.3 `/tools/[id]` — страница инструмента
+
+Главная перестройка. Целевая раскладка из рефа — двухпанельная:
+
+```txt
+eyebrow + tool-title (+ LIVE PREVIEW)
+┌─ settings-panel ────────┐ ┌─ preview-panel ─────────┐
+│ panel-heading           │ │ preview-toolbar         │
+│ setting-group ×N        │ │ checker-canvas / source │
+│ (Slider/Color/Toggle…)  │ │ + result comparison     │
+│ settings-footer (reset) │ │ meta-row                │
+└─────────────────────────┘ └─────────────────────────┘
+```
+
+- `ParamsCard`/`ParamForm` → секция настроек: поля становятся
+  `.setting-group` через обновлённый `ui/*`.
+- `SourceCard`/`ResultCard`/`Preview` → превью-панель: toolbar с именем
+  файла и download-btn, canvas на шахматке, result-meta снизу.
+- Chain-блоки (`ChainToolBlock`) — нумерованные step-cards из главной
+  рефа: индекс `01`, drag-handle, Badge типа, заголовок, кнопка удаления;
+  параметры этапа — те же setting-groups внутри карточки.
+- Существующий `ToolStageClassic`/inline-вариант заменяются целевой
+  раскладкой; stage-абстракция из plan-inline-params закрывается этим
+  переездом.
+
+### 5.4 `/demo`
+
+Зеркало `refs-html/index.html` — витрина пайплайна, используется как
+приёмочный стенд нового стиля (делается первым среди страниц).
+
+## 6. Этапы и проверки
+
+Каждый этап заканчивается зелёными `test`/`check`/`build` и ревью в браузере
+(обе темы) против соответствующего HTML из `refs-html/`.
+
+- **A. Фундамент** — новые токены + алиасы старых, @fontsource IBM Plex,
+  утилиты §3, тёмная тема на `[data-theme]`. Критерий: приложение выглядит
+  по-старому (алиасы дают прежние цвета близко к новым), тесты зелёные,
+  FOUC-скрипт темы работает.
+- **B. UI-kit** — компоненты §4: сначала рестайл существующих, потом новые
+  (`SegmentedControl`, `Badge`, `MetaList`). Критерий: демо-страница kit'а
+  или `/demo` показывает все состояния; unit-тесты форм не падают.
+- **C. Шелл** — topbar/footer по §5.1, переключение темы и языка в новом
+  виде. Критерий: i18n/theme тесты зелёные, разметка шапки соответствует
+  рефу.
+- **D. Страница инструмента** — раскладка §5.3 на `/demo`, затем на всех
+  инструментах; chain-карточки. Критерий: смоук §7, скриншоты против
+  `refs-html/gradient.html` и `background-remover.html`.
+- **E. Главная и каталог** — §5.2. Критерий: поиск/фильтры работают,
+  покрытие search-coverage/i18n тестов зелёное.
+- **F. Чистка** — удаление алиасов старых токенов, неиспользуемых классов
+  `app.css` (`.tool-stage`, `.pane*`…), финальный проход по брейкпоинтам
+  1200/1100/800/480 из рефа. Критерий: grep по старым токенам пуст,
+  build без предупреждений.
+
+Оценка объёма: A+B — фундамент (~полдня), C+D — основная работа (~1–2 дня),
+E+F — добивка (~полдня).
+
+## 7. Смоук (после этапа D)
+
+1. Светлая и тёмная тема: сетка фона, панели, шахматка канвасов читаются,
+   контраст mono-лейблов достаточный.
+2. Инструмент с параметрами (градиент): slider/color/toggle в стиле
+   setting-groups, автозапуск не регрессировал.
+3. Удаление фона: сравнение source/result, маска, пипетка работают на новой
+   шахматке.
+4. Chain из 3+ инструментов: step-cards рендерятся, удаление/сброс работают.
+5. Узкий экран 800px: настройки над превью, sticky выключается как в рефе.
+6. RU/EN: новые лейблы локализованы; mono-лейблы рефа либо ключи i18n,
+   либо осознанно английские брендовые элементы (см. §8).
+
+## 8. Открытые вопросы
+
+- Mono-лейблы рефа на английском (`PROCESSING PIPELINE`). Предложение:
+  завести i18n-ключи, но для техно-эстетики допустимо оставить часть
+  английскими как «приборную панель». Решить на этапе A.
+- Версия в топбаре/футере: брать из package.json при сборке (define) или
+  захардкодить? Мелочь, решить на этапе C.
+- `refs/` оставляем в репо как источник правды; при изменении дизайна —
+  правки там, затем синхронизация вручную. Регенерация refs-html описана в
+  его README.
diff --git a/refs-html/README.md b/refs-html/README.md
new file mode 100644
index 0000000..7c67ffd
--- /dev/null
+++ b/refs-html/README.md
@@ -0,0 +1,37 @@
+# refs-html — статические снимки нового дизайна
+
+Отформатированный HTML, вытащенный из Next-референса `refs/`, чтобы смотреть
+макеты как референс по разметке и классам: открыл файл в браузере — увидел
+дизайн.
+
+## Файлы
+
+| Файл                      | Маршрут в refs                       | Что показывает                                      |
+| ------------------------- | ------------------------------------ | --------------------------------------------------- |
+| `index.html`              | `/`                                  | Главная: пайплайн-воркспейс + панель превью         |
+| `demo.html`               | `/easy-png-tools/demo`               | То же, что главная (зеркало)                        |
+| `gradient.html`           | `/easy-png-tools/gradient`           | Инструмент «Градиент»: настройки + превью + CSS     |
+| `background-remover.html` | `/easy-png-tools/background-remover` | Инструмент «Удаление фона»: сравнение source/result |
+
+## Особенности
+
+- **Это статика без JS**: все `<script>` удалены, интерактивности нет.
+  Тумблеры/кнопки/слайдеры не кликаются — это витрина состояний по умолчанию.
+- Разметка отформатирована (отступы), CSS темы заинлайнен и причёсан —
+  файлы автономны, работают с `file://`.
+- Тема по умолчанию: `gradient.html` и `background-remover.html` отрисованы
+  в тёмной (так в коде рефа), `index.html`/`demo.html` — в светлой. Чтобы
+  посмотреть светлый вариант тёмных страниц — убрать класс `dark-mode` у
+  `.app-shell`; для тёмной главной — добавить его же.
+- Источник правды по пикселям — код в `refs/`; здесь только витрина.
+
+## Как перегенерировать
+
+```powershell
+cd refs
+pnpm install                                              # если ещё не ставили
+node node_modules\next\dist\bin\next build               # output: 'export' включён в next.config.mjs
+node extract-static.mjs .next\server\app ..\refs-html    # форматирование, инлайн-CSS, без скриптов
+```
+
+Скрипт: `refs/extract-static.mjs`.
diff --git a/refs-html/background-remover.html b/refs-html/background-remover.html
new file mode 100644
index 0000000..aa8b73d
--- /dev/null
+++ b/refs-html/background-remover.html
@@ -0,0 +1,2218 @@
+<!DOCTYPE html>
+<html lang="ru" class="bg-background">
+  <head>
+    <meta charSet="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <style>
+@layer properties {
+  @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
+  *,:before,:after,::backdrop {
+  --tw-rotate-x:initial;
+  --tw-rotate-y:initial;
+  --tw-rotate-z:initial;
+  --tw-skew-x:initial;
+  --tw-skew-y:initial;
+  --tw-border-style:solid;
+  --tw-font-weight:initial;
+  --tw-shadow:0 0 #0000;
+  --tw-shadow-color:initial;
+  --tw-shadow-alpha:100%;
+  --tw-inset-shadow:0 0 #0000;
+  --tw-inset-shadow-color:initial;
+  --tw-inset-shadow-alpha:100%;
+  --tw-ring-color:initial;
+  --tw-ring-shadow:0 0 #0000;
+  --tw-inset-ring-color:initial;
+  --tw-inset-ring-shadow:0 0 #0000;
+  --tw-ring-inset:initial;
+  --tw-ring-offset-width:0px;
+  --tw-ring-offset-color:#fff;
+  --tw-ring-offset-shadow:0 0 #0000;
+  --tw-outline-style:solid;
+  --tw-blur:initial;
+  --tw-brightness:initial;
+  --tw-contrast:initial;
+  --tw-grayscale:initial;
+  --tw-hue-rotate:initial;
+  --tw-invert:initial;
+  --tw-opacity:initial;
+  --tw-saturate:initial;
+  --tw-sepia:initial;
+  --tw-drop-shadow:initial;
+  --tw-drop-shadow-color:initial;
+  --tw-drop-shadow-alpha:100%;
+  --tw-drop-shadow-size:initial;
+  --tw-translate-x:0;
+  --tw-translate-y:0;
+  --tw-translate-z:0;
+  --tw-animation-delay:0s;
+  --tw-animation-direction:normal;
+  --tw-animation-duration:initial;
+  --tw-animation-fill-mode:none;
+  --tw-animation-iteration-count:1;
+  --tw-enter-blur:0;
+  --tw-enter-opacity:1;
+  --tw-enter-rotate:0;
+  --tw-enter-scale:1;
+  --tw-enter-translate-x:0;
+  --tw-enter-translate-y:0;
+  --tw-exit-blur:0;
+  --tw-exit-opacity:1;
+  --tw-exit-rotate:0;
+  --tw-exit-scale:1;
+  --tw-exit-translate-x:0;
+  --tw-exit-translate-y:0
+}
+
+}
+
+}
+@layer theme {
+  :root,:host {
+  --font-sans:"IBM Plex Sans", sans-serif;
+  --font-mono:"IBM Plex Mono", monospace;
+  --spacing:.25rem;
+  --text-xs:.75rem;
+  --text-xs--line-height:calc(1 / .75);
+  --text-sm:.875rem;
+  --text-sm--line-height:calc(1.25 / .875);
+  --font-weight-medium:500;
+  --radius-md:.375rem;
+  --radius-lg:.5rem;
+  --default-transition-duration:.15s;
+  --default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);
+  --default-font-family:"IBM Plex Sans", sans-serif;
+  --default-mono-font-family:"IBM Plex Mono", monospace
+}
+
+}
+@layer base {
+  *,:after,:before,::backdrop {
+  box-sizing:border-box;
+  border:0 solid;
+  margin:0;
+  padding:0
+}
+::file-selector-button {
+  box-sizing:border-box;
+  border:0 solid;
+  margin:0;
+  padding:0
+}
+html,:host {
+  -webkit-text-size-adjust:100%;
+  tab-size:4;
+  line-height:1.5;
+  font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+  font-feature-settings:var(--default-font-feature-settings,normal);
+  font-variation-settings:var(--default-font-variation-settings,normal);
+  -webkit-tap-highlight-color:transparent
+}
+hr {
+  height:0;
+  color:inherit;
+  border-top-width:1px
+}
+abbr:where([title]) {
+  -webkit-text-decoration:underline dotted;
+  text-decoration:underline dotted
+}
+h1,h2,h3,h4,h5,h6 {
+  font-size:inherit;
+  font-weight:inherit
+}
+a {
+  color:inherit;
+  -webkit-text-decoration:inherit;
+  -webkit-text-decoration:inherit;
+  -webkit-text-decoration:inherit;
+  -webkit-text-decoration:inherit;
+  text-decoration:inherit
+}
+b,strong {
+  font-weight:bolder
+}
+code,kbd,samp,pre {
+  font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+  font-feature-settings:var(--default-mono-font-feature-settings,normal);
+  font-variation-settings:var(--default-mono-font-variation-settings,normal);
+  font-size:1em
+}
+small {
+  font-size:80%
+}
+sub,sup {
+  vertical-align:baseline;
+  font-size:75%;
+  line-height:0;
+  position:relative
+}
+sub {
+  bottom:-.25em
+}
+sup {
+  top:-.5em
+}
+table {
+  text-indent:0;
+  border-color:inherit;
+  border-collapse:collapse
+}
+:-moz-focusring:where(:not(iframe)) {
+  outline:auto
+}
+progress {
+  vertical-align:baseline
+}
+summary {
+  display:list-item
+}
+ol,ul,menu {
+  list-style:none
+}
+img,svg,video,canvas,audio,iframe,embed,object {
+  vertical-align:middle;
+  display:block
+}
+img,video {
+  max-width:100%;
+  height:auto
+}
+button,input,select,optgroup,textarea {
+  font:inherit;
+  font-feature-settings:inherit;
+  font-variation-settings:inherit;
+  letter-spacing:inherit;
+  color:inherit;
+  opacity:1;
+  background-color:#0000;
+  border-radius:0
+}
+::file-selector-button {
+  font:inherit;
+  font-feature-settings:inherit;
+  font-variation-settings:inherit;
+  letter-spacing:inherit;
+  color:inherit;
+  opacity:1;
+  background-color:#0000;
+  border-radius:0
+}
+:where(select:is([multiple],[size])) optgroup {
+  font-weight:bolder
+}
+:where(select:is([multiple],[size])) optgroup option {
+  padding-inline-start:20px
+}
+::file-selector-button {
+  margin-inline-end:4px
+}
+::placeholder {
+  opacity:1
+}
+@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
+  ::placeholder {
+  color:currentColor
+}
+@supports (color:color-mix(in lab, red, red)) {
+  ::placeholder {
+  color:color-mix(in oklab, currentcolor 50%, transparent)
+}
+
+}
+
+}
+textarea {
+  resize:vertical
+}
+::-webkit-search-decoration {
+  -webkit-appearance:none
+}
+::-webkit-date-and-time-value {
+  min-height:1lh;
+  text-align:inherit
+}
+::-webkit-datetime-edit {
+  display:inline-flex
+}
+::-webkit-datetime-edit-fields-wrapper {
+  padding:0
+}
+::-webkit-datetime-edit {
+  padding-block:0
+}
+::-webkit-datetime-edit-year-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-month-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-day-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-hour-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-minute-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-second-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-millisecond-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-meridiem-field {
+  padding-block:0
+}
+::-webkit-calendar-picker-indicator {
+  line-height:1
+}
+:-moz-ui-invalid {
+  box-shadow:none
+}
+button,input:where([type=button],[type=reset],[type=submit]) {
+  appearance:button
+}
+::file-selector-button {
+  appearance:button
+}
+::-webkit-inner-spin-button {
+  height:auto
+}
+::-webkit-outer-spin-button {
+  height:auto
+}
+[hidden]:where(:not([hidden=until-found])) {
+  display:none!important
+}
+
+}
+@layer components;
+  @layer utilities {
+  .static {
+  position:static
+}
+.inline {
+  display:inline
+}
+.inline-flex {
+  display:inline-flex
+}
+.size-6 {
+  width:calc(var(--spacing) * 6);
+  height:calc(var(--spacing) * 6)
+}
+.size-7 {
+  width:calc(var(--spacing) * 7);
+  height:calc(var(--spacing) * 7)
+}
+.size-8 {
+  width:calc(var(--spacing) * 8);
+  height:calc(var(--spacing) * 8)
+}
+.size-9 {
+  width:calc(var(--spacing) * 9);
+  height:calc(var(--spacing) * 9)
+}
+.h-6 {
+  height:calc(var(--spacing) * 6)
+}
+.h-7 {
+  height:calc(var(--spacing) * 7)
+}
+.h-8 {
+  height:calc(var(--spacing) * 8)
+}
+.h-9 {
+  height:calc(var(--spacing) * 9)
+}
+.shrink-0 {
+  flex-shrink:0
+}
+.transform {
+  transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)
+}
+.items-center {
+  align-items:center
+}
+.justify-center {
+  justify-content:center
+}
+.gap-1 {
+  gap:var(--spacing)
+}
+.gap-1\.5 {
+  gap:calc(var(--spacing) * 1.5)
+}
+.rounded-\[min\(var\(--radius-md\)\,10px\)\] {
+  border-radius:min(var(--radius-md), 10px)
+}
+.rounded-\[min\(var\(--radius-md\)\,12px\)\] {
+  border-radius:min(var(--radius-md), 12px)
+}
+.rounded-lg {
+  border-radius:var(--radius-lg)
+}
+.border {
+  border-style:var(--tw-border-style);
+  border-width:1px
+}
+.border-border {
+  border-color:var(--line)
+}
+.border-transparent {
+  border-color:#0000
+}
+.bg-background {
+  background-color:var(--background)
+}
+.bg-clip-padding {
+  background-clip:padding-box
+}
+.px-2 {
+  padding-inline:calc(var(--spacing) * 2)
+}
+.px-2\.5 {
+  padding-inline:calc(var(--spacing) * 2.5)
+}
+.text-sm {
+  font-size:var(--text-sm);
+  line-height:var(--tw-leading,var(--text-sm--line-height))
+}
+.text-xs {
+  font-size:var(--text-xs);
+  line-height:var(--tw-leading,var(--text-xs--line-height))
+}
+.text-\[0\.8rem\] {
+  font-size:.8rem
+}
+.font-medium {
+  --tw-font-weight:var(--font-weight-medium);
+  font-weight:var(--font-weight-medium)
+}
+.whitespace-nowrap {
+  white-space:nowrap
+}
+.underline-offset-4 {
+  text-underline-offset:4px
+}
+.antialiased {
+  -webkit-font-smoothing:antialiased;
+  -moz-osx-font-smoothing:grayscale
+}
+.ring {
+  --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
+  box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
+}
+.outline {
+  outline-style:var(--tw-outline-style);
+  outline-width:1px
+}
+.blur {
+  --tw-blur:blur(8px);
+  filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
+}
+.grayscale {
+  --tw-grayscale:grayscale(100%);
+  filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
+}
+.transition {
+  transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
+  transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));
+  transition-duration:var(--tw-duration,var(--default-transition-duration))
+}
+.transition-all {
+  transition-property:all;
+  transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));
+  transition-duration:var(--tw-duration,var(--default-transition-duration))
+}
+.outline-none {
+  --tw-outline-style:none;
+  outline-style:none
+}
+.select-none {
+  -webkit-user-select:none;
+  user-select:none
+}
+@media (hover:hover) {
+  .hover\:text-foreground:hover {
+  color:var(--foreground)
+}
+.hover\:underline:hover {
+  text-decoration-line:underline
+}
+
+}
+.focus-visible\:ring-3:focus-visible {
+  --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
+  box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
+}
+.active\:not-aria-\[haspopup\]\:translate-y-px:active:not([aria-haspopup]) {
+  --tw-translate-y:1px;
+  translate:var(--tw-translate-x) var(--tw-translate-y)
+}
+.disabled\:pointer-events-none:disabled {
+  pointer-events:none
+}
+.disabled\:opacity-50:disabled {
+  opacity:.5
+}
+:where([data-slot=button-group]) .in-data-\[slot\=button-group\]\:rounded-lg {
+  border-radius:var(--radius-lg)
+}
+.has-data-\[icon\=inline-end\]\:pr-1\.5:has([data-icon=inline-end]) {
+  padding-right:calc(var(--spacing) * 1.5)
+}
+.has-data-\[icon\=inline-end\]\:pr-2:has([data-icon=inline-end]) {
+  padding-right:calc(var(--spacing) * 2)
+}
+.has-data-\[icon\=inline-start\]\:pl-1\.5:has([data-icon=inline-start]) {
+  padding-left:calc(var(--spacing) * 1.5)
+}
+.has-data-\[icon\=inline-start\]\:pl-2:has([data-icon=inline-start]) {
+  padding-left:calc(var(--spacing) * 2)
+}
+.aria-expanded\:text-foreground[aria-expanded=true] {
+  color:var(--foreground)
+}
+.aria-invalid\:ring-3[aria-invalid=true] {
+  --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
+  box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
+}
+.\[\&_svg\]\:pointer-events-none svg {
+  pointer-events:none
+}
+.\[\&_svg\]\:shrink-0 svg {
+  flex-shrink:0
+}
+.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3 svg:not([class*=size-]) {
+  width:calc(var(--spacing) * 3);
+  height:calc(var(--spacing) * 3)
+}
+.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5 svg:not([class*=size-]) {
+  width:calc(var(--spacing) * 3.5);
+  height:calc(var(--spacing) * 3.5)
+}
+.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]) {
+  width:calc(var(--spacing) * 4);
+  height:calc(var(--spacing) * 4)
+}
+
+}
+@property --tw-animation-delay {
+  syntax:"*";
+  inherits:false;
+  initial-value:0s
+}
+@property --tw-animation-direction {
+  syntax:"*";
+  inherits:false;
+  initial-value:normal
+}
+@property --tw-animation-duration {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-animation-fill-mode {
+  syntax:"*";
+  inherits:false;
+  initial-value:none
+}
+@property --tw-animation-iteration-count {
+  syntax:"*";
+  inherits:false;
+  initial-value:1
+}
+@property --tw-enter-blur {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-enter-opacity {
+  syntax:"*";
+  inherits:false;
+  initial-value:1
+}
+@property --tw-enter-rotate {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-enter-scale {
+  syntax:"*";
+  inherits:false;
+  initial-value:1
+}
+@property --tw-enter-translate-x {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-enter-translate-y {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-exit-blur {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-exit-opacity {
+  syntax:"*";
+  inherits:false;
+  initial-value:1
+}
+@property --tw-exit-rotate {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-exit-scale {
+  syntax:"*";
+  inherits:false;
+  initial-value:1
+}
+@property --tw-exit-translate-x {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-exit-translate-y {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+:root {
+  --lightningcss-light:initial;
+  --lightningcss-dark: ;
+  color-scheme:light;
+  --background:#eef1f4;
+  --foreground:#17212b;
+  --panel:#f8fafb;
+  --line:#cbd3da;
+  --muted:#6d7883;
+  --blue:#1769d2;
+  --cyan:#00a8c7;
+  --amber:#bd7411;
+  --radius:4px
+}
+* {
+  box-sizing:border-box;
+  border-color:var(--line)
+}
+html {
+  background:var(--background)
+}
+body {
+  background:var(--background);
+  color:var(--foreground);
+  font-family:var(--font-sans);
+  margin:0
+}
+button,input {
+  font:inherit
+}
+button {
+  cursor:pointer
+}
+.app-shell {
+  background-color:var(--background);
+  background-image:linear-gradient(#dce2e7 1px,#0000 1px),linear-gradient(90deg,#dce2e7 1px,#0000 1px);
+  background-size:32px 32px;
+  min-height:100vh
+}
+.dark-mode {
+  --background:#11171d;
+  --foreground:#e8eef2;
+  --panel:#182129;
+  --line:#33414c;
+  --muted:#91a0ac;
+  --blue:#54a2ff;
+  background-image:linear-gradient(#1b252d 1px,#0000 1px),linear-gradient(90deg,#1b252d 1px,#0000 1px)
+}
+.topbar,.brand,.top-actions,.language,.status,.title-row,.pipeline-head,.step-heading,.step-tools,.pipeline-footer,.preview-top,.footer {
+  align-items:center;
+  display:flex
+}
+.topbar {
+  border-bottom:1px solid var(--line);
+  background:var(--panel);
+  justify-content:space-between;
+  height:64px;
+  padding:0 clamp(20px,4vw,64px)
+}
+.brand {
+  font:600 14px var(--font-mono);
+  gap:10px
+}
+.brand-mark {
+  background:var(--blue);
+  color:#fff;
+  place-items:center;
+  width:30px;
+  height:30px;
+  font-size:11px;
+  display:grid
+}
+.version,.label,.step-type,.eyebrow {
+  font:10px var(--font-mono);
+  letter-spacing:.12em;
+  color:var(--muted)
+}
+.version,.eyebrow {
+  color:var(--blue)
+}
+.top-actions {
+  gap:16px
+}
+.status {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  letter-spacing:.08em;
+  gap:7px
+}
+.status i,.auto-note i {
+  background:#25a96a;
+  border-radius:50%;
+  width:6px;
+  height:6px
+}
+.icon-btn {
+  color:var(--muted);
+  background:0 0;
+  border:0;
+  place-items:center;
+  padding:6px;
+  display:grid
+}
+.language {
+  border:1px solid var(--line)
+}
+.language button {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  background:0 0;
+  border:0;
+  padding:6px 9px
+}
+.language .active {
+  background:var(--foreground);
+  color:var(--background)
+}
+.page-grid {
+  grid-template-columns:minmax(0,1.05fr) minmax(520px,.95fr);
+  align-items:start;
+  gap:56px;
+  width:100%;
+  max-width:none;
+  margin:auto;
+  padding:60px clamp(24px,4vw,72px) 72px;
+  display:grid
+}
+.preview-panel {
+  min-width:0;
+  margin-top:0;
+  position:sticky;
+  top:24px
+}
+.preview-meta {
+  gap:24px;
+  display:flex
+}
+.preview-meta div {
+  gap:5px;
+  display:grid
+}
+.preview-meta span {
+  font:10px var(--font-mono);
+  color:var(--muted)
+}
+.preview-meta b {
+  font:600 11px var(--font-mono)
+}
+.workspace,.preview-panel {
+  min-width:0
+}
+.preview-stack {
+  grid-template-columns:repeat(2,minmax(0,1fr));
+  gap:18px;
+  width:100%;
+  min-width:0;
+  display:grid
+}
+.preview-tile {
+  width:100%;
+  min-width:0;
+  overflow:hidden
+}
+.history-toggle {
+  border:1px solid var(--line);
+  width:100%;
+  color:var(--muted);
+  font:10px var(--font-mono);
+  letter-spacing:.04em;
+  background:0 0;
+  justify-content:center;
+  align-items:center;
+  gap:8px;
+  margin-top:18px;
+  padding:11px 14px;
+  display:flex
+}
+.history-toggle:hover {
+  color:var(--foreground);
+  background:var(--panel)
+}
+.top-toggle {
+  width:auto;
+  margin:0;
+  padding:8px 10px
+}
+.history-toggle .rotated {
+  transform:rotate(180deg)
+}
+.tile-canvas {
+  width:100%;
+  min-width:0;
+  min-height:clamp(300px,22vw,430px);
+  overflow:hidden
+}
+.image-preview {
+  min-width:0;
+  max-width:100%;
+  overflow:hidden
+}
+.eyebrow {
+  margin-bottom:18px
+}
+.eyebrow span {
+  color:var(--muted);
+  margin:0 7px
+}
+.title-row {
+  justify-content:space-between;
+  align-items:flex-end;
+  gap:30px;
+  margin-bottom:56px
+}
+h1 {
+  letter-spacing:-.06em;
+  max-width:700px;
+  margin:0 0 16px;
+  font-size:clamp(36px,4vw,64px);
+  font-weight:650;
+  line-height:1
+}
+.lede {
+  color:var(--muted);
+  max-width:550px;
+  margin:0;
+  line-height:1.6
+}
+.file-chip {
+  white-space:nowrap;
+  border:1px solid var(--line);
+  background:var(--panel);
+  font:11px var(--font-mono);
+  color:var(--muted);
+  align-items:center;
+  gap:8px;
+  padding:10px 12px;
+  display:flex
+}
+.file-chip b {
+  color:var(--blue);
+  font-weight:500
+}
+.pipeline-head {
+  border-bottom:1px solid var(--line);
+  justify-content:space-between;
+  padding-bottom:12px
+}
+.pipeline-head strong,.preview-top strong {
+  font:600 14px var(--font-mono);
+  margin-top:5px;
+  display:block
+}
+.pipeline-head em {
+  color:#25a96a;
+  font-size:10px;
+  font-style:normal
+}
+.add-btn,.reset-btn {
+  color:var(--blue);
+  background:0 0;
+  border:0;
+  align-items:center;
+  gap:7px;
+  font-size:12px;
+  display:flex
+}
+.steps-list {
+  gap:10px;
+  padding-top:14px;
+  display:grid
+}
+.step-card {
+  border:1px solid var(--line);
+  background:var(--panel);
+  grid-template-columns:46px 20px 1fr;
+  min-height:138px;
+  display:grid
+}
+.step-index {
+  font:11px var(--font-mono);
+  color:var(--blue);
+  padding:17px 0 0 15px
+}
+.drag {
+  color:var(--line);
+  margin-top:17px
+}
+.step-body {
+  padding:15px 18px 18px
+}
+.step-heading {
+  justify-content:space-between;
+  gap:15px
+}
+.step-heading h2 {
+  font:600 15px var(--font-mono);
+  margin:5px 0 18px
+}
+.step-tools {
+  gap:13px
+}
+.step-tools button {
+  color:var(--muted);
+  background:0 0;
+  border:0
+}
+.check {
+  color:#238354;
+  font:10px var(--font-mono);
+  align-items:center;
+  gap:4px;
+  display:flex
+}
+.controls {
+  grid-template-columns:1.1fr 1fr 1.2fr;
+  gap:16px;
+  display:grid
+}
+.controls.compact {
+  grid-template-columns:1fr 1fr
+}
+.control-block label {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  letter-spacing:.08em;
+  justify-content:space-between;
+  margin-bottom:8px;
+  display:flex
+}
+.control-block output {
+  color:var(--foreground)
+}
+.color-field {
+  border:1px solid var(--line);
+  align-items:center;
+  gap:8px;
+  height:32px;
+  padding:0 8px;
+  display:flex
+}
+.swatch {
+  border:1px solid var(--line);
+  width:14px;
+  height:14px
+}
+.swatch.dark {
+  background:#16202b
+}
+.color-field input {
+  min-width:0;
+  color:var(--foreground);
+  font:11px var(--font-mono);
+  background:0 0;
+  border:0;
+  outline:0;
+  flex:1
+}
+.control-block input[type=range] {
+  width:100%;
+  accent-color:var(--blue)
+}
+.segmented {
+  border:1px solid var(--line);
+  height:32px;
+  display:flex
+}
+.segmented button {
+  border:0;
+  border-right:1px solid var(--line);
+  color:var(--muted);
+  font:10px var(--font-mono);
+  background:0 0;
+  flex:1
+}
+.segmented .selected {
+  background:var(--blue);
+  color:#fff
+}
+.transform-note,.auto-note {
+  color:var(--muted);
+  font:11px var(--font-mono);
+  align-items:center;
+  gap:8px;
+  display:flex
+}
+.pipeline-footer {
+  justify-content:space-between;
+  padding-top:18px
+}
+.auto-note {
+  color:var(--muted)
+}
+.auto-note i {
+  display:inline-block
+}
+.preview-panel {
+  border:1px solid var(--line);
+  background:var(--panel);
+  align-self:start;
+  padding:18px;
+  position:sticky;
+  top:24px
+}
+.preview-top {
+  border-bottom:1px solid var(--line);
+  justify-content:space-between;
+  padding-bottom:15px
+}
+.preview-stack {
+  grid-template-columns:1fr 1fr;
+  gap:12px;
+  padding:16px 0;
+  display:grid
+}
+.preview-tile {
+  border:1px solid var(--line);
+  background:var(--background)
+}
+.preview-tile.active {
+  border-color:var(--blue)
+}
+.tile-canvas {
+  aspect-ratio:1.35;
+  background-color:#e4e8eb;
+  background-image:linear-gradient(45deg,#d2d8dc 25%,#0000 25%),linear-gradient(-45deg,#d2d8dc 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#d2d8dc 75%),linear-gradient(-45deg,#0000 75%,#d2d8dc 75%);
+  background-position:0 0,0 7px,7px -7px,-7px 0;
+  background-size:14px 14px;
+  place-items:center;
+  padding:16px;
+  display:grid
+}
+.image-preview {
+  aspect-ratio:1.5;
+  color:#16202b;
+  width:80%;
+  font:600 10px var(--font-mono);
+  flex-direction:column;
+  justify-content:center;
+  align-items:center;
+  gap:5px;
+  display:flex
+}
+.sample-icon {
+  border:1px solid;
+  padding:3px 5px;
+  font-size:9px
+}
+.tile-label {
+  border-top:1px solid var(--line);
+  font:9px var(--font-mono);
+  color:var(--blue);
+  justify-content:space-between;
+  gap:8px;
+  padding:8px;
+  display:flex
+}
+.tile-label b {
+  color:var(--muted);
+  text-align:right;
+  font-weight:400
+}
+.preview-meta {
+  border-top:1px solid var(--line);
+  grid-template-columns:repeat(3,1fr);
+  gap:8px;
+  padding-top:14px;
+  display:grid
+}
+.preview-meta span {
+  color:var(--muted);
+  font:9px var(--font-mono);
+  display:block
+}
+.preview-meta b {
+  font:11px var(--font-mono);
+  margin-top:5px;
+  display:block
+}
+.download-btn {
+  background:var(--blue);
+  color:#fff;
+  width:100%;
+  height:42px;
+  font:11px var(--font-mono);
+  border:0;
+  justify-content:center;
+  align-items:center;
+  gap:9px;
+  margin-top:18px;
+  display:flex
+}
+.preview-note {
+  color:var(--muted);
+  margin:12px 0 0;
+  font-size:11px;
+  line-height:1.5
+}
+.footer {
+  border-top:1px solid var(--line);
+  color:var(--muted);
+  font:10px var(--font-mono);
+  justify-content:space-between;
+  padding:16px clamp(20px,4vw,72px)
+}
+.footer span {
+  align-items:center;
+  gap:7px;
+  display:flex
+}
+.footer b {
+  color:var(--blue);
+  font-weight:400
+}
+@media (max-width:1200px) {
+  .page-grid {
+  grid-template-columns:minmax(0,1fr) minmax(420px,.9fr);
+  gap:32px
+}
+
+}
+.dark-mode .tile-canvas {
+  background-color:#202a31;
+  background-image:linear-gradient(45deg,#29343c 25%,#0000 25%),linear-gradient(-45deg,#29343c 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#29343c 75%),linear-gradient(-45deg,#0000 75%,#29343c 75%)
+}
+.dark-mode .image-preview {
+  color:#16202b
+}
+@media (max-width:800px) {
+  .topbar {
+  padding:0 16px
+}
+.status {
+  display:none
+}
+.page-grid {
+  padding:36px 16px 48px;
+  display:block
+}
+.title-row {
+  margin-bottom:40px;
+  display:block
+}
+.file-chip {
+  width:max-content;
+  margin-top:22px
+}
+.controls,.controls.compact {
+  grid-template-columns:1fr
+}
+.preview-panel {
+  margin-top:36px;
+  position:static
+}
+.footer {
+  flex-wrap:wrap;
+  gap:12px;
+  padding:0 16px 20px
+}
+.footer span:last-child {
+  display:none
+}
+
+}
+@media (max-width:1100px) {
+  .preview-stack {
+  grid-template-columns:repeat(3,minmax(220px,1fr))
+}
+
+}
+.preview-actions {
+  flex-wrap:wrap;
+  justify-content:flex-end
+}
+.download-btn {
+  white-space:nowrap
+}
+@media (max-width:800px) {
+  .preview-top {
+  flex-direction:column;
+  align-items:flex-start;
+  gap:18px
+}
+.preview-actions {
+  justify-content:space-between;
+  width:100%
+}
+.preview-meta {
+  gap:14px
+}
+.preview-stack {
+  grid-template-columns:repeat(2,minmax(0,1fr))
+}
+.tile-canvas {
+  min-height:260px
+}
+
+}
+@media (max-width:480px) {
+  .preview-stack {
+  grid-template-columns:1fr
+}
+.preview-meta {
+  justify-content:space-between;
+  width:100%
+}
+.title-row h1 {
+  font-size:40px
+}
+.pipeline-footer {
+  flex-direction:column;
+  align-items:flex-start;
+  gap:12px
+}
+
+}
+.tool-page {
+  width:100%;
+  padding:60px clamp(24px,4vw,72px) 72px
+}
+.tool-title {
+  justify-content:space-between;
+  align-items:end;
+  gap:32px;
+  margin-bottom:48px;
+  display:flex
+}
+.tool-title h1 {
+  margin-bottom:14px
+}
+.tool-status {
+  color:#25a96a;
+  font:10px var(--font-mono);
+  white-space:nowrap;
+  align-items:center;
+  gap:8px;
+  display:flex
+}
+.tool-status i,.auto-note i {
+  background:#25a96a;
+  border-radius:50%;
+  width:6px;
+  height:6px
+}
+.gradient-layout {
+  grid-template-columns:minmax(360px,.7fr) minmax(0,1.3fr);
+  align-items:start;
+  gap:56px;
+  display:grid
+}
+.settings-panel,.gradient-preview {
+  background:var(--panel);
+  border:1px solid var(--line)
+}
+.panel-heading,.preview-toolbar {
+  border-bottom:1px solid var(--line);
+  justify-content:space-between;
+  align-items:center;
+  padding:18px 20px;
+  display:flex
+}
+.panel-heading strong,.preview-toolbar strong {
+  font:600 14px var(--font-mono);
+  margin-top:5px;
+  display:block
+}
+.setting-group {
+  border-bottom:1px solid var(--line);
+  padding:22px 20px
+}
+.setting-group label {
+  font:10px var(--font-mono);
+  letter-spacing:.1em;
+  color:var(--muted);
+  justify-content:space-between;
+  margin-bottom:12px;
+  display:flex
+}
+.setting-group output {
+  color:var(--blue)
+}
+.color-row {
+  align-items:center;
+  gap:10px;
+  display:flex
+}
+.color-row .color-field {
+  flex:1
+}
+.stop-arrow {
+  color:var(--muted)
+}
+.gradient-bar {
+  border:1px solid var(--line);
+  height:14px;
+  margin-top:14px
+}
+.direction-grid {
+  grid-template-columns:repeat(4,1fr);
+  gap:6px;
+  margin-top:14px;
+  display:grid
+}
+.direction-grid button,.secondary-btn {
+  border:1px solid var(--line);
+  color:var(--muted);
+  font:10px var(--font-mono);
+  background:0 0;
+  padding:8px 6px
+}
+.direction-grid button.selected,.secondary-btn:hover {
+  background:var(--foreground);
+  color:var(--background)
+}
+.wide {
+  width:100%
+}
+.settings-footer {
+  justify-content:space-between;
+  align-items:center;
+  padding:16px 20px;
+  display:flex
+}
+.large-canvas {
+  background-color:#202a31;
+  background-image:linear-gradient(45deg,#29343c 25%,#0000 25%),linear-gradient(-45deg,#29343c 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#29343c 75%),linear-gradient(-45deg,#0000 75%,#29343c 75%);
+  background-position:0 0,0 14px,14px -14px,-14px 0;
+  background-size:28px 28px;
+  padding:24px
+}
+.gradient-art {
+  color:#fff;
+  min-height:clamp(420px,42vw,680px);
+  font:12px var(--font-mono);
+  place-content:center;
+  justify-items:center;
+  display:grid
+}
+.art-mark {
+  border:1px solid #ffffffa6;
+  place-items:center;
+  width:70px;
+  height:70px;
+  margin-bottom:12px;
+  font-size:16px;
+  display:grid
+}
+.code-block {
+  padding:16px 20px
+}
+.code-block>div {
+  justify-content:space-between;
+  align-items:center;
+  display:flex
+}
+.code-block pre {
+  background:var(--background);
+  color:var(--blue);
+  font:12px/1.6 var(--font-mono);
+  white-space:pre-wrap;
+  margin:12px 0 0;
+  padding:14px
+}
+.preview-actions {
+  align-items:center;
+  gap:10px;
+  display:flex
+}
+.secondary-btn {
+  align-items:center;
+  gap:8px;
+  display:flex
+}
+.dark-mode .large-canvas {
+  background-color:#202a31
+}
+.remover-layout {
+  grid-template-columns:minmax(360px,.62fr) minmax(0,1.38fr);
+  align-items:start;
+  gap:56px;
+  display:grid
+}
+.remover-preview {
+  background:var(--panel);
+  border:1px solid var(--line);
+  min-width:0
+}
+.comparison-grid {
+  grid-template-columns:repeat(2,minmax(0,1fr));
+  gap:18px;
+  padding:20px;
+  display:grid
+}
+.image-card {
+  min-width:0
+}
+.image-label {
+  font:10px var(--font-mono);
+  color:var(--muted);
+  justify-content:space-between;
+  margin-bottom:10px;
+  display:flex
+}
+.image-label span {
+  color:var(--blue)
+}
+.image-label b {
+  font-weight:400
+}
+.remover-canvas {
+  border:1px solid var(--line);
+  place-items:center;
+  min-height:clamp(360px,30vw,560px);
+  display:grid;
+  position:relative;
+  overflow:hidden
+}
+.source-canvas {
+  background:#e8eef2
+}
+.subject {
+  color:#ffffffd9;
+  width:74%;
+  height:68%;
+  font:600 14px var(--font-mono);
+  text-shadow:0 1px 2px #17212b;
+  place-items:center;
+  transition:all .2s;
+  display:grid
+}
+.subject-source {
+  transform:rotate(-3deg)
+}
+.canvas-size {
+  font:9px var(--font-mono);
+  color:var(--muted);
+  position:absolute;
+  bottom:9px;
+  right:10px
+}
+.result-meta {
+  border-top:1px solid var(--line);
+  font:10px var(--font-mono);
+  color:var(--muted);
+  gap:24px;
+  padding:16px 20px;
+  display:flex
+}
+.result-meta b {
+  color:var(--foreground);
+  margin-left:6px;
+  font-weight:600
+}
+.processed {
+  color:#25a96a;
+  font:10px var(--font-mono);
+  align-items:center;
+  gap:5px;
+  display:flex
+}
+.color-reference,.range-hints {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  justify-content:space-between;
+  margin-top:10px;
+  display:flex
+}
+.color-reference {
+  justify-content:flex-start;
+  gap:8px
+}
+.color-reference span {
+  border:1px solid var(--line);
+  width:9px;
+  height:9px
+}
+.native-color {
+  width:30px;
+  border:0!important;
+  padding:0!important
+}
+.toggle-group label {
+  cursor:pointer;
+  align-items:center
+}
+.toggle-group input {
+  display:none
+}
+.toggle {
+  border:1px solid var(--line);
+  width:32px;
+  height:18px;
+  position:relative
+}
+.toggle:after {
+  content:"";
+  background:var(--muted);
+  width:10px;
+  height:10px;
+  transition:transform .2s;
+  position:absolute;
+  top:3px;
+  left:3px
+}
+.toggle-group input:checked+.toggle {
+  background:var(--blue);
+  border-color:var(--blue)
+}
+.toggle-group input:checked+.toggle:after {
+  background:#fff;
+  transform:translate(14px)
+}
+.toggle-group p {
+  color:var(--muted);
+  margin:8px 0 0;
+  font-size:12px;
+  line-height:1.5
+}
+.catalog-nav {
+  border-bottom:1px solid var(--line);
+  justify-content:space-between;
+  align-items:center;
+  gap:24px;
+  margin:-64px 0 64px;
+  padding:18px 0;
+  display:flex
+}
+.catalog-brand {
+  color:var(--foreground);
+  font:600 14px var(--font-mono);
+  text-decoration:none
+}
+.catalog-nav nav {
+  gap:24px;
+  display:flex
+}
+.catalog-nav nav a,.catalog-nav-status {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  text-decoration:none
+}
+.catalog-nav nav a:hover,.catalog-nav nav a.current {
+  color:var(--blue)
+}
+.catalog-nav-status {
+  color:#25a96a
+}
+.catalog-page {
+  width:100%;
+  max-width:1680px;
+  margin:0 auto;
+  padding:64px clamp(24px,4vw,72px) 72px
+}
+.catalog-head {
+  border-bottom:1px solid var(--line);
+  justify-content:space-between;
+  align-items:flex-end;
+  gap:40px;
+  padding-bottom:42px;
+  display:flex
+}
+.catalog-head h1 {
+  margin:12px 0 14px
+}
+.catalog-head p {
+  max-width:660px;
+  color:var(--muted);
+  font:14px/1.6 var(--font-mono);
+  margin:0
+}
+.catalog-total {
+  color:var(--muted);
+  font:10px/1.4 var(--font-mono);
+  text-align:right;
+  align-items:center;
+  gap:14px;
+  display:flex
+}
+.catalog-total b {
+  color:var(--blue);
+  font:400 clamp(48px,5vw,76px)/.9 var(--font-mono);
+  letter-spacing:-.08em
+}
+.catalog-toolbar {
+  justify-content:space-between;
+  align-items:center;
+  gap:24px;
+  padding:24px 0 42px;
+  display:flex
+}
+.catalog-search {
+  border:1px solid var(--line);
+  width:min(420px,100%);
+  color:var(--muted);
+  align-items:center;
+  gap:12px;
+  padding:12px 14px;
+  display:flex
+}
+.catalog-search input {
+  width:100%;
+  color:var(--foreground);
+  font:12px var(--font-mono);
+  background:0 0;
+  border:0;
+  outline:0
+}
+.catalog-filters {
+  color:var(--muted);
+  flex-wrap:wrap;
+  align-items:center;
+  gap:6px;
+  display:flex
+}
+.catalog-filters button {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  background:0 0;
+  border:1px solid #0000;
+  padding:8px 10px
+}
+.catalog-filters button:hover,.catalog-filters button.active {
+  border-color:var(--blue);
+  color:var(--blue)
+}
+.catalog-groups {
+  grid-template-columns:repeat(2,minmax(0,1fr));
+  gap:56px 28px;
+  display:grid
+}
+.catalog-group {
+  min-width:0
+}
+.group-title {
+  border-bottom:1px solid var(--line);
+  color:var(--foreground);
+  font:600 11px var(--font-mono);
+  letter-spacing:.12em;
+  justify-content:space-between;
+  align-items:center;
+  padding-bottom:12px;
+  display:flex
+}
+.group-title i {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  font-style:normal
+}
+.tool-cards {
+  gap:10px;
+  padding-top:14px;
+  display:grid
+}
+.tool-card {
+  border:1px solid var(--line);
+  background:var(--panel);
+  min-height:106px;
+  color:var(--foreground);
+  grid-template-columns:42px minmax(0,1fr) 24px 18px;
+  align-items:center;
+  gap:14px;
+  padding:16px;
+  text-decoration:none;
+  transition:border-color .18s,transform .18s,background .18s;
+  display:grid
+}
+.tool-card:hover {
+  border-color:var(--blue);
+  background:var(--panel-strong);
+  transform:translateY(-2px)
+}
+.tool-icon {
+  background:var(--blue);
+  place-items:center;
+  width:42px;
+  height:42px;
+  display:grid
+}
+@supports (color:color-mix(in lab, red, red)) {
+  .tool-icon {
+  background:color-mix(in srgb,var(--blue) 12%,transparent)
+}
+
+}
+.tool-icon {
+  color:var(--blue)
+}
+.tool-copy {
+  gap:8px;
+  min-width:0;
+  display:grid
+}
+.tool-copy strong {
+  font:600 13px var(--font-mono)
+}
+.tool-copy span {
+  color:var(--muted);
+  font:12px/1.5 var(--font-mono)
+}
+.tool-index {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  align-self:start
+}
+.tool-arrow {
+  color:var(--blue);
+  opacity:0;
+  transition:opacity .18s,transform .18s
+}
+.tool-card:hover .tool-arrow {
+  opacity:1;
+  transform:translate(2px,-2px)
+}
+.catalog-empty {
+  border:1px dashed var(--line);
+  color:var(--muted);
+  font:12px var(--font-mono);
+  align-items:center;
+  gap:10px;
+  padding:40px;
+  display:flex
+}
+.catalog-footer {
+  border-top:1px solid var(--line);
+  color:var(--muted);
+  font:10px var(--font-mono);
+  margin-top:64px;
+  padding-top:20px
+}
+.catalog-footer span {
+  color:var(--blue);
+  margin:0 8px
+}
+@media (max-width:800px) {
+  .catalog-nav {
+  margin:-36px 0 36px
+}
+.catalog-nav-status {
+  display:none
+}
+.catalog-nav nav {
+  gap:14px
+}
+.catalog-page {
+  padding:36px 16px 48px
+}
+.catalog-head {
+  flex-direction:column;
+  align-items:flex-start;
+  gap:24px
+}
+.catalog-total {
+  text-align:left
+}
+.catalog-toolbar {
+  flex-direction:column;
+  align-items:stretch;
+  padding-bottom:30px
+}
+.catalog-search {
+  width:100%
+}
+.catalog-groups {
+  grid-template-columns:1fr;
+  gap:36px
+}
+.tool-card {
+  grid-template-columns:38px minmax(0,1fr) 18px;
+  gap:12px;
+  min-height:96px
+}
+.tool-icon {
+  width:38px;
+  height:38px
+}
+.tool-index {
+  display:none
+}
+.tool-arrow {
+  opacity:1
+}
+.tool-page {
+  padding:36px 16px 48px
+}
+.tool-title {
+  display:block
+}
+.tool-status {
+  margin-top:22px
+}
+.gradient-layout,.remover-layout {
+  grid-template-columns:1fr;
+  gap:24px
+}
+.gradient-preview,.remover-preview {
+  order:-1
+}
+.gradient-art {
+  min-height:340px
+}
+.preview-toolbar {
+  flex-direction:column;
+  align-items:flex-start;
+  gap:16px
+}
+.preview-actions {
+  justify-content:flex-end;
+  width:100%
+}
+.comparison-grid {
+  grid-template-columns:1fr
+}
+.remover-canvas {
+  min-height:300px
+}
+.result-meta {
+  flex-wrap:wrap;
+  gap:12px 18px
+}
+
+}
+@property --tw-rotate-x {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-rotate-y {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-rotate-z {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-skew-x {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-skew-y {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-border-style {
+  syntax:"*";
+  inherits:false;
+  initial-value:solid
+}
+@property --tw-font-weight {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-shadow {
+  syntax:"*";
+  inherits:false;
+  initial-value:0 0 #0000
+}
+@property --tw-shadow-color {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-shadow-alpha {
+  syntax:"<percentage>";
+  inherits:false;
+  initial-value:100%
+}
+@property --tw-inset-shadow {
+  syntax:"*";
+  inherits:false;
+  initial-value:0 0 #0000
+}
+@property --tw-inset-shadow-color {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-inset-shadow-alpha {
+  syntax:"<percentage>";
+  inherits:false;
+  initial-value:100%
+}
+@property --tw-ring-color {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-ring-shadow {
+  syntax:"*";
+  inherits:false;
+  initial-value:0 0 #0000
+}
+@property --tw-inset-ring-color {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-inset-ring-shadow {
+  syntax:"*";
+  inherits:false;
+  initial-value:0 0 #0000
+}
+@property --tw-ring-inset {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-ring-offset-width {
+  syntax:"<length>";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-ring-offset-color {
+  syntax:"*";
+  inherits:false;
+  initial-value:#fff
+}
+@property --tw-ring-offset-shadow {
+  syntax:"*";
+  inherits:false;
+  initial-value:0 0 #0000
+}
+@property --tw-outline-style {
+  syntax:"*";
+  inherits:false;
+  initial-value:solid
+}
+@property --tw-blur {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-brightness {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-contrast {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-grayscale {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-hue-rotate {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-invert {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-opacity {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-saturate {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-sepia {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-drop-shadow {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-drop-shadow-color {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-drop-shadow-alpha {
+  syntax:"<percentage>";
+  inherits:false;
+  initial-value:100%
+}
+@property --tw-drop-shadow-size {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-translate-x {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-translate-y {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-translate-z {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+</style>
+    <meta name="theme-color" content="#eef1f4"/>
+    <meta name="color-scheme" content="light"/>
+    <title>easy-png-tools / Demo
+    </title>
+    <meta name="description" content="Technical workspace for building PNG processing pipelines."/>
+    <meta name="generator" content="easy-png-tools"/>
+  </head>
+  <body class="antialiased">
+    <div hidden="">
+      <!--$-->
+      <!--/$-->
+    </div>
+    <main class="app-shell dark-mode">
+      <header class="topbar">
+        <div class="brand">
+          <span class="brand-mark">EP
+          </span>
+          <span>easy-png-tools
+          </span>
+          <span class="version">/ BACKGROUND REMOVER
+          </span>
+        </div>
+        <div class="top-actions">
+          <span class="status">
+            <i>
+            </i> AUTO PROCESSING
+          </span>
+          <button class="icon-btn" aria-label="Toggle theme">
+            <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun" aria-hidden="true">
+              <circle cx="12" cy="12" r="4">
+              </circle>
+              <path d="M12 2v2">
+              </path>
+              <path d="M12 20v2">
+              </path>
+              <path d="m4.93 4.93 1.41 1.41">
+              </path>
+              <path d="m17.66 17.66 1.41 1.41">
+              </path>
+              <path d="M2 12h2">
+              </path>
+              <path d="M20 12h2">
+              </path>
+              <path d="m6.34 17.66-1.41 1.41">
+              </path>
+              <path d="m19.07 4.93-1.41 1.41">
+              </path>
+            </svg>
+          </button>
+        </div>
+      </header>
+      <div class="tool-page">
+        <div class="eyebrow">PNG PROCESSING 
+          <span>/
+          </span> SINGLE TOOL
+        </div>
+        <div class="tool-title">
+          <div>
+            <h1>Remove background.
+            </h1>
+            <p class="lede">Select a background color and tune the edge detection. Changes are processed automatically in your browser.
+            </p>
+          </div>
+          <span class="tool-status">
+            <i>
+            </i> LIVE PREVIEW
+          </span>
+        </div>
+        <div class="remover-layout">
+          <section class="settings-panel">
+            <div class="panel-heading">
+              <div>
+                <span class="label">REMOVER SETTINGS
+                </span>
+                <strong>Configure detection
+                </strong>
+              </div>
+              <span class="step-type">TOOL 02
+              </span>
+            </div>
+            <div class="setting-group">
+              <label>BACKGROUND COLOR
+              </label>
+              <div class="color-field">
+                <span class="swatch" style="background:#E8EEF2">
+                </span>
+                <input value="#E8EEF2"/>
+                <input class="native-color" type="color" aria-label="Choose background color" value="#E8EEF2"/>
+              </div>
+              <div class="color-reference">
+                <span style="background:#E8EEF2">
+                </span> sampled from image background
+              </div>
+            </div>
+            <div class="setting-group">
+              <label>COLOR SIMILARITY 
+                <output>72
+                  <!-- -->%
+                </output>
+              </label>
+              <input type="range" min="0" max="100" value="72"/>
+              <div class="range-hints">
+                <span>strict edges
+                </span>
+                <span>more removal
+                </span>
+              </div>
+            </div>
+            <div class="setting-group toggle-group">
+              <label>
+                <span>OUTER COLOR ONLY
+                </span>
+                <input type="checkbox" checked=""/>
+                <b class="toggle">
+                </b>
+              </label>
+              <p>Only remove connected background pixels from the edges.
+              </p>
+            </div>
+            <div class="setting-group toggle-group">
+              <label>
+                <span>SHOW MASK
+                </span>
+                <input type="checkbox"/>
+                <b class="toggle">
+                </b>
+              </label>
+              <p>Preview the detected transparency mask.
+              </p>
+            </div>
+            <div class="settings-footer">
+              <button class="reset-btn">
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-ccw" aria-hidden="true">
+                  <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8">
+                  </path>
+                  <path d="M3 3v5h5">
+                  </path>
+                </svg> Reset
+              </button>
+              <span class="auto-note">
+                <i>
+                </i> updates automatically
+              </span>
+            </div>
+          </section>
+          <section class="remover-preview">
+            <div class="preview-toolbar">
+              <div>
+                <span class="label">SOURCE / RESULT
+                </span>
+                <strong>comparison.png
+                </strong>
+              </div>
+              <div class="preview-actions">
+                <span class="processed">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true">
+                    <path d="M20 6 9 17l-5-5">
+                    </path>
+                  </svg> processed
+                </span>
+                <button class="download-btn">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download" aria-hidden="true">
+                    <path d="M12 15V3">
+                    </path>
+                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4">
+                    </path>
+                    <path d="m7 10 5 5 5-5">
+                    </path>
+                  </svg>
+                  <!-- -->Download result
+                </button>
+              </div>
+            </div>
+            <div class="comparison-grid">
+              <div class="image-card">
+                <div class="image-label">
+                  <span>SOURCE
+                  </span>
+                  <b>original.png
+                  </b>
+                </div>
+                <div class="remover-canvas source-canvas">
+                  <div class="subject subject-source" style="background:linear-gradient(145deg,#1769d2 0 38%,#00a8c7 38% 66%,#bd7411 66%);opacity:1;clip-path:polygon(23% 11%, 73% 8%, 89% 30%, 79% 81%, 52% 93%, 17% 78%, 8% 39%)">
+                    <span>OBJECT
+                    </span>
+                  </div>
+                  <span class="canvas-size">1200 × 800
+                  </span>
+                </div>
+              </div>
+              <div class="image-card">
+                <div class="image-label">
+                  <span>RESULT
+                  </span>
+                  <b>removed-bg.png
+                  </b>
+                </div>
+                <div class="remover-canvas" style="background:repeating-conic-gradient(#d7dce0 0 25%, #f3f5f6 0 50%) 50% / 28px 28px">
+                  <div class="subject" style="background:linear-gradient(145deg,#1769d2 0 38%,#00a8c7 38% 66%,#bd7411 66%);opacity:1;clip-path:polygon(23% 11%, 73% 8%, 89% 30%, 79% 81%, 52% 93%, 17% 78%, 8% 39%)">
+                    <span>PNG
+                    </span>
+                  </div>
+                  <span class="canvas-size">1200 × 800
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div class="result-meta">
+              <span>FORMAT 
+                <b>PNG-24
+                </b>
+              </span>
+              <span>ALPHA 
+                <b>ENABLED
+                </b>
+              </span>
+              <span>SIMILARITY 
+                <b>72
+                  <!-- -->%
+                </b>
+              </span>
+            </div>
+          </section>
+        </div>
+      </div>
+      <footer class="footer">
+        <span>easy-png-tools 
+          <b>v2.4.0
+          </b>
+        </span>
+        <span>background remover · local-only
+        </span>
+        <span>© 2024
+        </span>
+      </footer>
+    </main>
+    <!--$-->
+    <!--/$-->
+    <!--$!-->
+    <template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING">
+    </template>
+    <!--/$-->
+  </body>
+</html>
\ No newline at end of file
diff --git a/refs-html/demo.html b/refs-html/demo.html
new file mode 100644
index 0000000..195baa5
--- /dev/null
+++ b/refs-html/demo.html
@@ -0,0 +1,2576 @@
+<!DOCTYPE html>
+<html lang="ru" class="bg-background">
+  <head>
+    <meta charSet="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <style>
+@layer properties {
+  @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
+  *,:before,:after,::backdrop {
+  --tw-rotate-x:initial;
+  --tw-rotate-y:initial;
+  --tw-rotate-z:initial;
+  --tw-skew-x:initial;
+  --tw-skew-y:initial;
+  --tw-border-style:solid;
+  --tw-font-weight:initial;
+  --tw-shadow:0 0 #0000;
+  --tw-shadow-color:initial;
+  --tw-shadow-alpha:100%;
+  --tw-inset-shadow:0 0 #0000;
+  --tw-inset-shadow-color:initial;
+  --tw-inset-shadow-alpha:100%;
+  --tw-ring-color:initial;
+  --tw-ring-shadow:0 0 #0000;
+  --tw-inset-ring-color:initial;
+  --tw-inset-ring-shadow:0 0 #0000;
+  --tw-ring-inset:initial;
+  --tw-ring-offset-width:0px;
+  --tw-ring-offset-color:#fff;
+  --tw-ring-offset-shadow:0 0 #0000;
+  --tw-outline-style:solid;
+  --tw-blur:initial;
+  --tw-brightness:initial;
+  --tw-contrast:initial;
+  --tw-grayscale:initial;
+  --tw-hue-rotate:initial;
+  --tw-invert:initial;
+  --tw-opacity:initial;
+  --tw-saturate:initial;
+  --tw-sepia:initial;
+  --tw-drop-shadow:initial;
+  --tw-drop-shadow-color:initial;
+  --tw-drop-shadow-alpha:100%;
+  --tw-drop-shadow-size:initial;
+  --tw-translate-x:0;
+  --tw-translate-y:0;
+  --tw-translate-z:0;
+  --tw-animation-delay:0s;
+  --tw-animation-direction:normal;
+  --tw-animation-duration:initial;
+  --tw-animation-fill-mode:none;
+  --tw-animation-iteration-count:1;
+  --tw-enter-blur:0;
+  --tw-enter-opacity:1;
+  --tw-enter-rotate:0;
+  --tw-enter-scale:1;
+  --tw-enter-translate-x:0;
+  --tw-enter-translate-y:0;
+  --tw-exit-blur:0;
+  --tw-exit-opacity:1;
+  --tw-exit-rotate:0;
+  --tw-exit-scale:1;
+  --tw-exit-translate-x:0;
+  --tw-exit-translate-y:0
+}
+
+}
+
+}
+@layer theme {
+  :root,:host {
+  --font-sans:"IBM Plex Sans", sans-serif;
+  --font-mono:"IBM Plex Mono", monospace;
+  --spacing:.25rem;
+  --text-xs:.75rem;
+  --text-xs--line-height:calc(1 / .75);
+  --text-sm:.875rem;
+  --text-sm--line-height:calc(1.25 / .875);
+  --font-weight-medium:500;
+  --radius-md:.375rem;
+  --radius-lg:.5rem;
+  --default-transition-duration:.15s;
+  --default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);
+  --default-font-family:"IBM Plex Sans", sans-serif;
+  --default-mono-font-family:"IBM Plex Mono", monospace
+}
+
+}
+@layer base {
+  *,:after,:before,::backdrop {
+  box-sizing:border-box;
+  border:0 solid;
+  margin:0;
+  padding:0
+}
+::file-selector-button {
+  box-sizing:border-box;
+  border:0 solid;
+  margin:0;
+  padding:0
+}
+html,:host {
+  -webkit-text-size-adjust:100%;
+  tab-size:4;
+  line-height:1.5;
+  font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+  font-feature-settings:var(--default-font-feature-settings,normal);
+  font-variation-settings:var(--default-font-variation-settings,normal);
+  -webkit-tap-highlight-color:transparent
+}
+hr {
+  height:0;
+  color:inherit;
+  border-top-width:1px
+}
+abbr:where([title]) {
+  -webkit-text-decoration:underline dotted;
+  text-decoration:underline dotted
+}
+h1,h2,h3,h4,h5,h6 {
+  font-size:inherit;
+  font-weight:inherit
+}
+a {
+  color:inherit;
+  -webkit-text-decoration:inherit;
+  -webkit-text-decoration:inherit;
+  -webkit-text-decoration:inherit;
+  -webkit-text-decoration:inherit;
+  text-decoration:inherit
+}
+b,strong {
+  font-weight:bolder
+}
+code,kbd,samp,pre {
+  font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+  font-feature-settings:var(--default-mono-font-feature-settings,normal);
+  font-variation-settings:var(--default-mono-font-variation-settings,normal);
+  font-size:1em
+}
+small {
+  font-size:80%
+}
+sub,sup {
+  vertical-align:baseline;
+  font-size:75%;
+  line-height:0;
+  position:relative
+}
+sub {
+  bottom:-.25em
+}
+sup {
+  top:-.5em
+}
+table {
+  text-indent:0;
+  border-color:inherit;
+  border-collapse:collapse
+}
+:-moz-focusring:where(:not(iframe)) {
+  outline:auto
+}
+progress {
+  vertical-align:baseline
+}
+summary {
+  display:list-item
+}
+ol,ul,menu {
+  list-style:none
+}
+img,svg,video,canvas,audio,iframe,embed,object {
+  vertical-align:middle;
+  display:block
+}
+img,video {
+  max-width:100%;
+  height:auto
+}
+button,input,select,optgroup,textarea {
+  font:inherit;
+  font-feature-settings:inherit;
+  font-variation-settings:inherit;
+  letter-spacing:inherit;
+  color:inherit;
+  opacity:1;
+  background-color:#0000;
+  border-radius:0
+}
+::file-selector-button {
+  font:inherit;
+  font-feature-settings:inherit;
+  font-variation-settings:inherit;
+  letter-spacing:inherit;
+  color:inherit;
+  opacity:1;
+  background-color:#0000;
+  border-radius:0
+}
+:where(select:is([multiple],[size])) optgroup {
+  font-weight:bolder
+}
+:where(select:is([multiple],[size])) optgroup option {
+  padding-inline-start:20px
+}
+::file-selector-button {
+  margin-inline-end:4px
+}
+::placeholder {
+  opacity:1
+}
+@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
+  ::placeholder {
+  color:currentColor
+}
+@supports (color:color-mix(in lab, red, red)) {
+  ::placeholder {
+  color:color-mix(in oklab, currentcolor 50%, transparent)
+}
+
+}
+
+}
+textarea {
+  resize:vertical
+}
+::-webkit-search-decoration {
+  -webkit-appearance:none
+}
+::-webkit-date-and-time-value {
+  min-height:1lh;
+  text-align:inherit
+}
+::-webkit-datetime-edit {
+  display:inline-flex
+}
+::-webkit-datetime-edit-fields-wrapper {
+  padding:0
+}
+::-webkit-datetime-edit {
+  padding-block:0
+}
+::-webkit-datetime-edit-year-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-month-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-day-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-hour-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-minute-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-second-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-millisecond-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-meridiem-field {
+  padding-block:0
+}
+::-webkit-calendar-picker-indicator {
+  line-height:1
+}
+:-moz-ui-invalid {
+  box-shadow:none
+}
+button,input:where([type=button],[type=reset],[type=submit]) {
+  appearance:button
+}
+::file-selector-button {
+  appearance:button
+}
+::-webkit-inner-spin-button {
+  height:auto
+}
+::-webkit-outer-spin-button {
+  height:auto
+}
+[hidden]:where(:not([hidden=until-found])) {
+  display:none!important
+}
+
+}
+@layer components;
+  @layer utilities {
+  .static {
+  position:static
+}
+.inline {
+  display:inline
+}
+.inline-flex {
+  display:inline-flex
+}
+.size-6 {
+  width:calc(var(--spacing) * 6);
+  height:calc(var(--spacing) * 6)
+}
+.size-7 {
+  width:calc(var(--spacing) * 7);
+  height:calc(var(--spacing) * 7)
+}
+.size-8 {
+  width:calc(var(--spacing) * 8);
+  height:calc(var(--spacing) * 8)
+}
+.size-9 {
+  width:calc(var(--spacing) * 9);
+  height:calc(var(--spacing) * 9)
+}
+.h-6 {
+  height:calc(var(--spacing) * 6)
+}
+.h-7 {
+  height:calc(var(--spacing) * 7)
+}
+.h-8 {
+  height:calc(var(--spacing) * 8)
+}
+.h-9 {
+  height:calc(var(--spacing) * 9)
+}
+.shrink-0 {
+  flex-shrink:0
+}
+.transform {
+  transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)
+}
+.items-center {
+  align-items:center
+}
+.justify-center {
+  justify-content:center
+}
+.gap-1 {
+  gap:var(--spacing)
+}
+.gap-1\.5 {
+  gap:calc(var(--spacing) * 1.5)
+}
+.rounded-\[min\(var\(--radius-md\)\,10px\)\] {
+  border-radius:min(var(--radius-md), 10px)
+}
+.rounded-\[min\(var\(--radius-md\)\,12px\)\] {
+  border-radius:min(var(--radius-md), 12px)
+}
+.rounded-lg {
+  border-radius:var(--radius-lg)
+}
+.border {
+  border-style:var(--tw-border-style);
+  border-width:1px
+}
+.border-border {
+  border-color:var(--line)
+}
+.border-transparent {
+  border-color:#0000
+}
+.bg-background {
+  background-color:var(--background)
+}
+.bg-clip-padding {
+  background-clip:padding-box
+}
+.px-2 {
+  padding-inline:calc(var(--spacing) * 2)
+}
+.px-2\.5 {
+  padding-inline:calc(var(--spacing) * 2.5)
+}
+.text-sm {
+  font-size:var(--text-sm);
+  line-height:var(--tw-leading,var(--text-sm--line-height))
+}
+.text-xs {
+  font-size:var(--text-xs);
+  line-height:var(--tw-leading,var(--text-xs--line-height))
+}
+.text-\[0\.8rem\] {
+  font-size:.8rem
+}
+.font-medium {
+  --tw-font-weight:var(--font-weight-medium);
+  font-weight:var(--font-weight-medium)
+}
+.whitespace-nowrap {
+  white-space:nowrap
+}
+.underline-offset-4 {
+  text-underline-offset:4px
+}
+.antialiased {
+  -webkit-font-smoothing:antialiased;
+  -moz-osx-font-smoothing:grayscale
+}
+.ring {
+  --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
+  box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
+}
+.outline {
+  outline-style:var(--tw-outline-style);
+  outline-width:1px
+}
+.blur {
+  --tw-blur:blur(8px);
+  filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
+}
+.grayscale {
+  --tw-grayscale:grayscale(100%);
+  filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
+}
+.transition {
+  transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
+  transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));
+  transition-duration:var(--tw-duration,var(--default-transition-duration))
+}
+.transition-all {
+  transition-property:all;
+  transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));
+  transition-duration:var(--tw-duration,var(--default-transition-duration))
+}
+.outline-none {
+  --tw-outline-style:none;
+  outline-style:none
+}
+.select-none {
+  -webkit-user-select:none;
+  user-select:none
+}
+@media (hover:hover) {
+  .hover\:text-foreground:hover {
+  color:var(--foreground)
+}
+.hover\:underline:hover {
+  text-decoration-line:underline
+}
+
+}
+.focus-visible\:ring-3:focus-visible {
+  --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
+  box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
+}
+.active\:not-aria-\[haspopup\]\:translate-y-px:active:not([aria-haspopup]) {
+  --tw-translate-y:1px;
+  translate:var(--tw-translate-x) var(--tw-translate-y)
+}
+.disabled\:pointer-events-none:disabled {
+  pointer-events:none
+}
+.disabled\:opacity-50:disabled {
+  opacity:.5
+}
+:where([data-slot=button-group]) .in-data-\[slot\=button-group\]\:rounded-lg {
+  border-radius:var(--radius-lg)
+}
+.has-data-\[icon\=inline-end\]\:pr-1\.5:has([data-icon=inline-end]) {
+  padding-right:calc(var(--spacing) * 1.5)
+}
+.has-data-\[icon\=inline-end\]\:pr-2:has([data-icon=inline-end]) {
+  padding-right:calc(var(--spacing) * 2)
+}
+.has-data-\[icon\=inline-start\]\:pl-1\.5:has([data-icon=inline-start]) {
+  padding-left:calc(var(--spacing) * 1.5)
+}
+.has-data-\[icon\=inline-start\]\:pl-2:has([data-icon=inline-start]) {
+  padding-left:calc(var(--spacing) * 2)
+}
+.aria-expanded\:text-foreground[aria-expanded=true] {
+  color:var(--foreground)
+}
+.aria-invalid\:ring-3[aria-invalid=true] {
+  --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
+  box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
+}
+.\[\&_svg\]\:pointer-events-none svg {
+  pointer-events:none
+}
+.\[\&_svg\]\:shrink-0 svg {
+  flex-shrink:0
+}
+.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3 svg:not([class*=size-]) {
+  width:calc(var(--spacing) * 3);
+  height:calc(var(--spacing) * 3)
+}
+.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5 svg:not([class*=size-]) {
+  width:calc(var(--spacing) * 3.5);
+  height:calc(var(--spacing) * 3.5)
+}
+.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]) {
+  width:calc(var(--spacing) * 4);
+  height:calc(var(--spacing) * 4)
+}
+
+}
+@property --tw-animation-delay {
+  syntax:"*";
+  inherits:false;
+  initial-value:0s
+}
+@property --tw-animation-direction {
+  syntax:"*";
+  inherits:false;
+  initial-value:normal
+}
+@property --tw-animation-duration {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-animation-fill-mode {
+  syntax:"*";
+  inherits:false;
+  initial-value:none
+}
+@property --tw-animation-iteration-count {
+  syntax:"*";
+  inherits:false;
+  initial-value:1
+}
+@property --tw-enter-blur {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-enter-opacity {
+  syntax:"*";
+  inherits:false;
+  initial-value:1
+}
+@property --tw-enter-rotate {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-enter-scale {
+  syntax:"*";
+  inherits:false;
+  initial-value:1
+}
+@property --tw-enter-translate-x {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-enter-translate-y {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-exit-blur {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-exit-opacity {
+  syntax:"*";
+  inherits:false;
+  initial-value:1
+}
+@property --tw-exit-rotate {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-exit-scale {
+  syntax:"*";
+  inherits:false;
+  initial-value:1
+}
+@property --tw-exit-translate-x {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-exit-translate-y {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+:root {
+  --lightningcss-light:initial;
+  --lightningcss-dark: ;
+  color-scheme:light;
+  --background:#eef1f4;
+  --foreground:#17212b;
+  --panel:#f8fafb;
+  --line:#cbd3da;
+  --muted:#6d7883;
+  --blue:#1769d2;
+  --cyan:#00a8c7;
+  --amber:#bd7411;
+  --radius:4px
+}
+* {
+  box-sizing:border-box;
+  border-color:var(--line)
+}
+html {
+  background:var(--background)
+}
+body {
+  background:var(--background);
+  color:var(--foreground);
+  font-family:var(--font-sans);
+  margin:0
+}
+button,input {
+  font:inherit
+}
+button {
+  cursor:pointer
+}
+.app-shell {
+  background-color:var(--background);
+  background-image:linear-gradient(#dce2e7 1px,#0000 1px),linear-gradient(90deg,#dce2e7 1px,#0000 1px);
+  background-size:32px 32px;
+  min-height:100vh
+}
+.dark-mode {
+  --background:#11171d;
+  --foreground:#e8eef2;
+  --panel:#182129;
+  --line:#33414c;
+  --muted:#91a0ac;
+  --blue:#54a2ff;
+  background-image:linear-gradient(#1b252d 1px,#0000 1px),linear-gradient(90deg,#1b252d 1px,#0000 1px)
+}
+.topbar,.brand,.top-actions,.language,.status,.title-row,.pipeline-head,.step-heading,.step-tools,.pipeline-footer,.preview-top,.footer {
+  align-items:center;
+  display:flex
+}
+.topbar {
+  border-bottom:1px solid var(--line);
+  background:var(--panel);
+  justify-content:space-between;
+  height:64px;
+  padding:0 clamp(20px,4vw,64px)
+}
+.brand {
+  font:600 14px var(--font-mono);
+  gap:10px
+}
+.brand-mark {
+  background:var(--blue);
+  color:#fff;
+  place-items:center;
+  width:30px;
+  height:30px;
+  font-size:11px;
+  display:grid
+}
+.version,.label,.step-type,.eyebrow {
+  font:10px var(--font-mono);
+  letter-spacing:.12em;
+  color:var(--muted)
+}
+.version,.eyebrow {
+  color:var(--blue)
+}
+.top-actions {
+  gap:16px
+}
+.status {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  letter-spacing:.08em;
+  gap:7px
+}
+.status i,.auto-note i {
+  background:#25a96a;
+  border-radius:50%;
+  width:6px;
+  height:6px
+}
+.icon-btn {
+  color:var(--muted);
+  background:0 0;
+  border:0;
+  place-items:center;
+  padding:6px;
+  display:grid
+}
+.language {
+  border:1px solid var(--line)
+}
+.language button {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  background:0 0;
+  border:0;
+  padding:6px 9px
+}
+.language .active {
+  background:var(--foreground);
+  color:var(--background)
+}
+.page-grid {
+  grid-template-columns:minmax(0,1.05fr) minmax(520px,.95fr);
+  align-items:start;
+  gap:56px;
+  width:100%;
+  max-width:none;
+  margin:auto;
+  padding:60px clamp(24px,4vw,72px) 72px;
+  display:grid
+}
+.preview-panel {
+  min-width:0;
+  margin-top:0;
+  position:sticky;
+  top:24px
+}
+.preview-meta {
+  gap:24px;
+  display:flex
+}
+.preview-meta div {
+  gap:5px;
+  display:grid
+}
+.preview-meta span {
+  font:10px var(--font-mono);
+  color:var(--muted)
+}
+.preview-meta b {
+  font:600 11px var(--font-mono)
+}
+.workspace,.preview-panel {
+  min-width:0
+}
+.preview-stack {
+  grid-template-columns:repeat(2,minmax(0,1fr));
+  gap:18px;
+  width:100%;
+  min-width:0;
+  display:grid
+}
+.preview-tile {
+  width:100%;
+  min-width:0;
+  overflow:hidden
+}
+.history-toggle {
+  border:1px solid var(--line);
+  width:100%;
+  color:var(--muted);
+  font:10px var(--font-mono);
+  letter-spacing:.04em;
+  background:0 0;
+  justify-content:center;
+  align-items:center;
+  gap:8px;
+  margin-top:18px;
+  padding:11px 14px;
+  display:flex
+}
+.history-toggle:hover {
+  color:var(--foreground);
+  background:var(--panel)
+}
+.top-toggle {
+  width:auto;
+  margin:0;
+  padding:8px 10px
+}
+.history-toggle .rotated {
+  transform:rotate(180deg)
+}
+.tile-canvas {
+  width:100%;
+  min-width:0;
+  min-height:clamp(300px,22vw,430px);
+  overflow:hidden
+}
+.image-preview {
+  min-width:0;
+  max-width:100%;
+  overflow:hidden
+}
+.eyebrow {
+  margin-bottom:18px
+}
+.eyebrow span {
+  color:var(--muted);
+  margin:0 7px
+}
+.title-row {
+  justify-content:space-between;
+  align-items:flex-end;
+  gap:30px;
+  margin-bottom:56px
+}
+h1 {
+  letter-spacing:-.06em;
+  max-width:700px;
+  margin:0 0 16px;
+  font-size:clamp(36px,4vw,64px);
+  font-weight:650;
+  line-height:1
+}
+.lede {
+  color:var(--muted);
+  max-width:550px;
+  margin:0;
+  line-height:1.6
+}
+.file-chip {
+  white-space:nowrap;
+  border:1px solid var(--line);
+  background:var(--panel);
+  font:11px var(--font-mono);
+  color:var(--muted);
+  align-items:center;
+  gap:8px;
+  padding:10px 12px;
+  display:flex
+}
+.file-chip b {
+  color:var(--blue);
+  font-weight:500
+}
+.pipeline-head {
+  border-bottom:1px solid var(--line);
+  justify-content:space-between;
+  padding-bottom:12px
+}
+.pipeline-head strong,.preview-top strong {
+  font:600 14px var(--font-mono);
+  margin-top:5px;
+  display:block
+}
+.pipeline-head em {
+  color:#25a96a;
+  font-size:10px;
+  font-style:normal
+}
+.add-btn,.reset-btn {
+  color:var(--blue);
+  background:0 0;
+  border:0;
+  align-items:center;
+  gap:7px;
+  font-size:12px;
+  display:flex
+}
+.steps-list {
+  gap:10px;
+  padding-top:14px;
+  display:grid
+}
+.step-card {
+  border:1px solid var(--line);
+  background:var(--panel);
+  grid-template-columns:46px 20px 1fr;
+  min-height:138px;
+  display:grid
+}
+.step-index {
+  font:11px var(--font-mono);
+  color:var(--blue);
+  padding:17px 0 0 15px
+}
+.drag {
+  color:var(--line);
+  margin-top:17px
+}
+.step-body {
+  padding:15px 18px 18px
+}
+.step-heading {
+  justify-content:space-between;
+  gap:15px
+}
+.step-heading h2 {
+  font:600 15px var(--font-mono);
+  margin:5px 0 18px
+}
+.step-tools {
+  gap:13px
+}
+.step-tools button {
+  color:var(--muted);
+  background:0 0;
+  border:0
+}
+.check {
+  color:#238354;
+  font:10px var(--font-mono);
+  align-items:center;
+  gap:4px;
+  display:flex
+}
+.controls {
+  grid-template-columns:1.1fr 1fr 1.2fr;
+  gap:16px;
+  display:grid
+}
+.controls.compact {
+  grid-template-columns:1fr 1fr
+}
+.control-block label {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  letter-spacing:.08em;
+  justify-content:space-between;
+  margin-bottom:8px;
+  display:flex
+}
+.control-block output {
+  color:var(--foreground)
+}
+.color-field {
+  border:1px solid var(--line);
+  align-items:center;
+  gap:8px;
+  height:32px;
+  padding:0 8px;
+  display:flex
+}
+.swatch {
+  border:1px solid var(--line);
+  width:14px;
+  height:14px
+}
+.swatch.dark {
+  background:#16202b
+}
+.color-field input {
+  min-width:0;
+  color:var(--foreground);
+  font:11px var(--font-mono);
+  background:0 0;
+  border:0;
+  outline:0;
+  flex:1
+}
+.control-block input[type=range] {
+  width:100%;
+  accent-color:var(--blue)
+}
+.segmented {
+  border:1px solid var(--line);
+  height:32px;
+  display:flex
+}
+.segmented button {
+  border:0;
+  border-right:1px solid var(--line);
+  color:var(--muted);
+  font:10px var(--font-mono);
+  background:0 0;
+  flex:1
+}
+.segmented .selected {
+  background:var(--blue);
+  color:#fff
+}
+.transform-note,.auto-note {
+  color:var(--muted);
+  font:11px var(--font-mono);
+  align-items:center;
+  gap:8px;
+  display:flex
+}
+.pipeline-footer {
+  justify-content:space-between;
+  padding-top:18px
+}
+.auto-note {
+  color:var(--muted)
+}
+.auto-note i {
+  display:inline-block
+}
+.preview-panel {
+  border:1px solid var(--line);
+  background:var(--panel);
+  align-self:start;
+  padding:18px;
+  position:sticky;
+  top:24px
+}
+.preview-top {
+  border-bottom:1px solid var(--line);
+  justify-content:space-between;
+  padding-bottom:15px
+}
+.preview-stack {
+  grid-template-columns:1fr 1fr;
+  gap:12px;
+  padding:16px 0;
+  display:grid
+}
+.preview-tile {
+  border:1px solid var(--line);
+  background:var(--background)
+}
+.preview-tile.active {
+  border-color:var(--blue)
+}
+.tile-canvas {
+  aspect-ratio:1.35;
+  background-color:#e4e8eb;
+  background-image:linear-gradient(45deg,#d2d8dc 25%,#0000 25%),linear-gradient(-45deg,#d2d8dc 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#d2d8dc 75%),linear-gradient(-45deg,#0000 75%,#d2d8dc 75%);
+  background-position:0 0,0 7px,7px -7px,-7px 0;
+  background-size:14px 14px;
+  place-items:center;
+  padding:16px;
+  display:grid
+}
+.image-preview {
+  aspect-ratio:1.5;
+  color:#16202b;
+  width:80%;
+  font:600 10px var(--font-mono);
+  flex-direction:column;
+  justify-content:center;
+  align-items:center;
+  gap:5px;
+  display:flex
+}
+.sample-icon {
+  border:1px solid;
+  padding:3px 5px;
+  font-size:9px
+}
+.tile-label {
+  border-top:1px solid var(--line);
+  font:9px var(--font-mono);
+  color:var(--blue);
+  justify-content:space-between;
+  gap:8px;
+  padding:8px;
+  display:flex
+}
+.tile-label b {
+  color:var(--muted);
+  text-align:right;
+  font-weight:400
+}
+.preview-meta {
+  border-top:1px solid var(--line);
+  grid-template-columns:repeat(3,1fr);
+  gap:8px;
+  padding-top:14px;
+  display:grid
+}
+.preview-meta span {
+  color:var(--muted);
+  font:9px var(--font-mono);
+  display:block
+}
+.preview-meta b {
+  font:11px var(--font-mono);
+  margin-top:5px;
+  display:block
+}
+.download-btn {
+  background:var(--blue);
+  color:#fff;
+  width:100%;
+  height:42px;
+  font:11px var(--font-mono);
+  border:0;
+  justify-content:center;
+  align-items:center;
+  gap:9px;
+  margin-top:18px;
+  display:flex
+}
+.preview-note {
+  color:var(--muted);
+  margin:12px 0 0;
+  font-size:11px;
+  line-height:1.5
+}
+.footer {
+  border-top:1px solid var(--line);
+  color:var(--muted);
+  font:10px var(--font-mono);
+  justify-content:space-between;
+  padding:16px clamp(20px,4vw,72px)
+}
+.footer span {
+  align-items:center;
+  gap:7px;
+  display:flex
+}
+.footer b {
+  color:var(--blue);
+  font-weight:400
+}
+@media (max-width:1200px) {
+  .page-grid {
+  grid-template-columns:minmax(0,1fr) minmax(420px,.9fr);
+  gap:32px
+}
+
+}
+.dark-mode .tile-canvas {
+  background-color:#202a31;
+  background-image:linear-gradient(45deg,#29343c 25%,#0000 25%),linear-gradient(-45deg,#29343c 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#29343c 75%),linear-gradient(-45deg,#0000 75%,#29343c 75%)
+}
+.dark-mode .image-preview {
+  color:#16202b
+}
+@media (max-width:800px) {
+  .topbar {
+  padding:0 16px
+}
+.status {
+  display:none
+}
+.page-grid {
+  padding:36px 16px 48px;
+  display:block
+}
+.title-row {
+  margin-bottom:40px;
+  display:block
+}
+.file-chip {
+  width:max-content;
+  margin-top:22px
+}
+.controls,.controls.compact {
+  grid-template-columns:1fr
+}
+.preview-panel {
+  margin-top:36px;
+  position:static
+}
+.footer {
+  flex-wrap:wrap;
+  gap:12px;
+  padding:0 16px 20px
+}
+.footer span:last-child {
+  display:none
+}
+
+}
+@media (max-width:1100px) {
+  .preview-stack {
+  grid-template-columns:repeat(3,minmax(220px,1fr))
+}
+
+}
+.preview-actions {
+  flex-wrap:wrap;
+  justify-content:flex-end
+}
+.download-btn {
+  white-space:nowrap
+}
+@media (max-width:800px) {
+  .preview-top {
+  flex-direction:column;
+  align-items:flex-start;
+  gap:18px
+}
+.preview-actions {
+  justify-content:space-between;
+  width:100%
+}
+.preview-meta {
+  gap:14px
+}
+.preview-stack {
+  grid-template-columns:repeat(2,minmax(0,1fr))
+}
+.tile-canvas {
+  min-height:260px
+}
+
+}
+@media (max-width:480px) {
+  .preview-stack {
+  grid-template-columns:1fr
+}
+.preview-meta {
+  justify-content:space-between;
+  width:100%
+}
+.title-row h1 {
+  font-size:40px
+}
+.pipeline-footer {
+  flex-direction:column;
+  align-items:flex-start;
+  gap:12px
+}
+
+}
+.tool-page {
+  width:100%;
+  padding:60px clamp(24px,4vw,72px) 72px
+}
+.tool-title {
+  justify-content:space-between;
+  align-items:end;
+  gap:32px;
+  margin-bottom:48px;
+  display:flex
+}
+.tool-title h1 {
+  margin-bottom:14px
+}
+.tool-status {
+  color:#25a96a;
+  font:10px var(--font-mono);
+  white-space:nowrap;
+  align-items:center;
+  gap:8px;
+  display:flex
+}
+.tool-status i,.auto-note i {
+  background:#25a96a;
+  border-radius:50%;
+  width:6px;
+  height:6px
+}
+.gradient-layout {
+  grid-template-columns:minmax(360px,.7fr) minmax(0,1.3fr);
+  align-items:start;
+  gap:56px;
+  display:grid
+}
+.settings-panel,.gradient-preview {
+  background:var(--panel);
+  border:1px solid var(--line)
+}
+.panel-heading,.preview-toolbar {
+  border-bottom:1px solid var(--line);
+  justify-content:space-between;
+  align-items:center;
+  padding:18px 20px;
+  display:flex
+}
+.panel-heading strong,.preview-toolbar strong {
+  font:600 14px var(--font-mono);
+  margin-top:5px;
+  display:block
+}
+.setting-group {
+  border-bottom:1px solid var(--line);
+  padding:22px 20px
+}
+.setting-group label {
+  font:10px var(--font-mono);
+  letter-spacing:.1em;
+  color:var(--muted);
+  justify-content:space-between;
+  margin-bottom:12px;
+  display:flex
+}
+.setting-group output {
+  color:var(--blue)
+}
+.color-row {
+  align-items:center;
+  gap:10px;
+  display:flex
+}
+.color-row .color-field {
+  flex:1
+}
+.stop-arrow {
+  color:var(--muted)
+}
+.gradient-bar {
+  border:1px solid var(--line);
+  height:14px;
+  margin-top:14px
+}
+.direction-grid {
+  grid-template-columns:repeat(4,1fr);
+  gap:6px;
+  margin-top:14px;
+  display:grid
+}
+.direction-grid button,.secondary-btn {
+  border:1px solid var(--line);
+  color:var(--muted);
+  font:10px var(--font-mono);
+  background:0 0;
+  padding:8px 6px
+}
+.direction-grid button.selected,.secondary-btn:hover {
+  background:var(--foreground);
+  color:var(--background)
+}
+.wide {
+  width:100%
+}
+.settings-footer {
+  justify-content:space-between;
+  align-items:center;
+  padding:16px 20px;
+  display:flex
+}
+.large-canvas {
+  background-color:#202a31;
+  background-image:linear-gradient(45deg,#29343c 25%,#0000 25%),linear-gradient(-45deg,#29343c 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#29343c 75%),linear-gradient(-45deg,#0000 75%,#29343c 75%);
+  background-position:0 0,0 14px,14px -14px,-14px 0;
+  background-size:28px 28px;
+  padding:24px
+}
+.gradient-art {
+  color:#fff;
+  min-height:clamp(420px,42vw,680px);
+  font:12px var(--font-mono);
+  place-content:center;
+  justify-items:center;
+  display:grid
+}
+.art-mark {
+  border:1px solid #ffffffa6;
+  place-items:center;
+  width:70px;
+  height:70px;
+  margin-bottom:12px;
+  font-size:16px;
+  display:grid
+}
+.code-block {
+  padding:16px 20px
+}
+.code-block>div {
+  justify-content:space-between;
+  align-items:center;
+  display:flex
+}
+.code-block pre {
+  background:var(--background);
+  color:var(--blue);
+  font:12px/1.6 var(--font-mono);
+  white-space:pre-wrap;
+  margin:12px 0 0;
+  padding:14px
+}
+.preview-actions {
+  align-items:center;
+  gap:10px;
+  display:flex
+}
+.secondary-btn {
+  align-items:center;
+  gap:8px;
+  display:flex
+}
+.dark-mode .large-canvas {
+  background-color:#202a31
+}
+.remover-layout {
+  grid-template-columns:minmax(360px,.62fr) minmax(0,1.38fr);
+  align-items:start;
+  gap:56px;
+  display:grid
+}
+.remover-preview {
+  background:var(--panel);
+  border:1px solid var(--line);
+  min-width:0
+}
+.comparison-grid {
+  grid-template-columns:repeat(2,minmax(0,1fr));
+  gap:18px;
+  padding:20px;
+  display:grid
+}
+.image-card {
+  min-width:0
+}
+.image-label {
+  font:10px var(--font-mono);
+  color:var(--muted);
+  justify-content:space-between;
+  margin-bottom:10px;
+  display:flex
+}
+.image-label span {
+  color:var(--blue)
+}
+.image-label b {
+  font-weight:400
+}
+.remover-canvas {
+  border:1px solid var(--line);
+  place-items:center;
+  min-height:clamp(360px,30vw,560px);
+  display:grid;
+  position:relative;
+  overflow:hidden
+}
+.source-canvas {
+  background:#e8eef2
+}
+.subject {
+  color:#ffffffd9;
+  width:74%;
+  height:68%;
+  font:600 14px var(--font-mono);
+  text-shadow:0 1px 2px #17212b;
+  place-items:center;
+  transition:all .2s;
+  display:grid
+}
+.subject-source {
+  transform:rotate(-3deg)
+}
+.canvas-size {
+  font:9px var(--font-mono);
+  color:var(--muted);
+  position:absolute;
+  bottom:9px;
+  right:10px
+}
+.result-meta {
+  border-top:1px solid var(--line);
+  font:10px var(--font-mono);
+  color:var(--muted);
+  gap:24px;
+  padding:16px 20px;
+  display:flex
+}
+.result-meta b {
+  color:var(--foreground);
+  margin-left:6px;
+  font-weight:600
+}
+.processed {
+  color:#25a96a;
+  font:10px var(--font-mono);
+  align-items:center;
+  gap:5px;
+  display:flex
+}
+.color-reference,.range-hints {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  justify-content:space-between;
+  margin-top:10px;
+  display:flex
+}
+.color-reference {
+  justify-content:flex-start;
+  gap:8px
+}
+.color-reference span {
+  border:1px solid var(--line);
+  width:9px;
+  height:9px
+}
+.native-color {
+  width:30px;
+  border:0!important;
+  padding:0!important
+}
+.toggle-group label {
+  cursor:pointer;
+  align-items:center
+}
+.toggle-group input {
+  display:none
+}
+.toggle {
+  border:1px solid var(--line);
+  width:32px;
+  height:18px;
+  position:relative
+}
+.toggle:after {
+  content:"";
+  background:var(--muted);
+  width:10px;
+  height:10px;
+  transition:transform .2s;
+  position:absolute;
+  top:3px;
+  left:3px
+}
+.toggle-group input:checked+.toggle {
+  background:var(--blue);
+  border-color:var(--blue)
+}
+.toggle-group input:checked+.toggle:after {
+  background:#fff;
+  transform:translate(14px)
+}
+.toggle-group p {
+  color:var(--muted);
+  margin:8px 0 0;
+  font-size:12px;
+  line-height:1.5
+}
+.catalog-nav {
+  border-bottom:1px solid var(--line);
+  justify-content:space-between;
+  align-items:center;
+  gap:24px;
+  margin:-64px 0 64px;
+  padding:18px 0;
+  display:flex
+}
+.catalog-brand {
+  color:var(--foreground);
+  font:600 14px var(--font-mono);
+  text-decoration:none
+}
+.catalog-nav nav {
+  gap:24px;
+  display:flex
+}
+.catalog-nav nav a,.catalog-nav-status {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  text-decoration:none
+}
+.catalog-nav nav a:hover,.catalog-nav nav a.current {
+  color:var(--blue)
+}
+.catalog-nav-status {
+  color:#25a96a
+}
+.catalog-page {
+  width:100%;
+  max-width:1680px;
+  margin:0 auto;
+  padding:64px clamp(24px,4vw,72px) 72px
+}
+.catalog-head {
+  border-bottom:1px solid var(--line);
+  justify-content:space-between;
+  align-items:flex-end;
+  gap:40px;
+  padding-bottom:42px;
+  display:flex
+}
+.catalog-head h1 {
+  margin:12px 0 14px
+}
+.catalog-head p {
+  max-width:660px;
+  color:var(--muted);
+  font:14px/1.6 var(--font-mono);
+  margin:0
+}
+.catalog-total {
+  color:var(--muted);
+  font:10px/1.4 var(--font-mono);
+  text-align:right;
+  align-items:center;
+  gap:14px;
+  display:flex
+}
+.catalog-total b {
+  color:var(--blue);
+  font:400 clamp(48px,5vw,76px)/.9 var(--font-mono);
+  letter-spacing:-.08em
+}
+.catalog-toolbar {
+  justify-content:space-between;
+  align-items:center;
+  gap:24px;
+  padding:24px 0 42px;
+  display:flex
+}
+.catalog-search {
+  border:1px solid var(--line);
+  width:min(420px,100%);
+  color:var(--muted);
+  align-items:center;
+  gap:12px;
+  padding:12px 14px;
+  display:flex
+}
+.catalog-search input {
+  width:100%;
+  color:var(--foreground);
+  font:12px var(--font-mono);
+  background:0 0;
+  border:0;
+  outline:0
+}
+.catalog-filters {
+  color:var(--muted);
+  flex-wrap:wrap;
+  align-items:center;
+  gap:6px;
+  display:flex
+}
+.catalog-filters button {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  background:0 0;
+  border:1px solid #0000;
+  padding:8px 10px
+}
+.catalog-filters button:hover,.catalog-filters button.active {
+  border-color:var(--blue);
+  color:var(--blue)
+}
+.catalog-groups {
+  grid-template-columns:repeat(2,minmax(0,1fr));
+  gap:56px 28px;
+  display:grid
+}
+.catalog-group {
+  min-width:0
+}
+.group-title {
+  border-bottom:1px solid var(--line);
+  color:var(--foreground);
+  font:600 11px var(--font-mono);
+  letter-spacing:.12em;
+  justify-content:space-between;
+  align-items:center;
+  padding-bottom:12px;
+  display:flex
+}
+.group-title i {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  font-style:normal
+}
+.tool-cards {
+  gap:10px;
+  padding-top:14px;
+  display:grid
+}
+.tool-card {
+  border:1px solid var(--line);
+  background:var(--panel);
+  min-height:106px;
+  color:var(--foreground);
+  grid-template-columns:42px minmax(0,1fr) 24px 18px;
+  align-items:center;
+  gap:14px;
+  padding:16px;
+  text-decoration:none;
+  transition:border-color .18s,transform .18s,background .18s;
+  display:grid
+}
+.tool-card:hover {
+  border-color:var(--blue);
+  background:var(--panel-strong);
+  transform:translateY(-2px)
+}
+.tool-icon {
+  background:var(--blue);
+  place-items:center;
+  width:42px;
+  height:42px;
+  display:grid
+}
+@supports (color:color-mix(in lab, red, red)) {
+  .tool-icon {
+  background:color-mix(in srgb,var(--blue) 12%,transparent)
+}
+
+}
+.tool-icon {
+  color:var(--blue)
+}
+.tool-copy {
+  gap:8px;
+  min-width:0;
+  display:grid
+}
+.tool-copy strong {
+  font:600 13px var(--font-mono)
+}
+.tool-copy span {
+  color:var(--muted);
+  font:12px/1.5 var(--font-mono)
+}
+.tool-index {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  align-self:start
+}
+.tool-arrow {
+  color:var(--blue);
+  opacity:0;
+  transition:opacity .18s,transform .18s
+}
+.tool-card:hover .tool-arrow {
+  opacity:1;
+  transform:translate(2px,-2px)
+}
+.catalog-empty {
+  border:1px dashed var(--line);
+  color:var(--muted);
+  font:12px var(--font-mono);
+  align-items:center;
+  gap:10px;
+  padding:40px;
+  display:flex
+}
+.catalog-footer {
+  border-top:1px solid var(--line);
+  color:var(--muted);
+  font:10px var(--font-mono);
+  margin-top:64px;
+  padding-top:20px
+}
+.catalog-footer span {
+  color:var(--blue);
+  margin:0 8px
+}
+@media (max-width:800px) {
+  .catalog-nav {
+  margin:-36px 0 36px
+}
+.catalog-nav-status {
+  display:none
+}
+.catalog-nav nav {
+  gap:14px
+}
+.catalog-page {
+  padding:36px 16px 48px
+}
+.catalog-head {
+  flex-direction:column;
+  align-items:flex-start;
+  gap:24px
+}
+.catalog-total {
+  text-align:left
+}
+.catalog-toolbar {
+  flex-direction:column;
+  align-items:stretch;
+  padding-bottom:30px
+}
+.catalog-search {
+  width:100%
+}
+.catalog-groups {
+  grid-template-columns:1fr;
+  gap:36px
+}
+.tool-card {
+  grid-template-columns:38px minmax(0,1fr) 18px;
+  gap:12px;
+  min-height:96px
+}
+.tool-icon {
+  width:38px;
+  height:38px
+}
+.tool-index {
+  display:none
+}
+.tool-arrow {
+  opacity:1
+}
+.tool-page {
+  padding:36px 16px 48px
+}
+.tool-title {
+  display:block
+}
+.tool-status {
+  margin-top:22px
+}
+.gradient-layout,.remover-layout {
+  grid-template-columns:1fr;
+  gap:24px
+}
+.gradient-preview,.remover-preview {
+  order:-1
+}
+.gradient-art {
+  min-height:340px
+}
+.preview-toolbar {
+  flex-direction:column;
+  align-items:flex-start;
+  gap:16px
+}
+.preview-actions {
+  justify-content:flex-end;
+  width:100%
+}
+.comparison-grid {
+  grid-template-columns:1fr
+}
+.remover-canvas {
+  min-height:300px
+}
+.result-meta {
+  flex-wrap:wrap;
+  gap:12px 18px
+}
+
+}
+@property --tw-rotate-x {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-rotate-y {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-rotate-z {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-skew-x {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-skew-y {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-border-style {
+  syntax:"*";
+  inherits:false;
+  initial-value:solid
+}
+@property --tw-font-weight {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-shadow {
+  syntax:"*";
+  inherits:false;
+  initial-value:0 0 #0000
+}
+@property --tw-shadow-color {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-shadow-alpha {
+  syntax:"<percentage>";
+  inherits:false;
+  initial-value:100%
+}
+@property --tw-inset-shadow {
+  syntax:"*";
+  inherits:false;
+  initial-value:0 0 #0000
+}
+@property --tw-inset-shadow-color {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-inset-shadow-alpha {
+  syntax:"<percentage>";
+  inherits:false;
+  initial-value:100%
+}
+@property --tw-ring-color {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-ring-shadow {
+  syntax:"*";
+  inherits:false;
+  initial-value:0 0 #0000
+}
+@property --tw-inset-ring-color {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-inset-ring-shadow {
+  syntax:"*";
+  inherits:false;
+  initial-value:0 0 #0000
+}
+@property --tw-ring-inset {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-ring-offset-width {
+  syntax:"<length>";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-ring-offset-color {
+  syntax:"*";
+  inherits:false;
+  initial-value:#fff
+}
+@property --tw-ring-offset-shadow {
+  syntax:"*";
+  inherits:false;
+  initial-value:0 0 #0000
+}
+@property --tw-outline-style {
+  syntax:"*";
+  inherits:false;
+  initial-value:solid
+}
+@property --tw-blur {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-brightness {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-contrast {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-grayscale {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-hue-rotate {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-invert {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-opacity {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-saturate {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-sepia {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-drop-shadow {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-drop-shadow-color {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-drop-shadow-alpha {
+  syntax:"<percentage>";
+  inherits:false;
+  initial-value:100%
+}
+@property --tw-drop-shadow-size {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-translate-x {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-translate-y {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-translate-z {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+</style>
+    <meta name="theme-color" content="#eef1f4"/>
+    <meta name="color-scheme" content="light"/>
+    <title>easy-png-tools / Demo
+    </title>
+    <meta name="description" content="Technical workspace for building PNG processing pipelines."/>
+    <meta name="generator" content="easy-png-tools"/>
+  </head>
+  <body class="antialiased">
+    <div hidden="">
+      <!--$-->
+      <!--/$-->
+    </div>
+    <main class="app-shell">
+      <header class="topbar">
+        <div class="brand">
+          <span class="brand-mark">EP
+          </span>
+          <span>easy-png-tools
+          </span>
+          <span class="version">/ DEMO
+          </span>
+        </div>
+        <div class="top-actions">
+          <span class="status">
+            <i>
+            </i> AUTO PIPELINE
+          </span>
+          <button class="icon-btn" aria-label="Help">
+            <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-question-mark" aria-hidden="true">
+              <circle cx="12" cy="12" r="10">
+              </circle>
+              <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3">
+              </path>
+              <path d="M12 17h.01">
+              </path>
+            </svg>
+          </button>
+          <button class="icon-btn" aria-label="Toggle theme">
+            <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon" aria-hidden="true">
+              <path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401">
+              </path>
+            </svg>
+          </button>
+          <div class="language">
+            <button class="active">RU
+            </button>
+            <button class="">EN
+            </button>
+          </div>
+        </div>
+      </header>
+      <div class="page-grid">
+        <section class="workspace">
+          <div class="eyebrow">PNG PROCESSING 
+            <span>/
+            </span> WORKSPACE
+          </div>
+          <div class="title-row">
+            <div>
+              <h1>Build your image pipeline.
+              </h1>
+              <p class="lede">Chain simple tools together. Every change is processed automatically and previewed at each stage.
+              </p>
+            </div>
+            <div class="file-chip">
+              <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-upload" aria-hidden="true">
+                <path d="M12 3v12">
+                </path>
+                <path d="m17 8-5-5-5 5">
+                </path>
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4">
+                </path>
+              </svg>
+              <span>source.png
+              </span>
+              <b>1.8 MB
+              </b>
+            </div>
+          </div>
+          <div class="pipeline-head">
+            <div>
+              <span class="label">PROCESSING PIPELINE
+              </span>
+              <strong>4
+                <!-- --> active steps 
+                <em>• LIVE
+                </em>
+              </strong>
+            </div>
+            <button class="add-btn">
+              <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus" aria-hidden="true">
+                <path d="M5 12h14">
+                </path>
+                <path d="M12 5v14">
+                </path>
+              </svg> Add tool
+            </button>
+          </div>
+          <div class="steps-list">
+            <article class="step-card">
+              <div class="step-index">01
+              </div>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-grip-vertical drag" aria-hidden="true">
+                <circle cx="9" cy="12" r="1">
+                </circle>
+                <circle cx="9" cy="5" r="1">
+                </circle>
+                <circle cx="9" cy="19" r="1">
+                </circle>
+                <circle cx="15" cy="12" r="1">
+                </circle>
+                <circle cx="15" cy="5" r="1">
+                </circle>
+                <circle cx="15" cy="19" r="1">
+                </circle>
+              </svg>
+              <div class="step-body">
+                <div class="step-heading">
+                  <div>
+                    <span class="step-type">BACKGROUND
+                    </span>
+                    <h2>Gradient background
+                    </h2>
+                  </div>
+                  <div class="step-tools">
+                    <span class="check">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true">
+                        <path d="M20 6 9 17l-5-5">
+                        </path>
+                      </svg> AUTO
+                    </span>
+                    <button aria-label="Remove step">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
+                        <path d="M18 6 6 18">
+                        </path>
+                        <path d="m6 6 12 12">
+                        </path>
+                      </svg>
+                    </button>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis" aria-hidden="true">
+                      <circle cx="12" cy="12" r="1">
+                      </circle>
+                      <circle cx="19" cy="12" r="1">
+                      </circle>
+                      <circle cx="5" cy="12" r="1">
+                      </circle>
+                    </svg>
+                  </div>
+                </div>
+                <div class="controls">
+                  <div class="control-block">
+                    <label>COLOR
+                    </label>
+                    <div class="color-field">
+                      <span class="swatch" style="background:#DCEBFF">
+                      </span>
+                      <input aria-label="Gradient color" value="#DCEBFF"/>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true">
+                        <path d="m6 9 6 6 6-6">
+                        </path>
+                      </svg>
+                    </div>
+                  </div>
+                  <div class="control-block">
+                    <label>DIRECTION 
+                      <output>135
+                        <!-- -->°
+                      </output>
+                    </label>
+                    <input type="range" min="0" max="360" value="135"/>
+                  </div>
+                  <div class="control-block">
+                    <label>OPACITY 
+                      <output>100%
+                      </output>
+                    </label>
+                    <div class="segmented">
+                      <button class="selected">100
+                      </button>
+                      <button>75
+                      </button>
+                      <button>50
+                      </button>
+                      <button>25
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </article>
+            <article class="step-card">
+              <div class="step-index">02
+              </div>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-grip-vertical drag" aria-hidden="true">
+                <circle cx="9" cy="12" r="1">
+                </circle>
+                <circle cx="9" cy="5" r="1">
+                </circle>
+                <circle cx="9" cy="19" r="1">
+                </circle>
+                <circle cx="15" cy="12" r="1">
+                </circle>
+                <circle cx="15" cy="5" r="1">
+                </circle>
+                <circle cx="15" cy="19" r="1">
+                </circle>
+              </svg>
+              <div class="step-body">
+                <div class="step-heading">
+                  <div>
+                    <span class="step-type">TRANSFORM
+                    </span>
+                    <h2>Remove background
+                    </h2>
+                  </div>
+                  <div class="step-tools">
+                    <span class="check">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true">
+                        <path d="M20 6 9 17l-5-5">
+                        </path>
+                      </svg> AUTO
+                    </span>
+                    <button aria-label="Remove step">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
+                        <path d="M18 6 6 18">
+                        </path>
+                        <path d="m6 6 12 12">
+                        </path>
+                      </svg>
+                    </button>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis" aria-hidden="true">
+                      <circle cx="12" cy="12" r="1">
+                      </circle>
+                      <circle cx="19" cy="12" r="1">
+                      </circle>
+                      <circle cx="5" cy="12" r="1">
+                      </circle>
+                    </svg>
+                  </div>
+                </div>
+                <div class="transform-note">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sliders-horizontal" aria-hidden="true">
+                    <path d="M10 5H3">
+                    </path>
+                    <path d="M12 19H3">
+                    </path>
+                    <path d="M14 3v4">
+                    </path>
+                    <path d="M16 17v4">
+                    </path>
+                    <path d="M21 12h-9">
+                    </path>
+                    <path d="M21 19h-5">
+                    </path>
+                    <path d="M21 5h-7">
+                    </path>
+                    <path d="M8 10v4">
+                    </path>
+                    <path d="M8 12H3">
+                    </path>
+                  </svg> Automatic subject detection enabled
+                </div>
+              </div>
+            </article>
+            <article class="step-card">
+              <div class="step-index">03
+              </div>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-grip-vertical drag" aria-hidden="true">
+                <circle cx="9" cy="12" r="1">
+                </circle>
+                <circle cx="9" cy="5" r="1">
+                </circle>
+                <circle cx="9" cy="19" r="1">
+                </circle>
+                <circle cx="15" cy="12" r="1">
+                </circle>
+                <circle cx="15" cy="5" r="1">
+                </circle>
+                <circle cx="15" cy="19" r="1">
+                </circle>
+              </svg>
+              <div class="step-body">
+                <div class="step-heading">
+                  <div>
+                    <span class="step-type">STYLE
+                    </span>
+                    <h2>Add outline
+                    </h2>
+                  </div>
+                  <div class="step-tools">
+                    <span class="check">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true">
+                        <path d="M20 6 9 17l-5-5">
+                        </path>
+                      </svg> AUTO
+                    </span>
+                    <button aria-label="Remove step">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
+                        <path d="M18 6 6 18">
+                        </path>
+                        <path d="m6 6 12 12">
+                        </path>
+                      </svg>
+                    </button>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis" aria-hidden="true">
+                      <circle cx="12" cy="12" r="1">
+                      </circle>
+                      <circle cx="19" cy="12" r="1">
+                      </circle>
+                      <circle cx="5" cy="12" r="1">
+                      </circle>
+                    </svg>
+                  </div>
+                </div>
+                <div class="controls compact">
+                  <div class="control-block">
+                    <label>WIDTH 
+                      <output>2
+                        <!-- -->px
+                      </output>
+                    </label>
+                    <input type="range" min="0" max="8" value="2"/>
+                  </div>
+                  <div class="control-block">
+                    <label>COLOR
+                    </label>
+                    <div class="color-field">
+                      <span class="swatch dark">
+                      </span>
+                      <input readOnly="" value="#16202B"/>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </article>
+            <article class="step-card">
+              <div class="step-index">04
+              </div>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-grip-vertical drag" aria-hidden="true">
+                <circle cx="9" cy="12" r="1">
+                </circle>
+                <circle cx="9" cy="5" r="1">
+                </circle>
+                <circle cx="9" cy="19" r="1">
+                </circle>
+                <circle cx="15" cy="12" r="1">
+                </circle>
+                <circle cx="15" cy="5" r="1">
+                </circle>
+                <circle cx="15" cy="19" r="1">
+                </circle>
+              </svg>
+              <div class="step-body">
+                <div class="step-heading">
+                  <div>
+                    <span class="step-type">STYLE
+                    </span>
+                    <h2>Round corners
+                    </h2>
+                  </div>
+                  <div class="step-tools">
+                    <span class="check">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true">
+                        <path d="M20 6 9 17l-5-5">
+                        </path>
+                      </svg> AUTO
+                    </span>
+                    <button aria-label="Remove step">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
+                        <path d="M18 6 6 18">
+                        </path>
+                        <path d="m6 6 12 12">
+                        </path>
+                      </svg>
+                    </button>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis" aria-hidden="true">
+                      <circle cx="12" cy="12" r="1">
+                      </circle>
+                      <circle cx="19" cy="12" r="1">
+                      </circle>
+                      <circle cx="5" cy="12" r="1">
+                      </circle>
+                    </svg>
+                  </div>
+                </div>
+                <div class="controls compact">
+                  <div class="control-block">
+                    <label>RADIUS 
+                      <output>18
+                        <!-- -->px
+                      </output>
+                    </label>
+                    <input type="range" min="0" max="48" value="18"/>
+                  </div>
+                  <div class="toggle-row">
+                    <span>Preserve aspect ratio
+                    </span>
+                    <button class="toggle on" aria-label="Preserve aspect ratio">
+                      <i>
+                      </i>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </article>
+          </div>
+          <div class="pipeline-footer">
+            <button class="reset-btn">
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-ccw" aria-hidden="true">
+                <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8">
+                </path>
+                <path d="M3 3v5h5">
+                </path>
+              </svg> Reset pipeline
+            </button>
+            <span class="auto-note">
+              <i>
+              </i> changes are applied automatically
+            </span>
+          </div>
+        </section>
+        <section class="preview-panel">
+          <div class="preview-top">
+            <div>
+              <span class="label">PIPELINE OUTPUTS
+              </span>
+              <strong>Visual history
+              </strong>
+            </div>
+            <div class="preview-actions">
+              <button class="history-toggle top-toggle" aria-expanded="true">Hide intermediate
+                <!-- -->
+                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down rotated" aria-hidden="true">
+                  <path d="m6 9 6 6 6-6">
+                  </path>
+                </svg>
+              </button>
+              <button class="download-btn">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download" aria-hidden="true">
+                  <path d="M12 15V3">
+                  </path>
+                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4">
+                  </path>
+                  <path d="m7 10 5 5 5-5">
+                  </path>
+                </svg> Download result 
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down-to-line" aria-hidden="true">
+                  <path d="M12 17V3">
+                  </path>
+                  <path d="m6 11 6 6 6-6">
+                  </path>
+                  <path d="M19 21H5">
+                  </path>
+                </svg>
+              </button>
+              <div class="preview-meta">
+                <div>
+                  <span>DIMENSIONS
+                  </span>
+                  <b>1200 × 800 px
+                  </b>
+                </div>
+                <div>
+                  <span>FORMAT
+                  </span>
+                  <b>PNG-24
+                  </b>
+                </div>
+                <div>
+                  <span>SIZE
+                  </span>
+                  <b>1.2 MB
+                  </b>
+                </div>
+              </div>
+              <button class="icon-btn" aria-label="Preview settings">
+                <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings2 lucide-settings-2" aria-hidden="true">
+                  <path d="M14 17H5">
+                  </path>
+                  <path d="M19 7h-9">
+                  </path>
+                  <circle cx="17" cy="17" r="3">
+                  </circle>
+                  <circle cx="7" cy="7" r="3">
+                  </circle>
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div class="preview-stack">
+            <div class="preview-tile ">
+              <div class="tile-canvas">
+                <div class="image-preview" style="background:#8d9aa5">
+                  <span class="sample-icon">PNG
+                  </span>
+                  <span>easy-png-tools
+                  </span>
+                </div>
+              </div>
+              <div class="tile-label">
+                <span>SOURCE
+                </span>
+                <b>original.png · 1200 × 800
+                </b>
+              </div>
+            </div>
+            <div class="preview-tile ">
+              <div class="tile-canvas">
+                <div class="image-preview" style="background:linear-gradient(135deg, #DCEBFF, #8BC8F5)">
+                  <span class="sample-icon">PNG
+                  </span>
+                  <span>easy-png-tools
+                  </span>
+                </div>
+              </div>
+              <div class="tile-label">
+                <span>STEP 01
+                </span>
+                <b>gradient applied
+                </b>
+              </div>
+            </div>
+            <div class="preview-tile ">
+              <div class="tile-canvas">
+                <div class="image-preview" style="background:linear-gradient(135deg, #DCEBFF, #8BC8F5);clip-path:inset(10% 8% 10% 8% round 12px)">
+                  <span class="sample-icon">PNG
+                  </span>
+                  <span>easy-png-tools
+                  </span>
+                </div>
+              </div>
+              <div class="tile-label">
+                <span>STEP 02
+                </span>
+                <b>background removed
+                </b>
+              </div>
+            </div>
+            <div class="preview-tile ">
+              <div class="tile-canvas">
+                <div class="image-preview" style="background:linear-gradient(135deg, #DCEBFF, #8BC8F5);box-shadow:0 0 0 2px #16202B">
+                  <span class="sample-icon">PNG
+                  </span>
+                  <span>easy-png-tools
+                  </span>
+                </div>
+              </div>
+              <div class="tile-label">
+                <span>STEP 03
+                </span>
+                <b>outline added
+                </b>
+              </div>
+            </div>
+            <div class="preview-tile active">
+              <div class="tile-canvas">
+                <div class="image-preview" style="background:linear-gradient(135deg, #DCEBFF, #8BC8F5);border-radius:18px;box-shadow:0 0 0 2px #16202B">
+                  <span class="sample-icon">PNG
+                  </span>
+                  <span>easy-png-tools
+                  </span>
+                </div>
+              </div>
+              <div class="tile-label">
+                <span>FINAL OUTPUT
+                </span>
+                <b>ready · PNG-24
+                </b>
+              </div>
+            </div>
+          </div>
+          <p class="preview-note">Output is generated in-browser. Your files never leave this device.
+          </p>
+        </section>
+      </div>
+      <footer class="footer">
+        <span>easy-png-tools 
+          <b>v2.4.0
+          </b>
+        </span>
+        <span>
+          <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link2 lucide-link-2" aria-hidden="true">
+            <path d="M9 17H7A5 5 0 0 1 7 7h2">
+            </path>
+            <path d="M15 7h2a5 5 0 1 1 0 10h-2">
+            </path>
+            <line x1="8" x2="16" y1="12" y2="12">
+            </line>
+          </svg> pipeline is local-only
+        </span>
+        <span>© 2024
+        </span>
+      </footer>
+    </main>
+    <!--$-->
+    <!--/$-->
+    <!--$!-->
+    <template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING">
+    </template>
+    <!--/$-->
+  </body>
+</html>
\ No newline at end of file
diff --git a/refs-html/gradient.html b/refs-html/gradient.html
new file mode 100644
index 0000000..e5bf73d
--- /dev/null
+++ b/refs-html/gradient.html
@@ -0,0 +1,2209 @@
+<!DOCTYPE html>
+<html lang="ru" class="bg-background">
+  <head>
+    <meta charSet="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <style>
+@layer properties {
+  @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
+  *,:before,:after,::backdrop {
+  --tw-rotate-x:initial;
+  --tw-rotate-y:initial;
+  --tw-rotate-z:initial;
+  --tw-skew-x:initial;
+  --tw-skew-y:initial;
+  --tw-border-style:solid;
+  --tw-font-weight:initial;
+  --tw-shadow:0 0 #0000;
+  --tw-shadow-color:initial;
+  --tw-shadow-alpha:100%;
+  --tw-inset-shadow:0 0 #0000;
+  --tw-inset-shadow-color:initial;
+  --tw-inset-shadow-alpha:100%;
+  --tw-ring-color:initial;
+  --tw-ring-shadow:0 0 #0000;
+  --tw-inset-ring-color:initial;
+  --tw-inset-ring-shadow:0 0 #0000;
+  --tw-ring-inset:initial;
+  --tw-ring-offset-width:0px;
+  --tw-ring-offset-color:#fff;
+  --tw-ring-offset-shadow:0 0 #0000;
+  --tw-outline-style:solid;
+  --tw-blur:initial;
+  --tw-brightness:initial;
+  --tw-contrast:initial;
+  --tw-grayscale:initial;
+  --tw-hue-rotate:initial;
+  --tw-invert:initial;
+  --tw-opacity:initial;
+  --tw-saturate:initial;
+  --tw-sepia:initial;
+  --tw-drop-shadow:initial;
+  --tw-drop-shadow-color:initial;
+  --tw-drop-shadow-alpha:100%;
+  --tw-drop-shadow-size:initial;
+  --tw-translate-x:0;
+  --tw-translate-y:0;
+  --tw-translate-z:0;
+  --tw-animation-delay:0s;
+  --tw-animation-direction:normal;
+  --tw-animation-duration:initial;
+  --tw-animation-fill-mode:none;
+  --tw-animation-iteration-count:1;
+  --tw-enter-blur:0;
+  --tw-enter-opacity:1;
+  --tw-enter-rotate:0;
+  --tw-enter-scale:1;
+  --tw-enter-translate-x:0;
+  --tw-enter-translate-y:0;
+  --tw-exit-blur:0;
+  --tw-exit-opacity:1;
+  --tw-exit-rotate:0;
+  --tw-exit-scale:1;
+  --tw-exit-translate-x:0;
+  --tw-exit-translate-y:0
+}
+
+}
+
+}
+@layer theme {
+  :root,:host {
+  --font-sans:"IBM Plex Sans", sans-serif;
+  --font-mono:"IBM Plex Mono", monospace;
+  --spacing:.25rem;
+  --text-xs:.75rem;
+  --text-xs--line-height:calc(1 / .75);
+  --text-sm:.875rem;
+  --text-sm--line-height:calc(1.25 / .875);
+  --font-weight-medium:500;
+  --radius-md:.375rem;
+  --radius-lg:.5rem;
+  --default-transition-duration:.15s;
+  --default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);
+  --default-font-family:"IBM Plex Sans", sans-serif;
+  --default-mono-font-family:"IBM Plex Mono", monospace
+}
+
+}
+@layer base {
+  *,:after,:before,::backdrop {
+  box-sizing:border-box;
+  border:0 solid;
+  margin:0;
+  padding:0
+}
+::file-selector-button {
+  box-sizing:border-box;
+  border:0 solid;
+  margin:0;
+  padding:0
+}
+html,:host {
+  -webkit-text-size-adjust:100%;
+  tab-size:4;
+  line-height:1.5;
+  font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+  font-feature-settings:var(--default-font-feature-settings,normal);
+  font-variation-settings:var(--default-font-variation-settings,normal);
+  -webkit-tap-highlight-color:transparent
+}
+hr {
+  height:0;
+  color:inherit;
+  border-top-width:1px
+}
+abbr:where([title]) {
+  -webkit-text-decoration:underline dotted;
+  text-decoration:underline dotted
+}
+h1,h2,h3,h4,h5,h6 {
+  font-size:inherit;
+  font-weight:inherit
+}
+a {
+  color:inherit;
+  -webkit-text-decoration:inherit;
+  -webkit-text-decoration:inherit;
+  -webkit-text-decoration:inherit;
+  -webkit-text-decoration:inherit;
+  text-decoration:inherit
+}
+b,strong {
+  font-weight:bolder
+}
+code,kbd,samp,pre {
+  font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+  font-feature-settings:var(--default-mono-font-feature-settings,normal);
+  font-variation-settings:var(--default-mono-font-variation-settings,normal);
+  font-size:1em
+}
+small {
+  font-size:80%
+}
+sub,sup {
+  vertical-align:baseline;
+  font-size:75%;
+  line-height:0;
+  position:relative
+}
+sub {
+  bottom:-.25em
+}
+sup {
+  top:-.5em
+}
+table {
+  text-indent:0;
+  border-color:inherit;
+  border-collapse:collapse
+}
+:-moz-focusring:where(:not(iframe)) {
+  outline:auto
+}
+progress {
+  vertical-align:baseline
+}
+summary {
+  display:list-item
+}
+ol,ul,menu {
+  list-style:none
+}
+img,svg,video,canvas,audio,iframe,embed,object {
+  vertical-align:middle;
+  display:block
+}
+img,video {
+  max-width:100%;
+  height:auto
+}
+button,input,select,optgroup,textarea {
+  font:inherit;
+  font-feature-settings:inherit;
+  font-variation-settings:inherit;
+  letter-spacing:inherit;
+  color:inherit;
+  opacity:1;
+  background-color:#0000;
+  border-radius:0
+}
+::file-selector-button {
+  font:inherit;
+  font-feature-settings:inherit;
+  font-variation-settings:inherit;
+  letter-spacing:inherit;
+  color:inherit;
+  opacity:1;
+  background-color:#0000;
+  border-radius:0
+}
+:where(select:is([multiple],[size])) optgroup {
+  font-weight:bolder
+}
+:where(select:is([multiple],[size])) optgroup option {
+  padding-inline-start:20px
+}
+::file-selector-button {
+  margin-inline-end:4px
+}
+::placeholder {
+  opacity:1
+}
+@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
+  ::placeholder {
+  color:currentColor
+}
+@supports (color:color-mix(in lab, red, red)) {
+  ::placeholder {
+  color:color-mix(in oklab, currentcolor 50%, transparent)
+}
+
+}
+
+}
+textarea {
+  resize:vertical
+}
+::-webkit-search-decoration {
+  -webkit-appearance:none
+}
+::-webkit-date-and-time-value {
+  min-height:1lh;
+  text-align:inherit
+}
+::-webkit-datetime-edit {
+  display:inline-flex
+}
+::-webkit-datetime-edit-fields-wrapper {
+  padding:0
+}
+::-webkit-datetime-edit {
+  padding-block:0
+}
+::-webkit-datetime-edit-year-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-month-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-day-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-hour-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-minute-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-second-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-millisecond-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-meridiem-field {
+  padding-block:0
+}
+::-webkit-calendar-picker-indicator {
+  line-height:1
+}
+:-moz-ui-invalid {
+  box-shadow:none
+}
+button,input:where([type=button],[type=reset],[type=submit]) {
+  appearance:button
+}
+::file-selector-button {
+  appearance:button
+}
+::-webkit-inner-spin-button {
+  height:auto
+}
+::-webkit-outer-spin-button {
+  height:auto
+}
+[hidden]:where(:not([hidden=until-found])) {
+  display:none!important
+}
+
+}
+@layer components;
+  @layer utilities {
+  .static {
+  position:static
+}
+.inline {
+  display:inline
+}
+.inline-flex {
+  display:inline-flex
+}
+.size-6 {
+  width:calc(var(--spacing) * 6);
+  height:calc(var(--spacing) * 6)
+}
+.size-7 {
+  width:calc(var(--spacing) * 7);
+  height:calc(var(--spacing) * 7)
+}
+.size-8 {
+  width:calc(var(--spacing) * 8);
+  height:calc(var(--spacing) * 8)
+}
+.size-9 {
+  width:calc(var(--spacing) * 9);
+  height:calc(var(--spacing) * 9)
+}
+.h-6 {
+  height:calc(var(--spacing) * 6)
+}
+.h-7 {
+  height:calc(var(--spacing) * 7)
+}
+.h-8 {
+  height:calc(var(--spacing) * 8)
+}
+.h-9 {
+  height:calc(var(--spacing) * 9)
+}
+.shrink-0 {
+  flex-shrink:0
+}
+.transform {
+  transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)
+}
+.items-center {
+  align-items:center
+}
+.justify-center {
+  justify-content:center
+}
+.gap-1 {
+  gap:var(--spacing)
+}
+.gap-1\.5 {
+  gap:calc(var(--spacing) * 1.5)
+}
+.rounded-\[min\(var\(--radius-md\)\,10px\)\] {
+  border-radius:min(var(--radius-md), 10px)
+}
+.rounded-\[min\(var\(--radius-md\)\,12px\)\] {
+  border-radius:min(var(--radius-md), 12px)
+}
+.rounded-lg {
+  border-radius:var(--radius-lg)
+}
+.border {
+  border-style:var(--tw-border-style);
+  border-width:1px
+}
+.border-border {
+  border-color:var(--line)
+}
+.border-transparent {
+  border-color:#0000
+}
+.bg-background {
+  background-color:var(--background)
+}
+.bg-clip-padding {
+  background-clip:padding-box
+}
+.px-2 {
+  padding-inline:calc(var(--spacing) * 2)
+}
+.px-2\.5 {
+  padding-inline:calc(var(--spacing) * 2.5)
+}
+.text-sm {
+  font-size:var(--text-sm);
+  line-height:var(--tw-leading,var(--text-sm--line-height))
+}
+.text-xs {
+  font-size:var(--text-xs);
+  line-height:var(--tw-leading,var(--text-xs--line-height))
+}
+.text-\[0\.8rem\] {
+  font-size:.8rem
+}
+.font-medium {
+  --tw-font-weight:var(--font-weight-medium);
+  font-weight:var(--font-weight-medium)
+}
+.whitespace-nowrap {
+  white-space:nowrap
+}
+.underline-offset-4 {
+  text-underline-offset:4px
+}
+.antialiased {
+  -webkit-font-smoothing:antialiased;
+  -moz-osx-font-smoothing:grayscale
+}
+.ring {
+  --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
+  box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
+}
+.outline {
+  outline-style:var(--tw-outline-style);
+  outline-width:1px
+}
+.blur {
+  --tw-blur:blur(8px);
+  filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
+}
+.grayscale {
+  --tw-grayscale:grayscale(100%);
+  filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
+}
+.transition {
+  transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
+  transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));
+  transition-duration:var(--tw-duration,var(--default-transition-duration))
+}
+.transition-all {
+  transition-property:all;
+  transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));
+  transition-duration:var(--tw-duration,var(--default-transition-duration))
+}
+.outline-none {
+  --tw-outline-style:none;
+  outline-style:none
+}
+.select-none {
+  -webkit-user-select:none;
+  user-select:none
+}
+@media (hover:hover) {
+  .hover\:text-foreground:hover {
+  color:var(--foreground)
+}
+.hover\:underline:hover {
+  text-decoration-line:underline
+}
+
+}
+.focus-visible\:ring-3:focus-visible {
+  --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
+  box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
+}
+.active\:not-aria-\[haspopup\]\:translate-y-px:active:not([aria-haspopup]) {
+  --tw-translate-y:1px;
+  translate:var(--tw-translate-x) var(--tw-translate-y)
+}
+.disabled\:pointer-events-none:disabled {
+  pointer-events:none
+}
+.disabled\:opacity-50:disabled {
+  opacity:.5
+}
+:where([data-slot=button-group]) .in-data-\[slot\=button-group\]\:rounded-lg {
+  border-radius:var(--radius-lg)
+}
+.has-data-\[icon\=inline-end\]\:pr-1\.5:has([data-icon=inline-end]) {
+  padding-right:calc(var(--spacing) * 1.5)
+}
+.has-data-\[icon\=inline-end\]\:pr-2:has([data-icon=inline-end]) {
+  padding-right:calc(var(--spacing) * 2)
+}
+.has-data-\[icon\=inline-start\]\:pl-1\.5:has([data-icon=inline-start]) {
+  padding-left:calc(var(--spacing) * 1.5)
+}
+.has-data-\[icon\=inline-start\]\:pl-2:has([data-icon=inline-start]) {
+  padding-left:calc(var(--spacing) * 2)
+}
+.aria-expanded\:text-foreground[aria-expanded=true] {
+  color:var(--foreground)
+}
+.aria-invalid\:ring-3[aria-invalid=true] {
+  --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
+  box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
+}
+.\[\&_svg\]\:pointer-events-none svg {
+  pointer-events:none
+}
+.\[\&_svg\]\:shrink-0 svg {
+  flex-shrink:0
+}
+.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3 svg:not([class*=size-]) {
+  width:calc(var(--spacing) * 3);
+  height:calc(var(--spacing) * 3)
+}
+.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5 svg:not([class*=size-]) {
+  width:calc(var(--spacing) * 3.5);
+  height:calc(var(--spacing) * 3.5)
+}
+.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]) {
+  width:calc(var(--spacing) * 4);
+  height:calc(var(--spacing) * 4)
+}
+
+}
+@property --tw-animation-delay {
+  syntax:"*";
+  inherits:false;
+  initial-value:0s
+}
+@property --tw-animation-direction {
+  syntax:"*";
+  inherits:false;
+  initial-value:normal
+}
+@property --tw-animation-duration {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-animation-fill-mode {
+  syntax:"*";
+  inherits:false;
+  initial-value:none
+}
+@property --tw-animation-iteration-count {
+  syntax:"*";
+  inherits:false;
+  initial-value:1
+}
+@property --tw-enter-blur {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-enter-opacity {
+  syntax:"*";
+  inherits:false;
+  initial-value:1
+}
+@property --tw-enter-rotate {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-enter-scale {
+  syntax:"*";
+  inherits:false;
+  initial-value:1
+}
+@property --tw-enter-translate-x {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-enter-translate-y {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-exit-blur {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-exit-opacity {
+  syntax:"*";
+  inherits:false;
+  initial-value:1
+}
+@property --tw-exit-rotate {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-exit-scale {
+  syntax:"*";
+  inherits:false;
+  initial-value:1
+}
+@property --tw-exit-translate-x {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-exit-translate-y {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+:root {
+  --lightningcss-light:initial;
+  --lightningcss-dark: ;
+  color-scheme:light;
+  --background:#eef1f4;
+  --foreground:#17212b;
+  --panel:#f8fafb;
+  --line:#cbd3da;
+  --muted:#6d7883;
+  --blue:#1769d2;
+  --cyan:#00a8c7;
+  --amber:#bd7411;
+  --radius:4px
+}
+* {
+  box-sizing:border-box;
+  border-color:var(--line)
+}
+html {
+  background:var(--background)
+}
+body {
+  background:var(--background);
+  color:var(--foreground);
+  font-family:var(--font-sans);
+  margin:0
+}
+button,input {
+  font:inherit
+}
+button {
+  cursor:pointer
+}
+.app-shell {
+  background-color:var(--background);
+  background-image:linear-gradient(#dce2e7 1px,#0000 1px),linear-gradient(90deg,#dce2e7 1px,#0000 1px);
+  background-size:32px 32px;
+  min-height:100vh
+}
+.dark-mode {
+  --background:#11171d;
+  --foreground:#e8eef2;
+  --panel:#182129;
+  --line:#33414c;
+  --muted:#91a0ac;
+  --blue:#54a2ff;
+  background-image:linear-gradient(#1b252d 1px,#0000 1px),linear-gradient(90deg,#1b252d 1px,#0000 1px)
+}
+.topbar,.brand,.top-actions,.language,.status,.title-row,.pipeline-head,.step-heading,.step-tools,.pipeline-footer,.preview-top,.footer {
+  align-items:center;
+  display:flex
+}
+.topbar {
+  border-bottom:1px solid var(--line);
+  background:var(--panel);
+  justify-content:space-between;
+  height:64px;
+  padding:0 clamp(20px,4vw,64px)
+}
+.brand {
+  font:600 14px var(--font-mono);
+  gap:10px
+}
+.brand-mark {
+  background:var(--blue);
+  color:#fff;
+  place-items:center;
+  width:30px;
+  height:30px;
+  font-size:11px;
+  display:grid
+}
+.version,.label,.step-type,.eyebrow {
+  font:10px var(--font-mono);
+  letter-spacing:.12em;
+  color:var(--muted)
+}
+.version,.eyebrow {
+  color:var(--blue)
+}
+.top-actions {
+  gap:16px
+}
+.status {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  letter-spacing:.08em;
+  gap:7px
+}
+.status i,.auto-note i {
+  background:#25a96a;
+  border-radius:50%;
+  width:6px;
+  height:6px
+}
+.icon-btn {
+  color:var(--muted);
+  background:0 0;
+  border:0;
+  place-items:center;
+  padding:6px;
+  display:grid
+}
+.language {
+  border:1px solid var(--line)
+}
+.language button {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  background:0 0;
+  border:0;
+  padding:6px 9px
+}
+.language .active {
+  background:var(--foreground);
+  color:var(--background)
+}
+.page-grid {
+  grid-template-columns:minmax(0,1.05fr) minmax(520px,.95fr);
+  align-items:start;
+  gap:56px;
+  width:100%;
+  max-width:none;
+  margin:auto;
+  padding:60px clamp(24px,4vw,72px) 72px;
+  display:grid
+}
+.preview-panel {
+  min-width:0;
+  margin-top:0;
+  position:sticky;
+  top:24px
+}
+.preview-meta {
+  gap:24px;
+  display:flex
+}
+.preview-meta div {
+  gap:5px;
+  display:grid
+}
+.preview-meta span {
+  font:10px var(--font-mono);
+  color:var(--muted)
+}
+.preview-meta b {
+  font:600 11px var(--font-mono)
+}
+.workspace,.preview-panel {
+  min-width:0
+}
+.preview-stack {
+  grid-template-columns:repeat(2,minmax(0,1fr));
+  gap:18px;
+  width:100%;
+  min-width:0;
+  display:grid
+}
+.preview-tile {
+  width:100%;
+  min-width:0;
+  overflow:hidden
+}
+.history-toggle {
+  border:1px solid var(--line);
+  width:100%;
+  color:var(--muted);
+  font:10px var(--font-mono);
+  letter-spacing:.04em;
+  background:0 0;
+  justify-content:center;
+  align-items:center;
+  gap:8px;
+  margin-top:18px;
+  padding:11px 14px;
+  display:flex
+}
+.history-toggle:hover {
+  color:var(--foreground);
+  background:var(--panel)
+}
+.top-toggle {
+  width:auto;
+  margin:0;
+  padding:8px 10px
+}
+.history-toggle .rotated {
+  transform:rotate(180deg)
+}
+.tile-canvas {
+  width:100%;
+  min-width:0;
+  min-height:clamp(300px,22vw,430px);
+  overflow:hidden
+}
+.image-preview {
+  min-width:0;
+  max-width:100%;
+  overflow:hidden
+}
+.eyebrow {
+  margin-bottom:18px
+}
+.eyebrow span {
+  color:var(--muted);
+  margin:0 7px
+}
+.title-row {
+  justify-content:space-between;
+  align-items:flex-end;
+  gap:30px;
+  margin-bottom:56px
+}
+h1 {
+  letter-spacing:-.06em;
+  max-width:700px;
+  margin:0 0 16px;
+  font-size:clamp(36px,4vw,64px);
+  font-weight:650;
+  line-height:1
+}
+.lede {
+  color:var(--muted);
+  max-width:550px;
+  margin:0;
+  line-height:1.6
+}
+.file-chip {
+  white-space:nowrap;
+  border:1px solid var(--line);
+  background:var(--panel);
+  font:11px var(--font-mono);
+  color:var(--muted);
+  align-items:center;
+  gap:8px;
+  padding:10px 12px;
+  display:flex
+}
+.file-chip b {
+  color:var(--blue);
+  font-weight:500
+}
+.pipeline-head {
+  border-bottom:1px solid var(--line);
+  justify-content:space-between;
+  padding-bottom:12px
+}
+.pipeline-head strong,.preview-top strong {
+  font:600 14px var(--font-mono);
+  margin-top:5px;
+  display:block
+}
+.pipeline-head em {
+  color:#25a96a;
+  font-size:10px;
+  font-style:normal
+}
+.add-btn,.reset-btn {
+  color:var(--blue);
+  background:0 0;
+  border:0;
+  align-items:center;
+  gap:7px;
+  font-size:12px;
+  display:flex
+}
+.steps-list {
+  gap:10px;
+  padding-top:14px;
+  display:grid
+}
+.step-card {
+  border:1px solid var(--line);
+  background:var(--panel);
+  grid-template-columns:46px 20px 1fr;
+  min-height:138px;
+  display:grid
+}
+.step-index {
+  font:11px var(--font-mono);
+  color:var(--blue);
+  padding:17px 0 0 15px
+}
+.drag {
+  color:var(--line);
+  margin-top:17px
+}
+.step-body {
+  padding:15px 18px 18px
+}
+.step-heading {
+  justify-content:space-between;
+  gap:15px
+}
+.step-heading h2 {
+  font:600 15px var(--font-mono);
+  margin:5px 0 18px
+}
+.step-tools {
+  gap:13px
+}
+.step-tools button {
+  color:var(--muted);
+  background:0 0;
+  border:0
+}
+.check {
+  color:#238354;
+  font:10px var(--font-mono);
+  align-items:center;
+  gap:4px;
+  display:flex
+}
+.controls {
+  grid-template-columns:1.1fr 1fr 1.2fr;
+  gap:16px;
+  display:grid
+}
+.controls.compact {
+  grid-template-columns:1fr 1fr
+}
+.control-block label {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  letter-spacing:.08em;
+  justify-content:space-between;
+  margin-bottom:8px;
+  display:flex
+}
+.control-block output {
+  color:var(--foreground)
+}
+.color-field {
+  border:1px solid var(--line);
+  align-items:center;
+  gap:8px;
+  height:32px;
+  padding:0 8px;
+  display:flex
+}
+.swatch {
+  border:1px solid var(--line);
+  width:14px;
+  height:14px
+}
+.swatch.dark {
+  background:#16202b
+}
+.color-field input {
+  min-width:0;
+  color:var(--foreground);
+  font:11px var(--font-mono);
+  background:0 0;
+  border:0;
+  outline:0;
+  flex:1
+}
+.control-block input[type=range] {
+  width:100%;
+  accent-color:var(--blue)
+}
+.segmented {
+  border:1px solid var(--line);
+  height:32px;
+  display:flex
+}
+.segmented button {
+  border:0;
+  border-right:1px solid var(--line);
+  color:var(--muted);
+  font:10px var(--font-mono);
+  background:0 0;
+  flex:1
+}
+.segmented .selected {
+  background:var(--blue);
+  color:#fff
+}
+.transform-note,.auto-note {
+  color:var(--muted);
+  font:11px var(--font-mono);
+  align-items:center;
+  gap:8px;
+  display:flex
+}
+.pipeline-footer {
+  justify-content:space-between;
+  padding-top:18px
+}
+.auto-note {
+  color:var(--muted)
+}
+.auto-note i {
+  display:inline-block
+}
+.preview-panel {
+  border:1px solid var(--line);
+  background:var(--panel);
+  align-self:start;
+  padding:18px;
+  position:sticky;
+  top:24px
+}
+.preview-top {
+  border-bottom:1px solid var(--line);
+  justify-content:space-between;
+  padding-bottom:15px
+}
+.preview-stack {
+  grid-template-columns:1fr 1fr;
+  gap:12px;
+  padding:16px 0;
+  display:grid
+}
+.preview-tile {
+  border:1px solid var(--line);
+  background:var(--background)
+}
+.preview-tile.active {
+  border-color:var(--blue)
+}
+.tile-canvas {
+  aspect-ratio:1.35;
+  background-color:#e4e8eb;
+  background-image:linear-gradient(45deg,#d2d8dc 25%,#0000 25%),linear-gradient(-45deg,#d2d8dc 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#d2d8dc 75%),linear-gradient(-45deg,#0000 75%,#d2d8dc 75%);
+  background-position:0 0,0 7px,7px -7px,-7px 0;
+  background-size:14px 14px;
+  place-items:center;
+  padding:16px;
+  display:grid
+}
+.image-preview {
+  aspect-ratio:1.5;
+  color:#16202b;
+  width:80%;
+  font:600 10px var(--font-mono);
+  flex-direction:column;
+  justify-content:center;
+  align-items:center;
+  gap:5px;
+  display:flex
+}
+.sample-icon {
+  border:1px solid;
+  padding:3px 5px;
+  font-size:9px
+}
+.tile-label {
+  border-top:1px solid var(--line);
+  font:9px var(--font-mono);
+  color:var(--blue);
+  justify-content:space-between;
+  gap:8px;
+  padding:8px;
+  display:flex
+}
+.tile-label b {
+  color:var(--muted);
+  text-align:right;
+  font-weight:400
+}
+.preview-meta {
+  border-top:1px solid var(--line);
+  grid-template-columns:repeat(3,1fr);
+  gap:8px;
+  padding-top:14px;
+  display:grid
+}
+.preview-meta span {
+  color:var(--muted);
+  font:9px var(--font-mono);
+  display:block
+}
+.preview-meta b {
+  font:11px var(--font-mono);
+  margin-top:5px;
+  display:block
+}
+.download-btn {
+  background:var(--blue);
+  color:#fff;
+  width:100%;
+  height:42px;
+  font:11px var(--font-mono);
+  border:0;
+  justify-content:center;
+  align-items:center;
+  gap:9px;
+  margin-top:18px;
+  display:flex
+}
+.preview-note {
+  color:var(--muted);
+  margin:12px 0 0;
+  font-size:11px;
+  line-height:1.5
+}
+.footer {
+  border-top:1px solid var(--line);
+  color:var(--muted);
+  font:10px var(--font-mono);
+  justify-content:space-between;
+  padding:16px clamp(20px,4vw,72px)
+}
+.footer span {
+  align-items:center;
+  gap:7px;
+  display:flex
+}
+.footer b {
+  color:var(--blue);
+  font-weight:400
+}
+@media (max-width:1200px) {
+  .page-grid {
+  grid-template-columns:minmax(0,1fr) minmax(420px,.9fr);
+  gap:32px
+}
+
+}
+.dark-mode .tile-canvas {
+  background-color:#202a31;
+  background-image:linear-gradient(45deg,#29343c 25%,#0000 25%),linear-gradient(-45deg,#29343c 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#29343c 75%),linear-gradient(-45deg,#0000 75%,#29343c 75%)
+}
+.dark-mode .image-preview {
+  color:#16202b
+}
+@media (max-width:800px) {
+  .topbar {
+  padding:0 16px
+}
+.status {
+  display:none
+}
+.page-grid {
+  padding:36px 16px 48px;
+  display:block
+}
+.title-row {
+  margin-bottom:40px;
+  display:block
+}
+.file-chip {
+  width:max-content;
+  margin-top:22px
+}
+.controls,.controls.compact {
+  grid-template-columns:1fr
+}
+.preview-panel {
+  margin-top:36px;
+  position:static
+}
+.footer {
+  flex-wrap:wrap;
+  gap:12px;
+  padding:0 16px 20px
+}
+.footer span:last-child {
+  display:none
+}
+
+}
+@media (max-width:1100px) {
+  .preview-stack {
+  grid-template-columns:repeat(3,minmax(220px,1fr))
+}
+
+}
+.preview-actions {
+  flex-wrap:wrap;
+  justify-content:flex-end
+}
+.download-btn {
+  white-space:nowrap
+}
+@media (max-width:800px) {
+  .preview-top {
+  flex-direction:column;
+  align-items:flex-start;
+  gap:18px
+}
+.preview-actions {
+  justify-content:space-between;
+  width:100%
+}
+.preview-meta {
+  gap:14px
+}
+.preview-stack {
+  grid-template-columns:repeat(2,minmax(0,1fr))
+}
+.tile-canvas {
+  min-height:260px
+}
+
+}
+@media (max-width:480px) {
+  .preview-stack {
+  grid-template-columns:1fr
+}
+.preview-meta {
+  justify-content:space-between;
+  width:100%
+}
+.title-row h1 {
+  font-size:40px
+}
+.pipeline-footer {
+  flex-direction:column;
+  align-items:flex-start;
+  gap:12px
+}
+
+}
+.tool-page {
+  width:100%;
+  padding:60px clamp(24px,4vw,72px) 72px
+}
+.tool-title {
+  justify-content:space-between;
+  align-items:end;
+  gap:32px;
+  margin-bottom:48px;
+  display:flex
+}
+.tool-title h1 {
+  margin-bottom:14px
+}
+.tool-status {
+  color:#25a96a;
+  font:10px var(--font-mono);
+  white-space:nowrap;
+  align-items:center;
+  gap:8px;
+  display:flex
+}
+.tool-status i,.auto-note i {
+  background:#25a96a;
+  border-radius:50%;
+  width:6px;
+  height:6px
+}
+.gradient-layout {
+  grid-template-columns:minmax(360px,.7fr) minmax(0,1.3fr);
+  align-items:start;
+  gap:56px;
+  display:grid
+}
+.settings-panel,.gradient-preview {
+  background:var(--panel);
+  border:1px solid var(--line)
+}
+.panel-heading,.preview-toolbar {
+  border-bottom:1px solid var(--line);
+  justify-content:space-between;
+  align-items:center;
+  padding:18px 20px;
+  display:flex
+}
+.panel-heading strong,.preview-toolbar strong {
+  font:600 14px var(--font-mono);
+  margin-top:5px;
+  display:block
+}
+.setting-group {
+  border-bottom:1px solid var(--line);
+  padding:22px 20px
+}
+.setting-group label {
+  font:10px var(--font-mono);
+  letter-spacing:.1em;
+  color:var(--muted);
+  justify-content:space-between;
+  margin-bottom:12px;
+  display:flex
+}
+.setting-group output {
+  color:var(--blue)
+}
+.color-row {
+  align-items:center;
+  gap:10px;
+  display:flex
+}
+.color-row .color-field {
+  flex:1
+}
+.stop-arrow {
+  color:var(--muted)
+}
+.gradient-bar {
+  border:1px solid var(--line);
+  height:14px;
+  margin-top:14px
+}
+.direction-grid {
+  grid-template-columns:repeat(4,1fr);
+  gap:6px;
+  margin-top:14px;
+  display:grid
+}
+.direction-grid button,.secondary-btn {
+  border:1px solid var(--line);
+  color:var(--muted);
+  font:10px var(--font-mono);
+  background:0 0;
+  padding:8px 6px
+}
+.direction-grid button.selected,.secondary-btn:hover {
+  background:var(--foreground);
+  color:var(--background)
+}
+.wide {
+  width:100%
+}
+.settings-footer {
+  justify-content:space-between;
+  align-items:center;
+  padding:16px 20px;
+  display:flex
+}
+.large-canvas {
+  background-color:#202a31;
+  background-image:linear-gradient(45deg,#29343c 25%,#0000 25%),linear-gradient(-45deg,#29343c 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#29343c 75%),linear-gradient(-45deg,#0000 75%,#29343c 75%);
+  background-position:0 0,0 14px,14px -14px,-14px 0;
+  background-size:28px 28px;
+  padding:24px
+}
+.gradient-art {
+  color:#fff;
+  min-height:clamp(420px,42vw,680px);
+  font:12px var(--font-mono);
+  place-content:center;
+  justify-items:center;
+  display:grid
+}
+.art-mark {
+  border:1px solid #ffffffa6;
+  place-items:center;
+  width:70px;
+  height:70px;
+  margin-bottom:12px;
+  font-size:16px;
+  display:grid
+}
+.code-block {
+  padding:16px 20px
+}
+.code-block>div {
+  justify-content:space-between;
+  align-items:center;
+  display:flex
+}
+.code-block pre {
+  background:var(--background);
+  color:var(--blue);
+  font:12px/1.6 var(--font-mono);
+  white-space:pre-wrap;
+  margin:12px 0 0;
+  padding:14px
+}
+.preview-actions {
+  align-items:center;
+  gap:10px;
+  display:flex
+}
+.secondary-btn {
+  align-items:center;
+  gap:8px;
+  display:flex
+}
+.dark-mode .large-canvas {
+  background-color:#202a31
+}
+.remover-layout {
+  grid-template-columns:minmax(360px,.62fr) minmax(0,1.38fr);
+  align-items:start;
+  gap:56px;
+  display:grid
+}
+.remover-preview {
+  background:var(--panel);
+  border:1px solid var(--line);
+  min-width:0
+}
+.comparison-grid {
+  grid-template-columns:repeat(2,minmax(0,1fr));
+  gap:18px;
+  padding:20px;
+  display:grid
+}
+.image-card {
+  min-width:0
+}
+.image-label {
+  font:10px var(--font-mono);
+  color:var(--muted);
+  justify-content:space-between;
+  margin-bottom:10px;
+  display:flex
+}
+.image-label span {
+  color:var(--blue)
+}
+.image-label b {
+  font-weight:400
+}
+.remover-canvas {
+  border:1px solid var(--line);
+  place-items:center;
+  min-height:clamp(360px,30vw,560px);
+  display:grid;
+  position:relative;
+  overflow:hidden
+}
+.source-canvas {
+  background:#e8eef2
+}
+.subject {
+  color:#ffffffd9;
+  width:74%;
+  height:68%;
+  font:600 14px var(--font-mono);
+  text-shadow:0 1px 2px #17212b;
+  place-items:center;
+  transition:all .2s;
+  display:grid
+}
+.subject-source {
+  transform:rotate(-3deg)
+}
+.canvas-size {
+  font:9px var(--font-mono);
+  color:var(--muted);
+  position:absolute;
+  bottom:9px;
+  right:10px
+}
+.result-meta {
+  border-top:1px solid var(--line);
+  font:10px var(--font-mono);
+  color:var(--muted);
+  gap:24px;
+  padding:16px 20px;
+  display:flex
+}
+.result-meta b {
+  color:var(--foreground);
+  margin-left:6px;
+  font-weight:600
+}
+.processed {
+  color:#25a96a;
+  font:10px var(--font-mono);
+  align-items:center;
+  gap:5px;
+  display:flex
+}
+.color-reference,.range-hints {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  justify-content:space-between;
+  margin-top:10px;
+  display:flex
+}
+.color-reference {
+  justify-content:flex-start;
+  gap:8px
+}
+.color-reference span {
+  border:1px solid var(--line);
+  width:9px;
+  height:9px
+}
+.native-color {
+  width:30px;
+  border:0!important;
+  padding:0!important
+}
+.toggle-group label {
+  cursor:pointer;
+  align-items:center
+}
+.toggle-group input {
+  display:none
+}
+.toggle {
+  border:1px solid var(--line);
+  width:32px;
+  height:18px;
+  position:relative
+}
+.toggle:after {
+  content:"";
+  background:var(--muted);
+  width:10px;
+  height:10px;
+  transition:transform .2s;
+  position:absolute;
+  top:3px;
+  left:3px
+}
+.toggle-group input:checked+.toggle {
+  background:var(--blue);
+  border-color:var(--blue)
+}
+.toggle-group input:checked+.toggle:after {
+  background:#fff;
+  transform:translate(14px)
+}
+.toggle-group p {
+  color:var(--muted);
+  margin:8px 0 0;
+  font-size:12px;
+  line-height:1.5
+}
+.catalog-nav {
+  border-bottom:1px solid var(--line);
+  justify-content:space-between;
+  align-items:center;
+  gap:24px;
+  margin:-64px 0 64px;
+  padding:18px 0;
+  display:flex
+}
+.catalog-brand {
+  color:var(--foreground);
+  font:600 14px var(--font-mono);
+  text-decoration:none
+}
+.catalog-nav nav {
+  gap:24px;
+  display:flex
+}
+.catalog-nav nav a,.catalog-nav-status {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  text-decoration:none
+}
+.catalog-nav nav a:hover,.catalog-nav nav a.current {
+  color:var(--blue)
+}
+.catalog-nav-status {
+  color:#25a96a
+}
+.catalog-page {
+  width:100%;
+  max-width:1680px;
+  margin:0 auto;
+  padding:64px clamp(24px,4vw,72px) 72px
+}
+.catalog-head {
+  border-bottom:1px solid var(--line);
+  justify-content:space-between;
+  align-items:flex-end;
+  gap:40px;
+  padding-bottom:42px;
+  display:flex
+}
+.catalog-head h1 {
+  margin:12px 0 14px
+}
+.catalog-head p {
+  max-width:660px;
+  color:var(--muted);
+  font:14px/1.6 var(--font-mono);
+  margin:0
+}
+.catalog-total {
+  color:var(--muted);
+  font:10px/1.4 var(--font-mono);
+  text-align:right;
+  align-items:center;
+  gap:14px;
+  display:flex
+}
+.catalog-total b {
+  color:var(--blue);
+  font:400 clamp(48px,5vw,76px)/.9 var(--font-mono);
+  letter-spacing:-.08em
+}
+.catalog-toolbar {
+  justify-content:space-between;
+  align-items:center;
+  gap:24px;
+  padding:24px 0 42px;
+  display:flex
+}
+.catalog-search {
+  border:1px solid var(--line);
+  width:min(420px,100%);
+  color:var(--muted);
+  align-items:center;
+  gap:12px;
+  padding:12px 14px;
+  display:flex
+}
+.catalog-search input {
+  width:100%;
+  color:var(--foreground);
+  font:12px var(--font-mono);
+  background:0 0;
+  border:0;
+  outline:0
+}
+.catalog-filters {
+  color:var(--muted);
+  flex-wrap:wrap;
+  align-items:center;
+  gap:6px;
+  display:flex
+}
+.catalog-filters button {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  background:0 0;
+  border:1px solid #0000;
+  padding:8px 10px
+}
+.catalog-filters button:hover,.catalog-filters button.active {
+  border-color:var(--blue);
+  color:var(--blue)
+}
+.catalog-groups {
+  grid-template-columns:repeat(2,minmax(0,1fr));
+  gap:56px 28px;
+  display:grid
+}
+.catalog-group {
+  min-width:0
+}
+.group-title {
+  border-bottom:1px solid var(--line);
+  color:var(--foreground);
+  font:600 11px var(--font-mono);
+  letter-spacing:.12em;
+  justify-content:space-between;
+  align-items:center;
+  padding-bottom:12px;
+  display:flex
+}
+.group-title i {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  font-style:normal
+}
+.tool-cards {
+  gap:10px;
+  padding-top:14px;
+  display:grid
+}
+.tool-card {
+  border:1px solid var(--line);
+  background:var(--panel);
+  min-height:106px;
+  color:var(--foreground);
+  grid-template-columns:42px minmax(0,1fr) 24px 18px;
+  align-items:center;
+  gap:14px;
+  padding:16px;
+  text-decoration:none;
+  transition:border-color .18s,transform .18s,background .18s;
+  display:grid
+}
+.tool-card:hover {
+  border-color:var(--blue);
+  background:var(--panel-strong);
+  transform:translateY(-2px)
+}
+.tool-icon {
+  background:var(--blue);
+  place-items:center;
+  width:42px;
+  height:42px;
+  display:grid
+}
+@supports (color:color-mix(in lab, red, red)) {
+  .tool-icon {
+  background:color-mix(in srgb,var(--blue) 12%,transparent)
+}
+
+}
+.tool-icon {
+  color:var(--blue)
+}
+.tool-copy {
+  gap:8px;
+  min-width:0;
+  display:grid
+}
+.tool-copy strong {
+  font:600 13px var(--font-mono)
+}
+.tool-copy span {
+  color:var(--muted);
+  font:12px/1.5 var(--font-mono)
+}
+.tool-index {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  align-self:start
+}
+.tool-arrow {
+  color:var(--blue);
+  opacity:0;
+  transition:opacity .18s,transform .18s
+}
+.tool-card:hover .tool-arrow {
+  opacity:1;
+  transform:translate(2px,-2px)
+}
+.catalog-empty {
+  border:1px dashed var(--line);
+  color:var(--muted);
+  font:12px var(--font-mono);
+  align-items:center;
+  gap:10px;
+  padding:40px;
+  display:flex
+}
+.catalog-footer {
+  border-top:1px solid var(--line);
+  color:var(--muted);
+  font:10px var(--font-mono);
+  margin-top:64px;
+  padding-top:20px
+}
+.catalog-footer span {
+  color:var(--blue);
+  margin:0 8px
+}
+@media (max-width:800px) {
+  .catalog-nav {
+  margin:-36px 0 36px
+}
+.catalog-nav-status {
+  display:none
+}
+.catalog-nav nav {
+  gap:14px
+}
+.catalog-page {
+  padding:36px 16px 48px
+}
+.catalog-head {
+  flex-direction:column;
+  align-items:flex-start;
+  gap:24px
+}
+.catalog-total {
+  text-align:left
+}
+.catalog-toolbar {
+  flex-direction:column;
+  align-items:stretch;
+  padding-bottom:30px
+}
+.catalog-search {
+  width:100%
+}
+.catalog-groups {
+  grid-template-columns:1fr;
+  gap:36px
+}
+.tool-card {
+  grid-template-columns:38px minmax(0,1fr) 18px;
+  gap:12px;
+  min-height:96px
+}
+.tool-icon {
+  width:38px;
+  height:38px
+}
+.tool-index {
+  display:none
+}
+.tool-arrow {
+  opacity:1
+}
+.tool-page {
+  padding:36px 16px 48px
+}
+.tool-title {
+  display:block
+}
+.tool-status {
+  margin-top:22px
+}
+.gradient-layout,.remover-layout {
+  grid-template-columns:1fr;
+  gap:24px
+}
+.gradient-preview,.remover-preview {
+  order:-1
+}
+.gradient-art {
+  min-height:340px
+}
+.preview-toolbar {
+  flex-direction:column;
+  align-items:flex-start;
+  gap:16px
+}
+.preview-actions {
+  justify-content:flex-end;
+  width:100%
+}
+.comparison-grid {
+  grid-template-columns:1fr
+}
+.remover-canvas {
+  min-height:300px
+}
+.result-meta {
+  flex-wrap:wrap;
+  gap:12px 18px
+}
+
+}
+@property --tw-rotate-x {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-rotate-y {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-rotate-z {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-skew-x {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-skew-y {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-border-style {
+  syntax:"*";
+  inherits:false;
+  initial-value:solid
+}
+@property --tw-font-weight {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-shadow {
+  syntax:"*";
+  inherits:false;
+  initial-value:0 0 #0000
+}
+@property --tw-shadow-color {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-shadow-alpha {
+  syntax:"<percentage>";
+  inherits:false;
+  initial-value:100%
+}
+@property --tw-inset-shadow {
+  syntax:"*";
+  inherits:false;
+  initial-value:0 0 #0000
+}
+@property --tw-inset-shadow-color {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-inset-shadow-alpha {
+  syntax:"<percentage>";
+  inherits:false;
+  initial-value:100%
+}
+@property --tw-ring-color {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-ring-shadow {
+  syntax:"*";
+  inherits:false;
+  initial-value:0 0 #0000
+}
+@property --tw-inset-ring-color {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-inset-ring-shadow {
+  syntax:"*";
+  inherits:false;
+  initial-value:0 0 #0000
+}
+@property --tw-ring-inset {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-ring-offset-width {
+  syntax:"<length>";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-ring-offset-color {
+  syntax:"*";
+  inherits:false;
+  initial-value:#fff
+}
+@property --tw-ring-offset-shadow {
+  syntax:"*";
+  inherits:false;
+  initial-value:0 0 #0000
+}
+@property --tw-outline-style {
+  syntax:"*";
+  inherits:false;
+  initial-value:solid
+}
+@property --tw-blur {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-brightness {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-contrast {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-grayscale {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-hue-rotate {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-invert {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-opacity {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-saturate {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-sepia {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-drop-shadow {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-drop-shadow-color {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-drop-shadow-alpha {
+  syntax:"<percentage>";
+  inherits:false;
+  initial-value:100%
+}
+@property --tw-drop-shadow-size {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-translate-x {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-translate-y {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-translate-z {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+</style>
+    <meta name="theme-color" content="#eef1f4"/>
+    <meta name="color-scheme" content="light"/>
+    <title>easy-png-tools / Demo
+    </title>
+    <meta name="description" content="Technical workspace for building PNG processing pipelines."/>
+    <meta name="generator" content="easy-png-tools"/>
+  </head>
+  <body class="antialiased">
+    <div hidden="">
+      <!--$-->
+      <!--/$-->
+    </div>
+    <main class="app-shell dark-mode">
+      <header class="topbar">
+        <div class="brand">
+          <span class="brand-mark">EP
+          </span>
+          <span>easy-png-tools
+          </span>
+          <span class="version">/ GRADIENT
+          </span>
+        </div>
+        <div class="top-actions">
+          <button class="icon-btn" aria-label="Toggle theme">
+            <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun" aria-hidden="true">
+              <circle cx="12" cy="12" r="4">
+              </circle>
+              <path d="M12 2v2">
+              </path>
+              <path d="M12 20v2">
+              </path>
+              <path d="m4.93 4.93 1.41 1.41">
+              </path>
+              <path d="m17.66 17.66 1.41 1.41">
+              </path>
+              <path d="M2 12h2">
+              </path>
+              <path d="M20 12h2">
+              </path>
+              <path d="m6.34 17.66-1.41 1.41">
+              </path>
+              <path d="m19.07 4.93-1.41 1.41">
+              </path>
+            </svg>
+          </button>
+        </div>
+      </header>
+      <div class="tool-page">
+        <div class="eyebrow">PNG PROCESSING 
+          <span>/
+          </span> SINGLE TOOL
+        </div>
+        <div class="tool-title">
+          <div>
+            <h1>Gradient background.
+            </h1>
+            <p class="lede">Create a clean, export-ready gradient with precise control over color, direction and transparency.
+            </p>
+          </div>
+          <span class="tool-status">
+            <i>
+            </i> LIVE PREVIEW
+          </span>
+        </div>
+        <div class="gradient-layout">
+          <section class="settings-panel">
+            <div class="panel-heading">
+              <div>
+                <span class="label">GRADIENT SETTINGS
+                </span>
+                <strong>Configure output
+                </strong>
+              </div>
+              <span class="step-type">TOOL 01
+              </span>
+            </div>
+            <div class="setting-group">
+              <label>GRADIENT TYPE
+              </label>
+              <div class="segmented wide">
+                <button class="selected">Linear
+                </button>
+                <button class="">Radial
+                </button>
+              </div>
+            </div>
+            <div class="setting-group">
+              <label>COLOR STOPS
+              </label>
+              <div class="color-row">
+                <div class="color-field">
+                  <span class="swatch" style="background:#1769D2">
+                  </span>
+                  <input value="#1769D2"/>
+                </div>
+                <span class="stop-arrow">→
+                </span>
+                <div class="color-field">
+                  <span class="swatch" style="background:#00A8C7">
+                  </span>
+                  <input value="#00A8C7"/>
+                </div>
+              </div>
+              <div class="gradient-bar" style="background:linear-gradient(135deg, #1769D2 0%, #00A8C7 100%)">
+              </div>
+            </div>
+            <div class="setting-group">
+              <label>DIRECTION 
+                <output>135
+                  <!-- -->°
+                </output>
+              </label>
+              <input type="range" min="0" max="360" value="135"/>
+              <div class="direction-grid">
+                <button class="">0° →
+                </button>
+                <button class="">45° ↗
+                </button>
+                <button class="">90° ↑
+                </button>
+                <button class="selected">135° ↖
+                </button>
+                <button class="">180° ←
+                </button>
+                <button class="">225° ↙
+                </button>
+                <button class="">270° ↓
+                </button>
+                <button class="">315° ↘
+                </button>
+              </div>
+            </div>
+            <div class="setting-group">
+              <label>OPACITY 
+                <output>100
+                  <!-- -->%
+                </output>
+              </label>
+              <input type="range" min="0" max="100" value="100"/>
+            </div>
+            <div class="settings-footer">
+              <button class="reset-btn">
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-ccw" aria-hidden="true">
+                  <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8">
+                  </path>
+                  <path d="M3 3v5h5">
+                  </path>
+                </svg> Reset
+              </button>
+              <span class="auto-note">
+                <i>
+                </i> updates automatically
+              </span>
+            </div>
+          </section>
+          <section class="gradient-preview">
+            <div class="preview-toolbar">
+              <div>
+                <span class="label">OUTPUT PREVIEW
+                </span>
+                <strong>gradient.png
+                </strong>
+              </div>
+              <div class="preview-actions">
+                <button class="secondary-btn">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy" aria-hidden="true">
+                    <rect width="14" height="14" x="8" y="8" rx="2" ry="2">
+                    </rect>
+                    <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2">
+                    </path>
+                  </svg>
+                  <!-- -->Copy CSS
+                </button>
+                <button class="download-btn">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download" aria-hidden="true">
+                    <path d="M12 15V3">
+                    </path>
+                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4">
+                    </path>
+                    <path d="m7 10 5 5 5-5">
+                    </path>
+                  </svg> Download PNG 
+                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true">
+                    <path d="m6 9 6 6 6-6">
+                    </path>
+                  </svg>
+                </button>
+              </div>
+            </div>
+            <div class="large-canvas">
+              <div class="gradient-art" style="background:linear-gradient(135deg, #1769D2 0%, #00A8C7 100%);opacity:1">
+                <div class="art-mark">PNG
+                </div>
+                <span>easy-png-tools
+                </span>
+              </div>
+            </div>
+            <div class="code-block">
+              <div>
+                <span class="label">GENERATED CSS
+                </span>
+                <button class="icon-btn" aria-label="Copy CSS">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy" aria-hidden="true">
+                    <rect width="14" height="14" x="8" y="8" rx="2" ry="2">
+                    </rect>
+                    <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2">
+                    </path>
+                  </svg>
+                </button>
+              </div>
+              <pre>background: linear-gradient(135deg, #1769D2 0%, #00A8C7 100%);
+opacity: 1;</pre>
+            </div>
+          </section>
+        </div>
+      </div>
+      <footer class="footer">
+        <span>easy-png-tools 
+          <b>v2.4.0
+          </b>
+        </span>
+        <span>gradient tool · local-only
+        </span>
+        <span>© 2024
+        </span>
+      </footer>
+    </main>
+    <!--$-->
+    <!--/$-->
+    <!--$!-->
+    <template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING">
+    </template>
+    <!--/$-->
+  </body>
+</html>
\ No newline at end of file
diff --git a/refs-html/index.html b/refs-html/index.html
new file mode 100644
index 0000000..195baa5
--- /dev/null
+++ b/refs-html/index.html
@@ -0,0 +1,2576 @@
+<!DOCTYPE html>
+<html lang="ru" class="bg-background">
+  <head>
+    <meta charSet="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <style>
+@layer properties {
+  @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
+  *,:before,:after,::backdrop {
+  --tw-rotate-x:initial;
+  --tw-rotate-y:initial;
+  --tw-rotate-z:initial;
+  --tw-skew-x:initial;
+  --tw-skew-y:initial;
+  --tw-border-style:solid;
+  --tw-font-weight:initial;
+  --tw-shadow:0 0 #0000;
+  --tw-shadow-color:initial;
+  --tw-shadow-alpha:100%;
+  --tw-inset-shadow:0 0 #0000;
+  --tw-inset-shadow-color:initial;
+  --tw-inset-shadow-alpha:100%;
+  --tw-ring-color:initial;
+  --tw-ring-shadow:0 0 #0000;
+  --tw-inset-ring-color:initial;
+  --tw-inset-ring-shadow:0 0 #0000;
+  --tw-ring-inset:initial;
+  --tw-ring-offset-width:0px;
+  --tw-ring-offset-color:#fff;
+  --tw-ring-offset-shadow:0 0 #0000;
+  --tw-outline-style:solid;
+  --tw-blur:initial;
+  --tw-brightness:initial;
+  --tw-contrast:initial;
+  --tw-grayscale:initial;
+  --tw-hue-rotate:initial;
+  --tw-invert:initial;
+  --tw-opacity:initial;
+  --tw-saturate:initial;
+  --tw-sepia:initial;
+  --tw-drop-shadow:initial;
+  --tw-drop-shadow-color:initial;
+  --tw-drop-shadow-alpha:100%;
+  --tw-drop-shadow-size:initial;
+  --tw-translate-x:0;
+  --tw-translate-y:0;
+  --tw-translate-z:0;
+  --tw-animation-delay:0s;
+  --tw-animation-direction:normal;
+  --tw-animation-duration:initial;
+  --tw-animation-fill-mode:none;
+  --tw-animation-iteration-count:1;
+  --tw-enter-blur:0;
+  --tw-enter-opacity:1;
+  --tw-enter-rotate:0;
+  --tw-enter-scale:1;
+  --tw-enter-translate-x:0;
+  --tw-enter-translate-y:0;
+  --tw-exit-blur:0;
+  --tw-exit-opacity:1;
+  --tw-exit-rotate:0;
+  --tw-exit-scale:1;
+  --tw-exit-translate-x:0;
+  --tw-exit-translate-y:0
+}
+
+}
+
+}
+@layer theme {
+  :root,:host {
+  --font-sans:"IBM Plex Sans", sans-serif;
+  --font-mono:"IBM Plex Mono", monospace;
+  --spacing:.25rem;
+  --text-xs:.75rem;
+  --text-xs--line-height:calc(1 / .75);
+  --text-sm:.875rem;
+  --text-sm--line-height:calc(1.25 / .875);
+  --font-weight-medium:500;
+  --radius-md:.375rem;
+  --radius-lg:.5rem;
+  --default-transition-duration:.15s;
+  --default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);
+  --default-font-family:"IBM Plex Sans", sans-serif;
+  --default-mono-font-family:"IBM Plex Mono", monospace
+}
+
+}
+@layer base {
+  *,:after,:before,::backdrop {
+  box-sizing:border-box;
+  border:0 solid;
+  margin:0;
+  padding:0
+}
+::file-selector-button {
+  box-sizing:border-box;
+  border:0 solid;
+  margin:0;
+  padding:0
+}
+html,:host {
+  -webkit-text-size-adjust:100%;
+  tab-size:4;
+  line-height:1.5;
+  font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+  font-feature-settings:var(--default-font-feature-settings,normal);
+  font-variation-settings:var(--default-font-variation-settings,normal);
+  -webkit-tap-highlight-color:transparent
+}
+hr {
+  height:0;
+  color:inherit;
+  border-top-width:1px
+}
+abbr:where([title]) {
+  -webkit-text-decoration:underline dotted;
+  text-decoration:underline dotted
+}
+h1,h2,h3,h4,h5,h6 {
+  font-size:inherit;
+  font-weight:inherit
+}
+a {
+  color:inherit;
+  -webkit-text-decoration:inherit;
+  -webkit-text-decoration:inherit;
+  -webkit-text-decoration:inherit;
+  -webkit-text-decoration:inherit;
+  text-decoration:inherit
+}
+b,strong {
+  font-weight:bolder
+}
+code,kbd,samp,pre {
+  font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+  font-feature-settings:var(--default-mono-font-feature-settings,normal);
+  font-variation-settings:var(--default-mono-font-variation-settings,normal);
+  font-size:1em
+}
+small {
+  font-size:80%
+}
+sub,sup {
+  vertical-align:baseline;
+  font-size:75%;
+  line-height:0;
+  position:relative
+}
+sub {
+  bottom:-.25em
+}
+sup {
+  top:-.5em
+}
+table {
+  text-indent:0;
+  border-color:inherit;
+  border-collapse:collapse
+}
+:-moz-focusring:where(:not(iframe)) {
+  outline:auto
+}
+progress {
+  vertical-align:baseline
+}
+summary {
+  display:list-item
+}
+ol,ul,menu {
+  list-style:none
+}
+img,svg,video,canvas,audio,iframe,embed,object {
+  vertical-align:middle;
+  display:block
+}
+img,video {
+  max-width:100%;
+  height:auto
+}
+button,input,select,optgroup,textarea {
+  font:inherit;
+  font-feature-settings:inherit;
+  font-variation-settings:inherit;
+  letter-spacing:inherit;
+  color:inherit;
+  opacity:1;
+  background-color:#0000;
+  border-radius:0
+}
+::file-selector-button {
+  font:inherit;
+  font-feature-settings:inherit;
+  font-variation-settings:inherit;
+  letter-spacing:inherit;
+  color:inherit;
+  opacity:1;
+  background-color:#0000;
+  border-radius:0
+}
+:where(select:is([multiple],[size])) optgroup {
+  font-weight:bolder
+}
+:where(select:is([multiple],[size])) optgroup option {
+  padding-inline-start:20px
+}
+::file-selector-button {
+  margin-inline-end:4px
+}
+::placeholder {
+  opacity:1
+}
+@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
+  ::placeholder {
+  color:currentColor
+}
+@supports (color:color-mix(in lab, red, red)) {
+  ::placeholder {
+  color:color-mix(in oklab, currentcolor 50%, transparent)
+}
+
+}
+
+}
+textarea {
+  resize:vertical
+}
+::-webkit-search-decoration {
+  -webkit-appearance:none
+}
+::-webkit-date-and-time-value {
+  min-height:1lh;
+  text-align:inherit
+}
+::-webkit-datetime-edit {
+  display:inline-flex
+}
+::-webkit-datetime-edit-fields-wrapper {
+  padding:0
+}
+::-webkit-datetime-edit {
+  padding-block:0
+}
+::-webkit-datetime-edit-year-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-month-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-day-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-hour-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-minute-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-second-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-millisecond-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-meridiem-field {
+  padding-block:0
+}
+::-webkit-calendar-picker-indicator {
+  line-height:1
+}
+:-moz-ui-invalid {
+  box-shadow:none
+}
+button,input:where([type=button],[type=reset],[type=submit]) {
+  appearance:button
+}
+::file-selector-button {
+  appearance:button
+}
+::-webkit-inner-spin-button {
+  height:auto
+}
+::-webkit-outer-spin-button {
+  height:auto
+}
+[hidden]:where(:not([hidden=until-found])) {
+  display:none!important
+}
+
+}
+@layer components;
+  @layer utilities {
+  .static {
+  position:static
+}
+.inline {
+  display:inline
+}
+.inline-flex {
+  display:inline-flex
+}
+.size-6 {
+  width:calc(var(--spacing) * 6);
+  height:calc(var(--spacing) * 6)
+}
+.size-7 {
+  width:calc(var(--spacing) * 7);
+  height:calc(var(--spacing) * 7)
+}
+.size-8 {
+  width:calc(var(--spacing) * 8);
+  height:calc(var(--spacing) * 8)
+}
+.size-9 {
+  width:calc(var(--spacing) * 9);
+  height:calc(var(--spacing) * 9)
+}
+.h-6 {
+  height:calc(var(--spacing) * 6)
+}
+.h-7 {
+  height:calc(var(--spacing) * 7)
+}
+.h-8 {
+  height:calc(var(--spacing) * 8)
+}
+.h-9 {
+  height:calc(var(--spacing) * 9)
+}
+.shrink-0 {
+  flex-shrink:0
+}
+.transform {
+  transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)
+}
+.items-center {
+  align-items:center
+}
+.justify-center {
+  justify-content:center
+}
+.gap-1 {
+  gap:var(--spacing)
+}
+.gap-1\.5 {
+  gap:calc(var(--spacing) * 1.5)
+}
+.rounded-\[min\(var\(--radius-md\)\,10px\)\] {
+  border-radius:min(var(--radius-md), 10px)
+}
+.rounded-\[min\(var\(--radius-md\)\,12px\)\] {
+  border-radius:min(var(--radius-md), 12px)
+}
+.rounded-lg {
+  border-radius:var(--radius-lg)
+}
+.border {
+  border-style:var(--tw-border-style);
+  border-width:1px
+}
+.border-border {
+  border-color:var(--line)
+}
+.border-transparent {
+  border-color:#0000
+}
+.bg-background {
+  background-color:var(--background)
+}
+.bg-clip-padding {
+  background-clip:padding-box
+}
+.px-2 {
+  padding-inline:calc(var(--spacing) * 2)
+}
+.px-2\.5 {
+  padding-inline:calc(var(--spacing) * 2.5)
+}
+.text-sm {
+  font-size:var(--text-sm);
+  line-height:var(--tw-leading,var(--text-sm--line-height))
+}
+.text-xs {
+  font-size:var(--text-xs);
+  line-height:var(--tw-leading,var(--text-xs--line-height))
+}
+.text-\[0\.8rem\] {
+  font-size:.8rem
+}
+.font-medium {
+  --tw-font-weight:var(--font-weight-medium);
+  font-weight:var(--font-weight-medium)
+}
+.whitespace-nowrap {
+  white-space:nowrap
+}
+.underline-offset-4 {
+  text-underline-offset:4px
+}
+.antialiased {
+  -webkit-font-smoothing:antialiased;
+  -moz-osx-font-smoothing:grayscale
+}
+.ring {
+  --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
+  box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
+}
+.outline {
+  outline-style:var(--tw-outline-style);
+  outline-width:1px
+}
+.blur {
+  --tw-blur:blur(8px);
+  filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
+}
+.grayscale {
+  --tw-grayscale:grayscale(100%);
+  filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
+}
+.transition {
+  transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
+  transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));
+  transition-duration:var(--tw-duration,var(--default-transition-duration))
+}
+.transition-all {
+  transition-property:all;
+  transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));
+  transition-duration:var(--tw-duration,var(--default-transition-duration))
+}
+.outline-none {
+  --tw-outline-style:none;
+  outline-style:none
+}
+.select-none {
+  -webkit-user-select:none;
+  user-select:none
+}
+@media (hover:hover) {
+  .hover\:text-foreground:hover {
+  color:var(--foreground)
+}
+.hover\:underline:hover {
+  text-decoration-line:underline
+}
+
+}
+.focus-visible\:ring-3:focus-visible {
+  --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
+  box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
+}
+.active\:not-aria-\[haspopup\]\:translate-y-px:active:not([aria-haspopup]) {
+  --tw-translate-y:1px;
+  translate:var(--tw-translate-x) var(--tw-translate-y)
+}
+.disabled\:pointer-events-none:disabled {
+  pointer-events:none
+}
+.disabled\:opacity-50:disabled {
+  opacity:.5
+}
+:where([data-slot=button-group]) .in-data-\[slot\=button-group\]\:rounded-lg {
+  border-radius:var(--radius-lg)
+}
+.has-data-\[icon\=inline-end\]\:pr-1\.5:has([data-icon=inline-end]) {
+  padding-right:calc(var(--spacing) * 1.5)
+}
+.has-data-\[icon\=inline-end\]\:pr-2:has([data-icon=inline-end]) {
+  padding-right:calc(var(--spacing) * 2)
+}
+.has-data-\[icon\=inline-start\]\:pl-1\.5:has([data-icon=inline-start]) {
+  padding-left:calc(var(--spacing) * 1.5)
+}
+.has-data-\[icon\=inline-start\]\:pl-2:has([data-icon=inline-start]) {
+  padding-left:calc(var(--spacing) * 2)
+}
+.aria-expanded\:text-foreground[aria-expanded=true] {
+  color:var(--foreground)
+}
+.aria-invalid\:ring-3[aria-invalid=true] {
+  --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
+  box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
+}
+.\[\&_svg\]\:pointer-events-none svg {
+  pointer-events:none
+}
+.\[\&_svg\]\:shrink-0 svg {
+  flex-shrink:0
+}
+.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3 svg:not([class*=size-]) {
+  width:calc(var(--spacing) * 3);
+  height:calc(var(--spacing) * 3)
+}
+.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5 svg:not([class*=size-]) {
+  width:calc(var(--spacing) * 3.5);
+  height:calc(var(--spacing) * 3.5)
+}
+.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]) {
+  width:calc(var(--spacing) * 4);
+  height:calc(var(--spacing) * 4)
+}
+
+}
+@property --tw-animation-delay {
+  syntax:"*";
+  inherits:false;
+  initial-value:0s
+}
+@property --tw-animation-direction {
+  syntax:"*";
+  inherits:false;
+  initial-value:normal
+}
+@property --tw-animation-duration {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-animation-fill-mode {
+  syntax:"*";
+  inherits:false;
+  initial-value:none
+}
+@property --tw-animation-iteration-count {
+  syntax:"*";
+  inherits:false;
+  initial-value:1
+}
+@property --tw-enter-blur {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-enter-opacity {
+  syntax:"*";
+  inherits:false;
+  initial-value:1
+}
+@property --tw-enter-rotate {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-enter-scale {
+  syntax:"*";
+  inherits:false;
+  initial-value:1
+}
+@property --tw-enter-translate-x {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-enter-translate-y {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-exit-blur {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-exit-opacity {
+  syntax:"*";
+  inherits:false;
+  initial-value:1
+}
+@property --tw-exit-rotate {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-exit-scale {
+  syntax:"*";
+  inherits:false;
+  initial-value:1
+}
+@property --tw-exit-translate-x {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-exit-translate-y {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+:root {
+  --lightningcss-light:initial;
+  --lightningcss-dark: ;
+  color-scheme:light;
+  --background:#eef1f4;
+  --foreground:#17212b;
+  --panel:#f8fafb;
+  --line:#cbd3da;
+  --muted:#6d7883;
+  --blue:#1769d2;
+  --cyan:#00a8c7;
+  --amber:#bd7411;
+  --radius:4px
+}
+* {
+  box-sizing:border-box;
+  border-color:var(--line)
+}
+html {
+  background:var(--background)
+}
+body {
+  background:var(--background);
+  color:var(--foreground);
+  font-family:var(--font-sans);
+  margin:0
+}
+button,input {
+  font:inherit
+}
+button {
+  cursor:pointer
+}
+.app-shell {
+  background-color:var(--background);
+  background-image:linear-gradient(#dce2e7 1px,#0000 1px),linear-gradient(90deg,#dce2e7 1px,#0000 1px);
+  background-size:32px 32px;
+  min-height:100vh
+}
+.dark-mode {
+  --background:#11171d;
+  --foreground:#e8eef2;
+  --panel:#182129;
+  --line:#33414c;
+  --muted:#91a0ac;
+  --blue:#54a2ff;
+  background-image:linear-gradient(#1b252d 1px,#0000 1px),linear-gradient(90deg,#1b252d 1px,#0000 1px)
+}
+.topbar,.brand,.top-actions,.language,.status,.title-row,.pipeline-head,.step-heading,.step-tools,.pipeline-footer,.preview-top,.footer {
+  align-items:center;
+  display:flex
+}
+.topbar {
+  border-bottom:1px solid var(--line);
+  background:var(--panel);
+  justify-content:space-between;
+  height:64px;
+  padding:0 clamp(20px,4vw,64px)
+}
+.brand {
+  font:600 14px var(--font-mono);
+  gap:10px
+}
+.brand-mark {
+  background:var(--blue);
+  color:#fff;
+  place-items:center;
+  width:30px;
+  height:30px;
+  font-size:11px;
+  display:grid
+}
+.version,.label,.step-type,.eyebrow {
+  font:10px var(--font-mono);
+  letter-spacing:.12em;
+  color:var(--muted)
+}
+.version,.eyebrow {
+  color:var(--blue)
+}
+.top-actions {
+  gap:16px
+}
+.status {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  letter-spacing:.08em;
+  gap:7px
+}
+.status i,.auto-note i {
+  background:#25a96a;
+  border-radius:50%;
+  width:6px;
+  height:6px
+}
+.icon-btn {
+  color:var(--muted);
+  background:0 0;
+  border:0;
+  place-items:center;
+  padding:6px;
+  display:grid
+}
+.language {
+  border:1px solid var(--line)
+}
+.language button {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  background:0 0;
+  border:0;
+  padding:6px 9px
+}
+.language .active {
+  background:var(--foreground);
+  color:var(--background)
+}
+.page-grid {
+  grid-template-columns:minmax(0,1.05fr) minmax(520px,.95fr);
+  align-items:start;
+  gap:56px;
+  width:100%;
+  max-width:none;
+  margin:auto;
+  padding:60px clamp(24px,4vw,72px) 72px;
+  display:grid
+}
+.preview-panel {
+  min-width:0;
+  margin-top:0;
+  position:sticky;
+  top:24px
+}
+.preview-meta {
+  gap:24px;
+  display:flex
+}
+.preview-meta div {
+  gap:5px;
+  display:grid
+}
+.preview-meta span {
+  font:10px var(--font-mono);
+  color:var(--muted)
+}
+.preview-meta b {
+  font:600 11px var(--font-mono)
+}
+.workspace,.preview-panel {
+  min-width:0
+}
+.preview-stack {
+  grid-template-columns:repeat(2,minmax(0,1fr));
+  gap:18px;
+  width:100%;
+  min-width:0;
+  display:grid
+}
+.preview-tile {
+  width:100%;
+  min-width:0;
+  overflow:hidden
+}
+.history-toggle {
+  border:1px solid var(--line);
+  width:100%;
+  color:var(--muted);
+  font:10px var(--font-mono);
+  letter-spacing:.04em;
+  background:0 0;
+  justify-content:center;
+  align-items:center;
+  gap:8px;
+  margin-top:18px;
+  padding:11px 14px;
+  display:flex
+}
+.history-toggle:hover {
+  color:var(--foreground);
+  background:var(--panel)
+}
+.top-toggle {
+  width:auto;
+  margin:0;
+  padding:8px 10px
+}
+.history-toggle .rotated {
+  transform:rotate(180deg)
+}
+.tile-canvas {
+  width:100%;
+  min-width:0;
+  min-height:clamp(300px,22vw,430px);
+  overflow:hidden
+}
+.image-preview {
+  min-width:0;
+  max-width:100%;
+  overflow:hidden
+}
+.eyebrow {
+  margin-bottom:18px
+}
+.eyebrow span {
+  color:var(--muted);
+  margin:0 7px
+}
+.title-row {
+  justify-content:space-between;
+  align-items:flex-end;
+  gap:30px;
+  margin-bottom:56px
+}
+h1 {
+  letter-spacing:-.06em;
+  max-width:700px;
+  margin:0 0 16px;
+  font-size:clamp(36px,4vw,64px);
+  font-weight:650;
+  line-height:1
+}
+.lede {
+  color:var(--muted);
+  max-width:550px;
+  margin:0;
+  line-height:1.6
+}
+.file-chip {
+  white-space:nowrap;
+  border:1px solid var(--line);
+  background:var(--panel);
+  font:11px var(--font-mono);
+  color:var(--muted);
+  align-items:center;
+  gap:8px;
+  padding:10px 12px;
+  display:flex
+}
+.file-chip b {
+  color:var(--blue);
+  font-weight:500
+}
+.pipeline-head {
+  border-bottom:1px solid var(--line);
+  justify-content:space-between;
+  padding-bottom:12px
+}
+.pipeline-head strong,.preview-top strong {
+  font:600 14px var(--font-mono);
+  margin-top:5px;
+  display:block
+}
+.pipeline-head em {
+  color:#25a96a;
+  font-size:10px;
+  font-style:normal
+}
+.add-btn,.reset-btn {
+  color:var(--blue);
+  background:0 0;
+  border:0;
+  align-items:center;
+  gap:7px;
+  font-size:12px;
+  display:flex
+}
+.steps-list {
+  gap:10px;
+  padding-top:14px;
+  display:grid
+}
+.step-card {
+  border:1px solid var(--line);
+  background:var(--panel);
+  grid-template-columns:46px 20px 1fr;
+  min-height:138px;
+  display:grid
+}
+.step-index {
+  font:11px var(--font-mono);
+  color:var(--blue);
+  padding:17px 0 0 15px
+}
+.drag {
+  color:var(--line);
+  margin-top:17px
+}
+.step-body {
+  padding:15px 18px 18px
+}
+.step-heading {
+  justify-content:space-between;
+  gap:15px
+}
+.step-heading h2 {
+  font:600 15px var(--font-mono);
+  margin:5px 0 18px
+}
+.step-tools {
+  gap:13px
+}
+.step-tools button {
+  color:var(--muted);
+  background:0 0;
+  border:0
+}
+.check {
+  color:#238354;
+  font:10px var(--font-mono);
+  align-items:center;
+  gap:4px;
+  display:flex
+}
+.controls {
+  grid-template-columns:1.1fr 1fr 1.2fr;
+  gap:16px;
+  display:grid
+}
+.controls.compact {
+  grid-template-columns:1fr 1fr
+}
+.control-block label {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  letter-spacing:.08em;
+  justify-content:space-between;
+  margin-bottom:8px;
+  display:flex
+}
+.control-block output {
+  color:var(--foreground)
+}
+.color-field {
+  border:1px solid var(--line);
+  align-items:center;
+  gap:8px;
+  height:32px;
+  padding:0 8px;
+  display:flex
+}
+.swatch {
+  border:1px solid var(--line);
+  width:14px;
+  height:14px
+}
+.swatch.dark {
+  background:#16202b
+}
+.color-field input {
+  min-width:0;
+  color:var(--foreground);
+  font:11px var(--font-mono);
+  background:0 0;
+  border:0;
+  outline:0;
+  flex:1
+}
+.control-block input[type=range] {
+  width:100%;
+  accent-color:var(--blue)
+}
+.segmented {
+  border:1px solid var(--line);
+  height:32px;
+  display:flex
+}
+.segmented button {
+  border:0;
+  border-right:1px solid var(--line);
+  color:var(--muted);
+  font:10px var(--font-mono);
+  background:0 0;
+  flex:1
+}
+.segmented .selected {
+  background:var(--blue);
+  color:#fff
+}
+.transform-note,.auto-note {
+  color:var(--muted);
+  font:11px var(--font-mono);
+  align-items:center;
+  gap:8px;
+  display:flex
+}
+.pipeline-footer {
+  justify-content:space-between;
+  padding-top:18px
+}
+.auto-note {
+  color:var(--muted)
+}
+.auto-note i {
+  display:inline-block
+}
+.preview-panel {
+  border:1px solid var(--line);
+  background:var(--panel);
+  align-self:start;
+  padding:18px;
+  position:sticky;
+  top:24px
+}
+.preview-top {
+  border-bottom:1px solid var(--line);
+  justify-content:space-between;
+  padding-bottom:15px
+}
+.preview-stack {
+  grid-template-columns:1fr 1fr;
+  gap:12px;
+  padding:16px 0;
+  display:grid
+}
+.preview-tile {
+  border:1px solid var(--line);
+  background:var(--background)
+}
+.preview-tile.active {
+  border-color:var(--blue)
+}
+.tile-canvas {
+  aspect-ratio:1.35;
+  background-color:#e4e8eb;
+  background-image:linear-gradient(45deg,#d2d8dc 25%,#0000 25%),linear-gradient(-45deg,#d2d8dc 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#d2d8dc 75%),linear-gradient(-45deg,#0000 75%,#d2d8dc 75%);
+  background-position:0 0,0 7px,7px -7px,-7px 0;
+  background-size:14px 14px;
+  place-items:center;
+  padding:16px;
+  display:grid
+}
+.image-preview {
+  aspect-ratio:1.5;
+  color:#16202b;
+  width:80%;
+  font:600 10px var(--font-mono);
+  flex-direction:column;
+  justify-content:center;
+  align-items:center;
+  gap:5px;
+  display:flex
+}
+.sample-icon {
+  border:1px solid;
+  padding:3px 5px;
+  font-size:9px
+}
+.tile-label {
+  border-top:1px solid var(--line);
+  font:9px var(--font-mono);
+  color:var(--blue);
+  justify-content:space-between;
+  gap:8px;
+  padding:8px;
+  display:flex
+}
+.tile-label b {
+  color:var(--muted);
+  text-align:right;
+  font-weight:400
+}
+.preview-meta {
+  border-top:1px solid var(--line);
+  grid-template-columns:repeat(3,1fr);
+  gap:8px;
+  padding-top:14px;
+  display:grid
+}
+.preview-meta span {
+  color:var(--muted);
+  font:9px var(--font-mono);
+  display:block
+}
+.preview-meta b {
+  font:11px var(--font-mono);
+  margin-top:5px;
+  display:block
+}
+.download-btn {
+  background:var(--blue);
+  color:#fff;
+  width:100%;
+  height:42px;
+  font:11px var(--font-mono);
+  border:0;
+  justify-content:center;
+  align-items:center;
+  gap:9px;
+  margin-top:18px;
+  display:flex
+}
+.preview-note {
+  color:var(--muted);
+  margin:12px 0 0;
+  font-size:11px;
+  line-height:1.5
+}
+.footer {
+  border-top:1px solid var(--line);
+  color:var(--muted);
+  font:10px var(--font-mono);
+  justify-content:space-between;
+  padding:16px clamp(20px,4vw,72px)
+}
+.footer span {
+  align-items:center;
+  gap:7px;
+  display:flex
+}
+.footer b {
+  color:var(--blue);
+  font-weight:400
+}
+@media (max-width:1200px) {
+  .page-grid {
+  grid-template-columns:minmax(0,1fr) minmax(420px,.9fr);
+  gap:32px
+}
+
+}
+.dark-mode .tile-canvas {
+  background-color:#202a31;
+  background-image:linear-gradient(45deg,#29343c 25%,#0000 25%),linear-gradient(-45deg,#29343c 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#29343c 75%),linear-gradient(-45deg,#0000 75%,#29343c 75%)
+}
+.dark-mode .image-preview {
+  color:#16202b
+}
+@media (max-width:800px) {
+  .topbar {
+  padding:0 16px
+}
+.status {
+  display:none
+}
+.page-grid {
+  padding:36px 16px 48px;
+  display:block
+}
+.title-row {
+  margin-bottom:40px;
+  display:block
+}
+.file-chip {
+  width:max-content;
+  margin-top:22px
+}
+.controls,.controls.compact {
+  grid-template-columns:1fr
+}
+.preview-panel {
+  margin-top:36px;
+  position:static
+}
+.footer {
+  flex-wrap:wrap;
+  gap:12px;
+  padding:0 16px 20px
+}
+.footer span:last-child {
+  display:none
+}
+
+}
+@media (max-width:1100px) {
+  .preview-stack {
+  grid-template-columns:repeat(3,minmax(220px,1fr))
+}
+
+}
+.preview-actions {
+  flex-wrap:wrap;
+  justify-content:flex-end
+}
+.download-btn {
+  white-space:nowrap
+}
+@media (max-width:800px) {
+  .preview-top {
+  flex-direction:column;
+  align-items:flex-start;
+  gap:18px
+}
+.preview-actions {
+  justify-content:space-between;
+  width:100%
+}
+.preview-meta {
+  gap:14px
+}
+.preview-stack {
+  grid-template-columns:repeat(2,minmax(0,1fr))
+}
+.tile-canvas {
+  min-height:260px
+}
+
+}
+@media (max-width:480px) {
+  .preview-stack {
+  grid-template-columns:1fr
+}
+.preview-meta {
+  justify-content:space-between;
+  width:100%
+}
+.title-row h1 {
+  font-size:40px
+}
+.pipeline-footer {
+  flex-direction:column;
+  align-items:flex-start;
+  gap:12px
+}
+
+}
+.tool-page {
+  width:100%;
+  padding:60px clamp(24px,4vw,72px) 72px
+}
+.tool-title {
+  justify-content:space-between;
+  align-items:end;
+  gap:32px;
+  margin-bottom:48px;
+  display:flex
+}
+.tool-title h1 {
+  margin-bottom:14px
+}
+.tool-status {
+  color:#25a96a;
+  font:10px var(--font-mono);
+  white-space:nowrap;
+  align-items:center;
+  gap:8px;
+  display:flex
+}
+.tool-status i,.auto-note i {
+  background:#25a96a;
+  border-radius:50%;
+  width:6px;
+  height:6px
+}
+.gradient-layout {
+  grid-template-columns:minmax(360px,.7fr) minmax(0,1.3fr);
+  align-items:start;
+  gap:56px;
+  display:grid
+}
+.settings-panel,.gradient-preview {
+  background:var(--panel);
+  border:1px solid var(--line)
+}
+.panel-heading,.preview-toolbar {
+  border-bottom:1px solid var(--line);
+  justify-content:space-between;
+  align-items:center;
+  padding:18px 20px;
+  display:flex
+}
+.panel-heading strong,.preview-toolbar strong {
+  font:600 14px var(--font-mono);
+  margin-top:5px;
+  display:block
+}
+.setting-group {
+  border-bottom:1px solid var(--line);
+  padding:22px 20px
+}
+.setting-group label {
+  font:10px var(--font-mono);
+  letter-spacing:.1em;
+  color:var(--muted);
+  justify-content:space-between;
+  margin-bottom:12px;
+  display:flex
+}
+.setting-group output {
+  color:var(--blue)
+}
+.color-row {
+  align-items:center;
+  gap:10px;
+  display:flex
+}
+.color-row .color-field {
+  flex:1
+}
+.stop-arrow {
+  color:var(--muted)
+}
+.gradient-bar {
+  border:1px solid var(--line);
+  height:14px;
+  margin-top:14px
+}
+.direction-grid {
+  grid-template-columns:repeat(4,1fr);
+  gap:6px;
+  margin-top:14px;
+  display:grid
+}
+.direction-grid button,.secondary-btn {
+  border:1px solid var(--line);
+  color:var(--muted);
+  font:10px var(--font-mono);
+  background:0 0;
+  padding:8px 6px
+}
+.direction-grid button.selected,.secondary-btn:hover {
+  background:var(--foreground);
+  color:var(--background)
+}
+.wide {
+  width:100%
+}
+.settings-footer {
+  justify-content:space-between;
+  align-items:center;
+  padding:16px 20px;
+  display:flex
+}
+.large-canvas {
+  background-color:#202a31;
+  background-image:linear-gradient(45deg,#29343c 25%,#0000 25%),linear-gradient(-45deg,#29343c 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#29343c 75%),linear-gradient(-45deg,#0000 75%,#29343c 75%);
+  background-position:0 0,0 14px,14px -14px,-14px 0;
+  background-size:28px 28px;
+  padding:24px
+}
+.gradient-art {
+  color:#fff;
+  min-height:clamp(420px,42vw,680px);
+  font:12px var(--font-mono);
+  place-content:center;
+  justify-items:center;
+  display:grid
+}
+.art-mark {
+  border:1px solid #ffffffa6;
+  place-items:center;
+  width:70px;
+  height:70px;
+  margin-bottom:12px;
+  font-size:16px;
+  display:grid
+}
+.code-block {
+  padding:16px 20px
+}
+.code-block>div {
+  justify-content:space-between;
+  align-items:center;
+  display:flex
+}
+.code-block pre {
+  background:var(--background);
+  color:var(--blue);
+  font:12px/1.6 var(--font-mono);
+  white-space:pre-wrap;
+  margin:12px 0 0;
+  padding:14px
+}
+.preview-actions {
+  align-items:center;
+  gap:10px;
+  display:flex
+}
+.secondary-btn {
+  align-items:center;
+  gap:8px;
+  display:flex
+}
+.dark-mode .large-canvas {
+  background-color:#202a31
+}
+.remover-layout {
+  grid-template-columns:minmax(360px,.62fr) minmax(0,1.38fr);
+  align-items:start;
+  gap:56px;
+  display:grid
+}
+.remover-preview {
+  background:var(--panel);
+  border:1px solid var(--line);
+  min-width:0
+}
+.comparison-grid {
+  grid-template-columns:repeat(2,minmax(0,1fr));
+  gap:18px;
+  padding:20px;
+  display:grid
+}
+.image-card {
+  min-width:0
+}
+.image-label {
+  font:10px var(--font-mono);
+  color:var(--muted);
+  justify-content:space-between;
+  margin-bottom:10px;
+  display:flex
+}
+.image-label span {
+  color:var(--blue)
+}
+.image-label b {
+  font-weight:400
+}
+.remover-canvas {
+  border:1px solid var(--line);
+  place-items:center;
+  min-height:clamp(360px,30vw,560px);
+  display:grid;
+  position:relative;
+  overflow:hidden
+}
+.source-canvas {
+  background:#e8eef2
+}
+.subject {
+  color:#ffffffd9;
+  width:74%;
+  height:68%;
+  font:600 14px var(--font-mono);
+  text-shadow:0 1px 2px #17212b;
+  place-items:center;
+  transition:all .2s;
+  display:grid
+}
+.subject-source {
+  transform:rotate(-3deg)
+}
+.canvas-size {
+  font:9px var(--font-mono);
+  color:var(--muted);
+  position:absolute;
+  bottom:9px;
+  right:10px
+}
+.result-meta {
+  border-top:1px solid var(--line);
+  font:10px var(--font-mono);
+  color:var(--muted);
+  gap:24px;
+  padding:16px 20px;
+  display:flex
+}
+.result-meta b {
+  color:var(--foreground);
+  margin-left:6px;
+  font-weight:600
+}
+.processed {
+  color:#25a96a;
+  font:10px var(--font-mono);
+  align-items:center;
+  gap:5px;
+  display:flex
+}
+.color-reference,.range-hints {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  justify-content:space-between;
+  margin-top:10px;
+  display:flex
+}
+.color-reference {
+  justify-content:flex-start;
+  gap:8px
+}
+.color-reference span {
+  border:1px solid var(--line);
+  width:9px;
+  height:9px
+}
+.native-color {
+  width:30px;
+  border:0!important;
+  padding:0!important
+}
+.toggle-group label {
+  cursor:pointer;
+  align-items:center
+}
+.toggle-group input {
+  display:none
+}
+.toggle {
+  border:1px solid var(--line);
+  width:32px;
+  height:18px;
+  position:relative
+}
+.toggle:after {
+  content:"";
+  background:var(--muted);
+  width:10px;
+  height:10px;
+  transition:transform .2s;
+  position:absolute;
+  top:3px;
+  left:3px
+}
+.toggle-group input:checked+.toggle {
+  background:var(--blue);
+  border-color:var(--blue)
+}
+.toggle-group input:checked+.toggle:after {
+  background:#fff;
+  transform:translate(14px)
+}
+.toggle-group p {
+  color:var(--muted);
+  margin:8px 0 0;
+  font-size:12px;
+  line-height:1.5
+}
+.catalog-nav {
+  border-bottom:1px solid var(--line);
+  justify-content:space-between;
+  align-items:center;
+  gap:24px;
+  margin:-64px 0 64px;
+  padding:18px 0;
+  display:flex
+}
+.catalog-brand {
+  color:var(--foreground);
+  font:600 14px var(--font-mono);
+  text-decoration:none
+}
+.catalog-nav nav {
+  gap:24px;
+  display:flex
+}
+.catalog-nav nav a,.catalog-nav-status {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  text-decoration:none
+}
+.catalog-nav nav a:hover,.catalog-nav nav a.current {
+  color:var(--blue)
+}
+.catalog-nav-status {
+  color:#25a96a
+}
+.catalog-page {
+  width:100%;
+  max-width:1680px;
+  margin:0 auto;
+  padding:64px clamp(24px,4vw,72px) 72px
+}
+.catalog-head {
+  border-bottom:1px solid var(--line);
+  justify-content:space-between;
+  align-items:flex-end;
+  gap:40px;
+  padding-bottom:42px;
+  display:flex
+}
+.catalog-head h1 {
+  margin:12px 0 14px
+}
+.catalog-head p {
+  max-width:660px;
+  color:var(--muted);
+  font:14px/1.6 var(--font-mono);
+  margin:0
+}
+.catalog-total {
+  color:var(--muted);
+  font:10px/1.4 var(--font-mono);
+  text-align:right;
+  align-items:center;
+  gap:14px;
+  display:flex
+}
+.catalog-total b {
+  color:var(--blue);
+  font:400 clamp(48px,5vw,76px)/.9 var(--font-mono);
+  letter-spacing:-.08em
+}
+.catalog-toolbar {
+  justify-content:space-between;
+  align-items:center;
+  gap:24px;
+  padding:24px 0 42px;
+  display:flex
+}
+.catalog-search {
+  border:1px solid var(--line);
+  width:min(420px,100%);
+  color:var(--muted);
+  align-items:center;
+  gap:12px;
+  padding:12px 14px;
+  display:flex
+}
+.catalog-search input {
+  width:100%;
+  color:var(--foreground);
+  font:12px var(--font-mono);
+  background:0 0;
+  border:0;
+  outline:0
+}
+.catalog-filters {
+  color:var(--muted);
+  flex-wrap:wrap;
+  align-items:center;
+  gap:6px;
+  display:flex
+}
+.catalog-filters button {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  background:0 0;
+  border:1px solid #0000;
+  padding:8px 10px
+}
+.catalog-filters button:hover,.catalog-filters button.active {
+  border-color:var(--blue);
+  color:var(--blue)
+}
+.catalog-groups {
+  grid-template-columns:repeat(2,minmax(0,1fr));
+  gap:56px 28px;
+  display:grid
+}
+.catalog-group {
+  min-width:0
+}
+.group-title {
+  border-bottom:1px solid var(--line);
+  color:var(--foreground);
+  font:600 11px var(--font-mono);
+  letter-spacing:.12em;
+  justify-content:space-between;
+  align-items:center;
+  padding-bottom:12px;
+  display:flex
+}
+.group-title i {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  font-style:normal
+}
+.tool-cards {
+  gap:10px;
+  padding-top:14px;
+  display:grid
+}
+.tool-card {
+  border:1px solid var(--line);
+  background:var(--panel);
+  min-height:106px;
+  color:var(--foreground);
+  grid-template-columns:42px minmax(0,1fr) 24px 18px;
+  align-items:center;
+  gap:14px;
+  padding:16px;
+  text-decoration:none;
+  transition:border-color .18s,transform .18s,background .18s;
+  display:grid
+}
+.tool-card:hover {
+  border-color:var(--blue);
+  background:var(--panel-strong);
+  transform:translateY(-2px)
+}
+.tool-icon {
+  background:var(--blue);
+  place-items:center;
+  width:42px;
+  height:42px;
+  display:grid
+}
+@supports (color:color-mix(in lab, red, red)) {
+  .tool-icon {
+  background:color-mix(in srgb,var(--blue) 12%,transparent)
+}
+
+}
+.tool-icon {
+  color:var(--blue)
+}
+.tool-copy {
+  gap:8px;
+  min-width:0;
+  display:grid
+}
+.tool-copy strong {
+  font:600 13px var(--font-mono)
+}
+.tool-copy span {
+  color:var(--muted);
+  font:12px/1.5 var(--font-mono)
+}
+.tool-index {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  align-self:start
+}
+.tool-arrow {
+  color:var(--blue);
+  opacity:0;
+  transition:opacity .18s,transform .18s
+}
+.tool-card:hover .tool-arrow {
+  opacity:1;
+  transform:translate(2px,-2px)
+}
+.catalog-empty {
+  border:1px dashed var(--line);
+  color:var(--muted);
+  font:12px var(--font-mono);
+  align-items:center;
+  gap:10px;
+  padding:40px;
+  display:flex
+}
+.catalog-footer {
+  border-top:1px solid var(--line);
+  color:var(--muted);
+  font:10px var(--font-mono);
+  margin-top:64px;
+  padding-top:20px
+}
+.catalog-footer span {
+  color:var(--blue);
+  margin:0 8px
+}
+@media (max-width:800px) {
+  .catalog-nav {
+  margin:-36px 0 36px
+}
+.catalog-nav-status {
+  display:none
+}
+.catalog-nav nav {
+  gap:14px
+}
+.catalog-page {
+  padding:36px 16px 48px
+}
+.catalog-head {
+  flex-direction:column;
+  align-items:flex-start;
+  gap:24px
+}
+.catalog-total {
+  text-align:left
+}
+.catalog-toolbar {
+  flex-direction:column;
+  align-items:stretch;
+  padding-bottom:30px
+}
+.catalog-search {
+  width:100%
+}
+.catalog-groups {
+  grid-template-columns:1fr;
+  gap:36px
+}
+.tool-card {
+  grid-template-columns:38px minmax(0,1fr) 18px;
+  gap:12px;
+  min-height:96px
+}
+.tool-icon {
+  width:38px;
+  height:38px
+}
+.tool-index {
+  display:none
+}
+.tool-arrow {
+  opacity:1
+}
+.tool-page {
+  padding:36px 16px 48px
+}
+.tool-title {
+  display:block
+}
+.tool-status {
+  margin-top:22px
+}
+.gradient-layout,.remover-layout {
+  grid-template-columns:1fr;
+  gap:24px
+}
+.gradient-preview,.remover-preview {
+  order:-1
+}
+.gradient-art {
+  min-height:340px
+}
+.preview-toolbar {
+  flex-direction:column;
+  align-items:flex-start;
+  gap:16px
+}
+.preview-actions {
+  justify-content:flex-end;
+  width:100%
+}
+.comparison-grid {
+  grid-template-columns:1fr
+}
+.remover-canvas {
+  min-height:300px
+}
+.result-meta {
+  flex-wrap:wrap;
+  gap:12px 18px
+}
+
+}
+@property --tw-rotate-x {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-rotate-y {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-rotate-z {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-skew-x {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-skew-y {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-border-style {
+  syntax:"*";
+  inherits:false;
+  initial-value:solid
+}
+@property --tw-font-weight {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-shadow {
+  syntax:"*";
+  inherits:false;
+  initial-value:0 0 #0000
+}
+@property --tw-shadow-color {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-shadow-alpha {
+  syntax:"<percentage>";
+  inherits:false;
+  initial-value:100%
+}
+@property --tw-inset-shadow {
+  syntax:"*";
+  inherits:false;
+  initial-value:0 0 #0000
+}
+@property --tw-inset-shadow-color {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-inset-shadow-alpha {
+  syntax:"<percentage>";
+  inherits:false;
+  initial-value:100%
+}
+@property --tw-ring-color {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-ring-shadow {
+  syntax:"*";
+  inherits:false;
+  initial-value:0 0 #0000
+}
+@property --tw-inset-ring-color {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-inset-ring-shadow {
+  syntax:"*";
+  inherits:false;
+  initial-value:0 0 #0000
+}
+@property --tw-ring-inset {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-ring-offset-width {
+  syntax:"<length>";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-ring-offset-color {
+  syntax:"*";
+  inherits:false;
+  initial-value:#fff
+}
+@property --tw-ring-offset-shadow {
+  syntax:"*";
+  inherits:false;
+  initial-value:0 0 #0000
+}
+@property --tw-outline-style {
+  syntax:"*";
+  inherits:false;
+  initial-value:solid
+}
+@property --tw-blur {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-brightness {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-contrast {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-grayscale {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-hue-rotate {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-invert {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-opacity {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-saturate {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-sepia {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-drop-shadow {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-drop-shadow-color {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-drop-shadow-alpha {
+  syntax:"<percentage>";
+  inherits:false;
+  initial-value:100%
+}
+@property --tw-drop-shadow-size {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-translate-x {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-translate-y {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-translate-z {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+</style>
+    <meta name="theme-color" content="#eef1f4"/>
+    <meta name="color-scheme" content="light"/>
+    <title>easy-png-tools / Demo
+    </title>
+    <meta name="description" content="Technical workspace for building PNG processing pipelines."/>
+    <meta name="generator" content="easy-png-tools"/>
+  </head>
+  <body class="antialiased">
+    <div hidden="">
+      <!--$-->
+      <!--/$-->
+    </div>
+    <main class="app-shell">
+      <header class="topbar">
+        <div class="brand">
+          <span class="brand-mark">EP
+          </span>
+          <span>easy-png-tools
+          </span>
+          <span class="version">/ DEMO
+          </span>
+        </div>
+        <div class="top-actions">
+          <span class="status">
+            <i>
+            </i> AUTO PIPELINE
+          </span>
+          <button class="icon-btn" aria-label="Help">
+            <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-question-mark" aria-hidden="true">
+              <circle cx="12" cy="12" r="10">
+              </circle>
+              <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3">
+              </path>
+              <path d="M12 17h.01">
+              </path>
+            </svg>
+          </button>
+          <button class="icon-btn" aria-label="Toggle theme">
+            <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon" aria-hidden="true">
+              <path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401">
+              </path>
+            </svg>
+          </button>
+          <div class="language">
+            <button class="active">RU
+            </button>
+            <button class="">EN
+            </button>
+          </div>
+        </div>
+      </header>
+      <div class="page-grid">
+        <section class="workspace">
+          <div class="eyebrow">PNG PROCESSING 
+            <span>/
+            </span> WORKSPACE
+          </div>
+          <div class="title-row">
+            <div>
+              <h1>Build your image pipeline.
+              </h1>
+              <p class="lede">Chain simple tools together. Every change is processed automatically and previewed at each stage.
+              </p>
+            </div>
+            <div class="file-chip">
+              <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-upload" aria-hidden="true">
+                <path d="M12 3v12">
+                </path>
+                <path d="m17 8-5-5-5 5">
+                </path>
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4">
+                </path>
+              </svg>
+              <span>source.png
+              </span>
+              <b>1.8 MB
+              </b>
+            </div>
+          </div>
+          <div class="pipeline-head">
+            <div>
+              <span class="label">PROCESSING PIPELINE
+              </span>
+              <strong>4
+                <!-- --> active steps 
+                <em>• LIVE
+                </em>
+              </strong>
+            </div>
+            <button class="add-btn">
+              <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus" aria-hidden="true">
+                <path d="M5 12h14">
+                </path>
+                <path d="M12 5v14">
+                </path>
+              </svg> Add tool
+            </button>
+          </div>
+          <div class="steps-list">
+            <article class="step-card">
+              <div class="step-index">01
+              </div>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-grip-vertical drag" aria-hidden="true">
+                <circle cx="9" cy="12" r="1">
+                </circle>
+                <circle cx="9" cy="5" r="1">
+                </circle>
+                <circle cx="9" cy="19" r="1">
+                </circle>
+                <circle cx="15" cy="12" r="1">
+                </circle>
+                <circle cx="15" cy="5" r="1">
+                </circle>
+                <circle cx="15" cy="19" r="1">
+                </circle>
+              </svg>
+              <div class="step-body">
+                <div class="step-heading">
+                  <div>
+                    <span class="step-type">BACKGROUND
+                    </span>
+                    <h2>Gradient background
+                    </h2>
+                  </div>
+                  <div class="step-tools">
+                    <span class="check">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true">
+                        <path d="M20 6 9 17l-5-5">
+                        </path>
+                      </svg> AUTO
+                    </span>
+                    <button aria-label="Remove step">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
+                        <path d="M18 6 6 18">
+                        </path>
+                        <path d="m6 6 12 12">
+                        </path>
+                      </svg>
+                    </button>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis" aria-hidden="true">
+                      <circle cx="12" cy="12" r="1">
+                      </circle>
+                      <circle cx="19" cy="12" r="1">
+                      </circle>
+                      <circle cx="5" cy="12" r="1">
+                      </circle>
+                    </svg>
+                  </div>
+                </div>
+                <div class="controls">
+                  <div class="control-block">
+                    <label>COLOR
+                    </label>
+                    <div class="color-field">
+                      <span class="swatch" style="background:#DCEBFF">
+                      </span>
+                      <input aria-label="Gradient color" value="#DCEBFF"/>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true">
+                        <path d="m6 9 6 6 6-6">
+                        </path>
+                      </svg>
+                    </div>
+                  </div>
+                  <div class="control-block">
+                    <label>DIRECTION 
+                      <output>135
+                        <!-- -->°
+                      </output>
+                    </label>
+                    <input type="range" min="0" max="360" value="135"/>
+                  </div>
+                  <div class="control-block">
+                    <label>OPACITY 
+                      <output>100%
+                      </output>
+                    </label>
+                    <div class="segmented">
+                      <button class="selected">100
+                      </button>
+                      <button>75
+                      </button>
+                      <button>50
+                      </button>
+                      <button>25
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </article>
+            <article class="step-card">
+              <div class="step-index">02
+              </div>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-grip-vertical drag" aria-hidden="true">
+                <circle cx="9" cy="12" r="1">
+                </circle>
+                <circle cx="9" cy="5" r="1">
+                </circle>
+                <circle cx="9" cy="19" r="1">
+                </circle>
+                <circle cx="15" cy="12" r="1">
+                </circle>
+                <circle cx="15" cy="5" r="1">
+                </circle>
+                <circle cx="15" cy="19" r="1">
+                </circle>
+              </svg>
+              <div class="step-body">
+                <div class="step-heading">
+                  <div>
+                    <span class="step-type">TRANSFORM
+                    </span>
+                    <h2>Remove background
+                    </h2>
+                  </div>
+                  <div class="step-tools">
+                    <span class="check">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true">
+                        <path d="M20 6 9 17l-5-5">
+                        </path>
+                      </svg> AUTO
+                    </span>
+                    <button aria-label="Remove step">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
+                        <path d="M18 6 6 18">
+                        </path>
+                        <path d="m6 6 12 12">
+                        </path>
+                      </svg>
+                    </button>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis" aria-hidden="true">
+                      <circle cx="12" cy="12" r="1">
+                      </circle>
+                      <circle cx="19" cy="12" r="1">
+                      </circle>
+                      <circle cx="5" cy="12" r="1">
+                      </circle>
+                    </svg>
+                  </div>
+                </div>
+                <div class="transform-note">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sliders-horizontal" aria-hidden="true">
+                    <path d="M10 5H3">
+                    </path>
+                    <path d="M12 19H3">
+                    </path>
+                    <path d="M14 3v4">
+                    </path>
+                    <path d="M16 17v4">
+                    </path>
+                    <path d="M21 12h-9">
+                    </path>
+                    <path d="M21 19h-5">
+                    </path>
+                    <path d="M21 5h-7">
+                    </path>
+                    <path d="M8 10v4">
+                    </path>
+                    <path d="M8 12H3">
+                    </path>
+                  </svg> Automatic subject detection enabled
+                </div>
+              </div>
+            </article>
+            <article class="step-card">
+              <div class="step-index">03
+              </div>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-grip-vertical drag" aria-hidden="true">
+                <circle cx="9" cy="12" r="1">
+                </circle>
+                <circle cx="9" cy="5" r="1">
+                </circle>
+                <circle cx="9" cy="19" r="1">
+                </circle>
+                <circle cx="15" cy="12" r="1">
+                </circle>
+                <circle cx="15" cy="5" r="1">
+                </circle>
+                <circle cx="15" cy="19" r="1">
+                </circle>
+              </svg>
+              <div class="step-body">
+                <div class="step-heading">
+                  <div>
+                    <span class="step-type">STYLE
+                    </span>
+                    <h2>Add outline
+                    </h2>
+                  </div>
+                  <div class="step-tools">
+                    <span class="check">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true">
+                        <path d="M20 6 9 17l-5-5">
+                        </path>
+                      </svg> AUTO
+                    </span>
+                    <button aria-label="Remove step">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
+                        <path d="M18 6 6 18">
+                        </path>
+                        <path d="m6 6 12 12">
+                        </path>
+                      </svg>
+                    </button>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis" aria-hidden="true">
+                      <circle cx="12" cy="12" r="1">
+                      </circle>
+                      <circle cx="19" cy="12" r="1">
+                      </circle>
+                      <circle cx="5" cy="12" r="1">
+                      </circle>
+                    </svg>
+                  </div>
+                </div>
+                <div class="controls compact">
+                  <div class="control-block">
+                    <label>WIDTH 
+                      <output>2
+                        <!-- -->px
+                      </output>
+                    </label>
+                    <input type="range" min="0" max="8" value="2"/>
+                  </div>
+                  <div class="control-block">
+                    <label>COLOR
+                    </label>
+                    <div class="color-field">
+                      <span class="swatch dark">
+                      </span>
+                      <input readOnly="" value="#16202B"/>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </article>
+            <article class="step-card">
+              <div class="step-index">04
+              </div>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-grip-vertical drag" aria-hidden="true">
+                <circle cx="9" cy="12" r="1">
+                </circle>
+                <circle cx="9" cy="5" r="1">
+                </circle>
+                <circle cx="9" cy="19" r="1">
+                </circle>
+                <circle cx="15" cy="12" r="1">
+                </circle>
+                <circle cx="15" cy="5" r="1">
+                </circle>
+                <circle cx="15" cy="19" r="1">
+                </circle>
+              </svg>
+              <div class="step-body">
+                <div class="step-heading">
+                  <div>
+                    <span class="step-type">STYLE
+                    </span>
+                    <h2>Round corners
+                    </h2>
+                  </div>
+                  <div class="step-tools">
+                    <span class="check">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true">
+                        <path d="M20 6 9 17l-5-5">
+                        </path>
+                      </svg> AUTO
+                    </span>
+                    <button aria-label="Remove step">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
+                        <path d="M18 6 6 18">
+                        </path>
+                        <path d="m6 6 12 12">
+                        </path>
+                      </svg>
+                    </button>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis" aria-hidden="true">
+                      <circle cx="12" cy="12" r="1">
+                      </circle>
+                      <circle cx="19" cy="12" r="1">
+                      </circle>
+                      <circle cx="5" cy="12" r="1">
+                      </circle>
+                    </svg>
+                  </div>
+                </div>
+                <div class="controls compact">
+                  <div class="control-block">
+                    <label>RADIUS 
+                      <output>18
+                        <!-- -->px
+                      </output>
+                    </label>
+                    <input type="range" min="0" max="48" value="18"/>
+                  </div>
+                  <div class="toggle-row">
+                    <span>Preserve aspect ratio
+                    </span>
+                    <button class="toggle on" aria-label="Preserve aspect ratio">
+                      <i>
+                      </i>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </article>
+          </div>
+          <div class="pipeline-footer">
+            <button class="reset-btn">
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-ccw" aria-hidden="true">
+                <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8">
+                </path>
+                <path d="M3 3v5h5">
+                </path>
+              </svg> Reset pipeline
+            </button>
+            <span class="auto-note">
+              <i>
+              </i> changes are applied automatically
+            </span>
+          </div>
+        </section>
+        <section class="preview-panel">
+          <div class="preview-top">
+            <div>
+              <span class="label">PIPELINE OUTPUTS
+              </span>
+              <strong>Visual history
+              </strong>
+            </div>
+            <div class="preview-actions">
+              <button class="history-toggle top-toggle" aria-expanded="true">Hide intermediate
+                <!-- -->
+                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down rotated" aria-hidden="true">
+                  <path d="m6 9 6 6 6-6">
+                  </path>
+                </svg>
+              </button>
+              <button class="download-btn">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download" aria-hidden="true">
+                  <path d="M12 15V3">
+                  </path>
+                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4">
+                  </path>
+                  <path d="m7 10 5 5 5-5">
+                  </path>
+                </svg> Download result 
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down-to-line" aria-hidden="true">
+                  <path d="M12 17V3">
+                  </path>
+                  <path d="m6 11 6 6 6-6">
+                  </path>
+                  <path d="M19 21H5">
+                  </path>
+                </svg>
+              </button>
+              <div class="preview-meta">
+                <div>
+                  <span>DIMENSIONS
+                  </span>
+                  <b>1200 × 800 px
+                  </b>
+                </div>
+                <div>
+                  <span>FORMAT
+                  </span>
+                  <b>PNG-24
+                  </b>
+                </div>
+                <div>
+                  <span>SIZE
+                  </span>
+                  <b>1.2 MB
+                  </b>
+                </div>
+              </div>
+              <button class="icon-btn" aria-label="Preview settings">
+                <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings2 lucide-settings-2" aria-hidden="true">
+                  <path d="M14 17H5">
+                  </path>
+                  <path d="M19 7h-9">
+                  </path>
+                  <circle cx="17" cy="17" r="3">
+                  </circle>
+                  <circle cx="7" cy="7" r="3">
+                  </circle>
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div class="preview-stack">
+            <div class="preview-tile ">
+              <div class="tile-canvas">
+                <div class="image-preview" style="background:#8d9aa5">
+                  <span class="sample-icon">PNG
+                  </span>
+                  <span>easy-png-tools
+                  </span>
+                </div>
+              </div>
+              <div class="tile-label">
+                <span>SOURCE
+                </span>
+                <b>original.png · 1200 × 800
+                </b>
+              </div>
+            </div>
+            <div class="preview-tile ">
+              <div class="tile-canvas">
+                <div class="image-preview" style="background:linear-gradient(135deg, #DCEBFF, #8BC8F5)">
+                  <span class="sample-icon">PNG
+                  </span>
+                  <span>easy-png-tools
+                  </span>
+                </div>
+              </div>
+              <div class="tile-label">
+                <span>STEP 01
+                </span>
+                <b>gradient applied
+                </b>
+              </div>
+            </div>
+            <div class="preview-tile ">
+              <div class="tile-canvas">
+                <div class="image-preview" style="background:linear-gradient(135deg, #DCEBFF, #8BC8F5);clip-path:inset(10% 8% 10% 8% round 12px)">
+                  <span class="sample-icon">PNG
+                  </span>
+                  <span>easy-png-tools
+                  </span>
+                </div>
+              </div>
+              <div class="tile-label">
+                <span>STEP 02
+                </span>
+                <b>background removed
+                </b>
+              </div>
+            </div>
+            <div class="preview-tile ">
+              <div class="tile-canvas">
+                <div class="image-preview" style="background:linear-gradient(135deg, #DCEBFF, #8BC8F5);box-shadow:0 0 0 2px #16202B">
+                  <span class="sample-icon">PNG
+                  </span>
+                  <span>easy-png-tools
+                  </span>
+                </div>
+              </div>
+              <div class="tile-label">
+                <span>STEP 03
+                </span>
+                <b>outline added
+                </b>
+              </div>
+            </div>
+            <div class="preview-tile active">
+              <div class="tile-canvas">
+                <div class="image-preview" style="background:linear-gradient(135deg, #DCEBFF, #8BC8F5);border-radius:18px;box-shadow:0 0 0 2px #16202B">
+                  <span class="sample-icon">PNG
+                  </span>
+                  <span>easy-png-tools
+                  </span>
+                </div>
+              </div>
+              <div class="tile-label">
+                <span>FINAL OUTPUT
+                </span>
+                <b>ready · PNG-24
+                </b>
+              </div>
+            </div>
+          </div>
+          <p class="preview-note">Output is generated in-browser. Your files never leave this device.
+          </p>
+        </section>
+      </div>
+      <footer class="footer">
+        <span>easy-png-tools 
+          <b>v2.4.0
+          </b>
+        </span>
+        <span>
+          <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link2 lucide-link-2" aria-hidden="true">
+            <path d="M9 17H7A5 5 0 0 1 7 7h2">
+            </path>
+            <path d="M15 7h2a5 5 0 1 1 0 10h-2">
+            </path>
+            <line x1="8" x2="16" y1="12" y2="12">
+            </line>
+          </svg> pipeline is local-only
+        </span>
+        <span>© 2024
+        </span>
+      </footer>
+    </main>
+    <!--$-->
+    <!--/$-->
+    <!--$!-->
+    <template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING">
+    </template>
+    <!--/$-->
+  </body>
+</html>
\ No newline at end of file
diff --git a/refs-html/list-tools.html b/refs-html/list-tools.html
new file mode 100644
index 0000000..cf0ea3a
--- /dev/null
+++ b/refs-html/list-tools.html
@@ -0,0 +1,2912 @@
+<!DOCTYPE html>
+<html lang="ru" class="bg-background">
+  <head>
+    <meta charSet="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <style>
+@layer properties {
+  @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
+  *,:before,:after,::backdrop {
+  --tw-rotate-x:initial;
+  --tw-rotate-y:initial;
+  --tw-rotate-z:initial;
+  --tw-skew-x:initial;
+  --tw-skew-y:initial;
+  --tw-border-style:solid;
+  --tw-font-weight:initial;
+  --tw-shadow:0 0 #0000;
+  --tw-shadow-color:initial;
+  --tw-shadow-alpha:100%;
+  --tw-inset-shadow:0 0 #0000;
+  --tw-inset-shadow-color:initial;
+  --tw-inset-shadow-alpha:100%;
+  --tw-ring-color:initial;
+  --tw-ring-shadow:0 0 #0000;
+  --tw-inset-ring-color:initial;
+  --tw-inset-ring-shadow:0 0 #0000;
+  --tw-ring-inset:initial;
+  --tw-ring-offset-width:0px;
+  --tw-ring-offset-color:#fff;
+  --tw-ring-offset-shadow:0 0 #0000;
+  --tw-outline-style:solid;
+  --tw-blur:initial;
+  --tw-brightness:initial;
+  --tw-contrast:initial;
+  --tw-grayscale:initial;
+  --tw-hue-rotate:initial;
+  --tw-invert:initial;
+  --tw-opacity:initial;
+  --tw-saturate:initial;
+  --tw-sepia:initial;
+  --tw-drop-shadow:initial;
+  --tw-drop-shadow-color:initial;
+  --tw-drop-shadow-alpha:100%;
+  --tw-drop-shadow-size:initial;
+  --tw-translate-x:0;
+  --tw-translate-y:0;
+  --tw-translate-z:0;
+  --tw-animation-delay:0s;
+  --tw-animation-direction:normal;
+  --tw-animation-duration:initial;
+  --tw-animation-fill-mode:none;
+  --tw-animation-iteration-count:1;
+  --tw-enter-blur:0;
+  --tw-enter-opacity:1;
+  --tw-enter-rotate:0;
+  --tw-enter-scale:1;
+  --tw-enter-translate-x:0;
+  --tw-enter-translate-y:0;
+  --tw-exit-blur:0;
+  --tw-exit-opacity:1;
+  --tw-exit-rotate:0;
+  --tw-exit-scale:1;
+  --tw-exit-translate-x:0;
+  --tw-exit-translate-y:0
+}
+
+}
+
+}
+@layer theme {
+  :root,:host {
+  --font-sans:"IBM Plex Sans", sans-serif;
+  --font-mono:"IBM Plex Mono", monospace;
+  --spacing:.25rem;
+  --text-xs:.75rem;
+  --text-xs--line-height:calc(1 / .75);
+  --text-sm:.875rem;
+  --text-sm--line-height:calc(1.25 / .875);
+  --font-weight-medium:500;
+  --radius-md:.375rem;
+  --radius-lg:.5rem;
+  --default-transition-duration:.15s;
+  --default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);
+  --default-font-family:"IBM Plex Sans", sans-serif;
+  --default-mono-font-family:"IBM Plex Mono", monospace
+}
+
+}
+@layer base {
+  *,:after,:before,::backdrop {
+  box-sizing:border-box;
+  border:0 solid;
+  margin:0;
+  padding:0
+}
+::file-selector-button {
+  box-sizing:border-box;
+  border:0 solid;
+  margin:0;
+  padding:0
+}
+html,:host {
+  -webkit-text-size-adjust:100%;
+  tab-size:4;
+  line-height:1.5;
+  font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+  font-feature-settings:var(--default-font-feature-settings,normal);
+  font-variation-settings:var(--default-font-variation-settings,normal);
+  -webkit-tap-highlight-color:transparent
+}
+hr {
+  height:0;
+  color:inherit;
+  border-top-width:1px
+}
+abbr:where([title]) {
+  -webkit-text-decoration:underline dotted;
+  text-decoration:underline dotted
+}
+h1,h2,h3,h4,h5,h6 {
+  font-size:inherit;
+  font-weight:inherit
+}
+a {
+  color:inherit;
+  -webkit-text-decoration:inherit;
+  -webkit-text-decoration:inherit;
+  -webkit-text-decoration:inherit;
+  -webkit-text-decoration:inherit;
+  text-decoration:inherit
+}
+b,strong {
+  font-weight:bolder
+}
+code,kbd,samp,pre {
+  font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+  font-feature-settings:var(--default-mono-font-feature-settings,normal);
+  font-variation-settings:var(--default-mono-font-variation-settings,normal);
+  font-size:1em
+}
+small {
+  font-size:80%
+}
+sub,sup {
+  vertical-align:baseline;
+  font-size:75%;
+  line-height:0;
+  position:relative
+}
+sub {
+  bottom:-.25em
+}
+sup {
+  top:-.5em
+}
+table {
+  text-indent:0;
+  border-color:inherit;
+  border-collapse:collapse
+}
+:-moz-focusring:where(:not(iframe)) {
+  outline:auto
+}
+progress {
+  vertical-align:baseline
+}
+summary {
+  display:list-item
+}
+ol,ul,menu {
+  list-style:none
+}
+img,svg,video,canvas,audio,iframe,embed,object {
+  vertical-align:middle;
+  display:block
+}
+img,video {
+  max-width:100%;
+  height:auto
+}
+button,input,select,optgroup,textarea {
+  font:inherit;
+  font-feature-settings:inherit;
+  font-variation-settings:inherit;
+  letter-spacing:inherit;
+  color:inherit;
+  opacity:1;
+  background-color:#0000;
+  border-radius:0
+}
+::file-selector-button {
+  font:inherit;
+  font-feature-settings:inherit;
+  font-variation-settings:inherit;
+  letter-spacing:inherit;
+  color:inherit;
+  opacity:1;
+  background-color:#0000;
+  border-radius:0
+}
+:where(select:is([multiple],[size])) optgroup {
+  font-weight:bolder
+}
+:where(select:is([multiple],[size])) optgroup option {
+  padding-inline-start:20px
+}
+::file-selector-button {
+  margin-inline-end:4px
+}
+::placeholder {
+  opacity:1
+}
+@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
+  ::placeholder {
+  color:currentColor
+}
+@supports (color:color-mix(in lab, red, red)) {
+  ::placeholder {
+  color:color-mix(in oklab, currentcolor 50%, transparent)
+}
+
+}
+
+}
+textarea {
+  resize:vertical
+}
+::-webkit-search-decoration {
+  -webkit-appearance:none
+}
+::-webkit-date-and-time-value {
+  min-height:1lh;
+  text-align:inherit
+}
+::-webkit-datetime-edit {
+  display:inline-flex
+}
+::-webkit-datetime-edit-fields-wrapper {
+  padding:0
+}
+::-webkit-datetime-edit {
+  padding-block:0
+}
+::-webkit-datetime-edit-year-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-month-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-day-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-hour-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-minute-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-second-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-millisecond-field {
+  padding-block:0
+}
+::-webkit-datetime-edit-meridiem-field {
+  padding-block:0
+}
+::-webkit-calendar-picker-indicator {
+  line-height:1
+}
+:-moz-ui-invalid {
+  box-shadow:none
+}
+button,input:where([type=button],[type=reset],[type=submit]) {
+  appearance:button
+}
+::file-selector-button {
+  appearance:button
+}
+::-webkit-inner-spin-button {
+  height:auto
+}
+::-webkit-outer-spin-button {
+  height:auto
+}
+[hidden]:where(:not([hidden=until-found])) {
+  display:none!important
+}
+
+}
+@layer components;
+  @layer utilities {
+  .static {
+  position:static
+}
+.inline {
+  display:inline
+}
+.inline-flex {
+  display:inline-flex
+}
+.size-6 {
+  width:calc(var(--spacing) * 6);
+  height:calc(var(--spacing) * 6)
+}
+.size-7 {
+  width:calc(var(--spacing) * 7);
+  height:calc(var(--spacing) * 7)
+}
+.size-8 {
+  width:calc(var(--spacing) * 8);
+  height:calc(var(--spacing) * 8)
+}
+.size-9 {
+  width:calc(var(--spacing) * 9);
+  height:calc(var(--spacing) * 9)
+}
+.h-6 {
+  height:calc(var(--spacing) * 6)
+}
+.h-7 {
+  height:calc(var(--spacing) * 7)
+}
+.h-8 {
+  height:calc(var(--spacing) * 8)
+}
+.h-9 {
+  height:calc(var(--spacing) * 9)
+}
+.shrink-0 {
+  flex-shrink:0
+}
+.transform {
+  transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)
+}
+.items-center {
+  align-items:center
+}
+.justify-center {
+  justify-content:center
+}
+.gap-1 {
+  gap:var(--spacing)
+}
+.gap-1\.5 {
+  gap:calc(var(--spacing) * 1.5)
+}
+.rounded-\[min\(var\(--radius-md\)\,10px\)\] {
+  border-radius:min(var(--radius-md), 10px)
+}
+.rounded-\[min\(var\(--radius-md\)\,12px\)\] {
+  border-radius:min(var(--radius-md), 12px)
+}
+.rounded-lg {
+  border-radius:var(--radius-lg)
+}
+.border {
+  border-style:var(--tw-border-style);
+  border-width:1px
+}
+.border-border {
+  border-color:var(--line)
+}
+.border-transparent {
+  border-color:#0000
+}
+.bg-background {
+  background-color:var(--background)
+}
+.bg-clip-padding {
+  background-clip:padding-box
+}
+.px-2 {
+  padding-inline:calc(var(--spacing) * 2)
+}
+.px-2\.5 {
+  padding-inline:calc(var(--spacing) * 2.5)
+}
+.text-sm {
+  font-size:var(--text-sm);
+  line-height:var(--tw-leading,var(--text-sm--line-height))
+}
+.text-xs {
+  font-size:var(--text-xs);
+  line-height:var(--tw-leading,var(--text-xs--line-height))
+}
+.text-\[0\.8rem\] {
+  font-size:.8rem
+}
+.font-medium {
+  --tw-font-weight:var(--font-weight-medium);
+  font-weight:var(--font-weight-medium)
+}
+.whitespace-nowrap {
+  white-space:nowrap
+}
+.underline-offset-4 {
+  text-underline-offset:4px
+}
+.antialiased {
+  -webkit-font-smoothing:antialiased;
+  -moz-osx-font-smoothing:grayscale
+}
+.ring {
+  --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
+  box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
+}
+.outline {
+  outline-style:var(--tw-outline-style);
+  outline-width:1px
+}
+.blur {
+  --tw-blur:blur(8px);
+  filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
+}
+.grayscale {
+  --tw-grayscale:grayscale(100%);
+  filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
+}
+.transition {
+  transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
+  transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));
+  transition-duration:var(--tw-duration,var(--default-transition-duration))
+}
+.transition-all {
+  transition-property:all;
+  transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));
+  transition-duration:var(--tw-duration,var(--default-transition-duration))
+}
+.outline-none {
+  --tw-outline-style:none;
+  outline-style:none
+}
+.select-none {
+  -webkit-user-select:none;
+  user-select:none
+}
+@media (hover:hover) {
+  .hover\:text-foreground:hover {
+  color:var(--foreground)
+}
+.hover\:underline:hover {
+  text-decoration-line:underline
+}
+
+}
+.focus-visible\:ring-3:focus-visible {
+  --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
+  box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
+}
+.active\:not-aria-\[haspopup\]\:translate-y-px:active:not([aria-haspopup]) {
+  --tw-translate-y:1px;
+  translate:var(--tw-translate-x) var(--tw-translate-y)
+}
+.disabled\:pointer-events-none:disabled {
+  pointer-events:none
+}
+.disabled\:opacity-50:disabled {
+  opacity:.5
+}
+:where([data-slot=button-group]) .in-data-\[slot\=button-group\]\:rounded-lg {
+  border-radius:var(--radius-lg)
+}
+.has-data-\[icon\=inline-end\]\:pr-1\.5:has([data-icon=inline-end]) {
+  padding-right:calc(var(--spacing) * 1.5)
+}
+.has-data-\[icon\=inline-end\]\:pr-2:has([data-icon=inline-end]) {
+  padding-right:calc(var(--spacing) * 2)
+}
+.has-data-\[icon\=inline-start\]\:pl-1\.5:has([data-icon=inline-start]) {
+  padding-left:calc(var(--spacing) * 1.5)
+}
+.has-data-\[icon\=inline-start\]\:pl-2:has([data-icon=inline-start]) {
+  padding-left:calc(var(--spacing) * 2)
+}
+.aria-expanded\:text-foreground[aria-expanded=true] {
+  color:var(--foreground)
+}
+.aria-invalid\:ring-3[aria-invalid=true] {
+  --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
+  box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
+}
+.\[\&_svg\]\:pointer-events-none svg {
+  pointer-events:none
+}
+.\[\&_svg\]\:shrink-0 svg {
+  flex-shrink:0
+}
+.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3 svg:not([class*=size-]) {
+  width:calc(var(--spacing) * 3);
+  height:calc(var(--spacing) * 3)
+}
+.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5 svg:not([class*=size-]) {
+  width:calc(var(--spacing) * 3.5);
+  height:calc(var(--spacing) * 3.5)
+}
+.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]) {
+  width:calc(var(--spacing) * 4);
+  height:calc(var(--spacing) * 4)
+}
+
+}
+@property --tw-animation-delay {
+  syntax:"*";
+  inherits:false;
+  initial-value:0s
+}
+@property --tw-animation-direction {
+  syntax:"*";
+  inherits:false;
+  initial-value:normal
+}
+@property --tw-animation-duration {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-animation-fill-mode {
+  syntax:"*";
+  inherits:false;
+  initial-value:none
+}
+@property --tw-animation-iteration-count {
+  syntax:"*";
+  inherits:false;
+  initial-value:1
+}
+@property --tw-enter-blur {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-enter-opacity {
+  syntax:"*";
+  inherits:false;
+  initial-value:1
+}
+@property --tw-enter-rotate {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-enter-scale {
+  syntax:"*";
+  inherits:false;
+  initial-value:1
+}
+@property --tw-enter-translate-x {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-enter-translate-y {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-exit-blur {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-exit-opacity {
+  syntax:"*";
+  inherits:false;
+  initial-value:1
+}
+@property --tw-exit-rotate {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-exit-scale {
+  syntax:"*";
+  inherits:false;
+  initial-value:1
+}
+@property --tw-exit-translate-x {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-exit-translate-y {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+:root {
+  --lightningcss-light:initial;
+  --lightningcss-dark: ;
+  color-scheme:light;
+  --background:#eef1f4;
+  --foreground:#17212b;
+  --panel:#f8fafb;
+  --line:#cbd3da;
+  --muted:#6d7883;
+  --blue:#1769d2;
+  --cyan:#00a8c7;
+  --amber:#bd7411;
+  --radius:4px
+}
+* {
+  box-sizing:border-box;
+  border-color:var(--line)
+}
+html {
+  background:var(--background)
+}
+body {
+  background:var(--background);
+  color:var(--foreground);
+  font-family:var(--font-sans);
+  margin:0
+}
+button,input {
+  font:inherit
+}
+button {
+  cursor:pointer
+}
+.app-shell {
+  background-color:var(--background);
+  background-image:linear-gradient(#dce2e7 1px,#0000 1px),linear-gradient(90deg,#dce2e7 1px,#0000 1px);
+  background-size:32px 32px;
+  min-height:100vh
+}
+.dark-mode {
+  --background:#11171d;
+  --foreground:#e8eef2;
+  --panel:#182129;
+  --line:#33414c;
+  --muted:#91a0ac;
+  --blue:#54a2ff;
+  background-image:linear-gradient(#1b252d 1px,#0000 1px),linear-gradient(90deg,#1b252d 1px,#0000 1px)
+}
+.topbar,.brand,.top-actions,.language,.status,.title-row,.pipeline-head,.step-heading,.step-tools,.pipeline-footer,.preview-top,.footer {
+  align-items:center;
+  display:flex
+}
+.topbar {
+  border-bottom:1px solid var(--line);
+  background:var(--panel);
+  justify-content:space-between;
+  height:64px;
+  padding:0 clamp(20px,4vw,64px)
+}
+.brand {
+  font:600 14px var(--font-mono);
+  gap:10px
+}
+.brand-mark {
+  background:var(--blue);
+  color:#fff;
+  place-items:center;
+  width:30px;
+  height:30px;
+  font-size:11px;
+  display:grid
+}
+.version,.label,.step-type,.eyebrow {
+  font:10px var(--font-mono);
+  letter-spacing:.12em;
+  color:var(--muted)
+}
+.version,.eyebrow {
+  color:var(--blue)
+}
+.top-actions {
+  gap:16px
+}
+.status {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  letter-spacing:.08em;
+  gap:7px
+}
+.status i,.auto-note i {
+  background:#25a96a;
+  border-radius:50%;
+  width:6px;
+  height:6px
+}
+.icon-btn {
+  color:var(--muted);
+  background:0 0;
+  border:0;
+  place-items:center;
+  padding:6px;
+  display:grid
+}
+.language {
+  border:1px solid var(--line)
+}
+.language button {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  background:0 0;
+  border:0;
+  padding:6px 9px
+}
+.language .active {
+  background:var(--foreground);
+  color:var(--background)
+}
+.page-grid {
+  grid-template-columns:minmax(0,1.05fr) minmax(520px,.95fr);
+  align-items:start;
+  gap:56px;
+  width:100%;
+  max-width:none;
+  margin:auto;
+  padding:60px clamp(24px,4vw,72px) 72px;
+  display:grid
+}
+.preview-panel {
+  min-width:0;
+  margin-top:0;
+  position:sticky;
+  top:24px
+}
+.preview-meta {
+  gap:24px;
+  display:flex
+}
+.preview-meta div {
+  gap:5px;
+  display:grid
+}
+.preview-meta span {
+  font:10px var(--font-mono);
+  color:var(--muted)
+}
+.preview-meta b {
+  font:600 11px var(--font-mono)
+}
+.workspace,.preview-panel {
+  min-width:0
+}
+.preview-stack {
+  grid-template-columns:repeat(2,minmax(0,1fr));
+  gap:18px;
+  width:100%;
+  min-width:0;
+  display:grid
+}
+.preview-tile {
+  width:100%;
+  min-width:0;
+  overflow:hidden
+}
+.history-toggle {
+  border:1px solid var(--line);
+  width:100%;
+  color:var(--muted);
+  font:10px var(--font-mono);
+  letter-spacing:.04em;
+  background:0 0;
+  justify-content:center;
+  align-items:center;
+  gap:8px;
+  margin-top:18px;
+  padding:11px 14px;
+  display:flex
+}
+.history-toggle:hover {
+  color:var(--foreground);
+  background:var(--panel)
+}
+.top-toggle {
+  width:auto;
+  margin:0;
+  padding:8px 10px
+}
+.history-toggle .rotated {
+  transform:rotate(180deg)
+}
+.tile-canvas {
+  width:100%;
+  min-width:0;
+  min-height:clamp(300px,22vw,430px);
+  overflow:hidden
+}
+.image-preview {
+  min-width:0;
+  max-width:100%;
+  overflow:hidden
+}
+.eyebrow {
+  margin-bottom:18px
+}
+.eyebrow span {
+  color:var(--muted);
+  margin:0 7px
+}
+.title-row {
+  justify-content:space-between;
+  align-items:flex-end;
+  gap:30px;
+  margin-bottom:56px
+}
+h1 {
+  letter-spacing:-.06em;
+  max-width:700px;
+  margin:0 0 16px;
+  font-size:clamp(36px,4vw,64px);
+  font-weight:650;
+  line-height:1
+}
+.lede {
+  color:var(--muted);
+  max-width:550px;
+  margin:0;
+  line-height:1.6
+}
+.file-chip {
+  white-space:nowrap;
+  border:1px solid var(--line);
+  background:var(--panel);
+  font:11px var(--font-mono);
+  color:var(--muted);
+  align-items:center;
+  gap:8px;
+  padding:10px 12px;
+  display:flex
+}
+.file-chip b {
+  color:var(--blue);
+  font-weight:500
+}
+.pipeline-head {
+  border-bottom:1px solid var(--line);
+  justify-content:space-between;
+  padding-bottom:12px
+}
+.pipeline-head strong,.preview-top strong {
+  font:600 14px var(--font-mono);
+  margin-top:5px;
+  display:block
+}
+.pipeline-head em {
+  color:#25a96a;
+  font-size:10px;
+  font-style:normal
+}
+.add-btn,.reset-btn {
+  color:var(--blue);
+  background:0 0;
+  border:0;
+  align-items:center;
+  gap:7px;
+  font-size:12px;
+  display:flex
+}
+.steps-list {
+  gap:10px;
+  padding-top:14px;
+  display:grid
+}
+.step-card {
+  border:1px solid var(--line);
+  background:var(--panel);
+  grid-template-columns:46px 20px 1fr;
+  min-height:138px;
+  display:grid
+}
+.step-index {
+  font:11px var(--font-mono);
+  color:var(--blue);
+  padding:17px 0 0 15px
+}
+.drag {
+  color:var(--line);
+  margin-top:17px
+}
+.step-body {
+  padding:15px 18px 18px
+}
+.step-heading {
+  justify-content:space-between;
+  gap:15px
+}
+.step-heading h2 {
+  font:600 15px var(--font-mono);
+  margin:5px 0 18px
+}
+.step-tools {
+  gap:13px
+}
+.step-tools button {
+  color:var(--muted);
+  background:0 0;
+  border:0
+}
+.check {
+  color:#238354;
+  font:10px var(--font-mono);
+  align-items:center;
+  gap:4px;
+  display:flex
+}
+.controls {
+  grid-template-columns:1.1fr 1fr 1.2fr;
+  gap:16px;
+  display:grid
+}
+.controls.compact {
+  grid-template-columns:1fr 1fr
+}
+.control-block label {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  letter-spacing:.08em;
+  justify-content:space-between;
+  margin-bottom:8px;
+  display:flex
+}
+.control-block output {
+  color:var(--foreground)
+}
+.color-field {
+  border:1px solid var(--line);
+  align-items:center;
+  gap:8px;
+  height:32px;
+  padding:0 8px;
+  display:flex
+}
+.swatch {
+  border:1px solid var(--line);
+  width:14px;
+  height:14px
+}
+.swatch.dark {
+  background:#16202b
+}
+.color-field input {
+  min-width:0;
+  color:var(--foreground);
+  font:11px var(--font-mono);
+  background:0 0;
+  border:0;
+  outline:0;
+  flex:1
+}
+.control-block input[type=range] {
+  width:100%;
+  accent-color:var(--blue)
+}
+.segmented {
+  border:1px solid var(--line);
+  height:32px;
+  display:flex
+}
+.segmented button {
+  border:0;
+  border-right:1px solid var(--line);
+  color:var(--muted);
+  font:10px var(--font-mono);
+  background:0 0;
+  flex:1
+}
+.segmented .selected {
+  background:var(--blue);
+  color:#fff
+}
+.transform-note,.auto-note {
+  color:var(--muted);
+  font:11px var(--font-mono);
+  align-items:center;
+  gap:8px;
+  display:flex
+}
+.pipeline-footer {
+  justify-content:space-between;
+  padding-top:18px
+}
+.auto-note {
+  color:var(--muted)
+}
+.auto-note i {
+  display:inline-block
+}
+.preview-panel {
+  border:1px solid var(--line);
+  background:var(--panel);
+  align-self:start;
+  padding:18px;
+  position:sticky;
+  top:24px
+}
+.preview-top {
+  border-bottom:1px solid var(--line);
+  justify-content:space-between;
+  padding-bottom:15px
+}
+.preview-stack {
+  grid-template-columns:1fr 1fr;
+  gap:12px;
+  padding:16px 0;
+  display:grid
+}
+.preview-tile {
+  border:1px solid var(--line);
+  background:var(--background)
+}
+.preview-tile.active {
+  border-color:var(--blue)
+}
+.tile-canvas {
+  aspect-ratio:1.35;
+  background-color:#e4e8eb;
+  background-image:linear-gradient(45deg,#d2d8dc 25%,#0000 25%),linear-gradient(-45deg,#d2d8dc 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#d2d8dc 75%),linear-gradient(-45deg,#0000 75%,#d2d8dc 75%);
+  background-position:0 0,0 7px,7px -7px,-7px 0;
+  background-size:14px 14px;
+  place-items:center;
+  padding:16px;
+  display:grid
+}
+.image-preview {
+  aspect-ratio:1.5;
+  color:#16202b;
+  width:80%;
+  font:600 10px var(--font-mono);
+  flex-direction:column;
+  justify-content:center;
+  align-items:center;
+  gap:5px;
+  display:flex
+}
+.sample-icon {
+  border:1px solid;
+  padding:3px 5px;
+  font-size:9px
+}
+.tile-label {
+  border-top:1px solid var(--line);
+  font:9px var(--font-mono);
+  color:var(--blue);
+  justify-content:space-between;
+  gap:8px;
+  padding:8px;
+  display:flex
+}
+.tile-label b {
+  color:var(--muted);
+  text-align:right;
+  font-weight:400
+}
+.preview-meta {
+  border-top:1px solid var(--line);
+  grid-template-columns:repeat(3,1fr);
+  gap:8px;
+  padding-top:14px;
+  display:grid
+}
+.preview-meta span {
+  color:var(--muted);
+  font:9px var(--font-mono);
+  display:block
+}
+.preview-meta b {
+  font:11px var(--font-mono);
+  margin-top:5px;
+  display:block
+}
+.download-btn {
+  background:var(--blue);
+  color:#fff;
+  width:100%;
+  height:42px;
+  font:11px var(--font-mono);
+  border:0;
+  justify-content:center;
+  align-items:center;
+  gap:9px;
+  margin-top:18px;
+  display:flex
+}
+.preview-note {
+  color:var(--muted);
+  margin:12px 0 0;
+  font-size:11px;
+  line-height:1.5
+}
+.footer {
+  border-top:1px solid var(--line);
+  color:var(--muted);
+  font:10px var(--font-mono);
+  justify-content:space-between;
+  padding:16px clamp(20px,4vw,72px)
+}
+.footer span {
+  align-items:center;
+  gap:7px;
+  display:flex
+}
+.footer b {
+  color:var(--blue);
+  font-weight:400
+}
+@media (max-width:1200px) {
+  .page-grid {
+  grid-template-columns:minmax(0,1fr) minmax(420px,.9fr);
+  gap:32px
+}
+
+}
+.dark-mode .tile-canvas {
+  background-color:#202a31;
+  background-image:linear-gradient(45deg,#29343c 25%,#0000 25%),linear-gradient(-45deg,#29343c 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#29343c 75%),linear-gradient(-45deg,#0000 75%,#29343c 75%)
+}
+.dark-mode .image-preview {
+  color:#16202b
+}
+@media (max-width:800px) {
+  .topbar {
+  padding:0 16px
+}
+.status {
+  display:none
+}
+.page-grid {
+  padding:36px 16px 48px;
+  display:block
+}
+.title-row {
+  margin-bottom:40px;
+  display:block
+}
+.file-chip {
+  width:max-content;
+  margin-top:22px
+}
+.controls,.controls.compact {
+  grid-template-columns:1fr
+}
+.preview-panel {
+  margin-top:36px;
+  position:static
+}
+.footer {
+  flex-wrap:wrap;
+  gap:12px;
+  padding:0 16px 20px
+}
+.footer span:last-child {
+  display:none
+}
+
+}
+@media (max-width:1100px) {
+  .preview-stack {
+  grid-template-columns:repeat(3,minmax(220px,1fr))
+}
+
+}
+.preview-actions {
+  flex-wrap:wrap;
+  justify-content:flex-end
+}
+.download-btn {
+  white-space:nowrap
+}
+@media (max-width:800px) {
+  .preview-top {
+  flex-direction:column;
+  align-items:flex-start;
+  gap:18px
+}
+.preview-actions {
+  justify-content:space-between;
+  width:100%
+}
+.preview-meta {
+  gap:14px
+}
+.preview-stack {
+  grid-template-columns:repeat(2,minmax(0,1fr))
+}
+.tile-canvas {
+  min-height:260px
+}
+
+}
+@media (max-width:480px) {
+  .preview-stack {
+  grid-template-columns:1fr
+}
+.preview-meta {
+  justify-content:space-between;
+  width:100%
+}
+.title-row h1 {
+  font-size:40px
+}
+.pipeline-footer {
+  flex-direction:column;
+  align-items:flex-start;
+  gap:12px
+}
+
+}
+.tool-page {
+  width:100%;
+  padding:60px clamp(24px,4vw,72px) 72px
+}
+.tool-title {
+  justify-content:space-between;
+  align-items:end;
+  gap:32px;
+  margin-bottom:48px;
+  display:flex
+}
+.tool-title h1 {
+  margin-bottom:14px
+}
+.tool-status {
+  color:#25a96a;
+  font:10px var(--font-mono);
+  white-space:nowrap;
+  align-items:center;
+  gap:8px;
+  display:flex
+}
+.tool-status i,.auto-note i {
+  background:#25a96a;
+  border-radius:50%;
+  width:6px;
+  height:6px
+}
+.gradient-layout {
+  grid-template-columns:minmax(360px,.7fr) minmax(0,1.3fr);
+  align-items:start;
+  gap:56px;
+  display:grid
+}
+.settings-panel,.gradient-preview {
+  background:var(--panel);
+  border:1px solid var(--line)
+}
+.panel-heading,.preview-toolbar {
+  border-bottom:1px solid var(--line);
+  justify-content:space-between;
+  align-items:center;
+  padding:18px 20px;
+  display:flex
+}
+.panel-heading strong,.preview-toolbar strong {
+  font:600 14px var(--font-mono);
+  margin-top:5px;
+  display:block
+}
+.setting-group {
+  border-bottom:1px solid var(--line);
+  padding:22px 20px
+}
+.setting-group label {
+  font:10px var(--font-mono);
+  letter-spacing:.1em;
+  color:var(--muted);
+  justify-content:space-between;
+  margin-bottom:12px;
+  display:flex
+}
+.setting-group output {
+  color:var(--blue)
+}
+.color-row {
+  align-items:center;
+  gap:10px;
+  display:flex
+}
+.color-row .color-field {
+  flex:1
+}
+.stop-arrow {
+  color:var(--muted)
+}
+.gradient-bar {
+  border:1px solid var(--line);
+  height:14px;
+  margin-top:14px
+}
+.direction-grid {
+  grid-template-columns:repeat(4,1fr);
+  gap:6px;
+  margin-top:14px;
+  display:grid
+}
+.direction-grid button,.secondary-btn {
+  border:1px solid var(--line);
+  color:var(--muted);
+  font:10px var(--font-mono);
+  background:0 0;
+  padding:8px 6px
+}
+.direction-grid button.selected,.secondary-btn:hover {
+  background:var(--foreground);
+  color:var(--background)
+}
+.wide {
+  width:100%
+}
+.settings-footer {
+  justify-content:space-between;
+  align-items:center;
+  padding:16px 20px;
+  display:flex
+}
+.large-canvas {
+  background-color:#202a31;
+  background-image:linear-gradient(45deg,#29343c 25%,#0000 25%),linear-gradient(-45deg,#29343c 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#29343c 75%),linear-gradient(-45deg,#0000 75%,#29343c 75%);
+  background-position:0 0,0 14px,14px -14px,-14px 0;
+  background-size:28px 28px;
+  padding:24px
+}
+.gradient-art {
+  color:#fff;
+  min-height:clamp(420px,42vw,680px);
+  font:12px var(--font-mono);
+  place-content:center;
+  justify-items:center;
+  display:grid
+}
+.art-mark {
+  border:1px solid #ffffffa6;
+  place-items:center;
+  width:70px;
+  height:70px;
+  margin-bottom:12px;
+  font-size:16px;
+  display:grid
+}
+.code-block {
+  padding:16px 20px
+}
+.code-block>div {
+  justify-content:space-between;
+  align-items:center;
+  display:flex
+}
+.code-block pre {
+  background:var(--background);
+  color:var(--blue);
+  font:12px/1.6 var(--font-mono);
+  white-space:pre-wrap;
+  margin:12px 0 0;
+  padding:14px
+}
+.preview-actions {
+  align-items:center;
+  gap:10px;
+  display:flex
+}
+.secondary-btn {
+  align-items:center;
+  gap:8px;
+  display:flex
+}
+.dark-mode .large-canvas {
+  background-color:#202a31
+}
+.remover-layout {
+  grid-template-columns:minmax(360px,.62fr) minmax(0,1.38fr);
+  align-items:start;
+  gap:56px;
+  display:grid
+}
+.remover-preview {
+  background:var(--panel);
+  border:1px solid var(--line);
+  min-width:0
+}
+.comparison-grid {
+  grid-template-columns:repeat(2,minmax(0,1fr));
+  gap:18px;
+  padding:20px;
+  display:grid
+}
+.image-card {
+  min-width:0
+}
+.image-label {
+  font:10px var(--font-mono);
+  color:var(--muted);
+  justify-content:space-between;
+  margin-bottom:10px;
+  display:flex
+}
+.image-label span {
+  color:var(--blue)
+}
+.image-label b {
+  font-weight:400
+}
+.remover-canvas {
+  border:1px solid var(--line);
+  place-items:center;
+  min-height:clamp(360px,30vw,560px);
+  display:grid;
+  position:relative;
+  overflow:hidden
+}
+.source-canvas {
+  background:#e8eef2
+}
+.subject {
+  color:#ffffffd9;
+  width:74%;
+  height:68%;
+  font:600 14px var(--font-mono);
+  text-shadow:0 1px 2px #17212b;
+  place-items:center;
+  transition:all .2s;
+  display:grid
+}
+.subject-source {
+  transform:rotate(-3deg)
+}
+.canvas-size {
+  font:9px var(--font-mono);
+  color:var(--muted);
+  position:absolute;
+  bottom:9px;
+  right:10px
+}
+.result-meta {
+  border-top:1px solid var(--line);
+  font:10px var(--font-mono);
+  color:var(--muted);
+  gap:24px;
+  padding:16px 20px;
+  display:flex
+}
+.result-meta b {
+  color:var(--foreground);
+  margin-left:6px;
+  font-weight:600
+}
+.processed {
+  color:#25a96a;
+  font:10px var(--font-mono);
+  align-items:center;
+  gap:5px;
+  display:flex
+}
+.color-reference,.range-hints {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  justify-content:space-between;
+  margin-top:10px;
+  display:flex
+}
+.color-reference {
+  justify-content:flex-start;
+  gap:8px
+}
+.color-reference span {
+  border:1px solid var(--line);
+  width:9px;
+  height:9px
+}
+.native-color {
+  width:30px;
+  border:0!important;
+  padding:0!important
+}
+.toggle-group label {
+  cursor:pointer;
+  align-items:center
+}
+.toggle-group input {
+  display:none
+}
+.toggle {
+  border:1px solid var(--line);
+  width:32px;
+  height:18px;
+  position:relative
+}
+.toggle:after {
+  content:"";
+  background:var(--muted);
+  width:10px;
+  height:10px;
+  transition:transform .2s;
+  position:absolute;
+  top:3px;
+  left:3px
+}
+.toggle-group input:checked+.toggle {
+  background:var(--blue);
+  border-color:var(--blue)
+}
+.toggle-group input:checked+.toggle:after {
+  background:#fff;
+  transform:translate(14px)
+}
+.toggle-group p {
+  color:var(--muted);
+  margin:8px 0 0;
+  font-size:12px;
+  line-height:1.5
+}
+.catalog-nav {
+  border-bottom:1px solid var(--line);
+  justify-content:space-between;
+  align-items:center;
+  gap:24px;
+  margin:-64px 0 64px;
+  padding:18px 0;
+  display:flex
+}
+.catalog-brand {
+  color:var(--foreground);
+  font:600 14px var(--font-mono);
+  text-decoration:none
+}
+.catalog-nav nav {
+  gap:24px;
+  display:flex
+}
+.catalog-nav nav a,.catalog-nav-status {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  text-decoration:none
+}
+.catalog-nav nav a:hover,.catalog-nav nav a.current {
+  color:var(--blue)
+}
+.catalog-nav-status {
+  color:#25a96a
+}
+.catalog-page {
+  width:100%;
+  max-width:1680px;
+  margin:0 auto;
+  padding:64px clamp(24px,4vw,72px) 72px
+}
+.catalog-head {
+  border-bottom:1px solid var(--line);
+  justify-content:space-between;
+  align-items:flex-end;
+  gap:40px;
+  padding-bottom:42px;
+  display:flex
+}
+.catalog-head h1 {
+  margin:12px 0 14px
+}
+.catalog-head p {
+  max-width:660px;
+  color:var(--muted);
+  font:14px/1.6 var(--font-mono);
+  margin:0
+}
+.catalog-total {
+  color:var(--muted);
+  font:10px/1.4 var(--font-mono);
+  text-align:right;
+  align-items:center;
+  gap:14px;
+  display:flex
+}
+.catalog-total b {
+  color:var(--blue);
+  font:400 clamp(48px,5vw,76px)/.9 var(--font-mono);
+  letter-spacing:-.08em
+}
+.catalog-toolbar {
+  justify-content:space-between;
+  align-items:center;
+  gap:24px;
+  padding:24px 0 42px;
+  display:flex
+}
+.catalog-search {
+  border:1px solid var(--line);
+  width:min(420px,100%);
+  color:var(--muted);
+  align-items:center;
+  gap:12px;
+  padding:12px 14px;
+  display:flex
+}
+.catalog-search input {
+  width:100%;
+  color:var(--foreground);
+  font:12px var(--font-mono);
+  background:0 0;
+  border:0;
+  outline:0
+}
+.catalog-filters {
+  color:var(--muted);
+  flex-wrap:wrap;
+  align-items:center;
+  gap:6px;
+  display:flex
+}
+.catalog-filters button {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  background:0 0;
+  border:1px solid #0000;
+  padding:8px 10px
+}
+.catalog-filters button:hover,.catalog-filters button.active {
+  border-color:var(--blue);
+  color:var(--blue)
+}
+.catalog-groups {
+  grid-template-columns:repeat(2,minmax(0,1fr));
+  gap:56px 28px;
+  display:grid
+}
+.catalog-group {
+  min-width:0
+}
+.group-title {
+  border-bottom:1px solid var(--line);
+  color:var(--foreground);
+  font:600 11px var(--font-mono);
+  letter-spacing:.12em;
+  justify-content:space-between;
+  align-items:center;
+  padding-bottom:12px;
+  display:flex
+}
+.group-title i {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  font-style:normal
+}
+.tool-cards {
+  gap:10px;
+  padding-top:14px;
+  display:grid
+}
+.tool-card {
+  border:1px solid var(--line);
+  background:var(--panel);
+  min-height:106px;
+  color:var(--foreground);
+  grid-template-columns:42px minmax(0,1fr) 24px 18px;
+  align-items:center;
+  gap:14px;
+  padding:16px;
+  text-decoration:none;
+  transition:border-color .18s,transform .18s,background .18s;
+  display:grid
+}
+.tool-card:hover {
+  border-color:var(--blue);
+  background:var(--panel-strong);
+  transform:translateY(-2px)
+}
+.tool-icon {
+  background:var(--blue);
+  place-items:center;
+  width:42px;
+  height:42px;
+  display:grid
+}
+@supports (color:color-mix(in lab, red, red)) {
+  .tool-icon {
+  background:color-mix(in srgb,var(--blue) 12%,transparent)
+}
+
+}
+.tool-icon {
+  color:var(--blue)
+}
+.tool-copy {
+  gap:8px;
+  min-width:0;
+  display:grid
+}
+.tool-copy strong {
+  font:600 13px var(--font-mono)
+}
+.tool-copy span {
+  color:var(--muted);
+  font:12px/1.5 var(--font-mono)
+}
+.tool-index {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  align-self:start
+}
+.tool-arrow {
+  color:var(--blue);
+  opacity:0;
+  transition:opacity .18s,transform .18s
+}
+.tool-card:hover .tool-arrow {
+  opacity:1;
+  transform:translate(2px,-2px)
+}
+.catalog-empty {
+  border:1px dashed var(--line);
+  color:var(--muted);
+  font:12px var(--font-mono);
+  align-items:center;
+  gap:10px;
+  padding:40px;
+  display:flex
+}
+.catalog-footer {
+  border-top:1px solid var(--line);
+  color:var(--muted);
+  font:10px var(--font-mono);
+  margin-top:64px;
+  padding-top:20px
+}
+.catalog-footer span {
+  color:var(--blue);
+  margin:0 8px
+}
+@media (max-width:800px) {
+  .catalog-nav {
+  margin:-36px 0 36px
+}
+.catalog-nav-status {
+  display:none
+}
+.catalog-nav nav {
+  gap:14px
+}
+.catalog-page {
+  padding:36px 16px 48px
+}
+.catalog-head {
+  flex-direction:column;
+  align-items:flex-start;
+  gap:24px
+}
+.catalog-total {
+  text-align:left
+}
+.catalog-toolbar {
+  flex-direction:column;
+  align-items:stretch;
+  padding-bottom:30px
+}
+.catalog-search {
+  width:100%
+}
+.catalog-groups {
+  grid-template-columns:1fr;
+  gap:36px
+}
+.tool-card {
+  grid-template-columns:38px minmax(0,1fr) 18px;
+  gap:12px;
+  min-height:96px
+}
+.tool-icon {
+  width:38px;
+  height:38px
+}
+.tool-index {
+  display:none
+}
+.tool-arrow {
+  opacity:1
+}
+.tool-page {
+  padding:36px 16px 48px
+}
+.tool-title {
+  display:block
+}
+.tool-status {
+  margin-top:22px
+}
+.gradient-layout,.remover-layout {
+  grid-template-columns:1fr;
+  gap:24px
+}
+.gradient-preview,.remover-preview {
+  order:-1
+}
+.gradient-art {
+  min-height:340px
+}
+.preview-toolbar {
+  flex-direction:column;
+  align-items:flex-start;
+  gap:16px
+}
+.preview-actions {
+  justify-content:flex-end;
+  width:100%
+}
+.comparison-grid {
+  grid-template-columns:1fr
+}
+.remover-canvas {
+  min-height:300px
+}
+.result-meta {
+  flex-wrap:wrap;
+  gap:12px 18px
+}
+
+}
+@property --tw-rotate-x {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-rotate-y {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-rotate-z {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-skew-x {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-skew-y {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-border-style {
+  syntax:"*";
+  inherits:false;
+  initial-value:solid
+}
+@property --tw-font-weight {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-shadow {
+  syntax:"*";
+  inherits:false;
+  initial-value:0 0 #0000
+}
+@property --tw-shadow-color {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-shadow-alpha {
+  syntax:"<percentage>";
+  inherits:false;
+  initial-value:100%
+}
+@property --tw-inset-shadow {
+  syntax:"*";
+  inherits:false;
+  initial-value:0 0 #0000
+}
+@property --tw-inset-shadow-color {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-inset-shadow-alpha {
+  syntax:"<percentage>";
+  inherits:false;
+  initial-value:100%
+}
+@property --tw-ring-color {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-ring-shadow {
+  syntax:"*";
+  inherits:false;
+  initial-value:0 0 #0000
+}
+@property --tw-inset-ring-color {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-inset-ring-shadow {
+  syntax:"*";
+  inherits:false;
+  initial-value:0 0 #0000
+}
+@property --tw-ring-inset {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-ring-offset-width {
+  syntax:"<length>";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-ring-offset-color {
+  syntax:"*";
+  inherits:false;
+  initial-value:#fff
+}
+@property --tw-ring-offset-shadow {
+  syntax:"*";
+  inherits:false;
+  initial-value:0 0 #0000
+}
+@property --tw-outline-style {
+  syntax:"*";
+  inherits:false;
+  initial-value:solid
+}
+@property --tw-blur {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-brightness {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-contrast {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-grayscale {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-hue-rotate {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-invert {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-opacity {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-saturate {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-sepia {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-drop-shadow {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-drop-shadow-color {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-drop-shadow-alpha {
+  syntax:"<percentage>";
+  inherits:false;
+  initial-value:100%
+}
+@property --tw-drop-shadow-size {
+  syntax:"*";
+  inherits:false
+}
+@property --tw-translate-x {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-translate-y {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+@property --tw-translate-z {
+  syntax:"*";
+  inherits:false;
+  initial-value:0
+}
+</style>
+    <meta name="theme-color" content="#eef1f4"/>
+    <meta name="color-scheme" content="light"/>
+    <title>easy-png-tools / Demo
+    </title>
+    <meta name="description" content="Technical workspace for building PNG processing pipelines."/>
+    <meta name="generator" content="easy-png-tools"/>
+  </head>
+  <body class="antialiased">
+    <div hidden="">
+      <!--$-->
+      <!--/$-->
+    </div>
+    <main class="catalog-page">
+      <header class="catalog-nav">
+        <a class="catalog-brand" href="/">easy-png-tools
+        </a>
+        <nav>
+          <a href="/">Workspace
+          </a>
+          <a class="current" href="/easy-png-tools/list-tools">Catalog
+          </a>
+        </nav>
+        <span class="catalog-nav-status">LOCAL MODE / READY
+        </span>
+      </header>
+      <div class="catalog-head">
+        <div>
+          <div class="eyebrow">EASY-PNG-TOOLS / CATALOG
+          </div>
+          <h1>Tool catalog
+          </h1>
+          <p>Focused utilities for working with PNG. Inspect, transform, and export — locally in your browser.
+          </p>
+        </div>
+        <div class="catalog-total">
+          <b>32
+          </b>
+          <span>TOOLS
+            <br/>AVAILABLE
+          </span>
+        </div>
+      </div>
+      <div class="catalog-toolbar">
+        <label class="catalog-search">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search" aria-hidden="true">
+            <path d="m21 21-4.34-4.34">
+            </path>
+            <circle cx="11" cy="11" r="8">
+            </circle>
+          </svg>
+          <input aria-label="Search tools" placeholder="Search tools..." value=""/>
+        </label>
+        <div class="catalog-filters">
+          <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-funnel" aria-hidden="true">
+            <path d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z">
+            </path>
+          </svg>
+          <button class="active">ALL
+          </button>
+          <button class="">CONVERT
+          </button>
+          <button class="">TRANSPARENCY
+          </button>
+          <button class="">COLOR
+          </button>
+          <button class="">GEOMETRY
+          </button>
+          <button class="">FILTERS
+          </button>
+          <button class="">ANALYZE
+          </button>
+        </div>
+      </div>
+      <div class="catalog-groups">
+        <section class="catalog-group">
+          <div class="group-title">
+            <span>CONVERT
+            </span>
+            <i>05
+              <!-- --> TOOLS
+            </i>
+          </div>
+          <div class="tool-cards">
+            <a class="tool-card" href="/easy-png-tools/gradient">
+              <span class="tool-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
+                  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
+                  </path>
+                  <path d="M14 2v5a1 1 0 0 0 1 1h5">
+                  </path>
+                  <circle cx="10" cy="12" r="2">
+                  </circle>
+                  <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
+                  </path>
+                </svg>
+              </span>
+              <span class="tool-copy">
+                <strong>Convert JPG to PNG
+                </strong>
+                <span>Re-encode JPEG files as lossless PNG while preserving transparency.
+                </span>
+              </span>
+              <span class="tool-index">01
+              </span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
+                <path d="M7 7h10v10">
+                </path>
+                <path d="M7 17 17 7">
+                </path>
+              </svg>
+            </a>
+            <a class="tool-card" href="#">
+              <span class="tool-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
+                  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
+                  </path>
+                  <path d="M14 2v5a1 1 0 0 0 1 1h5">
+                  </path>
+                  <circle cx="10" cy="12" r="2">
+                  </circle>
+                  <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
+                  </path>
+                </svg>
+              </span>
+              <span class="tool-copy">
+                <strong>Convert WebP to PNG
+                </strong>
+                <span>Turn WebP images into a universal PNG format for any workflow.
+                </span>
+              </span>
+              <span class="tool-index">02
+              </span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
+                <path d="M7 7h10v10">
+                </path>
+                <path d="M7 17 17 7">
+                </path>
+              </svg>
+            </a>
+            <a class="tool-card" href="#">
+              <span class="tool-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
+                  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
+                  </path>
+                  <path d="M14 2v5a1 1 0 0 0 1 1h5">
+                  </path>
+                  <circle cx="10" cy="12" r="2">
+                  </circle>
+                  <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
+                  </path>
+                </svg>
+              </span>
+              <span class="tool-copy">
+                <strong>PNG to Base64
+                </strong>
+                <span>Encode an image as a base64 string for embedding in code or styles.
+                </span>
+              </span>
+              <span class="tool-index">03
+              </span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
+                <path d="M7 7h10v10">
+                </path>
+                <path d="M7 17 17 7">
+                </path>
+              </svg>
+            </a>
+            <a class="tool-card" href="#">
+              <span class="tool-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
+                  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
+                  </path>
+                  <path d="M14 2v5a1 1 0 0 0 1 1h5">
+                  </path>
+                  <circle cx="10" cy="12" r="2">
+                  </circle>
+                  <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
+                  </path>
+                </svg>
+              </span>
+              <span class="tool-copy">
+                <strong>PNG to Data URI
+                </strong>
+                <span>Build a complete data URI ready for HTML and CSS.
+                </span>
+              </span>
+              <span class="tool-index">04
+              </span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
+                <path d="M7 7h10v10">
+                </path>
+                <path d="M7 17 17 7">
+                </path>
+              </svg>
+            </a>
+            <a class="tool-card" href="#">
+              <span class="tool-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
+                  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
+                  </path>
+                  <path d="M14 2v5a1 1 0 0 0 1 1h5">
+                  </path>
+                  <circle cx="10" cy="12" r="2">
+                  </circle>
+                  <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
+                  </path>
+                </svg>
+              </span>
+              <span class="tool-copy">
+                <strong>Convert PNG to JPG
+                </strong>
+                <span>Composite transparency over a selected backdrop and export JPEG.
+                </span>
+              </span>
+              <span class="tool-index">05
+              </span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
+                <path d="M7 7h10v10">
+                </path>
+                <path d="M7 17 17 7">
+                </path>
+              </svg>
+            </a>
+          </div>
+        </section>
+        <section class="catalog-group">
+          <div class="group-title">
+            <span>TRANSPARENCY
+            </span>
+            <i>05
+              <!-- --> TOOLS
+            </i>
+          </div>
+          <div class="tool-cards">
+            <a class="tool-card" href="/easy-png-tools/background-remover">
+              <span class="tool-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
+                  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
+                  </path>
+                  <path d="M14 2v5a1 1 0 0 0 1 1h5">
+                  </path>
+                  <circle cx="10" cy="12" r="2">
+                  </circle>
+                  <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
+                  </path>
+                </svg>
+              </span>
+              <span class="tool-copy">
+                <strong>Remove background PNG
+                </strong>
+                <span>Remove a solid background by color, tolerance, or edge-connected regions.
+                </span>
+              </span>
+              <span class="tool-index">01
+              </span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
+                <path d="M7 7h10v10">
+                </path>
+                <path d="M7 17 17 7">
+                </path>
+              </svg>
+            </a>
+            <a class="tool-card" href="#">
+              <span class="tool-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
+                  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
+                  </path>
+                  <path d="M14 2v5a1 1 0 0 0 1 1h5">
+                  </path>
+                  <circle cx="10" cy="12" r="2">
+                  </circle>
+                  <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
+                  </path>
+                </svg>
+              </span>
+              <span class="tool-copy">
+                <strong>Extract alpha mask
+                </strong>
+                <span>Turn the alpha channel into a clean black-and-white mask.
+                </span>
+              </span>
+              <span class="tool-index">02
+              </span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
+                <path d="M7 7h10v10">
+                </path>
+                <path d="M7 17 17 7">
+                </path>
+              </svg>
+            </a>
+            <a class="tool-card" href="#">
+              <span class="tool-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
+                  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
+                  </path>
+                  <path d="M14 2v5a1 1 0 0 0 1 1h5">
+                  </path>
+                  <circle cx="10" cy="12" r="2">
+                  </circle>
+                  <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
+                  </path>
+                </svg>
+              </span>
+              <span class="tool-copy">
+                <strong>Round corners PNG
+                </strong>
+                <span>Clip the image corners by a precise radius percentage.
+                </span>
+              </span>
+              <span class="tool-index">03
+              </span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
+                <path d="M7 7h10v10">
+                </path>
+                <path d="M7 17 17 7">
+                </path>
+              </svg>
+            </a>
+            <a class="tool-card" href="#">
+              <span class="tool-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
+                  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
+                  </path>
+                  <path d="M14 2v5a1 1 0 0 0 1 1h5">
+                  </path>
+                  <circle cx="10" cy="12" r="2">
+                  </circle>
+                  <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
+                  </path>
+                </svg>
+              </span>
+              <span class="tool-copy">
+                <strong>Outline PNG
+                </strong>
+                <span>Add a colored ring around opaque content with adjustable thickness.
+                </span>
+              </span>
+              <span class="tool-index">04
+              </span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
+                <path d="M7 7h10v10">
+                </path>
+                <path d="M7 17 17 7">
+                </path>
+              </svg>
+            </a>
+            <a class="tool-card" href="#">
+              <span class="tool-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
+                  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
+                  </path>
+                  <path d="M14 2v5a1 1 0 0 0 1 1h5">
+                  </path>
+                  <circle cx="10" cy="12" r="2">
+                  </circle>
+                  <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
+                  </path>
+                </svg>
+              </span>
+              <span class="tool-copy">
+                <strong>Change PNG opacity
+                </strong>
+                <span>Multiply the alpha channel while keeping the original colors unchanged.
+                </span>
+              </span>
+              <span class="tool-index">05
+              </span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
+                <path d="M7 7h10v10">
+                </path>
+                <path d="M7 17 17 7">
+                </path>
+              </svg>
+            </a>
+          </div>
+        </section>
+        <section class="catalog-group">
+          <div class="group-title">
+            <span>COLOR
+            </span>
+            <i>05
+              <!-- --> TOOLS
+            </i>
+          </div>
+          <div class="tool-cards">
+            <a class="tool-card" href="/easy-png-tools/gradient">
+              <span class="tool-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
+                  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
+                  </path>
+                  <path d="M14 2v5a1 1 0 0 0 1 1h5">
+                  </path>
+                  <circle cx="10" cy="12" r="2">
+                  </circle>
+                  <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
+                  </path>
+                </svg>
+              </span>
+              <span class="tool-copy">
+                <strong>Create gradient PNG
+                </strong>
+                <span>Generate a smooth transition between two colors with direction controls.
+                </span>
+              </span>
+              <span class="tool-index">01
+              </span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
+                <path d="M7 7h10v10">
+                </path>
+                <path d="M7 17 17 7">
+                </path>
+              </svg>
+            </a>
+            <a class="tool-card" href="#">
+              <span class="tool-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
+                  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
+                  </path>
+                  <path d="M14 2v5a1 1 0 0 0 1 1h5">
+                  </path>
+                  <circle cx="10" cy="12" r="2">
+                  </circle>
+                  <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
+                  </path>
+                </svg>
+              </span>
+              <span class="tool-copy">
+                <strong>Grayscale PNG
+                </strong>
+                <span>Convert the image to luminance-based shades of gray.
+                </span>
+              </span>
+              <span class="tool-index">02
+              </span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
+                <path d="M7 7h10v10">
+                </path>
+                <path d="M7 17 17 7">
+                </path>
+              </svg>
+            </a>
+            <a class="tool-card" href="#">
+              <span class="tool-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
+                  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
+                  </path>
+                  <path d="M14 2v5a1 1 0 0 0 1 1h5">
+                  </path>
+                  <circle cx="10" cy="12" r="2">
+                  </circle>
+                  <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
+                  </path>
+                </svg>
+              </span>
+              <span class="tool-copy">
+                <strong>Invert colors PNG
+                </strong>
+                <span>Invert every color channel while leaving alpha untouched.
+                </span>
+              </span>
+              <span class="tool-index">03
+              </span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
+                <path d="M7 7h10v10">
+                </path>
+                <path d="M7 17 17 7">
+                </path>
+              </svg>
+            </a>
+            <a class="tool-card" href="#">
+              <span class="tool-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
+                  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
+                  </path>
+                  <path d="M14 2v5a1 1 0 0 0 1 1h5">
+                  </path>
+                  <circle cx="10" cy="12" r="2">
+                  </circle>
+                  <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
+                  </path>
+                </svg>
+              </span>
+              <span class="tool-copy">
+                <strong>Brightness &amp; contrast
+                </strong>
+                <span>Adjust brightness and contrast across a controlled range.
+                </span>
+              </span>
+              <span class="tool-index">04
+              </span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
+                <path d="M7 7h10v10">
+                </path>
+                <path d="M7 17 17 7">
+                </path>
+              </svg>
+            </a>
+            <a class="tool-card" href="#">
+              <span class="tool-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
+                  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
+                  </path>
+                  <path d="M14 2v5a1 1 0 0 0 1 1h5">
+                  </path>
+                  <circle cx="10" cy="12" r="2">
+                  </circle>
+                  <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
+                  </path>
+                </svg>
+              </span>
+              <span class="tool-copy">
+                <strong>Temperature PNG
+                </strong>
+                <span>Make an image warmer or cooler with a single precise control.
+                </span>
+              </span>
+              <span class="tool-index">05
+              </span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
+                <path d="M7 7h10v10">
+                </path>
+                <path d="M7 17 17 7">
+                </path>
+              </svg>
+            </a>
+          </div>
+        </section>
+        <section class="catalog-group">
+          <div class="group-title">
+            <span>GEOMETRY
+            </span>
+            <i>05
+              <!-- --> TOOLS
+            </i>
+          </div>
+          <div class="tool-cards">
+            <a class="tool-card" href="#">
+              <span class="tool-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
+                  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
+                  </path>
+                  <path d="M14 2v5a1 1 0 0 0 1 1h5">
+                  </path>
+                  <circle cx="10" cy="12" r="2">
+                  </circle>
+                  <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
+                  </path>
+                </svg>
+              </span>
+              <span class="tool-copy">
+                <strong>Resize PNG
+                </strong>
+                <span>Scale an image with bilinear interpolation and optional aspect lock.
+                </span>
+              </span>
+              <span class="tool-index">01
+              </span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
+                <path d="M7 7h10v10">
+                </path>
+                <path d="M7 17 17 7">
+                </path>
+              </svg>
+            </a>
+            <a class="tool-card" href="#">
+              <span class="tool-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
+                  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
+                  </path>
+                  <path d="M14 2v5a1 1 0 0 0 1 1h5">
+                  </path>
+                  <circle cx="10" cy="12" r="2">
+                  </circle>
+                  <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
+                  </path>
+                </svg>
+              </span>
+              <span class="tool-copy">
+                <strong>Crop PNG
+                </strong>
+                <span>Cut a rectangular area with exact coordinates and dimensions.
+                </span>
+              </span>
+              <span class="tool-index">02
+              </span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
+                <path d="M7 7h10v10">
+                </path>
+                <path d="M7 17 17 7">
+                </path>
+              </svg>
+            </a>
+            <a class="tool-card" href="#">
+              <span class="tool-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
+                  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
+                  </path>
+                  <path d="M14 2v5a1 1 0 0 0 1 1h5">
+                  </path>
+                  <circle cx="10" cy="12" r="2">
+                  </circle>
+                  <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
+                  </path>
+                </svg>
+              </span>
+              <span class="tool-copy">
+                <strong>Rotate PNG
+                </strong>
+                <span>Rotate by 90, 180, or 270 degrees without quality loss.
+                </span>
+              </span>
+              <span class="tool-index">03
+              </span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
+                <path d="M7 7h10v10">
+                </path>
+                <path d="M7 17 17 7">
+                </path>
+              </svg>
+            </a>
+            <a class="tool-card" href="#">
+              <span class="tool-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
+                  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
+                  </path>
+                  <path d="M14 2v5a1 1 0 0 0 1 1h5">
+                  </path>
+                  <circle cx="10" cy="12" r="2">
+                  </circle>
+                  <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
+                  </path>
+                </svg>
+              </span>
+              <span class="tool-copy">
+                <strong>Flip PNG
+                </strong>
+                <span>Mirror the image horizontally or vertically.
+                </span>
+              </span>
+              <span class="tool-index">04
+              </span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
+                <path d="M7 7h10v10">
+                </path>
+                <path d="M7 17 17 7">
+                </path>
+              </svg>
+            </a>
+            <a class="tool-card" href="#">
+              <span class="tool-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
+                  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
+                  </path>
+                  <path d="M14 2v5a1 1 0 0 0 1 1h5">
+                  </path>
+                  <circle cx="10" cy="12" r="2">
+                  </circle>
+                  <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
+                  </path>
+                </svg>
+              </span>
+              <span class="tool-copy">
+                <strong>Add padding to PNG
+                </strong>
+                <span>Expand the canvas on all sides by a chosen number of pixels.
+                </span>
+              </span>
+              <span class="tool-index">05
+              </span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
+                <path d="M7 7h10v10">
+                </path>
+                <path d="M7 17 17 7">
+                </path>
+              </svg>
+            </a>
+          </div>
+        </section>
+        <section class="catalog-group">
+          <div class="group-title">
+            <span>FILTERS
+            </span>
+            <i>04
+              <!-- --> TOOLS
+            </i>
+          </div>
+          <div class="tool-cards">
+            <a class="tool-card" href="#">
+              <span class="tool-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
+                  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
+                  </path>
+                  <path d="M14 2v5a1 1 0 0 0 1 1h5">
+                  </path>
+                  <circle cx="10" cy="12" r="2">
+                  </circle>
+                  <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
+                  </path>
+                </svg>
+              </span>
+              <span class="tool-copy">
+                <strong>Blur PNG
+                </strong>
+                <span>Apply a fast Gaussian-style blur with transparent edge handling.
+                </span>
+              </span>
+              <span class="tool-index">01
+              </span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
+                <path d="M7 7h10v10">
+                </path>
+                <path d="M7 17 17 7">
+                </path>
+              </svg>
+            </a>
+            <a class="tool-card" href="#">
+              <span class="tool-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
+                  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
+                  </path>
+                  <path d="M14 2v5a1 1 0 0 0 1 1h5">
+                  </path>
+                  <circle cx="10" cy="12" r="2">
+                  </circle>
+                  <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
+                  </path>
+                </svg>
+              </span>
+              <span class="tool-copy">
+                <strong>Sharpen PNG
+                </strong>
+                <span>Emphasize edges with an adjustable sharpening kernel.
+                </span>
+              </span>
+              <span class="tool-index">02
+              </span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
+                <path d="M7 7h10v10">
+                </path>
+                <path d="M7 17 17 7">
+                </path>
+              </svg>
+            </a>
+            <a class="tool-card" href="#">
+              <span class="tool-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
+                  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
+                  </path>
+                  <path d="M14 2v5a1 1 0 0 0 1 1h5">
+                  </path>
+                  <circle cx="10" cy="12" r="2">
+                  </circle>
+                  <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
+                  </path>
+                </svg>
+              </span>
+              <span class="tool-copy">
+                <strong>Vignette PNG
+                </strong>
+                <span>Smoothly darken the image edges while preserving the center.
+                </span>
+              </span>
+              <span class="tool-index">03
+              </span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
+                <path d="M7 7h10v10">
+                </path>
+                <path d="M7 17 17 7">
+                </path>
+              </svg>
+            </a>
+            <a class="tool-card" href="#">
+              <span class="tool-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
+                  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
+                  </path>
+                  <path d="M14 2v5a1 1 0 0 0 1 1h5">
+                  </path>
+                  <circle cx="10" cy="12" r="2">
+                  </circle>
+                  <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
+                  </path>
+                </svg>
+              </span>
+              <span class="tool-copy">
+                <strong>JPEG artifacts
+                </strong>
+                <span>Simulate low-quality JPEG recompression for testing.
+                </span>
+              </span>
+              <span class="tool-index">04
+              </span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
+                <path d="M7 7h10v10">
+                </path>
+                <path d="M7 17 17 7">
+                </path>
+              </svg>
+            </a>
+          </div>
+        </section>
+        <section class="catalog-group">
+          <div class="group-title">
+            <span>ANALYZE
+            </span>
+            <i>04
+              <!-- --> TOOLS
+            </i>
+          </div>
+          <div class="tool-cards">
+            <a class="tool-card" href="#">
+              <span class="tool-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
+                  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
+                  </path>
+                  <path d="M14 2v5a1 1 0 0 0 1 1h5">
+                  </path>
+                  <circle cx="10" cy="12" r="2">
+                  </circle>
+                  <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
+                  </path>
+                </svg>
+              </span>
+              <span class="tool-copy">
+                <strong>PNG info
+                </strong>
+                <span>Inspect dimensions, alpha presence, and unique color count.
+                </span>
+              </span>
+              <span class="tool-index">01
+              </span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
+                <path d="M7 7h10v10">
+                </path>
+                <path d="M7 17 17 7">
+                </path>
+              </svg>
+            </a>
+            <a class="tool-card" href="#">
+              <span class="tool-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
+                  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
+                  </path>
+                  <path d="M14 2v5a1 1 0 0 0 1 1h5">
+                  </path>
+                  <circle cx="10" cy="12" r="2">
+                  </circle>
+                  <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
+                  </path>
+                </svg>
+              </span>
+              <span class="tool-copy">
+                <strong>Check grayscale
+                </strong>
+                <span>Report whether the image contains only shades of gray.
+                </span>
+              </span>
+              <span class="tool-index">02
+              </span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
+                <path d="M7 7h10v10">
+                </path>
+                <path d="M7 17 17 7">
+                </path>
+              </svg>
+            </a>
+            <a class="tool-card" href="#">
+              <span class="tool-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
+                  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
+                  </path>
+                  <path d="M14 2v5a1 1 0 0 0 1 1h5">
+                  </path>
+                  <circle cx="10" cy="12" r="2">
+                  </circle>
+                  <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
+                  </path>
+                </svg>
+              </span>
+              <span class="tool-copy">
+                <strong>Check transparency
+                </strong>
+                <span>Detect transparent and semi-transparent pixels.
+                </span>
+              </span>
+              <span class="tool-index">03
+              </span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
+                <path d="M7 7h10v10">
+                </path>
+                <path d="M7 17 17 7">
+                </path>
+              </svg>
+            </a>
+            <a class="tool-card" href="#">
+              <span class="tool-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-image" aria-hidden="true">
+                  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
+                  </path>
+                  <path d="M14 2v5a1 1 0 0 0 1 1h5">
+                  </path>
+                  <circle cx="10" cy="12" r="2">
+                  </circle>
+                  <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22">
+                  </path>
+                </svg>
+              </span>
+              <span class="tool-copy">
+                <strong>PNG orientation
+                </strong>
+                <span>Classify the image as portrait, landscape, or square.
+                </span>
+              </span>
+              <span class="tool-index">04
+              </span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right tool-arrow" aria-hidden="true">
+                <path d="M7 7h10v10">
+                </path>
+                <path d="M7 17 17 7">
+                </path>
+              </svg>
+            </a>
+          </div>
+        </section>
+      </div>
+      <footer class="catalog-footer">ALL OPERATIONS RUN LOCALLY 
+        <span>•
+        </span> YOUR FILES NEVER LEAVE THIS DEVICE
+      </footer>
+    </main>
+    <!--$-->
+    <!--/$-->
+    <!--$!-->
+    <template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING">
+    </template>
+    <!--/$-->
+  </body>
+</html>
\ No newline at end of file
diff --git a/refs/.gitignore b/refs/.gitignore
new file mode 100644
index 0000000..97eb8c0
--- /dev/null
+++ b/refs/.gitignore
@@ -0,0 +1,15 @@
+# v0 sandbox internal files
+__v0_runtime_loader.js
+__v0_devtools.tsx
+__v0_jsx-dev-runtime.ts
+.snowflake/
+.v0-trash/
+.vercel/
+
+# Environment variables
+.env*.local
+
+# Common ignores
+node_modules
+.next/
+.DS_Store
\ No newline at end of file
diff --git a/refs/app/easy-png-tools/background-remover/page.tsx b/refs/app/easy-png-tools/background-remover/page.tsx
new file mode 100644
index 0000000..68c8550
--- /dev/null
+++ b/refs/app/easy-png-tools/background-remover/page.tsx
@@ -0,0 +1,29 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { Download, Moon, RotateCcw, Sun, Upload, Check } from 'lucide-react'
+
+export default function BackgroundRemoverPage() {
+  const [color, setColor] = useState('#E8EEF2')
+  const [similarity, setSimilarity] = useState(72)
+  const [outerOnly, setOuterOnly] = useState(true)
+  const [showMask, setShowMask] = useState(false)
+  const [dark, setDark] = useState(true)
+  const [downloaded, setDownloaded] = useState(false)
+  const previewBackground = showMask ? 'repeating-conic-gradient(#7b8791 0 25%, #cbd3da 0 50%) 50% / 28px 28px' : 'repeating-conic-gradient(#d7dce0 0 25%, #f3f5f6 0 50%) 50% / 28px 28px'
+  const subjectStyle = useMemo(() => ({ background: showMask ? '#596773' : 'linear-gradient(145deg,#1769d2 0 38%,#00a8c7 38% 66%,#bd7411 66%)', opacity: showMask ? .88 : 1, clipPath: `polygon(23% 11%, 73% 8%, 89% 30%, 79% 81%, 52% 93%, 17% 78%, 8% 39%)` }), [showMask])
+  const reset = () => { setColor('#E8EEF2'); setSimilarity(72); setOuterOnly(true); setShowMask(false) }
+  return <main className={`app-shell ${dark ? 'dark-mode' : ''}`}>
+    <header className="topbar"><div className="brand"><span className="brand-mark">EP</span><span>easy-png-tools</span><span className="version">/ BACKGROUND REMOVER</span></div><div className="top-actions"><span className="status"><i /> AUTO PROCESSING</span><button className="icon-btn" aria-label="Toggle theme" onClick={() => setDark(!dark)}>{dark ? <Sun size={17} /> : <Moon size={17} />}</button></div></header>
+    <div className="tool-page"><div className="eyebrow">PNG PROCESSING <span>/</span> SINGLE TOOL</div><div className="tool-title"><div><h1>Remove background.</h1><p className="lede">Select a background color and tune the edge detection. Changes are processed automatically in your browser.</p></div><span className="tool-status"><i /> LIVE PREVIEW</span></div>
+      <div className="remover-layout"><section className="settings-panel"><div className="panel-heading"><div><span className="label">REMOVER SETTINGS</span><strong>Configure detection</strong></div><span className="step-type">TOOL 02</span></div>
+        <div className="setting-group"><label>BACKGROUND COLOR</label><div className="color-field"><span className="swatch" style={{ background: color }} /><input value={color} onChange={e => setColor(e.target.value)} /><input className="native-color" type="color" value={color} onChange={e => setColor(e.target.value)} aria-label="Choose background color" /></div><div className="color-reference"><span style={{ background: color }} /> sampled from image background</div></div>
+        <div className="setting-group"><label>COLOR SIMILARITY <output>{similarity}%</output></label><input type="range" min="0" max="100" value={similarity} onChange={e => setSimilarity(Number(e.target.value))} /><div className="range-hints"><span>strict edges</span><span>more removal</span></div></div>
+        <div className="setting-group toggle-group"><label><span>OUTER COLOR ONLY</span><input type="checkbox" checked={outerOnly} onChange={e => setOuterOnly(e.target.checked)} /><b className="toggle" /></label><p>Only remove connected background pixels from the edges.</p></div>
+        <div className="setting-group toggle-group"><label><span>SHOW MASK</span><input type="checkbox" checked={showMask} onChange={e => setShowMask(e.target.checked)} /><b className="toggle" /></label><p>Preview the detected transparency mask.</p></div>
+        <div className="settings-footer"><button className="reset-btn" onClick={reset}><RotateCcw size={14} /> Reset</button><span className="auto-note"><i /> updates automatically</span></div>
+      </section>
+      <section className="remover-preview"><div className="preview-toolbar"><div><span className="label">SOURCE / RESULT</span><strong>comparison.png</strong></div><div className="preview-actions"><span className="processed"><Check size={14} /> processed</span><button className="download-btn" onClick={() => setDownloaded(true)}><Download size={15} /> {downloaded ? 'Downloaded' : 'Download result'}</button></div></div><div className="comparison-grid"><div className="image-card"><div className="image-label"><span>SOURCE</span><b>original.png</b></div><div className="remover-canvas source-canvas"><div className="subject subject-source" style={subjectStyle}><span>OBJECT</span></div><span className="canvas-size">1200 × 800</span></div></div><div className="image-card"><div className="image-label"><span>RESULT</span><b>{showMask ? 'mask-preview.png' : 'removed-bg.png'}</b></div><div className="remover-canvas" style={{ background: previewBackground }}><div className="subject" style={subjectStyle}><span>{showMask ? 'MASK' : 'PNG'}</span></div><span className="canvas-size">1200 × 800</span></div></div></div><div className="result-meta"><span>FORMAT <b>PNG-24</b></span><span>ALPHA <b>{showMask ? 'MASK' : 'ENABLED'}</b></span><span>SIMILARITY <b>{similarity}%</b></span></div></section></div>
+    </div><footer className="footer"><span>easy-png-tools <b>v2.4.0</b></span><span>background remover · local-only</span><span>© 2024</span></footer>
+  </main>
+}
diff --git a/refs/app/easy-png-tools/demo/page.tsx b/refs/app/easy-png-tools/demo/page.tsx
new file mode 100644
index 0000000..b157a24
--- /dev/null
+++ b/refs/app/easy-png-tools/demo/page.tsx
@@ -0,0 +1 @@
+export { default } from '../../page'
diff --git a/refs/app/easy-png-tools/gradient/page.tsx b/refs/app/easy-png-tools/gradient/page.tsx
new file mode 100644
index 0000000..401a55d
--- /dev/null
+++ b/refs/app/easy-png-tools/gradient/page.tsx
@@ -0,0 +1,33 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { Check, ChevronDown, Copy, Download, Moon, RotateCcw, Sun } from 'lucide-react'
+
+const directions = ['0° →', '45° ↗', '90° ↑', '135° ↖', '180° ←', '225° ↙', '270° ↓', '315° ↘']
+
+export default function GradientPage() {
+  const [start, setStart] = useState('#1769D2')
+  const [end, setEnd] = useState('#00A8C7')
+  const [direction, setDirection] = useState(135)
+  const [opacity, setOpacity] = useState(100)
+  const [type, setType] = useState<'linear' | 'radial'>('linear')
+  const [dark, setDark] = useState(true)
+  const [copied, setCopied] = useState(false)
+  const gradient = useMemo(() => type === 'linear' ? `linear-gradient(${direction}deg, ${start} 0%, ${end} 100%)` : `radial-gradient(circle, ${start} 0%, ${end} 100%)`, [direction, end, start, type])
+  const css = `background: ${gradient};\nopacity: ${opacity / 100};`
+  const reset = () => { setStart('#1769D2'); setEnd('#00A8C7'); setDirection(135); setOpacity(100); setType('linear') }
+  const copyCss = async () => { await navigator.clipboard?.writeText(css); setCopied(true); setTimeout(() => setCopied(false), 1400) }
+  return <main className={`app-shell ${dark ? 'dark-mode' : ''}`}>
+    <header className="topbar"><div className="brand"><span className="brand-mark">EP</span><span>easy-png-tools</span><span className="version">/ GRADIENT</span></div><div className="top-actions"><button className="icon-btn" aria-label="Toggle theme" onClick={() => setDark(!dark)}>{dark ? <Sun size={17} /> : <Moon size={17} />}</button></div></header>
+    <div className="tool-page"><div className="eyebrow">PNG PROCESSING <span>/</span> SINGLE TOOL</div><div className="tool-title"><div><h1>Gradient background.</h1><p className="lede">Create a clean, export-ready gradient with precise control over color, direction and transparency.</p></div><span className="tool-status"><i /> LIVE PREVIEW</span></div>
+      <div className="gradient-layout"><section className="settings-panel"><div className="panel-heading"><div><span className="label">GRADIENT SETTINGS</span><strong>Configure output</strong></div><span className="step-type">TOOL 01</span></div>
+        <div className="setting-group"><label>GRADIENT TYPE</label><div className="segmented wide"><button className={type === 'linear' ? 'selected' : ''} onClick={() => setType('linear')}>Linear</button><button className={type === 'radial' ? 'selected' : ''} onClick={() => setType('radial')}>Radial</button></div></div>
+        <div className="setting-group"><label>COLOR STOPS</label><div className="color-row"><div className="color-field"><span className="swatch" style={{ background: start }} /><input value={start} onChange={e => setStart(e.target.value)} /></div><span className="stop-arrow">→</span><div className="color-field"><span className="swatch" style={{ background: end }} /><input value={end} onChange={e => setEnd(e.target.value)} /></div></div><div className="gradient-bar" style={{ background: gradient }} /></div>
+        <div className="setting-group"><label>DIRECTION <output>{direction}°</output></label><input type="range" min="0" max="360" value={direction} onChange={e => setDirection(Number(e.target.value))} /><div className="direction-grid">{directions.map((item, i) => <button key={item} className={direction === i * 45 ? 'selected' : ''} onClick={() => setDirection(i * 45)}>{item}</button>)}</div></div>
+        <div className="setting-group"><label>OPACITY <output>{opacity}%</output></label><input type="range" min="0" max="100" value={opacity} onChange={e => setOpacity(Number(e.target.value))} /></div>
+        <div className="settings-footer"><button className="reset-btn" onClick={reset}><RotateCcw size={14} /> Reset</button><span className="auto-note"><i /> updates automatically</span></div>
+      </section>
+      <section className="gradient-preview"><div className="preview-toolbar"><div><span className="label">OUTPUT PREVIEW</span><strong>gradient.png</strong></div><div className="preview-actions"><button className="secondary-btn" onClick={copyCss}>{copied ? <Check size={15} /> : <Copy size={15} />} {copied ? 'Copied' : 'Copy CSS'}</button><button className="download-btn"><Download size={15} /> Download PNG <ChevronDown size={14} /></button></div></div><div className="large-canvas"><div className="gradient-art" style={{ background: gradient, opacity: opacity / 100 }}><div className="art-mark">PNG</div><span>easy-png-tools</span></div></div><div className="code-block"><div><span className="label">GENERATED CSS</span><button className="icon-btn" onClick={copyCss} aria-label="Copy CSS"><Copy size={14} /></button></div><pre>{css}</pre></div></section></div>
+    </div><footer className="footer"><span>easy-png-tools <b>v2.4.0</b></span><span>gradient tool · local-only</span><span>© 2024</span></footer>
+  </main>
+}
diff --git a/refs/app/easy-png-tools/list-tools/page.tsx b/refs/app/easy-png-tools/list-tools/page.tsx
new file mode 100644
index 0000000..d7d2351
--- /dev/null
+++ b/refs/app/easy-png-tools/list-tools/page.tsx
@@ -0,0 +1,27 @@
+"use client"
+
+import Link from "next/link"
+import { useMemo, useState } from "react"
+import { ArrowUpRight, FileImage, Filter, Search, Sparkles } from "lucide-react"
+
+const groups = [
+  { name: "CONVERT", tools: [["Convert JPG to PNG", "Re-encode JPEG files as lossless PNG while preserving transparency.", "/easy-png-tools/gradient"], ["Convert WebP to PNG", "Turn WebP images into a universal PNG format for any workflow."], ["PNG to Base64", "Encode an image as a base64 string for embedding in code or styles."], ["PNG to Data URI", "Build a complete data URI ready for HTML and CSS."], ["Convert PNG to JPG", "Composite transparency over a selected backdrop and export JPEG."]] },
+  { name: "TRANSPARENCY", tools: [["Remove background PNG", "Remove a solid background by color, tolerance, or edge-connected regions.", "/easy-png-tools/background-remover"], ["Extract alpha mask", "Turn the alpha channel into a clean black-and-white mask."], ["Round corners PNG", "Clip the image corners by a precise radius percentage."], ["Outline PNG", "Add a colored ring around opaque content with adjustable thickness."], ["Change PNG opacity", "Multiply the alpha channel while keeping the original colors unchanged."]] },
+  { name: "COLOR", tools: [["Create gradient PNG", "Generate a smooth transition between two colors with direction controls.", "/easy-png-tools/gradient"], ["Grayscale PNG", "Convert the image to luminance-based shades of gray."], ["Invert colors PNG", "Invert every color channel while leaving alpha untouched."], ["Brightness & contrast", "Adjust brightness and contrast across a controlled range."], ["Temperature PNG", "Make an image warmer or cooler with a single precise control."]] },
+  { name: "GEOMETRY", tools: [["Resize PNG", "Scale an image with bilinear interpolation and optional aspect lock."], ["Crop PNG", "Cut a rectangular area with exact coordinates and dimensions."], ["Rotate PNG", "Rotate by 90, 180, or 270 degrees without quality loss."], ["Flip PNG", "Mirror the image horizontally or vertically."], ["Add padding to PNG", "Expand the canvas on all sides by a chosen number of pixels."]] },
+  { name: "FILTERS", tools: [["Blur PNG", "Apply a fast Gaussian-style blur with transparent edge handling."], ["Sharpen PNG", "Emphasize edges with an adjustable sharpening kernel."], ["Vignette PNG", "Smoothly darken the image edges while preserving the center."], ["JPEG artifacts", "Simulate low-quality JPEG recompression for testing."]] },
+  { name: "ANALYZE", tools: [["PNG info", "Inspect dimensions, alpha presence, and unique color count."], ["Check grayscale", "Report whether the image contains only shades of gray."], ["Check transparency", "Detect transparent and semi-transparent pixels."], ["PNG orientation", "Classify the image as portrait, landscape, or square."]] },
+]
+
+export default function ListToolsPage() {
+  const [query, setQuery] = useState("")
+  const [active, setActive] = useState("ALL")
+  const filtered = useMemo(() => groups.map(group => ({ ...group, tools: group.tools.filter(([name, description]) => (active === "ALL" || active === group.name) && `${name} ${description}`.toLowerCase().includes(query.toLowerCase())) })).filter(group => group.tools.length), [query, active])
+  return <main className="catalog-page"><header className="catalog-nav"><Link href="/" className="catalog-brand">easy-png-tools</Link><nav><Link href="/">Workspace</Link><Link className="current" href="/easy-png-tools/list-tools">Catalog</Link></nav><span className="catalog-nav-status">LOCAL MODE / READY</span></header>
+    <div className="catalog-head"><div><div className="eyebrow">EASY-PNG-TOOLS / CATALOG</div><h1>Tool catalog</h1><p>Focused utilities for working with PNG. Inspect, transform, and export — locally in your browser.</p></div><div className="catalog-total"><b>32</b><span>TOOLS<br />AVAILABLE</span></div></div>
+    <div className="catalog-toolbar"><label className="catalog-search"><Search size={16} /><input aria-label="Search tools" placeholder="Search tools..." value={query} onChange={e => setQuery(e.target.value)} /></label><div className="catalog-filters"><Filter size={15} />{["ALL", ...groups.map(g => g.name)].map(name => <button key={name} className={active === name ? "active" : ""} onClick={() => setActive(name)}>{name}</button>)}</div></div>
+    <div className="catalog-groups">{filtered.map(group => <section className="catalog-group" key={group.name}><div className="group-title"><span>{group.name}</span><i>{String(group.tools.length).padStart(2, "0")} TOOLS</i></div><div className="tool-cards">{group.tools.map(([name, description, href], index) => <Link className="tool-card" href={href || "#"} key={name} onClick={e => { if (!href) e.preventDefault() }}><span className="tool-icon"><FileImage size={19} /></span><span className="tool-copy"><strong>{name}</strong><span>{description}</span></span><span className="tool-index">{String(index + 1).padStart(2, "0")}</span><ArrowUpRight size={16} className="tool-arrow" /></Link>)}</div></section>)}</div>
+    {!filtered.length && <div className="catalog-empty"><Sparkles size={18} /> No tools match your search.</div>}
+    <footer className="catalog-footer">ALL OPERATIONS RUN LOCALLY <span>•</span> YOUR FILES NEVER LEAVE THIS DEVICE</footer>
+  </main>
+}
diff --git a/refs/app/globals.css b/refs/app/globals.css
new file mode 100644
index 0000000..3e1e0d5
--- /dev/null
+++ b/refs/app/globals.css
@@ -0,0 +1,15 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@import 'shadcn/tailwind.css';
+@theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-border: var(--line); --font-sans: 'IBM Plex Sans', sans-serif; --font-mono: 'IBM Plex Mono', monospace; }
+:root { color-scheme: light; --background:#eef1f4; --foreground:#17212b; --panel:#f8fafb; --line:#cbd3da; --muted:#6d7883; --blue:#1769d2; --cyan:#00a8c7; --amber:#bd7411; --radius:4px; }
+* { box-sizing:border-box; border-color:var(--line); } html { background:var(--background); } body { margin:0; background:var(--background); color:var(--foreground); font-family:var(--font-sans); } button,input { font:inherit; } button { cursor:pointer; }
+.app-shell { min-height:100vh; background-color:var(--background); background-image:linear-gradient(#dce2e7 1px,transparent 1px),linear-gradient(90deg,#dce2e7 1px,transparent 1px); background-size:32px 32px; }.dark-mode { --background:#11171d; --foreground:#e8eef2; --panel:#182129; --line:#33414c; --muted:#91a0ac; --blue:#54a2ff; background-image:linear-gradient(#1b252d 1px,transparent 1px),linear-gradient(90deg,#1b252d 1px,transparent 1px); }
+.topbar,.brand,.top-actions,.language,.status,.title-row,.pipeline-head,.step-heading,.step-tools,.pipeline-footer,.preview-top,.footer { display:flex; align-items:center; }.topbar { height:64px; border-bottom:1px solid var(--line); background:var(--panel); justify-content:space-between; padding:0 clamp(20px,4vw,64px); }.brand { gap:10px; font:600 14px var(--font-mono); }.brand-mark { display:grid; place-items:center; width:30px; height:30px; background:var(--blue); color:white; font-size:11px; }.version,.label,.step-type,.eyebrow { font:10px var(--font-mono); letter-spacing:.12em; color:var(--muted); }.version,.eyebrow { color:var(--blue); }.top-actions { gap:16px; }.status { gap:7px; color:var(--muted); font:10px var(--font-mono); letter-spacing:.08em; }.status i,.auto-note i { width:6px; height:6px; background:#25a96a; border-radius:50%; }.icon-btn { display:grid; place-items:center; border:0; background:transparent; color:var(--muted); padding:6px; }.language { border:1px solid var(--line); }.language button { border:0; background:transparent; padding:6px 9px; color:var(--muted); font:10px var(--font-mono); }.language .active { background:var(--foreground); color:var(--background); }
+.page-grid { width:100%; max-width:none; margin:auto; padding:60px clamp(24px,4vw,72px) 72px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(520px,.95fr); gap:56px; align-items:start; }.preview-panel { position:sticky; top:24px; margin-top:0; min-width:0; }.preview-top { justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:14px; }.preview-actions { display:flex; align-items:center; gap:18px; }.preview-meta { display:flex; gap:24px; }.preview-meta div { display:grid; gap:5px; }.preview-meta span { font:10px var(--font-mono); color:var(--muted); }.preview-meta b { font:600 11px var(--font-mono); }.workspace,.preview-panel { min-width:0; }.preview-stack { display:grid; width:100%; min-width:0; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }.preview-tile { width:100%; min-width:0; overflow:hidden; }.history-toggle { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:18px; padding:11px 14px; border:1px solid var(--line); background:transparent; color:var(--muted); font:10px var(--font-mono); letter-spacing:.04em; }.history-toggle:hover { color:var(--foreground); background:var(--panel); }.top-toggle { width:auto; margin:0; padding:8px 10px; }.history-toggle .rotated { transform:rotate(180deg); }.tile-canvas { width:100%; min-width:0; min-height:clamp(300px,22vw,430px); overflow:hidden; }.image-preview { max-width:100%; min-width:0; overflow:hidden; }.eyebrow { margin-bottom:18px; }.eyebrow span { color:var(--muted); margin:0 7px; }.title-row { justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:56px; }h1 { font-size:clamp(36px,4vw,64px); line-height:1; letter-spacing:-.06em; margin:0 0 16px; max-width:700px; font-weight:650; }.lede { color:var(--muted); margin:0; max-width:550px; line-height:1.6; }.file-chip { white-space:nowrap; display:flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--panel); padding:10px 12px; font:11px var(--font-mono); color:var(--muted); }.file-chip b { color:var(--blue); font-weight:500; }.pipeline-head { justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:12px; }.pipeline-head strong,.preview-top strong { display:block; font:600 14px var(--font-mono); margin-top:5px; }.pipeline-head em { color:#25a96a; font-style:normal; font-size:10px; }.add-btn,.reset-btn { border:0; background:transparent; color:var(--blue); display:flex; align-items:center; gap:7px; font-size:12px; }.steps-list { padding-top:14px; display:grid; gap:10px; }.step-card { display:grid; grid-template-columns:46px 20px 1fr; min-height:138px; border:1px solid var(--line); background:var(--panel); }.step-index { font:11px var(--font-mono); color:var(--blue); padding:17px 0 0 15px; }.drag { color:var(--line); margin-top:17px; }.step-body { padding:15px 18px 18px; }.step-heading { justify-content:space-between; gap:15px; }.step-heading h2 { font:600 15px var(--font-mono); margin:5px 0 18px; }.step-tools { gap:13px; }.step-tools button { border:0; background:none; color:var(--muted); }.check { color:#238354; font:10px var(--font-mono); display:flex; align-items:center; gap:4px; }.controls { display:grid; grid-template-columns:1.1fr 1fr 1.2fr; gap:16px; }.controls.compact { grid-template-columns:1fr 1fr; }.control-block label { display:flex; justify-content:space-between; margin-bottom:8px; color:var(--muted); font:10px var(--font-mono); letter-spacing:.08em; }.control-block output { color:var(--foreground); }.color-field { display:flex; align-items:center; gap:8px; border:1px solid var(--line); height:32px; padding:0 8px; }.swatch { width:14px; height:14px; border:1px solid var(--line); }.swatch.dark { background:#16202b; }.color-field input { min-width:0; flex:1; border:0; outline:0; color:var(--foreground); background:transparent; font:11px var(--font-mono); }.control-block input[type=range] { width:100%; accent-color:var(--blue); }.segmented { display:flex; border:1px solid var(--line); height:32px; }.segmented button { flex:1; border:0; border-right:1px solid var(--line); background:transparent; color:var(--muted); font:10px var(--font-mono); }.segmented .selected { background:var(--blue); color:white; }.transform-note,.auto-note { display:flex; align-items:center; gap:8px; color:var(--muted); font:11px var(--font-mono); }.pipeline-footer { justify-content:space-between; padding-top:18px; }.auto-note { color:var(--muted); }.auto-note i { display:inline-block; }.preview-panel { position:sticky; top:24px; align-self:start; border:1px solid var(--line); background:var(--panel); padding:18px; }.preview-top { justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:15px; }.preview-stack { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:16px 0; }.preview-tile { border:1px solid var(--line); background:var(--background); }.preview-tile.active { border-color:var(--blue); }.tile-canvas { aspect-ratio:1.35; display:grid; place-items:center; padding:16px; background-color:#e4e8eb; background-image:linear-gradient(45deg,#d2d8dc 25%,transparent 25%),linear-gradient(-45deg,#d2d8dc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d2d8dc 75%),linear-gradient(-45deg,transparent 75%,#d2d8dc 75%); background-size:14px 14px; background-position:0 0,0 7px,7px -7px,-7px 0; }.image-preview { width:80%; aspect-ratio:1.5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:#16202b; font:600 10px var(--font-mono); }.sample-icon { border:1px solid currentColor; padding:3px 5px; font-size:9px; }.tile-label { display:flex; justify-content:space-between; gap:8px; padding:8px; border-top:1px solid var(--line); font:9px var(--font-mono); color:var(--blue); }.tile-label b { color:var(--muted); font-weight:400; text-align:right; }.preview-meta { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; border-top:1px solid var(--line); padding-top:14px; }.preview-meta span { display:block; color:var(--muted); font:9px var(--font-mono); }.preview-meta b { display:block; margin-top:5px; font:11px var(--font-mono); }.download-btn { width:100%; margin-top:18px; height:42px; display:flex; justify-content:center; align-items:center; gap:9px; border:0; background:var(--blue); color:white; font:11px var(--font-mono); }.preview-note { color:var(--muted); font-size:11px; line-height:1.5; margin:12px 0 0; }.footer { justify-content:space-between; border-top:1px solid var(--line); padding:16px clamp(20px,4vw,72px); color:var(--muted); font:10px var(--font-mono); }.footer span { display:flex; gap:7px; align-items:center; }.footer b { color:var(--blue); font-weight:400; }
+@media (max-width:1200px) { .page-grid { grid-template-columns:minmax(0,1fr) minmax(420px,.9fr); gap:32px; } }.dark-mode .tile-canvas { background-color:#202a31; background-image:linear-gradient(45deg,#29343c 25%,transparent 25%),linear-gradient(-45deg,#29343c 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#29343c 75%),linear-gradient(-45deg,transparent 75%,#29343c 75%); }.dark-mode .image-preview { color:#16202b; }
+@media (max-width:800px) { .topbar { padding:0 16px; }.status { display:none; }.page-grid { display:block; padding:36px 16px 48px; }.title-row { display:block; margin-bottom:40px; }.file-chip { margin-top:22px; width:max-content; }.controls,.controls.compact { grid-template-columns:1fr; }.preview-panel { position:static; margin-top:36px; }.footer { padding:0 16px 20px; gap:12px; flex-wrap:wrap; }.footer span:last-child { display:none; } }
+@media (max-width:1100px) { .preview-stack { grid-template-columns:repeat(3,minmax(220px,1fr)); } }.preview-actions { flex-wrap:wrap; justify-content:flex-end; }.download-btn { white-space:nowrap; } @media (max-width:800px) { .preview-top { align-items:flex-start; flex-direction:column; gap:18px; }.preview-actions { width:100%; justify-content:space-between; }.preview-meta { gap:14px; }.preview-stack { grid-template-columns:repeat(2,minmax(0,1fr)); }.tile-canvas { min-height:260px; } } @media (max-width:480px) { .preview-stack { grid-template-columns:1fr; }.preview-meta { width:100%; justify-content:space-between; }.title-row h1 { font-size:40px; }.pipeline-footer { align-items:flex-start; flex-direction:column; gap:12px; } }
+.tool-page { width:100%; padding:60px clamp(24px,4vw,72px) 72px; }.tool-title { display:flex; justify-content:space-between; align-items:end; gap:32px; margin-bottom:48px; }.tool-title h1 { margin-bottom:14px; }.tool-status { display:flex; align-items:center; gap:8px; color:#25a96a; font:10px var(--font-mono); white-space:nowrap; }.tool-status i,.auto-note i { width:6px; height:6px; background:#25a96a; border-radius:50%; }.gradient-layout { display:grid; grid-template-columns:minmax(360px,.7fr) minmax(0,1.3fr); gap:56px; align-items:start; }.settings-panel,.gradient-preview { background:var(--panel); border:1px solid var(--line); }.panel-heading,.preview-toolbar { display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid var(--line); }.panel-heading strong,.preview-toolbar strong { display:block; margin-top:5px; font:600 14px var(--font-mono); }.setting-group { padding:22px 20px; border-bottom:1px solid var(--line); }.setting-group label { display:flex; justify-content:space-between; margin-bottom:12px; font:10px var(--font-mono); letter-spacing:.1em; color:var(--muted); }.setting-group output { color:var(--blue); }.color-row { display:flex; align-items:center; gap:10px; }.color-row .color-field { flex:1; }.stop-arrow { color:var(--muted); }.gradient-bar { height:14px; margin-top:14px; border:1px solid var(--line); }.direction-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:14px; }.direction-grid button,.secondary-btn { border:1px solid var(--line); background:transparent; color:var(--muted); padding:8px 6px; font:10px var(--font-mono); }.direction-grid button.selected,.secondary-btn:hover { background:var(--foreground); color:var(--background); }.wide { width:100%; }.settings-footer { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; }.large-canvas { padding:24px; background-color:#202a31; background-image:linear-gradient(45deg,#29343c 25%,transparent 25%),linear-gradient(-45deg,#29343c 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#29343c 75%),linear-gradient(-45deg,transparent 75%,#29343c 75%); background-size:28px 28px; background-position:0 0,0 14px,14px -14px,-14px 0; }.gradient-art { min-height:clamp(420px,42vw,680px); display:grid; place-content:center; justify-items:center; color:#fff; font:12px var(--font-mono); }.art-mark { display:grid; place-items:center; width:70px; height:70px; margin-bottom:12px; border:1px solid rgba(255,255,255,.65); font-size:16px; }.code-block { padding:16px 20px; }.code-block > div { display:flex; justify-content:space-between; align-items:center; }.code-block pre { margin:12px 0 0; padding:14px; background:var(--background); color:var(--blue); font:12px/1.6 var(--font-mono); white-space:pre-wrap; }.preview-actions { display:flex; align-items:center; gap:10px; }.secondary-btn { display:flex; align-items:center; gap:8px; }.dark-mode .large-canvas { background-color:#202a31; }
+.remover-layout { display:grid; grid-template-columns:minmax(360px,.62fr) minmax(0,1.38fr); gap:56px; align-items:start; }.remover-preview { min-width:0; background:var(--panel); border:1px solid var(--line); }.comparison-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; padding:20px; }.image-card { min-width:0; }.image-label { display:flex; justify-content:space-between; margin-bottom:10px; font:10px var(--font-mono); color:var(--muted); }.image-label span { color:var(--blue); }.image-label b { font-weight:400; }.remover-canvas { position:relative; min-height:clamp(360px,30vw,560px); overflow:hidden; display:grid; place-items:center; border:1px solid var(--line); }.source-canvas { background:#e8eef2; }.subject { width:74%; height:68%; display:grid; place-items:center; color:rgba(255,255,255,.85); font:600 14px var(--font-mono); text-shadow:0 1px 2px #17212b; transition:all .2s ease; }.subject-source { transform:rotate(-3deg); }.canvas-size { position:absolute; right:10px; bottom:9px; font:9px var(--font-mono); color:var(--muted); }.result-meta { display:flex; gap:24px; padding:16px 20px; border-top:1px solid var(--line); font:10px var(--font-mono); color:var(--muted); }.result-meta b { color:var(--foreground); font-weight:600; margin-left:6px; }.processed { display:flex; align-items:center; gap:5px; color:#25a96a; font:10px var(--font-mono); }.color-reference,.range-hints { display:flex; justify-content:space-between; margin-top:10px; color:var(--muted); font:10px var(--font-mono); }.color-reference { justify-content:flex-start; gap:8px; }.color-reference span { width:9px; height:9px; border:1px solid var(--line); }.native-color { width:30px; padding:0!important; border:0!important; }.toggle-group label { align-items:center; cursor:pointer; }.toggle-group input { display:none; }.toggle { width:32px; height:18px; border:1px solid var(--line); position:relative; }.toggle:after { content:''; position:absolute; width:10px; height:10px; background:var(--muted); top:3px; left:3px; transition:transform .2s; }.toggle-group input:checked + .toggle { background:var(--blue); border-color:var(--blue); }.toggle-group input:checked + .toggle:after { background:white; transform:translateX(14px); }.toggle-group p { margin:8px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }.catalog-nav { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:-64px 0 64px; padding:18px 0; border-bottom:1px solid var(--line); }.catalog-brand { color:var(--foreground); font:600 14px var(--font-mono); text-decoration:none; }.catalog-nav nav { display:flex; gap:24px; }.catalog-nav nav a,.catalog-nav-status { color:var(--muted); font:10px var(--font-mono); text-decoration:none; }.catalog-nav nav a:hover,.catalog-nav nav a.current { color:var(--blue); }.catalog-nav-status { color:#25a96a; }.catalog-page { width:100%; max-width:1680px; margin:0 auto; padding:64px clamp(24px,4vw,72px) 72px; }.catalog-head { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; padding-bottom:42px; border-bottom:1px solid var(--line); }.catalog-head h1 { margin:12px 0 14px; }.catalog-head p { max-width:660px; margin:0; color:var(--muted); font:14px/1.6 var(--font-mono); }.catalog-total { display:flex; align-items:center; gap:14px; color:var(--muted); font:10px/1.4 var(--font-mono); text-align:right; }.catalog-total b { color:var(--blue); font:400 clamp(48px,5vw,76px)/.9 var(--font-mono); letter-spacing:-.08em; }.catalog-toolbar { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 0 42px; }.catalog-search { display:flex; align-items:center; gap:12px; width:min(420px,100%); padding:12px 14px; border:1px solid var(--line); color:var(--muted); }.catalog-search input { width:100%; border:0; outline:0; background:transparent; color:var(--foreground); font:12px var(--font-mono); }.catalog-filters { display:flex; align-items:center; gap:6px; flex-wrap:wrap; color:var(--muted); }.catalog-filters button { padding:8px 10px; border:1px solid transparent; background:transparent; color:var(--muted); font:10px var(--font-mono); }.catalog-filters button:hover,.catalog-filters button.active { border-color:var(--blue); color:var(--blue); }.catalog-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:56px 28px; }.catalog-group { min-width:0; }.group-title { display:flex; justify-content:space-between; align-items:center; padding-bottom:12px; border-bottom:1px solid var(--line); color:var(--foreground); font:600 11px var(--font-mono); letter-spacing:.12em; }.group-title i { color:var(--muted); font:10px var(--font-mono); font-style:normal; }.tool-cards { display:grid; gap:10px; padding-top:14px; }.tool-card { display:grid; grid-template-columns:42px minmax(0,1fr) 24px 18px; align-items:center; gap:14px; min-height:106px; padding:16px; border:1px solid var(--line); background:var(--panel); color:var(--foreground); text-decoration:none; transition:border-color .18s,transform .18s,background .18s; }.tool-card:hover { border-color:var(--blue); background:var(--panel-strong); transform:translateY(-2px); }.tool-icon { display:grid; place-items:center; width:42px; height:42px; background:color-mix(in srgb,var(--blue) 12%,transparent); color:var(--blue); }.tool-copy { min-width:0; display:grid; gap:8px; }.tool-copy strong { font:600 13px var(--font-mono); }.tool-copy span { color:var(--muted); font:12px/1.5 var(--font-mono); }.tool-index { color:var(--muted); font:10px var(--font-mono); align-self:start; }.tool-arrow { color:var(--blue); opacity:0; transition:opacity .18s,transform .18s; }.tool-card:hover .tool-arrow { opacity:1; transform:translate(2px,-2px); }.catalog-empty { display:flex; gap:10px; align-items:center; padding:40px; border:1px dashed var(--line); color:var(--muted); font:12px var(--font-mono); }.catalog-footer { margin-top:64px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font:10px var(--font-mono); }.catalog-footer span { margin:0 8px; color:var(--blue); } @media (max-width:800px) { .catalog-nav { margin:-36px 0 36px; }.catalog-nav-status { display:none; }.catalog-nav nav { gap:14px; }.catalog-page { padding:36px 16px 48px; }.catalog-head { align-items:flex-start; flex-direction:column; gap:24px; }.catalog-total { text-align:left; }.catalog-toolbar { align-items:stretch; flex-direction:column; padding-bottom:30px; }.catalog-search { width:100%; }.catalog-groups { grid-template-columns:1fr; gap:36px; }.tool-card { min-height:96px; grid-template-columns:38px minmax(0,1fr) 18px; gap:12px; }.tool-icon { width:38px; height:38px; }.tool-index { display:none; }.tool-arrow { opacity:1; } }
+@media (max-width:800px) { .tool-page { padding:36px 16px 48px; }.tool-title { display:block; }.tool-status { margin-top:22px; }.gradient-layout,.remover-layout { grid-template-columns:1fr; gap:24px; }.gradient-preview,.remover-preview { order:-1; }.gradient-art { min-height:340px; }.preview-toolbar { align-items:flex-start; flex-direction:column; gap:16px; }.preview-actions { width:100%; justify-content:flex-end; }.comparison-grid { grid-template-columns:1fr; } .remover-canvas { min-height:300px; } .result-meta { flex-wrap:wrap; gap:12px 18px; } }
diff --git a/refs/app/layout.tsx b/refs/app/layout.tsx
new file mode 100644
index 0000000..a7c1a61
--- /dev/null
+++ b/refs/app/layout.tsx
@@ -0,0 +1,18 @@
+import { Analytics } from '@vercel/analytics/next'
+import type { Metadata, Viewport } from 'next'
+import './globals.css'
+
+export const metadata: Metadata = {
+  title: 'easy-png-tools / Demo',
+  description: 'Technical workspace for building PNG processing pipelines.',
+  generator: 'easy-png-tools',
+}
+
+export const viewport: Viewport = {
+  colorScheme: 'light',
+  themeColor: '#eef1f4',
+}
+
+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  return <html lang="ru" className="bg-background"><body className="antialiased">{children}{process.env.NODE_ENV === 'production' && <Analytics />}</body></html>
+}
diff --git a/refs/app/page.tsx b/refs/app/page.tsx
new file mode 100644
index 0000000..e85d25f
--- /dev/null
+++ b/refs/app/page.tsx
@@ -0,0 +1,40 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { ArrowDownToLine, Check, ChevronDown, CircleHelp, Download, GripVertical, Link2, Moon, MoreHorizontal, Plus, RotateCcw, Settings2, SlidersHorizontal, Sun, Upload, X } from 'lucide-react'
+
+const initialSteps = [
+  { id: 1, title: 'Gradient background', type: 'BACKGROUND' },
+  { id: 2, title: 'Remove background', type: 'TRANSFORM' },
+  { id: 3, title: 'Add outline', type: 'STYLE' },
+  { id: 4, title: 'Round corners', type: 'STYLE' },
+]
+
+function PreviewTile({ label, sublabel, style, active = false }: { label: string; sublabel: string; style: React.CSSProperties; active?: boolean }) {
+  return <div className={`preview-tile ${active ? 'active' : ''}`}><div className="tile-canvas"><div className="image-preview" style={style}><span className="sample-icon">PNG</span><span>easy-png-tools</span></div></div><div className="tile-label"><span>{label}</span><b>{sublabel}</b></div></div>
+}
+
+export default function Page() {
+  const [steps, setSteps] = useState(initialSteps)
+  const [angle, setAngle] = useState(135)
+  const [radius, setRadius] = useState(18)
+  const [outline, setOutline] = useState(2)
+  const [language, setLanguage] = useState('RU')
+  const [dark, setDark] = useState(false)
+  const [showIntermediate, setShowIntermediate] = useState(true)
+  const [gradient, setGradient] = useState('#DCEBFF')
+  const gradientStyle = useMemo(() => ({ background: `linear-gradient(${angle}deg, ${gradient}, #8BC8F5)` }), [angle, gradient])
+  const finalStyle = { ...gradientStyle, borderRadius: radius, boxShadow: `0 0 0 ${outline}px #16202B` }
+
+  return <main className={dark ? 'app-shell dark-mode' : 'app-shell'}>
+    <header className="topbar"><div className="brand"><span className="brand-mark">EP</span><span>easy-png-tools</span><span className="version">/ DEMO</span></div><div className="top-actions"><span className="status"><i /> AUTO PIPELINE</span><button className="icon-btn" aria-label="Help"><CircleHelp size={17} /></button><button className="icon-btn" aria-label="Toggle theme" onClick={() => setDark(!dark)}>{dark ? <Sun size={17} /> : <Moon size={17} />}</button><div className="language"><button className={language === 'RU' ? 'active' : ''} onClick={() => setLanguage('RU')}>RU</button><button className={language === 'EN' ? 'active' : ''} onClick={() => setLanguage('EN')}>EN</button></div></div></header>
+    <div className="page-grid">
+      <section className="workspace"><div className="eyebrow">PNG PROCESSING <span>/</span> WORKSPACE</div><div className="title-row"><div><h1>Build your image pipeline.</h1><p className="lede">Chain simple tools together. Every change is processed automatically and previewed at each stage.</p></div><div className="file-chip"><Upload size={15} /><span>source.png</span><b>1.8 MB</b></div></div>
+        <div className="pipeline-head"><div><span className="label">PROCESSING PIPELINE</span><strong>{steps.length} active steps <em>• LIVE</em></strong></div><button className="add-btn" onClick={() => setSteps([...steps, { id: Date.now(), title: 'New adjustment', type: 'STYLE' }])}><Plus size={15} /> Add tool</button></div>
+        <div className="steps-list">{steps.map((step, index) => <article className="step-card" key={step.id}><div className="step-index">{String(index + 1).padStart(2, '0')}</div><GripVertical className="drag" size={16} /><div className="step-body"><div className="step-heading"><div><span className="step-type">{step.type}</span><h2>{step.title}</h2></div><div className="step-tools"><span className="check"><Check size={12} /> AUTO</span><button aria-label="Remove step" onClick={() => setSteps(steps.filter(item => item.id !== step.id))}><X size={16} /></button><MoreHorizontal size={17} /></div></div>{index === 0 ? <div className="controls"><div className="control-block"><label>COLOR</label><div className="color-field"><span className="swatch" style={{ background: gradient }} /><input value={gradient} onChange={e => setGradient(e.target.value)} aria-label="Gradient color" /><ChevronDown size={14} /></div></div><div className="control-block"><label>DIRECTION <output>{angle}°</output></label><input type="range" min="0" max="360" value={angle} onChange={e => setAngle(Number(e.target.value))} /></div><div className="control-block"><label>OPACITY <output>100%</output></label><div className="segmented"><button className="selected">100</button><button>75</button><button>50</button><button>25</button></div></div></div> : index === 2 ? <div className="controls compact"><div className="control-block"><label>WIDTH <output>{outline}px</output></label><input type="range" min="0" max="8" value={outline} onChange={e => setOutline(Number(e.target.value))} /></div><div className="control-block"><label>COLOR</label><div className="color-field"><span className="swatch dark" /><input value="#16202B" readOnly /></div></div></div> : index === 3 ? <div className="controls compact"><div className="control-block"><label>RADIUS <output>{radius}px</output></label><input type="range" min="0" max="48" value={radius} onChange={e => setRadius(Number(e.target.value))} /></div><div className="toggle-row"><span>Preserve aspect ratio</span><button className="toggle on" aria-label="Preserve aspect ratio"><i /></button></div></div> : <div className="transform-note"><SlidersHorizontal size={15} /> Automatic subject detection enabled</div>}</div></article>)}</div>
+        <div className="pipeline-footer"><button className="reset-btn" onClick={() => setSteps(initialSteps)}><RotateCcw size={14} /> Reset pipeline</button><span className="auto-note"><i /> changes are applied automatically</span></div>
+      </section>
+      <section className="preview-panel"><div className="preview-top"><div><span className="label">PIPELINE OUTPUTS</span><strong>Visual history</strong></div><div className="preview-actions"><button className="history-toggle top-toggle" onClick={() => setShowIntermediate(!showIntermediate)} aria-expanded={showIntermediate}>{showIntermediate ? 'Hide intermediate' : 'Show intermediate'} <ChevronDown size={15} className={showIntermediate ? 'rotated' : ''} /></button><button className="download-btn"><Download size={16} /> Download result <ArrowDownToLine size={14} /></button><div className="preview-meta"><div><span>DIMENSIONS</span><b>1200 × 800 px</b></div><div><span>FORMAT</span><b>PNG-24</b></div><div><span>SIZE</span><b>1.2 MB</b></div></div><button className="icon-btn" aria-label="Preview settings"><Settings2 size={17} /></button></div></div><div className="preview-stack"><PreviewTile label="SOURCE" sublabel="original.png · 1200 × 800" style={{ background: '#8d9aa5' }} />{showIntermediate && <><PreviewTile label="STEP 01" sublabel="gradient applied" style={gradientStyle} /><PreviewTile label="STEP 02" sublabel="background removed" style={{ ...gradientStyle, clipPath: 'inset(10% 8% 10% 8% round 12px)' }} /><PreviewTile label="STEP 03" sublabel="outline added" style={{ ...gradientStyle, boxShadow: `0 0 0 ${outline}px #16202B` }} /></>}<PreviewTile label="FINAL OUTPUT" sublabel="ready · PNG-24" style={finalStyle} active /></div><p className="preview-note">Output is generated in-browser. Your files never leave this device.</p></section>
+    </div><footer className="footer"><span>easy-png-tools <b>v2.4.0</b></span><span><Link2 size={13} /> pipeline is local-only</span><span>© 2024</span></footer>
+  </main>
+}
diff --git a/refs/components.json b/refs/components.json
new file mode 100644
index 0000000..45921ec
--- /dev/null
+++ b/refs/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
diff --git a/refs/components/ui/button.tsx b/refs/components/ui/button.tsx
new file mode 100644
index 0000000..b520e87
--- /dev/null
+++ b/refs/components/ui/button.tsx
@@ -0,0 +1,58 @@
+import { Button as ButtonPrimitive } from '@base-ui/react/button'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+        outline:
+          'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+        ghost:
+          'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
+        destructive:
+          'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default:
+          'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        icon: 'size-8',
+        'icon-xs':
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        'icon-sm':
+          'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+        'icon-lg': 'size-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+function Button({
+  className,
+  variant = 'default',
+  size = 'default',
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
diff --git a/refs/extract-static.mjs b/refs/extract-static.mjs
new file mode 100644
index 0000000..b22c638
--- /dev/null
+++ b/refs/extract-static.mjs
@@ -0,0 +1,118 @@
+import { readFileSync, writeFileSync, mkdirSync, readdirSync, statSync } from 'node:fs';
+import { join, dirname, basename } from 'node:path';
+
+// Usage: node extract-static.mjs <source-out-dir> <dest-dir>
+// e.g.   node extract-static.mjs .next\server\app ..\refs-html
+
+const root = process.argv[2];
+const dest = process.argv[3];
+
+// --- CSS: find the compiled chunk and pretty-print it ---
+const cssChunks = join(root, '..', '..', 'static', 'chunks');
+const cssFile = readdirSync(cssChunks)
+  .filter(f => f.endsWith('.css'))
+  .sort((a, b) => statSync(join(cssChunks, b)).size - statSync(join(cssChunks, a)).size)[0];
+const css = readFileSync(join(cssChunks, cssFile), 'utf8');
+
+const prettyCss = css
+  .replace(/\r/g, '')
+  .replace(/\{/g, ' {\n  ')
+  .replace(/;/g, ';\n  ')
+  .replace(/\}/g, '\n}\n')
+  .replace(/\n{3,}/g, '\n\n')
+  .trim();
+
+// --- conservative html formatter ---
+
+const VOID = new Set([
+  'area','base','br','col','embed','hr','img','input',
+  'link','meta','param','source','track','wbr',
+]);
+const RAW = new Set(['pre','textarea','script','style']);
+
+function fmtHtml(html) {
+  const tokens = html.match(
+    /<!--[\s\S]*?-->|<!doctype[^>]*>|<\/?[a-zA-Z][^>]*>|[^<]+|</gi
+  ) || [];
+  const out = [];
+  let depth = 0;
+  let rawTag = null;
+
+  for (const tk of tokens) {
+    if (rawTag) {
+      out.push(tk);
+      if (new RegExp(`</${rawTag}\\s*>`, 'i').test(tk)) {
+        depth--;
+        rawTag = null;
+      }
+      continue;
+    }
+
+    const isOpen = /^<[a-zA-Z]/.test(tk);
+    const isClose = /^<\//.test(tk);
+    let name = '';
+    if (isOpen || isClose) {
+      name = (tk.match(/^<\/?([a-zA-Z0-9-]+)/) || [])[1]?.toLowerCase() || '';
+    }
+
+    if (isOpen && RAW.has(name)) {
+      out.push('\n' + '  '.repeat(depth) + tk);
+      if (!/\/>$/.test(tk)) { depth++; rawTag = name; }
+    } else if (isOpen && !RAW.has(name)) {
+      out.push('\n' + '  '.repeat(depth) + tk);
+      if (!/\/>$/.test(tk) && !VOID.has(name)) depth++;
+    } else if (isClose) {
+      depth = Math.max(0, depth - 1);
+      out.push('\n' + '  '.repeat(depth) + tk);
+    } else if (/^</.test(tk)) {
+      out.push('\n' + '  '.repeat(depth) + tk);
+    } else {
+      const t = tk.replace(/\s+/g, ' ');
+      if (t.trim()) out.push(t);
+    }
+  }
+  return out.join('').replace(/^\n/, '').replace(/\n{3,}/g, '\n\n');
+}
+
+// --- auto-discover pages by walking the export dir for *.html ---
+function walk(dir, base = '') {
+  const found = [];
+  for (const entry of readdirSync(dir)) {
+    const full = join(dir, entry);
+    const rel = base ? join(base, entry) : entry;
+    if (statSync(full).isDirectory()) {
+      found.push(...walk(full, rel));
+    } else if (entry.endsWith('.html')) {
+      found.push(rel);
+    }
+  }
+  return found;
+}
+
+const pages = walk(root)
+  // skip Next internals
+  .filter((rel) => !basename(rel).startsWith('_') && !basename(rel).startsWith('404'))
+  .map((rel) => [rel, basename(rel)]);
+
+console.log(`discovered ${pages.length} page(s):`, pages.map((p) => p[1]).join(', '));
+
+for (const [src, out] of pages) {
+  let html = readFileSync(join(root, src), 'utf8');
+
+  // strip scripts — pure static snapshot
+  html = html.replace(/<script[\s\S]*?<\/script>/g, '');
+  html = html.replace(/<link[^>]+rel="preload"[^>]+as="script"[^>]*>/g, '');
+
+  // inline compiled css instead of linking /_next/...
+  html = html.replace(
+    /<link[^>]+rel="stylesheet"[^>]*>/g,
+    () => '<style>\n' + prettyCss + '\n</style>',
+  );
+
+  html = fmtHtml(html);
+
+  const file = join(dest, out);
+  mkdirSync(dirname(file), { recursive: true });
+  writeFileSync(file, html);
+  console.log('written:', file);
+}
diff --git a/refs/lib/utils.ts b/refs/lib/utils.ts
new file mode 100644
index 0000000..fed2fe9
--- /dev/null
+++ b/refs/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/refs/next-env.d.ts b/refs/next-env.d.ts
new file mode 100644
index 0000000..b691a5f
--- /dev/null
+++ b/refs/next-env.d.ts
@@ -0,0 +1,7 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
+import "./.next/types/root-params.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/refs/next.config.mjs b/refs/next.config.mjs
new file mode 100644
index 0000000..4cd9948
--- /dev/null
+++ b/refs/next.config.mjs
@@ -0,0 +1,11 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  images: {
+    unoptimized: true,
+  },
+}
+
+export default nextConfig
diff --git a/refs/package.json b/refs/package.json
new file mode 100644
index 0000000..5b6a16f
--- /dev/null
+++ b/refs/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "my-project",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "html": "node extract-static.mjs .next\\server\\app ..\\refs-html",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.5.0",
+    "@vercel/analytics": "1.6.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.16.0",
+    "next": "16.3.0",
+    "react": "^19",
+    "react-dom": "^19",
+    "shadcn": "^4.8.0",
+    "tailwind-merge": "^3.3.1",
+    "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.3.3",
+    "@types/node": "^24",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "postcss": "^8.5",
+    "tailwindcss": "^4.3.3",
+    "typescript": "5.7.3"
+  },
+  "pnpm": {
+    "overrides": {
+      "hono": "4.12.25"
+    }
+  }
+}
diff --git a/refs/pnpm-lock.yaml b/refs/pnpm-lock.yaml
new file mode 100644
index 0000000..d1da2f4
--- /dev/null
+++ b/refs/pnpm-lock.yaml
@@ -0,0 +1,3931 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+overrides:
+  hono: 4.12.25
+
+importers:
+
+  .:
+    dependencies:
+      '@base-ui/react':
+        specifier: ^1.5.0
+        version: 1.5.0(@date-fns/tz@1.4.1)(@types/react@19.2.14)(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@vercel/analytics':
+        specifier: 1.6.1
+        version: 1.6.1(next@16.3.0(@babel/core@7.29.7)(@types/node@24.10.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      lucide-react:
+        specifier: ^1.16.0
+        version: 1.17.0(react@19.2.4)
+      next:
+        specifier: 16.3.0
+        version: 16.3.0(@babel/core@7.29.7)(@types/node@24.10.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react:
+        specifier: ^19
+        version: 19.2.4
+      react-dom:
+        specifier: ^19
+        version: 19.2.4(react@19.2.4)
+      shadcn:
+        specifier: ^4.8.0
+        version: 4.10.0(@types/node@24.10.4)(typescript@5.7.3)
+      tailwind-merge:
+        specifier: ^3.3.1
+        version: 3.4.0
+      tw-animate-css:
+        specifier: ^1.4.0
+        version: 1.4.0
+    devDependencies:
+      '@tailwindcss/postcss':
+        specifier: ^4.3.3
+        version: 4.3.3
+      '@types/node':
+        specifier: ^24
+        version: 24.10.4
+      '@types/react':
+        specifier: ^19
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19
+        version: 19.2.3(@types/react@19.2.14)
+      postcss:
+        specifier: ^8.5
+        version: 8.5.6
+      tailwindcss:
+        specifier: ^4.3.3
+        version: 4.3.3
+      typescript:
+        specifier: 5.7.3
+        version: 5.7.3
+
+packages:
+
+  '@alloc/quick-lru@5.2.0':
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+
+  '@babel/code-frame@7.29.7':
+    resolution: {integrity: sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/compat-data@7.29.7':
+    resolution: {integrity: sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/core@7.29.7':
+    resolution: {integrity: sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/generator@7.29.7':
+    resolution: {integrity: sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-annotate-as-pure@7.29.7':
+    resolution: {integrity: sha512-OoK6239jHPuSQOoS0kfTVKn0b/rVTk0seKq4Gd2UMLtmOVLjDC0ki3e+c90Trqv2gMfvJFqkiljrr568+qddiw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-compilation-targets@7.29.7':
+    resolution: {integrity: sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-create-class-features-plugin@7.29.7':
+    resolution: {integrity: sha512-IY3ZD9Tmooqr3TUhc3DUWxiuo8xx1DWLhd5M7hQ+ZWJamqM2BbalrBJb2MisSLoYorOj75U03qULCxQTY9r3hg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-globals@7.29.7':
+    resolution: {integrity: sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-member-expression-to-functions@7.29.7':
+    resolution: {integrity: sha512-j+7JYmk1JYDtACIGj0QJqqWZjoUpMoEikQGADMaHgCMCSDqd2+P32rfcibUNrGOMWrlzK1WJBdxrB3JJQZwWtg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-imports@7.29.7':
+    resolution: {integrity: sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-transforms@7.29.7':
+    resolution: {integrity: sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-optimise-call-expression@7.29.7':
+    resolution: {integrity: sha512-+kmGVjcT9RGYzoDwdwEqEvGgKe3BYq+O1iGzjFubaNgZHwYHP6lsF2Yghf4kEuv9BV7tYDZ913aBW9am6YKong==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-plugin-utils@7.29.7':
+    resolution: {integrity: sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-replace-supers@7.29.7':
+    resolution: {integrity: sha512-atfGXWSeCiF4DnKZIfmJfQRkSw9b9gNNXR1kqKjbhG4pGYCOnkp8OcTB8E3NXjBu8NpheSnOeNKz8KT7UNFTmQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-skip-transparent-expression-wrappers@7.29.7':
+    resolution: {integrity: sha512-brcMGQaVzIeUb+6/bs1Av0f8YuNNjKY2JyvfRCsFuFsdKccEQ5Ges2y74D74NZ1Rz8lKJ9ksJkfqwQFJ/iNEyQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-string-parser@7.29.7':
+    resolution: {integrity: sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.29.7':
+    resolution: {integrity: sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-option@7.29.7':
+    resolution: {integrity: sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helpers@7.29.7':
+    resolution: {integrity: sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.29.7':
+    resolution: {integrity: sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/plugin-syntax-jsx@7.29.7':
+    resolution: {integrity: sha512-TSu8+mHCoEaaCDEZ0I3+6mvTBYR4PCxQwf2z9/r5Tbztv6NaLR3B9thGTTxX2WGuGHJqRiAbKPeGTJ5XWXVg6A==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-typescript@7.29.7':
+    resolution: {integrity: sha512-ngr+82Sh0xMz25TPCZi+nC2iTzjfCdWS2ONXTp/PtSCHCgaCNBpdMqgvJ2ccdLlClVZ7sisIgB914j/JFe+RZA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-modules-commonjs@7.29.7':
+    resolution: {integrity: sha512-j0vCldybPC5b5dwCQOJ21uKtHzt7hxLygJTg9eF1ScfaikEDNfzn94XoW5Fi+seBR0nCyL23xaBFFkq7dTM8XQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-typescript@7.29.7':
+    resolution: {integrity: sha512-jK52h8LaLc7JarhQV2ofeFMts4H7vnOXnqZNA6fYglBTZewRBE51KWt3BUltW1P+KoPsYkHoJeXePuz4zo2LMw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/preset-typescript@7.29.7':
+    resolution: {integrity: sha512-/Foi8vKY2EVbed/1eZx0gJEEwHAIxogrySI7rULcRIvhZzbvoE/b5qG5Ghc0WKAFKOHA9SD1x7RsFlOYdutIiQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/runtime@7.29.7':
+    resolution: {integrity: sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/template@7.29.7':
+    resolution: {integrity: sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/traverse@7.29.7':
+    resolution: {integrity: sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@7.29.7':
+    resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==}
+    engines: {node: '>=6.9.0'}
+
+  '@base-ui/react@1.5.0':
+    resolution: {integrity: sha512-z1gSAlced1yY+iM+mHDEtIkD8UI3Ebs52MuBPxvV6f5hRutk+xvCH/wuB7hDqDzK9JG5FoMz5nhrqtSs1wjt1A==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@date-fns/tz': ^1.2.0
+      '@types/react': ^17 || ^18 || ^19
+      date-fns: ^4.0.0
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@date-fns/tz':
+        optional: true
+      '@types/react':
+        optional: true
+      date-fns:
+        optional: true
+
+  '@base-ui/utils@0.2.9':
+    resolution: {integrity: sha512-x/PDDCYzoqPpjrdyb3VcyylTI2IjUXEtYDGi5foh7KsnmNJIIaVwA2GLgDH1dps1GgXiJbA60hM+AyuTfQzIvw==}
+    peerDependencies:
+      '@types/react': ^17 || ^18 || ^19
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@date-fns/tz@1.4.1':
+    resolution: {integrity: sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==}
+
+  '@dotenvx/dotenvx@1.70.0':
+    resolution: {integrity: sha512-vC/rom87ym8HEyVdzZZS6/PYGg1Z5fmozUZ8l6cw1sYAxdL1lEyvE/JbK8cMFQoq3GsR/P1PiQRY+VXMtDN9bw==}
+    hasBin: true
+
+  '@ecies/ciphers@0.2.6':
+    resolution: {integrity: sha512-patgsRPKGkhhoBjETV4XxD0En4ui5fbX0hzayqI3M8tvNMGUoUvmyYAIWwlxBc1KX5cturfqByYdj5bYGRpN9g==}
+    engines: {bun: '>=1', deno: '>=2.7.10', node: '>=16'}
+    peerDependencies:
+      '@noble/ciphers': ^1.0.0
+
+  '@emnapi/runtime@1.11.3':
+    resolution: {integrity: sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA==}
+
+  '@floating-ui/core@1.7.5':
+    resolution: {integrity: sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==}
+
+  '@floating-ui/dom@1.7.6':
+    resolution: {integrity: sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==}
+
+  '@floating-ui/react-dom@2.1.8':
+    resolution: {integrity: sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/utils@0.2.11':
+    resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
+
+  '@hono/node-server@1.19.14':
+    resolution: {integrity: sha512-GwtvgtXxnWsucXvbQXkRgqksiH2Qed37H9xHZocE5sA3N8O8O8/8FA3uclQXxXVzc9XBZuEOMK7+r02FmSpHtw==}
+    engines: {node: '>=18.14.1'}
+    peerDependencies:
+      hono: 4.12.25
+
+  '@img/colour@1.1.0':
+    resolution: {integrity: sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==}
+    engines: {node: '>=18'}
+
+  '@img/sharp-darwin-arm64@0.35.3':
+    resolution: {integrity: sha512-RMnFX7YQsMoh7lWfcM4NEHHymBX/rLuKNPVM84XE9ONPcaSCDgE7CHIHpSgPcO2xcRthgBy1HfNO319mwhIAkg==}
+    engines: {node: '>=20.9.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-darwin-x64@0.35.3':
+    resolution: {integrity: sha512-Xo+5uFBtLN0BKqieTxiFzFPQAUlBbbH5iBKyRX/z1JrbnYsHTfKJnUfL8+p2TPXr1pXqao4eeL4Rl144uDpK9w==}
+    engines: {node: '>=20.9.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-freebsd-wasm32@0.35.3':
+    resolution: {integrity: sha512-lUxcqWIj2wMQ9BrwNjngcr1gWUr5xgaGThBRqPPalIC2n67Cqj1uPh8NnA/ZhAg8hUbKl+kVHKwgUIwe6ZYPrg==}
+    engines: {node: '>=20.9.0'}
+    os: [freebsd]
+
+  '@img/sharp-libvips-darwin-arm64@1.3.2':
+    resolution: {integrity: sha512-9J6ypZFpQBj4YnePGoq/S38w6nz+vqg5WZLrLGY4YuSemdMq47GMLBPO42MzwdGwpg/agZ7xzZcFHa48xlywfg==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-x64@1.3.2':
+    resolution: {integrity: sha512-m2pW1n6cns9VaubNwsZ+c3CRYjxNQWgJ5gPlnL1nbBcpkBvFm6SCFN5o0psFHI8w9n11NKhFkeEDns98tiqbEw==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-linux-arm64@1.3.2':
+    resolution: {integrity: sha512-dqVSFynCox4C/J8kT16V7SIFAns0IjgLwkvYT7p8LQVmJ5OS5b6tI9IGflxTeuBS//zXeFIUbwt5dwxyZ17cnA==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linux-arm@1.3.2':
+    resolution: {integrity: sha512-1eMLzy92I4J6rmi4mAT8yC3HxOtniyGELlzGbNMLLeqe052ahFQ0h6LFq+lh5DsDIdYViIDst08abvSbcEdLXQ==}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linux-ppc64@1.3.2':
+    resolution: {integrity: sha512-3z0NHDxD6n5I9gc05U1eW1AyRm+Gznzq3naMrthPNqE6oYykcogW0l/jfpJdjYnuNl8R7yI9pNbE1XiUeyq0Aw==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linux-riscv64@1.3.2':
+    resolution: {integrity: sha512-bsb4rI+NldGOsXuej2r8OdSS8+zXDVaCWxyWrcv6kneTOlgAHtZABRzBBCwdsPiD90J4myNJuHpg6kA20ImW/w==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linux-s390x@1.3.2':
+    resolution: {integrity: sha512-/ABshyj8gCpyIrNXnHn4LorDJ0HHm1VhXPBlxZ8zAtfVPAaSafXPGn+sUSIRiwaSBy0mmFjSjiXI5mkcwdChKQ==}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linux-x64@1.3.2':
+    resolution: {integrity: sha512-ITPEtgffGJ0S6G9dRyw/366tJQqFRcHWPHhC+Stpg3Z8AEMrDrTr2lhdz4f/Y/HMbRh//7Z5mBzEpVdi62Oc3w==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.3.2':
+    resolution: {integrity: sha512-zE9EdiUzUmg5mDT5a1rk5fYJ6GWPloTwWBYDS14naqHsL+EaMpDj1AWnpLgh3u0YCORv2Tt50wrcrpYqkP97Kw==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@img/sharp-libvips-linuxmusl-x64@1.3.2':
+    resolution: {integrity: sha512-m0lrLiUt+lBYnCFr8qV/65yMR4E/c7/wf78I5eKTdkEakFAlZ9QlzEM3QIhhAwVeUhLAHLcCq7a7Vszq/oFNZQ==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@img/sharp-linux-arm64@0.35.3':
+    resolution: {integrity: sha512-QgKDspHPnrU+GQ55XPhGwyhC8acLVOOSyAvo1oVfFmrIXLkDNmGWzAfDZ4xK8oSA1qBQrALcHX0G5UZni/SuFQ==}
+    engines: {node: '>=20.9.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linux-arm@0.35.3':
+    resolution: {integrity: sha512-affVWCTLooy8TSxbDx2qkzuDeaWLNVBA+P//FNBirHsXpP2fuBhk5AuboYUnrDnzoXes8GFjpTx0SBFOCRg+FA==}
+    engines: {node: '>=20.9.0'}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linux-ppc64@0.35.3':
+    resolution: {integrity: sha512-sMd8rDxmpLOwv/7N44klFjOD5DUO7FLdjiXDI0hoxYaf7Ar262dQIEkosE98bps+5HPLtp/EvNqeqQtOycP/IA==}
+    engines: {node: '>=20.9.0'}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linux-riscv64@0.35.3':
+    resolution: {integrity: sha512-0Eob78yjlYPfL5vMNWAW55l3R9Y6BQS/gOfe0ZcP9mEz9ohhKSt4im1hayiknXgf8AWrFqMvJcKIdmLmEe7yeQ==}
+    engines: {node: '>=20.9.0'}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linux-s390x@0.35.3':
+    resolution: {integrity: sha512-KgAxQ0DxpNOq1rG2t5cgTgShJFGSuU7XO45cqC+1NVOuZnP6tlgZRuSYOfNupGkHID0o3cJOsw4DVeJpMovcGw==}
+    engines: {node: '>=20.9.0'}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linux-x64@0.35.3':
+    resolution: {integrity: sha512-8pqvxubL2PGdhlPy6GLqzDYMUjyRmKAwKHYKixpdJYBUK7PJ0C029XdsnpFIdgRZG68fZiGdHVWcKPvtiPB4cA==}
+    engines: {node: '>=20.9.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linuxmusl-arm64@0.35.3':
+    resolution: {integrity: sha512-Vz0iQjzzcSX3HCbfwFfCSG/9SCIqyO0mH2sXyiHaAYfBk0cRsCWXRyQYX0ovCK/PAQBbTzQ0dsPQHh5MAFL59w==}
+    engines: {node: '>=20.9.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@img/sharp-linuxmusl-x64@0.35.3':
+    resolution: {integrity: sha512-6O1NPKcDVj9QEdg7Hx549EX8U0rp6yXQERqru6yRN7fGBn32UvIRJUlWnk+8xDCiG76hXVBbX82NZ/ZKr0euIg==}
+    engines: {node: '>=20.9.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@img/sharp-wasm32@0.35.3':
+    resolution: {integrity: sha512-cZ0XkcYGpHZkqW6iCkqTcmUC0CD9DhD5d/qeZlZkfRBn6GnHniZXLUo5+9xw8Iv76YE6LQFN9YNBlKREcCG76w==}
+    engines: {node: '>=20.9.0'}
+
+  '@img/sharp-webcontainers-wasm32@0.35.3':
+    resolution: {integrity: sha512-2rnq7bX3NzeR2T4YWgz8qiG4h3TSdMe+vN1iQXpJleSJ3SM5zQ8Fy2SyyXAWlbxpEZ2Y+Z4u1BePgJEYbSy80Q==}
+    engines: {node: '>=20.9.0'}
+    cpu: [wasm32]
+
+  '@img/sharp-win32-arm64@0.35.3':
+    resolution: {integrity: sha512-4bPwFdMbeC4JQ8L8LOyWp6nsHcboP5fxkp6iPOXz2Vg49R42TuMs2whkJ5OAP4/Ul035qOzy0AecOF9VOscn4w==}
+    engines: {node: '>=20.9.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@img/sharp-win32-ia32@0.35.3':
+    resolution: {integrity: sha512-r53mXsBN6lFUDiST764SvgwUdHAqM4rPAiDzAmf4fLoB6X/rkfyTrLCg6+g17wJJiCmB3JYgHuUldCWUIRFSXw==}
+    engines: {node: ^20.9.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@img/sharp-win32-x64@0.35.3':
+    resolution: {integrity: sha512-D4y1vNeZrIIJCN+uHaWVtH86B+aCrdMYYjicy9pXHvbGZeGYLLSd3wdVuC37FxVXlU1ARsk84eKWfWMXGYEqvA==}
+    engines: {node: '>=20.9.0'}
+    cpu: [x64]
+    os: [win32]
+
+  '@inquirer/ansi@2.0.7':
+    resolution: {integrity: sha512-3eTuUO1vH2cZm2ZKHeQxnOqlTi9EfZDGgIe3BL3I4u+rJHocr9Fz86M4fjYABPvFnQG/gGK551HqDiIcETwU6Q==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
+
+  '@inquirer/confirm@6.1.1':
+    resolution: {integrity: sha512-eb8DBZcz/2qHWQda4rk2JiQk5h9QV/cVHi1yjt0f69WFZMRFn0sJTye3EAP8icut8UDMjQPsaH5KbcOogefrFQ==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/core@11.2.1':
+    resolution: {integrity: sha512-Qd6GJT1yVyrZZCfN8W2qKF5ApmqryXRhRKCuip8h01x2w/esJQ2XIYc6f9abMIHgKQdBfFTSOdbHRLAhuM09UA==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/figures@2.0.7':
+    resolution: {integrity: sha512-aJ8TBPOGB6f/2qziPfElISTCEd5XOYTFckA2SGjhNmiKzfK/u4ot3v0DUzGVdUnKjN10EqnnEPck36BkyfLnJw==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
+
+  '@inquirer/type@4.0.7':
+    resolution: {integrity: sha512-t28inv14nMQ1PhKpsJPY+kEs/c00qzeCOS2gTNRyTjG5d6qsVA2fItxW4hkvGZ5lvanGLdtCzVIx5dwdRpN1+g==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
+  '@modelcontextprotocol/sdk@1.29.0':
+    resolution: {integrity: sha512-zo37mZA9hJWpULgkRpowewez1y6ML5GsXJPY8FI0tBBCd77HEvza4jDqRKOXgHNn867PVGCyTdzqpz0izu5ZjQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@cfworker/json-schema': ^4.1.1
+      zod: ^3.25 || ^4.0
+    peerDependenciesMeta:
+      '@cfworker/json-schema':
+        optional: true
+
+  '@mswjs/interceptors@0.41.9':
+    resolution: {integrity: sha512-VVPPgHyQ6ShqnrmDWuxjmUIsO9gWyOZFmuOfLd9LfBGQJwZfy0gvv9pbHSJuoFNIYC7ZDX9aoFwowjcdSC4E8w==}
+    engines: {node: '>=18'}
+
+  '@next/env@16.3.0':
+    resolution: {integrity: sha512-o9r1S0BNiNreHP9Vs+Qnqd9kviDkJh8xIACY7UFZSmiGbbQRzPBBosvHzAU4TULHOIuOj/18RSsyz2qrREmIFw==}
+
+  '@next/swc-darwin-arm64@16.3.0':
+    resolution: {integrity: sha512-55hpqq18bEVAlxedlTt3tFqZmKg2nUXT1kn1G/BGEy0R13h3LwtwHPVzzjG6P4LLeOHE32PFDQUVaJEWvBEZBw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@next/swc-darwin-x64@16.3.0':
+    resolution: {integrity: sha512-SOi96kSaF5T+0wW4koiM1bWzSPwjzTesC1p3df+FjdOi5LIQkBK/blxh7HdoKnNuI4PURF1OO7TZqtfnbWDSgw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@next/swc-linux-arm64-gnu@16.3.0':
+    resolution: {integrity: sha512-P0gZAoPMF4dyTRzhmkV4PrqVzSOB6t4mC1oI3c4dqijJ+OVEVx5clIXAKR4/uQpsqw2KKM/0D5tVumcR2r5blg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@next/swc-linux-arm64-musl@16.3.0':
+    resolution: {integrity: sha512-tXXGKJw0m37O0eKJARVTX/TheKPhz0QFVtVVZXmOig+9YKLQOSP6hvf2pxv5DO7CLEJyTHx3Pg043CDQkv1G4Q==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@next/swc-linux-x64-gnu@16.3.0':
+    resolution: {integrity: sha512-pjGxK5EY7yWml78ALejFkWmgHsU7wbFQrISiugpH6FbUJhgEvw3xFZ/EBAtLl7QtL0WdQKiG9eWJ3mOKGTukHw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@next/swc-linux-x64-musl@16.3.0':
+    resolution: {integrity: sha512-sjo++Xx+lomlPs3HRsHWhVDyGG6ms1kGW5EtHLERdII8AyG1i+f6aq68xHREO6AEMlhjTNEWBSmfJfqm9orf7g==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@next/swc-win32-arm64-msvc@16.3.0':
+    resolution: {integrity: sha512-C5JSgiO54wURdaxdEUIXqkz04uMqC9UmPX1gtDrV/5Tf1UowdWYI8uA5hfFbPolTlp0q4KZ60xlHePNibf0VIw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@next/swc-win32-x64-msvc@16.3.0':
+    resolution: {integrity: sha512-fDOggsweNb5SSw0ZKVk6U+gxSyGFFlIBY/LBc1r8GUj4u/6t6oArL+Pmkg0MBnsgR+KkdsURilVH4F3GXUGepA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@noble/ciphers@1.3.0':
+    resolution: {integrity: sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==}
+    engines: {node: ^14.21.3 || >=16}
+
+  '@noble/curves@1.9.7':
+    resolution: {integrity: sha512-gbKGcRUYIjA3/zCCNaWDciTMFI0dCkvou3TL8Zmy5Nc7sJ47a0jtOeZoTaMxkuqRo9cRhjOdZJXegxYE5FN/xw==}
+    engines: {node: ^14.21.3 || >=16}
+
+  '@noble/hashes@1.8.0':
+    resolution: {integrity: sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A==}
+    engines: {node: ^14.21.3 || >=16}
+
+  '@nodelib/fs.scandir@2.1.5':
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.stat@2.0.5':
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.walk@1.2.8':
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+
+  '@open-draft/deferred-promise@2.2.0':
+    resolution: {integrity: sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==}
+
+  '@open-draft/deferred-promise@3.0.0':
+    resolution: {integrity: sha512-XW375UK8/9SqUVNVa6M0yEy8+iTi4QN5VZ7aZuRFQmy76LRwI9wy5F4YIBU6T+eTe2/DNDo8tqu8RHlwLHM6RA==}
+
+  '@open-draft/logger@0.3.0':
+    resolution: {integrity: sha512-X2g45fzhxH238HKO4xbSr7+wBS8Fvw6ixhTDuvLd5mqh6bJJCFAPwU9mPDxbcrRtfxv4u5IHCEH77BmxvXmmxQ==}
+
+  '@open-draft/until@2.1.0':
+    resolution: {integrity: sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg==}
+
+  '@sec-ant/readable-stream@0.4.1':
+    resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
+
+  '@sindresorhus/merge-streams@4.0.0':
+    resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
+    engines: {node: '>=18'}
+
+  '@swc/helpers@0.5.15':
+    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
+
+  '@tailwindcss/node@4.3.3':
+    resolution: {integrity: sha512-/T8IKEsf9VTU6tLjgC7+sv2mOPtQxzE2jMw7u4Tt40Tx+QSZxpzh95/H6cMKoja9XuW7iMdLJYBB0o9G1CaAgg==}
+
+  '@tailwindcss/oxide-android-arm64@4.3.3':
+    resolution: {integrity: sha512-Y85A2gmPSkl5Ve5qR86GL4HT509cFqQh1aes9p3sSkyTPwt0Pppf3GkwGe4JPACcRYjgJIEhQgM6dBClnr0NYw==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.3.3':
+    resolution: {integrity: sha512-BiaWatpBcERQFDlOjRDpIVXuFK5PJez5SA4JMg6VYZdBYU+qKfV/vqjcIs+IYmtitf1xYQZTwXvU/8y4lfZUGw==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.3.3':
+    resolution: {integrity: sha512-fAeUqfV5ndhxRwai8cXGzdLvul9utWOmeTkv69unv4ZXixjn61Z+p9lCWdwOwA3TYboG3BwdVuN/RDjhBRl0mw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.3.3':
+    resolution: {integrity: sha512-iyf5bV6+wnAlflVeEy7R25dupxTNECZN5QMI0qNT6eT+EgaGdZcKhGkr5SdoaWiLJ3spLqIY9VCeSGrwmtg4kw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.3':
+    resolution: {integrity: sha512-aAYUprJAJQWWbRrPvtjdroZ56Md+JM8pMiopS6xGEwDfLhqj+2ver2p4nU4Mb3CRqcMmNBjo8KkUgcxhkzVQGQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.3':
+    resolution: {integrity: sha512-nDxldcEENOxZRzC2uu9jrutZdAAQtb+8WWDCSnWL1zvBk1+FN+x6MtDViPB5AJMfttVCUhehGWus3XBPgatM/w==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.3':
+    resolution: {integrity: sha512-Md44bD6veX/PC5iyF8cDVnw4HBIANZepRZZ7a8DQOvkfo5WUBwcp6iAuCUz23u+4SUkhJlD3eL7hNdW8ezd/kA==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.3':
+    resolution: {integrity: sha512-tx7us1muwOKAKWao2v/GaafFeQboE6aj88vC6ziN2NCGcRm8gWUhwjzg+YdVB1e4boAtdtma4L43onunI6NS4w==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.3.3':
+    resolution: {integrity: sha512-SJxX60smvHgasZoBy11dX6YRjXJFovwWBoedhbQPOBzgFWBHGB+TVPWB9BxzR7TTxU8FQZAI2AyiNCMzFm8Img==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.3.3':
+    resolution: {integrity: sha512-jx1+rPhY/5Ympkktd656HBWEBLxP7dH06losBLjjf5vgCODXvi9KhtftWcMIwTFIDqBr7cRnQkdLnAG+IOlGvQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.3':
+    resolution: {integrity: sha512-3rc292Ca2ceK6Ulcc/bAVnTs/3nDtoPhyEKlgPv+yQJQi/JS/AMJlqzxvlDacL1nekbrcf6bTqp/jV4qgnPxNQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.3':
+    resolution: {integrity: sha512-yJ0pwIVc/nYeGoV02WtsN8KYyLQv7kyI2wDnkezyJlGGjkd4QLwDGAwl47YpPJeuI0M0ObaXGSPjvWDPeTPggw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.3.3':
+    resolution: {integrity: sha512-krXjAikiaFSPaK/FkAQT5UTx3VormQaiZ5hBFlJZ9UFQGB/rwg1MZIhHAG9smMQRTdyJxP6Qt5MwMtdyU5FWrA==}
+    engines: {node: '>= 20'}
+
+  '@tailwindcss/postcss@4.3.3':
+    resolution: {integrity: sha512-JTSZZGQi1AyKirbLN3azmjVzef92tcX7h+iSqPdaeStyFpGpDlKvvpxeOE8njhbUanbRwr3z8DyzhICWnMtQeg==}
+
+  '@ts-morph/common@0.27.0':
+    resolution: {integrity: sha512-Wf29UqxWDpc+i61k3oIOzcUfQt79PIT9y/MWfAGlrkjg6lBC1hwDECLXPVJAhWjiGbfBCxZd65F/LIZF3+jeJQ==}
+
+  '@types/node@24.10.4':
+    resolution: {integrity: sha512-vnDVpYPMzs4wunl27jHrfmwojOGKya0xyM3sH+UE5iv5uPS6vX7UIoh6m+vQc5LGBq52HBKPIn/zcSZVzeDEZg==}
+
+  '@types/react-dom@19.2.3':
+    resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
+    peerDependencies:
+      '@types/react': ^19.2.0
+
+  '@types/react@19.2.14':
+    resolution: {integrity: sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==}
+
+  '@types/set-cookie-parser@2.4.10':
+    resolution: {integrity: sha512-GGmQVGpQWUe5qglJozEjZV/5dyxbOOZ0LHe/lqyWssB88Y4svNfst0uqBVscdDeIKl5Jy5+aPSvy7mI9tYRguw==}
+
+  '@types/statuses@2.0.6':
+    resolution: {integrity: sha512-xMAgYwceFhRA2zY+XbEA7mxYbA093wdiW8Vu6gZPGWy9cmOyU9XesH1tNcEWsKFd5Vzrqx5T3D38PWx1FIIXkA==}
+
+  '@types/validate-npm-package-name@4.0.2':
+    resolution: {integrity: sha512-lrpDziQipxCEeK5kWxvljWYhUvOiB2A9izZd9B2AFarYAkqZshb4lPbRs7zKEic6eGtH8V/2qJW+dPp9OtF6bw==}
+
+  '@vercel/analytics@1.6.1':
+    resolution: {integrity: sha512-oH9He/bEM+6oKlv3chWuOOcp8Y6fo6/PSro8hEkgCW3pu9/OiCXiUpRUogDh3Fs3LH2sosDrx8CxeOLBEE+afg==}
+    peerDependencies:
+      '@remix-run/react': ^2
+      '@sveltejs/kit': ^1 || ^2
+      next: '>= 13'
+      react: ^18 || ^19 || ^19.0.0-rc
+      svelte: '>= 4'
+      vue: ^3
+      vue-router: ^4
+    peerDependenciesMeta:
+      '@remix-run/react':
+        optional: true
+      '@sveltejs/kit':
+        optional: true
+      next:
+        optional: true
+      react:
+        optional: true
+      svelte:
+        optional: true
+      vue:
+        optional: true
+      vue-router:
+        optional: true
+
+  accepts@2.0.0:
+    resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
+    engines: {node: '>= 0.6'}
+
+  agent-base@7.1.4:
+    resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
+    engines: {node: '>= 14'}
+
+  ajv-formats@3.0.1:
+    resolution: {integrity: sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==}
+    peerDependencies:
+      ajv: ^8.0.0
+    peerDependenciesMeta:
+      ajv:
+        optional: true
+
+  ajv@8.20.0:
+    resolution: {integrity: sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==}
+
+  ansi-colors@4.1.3:
+    resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
+    engines: {node: '>=6'}
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-regex@6.2.2:
+    resolution: {integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==}
+    engines: {node: '>=12'}
+
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+
+  argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+
+  ast-types@0.16.1:
+    resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
+    engines: {node: '>=4'}
+
+  balanced-match@4.0.4:
+    resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
+    engines: {node: 18 || 20 || >=22}
+
+  baseline-browser-mapping@2.9.19:
+    resolution: {integrity: sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg==}
+    hasBin: true
+
+  body-parser@2.2.2:
+    resolution: {integrity: sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==}
+    engines: {node: '>=18'}
+
+  brace-expansion@5.0.6:
+    resolution: {integrity: sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g==}
+    engines: {node: 18 || 20 || >=22}
+
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
+  browserslist@4.28.1:
+    resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
+  bundle-name@4.1.0:
+    resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
+    engines: {node: '>=18'}
+
+  bytes@3.1.2:
+    resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
+    engines: {node: '>= 0.8'}
+
+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+
+  call-bound@1.0.4:
+    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
+    engines: {node: '>= 0.4'}
+
+  callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+
+  caniuse-lite@1.0.30001769:
+    resolution: {integrity: sha512-BCfFL1sHijQlBGWBMuJyhZUhzo7wer5sVj9hqekB/7xn0Ypy+pER/edCYQm4exbXj4WiySGp40P8UuTh6w1srg==}
+
+  chalk@5.6.2:
+    resolution: {integrity: sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
+  cli-cursor@5.0.0:
+    resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
+    engines: {node: '>=18'}
+
+  cli-spinners@2.9.2:
+    resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==}
+    engines: {node: '>=6'}
+
+  cli-width@4.1.0:
+    resolution: {integrity: sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==}
+    engines: {node: '>= 12'}
+
+  client-only@0.0.1:
+    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
+
+  cliui@8.0.1:
+    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
+    engines: {node: '>=12'}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
+  code-block-writer@13.0.3:
+    resolution: {integrity: sha512-Oofo0pq3IKnsFtuHqSF7TqBfr71aeyZDVJ0HpmqB7FBM2qEigL0iPONSCZSO9pE9dZTAxANe5XHG9Uy0YMv8cg==}
+
+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
+  commander@11.1.0:
+    resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
+    engines: {node: '>=16'}
+
+  commander@14.0.3:
+    resolution: {integrity: sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==}
+    engines: {node: '>=20'}
+
+  content-disposition@1.1.0:
+    resolution: {integrity: sha512-5jRCH9Z/+DRP7rkvY83B+yGIGX96OYdJmzngqnw2SBSxqCFPd0w2km3s5iawpGX8krnwSGmF0FW5Nhr0Hfai3g==}
+    engines: {node: '>=18'}
+
+  content-type@1.0.5:
+    resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
+    engines: {node: '>= 0.6'}
+
+  content-type@2.0.0:
+    resolution: {integrity: sha512-j/O/d7GcZCyNl7/hwZAb606rzqkyvaDctLmckbxLzHvFBzTJHuGEdodATcP3yIRoDrLHkIATJuvzbFlp/ki2cQ==}
+    engines: {node: '>=18'}
+
+  convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+
+  cookie-signature@1.2.2:
+    resolution: {integrity: sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==}
+    engines: {node: '>=6.6.0'}
+
+  cookie@0.7.2:
+    resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
+    engines: {node: '>= 0.6'}
+
+  cookie@1.1.1:
+    resolution: {integrity: sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==}
+    engines: {node: '>=18'}
+
+  cors@2.8.6:
+    resolution: {integrity: sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==}
+    engines: {node: '>= 0.10'}
+
+  cosmiconfig@9.0.1:
+    resolution: {integrity: sha512-hr4ihw+DBqcvrsEDioRO31Z17x71pUYoNe/4h6Z0wB72p7MU7/9gH8Q3s12NFhHPfYBBOV3qyfUxmr/Yn3shnQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      typescript: '>=4.9.5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  csstype@3.2.3:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
+
+  data-uri-to-buffer@4.0.1:
+    resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
+    engines: {node: '>= 12'}
+
+  date-fns@4.1.0:
+    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
+
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  dedent@1.7.2:
+    resolution: {integrity: sha512-WzMx3mW98SN+zn3hgemf4OzdmyNhhhKz5Ay0pUfQiMQ3e1g+xmTJWp/pKdwKVXhdSkAEGIIzqeuWrL3mV/AXbA==}
+    peerDependencies:
+      babel-plugin-macros: ^3.1.0
+    peerDependenciesMeta:
+      babel-plugin-macros:
+        optional: true
+
+  deepmerge@4.3.1:
+    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
+    engines: {node: '>=0.10.0'}
+
+  default-browser-id@5.0.1:
+    resolution: {integrity: sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==}
+    engines: {node: '>=18'}
+
+  default-browser@5.5.0:
+    resolution: {integrity: sha512-H9LMLr5zwIbSxrmvikGuI/5KGhZ8E2zH3stkMgM5LpOWDutGM2JZaj460Udnf1a+946zc7YBgrqEWwbk7zHvGw==}
+    engines: {node: '>=18'}
+
+  define-lazy-prop@3.0.0:
+    resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
+    engines: {node: '>=12'}
+
+  depd@2.0.0:
+    resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
+    engines: {node: '>= 0.8'}
+
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
+
+  diff@8.0.4:
+    resolution: {integrity: sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw==}
+    engines: {node: '>=0.3.1'}
+
+  dotenv@17.4.2:
+    resolution: {integrity: sha512-nI4U3TottKAcAD9LLud4Cb7b2QztQMUEfHbvhTH09bqXTxnSie8WnjPALV/WMCrJZ6UV/qHJ6L03OqO3LcdYZw==}
+    engines: {node: '>=12'}
+
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+
+  eciesjs@0.4.18:
+    resolution: {integrity: sha512-wG99Zcfcys9fZux7Cft8BAX/YrOJLJSZ3jyYPfhZHqN2E+Ffx+QXBDsv3gubEgPtV6dTzJMSQUwk1H98/t/0wQ==}
+    engines: {bun: '>=1', deno: '>=2', node: '>=16'}
+
+  ee-first@1.1.1:
+    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
+
+  electron-to-chromium@1.5.286:
+    resolution: {integrity: sha512-9tfDXhJ4RKFNerfjdCcZfufu49vg620741MNs26a9+bhLThdB+plgMeou98CAaHu/WATj2iHOOHTp1hWtABj2A==}
+
+  emoji-regex@10.6.0:
+    resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==}
+
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
+  encodeurl@2.0.0:
+    resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
+    engines: {node: '>= 0.8'}
+
+  enhanced-resolve@5.24.2:
+    resolution: {integrity: sha512-rpsZEGT1jFuve6QlpyRp9ckQ+kN61hvF9BzCPyMdaKTm8UJce96KBn3sorXOFXlzjPrs3Vc4T1NsSroZ3PxlFw==}
+    engines: {node: '>=10.13.0'}
+
+  enquirer@2.4.1:
+    resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==}
+    engines: {node: '>=8.6'}
+
+  env-paths@2.2.1:
+    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
+    engines: {node: '>=6'}
+
+  error-ex@1.3.4:
+    resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
+
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
+
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
+  es-object-atoms@1.1.2:
+    resolution: {integrity: sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==}
+    engines: {node: '>= 0.4'}
+
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
+  escape-html@1.0.3:
+    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
+
+  esprima@4.0.1:
+    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  etag@1.8.1:
+    resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
+    engines: {node: '>= 0.6'}
+
+  eventsource-parser@3.1.0:
+    resolution: {integrity: sha512-kJezFj9YFAMLeORyi7aCLxLbD5/qWMQnoMVlVPyHIll7lgRJCc3JVln9Vgl9nwQi0YkMnhdGTMNn7CkRRAptMg==}
+    engines: {node: '>=18.0.0'}
+
+  eventsource@3.0.7:
+    resolution: {integrity: sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==}
+    engines: {node: '>=18.0.0'}
+
+  execa@5.1.1:
+    resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
+    engines: {node: '>=10'}
+
+  execa@9.6.1:
+    resolution: {integrity: sha512-9Be3ZoN4LmYR90tUoVu2te2BsbzHfhJyfEiAVfz7N5/zv+jduIfLrV2xdQXOHbaD6KgpGdO9PRPM1Y4Q9QkPkA==}
+    engines: {node: ^18.19.0 || >=20.5.0}
+
+  express-rate-limit@8.5.2:
+    resolution: {integrity: sha512-5Kb34ipNX694DH48vN9irak1Qx30nb0PLYHXfJgw4YEjiC3ZEmZJhwOp+VfiCYwFzvFTdB9QkArYS5kXa2cx2A==}
+    engines: {node: '>= 16'}
+    peerDependencies:
+      express: '>= 4.11'
+
+  express@5.2.1:
+    resolution: {integrity: sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==}
+    engines: {node: '>= 18'}
+
+  fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
+
+  fast-string-truncated-width@3.0.3:
+    resolution: {integrity: sha512-0jjjIEL6+0jag3l2XWWizO64/aZVtpiGE3t0Zgqxv0DPuxiMjvB3M24fCyhZUO4KomJQPj3LTSUnDP3GpdwC0g==}
+
+  fast-string-width@3.0.2:
+    resolution: {integrity: sha512-gX8LrtNEI5hq8DVUfRQMbr5lpaS4nMIWV+7XEbXk2b8kiQIizgnlr12B4dA3ZEx3308ze0O4Q1R+cHts8kyUJg==}
+
+  fast-uri@3.1.2:
+    resolution: {integrity: sha512-rVjf7ArG3LTk+FS6Yw81V1DLuZl1bRbNrev6Tmd/9RaroeeRRJhAt7jg/6YFxbvAQXUCavSoZhPPj6oOx+5KjQ==}
+
+  fast-wrap-ansi@0.2.2:
+    resolution: {integrity: sha512-7F2Fl+TjRSenLqlU3UjSH0iyqopqoZIu7eZVpEirP2g1GtWa2G/ecEmBdgz31+Mxr+ELclgg6sokpSFIQiZ02Q==}
+
+  fastq@1.20.1:
+    resolution: {integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==}
+
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  fetch-blob@3.2.0:
+    resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==}
+    engines: {node: ^12.20 || >= 14.13}
+
+  figures@6.1.0:
+    resolution: {integrity: sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==}
+    engines: {node: '>=18'}
+
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
+  finalhandler@2.1.1:
+    resolution: {integrity: sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==}
+    engines: {node: '>= 18.0.0'}
+
+  formdata-polyfill@4.0.10:
+    resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==}
+    engines: {node: '>=12.20.0'}
+
+  forwarded@0.2.0:
+    resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
+    engines: {node: '>= 0.6'}
+
+  fresh@2.0.0:
+    resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
+    engines: {node: '>= 0.8'}
+
+  fs-extra@11.3.5:
+    resolution: {integrity: sha512-eKpRKAovdpZtR1WopLHxlBWvAgPny3c4gX1G5Jhwmmw4XJj0ifSD5qB5TOo8hmA0wlRKDAOAhEE1yVPgs6Fgcg==}
+    engines: {node: '>=14.14'}
+
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  fuzzysort@3.1.0:
+    resolution: {integrity: sha512-sR9BNCjBg6LNgwvxlBd0sBABvQitkLzoVY9MYYROQVX/FvfJ4Mai9LsGhDgd8qYdds0bY77VzYd5iuB+v5rwQQ==}
+
+  gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+
+  get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+
+  get-east-asian-width@1.6.0:
+    resolution: {integrity: sha512-QRbvDIbx6YklUe6RxeTeleMR0yv3cYH6PsPZHcnVn7xv7zO1BHN8r0XETu8n6Ye3Q+ahtSarc3WgtNWmehIBfA==}
+    engines: {node: '>=18'}
+
+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
+
+  get-own-enumerable-keys@1.0.0:
+    resolution: {integrity: sha512-PKsK2FSrQCyxcGHsGrLDcK0lx+0Ke+6e8KFFozA9/fIQLhQzPaRvJFdcz7+Axg3jUH/Mq+NI4xa5u/UT2tQskA==}
+    engines: {node: '>=14.16'}
+
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+
+  get-stream@6.0.1:
+    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
+    engines: {node: '>=10'}
+
+  get-stream@9.0.1:
+    resolution: {integrity: sha512-kVCxPF3vQM/N0B1PmoqVUqgHP+EeVjmZSQn+1oCRPxd2P21P2F19lIgbR3HBosbB1PUhOAoctJnfEn2GbN2eZA==}
+    engines: {node: '>=18'}
+
+  glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
+  graphql@16.14.0:
+    resolution: {integrity: sha512-BBvQ/406p+4CZbTpCbVPSxfzrZrbnuWSP1ELYgyS6B+hNeKzgrdB4JczCa5VZUBQrDa9hUngm0KnexY6pJRN5Q==}
+    engines: {node: ^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0}
+
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
+
+  hasown@2.0.4:
+    resolution: {integrity: sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==}
+    engines: {node: '>= 0.4'}
+
+  headers-polyfill@5.0.1:
+    resolution: {integrity: sha512-1TJ6Fih/b8h5TIcv+1+Hw0PDQWJTKDKzFZzcKOiW1wJza3XoAQlkCuXLbymPYB8+ZQyw8mHvdw560e8zVFIWyA==}
+
+  hono@4.12.25:
+    resolution: {integrity: sha512-2NFaIyNVgJmBs/ecmtGzlmluTFs5cHEWGTdu0t1HBwYzoGXOL5nUQBRMXsXWla5i4KkG//QMzVP88m1+I3fdAQ==}
+    engines: {node: '>=16.9.0'}
+
+  http-errors@2.0.1:
+    resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==}
+    engines: {node: '>= 0.8'}
+
+  https-proxy-agent@7.0.6:
+    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
+    engines: {node: '>= 14'}
+
+  human-signals@2.1.0:
+    resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
+    engines: {node: '>=10.17.0'}
+
+  human-signals@8.0.1:
+    resolution: {integrity: sha512-eKCa6bwnJhvxj14kZk5NCPc6Hb6BdsU9DZcOnmQKSnO1VKrfV0zCvtttPZUsBvjmNDn8rpcJfpwSYnHBjc95MQ==}
+    engines: {node: '>=18.18.0'}
+
+  iconv-lite@0.7.2:
+    resolution: {integrity: sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==}
+    engines: {node: '>=0.10.0'}
+
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+
+  import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
+    engines: {node: '>=6'}
+
+  inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
+  ip-address@10.2.0:
+    resolution: {integrity: sha512-/+S6j4E9AHvW9SWMSEY9Xfy66O5PWvVEJ08O0y5JGyEKQpojb0K0GKpz/v5HJ/G0vi3D2sjGK78119oXZeE0qA==}
+    engines: {node: '>= 12'}
+
+  ipaddr.js@1.9.1:
+    resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
+    engines: {node: '>= 0.10'}
+
+  is-arrayish@0.2.1:
+    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
+
+  is-docker@3.0.0:
+    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    hasBin: true
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-in-ssh@1.0.0:
+    resolution: {integrity: sha512-jYa6Q9rH90kR1vKB6NM7qqd1mge3Fx4Dhw5TVlK1MUBqhEOuCagrEHMevNuCcbECmXZ0ThXkRm+Ymr51HwEPAw==}
+    engines: {node: '>=20'}
+
+  is-inside-container@1.0.0:
+    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
+    engines: {node: '>=14.16'}
+    hasBin: true
+
+  is-interactive@2.0.0:
+    resolution: {integrity: sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==}
+    engines: {node: '>=12'}
+
+  is-node-process@1.2.0:
+    resolution: {integrity: sha512-Vg4o6/fqPxIjtxgUH5QLJhwZ7gW5diGCVlXpuUfELC62CuxM1iHcRe51f2W1FDy04Ai4KJkagKjx3XaqyfRKXw==}
+
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  is-obj@3.0.0:
+    resolution: {integrity: sha512-IlsXEHOjtKhpN8r/tRFj2nDyTmHvcfNeu/nrRIcXE17ROeatXchkojffa1SpdqW4cr/Fj6QkEf/Gn4zf6KKvEQ==}
+    engines: {node: '>=12'}
+
+  is-plain-obj@4.1.0:
+    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
+    engines: {node: '>=12'}
+
+  is-promise@4.0.0:
+    resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
+
+  is-regexp@3.1.0:
+    resolution: {integrity: sha512-rbku49cWloU5bSMI+zaRaXdQHXnthP6DZ/vLnfdSKyL4zUzuWnomtOEiZZOd+ioQ+avFo/qau3KPTc7Fjy1uPA==}
+    engines: {node: '>=12'}
+
+  is-stream@2.0.1:
+    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
+    engines: {node: '>=8'}
+
+  is-stream@4.0.1:
+    resolution: {integrity: sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A==}
+    engines: {node: '>=18'}
+
+  is-unicode-supported@1.3.0:
+    resolution: {integrity: sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==}
+    engines: {node: '>=12'}
+
+  is-unicode-supported@2.1.0:
+    resolution: {integrity: sha512-mE00Gnza5EEB3Ds0HfMyllZzbBrmLOX3vfWoj9A9PEnTfratQ/BcaJOuMhnkhjXvb2+FkY3VuHqtAGpTPmglFQ==}
+    engines: {node: '>=18'}
+
+  is-wsl@3.1.1:
+    resolution: {integrity: sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==}
+    engines: {node: '>=16'}
+
+  isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
+  isexe@3.1.5:
+    resolution: {integrity: sha512-6B3tLtFqtQS4ekarvLVMZ+X+VlvQekbe4taUkf/rhVO3d/h0M2rfARm/pXLcPEsjjMsFgrFgSrhQIxcSVrBz8w==}
+    engines: {node: '>=18'}
+
+  jiti@2.7.0:
+    resolution: {integrity: sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==}
+    hasBin: true
+
+  jose@6.2.3:
+    resolution: {integrity: sha512-YYVDInQKFJfR/xa3ojUTl8c2KoTwiL1R5Wg9YCydwH0x0B9grbzlg5HC7mMjCtUJjbQ/YnGEZIhI5tCgfTb4Hw==}
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  js-yaml@4.2.0:
+    resolution: {integrity: sha512-ePWsvanv0DWuDRsW8dnt+R4jQ31SCRCQ7hhNcPXZPsoBZiemuZNYGf7adZdqX2D86j6rvKp3RpCxVTSb8WQlOw==}
+    hasBin: true
+
+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  json-parse-even-better-errors@2.3.1:
+    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
+
+  json-schema-traverse@1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+
+  json-schema-typed@8.0.2:
+    resolution: {integrity: sha512-fQhoXdcvc3V28x7C7BMs4P5+kNlgUURe2jmUT1T//oBRMDrqy1QPelJimwZGo7Hg9VPV3EQV5Bnq4hbFy2vetA==}
+
+  json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  jsonfile@6.2.1:
+    resolution: {integrity: sha512-zwOTdL3rFQ/lRdBnntKVOX6k5cKJwEc1HdilT71BWEu7J41gXIB2MRp+vxduPSwZJPWBxEzv4yH1wYLJGUHX4Q==}
+
+  kleur@3.0.3:
+    resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
+    engines: {node: '>=6'}
+
+  kleur@4.1.5:
+    resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
+    engines: {node: '>=6'}
+
+  lightningcss-android-arm64@1.32.0:
+    resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.32.0:
+    resolution: {integrity: sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.32.0:
+    resolution: {integrity: sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.32.0:
+    resolution: {integrity: sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    resolution: {integrity: sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-x64-musl@1.32.0:
+    resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    resolution: {integrity: sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.32.0:
+    resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
+    engines: {node: '>= 12.0.0'}
+
+  lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+
+  log-symbols@6.0.0:
+    resolution: {integrity: sha512-i24m8rpwhmPIS4zscNzK6MSEhk0DUWa/8iYQWxhffV8jkI4Phvs3F+quL5xvS0gdQR0FyTCMMH33Y78dDTzzIw==}
+    engines: {node: '>=18'}
+
+  lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+
+  lucide-react@1.17.0:
+    resolution: {integrity: sha512-9FA9evdox/JQL5PT57fdA1x/yg8T7knJ98+zjTL3UfKza6pflQUUh3XtaQIHKvnsJw1lmsEyHVlt5jchYxOQ5w==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
+  media-typer@1.1.0:
+    resolution: {integrity: sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==}
+    engines: {node: '>= 0.8'}
+
+  merge-descriptors@2.0.0:
+    resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==}
+    engines: {node: '>=18'}
+
+  merge-stream@2.0.0:
+    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
+
+  merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
+  mime-db@1.54.0:
+    resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@3.0.2:
+    resolution: {integrity: sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==}
+    engines: {node: '>=18'}
+
+  mimic-fn@2.1.0:
+    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
+    engines: {node: '>=6'}
+
+  mimic-function@5.0.1:
+    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
+    engines: {node: '>=18'}
+
+  minimatch@10.2.5:
+    resolution: {integrity: sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==}
+    engines: {node: 18 || 20 || >=22}
+
+  minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  msw@2.14.6:
+    resolution: {integrity: sha512-ALe+N10S72cyx94cMcy3Zs4HhXCj35sgeAL4c+WTvKi0zWnbd8/h0lcFqv0mb2P+aSgAdD7p9HzvA0DiUPxsyg==}
+    engines: {node: '>=18'}
+    hasBin: true
+    peerDependencies:
+      typescript: '>= 4.8.x'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  mute-stream@3.0.0:
+    resolution: {integrity: sha512-dkEJPVvun4FryqBmZ5KhDo0K9iDXAwn08tMLDinNdRBNPcYEDiWYysLcc6k3mjTMlbP9KyylvRpd4wFtwrT9rw==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  nanoid@3.3.16:
+    resolution: {integrity: sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  negotiator@1.0.0:
+    resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==}
+    engines: {node: '>= 0.6'}
+
+  next@16.3.0:
+    resolution: {integrity: sha512-NEdGOzH+08eTXMUp9UYkA99Nhi5N6Thrhc1jgFOQgfgnGK/dA2hRwBpXep+exdFQrnwlRf/3Wixyp8lLBUpE2A==}
+    engines: {node: '>=20.9.0'}
+    hasBin: true
+    peerDependencies:
+      '@opentelemetry/api': ^1.1.0
+      '@playwright/test': ^1.51.1
+      babel-plugin-react-compiler: '*'
+      react: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
+      react-dom: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
+      sass: ^1.3.0
+    peerDependenciesMeta:
+      '@opentelemetry/api':
+        optional: true
+      '@playwright/test':
+        optional: true
+      babel-plugin-react-compiler:
+        optional: true
+      sass:
+        optional: true
+
+  node-domexception@1.0.0:
+    resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
+    engines: {node: '>=10.5.0'}
+    deprecated: Use your platform's native DOMException instead
+
+  node-fetch@3.3.2:
+    resolution: {integrity: sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  node-releases@2.0.27:
+    resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
+
+  npm-run-path@4.0.1:
+    resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
+    engines: {node: '>=8'}
+
+  npm-run-path@6.0.0:
+    resolution: {integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==}
+    engines: {node: '>=18'}
+
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  object-inspect@1.13.4:
+    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
+    engines: {node: '>= 0.4'}
+
+  object-treeify@1.1.33:
+    resolution: {integrity: sha512-EFVjAYfzWqWsBMRHPMAXLCDIJnpMhdWAqR7xG6M6a2cs6PMFpl/+Z20w9zDW4vkxOFfddegBKq9Rehd0bxWE7A==}
+    engines: {node: '>= 10'}
+
+  on-finished@2.4.1:
+    resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
+    engines: {node: '>= 0.8'}
+
+  once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+
+  onetime@5.1.2:
+    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
+    engines: {node: '>=6'}
+
+  onetime@7.0.0:
+    resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
+    engines: {node: '>=18'}
+
+  open@11.0.0:
+    resolution: {integrity: sha512-smsWv2LzFjP03xmvFoJ331ss6h+jixfA4UUV/Bsiyuu4YJPfN+FIQGOIiv4w9/+MoHkfkJ22UIaQWRVFRfH6Vw==}
+    engines: {node: '>=20'}
+
+  ora@8.2.0:
+    resolution: {integrity: sha512-weP+BZ8MVNnlCm8c0Qdc1WSWq4Qn7I+9CJGm7Qali6g44e/PUzbjNqJX5NJ9ljlNMosfJvg1fKEGILklK9cwnw==}
+    engines: {node: '>=18'}
+
+  outvariant@1.4.3:
+    resolution: {integrity: sha512-+Sl2UErvtsoajRDKCE5/dBz4DIvHXQQnAxtQTF04OJxY0+DyZXSo5P5Bb7XYWOh81syohlYL24hbDwxedPUJCA==}
+
+  parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+
+  parse-json@5.2.0:
+    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
+    engines: {node: '>=8'}
+
+  parse-ms@4.0.0:
+    resolution: {integrity: sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==}
+    engines: {node: '>=18'}
+
+  parseurl@1.3.3:
+    resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
+    engines: {node: '>= 0.8'}
+
+  path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+
+  path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+
+  path-key@4.0.0:
+    resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
+    engines: {node: '>=12'}
+
+  path-to-regexp@6.3.0:
+    resolution: {integrity: sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==}
+
+  path-to-regexp@8.4.2:
+    resolution: {integrity: sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@2.3.2:
+    resolution: {integrity: sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==}
+    engines: {node: '>=8.6'}
+
+  picomatch@4.0.4:
+    resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
+    engines: {node: '>=12'}
+
+  pkce-challenge@5.0.1:
+    resolution: {integrity: sha512-wQ0b/W4Fr01qtpHlqSqspcj3EhBvimsdh0KlHhH8HRZnMsEa0ea2fTULOXOS9ccQr3om+GcGRk4e+isrZWV8qQ==}
+    engines: {node: '>=16.20.0'}
+
+  postcss-selector-parser@7.1.1:
+    resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==}
+    engines: {node: '>=4'}
+
+  postcss@8.5.19:
+    resolution: {integrity: sha512-Mz8SaolMd8nB+G13WkORcxQKHZ/NE4xXevtkJHVuG+guo9/wYKlIMTKAqGdEmYOXR2ijPjTYNHssizdaVSUNdQ==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  postcss@8.5.23:
+    resolution: {integrity: sha512-g50586zr4bZmwFiTlflMu8E0bDTb5I5gertgwAKmsdUlTQIhZtunzUlD1WSzwcVWPoAVpsrA6vlfCD7oXvRwgg==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  postcss@8.5.6:
+    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  powershell-utils@0.1.0:
+    resolution: {integrity: sha512-dM0jVuXJPsDN6DvRpea484tCUaMiXWjuCn++HGTqUWzGDjv5tZkEZldAJ/UMlqRYGFrD/etByo4/xOuC/snX2A==}
+    engines: {node: '>=20'}
+
+  pretty-ms@9.3.0:
+    resolution: {integrity: sha512-gjVS5hOP+M3wMm5nmNOucbIrqudzs9v/57bWRHQWLYklXqoXKrVfYW2W9+glfGsqtPgpiz5WwyEEB+ksXIx3gQ==}
+    engines: {node: '>=18'}
+
+  prompts@2.4.2:
+    resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
+    engines: {node: '>= 6'}
+
+  proxy-addr@2.0.7:
+    resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
+    engines: {node: '>= 0.10'}
+
+  qs@6.15.2:
+    resolution: {integrity: sha512-Rzq0KEyX/w/tEybncDgdkZrJgVUsUMk3xjh3t5bv3S1HTAtg+uOYt72+ZfwiQwKdysThkTBdL/rTi6HDmX9Ddw==}
+    engines: {node: '>=0.6'}
+
+  queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  range-parser@1.2.1:
+    resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
+    engines: {node: '>= 0.6'}
+
+  raw-body@3.0.2:
+    resolution: {integrity: sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==}
+    engines: {node: '>= 0.10'}
+
+  react-dom@19.2.4:
+    resolution: {integrity: sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==}
+    peerDependencies:
+      react: ^19.2.4
+
+  react@19.2.4:
+    resolution: {integrity: sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==}
+    engines: {node: '>=0.10.0'}
+
+  recast@0.23.11:
+    resolution: {integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==}
+    engines: {node: '>= 4'}
+
+  require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+
+  require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+
+  reselect@5.2.0:
+    resolution: {integrity: sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw==}
+
+  resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
+  restore-cursor@5.1.0:
+    resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
+    engines: {node: '>=18'}
+
+  rettime@0.11.11:
+    resolution: {integrity: sha512-ILJRqVWBCTlg9r42fFgwVZx1gnFAcQF8mRoMkbgQfIrjEDf9nbBFDFx00oloOa+Q869FUtaYDXZvEfnecQSCoQ==}
+
+  reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
+  router@2.2.0:
+    resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==}
+    engines: {node: '>= 18'}
+
+  run-applescript@7.1.0:
+    resolution: {integrity: sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==}
+    engines: {node: '>=18'}
+
+  run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
+  scheduler@0.27.0:
+    resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
+
+  semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+
+  semver@7.8.5:
+    resolution: {integrity: sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  send@1.2.1:
+    resolution: {integrity: sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==}
+    engines: {node: '>= 18'}
+
+  serve-static@2.2.1:
+    resolution: {integrity: sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==}
+    engines: {node: '>= 18'}
+
+  set-cookie-parser@3.1.0:
+    resolution: {integrity: sha512-kjnC1DXBHcxaOaOXBHBeRtltsDG2nUiUni+jP92M9gYdW12rsmx92UsfpH7o5tDRs7I1ZZPSQJQGv3UaRfCiuw==}
+
+  setprototypeof@1.2.0:
+    resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
+
+  shadcn@4.10.0:
+    resolution: {integrity: sha512-84IJhUsK0xqSCRJx3QxyZe2NpUXj2Nwk8Vc8Ow/tCOND3yz4CT6uU4655vqicNXhzG9Q1cyUt+TBl2SiCJwNgg==}
+    hasBin: true
+
+  sharp@0.35.3:
+    resolution: {integrity: sha512-ej0zVHuZGHCiABXcNxeYhpRnPNPAcvbG8RMdBAhDAxLKkCRVSpK3Iyu7qbqw3JMzoj0REeM6f3tJLtVwl0023Q==}
+    engines: {node: '>=20.9.0'}
+    peerDependencies:
+      '@types/node': '*'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+
+  shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
+  side-channel-list@1.0.1:
+    resolution: {integrity: sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-map@1.0.1:
+    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-weakmap@1.0.2:
+    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
+    engines: {node: '>= 0.4'}
+
+  side-channel@1.1.0:
+    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
+    engines: {node: '>= 0.4'}
+
+  signal-exit@3.0.7:
+    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
+
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
+  sisteransi@1.0.5:
+    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
+  statuses@2.0.2:
+    resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
+    engines: {node: '>= 0.8'}
+
+  stdin-discarder@0.2.2:
+    resolution: {integrity: sha512-UhDfHmA92YAlNnCfhmq0VeNL5bDbiZGg7sZ2IvPsXubGkiNa9EC+tUTsjBRsYUAz87btI6/1wf4XoVvQ3uRnmQ==}
+    engines: {node: '>=18'}
+
+  strict-event-emitter@0.5.1:
+    resolution: {integrity: sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ==}
+
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  string-width@7.2.0:
+    resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
+    engines: {node: '>=18'}
+
+  stringify-object@5.0.0:
+    resolution: {integrity: sha512-zaJYxz2FtcMb4f+g60KsRNFOpVMUyuJgA51Zi5Z1DOTC3S59+OQiVOzE9GZt0x72uBGWKsQIuBKeF9iusmKFsg==}
+    engines: {node: '>=14.16'}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
+  strip-ansi@7.2.0:
+    resolution: {integrity: sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==}
+    engines: {node: '>=12'}
+
+  strip-bom@3.0.0:
+    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+    engines: {node: '>=4'}
+
+  strip-final-newline@2.0.0:
+    resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
+    engines: {node: '>=6'}
+
+  strip-final-newline@4.0.0:
+    resolution: {integrity: sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw==}
+    engines: {node: '>=18'}
+
+  styled-jsx@5.1.6:
+    resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
+    engines: {node: '>= 12.0.0'}
+    peerDependencies:
+      '@babel/core': '*'
+      babel-plugin-macros: '*'
+      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      babel-plugin-macros:
+        optional: true
+
+  tagged-tag@1.0.0:
+    resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
+    engines: {node: '>=20'}
+
+  tailwind-merge@3.4.0:
+    resolution: {integrity: sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==}
+
+  tailwindcss@4.3.3:
+    resolution: {integrity: sha512-gOhV3P7ufE62QDGg1zVaTgCR+EtPv92k2nIhVcVKcLmxT1sUBsQGhnZj175j+MqRt4zLF7ic+sCYjfhxMxj7YQ==}
+
+  tapable@2.3.3:
+    resolution: {integrity: sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==}
+    engines: {node: '>=6'}
+
+  tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+
+  tldts-core@7.4.2:
+    resolution: {integrity: sha512-nwEyF4vl4RSJjwSjBUmOSxc3BFPoIFdlRthJ6e+5v9P3bHNsoD06UjuqMUspqp7vsEZ1beaHi1km+optiE17yA==}
+
+  tldts@7.4.2:
+    resolution: {integrity: sha512-kCwffuaH8ntKtygnWe1b4BJKWiCUH30n5KfoTr6IchcXOwR7chAOFJxFrH3vjANafUYrIA4a7SDL+nn7SiR4Sw==}
+    hasBin: true
+
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
+  toidentifier@1.0.1:
+    resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
+    engines: {node: '>=0.6'}
+
+  tough-cookie@6.0.1:
+    resolution: {integrity: sha512-LktZQb3IeoUWB9lqR5EWTHgW/VTITCXg4D21M+lvybRVdylLrRMnqaIONLVb5mav8vM19m44HIcGq4qASeu2Qw==}
+    engines: {node: '>=16'}
+
+  ts-morph@26.0.0:
+    resolution: {integrity: sha512-ztMO++owQnz8c/gIENcM9XfCEzgoGphTv+nKpYNM1bgsdOVC/jRZuEBf6N+mLLDNg68Kl+GgUZfOySaRiG1/Ug==}
+
+  tsconfig-paths@4.2.0:
+    resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
+    engines: {node: '>=6'}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  tw-animate-css@1.4.0:
+    resolution: {integrity: sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==}
+
+  type-fest@5.7.0:
+    resolution: {integrity: sha512-1URUxUqfHFM1c+zfSPsa3gnkO7Aq21qyH75SIduNYz4SzY964rn1X2vCMQaHSHhktiw+0kPa2iyb6PUpXqB6Vg==}
+    engines: {node: '>=20'}
+
+  type-is@2.1.0:
+    resolution: {integrity: sha512-faYHw0anBbc/kWF3zFTEnxSFOAGUX9GFbOBthvDdLsIlEoWOFOtS0zgCiQYwIskL9iGXZL3kAXD8OoZ4GmMATA==}
+    engines: {node: '>= 18'}
+
+  typescript@5.7.3:
+    resolution: {integrity: sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  undici-types@7.16.0:
+    resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==}
+
+  unicorn-magic@0.3.0:
+    resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
+    engines: {node: '>=18'}
+
+  universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
+    engines: {node: '>= 10.0.0'}
+
+  unpipe@1.0.0:
+    resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
+    engines: {node: '>= 0.8'}
+
+  until-async@3.0.2:
+    resolution: {integrity: sha512-IiSk4HlzAMqTUseHHe3VhIGyuFmN90zMTpD3Z3y8jeQbzLIq500MVM7Jq2vUAnTKAFPJrqwkzr6PoTcPhGcOiw==}
+
+  update-browserslist-db@1.2.3:
+    resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
+  use-sync-external-store@1.6.0:
+    resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
+  validate-npm-package-name@7.0.2:
+    resolution: {integrity: sha512-hVDIBwsRruT73PbK7uP5ebUt+ezEtCmzZz3F59BSr2F6OVFnJ/6h8liuvdLrQ88Xmnk6/+xGGuq+pG9WwTuy3A==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  vary@1.1.2:
+    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
+    engines: {node: '>= 0.8'}
+
+  web-streams-polyfill@3.3.3:
+    resolution: {integrity: sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==}
+    engines: {node: '>= 8'}
+
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+
+  which@4.0.0:
+    resolution: {integrity: sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==}
+    engines: {node: ^16.13.0 || >=18.0.0}
+    hasBin: true
+
+  wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+
+  wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+
+  wsl-utils@0.3.1:
+    resolution: {integrity: sha512-g/eziiSUNBSsdDJtCLB8bdYEUMj4jR7AGeUo96p/3dTafgjHhpF4RiCFPiRILwjQoDXx5MqkBr4fwWtR3Ky4Wg==}
+    engines: {node: '>=20'}
+
+  y18n@5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
+
+  yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+
+  yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
+
+  yargs@17.7.2:
+    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
+    engines: {node: '>=12'}
+
+  yocto-spinner@1.2.0:
+    resolution: {integrity: sha512-Yw0hUB6UA3o4YUgKy3oSe9a4cxoaZ9sBfYDw+JSxo6Id0KoJGoxzPA24qqUXYKBWABs/zDSGTz9kww7t3F0XGw==}
+    engines: {node: '>=18.19'}
+
+  yoctocolors@2.1.2:
+    resolution: {integrity: sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug==}
+    engines: {node: '>=18'}
+
+  zod-to-json-schema@3.25.2:
+    resolution: {integrity: sha512-O/PgfnpT1xKSDeQYSCfRI5Gy3hPf91mKVDuYLUHZJMiDFptvP41MSnWofm8dnCm0256ZNfZIM7DSzuSMAFnjHA==}
+    peerDependencies:
+      zod: ^3.25.28 || ^4
+
+  zod@3.25.76:
+    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+
+snapshots:
+
+  '@alloc/quick-lru@5.2.0': {}
+
+  '@babel/code-frame@7.29.7':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.29.7
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/compat-data@7.29.7': {}
+
+  '@babel/core@7.29.7':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/generator': 7.29.7
+      '@babel/helper-compilation-targets': 7.29.7
+      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)
+      '@babel/helpers': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/template': 7.29.7
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
+      '@jridgewell/remapping': 2.3.5
+      convert-source-map: 2.0.0
+      debug: 4.4.3
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/generator@7.29.7':
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.1.0
+
+  '@babel/helper-annotate-as-pure@7.29.7':
+    dependencies:
+      '@babel/types': 7.29.7
+
+  '@babel/helper-compilation-targets@7.29.7':
+    dependencies:
+      '@babel/compat-data': 7.29.7
+      '@babel/helper-validator-option': 7.29.7
+      browserslist: 4.28.1
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-create-class-features-plugin@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-annotate-as-pure': 7.29.7
+      '@babel/helper-member-expression-to-functions': 7.29.7
+      '@babel/helper-optimise-call-expression': 7.29.7
+      '@babel/helper-replace-supers': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7
+      '@babel/traverse': 7.29.7
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-globals@7.29.7': {}
+
+  '@babel/helper-member-expression-to-functions@7.29.7':
+    dependencies:
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-imports@7.29.7':
+    dependencies:
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-module-imports': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
+      '@babel/traverse': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-optimise-call-expression@7.29.7':
+    dependencies:
+      '@babel/types': 7.29.7
+
+  '@babel/helper-plugin-utils@7.29.7': {}
+
+  '@babel/helper-replace-supers@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-member-expression-to-functions': 7.29.7
+      '@babel/helper-optimise-call-expression': 7.29.7
+      '@babel/traverse': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-skip-transparent-expression-wrappers@7.29.7':
+    dependencies:
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-string-parser@7.29.7': {}
+
+  '@babel/helper-validator-identifier@7.29.7': {}
+
+  '@babel/helper-validator-option@7.29.7': {}
+
+  '@babel/helpers@7.29.7':
+    dependencies:
+      '@babel/template': 7.29.7
+      '@babel/types': 7.29.7
+
+  '@babel/parser@7.29.7':
+    dependencies:
+      '@babel/types': 7.29.7
+
+  '@babel/plugin-syntax-jsx@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-typescript@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-modules-commonjs@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-typescript@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-annotate-as-pure': 7.29.7
+      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7
+      '@babel/plugin-syntax-typescript': 7.29.7(@babel/core@7.29.7)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/preset-typescript@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-validator-option': 7.29.7
+      '@babel/plugin-syntax-jsx': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-modules-commonjs': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-typescript': 7.29.7(@babel/core@7.29.7)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/runtime@7.29.7': {}
+
+  '@babel/template@7.29.7':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+
+  '@babel/traverse@7.29.7':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/generator': 7.29.7
+      '@babel/helper-globals': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/template': 7.29.7
+      '@babel/types': 7.29.7
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/types@7.29.7':
+    dependencies:
+      '@babel/helper-string-parser': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
+
+  '@base-ui/react@1.5.0(@date-fns/tz@1.4.1)(@types/react@19.2.14)(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@base-ui/utils': 0.2.9(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@floating-ui/react-dom': 2.1.8(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@floating-ui/utils': 0.2.11
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      use-sync-external-store: 1.6.0(react@19.2.4)
+    optionalDependencies:
+      '@date-fns/tz': 1.4.1
+      '@types/react': 19.2.14
+      date-fns: 4.1.0
+
+  '@base-ui/utils@0.2.9(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@floating-ui/utils': 0.2.11
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      reselect: 5.2.0
+      use-sync-external-store: 1.6.0(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@date-fns/tz@1.4.1':
+    optional: true
+
+  '@dotenvx/dotenvx@1.70.0':
+    dependencies:
+      commander: 11.1.0
+      dotenv: 17.4.2
+      eciesjs: 0.4.18
+      enquirer: 2.4.1
+      execa: 5.1.1
+      fdir: 6.5.0(picomatch@4.0.4)
+      ignore: 5.3.2
+      object-treeify: 1.1.33
+      picomatch: 4.0.4
+      which: 4.0.0
+      yocto-spinner: 1.2.0
+
+  '@ecies/ciphers@0.2.6(@noble/ciphers@1.3.0)':
+    dependencies:
+      '@noble/ciphers': 1.3.0
+
+  '@emnapi/runtime@1.11.3':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@floating-ui/core@1.7.5':
+    dependencies:
+      '@floating-ui/utils': 0.2.11
+
+  '@floating-ui/dom@1.7.6':
+    dependencies:
+      '@floating-ui/core': 1.7.5
+      '@floating-ui/utils': 0.2.11
+
+  '@floating-ui/react-dom@2.1.8(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@floating-ui/dom': 1.7.6
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+
+  '@floating-ui/utils@0.2.11': {}
+
+  '@hono/node-server@1.19.14(hono@4.12.25)':
+    dependencies:
+      hono: 4.12.25
+
+  '@img/colour@1.1.0':
+    optional: true
+
+  '@img/sharp-darwin-arm64@0.35.3':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-arm64': 1.3.2
+    optional: true
+
+  '@img/sharp-darwin-x64@0.35.3':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-x64': 1.3.2
+    optional: true
+
+  '@img/sharp-freebsd-wasm32@0.35.3':
+    dependencies:
+      '@img/sharp-wasm32': 0.35.3
+    optional: true
+
+  '@img/sharp-libvips-darwin-arm64@1.3.2':
+    optional: true
+
+  '@img/sharp-libvips-darwin-x64@1.3.2':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm64@1.3.2':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm@1.3.2':
+    optional: true
+
+  '@img/sharp-libvips-linux-ppc64@1.3.2':
+    optional: true
+
+  '@img/sharp-libvips-linux-riscv64@1.3.2':
+    optional: true
+
+  '@img/sharp-libvips-linux-s390x@1.3.2':
+    optional: true
+
+  '@img/sharp-libvips-linux-x64@1.3.2':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.3.2':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-x64@1.3.2':
+    optional: true
+
+  '@img/sharp-linux-arm64@0.35.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm64': 1.3.2
+    optional: true
+
+  '@img/sharp-linux-arm@0.35.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm': 1.3.2
+    optional: true
+
+  '@img/sharp-linux-ppc64@0.35.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-ppc64': 1.3.2
+    optional: true
+
+  '@img/sharp-linux-riscv64@0.35.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-riscv64': 1.3.2
+    optional: true
+
+  '@img/sharp-linux-s390x@0.35.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-s390x': 1.3.2
+    optional: true
+
+  '@img/sharp-linux-x64@0.35.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-x64': 1.3.2
+    optional: true
+
+  '@img/sharp-linuxmusl-arm64@0.35.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-arm64': 1.3.2
+    optional: true
+
+  '@img/sharp-linuxmusl-x64@0.35.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-x64': 1.3.2
+    optional: true
+
+  '@img/sharp-wasm32@0.35.3':
+    dependencies:
+      '@emnapi/runtime': 1.11.3
+    optional: true
+
+  '@img/sharp-webcontainers-wasm32@0.35.3':
+    dependencies:
+      '@img/sharp-wasm32': 0.35.3
+    optional: true
+
+  '@img/sharp-win32-arm64@0.35.3':
+    optional: true
+
+  '@img/sharp-win32-ia32@0.35.3':
+    optional: true
+
+  '@img/sharp-win32-x64@0.35.3':
+    optional: true
+
+  '@inquirer/ansi@2.0.7': {}
+
+  '@inquirer/confirm@6.1.1(@types/node@24.10.4)':
+    dependencies:
+      '@inquirer/core': 11.2.1(@types/node@24.10.4)
+      '@inquirer/type': 4.0.7(@types/node@24.10.4)
+    optionalDependencies:
+      '@types/node': 24.10.4
+
+  '@inquirer/core@11.2.1(@types/node@24.10.4)':
+    dependencies:
+      '@inquirer/ansi': 2.0.7
+      '@inquirer/figures': 2.0.7
+      '@inquirer/type': 4.0.7(@types/node@24.10.4)
+      cli-width: 4.1.0
+      fast-wrap-ansi: 0.2.2
+      mute-stream: 3.0.0
+      signal-exit: 4.1.0
+    optionalDependencies:
+      '@types/node': 24.10.4
+
+  '@inquirer/figures@2.0.7': {}
+
+  '@inquirer/type@4.0.7(@types/node@24.10.4)':
+    optionalDependencies:
+      '@types/node': 24.10.4
+
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@modelcontextprotocol/sdk@1.29.0(zod@3.25.76)':
+    dependencies:
+      '@hono/node-server': 1.19.14(hono@4.12.25)
+      ajv: 8.20.0
+      ajv-formats: 3.0.1(ajv@8.20.0)
+      content-type: 1.0.5
+      cors: 2.8.6
+      cross-spawn: 7.0.6
+      eventsource: 3.0.7
+      eventsource-parser: 3.1.0
+      express: 5.2.1
+      express-rate-limit: 8.5.2(express@5.2.1)
+      hono: 4.12.25
+      jose: 6.2.3
+      json-schema-typed: 8.0.2
+      pkce-challenge: 5.0.1
+      raw-body: 3.0.2
+      zod: 3.25.76
+      zod-to-json-schema: 3.25.2(zod@3.25.76)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@mswjs/interceptors@0.41.9':
+    dependencies:
+      '@open-draft/deferred-promise': 2.2.0
+      '@open-draft/logger': 0.3.0
+      '@open-draft/until': 2.1.0
+      is-node-process: 1.2.0
+      outvariant: 1.4.3
+      strict-event-emitter: 0.5.1
+
+  '@next/env@16.3.0': {}
+
+  '@next/swc-darwin-arm64@16.3.0':
+    optional: true
+
+  '@next/swc-darwin-x64@16.3.0':
+    optional: true
+
+  '@next/swc-linux-arm64-gnu@16.3.0':
+    optional: true
+
+  '@next/swc-linux-arm64-musl@16.3.0':
+    optional: true
+
+  '@next/swc-linux-x64-gnu@16.3.0':
+    optional: true
+
+  '@next/swc-linux-x64-musl@16.3.0':
+    optional: true
+
+  '@next/swc-win32-arm64-msvc@16.3.0':
+    optional: true
+
+  '@next/swc-win32-x64-msvc@16.3.0':
+    optional: true
+
+  '@noble/ciphers@1.3.0': {}
+
+  '@noble/curves@1.9.7':
+    dependencies:
+      '@noble/hashes': 1.8.0
+
+  '@noble/hashes@1.8.0': {}
+
+  '@nodelib/fs.scandir@2.1.5':
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  '@nodelib/fs.stat@2.0.5': {}
+
+  '@nodelib/fs.walk@1.2.8':
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.20.1
+
+  '@open-draft/deferred-promise@2.2.0': {}
+
+  '@open-draft/deferred-promise@3.0.0': {}
+
+  '@open-draft/logger@0.3.0':
+    dependencies:
+      is-node-process: 1.2.0
+      outvariant: 1.4.3
+
+  '@open-draft/until@2.1.0': {}
+
+  '@sec-ant/readable-stream@0.4.1': {}
+
+  '@sindresorhus/merge-streams@4.0.0': {}
+
+  '@swc/helpers@0.5.15':
+    dependencies:
+      tslib: 2.8.1
+
+  '@tailwindcss/node@4.3.3':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.24.2
+      jiti: 2.7.0
+      lightningcss: 1.32.0
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.3.3
+
+  '@tailwindcss/oxide-android-arm64@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.3':
+    optional: true
+
+  '@tailwindcss/oxide@4.3.3':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.3.3
+      '@tailwindcss/oxide-darwin-arm64': 4.3.3
+      '@tailwindcss/oxide-darwin-x64': 4.3.3
+      '@tailwindcss/oxide-freebsd-x64': 4.3.3
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.3.3
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.3.3
+      '@tailwindcss/oxide-linux-arm64-musl': 4.3.3
+      '@tailwindcss/oxide-linux-x64-gnu': 4.3.3
+      '@tailwindcss/oxide-linux-x64-musl': 4.3.3
+      '@tailwindcss/oxide-wasm32-wasi': 4.3.3
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.3.3
+      '@tailwindcss/oxide-win32-x64-msvc': 4.3.3
+
+  '@tailwindcss/postcss@4.3.3':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.3.3
+      '@tailwindcss/oxide': 4.3.3
+      postcss: 8.5.19
+      tailwindcss: 4.3.3
+
+  '@ts-morph/common@0.27.0':
+    dependencies:
+      fast-glob: 3.3.3
+      minimatch: 10.2.5
+      path-browserify: 1.0.1
+
+  '@types/node@24.10.4':
+    dependencies:
+      undici-types: 7.16.0
+
+  '@types/react-dom@19.2.3(@types/react@19.2.14)':
+    dependencies:
+      '@types/react': 19.2.14
+
+  '@types/react@19.2.14':
+    dependencies:
+      csstype: 3.2.3
+
+  '@types/set-cookie-parser@2.4.10':
+    dependencies:
+      '@types/node': 24.10.4
+
+  '@types/statuses@2.0.6': {}
+
+  '@types/validate-npm-package-name@4.0.2': {}
+
+  '@vercel/analytics@1.6.1(next@16.3.0(@babel/core@7.29.7)(@types/node@24.10.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)':
+    optionalDependencies:
+      next: 16.3.0(@babel/core@7.29.7)(@types/node@24.10.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+
+  accepts@2.0.0:
+    dependencies:
+      mime-types: 3.0.2
+      negotiator: 1.0.0
+
+  agent-base@7.1.4: {}
+
+  ajv-formats@3.0.1(ajv@8.20.0):
+    optionalDependencies:
+      ajv: 8.20.0
+
+  ajv@8.20.0:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-uri: 3.1.2
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+
+  ansi-colors@4.1.3: {}
+
+  ansi-regex@5.0.1: {}
+
+  ansi-regex@6.2.2: {}
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
+  argparse@2.0.1: {}
+
+  ast-types@0.16.1:
+    dependencies:
+      tslib: 2.8.1
+
+  balanced-match@4.0.4: {}
+
+  baseline-browser-mapping@2.9.19: {}
+
+  body-parser@2.2.2:
+    dependencies:
+      bytes: 3.1.2
+      content-type: 1.0.5
+      debug: 4.4.3
+      http-errors: 2.0.1
+      iconv-lite: 0.7.2
+      on-finished: 2.4.1
+      qs: 6.15.2
+      raw-body: 3.0.2
+      type-is: 2.1.0
+    transitivePeerDependencies:
+      - supports-color
+
+  brace-expansion@5.0.6:
+    dependencies:
+      balanced-match: 4.0.4
+
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
+  browserslist@4.28.1:
+    dependencies:
+      baseline-browser-mapping: 2.9.19
+      caniuse-lite: 1.0.30001769
+      electron-to-chromium: 1.5.286
+      node-releases: 2.0.27
+      update-browserslist-db: 1.2.3(browserslist@4.28.1)
+
+  bundle-name@4.1.0:
+    dependencies:
+      run-applescript: 7.1.0
+
+  bytes@3.1.2: {}
+
+  call-bind-apply-helpers@1.0.2:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+
+  call-bound@1.0.4:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      get-intrinsic: 1.3.0
+
+  callsites@3.1.0: {}
+
+  caniuse-lite@1.0.30001769: {}
+
+  chalk@5.6.2: {}
+
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
+  cli-cursor@5.0.0:
+    dependencies:
+      restore-cursor: 5.1.0
+
+  cli-spinners@2.9.2: {}
+
+  cli-width@4.1.0: {}
+
+  client-only@0.0.1: {}
+
+  cliui@8.0.1:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+
+  clsx@2.1.1: {}
+
+  code-block-writer@13.0.3: {}
+
+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
+  color-name@1.1.4: {}
+
+  commander@11.1.0: {}
+
+  commander@14.0.3: {}
+
+  content-disposition@1.1.0: {}
+
+  content-type@1.0.5: {}
+
+  content-type@2.0.0: {}
+
+  convert-source-map@2.0.0: {}
+
+  cookie-signature@1.2.2: {}
+
+  cookie@0.7.2: {}
+
+  cookie@1.1.1: {}
+
+  cors@2.8.6:
+    dependencies:
+      object-assign: 4.1.1
+      vary: 1.1.2
+
+  cosmiconfig@9.0.1(typescript@5.7.3):
+    dependencies:
+      env-paths: 2.2.1
+      import-fresh: 3.3.1
+      js-yaml: 4.2.0
+      parse-json: 5.2.0
+    optionalDependencies:
+      typescript: 5.7.3
+
+  cross-spawn@7.0.6:
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
+  cssesc@3.0.0: {}
+
+  csstype@3.2.3: {}
+
+  data-uri-to-buffer@4.0.1: {}
+
+  date-fns@4.1.0:
+    optional: true
+
+  debug@4.4.3:
+    dependencies:
+      ms: 2.1.3
+
+  dedent@1.7.2: {}
+
+  deepmerge@4.3.1: {}
+
+  default-browser-id@5.0.1: {}
+
+  default-browser@5.5.0:
+    dependencies:
+      bundle-name: 4.1.0
+      default-browser-id: 5.0.1
+
+  define-lazy-prop@3.0.0: {}
+
+  depd@2.0.0: {}
+
+  detect-libc@2.1.2: {}
+
+  diff@8.0.4: {}
+
+  dotenv@17.4.2: {}
+
+  dunder-proto@1.0.1:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  eciesjs@0.4.18:
+    dependencies:
+      '@ecies/ciphers': 0.2.6(@noble/ciphers@1.3.0)
+      '@noble/ciphers': 1.3.0
+      '@noble/curves': 1.9.7
+      '@noble/hashes': 1.8.0
+
+  ee-first@1.1.1: {}
+
+  electron-to-chromium@1.5.286: {}
+
+  emoji-regex@10.6.0: {}
+
+  emoji-regex@8.0.0: {}
+
+  encodeurl@2.0.0: {}
+
+  enhanced-resolve@5.24.2:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.3
+
+  enquirer@2.4.1:
+    dependencies:
+      ansi-colors: 4.1.3
+      strip-ansi: 6.0.1
+
+  env-paths@2.2.1: {}
+
+  error-ex@1.3.4:
+    dependencies:
+      is-arrayish: 0.2.1
+
+  es-define-property@1.0.1: {}
+
+  es-errors@1.3.0: {}
+
+  es-object-atoms@1.1.2:
+    dependencies:
+      es-errors: 1.3.0
+
+  escalade@3.2.0: {}
+
+  escape-html@1.0.3: {}
+
+  esprima@4.0.1: {}
+
+  etag@1.8.1: {}
+
+  eventsource-parser@3.1.0: {}
+
+  eventsource@3.0.7:
+    dependencies:
+      eventsource-parser: 3.1.0
+
+  execa@5.1.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      get-stream: 6.0.1
+      human-signals: 2.1.0
+      is-stream: 2.0.1
+      merge-stream: 2.0.0
+      npm-run-path: 4.0.1
+      onetime: 5.1.2
+      signal-exit: 3.0.7
+      strip-final-newline: 2.0.0
+
+  execa@9.6.1:
+    dependencies:
+      '@sindresorhus/merge-streams': 4.0.0
+      cross-spawn: 7.0.6
+      figures: 6.1.0
+      get-stream: 9.0.1
+      human-signals: 8.0.1
+      is-plain-obj: 4.1.0
+      is-stream: 4.0.1
+      npm-run-path: 6.0.0
+      pretty-ms: 9.3.0
+      signal-exit: 4.1.0
+      strip-final-newline: 4.0.0
+      yoctocolors: 2.1.2
+
+  express-rate-limit@8.5.2(express@5.2.1):
+    dependencies:
+      express: 5.2.1
+      ip-address: 10.2.0
+
+  express@5.2.1:
+    dependencies:
+      accepts: 2.0.0
+      body-parser: 2.2.2
+      content-disposition: 1.1.0
+      content-type: 1.0.5
+      cookie: 0.7.2
+      cookie-signature: 1.2.2
+      debug: 4.4.3
+      depd: 2.0.0
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      finalhandler: 2.1.1
+      fresh: 2.0.0
+      http-errors: 2.0.1
+      merge-descriptors: 2.0.0
+      mime-types: 3.0.2
+      on-finished: 2.4.1
+      once: 1.4.0
+      parseurl: 1.3.3
+      proxy-addr: 2.0.7
+      qs: 6.15.2
+      range-parser: 1.2.1
+      router: 2.2.0
+      send: 1.2.1
+      serve-static: 2.2.1
+      statuses: 2.0.2
+      type-is: 2.1.0
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  fast-deep-equal@3.1.3: {}
+
+  fast-glob@3.3.3:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
+  fast-string-truncated-width@3.0.3: {}
+
+  fast-string-width@3.0.2:
+    dependencies:
+      fast-string-truncated-width: 3.0.3
+
+  fast-uri@3.1.2: {}
+
+  fast-wrap-ansi@0.2.2:
+    dependencies:
+      fast-string-width: 3.0.2
+
+  fastq@1.20.1:
+    dependencies:
+      reusify: 1.1.0
+
+  fdir@6.5.0(picomatch@4.0.4):
+    optionalDependencies:
+      picomatch: 4.0.4
+
+  fetch-blob@3.2.0:
+    dependencies:
+      node-domexception: 1.0.0
+      web-streams-polyfill: 3.3.3
+
+  figures@6.1.0:
+    dependencies:
+      is-unicode-supported: 2.1.0
+
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
+  finalhandler@2.1.1:
+    dependencies:
+      debug: 4.4.3
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      statuses: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  formdata-polyfill@4.0.10:
+    dependencies:
+      fetch-blob: 3.2.0
+
+  forwarded@0.2.0: {}
+
+  fresh@2.0.0: {}
+
+  fs-extra@11.3.5:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.2.1
+      universalify: 2.0.1
+
+  function-bind@1.1.2: {}
+
+  fuzzysort@3.1.0: {}
+
+  gensync@1.0.0-beta.2: {}
+
+  get-caller-file@2.0.5: {}
+
+  get-east-asian-width@1.6.0: {}
+
+  get-intrinsic@1.3.0:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.2
+      function-bind: 1.1.2
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.4
+      math-intrinsics: 1.1.0
+
+  get-own-enumerable-keys@1.0.0: {}
+
+  get-proto@1.0.1:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.2
+
+  get-stream@6.0.1: {}
+
+  get-stream@9.0.1:
+    dependencies:
+      '@sec-ant/readable-stream': 0.4.1
+      is-stream: 4.0.1
+
+  glob-parent@5.1.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  gopd@1.2.0: {}
+
+  graceful-fs@4.2.11: {}
+
+  graphql@16.14.0: {}
+
+  has-symbols@1.1.0: {}
+
+  hasown@2.0.4:
+    dependencies:
+      function-bind: 1.1.2
+
+  headers-polyfill@5.0.1:
+    dependencies:
+      '@types/set-cookie-parser': 2.4.10
+      set-cookie-parser: 3.1.0
+
+  hono@4.12.25: {}
+
+  http-errors@2.0.1:
+    dependencies:
+      depd: 2.0.0
+      inherits: 2.0.4
+      setprototypeof: 1.2.0
+      statuses: 2.0.2
+      toidentifier: 1.0.1
+
+  https-proxy-agent@7.0.6:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  human-signals@2.1.0: {}
+
+  human-signals@8.0.1: {}
+
+  iconv-lite@0.7.2:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  ignore@5.3.2: {}
+
+  import-fresh@3.3.1:
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+
+  inherits@2.0.4: {}
+
+  ip-address@10.2.0: {}
+
+  ipaddr.js@1.9.1: {}
+
+  is-arrayish@0.2.1: {}
+
+  is-docker@3.0.0: {}
+
+  is-extglob@2.1.1: {}
+
+  is-fullwidth-code-point@3.0.0: {}
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+
+  is-in-ssh@1.0.0: {}
+
+  is-inside-container@1.0.0:
+    dependencies:
+      is-docker: 3.0.0
+
+  is-interactive@2.0.0: {}
+
+  is-node-process@1.2.0: {}
+
+  is-number@7.0.0: {}
+
+  is-obj@3.0.0: {}
+
+  is-plain-obj@4.1.0: {}
+
+  is-promise@4.0.0: {}
+
+  is-regexp@3.1.0: {}
+
+  is-stream@2.0.1: {}
+
+  is-stream@4.0.1: {}
+
+  is-unicode-supported@1.3.0: {}
+
+  is-unicode-supported@2.1.0: {}
+
+  is-wsl@3.1.1:
+    dependencies:
+      is-inside-container: 1.0.0
+
+  isexe@2.0.0: {}
+
+  isexe@3.1.5: {}
+
+  jiti@2.7.0: {}
+
+  jose@6.2.3: {}
+
+  js-tokens@4.0.0: {}
+
+  js-yaml@4.2.0:
+    dependencies:
+      argparse: 2.0.1
+
+  jsesc@3.1.0: {}
+
+  json-parse-even-better-errors@2.3.1: {}
+
+  json-schema-traverse@1.0.0: {}
+
+  json-schema-typed@8.0.2: {}
+
+  json5@2.2.3: {}
+
+  jsonfile@6.2.1:
+    dependencies:
+      universalify: 2.0.1
+    optionalDependencies:
+      graceful-fs: 4.2.11
+
+  kleur@3.0.3: {}
+
+  kleur@4.1.5: {}
+
+  lightningcss-android-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-x64@1.32.0:
+    optional: true
+
+  lightningcss-freebsd-x64@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.32.0:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    optional: true
+
+  lightningcss@1.32.0:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.32.0
+      lightningcss-darwin-arm64: 1.32.0
+      lightningcss-darwin-x64: 1.32.0
+      lightningcss-freebsd-x64: 1.32.0
+      lightningcss-linux-arm-gnueabihf: 1.32.0
+      lightningcss-linux-arm64-gnu: 1.32.0
+      lightningcss-linux-arm64-musl: 1.32.0
+      lightningcss-linux-x64-gnu: 1.32.0
+      lightningcss-linux-x64-musl: 1.32.0
+      lightningcss-win32-arm64-msvc: 1.32.0
+      lightningcss-win32-x64-msvc: 1.32.0
+
+  lines-and-columns@1.2.4: {}
+
+  log-symbols@6.0.0:
+    dependencies:
+      chalk: 5.6.2
+      is-unicode-supported: 1.3.0
+
+  lru-cache@5.1.1:
+    dependencies:
+      yallist: 3.1.1
+
+  lucide-react@1.17.0(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  math-intrinsics@1.1.0: {}
+
+  media-typer@1.1.0: {}
+
+  merge-descriptors@2.0.0: {}
+
+  merge-stream@2.0.0: {}
+
+  merge2@1.4.1: {}
+
+  micromatch@4.0.8:
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.2
+
+  mime-db@1.54.0: {}
+
+  mime-types@3.0.2:
+    dependencies:
+      mime-db: 1.54.0
+
+  mimic-fn@2.1.0: {}
+
+  mimic-function@5.0.1: {}
+
+  minimatch@10.2.5:
+    dependencies:
+      brace-expansion: 5.0.6
+
+  minimist@1.2.8: {}
+
+  ms@2.1.3: {}
+
+  msw@2.14.6(@types/node@24.10.4)(typescript@5.7.3):
+    dependencies:
+      '@inquirer/confirm': 6.1.1(@types/node@24.10.4)
+      '@mswjs/interceptors': 0.41.9
+      '@open-draft/deferred-promise': 3.0.0
+      '@types/statuses': 2.0.6
+      cookie: 1.1.1
+      graphql: 16.14.0
+      headers-polyfill: 5.0.1
+      is-node-process: 1.2.0
+      outvariant: 1.4.3
+      path-to-regexp: 6.3.0
+      picocolors: 1.1.1
+      rettime: 0.11.11
+      statuses: 2.0.2
+      strict-event-emitter: 0.5.1
+      tough-cookie: 6.0.1
+      type-fest: 5.7.0
+      until-async: 3.0.2
+      yargs: 17.7.2
+    optionalDependencies:
+      typescript: 5.7.3
+    transitivePeerDependencies:
+      - '@types/node'
+
+  mute-stream@3.0.0: {}
+
+  nanoid@3.3.11: {}
+
+  nanoid@3.3.16: {}
+
+  negotiator@1.0.0: {}
+
+  next@16.3.0(@babel/core@7.29.7)(@types/node@24.10.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      '@next/env': 16.3.0
+      '@swc/helpers': 0.5.15
+      baseline-browser-mapping: 2.9.19
+      caniuse-lite: 1.0.30001769
+      postcss: 8.5.23
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      styled-jsx: 5.1.6(@babel/core@7.29.7)(react@19.2.4)
+    optionalDependencies:
+      '@next/swc-darwin-arm64': 16.3.0
+      '@next/swc-darwin-x64': 16.3.0
+      '@next/swc-linux-arm64-gnu': 16.3.0
+      '@next/swc-linux-arm64-musl': 16.3.0
+      '@next/swc-linux-x64-gnu': 16.3.0
+      '@next/swc-linux-x64-musl': 16.3.0
+      '@next/swc-win32-arm64-msvc': 16.3.0
+      '@next/swc-win32-x64-msvc': 16.3.0
+      sharp: 0.35.3(@types/node@24.10.4)
+    transitivePeerDependencies:
+      - '@babel/core'
+      - '@types/node'
+      - babel-plugin-macros
+
+  node-domexception@1.0.0: {}
+
+  node-fetch@3.3.2:
+    dependencies:
+      data-uri-to-buffer: 4.0.1
+      fetch-blob: 3.2.0
+      formdata-polyfill: 4.0.10
+
+  node-releases@2.0.27: {}
+
+  npm-run-path@4.0.1:
+    dependencies:
+      path-key: 3.1.1
+
+  npm-run-path@6.0.0:
+    dependencies:
+      path-key: 4.0.0
+      unicorn-magic: 0.3.0
+
+  object-assign@4.1.1: {}
+
+  object-inspect@1.13.4: {}
+
+  object-treeify@1.1.33: {}
+
+  on-finished@2.4.1:
+    dependencies:
+      ee-first: 1.1.1
+
+  once@1.4.0:
+    dependencies:
+      wrappy: 1.0.2
+
+  onetime@5.1.2:
+    dependencies:
+      mimic-fn: 2.1.0
+
+  onetime@7.0.0:
+    dependencies:
+      mimic-function: 5.0.1
+
+  open@11.0.0:
+    dependencies:
+      default-browser: 5.5.0
+      define-lazy-prop: 3.0.0
+      is-in-ssh: 1.0.0
+      is-inside-container: 1.0.0
+      powershell-utils: 0.1.0
+      wsl-utils: 0.3.1
+
+  ora@8.2.0:
+    dependencies:
+      chalk: 5.6.2
+      cli-cursor: 5.0.0
+      cli-spinners: 2.9.2
+      is-interactive: 2.0.0
+      is-unicode-supported: 2.1.0
+      log-symbols: 6.0.0
+      stdin-discarder: 0.2.2
+      string-width: 7.2.0
+      strip-ansi: 7.2.0
+
+  outvariant@1.4.3: {}
+
+  parent-module@1.0.1:
+    dependencies:
+      callsites: 3.1.0
+
+  parse-json@5.2.0:
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      error-ex: 1.3.4
+      json-parse-even-better-errors: 2.3.1
+      lines-and-columns: 1.2.4
+
+  parse-ms@4.0.0: {}
+
+  parseurl@1.3.3: {}
+
+  path-browserify@1.0.1: {}
+
+  path-key@3.1.1: {}
+
+  path-key@4.0.0: {}
+
+  path-to-regexp@6.3.0: {}
+
+  path-to-regexp@8.4.2: {}
+
+  picocolors@1.1.1: {}
+
+  picomatch@2.3.2: {}
+
+  picomatch@4.0.4: {}
+
+  pkce-challenge@5.0.1: {}
+
+  postcss-selector-parser@7.1.1:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss@8.5.19:
+    dependencies:
+      nanoid: 3.3.16
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  postcss@8.5.23:
+    dependencies:
+      nanoid: 3.3.16
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  postcss@8.5.6:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  powershell-utils@0.1.0: {}
+
+  pretty-ms@9.3.0:
+    dependencies:
+      parse-ms: 4.0.0
+
+  prompts@2.4.2:
+    dependencies:
+      kleur: 3.0.3
+      sisteransi: 1.0.5
+
+  proxy-addr@2.0.7:
+    dependencies:
+      forwarded: 0.2.0
+      ipaddr.js: 1.9.1
+
+  qs@6.15.2:
+    dependencies:
+      side-channel: 1.1.0
+
+  queue-microtask@1.2.3: {}
+
+  range-parser@1.2.1: {}
+
+  raw-body@3.0.2:
+    dependencies:
+      bytes: 3.1.2
+      http-errors: 2.0.1
+      iconv-lite: 0.7.2
+      unpipe: 1.0.0
+
+  react-dom@19.2.4(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+      scheduler: 0.27.0
+
+  react@19.2.4: {}
+
+  recast@0.23.11:
+    dependencies:
+      ast-types: 0.16.1
+      esprima: 4.0.1
+      source-map: 0.6.1
+      tiny-invariant: 1.3.3
+      tslib: 2.8.1
+
+  require-directory@2.1.1: {}
+
+  require-from-string@2.0.2: {}
+
+  reselect@5.2.0: {}
+
+  resolve-from@4.0.0: {}
+
+  restore-cursor@5.1.0:
+    dependencies:
+      onetime: 7.0.0
+      signal-exit: 4.1.0
+
+  rettime@0.11.11: {}
+
+  reusify@1.1.0: {}
+
+  router@2.2.0:
+    dependencies:
+      debug: 4.4.3
+      depd: 2.0.0
+      is-promise: 4.0.0
+      parseurl: 1.3.3
+      path-to-regexp: 8.4.2
+    transitivePeerDependencies:
+      - supports-color
+
+  run-applescript@7.1.0: {}
+
+  run-parallel@1.2.0:
+    dependencies:
+      queue-microtask: 1.2.3
+
+  safer-buffer@2.1.2: {}
+
+  scheduler@0.27.0: {}
+
+  semver@6.3.1: {}
+
+  semver@7.8.5:
+    optional: true
+
+  send@1.2.1:
+    dependencies:
+      debug: 4.4.3
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      fresh: 2.0.0
+      http-errors: 2.0.1
+      mime-types: 3.0.2
+      ms: 2.1.3
+      on-finished: 2.4.1
+      range-parser: 1.2.1
+      statuses: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  serve-static@2.2.1:
+    dependencies:
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      parseurl: 1.3.3
+      send: 1.2.1
+    transitivePeerDependencies:
+      - supports-color
+
+  set-cookie-parser@3.1.0: {}
+
+  setprototypeof@1.2.0: {}
+
+  shadcn@4.10.0(@types/node@24.10.4)(typescript@5.7.3):
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/plugin-transform-typescript': 7.29.7(@babel/core@7.29.7)
+      '@babel/preset-typescript': 7.29.7(@babel/core@7.29.7)
+      '@dotenvx/dotenvx': 1.70.0
+      '@modelcontextprotocol/sdk': 1.29.0(zod@3.25.76)
+      '@types/validate-npm-package-name': 4.0.2
+      browserslist: 4.28.1
+      commander: 14.0.3
+      cosmiconfig: 9.0.1(typescript@5.7.3)
+      dedent: 1.7.2
+      deepmerge: 4.3.1
+      diff: 8.0.4
+      execa: 9.6.1
+      fast-glob: 3.3.3
+      fs-extra: 11.3.5
+      fuzzysort: 3.1.0
+      https-proxy-agent: 7.0.6
+      kleur: 4.1.5
+      msw: 2.14.6(@types/node@24.10.4)(typescript@5.7.3)
+      node-fetch: 3.3.2
+      open: 11.0.0
+      ora: 8.2.0
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.1
+      prompts: 2.4.2
+      recast: 0.23.11
+      stringify-object: 5.0.0
+      tailwind-merge: 3.4.0
+      ts-morph: 26.0.0
+      tsconfig-paths: 4.2.0
+      validate-npm-package-name: 7.0.2
+      zod: 3.25.76
+      zod-to-json-schema: 3.25.2(zod@3.25.76)
+    transitivePeerDependencies:
+      - '@cfworker/json-schema'
+      - '@types/node'
+      - babel-plugin-macros
+      - supports-color
+      - typescript
+
+  sharp@0.35.3(@types/node@24.10.4):
+    dependencies:
+      '@img/colour': 1.1.0
+      detect-libc: 2.1.2
+      semver: 7.8.5
+    optionalDependencies:
+      '@img/sharp-darwin-arm64': 0.35.3
+      '@img/sharp-darwin-x64': 0.35.3
+      '@img/sharp-freebsd-wasm32': 0.35.3
+      '@img/sharp-libvips-darwin-arm64': 1.3.2
+      '@img/sharp-libvips-darwin-x64': 1.3.2
+      '@img/sharp-libvips-linux-arm': 1.3.2
+      '@img/sharp-libvips-linux-arm64': 1.3.2
+      '@img/sharp-libvips-linux-ppc64': 1.3.2
+      '@img/sharp-libvips-linux-riscv64': 1.3.2
+      '@img/sharp-libvips-linux-s390x': 1.3.2
+      '@img/sharp-libvips-linux-x64': 1.3.2
+      '@img/sharp-libvips-linuxmusl-arm64': 1.3.2
+      '@img/sharp-libvips-linuxmusl-x64': 1.3.2
+      '@img/sharp-linux-arm': 0.35.3
+      '@img/sharp-linux-arm64': 0.35.3
+      '@img/sharp-linux-ppc64': 0.35.3
+      '@img/sharp-linux-riscv64': 0.35.3
+      '@img/sharp-linux-s390x': 0.35.3
+      '@img/sharp-linux-x64': 0.35.3
+      '@img/sharp-linuxmusl-arm64': 0.35.3
+      '@img/sharp-linuxmusl-x64': 0.35.3
+      '@img/sharp-webcontainers-wasm32': 0.35.3
+      '@img/sharp-win32-arm64': 0.35.3
+      '@img/sharp-win32-ia32': 0.35.3
+      '@img/sharp-win32-x64': 0.35.3
+      '@types/node': 24.10.4
+    optional: true
+
+  shebang-command@2.0.0:
+    dependencies:
+      shebang-regex: 3.0.0
+
+  shebang-regex@3.0.0: {}
+
+  side-channel-list@1.0.1:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-map@1.0.1:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-weakmap@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-map: 1.0.1
+
+  side-channel@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-list: 1.0.1
+      side-channel-map: 1.0.1
+      side-channel-weakmap: 1.0.2
+
+  signal-exit@3.0.7: {}
+
+  signal-exit@4.1.0: {}
+
+  sisteransi@1.0.5: {}
+
+  source-map-js@1.2.1: {}
+
+  source-map@0.6.1: {}
+
+  statuses@2.0.2: {}
+
+  stdin-discarder@0.2.2: {}
+
+  strict-event-emitter@0.5.1: {}
+
+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  string-width@7.2.0:
+    dependencies:
+      emoji-regex: 10.6.0
+      get-east-asian-width: 1.6.0
+      strip-ansi: 7.2.0
+
+  stringify-object@5.0.0:
+    dependencies:
+      get-own-enumerable-keys: 1.0.0
+      is-obj: 3.0.0
+      is-regexp: 3.1.0
+
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
+  strip-ansi@7.2.0:
+    dependencies:
+      ansi-regex: 6.2.2
+
+  strip-bom@3.0.0: {}
+
+  strip-final-newline@2.0.0: {}
+
+  strip-final-newline@4.0.0: {}
+
+  styled-jsx@5.1.6(@babel/core@7.29.7)(react@19.2.4):
+    dependencies:
+      client-only: 0.0.1
+      react: 19.2.4
+    optionalDependencies:
+      '@babel/core': 7.29.7
+
+  tagged-tag@1.0.0: {}
+
+  tailwind-merge@3.4.0: {}
+
+  tailwindcss@4.3.3: {}
+
+  tapable@2.3.3: {}
+
+  tiny-invariant@1.3.3: {}
+
+  tldts-core@7.4.2: {}
+
+  tldts@7.4.2:
+    dependencies:
+      tldts-core: 7.4.2
+
+  to-regex-range@5.0.1:
+    dependencies:
+      is-number: 7.0.0
+
+  toidentifier@1.0.1: {}
+
+  tough-cookie@6.0.1:
+    dependencies:
+      tldts: 7.4.2
+
+  ts-morph@26.0.0:
+    dependencies:
+      '@ts-morph/common': 0.27.0
+      code-block-writer: 13.0.3
+
+  tsconfig-paths@4.2.0:
+    dependencies:
+      json5: 2.2.3
+      minimist: 1.2.8
+      strip-bom: 3.0.0
+
+  tslib@2.8.1: {}
+
+  tw-animate-css@1.4.0: {}
+
+  type-fest@5.7.0:
+    dependencies:
+      tagged-tag: 1.0.0
+
+  type-is@2.1.0:
+    dependencies:
+      content-type: 2.0.0
+      media-typer: 1.1.0
+      mime-types: 3.0.2
+
+  typescript@5.7.3: {}
+
+  undici-types@7.16.0: {}
+
+  unicorn-magic@0.3.0: {}
+
+  universalify@2.0.1: {}
+
+  unpipe@1.0.0: {}
+
+  until-async@3.0.2: {}
+
+  update-browserslist-db@1.2.3(browserslist@4.28.1):
+    dependencies:
+      browserslist: 4.28.1
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
+  use-sync-external-store@1.6.0(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+
+  util-deprecate@1.0.2: {}
+
+  validate-npm-package-name@7.0.2: {}
+
+  vary@1.1.2: {}
+
+  web-streams-polyfill@3.3.3: {}
+
+  which@2.0.2:
+    dependencies:
+      isexe: 2.0.0
+
+  which@4.0.0:
+    dependencies:
+      isexe: 3.1.5
+
+  wrap-ansi@7.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrappy@1.0.2: {}
+
+  wsl-utils@0.3.1:
+    dependencies:
+      is-wsl: 3.1.1
+      powershell-utils: 0.1.0
+
+  y18n@5.0.8: {}
+
+  yallist@3.1.1: {}
+
+  yargs-parser@21.1.1: {}
+
+  yargs@17.7.2:
+    dependencies:
+      cliui: 8.0.1
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 21.1.1
+
+  yocto-spinner@1.2.0:
+    dependencies:
+      yoctocolors: 2.1.2
+
+  yoctocolors@2.1.2: {}
+
+  zod-to-json-schema@3.25.2(zod@3.25.76):
+    dependencies:
+      zod: 3.25.76
+
+  zod@3.25.76: {}
diff --git a/refs/pnpm-workspace.yaml b/refs/pnpm-workspace.yaml
new file mode 100644
index 0000000..8181285
--- /dev/null
+++ b/refs/pnpm-workspace.yaml
@@ -0,0 +1,2 @@
+allowBuilds:
+  msw: set this to true or false
diff --git a/refs/postcss.config.mjs b/refs/postcss.config.mjs
new file mode 100644
index 0000000..a869506
--- /dev/null
+++ b/refs/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}
+
+export default config
diff --git a/refs/public/placeholder-user.jpg b/refs/public/placeholder-user.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6fa7543d38ed8fdb38f03b5c0f40ad2d66827d4a
GIT binary patch
literal 1635
zcmex=<NpH&0WUXCHwH#V1_nkTWcYuZ!I^=Jot=}Njf<0mlbf51hhI{FpO24UPE1@#
zQbj>cRarq<NkiAtKtsz+TS?i-#mLOs*1^F+&A`pu)y~V(-oX}R2qQN)H$N}Gtbl;5
zt){Z3Ey>{jAqGJXh7$}Ym>C5bm;@P_1sVSzVUPwol9>?*7~p`Fjh%&&i5Vy<f-DS?
z|9^{thnbOqNq|`ZC~&g@u8VX=&D0{3NxJM8pgPZVC{;A7_ZmRB%rg%6?s#L-<8jAt
z0z{;6M(1w%g+C<%x63v_L_Qop_vlnupKyXLgwOCqL#0qDzHbAR3#0hCCI(yZ^Dhe6
zF%4q6JX@HXcv8TZpNd?b`6dvt1)_(e?F$%`&(vJvb^z&QR@8F^nq++Vvq=Gn&*oGp
ztH8i`B#KuC#AReE29iQ7J3t)rfIKjWodp;enVA?_x!E~6A*KL>o`r#xP0%qgXfnHy
zn7E>$Lug{-LIb0a!ifhj3W%7RB^MNLx}>0_tP&7BY4IaqjBo(siP4_n_ky5FEmL(`
zmhdc@Jb`OxUUPQK!#s<ks4a^p%H4WwDH~SypW$=Z+Y7nHVuC7`f>q(C`ZJd3YCA-U
zh)gnS;tOzhJ@#Yf$<H#|T_Xi0EycfeiDqs%zjsG4=iCqeb2guta$W3tyl3m%@RzH%
zw$)BNFmug&r#)BuLRM|CQ!V1T5}m5A6W-@iJL|m54!fk=sdn?qW<?z@Q0vqR3!XAL
zY<6+j>SRGl2DVF#R;SL@d2ijhdh5m?{S3~XPpnp*$)2k2D4JJuYTMD;n0K36=Y8OJ
z-mS1ZZC1<AQ;7$xFJ;KI$coB-@#?w#R%S(^Vy12TlL^0+jun3QbGz*s)t|7a{K#C>
z49BdqoLo<WB68%O^mTUSWN*BC$H7x@u4>M_v$9v)Hm?5W<`Stp{n4{)u7wjb{~fvi
z!T;47&))dGMoGtVj(5+GENxwrz4z{INB>V}1-4JUxp@DgJ8LKAUAQWhoR~X5%Wp!~
z<DEyIh54}GuHDORee^nG{=GJ{6F;tQFYa8gBi;RW!?hOKPp@w0bZ55BxNw^zr`q$9
z|Cgg0imF};Dm+VO?a6Cq6V!EZKX>=~v%IB`XWv<uso3&rOQXBsJ*#tZSFUs9{Y^K{
zS>>j>XTei(%h-3q0fm1bY5udCHKmu^f&G@&$==-St!-gGk?J$~inXs)aj#q07WR4-
zM=rxkFUy8C!QJtD_bgKux*|B+dhW6{-z2Xe?@~0Ks(ijMro-3a&Mj#N$xpGBRnmWt
zTsUxz-_bhtPj<sMeuw`I#q*`&SU0SnCF#EM>F={K-%Z^<th=u9Px?QDVDQ^dYbW_s
zu35R9EqP8RyTuy$o@<vb=I^oyx%njXt>57b<}UkWR&Lo)qWhnrV2yD?(SL?Q-l9d;
zHS6^j9!_Ejaqqemoyn}=@ptvvS-S7I7N7FZ5}(WNv3l;#-@XTLOmcJGRz1a7FhcBC
z-nPY(UsETGE4&Rdme=pC+jj2j;!j+6o-!m}7oD?jz2dGcAvK4%qSmfE=U+z7Z+`#j
z$Mx4a@1yJ$R+zt@y0z(yW_ISH^4k|<^!Al@?-M=r`gz3ehXgqVyM1>}k-Q}GF<-;)
z*LLGyVd)Qk|Ji$(J?dTY-07-((_=n&#1_`3T&d5FiH|guzja;wny>q}tw+C34*a{8
zfJ9i0DbumfeTVp1E#|(wudjdSJE%AnL@H&$nSBB{^D;34Gp|fN9u>e68m!_b0O__-
AD*ylh

literal 0
HcmV?d00001

diff --git a/refs/public/placeholder.svg b/refs/public/placeholder.svg
new file mode 100644
index 0000000..e763910
--- /dev/null
+++ b/refs/public/placeholder.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/refs/tsconfig.json b/refs/tsconfig.json
new file mode 100644
index 0000000..d3a3fd1
--- /dev/null
+++ b/refs/tsconfig.json
@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "target": "ES6",
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}