commit 5f18505943b84827deade696b587f575340c1cc9
Author: root <root@oyhkwtigrd.local>
Date:   Fri Jul 24 20:20:51 2026 +0200

    sync: full site from notebook (source of truth) + missing media

diff --git a/.cursor/commands/apply-edits.md b/.cursor/commands/apply-edits.md
new file mode 100644
index 0000000..67f071e
--- /dev/null
+++ b/.cursor/commands/apply-edits.md
@@ -0,0 +1,27 @@
+# Apply content edits
+
+Примени правки из режима content-edit на localhost.
+
+## Обязательно
+
+1. Прочитай и выполни **`.cursor/rules/content-edit-apply.mdc`**.
+2. Прочитай **`texts/content-edits/pending.json`**.
+3. Если `items` пуст — кратко сообщи, что очередь пуста, и остановись.
+4. Иначе для каждого пункта с непустым `instruction` (по возрастанию `n`):
+   - правь только **`src/pages/…`** (не `public/`);
+   - основной блок: `target.selector` → `target.content` / `snippet` → `anchorId`;
+   - дополнительные блоки из `refs[]` — тот же порядок; метки `«…»` в instruction ↔ `refs[].label`;
+   - выполни `instruction`.
+5. Русский текст после правок — скилл **`humanizer-ru`**.
+6. Запусти **`npm run build:pages`**.
+7. **`pending.json` не очищать** — очередь остаётся для проверки; пользователь сам удаляет пункты в dock или правит instruction и снова вызывает apply. По желанию обнови только `lastAppliedAt` (ISO).
+
+## Не делать
+
+- Не очищать `items` в `pending.json` после apply.
+- Не править `public/cases/*.html` вручную (только через сборку).
+- Не путать с режимом «правь в public» — см. `case-content-edit-in-public.mdc`.
+
+Если в сообщении указана страница (slug или путь) — примени только её `item.page`.
+
+В ответе пользователю — одна короткая строка или «готово», без списка правок, если он не просил отчёт.
diff --git a/.deploy-manifest.json b/.deploy-manifest.json
new file mode 100644
index 0000000..8502c33
--- /dev/null
+++ b/.deploy-manifest.json
@@ -0,0 +1,1586 @@
+{
+  "assets/ai-platform-primo-rpa/.gitkeep": {
+    "mtime": 1777548036560.4653,
+    "size": 2
+  },
+  "assets/ai-platform-primo-rpa/cover.png": {
+    "mtime": 1779377996031.643,
+    "size": 159015
+  },
+  "assets/ai-platform-primo-rpa/cover.webp": {
+    "mtime": 1779377996032.6443,
+    "size": 30364
+  },
+  "assets/ai-platform-primo-rpa/dataset-editor-old.png": {
+    "mtime": 1777636422809.364,
+    "size": 888287
+  },
+  "assets/ai-platform-primo-rpa/dataset-editor-old.webp": {
+    "mtime": 1779295491001,
+    "size": 280160
+  },
+  "assets/ai-platform-primo-rpa/dataset-editor-small-screen.png": {
+    "mtime": 1779377996036.6465,
+    "size": 404244
+  },
+  "assets/ai-platform-primo-rpa/dataset-editor-small-screen.webp": {
+    "mtime": 1779377996037.6458,
+    "size": 88614
+  },
+  "assets/ai-platform-primo-rpa/dataset-editor.png": {
+    "mtime": 1779377996046.131,
+    "size": 819234
+  },
+  "assets/ai-platform-primo-rpa/dataset-editor.webp": {
+    "mtime": 1779377996048.131,
+    "size": 153230
+  },
+  "assets/ai-platform-primo-rpa/dataset-lerning.png": {
+    "mtime": 1778061201695.4707,
+    "size": 178506
+  },
+  "assets/ai-platform-primo-rpa/dataset-lerning.webp": {
+    "mtime": 1779295491358,
+    "size": 76082
+  },
+  "assets/ai-platform-primo-rpa/dataset-quality.png": {
+    "mtime": 1778061201699.9893,
+    "size": 256076
+  },
+  "assets/ai-platform-primo-rpa/dataset-quality.webp": {
+    "mtime": 1779295491507,
+    "size": 101230
+  },
+  "assets/ai-platform-primo-rpa/dataset_editor-main_toolbar.png": {
+    "mtime": 1779377996049.637,
+    "size": 15031
+  },
+  "assets/ai-platform-primo-rpa/dataset_editor-main_toolbar.webp": {
+    "mtime": 1779377996050.6484,
+    "size": 6034
+  },
+  "assets/ai-platform-primo-rpa/dataset_editor-wireframe-default_mode.png": {
+    "mtime": 1779377996050.6484,
+    "size": 47547
+  },
+  "assets/ai-platform-primo-rpa/dataset_editor-wireframe-default_mode.webp": {
+    "mtime": 1779377996051.6475,
+    "size": 38664
+  },
+  "assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode-both_panels.png": {
+    "mtime": 1779377996053.8552,
+    "size": 56585
+  },
+  "assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode-both_panels.webp": {
+    "mtime": 1779377996054.8564,
+    "size": 44568
+  },
+  "assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode-left_panel.png": {
+    "mtime": 1779377996056.8555,
+    "size": 59824
+  },
+  "assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode-left_panel.webp": {
+    "mtime": 1779377996057.8606,
+    "size": 55050
+  },
+  "assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode-right_panel.png": {
+    "mtime": 1779377996058.8574,
+    "size": 60884
+  },
+  "assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode-right_panel.webp": {
+    "mtime": 1779377996059.86,
+    "size": 55078
+  },
+  "assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode.png": {
+    "mtime": 1779377996060.891,
+    "size": 64220
+  },
+  "assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode.webp": {
+    "mtime": 1779377996062.934,
+    "size": 63640
+  },
+  "assets/ai-platform-primo-rpa/fields-maping.mp4": {
+    "mtime": 1778061201754.2502,
+    "size": 12663587
+  },
+  "assets/ai-platform-primo-rpa/fields-maping.webm": {
+    "mtime": 1778061201761.628,
+    "size": 811806
+  },
+  "assets/ai-platform-primo-rpa/fields-maping.webp": {
+    "mtime": 1778061201763.6267,
+    "size": 86646
+  },
+  "assets/ai-platform-primo-rpa/full-screen-mode-with-panels.png": {
+    "mtime": 1778061201769.9807,
+    "size": 555909
+  },
+  "assets/ai-platform-primo-rpa/full-screen-mode-with-panels.webp": {
+    "mtime": 1779295492433,
+    "size": 110334
+  },
+  "assets/ai-platform-primo-rpa/full-screen-mode-zen.png": {
+    "mtime": 1778061201774.9817,
+    "size": 502027
+  },
+  "assets/ai-platform-primo-rpa/full-screen-mode-zen.webp": {
+    "mtime": 1779295492517,
+    "size": 94372
+  },
+  "assets/ai-platform-primo-rpa/fullscreen_modal-import_dataset.png": {
+    "mtime": 1779377996064.941,
+    "size": 72399
+  },
+  "assets/ai-platform-primo-rpa/fullscreen_modal-import_dataset.webp": {
+    "mtime": 1779377996066.941,
+    "size": 26252
+  },
+  "assets/ai-platform-primo-rpa/fullscreen_modal-in_project-import_dataset.png": {
+    "mtime": 1779377996069.4497,
+    "size": 130169
+  },
+  "assets/ai-platform-primo-rpa/fullscreen_modal-in_project-import_dataset.webp": {
+    "mtime": 1779377996071.4585,
+    "size": 30506
+  },
+  "assets/ai-platform-primo-rpa/in_project-learn-card-learning_process.png": {
+    "mtime": 1779377996073.4573,
+    "size": 113156
+  },
+  "assets/ai-platform-primo-rpa/in_project-learn-card-learning_process.webp": {
+    "mtime": 1779377996075.4573,
+    "size": 67896
+  },
+  "assets/ai-platform-primo-rpa/in_project-learn-card-learning_process_wireframe.png": {
+    "mtime": 1779377996076.4575,
+    "size": 8462
+  },
+  "assets/ai-platform-primo-rpa/in_project-learn-card-learning_process_wireframe.webp": {
+    "mtime": 1779377996077.4592,
+    "size": 4008
+  },
+  "assets/ai-platform-primo-rpa/in_project-learn-card-new.png": {
+    "mtime": 1779377996079.963,
+    "size": 109260
+  },
+  "assets/ai-platform-primo-rpa/in_project-learn-card-new.webp": {
+    "mtime": 1779377996081.969,
+    "size": 77098
+  },
+  "assets/ai-platform-primo-rpa/in_project-learn-card-сollapsed.png": {
+    "mtime": 1779377996082.9697,
+    "size": 6342
+  },
+  "assets/ai-platform-primo-rpa/in_project-learn-card-сollapsed.webp": {
+    "mtime": 1779377996085.1777,
+    "size": 4868
+  },
+  "assets/ai-platform-primo-rpa/in_project-learn-overview.png": {
+    "mtime": 1779377996088.1775,
+    "size": 147934
+  },
+  "assets/ai-platform-primo-rpa/in_project-learn-overview.webp": {
+    "mtime": 1779377996089.6838,
+    "size": 28904
+  },
+  "assets/ai-platform-primo-rpa/main-new.png": {
+    "mtime": 1779377996092.691,
+    "size": 191708
+  },
+  "assets/ai-platform-primo-rpa/main-new.webp": {
+    "mtime": 1779377996093.6912,
+    "size": 56804
+  },
+  "assets/ai-platform-primo-rpa/main.png": {
+    "mtime": 1779377996099.692,
+    "size": 430951
+  },
+  "assets/ai-platform-primo-rpa/main.webp": {
+    "mtime": 1779377996101.8147,
+    "size": 108008
+  },
+  "assets/ai-platform-primo-rpa/nav-project-nlp.png": {
+    "mtime": 1779377996103.8135,
+    "size": 109931
+  },
+  "assets/ai-platform-primo-rpa/nav-project-nlp.webp": {
+    "mtime": 1779377996104.8171,
+    "size": 18854
+  },
+  "assets/ai-platform-primo-rpa/nav-project-ocr.png": {
+    "mtime": 1779377996106.8132,
+    "size": 116365
+  },
+  "assets/ai-platform-primo-rpa/nav-project-ocr.webp": {
+    "mtime": 1779377996107.8135,
+    "size": 24166
+  },
+  "assets/ai-platform-primo-rpa/nav-secondary-detail_view.png": {
+    "mtime": 1779377996108.8142,
+    "size": 17770
+  },
+  "assets/ai-platform-primo-rpa/nav-secondary-detail_view.webp": {
+    "mtime": 1779377996108.8142,
+    "size": 5266
+  },
+  "assets/favicon/android-chrome-192x192.png": {
+    "mtime": 1780513420000,
+    "size": 45462
+  },
+  "assets/favicon/android-chrome-512x512.png": {
+    "mtime": 1780513420000,
+    "size": 259917
+  },
+  "assets/favicon/apple-touch-icon.png": {
+    "mtime": 1780513420000,
+    "size": 41086
+  },
+  "assets/favicon/favicon-16x16.png": {
+    "mtime": 1780513420000,
+    "size": 776
+  },
+  "assets/favicon/favicon-32x32.png": {
+    "mtime": 1780513420000,
+    "size": 2166
+  },
+  "assets/favicon/favicon.ico": {
+    "mtime": 1780513420000,
+    "size": 15406
+  },
+  "assets/favicon/favicon.png": {
+    "mtime": 1780520464204.617,
+    "size": 778312
+  },
+  "assets/favicon/favicon_bg.png": {
+    "mtime": 1780520601264.4983,
+    "size": 791215
+  },
+  "assets/favicon/site.webmanifest": {
+    "mtime": 1780513420000,
+    "size": 263
+  },
+  "assets/fonts/files/alice-cyrillic-400-normal.woff2": {
+    "mtime": 1779377996112.3274,
+    "size": 17784
+  },
+  "assets/fonts/files/alice-cyrillic-ext-400-normal.woff2": {
+    "mtime": 1779377996113.3308,
+    "size": 15748
+  },
+  "assets/fonts/files/alice-latin-400-normal.woff2": {
+    "mtime": 1779377996114.3271,
+    "size": 25788
+  },
+  "assets/fonts/files/alice-latin-ext-400-normal.woff2": {
+    "mtime": 1779377996115.328,
+    "size": 4880
+  },
+  "assets/fonts/files/geologica-cyrillic-ext-wght-normal.woff2": {
+    "mtime": 1779377996117.3262,
+    "size": 11488
+  },
+  "assets/fonts/files/geologica-cyrillic-wght-normal.woff2": {
+    "mtime": 1779377996118.3267,
+    "size": 16428
+  },
+  "assets/fonts/files/geologica-greek-wght-normal.woff2": {
+    "mtime": 1779377996118.3267,
+    "size": 10928
+  },
+  "assets/fonts/files/geologica-latin-ext-wght-normal.woff2": {
+    "mtime": 1779377996119.833,
+    "size": 22404
+  },
+  "assets/fonts/files/geologica-latin-wght-normal.woff2": {
+    "mtime": 1779377996120.8398,
+    "size": 24944
+  },
+  "assets/fonts/files/geologica-vietnamese-wght-normal.woff2": {
+    "mtime": 1779377996121.8386,
+    "size": 8328
+  },
+  "assets/fonts/files/merriweather-cyrillic-400-normal.woff2": {
+    "mtime": 1779377996122.839,
+    "size": 25484
+  },
+  "assets/fonts/files/merriweather-cyrillic-700-normal.woff2": {
+    "mtime": 1779377996123.8394,
+    "size": 25492
+  },
+  "assets/fonts/files/merriweather-cyrillic-ext-400-normal.woff2": {
+    "mtime": 1779377996124.9783,
+    "size": 18600
+  },
+  "assets/fonts/files/merriweather-cyrillic-ext-700-normal.woff2": {
+    "mtime": 1779377996125.9778,
+    "size": 18560
+  },
+  "assets/fonts/files/merriweather-latin-400-normal.woff2": {
+    "mtime": 1779377996126.9783,
+    "size": 49168
+  },
+  "assets/fonts/files/merriweather-latin-700-normal.woff2": {
+    "mtime": 1779377996127.9773,
+    "size": 48660
+  },
+  "assets/fonts/files/merriweather-latin-ext-400-normal.woff2": {
+    "mtime": 1779377996129.4827,
+    "size": 42952
+  },
+  "assets/fonts/files/merriweather-latin-ext-700-normal.woff2": {
+    "mtime": 1779377996130.4888,
+    "size": 42880
+  },
+  "assets/fonts/files/merriweather-vietnamese-400-normal.woff2": {
+    "mtime": 1779377996131.49,
+    "size": 6664
+  },
+  "assets/fonts/files/merriweather-vietnamese-700-normal.woff2": {
+    "mtime": 1779377996133.4978,
+    "size": 6660
+  },
+  "assets/fonts/files/pt-mono-cyrillic-400-normal.woff2": {
+    "mtime": 1779377996134.4993,
+    "size": 15356
+  },
+  "assets/fonts/files/pt-mono-cyrillic-ext-400-normal.woff2": {
+    "mtime": 1779377996135.4956,
+    "size": 22028
+  },
+  "assets/fonts/files/pt-mono-latin-400-normal.woff2": {
+    "mtime": 1779377996136.4954,
+    "size": 27436
+  },
+  "assets/fonts/files/pt-mono-latin-ext-400-normal.woff2": {
+    "mtime": 1779377996137.4963,
+    "size": 16072
+  },
+  "assets/fonts/files/pt-sans-cyrillic-400-normal.woff2": {
+    "mtime": 1779377996138.4968,
+    "size": 28548
+  },
+  "assets/fonts/files/pt-sans-cyrillic-700-normal.woff2": {
+    "mtime": 1779377996139.4963,
+    "size": 30164
+  },
+  "assets/fonts/files/pt-sans-cyrillic-ext-400-normal.woff2": {
+    "mtime": 1779377996140.0027,
+    "size": 42680
+  },
+  "assets/fonts/files/pt-sans-cyrillic-ext-700-normal.woff2": {
+    "mtime": 1779377996142.004,
+    "size": 39584
+  },
+  "assets/fonts/files/pt-sans-latin-400-normal.woff2": {
+    "mtime": 1779377996143.0056,
+    "size": 45532
+  },
+  "assets/fonts/files/pt-sans-latin-700-normal.woff2": {
+    "mtime": 1779377996144.0051,
+    "size": 47180
+  },
+  "assets/fonts/files/pt-sans-latin-ext-400-normal.woff2": {
+    "mtime": 1779377996145.0054,
+    "size": 26812
+  },
+  "assets/fonts/files/pt-sans-latin-ext-700-normal.woff2": {
+    "mtime": 1779377996147.0066,
+    "size": 29624
+  },
+  "assets/fonts/files/source-code-pro-cyrillic-400-normal.woff2": {
+    "mtime": 1779377996147.0066,
+    "size": 6788
+  },
+  "assets/fonts/files/source-code-pro-cyrillic-500-normal.woff2": {
+    "mtime": 1779377996148.0044,
+    "size": 6836
+  },
+  "assets/fonts/files/source-code-pro-cyrillic-600-normal.woff2": {
+    "mtime": 1779377996149.5103,
+    "size": 6796
+  },
+  "assets/fonts/files/source-code-pro-cyrillic-700-normal.woff2": {
+    "mtime": 1779377996150.517,
+    "size": 6800
+  },
+  "assets/fonts/files/source-code-pro-cyrillic-ext-400-normal.woff2": {
+    "mtime": 1779377996150.517,
+    "size": 4516
+  },
+  "assets/fonts/files/source-code-pro-cyrillic-ext-500-normal.woff2": {
+    "mtime": 1779377996151.5173,
+    "size": 4556
+  },
+  "assets/fonts/files/source-code-pro-cyrillic-ext-600-normal.woff2": {
+    "mtime": 1779377996152.5176,
+    "size": 4520
+  },
+  "assets/fonts/files/source-code-pro-cyrillic-ext-700-normal.woff2": {
+    "mtime": 1779377996153.5164,
+    "size": 4480
+  },
+  "assets/fonts/files/source-code-pro-greek-400-normal.woff2": {
+    "mtime": 1779377996154.5195,
+    "size": 5528
+  },
+  "assets/fonts/files/source-code-pro-greek-500-normal.woff2": {
+    "mtime": 1779377996155.5168,
+    "size": 5584
+  },
+  "assets/fonts/files/source-code-pro-greek-600-normal.woff2": {
+    "mtime": 1779377996155.5168,
+    "size": 5532
+  },
+  "assets/fonts/files/source-code-pro-greek-700-normal.woff2": {
+    "mtime": 1779377996156.5166,
+    "size": 5528
+  },
+  "assets/fonts/files/source-code-pro-greek-ext-400-normal.woff2": {
+    "mtime": 1779377996157.5166,
+    "size": 1852
+  },
+  "assets/fonts/files/source-code-pro-greek-ext-500-normal.woff2": {
+    "mtime": 1779377996158.5164,
+    "size": 1856
+  },
+  "assets/fonts/files/source-code-pro-greek-ext-600-normal.woff2": {
+    "mtime": 1779377996159.5183,
+    "size": 1868
+  },
+  "assets/fonts/files/source-code-pro-greek-ext-700-normal.woff2": {
+    "mtime": 1779377996160.6191,
+    "size": 1824
+  },
+  "assets/fonts/files/source-code-pro-latin-400-normal.woff2": {
+    "mtime": 1779377996160.6191,
+    "size": 11656
+  },
+  "assets/fonts/files/source-code-pro-latin-500-normal.woff2": {
+    "mtime": 1779377996161.619,
+    "size": 11604
+  },
+  "assets/fonts/files/source-code-pro-latin-600-normal.woff2": {
+    "mtime": 1779377996163.6172,
+    "size": 11628
+  },
+  "assets/fonts/files/source-code-pro-latin-700-normal.woff2": {
+    "mtime": 1779377996163.6172,
+    "size": 11540
+  },
+  "assets/fonts/files/source-code-pro-latin-ext-400-normal.woff2": {
+    "mtime": 1779377996165.6191,
+    "size": 17748
+  },
+  "assets/fonts/files/source-code-pro-latin-ext-500-normal.woff2": {
+    "mtime": 1779377996166.6196,
+    "size": 17752
+  },
+  "assets/fonts/files/source-code-pro-latin-ext-600-normal.woff2": {
+    "mtime": 1779377996167.6196,
+    "size": 17640
+  },
+  "assets/fonts/files/source-code-pro-latin-ext-700-normal.woff2": {
+    "mtime": 1779377996168.6196,
+    "size": 17644
+  },
+  "assets/fonts/files/source-code-pro-vietnamese-400-normal.woff2": {
+    "mtime": 1779377996169.619,
+    "size": 4752
+  },
+  "assets/fonts/files/source-code-pro-vietnamese-500-normal.woff2": {
+    "mtime": 1779377996170.1245,
+    "size": 4804
+  },
+  "assets/fonts/files/source-code-pro-vietnamese-600-normal.woff2": {
+    "mtime": 1779377996171.1304,
+    "size": 4704
+  },
+  "assets/fonts/files/source-code-pro-vietnamese-700-normal.woff2": {
+    "mtime": 1779377996172.1353,
+    "size": 4748
+  },
+  "assets/fonts/geologica.css": {
+    "mtime": 1779377996172.1353,
+    "size": 5047
+  },
+  "assets/fonts/merriweather.css": {
+    "mtime": 1779377996173.1355,
+    "size": 5119
+  },
+  "assets/fonts/mono.css": {
+    "mtime": 1779377996174.135,
+    "size": 11463
+  },
+  "assets/index/ava-bg-1.png": {
+    "mtime": 1776187876634.7048,
+    "size": 1279764
+  },
+  "assets/index/ava-bg-1.webp": {
+    "mtime": 1777054556943,
+    "size": 81378
+  },
+  "assets/index/me-transparentBG-1.png": {
+    "mtime": 1776189627628.54,
+    "size": 1011694
+  },
+  "assets/index/me-transparentBG-1.webp": {
+    "mtime": 1777054557058,
+    "size": 141834
+  },
+  "assets/index/me_motion.mp4": {
+    "mtime": 1777636422897.9202,
+    "size": 311169
+  },
+  "assets/index/me_motion.webm": {
+    "mtime": 1777636422899.8853,
+    "size": 215347
+  },
+  "assets/index/me_motion.webp": {
+    "mtime": 1777636422902.3997,
+    "size": 79376
+  },
+  "assets/index/me_static.png": {
+    "mtime": 1777636422916.1433,
+    "size": 1592317
+  },
+  "assets/index/me_static.webp": {
+    "mtime": 1777636422917.152,
+    "size": 141572
+  },
+  "assets/lunacy/.gitkeep": {
+    "mtime": 1779377996175.1355,
+    "size": 2
+  },
+  "assets/lunacy/blob_settings_on_canvas.png": {
+    "mtime": 1779377996193.6858,
+    "size": 185060
+  },
+  "assets/lunacy/blob_settings_on_canvas.webp": {
+    "mtime": 1779377996194.6858,
+    "size": 48762
+  },
+  "assets/lunacy/blob_settings_panel_v1.png": {
+    "mtime": 1779377996195.6848,
+    "size": 16000
+  },
+  "assets/lunacy/blob_settings_panel_v1.webp": {
+    "mtime": 1779377996196.6843,
+    "size": 6868
+  },
+  "assets/lunacy/blob_settings_panel_v2.png": {
+    "mtime": 1779377996196.6843,
+    "size": 13903
+  },
+  "assets/lunacy/blob_settings_panel_v2.webp": {
+    "mtime": 1779377996197.6863,
+    "size": 4308
+  },
+  "assets/lunacy/blob_settings_panel_v3.png": {
+    "mtime": 1779377996197.6863,
+    "size": 20852
+  },
+  "assets/lunacy/blob_settings_panel_v3.webp": {
+    "mtime": 1779377996198.6855,
+    "size": 9948
+  },
+  "assets/lunacy/blob_settings_panel_v4.png": {
+    "mtime": 1779377996198.6855,
+    "size": 15539
+  },
+  "assets/lunacy/blob_settings_panel_v4.webp": {
+    "mtime": 1779377996199.6868,
+    "size": 3930
+  },
+  "assets/lunacy/blob_settings_panel_v5.png": {
+    "mtime": 1779377996200.7917,
+    "size": 14378
+  },
+  "assets/lunacy/blob_settings_panel_v5.webp": {
+    "mtime": 1779377996200.7917,
+    "size": 3864
+  },
+  "assets/lunacy/blob_settings_panel_v6.png": {
+    "mtime": 1779377996201.7903,
+    "size": 14869
+  },
+  "assets/lunacy/blob_settings_panel_v6.webp": {
+    "mtime": 1779377996202.7896,
+    "size": 4080
+  },
+  "assets/lunacy/blob_settings_panel_v7.png": {
+    "mtime": 1779377996202.7896,
+    "size": 23381
+  },
+  "assets/lunacy/blob_settings_panel_v7.webp": {
+    "mtime": 1779377996203.7908,
+    "size": 7690
+  },
+  "assets/lunacy/blob_settings_panel_v8.png": {
+    "mtime": 1779377996204.7915,
+    "size": 15387
+  },
+  "assets/lunacy/blob_settings_panel_v8.webp": {
+    "mtime": 1779377996204.7915,
+    "size": 4542
+  },
+  "assets/lunacy/blob_settings_panel_v9.png": {
+    "mtime": 1779377996205.7905,
+    "size": 18344
+  },
+  "assets/lunacy/blob_settings_panel_v9.webp": {
+    "mtime": 1779377996206.7903,
+    "size": 8820
+  },
+  "assets/lunacy/compare_components_modal_window.png": {
+    "mtime": 1779377996207.7922,
+    "size": 103262
+  },
+  "assets/lunacy/compare_components_modal_window.webp": {
+    "mtime": 1779377996208.7913,
+    "size": 23548
+  },
+  "assets/lunacy/components_update_indicator_location_panel.png": {
+    "mtime": 1779377996210.2961,
+    "size": 75843
+  },
+  "assets/lunacy/components_update_indicator_location_panel.webp": {
+    "mtime": 1779377996211.3025,
+    "size": 24570
+  },
+  "assets/lunacy/cover.webp": {
+    "mtime": 1779377996212.307,
+    "size": 198532
+  },
+  "assets/lunacy/Lunacy_app_overview.png": {
+    "mtime": 1779377996188.6538,
+    "size": 1304403
+  },
+  "assets/lunacy/Lunacy_app_overview.webp": {
+    "mtime": 1779377996191.6865,
+    "size": 198532
+  },
+  "assets/lunacy/modal_window_for_prototype_create_on_canvas.png": {
+    "mtime": 1779377996218.308,
+    "size": 699587
+  },
+  "assets/lunacy/modal_window_for_prototype_create_on_canvas.webp": {
+    "mtime": 1779377996219.8125,
+    "size": 114986
+  },
+  "assets/lunacy/modal_window_for_prototype_panel_states.png": {
+    "mtime": 1779377996221.818,
+    "size": 163537
+  },
+  "assets/lunacy/modal_window_for_prototype_panel_states.webp": {
+    "mtime": 1779377996222.8186,
+    "size": 67292
+  },
+  "assets/lunacy/shadow_pro_settings_ideas.png": {
+    "mtime": 1779377996224.3208,
+    "size": 150278
+  },
+  "assets/lunacy/shadow_pro_settings_ideas.webp": {
+    "mtime": 1779377996225.3252,
+    "size": 41824
+  },
+  "assets/lunacy/shadow_pro_settings_modal_auto-off.png": {
+    "mtime": 1779377996227.3298,
+    "size": 149676
+  },
+  "assets/lunacy/shadow_pro_settings_modal_auto-off.webp": {
+    "mtime": 1779377996228.329,
+    "size": 20878
+  },
+  "assets/lunacy/shadow_pro_settings_modal_auto_on.png": {
+    "mtime": 1779377996229.8337,
+    "size": 133884
+  },
+  "assets/lunacy/shadow_pro_settings_modal_auto_on.webp": {
+    "mtime": 1779377996230.84,
+    "size": 20552
+  },
+  "assets/lunacy/shadow_pro_settings_panel.png": {
+    "mtime": 1779377996232.8403,
+    "size": 175508
+  },
+  "assets/lunacy/shadow_pro_settings_panel.webp": {
+    "mtime": 1779377996233.8416,
+    "size": 64304
+  },
+  "assets/lunacy/sliders_all_set.png": {
+    "mtime": 1779377996260.5515,
+    "size": 653520
+  },
+  "assets/lunacy/sliders_all_set.webp": {
+    "mtime": 1779377996261.5532,
+    "size": 82004
+  },
+  "assets/lunacy/slider_14.png": {
+    "mtime": 1779377996233.8416,
+    "size": 15296
+  },
+  "assets/lunacy/slider_14.webp": {
+    "mtime": 1779377996234.8418,
+    "size": 6104
+  },
+  "assets/lunacy/slider_v1.png": {
+    "mtime": 1779377996235.8403,
+    "size": 11997
+  },
+  "assets/lunacy/slider_v1.webp": {
+    "mtime": 1779377996235.8403,
+    "size": 4894
+  },
+  "assets/lunacy/slider_v10.png": {
+    "mtime": 1779377996236.8413,
+    "size": 16438
+  },
+  "assets/lunacy/slider_v10.webp": {
+    "mtime": 1779377996237.8428,
+    "size": 5316
+  },
+  "assets/lunacy/slider_v11.png": {
+    "mtime": 1779377996237.8428,
+    "size": 15713
+  },
+  "assets/lunacy/slider_v11.webp": {
+    "mtime": 1779377996238.8408,
+    "size": 5264
+  },
+  "assets/lunacy/slider_v12.png": {
+    "mtime": 1779377996239.8408,
+    "size": 16355
+  },
+  "assets/lunacy/slider_v12.webp": {
+    "mtime": 1779377996239.8408,
+    "size": 5236
+  },
+  "assets/lunacy/slider_v13.png": {
+    "mtime": 1779377996240.93,
+    "size": 16412
+  },
+  "assets/lunacy/slider_v13.webp": {
+    "mtime": 1779377996240.93,
+    "size": 4780
+  },
+  "assets/lunacy/slider_v15.png": {
+    "mtime": 1779377996241.9312,
+    "size": 16438
+  },
+  "assets/lunacy/slider_v15.webp": {
+    "mtime": 1779377996241.9312,
+    "size": 5316
+  },
+  "assets/lunacy/slider_v16.png": {
+    "mtime": 1779377996242.932,
+    "size": 16992
+  },
+  "assets/lunacy/slider_v16.webp": {
+    "mtime": 1779377996242.932,
+    "size": 5042
+  },
+  "assets/lunacy/slider_v17.png": {
+    "mtime": 1779377996243.93,
+    "size": 14273
+  },
+  "assets/lunacy/slider_v17.webp": {
+    "mtime": 1779377996244.9321,
+    "size": 4370
+  },
+  "assets/lunacy/slider_v18.png": {
+    "mtime": 1779377996244.9321,
+    "size": 15153
+  },
+  "assets/lunacy/slider_v18.webp": {
+    "mtime": 1779377996245.9304,
+    "size": 5138
+  },
+  "assets/lunacy/slider_v2.png": {
+    "mtime": 1779377996245.9304,
+    "size": 12918
+  },
+  "assets/lunacy/slider_v2.webp": {
+    "mtime": 1779377996246.9302,
+    "size": 5676
+  },
+  "assets/lunacy/slider_v3.png": {
+    "mtime": 1779377996247.9326,
+    "size": 24683
+  },
+  "assets/lunacy/slider_v3.webp": {
+    "mtime": 1779377996247.9326,
+    "size": 6056
+  },
+  "assets/lunacy/slider_v4.png": {
+    "mtime": 1779377996249.4392,
+    "size": 21075
+  },
+  "assets/lunacy/slider_v4.webp": {
+    "mtime": 1779377996250.448,
+    "size": 5806
+  },
+  "assets/lunacy/slider_v5.png": {
+    "mtime": 1779377996251.4482,
+    "size": 13119
+  },
+  "assets/lunacy/slider_v5.webp": {
+    "mtime": 1779377996251.4482,
+    "size": 5512
+  },
+  "assets/lunacy/slider_v6.png": {
+    "mtime": 1779377996252.4485,
+    "size": 15467
+  },
+  "assets/lunacy/slider_v6.webp": {
+    "mtime": 1779377996252.4485,
+    "size": 4526
+  },
+  "assets/lunacy/slider_v7.png": {
+    "mtime": 1779377996253.4475,
+    "size": 15261
+  },
+  "assets/lunacy/slider_v7.webp": {
+    "mtime": 1779377996254.446,
+    "size": 5300
+  },
+  "assets/lunacy/slider_v8.png": {
+    "mtime": 1779377996254.446,
+    "size": 15432
+  },
+  "assets/lunacy/slider_v8.webp": {
+    "mtime": 1779377996255.4485,
+    "size": 4910
+  },
+  "assets/lunacy/slider_v9.png": {
+    "mtime": 1779377996256.447,
+    "size": 17093
+  },
+  "assets/lunacy/slider_v9.webp": {
+    "mtime": 1779377996256.447,
+    "size": 5676
+  },
+  "assets/mamadaevv_resume.pdf": {
+    "mtime": 1780575571973.1184,
+    "size": 160205
+  },
+  "assets/manu-game-maker/.gitkeep": {
+    "mtime": 1779377996263.5508,
+    "size": 2
+  },
+  "assets/manu-game-maker/cover.png": {
+    "mtime": 1779377996266.5527,
+    "size": 483251
+  },
+  "assets/manu-game-maker/cover.webp": {
+    "mtime": 1779377996268.5513,
+    "size": 94600
+  },
+  "assets/misc/dribbble_logo.png": {
+    "mtime": 1780407662552.718,
+    "size": 794904
+  },
+  "assets/misc/dribbble_logo.webp": {
+    "mtime": 1780407662555.7188,
+    "size": 16768
+  },
+  "assets/misc/figma_logo.jpg": {
+    "mtime": 1780407662557.7192,
+    "size": 10883
+  },
+  "assets/misc/figma_logo.webp": {
+    "mtime": 1780407662559.719,
+    "size": 5108
+  },
+  "assets/misc/tg-channel-logo-design_not_pizza.jpg": {
+    "mtime": 1780407662562.7192,
+    "size": 48308
+  },
+  "assets/misc/tg-channel-logo-design_not_pizza.webp": {
+    "mtime": 1780407662564.7183,
+    "size": 23598
+  },
+  "assets/mobile-clinic-app/.gitkeep": {
+    "mtime": 1779377996270.7036,
+    "size": 2
+  },
+  "assets/mobile-clinic-app/cover.png": {
+    "mtime": 1779377996275.6907,
+    "size": 626518
+  },
+  "assets/mobile-clinic-app/cover.webp": {
+    "mtime": 1779377996277.6917,
+    "size": 121088
+  },
+  "assets/obsidian-plugin-columns-view/filter use.mp4": {
+    "mtime": 1782054448519.579,
+    "size": 36000629
+  },
+  "assets/obsidian-plugin-columns-view/filter use.webm": {
+    "mtime": 1782054874042.0066,
+    "size": 4117727
+  },
+  "assets/obsidian-plugin-columns-view/filter use.webp": {
+    "mtime": 1782054874401.6035,
+    "size": 82876
+  },
+  "assets/obsidian-plugin-columns-view/overview.png": {
+    "mtime": 1782055820170.6465,
+    "size": 358265
+  },
+  "assets/obsidian-plugin-columns-view/overview.webp": {
+    "mtime": 1782057055802,
+    "size": 199104
+  },
+  "assets/obsidian-plugin-columns-view/view configure.mp4": {
+    "mtime": 1782054318526.4917,
+    "size": 41097403
+  },
+  "assets/obsidian-plugin-columns-view/view configure.webm": {
+    "mtime": 1782054960161.7544,
+    "size": 2104173
+  },
+  "assets/obsidian-plugin-columns-view/view configure.webp": {
+    "mtime": 1782054960408.1843,
+    "size": 69110
+  },
+  "assets/orc-primo-rpa/cover.webp": {
+    "mtime": 1780407662568.7195,
+    "size": 42848
+  },
+  "assets/orc-primo-rpa/projects--table-new.png": {
+    "mtime": 1780407662571.719,
+    "size": 86822
+  },
+  "assets/orc-primo-rpa/projects--table-new.webp": {
+    "mtime": 1780407662572.718,
+    "size": 42848
+  },
+  "assets/orc-primo-rpa/projects--table-old.png": {
+    "mtime": 1780407662575.226,
+    "size": 139826
+  },
+  "assets/orc-primo-rpa/projects--table-old.webp": {
+    "mtime": 1780407662577.2327,
+    "size": 78910
+  },
+  "assets/README.md": {
+    "mtime": 1779377996027.13,
+    "size": 843
+  },
+  "assets/shared/icons/arrow_upright.svg": {
+    "mtime": 1776362143026.8838,
+    "size": 1215
+  },
+  "assets/shared/icons/chat_start.svg": {
+    "mtime": 1776193642521.755,
+    "size": 3485
+  },
+  "assets/shared/icons/checkmark.svg": {
+    "mtime": 1776422601550.154,
+    "size": 767
+  },
+  "assets/shared/icons/close.svg": {
+    "mtime": 1776857552773.9846,
+    "size": 407
+  },
+  "assets/shared/icons/copy.svg": {
+    "mtime": 1776352846992.719,
+    "size": 1418
+  },
+  "assets/shared/icons/cv.svg": {
+    "mtime": 1776514945920.6653,
+    "size": 2492
+  },
+  "assets/shared/icons/delete.svg": {
+    "mtime": 1779377996278.6897,
+    "size": 1486
+  },
+  "assets/shared/icons/design_edit.svg": {
+    "mtime": 1776193642520.2417,
+    "size": 5473
+  },
+  "assets/shared/icons/email.svg": {
+    "mtime": 1776362122606.4749,
+    "size": 1589
+  },
+  "assets/shared/icons/link_url.svg": {
+    "mtime": 1780407662580.2358,
+    "size": 1525
+  },
+  "assets/shared/icons/moon.svg": {
+    "mtime": 1776193642519.029,
+    "size": 1090
+  },
+  "assets/shared/icons/original_size.svg": {
+    "mtime": 1776857547534.4807,
+    "size": 2382
+  },
+  "assets/shared/icons/portfolio.svg": {
+    "mtime": 1776515141309.182,
+    "size": 1352
+  },
+  "assets/shared/icons/shevron-down.svg": {
+    "mtime": 1777636422918.6008,
+    "size": 1222
+  },
+  "assets/shared/icons/shevron-left.svg": {
+    "mtime": 1777636422919.6145,
+    "size": 1207
+  },
+  "assets/shared/icons/shevron-right.svg": {
+    "mtime": 1777636422919.6145,
+    "size": 1209
+  },
+  "assets/shared/icons/shevron-up.svg": {
+    "mtime": 1777636422921.079,
+    "size": 1208
+  },
+  "assets/shared/icons/sun.svg": {
+    "mtime": 1776193642517.9954,
+    "size": 4326
+  },
+  "assets/shared/icons/system.svg": {
+    "mtime": 1776193642519.029,
+    "size": 2249
+  },
+  "assets/shared/icons/tg.svg": {
+    "mtime": 1776362122602.7698,
+    "size": 1373
+  },
+  "assets/shared/icons/vk.svg": {
+    "mtime": 1776362122605.4763,
+    "size": 615
+  },
+  "assets/shared/icons/write_me.svg": {
+    "mtime": 1777030666208.4812,
+    "size": 3077
+  },
+  "assets/shared/icons/yandex_telemost.svg": {
+    "mtime": 1776362122604.4692,
+    "size": 572
+  },
+  "assets/shared/icons/zoom_in.svg": {
+    "mtime": 1776856548780.6626,
+    "size": 1953
+  },
+  "assets/shared/icons/zoom_out.svg": {
+    "mtime": 1776856548780.6626,
+    "size": 1592
+  },
+  "assets/shared/icons/zoom_to_fit.svg": {
+    "mtime": 1779377996280.203,
+    "size": 1248
+  },
+  "assets/shared/icons/сookie.svg": {
+    "mtime": 1776607984487.0112,
+    "size": 3508
+  },
+  "assets/shared/placeholder.jpg": {
+    "mtime": 1777053044955.2012,
+    "size": 34829
+  },
+  "assets/shared/placeholder.webp": {
+    "mtime": 1780407662581.2354,
+    "size": 240
+  },
+  "assets/task-distribution-concept/.gitkeep": {
+    "mtime": 1779377996281.21,
+    "size": 2
+  },
+  "assets/task-distribution-concept/cover.png": {
+    "mtime": 1779377996284.209,
+    "size": 197021
+  },
+  "assets/task-distribution-concept/cover.webp": {
+    "mtime": 1779377996286.2097,
+    "size": 81646
+  },
+  "assets/task-tracker/actions_for_page.png": {
+    "mtime": 1724892346000,
+    "size": 25027
+  },
+  "assets/task-tracker/actions_for_page.webp": {
+    "mtime": 1777119492700,
+    "size": 23404
+  },
+  "assets/task-tracker/cover.webp": {
+    "mtime": 1779377996288.2092,
+    "size": 151720
+  },
+  "assets/task-tracker/dark_theme.png": {
+    "mtime": 1724892366000,
+    "size": 291518
+  },
+  "assets/task-tracker/dark_theme.webp": {
+    "mtime": 1777119492957,
+    "size": 147348
+  },
+  "assets/task-tracker/drag-drop-action_example.mp4": {
+    "mtime": 1776793076285.7869,
+    "size": 2095990
+  },
+  "assets/task-tracker/drag-drop-action_example.webm": {
+    "mtime": 1777118933364.2495,
+    "size": 147445
+  },
+  "assets/task-tracker/drag-drop-action_example.webp": {
+    "mtime": 1777118933542.3682,
+    "size": 3604
+  },
+  "assets/task-tracker/drag-drop-item_board-view.mp4": {
+    "mtime": 1724892358000,
+    "size": 1784143
+  },
+  "assets/task-tracker/drag-drop-item_board-view.webm": {
+    "mtime": 1777118939415.8855,
+    "size": 232186
+  },
+  "assets/task-tracker/drag-drop-item_board-view.webp": {
+    "mtime": 1777118939601.6213,
+    "size": 27548
+  },
+  "assets/task-tracker/drag-drop-item_list-view.mp4": {
+    "mtime": 1724892360000,
+    "size": 2886192
+  },
+  "assets/task-tracker/drag-drop-item_list-view.webm": {
+    "mtime": 1777118960260.8003,
+    "size": 331393
+  },
+  "assets/task-tracker/drag-drop-item_list-view.webp": {
+    "mtime": 1777118960514.3586,
+    "size": 27766
+  },
+  "assets/task-tracker/dropdown_menu_for_views.png": {
+    "mtime": 1724892346000,
+    "size": 75360
+  },
+  "assets/task-tracker/dropdown_menu_for_views.webp": {
+    "mtime": 1777119493007,
+    "size": 64398
+  },
+  "assets/task-tracker/expand-collapse_group.mp4": {
+    "mtime": 1724892356000,
+    "size": 1663390
+  },
+  "assets/task-tracker/expand-collapse_group.webm": {
+    "mtime": 1777118977581.77,
+    "size": 196247
+  },
+  "assets/task-tracker/expand-collapse_group.webp": {
+    "mtime": 1777118977813.5178,
+    "size": 27750
+  },
+  "assets/task-tracker/full_preview.mp4": {
+    "mtime": 1776877975221.4644,
+    "size": 2480939
+  },
+  "assets/task-tracker/full_preview.webm": {
+    "mtime": 1777119206780.3667,
+    "size": 1852963
+  },
+  "assets/task-tracker/full_preview.webp": {
+    "mtime": 1777119207226.3965,
+    "size": 31316
+  },
+  "assets/task-tracker/light_theme_color.png": {
+    "mtime": 1724892364000,
+    "size": 555991
+  },
+  "assets/task-tracker/light_theme_color.webp": {
+    "mtime": 1777119493297,
+    "size": 164962
+  },
+  "assets/task-tracker/refs.png": {
+    "mtime": 1776792419154.0342,
+    "size": 1779282
+  },
+  "assets/task-tracker/refs.webp": {
+    "mtime": 1777119493506,
+    "size": 225610
+  },
+  "assets/task-tracker/tabs.mp4": {
+    "mtime": 1776792488669.555,
+    "size": 4908318
+  },
+  "assets/task-tracker/tabs.webm": {
+    "mtime": 1777119316281.4424,
+    "size": 804022
+  },
+  "assets/task-tracker/tabs.webp": {
+    "mtime": 1777119316704.9702,
+    "size": 31082
+  },
+  "assets/task-tracker/tab_all-tasks.png": {
+    "mtime": 1724892344000,
+    "size": 285868
+  },
+  "assets/task-tracker/tab_all-tasks.webp": {
+    "mtime": 1777119493851,
+    "size": 151720
+  },
+  "assets/task-tracker/tab_my-tasks.png": {
+    "mtime": 1724892344000,
+    "size": 232690
+  },
+  "assets/task-tracker/tab_my-tasks.webp": {
+    "mtime": 1777119494176,
+    "size": 118694
+  },
+  "assets/task-tracker/tab_tasks-by-assign.png": {
+    "mtime": 1724892344000,
+    "size": 283151
+  },
+  "assets/task-tracker/tab_tasks-by-assign.webp": {
+    "mtime": 1777119494494,
+    "size": 147370
+  },
+  "assets/task-tracker/views.mp4": {
+    "mtime": 1776792546358.3933,
+    "size": 3655835
+  },
+  "assets/task-tracker/views.webm": {
+    "mtime": 1777119348131.017,
+    "size": 588868
+  },
+  "assets/task-tracker/views.webp": {
+    "mtime": 1777119348524.0642,
+    "size": 30412
+  },
+  "assets/task-tracker/view_board.png": {
+    "mtime": 1724892346000,
+    "size": 285868
+  },
+  "assets/task-tracker/view_board.webp": {
+    "mtime": 1777119494790,
+    "size": 151720
+  },
+  "assets/task-tracker/view_list.png": {
+    "mtime": 1724892350000,
+    "size": 281726
+  },
+  "assets/task-tracker/view_list.webp": {
+    "mtime": 1777119495084,
+    "size": 153030
+  },
+  "assets/task-tracker/view_table.png": {
+    "mtime": 1724892354000,
+    "size": 306629
+  },
+  "assets/task-tracker/view_table.webp": {
+    "mtime": 1777119495385,
+    "size": 159062
+  },
+  "assets/template-elements-demo/hello.gif": {
+    "mtime": 1713970676235.8618,
+    "size": 1445905
+  },
+  "assets/template-elements-demo/img-long.png": {
+    "mtime": 1779377996303.2358,
+    "size": 1430322
+  },
+  "assets/template-elements-demo/img-long.webp": {
+    "mtime": 1779377996305.2405,
+    "size": 134456
+  },
+  "assets/template-elements-demo/small-image-1.png": {
+    "mtime": 1779377996307.2373,
+    "size": 127198
+  },
+  "assets/template-elements-demo/small-image-1.webp": {
+    "mtime": 1779377996307.2373,
+    "size": 6676
+  },
+  "assets/template-elements-demo/small-image-2.png": {
+    "mtime": 1779377996309.7412,
+    "size": 220181
+  },
+  "assets/template-elements-demo/small-image-2.webp": {
+    "mtime": 1779377996309.7412,
+    "size": 9214
+  },
+  "assets/template-elements-demo/small-image-3.png": {
+    "mtime": 1779377996312.7493,
+    "size": 330973
+  },
+  "assets/template-elements-demo/small-image-3.webp": {
+    "mtime": 1779377996313.7478,
+    "size": 19430
+  },
+  "assets/template-elements-demo/small-image-4.png": {
+    "mtime": 1779377996314.7488,
+    "size": 211288
+  },
+  "assets/template-elements-demo/small-image-4.webp": {
+    "mtime": 1779377996315.7507,
+    "size": 11306
+  },
+  "assets/template-elements-demo/small-image-5.png": {
+    "mtime": 1779377996317.748,
+    "size": 249941
+  },
+  "assets/template-elements-demo/small-image-5.webp": {
+    "mtime": 1779377996318.7485,
+    "size": 15056
+  },
+  "assets/template-elements-demo/small-image-6.png": {
+    "mtime": 1779377996319.7495,
+    "size": 161762
+  },
+  "assets/template-elements-demo/small-image-6.webp": {
+    "mtime": 1779377996320.861,
+    "size": 8470
+  },
+  "assets/template-elements-demo/small-image-7.png": {
+    "mtime": 1779377996322.8584,
+    "size": 196080
+  },
+  "assets/template-elements-demo/small-image-7.webp": {
+    "mtime": 1779377996323.8606,
+    "size": 7832
+  },
+  "assets/template-elements-demo/video-1.mp4": {
+    "mtime": 1774365295973.9094,
+    "size": 3676034
+  },
+  "assets/template-elements-demo/video-1.webm": {
+    "mtime": 1777119460084.1753,
+    "size": 3490147
+  },
+  "assets/template-elements-demo/video-1.webp": {
+    "mtime": 1777119460340.927,
+    "size": 112702
+  },
+  "assets/template-elements-demo/wallpaper-1.jpg": {
+    "mtime": 1770206903718.8467,
+    "size": 1011262
+  },
+  "assets/template-elements-demo/wallpaper-1.webp": {
+    "mtime": 1777119432828,
+    "size": 795944
+  },
+  "cases/ai-platform-primo-rpa-2.html": {
+    "mtime": 1782245252136.977,
+    "size": 56010
+  },
+  "cases/ai-platform-primo-rpa.html": {
+    "mtime": 1782245252138.9834,
+    "size": 65300
+  },
+  "cases/design-system.html": {
+    "mtime": 1782245252140.9756,
+    "size": 51499
+  },
+  "cases/lunacy.html": {
+    "mtime": 1782245252140.9756,
+    "size": 51520
+  },
+  "cases/manu-game-maker.html": {
+    "mtime": 1782245252142.1548,
+    "size": 33426
+  },
+  "cases/mini-projects-showcase.html": {
+    "mtime": 1782245252144.1592,
+    "size": 45596
+  },
+  "cases/mobile-clinic-app.html": {
+    "mtime": 1782245252145.1597,
+    "size": 33340
+  },
+  "cases/obsidian-plugin-columns-view.html": {
+    "mtime": 1782245252145.1597,
+    "size": 34314
+  },
+  "cases/orc-automation-panel.html": {
+    "mtime": 1782245252146.161,
+    "size": 48044
+  },
+  "cases/task-distribution-concept.html": {
+    "mtime": 1782245252147.1592,
+    "size": 33330
+  },
+  "cases/task-tracker.html": {
+    "mtime": 1782245252149.1597,
+    "size": 66746
+  },
+  "cases/template-elements-demo.html": {
+    "mtime": 1782245252150.16,
+    "size": 47480
+  },
+  "cookie-policy.html": {
+    "mtime": 1782245252151.1606,
+    "size": 20265
+  },
+  "css/main.css": {
+    "mtime": 1782122516629.0486,
+    "size": 129130
+  },
+  "index.html": {
+    "mtime": 1782245252151.1606,
+    "size": 69045
+  },
+  "js/main.js": {
+    "mtime": 1780407662602.799,
+    "size": 2804
+  },
+  "js/modules/cases/image-viewer.js": {
+    "mtime": 1780407662603.8,
+    "size": 13683
+  },
+  "js/modules/cases/natural-image-size.js": {
+    "mtime": 1777287125125.0857,
+    "size": 625
+  },
+  "js/modules/cases/sequential-images.js": {
+    "mtime": 1779377996345.018,
+    "size": 1224
+  },
+  "js/modules/cases/tall-media-expand.js": {
+    "mtime": 1779377996345.018,
+    "size": 1861
+  },
+  "js/modules/cases/video-player.js": {
+    "mtime": 1779377996347.0156,
+    "size": 1095
+  },
+  "js/modules/experience/expand.js": {
+    "mtime": 1777287125125.0857,
+    "size": 3993
+  },
+  "js/modules/experience/hover-glow.js": {
+    "mtime": 1777636422925.3562,
+    "size": 912
+  },
+  "js/modules/experience/masonry.js": {
+    "mtime": 1780407662605.8008,
+    "size": 2916
+  },
+  "js/modules/header/header-scroll.js": {
+    "mtime": 1779377996348.017,
+    "size": 4328
+  },
+  "js/modules/header/nav-overflow.js": {
+    "mtime": 1777287125117.0547,
+    "size": 5621
+  },
+  "js/modules/mini-projects/expand.js": {
+    "mtime": 1780407662607.4187,
+    "size": 4418
+  },
+  "js/modules/mini-projects/masonry.js": {
+    "mtime": 1782122516632.0474,
+    "size": 5036
+  },
+  "js/modules/shared/dom.js": {
+    "mtime": 1777287125128.091,
+    "size": 221
+  },
+  "js/modules/shared/image-src.js": {
+    "mtime": 1780407662612.4294,
+    "size": 214
+  },
+  "js/modules/shared/math.js": {
+    "mtime": 1777287125125.0857,
+    "size": 161
+  },
+  "js/modules/shared/media.js": {
+    "mtime": 1777287125117.0547,
+    "size": 645
+  },
+  "js/modules/shared/schedule-idle.js": {
+    "mtime": 1779377996348.017,
+    "size": 457
+  },
+  "js/modules/theme/theme-controls.js": {
+    "mtime": 1779377996349.5276,
+    "size": 6205
+  },
+  "js/modules/theme/theme-core.js": {
+    "mtime": 1782122516625.0393,
+    "size": 4885
+  },
+  "js/modules/theme/theme-fonts.js": {
+    "mtime": 1779377996352.5422,
+    "size": 1147
+  },
+  "js/modules/ui/contact-copy.js": {
+    "mtime": 1777287125128.091,
+    "size": 1793
+  },
+  "js/modules/ui/content-edit/content-edit-dock.js": {
+    "mtime": 1779377996353.5432,
+    "size": 9560
+  },
+  "js/modules/ui/content-edit/content-edit-mode.js": {
+    "mtime": 1779377996355.5415,
+    "size": 11767
+  },
+  "js/modules/ui/content-edit/content-edit-storage.js": {
+    "mtime": 1779377996355.5415,
+    "size": 868
+  },
+  "js/modules/ui/content-edit/content-edit-target.js": {
+    "mtime": 1779377996357.5415,
+    "size": 9573
+  },
+  "js/modules/ui/cookie-notice.js": {
+    "mtime": 1779377996357.5415,
+    "size": 923
+  },
+  "js/modules/ui/deferred-media.js": {
+    "mtime": 1779377996358.5417,
+    "size": 470
+  },
+  "js/modules/ui/hero-motion-video.js": {
+    "mtime": 1782244713466.1138,
+    "size": 1004
+  },
+  "js/modules/ui/hero-word-slot.js": {
+    "mtime": 1777287125117.0547,
+    "size": 3717
+  },
+  "js/modules/ui/image-load-placeholder.js": {
+    "mtime": 1780407662613.426,
+    "size": 2435
+  },
+  "js/modules/ui/mesh-panel.js": {
+    "mtime": 1779377996360.0525,
+    "size": 859
+  },
+  "js/modules/ui/page-mesh-bg.js": {
+    "mtime": 1779377996361.0547,
+    "size": 3216
+  },
+  "js/modules/ui/primary-button-shine.js": {
+    "mtime": 1777287125118.0613,
+    "size": 952
+  },
+  "js/modules/ui/projects-carousel.js": {
+    "mtime": 1779377996362.0613,
+    "size": 6390
+  },
+  "js/modules/ui/skills-accordion.js": {
+    "mtime": 1778061201791.5735,
+    "size": 5099
+  },
+  "js/modules/ui/skills-intro.js": {
+    "mtime": 1780407662615.4253,
+    "size": 1983
+  },
+  "js/skill-connectors.js": {
+    "mtime": 1776439133838.0786,
+    "size": 12132
+  },
+  "README.md": {
+    "mtime": 1777051804851.6003,
+    "size": 1363
+  },
+  "vendor/plyr/plyr.css": {
+    "mtime": 1779377996364.0625,
+    "size": 32455
+  },
+  "vendor/plyr/plyr.min.mjs": {
+    "mtime": 1779377996366.0618,
+    "size": 121675
+  }
+}
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..784bae0
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,26 @@
+# Dependencies
+node_modules/
+
+# Build outputs
+dist/
+build/
+coverage/
+.cache/
+
+# IDE/editor local files (команды — в репо, см. .cursor/commands/)
+.cursor/*
+!.cursor/commands/
+!.cursor/commands/**
+.vscode/
+gitverse/
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# OS files
+.DS_Store
+Thumbs.db
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..170afb3
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,62 @@
+# Подсказки для агента (Cursor)
+
+## GitVerse / деплой статики
+
+Полный чеклист: **`docs/gitverse-sync.md`** → раздел **«Инструкция для агента (Cursor)»**.
+
+Деплой на VPS: **`docs/vps-deploy.md`**.
+
+Кратко по запросу пользователя «выложить на GitVerse», «синк gitverse», «задеплоить»:
+
+1. При правках `src/pages/**` или `src/partials/**` — `npm run build:pages`; при смене шрифтов/Plyr или `package.json` — `npm run build` (включает `vendor:copy`).
+2. Затем `npm run sync-gitverse` (разрешения **network** и **git_write**).
+3. Не запускать синк без явного запроса пользователя.
+
+По запросу «задеплой в Coolify», «задеплой на VPS»:
+
+1. При правках в `public/` — `npm run deploy:vps` (разрешения **all**).
+2. По запросу «задеплой везде» — `npm run deploy` (VPS + GitVerse).
+
+Не запускать деплой на VPS без явного запроса: скрипт перезаписывает `/data/static-site` на сервере.
+
+## Git: корневой репозиторий
+
+Этот репозиторий в корне проекта **только локальный** (рабочая копия, история коммитов для себя). **Не добавлять `origin` и не пушить** в удалённый репозиторий из агента, если пользователь явно не попросил настроить remote и не дал URL. Выгрузка наружу — отдельный сценарий через **`npm run sync-gitverse`** в папку `gitverse` (см. выше), а не `git push` из корня.
+
+### Влить в `master`, оставаясь на текущей ветке
+
+Запрос «влить в мастер» **не означает** `git checkout master`, если пользователь не просил переключиться.
+
+- **Fast-forward** (ветка впереди `master`): на текущей ветке — `git branch -f master HEAD` или `git push . HEAD:master`.
+- **Нужен merge-коммит** (`master` ушёл вперёд): `git checkout master` → `git merge <ветка>` → `git checkout -` (вернуться на прежнюю ветку).
+- После влития **не меняй** активную ветку в IDE без запроса; при необходимости уточни, на какой ветке продолжать работу.
+
+## Design System
+
+Страница-каталог: **`src/pages/cases/design-system.html`** → после сборки `public/cases/design-system.html`.
+
+При **глобальных** правках стилей (токены в `public/css/main.css`, компоненты главной, блоки лонгрида кейса) **обновляй Design System**: живой пример и краткое описание в соответствующей секции, при необходимости — `docs/case-page-blocks.md`.
+
+## Контент кейса в public (по запросу)
+
+Обычный путь: `src/pages/cases/` → `npm run build:pages`. Если пользователь явно просит править **собранную** страницу под `npm run serve`, см. **`.cursor/rules/case-content-edit-in-public.mdc`**: правки в `.case-article` в `public/cases/`, синхронизация в `src` по запросу.
+
+## Русские тексты (humanizer-ru)
+
+При генерации и правке **русскоязычного контента** для сайта (кейсы, главная, `texts/**`, callout, meta) — читать скилл **`humanizer-ru`** и вычитывать текст по нему перед отдачей пользователю. Подробности: **`.cursor/rules/humanizer-ru-text.mdc`**.
+
+## Правки контента (content-edits, localhost)
+
+Режим на странице при `npm run serve` → очередь в **`texts/content-edits/pending.json`**. Apply по запросу **«примени правки»**: читать этот файл, править **`src/pages/`**, **humanizer-ru**, **`npm run build:pages`**; **`pending.json` не очищать** (пользователь удаляет пункты сам). Подробности: **`docs/content-edit-mode.md`**, **`.cursor/rules/content-edit-apply.mdc`**.
+
+## Vendor (шрифты, Plyr)
+
+Локально в `public/`, без CDN. Обновление: **`docs/vendor-assets.md`**, команда `npm run vendor:copy`.
+
+## Медиа на сайте (WebP / WebM)
+
+По запросу «добавить/обновить картинку или видео» в разметке только **WebP** (изображения, постеры) и **WebM** (видео); исходник конвертировать скриптами, не ждать отдельного уточнения. Подробности: **`.cursor/rules/media-webp-webm-only.mdc`**, `docs/image-optimization.md`, `docs/video-conversion.md`.
+
+## Остальное
+
+Правила и таблица доков: **`.cursor/rules/read-docs-before-feature-dev.mdc`** (локально; папка `.cursor/` может быть в `.gitignore`).
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..124bfd7
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,7 @@
+FROM nginx:latest
+
+# Fix mjs MIME type — without this plyr.min.mjs fails to load as ES module
+RUN sed -i 's|application/javascript *js;|application/javascript  js mjs;|' /etc/nginx/mime.types
+
+COPY ./public /usr/share/nginx/html
+RUN chown -R nginx:nginx /usr/share/nginx/html
diff --git a/deploy.sh b/deploy.sh
new file mode 100644
index 0000000..8d0edb5
--- /dev/null
+++ b/deploy.sh
@@ -0,0 +1,40 @@
+#!/usr/bin/env bash
+set -e
+
+HOST="root@155.212.186.39"
+SSH_KEY="$HOME/.ssh/beget"
+SRC_DIR="$(cd "$(dirname "$0")" && pwd)/public/"
+
+echo "📦 Deploy mamadaevv.site..."
+echo "Src: $SRC_DIR"
+
+REMOTE_INFO=$(ssh -i "$SSH_KEY" -o StrictHostKeyChecking=no "$HOST" '
+  CONTAINER=$(docker ps --format "{{.Names}}" | grep "s9mrcps8xw02r1dak0fsznix" | head -1)
+  VOLUME_PATH=$(docker inspect "$CONTAINER" 2>/dev/null | python3 -c "
+import sys,json
+mounts=json.load(sys.stdin)[0].get(\"Mounts\",[])
+print([m[\"Source\"] for m in mounts if m[\"Destination\"]==\"/usr/share/nginx/html\"][0])
+")
+  echo "$CONTAINER|$VOLUME_PATH"
+')
+
+IFS='|' read -r CONTAINER VOLUME_PATH <<< "$REMOTE_INFO"
+echo "Container: $CONTAINER"
+echo "Volume: $VOLUME_PATH"
+
+# Копируем файлы
+cd "$SRC_DIR"
+tar cf - . | ssh -i "$SSH_KEY" -o StrictHostKeyChecking=no "$HOST" \
+  "tar xf - -C $VOLUME_PATH"
+
+# Фикс MIME для .mjs (plyr.min.mjs модуль)
+ssh -i "$SSH_KEY" -o StrictHostKeyChecking=no "$HOST" \
+  "docker exec $CONTAINER sh -c \"
+    if ! grep -q 'application/javascript mjs' /etc/nginx/mime.types 2>/dev/null; then
+      sed -i 's|application/wasm|application/javascript mjs;\\n    application/wasm|' /etc/nginx/mime.types
+      nginx -s reload && echo 'MIME fix applied'
+    fi
+  \"" 2>/dev/null || true
+
+echo ""
+echo "✅ Done! https://mamadaevv.site"
diff --git a/docs/case-page-blocks.md b/docs/case-page-blocks.md
new file mode 100644
index 0000000..3c7237b
--- /dev/null
+++ b/docs/case-page-blocks.md
@@ -0,0 +1,199 @@
+# Страница кейса: каркас и блоки контента
+
+Инструкция завязана на эталон **`src/pages/cases/template-elements-demo.html`**: оттуда копируются готовые куски разметки. Текстовый дубль структуры для редактуры — `texts/cases/template-elements-demo.md`.
+
+## Где править
+
+| Что | Путь |
+|-----|------|
+| Разметка кейса | `src/pages/cases/<имя>.html` |
+| Общие вставки (шапка кейса, футер, скрипты) | `src/partials/*.html` |
+| Сборка в статику | `npm run build:pages` → `public/cases/<имя>.html` |
+
+**`public/cases/*.html` не редактировать вручную** — они перезаписываются сборкой.
+
+Локальные инструкции агенту без правки HTML в браузере: режим правок при `npm run serve` → [`docs/content-edit-mode.md`](content-edit-mode.md) → `texts/content-edits/*.json` → apply в `src` по запросу в чате.
+
+## Каркас `body` (как в template)
+
+Порядок важен для единообразия с остальными кейсами:
+
+1. `{{> header-case}}` — шапка с ссылкой на главную (внутри partial используется `{{assetPrefix}}`).
+2. `{{> fab-stack}}` — плавающие кнопки темы и т.п.
+3. `<main id="case-main" class="section section--tight">` → внутри `<div class="section__inner case-article">` — **весь уникальный контент кейса**.
+4. Нижние секции как на главной: `{{> projects-section}}`, `{{> contact-section}}`, `{{> footer-spacer}}`, `{{> footer}}`, `{{> cookie-notice}}`, `{{> nav-more-floating}}`.
+5. Скрипты подключаются в `<head>` через `{{> head-links}}` (preload + `main.js`, `skill-connectors.js`).
+
+`head` у кейсов: `meta`, `viewport`, `description`, `title`, затем `{{> head-links}}` (preconnect/preload шрифтов и CSS/JS, стили, скрипты с `defer`), при необходимости локальный `<style>` для `.case-article`.
+
+## Пути к CSS и медиа
+
+Файл страницы лежит в **`cases/`**, один уровень ниже корня сайта. В итоговом HTML пути от страницы:
+
+- Стили: `../css/main.css`
+- Картинки и видео проекта: `../assets/<папка-проекта>/файл.ext`
+
+В **partials** для ссылок на корень сайта используй **`{{assetPrefix}}`** (при сборке из `cases/*` подставится `../`). В самой странице кейса чаще пишут литерал `../`, как в template.
+
+## Текст и заголовки
+
+Внутри `.case-article`:
+
+- Вводная строка: `<p class="hero__eyebrow">…</p>`
+- Заголовок: `<h1 class="case-page__h1">…</h1>`
+- Подзаголовок (по желанию): `<p class="case-page__sub">…</p>`
+- Обычные абзацы: `<p class="section__prose">…</p>`
+- Секции: `<h2>`, при необходимости `<h3>`
+
+Списки — обычные `<ul>` / `<ol>` без обязательных классов (стили задаёт вложенный CSS страницы для `.case-article`).
+
+## Блоки (копировать из template)
+
+### Сетка карточек ссылок
+
+- Обертка: `<div class="case-links-grid">`.
+- Одна карточка: `<a class="case-link-card" href="…" target="_blank" rel="noopener noreferrer">`.
+- Внутри: `<span class="case-link-card__media">` (превью-картинка или favicon) и `<span class="case-link-card__body">` с `case-link-card__title`, `case-link-card__meta`, `case-link-card__url`.
+- Вариант без тяжёлого превью: на `<a>` добавить модификатор **`case-link-card--favicon`**, в `media` — картинка с `https://www.google.com/s2/favicons?domain=…`.
+
+### Изображения (`figure.case-media`)
+
+| Модификатор | Поведение |
+|-------------|-----------|
+| `case-media--natural` | Натуральный масштаб (визуально ~половина логического размера, см. `initCaseNaturalImagesHalfSize` в `main.js`). **Без** `data-image-viewer`. |
+| `case-media--content` | По ширине текстовой колонки; клик — полноэкранный просмотр, если на `<img>` есть **`data-image-viewer`** (обводка и hover как у `.case-video-shell`). |
+| `case-media--wide` | Чуть шире колонки; тоже с **`data-image-viewer`** при необходимости просмотра. |
+
+Общие атрибуты для картинок в кейсе: `loading="lazy"`, `decoding="async"`, осмысленный `alt`, при известных размерах — `width` и `height`.
+
+Подпись: `<figcaption>…</figcaption>`. У блока с `.case-video-shell` подпись по центру под видео (как у кадров с `data-image-viewer`).
+
+### Длинный скрин (`data-case-tall-media`)
+
+Для **очень высокого** кадра (полный экран приложения, длинная страница): в свёрнутом виде показывается только верх, внизу превью — плотный градиент («туман»), чтобы было видно, что картинка **не целиком**. Рамка как у кликабельных кадров. Кнопка «Развернуть» / «Свернуть» с шевроном поверх нижней части превью (внутри рамки); после сворачивания — прокрутка к превью (`scrollIntoView` на clip).
+
+**Ширина:** на `figure` с `data-case-tall-media` задай **`data-case-tall-width="content"`** (по ширине текстовой колонки) или **`data-case-tall-width="wide"`** (как у обычной «широкой» картинки: вынос за колонку). Допустим и старый вариант без атрибута: **`class="case-media case-media--wide"`** на `figure` — эквивалентно `wide`. Не смешивай `data-case-tall-width="content"` с классом `case-media--wide` на одном `figure`.
+
+Стили: `.case-media-tall*` и блок ширины в `public/css/main.css`. Логика: [`public/js/modules/cases/tall-media-expand.js`](public/js/modules/cases/tall-media-expand.js) (`initCaseTallMediaExpand` уже вызывается из [`public/js/main.js`](public/js/main.js)).
+
+**Как вставить в кейс**
+
+1. На **`figure`** поставь **`class="case-media"`**, **`data-case-tall-media`**, **`data-case-tall-width="content"`** или **`wide`**.
+2. Внутри — разметка ниже: уникальный **`id`** у `.case-media-tall__clip`, тот же id в **`aria-controls`** у кнопки; подписи «Развернуть»/«Свернуть» в span с **`data-case-tall-label-more`** / **`data-case-tall-label-less`** (у «Свернуть» изначально **`hidden`**).
+3. На **`img`** оставь **`data-image-viewer`**, если нужен полноэкранный просмотр по клику.
+4. Высоту превью (обрезки) задай на clip, например inline: **`style="--case-tall-max: min(60vh, 28rem)"`**. Если не задавать, в CSS по умолчанию `min(70vh, 32rem)`.
+5. Файлы клади в **`public/assets/<папка-кейса>/…`**; в HTML страниц кейсов пути **`../assets/<папка>/файл.webp`** (относительно `public/cases/`).
+
+**Сниппет** (подставь `УНИКАЛЬНЫЙ-ID`, путь к WebP, `alt`, при необходимости замени **`wide`** на **`content`**):
+
+```html
+<figure class="case-media" data-case-tall-media data-case-tall-width="wide">
+  <div class="case-media-tall" data-case-tall-root>
+    <div
+      class="case-media-tall__clip"
+      id="УНИКАЛЬНЫЙ-ID"
+      data-case-tall-clip
+      style="--case-tall-max: min(70vh, 32rem)"
+    >
+      <img
+        src="../assets/<папка-кейса>/<файл>.webp"
+        alt="…"
+        width="1200"
+        loading="lazy"
+        decoding="async"
+        data-image-viewer
+      />
+      <div class="case-media-tall__fog" aria-hidden="true"></div>
+    </div>
+    <div class="case-media-tall__actions">
+      <button
+        type="button"
+        class="case-media-tall__btn btn btn--ghost btn--flat"
+        data-case-tall-toggle
+        aria-expanded="false"
+        aria-controls="УНИКАЛЬНЫЙ-ID"
+      >
+        <span class="case-media-tall__btn-chev" aria-hidden="true"></span>
+        <span data-case-tall-label-more>Развернуть</span>
+        <span data-case-tall-label-less hidden>Свернуть</span>
+      </button>
+    </div>
+  </div>
+  <figcaption>…</figcaption>
+</figure>
+```
+
+Живой пример: [`src/pages/cases/template-elements-demo.html`](src/pages/cases/template-elements-demo.html) (секция «Длинный скрин»); второй кейс — [`src/pages/cases/ai-platform-primo-rpa.html`](src/pages/cases/ai-platform-primo-rpa.html).
+
+### Галерея изображений сеткой (`case-media-gallery`)
+
+Сетка из миниатюр с тем же полноэкранным просмотром, что у одиночных картинок (`data-image-viewer` на каждом `<img>`). Стили в `public/css/main.css` (блок `.case-media-gallery`).
+
+**Разметка:**
+
+- Обертка: `figure.case-media.case-media-gallery` (+ опционально `case-media-gallery--wide`).
+- Внутри: `div.case-media-gallery__grid` → для каждой ячейки `div.case-media-gallery__item` → `<img … data-image-viewer />`.
+- Число колонок на **широком** экране задаётся на `figure`, например: `style="--case-gallery-cols: 3"` (целое ≥ 1). Если атрибут не указан, по умолчанию в CSS задано `3`.
+- **Ширина:** без модификатора — как обычный блок в колонке статьи; класс **`case-media-gallery--wide`** — выход за колонку по той же схеме, что у `case-media--wide` (viewport с боковыми отступами). На узких экранах (`max-width: 640px`) wide-галерея схлопывается в ширину колонки.
+- **Адаптив сетки:** примерно до `48rem` — не больше двух колонок (`min(2, var(--case-gallery-cols))`); до `28rem` — одна колонка.
+
+Пример целиком см. в [`src/pages/cases/template-elements-demo.html`](src/pages/cases/template-elements-demo.html) (два варианта: контентная ширина и wide).
+
+**Сетка + отложенный `src`:** в ячейках можно задать реальный URL в **`data-src`** и плейсхолдер в `src` (крошечный `data:image/gif;base64,…`), чтобы [`initCaseSequentialImages`](public/js/modules/cases/sequential-images.js) подставлял картинки **по порядку в DOM** (в т.ч. строка за строкой в галерее). Пока у `img` есть `data-src`, просмотр по клику не открывается. Пример: [`src/pages/cases/lunacy.html`](src/pages/cases/lunacy.html).
+
+### Последовательная подгрузка (`data-case-sequential-images`)
+
+- Оберни фрагмент статьи с картинками (часто весь `.case-article`): **`data-case-sequential-images`** на контейнере.
+- У каждого кадра: **`data-src="../assets/…/файл.webp"`** и временный **`src`** — прозрачный GIF 1×1 (тот же паттерн, что в Lunacy-кейсе).
+- Логика: [`public/js/modules/cases/sequential-images.js`](public/js/modules/cases/sequential-images.js), вызов **`initCaseSequentialImages()`** в [`public/js/main.js`](public/js/main.js) **до** `initCaseImageViewer()`.
+- Просмотр: [`public/js/modules/cases/image-viewer.js`](public/js/modules/cases/image-viewer.js) слушает клики **делегированием**; не открывает плейсхолдер и не открывает, пока не снят `data-src`.
+
+### Callout
+
+```html
+<aside class="case-callout" data-callout>
+  <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">📌</span>
+  <div class="case-callout__content">
+    <p>…</p>
+  </div>
+</aside>
+```
+
+- **Ширина:** как у wide-медиа — блок шире колонки статьи (`min(100vw − 2×padding, content + 8rem)`), на экранах до 640px — ширина колонки.
+- **Иконка:** в `.case-callout__emoji` — цветные emoji (📌 💡 ✨ ✅ ⭐), не текстовые символы (✎ ✓ ◆ →); рендер через emoji-шрифт в `main.css`.
+- **Типографика:** текст в `.case-callout__content` чуть крупнее основного абзаца (lead).
+- Живой пример: [`src/pages/cases/design-system.html`](src/pages/cases/design-system.html) (секция Callout).
+
+### Видео
+
+- Обертка: `<figure class="case-media">` (часто с inline-отступами как в template) → `<div class="case-video-shell">` → `<video controls preload="metadata" playsinline … data-case-video-player>`.
+- Подпись `<figcaption>` под видео — по центру колонки (стили в `main.css`).
+- Видео в карточке и в fullscreen — `object-fit: contain` (без обрезки); fullscreen через Plyr (`iosNative: false`), не нативные `controls` на `<video>`.
+- Постер: WebP в `poster`.
+- Источники: `<source type="video/webm">`, затем `video/mp4`.
+
+Про конвертацию и постеры: `docs/video-conversion.md`.
+
+## Оптимизация изображений
+
+PNG/JPEG → WebP по папке: `docs/image-optimization.md`, скрипт `scripts/optimize-images.mjs`.
+
+## Связь с JS
+
+Подключаемые через `{{> head-links}}` сценарии уже инициализируют:
+
+- последовательную подгрузку `data-src` внутри `[data-case-sequential-images]` (`initCaseSequentialImages`);
+- просмотр картинок по клику (`data-image-viewer`, делегирование на документ);
+- плеер видео кейса (`data-case-video-player`);
+- натуральный размер для `.case-media--natural img`;
+- сворачивание длинного скрина (`[data-case-tall-media]`, `initCaseTallMediaExpand`).
+
+Новые интерактивные паттерны — по правилам из `docs/frontend-js-architecture.md` (модуль в `public/js/modules/cases/`, вызов из `main.js`).
+
+## Чеклист нового кейса
+
+1. Скопировать `template-elements-demo.html` → `src/pages/cases/<slug>.html`, заменить `meta`, `title`, контент.
+2. Положить медиа в **`public/assets/<slug>/`** (см. `public/assets/README.md` и `docs/image-optimization.md`).
+3. Проверить все пути `../assets/…` и `../css/…`.
+4. Выполнить `npm run build:pages` и открыть `public/cases/<slug>.html` локально.
+5. При необходимости завести текстовый слепок в `texts/cases/<slug>.md` и ссылку на кейс в `src/partials/projects-section.html` после сборки главной.
diff --git a/docs/content-edit-mode.md b/docs/content-edit-mode.md
new file mode 100644
index 0000000..6071ad0
--- /dev/null
+++ b/docs/content-edit-mode.md
@@ -0,0 +1,41 @@
+# Режим правок контента (localhost)
+
+Инструмент для сбора **инструкций агенту** прямо на странице при локальном просмотре. HTML на диске не меняется до apply в `src`.
+
+## Запуск
+
+```bash
+npm run serve
+```
+
+Открыть страницу на [http://localhost:4175](http://localhost:4175). Работает только на `localhost` / `127.0.0.1`.
+
+Сервер: [`scripts/serve-dev.mjs`](../scripts/serve-dev.mjs) — BrowserSync по `public/`, API правок, **без** перезагрузки при записи в `texts/content-edits/`.
+
+Старый однострочный BrowserSync: `npm run serve:static`.
+
+## Как пользоваться
+
+1. **FAB (карандаш)** — включить режим правок. Если в очереди есть правки, на кнопке виден **бейдж** с их числом (режим выключен).
+2. В режиме правок слева внизу открывается **парящая панель**: слева список, справа поле «Инструкция агенту». Без выбора блока можно сразу писать **общую правку страницы**.
+3. **Наведение** на объект в `main` — пунктирный контур; **клик** — правка конкретного блока. **Shift+клик** — вставить ссылку `«…»` на блок в текст (работает и для общей правки страницы).
+4. Текст сохраняется **автоматически** (debounce ~400 ms) в [`texts/content-edits/pending.json`](../texts/content-edits/pending.json). Пустое поле — запись удаляется.
+5. Клик по пункту в списке слева — скролл к объекту (если блок ещё на странице) и редактирование. Если блок уже удалён или селектор не находится — скролла нет, инструкция всё равно открывается. **Удалить** — убрать правку из очереди.
+6. **Escape** или клик мимо блока — снять контур блока, вернуться к общей правке страницы. Повторный клик FAB — выключить режим.
+7. В Cursor: **`/apply-edits`** (или **`/apply_edits`**, если остался старый алиас) или **«примени правки»** — агент читает `pending.json`, правит `src/pages/`, `humanizer-ru`, `npm run build:pages`. Очередь **не очищается** — проверяешь результат, при необходимости правишь задание и apply снова; готовые пункты удаляешь сам в dock.
+
+Черновики (клик без текста) видны в списке по сниппету блока; в JSON попадают только пункты с непустой инструкцией.
+
+## Формат JSON
+
+См. [`texts/content-edits/README.md`](../texts/content-edits/README.md).
+
+## Apply для агента
+
+Правило: [`.cursor/rules/content-edit-apply.mdc`](../.cursor/rules/content-edit-apply.mdc).
+
+Порядок поиска блока в `src`: `target.selector` → подстрока `target.content` / `snippet` → зона `anchorId`. Дополнительные блоки из instruction — в `item.refs[]` (метки `«…»` ↔ `refs[].label`).
+
+## Legacy
+
+Ручная правка собранного HTML в `public/` — только по явной просьбе, см. `.cursor/rules/case-content-edit-in-public.mdc`. Не путать с content-edits.
diff --git a/docs/design-terminology-ru.md b/docs/design-terminology-ru.md
new file mode 100644
index 0000000..a912f88
--- /dev/null
+++ b/docs/design-terminology-ru.md
@@ -0,0 +1,13 @@
+# Термины: как говорят в дизайне (RU)
+
+Короткий словарик: как формулируют коллеги в речи и текстах. Не норма русского языка, а устоявшийся профессиональный жаргон.
+
+## Юзерфлоу / user flow
+
+- **Как говорят:** «юзерфлоу», иногда «user flow» в латинице.
+- **По-русски формально:** пользовательский сценарий, поток пользователя, маршрут пользователя.
+- **Заметка:** даже в русскоязычной среде дизайнеры часто оставляют **user flow / юзерфлоу** — так короче и однозначно отсылает к артефакту (диаграмма или описание шагов).
+
+---
+
+*Файл можно дополнять новыми строками по мере появления устойчивых формулировок.*
diff --git a/docs/frontend-js-architecture.md b/docs/frontend-js-architecture.md
new file mode 100644
index 0000000..0a42dab
--- /dev/null
+++ b/docs/frontend-js-architecture.md
@@ -0,0 +1,89 @@
+# Frontend JS Architecture
+
+## Цель
+
+- Держать `public/js/main.js` минимальным entrypoint.
+- Делить код по фичам, а не по страницам.
+- Снижать связность и дублирование.
+
+## Структура
+
+- `public/js/main.js` — только импорты и вызовы `init*`.
+- `public/js/modules/theme/*` — тема и панель стилей.
+- `public/js/modules/header/*` — шапка, скролл, overflow-навигация.
+- `public/js/modules/experience/*` — masonry, expand, hover-эффекты.
+- `public/js/modules/mini-projects/*` — masonry и раскрытие секции мини-проектов.
+- `public/js/modules/cases/*` — медиалогика кейсов.
+- `public/js/modules/ui/*` — локальные UI-фичи (копирование, cookie, hero и т.д.).
+- `public/js/modules/shared/*` — переиспользуемые утилиты.
+
+## Правила зависимостей
+
+- Разрешено: `feature -> shared`.
+- Нежелательно: `feature -> feature`.
+- Запрещено: циклические зависимости.
+- Если логика нужна в 2+ фичах, переносить ее в `shared`.
+
+## Соглашения по именованию
+
+- Инициализаторы: `initFeatureName`.
+- Файлы с разделением ответственности:
+  - `*-core.js` — состояние, вычисления, чистая логика.
+  - `*-controls.js` — DOM и события.
+- Утилиты: короткие имена по области (`math.js`, `media.js`, `dom.js`).
+
+## Контракт для init-функций
+
+- Функция должна быть безопасной на любой странице.
+- Если нужного DOM нет, делать ранний `return`.
+- Не бросать исключения при отсутствии опциональных API браузера.
+- По возможности избегать глобального состояния.
+
+## Как добавить новую фичу
+
+1. Создать модуль в нужной feature-папке, например `public/js/modules/ui/new-feature.js`.
+2. Экспортировать `initNewFeature`.
+3. В `public/js/main.js`:
+  - добавить `import { initNewFeature } ...`;
+  - вызвать `initNewFeature()` в блоке инициализации.
+4. Если часть кода переиспользуется, вынести в `public/js/modules/shared/*`.
+
+## Минимальный шаблон фичи
+
+```js
+export function initNewFeature() {
+  const root = document.querySelector("[data-new-feature]");
+  if (!root) return;
+
+  // logic
+}
+```
+
+## Чеклист перед PR
+
+- Проверить базовый smoke на страницах с этой фичей.
+- Проверить `prefers-reduced-motion`, если есть анимации.
+- Проверить resize/scroll сценарии, если есть геометрические вычисления.
+- Проверить доступность: `aria-*`, keyboard-only навигация, Escape/Focus.
+
+## Source/Build/Public для HTML
+
+- `src/partials/*.html` — source of truth для общих блоков (header, fab, projects, contact, footer, cookie и т.д.).
+- `src/pages/**/*.html` — source of truth для страниц с include-маркерами `{{> partial-name }}`.
+- `public/assets/**` — картинки, видео, иконки сайта (редактируются вручную; сборка страниц их не копирует).
+- `public/**/*.html` — только build-артефакт; руками не редактируем.
+
+Эталон HTML-блоков для лонгрида кейса и порядок partials: **`docs/case-page-blocks.md`** (исходник-пример: `src/pages/cases/template-elements-demo.html`).
+
+### Сборка страниц
+
+- Команда: `npm run build:pages`.
+- Скрипт: `scripts/build-pages.mjs`.
+- Скрипт подставляет partials и переменные пути:
+  - `{{assetPrefix}}` (`""` для корня, `../` для `cases/*`),
+  - `{{casesPrefix}}` (`cases/` для корня, `""` для `cases/*`).
+
+### Правило перед выкладкой
+
+- Перед публикацией на хостинг всегда запускать `npm run build:pages` (или `npm run build`).
+
diff --git a/docs/gitverse-sync.md b/docs/gitverse-sync.md
new file mode 100644
index 0000000..06c21ad
--- /dev/null
+++ b/docs/gitverse-sync.md
@@ -0,0 +1,57 @@
+# Синхронизация `public` -> `gitverse`
+
+## Назначение
+
+Скрипт `sync-gitverse` копирует содержимое `public` в папку `gitverse`, затем выполняет коммит и пуш в репозиторий внутри `gitverse`.
+
+## Запуск
+
+- Через npm:
+  - `npm run sync-gitverse`
+- Напрямую:
+  - `node scripts/sync-gitverse.mjs`
+- С явными путями:
+  - `node scripts/sync-gitverse.mjs <sourceDir> <targetDir>`
+
+По умолчанию:
+
+- `sourceDir = public`
+- `targetDir = gitverse`
+
+## Что делает скрипт
+
+1. Проверяет, что исходная папка существует.
+2. В целевой папке удаляет всё, кроме:
+  - `.git`
+  - `.gitverse`
+3. Копирует содержимое `public` в `gitverse` (файлы `.png` пропускаются — в деплое используются WebP и остальные форматы).
+4. В репозитории `gitverse` выполняет:
+   - `git add .`
+   - `git commit -m "sync public YYYY-MM-DD HH:mm"` (только если есть изменения)
+   - `git push`
+5. После успешного пуша открывает в системном браузере по умолчанию: `https://mamadaevv.gitverse.site/me/`
+
+Если изменений после копирования нет, коммит и пуш не делаются.
+
+## Инструкция для агента (Cursor)
+
+Когда пользователь просит **выложить на GitVerse**, **собрать/задеплоить gitverse**, **синхронизировать с gitverse** или аналогично:
+
+1. **Сборка `public/`:** если менялись `src/pages/**` или `src/partials/**` — `npm run build:pages`; если шрифты/Plyr/`package.json` или `scripts/copy-vendor.mjs` — `npm run build` (сначала `vendor:copy`, затем страницы). См. [`docs/vendor-assets.md`](vendor-assets.md).
+2. **Синк и пуш:** выполни `npm run sync-gitverse` из корня. Нужны разрешения **network** и **git_write** (SSH на GitVerse, пуш из папки `gitverse`).
+3. **Ожидания:** скрипт не копирует файлы `.png` в `gitverse`. После **успешного** `git push` открывается системный браузер с `https://mamadaevv.gitverse.site/me/`. Если изменений в `gitverse` после копирования нет — коммит/пуш не выполняются, браузер не открывается.
+4. **Не вызывай** `sync-gitverse` без запроса пользователя: скрипт очищает целевую папку (кроме `.git` и `.gitverse`) и пушит в remote.
+5. **Корневой git репозиторий** этого проекта считается **только локальным**: не пушь из корня в `origin` и не настраивай remote без явной просьбы пользователя с URL. Внешняя выкладка — через `gitverse`, не через `git push` в корне.
+6. Деплой на VPS — отдельный сценарий, см. **`docs/vps-deploy.md`**.
+
+Подробности и ограничения — в разделах выше.
+
+## Требования
+
+- В `gitverse` уже должен быть инициализирован git-репозиторий (папка `.git`).
+- Должен быть настроен доступ на push (SSH-ключ/права).
+
+## Важно
+
+- Скрипт удаляет в `gitverse` все файлы и папки, кроме `.git` и `.gitverse`.
+- Не запускай скрипт, если в `gitverse` есть локальные несохраненные изменения, которые нужно оставить.
\ No newline at end of file
diff --git a/docs/image-optimization.md b/docs/image-optimization.md
new file mode 100644
index 0000000..5084c73
--- /dev/null
+++ b/docs/image-optimization.md
@@ -0,0 +1,42 @@
+# Оптимизация картинок: PNG / JPEG → WebP рядом
+
+Скрипт `scripts/optimize-images.mjs` обходит **вложенные** папки и для каждого `.png`, `.jpg`, `.jpeg` создаёт рядом `то же имя.webp`.
+
+- Размер в пикселях **не меняется**.
+- WebP с **качеством 90** (и `alphaQuality: 100` для прозрачного PNG) — сильно не жмёт, ориентир на визуально близкий результат к исходнику при меньшем весе файла.
+- **Повторный запуск:** если `имя.webp` уже есть и **новее или того же возраста**, что и исходник, файл **пропускается** (чтобы не гонять лишний раз). После правки картинки снова запусти скрипт, либо удали `webp`, либо используй `--force`.
+
+## Требования
+
+- **Node.js**;
+- пакет `sharp` (ставится вместе с `npm install` в корне репозитория).
+
+## Запуск
+
+Из корня репозитория (где `package.json`), укажи **папку с картинками** (относительно корня или абсолютный путь):
+
+```bash
+npm run optimize-images -- public/assets/cases/мой-кейс/img
+```
+
+либо:
+
+```bash
+node scripts/optimize-images.mjs public/assets/cases/мой-кейс/img
+```
+
+Пересоздать все WebP, даже если по дате «свежее»:
+
+```bash
+npm run optimize-images -- public/assets/cases/мой-кейс/img --force
+```
+
+В PowerShell, если в пути есть пробелы:
+
+```powershell
+npm run optimize-images -- "public\assets\cases\мой-кейс\img"
+```
+
+## Когда картинка не трогается
+
+См. выше: если `foo.webp` есть и **не старше** `foo.png` / `foo.jpg`, `foo` пропускается, кроме режима `--force`.
\ No newline at end of file
diff --git a/docs/local-server.md b/docs/local-server.md
new file mode 100644
index 0000000..81f78af
--- /dev/null
+++ b/docs/local-server.md
@@ -0,0 +1,51 @@
+# Локальный просмотр сайта
+
+Сайт в режиме разработки обслуживается из папки `**public/**` через [BrowserSync](https://browsersync.io/): при изменении файлов страница в браузере обновляется сама.
+
+## Требования
+
+- Установлены **Node.js** и **npm** (идут вместе с Node).
+
+## Первый раз в проекте
+
+В корне репозитория (рядом с `package.json`):
+
+```bash
+npm install
+npm run vendor:copy
+```
+
+(или `npm run build` — vendor + сборка HTML из `src/`.)
+
+## Запуск
+
+```bash
+npm run serve
+```
+
+Скрипт [`scripts/serve-dev.mjs`](../scripts/serve-dev.mjs): статика из `public/`, API правок контента, перезагрузка **только** при изменениях в `public/**` (запись в `texts/content-edits/` вкладку не перезагружает).
+
+Без API: `npm run serve:static`.
+
+## Куда смотреть
+
+- **Сайт:** [http://localhost:4175](http://localhost:4175) — откроется `public/index.html` и остальные пути относительно `public/`.
+- **Панель BrowserSync UI:** [http://localhost:4176](http://localhost:4176) (опционально, для синхронизации и настроек).
+
+## Что отслеживается
+
+Любые изменения в `**public/**`**: HTML, CSS, JS, картинки. Папка `texts/content-edits/` **не** в watch — autosave правок не сбрасывает режим редактирования.
+
+## API правок контента
+
+Только с localhost:
+
+- `GET /api/content-edits?page=cases/foo.html` — правки для страницы;
+- `GET /api/content-edits` — весь `pending.json`;
+- `PUT /api/content-edits?page=…` — тело: `{ page, items[] }` (мерж в общий файл).
+
+Файл: **`texts/content-edits/pending.json`**. См. [`docs/content-edit-mode.md`](content-edit-mode.md).
+
+## Остановка
+
+В терминале: **Ctrl+C**.
\ No newline at end of file
diff --git a/docs/mini-projects-cards.md b/docs/mini-projects-cards.md
new file mode 100644
index 0000000..6355c4c
--- /dev/null
+++ b/docs/mini-projects-cards.md
@@ -0,0 +1,78 @@
+# Карточки секции «Активность»: как подобрать настройки
+
+Кратко о том, какие атрибуты и классы влияют на вид карточки и как не ломать сетку. Живой каталог всех вариантов — **[`public/cases/mini-projects-showcase.html`](../public/cases/mini-projects-showcase.html)** (исходник `src/pages/cases/mini-projects-showcase.html`). Разметка главной — `src/partials/mini-projects-section.html`, раскладка — `[public/js/modules/mini-projects/masonry.js](../public/js/modules/mini-projects/masonry.js)`, стили — `[public/css/main.css](../public/css/main.css)` (классы `mini-projects-*`, `mp-card*`).
+
+## Как устроена сетка
+
+- Каждая карточка — элемент `**li.mini-projects-grid__item**` внутри `**ol#mini-projects-list.mini-projects-grid**`.
+- **Ширина в «клетках»** задаётся атрибутом `**data-mp-cells`** со значением от **1** до **3** — это максимум на карточку; в JS значение дополнительно ограничивается (`readDeclaredCells` в `masonry.js`).
+- Фактическое число клеток в ряду (`rowCells`) зависит от ширины списка (контейнера сетки), не от всего экрана целиком:
+  - **≥ 1180px** — 6 клеток в ряду  
+  - **≥ 880px** — 4  
+  - **≥ 520px** — 2  
+  - иначе — **1**  
+  Пороги заданы в `rowCellsForWidth()` в `masonry.js`; при необходимости их можно сдвинуть под макет.
+- Если `**data-mp-cells`** больше, чем `rowCells` (например, на телефоне ряд из одной клетки), скрипт подставит эффективную ширину `min(объявленное, rowCells)`, карточка займёт всю строку.
+
+Итог: `**data-mp-cells`** выбирайте в диапазоне **1–3** относительно широкого ряда; самая широкая карточка занимает половину шестиклеточной строки или меньше.
+
+## Когда какой модификатор карточки
+
+Базовый блок — `**mp-card`**. Дальше — комбинации модификаторов.
+
+### `mp-card--stack` (+ опционально `mp-card--link`)
+
+- Превью **на всю ширину карточки**, **вплотную** к верхнему и боковым краям; под ним — текст с внутренними отступами.
+- Удобно для **сильного визуала** (скрин, обложка) и **2–4 строк описания**.
+- Ссылка наружу: обёртка `**<a class="mp-card mp-card--link mp-card--stack">`**. В `**h3.mp-card__title`** добавьте `**<span class="mp-card__ext">**` (иконка внешней ссылки появляется при ховере, как в блоке «Опыт работы»).
+
+### `mp-card--horizontal` (+ опционально `mp-card--link`)
+
+- Превью **слева**, текст **справа** (колонка превью ~22% ширины карточки, не шире **6rem**); на ширине **до ~519px** колонки складываются в столбик (превью сверху), см. медиазапрос в CSS.
+- Подходит, когда картинка **не главный герой**, но нужна миниатюра; текст может быть длиннее, чем в узкой колонке `stack`.
+- У горизонтальной карточки без ссылки превью и текст те же классы `**mp-card__media`** / `**mp-card__body`**, но без `**mp-card--link`** и `**mp-card__ext**`.
+
+### `mp-card--horizontal` + `mp-card--hor-image` (+ `mp-card--link`)
+
+- Как horizontal, но логотип/иконка: `**object-fit: contain**` в превью, без обрезки по краям. На узком экране превью не растягивается на всю ширину — до **6rem**.
+- Превью с обводкой и скруглением как у `portfolio-card__image` (см. `main.css`, `.mp-card__image`).
+- Пример на главной: Figma Community, `data-mp-cells="2"`, превью `assets/misc/figma_logo.webp`.
+
+### `mp-card--compact`
+
+- **Только текстовый блок** (`mp-card__body`), без `**mp-card__media`**.
+- Имеет смысл для заметок, чеклистов, коротких описаний без скрина.
+- Ссылка: `**mp-card mp-card--link mp-card--compact`**; без ссылки — обёртка `**article`** или `**div**` с теми же классами без `**mp-card--link**`.
+
+### `mp-card--decor`
+
+- **Не проект**, а визуальная заглушка в сетке (ровная подложка, паттерн).
+- Внутри: `**span.mp-card__decor-pattern`**; без тела проекта и без ссылки.
+- Задаётся тем же `**data-mp-cells`**, что и у обычных карточек, чтобы заполнить «дыру» в masonry.
+
+## Теги типа проекта
+
+- Список `**ul.mp-card__tags`** (можно `**aria-label="Тип проекта"`**).
+- Элементы — `**li.mp-card__tag**` с коротким словом (плагин, скрипт, веб-сайт и т.д.).
+- Обычно **один** тег; несколько допустимы, строка тегов переносится.
+
+## Свёрнутый блок «Показать все»
+
+- Карточки, которые не должны учитываться в **ограниченной высоте** до раскрытия: на `**li`** добавьте `**data-mp-extra`** и атрибут `**hidden`** (скрипт снимает `hidden` для измерения, высота списка в свёрнутом режиме считается только по карточкам **без** `data-mp-extra`).
+- Кнопка с `**data-mp-toggle`** уже есть в разметке; логика — `[expand.js](../public/js/modules/mini-projects/expand.js)`.
+
+## Практические подсказки по красоте раскладки
+
+1. `**data-mp-cells="3"`** — самая широкая карточка в сетке (на десктопе помещается до двух таких в один ряд при `rowCells === 6`). Для акцента и крупного превью в `**stack`**.
+2. `**2 + 2 + 2`** или `**3 + 3**` на шести клетках часто выглядят ровнее случайного набора — masonry всё равно упакует по высоте; меняйте порядок `**li**` в HTML.
+3. **Горизонтальный шаблон** на `**data-mp-cells="2"`** даёт плотный блок «иконка + текст»; длинный текст чаще уместнее в `**stack`** с `**data-mp-cells="3"`**.
+4. `**mp-card--compact`** и `**data-mp-cells="1"**` — узкая текстовая колонка; хорошо рядом с `**stack**` на **2–3** клетки.
+5. После смены картинок или текста высота пересчитывается на `**resize`** и при `**load`** изображений; если верстка «прыгнула», проверьте размеры превью и порядок элементов в DOM.
+
+## Мини-чеклист перед коммитом
+
+- У каждой `**li`** задан осмысленный `**data-mp-cells`** (**1–3**).
+- Для ссылки есть `**mp-card--link`** и `**mp-card__ext`** в заголовке.
+- У `**stack`/`horizontal`** с картинкой есть `**mp-card__media`** + `**mp-card__image**` (например, `placeholder.webp` или свой файл).
+- `**data-mp-extra**` только у карточек, которые должны скрываться до «Показать все».
+- Декоративная ячейка — `**mp-card--decor**`, без лишнего интерактива.
\ No newline at end of file
diff --git a/docs/vendor-assets.md b/docs/vendor-assets.md
new file mode 100644
index 0000000..bccb662
--- /dev/null
+++ b/docs/vendor-assets.md
@@ -0,0 +1,55 @@
+# Локальные vendor-ассеты (шрифты и Plyr)
+
+Сайт не использует Google Fonts и jsDelivr в рантайме. Файлы лежат в `public/` и попадают на хостинг через `sync-gitverse`.
+
+## Что где
+
+| Путь | Содержимое |
+|------|------------|
+| `public/assets/fonts/*.css` | Три пресета темы: `merriweather`, `geologica`, `mono` |
+| `public/assets/fonts/files/*.woff2` | Файлы шрифтов (из `@fontsource/*`) |
+| `public/vendor/plyr/` | `plyr.css`, `plyr.min.mjs` (из `plyr@3.8.4`) |
+
+Подключение:
+
+- Шрифты — inline `theme-init-script` и [`theme-fonts.js`](../public/js/modules/theme/theme-fonts.js).
+- CSS Plyr — partial [`src/partials/head-plyr.html`](../src/partials/head-plyr.html) только на страницах с `video[data-case-video-player]`.
+- JS Plyr — [`video-player.js`](../public/js/modules/cases/video-player.js).
+
+## Обновление
+
+```bash
+npm install
+npm run vendor:copy
+```
+
+Скрипт: [`scripts/copy-vendor.mjs`](../scripts/copy-vendor.mjs). Пересобирает `public/assets/fonts/` и `public/vendor/plyr/` из `node_modules`.
+
+Полная сборка (vendor + HTML):
+
+```bash
+npm run build
+```
+
+Только HTML из `src/`:
+
+```bash
+npm run build:pages
+```
+
+## Добавить или изменить шрифт
+
+1. Установить пакет `@fontsource/...` или `@fontsource-variable/...`.
+2. Добавить источник в `FONT_BUNDLES` в `copy-vendor.mjs`.
+3. `npm run vendor:copy`.
+4. Проверить имена `font-family` в [`public/css/main.css`](../public/css/main.css) (`html[data-font=...]`).
+
+## Обновить Plyr
+
+1. Обновить версию в `package.json` (`dependencies.plyr`).
+2. `npm install` → `npm run vendor:copy`.
+3. При смене API — правки в `video-player.js`.
+
+## Деплой
+
+Перед `npm run sync-gitverse` выполни `npm run build`, чтобы в `public/` были актуальные шрифты, Plyr и HTML.
diff --git a/docs/video-conversion.md b/docs/video-conversion.md
new file mode 100644
index 0000000..c1c4271
--- /dev/null
+++ b/docs/video-conversion.md
@@ -0,0 +1,35 @@
+# Конвертация роликов: MP4 → WebM и превью WebP
+
+Скрипт `scripts/convert-videos.mjs` для каждого `.mp4` в указанной папке создаёт рядом:
+
+- `имя.webm` — видео VP9/Opus (без отдельной аудиодорожки в исходнике — видео без звука);
+- `имя.webp` — превью, один кадр (таймкод: не дальше 1 с от начала и не дальше 10% длительности, масштаб по ширине до 1280 px).
+
+## Требования
+
+- **Node.js** (как и для остального проекта);
+- **ffmpeg** и **ffprobe** в `PATH` (полная сборка с `libvpx`/`libvpx-vp9`, `libopus`, `libwebp`).
+
+## Запуск
+
+Из корня репозитория (где `package.json`), укажи **папку с роликами** (относительно корня или абсолютный путь):
+
+```bash
+npm run convert-videos -- public/assets/cases/мой-кейс/видео
+```
+
+либо:
+
+```bash
+node scripts/convert-videos.mjs public/assets/cases/мой-кейс/видео
+```
+
+В PowerShell путь в кавычках, если в нём пробелы:
+
+```powershell
+npm run convert-videos -- "public\assets\cases\мой-кейс\видео"
+```
+
+## Когда ролик не трогается
+
+Если для `foo.mp4` уже существуют **оба** файла `foo.webm` и `foo.webp` в той же папке, этот ролик **пропускается**. Если не хватает только webm или только webp — догенерируется недостающий файл.
\ No newline at end of file
diff --git a/docs/vps-deploy.md b/docs/vps-deploy.md
new file mode 100644
index 0000000..cd6ad42
--- /dev/null
+++ b/docs/vps-deploy.md
@@ -0,0 +1,59 @@
+# Деплой на VPS (инкрементальный)
+
+Скрипт `scripts/deploy-vps.mjs` загружает содержимое `public/` на VPS, передавая только изменённые файлы.
+
+## Принцип работы
+
+1. **Манифест** (`.deploy-manifest.json`) хранит `mtime` и `size` каждого файла с прошлого деплоя.
+2. При запуске скрипт сканирует `public/`, сравнивает с манифестом:
+   - Файлы с изменившимся `mtime` или `size` — загружаются.
+   - Файлы, которых нет локально, но есть в манифесте — удаляются с сервера.
+3. Изменённые файлы пакуются в `tar` и передаются **одним SSH-соединением** (без сжатия, чтобы не тратить CPU на уже сжатые медиа).
+4. Манифест обновляется после успешного деплоя.
+
+При первом запуске (манифест пуст) заливаются все файлы — ~3 минуты на ~400 файлов. Повторный деплой (1–10 изменившихся файлов) — 2–5 секунд.
+
+## Запуск
+
+```bash
+npm run deploy:vps
+# или напрямую
+node scripts/deploy-vps.mjs [sourceDir]
+```
+
+По умолчанию `sourceDir = public`.
+
+## Рецепты
+
+### Только в Coolify
+
+Запрос пользователя: «задеплой в Coolify», «задеплой на VPS».
+
+```bash
+npm run deploy:vps
+```
+
+Нужны разрешения: **all** (SSH-ключ `~/.ssh/beget`, доступ к файлам `public/`).
+
+### Везде (VPS + GitVerse)
+
+```bash
+npm run deploy
+```
+
+Выполняет `deploy:vps`, затем `sync-gitverse`.
+
+## Конфигурация
+
+- **SSH-ключ:** `~/.ssh/beget`
+- **Хост:** `root@155.212.186.39`
+- **Целевая папка:** `/data/static-site`
+- **Манифест:** `.deploy-manifest.json` в корне проекта (не коммитится)
+
+## Сброс манифеста
+
+Если нужно залить всё с нуля — удалить `.deploy-manifest.json`:
+
+```bash
+rm .deploy-manifest.json
+```
diff --git a/examples/css-color-input-inline-color-picker/LICENSE.txt b/examples/css-color-input-inline-color-picker/LICENSE.txt
new file mode 100644
index 0000000..c11ed2e
--- /dev/null
+++ b/examples/css-color-input-inline-color-picker/LICENSE.txt
@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2026 Adam Argyle (https://codepen.io/argyleink/pen/wBzPvaE)
+Fork of an original work CSS <color-input> Color Picker (https://codepen.io/argyleink/pen/dPGBYZg)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/examples/css-color-input-inline-color-picker/README.md b/examples/css-color-input-inline-color-picker/README.md
new file mode 100644
index 0000000..b48496b
--- /dev/null
+++ b/examples/css-color-input-inline-color-picker/README.md
@@ -0,0 +1,6 @@
+# CSS <color-input> Inline Color Picker
+
+A Pen created on CodePen.
+
+Original URL: [https://codepen.io/argyleink/pen/wBzPvaE](https://codepen.io/argyleink/pen/wBzPvaE).
+
diff --git a/examples/css-color-input-inline-color-picker/src/index.html b/examples/css-color-input-inline-color-picker/src/index.html
new file mode 100644
index 0000000..cfcf34f
--- /dev/null
+++ b/examples/css-color-input-inline-color-picker/src/index.html
@@ -0,0 +1,3 @@
+<color-input></color-input>
+
+<!-- https://github.com/argyleink/css-color-component -->
\ No newline at end of file
diff --git a/examples/css-color-input-inline-color-picker/src/script.js b/examples/css-color-input-inline-color-picker/src/script.js
new file mode 100644
index 0000000..239c90a
--- /dev/null
+++ b/examples/css-color-input-inline-color-picker/src/script.js
@@ -0,0 +1 @@
+import "https://unpkg.com/hdr-color-input"
\ No newline at end of file
diff --git a/examples/css-color-input-inline-color-picker/src/style.css b/examples/css-color-input-inline-color-picker/src/style.css
new file mode 100644
index 0000000..68def4d
--- /dev/null
+++ b/examples/css-color-input-inline-color-picker/src/style.css
@@ -0,0 +1,63 @@
+/* comment out for the default anchor variant */
+color-input {
+  display:grid;
+  place-items: start;
+  
+  &::part(panel) {
+    display: block;
+    position: static;
+    opacity: 1;
+  }
+}
+
+
+
+
+
+
+@layer demo.support {
+  * {
+    box-sizing: border-box;
+    margin: 0;
+  }
+  
+  html {
+    block-size: 100%;
+    color-scheme: dark light;
+    scrollbar-color: color-mix(in srgb, CanvasText, #0000 50%) #0000;
+  }
+
+  body {
+    min-block-size: 100%;
+    font-family: system-ui, sans-serif;
+
+    display: grid;
+    place-content: center;
+  }
+}
+
+
+
+
+
+
+@layer demo.support {
+  * {
+    box-sizing: border-box;
+    margin: 0;
+  }
+  
+  html {
+    block-size: 100%;
+    color-scheme: dark light;
+    scrollbar-color: color-mix(in srgb, CanvasText, #0000 50%) #0000;
+  }
+
+  body {
+    min-block-size: 100%;
+    font-family: system-ui, sans-serif;
+
+    display: grid;
+    place-content: center;
+  }
+}
\ No newline at end of file
diff --git a/examples/ios-css-chat-message-bubbles.zip b/examples/ios-css-chat-message-bubbles.zip
new file mode 100644
index 0000000..842ae79
Binary files /dev/null and b/examples/ios-css-chat-message-bubbles.zip differ
diff --git a/examples/magical-hover-effect-w-tutorial/LICENSE.txt b/examples/magical-hover-effect-w-tutorial/LICENSE.txt
new file mode 100644
index 0000000..a2ea565
--- /dev/null
+++ b/examples/magical-hover-effect-w-tutorial/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2026 Hyperplexed (https://codepen.io/Hyperplexed/pen/MWQeYLW)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/examples/magical-hover-effect-w-tutorial/README.md b/examples/magical-hover-effect-w-tutorial/README.md
new file mode 100644
index 0000000..63eb297
--- /dev/null
+++ b/examples/magical-hover-effect-w-tutorial/README.md
@@ -0,0 +1,7 @@
+# Magical Hover Effect (w/ Tutorial)
+
+A Pen created on CodePen.
+
+Original URL: [https://codepen.io/Hyperplexed/pen/MWQeYLW](https://codepen.io/Hyperplexed/pen/MWQeYLW).
+
+A recreation of the amazing hover effect found here: https://linear.app/features
diff --git a/examples/magical-hover-effect-w-tutorial/src/index.html b/examples/magical-hover-effect-w-tutorial/src/index.html
new file mode 100644
index 0000000..f887275
--- /dev/null
+++ b/examples/magical-hover-effect-w-tutorial/src/index.html
@@ -0,0 +1,108 @@
+<div id="cards">
+  <div class="card">
+    <div class="card-content">
+      <div class="card-image">
+        <i class="fa-duotone fa-apartment"></i>
+      </div>
+      <div class="card-info-wrapper">
+        <div class="card-info">
+          <i class="fa-duotone fa-apartment"></i>
+          <div class="card-info-title">
+            <h3>Apartments</h3>  
+            <h4>Places to be apart. Wait, what?</h4>
+          </div>    
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="card">
+    <div class="card-content">
+      <div class="card-image">
+        <i class="fa-duotone fa-unicorn"></i>
+      </div>
+      <div class="card-info-wrapper">
+        <div class="card-info">
+          <i class="fa-duotone fa-unicorn"></i>
+          <div class="card-info-title">
+            <h3>Unicorns</h3>  
+            <h4>A single corn. Er, I mean horn.</h4>
+          </div>    
+        </div>  
+      </div>
+    </div>
+  </div>
+  <div class="card">
+    <div class="card-content">
+      <div class="card-image">
+        <i class="fa-duotone fa-blender-phone"></i>
+      </div>
+      <div class="card-info-wrapper">
+        <div class="card-info">
+          <i class="fa-duotone fa-blender-phone"></i>
+          <div class="card-info-title">
+            <h3>Blender Phones</h3>  
+            <h4>These absolutely deserve to exist.</h4>
+          </div>    
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="card">
+    <div class="card-content">
+      <div class="card-image">
+        <i class="fa-duotone fa-person-to-portal"></i>
+      </div>
+      <div class="card-info-wrapper">
+        <div class="card-info">
+          <i class="fa-duotone fa-person-to-portal"></i>
+          <div class="card-info-title">
+            <h3>Adios</h3>  
+            <h4>See you...</h4>
+          </div>    
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="card">
+    <div class="card-content">
+      <div class="card-image">
+        <i class="fa-duotone fa-person-from-portal"></i>
+      </div>
+      <div class="card-info-wrapper">
+        <div class="card-info">
+          <i class="fa-duotone fa-person-from-portal"></i>
+          <div class="card-info-title">
+            <h3>I mean hello</h3>  
+            <h4>...over here.</h4>
+          </div>    
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="card">
+    <div class="card-content">
+      <div class="card-image">
+        <i class="fa-duotone fa-otter"></i>
+      </div>
+      <div class="card-info-wrapper">
+        <div class="card-info">
+          <i class="fa-duotone fa-otter"></i>
+          <div class="card-info-title">
+            <h3>Otters</h3>  
+            <h4>Look at me, imma cute lil fella.</h4>
+          </div>    
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<a id="source-link" class="link" href="https://linear.app/features" target="_blank">
+  <i class="fa-solid fa-link"></i>
+  <span class="roboto-mono">Source</span>
+</a>
+
+<a id="youtube-link" class="link" href="https://youtu.be/htGfnF1zN4g" target="_blank">
+  <i class="fa-brands fa-youtube"></i>
+  <span>5 min Tutorial</span>
+</a>
\ No newline at end of file
diff --git a/examples/magical-hover-effect-w-tutorial/src/script.js b/examples/magical-hover-effect-w-tutorial/src/script.js
new file mode 100644
index 0000000..b5cde18
--- /dev/null
+++ b/examples/magical-hover-effect-w-tutorial/src/script.js
@@ -0,0 +1,10 @@
+document.getElementById("cards").onmousemove = e => {
+  for(const card of document.getElementsByClassName("card")) {
+    const rect = card.getBoundingClientRect(),
+          x = e.clientX - rect.left,
+          y = e.clientY - rect.top;
+
+    card.style.setProperty("--mouse-x", `${x}px`);
+    card.style.setProperty("--mouse-y", `${y}px`);
+  };
+}
\ No newline at end of file
diff --git a/examples/magical-hover-effect-w-tutorial/src/style.css b/examples/magical-hover-effect-w-tutorial/src/style.css
new file mode 100644
index 0000000..16120b2
--- /dev/null
+++ b/examples/magical-hover-effect-w-tutorial/src/style.css
@@ -0,0 +1,247 @@
+:root {
+  --bg-color: rgb(20, 20, 20);
+  --card-color: rgb(23, 23, 23);
+}
+
+body {
+  align-items: center;
+  background-color: var(--bg-color);
+  display: flex;
+  height: 100vh;
+  justify-content: center;
+  margin: 0px;
+  overflow: hidden;
+  padding: 0px;
+}
+
+#cards {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;  
+  max-width: 916px;
+  width: calc(100% - 20px);
+}
+
+#cards:hover > .card::after {
+  opacity: 1;
+}
+
+.card {
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+  cursor: pointer;
+  display: flex;
+  height: 260px;
+  flex-direction: column;
+  position: relative;
+  width: 300px;  
+}
+
+.card:hover::before {
+  opacity: 1;
+}
+
+.card::before,
+.card::after {
+  border-radius: inherit;
+  content: "";
+  height: 100%;
+  left: 0px;
+  opacity: 0;
+  position: absolute;
+  top: 0px;
+  transition: opacity 500ms;
+  width: 100%;
+}
+
+.card::before {
+  background: radial-gradient(
+    800px circle at var(--mouse-x) var(--mouse-y), 
+    rgba(255, 255, 255, 0.06),
+    transparent 40%
+  );
+  z-index: 3;
+}
+
+.card::after {  
+  background: radial-gradient(
+    600px circle at var(--mouse-x) var(--mouse-y), 
+    rgba(255, 255, 255, 0.4),
+    transparent 40%
+  );
+  z-index: 1;
+}
+
+.card > .card-content {
+  background-color: var(--card-color);
+  border-radius: inherit;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  inset: 1px;
+  padding: 10px;
+  position: absolute;
+  z-index: 2;
+}
+
+/* -- ↓ ↓ ↓ extra card content styles ↓ ↓ ↓ -- */
+
+h1, h2, h3, h4, span {
+  color: rgb(240, 240, 240);
+  font-family: "Rubik", sans-serif;
+  font-weight: 400;
+  margin: 0px;
+}
+
+i {  
+  color: rgb(240, 240, 240);
+}
+
+.card-image {
+  align-items: center;
+  display: flex;
+  height: 140px;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.card-image > i {
+  font-size: 6em;
+  opacity: 0.25;
+}
+
+.card-info-wrapper {
+  align-items: center;
+  display: flex;
+  flex-grow: 1;
+  justify-content: flex-start;
+  padding: 0px 20px;
+}
+
+.card-info {
+  align-items: flex-start;
+  display: flex;
+  gap: 10px;
+}
+
+.card-info > i {  
+  font-size: 1em;
+  height: 20px;
+  line-height: 20px;
+}
+
+.card-info-title > h3 {
+  font-size: 1.1em;
+  line-height: 20px;
+}
+
+.card-info-title > h4 {
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 0.85em;
+  margin-top: 8px;
+}
+
+/* -- ↓ ↓ ↓ some responsiveness ↓ ↓ ↓ -- */
+
+@media(max-width: 1000px) {
+  body {
+    align-items: flex-start;  
+    overflow: auto;
+  }
+  
+  #cards {    
+    max-width: 1000px;
+    padding: 10px 0px;
+  }
+  
+  .card {
+    flex-shrink: 1;
+    width: calc(50% - 4px);
+  }
+}
+
+@media(max-width: 500px) {
+  .card {
+    height: 180px;
+  }
+  
+  .card-image {
+    height: 80px;  
+  }
+  
+  .card-image > i {
+    font-size: 3em;
+  }
+    
+  .card-info-wrapper {
+    padding: 0px 10px;
+  }
+  
+  .card-info > i { 
+    font-size: 0.8em; 
+  }
+  
+  .card-info-title > h3 {
+    font-size: 0.9em;
+  }
+
+  .card-info-title > h4 {
+    font-size: 0.8em;
+    margin-top: 4px;
+  }
+}
+
+@media(max-width: 320px) {
+  .card {
+    width: 100%;
+  }
+}
+
+/* -- ↓ ↓ ↓ YouTube link styles ↓ ↓ ↓ -- */
+
+#youtube-link {
+  bottom: 10px;
+}
+
+#youtube-link > i {
+  color: rgb(239, 83, 80);
+}
+
+#source-link {
+  bottom: 60px;
+}
+
+#source-link > i {
+  color: rgb(94, 106, 210);
+}
+
+.link {
+  align-items: center;
+  backdrop-filter: blur(3px);
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
+  cursor: pointer;  
+  display: inline-flex;
+  gap: 5px;
+  left: 10px;
+  padding: 10px 20px;
+  position: fixed;
+  text-decoration: none;
+  z-index: 100;
+}
+
+.link:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.link > i, .link > span {
+  height: 20px;
+  line-height: 20px;
+}
+
+.link > span {
+  color: white;
+}
\ No newline at end of file
diff --git a/favicon/android-chrome-192x192.png b/favicon/android-chrome-192x192.png
new file mode 100644
index 0000000..126c116
Binary files /dev/null and b/favicon/android-chrome-192x192.png differ
diff --git a/favicon/android-chrome-512x512.png b/favicon/android-chrome-512x512.png
new file mode 100644
index 0000000..7803132
Binary files /dev/null and b/favicon/android-chrome-512x512.png differ
diff --git a/favicon/apple-touch-icon.png b/favicon/apple-touch-icon.png
new file mode 100644
index 0000000..87b63e0
Binary files /dev/null and b/favicon/apple-touch-icon.png differ
diff --git a/favicon/favicon-16x16.png b/favicon/favicon-16x16.png
new file mode 100644
index 0000000..3fd0b4d
Binary files /dev/null and b/favicon/favicon-16x16.png differ
diff --git a/favicon/favicon-32x32.png b/favicon/favicon-32x32.png
new file mode 100644
index 0000000..66f221d
Binary files /dev/null and b/favicon/favicon-32x32.png differ
diff --git a/favicon/favicon.ico b/favicon/favicon.ico
new file mode 100644
index 0000000..035c82b
Binary files /dev/null and b/favicon/favicon.ico differ
diff --git a/favicon/favicon.png b/favicon/favicon.png
new file mode 100644
index 0000000..4784a4d
Binary files /dev/null and b/favicon/favicon.png differ
diff --git a/favicon/favicon_bg.png b/favicon/favicon_bg.png
new file mode 100644
index 0000000..1d58130
Binary files /dev/null and b/favicon/favicon_bg.png differ
diff --git a/favicon/site.webmanifest b/favicon/site.webmanifest
new file mode 100644
index 0000000..45dc8a2
--- /dev/null
+++ b/favicon/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
\ No newline at end of file
diff --git a/mamadaevv_resume.md b/mamadaevv_resume.md
new file mode 100644
index 0000000..880cb7d
--- /dev/null
+++ b/mamadaevv_resume.md
@@ -0,0 +1,73 @@
+**Николай Мамадаев**  
+**Product Designer / Senior UX/UI Designer**  
+Калининград, Россия · Удалённо  
+   
+ Телефон: +7 (960) 294-24-05  
+   
+ Telegram: @mamadaevv  
+   
+ Email: [nik@mamadaevv.ru  
+ ](mailto:nik@mamadaevv.ru "mailto:nik@mamadaevv.ru")[  
+ Сайт-портфолио: ](https://github.com/mamadaevv "https://github.com/mamadaevv")[https://mamadaevv.site](https://mamadaevv.site "https://mamadaevv.site")  
+**Профиль**  
+Продуктовый дизайнер с 10+ годами опыта в UX/UI, проектировании сложных интерфейсов, исследованиях и развитии дизайн-систем для web, desktop и mobile. Работаю на стыке дизайна и продукта: перевожу бизнес-задачи, продуктовые гипотезы и сложный контент в понятные сценарии с логичной информационной архитектурой и визуально привлекательными интерфейсами. Сильные стороны — Figma, пользовательские исследования, прототипирование, дизайн-системы, работа с метриками и плотная связка с разработкой.  
+**Образование**  
+**СЛПТ (Сокольский лесопромышленный политехнический техникум)**  
+   
+ 2006–2009 · Эксплуатация и обслуживание электрического и электромеханического оборудования (по отраслям)  
+**Языки**  
+- Английский (B1)  
+**Ключевые навыки**  
+**Проектирование**  
+   
+ UX/UI дизайн, product design, проектирование интерфейсов, информационная архитектура, адаптивный дизайн, работа со сложным контентом и аналитическими сценариями  
+**Исследования и аналитика**  
+   
+ Интервью, опросы, usability testing, проверка гипотез, работа с продуктовыми метриками  
+**Инструменты**  
+   
+ Figma (компоненты, auto-layout, прототипирование, библиотеки, подготовка к разработке, плагины), дизайн-системы и UI-kit  
+**Процессы и коммуникация**  
+   
+ Авторский надзор, консистентность интерфейсов, взаимодействие со стейкхолдерами, разработчиками и продуктовыми командами  
+**Опыт работы**  
+**Primo RPA**  
+***Ведущий UI/UX дизайнер***  
+Февраль 2023 — Ноябрь 2025 · Москва / удалённо  
+- Отвечал за развитие UX/UI нескольких продуктов: Studio, Orchestrator, Idea Hub и AI Server.  
+- Проектировал и улучшал графические интерфейсы, проводил пользовательские исследования, создавал интерактивные прототипы и поддерживал UI-kit.  
+- Участвовал в обновлении визуального языка продуктов компании; в веб-сервисах помог перейти к единой дизайн-системе и более целостному пользовательскому опыту.  
+- Работал в связке с разработкой и сопровождал внедрение решений до реализации.  
+**Icons8**  
+***UI/UX дизайнер***  
+Июль 2022 — Январь 2023  
+- Проектировал интерфейсы для редактора Lunacy, оформлял user flows и передавал решения в разработку.  
+- Создавал сложные прототипы, дорабатывал иконки и предлагал улучшения функциональности продукта.  
+**MANU Video Game Maker**  
+***Team Lead Product Team***  
+Январь 2019 — Декабрь 2021 · Москва  
+- Выполнил масштабный редизайн продукта и заложил новую концепцию интерфейса для сложных сценариев.  
+- Спроектировал поведение интерфейса для более чем сотни пользовательских сценариев и разработал дизайн-систему.  
+- Проводил исследования пользователей, создавал персоны и карты эмпатии, работал с аналитикой и продуктовыми метриками.  
+- Проектировал информационную архитектуру сайта вместе с командой и курировал создание пользовательской документации.  
+**Aegees**  
+***UX/UI дизайнер***  
+Октябрь 2017 — Декабрь 2018 · Сочи  
+- Занимался разработкой дизайна кроссплатформенного мессенджера для платформ Android, iOS, MacOS, Windows и Linux.  
+- Контролировал процесс работы с зарубежными иллюстраторами по подготовке графических материалов.  
+**Orion Innovation (ex MERA)**  
+***UI/UX дизайнер***  
+Июль 2016 — Октябрь 2017  
+- Создавал wireframes, финальный UI, сценарии, карты экранов и дизайн-концепции в составе продуктовой команды.  
+- Проводил качественные usability tests, презентовал решения клиентам и сопровождал реализацию в разработке.  
+**SpaceshipApps**  
+***UX/UI дизайнер***  
+Июнь 2015 — Июнь 2016 · Москва  
+- Разрабатывал дизайн для мобильного приложения социальной игры с квестами в реальном мире, приложения для записи к специалистам, сервиса заказа еды, голосовой игры с ботом, сайта и админки для сервиса регистрации авторского права, а также мобильной «белой доски» для коллаборативной работы.  
+**Дополнительно**  
+**AI и новые инструменты**  
+- Активно использую AI-инструменты для ресёрча, генерации идей, ускорения рутинных задач и поиска продуктовых решений. Для визуальных экспериментов — Recraft, GPT, YandexART.  
+- Собрал приватный AI-плагин для дизайнерской рутины. Регулярно использую Perplexity PRO для анализа, структурирования информации и проработки идей.  
+**Pet-проекты и профессиональная среда**  
+- Делаю pet-проекты с no-code и автоматизациями, использую n8n, REST API и PostgreSQL в собственных сценариях и связках сервисов.  
+- Веду профессиональные активности вне основной работы: Telegram-каналы, Figma Community, дизайнерские наработки и эксперименты на стыке дизайна, автоматизации и AI.  
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..3b30ea3
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,2481 @@
+{
+  "name": "my-site",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "my-site",
+      "dependencies": {
+        "plyr": "^3.8.4"
+      },
+      "devDependencies": {
+        "@fontsource-variable/geologica": "^5.2.8",
+        "@fontsource/alice": "^5.2.8",
+        "@fontsource/merriweather": "^5.2.11",
+        "@fontsource/pt-mono": "^5.2.8",
+        "@fontsource/pt-sans": "^5.2.8",
+        "@fontsource/source-code-pro": "^5.2.7",
+        "browser-sync": "^3.0.4",
+        "sharp": "^0.34.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
+      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@fontsource-variable/geologica": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/geologica/-/geologica-5.2.8.tgz",
+      "integrity": "sha512-hmUBi4k8C0xfi/pk/ArAyK7kRPqbkV5o/YN4nmJ+mtc14HKaAzdWAKb31gFWpveI75POgtcw3/iAepcGRnotYw==",
+      "dev": true,
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/alice": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/alice/-/alice-5.2.8.tgz",
+      "integrity": "sha512-EDpK9aFXsaRKdyZpgFu8d5+zmE07yIaFxqVeKrYQJjdQpEhWDZA+naLflHwQQmMbLMJK3a4X/RAm5MCScT93NA==",
+      "dev": true,
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/merriweather": {
+      "version": "5.2.11",
+      "resolved": "https://registry.npmjs.org/@fontsource/merriweather/-/merriweather-5.2.11.tgz",
+      "integrity": "sha512-ZiIMeUh5iT8d73o6xlSF8GKgjV5pgiFrufYc5jZTVAfExtWKqM2vQHnsqXSFMv4ELhAcjt6Vf+5T3oVGXhAizQ==",
+      "dev": true,
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/pt-mono": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/pt-mono/-/pt-mono-5.2.8.tgz",
+      "integrity": "sha512-rJCYN8NRBQbT6Xvj42JBj7kLuuAV7LXfV2udQc5+2QT8pWXCz9iUb7gHDEvtb6zoljzOLPS+E3IBllSMzwazNg==",
+      "dev": true,
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/pt-sans": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/pt-sans/-/pt-sans-5.2.8.tgz",
+      "integrity": "sha512-b8nBGHMVwfe21IWqERlMrzIs+L/Vm3QNGbnET3H1vfclAScWExbN17N/z/dJcyPgvrcenbJDv1H3f5hTAEbcVQ==",
+      "dev": true,
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/source-code-pro": {
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@fontsource/source-code-pro/-/source-code-pro-5.2.7.tgz",
+      "integrity": "sha512-7papq9TH94KT+S5VSY8cU7tFmwuGkIe3qxXRMscuAXH6AjMU+KJI75f28FzgBVDrlMfA0jjlTV4/x5+H5o/5EQ==",
+      "dev": true,
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@img/colour": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",
+      "integrity": "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz",
+      "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz",
+      "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz",
+      "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz",
+      "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz",
+      "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz",
+      "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz",
+      "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-riscv64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz",
+      "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz",
+      "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz",
+      "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz",
+      "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz",
+      "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz",
+      "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz",
+      "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz",
+      "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-riscv64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz",
+      "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-riscv64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz",
+      "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz",
+      "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz",
+      "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz",
+      "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz",
+      "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.7.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz",
+      "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz",
+      "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz",
+      "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
+      "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/cors": {
+      "version": "2.8.19",
+      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.19.tgz",
+      "integrity": "sha512-mFNylyeyqN93lfe/9CSxOGREz8cpzAhH+E93xJ4xWQf62V8sQ/24reV2nyzUWM6H6Xji+GGHpkbLe7pVoUEskg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "25.6.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.6.0.tgz",
+      "integrity": "sha512-+qIYRKdNYJwY3vRCZMdJbPLJAtGjQBudzZzdzwQYkEPQd+PJGixUL5QfvCLDaULoLv+RhT3LDkwEfKaAkgSmNQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.19.0"
+      }
+    },
+    "node_modules/@types/ws": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/async": {
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+      "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lodash": "^4.17.14"
+      }
+    },
+    "node_modules/async-each-series": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/async-each-series/-/async-each-series-0.1.1.tgz",
+      "integrity": "sha512-p4jj6Fws4Iy2m0iCmI2am2ZNZCgbdgE+P8F/8csmn2vx7ixXrO2zGcuNsD46X5uZSVecmkEy/M06X2vG8KD6dQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/base64id": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz",
+      "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^4.5.0 || >= 5.9"
+      }
+    },
+    "node_modules/batch": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
+      "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.14.tgz",
+      "integrity": "sha512-MWPGfDxnyzKU7rNOW9SP/c50vi3xrmrua/+6hfPbCS2ABNWfx24vPidzvC7krjU/RTo235sV776ymlsMtGKj8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browser-sync": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/browser-sync/-/browser-sync-3.0.4.tgz",
+      "integrity": "sha512-mcYOIy4BW6sWSEnTSBjQwWsnbx2btZX78ajTTjdNfyC/EqQVcIe0nQR6894RNAMtvlfAnLaH9L2ka97zpvgenA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "browser-sync-client": "^3.0.4",
+        "browser-sync-ui": "^3.0.4",
+        "bs-recipes": "1.3.4",
+        "chalk": "4.1.2",
+        "chokidar": "^3.5.1",
+        "connect": "3.6.6",
+        "connect-history-api-fallback": "^1",
+        "dev-ip": "^1.0.1",
+        "easy-extender": "^2.3.4",
+        "eazy-logger": "^4.1.0",
+        "etag": "^1.8.1",
+        "fresh": "^0.5.2",
+        "fs-extra": "3.0.1",
+        "http-proxy": "^1.18.1",
+        "immutable": "^3",
+        "micromatch": "^4.0.8",
+        "opn": "5.3.0",
+        "portscanner": "2.2.0",
+        "raw-body": "^2.3.2",
+        "resp-modifier": "6.0.2",
+        "rx": "4.1.0",
+        "send": "^0.19.0",
+        "serve-index": "^1.9.1",
+        "serve-static": "^1.16.2",
+        "server-destroy": "1.0.1",
+        "socket.io": "^4.4.1",
+        "ua-parser-js": "^1.0.33",
+        "yargs": "^17.3.1"
+      },
+      "bin": {
+        "browser-sync": "dist/bin.js"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
+      }
+    },
+    "node_modules/browser-sync-client": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/browser-sync-client/-/browser-sync-client-3.0.4.tgz",
+      "integrity": "sha512-+ew5ubXzGRKVjquBL3u6najS40TG7GxCdyBll0qSRc/n+JRV9gb/yDdRL1IAgRHqjnJTdqeBKKIQabjvjRSYRQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "etag": "1.8.1",
+        "fresh": "0.5.2",
+        "mitt": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/browser-sync-ui": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/browser-sync-ui/-/browser-sync-ui-3.0.4.tgz",
+      "integrity": "sha512-5Po3YARCZ/8yQHFzvrSjn8+hBUF7ZWac39SHsy8Tls+7tE62iq6pYWxpVU6aOOMAGD21RwFQhQeqmJPf70kHEQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "async-each-series": "0.1.1",
+        "chalk": "4.1.2",
+        "connect-history-api-fallback": "^1",
+        "immutable": "^3",
+        "server-destroy": "1.0.1",
+        "socket.io-client": "^4.4.1",
+        "stream-throttle": "^0.1.3"
+      }
+    },
+    "node_modules/bs-recipes": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/bs-recipes/-/bs-recipes-1.3.4.tgz",
+      "integrity": "sha512-BXvDkqhDNxXEjeGM8LFkSbR+jzmP/CYpCiVKYn+soB1dDldeU15EBNDkwVXndKuX35wnNUaPd0qSoQEAkmQtMw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/connect": {
+      "version": "3.6.6",
+      "resolved": "https://registry.npmjs.org/connect/-/connect-3.6.6.tgz",
+      "integrity": "sha512-OO7axMmPpu/2XuX1+2Yrg0ddju31B6xLZMWkJ5rYBu4YRmRVlOjvlY6kw2FJKiAzyxGwnrDUAG4s1Pf0sbBMCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "2.6.9",
+        "finalhandler": "1.1.0",
+        "parseurl": "~1.3.2",
+        "utils-merge": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/connect-history-api-fallback": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
+      "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/core-js": {
+      "version": "3.49.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.49.0.tgz",
+      "integrity": "sha512-es1U2+YTtzpwkxVLwAFdSpaIMyQaq0PBgm3YD1W3Qpsn1NAmO3KSgZfu+oGSWVu6NvLHoHCV/aYcsE5wiB7ALg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
+    "node_modules/cors": {
+      "version": "2.8.6",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.6.tgz",
+      "integrity": "sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/custom-event-polyfill": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz",
+      "integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==",
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/destroy": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dev-ip": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dev-ip/-/dev-ip-1.0.1.tgz",
+      "integrity": "sha512-LmVkry/oDShEgSZPNgqCIp2/TlqtExeGmymru3uCELnfyjY11IzpAproLYs+1X88fXO6DBoYP3ul2Xo2yz2j6A==",
+      "dev": true,
+      "bin": {
+        "dev-ip": "lib/dev-ip.js"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/easy-extender": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/easy-extender/-/easy-extender-2.3.4.tgz",
+      "integrity": "sha512-8cAwm6md1YTiPpOvDULYJL4ZS6WfM5/cTeVVh4JsvyYZAoqlRVUpHL9Gr5Fy7HA6xcSZicUia3DeAgO3Us8E+Q==",
+      "dev": true,
+      "dependencies": {
+        "lodash": "^4.17.10"
+      },
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/eazy-logger": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/eazy-logger/-/eazy-logger-4.1.0.tgz",
+      "integrity": "sha512-+mn7lRm+Zf1UT/YaH8WXtpU6PIV2iOjzP6jgKoiaq/VNrjYKp+OHZGe2znaLgDeFkw8cL9ffuaUm+nNnzcYyGw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "4.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/engine.io": {
+      "version": "6.6.6",
+      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.6.6.tgz",
+      "integrity": "sha512-U2SN0w3OpjFRVlrc17E6TMDmH58Xl9rai1MblNjAdwWp07Kk+llmzX0hjDpQdrDGzwmvOtgM5yI+meYX6iZ2xA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/cors": "^2.8.12",
+        "@types/node": ">=10.0.0",
+        "@types/ws": "^8.5.12",
+        "accepts": "~1.3.4",
+        "base64id": "2.0.0",
+        "cookie": "~0.7.2",
+        "cors": "~2.8.5",
+        "debug": "~4.4.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.18.3"
+      },
+      "engines": {
+        "node": ">=10.2.0"
+      }
+    },
+    "node_modules/engine.io-client": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.4.tgz",
+      "integrity": "sha512-+kjUJnZGwzewFDw951CDWcwj35vMNf2fcj7xQWOctq1F2i1jkDdVvdFG9kM/BEChymCH36KgjnW0NsL58JYRxw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.4.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.18.3",
+        "xmlhttprequest-ssl": "~2.1.1"
+      }
+    },
+    "node_modules/engine.io-client/node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/engine.io-client/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
+      "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/engine.io/node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/engine.io/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/finalhandler": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.0.tgz",
+      "integrity": "sha512-ejnvM9ZXYzp6PUPUyQBMBf0Co5VX2gr5H2VQe2Ui2jWXNlxv+PYZo8wpAymJNJdLsG1R4p+M4aynF8KuoUEwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.1",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.2",
+        "statuses": "~1.3.1",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
+      "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fs-extra": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-3.0.1.tgz",
+      "integrity": "sha512-V3Z3WZWVUYd8hoCL5xfXJCaHWYzmtwW5XWYSlLgERi8PWd8bx1kUHUk8L1BT57e49oKnDDD180mjfrHc1yA9rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.1.2",
+        "jsonfile": "^3.0.0",
+        "universalify": "^0.1.0"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
+      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "depd": "~2.0.0",
+        "inherits": "~2.0.4",
+        "setprototypeof": "~1.2.0",
+        "statuses": "~2.0.2",
+        "toidentifier": "~1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/http-errors/node_modules/statuses": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/http-proxy": {
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eventemitter3": "^4.0.0",
+        "follow-redirects": "^1.0.0",
+        "requires-port": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/immutable": {
+      "version": "3.8.3",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.8.3.tgz",
+      "integrity": "sha512-AUY/VyX0E5XlibOmWt10uabJzam1zlYjwiEgQSDc5+UIkFNaF9WM0JxXKaNMGf+F/ffUF+7kRKXM9A7C0xXqMg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-number-like": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/is-number-like/-/is-number-like-1.0.8.tgz",
+      "integrity": "sha512-6rZi3ezCyFcn5L71ywzz2bS5b2Igl1En3eTlZlvKjpz1n3IZLAYMbKYAIQgFmEu0GENg92ziU/faEOA/aixjbA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "lodash.isfinite": "^3.3.2"
+      }
+    },
+    "node_modules/is-wsl": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
+      "integrity": "sha512-gfygJYZ2gLTDlmbWMI0CE2MwnFzSN/2SZfkMlItC4K/JBlsWVDB0bO6XhqcY13YXE7iMcAJnzTCJjPiTeJJ0Mw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/jsonfile": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-3.0.1.tgz",
+      "integrity": "sha512-oBko6ZHlubVB5mRFkur5vgYR1UyqX+S6Y/oCfLhqNdcc2fYFlDpIoNc7AfKS1KOGcnNAkvsr0grLck9ANM815w==",
+      "dev": true,
+      "license": "MIT",
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/limiter": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/limiter/-/limiter-1.1.5.tgz",
+      "integrity": "sha512-FWWMIEOxz3GwUI4Ts/IvgVy6LPvoMPgjMdQ185nN6psJyBJ4yOpzqm695/h5umdLJg2vW3GR5iG11MAkR2AzJA==",
+      "dev": true
+    },
+    "node_modules/loadjs": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/loadjs/-/loadjs-4.3.0.tgz",
+      "integrity": "sha512-vNX4ZZLJBeDEOBvdr2v/F+0aN5oMuPu7JTqrMwp+DtgK+AryOlpy6Xtm2/HpNr+azEa828oQjOtWsB6iDtSfSQ==",
+      "license": "MIT"
+    },
+    "node_modules/lodash": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
+      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.isfinite": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/lodash.isfinite/-/lodash.isfinite-3.3.2.tgz",
+      "integrity": "sha512-7FGG40uhC8Mm633uKW1r58aElFlBlxCrg9JfSi3P6aYiWmfiWF0PgMd86ZUsxE5GwWPdHoS2+48bwTh2VPkIQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/mitt": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-1.2.0.tgz",
+      "integrity": "sha512-r6lj77KlwqLhIUku9UWYes7KJtsczvolZkzp8hbaDPPaE24OmWl5s539Mytlj22siEQKosZ26qCBgda2PKwoJw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/on-finished": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/opn": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/opn/-/opn-5.3.0.tgz",
+      "integrity": "sha512-bYJHo/LOmoTd+pfiYhfZDnf9zekVJrY+cnS2a5F2x+w5ppvTqObojTP7WiFG+kVZs9Inw+qQ/lw7TroWwhdd2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-wsl": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/plyr": {
+      "version": "3.8.4",
+      "resolved": "https://registry.npmjs.org/plyr/-/plyr-3.8.4.tgz",
+      "integrity": "sha512-DrzLbK9Wol3zeiuZCleD9aUOl0KAaBHR9H6WVVVYPZ4Ya+LYxUFTgSF1jooHcMQCv96Ws96wCaZzIoP3bES8pQ==",
+      "license": "MIT",
+      "dependencies": {
+        "core-js": "^3.45.1",
+        "custom-event-polyfill": "^1.0.7",
+        "loadjs": "^4.3.0",
+        "rangetouch": "^2.0.1",
+        "url-polyfill": "^1.1.13"
+      }
+    },
+    "node_modules/portscanner": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/portscanner/-/portscanner-2.2.0.tgz",
+      "integrity": "sha512-IFroCz/59Lqa2uBvzK3bKDbDDIEaAY8XJ1jFxcLWTqosrsc32//P4VuSB2vZXoHiHqOmx8B5L5hnKOxL/7FlPw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "async": "^2.6.0",
+        "is-number-like": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=0.4",
+        "npm": ">=1.0.0"
+      }
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/rangetouch": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/rangetouch/-/rangetouch-2.0.1.tgz",
+      "integrity": "sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA==",
+      "license": "MIT"
+    },
+    "node_modules/raw-body": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.3.tgz",
+      "integrity": "sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "~3.1.2",
+        "http-errors": "~2.0.1",
+        "iconv-lite": "~0.4.24",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/resp-modifier": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/resp-modifier/-/resp-modifier-6.0.2.tgz",
+      "integrity": "sha512-U1+0kWC/+4ncRFYqQWTx/3qkfE6a4B/h3XXgmXypfa0SPZ3t7cbbaFk297PjQS/yov24R18h6OZe6iZwj3NSLw==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^2.2.0",
+        "minimatch": "^3.0.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/rx": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/rx/-/rx-4.1.0.tgz",
+      "integrity": "sha512-CiaiuN6gapkdl+cZUr67W6I8jquN4lkak3vtIsIWCl4XIPP8ffsoyN6/+PuGXnQy8Cu8W2y9Xxh31Rq4M6wUug==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/send": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.19.2.tgz",
+      "integrity": "sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "~0.5.2",
+        "http-errors": "~2.0.1",
+        "mime": "1.6.0",
+        "ms": "2.1.3",
+        "on-finished": "~2.4.1",
+        "range-parser": "~1.2.1",
+        "statuses": "~2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/send/node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/send/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/send/node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/send/node_modules/statuses": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/serve-index": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.2.tgz",
+      "integrity": "sha512-KDj11HScOaLmrPxl70KYNW1PksP4Nb/CLL2yvC+Qd2kHMPEEpfc4Re2e4FOay+bC/+XQl/7zAcWON3JVo5v3KQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "~1.3.8",
+        "batch": "0.6.1",
+        "debug": "2.6.9",
+        "escape-html": "~1.0.3",
+        "http-errors": "~1.8.0",
+        "mime-types": "~2.1.35",
+        "parseurl": "~1.3.3"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/serve-index/node_modules/depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serve-index/node_modules/http-errors": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz",
+      "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": ">= 1.5.0 < 2",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serve-index/node_modules/statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serve-static": {
+      "version": "1.16.3",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.3.tgz",
+      "integrity": "sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "~0.19.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/serve-static/node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/server-destroy": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/server-destroy/-/server-destroy-1.0.1.tgz",
+      "integrity": "sha512-rb+9B5YBIEzYcD6x2VKidaa+cqYBJQKnU4oe4E3ANwRRN56yk/ua1YCJT1n21NTS8w6CcOclAKNP3PhdCXKYtQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/sharp": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
+      "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@img/colour": "^1.0.0",
+        "detect-libc": "^2.1.2",
+        "semver": "^7.7.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.34.5",
+        "@img/sharp-darwin-x64": "0.34.5",
+        "@img/sharp-libvips-darwin-arm64": "1.2.4",
+        "@img/sharp-libvips-darwin-x64": "1.2.4",
+        "@img/sharp-libvips-linux-arm": "1.2.4",
+        "@img/sharp-libvips-linux-arm64": "1.2.4",
+        "@img/sharp-libvips-linux-ppc64": "1.2.4",
+        "@img/sharp-libvips-linux-riscv64": "1.2.4",
+        "@img/sharp-libvips-linux-s390x": "1.2.4",
+        "@img/sharp-libvips-linux-x64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4",
+        "@img/sharp-linux-arm": "0.34.5",
+        "@img/sharp-linux-arm64": "0.34.5",
+        "@img/sharp-linux-ppc64": "0.34.5",
+        "@img/sharp-linux-riscv64": "0.34.5",
+        "@img/sharp-linux-s390x": "0.34.5",
+        "@img/sharp-linux-x64": "0.34.5",
+        "@img/sharp-linuxmusl-arm64": "0.34.5",
+        "@img/sharp-linuxmusl-x64": "0.34.5",
+        "@img/sharp-wasm32": "0.34.5",
+        "@img/sharp-win32-arm64": "0.34.5",
+        "@img/sharp-win32-ia32": "0.34.5",
+        "@img/sharp-win32-x64": "0.34.5"
+      }
+    },
+    "node_modules/socket.io": {
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.8.3.tgz",
+      "integrity": "sha512-2Dd78bqzzjE6KPkD5fHZmDAKRNe3J15q+YHDrIsy9WEkqttc7GY+kT9OBLSMaPbQaEd0x1BjcmtMtXkfpc+T5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "~1.3.4",
+        "base64id": "~2.0.0",
+        "cors": "~2.8.5",
+        "debug": "~4.4.1",
+        "engine.io": "~6.6.0",
+        "socket.io-adapter": "~2.5.2",
+        "socket.io-parser": "~4.2.4"
+      },
+      "engines": {
+        "node": ">=10.2.0"
+      }
+    },
+    "node_modules/socket.io-adapter": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.5.6.tgz",
+      "integrity": "sha512-DkkO/dz7MGln0dHn5bmN3pPy+JmywNICWrJqVWiVOyvXjWQFIv9c2h24JrQLLFJ2aQVQf/Cvl1vblnd4r2apLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "~4.4.1",
+        "ws": "~8.18.3"
+      }
+    },
+    "node_modules/socket.io-adapter/node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/socket.io-adapter/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/socket.io-client": {
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.3.tgz",
+      "integrity": "sha512-uP0bpjWrjQmUt5DTHq9RuoCBdFJF10cdX9X+a368j/Ft0wmaVgxlrjvK3kjvgCODOMMOz9lcaRzxmso0bTWZ/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.4.1",
+        "engine.io-client": "~6.6.1",
+        "socket.io-parser": "~4.2.4"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-client/node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/socket.io-client/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.6.tgz",
+      "integrity": "sha512-asJqbVBDsBCJx0pTqw3WfesSY0iRX+2xzWEWzrpcH7L6fLzrhyF8WPI8UaeM4YCuDfpwA/cgsdugMsmtz8EJeg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.4.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser/node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/socket.io-parser/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/socket.io/node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/socket.io/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/statuses": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.3.1.tgz",
+      "integrity": "sha512-wuTCPGlJONk/a1kqZ4fQM2+908lC7fa7nPYpTC1EhnvqLX/IICbeP1OZGDtA374trpSq68YubKUMo8oRhN46yg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/stream-throttle": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/stream-throttle/-/stream-throttle-0.1.3.tgz",
+      "integrity": "sha512-889+B9vN9dq7/vLbGyuHeZ6/ctf5sNuGWsDy89uNxkFTAgzy0eK7+w5fL3KLNRTkLle7EgZGvHUphZW0Q26MnQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "commander": "^2.2.0",
+        "limiter": "^1.0.5"
+      },
+      "bin": {
+        "throttleproxy": "bin/throttleproxy.js"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD",
+      "optional": true
+    },
+    "node_modules/ua-parser-js": {
+      "version": "1.0.41",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.41.tgz",
+      "integrity": "sha512-LbBDqdIC5s8iROCUjMbW1f5dJQTEFB1+KO9ogbvlb3nm9n4YHa5p4KTvFPWvh2Hs8gZMBuiB1/8+pdfe/tDPug==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/ua-parser-js"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/faisalman"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/faisalman"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "ua-parser-js": "script/cli.js"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "7.19.2",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.19.2.tgz",
+      "integrity": "sha512-qYVnV5OEm2AW8cJMCpdV20CDyaN3g0AjDlOGf1OW4iaDEx8MwdtChUp4zu4H0VP3nDRF/8RKWH+IPp9uW0YGZg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/url-polyfill": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/url-polyfill/-/url-polyfill-1.1.14.tgz",
+      "integrity": "sha512-p4f3TTAG6ADVF3mwbXw7hGw+QJyw5CnNGvYh5fCuQQZIiuKUswqcznyV3pGDP9j0TSmC4UvRKm8kl1QsX1diiQ==",
+      "license": "MIT"
+    },
+    "node_modules/utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/ws": {
+      "version": "8.18.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
+      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/xmlhttprequest-ssl": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz",
+      "integrity": "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..a86791a
--- /dev/null
+++ b/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "my-site",
+  "private": true,
+  "scripts": {
+    "vendor:copy": "node scripts/copy-vendor.mjs",
+    "build:pages": "node scripts/build-pages.mjs",
+    "build": "npm run vendor:copy && npm run build:pages",
+    "serve": "node scripts/serve-dev.mjs",
+    "serve:static": "browser-sync start --server \"public\" --files \"public/**/*\" --no-notify --no-open --no-ghost-mode --port 4175 --ui-port 4176",
+    "convert-videos": "node scripts/convert-videos.mjs",
+    "optimize-images": "node scripts/optimize-images.mjs",
+    "deploy:vps": "node scripts/deploy-vps.mjs",
+    "deploy": "npm run deploy:vps && npm run sync-gitverse",
+    "sync-gitverse": "node scripts/sync-gitverse.mjs"
+  },
+  "devDependencies": {
+    "@fontsource-variable/geologica": "^5.2.8",
+    "@fontsource/alice": "^5.2.8",
+    "@fontsource/merriweather": "^5.2.11",
+    "@fontsource/pt-mono": "^5.2.8",
+    "@fontsource/pt-sans": "^5.2.8",
+    "@fontsource/source-code-pro": "^5.2.7",
+    "browser-sync": "^3.0.4",
+    "sharp": "^0.34.0"
+  },
+  "dependencies": {
+    "plyr": "^3.8.4"
+  }
+}
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..b0fba3e
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,13 @@
+{
+  "model": "black-forest-labs/flux.2-klein-4b",
+  "messages": [
+    {
+      "role": "user",
+      "content": "Минималистичный AI-промпт для портретов в стиле high-fashion. Мягкий студийный свет, чистый фон и акцент на естественной красоте. Такой визуал идеально подходит для тренировки моделей освещения и теста фотореализма. Подходит для: fashion-портретов, нейрофотосессий, коммерческих стоков. Стиль: минимализм, чистая палитра, editorial precision. 👉 Узнай больше AI-идей и вдохновляющих промптов в моём телеграм-канале «Нейропольза» — переходи по ссылке. Minimalist AI portrait prompt with diffused studio light and fashion-magazine aesthetics. Perfect for clean editorial visuals and AI-photo training."
+    }
+  ],
+  "modalities": ["image"],
+  "image_config": { "aspect_ratio": "9:16" },
+  "_provider": "PLZ",
+  "_cost": 1
+}
diff --git a/public/README.md b/public/README.md
new file mode 100644
index 0000000..e1c4d40
--- /dev/null
+++ b/public/README.md
@@ -0,0 +1,33 @@
+# Николай Мамадаев
+
+Lead Product Designer
+
+## Контакты
+
+- Telegram: [t.me/mamadaevv](https://t.me/mamadaevv)
+- VK: [vk.com/mamadaevv](https://vk.com/mamadaevv)
+
+## Опыт работы
+
+Суммарно более 10 лет
+
+1. [Primo RPA](https://primo-rpa.ru/) (02.2023 – 11.2025)
+2. [Icons8](https://icons8.com/) (07.2022 – 01.2023)
+3. [MANU Video Game Maker](https://manu.co/) (01.2019 – 12.2021)
+4. [Aegees](https://aegees.com/) (10.2017 – 12.2018)
+5. [Orion Innovation](https://orioninc.com/) (07.2016 – 10.2017)
+6. [SpaceshipApps](https://www.spaceshipapps.com/) (06.2015 – 06.2016)
+
+## Навыки
+
+Figma и другие редакторы, Отрисовка UI по гайдлайнам,
+Дизайн-системы, Прототипирование, User Flows, UX-исследования,
+Юзабилити-тестирование, JTBD, CJM, Продуктовое мышление,
+Приоритизация, Аналитика продуктовых метрик, Менторство,
+AI-инструменты, HTML/CSS/JS, Вайбкодинг, Автоматизации, n8n
+
+## Активность
+
+- Telegram: [t.me/designnotpizza](https://www.threads.com/@nik.mamadaev)
+- Figma: [figma.com/@mamadaevv](https://www.figma.com/@mamadaevv)
+- GitHub: [github.com/mamadaevv](https://github.com/mamadaevv)
\ No newline at end of file
diff --git a/public/assets/README.md b/public/assets/README.md
new file mode 100644
index 0000000..92f4061
--- /dev/null
+++ b/public/assets/README.md
@@ -0,0 +1,15 @@
+# Статические ассеты (`public/assets`)
+
+Картинки, видео и прочие файлы для сайта лежат **здесь**, в подпапках по проекту (`template-elements-demo/`, `ai-platform-primo-rpa/`, `shared/icons/` и т.д.).
+
+Сборка страниц (`npm run build:pages`) **не копирует** ассеты из других каталогов — только HTML из `src/pages` + partials. Этот каталог поддерживается вручную (или отдельными скриптами вроде оптимизации изображений).
+
+## WebP из PNG/JPEG
+
+Из корня репозитория:
+
+```bash
+npm run optimize-images -- public/assets/имя-папки
+```
+
+Подробности: `docs/image-optimization.md`.
diff --git a/public/assets/ai-platform-primo-rpa/.gitkeep b/public/assets/ai-platform-primo-rpa/.gitkeep
new file mode 100644
index 0000000..d3f5a12
--- /dev/null
+++ b/public/assets/ai-platform-primo-rpa/.gitkeep
@@ -0,0 +1 @@
+
diff --git a/public/assets/ai-platform-primo-rpa/cover.png b/public/assets/ai-platform-primo-rpa/cover.png
new file mode 100644
index 0000000..0214606
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/cover.png differ
diff --git a/public/assets/ai-platform-primo-rpa/cover.webp b/public/assets/ai-platform-primo-rpa/cover.webp
new file mode 100644
index 0000000..fe1e96f
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/cover.webp differ
diff --git a/public/assets/ai-platform-primo-rpa/dataset-editor-old.png b/public/assets/ai-platform-primo-rpa/dataset-editor-old.png
new file mode 100644
index 0000000..59b14fb
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/dataset-editor-old.png differ
diff --git a/public/assets/ai-platform-primo-rpa/dataset-editor-old.webp b/public/assets/ai-platform-primo-rpa/dataset-editor-old.webp
new file mode 100644
index 0000000..5255e75
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/dataset-editor-old.webp differ
diff --git a/public/assets/ai-platform-primo-rpa/dataset-editor-small-screen.png b/public/assets/ai-platform-primo-rpa/dataset-editor-small-screen.png
new file mode 100644
index 0000000..b3a6cdf
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/dataset-editor-small-screen.png differ
diff --git a/public/assets/ai-platform-primo-rpa/dataset-editor-small-screen.webp b/public/assets/ai-platform-primo-rpa/dataset-editor-small-screen.webp
new file mode 100644
index 0000000..725a1b5
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/dataset-editor-small-screen.webp differ
diff --git a/public/assets/ai-platform-primo-rpa/dataset-editor.png b/public/assets/ai-platform-primo-rpa/dataset-editor.png
new file mode 100644
index 0000000..65eab57
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/dataset-editor.png differ
diff --git a/public/assets/ai-platform-primo-rpa/dataset-editor.webp b/public/assets/ai-platform-primo-rpa/dataset-editor.webp
new file mode 100644
index 0000000..3befdfc
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/dataset-editor.webp differ
diff --git a/public/assets/ai-platform-primo-rpa/dataset-lerning.png b/public/assets/ai-platform-primo-rpa/dataset-lerning.png
new file mode 100644
index 0000000..be17b9f
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/dataset-lerning.png differ
diff --git a/public/assets/ai-platform-primo-rpa/dataset-lerning.webp b/public/assets/ai-platform-primo-rpa/dataset-lerning.webp
new file mode 100644
index 0000000..ea7ed17
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/dataset-lerning.webp differ
diff --git a/public/assets/ai-platform-primo-rpa/dataset-quality.png b/public/assets/ai-platform-primo-rpa/dataset-quality.png
new file mode 100644
index 0000000..a261db6
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/dataset-quality.png differ
diff --git a/public/assets/ai-platform-primo-rpa/dataset-quality.webp b/public/assets/ai-platform-primo-rpa/dataset-quality.webp
new file mode 100644
index 0000000..24511e2
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/dataset-quality.webp differ
diff --git a/public/assets/ai-platform-primo-rpa/dataset_editor-main_toolbar.png b/public/assets/ai-platform-primo-rpa/dataset_editor-main_toolbar.png
new file mode 100644
index 0000000..ab138e3
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/dataset_editor-main_toolbar.png differ
diff --git a/public/assets/ai-platform-primo-rpa/dataset_editor-main_toolbar.webp b/public/assets/ai-platform-primo-rpa/dataset_editor-main_toolbar.webp
new file mode 100644
index 0000000..625f7a4
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/dataset_editor-main_toolbar.webp differ
diff --git a/public/assets/ai-platform-primo-rpa/dataset_editor-wireframe-default_mode.png b/public/assets/ai-platform-primo-rpa/dataset_editor-wireframe-default_mode.png
new file mode 100644
index 0000000..701b921
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/dataset_editor-wireframe-default_mode.png differ
diff --git a/public/assets/ai-platform-primo-rpa/dataset_editor-wireframe-default_mode.webp b/public/assets/ai-platform-primo-rpa/dataset_editor-wireframe-default_mode.webp
new file mode 100644
index 0000000..0c691b3
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/dataset_editor-wireframe-default_mode.webp differ
diff --git a/public/assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode-both_panels.png b/public/assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode-both_panels.png
new file mode 100644
index 0000000..42a4896
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode-both_panels.png differ
diff --git a/public/assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode-both_panels.webp b/public/assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode-both_panels.webp
new file mode 100644
index 0000000..93f962a
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode-both_panels.webp differ
diff --git a/public/assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode-left_panel.png b/public/assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode-left_panel.png
new file mode 100644
index 0000000..270e6f7
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode-left_panel.png differ
diff --git a/public/assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode-left_panel.webp b/public/assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode-left_panel.webp
new file mode 100644
index 0000000..89cb9e1
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode-left_panel.webp differ
diff --git a/public/assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode-right_panel.png b/public/assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode-right_panel.png
new file mode 100644
index 0000000..a3a2813
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode-right_panel.png differ
diff --git a/public/assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode-right_panel.webp b/public/assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode-right_panel.webp
new file mode 100644
index 0000000..ddbbe9c
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode-right_panel.webp differ
diff --git a/public/assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode.png b/public/assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode.png
new file mode 100644
index 0000000..1d5ac0f
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode.png differ
diff --git a/public/assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode.webp b/public/assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode.webp
new file mode 100644
index 0000000..e538168
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode.webp differ
diff --git a/public/assets/ai-platform-primo-rpa/fields-maping.mp4 b/public/assets/ai-platform-primo-rpa/fields-maping.mp4
new file mode 100644
index 0000000..a974abf
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/fields-maping.mp4 differ
diff --git a/public/assets/ai-platform-primo-rpa/fields-maping.webm b/public/assets/ai-platform-primo-rpa/fields-maping.webm
new file mode 100644
index 0000000..cf3b43b
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/fields-maping.webm differ
diff --git a/public/assets/ai-platform-primo-rpa/fields-maping.webp b/public/assets/ai-platform-primo-rpa/fields-maping.webp
new file mode 100644
index 0000000..29847b0
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/fields-maping.webp differ
diff --git a/public/assets/ai-platform-primo-rpa/full-screen-modal-import.png b/public/assets/ai-platform-primo-rpa/full-screen-modal-import.png
new file mode 100644
index 0000000..a021858
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/full-screen-modal-import.png differ
diff --git a/public/assets/ai-platform-primo-rpa/full-screen-modal-import.webp b/public/assets/ai-platform-primo-rpa/full-screen-modal-import.webp
new file mode 100644
index 0000000..1bfe2a2
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/full-screen-modal-import.webp differ
diff --git a/public/assets/ai-platform-primo-rpa/full-screen-mode-with-panels.png b/public/assets/ai-platform-primo-rpa/full-screen-mode-with-panels.png
new file mode 100644
index 0000000..ea95718
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/full-screen-mode-with-panels.png differ
diff --git a/public/assets/ai-platform-primo-rpa/full-screen-mode-with-panels.webp b/public/assets/ai-platform-primo-rpa/full-screen-mode-with-panels.webp
new file mode 100644
index 0000000..330bb05
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/full-screen-mode-with-panels.webp differ
diff --git a/public/assets/ai-platform-primo-rpa/full-screen-mode-zen.png b/public/assets/ai-platform-primo-rpa/full-screen-mode-zen.png
new file mode 100644
index 0000000..511c93c
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/full-screen-mode-zen.png differ
diff --git a/public/assets/ai-platform-primo-rpa/full-screen-mode-zen.webp b/public/assets/ai-platform-primo-rpa/full-screen-mode-zen.webp
new file mode 100644
index 0000000..7eb4a3b
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/full-screen-mode-zen.webp differ
diff --git a/public/assets/ai-platform-primo-rpa/fullscreen_modal-import_dataset.png b/public/assets/ai-platform-primo-rpa/fullscreen_modal-import_dataset.png
new file mode 100644
index 0000000..a7d1719
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/fullscreen_modal-import_dataset.png differ
diff --git a/public/assets/ai-platform-primo-rpa/fullscreen_modal-import_dataset.webp b/public/assets/ai-platform-primo-rpa/fullscreen_modal-import_dataset.webp
new file mode 100644
index 0000000..e8c7896
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/fullscreen_modal-import_dataset.webp differ
diff --git a/public/assets/ai-platform-primo-rpa/fullscreen_modal-in_project-import_dataset.png b/public/assets/ai-platform-primo-rpa/fullscreen_modal-in_project-import_dataset.png
new file mode 100644
index 0000000..74f9c2e
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/fullscreen_modal-in_project-import_dataset.png differ
diff --git a/public/assets/ai-platform-primo-rpa/fullscreen_modal-in_project-import_dataset.webp b/public/assets/ai-platform-primo-rpa/fullscreen_modal-in_project-import_dataset.webp
new file mode 100644
index 0000000..0628b2c
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/fullscreen_modal-in_project-import_dataset.webp differ
diff --git a/public/assets/ai-platform-primo-rpa/in-project-inference-full.png b/public/assets/ai-platform-primo-rpa/in-project-inference-full.png
new file mode 100644
index 0000000..a2d86ea
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/in-project-inference-full.png differ
diff --git a/public/assets/ai-platform-primo-rpa/in-project-inference-full.webp b/public/assets/ai-platform-primo-rpa/in-project-inference-full.webp
new file mode 100644
index 0000000..c736c3e
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/in-project-inference-full.webp differ
diff --git a/public/assets/ai-platform-primo-rpa/in-project-inference-old.png b/public/assets/ai-platform-primo-rpa/in-project-inference-old.png
new file mode 100644
index 0000000..6c299b6
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/in-project-inference-old.png differ
diff --git a/public/assets/ai-platform-primo-rpa/in-project-inference-old.webp b/public/assets/ai-platform-primo-rpa/in-project-inference-old.webp
new file mode 100644
index 0000000..4d76954
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/in-project-inference-old.webp differ
diff --git a/public/assets/ai-platform-primo-rpa/in-project-inference.png b/public/assets/ai-platform-primo-rpa/in-project-inference.png
new file mode 100644
index 0000000..4aff677
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/in-project-inference.png differ
diff --git a/public/assets/ai-platform-primo-rpa/in-project-inference.webp b/public/assets/ai-platform-primo-rpa/in-project-inference.webp
new file mode 100644
index 0000000..735f54c
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/in-project-inference.webp differ
diff --git a/public/assets/ai-platform-primo-rpa/in_project-learn-card-learning_process.png b/public/assets/ai-platform-primo-rpa/in_project-learn-card-learning_process.png
new file mode 100644
index 0000000..2d7aed3
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/in_project-learn-card-learning_process.png differ
diff --git a/public/assets/ai-platform-primo-rpa/in_project-learn-card-learning_process.webp b/public/assets/ai-platform-primo-rpa/in_project-learn-card-learning_process.webp
new file mode 100644
index 0000000..b318545
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/in_project-learn-card-learning_process.webp differ
diff --git a/public/assets/ai-platform-primo-rpa/in_project-learn-card-learning_process_wireframe.png b/public/assets/ai-platform-primo-rpa/in_project-learn-card-learning_process_wireframe.png
new file mode 100644
index 0000000..966faa8
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/in_project-learn-card-learning_process_wireframe.png differ
diff --git a/public/assets/ai-platform-primo-rpa/in_project-learn-card-learning_process_wireframe.webp b/public/assets/ai-platform-primo-rpa/in_project-learn-card-learning_process_wireframe.webp
new file mode 100644
index 0000000..47a2b39
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/in_project-learn-card-learning_process_wireframe.webp differ
diff --git a/public/assets/ai-platform-primo-rpa/in_project-learn-card-new.png b/public/assets/ai-platform-primo-rpa/in_project-learn-card-new.png
new file mode 100644
index 0000000..c21991d
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/in_project-learn-card-new.png differ
diff --git a/public/assets/ai-platform-primo-rpa/in_project-learn-card-new.webp b/public/assets/ai-platform-primo-rpa/in_project-learn-card-new.webp
new file mode 100644
index 0000000..2e1a98d
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/in_project-learn-card-new.webp differ
diff --git a/public/assets/ai-platform-primo-rpa/in_project-learn-card-сollapsed.png b/public/assets/ai-platform-primo-rpa/in_project-learn-card-сollapsed.png
new file mode 100644
index 0000000..4585de5
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/in_project-learn-card-сollapsed.png differ
diff --git a/public/assets/ai-platform-primo-rpa/in_project-learn-card-сollapsed.webp b/public/assets/ai-platform-primo-rpa/in_project-learn-card-сollapsed.webp
new file mode 100644
index 0000000..0c5836d
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/in_project-learn-card-сollapsed.webp differ
diff --git a/public/assets/ai-platform-primo-rpa/in_project-learn-overview.png b/public/assets/ai-platform-primo-rpa/in_project-learn-overview.png
new file mode 100644
index 0000000..ba5f65a
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/in_project-learn-overview.png differ
diff --git a/public/assets/ai-platform-primo-rpa/in_project-learn-overview.webp b/public/assets/ai-platform-primo-rpa/in_project-learn-overview.webp
new file mode 100644
index 0000000..4a23960
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/in_project-learn-overview.webp differ
diff --git a/public/assets/ai-platform-primo-rpa/main-new.png b/public/assets/ai-platform-primo-rpa/main-new.png
new file mode 100644
index 0000000..a253b20
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/main-new.png differ
diff --git a/public/assets/ai-platform-primo-rpa/main-new.webp b/public/assets/ai-platform-primo-rpa/main-new.webp
new file mode 100644
index 0000000..f358470
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/main-new.webp differ
diff --git a/public/assets/ai-platform-primo-rpa/main.png b/public/assets/ai-platform-primo-rpa/main.png
new file mode 100644
index 0000000..d0a0f30
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/main.png differ
diff --git a/public/assets/ai-platform-primo-rpa/main.webp b/public/assets/ai-platform-primo-rpa/main.webp
new file mode 100644
index 0000000..36a5a85
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/main.webp differ
diff --git a/public/assets/ai-platform-primo-rpa/nav-project-nlp.png b/public/assets/ai-platform-primo-rpa/nav-project-nlp.png
new file mode 100644
index 0000000..110f87d
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/nav-project-nlp.png differ
diff --git a/public/assets/ai-platform-primo-rpa/nav-project-nlp.webp b/public/assets/ai-platform-primo-rpa/nav-project-nlp.webp
new file mode 100644
index 0000000..b17c6eb
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/nav-project-nlp.webp differ
diff --git a/public/assets/ai-platform-primo-rpa/nav-project-ocr.png b/public/assets/ai-platform-primo-rpa/nav-project-ocr.png
new file mode 100644
index 0000000..b36e1ed
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/nav-project-ocr.png differ
diff --git a/public/assets/ai-platform-primo-rpa/nav-project-ocr.webp b/public/assets/ai-platform-primo-rpa/nav-project-ocr.webp
new file mode 100644
index 0000000..85d77bc
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/nav-project-ocr.webp differ
diff --git a/public/assets/ai-platform-primo-rpa/nav-secondary-detail_view.png b/public/assets/ai-platform-primo-rpa/nav-secondary-detail_view.png
new file mode 100644
index 0000000..df12da2
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/nav-secondary-detail_view.png differ
diff --git a/public/assets/ai-platform-primo-rpa/nav-secondary-detail_view.webp b/public/assets/ai-platform-primo-rpa/nav-secondary-detail_view.webp
new file mode 100644
index 0000000..6af2fcf
Binary files /dev/null and b/public/assets/ai-platform-primo-rpa/nav-secondary-detail_view.webp differ
diff --git a/public/assets/favicon/android-chrome-192x192.png b/public/assets/favicon/android-chrome-192x192.png
new file mode 100644
index 0000000..126c116
Binary files /dev/null and b/public/assets/favicon/android-chrome-192x192.png differ
diff --git a/public/assets/favicon/android-chrome-512x512.png b/public/assets/favicon/android-chrome-512x512.png
new file mode 100644
index 0000000..7803132
Binary files /dev/null and b/public/assets/favicon/android-chrome-512x512.png differ
diff --git a/public/assets/favicon/apple-touch-icon.png b/public/assets/favicon/apple-touch-icon.png
new file mode 100644
index 0000000..87b63e0
Binary files /dev/null and b/public/assets/favicon/apple-touch-icon.png differ
diff --git a/public/assets/favicon/favicon-16x16.png b/public/assets/favicon/favicon-16x16.png
new file mode 100644
index 0000000..3fd0b4d
Binary files /dev/null and b/public/assets/favicon/favicon-16x16.png differ
diff --git a/public/assets/favicon/favicon-32x32.png b/public/assets/favicon/favicon-32x32.png
new file mode 100644
index 0000000..66f221d
Binary files /dev/null and b/public/assets/favicon/favicon-32x32.png differ
diff --git a/public/assets/favicon/favicon.ico b/public/assets/favicon/favicon.ico
new file mode 100644
index 0000000..035c82b
Binary files /dev/null and b/public/assets/favicon/favicon.ico differ
diff --git a/public/assets/favicon/favicon.png b/public/assets/favicon/favicon.png
new file mode 100644
index 0000000..4784a4d
Binary files /dev/null and b/public/assets/favicon/favicon.png differ
diff --git a/public/assets/favicon/favicon_bg.png b/public/assets/favicon/favicon_bg.png
new file mode 100644
index 0000000..1d58130
Binary files /dev/null and b/public/assets/favicon/favicon_bg.png differ
diff --git a/public/assets/favicon/site.webmanifest b/public/assets/favicon/site.webmanifest
new file mode 100644
index 0000000..45dc8a2
--- /dev/null
+++ b/public/assets/favicon/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
\ No newline at end of file
diff --git a/public/assets/fonts/files/alice-cyrillic-400-normal.woff2 b/public/assets/fonts/files/alice-cyrillic-400-normal.woff2
new file mode 100644
index 0000000..b91df2b
Binary files /dev/null and b/public/assets/fonts/files/alice-cyrillic-400-normal.woff2 differ
diff --git a/public/assets/fonts/files/alice-cyrillic-ext-400-normal.woff2 b/public/assets/fonts/files/alice-cyrillic-ext-400-normal.woff2
new file mode 100644
index 0000000..6c47d2e
Binary files /dev/null and b/public/assets/fonts/files/alice-cyrillic-ext-400-normal.woff2 differ
diff --git a/public/assets/fonts/files/alice-latin-400-normal.woff2 b/public/assets/fonts/files/alice-latin-400-normal.woff2
new file mode 100644
index 0000000..7117954
Binary files /dev/null and b/public/assets/fonts/files/alice-latin-400-normal.woff2 differ
diff --git a/public/assets/fonts/files/alice-latin-ext-400-normal.woff2 b/public/assets/fonts/files/alice-latin-ext-400-normal.woff2
new file mode 100644
index 0000000..ef3972e
Binary files /dev/null and b/public/assets/fonts/files/alice-latin-ext-400-normal.woff2 differ
diff --git a/public/assets/fonts/files/geologica-cyrillic-ext-wght-normal.woff2 b/public/assets/fonts/files/geologica-cyrillic-ext-wght-normal.woff2
new file mode 100644
index 0000000..2ab60d6
Binary files /dev/null and b/public/assets/fonts/files/geologica-cyrillic-ext-wght-normal.woff2 differ
diff --git a/public/assets/fonts/files/geologica-cyrillic-wght-normal.woff2 b/public/assets/fonts/files/geologica-cyrillic-wght-normal.woff2
new file mode 100644
index 0000000..1f536e8
Binary files /dev/null and b/public/assets/fonts/files/geologica-cyrillic-wght-normal.woff2 differ
diff --git a/public/assets/fonts/files/geologica-greek-wght-normal.woff2 b/public/assets/fonts/files/geologica-greek-wght-normal.woff2
new file mode 100644
index 0000000..278181b
Binary files /dev/null and b/public/assets/fonts/files/geologica-greek-wght-normal.woff2 differ
diff --git a/public/assets/fonts/files/geologica-latin-ext-wght-normal.woff2 b/public/assets/fonts/files/geologica-latin-ext-wght-normal.woff2
new file mode 100644
index 0000000..b5102c6
Binary files /dev/null and b/public/assets/fonts/files/geologica-latin-ext-wght-normal.woff2 differ
diff --git a/public/assets/fonts/files/geologica-latin-wght-normal.woff2 b/public/assets/fonts/files/geologica-latin-wght-normal.woff2
new file mode 100644
index 0000000..3cee620
Binary files /dev/null and b/public/assets/fonts/files/geologica-latin-wght-normal.woff2 differ
diff --git a/public/assets/fonts/files/geologica-vietnamese-wght-normal.woff2 b/public/assets/fonts/files/geologica-vietnamese-wght-normal.woff2
new file mode 100644
index 0000000..f9b5fda
Binary files /dev/null and b/public/assets/fonts/files/geologica-vietnamese-wght-normal.woff2 differ
diff --git a/public/assets/fonts/files/merriweather-cyrillic-400-normal.woff2 b/public/assets/fonts/files/merriweather-cyrillic-400-normal.woff2
new file mode 100644
index 0000000..fb285ef
Binary files /dev/null and b/public/assets/fonts/files/merriweather-cyrillic-400-normal.woff2 differ
diff --git a/public/assets/fonts/files/merriweather-cyrillic-700-normal.woff2 b/public/assets/fonts/files/merriweather-cyrillic-700-normal.woff2
new file mode 100644
index 0000000..d85e9d4
Binary files /dev/null and b/public/assets/fonts/files/merriweather-cyrillic-700-normal.woff2 differ
diff --git a/public/assets/fonts/files/merriweather-cyrillic-ext-400-normal.woff2 b/public/assets/fonts/files/merriweather-cyrillic-ext-400-normal.woff2
new file mode 100644
index 0000000..45f9788
Binary files /dev/null and b/public/assets/fonts/files/merriweather-cyrillic-ext-400-normal.woff2 differ
diff --git a/public/assets/fonts/files/merriweather-cyrillic-ext-700-normal.woff2 b/public/assets/fonts/files/merriweather-cyrillic-ext-700-normal.woff2
new file mode 100644
index 0000000..6dda291
Binary files /dev/null and b/public/assets/fonts/files/merriweather-cyrillic-ext-700-normal.woff2 differ
diff --git a/public/assets/fonts/files/merriweather-latin-400-normal.woff2 b/public/assets/fonts/files/merriweather-latin-400-normal.woff2
new file mode 100644
index 0000000..824753f
Binary files /dev/null and b/public/assets/fonts/files/merriweather-latin-400-normal.woff2 differ
diff --git a/public/assets/fonts/files/merriweather-latin-700-normal.woff2 b/public/assets/fonts/files/merriweather-latin-700-normal.woff2
new file mode 100644
index 0000000..1c1896b
Binary files /dev/null and b/public/assets/fonts/files/merriweather-latin-700-normal.woff2 differ
diff --git a/public/assets/fonts/files/merriweather-latin-ext-400-normal.woff2 b/public/assets/fonts/files/merriweather-latin-ext-400-normal.woff2
new file mode 100644
index 0000000..ac00daf
Binary files /dev/null and b/public/assets/fonts/files/merriweather-latin-ext-400-normal.woff2 differ
diff --git a/public/assets/fonts/files/merriweather-latin-ext-700-normal.woff2 b/public/assets/fonts/files/merriweather-latin-ext-700-normal.woff2
new file mode 100644
index 0000000..35b3328
Binary files /dev/null and b/public/assets/fonts/files/merriweather-latin-ext-700-normal.woff2 differ
diff --git a/public/assets/fonts/files/merriweather-vietnamese-400-normal.woff2 b/public/assets/fonts/files/merriweather-vietnamese-400-normal.woff2
new file mode 100644
index 0000000..16d5b3a
Binary files /dev/null and b/public/assets/fonts/files/merriweather-vietnamese-400-normal.woff2 differ
diff --git a/public/assets/fonts/files/merriweather-vietnamese-700-normal.woff2 b/public/assets/fonts/files/merriweather-vietnamese-700-normal.woff2
new file mode 100644
index 0000000..3d28a23
Binary files /dev/null and b/public/assets/fonts/files/merriweather-vietnamese-700-normal.woff2 differ
diff --git a/public/assets/fonts/files/pt-mono-cyrillic-400-normal.woff2 b/public/assets/fonts/files/pt-mono-cyrillic-400-normal.woff2
new file mode 100644
index 0000000..8a3dd48
Binary files /dev/null and b/public/assets/fonts/files/pt-mono-cyrillic-400-normal.woff2 differ
diff --git a/public/assets/fonts/files/pt-mono-cyrillic-ext-400-normal.woff2 b/public/assets/fonts/files/pt-mono-cyrillic-ext-400-normal.woff2
new file mode 100644
index 0000000..22b4302
Binary files /dev/null and b/public/assets/fonts/files/pt-mono-cyrillic-ext-400-normal.woff2 differ
diff --git a/public/assets/fonts/files/pt-mono-latin-400-normal.woff2 b/public/assets/fonts/files/pt-mono-latin-400-normal.woff2
new file mode 100644
index 0000000..0df8040
Binary files /dev/null and b/public/assets/fonts/files/pt-mono-latin-400-normal.woff2 differ
diff --git a/public/assets/fonts/files/pt-mono-latin-ext-400-normal.woff2 b/public/assets/fonts/files/pt-mono-latin-ext-400-normal.woff2
new file mode 100644
index 0000000..3241e49
Binary files /dev/null and b/public/assets/fonts/files/pt-mono-latin-ext-400-normal.woff2 differ
diff --git a/public/assets/fonts/files/pt-sans-cyrillic-400-normal.woff2 b/public/assets/fonts/files/pt-sans-cyrillic-400-normal.woff2
new file mode 100644
index 0000000..f4f36e7
Binary files /dev/null and b/public/assets/fonts/files/pt-sans-cyrillic-400-normal.woff2 differ
diff --git a/public/assets/fonts/files/pt-sans-cyrillic-700-normal.woff2 b/public/assets/fonts/files/pt-sans-cyrillic-700-normal.woff2
new file mode 100644
index 0000000..d44c7d1
Binary files /dev/null and b/public/assets/fonts/files/pt-sans-cyrillic-700-normal.woff2 differ
diff --git a/public/assets/fonts/files/pt-sans-cyrillic-ext-400-normal.woff2 b/public/assets/fonts/files/pt-sans-cyrillic-ext-400-normal.woff2
new file mode 100644
index 0000000..c9f2b3d
Binary files /dev/null and b/public/assets/fonts/files/pt-sans-cyrillic-ext-400-normal.woff2 differ
diff --git a/public/assets/fonts/files/pt-sans-cyrillic-ext-700-normal.woff2 b/public/assets/fonts/files/pt-sans-cyrillic-ext-700-normal.woff2
new file mode 100644
index 0000000..5061d16
Binary files /dev/null and b/public/assets/fonts/files/pt-sans-cyrillic-ext-700-normal.woff2 differ
diff --git a/public/assets/fonts/files/pt-sans-latin-400-normal.woff2 b/public/assets/fonts/files/pt-sans-latin-400-normal.woff2
new file mode 100644
index 0000000..0a75bf9
Binary files /dev/null and b/public/assets/fonts/files/pt-sans-latin-400-normal.woff2 differ
diff --git a/public/assets/fonts/files/pt-sans-latin-700-normal.woff2 b/public/assets/fonts/files/pt-sans-latin-700-normal.woff2
new file mode 100644
index 0000000..b4bbe89
Binary files /dev/null and b/public/assets/fonts/files/pt-sans-latin-700-normal.woff2 differ
diff --git a/public/assets/fonts/files/pt-sans-latin-ext-400-normal.woff2 b/public/assets/fonts/files/pt-sans-latin-ext-400-normal.woff2
new file mode 100644
index 0000000..dd89766
Binary files /dev/null and b/public/assets/fonts/files/pt-sans-latin-ext-400-normal.woff2 differ
diff --git a/public/assets/fonts/files/pt-sans-latin-ext-700-normal.woff2 b/public/assets/fonts/files/pt-sans-latin-ext-700-normal.woff2
new file mode 100644
index 0000000..cfb77be
Binary files /dev/null and b/public/assets/fonts/files/pt-sans-latin-ext-700-normal.woff2 differ
diff --git a/public/assets/fonts/files/source-code-pro-cyrillic-400-normal.woff2 b/public/assets/fonts/files/source-code-pro-cyrillic-400-normal.woff2
new file mode 100644
index 0000000..9957e03
Binary files /dev/null and b/public/assets/fonts/files/source-code-pro-cyrillic-400-normal.woff2 differ
diff --git a/public/assets/fonts/files/source-code-pro-cyrillic-500-normal.woff2 b/public/assets/fonts/files/source-code-pro-cyrillic-500-normal.woff2
new file mode 100644
index 0000000..522acc9
Binary files /dev/null and b/public/assets/fonts/files/source-code-pro-cyrillic-500-normal.woff2 differ
diff --git a/public/assets/fonts/files/source-code-pro-cyrillic-600-normal.woff2 b/public/assets/fonts/files/source-code-pro-cyrillic-600-normal.woff2
new file mode 100644
index 0000000..52720bd
Binary files /dev/null and b/public/assets/fonts/files/source-code-pro-cyrillic-600-normal.woff2 differ
diff --git a/public/assets/fonts/files/source-code-pro-cyrillic-700-normal.woff2 b/public/assets/fonts/files/source-code-pro-cyrillic-700-normal.woff2
new file mode 100644
index 0000000..b8c4357
Binary files /dev/null and b/public/assets/fonts/files/source-code-pro-cyrillic-700-normal.woff2 differ
diff --git a/public/assets/fonts/files/source-code-pro-cyrillic-ext-400-normal.woff2 b/public/assets/fonts/files/source-code-pro-cyrillic-ext-400-normal.woff2
new file mode 100644
index 0000000..26158ef
Binary files /dev/null and b/public/assets/fonts/files/source-code-pro-cyrillic-ext-400-normal.woff2 differ
diff --git a/public/assets/fonts/files/source-code-pro-cyrillic-ext-500-normal.woff2 b/public/assets/fonts/files/source-code-pro-cyrillic-ext-500-normal.woff2
new file mode 100644
index 0000000..d99a6a0
Binary files /dev/null and b/public/assets/fonts/files/source-code-pro-cyrillic-ext-500-normal.woff2 differ
diff --git a/public/assets/fonts/files/source-code-pro-cyrillic-ext-600-normal.woff2 b/public/assets/fonts/files/source-code-pro-cyrillic-ext-600-normal.woff2
new file mode 100644
index 0000000..b4d2ac9
Binary files /dev/null and b/public/assets/fonts/files/source-code-pro-cyrillic-ext-600-normal.woff2 differ
diff --git a/public/assets/fonts/files/source-code-pro-cyrillic-ext-700-normal.woff2 b/public/assets/fonts/files/source-code-pro-cyrillic-ext-700-normal.woff2
new file mode 100644
index 0000000..46784be
Binary files /dev/null and b/public/assets/fonts/files/source-code-pro-cyrillic-ext-700-normal.woff2 differ
diff --git a/public/assets/fonts/files/source-code-pro-greek-400-normal.woff2 b/public/assets/fonts/files/source-code-pro-greek-400-normal.woff2
new file mode 100644
index 0000000..c2c3793
Binary files /dev/null and b/public/assets/fonts/files/source-code-pro-greek-400-normal.woff2 differ
diff --git a/public/assets/fonts/files/source-code-pro-greek-500-normal.woff2 b/public/assets/fonts/files/source-code-pro-greek-500-normal.woff2
new file mode 100644
index 0000000..8f89f7a
Binary files /dev/null and b/public/assets/fonts/files/source-code-pro-greek-500-normal.woff2 differ
diff --git a/public/assets/fonts/files/source-code-pro-greek-600-normal.woff2 b/public/assets/fonts/files/source-code-pro-greek-600-normal.woff2
new file mode 100644
index 0000000..82c7c1d
Binary files /dev/null and b/public/assets/fonts/files/source-code-pro-greek-600-normal.woff2 differ
diff --git a/public/assets/fonts/files/source-code-pro-greek-700-normal.woff2 b/public/assets/fonts/files/source-code-pro-greek-700-normal.woff2
new file mode 100644
index 0000000..8c6f49c
Binary files /dev/null and b/public/assets/fonts/files/source-code-pro-greek-700-normal.woff2 differ
diff --git a/public/assets/fonts/files/source-code-pro-greek-ext-400-normal.woff2 b/public/assets/fonts/files/source-code-pro-greek-ext-400-normal.woff2
new file mode 100644
index 0000000..595ff1f
Binary files /dev/null and b/public/assets/fonts/files/source-code-pro-greek-ext-400-normal.woff2 differ
diff --git a/public/assets/fonts/files/source-code-pro-greek-ext-500-normal.woff2 b/public/assets/fonts/files/source-code-pro-greek-ext-500-normal.woff2
new file mode 100644
index 0000000..c9fd75f
Binary files /dev/null and b/public/assets/fonts/files/source-code-pro-greek-ext-500-normal.woff2 differ
diff --git a/public/assets/fonts/files/source-code-pro-greek-ext-600-normal.woff2 b/public/assets/fonts/files/source-code-pro-greek-ext-600-normal.woff2
new file mode 100644
index 0000000..bd8760e
Binary files /dev/null and b/public/assets/fonts/files/source-code-pro-greek-ext-600-normal.woff2 differ
diff --git a/public/assets/fonts/files/source-code-pro-greek-ext-700-normal.woff2 b/public/assets/fonts/files/source-code-pro-greek-ext-700-normal.woff2
new file mode 100644
index 0000000..b33ce97
Binary files /dev/null and b/public/assets/fonts/files/source-code-pro-greek-ext-700-normal.woff2 differ
diff --git a/public/assets/fonts/files/source-code-pro-latin-400-normal.woff2 b/public/assets/fonts/files/source-code-pro-latin-400-normal.woff2
new file mode 100644
index 0000000..d1f2d84
Binary files /dev/null and b/public/assets/fonts/files/source-code-pro-latin-400-normal.woff2 differ
diff --git a/public/assets/fonts/files/source-code-pro-latin-500-normal.woff2 b/public/assets/fonts/files/source-code-pro-latin-500-normal.woff2
new file mode 100644
index 0000000..2f6e1f1
Binary files /dev/null and b/public/assets/fonts/files/source-code-pro-latin-500-normal.woff2 differ
diff --git a/public/assets/fonts/files/source-code-pro-latin-600-normal.woff2 b/public/assets/fonts/files/source-code-pro-latin-600-normal.woff2
new file mode 100644
index 0000000..aef4852
Binary files /dev/null and b/public/assets/fonts/files/source-code-pro-latin-600-normal.woff2 differ
diff --git a/public/assets/fonts/files/source-code-pro-latin-700-normal.woff2 b/public/assets/fonts/files/source-code-pro-latin-700-normal.woff2
new file mode 100644
index 0000000..9c33eed
Binary files /dev/null and b/public/assets/fonts/files/source-code-pro-latin-700-normal.woff2 differ
diff --git a/public/assets/fonts/files/source-code-pro-latin-ext-400-normal.woff2 b/public/assets/fonts/files/source-code-pro-latin-ext-400-normal.woff2
new file mode 100644
index 0000000..43fb9bb
Binary files /dev/null and b/public/assets/fonts/files/source-code-pro-latin-ext-400-normal.woff2 differ
diff --git a/public/assets/fonts/files/source-code-pro-latin-ext-500-normal.woff2 b/public/assets/fonts/files/source-code-pro-latin-ext-500-normal.woff2
new file mode 100644
index 0000000..2402d1f
Binary files /dev/null and b/public/assets/fonts/files/source-code-pro-latin-ext-500-normal.woff2 differ
diff --git a/public/assets/fonts/files/source-code-pro-latin-ext-600-normal.woff2 b/public/assets/fonts/files/source-code-pro-latin-ext-600-normal.woff2
new file mode 100644
index 0000000..c02d389
Binary files /dev/null and b/public/assets/fonts/files/source-code-pro-latin-ext-600-normal.woff2 differ
diff --git a/public/assets/fonts/files/source-code-pro-latin-ext-700-normal.woff2 b/public/assets/fonts/files/source-code-pro-latin-ext-700-normal.woff2
new file mode 100644
index 0000000..90cb4c5
Binary files /dev/null and b/public/assets/fonts/files/source-code-pro-latin-ext-700-normal.woff2 differ
diff --git a/public/assets/fonts/files/source-code-pro-vietnamese-400-normal.woff2 b/public/assets/fonts/files/source-code-pro-vietnamese-400-normal.woff2
new file mode 100644
index 0000000..729ab3e
Binary files /dev/null and b/public/assets/fonts/files/source-code-pro-vietnamese-400-normal.woff2 differ
diff --git a/public/assets/fonts/files/source-code-pro-vietnamese-500-normal.woff2 b/public/assets/fonts/files/source-code-pro-vietnamese-500-normal.woff2
new file mode 100644
index 0000000..4dc9d6f
Binary files /dev/null and b/public/assets/fonts/files/source-code-pro-vietnamese-500-normal.woff2 differ
diff --git a/public/assets/fonts/files/source-code-pro-vietnamese-600-normal.woff2 b/public/assets/fonts/files/source-code-pro-vietnamese-600-normal.woff2
new file mode 100644
index 0000000..2d393d9
Binary files /dev/null and b/public/assets/fonts/files/source-code-pro-vietnamese-600-normal.woff2 differ
diff --git a/public/assets/fonts/files/source-code-pro-vietnamese-700-normal.woff2 b/public/assets/fonts/files/source-code-pro-vietnamese-700-normal.woff2
new file mode 100644
index 0000000..9831cf3
Binary files /dev/null and b/public/assets/fonts/files/source-code-pro-vietnamese-700-normal.woff2 differ
diff --git a/public/assets/fonts/geologica.css b/public/assets/fonts/geologica.css
new file mode 100644
index 0000000..493ec13
--- /dev/null
+++ b/public/assets/fonts/geologica.css
@@ -0,0 +1,139 @@
+/* geologica-cyrillic-ext-wght-normal */
+@font-face {
+  font-family: 'Geologica';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./files/geologica-cyrillic-ext-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* geologica-cyrillic-wght-normal */
+@font-face {
+  font-family: 'Geologica';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./files/geologica-cyrillic-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* geologica-greek-wght-normal */
+@font-face {
+  font-family: 'Geologica';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./files/geologica-greek-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
+}
+
+/* geologica-vietnamese-wght-normal */
+@font-face {
+  font-family: 'Geologica';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./files/geologica-vietnamese-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* geologica-latin-ext-wght-normal */
+@font-face {
+  font-family: 'Geologica';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./files/geologica-latin-ext-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* geologica-latin-wght-normal */
+@font-face {
+  font-family: 'Geologica';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./files/geologica-latin-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* pt-sans-cyrillic-ext-400-normal */
+@font-face {
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/pt-sans-cyrillic-ext-400-normal.woff2) format('woff2');
+  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* pt-sans-cyrillic-400-normal */
+@font-face {
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/pt-sans-cyrillic-400-normal.woff2) format('woff2');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* pt-sans-latin-ext-400-normal */
+@font-face {
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/pt-sans-latin-ext-400-normal.woff2) format('woff2');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* pt-sans-latin-400-normal */
+@font-face {
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/pt-sans-latin-400-normal.woff2) format('woff2');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* pt-sans-cyrillic-ext-700-normal */
+@font-face {
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/pt-sans-cyrillic-ext-700-normal.woff2) format('woff2');
+  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* pt-sans-cyrillic-700-normal */
+@font-face {
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/pt-sans-cyrillic-700-normal.woff2) format('woff2');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* pt-sans-latin-ext-700-normal */
+@font-face {
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/pt-sans-latin-ext-700-normal.woff2) format('woff2');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* pt-sans-latin-700-normal */
+@font-face {
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/pt-sans-latin-700-normal.woff2) format('woff2');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
diff --git a/public/assets/fonts/merriweather.css b/public/assets/fonts/merriweather.css
new file mode 100644
index 0000000..f58c961
--- /dev/null
+++ b/public/assets/fonts/merriweather.css
@@ -0,0 +1,139 @@
+/* alice-cyrillic-ext-400-normal */
+@font-face {
+  font-family: 'Alice';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/alice-cyrillic-ext-400-normal.woff2) format('woff2');
+  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* alice-cyrillic-400-normal */
+@font-face {
+  font-family: 'Alice';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/alice-cyrillic-400-normal.woff2) format('woff2');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* alice-latin-ext-400-normal */
+@font-face {
+  font-family: 'Alice';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/alice-latin-ext-400-normal.woff2) format('woff2');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* alice-latin-400-normal */
+@font-face {
+  font-family: 'Alice';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/alice-latin-400-normal.woff2) format('woff2');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* merriweather-cyrillic-ext-400-normal */
+@font-face {
+  font-family: 'Merriweather';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/merriweather-cyrillic-ext-400-normal.woff2) format('woff2');
+  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* merriweather-cyrillic-400-normal */
+@font-face {
+  font-family: 'Merriweather';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/merriweather-cyrillic-400-normal.woff2) format('woff2');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* merriweather-vietnamese-400-normal */
+@font-face {
+  font-family: 'Merriweather';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/merriweather-vietnamese-400-normal.woff2) format('woff2');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* merriweather-latin-ext-400-normal */
+@font-face {
+  font-family: 'Merriweather';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/merriweather-latin-ext-400-normal.woff2) format('woff2');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* merriweather-latin-400-normal */
+@font-face {
+  font-family: 'Merriweather';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/merriweather-latin-400-normal.woff2) format('woff2');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* merriweather-cyrillic-ext-700-normal */
+@font-face {
+  font-family: 'Merriweather';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/merriweather-cyrillic-ext-700-normal.woff2) format('woff2');
+  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* merriweather-cyrillic-700-normal */
+@font-face {
+  font-family: 'Merriweather';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/merriweather-cyrillic-700-normal.woff2) format('woff2');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* merriweather-vietnamese-700-normal */
+@font-face {
+  font-family: 'Merriweather';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/merriweather-vietnamese-700-normal.woff2) format('woff2');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* merriweather-latin-ext-700-normal */
+@font-face {
+  font-family: 'Merriweather';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/merriweather-latin-ext-700-normal.woff2) format('woff2');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* merriweather-latin-700-normal */
+@font-face {
+  font-family: 'Merriweather';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/merriweather-latin-700-normal.woff2) format('woff2');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
diff --git a/public/assets/fonts/mono.css b/public/assets/fonts/mono.css
new file mode 100644
index 0000000..e5f64fa
--- /dev/null
+++ b/public/assets/fonts/mono.css
@@ -0,0 +1,319 @@
+/* pt-mono-cyrillic-ext-400-normal */
+@font-face {
+  font-family: 'PT Mono';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/pt-mono-cyrillic-ext-400-normal.woff2) format('woff2');
+  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* pt-mono-cyrillic-400-normal */
+@font-face {
+  font-family: 'PT Mono';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/pt-mono-cyrillic-400-normal.woff2) format('woff2');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* pt-mono-latin-ext-400-normal */
+@font-face {
+  font-family: 'PT Mono';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/pt-mono-latin-ext-400-normal.woff2) format('woff2');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* pt-mono-latin-400-normal */
+@font-face {
+  font-family: 'PT Mono';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/pt-mono-latin-400-normal.woff2) format('woff2');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* source-code-pro-cyrillic-ext-400-normal */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/source-code-pro-cyrillic-ext-400-normal.woff2) format('woff2');
+  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* source-code-pro-cyrillic-400-normal */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/source-code-pro-cyrillic-400-normal.woff2) format('woff2');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* source-code-pro-greek-ext-400-normal */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/source-code-pro-greek-ext-400-normal.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* source-code-pro-greek-400-normal */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/source-code-pro-greek-400-normal.woff2) format('woff2');
+  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
+}
+
+/* source-code-pro-vietnamese-400-normal */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/source-code-pro-vietnamese-400-normal.woff2) format('woff2');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* source-code-pro-latin-ext-400-normal */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/source-code-pro-latin-ext-400-normal.woff2) format('woff2');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* source-code-pro-latin-400-normal */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/source-code-pro-latin-400-normal.woff2) format('woff2');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* source-code-pro-cyrillic-ext-500-normal */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: url(./files/source-code-pro-cyrillic-ext-500-normal.woff2) format('woff2');
+  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* source-code-pro-cyrillic-500-normal */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: url(./files/source-code-pro-cyrillic-500-normal.woff2) format('woff2');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* source-code-pro-greek-ext-500-normal */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: url(./files/source-code-pro-greek-ext-500-normal.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* source-code-pro-greek-500-normal */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: url(./files/source-code-pro-greek-500-normal.woff2) format('woff2');
+  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
+}
+
+/* source-code-pro-vietnamese-500-normal */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: url(./files/source-code-pro-vietnamese-500-normal.woff2) format('woff2');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* source-code-pro-latin-ext-500-normal */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: url(./files/source-code-pro-latin-ext-500-normal.woff2) format('woff2');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* source-code-pro-latin-500-normal */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: url(./files/source-code-pro-latin-500-normal.woff2) format('woff2');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* source-code-pro-cyrillic-ext-600-normal */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url(./files/source-code-pro-cyrillic-ext-600-normal.woff2) format('woff2');
+  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* source-code-pro-cyrillic-600-normal */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url(./files/source-code-pro-cyrillic-600-normal.woff2) format('woff2');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* source-code-pro-greek-ext-600-normal */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url(./files/source-code-pro-greek-ext-600-normal.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* source-code-pro-greek-600-normal */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url(./files/source-code-pro-greek-600-normal.woff2) format('woff2');
+  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
+}
+
+/* source-code-pro-vietnamese-600-normal */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url(./files/source-code-pro-vietnamese-600-normal.woff2) format('woff2');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* source-code-pro-latin-ext-600-normal */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url(./files/source-code-pro-latin-ext-600-normal.woff2) format('woff2');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* source-code-pro-latin-600-normal */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url(./files/source-code-pro-latin-600-normal.woff2) format('woff2');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* source-code-pro-cyrillic-ext-700-normal */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/source-code-pro-cyrillic-ext-700-normal.woff2) format('woff2');
+  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* source-code-pro-cyrillic-700-normal */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/source-code-pro-cyrillic-700-normal.woff2) format('woff2');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* source-code-pro-greek-ext-700-normal */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/source-code-pro-greek-ext-700-normal.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* source-code-pro-greek-700-normal */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/source-code-pro-greek-700-normal.woff2) format('woff2');
+  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
+}
+
+/* source-code-pro-vietnamese-700-normal */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/source-code-pro-vietnamese-700-normal.woff2) format('woff2');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* source-code-pro-latin-ext-700-normal */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/source-code-pro-latin-ext-700-normal.woff2) format('woff2');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* source-code-pro-latin-700-normal */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/source-code-pro-latin-700-normal.woff2) format('woff2');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
diff --git a/public/assets/index/ava-bg-1.png b/public/assets/index/ava-bg-1.png
new file mode 100644
index 0000000..abf092c
Binary files /dev/null and b/public/assets/index/ava-bg-1.png differ
diff --git a/public/assets/index/ava-bg-1.webp b/public/assets/index/ava-bg-1.webp
new file mode 100644
index 0000000..2d53e16
Binary files /dev/null and b/public/assets/index/ava-bg-1.webp differ
diff --git a/public/assets/index/me-transparentBG-1.png b/public/assets/index/me-transparentBG-1.png
new file mode 100644
index 0000000..87af06e
Binary files /dev/null and b/public/assets/index/me-transparentBG-1.png differ
diff --git a/public/assets/index/me-transparentBG-1.webp b/public/assets/index/me-transparentBG-1.webp
new file mode 100644
index 0000000..01cb5b9
Binary files /dev/null and b/public/assets/index/me-transparentBG-1.webp differ
diff --git a/public/assets/index/me_motion.mp4 b/public/assets/index/me_motion.mp4
new file mode 100644
index 0000000..fc822c5
Binary files /dev/null and b/public/assets/index/me_motion.mp4 differ
diff --git a/public/assets/index/me_motion.webm b/public/assets/index/me_motion.webm
new file mode 100644
index 0000000..d4ec8d8
Binary files /dev/null and b/public/assets/index/me_motion.webm differ
diff --git a/public/assets/index/me_motion.webp b/public/assets/index/me_motion.webp
new file mode 100644
index 0000000..cb88610
Binary files /dev/null and b/public/assets/index/me_motion.webp differ
diff --git a/public/assets/index/me_static.png b/public/assets/index/me_static.png
new file mode 100644
index 0000000..1a5b746
Binary files /dev/null and b/public/assets/index/me_static.png differ
diff --git a/public/assets/index/me_static.webp b/public/assets/index/me_static.webp
new file mode 100644
index 0000000..5254793
Binary files /dev/null and b/public/assets/index/me_static.webp differ
diff --git a/public/assets/lunacy/.gitkeep b/public/assets/lunacy/.gitkeep
new file mode 100644
index 0000000..d3f5a12
--- /dev/null
+++ b/public/assets/lunacy/.gitkeep
@@ -0,0 +1 @@
+
diff --git a/public/assets/lunacy/Lunacy_app_overview.png b/public/assets/lunacy/Lunacy_app_overview.png
new file mode 100644
index 0000000..05f863a
Binary files /dev/null and b/public/assets/lunacy/Lunacy_app_overview.png differ
diff --git a/public/assets/lunacy/Lunacy_app_overview.webp b/public/assets/lunacy/Lunacy_app_overview.webp
new file mode 100644
index 0000000..e4ebc20
Binary files /dev/null and b/public/assets/lunacy/Lunacy_app_overview.webp differ
diff --git a/public/assets/lunacy/blob_settings_on_canvas.png b/public/assets/lunacy/blob_settings_on_canvas.png
new file mode 100644
index 0000000..53cdc2c
Binary files /dev/null and b/public/assets/lunacy/blob_settings_on_canvas.png differ
diff --git a/public/assets/lunacy/blob_settings_on_canvas.webp b/public/assets/lunacy/blob_settings_on_canvas.webp
new file mode 100644
index 0000000..a017631
Binary files /dev/null and b/public/assets/lunacy/blob_settings_on_canvas.webp differ
diff --git a/public/assets/lunacy/blob_settings_panel_v1.png b/public/assets/lunacy/blob_settings_panel_v1.png
new file mode 100644
index 0000000..29ee4a6
Binary files /dev/null and b/public/assets/lunacy/blob_settings_panel_v1.png differ
diff --git a/public/assets/lunacy/blob_settings_panel_v1.webp b/public/assets/lunacy/blob_settings_panel_v1.webp
new file mode 100644
index 0000000..df269dc
Binary files /dev/null and b/public/assets/lunacy/blob_settings_panel_v1.webp differ
diff --git a/public/assets/lunacy/blob_settings_panel_v2.png b/public/assets/lunacy/blob_settings_panel_v2.png
new file mode 100644
index 0000000..696684d
Binary files /dev/null and b/public/assets/lunacy/blob_settings_panel_v2.png differ
diff --git a/public/assets/lunacy/blob_settings_panel_v2.webp b/public/assets/lunacy/blob_settings_panel_v2.webp
new file mode 100644
index 0000000..5e290c6
Binary files /dev/null and b/public/assets/lunacy/blob_settings_panel_v2.webp differ
diff --git a/public/assets/lunacy/blob_settings_panel_v3.png b/public/assets/lunacy/blob_settings_panel_v3.png
new file mode 100644
index 0000000..9c52f13
Binary files /dev/null and b/public/assets/lunacy/blob_settings_panel_v3.png differ
diff --git a/public/assets/lunacy/blob_settings_panel_v3.webp b/public/assets/lunacy/blob_settings_panel_v3.webp
new file mode 100644
index 0000000..ebd2334
Binary files /dev/null and b/public/assets/lunacy/blob_settings_panel_v3.webp differ
diff --git a/public/assets/lunacy/blob_settings_panel_v4.png b/public/assets/lunacy/blob_settings_panel_v4.png
new file mode 100644
index 0000000..00ffe3e
Binary files /dev/null and b/public/assets/lunacy/blob_settings_panel_v4.png differ
diff --git a/public/assets/lunacy/blob_settings_panel_v4.webp b/public/assets/lunacy/blob_settings_panel_v4.webp
new file mode 100644
index 0000000..0718451
Binary files /dev/null and b/public/assets/lunacy/blob_settings_panel_v4.webp differ
diff --git a/public/assets/lunacy/blob_settings_panel_v5.png b/public/assets/lunacy/blob_settings_panel_v5.png
new file mode 100644
index 0000000..bdc29e7
Binary files /dev/null and b/public/assets/lunacy/blob_settings_panel_v5.png differ
diff --git a/public/assets/lunacy/blob_settings_panel_v5.webp b/public/assets/lunacy/blob_settings_panel_v5.webp
new file mode 100644
index 0000000..d8dc8d8
Binary files /dev/null and b/public/assets/lunacy/blob_settings_panel_v5.webp differ
diff --git a/public/assets/lunacy/blob_settings_panel_v6.png b/public/assets/lunacy/blob_settings_panel_v6.png
new file mode 100644
index 0000000..b53b02d
Binary files /dev/null and b/public/assets/lunacy/blob_settings_panel_v6.png differ
diff --git a/public/assets/lunacy/blob_settings_panel_v6.webp b/public/assets/lunacy/blob_settings_panel_v6.webp
new file mode 100644
index 0000000..21ff54e
Binary files /dev/null and b/public/assets/lunacy/blob_settings_panel_v6.webp differ
diff --git a/public/assets/lunacy/blob_settings_panel_v7.png b/public/assets/lunacy/blob_settings_panel_v7.png
new file mode 100644
index 0000000..a98a2d3
Binary files /dev/null and b/public/assets/lunacy/blob_settings_panel_v7.png differ
diff --git a/public/assets/lunacy/blob_settings_panel_v7.webp b/public/assets/lunacy/blob_settings_panel_v7.webp
new file mode 100644
index 0000000..0c4345e
Binary files /dev/null and b/public/assets/lunacy/blob_settings_panel_v7.webp differ
diff --git a/public/assets/lunacy/blob_settings_panel_v8.png b/public/assets/lunacy/blob_settings_panel_v8.png
new file mode 100644
index 0000000..1822d5c
Binary files /dev/null and b/public/assets/lunacy/blob_settings_panel_v8.png differ
diff --git a/public/assets/lunacy/blob_settings_panel_v8.webp b/public/assets/lunacy/blob_settings_panel_v8.webp
new file mode 100644
index 0000000..7a0c1ba
Binary files /dev/null and b/public/assets/lunacy/blob_settings_panel_v8.webp differ
diff --git a/public/assets/lunacy/blob_settings_panel_v9.png b/public/assets/lunacy/blob_settings_panel_v9.png
new file mode 100644
index 0000000..701ada4
Binary files /dev/null and b/public/assets/lunacy/blob_settings_panel_v9.png differ
diff --git a/public/assets/lunacy/blob_settings_panel_v9.webp b/public/assets/lunacy/blob_settings_panel_v9.webp
new file mode 100644
index 0000000..494ce1d
Binary files /dev/null and b/public/assets/lunacy/blob_settings_panel_v9.webp differ
diff --git a/public/assets/lunacy/compare_components_modal_window.png b/public/assets/lunacy/compare_components_modal_window.png
new file mode 100644
index 0000000..d76c50b
Binary files /dev/null and b/public/assets/lunacy/compare_components_modal_window.png differ
diff --git a/public/assets/lunacy/compare_components_modal_window.webp b/public/assets/lunacy/compare_components_modal_window.webp
new file mode 100644
index 0000000..e40eb8d
Binary files /dev/null and b/public/assets/lunacy/compare_components_modal_window.webp differ
diff --git a/public/assets/lunacy/components_update_indicator_location_panel.png b/public/assets/lunacy/components_update_indicator_location_panel.png
new file mode 100644
index 0000000..48a0508
Binary files /dev/null and b/public/assets/lunacy/components_update_indicator_location_panel.png differ
diff --git a/public/assets/lunacy/components_update_indicator_location_panel.webp b/public/assets/lunacy/components_update_indicator_location_panel.webp
new file mode 100644
index 0000000..54004b1
Binary files /dev/null and b/public/assets/lunacy/components_update_indicator_location_panel.webp differ
diff --git a/public/assets/lunacy/cover.webp b/public/assets/lunacy/cover.webp
new file mode 100644
index 0000000..e4ebc20
Binary files /dev/null and b/public/assets/lunacy/cover.webp differ
diff --git a/public/assets/lunacy/modal_window_for_prototype_create_on_canvas.png b/public/assets/lunacy/modal_window_for_prototype_create_on_canvas.png
new file mode 100644
index 0000000..bfdaefe
Binary files /dev/null and b/public/assets/lunacy/modal_window_for_prototype_create_on_canvas.png differ
diff --git a/public/assets/lunacy/modal_window_for_prototype_create_on_canvas.webp b/public/assets/lunacy/modal_window_for_prototype_create_on_canvas.webp
new file mode 100644
index 0000000..5f0b6a7
Binary files /dev/null and b/public/assets/lunacy/modal_window_for_prototype_create_on_canvas.webp differ
diff --git a/public/assets/lunacy/modal_window_for_prototype_panel_states.png b/public/assets/lunacy/modal_window_for_prototype_panel_states.png
new file mode 100644
index 0000000..5b36381
Binary files /dev/null and b/public/assets/lunacy/modal_window_for_prototype_panel_states.png differ
diff --git a/public/assets/lunacy/modal_window_for_prototype_panel_states.webp b/public/assets/lunacy/modal_window_for_prototype_panel_states.webp
new file mode 100644
index 0000000..13f74f9
Binary files /dev/null and b/public/assets/lunacy/modal_window_for_prototype_panel_states.webp differ
diff --git a/public/assets/lunacy/shadow_pro_settings_ideas.png b/public/assets/lunacy/shadow_pro_settings_ideas.png
new file mode 100644
index 0000000..ff9deee
Binary files /dev/null and b/public/assets/lunacy/shadow_pro_settings_ideas.png differ
diff --git a/public/assets/lunacy/shadow_pro_settings_ideas.webp b/public/assets/lunacy/shadow_pro_settings_ideas.webp
new file mode 100644
index 0000000..6a18101
Binary files /dev/null and b/public/assets/lunacy/shadow_pro_settings_ideas.webp differ
diff --git a/public/assets/lunacy/shadow_pro_settings_modal_auto-off.png b/public/assets/lunacy/shadow_pro_settings_modal_auto-off.png
new file mode 100644
index 0000000..fc5d24d
Binary files /dev/null and b/public/assets/lunacy/shadow_pro_settings_modal_auto-off.png differ
diff --git a/public/assets/lunacy/shadow_pro_settings_modal_auto-off.webp b/public/assets/lunacy/shadow_pro_settings_modal_auto-off.webp
new file mode 100644
index 0000000..702ccdf
Binary files /dev/null and b/public/assets/lunacy/shadow_pro_settings_modal_auto-off.webp differ
diff --git a/public/assets/lunacy/shadow_pro_settings_modal_auto_on.png b/public/assets/lunacy/shadow_pro_settings_modal_auto_on.png
new file mode 100644
index 0000000..685053c
Binary files /dev/null and b/public/assets/lunacy/shadow_pro_settings_modal_auto_on.png differ
diff --git a/public/assets/lunacy/shadow_pro_settings_modal_auto_on.webp b/public/assets/lunacy/shadow_pro_settings_modal_auto_on.webp
new file mode 100644
index 0000000..5ec3a1d
Binary files /dev/null and b/public/assets/lunacy/shadow_pro_settings_modal_auto_on.webp differ
diff --git a/public/assets/lunacy/shadow_pro_settings_panel.png b/public/assets/lunacy/shadow_pro_settings_panel.png
new file mode 100644
index 0000000..1af584d
Binary files /dev/null and b/public/assets/lunacy/shadow_pro_settings_panel.png differ
diff --git a/public/assets/lunacy/shadow_pro_settings_panel.webp b/public/assets/lunacy/shadow_pro_settings_panel.webp
new file mode 100644
index 0000000..69c68be
Binary files /dev/null and b/public/assets/lunacy/shadow_pro_settings_panel.webp differ
diff --git a/public/assets/lunacy/slider_14.png b/public/assets/lunacy/slider_14.png
new file mode 100644
index 0000000..fe2795b
Binary files /dev/null and b/public/assets/lunacy/slider_14.png differ
diff --git a/public/assets/lunacy/slider_14.webp b/public/assets/lunacy/slider_14.webp
new file mode 100644
index 0000000..7431365
Binary files /dev/null and b/public/assets/lunacy/slider_14.webp differ
diff --git a/public/assets/lunacy/slider_v1.png b/public/assets/lunacy/slider_v1.png
new file mode 100644
index 0000000..cf4561a
Binary files /dev/null and b/public/assets/lunacy/slider_v1.png differ
diff --git a/public/assets/lunacy/slider_v1.webp b/public/assets/lunacy/slider_v1.webp
new file mode 100644
index 0000000..76e5c7c
Binary files /dev/null and b/public/assets/lunacy/slider_v1.webp differ
diff --git a/public/assets/lunacy/slider_v10.png b/public/assets/lunacy/slider_v10.png
new file mode 100644
index 0000000..a4be03b
Binary files /dev/null and b/public/assets/lunacy/slider_v10.png differ
diff --git a/public/assets/lunacy/slider_v10.webp b/public/assets/lunacy/slider_v10.webp
new file mode 100644
index 0000000..f2f84dc
Binary files /dev/null and b/public/assets/lunacy/slider_v10.webp differ
diff --git a/public/assets/lunacy/slider_v11.png b/public/assets/lunacy/slider_v11.png
new file mode 100644
index 0000000..e86deef
Binary files /dev/null and b/public/assets/lunacy/slider_v11.png differ
diff --git a/public/assets/lunacy/slider_v11.webp b/public/assets/lunacy/slider_v11.webp
new file mode 100644
index 0000000..3a6bb67
Binary files /dev/null and b/public/assets/lunacy/slider_v11.webp differ
diff --git a/public/assets/lunacy/slider_v12.png b/public/assets/lunacy/slider_v12.png
new file mode 100644
index 0000000..a54043e
Binary files /dev/null and b/public/assets/lunacy/slider_v12.png differ
diff --git a/public/assets/lunacy/slider_v12.webp b/public/assets/lunacy/slider_v12.webp
new file mode 100644
index 0000000..8460f22
Binary files /dev/null and b/public/assets/lunacy/slider_v12.webp differ
diff --git a/public/assets/lunacy/slider_v13.png b/public/assets/lunacy/slider_v13.png
new file mode 100644
index 0000000..cde4669
Binary files /dev/null and b/public/assets/lunacy/slider_v13.png differ
diff --git a/public/assets/lunacy/slider_v13.webp b/public/assets/lunacy/slider_v13.webp
new file mode 100644
index 0000000..77d4197
Binary files /dev/null and b/public/assets/lunacy/slider_v13.webp differ
diff --git a/public/assets/lunacy/slider_v15.png b/public/assets/lunacy/slider_v15.png
new file mode 100644
index 0000000..a4be03b
Binary files /dev/null and b/public/assets/lunacy/slider_v15.png differ
diff --git a/public/assets/lunacy/slider_v15.webp b/public/assets/lunacy/slider_v15.webp
new file mode 100644
index 0000000..f2f84dc
Binary files /dev/null and b/public/assets/lunacy/slider_v15.webp differ
diff --git a/public/assets/lunacy/slider_v16.png b/public/assets/lunacy/slider_v16.png
new file mode 100644
index 0000000..ac488d6
Binary files /dev/null and b/public/assets/lunacy/slider_v16.png differ
diff --git a/public/assets/lunacy/slider_v16.webp b/public/assets/lunacy/slider_v16.webp
new file mode 100644
index 0000000..aa7b572
Binary files /dev/null and b/public/assets/lunacy/slider_v16.webp differ
diff --git a/public/assets/lunacy/slider_v17.png b/public/assets/lunacy/slider_v17.png
new file mode 100644
index 0000000..ae60315
Binary files /dev/null and b/public/assets/lunacy/slider_v17.png differ
diff --git a/public/assets/lunacy/slider_v17.webp b/public/assets/lunacy/slider_v17.webp
new file mode 100644
index 0000000..16ccd80
Binary files /dev/null and b/public/assets/lunacy/slider_v17.webp differ
diff --git a/public/assets/lunacy/slider_v18.png b/public/assets/lunacy/slider_v18.png
new file mode 100644
index 0000000..92ff6fa
Binary files /dev/null and b/public/assets/lunacy/slider_v18.png differ
diff --git a/public/assets/lunacy/slider_v18.webp b/public/assets/lunacy/slider_v18.webp
new file mode 100644
index 0000000..72abaec
Binary files /dev/null and b/public/assets/lunacy/slider_v18.webp differ
diff --git a/public/assets/lunacy/slider_v2.png b/public/assets/lunacy/slider_v2.png
new file mode 100644
index 0000000..02a8974
Binary files /dev/null and b/public/assets/lunacy/slider_v2.png differ
diff --git a/public/assets/lunacy/slider_v2.webp b/public/assets/lunacy/slider_v2.webp
new file mode 100644
index 0000000..188f47c
Binary files /dev/null and b/public/assets/lunacy/slider_v2.webp differ
diff --git a/public/assets/lunacy/slider_v3.png b/public/assets/lunacy/slider_v3.png
new file mode 100644
index 0000000..680f962
Binary files /dev/null and b/public/assets/lunacy/slider_v3.png differ
diff --git a/public/assets/lunacy/slider_v3.webp b/public/assets/lunacy/slider_v3.webp
new file mode 100644
index 0000000..9a2776a
Binary files /dev/null and b/public/assets/lunacy/slider_v3.webp differ
diff --git a/public/assets/lunacy/slider_v4.png b/public/assets/lunacy/slider_v4.png
new file mode 100644
index 0000000..0e2cd65
Binary files /dev/null and b/public/assets/lunacy/slider_v4.png differ
diff --git a/public/assets/lunacy/slider_v4.webp b/public/assets/lunacy/slider_v4.webp
new file mode 100644
index 0000000..a48962a
Binary files /dev/null and b/public/assets/lunacy/slider_v4.webp differ
diff --git a/public/assets/lunacy/slider_v5.png b/public/assets/lunacy/slider_v5.png
new file mode 100644
index 0000000..8c36e36
Binary files /dev/null and b/public/assets/lunacy/slider_v5.png differ
diff --git a/public/assets/lunacy/slider_v5.webp b/public/assets/lunacy/slider_v5.webp
new file mode 100644
index 0000000..4896b21
Binary files /dev/null and b/public/assets/lunacy/slider_v5.webp differ
diff --git a/public/assets/lunacy/slider_v6.png b/public/assets/lunacy/slider_v6.png
new file mode 100644
index 0000000..a171e8f
Binary files /dev/null and b/public/assets/lunacy/slider_v6.png differ
diff --git a/public/assets/lunacy/slider_v6.webp b/public/assets/lunacy/slider_v6.webp
new file mode 100644
index 0000000..aceb368
Binary files /dev/null and b/public/assets/lunacy/slider_v6.webp differ
diff --git a/public/assets/lunacy/slider_v7.png b/public/assets/lunacy/slider_v7.png
new file mode 100644
index 0000000..d2fcc70
Binary files /dev/null and b/public/assets/lunacy/slider_v7.png differ
diff --git a/public/assets/lunacy/slider_v7.webp b/public/assets/lunacy/slider_v7.webp
new file mode 100644
index 0000000..8697e89
Binary files /dev/null and b/public/assets/lunacy/slider_v7.webp differ
diff --git a/public/assets/lunacy/slider_v8.png b/public/assets/lunacy/slider_v8.png
new file mode 100644
index 0000000..b7a644e
Binary files /dev/null and b/public/assets/lunacy/slider_v8.png differ
diff --git a/public/assets/lunacy/slider_v8.webp b/public/assets/lunacy/slider_v8.webp
new file mode 100644
index 0000000..7419740
Binary files /dev/null and b/public/assets/lunacy/slider_v8.webp differ
diff --git a/public/assets/lunacy/slider_v9.png b/public/assets/lunacy/slider_v9.png
new file mode 100644
index 0000000..f8432df
Binary files /dev/null and b/public/assets/lunacy/slider_v9.png differ
diff --git a/public/assets/lunacy/slider_v9.webp b/public/assets/lunacy/slider_v9.webp
new file mode 100644
index 0000000..9a52334
Binary files /dev/null and b/public/assets/lunacy/slider_v9.webp differ
diff --git a/public/assets/lunacy/sliders_all_set.png b/public/assets/lunacy/sliders_all_set.png
new file mode 100644
index 0000000..447429b
Binary files /dev/null and b/public/assets/lunacy/sliders_all_set.png differ
diff --git a/public/assets/lunacy/sliders_all_set.webp b/public/assets/lunacy/sliders_all_set.webp
new file mode 100644
index 0000000..e1a7940
Binary files /dev/null and b/public/assets/lunacy/sliders_all_set.webp differ
diff --git a/public/assets/mamadaevv_resume.pdf b/public/assets/mamadaevv_resume.pdf
new file mode 100644
index 0000000..05564f4
Binary files /dev/null and b/public/assets/mamadaevv_resume.pdf differ
diff --git a/public/assets/manu-game-maker/.gitkeep b/public/assets/manu-game-maker/.gitkeep
new file mode 100644
index 0000000..d3f5a12
--- /dev/null
+++ b/public/assets/manu-game-maker/.gitkeep
@@ -0,0 +1 @@
+
diff --git a/public/assets/manu-game-maker/cover.png b/public/assets/manu-game-maker/cover.png
new file mode 100644
index 0000000..b69a762
Binary files /dev/null and b/public/assets/manu-game-maker/cover.png differ
diff --git a/public/assets/manu-game-maker/cover.webp b/public/assets/manu-game-maker/cover.webp
new file mode 100644
index 0000000..4fb944a
Binary files /dev/null and b/public/assets/manu-game-maker/cover.webp differ
diff --git a/public/assets/misc/dribbble_logo.png b/public/assets/misc/dribbble_logo.png
new file mode 100644
index 0000000..4beba33
Binary files /dev/null and b/public/assets/misc/dribbble_logo.png differ
diff --git a/public/assets/misc/dribbble_logo.webp b/public/assets/misc/dribbble_logo.webp
new file mode 100644
index 0000000..3dc06f9
Binary files /dev/null and b/public/assets/misc/dribbble_logo.webp differ
diff --git a/public/assets/misc/figma_logo.jpg b/public/assets/misc/figma_logo.jpg
new file mode 100644
index 0000000..ae483ea
Binary files /dev/null and b/public/assets/misc/figma_logo.jpg differ
diff --git a/public/assets/misc/figma_logo.webp b/public/assets/misc/figma_logo.webp
new file mode 100644
index 0000000..5f20b2a
Binary files /dev/null and b/public/assets/misc/figma_logo.webp differ
diff --git a/public/assets/misc/tg-channel-logo-design_not_pizza.jpg b/public/assets/misc/tg-channel-logo-design_not_pizza.jpg
new file mode 100644
index 0000000..000fc16
Binary files /dev/null and b/public/assets/misc/tg-channel-logo-design_not_pizza.jpg differ
diff --git a/public/assets/misc/tg-channel-logo-design_not_pizza.webp b/public/assets/misc/tg-channel-logo-design_not_pizza.webp
new file mode 100644
index 0000000..e9369f1
Binary files /dev/null and b/public/assets/misc/tg-channel-logo-design_not_pizza.webp differ
diff --git a/public/assets/mobile-clinic-app/.gitkeep b/public/assets/mobile-clinic-app/.gitkeep
new file mode 100644
index 0000000..d3f5a12
--- /dev/null
+++ b/public/assets/mobile-clinic-app/.gitkeep
@@ -0,0 +1 @@
+
diff --git a/public/assets/mobile-clinic-app/cover.png b/public/assets/mobile-clinic-app/cover.png
new file mode 100644
index 0000000..58d6da3
Binary files /dev/null and b/public/assets/mobile-clinic-app/cover.png differ
diff --git a/public/assets/mobile-clinic-app/cover.webp b/public/assets/mobile-clinic-app/cover.webp
new file mode 100644
index 0000000..9aa6cb5
Binary files /dev/null and b/public/assets/mobile-clinic-app/cover.webp differ
diff --git a/public/assets/obsidian-plugin-columns-view/filter use - Trim.mp4 b/public/assets/obsidian-plugin-columns-view/filter use - Trim.mp4
new file mode 100644
index 0000000..3af6100
Binary files /dev/null and b/public/assets/obsidian-plugin-columns-view/filter use - Trim.mp4 differ
diff --git a/public/assets/obsidian-plugin-columns-view/filter use.gif b/public/assets/obsidian-plugin-columns-view/filter use.gif
new file mode 100644
index 0000000..c293925
Binary files /dev/null and b/public/assets/obsidian-plugin-columns-view/filter use.gif differ
diff --git a/public/assets/obsidian-plugin-columns-view/filter use.mp4 b/public/assets/obsidian-plugin-columns-view/filter use.mp4
new file mode 100644
index 0000000..43bc267
Binary files /dev/null and b/public/assets/obsidian-plugin-columns-view/filter use.mp4 differ
diff --git a/public/assets/obsidian-plugin-columns-view/filter use.webm b/public/assets/obsidian-plugin-columns-view/filter use.webm
new file mode 100644
index 0000000..ee953e1
Binary files /dev/null and b/public/assets/obsidian-plugin-columns-view/filter use.webm differ
diff --git a/public/assets/obsidian-plugin-columns-view/filter use.webp b/public/assets/obsidian-plugin-columns-view/filter use.webp
new file mode 100644
index 0000000..851a61b
Binary files /dev/null and b/public/assets/obsidian-plugin-columns-view/filter use.webp differ
diff --git a/public/assets/obsidian-plugin-columns-view/overview.png b/public/assets/obsidian-plugin-columns-view/overview.png
new file mode 100644
index 0000000..32f2e1c
Binary files /dev/null and b/public/assets/obsidian-plugin-columns-view/overview.png differ
diff --git a/public/assets/obsidian-plugin-columns-view/overview.webp b/public/assets/obsidian-plugin-columns-view/overview.webp
new file mode 100644
index 0000000..179a4cd
Binary files /dev/null and b/public/assets/obsidian-plugin-columns-view/overview.webp differ
diff --git a/public/assets/obsidian-plugin-columns-view/view configure general.gif b/public/assets/obsidian-plugin-columns-view/view configure general.gif
new file mode 100644
index 0000000..c5c95fd
Binary files /dev/null and b/public/assets/obsidian-plugin-columns-view/view configure general.gif differ
diff --git a/public/assets/obsidian-plugin-columns-view/view configure properties.gif b/public/assets/obsidian-plugin-columns-view/view configure properties.gif
new file mode 100644
index 0000000..cfda90e
Binary files /dev/null and b/public/assets/obsidian-plugin-columns-view/view configure properties.gif differ
diff --git a/public/assets/obsidian-plugin-columns-view/view configure title.gif b/public/assets/obsidian-plugin-columns-view/view configure title.gif
new file mode 100644
index 0000000..ec58181
Binary files /dev/null and b/public/assets/obsidian-plugin-columns-view/view configure title.gif differ
diff --git a/public/assets/obsidian-plugin-columns-view/view configure.mp4 b/public/assets/obsidian-plugin-columns-view/view configure.mp4
new file mode 100644
index 0000000..49ef653
Binary files /dev/null and b/public/assets/obsidian-plugin-columns-view/view configure.mp4 differ
diff --git a/public/assets/obsidian-plugin-columns-view/view configure.webm b/public/assets/obsidian-plugin-columns-view/view configure.webm
new file mode 100644
index 0000000..e41e36b
Binary files /dev/null and b/public/assets/obsidian-plugin-columns-view/view configure.webm differ
diff --git a/public/assets/obsidian-plugin-columns-view/view configure.webp b/public/assets/obsidian-plugin-columns-view/view configure.webp
new file mode 100644
index 0000000..feb2e41
Binary files /dev/null and b/public/assets/obsidian-plugin-columns-view/view configure.webp differ
diff --git a/public/assets/orc-primo-rpa/cover.webp b/public/assets/orc-primo-rpa/cover.webp
new file mode 100644
index 0000000..0f86a88
Binary files /dev/null and b/public/assets/orc-primo-rpa/cover.webp differ
diff --git a/public/assets/orc-primo-rpa/projects--table-new.png b/public/assets/orc-primo-rpa/projects--table-new.png
new file mode 100644
index 0000000..091c833
Binary files /dev/null and b/public/assets/orc-primo-rpa/projects--table-new.png differ
diff --git a/public/assets/orc-primo-rpa/projects--table-new.webp b/public/assets/orc-primo-rpa/projects--table-new.webp
new file mode 100644
index 0000000..0f86a88
Binary files /dev/null and b/public/assets/orc-primo-rpa/projects--table-new.webp differ
diff --git a/public/assets/orc-primo-rpa/projects--table-old.png b/public/assets/orc-primo-rpa/projects--table-old.png
new file mode 100644
index 0000000..2f4af72
Binary files /dev/null and b/public/assets/orc-primo-rpa/projects--table-old.png differ
diff --git a/public/assets/orc-primo-rpa/projects--table-old.webp b/public/assets/orc-primo-rpa/projects--table-old.webp
new file mode 100644
index 0000000..f8847cf
Binary files /dev/null and b/public/assets/orc-primo-rpa/projects--table-old.webp differ
diff --git a/public/assets/shared/icons/arrow_upright.svg b/public/assets/shared/icons/arrow_upright.svg
new file mode 100644
index 0000000..c1acf4c
--- /dev/null
+++ b/public/assets/shared/icons/arrow_upright.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_17_95)">
+<path d="M20.8925 3.47821C20.9361 3.52179 20.9747 3.56875 21.0085 3.6177C21.0106 3.62069 21.0127 3.62366 21.0147 3.62668C21.0631 3.69835 21.1002 3.77519 21.128 3.85455C21.1331 3.86922 21.1387 3.88377 21.1432 3.89875C21.171 3.99215 21.1853 4.08864 21.1853 4.18532L21.186 14.5564C21.1859 15.1085 20.7381 15.556 20.1861 15.5563C19.6338 15.5563 19.1862 15.1087 19.1862 14.5564V6.59873L5.33615 20.4488C4.94562 20.8393 4.31244 20.8393 3.92193 20.4488C3.5316 20.0583 3.53151 19.425 3.92193 19.0346L17.772 5.18452L9.81495 5.18521C9.2627 5.18521 8.81512 4.73755 8.81506 4.18532C8.81518 3.63314 9.26274 3.18542 9.81495 3.18542H20.1854C20.2492 3.18541 20.3131 3.19125 20.376 3.20338C20.4272 3.21328 20.477 3.22741 20.5251 3.24481C20.5409 3.25048 20.5566 3.25628 20.5721 3.26276C20.5868 3.26896 20.6012 3.27592 20.6156 3.28279C20.628 3.28871 20.6407 3.29428 20.6529 3.30074C20.6737 3.31178 20.6937 3.32422 20.7136 3.33665C20.7771 3.3762 20.8374 3.42309 20.8925 3.47821Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_17_95">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/shared/icons/chat_start.svg b/public/assets/shared/icons/chat_start.svg
new file mode 100644
index 0000000..f5d0295
--- /dev/null
+++ b/public/assets/shared/icons/chat_start.svg
@@ -0,0 +1,13 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7_8)">
+<path d="M10.0193 13.7879C10.7089 13.7188 11.3236 14.2225 11.3913 14.9121C11.4589 15.6018 10.9537 16.2153 10.2638 16.2814C9.576 16.3473 8.96458 15.8442 8.89713 15.1566C8.82972 14.4691 9.33174 13.8567 10.0193 13.7879Z" fill="black"/>
+<path d="M6.25853 13.7869C6.94617 13.7223 7.55646 14.2261 7.62299 14.9134C7.6895 15.6008 7.18713 16.2124 6.49982 16.2808C5.80991 16.3493 5.19545 15.8447 5.12868 15.1547C5.06195 14.4648 5.56829 13.8518 6.25853 13.7869Z" fill="black"/>
+<path d="M13.7992 13.7872C14.4861 13.7264 15.0927 14.232 15.1565 14.9184C15.2204 15.6047 14.7173 16.2135 14.0311 16.2804C13.3407 16.3475 12.7271 15.8408 12.6629 15.1502C12.5987 14.4596 13.1083 13.8484 13.7992 13.7872Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4305 1.17694C14.956 1.16061 15.5389 1.22817 16.056 1.3095C17.7169 1.57214 19.264 2.26468 20.521 3.38674C23.2042 5.78214 23.5051 9.53897 21.1182 12.2645C21.2328 12.4302 21.4375 12.6555 21.573 12.8126L22.2451 13.5948C22.3739 13.7431 22.5788 13.9537 22.6675 14.1171C22.8406 14.4525 22.6509 14.9684 22.2472 15.0147C21.8968 15.055 21.4996 15.0378 21.1421 15.0377L18.9376 15.0393C18.8846 17.0577 18.2033 18.6266 16.7609 20.0489C15.1741 21.6134 12.9883 22.4362 10.7895 22.6044C10.4047 22.6338 9.88165 22.6188 9.48641 22.6181L2.75778 22.6184C2.4602 22.6184 2.1435 22.6293 1.84967 22.6005C1.57853 22.5615 1.35276 22.3398 1.32906 22.0673C1.3004 21.7377 1.44931 21.5882 1.65004 21.3569C1.76546 21.2237 1.8877 21.0885 2.00568 20.9545C2.37749 20.5353 2.74428 20.1119 3.10591 19.6839C2.62295 19.188 2.06495 18.2652 1.80591 17.6332C1.17683 16.0875 1.14486 14.2713 1.7881 12.7236C2.64568 10.6604 4.34993 9.26452 6.37201 8.42736C6.376 7.97452 6.38765 7.4407 6.48087 6.99456C6.72847 5.80934 7.28845 4.74136 8.10858 3.85627C9.53861 2.31303 11.4779 1.4643 13.5479 1.23068C13.8361 1.19815 14.1405 1.18829 14.4305 1.17694ZM17.6494 14.7109C17.32 11.0015 13.3582 8.81665 9.92215 8.98103C9.59566 8.99444 9.28847 9.00706 8.96163 9.04553C6.16229 9.37489 3.2716 11.2215 2.6731 14.1273C2.58231 14.5681 2.57703 15.0211 2.59258 15.4694C2.64087 16.7551 3.25082 17.9938 4.11771 18.9285C4.37667 19.1778 4.67325 19.4104 4.56416 19.8174C4.51579 19.9977 4.40648 20.1299 4.27962 20.2687C3.97934 20.5969 3.6956 20.9416 3.39389 21.2696C3.37169 21.2937 3.34922 21.3174 3.32651 21.341C3.99598 21.3673 4.75509 21.3511 5.43231 21.3511L9.12638 21.3509C9.79785 21.3518 10.5127 21.3707 11.1767 21.3005C13.008 21.1119 14.7195 20.3025 16.0267 19.0067C17.0741 17.974 17.6637 16.5648 17.6637 15.0941C17.6633 14.9655 17.6609 14.839 17.6494 14.7109ZM15.3204 2.48033C14.9538 2.44955 14.5528 2.42806 14.1881 2.45263C12.1053 2.58767 10.2917 3.26165 8.88623 4.86308C8.12099 5.73678 7.67849 6.84638 7.63251 8.00677C8.22555 7.89427 8.76979 7.79061 9.3765 7.74557C11.5485 7.58427 13.8281 8.10497 15.6388 9.33708C16.5456 9.94214 17.3182 10.7275 17.9082 11.644C18.2777 12.2495 18.6624 13.0704 18.7764 13.7772C19.4308 13.7944 20.0924 13.7697 20.7437 13.7831C20.5947 13.6208 20.4441 13.4328 20.3037 13.2619C20.1197 13.0292 19.8775 12.8084 19.7262 12.5547C19.4212 12.0436 19.9744 11.6782 20.2616 11.3352C20.6637 10.8549 20.9417 10.38 21.1704 9.80024C21.839 8.10444 21.3993 6.21188 20.2199 4.85722C19.0048 3.45 17.1603 2.63476 15.3204 2.48033Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_7_8">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/shared/icons/checkmark.svg b/public/assets/shared/icons/checkmark.svg
new file mode 100644
index 0000000..53b5210
--- /dev/null
+++ b/public/assets/shared/icons/checkmark.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_21_9)">
+<path d="M9.55006 15.15L18.0251 6.675C18.2251 6.475 18.4584 6.375 18.7251 6.375C18.9917 6.375 19.2251 6.475 19.4251 6.675C19.6251 6.875 19.7251 7.11267 19.7251 7.388C19.7251 7.66333 19.6251 7.90067 19.4251 8.1L10.2501 17.3C10.0501 17.5 9.81673 17.6 9.55006 17.6C9.28339 17.6 9.05006 17.5 8.85006 17.3L4.55006 13C4.35006 12.8 4.25406 12.5627 4.26206 12.288C4.27006 12.0133 4.37439 11.7757 4.57506 11.575C4.77572 11.3743 5.01339 11.2743 5.28806 11.275C5.56272 11.2757 5.80006 11.3757 6.00006 11.575L9.55006 15.15Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_21_9">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/shared/icons/close.svg b/public/assets/shared/icons/close.svg
new file mode 100644
index 0000000..51a0c12
--- /dev/null
+++ b/public/assets/shared/icons/close.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <g>
+      <rect width="16" height="16" />
+      <path d="M0 0L6.66667 6.66667M0 6.66667L6.66667 0" fill="none" stroke-width="1.5" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" transform="translate(4.667 4.667)" />
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/public/assets/shared/icons/copy.svg b/public/assets/shared/icons/copy.svg
new file mode 100644
index 0000000..f6f00e7
--- /dev/null
+++ b/public/assets/shared/icons/copy.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_16_13)">
+<path d="M19.0781 1.5C20.968 1.5 22.5 3.03203 22.5 4.92188V15.3281C22.5 17.218 20.968 18.75 19.0781 18.75H18.7422L18.75 19.1094C18.7501 19.1152 18.75 19.1211 18.75 19.127C18.7475 20.0207 18.3917 20.8778 17.7598 21.5098C17.1672 22.1023 16.3769 22.4516 15.5439 22.4951L15.377 22.5H5.24805C4.25498 22.4971 3.3028 22.1016 2.60059 21.3994C1.94217 20.741 1.55327 19.863 1.50488 18.9375L1.5 18.752V8.62305C1.50254 7.72929 1.85825 6.87222 2.49023 6.24023C3.12222 5.60825 3.97929 5.25254 4.87305 5.25H5.25V4.92188C5.25 3.03203 6.78203 1.5 8.67188 1.5H19.0781ZM4.87695 6.75C4.37961 6.75146 3.90344 6.95008 3.55176 7.30176C3.24409 7.60943 3.05354 8.01228 3.00977 8.44141L3 8.62695V18.748C3.00183 19.3447 3.2392 19.9169 3.66113 20.3389C4.03048 20.7082 4.51509 20.9359 5.03027 20.9883L5.25195 21H15.373L15.5586 20.9902C15.9877 20.9465 16.3906 20.7559 16.6982 20.4482C17.0499 20.0966 17.2485 19.6204 17.25 19.123L17.2422 18.75H8.67188C6.78203 18.75 5.25 17.218 5.25 15.3281V6.75H4.87695ZM8.67188 3C7.61045 3 6.75 3.86045 6.75 4.92188V15.3281C6.75 16.3895 7.61045 17.25 8.67188 17.25H19.0781C20.1395 17.25 21 16.3895 21 15.3281V4.92188C21 3.86045 20.1395 3 19.0781 3H8.67188Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_16_13">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/shared/icons/cv.svg b/public/assets/shared/icons/cv.svg
new file mode 100644
index 0000000..d0aba2f
--- /dev/null
+++ b/public/assets/shared/icons/cv.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_26_28)">
+<path d="M19.7607 3.67969L7.54975 1.52344C7.15802 1.4545 6.75496 1.54397 6.42919 1.77217C6.10342 2.00037 5.88162 2.34861 5.81256 2.74031L3.0235 18.5841C2.98938 18.7782 2.99385 18.9771 3.03665 19.1694C3.07944 19.3618 3.15973 19.5439 3.27291 19.7052C3.38609 19.8665 3.52996 20.004 3.69628 20.1097C3.8626 20.2154 4.04813 20.2873 4.24225 20.3213L16.4532 22.4775C16.6474 22.5117 16.8464 22.5074 17.0388 22.4647C17.2313 22.4219 17.4135 22.3417 17.5749 22.2285C17.7363 22.1153 17.8739 21.9714 17.9796 21.805C18.0854 21.6386 18.1573 21.453 18.1913 21.2588L20.9804 5.415C21.0487 5.02315 20.9586 4.6202 20.7299 4.29478C20.5011 3.96936 20.1525 3.74811 19.7607 3.67969ZM16.7119 21L4.50006 18.8438L7.28912 3L19.5001 5.15625L16.7119 21ZM8.37568 5.47688C8.41043 5.2811 8.52149 5.10713 8.68445 4.99321C8.84742 4.8793 9.04895 4.83475 9.24475 4.86938L17.026 6.24281C17.2109 6.27521 17.377 6.37579 17.4914 6.52467C17.6057 6.67356 17.6601 6.85993 17.6437 7.04696C17.6274 7.23399 17.5414 7.40808 17.4029 7.53484C17.2644 7.66159 17.0834 7.73179 16.8957 7.73156C16.8517 7.73149 16.8078 7.72772 16.7644 7.72031L8.98319 6.34594C8.78741 6.3112 8.61344 6.20014 8.49952 6.03717C8.3856 5.87421 8.34106 5.67267 8.37568 5.47688ZM7.85631 8.43188C7.8734 8.33485 7.90945 8.24215 7.96238 8.15906C8.01531 8.07597 8.08409 8.00412 8.16479 7.94762C8.2455 7.89111 8.33654 7.85107 8.43273 7.82976C8.52892 7.80845 8.62836 7.8063 8.72537 7.82344L16.5066 9.19781C16.6929 9.22896 16.8605 9.3292 16.976 9.47853C17.0916 9.62786 17.1466 9.81527 17.13 10.0034C17.1134 10.1915 17.0265 10.3664 16.8866 10.4932C16.7468 10.62 16.5642 10.6894 16.3754 10.6875C16.331 10.6876 16.2868 10.6835 16.2432 10.6753L8.46194 9.30188C8.26631 9.26671 8.09265 9.15533 7.97909 8.9922C7.86553 8.82907 7.82137 8.62754 7.85631 8.43188ZM7.336 11.3859C7.37139 11.1907 7.48273 11.0174 7.64562 10.9041C7.80851 10.7907 8.00967 10.7466 8.20506 10.7813L12.0938 11.4647C12.2787 11.4971 12.4447 11.5976 12.559 11.7464C12.6734 11.8952 12.7278 12.0814 12.7116 12.2684C12.6953 12.4553 12.6096 12.6294 12.4713 12.7562C12.3329 12.8831 12.1521 12.9534 11.9644 12.9534C11.9204 12.9534 11.8765 12.9496 11.8332 12.9422L7.94256 12.255C7.74696 12.22 7.57322 12.1089 7.4595 11.9459C7.34577 11.783 7.30135 11.5816 7.336 11.3859Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_26_28">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/shared/icons/delete.svg b/public/assets/shared/icons/delete.svg
new file mode 100644
index 0000000..4b33171
--- /dev/null
+++ b/public/assets/shared/icons/delete.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_74_2)">
+<path d="M7.99996 2.66666C5.05396 2.66666 2.66663 5.05466 2.66663 7.99999C2.66663 10.9453 5.05396 13.3333 7.99996 13.3333C10.946 13.3333 13.3333 10.9453 13.3333 7.99999C13.3333 5.05466 10.946 2.66666 7.99996 2.66666ZM10.4713 9.52866C10.5963 9.65366 10.6665 9.82321 10.6665 9.99999C10.6665 10.1768 10.5963 10.3463 10.4713 10.4713C10.3463 10.5963 10.1767 10.6666 9.99996 10.6666C9.82318 10.6666 9.65363 10.5963 9.52863 10.4713L7.99996 8.94266L6.47129 10.4713C6.40952 10.5334 6.33608 10.5827 6.25519 10.6164C6.17431 10.65 6.08756 10.6673 5.99996 10.6673C5.91235 10.6673 5.82561 10.65 5.74472 10.6164C5.66384 10.5827 5.5904 10.5334 5.52863 10.4713C5.40365 10.3463 5.33344 10.1768 5.33344 9.99999C5.33344 9.82321 5.40365 9.65368 5.52863 9.52866L7.05729 7.99999L5.52863 6.47132C5.40362 6.34632 5.33339 6.17677 5.33339 5.99999C5.33339 5.82321 5.40362 5.65366 5.52863 5.52866C5.65363 5.40365 5.82318 5.33342 5.99996 5.33342C6.17674 5.33342 6.34629 5.40365 6.47129 5.52866L7.99996 7.05732L9.52863 5.52866C9.65363 5.40365 9.82318 5.33342 9.99996 5.33342C10.1767 5.33342 10.3463 5.40365 10.4713 5.52866C10.5963 5.65366 10.6665 5.82321 10.6665 5.99999C10.6665 6.17677 10.5963 6.34632 10.4713 6.47132L8.94263 7.99999L10.4713 9.52866Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_74_2">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/shared/icons/design_edit.svg b/public/assets/shared/icons/design_edit.svg
new file mode 100644
index 0000000..5d195d9
--- /dev/null
+++ b/public/assets/shared/icons/design_edit.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.7617 0H20.3159C20.4605 0.0564586 20.643 0.0753656 20.8014 0.131551C21.3592 0.333231 21.8152 0.746457 22.0707 1.28181C22.3247 1.82224 22.3539 2.44138 22.1519 3.0033C22.0744 3.21484 21.966 3.41371 21.8302 3.59341C21.6313 3.85648 21.2685 4.17877 21.0277 4.42717C20.896 4.56302 20.6116 4.85854 20.4746 4.96999C20.64 4.97404 20.8039 4.9749 20.9678 4.99873C21.4171 5.06715 21.8315 5.28146 22.1469 5.60863C22.4348 5.90906 22.6246 6.2897 22.6915 6.70029C22.738 6.98616 22.7206 7.63234 22.7205 7.9498L22.72 10.1785V14.7047L22.7205 16.1654C22.7208 16.4387 22.7214 16.7125 22.7192 16.9848C22.7146 17.5641 22.4863 18.0898 22.0653 18.4888C21.8098 18.731 21.4262 18.9411 21.076 19.0063C20.7394 19.0689 20.32 19.0538 19.9717 19.0539L18.4415 19.0538L15.7987 19.0534C15.3846 19.0534 14.9689 19.0543 14.5547 19.0559C14.5373 19.0559 14.5129 19.0534 14.4953 19.0518C14.5612 20.212 14.6744 21.422 14.7603 22.5851C14.9815 22.5839 15.2026 22.584 15.4239 22.5855C15.6182 22.5852 15.9566 22.5715 16.1322 22.6155C16.2523 22.6457 16.3626 22.7065 16.4522 22.7919C16.7218 23.0532 16.7359 23.5191 16.4628 23.7787C16.3899 23.848 16.3109 23.9026 16.2201 23.9462C16.1815 23.9653 16.1366 23.9774 16.1016 24H7.89763C7.745 23.9145 7.65471 23.9059 7.52154 23.7674C7.2573 23.4925 7.28389 23.0334 7.55713 22.7794C7.64353 22.6995 7.74879 22.6427 7.86306 22.6146C8.03209 22.5727 8.30811 22.5846 8.48977 22.5846C8.73877 22.583 8.98779 22.5846 9.23674 22.5895C9.23826 22.4886 9.25537 22.3419 9.26382 22.2368L9.31592 21.5664C9.37877 20.737 9.45422 19.882 9.50278 19.0535L9.48563 19.0547C9.38891 19.0604 9.24295 19.0543 9.14123 19.0541L8.41794 19.0538L6.18328 19.0535L4.25868 19.0539C3.95403 19.0539 3.64736 19.0564 3.34407 19.0499C2.59749 19.0336 1.96407 18.6807 1.56983 18.0418C1.21859 17.4727 1.27797 16.902 1.27883 16.2635L1.27885 14.8716L1.27835 10.4624L1.27834 8.01775C1.27836 7.69785 1.26081 7.00152 1.30625 6.71184C1.37039 6.30407 1.5547 5.9247 1.8356 5.62223C2.14132 5.29608 2.54564 5.07929 2.98648 5.00514C3.26495 4.95616 3.8021 4.9737 4.10717 4.97388L5.95006 4.97393L11.3672 4.97379L13.1262 4.97381C13.4581 4.97385 13.8289 4.98166 14.1585 4.96897L17.2206 1.89745L18.0893 1.0259C18.3137 0.800815 18.5431 0.549773 18.8035 0.370121C18.998 0.234837 19.2197 0.144638 19.4473 0.0821339C19.5489 0.0542282 19.6639 0.0369735 19.7617 0ZM19.0689 6.38998C18.8396 6.58266 18.4687 6.97666 18.2424 7.20322L15.5401 9.89559L14.717 10.7147C14.5959 10.8354 14.3759 11.0424 14.2765 11.1668C14.3325 12.2133 14.105 13.1084 13.3903 13.9032C13.1493 14.1714 12.8725 14.3745 12.5547 14.5429C11.335 15.1891 9.58187 15.5264 8.207 15.7298C7.87268 15.7793 7.52641 15.8429 7.18919 15.8595C6.98578 15.8694 6.80102 15.8071 6.65049 15.6684C6.516 15.5446 6.43889 15.3864 6.4316 15.2027C6.42015 14.9139 6.52131 14.3528 6.56708 14.049C6.77963 12.6384 7.2459 10.0915 8.20815 9.05975C8.82217 8.40138 9.74004 8.02342 10.634 7.99527C10.7999 7.99004 10.9628 8.00579 11.128 8.00968C11.5939 7.53096 12.0726 7.06304 12.5428 6.58855C12.6108 6.52 12.6816 6.44756 12.7525 6.38239C12.4787 6.3953 12.1548 6.38735 11.878 6.38709L10.3817 6.38667L5.76412 6.38691L4.1812 6.38627C3.97984 6.38618 3.56001 6.37382 3.38175 6.39129C3.15085 6.41002 3.00688 6.42957 2.839 6.622C2.74873 6.72546 2.69818 6.89221 2.69384 7.02993C2.68654 7.26136 2.68972 7.50158 2.68981 7.73453L2.69053 9.04163L2.69072 13.1134L2.69077 15.8239L2.69007 16.6001C2.68968 16.9216 2.64676 17.2717 2.93966 17.4947C3.07712 17.5993 3.23343 17.631 3.40313 17.6337C3.85175 17.637 4.30245 17.6337 4.75122 17.6334L7.41971 17.6337L15.5853 17.634L19.2148 17.6338H20.2119C20.5832 17.6337 20.9672 17.6932 21.1995 17.3359C21.2828 17.2076 21.3013 17.0968 21.3047 16.9466C21.3081 16.6802 21.3066 16.4105 21.3065 16.1436L21.3059 14.6063V9.93047L21.3065 7.8799C21.3066 7.69252 21.3073 7.50428 21.3067 7.31757C21.3061 7.062 21.3304 6.79889 21.1385 6.59921C21.0337 6.49007 20.9131 6.41734 20.7604 6.40382C20.5305 6.37825 20.3011 6.38559 20.071 6.38585C19.7369 6.38517 19.4029 6.38654 19.0689 6.38998ZM10.938 19.0472C10.9071 19.117 10.8752 19.6811 10.8672 19.7902L10.7266 21.6458C10.7093 21.8762 10.6875 22.3692 10.6521 22.5834L13.0606 22.5858C13.1513 22.5866 13.2489 22.5858 13.3388 22.5906C13.2664 21.4161 13.1611 20.231 13.0765 19.0561L11.5973 19.0542C11.4721 19.0545 11.0286 19.063 10.938 19.0472ZM7.95125 14.3336C8.40773 14.2645 8.86237 14.1838 9.31472 14.0914C9.46038 14.0623 9.81177 13.9935 9.94037 13.9512C10.6297 13.7902 11.6024 13.5449 12.1834 13.1109C12.3069 13.0187 12.4722 12.8027 12.5542 12.6716C12.854 12.1871 12.9487 11.6035 12.8174 11.0492C12.6878 10.4998 12.3448 10.0247 11.8642 9.72855C11.4095 9.44849 11.02 9.39787 10.5011 9.426C9.96666 9.51766 9.43353 9.72507 9.10824 10.1862C8.59496 10.9138 8.25628 12.6143 8.09087 13.5154C8.04113 13.7863 8.01103 14.0655 7.95125 14.3336ZM20.0323 1.42249C19.8545 1.43624 19.6935 1.45956 19.5519 1.57826C19.3625 1.73729 19.1875 1.92609 19.013 2.10175L18.019 3.10109L14.3264 6.80593L13.1914 7.94484C13.0402 8.09658 12.7608 8.39591 12.6143 8.51723C12.7444 8.61894 12.8765 8.70551 13.0054 8.8113C13.2609 9.02081 13.4465 9.23725 13.6456 9.49725C13.6853 9.55747 13.722 9.61226 13.7644 9.67056L15.4997 7.93549L18.6707 4.77397L20.0405 3.40931C20.2623 3.18841 20.5171 2.95171 20.7184 2.71579C20.8183 2.59869 20.8715 2.39082 20.8708 2.23516C20.8703 2.01702 20.7829 1.80807 20.628 1.65457C20.4488 1.47738 20.2753 1.43296 20.0323 1.42249Z" fill="black"/>
+</svg>
diff --git a/public/assets/shared/icons/email.svg b/public/assets/shared/icons/email.svg
new file mode 100644
index 0000000..3753fcb
--- /dev/null
+++ b/public/assets/shared/icons/email.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_19_132)">
+<path d="M12.5743 4.02149C11.4297 3.9381 10.2806 4.10167 9.20513 4.50196C8.12953 4.90229 7.1524 5.52929 6.34087 6.34082C5.52933 7.15236 4.90234 8.12948 4.502 9.20508C4.10171 10.2806 3.93815 11.4297 4.02153 12.5742C4.30958 16.807 8.00636 20 12.2471 20H15.1993C15.6392 20 15.9989 19.6401 15.9991 19.2002C15.9991 18.7601 15.6393 18.3995 15.1993 18.3994H12.2627C9.27835 18.3994 6.54218 16.4635 5.7979 13.5752C4.60572 8.9345 8.92577 4.60579 13.5665 5.80567C16.463 6.5418 18.3995 9.27817 18.3995 12.2627V13.1426C18.3995 13.7747 17.8314 14.3994 17.1993 14.3994C16.5673 14.3992 15.9991 13.7746 15.9991 13.1426V12.1426C15.9991 10.1343 14.5751 8.32601 12.5909 8.0459C11.9595 7.95202 11.3143 8.0102 10.71 8.21582C10.1061 8.42139 9.5601 8.7684 9.11724 9.22754C8.6742 9.68702 8.34662 10.2461 8.16313 10.8574C7.97965 11.4688 7.94476 12.1157 8.06157 12.7432C8.20231 13.4989 8.55831 14.1979 9.08599 14.7568C9.61381 15.3159 10.2916 15.7116 11.0381 15.8955C12.5104 16.2396 13.9109 15.7672 14.8311 14.8311C15.5432 15.8072 16.9673 16.3189 18.2715 15.7988C19.3437 15.3748 20 14.2791 20 13.127V12.2549C20 8.00613 16.807 4.30954 12.5743 4.02149ZM11.9991 9.59863C13.3271 9.59887 14.3995 10.6709 14.3995 11.999C14.3992 13.3269 13.327 14.3992 11.9991 14.3994C10.671 14.3994 9.59892 13.3271 9.59868 11.999C9.59868 10.6708 10.6708 9.59863 11.9991 9.59863Z" fill="#FF0000"/>
+</g>
+<defs>
+<clipPath id="clip0_19_132">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/shared/icons/link_url.svg b/public/assets/shared/icons/link_url.svg
new file mode 100644
index 0000000..3d5a33d
--- /dev/null
+++ b/public/assets/shared/icons/link_url.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_14_2)">
+<path d="M2.25 18.125V6.875C2.25 6.17881 2.52627 5.51084 3.01855 5.01855C3.51084 4.52627 4.17881 4.25 4.875 4.25H12.7256C13.1398 4.25 13.4756 4.58579 13.4756 5C13.4756 5.41421 13.1398 5.75 12.7256 5.75H4.875C4.57663 5.75 4.29008 5.86812 4.0791 6.0791C3.86812 6.29008 3.75 6.57663 3.75 6.875V18.125C3.75 18.4234 3.86812 18.7099 4.0791 18.9209C4.29008 19.1319 4.57663 19.25 4.875 19.25H16.125C16.2727 19.25 16.4192 19.2206 16.5557 19.1641C16.6921 19.1075 16.8165 19.0253 16.9209 18.9209C17.0253 18.8165 17.1075 18.6921 17.1641 18.5557C17.2206 18.4192 17.25 18.2727 17.25 18.125V9.5C17.25 9.08579 17.5858 8.75 18 8.75C18.4142 8.75 18.75 9.08579 18.75 9.5V18.125C18.75 18.4697 18.6817 18.8114 18.5498 19.1299C18.4179 19.4482 18.2251 19.7378 17.9814 19.9814C17.7378 20.2251 17.4482 20.4179 17.1299 20.5498C16.8114 20.6817 16.4697 20.75 16.125 20.75H4.875C4.17881 20.75 3.51084 20.4737 3.01855 19.9814C2.52627 19.4892 2.25 18.8212 2.25 18.125ZM20.25 7.25V3.81055L11.0303 13.0303C10.7374 13.3232 10.2626 13.3232 9.96973 13.0303C9.67683 12.7374 9.67683 12.2626 9.96973 11.9697L19.1895 2.75H15.75C15.3358 2.75 15 2.41421 15 2C15 1.58579 15.3358 1.25 15.75 1.25H21C21.4142 1.25 21.75 1.58579 21.75 2V7.25C21.75 7.66421 21.4142 8 21 8C20.5858 8 20.25 7.66421 20.25 7.25Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_14_2">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/shared/icons/moon.svg b/public/assets/shared/icons/moon.svg
new file mode 100644
index 0000000..359a0c8
--- /dev/null
+++ b/public/assets/shared/icons/moon.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6_3)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4725 2.61698C12.191 2.57498 12.5504 3.47104 12.0019 3.93719C10.7304 5.01785 9.98438 6.59585 9.98438 8.29687C9.98438 11.4552 12.5448 14.0156 15.7031 14.0156C17.4041 14.0156 18.9821 13.2696 20.0628 11.998C20.5285 11.4501 21.4237 11.8081 21.3831 12.5261C21.1031 17.4802 16.9955 21.375 12.0117 21.375C6.82758 21.375 2.625 17.1724 2.625 11.9883C2.625 7.03383 6.47548 2.94084 11.3953 2.6215L11.4001 2.6212L11.4725 2.61698ZM9.5707 4.48612L9.47433 4.51804C6.35391 5.57679 4.125 8.5334 4.125 11.9883C4.125 16.344 7.656 19.875 12.0117 19.875C15.487 19.875 18.4556 17.6205 19.4989 14.4748L19.5135 14.4294L19.511 14.4311C18.4052 15.1185 17.1174 15.5035 15.7675 15.5153L15.7031 15.5156C11.7163 15.5156 8.48438 12.2837 8.48438 8.29687C8.48438 6.92355 8.87053 5.61234 9.5689 4.48905L9.5707 4.48612Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_6_3">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/shared/icons/original_size.svg b/public/assets/shared/icons/original_size.svg
new file mode 100644
index 0000000..786d861
--- /dev/null
+++ b/public/assets/shared/icons/original_size.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <rect width="16" height="16" />
+    <path d="M1.52534 6.47533C1.39734 6.34733 1.33334 6.18889 1.33334 6C1.33334 6 1.33334 1.33333 1.33334 1.33333C1.33334 1.33333 0.666669 1.33333 0.666669 1.33333C0.47778 1.33333 0.319558 1.26933 0.192002 1.14133C0.0644467 1.01333 0.000447035 0.855111 2.14577e-06 0.666667C-0.000442505 0.478222 0.0635576 0.32 0.192002 0.192C0.320447 0.0640001 0.478669 0 0.666669 0C0.666669 0 1.66667 0 1.66667 0C1.94445 0 2.18067 0.0973334 2.37534 0.292C2.57 0.486667 2.66711 0.722667 2.66667 1C2.66667 1 2.66667 6 2.66667 6C2.66667 6.18889 2.60267 6.34733 2.47467 6.47533C2.34667 6.60333 2.18845 6.66711 2 6.66667C1.81156 6.66622 1.65334 6.60222 1.52534 6.47467C1.52534 6.47467 1.52534 6.47533 1.52534 6.47533ZM7.52534 6.47467C7.39734 6.34756 7.33334 6.18933 7.33334 6C7.33334 6 7.33334 1.33333 7.33334 1.33333C7.33334 1.33333 6.66667 1.33333 6.66667 1.33333C6.47778 1.33333 6.31956 1.26933 6.192 1.14133C6.06445 1.01333 6.00045 0.855111 6 0.666667C5.99956 0.478222 6.06356 0.32 6.192 0.192C6.32045 0.0640001 6.47867 0 6.66667 0C6.66667 0 7.66667 0 7.66667 0C7.94445 0 8.18067 0.0973334 8.37534 0.292C8.57 0.486667 8.66711 0.722667 8.66667 1C8.66667 1 8.66667 6 8.66667 6C8.66667 6.18889 8.60267 6.34733 8.47467 6.47533C8.34667 6.60333 8.18845 6.66711 8 6.66667C7.81156 6.66622 7.65334 6.60222 7.52534 6.47467C7.52534 6.47467 7.52534 6.47467 7.52534 6.47467ZM4.192 3.808C4.064 3.68045 4 3.52222 4 3.33333C4 3.14444 4.064 2.98622 4.192 2.85867C4.32 2.73111 4.47822 2.66711 4.66667 2.66667C4.85511 2.66622 5.01356 2.73022 5.142 2.85867C5.27045 2.98711 5.33422 3.14533 5.33333 3.33333C5.33245 3.52133 5.26845 3.67978 5.14133 3.80867C5.01422 3.93756 4.856 4.00134 4.66667 4C4.47733 3.99867 4.31911 3.93467 4.192 3.808C4.192 3.808 4.192 3.808 4.192 3.808ZM4.192 6.47467C4.064 6.34756 4 6.18933 4 6C4 5.81067 4.064 5.65244 4.192 5.52533C4.32 5.39822 4.47822 5.33422 4.66667 5.33333C4.85511 5.33244 5.01356 5.39644 5.142 5.52533C5.27045 5.65422 5.33422 5.81244 5.33333 6C5.33245 6.18755 5.26845 6.346 5.14133 6.47533C5.01422 6.60466 4.856 6.66844 4.66667 6.66667C4.47733 6.66489 4.31911 6.60089 4.192 6.47467C4.192 6.47467 4.192 6.47467 4.192 6.47467Z" fill="#000000" transform="translate(3.333 4.667)" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/public/assets/shared/icons/portfolio.svg b/public/assets/shared/icons/portfolio.svg
new file mode 100644
index 0000000..8a65ff4
--- /dev/null
+++ b/public/assets/shared/icons/portfolio.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_26_40)">
+<path d="M21.4444 6.31818H14.704L12.0071 4.30909C11.7374 4.1092 11.4102 4.00083 11.0738 4H6.66667C6.25411 4 5.85845 4.16282 5.56672 4.45265C5.275 4.74248 5.11111 5.13557 5.11111 5.54545V7.09091H3.55556C3.143 7.09091 2.74733 7.25373 2.45561 7.54356C2.16389 7.83339 2 8.22648 2 8.63636V19.4545C2 19.8644 2.16389 20.2575 2.45561 20.5473C2.74733 20.8372 3.143 21 3.55556 21H18.4199C18.8093 20.9995 19.1827 20.8456 19.4581 20.572C19.7334 20.2984 19.8884 19.9274 19.8889 19.5405V17.9091H21.531C21.9204 17.9086 22.2938 17.7546 22.5692 17.4811C22.8445 17.2075 22.9995 16.8365 23 16.4496V7.86364C23 7.45376 22.8361 7.06066 22.5444 6.77084C22.2527 6.48101 21.857 6.31818 21.4444 6.31818ZM18.3333 19.4545H3.55556V8.63636H7.96264L10.8667 10.8C11.0013 10.9003 11.165 10.9545 11.3333 10.9545H18.3333V19.4545ZM21.4444 16.3636H19.8889V10.9545C19.8889 10.5447 19.725 10.1516 19.4333 9.86174C19.1416 9.57192 18.7459 9.40909 18.3333 9.40909H11.5929L8.89597 7.4C8.62632 7.20011 8.29908 7.09174 7.96264 7.09091H6.66667V5.54545H11.0738L13.9778 7.70909C14.1124 7.80941 14.2762 7.86364 14.4444 7.86364H21.4444V16.3636Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_26_40">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/shared/icons/shevron-down.svg b/public/assets/shared/icons/shevron-down.svg
new file mode 100644
index 0000000..cd16e78
--- /dev/null
+++ b/public/assets/shared/icons/shevron-down.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_43_16)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.40692 10.6053C7.59442 10.7926 7.84859 10.8978 8.11359 10.8978C8.37859 10.8978 8.63276 10.7926 8.82026 10.6053L12.5923 6.83465C12.7798 6.64705 12.8851 6.39265 12.885 6.12741C12.885 5.99608 12.8591 5.86604 12.8088 5.74471C12.7585 5.62339 12.6848 5.51316 12.5919 5.42031C12.499 5.32747 12.3888 5.25383 12.2674 5.2036C12.1461 5.15337 12.016 5.12753 11.8847 5.12756C11.7534 5.12759 11.6233 5.15349 11.502 5.20378C11.3807 5.25407 11.2704 5.32776 11.1776 5.42065L8.11359 8.48398L5.04959 5.41998C4.95739 5.32443 4.84708 5.24819 4.7251 5.19573C4.60312 5.14326 4.47192 5.11561 4.33914 5.1144C4.20636 5.11318 4.07467 5.13842 3.95175 5.18865C3.82883 5.23887 3.71714 5.31307 3.62321 5.40692C3.52927 5.50076 3.45496 5.61238 3.40463 5.73525C3.35429 5.85812 3.32892 5.98979 3.33001 6.12257C3.33111 6.25535 3.35863 6.38658 3.41098 6.50861C3.46333 6.63064 3.53946 6.74102 3.63492 6.83331L7.40692 10.6066L7.40692 10.6053Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_43_16">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/shared/icons/shevron-left.svg b/public/assets/shared/icons/shevron-left.svg
new file mode 100644
index 0000000..6a16a9f
--- /dev/null
+++ b/public/assets/shared/icons/shevron-left.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_43_2)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.29331 8.70666C5.10604 8.51916 5.00085 8.265 5.00085 7.99999C5.00085 7.73499 5.10604 7.48083 5.29331 7.29333L9.06397 3.52133C9.25157 3.33382 9.50597 3.22851 9.77121 3.22858C9.90254 3.22861 10.0326 3.25451 10.1539 3.30479C10.2752 3.35508 10.3855 3.42877 10.4783 3.52166C10.5712 3.61455 10.6448 3.72482 10.695 3.84616C10.7453 3.96751 10.7711 4.09756 10.7711 4.2289C10.771 4.36023 10.7451 4.49027 10.6948 4.61159C10.6446 4.73292 10.5709 4.84315 10.478 4.93599L7.41464 7.99999L10.4786 11.064C10.5742 11.1562 10.6504 11.2665 10.7029 11.3885C10.7554 11.5105 10.783 11.6417 10.7842 11.7744C10.7854 11.9072 10.7602 12.0389 10.71 12.1618C10.6598 12.2848 10.5856 12.3964 10.4917 12.4904C10.3979 12.5843 10.2862 12.6586 10.1634 12.709C10.0405 12.7593 9.90883 12.7847 9.77605 12.7836C9.64327 12.7825 9.51204 12.755 9.39001 12.7026C9.26798 12.6503 9.1576 12.5741 9.06531 12.4787L5.29197 8.70666H5.29331Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_43_2">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/shared/icons/shevron-right.svg b/public/assets/shared/icons/shevron-right.svg
new file mode 100644
index 0000000..649a9ae
--- /dev/null
+++ b/public/assets/shared/icons/shevron-right.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_43_11)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7067 8.70666C10.894 8.51916 10.9991 8.265 10.9991 7.99999C10.9991 7.73499 10.894 7.48083 10.7067 7.29333L6.93603 3.52133C6.74843 3.33382 6.49403 3.22851 6.22879 3.22858C6.09746 3.22861 5.96742 3.25451 5.84609 3.30479C5.72477 3.35508 5.61454 3.42877 5.52169 3.52166C5.42885 3.61455 5.35521 3.72482 5.30498 3.84616C5.25475 3.96751 5.22891 4.09756 5.22894 4.2289C5.22897 4.36023 5.25487 4.49027 5.30516 4.61159C5.35545 4.73292 5.42914 4.84315 5.52203 4.93599L8.58536 7.99999L5.52136 11.064C5.42581 11.1562 5.34957 11.2665 5.29711 11.3885C5.24464 11.5105 5.21699 11.6417 5.21578 11.7744C5.21456 11.9072 5.2398 12.0389 5.29002 12.1618C5.34025 12.2848 5.41445 12.3964 5.5083 12.4904C5.60214 12.5843 5.71376 12.6586 5.83663 12.709C5.9595 12.7593 6.09117 12.7847 6.22395 12.7836C6.35673 12.7825 6.48796 12.755 6.60999 12.7026C6.73202 12.6503 6.8424 12.5741 6.93469 12.4787L10.708 8.70666H10.7067Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_43_11">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/shared/icons/shevron-up.svg b/public/assets/shared/icons/shevron-up.svg
new file mode 100644
index 0000000..c9094bd
--- /dev/null
+++ b/public/assets/shared/icons/shevron-up.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_44_20)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.07697 5.50907C7.26447 5.3218 7.51863 5.21661 7.78364 5.21661C8.04864 5.21661 8.3028 5.3218 8.4903 5.50907L12.2623 9.27973C12.4498 9.46733 12.5551 9.72173 12.5551 9.98697C12.555 10.1183 12.5291 10.2483 12.4788 10.3697C12.4285 10.491 12.3549 10.6012 12.262 10.6941C12.1691 10.7869 12.0588 10.8606 11.9375 10.9108C11.8161 10.961 11.6861 10.9869 11.5547 10.9868C11.4234 10.9868 11.2934 10.9609 11.172 10.9106C11.0507 10.8603 10.9405 10.7866 10.8476 10.6937L7.78364 7.6304L4.71964 10.6944C4.62743 10.79 4.51712 10.8662 4.39515 10.9187C4.27317 10.9711 4.14196 10.9988 4.00918 11C3.8764 11.0012 3.74471 10.976 3.62179 10.9257C3.49887 10.8755 3.38719 10.8013 3.29325 10.7075C3.19931 10.6136 3.12501 10.502 3.07467 10.3791C3.02433 10.2563 2.99897 10.1246 3.00006 9.99181C3.00115 9.85903 3.02867 9.7278 3.08102 9.60577C3.13337 9.48374 3.2095 9.37336 3.30497 9.28107L7.07697 5.50773L7.07697 5.50907Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_44_20">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/shared/icons/sun.svg b/public/assets/shared/icons/sun.svg
new file mode 100644
index 0000000..7ca90e7
--- /dev/null
+++ b/public/assets/shared/icons/sun.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6_2)">
+<path d="M12 15C12.7956 15 13.5587 14.6839 14.1213 14.1213C14.6839 13.5587 15 12.7956 15 12C15 11.2044 14.6839 10.4413 14.1213 9.87868C13.5587 9.31607 12.7956 9 12 9C11.2044 9 10.4413 9.31607 9.87868 9.87868C9.31607 10.4413 9 11.2044 9 12C9 12.7956 9.31607 13.5587 9.87868 14.1213C10.4413 14.6839 11.2044 15 12 15ZM12 17C10.6739 17 9.40215 16.4732 8.46447 15.5355C7.52678 14.5979 7 13.3261 7 12C7 10.6739 7.52678 9.40215 8.46447 8.46447C9.40215 7.52678 10.6739 7 12 7C13.3261 7 14.5979 7.52678 15.5355 8.46447C16.4732 9.40215 17 10.6739 17 12C17 13.3261 16.4732 14.5979 15.5355 15.5355C14.5979 16.4732 13.3261 17 12 17ZM12 2C12.2652 2 12.5196 2.10536 12.7071 2.29289C12.8946 2.48043 13 2.73478 13 3V5C13 5.26522 12.8946 5.51957 12.7071 5.70711C12.5196 5.89464 12.2652 6 12 6C11.7348 6 11.4804 5.89464 11.2929 5.70711C11.1054 5.51957 11 5.26522 11 5V3C11 2.73478 11.1054 2.48043 11.2929 2.29289C11.4804 2.10536 11.7348 2 12 2ZM12 18C12.2652 18 12.5196 18.1054 12.7071 18.2929C12.8946 18.4804 13 18.7348 13 19V21C13 21.2652 12.8946 21.5196 12.7071 21.7071C12.5196 21.8946 12.2652 22 12 22C11.7348 22 11.4804 21.8946 11.2929 21.7071C11.1054 21.5196 11 21.2652 11 21V19C11 18.7348 11.1054 18.4804 11.2929 18.2929C11.4804 18.1054 11.7348 18 12 18ZM3 11H5C5.26522 11 5.51957 11.1054 5.70711 11.2929C5.89464 11.4804 6 11.7348 6 12C6 12.2652 5.89464 12.5196 5.70711 12.7071C5.51957 12.8946 5.26522 13 5 13H3C2.73478 13 2.48043 12.8946 2.29289 12.7071C2.10536 12.5196 2 12.2652 2 12C2 11.7348 2.10536 11.4804 2.29289 11.2929C2.48043 11.1054 2.73478 11 3 11ZM19 11H21C21.2652 11 21.5196 11.1054 21.7071 11.2929C21.8946 11.4804 22 11.7348 22 12C22 12.2652 21.8946 12.5196 21.7071 12.7071C21.5196 12.8946 21.2652 13 21 13H19C18.7348 13 18.4804 12.8946 18.2929 12.7071C18.1054 12.5196 18 12.2652 18 12C18 11.7348 18.1054 11.4804 18.2929 11.2929C18.4804 11.1054 18.7348 11 19 11ZM19.071 4.929C19.2585 5.11653 19.3638 5.37084 19.3638 5.636C19.3638 5.90116 19.2585 6.15547 19.071 6.343L17.657 7.757C17.5648 7.85251 17.4544 7.92869 17.3324 7.9811C17.2104 8.03351 17.0792 8.0611 16.9464 8.06225C16.8136 8.0634 16.6819 8.0381 16.559 7.98782C16.4361 7.93754 16.3245 7.86329 16.2306 7.76939C16.1367 7.6755 16.0625 7.56385 16.0122 7.44095C15.9619 7.31806 15.9366 7.18638 15.9377 7.0536C15.9389 6.92082 15.9665 6.7896 16.0189 6.6676C16.0713 6.54559 16.1475 6.43525 16.243 6.343L17.657 4.929C17.8445 4.74153 18.0988 4.63621 18.364 4.63621C18.6292 4.63621 18.8835 4.74153 19.071 4.929ZM7.757 16.243C7.94447 16.4305 8.04979 16.6848 8.04979 16.95C8.04979 17.2152 7.94447 17.4695 7.757 17.657L6.343 19.07C6.25075 19.1655 6.14041 19.2417 6.0184 19.2941C5.8964 19.3465 5.76518 19.3741 5.6324 19.3752C5.49962 19.3764 5.36794 19.3511 5.24505 19.3008C5.12215 19.2505 5.0105 19.1763 4.9166 19.0824C4.82271 18.9885 4.74846 18.8769 4.69818 18.754C4.6479 18.6311 4.6226 18.4994 4.62375 18.3666C4.6249 18.2338 4.65249 18.1026 4.7049 17.9806C4.75731 17.8586 4.83349 17.7482 4.929 17.656L6.343 16.242C6.53053 16.0545 6.78484 15.9492 7.05 15.9492C7.31516 15.9492 7.56947 16.0545 7.757 16.242V16.243ZM6.343 4.929L7.757 6.343C7.93916 6.5316 8.03995 6.7842 8.03767 7.0464C8.0354 7.3086 7.93023 7.55941 7.74482 7.74482C7.55941 7.93023 7.3086 8.0354 7.0464 8.03767C6.7842 8.03995 6.5316 7.93916 6.343 7.757L4.93 6.343C4.75525 6.15313 4.66066 5.90306 4.666 5.64507C4.67135 5.38708 4.77621 5.14115 4.95868 4.95868C5.14115 4.77621 5.38708 4.67135 5.64507 4.666C5.90306 4.66066 6.15313 4.75525 6.343 4.93V4.929ZM17.657 16.243L19.071 17.657C19.2532 17.8456 19.354 18.0982 19.3517 18.3604C19.3494 18.6226 19.2442 18.8734 19.0588 19.0588C18.8734 19.2442 18.6226 19.3494 18.3604 19.3517C18.0982 19.354 17.8456 19.2532 17.657 19.071L16.243 17.657C16.1475 17.5648 16.0713 17.4544 16.0189 17.3324C15.9665 17.2104 15.9389 17.0792 15.9377 16.9464C15.9366 16.8136 15.9619 16.6819 16.0122 16.559C16.0625 16.4361 16.1367 16.3245 16.2306 16.2306C16.3245 16.1367 16.4361 16.0625 16.559 16.0122C16.6819 15.9619 16.8136 15.9366 16.9464 15.9377C17.0792 15.9389 17.2104 15.9665 17.3324 16.0189C17.4544 16.0713 17.5648 16.1475 17.657 16.243Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_6_2">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/shared/icons/system.svg b/public/assets/shared/icons/system.svg
new file mode 100644
index 0000000..4840504
--- /dev/null
+++ b/public/assets/shared/icons/system.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6_4)">
+<path d="M12 6.75C12.3125 6.75 12.5923 6.94378 12.7021 7.23633L15.7021 15.2363C15.8475 15.6241 15.6513 16.0566 15.2637 16.2021C14.8759 16.3475 14.4434 16.1513 14.2978 15.7637L13.4805 13.583H10.5195L9.70214 15.7637C9.55658 16.1513 9.12404 16.3475 8.73632 16.2021C8.3487 16.0566 8.15246 15.6241 8.29784 15.2363L11.2978 7.23633L11.3467 7.13184C11.478 6.89857 11.7264 6.75 12 6.75ZM11.082 12.083H12.918L12 9.63574L11.082 12.083Z" fill="black"/>
+<path d="M12 1.75081C12.4625 1.75081 12.9161 1.87375 13.3164 2.1053L13.3174 2.10432L19.9297 5.90511L19.9355 5.90804C20.3351 6.14234 20.6669 6.47698 20.8975 6.87874C21.128 7.28053 21.2493 7.73582 21.25 8.19905V15.7987L21.2451 15.9725C21.2194 16.3764 21.1006 16.7704 20.8984 17.1229C20.6674 17.5256 20.3348 17.8609 19.9336 18.0946L19.9297 18.0965L13.3174 21.8963L13.3164 21.8953C12.9161 22.127 12.4625 22.2498 12 22.2498C11.5372 22.2498 11.0831 22.1272 10.6826 21.8953V21.8963L4.07031 18.0965L4.06445 18.0926C3.6652 17.8585 3.33402 17.5243 3.10352 17.1229C2.87296 16.7213 2.75092 16.2666 2.75 15.8035V8.20003C2.74947 7.73618 2.87069 7.28008 3.10156 6.87776C3.33258 6.47527 3.66538 6.14061 4.06641 5.90706L4.07031 5.90511L10.6826 2.10432V2.1053C11.0831 1.87347 11.5373 1.75081 12 1.75081ZM12 3.25081C11.8008 3.25081 11.6049 3.30316 11.4326 3.40315L11.4297 3.40511L4.82031 7.20198L4.82129 7.20296C4.64718 7.30433 4.50262 7.45009 4.40235 7.62483C4.30218 7.7995 4.24968 7.99769 4.25 8.19905V15.8006L4.25977 15.951C4.27958 16.1002 4.32888 16.2445 4.4043 16.3758C4.50481 16.5508 4.64914 16.6965 4.82324 16.7987H4.82227L11.4297 20.5955L11.4326 20.5975C11.605 20.6975 11.8007 20.7498 12 20.7498C12.1993 20.7498 12.395 20.6975 12.5674 20.5975L12.5703 20.5955L19.1787 16.7977L19.3037 16.7137C19.4225 16.6218 19.5225 16.5069 19.5977 16.3758C19.6978 16.201 19.7504 16.003 19.75 15.8016V8.201C19.7497 7.99906 19.6962 7.80098 19.5957 7.62581C19.4952 7.45059 19.351 7.30416 19.1768 7.20198V7.201L12.5703 3.40511L12.5674 3.40315C12.3951 3.30316 12.1992 3.25081 12 3.25081Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_6_4">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/shared/icons/tg.svg b/public/assets/shared/icons/tg.svg
new file mode 100644
index 0000000..4933f14
--- /dev/null
+++ b/public/assets/shared/icons/tg.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_19_123)">
+<path d="M4.88412 11.8635C8.67362 10.2125 11.201 9.12375 12.4664 8.59725C16.0755 7.09575 16.8279 6.83413 17.3154 6.826C17.4949 6.82262 17.6711 6.87546 17.8191 6.97713C17.9226 7.06755 17.9886 7.19327 18.0044 7.32975C18.0307 7.49904 18.0378 7.67075 18.0255 7.84163C17.8305 9.89725 16.9839 14.8844 16.5532 17.187C16.3712 18.162 16.0121 18.487 15.6644 18.5195C15.068 18.5748 14.5821 18.2303 14.0442 17.8468C13.9034 17.7438 13.7572 17.6425 13.6055 17.5429C13.0075 17.1496 12.546 16.836 12.0845 16.5208C11.6604 16.2315 11.2346 15.9439 10.7032 15.5929C9.59987 14.8649 10.0614 14.4196 10.6789 13.8249C10.7824 13.7258 10.8842 13.6251 10.9844 13.5226C11.0299 13.4755 11.2525 13.2691 11.5661 12.9766L11.6194 12.9271C12.639 11.9783 14.518 10.23 14.5659 10.024C14.574 9.98988 14.5805 9.86313 14.5057 9.79488C14.431 9.72663 14.3173 9.74938 14.236 9.76888C14.1222 9.79488 12.2947 11.0028 8.75325 13.3926C8.23542 13.7501 7.76525 13.9235 7.34275 13.9126C6.87962 13.9029 5.98587 13.651 5.32287 13.4349L5.0385 13.3455L5.03629 13.3448C4.36304 13.1323 3.86855 12.9762 3.91725 12.5818C3.94758 12.3467 4.26987 12.1073 4.88412 11.8635Z" fill="#0088CC"/>
+</g>
+<defs>
+<clipPath id="clip0_19_123">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/shared/icons/vk.svg b/public/assets/shared/icons/vk.svg
new file mode 100644
index 0000000..4532467
--- /dev/null
+++ b/public/assets/shared/icons/vk.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_19_129)">
+<path d="M4.0498 7.2998C4.1798 13.5398 7.30051 17.29 12.7705 17.29H13.0801V13.7197C15.0901 13.9197 16.6097 15.3901 17.2197 17.29H20.0596C19.2796 14.4503 17.2302 12.8803 15.9502 12.2803C17.2302 11.5403 19.03 9.7398 19.46 7.2998H16.8799C16.3199 9.27979 14.6601 11.08 13.0801 11.25V7.2998H10.5V14.2197C8.90002 13.8197 6.88004 11.8797 6.79004 7.2998H4.0498Z" fill="#0077FF"/>
+</g>
+<defs>
+<clipPath id="clip0_19_129">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/shared/icons/write_me.svg b/public/assets/shared/icons/write_me.svg
new file mode 100644
index 0000000..64a4a16
--- /dev/null
+++ b/public/assets/shared/icons/write_me.svg
@@ -0,0 +1,14 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_24_7)">
+<path d="M11.9222 10.3312C12.7087 10.2478 13.4098 10.8561 13.487 11.6889C13.5641 12.5217 12.988 13.2626 12.2011 13.3424C11.4166 13.422 10.7193 12.8145 10.6423 11.9841C10.5654 11.1538 11.138 10.4144 11.9222 10.3312Z" fill="black"/>
+<path d="M7.63291 10.33C8.41719 10.252 9.11325 10.8604 9.18913 11.6904C9.26498 12.5204 8.69202 13.259 7.90811 13.3416C7.12124 13.4244 6.42043 12.815 6.34428 11.9818C6.26816 11.1487 6.84567 10.4084 7.63291 10.33Z" fill="black"/>
+<path d="M16.2334 10.3304C17.0167 10.2569 17.7086 10.8676 17.7814 11.6964C17.8542 12.5252 17.2805 13.2604 16.4978 13.3412C15.7104 13.4222 15.0105 12.8103 14.9373 11.9763C14.8641 11.1424 15.4453 10.4043 16.2334 10.3304Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9222 10.3312C12.7087 10.2478 13.4098 10.8561 13.487 11.6889C13.5641 12.5217 12.988 13.2626 12.2011 13.3424C11.4166 13.422 10.7193 12.8145 10.6423 11.9841C10.5654 11.1538 11.138 10.4144 11.9222 10.3312ZM7.63291 10.33C8.41719 10.252 9.11325 10.8604 9.18913 11.6904C9.26498 12.5204 8.69202 13.259 7.90811 13.3416C7.12124 13.4244 6.42043 12.815 6.34428 11.9818C6.26816 11.1487 6.84567 10.4084 7.63291 10.33ZM16.2334 10.3304C17.0167 10.2569 17.7086 10.8676 17.7814 11.6964C17.8542 12.5252 17.2805 13.2604 16.4978 13.3412C15.7104 13.4222 15.0105 12.8103 14.9373 11.9763C14.8641 11.1424 15.4453 10.4043 16.2334 10.3304Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.6112 17.8921C17.8015 19.7813 15.3085 20.775 12.8006 20.9781C12.3617 21.0136 11.7652 20.9954 11.3144 20.9947L3.64018 20.995C3.30078 20.995 2.93958 21.0081 2.60445 20.9733C2.2952 20.9263 2.0377 20.6586 2.01067 20.3294C1.97799 19.9315 2.14782 19.7509 2.37676 19.4715C2.50841 19.3107 2.64783 19.1475 2.78238 18.9857C3.20645 18.4795 3.62478 17.9681 4.03724 17.4513C3.4864 16.8524 2.84999 15.7381 2.55454 14.9748C1.83705 13.1083 1.80059 10.915 2.53423 9.046C3.98001 5.36303 7.58492 3.31781 11.1891 3.03449C13.6664 2.83971 16.2662 3.46851 18.3315 4.9564C19.3657 5.68708 20.2469 6.63545 20.9197 7.74228C21.3412 8.47345 21.78 9.46479 21.9099 10.3183C22.2565 13.1905 21.6264 15.7882 19.6112 17.8921ZM11.8114 4.52644C15.7303 4.32793 20.2489 6.96634 20.6246 11.4459C20.6377 11.6005 20.6405 11.7533 20.6409 11.9085C20.6409 13.6846 19.9684 15.3864 18.7739 16.6335C17.2829 18.1983 15.3309 19.1757 13.2423 19.4035C12.4849 19.4883 11.6696 19.4654 10.9038 19.4644L6.69058 19.4646C5.91818 19.4646 5.05239 19.4842 4.28884 19.4524C4.31474 19.4239 4.34037 19.3953 4.36569 19.3662C4.70979 18.9701 5.03341 18.5538 5.37589 18.1574C5.52058 17.9899 5.64525 17.8302 5.70043 17.6125C5.82484 17.1209 5.48659 16.8401 5.19123 16.5391C4.20251 15.4103 3.50685 13.9144 3.45176 12.3618C3.43403 11.8205 3.44005 11.2734 3.5436 10.7411C4.22621 7.23201 7.52314 5.00207 10.7159 4.60433C11.0887 4.55788 11.439 4.54264 11.8114 4.52644Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_24_7">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/shared/icons/yandex_telemost.svg b/public/assets/shared/icons/yandex_telemost.svg
new file mode 100644
index 0000000..b11ac01
--- /dev/null
+++ b/public/assets/shared/icons/yandex_telemost.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_19_126)">
+<path d="M12.5996 4.7998C8.93986 4.79994 7.04004 6.70026 7.04004 9.48047C7.04018 11.7399 8.07998 12.9599 9.98047 14.3398L6.68066 19.2002H9.45996L12.9199 13.8203L11.7002 12.96C10.1402 11.9197 9.44043 11.0603 9.44043 9.32031C9.44043 7.76031 10.4799 6.71973 12.5605 6.71973H13.7793V19.2207H16.2002V4.7998H12.5996Z" fill="#F8604A"/>
+</g>
+<defs>
+<clipPath id="clip0_19_126">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/shared/icons/zoom_in.svg b/public/assets/shared/icons/zoom_in.svg
new file mode 100644
index 0000000..cb70ff3
--- /dev/null
+++ b/public/assets/shared/icons/zoom_in.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <g>
+      <rect width="24" height="24" />
+      <path d="M2.56282 2.56282C0.85476 4.27087 0.000488758 6.33257 2.38419e-07 8.74793L0 8.75C0 11.1662 0.854272 13.2286 2.56282 14.9372C4.27136 16.6457 6.33375 17.5 8.75 17.5C10.9123 17.5 12.7913 16.8158 14.3868 15.4475L18.2197 19.2803C18.3661 19.4268 18.5429 19.5 18.75 19.5C18.9571 19.5 19.1339 19.4268 19.2803 19.2803C19.4268 19.1339 19.5 18.9571 19.5 18.75C19.5 18.5429 19.4268 18.3661 19.2803 18.2197L15.4475 14.3868C16.8158 12.7913 17.5 10.9123 17.5 8.75C17.5 6.33375 16.6457 4.27136 14.9372 2.56282C13.2286 0.854273 11.1662 7.15256e-07 8.75 0C6.33375 7.15256e-07 4.27136 0.854273 2.56282 2.56282L2.56282 2.56282ZM1.5 8.75C1.5 10.752 2.20783 12.4609 3.62348 13.8765C5.03913 15.2922 6.74797 16 8.75 16C10.752 16 12.4609 15.2922 13.8765 13.8765C15.2922 12.4609 16 10.752 16 8.75C16 6.74797 15.2922 5.03913 13.8765 3.62348C12.4609 2.20783 10.752 1.5 8.75 1.5C6.74797 1.5 5.03913 2.20783 3.62348 3.62348C2.20783 5.03913 1.5 6.74797 1.5 8.75L1.5 8.75ZM5.75 9.5L8 9.5L8 11.75C8 11.9571 8.07322 12.1339 8.21967 12.2803C8.36612 12.4268 8.54289 12.5 8.75 12.5C8.95711 12.5 9.13388 12.4268 9.28033 12.2803C9.42678 12.1339 9.5 11.9571 9.5 11.75L9.5 9.5L11.75 9.5C11.9571 9.5 12.1339 9.42678 12.2803 9.28033C12.4268 9.13388 12.5 8.95711 12.5 8.75C12.5 8.54289 12.4268 8.36612 12.2803 8.21967C12.1339 8.07322 11.9571 8 11.75 8L9.5 8L9.5 5.75C9.5 5.54289 9.42678 5.36612 9.28033 5.21967C9.13388 5.07322 8.95711 5 8.75 5C8.54289 5 8.36612 5.07322 8.21967 5.21967C8.07322 5.36612 8 5.54289 8 5.75L8 8L5.75 8C5.54289 8 5.36612 8.07322 5.21967 8.21967C5.07322 8.36612 5 8.54289 5 8.75C5 8.95711 5.07322 9.13388 5.21967 9.28033C5.36612 9.42678 5.54289 9.5 5.75 9.5L5.75 9.5Z" fill="#000000" fill-rule="evenodd" transform="translate(2.25 2.25)" />
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/public/assets/shared/icons/zoom_out.svg b/public/assets/shared/icons/zoom_out.svg
new file mode 100644
index 0000000..efeecf6
--- /dev/null
+++ b/public/assets/shared/icons/zoom_out.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <g>
+      <rect width="24" height="24" />
+      <path d="M2.56282 2.56282C0.85476 4.27087 0.000488758 6.33257 2.38419e-07 8.74793L0 8.75C0 11.1662 0.854272 13.2286 2.56282 14.9372C4.27136 16.6457 6.33375 17.5 8.75 17.5C10.9123 17.5 12.7913 16.8158 14.3868 15.4475L18.2197 19.2803C18.3661 19.4268 18.5429 19.5 18.75 19.5C18.9571 19.5 19.1339 19.4268 19.2803 19.2803C19.4268 19.1339 19.5 18.9571 19.5 18.75C19.5 18.5429 19.4268 18.3661 19.2803 18.2197L15.4475 14.3868C16.8158 12.7913 17.5 10.9123 17.5 8.75C17.5 6.33375 16.6457 4.27136 14.9372 2.56282C13.2286 0.854273 11.1662 7.15256e-07 8.75 0C6.33375 7.15256e-07 4.27136 0.854273 2.56282 2.56282L2.56282 2.56282ZM1.5 8.75C1.5 10.752 2.20783 12.4609 3.62348 13.8765C5.03913 15.2922 6.74797 16 8.75 16C10.752 16 12.4609 15.2922 13.8765 13.8765C15.2922 12.4609 16 10.752 16 8.75C16 6.74797 15.2922 5.03913 13.8765 3.62348C12.4609 2.20783 10.752 1.5 8.75 1.5C6.74797 1.5 5.03913 2.20783 3.62348 3.62348C2.20783 5.03913 1.5 6.74797 1.5 8.75L1.5 8.75ZM5.75 8L11.75 8C11.9571 8 12.1339 8.07322 12.2803 8.21967C12.4268 8.36612 12.5 8.54289 12.5 8.75C12.5 8.95711 12.4268 9.13388 12.2803 9.28033C12.1339 9.42678 11.9571 9.5 11.75 9.5L5.75 9.5C5.54289 9.5 5.36612 9.42678 5.21967 9.28033C5.07322 9.13388 5 8.95711 5 8.75C5 8.54289 5.07322 8.36612 5.21967 8.21967C5.36612 8.07322 5.54289 8 5.75 8L5.75 8Z" fill="#000000" fill-rule="evenodd" transform="translate(2.25 2.25)" />
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/public/assets/shared/icons/zoom_to_fit.svg b/public/assets/shared/icons/zoom_to_fit.svg
new file mode 100644
index 0000000..282d7f4
--- /dev/null
+++ b/public/assets/shared/icons/zoom_to_fit.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_73_32)">
+<path d="M3.57404 8.59465C3.98788 8.59491 4.32331 8.93033 4.32357 9.34418V10.3624L6.22569 8.4603C6.51858 8.1674 6.99346 8.1674 7.28635 8.4603C7.57924 8.75319 7.57924 9.22806 7.28635 9.52096L5.38423 11.4231L6.40246 11.4231C6.67655 11.4134 6.93407 11.5541 7.07398 11.79C7.2139 12.0259 7.2139 12.3193 7.07398 12.5552C6.93407 12.7911 6.67655 12.9318 6.40246 12.9221L3.57404 12.9221C3.16019 12.9219 2.82476 12.5865 2.8245 12.1726L2.8245 9.34418C2.82476 8.93033 3.16019 8.5949 3.57404 8.59465ZM8.83488 3.3338C8.8352 2.91989 9.17058 2.58451 9.58442 2.58427L12.4128 2.58427C12.8267 2.58449 13.1622 2.91992 13.1624 3.3338L13.1624 6.16223C13.1721 6.43627 13.0314 6.69379 12.7955 6.83376C12.5596 6.97365 12.2661 6.97365 12.0303 6.83369C11.7944 6.69379 11.6537 6.43628 11.6633 6.16223L11.6633 5.14399L9.76122 7.04608C9.46833 7.33897 8.99345 7.33897 8.70056 7.04608C8.40767 6.75319 8.40767 6.27831 8.70056 5.98542L10.6027 4.08333L9.58442 4.08333C9.17061 4.08304 8.83518 3.74761 8.83488 3.3338Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_73_32">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/shared/icons/сookie.svg b/public/assets/shared/icons/сookie.svg
new file mode 100644
index 0000000..7cb263e
--- /dev/null
+++ b/public/assets/shared/icons/сookie.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <g>
+      <g>
+        <g transform="translate(1.5 1.5)">
+          <path d="M0 10.5C0 17.4675 4.7025 21 10.5 21C16.2975 21 21 17.445 21 10.5C21 3.4275 16.2975 0 10.5 0C4.7025 0 0 3.3225 0 10.5C0 10.5 0 10.5 0 10.5Z" fill="#F3AD61" />
+          <path d="M10.5165 2.24503C10.5165 2.24503 10.9815 2.27503 10.9815 2.27503C11.1862 2.28842 11.3868 2.21293 11.5319 2.06786C11.6769 1.9228 11.7524 1.72224 11.739 1.51753C11.739 1.51753 11.709 1.06003 11.709 1.06003C11.698 0.871772 11.6414 0.689017 11.544 0.527528C11.2503 0.0627775 10.6651 -0.123833 10.1565 0.0850275C9.55653 0.340028 9.30153 1.04503 9.58652 1.62253C9.75902 1.99753 10.1265 2.21503 10.5165 2.24503C10.5165 2.24503 10.5165 2.24503 10.5165 2.24503ZM15.789 6.96253C15.789 6.96253 15.819 6.49753 15.819 6.49753C15.8324 6.29281 15.7569 6.09226 15.6119 5.94719C15.4668 5.80213 15.2662 5.72663 15.0615 5.74003C15.0615 5.74003 14.604 5.77003 14.604 5.77003C14.424 5.77753 14.2365 5.83753 14.0715 5.93503C13.6068 6.2288 13.4202 6.81393 13.629 7.32253C13.884 7.92253 14.589 8.17753 15.1665 7.89253C15.5415 7.72003 15.759 7.35253 15.789 6.96253C15.789 6.96253 15.789 6.96253 15.789 6.96253ZM3.56402 14.395C3.56402 14.395 3.60152 13.8175 3.60152 13.8175C3.63152 13.3375 3.90902 12.8875 4.37402 12.655C4.71806 12.4817 5.11869 12.4591 5.47999 12.5928C5.84129 12.7266 6.13074 13.0045 6.27902 13.36C6.54152 13.99 6.30902 14.725 5.73152 15.085C5.52152 15.2125 5.29652 15.28 5.07152 15.295C5.07152 15.295 4.50152 15.3325 4.50152 15.3325C3.96902 15.37 3.52652 14.9275 3.56402 14.395C3.56402 14.395 3.56402 14.395 3.56402 14.395ZM10.899 7.39753C10.899 7.39753 10.9215 7.05253 10.9215 7.05253C10.9965 5.92003 10.059 4.98253 8.91902 5.05003C8.91902 5.05003 8.58152 5.07253 8.58152 5.07253C8.24402 5.08753 7.90652 5.18503 7.59152 5.37253C6.6574 5.92698 6.26855 7.08077 6.67652 8.08753C7.16402 9.28003 8.55152 9.78253 9.68402 9.22003C10.419 8.86753 10.854 8.15503 10.899 7.39753C10.899 7.39753 10.899 7.39753 10.899 7.39753ZM1.33652 2.75503C1.33652 2.75503 1.35902 3.07003 1.35902 3.07003C1.40402 3.75253 1.80152 4.39753 2.46152 4.72753C3.48902 5.23753 4.74902 4.78003 5.19152 3.70003C5.55902 2.79253 5.20652 1.72753 4.35902 1.23253C4.08492 1.07189 3.77629 0.9793 3.45902 0.962528C3.45902 0.962528 3.15152 0.940027 3.15152 0.940027C2.12402 0.872528 1.27652 1.72753 1.33652 2.75503C1.33652 2.75503 1.33652 2.75503 1.33652 2.75503ZM13.794 13.12C13.794 13.12 13.809 13.39 13.809 13.39C13.869 14.2675 13.134 15.0025 12.2565 14.9425C12.2565 14.9425 11.994 14.9275 11.994 14.9275C11.7315 14.9125 11.469 14.8375 11.2215 14.695C10.4971 14.2642 10.1946 13.3696 10.509 12.5875C10.6885 12.1484 11.043 11.804 11.4872 11.6374C11.9315 11.4708 12.425 11.4971 12.849 11.71C13.419 11.98 13.7565 12.5275 13.794 13.12C13.794 13.12 13.794 13.12 13.794 13.12ZM0.00152206 8.69503C0.00152206 8.69503 0.031522 9.16003 0.031522 9.16003C0.0540221 9.55003 0.279022 9.91753 0.654022 10.09C1.23152 10.375 1.93652 10.12 2.19152 9.52003C2.40152 9.01753 2.21402 8.42503 1.74902 8.13253C1.58753 8.03515 1.40478 7.97852 1.21652 7.96753C1.21652 7.96753 0.759022 7.93753 0.759022 7.93753C0.554307 7.92413 0.353753 7.99963 0.208688 8.1447C0.0636234 8.28976 -0.0118728 8.49031 0.00152206 8.69503C0.00152206 8.69503 0.00152206 8.69503 0.00152206 8.69503Z" fill="#6D4534" transform="translate(2.901 2.495)" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/public/assets/shared/placeholder.jpg b/public/assets/shared/placeholder.jpg
new file mode 100644
index 0000000..20743a3
Binary files /dev/null and b/public/assets/shared/placeholder.jpg differ
diff --git a/public/assets/shared/placeholder.webp b/public/assets/shared/placeholder.webp
new file mode 100644
index 0000000..4278b0c
Binary files /dev/null and b/public/assets/shared/placeholder.webp differ
diff --git a/public/assets/task-distribution-concept/.gitkeep b/public/assets/task-distribution-concept/.gitkeep
new file mode 100644
index 0000000..d3f5a12
--- /dev/null
+++ b/public/assets/task-distribution-concept/.gitkeep
@@ -0,0 +1 @@
+
diff --git a/public/assets/task-distribution-concept/cover.png b/public/assets/task-distribution-concept/cover.png
new file mode 100644
index 0000000..359ade2
Binary files /dev/null and b/public/assets/task-distribution-concept/cover.png differ
diff --git a/public/assets/task-distribution-concept/cover.webp b/public/assets/task-distribution-concept/cover.webp
new file mode 100644
index 0000000..10aad06
Binary files /dev/null and b/public/assets/task-distribution-concept/cover.webp differ
diff --git a/public/assets/task-tracker/actions_for_page.png b/public/assets/task-tracker/actions_for_page.png
new file mode 100644
index 0000000..94ae877
Binary files /dev/null and b/public/assets/task-tracker/actions_for_page.png differ
diff --git a/public/assets/task-tracker/actions_for_page.webp b/public/assets/task-tracker/actions_for_page.webp
new file mode 100644
index 0000000..6e0ab03
Binary files /dev/null and b/public/assets/task-tracker/actions_for_page.webp differ
diff --git a/public/assets/task-tracker/cover.webp b/public/assets/task-tracker/cover.webp
new file mode 100644
index 0000000..d9609ae
Binary files /dev/null and b/public/assets/task-tracker/cover.webp differ
diff --git a/public/assets/task-tracker/dark_theme.png b/public/assets/task-tracker/dark_theme.png
new file mode 100644
index 0000000..b7a89a9
Binary files /dev/null and b/public/assets/task-tracker/dark_theme.png differ
diff --git a/public/assets/task-tracker/dark_theme.webp b/public/assets/task-tracker/dark_theme.webp
new file mode 100644
index 0000000..a02bb45
Binary files /dev/null and b/public/assets/task-tracker/dark_theme.webp differ
diff --git a/public/assets/task-tracker/drag-drop-action_example.mp4 b/public/assets/task-tracker/drag-drop-action_example.mp4
new file mode 100644
index 0000000..ed17104
Binary files /dev/null and b/public/assets/task-tracker/drag-drop-action_example.mp4 differ
diff --git a/public/assets/task-tracker/drag-drop-action_example.webm b/public/assets/task-tracker/drag-drop-action_example.webm
new file mode 100644
index 0000000..0a658e6
Binary files /dev/null and b/public/assets/task-tracker/drag-drop-action_example.webm differ
diff --git a/public/assets/task-tracker/drag-drop-action_example.webp b/public/assets/task-tracker/drag-drop-action_example.webp
new file mode 100644
index 0000000..7d6a2c9
Binary files /dev/null and b/public/assets/task-tracker/drag-drop-action_example.webp differ
diff --git a/public/assets/task-tracker/drag-drop-item_board-view.mp4 b/public/assets/task-tracker/drag-drop-item_board-view.mp4
new file mode 100644
index 0000000..6302e31
Binary files /dev/null and b/public/assets/task-tracker/drag-drop-item_board-view.mp4 differ
diff --git a/public/assets/task-tracker/drag-drop-item_board-view.webm b/public/assets/task-tracker/drag-drop-item_board-view.webm
new file mode 100644
index 0000000..fb9a9d0
Binary files /dev/null and b/public/assets/task-tracker/drag-drop-item_board-view.webm differ
diff --git a/public/assets/task-tracker/drag-drop-item_board-view.webp b/public/assets/task-tracker/drag-drop-item_board-view.webp
new file mode 100644
index 0000000..b1cc793
Binary files /dev/null and b/public/assets/task-tracker/drag-drop-item_board-view.webp differ
diff --git a/public/assets/task-tracker/drag-drop-item_list-view.mp4 b/public/assets/task-tracker/drag-drop-item_list-view.mp4
new file mode 100644
index 0000000..0ee923e
Binary files /dev/null and b/public/assets/task-tracker/drag-drop-item_list-view.mp4 differ
diff --git a/public/assets/task-tracker/drag-drop-item_list-view.webm b/public/assets/task-tracker/drag-drop-item_list-view.webm
new file mode 100644
index 0000000..a6770b3
Binary files /dev/null and b/public/assets/task-tracker/drag-drop-item_list-view.webm differ
diff --git a/public/assets/task-tracker/drag-drop-item_list-view.webp b/public/assets/task-tracker/drag-drop-item_list-view.webp
new file mode 100644
index 0000000..ab4da59
Binary files /dev/null and b/public/assets/task-tracker/drag-drop-item_list-view.webp differ
diff --git a/public/assets/task-tracker/dropdown_menu_for_views.png b/public/assets/task-tracker/dropdown_menu_for_views.png
new file mode 100644
index 0000000..aec22db
Binary files /dev/null and b/public/assets/task-tracker/dropdown_menu_for_views.png differ
diff --git a/public/assets/task-tracker/dropdown_menu_for_views.webp b/public/assets/task-tracker/dropdown_menu_for_views.webp
new file mode 100644
index 0000000..27ae52b
Binary files /dev/null and b/public/assets/task-tracker/dropdown_menu_for_views.webp differ
diff --git a/public/assets/task-tracker/expand-collapse_group.mp4 b/public/assets/task-tracker/expand-collapse_group.mp4
new file mode 100644
index 0000000..cdc77d9
Binary files /dev/null and b/public/assets/task-tracker/expand-collapse_group.mp4 differ
diff --git a/public/assets/task-tracker/expand-collapse_group.webm b/public/assets/task-tracker/expand-collapse_group.webm
new file mode 100644
index 0000000..a71b49f
Binary files /dev/null and b/public/assets/task-tracker/expand-collapse_group.webm differ
diff --git a/public/assets/task-tracker/expand-collapse_group.webp b/public/assets/task-tracker/expand-collapse_group.webp
new file mode 100644
index 0000000..9e8efbc
Binary files /dev/null and b/public/assets/task-tracker/expand-collapse_group.webp differ
diff --git a/public/assets/task-tracker/full_preview.mp4 b/public/assets/task-tracker/full_preview.mp4
new file mode 100644
index 0000000..1225759
Binary files /dev/null and b/public/assets/task-tracker/full_preview.mp4 differ
diff --git a/public/assets/task-tracker/full_preview.webm b/public/assets/task-tracker/full_preview.webm
new file mode 100644
index 0000000..55763f0
Binary files /dev/null and b/public/assets/task-tracker/full_preview.webm differ
diff --git a/public/assets/task-tracker/full_preview.webp b/public/assets/task-tracker/full_preview.webp
new file mode 100644
index 0000000..e0e3a82
Binary files /dev/null and b/public/assets/task-tracker/full_preview.webp differ
diff --git a/public/assets/task-tracker/light_theme_color.png b/public/assets/task-tracker/light_theme_color.png
new file mode 100644
index 0000000..45ea11a
Binary files /dev/null and b/public/assets/task-tracker/light_theme_color.png differ
diff --git a/public/assets/task-tracker/light_theme_color.webp b/public/assets/task-tracker/light_theme_color.webp
new file mode 100644
index 0000000..79e02fc
Binary files /dev/null and b/public/assets/task-tracker/light_theme_color.webp differ
diff --git a/public/assets/task-tracker/refs.png b/public/assets/task-tracker/refs.png
new file mode 100644
index 0000000..af78a6d
Binary files /dev/null and b/public/assets/task-tracker/refs.png differ
diff --git a/public/assets/task-tracker/refs.webp b/public/assets/task-tracker/refs.webp
new file mode 100644
index 0000000..e0304db
Binary files /dev/null and b/public/assets/task-tracker/refs.webp differ
diff --git a/public/assets/task-tracker/tab_all-tasks.png b/public/assets/task-tracker/tab_all-tasks.png
new file mode 100644
index 0000000..336c0d2
Binary files /dev/null and b/public/assets/task-tracker/tab_all-tasks.png differ
diff --git a/public/assets/task-tracker/tab_all-tasks.webp b/public/assets/task-tracker/tab_all-tasks.webp
new file mode 100644
index 0000000..d9609ae
Binary files /dev/null and b/public/assets/task-tracker/tab_all-tasks.webp differ
diff --git a/public/assets/task-tracker/tab_my-tasks.png b/public/assets/task-tracker/tab_my-tasks.png
new file mode 100644
index 0000000..13085e3
Binary files /dev/null and b/public/assets/task-tracker/tab_my-tasks.png differ
diff --git a/public/assets/task-tracker/tab_my-tasks.webp b/public/assets/task-tracker/tab_my-tasks.webp
new file mode 100644
index 0000000..a0af1f6
Binary files /dev/null and b/public/assets/task-tracker/tab_my-tasks.webp differ
diff --git a/public/assets/task-tracker/tab_tasks-by-assign.png b/public/assets/task-tracker/tab_tasks-by-assign.png
new file mode 100644
index 0000000..2bc02c4
Binary files /dev/null and b/public/assets/task-tracker/tab_tasks-by-assign.png differ
diff --git a/public/assets/task-tracker/tab_tasks-by-assign.webp b/public/assets/task-tracker/tab_tasks-by-assign.webp
new file mode 100644
index 0000000..2f7942f
Binary files /dev/null and b/public/assets/task-tracker/tab_tasks-by-assign.webp differ
diff --git a/public/assets/task-tracker/tabs.mp4 b/public/assets/task-tracker/tabs.mp4
new file mode 100644
index 0000000..f450021
Binary files /dev/null and b/public/assets/task-tracker/tabs.mp4 differ
diff --git a/public/assets/task-tracker/tabs.webm b/public/assets/task-tracker/tabs.webm
new file mode 100644
index 0000000..d4e9381
Binary files /dev/null and b/public/assets/task-tracker/tabs.webm differ
diff --git a/public/assets/task-tracker/tabs.webp b/public/assets/task-tracker/tabs.webp
new file mode 100644
index 0000000..44862fb
Binary files /dev/null and b/public/assets/task-tracker/tabs.webp differ
diff --git a/public/assets/task-tracker/view_board.png b/public/assets/task-tracker/view_board.png
new file mode 100644
index 0000000..336c0d2
Binary files /dev/null and b/public/assets/task-tracker/view_board.png differ
diff --git a/public/assets/task-tracker/view_board.webp b/public/assets/task-tracker/view_board.webp
new file mode 100644
index 0000000..d9609ae
Binary files /dev/null and b/public/assets/task-tracker/view_board.webp differ
diff --git a/public/assets/task-tracker/view_list.png b/public/assets/task-tracker/view_list.png
new file mode 100644
index 0000000..d31fae3
Binary files /dev/null and b/public/assets/task-tracker/view_list.png differ
diff --git a/public/assets/task-tracker/view_list.webp b/public/assets/task-tracker/view_list.webp
new file mode 100644
index 0000000..feb066e
Binary files /dev/null and b/public/assets/task-tracker/view_list.webp differ
diff --git a/public/assets/task-tracker/view_table.png b/public/assets/task-tracker/view_table.png
new file mode 100644
index 0000000..003ffb9
Binary files /dev/null and b/public/assets/task-tracker/view_table.png differ
diff --git a/public/assets/task-tracker/view_table.webp b/public/assets/task-tracker/view_table.webp
new file mode 100644
index 0000000..b27a25d
Binary files /dev/null and b/public/assets/task-tracker/view_table.webp differ
diff --git a/public/assets/task-tracker/views.mp4 b/public/assets/task-tracker/views.mp4
new file mode 100644
index 0000000..062c7dc
Binary files /dev/null and b/public/assets/task-tracker/views.mp4 differ
diff --git a/public/assets/task-tracker/views.webm b/public/assets/task-tracker/views.webm
new file mode 100644
index 0000000..f8f0be0
Binary files /dev/null and b/public/assets/task-tracker/views.webm differ
diff --git a/public/assets/task-tracker/views.webp b/public/assets/task-tracker/views.webp
new file mode 100644
index 0000000..8124803
Binary files /dev/null and b/public/assets/task-tracker/views.webp differ
diff --git a/public/assets/template-elements-demo/hello.gif b/public/assets/template-elements-demo/hello.gif
new file mode 100644
index 0000000..5263426
Binary files /dev/null and b/public/assets/template-elements-demo/hello.gif differ
diff --git a/public/assets/template-elements-demo/img-long.png b/public/assets/template-elements-demo/img-long.png
new file mode 100644
index 0000000..7dee5ab
Binary files /dev/null and b/public/assets/template-elements-demo/img-long.png differ
diff --git a/public/assets/template-elements-demo/img-long.webp b/public/assets/template-elements-demo/img-long.webp
new file mode 100644
index 0000000..5cb3c25
Binary files /dev/null and b/public/assets/template-elements-demo/img-long.webp differ
diff --git a/public/assets/template-elements-demo/small-image-1.png b/public/assets/template-elements-demo/small-image-1.png
new file mode 100644
index 0000000..79a9fe0
Binary files /dev/null and b/public/assets/template-elements-demo/small-image-1.png differ
diff --git a/public/assets/template-elements-demo/small-image-1.webp b/public/assets/template-elements-demo/small-image-1.webp
new file mode 100644
index 0000000..7c807ae
Binary files /dev/null and b/public/assets/template-elements-demo/small-image-1.webp differ
diff --git a/public/assets/template-elements-demo/small-image-2.png b/public/assets/template-elements-demo/small-image-2.png
new file mode 100644
index 0000000..7d96c16
Binary files /dev/null and b/public/assets/template-elements-demo/small-image-2.png differ
diff --git a/public/assets/template-elements-demo/small-image-2.webp b/public/assets/template-elements-demo/small-image-2.webp
new file mode 100644
index 0000000..2c7a84d
Binary files /dev/null and b/public/assets/template-elements-demo/small-image-2.webp differ
diff --git a/public/assets/template-elements-demo/small-image-3.png b/public/assets/template-elements-demo/small-image-3.png
new file mode 100644
index 0000000..dcac7a7
Binary files /dev/null and b/public/assets/template-elements-demo/small-image-3.png differ
diff --git a/public/assets/template-elements-demo/small-image-3.webp b/public/assets/template-elements-demo/small-image-3.webp
new file mode 100644
index 0000000..bc6bab9
Binary files /dev/null and b/public/assets/template-elements-demo/small-image-3.webp differ
diff --git a/public/assets/template-elements-demo/small-image-4.png b/public/assets/template-elements-demo/small-image-4.png
new file mode 100644
index 0000000..6fec7f1
Binary files /dev/null and b/public/assets/template-elements-demo/small-image-4.png differ
diff --git a/public/assets/template-elements-demo/small-image-4.webp b/public/assets/template-elements-demo/small-image-4.webp
new file mode 100644
index 0000000..bcdb466
Binary files /dev/null and b/public/assets/template-elements-demo/small-image-4.webp differ
diff --git a/public/assets/template-elements-demo/small-image-5.png b/public/assets/template-elements-demo/small-image-5.png
new file mode 100644
index 0000000..3d36d28
Binary files /dev/null and b/public/assets/template-elements-demo/small-image-5.png differ
diff --git a/public/assets/template-elements-demo/small-image-5.webp b/public/assets/template-elements-demo/small-image-5.webp
new file mode 100644
index 0000000..374ce9b
Binary files /dev/null and b/public/assets/template-elements-demo/small-image-5.webp differ
diff --git a/public/assets/template-elements-demo/small-image-6.png b/public/assets/template-elements-demo/small-image-6.png
new file mode 100644
index 0000000..8f226ec
Binary files /dev/null and b/public/assets/template-elements-demo/small-image-6.png differ
diff --git a/public/assets/template-elements-demo/small-image-6.webp b/public/assets/template-elements-demo/small-image-6.webp
new file mode 100644
index 0000000..8b21f27
Binary files /dev/null and b/public/assets/template-elements-demo/small-image-6.webp differ
diff --git a/public/assets/template-elements-demo/small-image-7.png b/public/assets/template-elements-demo/small-image-7.png
new file mode 100644
index 0000000..a7729bd
Binary files /dev/null and b/public/assets/template-elements-demo/small-image-7.png differ
diff --git a/public/assets/template-elements-demo/small-image-7.webp b/public/assets/template-elements-demo/small-image-7.webp
new file mode 100644
index 0000000..bea42cc
Binary files /dev/null and b/public/assets/template-elements-demo/small-image-7.webp differ
diff --git a/public/assets/template-elements-demo/video-1.mp4 b/public/assets/template-elements-demo/video-1.mp4
new file mode 100644
index 0000000..765f320
Binary files /dev/null and b/public/assets/template-elements-demo/video-1.mp4 differ
diff --git a/public/assets/template-elements-demo/video-1.webm b/public/assets/template-elements-demo/video-1.webm
new file mode 100644
index 0000000..d2fa369
Binary files /dev/null and b/public/assets/template-elements-demo/video-1.webm differ
diff --git a/public/assets/template-elements-demo/video-1.webp b/public/assets/template-elements-demo/video-1.webp
new file mode 100644
index 0000000..6ffa0e2
Binary files /dev/null and b/public/assets/template-elements-demo/video-1.webp differ
diff --git a/public/assets/template-elements-demo/wallpaper-1.jpg b/public/assets/template-elements-demo/wallpaper-1.jpg
new file mode 100644
index 0000000..f5d5f70
Binary files /dev/null and b/public/assets/template-elements-demo/wallpaper-1.jpg differ
diff --git a/public/assets/template-elements-demo/wallpaper-1.webp b/public/assets/template-elements-demo/wallpaper-1.webp
new file mode 100644
index 0000000..b5ddd28
Binary files /dev/null and b/public/assets/template-elements-demo/wallpaper-1.webp differ
diff --git a/public/cases/ai-platform-primo-rpa-2.html b/public/cases/ai-platform-primo-rpa-2.html
new file mode 100644
index 0000000..418520c
--- /dev/null
+++ b/public/cases/ai-platform-primo-rpa-2.html
@@ -0,0 +1,999 @@
+<!DOCTYPE html>
+<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta
+      name="description"
+      content="Кейс: интерфейс AI Server в Primo RPA — OCR на корпоративных документах, дообучение моделей, skills, UX/UI."
+    />
+    <title>AI Server в Primo RPA — кейс (черновик 2)</title>
+    <script>
+      (function () {
+        var FONT_CSS = {
+          merriweather: "../assets/fonts/merriweather.css",
+          geologica: "../assets/fonts/geologica.css",
+          mono: "../assets/fonts/mono.css",
+        };
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f !== "merriweather" && f !== "mono" && f !== "geologica") f = "merriweather";
+          d.dataset.font = f;
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+          var href = FONT_CSS[f];
+          if (href && !document.querySelector('link[data-theme-font="' + f + '"]')) {
+            var link = document.createElement("link");
+            link.rel = "stylesheet";
+            link.href = href;
+            link.setAttribute("data-theme-font", f);
+            document.head.appendChild(link);
+          }
+        } catch (e) {}
+      })();
+    </script>
+
+    <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon/favicon-16x16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="../assets/favicon/apple-touch-icon.png" />
+    <link rel="manifest" href="../assets/favicon/site.webmanifest" />
+    <link rel="preload" href="../assets/fonts/merriweather.css" as="style" />
+    <link rel="preload" href="../css/main.css" as="style" />
+    <link rel="preload" href="../js/skill-connectors.js" as="script" />
+    <link rel="modulepreload" href="../js/main.js" />
+    <link rel="stylesheet" href="../css/main.css" />
+    <script src="../js/skill-connectors.js" defer></script>
+    <script type="module" src="../js/main.js"></script>
+
+
+        <link rel="stylesheet" href="../vendor/plyr/plyr.css" />
+
+    <style>
+      .case-article {
+        max-width: 48rem;
+        margin: 0 auto;
+      }
+      .case-article h2 {
+        margin: 2rem 0 0.75rem;
+        font-size: clamp(1.15rem, 2vw, 1.35rem);
+        font-weight: 700;
+        color: var(--text);
+      }
+      .case-article h3 {
+        font-size: 1.05rem;
+        font-weight: 600;
+        color: var(--text);
+      }
+      .case-article .section__prose {
+        margin-bottom: 0.75rem;
+        color: var(--text);
+      }
+      .case-article img,
+      .case-article video {
+        display: block;
+        max-width: 100%;
+        height: auto;
+        margin: 0.75rem 0 1rem;
+      }
+      .case-article ul,
+      .case-article ol {
+        margin: 0.5rem 0 1rem 1.25rem;
+        padding: 0;
+      }
+      .case-article li {
+        margin-bottom: 0.35rem;
+      }
+      .case-article a:not(.btn) {
+        color: var(--accent);
+      }
+      .case-block {
+        margin-top: 3rem;
+        padding-top: 2.5rem;
+        border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
+      }
+      .case-block:first-of-type {
+        margin-top: 0;
+        padding-top: 0;
+        border-top: 0;
+      }
+    </style>
+    <script>
+      (function () {
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f === "merriweather" || f === "mono" || f === "geologica") {
+            d.dataset.font = f;
+          } else {
+            d.dataset.font = "merriweather";
+          }
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+        } catch (e) {}
+      })();
+    </script>
+  </head>
+  <body>
+    <a class="skip-link" href="#case-main">К содержимому кейса</a>
+    <header class="header" data-theme-picker>
+      <div class="header__inner">
+        <a class="logo" href="../index.html" aria-label="На главную">НМ</a>
+        <div class="header__cluster">
+          <nav class="nav" aria-label="Навигация по странице">
+            <a href="#projects">Портфолио</a>
+            <a href="#contact">Контакты</a>
+          </nav>
+        </div>
+      </div>
+    </header>
+
+<div class="fab-stack" aria-label="Быстрые действия">
+      <div class="theme-panel-fab-wrap">
+        <button type="button" class="fab fab--secondary glass-neutral" data-theme-panel-btn aria-expanded="false" aria-controls="theme-panel" aria-label="Настройки стиля">
+          <span class="theme-panel-fab__icon theme-panel-fab__icon--open-hide" aria-hidden="true"></span>
+          <svg class="theme-panel-fab__icon theme-panel-fab__icon--close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          </svg>
+        </button>
+        <div id="theme-panel" class="theme-picker__panel glass-neutral" role="dialog" aria-label="Тема и оформление" hidden data-theme-panel>
+          <div class="theme-picker__stack">
+            <section class="theme-picker__section" aria-labelledby="theme-accent-title">
+              <h3 id="theme-accent-title" class="theme-picker__section-title">Акцентный цвет</h3>
+              <div class="colorpicker" data-colorpicker>
+                <div class="colorpicker__plane-box">
+                  <canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Насыщенность и светлость акцента"></canvas>
+                  <div class="colorpicker__knob" data-sl-knob></div>
+                </div>
+                <div class="colorpicker__hue-wrap">
+                  <label class="colorpicker__hue-sr" for="theme-hue-slider">Оттенок акцента</label>
+                  <input id="theme-hue-slider" class="colorpicker__hue" type="range" min="0" max="360" value="210" data-hue-slider aria-valuemin="0" aria-valuemax="360" />
+                </div>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-mode-title">
+              <h3 id="theme-mode-title" class="theme-picker__section-title">Тема</h3>
+              <div class="radius-seg theme-mode-seg" role="radiogroup" aria-labelledby="theme-mode-title">
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="system" aria-label="Как в системе"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--system"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="light" aria-label="Светлая тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--light"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="dark" aria-label="Тёмная тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--dark"></span></span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-radius-title">
+              <h3 id="theme-radius-title" class="theme-picker__section-title">Скругление углов</h3>
+              <div class="radius-seg" role="radiogroup" aria-labelledby="theme-radius-title">
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="soft" aria-label="Слабое скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--soft"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="medium" aria-label="Среднее скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--medium"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="strong" aria-label="Сильное скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--strong"></span></span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-typography-title">
+              <h3 id="theme-typography-title" class="theme-picker__section-title">Типографика</h3>
+              <div class="radius-seg" role="radiogroup" aria-labelledby="theme-typography-title">
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="geologica" aria-label="Sans"><span class="theme-font-seg__label">Sans</span></button>
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="merriweather" aria-label="Sans Serif"><span class="theme-font-seg__label">Sans Serif</span></button>
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="mono" aria-label="Mono"><span class="theme-font-seg__label">Mono</span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-mesh-bg-title">
+              <h3 id="theme-mesh-bg-title" class="theme-picker__section-title">Фон страницы</h3>
+              <div class="radius-seg radius-seg--two" role="radiogroup" aria-labelledby="theme-mesh-bg-title">
+                <button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="on" aria-label="Показать фоновый градиент"><span class="theme-mesh-bg-seg__label">Вкл</span></button>
+                <button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="off" aria-label="Скрыть фоновый градиент"><span class="theme-mesh-bg-seg__label">Выкл</span></button>
+              </div>
+            </section>
+          </div>
+        </div>
+      </div>
+      <a class="fab fab--primary" href="#contact" aria-label="Связаться">
+        <span class="fab-primary__ico" aria-hidden="true"></span>
+      </a>
+    </div>
+<div class="content-edit-fab-stack" aria-label="Правки контента" data-content-edit-ui>
+  <button
+    type="button"
+    class="fab fab--secondary glass-neutral content-edit-fab"
+    data-content-edit-mode-toggle
+    hidden
+    aria-pressed="false"
+    aria-label="Режим правок контента"
+    title="Режим правок"
+  >
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <path
+        d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0 0-3L16.5 4.5a2.12 2.12 0 0 0-3 0L3 15v5z"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linejoin="round"
+      />
+    </svg>
+    <span class="content-edit-fab__badge" hidden aria-hidden="true">0</span>
+  </button>
+</div>
+
+
+<main id="case-main" class="section section--tight">
+      <div class="section__inner case-article">
+        <p class="hero__eyebrow">Product Design · AI</p>
+        <h1 class="case-page__h1">Разработка интерфейса для&nbsp;Primo&nbsp;RPA&nbsp;AI&nbsp;Server</h1>
+        <p class="case-page__sub">
+          Платформа интеллектуальной обработки документов<br />
+          и оркестрации ИИ-агентов
+        </p>
+
+        <div class="case-block" id="obzor">
+          <h2>Обзор</h2>
+          <p class="section__prose">
+            Внутри компании появился сервис, который заметно улучшил работу с моделями для распознавания текста на документах: загрузка датасета из документов компании, разметка полей, обучение модели и дальнейшее использование модели в других продуктах. Такой подход давал более высокое качество распознавания и соответствовал требованиям безопасности — данные оставались внутри контура компании. Уже в ходе работы в продукте появился функционал дообучения (fine-tuning) базовых нейросетей под задачи компании и работы со скилами: суммаризация, извлечение, генерация и другие сценарии.
+          </p>
+          <p class="section__prose">
+            В проект меня пригласили как UX/UI дизайнера: интерфейс до этого собирали разработчики своими силами. В результате работы у сервиса снизился порог входа — продуктом могли пользоваться существенно больше людей без специальной подготовки в области ИИ и OCR.
+          </p>
+          <aside class="case-callout" data-callout>
+            <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">✅</span>
+            <div class="case-callout__content">
+              <p>
+                Главный эффект для бизнеса — не «красивая картинка», а возможность масштабировать решение: меньше зависимости от узкого круга экспертов и отдела внедрения на каждом шаге.
+              </p>
+            </div>
+          </aside>
+        </div>
+
+        <div class="case-block" id="bylo-stalo">
+          <h2>Было и стало</h2>
+          <p class="section__prose">
+            Сервис был собран на <a href="https://ant.design/components/overview" target="_blank" rel="noopener noreferrer">Ant Design</a> под React с визуальной темой <a href="https://templates.iqonic.design/hope-ui/html/dist/" target="_blank" rel="noopener noreferrer">Hope UI</a> для Bootstrap. У компании уже было несколько веб-продуктов с задачей унифицировать и освежить интерфейс, поэтому в разработке опирались на компоненты этих систем.
+          </p>
+          <aside class="case-callout" data-callout>
+            <span class="case-callout__emoji" aria-hidden="true">⚠️</span>
+            <div class="case-callout__content">
+              <p>
+                Ключевая боль — настройка проекта: много шагов и мелких задач, три типа проектов с разными сценариями настройки. От создания проекта до реального использования уходило много времени, часто требовалась помощь отдела внедрения. Запутанная навигация и дублирование функционала снижали продуктивность и не давали выйти на широкую аудиторию.
+              </p>
+            </div>
+          </aside>
+          <p class="section__prose">
+            Я погрузился в продукт и вместе с командой детально разобрал весь функционал.
+          </p>
+          <aside class="case-callout" data-callout>
+            <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">✨</span>
+            <div class="case-callout__content">
+              <p>
+                <strong>Мой опыт в ИИ</strong> и в веб-платформах со схожей логикой сильно ускорил работу: проще было синхронизироваться с разработкой и не теряться в терминологии домена.
+              </p>
+            </div>
+          </aside>
+          <p class="section__prose">
+            По текущим сценариям собрал юзерфлоу: они показали команде, где в интерфейсе и в маршрутах пользователя возникает путаница. На этой основе переработали сами процессы настройки: часть функций автоматизировали и спрятали, чтобы снизить риск ошибок и убрать лишнюю рутину.
+          </p>
+          <p class="section__prose">
+            Новый подход изменил и восприятие продукта, и процесс настройки. Интерфейс ведёт по этапам настройки, при этом не ломает привычные сценарии: полностью линейный визард здесь невозможен — пользователю всё равно нужно возвращаться назад и уточнять параметры ради качества результата.
+          </p>
+          <h3>Вопросы к команде по текущему состоянию</h3>
+          <p class="section__prose">Ответы помогут зафиксировать эффект от внедрения в цифрах и фактах.</p>
+          <ul>
+            <li>Сократилось ли количество обращений в поддержку.</li>
+            <li>Получается ли у пользователей самостоятельно пройти настройку проекта от начала до конца.</li>
+            <li>Позволяет ли новый интерфейс заводить новые типы проектов, опираясь на уже заложенные паттерны.</li>
+          </ul>
+        </div>
+
+        <div class="case-block" id="patterns">
+          <h2>Паттерны интерфейса</h2>
+          <p class="section__prose">
+            Ниже — ключевые зоны продукта: как они поддерживают сценарии обучения и работы с моделью и чем отличаются от прежнего подхода.
+          </p>
+
+          <h3>Сопоставление полей (маппинг)</h3>
+          <p class="section__prose">
+            Маппинг связывает поля документа с целевой структурой данных. Важно было сделать связь наглядной и обратимой, чтобы пользователь не терял контекст при правках.
+          </p>
+          <figure class="case-media" style="margin: 0.85rem 0 1.2rem">
+            <div class="case-video-shell">
+              <video
+                controls
+                preload="metadata"
+                playsinline
+                poster="../assets/ai-platform-primo-rpa/fields-maping.webp"
+                data-case-video-player
+                style="display: block; width: 100%; height: auto; margin: 0"
+              >
+                <source src="../assets/ai-platform-primo-rpa/fields-maping.webm" type="video/webm" />
+                <source src="../assets/ai-platform-primo-rpa/fields-maping.mp4" type="video/mp4" />
+                Ваш браузер не поддерживает видео.
+              </video>
+            </div>
+            <figcaption>Сопоставление полей в интерфейсе</figcaption>
+          </figure>
+
+          <h3>Датасет, обучение и контроль качества</h3>
+          <p class="section__prose">
+            Редактор датасета, запуск обучения и экраны качества образуют один ментальный путь: подготовка данных → обучение → проверка результата.
+          </p>
+          <aside class="case-callout" data-callout>
+            <span class="case-callout__emoji" aria-hidden="true">➡️</span>
+            <div class="case-callout__content">
+              <p>
+                Рядом вынесены кадры «до / после» редактора датасета — по ним видно, как упростили визуальную иерархию и опорные действия на экране.
+              </p>
+            </div>
+          </aside>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/dataset-editor.webp"
+              alt="Редактор датасета — текущая версия интерфейса"
+              width="1200"
+              height="675"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Редактор датасета — текущая версия</figcaption>
+          </figure>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/dataset-editor-old.webp"
+              alt="Редактор датасета — предыдущая версия для сравнения"
+              width="1200"
+              height="675"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Предыдущая версия редактора</figcaption>
+          </figure>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/dataset-lerning.webp"
+              alt="Экран обучения модели по датасету"
+              width="1200"
+              height="675"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Обучение по датасету</figcaption>
+          </figure>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/dataset-quality.webp"
+              alt="Контроль качества модели после обучения"
+              width="1200"
+              height="675"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Качество и проверка результата</figcaption>
+          </figure>
+
+          <h3>Inference в проекте</h3>
+          <p class="section__prose">
+            Отдельный фокус — запуск и контроль модели внутри проекта: пользователь должен понимать состояние прогона и не терять связь с остальными настройками.
+          </p>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/in-project-inference.webp"
+              alt="Интерфейс inference модели внутри проекта"
+              width="1200"
+              height="675"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Inference в проекте</figcaption>
+          </figure>
+          <figure class="case-media" data-case-tall-media data-case-tall-width="wide">
+            <div class="case-media-tall" data-case-tall-root>
+              <div class="case-media-tall__clip" id="ai-case-tall-inference-full" data-case-tall-clip>
+                <img
+                  src="../assets/ai-platform-primo-rpa/in-project-inference-full.webp"
+                  alt="Inference в проекте — полный экран интерфейса"
+                  width="1200"
+                  loading="lazy"
+                  decoding="async"
+                  data-image-viewer
+                />
+                <div class="case-media-tall__fog" aria-hidden="true"></div>
+              </div>
+              <div class="case-media-tall__actions">
+                <button
+                  type="button"
+                  class="case-media-tall__btn btn btn--ghost btn--flat"
+                  data-case-tall-toggle
+                  aria-expanded="false"
+                  aria-controls="ai-case-tall-inference-full"
+                >
+                  <span class="case-media-tall__btn-chev" aria-hidden="true"></span>
+                  <span data-case-tall-label-more>Развернуть</span>
+                  <span data-case-tall-label-less hidden>Свернуть</span>
+                </button>
+              </div>
+            </div>
+            <figcaption>Полный вертикальный кадр экрана inference</figcaption>
+          </figure>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/in-project-inference-old.webp"
+              alt="Предыдущая версия экрана inference в проекте"
+              width="1200"
+              height="675"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Предыдущая версия inference</figcaption>
+          </figure>
+
+          <aside class="case-callout" data-callout>
+            <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">⭐</span>
+            <div class="case-callout__content">
+              <p>
+                Полноэкранный режим и отдельное окно импорта закрывают задачи вне основного контекста проекта: можно сфокусироваться на процессе или, наоборот, держать под рукой панели — ниже три варианта компоновки.
+              </p>
+            </div>
+          </aside>
+
+          <h3>Полноэкранный режим и импорт</h3>
+          <p class="section__prose">
+            Речь не о «длинных задачах», а о процессах в отдельном контексте: одни до завершения блокируют работу с проектом, другие идут параллельно в отдельном окне, и при этом можно продолжать настраивать параметры проекта. Функционал вынесли в отдельное окно, потому что точек входа в такие задачи было несколько, а обычной модалки было недостаточно — нужно было пройти отдельный процесс в стороне и затем вернуться к настройкам проекта. Такой подход сократил объём разработки и тестирования.
+          </p>
+          <p class="section__prose">
+            Ниже — три варианта полноэкранного холста: импорт в отдельном окне, режим с панелями и минималистичный «zen».
+          </p>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/fullscreen_modal-import_dataset.webp"
+              alt="Модальное окно импорта датасета на отдельном экране"
+              width="1440"
+              height="1024"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Импорт в модальном окне</figcaption>
+          </figure>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/full-screen-mode-with-panels.webp"
+              alt="Полноэкранный режим с боковыми панелями"
+              width="1200"
+              height="675"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Полноэкранный режим с панелями</figcaption>
+          </figure>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/full-screen-mode-zen.webp"
+              alt="Полноэкранный режим без отвлекающих панелей"
+              width="1200"
+              height="675"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Минимальный режим без лишнего chrome</figcaption>
+          </figure>
+
+          <h3>Дальнейшее развитие</h3>
+          <p class="section__prose">
+            В дорожной карте оставались отдельные крупные куски: сценарии вокруг LLM (списки, статусы, действия), пошаговый мастер обучения с прогрессом и отменой, а также полноценный контур OCR с разметкой регионов и превью качества на странице. Они не входили в минимальный набор для первого промышленного релиза интерфейса, но заложенные паттерны должны их принять без ломки навигации.
+          </p>
+        </div>
+
+        <div class="case-block" id="process">
+          <h2>Процесс и передача</h2>
+          <p class="section__prose">
+            Работа шла через регулярные синхронизации с разработкой: макеты, спецификации и поэтапный handoff во фронт. После моего выхода из проекта команда искала следующего дизайнера и выстраивала онбординг по уже оформленным артефактам и правилам компоновки.
+          </p>
+          <aside class="case-callout" data-callout>
+            <span class="case-callout__emoji" aria-hidden="true">💡</span>
+            <div class="case-callout__content">
+              <p>
+                Для следующего дизайнера важнее всего опереться на юзерфлоу и решения по настройке проектов — там сосредоточена основная сложность домена.
+              </p>
+            </div>
+          </aside>
+          <h3>Вопросы следующему дизайнеру</h3>
+          <ul>
+            <li>Что оказалось неочевидным в первые две недели в проекте.</li>
+            <li>Какие артефакты и правила передачи пригодились больше всего.</li>
+            <li>Что пришлось пересобрать и по какой причине.</li>
+            <li>Как в трёх предложениях описать текущее состояние UX.</li>
+          </ul>
+        </div>
+
+        <div class="case-block" id="zaklyuchenie">
+          <h2>Итог</h2>
+          <p class="section__prose">
+            Интерфейс AI Server в Primo RPA перевели от «инженерного интерфейса разработчиков» к продукту с понятной логикой настройки и сопровождения пользователя. Упор на юзерфлоу и автоматизацию рутины снял часть нагрузки с внедрения и открыл дорогу к более широкому использованию внутри компании и у клиентов.
+          </p>
+        </div>
+      </div>
+    </main>
+
+    <section id="projects" class="section section--surface">
+        <div class="section__inner">
+          <h2 class="section__title">Портфолио</h2>
+          <ol class="mini-projects-grid" data-mini-projects-list>
+            <li class="mini-projects-grid__item" data-mp-cells="3">
+              <a class="mp-card mp-card--link mp-card--stack" href="ai-platform-primo-rpa.html" aria-label="Платформа для работы с AI — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/ai-platform-primo-rpa/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Платформа для работы с AI</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями автоматизации и Smart OCR.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="3">
+              <a class="mp-card mp-card--link mp-card--stack" href="lunacy.html" aria-label="Графический редактор Lunacy — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/lunacy/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Графический редактор Lunacy</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Desktop App</li>
+                  </ul>
+                  <p class="mp-card__desc">Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и интерфейсной логики.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--stack" href="manu-game-maker.html" aria-label="Игровой движок MANU — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/manu-game-maker/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Игровой движок MANU</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">Product Design</li>
+                    <li class="mp-card__tag">Desktop App</li>
+                  </ul>
+                  <p class="mp-card__desc">Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и проработка сотен сложных пользовательских сценариев.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--stack" href="mobile-clinic-app.html" aria-label="Мобильное приложение для сети клиник — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/mobile-clinic-app/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Мобильное приложение для сети клиник</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Mobile App</li>
+                  </ul>
+                  <p class="mp-card__desc">Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом пользовательском пути, понятной навигации и быстром доступе к нужным действиям.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="orc-automation-panel.html" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Веб-панель для оркестрации автоматизаций</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под продакшен без остановки релизов.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="task-distribution-concept.html" aria-label="Концепт сервиса распределения задач — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Концепт сервиса распределения задач</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Analytics</li>
+                  </ul>
+                  <p class="mp-card__desc">Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность процессов и удобство командной работы.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="task-tracker.html" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Таск-трекер для бек-офис системы</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">Product Design</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по исполнителям; вкладки, фильтры, доска / список / таблица, Drag&amp;Drop.</p>
+                </div>
+              </a>
+            </li>
+          </ol>
+        </div>
+      </section><section hidden class="section section--surface" aria-hidden="true">
+        <div class="section__inner">
+          <div class="projects__heading">
+            <h2 class="section__title projects__title">Портфолио</h2>
+            <div class="projects__controls" aria-label="Навигация по карточкам портфолио">
+              <button type="button" class="projects__nav-btn" data-projects-prev aria-label="Прокрутить влево" aria-controls="projects-viewport">
+                <span class="projects__nav-ico projects__nav-ico--left" aria-hidden="true"></span>
+              </button>
+              <button type="button" class="projects__nav-btn" data-projects-next aria-label="Прокрутить вправо" aria-controls="projects-viewport">
+                <span class="projects__nav-ico projects__nav-ico--right" aria-hidden="true"></span>
+              </button>
+            </div>
+          </div>
+          <div class="projects-carousel">
+            <div id="projects-viewport" class="projects-carousel__viewport" data-projects-viewport>
+              <div class="projects-carousel__track">
+                <div class="projects-carousel__spacer" aria-hidden="true"></div>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="orc-automation-panel.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Веб-панель для оркестрации автоматизаций</h3>
+                      <p class="portfolio-card__summary">
+                        Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под
+                        продакшен без остановки релизов.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Web App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/orc-primo-rpa/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="ai-platform-primo-rpa.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Платформа для работы с AI</h3>
+                      <p class="portfolio-card__summary">
+                        Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями
+                        автоматизации и Smart OCR.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Web App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/ai-platform-primo-rpa/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="task-tracker.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Таск-трекер для бек-офис системы</h3>
+                      <p class="portfolio-card__summary">
+                        Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по
+                        исполнителям; вкладки, фильтры, виды доска / список / таблица, Drag&amp;Drop.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">Product Design</li>
+                        <li class="portfolio-card__tag">Web App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/task-tracker/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="manu-game-maker.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Игровой движок MANU</h3>
+                      <p class="portfolio-card__summary">
+                        Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и
+                        проработка сотен сложных пользовательских сценариев.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">Product Design</li>
+                        <li class="portfolio-card__tag">Desktop App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/manu-game-maker/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="lunacy.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Графический редактор Lunacy</h3>
+                      <p class="portfolio-card__summary">
+                        Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и
+                        интерфейсной логики.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Desktop App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/lunacy/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="mobile-clinic-app.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Мобильное приложение для сети клиник</h3>
+                      <p class="portfolio-card__summary">
+                        Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом
+                        пользовательском пути, понятной навигации и быстром доступе к нужным действиям.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Mobile App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/mobile-clinic-app/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="task-distribution-concept.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Концепт сервиса распределения задач</h3>
+                      <p class="portfolio-card__summary">
+                        Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность
+                        процессов и удобство командной работы.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Analytics</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/task-distribution-concept/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="obsidian-plugin-columns-view.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Колоночный вид — плагин для Obsidian</h3>
+                      <p class="portfolio-card__summary">
+                        Интерфейс для многоколоночной работы с заметками: удобная навигация, фильтрация и настройка
+                        колончатого отображения прямо в редакторе Obsidian.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Plugin</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/obsidian-plugin-columns-view/filter use.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <div class="projects-carousel__spacer" aria-hidden="true"></div>
+              </div>
+            </div>
+            <button
+              type="button"
+              class="projects-carousel__edge-hit projects-carousel__edge-hit--left"
+              data-projects-edge-prev
+              aria-label="Прокрутить портфолио влево"
+            ></button>
+            <button
+              type="button"
+              class="projects-carousel__edge-hit projects-carousel__edge-hit--right"
+              data-projects-edge-next
+              aria-label="Прокрутить портфолио вправо"
+            ></button>
+          </div>
+        </div>
+      </section>
+
+<section id="contact" class="section section--surface section--footerish">
+      <div class="section__inner">
+        <h2 class="section__title">Контакты</h2>
+        <ul class="contact-grid">
+          <li><a class="contact-card contact-card--link contact-card--brand-tg" href="https://t.me/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../assets/shared/icons/tg.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Telegram</span><span class="contact-card__hint">Отвечу сегодня</span></span></a></li>
+          <li><a class="contact-card contact-card--link contact-card--brand-vk" href="https://vk.com/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../assets/shared/icons/vk.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">ВКонтакте</span><span class="contact-card__hint">Стабильный коннект</span></span></a></li>
+          <li><a class="contact-card contact-card--link contact-card--brand-ya" href="https://yandex.ru/chat/p/727e71fa-89b5-44a8-90a5-851021631a1c?utm_source=invite" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../assets/shared/icons/yandex_telemost.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Яндекс</span><span class="contact-card__hint">Да, тут тоже можно</span></span></a></li>
+          <li><button type="button" class="contact-card contact-card--action contact-card--brand-email" data-contact-copy data-email-b64="bmlrQG1hbWFkYWV2di5ydQ==" data-hint-default="Скопировать адрес" aria-label="Скопировать адрес электронной почты в буфер обмена"><span class="contact-card__corner contact-card__corner--copy" aria-hidden="true"></span><span class="contact-card__icon contact-card__icon--accent" aria-hidden="true"></span><span class="contact-card__body"><span class="contact-card__name">Почта</span><span class="contact-card__hint" data-contact-copy-hint>Скопировать адрес</span></span></button></li>
+        </ul>
+      </div>
+    </section>
+
+<section class="section section--surface" aria-hidden="true">
+      <div class="section__inner"></div>
+    </section>
+
+<footer class="footer">
+      <div class="footer__inner">
+        <span class="footer__chunk footer__chunk--date">© 2026<span class="footer__sep" aria-hidden="true"> · </span></span>
+        <span class="footer__chunk footer__chunk--main">Дизайн и разработка сайта — Николай Мамадаев</span>
+        <span class="footer__chunk footer__chunk--meta footer__attr"><span class="footer__sep" aria-hidden="true"> · </span><a href="../cases/design-system.html">Design System</a><span class="footer__sep" aria-hidden="true"> · </span><a href="../cookie-policy.html">Политика cookie</a></span>
+      </div>
+    </footer>
+
+<aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
+      <p class="cookie-notice__text">
+        Сайт использует cookie для комфортной работы. Подробнее — в
+        <a href="../cookie-policy.html" data-cookie-policy-link>политике cookie</a>.
+      </p>
+      <button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
+        <span>Принять</span>
+        <span class="cookie-notice__accept-icon" aria-hidden="true">
+          <img src="../assets/shared/icons/сookie.svg" alt="" width="20" height="20" loading="eager" decoding="async" />
+        </span>
+      </button>
+    </aside>
+
+<div id="nav-more-menu-floating" class="nav-more__floating" hidden data-nav-more-menu-floating aria-hidden="true"></div>
+
+
+  </body>
+</html>
diff --git a/public/cases/ai-platform-primo-rpa.html b/public/cases/ai-platform-primo-rpa.html
new file mode 100644
index 0000000..1e9c811
--- /dev/null
+++ b/public/cases/ai-platform-primo-rpa.html
@@ -0,0 +1,1138 @@
+<!DOCTYPE html>
+<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta
+      name="description"
+      content="Кейс: интерфейс AI Server в Primo RPA — OCR на корпоративных документах, дообучение моделей, skills, UX/UI."
+    />
+    <title>AI Server в Primo RPA — кейс</title>
+    <script>
+      (function () {
+        var FONT_CSS = {
+          merriweather: "../assets/fonts/merriweather.css",
+          geologica: "../assets/fonts/geologica.css",
+          mono: "../assets/fonts/mono.css",
+        };
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f !== "merriweather" && f !== "mono" && f !== "geologica") f = "merriweather";
+          d.dataset.font = f;
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+          var href = FONT_CSS[f];
+          if (href && !document.querySelector('link[data-theme-font="' + f + '"]')) {
+            var link = document.createElement("link");
+            link.rel = "stylesheet";
+            link.href = href;
+            link.setAttribute("data-theme-font", f);
+            document.head.appendChild(link);
+          }
+        } catch (e) {}
+      })();
+    </script>
+
+    <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon/favicon-16x16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="../assets/favicon/apple-touch-icon.png" />
+    <link rel="manifest" href="../assets/favicon/site.webmanifest" />
+    <link rel="preload" href="../assets/fonts/merriweather.css" as="style" />
+    <link rel="preload" href="../css/main.css" as="style" />
+    <link rel="preload" href="../js/skill-connectors.js" as="script" />
+    <link rel="modulepreload" href="../js/main.js" />
+    <link rel="stylesheet" href="../css/main.css" />
+    <script src="../js/skill-connectors.js" defer></script>
+    <script type="module" src="../js/main.js"></script>
+
+
+        <link rel="stylesheet" href="../vendor/plyr/plyr.css" />
+
+    <style>
+      .case-article {
+        max-width: 48rem;
+        margin: 0 auto;
+      }
+      .case-article h2 {
+        margin: 2rem 0 0.75rem;
+        font-size: clamp(1.15rem, 2vw, 1.35rem);
+        font-weight: 700;
+        color: var(--text);
+      }
+      .case-article h3 {
+        font-size: 1.05rem;
+        font-weight: 600;
+        color: var(--text);
+      }
+      .case-article .section__prose {
+        margin-bottom: 0.75rem;
+        color: var(--text);
+      }
+      .case-article img,
+      .case-article video {
+        display: block;
+        max-width: 100%;
+        height: auto;
+        margin: 0.75rem 0 1rem;
+      }
+      .case-article ul,
+      .case-article ol {
+        margin: 0.5rem 0 1rem 1.25rem;
+        padding: 0;
+      }
+      .case-article li {
+        margin-bottom: 0.35rem;
+      }
+      .case-article a:not(.btn) {
+        color: var(--accent);
+      }
+      .case-block {
+        margin-top: 3rem;
+        padding-top: 2.5rem;
+        border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
+      }
+      .case-block:first-of-type {
+        margin-top: 0;
+        padding-top: 0;
+        border-top: 0;
+      }
+    </style>
+    <script>
+      (function () {
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f === "merriweather" || f === "mono" || f === "geologica") {
+            d.dataset.font = f;
+          } else {
+            d.dataset.font = "merriweather";
+          }
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+        } catch (e) {}
+      })();
+    </script>
+  </head>
+  <body>
+    <a class="skip-link" href="#case-main">К содержимому кейса</a>
+    <header class="header" data-theme-picker>
+      <div class="header__inner">
+        <a class="logo" href="../index.html" aria-label="На главную">НМ</a>
+        <div class="header__cluster">
+          <nav class="nav" aria-label="Навигация по странице">
+            <a href="#projects">Портфолио</a>
+            <a href="#contact">Контакты</a>
+          </nav>
+        </div>
+      </div>
+    </header>
+
+<div class="fab-stack" aria-label="Быстрые действия">
+      <div class="theme-panel-fab-wrap">
+        <button type="button" class="fab fab--secondary glass-neutral" data-theme-panel-btn aria-expanded="false" aria-controls="theme-panel" aria-label="Настройки стиля">
+          <span class="theme-panel-fab__icon theme-panel-fab__icon--open-hide" aria-hidden="true"></span>
+          <svg class="theme-panel-fab__icon theme-panel-fab__icon--close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          </svg>
+        </button>
+        <div id="theme-panel" class="theme-picker__panel glass-neutral" role="dialog" aria-label="Тема и оформление" hidden data-theme-panel>
+          <div class="theme-picker__stack">
+            <section class="theme-picker__section" aria-labelledby="theme-accent-title">
+              <h3 id="theme-accent-title" class="theme-picker__section-title">Акцентный цвет</h3>
+              <div class="colorpicker" data-colorpicker>
+                <div class="colorpicker__plane-box">
+                  <canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Насыщенность и светлость акцента"></canvas>
+                  <div class="colorpicker__knob" data-sl-knob></div>
+                </div>
+                <div class="colorpicker__hue-wrap">
+                  <label class="colorpicker__hue-sr" for="theme-hue-slider">Оттенок акцента</label>
+                  <input id="theme-hue-slider" class="colorpicker__hue" type="range" min="0" max="360" value="210" data-hue-slider aria-valuemin="0" aria-valuemax="360" />
+                </div>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-mode-title">
+              <h3 id="theme-mode-title" class="theme-picker__section-title">Тема</h3>
+              <div class="radius-seg theme-mode-seg" role="radiogroup" aria-labelledby="theme-mode-title">
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="system" aria-label="Как в системе"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--system"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="light" aria-label="Светлая тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--light"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="dark" aria-label="Тёмная тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--dark"></span></span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-radius-title">
+              <h3 id="theme-radius-title" class="theme-picker__section-title">Скругление углов</h3>
+              <div class="radius-seg" role="radiogroup" aria-labelledby="theme-radius-title">
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="soft" aria-label="Слабое скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--soft"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="medium" aria-label="Среднее скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--medium"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="strong" aria-label="Сильное скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--strong"></span></span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-typography-title">
+              <h3 id="theme-typography-title" class="theme-picker__section-title">Типографика</h3>
+              <div class="radius-seg" role="radiogroup" aria-labelledby="theme-typography-title">
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="geologica" aria-label="Sans"><span class="theme-font-seg__label">Sans</span></button>
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="merriweather" aria-label="Sans Serif"><span class="theme-font-seg__label">Sans Serif</span></button>
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="mono" aria-label="Mono"><span class="theme-font-seg__label">Mono</span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-mesh-bg-title">
+              <h3 id="theme-mesh-bg-title" class="theme-picker__section-title">Фон страницы</h3>
+              <div class="radius-seg radius-seg--two" role="radiogroup" aria-labelledby="theme-mesh-bg-title">
+                <button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="on" aria-label="Показать фоновый градиент"><span class="theme-mesh-bg-seg__label">Вкл</span></button>
+                <button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="off" aria-label="Скрыть фоновый градиент"><span class="theme-mesh-bg-seg__label">Выкл</span></button>
+              </div>
+            </section>
+          </div>
+        </div>
+      </div>
+      <a class="fab fab--primary" href="#contact" aria-label="Связаться">
+        <span class="fab-primary__ico" aria-hidden="true"></span>
+      </a>
+    </div>
+<div class="content-edit-fab-stack" aria-label="Правки контента" data-content-edit-ui>
+  <button
+    type="button"
+    class="fab fab--secondary glass-neutral content-edit-fab"
+    data-content-edit-mode-toggle
+    hidden
+    aria-pressed="false"
+    aria-label="Режим правок контента"
+    title="Режим правок"
+  >
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <path
+        d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0 0-3L16.5 4.5a2.12 2.12 0 0 0-3 0L3 15v5z"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linejoin="round"
+      />
+    </svg>
+    <span class="content-edit-fab__badge" hidden aria-hidden="true">0</span>
+  </button>
+</div>
+
+
+<main id="case-main" class="section section--tight">
+      <div class="section__inner case-article">
+        <p class="hero__eyebrow">Product Design · AI</p>
+        <h1 class="case-page__h1">Разработка интерфейса для&nbsp;Primo&nbsp;RPA&nbsp;AI&nbsp;Server</h1>
+        <p class="case-page__sub">
+          Платформа интеллектуальной обработки документов<br />
+          и оркестрации ИИ-агентов
+        </p>
+
+        <div class="case-block" id="obzor">
+          <h2>Обзор</h2>
+          <p class="section__prose">
+            Продукт AI Server разворачивается на внутренних серверах клиентов. Он позволяет использовать нейросети во внутреннем контуре компании и настраивается через веб-интерфейс.
+          </p>
+          <p class="section__prose">
+            Меня пригласили на проект как UX/UI-дизайнера. Продукт был в активной стадии тестирования; по обратной связи от клиентов стало ясно, что настройка слишком сложна: с ней справляются только эксперты и команда внедрения Primo RPA. Сложная настройка снижала привлекательность продукта и тормозила масштабирование.
+          </p>
+          <p class="section__prose">
+            Передо мной стояла задача упростить настройку и снизить порог входа, разгрузить техподдержку и отдел внедрения — чтобы клиенты могли самостоятельно настраивать сервис под свои задачи.
+          </p>
+          <aside class="case-callout" data-callout>
+            <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">✅</span>
+            <div class="case-callout__content">
+              <p>
+                Бизнес ставил цель — упростить настройку AI Server и сделать продукт доступнее для клиента. От меня ждали интерфейса, в котором настройку можно пройти без постоянной помощи поддержки и внедрения.
+              </p>
+            </div>
+          </aside>
+          <p class="section__prose">
+            Ниже — погружение в продукт, примеры выполненных задач и паттерны интерфейса.
+          </p>
+        </div>
+
+        <div class="case-block" id="pogruzhenie">
+          <h2>Погружение</h2>
+          <p class="section__prose">
+            Работу начал со знакомства с командой: кто за продукт, кто за внедрение, как всё устроено сейчас. Пообщался с экспертами по настройке, разделил ключевые и вспомогательные сценарии, собрал визуализацию поведения пользователя. Плотно работал с разработкой и искал, где интерфейс можно упростить и ускорить настройку.
+          </p>
+          <aside class="case-callout" data-callout>
+            <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">✨</span>
+            <div class="case-callout__content">
+              <p>
+                Мой опыт в ИИ и в похожих веб-платформах помог быстрее разобраться в домене и говорить с разработкой на одном языке.
+              </p>
+            </div>
+          </aside>
+          <p class="section__prose">
+            Продукт уже использовали клиенты, поэтому нельзя было остановить разработку и пересобрать интерфейс целиком. Пришлось решать, в каком порядке и какие части трогать в редизайне. Самые крупные изменения встраивал в текущий план разработки, без отрыва от релизов.
+          </p>
+          <p class="section__prose">
+            Прорабатывать изменения в интерфейсе нужно было с учётом используемого фреймворка. На тот момент это был
+            <a href="https://ant.design/components/overview" target="_blank" rel="noopener noreferrer">Ant Design</a> под React со стилизацией под
+            <a href="https://templates.iqonic.design/hope-ui/html/dist/" target="_blank" rel="noopener noreferrer">Hope UI</a>.
+          </p>
+          <p class="section__prose">
+            Новые компоненты приходилось придумывать только в крайних случаях, в приоритете было переиспользовать уже существующую библиотеку. По итоговым экранам это видно: интерфейс в основном собран из готовых блоков, а не с нуля.
+          </p>
+        </div>
+
+        <div class="case-block" id="zadachi">
+          <h2>Выполненные задачи</h2>
+          <p class="section__prose">
+            Фрагменты интерфейса, которые я переработал или собрал почти с нуля. Ниже — отдельные задачи из проекта, которые хотелось показать в портфолио, а не обзор всего продукта.
+          </p>
+
+          <h3>Главная навигация сервиса</h3>
+          <p class="section__prose">
+            В сервисе стояла привычная для админок схема: слева боковое меню, справа контент. На скриншоте видно, что такая структура страницы неэффективно использовала доступное рабочее пространство на экране. Если открыть проект, слева окажется навигация по разделам проекта — вперемешку с главной, и это путает пользователя. Эту ситуацию нужно было исправить.
+          </p>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/main.webp"
+              alt="Предыдущая главная навигация сервиса AI Server"
+              width="2520"
+              height="1680"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Предыдущая навигация</figcaption>
+          </figure>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/main-new.webp"
+              alt="Обновлённая главная навигация сервиса AI Server"
+              width="1920"
+              height="1080"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Обновлённая навигация</figcaption>
+          </figure>
+          <p class="section__prose">
+            Обновлённая навигация стала компактной и всё так же привычна большинству пользователей. Для контентной части пространства стало значительно больше. Как будет видно дальше, у проектов внутри появится отдельная навигация, которая не будет перекрывать главную. При этом улучшилась эстетическая составляющая дизайна сервиса.
+          </p>
+          <h3>Навигация внутри конкретного проекта</h3>
+          <p class="section__prose">
+            У пользователя остаётся доступ и к навигации внутри проекта, и к главной навигации сервиса. Разные типы проекта содержат разное количество пунктов, и такое решение позволяет удачно их разместить.
+          </p>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/nav-project-nlp.webp"
+              alt="Навигация внутри NLP-проекта и главная навигация сервиса"
+              width="1920"
+              height="302"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>NLP-проект</figcaption>
+          </figure>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/nav-project-ocr.webp"
+              alt="Навигация внутри OCR-проекта и главная навигация сервиса"
+              width="1920"
+              height="302"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>OCR-проект</figcaption>
+          </figure>
+          <p class="section__prose">
+            Отдельно отмечу идею с формой пунктов навигации. По виду она мягко подсказывает, что настройку удобнее проходить по шагам, но разделы по-прежнему работают как обычные табы: можно переключаться в любом порядке.
+          </p>
+          <figure class="case-media">
+            <img
+              src="../assets/ai-platform-primo-rpa/nav-secondary-detail_view.webp"
+              alt="Вторичная навигация проекта со стрелочной формой пунктов"
+              width="924"
+              height="101"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Форма пунктов навигации</figcaption>
+          </figure>
+          <h3>Редактор разметки датасета</h3>
+          <p class="section__prose">
+            На этом экране проводят больше всего времени. Разметка полей на сотнях изображений — монотонная работа, но от неё зависит, насколько качественными будут данные для обучения модели. Прежний редактор сильно выбивался из общего стиля сервиса: выглядел перегруженно и местами сбивал с толку, особенно в работе с полями.
+          </p>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/dataset-editor-old.webp"
+              alt="Редактор датасета — предыдущая версия для сравнения"
+              width="1200"
+              height="675"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Предыдущая версия редактора датасета</figcaption>
+          </figure>
+          <p class="section__prose">
+            Я разобрал редактор на микросценарии, выстроил их по приоритету и связке между собой. С командой обсудили, как сделать поведение пользователя плавнее и понятнее. В новой структуре страницы заложил место под новый функционал и те же паттерны, что в остальном сервисе. Дизайн редактора привёл к общей стилистике.
+          </p>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/dataset-editor.webp"
+              alt="Редактор датасета — текущая версия интерфейса"
+              width="1200"
+              height="675"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Обновлённая версия редактора датасета</figcaption>
+          </figure>
+          <p class="section__prose">
+            На схематическом наброске видно, что страница стала симметричной: почти всё пространство уходит на размечаемое изображение. Действия сгруппированы по панелям — нужную функцию проще найти.
+          </p>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/dataset_editor-wireframe-default_mode.webp"
+              alt="Вайрфрейм редактора датасета — режим по умолчанию"
+              width="1200"
+              height="675"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Каркас: режим по умолчанию</figcaption>
+          </figure>
+          <p class="section__prose">
+            Добавил режим «Во весь экран». Продвинутые пользователи обычно прячут лишние панели и работают с разметкой через горячие клавиши и нижнюю панель. Боковые панели можно свернуть, когда нужно больше места под изображение — на небольших мониторах это особенно имеет значение.
+          </p>
+          <figure class="case-media case-media-gallery case-media-gallery--wide" style="--case-gallery-cols: 2">
+            <div class="case-media-gallery__grid">
+              <div class="case-media-gallery__item">
+                <img
+                  src="../assets/ai-platform-primo-rpa/full-screen-mode-with-panels.webp"
+                  alt="Полноэкранный режим с боковыми панелями"
+                  loading="lazy"
+                  decoding="async"
+                  data-image-viewer
+                />
+              </div>
+              <div class="case-media-gallery__item">
+                <img
+                  src="../assets/ai-platform-primo-rpa/full-screen-mode-zen.webp"
+                  alt="Полноэкранный режим без отвлекающих панелей"
+                  loading="lazy"
+                  decoding="async"
+                  data-image-viewer
+                />
+              </div>
+            </div>
+            <figcaption>Вид редактора в режиме «Во весь экран»</figcaption>
+          </figure>
+          <figure class="case-media case-media-gallery case-media-gallery--wide" style="--case-gallery-cols: 2">
+            <div class="case-media-gallery__grid">
+              <div class="case-media-gallery__item">
+                <img
+                  src="../assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode-both_panels.webp"
+                  alt="Вайрфрейм zen mode — обе панели"
+                  loading="lazy"
+                  decoding="async"
+                  data-image-viewer
+                />
+              </div>
+              <div class="case-media-gallery__item">
+                <img
+                  src="../assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode.webp"
+                  alt="Вайрфрейм zen mode"
+                  loading="lazy"
+                  decoding="async"
+                  data-image-viewer
+                />
+              </div>
+              <div class="case-media-gallery__item">
+                <img
+                  src="../assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode-left_panel.webp"
+                  alt="Вайрфрейм zen mode — левая панель"
+                  loading="lazy"
+                  decoding="async"
+                  data-image-viewer
+                />
+              </div>
+              <div class="case-media-gallery__item">
+                <img
+                  src="../assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode-right_panel.webp"
+                  alt="Вайрфрейм zen mode — правая панель"
+                  loading="lazy"
+                  decoding="async"
+                  data-image-viewer
+                />
+              </div>
+            </div>
+            <figcaption>Варианты рабочего вида в режиме «На весь экран»</figcaption>
+          </figure>
+          <p class="section__prose">
+            Нижняя панель позволяет переключаться между изображениями и выполнять быстрые действия.
+          </p>
+          <figure class="case-media case-media--content">
+            <img
+              src="../assets/ai-platform-primo-rpa/dataset_editor-main_toolbar.webp"
+              alt="Главная панель инструментов редактора датасета"
+              width="1200"
+              height="675"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Нижняя панель инструментов</figcaption>
+          </figure>
+
+          <h3>Карточки настройки обучения модели</h3>
+          <p class="section__prose">
+            После разметки датасета модель можно дообучить (fine-tuning). Мы с командой, как обычно, разобрали все действия пользователя для этой задачи. Сделали несколько вариантов компоновки этой страницы; самым удачным оказался вариант с лентой из карточек.
+          </p>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/in_project-learn-overview.webp"
+              alt="Обзор карточек настройки обучения в проекте"
+              width="1920"
+              height="740"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Вид раздела обучения моделей</figcaption>
+          </figure>
+          <p class="section__prose">
+            В начале ленты у пользователя карточка с настройкой обучения: через неё видно результат разметки активного датасета, задают параметры и запускают fine-tuning.
+          </p>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/in_project-learn-card-new.webp"
+              alt="Карточка настройки обучения"
+              width="1306"
+              height="1104"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Карточка настройки обучения</figcaption>
+          </figure>
+          <p class="section__prose">
+            В карточке отдельный блок с оценкой качества разметки датасета и блок с параметрами перед запуском обучения.
+          </p>
+          <aside class="case-callout" data-callout>
+            <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">⭐</span>
+            <div class="case-callout__content">
+              <p>
+                Матрица оценки качества датасета получилась и наглядной, и компактной.
+              </p>
+            </div>
+          </aside>
+          <p class="section__prose">
+            Под каждый запущенный процесс ниже появится отдельная карточка. Можно завести несколько процессов с разными параметрами и потом сравнить, какая конфигурация сработала лучше.
+          </p>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/in_project-learn-card-learning_process.webp"
+              alt="Карточка процесса обучения модели"
+              width="1306"
+              height="1066"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Карточка процесса обучения</figcaption>
+          </figure>
+          <p class="section__prose">
+            Внутри карточки информация и действия разнесены по логическим блокам. Мы рассматривали разные варианты компоновки и в итоге зафиксировали схему, которая оказалась удобнее остальных.
+          </p>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/in_project-learn-card-learning_process_wireframe.webp"
+              alt="Вайрфрейм карточки процесса обучения"
+              width="1306"
+              height="1066"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Вайрфрейм карточки процесса обучения</figcaption>
+          </figure>
+          <p class="section__prose">
+            Карточки могут быть свёрнуты. Для удобства в шапку вынесены название и статус.
+          </p>
+          <figure class="case-media case-media--content">
+            <img
+              src="../assets/ai-platform-primo-rpa/in_project-learn-card-сollapsed.webp"
+              alt="Свёрнутая карточка настройки обучения"
+              width="1306"
+              height="102"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Свёрнутая карточка</figcaption>
+          </figure>
+          <p class="section__prose">
+            После проработки этих карточек появились паттерны, которые потом использовались в других разделах продукта. Так проще держать интерфейс в едином стиле.
+          </p>
+
+          <h3>Настройка параметров полей</h3>
+          <p class="section__prose">
+            На одной из страниц раздела проекта нужно было дать возможность настроить уникальные параметры полей для датасета. Редактору требовалась большая область под изображение (скан документа), могло быть десятки полей, у каждого — свои зависимые параметры и типы.
+          </p>
+          <p class="section__prose">
+            На видео — работа прототипа готового решения.
+          </p>
+          <figure class="case-media" style="margin: 0.85rem 0 1.2rem">
+            <div class="case-video-shell">
+              <video
+                controls
+                preload="metadata"
+                playsinline
+                poster="../assets/ai-platform-primo-rpa/fields-maping.webp"
+                data-case-video-player
+                style="display: block; width: 100%; height: auto; margin: 0"
+              >
+                <source src="../assets/ai-platform-primo-rpa/fields-maping.webm" type="video/webm" />
+                <source src="../assets/ai-platform-primo-rpa/fields-maping.mp4" type="video/mp4" />
+                Ваш браузер не поддерживает видео.
+              </video>
+            </div>
+            <figcaption>Сопоставление полей в интерфейсе</figcaption>
+          </figure>
+          <p class="section__prose">
+            Интерфейс получился компактным и лаконичным. Механика не считывается с первого взгляда, но после короткого обучения пользователю в нём комфортно.
+          </p>
+          <p class="section__prose">
+            Редактор для меня оказался интересной и сложной задачей: было много черновиков и вариантов поведения. В финале остался вариант, который закрывал все требования, которые мы с командой сформулировали.
+          </p>
+
+          <h3>Модальные окна на отдельном экране</h3>
+          <p class="section__prose">
+            В сервисе часть задач нужно выполнять параллельно с остальной работой. Для таких сценариев сделали так: модальное окно открывается на отдельной странице.
+          </p>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/fullscreen_modal-import_dataset.webp"
+              alt="Модальное окно импорта датасета на отдельном экране"
+              width="1440"
+              height="1024"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Импорт датасета в модальном окне</figcaption>
+          </figure>
+          <p class="section__prose">
+            На странице проекта отображается заглушка: процесс идёт, рядом кнопка перехода к нему.
+          </p>
+          <figure class="case-media case-media--content">
+            <img
+              src="../assets/ai-platform-primo-rpa/fullscreen_modal-in_project-import_dataset.webp"
+              alt="Импорт датасета внутри проекта"
+              width="1920"
+              height="740"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Импорт датасета внутри проекта</figcaption>
+          </figure>
+          <p class="section__prose">
+            Такие заглушки есть в нескольких разделах проекта — в зависимости от того, можно ли с ним работать, пока задача активна.
+          </p>
+          <aside class="case-callout" data-callout>
+            <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">💡</span>
+            <div class="case-callout__content">
+              <p>
+                Пользователь может открыть окно с процессом в соседней вкладке и следить за прогрессом. В другой вкладке или окне продолжает работу с проектом в доступных разделах.
+              </p>
+            </div>
+          </aside>
+          <p class="section__prose">
+            Такой вариант оказался технически проще, чем точечно блокировать кнопки на отдельных страницах.
+          </p>
+
+        </div>
+
+        <div class="case-block" id="process">
+          <h2>Передача в разработку</h2>
+          <p class="section__prose">
+            Раз в неделю команда собиралась на обсуждение дизайна. Созвоны были длительными, но продуктивными. На неделю формировали список задач для дизайна, приоритеты и сроки подстраивали под планы релизов.
+          </p>
+          <p class="section__prose">
+            Я делал дизайн в Figma, в разработку передавал ссылки на готовые юзерфлоу. Отдельную дизайн-систему или UI-kit не заводили: в продукте уже был готовый фреймворк.
+          </p>
+          <p class="section__prose">
+            Время от времени созванивался с верстальщиком тет-а-тет, если нужно уточнить детали по макетам или объяснить поведение интерфейса. После вёрстки давал фидбэк на правки, чтобы результат не отличался от задуманного поведения и вида интерфейса.
+          </p>
+        </div>
+
+        <div class="case-block" id="smena-dizaynera">
+          <h2>Смена дизайнера</h2>
+          <p class="section__prose">
+            Проект вёл параллельно с другими, нагрузку приходилось распределять. В компанию наняли нового дизайнера — моя задача была ввести её в курс дела и курировать результат по задачам. После адаптации работа над проектом полностью перешла под её ответственность.
+          </p>
+        </div>
+
+        <div class="case-block" id="zaklyuchenie">
+          <h2>Итог</h2>
+          <p class="section__prose">
+            Интерфейс Primo RPA AI Server стал выглядеть консистентно. С ним могут работать пользователи, которые ещё не эксперты в области ИИ. Для будущих изменений в интерфейсе заложена возможность наращивать функционал без больших переделок.
+          </p>
+        </div>
+      </div>
+    </main>
+
+    <section id="projects" class="section section--surface">
+        <div class="section__inner">
+          <h2 class="section__title">Портфолио</h2>
+          <ol class="mini-projects-grid" data-mini-projects-list>
+            <li class="mini-projects-grid__item" data-mp-cells="3">
+              <a class="mp-card mp-card--link mp-card--stack" href="ai-platform-primo-rpa.html" aria-label="Платформа для работы с AI — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/ai-platform-primo-rpa/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Платформа для работы с AI</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями автоматизации и Smart OCR.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="3">
+              <a class="mp-card mp-card--link mp-card--stack" href="lunacy.html" aria-label="Графический редактор Lunacy — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/lunacy/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Графический редактор Lunacy</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Desktop App</li>
+                  </ul>
+                  <p class="mp-card__desc">Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и интерфейсной логики.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--stack" href="manu-game-maker.html" aria-label="Игровой движок MANU — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/manu-game-maker/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Игровой движок MANU</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">Product Design</li>
+                    <li class="mp-card__tag">Desktop App</li>
+                  </ul>
+                  <p class="mp-card__desc">Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и проработка сотен сложных пользовательских сценариев.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--stack" href="mobile-clinic-app.html" aria-label="Мобильное приложение для сети клиник — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/mobile-clinic-app/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Мобильное приложение для сети клиник</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Mobile App</li>
+                  </ul>
+                  <p class="mp-card__desc">Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом пользовательском пути, понятной навигации и быстром доступе к нужным действиям.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="orc-automation-panel.html" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Веб-панель для оркестрации автоматизаций</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под продакшен без остановки релизов.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="task-distribution-concept.html" aria-label="Концепт сервиса распределения задач — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Концепт сервиса распределения задач</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Analytics</li>
+                  </ul>
+                  <p class="mp-card__desc">Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность процессов и удобство командной работы.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="task-tracker.html" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Таск-трекер для бек-офис системы</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">Product Design</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по исполнителям; вкладки, фильтры, доска / список / таблица, Drag&amp;Drop.</p>
+                </div>
+              </a>
+            </li>
+          </ol>
+        </div>
+      </section><section hidden class="section section--surface" aria-hidden="true">
+        <div class="section__inner">
+          <div class="projects__heading">
+            <h2 class="section__title projects__title">Портфолио</h2>
+            <div class="projects__controls" aria-label="Навигация по карточкам портфолио">
+              <button type="button" class="projects__nav-btn" data-projects-prev aria-label="Прокрутить влево" aria-controls="projects-viewport">
+                <span class="projects__nav-ico projects__nav-ico--left" aria-hidden="true"></span>
+              </button>
+              <button type="button" class="projects__nav-btn" data-projects-next aria-label="Прокрутить вправо" aria-controls="projects-viewport">
+                <span class="projects__nav-ico projects__nav-ico--right" aria-hidden="true"></span>
+              </button>
+            </div>
+          </div>
+          <div class="projects-carousel">
+            <div id="projects-viewport" class="projects-carousel__viewport" data-projects-viewport>
+              <div class="projects-carousel__track">
+                <div class="projects-carousel__spacer" aria-hidden="true"></div>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="orc-automation-panel.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Веб-панель для оркестрации автоматизаций</h3>
+                      <p class="portfolio-card__summary">
+                        Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под
+                        продакшен без остановки релизов.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Web App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/orc-primo-rpa/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="task-tracker.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Таск-трекер для бек-офис системы</h3>
+                      <p class="portfolio-card__summary">
+                        Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по
+                        исполнителям; вкладки, фильтры, виды доска / список / таблица, Drag&amp;Drop.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">Product Design</li>
+                        <li class="portfolio-card__tag">Web App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/task-tracker/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="manu-game-maker.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Игровой движок MANU</h3>
+                      <p class="portfolio-card__summary">
+                        Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и
+                        проработка сотен сложных пользовательских сценариев.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">Product Design</li>
+                        <li class="portfolio-card__tag">Desktop App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/manu-game-maker/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="lunacy.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Графический редактор Lunacy</h3>
+                      <p class="portfolio-card__summary">
+                        Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и
+                        интерфейсной логики.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Desktop App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/lunacy/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="mobile-clinic-app.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Мобильное приложение для сети клиник</h3>
+                      <p class="portfolio-card__summary">
+                        Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом
+                        пользовательском пути, понятной навигации и быстром доступе к нужным действиям.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Mobile App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/mobile-clinic-app/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="task-distribution-concept.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Концепт сервиса распределения задач</h3>
+                      <p class="portfolio-card__summary">
+                        Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность
+                        процессов и удобство командной работы.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Analytics</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/task-distribution-concept/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="obsidian-plugin-columns-view.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Колоночный вид — плагин для Obsidian</h3>
+                      <p class="portfolio-card__summary">
+                        Интерфейс для многоколоночной работы с заметками: удобная навигация, фильтрация и настройка
+                        колончатого отображения прямо в редакторе Obsidian.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Plugin</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/obsidian-plugin-columns-view/filter use.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <div class="projects-carousel__spacer" aria-hidden="true"></div>
+              </div>
+            </div>
+            <button
+              type="button"
+              class="projects-carousel__edge-hit projects-carousel__edge-hit--left"
+              data-projects-edge-prev
+              aria-label="Прокрутить портфолио влево"
+            ></button>
+            <button
+              type="button"
+              class="projects-carousel__edge-hit projects-carousel__edge-hit--right"
+              data-projects-edge-next
+              aria-label="Прокрутить портфолио вправо"
+            ></button>
+          </div>
+        </div>
+      </section>
+
+<section id="contact" class="section section--surface section--footerish">
+      <div class="section__inner">
+        <h2 class="section__title">Контакты</h2>
+        <ul class="contact-grid">
+          <li><a class="contact-card contact-card--link contact-card--brand-tg" href="https://t.me/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../assets/shared/icons/tg.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Telegram</span><span class="contact-card__hint">Отвечу сегодня</span></span></a></li>
+          <li><a class="contact-card contact-card--link contact-card--brand-vk" href="https://vk.com/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../assets/shared/icons/vk.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">ВКонтакте</span><span class="contact-card__hint">Стабильный коннект</span></span></a></li>
+          <li><a class="contact-card contact-card--link contact-card--brand-ya" href="https://yandex.ru/chat/p/727e71fa-89b5-44a8-90a5-851021631a1c?utm_source=invite" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../assets/shared/icons/yandex_telemost.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Яндекс</span><span class="contact-card__hint">Да, тут тоже можно</span></span></a></li>
+          <li><button type="button" class="contact-card contact-card--action contact-card--brand-email" data-contact-copy data-email-b64="bmlrQG1hbWFkYWV2di5ydQ==" data-hint-default="Скопировать адрес" aria-label="Скопировать адрес электронной почты в буфер обмена"><span class="contact-card__corner contact-card__corner--copy" aria-hidden="true"></span><span class="contact-card__icon contact-card__icon--accent" aria-hidden="true"></span><span class="contact-card__body"><span class="contact-card__name">Почта</span><span class="contact-card__hint" data-contact-copy-hint>Скопировать адрес</span></span></button></li>
+        </ul>
+      </div>
+    </section>
+
+<section class="section section--surface" aria-hidden="true">
+      <div class="section__inner"></div>
+    </section>
+
+<footer class="footer">
+      <div class="footer__inner">
+        <span class="footer__chunk footer__chunk--date">© 2026<span class="footer__sep" aria-hidden="true"> · </span></span>
+        <span class="footer__chunk footer__chunk--main">Дизайн и разработка сайта — Николай Мамадаев</span>
+        <span class="footer__chunk footer__chunk--meta footer__attr"><span class="footer__sep" aria-hidden="true"> · </span><a href="../cases/design-system.html">Design System</a><span class="footer__sep" aria-hidden="true"> · </span><a href="../cookie-policy.html">Политика cookie</a></span>
+      </div>
+    </footer>
+
+<aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
+      <p class="cookie-notice__text">
+        Сайт использует cookie для комфортной работы. Подробнее — в
+        <a href="../cookie-policy.html" data-cookie-policy-link>политике cookie</a>.
+      </p>
+      <button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
+        <span>Принять</span>
+        <span class="cookie-notice__accept-icon" aria-hidden="true">
+          <img src="../assets/shared/icons/сookie.svg" alt="" width="20" height="20" loading="eager" decoding="async" />
+        </span>
+      </button>
+    </aside>
+
+<div id="nav-more-menu-floating" class="nav-more__floating" hidden data-nav-more-menu-floating aria-hidden="true"></div>
+
+
+  </body>
+</html>
diff --git a/public/cases/design-system.html b/public/cases/design-system.html
new file mode 100644
index 0000000..933ea8a
--- /dev/null
+++ b/public/cases/design-system.html
@@ -0,0 +1,1046 @@
+<!DOCTYPE html>
+<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta
+      name="description"
+      content="Design System портфолио: цвета, типографика, сетка, компоненты интерфейса."
+    />
+    <title>Design System — портфолио</title>
+    <script>
+      (function () {
+        var FONT_CSS = {
+          merriweather: "../assets/fonts/merriweather.css",
+          geologica: "../assets/fonts/geologica.css",
+          mono: "../assets/fonts/mono.css",
+        };
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f !== "merriweather" && f !== "mono" && f !== "geologica") f = "merriweather";
+          d.dataset.font = f;
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+          var href = FONT_CSS[f];
+          if (href && !document.querySelector('link[data-theme-font="' + f + '"]')) {
+            var link = document.createElement("link");
+            link.rel = "stylesheet";
+            link.href = href;
+            link.setAttribute("data-theme-font", f);
+            document.head.appendChild(link);
+          }
+        } catch (e) {}
+      })();
+    </script>
+
+    <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon/favicon-16x16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="../assets/favicon/apple-touch-icon.png" />
+    <link rel="manifest" href="../assets/favicon/site.webmanifest" />
+    <link rel="preload" href="../assets/fonts/merriweather.css" as="style" />
+    <link rel="preload" href="../css/main.css" as="style" />
+    <link rel="preload" href="../js/skill-connectors.js" as="script" />
+    <link rel="modulepreload" href="../js/main.js" />
+    <link rel="stylesheet" href="../css/main.css" />
+    <script src="../js/skill-connectors.js" defer></script>
+    <script type="module" src="../js/main.js"></script>
+
+
+    <style>
+      #main {
+        padding-bottom: clamp(3.5rem, 8vw, 5.5rem);
+      }
+
+      .case-article.ds-page {
+        max-width: 52rem;
+        margin: 0 auto;
+      }
+
+      .case-article.ds-page .case-page__h1 {
+        margin-bottom: 0.65rem;
+      }
+
+      .case-article.ds-page .case-page__sub {
+        margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
+      }
+
+      .case-article.ds-page .section__prose {
+        margin-bottom: 1.15rem;
+        line-height: 1.65;
+        color: var(--text);
+      }
+
+      .case-article.ds-page > h2 {
+        margin: 0 0 1.15rem;
+        padding-top: clamp(2.75rem, 6vw, 4rem);
+        font-family: var(--font);
+        font-size: clamp(1.15rem, 2vw, 1.35rem);
+        font-weight: 700;
+        color: var(--text);
+        scroll-margin-top: 1.5rem;
+        border-top: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
+      }
+
+      .case-article.ds-page > h2#colors {
+        padding-top: clamp(1.5rem, 4vw, 2.25rem);
+        border-top: none;
+      }
+
+      .case-article.ds-page > h3 {
+        margin: clamp(2rem, 4vw, 2.75rem) 0 0.85rem;
+        font-family: var(--font);
+        font-size: 1.05rem;
+        font-weight: 600;
+        color: var(--text);
+      }
+
+      .case-article.ds-page > h2 + .section__prose,
+      .case-article.ds-page > h2 + h3 {
+        margin-top: 0;
+      }
+
+      .case-article.ds-page > h2 + h3 {
+        margin-top: 0.25rem;
+      }
+
+      .case-article.ds-page #components h3:first-of-type {
+        margin-top: 1rem;
+      }
+      .case-article.ds-page a:not(.btn) {
+        color: var(--accent);
+      }
+      .sg-toc {
+        margin: clamp(1.5rem, 3vw, 2rem) 0 clamp(2.25rem, 5vw, 3.25rem);
+        padding: 1.15rem 1.35rem;
+        border-radius: var(--radius-md);
+        border: 1px solid var(--line);
+        background: color-mix(in srgb, var(--surface) 72%, transparent);
+      }
+      .sg-toc ol {
+        margin: 0;
+        padding-left: 1.25rem;
+        color: var(--text-muted);
+      }
+      .sg-toc li + li {
+        margin-top: 0.35rem;
+      }
+      .sg-toc a {
+        color: var(--accent-text);
+        text-decoration: none;
+      }
+      .sg-toc a:hover,
+      .sg-toc a:focus-visible {
+        text-decoration: underline;
+      }
+
+      .sg-blocks-card {
+        margin: 0 0 2.5rem;
+        padding: 1.15rem 1.35rem;
+        border-radius: var(--radius-md);
+        border: 1px solid var(--line);
+        background: color-mix(in srgb, var(--surface) 72%, transparent);
+      }
+
+      .sg-blocks-card p {
+        margin: 0 0 0.85rem;
+        line-height: 1.65;
+        color: var(--text);
+      }
+
+      .sg-blocks-card p:last-child {
+        margin-bottom: 0;
+      }
+
+      #blocks,
+      #mini-projects {
+        scroll-margin-top: calc(var(--header-offset, 4.25rem) + 0.75rem);
+      }
+      .sg-swatch-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
+        gap: 0.75rem;
+        margin: 1rem 0 1.75rem;
+      }
+      .sg-swatch {
+        border-radius: var(--radius-sm);
+        border: 1px solid var(--line);
+        overflow: hidden;
+      }
+      .sg-swatch__chip {
+        height: 3.25rem;
+      }
+      .sg-swatch__name {
+        display: block;
+        padding: 0.35rem 0.45rem;
+        font-size: 0.68rem;
+        line-height: 1.25;
+        font-family: var(--font);
+        color: var(--text-muted);
+        word-break: break-all;
+      }
+      .sg-stack {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.75rem;
+        margin: 1rem 0 2rem;
+      }
+      .sg-stack--row {
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: center;
+      }
+      .sg-label {
+        margin: 0.35rem 0 0;
+        font-size: 0.78rem;
+        color: var(--text-muted);
+        font-family: var(--font);
+      }
+
+      .case-article.ds-page .sg-label {
+        display: block;
+        margin-bottom: 1.75rem;
+      }
+
+      .sg-table-wrap {
+        overflow-x: auto;
+        margin: 1rem 0 2rem;
+      }
+      .sg-table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: 0.88rem;
+      }
+      .sg-table th,
+      .sg-table td {
+        padding: 0.65rem 0.85rem;
+        border: 1px solid var(--line);
+        text-align: left;
+        vertical-align: top;
+      }
+      .sg-table th {
+        background: color-mix(in srgb, var(--surface) 80%, transparent);
+        color: var(--text);
+        font-weight: 600;
+      }
+      .sg-table td {
+        color: var(--text-muted);
+      }
+      .sg-table code {
+        font-size: 0.82em;
+      }
+      .sg-table--type .sg-type-sample {
+        color: var(--text);
+        min-width: 11rem;
+      }
+      .sg-table--type .sg-type-sample > * {
+        margin: 0;
+      }
+      .sg-table--type td:first-child {
+        white-space: nowrap;
+        vertical-align: top;
+      }
+      .sg-table--type tbody td:last-child {
+        font-size: 0.88rem;
+      }
+      .sg-layout-demo {
+        margin: 1rem 0 2rem;
+        padding: 1.1rem;
+        border-radius: var(--radius-md);
+        border: 1px dashed var(--line);
+        background: color-mix(in srgb, var(--bg-elevated) 55%, transparent);
+      }
+      .sg-layout-demo__hero {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 0.65rem;
+      }
+      @media (min-width: 860px) {
+        .sg-layout-demo__hero {
+          grid-template-columns: 1.15fr 0.85fr;
+        }
+      }
+      .sg-layout-demo__block {
+        min-height: 2.75rem;
+        border-radius: var(--radius-sm);
+        background: color-mix(in srgb, var(--accent) 18%, var(--surface));
+        border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.75rem;
+        color: var(--text-muted);
+      }
+      .sg-contact-demo {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+      .sg-contact-demo .contact-card {
+        pointer-events: none;
+        cursor: default;
+      }
+      /* В компонентах только 2 карточки — без 4-колоночной сетки главной */
+      .sg-contact-components.contact-grid {
+        grid-template-columns: 1fr;
+      }
+      @media (min-width: 560px) {
+        .sg-contact-components.contact-grid {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+      }
+      .sg-portfolio-wrap {
+        max-width: 100%;
+      }
+      .sg-portfolio-wrap .portfolio-card {
+        pointer-events: none;
+      }
+      .sg-section-demo.section {
+        margin: 0.75rem calc(-1 * max(var(--space), env(safe-area-inset-left, 0px))) 2rem;
+        padding: 1.35rem max(var(--space), env(safe-area-inset-right, 0px)) 1.35rem
+          max(var(--space), env(safe-area-inset-left, 0px));
+        border-radius: var(--radius-md);
+        background: var(--surface);
+        border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
+      }
+
+      .sg-section-demo .section__inner {
+        max-width: none;
+        margin: 0;
+      }
+
+      .sg-section-demo .section__title {
+        margin: 0 0 0.65rem;
+        padding: 0;
+        border: none;
+        font-size: clamp(1.02rem, 1.65vw, 1.28rem);
+      }
+
+      .sg-section-demo .section__prose {
+        margin: 0;
+        color: var(--text-muted);
+      }
+
+      .case-article.ds-page pre {
+        margin: 0.75rem 0 2rem;
+      }
+
+      .case-article.ds-page ul.section__prose,
+      .case-article.ds-page ol.section__prose {
+        margin-bottom: 1.5rem;
+      }
+
+      .case-article.ds-page .skill-task-card,
+      .case-article.ds-page .sg-portfolio-wrap {
+        margin-bottom: 0.5rem;
+      }
+
+      .case-article.ds-page .contact-grid {
+        margin-bottom: 0.25rem;
+      }
+    </style>
+    <script>
+      (function () {
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f === "merriweather" || f === "mono" || f === "geologica") {
+            d.dataset.font = f;
+          } else {
+            d.dataset.font = "merriweather";
+          }
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+        } catch (e) {}
+      })();
+    </script>
+  </head>
+  <body>
+    <a class="skip-link" href="#main">К основному содержимому</a>
+
+    <header class="header" data-theme-picker>
+      <div class="header__inner">
+        <a class="logo" href="../index.html" aria-label="На главную">НМ</a>
+        <div class="header__cluster">
+          <nav class="nav" aria-label="Навигация">
+            <a href="../index.html">На главную</a>
+          </nav>
+        </div>
+      </div>
+    </header>
+
+<div class="fab-stack" aria-label="Быстрые действия">
+      <div class="theme-panel-fab-wrap">
+        <button type="button" class="fab fab--secondary glass-neutral" data-theme-panel-btn aria-expanded="false" aria-controls="theme-panel" aria-label="Настройки стиля">
+          <span class="theme-panel-fab__icon theme-panel-fab__icon--open-hide" aria-hidden="true"></span>
+          <svg class="theme-panel-fab__icon theme-panel-fab__icon--close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          </svg>
+        </button>
+        <div id="theme-panel" class="theme-picker__panel glass-neutral" role="dialog" aria-label="Тема и оформление" hidden data-theme-panel>
+          <div class="theme-picker__stack">
+            <section class="theme-picker__section" aria-labelledby="theme-accent-title">
+              <h3 id="theme-accent-title" class="theme-picker__section-title">Акцентный цвет</h3>
+              <div class="colorpicker" data-colorpicker>
+                <div class="colorpicker__plane-box">
+                  <canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Насыщенность и светлость акцента"></canvas>
+                  <div class="colorpicker__knob" data-sl-knob></div>
+                </div>
+                <div class="colorpicker__hue-wrap">
+                  <label class="colorpicker__hue-sr" for="theme-hue-slider">Оттенок акцента</label>
+                  <input id="theme-hue-slider" class="colorpicker__hue" type="range" min="0" max="360" value="210" data-hue-slider aria-valuemin="0" aria-valuemax="360" />
+                </div>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-mode-title">
+              <h3 id="theme-mode-title" class="theme-picker__section-title">Тема</h3>
+              <div class="radius-seg theme-mode-seg" role="radiogroup" aria-labelledby="theme-mode-title">
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="system" aria-label="Как в системе"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--system"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="light" aria-label="Светлая тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--light"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="dark" aria-label="Тёмная тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--dark"></span></span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-radius-title">
+              <h3 id="theme-radius-title" class="theme-picker__section-title">Скругление углов</h3>
+              <div class="radius-seg" role="radiogroup" aria-labelledby="theme-radius-title">
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="soft" aria-label="Слабое скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--soft"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="medium" aria-label="Среднее скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--medium"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="strong" aria-label="Сильное скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--strong"></span></span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-typography-title">
+              <h3 id="theme-typography-title" class="theme-picker__section-title">Типографика</h3>
+              <div class="radius-seg" role="radiogroup" aria-labelledby="theme-typography-title">
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="geologica" aria-label="Sans"><span class="theme-font-seg__label">Sans</span></button>
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="merriweather" aria-label="Sans Serif"><span class="theme-font-seg__label">Sans Serif</span></button>
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="mono" aria-label="Mono"><span class="theme-font-seg__label">Mono</span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-mesh-bg-title">
+              <h3 id="theme-mesh-bg-title" class="theme-picker__section-title">Фон страницы</h3>
+              <div class="radius-seg radius-seg--two" role="radiogroup" aria-labelledby="theme-mesh-bg-title">
+                <button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="on" aria-label="Показать фоновый градиент"><span class="theme-mesh-bg-seg__label">Вкл</span></button>
+                <button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="off" aria-label="Скрыть фоновый градиент"><span class="theme-mesh-bg-seg__label">Выкл</span></button>
+              </div>
+            </section>
+          </div>
+        </div>
+      </div>
+      <a class="fab fab--primary" href="../index.html#contact" aria-label="Связаться">
+        <span class="fab-primary__ico" aria-hidden="true"></span>
+      </a>
+    </div>
+<div class="content-edit-fab-stack" aria-label="Правки контента" data-content-edit-ui>
+  <button
+    type="button"
+    class="fab fab--secondary glass-neutral content-edit-fab"
+    data-content-edit-mode-toggle
+    hidden
+    aria-pressed="false"
+    aria-label="Режим правок контента"
+    title="Режим правок"
+  >
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <path
+        d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0 0-3L16.5 4.5a2.12 2.12 0 0 0-3 0L3 15v5z"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linejoin="round"
+      />
+    </svg>
+    <span class="content-edit-fab__badge" hidden aria-hidden="true">0</span>
+  </button>
+</div>
+
+
+<main id="main" class="section section--tight">
+      <div class="section__inner case-article ds-page">
+        <p class="hero__eyebrow">Документация · UI</p>
+        <h1 class="case-page__h1">Design System</h1>
+        <p class="case-page__sub">Токены, типографика, сетка, компоненты и блоки лонгрида кейса</p>
+        <p class="section__prose">
+          Переключайте тему, акцент и шрифт через плавающую панель справа. При глобальных правках стилей (токены,
+          компоненты, блоки лонгрида) обновляйте и эту страницу — живой каталог UI проекта.
+        </p>
+
+        <nav class="sg-toc" aria-label="Оглавление Design System">
+          <ol>
+            <li><a href="#colors">Цвета</a></li>
+            <li><a href="#fonts">Шрифты</a></li>
+            <li><a href="#layout">Сетка и адаптив</a></li>
+            <li><a href="#components">Компоненты</a></li>
+            <li><a href="#blocks">Блоки</a></li>
+            <li><a href="#mini-projects">Активность</a></li>
+          </ol>
+        </nav>
+
+        <h2 id="colors">Цвета</h2>
+        <p class="section__prose">
+          Акцент и «холод/тепло» всего UI задаются тремя числами в модели <strong>HSL</strong> (Hue — оттенок,
+          Saturation — насыщенность, Lightness — светлота) на <code>&lt;html&gt;</code>. Из них собирается
+          <code>--accent</code> и производные токены; нейтральные фоны слегка подмешивают тот же оттенок
+          (<code>--neutral-accent-tint</code>). Светлая/тёмная тема — <code>data-theme</code>, mesh —
+          <code>data-mesh-bg</code>. Меняется в FAB справа.
+        </p>
+        <h3>Что такое <code>--theme-h</code>, <code>--theme-s</code>, <code>--theme-l</code></h3>
+        <ul class="section__prose">
+          <li>
+            <code>--theme-h</code> — <strong>оттенок (Hue)</strong>, позиция на цветовом круге 0–360°. Сдвиг hue
+            перекрашивает кнопки, ссылки, mesh-градиент и квадратные акценты (<code>--accent-square-2</code> …
+            <code>4</code>), не трогая вручную каждый hex.
+          </li>
+          <li>
+            <code>--theme-s</code> — <strong>насыщенность</strong>: насколько «чистый» цвет, а не серый.
+          </li>
+          <li>
+            <code>--theme-l</code> — <strong>светлота</strong> акцента: темнее или ярче основной фирменный тон
+            (в панели обычно ограничен диапазоном, чтобы кнопки оставались читаемыми).
+          </li>
+        </ul>
+        <p class="section__prose">
+          В CSS это выглядит так:
+          <code>--accent: hsl(var(--theme-h) calc(var(--theme-s) * 1%) calc(var(--theme-l) * 1%))</code>.
+          Значения пишутся в <code>localStorage</code> (<code>siteThemeV1</code>) и подставляются inline-скриптом в
+          <code>head</code>, чтобы не было вспышки «чужого» цвета при загрузке.
+        </p>
+        <div class="sg-swatch-grid" aria-label="Палитра токенов">
+          <div class="sg-swatch">
+            <div class="sg-swatch__chip" style="background: var(--bg)"></div>
+            <span class="sg-swatch__name">--bg</span>
+          </div>
+          <div class="sg-swatch">
+            <div class="sg-swatch__chip" style="background: var(--bg-elevated)"></div>
+            <span class="sg-swatch__name">--bg-elevated</span>
+          </div>
+          <div class="sg-swatch">
+            <div class="sg-swatch__chip" style="background: var(--surface)"></div>
+            <span class="sg-swatch__name">--surface</span>
+          </div>
+          <div class="sg-swatch">
+            <div class="sg-swatch__chip" style="background: var(--text)"></div>
+            <span class="sg-swatch__name">--text</span>
+          </div>
+          <div class="sg-swatch">
+            <div class="sg-swatch__chip" style="background: var(--text-muted)"></div>
+            <span class="sg-swatch__name">--text-muted</span>
+          </div>
+          <div class="sg-swatch">
+            <div class="sg-swatch__chip" style="background: var(--line)"></div>
+            <span class="sg-swatch__name">--line</span>
+          </div>
+          <div class="sg-swatch">
+            <div class="sg-swatch__chip" style="background: var(--accent)"></div>
+            <span class="sg-swatch__name">--accent</span>
+          </div>
+          <div class="sg-swatch">
+            <div class="sg-swatch__chip" style="background: var(--accent-text)"></div>
+            <span class="sg-swatch__name">--accent-text</span>
+          </div>
+          <div class="sg-swatch">
+            <div class="sg-swatch__chip" style="background: var(--accent-soft)"></div>
+            <span class="sg-swatch__name">--accent-soft</span>
+          </div>
+        </div>
+        <p class="section__prose sg-label">
+          Дополнительно: квадратичные оттенки mesh — <code>--accent-square-2</code> … <code>4</code>; они зависят от hue.
+        </p>
+
+        <h2 id="fonts">Шрифты</h2>
+        <p class="section__prose">
+          Пара шрифтов — <code>data-font</code> на <code>&lt;html&gt;</code> (FAB «Типографика»): задаёт
+          <code>--font-accent</code> (заголовки) и <code>--font</code> (проза). Шкала в таблицах: класс, пример, назначение.
+        </p>
+        <h3>Семейства</h3>
+        <div class="sg-table-wrap">
+          <table class="sg-table">
+            <thead>
+              <tr>
+                <th scope="col"><code>data-font</code></th>
+                <th scope="col">Стек</th>
+                <th scope="col">Где</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td><code>merriweather</code></td>
+                <td>Merriweather + Alice</td>
+                <td>Пара по умолчанию; Alice — основной текст, Merriweather — акцентные заголовки</td>
+              </tr>
+              <tr>
+                <td><code>mono</code></td>
+                <td>Source Code Pro + PT Mono</td>
+                <td>Моноширинная пара</td>
+              </tr>
+              <tr>
+                <td><code>geologica</code></td>
+                <td>Geologica + PT Sans</td>
+                <td>Гротеск + нейтральная проза</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <h3>Типографическая шкала</h3>
+        <div class="sg-table-wrap">
+          <table class="sg-table sg-table--type" aria-label="Типографическая шкала">
+            <thead>
+              <tr>
+                <th scope="col">Класс</th>
+                <th scope="col">Пример</th>
+                <th scope="col">Назначение</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td><code>.hero__eyebrow</code></td>
+                <td class="sg-type-sample"><p class="hero__eyebrow">Подпись секции</p></td>
+                <td>Hero, ввод кейса</td>
+              </tr>
+              <tr>
+                <td><code>.hero__title</code></td>
+                <td class="sg-type-sample">
+                  <p class="hero__title" style="font-size: clamp(1.5rem, 3.5vw, 2.15rem); line-height: 1.08">
+                    Display заголовок
+                  </p>
+                </td>
+                <td>H1 главной; на DS уменьшен для колонки</td>
+              </tr>
+              <tr>
+                <td><code>.section__title</code></td>
+                <td class="sg-type-sample"><h2 class="section__title">Секция</h2></td>
+                <td>«Навыки», «Портфолио», контакты; основной шрифт, без капса</td>
+              </tr>
+              <tr>
+                <td><code>.case-page__h1</code></td>
+                <td class="sg-type-sample"><p class="case-page__h1">Заголовок страницы</p></td>
+                <td>H1 кейса / Design System</td>
+              </tr>
+              <tr>
+                <td><code>.case-page__sub</code></td>
+                <td class="sg-type-sample"><p class="case-page__sub">Лид под заголовком</p></td>
+                <td>Подзаголовок под H1</td>
+              </tr>
+              <tr>
+                <td><code>.section__prose</code></td>
+                <td class="sg-type-sample"><p class="section__prose">Основной текст абзаца.</p></td>
+                <td>Проза, списки, ссылки в статье</td>
+              </tr>
+              <tr>
+                <td><code>h2</code> в <code>.case-article</code></td>
+                <td class="sg-type-sample"><h2 style="margin: 0">Подсекция H2</h2></td>
+                <td>Разделы лонгрида (как «Цвета»)</td>
+              </tr>
+              <tr>
+                <td><code>h3</code> в <code>.case-article</code></td>
+                <td class="sg-type-sample"><h3 style="margin: 0">Подсекция H3</h3></td>
+                <td>Подразделы внутри H2; отступы в <code>main.css</code>: сверху 3.25rem, снизу 1.5rem, после <code>figure</code> 4rem, <code>h3+h3</code> 3.5rem</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <h3>Ритм и код</h3>
+        <p class="section__prose">Пример ритма:</p>
+        <ul class="section__prose">
+          <li>маркированный список;</li>
+          <li><strong>акцент</strong> и <a href="#fonts">ссылка</a>;</li>
+        </ul>
+        <ol class="section__prose">
+          <li>нумерованный пункт;</li>
+        </ol>
+        <p class="section__prose">Инлайн <code>code</code> и блок:</p>
+        <pre><code>--font: "Alice", system-ui, serif;
+--font-accent: "Merriweather", var(--font);</code></pre>
+        <p class="section__prose sg-label">
+          Заголовки используют <code>clamp()</code> — масштаб от вьюпорта; подробнее в разделе «Сетка».
+        </p>
+
+        <h2 id="layout">Сетка и адаптив</h2>
+        <p class="section__prose">
+          Отдельной 12-колоночной сетки нет: <strong>full-bleed</strong> layout с боковыми полями
+          <code>--space</code> и локальными CSS Grid внутри секций. Контентная колонка DS и кейсов —
+          <code>.case-article</code> (max-width 48rem).
+        </p>
+
+        <h3>Базовый каркас</h3>
+        <ul class="section__prose">
+          <li><code>--space: clamp(1rem, 4vw, 2.75rem)</code> — горизонтальные поля + <code>safe-area-inset</code>.</li>
+          <li><code>--max: none</code> — без фиксированной «коробки» 1200px; ширина = вьюпорт минус padding.</li>
+          <li><code>.section</code> — вертикальные отступы через <code>clamp()</code>; <code>.section__inner</code> центрирует блок.</li>
+          <li><code>.section--tight</code> — компактнее по вертикали (кейсы, эта страница).</li>
+        </ul>
+
+        <h3>Брейкпоинты</h3>
+        <div class="sg-table-wrap">
+          <table class="sg-table">
+            <thead>
+              <tr>
+                <th scope="col">От</th>
+                <th scope="col">Что меняется</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td><code>860px</code></td>
+                <td><code>.hero__grid</code> → 2 колонки <code>1.15fr 0.85fr</code></td>
+              </tr>
+              <tr>
+                <td><code>760px</code> / <code>1180px</code></td>
+                <td><code>.projects-carousel</code>: <code>--projects-visible</code> 1 → 2 → 3 карточки</td>
+              </tr>
+              <tr>
+                <td><code>720px</code></td>
+                <td><code>.skills-category__grid</code> → 2 колонки</td>
+              </tr>
+              <tr>
+                <td><code>1024px</code></td>
+                <td>Навыки: 6-колоночная мозаика (<code>grid-column: span …</code>)</td>
+              </tr>
+              <tr>
+                <td><code>560px</code> / <code>1024px</code></td>
+                <td><code>.contact-grid</code> → 2 → 4 колонки</td>
+              </tr>
+              <tr>
+                <td><code>48rem</code> / <code>28rem</code></td>
+                <td>Галерея кейса: ≤2 col → 1 col</td>
+              </tr>
+              <tr>
+                <td><code>640px</code></td>
+                <td><code>case-media-gallery--wide</code> схлопывается в ширину колонки</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <h3>Hero: одна → две колонки</h3>
+        <p class="section__prose">Схема <code>.hero__grid</code> (сжато до 860px):</p>
+        <div class="sg-layout-demo" aria-hidden="true">
+          <div class="sg-layout-demo__hero">
+            <div class="sg-layout-demo__block">Текст</div>
+            <div class="sg-layout-demo__block">Визуал</div>
+          </div>
+        </div>
+
+        <h3>Контакты: 1 → 2 → 4</h3>
+        <p class="section__prose">Демо <code>.contact-grid</code> (плейсхолдеры, без переходов):</p>
+        <ul class="contact-grid sg-contact-demo" aria-hidden="true">
+          <li>
+            <span class="contact-card contact-card--link contact-card--brand-tg">
+              <span class="contact-card__corner" aria-hidden="true"></span>
+              <span class="contact-card__icon" aria-hidden="true"></span>
+              <span class="contact-card__body">
+                <span class="contact-card__name">1 col</span>
+                <span class="contact-card__hint">&lt; 560px</span>
+              </span>
+            </span>
+          </li>
+          <li>
+            <span class="contact-card contact-card--link contact-card--brand-vk">
+              <span class="contact-card__corner" aria-hidden="true"></span>
+              <span class="contact-card__icon" aria-hidden="true"></span>
+              <span class="contact-card__body">
+                <span class="contact-card__name">2 col</span>
+                <span class="contact-card__hint">≥ 560px</span>
+              </span>
+            </span>
+          </li>
+          <li>
+            <span class="contact-card contact-card--link contact-card--brand-ya">
+              <span class="contact-card__corner" aria-hidden="true"></span>
+              <span class="contact-card__icon" aria-hidden="true"></span>
+              <span class="contact-card__body">
+                <span class="contact-card__name">4 col</span>
+                <span class="contact-card__hint">≥ 1024px</span>
+              </span>
+            </span>
+          </li>
+          <li>
+            <span class="contact-card contact-card--action contact-card--brand-email">
+              <span class="contact-card__corner contact-card__corner--copy" aria-hidden="true"></span>
+              <span class="contact-card__icon contact-card__icon--accent" aria-hidden="true"></span>
+              <span class="contact-card__body">
+                <span class="contact-card__name">Сетка</span>
+                <span class="contact-card__hint">на главной</span>
+              </span>
+            </span>
+          </li>
+        </ul>
+        <p class="section__prose">
+          Навыки: мозаика на широком экране — см.
+          <a href="../index.html#skills">главную, #skills</a>. Портфолио: карусель на
+          <code>100vw</code> с <code>--projects-card-width</code> и JS-прокруткой — на главной
+          <a href="../index.html#projects">#projects</a>.
+        </p>
+
+        <h3>Wide в кейсах</h3>
+        <p class="section__prose">
+          <code>.case-media--wide</code>, <code>.case-media-gallery--wide</code> и <code>.case-callout</code> шире
+          колонки статьи: <code>min(100vw − 2×padding, content + 8rem)</code>, с полями <code>--space</code>. На узком
+          экране (до 640px) wide схлопывается в ширину колонки. Кадры с <code>data-image-viewer</code> — обводка и hover
+          как у <code>.case-video-shell</code> (живые примеры — демо элементов кейса). Подпись под видео —
+          <code>figcaption</code> по центру колонки.
+        </p>
+
+        <h3>Типографика и motion</h3>
+        <p class="section__prose">
+          Fluid type: <code>clamp()</code> на <code>.hero__title</code>, <code>.section__title</code>,
+          <code>.case-page__h1</code>. Скругления (<code>data-radius</code>) сетку не меняют. Для длинных скринов и
+          анимаций учитывается <code>prefers-reduced-motion: reduce</code>.
+        </p>
+
+        <h2 id="components">Компоненты</h2>
+        <p class="section__prose">Живые примеры; оболочка (шапка, FAB, футер, cookie) уже подключена на этой странице.</p>
+
+        <h3>Кнопки</h3>
+        <div class="sg-stack">
+          <a class="btn btn--primary btn--flat" href="#components"><span class="btn__icon" aria-hidden="true"></span><span>Primary flat</span></a>
+          <a class="btn btn--primary btn--raised" href="#components"><span>Primary raised</span></a>
+          <a class="btn btn--secondary btn--flat" href="#components"><span>Secondary flat</span></a>
+          <a class="btn btn--secondary btn--raised" href="#components"><span>Secondary raised</span></a>
+          <button type="button" class="btn btn--ghost btn--flat">Ghost flat</button>
+        </div>
+        <p class="sg-label">.btn .btn--primary | secondary | ghost · .btn--flat | raised · .btn__icon</p>
+
+        <h3>Теги</h3>
+        <ul class="hero__tags" aria-label="Демо тегов">
+          <li class="hero__tag">hero__tag</li>
+          <li class="hero__tag">UX/UI</li>
+        </ul>
+        <p class="sg-label">.hero__tags / .hero__tag</p>
+        <ul class="portfolio-card__tags" style="display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; padding: 0; margin: 0.5rem 0">
+          <li class="portfolio-card__tag">portfolio-card__tag</li>
+          <li class="portfolio-card__tag">Web App</li>
+        </ul>
+        <p class="sg-label">.portfolio-card__tags / .portfolio-card__tag</p>
+
+        <h3>Карточка портфолио</h3>
+        <div class="sg-portfolio-wrap">
+          <a class="portfolio-card" href="#components" tabindex="-1" aria-hidden="true">
+            <div class="portfolio-card__body">
+              <h3 class="portfolio-card__title">portfolio-card</h3>
+              <p class="portfolio-card__summary">Краткое описание проекта в две-три строки для демо Design System.</p>
+              <ul class="portfolio-card__tags" aria-label="Теги">
+                <li class="portfolio-card__tag">Демо</li>
+                <li class="portfolio-card__tag">UI</li>
+              </ul>
+            </div>
+            <div class="portfolio-card__cover" aria-hidden="true">
+              <img
+                class="portfolio-card__image"
+                src="../assets/shared/placeholder.webp"
+                alt=""
+                width="400"
+                height="225"
+                decoding="async"
+              />
+            </div>
+          </a>
+        </div>
+        <p class="sg-label">.portfolio-card и дочерние BEM-классы</p>
+
+        <h3>Заглушка при загрузке изображений</h3>
+        <p class="section__prose">
+          Пока <code>img</code> ещё не загрузился, <code>initImageLoadPlaceholder</code> вешает
+          <code>.is-img-loading</code> на картинку и <code>.has-img-loading</code> на обёртку. Слой фона —
+          <code>::before</code>, один блеск слева направо — <code>::after</code> (<code>img-ph-shine-sweep</code>).
+          Иконки, SVG и мелкие картинки до 40px пропускаются;
+          отключить точечно: <code>data-no-img-placeholder</code>. Ниже — зафиксированное демо (на сайте классы снимаются
+          после <code>load</code>).
+        </p>
+        <div
+          class="case-media case-media--content has-img-loading img-ph-demo"
+          role="img"
+          aria-label="Демо: заглушка при загрузке изображения"
+        ></div>
+        <p class="sg-label">.has-img-loading · .is-img-loading · .img-ph-demo (демо заглушки)</p>
+
+        <h3>Карточка навыка</h3>
+        <article class="skill-task-card">
+          <p class="skill-task-card__task">skill-task-card__task — формулировка задачи от бизнеса.</p>
+          <div class="skill-task-card__solutions">
+            <p class="skill-task-card__solution">skill-task-card__solution — первый подход к решению.</p>
+            <p class="skill-task-card__solution">Второй пункт в зоне решений.</p>
+          </div>
+        </article>
+        <p class="sg-label">.skill-task-card__task · __solutions · __solution</p>
+
+        <h3>Callout</h3>
+        <p class="section__prose">
+          Акцентный блок лонгрида: шире колонки (как wide-медиа), текст в <code>.case-callout__content</code> чуть
+          крупнее основного абзаца.
+        </p>
+        <aside class="case-callout" data-callout>
+          <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">📌</span>
+          <div class="case-callout__content">
+            <p>case-callout — важная мысль или вывод. Слева только цветные emoji (📌 💡 ✨ ✅), не текстовые символы ✎ ✓ ◆; <code>case-callout__emoji--pulse</code> для лёгкой анимации.</p>
+          </div>
+        </aside>
+        <p class="sg-label">.case-callout · .case-callout__emoji · .case-callout__emoji--pulse · .case-callout__content</p>
+
+        <h3>Контактные карточки</h3>
+        <p class="section__prose sg-label" style="margin-top: 0">
+          На главной в сетке четыре карточки (1→2→4 колонки). Здесь два примера — сетка принудительно в две колонки.
+        </p>
+        <ul class="contact-grid sg-contact-components">
+          <li>
+            <a class="contact-card contact-card--link contact-card--brand-tg" href="https://t.me/mamadaevv" rel="noopener noreferrer">
+              <span class="contact-card__corner" aria-hidden="true"></span>
+              <span class="contact-card__icon" aria-hidden="true">
+                <img src="../assets/shared/icons/tg.svg" alt="" width="24" height="24" loading="eager" decoding="async" />
+              </span>
+              <span class="contact-card__body">
+                <span class="contact-card__name">contact-card--link</span>
+                <span class="contact-card__hint">Внешняя ссылка</span>
+              </span>
+            </a>
+          </li>
+          <li>
+            <button
+              type="button"
+              class="contact-card contact-card--action contact-card--brand-email"
+              data-contact-copy
+              data-email-b64="bmlrQG1hbWFkYWV2di5ydQ=="
+              data-hint-default="Скопировать адрес"
+              aria-label="Демо: скопировать email"
+            >
+              <span class="contact-card__corner contact-card__corner--copy" aria-hidden="true"></span>
+              <span class="contact-card__icon contact-card__icon--accent" aria-hidden="true"></span>
+              <span class="contact-card__body">
+                <span class="contact-card__name">contact-card--action</span>
+                <span class="contact-card__hint" data-contact-copy-hint>Скопировать адрес</span>
+              </span>
+            </button>
+          </li>
+        </ul>
+        <p class="sg-label">.contact-card--link · --action · --brand-*</p>
+
+        <h3>Секция с фоном</h3>
+        <p class="section__prose">
+          На главной полоса <code>.section--surface</code> визуально читается через mesh; в кейсах фон страницы
+          ровный — ниже компактное демо с <code>background: var(--surface)</code>.
+        </p>
+        <section class="section section--surface section--tight sg-section-demo" aria-label="Демо секции">
+          <div class="section__inner">
+            <h2 class="section__title">section__title</h2>
+            <p class="section__prose">Фрагмент .section.section--surface + .section__inner</p>
+          </div>
+        </section>
+        <p class="sg-label">.section · .section--surface · .section--tight · .section__inner</p>
+
+        <h2 id="blocks">Блоки</h2>
+        <div class="sg-blocks-card">
+          <p>
+            Разметка лонгрида кейса: медиа и галереи, карточки ссылок, видео, callout, wide-блоки и прочие partials.
+            Живой эталон со всеми вариантами — на отдельной странице; оттуда копируют куски при сборке нового кейса.
+          </p>
+          <p>
+            <a class="btn btn--secondary btn--flat" href="template-elements-demo.html">Демо элементов кейса</a>
+          </p>
+        </div>
+
+        <h2 id="mini-projects">Активность</h2>
+        <div class="sg-blocks-card">
+          <p>
+            На главной в секции <code>#mini-projects</code> карточки <code>mp-card</code> в masonry-сетке. Типы, клетки и живая
+            раскладка вынесены на отдельную страницу.
+          </p>
+          <p>
+            <a class="btn btn--secondary btn--flat" href="mini-projects-showcase.html">Каталог карточек активности</a>
+          </p>
+        </div>
+      </div>
+    </main>
+
+    <section class="section section--surface" aria-hidden="true">
+      <div class="section__inner"></div>
+    </section>
+
+    <footer class="footer">
+      <div class="footer__inner">
+        <span class="footer__chunk footer__chunk--date">© 2026<span class="footer__sep" aria-hidden="true"> · </span></span>
+        <span class="footer__chunk footer__chunk--main">Дизайн и разработка сайта — Николай Мамадаев</span>
+        <span class="footer__chunk footer__chunk--meta footer__attr"><span class="footer__sep" aria-hidden="true"> · </span><a href="../cases/design-system.html">Design System</a><span class="footer__sep" aria-hidden="true"> · </span><a href="../cookie-policy.html">Политика cookie</a></span>
+      </div>
+    </footer>
+
+    <aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
+      <p class="cookie-notice__text">
+        Сайт использует cookie для комфортной работы. Подробнее — в
+        <a href="../cookie-policy.html" data-cookie-policy-link>политике cookie</a>.
+      </p>
+      <button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
+        <span>Принять</span>
+        <span class="cookie-notice__accept-icon" aria-hidden="true">
+          <img src="../assets/shared/icons/сookie.svg" alt="" width="20" height="20" loading="eager" decoding="async" />
+        </span>
+      </button>
+    </aside>
+
+    <div id="nav-more-menu-floating" class="nav-more__floating" hidden data-nav-more-menu-floating aria-hidden="true"></div>
+
+
+  </body>
+</html>
diff --git a/public/cases/lunacy.html b/public/cases/lunacy.html
new file mode 100644
index 0000000..2a42de1
--- /dev/null
+++ b/public/cases/lunacy.html
@@ -0,0 +1,926 @@
+<!DOCTYPE html>
+<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta
+      name="description"
+      content="Кейс: работа над интерфейсом Lunacy в Icons8 — сценарии, итерации UI и скриншоты процесса."
+    />
+    <title>Lunacy — кейс</title>
+    <script>
+      (function () {
+        var FONT_CSS = {
+          merriweather: "../assets/fonts/merriweather.css",
+          geologica: "../assets/fonts/geologica.css",
+          mono: "../assets/fonts/mono.css",
+        };
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f !== "merriweather" && f !== "mono" && f !== "geologica") f = "merriweather";
+          d.dataset.font = f;
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+          var href = FONT_CSS[f];
+          if (href && !document.querySelector('link[data-theme-font="' + f + '"]')) {
+            var link = document.createElement("link");
+            link.rel = "stylesheet";
+            link.href = href;
+            link.setAttribute("data-theme-font", f);
+            document.head.appendChild(link);
+          }
+        } catch (e) {}
+      })();
+    </script>
+
+    <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon/favicon-16x16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="../assets/favicon/apple-touch-icon.png" />
+    <link rel="manifest" href="../assets/favicon/site.webmanifest" />
+    <link rel="preload" href="../assets/fonts/merriweather.css" as="style" />
+    <link rel="preload" href="../css/main.css" as="style" />
+    <link rel="preload" href="../js/skill-connectors.js" as="script" />
+    <link rel="modulepreload" href="../js/main.js" />
+    <link rel="stylesheet" href="../css/main.css" />
+    <script src="../js/skill-connectors.js" defer></script>
+    <script type="module" src="../js/main.js"></script>
+
+
+    <style>
+      .case-article {
+        max-width: 48rem;
+        margin: 0 auto;
+      }
+      .case-article h2 {
+        margin: 2rem 0 0.75rem;
+        font-size: clamp(1.15rem, 2vw, 1.35rem);
+        font-weight: 700;
+        color: var(--text);
+      }
+      .case-article h3 {
+        font-size: 1.05rem;
+        font-weight: 600;
+        color: var(--text);
+      }
+      .case-article .section__prose {
+        margin-bottom: 0.75rem;
+        color: var(--text);
+      }
+      .case-article img,
+      .case-article video {
+        display: block;
+        max-width: 100%;
+        height: auto;
+        margin: 0.75rem 0 1rem;
+      }
+      .case-article ul,
+      .case-article ol {
+        margin: 0.5rem 0 1rem 1.25rem;
+        padding: 0;
+      }
+      .case-article li {
+        margin-bottom: 0.35rem;
+      }
+      .case-article a:not(.btn) {
+        color: var(--accent);
+      }
+      .case-media-gallery__item img {
+        margin: 0;
+      }
+    </style>
+    <script>
+      (function () {
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f === "merriweather" || f === "mono" || f === "geologica") {
+            d.dataset.font = f;
+          } else {
+            d.dataset.font = "merriweather";
+          }
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+        } catch (e) {}
+      })();
+    </script>
+  </head>
+  <body>
+    <a class="skip-link" href="#case-main">К содержимому кейса</a>
+    <header class="header" data-theme-picker>
+      <div class="header__inner">
+        <a class="logo" href="../index.html" aria-label="На главную">НМ</a>
+        <div class="header__cluster">
+          <nav class="nav" aria-label="Навигация по странице">
+            <a href="#projects">Портфолио</a>
+            <a href="#contact">Контакты</a>
+          </nav>
+        </div>
+      </div>
+    </header>
+
+<div class="fab-stack" aria-label="Быстрые действия">
+      <div class="theme-panel-fab-wrap">
+        <button type="button" class="fab fab--secondary glass-neutral" data-theme-panel-btn aria-expanded="false" aria-controls="theme-panel" aria-label="Настройки стиля">
+          <span class="theme-panel-fab__icon theme-panel-fab__icon--open-hide" aria-hidden="true"></span>
+          <svg class="theme-panel-fab__icon theme-panel-fab__icon--close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          </svg>
+        </button>
+        <div id="theme-panel" class="theme-picker__panel glass-neutral" role="dialog" aria-label="Тема и оформление" hidden data-theme-panel>
+          <div class="theme-picker__stack">
+            <section class="theme-picker__section" aria-labelledby="theme-accent-title">
+              <h3 id="theme-accent-title" class="theme-picker__section-title">Акцентный цвет</h3>
+              <div class="colorpicker" data-colorpicker>
+                <div class="colorpicker__plane-box">
+                  <canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Насыщенность и светлость акцента"></canvas>
+                  <div class="colorpicker__knob" data-sl-knob></div>
+                </div>
+                <div class="colorpicker__hue-wrap">
+                  <label class="colorpicker__hue-sr" for="theme-hue-slider">Оттенок акцента</label>
+                  <input id="theme-hue-slider" class="colorpicker__hue" type="range" min="0" max="360" value="210" data-hue-slider aria-valuemin="0" aria-valuemax="360" />
+                </div>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-mode-title">
+              <h3 id="theme-mode-title" class="theme-picker__section-title">Тема</h3>
+              <div class="radius-seg theme-mode-seg" role="radiogroup" aria-labelledby="theme-mode-title">
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="system" aria-label="Как в системе"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--system"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="light" aria-label="Светлая тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--light"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="dark" aria-label="Тёмная тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--dark"></span></span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-radius-title">
+              <h3 id="theme-radius-title" class="theme-picker__section-title">Скругление углов</h3>
+              <div class="radius-seg" role="radiogroup" aria-labelledby="theme-radius-title">
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="soft" aria-label="Слабое скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--soft"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="medium" aria-label="Среднее скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--medium"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="strong" aria-label="Сильное скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--strong"></span></span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-typography-title">
+              <h3 id="theme-typography-title" class="theme-picker__section-title">Типографика</h3>
+              <div class="radius-seg" role="radiogroup" aria-labelledby="theme-typography-title">
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="geologica" aria-label="Sans"><span class="theme-font-seg__label">Sans</span></button>
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="merriweather" aria-label="Sans Serif"><span class="theme-font-seg__label">Sans Serif</span></button>
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="mono" aria-label="Mono"><span class="theme-font-seg__label">Mono</span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-mesh-bg-title">
+              <h3 id="theme-mesh-bg-title" class="theme-picker__section-title">Фон страницы</h3>
+              <div class="radius-seg radius-seg--two" role="radiogroup" aria-labelledby="theme-mesh-bg-title">
+                <button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="on" aria-label="Показать фоновый градиент"><span class="theme-mesh-bg-seg__label">Вкл</span></button>
+                <button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="off" aria-label="Скрыть фоновый градиент"><span class="theme-mesh-bg-seg__label">Выкл</span></button>
+              </div>
+            </section>
+          </div>
+        </div>
+      </div>
+      <a class="fab fab--primary" href="#contact" aria-label="Связаться">
+        <span class="fab-primary__ico" aria-hidden="true"></span>
+      </a>
+    </div>
+<div class="content-edit-fab-stack" aria-label="Правки контента" data-content-edit-ui>
+  <button
+    type="button"
+    class="fab fab--secondary glass-neutral content-edit-fab"
+    data-content-edit-mode-toggle
+    hidden
+    aria-pressed="false"
+    aria-label="Режим правок контента"
+    title="Режим правок"
+  >
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <path
+        d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0 0-3L16.5 4.5a2.12 2.12 0 0 0-3 0L3 15v5z"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linejoin="round"
+      />
+    </svg>
+    <span class="content-edit-fab__badge" hidden aria-hidden="true">0</span>
+  </button>
+</div>
+
+
+<main id="case-main" class="section section--tight">
+      <div class="section__inner case-article" data-case-sequential-images>
+        <p class="hero__eyebrow">Icons8 · desktop</p>
+        <h1 class="case-page__h1">Графический редактор Lunacy</h1>
+        <p class="section__prose">
+          Работа над интерфейсом Lunacy в команде Icons8: user flow, прототипы сложных сценариев, доработка функциональности и
+          визуальной логики. Ниже — фрагменты экранов из процесса (порядок кадров ориентирован на имена файлов).
+        </p>
+        <p class="section__prose">
+          Продукт: <a href="https://icons8.com/lunacy" target="_blank" rel="noopener noreferrer">icons8.com/lunacy</a>
+        </p>
+
+        <h2 id="obzor">Обзор</h2>
+        <p class="section__prose">Общий вид приложения — отправная точка для остальных материалов на странице.</p>
+        <figure class="case-media case-media--wide">
+          <img
+            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+            alt="Обзор приложения Lunacy"
+            data-src="../assets/lunacy/Lunacy_app_overview.webp"
+            loading="lazy"
+            decoding="async"
+            data-image-viewer
+          />
+          <figcaption>Обзор окна Lunacy.</figcaption>
+        </figure>
+        <p class="section__prose">Дальше — отдельные сценарии и итерации интерфейса в том порядке, в каком удобнее читать по смыслу и по именам файлов.</p>
+
+        <h2 id="blob-holst">Blob: настройки на холсте</h2>
+        <p class="section__prose">Работа с blob в контексте холста — отдельный сценарий до разборов панели по версиям.</p>
+        <figure class="case-media case-media--wide">
+          <img
+            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+            alt="Настройки blob на холсте"
+            data-src="../assets/lunacy/blob_settings_on_canvas.webp"
+            loading="lazy"
+            decoding="async"
+            data-image-viewer
+          />
+          <figcaption><code>blob_settings_on_canvas</code></figcaption>
+        </figure>
+        <p class="section__prose">Панель настроек для тех же задач развивалась серией макетов v1–v9 — они собраны в сетку ниже.</p>
+
+        <h2 id="compare">Компоненты и сравнение</h2>
+        <p class="section__prose">Сравнение компонентов и индикатор обновлений в панели.</p>
+        <figure class="case-media case-media--wide">
+          <img
+            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+            alt="Модальное окно сравнения компонентов"
+            data-src="../assets/lunacy/compare_components_modal_window.webp"
+            loading="lazy"
+            decoding="async"
+            data-image-viewer
+          />
+          <figcaption><code>compare_components_modal_window</code></figcaption>
+        </figure>
+        <figure class="case-media case-media--wide">
+          <img
+            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+            alt="Индикатор обновления компонентов в панели"
+            data-src="../assets/lunacy/components_update_indicator_location_panel.webp"
+            loading="lazy"
+            decoding="async"
+            data-image-viewer
+          />
+          <figcaption><code>components_update_indicator_location_panel</code></figcaption>
+        </figure>
+        <p class="section__prose">Два связанных экрана: поиск расхождений и отображение статуса обновлений рядом с навигацией по панели.</p>
+
+        <h2 id="prototype">Прототип в панели</h2>
+        <p class="section__prose">Создание прототипа на холсте и состояния панели для режима прототипа.</p>
+        <figure class="case-media case-media--wide">
+          <img
+            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+            alt="Модальное окно: создать прототип на холсте"
+            data-src="../assets/lunacy/modal_window_for_prototype_create_on_canvas.webp"
+            loading="lazy"
+            decoding="async"
+            data-image-viewer
+          />
+          <figcaption><code>modal_window_for_prototype_create_on_canvas</code></figcaption>
+        </figure>
+        <figure class="case-media case-media--wide">
+          <img
+            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+            alt="Модальное окно: состояния панели прототипа"
+            data-src="../assets/lunacy/modal_window_for_prototype_panel_states.webp"
+            loading="lazy"
+            decoding="async"
+            data-image-viewer
+          />
+          <figcaption><code>modal_window_for_prototype_panel_states</code></figcaption>
+        </figure>
+        <p class="section__prose">Оба кадра — про увязку прототипа с холстом и с набором состояний панели.</p>
+
+        <h2 id="shadow-pro">Shadow Pro: настройки</h2>
+        <p class="section__prose">Блок Shadow Pro: панель, идеи, модалки с авто-включением и выключением.</p>
+        <figure class="case-media case-media--wide">
+          <img
+            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+            alt="Shadow Pro: панель настроек"
+            data-src="../assets/lunacy/shadow_pro_settings_panel.webp"
+            loading="lazy"
+            decoding="async"
+            data-image-viewer
+          />
+          <figcaption><code>shadow_pro_settings_panel</code></figcaption>
+        </figure>
+        <figure class="case-media case-media--wide">
+          <img
+            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+            alt="Shadow Pro: идеи"
+            data-src="../assets/lunacy/shadow_pro_settings_ideas.webp"
+            loading="lazy"
+            decoding="async"
+            data-image-viewer
+          />
+          <figcaption><code>shadow_pro_settings_ideas</code></figcaption>
+        </figure>
+        <figure class="case-media case-media--wide">
+          <img
+            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+            alt="Shadow Pro: модалка, авто включено"
+            data-src="../assets/lunacy/shadow_pro_settings_modal_auto_on.webp"
+            loading="lazy"
+            decoding="async"
+            data-image-viewer
+          />
+          <figcaption><code>shadow_pro_settings_modal_auto_on</code></figcaption>
+        </figure>
+        <figure class="case-media case-media--wide">
+          <img
+            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+            alt="Shadow Pro: модалка, авто выключено"
+            data-src="../assets/lunacy/shadow_pro_settings_modal_auto-off.webp"
+            loading="lazy"
+            decoding="async"
+            data-image-viewer
+          />
+          <figcaption><code>shadow_pro_settings_modal_auto-off</code></figcaption>
+        </figure>
+        <p class="section__prose">Четыре кадра подряд показывают развитие одного подпроекта: от панели и набросков к уточнению поведения в модалках.</p>
+
+        <h2 id="blob-panel-versions">Панель настроек blob: версии v1–v9</h2>
+        <p class="section__prose">
+          Итерации панели по именам файлов <code>blob_settings_panel_v1</code> … <code>v9</code>. Сетка на ширине текста, три колонки на
+          широком экране; при сужении окна число колонок уменьшается автоматически.
+        </p>
+        <figure class="case-media case-media-gallery" style="--case-gallery-cols: 3">
+          <div class="case-media-gallery__grid">
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v1" data-src="../assets/lunacy/blob_settings_panel_v1.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v2" data-src="../assets/lunacy/blob_settings_panel_v2.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v3" data-src="../assets/lunacy/blob_settings_panel_v3.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v4" data-src="../assets/lunacy/blob_settings_panel_v4.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v5" data-src="../assets/lunacy/blob_settings_panel_v5.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v6" data-src="../assets/lunacy/blob_settings_panel_v6.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v7" data-src="../assets/lunacy/blob_settings_panel_v7.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v8" data-src="../assets/lunacy/blob_settings_panel_v8.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v9" data-src="../assets/lunacy/blob_settings_panel_v9.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+          </div>
+          <figcaption>Девять версий подряд: читать слева направо, сверху вниз.</figcaption>
+        </figure>
+        <p class="section__prose">Сетка удобна для сравнения шага к шагу; для деталей клик по ячейке открывает полноэкранный просмотр.</p>
+
+        <h2 id="slider-versions">Слайдер: версии v1–v18 и кадр 14</h2>
+        <p class="section__prose">
+          Порядок по именам: <code>slider_v1</code> … <code>slider_v13</code>, затем <code>slider_14</code> (в ассете без суффикса <code>v</code>),
+          затем <code>slider_v15</code> … <code>slider_v18</code>.
+        </p>
+        <figure class="case-media case-media-gallery" style="--case-gallery-cols: 4">
+          <div class="case-media-gallery__grid">
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v1" data-src="../assets/lunacy/slider_v1.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v2" data-src="../assets/lunacy/slider_v2.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v3" data-src="../assets/lunacy/slider_v3.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v4" data-src="../assets/lunacy/slider_v4.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v5" data-src="../assets/lunacy/slider_v5.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v6" data-src="../assets/lunacy/slider_v6.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v7" data-src="../assets/lunacy/slider_v7.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v8" data-src="../assets/lunacy/slider_v8.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v9" data-src="../assets/lunacy/slider_v9.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v10" data-src="../assets/lunacy/slider_v10.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v11" data-src="../assets/lunacy/slider_v11.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v12" data-src="../assets/lunacy/slider_v12.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v13" data-src="../assets/lunacy/slider_v13.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider 14" data-src="../assets/lunacy/slider_14.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v15" data-src="../assets/lunacy/slider_v15.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v16" data-src="../assets/lunacy/slider_v16.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v17" data-src="../assets/lunacy/slider_v17.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v18" data-src="../assets/lunacy/slider_v18.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+          </div>
+          <figcaption>Восемнадцать вариантов слайдера плюс отдельный кадр <code>slider_14</code> между v13 и v15.</figcaption>
+        </figure>
+        <p class="section__prose">Такой ряд полезен при разборе эволюции контрола: от ранних раскладок до финальных состояний.</p>
+
+        <h2 id="sliders-all">Слайдеры: общий кадр</h2>
+        <p class="section__prose">Сводный экран по слайдерам — после ряда по версиям.</p>
+        <figure class="case-media case-media--wide">
+          <img
+            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+            alt="Все слайдеры: общий вид"
+            data-src="../assets/lunacy/sliders_all_set.webp"
+            loading="lazy"
+            decoding="async"
+            data-image-viewer
+          />
+          <figcaption><code>sliders_all_set</code></figcaption>
+        </figure>
+        <p class="section__prose">Завершает блок про слайдеры: контекст, как несколько контролов сосуществуют на одном экране.</p>
+      </div>
+    </main>
+
+    <section id="projects" class="section section--surface">
+        <div class="section__inner">
+          <h2 class="section__title">Портфолио</h2>
+          <ol class="mini-projects-grid" data-mini-projects-list>
+            <li class="mini-projects-grid__item" data-mp-cells="3">
+              <a class="mp-card mp-card--link mp-card--stack" href="ai-platform-primo-rpa.html" aria-label="Платформа для работы с AI — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/ai-platform-primo-rpa/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Платформа для работы с AI</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями автоматизации и Smart OCR.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="3">
+              <a class="mp-card mp-card--link mp-card--stack" href="lunacy.html" aria-label="Графический редактор Lunacy — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/lunacy/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Графический редактор Lunacy</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Desktop App</li>
+                  </ul>
+                  <p class="mp-card__desc">Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и интерфейсной логики.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--stack" href="manu-game-maker.html" aria-label="Игровой движок MANU — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/manu-game-maker/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Игровой движок MANU</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">Product Design</li>
+                    <li class="mp-card__tag">Desktop App</li>
+                  </ul>
+                  <p class="mp-card__desc">Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и проработка сотен сложных пользовательских сценариев.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--stack" href="mobile-clinic-app.html" aria-label="Мобильное приложение для сети клиник — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/mobile-clinic-app/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Мобильное приложение для сети клиник</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Mobile App</li>
+                  </ul>
+                  <p class="mp-card__desc">Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом пользовательском пути, понятной навигации и быстром доступе к нужным действиям.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="orc-automation-panel.html" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Веб-панель для оркестрации автоматизаций</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под продакшен без остановки релизов.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="task-distribution-concept.html" aria-label="Концепт сервиса распределения задач — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Концепт сервиса распределения задач</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Analytics</li>
+                  </ul>
+                  <p class="mp-card__desc">Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность процессов и удобство командной работы.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="task-tracker.html" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Таск-трекер для бек-офис системы</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">Product Design</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по исполнителям; вкладки, фильтры, доска / список / таблица, Drag&amp;Drop.</p>
+                </div>
+              </a>
+            </li>
+          </ol>
+        </div>
+      </section><section hidden class="section section--surface" aria-hidden="true">
+        <div class="section__inner">
+          <div class="projects__heading">
+            <h2 class="section__title projects__title">Портфолио</h2>
+            <div class="projects__controls" aria-label="Навигация по карточкам портфолио">
+              <button type="button" class="projects__nav-btn" data-projects-prev aria-label="Прокрутить влево" aria-controls="projects-viewport">
+                <span class="projects__nav-ico projects__nav-ico--left" aria-hidden="true"></span>
+              </button>
+              <button type="button" class="projects__nav-btn" data-projects-next aria-label="Прокрутить вправо" aria-controls="projects-viewport">
+                <span class="projects__nav-ico projects__nav-ico--right" aria-hidden="true"></span>
+              </button>
+            </div>
+          </div>
+          <div class="projects-carousel">
+            <div id="projects-viewport" class="projects-carousel__viewport" data-projects-viewport>
+              <div class="projects-carousel__track">
+                <div class="projects-carousel__spacer" aria-hidden="true"></div>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="orc-automation-panel.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Веб-панель для оркестрации автоматизаций</h3>
+                      <p class="portfolio-card__summary">
+                        Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под
+                        продакшен без остановки релизов.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Web App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/orc-primo-rpa/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="ai-platform-primo-rpa.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Платформа для работы с AI</h3>
+                      <p class="portfolio-card__summary">
+                        Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями
+                        автоматизации и Smart OCR.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Web App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/ai-platform-primo-rpa/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="task-tracker.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Таск-трекер для бек-офис системы</h3>
+                      <p class="portfolio-card__summary">
+                        Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по
+                        исполнителям; вкладки, фильтры, виды доска / список / таблица, Drag&amp;Drop.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">Product Design</li>
+                        <li class="portfolio-card__tag">Web App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/task-tracker/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="manu-game-maker.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Игровой движок MANU</h3>
+                      <p class="portfolio-card__summary">
+                        Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и
+                        проработка сотен сложных пользовательских сценариев.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">Product Design</li>
+                        <li class="portfolio-card__tag">Desktop App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/manu-game-maker/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="mobile-clinic-app.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Мобильное приложение для сети клиник</h3>
+                      <p class="portfolio-card__summary">
+                        Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом
+                        пользовательском пути, понятной навигации и быстром доступе к нужным действиям.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Mobile App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/mobile-clinic-app/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="task-distribution-concept.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Концепт сервиса распределения задач</h3>
+                      <p class="portfolio-card__summary">
+                        Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность
+                        процессов и удобство командной работы.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Analytics</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/task-distribution-concept/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="obsidian-plugin-columns-view.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Колоночный вид — плагин для Obsidian</h3>
+                      <p class="portfolio-card__summary">
+                        Интерфейс для многоколоночной работы с заметками: удобная навигация, фильтрация и настройка
+                        колончатого отображения прямо в редакторе Obsidian.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Plugin</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/obsidian-plugin-columns-view/filter use.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <div class="projects-carousel__spacer" aria-hidden="true"></div>
+              </div>
+            </div>
+            <button
+              type="button"
+              class="projects-carousel__edge-hit projects-carousel__edge-hit--left"
+              data-projects-edge-prev
+              aria-label="Прокрутить портфолио влево"
+            ></button>
+            <button
+              type="button"
+              class="projects-carousel__edge-hit projects-carousel__edge-hit--right"
+              data-projects-edge-next
+              aria-label="Прокрутить портфолио вправо"
+            ></button>
+          </div>
+        </div>
+      </section>
+
+<section id="contact" class="section section--surface section--footerish">
+      <div class="section__inner">
+        <h2 class="section__title">Контакты</h2>
+        <ul class="contact-grid">
+          <li><a class="contact-card contact-card--link contact-card--brand-tg" href="https://t.me/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../assets/shared/icons/tg.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Telegram</span><span class="contact-card__hint">Отвечу сегодня</span></span></a></li>
+          <li><a class="contact-card contact-card--link contact-card--brand-vk" href="https://vk.com/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../assets/shared/icons/vk.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">ВКонтакте</span><span class="contact-card__hint">Стабильный коннект</span></span></a></li>
+          <li><a class="contact-card contact-card--link contact-card--brand-ya" href="https://yandex.ru/chat/p/727e71fa-89b5-44a8-90a5-851021631a1c?utm_source=invite" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../assets/shared/icons/yandex_telemost.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Яндекс</span><span class="contact-card__hint">Да, тут тоже можно</span></span></a></li>
+          <li><button type="button" class="contact-card contact-card--action contact-card--brand-email" data-contact-copy data-email-b64="bmlrQG1hbWFkYWV2di5ydQ==" data-hint-default="Скопировать адрес" aria-label="Скопировать адрес электронной почты в буфер обмена"><span class="contact-card__corner contact-card__corner--copy" aria-hidden="true"></span><span class="contact-card__icon contact-card__icon--accent" aria-hidden="true"></span><span class="contact-card__body"><span class="contact-card__name">Почта</span><span class="contact-card__hint" data-contact-copy-hint>Скопировать адрес</span></span></button></li>
+        </ul>
+      </div>
+    </section>
+
+<section class="section section--surface" aria-hidden="true">
+      <div class="section__inner"></div>
+    </section>
+
+<footer class="footer">
+      <div class="footer__inner">
+        <span class="footer__chunk footer__chunk--date">© 2026<span class="footer__sep" aria-hidden="true"> · </span></span>
+        <span class="footer__chunk footer__chunk--main">Дизайн и разработка сайта — Николай Мамадаев</span>
+        <span class="footer__chunk footer__chunk--meta footer__attr"><span class="footer__sep" aria-hidden="true"> · </span><a href="../cases/design-system.html">Design System</a><span class="footer__sep" aria-hidden="true"> · </span><a href="../cookie-policy.html">Политика cookie</a></span>
+      </div>
+    </footer>
+
+<aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
+      <p class="cookie-notice__text">
+        Сайт использует cookie для комфортной работы. Подробнее — в
+        <a href="../cookie-policy.html" data-cookie-policy-link>политике cookie</a>.
+      </p>
+      <button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
+        <span>Принять</span>
+        <span class="cookie-notice__accept-icon" aria-hidden="true">
+          <img src="../assets/shared/icons/сookie.svg" alt="" width="20" height="20" loading="eager" decoding="async" />
+        </span>
+      </button>
+    </aside>
+
+<div id="nav-more-menu-floating" class="nav-more__floating" hidden data-nav-more-menu-floating aria-hidden="true"></div>
+
+
+  </body>
+</html>
diff --git a/public/cases/manu-game-maker.html b/public/cases/manu-game-maker.html
new file mode 100644
index 0000000..8855b2e
--- /dev/null
+++ b/public/cases/manu-game-maker.html
@@ -0,0 +1,668 @@
+<!DOCTYPE html>
+<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta
+      name="description"
+      content="Кейс: редизайн и развитие интерфейса игрового движка MANU — визуальная система и сложные пользовательские сценарии."
+    />
+    <title>Игровой движок MANU — кейс</title>
+    <script>
+      (function () {
+        var FONT_CSS = {
+          merriweather: "../assets/fonts/merriweather.css",
+          geologica: "../assets/fonts/geologica.css",
+          mono: "../assets/fonts/mono.css",
+        };
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f !== "merriweather" && f !== "mono" && f !== "geologica") f = "merriweather";
+          d.dataset.font = f;
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+          var href = FONT_CSS[f];
+          if (href && !document.querySelector('link[data-theme-font="' + f + '"]')) {
+            var link = document.createElement("link");
+            link.rel = "stylesheet";
+            link.href = href;
+            link.setAttribute("data-theme-font", f);
+            document.head.appendChild(link);
+          }
+        } catch (e) {}
+      })();
+    </script>
+
+    <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon/favicon-16x16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="../assets/favicon/apple-touch-icon.png" />
+    <link rel="manifest" href="../assets/favicon/site.webmanifest" />
+    <link rel="preload" href="../assets/fonts/merriweather.css" as="style" />
+    <link rel="preload" href="../css/main.css" as="style" />
+    <link rel="preload" href="../js/skill-connectors.js" as="script" />
+    <link rel="modulepreload" href="../js/main.js" />
+    <link rel="stylesheet" href="../css/main.css" />
+    <script src="../js/skill-connectors.js" defer></script>
+    <script type="module" src="../js/main.js"></script>
+
+
+    <style>
+      .case-article {
+        max-width: 48rem;
+        margin: 0 auto;
+      }
+      .case-article h2 {
+        margin: 2rem 0 0.75rem;
+        font-size: clamp(1.15rem, 2vw, 1.35rem);
+        font-weight: 700;
+        color: var(--text);
+      }
+      .case-article .section__prose {
+        margin-bottom: 0.75rem;
+        color: var(--text);
+      }
+      .case-article a:not(.btn) {
+        color: var(--accent);
+      }
+    </style>
+    <script>
+      (function () {
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f === "merriweather" || f === "mono" || f === "geologica") {
+            d.dataset.font = f;
+          } else {
+            d.dataset.font = "merriweather";
+          }
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+        } catch (e) {}
+      })();
+    </script>
+  </head>
+  <body>
+    <a class="skip-link" href="#case-main">К содержимому кейса</a>
+    <header class="header" data-theme-picker>
+      <div class="header__inner">
+        <a class="logo" href="../index.html" aria-label="На главную">НМ</a>
+        <div class="header__cluster">
+          <nav class="nav" aria-label="Навигация по странице">
+            <a href="#projects">Портфолио</a>
+            <a href="#contact">Контакты</a>
+          </nav>
+        </div>
+      </div>
+    </header>
+
+<div class="fab-stack" aria-label="Быстрые действия">
+      <div class="theme-panel-fab-wrap">
+        <button type="button" class="fab fab--secondary glass-neutral" data-theme-panel-btn aria-expanded="false" aria-controls="theme-panel" aria-label="Настройки стиля">
+          <span class="theme-panel-fab__icon theme-panel-fab__icon--open-hide" aria-hidden="true"></span>
+          <svg class="theme-panel-fab__icon theme-panel-fab__icon--close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          </svg>
+        </button>
+        <div id="theme-panel" class="theme-picker__panel glass-neutral" role="dialog" aria-label="Тема и оформление" hidden data-theme-panel>
+          <div class="theme-picker__stack">
+            <section class="theme-picker__section" aria-labelledby="theme-accent-title">
+              <h3 id="theme-accent-title" class="theme-picker__section-title">Акцентный цвет</h3>
+              <div class="colorpicker" data-colorpicker>
+                <div class="colorpicker__plane-box">
+                  <canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Насыщенность и светлость акцента"></canvas>
+                  <div class="colorpicker__knob" data-sl-knob></div>
+                </div>
+                <div class="colorpicker__hue-wrap">
+                  <label class="colorpicker__hue-sr" for="theme-hue-slider">Оттенок акцента</label>
+                  <input id="theme-hue-slider" class="colorpicker__hue" type="range" min="0" max="360" value="210" data-hue-slider aria-valuemin="0" aria-valuemax="360" />
+                </div>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-mode-title">
+              <h3 id="theme-mode-title" class="theme-picker__section-title">Тема</h3>
+              <div class="radius-seg theme-mode-seg" role="radiogroup" aria-labelledby="theme-mode-title">
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="system" aria-label="Как в системе"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--system"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="light" aria-label="Светлая тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--light"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="dark" aria-label="Тёмная тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--dark"></span></span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-radius-title">
+              <h3 id="theme-radius-title" class="theme-picker__section-title">Скругление углов</h3>
+              <div class="radius-seg" role="radiogroup" aria-labelledby="theme-radius-title">
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="soft" aria-label="Слабое скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--soft"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="medium" aria-label="Среднее скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--medium"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="strong" aria-label="Сильное скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--strong"></span></span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-typography-title">
+              <h3 id="theme-typography-title" class="theme-picker__section-title">Типографика</h3>
+              <div class="radius-seg" role="radiogroup" aria-labelledby="theme-typography-title">
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="geologica" aria-label="Sans"><span class="theme-font-seg__label">Sans</span></button>
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="merriweather" aria-label="Sans Serif"><span class="theme-font-seg__label">Sans Serif</span></button>
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="mono" aria-label="Mono"><span class="theme-font-seg__label">Mono</span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-mesh-bg-title">
+              <h3 id="theme-mesh-bg-title" class="theme-picker__section-title">Фон страницы</h3>
+              <div class="radius-seg radius-seg--two" role="radiogroup" aria-labelledby="theme-mesh-bg-title">
+                <button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="on" aria-label="Показать фоновый градиент"><span class="theme-mesh-bg-seg__label">Вкл</span></button>
+                <button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="off" aria-label="Скрыть фоновый градиент"><span class="theme-mesh-bg-seg__label">Выкл</span></button>
+              </div>
+            </section>
+          </div>
+        </div>
+      </div>
+      <a class="fab fab--primary" href="#contact" aria-label="Связаться">
+        <span class="fab-primary__ico" aria-hidden="true"></span>
+      </a>
+    </div>
+<div class="content-edit-fab-stack" aria-label="Правки контента" data-content-edit-ui>
+  <button
+    type="button"
+    class="fab fab--secondary glass-neutral content-edit-fab"
+    data-content-edit-mode-toggle
+    hidden
+    aria-pressed="false"
+    aria-label="Режим правок контента"
+    title="Режим правок"
+  >
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <path
+        d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0 0-3L16.5 4.5a2.12 2.12 0 0 0-3 0L3 15v5z"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linejoin="round"
+      />
+    </svg>
+    <span class="content-edit-fab__badge" hidden aria-hidden="true">0</span>
+  </button>
+</div>
+
+
+<main id="case-main" class="section section--tight">
+      <div class="section__inner case-article">
+        <p class="hero__eyebrow">Product Design · Desktop App</p>
+        <h1 class="case-page__h1">Игровой движок MANU</h1>
+        <p class="case-page__sub">
+          Редизайн и развитие интерфейса: новая концепция работы, обновлённая визуальная система и сотни проработанных пользовательских сценариев.
+        </p>
+        <p class="section__prose">
+          Работа велась вокруг десктопного редактора и связанных панелей: нужно было удержать целостность визуального языка при росте функциональности и не потерять опытные сценарии силовых пользователей.
+        </p>
+        <p class="section__prose">
+          Развёрнутый лонгрид кейса появится на этой странице позже; ниже — обложка для навигации из портфолио.
+        </p>
+        <h2>Обложка</h2>
+        <figure class="case-media case-media--wide">
+          <img
+            src="../assets/manu-game-maker/cover.webp"
+            alt="Интерфейс игрового движка MANU — обложка кейса"
+            width="1200"
+            height="675"
+            loading="lazy"
+            decoding="async"
+            data-image-viewer
+          />
+          <figcaption>Текущее превью для карточки портфолио</figcaption>
+        </figure>
+      </div>
+    </main>
+
+    <section id="projects" class="section section--surface">
+        <div class="section__inner">
+          <h2 class="section__title">Портфолио</h2>
+          <ol class="mini-projects-grid" data-mini-projects-list>
+            <li class="mini-projects-grid__item" data-mp-cells="3">
+              <a class="mp-card mp-card--link mp-card--stack" href="ai-platform-primo-rpa.html" aria-label="Платформа для работы с AI — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/ai-platform-primo-rpa/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Платформа для работы с AI</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями автоматизации и Smart OCR.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="3">
+              <a class="mp-card mp-card--link mp-card--stack" href="lunacy.html" aria-label="Графический редактор Lunacy — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/lunacy/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Графический редактор Lunacy</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Desktop App</li>
+                  </ul>
+                  <p class="mp-card__desc">Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и интерфейсной логики.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--stack" href="manu-game-maker.html" aria-label="Игровой движок MANU — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/manu-game-maker/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Игровой движок MANU</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">Product Design</li>
+                    <li class="mp-card__tag">Desktop App</li>
+                  </ul>
+                  <p class="mp-card__desc">Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и проработка сотен сложных пользовательских сценариев.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--stack" href="mobile-clinic-app.html" aria-label="Мобильное приложение для сети клиник — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/mobile-clinic-app/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Мобильное приложение для сети клиник</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Mobile App</li>
+                  </ul>
+                  <p class="mp-card__desc">Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом пользовательском пути, понятной навигации и быстром доступе к нужным действиям.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="orc-automation-panel.html" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Веб-панель для оркестрации автоматизаций</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под продакшен без остановки релизов.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="task-distribution-concept.html" aria-label="Концепт сервиса распределения задач — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Концепт сервиса распределения задач</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Analytics</li>
+                  </ul>
+                  <p class="mp-card__desc">Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность процессов и удобство командной работы.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="task-tracker.html" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Таск-трекер для бек-офис системы</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">Product Design</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по исполнителям; вкладки, фильтры, доска / список / таблица, Drag&amp;Drop.</p>
+                </div>
+              </a>
+            </li>
+          </ol>
+        </div>
+      </section><section hidden class="section section--surface" aria-hidden="true">
+        <div class="section__inner">
+          <div class="projects__heading">
+            <h2 class="section__title projects__title">Портфолио</h2>
+            <div class="projects__controls" aria-label="Навигация по карточкам портфолио">
+              <button type="button" class="projects__nav-btn" data-projects-prev aria-label="Прокрутить влево" aria-controls="projects-viewport">
+                <span class="projects__nav-ico projects__nav-ico--left" aria-hidden="true"></span>
+              </button>
+              <button type="button" class="projects__nav-btn" data-projects-next aria-label="Прокрутить вправо" aria-controls="projects-viewport">
+                <span class="projects__nav-ico projects__nav-ico--right" aria-hidden="true"></span>
+              </button>
+            </div>
+          </div>
+          <div class="projects-carousel">
+            <div id="projects-viewport" class="projects-carousel__viewport" data-projects-viewport>
+              <div class="projects-carousel__track">
+                <div class="projects-carousel__spacer" aria-hidden="true"></div>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="orc-automation-panel.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Веб-панель для оркестрации автоматизаций</h3>
+                      <p class="portfolio-card__summary">
+                        Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под
+                        продакшен без остановки релизов.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Web App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/orc-primo-rpa/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="ai-platform-primo-rpa.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Платформа для работы с AI</h3>
+                      <p class="portfolio-card__summary">
+                        Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями
+                        автоматизации и Smart OCR.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Web App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/ai-platform-primo-rpa/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="task-tracker.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Таск-трекер для бек-офис системы</h3>
+                      <p class="portfolio-card__summary">
+                        Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по
+                        исполнителям; вкладки, фильтры, виды доска / список / таблица, Drag&amp;Drop.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">Product Design</li>
+                        <li class="portfolio-card__tag">Web App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/task-tracker/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="lunacy.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Графический редактор Lunacy</h3>
+                      <p class="portfolio-card__summary">
+                        Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и
+                        интерфейсной логики.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Desktop App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/lunacy/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="mobile-clinic-app.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Мобильное приложение для сети клиник</h3>
+                      <p class="portfolio-card__summary">
+                        Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом
+                        пользовательском пути, понятной навигации и быстром доступе к нужным действиям.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Mobile App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/mobile-clinic-app/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="task-distribution-concept.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Концепт сервиса распределения задач</h3>
+                      <p class="portfolio-card__summary">
+                        Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность
+                        процессов и удобство командной работы.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Analytics</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/task-distribution-concept/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="obsidian-plugin-columns-view.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Колоночный вид — плагин для Obsidian</h3>
+                      <p class="portfolio-card__summary">
+                        Интерфейс для многоколоночной работы с заметками: удобная навигация, фильтрация и настройка
+                        колончатого отображения прямо в редакторе Obsidian.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Plugin</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/obsidian-plugin-columns-view/filter use.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <div class="projects-carousel__spacer" aria-hidden="true"></div>
+              </div>
+            </div>
+            <button
+              type="button"
+              class="projects-carousel__edge-hit projects-carousel__edge-hit--left"
+              data-projects-edge-prev
+              aria-label="Прокрутить портфолио влево"
+            ></button>
+            <button
+              type="button"
+              class="projects-carousel__edge-hit projects-carousel__edge-hit--right"
+              data-projects-edge-next
+              aria-label="Прокрутить портфолио вправо"
+            ></button>
+          </div>
+        </div>
+      </section>
+
+<section id="contact" class="section section--surface section--footerish">
+      <div class="section__inner">
+        <h2 class="section__title">Контакты</h2>
+        <ul class="contact-grid">
+          <li><a class="contact-card contact-card--link contact-card--brand-tg" href="https://t.me/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../assets/shared/icons/tg.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Telegram</span><span class="contact-card__hint">Отвечу сегодня</span></span></a></li>
+          <li><a class="contact-card contact-card--link contact-card--brand-vk" href="https://vk.com/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../assets/shared/icons/vk.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">ВКонтакте</span><span class="contact-card__hint">Стабильный коннект</span></span></a></li>
+          <li><a class="contact-card contact-card--link contact-card--brand-ya" href="https://yandex.ru/chat/p/727e71fa-89b5-44a8-90a5-851021631a1c?utm_source=invite" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../assets/shared/icons/yandex_telemost.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Яндекс</span><span class="contact-card__hint">Да, тут тоже можно</span></span></a></li>
+          <li><button type="button" class="contact-card contact-card--action contact-card--brand-email" data-contact-copy data-email-b64="bmlrQG1hbWFkYWV2di5ydQ==" data-hint-default="Скопировать адрес" aria-label="Скопировать адрес электронной почты в буфер обмена"><span class="contact-card__corner contact-card__corner--copy" aria-hidden="true"></span><span class="contact-card__icon contact-card__icon--accent" aria-hidden="true"></span><span class="contact-card__body"><span class="contact-card__name">Почта</span><span class="contact-card__hint" data-contact-copy-hint>Скопировать адрес</span></span></button></li>
+        </ul>
+      </div>
+    </section>
+
+<section class="section section--surface" aria-hidden="true">
+      <div class="section__inner"></div>
+    </section>
+
+<footer class="footer">
+      <div class="footer__inner">
+        <span class="footer__chunk footer__chunk--date">© 2026<span class="footer__sep" aria-hidden="true"> · </span></span>
+        <span class="footer__chunk footer__chunk--main">Дизайн и разработка сайта — Николай Мамадаев</span>
+        <span class="footer__chunk footer__chunk--meta footer__attr"><span class="footer__sep" aria-hidden="true"> · </span><a href="../cases/design-system.html">Design System</a><span class="footer__sep" aria-hidden="true"> · </span><a href="../cookie-policy.html">Политика cookie</a></span>
+      </div>
+    </footer>
+
+<aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
+      <p class="cookie-notice__text">
+        Сайт использует cookie для комфортной работы. Подробнее — в
+        <a href="../cookie-policy.html" data-cookie-policy-link>политике cookie</a>.
+      </p>
+      <button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
+        <span>Принять</span>
+        <span class="cookie-notice__accept-icon" aria-hidden="true">
+          <img src="../assets/shared/icons/сookie.svg" alt="" width="20" height="20" loading="eager" decoding="async" />
+        </span>
+      </button>
+    </aside>
+
+<div id="nav-more-menu-floating" class="nav-more__floating" hidden data-nav-more-menu-floating aria-hidden="true"></div>
+
+
+  </body>
+</html>
diff --git a/public/cases/mini-projects-showcase.html b/public/cases/mini-projects-showcase.html
new file mode 100644
index 0000000..38d809b
--- /dev/null
+++ b/public/cases/mini-projects-showcase.html
@@ -0,0 +1,973 @@
+<!DOCTYPE html>
+<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta
+      name="description"
+      content="Каталог карточек секции «Активность»: типы, ширина в клетках и живая masonry-сетка."
+    />
+    <title>Активность — каталог карточек</title>
+    <script>
+      (function () {
+        var FONT_CSS = {
+          merriweather: "../assets/fonts/merriweather.css",
+          geologica: "../assets/fonts/geologica.css",
+          mono: "../assets/fonts/mono.css",
+        };
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f !== "merriweather" && f !== "mono" && f !== "geologica") f = "merriweather";
+          d.dataset.font = f;
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+          var href = FONT_CSS[f];
+          if (href && !document.querySelector('link[data-theme-font="' + f + '"]')) {
+            var link = document.createElement("link");
+            link.rel = "stylesheet";
+            link.href = href;
+            link.setAttribute("data-theme-font", f);
+            document.head.appendChild(link);
+          }
+        } catch (e) {}
+      })();
+    </script>
+
+    <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon/favicon-16x16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="../assets/favicon/apple-touch-icon.png" />
+    <link rel="manifest" href="../assets/favicon/site.webmanifest" />
+    <link rel="preload" href="../assets/fonts/merriweather.css" as="style" />
+    <link rel="preload" href="../css/main.css" as="style" />
+    <link rel="preload" href="../js/skill-connectors.js" as="script" />
+    <link rel="modulepreload" href="../js/main.js" />
+    <link rel="stylesheet" href="../css/main.css" />
+    <script src="../js/skill-connectors.js" defer></script>
+    <script type="module" src="../js/main.js"></script>
+
+
+    <style>
+      #main {
+        padding-bottom: clamp(3.5rem, 8vw, 5.5rem);
+      }
+
+      .case-article.mp-showcase-page {
+        max-width: 56rem;
+        margin: 0 auto;
+      }
+
+      .case-article.mp-showcase-page .case-page__sub {
+        margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
+      }
+
+      .case-article.mp-showcase-page .section__prose {
+        margin-bottom: 1.1rem;
+        line-height: 1.65;
+        color: var(--text);
+      }
+
+      .case-article.mp-showcase-page > h2 {
+        margin: 0 0 1rem;
+        padding-top: clamp(2.5rem, 5vw, 3.5rem);
+        font-family: var(--font);
+        font-size: clamp(1.15rem, 2vw, 1.35rem);
+        font-weight: 700;
+        color: var(--text);
+        scroll-margin-top: 1.5rem;
+        border-top: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
+      }
+
+      .case-article.mp-showcase-page > h2#intro {
+        padding-top: clamp(1.25rem, 3vw, 2rem);
+        border-top: none;
+      }
+
+      .mp-showcase-toc {
+        margin: 0 0 1.75rem;
+        padding: 1rem 1.15rem;
+        border: 1px solid var(--line);
+        border-radius: var(--radius-md);
+        background: var(--surface);
+        font-size: 0.92rem;
+        line-height: 1.55;
+      }
+
+      .mp-showcase-toc ol {
+        margin: 0.35rem 0 0;
+        padding-left: 1.2rem;
+      }
+
+      .mp-showcase-toc a {
+        color: var(--accent-text);
+      }
+
+      .mp-showcase-specimens {
+        display: flex;
+        flex-direction: column;
+        gap: 0;
+        margin: 1.25rem 0 0.5rem;
+      }
+
+      .mp-showcase-specimen-row {
+        display: grid;
+        grid-template-columns: minmax(14rem, 1fr) minmax(12rem, 1.15fr);
+        gap: 1rem 1.75rem;
+        align-items: start;
+        padding-bottom: 2.25rem;
+        margin-bottom: 2.25rem;
+        border-bottom: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
+      }
+
+      .mp-showcase-specimen-row:last-child {
+        padding-bottom: 0;
+        margin-bottom: 0;
+        border-bottom: none;
+      }
+
+      @media (max-width: 719px) {
+        .mp-showcase-specimen-row {
+          grid-template-columns: 1fr;
+        }
+      }
+
+      .mp-showcase-specimen__card {
+        display: flex;
+        flex-direction: column;
+        gap: 0.45rem;
+        min-width: 0;
+      }
+
+      .mp-showcase-specimen__desc .section__prose {
+        margin-bottom: 0;
+      }
+
+      .mp-showcase-specimen__desc .section__prose strong {
+        font-weight: 600;
+        color: var(--text);
+      }
+
+      .mp-showcase-specimen__label {
+        margin: 0;
+        font-size: 0.78rem;
+        line-height: 1.4;
+        color: var(--text-muted);
+      }
+
+      .mp-showcase-specimen__card .mp-card {
+        flex: 1 1 auto;
+      }
+
+      /* На главной тоже, но в узкой колонке демо center давал пустоту над заголовком */
+      .mp-showcase-specimen__card .mp-card--horizontal .mp-card__body {
+        justify-content: flex-start;
+      }
+
+      .mp-showcase-grid-section {
+        padding-top: clamp(2.75rem, 6vw, 4.5rem);
+      }
+
+      .mp-showcase-grid-section .section__title {
+        margin-bottom: 0.85rem;
+      }
+
+      .mp-showcase-grid-section .section__prose {
+        margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
+      }
+
+      .mp-showcase-cells-table {
+        width: 100%;
+        margin: 1rem 0 0.5rem;
+        border-collapse: collapse;
+        font-size: 0.88rem;
+      }
+
+      .mp-showcase-cells-table th,
+      .mp-showcase-cells-table td {
+        padding: 0.55rem 0.65rem;
+        border: 1px solid var(--line);
+        text-align: left;
+        vertical-align: top;
+      }
+
+      .mp-showcase-cells-table th {
+        font-weight: 600;
+        color: var(--text);
+        background: color-mix(in srgb, var(--surface) 88%, var(--accent));
+      }
+
+      .mp-showcase-cells-demo {
+        margin: 1.35rem 0 1.65rem;
+        padding: 1.1rem 1.15rem 1.2rem;
+        border: 1px solid var(--line);
+        border-radius: var(--radius-md);
+        background: color-mix(in srgb, var(--surface) 90%, var(--accent));
+      }
+
+      .mp-showcase-cells-demo__legend {
+        display: grid;
+        grid-template-columns: repeat(6, 1fr);
+        gap: 0.5rem;
+        margin-bottom: 0.85rem;
+        font-size: 0.72rem;
+        color: var(--text-muted);
+        text-align: center;
+      }
+
+      .mp-showcase-cells-demo__legend span {
+        padding: 0.2rem 0;
+        border-radius: var(--radius-sm);
+        background: color-mix(in srgb, var(--line) 35%, transparent);
+      }
+
+      .mp-showcase-cells-demo__row {
+        display: grid;
+        grid-template-columns: repeat(6, 1fr);
+        gap: 0.5rem;
+        margin-bottom: 0.55rem;
+      }
+
+      .mp-showcase-cells-demo__row:last-of-type {
+        margin-bottom: 0;
+      }
+
+      .mp-showcase-cells-demo__block {
+        grid-row: 1;
+        min-height: 2.35rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--radius-sm);
+        border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
+        background: color-mix(in srgb, var(--accent) 14%, var(--surface));
+        font-size: 0.78rem;
+        font-weight: 600;
+        color: var(--accent-text);
+      }
+
+      .mp-showcase-cells-demo__block--1 {
+        grid-column: span 1;
+      }
+
+      .mp-showcase-cells-demo__block--2 {
+        grid-column: span 2;
+      }
+
+      .mp-showcase-cells-demo__block--3 {
+        grid-column: span 3;
+      }
+
+      .mp-showcase-cells-demo__caption {
+        margin: 0.85rem 0 0;
+        font-size: 0.82rem;
+        line-height: 1.45;
+        color: var(--text-muted);
+      }
+
+      .mp-showcase-cells-demo__row-label {
+        margin: 0.65rem 0 0.35rem;
+        font-size: 0.75rem;
+        color: var(--text-muted);
+      }
+
+      .mp-showcase-grid-section .mini-projects-grid {
+        margin-top: 0;
+      }
+    </style>
+    <script>
+      (function () {
+        try {
+          var raw = localStorage.getItem("siteThemeV1");
+          if (!raw) return;
+          var t = JSON.parse(raw);
+          var d = document.documentElement;
+          if (t.mode === "light" || t.mode === "dark") d.dataset.theme = t.mode;
+          if (t.radius === "soft" || t.radius === "medium" || t.radius === "strong") d.dataset.radius = t.radius;
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f === "merriweather" || f === "mono" || f === "geologica") d.dataset.font = f;
+          if (t.meshBg === "off") d.dataset.meshBg = "off";
+        } catch (e) {}
+      })();
+    </script>
+  </head>
+  <body>
+    <a class="skip-link" href="#main">К основному содержимому</a>
+
+    <header class="header" data-theme-picker>
+      <div class="header__inner">
+        <a class="logo" href="../index.html" aria-label="На главную">НМ</a>
+        <div class="header__cluster">
+          <nav class="nav" aria-label="Навигация">
+            <a href="../index.html">На главную</a>
+          </nav>
+        </div>
+      </div>
+    </header>
+
+    <div class="fab-stack" aria-label="Быстрые действия">
+      <div class="theme-panel-fab-wrap">
+        <button type="button" class="fab fab--secondary glass-neutral" data-theme-panel-btn aria-expanded="false" aria-controls="theme-panel" aria-label="Настройки стиля">
+          <span class="theme-panel-fab__icon theme-panel-fab__icon--open-hide" aria-hidden="true"></span>
+          <svg class="theme-panel-fab__icon theme-panel-fab__icon--close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          </svg>
+        </button>
+        <div id="theme-panel" class="theme-picker__panel glass-neutral" role="dialog" aria-label="Тема и оформление" hidden data-theme-panel>
+          <div class="theme-picker__stack">
+            <section class="theme-picker__section" aria-labelledby="theme-accent-title">
+              <h3 id="theme-accent-title" class="theme-picker__section-title">Акцентный цвет</h3>
+              <div class="colorpicker" data-colorpicker>
+                <div class="colorpicker__plane-box">
+                  <canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Насыщенность и светлость акцента"></canvas>
+                  <div class="colorpicker__knob" data-sl-knob></div>
+                </div>
+                <div class="colorpicker__hue-wrap">
+                  <label class="colorpicker__hue-sr" for="theme-hue-slider">Оттенок акцента</label>
+                  <input id="theme-hue-slider" class="colorpicker__hue" type="range" min="0" max="360" value="210" data-hue-slider aria-valuemin="0" aria-valuemax="360" />
+                </div>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-mode-title">
+              <h3 id="theme-mode-title" class="theme-picker__section-title">Тема</h3>
+              <div class="radius-seg theme-mode-seg" role="radiogroup" aria-labelledby="theme-mode-title">
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="system" aria-label="Как в системе"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--system"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="light" aria-label="Светлая тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--light"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="dark" aria-label="Тёмная тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--dark"></span></span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-radius-title">
+              <h3 id="theme-radius-title" class="theme-picker__section-title">Скругление углов</h3>
+              <div class="radius-seg" role="radiogroup" aria-labelledby="theme-radius-title">
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="soft" aria-label="Слабое скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--soft"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="medium" aria-label="Среднее скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--medium"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="strong" aria-label="Сильное скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--strong"></span></span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-typography-title">
+              <h3 id="theme-typography-title" class="theme-picker__section-title">Типографика</h3>
+              <div class="radius-seg" role="radiogroup" aria-labelledby="theme-typography-title">
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="geologica" aria-label="Sans"><span class="theme-font-seg__label">Sans</span></button>
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="merriweather" aria-label="Sans Serif"><span class="theme-font-seg__label">Sans Serif</span></button>
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="mono" aria-label="Mono"><span class="theme-font-seg__label">Mono</span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-mesh-bg-title">
+              <h3 id="theme-mesh-bg-title" class="theme-picker__section-title">Фон страницы</h3>
+              <div class="radius-seg radius-seg--two" role="radiogroup" aria-labelledby="theme-mesh-bg-title">
+                <button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="on" aria-label="Показать фоновый градиент"><span class="theme-mesh-bg-seg__label">Вкл</span></button>
+                <button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="off" aria-label="Скрыть фоновый градиент"><span class="theme-mesh-bg-seg__label">Выкл</span></button>
+              </div>
+            </section>
+          </div>
+        </div>
+      </div>
+      <a class="fab fab--primary" href="../index.html#contact" aria-label="Связаться">
+        <span class="fab-primary__ico" aria-hidden="true"></span>
+      </a>
+    </div>
+<div class="content-edit-fab-stack" aria-label="Правки контента" data-content-edit-ui>
+  <button
+    type="button"
+    class="fab fab--secondary glass-neutral content-edit-fab"
+    data-content-edit-mode-toggle
+    hidden
+    aria-pressed="false"
+    aria-label="Режим правок контента"
+    title="Режим правок"
+  >
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <path
+        d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0 0-3L16.5 4.5a2.12 2.12 0 0 0-3 0L3 15v5z"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linejoin="round"
+      />
+    </svg>
+    <span class="content-edit-fab__badge" hidden aria-hidden="true">0</span>
+  </button>
+</div>
+
+
+    <main id="main">
+      <section class="section section--tight">
+        <div class="section__inner">
+          <div class="case-article mp-showcase-page">
+        <p class="hero__eyebrow">Design System · Активность</p>
+        <h1 class="case-page__h1">Карточки активности</h1>
+        <p class="case-page__sub">Все типы карточек и живая сетка для подбора раскладки на главной</p>
+        <p class="section__prose">
+          Страница для верстки и контента: здесь те же классы и скрипты, что в секции на главной. Меняйте шрифт и тему в панели
+          справа, сужайте окно — сетка пересчитается. Подписи в заголовках карточек — подсказки, в проде их убрать.
+        </p>
+
+        <nav class="mp-showcase-toc" aria-label="Оглавление каталога">
+          <p><strong>Разделы</strong></p>
+          <ol>
+            <li><a href="#types">Типы карточек</a></li>
+            <li><a href="#cells">Ширина в клетках</a></li>
+            <li><a href="#grid">Живая сетка masonry</a></li>
+          </ol>
+        </nav>
+
+        <h2 id="intro">Как пользоваться</h2>
+        <p class="section__prose">
+          Сначала выберите <strong>тип</strong> (stack, horizontal, compact, decor), затем <strong>data-mp-cells</strong> (1–3) и
+          порядок <code>li</code> в списке. Карточки с <code>data-mp-extra</code> не влияют на высоту списка до кнопки «Показать все».
+          Подробности — в <code>docs/mini-projects-cards.md</code>.
+        </p>
+
+        <h2 id="types">Типы карточек</h2>
+        <p class="section__prose">
+          Слева пример карточки с текстом, справа название типа и пояснение по классам.
+        </p>
+                <div class="mp-showcase-specimens" aria-label="Типы карточек">
+          <div class="mp-showcase-specimen-row">
+            <div class="mp-showcase-specimen__card">
+              <p class="mp-showcase-specimen__label"><code>mp-card--stack</code> + <code>mp-card--link</code></p>
+              <a
+                class="mp-card mp-card--link mp-card--stack"
+                href="#"
+                aria-label="Stack со ссылкой — пример карточки"
+              >
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/shared/placeholder.webp"
+                    alt=""
+                    width="560"
+                    height="315"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">
+                    Stack со ссылкой
+                    <span class="mp-card__ext" aria-hidden="true"></span>
+                  </h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">веб-сайт</li>
+                  </ul>
+                  <p class="mp-card__desc">
+                    Небольшой скрипт: черновики текстов из ключевых слов, без внешних API.
+                  </p>
+                </div>
+              </a>
+            </div>
+            <div class="mp-showcase-specimen__desc">
+              <p class="section__prose">
+                <strong>Stack со ссылкой.</strong> Превью на всю ширину, текст снизу. Для внешней ссылки:
+                <code>mp-card--link</code> и <code>mp-card__ext</code> в заголовке (как в блоке опыта).
+              </p>
+            </div>
+          </div>
+
+          <div class="mp-showcase-specimen-row">
+            <div class="mp-showcase-specimen__card">
+              <p class="mp-showcase-specimen__label"><code>mp-card--stack</code> без ссылки</p>
+              <div class="mp-card mp-card--stack">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/shared/placeholder.webp"
+                    alt=""
+                    width="560"
+                    height="315"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Stack без ссылки</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">заметка</li>
+                  </ul>
+                  <p class="mp-card__desc">
+                    Связка баз и rollup для недельного обзора, только для личного пользования.
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div class="mp-showcase-specimen__desc">
+              <p class="section__prose">
+                <strong>Stack без ссылки.</strong> Тот же вид. Обёртка <code>div</code> или <code>article</code>, без
+                <code>mp-card--link</code>.
+              </p>
+            </div>
+          </div>
+
+          <div class="mp-showcase-specimen-row">
+            <div class="mp-showcase-specimen__card">
+              <p class="mp-showcase-specimen__label"><code>mp-card--horizontal</code> + <code>mp-card--link</code></p>
+              <a
+                class="mp-card mp-card--link mp-card--horizontal"
+                href="#"
+                aria-label="Horizontal со ссылкой — пример карточки"
+              >
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/shared/placeholder.webp"
+                    alt=""
+                    width="360"
+                    height="203"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">
+                    Horizontal со ссылкой
+                    <span class="mp-card__ext" aria-hidden="true"></span>
+                  </h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">приложение</li>
+                  </ul>
+                  <p class="mp-card__desc">
+                    Локальный таймер с короткими звуками и блокировкой лишних вкладок.
+                  </p>
+                </div>
+              </a>
+            </div>
+            <div class="mp-showcase-specimen__desc">
+              <p class="section__prose">
+                <strong>Horizontal со ссылкой.</strong> Миниатюра слева, текст справа. На узком экране карточка
+                складывается в столбик.
+              </p>
+            </div>
+          </div>
+
+          <div class="mp-showcase-specimen-row">
+            <div class="mp-showcase-specimen__card">
+              <p class="mp-showcase-specimen__label"><code>mp-card--horizontal</code> без ссылки</p>
+              <div class="mp-card mp-card--horizontal">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/shared/placeholder.webp"
+                    alt=""
+                    width="360"
+                    height="203"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Horizontal без ссылки</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">шаблон</li>
+                  </ul>
+                  <p class="mp-card__desc">
+                    Статический сайт с расписанием и формой заявки на отдельном сервисе.
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div class="mp-showcase-specimen__desc">
+              <p class="section__prose">
+                <strong>Horizontal без ссылки.</strong> Тот же расклад, карточка не ведёт на внешний URL.
+              </p>
+            </div>
+          </div>
+
+          <div class="mp-showcase-specimen-row">
+            <div class="mp-showcase-specimen__card">
+              <p class="mp-showcase-specimen__label"><code>mp-card--compact</code> + <code>mp-card--link</code></p>
+              <a
+                class="mp-card mp-card--link mp-card--compact"
+                href="#"
+                aria-label="Compact со ссылкой — пример карточки"
+              >
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">
+                    Compact со ссылкой
+                    <span class="mp-card__ext" aria-hidden="true"></span>
+                  </h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">скрипт</li>
+                  </ul>
+                  <p class="mp-card__desc">
+                    Префиксы, нумерация и dry-run перед записью файлов на диск.
+                  </p>
+                </div>
+              </a>
+            </div>
+            <div class="mp-showcase-specimen__desc">
+              <p class="section__prose">
+                <strong>Compact со ссылкой.</strong> Только текст, без <code>mp-card__media</code>. В сетке часто с
+                <code>data-mp-cells="1"</code>.
+              </p>
+            </div>
+          </div>
+
+          <div class="mp-showcase-specimen-row">
+            <div class="mp-showcase-specimen__card">
+              <p class="mp-showcase-specimen__label"><code>mp-card--compact</code> без ссылки</p>
+              <article class="mp-card mp-card--compact">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Compact без ссылки</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">документ</li>
+                  </ul>
+                  <p class="mp-card__desc">
+                    Markdown-список проверок перед релизом мелких правок в интерфейсе.
+                  </p>
+                </div>
+              </article>
+            </div>
+            <div class="mp-showcase-specimen__desc">
+              <p class="section__prose">
+                <strong>Compact без ссылки.</strong> Короткая заметка или чеклист без внешней ссылки.
+              </p>
+            </div>
+          </div>
+
+          <div class="mp-showcase-specimen-row">
+            <div class="mp-showcase-specimen__card">
+              <p class="mp-showcase-specimen__label"><code>mp-card--decor</code></p>
+              <div class="mp-card mp-card--decor" aria-hidden="true">
+                <span class="mp-card__decor-pattern" aria-hidden="true"></span>
+              </div>
+            </div>
+            <div class="mp-showcase-specimen__desc">
+              <p class="section__prose">
+                <strong>Декоративная ячейка.</strong> Заглушка в сетке, без проекта и ссылки. Внутри
+                <code>span.mp-card__decor-pattern</code>.
+              </p>
+            </div>
+          </div>
+        </div>
+
+
+        <h2 id="cells">Ширина в клетках</h2>
+        <p class="section__prose">
+          Атрибут <code>data-mp-cells</code> на <code>li.mini-projects-grid__item</code> задаёт желаемую ширину от 1 до 3 клеток.
+          Скрипт не даст карточке быть шире текущего ряда.
+        </p>
+        <figure class="mp-showcase-cells-demo" aria-label="Схема ширины карточек в клетках">
+          <div class="mp-showcase-cells-demo__legend" aria-hidden="true">
+            <span>1</span>
+            <span>2</span>
+            <span>3</span>
+            <span>4</span>
+            <span>5</span>
+            <span>6</span>
+          </div>
+          <p class="mp-showcase-cells-demo__row-label">Ряд из 6 клеток (широкий экран)</p>
+          <div class="mp-showcase-cells-demo__row">
+            <div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--3">3</div>
+            <div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--3">3</div>
+          </div>
+          <div class="mp-showcase-cells-demo__row">
+            <div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--2">2</div>
+            <div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--2">2</div>
+            <div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--2">2</div>
+          </div>
+          <div class="mp-showcase-cells-demo__row">
+            <div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--1">1</div>
+            <div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--2">2</div>
+            <div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--3">3</div>
+          </div>
+          <figcaption class="mp-showcase-cells-demo__caption">
+            Цифра в блоке = значение <code>data-mp-cells</code>. Карточка занимает столько клеток подряд в одном ряду.
+          </figcaption>
+        </figure>
+        <table class="mp-showcase-cells-table">
+          <thead>
+            <tr>
+              <th scope="col">Ширина списка</th>
+              <th scope="col">Клеток в ряду</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>≥ 1180px</td>
+              <td>6</td>
+            </tr>
+            <tr>
+              <td>≥ 880px</td>
+              <td>4</td>
+            </tr>
+            <tr>
+              <td>≥ 520px</td>
+              <td>2</td>
+            </tr>
+            <tr>
+              <td>уже</td>
+              <td>1 (вся строка)</td>
+            </tr>
+          </tbody>
+        </table>
+        <p class="section__prose">
+          На шести клетках пара <code>3 + 3</code> или тройка <code>2 + 2 + 2</code> обычно смотрится ровнее случайного набора.
+          Декор (<code>mp-card--decor</code>) заполняет пустоты в сетке.
+        </p>
+          </div>
+        </div>
+      </section>
+
+      <section id="grid" class="section section--surface mp-showcase-grid-section" aria-labelledby="grid-title">
+        <div class="section__inner">
+          <h2 id="grid-title" class="section__title">Живая сетка masonry</h2>
+          <p class="section__prose">
+            Демо блока «Активность» с главной: здесь все типы карточек в одной живой сетке. В подписях у каждой — тип
+            раскладки и <code>data-mp-cells</code>. Меняйте ширину окна и шрифт в панели темы, смотрите, как сетка
+            перестраивается, и переносите удачный порядок на главную.
+          </p>
+                  <ol
+          id="mini-projects-showcase-grid"
+          class="mini-projects-grid mp-showcase-grid"
+          data-mini-projects-list
+        >
+          <li class="mini-projects-grid__item" data-mp-cells="2">
+            <a class="mp-card mp-card--link mp-card--stack" href="#" aria-label="[2] stack · ссылка">
+              <div class="mp-card__media" aria-hidden="true">
+                <img
+                  class="mp-card__image"
+                  src="../assets/shared/placeholder.webp"
+                  alt=""
+                  width="560"
+                  height="315"
+                  loading="lazy"
+                  decoding="async"
+                />
+              </div>
+              <div class="mp-card__body">
+                <h3 class="mp-card__title">
+                  [2] stack · ссылка
+                  <span class="mp-card__ext" aria-hidden="true"></span>
+                </h3>
+                <ul class="mp-card__tags" aria-label="Тип проекта">
+                  <li class="mp-card__tag">веб-сайт</li>
+                </ul>
+                <p class="mp-card__desc">Базовая пара в ряду из шести клеток.</p>
+              </div>
+            </a>
+          </li>
+          <li class="mini-projects-grid__item" data-mp-cells="2">
+            <div class="mp-card mp-card--stack">
+              <div class="mp-card__media" aria-hidden="true">
+                <img
+                  class="mp-card__image"
+                  src="../assets/shared/placeholder.webp"
+                  alt=""
+                  width="560"
+                  height="315"
+                  loading="lazy"
+                  decoding="async"
+                />
+              </div>
+              <div class="mp-card__body">
+                <h3 class="mp-card__title">[2] stack</h3>
+                <ul class="mp-card__tags" aria-label="Тип проекта">
+                  <li class="mp-card__tag">заметка</li>
+                </ul>
+                <p class="mp-card__desc">Stack без внешней ссылки.</p>
+              </div>
+            </div>
+          </li>
+          <li class="mini-projects-grid__item" data-mp-cells="2">
+            <div class="mp-card mp-card--horizontal">
+              <div class="mp-card__media" aria-hidden="true">
+                <img
+                  class="mp-card__image"
+                  src="../assets/shared/placeholder.webp"
+                  alt=""
+                  width="360"
+                  height="203"
+                  loading="lazy"
+                  decoding="async"
+                />
+              </div>
+              <div class="mp-card__body">
+                <h3 class="mp-card__title">[2] horizontal</h3>
+                <ul class="mp-card__tags" aria-label="Тип проекта">
+                  <li class="mp-card__tag">утилита</li>
+                </ul>
+                <p class="mp-card__desc">Horizontal на две клетки, без ссылки.</p>
+              </div>
+            </div>
+          </li>
+          <li class="mini-projects-grid__item" data-mp-cells="2">
+            <article class="mp-card mp-card--compact">
+              <div class="mp-card__body">
+                <h3 class="mp-card__title">[2] compact</h3>
+                <ul class="mp-card__tags" aria-label="Тип проекта">
+                  <li class="mp-card__tag">шаблон</li>
+                </ul>
+                <p class="mp-card__desc">Текстовая карточка на две клетки.</p>
+              </div>
+            </article>
+          </li>
+          <li class="mini-projects-grid__item" data-mp-cells="1">
+            <a class="mp-card mp-card--link mp-card--compact" href="#" aria-label="[1] compact · ссылка">
+              <div class="mp-card__body">
+                <h3 class="mp-card__title">
+                  [1] compact · ссылка
+                  <span class="mp-card__ext" aria-hidden="true"></span>
+                </h3>
+                <ul class="mp-card__tags" aria-label="Тип проекта">
+                  <li class="mp-card__tag">cli</li>
+                </ul>
+                <p class="mp-card__desc">Узкая колонка со ссылкой.</p>
+              </div>
+            </a>
+          </li>
+          <li class="mini-projects-grid__item" data-mp-cells="1">
+            <article class="mp-card mp-card--compact">
+              <div class="mp-card__body">
+                <h3 class="mp-card__title">[1] compact</h3>
+                <ul class="mp-card__tags" aria-label="Тип проекта">
+                  <li class="mp-card__tag">документ</li>
+                </ul>
+                <p class="mp-card__desc">Compact на одну клетку.</p>
+              </div>
+            </article>
+          </li>
+          <li class="mini-projects-grid__item" data-mp-cells="2">
+            <div class="mp-card mp-card--decor" aria-hidden="true">
+              <span class="mp-card__decor-pattern" aria-hidden="true"></span>
+            </div>
+          </li>
+          <li class="mini-projects-grid__item" data-mp-cells="3">
+            <a class="mp-card mp-card--link mp-card--stack" href="#" aria-label="[3] stack · ссылка">
+              <div class="mp-card__media" aria-hidden="true">
+                <img
+                  class="mp-card__image"
+                  src="../assets/shared/placeholder.webp"
+                  alt=""
+                  width="560"
+                  height="315"
+                  loading="lazy"
+                  decoding="async"
+                />
+              </div>
+              <div class="mp-card__body">
+                <h3 class="mp-card__title">
+                  [3] stack · ссылка
+                  <span class="mp-card__ext" aria-hidden="true"></span>
+                </h3>
+                <ul class="mp-card__tags" aria-label="Тип проекта">
+                  <li class="mp-card__tag">приложение</li>
+                </ul>
+                <p class="mp-card__desc">
+                  Половина шестиклеточной строки. Длиннее описание, чтобы проверить перенос и высоту после смены шрифта.
+                </p>
+              </div>
+            </a>
+          </li>
+          <li class="mini-projects-grid__item" data-mp-cells="3">
+            <a class="mp-card mp-card--link mp-card--horizontal" href="#" aria-label="[3] horizontal · ссылка">
+              <div class="mp-card__media" aria-hidden="true">
+                <img
+                  class="mp-card__image"
+                  src="../assets/shared/placeholder.webp"
+                  alt=""
+                  width="360"
+                  height="203"
+                  loading="lazy"
+                  decoding="async"
+                />
+              </div>
+              <div class="mp-card__body">
+                <h3 class="mp-card__title">
+                  [3] horizontal · ссылка
+                  <span class="mp-card__ext" aria-hidden="true"></span>
+                </h3>
+                <ul class="mp-card__tags" aria-label="Тип проекта">
+                  <li class="mp-card__tag">плагин</li>
+                </ul>
+                <p class="mp-card__desc">Широкий horizontal: превью и текст в одной полосе.</p>
+              </div>
+            </a>
+          </li>
+          <li class="mini-projects-grid__item" data-mp-cells="3">
+            <div class="mp-card mp-card--horizontal">
+              <div class="mp-card__media" aria-hidden="true">
+                <img
+                  class="mp-card__image"
+                  src="../assets/shared/placeholder.webp"
+                  alt=""
+                  width="360"
+                  height="203"
+                  loading="lazy"
+                  decoding="async"
+                />
+              </div>
+              <div class="mp-card__body">
+                <h3 class="mp-card__title">[3] horizontal</h3>
+                <ul class="mp-card__tags" aria-label="Тип проекта">
+                  <li class="mp-card__tag">виджет</li>
+                </ul>
+                <p class="mp-card__desc">Horizontal на три клетки, без ссылки.</p>
+              </div>
+            </div>
+          </li>
+        </ol>
+
+        </div>
+      </section>
+    </main>
+
+    <section class="section section--surface" aria-hidden="true">
+      <div class="section__inner"></div>
+    </section>
+
+    <footer class="footer">
+      <div class="footer__inner">
+        <span class="footer__chunk footer__chunk--date">© 2026<span class="footer__sep" aria-hidden="true"> · </span></span>
+        <span class="footer__chunk footer__chunk--main">Дизайн и разработка сайта — Николай Мамадаев</span>
+        <span class="footer__chunk footer__chunk--meta footer__attr"><span class="footer__sep" aria-hidden="true"> · </span><a href="../cases/design-system.html">Design System</a><span class="footer__sep" aria-hidden="true"> · </span><a href="../cookie-policy.html">Политика cookie</a></span>
+      </div>
+    </footer>
+
+    <aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
+      <p class="cookie-notice__text">
+        Сайт использует cookie для комфортной работы. Подробнее — в
+        <a href="../cookie-policy.html" data-cookie-policy-link>политике cookie</a>.
+      </p>
+      <button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
+        <span>Принять</span>
+        <span class="cookie-notice__accept-icon" aria-hidden="true">
+          <img src="../assets/shared/icons/сookie.svg" alt="" width="20" height="20" loading="eager" decoding="async" />
+        </span>
+      </button>
+    </aside>
+
+    <div id="nav-more-menu-floating" class="nav-more__floating" hidden data-nav-more-menu-floating aria-hidden="true"></div>
+
+  </body>
+</html>
diff --git a/public/cases/mobile-clinic-app.html b/public/cases/mobile-clinic-app.html
new file mode 100644
index 0000000..38ff7cc
--- /dev/null
+++ b/public/cases/mobile-clinic-app.html
@@ -0,0 +1,668 @@
+<!DOCTYPE html>
+<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta
+      name="description"
+      content="Кейс: мобильное приложение для сети клиник — запись к врачам, медицинские услуги, навигация и быстрые действия."
+    />
+    <title>Мобильное приложение для сети клиник — кейс</title>
+    <script>
+      (function () {
+        var FONT_CSS = {
+          merriweather: "../assets/fonts/merriweather.css",
+          geologica: "../assets/fonts/geologica.css",
+          mono: "../assets/fonts/mono.css",
+        };
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f !== "merriweather" && f !== "mono" && f !== "geologica") f = "merriweather";
+          d.dataset.font = f;
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+          var href = FONT_CSS[f];
+          if (href && !document.querySelector('link[data-theme-font="' + f + '"]')) {
+            var link = document.createElement("link");
+            link.rel = "stylesheet";
+            link.href = href;
+            link.setAttribute("data-theme-font", f);
+            document.head.appendChild(link);
+          }
+        } catch (e) {}
+      })();
+    </script>
+
+    <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon/favicon-16x16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="../assets/favicon/apple-touch-icon.png" />
+    <link rel="manifest" href="../assets/favicon/site.webmanifest" />
+    <link rel="preload" href="../assets/fonts/merriweather.css" as="style" />
+    <link rel="preload" href="../css/main.css" as="style" />
+    <link rel="preload" href="../js/skill-connectors.js" as="script" />
+    <link rel="modulepreload" href="../js/main.js" />
+    <link rel="stylesheet" href="../css/main.css" />
+    <script src="../js/skill-connectors.js" defer></script>
+    <script type="module" src="../js/main.js"></script>
+
+
+    <style>
+      .case-article {
+        max-width: 48rem;
+        margin: 0 auto;
+      }
+      .case-article h2 {
+        margin: 2rem 0 0.75rem;
+        font-size: clamp(1.15rem, 2vw, 1.35rem);
+        font-weight: 700;
+        color: var(--text);
+      }
+      .case-article .section__prose {
+        margin-bottom: 0.75rem;
+        color: var(--text);
+      }
+      .case-article a:not(.btn) {
+        color: var(--accent);
+      }
+    </style>
+    <script>
+      (function () {
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f === "merriweather" || f === "mono" || f === "geologica") {
+            d.dataset.font = f;
+          } else {
+            d.dataset.font = "merriweather";
+          }
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+        } catch (e) {}
+      })();
+    </script>
+  </head>
+  <body>
+    <a class="skip-link" href="#case-main">К содержимому кейса</a>
+    <header class="header" data-theme-picker>
+      <div class="header__inner">
+        <a class="logo" href="../index.html" aria-label="На главную">НМ</a>
+        <div class="header__cluster">
+          <nav class="nav" aria-label="Навигация по странице">
+            <a href="#projects">Портфолио</a>
+            <a href="#contact">Контакты</a>
+          </nav>
+        </div>
+      </div>
+    </header>
+
+<div class="fab-stack" aria-label="Быстрые действия">
+      <div class="theme-panel-fab-wrap">
+        <button type="button" class="fab fab--secondary glass-neutral" data-theme-panel-btn aria-expanded="false" aria-controls="theme-panel" aria-label="Настройки стиля">
+          <span class="theme-panel-fab__icon theme-panel-fab__icon--open-hide" aria-hidden="true"></span>
+          <svg class="theme-panel-fab__icon theme-panel-fab__icon--close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          </svg>
+        </button>
+        <div id="theme-panel" class="theme-picker__panel glass-neutral" role="dialog" aria-label="Тема и оформление" hidden data-theme-panel>
+          <div class="theme-picker__stack">
+            <section class="theme-picker__section" aria-labelledby="theme-accent-title">
+              <h3 id="theme-accent-title" class="theme-picker__section-title">Акцентный цвет</h3>
+              <div class="colorpicker" data-colorpicker>
+                <div class="colorpicker__plane-box">
+                  <canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Насыщенность и светлость акцента"></canvas>
+                  <div class="colorpicker__knob" data-sl-knob></div>
+                </div>
+                <div class="colorpicker__hue-wrap">
+                  <label class="colorpicker__hue-sr" for="theme-hue-slider">Оттенок акцента</label>
+                  <input id="theme-hue-slider" class="colorpicker__hue" type="range" min="0" max="360" value="210" data-hue-slider aria-valuemin="0" aria-valuemax="360" />
+                </div>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-mode-title">
+              <h3 id="theme-mode-title" class="theme-picker__section-title">Тема</h3>
+              <div class="radius-seg theme-mode-seg" role="radiogroup" aria-labelledby="theme-mode-title">
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="system" aria-label="Как в системе"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--system"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="light" aria-label="Светлая тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--light"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="dark" aria-label="Тёмная тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--dark"></span></span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-radius-title">
+              <h3 id="theme-radius-title" class="theme-picker__section-title">Скругление углов</h3>
+              <div class="radius-seg" role="radiogroup" aria-labelledby="theme-radius-title">
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="soft" aria-label="Слабое скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--soft"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="medium" aria-label="Среднее скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--medium"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="strong" aria-label="Сильное скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--strong"></span></span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-typography-title">
+              <h3 id="theme-typography-title" class="theme-picker__section-title">Типографика</h3>
+              <div class="radius-seg" role="radiogroup" aria-labelledby="theme-typography-title">
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="geologica" aria-label="Sans"><span class="theme-font-seg__label">Sans</span></button>
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="merriweather" aria-label="Sans Serif"><span class="theme-font-seg__label">Sans Serif</span></button>
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="mono" aria-label="Mono"><span class="theme-font-seg__label">Mono</span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-mesh-bg-title">
+              <h3 id="theme-mesh-bg-title" class="theme-picker__section-title">Фон страницы</h3>
+              <div class="radius-seg radius-seg--two" role="radiogroup" aria-labelledby="theme-mesh-bg-title">
+                <button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="on" aria-label="Показать фоновый градиент"><span class="theme-mesh-bg-seg__label">Вкл</span></button>
+                <button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="off" aria-label="Скрыть фоновый градиент"><span class="theme-mesh-bg-seg__label">Выкл</span></button>
+              </div>
+            </section>
+          </div>
+        </div>
+      </div>
+      <a class="fab fab--primary" href="#contact" aria-label="Связаться">
+        <span class="fab-primary__ico" aria-hidden="true"></span>
+      </a>
+    </div>
+<div class="content-edit-fab-stack" aria-label="Правки контента" data-content-edit-ui>
+  <button
+    type="button"
+    class="fab fab--secondary glass-neutral content-edit-fab"
+    data-content-edit-mode-toggle
+    hidden
+    aria-pressed="false"
+    aria-label="Режим правок контента"
+    title="Режим правок"
+  >
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <path
+        d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0 0-3L16.5 4.5a2.12 2.12 0 0 0-3 0L3 15v5z"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linejoin="round"
+      />
+    </svg>
+    <span class="content-edit-fab__badge" hidden aria-hidden="true">0</span>
+  </button>
+</div>
+
+
+<main id="case-main" class="section section--tight">
+      <div class="section__inner case-article">
+        <p class="hero__eyebrow">UX/UI · Mobile App</p>
+        <h1 class="case-page__h1">Мобильное приложение для сети клиник</h1>
+        <p class="case-page__sub">
+          Запись к врачам и работа с медицинскими услугами: простой путь пользователя, понятная навигация и быстрый доступ к действиям.
+        </p>
+        <p class="section__prose">
+          Фокус проекта — снять тревожность и лишние шаги у пациента: ясные статусы записи, предсказуемые формы и опора на привычные паттерны мобильных приложений.
+        </p>
+        <p class="section__prose">
+          Полный разбор кейса будет опубликован здесь; пока страница служит точкой входа из блока портфолио на главной.
+        </p>
+        <h2>Обложка</h2>
+        <figure class="case-media case-media--wide">
+          <img
+            src="../assets/mobile-clinic-app/cover.webp"
+            alt="Мобильное приложение для сети клиник — обложка кейса"
+            width="1200"
+            height="675"
+            loading="lazy"
+            decoding="async"
+            data-image-viewer
+          />
+          <figcaption>Текущее превью для карточки портфолио</figcaption>
+        </figure>
+      </div>
+    </main>
+
+    <section id="projects" class="section section--surface">
+        <div class="section__inner">
+          <h2 class="section__title">Портфолио</h2>
+          <ol class="mini-projects-grid" data-mini-projects-list>
+            <li class="mini-projects-grid__item" data-mp-cells="3">
+              <a class="mp-card mp-card--link mp-card--stack" href="ai-platform-primo-rpa.html" aria-label="Платформа для работы с AI — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/ai-platform-primo-rpa/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Платформа для работы с AI</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями автоматизации и Smart OCR.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="3">
+              <a class="mp-card mp-card--link mp-card--stack" href="lunacy.html" aria-label="Графический редактор Lunacy — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/lunacy/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Графический редактор Lunacy</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Desktop App</li>
+                  </ul>
+                  <p class="mp-card__desc">Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и интерфейсной логики.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--stack" href="manu-game-maker.html" aria-label="Игровой движок MANU — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/manu-game-maker/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Игровой движок MANU</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">Product Design</li>
+                    <li class="mp-card__tag">Desktop App</li>
+                  </ul>
+                  <p class="mp-card__desc">Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и проработка сотен сложных пользовательских сценариев.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--stack" href="mobile-clinic-app.html" aria-label="Мобильное приложение для сети клиник — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/mobile-clinic-app/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Мобильное приложение для сети клиник</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Mobile App</li>
+                  </ul>
+                  <p class="mp-card__desc">Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом пользовательском пути, понятной навигации и быстром доступе к нужным действиям.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="orc-automation-panel.html" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Веб-панель для оркестрации автоматизаций</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под продакшен без остановки релизов.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="task-distribution-concept.html" aria-label="Концепт сервиса распределения задач — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Концепт сервиса распределения задач</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Analytics</li>
+                  </ul>
+                  <p class="mp-card__desc">Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность процессов и удобство командной работы.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="task-tracker.html" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Таск-трекер для бек-офис системы</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">Product Design</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по исполнителям; вкладки, фильтры, доска / список / таблица, Drag&amp;Drop.</p>
+                </div>
+              </a>
+            </li>
+          </ol>
+        </div>
+      </section><section hidden class="section section--surface" aria-hidden="true">
+        <div class="section__inner">
+          <div class="projects__heading">
+            <h2 class="section__title projects__title">Портфолио</h2>
+            <div class="projects__controls" aria-label="Навигация по карточкам портфолио">
+              <button type="button" class="projects__nav-btn" data-projects-prev aria-label="Прокрутить влево" aria-controls="projects-viewport">
+                <span class="projects__nav-ico projects__nav-ico--left" aria-hidden="true"></span>
+              </button>
+              <button type="button" class="projects__nav-btn" data-projects-next aria-label="Прокрутить вправо" aria-controls="projects-viewport">
+                <span class="projects__nav-ico projects__nav-ico--right" aria-hidden="true"></span>
+              </button>
+            </div>
+          </div>
+          <div class="projects-carousel">
+            <div id="projects-viewport" class="projects-carousel__viewport" data-projects-viewport>
+              <div class="projects-carousel__track">
+                <div class="projects-carousel__spacer" aria-hidden="true"></div>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="orc-automation-panel.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Веб-панель для оркестрации автоматизаций</h3>
+                      <p class="portfolio-card__summary">
+                        Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под
+                        продакшен без остановки релизов.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Web App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/orc-primo-rpa/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="ai-platform-primo-rpa.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Платформа для работы с AI</h3>
+                      <p class="portfolio-card__summary">
+                        Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями
+                        автоматизации и Smart OCR.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Web App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/ai-platform-primo-rpa/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="task-tracker.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Таск-трекер для бек-офис системы</h3>
+                      <p class="portfolio-card__summary">
+                        Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по
+                        исполнителям; вкладки, фильтры, виды доска / список / таблица, Drag&amp;Drop.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">Product Design</li>
+                        <li class="portfolio-card__tag">Web App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/task-tracker/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="manu-game-maker.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Игровой движок MANU</h3>
+                      <p class="portfolio-card__summary">
+                        Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и
+                        проработка сотен сложных пользовательских сценариев.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">Product Design</li>
+                        <li class="portfolio-card__tag">Desktop App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/manu-game-maker/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="lunacy.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Графический редактор Lunacy</h3>
+                      <p class="portfolio-card__summary">
+                        Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и
+                        интерфейсной логики.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Desktop App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/lunacy/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="task-distribution-concept.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Концепт сервиса распределения задач</h3>
+                      <p class="portfolio-card__summary">
+                        Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность
+                        процессов и удобство командной работы.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Analytics</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/task-distribution-concept/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="obsidian-plugin-columns-view.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Колоночный вид — плагин для Obsidian</h3>
+                      <p class="portfolio-card__summary">
+                        Интерфейс для многоколоночной работы с заметками: удобная навигация, фильтрация и настройка
+                        колончатого отображения прямо в редакторе Obsidian.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Plugin</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/obsidian-plugin-columns-view/filter use.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <div class="projects-carousel__spacer" aria-hidden="true"></div>
+              </div>
+            </div>
+            <button
+              type="button"
+              class="projects-carousel__edge-hit projects-carousel__edge-hit--left"
+              data-projects-edge-prev
+              aria-label="Прокрутить портфолио влево"
+            ></button>
+            <button
+              type="button"
+              class="projects-carousel__edge-hit projects-carousel__edge-hit--right"
+              data-projects-edge-next
+              aria-label="Прокрутить портфолио вправо"
+            ></button>
+          </div>
+        </div>
+      </section>
+
+<section id="contact" class="section section--surface section--footerish">
+      <div class="section__inner">
+        <h2 class="section__title">Контакты</h2>
+        <ul class="contact-grid">
+          <li><a class="contact-card contact-card--link contact-card--brand-tg" href="https://t.me/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../assets/shared/icons/tg.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Telegram</span><span class="contact-card__hint">Отвечу сегодня</span></span></a></li>
+          <li><a class="contact-card contact-card--link contact-card--brand-vk" href="https://vk.com/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../assets/shared/icons/vk.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">ВКонтакте</span><span class="contact-card__hint">Стабильный коннект</span></span></a></li>
+          <li><a class="contact-card contact-card--link contact-card--brand-ya" href="https://yandex.ru/chat/p/727e71fa-89b5-44a8-90a5-851021631a1c?utm_source=invite" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../assets/shared/icons/yandex_telemost.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Яндекс</span><span class="contact-card__hint">Да, тут тоже можно</span></span></a></li>
+          <li><button type="button" class="contact-card contact-card--action contact-card--brand-email" data-contact-copy data-email-b64="bmlrQG1hbWFkYWV2di5ydQ==" data-hint-default="Скопировать адрес" aria-label="Скопировать адрес электронной почты в буфер обмена"><span class="contact-card__corner contact-card__corner--copy" aria-hidden="true"></span><span class="contact-card__icon contact-card__icon--accent" aria-hidden="true"></span><span class="contact-card__body"><span class="contact-card__name">Почта</span><span class="contact-card__hint" data-contact-copy-hint>Скопировать адрес</span></span></button></li>
+        </ul>
+      </div>
+    </section>
+
+<section class="section section--surface" aria-hidden="true">
+      <div class="section__inner"></div>
+    </section>
+
+<footer class="footer">
+      <div class="footer__inner">
+        <span class="footer__chunk footer__chunk--date">© 2026<span class="footer__sep" aria-hidden="true"> · </span></span>
+        <span class="footer__chunk footer__chunk--main">Дизайн и разработка сайта — Николай Мамадаев</span>
+        <span class="footer__chunk footer__chunk--meta footer__attr"><span class="footer__sep" aria-hidden="true"> · </span><a href="../cases/design-system.html">Design System</a><span class="footer__sep" aria-hidden="true"> · </span><a href="../cookie-policy.html">Политика cookie</a></span>
+      </div>
+    </footer>
+
+<aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
+      <p class="cookie-notice__text">
+        Сайт использует cookie для комфортной работы. Подробнее — в
+        <a href="../cookie-policy.html" data-cookie-policy-link>политике cookie</a>.
+      </p>
+      <button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
+        <span>Принять</span>
+        <span class="cookie-notice__accept-icon" aria-hidden="true">
+          <img src="../assets/shared/icons/сookie.svg" alt="" width="20" height="20" loading="eager" decoding="async" />
+        </span>
+      </button>
+    </aside>
+
+<div id="nav-more-menu-floating" class="nav-more__floating" hidden data-nav-more-menu-floating aria-hidden="true"></div>
+
+
+  </body>
+</html>
diff --git a/public/cases/obsidian-plugin-columns-view.html b/public/cases/obsidian-plugin-columns-view.html
new file mode 100644
index 0000000..b97cbb7
--- /dev/null
+++ b/public/cases/obsidian-plugin-columns-view.html
@@ -0,0 +1,702 @@
+<!DOCTYPE html>
+<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta
+      name="description"
+      content="Кейс: плагин колоночного вида для Obsidian — дизайн и UX плагина для заметок."
+    />
+    <title>Колоночный вид для Obsidian — кейс</title>
+    <script>
+      (function () {
+        var FONT_CSS = {
+          merriweather: "../assets/fonts/merriweather.css",
+          geologica: "../assets/fonts/geologica.css",
+          mono: "../assets/fonts/mono.css",
+        };
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f !== "merriweather" && f !== "mono" && f !== "geologica") f = "merriweather";
+          d.dataset.font = f;
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+          var href = FONT_CSS[f];
+          if (href && !document.querySelector('link[data-theme-font="' + f + '"]')) {
+            var link = document.createElement("link");
+            link.rel = "stylesheet";
+            link.href = href;
+            link.setAttribute("data-theme-font", f);
+            document.head.appendChild(link);
+          }
+        } catch (e) {}
+      })();
+    </script>
+
+    <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon/favicon-16x16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="../assets/favicon/apple-touch-icon.png" />
+    <link rel="manifest" href="../assets/favicon/site.webmanifest" />
+    <link rel="preload" href="../assets/fonts/merriweather.css" as="style" />
+    <link rel="preload" href="../css/main.css" as="style" />
+    <link rel="preload" href="../js/skill-connectors.js" as="script" />
+    <link rel="modulepreload" href="../js/main.js" />
+    <link rel="stylesheet" href="../css/main.css" />
+    <script src="../js/skill-connectors.js" defer></script>
+    <script type="module" src="../js/main.js"></script>
+
+
+        <link rel="stylesheet" href="../vendor/plyr/plyr.css" />
+
+    <style>
+      .case-article {
+        max-width: 48rem;
+        margin: 0 auto;
+      }
+      .case-article h2 {
+        margin: 2rem 0 0.75rem;
+        font-size: clamp(1.15rem, 2vw, 1.35rem);
+        font-weight: 700;
+        color: var(--text);
+      }
+      .case-article h3 {
+        font-size: 1.05rem;
+        font-weight: 600;
+        color: var(--text);
+      }
+      .case-article .section__prose {
+        margin-bottom: 0.75rem;
+        color: var(--text);
+      }
+      .case-article a:not(.btn) {
+        color: var(--accent);
+      }
+    </style>
+    <script>
+      (function () {
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f === "merriweather" || f === "mono" || f === "geologica") {
+            d.dataset.font = f;
+          } else {
+            d.dataset.font = "merriweather";
+          }
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+        } catch (e) {}
+      })();
+    </script>
+  </head>
+  <body>
+    <a class="skip-link" href="#case-main">К содержимому кейса</a>
+    <header class="header" data-theme-picker>
+      <div class="header__inner">
+        <a class="logo" href="../index.html" aria-label="На главную">НМ</a>
+        <div class="header__cluster">
+          <nav class="nav" aria-label="Навигация по странице">
+            <a href="#projects">Портфолио</a>
+            <a href="#contact">Контакты</a>
+          </nav>
+        </div>
+      </div>
+    </header>
+
+<div class="fab-stack" aria-label="Быстрые действия">
+      <div class="theme-panel-fab-wrap">
+        <button type="button" class="fab fab--secondary glass-neutral" data-theme-panel-btn aria-expanded="false" aria-controls="theme-panel" aria-label="Настройки стиля">
+          <span class="theme-panel-fab__icon theme-panel-fab__icon--open-hide" aria-hidden="true"></span>
+          <svg class="theme-panel-fab__icon theme-panel-fab__icon--close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          </svg>
+        </button>
+        <div id="theme-panel" class="theme-picker__panel glass-neutral" role="dialog" aria-label="Тема и оформление" hidden data-theme-panel>
+          <div class="theme-picker__stack">
+            <section class="theme-picker__section" aria-labelledby="theme-accent-title">
+              <h3 id="theme-accent-title" class="theme-picker__section-title">Акцентный цвет</h3>
+              <div class="colorpicker" data-colorpicker>
+                <div class="colorpicker__plane-box">
+                  <canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Насыщенность и светлость акцента"></canvas>
+                  <div class="colorpicker__knob" data-sl-knob></div>
+                </div>
+                <div class="colorpicker__hue-wrap">
+                  <label class="colorpicker__hue-sr" for="theme-hue-slider">Оттенок акцента</label>
+                  <input id="theme-hue-slider" class="colorpicker__hue" type="range" min="0" max="360" value="210" data-hue-slider aria-valuemin="0" aria-valuemax="360" />
+                </div>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-mode-title">
+              <h3 id="theme-mode-title" class="theme-picker__section-title">Тема</h3>
+              <div class="radius-seg theme-mode-seg" role="radiogroup" aria-labelledby="theme-mode-title">
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="system" aria-label="Как в системе"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--system"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="light" aria-label="Светлая тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--light"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="dark" aria-label="Тёмная тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--dark"></span></span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-radius-title">
+              <h3 id="theme-radius-title" class="theme-picker__section-title">Скругление углов</h3>
+              <div class="radius-seg" role="radiogroup" aria-labelledby="theme-radius-title">
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="soft" aria-label="Слабое скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--soft"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="medium" aria-label="Среднее скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--medium"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="strong" aria-label="Сильное скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--strong"></span></span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-typography-title">
+              <h3 id="theme-typography-title" class="theme-picker__section-title">Типографика</h3>
+              <div class="radius-seg" role="radiogroup" aria-labelledby="theme-typography-title">
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="geologica" aria-label="Sans"><span class="theme-font-seg__label">Sans</span></button>
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="merriweather" aria-label="Sans Serif"><span class="theme-font-seg__label">Sans Serif</span></button>
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="mono" aria-label="Mono"><span class="theme-font-seg__label">Mono</span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-mesh-bg-title">
+              <h3 id="theme-mesh-bg-title" class="theme-picker__section-title">Фон страницы</h3>
+              <div class="radius-seg radius-seg--two" role="radiogroup" aria-labelledby="theme-mesh-bg-title">
+                <button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="on" aria-label="Показать фоновый градиент"><span class="theme-mesh-bg-seg__label">Вкл</span></button>
+                <button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="off" aria-label="Скрыть фоновый градиент"><span class="theme-mesh-bg-seg__label">Выкл</span></button>
+              </div>
+            </section>
+          </div>
+        </div>
+      </div>
+      <a class="fab fab--primary" href="#contact" aria-label="Связаться">
+        <span class="fab-primary__ico" aria-hidden="true"></span>
+      </a>
+    </div>
+<div class="content-edit-fab-stack" aria-label="Правки контента" data-content-edit-ui>
+  <button
+    type="button"
+    class="fab fab--secondary glass-neutral content-edit-fab"
+    data-content-edit-mode-toggle
+    hidden
+    aria-pressed="false"
+    aria-label="Режим правок контента"
+    title="Режим правок"
+  >
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <path
+        d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0 0-3L16.5 4.5a2.12 2.12 0 0 0-3 0L3 15v5z"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linejoin="round"
+      />
+    </svg>
+    <span class="content-edit-fab__badge" hidden aria-hidden="true">0</span>
+  </button>
+</div>
+
+
+<main id="case-main" class="section section--tight">
+      <div class="section__inner case-article">
+        <p class="hero__eyebrow">Obsidian · Plugin</p>
+        <h1 class="case-page__h1">Колоночный вид — плагин для Obsidian</h1>
+        <p class="case-page__sub">Дизайн и разработка интерфейса для многоколоночной работы с заметками</p>
+
+        <p class="section__prose">
+          <!-- Здесь будет введение -->
+        </p>
+
+        <h2 id="context">Контекст</h2>
+        <p class="section__prose">
+          <!-- Контекст проекта -->
+        </p>
+
+        <h2 id="task">Задача</h2>
+        <p class="section__prose">
+          <!-- Описание задачи -->
+        </p>
+
+        <h2 id="solution">Решение</h2>
+        <p class="section__prose">
+          <!-- Что было сделано -->
+        </p>
+
+        <h3>Фильтр использования</h3>
+        <figure class="case-media">
+          <div class="case-video-shell">
+            <video controls preload="metadata" playsinline poster="../assets/obsidian-plugin-columns-view/filter use.webp" data-case-video-player style="display: block; width: 100%; height: auto">
+              <source src="../assets/obsidian-plugin-columns-view/filter use.webm" type="video/webm" />
+              <source src="../assets/obsidian-plugin-columns-view/filter use.mp4" type="video/mp4" />
+              Ваш браузер не поддерживает видео.
+            </video>
+          </div>
+          <figcaption>Фильтрация заметок в колоночном виде.</figcaption>
+        </figure>
+
+        <h3>Конфигурация отображения</h3>
+        <figure class="case-media">
+          <div class="case-video-shell">
+            <video controls preload="metadata" playsinline poster="../assets/obsidian-plugin-columns-view/view configure.webp" data-case-video-player style="display: block; width: 100%; height: auto">
+              <source src="../assets/obsidian-plugin-columns-view/view configure.webm" type="video/webm" />
+              <source src="../assets/obsidian-plugin-columns-view/view configure.mp4" type="video/mp4" />
+              Ваш браузер не поддерживает видео.
+            </video>
+          </div>
+          <figcaption>Настройка колонок и отображения.</figcaption>
+        </figure>
+
+        <h2 id="result">Результат</h2>
+        <p class="section__prose">
+          <!-- Итоги -->
+        </p>
+      </div>
+    </main>
+
+    <section id="projects" class="section section--surface">
+        <div class="section__inner">
+          <h2 class="section__title">Портфолио</h2>
+          <ol class="mini-projects-grid" data-mini-projects-list>
+            <li class="mini-projects-grid__item" data-mp-cells="3">
+              <a class="mp-card mp-card--link mp-card--stack" href="ai-platform-primo-rpa.html" aria-label="Платформа для работы с AI — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/ai-platform-primo-rpa/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Платформа для работы с AI</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями автоматизации и Smart OCR.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="3">
+              <a class="mp-card mp-card--link mp-card--stack" href="lunacy.html" aria-label="Графический редактор Lunacy — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/lunacy/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Графический редактор Lunacy</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Desktop App</li>
+                  </ul>
+                  <p class="mp-card__desc">Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и интерфейсной логики.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--stack" href="manu-game-maker.html" aria-label="Игровой движок MANU — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/manu-game-maker/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Игровой движок MANU</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">Product Design</li>
+                    <li class="mp-card__tag">Desktop App</li>
+                  </ul>
+                  <p class="mp-card__desc">Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и проработка сотен сложных пользовательских сценариев.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--stack" href="mobile-clinic-app.html" aria-label="Мобильное приложение для сети клиник — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/mobile-clinic-app/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Мобильное приложение для сети клиник</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Mobile App</li>
+                  </ul>
+                  <p class="mp-card__desc">Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом пользовательском пути, понятной навигации и быстром доступе к нужным действиям.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="orc-automation-panel.html" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Веб-панель для оркестрации автоматизаций</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под продакшен без остановки релизов.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="task-distribution-concept.html" aria-label="Концепт сервиса распределения задач — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Концепт сервиса распределения задач</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Analytics</li>
+                  </ul>
+                  <p class="mp-card__desc">Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность процессов и удобство командной работы.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="task-tracker.html" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Таск-трекер для бек-офис системы</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">Product Design</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по исполнителям; вкладки, фильтры, доска / список / таблица, Drag&amp;Drop.</p>
+                </div>
+              </a>
+            </li>
+          </ol>
+        </div>
+      </section><section hidden class="section section--surface" aria-hidden="true">
+        <div class="section__inner">
+          <div class="projects__heading">
+            <h2 class="section__title projects__title">Портфолио</h2>
+            <div class="projects__controls" aria-label="Навигация по карточкам портфолио">
+              <button type="button" class="projects__nav-btn" data-projects-prev aria-label="Прокрутить влево" aria-controls="projects-viewport">
+                <span class="projects__nav-ico projects__nav-ico--left" aria-hidden="true"></span>
+              </button>
+              <button type="button" class="projects__nav-btn" data-projects-next aria-label="Прокрутить вправо" aria-controls="projects-viewport">
+                <span class="projects__nav-ico projects__nav-ico--right" aria-hidden="true"></span>
+              </button>
+            </div>
+          </div>
+          <div class="projects-carousel">
+            <div id="projects-viewport" class="projects-carousel__viewport" data-projects-viewport>
+              <div class="projects-carousel__track">
+                <div class="projects-carousel__spacer" aria-hidden="true"></div>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="orc-automation-panel.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Веб-панель для оркестрации автоматизаций</h3>
+                      <p class="portfolio-card__summary">
+                        Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под
+                        продакшен без остановки релизов.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Web App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/orc-primo-rpa/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="ai-platform-primo-rpa.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Платформа для работы с AI</h3>
+                      <p class="portfolio-card__summary">
+                        Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями
+                        автоматизации и Smart OCR.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Web App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/ai-platform-primo-rpa/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="task-tracker.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Таск-трекер для бек-офис системы</h3>
+                      <p class="portfolio-card__summary">
+                        Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по
+                        исполнителям; вкладки, фильтры, виды доска / список / таблица, Drag&amp;Drop.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">Product Design</li>
+                        <li class="portfolio-card__tag">Web App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/task-tracker/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="manu-game-maker.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Игровой движок MANU</h3>
+                      <p class="portfolio-card__summary">
+                        Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и
+                        проработка сотен сложных пользовательских сценариев.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">Product Design</li>
+                        <li class="portfolio-card__tag">Desktop App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/manu-game-maker/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="lunacy.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Графический редактор Lunacy</h3>
+                      <p class="portfolio-card__summary">
+                        Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и
+                        интерфейсной логики.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Desktop App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/lunacy/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="mobile-clinic-app.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Мобильное приложение для сети клиник</h3>
+                      <p class="portfolio-card__summary">
+                        Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом
+                        пользовательском пути, понятной навигации и быстром доступе к нужным действиям.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Mobile App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/mobile-clinic-app/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="task-distribution-concept.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Концепт сервиса распределения задач</h3>
+                      <p class="portfolio-card__summary">
+                        Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность
+                        процессов и удобство командной работы.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Analytics</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/task-distribution-concept/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                
+                <div class="projects-carousel__spacer" aria-hidden="true"></div>
+              </div>
+            </div>
+            <button
+              type="button"
+              class="projects-carousel__edge-hit projects-carousel__edge-hit--left"
+              data-projects-edge-prev
+              aria-label="Прокрутить портфолио влево"
+            ></button>
+            <button
+              type="button"
+              class="projects-carousel__edge-hit projects-carousel__edge-hit--right"
+              data-projects-edge-next
+              aria-label="Прокрутить портфолио вправо"
+            ></button>
+          </div>
+        </div>
+      </section>
+
+<section id="contact" class="section section--surface section--footerish">
+      <div class="section__inner">
+        <h2 class="section__title">Контакты</h2>
+        <ul class="contact-grid">
+          <li><a class="contact-card contact-card--link contact-card--brand-tg" href="https://t.me/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../assets/shared/icons/tg.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Telegram</span><span class="contact-card__hint">Отвечу сегодня</span></span></a></li>
+          <li><a class="contact-card contact-card--link contact-card--brand-vk" href="https://vk.com/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../assets/shared/icons/vk.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">ВКонтакте</span><span class="contact-card__hint">Стабильный коннект</span></span></a></li>
+          <li><a class="contact-card contact-card--link contact-card--brand-ya" href="https://yandex.ru/chat/p/727e71fa-89b5-44a8-90a5-851021631a1c?utm_source=invite" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../assets/shared/icons/yandex_telemost.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Яндекс</span><span class="contact-card__hint">Да, тут тоже можно</span></span></a></li>
+          <li><button type="button" class="contact-card contact-card--action contact-card--brand-email" data-contact-copy data-email-b64="bmlrQG1hbWFkYWV2di5ydQ==" data-hint-default="Скопировать адрес" aria-label="Скопировать адрес электронной почты в буфер обмена"><span class="contact-card__corner contact-card__corner--copy" aria-hidden="true"></span><span class="contact-card__icon contact-card__icon--accent" aria-hidden="true"></span><span class="contact-card__body"><span class="contact-card__name">Почта</span><span class="contact-card__hint" data-contact-copy-hint>Скопировать адрес</span></span></button></li>
+        </ul>
+      </div>
+    </section>
+
+<section class="section section--surface" aria-hidden="true">
+      <div class="section__inner"></div>
+    </section>
+
+<footer class="footer">
+      <div class="footer__inner">
+        <span class="footer__chunk footer__chunk--date">© 2026<span class="footer__sep" aria-hidden="true"> · </span></span>
+        <span class="footer__chunk footer__chunk--main">Дизайн и разработка сайта — Николай Мамадаев</span>
+        <span class="footer__chunk footer__chunk--meta footer__attr"><span class="footer__sep" aria-hidden="true"> · </span><a href="../cases/design-system.html">Design System</a><span class="footer__sep" aria-hidden="true"> · </span><a href="../cookie-policy.html">Политика cookie</a></span>
+      </div>
+    </footer>
+
+<aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
+      <p class="cookie-notice__text">
+        Сайт использует cookie для комфортной работы. Подробнее — в
+        <a href="../cookie-policy.html" data-cookie-policy-link>политике cookie</a>.
+      </p>
+      <button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
+        <span>Принять</span>
+        <span class="cookie-notice__accept-icon" aria-hidden="true">
+          <img src="../assets/shared/icons/сookie.svg" alt="" width="20" height="20" loading="eager" decoding="async" />
+        </span>
+      </button>
+    </aside>
+
+<div id="nav-more-menu-floating" class="nav-more__floating" hidden data-nav-more-menu-floating aria-hidden="true"></div>
+
+
+  </body>
+</html>
diff --git a/public/cases/orc-automation-panel.html b/public/cases/orc-automation-panel.html
new file mode 100644
index 0000000..9f53dee
--- /dev/null
+++ b/public/cases/orc-automation-panel.html
@@ -0,0 +1,806 @@
+<!DOCTYPE html>
+<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta
+      name="description"
+      content="Кейс: редизайн веб-панели оркестратора Primo RPA — кураторство дизайна, внедрение Ant Design и Storybook, синхронизация токенов с Figma."
+    />
+    <title>Веб-панель для оркестрации автоматизаций — кейс</title>
+    <script>
+      (function () {
+        var FONT_CSS = {
+          merriweather: "../assets/fonts/merriweather.css",
+          geologica: "../assets/fonts/geologica.css",
+          mono: "../assets/fonts/mono.css",
+        };
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f !== "merriweather" && f !== "mono" && f !== "geologica") f = "merriweather";
+          d.dataset.font = f;
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+          var href = FONT_CSS[f];
+          if (href && !document.querySelector('link[data-theme-font="' + f + '"]')) {
+            var link = document.createElement("link");
+            link.rel = "stylesheet";
+            link.href = href;
+            link.setAttribute("data-theme-font", f);
+            document.head.appendChild(link);
+          }
+        } catch (e) {}
+      })();
+    </script>
+
+    <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon/favicon-16x16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="../assets/favicon/apple-touch-icon.png" />
+    <link rel="manifest" href="../assets/favicon/site.webmanifest" />
+    <link rel="preload" href="../assets/fonts/merriweather.css" as="style" />
+    <link rel="preload" href="../css/main.css" as="style" />
+    <link rel="preload" href="../js/skill-connectors.js" as="script" />
+    <link rel="modulepreload" href="../js/main.js" />
+    <link rel="stylesheet" href="../css/main.css" />
+    <script src="../js/skill-connectors.js" defer></script>
+    <script type="module" src="../js/main.js"></script>
+
+
+    <style>
+      .case-article {
+        max-width: 48rem;
+        margin: 0 auto;
+      }
+      .case-article h2 {
+        margin: 2rem 0 0.75rem;
+        font-size: clamp(1.15rem, 2vw, 1.35rem);
+        font-weight: 700;
+        color: var(--text);
+      }
+      .case-article h3 {
+        font-size: 1.05rem;
+        font-weight: 600;
+        color: var(--text);
+        margin: 1.25rem 0 0.5rem;
+      }
+      .case-article .section__prose {
+        margin-bottom: 0.75rem;
+        color: var(--text);
+      }
+      .case-article img {
+        display: block;
+        max-width: 100%;
+        height: auto;
+        margin: 0.75rem 0 1rem;
+      }
+      .case-article ul {
+        margin: 0.5rem 0 1rem 1.25rem;
+        padding: 0;
+      }
+      .case-article li {
+        margin-bottom: 0.35rem;
+      }
+      .case-article a:not(.btn) {
+        color: var(--accent);
+      }
+    </style>
+    <script>
+      (function () {
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f === "merriweather" || f === "mono" || f === "geologica") {
+            d.dataset.font = f;
+          } else {
+            d.dataset.font = "merriweather";
+          }
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+        } catch (e) {}
+      })();
+    </script>
+  </head>
+  <body>
+    <a class="skip-link" href="#case-main">К содержимому кейса</a>
+    <header class="header" data-theme-picker>
+      <div class="header__inner">
+        <a class="logo" href="../index.html" aria-label="На главную">НМ</a>
+        <div class="header__cluster">
+          <nav class="nav" aria-label="Навигация по странице">
+            <a href="#projects">Портфолио</a>
+            <a href="#contact">Контакты</a>
+          </nav>
+        </div>
+      </div>
+    </header>
+
+    <div class="fab-stack" aria-label="Быстрые действия">
+      <div class="theme-panel-fab-wrap">
+        <button type="button" class="fab fab--secondary glass-neutral" data-theme-panel-btn aria-expanded="false" aria-controls="theme-panel" aria-label="Настройки стиля">
+          <span class="theme-panel-fab__icon theme-panel-fab__icon--open-hide" aria-hidden="true"></span>
+          <svg class="theme-panel-fab__icon theme-panel-fab__icon--close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          </svg>
+        </button>
+        <div id="theme-panel" class="theme-picker__panel glass-neutral" role="dialog" aria-label="Тема и оформление" hidden data-theme-panel>
+          <div class="theme-picker__stack">
+            <section class="theme-picker__section" aria-labelledby="theme-accent-title">
+              <h3 id="theme-accent-title" class="theme-picker__section-title">Акцентный цвет</h3>
+              <div class="colorpicker" data-colorpicker>
+                <div class="colorpicker__plane-box">
+                  <canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Насыщенность и светлость акцента"></canvas>
+                  <div class="colorpicker__knob" data-sl-knob></div>
+                </div>
+                <div class="colorpicker__hue-wrap">
+                  <label class="colorpicker__hue-sr" for="theme-hue-slider">Оттенок акцента</label>
+                  <input id="theme-hue-slider" class="colorpicker__hue" type="range" min="0" max="360" value="210" data-hue-slider aria-valuemin="0" aria-valuemax="360" />
+                </div>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-mode-title">
+              <h3 id="theme-mode-title" class="theme-picker__section-title">Тема</h3>
+              <div class="radius-seg theme-mode-seg" role="radiogroup" aria-labelledby="theme-mode-title">
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="system" aria-label="Как в системе"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--system"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="light" aria-label="Светлая тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--light"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="dark" aria-label="Тёмная тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--dark"></span></span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-radius-title">
+              <h3 id="theme-radius-title" class="theme-picker__section-title">Скругление углов</h3>
+              <div class="radius-seg" role="radiogroup" aria-labelledby="theme-radius-title">
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="soft" aria-label="Слабое скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--soft"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="medium" aria-label="Среднее скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--medium"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="strong" aria-label="Сильное скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--strong"></span></span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-typography-title">
+              <h3 id="theme-typography-title" class="theme-picker__section-title">Типографика</h3>
+              <div class="radius-seg" role="radiogroup" aria-labelledby="theme-typography-title">
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="geologica" aria-label="Sans"><span class="theme-font-seg__label">Sans</span></button>
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="merriweather" aria-label="Sans Serif"><span class="theme-font-seg__label">Sans Serif</span></button>
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="mono" aria-label="Mono"><span class="theme-font-seg__label">Mono</span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-mesh-bg-title">
+              <h3 id="theme-mesh-bg-title" class="theme-picker__section-title">Фон страницы</h3>
+              <div class="radius-seg radius-seg--two" role="radiogroup" aria-labelledby="theme-mesh-bg-title">
+                <button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="on" aria-label="Показать фоновый градиент"><span class="theme-mesh-bg-seg__label">Вкл</span></button>
+                <button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="off" aria-label="Скрыть фоновый градиент"><span class="theme-mesh-bg-seg__label">Выкл</span></button>
+              </div>
+            </section>
+          </div>
+        </div>
+      </div>
+      <a class="fab fab--primary" href="#contact" aria-label="Связаться">
+        <span class="fab-primary__ico" aria-hidden="true"></span>
+      </a>
+    </div>
+<div class="content-edit-fab-stack" aria-label="Правки контента" data-content-edit-ui>
+  <button
+    type="button"
+    class="fab fab--secondary glass-neutral content-edit-fab"
+    data-content-edit-mode-toggle
+    hidden
+    aria-pressed="false"
+    aria-label="Режим правок контента"
+    title="Режим правок"
+  >
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <path
+        d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0 0-3L16.5 4.5a2.12 2.12 0 0 0-3 0L3 15v5z"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linejoin="round"
+      />
+    </svg>
+    <span class="content-edit-fab__badge" hidden aria-hidden="true">0</span>
+  </button>
+</div>
+
+
+    <main id="case-main" class="section section--tight">
+      <div class="section__inner case-article">
+        <p class="hero__eyebrow">Primo RPA · UX/UI · Web App</p>
+        <h1 class="case-page__h1">Веб-панель для оркестрации автоматизаций</h1>
+        <p class="case-page__sub">
+          Оркестратор Primo RPA: запуск роботов, проекты и контроль процессов в веб-кабинете для админов и разработчиков автоматизаций.
+        </p>
+
+        <div class="case-block" id="obzor">
+          <h2>Контекст</h2>
+          <p class="section__prose">
+            В стеке Primo RPA оркестратор отвечает за расписание, очередь и статусы RPA-роботов на инфраструктуре клиента. С ним работают не только из студии разработки, но и из браузера: смотрят проекты, перезапускают задания, разбирают сбои.
+          </p>
+          <p class="section__prose">
+            К тому моменту продукт уже был в эксплуатации, но интерфейс заметно устарел: пользователи сталкивались с неудобствами в навигации, визуальным шумом в таблицах и неочевидными сценариями в некоторых разделах. Задача стояла освежить вид интерфейса, сделать его современным и исправить накопившиеся UX-проблемы.
+          </p>
+        </div>
+
+        <div class="case-block" id="rol">
+          <h2>Роль и подход</h2>
+          <p class="section__prose">
+            Моя роль в этом проекте была скорее кураторской — я не делал дизайн самостоятельно, а выстраивал процесс так, чтобы команда дизайна и разработки работала слаженно.
+          </p>
+          <aside class="case-callout" data-callout>
+            <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">💡</span>
+            <div class="case-callout__content">
+              <p>Я изучил продукт «с нуля»: разобрался с интерфейсом оркестратора, нашёл болевые точки пользователей и сформулировал задачи для обновления.</p>
+            </div>
+          </aside>
+          <p class="section__prose">
+            Параллельно я искал дизайнера, который взял бы на себя основную визуальную работу. Отбор прошла Елизавета — среди более чем 150 заявок она лучше всего подходила под предстоящий фронт работ.
+          </p>
+          <p class="section__prose">
+            В течение трёх месяцев я погружал новую сотрудницу в детали проекта: ставил задачи, давал обратную связь по создаваемым макетам, делился контекстом по пользовательским сценариям. Вместе с командой разработки мы планировали порядок обновления дизайна сервиса — меняли экраны по приоритету, вкладывая изменения в текущие релизы, без «остановить всё и перерисовать».
+          </p>
+        </div>
+
+        <div class="case-block" id="tekhnicheskiy-stek">
+          <h2>Технический стек и инструменты</h2>
+          <p class="section__prose">
+            В качестве фреймворка для интерфейса был выбран <a href="https://ant.design/" target="_blank" rel="noopener noreferrer">Ant Design</a> последней версии. Он уже использовался в проекте, и его свежий релиз предлагал <a href="https://ant.design/theme-editor" target="_blank" rel="noopener noreferrer">Theme Editor</a> — возможность настраивать внешний вид компонентов через дизайн-токены без переопределения стилей вручную. Это давало и дизайнерам, и разработчикам единый язык описания интерфейса.
+          </p>
+          <p class="section__prose">
+            Единым источником правды и мостом между дизайном и разработкой стал <a href="https://storybook.js.org/" target="_blank" rel="noopener noreferrer">Storybook</a>. В нём компоненты были не просто задокументированы, а реально работали в изолированной среде — это позволяло дизайнерам видеть реализацию элементов вживую, а разработчикам — быстрее интегрировать компоненты в панель.
+          </p>
+        </div>
+
+        <div class="case-block" id="dizayn-sistema">
+          <h2>Дизайн-система и синхронизация</h2>
+          <p class="section__prose">
+            Для удобства работы мы синхронизировали токены из Ant Design с токенами в Figma — цвета, отступы, типографика и радиусы скругления были приведены к единым значениям. Работало это так: если в Figma токены обновлялись, их можно было выгрузить в JSON и без проблем сразу загрузить в код — вместо того, чтобы разработчик вручную искал изменения и правил каждый токен индивидуально. Такой подход также позволил смотреть на дизайн более системно.
+          </p>
+          <aside class="case-callout" data-callout>
+            <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">📌</span>
+            <div class="case-callout__content">
+              <p>Основная задача, которую решал подход такого тесного сотрудничества дизайна и разработки, — максимально точно перенести задуманное в прод и не растерять по пути мелочей.</p>
+            </div>
+          </aside>
+          <p class="section__prose">
+            Компоненты в Figma создавались с нуля — по референсам Ant Design, но без использования готовых библиотек. Отказ от готовых решений был осознанным: нам нужна была полная настройка под наш стиль работы и возможность использовать новые функции Figma, которые не поддерживались в библиотеках из сообщества Figma.
+          </p>
+          <p class="section__prose">
+            Для Storybook мы отобрали и настроили плагины, которые были уместны для наших задач — контроль доступности, просмотр состояний компонентов, переключение тем и локалей. Это сделало Storybook не просто витриной компонентов, а полноценным инструментом дизайн-ревью.
+          </p>
+        </div>
+
+        <div class="case-block" id="rabochaya-sreda">
+          <h2>Рабочая среда дизайнера</h2>
+          <p class="section__prose">
+            Мы настроили среду так, чтобы дизайнер мог видеть реализацию компонентов вживую у себя на компьютере, используя локальный Storybook и Git. Это позволяло точнее контролировать, как задуманный дизайн воплощается в коде, и оперативно замечать расхождения на ранних этапах.
+          </p>
+          <p class="section__prose">
+            Обсуждался также шаг ускорить поддержку Storybook тем, чтобы дизайнер сам мог описывать JSX для реализованного компонента — это сокращало путь от макета до документированного компонента в сторибуке.
+          </p>
+          <p class="section__prose">
+            Мы отладили рабочий процесс по передаче иконок в библиотеку. Особенность заключалась в том, чтобы иконки можно было отобразить в Storybook с фильтрацией и сортировкой. При этом дизайнер мог обновлять иконки без привлечения разработчика — просто пушил новые файлы в репозиторий.
+          </p>
+          <p class="section__prose">
+            Увидеть обновлённую иконку сразу в браузере позволяло лучше её оптимизировать и убрать косяки отображения при использовании булевых операций.
+          </p>
+          <p class="section__prose">
+            Для Figma также был разработан подход и правила, которые не только ограничивали дизайнера, но и позволяли гарантированно делать консистентные и рабочие иконки.
+          </p>
+        </div>
+
+        <div class="case-block" id="ux-uluchsheniya">
+          <h2>UX-улучшения</h2>
+          <p class="section__prose">
+            За время обновления интерфейса Елизавета предложила ещё и ряд улучшений пользовательского опыта. Часть из них была успешно внедрена — например, более понятная группировка элементов в сложных формах и переработанные состояния загрузки. Но в приоритете было не ломать старый UX, к которому привыкли пользователи, поэтому многие идеи сохранились в бэклог для следующей итерации.
+          </p>
+        </div>
+
+        <div class="case-block" id="proekty">
+          <h2>Список проектов</h2>
+          <p class="section__prose">
+            Таблица проектов — один из самых частых экранов. На старой версии много колонок, плотная сетка и мелкий текст: статус и имя проекта читаются с трудом, особенно на ноутбуке.
+          </p>
+          <p class="section__prose">В новой версии:</p>
+          <ul>
+            <li>колонки свели к тому, что нужно для ежедневной работы;</li>
+            <li>статусы и действия вынесли в предсказуемые зоны строки;</li>
+            <li>отступы и типографику подтянули под остальную панель на Ant Design.</li>
+          </ul>
+
+          <h3>Было</h3>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/orc-primo-rpa/projects--table-old.webp"
+              alt="Список проектов в оркестраторе — предыдущая версия таблицы"
+              width="1919"
+              height="867"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+          </figure>
+
+          <h3>Стало</h3>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/orc-primo-rpa/projects--table-new.webp"
+              alt="Список проектов в оркестраторе — обновлённая таблица"
+              width="1366"
+              height="768"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+          </figure>
+        </div>
+
+        <div class="case-block" id="itog">
+          <h2>Результаты и рефлексия</h2>
+          <p class="section__prose">
+            Экран проектов стал проще сканировать: меньше визуального шума, быстрее находить нужный проект и его состояние. После раскатывания нового дизайна среди нескольких клиентов мы получили положительные отзывы и множество идей для дальнейших улучшений.
+          </p>
+          <p class="section__prose">
+            Я оставил проект, когда Елизавета уже уверенно чувствовала себя в нём и могла самостоятельно вести дизайнерские задачи. Периодически я отвечал на точечные вопросы, но в целом передача прошла гладко.
+          </p>
+          <p class="section__prose">
+            Спустя год с небольшим процессы в команде заметно изменились. По словам ребят, в создании и передаче дизайна теперь активное участие принимают инструменты с нейросетями — такие как Claude Design. То, что мы начинали выстраивать вручную через токены, Storybook и синхронизацию сред, сейчас в какой-то мере автоматизируется.
+          </p>
+          <p class="section__prose">
+            Считаю, что проделанная работа была выполнена достаточно оперативно и качественно — в условиях постоянных изменений на рынке и внутри компании нам удалось не просто обновить интерфейс, но и выстроить устойчивый процесс, который продолжил работать уже без моего участия.
+          </p>
+        </div>
+      </div>
+    </main>
+
+    <section id="projects" class="section section--surface">
+        <div class="section__inner">
+          <h2 class="section__title">Портфолио</h2>
+          <ol class="mini-projects-grid" data-mini-projects-list>
+            <li class="mini-projects-grid__item" data-mp-cells="3">
+              <a class="mp-card mp-card--link mp-card--stack" href="ai-platform-primo-rpa.html" aria-label="Платформа для работы с AI — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/ai-platform-primo-rpa/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Платформа для работы с AI</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями автоматизации и Smart OCR.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="3">
+              <a class="mp-card mp-card--link mp-card--stack" href="lunacy.html" aria-label="Графический редактор Lunacy — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/lunacy/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Графический редактор Lunacy</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Desktop App</li>
+                  </ul>
+                  <p class="mp-card__desc">Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и интерфейсной логики.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--stack" href="manu-game-maker.html" aria-label="Игровой движок MANU — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/manu-game-maker/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Игровой движок MANU</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">Product Design</li>
+                    <li class="mp-card__tag">Desktop App</li>
+                  </ul>
+                  <p class="mp-card__desc">Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и проработка сотен сложных пользовательских сценариев.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--stack" href="mobile-clinic-app.html" aria-label="Мобильное приложение для сети клиник — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/mobile-clinic-app/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Мобильное приложение для сети клиник</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Mobile App</li>
+                  </ul>
+                  <p class="mp-card__desc">Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом пользовательском пути, понятной навигации и быстром доступе к нужным действиям.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="orc-automation-panel.html" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Веб-панель для оркестрации автоматизаций</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под продакшен без остановки релизов.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="task-distribution-concept.html" aria-label="Концепт сервиса распределения задач — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Концепт сервиса распределения задач</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Analytics</li>
+                  </ul>
+                  <p class="mp-card__desc">Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность процессов и удобство командной работы.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="task-tracker.html" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Таск-трекер для бек-офис системы</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">Product Design</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по исполнителям; вкладки, фильтры, доска / список / таблица, Drag&amp;Drop.</p>
+                </div>
+              </a>
+            </li>
+          </ol>
+        </div>
+      </section><section hidden class="section section--surface" aria-hidden="true">
+        <div class="section__inner">
+          <div class="projects__heading">
+            <h2 class="section__title projects__title">Портфолио</h2>
+            <div class="projects__controls" aria-label="Навигация по карточкам портфолио">
+              <button type="button" class="projects__nav-btn" data-projects-prev aria-label="Прокрутить влево" aria-controls="projects-viewport">
+                <span class="projects__nav-ico projects__nav-ico--left" aria-hidden="true"></span>
+              </button>
+              <button type="button" class="projects__nav-btn" data-projects-next aria-label="Прокрутить вправо" aria-controls="projects-viewport">
+                <span class="projects__nav-ico projects__nav-ico--right" aria-hidden="true"></span>
+              </button>
+            </div>
+          </div>
+          <div class="projects-carousel">
+            <div id="projects-viewport" class="projects-carousel__viewport" data-projects-viewport>
+              <div class="projects-carousel__track">
+                <div class="projects-carousel__spacer" aria-hidden="true"></div>
+                
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="ai-platform-primo-rpa.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Платформа для работы с AI</h3>
+                      <p class="portfolio-card__summary">
+                        Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями
+                        автоматизации и Smart OCR.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Web App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/ai-platform-primo-rpa/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="task-tracker.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Таск-трекер для бек-офис системы</h3>
+                      <p class="portfolio-card__summary">
+                        Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по
+                        исполнителям; вкладки, фильтры, виды доска / список / таблица, Drag&amp;Drop.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">Product Design</li>
+                        <li class="portfolio-card__tag">Web App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/task-tracker/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="manu-game-maker.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Игровой движок MANU</h3>
+                      <p class="portfolio-card__summary">
+                        Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и
+                        проработка сотен сложных пользовательских сценариев.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">Product Design</li>
+                        <li class="portfolio-card__tag">Desktop App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/manu-game-maker/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="lunacy.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Графический редактор Lunacy</h3>
+                      <p class="portfolio-card__summary">
+                        Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и
+                        интерфейсной логики.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Desktop App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/lunacy/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="mobile-clinic-app.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Мобильное приложение для сети клиник</h3>
+                      <p class="portfolio-card__summary">
+                        Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом
+                        пользовательском пути, понятной навигации и быстром доступе к нужным действиям.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Mobile App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/mobile-clinic-app/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="task-distribution-concept.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Концепт сервиса распределения задач</h3>
+                      <p class="portfolio-card__summary">
+                        Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность
+                        процессов и удобство командной работы.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Analytics</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/task-distribution-concept/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="obsidian-plugin-columns-view.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Колоночный вид — плагин для Obsidian</h3>
+                      <p class="portfolio-card__summary">
+                        Интерфейс для многоколоночной работы с заметками: удобная навигация, фильтрация и настройка
+                        колончатого отображения прямо в редакторе Obsidian.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Plugin</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/obsidian-plugin-columns-view/filter use.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <div class="projects-carousel__spacer" aria-hidden="true"></div>
+              </div>
+            </div>
+            <button
+              type="button"
+              class="projects-carousel__edge-hit projects-carousel__edge-hit--left"
+              data-projects-edge-prev
+              aria-label="Прокрутить портфолио влево"
+            ></button>
+            <button
+              type="button"
+              class="projects-carousel__edge-hit projects-carousel__edge-hit--right"
+              data-projects-edge-next
+              aria-label="Прокрутить портфолио вправо"
+            ></button>
+          </div>
+        </div>
+      </section>
+
+    <section id="contact" class="section section--surface section--footerish">
+      <div class="section__inner">
+        <h2 class="section__title">Контакты</h2>
+        <ul class="contact-grid">
+          <li><a class="contact-card contact-card--link contact-card--brand-tg" href="https://t.me/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../assets/shared/icons/tg.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Telegram</span><span class="contact-card__hint">Отвечу сегодня</span></span></a></li>
+          <li><a class="contact-card contact-card--link contact-card--brand-vk" href="https://vk.com/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../assets/shared/icons/vk.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">ВКонтакте</span><span class="contact-card__hint">Стабильный коннект</span></span></a></li>
+          <li><a class="contact-card contact-card--link contact-card--brand-ya" href="https://yandex.ru/chat/p/727e71fa-89b5-44a8-90a5-851021631a1c?utm_source=invite" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../assets/shared/icons/yandex_telemost.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Яндекс</span><span class="contact-card__hint">Да, тут тоже можно</span></span></a></li>
+          <li><button type="button" class="contact-card contact-card--action contact-card--brand-email" data-contact-copy data-email-b64="bmlrQG1hbWFkYWV2di5ydQ==" data-hint-default="Скопировать адрес" aria-label="Скопировать адрес электронной почты в буфер обмена"><span class="contact-card__corner contact-card__corner--copy" aria-hidden="true"></span><span class="contact-card__icon contact-card__icon--accent" aria-hidden="true"></span><span class="contact-card__body"><span class="contact-card__name">Почта</span><span class="contact-card__hint" data-contact-copy-hint>Скопировать адрес</span></span></button></li>
+        </ul>
+      </div>
+    </section>
+
+    <section class="section section--surface" aria-hidden="true">
+      <div class="section__inner"></div>
+    </section>
+
+    <footer class="footer">
+      <div class="footer__inner">
+        <span class="footer__chunk footer__chunk--date">© 2026<span class="footer__sep" aria-hidden="true"> · </span></span>
+        <span class="footer__chunk footer__chunk--main">Дизайн и разработка сайта — Николай Мамадаев</span>
+        <span class="footer__chunk footer__chunk--meta footer__attr"><span class="footer__sep" aria-hidden="true"> · </span><a href="../cases/design-system.html">Design System</a><span class="footer__sep" aria-hidden="true"> · </span><a href="../cookie-policy.html">Политика cookie</a></span>
+      </div>
+    </footer>
+
+    <aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
+      <p class="cookie-notice__text">
+        Сайт использует cookie для комфортной работы. Подробнее — в
+        <a href="../cookie-policy.html" data-cookie-policy-link>политике cookie</a>.
+      </p>
+      <button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
+        <span>Принять</span>
+        <span class="cookie-notice__accept-icon" aria-hidden="true">
+          <img src="../assets/shared/icons/сookie.svg" alt="" width="20" height="20" loading="eager" decoding="async" />
+        </span>
+      </button>
+    </aside>
+
+    <div id="nav-more-menu-floating" class="nav-more__floating" hidden data-nav-more-menu-floating aria-hidden="true"></div>
+
+  </body>
+</html>
diff --git a/public/cases/task-distribution-concept.html b/public/cases/task-distribution-concept.html
new file mode 100644
index 0000000..bfdec40
--- /dev/null
+++ b/public/cases/task-distribution-concept.html
@@ -0,0 +1,668 @@
+<!DOCTYPE html>
+<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta
+      name="description"
+      content="Кейс: концепт сервиса распределения задач — прозрачность процессов и командная работа."
+    />
+    <title>Концепт сервиса распределения задач — кейс</title>
+    <script>
+      (function () {
+        var FONT_CSS = {
+          merriweather: "../assets/fonts/merriweather.css",
+          geologica: "../assets/fonts/geologica.css",
+          mono: "../assets/fonts/mono.css",
+        };
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f !== "merriweather" && f !== "mono" && f !== "geologica") f = "merriweather";
+          d.dataset.font = f;
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+          var href = FONT_CSS[f];
+          if (href && !document.querySelector('link[data-theme-font="' + f + '"]')) {
+            var link = document.createElement("link");
+            link.rel = "stylesheet";
+            link.href = href;
+            link.setAttribute("data-theme-font", f);
+            document.head.appendChild(link);
+          }
+        } catch (e) {}
+      })();
+    </script>
+
+    <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon/favicon-16x16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="../assets/favicon/apple-touch-icon.png" />
+    <link rel="manifest" href="../assets/favicon/site.webmanifest" />
+    <link rel="preload" href="../assets/fonts/merriweather.css" as="style" />
+    <link rel="preload" href="../css/main.css" as="style" />
+    <link rel="preload" href="../js/skill-connectors.js" as="script" />
+    <link rel="modulepreload" href="../js/main.js" />
+    <link rel="stylesheet" href="../css/main.css" />
+    <script src="../js/skill-connectors.js" defer></script>
+    <script type="module" src="../js/main.js"></script>
+
+
+    <style>
+      .case-article {
+        max-width: 48rem;
+        margin: 0 auto;
+      }
+      .case-article h2 {
+        margin: 2rem 0 0.75rem;
+        font-size: clamp(1.15rem, 2vw, 1.35rem);
+        font-weight: 700;
+        color: var(--text);
+      }
+      .case-article .section__prose {
+        margin-bottom: 0.75rem;
+        color: var(--text);
+      }
+      .case-article a:not(.btn) {
+        color: var(--accent);
+      }
+    </style>
+    <script>
+      (function () {
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f === "merriweather" || f === "mono" || f === "geologica") {
+            d.dataset.font = f;
+          } else {
+            d.dataset.font = "merriweather";
+          }
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+        } catch (e) {}
+      })();
+    </script>
+  </head>
+  <body>
+    <a class="skip-link" href="#case-main">К содержимому кейса</a>
+    <header class="header" data-theme-picker>
+      <div class="header__inner">
+        <a class="logo" href="../index.html" aria-label="На главную">НМ</a>
+        <div class="header__cluster">
+          <nav class="nav" aria-label="Навигация по странице">
+            <a href="#projects">Портфолио</a>
+            <a href="#contact">Контакты</a>
+          </nav>
+        </div>
+      </div>
+    </header>
+
+<div class="fab-stack" aria-label="Быстрые действия">
+      <div class="theme-panel-fab-wrap">
+        <button type="button" class="fab fab--secondary glass-neutral" data-theme-panel-btn aria-expanded="false" aria-controls="theme-panel" aria-label="Настройки стиля">
+          <span class="theme-panel-fab__icon theme-panel-fab__icon--open-hide" aria-hidden="true"></span>
+          <svg class="theme-panel-fab__icon theme-panel-fab__icon--close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          </svg>
+        </button>
+        <div id="theme-panel" class="theme-picker__panel glass-neutral" role="dialog" aria-label="Тема и оформление" hidden data-theme-panel>
+          <div class="theme-picker__stack">
+            <section class="theme-picker__section" aria-labelledby="theme-accent-title">
+              <h3 id="theme-accent-title" class="theme-picker__section-title">Акцентный цвет</h3>
+              <div class="colorpicker" data-colorpicker>
+                <div class="colorpicker__plane-box">
+                  <canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Насыщенность и светлость акцента"></canvas>
+                  <div class="colorpicker__knob" data-sl-knob></div>
+                </div>
+                <div class="colorpicker__hue-wrap">
+                  <label class="colorpicker__hue-sr" for="theme-hue-slider">Оттенок акцента</label>
+                  <input id="theme-hue-slider" class="colorpicker__hue" type="range" min="0" max="360" value="210" data-hue-slider aria-valuemin="0" aria-valuemax="360" />
+                </div>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-mode-title">
+              <h3 id="theme-mode-title" class="theme-picker__section-title">Тема</h3>
+              <div class="radius-seg theme-mode-seg" role="radiogroup" aria-labelledby="theme-mode-title">
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="system" aria-label="Как в системе"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--system"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="light" aria-label="Светлая тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--light"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="dark" aria-label="Тёмная тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--dark"></span></span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-radius-title">
+              <h3 id="theme-radius-title" class="theme-picker__section-title">Скругление углов</h3>
+              <div class="radius-seg" role="radiogroup" aria-labelledby="theme-radius-title">
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="soft" aria-label="Слабое скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--soft"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="medium" aria-label="Среднее скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--medium"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="strong" aria-label="Сильное скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--strong"></span></span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-typography-title">
+              <h3 id="theme-typography-title" class="theme-picker__section-title">Типографика</h3>
+              <div class="radius-seg" role="radiogroup" aria-labelledby="theme-typography-title">
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="geologica" aria-label="Sans"><span class="theme-font-seg__label">Sans</span></button>
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="merriweather" aria-label="Sans Serif"><span class="theme-font-seg__label">Sans Serif</span></button>
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="mono" aria-label="Mono"><span class="theme-font-seg__label">Mono</span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-mesh-bg-title">
+              <h3 id="theme-mesh-bg-title" class="theme-picker__section-title">Фон страницы</h3>
+              <div class="radius-seg radius-seg--two" role="radiogroup" aria-labelledby="theme-mesh-bg-title">
+                <button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="on" aria-label="Показать фоновый градиент"><span class="theme-mesh-bg-seg__label">Вкл</span></button>
+                <button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="off" aria-label="Скрыть фоновый градиент"><span class="theme-mesh-bg-seg__label">Выкл</span></button>
+              </div>
+            </section>
+          </div>
+        </div>
+      </div>
+      <a class="fab fab--primary" href="#contact" aria-label="Связаться">
+        <span class="fab-primary__ico" aria-hidden="true"></span>
+      </a>
+    </div>
+<div class="content-edit-fab-stack" aria-label="Правки контента" data-content-edit-ui>
+  <button
+    type="button"
+    class="fab fab--secondary glass-neutral content-edit-fab"
+    data-content-edit-mode-toggle
+    hidden
+    aria-pressed="false"
+    aria-label="Режим правок контента"
+    title="Режим правок"
+  >
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <path
+        d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0 0-3L16.5 4.5a2.12 2.12 0 0 0-3 0L3 15v5z"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linejoin="round"
+      />
+    </svg>
+    <span class="content-edit-fab__badge" hidden aria-hidden="true">0</span>
+  </button>
+</div>
+
+
+<main id="case-main" class="section section--tight">
+      <div class="section__inner case-article">
+        <p class="hero__eyebrow">UX/UI · Analytics</p>
+        <h1 class="case-page__h1">Концепт сервиса распределения задач</h1>
+        <p class="case-page__sub">
+          Продуктовый концепт: постановка, распределение и отслеживание задач с акцентом на прозрачность процессов и удобство командной работы.
+        </p>
+        <p class="section__prose">
+          Задача концепта — показать, как команда видит поток работ без «чёрных ящиков»: кто что взял, где узкие места и какие статусы критичны для следующего шага.
+        </p>
+        <p class="section__prose">
+          Детальный кейс появится здесь позже; страница уже связана с карточкой в портфолио на сайте.
+        </p>
+        <h2>Обложка</h2>
+        <figure class="case-media case-media--wide">
+          <img
+            src="../assets/task-distribution-concept/cover.webp"
+            alt="Концепт сервиса распределения задач — обложка кейса"
+            width="1200"
+            height="675"
+            loading="lazy"
+            decoding="async"
+            data-image-viewer
+          />
+          <figcaption>Текущее превью для карточки портфолио</figcaption>
+        </figure>
+      </div>
+    </main>
+
+    <section id="projects" class="section section--surface">
+        <div class="section__inner">
+          <h2 class="section__title">Портфолио</h2>
+          <ol class="mini-projects-grid" data-mini-projects-list>
+            <li class="mini-projects-grid__item" data-mp-cells="3">
+              <a class="mp-card mp-card--link mp-card--stack" href="ai-platform-primo-rpa.html" aria-label="Платформа для работы с AI — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/ai-platform-primo-rpa/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Платформа для работы с AI</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями автоматизации и Smart OCR.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="3">
+              <a class="mp-card mp-card--link mp-card--stack" href="lunacy.html" aria-label="Графический редактор Lunacy — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/lunacy/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Графический редактор Lunacy</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Desktop App</li>
+                  </ul>
+                  <p class="mp-card__desc">Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и интерфейсной логики.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--stack" href="manu-game-maker.html" aria-label="Игровой движок MANU — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/manu-game-maker/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Игровой движок MANU</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">Product Design</li>
+                    <li class="mp-card__tag">Desktop App</li>
+                  </ul>
+                  <p class="mp-card__desc">Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и проработка сотен сложных пользовательских сценариев.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--stack" href="mobile-clinic-app.html" aria-label="Мобильное приложение для сети клиник — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/mobile-clinic-app/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Мобильное приложение для сети клиник</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Mobile App</li>
+                  </ul>
+                  <p class="mp-card__desc">Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом пользовательском пути, понятной навигации и быстром доступе к нужным действиям.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="orc-automation-panel.html" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Веб-панель для оркестрации автоматизаций</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под продакшен без остановки релизов.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="task-distribution-concept.html" aria-label="Концепт сервиса распределения задач — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Концепт сервиса распределения задач</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Analytics</li>
+                  </ul>
+                  <p class="mp-card__desc">Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность процессов и удобство командной работы.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="task-tracker.html" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Таск-трекер для бек-офис системы</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">Product Design</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по исполнителям; вкладки, фильтры, доска / список / таблица, Drag&amp;Drop.</p>
+                </div>
+              </a>
+            </li>
+          </ol>
+        </div>
+      </section><section hidden class="section section--surface" aria-hidden="true">
+        <div class="section__inner">
+          <div class="projects__heading">
+            <h2 class="section__title projects__title">Портфолио</h2>
+            <div class="projects__controls" aria-label="Навигация по карточкам портфолио">
+              <button type="button" class="projects__nav-btn" data-projects-prev aria-label="Прокрутить влево" aria-controls="projects-viewport">
+                <span class="projects__nav-ico projects__nav-ico--left" aria-hidden="true"></span>
+              </button>
+              <button type="button" class="projects__nav-btn" data-projects-next aria-label="Прокрутить вправо" aria-controls="projects-viewport">
+                <span class="projects__nav-ico projects__nav-ico--right" aria-hidden="true"></span>
+              </button>
+            </div>
+          </div>
+          <div class="projects-carousel">
+            <div id="projects-viewport" class="projects-carousel__viewport" data-projects-viewport>
+              <div class="projects-carousel__track">
+                <div class="projects-carousel__spacer" aria-hidden="true"></div>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="orc-automation-panel.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Веб-панель для оркестрации автоматизаций</h3>
+                      <p class="portfolio-card__summary">
+                        Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под
+                        продакшен без остановки релизов.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Web App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/orc-primo-rpa/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="ai-platform-primo-rpa.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Платформа для работы с AI</h3>
+                      <p class="portfolio-card__summary">
+                        Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями
+                        автоматизации и Smart OCR.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Web App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/ai-platform-primo-rpa/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="task-tracker.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Таск-трекер для бек-офис системы</h3>
+                      <p class="portfolio-card__summary">
+                        Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по
+                        исполнителям; вкладки, фильтры, виды доска / список / таблица, Drag&amp;Drop.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">Product Design</li>
+                        <li class="portfolio-card__tag">Web App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/task-tracker/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="manu-game-maker.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Игровой движок MANU</h3>
+                      <p class="portfolio-card__summary">
+                        Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и
+                        проработка сотен сложных пользовательских сценариев.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">Product Design</li>
+                        <li class="portfolio-card__tag">Desktop App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/manu-game-maker/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="lunacy.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Графический редактор Lunacy</h3>
+                      <p class="portfolio-card__summary">
+                        Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и
+                        интерфейсной логики.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Desktop App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/lunacy/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="mobile-clinic-app.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Мобильное приложение для сети клиник</h3>
+                      <p class="portfolio-card__summary">
+                        Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом
+                        пользовательском пути, понятной навигации и быстром доступе к нужным действиям.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Mobile App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/mobile-clinic-app/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="obsidian-plugin-columns-view.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Колоночный вид — плагин для Obsidian</h3>
+                      <p class="portfolio-card__summary">
+                        Интерфейс для многоколоночной работы с заметками: удобная навигация, фильтрация и настройка
+                        колончатого отображения прямо в редакторе Obsidian.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Plugin</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/obsidian-plugin-columns-view/filter use.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <div class="projects-carousel__spacer" aria-hidden="true"></div>
+              </div>
+            </div>
+            <button
+              type="button"
+              class="projects-carousel__edge-hit projects-carousel__edge-hit--left"
+              data-projects-edge-prev
+              aria-label="Прокрутить портфолио влево"
+            ></button>
+            <button
+              type="button"
+              class="projects-carousel__edge-hit projects-carousel__edge-hit--right"
+              data-projects-edge-next
+              aria-label="Прокрутить портфолио вправо"
+            ></button>
+          </div>
+        </div>
+      </section>
+
+<section id="contact" class="section section--surface section--footerish">
+      <div class="section__inner">
+        <h2 class="section__title">Контакты</h2>
+        <ul class="contact-grid">
+          <li><a class="contact-card contact-card--link contact-card--brand-tg" href="https://t.me/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../assets/shared/icons/tg.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Telegram</span><span class="contact-card__hint">Отвечу сегодня</span></span></a></li>
+          <li><a class="contact-card contact-card--link contact-card--brand-vk" href="https://vk.com/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../assets/shared/icons/vk.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">ВКонтакте</span><span class="contact-card__hint">Стабильный коннект</span></span></a></li>
+          <li><a class="contact-card contact-card--link contact-card--brand-ya" href="https://yandex.ru/chat/p/727e71fa-89b5-44a8-90a5-851021631a1c?utm_source=invite" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../assets/shared/icons/yandex_telemost.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Яндекс</span><span class="contact-card__hint">Да, тут тоже можно</span></span></a></li>
+          <li><button type="button" class="contact-card contact-card--action contact-card--brand-email" data-contact-copy data-email-b64="bmlrQG1hbWFkYWV2di5ydQ==" data-hint-default="Скопировать адрес" aria-label="Скопировать адрес электронной почты в буфер обмена"><span class="contact-card__corner contact-card__corner--copy" aria-hidden="true"></span><span class="contact-card__icon contact-card__icon--accent" aria-hidden="true"></span><span class="contact-card__body"><span class="contact-card__name">Почта</span><span class="contact-card__hint" data-contact-copy-hint>Скопировать адрес</span></span></button></li>
+        </ul>
+      </div>
+    </section>
+
+<section class="section section--surface" aria-hidden="true">
+      <div class="section__inner"></div>
+    </section>
+
+<footer class="footer">
+      <div class="footer__inner">
+        <span class="footer__chunk footer__chunk--date">© 2026<span class="footer__sep" aria-hidden="true"> · </span></span>
+        <span class="footer__chunk footer__chunk--main">Дизайн и разработка сайта — Николай Мамадаев</span>
+        <span class="footer__chunk footer__chunk--meta footer__attr"><span class="footer__sep" aria-hidden="true"> · </span><a href="../cases/design-system.html">Design System</a><span class="footer__sep" aria-hidden="true"> · </span><a href="../cookie-policy.html">Политика cookie</a></span>
+      </div>
+    </footer>
+
+<aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
+      <p class="cookie-notice__text">
+        Сайт использует cookie для комфортной работы. Подробнее — в
+        <a href="../cookie-policy.html" data-cookie-policy-link>политике cookie</a>.
+      </p>
+      <button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
+        <span>Принять</span>
+        <span class="cookie-notice__accept-icon" aria-hidden="true">
+          <img src="../assets/shared/icons/сookie.svg" alt="" width="20" height="20" loading="eager" decoding="async" />
+        </span>
+      </button>
+    </aside>
+
+<div id="nav-more-menu-floating" class="nav-more__floating" hidden data-nav-more-menu-floating aria-hidden="true"></div>
+
+
+  </body>
+</html>
diff --git a/public/cases/task-tracker.html b/public/cases/task-tracker.html
new file mode 100644
index 0000000..f6c8a30
--- /dev/null
+++ b/public/cases/task-tracker.html
@@ -0,0 +1,1099 @@
+<!DOCTYPE html>
+<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta
+      name="description"
+      content="Интерфейс задач для операционного отдела: вкладки, фильтры, виды отображения, прототипы Figma и сценарии исследований."
+    />
+    <title>Таск-трекер для бек-офис системы — кейс</title>
+    <script>
+      (function () {
+        var FONT_CSS = {
+          merriweather: "../assets/fonts/merriweather.css",
+          geologica: "../assets/fonts/geologica.css",
+          mono: "../assets/fonts/mono.css",
+        };
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f !== "merriweather" && f !== "mono" && f !== "geologica") f = "merriweather";
+          d.dataset.font = f;
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+          var href = FONT_CSS[f];
+          if (href && !document.querySelector('link[data-theme-font="' + f + '"]')) {
+            var link = document.createElement("link");
+            link.rel = "stylesheet";
+            link.href = href;
+            link.setAttribute("data-theme-font", f);
+            document.head.appendChild(link);
+          }
+        } catch (e) {}
+      })();
+    </script>
+
+    <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon/favicon-16x16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="../assets/favicon/apple-touch-icon.png" />
+    <link rel="manifest" href="../assets/favicon/site.webmanifest" />
+    <link rel="preload" href="../assets/fonts/merriweather.css" as="style" />
+    <link rel="preload" href="../css/main.css" as="style" />
+    <link rel="preload" href="../js/skill-connectors.js" as="script" />
+    <link rel="modulepreload" href="../js/main.js" />
+    <link rel="stylesheet" href="../css/main.css" />
+    <script src="../js/skill-connectors.js" defer></script>
+    <script type="module" src="../js/main.js"></script>
+
+
+        <link rel="stylesheet" href="../vendor/plyr/plyr.css" />
+
+    <style>
+      .case-article {
+        max-width: 48rem;
+        margin: 0 auto;
+      }
+      .case-article h2 {
+        margin: 2rem 0 0.75rem;
+        font-size: clamp(1.15rem, 2vw, 1.35rem);
+        font-weight: 700;
+        color: var(--text);
+      }
+      .case-article h3 {
+        font-size: 1.05rem;
+        font-weight: 600;
+        color: var(--text);
+      }
+      .case-article .section__prose {
+        margin-bottom: 0.75rem;
+        color: var(--text);
+      }
+      .case-article img,
+      .case-article video {
+        display: block;
+        max-width: 100%;
+        height: auto;
+        margin: 0.75rem 0 1rem;
+      }
+      .case-article ul,
+      .case-article ol {
+        margin: 0.5rem 0 1rem 1.25rem;
+        padding: 0;
+      }
+      .case-article li {
+        margin-bottom: 0.35rem;
+      }
+      .case-article a:not(.btn) {
+        color: var(--accent);
+      }
+    </style>
+    <script>
+      (function () {
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f === "merriweather" || f === "mono" || f === "geologica") {
+            d.dataset.font = f;
+          } else {
+            d.dataset.font = "merriweather";
+          }
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+        } catch (e) {}
+      })();
+    </script>
+  </head>
+  <body>
+    <a class="skip-link" href="#case-main">К содержимому кейса</a>
+    <header class="header" data-theme-picker>
+      <div class="header__inner">
+        <a class="logo" href="../index.html" aria-label="На главную">НМ</a>
+        <div class="header__cluster">
+          <nav class="nav" aria-label="Навигация по странице">
+            <a href="#projects">Портфолио</a>
+            <a href="#contact">Контакты</a>
+          </nav>
+        </div>
+      </div>
+    </header>
+
+<div class="fab-stack" aria-label="Быстрые действия">
+      <div class="theme-panel-fab-wrap">
+        <button type="button" class="fab fab--secondary glass-neutral" data-theme-panel-btn aria-expanded="false" aria-controls="theme-panel" aria-label="Настройки стиля">
+          <span class="theme-panel-fab__icon theme-panel-fab__icon--open-hide" aria-hidden="true"></span>
+          <svg class="theme-panel-fab__icon theme-panel-fab__icon--close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          </svg>
+        </button>
+        <div id="theme-panel" class="theme-picker__panel glass-neutral" role="dialog" aria-label="Тема и оформление" hidden data-theme-panel>
+          <div class="theme-picker__stack">
+            <section class="theme-picker__section" aria-labelledby="theme-accent-title">
+              <h3 id="theme-accent-title" class="theme-picker__section-title">Акцентный цвет</h3>
+              <div class="colorpicker" data-colorpicker>
+                <div class="colorpicker__plane-box">
+                  <canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Насыщенность и светлость акцента"></canvas>
+                  <div class="colorpicker__knob" data-sl-knob></div>
+                </div>
+                <div class="colorpicker__hue-wrap">
+                  <label class="colorpicker__hue-sr" for="theme-hue-slider">Оттенок акцента</label>
+                  <input id="theme-hue-slider" class="colorpicker__hue" type="range" min="0" max="360" value="210" data-hue-slider aria-valuemin="0" aria-valuemax="360" />
+                </div>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-mode-title">
+              <h3 id="theme-mode-title" class="theme-picker__section-title">Тема</h3>
+              <div class="radius-seg theme-mode-seg" role="radiogroup" aria-labelledby="theme-mode-title">
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="system" aria-label="Как в системе"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--system"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="light" aria-label="Светлая тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--light"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="dark" aria-label="Тёмная тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--dark"></span></span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-radius-title">
+              <h3 id="theme-radius-title" class="theme-picker__section-title">Скругление углов</h3>
+              <div class="radius-seg" role="radiogroup" aria-labelledby="theme-radius-title">
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="soft" aria-label="Слабое скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--soft"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="medium" aria-label="Среднее скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--medium"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="strong" aria-label="Сильное скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--strong"></span></span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-typography-title">
+              <h3 id="theme-typography-title" class="theme-picker__section-title">Типографика</h3>
+              <div class="radius-seg" role="radiogroup" aria-labelledby="theme-typography-title">
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="geologica" aria-label="Sans"><span class="theme-font-seg__label">Sans</span></button>
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="merriweather" aria-label="Sans Serif"><span class="theme-font-seg__label">Sans Serif</span></button>
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="mono" aria-label="Mono"><span class="theme-font-seg__label">Mono</span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-mesh-bg-title">
+              <h3 id="theme-mesh-bg-title" class="theme-picker__section-title">Фон страницы</h3>
+              <div class="radius-seg radius-seg--two" role="radiogroup" aria-labelledby="theme-mesh-bg-title">
+                <button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="on" aria-label="Показать фоновый градиент"><span class="theme-mesh-bg-seg__label">Вкл</span></button>
+                <button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="off" aria-label="Скрыть фоновый градиент"><span class="theme-mesh-bg-seg__label">Выкл</span></button>
+              </div>
+            </section>
+          </div>
+        </div>
+      </div>
+      <a class="fab fab--primary" href="#contact" aria-label="Связаться">
+        <span class="fab-primary__ico" aria-hidden="true"></span>
+      </a>
+    </div>
+<div class="content-edit-fab-stack" aria-label="Правки контента" data-content-edit-ui>
+  <button
+    type="button"
+    class="fab fab--secondary glass-neutral content-edit-fab"
+    data-content-edit-mode-toggle
+    hidden
+    aria-pressed="false"
+    aria-label="Режим правок контента"
+    title="Режим правок"
+  >
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <path
+        d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0 0-3L16.5 4.5a2.12 2.12 0 0 0-3 0L3 15v5z"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linejoin="round"
+      />
+    </svg>
+    <span class="content-edit-fab__badge" hidden aria-hidden="true">0</span>
+  </button>
+</div>
+
+
+<main id="case-main" class="section section--tight">
+      <div class="section__inner case-article">
+        <p class="hero__eyebrow">Тестовое задание · back-office</p>
+        <h1 class="case-page__h1">Таск-трекер для внутренней бек-офис системы</h1>
+        <h2 id="zadanie">Задание</h2>
+        <p class="section__prose">
+          Реализовать интерфейс для планирования и распределения задач между сотрудниками операционного отдела, работающими в некой бек-офис системе. Существует большое количество разноплановых задач, которые можно сгруппировать: Тип-1, Тип-2, Тип-3, Тип-4, Тип-5, Тип-6, Тип-7. У каждой задачи есть свой, выставляемый автоматически, приоритет. Пользователю доступны только задачи из определенных категорий.
+        </p>
+        <p class="section__prose">Нужно реализовать:</p>
+        <ul>
+          <li>
+            Общий экран:
+            <ul>
+              <li>где пользователь может посмотреть все открытые общие задачи и взять какие-то себе.</li>
+              <li>персональный ToDo лист, где отображаются как взятые вручную задачи, так и автоматически назначенные.</li>
+              <li>у взятой задачи есть возможность передать ее другому сотруднику или вернуть в общий список.</li>
+            </ul>
+          </li>
+          <li>Экран, где можно посмотреть, что у кого в работе.</li>
+        </ul>
+
+        <h2 id="vvedenie">Введение</h2>
+        <p class="section__prose">
+          Так как у меня лично есть обширный опыт работы с таск-трекерами, то я опираюсь на свой опыт и опыт моих коллег с учётом требований задания.
+        </p>
+
+        <h2 id="referensy">Референсы</h2>
+        <figure class="case-media case-media--wide">
+          <img src="../assets/task-tracker/refs.webp" alt="Референсы" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
+        </figure>
+        <ul>
+          <li>Таск-трекеры (Trello, Monday, YouTrack и др.)</li>
+          <li>Сервисы для визуальной работы с базами данных (Notion, Airtable и др.)</li>
+        </ul>
+
+        <h2 id="reshenie">Решение</h2>
+
+        <h3 id="skrinkast">Скринкаст</h3>
+        <figure class="case-media" style="margin: 0.85rem 0 1.2rem">
+          <div class="case-video-shell">
+            <video controls preload="metadata" playsinline poster="../assets/task-tracker/full_preview.webp" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
+              <source src="../assets/task-tracker/full_preview.webm" type="video/webm" />
+              <source src="../assets/task-tracker/full_preview.mp4" type="video/mp4" />
+              Ваш браузер не поддерживает видео.
+            </video>
+          </div>
+        </figure>
+        <div class="case-links-grid">
+          <a
+            class="case-link-card"
+            href="https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN-(Factoring)?page-id=0%3A1&amp;node-id=20%3A1291&amp;viewport=-5744%2C876%2C1.35&amp;scaling=contain&amp;starting-point-node-id=20%3A1291"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span class="case-link-card__media">
+              <img src="../assets/task-tracker/tab_all-tasks.webp" alt="Превью прототипа Figma" width="1200" height="800" loading="lazy" decoding="async" />
+            </span>
+            <span class="case-link-card__body">
+              <span class="case-link-card__title">Прототип Figma</span>
+              <span class="case-link-card__meta">Интерактивный сценарий по задачам и представлениям</span>
+              <span class="case-link-card__url">figma.com/proto/.../STENN-(Factoring)</span>
+            </span>
+          </a>
+        </div>
+        <aside class="case-callout" data-callout>
+          <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">📌</span>
+          <div class="case-callout__content">
+            <p>Предполагается, что сотрудник не может создавать задачи, но может их просматривать и частично редактировать, поэтому администратор или менеджер настраивает, какие задачи будут доступны сотруднику.</p>
+          </div>
+        </aside>
+
+        <h3 id="tabs">Вкладки (Tabs)</h3>
+        <p class="section__prose">На вкладке <strong>All tasks</strong> сотрудник может ознакомиться со всеми доступными задачами.</p>
+        <figure class="case-media case-media--wide">
+          <img src="../assets/task-tracker/tab_all-tasks.webp" alt="Untitled" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
+        </figure>
+        <p class="section__prose">
+          На вкладке <strong>My tasks</strong> отображаются только те задачи, что закреплены за текущим сотрудником. Группировка идёт по статусам задач (статус в карточке задачи скрыт).
+        </p>
+        <figure class="case-media case-media--wide">
+          <img src="../assets/task-tracker/tab_my-tasks.webp" alt="Untitled" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
+        </figure>
+        <p class="section__prose">На вкладке <strong>Task by assign</strong> отображены все задачи c разбивкой по исполнителю.</p>
+        <figure class="case-media case-media--wide">
+          <img src="../assets/task-tracker/tab_tasks-by-assign.webp" alt="Untitled" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
+        </figure>
+        <p class="section__prose">В правой части имеются опции для текущей вкладки.</p>
+        <figure class="case-media case-media--natural">
+          <img src="../assets/task-tracker/actions_for_page.webp" alt="Untitled" width="1200" height="800" loading="lazy" decoding="async" />
+        </figure>
+        <p class="section__prose">
+          Все изменения сохраняются после ухода с вкладки и после закрытия всей страницы <strong>Tasks</strong>. Эти настройки индивидуальны и каждый сотрудник может настроить страницу как ему удобно.
+        </p>
+        <ul>
+          <li>Group - позволяет создать дополнительную группировку по свойству таски (категория, приоритет, исполнитель, статус, дата создания, дата изменения).</li>
+          <li>View - позволяет изменить отображение текущих задач на другой вид: доска, список, таблица.</li>
+          <li>Filter - позволяет скрывать задачи по свойствам.</li>
+          <li>
+            Sort - позволяет определять порядок отображения задач по свойствам. Если включена сортировка по статусу High, Medium, Low то можно выбрать либо по алфавиту, либо в обратном порядке, а также можно создать свой порядок. С датами и цифрами работает принцип по возрастанию/убыванию.
+          </li>
+          <li>
+            Search on page - позволяет отобразить только те задачи, в названии или описании которых есть поисковое слово или фраза. (Можно улучшить функционал поиска, добавив поисковые операторы, если исследования докажут эту необходимость)
+          </li>
+        </ul>
+        <p class="section__prose">
+          На странице работает постепенная подгрузка задач. По мере скрола вниз, будут подгружаться новые задачи. Кол-во задач указывается в заголовках, это может быть полезно, чтобы оценить как далеко надо скролить, чтобы все посмотреть. Задач может быть очень много и тогда возможно имеет смысл добавить ещё и переход по страницам.
+        </p>
+
+        <h3 id="views">Варианты отображения (Views)</h3>
+        <p class="section__prose">
+          Разные виды отображения одних и тех же задач могут быть полезны для разных контекстов использования страницы <strong>Tasks</strong> и также в угоду личным предпочтениям сотрудника, что повышает его эффективность. Сотрудник, которого не раздражает интерфейс работает продуктивнее и приносит больше пользы.
+        </p>
+        <figure class="case-media case-media--natural">
+          <img src="../assets/task-tracker/dropdown_menu_for_views.webp" alt="Untitled" width="1200" height="800" loading="lazy" decoding="async" />
+        </figure>
+        <aside class="case-callout" data-callout>
+          <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">💡</span>
+          <div class="case-callout__content">
+            <p>После смены вида также меняется иконка у опции <strong>View</strong>.</p>
+          </div>
+        </aside>
+        <p class="section__prose">
+          Вид <strong>Board</strong> позволяет удобнее работать с функцией Drag&amp;Drop (см. ниже). Также визуально легче определить кол-во задач в категории, подразумеваю что это может быть полезно. В случае использования группировки задач по статусам выполнения, перемещение карточек слева направо создаёт естественное горизонтальное течение задач из точки А в точку Б.
+        </p>
+        <figure class="case-media case-media--wide">
+          <img src="../assets/task-tracker/view_board.webp" alt="Untitled" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
+        </figure>
+        <p class="section__prose">
+          Вид <strong>List</strong> позволяет увидеть больше информации на меньшей площади экрана. При этом этот вид визуально и функционально легче табличного вида, а значит меньше когнитивной нагрузки на пользователя. Также здесь все заголовки задач начинаются в крайнем левом положении, поэтому становится легко <em>пробежаться глазами</em> по списку.
+        </p>
+        <figure class="case-media case-media--wide">
+          <img src="../assets/task-tracker/view_list.webp" alt="Untitled" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
+        </figure>
+        <p class="section__prose">
+          Вид <strong>Table</strong> позволяет сразу же работать со всеми полями задачи, без раскрытия её в модальном окне или отдельной странице. Таблица подразумевает пользовательскую настройку ширины и порядка столбцов, что может быть удобно в некоторых кейсах использования.
+        </p>
+        <figure class="case-media case-media--wide">
+          <img src="../assets/task-tracker/view_table.webp" alt="Untitled" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
+        </figure>
+        <aside class="case-callout" data-callout>
+          <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">💡</span>
+          <div class="case-callout__content">
+            <p>Секции можно сворачивать, чтобы уместить на экране только нужный объём контента. (Может даже имеет смысл сохранять положение свёрнуто/развёрнуто после переключения вида, вкладки и перезагрузки страницы.)</p>
+          </div>
+        </aside>
+        <figure class="case-media" style="margin: 0.85rem 0 1.2rem">
+          <div class="case-video-shell">
+            <video controls preload="metadata" playsinline poster="../assets/task-tracker/expand-collapse_group.webp" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
+              <source src="../assets/task-tracker/expand-collapse_group.webm" type="video/webm" />
+              <source src="../assets/task-tracker/expand-collapse_group.mp4" type="video/mp4" />
+              Ваш браузер не поддерживает видео.
+            </video>
+          </div>
+        </figure>
+        <div class="case-links-grid">
+          <a
+            class="case-link-card"
+            href="https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN-(Task-Tracker)?page-id=0%3A1&amp;node-id=39%3A700&amp;viewport=-1875%2C-125%2C0.55&amp;scaling=min-zoom&amp;starting-point-node-id=20%3A1291&amp;hide-ui=1"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span class="case-link-card__media">
+              <img src="../assets/task-tracker/view_board.webp" alt="Превью прототипа вида Board" width="1200" height="800" loading="lazy" decoding="async" />
+            </span>
+            <span class="case-link-card__body">
+              <span class="case-link-card__title">Прототип в Figma</span>
+              <span class="case-link-card__meta">Варианты отображения: Board, List, Table</span>
+              <span class="case-link-card__url">figma.com/proto/.../STENN-(Task-Tracker)</span>
+            </span>
+          </a>
+        </div>
+
+        <h3 id="drag">Drag&amp;Drop</h3>
+        <p class="section__prose">
+          Во всех видах можно перетаскивать элементы (карточки/элементы списка/строки и столбцы таблицы). Это способствует более продуктивной работе и выглядит естественным для пользователя. Например, если требуется раскидать задачи между сотрудниками (для админа или менеджера), поменять статус для нескольких задач разом или в короткий отрезок времени.
+        </p>
+        <p class="section__prose"><strong>Board view</strong></p>
+        <figure class="case-media" style="margin: 0.85rem 0 1.2rem">
+          <div class="case-video-shell">
+            <video controls preload="metadata" playsinline poster="../assets/task-tracker/drag-drop-item_board-view.webp" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
+              <source src="../assets/task-tracker/drag-drop-item_board-view.webm" type="video/webm" />
+              <source src="../assets/task-tracker/drag-drop-item_board-view.mp4" type="video/mp4" />
+              Ваш браузер не поддерживает видео.
+            </video>
+          </div>
+        </figure>
+        <div class="case-links-grid">
+          <a
+            class="case-link-card"
+            href="https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN-Task-Tracker?node-id=108%3A970&amp;viewport=2248%2C341%2C0.33&amp;scaling=contain&amp;starting-point-node-id=108%3A1968&amp;show-proto-sidebar=1"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span class="case-link-card__media" aria-hidden="true">
+              <img src="../assets/task-tracker/view_board.webp" alt="" width="1200" height="800" loading="lazy" decoding="async" />
+            </span>
+            <span class="case-link-card__body">
+              <span class="case-link-card__title">Прототип в Figma</span>
+              <span class="case-link-card__meta">Drag&amp;Drop, Board view</span>
+              <span class="case-link-card__url">figma.com/proto/.../STENN-Task-Tracker</span>
+            </span>
+          </a>
+        </div>
+        <p class="section__prose"><strong>List view</strong></p>
+        <figure class="case-media" style="margin: 0.85rem 0 1.2rem">
+          <div class="case-video-shell">
+            <video controls preload="metadata" playsinline poster="../assets/task-tracker/drag-drop-item_list-view.webp" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
+              <source src="../assets/task-tracker/drag-drop-item_list-view.webm" type="video/webm" />
+              <source src="../assets/task-tracker/drag-drop-item_list-view.mp4" type="video/mp4" />
+              Ваш браузер не поддерживает видео.
+            </video>
+          </div>
+        </figure>
+        <div class="case-links-grid">
+          <a
+            class="case-link-card"
+            href="https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN-Task-Tracker?node-id=108%3A970&amp;viewport=2248%2C341%2C0.33&amp;scaling=contain&amp;starting-point-node-id=108%3A2607&amp;show-proto-sidebar=1"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span class="case-link-card__media" aria-hidden="true">
+              <img src="../assets/task-tracker/view_list.webp" alt="" width="1200" height="800" loading="lazy" decoding="async" />
+            </span>
+            <span class="case-link-card__body">
+              <span class="case-link-card__title">Прототип в Figma</span>
+              <span class="case-link-card__meta">Drag&amp;Drop, List view</span>
+              <span class="case-link-card__url">figma.com/proto/.../STENN-Task-Tracker</span>
+            </span>
+          </a>
+        </div>
+        <p class="section__prose"><strong>Продвинутый интерактивный прототип в ProtoPie</strong></p>
+        <p class="section__prose">
+          Схематичное представление того как работает Drag&amp;Drop. Такой прототип помогает дизайнеру лучше понять какие нюансы нужно учесть в юзерфлоу, а также и при подготовке спецификации для разработчика. Также попробовав данный прототип можно прийти к тому, что функционал должен работать совсем иначе и переделать его сразу. Это экономит общее время разработки.
+        </p>
+        <figure class="case-media" style="margin: 0.85rem 0 1.2rem">
+          <div class="case-video-shell">
+            <video controls preload="metadata" playsinline poster="../assets/task-tracker/drag-drop-action_example.webp" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
+              <source src="../assets/task-tracker/drag-drop-action_example.webm" type="video/webm" />
+              <source src="../assets/task-tracker/drag-drop-action_example.mp4" type="video/mp4" />
+              Ваш браузер не поддерживает видео.
+            </video>
+          </div>
+        </figure>
+        <div class="case-links-grid">
+          <a
+            class="case-link-card case-link-card--favicon"
+            href="https://cloud.protopie.io/p/e7a45bd3f2?touchHint=false&amp;ui=false&amp;scaleToFit=false&amp;cursorType=arrow&amp;mockup=false&amp;bgColor=%23F5F5F5&amp;playSpeed=1&amp;playerAppPopup=true"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span class="case-link-card__media" aria-hidden="true">
+              <img src="https://www.google.com/s2/favicons?domain=cloud.protopie.io&amp;sz=128" alt="" width="24" height="24" decoding="async" />
+            </span>
+            <span class="case-link-card__body">
+              <span class="case-link-card__title">Прототип | drag_drop | ProtoPie Cloud</span>
+              <span class="case-link-card__meta">Интерактив в облаке ProtoPie</span>
+              <span class="case-link-card__url">cloud.protopie.io/...</span>
+            </span>
+          </a>
+        </div>
+        <p class="section__prose">
+          В прототипе можно перемещать только голубую карточку и не все положения работают корректно. Можно посмотреть запись, которая доступна на той же странице прототипа.
+        </p>
+
+        <h2 id="stil">Стиль</h2>
+        <p class="section__prose">
+          Визуальный стиль может быть любым, не меняя самого <em>каркаса.</em> Например, чуть более красочным и с более выразительными шрифтами.
+        </p>
+        <p class="section__prose">Светлая цветная тема</p>
+        <figure class="case-media case-media--wide">
+          <img src="../assets/task-tracker/light_theme_color.webp" alt="Светлая цветная тема" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
+        </figure>
+        <div class="case-links-grid">
+          <a
+            class="case-link-card case-link-card--favicon"
+            href="https://www.figma.com/file/aFvwvTZuksD0JTo6yFXyUz/STENN-(Task-Tracker)?node-id=174%3A5703"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span class="case-link-card__media" aria-hidden="true">
+              <img src="https://www.google.com/s2/favicons?domain=www.figma.com&amp;sz=128" alt="" width="24" height="24" decoding="async" />
+            </span>
+            <span class="case-link-card__body">
+              <span class="case-link-card__title">Фрэйм в Figma</span>
+              <span class="case-link-card__meta">Светлая цветная тема</span>
+              <span class="case-link-card__url">figma.com/file/.../STENN-(Task-Tracker)</span>
+            </span>
+          </a>
+        </div>
+        <p class="section__prose">Нейтральная тёмная тема</p>
+        <figure class="case-media case-media--wide">
+          <img src="../assets/task-tracker/dark_theme.webp" alt="Нейтральная тёмная тема" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
+        </figure>
+        <div class="case-links-grid">
+          <a
+            class="case-link-card case-link-card--favicon"
+            href="https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN--Task-Tracker-?node-id=135-5400&amp;t=BzGQOTE0ty7u2E50-1"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span class="case-link-card__media" aria-hidden="true">
+              <img src="https://www.google.com/s2/favicons?domain=www.figma.com&amp;sz=128" alt="" width="24" height="24" decoding="async" />
+            </span>
+            <span class="case-link-card__body">
+              <span class="case-link-card__title">Фрэйм в Figma</span>
+              <span class="case-link-card__meta">Нейтральная тёмная тема</span>
+              <span class="case-link-card__url">figma.com/proto/.../STENN--Task-Tracker-</span>
+            </span>
+          </a>
+        </div>
+
+        <h2 id="issledovaniya">Исследования</h2>
+        <p class="section__prose">
+          На этапе прототипов Figma можно провести интервью с несколькими сотрудниками, например 5 человек. Предварительно в прототип нужно добавить реальные задачи из текущей системы, порядка 20 должно хватить. Далее можно созвониться по видеосвязи с шэрингом экрана респондента или встретиться лично и задать несколько заданий и вопросов. Во время сессии респондент может тыкать в прототип, но если что-то не сработает интервьюер может зафиксировать попытку и объяснить, что этот функционал пока не работает, а также поинтересоваться что респондент ожидает увидеть дальше.
+        </p>
+        <h3 id="zadania">Задания</h3>
+        <ol>
+          <li>Найти свои актуальные задачи со страницы <strong>Tasks</strong> вкладки <strong>All tasks</strong></li>
+          <li>Назначить себе задачи, чтобы взять в работу</li>
+          <li>Найти задачу про что-то конкретное (интервьюер приводит пример), которую он уже выполнил ранее</li>
+          <li>Показать задачи, которые относятся только к определённой категории и должны быть сделаны до конца недели</li>
+          <li>Попросить поменять приоритет у нескольких задач одновременно</li>
+          <li>Оценить визуальную привлекательность интерфейса по шкале от 1 до 10</li>
+          <li>Оценить общее впечатление от предложенного концепта по шкале от 1 до 10</li>
+          <li>Предложить ещё функции, которые были бы полезны</li>
+        </ol>
+        <h3 id="analitika">Аналитика</h3>
+        <p class="section__prose">Для оценки актуальности реализованного функционала необходимо собирать следующие показатели.</p>
+        <ul>
+          <li>
+            Кол-во просмотров страницы <strong>Tasks</strong> <code>page_views_tasks</code> с возможностью разбиения
+            <ul>
+              <li>
+                по вкладкам
+                <ul>
+                  <li>All tasks <code>all_tasks_tab</code></li>
+                  <li>My tasks <code>my_tasks_tab</code></li>
+                  <li>Tasks by assign <code>tasks_by_assign</code></li>
+                </ul>
+              </li>
+              <li>
+                по ролям
+                <ul>
+                  <li>Admin <code>admin</code></li>
+                  <li>Manager <code>manager</code></li>
+                  <li>User <code>user</code></li>
+                </ul>
+              </li>
+              <li>
+                по попыткам поиска
+                <ul>
+                  <li>Search Used <code>search used</code></li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+          <li>
+            Кол-во включённых пользовательских настроек <strong>Custom Settings</strong> <code>custom_settings</code> с возможностью разбиения
+            <ul>
+              <li>
+                по вкладкам
+                <ul>
+                  <li>All tasks <code>all_tasks_tab</code></li>
+                  <li>My tasks <code>my_tasks_tab</code></li>
+                  <li>Tasks by assign <code>tasks_by_assign</code></li>
+                </ul>
+              </li>
+              <li>
+                по ролям
+                <ul>
+                  <li>Admin <code>admin</code></li>
+                  <li>Manager <code>manager</code></li>
+                  <li>User <code>user</code></li>
+                </ul>
+              </li>
+              <li>
+                по типам
+                <ul>
+                  <li>Group <code>group</code></li>
+                  <li>Filter <code>filter</code></li>
+                  <li>Sort <code>sort</code></li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+          <li>
+            Кол-во включенных видов <strong>View Used</strong> <code>view_used</code> с возможностью разбиения
+            <ul>
+              <li>
+                по вкладкам
+                <ul>
+                  <li>All tasks <code>all_tasks_tab</code></li>
+                  <li>My tasks <code>my_tasks_tab</code></li>
+                  <li>Tasks by assign <code>tasks_by_assign</code></li>
+                </ul>
+              </li>
+              <li>
+                по ролям
+                <ul>
+                  <li>Admin <code>admin</code></li>
+                  <li>Manager <code>manager</code></li>
+                  <li>User <code>user</code></li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+        </ul>
+        <p class="section__prose">
+          Далее в течение полугода (может и раньше, в зависимости от активности пользователей) можно будет увидеть результат и провести исследование (в виде интервью) по функциям, которые используются реже всего и тем на которые есть жалобы, чтобы получить качественные данные и составить полную картину происходящего.
+        </p>
+
+        <h2 id="dop">Дополнительные детали</h2>
+        <p class="section__prose">
+          При создании мокапов в Figma были использованы: возможности автолэаутов; интерактивные компоненты, плагины (<a href="https://www.figma.com/community/plugin/735098390272716381/Iconify">Iconify</a>, <a href="https://www.figma.com/community/plugin/917796239623005893/Fitter">Fitter</a>, <a href="https://www.figma.com/community/plugin/1021879782774011952">Protofly</a>, <a href="https://www.figma.com/community/plugin/889676455045507628/Shadow-Maker">Shadow Maker</a>, <a href="https://www.figma.com/community/plugin/986289377230504703">Dark Side</a> и др.), файл Community (<a href="https://www.figma.com/community/file/831142089959745518">+40 Types of Cursor</a>). Слои названы и организованы для более удобной работы где-то на 60%. Используется сетка 8pt + есть размеры 2pt, 4pt. Имеются цветовые стили для светлой и тёмной темы. Присутствует адаптивность под изменяющиеся размеры окна (мобильной версии нет).
+        </p>
+        <div class="case-links-grid">
+          <a
+            class="case-link-card case-link-card--favicon"
+            href="https://www.figma.com/file/aFvwvTZuksD0JTo6yFXyUz/STENN-(Task-Tracker)"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span class="case-link-card__media" aria-hidden="true">
+              <img src="https://www.google.com/s2/favicons?domain=www.figma.com&amp;sz=128" alt="" width="24" height="24" decoding="async" />
+            </span>
+            <span class="case-link-card__body">
+              <span class="case-link-card__title">Исходный файл в Figma</span>
+              <span class="case-link-card__meta">Проект STENN (Task-Tracker)</span>
+              <span class="case-link-card__url">figma.com/file/.../STENN-(Task-Tracker)</span>
+            </span>
+          </a>
+        </div>
+      </div>
+    </main>
+
+    <section id="projects" class="section section--surface">
+        <div class="section__inner">
+          <h2 class="section__title">Портфолио</h2>
+          <ol class="mini-projects-grid" data-mini-projects-list>
+            <li class="mini-projects-grid__item" data-mp-cells="3">
+              <a class="mp-card mp-card--link mp-card--stack" href="ai-platform-primo-rpa.html" aria-label="Платформа для работы с AI — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/ai-platform-primo-rpa/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Платформа для работы с AI</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями автоматизации и Smart OCR.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="3">
+              <a class="mp-card mp-card--link mp-card--stack" href="lunacy.html" aria-label="Графический редактор Lunacy — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/lunacy/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Графический редактор Lunacy</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Desktop App</li>
+                  </ul>
+                  <p class="mp-card__desc">Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и интерфейсной логики.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--stack" href="manu-game-maker.html" aria-label="Игровой движок MANU — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/manu-game-maker/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Игровой движок MANU</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">Product Design</li>
+                    <li class="mp-card__tag">Desktop App</li>
+                  </ul>
+                  <p class="mp-card__desc">Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и проработка сотен сложных пользовательских сценариев.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--stack" href="mobile-clinic-app.html" aria-label="Мобильное приложение для сети клиник — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/mobile-clinic-app/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Мобильное приложение для сети клиник</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Mobile App</li>
+                  </ul>
+                  <p class="mp-card__desc">Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом пользовательском пути, понятной навигации и быстром доступе к нужным действиям.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="orc-automation-panel.html" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Веб-панель для оркестрации автоматизаций</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под продакшен без остановки релизов.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="task-distribution-concept.html" aria-label="Концепт сервиса распределения задач — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Концепт сервиса распределения задач</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Analytics</li>
+                  </ul>
+                  <p class="mp-card__desc">Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность процессов и удобство командной работы.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="task-tracker.html" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Таск-трекер для бек-офис системы</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">Product Design</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по исполнителям; вкладки, фильтры, доска / список / таблица, Drag&amp;Drop.</p>
+                </div>
+              </a>
+            </li>
+          </ol>
+        </div>
+      </section><section hidden class="section section--surface" aria-hidden="true">
+        <div class="section__inner">
+          <div class="projects__heading">
+            <h2 class="section__title projects__title">Портфолио</h2>
+            <div class="projects__controls" aria-label="Навигация по карточкам портфолио">
+              <button type="button" class="projects__nav-btn" data-projects-prev aria-label="Прокрутить влево" aria-controls="projects-viewport">
+                <span class="projects__nav-ico projects__nav-ico--left" aria-hidden="true"></span>
+              </button>
+              <button type="button" class="projects__nav-btn" data-projects-next aria-label="Прокрутить вправо" aria-controls="projects-viewport">
+                <span class="projects__nav-ico projects__nav-ico--right" aria-hidden="true"></span>
+              </button>
+            </div>
+          </div>
+          <div class="projects-carousel">
+            <div id="projects-viewport" class="projects-carousel__viewport" data-projects-viewport>
+              <div class="projects-carousel__track">
+                <div class="projects-carousel__spacer" aria-hidden="true"></div>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="orc-automation-panel.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Веб-панель для оркестрации автоматизаций</h3>
+                      <p class="portfolio-card__summary">
+                        Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под
+                        продакшен без остановки релизов.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Web App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/orc-primo-rpa/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="ai-platform-primo-rpa.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Платформа для работы с AI</h3>
+                      <p class="portfolio-card__summary">
+                        Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями
+                        автоматизации и Smart OCR.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Web App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/ai-platform-primo-rpa/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="manu-game-maker.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Игровой движок MANU</h3>
+                      <p class="portfolio-card__summary">
+                        Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и
+                        проработка сотен сложных пользовательских сценариев.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">Product Design</li>
+                        <li class="portfolio-card__tag">Desktop App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/manu-game-maker/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="lunacy.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Графический редактор Lunacy</h3>
+                      <p class="portfolio-card__summary">
+                        Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и
+                        интерфейсной логики.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Desktop App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/lunacy/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="mobile-clinic-app.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Мобильное приложение для сети клиник</h3>
+                      <p class="portfolio-card__summary">
+                        Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом
+                        пользовательском пути, понятной навигации и быстром доступе к нужным действиям.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Mobile App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/mobile-clinic-app/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="task-distribution-concept.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Концепт сервиса распределения задач</h3>
+                      <p class="portfolio-card__summary">
+                        Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность
+                        процессов и удобство командной работы.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Analytics</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/task-distribution-concept/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="obsidian-plugin-columns-view.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Колоночный вид — плагин для Obsidian</h3>
+                      <p class="portfolio-card__summary">
+                        Интерфейс для многоколоночной работы с заметками: удобная навигация, фильтрация и настройка
+                        колончатого отображения прямо в редакторе Obsidian.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Plugin</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/obsidian-plugin-columns-view/filter use.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <div class="projects-carousel__spacer" aria-hidden="true"></div>
+              </div>
+            </div>
+            <button
+              type="button"
+              class="projects-carousel__edge-hit projects-carousel__edge-hit--left"
+              data-projects-edge-prev
+              aria-label="Прокрутить портфолио влево"
+            ></button>
+            <button
+              type="button"
+              class="projects-carousel__edge-hit projects-carousel__edge-hit--right"
+              data-projects-edge-next
+              aria-label="Прокрутить портфолио вправо"
+            ></button>
+          </div>
+        </div>
+      </section>
+
+<section id="contact" class="section section--surface section--footerish">
+      <div class="section__inner">
+        <h2 class="section__title">Контакты</h2>
+        <ul class="contact-grid">
+          <li><a class="contact-card contact-card--link contact-card--brand-tg" href="https://t.me/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../assets/shared/icons/tg.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Telegram</span><span class="contact-card__hint">Отвечу сегодня</span></span></a></li>
+          <li><a class="contact-card contact-card--link contact-card--brand-vk" href="https://vk.com/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../assets/shared/icons/vk.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">ВКонтакте</span><span class="contact-card__hint">Стабильный коннект</span></span></a></li>
+          <li><a class="contact-card contact-card--link contact-card--brand-ya" href="https://yandex.ru/chat/p/727e71fa-89b5-44a8-90a5-851021631a1c?utm_source=invite" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../assets/shared/icons/yandex_telemost.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Яндекс</span><span class="contact-card__hint">Да, тут тоже можно</span></span></a></li>
+          <li><button type="button" class="contact-card contact-card--action contact-card--brand-email" data-contact-copy data-email-b64="bmlrQG1hbWFkYWV2di5ydQ==" data-hint-default="Скопировать адрес" aria-label="Скопировать адрес электронной почты в буфер обмена"><span class="contact-card__corner contact-card__corner--copy" aria-hidden="true"></span><span class="contact-card__icon contact-card__icon--accent" aria-hidden="true"></span><span class="contact-card__body"><span class="contact-card__name">Почта</span><span class="contact-card__hint" data-contact-copy-hint>Скопировать адрес</span></span></button></li>
+        </ul>
+      </div>
+    </section>
+
+<section class="section section--surface" aria-hidden="true">
+      <div class="section__inner"></div>
+    </section>
+
+<footer class="footer">
+      <div class="footer__inner">
+        <span class="footer__chunk footer__chunk--date">© 2026<span class="footer__sep" aria-hidden="true"> · </span></span>
+        <span class="footer__chunk footer__chunk--main">Дизайн и разработка сайта — Николай Мамадаев</span>
+        <span class="footer__chunk footer__chunk--meta footer__attr"><span class="footer__sep" aria-hidden="true"> · </span><a href="../cases/design-system.html">Design System</a><span class="footer__sep" aria-hidden="true"> · </span><a href="../cookie-policy.html">Политика cookie</a></span>
+      </div>
+    </footer>
+
+<aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
+      <p class="cookie-notice__text">
+        Сайт использует cookie для комфортной работы. Подробнее — в
+        <a href="../cookie-policy.html" data-cookie-policy-link>политике cookie</a>.
+      </p>
+      <button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
+        <span>Принять</span>
+        <span class="cookie-notice__accept-icon" aria-hidden="true">
+          <img src="../assets/shared/icons/сookie.svg" alt="" width="20" height="20" loading="eager" decoding="async" />
+        </span>
+      </button>
+    </aside>
+
+<div id="nav-more-menu-floating" class="nav-more__floating" hidden data-nav-more-menu-floating aria-hidden="true"></div>
+
+
+  </body>
+</html>
+
+
+
diff --git a/public/cases/template-elements-demo.html b/public/cases/template-elements-demo.html
new file mode 100644
index 0000000..6340dc0
--- /dev/null
+++ b/public/cases/template-elements-demo.html
@@ -0,0 +1,858 @@
+<!DOCTYPE html>
+<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta name="description" content="Демо-страница кейса со всеми разработанными элементами: карточки ссылок и медиа-блоки." />
+    <title>Демо элементов кейса — template</title>
+    <script>
+      (function () {
+        var FONT_CSS = {
+          merriweather: "../assets/fonts/merriweather.css",
+          geologica: "../assets/fonts/geologica.css",
+          mono: "../assets/fonts/mono.css",
+        };
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f !== "merriweather" && f !== "mono" && f !== "geologica") f = "merriweather";
+          d.dataset.font = f;
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+          var href = FONT_CSS[f];
+          if (href && !document.querySelector('link[data-theme-font="' + f + '"]')) {
+            var link = document.createElement("link");
+            link.rel = "stylesheet";
+            link.href = href;
+            link.setAttribute("data-theme-font", f);
+            document.head.appendChild(link);
+          }
+        } catch (e) {}
+      })();
+    </script>
+
+    <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon/favicon-16x16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="../assets/favicon/apple-touch-icon.png" />
+    <link rel="manifest" href="../assets/favicon/site.webmanifest" />
+    <link rel="preload" href="../assets/fonts/merriweather.css" as="style" />
+    <link rel="preload" href="../css/main.css" as="style" />
+    <link rel="preload" href="../js/skill-connectors.js" as="script" />
+    <link rel="modulepreload" href="../js/main.js" />
+    <link rel="stylesheet" href="../css/main.css" />
+    <script src="../js/skill-connectors.js" defer></script>
+    <script type="module" src="../js/main.js"></script>
+
+
+        <link rel="stylesheet" href="../vendor/plyr/plyr.css" />
+
+    <style>
+      .case-article {
+        max-width: 48rem;
+        margin: 0 auto;
+      }
+      .case-article h2 {
+        margin: 2rem 0 0.75rem;
+        font-size: clamp(1.15rem, 2vw, 1.35rem);
+        font-weight: 700;
+        color: var(--text);
+      }
+      .case-article h3 {
+        font-size: 1.05rem;
+        font-weight: 600;
+        color: var(--text);
+      }
+      .case-article .section__prose {
+        margin-bottom: 0.75rem;
+        color: var(--text);
+      }
+      .case-article a:not(.btn) {
+        color: var(--accent);
+      }
+    </style>
+    <script>
+      (function () {
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f === "merriweather" || f === "mono" || f === "geologica") {
+            d.dataset.font = f;
+          } else {
+            d.dataset.font = "merriweather";
+          }
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+        } catch (e) {}
+      })();
+    </script>
+  </head>
+  <body>
+    <a class="skip-link" href="#main">К основному содержимому</a>
+
+    <header class="header" data-theme-picker>
+      <div class="header__inner">
+        <a class="logo" href="../index.html" aria-label="На главную">НМ</a>
+        <div class="header__cluster">
+          <nav class="nav" aria-label="Навигация">
+            <a href="../index.html">На главную</a>
+          </nav>
+        </div>
+      </div>
+    </header>
+
+<div class="fab-stack" aria-label="Быстрые действия">
+      <div class="theme-panel-fab-wrap">
+        <button type="button" class="fab fab--secondary glass-neutral" data-theme-panel-btn aria-expanded="false" aria-controls="theme-panel" aria-label="Настройки стиля">
+          <span class="theme-panel-fab__icon theme-panel-fab__icon--open-hide" aria-hidden="true"></span>
+          <svg class="theme-panel-fab__icon theme-panel-fab__icon--close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          </svg>
+        </button>
+        <div id="theme-panel" class="theme-picker__panel glass-neutral" role="dialog" aria-label="Тема и оформление" hidden data-theme-panel>
+          <div class="theme-picker__stack">
+            <section class="theme-picker__section" aria-labelledby="theme-accent-title">
+              <h3 id="theme-accent-title" class="theme-picker__section-title">Акцентный цвет</h3>
+              <div class="colorpicker" data-colorpicker>
+                <div class="colorpicker__plane-box">
+                  <canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Насыщенность и светлость акцента"></canvas>
+                  <div class="colorpicker__knob" data-sl-knob></div>
+                </div>
+                <div class="colorpicker__hue-wrap">
+                  <label class="colorpicker__hue-sr" for="theme-hue-slider">Оттенок акцента</label>
+                  <input id="theme-hue-slider" class="colorpicker__hue" type="range" min="0" max="360" value="210" data-hue-slider aria-valuemin="0" aria-valuemax="360" />
+                </div>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-mode-title">
+              <h3 id="theme-mode-title" class="theme-picker__section-title">Тема</h3>
+              <div class="radius-seg theme-mode-seg" role="radiogroup" aria-labelledby="theme-mode-title">
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="system" aria-label="Как в системе"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--system"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="light" aria-label="Светлая тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--light"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="dark" aria-label="Тёмная тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--dark"></span></span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-radius-title">
+              <h3 id="theme-radius-title" class="theme-picker__section-title">Скругление углов</h3>
+              <div class="radius-seg" role="radiogroup" aria-labelledby="theme-radius-title">
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="soft" aria-label="Слабое скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--soft"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="medium" aria-label="Среднее скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--medium"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="strong" aria-label="Сильное скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--strong"></span></span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-typography-title">
+              <h3 id="theme-typography-title" class="theme-picker__section-title">Типографика</h3>
+              <div class="radius-seg" role="radiogroup" aria-labelledby="theme-typography-title">
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="geologica" aria-label="Sans"><span class="theme-font-seg__label">Sans</span></button>
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="merriweather" aria-label="Sans Serif"><span class="theme-font-seg__label">Sans Serif</span></button>
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="mono" aria-label="Mono"><span class="theme-font-seg__label">Mono</span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-mesh-bg-title">
+              <h3 id="theme-mesh-bg-title" class="theme-picker__section-title">Фон страницы</h3>
+              <div class="radius-seg radius-seg--two" role="radiogroup" aria-labelledby="theme-mesh-bg-title">
+                <button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="on" aria-label="Показать фоновый градиент"><span class="theme-mesh-bg-seg__label">Вкл</span></button>
+                <button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="off" aria-label="Скрыть фоновый градиент"><span class="theme-mesh-bg-seg__label">Выкл</span></button>
+              </div>
+            </section>
+          </div>
+        </div>
+      </div>
+      <a class="fab fab--primary" href="../index.html#contact" aria-label="Связаться">
+        <span class="fab-primary__ico" aria-hidden="true"></span>
+      </a>
+    </div>
+<div class="content-edit-fab-stack" aria-label="Правки контента" data-content-edit-ui>
+  <button
+    type="button"
+    class="fab fab--secondary glass-neutral content-edit-fab"
+    data-content-edit-mode-toggle
+    hidden
+    aria-pressed="false"
+    aria-label="Режим правок контента"
+    title="Режим правок"
+  >
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <path
+        d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0 0-3L16.5 4.5a2.12 2.12 0 0 0-3 0L3 15v5z"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linejoin="round"
+      />
+    </svg>
+    <span class="content-edit-fab__badge" hidden aria-hidden="true">0</span>
+  </button>
+</div>
+
+
+<main id="main" class="section section--tight">
+      <div class="section__inner case-article">
+        <p class="hero__eyebrow">Демо · template</p>
+        <h1 class="case-page__h1">Пример кейса: демо элементов</h1>
+        <p class="case-page__sub">Рыба-текст и блоки для быстрой сборки лонгрида</p>
+        <p class="section__prose case-page__code">Медиа для демо лежат в <code>public/assets/</code> (сборка страниц их не копирует). См. <code>public/assets/README.md</code>.</p>
+
+        <h2>Контекст</h2>
+        <p class="section__prose">
+          Этот раздел показывает пример рыбы для вступления. Здесь можно коротко описать продукт, аудиторию и ограничения проекта.
+          Текст нейтральный: цель — быстро набросать структуру и проверить визуальный ритм страницы.
+        </p>
+
+        <h2>Задача</h2>
+        <p class="section__prose">
+          Нужно собрать демонстрационный лонгрид с основными UI-элементами: карточками ссылок, медиа-блоками и примерами оформления контента.
+          Дополнительно важно проверить, как блоки ведут себя на узких и широких экранах.
+        </p>
+
+        <h2>Решение</h2>
+        <p class="section__prose">Ниже собраны готовые примеры, которые можно копировать в реальные кейсы.</p>
+
+        <h3>Карточки ссылок</h3>
+        <div class="case-links-grid">
+          <a class="case-link-card" href="https://www.examples.com/" target="_blank" rel="noopener noreferrer">
+            <span class="case-link-card__media" aria-hidden="true">
+              <img src="../assets/template-elements-demo/wallpaper-1.jpg" alt="" loading="lazy" decoding="async" />
+            </span>
+            <span class="case-link-card__body">
+              <span class="case-link-card__title">Источник с превью</span>
+              <span class="case-link-card__meta">Короткая подпись: что пользователь увидит по ссылке</span>
+              <span class="case-link-card__url">www.examples.com</span>
+            </span>
+          </a>
+          <a class="case-link-card case-link-card--favicon" href="https://www.examples.com/docs" target="_blank" rel="noopener noreferrer">
+            <span class="case-link-card__media" aria-hidden="true">
+              <img src="https://www.google.com/s2/favicons?domain=www.examples.com&sz=128" alt="" decoding="async" />
+            </span>
+            <span class="case-link-card__body">
+              <span class="case-link-card__title">Источник с favicon</span>
+              <span class="case-link-card__meta">Вариант для более легких ссылок без скриншота</span>
+              <span class="case-link-card__url">www.examples.com/docs</span>
+            </span>
+          </a>
+        </div>
+
+        <h3>Картинка: 50% от оригинала (без превью)</h3>
+        <figure class="case-media case-media--natural">
+          <img src="../assets/template-elements-demo/hello.gif" alt="Демо GIF в натуральном размере" loading="lazy" decoding="async" />
+          <figcaption>Изображение в уменьшенном натуральном размере, по центру.</figcaption>
+        </figure>
+
+        <h3>Картинка: по ширине контента (с превью)</h3>
+        <figure class="case-media case-media--content">
+          <img src="../assets/template-elements-demo/wallpaper-1.jpg" alt="Демо изображения по ширине контента" loading="lazy" decoding="async" data-image-viewer />
+          <figcaption>Изображение по ширине контента. Клик открывает viewer.</figcaption>
+        </figure>
+
+        <h3>Картинка: чуть шире контента (с превью)</h3>
+        <figure class="case-media case-media--wide">
+          <img src="../assets/template-elements-demo/wallpaper-1.jpg" alt="Демо изображения шире контента" loading="lazy" decoding="async" data-image-viewer />
+          <figcaption>Изображение немного выходит за пределы контентной колонки.</figcaption>
+        </figure>
+
+        <h3>Длинный скрин: свёрнутая высота и кнопка внутри превью</h3>
+        <p class="section__prose">
+          Блок <code>data-case-tall-media</code>: ширина задаётся атрибутом <code>data-case-tall-width="wide"</code> (как «широкая» картинка) или <code>content</code> (по колонке). В свёрнутом виде видна верхняя часть кадра, внизу превью — плотный «туман». Кнопка «Развернуть» / «Свернуть» с иконкой-шевроном поверх нижней части кадра, внутри рамки; после раскрытия туман скрывается, после сворачивания страница прокручивается к превью. Высоту превью — на <code>.case-media-tall__clip</code> через <code>--case-tall-max</code> (по умолчанию <code>min(70vh, 32rem)</code>).
+        </p>
+        <figure class="case-media" data-case-tall-media data-case-tall-width="wide">
+          <div class="case-media-tall" data-case-tall-root>
+            <div class="case-media-tall__clip" id="template-demo-tall-clip" data-case-tall-clip>
+              <img
+                src="../assets/template-elements-demo/img-long.webp"
+                alt="Демо: длинный вертикальный скрин интерфейса"
+                width="1200"
+                loading="lazy"
+                decoding="async"
+                data-image-viewer
+              />
+              <div class="case-media-tall__fog" aria-hidden="true"></div>
+            </div>
+            <div class="case-media-tall__actions">
+              <button
+                type="button"
+                class="case-media-tall__btn btn btn--ghost btn--flat"
+                data-case-tall-toggle
+                aria-expanded="false"
+                aria-controls="template-demo-tall-clip"
+              >
+                <span class="case-media-tall__btn-chev" aria-hidden="true"></span>
+                <span data-case-tall-label-more>Развернуть</span>
+                <span data-case-tall-label-less hidden>Свернуть</span>
+              </button>
+            </div>
+          </div>
+          <figcaption>Длинное изображение <code>img-long.webp</code> (исходник PNG рядом в <code>public/assets/template-elements-demo/</code>).</figcaption>
+        </figure>
+
+        <h3>Галерея: сетка по ширине контента</h3>
+        <p class="section__prose">
+          Колонок на широком экране задаётся на <code>figure</code>: атрибут <code>style="--case-gallery-cols: 3"</code>. Ниже порогов сетка схлопывается до двух и одной колонки. Клик по миниатюре открывает общий viewer кейса.
+        </p>
+        <figure class="case-media case-media-gallery" style="--case-gallery-cols: 3">
+          <div class="case-media-gallery__grid">
+            <div class="case-media-gallery__item">
+              <img src="../assets/template-elements-demo/small-image-1.webp" alt="Демо миниатюра 1" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="../assets/template-elements-demo/small-image-2.webp" alt="Демо миниатюра 2" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="../assets/template-elements-demo/small-image-3.webp" alt="Демо миниатюра 3" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="../assets/template-elements-demo/small-image-4.webp" alt="Демо миниатюра 4" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="../assets/template-elements-demo/small-image-5.webp" alt="Демо миниатюра 5" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="../assets/template-elements-demo/small-image-6.webp" alt="Демо миниатюра 6" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="../assets/template-elements-demo/small-image-7.webp" alt="Демо миниатюра 7" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+          </div>
+          <figcaption>Сетка в колонке статьи; на этом примере три колонки на десктопе.</figcaption>
+        </figure>
+
+        <h3>Галерея: сетка на ширину страницы с боковыми отступами</h3>
+        <p class="section__prose">
+          Класс <code>case-media-gallery--wide</code> — та же логика выхода за колонку, что у одиночного <code>case-media--wide</code>. Здесь две колонки на широком экране (<code>--case-gallery-cols: 2</code>).
+        </p>
+        <figure class="case-media case-media-gallery case-media-gallery--wide" style="--case-gallery-cols: 2">
+          <div class="case-media-gallery__grid">
+            <div class="case-media-gallery__item">
+              <img src="../assets/template-elements-demo/small-image-1.webp" alt="Wide-сетка, кадр 1" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="../assets/template-elements-demo/small-image-2.webp" alt="Wide-сетка, кадр 2" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="../assets/template-elements-demo/small-image-3.webp" alt="Wide-сетка, кадр 3" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="../assets/template-elements-demo/small-image-4.webp" alt="Wide-сетка, кадр 4" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="../assets/template-elements-demo/small-image-5.webp" alt="Wide-сетка, кадр 5" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="../assets/template-elements-demo/small-image-6.webp" alt="Wide-сетка, кадр 6" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="../assets/template-elements-demo/small-image-7.webp" alt="Wide-сетка, кадр 7" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+          </div>
+          <figcaption>Ширина как у wide-картинки; на узком экране wide-обёртка схлопывается в 100% ширины колонки (см. медиазапросы).</figcaption>
+        </figure>
+
+        <h3>Callout: важный абзац с эмоджи</h3>
+        <aside class="case-callout" data-callout>
+          <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">📌</span>
+          <div class="case-callout__content">
+            <p>Это пример акцентного callout-блока. Эмоджи вынесен влево и пульсирует, чтобы визуально усилить важную мысль.</p>
+          </div>
+        </aside>
+
+        <h3>Видео: карточка с тенью и фиксированными малыми углами</h3>
+        <figure class="case-media" style="margin: 0.85rem 0 1.2rem">
+          <div class="case-video-shell">
+            <video controls preload="metadata" playsinline poster="../assets/template-elements-demo/video-1.webp" data-case-video-player style="display: block; width: 100%; height: auto">
+              <source src="../assets/template-elements-demo/video-1.webm" type="video/webm" />
+              <source src="../assets/template-elements-demo/video-1.mp4" type="video/mp4" />
+              Ваш браузер не поддерживает видео.
+            </video>
+          </div>
+          <figcaption>Пример видео-карточки в стиле кейса.</figcaption>
+        </figure>
+
+        <h2>Результат</h2>
+        <p class="section__prose">
+          Шаблон готов для копирования в новый кейс: остаётся заменить рыбу на фактический текст, подставить реальные ссылки и медиа проекта.
+        </p>
+      </div>
+    </main>
+
+    <section id="projects" class="section section--surface">
+        <div class="section__inner">
+          <h2 class="section__title">Портфолио</h2>
+          <ol class="mini-projects-grid" data-mini-projects-list>
+            <li class="mini-projects-grid__item" data-mp-cells="3">
+              <a class="mp-card mp-card--link mp-card--stack" href="ai-platform-primo-rpa.html" aria-label="Платформа для работы с AI — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/ai-platform-primo-rpa/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Платформа для работы с AI</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями автоматизации и Smart OCR.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="3">
+              <a class="mp-card mp-card--link mp-card--stack" href="lunacy.html" aria-label="Графический редактор Lunacy — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/lunacy/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Графический редактор Lunacy</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Desktop App</li>
+                  </ul>
+                  <p class="mp-card__desc">Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и интерфейсной логики.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--stack" href="manu-game-maker.html" aria-label="Игровой движок MANU — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/manu-game-maker/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Игровой движок MANU</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">Product Design</li>
+                    <li class="mp-card__tag">Desktop App</li>
+                  </ul>
+                  <p class="mp-card__desc">Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и проработка сотен сложных пользовательских сценариев.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--stack" href="mobile-clinic-app.html" aria-label="Мобильное приложение для сети клиник — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/mobile-clinic-app/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Мобильное приложение для сети клиник</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Mobile App</li>
+                  </ul>
+                  <p class="mp-card__desc">Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом пользовательском пути, понятной навигации и быстром доступе к нужным действиям.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="orc-automation-panel.html" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Веб-панель для оркестрации автоматизаций</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под продакшен без остановки релизов.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="task-distribution-concept.html" aria-label="Концепт сервиса распределения задач — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Концепт сервиса распределения задач</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Analytics</li>
+                  </ul>
+                  <p class="mp-card__desc">Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность процессов и удобство командной работы.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="task-tracker.html" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Таск-трекер для бек-офис системы</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">Product Design</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по исполнителям; вкладки, фильтры, доска / список / таблица, Drag&amp;Drop.</p>
+                </div>
+              </a>
+            </li>
+          </ol>
+        </div>
+      </section><section hidden class="section section--surface" aria-hidden="true">
+        <div class="section__inner">
+          <div class="projects__heading">
+            <h2 class="section__title projects__title">Портфолио</h2>
+            <div class="projects__controls" aria-label="Навигация по карточкам портфолио">
+              <button type="button" class="projects__nav-btn" data-projects-prev aria-label="Прокрутить влево" aria-controls="projects-viewport">
+                <span class="projects__nav-ico projects__nav-ico--left" aria-hidden="true"></span>
+              </button>
+              <button type="button" class="projects__nav-btn" data-projects-next aria-label="Прокрутить вправо" aria-controls="projects-viewport">
+                <span class="projects__nav-ico projects__nav-ico--right" aria-hidden="true"></span>
+              </button>
+            </div>
+          </div>
+          <div class="projects-carousel">
+            <div id="projects-viewport" class="projects-carousel__viewport" data-projects-viewport>
+              <div class="projects-carousel__track">
+                <div class="projects-carousel__spacer" aria-hidden="true"></div>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="orc-automation-panel.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Веб-панель для оркестрации автоматизаций</h3>
+                      <p class="portfolio-card__summary">
+                        Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под
+                        продакшен без остановки релизов.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Web App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/orc-primo-rpa/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="ai-platform-primo-rpa.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Платформа для работы с AI</h3>
+                      <p class="portfolio-card__summary">
+                        Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями
+                        автоматизации и Smart OCR.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Web App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/ai-platform-primo-rpa/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="task-tracker.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Таск-трекер для бек-офис системы</h3>
+                      <p class="portfolio-card__summary">
+                        Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по
+                        исполнителям; вкладки, фильтры, виды доска / список / таблица, Drag&amp;Drop.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">Product Design</li>
+                        <li class="portfolio-card__tag">Web App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/task-tracker/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="manu-game-maker.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Игровой движок MANU</h3>
+                      <p class="portfolio-card__summary">
+                        Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и
+                        проработка сотен сложных пользовательских сценариев.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">Product Design</li>
+                        <li class="portfolio-card__tag">Desktop App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/manu-game-maker/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="lunacy.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Графический редактор Lunacy</h3>
+                      <p class="portfolio-card__summary">
+                        Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и
+                        интерфейсной логики.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Desktop App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/lunacy/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="mobile-clinic-app.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Мобильное приложение для сети клиник</h3>
+                      <p class="portfolio-card__summary">
+                        Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом
+                        пользовательском пути, понятной навигации и быстром доступе к нужным действиям.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Mobile App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/mobile-clinic-app/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="task-distribution-concept.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Концепт сервиса распределения задач</h3>
+                      <p class="portfolio-card__summary">
+                        Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность
+                        процессов и удобство командной работы.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Analytics</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/task-distribution-concept/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="obsidian-plugin-columns-view.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Колоночный вид — плагин для Obsidian</h3>
+                      <p class="portfolio-card__summary">
+                        Интерфейс для многоколоночной работы с заметками: удобная навигация, фильтрация и настройка
+                        колончатого отображения прямо в редакторе Obsidian.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Plugin</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="../assets/obsidian-plugin-columns-view/filter use.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <div class="projects-carousel__spacer" aria-hidden="true"></div>
+              </div>
+            </div>
+            <button
+              type="button"
+              class="projects-carousel__edge-hit projects-carousel__edge-hit--left"
+              data-projects-edge-prev
+              aria-label="Прокрутить портфолио влево"
+            ></button>
+            <button
+              type="button"
+              class="projects-carousel__edge-hit projects-carousel__edge-hit--right"
+              data-projects-edge-next
+              aria-label="Прокрутить портфолио вправо"
+            ></button>
+          </div>
+        </div>
+      </section>
+
+<section id="contact" class="section section--surface section--footerish">
+      <div class="section__inner">
+        <h2 class="section__title">Контакты</h2>
+        <ul class="contact-grid">
+          <li><a class="contact-card contact-card--link contact-card--brand-tg" href="https://t.me/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../assets/shared/icons/tg.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Telegram</span><span class="contact-card__hint">Отвечу сегодня</span></span></a></li>
+          <li><a class="contact-card contact-card--link contact-card--brand-vk" href="https://vk.com/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../assets/shared/icons/vk.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">ВКонтакте</span><span class="contact-card__hint">Стабильный коннект</span></span></a></li>
+          <li><a class="contact-card contact-card--link contact-card--brand-ya" href="https://yandex.ru/chat/p/727e71fa-89b5-44a8-90a5-851021631a1c?utm_source=invite" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../assets/shared/icons/yandex_telemost.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Яндекс</span><span class="contact-card__hint">Да, тут тоже можно</span></span></a></li>
+          <li><button type="button" class="contact-card contact-card--action contact-card--brand-email" data-contact-copy data-email-b64="bmlrQG1hbWFkYWV2di5ydQ==" data-hint-default="Скопировать адрес" aria-label="Скопировать адрес электронной почты в буфер обмена"><span class="contact-card__corner contact-card__corner--copy" aria-hidden="true"></span><span class="contact-card__icon contact-card__icon--accent" aria-hidden="true"></span><span class="contact-card__body"><span class="contact-card__name">Почта</span><span class="contact-card__hint" data-contact-copy-hint>Скопировать адрес</span></span></button></li>
+        </ul>
+      </div>
+    </section>
+
+<section class="section section--surface" aria-hidden="true">
+      <div class="section__inner"></div>
+    </section>
+
+<footer class="footer">
+      <div class="footer__inner">
+        <span class="footer__chunk footer__chunk--date">© 2026<span class="footer__sep" aria-hidden="true"> · </span></span>
+        <span class="footer__chunk footer__chunk--main">Дизайн и разработка сайта — Николай Мамадаев</span>
+        <span class="footer__chunk footer__chunk--meta footer__attr"><span class="footer__sep" aria-hidden="true"> · </span><a href="../cases/design-system.html">Design System</a><span class="footer__sep" aria-hidden="true"> · </span><a href="../cookie-policy.html">Политика cookie</a></span>
+      </div>
+    </footer>
+
+<aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
+      <p class="cookie-notice__text">
+        Сайт использует cookie для комфортной работы. Подробнее — в
+        <a href="../cookie-policy.html" data-cookie-policy-link>политике cookie</a>.
+      </p>
+      <button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
+        <span>Принять</span>
+        <span class="cookie-notice__accept-icon" aria-hidden="true">
+          <img src="../assets/shared/icons/сookie.svg" alt="" width="20" height="20" loading="eager" decoding="async" />
+        </span>
+      </button>
+    </aside>
+
+<div id="nav-more-menu-floating" class="nav-more__floating" hidden data-nav-more-menu-floating aria-hidden="true"></div>
+
+
+  </body>
+</html>
+
+
+
diff --git a/public/cookie-policy.html b/public/cookie-policy.html
new file mode 100644
index 0000000..50bf814
--- /dev/null
+++ b/public/cookie-policy.html
@@ -0,0 +1,320 @@
+<!DOCTYPE html>
+<html lang="ru" data-theme="dark" data-radius="medium">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta
+      name="description"
+      content="Как на сайте-портфолио Николая Мамадаева используются cookie, localStorage и связанные технологии браузера."
+    />
+    <title>Политика cookie — Николай Мамадаев</title>
+    <script>
+      (function () {
+        var FONT_CSS = {
+          merriweather: "assets/fonts/merriweather.css",
+          geologica: "assets/fonts/geologica.css",
+          mono: "assets/fonts/mono.css",
+        };
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f !== "merriweather" && f !== "mono" && f !== "geologica") f = "merriweather";
+          d.dataset.font = f;
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+          var href = FONT_CSS[f];
+          if (href && !document.querySelector('link[data-theme-font="' + f + '"]')) {
+            var link = document.createElement("link");
+            link.rel = "stylesheet";
+            link.href = href;
+            link.setAttribute("data-theme-font", f);
+            document.head.appendChild(link);
+          }
+        } catch (e) {}
+      })();
+    </script>
+
+    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png" />
+    <link rel="manifest" href="assets/favicon/site.webmanifest" />
+    <link rel="preload" href="assets/fonts/merriweather.css" as="style" />
+    <link rel="preload" href="css/main.css" as="style" />
+    <link rel="preload" href="js/skill-connectors.js" as="script" />
+    <link rel="modulepreload" href="js/main.js" />
+    <link rel="stylesheet" href="css/main.css" />
+    <script src="js/skill-connectors.js" defer></script>
+    <script type="module" src="js/main.js"></script>
+
+
+    <style>
+      .cookie-policy-doc {
+        max-width: 48rem;
+        margin: 0 auto;
+      }
+      .cookie-policy-doc h2 {
+        margin: 2rem 0 0.75rem;
+        font-size: clamp(1.15rem, 2vw, 1.35rem);
+        font-weight: 700;
+        color: var(--text);
+      }
+      .cookie-policy-doc .section__prose + .section__prose {
+        margin-top: 0.75rem;
+      }
+      .cookie-policy-doc table {
+        width: 100%;
+        border-collapse: collapse;
+        margin: 0.75rem 0 1rem;
+        font-size: 0.92rem;
+        color: var(--text-muted);
+      }
+      .cookie-policy-doc th,
+      .cookie-policy-doc td {
+        border: 1px solid var(--border);
+        padding: 0.5rem 0.65rem;
+        text-align: left;
+        vertical-align: top;
+      }
+      .cookie-policy-doc th {
+        color: var(--text);
+        font-weight: 600;
+        background: color-mix(in srgb, var(--surface-elevated) 80%, transparent);
+      }
+      .cookie-policy-doc code {
+        font-family: var(--font);
+        font-size: 0.88em;
+        color: var(--text);
+      }
+      .cookie-policy-doc .section__prose a {
+        color: var(--accent);
+      }
+    </style>
+
+  </head>
+  <body>
+    <a class="skip-link" href="#main">К основному содержимому</a>
+
+    <header class="header" data-theme-picker>
+      <div class="header__inner">
+        <a class="logo" href="index.html" aria-label="На главную">НМ</a>
+        <div class="header__cluster">
+          <nav class="nav" aria-label="Навигация">
+            <a href="index.html">На главную</a>
+          </nav>
+        </div>
+      </div>
+    </header>
+
+<div class="fab-stack" aria-label="Быстрые действия">
+      <div class="theme-panel-fab-wrap">
+        <button type="button" class="fab fab--secondary glass-neutral" data-theme-panel-btn aria-expanded="false" aria-controls="theme-panel" aria-label="Настройки стиля">
+          <span class="theme-panel-fab__icon theme-panel-fab__icon--open-hide" aria-hidden="true"></span>
+          <svg class="theme-panel-fab__icon theme-panel-fab__icon--close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          </svg>
+        </button>
+        <div id="theme-panel" class="theme-picker__panel glass-neutral" role="dialog" aria-label="Тема и оформление" hidden data-theme-panel>
+          <div class="theme-picker__stack">
+            <section class="theme-picker__section" aria-labelledby="theme-accent-title">
+              <h3 id="theme-accent-title" class="theme-picker__section-title">Акцентный цвет</h3>
+              <div class="colorpicker" data-colorpicker>
+                <div class="colorpicker__plane-box">
+                  <canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Насыщенность и светлость акцента"></canvas>
+                  <div class="colorpicker__knob" data-sl-knob></div>
+                </div>
+                <div class="colorpicker__hue-wrap">
+                  <label class="colorpicker__hue-sr" for="theme-hue-slider">Оттенок акцента</label>
+                  <input id="theme-hue-slider" class="colorpicker__hue" type="range" min="0" max="360" value="210" data-hue-slider aria-valuemin="0" aria-valuemax="360" />
+                </div>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-mode-title">
+              <h3 id="theme-mode-title" class="theme-picker__section-title">Тема</h3>
+              <div class="radius-seg theme-mode-seg" role="radiogroup" aria-labelledby="theme-mode-title">
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="system" aria-label="Как в системе"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--system"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="light" aria-label="Светлая тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--light"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="dark" aria-label="Тёмная тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--dark"></span></span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-radius-title">
+              <h3 id="theme-radius-title" class="theme-picker__section-title">Скругление углов</h3>
+              <div class="radius-seg" role="radiogroup" aria-labelledby="theme-radius-title">
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="soft" aria-label="Слабое скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--soft"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="medium" aria-label="Среднее скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--medium"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="strong" aria-label="Сильное скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--strong"></span></span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-typography-title">
+              <h3 id="theme-typography-title" class="theme-picker__section-title">Типографика</h3>
+              <div class="radius-seg" role="radiogroup" aria-labelledby="theme-typography-title">
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="geologica" aria-label="Sans"><span class="theme-font-seg__label">Sans</span></button>
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="merriweather" aria-label="Sans Serif"><span class="theme-font-seg__label">Sans Serif</span></button>
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="mono" aria-label="Mono"><span class="theme-font-seg__label">Mono</span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-mesh-bg-title">
+              <h3 id="theme-mesh-bg-title" class="theme-picker__section-title">Фон страницы</h3>
+              <div class="radius-seg radius-seg--two" role="radiogroup" aria-labelledby="theme-mesh-bg-title">
+                <button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="on" aria-label="Показать фоновый градиент"><span class="theme-mesh-bg-seg__label">Вкл</span></button>
+                <button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="off" aria-label="Скрыть фоновый градиент"><span class="theme-mesh-bg-seg__label">Выкл</span></button>
+              </div>
+            </section>
+          </div>
+        </div>
+      </div>
+      <a class="fab fab--primary" href="index.html#contact" aria-label="Связаться">
+        <span class="fab-primary__ico" aria-hidden="true"></span>
+      </a>
+    </div>
+<div class="content-edit-fab-stack" aria-label="Правки контента" data-content-edit-ui>
+  <button
+    type="button"
+    class="fab fab--secondary glass-neutral content-edit-fab"
+    data-content-edit-mode-toggle
+    hidden
+    aria-pressed="false"
+    aria-label="Режим правок контента"
+    title="Режим правок"
+  >
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <path
+        d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0 0-3L16.5 4.5a2.12 2.12 0 0 0-3 0L3 15v5z"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linejoin="round"
+      />
+    </svg>
+    <span class="content-edit-fab__badge" hidden aria-hidden="true">0</span>
+  </button>
+</div>
+
+
+<main id="main" class="section section--tight">
+      <div class="section__inner cookie-policy-doc">
+        <p class="hero__eyebrow">Юридическая информация</p>
+        <h1 class="case-page__h1">Политика использования файлов cookie и локального хранилища</h1>
+        <p class="section__prose"><strong>Дата последнего обновления:</strong> 9 мая 2026 г.</p>
+        <p class="section__prose">
+          Настоящий документ описывает, как на личном сайте-портфолио Николая Мамадаева (далее — «сайт») используются технологии хранения данных в браузере.
+        </p>
+
+        <h2 id="operator">Кто отвечает за сайт</h2>
+        <p class="section__prose">
+          Оператором сайта является <strong>Николай Мамадаев</strong>. По вопросам обработки данных используйте контакты в блоке «Контакты» на
+          <a href="index.html#contact">главной странице</a>
+          (Telegram, ВКонтакте, Яндекс и почта через копирование адреса кнопкой).
+        </p>
+
+        <h2 id="http-cookie">Используются ли HTTP cookie</h2>
+        <p class="section__prose">
+          В текущей версии сайта <strong>сторонние рекламные или аналитические HTTP cookie не подключаются</strong>. В разметке страниц нет счётчиков аналитики (например, Яндекс.Метрики или Google Analytics), которые обычно устанавливают собственные cookie.
+        </p>
+        <p class="section__prose">
+          При размещении сайта на хостинге или за прокси технические записи (например, журналы сервера с IP-адресом и временем запроса) могут обрабатываться хостинг-провайдером по его документам — это не настраивается кодом данного сайта.
+        </p>
+
+        <h2 id="local-storage">Local Storage и аналогичные технологии браузера</h2>
+        <p class="section__prose">
+          Для удобства работы сайт сохраняет на вашем устройстве небольшие объёмы данных через <strong>механизм localStorage</strong> в браузере (это не HTTP cookie, но по смыслу близко к ним и также относится к хранению на стороне клиента).
+        </p>
+        <p class="section__prose">Используются следующие ключи:</p>
+        <table>
+          <thead>
+            <tr>
+              <th scope="col">Ключ</th>
+              <th scope="col">Назначение</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>siteThemeV1</code></td>
+              <td>
+                Настройки оформления: тема (светлая/тёмная/системная), оттенок, скругления, шрифт, фон и связанные параметры панели темы.
+              </td>
+            </tr>
+            <tr>
+              <td><code>siteCookieConsentV1</code></td>
+              <td>Значение <code>accepted</code>, если вы нажали «Принять» в уведомлении о cookie; после этого баннер скрывается.</td>
+            </tr>
+          </tbody>
+        </table>
+        <p class="section__prose">
+          Эти данные <strong>не передаются на сервер сайта</strong> автоматически: они остаются только в вашем браузере.
+        </p>
+
+        <h2 id="retention">Срок хранения</h2>
+        <p class="section__prose">
+          Данные в localStorage сохраняются до тех пор, пока вы <strong>не удалите их вручную</strong> (очистка данных сайта / полное удаление данных браузера) или пока браузер не сбросит хранилище по своим правилам.
+        </p>
+
+        <h2 id="consent">Согласие и отказ</h2>
+        <p class="section__prose">
+          Нажимая «Принять» в баннере, вы подтверждаете, что ознакомились с настоящей политикой. Если вы не нажимаете «Принять», баннер остаётся доступным; функциональность сайта при этом по возможности сохраняется, но запись о согласии не создаётся.
+        </p>
+        <p class="section__prose">
+          Вы можете в любой момент <strong>очистить localStorage</strong> для этого сайта в настройках браузера — при этом сбросятся сохранённые тема и отметка о принятии уведомления, и баннер может снова отобразиться.
+        </p>
+
+        <h2 id="changes">Изменения</h2>
+        <p class="section__prose">
+          Текст политики может обновляться при изменении технологий на сайте. Актуальная версия публикуется на странице «Политика cookie» по адресу <a href="cookie-policy.html">/cookie-policy.html</a> относительно корня сайта.
+        </p>
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="footer__inner">
+        <span class="footer__chunk footer__chunk--date">© 2026<span class="footer__sep" aria-hidden="true"> · </span></span>
+        <span class="footer__chunk footer__chunk--main">Дизайн и разработка сайта — Николай Мамадаев</span>
+        <span class="footer__chunk footer__chunk--meta footer__attr"><span class="footer__sep" aria-hidden="true"> · </span><a href="cases/design-system.html">Design System</a><span class="footer__sep" aria-hidden="true"> · </span><a href="cookie-policy.html">Политика cookie</a></span>
+      </div>
+    </footer>
+
+<aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
+      <p class="cookie-notice__text">
+        Сайт использует cookie для комфортной работы. Подробнее — в
+        <a href="cookie-policy.html" data-cookie-policy-link>политике cookie</a>.
+      </p>
+      <button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
+        <span>Принять</span>
+        <span class="cookie-notice__accept-icon" aria-hidden="true">
+          <img src="assets/shared/icons/сookie.svg" alt="" width="20" height="20" loading="eager" decoding="async" />
+        </span>
+      </button>
+    </aside>
+
+
+
+  </body>
+</html>
diff --git a/public/css/main.css b/public/css/main.css
new file mode 100644
index 0000000..aa6ca2e
--- /dev/null
+++ b/public/css/main.css
@@ -0,0 +1,5063 @@
+/* Базовые числа темы (переопределяются из localStorage и пикера) */
+html {
+  --theme-h: 210;
+  --theme-s: 90;
+  --theme-l: 40;
+  --mesh-a-x: 2%;
+  --mesh-a-y: 2%;
+  --mesh-b-x: 50%;
+  --mesh-b-y: 2%;
+  --mesh-c-x: 98%;
+  --mesh-c-y: 2%;
+  --mesh-a-mult: 1;
+  --mesh-b-mult: 1;
+  --mesh-c-mult: 1;
+  --mesh-size-mult: 1.5;
+  --mesh-opacity-max: 1;
+  --mesh-opacity-min: 0;
+  --mesh-opacity-current: 1;
+  --neutral-accent-tint: 4%;
+  --accent: hsl(var(--theme-h) calc(var(--theme-s) * 1%) calc(var(--theme-l) * 1%));
+  --accent-square-2-h: calc((var(--theme-h) + 90) * 1deg);
+  --accent-square-3-h: calc((var(--theme-h) + 180) * 1deg);
+  --accent-square-4-h: calc((var(--theme-h) + 270) * 1deg);
+  --accent-square-2: hsl(var(--accent-square-2-h) calc(var(--theme-s) * 1%) calc(var(--theme-l) * 1%));
+  --accent-square-3: hsl(var(--accent-square-3-h) calc(var(--theme-s) * 1%) calc(var(--theme-l) * 1%));
+  --accent-square-4: hsl(var(--accent-square-4-h) calc(var(--theme-s) * 1%) calc(var(--theme-l) * 1%));
+  --accent-text: var(--accent);
+  --accent-btn-radial-core: color-mix(
+    in hsl,
+    hsl(var(--theme-h) calc(var(--theme-s) * 1%) calc((var(--theme-l) + 8) * 1%)),
+    white 6%
+  );
+  --accent-btn-radial-mid: color-mix(in hsl, var(--accent-analog), hsl(var(--theme-h) calc(var(--theme-s) * 1%) calc(var(--theme-l) * 1%)) 45%);
+  --accent-btn-radial-edge: color-mix(in hsl, var(--accent-analog), black 15%);
+  /* Базовая шкала скруглений; карточки и кнопки используют один уровень */
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-card: 14px;
+  --radius-btn: 14px;
+  --space: clamp(1rem, 4vw, 2.75rem);
+  /* Контент на всю ширину экрана, поля только от --space и safe area */
+  --max: none;
+  --font: "Alice", system-ui, -apple-system, serif;
+  --font-accent: "Merriweather", var(--font);
+  --neutral-s: 5%;
+  /* Иконки UI: фиксированный размер по типу элемента */
+  --icon-fab: 1.25rem;
+  --icon-nav-overflow: 1.125rem;
+  --icon-contact: 1.5rem;
+  --icon-contact-meta: 1.125rem;
+}
+
+html[data-theme="dark"] {
+  color-scheme: dark;
+  --bg: color-mix(in hsl, hsl(var(--theme-h), 6%, 10%), var(--accent) var(--neutral-accent-tint));
+  --bg-elevated: color-mix(in hsl, hsl(var(--theme-h), 6%, 13%), var(--accent) var(--neutral-accent-tint));
+  --surface: color-mix(in hsl, hsl(var(--theme-h), 6%, 17%), var(--accent) var(--neutral-accent-tint));
+  --accent-text: color-mix(in hsl, var(--accent), white 10%);
+  --page-bg:
+    radial-gradient(
+      calc(48% * var(--mesh-size-mult)) calc(56% * var(--mesh-size-mult)) at var(--mesh-a-x) var(--mesh-a-y),
+      color-mix(in srgb, var(--accent-square-3) calc(52% * var(--mesh-a-mult)), var(--bg)) 0%,
+      transparent 62%
+    ),
+    radial-gradient(
+      calc(48% * var(--mesh-size-mult)) calc(56% * var(--mesh-size-mult)) at var(--mesh-b-x) var(--mesh-b-y),
+      color-mix(in srgb, var(--accent-square-2) calc(44% * var(--mesh-b-mult)), var(--bg)) 0%,
+      transparent 64%
+    ),
+    radial-gradient(
+      calc(52% * var(--mesh-size-mult)) calc(60% * var(--mesh-size-mult)) at var(--mesh-c-x) var(--mesh-c-y),
+      color-mix(in srgb, var(--accent-square-4) calc(36% * var(--mesh-c-mult)), var(--bg)) 0%,
+      transparent 68%
+    );
+  --text: hsl(var(--theme-h), 4%, 92%);
+  --text-muted: color-mix(in hsl, hsl(var(--theme-h), 5%, 58%), var(--accent) 6%);
+  --line: color-mix(in hsl, hsla(var(--theme-h), 8%, 48%, 0.18), var(--accent) 5%);
+  --accent-hover: color-mix(in hsl, hsl(var(--theme-h) calc(var(--theme-s) * 1%) calc(var(--theme-l) * 1%)), white 18%);
+  --accent-soft: color-mix(in hsl, hsl(var(--theme-h) calc(var(--theme-s) * 1%) calc(var(--theme-l) * 1%)), transparent 82%);
+  --shadow-strong: 0 24px 60px hsla(0, 0%, 0%, 0.45);
+  /* Карточки навыков: зона решений */
+  --skill-solutions-bg: color-mix(in srgb, var(--bg-elevated) 55%, var(--surface));
+  --skill-solutions-top-border: var(--line);
+  --skill-solution-separator: color-mix(in srgb, var(--line) 92%, var(--text-muted));
+  --img-ph-shine-peak: color-mix(in srgb, var(--text) 25%, var(--surface) 75%);
+  /* Кнопки primary: радиальный акцент + стекло (общие с .fab--primary) */
+  --btn-primary-border: color-mix(
+    in srgb,
+    hsl(var(--theme-h) calc(var(--theme-s) * 1%) calc(var(--theme-l) * 1%)) 55%,
+    hsla(0, 0%, 100%, 0.12)
+  );
+  --btn-primary-bg: radial-gradient(
+    circle at 0% 0%,
+    color-mix(in hsl, var(--accent), white 10%) 0%,
+    var(--accent) 100%
+  );
+  --btn-primary-hover-bg: radial-gradient(
+    circle at 0% 0%,
+    color-mix(in hsl, var(--accent), white 14%) 0%,
+    var(--accent) 100%
+  );
+  /* flat: без «парения» и фаски — только обводка (--btn-primary-border) */
+  --btn-primary-shadow-flat: none;
+  --btn-primary-shadow-raised:
+    0 14px 34px color-mix(in srgb, hsl(var(--theme-h) calc(var(--theme-s) * 1%) calc(var(--theme-l) * 1%)) 22%, hsla(0, 0%, 0%, 0.5)),
+    inset 0 1px 0 hsla(0, 0%, 100%, 0.14),
+    inset 0 -1px 0 color-mix(in srgb, hsl(var(--theme-h) calc(var(--theme-s) * 1%) calc(var(--theme-l) * 1%)) 22%, transparent);
+  --btn-primary-shadow-hover:
+    0 16px 40px color-mix(in srgb, hsl(var(--theme-h) calc(var(--theme-s) * 1%) calc(var(--theme-l) * 1%)) 28%, hsla(0, 0%, 0%, 0.48)),
+    inset 0 1px 0 hsla(0, 0%, 100%, 0.18),
+    inset 0 -1px 0 color-mix(in srgb, hsl(var(--theme-h) calc(var(--theme-s) * 1%) calc(var(--theme-l) * 1%)) 18%, transparent);
+  --btn-primary-backdrop: blur(16px) saturate(135%);
+  --btn-primary-backdrop-hover: blur(18px) saturate(140%);
+  --btn-primary-sheen: linear-gradient(
+    155deg,
+    hsla(0, 0%, 100%, 0.1) 0%,
+    hsla(0, 0%, 100%, 0.03) 50%,
+    color-mix(in srgb, var(--accent-soft) 32%, transparent) 100%
+  );
+}
+
+html[data-radius="soft"] {
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-card: 4px;
+  --radius-btn: 4px;
+}
+
+html[data-radius="strong"] {
+  --radius-sm: 11px;
+  --radius-md: 16px;
+  --radius-card: 20px;
+  --radius-btn: 20px;
+}
+
+html[data-font="merriweather"] {
+  --font: "Alice", system-ui, -apple-system, serif;
+  --font-accent: "Merriweather", var(--font);
+}
+
+html[data-font="geologica"] {
+  --font: "PT Sans", system-ui, -apple-system, sans-serif;
+  --font-accent: "Geologica", var(--font);
+}
+
+html[data-font="mono"] {
+  --font: "PT Mono", ui-monospace, "Cascadia Code", "Consolas", monospace;
+  --font-accent: "Source Code Pro", var(--font);
+}
+
+html[data-theme="light"] {
+  color-scheme: light;
+  --bg: color-mix(in hsl, hsl(var(--theme-h), 6%, 97%), var(--accent) var(--neutral-accent-tint));
+  --bg-elevated: color-mix(in hsl, hsl(var(--theme-h), 5%, 94%), var(--accent) var(--neutral-accent-tint));
+  --surface: color-mix(in hsl, hsl(var(--theme-h), 6%, 100%), var(--accent) var(--neutral-accent-tint));
+  --accent-text: color-mix(in hsl, var(--accent), black 14%);
+  --page-bg:
+    radial-gradient(
+      calc(48% * var(--mesh-size-mult)) calc(56% * var(--mesh-size-mult)) at var(--mesh-a-x) var(--mesh-a-y),
+      color-mix(in srgb, var(--accent-square-3) calc(38% * var(--mesh-a-mult)), var(--bg)) 0%,
+      transparent 62%
+    ),
+    radial-gradient(
+      calc(48% * var(--mesh-size-mult)) calc(56% * var(--mesh-size-mult)) at var(--mesh-b-x) var(--mesh-b-y),
+      color-mix(in srgb, var(--accent-square-2) calc(32% * var(--mesh-b-mult)), var(--bg)) 0%,
+      transparent 64%
+    ),
+    radial-gradient(
+      calc(52% * var(--mesh-size-mult)) calc(60% * var(--mesh-size-mult)) at var(--mesh-c-x) var(--mesh-c-y),
+      color-mix(in srgb, var(--accent-square-4) calc(26% * var(--mesh-c-mult)), var(--bg)) 0%,
+      transparent 68%
+    );
+  --text: hsl(var(--theme-h), 8%, 14%);
+  --text-muted: color-mix(in hsl, hsl(var(--theme-h), 7%, 40%), var(--accent) 7%);
+  --line: color-mix(in hsl, hsla(var(--theme-h), 10%, 38%, 0.16), var(--accent) 6%);
+  --accent-hover: color-mix(in hsl, hsl(var(--theme-h) calc(var(--theme-s) * 1%) calc(var(--theme-l) * 1%)), black 14%);
+  --accent-soft: color-mix(in hsl, hsl(var(--theme-h) calc(var(--theme-s) * 1%) calc(var(--theme-l) * 1%)), transparent 88%);
+  --shadow-strong: 0 20px 48px hsla(var(--theme-h), 20%, 20%, 0.08);
+  /* Зона решений: светлее чем --bg-elevated (~#efeff0), ближе к странице/белому */
+  --skill-solutions-bg: color-mix(in srgb, var(--surface) 82%, var(--bg) 18%);
+  --skill-solutions-top-border: color-mix(in srgb, var(--line), var(--text) 7%);
+  --skill-solution-separator: color-mix(in srgb, var(--line), var(--text) 11%);
+  --img-ph-shine-peak: color-mix(in srgb, var(--text) 15%, var(--surface) 85%);
+  --btn-primary-border: color-mix(in srgb, var(--accent) 48%, hsl(0 0% 0% / 0.16));
+  --btn-primary-bg: radial-gradient(
+    circle at 0% 0%,
+    color-mix(in hsl, var(--accent), white 10%) 0%,
+    var(--accent) 100%
+  );
+  --btn-primary-hover-bg: radial-gradient(
+    circle at 0% 0%,
+    color-mix(in hsl, var(--accent), white 14%) 0%,
+    var(--accent) 100%
+  );
+  --btn-primary-shadow-flat: none;
+  --btn-primary-shadow-raised:
+    0 14px 28px color-mix(in srgb, hsl(var(--theme-h) calc(var(--theme-s) * 1%) calc(var(--theme-l) * 1%)) 24%, hsla(0, 0%, 0%, 0.18)),
+    inset 0 1px 0 color-mix(in srgb, var(--accent) 40%, hsl(0 0% 100%) 60%),
+    inset 0 -1px 0 color-mix(in srgb, var(--accent) 35%, hsl(0 0% 0%) 65%);
+  --btn-primary-shadow-hover:
+    0 16px 34px color-mix(in srgb, hsl(var(--theme-h) calc(var(--theme-s) * 1%) calc(var(--theme-l) * 1%)) 28%, hsla(0, 0%, 0%, 0.2)),
+    inset 0 1px 0 color-mix(in srgb, var(--accent) 35%, hsl(0 0% 100%) 65%),
+    inset 0 -1px 0 color-mix(in srgb, var(--accent) 32%, hsl(0 0% 0%) 68%);
+  --btn-primary-backdrop: blur(10px) saturate(142%);
+  --btn-primary-backdrop-hover: blur(11px) saturate(148%);
+  --btn-primary-sheen: linear-gradient(
+    155deg,
+    color-mix(in srgb, var(--accent) 55%, hsl(0 0% 100%) 45%) 0%,
+    transparent 52%,
+    color-mix(in srgb, var(--accent) 70%, hsl(0 0% 0%) 30%) 100%
+  );
+}
+
+/* Фон и цвет на корне: без этого просвечивает белый фон документа и «хвосты» светлой темы */
+html[data-theme="dark"],
+html[data-theme="light"] {
+  min-height: 100%;
+  background-color: var(--bg);
+  color: var(--text);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+  /* запас под sticky header; точнее задаётся --header-offset из JS */
+  scroll-padding-top: var(--header-offset, 4.25rem);
+}
+
+body {
+  margin: 0;
+  min-height: 100dvh;
+  font-family: var(--font);
+  font-size: 1rem;
+  line-height: 1.55;
+  color: var(--text);
+  background-color: transparent;
+  position: relative;
+  -webkit-font-smoothing: antialiased;
+}
+
+.page-mesh-bg {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+html[data-mesh-bg="off"] .page-mesh-bg {
+  visibility: hidden;
+}
+
+.page-mesh-bg::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image: var(--page-bg);
+  background-repeat: no-repeat;
+  background-size: 100% 100dvh;
+  background-position: top center;
+  background-blend-mode: normal;
+  opacity: var(--mesh-opacity-current);
+}
+
+.mesh-panel {
+  position: fixed;
+  left: max(0.75rem, env(safe-area-inset-left, 0px));
+  bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
+  z-index: 120;
+  width: min(230px, calc(100vw - 1.5rem));
+  padding: 0.65rem 0.7rem;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--line);
+}
+
+.mesh-panel__title {
+  margin: 0 0 0.5rem;
+  font-size: 0.72rem;
+  line-height: 1.2;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.mesh-panel__row {
+  display: grid;
+  grid-template-columns: 5.2rem minmax(0, 1fr) 2.3rem;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.mesh-panel__row + .mesh-panel__row {
+  margin-top: 0.35rem;
+}
+
+.mesh-panel__row--toggle {
+  grid-template-columns: 5.2rem auto;
+}
+
+.mesh-panel__label {
+  font-size: 0.72rem;
+  line-height: 1.25;
+  color: var(--text-muted);
+}
+
+.mesh-panel__value {
+  font-size: 0.68rem;
+  line-height: 1;
+  color: var(--text-muted);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.mesh-panel input[type="checkbox"] {
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+  accent-color: var(--accent-text);
+}
+
+.mesh-panel input[type="range"] {
+  width: 100%;
+  margin: 0;
+  accent-color: var(--accent-text);
+}
+
+#main {
+  color: var(--text);
+  background-color: transparent;
+  margin-top: 0;
+}
+
+.header--scrolled ~ #main {
+  margin-top: 3.75rem;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+/* Заглушка: ::before — статичный фон, ::after — один бегущий блеск */
+.has-img-loading {
+  position: relative;
+  overflow: hidden;
+  background-color: transparent;
+}
+
+.has-img-loading::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background-color: color-mix(in srgb, var(--text-muted) 11%, var(--surface));
+}
+
+/* У обёрток со своим фоном — не дублируем серый слой */
+.mp-card__media.has-img-loading::before,
+.case-media-gallery__item.has-img-loading::before {
+  content: none;
+}
+
+.has-img-loading::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 260%;
+  height: 100%;
+  z-index: 1;
+  pointer-events: none;
+  /* Узкая полоса блеска; слой шире тайла — без обрезки краёв градиента */
+  background-image: linear-gradient(
+    105deg,
+    transparent 0%,
+    transparent 40%,
+    var(--img-ph-shine-peak) 50%,
+    transparent 60%,
+    transparent 100%
+  );
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-position: 50% 50%;
+  transform: translateX(-100%);
+  animation: img-ph-shine-sweep 3.4s linear infinite;
+}
+
+.has-img-loading img.is-img-loading {
+  opacity: 0;
+}
+
+.has-img-loading img:not(.is-img-loading) {
+  opacity: 1;
+  transition: opacity 0.28s ease;
+}
+
+@keyframes img-ph-shine-sweep {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(38.5%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .has-img-loading::after {
+    content: none;
+  }
+}
+
+.img-ph-demo {
+  max-width: 18rem;
+  aspect-ratio: 16 / 9;
+  margin: 0.85rem 0 1.2rem;
+}
+
+a {
+  color: var(--accent-text);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.2em;
+}
+
+a:hover {
+  color: var(--accent-hover);
+}
+
+/* Только «текстовые» ссылки: .btn / .fab / .logo задают цвет сами, иначе :visited перебивает --on-accent */
+a:visited:not(.btn):not(.fab):not(.logo):not(.skip-link) {
+  color: color-mix(in hsl, var(--accent) 10%, var(--text) 90%);
+}
+
+a:visited:not(.btn):not(.fab):not(.logo):not(.skip-link):hover {
+  color: color-mix(in hsl, var(--accent-hover) 14%, var(--text) 86%);
+}
+
+::selection {
+  background: var(--accent-soft);
+  color: var(--text);
+}
+
+.skip-link {
+  position: absolute;
+  left: -9999px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.skip-link:focus {
+  position: fixed;
+  left: var(--space);
+  top: var(--space);
+  z-index: 100;
+  width: auto;
+  height: auto;
+  padding: 0.75rem 1rem;
+  background: var(--accent);
+  color: var(--on-accent);
+  font-weight: 600;
+  border-radius: var(--radius-md);
+}
+
+.header {
+  position: relative;
+  top: 0;
+  z-index: 50;
+  background: transparent;
+  transition: background 0.25s ease;
+}
+
+.header--scrolled {
+  background: transparent;
+  height: 0;
+  overflow: visible;
+}
+
+.header__inner {
+  max-width: var(--max);
+  width: 100%;
+  margin: 0 auto;
+  padding: 0.8rem max(var(--space), env(safe-area-inset-right, 0px), env(safe-area-inset-left, 0px));
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: nowrap;
+}
+
+.header--scrolled .header__inner {
+  position: fixed;
+  top: max(0.42rem, env(safe-area-inset-top, 0px));
+  left: auto;
+  right: max(var(--space), env(safe-area-inset-right, 0px));
+  width: fit-content;
+  max-width: min(
+    980px,
+    calc(
+      100% - max(var(--space), env(safe-area-inset-left, 0px)) -
+        max(var(--space), env(safe-area-inset-right, 0px))
+    )
+  );
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding: 0.8rem;
+  border: 1px solid var(--line);
+  border-radius: calc(var(--radius-card) * 0.7);
+  background: var(--bg-elevated);
+  box-shadow: 0 16px 38px hsla(0, 0%, 0%, 0.2);
+  animation: header-float-in 0.24s cubic-bezier(0.22, 0.8, 0.24, 1);
+  justify-content: flex-start;
+  gap: 0.75rem;
+}
+
+@keyframes header-float-in {
+  from {
+    transform: translateY(-118%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.header--scrolled .logo {
+  width: 2.15rem;
+  height: 2.15rem;
+  font-size: 0.75rem;
+}
+
+.header--scrolled .nav {
+  font-size: 0.84rem;
+  gap: 0.45rem 0.72rem;
+}
+
+.header--scrolled .nav-more__btn {
+  width: 32px;
+  height: 32px;
+}
+
+.header--scrolled .header__cluster {
+  flex: 0 1 auto;
+  margin-left: 0;
+}
+
+.header__cluster {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-left: auto;
+  flex: 1 1 auto;
+  min-width: 0;
+  /* overflow не hidden: иначе обрезается .nav-more__menu (position:absolute снизу) */
+  overflow: visible;
+}
+
+.logo {
+  display: grid;
+  flex-shrink: 0;
+  place-items: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--radius-sm);
+  background: var(--accent-soft);
+  color: var(--accent-text);
+  font-weight: 700;
+  font-size: 0.85rem;
+  letter-spacing: 0.02em;
+  text-decoration: none;
+}
+
+.logo:hover {
+  color: var(--accent-hover);
+}
+
+.logo:visited {
+  color: var(--accent-text);
+}
+
+.nav {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+  gap: 0.65rem 0.95rem;
+  font-size: 0.9rem;
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.nav a {
+  color: var(--text-muted);
+  text-decoration: none;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+}
+
+.nav a:visited {
+  color: var(--text-muted);
+}
+
+.nav a:hover {
+  color: var(--text);
+}
+
+/* --- Overflow навигации + панель темы --- */
+.nav-more {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.nav-more__btn {
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--text-muted);
+  cursor: pointer;
+}
+
+.nav-more__btn:hover {
+  color: var(--text);
+  background: var(--accent-soft);
+}
+
+.nav-more__btn svg {
+  width: var(--icon-nav-overflow);
+  height: var(--icon-nav-overflow);
+  display: block;
+  flex-shrink: 0;
+}
+
+.nav-more__btn[aria-expanded="true"] {
+  color: var(--accent-text);
+}
+
+/* Два отдельных контейнера: док (шапка) и плавающий (body). Общая сетка ссылок — без общего класса «menu». */
+.nav-more__dock,
+.nav-more__floating {
+  min-width: 12rem;
+  padding: 0.35rem;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--line);
+  box-shadow: var(--shadow-strong);
+}
+
+.nav-more__dock {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 90;
+  background: var(--bg-elevated);
+}
+
+/* Плавающая панель: fixed + координаты из JS; фон — токены v12-glass внизу файла */
+#nav-more-menu-floating.nav-more__floating {
+  position: fixed;
+  top: var(--nav-more-menu-top, 0px);
+  left: var(--nav-more-menu-left, 0px);
+  right: auto;
+  z-index: 140;
+  margin: 0;
+}
+
+.nav-more__dock a,
+.nav-more__floating a {
+  display: block;
+  padding: 0.5rem 0.6rem;
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.nav-more__dock a:hover,
+.nav-more__floating a:hover {
+  color: var(--text);
+  background: var(--accent-soft);
+}
+
+.fab[data-theme-panel-btn] {
+  display: grid;
+  place-items: center;
+}
+
+.theme-panel-fab__icon {
+  grid-area: 1 / 1;
+  line-height: 1;
+  color: inherit;
+  pointer-events: none;
+}
+
+.theme-panel-fab__icon--close {
+  display: block;
+  width: var(--icon-fab);
+  height: var(--icon-fab);
+}
+
+.theme-panel-fab__icon--open-hide {
+  display: block;
+  flex-shrink: 0;
+  width: var(--icon-fab);
+  height: var(--icon-fab);
+  background: currentColor;
+  mask-image: url("../assets/shared/icons/design_edit.svg");
+  -webkit-mask-image: url("../assets/shared/icons/design_edit.svg");
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+}
+
+.theme-mode-seg .theme-mode-seg__ico {
+  display: block;
+  width: var(--icon-fab);
+  height: var(--icon-fab);
+  background: currentColor;
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+}
+
+.theme-mode-seg__ico--system {
+  mask-image: url("../assets/shared/icons/system.svg");
+  -webkit-mask-image: url("../assets/shared/icons/system.svg");
+}
+
+.theme-mode-seg__ico--light {
+  mask-image: url("../assets/shared/icons/sun.svg");
+  -webkit-mask-image: url("../assets/shared/icons/sun.svg");
+}
+
+.theme-mode-seg__ico--dark {
+  mask-image: url("../assets/shared/icons/moon.svg");
+  -webkit-mask-image: url("../assets/shared/icons/moon.svg");
+}
+
+.fab-primary__ico {
+  display: block;
+  width: var(--icon-fab);
+  height: var(--icon-fab);
+  background: currentColor;
+  mask-image: url("../assets/shared/icons/chat_start.svg");
+  -webkit-mask-image: url("../assets/shared/icons/chat_start.svg");
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+}
+
+[data-theme-panel-btn][aria-expanded="true"] .theme-panel-fab__icon--open-hide {
+  display: none;
+}
+
+[data-theme-panel-btn][aria-expanded="false"] .theme-panel-fab__icon--close {
+  display: none;
+}
+
+/* Панель темы привязана к FAB настроек: абсолют внутри .theme-panel-fab-wrap */
+.theme-panel-fab-wrap {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.theme-picker__panel {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 0.5rem);
+  width: min(calc(320px + 2.2rem), calc(100vw - 2 * var(--space)));
+  max-height: min(85vh, calc(100dvh - 5rem));
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  padding: 1rem 1.1rem;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--line);
+  background: var(--bg-elevated);
+  box-shadow: var(--shadow-strong);
+  z-index: 1;
+}
+
+.theme-picker__panel[hidden] {
+  display: none !important;
+}
+
+.fab-stack {
+  position: fixed;
+  right: max(var(--space), env(safe-area-inset-right, 0px));
+  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.6rem;
+  z-index: 92;
+}
+
+.fab {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 3rem;
+  min-height: 3rem;
+  padding: 0.7rem 1rem;
+  border-radius: 999px;
+  border: 1px solid var(--line);
+  text-decoration: none;
+  color: var(--text);
+  background: var(--surface);
+  box-shadow: var(--shadow-strong);
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.fab--primary {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  width: 3rem;
+  min-width: 3rem;
+  min-height: 3rem;
+  padding: 0;
+  border: 1px solid var(--btn-primary-border);
+  background: var(--btn-primary-bg);
+  backdrop-filter: var(--btn-primary-backdrop);
+  -webkit-backdrop-filter: var(--btn-primary-backdrop);
+  box-shadow: var(--btn-primary-shadow-raised);
+  color: var(--on-accent);
+  font-weight: 600;
+  transition:
+    background 0.2s ease,
+    color 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.2s ease,
+    backdrop-filter 0.2s ease;
+}
+
+.fab--primary::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  z-index: 0;
+  background: var(--btn-primary-sheen);
+}
+
+html[data-theme="light"] .fab--primary::after {
+  opacity: 0.42;
+}
+
+.fab--primary::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: radial-gradient(
+    circle 3rem at var(--btn-shine-x, 50%) var(--btn-shine-y, 50%),
+    color-mix(in hsl, hsl(var(--theme-h) calc(var(--theme-s) * 1%) calc(var(--theme-l) * 1%)), white 52%) 0%,
+    transparent 55%
+  );
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  pointer-events: none;
+  z-index: 2;
+  mix-blend-mode: soft-light;
+}
+
+.fab--primary:hover::before {
+  opacity: 0.58;
+}
+
+a.fab--primary:visited {
+  color: var(--on-accent);
+  background: var(--btn-primary-bg);
+}
+
+.fab--primary > * {
+  position: relative;
+  z-index: 3;
+}
+
+.fab--primary:hover {
+  color: var(--on-accent);
+  border-color: var(--btn-primary-border);
+  background: var(--btn-primary-hover-bg);
+  backdrop-filter: var(--btn-primary-backdrop-hover);
+  -webkit-backdrop-filter: var(--btn-primary-backdrop-hover);
+  box-shadow: var(--btn-primary-shadow-hover);
+}
+
+.fab--primary:focus-visible {
+  color: var(--on-accent);
+  border-color: var(--btn-primary-border);
+  background: var(--btn-primary-hover-bg);
+  backdrop-filter: var(--btn-primary-backdrop-hover);
+  -webkit-backdrop-filter: var(--btn-primary-backdrop-hover);
+  box-shadow: var(--btn-primary-shadow-hover);
+  outline: 2px solid color-mix(in hsl, var(--accent) 65%, var(--text));
+  outline-offset: 2px;
+}
+
+.fab--secondary {
+  width: 3rem;
+  padding: 0;
+  color: var(--text-muted);
+}
+
+a.fab--secondary:visited {
+  color: var(--text-muted);
+}
+
+.fab--secondary:hover {
+  color: var(--accent-text);
+  background: var(--bg-elevated);
+  border-color: color-mix(in hsl, var(--accent) 38%, var(--line));
+  box-shadow: var(--shadow-strong);
+}
+
+.fab--secondary:focus-visible {
+  color: var(--accent-text);
+  background: var(--bg-elevated);
+  border-color: color-mix(in hsl, var(--accent) 45%, var(--line));
+  outline: 2px solid color-mix(in hsl, var(--accent) 50%, var(--line));
+  outline-offset: 2px;
+}
+
+.theme-picker__stack {
+  display: flex;
+  flex-direction: column;
+  gap: 1.1rem;
+}
+
+.theme-picker__section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.theme-picker__section-title {
+  margin: 0;
+  font-size: 0.68rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--text-muted);
+}
+
+/* Segmented: слабое / среднее / сильное скругление */
+.radius-seg {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.4rem;
+  padding: 0;
+  border: none;
+  background: transparent;
+}
+
+.radius-seg--two {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.radius-seg__btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  padding: 0.5rem 0.25rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-family: inherit;
+  transition:
+    background 0.15s ease,
+    color 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.radius-seg__btn:hover {
+  color: var(--text);
+  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
+}
+
+.radius-seg__btn[aria-checked="true"] {
+  background: var(--accent-soft);
+  color: var(--accent-text);
+  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
+}
+
+.theme-font-seg__btn {
+  min-height: 44px;
+  padding: 0.5rem 0.25rem;
+}
+
+.theme-font-seg__label {
+  display: block;
+  font-size: 0.78rem;
+  line-height: 1.15;
+  letter-spacing: 0.01em;
+}
+
+.theme-font-seg__btn[data-font-option="merriweather"] .theme-font-seg__label {
+  font-family: "Merriweather", serif;
+}
+
+.theme-font-seg__btn[data-font-option="mono"] .theme-font-seg__label {
+  font-family: "Source Code Pro", monospace;
+}
+
+.theme-font-seg__btn[data-font-option="geologica"] .theme-font-seg__label {
+  font-family: "Geologica", sans-serif;
+}
+
+.theme-mesh-bg-seg__btn {
+  min-height: 44px;
+  padding: 0.5rem 0.35rem;
+}
+
+.theme-mesh-bg-seg__label {
+  display: block;
+  font-size: 0.78rem;
+  line-height: 1.15;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+.radius-seg__viz {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 44px;
+  height: 44px;
+}
+
+.radius-seg__arc {
+  display: block;
+  width: 28px;
+  height: 28px;
+  box-sizing: border-box;
+  border-left: 2px solid currentColor;
+  border-top: 2px solid currentColor;
+  opacity: 0.88;
+}
+
+.radius-seg__arc--soft {
+  border-top-left-radius: 4px;
+}
+
+.radius-seg__arc--medium {
+  border-top-left-radius: 14px;
+}
+
+.radius-seg__arc--strong {
+  border-top-left-radius: 26px;
+}
+
+/* Colorpicker: S/L 16:9 + горизонтальный оттенок, общая ширина блоков */
+.colorpicker {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: min(100%, 320px);
+  margin-inline: auto;
+}
+
+.colorpicker__plane-box {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  border: 1px solid var(--line);
+  touch-action: none;
+}
+
+.colorpicker__plane {
+  display: block;
+  width: 100%;
+  height: 100%;
+  cursor: crosshair;
+  vertical-align: middle;
+}
+
+.colorpicker__knob {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  margin: -10px 0 0 -10px;
+  border: 1px solid hsla(0, 0%, 0%, 0.32);
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, 0.45);
+  pointer-events: none;
+}
+
+.colorpicker__hue-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.colorpicker__hue-wrap {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0;
+  line-height: 0;
+}
+
+.colorpicker__hue {
+  -webkit-appearance: none;
+  appearance: none;
+  display: block;
+  width: 100%;
+  /* Высота ≈ thumb (20px), без лишней «полки» под трек */
+  height: 22px;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.colorpicker__hue::-webkit-slider-runnable-track {
+  height: 14px;
+  border-radius: 7px;
+  border: 1px solid var(--line);
+  background: linear-gradient(
+    to right,
+    hsl(0 100% 50%),
+    hsl(60 100% 45%),
+    hsl(120 100% 40%),
+    hsl(180 100% 40%),
+    hsl(240 100% 52%),
+    hsl(300 100% 50%),
+    hsl(360 100% 50%)
+  );
+}
+
+.colorpicker__hue::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  margin-top: -4px;
+  border-radius: 50%;
+  border: 1px solid hsla(0, 0%, 0%, 0.32);
+  background: #fff;
+  box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, 0.45);
+}
+
+.colorpicker__hue::-moz-range-track {
+  height: 14px;
+  border-radius: 7px;
+  border: 1px solid var(--line);
+  background: linear-gradient(
+    to right,
+    hsl(0 100% 50%),
+    hsl(60 100% 45%),
+    hsl(120 100% 40%),
+    hsl(180 100% 40%),
+    hsl(240 100% 52%),
+    hsl(300 100% 50%),
+    hsl(360 100% 50%)
+  );
+}
+
+.colorpicker__hue::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 1px solid hsla(0, 0%, 0%, 0.32);
+  background: #fff;
+  box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, 0.45);
+}
+
+.hero {
+  padding: calc(2 * clamp(2.5rem, 6vw, 4.5rem)) calc(2 * max(var(--space), env(safe-area-inset-right, 0px))) calc(2 * clamp(2rem, 5vw, 3.5rem)) calc(2 * max(var(--space), env(safe-area-inset-left, 0px)));
+}
+
+.hero__grid {
+  max-width: var(--max);
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: clamp(2rem, 5vw, 3rem);
+  align-items: center;
+}
+
+@media (min-width: 860px) {
+  .hero__grid {
+    grid-template-columns: 1.15fr 0.85fr;
+  }
+}
+
+.hero__eyebrow {
+  margin: 0 0 0.5rem;
+  font-size: 0.78rem;
+  font-weight: 700;
+  color: var(--text-muted);
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.hero__title {
+  margin: 0 0 1rem;
+  font-family: var(--font-accent);
+  font-size: clamp(3.1rem, 7.2vw, 4.85rem);
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+  color: var(--text);
+}
+
+html[data-font="geologica"] .hero__title {
+  line-height: 1;
+}
+
+html[data-font="mono"] .hero__title {
+  line-height: 1;
+}
+
+.hero-rotator {
+  position: relative;
+  display: inline-flex;
+  align-items: baseline;
+  vertical-align: baseline;
+  min-width: 8.5ch;
+  min-height: 0.92em;
+}
+
+.hero-rotator__word {
+  display: inline-block;
+  min-width: 100%;
+  white-space: pre;
+  color: var(--accent-text);
+  letter-spacing: var(--hero-slot-spacing, 0);
+  transition: letter-spacing 0.26s ease;
+}
+
+.hero-rotator__char {
+  display: inline-block;
+  transition: color 0.12s linear;
+}
+
+/* Превью кейса: pages/cases/*.html (без полной оболочки главной) */
+.case-page__h1 {
+  margin: 0 0 0.5rem;
+  font-family: var(--font-accent);
+  font-size: clamp(1.35rem, 2.6vw, 1.95rem);
+  font-weight: 700;
+  line-height: 1.2;
+  color: var(--text);
+  text-transform: none;
+  letter-spacing: -0.02em;
+}
+
+.case-article h2:not(.section__title),
+.case-article h3:not(.section__title):not(.mp-card__title) {
+  font-family: var(--font-accent);
+}
+
+.case-article h3:not(.section__title):not(.mp-card__title) {
+  margin: 3.25rem 0 1.5rem;
+}
+
+.case-article h2 + h3:not(.section__title):not(.mp-card__title) {
+  margin-top: 2.25rem;
+}
+
+.case-article h3 + h3:not(.section__title):not(.mp-card__title) {
+  margin-top: 3.5rem;
+}
+
+.case-article figure + h3:not(.section__title):not(.mp-card__title) {
+  margin-top: 4rem;
+}
+
+.case-page__sub {
+  margin: 0 0 1.25rem;
+  font-size: clamp(1rem, 1.35vw, 1.1rem);
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+.case-page__code {
+  font-size: 0.88rem;
+  word-break: break-all;
+}
+
+/* Inline-код в лонгридах кейса (`metric_name` и т.п.) */
+.case-article code {
+  font-family: ui-monospace, "Cascadia Code", "Consolas", "Courier New", monospace;
+  font-size: 0.86em;
+  font-weight: 400;
+  padding: 0.1em 0.4em;
+  border-radius: 6px;
+  vertical-align: 0.04em;
+  color: var(--accent-text);
+  background: color-mix(in srgb, var(--bg) 42%, var(--surface) 58%);
+  border: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+  word-break: break-word;
+}
+
+.case-article pre {
+  max-width: 100%;
+  overflow: auto;
+  padding: 0.9rem 1rem;
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--bg) 32%, var(--surface) 68%);
+  border: 1px solid var(--line);
+}
+
+.case-article pre code {
+  padding: 0;
+  border: none;
+  background: none;
+  font-size: inherit;
+  font-weight: inherit;
+  vertical-align: baseline;
+  word-break: normal;
+  white-space: pre;
+  color: inherit;
+}
+
+/* Внутренние страницы: быстрый флаг скрытия хедера (легко вернуть, убрав класс). */
+body.case-page--hide-header .header {
+  display: none;
+}
+
+.case-links-grid {
+  display: grid;
+  gap: 0.75rem;
+  margin: 0.85rem 0 1.15rem;
+}
+
+.case-link-card {
+  display: grid;
+  grid-template-columns: 96px minmax(0, 1fr);
+  gap: 1rem;
+  align-items: center;
+  padding: 1rem 1.1rem;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--line);
+  background: color-mix(in srgb, var(--surface) 82%, transparent);
+  text-decoration: none;
+  color: inherit;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
+}
+
+.case-link-card:hover,
+.case-link-card:focus-visible {
+  border-color: var(--accent);
+  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 18%, transparent);
+  transform: translateY(-1px);
+}
+
+.case-link-card:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--accent) 44%, transparent);
+  outline-offset: 2px;
+}
+
+.case-link-card__media {
+  display: block;
+  width: 96px;
+  height: 72px;
+  border-radius: calc(var(--radius-md) - 4px);
+  overflow: hidden;
+  border: 1px solid var(--line);
+  background: color-mix(in srgb, var(--surface-soft) 70%, transparent);
+}
+
+.case-link-card__media img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  object-fit: cover;
+}
+
+.case-link-card__body {
+  min-width: 0;
+  display: grid;
+  gap: 0.2rem;
+}
+
+.case-link-card__title {
+  font-weight: 700;
+  font-size: 0.98rem;
+  line-height: 1.2;
+  color: var(--text);
+}
+
+.case-link-card__meta {
+  font-size: 0.88rem;
+  line-height: 1.35;
+  color: var(--text-muted);
+}
+
+.case-link-card__url {
+  font-size: 0.78rem;
+  line-height: 1.2;
+  color: color-mix(in srgb, var(--accent) 72%, var(--text));
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.case-link-card--favicon {
+  grid-template-columns: 24px minmax(0, 1fr);
+  align-items: center;
+}
+
+.case-link-card--favicon .case-link-card__media {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+  min-height: 24px;
+  border-radius: 6px;
+  padding: 0;
+  background: color-mix(in srgb, var(--surface) 64%, var(--accent) 7%);
+  overflow: hidden;
+  flex-shrink: 0;
+  line-height: 0;
+  box-sizing: border-box;
+}
+
+.case-link-card--favicon .case-link-card__media img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  margin: 0;
+  object-fit: contain;
+  object-position: center;
+}
+
+/* Картинки в кейсах: 3 ширины + fullscreen viewer */
+.case-media {
+  margin: 0.85rem 0 1.2rem;
+}
+
+.case-media img {
+  display: block;
+  height: auto;
+}
+
+.case-media .plyr {
+  border-radius: 0;
+  overflow: hidden;
+  --plyr-color-main: var(--accent);
+  --plyr-video-range-track-background: color-mix(in srgb, var(--text-muted) 36%, var(--surface));
+  --plyr-control-spacing: 0.75rem;
+  --plyr-control-icon-size: 14px;
+  --plyr-video-control-color: var(--text-muted);
+  --plyr-video-control-color-hover: var(--accent);
+  --plyr-control-radius: 999px;
+  --plyr-menu-color: var(--text);
+  --plyr-menu-background: color-mix(in srgb, var(--surface) 92%, var(--bg) 8%);
+  --plyr-tooltip-background: color-mix(in srgb, var(--surface) 92%, var(--bg) 8%);
+  --plyr-tooltip-color: var(--text);
+  --plyr-video-controls-background: linear-gradient(
+    to top,
+    color-mix(in srgb, var(--bg) 72%, transparent) 0%,
+    color-mix(in srgb, var(--bg) 40%, transparent) 42%,
+    transparent 100%
+  );
+}
+
+.case-media .plyr--video .plyr__controls {
+  margin: 0;
+  padding: 0;
+  min-height: 3rem;
+  width: 100%;
+  border-radius: 0;
+  border: 0;
+  border-top: 1px solid color-mix(in srgb, var(--line) 92%, transparent);
+  background: color-mix(in srgb, var(--surface) 84%, var(--bg) 16%);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  align-items: center;
+}
+
+.case-media .plyr--video .plyr__controls .plyr__control {
+  height: calc(3rem - 2px);
+  min-height: calc(3rem - 2px);
+  width: calc(3rem - 2px);
+  min-width: calc(3rem - 2px);
+  border-radius: 0;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.case-media .plyr--video .plyr__controls .plyr__progress__container {
+  height: auto;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.case-media .plyr--video .plyr__controls .plyr__progress {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.case-media .plyr--video .plyr__controls .plyr__progress input[type="range"] {
+  width: 100%;
+  min-width: 0;
+}
+
+.case-media .case-video-shell {
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  box-sizing: border-box;
+  border: 1px solid var(--line);
+  box-shadow: none;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.case-media .case-video-shell:hover,
+.case-media .case-video-shell:focus-within {
+  border-color: var(--accent);
+  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 18%, transparent);
+}
+
+.case-media .case-plyr video,
+.case-media .plyr video {
+  width: 100% !important;
+  height: auto !important;
+  max-height: none;
+  object-fit: contain;
+  object-position: center;
+  border-radius: 0 !important;
+}
+
+/* Fullscreen (API и fallback Plyr): кадр целиком, без cover по ширине */
+.plyr--fullscreen-active,
+.plyr--fullscreen-fallback,
+.plyr:fullscreen,
+.plyr:-webkit-full-screen {
+  background: #000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.plyr--fullscreen-active .plyr__video-wrapper,
+.plyr--fullscreen-fallback .plyr__video-wrapper,
+.plyr:fullscreen .plyr__video-wrapper,
+.plyr:-webkit-full-screen .plyr__video-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  max-height: none;
+}
+
+.case-plyr.case-plyr--fullscreen video,
+.case-plyr--fullscreen-fallback video,
+.case-plyr.plyr--fullscreen-fallback video,
+.plyr--fullscreen-active video,
+.plyr--fullscreen-active .plyr__video-wrapper video,
+.plyr--fullscreen-fallback video,
+.plyr--fullscreen-fallback .plyr__video-wrapper video,
+.plyr:fullscreen video,
+.plyr:-webkit-full-screen video,
+video:fullscreen,
+video:-webkit-full-screen {
+  width: auto !important;
+  height: auto !important;
+  max-width: 100% !important;
+  max-height: 100% !important;
+  object-fit: contain !important;
+  object-position: center;
+  margin: auto;
+}
+
+.case-media .plyr__video-wrapper,
+.case-media .plyr__poster,
+.case-media .plyr__video-embed {
+  border-radius: 0 !important;
+  border: 0 !important;
+  box-shadow: none !important;
+}
+
+.case-media .plyr__control {
+  color: var(--text-muted);
+}
+
+.case-media .plyr__control:hover,
+.case-media .plyr__control:focus-visible {
+  color: var(--accent-text);
+  background: var(--bg-elevated);
+  border-color: color-mix(in hsl, var(--accent) 38%, var(--line));
+}
+
+.case-media .plyr__control--overlaid {
+  background: color-mix(in srgb, var(--surface) 88%, var(--bg) 12%);
+  border: 1px solid color-mix(in srgb, var(--line) 92%, transparent);
+  color: var(--text-muted);
+}
+
+.case-media .plyr__control--overlaid:hover {
+  background: var(--bg-elevated);
+  color: var(--accent-text);
+  border-color: color-mix(in hsl, var(--accent) 38%, var(--line));
+}
+
+.case-media figcaption {
+  margin-top: 0.3rem;
+  font-size: 0.86rem;
+  line-height: 1.35;
+  color: var(--text-muted);
+}
+
+.case-media:has(.case-video-shell) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.case-media:has(.case-video-shell) > .case-video-shell {
+  width: 100%;
+}
+
+.case-media:has(.case-video-shell) > figcaption {
+  width: 100%;
+  margin-top: 0;
+  text-align: center;
+}
+
+.case-media--natural img {
+  width: auto;
+  max-width: 100%;
+  margin-inline: auto;
+}
+
+.case-media--natural {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.case-media--content img {
+  width: 100%;
+  max-width: 100%;
+}
+
+.case-media--wide {
+  width: min(calc(100vw - (max(var(--space), env(safe-area-inset-left)) + max(var(--space), env(safe-area-inset-right)))), calc(100% + 8rem));
+  margin-left: 50%;
+  transform: translateX(-50%);
+}
+
+.case-media--wide img {
+  width: 100%;
+  max-width: 100%;
+  margin-inline: auto;
+}
+
+/* Длинный скрин: ширина по колонке (content) или «широкая» (wide), см. data-case-tall-width */
+.case-media[data-case-tall-media][data-case-tall-width="wide"]:not(.case-media--wide) {
+  width: min(calc(100vw - (max(var(--space), env(safe-area-inset-left)) + max(var(--space), env(safe-area-inset-right)))), calc(100% + 8rem));
+  margin-left: 50%;
+  transform: translateX(-50%);
+}
+
+.case-media[data-case-tall-media][data-case-tall-width="wide"] .case-media-tall__clip > img,
+.case-media.case-media--wide[data-case-tall-media] .case-media-tall__clip > img {
+  width: 100%;
+  max-width: 100%;
+  margin-inline: auto;
+}
+
+.case-media[data-case-tall-media][data-case-tall-width="wide"] .case-media-tall,
+.case-media.case-media--wide[data-case-tall-media] .case-media-tall {
+  width: 100%;
+}
+
+/* Длинный скрин: обрезка по высоте, туман и кнопка внутри рамки превью */
+.case-media-tall {
+  position: relative;
+  box-sizing: border-box;
+  border: 0;
+  background: none;
+}
+
+.case-media-tall__clip {
+  position: relative;
+  max-height: var(--case-tall-max, min(70vh, 32rem));
+  overflow: hidden;
+  transition: max-height 0.38s ease;
+}
+
+.case-media-tall--expanded .case-media-tall__clip {
+  max-height: none;
+  overflow: visible;
+}
+
+.case-media-tall--reduced-motion .case-media-tall__clip {
+  transition: none;
+}
+
+.case-media-tall__clip > img {
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+.case-media-tall__fog {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  height: min(58%, 15rem);
+  min-height: 5.5rem;
+  pointer-events: none;
+  visibility: visible;
+  opacity: 1;
+  background: linear-gradient(
+    to top,
+    color-mix(in srgb, var(--bg) 99.5%, transparent) 0%,
+    color-mix(in srgb, var(--bg) 96%, transparent) 12%,
+    color-mix(in srgb, var(--bg) 78%, transparent) 38%,
+    color-mix(in srgb, var(--bg) 38%, transparent) 68%,
+    transparent 100%
+  );
+  transition: opacity 0.22s ease, visibility 0.22s ease;
+}
+
+.case-media-tall--expanded .case-media-tall__fog {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.case-media-tall__actions {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0.65rem 0.5rem 0.75rem;
+  border: 0;
+  background: none;
+  pointer-events: none;
+}
+
+.case-media-tall__actions .case-media-tall__btn {
+  pointer-events: auto;
+}
+
+.case-media-tall__btn.btn.btn--ghost {
+  gap: 0.45rem;
+  min-width: unset;
+  padding: 0.45rem 0.65rem;
+  color: var(--accent-text);
+  border-color: transparent !important;
+  background: transparent !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+  box-shadow: none !important;
+}
+
+.case-media-tall__btn.btn.btn--ghost:hover,
+.case-media-tall__btn.btn.btn--ghost:focus-visible {
+  color: var(--accent-hover);
+  border-color: transparent !important;
+  background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+}
+
+.case-media-tall__btn-chev {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  background: currentColor;
+  mask-image: url("../assets/shared/icons/shevron-down.svg");
+  -webkit-mask-image: url("../assets/shared/icons/shevron-down.svg");
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+}
+
+.case-media-tall--expanded .case-media-tall__btn .case-media-tall__btn-chev {
+  mask-image: url("../assets/shared/icons/shevron-up.svg");
+  -webkit-mask-image: url("../assets/shared/icons/shevron-up.svg");
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .case-media-tall__clip {
+    transition: none;
+  }
+
+  .case-media-tall__fog {
+    transition: none;
+  }
+}
+
+/* Галерея изображений сеткой: число колонок на широком экране — CSS-переменная --case-gallery-cols на figure */
+.case-media-gallery {
+  --case-gallery-cols: 3;
+}
+
+.case-media-gallery > figcaption {
+  width: 100%;
+  text-align: center;
+}
+
+.case-media-gallery__grid {
+  display: grid;
+  gap: 0.65rem;
+  grid-template-columns: repeat(var(--case-gallery-cols), minmax(0, 1fr));
+}
+
+@media (max-width: 48rem) {
+  .case-media-gallery__grid {
+    grid-template-columns: repeat(min(2, var(--case-gallery-cols)), minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 28rem) {
+  .case-media-gallery__grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.case-media-gallery__item {
+  min-width: 0;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  border: 1px solid var(--line);
+  background: color-mix(in srgb, var(--surface) 60%, var(--bg) 40%);
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.case-media-gallery__item:has(> img[data-image-viewer]:not([data-src])):not(.has-img-loading) {
+  padding: 0;
+  border: none;
+  background: none;
+  overflow: visible;
+}
+
+/* Заглушка: клип по тайлу (viewer снимает overflow только после load) */
+.case-media-gallery__item.has-img-loading {
+  overflow: hidden;
+  border: 1px solid var(--line);
+}
+
+
+.case-media-gallery__item img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.case-media-gallery--wide {
+  width: min(calc(100vw - (max(var(--space), env(safe-area-inset-left)) + max(var(--space), env(safe-area-inset-right)))), calc(100% + 8rem));
+  margin-left: 50%;
+  transform: translateX(-50%);
+}
+
+.case-callout {
+  width: min(calc(100vw - (max(var(--space), env(safe-area-inset-left)) + max(var(--space), env(safe-area-inset-right)))), calc(100% + 8rem));
+  margin: 1.8rem 0 2.4rem;
+  margin-left: 50%;
+  padding: 0.95rem 1.1rem;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: start;
+  gap: 0.72rem;
+  border-radius: var(--radius-md);
+  transform: translateX(-50%);
+  background: color-mix(in srgb, var(--surface) 84%, var(--bg) 16%);
+}
+
+.case-callout__emoji {
+  display: inline-grid;
+  place-items: center;
+  min-width: 1.65rem;
+  min-height: 1.65rem;
+  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", emoji, sans-serif;
+  font-size: clamp(1.05rem, 1.75vw, 1.3rem);
+  line-height: 1;
+  font-style: normal;
+  font-variant-emoji: emoji;
+  color: unset;
+  -webkit-text-fill-color: unset;
+  transform-origin: center;
+}
+
+.case-callout__emoji--pulse {
+  animation: case-callout-emoji-pulse 0.6s ease-in-out infinite;
+}
+
+.case-callout__content {
+  min-width: 0;
+  font-size: clamp(1.05rem, 1.45vw, 1.125rem);
+  line-height: 1.6;
+  color: var(--text);
+}
+
+.case-callout__content > :first-child {
+  margin-top: 0;
+}
+
+.case-callout__content > :last-child {
+  margin-bottom: 0;
+}
+
+.case-callout:has(.case-callout__content > p:only-child),
+.case-callout:has(.case-callout__content > :only-child) {
+  align-items: center;
+}
+
+@keyframes case-callout-emoji-pulse {
+  0%,
+  100% {
+    transform: scale(1);
+    filter: saturate(1);
+  }
+  50% {
+    transform: scale(1.12);
+    filter: saturate(1.15);
+  }
+}
+
+/* Кликабельные кадры (viewer): рамка на кадре, figcaption снаружи и по центру под картинкой */
+.case-media:has(> img[data-image-viewer]:not([data-src])),
+.case-media:has(.case-media-tall__clip > img[data-image-viewer]:not([data-src])) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+/* Перебивает margin у `.case-article img` в локальных <style> страниц кейсов */
+.case-article .case-media > img[data-image-viewer],
+.case-article .case-media-gallery__item > img[data-image-viewer],
+.case-article .case-media-tall__clip > img[data-image-viewer] {
+  margin: 0;
+}
+
+.case-media:has(> img[data-image-viewer]:not([data-src])) > figcaption,
+.case-media:has(.case-media-tall__clip > img[data-image-viewer]:not([data-src])) > figcaption {
+  width: 100%;
+  margin-top: 0;
+  text-align: center;
+}
+
+.case-media:not(.case-media--natural) > img[data-image-viewer]:not([data-src]),
+.case-media-gallery__item > img[data-image-viewer]:not([data-src]) {
+  box-sizing: border-box;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--line);
+  box-shadow: none;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.case-media-tall:has(.case-media-tall__clip > img[data-image-viewer]:not([data-src])) {
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  border: 1px solid var(--line);
+  box-shadow: none;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.case-media-tall:has(.case-media-tall__clip > img[data-image-viewer]:not([data-src])) .case-media-tall__clip {
+  border: none;
+  box-shadow: none;
+}
+
+.case-media:not(.case-media--natural):has(> img[data-image-viewer]:not([data-src]):hover) > img[data-image-viewer]:not([data-src]),
+.case-media:not(.case-media--natural):has(> img[data-image-viewer]:not([data-src]):focus-visible) > img[data-image-viewer]:not([data-src]),
+.case-media-gallery__item:has(> img[data-image-viewer]:not([data-src]):hover) > img[data-image-viewer]:not([data-src]),
+.case-media-gallery__item:has(> img[data-image-viewer]:not([data-src]):focus-within) > img[data-image-viewer]:not([data-src]),
+.case-media:has(.case-media-tall__clip > img[data-image-viewer]:not([data-src]):hover) .case-media-tall,
+.case-media:has(.case-media-tall__clip > img[data-image-viewer]:not([data-src]):focus-visible) .case-media-tall {
+  border-color: var(--accent);
+  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 18%, transparent);
+}
+
+img[data-image-viewer]:not([data-src]) {
+  cursor: zoom-in;
+}
+
+img[data-image-viewer]:not([data-src]):focus-visible {
+  outline: none;
+}
+
+.case-media--natural img[data-image-viewer] {
+  cursor: default;
+}
+
+.case-image-viewer {
+  position: fixed;
+  inset: 0;
+  z-index: 1400;
+  background: color-mix(in srgb, var(--bg) 58%, black);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  opacity: 0;
+  transition: opacity 0.18s ease;
+}
+
+.case-image-viewer.is-open {
+  opacity: 1;
+}
+
+.case-image-viewer[hidden] {
+  display: none;
+}
+
+html.imgv-lock,
+html.imgv-lock body {
+  overflow: hidden;
+}
+
+html[data-theme="light"] {
+  --imgv-slider-thumb-bg: color-mix(in srgb, white 92%, var(--surface));
+  --imgv-slider-thumb-border: color-mix(in srgb, var(--line) 85%, white);
+}
+
+html[data-theme="dark"] {
+  --imgv-slider-thumb-bg: color-mix(in srgb, var(--surface) 92%, black 8%);
+  --imgv-slider-thumb-border: color-mix(in srgb, var(--line) 82%, black 18%);
+}
+
+.case-image-viewer__toolbar {
+  position: absolute;
+  left: 50%;
+  bottom: max(0.85rem, env(safe-area-inset-bottom));
+  transform: translateX(-50%);
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  padding: 0.6rem;
+  border-radius: 999px;
+  width: max-content;
+  max-width: calc(100vw - max(1rem, env(safe-area-inset-left)) - max(1rem, env(safe-area-inset-right)));
+  opacity: 0;
+  transform: translate(-50%, 18px);
+  transition:
+    transform 0.2s ease,
+    opacity 0.16s ease;
+}
+
+.case-image-viewer.is-open .case-image-viewer__toolbar {
+  opacity: 1;
+  transform: translate(-50%, 0);
+}
+
+.case-image-viewer__zoom {
+  min-width: 3.5rem;
+  text-align: center;
+  font-size: 0.82rem;
+  color: var(--text);
+  font-weight: 600;
+}
+
+.case-image-viewer__slider {
+  flex: 0 0 5.2rem;
+  width: 5.2rem;
+  min-width: 5.2rem;
+  accent-color: var(--accent);
+  appearance: none;
+  -webkit-appearance: none;
+  background: transparent;
+  height: 1rem;
+  padding: 0;
+}
+
+.case-image-viewer__slider::-webkit-slider-runnable-track {
+  height: 0.86rem;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--text-muted) 36%, var(--surface));
+  border: 1px solid color-mix(in srgb, var(--line) 92%, transparent);
+}
+
+.case-image-viewer__slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 0.62rem;
+  height: 0.62rem;
+  margin-top: calc((0.86rem - 0.62rem) / 2 - 1px);
+  border-radius: 999px;
+  border: 1px solid var(--imgv-slider-thumb-border, color-mix(in srgb, var(--line) 85%, white));
+  background: var(--imgv-slider-thumb-bg, color-mix(in srgb, white 92%, var(--surface)));
+}
+
+.case-image-viewer__slider::-moz-range-track {
+  height: 0.86rem;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--text-muted) 36%, var(--surface));
+  border: 1px solid color-mix(in srgb, var(--line) 92%, transparent);
+}
+
+.case-image-viewer__slider::-moz-range-progress {
+  height: 0.86rem;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--text-muted) 36%, var(--surface));
+  border: 1px solid color-mix(in srgb, var(--line) 92%, transparent);
+}
+
+.case-image-viewer__slider::-moz-range-thumb {
+  width: 0.62rem;
+  height: 0.62rem;
+  border-radius: 999px;
+  transform: translateY(-2px);
+  border: 1px solid var(--imgv-slider-thumb-border, color-mix(in srgb, var(--line) 85%, white));
+  background: var(--imgv-slider-thumb-bg, color-mix(in srgb, white 92%, var(--surface)));
+}
+
+.case-image-viewer__slider:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--accent) 54%, var(--line));
+  outline-offset: 3px;
+}
+
+.case-image-viewer__btn.btn {
+  min-width: 2.2rem;
+  min-height: 2.2rem;
+  padding: 0.42rem;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+}
+
+.case-image-viewer__btn.btn:hover,
+.case-image-viewer__btn.btn:focus-visible {
+  color: var(--accent-text);
+  background: var(--bg-elevated);
+  border-color: color-mix(in hsl, var(--accent) 38%, var(--line));
+}
+
+.case-image-viewer__btn-icon {
+  width: 1rem;
+  height: 1rem;
+  display: block;
+  background: currentColor;
+  -webkit-mask-image: var(--imgv-icon);
+  mask-image: var(--imgv-icon);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+}
+
+.case-image-viewer__stage {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) calc(max(1rem, env(safe-area-inset-bottom)) + var(--imgv-toolbar-space, 0px)) max(1rem, env(safe-area-inset-left));
+  cursor: grab;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.case-image-viewer__stage:focus,
+.case-image-viewer__stage:focus-visible {
+  outline: none;
+}
+
+.case-image-viewer__stage::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  display: none;
+}
+
+.case-image-viewer__stage.is-centered {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.case-image-viewer__stage.is-center-y {
+  display: flex;
+  align-items: center;
+}
+
+.case-image-viewer__img {
+  display: block;
+  width: auto;
+  max-width: none;
+  height: auto;
+  margin: 0 auto;
+  cursor: grab;
+  user-select: none;
+  -webkit-user-drag: none;
+  opacity: 0;
+  transform: scale(0.96);
+  transition:
+    transform 0.2s ease,
+    opacity 0.16s ease;
+}
+
+.case-image-viewer__loading {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  z-index: 2;
+  transform: translate(-50%, -50%);
+  min-width: 8.5rem;
+  padding: 0.5rem 0.8rem;
+  border-radius: 999px;
+  text-align: center;
+  font-size: 0.8rem;
+  color: var(--text);
+  background: color-mix(in srgb, var(--surface) 86%, transparent);
+  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.14s ease;
+}
+
+.case-image-viewer.is-loading .case-image-viewer__loading {
+  opacity: 1;
+}
+
+.case-image-viewer.is-loading .case-image-viewer__img {
+  opacity: 0;
+}
+
+.case-image-viewer.is-open .case-image-viewer__img {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.case-image-viewer__stage.is-panning,
+.case-image-viewer__stage.is-panning .case-image-viewer__img {
+  cursor: grabbing;
+}
+
+@media (max-width: 640px) {
+  .case-link-card {
+    grid-template-columns: 1fr;
+  }
+
+  .case-link-card__media {
+    width: 100%;
+    max-width: 160px;
+  }
+
+  .case-link-card--favicon {
+    grid-template-columns: 1fr;
+  }
+
+  .case-link-card--favicon .case-link-card__media {
+    width: 24px;
+    max-width: none;
+    margin-inline: auto;
+  }
+
+  .case-media--wide {
+    width: 100%;
+  }
+
+  .case-media-gallery--wide {
+    width: 100%;
+    margin-left: 0;
+    transform: none;
+  }
+
+  .case-callout {
+    width: 100%;
+    margin-left: 0;
+    transform: none;
+  }
+}
+
+.hero__tags {
+  margin: 0 0 1.5rem;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  max-width: 42rem;
+}
+
+.hero__tag {
+  display: inline-flex;
+  align-items: center;
+  min-height: 2rem;
+  padding: 0.35rem 0.7rem;
+  border-radius: 999px;
+  border: 1px solid var(--line);
+  background: color-mix(in srgb, var(--surface) 78%, transparent);
+  color: var(--text-muted);
+  font-size: 0.88rem;
+  font-weight: 600;
+  line-height: 1.2;
+  white-space: normal;
+}
+
+.hero__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.65rem 1.25rem;
+  border-radius: var(--radius-btn);
+  font-weight: 600;
+  font-size: 0.95rem;
+  text-decoration: none;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font-family: inherit;
+  transition:
+    background 0.2s ease,
+    color 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.2s ease,
+    backdrop-filter 0.2s ease;
+}
+
+.btn:has(.btn__icon) {
+  gap: 0.5rem;
+}
+
+.btn__icon {
+  display: block;
+  width: 1.125rem;
+  height: 1.125rem;
+  flex-shrink: 0;
+  background: currentColor;
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+}
+
+.btn--primary .btn__icon {
+  mask-image: url("../assets/shared/icons/write_me.svg");
+  -webkit-mask-image: url("../assets/shared/icons/write_me.svg");
+}
+
+.btn--secondary .btn__icon {
+  mask-image: url("../assets/shared/icons/portfolio.svg");
+  -webkit-mask-image: url("../assets/shared/icons/portfolio.svg");
+}
+
+.btn--resume .btn__icon {
+  mask-image: url("../assets/shared/icons/cv.svg");
+  -webkit-mask-image: url("../assets/shared/icons/cv.svg");
+}
+
+/* Primary: радиальный акцент (--accent-btn-radial-*) + стекло; по умолчанию «приподнята» */
+.btn--primary {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  border: 1px solid var(--btn-primary-border);
+  background: var(--btn-primary-bg);
+  backdrop-filter: var(--btn-primary-backdrop);
+  -webkit-backdrop-filter: var(--btn-primary-backdrop);
+  box-shadow: var(--btn-primary-shadow-raised);
+  color: var(--on-accent);
+}
+
+.btn--primary.btn--flat {
+  box-shadow: var(--btn-primary-shadow-flat);
+  backdrop-filter: blur(14px) saturate(128%);
+  -webkit-backdrop-filter: blur(14px) saturate(128%);
+}
+
+.btn--primary::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  z-index: 0;
+  background: var(--btn-primary-sheen);
+}
+
+html[data-theme="light"] .btn--primary::after {
+  opacity: 0.42;
+}
+
+/* flat: слабее диагональный блик, меньше «объёма» от глянца */
+.btn--primary.btn--flat::after {
+  opacity: 0.22;
+}
+
+html[data-theme="light"] .btn--primary.btn--flat::after {
+  opacity: 0.28;
+}
+
+.btn--primary::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: radial-gradient(
+    circle 3rem at var(--btn-shine-x, 50%) var(--btn-shine-y, 50%),
+    color-mix(in hsl, hsl(var(--theme-h) calc(var(--theme-s) * 1%) calc(var(--theme-l) * 1%)), white 52%) 0%,
+    transparent 55%
+  );
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  pointer-events: none;
+  z-index: 2;
+  mix-blend-mode: soft-light;
+}
+
+.btn--primary:hover::before {
+  opacity: 0.58;
+}
+
+.btn--primary > * {
+  position: relative;
+  z-index: 3;
+}
+
+.btn--primary:hover {
+  background: var(--btn-primary-hover-bg);
+  backdrop-filter: var(--btn-primary-backdrop-hover);
+  -webkit-backdrop-filter: var(--btn-primary-backdrop-hover);
+  box-shadow: var(--btn-primary-shadow-hover);
+  color: var(--on-accent);
+}
+
+.btn--primary.btn--flat:hover,
+.btn--primary.btn--flat:focus-visible {
+  box-shadow: var(--btn-primary-shadow-flat);
+  backdrop-filter: blur(15px) saturate(132%);
+  -webkit-backdrop-filter: blur(15px) saturate(132%);
+}
+
+a.btn--primary:visited {
+  color: var(--on-accent);
+  background: var(--btn-primary-bg);
+}
+
+.btn--primary:focus-visible {
+  background: var(--btn-primary-hover-bg);
+  backdrop-filter: var(--btn-primary-backdrop-hover);
+  -webkit-backdrop-filter: var(--btn-primary-backdrop-hover);
+  box-shadow: var(--btn-primary-shadow-hover);
+  color: var(--on-accent);
+  outline: 2px solid color-mix(in hsl, var(--accent) 65%, var(--text));
+  outline-offset: 2px;
+}
+
+.btn--primary.btn--flat:focus-visible {
+  box-shadow: var(--btn-primary-shadow-flat);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .btn--primary::before,
+  .fab--primary::before {
+    display: none;
+  }
+
+  .case-callout__emoji--pulse {
+    animation: none;
+  }
+}
+
+/* Secondary: нейтральное стекло (--v12-glass-neutral-*); по умолчанию плоская */
+.btn--secondary,
+.btn--ghost {
+  border: 1px solid var(--v12-glass-neutral-border);
+  color: var(--text);
+  background: var(--v12-glass-neutral-bg);
+  backdrop-filter: var(--v12-glass-neutral-filter);
+  -webkit-backdrop-filter: var(--v12-glass-neutral-filter);
+  box-shadow: none;
+}
+
+.btn--secondary.btn--raised,
+.btn--ghost.btn--raised {
+  box-shadow: var(--v12-glass-neutral-shadow);
+}
+
+.btn--secondary:hover,
+.btn--secondary:focus-visible,
+.btn--ghost:hover,
+.btn--ghost:focus-visible {
+  border-color: color-mix(in srgb, var(--accent) 45%, var(--v12-glass-neutral-border));
+  color: var(--text);
+  backdrop-filter: var(--v12-glass-neutral-filter-elevated);
+  -webkit-backdrop-filter: var(--v12-glass-neutral-filter-elevated);
+}
+
+a.btn--secondary:visited,
+a.btn--ghost:visited {
+  color: var(--text);
+}
+
+.hero__visual {
+  display: flex;
+  justify-content: center;
+  perspective: 1300px;
+  perspective-origin: 50% 50%;
+}
+
+@media (min-width: 860px) {
+  .hero__visual {
+    justify-content: flex-end;
+  }
+}
+
+/*
+ * Оболочка: overflow + скругление — без preserve-3d на том же узле.
+ * Иначе браузер «сплющивает» 3D и параллакс между слоями почти не виден.
+ */
+.hero__portrait-shell {
+  --portrait-bg-pos: 50% 36%;
+  --portrait-cutout-pos: 50% 36%;
+  width: min(100%, 380px, 38vw);
+  aspect-ratio: 1;
+  position: relative;
+  border-radius: var(--radius-card);
+  overflow: hidden;
+  border: 1px solid var(--line);
+  background: var(--surface);
+  box-shadow: var(--shadow-strong);
+}
+
+@media (max-width: 859.98px) {
+  .hero__portrait-shell {
+    width: min(100%, 380px, 88vw);
+  }
+}
+
+.hero__portrait {
+  width: 100%;
+  height: 100%;
+}
+
+.hero__portrait-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.hero__portrait-layers {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.hero__portrait-layer {
+  position: absolute;
+  inset: 0;
+}
+
+.hero__photo-bg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: var(--portrait-bg-pos);
+}
+
+.hero__photo-cutout {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: var(--portrait-cutout-pos);
+}
+
+.hero__photo-motion {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: var(--portrait-cutout-pos);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  pointer-events: none;
+}
+
+.hero__portrait-shell.hero__portrait-shell--motion-visible .hero__photo-motion {
+  opacity: 1;
+}
+
+.hero__portrait-shell::after {
+  content: "";
+  position: absolute;
+  left: 8%;
+  right: 8%;
+  bottom: -1.05rem;
+  height: 1.15rem;
+  border-radius: 999px;
+  pointer-events: none;
+  background: hsla(0, 0%, 0%, 0.24);
+  filter: blur(9px);
+  z-index: -1;
+}
+
+html[data-theme="light"] .hero__portrait-shell::after {
+  background: hsla(var(--theme-h), 25%, 24%, 0.28);
+  filter: blur(12px);
+}
+
+html[data-theme="light"] .hero__portrait-shell {
+  box-shadow:
+    0 16px 26px -10px hsla(var(--theme-h), 26%, 22%, 0.24),
+    0 7px 12px -9px hsla(var(--theme-h), 22%, 24%, 0.16);
+}
+
+.section {
+  padding: calc(2 * clamp(2.5rem, 5vw, 4rem)) calc(2 * max(var(--space), env(safe-area-inset-right, 0px))) calc(2 * clamp(2.5rem, 5vw, 4rem)) calc(2 * max(var(--space), env(safe-area-inset-left, 0px)));
+}
+
+.section--tight {
+  padding-top: calc(2 * clamp(1.75rem, 3vw, 2.5rem));
+  padding-bottom: calc(2 * clamp(1.75rem, 3vw, 2.5rem));
+}
+
+.section--surface {
+  background: transparent;
+}
+
+.section__inner {
+  max-width: var(--max);
+  margin: 0 auto;
+}
+
+.section__title {
+  margin: 0 0 1.25rem;
+  font-family: var(--font);
+  font-size: clamp(0.95rem, 1.35vw, 1.1rem);
+  font-weight: 600;
+  letter-spacing: 0;
+  text-transform: none;
+  color: var(--text-muted);
+}
+
+.section__prose {
+  margin: 0;
+  max-width: 42rem;
+  color: var(--text-muted);
+}
+
+.experience-grid {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  min-height: 1px;
+  overflow: hidden;
+  transition: height 360ms cubic-bezier(0.2, 0.65, 0.25, 1);
+}
+
+.experience-grid__item {
+  margin: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+  transition: transform 320ms cubic-bezier(0.2, 0.65, 0.25, 1);
+}
+
+.experience-grid__item::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: var(--radius-card);
+  padding: 1px;
+  background: radial-gradient(
+    380px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
+    color-mix(in srgb, var(--accent) 92%, transparent),
+    transparent 50%
+  );
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 3;
+  transition: opacity 220ms ease;
+}
+
+.experience-grid:hover .experience-grid__item::before {
+  opacity: 0.38;
+}
+
+.experience-grid__item:hover::before,
+.experience-grid__item:focus-within::before {
+  opacity: 1;
+}
+
+.experience__actions {
+  margin-top: 1.5rem;
+  display: flex;
+  justify-content: center;
+}
+
+.exp-card {
+  position: relative;
+  overflow: hidden;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-card);
+  padding: 1.15rem 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+  align-items: flex-start;
+}
+
+.exp-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 0;
+  transition: opacity 220ms ease;
+  background: radial-gradient(
+    420px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
+    color-mix(in srgb, var(--accent) 22%, transparent),
+    transparent 42%
+  );
+}
+
+.exp-card::after {
+  transition: opacity 220ms ease;
+}
+
+.experience-grid:hover .exp-card::before {
+  opacity: 0.32;
+}
+
+.exp-card:hover::before,
+.exp-card:focus-visible::before {
+  opacity: 1;
+}
+
+.exp-card--link {
+  text-decoration: none;
+  color: inherit;
+  transition: border-color 0.22s ease, box-shadow 0.22s ease;
+}
+
+.exp-card--link:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+
+.exp-card::after {
+  content: attr(data-exp-order);
+  position: absolute;
+  bottom: -0.78rem;
+  right: -0.58rem;
+  top: auto;
+  font-family: var(--font-accent);
+  font-size: clamp(5rem, 19vw, 7.8rem);
+  font-weight: 900;
+  line-height: 0.78;
+  letter-spacing: -0.055em;
+  color: color-mix(in srgb, var(--text) 4.5%, transparent);
+  pointer-events: none;
+  user-select: none;
+  z-index: 0;
+}
+
+.exp-card > * {
+  position: relative;
+  z-index: 1;
+}
+
+.exp-card__time-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.1rem 0.35rem;
+  align-items: baseline;
+  font-size: 0.82rem;
+  color: var(--text-muted);
+  width: 100%;
+}
+
+.exp-card__period {
+  font-weight: 600;
+  color: var(--text);
+}
+
+.exp-card__sep {
+  font-weight: 400;
+  opacity: 0.55;
+  user-select: none;
+}
+
+.exp-card__duration {
+  font-weight: 500;
+}
+
+.exp-card__company {
+  margin: 0;
+  font-family: var(--font-accent);
+  font-size: clamp(1.14rem, 2.6vw, 1.38rem);
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+  color: var(--accent-text);
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.35rem 0.45rem;
+}
+
+.exp-card__ext,
+.mp-card__ext {
+  display: inline-flex;
+  width: 1.05em;
+  height: 1.05em;
+  flex-shrink: 0;
+  align-self: center;
+  background-color: currentColor;
+  opacity: 0;
+  transform: translateY(5px);
+  transition: opacity 0.22s ease, transform 0.22s ease;
+  -webkit-mask-image: url("../assets/shared/icons/link_url.svg");
+  mask-image: url("../assets/shared/icons/link_url.svg");
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .exp-card__ext,
+  .mp-card__ext {
+    transition: none;
+  }
+}
+
+.exp-card--link:hover .exp-card__ext,
+.exp-card--link:focus-visible .exp-card__ext,
+.mp-card--link:hover .mp-card__ext,
+.mp-card--link:focus-visible .mp-card__ext {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.exp-card__desc {
+  margin: 0;
+  font-size: 0.92rem;
+  line-height: 1.45;
+  color: var(--text-muted);
+}
+
+.mini-projects-grid {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  min-height: 1px;
+  overflow: hidden;
+  transition: height 360ms cubic-bezier(0.2, 0.65, 0.25, 1);
+}
+
+.mini-projects-grid__item {
+  margin: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+  transition: transform 320ms cubic-bezier(0.2, 0.65, 0.25, 1);
+}
+
+.mini-projects__actions {
+  margin-top: 1.5rem;
+  display: flex;
+  justify-content: center;
+}
+
+.mp-card {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  isolation: isolate;
+  overflow: hidden;
+  width: 100%;
+  min-height: 100%;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-card);
+  background: var(--surface);
+  color: inherit;
+  text-decoration: none;
+  transition: border-color 0.22s ease;
+}
+
+.mp-card:hover,
+.mp-card:focus-visible {
+  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
+}
+
+.mp-card--link {
+  cursor: pointer;
+}
+
+.mp-card--link:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+
+.mp-card__body {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.mp-card__title {
+  margin: 0;
+  font-family: var(--font-accent);
+  font-size: clamp(1.02rem, 2.2vw, 1.22rem);
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+  color: var(--accent-text);
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.35rem 0.45rem;
+}
+
+.mp-card__desc {
+  margin: 0;
+  font-size: 0.88rem;
+  line-height: 1.45;
+  color: var(--text-muted);
+}
+
+.mp-card__tags {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem 0.45rem;
+}
+
+.mp-card__tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.22rem 0.58rem;
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: lowercase;
+  color: var(--text-muted);
+  border: 1px solid color-mix(in srgb, var(--line) 92%, var(--text-muted));
+  border-radius: 999px;
+  line-height: 1.2;
+}
+
+.mp-card__media {
+  position: relative;
+  z-index: 1;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: visible;
+  background: transparent;
+  box-sizing: border-box;
+}
+
+.mp-card__image {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  object-fit: cover;
+  object-position: center;
+  border: 1px solid color-mix(in srgb, var(--line) 84%, var(--text) 16%);
+  border-radius: calc(var(--radius-card) - 4px);
+  box-sizing: border-box;
+}
+
+.mp-card--stack {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0;
+  padding: 0;
+}
+
+.mp-card--stack .mp-card__body {
+  padding: 1.2rem 1.35rem 1.45rem;
+}
+
+.mp-card--stack .mp-card__media {
+  width: 100%;
+  padding: 1.2rem 1.35rem 0;
+}
+
+.mp-card--stack .mp-card__image {
+  aspect-ratio: 16 / 9;
+}
+
+.mp-card--horizontal {
+  flex-direction: row;
+  align-items: stretch;
+  gap: 0;
+  padding: 0;
+}
+
+.mp-card--horizontal .mp-card__body {
+  flex: 1 1 auto;
+  padding: 1.15rem 1.35rem 1.3rem 1.35rem;
+  justify-content: center;
+}
+
+.mp-card--horizontal .mp-card__media {
+  flex: 0 0 22%;
+  max-width: 6rem;
+  align-self: stretch;
+  min-height: 0;
+  padding: 1.15rem 0 1.15rem 1.15rem;
+}
+
+.mp-card--horizontal .mp-card__image {
+  max-height: 100%;
+  aspect-ratio: 16 / 9;
+}
+
+.mp-card--horizontal.mp-card--hor-image .mp-card__image {
+  object-fit: contain;
+  aspect-ratio: 1;
+  background: color-mix(in srgb, var(--text-muted) 10%, var(--surface));
+}
+
+.mp-card--compact {
+  flex-direction: column;
+  padding: 1.25rem 1.45rem 1.35rem;
+  gap: 0.55rem;
+}
+
+.mp-card--decor {
+  min-height: 7.5rem;
+  padding: 0;
+  align-items: stretch;
+  justify-content: stretch;
+  pointer-events: none;
+}
+
+.mp-card__decor-pattern {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  background: color-mix(in srgb, var(--surface) 94%, var(--accent));
+  opacity: 1;
+}
+
+@media (max-width: 519px) {
+  .mp-card--horizontal {
+    flex-direction: column;
+  }
+
+  .mp-card--horizontal .mp-card__media {
+    flex-basis: auto;
+    max-width: none;
+    width: 100%;
+    align-self: stretch;
+    padding: 1.15rem 1.25rem 0;
+  }
+
+  .mp-card--horizontal.mp-card--hor-image .mp-card__media {
+    width: auto;
+    max-width: 6rem;
+    align-self: center;
+    padding: 1.15rem 1.25rem 0;
+  }
+
+  .mp-card--horizontal .mp-card__body {
+    padding: 1.15rem 1.25rem 1.35rem 1.25rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mini-projects-grid__item {
+    transition: none;
+  }
+
+  .mini-projects-grid {
+    transition: none;
+  }
+}
+
+.projects__heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.projects__title.section__title {
+  margin-bottom: 0;
+}
+
+.projects__controls {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.projects__nav-btn {
+  width: 2.25rem;
+  height: 2.25rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--surface) 86%, transparent);
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+}
+
+.projects__nav-btn:hover:not(:disabled),
+.projects__nav-btn:focus-visible:not(:disabled) {
+  color: var(--accent-text);
+  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
+  background: var(--accent-soft);
+}
+
+.projects__nav-btn:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+.projects__nav-ico {
+  width: 1rem;
+  height: 1rem;
+  display: block;
+  background: currentColor;
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+}
+
+.projects__nav-ico--left {
+  mask-image: url("../assets/shared/icons/shevron-left.svg");
+  -webkit-mask-image: url("../assets/shared/icons/shevron-left.svg");
+}
+
+.projects__nav-ico--right {
+  mask-image: url("../assets/shared/icons/shevron-right.svg");
+  -webkit-mask-image: url("../assets/shared/icons/shevron-right.svg");
+}
+
+.projects-carousel {
+  --projects-gap: 1rem;
+  --projects-visible: 1;
+  --projects-section-pad: calc(2 * max(var(--space), env(safe-area-inset-right, 0px), env(safe-area-inset-left, 0px)));
+  --projects-viewport-width: 100vw;
+  --projects-content-width: calc(var(--projects-viewport-width) - 2 * var(--projects-section-pad));
+  --projects-edge-space: max(calc(var(--projects-section-pad) - var(--projects-gap)), 0px);
+  --projects-card-width: calc(
+    (
+        var(--projects-content-width) - (var(--projects-visible) - 1) * var(--projects-gap)
+      ) / var(--projects-visible)
+  );
+  --projects-edge-hit-zone: 64px;
+  position: relative;
+  width: var(--projects-viewport-width);
+  max-width: var(--projects-viewport-width);
+  margin-left: calc(50% - 0.5 * var(--projects-viewport-width));
+}
+
+@media (min-width: 760px) {
+  .projects-carousel {
+    --projects-visible: 2;
+    --projects-gap: 1.15rem;
+  }
+}
+
+@media (min-width: 1180px) {
+  .projects-carousel {
+    --projects-visible: 3;
+    --projects-gap: 1.25rem;
+  }
+}
+
+.projects-carousel__viewport {
+  overflow-x: auto;
+  overflow-y: visible;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  cursor: grab;
+  touch-action: pan-y;
+  padding-bottom: 1rem;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.projects-carousel__viewport::-webkit-scrollbar {
+  display: none;
+}
+
+.projects-carousel__viewport.is-dragging {
+  cursor: grabbing;
+  user-select: none;
+}
+
+.projects-carousel__edge-hit {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: var(--projects-edge-hit-zone);
+  border: 0;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  z-index: 4;
+  cursor: pointer;
+}
+
+.projects-carousel__edge-hit--left {
+  left: 0;
+}
+
+.projects-carousel__edge-hit--right {
+  right: 0;
+}
+
+.projects-carousel__track {
+  display: flex;
+  gap: var(--projects-gap);
+  align-items: stretch;
+  padding: 0.15rem 0 2.35rem;
+}
+
+.projects-carousel__item {
+  flex: 0 0 var(--projects-card-width);
+  min-width: 0;
+}
+
+.projects-carousel__spacer {
+  flex: 0 0 var(--projects-edge-space);
+  pointer-events: none;
+}
+
+.portfolio-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  align-items: stretch;
+  height: auto;
+  padding: 0;
+  border-radius: var(--radius-card);
+  border: 1px solid var(--line);
+  background: color-mix(in srgb, var(--surface) 94%, transparent);
+  color: inherit;
+  text-decoration: none;
+  overflow: hidden;
+  transition: border-color 0.2s ease;
+}
+
+.portfolio-card:hover,
+.portfolio-card:focus-visible {
+  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
+}
+
+.portfolio-card:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
+  outline-offset: 3px;
+}
+
+.portfolio-card__body {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+  min-height: 0;
+  padding: 1.3rem;
+  background: color-mix(in srgb, var(--surface) 90%, transparent);
+  min-width: 0;
+  flex: none;
+  height: auto;
+  overflow: hidden;
+}
+
+.portfolio-card__body::after {
+  display: none;
+  content: none;
+}
+
+.portfolio-card__title {
+  margin: 0;
+  font-family: var(--font-accent);
+  font-size: clamp(1.22rem, 2.2vw, 1.55rem);
+  line-height: 1.2;
+  letter-spacing: -0.015em;
+  color: var(--text);
+  transition: color 0.2s ease;
+}
+
+html[data-font="geologica"] .portfolio-card__title {
+  font-weight: 700;
+}
+
+html[data-font="mono"] .portfolio-card__title {
+  font-weight: 700;
+}
+
+.portfolio-card__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  margin: auto 0 0;
+  padding: 0;
+  list-style: none;
+  align-self: flex-start;
+}
+
+.portfolio-card__tag {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.95rem;
+  padding: 0.25rem 0.82rem;
+  border-radius: var(--radius-btn);
+  border: 0;
+  background: color-mix(in srgb, var(--surface) 62%, var(--bg-elevated) 38%);
+  color: var(--text-muted);
+  font-size: 0.78rem;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  text-transform: none;
+  white-space: nowrap;
+}
+
+.portfolio-card__summary {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: 0.93rem;
+  line-height: 1.45;
+  display: -webkit-box;
+  -webkit-line-clamp: 6;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.portfolio-card__cover {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: stretch;
+  aspect-ratio: 16 / 9;
+  height: auto;
+  min-height: 0;
+  min-width: 0;
+  width: 100%;
+  max-width: 100%;
+  flex: none;
+  border-left: 0;
+  padding: 1.3rem;
+  padding-top: 0;
+  background: transparent;
+  overflow: hidden;
+  border-radius: 0;
+  align-self: stretch;
+}
+
+.portfolio-card__image {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  display: block;
+  object-fit: cover;
+  object-position: center;
+  filter: none;
+  border: 1px solid color-mix(in srgb, var(--line) 84%, var(--text) 16%);
+  border-radius: calc(var(--radius-card) - 4px);
+  margin-left: 0;
+}
+
+.portfolio-card:hover .portfolio-card__title,
+.portfolio-card:focus-visible .portfolio-card__title {
+  color: var(--accent-text);
+}
+
+@media (max-width: 639.98px) {
+  .projects__heading {
+    align-items: flex-start;
+    gap: 0.55rem;
+  }
+
+  .projects__controls {
+    margin-left: auto;
+  }
+
+  .portfolio-card {
+    height: auto;
+  }
+
+  .portfolio-card__body {
+    padding: 1.05rem 1.05rem 0.95rem;
+    background: transparent;
+    height: auto;
+  }
+
+  .portfolio-card__cover {
+    border-left: 0;
+    border-top: 0;
+    width: 100%;
+    min-height: 0;
+    padding: 1.05rem 1.05rem 0.95rem;
+    padding-top: 0;
+    border-radius: 0;
+  }
+
+  .portfolio-card__image {
+    width: 100%;
+    height: 100%;
+    object-position: center;
+  }
+}
+
+.skills-intro {
+  margin-bottom: clamp(1.5rem, 3vw, 2rem);
+}
+
+.skills-intro p:last-child {
+  margin-bottom: 0;
+}
+
+/* Вступление «Навыки»: сообщения-баблы */
+.skills-intro--chat.section__prose {
+  max-width: min(52rem, 100%);
+}
+
+.skills-intro--chat {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.45rem;
+}
+
+.skills-intro--chat .skills-msg {
+  --skills-bubble-fill: color-mix(in srgb, var(--surface) 86%, var(--accent) 14%);
+  --skills-bubble-edge: color-mix(in srgb, var(--line), var(--text) 8%);
+  align-self: flex-start;
+  width: max-content;
+  max-width: min(52rem, 100%);
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  background: var(--skills-bubble-fill);
+  border: 1px solid var(--skills-bubble-edge);
+  border-radius: var(--radius-card) var(--radius-card) var(--radius-card) 0;
+  box-shadow: none;
+}
+
+.skills-intro--chat .skills-msg__body {
+  position: relative;
+  z-index: 1;
+  padding-top: max(0.52rem, calc(0.12rem + var(--radius-card) * 0.34));
+  padding-right: max(0.75rem, calc(0.18rem + var(--radius-card) * 0.46));
+  padding-bottom: max(0.42rem, calc(0.1rem + var(--radius-card) * 0.3));
+  padding-left: max(0.75rem, calc(0.18rem + var(--radius-card) * 0.46));
+}
+
+.skills-intro--chat .skills-msg__author {
+  margin: 0 0 0.38rem;
+  font-size: 0.75rem;
+  line-height: 1.25;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  color: var(--accent-text);
+}
+
+.skills-intro--chat .skills-msg__text {
+  margin: 0 0 0.38rem;
+  font-size: inherit;
+  line-height: 1.52;
+  font-style: italic;
+  color: color-mix(in srgb, var(--text) 88%, var(--text-muted));
+  overflow-wrap: break-word;
+}
+
+.skills-intro--chat .skills-msg__time {
+  display: block;
+  margin: 0;
+  padding: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.02em;
+  color: var(--text-muted);
+  opacity: 0.9;
+}
+
+.skills-intro--chat[data-skills-anim] .skills-msg:not(.is-visible) {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform: translate3d(calc(-1 * min(1.75rem, 7vw)), 0, 0);
+}
+
+.skills-intro--chat[data-skills-anim] .skills-msg.is-visible {
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
+  visibility: visible;
+  pointer-events: auto;
+  transition:
+    opacity 0.42s cubic-bezier(0.2, 0.65, 0.25, 1),
+    transform 0.52s cubic-bezier(0.18, 0.72, 0.24, 1),
+    visibility 0s linear 0s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skills-intro--chat[data-skills-anim] .skills-msg:not(.is-visible) {
+    opacity: 1;
+    transform: none;
+    visibility: visible;
+    pointer-events: auto;
+    transition: none;
+  }
+
+  .skills-intro--chat[data-skills-anim] .skills-msg.is-visible {
+    transition: none;
+  }
+}
+
+.skills-categories {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: 100%;
+  max-width: 100%;
+  margin-left: 0;
+  box-sizing: border-box;
+}
+
+.skills-category {
+  position: relative;
+  border-radius: 0;
+  padding: clamp(0.75rem, 1.6vw, 1.18rem) 0;
+}
+
+.skills-category__title {
+  margin: 0;
+  font-family: var(--font-accent);
+  font-size: clamp(1rem, 1.55vw, 1.18rem);
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--text) 82%, var(--text-muted));
+}
+
+.skills-category__toggle {
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.7rem;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: color 0.18s ease;
+}
+
+.skills-category__toggle::before {
+  content: "";
+  position: absolute;
+  inset: -0.45rem -0.1rem;
+}
+
+.skills-category__toggle:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--accent) 52%, transparent);
+  outline-offset: 4px;
+  border-radius: var(--radius-sm);
+}
+
+.skills-category__title-text {
+  min-width: 0;
+}
+
+.skills-category__chevron {
+  width: 1.05rem;
+  height: 1.05rem;
+  flex-shrink: 0;
+  background: currentColor;
+  mask-image: url("../assets/shared/icons/shevron-down.svg");
+  -webkit-mask-image: url("../assets/shared/icons/shevron-down.svg");
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  transition: transform 0.22s ease;
+}
+
+.skills-category__toggle:hover {
+  color: var(--accent-text);
+}
+
+.skills-category__toggle:hover .skills-category__chevron {
+  transform: scale(1.08);
+}
+
+.skills-category:hover .skills-category__toggle {
+  color: var(--accent-text);
+}
+
+.skills-category:hover .skills-category__chevron {
+  transform: scale(1.08);
+}
+
+.skills-category__toggle[aria-expanded="true"] .skills-category__chevron {
+  transform: rotate(180deg);
+}
+
+.skills-category:hover .skills-category__toggle[aria-expanded="true"] .skills-category__chevron,
+.skills-category__toggle:hover[aria-expanded="true"] .skills-category__chevron {
+  transform: rotate(180deg) scale(1.08);
+}
+
+.skills-category__panel[hidden] {
+  display: none !important;
+}
+
+html[data-font="geologica"] .skills-category__title {
+  font-weight: 800;
+}
+
+.skills-category__grid {
+  display: grid;
+  gap: 1.5rem;
+  grid-template-columns: 1fr;
+  padding-top: 0.45rem;
+  padding-bottom: 0.55rem;
+}
+
+@media (min-width: 720px) {
+  .skills-category__grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+/*
+  Мозаика на 6 дорожках (визуально до трёх «столбиков» ширины: ½ / ⅓ / ⅔):
+  каждые 6 карточек — цикл: ряд 4+2, ряд 2+4, ряд 3+3.
+  Ровно 3 карточки: две первые как в цикле, третья — на всю ширину.
+*/
+@media (min-width: 1024px) {
+  .skills-category__grid {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+    grid-auto-flow: dense;
+    gap: 1.5rem;
+  }
+
+  .skills-category__grid .skill-task-card:nth-child(6n + 1) {
+    grid-column: span 4;
+  }
+
+  .skills-category__grid .skill-task-card:nth-child(6n + 2) {
+    grid-column: span 2;
+  }
+
+  .skills-category__grid .skill-task-card:nth-child(6n + 3) {
+    grid-column: span 2;
+  }
+
+  .skills-category__grid .skill-task-card:nth-child(6n + 4) {
+    grid-column: span 4;
+  }
+
+  .skills-category__grid .skill-task-card:nth-child(6n + 5) {
+    grid-column: span 3;
+  }
+
+  .skills-category__grid .skill-task-card:nth-child(6n + 6) {
+    grid-column: span 3;
+  }
+
+  .skills-category__grid .skill-task-card:nth-child(3):last-child {
+    grid-column: 1 / -1;
+  }
+}
+
+@media (min-width: 1100px) {
+  .skills-category__layout {
+    display: block;
+  }
+
+  .skills-category__title {
+    position: static;
+    margin-bottom: 1rem;
+    z-index: auto;
+    line-height: 1.22;
+    max-width: none;
+    font-size: clamp(1.08rem, 1.85vw, 1.48rem);
+    letter-spacing: 0.025em;
+  }
+}
+
+html[data-skill-connectors-js] .skill-task-card__task::after,
+html[data-skill-connectors-js] .skill-task-card__solution::before,
+html[data-skill-connectors-js] .skill-task-card__solution::after {
+  display: none !important;
+}
+
+html[data-skill-connectors-js] .skill-task-card__task,
+html[data-skill-connectors-js] .skill-task-card__solutions,
+html[data-skill-connectors-js] .skill-task-card__solution {
+  position: relative;
+  z-index: 1;
+}
+
+.skill-task-card__connector-svg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: -1;
+  shape-rendering: geometricPrecision;
+}
+
+.skill-task-card {
+  isolation: isolate;
+  /* Коннекторы: идея examples_ideas/css-tree-menu — вертикаль (::before) и уголок (::after) раздельно, кастом через переменные */
+  --skill-solutions-margin-left: 0.5rem;
+  --skill-solutions-padding-left: 2.45rem;
+  --skill-solutions-stack-gap: 0.42rem;
+  --skill-connector-arm: calc(var(--skill-solutions-margin-left) + var(--skill-solutions-padding-left));
+  --skill-connector-stitch: 0rem;
+  --skill-connector-first-pull: 0.4rem;
+  --skill-connector-task-to-solutions-gap: 0.38rem;
+  --skill-connector-shift-right: 0.95rem;
+  /* Сегменты коннектора: как обводка карточек — нейтрально, без акцента */
+  --skill-connector-color-bridge: color-mix(in srgb, var(--line), var(--text) 6%);
+  --skill-connector-color-spine: color-mix(in srgb, var(--line), var(--text) 6%);
+  --skill-connector-color-elbow-h: color-mix(in srgb, var(--line), var(--text) 6%);
+  --skill-connector-color-elbow-v: color-mix(in srgb, var(--line), var(--text) 6%);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-md);
+  overflow: visible;
+}
+
+.skill-task-card__task {
+  position: relative;
+  margin: 0;
+  padding: 0.82rem;
+  font-size: clamp(1rem, 1.25vw, 1.12rem);
+  font-weight: 600;
+  line-height: 1.35;
+  color: var(--text);
+  flex: 0 0 auto;
+  background: var(--surface);
+  border: 1px solid color-mix(in srgb, var(--line), var(--text) 6%);
+  border-radius: calc(var(--radius-sm) + 2px);
+  transition: border-color 0.22s ease;
+}
+
+/* Мост «задача → решения» (высота = зазору между блоками) */
+.skill-task-card__task::after {
+  content: "";
+  position: absolute;
+  left: var(--skill-connector-shift-right);
+  bottom: 0;
+  width: 0;
+  height: var(--skill-connector-task-to-solutions-gap);
+  border-left: 1px solid var(--skill-connector-color-bridge);
+  pointer-events: none;
+}
+
+.skill-task-card__solutions {
+  position: relative;
+  flex: 1 1 auto;
+  margin: var(--skill-connector-task-to-solutions-gap) 0 0.5rem;
+  padding: 0 0 0 var(--skill-solutions-padding-left);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--skill-solutions-stack-gap);
+  transform: none;
+  transition: none;
+}
+
+.skill-task-card__solution {
+  --skill-solution-connector-radius: calc(var(--radius-sm) + 2px);
+  --skill-connector-elbow-top: calc(50% - var(--skill-connector-stitch));
+  --skill-connector-elbow-height: calc(50% + var(--skill-connector-stitch));
+  position: relative;
+  margin: 0;
+  padding: 0.56rem 0.68rem;
+  font-size: 0.82rem;
+  line-height: 1.45;
+  color: var(--text-muted);
+  background: var(--surface);
+  border: 1px solid color-mix(in srgb, var(--skill-solution-separator), var(--text) 6%);
+  border-radius: calc(var(--radius-sm) + 2px);
+  display: inline-block;
+  vertical-align: top;
+  max-width: 100%;
+  transition: color 0.22s ease, border-color 0.22s ease;
+}
+
+/* Вертикаль (как li::before в css-tree-menu) */
+.skill-task-card__solution::before {
+  content: "";
+  position: absolute;
+  left: calc(-1 * var(--skill-connector-arm) + var(--skill-connector-shift-right));
+  top: 0;
+  width: 0;
+  border-left: 1px solid var(--skill-connector-color-spine);
+  pointer-events: none;
+}
+
+.skill-task-card__solution:not(:last-child)::before {
+  height: calc(100% + var(--skill-solutions-stack-gap) + var(--skill-connector-stitch));
+  bottom: auto;
+}
+
+.skill-task-card__solution:last-child::before {
+  height: var(--skill-connector-elbow-height);
+  bottom: auto;
+}
+
+.skill-task-card__solution:first-child::before {
+  top: calc(-1 * var(--skill-connector-first-pull));
+}
+
+.skill-task-card__solution:first-child:not(:last-child)::before {
+  height: calc(100% + var(--skill-solutions-stack-gap) + var(--skill-connector-stitch) + var(--skill-connector-first-pull));
+}
+
+.skill-task-card__solution:first-child:last-child::before {
+  height: calc(50% + var(--skill-connector-first-pull) + var(--skill-connector-stitch));
+}
+
+/* Уголок L (как отдельная горизонталь + скругление в css-tree-menu) */
+.skill-task-card__solution::after {
+  content: "";
+  position: absolute;
+  left: calc(-1 * var(--skill-connector-arm) + var(--skill-connector-shift-right));
+  top: var(--skill-connector-elbow-top);
+  width: calc(var(--skill-connector-arm) - var(--skill-connector-shift-right));
+  height: var(--skill-connector-elbow-height);
+  border-bottom: 1px solid var(--skill-connector-color-elbow-h);
+  border-left: 1px solid var(--skill-connector-color-elbow-v);
+  border-bottom-left-radius: var(--skill-solution-connector-radius);
+  pointer-events: none;
+}
+
+.skill-task-card__solution:hover,
+.skill-task-card__solution:focus-visible {
+  color: var(--text);
+  border-color: var(--accent);
+}
+
+/* Ховер по решению: акцент на карточке задачи и наведённом решении */
+.skill-task-card:has(.skill-task-card__solution:is(:hover, :focus-visible)) .skill-task-card__task {
+  border-color: var(--accent);
+}
+
+/* Коннектор без JS: только псевдоэлементы наведённого решения; мост из задачи — при любом ховере по решению */
+.skill-task-card__solution:hover::before,
+.skill-task-card__solution:hover::after {
+  border-color: var(--accent);
+}
+
+.skill-task-card:has(.skill-task-card__solution:hover) .skill-task-card__task::after {
+  border-color: var(--accent);
+}
+
+html[data-radius="strong"] .skill-task-card__task {
+  border-radius: 1.15rem;
+}
+
+html[data-radius="strong"] .skill-task-card__solution {
+  --skill-solution-connector-radius: 1rem;
+  border-radius: 1rem;
+}
+
+
+.skill-grid {
+  display: grid;
+  gap: 1.5rem;
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 720px) {
+  .skill-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.skill-block {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  padding: 1.25rem 1.35rem;
+}
+
+.skill-block__title {
+  margin: 0 0 0.75rem;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.skill-block__list {
+  margin: 0;
+  padding-left: 1.1rem;
+  color: var(--text-muted);
+  font-size: 0.92rem;
+}
+
+.skill-block__list li + li {
+  margin-top: 0.4rem;
+}
+
+.contact-grid {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.75rem;
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 560px) {
+  .contact-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1024px) {
+  .contact-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+.contact-grid > li {
+  margin: 0;
+  min-width: 0;
+}
+
+.contact-card {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  width: 100%;
+  min-height: 100%;
+  padding: 1rem 2.35rem 1rem 1.1rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-card);
+  background: var(--surface);
+  color: inherit;
+  text-decoration: none;
+  overflow: hidden;
+  isolation: isolate;
+  transition: border-color 0.22s ease;
+}
+
+/* Бренд канала = цвет из соответствующей иконки (см. SVG в assets/shared/icons/) */
+.contact-card--brand-tg {
+  --contact-brand: #0088cc;
+}
+
+.contact-card--brand-vk {
+  --contact-brand: #0077ff;
+}
+
+.contact-card--brand-ya {
+  --contact-brand: #f8604a;
+}
+
+/* Почта — акцент темы (пикер), не цвет из SVG */
+.contact-card--brand-email {
+  --contact-brand: var(--accent);
+}
+
+.contact-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  z-index: 0;
+  background: radial-gradient(
+    ellipse 130% 120% at 0% 100%,
+    color-mix(in srgb, var(--contact-brand) 26%, transparent) 0%,
+    transparent 58%
+  );
+  opacity: 0.42;
+}
+
+.contact-card:hover,
+.contact-card:focus-visible {
+  border-color: color-mix(in srgb, var(--contact-brand) 58%, var(--line));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .contact-card__name {
+    transition: none;
+  }
+
+  .contact-card__corner {
+    transition: none;
+  }
+}
+
+.contact-card__corner {
+  position: absolute;
+  top: 0.55rem;
+  right: 0.55rem;
+  z-index: 2;
+  width: var(--icon-contact-meta);
+  height: var(--icon-contact-meta);
+  pointer-events: none;
+  background-color: color-mix(in srgb, var(--text-muted) 88%, transparent);
+  transition: background-color 0.22s ease;
+  mask-image: url("../assets/shared/icons/arrow_upright.svg");
+  -webkit-mask-image: url("../assets/shared/icons/arrow_upright.svg");
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+}
+
+/* Среднее скругление — уголок чуть ниже и левее базовой позиции */
+html[data-radius="medium"] .contact-card__corner {
+  top: calc(0.75rem + 0.1rem);
+  right: calc(0.75rem + 0.1rem);
+}
+
+/* При сильном скруглении карточки — уголок по вертикали по центру строки с иконкой канала, чуть левее от правого края */
+html[data-radius="strong"] .contact-card__corner {
+  top: calc(1rem + 1.25rem);
+  right: 1.8rem;
+  transform: translateY(-50%);
+}
+
+.contact-card:hover .contact-card__corner,
+.contact-card:focus-visible .contact-card__corner {
+  background-color: color-mix(in srgb, var(--contact-brand) 82%, transparent);
+}
+
+.contact-card__corner--copy {
+  mask-image: url("../assets/shared/icons/copy.svg");
+  -webkit-mask-image: url("../assets/shared/icons/copy.svg");
+}
+
+.contact-card__icon,
+.contact-card__body {
+  position: relative;
+  z-index: 1;
+}
+
+.contact-card--action {
+  margin: 0;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.contact-card__icon {
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--radius-md);
+  background: color-mix(in srgb, var(--contact-brand) 10%, transparent);
+}
+
+.contact-card__icon img {
+  width: var(--icon-contact);
+  height: var(--icon-contact);
+  display: block;
+}
+
+.contact-card__icon--accent {
+  background: color-mix(in srgb, var(--contact-brand) 10%, transparent);
+}
+
+.contact-card__icon--accent::before {
+  content: "";
+  width: var(--icon-contact);
+  height: var(--icon-contact);
+  display: block;
+  background-color: var(--contact-brand);
+  mask-image: url("../assets/shared/icons/email.svg");
+  -webkit-mask-image: url("../assets/shared/icons/email.svg");
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+}
+
+.contact-card__body {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.contact-card__name {
+  font-family: var(--font-accent);
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.25;
+  color: var(--text);
+  transition: color 0.22s ease;
+}
+
+.contact-card:hover .contact-card__name,
+.contact-card:focus-visible .contact-card__name {
+  color: var(--contact-brand);
+}
+
+a.contact-card--link,
+a.contact-card--link:visited {
+  color: var(--text);
+  text-decoration: none;
+}
+
+a.contact-card--link:hover,
+a.contact-card--link:focus-visible {
+  color: var(--text);
+}
+
+.contact-card__hint {
+  font-size: 0.86rem;
+  line-height: 1.35;
+  color: var(--text-muted);
+}
+
+.contact-card--link:focus-visible,
+.contact-card--action:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--contact-brand) 72%, var(--line));
+  outline-offset: 2px;
+}
+
+.section--footerish {
+  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
+}
+
+#contact.section--footerish {
+  padding-bottom: calc(2 * clamp(2.5rem, 5vw, 3.5rem));
+}
+
+.footer {
+  padding: 1.25rem max(var(--space), env(safe-area-inset-right, 0px)) calc(1.25rem + env(safe-area-inset-bottom, 0px)) max(var(--space), env(safe-area-inset-left, 0px));
+  color: var(--text-muted);
+  font-size: 0.85rem;
+}
+
+.footer__inner {
+  max-width: var(--max);
+  margin: 0 auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem 0.5rem;
+}
+
+.footer__chunk--date,
+.footer__chunk--meta {
+  white-space: nowrap;
+}
+
+.footer__chunk--main {
+  min-width: 0;
+}
+
+.footer__sep {
+  opacity: 0.5;
+}
+
+.footer__attr {
+  font-size: 0.75rem;
+  opacity: 0.75;
+}
+
+.footer__attr a {
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+.footer__attr a:hover {
+  color: var(--accent-text);
+}
+
+.cookie-notice {
+  position: fixed;
+  left: max(var(--space), env(safe-area-inset-left, 0px));
+  right: auto;
+  bottom: max(0.85rem, env(safe-area-inset-bottom, 0px));
+  /* Не заходить под FAB справа: инсеты + ширина кнопки (~3rem) + заметный зазор */
+  max-width: min(
+    32rem,
+    calc(
+      100vw - max(var(--space), env(safe-area-inset-left, 0px)) - max(var(--space), env(safe-area-inset-right, 0px)) - 3rem - 2rem
+    )
+  );
+  padding: 0.72rem 0.85rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  background: color-mix(in srgb, var(--bg-elevated) 94%, var(--bg));
+  box-shadow: 0 12px 28px hsla(0, 0%, 0%, 0.18);
+  z-index: 2147483647;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: 0.65rem;
+}
+
+.cookie-notice[hidden] {
+  display: none !important;
+}
+
+.cookie-notice__text {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: 0.86rem;
+  line-height: 1.45;
+}
+
+.cookie-notice__text a {
+  color: var(--text);
+}
+
+.cookie-notice__text a:hover {
+  color: var(--accent-text);
+}
+
+.cookie-notice .btn {
+  font-size: 0.85rem;
+  font-weight: 600;
+  line-height: 1;
+  padding: 0.55rem 0.8rem;
+  white-space: nowrap;
+  gap: 0.45rem;
+}
+
+.cookie-notice__accept-icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  line-height: 0;
+}
+
+.cookie-notice__accept-icon img {
+  display: block;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+/* --- Адаптив: телефон / планшет / монитор --- */
+html {
+  overflow-x: hidden;
+}
+
+@media (max-width: 639.98px) {
+  html {
+    font-size: 0.9375rem;
+  }
+
+  .theme-picker__panel {
+    width: min(calc(320px + 2.2rem), calc(100vw - 1.25rem));
+    max-width: calc(100vw - 1.25rem);
+    max-height: min(85vh, 540px);
+  }
+
+  .hero {
+    padding-top: calc(2 * clamp(1rem, 4vw, 1.75rem));
+  }
+
+  .section {
+    padding: calc(2 * clamp(2rem, 6vw, 2.75rem)) calc(2 * max(var(--space), env(safe-area-inset-right, 0px))) calc(2 * clamp(2rem, 6vw, 2.75rem)) calc(2 * max(var(--space), env(safe-area-inset-left, 0px)));
+  }
+
+  .hero__title {
+    font-size: clamp(2.45rem, 10vw, 3.35rem);
+  }
+
+  .hero-rotator {
+    min-width: 7ch;
+  }
+
+  .hero__tags {
+    margin-bottom: 1.1rem;
+    gap: 0.4rem;
+  }
+
+  .hero__tag {
+    font-size: 0.82rem;
+    padding: 0.32rem 0.6rem;
+  }
+
+  .hero__actions {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.65rem;
+  }
+
+  .hero__actions .btn {
+    width: 100%;
+    justify-content: center;
+    min-height: 48px;
+    padding: 0.75rem 1.25rem;
+  }
+
+  .cookie-notice {
+    left: max(0.75rem, env(safe-area-inset-left, 0px));
+    right: auto;
+    max-width: min(
+      32rem,
+      calc(
+        100vw - max(0.75rem, env(safe-area-inset-left, 0px)) - max(0.75rem, env(safe-area-inset-right, 0px)) - 3rem - 2rem
+      )
+    );
+    grid-template-columns: 1fr;
+    gap: 0.55rem;
+  }
+
+  .radius-seg__btn {
+    min-height: 52px;
+    padding: 0.45rem 0.2rem;
+  }
+
+  .radius-seg__viz {
+    width: 40px;
+    height: 40px;
+  }
+
+  .radius-seg__arc {
+    width: 24px;
+    height: 24px;
+  }
+
+  .fab-stack {
+    right: max(0.75rem, env(safe-area-inset-right, 0px));
+    bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
+    gap: 0.5rem;
+  }
+
+  .content-edit-fab-stack {
+    left: max(0.75rem, env(safe-area-inset-left, 0px));
+    bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
+    gap: 0.5rem;
+  }
+
+}
+
+@media (pointer: coarse) {
+  .btn {
+    min-height: 44px;
+    touch-action: manipulation;
+  }
+
+  .colorpicker__hue {
+    height: 28px;
+  }
+
+  .colorpicker__hue::-webkit-slider-runnable-track {
+    height: 16px;
+    border-radius: 8px;
+  }
+
+  .colorpicker__hue::-webkit-slider-thumb {
+    width: 24px;
+    height: 24px;
+    margin-top: -5px;
+  }
+
+  .colorpicker__hue::-moz-range-track {
+    height: 16px;
+    border-radius: 8px;
+  }
+
+  .colorpicker__hue::-moz-range-thumb {
+    width: 24px;
+    height: 24px;
+  }
+
+  .colorpicker__knob {
+    width: 24px;
+    height: 24px;
+    margin: -12px 0 0 -12px;
+  }
+}
+
+@media (min-width: 640px) and (max-width: 1023.98px) {
+  html {
+    font-size: 0.96875rem;
+  }
+
+  .header__inner {
+    row-gap: 0.65rem;
+  }
+
+  .hero__grid {
+    gap: clamp(1.75rem, 4vw, 2.75rem);
+  }
+
+  .hero {
+    padding-top: calc(2 * clamp(2rem, 5vw, 3.75rem));
+    padding-bottom: calc(2 * clamp(1.75rem, 4vw, 3rem));
+  }
+
+  .section {
+    padding: calc(2 * clamp(2rem, 4vw, 3.25rem)) calc(2 * max(var(--space), env(safe-area-inset-right, 0px))) calc(2 * clamp(2rem, 4vw, 3.25rem)) calc(2 * max(var(--space), env(safe-area-inset-left, 0px)));
+  }
+
+  .card {
+    padding: 1.25rem 1.25rem;
+  }
+
+  .skill-block {
+    padding: 1.15rem 1.2rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .header__inner {
+    padding-block: 0.8rem;
+  }
+
+  .header__cluster {
+    gap: 0.85rem 1.35rem;
+  }
+
+  .nav {
+    gap: 0.65rem 1.2rem;
+    font-size: 0.925rem;
+  }
+
+  .hero {
+    padding-top: calc(2 * clamp(2.75rem, 5vw, 4.75rem));
+  }
+
+  .section {
+    padding: calc(2 * clamp(2.75rem, 4.5vw, 4.25rem)) calc(2 * max(var(--space), env(safe-area-inset-right, 0px))) calc(2 * clamp(2.75rem, 4.5vw, 4.25rem)) calc(2 * max(var(--space), env(safe-area-inset-left, 0px)));
+  }
+}
+
+
+/* v1: liquid glass — отдельные параметры для светлой и тёмной темы */
+
+/* Токены glass: .glass-neutral + парящая шапка (.header--scrolled .header__inner) + overflow-меню */
+html[data-theme="dark"] {
+  --v12-glass-neutral-bg: linear-gradient(
+    145deg,
+    color-mix(in srgb, var(--bg-elevated) 80%, transparent),
+    color-mix(in srgb, var(--surface) 52%, transparent)
+  );
+  --v12-glass-neutral-border: color-mix(in srgb, var(--line) 75%, hsla(0, 0%, 100%, 0.08));
+  --v12-glass-neutral-shadow:
+    0 14px 32px hsla(0, 0%, 0%, 0.4),
+    inset 0 1px 0 hsla(0, 0%, 100%, 0.09);
+  --v12-glass-neutral-filter: blur(16px) saturate(118%);
+  --v12-glass-neutral-filter-elevated: blur(18px) saturate(125%);
+}
+
+html[data-theme="light"] {
+  --v12-glass-neutral-bg: linear-gradient(
+    145deg,
+    color-mix(in srgb, var(--surface) 62%, hsla(0, 0%, 100%, 0.45)),
+    color-mix(in srgb, var(--bg-elevated) 38%, transparent)
+  );
+  --v12-glass-neutral-border: color-mix(in srgb, var(--line) 58%, hsla(0, 0%, 0%, 0.07));
+  --v12-glass-neutral-shadow:
+    0 14px 28px hsla(var(--theme-h), 22%, 38%, 0.11),
+    inset 0 1px 0 hsla(0, 0%, 100%, 0.9),
+    inset 0 -1px 0 hsla(0, 0%, 0%, 0.04);
+  --v12-glass-neutral-filter: blur(12px) saturate(124%);
+  --v12-glass-neutral-filter-elevated: blur(14px) saturate(130%);
+}
+
+html[data-theme="dark"] .header--scrolled .header__inner,
+html[data-theme="light"] .header--scrolled .header__inner {
+  background: var(--v12-glass-neutral-bg);
+  border-color: var(--v12-glass-neutral-border);
+  box-shadow: var(--v12-glass-neutral-shadow);
+  backdrop-filter: var(--v12-glass-neutral-filter-elevated);
+  -webkit-backdrop-filter: var(--v12-glass-neutral-filter-elevated);
+}
+
+/* ========== Тёмная тема: плашки, FAB, overflow ========== */
+
+html[data-theme="dark"] .glass-neutral,
+html[data-theme="light"] .glass-neutral {
+  background: var(--v12-glass-neutral-bg);
+  border-color: var(--v12-glass-neutral-border);
+  box-shadow: var(--v12-glass-neutral-shadow);
+  backdrop-filter: var(--v12-glass-neutral-filter);
+  -webkit-backdrop-filter: var(--v12-glass-neutral-filter);
+}
+
+html[data-theme="dark"] .theme-picker__panel.glass-neutral,
+html[data-theme="dark"] .cookie-notice.glass-neutral,
+html[data-theme="light"] .theme-picker__panel.glass-neutral,
+html[data-theme="light"] .cookie-notice.glass-neutral {
+  backdrop-filter: var(--v12-glass-neutral-filter-elevated);
+  -webkit-backdrop-filter: var(--v12-glass-neutral-filter-elevated);
+}
+
+html[data-theme="dark"] .fab.glass-neutral:not(.fab--primary):hover,
+html[data-theme="dark"] .fab.glass-neutral:not(.fab--primary):focus-visible,
+html[data-theme="light"] .fab.glass-neutral:not(.fab--primary):hover,
+html[data-theme="light"] .fab.glass-neutral:not(.fab--primary):focus-visible {
+  backdrop-filter: var(--v12-glass-neutral-filter-elevated);
+  -webkit-backdrop-filter: var(--v12-glass-neutral-filter-elevated);
+}
+
+html[data-theme="dark"] .nav-more__dock,
+html[data-theme="light"] .nav-more__dock,
+html[data-theme="dark"] #nav-more-menu-floating,
+html[data-theme="light"] #nav-more-menu-floating {
+  background: var(--v12-glass-neutral-bg);
+  border-color: var(--v12-glass-neutral-border);
+  box-shadow: var(--v12-glass-neutral-shadow);
+  backdrop-filter: var(--v12-glass-neutral-filter-elevated);
+  -webkit-backdrop-filter: var(--v12-glass-neutral-filter-elevated);
+}
+
+html[data-theme="dark"] .nav-more__dock::before,
+html[data-theme="light"] .nav-more__dock::before,
+html[data-theme="dark"] #nav-more-menu-floating::before,
+html[data-theme="light"] #nav-more-menu-floating::before {
+  content: none;
+}
+
+html[data-theme="dark"] #nav-more-menu-floating a {
+  position: relative;
+  z-index: 1;
+  color: color-mix(in srgb, var(--text) 72%, var(--text-muted));
+}
+
+html[data-theme="dark"] #nav-more-menu-floating a:hover {
+  color: var(--text);
+}
+
+html[data-theme="dark"] .cookie-notice .cookie-notice__text {
+  color: color-mix(in srgb, var(--text) 58%, var(--text-muted));
+}
+
+html[data-theme="light"] #nav-more-menu-floating a {
+  position: relative;
+  z-index: 1;
+  color: color-mix(in srgb, var(--text) 22%, var(--text-muted));
+}
+
+html[data-theme="light"] #nav-more-menu-floating a:hover {
+  color: var(--text);
+}
+
+html[data-theme="light"] .cookie-notice .cookie-notice__text {
+  color: color-mix(in srgb, var(--text) 20%, var(--text-muted));
+}
+
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  html[data-theme="dark"] .fab--primary,
+  html[data-theme="dark"] .btn--primary,
+  html[data-theme="light"] .fab--primary,
+  html[data-theme="light"] .btn--primary {
+    background: radial-gradient(
+      150% 160% at 0% 0%,
+      var(--accent-btn-radial-core) 0%,
+      var(--accent-btn-radial-mid) 52%,
+      var(--accent-btn-radial-edge) 100%
+    );
+    border-color: transparent;
+    box-shadow: var(--shadow-strong);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+
+  html[data-theme="dark"] .btn--primary.btn--flat,
+  html[data-theme="light"] .btn--primary.btn--flat {
+    box-shadow: none;
+  }
+
+  html[data-theme="dark"] .fab--primary::after,
+  html[data-theme="dark"] .btn--primary::after,
+  html[data-theme="light"] .fab--primary::after,
+  html[data-theme="light"] .btn--primary::after {
+    display: none;
+  }
+
+  html[data-theme="dark"] a.fab--primary:visited,
+  html[data-theme="dark"] a.btn--primary:visited,
+  html[data-theme="light"] a.fab--primary:visited,
+  html[data-theme="light"] a.btn--primary:visited {
+    background: radial-gradient(
+      150% 160% at 0% 0%,
+      var(--accent-btn-radial-core) 0%,
+      var(--accent-btn-radial-mid) 52%,
+      var(--accent-btn-radial-edge) 100%
+    );
+  }
+
+  html[data-theme="dark"] .fab--primary:hover,
+  html[data-theme="dark"] .fab--primary:focus-visible,
+  html[data-theme="dark"] .btn--primary:hover,
+  html[data-theme="dark"] .btn--primary:focus-visible,
+  html[data-theme="light"] .fab--primary:hover,
+  html[data-theme="light"] .fab--primary:focus-visible,
+  html[data-theme="light"] .btn--primary:hover,
+  html[data-theme="light"] .btn--primary:focus-visible {
+    background: radial-gradient(
+      150% 160% at 0% 0%,
+      color-mix(in hsl, var(--accent-btn-radial-core), white 5%) 0%,
+      color-mix(in hsl, var(--accent-btn-radial-mid), white 8%) 52%,
+      color-mix(in hsl, var(--accent-btn-radial-edge), white 4%) 100%
+    );
+  }
+
+  html[data-theme="dark"] .glass-neutral,
+  html[data-theme="light"] .glass-neutral {
+    background: var(--v12-glass-neutral-bg);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+
+  html[data-theme="dark"] .header--scrolled .header__inner,
+  html[data-theme="light"] .header--scrolled .header__inner {
+    background: var(--bg-elevated);
+    box-shadow: 0 16px 38px hsla(0, 0%, 0%, 0.2);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+
+  html[data-theme="dark"] .nav-more__dock,
+  html[data-theme="light"] .nav-more__dock,
+  html[data-theme="dark"] #nav-more-menu-floating,
+  html[data-theme="light"] #nav-more-menu-floating {
+    background: var(--bg-elevated);
+    border-color: var(--line);
+    box-shadow: var(--shadow-strong);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}
+
+#contact.section.section--footerish {
+  padding-bottom: calc(2 * clamp(2.5rem, 5vw, 3.5rem)) !important;
+}
+
+/* --- Режим правок контента (localhost) --- */
+.content-edit-fab-stack {
+  position: fixed;
+  left: max(var(--space), env(safe-area-inset-left, 0px));
+  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.6rem;
+  z-index: 1500;
+  transition: bottom 0.2s ease;
+}
+
+body.content-edit-mode-active .content-edit-fab-stack {
+  bottom: calc(var(--content-edit-dock-height, 14rem) + 1.25rem + env(safe-area-inset-bottom, 0px));
+}
+
+.content-edit-fab {
+  position: relative;
+  overflow: visible;
+}
+
+.content-edit-fab[hidden] {
+  display: none !important;
+}
+
+.content-edit-fab__badge {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.125rem;
+  height: 1.125rem;
+  padding: 0 0.28rem;
+  border-radius: 999px;
+  font-size: 0.625rem;
+  font-weight: 700;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+  color: var(--on-accent);
+  background: var(--accent);
+  border: 2px solid var(--bg);
+  box-sizing: border-box;
+  transform: translate(42%, -42%);
+  pointer-events: none;
+}
+
+.content-edit-fab__badge[hidden] {
+  display: none !important;
+}
+
+.content-edit-fab.is-active,
+.fab.content-edit-fab[data-content-edit-mode-toggle].is-active {
+  border-color: var(--accent);
+  color: var(--accent-text);
+}
+
+body.content-edit-mode-active main {
+  cursor: crosshair;
+}
+
+body.content-edit-mode-active main a,
+body.content-edit-mode-active main button,
+body.content-edit-mode-active main video {
+  cursor: default;
+}
+
+.content-edit-outline-hover {
+  outline: 1.5px dashed color-mix(in srgb, var(--accent) 48%, transparent);
+  outline-offset: 3px;
+}
+
+.content-edit-outline-ref-hover {
+  outline: 1.5px dashed color-mix(in srgb, var(--accent) 78%, transparent);
+  outline-offset: 3px;
+}
+
+body.content-edit-shift-active.content-edit-mode-active main {
+  cursor: crosshair;
+}
+
+body.content-edit-shift-active.content-edit-mode-active .content-edit-dock,
+body.content-edit-shift-active.content-edit-mode-active .content-edit-fab-stack {
+  cursor: default;
+}
+
+.content-edit-outline {
+  outline: 2px solid color-mix(in srgb, var(--accent) 72%, transparent);
+  outline-offset: 3px;
+}
+
+.content-edit-dock {
+  --content-edit-lines: 5;
+  position: fixed;
+  left: max(var(--space), env(safe-area-inset-left, 0px));
+  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
+  z-index: 1490;
+  display: grid;
+  grid-template-columns: minmax(11rem, 34%) 1fr;
+  width: min(56rem, calc(100vw - 2 * max(var(--space), env(safe-area-inset-left, 0px))));
+  height: calc(2.15rem + 1.45em * var(--content-edit-lines) + 3.85rem);
+  max-height: calc(2.15rem + 1.45em * var(--content-edit-lines) + 3.85rem);
+  border: 1px solid var(--v12-glass-neutral-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.content-edit-dock[hidden] {
+  display: none !important;
+}
+
+.content-edit-dock__list {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border-right: 1px solid var(--line);
+}
+
+.content-edit-dock__heading {
+  margin: 0;
+  padding: 0.55rem 0.75rem 0.4rem;
+  font-size: 0.88rem;
+  font-weight: 600;
+  line-height: 1.25;
+  color: var(--text);
+  border-bottom: 1px solid var(--line);
+  flex-shrink: 0;
+}
+
+.content-edit-dock__items {
+  margin: 0;
+  padding: 0.35rem;
+  list-style: none;
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+}
+
+.content-edit-dock__row {
+  display: flex;
+  align-items: stretch;
+  gap: 0.25rem;
+}
+
+.content-edit-dock__row + .content-edit-dock__row {
+  margin-top: 0.2rem;
+}
+
+.content-edit-dock__item {
+  display: block;
+  flex: 1;
+  min-width: 0;
+  text-align: left;
+  padding: 0.5rem 0.55rem;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text);
+  font: inherit;
+  font-size: 0.86rem;
+  line-height: 1.35;
+  cursor: pointer;
+}
+
+.content-edit-dock__delete {
+  flex-shrink: 0;
+  align-self: center;
+  display: grid;
+  place-items: center;
+  width: 1.85rem;
+  height: 1.85rem;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+}
+
+.content-edit-dock__delete-icon {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  background: currentColor;
+  mask-image: url("../assets/shared/icons/delete.svg");
+  -webkit-mask-image: url("../assets/shared/icons/delete.svg");
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  pointer-events: none;
+}
+
+.content-edit-dock__delete:hover,
+.content-edit-dock__delete:focus-visible {
+  color: var(--text);
+  background: color-mix(in srgb, var(--accent) 10%, transparent);
+  outline: none;
+}
+
+.content-edit-dock__item.is-selected,
+.content-edit-dock__item:hover,
+.content-edit-dock__item:focus-visible {
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+  outline: none;
+}
+
+.content-edit-dock__item.is-selected {
+  color: var(--accent-text);
+}
+
+.content-edit-dock__empty {
+  margin: 0;
+  padding: 0.75rem;
+  font-size: 0.86rem;
+  color: var(--text-muted);
+}
+
+.content-edit-dock__editor {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.content-edit-dock__editor-body {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  flex: 1;
+  min-height: 0;
+  padding: 0.65rem 0.85rem;
+}
+
+.content-edit-dock__input {
+  display: block;
+  width: 100%;
+  height: calc(1.45em * var(--content-edit-lines) + 0.9rem);
+  min-height: calc(1.45em * var(--content-edit-lines) + 0.9rem);
+  max-height: calc(1.45em * var(--content-edit-lines) + 0.9rem);
+  padding: 0.45rem 0.55rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  font: inherit;
+  line-height: 1.45;
+  color: var(--text);
+  background: var(--bg);
+  resize: none;
+  overflow-y: auto;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+.content-edit-dock__input:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.content-edit-dock__input:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
+  outline-offset: 1px;
+}
+
+.content-edit-dock__hint {
+  margin: 0.35rem 0 0;
+  font-size: 0.78rem;
+  line-height: 1.3;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+@media (max-width: 640px) {
+  .content-edit-dock {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto;
+    height: auto;
+    max-height: min(70vh, 28rem);
+  }
+
+  .content-edit-dock__list {
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+  }
+}
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..5724d78
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,1246 @@
+<!DOCTYPE html>
+<html lang="ru" data-theme="dark" data-radius="medium">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta
+      name="description"
+      content="Продуктовый дизайнер и вайбкодер с опытом более 10 лет. Проектирую цифровые продукты, интерфейсы и дизайн‑системы, совмещая UX, no-code и код для аккуратных рабочих решений."
+    />
+    <title>Николай Мамадаев — продуктовый дизайнер</title>
+    <script>
+      (function () {
+        var FONT_CSS = {
+          merriweather: "assets/fonts/merriweather.css",
+          geologica: "assets/fonts/geologica.css",
+          mono: "assets/fonts/mono.css",
+        };
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f !== "merriweather" && f !== "mono" && f !== "geologica") f = "merriweather";
+          d.dataset.font = f;
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+          var href = FONT_CSS[f];
+          if (href && !document.querySelector('link[data-theme-font="' + f + '"]')) {
+            var link = document.createElement("link");
+            link.rel = "stylesheet";
+            link.href = href;
+            link.setAttribute("data-theme-font", f);
+            document.head.appendChild(link);
+          }
+        } catch (e) {}
+      })();
+    </script>
+
+    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png" />
+    <link rel="manifest" href="assets/favicon/site.webmanifest" />
+    <link rel="preload" href="assets/fonts/merriweather.css" as="style" />
+    <link rel="preload" href="css/main.css" as="style" />
+    <link rel="preload" href="js/skill-connectors.js" as="script" />
+    <link rel="modulepreload" href="js/main.js" />
+    <link rel="stylesheet" href="css/main.css" />
+    <script src="js/skill-connectors.js" defer></script>
+    <script type="module" src="js/main.js"></script>
+
+
+
+  </head>
+  <body>
+    <div class="page-mesh-bg" aria-hidden="true"></div>
+    <a class="skip-link" href="#main">К основному содержимому</a>
+
+    <header class="header" data-theme-picker>
+      <div class="header__inner">
+        <a class="logo" href="#" aria-label="На главную">НМ</a>
+        <div class="header__cluster">
+          <nav class="nav" aria-label="Разделы страницы" data-top-nav>
+            <a href="#skills">Навыки</a>
+            <a href="#experience">Опыт работы</a>
+            <a href="#projects">Портфолио</a>
+            <a href="#mini-projects">Активность</a>
+            <a href="#contact">Контакты</a>
+          </nav>
+          <div class="nav-more" hidden data-nav-more>
+            <button type="button" class="nav-more__btn" data-nav-more-btn aria-expanded="false" aria-controls="nav-more-menu-dock nav-more-menu-floating" aria-label="Ещё разделы">
+              <svg viewBox="0 0 12 12" fill="none" aria-hidden="true">
+                <path d="M2.5 4.5L6 8L9.5 4.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
+              </svg>
+            </button>
+            <div id="nav-more-menu-dock" class="nav-more__dock" hidden data-nav-more-menu></div>
+          </div>
+        </div>
+      </div>
+    </header>
+
+<div class="fab-stack" aria-label="Быстрые действия">
+      <div class="theme-panel-fab-wrap">
+        <button type="button" class="fab fab--secondary glass-neutral" data-theme-panel-btn aria-expanded="false" aria-controls="theme-panel" aria-label="Настройки стиля">
+          <span class="theme-panel-fab__icon theme-panel-fab__icon--open-hide" aria-hidden="true"></span>
+          <svg class="theme-panel-fab__icon theme-panel-fab__icon--close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          </svg>
+        </button>
+        <div id="theme-panel" class="theme-picker__panel glass-neutral" role="dialog" aria-label="Тема и оформление" hidden data-theme-panel>
+          <div class="theme-picker__stack">
+            <section class="theme-picker__section" aria-labelledby="theme-accent-title">
+              <h3 id="theme-accent-title" class="theme-picker__section-title">Акцентный цвет</h3>
+              <div class="colorpicker" data-colorpicker>
+                <div class="colorpicker__plane-box">
+                  <canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Насыщенность и светлость акцента"></canvas>
+                  <div class="colorpicker__knob" data-sl-knob></div>
+                </div>
+                <div class="colorpicker__hue-wrap">
+                  <label class="colorpicker__hue-sr" for="theme-hue-slider">Оттенок акцента</label>
+                  <input id="theme-hue-slider" class="colorpicker__hue" type="range" min="0" max="360" value="210" data-hue-slider aria-valuemin="0" aria-valuemax="360" />
+                </div>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-mode-title">
+              <h3 id="theme-mode-title" class="theme-picker__section-title">Тема</h3>
+              <div class="radius-seg theme-mode-seg" role="radiogroup" aria-labelledby="theme-mode-title">
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="system" aria-label="Как в системе"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--system"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="light" aria-label="Светлая тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--light"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="dark" aria-label="Тёмная тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--dark"></span></span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-radius-title">
+              <h3 id="theme-radius-title" class="theme-picker__section-title">Скругление углов</h3>
+              <div class="radius-seg" role="radiogroup" aria-labelledby="theme-radius-title">
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="soft" aria-label="Слабое скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--soft"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="medium" aria-label="Среднее скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--medium"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="strong" aria-label="Сильное скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--strong"></span></span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-typography-title">
+              <h3 id="theme-typography-title" class="theme-picker__section-title">Типографика</h3>
+              <div class="radius-seg" role="radiogroup" aria-labelledby="theme-typography-title">
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="geologica" aria-label="Sans"><span class="theme-font-seg__label">Sans</span></button>
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="merriweather" aria-label="Sans Serif"><span class="theme-font-seg__label">Sans Serif</span></button>
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="mono" aria-label="Mono"><span class="theme-font-seg__label">Mono</span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-mesh-bg-title">
+              <h3 id="theme-mesh-bg-title" class="theme-picker__section-title">Фон страницы</h3>
+              <div class="radius-seg radius-seg--two" role="radiogroup" aria-labelledby="theme-mesh-bg-title">
+                <button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="on" aria-label="Показать фоновый градиент"><span class="theme-mesh-bg-seg__label">Вкл</span></button>
+                <button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="off" aria-label="Скрыть фоновый градиент"><span class="theme-mesh-bg-seg__label">Выкл</span></button>
+              </div>
+            </section>
+          </div>
+        </div>
+      </div>
+      <a class="fab fab--primary" href="#contact" aria-label="Связаться">
+        <span class="fab-primary__ico" aria-hidden="true"></span>
+      </a>
+    </div>
+<div class="content-edit-fab-stack" aria-label="Правки контента" data-content-edit-ui>
+  <button
+    type="button"
+    class="fab fab--secondary glass-neutral content-edit-fab"
+    data-content-edit-mode-toggle
+    hidden
+    aria-pressed="false"
+    aria-label="Режим правок контента"
+    title="Режим правок"
+  >
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <path
+        d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0 0-3L16.5 4.5a2.12 2.12 0 0 0-3 0L3 15v5z"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linejoin="round"
+      />
+    </svg>
+    <span class="content-edit-fab__badge" hidden aria-hidden="true">0</span>
+  </button>
+</div>
+
+
+<main id="main">
+      <section class="hero" aria-labelledby="hero-title">
+        <div class="hero__grid">
+          <div class="hero__text">
+            <p class="hero__eyebrow">Николай Мамадаев</p>
+            <h1 id="hero-title" class="hero__title">
+              Создаю интерфейсы для продуктов
+              <span class="hero-rotator" data-hero-rotator aria-label="web, mobile, desktop">
+                <span class="hero-rotator__word" data-hero-rotator-word>web</span>
+              </span>
+            </h1>
+            <ul class="hero__tags" aria-label="Ключевые компетенции">
+              <li class="hero__tag">UX/UI</li>
+              <li class="hero__tag">10+ лет опыта</li>
+              <li class="hero__tag">Продуктовое мышление</li>
+              <li class="hero__tag">Дизайн-системы</li>
+              <li class="hero__tag">Менторство и наставничество</li>
+              <li class="hero__tag">AI инструменты и вайбкодинг</li>
+            </ul>
+            <div class="hero__actions">
+              <a class="btn btn--primary btn--flat" href="#contact"><span class="btn__icon" aria-hidden="true"></span><span>Написать мне</span></a>
+              <a class="btn btn--secondary btn--flat" href="#projects"><span class="btn__icon" aria-hidden="true"></span><span>Смотреть портфолио</span></a>
+              <a class="btn btn--secondary btn--flat btn--resume" href="assets/mamadaevv_resume.pdf" download><span class="btn__icon" aria-hidden="true"></span><span>Резюме</span></a>
+            </div>
+          </div>
+          <div class="hero__visual" aria-hidden="true">
+            <div class="hero__portrait-shell">
+              <div class="hero__portrait">
+                <div class="hero__portrait-inner">
+                  <div class="hero__portrait-layers">
+                    <div class="hero__portrait-layer hero__portrait-layer--bg">
+                      <img
+                        class="hero__photo-bg"
+                        src="assets/index/me_static.webp"
+                        alt=""
+                        width="320"
+                        height="320"
+                        loading="eager"
+                        decoding="async"
+                      />
+                    </div>
+                    <div class="hero__portrait-layer hero__portrait-layer--motion" data-hero-motion-layer>
+                      <video
+                        class="hero__photo-motion"
+                        data-hero-motion-video
+                        data-src="assets/index/me_motion.webm"
+                        poster="assets/index/me_motion.webp"
+                        muted
+                        loop
+                        playsinline
+                        preload="none"
+                        aria-hidden="true"
+                      ></video>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section id="projects" class="section section--surface">
+        <div class="section__inner">
+          <h2 class="section__title">Портфолио</h2>
+          <ol class="mini-projects-grid" data-mini-projects-list>
+            <li class="mini-projects-grid__item" data-mp-cells="3">
+              <a class="mp-card mp-card--link mp-card--stack" href="cases/ai-platform-primo-rpa.html" aria-label="Платформа для работы с AI — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="assets/ai-platform-primo-rpa/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Платформа для работы с AI</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями автоматизации и Smart OCR.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="3">
+              <a class="mp-card mp-card--link mp-card--stack" href="cases/lunacy.html" aria-label="Графический редактор Lunacy — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="assets/lunacy/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Графический редактор Lunacy</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Desktop App</li>
+                  </ul>
+                  <p class="mp-card__desc">Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и интерфейсной логики.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--stack" href="cases/manu-game-maker.html" aria-label="Игровой движок MANU — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="assets/manu-game-maker/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Игровой движок MANU</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">Product Design</li>
+                    <li class="mp-card__tag">Desktop App</li>
+                  </ul>
+                  <p class="mp-card__desc">Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и проработка сотен сложных пользовательских сценариев.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--stack" href="cases/mobile-clinic-app.html" aria-label="Мобильное приложение для сети клиник — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="assets/mobile-clinic-app/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Мобильное приложение для сети клиник</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Mobile App</li>
+                  </ul>
+                  <p class="mp-card__desc">Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом пользовательском пути, понятной навигации и быстром доступе к нужным действиям.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="cases/orc-automation-panel.html" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Веб-панель для оркестрации автоматизаций</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под продакшен без остановки релизов.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="cases/task-distribution-concept.html" aria-label="Концепт сервиса распределения задач — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Концепт сервиса распределения задач</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Analytics</li>
+                  </ul>
+                  <p class="mp-card__desc">Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность процессов и удобство командной работы.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="cases/task-tracker.html" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Таск-трекер для бек-офис системы</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">Product Design</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по исполнителям; вкладки, фильтры, доска / список / таблица, Drag&amp;Drop.</p>
+                </div>
+              </a>
+            </li>
+          </ol>
+        </div>
+      </section><section hidden class="section section--surface" aria-hidden="true">
+        <div class="section__inner">
+          <div class="projects__heading">
+            <h2 class="section__title projects__title">Портфолио</h2>
+            <div class="projects__controls" aria-label="Навигация по карточкам портфолио">
+              <button type="button" class="projects__nav-btn" data-projects-prev aria-label="Прокрутить влево" aria-controls="projects-viewport">
+                <span class="projects__nav-ico projects__nav-ico--left" aria-hidden="true"></span>
+              </button>
+              <button type="button" class="projects__nav-btn" data-projects-next aria-label="Прокрутить вправо" aria-controls="projects-viewport">
+                <span class="projects__nav-ico projects__nav-ico--right" aria-hidden="true"></span>
+              </button>
+            </div>
+          </div>
+          <div class="projects-carousel">
+            <div id="projects-viewport" class="projects-carousel__viewport" data-projects-viewport>
+              <div class="projects-carousel__track">
+                <div class="projects-carousel__spacer" aria-hidden="true"></div>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="cases/orc-automation-panel.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Веб-панель для оркестрации автоматизаций</h3>
+                      <p class="portfolio-card__summary">
+                        Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под
+                        продакшен без остановки релизов.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Web App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="assets/orc-primo-rpa/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="cases/ai-platform-primo-rpa.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Платформа для работы с AI</h3>
+                      <p class="portfolio-card__summary">
+                        Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями
+                        автоматизации и Smart OCR.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Web App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="assets/ai-platform-primo-rpa/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="cases/task-tracker.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Таск-трекер для бек-офис системы</h3>
+                      <p class="portfolio-card__summary">
+                        Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по
+                        исполнителям; вкладки, фильтры, виды доска / список / таблица, Drag&amp;Drop.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">Product Design</li>
+                        <li class="portfolio-card__tag">Web App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="assets/task-tracker/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="cases/manu-game-maker.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Игровой движок MANU</h3>
+                      <p class="portfolio-card__summary">
+                        Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и
+                        проработка сотен сложных пользовательских сценариев.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">Product Design</li>
+                        <li class="portfolio-card__tag">Desktop App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="assets/manu-game-maker/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="cases/lunacy.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Графический редактор Lunacy</h3>
+                      <p class="portfolio-card__summary">
+                        Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и
+                        интерфейсной логики.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Desktop App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="assets/lunacy/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="cases/mobile-clinic-app.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Мобильное приложение для сети клиник</h3>
+                      <p class="portfolio-card__summary">
+                        Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом
+                        пользовательском пути, понятной навигации и быстром доступе к нужным действиям.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Mobile App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="assets/mobile-clinic-app/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="cases/task-distribution-concept.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Концепт сервиса распределения задач</h3>
+                      <p class="portfolio-card__summary">
+                        Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность
+                        процессов и удобство командной работы.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Analytics</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="assets/task-distribution-concept/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="cases/obsidian-plugin-columns-view.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Колоночный вид — плагин для Obsidian</h3>
+                      <p class="portfolio-card__summary">
+                        Интерфейс для многоколоночной работы с заметками: удобная навигация, фильтрация и настройка
+                        колончатого отображения прямо в редакторе Obsidian.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Plugin</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="assets/obsidian-plugin-columns-view/filter use.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <div class="projects-carousel__spacer" aria-hidden="true"></div>
+              </div>
+            </div>
+            <button
+              type="button"
+              class="projects-carousel__edge-hit projects-carousel__edge-hit--left"
+              data-projects-edge-prev
+              aria-label="Прокрутить портфолио влево"
+            ></button>
+            <button
+              type="button"
+              class="projects-carousel__edge-hit projects-carousel__edge-hit--right"
+              data-projects-edge-next
+              aria-label="Прокрутить портфолио вправо"
+            ></button>
+          </div>
+        </div>
+      </section>
+
+            <section id="mini-projects" class="section section--surface" aria-labelledby="mini-projects-title">
+        <div class="section__inner">
+          <h2 id="mini-projects-title" class="section__title">Активность</h2>
+          <div
+            class="skills-intro skills-intro--chat section__prose"
+            data-skills-intro
+            role="region"
+            aria-labelledby="mini-projects-title"
+          >
+            <div class="skills-msg" data-skills-msg>
+              <div class="skills-msg__body">
+                <p class="skills-msg__author">Николай М:</p>
+                <p class="skills-msg__text">
+                  Люблю делать разные мини-проекты или делиться чем-то полезным с миром.
+                </p>
+                <time class="skills-msg__time" datetime="" data-skills-msg-time></time>
+              </div>
+            </div>
+          </div>
+          <ol id="mini-projects-list" class="mini-projects-grid" data-mini-projects-list>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a
+                class="mp-card mp-card--link mp-card--horizontal mp-card--hor-image"
+                href="https://www.figma.com/@mamadaevv"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Figma Community — открыть профиль"
+              >
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="assets/misc/figma_logo.webp"
+                    alt=""
+                    width="800"
+                    height="800"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">
+                    Figma Community
+                    <span class="mp-card__ext" aria-hidden="true"></span>
+                  </h3>
+                  <p class="mp-card__desc">
+                    Выкладываю полезные файлы и плагины для сообщества.
+                  </p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a
+                class="mp-card mp-card--link mp-card--horizontal mp-card--hor-image"
+                href="https://dribbble.com/mamadaevv"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Dribbble — открыть профиль"
+              >
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="assets/misc/dribbble_logo.webp"
+                    alt=""
+                    width="1024"
+                    height="1024"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">
+                    Dribbble
+                    <span class="mp-card__ext" aria-hidden="true"></span>
+                  </h3>
+                  <p class="mp-card__desc">
+                    Красивые картинки с элементами интерфейсов.
+                  </p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a
+                class="mp-card mp-card--link mp-card--horizontal mp-card--hor-image"
+                href="https://t.me/designnotpizza"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Дизайн не пицца — открыть канал в Telegram"
+              >
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="assets/misc/tg-channel-logo-design_not_pizza.webp"
+                    alt=""
+                    width="640"
+                    height="640"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">
+                    Дизайн не пицца
+                    <span class="mp-card__ext" aria-hidden="true"></span>
+                  </h3>
+                  <p class="mp-card__desc">
+                    Мой канал про дизайн. Посты на тему продуктового дизайна и полезные ссылки.
+                  </p>
+                </div>
+              </a>
+            </li>
+          </ol>
+        </div>
+      </section>
+
+
+      <section id="skills" class="section section--tight" aria-labelledby="skills-title">
+        <div class="section__inner">
+          <h2 id="skills-title" class="section__title">Навыки</h2>
+          <div
+            class="skills-intro skills-intro--chat section__prose"
+            data-skills-intro
+            role="region"
+            aria-labelledby="skills-title"
+          >
+            <div class="skills-msg" data-skills-msg>
+              <div class="skills-msg__body">
+                <p class="skills-msg__author">Николай М:</p>
+                <p class="skills-msg__text">
+                  В моём опыте есть и запуск первых версий продукта с нуля, и развитие уже зрелых решений, где важно не
+                  сломать привычный сценарий, а аккуратно улучшить его.
+                </p>
+                <time class="skills-msg__time" datetime="" data-skills-msg-time></time>
+              </div>
+            </div>
+            <div class="skills-msg" data-skills-msg>
+              <div class="skills-msg__body">
+                <p class="skills-msg__text">
+                  Ниже я собрал примеры задач от бизнеса и то, как я их решал
+                </p>
+                <time class="skills-msg__time" datetime="" data-skills-msg-time></time>
+              </div>
+            </div>
+          </div>
+
+          <div class="skills-categories">
+            <section class="skills-category" aria-labelledby="skills-cat-1-heading">
+              <div class="skills-category__layout">
+              <h3 id="skills-cat-1-heading" class="skills-category__title">
+                <button
+                  class="skills-category__toggle"
+                  type="button"
+                  aria-expanded="false"
+                  aria-controls="skills-cat-1"
+                  data-skills-accordion-toggle
+                >
+                  <span class="skills-category__title-text">Продуктовый подход и логика в интерфейсах</span>
+                  <span class="skills-category__chevron" aria-hidden="true"></span>
+                </button>
+              </h3>
+              <div id="skills-cat-1" class="skills-category__grid skills-category__panel" data-skills-accordion-panel hidden>
+                <article class="skill-task-card">
+                  <p class="skill-task-card__task">
+                    Сделать сложный продукт понятнее, чтобы пользователи доходили до ключевых действий.
+                  </p>
+                  <div class="skill-task-card__solutions">
+                    <p class="skill-task-card__solution">
+                      Анализирую путь пользователя и убираю шаги, которые не помогают ему продвинуться к цели.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Проектирую флоу так, чтобы в каждом шаге было понятно, что происходит и что делать дальше.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Делаю так, чтобы даже сложный функционал выглядел естественно, использовал знакомые паттерны и привычные
+                      элементы интерфейса.
+                    </p>
+                  </div>
+                </article>
+                <article class="skill-task-card">
+                  <p class="skill-task-card__task">Улучшить первые шаги в продукте и подвести человека к первой ценности.</p>
+                  <div class="skill-task-card__solutions">
+                    <p class="skill-task-card__solution">
+                      Убираю всё, что отвлекает от первого результата: лишние шаги, необязательные поля, второстепенные детали.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Заменяю длинные объяснения небольшими подсказками в момент, когда они действительно нужны без
+                      длинных туров и сложных инструкций.
+                    </p>
+                  </div>
+                </article>
+                <article class="skill-task-card">
+                  <p class="skill-task-card__task">Снизить нагрузку на техподдержку за счёт интерфейса.</p>
+                  <div class="skill-task-card__solutions">
+                    <p class="skill-task-card__solution">
+                      Собираю частые обращения и на их основе упрощаю сценарий и интерфейс так, чтобы человек мог решить
+                      вопрос самостоятельно.
+                    </p>
+                  </div>
+                </article>
+                <article class="skill-task-card">
+                  <p class="skill-task-card__task">Связать интерфейс с целями продукта, а не только с набором фич.</p>
+                  <div class="skill-task-card__solutions">
+                    <p class="skill-task-card__solution">
+                      Начинаю с того, какую задачу бизнеса и пользователя мы решаем, и уже под это собираю сценарии и
+                      интерфейс.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Перевожу проблемы в сценариях в понятные гипотезы и помогаю продакту выбрать, что действительно даёт
+                      эффект.
+                    </p>
+                  </div>
+                </article>
+              </div>
+              </div>
+            </section>
+
+            <section class="skills-category" aria-labelledby="skills-cat-2-heading">
+              <div class="skills-category__layout">
+              <h3 id="skills-cat-2-heading" class="skills-category__title">
+                <button
+                  class="skills-category__toggle"
+                  type="button"
+                  aria-expanded="false"
+                  aria-controls="skills-cat-2"
+                  data-skills-accordion-toggle
+                >
+                  <span class="skills-category__title-text">Дизайн‑системы и консистентность</span>
+                  <span class="skills-category__chevron" aria-hidden="true"></span>
+                </button>
+              </h3>
+              <div id="skills-cat-2" class="skills-category__grid skills-category__panel" data-skills-accordion-panel hidden>
+                <article class="skill-task-card">
+                  <p class="skill-task-card__task">
+                    Привести несколько продуктов или модулей к единому виду и логике.
+                  </p>
+                  <div class="skill-task-card__solutions">
+                    <p class="skill-task-card__solution">
+                      Собираю общий UI‑kit и базовые принципы, которые можно использовать во всех продуктах.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Выделяю повторяющиеся паттерны и свожу их к одной системе, вместо десятка похожих решений.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Перевожу разрозненные решения в общую дизайн‑систему, чтобы ей было удобно пользоваться и дизайнерам,
+                      и разработчикам.
+                    </p>
+                  </div>
+                </article>
+                <article class="skill-task-card">
+                  <p class="skill-task-card__task">Сделать интерфейс так, чтобы его можно было спокойно расширять и не городить костыли.</p>
+                  <div class="skill-task-card__solutions">
+                    <p class="skill-task-card__solution">
+                      Формулирую простые дизайн‑принципы и правила использования компонентов.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Настраиваю структуру дизайн‑системы так, чтобы её было реально поддерживать и дополнять новыми паттернами.
+                    </p>
+                  </div>
+                </article>
+                <article class="skill-task-card">
+                  <p class="skill-task-card__task">Навести порядок в интерфейсах, которые долго росли кусками.</p>
+                  <div class="skill-task-card__solutions">
+                    <p class="skill-task-card__solution">
+                      Объединяю похожие решения в общие компоненты и паттерны, убираю дубли и случайные отличия.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Слежу за тем, чтобы интерфейс выглядел аккуратно и современно: читаемая типографика, иерархия, акценты
+                      без визуального шума.
+                    </p>
+                  </div>
+                </article>
+                <article class="skill-task-card">
+                  <p class="skill-task-card__task">Обновить внешний вид продукта, чтобы он не выглядел устаревшим на фоне конкурентов.</p>
+                  <div class="skill-task-card__solutions">
+                    <p class="skill-task-card__solution">
+                      Начинаю с часто используемых экранов и элементов, чтобы эффект был заметен и для пользователей, и для
+                      бизнеса.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Подстраиваю этапы обновления под текущую дорожную карту и работу разработки, чтобы не ломать привычные
+                      сценарии и релизы.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Настраиваю базовый стиль: типографика, цвет, отступы — чтобы интерфейс выглядел аккуратно и современно.
+                    </p>
+                  </div>
+                </article>
+              </div>
+              </div>
+            </section>
+
+            <section class="skills-category" aria-labelledby="skills-cat-3-heading">
+              <div class="skills-category__layout">
+              <h3 id="skills-cat-3-heading" class="skills-category__title">
+                <button
+                  class="skills-category__toggle"
+                  type="button"
+                  aria-expanded="false"
+                  aria-controls="skills-cat-3"
+                  data-skills-accordion-toggle
+                >
+                  <span class="skills-category__title-text">Исследования, метрики и аналитика</span>
+                  <span class="skills-category__chevron" aria-hidden="true"></span>
+                </button>
+              </h3>
+              <div id="skills-cat-3" class="skills-category__grid skills-category__panel" data-skills-accordion-panel hidden>
+                <article class="skill-task-card">
+                  <p class="skill-task-card__task">
+                    Получить реальную картину поведения пользователей, а не полагаться на догадки команды.
+                  </p>
+                  <div class="skill-task-card__solutions">
+                    <p class="skill-task-card__solution">
+                      Общаюсь с пользователями: смотрю, как они решают свои задачи в продукте и что делают на каждом шаге.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Перевожу выводы из исследований в конкретные изменения в интерфейсе и сценариях.
+                    </p>
+                  </div>
+                </article>
+                <article class="skill-task-card">
+                  <p class="skill-task-card__task">Убедиться, что ключевые сценарии работают, прежде чем выкатывать их в прод.</p>
+                  <div class="skill-task-card__solutions">
+                    <p class="skill-task-card__solution">
+                      Готовлю простые сценарии юзабилити‑тестов под реальные задачи пользователей.
+                    </p>
+                  </div>
+                </article>
+                <article class="skill-task-card">
+                  <p class="skill-task-card__task">Понимать, как изменения в интерфейсе влияют на ключевые метрики продукта.</p>
+                  <div class="skill-task-card__solutions">
+                    <p class="skill-task-card__solution">
+                      Помогаю описать ключевые события и воронки, которые отражают реальные шаги пользователя.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Смотрю на метрики вместе с реальными сценариями использования и предлагаю, что в интерфейсе поменять,
+                      чтобы людям было проще и продукт работал лучше.
+                    </p>
+                  </div>
+                </article>
+              </div>
+              </div>
+            </section>
+
+            <section class="skills-category" aria-labelledby="skills-cat-4-heading">
+              <div class="skills-category__layout">
+              <h3 id="skills-cat-4-heading" class="skills-category__title">
+                <button
+                  class="skills-category__toggle"
+                  type="button"
+                  aria-expanded="false"
+                  aria-controls="skills-cat-4"
+                  data-skills-accordion-toggle
+                >
+                  <span class="skills-category__title-text">Развитие команды дизайнеров и наставничество</span>
+                  <span class="skills-category__chevron" aria-hidden="true"></span>
+                </button>
+              </h3>
+              <div id="skills-cat-4" class="skills-category__grid skills-category__panel" data-skills-accordion-panel hidden>
+                <article class="skill-task-card">
+                  <p class="skill-task-card__task">Выстроить понятные процессы внутри дизайн-команды.</p>
+                  <div class="skill-task-card__solutions">
+                    <p class="skill-task-card__solution">
+                      Ввожу регулярные дизайн‑ревью с разбором реализованных задач, где каждый может получить полезную
+                      экологичную обратную связь.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Договариваюсь о шаблоне постановки задачи и прозрачных критериях приёмки, чтобы всем было ясно,
+                      когда задачу считать действительно законченой.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Настраиваю порядок работ, который позволяет выполнять как плановые задачи, так и "горящие".
+                    </p>
+                  </div>
+                </article>
+                <article class="skill-task-card">
+                  <p class="skill-task-card__task">
+                    Сделать так, чтобы дизайн, продукт и разработка работали как одна команда, а не три отдельных лагеря.
+                  </p>
+                  <div class="skill-task-card__solutions">
+                    <p class="skill-task-card__solution">
+                      Беру на себя роль связующего: обсуждаю сценарии с продактом, ограничения — с разработкой и фиксирую
+                      решения в интерфейсе.
+                    </p>
+                  </div>
+                </article>
+                <article class="skill-task-card">
+                  <p class="skill-task-card__task">Нанять и вырастить продуктовых дизайнеров для работы над сложным продуктом.</p>
+                  <div class="skill-task-card__solutions">
+                    <p class="skill-task-card__solution">
+                      Помогаю сформировать необходимые требования к кандидату.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Участвую в отборе: проверяю, как кандидат работает со сценариями, ограничениями и сложными кейсами.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Выстраиваиваю интервью так, чтобы можно было оценить ход мысли и используемые инструменты.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Настраиваю онбординг через реальные задачи и регулярные разборы, чтобы дизайнер быстрее разобрался в
+                      продукте и начал приносить пользу.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Провожу регулярные созвоны один на один с дизайнерами: разбираем решения, точки роста и следующие шаги.
+                    </p>
+                  </div>
+                </article>
+              </div>
+              </div>
+            </section>
+
+          </div>
+        </div>
+      </section>
+
+      <section id="experience" class="section section--surface" aria-labelledby="experience-title">
+        <div class="section__inner">
+          <h2 id="experience-title" class="section__title">Опыт работы</h2>
+          <ol id="experience-list" class="experience-grid">
+            <li class="experience-grid__item">
+              <a
+                class="exp-card exp-card--link"
+                href="https://primo-rpa.com/"
+                target="_blank"
+                rel="noopener noreferrer"
+                data-exp-order="1"
+                aria-label="Primo RPA — открыть сайт компании"
+              >
+                <div class="exp-card__time-row">
+                  <span class="exp-card__period">Февраль 2023 — Ноябрь 2025</span>
+                  <span class="exp-card__sep" aria-hidden="true">·</span>
+                  <span class="exp-card__duration">2 года 10 месяцев</span>
+                </div>
+                <h3 class="exp-card__company">
+                  Primo RPA
+                  <span class="exp-card__ext" aria-hidden="true"></span>
+                </h3>
+                <p class="exp-card__desc">
+                  Платформа для автоматизации бизнес‑процессов с комплексом продуктов: студией для создания роботов, оркестратором для их управления, Idea Hub для отбора процессов и AI‑серверами для работы с моделями и распознаванием данных.
+                </p>
+              </a>
+            </li>
+            <li class="experience-grid__item">
+              <a
+                class="exp-card exp-card--link"
+                href="https://icons8.com/lunacy"
+                target="_blank"
+                rel="noopener noreferrer"
+                data-exp-order="2"
+                aria-label="Icons8 (Lunacy) — открыть сайт компании"
+              >
+                <div class="exp-card__time-row">
+                  <span class="exp-card__period">Июль 2022 — Январь 2023</span>
+                  <span class="exp-card__sep" aria-hidden="true">·</span>
+                  <span class="exp-card__duration">7 месяцев</span>
+                </div>
+                <h3 class="exp-card__company">
+                  Icons8 (Lunacy)
+                  <span class="exp-card__ext" aria-hidden="true"></span>
+                </h3>
+                <p class="exp-card__desc">
+                  Векторный редактор для UI/UX и веб‑дизайна с поддержкой Sketch‑файлов, встроенной библиотекой иконок/фото/иллюстраций и набором AI‑инструментов для ускорения рутинных задач.
+                </p>
+              </a>
+            </li>
+            <li class="experience-grid__item">
+              <a
+                class="exp-card exp-card--link"
+                href="https://manu.co/"
+                target="_blank"
+                rel="noopener noreferrer"
+                data-exp-order="3"
+                aria-label="MANU Video Game Maker — открыть сайт компании"
+              >
+                <div class="exp-card__time-row">
+                  <span class="exp-card__period">Январь 2019 — Декабрь 2021</span>
+                  <span class="exp-card__sep" aria-hidden="true">·</span>
+                  <span class="exp-card__duration">3 года</span>
+                </div>
+                <h3 class="exp-card__company">
+                  MANU Video Game Maker
+                  <span class="exp-card__ext" aria-hidden="true"></span>
+                </h3>
+                <p class="exp-card__desc">
+                  No-code/low-code платформа для создания 2D и 3D игр без необходимости писать код.
+                </p>
+              </a>
+            </li>
+            <li class="experience-grid__item" data-exp-extra hidden>
+              <a
+                class="exp-card exp-card--link"
+                href="https://aegees.com/"
+                target="_blank"
+                rel="noopener noreferrer"
+                data-exp-order="4"
+                aria-label="AEGEES — открыть сайт компании"
+              >
+                <div class="exp-card__time-row">
+                  <span class="exp-card__period">Октябрь 2017 — Декабрь 2018</span>
+                  <span class="exp-card__sep" aria-hidden="true">·</span>
+                  <span class="exp-card__duration">1 год 3 месяца</span>
+                </div>
+                <h3 class="exp-card__company">
+                  AEGEES
+                  <span class="exp-card__ext" aria-hidden="true"></span>
+                </h3>
+                <p class="exp-card__desc">
+                  Защищённый мессенджер с end‑to‑end шифрованием и отсутствием хранения сообщений на серверах, сфокусированный на максимальной приватности пользователей.
+                </p>
+              </a>
+            </li>
+            <li class="experience-grid__item" data-exp-extra hidden>
+              <a
+                class="exp-card exp-card--link"
+                href="https://www.orioninnovation.com/"
+                target="_blank"
+                rel="noopener noreferrer"
+                data-exp-order="5"
+                aria-label="Orion Innovation (ex MERA) — открыть сайт компании"
+              >
+                <div class="exp-card__time-row">
+                  <span class="exp-card__period">Июль 2016 — Октябрь 2017</span>
+                  <span class="exp-card__sep" aria-hidden="true">·</span>
+                  <span class="exp-card__duration">1 год 4 месяца</span>
+                </div>
+                <h3 class="exp-card__company">
+                  Orion Innovation (ex MERA)
+                  <span class="exp-card__ext" aria-hidden="true"></span>
+                </h3>
+                <p class="exp-card__desc">
+                  Международная технологическая компания, специализирующаяся на заказной разработке и инженерных решениях для крупных корпоративных клиентов.
+                </p>
+              </a>
+            </li>
+            <li class="experience-grid__item" data-exp-extra hidden>
+              <a
+                class="exp-card exp-card--link"
+                href="https://spaceshipapps.ru/"
+                target="_blank"
+                rel="noopener noreferrer"
+                data-exp-order="6"
+                aria-label="SpaceshipApps — открыть сайт компании"
+              >
+                <div class="exp-card__time-row">
+                  <span class="exp-card__period">Июнь 2015 — Июнь 2016</span>
+                  <span class="exp-card__sep" aria-hidden="true">·</span>
+                  <span class="exp-card__duration">1 год 1 месяц</span>
+                </div>
+                <h3 class="exp-card__company">
+                  SpaceshipApps
+                  <span class="exp-card__ext" aria-hidden="true"></span>
+                </h3>
+                <p class="exp-card__desc">
+                  Студия разработки мобильных и веб‑приложений под ключ для бизнеса и предпринимателей.
+                </p>
+              </a>
+            </li>
+          </ol>
+          <div class="experience__actions">
+            <button
+              type="button"
+              class="btn btn--secondary btn--flat experience__toggle"
+              data-exp-toggle
+              aria-expanded="false"
+              aria-controls="experience-list"
+            >
+              Показать все
+            </button>
+          </div>
+        </div>
+      </section>
+
+<section id="contact" class="section section--surface section--footerish">
+      <div class="section__inner">
+        <h2 class="section__title">Контакты</h2>
+        <ul class="contact-grid">
+          <li><a class="contact-card contact-card--link contact-card--brand-tg" href="https://t.me/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="assets/shared/icons/tg.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Telegram</span><span class="contact-card__hint">Отвечу сегодня</span></span></a></li>
+          <li><a class="contact-card contact-card--link contact-card--brand-vk" href="https://vk.com/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="assets/shared/icons/vk.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">ВКонтакте</span><span class="contact-card__hint">Стабильный коннект</span></span></a></li>
+          <li><a class="contact-card contact-card--link contact-card--brand-ya" href="https://yandex.ru/chat/p/727e71fa-89b5-44a8-90a5-851021631a1c?utm_source=invite" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="assets/shared/icons/yandex_telemost.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Яндекс</span><span class="contact-card__hint">Да, тут тоже можно</span></span></a></li>
+          <li><button type="button" class="contact-card contact-card--action contact-card--brand-email" data-contact-copy data-email-b64="bmlrQG1hbWFkYWV2di5ydQ==" data-hint-default="Скопировать адрес" aria-label="Скопировать адрес электронной почты в буфер обмена"><span class="contact-card__corner contact-card__corner--copy" aria-hidden="true"></span><span class="contact-card__icon contact-card__icon--accent" aria-hidden="true"></span><span class="contact-card__body"><span class="contact-card__name">Почта</span><span class="contact-card__hint" data-contact-copy-hint>Скопировать адрес</span></span></button></li>
+        </ul>
+      </div>
+    </section>
+
+<section class="section section--surface" aria-hidden="true">
+      <div class="section__inner"></div>
+    </section>
+
+<footer class="footer">
+      <div class="footer__inner">
+        <span class="footer__chunk footer__chunk--date">© 2026<span class="footer__sep" aria-hidden="true"> · </span></span>
+        <span class="footer__chunk footer__chunk--main">Дизайн и разработка сайта — Николай Мамадаев</span>
+        <span class="footer__chunk footer__chunk--meta footer__attr"><span class="footer__sep" aria-hidden="true"> · </span><a href="cases/design-system.html">Design System</a><span class="footer__sep" aria-hidden="true"> · </span><a href="cookie-policy.html">Политика cookie</a></span>
+      </div>
+    </footer>
+
+<aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
+      <p class="cookie-notice__text">
+        Сайт использует cookie для комфортной работы. Подробнее — в
+        <a href="cookie-policy.html" data-cookie-policy-link>политике cookie</a>.
+      </p>
+      <button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
+        <span>Принять</span>
+        <span class="cookie-notice__accept-icon" aria-hidden="true">
+          <img src="assets/shared/icons/сookie.svg" alt="" width="20" height="20" loading="eager" decoding="async" />
+        </span>
+      </button>
+    </aside>
+
+<div id="nav-more-menu-floating" class="nav-more__floating" hidden data-nav-more-menu-floating aria-hidden="true"></div>
+
+
+
+  </body>
+</html>
diff --git a/public/js/main.js b/public/js/main.js
new file mode 100644
index 0000000..f9edb44
--- /dev/null
+++ b/public/js/main.js
@@ -0,0 +1,55 @@
+import { initCaseImageViewer } from "./modules/cases/image-viewer.js";
+import { initCaseSequentialImages } from "./modules/cases/sequential-images.js";
+import { initCaseNaturalImagesHalfSize } from "./modules/cases/natural-image-size.js";
+import { initCaseTallMediaExpand } from "./modules/cases/tall-media-expand.js";
+import { initCaseVideoPlayers } from "./modules/cases/video-player.js";
+import { initExperienceExpand } from "./modules/experience/expand.js";
+import { initExperienceHoverGlow } from "./modules/experience/hover-glow.js";
+import { initExperienceMasonry } from "./modules/experience/masonry.js";
+import { initMiniProjectsExpand } from "./modules/mini-projects/expand.js";
+import { initMiniProjectsMasonry } from "./modules/mini-projects/masonry.js";
+import { initHeaderScroll } from "./modules/header/header-scroll.js";
+import { initNavOverflow } from "./modules/header/nav-overflow.js";
+import { readThemeState } from "./modules/theme/theme-core.js";
+import { ensureThemeFontLoaded } from "./modules/theme/theme-fonts.js";
+import { initThemeControls } from "./modules/theme/theme-controls.js";
+import { initContactCopy } from "./modules/ui/contact-copy.js";
+import { initCookieNotice } from "./modules/ui/cookie-notice.js";
+import { initHeroWordSlot } from "./modules/ui/hero-word-slot.js";
+import { initHeroMotionVideo } from "./modules/ui/hero-motion-video.js";
+import { initPageMeshBackground } from "./modules/ui/page-mesh-bg.js";
+import { initPrimaryButtonShine } from "./modules/ui/primary-button-shine.js";
+import { initProjectsCarousel } from "./modules/ui/projects-carousel.js";
+import { initSkillsAccordion } from "./modules/ui/skills-accordion.js";
+import { initSkillsIntroMessages } from "./modules/ui/skills-intro.js";
+import { initContentEditMode } from "./modules/ui/content-edit/content-edit-mode.js";
+import { initDeferredPortfolioCovers } from "./modules/ui/deferred-media.js";
+import { initImageLoadPlaceholder } from "./modules/ui/image-load-placeholder.js";
+
+ensureThemeFontLoaded(readThemeState().font);
+
+initHeaderScroll();
+const experienceMasonry = initExperienceMasonry();
+const miniProjectsMasonry = initMiniProjectsMasonry();
+initThemeControls();
+initPrimaryButtonShine();
+initProjectsCarousel();
+initDeferredPortfolioCovers();
+initImageLoadPlaceholder();
+initSkillsAccordion();
+initNavOverflow();
+initCookieNotice();
+initHeroWordSlot();
+initHeroMotionVideo();
+initPageMeshBackground();
+initExperienceExpand(experienceMasonry);
+initMiniProjectsExpand(miniProjectsMasonry);
+initExperienceHoverGlow();
+initContactCopy();
+initSkillsIntroMessages();
+initCaseNaturalImagesHalfSize();
+initCaseSequentialImages();
+initCaseTallMediaExpand();
+initCaseImageViewer();
+initCaseVideoPlayers();
+initContentEditMode();
diff --git a/public/js/modules/cases/image-viewer.js b/public/js/modules/cases/image-viewer.js
new file mode 100644
index 0000000..fee9394
--- /dev/null
+++ b/public/js/modules/cases/image-viewer.js
@@ -0,0 +1,370 @@
+import { isTinyPlaceholderSrc } from "../shared/image-src.js";
+
+function isViewerThumbnailPlaceholder(src) {
+  return isTinyPlaceholderSrc(src);
+}
+
+export function initCaseImageViewer() {
+  const targets = Array.from(document.querySelectorAll("img[data-image-viewer]")).filter(
+    (img) => !img.closest(".case-media--natural"),
+  );
+  if (!targets.length) return;
+
+  const overlay = document.createElement("div");
+  overlay.className = "case-image-viewer";
+  overlay.hidden = true;
+  overlay.innerHTML = `
+    <div class="case-image-viewer__toolbar glass-neutral" role="toolbar" aria-label="Просмотр изображения">
+      <span class="case-image-viewer__zoom" data-imgv-zoom-label>100%</span>
+      <input class="case-image-viewer__slider" type="range" min="1" max="150" step="1" value="100" data-imgv-slider aria-label="Масштаб изображения" />
+      <button type="button" class="btn btn--secondary btn--flat case-image-viewer__btn" data-imgv-fit aria-label="Уместить на экран">
+        <span class="case-image-viewer__btn-icon" style="--imgv-icon:url('../assets/shared/icons/zoom_to_fit.svg')" aria-hidden="true"></span>
+      </button>
+      <button type="button" class="btn btn--secondary btn--flat case-image-viewer__btn" data-imgv-original aria-label="Оригинальный размер">
+        <span class="case-image-viewer__btn-icon" style="--imgv-icon:url('../assets/shared/icons/original_size.svg')" aria-hidden="true"></span>
+      </button>
+      <button type="button" class="btn btn--secondary btn--flat case-image-viewer__btn" data-imgv-close aria-label="Закрыть просмотр">
+        <span class="case-image-viewer__btn-icon" style="--imgv-icon:url('../assets/shared/icons/close.svg')" aria-hidden="true"></span>
+      </button>
+    </div>
+    <div class="case-image-viewer__stage" data-imgv-stage tabindex="0">
+      <div class="case-image-viewer__loading" data-imgv-loading aria-live="polite">Загрузка...</div>
+      <img class="case-image-viewer__img" data-imgv-img alt="" />
+    </div>
+  `;
+  document.body.appendChild(overlay);
+
+  const stage = overlay.querySelector("[data-imgv-stage]");
+  const viewImg = overlay.querySelector("[data-imgv-img]");
+  const loading = overlay.querySelector("[data-imgv-loading]");
+  const zoomLabel = overlay.querySelector("[data-imgv-zoom-label]");
+  const zoomSlider = overlay.querySelector("[data-imgv-slider]");
+  const btnFit = overlay.querySelector("[data-imgv-fit]");
+  const btnOriginal = overlay.querySelector("[data-imgv-original]");
+  const btnClose = overlay.querySelector("[data-imgv-close]");
+
+  let scale = 1;
+  let naturalW = 0;
+  let naturalH = 0;
+  let active = false;
+  let lastFocused = null;
+  const minScale = 0.01;
+  const maxScale = 1.5;
+  let isPanning = false;
+  let panStartX = 0;
+  let panStartY = 0;
+  let panScrollLeft = 0;
+  let panScrollTop = 0;
+  let panMoved = false;
+  let closeTimer = 0;
+  let openRaf = 0;
+  const viewerAnimMs = 210;
+  let centeredAnchor = null;
+
+  function measureToolbarSpace() {
+    const toolbarRect = overlay.querySelector(".case-image-viewer__toolbar")?.getBoundingClientRect();
+    const next = toolbarRect ? Math.ceil(toolbarRect.height + 22) : 0;
+    overlay.style.setProperty("--imgv-toolbar-space", `${next}px`);
+  }
+
+  function stageMetrics() {
+    const s = window.getComputedStyle(stage);
+    const padLeft = Number.parseFloat(s.paddingLeft) || 0;
+    const padRight = Number.parseFloat(s.paddingRight) || 0;
+    const padTop = Number.parseFloat(s.paddingTop) || 0;
+    const padBottom = Number.parseFloat(s.paddingBottom) || 0;
+    const innerWidth = Math.max(1, stage.clientWidth - padLeft - padRight);
+    const innerHeight = Math.max(1, stage.clientHeight - padTop - padBottom);
+    return { padLeft, padRight, padTop, padBottom, innerWidth, innerHeight };
+  }
+
+  function syncCenteredMode() {
+    const m = stageMetrics();
+    const scaledW = naturalW * scale;
+    const scaledH = naturalH * scale;
+    const fitX = scaledW <= m.innerWidth;
+    const fitY = scaledH <= m.innerHeight;
+    const centered = fitX && fitY;
+    stage.classList.toggle("is-center-y", fitY);
+    stage.classList.toggle("is-centered", centered);
+    if (centered) {
+      stage.scrollLeft = 0;
+      stage.scrollTop = 0;
+    }
+    return centered;
+  }
+
+  function renderScale(nextScale) {
+    const bounded = Math.min(maxScale, Math.max(minScale, nextScale));
+    scale = bounded;
+    viewImg.style.width = `${Math.max(1, Math.round(naturalW * scale))}px`;
+    const p = `${Math.round(scale * 100)}%`;
+    zoomLabel.textContent = p;
+    if (zoomSlider) zoomSlider.value = String(Math.round(scale * 100));
+  }
+
+  function fitsAtNaturalSize() {
+    if (!naturalW || !naturalH) return true;
+    const m = stageMetrics();
+    return naturalW <= m.innerWidth && naturalH <= m.innerHeight;
+  }
+
+  /** Уместить на экран: только уменьшение, без увеличения мелких картинок. */
+  function fitScale() {
+    if (!naturalW || !naturalH) return 1;
+    const m = stageMetrics();
+    const fitW = m.innerWidth / naturalW;
+    const fitH = m.innerHeight / naturalH;
+    const fit = Math.min(fitW, fitH, 1);
+    return Math.min(maxScale, Math.max(minScale, fit));
+  }
+
+  function initialOpenScale() {
+    if (fitsAtNaturalSize()) return 1;
+    return fitScale();
+  }
+
+  function zoomTo(nextScale, clientX = null, clientY = null) {
+    const wasCentered = stage.classList.contains("is-centered");
+    const oldScale = scale || 1;
+    const stageRect = stage.getBoundingClientRect();
+    const imgRectBefore = viewImg.getBoundingClientRect();
+    const mBefore = stageMetrics();
+    const stageCenterX = stageRect.left + mBefore.padLeft + mBefore.innerWidth / 2;
+    const stageCenterY = stageRect.top + mBefore.padTop + mBefore.innerHeight / 2;
+    const pointClientX = clientX === null ? stageCenterX : clientX;
+    const pointClientY = clientY === null ? stageCenterY : clientY;
+    const pointInsideImageBefore =
+      pointClientX >= imgRectBefore.left &&
+      pointClientX <= imgRectBefore.right &&
+      pointClientY >= imgRectBefore.top &&
+      pointClientY <= imgRectBefore.bottom;
+    const refClientX = pointInsideImageBefore ? pointClientX : stageCenterX;
+    const refClientY = pointInsideImageBefore ? pointClientY : stageCenterY;
+    const viewX = refClientX - stageRect.left;
+    const viewY = refClientY - stageRect.top;
+    const imgLocalX = (refClientX - imgRectBefore.left) / oldScale;
+    const imgLocalY = (refClientY - imgRectBefore.top) / oldScale;
+
+    renderScale(nextScale);
+    const nowCentered = syncCenteredMode();
+    if (nowCentered) {
+      centeredAnchor = { x: imgLocalX, y: imgLocalY, viewX, viewY };
+      return;
+    }
+
+    const anchor = wasCentered && centeredAnchor ? centeredAnchor : { x: imgLocalX, y: imgLocalY, viewX, viewY };
+    const mAfter = stageMetrics();
+    stage.scrollLeft = anchor.x * scale - (anchor.viewX - mAfter.padLeft);
+    stage.scrollTop = anchor.y * scale - (anchor.viewY - mAfter.padTop);
+    centeredAnchor = null;
+  }
+
+  function openViewer(src, alt) {
+    if (closeTimer) {
+      window.clearTimeout(closeTimer);
+      closeTimer = 0;
+    }
+    if (openRaf) {
+      window.cancelAnimationFrame(openRaf);
+      openRaf = 0;
+    }
+    overlay.classList.remove("is-open");
+    overlay.classList.add("is-loading");
+    centeredAnchor = null;
+    viewImg.onload = null;
+    viewImg.onerror = null;
+    viewImg.src = src;
+    viewImg.alt = alt || "";
+    lastFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    overlay.hidden = false;
+    document.documentElement.classList.add("imgv-lock");
+    active = true;
+
+    const applyAfterLoad = () => {
+      overlay.classList.remove("is-loading");
+      measureToolbarSpace();
+      naturalW = Math.max(1, viewImg.naturalWidth || viewImg.width || 1);
+      naturalH = Math.max(1, viewImg.naturalHeight || viewImg.height || 1);
+      renderScale(initialOpenScale());
+      openRaf = window.requestAnimationFrame(() => {
+        overlay.classList.add("is-open");
+        openRaf = 0;
+      });
+      if (syncCenteredMode()) {
+        stage.focus();
+        return;
+      }
+      const m = stageMetrics();
+      stage.scrollTop = Math.max(0, Math.floor((naturalH * scale - m.innerHeight) / 2));
+      stage.scrollLeft = Math.max(0, Math.floor((naturalW * scale - m.innerWidth) / 2));
+      stage.focus();
+    };
+
+    const applyLoadError = () => {
+      overlay.classList.remove("is-loading");
+      if (loading) loading.textContent = "Не удалось загрузить";
+    };
+
+    if (loading) loading.textContent = "Загрузка...";
+    if (viewImg.complete && viewImg.naturalWidth > 0) applyAfterLoad();
+    else {
+      viewImg.onload = applyAfterLoad;
+      viewImg.onerror = applyLoadError;
+    }
+  }
+
+  function closeViewer() {
+    if (!active) return;
+    isPanning = false;
+    stage.classList.remove("is-panning");
+    active = false;
+    centeredAnchor = null;
+    overlay.classList.remove("is-open");
+    overlay.classList.remove("is-loading");
+    document.documentElement.classList.remove("imgv-lock");
+    if (closeTimer) window.clearTimeout(closeTimer);
+    closeTimer = window.setTimeout(() => {
+      overlay.hidden = true;
+      stage.classList.remove("is-center-y");
+      stage.classList.remove("is-centered");
+      if (loading) loading.textContent = "Загрузка...";
+      viewImg.onload = null;
+      viewImg.onerror = null;
+      viewImg.removeAttribute("src");
+      if (lastFocused) lastFocused.focus();
+      closeTimer = 0;
+    }, viewerAnimMs);
+  }
+
+  document.addEventListener(
+    "click",
+    (e) => {
+      if (document.body.classList.contains("content-edit-mode-active")) return;
+      const t = e.target;
+      if (!(t instanceof Element)) return;
+      const img = t.closest("img[data-image-viewer]");
+      if (!img || img.closest(".case-media--natural")) return;
+      if (img.hasAttribute("data-src")) return;
+      const src = img.currentSrc || img.getAttribute("src") || "";
+      if (!src || isViewerThumbnailPlaceholder(src)) return;
+      e.preventDefault();
+      openViewer(src, img.alt || "");
+    },
+    true,
+  );
+
+  if (zoomSlider) {
+    zoomSlider.addEventListener("input", () => {
+      const next = Number(zoomSlider.value) / 100;
+      if (!Number.isFinite(next)) return;
+      zoomTo(next);
+    });
+  }
+  btnFit.addEventListener("click", () => zoomTo(fitScale()));
+  btnOriginal.addEventListener("click", () => zoomTo(1));
+  btnClose.addEventListener("click", closeViewer);
+
+  overlay.addEventListener("click", (e) => {
+    if (e.target === overlay) closeViewer();
+  });
+
+  stage.addEventListener(
+    "wheel",
+    (e) => {
+      if (!active) return;
+      if (!e.ctrlKey) return;
+      e.preventDefault();
+      const factor = e.deltaY < 0 ? 1.12 : 1 / 1.12;
+      zoomTo(scale * factor, e.clientX, e.clientY);
+    },
+    { passive: false },
+  );
+
+  stage.addEventListener("pointerdown", (e) => {
+    if (!active || e.button !== 0) return;
+    const target = e.target instanceof Element ? e.target : null;
+    if (target && target.closest(".case-image-viewer__toolbar")) return;
+    isPanning = true;
+    panStartX = e.clientX;
+    panStartY = e.clientY;
+    panScrollLeft = stage.scrollLeft;
+    panScrollTop = stage.scrollTop;
+    panMoved = false;
+    stage.classList.add("is-panning");
+    stage.setPointerCapture(e.pointerId);
+    e.preventDefault();
+  });
+
+  stage.addEventListener("pointermove", (e) => {
+    if (!active || !isPanning) return;
+    const dx = e.clientX - panStartX;
+    const dy = e.clientY - panStartY;
+    if (Math.abs(dx) > 3 || Math.abs(dy) > 3) panMoved = true;
+    stage.scrollLeft = panScrollLeft - dx;
+    stage.scrollTop = panScrollTop - dy;
+    e.preventDefault();
+  });
+
+  function stopPan(pointerId = null) {
+    if (!isPanning) return;
+    isPanning = false;
+    stage.classList.remove("is-panning");
+    if (pointerId !== null && stage.hasPointerCapture(pointerId)) stage.releasePointerCapture(pointerId);
+  }
+
+  stage.addEventListener("pointerup", (e) => {
+    const shouldClose = !panMoved;
+    stopPan(e.pointerId);
+    if (shouldClose && active) {
+      e.preventDefault();
+      closeViewer();
+    }
+  });
+  stage.addEventListener("pointercancel", (e) => stopPan(e.pointerId));
+
+  window.addEventListener(
+    "resize",
+    () => {
+      if (!active) return;
+      measureToolbarSpace();
+      zoomTo(scale);
+    },
+    { passive: true },
+  );
+
+  if (typeof ResizeObserver === "function") {
+    const toolbar = overlay.querySelector(".case-image-viewer__toolbar");
+    if (toolbar) {
+      const ro = new ResizeObserver(() => {
+        if (!active) return;
+        measureToolbarSpace();
+        zoomTo(scale);
+      });
+      ro.observe(toolbar);
+    }
+  }
+
+  document.addEventListener("keydown", (e) => {
+    if (!active) return;
+    if (e.key === "Escape") {
+      e.preventDefault();
+      closeViewer();
+      return;
+    }
+    if (e.key === "+" || e.key === "=") {
+      e.preventDefault();
+      zoomTo(scale * 1.2);
+      return;
+    }
+    if (e.key === "-") {
+      e.preventDefault();
+      zoomTo(scale / 1.2);
+      return;
+    }
+    if (e.key === "0") {
+      e.preventDefault();
+      zoomTo(fitScale());
+    }
+  });
+}
diff --git a/public/js/modules/cases/natural-image-size.js b/public/js/modules/cases/natural-image-size.js
new file mode 100644
index 0000000..cbf98be
--- /dev/null
+++ b/public/js/modules/cases/natural-image-size.js
@@ -0,0 +1,20 @@
+export function initCaseNaturalImagesHalfSize() {
+  const images = Array.from(document.querySelectorAll(".case-media--natural img"));
+  if (!images.length) return;
+
+  function applyHalfSize(img) {
+    const naturalWidth = img.naturalWidth || 0;
+    if (!naturalWidth) return;
+    const halfWidth = Math.max(1, Math.round(naturalWidth / 2));
+    img.style.width = `${halfWidth}px`;
+    img.style.maxWidth = "100%";
+  }
+
+  images.forEach((img) => {
+    if (img.complete && img.naturalWidth > 0) {
+      applyHalfSize(img);
+      return;
+    }
+    img.addEventListener("load", () => applyHalfSize(img), { once: true });
+  });
+}
diff --git a/public/js/modules/cases/sequential-images.js b/public/js/modules/cases/sequential-images.js
new file mode 100644
index 0000000..54687cb
--- /dev/null
+++ b/public/js/modules/cases/sequential-images.js
@@ -0,0 +1,42 @@
+/**
+ * Последовательно подставляет src из data-src для img внутри [data-case-sequential-images]
+ * (порядок — обход DOM). Атрибут data-src снимается после события load/error.
+ */
+export function initCaseSequentialImages() {
+  const root = document.querySelector("[data-case-sequential-images]");
+  if (!root) return;
+
+  const list = Array.from(root.querySelectorAll("img[data-src]"));
+  if (!list.length) return;
+
+  let index = 0;
+
+  function loadNext() {
+    if (index >= list.length) return;
+    const img = list[index];
+    const url = img.getAttribute("data-src");
+    if (!url) {
+      index += 1;
+      queueMicrotask(loadNext);
+      return;
+    }
+
+    const onDone = () => {
+      img.removeAttribute("data-src");
+      index += 1;
+      queueMicrotask(loadNext);
+    };
+
+    img.addEventListener("load", onDone, { once: true });
+    img.addEventListener("error", onDone, { once: true });
+    img.src = url;
+
+    if (img.complete && img.naturalWidth > 0) {
+      img.removeEventListener("load", onDone);
+      img.removeEventListener("error", onDone);
+      onDone();
+    }
+  }
+
+  loadNext();
+}
diff --git a/public/js/modules/cases/tall-media-expand.js b/public/js/modules/cases/tall-media-expand.js
new file mode 100644
index 0000000..9fb2e46
--- /dev/null
+++ b/public/js/modules/cases/tall-media-expand.js
@@ -0,0 +1,41 @@
+/**
+ * Длинные скриншоты: свёрнутая высота, плотный «туман» и кнопка поверх нижней части превью (внутри рамки блока).
+ * figure.case-media[data-case-tall-media][data-case-tall-width=content|wide] >
+ *   .case-media-tall[data-case-tall-root] >
+ *   (.case-media-tall__clip > img + .case-media-tall__fog) + .case-media-tall__actions > button[data-case-tall-toggle]
+ */
+export function initCaseTallMediaExpand() {
+  const figures = document.querySelectorAll("[data-case-tall-media]");
+  if (!figures.length) return;
+
+  const reduced =
+    typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+  for (const figure of figures) {
+    const root = figure.querySelector("[data-case-tall-root]");
+    const clip = figure.querySelector("[data-case-tall-clip]");
+    const btn = figure.querySelector("[data-case-tall-toggle]");
+    const labelMore = figure.querySelector("[data-case-tall-label-more]");
+    const labelLess = figure.querySelector("[data-case-tall-label-less]");
+    if (!root || !btn) continue;
+
+    if (reduced) {
+      root.classList.add("case-media-tall--reduced-motion");
+    }
+
+    btn.addEventListener("click", (e) => {
+      e.preventDefault();
+      const expanded = root.classList.toggle("case-media-tall--expanded");
+      btn.setAttribute("aria-expanded", expanded ? "true" : "false");
+      if (labelMore) labelMore.hidden = expanded;
+      if (labelLess) labelLess.hidden = !expanded;
+
+      if (!expanded) {
+        const target = clip || root;
+        if (target && typeof target.scrollIntoView === "function") {
+          target.scrollIntoView({ behavior: reduced ? "auto" : "smooth", block: "start", inline: "nearest" });
+        }
+      }
+    });
+  }
+}
diff --git a/public/js/modules/cases/video-player.js b/public/js/modules/cases/video-player.js
new file mode 100644
index 0000000..ff85fea
--- /dev/null
+++ b/public/js/modules/cases/video-player.js
@@ -0,0 +1,32 @@
+import Plyr from "../../../vendor/plyr/plyr.min.mjs";
+
+const VIDEO_SELECTOR = "video[data-case-video-player]";
+
+export function initCaseVideoPlayers() {
+  const videos = Array.from(document.querySelectorAll(VIDEO_SELECTOR));
+  if (!videos.length) return;
+
+  videos.forEach((video) => {
+    if (video.dataset.plyrReady === "1") return;
+
+    video.removeAttribute("controls");
+
+    const player = new Plyr(video, {
+      controls: ["play-large", "play", "progress", "current-time", "duration", "fullscreen"],
+      settings: [],
+      disableContextMenu: true,
+      keyboard: { focused: true, global: false },
+      tooltips: { controls: true, seek: true },
+      fullscreen: { enabled: true, iosNative: false, fallback: true },
+    });
+
+    const root = player.elements?.container;
+    if (root) {
+      root.classList.add("case-plyr");
+      player.on("enterfullscreen", () => root.classList.add("case-plyr--fullscreen"));
+      player.on("exitfullscreen", () => root.classList.remove("case-plyr--fullscreen"));
+    }
+
+    video.dataset.plyrReady = "1";
+  });
+}
diff --git a/public/js/modules/experience/expand.js b/public/js/modules/experience/expand.js
new file mode 100644
index 0000000..4694f0c
--- /dev/null
+++ b/public/js/modules/experience/expand.js
@@ -0,0 +1,128 @@
+import { prefersReducedMotion } from "../shared/media.js";
+
+export function initExperienceExpand(masonry) {
+  if (!masonry) return;
+  const btn = document.querySelector("[data-exp-toggle]");
+  const extras = masonry.extraItems;
+  if (!btn || extras.length === 0) return;
+
+  const labelExpand = "Показать все";
+  const labelCollapse = "Свернуть";
+  const reducedMotion = prefersReducedMotion();
+  let locked = false;
+
+  const wait = (ms) => new Promise((resolve) => window.setTimeout(resolve, ms));
+
+  function animateOpen(el, delayMs) {
+    const card = el.querySelector(".exp-card");
+    if (!card) return Promise.resolve();
+    if (reducedMotion) {
+      el.setAttribute("aria-hidden", "false");
+      card.style.opacity = "1";
+      card.style.transform = "translateY(0)";
+      card.style.pointerEvents = "";
+      return Promise.resolve();
+    }
+    const duration = 280;
+    el.setAttribute("aria-hidden", "false");
+    card.style.opacity = "0";
+    card.style.transform = "translateY(12px)";
+    card.style.pointerEvents = "";
+    card.style.willChange = "opacity, transform";
+
+    return new Promise((resolve) => {
+      window.setTimeout(() => {
+        card.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
+        card.style.opacity = "1";
+        card.style.transform = "translateY(0)";
+      }, delayMs);
+
+      window.setTimeout(() => {
+        card.style.transition = "";
+        card.style.opacity = "";
+        card.style.transform = "";
+        card.style.willChange = "";
+        resolve();
+      }, delayMs + duration + 30);
+    });
+  }
+
+  function animateClose(el, delayMs) {
+    const card = el.querySelector(".exp-card");
+    if (!card) return Promise.resolve();
+    if (reducedMotion) {
+      el.setAttribute("aria-hidden", "true");
+      card.style.opacity = "0";
+      card.style.transform = "translateY(12px)";
+      card.style.pointerEvents = "none";
+      return Promise.resolve();
+    }
+    const duration = 240;
+    card.style.opacity = "1";
+    card.style.transform = "translateY(0)";
+    card.style.willChange = "opacity, transform";
+
+    return new Promise((resolve) => {
+      window.setTimeout(() => {
+        card.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
+        card.style.opacity = "0";
+        card.style.transform = "translateY(12px)";
+      }, delayMs);
+
+      window.setTimeout(() => {
+        card.style.transition = "";
+        card.style.opacity = "";
+        card.style.transform = "";
+        card.style.willChange = "";
+        el.setAttribute("aria-hidden", "true");
+        card.style.opacity = "0";
+        card.style.transform = "translateY(12px)";
+        card.style.pointerEvents = "none";
+        resolve();
+      }, delayMs + duration + 30);
+    });
+  }
+
+  function setExpanded(expanded) {
+    btn.setAttribute("aria-expanded", expanded ? "true" : "false");
+    btn.textContent = expanded ? labelCollapse : labelExpand;
+  }
+
+  btn.addEventListener("click", async () => {
+    if (locked) return;
+    locked = true;
+    btn.disabled = true;
+
+    const next = btn.getAttribute("aria-expanded") !== "true";
+    setExpanded(next);
+
+    if (next) {
+      masonry.setExpanded(true);
+      const jobs = [];
+      extras.forEach((el, i) => jobs.push(animateOpen(el, i * 45)));
+      await Promise.all(jobs);
+    } else {
+      const reversed = Array.from(extras).reverse();
+      const jobs = [];
+      reversed.forEach((el, i) => jobs.push(animateClose(el, i * 35)));
+      await Promise.all(jobs);
+      masonry.setExpanded(false);
+      await wait(10);
+    }
+
+    masonry.relayout();
+    btn.disabled = false;
+    locked = false;
+  });
+
+  extras.forEach((el) => {
+    const card = el.querySelector(".exp-card");
+    el.setAttribute("aria-hidden", "true");
+    if (!card) return;
+    card.style.opacity = "0";
+    card.style.transform = "translateY(12px)";
+    card.style.pointerEvents = "none";
+  });
+  masonry.setExpanded(false);
+  masonry.relayout();
+}
diff --git a/public/js/modules/experience/hover-glow.js b/public/js/modules/experience/hover-glow.js
new file mode 100644
index 0000000..c1eea83
--- /dev/null
+++ b/public/js/modules/experience/hover-glow.js
@@ -0,0 +1,24 @@
+export function initExperienceHoverGlow() {
+  const container = document.querySelector("#experience-list");
+  if (!container) return;
+  const items = Array.from(container.querySelectorAll(".experience-grid__item"));
+  const cards = Array.from(container.querySelectorAll(".exp-card"));
+
+  container.addEventListener("pointermove", (e) => {
+    items.forEach((item) => {
+      const rect = item.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      item.style.setProperty("--mouse-x", `${x}px`);
+      item.style.setProperty("--mouse-y", `${y}px`);
+    });
+
+    cards.forEach((card) => {
+      const rect = card.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      card.style.setProperty("--mouse-x", `${x}px`);
+      card.style.setProperty("--mouse-y", `${y}px`);
+    });
+  });
+}
diff --git a/public/js/modules/experience/masonry.js b/public/js/modules/experience/masonry.js
new file mode 100644
index 0000000..f4ef6b4
--- /dev/null
+++ b/public/js/modules/experience/masonry.js
@@ -0,0 +1,84 @@
+export function initExperienceMasonry() {
+  const list = document.querySelector("#experience-list");
+  if (!list) return null;
+
+  const allItems = Array.from(list.querySelectorAll(".experience-grid__item"));
+  const extraItems = allItems.filter((el) => el.hasAttribute("data-exp-extra"));
+  const baseItems = allItems.filter((el) => !el.hasAttribute("data-exp-extra"));
+  const gap = 16;
+  let rafId = 0;
+  let expanded = false;
+  let fullHeight = 0;
+  let collapsedHeight = 0;
+
+  extraItems.forEach((el) => el.removeAttribute("hidden"));
+
+  function columnCountForWidth(w) {
+    if (w >= 1120) return 3;
+    if (w >= 760) return 2;
+    return 1;
+  }
+
+  function performLayout() {
+    if (!allItems.length) {
+      list.style.height = "0px";
+      return;
+    }
+
+    const listWidth = list.clientWidth;
+    // Колонки считаем по фактической ширине списка, чтобы большие боковые
+    // отступы секции не ломали раскладку и связанные hover-эффекты карточек.
+    const columns = columnCountForWidth(listWidth);
+    const colWidth = (listWidth - gap * (columns - 1)) / columns;
+    const heights = Array(columns).fill(0);
+    const positions = new Map();
+
+    allItems.forEach((item) => {
+      item.style.width = `${colWidth}px`;
+      const minHeight = Math.min(...heights);
+      const colIndex = heights.indexOf(minHeight);
+      const x = colIndex * (colWidth + gap);
+      const y = heights[colIndex];
+      item.style.transform = `translate(${x}px, ${y}px)`;
+      heights[colIndex] = y + item.offsetHeight + gap;
+      positions.set(item, { y, h: item.offsetHeight });
+    });
+
+    fullHeight = Math.max(Math.max(...heights) - gap, 0);
+    collapsedHeight = 0;
+    baseItems.forEach((item) => {
+      const p = positions.get(item);
+      if (!p) return;
+      collapsedHeight = Math.max(collapsedHeight, p.y + p.h);
+    });
+    list.style.height = `${expanded ? fullHeight : collapsedHeight}px`;
+  }
+
+  function relayout() {
+    if (rafId) window.cancelAnimationFrame(rafId);
+    rafId = window.requestAnimationFrame(performLayout);
+  }
+
+  function relayoutAfterThemeChange() {
+    relayout();
+    if (document.fonts?.ready) {
+      document.fonts.ready.then(relayout);
+    }
+    window.requestAnimationFrame(() => {
+      relayout();
+      window.requestAnimationFrame(relayout);
+    });
+  }
+
+  window.addEventListener("site-theme-applied", relayoutAfterThemeChange, { passive: true });
+  window.addEventListener("resize", relayout, { passive: true });
+  window.addEventListener("load", relayout, { once: true });
+  relayout();
+
+  function setExpanded(next) {
+    expanded = next;
+    list.style.height = `${expanded ? fullHeight : collapsedHeight}px`;
+  }
+
+  return { list, relayout, setExpanded, extraItems };
+}
diff --git a/public/js/modules/header/header-scroll.js b/public/js/modules/header/header-scroll.js
new file mode 100644
index 0000000..7b8c44b
--- /dev/null
+++ b/public/js/modules/header/header-scroll.js
@@ -0,0 +1,122 @@
+import { prefersReducedMotion } from "../shared/media.js";
+
+export function initHeaderScroll() {
+  const header = document.querySelector(".header");
+  if (!header) return;
+
+  function updateHeaderScrollPadding() {
+    const inner = header.querySelector(".header__inner");
+    let h;
+    if (header.classList.contains("header--scrolled") && inner) {
+      const r = inner.getBoundingClientRect();
+      h = Math.ceil(r.bottom + 20);
+    } else {
+      h = Math.ceil(header.getBoundingClientRect().height);
+    }
+    document.documentElement.style.setProperty("--header-offset", `${Math.max(h, 52)}px`);
+  }
+
+  function getScrollPaddingTopPx() {
+    const raw = getComputedStyle(document.documentElement).scrollPaddingTop;
+    const px = Number.parseFloat(raw);
+    return Number.isFinite(px) ? px : 0;
+  }
+
+  /** Вертикальный скролл к якорю с учётом `scroll-padding-top` на `html` (запас под шапку). */
+  function scrollWindowToElementTop(el, behavior) {
+    updateHeaderScrollPadding();
+    const pad = getScrollPaddingTopPx();
+    const top = el.getBoundingClientRect().top + window.scrollY - pad;
+    window.scrollTo({ top: Math.max(0, top), behavior });
+  }
+
+  /** Smooth-скролл к якорю + одна подстройка после окончания (layout / смена режима шапки). */
+  function scrollToInPageAnchor(el) {
+    const reduced = prefersReducedMotion();
+    if (reduced) {
+      scrollWindowToElementTop(el, "auto");
+      return;
+    }
+
+    let settled = false;
+    const settle = () => {
+      if (settled) return;
+      updateHeaderScrollPadding();
+      const pad = getScrollPaddingTopPx();
+      const y = Math.max(0, el.getBoundingClientRect().top + window.scrollY - pad);
+      if (Math.abs(window.scrollY - y) <= 2) {
+        settled = true;
+        return;
+      }
+      settled = true;
+      window.scrollTo({ top: y, behavior: "auto" });
+    };
+
+    scrollWindowToElementTop(el, "smooth");
+    window.addEventListener("scrollend", settle, { passive: true, once: true });
+    window.setTimeout(settle, 550);
+  }
+
+  function onScroll() {
+    const y = window.scrollY;
+    const scrollDown = y > onScroll.lastY + 1;
+    const headerHeight = Math.max(52, Math.ceil(header.getBoundingClientRect().height || 0));
+    const floatStartY = Math.ceil(headerHeight * 1.35);
+
+    if (onScroll.isFloating) {
+      if (y <= Math.floor(headerHeight * 0.45)) onScroll.isFloating = false;
+    } else if (scrollDown && y > floatStartY) {
+      onScroll.isFloating = true;
+    }
+
+    const hadScrolled = header.classList.contains("header--scrolled");
+    header.classList.toggle("header--scrolled", onScroll.isFloating);
+    if (hadScrolled !== header.classList.contains("header--scrolled")) updateHeaderScrollPadding();
+    onScroll.lastY = y;
+  }
+  onScroll.lastY = window.scrollY;
+  onScroll.isFloating = false;
+
+  document.querySelectorAll('a[href^="#"]').forEach((link) => {
+    link.addEventListener("click", (e) => {
+      const id = link.getAttribute("href");
+      if (!id || id === "#") return;
+      const el = document.querySelector(id);
+      if (!el) return;
+      e.preventDefault();
+      scrollToInPageAnchor(el);
+      history.pushState(null, "", id);
+    });
+  });
+
+  window.addEventListener("scroll", onScroll, { passive: true });
+  onScroll();
+
+  if (typeof ResizeObserver !== "undefined") {
+    const roHeader = new ResizeObserver(() => updateHeaderScrollPadding());
+    roHeader.observe(header);
+    const headerInner = header.querySelector(".header__inner");
+    if (headerInner) roHeader.observe(headerInner);
+  }
+  window.addEventListener("resize", updateHeaderScrollPadding, { passive: true });
+  window.addEventListener(
+    "load",
+    () => {
+      updateHeaderScrollPadding();
+      const raw = location.hash;
+      if (!raw || raw.length < 2) return;
+      let id;
+      try {
+        id = decodeURIComponent(raw.slice(1));
+      } catch {
+        return;
+      }
+      if (!id) return;
+      const el = document.getElementById(id);
+      if (!el) return;
+      requestAnimationFrame(() => scrollWindowToElementTop(el, "auto"));
+    },
+    { once: true },
+  );
+  updateHeaderScrollPadding();
+}
diff --git a/public/js/modules/header/nav-overflow.js b/public/js/modules/header/nav-overflow.js
new file mode 100644
index 0000000..a1f0c51
--- /dev/null
+++ b/public/js/modules/header/nav-overflow.js
@@ -0,0 +1,168 @@
+export function initNavOverflow() {
+  const cluster = document.querySelector(".header__cluster");
+  const nav = document.querySelector("[data-top-nav]");
+  const moreWrap = document.querySelector("[data-nav-more]");
+  const moreBtn = document.querySelector("[data-nav-more-btn]");
+  const menuDock = document.querySelector("[data-nav-more-menu]");
+  const menuFloating = document.querySelector("[data-nav-more-menu-floating]");
+  const headerEl = document.querySelector(".header");
+  if (!nav || !moreWrap || !moreBtn || !menuDock || !menuFloating || !headerEl) return;
+
+  const links = Array.from(nav.querySelectorAll("a"));
+  const MENU_GAP = 6;
+  const VIEWPORT_PAD = 8;
+  let openInFloatingMode = null;
+  let resizeRaf = 0;
+
+  const isFloatingHeader = () => headerEl.classList.contains("header--scrolled");
+
+  const moveOverflowToFloating = () => {
+    while (menuDock.firstChild) menuFloating.appendChild(menuDock.firstChild);
+  };
+  const moveOverflowToDock = () => {
+    while (menuFloating.firstChild) menuDock.appendChild(menuFloating.firstChild);
+  };
+
+  function closeMore() {
+    moveOverflowToDock();
+    menuDock.hidden = true;
+    menuFloating.hidden = true;
+    menuFloating.setAttribute("aria-hidden", "true");
+    moreBtn.setAttribute("aria-expanded", "false");
+    openInFloatingMode = null;
+    menuFloating.style.removeProperty("--nav-more-menu-left");
+    menuFloating.style.removeProperty("--nav-more-menu-top");
+  }
+
+  function placeMoreMenu() {
+    if (menuFloating.hidden) return;
+    const btnRect = moreBtn.getBoundingClientRect();
+    const menuRect = menuFloating.getBoundingClientRect();
+    const vw = document.documentElement.clientWidth;
+    const vh = document.documentElement.clientHeight;
+
+    let left = btnRect.right - menuRect.width;
+    left = Math.min(left, vw - menuRect.width - VIEWPORT_PAD);
+    left = Math.max(VIEWPORT_PAD, left);
+
+    let top = btnRect.bottom + MENU_GAP;
+    if (top + menuRect.height > vh - VIEWPORT_PAD) top = Math.max(VIEWPORT_PAD, btnRect.top - MENU_GAP - menuRect.height);
+
+    menuFloating.style.setProperty("--nav-more-menu-left", `${Math.round(left)}px`);
+    menuFloating.style.setProperty("--nav-more-menu-top", `${Math.round(top)}px`);
+  }
+
+  function navGapPx() {
+    const cs = getComputedStyle(nav);
+    const col = parseFloat(cs.columnGap);
+    if (Number.isFinite(col)) return col;
+    const row = parseFloat(cs.rowGap);
+    if (Number.isFinite(row)) return row;
+    const g = cs.gap;
+    if (!g || g === "normal") return 0;
+    const parts = String(g).trim().split(/\s+/);
+    const n = parseFloat(parts.length > 1 ? parts[1] : parts[0]);
+    return Number.isFinite(n) ? n : 0;
+  }
+
+  function rowContentWidth(el) {
+    const gap = navGapPx();
+    const kids = Array.from(el.children);
+    let total = 0;
+    kids.forEach((child, i) => {
+      total += child.getBoundingClientRect().width;
+      if (i > 0) total += gap;
+    });
+    return total;
+  }
+
+  function layoutLinks() {
+    closeMore();
+    links.forEach((link) => nav.appendChild(link));
+    menuDock.innerHTML = "";
+    menuFloating.innerHTML = "";
+    moreWrap.hidden = true;
+
+    if (rowContentWidth(nav) <= nav.clientWidth + 0.5) return;
+
+    moreWrap.hidden = false;
+    void nav.offsetWidth;
+    while (rowContentWidth(nav) > nav.clientWidth + 0.5 && nav.children.length > 1) {
+      const last = nav.lastElementChild;
+      if (!last) break;
+      menuDock.prepend(last);
+    }
+  }
+
+  moreBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    const open = menuDock.hidden && menuFloating.hidden;
+    if (open) {
+      openInFloatingMode = isFloatingHeader();
+      if (openInFloatingMode) {
+        moveOverflowToFloating();
+        menuFloating.hidden = false;
+        menuFloating.setAttribute("aria-hidden", "false");
+      } else {
+        menuDock.hidden = false;
+      }
+      moreBtn.setAttribute("aria-expanded", "true");
+      requestAnimationFrame(() => {
+        placeMoreMenu();
+        requestAnimationFrame(placeMoreMenu);
+      });
+    } else {
+      closeMore();
+    }
+  });
+
+  document.addEventListener("click", (e) => {
+    const t = e.target;
+    if (!(t instanceof Node)) return;
+    if (moreWrap.contains(t) || menuDock.contains(t) || menuFloating.contains(t)) {
+      const el = t instanceof Element ? t : t.parentElement;
+      if (el?.closest(".nav-more__dock a, .nav-more__floating a")) closeMore();
+      return;
+    }
+    closeMore();
+  });
+
+  const onMenuLinkClick = (e) => {
+    const t = e.target;
+    const el = t instanceof Element ? t : t.parentElement;
+    const a = el?.closest?.("a[href]");
+    if (a && (menuDock.contains(a) || menuFloating.contains(a))) closeMore();
+  };
+  menuDock.addEventListener("click", onMenuLinkClick);
+  menuFloating.addEventListener("click", onMenuLinkClick);
+
+  const onResize = () => {
+    if (resizeRaf) cancelAnimationFrame(resizeRaf);
+    resizeRaf = requestAnimationFrame(() => {
+      layoutLinks();
+      placeMoreMenu();
+      resizeRaf = 0;
+    });
+  };
+  window.addEventListener("resize", onResize, { passive: true });
+  window.addEventListener(
+    "scroll",
+    () => {
+      requestAnimationFrame(() => {
+        if (openInFloatingMode !== null && isFloatingHeader() !== openInFloatingMode) closeMore();
+        else placeMoreMenu();
+      });
+    },
+    { passive: true },
+  );
+  window.addEventListener("load", layoutLinks, { once: true });
+  layoutLinks();
+
+  if (typeof ResizeObserver === "function" && cluster) {
+    const ro = new ResizeObserver(() => {
+      if (!menuDock.hidden || !menuFloating.hidden) return;
+      layoutLinks();
+    });
+    ro.observe(cluster);
+  }
+}
diff --git a/public/js/modules/mini-projects/expand.js b/public/js/modules/mini-projects/expand.js
new file mode 100644
index 0000000..041118d
--- /dev/null
+++ b/public/js/modules/mini-projects/expand.js
@@ -0,0 +1,135 @@
+import { prefersReducedMotion } from "../shared/media.js";
+
+export function initMiniProjectsExpand(masonry) {
+  if (!masonry) return;
+  const controllers = Array.isArray(masonry) ? masonry : [masonry];
+  controllers.forEach(initMiniProjectsExpandForList);
+}
+
+function initMiniProjectsExpandForList(masonry) {
+  if (!masonry?.list) return;
+  const scope = masonry.list.closest("section, main") ?? masonry.list.parentElement;
+  const btn = scope?.querySelector("[data-mp-toggle]");
+  const extras = masonry.extraItems;
+  if (!btn || extras.length === 0) return;
+
+  const labelExpand = "Показать все";
+  const labelCollapse = "Свернуть";
+  const reducedMotion = prefersReducedMotion();
+  let locked = false;
+
+  const wait = (ms) => new Promise((resolve) => window.setTimeout(resolve, ms));
+
+  function animateOpen(el, delayMs) {
+    const card = el.querySelector(".mp-card");
+    if (!card) return Promise.resolve();
+    if (reducedMotion) {
+      el.setAttribute("aria-hidden", "false");
+      card.style.opacity = "1";
+      card.style.transform = "translateY(0)";
+      card.style.pointerEvents = "";
+      return Promise.resolve();
+    }
+    const duration = 280;
+    el.setAttribute("aria-hidden", "false");
+    card.style.opacity = "0";
+    card.style.transform = "translateY(12px)";
+    card.style.pointerEvents = "";
+    card.style.willChange = "opacity, transform";
+
+    return new Promise((resolve) => {
+      window.setTimeout(() => {
+        card.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
+        card.style.opacity = "1";
+        card.style.transform = "translateY(0)";
+      }, delayMs);
+
+      window.setTimeout(() => {
+        card.style.transition = "";
+        card.style.opacity = "";
+        card.style.transform = "";
+        card.style.willChange = "";
+        resolve();
+      }, delayMs + duration + 30);
+    });
+  }
+
+  function animateClose(el, delayMs) {
+    const card = el.querySelector(".mp-card");
+    if (!card) return Promise.resolve();
+    if (reducedMotion) {
+      el.setAttribute("aria-hidden", "true");
+      card.style.opacity = "0";
+      card.style.transform = "translateY(12px)";
+      card.style.pointerEvents = "none";
+      return Promise.resolve();
+    }
+    const duration = 240;
+    card.style.opacity = "1";
+    card.style.transform = "translateY(0)";
+    card.style.willChange = "opacity, transform";
+
+    return new Promise((resolve) => {
+      window.setTimeout(() => {
+        card.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
+        card.style.opacity = "0";
+        card.style.transform = "translateY(12px)";
+      }, delayMs);
+
+      window.setTimeout(() => {
+        card.style.transition = "";
+        card.style.opacity = "";
+        card.style.transform = "";
+        card.style.willChange = "";
+        el.setAttribute("aria-hidden", "true");
+        card.style.opacity = "0";
+        card.style.transform = "translateY(12px)";
+        card.style.pointerEvents = "none";
+        resolve();
+      }, delayMs + duration + 30);
+    });
+  }
+
+  function setExpandedUi(expanded) {
+    btn.setAttribute("aria-expanded", expanded ? "true" : "false");
+    btn.textContent = expanded ? labelCollapse : labelExpand;
+  }
+
+  btn.addEventListener("click", async () => {
+    if (locked) return;
+    locked = true;
+    btn.disabled = true;
+
+    const next = btn.getAttribute("aria-expanded") !== "true";
+    setExpandedUi(next);
+
+    if (next) {
+      masonry.setExpanded(true);
+      const jobs = [];
+      extras.forEach((el, i) => jobs.push(animateOpen(el, i * 45)));
+      await Promise.all(jobs);
+    } else {
+      const reversed = Array.from(extras).reverse();
+      const jobs = [];
+      reversed.forEach((el, i) => jobs.push(animateClose(el, i * 35)));
+      await Promise.all(jobs);
+      masonry.setExpanded(false);
+      await wait(10);
+    }
+
+    masonry.relayout();
+    btn.disabled = false;
+    locked = false;
+  });
+
+  extras.forEach((el) => {
+    const card = el.querySelector(".mp-card");
+    el.setAttribute("aria-hidden", "true");
+    if (!card) return;
+    card.style.opacity = "0";
+    card.style.transform = "translateY(12px)";
+    card.style.pointerEvents = "none";
+  });
+  masonry.setExpanded(false);
+  masonry.relayout();
+}
diff --git a/public/js/modules/mini-projects/masonry.js b/public/js/modules/mini-projects/masonry.js
new file mode 100644
index 0000000..3e5397c
--- /dev/null
+++ b/public/js/modules/mini-projects/masonry.js
@@ -0,0 +1,155 @@
+export function initMiniProjectsMasonry() {
+  const lists = document.querySelectorAll("[data-mini-projects-list]");
+  if (!lists.length) return null;
+  if (lists.length === 1) return initMiniProjectsMasonryList(lists[0]);
+  return Array.from(lists, initMiniProjectsMasonryList);
+}
+
+function initMiniProjectsMasonryList(list) {
+  if (!list) return null;
+
+  const allItems = Array.from(list.querySelectorAll(".mini-projects-grid__item"));
+  const extraItems = allItems.filter((el) => el.hasAttribute("data-mp-extra"));
+  const baseItems = allItems.filter((el) => !el.hasAttribute("data-mp-extra"));
+  const gap = 16;
+  let rafId = 0;
+  let expanded = false;
+  let fullHeight = 0;
+  let collapsedHeight = 0;
+
+  extraItems.forEach((el) => el.removeAttribute("hidden"));
+
+  function rowCellsForWidth(w) {
+    if (w >= 1180) return 6;
+    if (w >= 880) return 4;
+    if (w >= 520) return 2;
+    return 1;
+  }
+
+  function readDeclaredCells(el) {
+    const raw = el.getAttribute("data-mp-cells");
+    const n = raw == null ? 1 : Number.parseInt(String(raw), 10);
+    if (!Number.isFinite(n)) return 1;
+    return Math.min(3, Math.max(1, n));
+  }
+
+  function pickStartColumn(heights, rowCells, wCells) {
+    let bestC = 0;
+    let bestTop = Infinity;
+    for (let c = 0; c <= rowCells - wCells; c += 1) {
+      let top = 0;
+      for (let k = 0; k < wCells; k += 1) {
+        top = Math.max(top, heights[c + k]);
+      }
+      if (top < bestTop || (top === bestTop && c < bestC)) {
+        bestTop = top;
+        bestC = c;
+      }
+    }
+    return bestC;
+  }
+
+  /** Целые ширины клеток в сумме дают внутреннюю ширину ряда (без промежутков между колонками). */
+  function integerCellWidths(innerPx, rowCells) {
+    if (rowCells <= 0) return [];
+    const base = Math.floor(innerPx / rowCells);
+    const remainder = innerPx % rowCells;
+    const widths = [];
+    for (let i = 0; i < rowCells; i += 1) {
+      widths.push(base + (i < remainder ? 1 : 0));
+    }
+    return widths;
+  }
+
+  function spanInnerWidth(cellWidths, startCol, wCells) {
+    let sum = 0;
+    for (let i = 0; i < wCells; i += 1) {
+      sum += cellWidths[startCol + i];
+    }
+    return sum;
+  }
+
+  function xAtColumn(cellWidths, startCol) {
+    let x = 0;
+    for (let i = 0; i < startCol; i += 1) {
+      x += cellWidths[i] + gap;
+    }
+    return x;
+  }
+
+  function performLayout() {
+    if (!allItems.length) {
+      list.style.height = "0px";
+      return;
+    }
+
+    const listWidth = list.clientWidth;
+    const rowCells = rowCellsForWidth(listWidth);
+    const innerPx = Math.max(0, listWidth - gap * (rowCells - 1));
+    const cellWidths = integerCellWidths(innerPx, rowCells);
+    const heights = Array(rowCells).fill(0);
+    const positions = new Map();
+
+    allItems.forEach((item) => {
+      const want = readDeclaredCells(item);
+      const wCells = Math.min(want, rowCells);
+      const c = pickStartColumn(heights, rowCells, wCells);
+      let y = 0;
+      for (let k = 0; k < wCells; k += 1) {
+        y = Math.max(y, heights[c + k]);
+      }
+      y = Math.round(y);
+      const widthPx = spanInnerWidth(cellWidths, c, wCells) + (wCells - 1) * gap;
+      const x = xAtColumn(cellWidths, c);
+      item.style.width = `${widthPx}px`;
+      item.style.transform = `translate(${x}px, ${y}px)`;
+      const h = item.offsetHeight;
+      const next = y + h + gap;
+      for (let k = 0; k < wCells; k += 1) {
+        heights[c + k] = next;
+      }
+      positions.set(item, { y, h });
+    });
+
+    fullHeight = Math.max(0, Math.round(Math.max(...heights, 0) - gap) + 1);
+    collapsedHeight = 0;
+    baseItems.forEach((item) => {
+      const p = positions.get(item);
+      if (!p) return;
+      collapsedHeight = Math.max(collapsedHeight, Math.round(p.y + p.h) + 1);
+    });
+    list.style.height = `${expanded ? fullHeight : collapsedHeight}px`;
+  }
+
+  function relayout() {
+    if (rafId) window.cancelAnimationFrame(rafId);
+    rafId = window.requestAnimationFrame(performLayout);
+  }
+
+  function relayoutAfterThemeChange() {
+    relayout();
+    if (document.fonts?.ready) {
+      document.fonts.ready.then(relayout);
+    }
+    window.requestAnimationFrame(() => {
+      relayout();
+      window.requestAnimationFrame(relayout);
+    });
+  }
+
+  window.addEventListener("site-theme-applied", relayoutAfterThemeChange, { passive: true });
+  window.addEventListener("resize", relayout, { passive: true });
+  window.addEventListener("load", relayout, { once: true });
+  list.querySelectorAll("img").forEach((img) => {
+    if (img.complete) return;
+    img.addEventListener("load", () => relayout(), { passive: true });
+  });
+  relayout();
+
+  function setExpanded(next) {
+    expanded = next;
+    list.style.height = `${Math.round(expanded ? fullHeight : collapsedHeight)}px`;
+  }
+
+  return { list, relayout, setExpanded, extraItems };
+}
diff --git a/public/js/modules/shared/dom.js b/public/js/modules/shared/dom.js
new file mode 100644
index 0000000..6ddbb3a
--- /dev/null
+++ b/public/js/modules/shared/dom.js
@@ -0,0 +1,6 @@
+export function syncAriaRadioGroup(nodes, attrName, currentId) {
+  nodes.forEach((node) => {
+    const id = node.getAttribute(attrName);
+    node.setAttribute("aria-checked", id === currentId ? "true" : "false");
+  });
+}
diff --git a/public/js/modules/shared/image-src.js b/public/js/modules/shared/image-src.js
new file mode 100644
index 0000000..7a75ca4
--- /dev/null
+++ b/public/js/modules/shared/image-src.js
@@ -0,0 +1,5 @@
+export const TINY_IMG_PLACEHOLDER_PREFIX = "data:image/gif;base64,R0lGODlhAQAB";
+
+export function isTinyPlaceholderSrc(src) {
+  return typeof src === "string" && src.startsWith(TINY_IMG_PLACEHOLDER_PREFIX);
+}
diff --git a/public/js/modules/shared/math.js b/public/js/modules/shared/math.js
new file mode 100644
index 0000000..73150a3
--- /dev/null
+++ b/public/js/modules/shared/math.js
@@ -0,0 +1,5 @@
+export function clampNum(v, min, max, fallback) {
+  const n = Number(v);
+  if (!Number.isFinite(n)) return fallback;
+  return Math.min(max, Math.max(min, n));
+}
diff --git a/public/js/modules/shared/media.js b/public/js/modules/shared/media.js
new file mode 100644
index 0000000..4c72d75
--- /dev/null
+++ b/public/js/modules/shared/media.js
@@ -0,0 +1,17 @@
+export function prefersReducedMotion() {
+  return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+export function prefersColorSchemeDark() {
+  return typeof window.matchMedia === "function" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+
+export function subscribePrefersColorSchemeChange(handler) {
+  const mq = window.matchMedia?.("(prefers-color-scheme: dark)");
+  if (!mq) return;
+  if (typeof mq.addEventListener === "function") {
+    mq.addEventListener("change", handler);
+  } else if (typeof mq.addListener === "function") {
+    mq.addListener(handler);
+  }
+}
diff --git a/public/js/modules/shared/schedule-idle.js b/public/js/modules/shared/schedule-idle.js
new file mode 100644
index 0000000..fc6e345
--- /dev/null
+++ b/public/js/modules/shared/schedule-idle.js
@@ -0,0 +1,12 @@
+/** Запуск после load; внутри — requestIdleCallback или короткий timeout. */
+export function runAfterInitialLoad(fn) {
+  const run = () => {
+    if (typeof requestIdleCallback === "function") {
+      requestIdleCallback(() => fn(), { timeout: 2500 });
+    } else {
+      setTimeout(fn, 200);
+    }
+  };
+  if (document.readyState === "complete") run();
+  else window.addEventListener("load", run, { once: true });
+}
diff --git a/public/js/modules/theme/theme-controls.js b/public/js/modules/theme/theme-controls.js
new file mode 100644
index 0000000..bf12f0e
--- /dev/null
+++ b/public/js/modules/theme/theme-controls.js
@@ -0,0 +1,177 @@
+import { syncAriaRadioGroup } from "../shared/dom.js";
+import { clampNum } from "../shared/math.js";
+import { subscribePrefersColorSchemeChange } from "../shared/media.js";
+import {
+  PICK,
+  S_RANGE,
+  L_RANGE,
+  RADIUS_IDS,
+  THEME_MODE_IDS,
+  FONT_IDS,
+  MESH_BG_IDS,
+  applyThemeState,
+  drawSLPlane,
+  readThemeState,
+  updateKnob,
+  writeThemeState,
+} from "./theme-core.js";
+import { ensureThemeFontLoaded } from "./theme-fonts.js";
+
+export function initThemeControls() {
+  const picker = document.querySelector("[data-theme-picker]");
+  const panel = document.querySelector("[data-theme-panel]");
+  const panelBtns = document.querySelectorAll("[data-theme-panel-btn]");
+  const themeModeBtns = document.querySelectorAll("[data-theme-mode]");
+  const canvas = document.querySelector("[data-sl-canvas]");
+  const knob = document.querySelector("[data-sl-knob]");
+  const hueSlider = document.querySelector("[data-hue-slider]");
+  const radiusBtns = document.querySelectorAll("[data-radius-option]");
+  const fontBtns = document.querySelectorAll("[data-font-option]");
+  const meshBgBtns = document.querySelectorAll("[data-mesh-bg-option]");
+
+  const themeOk =
+    picker && panel && panelBtns.length > 0 && themeModeBtns.length === 3 && canvas && hueSlider;
+  if (!themeOk) {
+    window.siteThemePanel = { open: () => {}, close: () => {}, toggle: () => {} };
+    return;
+  }
+
+  const state = readThemeState();
+  applyThemeState(state);
+  ensureThemeFontLoaded(state.font);
+
+  function syncHueSlider() {
+    hueSlider.value = String(Math.round(state.h));
+    hueSlider.setAttribute("aria-valuenow", String(Math.round(state.h)));
+  }
+
+  function persistAndApply() {
+    applyThemeState(state);
+    ensureThemeFontLoaded(state.font);
+    writeThemeState(state);
+  }
+
+  function bindOptionButtons(btns, attr, ids, stateKey) {
+    btns.forEach((btn) => {
+      btn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const id = btn.getAttribute(attr);
+        if (!ids.includes(id)) return;
+        state[stateKey] = id;
+        syncAriaRadioGroup(btns, attr, state[stateKey]);
+        persistAndApply();
+      });
+    });
+  }
+
+  syncHueSlider();
+  drawSLPlane(canvas, state.h);
+  updateKnob(knob, state.s, state.l);
+  syncAriaRadioGroup(radiusBtns, "data-radius-option", state.radius);
+  syncAriaRadioGroup(themeModeBtns, "data-theme-mode", state.mode);
+  syncAriaRadioGroup(fontBtns, "data-font-option", state.font);
+  if (meshBgBtns.length >= 2) syncAriaRadioGroup(meshBgBtns, "data-mesh-bg-option", state.meshBg);
+
+  bindOptionButtons(radiusBtns, "data-radius-option", RADIUS_IDS, "radius");
+  bindOptionButtons(fontBtns, "data-font-option", FONT_IDS, "font");
+  bindOptionButtons(themeModeBtns, "data-theme-mode", THEME_MODE_IDS, "mode");
+  if (meshBgBtns.length >= 2) bindOptionButtons(meshBgBtns, "data-mesh-bg-option", MESH_BG_IDS, "meshBg");
+
+  function setPanelOpen(open) {
+    panel.hidden = !open;
+    panelBtns.forEach((btn) => {
+      btn.setAttribute("aria-expanded", open ? "true" : "false");
+      btn.setAttribute("aria-label", open ? "Закрыть настройки стиля" : "Настройки стиля");
+    });
+    if (open) {
+      drawSLPlane(canvas, state.h);
+      updateKnob(knob, state.s, state.l);
+      syncAriaRadioGroup(themeModeBtns, "data-theme-mode", state.mode);
+      syncAriaRadioGroup(fontBtns, "data-font-option", state.font);
+      if (meshBgBtns.length >= 2) syncAriaRadioGroup(meshBgBtns, "data-mesh-bg-option", state.meshBg);
+    }
+  }
+
+  subscribePrefersColorSchemeChange(() => {
+    if (state.mode !== "system") return;
+    applyThemeState(state);
+  });
+
+  panelBtns.forEach((btn) => {
+    btn.addEventListener("click", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setPanelOpen(panel.hidden);
+    });
+  });
+
+  picker.addEventListener("click", (e) => e.stopPropagation());
+
+  document.addEventListener("click", (e) => {
+    const t = e.target;
+    if (!(t instanceof Node)) return;
+    const el = t instanceof Element ? t : t.parentElement;
+    if (el?.closest("[data-theme-panel-btn]")) return;
+    if (panel.contains(t) || picker.contains(t) || panel.hidden) return;
+    setPanelOpen(false);
+  });
+
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape" && !panel.hidden) {
+      setPanelOpen(false);
+      e.preventDefault();
+    }
+  });
+
+  try {
+    const params = new URLSearchParams(window.location.search);
+    if (params.get("themePanel") === "open") requestAnimationFrame(() => setPanelOpen(true));
+  } catch {
+    /* ignore */
+  }
+
+  window.siteThemePanel = {
+    open: () => setPanelOpen(true),
+    close: () => setPanelOpen(false),
+    toggle: () => setPanelOpen(!!panel.hidden),
+  };
+
+  let canvasRect = null;
+
+  function pickFromClientXY(clientX, clientY) {
+    const r = canvasRect || canvas.getBoundingClientRect();
+    if (r.width <= 0 || r.height <= 0) return;
+    const x = clampNum(((clientX - r.left) / r.width) * 100, 0, 100, 0) / 100;
+    const y = clampNum(((clientY - r.top) / r.height) * 100, 0, 100, 0) / 100;
+    state.s = Math.round(PICK.sMin + x * S_RANGE);
+    state.l = Math.round(PICK.lMin + (1 - y) * L_RANGE);
+    updateKnob(knob, state.s, state.l);
+    persistAndApply();
+  }
+
+  canvas.addEventListener("pointerdown", (e) => {
+    e.preventDefault();
+    canvasRect = canvas.getBoundingClientRect();
+    canvas.setPointerCapture(e.pointerId);
+    pickFromClientXY(e.clientX, e.clientY);
+  });
+
+  canvas.addEventListener("pointermove", (e) => {
+    if (!canvas.hasPointerCapture(e.pointerId)) return;
+    e.preventDefault();
+    pickFromClientXY(e.clientX, e.clientY);
+  });
+
+  canvas.addEventListener("pointerup", (e) => {
+    if (canvas.hasPointerCapture(e.pointerId)) canvas.releasePointerCapture(e.pointerId);
+    canvasRect = null;
+  });
+
+  hueSlider.addEventListener("input", () => {
+    state.h = clampNum(hueSlider.value, 0, 360, state.h);
+    syncHueSlider();
+    drawSLPlane(canvas, state.h);
+    updateKnob(knob, state.s, state.l);
+    persistAndApply();
+  });
+}
diff --git a/public/js/modules/theme/theme-core.js b/public/js/modules/theme/theme-core.js
new file mode 100644
index 0000000..a16e4d3
--- /dev/null
+++ b/public/js/modules/theme/theme-core.js
@@ -0,0 +1,151 @@
+import { clampNum } from "../shared/math.js";
+import { prefersColorSchemeDark } from "../shared/media.js";
+
+export const STORAGE_KEY = "siteThemeV1";
+export const RADIUS_IDS = ["soft", "medium", "strong"];
+export const THEME_MODE_IDS = ["system", "light", "dark"];
+export const FONT_IDS = ["merriweather", "mono", "geologica"];
+
+const LEGACY_FONT_MAP = {
+  onest: "geologica",
+  anonymous: "mono",
+};
+
+export function normalizeFontId(font) {
+  if (LEGACY_FONT_MAP[font]) return LEGACY_FONT_MAP[font];
+  return FONT_IDS.includes(font) ? font : defaultThemeState().font;
+}
+export const MESH_BG_IDS = ["on", "off"];
+
+export const PICK = {
+  sMin: 30,
+  sMax: 100,
+  lMin: 20,
+  lMax: 70,
+};
+export const S_RANGE = PICK.sMax - PICK.sMin;
+export const L_RANGE = PICK.lMax - PICK.lMin;
+
+export function defaultThemeState() {
+  return { mode: "system", h: 210, s: 90, l: 40, radius: "medium", font: "geologica", meshBg: "on" };
+}
+
+export function effectiveThemeMode(state) {
+  if (state.mode === "system") return prefersColorSchemeDark() ? "dark" : "light";
+  return state.mode;
+}
+
+export function readThemeState() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return defaultThemeState();
+    const o = JSON.parse(raw);
+    const base = defaultThemeState();
+    const hRaw = o.h ?? o.hue;
+    const h = clampNum(hRaw, 0, 360, base.h);
+    const s = clampNum(o.s ?? o.sat, PICK.sMin, PICK.sMax, base.s);
+    const lRaw = o.l ?? o.light;
+    const l = clampNum(lRaw, PICK.lMin, PICK.lMax, base.l);
+    const mode =
+      o.mode === "light" || o.mode === "dark" || o.mode === "system" ? o.mode : base.mode;
+    const radius = RADIUS_IDS.includes(o.radius) ? o.radius : base.radius;
+    const font = normalizeFontId(o.font ?? base.font);
+    const meshBg = MESH_BG_IDS.includes(o.meshBg) ? o.meshBg : base.meshBg;
+    return { mode, h, s, l, radius, font, meshBg };
+  } catch {
+    return defaultThemeState();
+  }
+}
+
+export function writeThemeState(state) {
+  localStorage.setItem(
+    STORAGE_KEY,
+    JSON.stringify({
+      mode: state.mode,
+      h: state.h,
+      s: state.s,
+      l: state.l,
+      radius: state.radius,
+      font: state.font,
+      meshBg: state.meshBg,
+    }),
+  );
+}
+
+export function hslToRgb(h, s, l) {
+  const H = (((h % 360) + 360) % 360) / 360;
+  const S = Math.min(100, Math.max(0, s)) / 100;
+  const L = Math.min(100, Math.max(0, l)) / 100;
+  let r;
+  let g;
+  let b;
+  if (S === 0) {
+    r = g = b = L;
+  } else {
+    const hue2rgb = (p, q, t) => {
+      let T = t;
+      if (T < 0) T += 1;
+      if (T > 1) T -= 1;
+      if (T < 1 / 6) return p + (q - p) * 6 * T;
+      if (T < 1 / 2) return q;
+      if (T < 2 / 3) return p + (q - p) * (2 / 3 - T) * 6;
+      return p;
+    };
+    const q = L < 0.5 ? L * (1 + S) : L + S - L * S;
+    const p = 2 * L - q;
+    r = hue2rgb(p, q, H + 1 / 3);
+    g = hue2rgb(p, q, H);
+    b = hue2rgb(p, q, H - 1 / 3);
+  }
+  return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+}
+
+export function relativeLuminance(rgb) {
+  const lin = rgb.map((v) => {
+    const x = v / 255;
+    return x <= 0.03928 ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * lin[0] + 0.7152 * lin[1] + 0.0722 * lin[2];
+}
+
+export function applyThemeState(state) {
+  const root = document.documentElement;
+  root.dataset.theme = effectiveThemeMode(state);
+  root.dataset.radius = state.radius;
+  root.dataset.font = state.font;
+  root.dataset.meshBg = state.meshBg === "off" ? "off" : "on";
+  root.style.setProperty("--theme-h", String(state.h));
+  root.style.setProperty("--theme-s", String(state.s));
+  root.style.setProperty("--theme-l", String(state.l));
+  const rgb = hslToRgb(state.h, state.s, state.l);
+  const lum = relativeLuminance(rgb);
+  root.style.setProperty("--on-accent", lum > 0.58 ? "hsl(220 14% 12%)" : "hsl(0 0% 98%)");
+  window.dispatchEvent(new CustomEvent("site-theme-applied", { bubbles: true }));
+}
+
+export function drawSLPlane(canvas, hue) {
+  const ctx = canvas.getContext("2d", { willReadFrequently: true });
+  const w = canvas.width;
+  const h = canvas.height;
+  const img = ctx.createImageData(w, h);
+  const { data } = img;
+  for (let y = 0; y < h; y++) {
+    const l = PICK.lMax - (y / (h - 1 || 1)) * L_RANGE;
+    for (let x = 0; x < w; x++) {
+      const s = PICK.sMin + (x / (w - 1 || 1)) * S_RANGE;
+      const [r, g, b] = hslToRgb(hue, s, l);
+      const i = (y * w + x) * 4;
+      data[i] = r;
+      data[i + 1] = g;
+      data[i + 2] = b;
+      data[i + 3] = 255;
+    }
+  }
+  ctx.putImageData(img, 0, 0);
+}
+
+export function updateKnob(knob, s, l) {
+  if (!knob) return;
+  knob.style.left = `${((s - PICK.sMin) / S_RANGE) * 100}%`;
+  knob.style.top = `${(1 - (l - PICK.lMin) / L_RANGE) * 100}%`;
+}
diff --git a/public/js/modules/theme/theme-fonts.js b/public/js/modules/theme/theme-fonts.js
new file mode 100644
index 0000000..b4a4c4d
--- /dev/null
+++ b/public/js/modules/theme/theme-fonts.js
@@ -0,0 +1,33 @@
+import { normalizeFontId } from "./theme-core.js";
+
+/** Префикс путей к ассетам (корень "" или "../" на страницах cases/*). */
+export function getAssetPrefix() {
+  const link = document.querySelector('link[rel="stylesheet"][href*="css/main.css"]');
+  if (link) {
+    const href = link.getAttribute("href") || "";
+    const marker = "css/main.css";
+    const idx = href.lastIndexOf(marker);
+    if (idx !== -1) return href.slice(0, idx);
+  }
+  const p = window.location.pathname || "";
+  if (p.includes("/cases/")) return "../";
+  return "";
+}
+
+export function themeFontStylesheetHref(fontId) {
+  const id = normalizeFontId(fontId);
+  return `${getAssetPrefix()}assets/fonts/${id}.css`;
+}
+
+export function ensureThemeFontLoaded(fontId) {
+  const id = normalizeFontId(fontId);
+  const href = themeFontStylesheetHref(id);
+  if (!href) return;
+  if (document.querySelector(`link[data-theme-font="${id}"]`)) return;
+
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = href;
+  link.dataset.themeFont = id;
+  document.head.appendChild(link);
+}
diff --git a/public/js/modules/ui/contact-copy.js b/public/js/modules/ui/contact-copy.js
new file mode 100644
index 0000000..7b2471d
--- /dev/null
+++ b/public/js/modules/ui/contact-copy.js
@@ -0,0 +1,58 @@
+export function initContactCopy() {
+  const btn = document.querySelector("[data-contact-copy]");
+  if (!btn) return;
+  const hintEl = btn.querySelector("[data-contact-copy-hint]");
+  const defaultHint = btn.getAttribute("data-hint-default") || hintEl?.textContent?.trim() || "";
+  let resetTimer = 0;
+
+  function fallbackCopyText(text) {
+    const ta = document.createElement("textarea");
+    ta.value = text;
+    ta.setAttribute("readonly", "");
+    ta.style.position = "fixed";
+    ta.style.left = "-9999px";
+    document.body.appendChild(ta);
+    ta.select();
+    try {
+      document.execCommand("copy");
+    } finally {
+      document.body.removeChild(ta);
+    }
+  }
+
+  btn.addEventListener("click", async () => {
+    const b64 = btn.getAttribute("data-email-b64");
+    if (!b64 || !hintEl) return;
+    let email = "";
+    try {
+      email = atob(b64);
+    } catch {
+      return;
+    }
+    let ok = false;
+    try {
+      if (navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(email);
+        ok = true;
+      }
+    } catch {
+      ok = false;
+    }
+    if (!ok) {
+      try {
+        fallbackCopyText(email);
+        ok = true;
+      } catch {
+        ok = false;
+      }
+    }
+    if (resetTimer) window.clearTimeout(resetTimer);
+    hintEl.textContent = ok ? "Скопировано" : "Не удалось скопировать";
+    btn.setAttribute("aria-label", ok ? "Адрес скопирован в буфер обмена" : "Не удалось скопировать адрес");
+    resetTimer = window.setTimeout(() => {
+      hintEl.textContent = defaultHint;
+      btn.setAttribute("aria-label", "Скопировать адрес электронной почты в буфер обмена");
+      resetTimer = 0;
+    }, 2500);
+  });
+}
diff --git a/public/js/modules/ui/content-edit/content-edit-dock.js b/public/js/modules/ui/content-edit/content-edit-dock.js
new file mode 100644
index 0000000..5248368
--- /dev/null
+++ b/public/js/modules/ui/content-edit/content-edit-dock.js
@@ -0,0 +1,309 @@
+import { getItemKey, isPageScopeItem } from "./content-edit-target.js";
+
+const DEBOUNCE_MS = 400;
+
+function itemLabel(item) {
+  const instruction = item.instruction || "";
+  const text = instruction.length > 80 ? `${instruction.slice(0, 80)}…` : instruction;
+  if (isPageScopeItem(item)) {
+    return text ? `Страница: ${text}` : "Общая правка страницы";
+  }
+  return text;
+}
+
+export function createDock({ onSave, onSelect, onDraft, onDelete }) {
+  const root = document.createElement("div");
+  root.className = "content-edit-dock glass-neutral";
+  root.setAttribute("data-content-edit-ui", "");
+  root.hidden = true;
+
+  root.innerHTML = `
+    <div class="content-edit-dock__list" role="listbox" aria-label="Список правок">
+      <h2 class="content-edit-dock__heading">Список правок</h2>
+      <p class="content-edit-dock__empty" hidden>Кликните блок на странице или пишите общую правку справа.</p>
+      <ul class="content-edit-dock__items"></ul>
+    </div>
+    <div class="content-edit-dock__editor">
+      <h2 class="content-edit-dock__heading" id="content-edit-dock-editor-heading">Инструкция агенту</h2>
+      <div class="content-edit-dock__editor-body">
+        <textarea
+          class="content-edit-dock__input"
+          rows="5"
+          placeholder="Что изменить, добавить после, куда перенести…"
+          aria-labelledby="content-edit-dock-editor-heading"
+          disabled
+        ></textarea>
+        <p class="content-edit-dock__hint">Shift+клик по блоку — вставить ссылку в текст</p>
+      </div>
+    </div>
+  `;
+
+  const listEl = root.querySelector(".content-edit-dock__items");
+  const emptyEl = root.querySelector(".content-edit-dock__empty");
+  const textarea = root.querySelector("textarea");
+
+  let debounceTimer = null;
+  let currentItem = null;
+  let suppressInput = false;
+  let items = [];
+  let selectedKey = null;
+  let resizeObserver = null;
+  let savedCaret = null;
+
+  function captureCaret() {
+    if (textarea.disabled) return;
+    savedCaret = {
+      start: textarea.selectionStart,
+      end: textarea.selectionEnd,
+    };
+  }
+
+  function syncDockHeight() {
+    const h = root.getBoundingClientRect().height;
+    document.documentElement.style.setProperty("--content-edit-dock-height", `${Math.ceil(h)}px`);
+  }
+
+  function observeHeight() {
+    if (resizeObserver) return;
+    resizeObserver = new ResizeObserver(syncDockHeight);
+    resizeObserver.observe(root);
+  }
+
+  function unobserveHeight() {
+    resizeObserver?.disconnect();
+    resizeObserver = null;
+    document.documentElement.style.removeProperty("--content-edit-dock-height");
+  }
+
+  function scrollSelectedIntoList() {
+    const btn = listEl.querySelector(".content-edit-dock__item.is-selected");
+    btn?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+  }
+
+  function scheduleSave() {
+    clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => {
+      if (!currentItem) return;
+      onSave({ item: currentItem, instruction: textarea.value });
+    }, DEBOUNCE_MS);
+  }
+
+  function patchCurrentInstruction(raw, { draft = true } = {}) {
+    if (!currentItem) return;
+    currentItem = { ...currentItem, instruction: raw };
+    if (draft) onDraft?.({ item: currentItem, instruction: raw });
+  }
+
+  function patchCurrentItem(fields) {
+    if (!currentItem) return;
+    currentItem = { ...currentItem, ...fields };
+    const instruction = fields.instruction ?? currentItem.instruction ?? textarea.value;
+    currentItem = { ...currentItem, instruction };
+    onDraft?.({ item: currentItem, instruction });
+  }
+
+  textarea.addEventListener("input", () => {
+    if (suppressInput) return;
+    patchCurrentInstruction(textarea.value);
+    captureCaret();
+    scheduleSave();
+  });
+
+  textarea.addEventListener("keyup", captureCaret);
+  textarea.addEventListener("click", captureCaret);
+  textarea.addEventListener("select", captureCaret);
+
+  function renderList() {
+    listEl.replaceChildren();
+
+    if (!items.length) {
+      emptyEl.hidden = false;
+      return;
+    }
+
+    emptyEl.hidden = true;
+
+    for (const item of items) {
+      const li = document.createElement("li");
+      li.className = "content-edit-dock__row";
+
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "content-edit-dock__item";
+      btn.setAttribute("role", "option");
+      btn.dataset.itemKey = getItemKey(item);
+      btn.textContent = `${item.n}. ${itemLabel(item)}`;
+      const itemKey = btn.dataset.itemKey;
+      if (itemKey && itemKey === selectedKey) {
+        btn.classList.add("is-selected");
+        btn.setAttribute("aria-selected", "true");
+      } else {
+        btn.setAttribute("aria-selected", "false");
+      }
+      btn.addEventListener("click", () => onSelect?.(item));
+
+      const deleteBtn = document.createElement("button");
+      deleteBtn.type = "button";
+      deleteBtn.className = "content-edit-dock__delete";
+      deleteBtn.title = "Удалить";
+      deleteBtn.setAttribute("aria-label", `Удалить правку ${item.n}`);
+      deleteBtn.innerHTML = '<span class="content-edit-dock__delete-icon" aria-hidden="true"></span>';
+      deleteBtn.addEventListener("click", (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onDelete?.(item);
+      });
+
+      li.appendChild(btn);
+      li.appendChild(deleteBtn);
+      listEl.appendChild(li);
+    }
+
+    if (selectedKey && items.some((i) => getItemKey(i) === selectedKey)) {
+      requestAnimationFrame(scrollSelectedIntoList);
+    }
+  }
+
+  function itemKeyOf(item) {
+    return getItemKey(item) || null;
+  }
+
+  function loadEditor(item) {
+    currentItem = item;
+    selectedKey = itemKeyOf(item);
+    suppressInput = true;
+    textarea.value = item?.instruction ?? "";
+    textarea.disabled = !item;
+    textarea.placeholder = isPageScopeItem(item)
+      ? "Общая правка страницы: что изменить на странице…"
+      : "Что изменить, добавить после, куда перенести…";
+    suppressInput = false;
+    renderList();
+  }
+
+  return {
+    el: root,
+    textarea,
+
+    open() {
+      root.hidden = false;
+      observeHeight();
+      requestAnimationFrame(syncDockHeight);
+    },
+
+    close() {
+      root.hidden = true;
+      unobserveHeight();
+      currentItem = null;
+      selectedKey = null;
+      clearTimeout(debounceTimer);
+    },
+
+    isOpen() {
+      return !root.hidden;
+    },
+
+    setItems(nextItems) {
+      items = nextItems;
+      if (currentItem) {
+        const key = itemKeyOf(currentItem);
+        const fresh = items.find((i) => itemKeyOf(i) === key);
+        if (fresh) {
+          currentItem = {
+            ...fresh,
+            instruction: textarea.disabled ? fresh.instruction : textarea.value,
+          };
+        }
+      }
+      renderList();
+    },
+
+    selectItem(item, { focusEditor = true } = {}) {
+      loadEditor(item);
+      captureCaret();
+      if (focusEditor && item) textarea.focus();
+    },
+
+    clearSelection() {
+      currentItem = null;
+      selectedKey = null;
+      suppressInput = true;
+      textarea.value = "";
+      textarea.disabled = true;
+      suppressInput = false;
+      renderList();
+    },
+
+    getCurrentItem() {
+      return currentItem;
+    },
+
+    flushSave() {
+      clearTimeout(debounceTimer);
+      if (!currentItem) return;
+      onSave({ item: currentItem, instruction: textarea.value });
+    },
+
+    insertAtCaret(text, insertContext = null) {
+      if (!currentItem || textarea.disabled || !text) return false;
+
+      const baseText = insertContext?.text ?? textarea.value;
+      let start;
+      let end;
+
+      if (insertContext?.caret) {
+        ({ start, end } = insertContext.caret);
+      } else if (document.activeElement === textarea) {
+        start = textarea.selectionStart;
+        end = textarea.selectionEnd;
+      } else if (savedCaret) {
+        ({ start, end } = savedCaret);
+      } else {
+        start = baseText.length;
+        end = baseText.length;
+      }
+
+      const before = baseText.slice(0, start);
+      const after = baseText.slice(end);
+      const next = before + text + after;
+
+      suppressInput = true;
+      textarea.value = next;
+      const pos = start + text.length;
+      textarea.setSelectionRange(pos, pos);
+      suppressInput = false;
+
+      savedCaret = { start: pos, end: pos };
+      patchCurrentInstruction(next, { draft: false });
+      scheduleSave();
+      textarea.focus();
+      return true;
+    },
+
+    getInsertContext() {
+      if (!currentItem || textarea.disabled) return null;
+
+      const text = textarea.value;
+      let caret;
+
+      if (document.activeElement === textarea) {
+        caret = {
+          start: textarea.selectionStart,
+          end: textarea.selectionEnd,
+        };
+      } else if (savedCaret) {
+        caret = { ...savedCaret };
+      } else {
+        caret = { start: text.length, end: text.length };
+      }
+
+      return { text, caret };
+    },
+
+    saveCaret: captureCaret,
+
+    patchItem(fields) {
+      patchCurrentItem(fields);
+    },
+  };
+}
diff --git a/public/js/modules/ui/content-edit/content-edit-mode.js b/public/js/modules/ui/content-edit/content-edit-mode.js
new file mode 100644
index 0000000..8d90e72
--- /dev/null
+++ b/public/js/modules/ui/content-edit/content-edit-mode.js
@@ -0,0 +1,441 @@
+import { getPagePath, isContentEditHost, loadEdits, saveEdits } from "./content-edit-storage.js";
+import {
+  buildPageTarget,
+  buildRefTarget,
+  buildTarget,
+  findClickableTarget,
+  findItemBySelector,
+  findPageEditItem,
+  getItemKey,
+  getMainRoot,
+  isPageScopeItem,
+  resolveElement,
+} from "./content-edit-target.js";
+import { createDock } from "./content-edit-dock.js";
+
+const OUTLINE_CLASS = "content-edit-outline";
+const HOVER_OUTLINE_CLASS = "content-edit-outline-hover";
+const REF_HOVER_OUTLINE_CLASS = "content-edit-outline-ref-hover";
+const HOVER_THROTTLE_MS = 50;
+
+function hasQueuedInstruction(text) {
+  return Boolean(text && text.trim());
+}
+
+function padRefToken(token, insertContext) {
+  const before = insertContext.text.slice(0, insertContext.caret.start);
+  const after = insertContext.text.slice(insertContext.caret.end);
+
+  let padded = token;
+  if (before.length > 0 && !/\s$/.test(before)) {
+    padded = ` ${padded}`;
+  }
+  if (after.length === 0 || (after.length > 0 && !/^\s/.test(after))) {
+    padded = `${padded} `;
+  }
+  return padded;
+}
+
+export function initContentEditMode() {
+  if (!isContentEditHost()) return;
+
+  const main = getMainRoot();
+  if (!main) return;
+
+  const modeBtn = document.querySelector("[data-content-edit-mode-toggle]");
+  const badgeEl = modeBtn?.querySelector(".content-edit-fab__badge");
+  if (!modeBtn) return;
+
+  modeBtn.hidden = false;
+
+  const page = getPagePath();
+  let modeActive = false;
+  let items = [];
+  let outlinedEl = null;
+  let hoverEl = null;
+  let hoverTimer = null;
+  let shiftHeld = false;
+  let skipNextClick = false;
+  let persistQueue = Promise.resolve();
+
+  const dock = createDock({
+    onSave: handleDockSave,
+    onSelect: (item) => openItem(item),
+    onDraft: handleDockDraft,
+    onDelete: (item) => deleteItem(item),
+  });
+
+  document.body.appendChild(dock.el);
+
+  function setOutline(el) {
+    clearOutline();
+    if (!el) return;
+    outlinedEl = el;
+    el.classList.add(OUTLINE_CLASS);
+    clearHoverOutline();
+  }
+
+  function clearOutline() {
+    if (outlinedEl) {
+      outlinedEl.classList.remove(OUTLINE_CLASS);
+      outlinedEl = null;
+    }
+  }
+
+  function setHoverOutline(el) {
+    if (!el || el === outlinedEl) {
+      clearHoverOutline();
+      return;
+    }
+    if (hoverEl === el) return;
+    clearHoverOutline();
+    hoverEl = el;
+    el.classList.add(shiftHeld && dock.getCurrentItem() ? REF_HOVER_OUTLINE_CLASS : HOVER_OUTLINE_CLASS);
+  }
+
+  function clearHoverOutline() {
+    if (hoverEl) {
+      hoverEl.classList.remove(HOVER_OUTLINE_CLASS, REF_HOVER_OUTLINE_CLASS);
+      hoverEl = null;
+    }
+  }
+
+  function queuedCount() {
+    return items.filter((i) => hasQueuedInstruction(i.instruction)).length;
+  }
+
+  function updateFabBadge() {
+    const count = queuedCount();
+    if (badgeEl) {
+      badgeEl.textContent = String(count);
+      badgeEl.hidden = count === 0;
+    }
+    const label =
+      count > 0 ? `Режим правок (${count} в очереди)` : "Режим правок контента";
+    modeBtn.setAttribute("aria-label", label);
+    modeBtn.title = count > 0 ? `Режим правок (${count})` : "Режим правок";
+  }
+
+  function syncDockItems() {
+    dock.setItems(items);
+    updateFabBadge();
+  }
+
+  function renumberItems() {
+    items = items.map((it, i) => ({ ...it, n: i + 1 }));
+  }
+
+  function upsertItemFromDraft(item, instruction) {
+    const key = getItemKey(item);
+    const idx = items.findIndex((i) => getItemKey(i) === key);
+    const merged = { ...item, instruction };
+    if (hasQueuedInstruction(instruction)) {
+      if (idx >= 0) {
+        items[idx] = { ...items[idx], ...merged };
+      } else {
+        items.push({ ...merged, n: items.length + 1 });
+        renumberItems();
+      }
+    } else if (idx >= 0) {
+      items = items.filter((_, i) => i !== idx);
+      renumberItems();
+    }
+    dock.setItems(items);
+    updateFabBadge();
+  }
+
+  function handleDockDraft({ item, instruction }) {
+    upsertItemFromDraft(item, instruction);
+  }
+
+  function persist() {
+    persistQueue = persistQueue
+      .then(async () => {
+        const payload = {
+          version: 2,
+          page,
+          items: items
+            .filter((i) => hasQueuedInstruction(i.instruction))
+            .map((i) => ({ ...i, page })),
+        };
+        const saved = await saveEdits(payload);
+        items = (Array.isArray(saved.items) ? saved.items : []).map((it, i) => ({ ...it, n: i + 1 }));
+        syncDockItems();
+      })
+      .catch(() => {});
+
+    return persistQueue;
+  }
+
+  async function load() {
+    try {
+      const data = await loadEdits(page);
+      items = Array.isArray(data.items) ? data.items : [];
+    } catch {
+      items = [];
+    }
+    syncDockItems();
+  }
+
+  function openItem(item) {
+    dock.flushSave();
+    if (isPageScopeItem(item)) {
+      clearOutline();
+      clearHoverOutline();
+      dock.selectItem(item);
+      return;
+    }
+    const el = resolveElement(item.target, main);
+    if (!el) {
+      clearOutline();
+      clearHoverOutline();
+      dock.selectItem(item);
+      return;
+    }
+    setOutline(el);
+    el.scrollIntoView({ behavior: "smooth", block: "center" });
+    dock.selectItem(item);
+  }
+
+  function openPageEdit({ skipFlush = false } = {}) {
+    if (!skipFlush) dock.flushSave();
+    const target = buildPageTarget(main);
+    let item = findPageEditItem(items);
+
+    if (!item) {
+      item = { instruction: "", target, refs: [] };
+    }
+
+    clearOutline();
+    clearHoverOutline();
+    dock.setItems(items);
+    dock.selectItem(item);
+  }
+
+  function deleteItem(item) {
+    const key = getItemKey(item);
+    if (!key) return;
+
+    const wasSelected = getItemKey(dock.getCurrentItem()) === key;
+
+    if (!wasSelected) {
+      dock.flushSave();
+    }
+
+    items = items.filter((i) => getItemKey(i) !== key);
+    renumberItems();
+
+    if (wasSelected) {
+      openPageEdit({ skipFlush: true });
+    }
+
+    syncDockItems();
+    persist();
+  }
+
+  function insertBlockRef(el, insertContext) {
+    const current = dock.getCurrentItem();
+    if (!current || dock.textarea.disabled) return;
+
+    const ref = buildRefTarget(el, main);
+    const token = padRefToken(`«${ref.label}»`, insertContext);
+    dock.insertAtCaret(token, insertContext);
+
+    const refs = Array.isArray(current.refs) ? [...current.refs] : [];
+    if (!refs.some((r) => r.target?.selector === ref.target.selector)) {
+      refs.push({ label: ref.label, target: ref.target });
+    }
+
+    const instruction = dock.textarea.value;
+    const updated = {
+      ...current,
+      refs,
+      instruction,
+    };
+
+    dock.patchItem({ refs, instruction });
+
+    const idx = items.findIndex((i) => getItemKey(i) === getItemKey(current));
+    if (idx >= 0) {
+      items[idx] = { ...items[idx], ...updated };
+    } else {
+      items.push({ ...updated, n: items.length + 1 });
+      renumberItems();
+    }
+
+    dock.setItems(items);
+    updateFabBadge();
+
+    if (hasQueuedInstruction(instruction)) {
+      persist();
+    }
+  }
+
+  function openForElement(el) {
+    dock.flushSave();
+    const target = buildTarget(el, main);
+    let item = findItemBySelector(items, target.selector);
+
+    if (!item) {
+      item = { instruction: "", target, refs: [] };
+    }
+
+    setOutline(el);
+    el.scrollIntoView({ behavior: "smooth", block: "center" });
+    dock.setItems(items);
+    dock.selectItem(item);
+  }
+
+  function handleDockSave({ item, instruction }) {
+    upsertItemFromDraft(item, instruction);
+    persist();
+  }
+
+  function setMode(active) {
+    modeActive = active;
+    modeBtn.setAttribute("aria-pressed", active ? "true" : "false");
+    modeBtn.classList.toggle("is-active", active);
+    document.body.classList.toggle("content-edit-mode-active", active);
+
+    if (active) {
+      dock.open();
+      dock.setItems(items);
+      if (!dock.getCurrentItem()) {
+        openPageEdit();
+      }
+    } else {
+      dock.flushSave();
+      dock.close();
+      clearOutline();
+      clearHoverOutline();
+      shiftHeld = false;
+      document.body.classList.remove("content-edit-shift-active");
+    }
+    updateFabBadge();
+  }
+
+  modeBtn.addEventListener("click", () => {
+    setMode(!modeActive);
+  });
+
+  main.addEventListener(
+    "pointerdown",
+    (event) => {
+      if (!modeActive) return;
+      if (event.target.closest("[data-content-edit-ui]")) return;
+
+      const target = findClickableTarget(event, main);
+      if (!target) return;
+
+      if (!event.shiftKey || !dock.getCurrentItem() || dock.textarea.disabled) return;
+
+      const insertContext = dock.getInsertContext();
+      if (!insertContext) return;
+
+      event.preventDefault();
+      event.stopPropagation();
+      skipNextClick = true;
+      insertBlockRef(target, insertContext);
+    },
+    true
+  );
+
+  main.addEventListener(
+    "click",
+    (event) => {
+      if (!modeActive) return;
+      if (event.target.closest("[data-content-edit-ui]")) return;
+
+      if (skipNextClick) {
+        skipNextClick = false;
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+
+      const target = findClickableTarget(event, main);
+      if (!target) {
+        dismissBlockSelection();
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+      openForElement(target);
+    },
+    true
+  );
+
+  document.addEventListener(
+    "click",
+    (event) => {
+      if (!modeActive) return;
+      if (event.target.closest("[data-content-edit-ui]")) return;
+      if (main.contains(event.target)) return;
+
+      dismissBlockSelection();
+    },
+    true
+  );
+
+  main.addEventListener("pointermove", (event) => {
+    if (!modeActive) return;
+    const { clientX, clientY } = event;
+
+    clearTimeout(hoverTimer);
+    hoverTimer = setTimeout(() => {
+      const under = document.elementFromPoint(clientX, clientY);
+      if (!under?.closest?.("main") || under.closest("[data-content-edit-ui]")) {
+        clearHoverOutline();
+        return;
+      }
+      const target = findClickableTarget({ target: under }, main);
+      setHoverOutline(target);
+    }, HOVER_THROTTLE_MS);
+  });
+
+  main.addEventListener("pointerleave", () => {
+    clearTimeout(hoverTimer);
+    clearHoverOutline();
+  });
+
+  function dismissBlockSelection() {
+    dock.flushSave();
+    clearOutline();
+    clearHoverOutline();
+    openPageEdit();
+  }
+
+  document.addEventListener("keydown", (event) => {
+    if (event.key === "Shift" && !shiftHeld) {
+      shiftHeld = true;
+      document.body.classList.add("content-edit-shift-active");
+      if (hoverEl) {
+        hoverEl.classList.remove(HOVER_OUTLINE_CLASS, REF_HOVER_OUTLINE_CLASS);
+        hoverEl.classList.add(
+          dock.getCurrentItem() ? REF_HOVER_OUTLINE_CLASS : HOVER_OUTLINE_CLASS
+        );
+      }
+    }
+
+    if (event.key !== "Escape" || !modeActive) return;
+    dismissBlockSelection();
+  });
+
+  document.addEventListener("keyup", (event) => {
+    if (event.key !== "Shift") return;
+    shiftHeld = false;
+    document.body.classList.remove("content-edit-shift-active");
+    if (hoverEl) {
+      hoverEl.classList.remove(HOVER_OUTLINE_CLASS, REF_HOVER_OUTLINE_CLASS);
+      hoverEl.classList.add(HOVER_OUTLINE_CLASS);
+    }
+  });
+
+  window.addEventListener("blur", () => {
+    shiftHeld = false;
+    document.body.classList.remove("content-edit-shift-active");
+  });
+
+  load();
+}
diff --git a/public/js/modules/ui/content-edit/content-edit-storage.js b/public/js/modules/ui/content-edit/content-edit-storage.js
new file mode 100644
index 0000000..df7a8c4
--- /dev/null
+++ b/public/js/modules/ui/content-edit/content-edit-storage.js
@@ -0,0 +1,28 @@
+const API = "/api/content-edits";
+
+export function getPagePath() {
+  const path = window.location.pathname.replace(/^\//, "");
+  if (!path || path.endsWith("/")) return "index.html";
+  return path;
+}
+
+export async function loadEdits(page = getPagePath()) {
+  const res = await fetch(`${API}?page=${encodeURIComponent(page)}`);
+  if (!res.ok) throw new Error("load failed");
+  return res.json();
+}
+
+export async function saveEdits(payload) {
+  const res = await fetch(`${API}?page=${encodeURIComponent(payload.page)}`, {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(payload),
+  });
+  if (!res.ok) throw new Error("save failed");
+  return res.json();
+}
+
+export function isContentEditHost() {
+  const host = window.location.hostname;
+  return host === "localhost" || host === "127.0.0.1";
+}
diff --git a/public/js/modules/ui/content-edit/content-edit-target.js b/public/js/modules/ui/content-edit/content-edit-target.js
new file mode 100644
index 0000000..c1998ab
--- /dev/null
+++ b/public/js/modules/ui/content-edit/content-edit-target.js
@@ -0,0 +1,295 @@
+const CONTENT_LIMIT = 2000;
+const SNIPPET_LEN = 80;
+const LABEL_LEN = 50;
+const REF_CONTENT_LIMIT = 200;
+
+const CLICKABLE_SELECTOR =
+  "p, h1, h2, h3, h4, li, figure, figcaption, blockquote, .case-callout, .case-media, .case-media-gallery__item, .case-block, section";
+
+const MEDIA_ANCESTOR_SELECTOR = "figure, .case-media, .case-media-gallery__item";
+
+const IGNORE_SELECTOR =
+  "header, footer, nav, .fab-stack, .content-edit-fab-stack, .content-edit-dock, button, video, input, textarea, select, a, [data-hero-rotator], [data-content-edit-ui]";
+
+export function getMainRoot() {
+  return document.querySelector("main#case-main") || document.querySelector("main#main") || document.querySelector("main");
+}
+
+function normalizeText(text) {
+  return (text || "").replace(/\s+/g, " ").trim();
+}
+
+function escapeCssIdent(value) {
+  if (typeof CSS !== "undefined" && CSS.escape) return CSS.escape(value);
+  return value.replace(/([!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~])/g, "\\$1");
+}
+
+function segmentForElement(el) {
+  if (el.id) return `#${escapeCssIdent(el.id)}`;
+
+  const tag = el.tagName.toLowerCase();
+  const parent = el.parentElement;
+  if (!parent) return tag;
+
+  const preferred = Array.from(el.classList).filter(
+    (c) => c.startsWith("case-") || c.startsWith("section__") || c.startsWith("hero__")
+  );
+  let seg = tag;
+  if (preferred.length) {
+    seg += preferred.slice(0, 2).map((c) => `.${escapeCssIdent(c)}`).join("");
+  }
+
+  const sameTag = Array.from(parent.children).filter((c) => c.tagName === el.tagName);
+  if (sameTag.length > 1) {
+    const index = sameTag.indexOf(el) + 1;
+    seg += `:nth-of-type(${index})`;
+  }
+  return seg;
+}
+
+export function buildSelector(el, main) {
+  const segments = [];
+  let current = el;
+
+  while (current && current !== main) {
+    segments.unshift(segmentForElement(current));
+    current = current.parentElement;
+  }
+
+  const mainSeg = main.id ? `main#${escapeCssIdent(main.id)}` : "main";
+  let selector = `${mainSeg} ${segments.join(" > ")}`;
+
+  let matches = main.querySelectorAll(selector);
+  if (matches.length === 1) return selector;
+
+  segments.length = 0;
+  current = el;
+  while (current && current !== main) {
+    segments.unshift(segmentForElement(current));
+    current = current.parentElement;
+    const trySel = `${mainSeg} ${segments.join(" > ")}`;
+    matches = main.querySelectorAll(trySel);
+    if (matches.length === 1) return trySel;
+  }
+
+  return selector;
+}
+
+export function getAnchorId(el, main) {
+  let node = el;
+  while (node && node !== main && node !== document.body) {
+    if (node.id) return node.id;
+    node = node.parentElement;
+  }
+  return main.id || "main";
+}
+
+function mediaFileName(el) {
+  const img = el.tagName === "IMG" ? el : el.querySelector("img");
+  if (!img) return "";
+  const src = img.getAttribute("src") || img.currentSrc || "";
+  const file = src.split("/").pop()?.split("?")[0] || "";
+  return file;
+}
+
+function mediaLabel(el) {
+  const tag = el.tagName.toLowerCase();
+  const file = mediaFileName(el);
+  if (file) return `Изображение: ${file}`;
+  if (tag === "figure" || tag === "img" || el.classList.contains("case-media")) return "Изображение";
+  if (el.classList.contains("case-media-gallery__item")) return "Элемент галереи";
+  return "";
+}
+
+export function extractContent(el) {
+  const tag = el.tagName.toLowerCase();
+
+  if (tag === "figure" || tag === "img" || el.classList.contains("case-media-gallery__item")) {
+    const cap = el.querySelector("figcaption");
+    const img = el.tagName === "IMG" ? el : el.querySelector("img");
+    const parts = [];
+    if (cap) parts.push(normalizeText(cap.textContent));
+    if (img?.getAttribute("alt")) parts.push(normalizeText(img.getAttribute("alt")));
+    const file = mediaFileName(el);
+    if (file) parts.push(file);
+    const joined = parts.filter(Boolean).join(" — ");
+    if (joined) return joined.slice(0, CONTENT_LIMIT);
+    return mediaLabel(el).slice(0, CONTENT_LIMIT);
+  }
+
+  const text = normalizeText(el.textContent);
+  if (text) return text.slice(0, CONTENT_LIMIT);
+
+  const childText = normalizeText(
+    Array.from(el.querySelectorAll("p, figcaption, h1, h2, h3, li"))
+      .map((n) => n.textContent)
+      .join(" ")
+  );
+  return childText.slice(0, CONTENT_LIMIT);
+}
+
+export function makeSnippet(content) {
+  const s = normalizeText(content);
+  if (s.length <= SNIPPET_LEN) return s;
+  return `${s.slice(0, SNIPPET_LEN)}…`;
+}
+
+function truncateWithEllipsis(text, maxLen) {
+  const s = normalizeText(text);
+  if (s.length <= maxLen) return s;
+  return `${s.slice(0, maxLen)}…`;
+}
+
+/** Короткая метка для вставки в instruction (~50 символов). */
+export function buildShortLabel(el) {
+  const tag = el.tagName.toLowerCase();
+
+  if (tag === "figcaption") {
+    return truncateWithEllipsis(el.textContent, LABEL_LEN);
+  }
+
+  const cap = el.querySelector?.("figcaption");
+  if (cap && (tag === "figure" || el.classList.contains("case-media"))) {
+    const capText = normalizeText(cap.textContent);
+    if (capText) return truncateWithEllipsis(capText, LABEL_LEN);
+  }
+
+  if (tag === "figure" || tag === "img" || el.classList.contains("case-media-gallery__item")) {
+    const file = mediaFileName(el);
+    if (file) return truncateWithEllipsis(`Изображение: ${file}`, LABEL_LEN);
+    const img = el.tagName === "IMG" ? el : el.querySelector("img");
+    const alt = normalizeText(img?.getAttribute("alt") || "");
+    if (alt) return truncateWithEllipsis(alt, LABEL_LEN);
+    return truncateWithEllipsis(mediaLabel(el), LABEL_LEN);
+  }
+
+  const text = normalizeText(el.textContent);
+  if (text) return truncateWithEllipsis(text, LABEL_LEN);
+
+  return truncateWithEllipsis(mediaLabel(el) || "Блок", LABEL_LEN);
+}
+
+/** Ref для Shift+клика: короткий content (~200), не полный extractContent. */
+export function buildRefTarget(el, main) {
+  const fullContent = extractContent(el);
+  const content = truncateWithEllipsis(fullContent, REF_CONTENT_LIMIT);
+  const mediaRef = mediaFileName(el);
+  const label = buildShortLabel(el);
+
+  return {
+    label,
+    target: {
+      selector: buildSelector(el, main),
+      anchorId: getAnchorId(el, main),
+      tag: el.tagName.toLowerCase(),
+      content,
+      snippet: makeSnippet(fullContent) || mediaLabel(el),
+      mediaRef: mediaRef || undefined,
+    },
+  };
+}
+
+export function buildTarget(el, main) {
+  const selector = buildSelector(el, main);
+  const content = extractContent(el);
+  const mediaRef = mediaFileName(el);
+  return {
+    selector,
+    anchorId: getAnchorId(el, main),
+    tag: el.tagName.toLowerCase(),
+    content,
+    snippet: makeSnippet(content) || mediaLabel(el),
+    mediaRef: mediaRef || undefined,
+  };
+}
+
+export function normalizeForMatch(text) {
+  return normalizeText(text).toLowerCase();
+}
+
+export function findClickableTarget(event, main) {
+  if (!main) return null;
+
+  let el = event.target;
+  if (!(el instanceof Element)) return null;
+  if (el.closest(IGNORE_SELECTOR)) return null;
+  if (!main.contains(el)) return null;
+
+  let hit = el.closest(CLICKABLE_SELECTOR);
+
+  if (!hit && el.closest("img")) {
+    hit = el.closest(MEDIA_ANCESTOR_SELECTOR);
+  }
+
+  if (!hit || !main.contains(hit)) return null;
+  if (hit.closest(IGNORE_SELECTOR)) return null;
+
+  if (hit.matches("a") && !hit.closest(".case-article, .case-callout__content, main")) return null;
+
+  return hit;
+}
+
+export function resolveElement(target, main) {
+  if (!target?.selector) return null;
+  try {
+    const el = main.querySelector(target.selector);
+    if (el) return el;
+  } catch {
+    /* invalid selector */
+  }
+
+  if (target.mediaRef) {
+    const imgs = main.querySelectorAll("img");
+    for (const img of imgs) {
+      const file = mediaFileName(img);
+      if (file && file === target.mediaRef) {
+        return img.closest(MEDIA_ANCESTOR_SELECTOR) || img;
+      }
+    }
+  }
+
+  if (!target.content) return null;
+  const needle = normalizeForMatch(target.content);
+  if (!needle) return null;
+
+  const candidates = main.querySelectorAll(CLICKABLE_SELECTOR);
+  for (const el of candidates) {
+    if (normalizeForMatch(extractContent(el)) === needle) return el;
+    if (normalizeForMatch(extractContent(el)).includes(needle.slice(0, 40))) return el;
+  }
+  return null;
+}
+
+export function findItemBySelector(items, selector) {
+  return items.find((item) => item.target?.selector === selector) ?? null;
+}
+
+export const PAGE_EDIT_SCOPE = "page";
+
+export function isPageScopeItem(item) {
+  if (item?.target?.scope === PAGE_EDIT_SCOPE) return true;
+  const t = item?.target;
+  return t?.tag === "main" && t?.snippet === "Общая правка страницы";
+}
+
+export function getItemKey(item) {
+  if (!item?.target) return "";
+  if (isPageScopeItem(item)) return PAGE_EDIT_SCOPE;
+  return item.target.selector || "";
+}
+
+export function buildPageTarget(main) {
+  const mainId = main.id || "main";
+  return {
+    scope: PAGE_EDIT_SCOPE,
+    selector: main.id ? `main#${main.id}` : "main",
+    anchorId: mainId,
+    tag: "main",
+    content: "Общая правка страницы",
+    snippet: "Общая правка страницы",
+  };
+}
+
+export function findPageEditItem(items) {
+  return items.find((item) => isPageScopeItem(item)) ?? null;
+}
diff --git a/public/js/modules/ui/cookie-notice.js b/public/js/modules/ui/cookie-notice.js
new file mode 100644
index 0000000..419df8d
--- /dev/null
+++ b/public/js/modules/ui/cookie-notice.js
@@ -0,0 +1,33 @@
+const COOKIE_NOTICE_KEY = "siteCookieConsentV1";
+
+export function initCookieNotice() {
+  const notice = document.querySelector("[data-cookie-notice]");
+  const acceptBtn = document.querySelector("[data-cookie-accept]");
+  const policyLink = document.querySelector("[data-cookie-policy-link]");
+  if (!notice || !acceptBtn) return;
+
+  let accepted = false;
+  try {
+    accepted = localStorage.getItem(COOKIE_NOTICE_KEY) === "accepted";
+  } catch {
+    accepted = false;
+  }
+
+  notice.hidden = !!accepted;
+
+  acceptBtn.addEventListener("click", () => {
+    try {
+      localStorage.setItem(COOKIE_NOTICE_KEY, "accepted");
+    } catch {
+      /* ignore */
+    }
+    notice.hidden = true;
+  });
+
+  if (policyLink) {
+    const href = policyLink.getAttribute("href") || "";
+    if (href === "#" || href === "") {
+      policyLink.addEventListener("click", (e) => e.preventDefault());
+    }
+  }
+}
diff --git a/public/js/modules/ui/deferred-media.js b/public/js/modules/ui/deferred-media.js
new file mode 100644
index 0000000..3bc8413
--- /dev/null
+++ b/public/js/modules/ui/deferred-media.js
@@ -0,0 +1,15 @@
+import { runAfterInitialLoad } from "../shared/schedule-idle.js";
+
+export function initDeferredPortfolioCovers() {
+  const images = document.querySelectorAll("img.portfolio-card__image[data-defer-src]");
+  if (!images.length) return;
+
+  runAfterInitialLoad(() => {
+    images.forEach((img) => {
+      const url = img.getAttribute("data-defer-src");
+      if (!url) return;
+      img.src = url;
+      img.removeAttribute("data-defer-src");
+    });
+  });
+}
diff --git a/public/js/modules/ui/hero-motion-video.js b/public/js/modules/ui/hero-motion-video.js
new file mode 100644
index 0000000..d886090
--- /dev/null
+++ b/public/js/modules/ui/hero-motion-video.js
@@ -0,0 +1,35 @@
+import { runAfterInitialLoad } from "../shared/schedule-idle.js";
+
+function ensureVideoSource(video) {
+  const url = video.dataset.src;
+  if (!url) return Promise.resolve();
+  if (video.src) return Promise.resolve();
+
+  return new Promise((resolve) => {
+    const done = () => resolve();
+    video.addEventListener("loadeddata", done, { once: true });
+    video.addEventListener("error", done, { once: true });
+    video.src = url;
+    video.load();
+  });
+}
+
+export function initHeroMotionVideo() {
+  const shell = document.querySelector(".hero__portrait-shell");
+  const video = shell?.querySelector("[data-hero-motion-video]");
+  if (!shell || !(video instanceof HTMLVideoElement)) return;
+
+  function showAndPlay() {
+    shell.classList.add("hero__portrait-shell--motion-visible");
+    video
+      .play()
+      .then(() => {})
+      .catch(() => {});
+  }
+
+  runAfterInitialLoad(() => {
+    ensureVideoSource(video).then(() => {
+      showAndPlay();
+    });
+  });
+}
diff --git a/public/js/modules/ui/hero-word-slot.js b/public/js/modules/ui/hero-word-slot.js
new file mode 100644
index 0000000..49a55f4
--- /dev/null
+++ b/public/js/modules/ui/hero-word-slot.js
@@ -0,0 +1,103 @@
+import { clampNum } from "../shared/math.js";
+import { prefersReducedMotion } from "../shared/media.js";
+
+export function initHeroWordSlot() {
+  const wordEl = document.querySelector("[data-hero-rotator-word]");
+  if (!wordEl) return;
+
+  const words = ["web", "mobile", "desktop"];
+  if (!words.length) return;
+  if (prefersReducedMotion()) {
+    wordEl.textContent = words[0];
+    return;
+  }
+
+  const alphabet = "abcdefghijklmnopqrstuvwxyz";
+  const slotStepMs = 45;
+  const letterStopDelayMs = 80;
+  const pauseBetweenWordsMs = 1700;
+  let currentWordIndex = 0;
+  let runToken = 0;
+
+  const padWord = (word, len) => word.padEnd(len, " ");
+  const randomLetter = () => alphabet[Math.floor(Math.random() * alphabet.length)];
+
+  function readThemeColorBase() {
+    const root = getComputedStyle(document.documentElement);
+    const h = clampNum(root.getPropertyValue("--theme-h"), 0, 360, 210);
+    const s = clampNum(root.getPropertyValue("--theme-s"), 30, 100, 90);
+    const l = clampNum(root.getPropertyValue("--theme-l"), 20, 70, 40);
+    return { h, s, l };
+  }
+
+  function randomScrambleColor(base) {
+    const hVar = (base.h + (Math.random() * 84 - 42) + 360) % 360;
+    const sVar = Math.round(clampNum(base.s + (Math.random() * 26 - 13), 35, 100, base.s));
+    const lVar = Math.round(clampNum(base.l + (Math.random() * 24 - 12), 22, 76, base.l));
+    return `hsl(${Math.round(hVar)} ${sVar}% ${lVar}%)`;
+  }
+
+  function renderChars(chars, scramble = false, base = null) {
+    if (!scramble) {
+      wordEl.textContent = chars.join("");
+      return;
+    }
+    const colorBase = base || readThemeColorBase();
+    const html = chars
+      .map((ch) => {
+        if (ch === " ") return `<span class="hero-rotator__char">&nbsp;</span>`;
+        return `<span class="hero-rotator__char" style="color:${randomScrambleColor(colorBase)}">${ch}</span>`;
+      })
+      .join("");
+    wordEl.innerHTML = html;
+  }
+
+  function animateToWord(nextWord) {
+    runToken += 1;
+    const token = runToken;
+    const fromWord = words[currentWordIndex];
+    const maxLen = Math.max(fromWord.length, nextWord.length);
+    const targetChars = padWord(nextWord, maxLen).split("");
+    const liveChars = padWord(fromWord, maxLen).split("");
+    const finalCharTime = (maxLen - 1) * letterStopDelayMs + 380;
+    const spacingResetTime = Math.max(finalCharTime - 240, 0);
+    const start = performance.now();
+    wordEl.style.setProperty("--hero-slot-spacing", "0.085em");
+    const themeColorBase = readThemeColorBase();
+
+    function tick(now) {
+      if (token !== runToken) return;
+      const elapsed = now - start;
+      if (elapsed >= spacingResetTime) wordEl.style.setProperty("--hero-slot-spacing", "0");
+
+      for (let i = 0; i < maxLen; i++) {
+        const settleAt = i * letterStopDelayMs;
+        if (elapsed < settleAt) continue;
+        const settleProgress = elapsed - settleAt;
+        if (settleProgress >= 340) liveChars[i] = targetChars[i];
+        else if (targetChars[i] === " ") liveChars[i] = " ";
+        else liveChars[i] = randomLetter();
+      }
+
+      renderChars(liveChars, true, themeColorBase);
+      if (elapsed >= finalCharTime) {
+        renderChars(targetChars);
+        wordEl.style.setProperty("--hero-slot-spacing", "0");
+        currentWordIndex = words.indexOf(nextWord);
+        window.setTimeout(nextCycle, pauseBetweenWordsMs);
+        return;
+      }
+      window.setTimeout(() => requestAnimationFrame(tick), slotStepMs);
+    }
+
+    requestAnimationFrame(tick);
+  }
+
+  function nextCycle() {
+    const nextIndex = (currentWordIndex + 1) % words.length;
+    animateToWord(words[nextIndex]);
+  }
+
+  wordEl.textContent = words[0];
+  window.setTimeout(nextCycle, pauseBetweenWordsMs);
+}
diff --git a/public/js/modules/ui/image-load-placeholder.js b/public/js/modules/ui/image-load-placeholder.js
new file mode 100644
index 0000000..da4ce31
--- /dev/null
+++ b/public/js/modules/ui/image-load-placeholder.js
@@ -0,0 +1,74 @@
+import { isTinyPlaceholderSrc } from "../shared/image-src.js";
+
+const HOST_SELECTOR =
+  ".case-media, .case-media-gallery__item, .case-link-card__media, .case-media-tall__clip, .mp-card__media, .portfolio-card__cover, figure";
+
+const EXCLUDE_ANCESTOR = ".contact-card__icon, .cookie-notice, .case-image-viewer, [data-no-img-placeholder]";
+
+function shouldWatch(img) {
+  if (!(img instanceof HTMLImageElement)) return false;
+  if (img.closest(EXCLUDE_ANCESTOR) || img.hasAttribute("data-no-img-placeholder")) return false;
+  const src = (img.getAttribute("src") || "").toLowerCase();
+  if (src.endsWith(".svg")) return false;
+  const w = Number(img.getAttribute("width"));
+  const h = Number(img.getAttribute("height"));
+  if (w > 0 && h > 0 && Math.max(w, h) <= 40) return false;
+  return true;
+}
+
+function isPending(img) {
+  if (img.hasAttribute("data-src") || img.hasAttribute("data-defer-src")) return true;
+  const src = img.currentSrc || img.getAttribute("src") || "";
+  if (isTinyPlaceholderSrc(src)) return true;
+  return !img.complete || img.naturalWidth === 0;
+}
+
+function getHost(img) {
+  const host = img.closest(HOST_SELECTOR);
+  if (host) return host;
+  const parent = img.parentElement;
+  if (parent && parent !== document.body && parent !== document.documentElement) return parent;
+  return null;
+}
+
+function setLoading(img, loading) {
+  const host = getHost(img);
+  if (!host) return;
+  if (loading) {
+    img.classList.add("is-img-loading");
+    host.classList.add("has-img-loading");
+  } else {
+    img.classList.remove("is-img-loading");
+    if (!host.querySelector("img.is-img-loading")) host.classList.remove("has-img-loading");
+  }
+}
+
+function syncImage(img) {
+  if (!shouldWatch(img)) {
+    setLoading(img, false);
+    return;
+  }
+  setLoading(img, isPending(img));
+}
+
+function bindImage(img) {
+  if (!shouldWatch(img)) return;
+  if (img.dataset.imgLoadPhBound === "1") {
+    syncImage(img);
+    return;
+  }
+  img.dataset.imgLoadPhBound = "1";
+
+  const onChange = () => syncImage(img);
+  img.addEventListener("load", onChange);
+  img.addEventListener("error", onChange);
+
+  const mo = new MutationObserver(onChange);
+  mo.observe(img, { attributes: true, attributeFilter: ["src", "data-src", "data-defer-src"] });
+
+  syncImage(img);
+}
+
+export function initImageLoadPlaceholder() {
+  document.querySelectorAll("img").forEach(bindImage);
+}
diff --git a/public/js/modules/ui/mesh-panel.js b/public/js/modules/ui/mesh-panel.js
new file mode 100644
index 0000000..542bae0
--- /dev/null
+++ b/public/js/modules/ui/mesh-panel.js
@@ -0,0 +1,29 @@
+export function initMeshPanel() {
+  const panel = document.querySelector("[data-mesh-panel]");
+  if (!panel) return;
+
+  const root = document.documentElement;
+  const controls = Array.from(panel.querySelectorAll("[data-mesh-control]"));
+  if (!controls.length) return;
+
+  const map = {
+    size: "--mesh-size-mult",
+  };
+
+  controls.forEach((input) => {
+    if (!(input instanceof HTMLInputElement)) return;
+    const key = input.dataset.meshControl;
+    const token = key ? map[key] : null;
+    if (!token) return;
+
+    const apply = () => {
+      const raw = input.value;
+      root.style.setProperty(token, raw);
+      const out = panel.querySelector(`[data-mesh-value-for="${key}"]`);
+      if (out) out.textContent = Number.parseFloat(raw).toFixed(2);
+    };
+
+    input.addEventListener("input", apply);
+    apply();
+  });
+}
diff --git a/public/js/modules/ui/page-mesh-bg.js b/public/js/modules/ui/page-mesh-bg.js
new file mode 100644
index 0000000..7f1a70b
--- /dev/null
+++ b/public/js/modules/ui/page-mesh-bg.js
@@ -0,0 +1,91 @@
+import { prefersReducedMotion } from "../shared/media.js";
+
+export function initPageMeshBackground() {
+  if (prefersReducedMotion()) return;
+
+  const root = document.documentElement;
+  let rafId = 0;
+  let showMarkers = false;
+  const markers = [];
+
+  function createMarker(label) {
+    const el = document.createElement("div");
+    el.textContent = label;
+    el.style.position = "fixed";
+    el.style.zIndex = "10000";
+    el.style.width = "18px";
+    el.style.height = "18px";
+    el.style.borderRadius = "999px";
+    el.style.background = "#000";
+    el.style.color = "#fff";
+    el.style.fontSize = "11px";
+    el.style.fontWeight = "700";
+    el.style.lineHeight = "18px";
+    el.style.textAlign = "center";
+    el.style.pointerEvents = "none";
+    el.style.boxShadow = "0 0 0 1px rgba(255,255,255,0.55)";
+    document.body.appendChild(el);
+    return el;
+  }
+
+  function setMarker(el, xPct, yPct) {
+    el.style.left = `calc(${xPct}% - 9px)`;
+    el.style.top = `calc(${yPct}% - 9px)`;
+  }
+
+  markers.push(createMarker("A"));
+  markers.push(createMarker("B"));
+  markers.push(createMarker("C"));
+
+  const markersToggle = document.querySelector("[data-mesh-markers-toggle]");
+  if (markersToggle instanceof HTMLInputElement) {
+    showMarkers = markersToggle.checked;
+    markersToggle.addEventListener("change", () => {
+      showMarkers = markersToggle.checked;
+      markers.forEach((m) => {
+        m.style.display = showMarkers ? "block" : "none";
+      });
+    });
+    markers.forEach((m) => {
+      m.style.display = showMarkers ? "block" : "none";
+    });
+  }
+
+  const hero = document.querySelector(".hero");
+  const spots = [
+    { x: 2, y: 2 },
+    { x: 50, y: 2 },
+    { x: 98, y: 2 },
+  ];
+
+  const update = () => {
+    rafId = 0;
+    const heroHeight = hero instanceof HTMLElement ? Math.max(hero.offsetHeight, 1) : Math.max(window.innerHeight, 1);
+    const heroProgress = Math.min(window.scrollY / heroHeight, 1);
+
+    const opacityMaxRaw = getComputedStyle(root).getPropertyValue("--mesh-opacity-max").trim();
+    const opacityMinRaw = getComputedStyle(root).getPropertyValue("--mesh-opacity-min").trim();
+    const opacityMax = Number.parseFloat(opacityMaxRaw);
+    const opacityMin = Number.parseFloat(opacityMinRaw);
+    const safeOpacityMax = Number.isFinite(opacityMax) ? opacityMax : 1;
+    const safeOpacityMin = Number.isFinite(opacityMin) ? opacityMin : 0;
+    const opacityNow = safeOpacityMax - (safeOpacityMax - safeOpacityMin) * heroProgress;
+    root.style.setProperty("--mesh-opacity-current", `${Math.max(opacityNow, safeOpacityMin).toFixed(3)}`);
+
+    spots.forEach((p, idx) => {
+      const key = ["a", "b", "c"][idx];
+      root.style.setProperty(`--mesh-${key}-x`, `${p.x.toFixed(2)}%`);
+      root.style.setProperty(`--mesh-${key}-y`, `${p.y.toFixed(2)}%`);
+      if (showMarkers) setMarker(markers[idx], p.x, p.y);
+    });
+  };
+
+  const onScroll = () => {
+    if (rafId) return;
+    rafId = window.requestAnimationFrame(update);
+  };
+
+  window.addEventListener("scroll", onScroll, { passive: true });
+  window.addEventListener("resize", onScroll, { passive: true });
+  update();
+}
diff --git a/public/js/modules/ui/primary-button-shine.js b/public/js/modules/ui/primary-button-shine.js
new file mode 100644
index 0000000..4f98d20
--- /dev/null
+++ b/public/js/modules/ui/primary-button-shine.js
@@ -0,0 +1,33 @@
+import { prefersReducedMotion } from "../shared/media.js";
+
+export function initPrimaryButtonShine() {
+  const els = document.querySelectorAll(".btn--primary, .fab--primary");
+  if (!els.length || prefersReducedMotion()) return;
+
+  function setPos(el, clientX, clientY) {
+    const r = el.getBoundingClientRect();
+    if (r.width <= 0 || r.height <= 0) return;
+    const x = ((clientX - r.left) / r.width) * 100;
+    const y = ((clientY - r.top) / r.height) * 100;
+    el.style.setProperty("--btn-shine-x", `${x}%`);
+    el.style.setProperty("--btn-shine-y", `${y}%`);
+  }
+
+  els.forEach((el) => {
+    el.addEventListener(
+      "pointermove",
+      (e) => {
+        setPos(el, e.clientX, e.clientY);
+      },
+      { passive: true },
+    );
+    el.addEventListener(
+      "pointerleave",
+      () => {
+        el.style.removeProperty("--btn-shine-x");
+        el.style.removeProperty("--btn-shine-y");
+      },
+      { passive: true },
+    );
+  });
+}
diff --git a/public/js/modules/ui/projects-carousel.js b/public/js/modules/ui/projects-carousel.js
new file mode 100644
index 0000000..9ce2a67
--- /dev/null
+++ b/public/js/modules/ui/projects-carousel.js
@@ -0,0 +1,191 @@
+export function initProjectsCarousel() {
+  const root = document.querySelector("[data-projects-carousel]");
+  if (!root) return;
+
+  const viewport = root.querySelector("[data-projects-viewport]");
+  const prevBtn = root.parentElement?.querySelector("[data-projects-prev]");
+  const nextBtn = root.parentElement?.querySelector("[data-projects-next]");
+  if (!viewport || !prevBtn || !nextBtn) return;
+  const edgePrevBtn = root.querySelector("[data-projects-edge-prev]");
+  const edgeNextBtn = root.querySelector("[data-projects-edge-next]");
+
+  let dragState = null;
+  let suppressClick = false;
+
+  function syncViewportWidthVar() {
+    const visibleWidth = document.documentElement.clientWidth || window.innerWidth;
+    root.style.setProperty("--projects-viewport-width", `${Math.max(visibleWidth, 0)}px`);
+  }
+
+  function getEdgeSpace() {
+    const raw = getComputedStyle(root).getPropertyValue("--projects-edge-space");
+    const value = Number.parseFloat(raw);
+    return Number.isFinite(value) ? Math.max(value, 0) : 0;
+  }
+
+  function getMinScroll() {
+    return getEdgeSpace();
+  }
+
+  function getMaxScroll() {
+    const maxNative = Math.max(viewport.scrollWidth - viewport.clientWidth, 0);
+    return Math.max(maxNative - getEdgeSpace(), getMinScroll());
+  }
+
+  function clampScroll(left) {
+    return Math.min(Math.max(left, getMinScroll()), getMaxScroll());
+  }
+
+  function getStep() {
+    const firstItem = viewport.querySelector(".projects-carousel__item");
+    if (!(firstItem instanceof HTMLElement)) return viewport.clientWidth;
+    const track = viewport.querySelector(".projects-carousel__track");
+    const gapRaw = track ? getComputedStyle(track).columnGap : "0";
+    const gap = Number.parseFloat(gapRaw) || 0;
+    return firstItem.getBoundingClientRect().width + gap;
+  }
+
+  function getSnapIndex() {
+    const step = getStep();
+    if (!step) return 0;
+    const min = getMinScroll();
+    return Math.round((viewport.scrollLeft - min) / step);
+  }
+
+  function scrollToIndex(index, behavior = "smooth") {
+    const step = getStep();
+    const min = getMinScroll();
+    const max = getMaxScroll();
+    if (!step) {
+      viewport.scrollTo({ left: clampScroll(viewport.scrollLeft), behavior });
+      return;
+    }
+    const maxIndex = Math.max(Math.round((max - min) / step), 0);
+    const nextIndex = Math.min(Math.max(index, 0), maxIndex);
+    const target = clampScroll(min + nextIndex * step);
+    viewport.scrollTo({ left: target, behavior });
+  }
+
+  function snapToNearest(behavior = "smooth") {
+    scrollToIndex(getSnapIndex(), behavior);
+  }
+
+  function updateControls() {
+    const x = viewport.scrollLeft;
+    const min = getMinScroll();
+    const max = getMaxScroll();
+    prevBtn.disabled = x <= min + 2;
+    nextBtn.disabled = x >= max - 2;
+  }
+
+  function scrollByStep(direction) {
+    const currentIndex = getSnapIndex();
+    scrollToIndex(currentIndex + direction, "smooth");
+  }
+
+  function getEdgeHitZone() {
+    const sectionInner = root.closest(".section__inner");
+    const sectionInnerWidth = sectionInner instanceof HTMLElement ? sectionInner.getBoundingClientRect().width : viewport.clientWidth;
+    const viewportWidthWithScrollbar = window.innerWidth || document.documentElement.clientWidth || viewport.clientWidth;
+    const track = viewport.querySelector(".projects-carousel__track");
+    const gapRaw = track ? getComputedStyle(track).columnGap : "0";
+    const gap = Number.parseFloat(gapRaw) || 0;
+    const zone = (viewportWidthWithScrollbar - sectionInnerWidth) / 2 - gap;
+    return Math.max(zone, 0);
+  }
+
+  prevBtn.addEventListener("click", () => scrollByStep(-1));
+  nextBtn.addEventListener("click", () => scrollByStep(1));
+  edgePrevBtn?.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    scrollByStep(-1);
+  });
+  edgeNextBtn?.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    scrollByStep(1);
+  });
+
+  viewport.addEventListener("scroll", updateControls, { passive: true });
+  window.addEventListener("resize", updateControls, { passive: true });
+  viewport.querySelectorAll("a, img").forEach((el) => {
+    el.setAttribute("draggable", "false");
+  });
+  viewport.addEventListener("dragstart", (e) => {
+    e.preventDefault();
+  });
+
+  viewport.addEventListener("pointerdown", (e) => {
+    if (e.button !== 0) return;
+    if (!(e.target instanceof Element)) return;
+    suppressClick = false;
+    dragState = {
+      pointerId: e.pointerId,
+      startX: e.clientX,
+      startScrollLeft: viewport.scrollLeft,
+      moved: false,
+    };
+    viewport.classList.add("is-dragging");
+  });
+
+  viewport.addEventListener("pointermove", (e) => {
+    if (!dragState || dragState.pointerId !== e.pointerId) return;
+    const dx = e.clientX - dragState.startX;
+    if (Math.abs(dx) > 8) dragState.moved = true;
+    if (dragState.moved) e.preventDefault();
+    viewport.scrollLeft = clampScroll(dragState.startScrollLeft - dx);
+  });
+
+  function finishDrag(e) {
+    if (!dragState || dragState.pointerId !== e.pointerId) return;
+    if (dragState.moved) {
+      e.preventDefault();
+      suppressClick = true;
+      snapToNearest("smooth");
+    } else {
+      suppressClick = false;
+    }
+    viewport.classList.remove("is-dragging");
+    dragState = null;
+  }
+
+  viewport.addEventListener("pointerup", finishDrag);
+  viewport.addEventListener("pointercancel", finishDrag);
+  viewport.addEventListener("pointerleave", (e) => {
+    if (!dragState) return;
+    finishDrag(e);
+  });
+
+  viewport.addEventListener(
+    "click",
+    (e) => {
+      if (suppressClick) {
+        e.preventDefault();
+        e.stopPropagation();
+        suppressClick = false;
+      }
+    },
+    true,
+  );
+
+  function alignToStart() {
+    syncViewportWidthVar();
+    const edgeZone = `${getEdgeHitZone()}px`;
+    root.style.setProperty("--projects-edge-hit-zone", edgeZone);
+    viewport.scrollLeft = getMinScroll();
+    updateControls();
+  }
+
+  alignToStart();
+  window.addEventListener("load", alignToStart, { once: true });
+  window.addEventListener(
+    "resize",
+    () => {
+      syncViewportWidthVar();
+      snapToNearest("auto");
+      updateControls();
+    },
+    { passive: true },
+  );
+}
diff --git a/public/js/modules/ui/skills-accordion.js b/public/js/modules/ui/skills-accordion.js
new file mode 100644
index 0000000..fcb1221
--- /dev/null
+++ b/public/js/modules/ui/skills-accordion.js
@@ -0,0 +1,162 @@
+import { prefersReducedMotion } from "../shared/media.js";
+
+export function initSkillsAccordion() {
+  const root = document.querySelector("#skills");
+  if (!root) return;
+
+  const toggles = Array.from(root.querySelectorAll("[data-skills-accordion-toggle]"));
+  if (!toggles.length) return;
+
+  const toggleToPanel = new Map();
+  toggles.forEach((toggle) => {
+    const panelId = toggle.getAttribute("aria-controls");
+    if (!panelId) return;
+    const panel = root.querySelector(`#${panelId}`);
+    if (!panel) return;
+    toggleToPanel.set(toggle, panel);
+  });
+
+  if (!toggleToPanel.size) return;
+  const reducedMotion = prefersReducedMotion();
+  let locked = false;
+
+  function getHeaderOffsetPx() {
+    const raw = getComputedStyle(document.documentElement).getPropertyValue("--header-offset").trim();
+    const parsed = Number.parseFloat(raw);
+    if (!Number.isFinite(parsed)) return 52;
+    return Math.max(parsed, 52);
+  }
+
+  function ensureToggleVisible(toggle) {
+    const rect = toggle.getBoundingClientRect();
+    const viewportH = window.innerHeight || document.documentElement.clientHeight || 0;
+    const topSafe = getHeaderOffsetPx() + 12;
+    const bottomSafe = viewportH - 12;
+    const targetTop = window.scrollY + rect.top - topSafe;
+
+    if (rect.top < topSafe || rect.bottom > bottomSafe) {
+      window.scrollTo({
+        top: Math.max(targetTop, 0),
+        behavior: reducedMotion ? "auto" : "smooth",
+      });
+    }
+  }
+
+  function clearPanelAnimation(panel) {
+    panel.style.height = "";
+    panel.style.opacity = "";
+    panel.style.transition = "";
+    panel.style.overflow = "";
+    panel.style.willChange = "auto";
+  }
+
+  function expandPanel(panel) {
+    if (reducedMotion) {
+      panel.hidden = false;
+      clearPanelAnimation(panel);
+      return Promise.resolve();
+    }
+
+    panel.hidden = false;
+    panel.style.opacity = "0";
+    panel.style.willChange = "opacity";
+    const duration = 220;
+
+    return new Promise((resolve) => {
+      requestAnimationFrame(() => {
+        panel.style.transition = `opacity ${duration}ms ease`;
+        panel.style.opacity = "1";
+      });
+
+      window.setTimeout(() => {
+        clearPanelAnimation(panel);
+        resolve();
+      }, duration + 40);
+    });
+  }
+
+  function collapsePanel(panel) {
+    if (panel.hidden) return Promise.resolve();
+    if (reducedMotion) {
+      panel.hidden = true;
+      clearPanelAnimation(panel);
+      return Promise.resolve();
+    }
+
+    const startHeight = panel.scrollHeight;
+    const duration = 240;
+    panel.style.height = `${startHeight}px`;
+    panel.style.opacity = "1";
+    panel.style.overflow = "hidden";
+    panel.style.willChange = "height, opacity";
+
+    return new Promise((resolve) => {
+      requestAnimationFrame(() => {
+        panel.style.transition = `height ${duration}ms cubic-bezier(0.2, 0.65, 0.25, 1), opacity ${duration}ms ease`;
+        panel.style.height = "0px";
+        panel.style.opacity = "0";
+      });
+
+      window.setTimeout(() => {
+        panel.hidden = true;
+        clearPanelAnimation(panel);
+        resolve();
+      }, duration + 40);
+    });
+  }
+
+  function setExpanded(toggle, expanded) {
+    const panel = toggleToPanel.get(toggle);
+    if (!panel) return;
+    toggle.setAttribute("aria-expanded", expanded ? "true" : "false");
+    if (expanded) {
+      panel.hidden = false;
+    } else {
+      panel.hidden = true;
+    }
+  }
+
+  toggleToPanel.forEach((_, toggle) => {
+    const isExpanded = toggle.getAttribute("aria-expanded") === "true";
+    setExpanded(toggle, isExpanded);
+  });
+
+  toggleToPanel.forEach((_, toggle) => {
+    toggle.addEventListener("click", async () => {
+      if (locked) return;
+      locked = true;
+      const isExpanded = toggle.getAttribute("aria-expanded") === "true";
+      const jobs = [];
+
+      toggleToPanel.forEach((panel, otherToggle) => {
+        const otherExpanded = otherToggle.getAttribute("aria-expanded") === "true";
+        if (!otherExpanded) return;
+        otherToggle.setAttribute("aria-expanded", "false");
+        jobs.push(collapsePanel(panel));
+      });
+
+      if (!isExpanded) {
+        toggle.setAttribute("aria-expanded", "true");
+        const panel = toggleToPanel.get(toggle);
+        if (panel) jobs.push(expandPanel(panel));
+      }
+
+      await Promise.all(jobs);
+      requestAnimationFrame(() => ensureToggleVisible(toggle));
+      locked = false;
+    });
+  });
+
+  const categories = Array.from(root.querySelectorAll(".skills-category"));
+  categories.forEach((category) => {
+    category.addEventListener("click", (event) => {
+      const target = event.target;
+      if (!(target instanceof Element)) return;
+      if (target.closest(".skills-category__panel")) return;
+      const toggle = category.querySelector("[data-skills-accordion-toggle]");
+      if (!(toggle instanceof HTMLElement)) return;
+      if (target.closest("[data-skills-accordion-toggle]")) return;
+      toggle.click();
+    });
+  });
+}
diff --git a/public/js/modules/ui/skills-intro.js b/public/js/modules/ui/skills-intro.js
new file mode 100644
index 0000000..54de668
--- /dev/null
+++ b/public/js/modules/ui/skills-intro.js
@@ -0,0 +1,61 @@
+import { prefersReducedMotion } from "../shared/media.js";
+
+function bindSkillsIntroRoot(root) {
+  const msgs = Array.from(root.querySelectorAll("[data-skills-msg]"));
+  if (!msgs.length) return;
+  const reduceMotion = prefersReducedMotion();
+
+  function localDatetimeMinute(d) {
+    const pad = (n) => String(n).padStart(2, "0");
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+  }
+
+  function setTime(el, date) {
+    const timeEl = el.querySelector("[data-skills-msg-time]");
+    if (!timeEl) return;
+    timeEl.textContent = date.toLocaleTimeString("ru-RU", { hour: "2-digit", minute: "2-digit" });
+    timeEl.setAttribute("datetime", localDatetimeMinute(date));
+  }
+
+  function revealAll() {
+    msgs.forEach((el, i) => {
+      window.setTimeout(() => {
+        setTime(el, new Date());
+        el.classList.add("is-visible");
+        el.removeAttribute("aria-hidden");
+      }, i * 420);
+    });
+  }
+
+  if (reduceMotion) {
+    const now = new Date();
+    msgs.forEach((el) => {
+      setTime(el, now);
+      el.classList.add("is-visible");
+    });
+    return;
+  }
+
+  root.setAttribute("data-skills-anim", "1");
+  msgs.forEach((m) => m.setAttribute("aria-hidden", "true"));
+
+  let done = false;
+  const obs = new IntersectionObserver(
+    (entries) => {
+      for (const e of entries) {
+        if (!e.isIntersecting || done) continue;
+        done = true;
+        obs.disconnect();
+        revealAll();
+        break;
+      }
+    },
+    { threshold: 0.22, rootMargin: "0px 0px -10% 0px" },
+  );
+  obs.observe(root);
+}
+
+/** Чат-вступления с `data-skills-intro`: может быть несколько на странице (например, навыки и мини-проекты). */
+export function initSkillsIntroMessages() {
+  document.querySelectorAll("[data-skills-intro]").forEach((root) => bindSkillsIntroRoot(root));
+}
diff --git a/public/js/skill-connectors.js b/public/js/skill-connectors.js
new file mode 100644
index 0000000..d23b4a7
--- /dev/null
+++ b/public/js/skill-connectors.js
@@ -0,0 +1,304 @@
+/**
+ * Ортогональные коннекторы «задача → решения» через SVG (координаты из getBoundingClientRect).
+ * Скругление локтя — дуга A (как border-bottom-left-radius у псевдоэлемента).
+ */
+(function initSkillConnectors() {
+  const ATTR = "data-skill-connectors-js";
+
+  function cssVarPx(el, name, fallbackPx) {
+    const raw = getComputedStyle(el).getPropertyValue(name).trim();
+    if (!raw) return fallbackPx;
+    const rootFs = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+    if (raw.endsWith("rem")) return parseFloat(raw) * rootFs;
+    if (raw.endsWith("px")) return parseFloat(raw);
+    const n = parseFloat(raw);
+    if (Number.isFinite(n)) return n;
+    return fallbackPx;
+  }
+
+  /** Радиус коннектора: переменная может быть calc(); берём итог из border-radius карточки решения. */
+  function connectorRadiusPx(solutionEl) {
+    const v = cssVarPx(solutionEl, "--skill-solution-connector-radius", 0);
+    if (v > 0) return v;
+    const br = getComputedStyle(solutionEl).borderRadius.split(/\s+/)[0] || "";
+    const px = parseFloat(br);
+    return Number.isFinite(px) ? px : 8;
+  }
+
+  function cssVarColor(el, name, fallback) {
+    const v = getComputedStyle(el).getPropertyValue(name).trim();
+    return v || fallback;
+  }
+
+  function ensureSvgLayer(card) {
+    let svg = card.querySelector(".skill-task-card__connector-svg");
+    if (svg) return svg;
+    svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("class", "skill-task-card__connector-svg");
+    svg.setAttribute("aria-hidden", "true");
+    svg.setAttribute("focusable", "false");
+    card.insertBefore(svg, card.firstChild);
+    return svg;
+  }
+
+  function clearSvg(svg) {
+    while (svg.firstChild) svg.removeChild(svg.firstChild);
+  }
+
+  /** Одинаковое округление соседних сегментов, чтобы стыки line/path не «плавали» по субпикселю. */
+  function px(n) {
+    return Math.round(n * 1000) / 1000;
+  }
+
+  function lineEl(x1, y1, x2, y2, stroke, sw, conn) {
+    const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+    line.setAttribute("x1", String(px(x1)));
+    line.setAttribute("y1", String(px(y1)));
+    line.setAttribute("x2", String(px(x2)));
+    line.setAttribute("y2", String(px(y2)));
+    line.setAttribute("stroke", stroke);
+    line.setAttribute("stroke-width", String(sw));
+    line.setAttribute("stroke-linecap", "round");
+    line.setAttribute("vector-effect", "non-scaling-stroke");
+    if (conn) line.setAttribute("data-skill-conn", conn);
+    line.setAttribute("data-skill-conn-stroke", stroke);
+    return line;
+  }
+
+  function pathEl(d, stroke, sw, fill = "none", conn) {
+    const p = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    p.setAttribute("d", d);
+    p.setAttribute("fill", fill);
+    p.setAttribute("stroke", stroke);
+    p.setAttribute("stroke-width", String(sw));
+    p.setAttribute("stroke-linecap", "round");
+    p.setAttribute("stroke-linejoin", "round");
+    p.setAttribute("vector-effect", "non-scaling-stroke");
+    if (conn) p.setAttribute("data-skill-conn", conn);
+    p.setAttribute("data-skill-conn-stroke", stroke);
+    return p;
+  }
+
+  /** Акцент только у ветки к наведённому решению: bridge + spine:i при idx≥i + elbow:i при idx=i */
+  function syncConnectorAccent(card) {
+    const svg = card.querySelector(".skill-task-card__connector-svg");
+    if (!svg) return;
+    const raw = card.getAttribute("data-skill-connector-hover");
+    const idx = raw === null || raw === "" ? -1 : parseInt(raw, 10);
+    const accent = cssVarColor(card, "--accent", "currentColor");
+    const active = Number.isFinite(idx) && idx >= 0;
+
+    svg.querySelectorAll("[data-skill-conn]").forEach((el) => {
+      const base = el.getAttribute("data-skill-conn-stroke") || "";
+      const spec = el.getAttribute("data-skill-conn");
+      let on = false;
+      if (active && spec) {
+        if (spec === "bridge") on = true;
+        else if (spec.startsWith("spine:")) {
+          const i = parseInt(spec.slice(6), 10);
+          on = idx >= i;
+        } else if (spec.startsWith("elbow:")) {
+          const i = parseInt(spec.slice(6), 10);
+          on = idx === i;
+        }
+      }
+      el.setAttribute("stroke", on ? accent : base);
+    });
+  }
+
+  function bindConnectorHover(card) {
+    const solutions = card.querySelector(".skill-task-card__solutions");
+    if (!solutions) return;
+    const sols = solutions.querySelectorAll(".skill-task-card__solution");
+    if (!sols.length) return;
+
+    sols.forEach((sol, idx) => {
+      sol.addEventListener("mouseenter", () => {
+        card.setAttribute("data-skill-connector-hover", String(idx));
+        syncConnectorAccent(card);
+      });
+      sol.addEventListener("mouseleave", (e) => {
+        const to = e.relatedTarget;
+        if (
+          to &&
+          typeof to.nodeType === "number" &&
+          to.nodeType === 1 &&
+          solutions.contains(to) &&
+          to.classList.contains("skill-task-card__solution")
+        ) {
+          return;
+        }
+        card.removeAttribute("data-skill-connector-hover");
+        syncConnectorAccent(card);
+      });
+    });
+  }
+
+  /**
+   * Четверть круга от (sx, my-r) до (sx+r, my) — внешнее скругление локтя L
+   * (как border-bottom-left-radius). sweep 0 даёт выпуклую дугу наружу; sweep 1 — вогнутую.
+   */
+  function elbowArc(shiftX, my, r) {
+    if (r <= 0) return "";
+    const x0 = px(shiftX);
+    const y0 = px(my - r);
+    const x1 = px(shiftX + r);
+    const y1 = px(my);
+    /* rx/ry без px(): иначе дуга не сходится с тем же r в вертикали */
+    return `M ${x0} ${y0} A ${r} ${r} 0 0 0 ${x1} ${y1}`;
+  }
+
+  function drawCard(card) {
+    try {
+      const task = card.querySelector(".skill-task-card__task");
+      const solutions = card.querySelector(".skill-task-card__solutions");
+      const sols = solutions ? Array.from(solutions.querySelectorAll(".skill-task-card__solution")) : [];
+      if (!task || !solutions || sols.length === 0) return;
+
+      const firstSol = sols[0];
+      let rRaw = connectorRadiusPx(firstSol);
+
+      const svg = ensureSvgLayer(card);
+      clearSvg(svg);
+
+      const cr = card.getBoundingClientRect();
+      const w = Math.max(1, card.offsetWidth);
+      const h = Math.max(1, card.offsetHeight);
+      svg.setAttribute("width", String(w));
+      svg.setAttribute("height", String(h));
+      svg.setAttribute("viewBox", `0 0 ${w} ${h}`);
+
+      const shiftX = cssVarPx(card, "--skill-connector-shift-right", 0);
+      const tr = task.getBoundingClientRect();
+      const sr = solutions.getBoundingClientRect();
+
+      const taskBottom = tr.bottom - cr.top;
+      const gapTop = sr.top - tr.bottom;
+      const bridgeLen = Math.max(0, gapTop);
+      const bridgeEnd = taskBottom + bridgeLen;
+
+      const colBridge = cssVarColor(card, "--skill-connector-color-bridge", "currentColor");
+      const colSpine = cssVarColor(card, "--skill-connector-color-spine", "currentColor");
+      const colBranch = cssVarColor(card, "--skill-connector-color-elbow-h", "currentColor");
+
+      const mids = sols.map((el) => {
+        const rect = el.getBoundingClientRect();
+        return {
+          midY: rect.top + rect.height / 2 - cr.top,
+          left: rect.left - cr.left,
+        };
+      });
+
+      const n = mids.length;
+
+      /** Ограничить r: влезает в горизонталь и между соседними midY */
+      const armLens = mids.map((m) => Math.max(0, m.left - shiftX - 1));
+      const minArm = Math.min(...armLens, 999);
+      const gaps = [];
+      for (let i = 0; i < n - 1; i++) gaps.push(mids[i + 1].midY - mids[i].midY);
+      const minVertGap = gaps.length ? Math.min(...gaps) : 999;
+      let r = Math.min(rRaw, minArm, minVertGap > 2 ? (minVertGap / 2) * 0.95 : minVertGap);
+      if (!Number.isFinite(r) || r < 0.25) r = 0;
+
+      const eps = 1e-4;
+
+      if (r <= 0) {
+        if (gapTop > eps) {
+          svg.appendChild(lineEl(shiftX, taskBottom, shiftX, bridgeEnd, colBridge, 1, "bridge"));
+        }
+        if (n > 0) {
+          let y = bridgeEnd;
+          for (let i = 0; i < n; i++) {
+            const yEnd = mids[i].midY;
+            if (yEnd > y + eps) {
+              svg.appendChild(lineEl(shiftX, y, shiftX, yEnd, colSpine, 1, `spine:${i}`));
+              y = yEnd;
+            }
+          }
+        }
+        mids.forEach(({ midY, left }, i) => {
+          svg.appendChild(lineEl(shiftX, midY, left, midY, colBranch, 1, `elbow:${i}`));
+        });
+        syncConnectorAccent(card);
+        return;
+      }
+
+      /* Мост (синий): только над зоной, куда заходит жёлтый — иначе тот же участок рисуется жёлтым поверх и синий не виден */
+      const firstSpineY = bridgeEnd - Math.min(r, bridgeLen);
+      if (gapTop > eps && firstSpineY > taskBottom + eps) {
+        svg.appendChild(lineEl(shiftX, taskBottom, shiftX, firstSpineY, colBridge, 1, "bridge"));
+      }
+
+      /* Столбец: конец у касания дуги (my−r). i=0: старт вверх в зону моста. i≥1: ySpine = my_prev+r — предыдущий жёлтый кончился на my_prev−r, значит старт (ySpine−2r), иначе зазор r между сегментами (заметно при n≥3) */
+      let ySpine = bridgeEnd;
+      for (let i = 0; i < n; i++) {
+        const my = mids[i].midY;
+        const yTo = my - r;
+        const yFrom =
+          i === 0 ? bridgeEnd - Math.min(r, bridgeLen) : ySpine - 2 * r;
+        if (yTo > yFrom + eps) {
+          svg.appendChild(lineEl(shiftX, yFrom, shiftX, yTo, colSpine, 1, `spine:${i}`));
+        }
+        ySpine = my + r;
+      }
+
+      /* Локти: дуга A + горизонталь к карточке */
+      for (let i = 0; i < n; i++) {
+        const { midY: my, left } = mids[i];
+        const arcD = elbowArc(shiftX, my, r);
+        const hx1 = left;
+        const hx0 = shiftX + r;
+        if (hx1 > hx0 + eps) {
+          svg.appendChild(pathEl(`${arcD} L ${px(hx1)} ${px(my)}`, colBranch, 1, "none", `elbow:${i}`));
+        } else {
+          svg.appendChild(pathEl(arcD, colBranch, 1, "none", `elbow:${i}`));
+        }
+      }
+
+      syncConnectorAccent(card);
+    } catch (_) {
+      /* одна карточка не должна ломать остальные */
+    }
+  }
+
+  function redrawAll() {
+    document.querySelectorAll(".skill-task-card").forEach(drawCard);
+  }
+
+  window.addEventListener("site-theme-applied", redrawAll, { passive: true });
+
+  function bind() {
+    document.documentElement.setAttribute(ATTR, "");
+    redrawAll();
+
+    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => redrawAll()) : null;
+    document.querySelectorAll(".skill-task-card").forEach((card) => {
+      ro?.observe(card);
+      bindConnectorHover(card);
+    });
+
+    let t = 0;
+    window.addEventListener(
+      "scroll",
+      () => {
+        if (t) return;
+        t = window.requestAnimationFrame(() => {
+          t = 0;
+          redrawAll();
+        });
+      },
+      { passive: true },
+    );
+    window.addEventListener("resize", redrawAll, { passive: true });
+
+    if (document.fonts?.ready) {
+      document.fonts.ready.then(redrawAll).catch(() => {});
+    }
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", bind, { once: true });
+  } else {
+    bind();
+  }
+})();
diff --git a/public/vendor/plyr/plyr.css b/public/vendor/plyr/plyr.css
new file mode 100644
index 0000000..1e92ee2
--- /dev/null
+++ b/public/vendor/plyr/plyr.css
@@ -0,0 +1 @@
+@charset "UTF-8";@keyframes plyr-progress{to{background-position:25px 0;background-position:var(--plyr-progress-loading-size,25px) 0}}@keyframes plyr-popup{0%{opacity:.5;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes plyr-fade-in{0%{opacity:0}to{opacity:1}}.plyr{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;align-items:center;direction:ltr;display:flex;flex-direction:column;font-family:inherit;font-family:var(--plyr-font-family,inherit);font-variant-numeric:tabular-nums;font-weight:400;font-weight:var(--plyr-font-weight-regular,400);line-height:1.7;line-height:var(--plyr-line-height,1.7);max-width:100%;min-width:200px;position:relative;text-shadow:none;transition:box-shadow .3s ease;z-index:0}.plyr audio,.plyr iframe,.plyr video{display:block;height:100%;width:100%}.plyr button{font:inherit;line-height:inherit;width:auto}.plyr:focus{outline:0}.plyr--full-ui{box-sizing:border-box}.plyr--full-ui *,.plyr--full-ui :after,.plyr--full-ui :before{box-sizing:inherit}.plyr--full-ui a,.plyr--full-ui button,.plyr--full-ui input,.plyr--full-ui label{touch-action:manipulation}.plyr__badge{background:#4a5464;background:var(--plyr-badge-background,#4a5464);border-radius:2px;border-radius:var(--plyr-badge-border-radius,2px);color:#fff;color:var(--plyr-badge-text-color,#fff);font-size:9px;font-size:var(--plyr-font-size-badge,9px);line-height:1;padding:3px 4px}.plyr--full-ui ::-webkit-media-text-track-container{display:none}.plyr__captions{animation:plyr-fade-in .3s ease;bottom:0;display:none;font-size:13px;font-size:var(--plyr-font-size-small,13px);left:0;padding:10px;padding:var(--plyr-control-spacing,10px);position:absolute;text-align:center;transition:transform .4s ease-in-out;width:100%}.plyr__captions span:empty{display:none}@media (min-width:480px){.plyr__captions{font-size:15px;font-size:var(--plyr-font-size-base,15px);padding:20px;padding:calc(var(--plyr-control-spacing, 10px)*2)}}@media (min-width:768px){.plyr__captions{font-size:18px;font-size:var(--plyr-font-size-large,18px)}}.plyr--captions-active .plyr__captions{display:block}.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty)~.plyr__captions{transform:translateY(-40px);transform:translateY(calc(var(--plyr-control-spacing, 10px)*-4))}.plyr__caption{background:#000c;background:var(--plyr-captions-background,#000c);border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone;color:#fff;color:var(--plyr-captions-text-color,#fff);line-height:185%;padding:.2em .5em;white-space:pre-wrap}.plyr__caption div{display:inline}.plyr__control{background:#0000;border:0;border-radius:4px;border-radius:var(--plyr-control-radius,4px);color:inherit;cursor:pointer;flex-shrink:0;overflow:visible;padding:7px;padding:calc(var(--plyr-control-spacing, 10px)*.7);position:relative;transition:all .1s ease-in-out}.plyr__control svg{display:block;fill:currentColor;height:18px;height:var(--plyr-control-icon-size,18px);pointer-events:none;width:18px;width:var(--plyr-control-icon-size,18px)}.plyr__control:focus{outline:0}.plyr__control:focus-visible{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}a.plyr__control{text-decoration:none}.plyr__control.plyr__control--pressed .icon--not-pressed,.plyr__control.plyr__control--pressed .label--not-pressed,.plyr__control:not(.plyr__control--pressed) .icon--pressed,.plyr__control:not(.plyr__control--pressed) .label--pressed,a.plyr__control:after,a.plyr__control:before{display:none}.plyr--full-ui ::-webkit-media-controls{display:none}.plyr__controls{align-items:center;display:flex;justify-content:flex-end;text-align:center}.plyr__controls .plyr__progress__container{flex:1;min-width:0}.plyr__controls .plyr__controls__item{margin-left:2.5px;margin-left:calc(var(--plyr-control-spacing, 10px)/4)}.plyr__controls .plyr__controls__item:first-child{margin-left:0;margin-right:auto}.plyr__controls .plyr__controls__item.plyr__progress__container{padding-left:2.5px;padding-left:calc(var(--plyr-control-spacing, 10px)/4)}.plyr__controls .plyr__controls__item.plyr__time{padding:0 5px;padding:0 calc(var(--plyr-control-spacing, 10px)/2)}.plyr__controls .plyr__controls__item.plyr__progress__container:first-child,.plyr__controls .plyr__controls__item.plyr__time+.plyr__time,.plyr__controls .plyr__controls__item.plyr__time:first-child{padding-left:0}.plyr [data-plyr=airplay],.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr [data-plyr=pip],.plyr__controls:empty{display:none}.plyr--airplay-supported [data-plyr=airplay],.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen],.plyr--pip-supported [data-plyr=pip]{display:inline-block}.plyr__menu{display:flex;position:relative}.plyr__menu .plyr__control svg{transition:transform .3s ease}.plyr__menu .plyr__control[aria-expanded=true] svg{transform:rotate(90deg)}.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip{display:none}.plyr__menu__container{animation:plyr-popup .2s ease;background:#ffffffe6;background:var(--plyr-menu-background,#ffffffe6);border-radius:8px;border-radius:var(--plyr-menu-radius,8px);bottom:100%;box-shadow:0 1px 2px #00000026;box-shadow:var(--plyr-menu-shadow,0 1px 2px #00000026);color:#4a5464;color:var(--plyr-menu-color,#4a5464);font-size:15px;font-size:var(--plyr-font-size-base,15px);margin-bottom:10px;position:absolute;right:-3px;text-align:left;white-space:nowrap;z-index:3}.plyr__menu__container>div{overflow:hidden;transition:height .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1)}.plyr__menu__container:after{border:4px solid #0000;border-top-color:#ffffffe6;border:var(--plyr-menu-arrow-size,4px) solid #0000;border-top-color:var(--plyr-menu-background,#ffffffe6);content:"";height:0;position:absolute;right:14px;right:calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*.7 - var(--plyr-menu-arrow-size, 4px)/2);top:100%;width:0}.plyr__menu__container [role=menu]{padding:7px;padding:calc(var(--plyr-control-spacing, 10px)*.7)}.plyr__menu__container [role=menuitem],.plyr__menu__container [role=menuitemradio]{margin-top:2px}.plyr__menu__container [role=menuitem]:first-child,.plyr__menu__container [role=menuitemradio]:first-child{margin-top:0}.plyr__menu__container .plyr__control{align-items:center;color:#4a5464;color:var(--plyr-menu-color,#4a5464);display:flex;font-size:13px;font-size:var(--plyr-font-size-menu,var(--plyr-font-size-small,13px));padding:4.66667px 10.5px;padding:calc(var(--plyr-control-spacing, 10px)*.7/1.5) calc(var(--plyr-control-spacing, 10px)*.7*1.5);-webkit-user-select:none;user-select:none;width:100%}.plyr__menu__container .plyr__control>span{align-items:inherit;display:flex;width:100%}.plyr__menu__container .plyr__control:after{border:4px solid #0000;border:var(--plyr-menu-item-arrow-size,4px) solid #0000;content:"";position:absolute;top:50%;transform:translateY(-50%)}.plyr__menu__container .plyr__control--forward{padding-right:28px;padding-right:calc(var(--plyr-control-spacing, 10px)*.7*4)}.plyr__menu__container .plyr__control--forward:after{border-left-color:#728197;border-left-color:var(--plyr-menu-arrow-color,#728197);right:6.5px;right:calc(var(--plyr-control-spacing, 10px)*.7*1.5 - var(--plyr-menu-item-arrow-size, 4px))}.plyr__menu__container .plyr__control--forward:focus-visible:after,.plyr__menu__container .plyr__control--forward:hover:after{border-left-color:initial}.plyr__menu__container .plyr__control--back{font-weight:400;font-weight:var(--plyr-font-weight-regular,400);margin:7px;margin:calc(var(--plyr-control-spacing, 10px)*.7);margin-bottom:3.5px;margin-bottom:calc(var(--plyr-control-spacing, 10px)*.7/2);padding-left:28px;padding-left:calc(var(--plyr-control-spacing, 10px)*.7*4);position:relative;width:calc(100% - 14px);width:calc(100% - var(--plyr-control-spacing, 10px)*.7*2)}.plyr__menu__container .plyr__control--back:after{border-right-color:#728197;border-right-color:var(--plyr-menu-arrow-color,#728197);left:6.5px;left:calc(var(--plyr-control-spacing, 10px)*.7*1.5 - var(--plyr-menu-item-arrow-size, 4px))}.plyr__menu__container .plyr__control--back:before{background:#dcdfe5;background:var(--plyr-menu-back-border-color,#dcdfe5);box-shadow:0 1px 0 #fff;box-shadow:0 1px 0 var(--plyr-menu-back-border-shadow-color,#fff);content:"";height:1px;left:0;margin-top:3.5px;margin-top:calc(var(--plyr-control-spacing, 10px)*.7/2);overflow:hidden;position:absolute;right:0;top:100%}.plyr__menu__container .plyr__control--back:focus-visible:after,.plyr__menu__container .plyr__control--back:hover:after{border-right-color:initial}.plyr__menu__container .plyr__control[role=menuitemradio]{padding-left:7px;padding-left:calc(var(--plyr-control-spacing, 10px)*.7)}.plyr__menu__container .plyr__control[role=menuitemradio]:after,.plyr__menu__container .plyr__control[role=menuitemradio]:before{border-radius:100%}.plyr__menu__container .plyr__control[role=menuitemradio]:before{background:#0000001a;content:"";display:block;flex-shrink:0;height:16px;margin-right:10px;margin-right:var(--plyr-control-spacing,10px);transition:all .3s ease;width:16px}.plyr__menu__container .plyr__control[role=menuitemradio]:after{background:#fff;border:0;height:6px;left:12px;opacity:0;top:50%;transform:translateY(-50%) scale(0);transition:transform .3s ease,opacity .3s ease;width:6px}.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before{background:#00b2ff;background:var(--plyr-control-toggle-checked-background,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)))}.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:after{opacity:1;transform:translateY(-50%) scale(1)}.plyr__menu__container .plyr__control[role=menuitemradio]:focus-visible:before,.plyr__menu__container .plyr__control[role=menuitemradio]:hover:before{background:#23282f1a}.plyr__menu__container .plyr__menu__value{align-items:center;display:flex;margin-left:auto;margin-right:-5px;margin-right:calc(var(--plyr-control-spacing, 10px)*.7*-1 - -2px);overflow:hidden;padding-left:24.5px;padding-left:calc(var(--plyr-control-spacing, 10px)*.7*3.5);pointer-events:none}.plyr--full-ui input[type=range]{appearance:none;background:#0000;border:0;border-radius:26px;border-radius:calc(var(--plyr-range-thumb-height, 13px)*2);color:#00b2ff;color:var(--plyr-range-fill-background,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));display:block;height:19px;height:calc(var(--plyr-range-thumb-active-shadow-width, 3px)*2 + var(--plyr-range-thumb-height, 13px));margin:0;min-width:0;padding:0;transition:box-shadow .3s ease;width:100%}.plyr--full-ui input[type=range]::-webkit-slider-runnable-track{background:#0000;background-image:linear-gradient(90deg,currentColor 0,#0000 0);background-image:linear-gradient(to right,currentColor var(--value,0),#0000 var(--value,0));border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-webkit-transition:box-shadow .3s ease;transition:box-shadow .3s ease;-webkit-user-select:none;user-select:none}.plyr--full-ui input[type=range]::-webkit-slider-thumb{appearance:none;background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);margin-top:-4px;margin-top:calc((var(--plyr-range-thumb-height, 13px) - var(--plyr-range-track-height, 5px))/2*-1);position:relative;-webkit-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}.plyr--full-ui input[type=range]::-moz-range-track{background:#0000;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-moz-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}.plyr--full-ui input[type=range]::-moz-range-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);position:relative;-moz-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}.plyr--full-ui input[type=range]::-moz-range-progress{background:currentColor;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px)}.plyr--full-ui input[type=range]::-ms-track{color:#0000}.plyr--full-ui input[type=range]::-ms-fill-upper,.plyr--full-ui input[type=range]::-ms-track{background:#0000;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-ms-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}.plyr--full-ui input[type=range]::-ms-fill-lower{background:#0000;background:currentColor;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-ms-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}.plyr--full-ui input[type=range]::-ms-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);margin-top:0;position:relative;-ms-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}.plyr--full-ui input[type=range]::-ms-tooltip{display:none}.plyr--full-ui input[type=range]::-moz-focus-outer{border:0}.plyr--full-ui input[type=range]:focus{outline:0}.plyr--full-ui input[type=range]:focus-visible::-webkit-slider-runnable-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}.plyr--full-ui input[type=range]:focus-visible::-moz-range-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}.plyr--full-ui input[type=range]:focus-visible::-ms-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}.plyr__poster{background-color:#000;background-color:var(--plyr-video-background,var(--plyr-video-background,#000));background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .2s ease;width:100%;z-index:1}.plyr--stopped.plyr__poster-enabled .plyr__poster{opacity:1}.plyr--youtube.plyr--paused.plyr__poster-enabled:not(.plyr--stopped) .plyr__poster{display:none}.plyr__time{font-size:13px;font-size:var(--plyr-font-size-time,var(--plyr-font-size-small,13px))}.plyr__time+.plyr__time:before{content:"⁄";margin-right:10px;margin-right:var(--plyr-control-spacing,10px)}@media (max-width:767px){.plyr__time+.plyr__time{display:none}}.plyr__tooltip{background:#fff;background:var(--plyr-tooltip-background,#fff);border-radius:5px;border-radius:var(--plyr-tooltip-radius,5px);bottom:100%;box-shadow:0 1px 2px #00000026;box-shadow:var(--plyr-tooltip-shadow,0 1px 2px #00000026);color:#4a5464;color:var(--plyr-tooltip-color,#4a5464);font-size:13px;font-size:var(--plyr-font-size-small,13px);font-weight:400;font-weight:var(--plyr-font-weight-regular,400);left:50%;line-height:1.3;margin-bottom:10px;margin-bottom:calc(var(--plyr-control-spacing, 10px)/2*2);opacity:0;padding:5px 7.5px;padding:calc(var(--plyr-control-spacing, 10px)/2) calc(var(--plyr-control-spacing, 10px)/2*1.5);pointer-events:none;position:absolute;transform:translate(-50%,10px) scale(.8);transform-origin:50% 100%;transition:transform .2s ease .1s,opacity .2s ease .1s;white-space:nowrap;z-index:2}.plyr__tooltip:before{border-left:4px solid #0000;border-left:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-right:4px solid #0000;border-right:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-top:4px solid #fff;border-top:var(--plyr-tooltip-arrow-size,4px) solid var(--plyr-tooltip-background,#fff);bottom:-4px;bottom:calc(var(--plyr-tooltip-arrow-size, 4px)*-1);content:"";height:0;left:50%;position:absolute;transform:translateX(-50%);width:0;z-index:2}.plyr .plyr__control:focus-visible .plyr__tooltip,.plyr .plyr__control:hover .plyr__tooltip,.plyr__tooltip--visible{opacity:1;transform:translate(-50%) scale(1)}.plyr .plyr__control:hover .plyr__tooltip{z-index:3}.plyr__controls>.plyr__control:first-child .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip{left:0;transform:translateY(10px) scale(.8);transform-origin:0 100%}.plyr__controls>.plyr__control:first-child .plyr__tooltip:before,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip:before{left:16px;left:calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*.7)}.plyr__controls>.plyr__control:last-child .plyr__tooltip{left:auto;right:0;transform:translateY(10px) scale(.8);transform-origin:100% 100%}.plyr__controls>.plyr__control:last-child .plyr__tooltip:before{left:auto;right:16px;right:calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*.7);transform:translateX(50%)}.plyr__controls>.plyr__control:first-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control:focus-visible .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control:hover .plyr__tooltip,.plyr__controls>.plyr__control:first-child:focus-visible .plyr__tooltip,.plyr__controls>.plyr__control:first-child:hover .plyr__tooltip,.plyr__controls>.plyr__control:last-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:last-child:focus-visible .plyr__tooltip,.plyr__controls>.plyr__control:last-child:hover .plyr__tooltip{transform:translate(0) scale(1)}.plyr__progress{left:6.5px;left:calc(var(--plyr-range-thumb-height, 13px)*.5);margin-right:13px;margin-right:var(--plyr-range-thumb-height,13px);position:relative}.plyr__progress input[type=range],.plyr__progress__buffer{margin-left:-6.5px;margin-left:calc(var(--plyr-range-thumb-height, 13px)*-.5);margin-right:-6.5px;margin-right:calc(var(--plyr-range-thumb-height, 13px)*-.5);width:calc(100% + 13px);width:calc(100% + var(--plyr-range-thumb-height, 13px))}.plyr__progress input[type=range]{position:relative;z-index:2}.plyr__progress .plyr__tooltip{left:0;max-width:120px;overflow-wrap:break-word}.plyr__progress__buffer{-webkit-appearance:none;background:#0000;border:0;border-radius:100px;height:5px;height:var(--plyr-range-track-height,5px);left:0;margin-top:-2.5px;margin-top:calc(var(--plyr-range-track-height, 5px)/2*-1);padding:0;position:absolute;top:50%}.plyr__progress__buffer::-webkit-progress-bar{background:#0000}.plyr__progress__buffer::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-webkit-transition:width .2s ease;transition:width .2s ease}.plyr__progress__buffer::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-moz-transition:width .2s ease;transition:width .2s ease}.plyr__progress__buffer::-ms-fill{border-radius:100px;-ms-transition:width .2s ease;transition:width .2s ease}.plyr--loading .plyr__progress__buffer{animation:plyr-progress 1s linear infinite;background-image:linear-gradient(-45deg,#23282f99 25%,#0000 0,#0000 50%,#23282f99 0,#23282f99 75%,#0000 0,#0000);background-image:linear-gradient(-45deg,var(--plyr-progress-loading-background,#23282f99) 25%,#0000 25%,#0000 50%,var(--plyr-progress-loading-background,#23282f99) 50%,var(--plyr-progress-loading-background,#23282f99) 75%,#0000 75%,#0000);background-repeat:repeat-x;background-size:25px 25px;background-size:var(--plyr-progress-loading-size,25px) var(--plyr-progress-loading-size,25px);color:#0000}.plyr--video.plyr--loading .plyr__progress__buffer{background-color:#ffffff40;background-color:var(--plyr-video-progress-buffered-background,#ffffff40)}.plyr--audio.plyr--loading .plyr__progress__buffer{background-color:#c1c8d199;background-color:var(--plyr-audio-progress-buffered-background,#c1c8d199)}.plyr__progress__marker{background-color:#fff;background-color:var(--plyr-progress-marker-background,#fff);border-radius:1px;height:5px;height:var(--plyr-range-track-height,5px);position:absolute;top:50%;transform:translate(-50%,-50%);width:3px;width:var(--plyr-progress-marker-width,3px);z-index:3}.plyr__volume{align-items:center;display:flex;position:relative}.plyr__volume input[type=range]{margin-left:5px;margin-left:calc(var(--plyr-control-spacing, 10px)/2);margin-right:5px;margin-right:calc(var(--plyr-control-spacing, 10px)/2);max-width:90px;min-width:60px;position:relative;z-index:2}.plyr--audio{display:block}.plyr--audio .plyr__controls{background:#fff;background:var(--plyr-audio-controls-background,#fff);border-radius:inherit;color:#4a5464;color:var(--plyr-audio-control-color,#4a5464);padding:10px;padding:var(--plyr-control-spacing,10px)}.plyr--audio .plyr__control:focus-visible,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true]{background:#00b2ff;background:var(--plyr-audio-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));color:#fff;color:var(--plyr-audio-control-color-hover,#fff)}.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}.plyr--full-ui.plyr--audio input[type=range]::-ms-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}.plyr--audio .plyr__progress__buffer{color:#c1c8d199;color:var(--plyr-audio-progress-buffered-background,#c1c8d199)}.plyr--video{overflow:hidden}.plyr--video.plyr--menu-open{overflow:visible}.plyr__video-wrapper{background:#000;background:var(--plyr-video-background,var(--plyr-video-background,#000));border-radius:inherit;height:100%;margin:auto;overflow:hidden;position:relative;width:100%}.plyr__video-embed,.plyr__video-wrapper--fixed-ratio{aspect-ratio:16/9}@supports not (aspect-ratio:16/9){.plyr__video-embed,.plyr__video-wrapper--fixed-ratio{height:0;padding-bottom:56.25%;position:relative}}.plyr__video-embed iframe,.plyr__video-wrapper--fixed-ratio video{border:0;height:100%;left:0;position:absolute;top:0;width:100%}.plyr--full-ui .plyr__video-embed>.plyr__video-embed__container{padding-bottom:240%;position:relative;transform:translateY(-38.28125%)}.plyr--video .plyr__controls{background:linear-gradient(#0000,#000000bf);background:var(--plyr-video-controls-background,linear-gradient(#0000,#000000bf));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;bottom:0;color:#fff;color:var(--plyr-video-control-color,#fff);left:0;padding:5px;padding:calc(var(--plyr-control-spacing, 10px)/2);padding-top:20px;padding-top:calc(var(--plyr-control-spacing, 10px)*2);position:absolute;right:0;transition:opacity .4s ease-in-out,transform .4s ease-in-out;z-index:3}@media (min-width:480px){.plyr--video .plyr__controls{padding:10px;padding:var(--plyr-control-spacing,10px);padding-top:35px;padding-top:calc(var(--plyr-control-spacing, 10px)*3.5)}}.plyr--video.plyr--hide-controls .plyr__controls{opacity:0;pointer-events:none;transform:translateY(100%)}.plyr--video .plyr__control:focus-visible,.plyr--video .plyr__control:hover,.plyr--video .plyr__control[aria-expanded=true]{background:#00b2ff;background:var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));color:#fff;color:var(--plyr-video-control-color-hover,#fff)}.plyr__control--overlaid{background:#00b2ff;background:var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));border:0;border-radius:100%;color:#fff;color:var(--plyr-video-control-color,#fff);display:none;left:50%;opacity:.9;padding:15px;padding:calc(var(--plyr-control-spacing, 10px)*1.5);position:absolute;top:50%;transform:translate(-50%,-50%);transition:.3s;z-index:2}.plyr__control--overlaid svg{left:2px;position:relative}.plyr__control--overlaid:focus,.plyr__control--overlaid:hover{opacity:1}.plyr--playing .plyr__control--overlaid{opacity:0;visibility:hidden}.plyr--full-ui.plyr--video .plyr__control--overlaid{display:block}.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}.plyr--full-ui.plyr--video input[type=range]::-moz-range-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}.plyr--full-ui.plyr--video input[type=range]::-ms-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}.plyr--video .plyr__progress__buffer{color:#ffffff40;color:var(--plyr-video-progress-buffered-background,#ffffff40)}.plyr:fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:fullscreen video{height:100%}.plyr:fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:fullscreen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:fullscreen .plyr__captions{font-size:21px;font-size:var(--plyr-font-size-xlarge,21px)}}.plyr--fullscreen-fallback{background:#000;border-radius:0!important;height:100%;inset:0;margin:0;position:fixed;width:100%;z-index:10000000}.plyr--fullscreen-fallback video{height:100%}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen{display:block}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr--fullscreen-fallback.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr--fullscreen-fallback .plyr__captions{font-size:21px;font-size:var(--plyr-font-size-xlarge,21px)}}.plyr__ads{border-radius:inherit;cursor:pointer;inset:0;overflow:hidden;position:absolute;z-index:-1}.plyr__ads>div,.plyr__ads>div iframe{height:100%;position:absolute;width:100%}.plyr__ads:after{background:#23282f;border-radius:2px;bottom:10px;bottom:var(--plyr-control-spacing,10px);color:#fff;content:attr(data-badge-text);font-size:11px;padding:2px 6px;pointer-events:none;position:absolute;right:10px;right:var(--plyr-control-spacing,10px);z-index:3}.plyr__ads:empty:after{display:none}.plyr__cues{background:currentColor;display:block;height:5px;height:var(--plyr-range-track-height,5px);left:0;opacity:.8;position:absolute;top:50%;transform:translateY(-50%);width:3px;z-index:3}.plyr__preview-thumb{background-color:#fff;background-color:var(--plyr-tooltip-background,#fff);border-radius:8px;border-radius:var(--plyr-menu-radius,8px);bottom:100%;box-shadow:0 1px 2px #00000026;box-shadow:var(--plyr-tooltip-shadow,0 1px 2px #00000026);margin-bottom:10px;margin-bottom:calc(var(--plyr-control-spacing, 10px)/2*2);opacity:0;padding:3px;pointer-events:none;position:absolute;transform:translateY(10px) scale(.8);transform-origin:50% 100%;transition:transform .2s ease .1s,opacity .2s ease .1s;z-index:2}.plyr__preview-thumb--is-shown{opacity:1;transform:translate(0) scale(1)}.plyr__preview-thumb:before{border-left:4px solid #0000;border-left:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-right:4px solid #0000;border-right:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-top:4px solid #fff;border-top:var(--plyr-tooltip-arrow-size,4px) solid var(--plyr-tooltip-background,#fff);bottom:-4px;bottom:calc(var(--plyr-tooltip-arrow-size, 4px)*-1);content:"";height:0;left:calc(50% + var(--preview-arrow-offset));position:absolute;transform:translateX(-50%);width:0;z-index:2}.plyr__preview-thumb__image-container{background:#c1c8d1;border-radius:7px;border-radius:calc(var(--plyr-menu-radius, 8px) - 1px);overflow:hidden;position:relative;z-index:0}.plyr__preview-thumb__image-container img,.plyr__preview-thumb__image-container:after{height:100%;left:0;position:absolute;top:0;width:100%}.plyr__preview-thumb__image-container:after{border-radius:inherit;box-shadow:inset 0 0 0 1px #00000026;content:"";pointer-events:none}.plyr__preview-thumb__image-container img{max-height:none;max-width:none}.plyr__preview-thumb__time-container{background:linear-gradient(#0000,#000000bf);background:var(--plyr-video-controls-background,linear-gradient(#0000,#000000bf));border-bottom-left-radius:7px;border-bottom-left-radius:calc(var(--plyr-menu-radius, 8px) - 1px);border-bottom-right-radius:7px;border-bottom-right-radius:calc(var(--plyr-menu-radius, 8px) - 1px);bottom:0;left:0;line-height:1.1;padding:20px 6px 6px;position:absolute;right:0;z-index:3}.plyr__preview-thumb__time-container span{color:#fff;font-size:13px;font-size:var(--plyr-font-size-time,var(--plyr-font-size-small,13px))}.plyr__preview-scrubbing{filter:blur(1px);height:100%;inset:0;margin:auto;opacity:0;overflow:hidden;pointer-events:none;position:absolute;transition:opacity .3s ease;width:100%;z-index:1}.plyr__preview-scrubbing--is-shown{opacity:1}.plyr__preview-scrubbing img{height:100%;left:0;max-height:none;max-width:none;object-fit:contain;position:absolute;top:0;width:100%}.plyr--no-transition{transition:none!important}.plyr__sr-only{clip:rect(1px,1px,1px,1px);border:0!important;height:1px!important;overflow:hidden;padding:0!important;position:absolute!important;width:1px!important}.plyr [hidden]{display:none!important}
\ No newline at end of file
diff --git a/public/vendor/plyr/plyr.min.mjs b/public/vendor/plyr/plyr.min.mjs
new file mode 100644
index 0000000..97a8a47
--- /dev/null
+++ b/public/vendor/plyr/plyr.min.mjs
@@ -0,0 +1 @@
+function _defineProperty$1(e,t,i){return(t=_toPropertyKey(t))in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function _toPrimitive(e,t){if("object"!=typeof e||!e)return e;var i=e[Symbol.toPrimitive];if(void 0!==i){var s=i.call(e,t);if("object"!=typeof s)return s;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function _toPropertyKey(e){var t=_toPrimitive(e,"string");return"symbol"==typeof t?t:t+""}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var i=0;i<t.length;i++){var s=t[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(e,s.key,s)}}function _createClass(e,t,i){return t&&_defineProperties(e.prototype,t),i&&_defineProperties(e,i),e}function _defineProperty(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function ownKeys(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);t&&(s=s.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),i.push.apply(i,s)}return i}function _objectSpread2(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?ownKeys(Object(i),!0).forEach(function(t){_defineProperty(e,t,i[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):ownKeys(Object(i)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))})}return e}var defaults$1={addCSS:!0,thumbWidth:15,watch:!0};function matches$1(e,t){return function(){return Array.from(document.querySelectorAll(t)).includes(this)}.call(e,t)}function trigger(e,t){if(e&&t){var i=new Event(t,{bubbles:!0});e.dispatchEvent(i)}}var getConstructor$1=function(e){return null!=e?e.constructor:null},instanceOf$1=function(e,t){return!!(e&&t&&e instanceof t)},isNullOrUndefined$1=function(e){return null==e},isObject$1=function(e){return getConstructor$1(e)===Object},isNumber$1=function(e){return getConstructor$1(e)===Number&&!Number.isNaN(e)},isString$1=function(e){return getConstructor$1(e)===String},isBoolean$1=function(e){return getConstructor$1(e)===Boolean},isFunction$1=function(e){return getConstructor$1(e)===Function},isArray$1=function(e){return Array.isArray(e)},isNodeList$1=function(e){return instanceOf$1(e,NodeList)},isElement$1=function(e){return instanceOf$1(e,Element)},isEvent$1=function(e){return instanceOf$1(e,Event)},isEmpty$1=function(e){return isNullOrUndefined$1(e)||(isString$1(e)||isArray$1(e)||isNodeList$1(e))&&!e.length||isObject$1(e)&&!Object.keys(e).length},is$1={nullOrUndefined:isNullOrUndefined$1,object:isObject$1,number:isNumber$1,string:isString$1,boolean:isBoolean$1,function:isFunction$1,array:isArray$1,nodeList:isNodeList$1,element:isElement$1,event:isEvent$1,empty:isEmpty$1};function getDecimalPlaces(e){var t="".concat(e).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);return t?Math.max(0,(t[1]?t[1].length:0)-(t[2]?+t[2]:0)):0}function round(e,t){if(1>t){var i=getDecimalPlaces(t);return parseFloat(e.toFixed(i))}return Math.round(e/t)*t}var RangeTouch=function(){function e(t,i){_classCallCheck(this,e),is$1.element(t)?this.element=t:is$1.string(t)&&(this.element=document.querySelector(t)),is$1.element(this.element)&&is$1.empty(this.element.rangeTouch)&&(this.config=_objectSpread2({},defaults$1,{},i),this.init())}return _createClass(e,[{key:"init",value:function(){e.enabled&&(this.config.addCSS&&(this.element.style.userSelect="none",this.element.style.webKitUserSelect="none",this.element.style.touchAction="manipulation"),this.listeners(!0),this.element.rangeTouch=this)}},{key:"destroy",value:function(){e.enabled&&(this.config.addCSS&&(this.element.style.userSelect="",this.element.style.webKitUserSelect="",this.element.style.touchAction=""),this.listeners(!1),this.element.rangeTouch=null)}},{key:"listeners",value:function(e){var t=this,i=e?"addEventListener":"removeEventListener";["touchstart","touchmove","touchend"].forEach(function(e){t.element[i](e,function(e){return t.set(e)},!1)})}},{key:"get",value:function(t){if(!e.enabled||!is$1.event(t))return null;var i,s=t.target,n=t.changedTouches[0],r=parseFloat(s.getAttribute("min"))||0,a=parseFloat(s.getAttribute("max"))||100,o=parseFloat(s.getAttribute("step"))||1,l=s.getBoundingClientRect(),c=100/l.width*(this.config.thumbWidth/2)/100;return 0>(i=100/l.width*(n.clientX-l.left))?i=0:100<i&&(i=100),50>i?i-=(100-2*i)*c:50<i&&(i+=2*(i-50)*c),r+round(i/100*(a-r),o)}},{key:"set",value:function(t){e.enabled&&is$1.event(t)&&!t.target.disabled&&(t.preventDefault(),t.target.value=this.get(t),trigger(t.target,"touchend"===t.type?"change":"input"))}}],[{key:"setup",value:function(t){var i=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},s=null;if(is$1.empty(t)||is$1.string(t)?s=Array.from(document.querySelectorAll(is$1.string(t)?t:'input[type="range"]')):is$1.element(t)?s=[t]:is$1.nodeList(t)?s=Array.from(t):is$1.array(t)&&(s=t.filter(is$1.element)),is$1.empty(s))return null;var n=_objectSpread2({},defaults$1,{},i);if(is$1.string(t)&&n.watch){var r=new MutationObserver(function(i){Array.from(i).forEach(function(i){Array.from(i.addedNodes).forEach(function(i){is$1.element(i)&&matches$1(i,t)&&new e(i,n)})})});r.observe(document.body,{childList:!0,subtree:!0})}return s.map(function(t){return new e(t,i)})}},{key:"enabled",get:function(){return"ontouchstart"in document.documentElement}}]),e}();const getConstructor=e=>null!=e?e.constructor:null,instanceOf=(e,t)=>Boolean(e&&t&&e instanceof t),isNullOrUndefined=e=>null==e,isObject=e=>getConstructor(e)===Object,isNumber=e=>getConstructor(e)===Number&&!Number.isNaN(e),isString=e=>getConstructor(e)===String,isBoolean=e=>getConstructor(e)===Boolean,isFunction=e=>"function"==typeof e,isArray=e=>Array.isArray(e),isWeakMap=e=>instanceOf(e,WeakMap),isNodeList=e=>instanceOf(e,NodeList),isTextNode=e=>getConstructor(e)===Text,isEvent=e=>instanceOf(e,Event),isKeyboardEvent=e=>instanceOf(e,KeyboardEvent),isCue=e=>instanceOf(e,window.TextTrackCue)||instanceOf(e,window.VTTCue),isTrack=e=>instanceOf(e,TextTrack)||!isNullOrUndefined(e)&&isString(e.kind),isPromise=e=>instanceOf(e,Promise)&&isFunction(e.then);function isElement(e){return null!==e&&"object"==typeof e&&1===e.nodeType&&"object"==typeof e.style&&"object"==typeof e.ownerDocument}function isEmpty(e){return isNullOrUndefined(e)||(isString(e)||isArray(e)||isNodeList(e))&&!e.length||isObject(e)&&!Object.keys(e).length}function isUrl(e){if(instanceOf(e,window.URL))return!0;if(!isString(e))return!1;let t=e;e.startsWith("http://")&&e.startsWith("https://")||(t=`http://${e}`);try{return!isEmpty(new URL(t).hostname)}catch{return!1}}var is={nullOrUndefined:isNullOrUndefined,object:isObject,number:isNumber,string:isString,boolean:isBoolean,function:isFunction,array:isArray,weakMap:isWeakMap,nodeList:isNodeList,element:isElement,textNode:isTextNode,event:isEvent,keyboardEvent:isKeyboardEvent,cue:isCue,track:isTrack,promise:isPromise,url:isUrl,empty:isEmpty};const transitionEndEvent=(()=>{const e=document.createElement("span"),t={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"},i=Object.keys(t).find(t=>void 0!==e.style[t]);return!!is.string(i)&&t[i]})();function repaint(e,t){setTimeout(()=>{try{e.hidden=!0,e.offsetHeight,e.hidden=!1}catch{}},t)}function cloneDeep(e){return JSON.parse(JSON.stringify(e))}function getDeep(e,t){return t.split(".").reduce((e,t)=>e&&e[t],e)}function extend(e={},...t){if(!t.length)return e;const i=t.shift();return is.object(i)?(Object.keys(i).forEach(t=>{is.object(i[t])?(Object.keys(e).includes(t)||Object.assign(e,{[t]:{}}),extend(e[t],i[t])):Object.assign(e,{[t]:i[t]})}),extend(e,...t)):e}function wrap(e,t){const i=e.length?e:[e];Array.from(i).reverse().forEach((e,i)=>{const s=i>0?t.cloneNode(!0):t,n=e.parentNode,r=e.nextSibling;s.appendChild(e),r?n.insertBefore(s,r):n.appendChild(s)})}function setAttributes(e,t){is.element(e)&&!is.empty(t)&&Object.entries(t).filter(([,e])=>!is.nullOrUndefined(e)).forEach(([t,i])=>e.setAttribute(t,i))}function createElement(e,t,i){const s=document.createElement(e);return is.object(t)&&setAttributes(s,t),is.string(i)&&(s.textContent=i),s}function insertAfter(e,t){is.element(e)&&is.element(t)&&t.parentNode.insertBefore(e,t.nextSibling)}function insertElement(e,t,i,s){is.element(t)&&t.appendChild(createElement(e,i,s))}function removeElement(e){is.nodeList(e)||is.array(e)?Array.from(e).forEach(removeElement):is.element(e)&&is.element(e.parentNode)&&e.parentNode.removeChild(e)}function emptyElement(e){if(!is.element(e))return;let{length:t}=e.childNodes;for(;t>0;)e.removeChild(e.lastChild),t-=1}function replaceElement(e,t){return is.element(t)&&is.element(t.parentNode)&&is.element(e)?(t.parentNode.replaceChild(e,t),e):null}function getAttributesFromSelector(e,t){if(!is.string(e)||is.empty(e))return{};const i={},s=extend({},t);return e.split(",").forEach(e=>{const t=e.trim(),n=t.replace(".",""),r=t.replace(/[[\]]/g,"").split("="),[a]=r,o=r.length>1?r[1].replace(/["']/g,""):"";switch(t.charAt(0)){case".":is.string(s.class)?i.class=`${s.class} ${n}`:i.class=n;break;case"#":i.id=t.replace("#","");break;case"[":i[a]=o}}),extend(s,i)}function toggleHidden(e,t){if(!is.element(e))return;let i=t;is.boolean(i)||(i=!e.hidden),e.hidden=i}function toggleClass(e,t,i){if(is.nodeList(e))return Array.from(e).map(e=>toggleClass(e,t,i));if(is.element(e)){let s="toggle";return void 0!==i&&(s=i?"add":"remove"),e.classList[s](t),e.classList.contains(t)}return!1}function hasClass(e,t){return is.element(e)&&e.classList.contains(t)}function matches(e,t){const{prototype:i}=Element;return(i.matches||i.webkitMatchesSelector||i.mozMatchesSelector||i.msMatchesSelector||function(){return Array.from(document.querySelectorAll(t)).includes(this)}).call(e,t)}function closest$1(e,t){const{prototype:i}=Element;return(i.closest||function(){let e=this;do{if(matches.matches(e,t))return e;e=e.parentElement||e.parentNode}while(null!==e&&1===e.nodeType);return null}).call(e,t)}function getElements(e){return this.elements.container.querySelectorAll(e)}function getElement(e){return this.elements.container.querySelector(e)}function setFocus(e=null,t=!1){is.element(e)&&e.focus({preventScroll:!0,focusVisible:t})}const defaultCodecs={"audio/ogg":"vorbis","audio/wav":"1","video/webm":"vp8, vorbis","video/mp4":"avc1.42E01E, mp4a.40.2","video/ogg":"theora"},support={audio:"canPlayType"in document.createElement("audio"),video:"canPlayType"in document.createElement("video"),check(e,t){const i=support[e]||"html5"!==t;return{api:i,ui:i&&support.rangeInput}},pip:document.pictureInPictureEnabled&&!createElement("video").disablePictureInPicture,airplay:is.function(window.WebKitPlaybackTargetAvailabilityEvent),playsinline:"playsInline"in document.createElement("video"),mime(e){if(is.empty(e))return!1;const[t]=e.split("/");let i=e;if(!this.isHTML5||t!==this.type)return!1;Object.keys(defaultCodecs).includes(i)&&(i+=`; codecs="${defaultCodecs[e]}"`);try{return Boolean(i&&this.media.canPlayType(i).replace(/no/,""))}catch{return!1}},textTracks:"textTracks"in document.createElement("video"),rangeInput:(()=>{const e=document.createElement("input");return e.type="range","range"===e.type})(),touch:"ontouchstart"in document.documentElement,transitions:!1!==transitionEndEvent,reducedMotion:"matchMedia"in window&&window.matchMedia("(prefers-reduced-motion)").matches},supportsPassiveListeners=(()=>{let e=!1;try{const t=Object.defineProperty({},"passive",{get:()=>(e=!0,null)});window.addEventListener("test",null,t),window.removeEventListener("test",null,t)}catch{}return e})();function toggleListener(e,t,i,s=!1,n=!0,r=!1){if(!e||!("addEventListener"in e)||is.empty(t)||!is.function(i))return;const a=t.split(" ");let o=r;supportsPassiveListeners&&(o={passive:n,capture:r}),a.forEach(t=>{this&&this.eventListeners&&s&&this.eventListeners.push({element:e,type:t,callback:i,options:o}),e[s?"addEventListener":"removeEventListener"](t,i,o)})}function on(e,t="",i,s=!0,n=!1){toggleListener.call(this,e,t,i,!0,s,n)}function off(e,t="",i,s=!0,n=!1){toggleListener.call(this,e,t,i,!1,s,n)}function once(e,t="",i,s=!0,n=!1){const r=(...a)=>{off(e,t,r,s,n),i.apply(this,a)};toggleListener.call(this,e,t,r,!0,s,n)}function triggerEvent(e,t="",i=!1,s={}){if(!is.element(e)||is.empty(t))return;const n=new CustomEvent(t,{bubbles:i,detail:{...s,plyr:this}});e.dispatchEvent(n)}function unbindListeners(){this&&this.eventListeners&&(this.eventListeners.forEach(e=>{const{element:t,type:i,callback:s,options:n}=e;t.removeEventListener(i,s,n)}),this.eventListeners=[])}function ready(){return new Promise(e=>this.ready?setTimeout(e,0):on.call(this,this.elements.container,"ready",e)).then(()=>{})}function silencePromise(e){is.promise(e)&&e.then(null,()=>{})}function dedupe(e){return is.array(e)?e.filter((t,i)=>e.indexOf(t)===i):e}function closest(e,t){return is.array(e)&&e.length?e.reduce((e,i)=>Math.abs(i-t)<Math.abs(e-t)?i:e):null}function supportsCSS(e){return!(!window||!window.CSS)&&window.CSS.supports(e)}const standardRatios=[[1,1],[4,3],[3,4],[5,4],[4,5],[3,2],[2,3],[16,10],[10,16],[16,9],[9,16],[21,9],[9,21],[32,9],[9,32]].reduce((e,[t,i])=>({...e,[t/i]:[t,i]}),{});function validateAspectRatio(e){if(!(is.array(e)||is.string(e)&&e.includes(":")))return!1;return(is.array(e)?e:e.split(":")).map(Number).every(is.number)}function reduceAspectRatio(e){if(!is.array(e)||!e.every(is.number))return null;const[t,i]=e,s=(e,t)=>0===t?e:s(t,e%t),n=s(t,i);return[t/n,i/n]}function getAspectRatio(e){const t=e=>validateAspectRatio(e)?e.split(":").map(Number):null;let i=t(e);if(null===i&&(i=t(this.config.ratio)),null===i&&!is.empty(this.embed)&&is.array(this.embed.ratio)&&({ratio:i}=this.embed),null===i&&this.isHTML5){const{videoWidth:e,videoHeight:t}=this.media;i=[e,t]}return reduceAspectRatio(i)}function setAspectRatio(e){if(!this.isVideo)return{};const{wrapper:t}=this.elements,i=getAspectRatio.call(this,e);if(!is.array(i))return{};const[s,n]=reduceAspectRatio(i),r=100/s*n;if(supportsCSS(`aspect-ratio: ${s}/${n}`)?t.style.aspectRatio=`${s}/${n}`:t.style.paddingBottom=`${r}%`,this.isVimeo&&!this.config.vimeo.premium&&this.supported.ui){const e=100/this.media.offsetWidth*Number.parseInt(window.getComputedStyle(this.media).paddingBottom,10),i=(e-r)/(e/50);this.fullscreen.active?t.style.paddingBottom=null:this.media.style.transform=`translateY(-${i}%)`}else this.isHTML5&&t.classList.add(this.config.classNames.videoFixedRatio);return{padding:r,ratio:i}}function roundAspectRatio(e,t,i=.05){const s=e/t,n=closest(Object.keys(standardRatios),s);return Math.abs(n-s)<=i?standardRatios[n]:[e,t]}function getViewportSize(){return[Math.max(document.documentElement.clientWidth||0,window.innerWidth||0),Math.max(document.documentElement.clientHeight||0,window.innerHeight||0)]}const html5={getSources(){if(!this.isHTML5)return[];return Array.from(this.media.querySelectorAll("source")).filter(e=>{const t=e.getAttribute("type");return!!is.empty(t)||support.mime.call(this,t)})},getQualityOptions(){return this.config.quality.forced?this.config.quality.options:html5.getSources.call(this).map(e=>Number(e.getAttribute("size"))).filter(Boolean)},setup(){if(!this.isHTML5)return;const e=this;e.options.speed=e.config.speed.options,is.empty(this.config.ratio)||setAspectRatio.call(e),Object.defineProperty(e.media,"quality",{get(){const t=html5.getSources.call(e).find(t=>t.getAttribute("src")===e.source);return t&&Number(t.getAttribute("size"))},set(t){if(e.quality!==t){if(e.config.quality.forced&&is.function(e.config.quality.onChange))e.config.quality.onChange(t);else{const i=html5.getSources.call(e).find(e=>Number(e.getAttribute("size"))===t);if(!i)return;const{currentTime:s,paused:n,preload:r,readyState:a,playbackRate:o}=e.media;e.media.src=i.getAttribute("src"),("none"!==r||a)&&(e.once("loadedmetadata",()=>{e.speed=o,e.currentTime=s,n||silencePromise(e.play())}),e.media.load())}triggerEvent.call(e,e.media,"qualitychange",!1,{quality:t})}}})},cancelRequests(){this.isHTML5&&(removeElement(html5.getSources.call(this)),this.media.setAttribute("src",this.config.blankVideo),this.media.load(),this.debug.log("Cancelled network requests"))}},isIE=Boolean(window.document.documentMode),isEdge=/Edge/.test(navigator.userAgent),isWebKit="WebkitAppearance"in document.documentElement.style&&!/Edge/.test(navigator.userAgent),isIPadOS="MacIntel"===navigator.platform&&navigator.maxTouchPoints>1,isIos=/iPad|iPhone|iPod/i.test(navigator.userAgent)&&navigator.maxTouchPoints>1;var browser={isIE:isIE,isEdge:isEdge,isWebKit:isWebKit,isIPadOS:isIPadOS,isIos:isIos};function generateId(e){return`${e}-${Math.floor(1e4*Math.random())}`}function format(e,...t){return is.empty(e)?e:e.toString().replace(/\{(\d+)\}/g,(e,i)=>t[i].toString())}function getPercentage(e,t){return 0===e||0===t||Number.isNaN(e)||Number.isNaN(t)?0:(e/t*100).toFixed(2)}function replaceAll(e="",t="",i=""){return e.replace(new RegExp(t.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g,"\\$1"),"g"),i.toString())}function toTitleCase(e=""){return e.toString().replace(/\w\S*/g,e=>e.charAt(0).toUpperCase()+e.slice(1).toLowerCase())}function toPascalCase(e=""){let t=e.toString();return t=replaceAll(t,"-"," "),t=replaceAll(t,"_"," "),t=toTitleCase(t),replaceAll(t," ","")}function toCamelCase(e=""){let t=e.toString();return t=toPascalCase(t),t.charAt(0).toLowerCase()+t.slice(1)}function stripHTML(e){const t=document.createDocumentFragment(),i=document.createElement("div");return t.appendChild(i),i.innerHTML=e,t.firstChild.textContent}function getHTML(e){const t=document.createElement("div");return t.appendChild(e),t.innerHTML}const resources={pip:"PIP",airplay:"AirPlay",html5:"HTML5",vimeo:"Vimeo",youtube:"YouTube"},i18n={get(e="",t={}){if(is.empty(e)||is.empty(t))return"";let i=getDeep(t.i18n,e);if(is.empty(i))return Object.keys(resources).includes(e)?resources[e]:"";const s={"{seektime}":t.seekTime,"{title}":t.title};return Object.entries(s).forEach(([e,t])=>{i=replaceAll(i,e,t)}),i}};class Storage{constructor(e){_defineProperty$1(this,"get",e=>{if(!Storage.supported||!this.enabled)return null;const t=window.localStorage.getItem(this.key);if(is.empty(t))return null;const i=JSON.parse(t);return is.string(e)&&e.length?i[e]:i}),_defineProperty$1(this,"set",e=>{if(!Storage.supported||!this.enabled)return;if(!is.object(e))return;let t=this.get();is.empty(t)&&(t={}),extend(t,e);try{window.localStorage.setItem(this.key,JSON.stringify(t))}catch{}}),this.enabled=e.config.storage.enabled,this.key=e.config.storage.key}static get supported(){try{if(!("localStorage"in window))return!1;const e="___test";return window.localStorage.setItem(e,e),window.localStorage.removeItem(e),!0}catch{return!1}}}function fetch(e,t="text",i=!1){return new Promise((s,n)=>{try{const n=new XMLHttpRequest;if(!("withCredentials"in n))return;i&&(n.withCredentials=!0),n.addEventListener("load",()=>{if("text"===t)try{s(JSON.parse(n.responseText))}catch{s(n.responseText)}else s(n.response)}),n.addEventListener("error",()=>{throw new Error(n.status)}),n.open("GET",e,!0),n.responseType=t,n.send()}catch(e){n(e)}})}function loadSprite(e,t){if(!is.string(e))return;const i="cache",s=is.string(t);let n=!1;const r=()=>null!==document.getElementById(t),a=(e,t)=>{e.innerHTML=t,s&&r()||document.body.insertAdjacentElement("afterbegin",e)};if(!s||!r()){const r=Storage.supported,o=document.createElement("div");if(o.setAttribute("hidden",""),s&&o.setAttribute("id",t),r){const e=window.localStorage.getItem(`${i}-${t}`);if(n=null!==e,n){const t=JSON.parse(e);a(o,t.content)}}fetch(e).then(e=>{if(!is.empty(e)){if(r)try{window.localStorage.setItem(`${i}-${t}`,JSON.stringify({content:e}))}catch{}a(o,e)}}).catch(()=>{})}}const getHours=e=>Math.trunc(e/60/60%60,10),getMinutes=e=>Math.trunc(e/60%60,10),getSeconds=e=>Math.trunc(e%60,10);function formatTime(e=0,t=!1,i=!1){if(!is.number(e))return formatTime(void 0,t,i);const s=e=>`0${e}`.slice(-2);let n=getHours(e);const r=getMinutes(e),a=getSeconds(e);return n=t||n>0?`${n}:`:"",`${i&&e>0?"-":""}${n}${s(r)}:${s(a)}`}const controls={getIconUrl(){const e=new URL(this.config.iconUrl,window.location),t=window.location.host?window.location.host:window.top.location.host,i=e.host!==t||browser.isIE&&!window.svg4everybody;return{url:this.config.iconUrl,cors:i}},findElements(){try{return this.elements.controls=getElement.call(this,this.config.selectors.controls.wrapper),this.elements.buttons={play:getElements.call(this,this.config.selectors.buttons.play),pause:getElement.call(this,this.config.selectors.buttons.pause),restart:getElement.call(this,this.config.selectors.buttons.restart),rewind:getElement.call(this,this.config.selectors.buttons.rewind),fastForward:getElement.call(this,this.config.selectors.buttons.fastForward),mute:getElement.call(this,this.config.selectors.buttons.mute),pip:getElement.call(this,this.config.selectors.buttons.pip),airplay:getElement.call(this,this.config.selectors.buttons.airplay),settings:getElement.call(this,this.config.selectors.buttons.settings),captions:getElement.call(this,this.config.selectors.buttons.captions),fullscreen:getElement.call(this,this.config.selectors.buttons.fullscreen)},this.elements.progress=getElement.call(this,this.config.selectors.progress),this.elements.inputs={seek:getElement.call(this,this.config.selectors.inputs.seek),volume:getElement.call(this,this.config.selectors.inputs.volume)},this.elements.display={buffer:getElement.call(this,this.config.selectors.display.buffer),currentTime:getElement.call(this,this.config.selectors.display.currentTime),duration:getElement.call(this,this.config.selectors.display.duration)},is.element(this.elements.progress)&&(this.elements.display.seekTooltip=this.elements.progress.querySelector(`.${this.config.classNames.tooltip}`)),!0}catch(e){return this.debug.warn("It looks like there is a problem with your custom controls HTML",e),this.toggleNativeControls(!0),!1}},createIcon(e,t){const i="http://www.w3.org/2000/svg",s=controls.getIconUrl.call(this),n=`${s.cors?"":s.url}#${this.config.iconPrefix}`,r=document.createElementNS(i,"svg");setAttributes(r,extend(t,{"aria-hidden":"true",focusable:"false"}));const a=document.createElementNS(i,"use"),o=`${n}-${e}`;return"href"in a&&a.setAttributeNS("http://www.w3.org/1999/xlink","href",o),a.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",o),r.appendChild(a),r},createLabel(e,t={}){const i=i18n.get(e,this.config);return createElement("span",{...t,class:[t.class,this.config.classNames.hidden].filter(Boolean).join(" ")},i)},createBadge(e){if(is.empty(e))return null;const t=createElement("span",{class:this.config.classNames.menu.value});return t.appendChild(createElement("span",{class:this.config.classNames.menu.badge},e)),t},createButton(e,t){const i=extend({},t);let s=toCamelCase(e);const n={element:"button",toggle:!1,label:null,icon:null,labelPressed:null,iconPressed:null};switch(["element","icon","label"].forEach(e=>{Object.keys(i).includes(e)&&(n[e]=i[e],delete i[e])}),"button"!==n.element||Object.keys(i).includes("type")||(i.type="button"),Object.keys(i).includes("class")?i.class.split(" ").includes(this.config.classNames.control)||extend(i,{class:`${i.class} ${this.config.classNames.control}`}):i.class=this.config.classNames.control,e){case"play":n.toggle=!0,n.label="play",n.labelPressed="pause",n.icon="play",n.iconPressed="pause";break;case"mute":n.toggle=!0,n.label="mute",n.labelPressed="unmute",n.icon="volume",n.iconPressed="muted";break;case"captions":n.toggle=!0,n.label="enableCaptions",n.labelPressed="disableCaptions",n.icon="captions-off",n.iconPressed="captions-on";break;case"fullscreen":n.toggle=!0,n.label="enterFullscreen",n.labelPressed="exitFullscreen",n.icon="enter-fullscreen",n.iconPressed="exit-fullscreen";break;case"play-large":i.class+=` ${this.config.classNames.control}--overlaid`,s="play",n.label="play",n.icon="play";break;default:is.empty(n.label)&&(n.label=s),is.empty(n.icon)&&(n.icon=e)}const r=createElement(n.element);return n.toggle?(r.appendChild(controls.createIcon.call(this,n.iconPressed,{class:"icon--pressed"})),r.appendChild(controls.createIcon.call(this,n.icon,{class:"icon--not-pressed"})),r.appendChild(controls.createLabel.call(this,n.labelPressed,{class:"label--pressed"})),r.appendChild(controls.createLabel.call(this,n.label,{class:"label--not-pressed"}))):(r.appendChild(controls.createIcon.call(this,n.icon)),r.appendChild(controls.createLabel.call(this,n.label))),extend(i,getAttributesFromSelector(this.config.selectors.buttons[s],i)),setAttributes(r,i),"play"===s?(is.array(this.elements.buttons[s])||(this.elements.buttons[s]=[]),this.elements.buttons[s].push(r)):this.elements.buttons[s]=r,r},createRange(e,t){const i=createElement("input",extend(getAttributesFromSelector(this.config.selectors.inputs[e]),{type:"range",min:0,max:100,step:.01,value:0,autocomplete:"off",role:"slider","aria-label":i18n.get(e,this.config),"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":0},t));return this.elements.inputs[e]=i,controls.updateRangeFill.call(this,i),RangeTouch.setup(i),i},createProgress(e,t){const i=createElement("progress",extend(getAttributesFromSelector(this.config.selectors.display[e]),{min:0,max:100,value:0,role:"progressbar","aria-hidden":!0},t));if("volume"!==e){i.appendChild(createElement("span",null,"0"));const t={played:"played",buffer:"buffered"}[e],s=t?i18n.get(t,this.config):"";i.textContent=`% ${s.toLowerCase()}`}return this.elements.display[e]=i,i},createTime(e,t){const i=getAttributesFromSelector(this.config.selectors.display[e],t),s=createElement("div",extend(i,{class:`${i.class?i.class:""} ${this.config.classNames.display.time} `.trim(),"aria-label":i18n.get(e,this.config),role:"timer"}),"00:00");return this.elements.display[e]=s,s},bindMenuItemShortcuts(e,t){on.call(this,e,"keydown keyup",i=>{if(![" ","ArrowUp","ArrowDown","ArrowRight"].includes(i.key))return;if(i.preventDefault(),i.stopPropagation(),"keydown"===i.type)return;const s=matches(e,'[role="menuitemradio"]');if(!s&&[" ","ArrowRight"].includes(i.key))controls.showMenuPanel.call(this,t,!0);else{let t;" "!==i.key&&("ArrowDown"===i.key||s&&"ArrowRight"===i.key?(t=e.nextElementSibling,is.element(t)||(t=e.parentNode.firstElementChild)):(t=e.previousElementSibling,is.element(t)||(t=e.parentNode.lastElementChild)),setFocus.call(this,t,!0))}},!1),on.call(this,e,"keyup",e=>{"Return"===e.key&&controls.focusFirstMenuItem.call(this,null,!0)})},createMenuItem({value:e,list:t,type:i,title:s,badge:n=null,checked:r=!1}){const a=getAttributesFromSelector(this.config.selectors.inputs[i]),o=createElement("button",extend(a,{type:"button",role:"menuitemradio",class:`${this.config.classNames.control} ${a.class?a.class:""}`.trim(),"aria-checked":r,value:e})),l=createElement("span");l.innerHTML=s,is.element(n)&&l.appendChild(n),o.appendChild(l),Object.defineProperty(o,"checked",{enumerable:!0,get:()=>"true"===o.getAttribute("aria-checked"),set(e){e&&Array.from(o.parentNode.children).filter(e=>matches(e,'[role="menuitemradio"]')).forEach(e=>e.setAttribute("aria-checked","false")),o.setAttribute("aria-checked",e?"true":"false")}}),this.listeners.bind(o,"click keyup",t=>{if(!is.keyboardEvent(t)||" "===t.key){switch(t.preventDefault(),t.stopPropagation(),o.checked=!0,i){case"language":this.currentTrack=Number(e);break;case"quality":this.quality=e;break;case"speed":this.speed=Number.parseFloat(e)}controls.showMenuPanel.call(this,"home",is.keyboardEvent(t))}},i,!1),controls.bindMenuItemShortcuts.call(this,o,i),t.appendChild(o)},formatTime(e=0,t=!1){if(!is.number(e))return e;return formatTime(e,getHours(this.duration)>0,t)},updateTimeDisplay(e=null,t=0,i=!1){is.element(e)&&is.number(t)&&(e.textContent=controls.formatTime(t,i))},updateVolume(){this.supported.ui&&(is.element(this.elements.inputs.volume)&&controls.setRange.call(this,this.elements.inputs.volume,this.muted?0:this.volume),is.element(this.elements.buttons.mute)&&(this.elements.buttons.mute.pressed=this.muted||0===this.volume))},setRange(e,t=0){is.element(e)&&(e.value=t,controls.updateRangeFill.call(this,e))},updateProgress(e){if(!this.supported.ui||!is.event(e))return;let t=0;const i=(e,t)=>{const i=is.number(t)?t:0,s=is.element(e)?e:this.elements.display.buffer;if(is.element(s)){s.value=i;const e=s.getElementsByTagName("span")[0];is.element(e)&&(e.childNodes[0].nodeValue=i)}};if(e)switch(e.type){case"timeupdate":case"seeking":case"seeked":t=getPercentage(this.currentTime,this.duration),"timeupdate"===e.type&&controls.setRange.call(this,this.elements.inputs.seek,t);break;case"playing":case"progress":i(this.elements.display.buffer,100*this.buffered)}},updateRangeFill(e){const t=is.event(e)?e.target:e;if(is.element(t)&&"range"===t.getAttribute("type")){if(matches(t,this.config.selectors.inputs.seek)){t.setAttribute("aria-valuenow",this.currentTime);const e=controls.formatTime(this.currentTime),i=controls.formatTime(this.duration),s=i18n.get("seekLabel",this.config);t.setAttribute("aria-valuetext",s.replace("{currentTime}",e).replace("{duration}",i))}else if(matches(t,this.config.selectors.inputs.volume)){const e=100*t.value;t.setAttribute("aria-valuenow",e),t.setAttribute("aria-valuetext",`${e.toFixed(1)}%`)}else t.setAttribute("aria-valuenow",t.value);(browser.isWebKit||browser.isIPadOS)&&t.style.setProperty("--value",t.value/t.max*100+"%")}},updateSeekTooltip(e){var t,i;if(!this.config.tooltips.seek||!is.element(this.elements.inputs.seek)||!is.element(this.elements.display.seekTooltip)||0===this.duration)return;const s=this.elements.display.seekTooltip,n=`${this.config.classNames.tooltip}--visible`,r=e=>toggleClass(s,n,e);if(this.touch)return void r(!1);let a=0;const o=this.elements.progress.getBoundingClientRect();if(is.event(e)){const t=e.pageX-e.clientX;a=100/o.width*(e.pageX-o.left-t)}else{if(!hasClass(s,n))return;a=Number.parseFloat(s.style.left,10)}a<0?a=0:a>100&&(a=100);const l=this.duration/100*a;s.textContent=controls.formatTime(l);const c=null===(t=this.config.markers)||void 0===t||null===(i=t.points)||void 0===i?void 0:i.find(({time:e})=>e===Math.round(l));c&&s.insertAdjacentHTML("afterbegin",`${c.label}<br>`),s.style.left=`${a}%`,is.event(e)&&["mouseenter","mouseleave"].includes(e.type)&&r("mouseenter"===e.type)},timeUpdate(e){const t=!is.element(this.elements.display.duration)&&this.config.invertTime;controls.updateTimeDisplay.call(this,this.elements.display.currentTime,t?this.duration-this.currentTime:this.currentTime,t),e&&"timeupdate"===e.type&&this.media.seeking||controls.updateProgress.call(this,e)},durationUpdate(){if(!this.supported.ui||!this.config.invertTime&&this.currentTime)return;if(this.duration>=2**32)return toggleHidden(this.elements.display.currentTime,!0),void toggleHidden(this.elements.progress,!0);is.element(this.elements.inputs.seek)&&this.elements.inputs.seek.setAttribute("aria-valuemax",this.duration);const e=is.element(this.elements.display.duration);!e&&this.config.displayDuration&&this.paused&&controls.updateTimeDisplay.call(this,this.elements.display.currentTime,this.duration),e&&controls.updateTimeDisplay.call(this,this.elements.display.duration,this.duration),this.config.markers.enabled&&controls.setMarkers.call(this),controls.updateSeekTooltip.call(this)},toggleMenuButton(e,t){toggleHidden(this.elements.settings.buttons[e],!t)},updateSetting(e,t,i){const s=this.elements.settings.panels[e];let n=null,r=t;if("captions"===e)n=this.currentTrack;else{if(n=is.empty(i)?this[e]:i,is.empty(n)&&(n=this.config[e].default),!is.empty(this.options[e])&&!this.options[e].includes(n))return void this.debug.warn(`Unsupported value of '${n}' for ${e}`);if(!this.config[e].options.includes(n))return void this.debug.warn(`Disabled value of '${n}' for ${e}`)}if(is.element(r)||(r=s&&s.querySelector('[role="menu"]')),!is.element(r))return;this.elements.settings.buttons[e].querySelector(`.${this.config.classNames.menu.value}`).innerHTML=controls.getLabel.call(this,e,n);const a=r&&r.querySelector(`[value="${n}"]`);is.element(a)&&(a.checked=!0)},getLabel(e,t){switch(e){case"speed":return 1===t?i18n.get("normal",this.config):`${t}&times;`;case"quality":if(is.number(t)){const e=i18n.get(`qualityLabel.${t}`,this.config);return e.length?e:`${t}p`}return toTitleCase(t);case"captions":return captions.getLabel.call(this);default:return null}},setQualityMenu(e){if(!is.element(this.elements.settings.panels.quality))return;const t="quality",i=this.elements.settings.panels.quality.querySelector('[role="menu"]');is.array(e)&&(this.options.quality=dedupe(e).filter(e=>this.config.quality.options.includes(e)));const s=!is.empty(this.options.quality)&&this.options.quality.length>1;if(controls.toggleMenuButton.call(this,t,s),emptyElement(i),controls.checkMenu.call(this),!s)return;const n=e=>{const t=i18n.get(`qualityBadge.${e}`,this.config);return t.length?controls.createBadge.call(this,t):null};this.options.quality.sort((e,t)=>{const i=this.config.quality.options;return i.indexOf(e)>i.indexOf(t)?1:-1}).forEach(e=>{controls.createMenuItem.call(this,{value:e,list:i,type:t,title:controls.getLabel.call(this,"quality",e),badge:n(e)})}),controls.updateSetting.call(this,t,i)},setCaptionsMenu(){if(!is.element(this.elements.settings.panels.captions))return;const e="captions",t=this.elements.settings.panels.captions.querySelector('[role="menu"]'),i=captions.getTracks.call(this),s=Boolean(i.length);if(controls.toggleMenuButton.call(this,e,s),emptyElement(t),controls.checkMenu.call(this),!s)return;const n=i.map((e,i)=>({value:i,checked:this.captions.toggled&&this.currentTrack===i,title:captions.getLabel.call(this,e),badge:e.language&&controls.createBadge.call(this,e.language.toUpperCase()),list:t,type:"language"}));n.unshift({value:-1,checked:!this.captions.toggled,title:i18n.get("disabled",this.config),list:t,type:"language"}),n.forEach(controls.createMenuItem.bind(this)),controls.updateSetting.call(this,e,t)},setSpeedMenu(){if(!is.element(this.elements.settings.panels.speed))return;const e="speed",t=this.elements.settings.panels.speed.querySelector('[role="menu"]');this.options.speed=this.options.speed.filter(e=>e>=this.minimumSpeed&&e<=this.maximumSpeed);const i=!is.empty(this.options.speed)&&this.options.speed.length>1;controls.toggleMenuButton.call(this,e,i),emptyElement(t),controls.checkMenu.call(this),i&&(this.options.speed.forEach(i=>{controls.createMenuItem.call(this,{value:i,list:t,type:e,title:controls.getLabel.call(this,"speed",i)})}),controls.updateSetting.call(this,e,t))},checkMenu(){const{buttons:e}=this.elements.settings,t=!is.empty(e)&&Object.values(e).some(e=>!e.hidden);toggleHidden(this.elements.settings.menu,!t)},focusFirstMenuItem(e,t=!1){if(this.elements.settings.popup.hidden)return;let i=e;is.element(i)||(i=Object.values(this.elements.settings.panels).find(e=>!e.hidden));const s=i.querySelector('[role^="menuitem"]');setFocus.call(this,s,t)},toggleMenu(e){const{popup:t}=this.elements.settings,i=this.elements.buttons.settings;if(!is.element(t)||!is.element(i))return;const{hidden:s}=t;let n=s;if(is.boolean(e))n=e;else if(is.keyboardEvent(e)&&"Escape"===e.key)n=!1;else if(is.event(e)){const s=is.function(e.composedPath)?e.composedPath()[0]:e.target,r=t.contains(s);if(r||!r&&e.target!==i&&n)return}i.setAttribute("aria-expanded",n),toggleHidden(t,!n),toggleClass(this.elements.container,this.config.classNames.menu.open,n),n&&is.keyboardEvent(e)?controls.focusFirstMenuItem.call(this,null,!0):n||s||setFocus.call(this,i,is.keyboardEvent(e))},getMenuSize(e){const t=e.cloneNode(!0);t.style.position="absolute",t.style.opacity=0,t.removeAttribute("hidden"),e.parentNode.appendChild(t);const i=t.scrollWidth,s=t.scrollHeight;return removeElement(t),{width:i,height:s}},showMenuPanel(e="",t=!1){const i=this.elements.container.querySelector(`#plyr-settings-${this.id}-${e}`);if(!is.element(i))return;const s=i.parentNode,n=Array.from(s.children).find(e=>!e.hidden);if(support.transitions&&!support.reducedMotion){s.style.width=`${n.scrollWidth}px`,s.style.height=`${n.scrollHeight}px`;const e=controls.getMenuSize.call(this,i),t=e=>{e.target===s&&["width","height"].includes(e.propertyName)&&(s.style.width="",s.style.height="",off.call(this,s,transitionEndEvent,t))};on.call(this,s,transitionEndEvent,t),s.style.width=`${e.width}px`,s.style.height=`${e.height}px`}toggleHidden(n,!0),toggleHidden(i,!1),controls.focusFirstMenuItem.call(this,i,t)},setDownloadUrl(){const e=this.elements.buttons.download;is.element(e)&&e.setAttribute("href",this.download)},create(e){const{bindMenuItemShortcuts:t,createButton:i,createProgress:s,createRange:n,createTime:r,setQualityMenu:a,setSpeedMenu:o,showMenuPanel:l}=controls;this.elements.controls=null,is.array(this.config.controls)&&this.config.controls.includes("play-large")&&this.elements.container.appendChild(i.call(this,"play-large"));const c=createElement("div",getAttributesFromSelector(this.config.selectors.controls.wrapper));this.elements.controls=c;const u={class:"plyr__controls__item"};return dedupe(is.array(this.config.controls)?this.config.controls:[]).forEach(a=>{if("restart"===a&&c.appendChild(i.call(this,"restart",u)),"rewind"===a&&c.appendChild(i.call(this,"rewind",u)),"play"===a&&c.appendChild(i.call(this,"play",u)),"fast-forward"===a&&c.appendChild(i.call(this,"fast-forward",u)),"progress"===a){const t=createElement("div",{class:`${u.class} plyr__progress__container`}),i=createElement("div",getAttributesFromSelector(this.config.selectors.progress));if(i.appendChild(n.call(this,"seek",{id:`plyr-seek-${e.id}`})),i.appendChild(s.call(this,"buffer")),this.config.tooltips.seek){const e=createElement("span",{class:this.config.classNames.tooltip},"00:00");i.appendChild(e),this.elements.display.seekTooltip=e}this.elements.progress=i,t.appendChild(this.elements.progress),c.appendChild(t)}if("current-time"===a&&c.appendChild(r.call(this,"currentTime",u)),"duration"===a&&c.appendChild(r.call(this,"duration",u)),"mute"===a||"volume"===a){let{volume:t}=this.elements;if(is.element(t)&&c.contains(t)||(t=createElement("div",extend({},u,{class:`${u.class} plyr__volume`.trim()})),this.elements.volume=t,c.appendChild(t)),"mute"===a&&t.appendChild(i.call(this,"mute")),"volume"===a&&!browser.isIos&&!browser.isIPadOS){const i={max:1,step:.05,value:this.config.volume};t.appendChild(n.call(this,"volume",extend(i,{id:`plyr-volume-${e.id}`})))}}if("captions"===a&&c.appendChild(i.call(this,"captions",u)),"settings"===a&&!is.empty(this.config.settings)){const s=createElement("div",extend({},u,{class:`${u.class} plyr__menu`.trim(),hidden:""}));s.appendChild(i.call(this,"settings",{"aria-haspopup":!0,"aria-controls":`plyr-settings-${e.id}`,"aria-expanded":!1}));const n=createElement("div",{class:"plyr__menu__container",id:`plyr-settings-${e.id}`,hidden:""}),r=createElement("div"),a=createElement("div",{id:`plyr-settings-${e.id}-home`}),o=createElement("div",{role:"menu"});a.appendChild(o),r.appendChild(a),this.elements.settings.panels.home=a,this.config.settings.forEach(i=>{const s=createElement("button",extend(getAttributesFromSelector(this.config.selectors.buttons.settings),{type:"button",class:`${this.config.classNames.control} ${this.config.classNames.control}--forward`,role:"menuitem","aria-haspopup":!0,hidden:""}));t.call(this,s,i),on.call(this,s,"click",()=>{l.call(this,i,!1)});const n=createElement("span",null,i18n.get(i,this.config)),a=createElement("span",{class:this.config.classNames.menu.value});a.innerHTML=e[i],n.appendChild(a),s.appendChild(n),o.appendChild(s);const c=createElement("div",{id:`plyr-settings-${e.id}-${i}`,hidden:""}),u=createElement("button",{type:"button",class:`${this.config.classNames.control} ${this.config.classNames.control}--back`});u.appendChild(createElement("span",{"aria-hidden":!0},i18n.get(i,this.config))),u.appendChild(createElement("span",{class:this.config.classNames.hidden},i18n.get("menuBack",this.config))),on.call(this,c,"keydown",e=>{"ArrowLeft"===e.key&&(e.preventDefault(),e.stopPropagation(),l.call(this,"home",!0))},!1),on.call(this,u,"click",()=>{l.call(this,"home",!1)}),c.appendChild(u),c.appendChild(createElement("div",{role:"menu"})),r.appendChild(c),this.elements.settings.buttons[i]=s,this.elements.settings.panels[i]=c}),n.appendChild(r),s.appendChild(n),c.appendChild(s),this.elements.settings.popup=n,this.elements.settings.menu=s}if("pip"===a&&support.pip&&c.appendChild(i.call(this,"pip",u)),"airplay"===a&&support.airplay&&c.appendChild(i.call(this,"airplay",u)),"download"===a){const e=extend({},u,{element:"a",href:this.download,target:"_blank"});this.isHTML5&&(e.download="");const{download:t}=this.config.urls;!is.url(t)&&this.isEmbed&&extend(e,{icon:`logo-${this.provider}`,label:this.provider}),c.appendChild(i.call(this,"download",e))}"fullscreen"===a&&c.appendChild(i.call(this,"fullscreen",u))}),this.isHTML5&&a.call(this,html5.getQualityOptions.call(this)),o.call(this),c},inject(){if(this.config.loadSprite){const e=controls.getIconUrl.call(this);e.cors&&loadSprite(e.url,"sprite-plyr")}this.id=Math.floor(1e4*Math.random());let e=null;this.elements.controls=null;const t={id:this.id,seektime:this.config.seekTime,title:this.config.title};let i=!0;is.function(this.config.controls)&&(this.config.controls=this.config.controls.call(this,t)),this.config.controls||(this.config.controls=[]),is.element(this.config.controls)||is.string(this.config.controls)?e=this.config.controls:(e=controls.create.call(this,{id:this.id,seektime:this.config.seekTime,speed:this.speed,quality:this.quality,captions:captions.getLabel.call(this)}),i=!1);let s;i&&is.string(this.config.controls)&&(e=(e=>{let i=e;return Object.entries(t).forEach(([e,t])=>{i=replaceAll(i,`{${e}}`,t)}),i})(e)),is.string(this.config.selectors.controls.container)&&(s=document.querySelector(this.config.selectors.controls.container)),is.element(s)||(s=this.elements.container);if(s[is.element(e)?"insertAdjacentElement":"insertAdjacentHTML"]("afterbegin",e),is.element(this.elements.controls)||controls.findElements.call(this),!is.empty(this.elements.buttons)){const e=e=>{const t=this.config.classNames.controlPressed;e.setAttribute("aria-pressed","false"),Object.defineProperty(e,"pressed",{configurable:!0,enumerable:!0,get:()=>hasClass(e,t),set(i=!1){toggleClass(e,t,i),e.setAttribute("aria-pressed",i?"true":"false")}})};Object.values(this.elements.buttons).filter(Boolean).forEach(t=>{is.array(t)||is.nodeList(t)?Array.from(t).filter(Boolean).forEach(e):e(t)})}if(browser.isEdge&&repaint(s),this.config.tooltips.controls){const{classNames:e,selectors:t}=this.config,i=`${t.controls.wrapper} ${t.labels} .${e.hidden}`,s=getElements.call(this,i);Array.from(s).forEach(e=>{toggleClass(e,this.config.classNames.hidden,!1),toggleClass(e,this.config.classNames.tooltip,!0)})}},setMediaMetadata(){try{"mediaSession"in navigator&&(navigator.mediaSession.metadata=new window.MediaMetadata({title:this.config.mediaMetadata.title,artist:this.config.mediaMetadata.artist,album:this.config.mediaMetadata.album,artwork:this.config.mediaMetadata.artwork}))}catch{}},setMarkers(){var e,t;if(!this.duration||this.elements.markers)return;const i=null===(e=this.config.markers)||void 0===e||null===(t=e.points)||void 0===t?void 0:t.filter(({time:e})=>e>0&&e<this.duration);if(null==i||!i.length)return;const s=document.createDocumentFragment(),n=document.createDocumentFragment();let r=null;const a=`${this.config.classNames.tooltip}--visible`,o=e=>toggleClass(r,a,e);i.forEach(e=>{const t=createElement("span",{class:this.config.classNames.marker},""),i=e.time/this.duration*100+"%";r&&(t.addEventListener("mouseenter",()=>{e.label||(r.style.left=i,r.innerHTML=e.label,o(!0))}),t.addEventListener("mouseleave",()=>{o(!1)})),t.addEventListener("click",()=>{this.currentTime=e.time}),t.style.left=i,n.appendChild(t)}),s.appendChild(n),this.config.tooltips.seek||(r=createElement("span",{class:this.config.classNames.tooltip},""),s.appendChild(r)),this.elements.markers={points:n,tip:r},this.elements.progress.appendChild(s)}};function parseUrl(e,t=!0){let i=e;if(t){const e=document.createElement("a");e.href=i,i=e.href}try{return new URL(i)}catch{return null}}function buildUrlParams(e){const t=new URLSearchParams;return is.object(e)&&Object.entries(e).forEach(([e,i])=>{t.set(e,i)}),t}const captions={setup(){if(!this.supported.ui)return;if(!this.isVideo||this.isYouTube||this.isHTML5&&!support.textTracks)return void(is.array(this.config.controls)&&this.config.controls.includes("settings")&&this.config.settings.includes("captions")&&controls.setCaptionsMenu.call(this));if(is.element(this.elements.captions)||(this.elements.captions=createElement("div",getAttributesFromSelector(this.config.selectors.captions)),this.elements.captions.setAttribute("dir","auto"),insertAfter(this.elements.captions,this.elements.wrapper)),browser.isIE&&window.URL){const e=this.media.querySelectorAll("track");Array.from(e).forEach(e=>{const t=e.getAttribute("src"),i=parseUrl(t);null!==i&&i.hostname!==window.location.href.hostname&&["http:","https:"].includes(i.protocol)&&fetch(t,"blob").then(t=>{e.setAttribute("src",window.URL.createObjectURL(t))}).catch(()=>{removeElement(e)})})}const e=dedupe((navigator.languages||[navigator.language||navigator.userLanguage||"en"]).map(e=>e.split("-")[0]));let t=(this.storage.get("language")||this.captions.language||this.config.captions.language||"auto").toLowerCase();"auto"===t&&([t]=e);let i=this.storage.get("captions")||this.captions.active;if(is.boolean(i)||({active:i}=this.config.captions),Object.assign(this.captions,{toggled:!1,active:i,language:t,languages:e}),this.isHTML5){const e=this.config.captions.update?"addtrack removetrack":"removetrack";on.call(this,this.media.textTracks,e,captions.update.bind(this))}setTimeout(captions.update.bind(this),0)},update(){const e=captions.getTracks.call(this,!0),{active:t,language:i,meta:s,currentTrackNode:n}=this.captions,r=Boolean(e.find(e=>e.language===i));this.isHTML5&&this.isVideo&&e.filter(e=>!s.get(e)).forEach(e=>{this.debug.log("Track added",e),s.set(e,{default:"showing"===e.mode}),"showing"===e.mode&&(e.mode="hidden"),on.call(this,e,"cuechange",()=>captions.updateCues.call(this))}),(r&&this.language!==i||!e.includes(n))&&(captions.setLanguage.call(this,i),captions.toggle.call(this,t&&r)),this.elements&&toggleClass(this.elements.container,this.config.classNames.captions.enabled,!is.empty(e)),is.array(this.config.controls)&&this.config.controls.includes("settings")&&this.config.settings.includes("captions")&&controls.setCaptionsMenu.call(this)},toggle(e,t=!0){if(!this.supported.ui)return;const{toggled:i}=this.captions,s=this.config.classNames.captions.active,n=is.nullOrUndefined(e)?!i:e;if(n!==i){if(t||(this.captions.active=n,this.storage.set({captions:n})),!this.language&&n&&!t){const e=captions.getTracks.call(this),t=captions.findTrack.call(this,[this.captions.language,...this.captions.languages],!0);return this.captions.language=t.language,void captions.set.call(this,e.indexOf(t))}this.elements.buttons.captions&&(this.elements.buttons.captions.pressed=n),toggleClass(this.elements.container,s,n),this.captions.toggled=n,controls.updateSetting.call(this,"captions"),triggerEvent.call(this,this.media,n?"captionsenabled":"captionsdisabled")}setTimeout(()=>{n&&this.captions.toggled&&(this.captions.currentTrackNode.mode="hidden")})},set(e,t=!0){const i=captions.getTracks.call(this);if(-1!==e)if(is.number(e))if(e in i){if(this.captions.currentTrack!==e){this.captions.currentTrack=e;const s=i[e],{language:n}=s||{};this.captions.currentTrackNode=s,controls.updateSetting.call(this,"captions"),t||(this.captions.language=n,this.storage.set({language:n})),this.isVimeo&&this.embed.enableTextTrack(n,null,!1),triggerEvent.call(this,this.media,"languagechange")}captions.toggle.call(this,!0,t),this.isHTML5&&this.isVideo&&captions.updateCues.call(this)}else this.debug.warn("Track not found",e);else this.debug.warn("Invalid caption argument",e);else captions.toggle.call(this,!1,t)},setLanguage(e,t=!0){if(!is.string(e))return void this.debug.warn("Invalid language argument",e);const i=e.toLowerCase();this.captions.language=i;const s=captions.getTracks.call(this),n=captions.findTrack.call(this,[i]);captions.set.call(this,s.indexOf(n),t)},getTracks(e=!1){return Array.from((this.media||{}).textTracks||[]).filter(t=>!this.isHTML5||e||this.captions.meta.has(t)).filter(e=>["captions","subtitles"].includes(e.kind))},findTrack(e,t=!1){const i=captions.getTracks.call(this),s=e=>Number((this.captions.meta.get(e)||{}).default),n=Array.from(i).sort((e,t)=>s(t)-s(e));let r;return e.every(e=>(r=n.find(t=>t.language===e),!r)),r||(t?n[0]:void 0)},getCurrentTrack(){return captions.getTracks.call(this)[this.currentTrack]},getLabel(e){let t=e;return!is.track(t)&&support.textTracks&&this.captions.toggled&&(t=captions.getCurrentTrack.call(this)),is.track(t)?is.empty(t.label)?is.empty(t.language)?i18n.get("enabled",this.config):e.language.toUpperCase():t.label:i18n.get("disabled",this.config)},updateCues(e){if(!this.supported.ui)return;if(!is.element(this.elements.captions))return void this.debug.warn("No captions element to render to");if(!is.nullOrUndefined(e)&&!Array.isArray(e))return void this.debug.warn("updateCues: Invalid input",e);let t=e;if(!t){const e=captions.getCurrentTrack.call(this);t=Array.from((e||{}).activeCues||[]).map(e=>e.getCueAsHTML()).map(getHTML)}const i=t.map(e=>e.trim()).join("\n");if(i!==this.elements.captions.innerHTML){emptyElement(this.elements.captions);const e=createElement("span",getAttributesFromSelector(this.config.selectors.caption));e.innerHTML=i,this.elements.captions.appendChild(e),triggerEvent.call(this,this.media,"cuechange")}}},defaults={enabled:!0,title:"",debug:!1,autoplay:!1,autopause:!0,playsinline:!0,seekTime:10,volume:1,muted:!1,duration:null,displayDuration:!0,invertTime:!0,toggleInvert:!0,ratio:null,clickToPlay:!0,hideControls:!0,resetOnEnd:!1,disableContextMenu:!0,loadSprite:!0,iconPrefix:"plyr",iconUrl:"https://cdn.plyr.io/3.8.4/plyr.svg",blankVideo:"https://cdn.plyr.io/static/blank.mp4",quality:{default:576,options:[4320,2880,2160,1440,1080,720,576,480,360,240],forced:!1,onChange:null},loop:{active:!1},speed:{selected:1,options:[.5,.75,1,1.25,1.5,1.75,2,4]},keyboard:{focused:!0,global:!1},tooltips:{controls:!1,seek:!0},captions:{active:!1,language:"auto",update:!1},fullscreen:{enabled:!0,fallback:!0,iosNative:!1},storage:{enabled:!0,key:"plyr"},controls:["play-large","play","progress","current-time","mute","volume","captions","settings","pip","airplay","fullscreen"],settings:["captions","quality","speed"],i18n:{restart:"Restart",rewind:"Rewind {seektime}s",play:"Play",pause:"Pause",fastForward:"Forward {seektime}s",seek:"Seek",seekLabel:"{currentTime} of {duration}",played:"Played",buffered:"Buffered",currentTime:"Current time",duration:"Duration",volume:"Volume",mute:"Mute",unmute:"Unmute",enableCaptions:"Enable captions",disableCaptions:"Disable captions",download:"Download",enterFullscreen:"Enter fullscreen",exitFullscreen:"Exit fullscreen",frameTitle:"Player for {title}",captions:"Captions",settings:"Settings",pip:"PIP",menuBack:"Go back to previous menu",speed:"Speed",normal:"Normal",quality:"Quality",loop:"Loop",start:"Start",end:"End",all:"All",reset:"Reset",disabled:"Disabled",enabled:"Enabled",advertisement:"Ad",qualityBadge:{2160:"4K",1440:"HD",1080:"HD",720:"HD",576:"SD",480:"SD"}},urls:{download:null,vimeo:{sdk:"https://player.vimeo.com/api/player.js",iframe:"https://player.vimeo.com/video/{0}?{1}",api:"https://vimeo.com/api/oembed.json?url={0}"},youtube:{sdk:"https://www.youtube.com/iframe_api",api:"https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}"},googleIMA:{sdk:"https://imasdk.googleapis.com/js/sdkloader/ima3.js"}},listeners:{seek:null,play:null,pause:null,restart:null,rewind:null,fastForward:null,mute:null,volume:null,captions:null,download:null,fullscreen:null,pip:null,airplay:null,speed:null,quality:null,loop:null,language:null},events:["ended","progress","stalled","playing","waiting","canplay","canplaythrough","loadstart","loadeddata","loadedmetadata","timeupdate","volumechange","play","pause","error","seeking","seeked","emptied","ratechange","cuechange","download","enterfullscreen","exitfullscreen","captionsenabled","captionsdisabled","languagechange","controlshidden","controlsshown","ready","statechange","qualitychange","adsloaded","adscontentpause","adscontentresume","adstarted","adsmidpoint","adscomplete","adsallcomplete","adsimpression","adsclick"],selectors:{editable:"input, textarea, select, [contenteditable]",container:".plyr",controls:{container:null,wrapper:".plyr__controls"},labels:"[data-plyr]",buttons:{play:'[data-plyr="play"]',pause:'[data-plyr="pause"]',restart:'[data-plyr="restart"]',rewind:'[data-plyr="rewind"]',fastForward:'[data-plyr="fast-forward"]',mute:'[data-plyr="mute"]',captions:'[data-plyr="captions"]',download:'[data-plyr="download"]',fullscreen:'[data-plyr="fullscreen"]',pip:'[data-plyr="pip"]',airplay:'[data-plyr="airplay"]',settings:'[data-plyr="settings"]',loop:'[data-plyr="loop"]'},inputs:{seek:'[data-plyr="seek"]',volume:'[data-plyr="volume"]',speed:'[data-plyr="speed"]',language:'[data-plyr="language"]',quality:'[data-plyr="quality"]'},display:{currentTime:".plyr__time--current",duration:".plyr__time--duration",buffer:".plyr__progress__buffer",loop:".plyr__progress__loop",volume:".plyr__volume--display"},progress:".plyr__progress",captions:".plyr__captions",caption:".plyr__caption"},classNames:{type:"plyr--{0}",provider:"plyr--{0}",video:"plyr__video-wrapper",embed:"plyr__video-embed",videoFixedRatio:"plyr__video-wrapper--fixed-ratio",embedContainer:"plyr__video-embed__container",poster:"plyr__poster",posterEnabled:"plyr__poster-enabled",ads:"plyr__ads",control:"plyr__control",controlPressed:"plyr__control--pressed",playing:"plyr--playing",paused:"plyr--paused",stopped:"plyr--stopped",loading:"plyr--loading",hover:"plyr--hover",tooltip:"plyr__tooltip",cues:"plyr__cues",marker:"plyr__progress__marker",hidden:"plyr__sr-only",hideControls:"plyr--hide-controls",isTouch:"plyr--is-touch",uiSupported:"plyr--full-ui",noTransition:"plyr--no-transition",display:{time:"plyr__time"},menu:{value:"plyr__menu__value",badge:"plyr__badge",open:"plyr--menu-open"},captions:{enabled:"plyr--captions-enabled",active:"plyr--captions-active"},fullscreen:{enabled:"plyr--fullscreen-enabled",fallback:"plyr--fullscreen-fallback"},pip:{supported:"plyr--pip-supported",active:"plyr--pip-active"},airplay:{supported:"plyr--airplay-supported",active:"plyr--airplay-active"},previewThumbnails:{thumbContainer:"plyr__preview-thumb",thumbContainerShown:"plyr__preview-thumb--is-shown",imageContainer:"plyr__preview-thumb__image-container",timeContainer:"plyr__preview-thumb__time-container",scrubbingContainer:"plyr__preview-scrubbing",scrubbingContainerShown:"plyr__preview-scrubbing--is-shown"}},attributes:{embed:{provider:"data-plyr-provider",id:"data-plyr-embed-id",hash:"data-plyr-embed-hash"}},ads:{enabled:!1,publisherId:"",tagUrl:""},previewThumbnails:{enabled:!1,src:"",withCredentials:!1},vimeo:{byline:!1,portrait:!1,title:!1,speed:!0,transparent:!1,customControls:!0,referrerPolicy:null,premium:!1},youtube:{rel:0,showinfo:0,iv_load_policy:3,modestbranding:1,customControls:!0,noCookie:!1},mediaMetadata:{title:"",artist:"",album:"",artwork:[]},markers:{enabled:!1,points:[]}},pip={active:"picture-in-picture",inactive:"inline"},providers={html5:"html5",youtube:"youtube",vimeo:"vimeo"},types={audio:"audio",video:"video"};function getProviderByUrl(e){return/^(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtube-nocookie\.com|youtu\.?be)\/.+$/.test(e)?providers.youtube:/^https?:\/\/player.vimeo.com\/video\/\d{0,9}(?=\b|\/)/.test(e)?providers.vimeo:null}function noop(){}class Console{constructor(e=!1){this.enabled=window.console&&e,this.enabled&&this.log("Debugging enabled")}get log(){return this.enabled?Function.prototype.bind.call(console.log,console):noop}get warn(){return this.enabled?Function.prototype.bind.call(console.warn,console):noop}get error(){return this.enabled?Function.prototype.bind.call(console.error,console):noop}}class Fullscreen{constructor(e){_defineProperty$1(this,"onChange",()=>{if(!this.supported)return;const e=this.player.elements.buttons.fullscreen;is.element(e)&&(e.pressed=this.active);const t=this.target===this.player.media?this.target:this.player.elements.container;triggerEvent.call(this.player,t,this.active?"enterfullscreen":"exitfullscreen",!0)}),_defineProperty$1(this,"toggleFallback",(e=!1)=>{var t,i;e?this.scrollPosition={x:null!==(t=window.scrollX)&&void 0!==t?t:0,y:null!==(i=window.scrollY)&&void 0!==i?i:0}:window.scrollTo(this.scrollPosition.x,this.scrollPosition.y);if(document.body.style.overflow=e?"hidden":"",toggleClass(this.target,this.player.config.classNames.fullscreen.fallback,e),browser.isIos){let t=document.head.querySelector('meta[name="viewport"]');const i="viewport-fit=cover";t||(t=document.createElement("meta"),t.setAttribute("name","viewport"));const s=is.string(t.content)&&t.content.includes(i);e?(this.cleanupViewport=!s,s||(t.content+=`,${i}`)):this.cleanupViewport&&(t.content=t.content.split(",").filter(e=>e.trim()!==i).join(","))}this.onChange()}),_defineProperty$1(this,"trapFocus",e=>{if(browser.isIos||browser.isIPadOS||!this.active||"Tab"!==e.key)return;const t=document.activeElement,i=getElements.call(this.player,"a[href], button:not(:disabled), input:not(:disabled), [tabindex]"),[s]=i,n=i[i.length-1];t!==n||e.shiftKey?t===s&&e.shiftKey&&(n.focus(),e.preventDefault()):(s.focus(),e.preventDefault())}),_defineProperty$1(this,"update",()=>{if(this.supported){let e;e=this.forceFallback?"Fallback (forced)":Fullscreen.nativeSupported?"Native":"Fallback",this.player.debug.log(`${e} fullscreen enabled`)}else this.player.debug.log("Fullscreen not supported and fallback disabled");toggleClass(this.player.elements.container,this.player.config.classNames.fullscreen.enabled,this.supported)}),_defineProperty$1(this,"enter",()=>{this.supported&&(browser.isIos&&this.player.config.fullscreen.iosNative?this.player.isVimeo?this.player.embed.requestFullscreen():this.target.webkitEnterFullscreen():!Fullscreen.nativeSupported||this.forceFallback?this.toggleFallback(!0):this.prefix?is.empty(this.prefix)||this.target[`${this.prefix}Request${this.property}`]():this.target.requestFullscreen({navigationUI:"hide"}))}),_defineProperty$1(this,"exit",()=>{if(this.supported)if(browser.isIos&&this.player.config.fullscreen.iosNative)this.player.isVimeo?this.player.embed.exitFullscreen():this.target.webkitEnterFullscreen(),silencePromise(this.player.play());else if(!Fullscreen.nativeSupported||this.forceFallback)this.toggleFallback(!1);else if(this.prefix){if(!is.empty(this.prefix)){const e="moz"===this.prefix?"Cancel":"Exit";document[`${this.prefix}${e}${this.property}`]()}}else(document.cancelFullScreen||document.exitFullscreen).call(document)}),_defineProperty$1(this,"toggle",()=>{this.active?this.exit():this.enter()}),this.player=e,this.prefix=Fullscreen.prefix,this.property=Fullscreen.property,this.scrollPosition={x:0,y:0},this.forceFallback="force"===e.config.fullscreen.fallback,this.player.elements.fullscreen=e.config.fullscreen.container&&closest$1(this.player.elements.container,e.config.fullscreen.container),on.call(this.player,document,"ms"===this.prefix?"MSFullscreenChange":`${this.prefix}fullscreenchange`,()=>{this.onChange()}),on.call(this.player,this.player.elements.container,"dblclick",e=>{is.element(this.player.elements.controls)&&this.player.elements.controls.contains(e.target)||this.player.listeners.proxy(e,this.toggle,"fullscreen")}),on.call(this,this.player.elements.container,"keydown",e=>this.trapFocus(e)),this.update()}static get nativeSupported(){return!!(document.fullscreenEnabled||document.webkitFullscreenEnabled||document.mozFullScreenEnabled||document.msFullscreenEnabled)}get useNative(){return Fullscreen.nativeSupported&&!this.forceFallback}static get prefix(){if(is.function(document.exitFullscreen))return"";let e="";return["webkit","moz","ms"].some(t=>!(!is.function(document[`${t}ExitFullscreen`])&&!is.function(document[`${t}CancelFullScreen`]))&&(e=t,!0)),e}static get property(){return"moz"===this.prefix?"FullScreen":"Fullscreen"}get supported(){return[this.player.config.fullscreen.enabled,this.player.isVideo,Fullscreen.nativeSupported||this.player.config.fullscreen.fallback,!this.player.isYouTube||Fullscreen.nativeSupported||!browser.isIos||this.player.config.playsinline&&!this.player.config.fullscreen.iosNative].every(Boolean)}get active(){if(!this.supported)return!1;if(!Fullscreen.nativeSupported||this.forceFallback)return hasClass(this.target,this.player.config.classNames.fullscreen.fallback);const e=this.prefix?this.target.getRootNode()[`${this.prefix}${this.property}Element`]:this.target.getRootNode().fullscreenElement;return e&&e.shadowRoot?e===this.target.getRootNode().host:e===this.target}get target(){var e;return browser.isIos&&this.player.config.fullscreen.iosNative?this.player.media:null!==(e=this.player.elements.fullscreen)&&void 0!==e?e:this.player.elements.container}}function loadImage(e,t=1){return new Promise((i,s)=>{const n=new Image,r=()=>{delete n.onload,delete n.onerror,(n.naturalWidth>=t?i:s)(n)};Object.assign(n,{onload:r,onerror:r,src:e})})}const ui={addStyleHook(){toggleClass(this.elements.container,this.config.selectors.container.replace(".",""),!0),toggleClass(this.elements.container,this.config.classNames.uiSupported,this.supported.ui)},toggleNativeControls(e=!1){e&&this.isHTML5?this.media.setAttribute("controls",""):this.media.removeAttribute("controls")},build(){if(this.listeners.media(),!this.supported.ui)return this.debug.warn(`Basic support only for ${this.provider} ${this.type}`),void ui.toggleNativeControls.call(this,!0);is.element(this.elements.controls)||(controls.inject.call(this),this.listeners.controls()),ui.toggleNativeControls.call(this),this.isHTML5&&captions.setup.call(this),this.volume=null,this.muted=null,this.loop=null,this.quality=null,this.speed=null,controls.updateVolume.call(this),controls.timeUpdate.call(this),controls.durationUpdate.call(this),ui.checkPlaying.call(this),toggleClass(this.elements.container,this.config.classNames.pip.supported,support.pip&&this.isHTML5&&this.isVideo),toggleClass(this.elements.container,this.config.classNames.airplay.supported,support.airplay&&this.isHTML5),toggleClass(this.elements.container,this.config.classNames.isTouch,this.touch),this.ready=!0,setTimeout(()=>{triggerEvent.call(this,this.media,"ready")},0),ui.setTitle.call(this),this.poster&&ui.setPoster.call(this,this.poster,!1).catch(()=>{}),this.config.duration&&controls.durationUpdate.call(this),this.config.mediaMetadata&&controls.setMediaMetadata.call(this)},setTitle(){let e=i18n.get("play",this.config);if(is.string(this.config.title)&&!is.empty(this.config.title)&&(e+=`, ${this.config.title}`),Array.from(this.elements.buttons.play||[]).forEach(t=>{t.setAttribute("aria-label",e)}),this.isEmbed){const e=getElement.call(this,"iframe");if(!is.element(e))return;const t=is.empty(this.config.title)?"video":this.config.title,i=i18n.get("frameTitle",this.config);e.setAttribute("title",i.replace("{title}",t))}},togglePoster(e){toggleClass(this.elements.container,this.config.classNames.posterEnabled,e)},setPoster(e,t=!0){return t&&this.poster?Promise.reject(new Error("Poster already set")):(this.media.setAttribute("data-poster",e),this.elements.poster.removeAttribute("hidden"),ready.call(this).then(()=>loadImage(e)).catch(t=>{throw e===this.poster&&ui.togglePoster.call(this,!1),t}).then(()=>{if(e!==this.poster)throw new Error("setPoster cancelled by later call to setPoster")}).then(()=>(Object.assign(this.elements.poster.style,{backgroundImage:`url('${e}')`,backgroundSize:""}),ui.togglePoster.call(this,!0),e)))},checkPlaying(e){toggleClass(this.elements.container,this.config.classNames.playing,this.playing),toggleClass(this.elements.container,this.config.classNames.paused,this.paused),toggleClass(this.elements.container,this.config.classNames.stopped,this.stopped),Array.from(this.elements.buttons.play||[]).forEach(e=>{Object.assign(e,{pressed:this.playing}),e.setAttribute("aria-label",i18n.get(this.playing?"pause":"play",this.config))}),is.event(e)&&"timeupdate"===e.type||ui.toggleControls.call(this)},checkLoading(e){this.loading=["stalled","waiting"].includes(e.type),clearTimeout(this.timers.loading),this.timers.loading=setTimeout(()=>{toggleClass(this.elements.container,this.config.classNames.loading,this.loading),ui.toggleControls.call(this)},this.loading?250:0)},toggleControls(e){const{controls:t}=this.elements;if(t&&this.config.hideControls){const i=this.touch&&this.lastSeekTime+2e3>Date.now();this.toggleControls(Boolean(e||this.loading||this.paused||t.pressed||t.hover||i))}},migrateStyles(){Object.values({...this.media.style}).filter(e=>!is.empty(e)&&is.string(e)&&e.startsWith("--plyr")).forEach(e=>{this.elements.container.style.setProperty(e,this.media.style.getPropertyValue(e)),this.media.style.removeProperty(e)}),is.empty(this.media.style)&&this.media.removeAttribute("style")}};class Listeners{constructor(e){_defineProperty$1(this,"firstTouch",()=>{const{player:e}=this,{elements:t}=e;e.touch=!0,toggleClass(t.container,e.config.classNames.isTouch,!0)}),_defineProperty$1(this,"global",(e=!0)=>{const{player:t}=this;t.config.keyboard.global&&toggleListener.call(t,window,"keydown keyup",this.handleKey,e,!1),toggleListener.call(t,document.body,"click",this.toggleMenu,e),once.call(t,document.body,"touchstart",this.firstTouch)}),_defineProperty$1(this,"container",()=>{const{player:e}=this,{config:t,elements:i,timers:s}=e;!t.keyboard.global&&t.keyboard.focused&&on.call(e,i.container,"keydown keyup",this.handleKey,!1),on.call(e,i.container,"mousemove mouseleave touchstart touchmove enterfullscreen exitfullscreen",t=>{const{controls:n}=i;n&&"enterfullscreen"===t.type&&(n.pressed=!1,n.hover=!1);let r=0;["touchstart","touchmove","mousemove"].includes(t.type)&&(ui.toggleControls.call(e,!0),r=e.touch?3e3:2e3),clearTimeout(s.controls),s.controls=setTimeout(()=>ui.toggleControls.call(e,!1),r)});const n=()=>{if(!e.isVimeo||e.config.vimeo.premium)return;const t=i.wrapper,{active:s}=e.fullscreen,[n,r]=getAspectRatio.call(e),a=supportsCSS(`aspect-ratio: ${n} / ${r}`);if(!s)return void(a?(t.style.width=null,t.style.height=null):(t.style.maxWidth=null,t.style.margin=null));const[o,l]=getViewportSize(),c=o/l>n/r;a?(t.style.width=c?"auto":"100%",t.style.height=c?"100%":"auto"):(t.style.maxWidth=c?l/r*n+"px":null,t.style.margin=c?"0 auto":null)},r=()=>{clearTimeout(s.resized),s.resized=setTimeout(n,50)};on.call(e,i.container,"enterfullscreen exitfullscreen",t=>{const{target:s}=e.fullscreen;if(s!==i.container)return;if(!e.isEmbed&&is.empty(e.config.ratio))return;n();("enterfullscreen"===t.type?on:off).call(e,window,"resize",r)})}),_defineProperty$1(this,"media",()=>{const{player:e}=this,{elements:t}=e;if(on.call(e,e.media,"timeupdate seeking seeked",t=>controls.timeUpdate.call(e,t)),on.call(e,e.media,"durationchange loadeddata loadedmetadata",t=>controls.durationUpdate.call(e,t)),on.call(e,e.media,"ended",()=>{e.isHTML5&&e.isVideo&&e.config.resetOnEnd&&(e.restart(),e.pause())}),on.call(e,e.media,"progress playing seeking seeked",t=>controls.updateProgress.call(e,t)),on.call(e,e.media,"volumechange",t=>controls.updateVolume.call(e,t)),on.call(e,e.media,"playing play pause ended emptied timeupdate",t=>ui.checkPlaying.call(e,t)),on.call(e,e.media,"waiting canplay seeked playing",t=>ui.checkLoading.call(e,t)),e.supported.ui&&e.config.clickToPlay&&!e.isAudio){const i=getElement.call(e,`.${e.config.classNames.video}`);if(!is.element(i))return;on.call(e,t.container,"click",s=>{([t.container,i].includes(s.target)||i.contains(s.target))&&(e.touch&&e.config.hideControls||(e.ended?(this.proxy(s,e.restart,"restart"),this.proxy(s,()=>{silencePromise(e.play())},"play")):this.proxy(s,()=>{silencePromise(e.togglePlay())},"play")))})}e.supported.ui&&e.config.disableContextMenu&&on.call(e,t.wrapper,"contextmenu",e=>{e.preventDefault()},!1),on.call(e,e.media,"volumechange",()=>{e.storage.set({volume:e.volume,muted:e.muted})}),on.call(e,e.media,"ratechange",()=>{controls.updateSetting.call(e,"speed"),e.storage.set({speed:e.speed})}),on.call(e,e.media,"qualitychange",t=>{controls.updateSetting.call(e,"quality",null,t.detail.quality)}),on.call(e,e.media,"ready qualitychange",()=>{controls.setDownloadUrl.call(e)});const i=e.config.events.concat(["keyup","keydown"]).join(" ");on.call(e,e.media,i,i=>{let{detail:s={}}=i;"error"===i.type&&(s=e.media.error),triggerEvent.call(e,t.container,i.type,!0,s)})}),_defineProperty$1(this,"proxy",(e,t,i)=>{const{player:s}=this,n=s.config.listeners[i];let r=!0;is.function(n)&&(r=n.call(s,e)),!1!==r&&is.function(t)&&t.call(s,e)}),_defineProperty$1(this,"bind",(e,t,i,s,n=!0)=>{const{player:r}=this,a=r.config.listeners[s],o=is.function(a);on.call(r,e,t,e=>this.proxy(e,i,s),n&&!o)}),_defineProperty$1(this,"controls",()=>{const{player:e}=this,{elements:t}=e,i=browser.isIE?"change":"input";if(t.buttons.play&&Array.from(t.buttons.play).forEach(t=>{this.bind(t,"click",()=>{silencePromise(e.togglePlay())},"play")}),this.bind(t.buttons.restart,"click",e.restart,"restart"),this.bind(t.buttons.rewind,"click",()=>{e.lastSeekTime=Date.now(),e.rewind()},"rewind"),this.bind(t.buttons.fastForward,"click",()=>{e.lastSeekTime=Date.now(),e.forward()},"fastForward"),this.bind(t.buttons.mute,"click",()=>{e.muted=!e.muted},"mute"),this.bind(t.buttons.captions,"click",()=>e.toggleCaptions()),this.bind(t.buttons.download,"click",()=>{triggerEvent.call(e,e.media,"download")},"download"),this.bind(t.buttons.fullscreen,"click",()=>{e.fullscreen.toggle()},"fullscreen"),this.bind(t.buttons.pip,"click",()=>{e.pip="toggle"},"pip"),this.bind(t.buttons.airplay,"click",e.airplay,"airplay"),this.bind(t.buttons.settings,"click",t=>{t.stopPropagation(),t.preventDefault(),controls.toggleMenu.call(e,t)},null,!1),this.bind(t.buttons.settings,"keyup",t=>{[" ","Enter"].includes(t.key)&&("Enter"!==t.key?(t.preventDefault(),t.stopPropagation(),controls.toggleMenu.call(e,t)):controls.focusFirstMenuItem.call(e,null,!0))},null,!1),this.bind(t.settings.menu,"keydown",t=>{"Escape"===t.key&&controls.toggleMenu.call(e,t)}),this.bind(t.inputs.seek,"mousedown mousemove",e=>{const i=t.progress.getBoundingClientRect(),s=e.pageX-e.clientX,n=100/i.width*(e.pageX-i.left-s);e.currentTarget.setAttribute("seek-value",n)}),this.bind(t.inputs.seek,"mousedown mouseup keydown keyup touchstart touchend",t=>{const i=t.currentTarget,s="play-on-seeked";if(is.keyboardEvent(t)&&!["ArrowLeft","ArrowRight"].includes(t.key))return;e.lastSeekTime=Date.now();const n=i.hasAttribute(s),r=["mouseup","touchend","keyup"].includes(t.type);n&&r?(i.removeAttribute(s),silencePromise(e.play())):!r&&e.playing&&(i.setAttribute(s,""),e.pause())}),browser.isIos){const t=getElements.call(e,'input[type="range"]');Array.from(t).forEach(e=>this.bind(e,i,e=>repaint(e.target)))}this.bind(t.inputs.seek,i,t=>{const i=t.currentTarget;let s=i.getAttribute("seek-value");is.empty(s)&&(s=i.value),i.removeAttribute("seek-value"),e.currentTime=s/i.max*e.duration},"seek"),this.bind(t.progress,"mouseenter mouseleave mousemove",t=>controls.updateSeekTooltip.call(e,t)),this.bind(t.progress,"mousemove touchmove",t=>{const{previewThumbnails:i}=e;i&&i.loaded&&i.startMove(t)}),this.bind(t.progress,"mouseleave touchend click",()=>{const{previewThumbnails:t}=e;t&&t.loaded&&t.endMove(!1,!0)}),this.bind(t.progress,"mousedown touchstart",t=>{const{previewThumbnails:i}=e;i&&i.loaded&&i.startScrubbing(t)}),this.bind(t.progress,"mouseup touchend",t=>{const{previewThumbnails:i}=e;i&&i.loaded&&i.endScrubbing(t)}),browser.isWebKit&&Array.from(getElements.call(e,'input[type="range"]')).forEach(t=>{this.bind(t,"input",t=>controls.updateRangeFill.call(e,t.target))}),e.config.toggleInvert&&!is.element(t.display.duration)&&this.bind(t.display.currentTime,"click",()=>{0!==e.currentTime&&(e.config.invertTime=!e.config.invertTime,controls.timeUpdate.call(e))}),this.bind(t.inputs.volume,i,t=>{e.volume=t.target.value},"volume"),this.bind(t.controls,"mouseenter mouseleave",i=>{t.controls.hover=!e.touch&&"mouseenter"===i.type}),t.fullscreen&&Array.from(t.fullscreen.children).filter(e=>!e.contains(t.container)).forEach(i=>{this.bind(i,"mouseenter mouseleave",i=>{t.controls&&(t.controls.hover=!e.touch&&"mouseenter"===i.type)})}),this.bind(t.controls,"mousedown mouseup touchstart touchend touchcancel",e=>{t.controls.pressed=["mousedown","touchstart"].includes(e.type)}),this.bind(t.controls,"focusin",()=>{const{config:i,timers:s}=e;toggleClass(t.controls,i.classNames.noTransition,!0),ui.toggleControls.call(e,!0),setTimeout(()=>{toggleClass(t.controls,i.classNames.noTransition,!1)},0);const n=this.touch?3e3:4e3;clearTimeout(s.controls),s.controls=setTimeout(()=>ui.toggleControls.call(e,!1),n)}),this.bind(t.inputs.volume,"wheel",t=>{const i=t.webkitDirectionInvertedFromDevice,[s,n]=[t.deltaX,-t.deltaY].map(e=>i?-e:e),r=Math.sign(Math.abs(s)>Math.abs(n)?s:n);e.increaseVolume(r/50);const{volume:a}=e.media;(1===r&&a<1||-1===r&&a>0)&&t.preventDefault()},"volume",!1)}),this.player=e,this.lastKey=null,this.focusTimer=null,this.lastKeyDown=null,this.handleKey=this.handleKey.bind(this),this.toggleMenu=this.toggleMenu.bind(this),this.firstTouch=this.firstTouch.bind(this)}handleKey(e){const{player:t}=this,{elements:i}=t,{key:s,type:n,altKey:r,ctrlKey:a,metaKey:o,shiftKey:l}=e,c="keydown"===n,u=c&&s===this.lastKey;if(r||a||o||l)return;if(!s)return;if(c){const n=document.activeElement;if(is.element(n)){const{editable:s}=t.config.selectors,{seek:r}=i.inputs;if(n!==r&&matches(n,s))return;if(" "===e.key&&matches(n,'button, [role^="menuitem"]'))return}switch([" ","ArrowLeft","ArrowUp","ArrowRight","ArrowDown","0","1","2","3","4","5","6","7","8","9","c","f","k","l","m"].includes(s)&&(e.preventDefault(),e.stopPropagation()),s){case"0":case"1":case"2":case"3":case"4":case"5":case"6":case"7":case"8":case"9":u||(d=Number.parseInt(s,10),t.currentTime=t.duration/10*d);break;case" ":case"k":u||silencePromise(t.togglePlay());break;case"ArrowUp":t.increaseVolume(.1);break;case"ArrowDown":t.decreaseVolume(.1);break;case"m":u||(t.muted=!t.muted);break;case"ArrowRight":t.forward();break;case"ArrowLeft":t.rewind();break;case"f":t.fullscreen.toggle();break;case"c":u||t.toggleCaptions();break;case"l":t.loop=!t.loop}"Escape"===s&&!t.fullscreen.usingNative&&t.fullscreen.active&&t.fullscreen.toggle(),this.lastKey=s}else this.lastKey=null;var d}toggleMenu(e){controls.toggleMenu.call(this.player,e)}}function getDefaultExportFromCjs(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var hasRequiredLoadjs_umd,loadjs_umd$1={exports:{}},loadjs_umd=loadjs_umd$1.exports;function requireLoadjs_umd(){return hasRequiredLoadjs_umd||(hasRequiredLoadjs_umd=1,loadjs_umd$1.exports=function(){var e=function(){},t={},i={},s={};function n(e,t){e=e.push?e:[e];var n,r,a,o=[],l=e.length,c=l;for(n=function(e,i){i.length&&o.push(e),--c||t(o)};l--;)r=e[l],(a=i[r])?n(r,a):(s[r]=s[r]||[]).push(n)}function r(e,t){if(e){var n=s[e];if(i[e]=t,n)for(;n.length;)n[0](e,t),n.splice(0,1)}}function a(t,i){t.call&&(t={success:t}),i.length?(t.error||e)(i):(t.success||e)(t)}function o(t,i,s,n){var r,a,l,c=document,u=s.async,d=(s.numRetries||0)+1,h=s.before||e,m=t.replace(/[\?|#].*$/,""),p=t.replace(/^(css|img|module|nomodule)!/,"");if(n=n||0,/(^css!|\.css$)/.test(m))(l=c.createElement("link")).rel="stylesheet",l.href=p,(r="hideFocus"in l)&&l.relList&&(r=0,l.rel="preload",l.as="style");else if(/(^img!|\.(png|gif|jpg|svg|webp)$)/.test(m))(l=c.createElement("img")).src=p;else if((l=c.createElement("script")).src=p,l.async=void 0===u||u,a="noModule"in l,/^module!/.test(m)){if(!a)return i(t,"l");l.type="module"}else if(/^nomodule!/.test(m)&&a)return i(t,"l");l.onload=l.onerror=l.onbeforeload=function(e){var a=e.type[0];if(r)try{l.sheet.cssText.length||(a="e")}catch(e){18!=e.code&&(a="e")}if("e"==a){if((n+=1)<d)return o(t,i,s,n)}else if("preload"==l.rel&&"style"==l.as)return l.rel="stylesheet";i(t,a,e.defaultPrevented)},!1!==h(t,l)&&c.head.appendChild(l)}function l(e,t,i){var s,n,r=(e=e.push?e:[e]).length,a=r,l=[];for(s=function(e,i,s){if("e"==i&&l.push(e),"b"==i){if(!s)return;l.push(e)}--r||t(l)},n=0;n<a;n++)o(e[n],s,i)}function c(e,i,s){var n,o;if(i&&i.trim&&(n=i),o=(n?s:i)||{},n){if(n in t)throw"LoadJS";t[n]=!0}function c(t,i){l(e,function(e){a(o,e),t&&a({success:t,error:i},e),r(n,e)},o)}if(o.returnPromise)return new Promise(c);c()}return c.ready=function(e,t){return n(e,function(e){a(t,e)}),c},c.done=function(e){r(e,[])},c.reset=function(){t={},i={},s={}},c.isDefined=function(e){return e in t},c}()),loadjs_umd$1.exports}var loadjs_umdExports=requireLoadjs_umd(),loadjs=getDefaultExportFromCjs(loadjs_umdExports);function loadScript(e){return new Promise((t,i)=>{loadjs(e,{success:t,error:i})})}function parseId$1(e){if(is.empty(e))return null;if(is.number(Number(e)))return e;const t=e.match(/^.*(vimeo.com\/|video\/)(\d+).*/);return t?t[2]:e}function parseHash(e){const t=e.match(/^.*(vimeo.com\/|video\/)(\d+)(\?.*h=|\/)+([\d,a-f]+)/);return t&&5===t.length?t[4]:null}function assurePlaybackState$1(e){e&&!this.embed.hasPlayed&&(this.embed.hasPlayed=!0),this.media.paused===e&&(this.media.paused=!e,triggerEvent.call(this,this.media,e?"play":"pause"))}const vimeo={setup(){const e=this;toggleClass(e.elements.wrapper,e.config.classNames.embed,!0),e.options.speed=e.config.speed.options,setAspectRatio.call(e),is.object(window.Vimeo)?vimeo.ready.call(e):loadScript(e.config.urls.vimeo.sdk).then(()=>{vimeo.ready.call(e)}).catch(t=>{e.debug.warn("Vimeo SDK (player.js) failed to load",t)})},ready(){const e=this,t=e.config.vimeo,{premium:i,referrerPolicy:s,...n}=t;let r=e.media.getAttribute("src"),a="";is.empty(r)?(r=e.media.getAttribute(e.config.attributes.embed.id),a=e.media.getAttribute(e.config.attributes.embed.hash)):a=parseHash(r);const o=a?{h:a}:{};i&&Object.assign(n,{controls:!1,sidedock:!1});const l=buildUrlParams({loop:e.config.loop.active,autoplay:e.autoplay,muted:e.muted,gesture:"media",playsinline:e.config.playsinline,...o,...n}),c=parseId$1(r),u=createElement("iframe"),d=format(e.config.urls.vimeo.iframe,c,l);if(u.setAttribute("src",d),u.setAttribute("allowfullscreen",""),u.setAttribute("allow",["autoplay","fullscreen","picture-in-picture","encrypted-media","accelerometer","gyroscope"].join("; ")),is.empty(s)||u.setAttribute("referrerPolicy",s),i||!t.customControls)u.setAttribute("data-poster",e.poster),e.media=replaceElement(u,e.media);else{const t=createElement("div",{class:e.config.classNames.embedContainer,"data-poster":e.poster});t.appendChild(u),e.media=replaceElement(t,e.media)}t.customControls||fetch(format(e.config.urls.vimeo.api,d)).then(t=>{!is.empty(t)&&t.thumbnail_url&&ui.setPoster.call(e,t.thumbnail_url).catch(()=>{})}),e.embed=new window.Vimeo.Player(u,{autopause:e.config.autopause,muted:e.muted}),e.media.paused=!0,e.media.currentTime=0,e.supported.ui&&e.embed.disableTextTrack(),e.media.play=()=>(assurePlaybackState$1.call(e,!0),e.embed.play()),e.media.pause=()=>(assurePlaybackState$1.call(e,!1),e.embed.pause()),e.media.stop=()=>{e.pause(),e.currentTime=0};let{currentTime:h}=e.media;Object.defineProperty(e.media,"currentTime",{get:()=>h,set(t){const{embed:i,media:s,paused:n,volume:r}=e,a=n&&!i.hasPlayed;s.seeking=!0,triggerEvent.call(e,s,"seeking"),Promise.resolve(a&&i.setVolume(0)).then(()=>i.setCurrentTime(t)).then(()=>a&&i.pause()).then(()=>a&&i.setVolume(r)).catch(()=>{})}});let m=e.config.speed.selected;Object.defineProperty(e.media,"playbackRate",{get:()=>m,set(t){e.embed.setPlaybackRate(t).then(()=>{m=t,triggerEvent.call(e,e.media,"ratechange")}).catch(()=>{e.options.speed=[1]})}});let{volume:p}=e.config;Object.defineProperty(e.media,"volume",{get:()=>p,set(t){e.embed.setVolume(t).then(()=>{p=t,triggerEvent.call(e,e.media,"volumechange")})}});let{muted:g}=e.config;Object.defineProperty(e.media,"muted",{get:()=>g,set(t){const i=!!is.boolean(t)&&t;e.embed.setMuted(!!i||e.config.muted).then(()=>{g=i,triggerEvent.call(e,e.media,"volumechange")})}});let f,{loop:y}=e.config;Object.defineProperty(e.media,"loop",{get:()=>y,set(t){const i=is.boolean(t)?t:e.config.loop.active;e.embed.setLoop(i).then(()=>{y=i})}}),e.embed.getVideoUrl().then(t=>{f=t,controls.setDownloadUrl.call(e)}).catch(e=>{this.debug.warn(e)}),Object.defineProperty(e.media,"currentSrc",{get:()=>f}),Object.defineProperty(e.media,"ended",{get:()=>e.currentTime===e.duration}),Promise.all([e.embed.getVideoWidth(),e.embed.getVideoHeight()]).then(t=>{const[i,s]=t;e.embed.ratio=roundAspectRatio(i,s),setAspectRatio.call(this)}),e.embed.setAutopause(e.config.autopause).then(t=>{e.config.autopause=t}),e.embed.getVideoTitle().then(t=>{e.config.title=t,ui.setTitle.call(this)}),e.embed.getCurrentTime().then(t=>{h=t,triggerEvent.call(e,e.media,"timeupdate")}),e.embed.getDuration().then(t=>{e.media.duration=t,triggerEvent.call(e,e.media,"durationchange")}),e.embed.getTextTracks().then(t=>{e.media.textTracks=t,captions.setup.call(e)}),e.embed.on("cuechange",({cues:t=[]})=>{const i=t.map(e=>stripHTML(e.text));captions.updateCues.call(e,i)}),e.embed.on("loaded",()=>{if(e.embed.getPaused().then(t=>{assurePlaybackState$1.call(e,!t),t||triggerEvent.call(e,e.media,"playing")}),is.element(e.embed.element)&&e.supported.ui){e.embed.element.setAttribute("tabindex",-1)}}),e.embed.on("bufferstart",()=>{triggerEvent.call(e,e.media,"waiting")}),e.embed.on("bufferend",()=>{triggerEvent.call(e,e.media,"playing")}),e.embed.on("play",()=>{assurePlaybackState$1.call(e,!0),triggerEvent.call(e,e.media,"playing")}),e.embed.on("pause",()=>{assurePlaybackState$1.call(e,!1)}),e.embed.on("timeupdate",t=>{e.media.seeking=!1,h=t.seconds,triggerEvent.call(e,e.media,"timeupdate")}),e.embed.on("progress",t=>{e.media.buffered=t.percent,triggerEvent.call(e,e.media,"progress"),1===Number.parseInt(t.percent,10)&&triggerEvent.call(e,e.media,"canplaythrough"),e.embed.getDuration().then(t=>{t!==e.media.duration&&(e.media.duration=t,triggerEvent.call(e,e.media,"durationchange"))})}),e.embed.on("seeked",()=>{e.media.seeking=!1,triggerEvent.call(e,e.media,"seeked")}),e.embed.on("ended",()=>{e.media.paused=!0,triggerEvent.call(e,e.media,"ended")}),e.embed.on("error",t=>{e.media.error=t,triggerEvent.call(e,e.media,"error")}),t.customControls&&setTimeout(()=>ui.build.call(e),0)}};function parseId(e){if(is.empty(e))return null;const t=e.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/);return t&&t[2]?t[2]:e}function assurePlaybackState(e){e&&!this.embed.hasPlayed&&(this.embed.hasPlayed=!0),this.media.paused===e&&(this.media.paused=!e,triggerEvent.call(this,this.media,e?"play":"pause"))}function getHost(e){return e.noCookie?"https://www.youtube-nocookie.com":"http:"===window.location.protocol?"http://www.youtube.com":void 0}const youtube={setup(){if(toggleClass(this.elements.wrapper,this.config.classNames.embed,!0),is.object(window.YT)&&is.function(window.YT.Player))youtube.ready.call(this);else{const e=window.onYouTubeIframeAPIReady;window.onYouTubeIframeAPIReady=()=>{is.function(e)&&e(),youtube.ready.call(this)},loadScript(this.config.urls.youtube.sdk).catch(e=>{this.debug.warn("YouTube API failed to load",e)})}},getTitle(e){fetch(format(this.config.urls.youtube.api,e)).then(e=>{if(is.object(e)){const{title:t,height:i,width:s}=e;this.config.title=t,ui.setTitle.call(this),this.embed.ratio=roundAspectRatio(s,i)}setAspectRatio.call(this)}).catch(()=>{setAspectRatio.call(this)})},ready(){const e=this,t=e.config.youtube,i=e.media&&e.media.getAttribute("id");if(!is.empty(i)&&i.startsWith("youtube-"))return;let s=e.media.getAttribute("src");is.empty(s)&&(s=e.media.getAttribute(this.config.attributes.embed.id));const n=parseId(s),r=createElement("div",{id:generateId(e.provider),"data-poster":t.customControls?e.poster:void 0});if(e.media=replaceElement(r,e.media),t.customControls){const t=e=>`https://i.ytimg.com/vi/${n}/${e}default.jpg`;loadImage(t("maxres"),121).catch(()=>loadImage(t("sd"),121)).catch(()=>loadImage(t("hq"))).then(t=>ui.setPoster.call(e,t.src)).then(t=>{t.includes("maxres")||(e.elements.poster.style.backgroundSize="cover")}).catch(()=>{})}e.embed=new window.YT.Player(e.media,{videoId:n,host:getHost(t),playerVars:extend({},{autoplay:e.config.autoplay?1:0,hl:e.config.hl,controls:e.supported.ui&&t.customControls?0:1,disablekb:1,playsinline:e.config.playsinline&&!e.config.fullscreen.iosNative?1:0,cc_load_policy:e.captions.active?1:0,cc_lang_pref:e.config.captions.language,widget_referrer:window?window.location.href:null},t),events:{onError(t){if(!e.media.error){const i=t.data,s={2:"The request contains an invalid parameter value. For example, this error occurs if you specify a video ID that does not have 11 characters, or if the video ID contains invalid characters, such as exclamation points or asterisks.",5:"The requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred.",100:"The video requested was not found. This error occurs when a video has been removed (for any reason) or has been marked as private.",101:"The owner of the requested video does not allow it to be played in embedded players.",150:"The owner of the requested video does not allow it to be played in embedded players."}[i]||"An unknown error occurred";e.media.error={code:i,message:s},triggerEvent.call(e,e.media,"error")}},onPlaybackRateChange(t){const i=t.target;e.media.playbackRate=i.getPlaybackRate(),triggerEvent.call(e,e.media,"ratechange")},onReady(i){if(is.function(e.media.play))return;const s=i.target;youtube.getTitle.call(e,n),e.media.play=()=>{assurePlaybackState.call(e,!0),s.playVideo()},e.media.pause=()=>{assurePlaybackState.call(e,!1),s.pauseVideo()},e.media.stop=()=>{s.stopVideo()},e.media.duration=s.getDuration(),e.media.paused=!0,e.media.currentTime=0,Object.defineProperty(e.media,"currentTime",{get:()=>Number(s.getCurrentTime()),set(t){e.paused&&!e.embed.hasPlayed&&e.embed.mute(),e.media.seeking=!0,triggerEvent.call(e,e.media,"seeking"),s.seekTo(t)}}),Object.defineProperty(e.media,"playbackRate",{get:()=>s.getPlaybackRate(),set(e){s.setPlaybackRate(e)}});let{volume:r}=e.config;Object.defineProperty(e.media,"volume",{get:()=>r,set(t){r=t,s.setVolume(100*r),triggerEvent.call(e,e.media,"volumechange")}});let{muted:a}=e.config;Object.defineProperty(e.media,"muted",{get:()=>a,set(t){const i=is.boolean(t)?t:a;a=i,s[i?"mute":"unMute"](),s.setVolume(100*r),triggerEvent.call(e,e.media,"volumechange")}}),Object.defineProperty(e.media,"currentSrc",{get:()=>s.getVideoUrl()}),Object.defineProperty(e.media,"ended",{get:()=>e.currentTime===e.duration});const o=s.getAvailablePlaybackRates();e.options.speed=o.filter(t=>e.config.speed.options.includes(t)),e.supported.ui&&t.customControls&&e.media.setAttribute("tabindex",-1),triggerEvent.call(e,e.media,"timeupdate"),triggerEvent.call(e,e.media,"durationchange"),clearInterval(e.timers.buffering),e.timers.buffering=setInterval(()=>{e.media.buffered=s.getVideoLoadedFraction(),(null===e.media.lastBuffered||e.media.lastBuffered<e.media.buffered)&&triggerEvent.call(e,e.media,"progress"),e.media.lastBuffered=e.media.buffered,1===e.media.buffered&&(clearInterval(e.timers.buffering),triggerEvent.call(e,e.media,"canplaythrough"))},200),t.customControls&&setTimeout(()=>ui.build.call(e),50)},onStateChange(i){const s=i.target;clearInterval(e.timers.playing);switch(e.media.seeking&&[1,2].includes(i.data)&&(e.media.seeking=!1,triggerEvent.call(e,e.media,"seeked")),i.data){case-1:triggerEvent.call(e,e.media,"timeupdate"),e.media.buffered=s.getVideoLoadedFraction(),triggerEvent.call(e,e.media,"progress");break;case 0:assurePlaybackState.call(e,!1),e.media.loop?(s.stopVideo(),s.playVideo()):triggerEvent.call(e,e.media,"ended");break;case 1:t.customControls&&!e.config.autoplay&&e.media.paused&&!e.embed.hasPlayed?e.media.pause():(assurePlaybackState.call(e,!0),triggerEvent.call(e,e.media,"playing"),e.timers.playing=setInterval(()=>{triggerEvent.call(e,e.media,"timeupdate")},50),e.media.duration!==s.getDuration()&&(e.media.duration=s.getDuration(),triggerEvent.call(e,e.media,"durationchange")));break;case 2:e.muted||e.embed.unMute(),assurePlaybackState.call(e,!1);break;case 3:triggerEvent.call(e,e.media,"waiting")}triggerEvent.call(e,e.elements.container,"statechange",!1,{code:i.data})}}})}},media={setup(){this.media?(toggleClass(this.elements.container,this.config.classNames.type.replace("{0}",this.type),!0),toggleClass(this.elements.container,this.config.classNames.provider.replace("{0}",this.provider),!0),this.isEmbed&&toggleClass(this.elements.container,this.config.classNames.type.replace("{0}","video"),!0),this.isVideo&&(this.elements.wrapper=createElement("div",{class:this.config.classNames.video}),wrap(this.media,this.elements.wrapper),this.elements.poster=createElement("div",{class:this.config.classNames.poster}),this.elements.wrapper.appendChild(this.elements.poster)),this.isHTML5?html5.setup.call(this):this.isYouTube?youtube.setup.call(this):this.isVimeo&&vimeo.setup.call(this)):this.debug.warn("No media element found!")}};function destroy(e){e.manager&&e.manager.destroy(),e.elements.displayContainer&&e.elements.displayContainer.destroy(),e.elements.container.remove()}class Ads{constructor(e){_defineProperty$1(this,"load",()=>{this.enabled&&(is.object(window.google)&&is.object(window.google.ima)?this.ready():loadScript(this.player.config.urls.googleIMA.sdk).then(()=>{this.ready()}).catch(()=>{this.trigger("error",new Error("Google IMA SDK failed to load"))}))}),_defineProperty$1(this,"ready",()=>{this.enabled||destroy(this),this.startSafetyTimer(12e3,"ready()"),this.managerPromise.then(()=>{this.clearSafetyTimer("onAdsManagerLoaded()")}),this.listeners(),this.setupIMA()}),_defineProperty$1(this,"setupIMA",()=>{this.elements.container=createElement("div",{class:this.player.config.classNames.ads}),this.player.elements.container.appendChild(this.elements.container),google.ima.settings.setVpaidMode(google.ima.ImaSdkSettings.VpaidMode.ENABLED),google.ima.settings.setLocale(this.player.config.ads.language),google.ima.settings.setDisableCustomPlaybackForIOS10Plus(this.player.config.playsinline),this.elements.displayContainer=new google.ima.AdDisplayContainer(this.elements.container,this.player.media),this.loader=new google.ima.AdsLoader(this.elements.displayContainer),this.loader.addEventListener(google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,e=>this.onAdsManagerLoaded(e),!1),this.loader.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR,e=>this.onAdError(e),!1),this.requestAds()}),_defineProperty$1(this,"requestAds",()=>{const{container:e}=this.player.elements;try{const t=new google.ima.AdsRequest;t.adTagUrl=this.tagUrl,t.linearAdSlotWidth=e.offsetWidth,t.linearAdSlotHeight=e.offsetHeight,t.nonLinearAdSlotWidth=e.offsetWidth,t.nonLinearAdSlotHeight=e.offsetHeight,t.forceNonLinearFullSlot=!1,t.setAdWillPlayMuted(!this.player.muted),this.loader.requestAds(t)}catch(e){this.onAdError(e)}}),_defineProperty$1(this,"pollCountdown",(e=!1)=>{if(!e)return clearInterval(this.countdownTimer),void this.elements.container.removeAttribute("data-badge-text");this.countdownTimer=setInterval(()=>{const e=formatTime(Math.max(this.manager.getRemainingTime(),0)),t=`${i18n.get("advertisement",this.player.config)} - ${e}`;this.elements.container.setAttribute("data-badge-text",t)},100)}),_defineProperty$1(this,"onAdsManagerLoaded",e=>{if(!this.enabled)return;const t=new google.ima.AdsRenderingSettings;t.restoreCustomPlaybackStateOnAdBreakComplete=!0,t.enablePreloading=!0,this.manager=e.getAdsManager(this.player,t),this.cuePoints=this.manager.getCuePoints(),this.manager.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR,e=>this.onAdError(e)),Object.keys(google.ima.AdEvent.Type).forEach(e=>{this.manager.addEventListener(google.ima.AdEvent.Type[e],e=>this.onAdEvent(e))}),this.trigger("loaded")}),_defineProperty$1(this,"addCuePoints",()=>{is.empty(this.cuePoints)||this.cuePoints.forEach(e=>{if(0!==e&&-1!==e&&e<this.player.duration){const t=this.player.elements.progress;if(is.element(t)){const i=100/this.player.duration*e,s=createElement("span",{class:this.player.config.classNames.cues});s.style.left=`${i.toString()}%`,t.appendChild(s)}}})}),_defineProperty$1(this,"onAdEvent",e=>{const{container:t}=this.player.elements,i=e.getAd(),s=e.getAdData();switch((e=>{triggerEvent.call(this.player,this.player.media,`ads${e.replace(/_/g,"").toLowerCase()}`)})(e.type),e.type){case google.ima.AdEvent.Type.LOADED:this.trigger("loaded"),this.pollCountdown(!0),i.isLinear()||(i.width=t.offsetWidth,i.height=t.offsetHeight);break;case google.ima.AdEvent.Type.STARTED:this.manager.setVolume(this.player.volume);break;case google.ima.AdEvent.Type.ALL_ADS_COMPLETED:this.player.ended?this.loadAds():this.loader.contentComplete();break;case google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED:this.pauseContent();break;case google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED:this.pollCountdown(),this.resumeContent();break;case google.ima.AdEvent.Type.LOG:s.adError&&this.player.debug.warn(`Non-fatal ad error: ${s.adError.getMessage()}`)}}),_defineProperty$1(this,"onAdError",e=>{this.cancel(),this.player.debug.warn("Ads error",e)}),_defineProperty$1(this,"listeners",()=>{const{container:e}=this.player.elements;let t;this.player.on("canplay",()=>{this.addCuePoints()}),this.player.on("ended",()=>{this.loader.contentComplete()}),this.player.on("timeupdate",()=>{t=this.player.currentTime}),this.player.on("seeked",()=>{const e=this.player.currentTime;is.empty(this.cuePoints)||this.cuePoints.forEach((i,s)=>{t<i&&i<e&&(this.manager.discardAdBreak(),this.cuePoints.splice(s,1))})}),window.addEventListener("resize",()=>{this.manager&&this.manager.resize(e.offsetWidth,e.offsetHeight,google.ima.ViewMode.NORMAL)})}),_defineProperty$1(this,"play",()=>{const{container:e}=this.player.elements;this.managerPromise||this.resumeContent(),this.managerPromise.then(()=>{this.manager.setVolume(this.player.volume),this.elements.displayContainer.initialize();try{this.initialized||(this.manager.init(e.offsetWidth,e.offsetHeight,google.ima.ViewMode.NORMAL),this.manager.start()),this.initialized=!0}catch(e){this.onAdError(e)}}).catch(()=>{})}),_defineProperty$1(this,"resumeContent",()=>{this.elements.container.style.zIndex="",this.playing=!1,silencePromise(this.player.media.play())}),_defineProperty$1(this,"pauseContent",()=>{this.elements.container.style.zIndex=3,this.playing=!0,this.player.media.pause()}),_defineProperty$1(this,"cancel",()=>{this.initialized&&this.resumeContent(),this.trigger("error"),this.loadAds()}),_defineProperty$1(this,"loadAds",()=>{this.managerPromise.then(()=>{this.manager&&this.manager.destroy(),this.managerPromise=new Promise(e=>{this.on("loaded",e),this.player.debug.log(this.manager)}),this.initialized=!1,this.requestAds()}).catch(()=>{})}),_defineProperty$1(this,"trigger",(e,...t)=>{const i=this.events[e];is.array(i)&&i.forEach(e=>{is.function(e)&&e.apply(this,t)})}),_defineProperty$1(this,"on",(e,t)=>(is.array(this.events[e])||(this.events[e]=[]),this.events[e].push(t),this)),_defineProperty$1(this,"startSafetyTimer",(e,t)=>{this.player.debug.log(`Safety timer invoked from: ${t}`),this.safetyTimer=setTimeout(()=>{this.cancel(),this.clearSafetyTimer("startSafetyTimer()")},e)}),_defineProperty$1(this,"clearSafetyTimer",e=>{is.nullOrUndefined(this.safetyTimer)||(this.player.debug.log(`Safety timer cleared from: ${e}`),clearTimeout(this.safetyTimer),this.safetyTimer=null)}),this.player=e,this.config=e.config.ads,this.playing=!1,this.initialized=!1,this.elements={container:null,displayContainer:null},this.manager=null,this.loader=null,this.cuePoints=null,this.events={},this.safetyTimer=null,this.countdownTimer=null,this.managerPromise=new Promise((e,t)=>{this.on("loaded",e),this.on("error",t)}),this.load()}get enabled(){const{config:e}=this;return this.player.isHTML5&&this.player.isVideo&&e.enabled&&(!is.empty(e.publisherId)||is.url(e.tagUrl))}get tagUrl(){const{config:e}=this;if(is.url(e.tagUrl))return e.tagUrl;return`https://go.aniview.com/api/adserver6/vast/?${buildUrlParams({AV_PUBLISHERID:"58c25bb0073ef448b1087ad6",AV_CHANNELID:"5a0458dc28a06145e4519d21",AV_URL:window.location.hostname,cb:Date.now(),AV_WIDTH:640,AV_HEIGHT:480,AV_CDIM2:e.publisherId})}`}}function clamp(e=0,t=0,i=255){return Math.min(Math.max(e,t),i)}function parseVtt(e){const t=[];return e.split(/\r\n\r\n|\n\n|\r\r/).forEach(e=>{const i={};e.split(/\r\n|\n|\r/).forEach(e=>{if(is.number(i.startTime)){if(!is.empty(e.trim())&&is.empty(i.text)){const t=e.trim().split("#xywh=");[i.text]=t,t[1]&&([i.x,i.y,i.w,i.h]=t[1].split(","))}}else{const t=e.match(/(\d{2})?:?(\d{2}):(\d{2}).(\d{2,3})( ?--> ?)(\d{2})?:?(\d{2}):(\d{2}).(\d{2,3})/);t&&(i.startTime=60*Number(t[1]||0)*60+60*Number(t[2])+Number(t[3])+Number(`0.${t[4]}`),i.endTime=60*Number(t[6]||0)*60+60*Number(t[7])+Number(t[8])+Number(`0.${t[9]}`))}}),i.text&&t.push(i)}),t}function fitRatio(e,t){const i={};return e>t.width/t.height?(i.width=t.width,i.height=1/e*t.width):(i.height=t.height,i.width=e*t.height),i}class PreviewThumbnails{constructor(e){_defineProperty$1(this,"load",()=>{this.player.elements.display.seekTooltip&&(this.player.elements.display.seekTooltip.hidden=this.enabled),this.enabled&&this.getThumbnails().then(()=>{this.enabled&&(this.render(),this.determineContainerAutoSizing(),this.listeners(),this.loaded=!0)})}),_defineProperty$1(this,"getThumbnails",()=>new Promise(e=>{const{src:t}=this.player.config.previewThumbnails;if(is.empty(t))throw new Error("Missing previewThumbnails.src config attribute");const i=()=>{this.thumbnails.sort((e,t)=>e.height-t.height),this.player.debug.log("Preview thumbnails",this.thumbnails),e()};if(is.function(t))t(e=>{this.thumbnails=e,i()});else{const e=(is.string(t)?[t]:t).map(e=>this.getThumbnail(e));Promise.all(e).then(i)}})),_defineProperty$1(this,"getThumbnail",e=>new Promise(t=>{fetch(e,void 0,this.player.config.previewThumbnails.withCredentials).then(i=>{const s={frames:parseVtt(i),height:null,urlPrefix:""};s.frames[0].text.startsWith("/")||s.frames[0].text.startsWith("http://")||s.frames[0].text.startsWith("https://")||(s.urlPrefix=e.substring(0,e.lastIndexOf("/")+1));const n=new Image;n.onload=()=>{s.height=n.naturalHeight,s.width=n.naturalWidth,this.thumbnails.push(s),t()},n.src=s.urlPrefix+s.frames[0].text})})),_defineProperty$1(this,"startMove",e=>{if(this.loaded&&is.event(e)&&["touchmove","mousemove"].includes(e.type)&&this.player.media.duration){if("touchmove"===e.type)this.seekTime=this.player.media.duration*(this.player.elements.inputs.seek.value/100);else{var t,i;const s=this.player.elements.progress.getBoundingClientRect(),n=100/s.width*(e.pageX-s.left);this.seekTime=this.player.media.duration*(n/100),this.seekTime<0&&(this.seekTime=0),this.seekTime>this.player.media.duration-1&&(this.seekTime=this.player.media.duration-1),this.mousePosX=e.pageX,this.elements.thumb.time.textContent=formatTime(this.seekTime);const r=null===(t=this.player.config.markers)||void 0===t||null===(i=t.points)||void 0===i?void 0:i.find(({time:e})=>e===Math.round(this.seekTime));r&&this.elements.thumb.time.insertAdjacentHTML("afterbegin",`${r.label}<br>`)}this.showImageAtCurrentTime()}}),_defineProperty$1(this,"endMove",()=>{this.toggleThumbContainer(!1,!0)}),_defineProperty$1(this,"startScrubbing",e=>{(is.nullOrUndefined(e.button)||!1===e.button||0===e.button)&&(this.mouseDown=!0,this.player.media.duration&&(this.toggleScrubbingContainer(!0),this.toggleThumbContainer(!1,!0),this.showImageAtCurrentTime()))}),_defineProperty$1(this,"endScrubbing",()=>{this.mouseDown=!1,Math.ceil(this.lastTime)===Math.ceil(this.player.media.currentTime)?this.toggleScrubbingContainer(!1):once.call(this.player,this.player.media,"timeupdate",()=>{this.mouseDown||this.toggleScrubbingContainer(!1)})}),_defineProperty$1(this,"listeners",()=>{this.player.on("play",()=>{this.toggleThumbContainer(!1,!0)}),this.player.on("seeked",()=>{this.toggleThumbContainer(!1)}),this.player.on("timeupdate",()=>{this.lastTime=this.player.media.currentTime})}),_defineProperty$1(this,"render",()=>{this.elements.thumb.container=createElement("div",{class:this.player.config.classNames.previewThumbnails.thumbContainer}),this.elements.thumb.imageContainer=createElement("div",{class:this.player.config.classNames.previewThumbnails.imageContainer}),this.elements.thumb.container.appendChild(this.elements.thumb.imageContainer);const e=createElement("div",{class:this.player.config.classNames.previewThumbnails.timeContainer});this.elements.thumb.time=createElement("span",{},"00:00"),e.appendChild(this.elements.thumb.time),this.elements.thumb.imageContainer.appendChild(e),is.element(this.player.elements.progress)&&this.player.elements.progress.appendChild(this.elements.thumb.container),this.elements.scrubbing.container=createElement("div",{class:this.player.config.classNames.previewThumbnails.scrubbingContainer}),this.player.elements.wrapper.appendChild(this.elements.scrubbing.container)}),_defineProperty$1(this,"destroy",()=>{this.elements.thumb.container&&this.elements.thumb.container.remove(),this.elements.scrubbing.container&&this.elements.scrubbing.container.remove()}),_defineProperty$1(this,"showImageAtCurrentTime",()=>{this.mouseDown?this.setScrubbingContainerSize():this.setThumbContainerSizeAndPos();const e=this.thumbnails[0].frames.findIndex(e=>this.seekTime>=e.startTime&&this.seekTime<=e.endTime),t=e>=0;let i=0;this.mouseDown||this.toggleThumbContainer(t),t&&(this.thumbnails.forEach((t,s)=>{this.loadedImages.includes(t.frames[e].text)&&(i=s)}),e!==this.showingThumb&&(this.showingThumb=e,this.loadImage(i)))}),_defineProperty$1(this,"loadImage",(e=0)=>{const t=this.showingThumb,i=this.thumbnails[e],{urlPrefix:s}=i,n=i.frames[t],r=i.frames[t].text,a=s+r;if(this.currentImageElement&&this.currentImageElement.dataset.filename===r)this.showImage(this.currentImageElement,n,e,t,r,!1),this.currentImageElement.dataset.index=t,this.removeOldImages(this.currentImageElement);else{this.loadingImage&&this.usingSprites&&(this.loadingImage.onload=null);const i=new Image;i.src=a,i.dataset.index=t,i.dataset.filename=r,this.showingThumbFilename=r,this.player.debug.log(`Loading image: ${a}`),i.onload=()=>this.showImage(i,n,e,t,r,!0),this.loadingImage=i,this.removeOldImages(i)}}),_defineProperty$1(this,"showImage",(e,t,i,s,n,r=!0)=>{this.player.debug.log(`Showing thumb: ${n}. num: ${s}. qual: ${i}. newimg: ${r}`),this.setImageSizeAndOffset(e,t),r&&(this.currentImageContainer.appendChild(e),this.currentImageElement=e,this.loadedImages.includes(n)||this.loadedImages.push(n)),this.preloadNearby(s,!0).then(this.preloadNearby(s,!1)).then(this.getHigherQuality(i,e,t,n))}),_defineProperty$1(this,"removeOldImages",e=>{Array.from(this.currentImageContainer.children).forEach(t=>{if("img"!==t.tagName.toLowerCase())return;const i=this.usingSprites?500:1e3;if(t.dataset.index!==e.dataset.index&&!t.dataset.deleting){t.dataset.deleting=!0;const{currentImageContainer:e}=this;setTimeout(()=>{e.removeChild(t),this.player.debug.log(`Removing thumb: ${t.dataset.filename}`)},i)}})}),_defineProperty$1(this,"preloadNearby",(e,t=!0)=>new Promise(i=>{setTimeout(()=>{const s=this.thumbnails[0].frames[e].text;if(this.showingThumbFilename===s){let n;n=t?this.thumbnails[0].frames.slice(e):this.thumbnails[0].frames.slice(0,e).reverse();let r=!1;n.forEach(e=>{const t=e.text;if(t!==s&&!this.loadedImages.includes(t)){r=!0,this.player.debug.log(`Preloading thumb filename: ${t}`);const{urlPrefix:e}=this.thumbnails[0],s=e+t,n=new Image;n.src=s,n.onload=()=>{this.player.debug.log(`Preloaded thumb filename: ${t}`),this.loadedImages.includes(t)||this.loadedImages.push(t),i()}}}),r||i()}},300)})),_defineProperty$1(this,"getHigherQuality",(e,t,i,s)=>{if(e<this.thumbnails.length-1){let n=t.naturalHeight;this.usingSprites&&(n=i.h),n<this.thumbContainerHeight&&setTimeout(()=>{this.showingThumbFilename===s&&(this.player.debug.log(`Showing higher quality thumb for: ${s}`),this.loadImage(e+1))},300)}}),_defineProperty$1(this,"toggleThumbContainer",(e=!1,t=!1)=>{const i=this.player.config.classNames.previewThumbnails.thumbContainerShown;this.elements.thumb.container.classList.toggle(i,e),!e&&t&&(this.showingThumb=null,this.showingThumbFilename=null)}),_defineProperty$1(this,"toggleScrubbingContainer",(e=!1)=>{const t=this.player.config.classNames.previewThumbnails.scrubbingContainerShown;this.elements.scrubbing.container.classList.toggle(t,e),e||(this.showingThumb=null,this.showingThumbFilename=null)}),_defineProperty$1(this,"determineContainerAutoSizing",()=>{(this.elements.thumb.imageContainer.clientHeight>20||this.elements.thumb.imageContainer.clientWidth>20)&&(this.sizeSpecifiedInCSS=!0)}),_defineProperty$1(this,"setThumbContainerSizeAndPos",()=>{const{imageContainer:e}=this.elements.thumb;if(this.sizeSpecifiedInCSS){if(e.clientHeight>20&&e.clientWidth<20){const t=Math.floor(e.clientHeight*this.thumbAspectRatio);e.style.width=`${t}px`}else if(e.clientHeight<20&&e.clientWidth>20){const t=Math.floor(e.clientWidth/this.thumbAspectRatio);e.style.height=`${t}px`}}else{const t=Math.floor(this.thumbContainerHeight*this.thumbAspectRatio);e.style.height=`${this.thumbContainerHeight}px`,e.style.width=`${t}px`}this.setThumbContainerPos()}),_defineProperty$1(this,"setThumbContainerPos",()=>{const e=this.player.elements.progress.getBoundingClientRect(),t=this.player.elements.container.getBoundingClientRect(),{container:i}=this.elements.thumb,s=t.left-e.left+10,n=t.right-e.left-i.clientWidth-10,r=this.mousePosX-e.left-i.clientWidth/2,a=clamp(r,s,n);i.style.left=`${a}px`,i.style.setProperty("--preview-arrow-offset",r-a+"px")}),_defineProperty$1(this,"setScrubbingContainerSize",()=>{const{width:e,height:t}=fitRatio(this.thumbAspectRatio,{width:this.player.media.clientWidth,height:this.player.media.clientHeight});this.elements.scrubbing.container.style.width=`${e}px`,this.elements.scrubbing.container.style.height=`${t}px`}),_defineProperty$1(this,"setImageSizeAndOffset",(e,t)=>{if(!this.usingSprites)return;const i=this.thumbContainerHeight/t.h;e.style.height=e.naturalHeight*i+"px",e.style.width=e.naturalWidth*i+"px",e.style.left=`-${t.x*i}px`,e.style.top=`-${t.y*i}px`}),this.player=e,this.thumbnails=[],this.loaded=!1,this.lastMouseMoveTime=Date.now(),this.mouseDown=!1,this.loadedImages=[],this.elements={thumb:{},scrubbing:{}},this.load()}get enabled(){return this.player.isHTML5&&this.player.isVideo&&this.player.config.previewThumbnails.enabled}get currentImageContainer(){return this.mouseDown?this.elements.scrubbing.container:this.elements.thumb.imageContainer}get usingSprites(){return Object.keys(this.thumbnails[0].frames[0]).includes("w")}get thumbAspectRatio(){return this.usingSprites?this.thumbnails[0].frames[0].w/this.thumbnails[0].frames[0].h:this.thumbnails[0].width/this.thumbnails[0].height}get thumbContainerHeight(){if(this.mouseDown){const{height:e}=fitRatio(this.thumbAspectRatio,{width:this.player.media.clientWidth,height:this.player.media.clientHeight});return e}return this.sizeSpecifiedInCSS?this.elements.thumb.imageContainer.clientHeight:Math.floor(this.player.media.clientWidth/this.thumbAspectRatio/4)}get currentImageElement(){return this.mouseDown?this.currentScrubbingImageElement:this.currentThumbnailImageElement}set currentImageElement(e){this.mouseDown?this.currentScrubbingImageElement=e:this.currentThumbnailImageElement=e}}const source={insertElements(e,t){is.string(t)?insertElement(e,this.media,{src:t}):is.array(t)&&t.forEach(t=>{insertElement(e,this.media,t)})},change(e){getDeep(e,"sources.length")?(html5.cancelRequests.call(this),this.destroy(()=>{this.options.quality=[],removeElement(this.media),this.media=null,is.element(this.elements.container)&&this.elements.container.removeAttribute("class");const{sources:t,type:i}=e,[{provider:s=providers.html5,src:n}]=t,r="html5"===s?i:"div",a="html5"===s?{}:{src:n};Object.assign(this,{provider:s,type:i,supported:support.check(i,s,this.config.playsinline),media:createElement(r,a)}),this.elements.container.appendChild(this.media),is.boolean(e.autoplay)&&(this.config.autoplay=e.autoplay),this.isHTML5&&(this.config.crossorigin&&this.media.setAttribute("crossorigin",""),this.config.autoplay&&this.media.setAttribute("autoplay",""),is.empty(e.poster)||(this.poster=e.poster),this.config.loop.active&&this.media.setAttribute("loop",""),this.config.muted&&this.media.setAttribute("muted",""),this.config.playsinline&&this.media.setAttribute("playsinline","")),ui.addStyleHook.call(this),this.isHTML5&&source.insertElements.call(this,"source",t),this.config.title=e.title,media.setup.call(this),this.isHTML5&&Object.keys(e).includes("tracks")&&source.insertElements.call(this,"track",e.tracks),(this.isHTML5||this.isEmbed&&!this.supported.ui)&&ui.build.call(this),this.isHTML5&&this.media.load(),is.empty(e.previewThumbnails)||(Object.assign(this.config.previewThumbnails,e.previewThumbnails),this.previewThumbnails&&this.previewThumbnails.loaded&&(this.previewThumbnails.destroy(),this.previewThumbnails=null),this.config.previewThumbnails.enabled&&(this.previewThumbnails=new PreviewThumbnails(this))),this.fullscreen.update()},!0)):this.debug.warn("Invalid source format")}};class Plyr{constructor(e,t){if(_defineProperty$1(this,"play",()=>is.function(this.media.play)?(this.ads&&this.ads.enabled&&this.ads.managerPromise.then(()=>this.ads.play()).catch(()=>silencePromise(this.media.play())),this.media.play()):null),_defineProperty$1(this,"pause",()=>this.playing&&is.function(this.media.pause)?this.media.pause():null),_defineProperty$1(this,"togglePlay",e=>(is.boolean(e)?e:!this.playing)?this.play():this.pause()),_defineProperty$1(this,"stop",()=>{this.isHTML5?(this.pause(),this.restart()):is.function(this.media.stop)&&this.media.stop()}),_defineProperty$1(this,"restart",()=>{this.currentTime=0}),_defineProperty$1(this,"rewind",e=>{this.currentTime-=is.number(e)?e:this.config.seekTime}),_defineProperty$1(this,"forward",e=>{this.currentTime+=is.number(e)?e:this.config.seekTime}),_defineProperty$1(this,"increaseVolume",e=>{const t=this.media.muted?0:this.volume;this.volume=t+(is.number(e)?e:0)}),_defineProperty$1(this,"decreaseVolume",e=>{this.increaseVolume(-e)}),_defineProperty$1(this,"airplay",()=>{support.airplay&&this.media.webkitShowPlaybackTargetPicker()}),_defineProperty$1(this,"toggleControls",e=>{if(this.supported.ui&&!this.isAudio){const t=hasClass(this.elements.container,this.config.classNames.hideControls),i=void 0===e?void 0:!e,s=toggleClass(this.elements.container,this.config.classNames.hideControls,i);if(s&&is.array(this.config.controls)&&this.config.controls.includes("settings")&&!is.empty(this.config.settings)&&controls.toggleMenu.call(this,!1),s!==t){const e=s?"controlshidden":"controlsshown";triggerEvent.call(this,this.media,e)}return!s}return!1}),_defineProperty$1(this,"on",(e,t)=>{on.call(this,this.elements.container,e,t)}),_defineProperty$1(this,"once",(e,t)=>{once.call(this,this.elements.container,e,t)}),_defineProperty$1(this,"off",(e,t)=>{off(this.elements.container,e,t)}),_defineProperty$1(this,"destroy",(e,t=!1)=>{if(!this.ready)return;const i=()=>{document.body.style.overflow="",this.embed=null,t?(Object.keys(this.elements).length&&(removeElement(this.elements.buttons.play),removeElement(this.elements.captions),removeElement(this.elements.controls),removeElement(this.elements.wrapper),this.elements.buttons.play=null,this.elements.captions=null,this.elements.controls=null,this.elements.wrapper=null),is.function(e)&&e()):(unbindListeners.call(this),html5.cancelRequests.call(this),replaceElement(this.elements.original,this.elements.container),triggerEvent.call(this,this.elements.original,"destroyed",!0),is.function(e)&&e.call(this.elements.original),this.ready=!1,setTimeout(()=>{this.elements=null,this.media=null},200))};this.stop(),clearTimeout(this.timers.loading),clearTimeout(this.timers.controls),clearTimeout(this.timers.resized),this.isHTML5?(ui.toggleNativeControls.call(this,!0),i()):this.isYouTube?(clearInterval(this.timers.buffering),clearInterval(this.timers.playing),null!==this.embed&&is.function(this.embed.destroy)&&this.embed.destroy(),i()):this.isVimeo&&(null!==this.embed&&this.embed.unload().then(i),setTimeout(i,200))}),_defineProperty$1(this,"supports",e=>support.mime.call(this,e)),this.timers={},this.ready=!1,this.loading=!1,this.failed=!1,this.touch=support.touch,this.media=e,is.string(this.media)&&(this.media=document.querySelectorAll(this.media)),(window.jQuery&&this.media instanceof jQuery||is.nodeList(this.media)||is.array(this.media))&&(this.media=this.media[0]),this.config=extend({},defaults,Plyr.defaults,t||{},(()=>{try{return JSON.parse(this.media.getAttribute("data-plyr-config"))}catch{return{}}})()),this.elements={container:null,fullscreen:null,captions:null,buttons:{},display:{},progress:{},inputs:{},settings:{popup:null,menu:null,panels:{},buttons:{}}},this.captions={active:null,currentTrack:-1,meta:new WeakMap},this.fullscreen={active:!1},this.options={speed:[],quality:[]},this.debug=new Console(this.config.debug),this.debug.log("Config",this.config),this.debug.log("Support",support),is.nullOrUndefined(this.media)||!is.element(this.media))return void this.debug.error("Setup failed: no suitable element passed");if(this.media.plyr)return void this.debug.warn("Target already setup");if(!this.config.enabled)return void this.debug.error("Setup failed: disabled by config");if(!support.check().api)return void this.debug.error("Setup failed: no support");const i=this.media.cloneNode(!0);i.autoplay=!1,this.elements.original=i;const s=this.media.tagName.toLowerCase();let n=null,r=null;switch(s){case"div":if(n=this.media.querySelector("iframe"),is.element(n)){if(r=parseUrl(n.getAttribute("src")),this.provider=getProviderByUrl(r.toString()),this.elements.container=this.media,this.media=n,this.elements.container.className="",r.search.length){const e=["1","true"];e.includes(r.searchParams.get("autoplay"))&&(this.config.autoplay=!0),e.includes(r.searchParams.get("loop"))&&(this.config.loop.active=!0),this.isYouTube?(this.config.playsinline=e.includes(r.searchParams.get("playsinline")),this.config.youtube.hl=r.searchParams.get("hl")):this.config.playsinline=!0}}else this.provider=this.media.getAttribute(this.config.attributes.embed.provider),this.media.removeAttribute(this.config.attributes.embed.provider);if(is.empty(this.provider)||!Object.values(providers).includes(this.provider))return void this.debug.error("Setup failed: Invalid provider");this.type=types.video;break;case"video":case"audio":this.type=s,this.provider=providers.html5,this.media.hasAttribute("crossorigin")&&(this.config.crossorigin=!0),this.media.hasAttribute("autoplay")&&(this.config.autoplay=!0),(this.media.hasAttribute("playsinline")||this.media.hasAttribute("webkit-playsinline"))&&(this.config.playsinline=!0),this.media.hasAttribute("muted")&&(this.config.muted=!0),this.media.hasAttribute("loop")&&(this.config.loop.active=!0);break;default:return void this.debug.error("Setup failed: unsupported type")}this.supported=support.check(this.type,this.provider),this.supported.api?(this.eventListeners=[],this.listeners=new Listeners(this),this.storage=new Storage(this),this.media.plyr=this,is.element(this.elements.container)||(this.elements.container=createElement("div"),wrap(this.media,this.elements.container)),ui.migrateStyles.call(this),ui.addStyleHook.call(this),media.setup.call(this),this.config.debug&&on.call(this,this.elements.container,this.config.events.join(" "),e=>{this.debug.log(`event: ${e.type}`)}),this.fullscreen=new Fullscreen(this),(this.isHTML5||this.isEmbed&&!this.supported.ui)&&ui.build.call(this),this.listeners.container(),this.listeners.global(),this.config.ads.enabled&&(this.ads=new Ads(this)),this.isHTML5&&this.config.autoplay&&this.once("canplay",()=>silencePromise(this.play())),this.lastSeekTime=0,this.config.previewThumbnails.enabled&&(this.previewThumbnails=new PreviewThumbnails(this))):this.debug.error("Setup failed: no support")}get isHTML5(){return this.provider===providers.html5}get isEmbed(){return this.isYouTube||this.isVimeo}get isYouTube(){return this.provider===providers.youtube}get isVimeo(){return this.provider===providers.vimeo}get isVideo(){return this.type===types.video}get isAudio(){return this.type===types.audio}get playing(){return Boolean(this.ready&&!this.paused&&!this.ended)}get paused(){return Boolean(this.media.paused)}get stopped(){return Boolean(this.paused&&0===this.currentTime)}get ended(){return Boolean(this.media.ended)}set currentTime(e){if(!this.duration)return;const t=is.number(e)&&e>0;this.media.currentTime=t?Math.min(e,this.duration):0,this.debug.log(`Seeking to ${this.currentTime} seconds`)}get currentTime(){return Number(this.media.currentTime)}get buffered(){const{buffered:e}=this.media;return is.number(e)?e:e&&e.length&&this.duration>0?e.end(0)/this.duration:0}get seeking(){return Boolean(this.media.seeking)}get duration(){const e=Number.parseFloat(this.config.duration),t=(this.media||{}).duration,i=is.number(t)&&t!==1/0?t:0;return e||i}set volume(e){let t=e;is.string(t)&&(t=Number(t)),is.number(t)||(t=this.storage.get("volume")),is.number(t)||({volume:t}=this.config),t>1&&(t=1),t<0&&(t=0),this.config.volume=t,this.media.volume=t,!is.empty(e)&&this.muted&&t>0&&(this.muted=!1)}get volume(){return Number(this.media.volume)}set muted(e){let t=e;is.boolean(t)||(t=this.storage.get("muted")),is.boolean(t)||(t=this.config.muted),this.config.muted=t,this.media.muted=t}get muted(){return Boolean(this.media.muted)}get hasAudio(){return!this.isHTML5||(!!this.isAudio||(Boolean(this.media.mozHasAudio)||Boolean(this.media.webkitAudioDecodedByteCount)||Boolean(this.media.audioTracks&&this.media.audioTracks.length)))}set speed(e){let t=null;is.number(e)&&(t=e),is.number(t)||(t=this.storage.get("speed")),is.number(t)||(t=this.config.speed.selected);const{minimumSpeed:i,maximumSpeed:s}=this;t=clamp(t,i,s),this.config.speed.selected=t,setTimeout(()=>{this.media&&(this.media.playbackRate=t)},0)}get speed(){return Number(this.media.playbackRate)}get minimumSpeed(){return this.isYouTube?Math.min(...this.options.speed):this.isVimeo?.5:.0625}get maximumSpeed(){return this.isYouTube?Math.max(...this.options.speed):this.isVimeo?2:16}set quality(e){const t=this.config.quality,i=this.options.quality;if(!i.length)return;let s=[!is.empty(e)&&Number(e),this.storage.get("quality"),t.selected,t.default].find(is.number),n=!0;if(!i.includes(s)){const e=closest(i,s);this.debug.warn(`Unsupported quality option: ${s}, using ${e} instead`),s=e,n=!1}t.selected=s,this.media.quality=s,n&&this.storage.set({quality:s})}get quality(){return this.media.quality}set loop(e){const t=is.boolean(e)?e:this.config.loop.active;this.config.loop.active=t,this.media.loop=t}get loop(){return Boolean(this.media.loop)}set source(e){source.change.call(this,e)}get source(){return this.media.currentSrc}get download(){const{download:e}=this.config.urls;return is.url(e)?e:this.source}set download(e){is.url(e)&&(this.config.urls.download=e,controls.setDownloadUrl.call(this))}set poster(e){this.isVideo?ui.setPoster.call(this,e,!1).catch(()=>{}):this.debug.warn("Poster can only be set for video")}get poster(){return this.isVideo?this.media.getAttribute("poster")||this.media.getAttribute("data-poster"):null}get ratio(){if(!this.isVideo)return null;const e=reduceAspectRatio(getAspectRatio.call(this));return is.array(e)?e.join(":"):e}set ratio(e){this.isVideo?is.string(e)&&validateAspectRatio(e)?(this.config.ratio=reduceAspectRatio(e),setAspectRatio.call(this)):this.debug.error(`Invalid aspect ratio specified (${e})`):this.debug.warn("Aspect ratio can only be set for video")}set autoplay(e){this.config.autoplay=is.boolean(e)?e:this.config.autoplay}get autoplay(){return Boolean(this.config.autoplay)}toggleCaptions(e){captions.toggle.call(this,e,!1)}set currentTrack(e){captions.set.call(this,e,!1),captions.setup.call(this)}get currentTrack(){const{toggled:e,currentTrack:t}=this.captions;return e?t:-1}set language(e){captions.setLanguage.call(this,e,!1)}get language(){return(captions.getCurrentTrack.call(this)||{}).language}set pip(e){if(!support.pip)return;const t=is.boolean(e)?e:!this.pip;is.function(this.media.webkitSetPresentationMode)&&this.media.webkitSetPresentationMode(t?pip.active:pip.inactive),is.function(this.media.requestPictureInPicture)&&(!this.pip&&t?this.media.requestPictureInPicture():this.pip&&!t&&document.exitPictureInPicture())}get pip(){return support.pip?is.empty(this.media.webkitPresentationMode)?this.media===document.pictureInPictureElement:this.media.webkitPresentationMode===pip.active:null}setPreviewThumbnails(e){this.previewThumbnails&&this.previewThumbnails.loaded&&(this.previewThumbnails.destroy(),this.previewThumbnails=null),Object.assign(this.config.previewThumbnails,e),this.config.previewThumbnails.enabled&&(this.previewThumbnails=new PreviewThumbnails(this))}static supported(e,t){return support.check(e,t)}static loadSprite(e,t){return loadSprite(e,t)}static setup(e,t={}){let i=null;return is.string(e)?i=Array.from(document.querySelectorAll(e)):is.nodeList(e)?i=Array.from(e):is.array(e)&&(i=e.filter(is.element)),is.empty(i)?null:i.map(e=>new Plyr(e,t))}}Plyr.defaults=cloneDeep(defaults);export{Plyr as default};
\ No newline at end of file
diff --git a/scripts/build-pages.mjs b/scripts/build-pages.mjs
new file mode 100644
index 0000000..7ad4861
--- /dev/null
+++ b/scripts/build-pages.mjs
@@ -0,0 +1,124 @@
+import fs from "node:fs";
+import path from "node:path";
+
+const rootDir = process.cwd();
+const srcPagesDir = path.join(rootDir, "src", "pages");
+const srcPartialsDir = path.join(rootDir, "src", "partials");
+const outDir = path.join(rootDir, "public");
+
+const includeRe = /\{\{\>\s*([a-z0-9-]+)\s*\}\}/gi;
+const varRe = /\{\{\s*([a-zA-Z0-9_]+)\s*\}\}/g;
+
+function readUtf8(filePath) {
+  return fs.readFileSync(filePath, "utf8");
+}
+
+function walkHtmlFiles(dir, acc = []) {
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+  for (const entry of entries) {
+    const abs = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      walkHtmlFiles(abs, acc);
+      continue;
+    }
+    if (entry.isFile() && entry.name.endsWith(".html")) {
+      acc.push(abs);
+    }
+  }
+  return acc;
+}
+
+function loadPartials() {
+  const partialMap = new Map();
+  for (const filePath of walkHtmlFiles(srcPartialsDir)) {
+    const name = path.basename(filePath, ".html");
+    partialMap.set(name, readUtf8(filePath));
+  }
+  return partialMap;
+}
+
+function renderTemplate(input, partials, vars, stack = []) {
+  const withIncludes = input.replace(includeRe, (_, name) => {
+    const key = String(name).trim();
+    if (!partials.has(key)) {
+      throw new Error(`Partial "${key}" not found`);
+    }
+    if (stack.includes(key)) {
+      throw new Error(`Circular partial include: ${[...stack, key].join(" -> ")}`);
+    }
+    const partialContent = partials.get(key);
+    return renderTemplate(partialContent, partials, vars, [...stack, key]);
+  });
+
+  return withIncludes.replace(varRe, (_, name) => {
+    const key = String(name).trim();
+    if (Object.prototype.hasOwnProperty.call(vars, key)) {
+      return String(vars[key]);
+    }
+    return `{{${key}}}`;
+  });
+}
+
+function ensureDir(dirPath) {
+  fs.mkdirSync(dirPath, { recursive: true });
+}
+
+/** На странице кейса убираем из HTML карусели карточку со ссылкой на текущий файл (href уже с подставленным casesPrefix). */
+function stripCurrentCasePortfolioCarouselItem(html, omitHrefBasename) {
+  if (!omitHrefBasename) return html;
+  const hrefDouble = `href="${omitHrefBasename}"`;
+  const hrefSingle = `href='${omitHrefBasename}'`;
+  const itemClass = "projects-carousel__item";
+  let search = 0;
+  while (true) {
+    const i = html.indexOf("<article", search);
+    if (i === -1) return html;
+    const tagEnd = html.indexOf(">", i);
+    if (tagEnd === -1) return html;
+    const openTag = html.slice(i, tagEnd + 1);
+    if (!openTag.includes(itemClass)) {
+      search = i + 9;
+      continue;
+    }
+    const contentStart = tagEnd + 1;
+    const closeIdx = html.indexOf("</article>", contentStart);
+    if (closeIdx === -1) return html;
+    const afterArticle = closeIdx + "</article>".length;
+    const block = html.slice(i, afterArticle);
+    if (block.includes(hrefDouble) || block.includes(hrefSingle)) {
+      return html.slice(0, i) + html.slice(afterArticle);
+    }
+    search = contentStart;
+  }
+}
+
+function build() {
+  const partials = loadPartials();
+  const pageFiles = walkHtmlFiles(srcPagesDir);
+
+  for (const pagePath of pageFiles) {
+    const rel = path.relative(srcPagesDir, pagePath);
+    const outPath = path.join(outDir, rel);
+    const pageDirRel = path.dirname(rel);
+    const depth = pageDirRel === "." ? 0 : pageDirRel.split(path.sep).length;
+
+    const vars = {
+      assetPrefix: depth === 0 ? "" : "../".repeat(depth),
+      casesPrefix: depth === 0 ? "cases/" : "",
+    };
+
+    const source = readUtf8(pagePath);
+    let rendered = renderTemplate(source, partials, vars);
+    const relNorm = rel.split(path.sep).join("/");
+    if (relNorm.startsWith("cases/")) {
+      const omitFile = path.basename(pagePath);
+      rendered = stripCurrentCasePortfolioCarouselItem(rendered, omitFile);
+    }
+    ensureDir(path.dirname(outPath));
+    fs.writeFileSync(outPath, rendered, "utf8");
+  }
+
+  console.log(`Built ${pageFiles.length} pages into public/`);
+}
+
+build();
diff --git a/scripts/convert-videos.mjs b/scripts/convert-videos.mjs
new file mode 100644
index 0000000..335aa16
--- /dev/null
+++ b/scripts/convert-videos.mjs
@@ -0,0 +1,400 @@
+/**
+ * Сканирует папку с .mp4, создаёт рядом .webm и .webp (превью).
+ * Пропускает ролик, если уже есть оба выхода с тем же базовым именем.
+ * Недостающие из пары — догенерирует.
+ *
+ * Требуется: ffmpeg и ffprobe в PATH.
+ *
+ * Использование: node scripts/convert-videos.mjs <папка_с_роликами>
+ */
+
+import { execFile, execFileSync, spawn } from "node:child_process";
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const projectRoot = path.resolve(__dirname, "..");
+
+const isTty = process.stdout.isTTY;
+
+function hasBin(name) {
+  try {
+    execFileSync(name, ["-version"], { stdio: "ignore" });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function getDurationSec(inputPath) {
+  const out = execFileSync("ffprobe", [
+    "-v",
+    "error",
+    "-show_entries",
+    "format=duration",
+    "-of",
+    "default=nw=1:nk=1",
+    inputPath,
+  ], { encoding: "utf8" });
+  const n = parseFloat(String(out).trim());
+  return Number.isFinite(n) && n > 0 ? n : 0.1;
+}
+
+function hasAudioStream(inputPath) {
+  try {
+    const o = execFileSync(
+      "ffprobe",
+      [
+        "-v",
+        "error",
+        "-select_streams",
+        "a:0",
+        "-show_entries",
+        "stream=index",
+        "-of",
+        "csv=p=0",
+        inputPath,
+      ],
+      { encoding: "utf8" },
+    );
+    return o.trim().length > 0;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * @param {string[]} ffmpegArgs аргументы без префикса `ffmpeg` (с `-i` и в конце выход)
+ * @param {{ durationSec: number, onProgress: (p: number) => void }} o
+ */
+function runFfmpegProgress(ffmpegArgs, { durationSec, onProgress }) {
+  const totalMs = Math.max(1, Math.round(durationSec * 1000));
+  const allArgs = [
+    "-hide_banner",
+    "-y",
+    "-loglevel",
+    "error",
+    "-progress",
+    "pipe:1",
+    ...ffmpegArgs,
+  ];
+  return new Promise((resolve, reject) => {
+    const child = spawn("ffmpeg", allArgs, {
+      stdio: ["ignore", "pipe", "pipe"],
+      windowsHide: true,
+    });
+    onProgress(0);
+    let outBuf = "";
+    let errBuf = "";
+    let lastPct = -1;
+    let lastLogTs = 0;
+    if (child.stdout) {
+      child.stdout.setEncoding("utf8");
+      child.stdout.on("data", (chunk) => {
+        outBuf += chunk;
+        for (;;) {
+          const nl = outBuf.indexOf("\n");
+          if (nl < 0) break;
+          const line = outBuf.slice(0, nl);
+          outBuf = outBuf.slice(nl + 1);
+          if (line.startsWith("out_time_ms=")) {
+            const ms = parseInt(line.slice("out_time_ms=".length), 10);
+            if (!Number.isFinite(ms)) continue;
+            const pct = Math.min(100, (ms / totalMs) * 100);
+            const now = Date.now();
+            const tick =
+              isTty
+                ? pct - lastPct >= 0.3 || now - lastLogTs > 200
+                : Math.floor(pct) > Math.floor(lastPct) && Math.floor(pct) % 5 === 0;
+            if (tick && pct > lastPct) {
+              lastPct = pct;
+              lastLogTs = now;
+              onProgress(pct);
+            }
+          }
+        }
+      });
+    }
+    if (child.stderr) {
+      child.stderr.setEncoding("utf8");
+      child.stderr.on("data", (d) => {
+        errBuf += d;
+      });
+    }
+    child.on("error", reject);
+    child.on("close", (code) => {
+      if (code === 0) {
+        onProgress(100);
+        resolve();
+      } else {
+        reject(
+          new Error(
+            (errBuf && errBuf.trim()) || `ffmpeg завершился с кодом ${code}`,
+          ),
+        );
+      }
+    });
+  });
+}
+
+function runFfmpegQuiet(ffmpegArgs) {
+  return new Promise((resolve, reject) => {
+    execFile("ffmpeg", ["-hide_banner", "-y", ...ffmpegArgs], (err) => {
+      if (err) reject(err);
+      else resolve();
+    });
+  });
+}
+
+/**
+ * @param {object} p
+ * @param {number} p.fileIndex 1..fileTotal
+ * @param {number} p.fileTotal
+ * @param {number} p.stepIndex текущий шаг 0..totalSteps-1
+ * @param {number} p.totalSteps
+ * @param {string} p.name basename mp4
+ * @param {string} p.label webm|webp
+ * @param {number} p.stepPct 0..100 внутри шага
+ */
+function renderStatus(p) {
+  const overall =
+    p.totalSteps > 0
+      ? ((p.stepIndex + p.stepPct / 100) / p.totalSteps) * 100
+      : 100;
+  const s = `Общий: ${overall.toFixed(0)}% | ролик ${p.fileIndex}/${p.fileTotal}: ${p.name} | ${p.label} ${p.stepPct.toFixed(0)}%`;
+  if (isTty) {
+    process.stdout.write(`\r\x1B[K${s}`);
+  } else {
+    const now = Date.now();
+    if (!p._last || now - p._last > 500 || p.stepPct >= 100) {
+      p._last = now;
+      console.log(s);
+    }
+  }
+}
+
+async function toWebm(inputPath, outPath, statusCtx) {
+  const a = [
+    "-i",
+    inputPath,
+    "-c:v",
+    "libvpx-vp9",
+    "-crf",
+    "32",
+    "-b:v",
+    "0",
+  ];
+  if (hasAudioStream(inputPath)) {
+    a.push("-c:a", "libopus", "-b:a", "128k");
+  } else {
+    a.push("-an");
+  }
+  a.push(outPath);
+  const d = getDurationSec(inputPath);
+  await runFfmpegProgress(a, {
+    durationSec: d,
+    onProgress: (pct) => {
+      if (statusCtx) {
+        statusCtx.stepPct = pct;
+        renderStatus(statusCtx);
+      }
+    },
+  });
+}
+
+/** Превью: один кадр, timestamp ~ min(1 c, 10% длительности), max ширина 1280. */
+async function toWebpPreview(inputPath, outPath) {
+  const d = getDurationSec(inputPath);
+  const ss = Math.min(1, Math.max(0, d * 0.1));
+  await runFfmpegQuiet([
+    "-ss",
+    String(ss),
+    "-i",
+    inputPath,
+    "-vframes",
+    "1",
+    "-vf",
+    "scale=1280:-1:flags=lanczos",
+    "-c:v",
+    "libwebp",
+    "-quality",
+    "85",
+    outPath,
+  ]);
+}
+
+function listMp4(dir) {
+  const names = fs.readdirSync(dir, { withFileTypes: true });
+  return names
+    .filter((d) => d.isFile() && d.name.toLowerCase().endsWith(".mp4"))
+    .map((d) => path.join(dir, d.name));
+}
+
+async function main() {
+  const raw = process.argv[2];
+  if (!raw) {
+    console.error("Укажи папку: node scripts/convert-videos.mjs <папка>");
+    process.exit(1);
+  }
+  const targetDir = path.resolve(projectRoot, raw);
+  if (!fs.existsSync(targetDir) || !fs.statSync(targetDir).isDirectory()) {
+    console.error("Папка не найдена или не каталог:", targetDir);
+    process.exit(1);
+  }
+  if (!hasBin("ffmpeg") || !hasBin("ffprobe")) {
+    console.error("Нужны ffmpeg и ffprobe в PATH.");
+    process.exit(1);
+  }
+
+  const mp4s = listMp4(targetDir);
+  if (mp4s.length === 0) {
+    console.log("В папке нет .mp4:", targetDir);
+    return;
+  }
+
+  let skipped = 0;
+  /** @type {{ mp4: string, base: string, webm: string, webp: string, needW: boolean, needP: boolean }[]} */
+  const jobs = [];
+  for (const mp4 of mp4s) {
+    const base = path.join(
+      path.dirname(mp4),
+      path.basename(mp4, path.extname(mp4)),
+    );
+    const webm = base + ".webm";
+    const webp = base + ".webp";
+    const haveWebm = fs.existsSync(webm);
+    const haveWebp = fs.existsSync(webp);
+    if (haveWebm && haveWebp) {
+      skipped += 1;
+      continue;
+    }
+    jobs.push({
+      mp4,
+      base,
+      webm,
+      webp,
+      needW: !haveWebm,
+      needP: !haveWebp,
+    });
+  }
+
+  if (skipped > 0) {
+    console.log(
+      `Пропущено (уже webm+webp): ${skipped} из ${mp4s.length} роликов.`,
+    );
+  }
+  const totalSteps = jobs.reduce(
+    (n, j) => n + (j.needW ? 1 : 0) + (j.needP ? 1 : 0),
+    0,
+  );
+  if (jobs.length === 0) {
+    console.log("Конвертировать нечего.");
+    return;
+  }
+  console.log(
+    `К конвертации: ${jobs.length} роликов, шагов кодирования: ${totalSteps}.`,
+  );
+
+  let stepIndex = 0;
+  const fileTotal = jobs.length;
+  for (let fi = 0; fi < jobs.length; fi += 1) {
+    const j = jobs[fi];
+    const name = path.basename(j.mp4);
+    const fileIndex = fi + 1;
+    const rel = path.relative(projectRoot, j.mp4) || j.mp4;
+    try {
+      if (j.needW) {
+        if (!isTty) {
+          console.log(
+            `Ролик ${fileIndex}/${fileTotal}: ${name} — webm (шаг ${stepIndex + 1}/${totalSteps})`,
+          );
+        } else {
+          process.stdout.write(
+            `\nРолик ${fileIndex}/${fileTotal}: ${name} — webm\n`,
+          );
+        }
+        const ctx = isTty
+          ? {
+              fileIndex,
+              fileTotal,
+              stepIndex,
+              totalSteps,
+              name,
+              label: "webm",
+              stepPct: 0,
+            }
+          : {
+              fileIndex,
+              fileTotal,
+              stepIndex,
+              totalSteps,
+              name,
+              label: "webm",
+              stepPct: 0,
+              _last: 0,
+            };
+        await toWebm(j.mp4, j.webm, ctx);
+        if (isTty) {
+          process.stdout.write("\n");
+        }
+        stepIndex += 1;
+      } else {
+        if (!isTty) {
+          console.log(
+            `Ролик ${fileIndex}/${fileTotal}: ${name} — webm уже есть.`,
+          );
+        }
+      }
+
+      if (j.needP) {
+        if (!isTty) {
+          console.log(
+            `Ролик ${fileIndex}/${fileTotal}: ${name} — webp (шаг ${stepIndex + 1}/${totalSteps})`,
+          );
+        } else {
+          if (!j.needW) {
+            process.stdout.write(
+              `\nРолик ${fileIndex}/${fileTotal}: ${name} — webp\n`,
+            );
+          }
+          const overall = (stepIndex / totalSteps) * 100;
+          process.stdout.write(
+            `\r\x1B[KОбщий: ${overall.toFixed(0)}% | ролик ${fileIndex}/${fileTotal}: ${name} | webp …`,
+          );
+        }
+        await toWebpPreview(j.mp4, j.webp);
+        if (isTty) {
+          const o = ((stepIndex + 1) / totalSteps) * 100;
+          process.stdout.write(
+            `\r\x1B[KОбщий: ${o.toFixed(0)}% | ролик ${fileIndex}/${fileTotal}: ${name} | webp 100%`,
+          );
+          process.stdout.write("\n");
+        } else {
+          const o = ((stepIndex + 1) / totalSteps) * 100;
+          console.log(`Общий: ${o.toFixed(0)}% | webp готово — ${rel}`);
+        }
+        stepIndex += 1;
+      } else if (j.needW && !j.needP && !isTty) {
+        console.log(
+          `Ролик ${fileIndex}/${fileTotal}: ${name} — webp уже есть.`,
+        );
+      }
+    } catch (e) {
+      if (isTty) {
+        process.stdout.write("\n");
+      }
+      console.error("Ошибка для", rel, e.message || e);
+      process.exitCode = 1;
+    }
+  }
+  if (isTty) {
+    process.stdout.write(
+      `\r\x1B[KГотово: ${jobs.length} роликов, ${totalSteps} шагов.\n`,
+    );
+  } else {
+    console.log(`Готово: ${jobs.length} роликов, ${totalSteps} шагов.`);
+  }
+}
+
+main();
diff --git a/scripts/copy-vendor.mjs b/scripts/copy-vendor.mjs
new file mode 100644
index 0000000..769cf1a
--- /dev/null
+++ b/scripts/copy-vendor.mjs
@@ -0,0 +1,151 @@
+/**
+ * Копирует Plyr и шрифты из node_modules в public/ (автономный деплой без CDN).
+ * Plyr: 3.8.4 (package.json)
+ */
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const root = path.resolve(__dirname, "..");
+const nodeModules = path.join(root, "node_modules");
+const publicDir = path.join(root, "public");
+const plyrOut = path.join(publicDir, "vendor", "plyr");
+const fontsOut = path.join(publicDir, "assets", "fonts");
+const fontsFilesOut = path.join(fontsOut, "files");
+
+const PLYR_VERSION = "3.8.4";
+
+/** @type {{ id: string, sources: { pkg: string, css: string, familyReplace?: [string, string] }[] }[]} */
+const FONT_BUNDLES = [
+  {
+    id: "merriweather",
+    sources: [
+      { pkg: "@fontsource/alice", css: "400.css" },
+      { pkg: "@fontsource/merriweather", css: "400.css" },
+      { pkg: "@fontsource/merriweather", css: "700.css" },
+    ],
+  },
+  {
+    id: "geologica",
+    sources: [
+      {
+        pkg: "@fontsource-variable/geologica",
+        css: "wght.css",
+        familyReplace: ["Geologica Variable", "Geologica"],
+      },
+      { pkg: "@fontsource/pt-sans", css: "400.css" },
+      { pkg: "@fontsource/pt-sans", css: "700.css" },
+    ],
+  },
+  {
+    id: "mono",
+    sources: [
+      { pkg: "@fontsource/pt-mono", css: "400.css" },
+      { pkg: "@fontsource/source-code-pro", css: "400.css" },
+      { pkg: "@fontsource/source-code-pro", css: "500.css" },
+      { pkg: "@fontsource/source-code-pro", css: "600.css" },
+      { pkg: "@fontsource/source-code-pro", css: "700.css" },
+    ],
+  },
+];
+
+function ensureDir(dir) {
+  fs.mkdirSync(dir, { recursive: true });
+}
+
+function emptyDir(dir) {
+  if (!fs.existsSync(dir)) return;
+  for (const name of fs.readdirSync(dir)) {
+    fs.rmSync(path.join(dir, name), { recursive: true, force: true });
+  }
+}
+
+function copyPlyr() {
+  const dist = path.join(nodeModules, "plyr", "dist");
+  for (const name of ["plyr.css", "plyr.min.mjs"]) {
+    const src = path.join(dist, name);
+    if (!fs.existsSync(src)) {
+      throw new Error(`Plyr file not found: ${src}. Run npm install.`);
+    }
+  }
+  emptyDir(plyrOut);
+  ensureDir(plyrOut);
+  fs.copyFileSync(path.join(dist, "plyr.css"), path.join(plyrOut, "plyr.css"));
+  fs.copyFileSync(path.join(dist, "plyr.min.mjs"), path.join(plyrOut, "plyr.min.mjs"));
+  console.log(`Plyr ${PLYR_VERSION} -> public/vendor/plyr/`);
+}
+
+const woff2Re = /url\(\.\/files\/([^)]+\.woff2)\)/g;
+
+function transformFontCss(raw, familyReplace) {
+  let out = raw;
+  if (familyReplace) {
+    const [from, to] = familyReplace;
+    out = out.split(`'${from}'`).join(`'${to}'`);
+    out = out.split(`"${from}"`).join(`"${to}"`);
+  }
+  out = out.replace(/,\s*url\(\.\/files\/[^)]+\.woff\)/g, "");
+  out = out.replace(/\s+format\(['"]woff['"]\)/g, "");
+  return out;
+}
+
+function collectWoff2Files(cssText) {
+  const names = new Set();
+  let m;
+  woff2Re.lastIndex = 0;
+  while ((m = woff2Re.exec(cssText)) !== null) {
+    names.add(m[1]);
+  }
+  return names;
+}
+
+function buildFontBundles() {
+  emptyDir(fontsFilesOut);
+  ensureDir(fontsFilesOut);
+
+  const copied = new Set();
+
+  for (const bundle of FONT_BUNDLES) {
+    const blocks = [];
+
+    for (const source of bundle.sources) {
+      const pkgDir = path.join(nodeModules, source.pkg);
+      const cssPath = path.join(pkgDir, source.css);
+      if (!fs.existsSync(cssPath)) {
+        throw new Error(`Font CSS not found: ${cssPath}`);
+      }
+      const raw = fs.readFileSync(cssPath, "utf8");
+      const transformed = transformFontCss(raw, source.familyReplace);
+      blocks.push(transformed.trim());
+
+      const filesDir = path.join(pkgDir, "files");
+      for (const fileName of collectWoff2Files(transformed)) {
+        const srcFile = path.join(filesDir, fileName);
+        const dstFile = path.join(fontsFilesOut, fileName);
+        if (!fs.existsSync(srcFile)) {
+          throw new Error(`Font file not found: ${srcFile}`);
+        }
+        if (!copied.has(fileName)) {
+          fs.copyFileSync(srcFile, dstFile);
+          copied.add(fileName);
+        }
+      }
+    }
+
+    const outCss = `${blocks.join("\n\n")}\n`;
+    const outPath = path.join(fontsOut, `${bundle.id}.css`);
+    fs.writeFileSync(outPath, outCss, "utf8");
+    console.log(`${bundle.id}.css (${copied.size} woff2 total so far) -> public/assets/fonts/`);
+  }
+
+  console.log(`Font files: ${copied.size} woff2 in public/assets/fonts/files/`);
+}
+
+function main() {
+  copyPlyr();
+  buildFontBundles();
+  console.log("vendor:copy done.");
+}
+
+main();
diff --git a/scripts/deploy-vps.mjs b/scripts/deploy-vps.mjs
new file mode 100644
index 0000000..7cddeeb
--- /dev/null
+++ b/scripts/deploy-vps.mjs
@@ -0,0 +1,179 @@
+/**
+ * Инкрементальный деплой public/ на VPS в Docker volume nginx.
+ * Загружает только изменённые файлы через tar-пайп над SSH (одно соединение).
+ *
+ * Использование:
+ *   node scripts/deploy-vps.mjs [sourceDir]
+ */
+
+import path from "node:path";
+import fs from "node:fs";
+import os from "node:os";
+import { execFile, spawn } from "node:child_process";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const projectRoot = path.resolve(__dirname, "..");
+
+const SSH_KEY = path.join(os.homedir(), ".ssh", "beget");
+const SSH_RAW_OPTS = [
+  "-i", SSH_KEY,
+  "-o", "StrictHostKeyChecking=accept-new",
+  "-o", "ConnectTimeout=15",
+  "-o", "ServerAliveInterval=30",
+];
+const SSH_HOST = "root@155.212.186.39";
+const TARGET_DIR = "/var/lib/docker/volumes/s9mrcps8xw02r1dak0fsznix-www-data/_data";
+const MANIFEST_PATH = path.join(projectRoot, ".deploy-manifest.json");
+
+const SOURCE_DIR = (() => {
+  const raw = process.argv[2] ?? "public";
+  return path.isAbsolute(raw) ? raw : path.resolve(projectRoot, raw);
+})();
+
+function ssh(args) {
+  return new Promise((resolve, reject) => {
+    execFile("ssh", [...SSH_RAW_OPTS, SSH_HOST, ...args], { maxBuffer: 1024 * 1024 }, (err, stdout) => {
+      if (err) reject(new Error((err.stderr || "").trim() || err.message));
+      else resolve((stdout || "").trim());
+    });
+  });
+}
+
+function scanFiles(dir) {
+  const entries = [];
+  const walk = (current, relative) => {
+    for (const entry of fs.readdirSync(current, { withFileTypes: true })) {
+      const rel = relative ? `${relative}/${entry.name}` : entry.name;
+      const full = path.join(current, entry.name);
+      if (entry.isDirectory()) {
+        walk(full, rel);
+      } else if (entry.isFile()) {
+        const stat = fs.statSync(full);
+        entries.push({
+          relPath: rel.replace(/\\/g, "/"),
+          mtime: stat.mtimeMs,
+          size: stat.size,
+        });
+      }
+    }
+  };
+  walk(dir, "");
+  return entries;
+}
+
+function loadManifest() {
+  try {
+    return JSON.parse(fs.readFileSync(MANIFEST_PATH, "utf-8"));
+  } catch {
+    return {};
+  }
+}
+
+function saveManifest(manifest) {
+  fs.writeFileSync(MANIFEST_PATH, JSON.stringify(manifest, null, 2), "utf-8");
+}
+
+/** Загрузить изменённые файлы одним tar-пайпом через SSH */
+function uploadViaTar(filePaths, sourceDir) {
+  return new Promise((resolve, reject) => {
+    const listPath = path.join(os.tmpdir(), `deploy-files-${Date.now()}.txt`);
+    fs.writeFileSync(listPath, filePaths.join("\n"), "utf-8");
+
+    // cwd вместо -C — обходит баг bsdtar с кириллицей в пути
+    const tar = spawn("tar", [
+      "-c",
+      `--files-from=${listPath}`,
+      "--format=ustar",
+    ], { cwd: sourceDir });
+
+    const sshProc = spawn("ssh", [
+      ...SSH_RAW_OPTS,
+      SSH_HOST,
+      `tar xf - -C ${TARGET_DIR}`,
+    ]);
+
+    tar.stdout.pipe(sshProc.stdin);
+
+    let stderrChunks = [];
+    sshProc.stderr.on("data", (d) => { stderrChunks.push(d); });
+    tar.stderr.on("data", (d) => { stderrChunks.push(d); });
+
+    function cleanup() {
+      try { fs.unlinkSync(listPath); } catch { /* ok */ }
+    }
+
+    sshProc.on("close", (code) => {
+      cleanup();
+      if (code !== 0) {
+        const msg = Buffer.concat(stderrChunks).toString().trim();
+        reject(new Error(msg || `ssh exited with code ${code}`));
+      } else {
+        resolve();
+      }
+    });
+
+    sshProc.on("error", (err) => { cleanup(); reject(err); });
+    tar.on("error", (err) => { cleanup(); sshProc.kill(); reject(err); });
+  });
+}
+
+async function deploy() {
+  // 1. Убедиться, что целевая директория существует
+  console.log("Проверка соединения...");
+  await ssh([`mkdir -p ${TARGET_DIR}`]);
+
+  // 2. Сравнить локальные файлы с манифестом
+  console.log("Сканирование...");
+  const localFiles = scanFiles(SOURCE_DIR);
+  const manifest = loadManifest();
+
+  const changedPaths = [];
+  for (const f of localFiles) {
+    const prev = manifest[f.relPath];
+    if (!prev || prev.mtime !== f.mtime || prev.size !== f.size) {
+      changedPaths.push(f.relPath);
+    }
+  }
+
+  const localPaths = new Set(localFiles.map((f) => f.relPath));
+  const removedPaths = Object.keys(manifest).filter((p) => !localPaths.has(p));
+
+  if (changedPaths.length === 0 && removedPaths.length === 0) {
+    console.log("Изменений нет — деплой не требуется.");
+    return;
+  }
+
+  console.log(`Изменено/новых: ${changedPaths.length}, удалено: ${removedPaths.length}`);
+
+  // 3. Загрузить изменённые файлы одним tar-пайпом
+  if (changedPaths.length > 0) {
+    console.log("Загрузка файлов...");
+    await uploadViaTar(changedPaths, SOURCE_DIR);
+    console.log("Загрузка завершена.");
+  }
+
+  // 4. Удалить файлы, которых больше нет локально
+  if (removedPaths.length > 0) {
+    console.log("Удаление лишних файлов...");
+    const rmList = removedPaths.map((p) => `${TARGET_DIR}/${p}`).join(" ");
+    await ssh([`rm -f ${rmList}`]);
+    await ssh([`find ${TARGET_DIR} -type d -empty -delete 2>/dev/null || true`]);
+  }
+
+  // 5. Обновить манифест
+  saveManifest(
+    Object.fromEntries(localFiles.map((f) => [f.relPath, { mtime: f.mtime, size: f.size }])),
+  );
+}
+
+const relDir = path.relative(projectRoot, SOURCE_DIR);
+
+deploy()
+  .then(() => {
+    console.log(`Готово: ${relDir}/ → ${SSH_HOST}:${TARGET_DIR}`);
+  })
+  .catch((err) => {
+    console.error("Ошибка деплоя:", err.message || err);
+    process.exit(1);
+  });
diff --git a/scripts/optimize-images.mjs b/scripts/optimize-images.mjs
new file mode 100644
index 0000000..8f08790
--- /dev/null
+++ b/scripts/optimize-images.mjs
@@ -0,0 +1,135 @@
+/**
+ * Рекурсивно обрабатывает .png, .jpg, .jpeg в указанной папке, создаёт рядом
+ * `то же имя.webp` с тем же размером. Качество WebP высокое (90), без смены разрешения.
+ *
+ * Пропуск: если рядом уже есть .webp с временем изменения ≥ исходника — пропуск
+ * (кроме --force). Для догенерации после правки картинки — удали webp или дай --force.
+ *
+ * Использование: node scripts/optimize-images.mjs <папка> [--force]
+ */
+
+import path from "node:path";
+import fsp from "node:fs/promises";
+import { fileURLToPath } from "node:url";
+import sharp from "sharp";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const projectRoot = path.resolve(__dirname, "..");
+
+const IMAGE_EXT = new Set([".png", ".jpg", ".jpeg"]);
+/** @type {import('sharp').WebpOptions} */
+const WEBP = {
+  quality: 90,
+  alphaQuality: 100,
+  effort: 4,
+};
+
+/**
+ * @param {string} dir
+ * @returns {AsyncGenerator<string, void, void>}
+ */
+async function* walkFiles(dir) {
+  let entries;
+  try {
+    entries = await fsp.readdir(dir, { withFileTypes: true });
+  } catch (e) {
+    console.error("Не открылась папка:", dir, e);
+    return;
+  }
+  for (const e of entries) {
+    const full = path.join(dir, e.name);
+    if (e.isDirectory()) yield* walkFiles(full);
+    else if (e.isFile()) yield full;
+  }
+}
+
+/**
+ * @param {string} p
+ */
+async function mtime(p) {
+  const s = await fsp.stat(p);
+  return s.mtimeMs;
+}
+
+/**
+ * @param {string} inputPath
+ * @param {string} outPath
+ * @param {boolean} force
+ */
+async function shouldSkip(inputPath, outPath, force) {
+  if (force) return false;
+  try {
+    const [tin, tout] = await Promise.all([mtime(inputPath), mtime(outPath)]);
+    return tout >= tin;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * @param {string} inputPath
+ * @param {string} outPath
+ */
+async function toWebp(inputPath, outPath) {
+  await sharp(inputPath).webp(WEBP).toFile(outPath);
+}
+
+function parseArgs(argv) {
+  const rest = argv.slice(2);
+  const force = rest.includes("--force");
+  const folder = rest.filter((a) => a !== "--force")[0];
+  return { folder, force };
+}
+
+const { folder, force } = parseArgs(process.argv);
+
+if (!folder) {
+  console.error(
+    "Укажи папку с картинками.\n" +
+      "  node scripts/optimize-images.mjs <папка> [--force]\n" +
+      "  npm run optimize-images -- <папка> [--force]",
+  );
+  process.exit(1);
+}
+
+const root = path.isAbsolute(folder) ? folder : path.resolve(projectRoot, folder);
+
+try {
+  const st = await fsp.stat(root);
+  if (!st.isDirectory()) {
+    console.error("Не папка:", root);
+    process.exit(1);
+  }
+} catch {
+  console.error("Папка не найдена:", root);
+  process.exit(1);
+}
+
+let done = 0;
+let skipped = 0;
+let err = 0;
+
+for await (const filePath of walkFiles(root)) {
+  const ext = path.extname(filePath).toLowerCase();
+  if (!IMAGE_EXT.has(ext)) continue;
+
+  const outPath = filePath.replace(/\.(png|jpe?g)$/i, ".webp");
+  if (outPath === filePath) continue;
+
+  try {
+    if (await shouldSkip(filePath, outPath, force)) {
+      skipped += 1;
+      console.log("пропуск (уже свежее):", path.relative(projectRoot, outPath));
+      continue;
+    }
+    await toWebp(filePath, outPath);
+    done += 1;
+    console.log("ok:", path.relative(projectRoot, outPath));
+  } catch (e) {
+    err += 1;
+    console.error("ошибка:", filePath, e);
+  }
+}
+
+console.log(`\nготово: сгенерировано ${done}, пропущено ${skipped}, ошибок ${err}`);
+if (err > 0) process.exit(1);
diff --git a/scripts/serve-dev.mjs b/scripts/serve-dev.mjs
new file mode 100644
index 0000000..d38db5d
--- /dev/null
+++ b/scripts/serve-dev.mjs
@@ -0,0 +1,214 @@
+/**
+ * Локальный сервер: public/ + BrowserSync + API правок контента (только localhost).
+ */
+import browserSync from "browser-sync";
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const root = path.join(__dirname, "..");
+const publicDir = path.join(root, "public");
+const editsDir = path.join(root, "texts", "content-edits");
+const PENDING_FILE = path.join(editsDir, "pending.json");
+
+const PAGE_RE = /^[\w./-]+\.html$/;
+
+function ensureEditsDir() {
+  fs.mkdirSync(editsDir, { recursive: true });
+}
+
+function isLocalRequest(req) {
+  const host = (req.headers.host || "").split(":")[0];
+  return host === "localhost" || host === "127.0.0.1";
+}
+
+function readBody(req) {
+  return new Promise((resolve, reject) => {
+    const chunks = [];
+    req.on("data", (chunk) => chunks.push(chunk));
+    req.on("end", () => resolve(Buffer.concat(chunks).toString("utf8")));
+    req.on("error", reject);
+  });
+}
+
+function sendJson(res, status, data) {
+  res.statusCode = status;
+  res.setHeader("Content-Type", "application/json; charset=utf-8");
+  res.end(JSON.stringify(data));
+}
+
+function emptyPending() {
+  return { version: 2, updatedAt: null, items: [] };
+}
+
+function readPending() {
+  if (!fs.existsSync(PENDING_FILE)) return emptyPending();
+  try {
+    const data = JSON.parse(fs.readFileSync(PENDING_FILE, "utf8"));
+    if (!Array.isArray(data.items)) data.items = [];
+    data.version = 2;
+    return data;
+  } catch {
+    return emptyPending();
+  }
+}
+
+function writePending(data) {
+  data.version = 2;
+  data.updatedAt = new Date().toISOString();
+  data.items = data.items.map((item, index) => ({
+    ...item,
+    n: index + 1,
+  }));
+  fs.writeFileSync(PENDING_FILE, JSON.stringify(data, null, 2) + "\n", "utf8");
+  return data;
+}
+
+function legacyFileToPage(filename) {
+  const base = filename.replace(/\.json$/i, "");
+  return `${base.replace(/--/g, "/")}.html`;
+}
+
+function migrateLegacyFiles() {
+  if (!fs.existsSync(editsDir)) return;
+  const pending = readPending();
+  let changed = false;
+
+  for (const name of fs.readdirSync(editsDir)) {
+    if (name === "pending.json" || name === "README.md" || name === ".gitkeep") continue;
+    if (!name.endsWith(".json")) continue;
+
+    const legacyPath = path.join(editsDir, name);
+    let legacy;
+    try {
+      legacy = JSON.parse(fs.readFileSync(legacyPath, "utf8"));
+    } catch {
+      continue;
+    }
+
+    const page = legacy.page || legacyFileToPage(name);
+    const legacyItems = Array.isArray(legacy.items) ? legacy.items : [];
+    for (const item of legacyItems) {
+      if (!(item.instruction || "").trim()) continue;
+      pending.items.push({ ...item, page });
+      changed = true;
+    }
+    fs.unlinkSync(legacyPath);
+    changed = true;
+  }
+
+  if (changed) writePending(pending);
+}
+
+function itemsForPage(pending, page) {
+  return pending.items
+    .filter((item) => item.page === page && (item.instruction || "").trim())
+    .map((item, index) => ({ ...item, n: index + 1 }));
+}
+
+function mergePageItems(page, pageItems) {
+  const pending = readPending();
+  const trimmed = pageItems
+    .filter((item) => (item.instruction || "").trim())
+    .map((item) => ({ ...item, page }));
+  const others = pending.items.filter((item) => item.page !== page);
+  pending.items = [...others, ...trimmed];
+  return writePending(pending);
+}
+
+function contentEditsApi(req, res, next) {
+  const url = new URL(req.url || "/", "http://localhost");
+
+  if (!url.pathname.startsWith("/api/content-edits")) {
+    next();
+    return;
+  }
+
+  if (!isLocalRequest(req)) {
+    sendJson(res, 403, { error: "Forbidden" });
+    return;
+  }
+
+  ensureEditsDir();
+  migrateLegacyFiles();
+
+  const page = url.searchParams.get("page") || "";
+
+  if (req.method === "GET") {
+    const pending = readPending();
+    if (!page) {
+      sendJson(res, 200, pending);
+      return;
+    }
+    if (!PAGE_RE.test(page)) {
+      sendJson(res, 400, { error: "Invalid page" });
+      return;
+    }
+    sendJson(res, 200, {
+      version: 2,
+      page,
+      updatedAt: pending.updatedAt,
+      items: itemsForPage(pending, page),
+    });
+    return;
+  }
+
+  if (req.method === "PUT") {
+    readBody(req)
+      .then((body) => {
+        let payload;
+        try {
+          payload = JSON.parse(body);
+        } catch {
+          sendJson(res, 400, { error: "Invalid JSON" });
+          return;
+        }
+        const payloadPage = payload.page || page;
+        if (!PAGE_RE.test(payloadPage)) {
+          sendJson(res, 400, { error: "Invalid page" });
+          return;
+        }
+        if (page && payloadPage !== page) {
+          sendJson(res, 400, { error: "Page mismatch" });
+          return;
+        }
+        if (!Array.isArray(payload.items)) {
+          sendJson(res, 400, { error: "items must be array" });
+          return;
+        }
+        const pending = mergePageItems(payloadPage, payload.items);
+        sendJson(res, 200, {
+          version: 2,
+          page: payloadPage,
+          updatedAt: pending.updatedAt,
+          items: itemsForPage(pending, payloadPage),
+        });
+      })
+      .catch(() => sendJson(res, 500, { error: "Write failed" }));
+    return;
+  }
+
+  sendJson(res, 405, { error: "Method not allowed" });
+}
+
+ensureEditsDir();
+if (!fs.existsSync(PENDING_FILE)) {
+  writePending(emptyPending());
+}
+migrateLegacyFiles();
+
+browserSync.create().init({
+  server: {
+    baseDir: publicDir,
+    middleware: [contentEditsApi],
+  },
+  files: [path.join(publicDir, "**", "*")],
+  port: 4175,
+  ui: { port: 4176 },
+  notify: false,
+  open: false,
+  ghostMode: false,
+});
+
+console.log("serve-dev: http://localhost:4175 (public/, reload only public/**)");
diff --git a/scripts/sync-gitverse.mjs b/scripts/sync-gitverse.mjs
new file mode 100644
index 0000000..4eff033
--- /dev/null
+++ b/scripts/sync-gitverse.mjs
@@ -0,0 +1,162 @@
+/**
+ * Копирует содержимое папки public в папку gitverse.
+ * Файлы `.png` не копируются (на GitVerse достаточно WebP и прочих ассетов).
+ *
+ * По умолчанию:
+ *   node scripts/sync-gitverse.mjs
+ *   (копирует projectRoot/public -> projectRoot/gitverse)
+ *
+ * Можно передать свои пути:
+ *   node scripts/sync-gitverse.mjs <sourceDir> <targetDir>
+ */
+
+import path from "node:path";
+import os from "node:os";
+import fsp from "node:fs/promises";
+import { execFile, spawn } from "node:child_process";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const projectRoot = path.resolve(__dirname, "..");
+const PRESERVE_IN_TARGET = new Set([".git", ".gitverse"]);
+
+function shouldSkipGitverseFile(fileName) {
+  return path.extname(fileName).toLowerCase() === ".png";
+}
+const DEFAULT_SSH_KEY_PATH = path.join(os.homedir(), ".ssh", "id_ed25519_work");
+const GITVERSE_SITE_URL = "https://mamadaevv.gitverse.site/me/";
+
+/** Системный браузер по умолчанию (Windows / macOS / Linux). */
+function openUrlInDefaultBrowser(url) {
+  if (typeof url !== "string" || !/^https?:\/\//i.test(url)) return;
+  const opts = { detached: true, stdio: "ignore" };
+  let child;
+  if (process.platform === "win32") {
+    child = spawn("cmd", ["/c", "start", "", url], opts);
+  } else if (process.platform === "darwin") {
+    child = spawn("open", [url], opts);
+  } else {
+    child = spawn("xdg-open", [url], opts);
+  }
+  child?.unref();
+}
+
+function resolveDir(input, fallback) {
+  const raw = input ?? fallback;
+  return path.isAbsolute(raw) ? raw : path.resolve(projectRoot, raw);
+}
+
+async function ensureDirExists(dirPath, label) {
+  try {
+    const st = await fsp.stat(dirPath);
+    if (!st.isDirectory()) {
+      throw new Error(`${label} не является папкой: ${dirPath}`);
+    }
+  } catch (error) {
+    if (error && error.code === "ENOENT") {
+      throw new Error(`${label} не найдена: ${dirPath}`);
+    }
+    throw error;
+  }
+}
+
+async function cleanTargetDir(targetDir) {
+  await fsp.mkdir(targetDir, { recursive: true });
+  const entries = await fsp.readdir(targetDir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    if (PRESERVE_IN_TARGET.has(entry.name)) continue;
+    const fullPath = path.join(targetDir, entry.name);
+    await fsp.rm(fullPath, { recursive: true, force: true });
+  }
+}
+
+async function copyDirFiltered(sourceDir, targetDir) {
+  await fsp.mkdir(targetDir, { recursive: true });
+  const entries = await fsp.readdir(sourceDir, { withFileTypes: true });
+  for (const entry of entries) {
+    const srcPath = path.join(sourceDir, entry.name);
+    const dstPath = path.join(targetDir, entry.name);
+    if (entry.isDirectory()) {
+      await copyDirFiltered(srcPath, dstPath);
+      continue;
+    }
+    if (!entry.isFile() || shouldSkipGitverseFile(entry.name)) continue;
+    await fsp.copyFile(srcPath, dstPath);
+  }
+}
+
+function runGit(args, cwd) {
+  return new Promise((resolve, reject) => {
+    const gitEnv = {
+      ...process.env,
+      GIT_SSH_COMMAND: `ssh -i "${DEFAULT_SSH_KEY_PATH}" -o IdentitiesOnly=yes`,
+    };
+    execFile("git", args, { cwd, encoding: "utf8", env: gitEnv }, (error, stdout, stderr) => {
+      if (error) {
+        reject(new Error((stderr || error.message || "").trim()));
+        return;
+      }
+      resolve((stdout || "").trim());
+    });
+  });
+}
+
+function makeCommitMessage() {
+  const now = new Date();
+  const y = now.getFullYear();
+  const m = String(now.getMonth() + 1).padStart(2, "0");
+  const d = String(now.getDate()).padStart(2, "0");
+  const hh = String(now.getHours()).padStart(2, "0");
+  const mm = String(now.getMinutes()).padStart(2, "0");
+  return `sync public ${y}-${m}-${d} ${hh}:${mm}`;
+}
+
+async function commitAndPush(targetDir) {
+  const gitDir = path.join(targetDir, ".git");
+  await ensureDirExists(gitDir, "Git репозиторий (.git)");
+  try {
+    await fsp.access(DEFAULT_SSH_KEY_PATH);
+  } catch {
+    throw new Error(`SSH-ключ не найден: ${DEFAULT_SSH_KEY_PATH}`);
+  }
+
+  await runGit(["add", "."], targetDir);
+  const changed = await runGit(["status", "--porcelain"], targetDir);
+
+  if (!changed) {
+    console.log("Изменений для коммита нет.");
+    return;
+  }
+
+  const message = makeCommitMessage();
+  await runGit(["commit", "-m", message], targetDir);
+  await runGit(["push"], targetDir);
+  console.log(`Коммит и пуш выполнены: ${message}`);
+  openUrlInDefaultBrowser(GITVERSE_SITE_URL);
+  console.log(`Открыт в браузере: ${GITVERSE_SITE_URL}`);
+}
+
+async function main() {
+  const sourceDir = resolveDir(process.argv[2], "public");
+  const targetDir = resolveDir(process.argv[3], "gitverse");
+
+  await ensureDirExists(sourceDir, "Исходная папка");
+
+  if (sourceDir === targetDir) {
+    throw new Error("Исходная и целевая папки совпадают.");
+  }
+
+  await cleanTargetDir(targetDir);
+  await copyDirFiltered(sourceDir, targetDir);
+
+  console.log(
+    `Синхронизировано: ${path.relative(projectRoot, sourceDir)} -> ${path.relative(projectRoot, targetDir)} (сохранены .git и .gitverse)`,
+  );
+  await commitAndPush(targetDir);
+}
+
+main().catch((error) => {
+  console.error("Ошибка копирования:", error.message || error);
+  process.exit(1);
+});
diff --git a/src/pages/cases/ai-platform-primo-rpa-2.html b/src/pages/cases/ai-platform-primo-rpa-2.html
new file mode 100644
index 0000000..5aa2361
--- /dev/null
+++ b/src/pages/cases/ai-platform-primo-rpa-2.html
@@ -0,0 +1,423 @@
+<!DOCTYPE html>
+<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta
+      name="description"
+      content="Кейс: интерфейс AI Server в Primo RPA — OCR на корпоративных документах, дообучение моделей, skills, UX/UI."
+    />
+    <title>AI Server в Primo RPA — кейс (черновик 2)</title>
+    {{> head-links}}
+    {{> head-plyr}}
+    <style>
+      .case-article {
+        max-width: 48rem;
+        margin: 0 auto;
+      }
+      .case-article h2 {
+        margin: 2rem 0 0.75rem;
+        font-size: clamp(1.15rem, 2vw, 1.35rem);
+        font-weight: 700;
+        color: var(--text);
+      }
+      .case-article h3 {
+        font-size: 1.05rem;
+        font-weight: 600;
+        color: var(--text);
+      }
+      .case-article .section__prose {
+        margin-bottom: 0.75rem;
+        color: var(--text);
+      }
+      .case-article img,
+      .case-article video {
+        display: block;
+        max-width: 100%;
+        height: auto;
+        margin: 0.75rem 0 1rem;
+      }
+      .case-article ul,
+      .case-article ol {
+        margin: 0.5rem 0 1rem 1.25rem;
+        padding: 0;
+      }
+      .case-article li {
+        margin-bottom: 0.35rem;
+      }
+      .case-article a:not(.btn) {
+        color: var(--accent);
+      }
+      .case-block {
+        margin-top: 3rem;
+        padding-top: 2.5rem;
+        border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
+      }
+      .case-block:first-of-type {
+        margin-top: 0;
+        padding-top: 0;
+        border-top: 0;
+      }
+    </style>
+    <script>
+      (function () {
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f === "merriweather" || f === "mono" || f === "geologica") {
+            d.dataset.font = f;
+          } else {
+            d.dataset.font = "merriweather";
+          }
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+        } catch (e) {}
+      })();
+    </script>
+  </head>
+  <body>
+    {{> header-case}}
+{{> fab-stack}}
+<main id="case-main" class="section section--tight">
+      <div class="section__inner case-article">
+        <p class="hero__eyebrow">Product Design · AI</p>
+        <h1 class="case-page__h1">Разработка интерфейса для&nbsp;Primo&nbsp;RPA&nbsp;AI&nbsp;Server</h1>
+        <p class="case-page__sub">
+          Платформа интеллектуальной обработки документов<br />
+          и оркестрации ИИ-агентов
+        </p>
+
+        <div class="case-block" id="obzor">
+          <h2>Обзор</h2>
+          <p class="section__prose">
+            Внутри компании появился сервис, который заметно улучшил работу с моделями для распознавания текста на документах: загрузка датасета из документов компании, разметка полей, обучение модели и дальнейшее использование модели в других продуктах. Такой подход давал более высокое качество распознавания и соответствовал требованиям безопасности — данные оставались внутри контура компании. Уже в ходе работы в продукте появился функционал дообучения (fine-tuning) базовых нейросетей под задачи компании и работы со скилами: суммаризация, извлечение, генерация и другие сценарии.
+          </p>
+          <p class="section__prose">
+            В проект меня пригласили как UX/UI дизайнера: интерфейс до этого собирали разработчики своими силами. В результате работы у сервиса снизился порог входа — продуктом могли пользоваться существенно больше людей без специальной подготовки в области ИИ и OCR.
+          </p>
+          <aside class="case-callout" data-callout>
+            <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">✅</span>
+            <div class="case-callout__content">
+              <p>
+                Главный эффект для бизнеса — не «красивая картинка», а возможность масштабировать решение: меньше зависимости от узкого круга экспертов и отдела внедрения на каждом шаге.
+              </p>
+            </div>
+          </aside>
+        </div>
+
+        <div class="case-block" id="bylo-stalo">
+          <h2>Было и стало</h2>
+          <p class="section__prose">
+            Сервис был собран на <a href="https://ant.design/components/overview" target="_blank" rel="noopener noreferrer">Ant Design</a> под React с визуальной темой <a href="https://templates.iqonic.design/hope-ui/html/dist/" target="_blank" rel="noopener noreferrer">Hope UI</a> для Bootstrap. У компании уже было несколько веб-продуктов с задачей унифицировать и освежить интерфейс, поэтому в разработке опирались на компоненты этих систем.
+          </p>
+          <aside class="case-callout" data-callout>
+            <span class="case-callout__emoji" aria-hidden="true">⚠️</span>
+            <div class="case-callout__content">
+              <p>
+                Ключевая боль — настройка проекта: много шагов и мелких задач, три типа проектов с разными сценариями настройки. От создания проекта до реального использования уходило много времени, часто требовалась помощь отдела внедрения. Запутанная навигация и дублирование функционала снижали продуктивность и не давали выйти на широкую аудиторию.
+              </p>
+            </div>
+          </aside>
+          <p class="section__prose">
+            Я погрузился в продукт и вместе с командой детально разобрал весь функционал.
+          </p>
+          <aside class="case-callout" data-callout>
+            <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">✨</span>
+            <div class="case-callout__content">
+              <p>
+                <strong>Мой опыт в ИИ</strong> и в веб-платформах со схожей логикой сильно ускорил работу: проще было синхронизироваться с разработкой и не теряться в терминологии домена.
+              </p>
+            </div>
+          </aside>
+          <p class="section__prose">
+            По текущим сценариям собрал юзерфлоу: они показали команде, где в интерфейсе и в маршрутах пользователя возникает путаница. На этой основе переработали сами процессы настройки: часть функций автоматизировали и спрятали, чтобы снизить риск ошибок и убрать лишнюю рутину.
+          </p>
+          <p class="section__prose">
+            Новый подход изменил и восприятие продукта, и процесс настройки. Интерфейс ведёт по этапам настройки, при этом не ломает привычные сценарии: полностью линейный визард здесь невозможен — пользователю всё равно нужно возвращаться назад и уточнять параметры ради качества результата.
+          </p>
+          <h3>Вопросы к команде по текущему состоянию</h3>
+          <p class="section__prose">Ответы помогут зафиксировать эффект от внедрения в цифрах и фактах.</p>
+          <ul>
+            <li>Сократилось ли количество обращений в поддержку.</li>
+            <li>Получается ли у пользователей самостоятельно пройти настройку проекта от начала до конца.</li>
+            <li>Позволяет ли новый интерфейс заводить новые типы проектов, опираясь на уже заложенные паттерны.</li>
+          </ul>
+        </div>
+
+        <div class="case-block" id="patterns">
+          <h2>Паттерны интерфейса</h2>
+          <p class="section__prose">
+            Ниже — ключевые зоны продукта: как они поддерживают сценарии обучения и работы с моделью и чем отличаются от прежнего подхода.
+          </p>
+
+          <h3>Сопоставление полей (маппинг)</h3>
+          <p class="section__prose">
+            Маппинг связывает поля документа с целевой структурой данных. Важно было сделать связь наглядной и обратимой, чтобы пользователь не терял контекст при правках.
+          </p>
+          <figure class="case-media" style="margin: 0.85rem 0 1.2rem">
+            <div class="case-video-shell">
+              <video
+                controls
+                preload="metadata"
+                playsinline
+                poster="../assets/ai-platform-primo-rpa/fields-maping.webp"
+                data-case-video-player
+                style="display: block; width: 100%; height: auto; margin: 0"
+              >
+                <source src="../assets/ai-platform-primo-rpa/fields-maping.webm" type="video/webm" />
+                <source src="../assets/ai-platform-primo-rpa/fields-maping.mp4" type="video/mp4" />
+                Ваш браузер не поддерживает видео.
+              </video>
+            </div>
+            <figcaption>Сопоставление полей в интерфейсе</figcaption>
+          </figure>
+
+          <h3>Датасет, обучение и контроль качества</h3>
+          <p class="section__prose">
+            Редактор датасета, запуск обучения и экраны качества образуют один ментальный путь: подготовка данных → обучение → проверка результата.
+          </p>
+          <aside class="case-callout" data-callout>
+            <span class="case-callout__emoji" aria-hidden="true">➡️</span>
+            <div class="case-callout__content">
+              <p>
+                Рядом вынесены кадры «до / после» редактора датасета — по ним видно, как упростили визуальную иерархию и опорные действия на экране.
+              </p>
+            </div>
+          </aside>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/dataset-editor.webp"
+              alt="Редактор датасета — текущая версия интерфейса"
+              width="1200"
+              height="675"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Редактор датасета — текущая версия</figcaption>
+          </figure>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/dataset-editor-old.webp"
+              alt="Редактор датасета — предыдущая версия для сравнения"
+              width="1200"
+              height="675"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Предыдущая версия редактора</figcaption>
+          </figure>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/dataset-lerning.webp"
+              alt="Экран обучения модели по датасету"
+              width="1200"
+              height="675"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Обучение по датасету</figcaption>
+          </figure>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/dataset-quality.webp"
+              alt="Контроль качества модели после обучения"
+              width="1200"
+              height="675"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Качество и проверка результата</figcaption>
+          </figure>
+
+          <h3>Inference в проекте</h3>
+          <p class="section__prose">
+            Отдельный фокус — запуск и контроль модели внутри проекта: пользователь должен понимать состояние прогона и не терять связь с остальными настройками.
+          </p>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/in-project-inference.webp"
+              alt="Интерфейс inference модели внутри проекта"
+              width="1200"
+              height="675"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Inference в проекте</figcaption>
+          </figure>
+          <figure class="case-media" data-case-tall-media data-case-tall-width="wide">
+            <div class="case-media-tall" data-case-tall-root>
+              <div class="case-media-tall__clip" id="ai-case-tall-inference-full" data-case-tall-clip>
+                <img
+                  src="../assets/ai-platform-primo-rpa/in-project-inference-full.webp"
+                  alt="Inference в проекте — полный экран интерфейса"
+                  width="1200"
+                  loading="lazy"
+                  decoding="async"
+                  data-image-viewer
+                />
+                <div class="case-media-tall__fog" aria-hidden="true"></div>
+              </div>
+              <div class="case-media-tall__actions">
+                <button
+                  type="button"
+                  class="case-media-tall__btn btn btn--ghost btn--flat"
+                  data-case-tall-toggle
+                  aria-expanded="false"
+                  aria-controls="ai-case-tall-inference-full"
+                >
+                  <span class="case-media-tall__btn-chev" aria-hidden="true"></span>
+                  <span data-case-tall-label-more>Развернуть</span>
+                  <span data-case-tall-label-less hidden>Свернуть</span>
+                </button>
+              </div>
+            </div>
+            <figcaption>Полный вертикальный кадр экрана inference</figcaption>
+          </figure>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/in-project-inference-old.webp"
+              alt="Предыдущая версия экрана inference в проекте"
+              width="1200"
+              height="675"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Предыдущая версия inference</figcaption>
+          </figure>
+
+          <aside class="case-callout" data-callout>
+            <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">⭐</span>
+            <div class="case-callout__content">
+              <p>
+                Полноэкранный режим и отдельное окно импорта закрывают задачи вне основного контекста проекта: можно сфокусироваться на процессе или, наоборот, держать под рукой панели — ниже три варианта компоновки.
+              </p>
+            </div>
+          </aside>
+
+          <h3>Полноэкранный режим и импорт</h3>
+          <p class="section__prose">
+            Речь не о «длинных задачах», а о процессах в отдельном контексте: одни до завершения блокируют работу с проектом, другие идут параллельно в отдельном окне, и при этом можно продолжать настраивать параметры проекта. Функционал вынесли в отдельное окно, потому что точек входа в такие задачи было несколько, а обычной модалки было недостаточно — нужно было пройти отдельный процесс в стороне и затем вернуться к настройкам проекта. Такой подход сократил объём разработки и тестирования.
+          </p>
+          <p class="section__prose">
+            Ниже — три варианта полноэкранного холста: импорт в отдельном окне, режим с панелями и минималистичный «zen».
+          </p>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/fullscreen_modal-import_dataset.webp"
+              alt="Модальное окно импорта датасета на отдельном экране"
+              width="1440"
+              height="1024"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Импорт в модальном окне</figcaption>
+          </figure>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/full-screen-mode-with-panels.webp"
+              alt="Полноэкранный режим с боковыми панелями"
+              width="1200"
+              height="675"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Полноэкранный режим с панелями</figcaption>
+          </figure>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/full-screen-mode-zen.webp"
+              alt="Полноэкранный режим без отвлекающих панелей"
+              width="1200"
+              height="675"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Минимальный режим без лишнего chrome</figcaption>
+          </figure>
+
+          <h3>Дальнейшее развитие</h3>
+          <p class="section__prose">
+            В дорожной карте оставались отдельные крупные куски: сценарии вокруг LLM (списки, статусы, действия), пошаговый мастер обучения с прогрессом и отменой, а также полноценный контур OCR с разметкой регионов и превью качества на странице. Они не входили в минимальный набор для первого промышленного релиза интерфейса, но заложенные паттерны должны их принять без ломки навигации.
+          </p>
+        </div>
+
+        <div class="case-block" id="process">
+          <h2>Процесс и передача</h2>
+          <p class="section__prose">
+            Работа шла через регулярные синхронизации с разработкой: макеты, спецификации и поэтапный handoff во фронт. После моего выхода из проекта команда искала следующего дизайнера и выстраивала онбординг по уже оформленным артефактам и правилам компоновки.
+          </p>
+          <aside class="case-callout" data-callout>
+            <span class="case-callout__emoji" aria-hidden="true">💡</span>
+            <div class="case-callout__content">
+              <p>
+                Для следующего дизайнера важнее всего опереться на юзерфлоу и решения по настройке проектов — там сосредоточена основная сложность домена.
+              </p>
+            </div>
+          </aside>
+          <h3>Вопросы следующему дизайнеру</h3>
+          <ul>
+            <li>Что оказалось неочевидным в первые две недели в проекте.</li>
+            <li>Какие артефакты и правила передачи пригодились больше всего.</li>
+            <li>Что пришлось пересобрать и по какой причине.</li>
+            <li>Как в трёх предложениях описать текущее состояние UX.</li>
+          </ul>
+        </div>
+
+        <div class="case-block" id="zaklyuchenie">
+          <h2>Итог</h2>
+          <p class="section__prose">
+            Интерфейс AI Server в Primo RPA перевели от «инженерного интерфейса разработчиков» к продукту с понятной логикой настройки и сопровождения пользователя. Упор на юзерфлоу и автоматизацию рутины снял часть нагрузки с внедрения и открыл дорогу к более широкому использованию внутри компании и у клиентов.
+          </p>
+        </div>
+      </div>
+    </main>
+
+    {{> projects-section-mp}}{{> projects-section}}
+{{> contact-section}}
+{{> footer-spacer}}
+{{> footer}}
+{{> cookie-notice}}
+{{> nav-more-floating}}
+
+  </body>
+</html>
diff --git a/src/pages/cases/ai-platform-primo-rpa.html b/src/pages/cases/ai-platform-primo-rpa.html
new file mode 100644
index 0000000..5ac3f8d
--- /dev/null
+++ b/src/pages/cases/ai-platform-primo-rpa.html
@@ -0,0 +1,587 @@
+<!DOCTYPE html>
+<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta
+      name="description"
+      content="Кейс: интерфейс AI Server в Primo RPA — OCR на корпоративных документах, дообучение моделей, skills, UX/UI."
+    />
+    <title>AI Server в Primo RPA — кейс</title>
+    {{> head-links}}
+    {{> head-plyr}}
+    <style>
+      .case-article {
+        max-width: 48rem;
+        margin: 0 auto;
+      }
+      .case-article h2 {
+        margin: 2rem 0 0.75rem;
+        font-size: clamp(1.15rem, 2vw, 1.35rem);
+        font-weight: 700;
+        color: var(--text);
+      }
+      .case-article h3 {
+        font-size: 1.05rem;
+        font-weight: 600;
+        color: var(--text);
+      }
+      .case-article .section__prose {
+        margin-bottom: 0.75rem;
+        color: var(--text);
+      }
+      .case-article img,
+      .case-article video {
+        display: block;
+        max-width: 100%;
+        height: auto;
+        margin: 0.75rem 0 1rem;
+      }
+      .case-article ul,
+      .case-article ol {
+        margin: 0.5rem 0 1rem 1.25rem;
+        padding: 0;
+      }
+      .case-article li {
+        margin-bottom: 0.35rem;
+      }
+      .case-article a:not(.btn) {
+        color: var(--accent);
+      }
+      .case-block {
+        margin-top: 3rem;
+        padding-top: 2.5rem;
+        border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
+      }
+      .case-block:first-of-type {
+        margin-top: 0;
+        padding-top: 0;
+        border-top: 0;
+      }
+    </style>
+    <script>
+      (function () {
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f === "merriweather" || f === "mono" || f === "geologica") {
+            d.dataset.font = f;
+          } else {
+            d.dataset.font = "merriweather";
+          }
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+        } catch (e) {}
+      })();
+    </script>
+  </head>
+  <body>
+    {{> header-case}}
+{{> fab-stack}}
+<main id="case-main" class="section section--tight">
+      <div class="section__inner case-article">
+        <p class="hero__eyebrow">Product Design · AI</p>
+        <h1 class="case-page__h1">Разработка интерфейса для&nbsp;Primo&nbsp;RPA&nbsp;AI&nbsp;Server</h1>
+        <p class="case-page__sub">
+          Платформа интеллектуальной обработки документов<br />
+          и оркестрации ИИ-агентов
+        </p>
+
+        <div class="case-block" id="obzor">
+          <h2>Обзор</h2>
+          <p class="section__prose">
+            Продукт AI Server разворачивается на внутренних серверах клиентов. Он позволяет использовать нейросети во внутреннем контуре компании и настраивается через веб-интерфейс.
+          </p>
+          <p class="section__prose">
+            Меня пригласили на проект как UX/UI-дизайнера. Продукт был в активной стадии тестирования; по обратной связи от клиентов стало ясно, что настройка слишком сложна: с ней справляются только эксперты и команда внедрения Primo RPA. Сложная настройка снижала привлекательность продукта и тормозила масштабирование.
+          </p>
+          <p class="section__prose">
+            Передо мной стояла задача упростить настройку и снизить порог входа, разгрузить техподдержку и отдел внедрения — чтобы клиенты могли самостоятельно настраивать сервис под свои задачи.
+          </p>
+          <aside class="case-callout" data-callout>
+            <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">✅</span>
+            <div class="case-callout__content">
+              <p>
+                Бизнес ставил цель — упростить настройку AI Server и сделать продукт доступнее для клиента. От меня ждали интерфейса, в котором настройку можно пройти без постоянной помощи поддержки и внедрения.
+              </p>
+            </div>
+          </aside>
+          <p class="section__prose">
+            Ниже — погружение в продукт, примеры выполненных задач и паттерны интерфейса.
+          </p>
+        </div>
+
+        <div class="case-block" id="pogruzhenie">
+          <h2>Погружение</h2>
+          <p class="section__prose">
+            Работу начал со знакомства с командой: кто за продукт, кто за внедрение, как всё устроено сейчас. Пообщался с экспертами по настройке, разделил ключевые и вспомогательные сценарии, собрал визуализацию поведения пользователя. Плотно работал с разработкой и искал, где интерфейс можно упростить и ускорить настройку.
+          </p>
+          <aside class="case-callout" data-callout>
+            <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">✨</span>
+            <div class="case-callout__content">
+              <p>
+                Мой опыт в ИИ и в похожих веб-платформах помог быстрее разобраться в домене и говорить с разработкой на одном языке.
+              </p>
+            </div>
+          </aside>
+          <p class="section__prose">
+            Продукт уже использовали клиенты, поэтому нельзя было остановить разработку и пересобрать интерфейс целиком. Пришлось решать, в каком порядке и какие части трогать в редизайне. Самые крупные изменения встраивал в текущий план разработки, без отрыва от релизов.
+          </p>
+          <p class="section__prose">
+            Прорабатывать изменения в интерфейсе нужно было с учётом используемого фреймворка. На тот момент это был
+            <a href="https://ant.design/components/overview" target="_blank" rel="noopener noreferrer">Ant Design</a> под React со стилизацией под
+            <a href="https://templates.iqonic.design/hope-ui/html/dist/" target="_blank" rel="noopener noreferrer">Hope UI</a>.
+          </p>
+          <p class="section__prose">
+            Новые компоненты приходилось придумывать только в крайних случаях, в приоритете было переиспользовать уже существующую библиотеку. По итоговым экранам это видно: интерфейс в основном собран из готовых блоков, а не с нуля.
+          </p>
+        </div>
+
+        <div class="case-block" id="zadachi">
+          <h2>Выполненные задачи</h2>
+          <p class="section__prose">
+            Фрагменты интерфейса, которые я переработал или собрал почти с нуля. Ниже — отдельные задачи из проекта, которые хотелось показать в портфолио, а не обзор всего продукта.
+          </p>
+
+          <h3>Главная навигация сервиса</h3>
+          <p class="section__prose">
+            В сервисе стояла привычная для админок схема: слева боковое меню, справа контент. На скриншоте видно, что такая структура страницы неэффективно использовала доступное рабочее пространство на экране. Если открыть проект, слева окажется навигация по разделам проекта — вперемешку с главной, и это путает пользователя. Эту ситуацию нужно было исправить.
+          </p>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/main.webp"
+              alt="Предыдущая главная навигация сервиса AI Server"
+              width="2520"
+              height="1680"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Предыдущая навигация</figcaption>
+          </figure>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/main-new.webp"
+              alt="Обновлённая главная навигация сервиса AI Server"
+              width="1920"
+              height="1080"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Обновлённая навигация</figcaption>
+          </figure>
+          <p class="section__prose">
+            Обновлённая навигация стала компактной и всё так же привычна большинству пользователей. Для контентной части пространства стало значительно больше. Как будет видно дальше, у проектов внутри появится отдельная навигация, которая не будет перекрывать главную. При этом улучшилась эстетическая составляющая дизайна сервиса.
+          </p>
+          <h3>Навигация внутри конкретного проекта</h3>
+          <p class="section__prose">
+            У пользователя остаётся доступ и к навигации внутри проекта, и к главной навигации сервиса. Разные типы проекта содержат разное количество пунктов, и такое решение позволяет удачно их разместить.
+          </p>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/nav-project-nlp.webp"
+              alt="Навигация внутри NLP-проекта и главная навигация сервиса"
+              width="1920"
+              height="302"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>NLP-проект</figcaption>
+          </figure>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/nav-project-ocr.webp"
+              alt="Навигация внутри OCR-проекта и главная навигация сервиса"
+              width="1920"
+              height="302"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>OCR-проект</figcaption>
+          </figure>
+          <p class="section__prose">
+            Отдельно отмечу идею с формой пунктов навигации. По виду она мягко подсказывает, что настройку удобнее проходить по шагам, но разделы по-прежнему работают как обычные табы: можно переключаться в любом порядке.
+          </p>
+          <figure class="case-media">
+            <img
+              src="../assets/ai-platform-primo-rpa/nav-secondary-detail_view.webp"
+              alt="Вторичная навигация проекта со стрелочной формой пунктов"
+              width="924"
+              height="101"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Форма пунктов навигации</figcaption>
+          </figure>
+          <h3>Редактор разметки датасета</h3>
+          <p class="section__prose">
+            На этом экране проводят больше всего времени. Разметка полей на сотнях изображений — монотонная работа, но от неё зависит, насколько качественными будут данные для обучения модели. Прежний редактор сильно выбивался из общего стиля сервиса: выглядел перегруженно и местами сбивал с толку, особенно в работе с полями.
+          </p>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/dataset-editor-old.webp"
+              alt="Редактор датасета — предыдущая версия для сравнения"
+              width="1200"
+              height="675"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Предыдущая версия редактора датасета</figcaption>
+          </figure>
+          <p class="section__prose">
+            Я разобрал редактор на микросценарии, выстроил их по приоритету и связке между собой. С командой обсудили, как сделать поведение пользователя плавнее и понятнее. В новой структуре страницы заложил место под новый функционал и те же паттерны, что в остальном сервисе. Дизайн редактора привёл к общей стилистике.
+          </p>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/dataset-editor.webp"
+              alt="Редактор датасета — текущая версия интерфейса"
+              width="1200"
+              height="675"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Обновлённая версия редактора датасета</figcaption>
+          </figure>
+          <p class="section__prose">
+            На схематическом наброске видно, что страница стала симметричной: почти всё пространство уходит на размечаемое изображение. Действия сгруппированы по панелям — нужную функцию проще найти.
+          </p>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/dataset_editor-wireframe-default_mode.webp"
+              alt="Вайрфрейм редактора датасета — режим по умолчанию"
+              width="1200"
+              height="675"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Каркас: режим по умолчанию</figcaption>
+          </figure>
+          <p class="section__prose">
+            Добавил режим «Во весь экран». Продвинутые пользователи обычно прячут лишние панели и работают с разметкой через горячие клавиши и нижнюю панель. Боковые панели можно свернуть, когда нужно больше места под изображение — на небольших мониторах это особенно имеет значение.
+          </p>
+          <figure class="case-media case-media-gallery case-media-gallery--wide" style="--case-gallery-cols: 2">
+            <div class="case-media-gallery__grid">
+              <div class="case-media-gallery__item">
+                <img
+                  src="../assets/ai-platform-primo-rpa/full-screen-mode-with-panels.webp"
+                  alt="Полноэкранный режим с боковыми панелями"
+                  loading="lazy"
+                  decoding="async"
+                  data-image-viewer
+                />
+              </div>
+              <div class="case-media-gallery__item">
+                <img
+                  src="../assets/ai-platform-primo-rpa/full-screen-mode-zen.webp"
+                  alt="Полноэкранный режим без отвлекающих панелей"
+                  loading="lazy"
+                  decoding="async"
+                  data-image-viewer
+                />
+              </div>
+            </div>
+            <figcaption>Вид редактора в режиме «Во весь экран»</figcaption>
+          </figure>
+          <figure class="case-media case-media-gallery case-media-gallery--wide" style="--case-gallery-cols: 2">
+            <div class="case-media-gallery__grid">
+              <div class="case-media-gallery__item">
+                <img
+                  src="../assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode-both_panels.webp"
+                  alt="Вайрфрейм zen mode — обе панели"
+                  loading="lazy"
+                  decoding="async"
+                  data-image-viewer
+                />
+              </div>
+              <div class="case-media-gallery__item">
+                <img
+                  src="../assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode.webp"
+                  alt="Вайрфрейм zen mode"
+                  loading="lazy"
+                  decoding="async"
+                  data-image-viewer
+                />
+              </div>
+              <div class="case-media-gallery__item">
+                <img
+                  src="../assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode-left_panel.webp"
+                  alt="Вайрфрейм zen mode — левая панель"
+                  loading="lazy"
+                  decoding="async"
+                  data-image-viewer
+                />
+              </div>
+              <div class="case-media-gallery__item">
+                <img
+                  src="../assets/ai-platform-primo-rpa/dataset_editor-wireframe-zen_mode-right_panel.webp"
+                  alt="Вайрфрейм zen mode — правая панель"
+                  loading="lazy"
+                  decoding="async"
+                  data-image-viewer
+                />
+              </div>
+            </div>
+            <figcaption>Варианты рабочего вида в режиме «На весь экран»</figcaption>
+          </figure>
+          <p class="section__prose">
+            Нижняя панель позволяет переключаться между изображениями и выполнять быстрые действия.
+          </p>
+          <figure class="case-media case-media--content">
+            <img
+              src="../assets/ai-platform-primo-rpa/dataset_editor-main_toolbar.webp"
+              alt="Главная панель инструментов редактора датасета"
+              width="1200"
+              height="675"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Нижняя панель инструментов</figcaption>
+          </figure>
+
+          <h3>Карточки настройки обучения модели</h3>
+          <p class="section__prose">
+            После разметки датасета модель можно дообучить (fine-tuning). Мы с командой, как обычно, разобрали все действия пользователя для этой задачи. Сделали несколько вариантов компоновки этой страницы; самым удачным оказался вариант с лентой из карточек.
+          </p>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/in_project-learn-overview.webp"
+              alt="Обзор карточек настройки обучения в проекте"
+              width="1920"
+              height="740"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Вид раздела обучения моделей</figcaption>
+          </figure>
+          <p class="section__prose">
+            В начале ленты у пользователя карточка с настройкой обучения: через неё видно результат разметки активного датасета, задают параметры и запускают fine-tuning.
+          </p>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/in_project-learn-card-new.webp"
+              alt="Карточка настройки обучения"
+              width="1306"
+              height="1104"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Карточка настройки обучения</figcaption>
+          </figure>
+          <p class="section__prose">
+            В карточке отдельный блок с оценкой качества разметки датасета и блок с параметрами перед запуском обучения.
+          </p>
+          <aside class="case-callout" data-callout>
+            <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">⭐</span>
+            <div class="case-callout__content">
+              <p>
+                Матрица оценки качества датасета получилась и наглядной, и компактной.
+              </p>
+            </div>
+          </aside>
+          <p class="section__prose">
+            Под каждый запущенный процесс ниже появится отдельная карточка. Можно завести несколько процессов с разными параметрами и потом сравнить, какая конфигурация сработала лучше.
+          </p>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/in_project-learn-card-learning_process.webp"
+              alt="Карточка процесса обучения модели"
+              width="1306"
+              height="1066"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Карточка процесса обучения</figcaption>
+          </figure>
+          <p class="section__prose">
+            Внутри карточки информация и действия разнесены по логическим блокам. Мы рассматривали разные варианты компоновки и в итоге зафиксировали схему, которая оказалась удобнее остальных.
+          </p>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/in_project-learn-card-learning_process_wireframe.webp"
+              alt="Вайрфрейм карточки процесса обучения"
+              width="1306"
+              height="1066"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Вайрфрейм карточки процесса обучения</figcaption>
+          </figure>
+          <p class="section__prose">
+            Карточки могут быть свёрнуты. Для удобства в шапку вынесены название и статус.
+          </p>
+          <figure class="case-media case-media--content">
+            <img
+              src="../assets/ai-platform-primo-rpa/in_project-learn-card-сollapsed.webp"
+              alt="Свёрнутая карточка настройки обучения"
+              width="1306"
+              height="102"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Свёрнутая карточка</figcaption>
+          </figure>
+          <p class="section__prose">
+            После проработки этих карточек появились паттерны, которые потом использовались в других разделах продукта. Так проще держать интерфейс в едином стиле.
+          </p>
+
+          <h3>Настройка параметров полей</h3>
+          <p class="section__prose">
+            На одной из страниц раздела проекта нужно было дать возможность настроить уникальные параметры полей для датасета. Редактору требовалась большая область под изображение (скан документа), могло быть десятки полей, у каждого — свои зависимые параметры и типы.
+          </p>
+          <p class="section__prose">
+            На видео — работа прототипа готового решения.
+          </p>
+          <figure class="case-media" style="margin: 0.85rem 0 1.2rem">
+            <div class="case-video-shell">
+              <video
+                controls
+                preload="metadata"
+                playsinline
+                poster="../assets/ai-platform-primo-rpa/fields-maping.webp"
+                data-case-video-player
+                style="display: block; width: 100%; height: auto; margin: 0"
+              >
+                <source src="../assets/ai-platform-primo-rpa/fields-maping.webm" type="video/webm" />
+                <source src="../assets/ai-platform-primo-rpa/fields-maping.mp4" type="video/mp4" />
+                Ваш браузер не поддерживает видео.
+              </video>
+            </div>
+            <figcaption>Сопоставление полей в интерфейсе</figcaption>
+          </figure>
+          <p class="section__prose">
+            Интерфейс получился компактным и лаконичным. Механика не считывается с первого взгляда, но после короткого обучения пользователю в нём комфортно.
+          </p>
+          <p class="section__prose">
+            Редактор для меня оказался интересной и сложной задачей: было много черновиков и вариантов поведения. В финале остался вариант, который закрывал все требования, которые мы с командой сформулировали.
+          </p>
+
+          <h3>Модальные окна на отдельном экране</h3>
+          <p class="section__prose">
+            В сервисе часть задач нужно выполнять параллельно с остальной работой. Для таких сценариев сделали так: модальное окно открывается на отдельной странице.
+          </p>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/ai-platform-primo-rpa/fullscreen_modal-import_dataset.webp"
+              alt="Модальное окно импорта датасета на отдельном экране"
+              width="1440"
+              height="1024"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Импорт датасета в модальном окне</figcaption>
+          </figure>
+          <p class="section__prose">
+            На странице проекта отображается заглушка: процесс идёт, рядом кнопка перехода к нему.
+          </p>
+          <figure class="case-media case-media--content">
+            <img
+              src="../assets/ai-platform-primo-rpa/fullscreen_modal-in_project-import_dataset.webp"
+              alt="Импорт датасета внутри проекта"
+              width="1920"
+              height="740"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+            <figcaption>Импорт датасета внутри проекта</figcaption>
+          </figure>
+          <p class="section__prose">
+            Такие заглушки есть в нескольких разделах проекта — в зависимости от того, можно ли с ним работать, пока задача активна.
+          </p>
+          <aside class="case-callout" data-callout>
+            <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">💡</span>
+            <div class="case-callout__content">
+              <p>
+                Пользователь может открыть окно с процессом в соседней вкладке и следить за прогрессом. В другой вкладке или окне продолжает работу с проектом в доступных разделах.
+              </p>
+            </div>
+          </aside>
+          <p class="section__prose">
+            Такой вариант оказался технически проще, чем точечно блокировать кнопки на отдельных страницах.
+          </p>
+
+        </div>
+
+        <div class="case-block" id="process">
+          <h2>Передача в разработку</h2>
+          <p class="section__prose">
+            Раз в неделю команда собиралась на обсуждение дизайна. Созвоны были длительными, но продуктивными. На неделю формировали список задач для дизайна, приоритеты и сроки подстраивали под планы релизов.
+          </p>
+          <p class="section__prose">
+            Я делал дизайн в Figma, в разработку передавал ссылки на готовые юзерфлоу. Отдельную дизайн-систему или UI-kit не заводили: в продукте уже был готовый фреймворк.
+          </p>
+          <p class="section__prose">
+            Время от времени созванивался с верстальщиком тет-а-тет, если нужно уточнить детали по макетам или объяснить поведение интерфейса. После вёрстки давал фидбэк на правки, чтобы результат не отличался от задуманного поведения и вида интерфейса.
+          </p>
+        </div>
+
+        <div class="case-block" id="smena-dizaynera">
+          <h2>Смена дизайнера</h2>
+          <p class="section__prose">
+            Проект вёл параллельно с другими, нагрузку приходилось распределять. В компанию наняли нового дизайнера — моя задача была ввести её в курс дела и курировать результат по задачам. После адаптации работа над проектом полностью перешла под её ответственность.
+          </p>
+        </div>
+
+        <div class="case-block" id="zaklyuchenie">
+          <h2>Итог</h2>
+          <p class="section__prose">
+            Интерфейс Primo RPA AI Server стал выглядеть консистентно. С ним могут работать пользователи, которые ещё не эксперты в области ИИ. Для будущих изменений в интерфейсе заложена возможность наращивать функционал без больших переделок.
+          </p>
+        </div>
+      </div>
+    </main>
+
+    {{> projects-section-mp}}{{> projects-section}}
+{{> contact-section}}
+{{> footer-spacer}}
+{{> footer}}
+{{> cookie-notice}}
+{{> nav-more-floating}}
+
+  </body>
+</html>
diff --git a/src/pages/cases/design-system.html b/src/pages/cases/design-system.html
new file mode 100644
index 0000000..0af2800
--- /dev/null
+++ b/src/pages/cases/design-system.html
@@ -0,0 +1,859 @@
+<!DOCTYPE html>
+<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta
+      name="description"
+      content="Design System портфолио: цвета, типографика, сетка, компоненты интерфейса."
+    />
+    <title>Design System — портфолио</title>
+    {{> head-links}}
+    <style>
+      #main {
+        padding-bottom: clamp(3.5rem, 8vw, 5.5rem);
+      }
+
+      .case-article.ds-page {
+        max-width: 52rem;
+        margin: 0 auto;
+      }
+
+      .case-article.ds-page .case-page__h1 {
+        margin-bottom: 0.65rem;
+      }
+
+      .case-article.ds-page .case-page__sub {
+        margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
+      }
+
+      .case-article.ds-page .section__prose {
+        margin-bottom: 1.15rem;
+        line-height: 1.65;
+        color: var(--text);
+      }
+
+      .case-article.ds-page > h2 {
+        margin: 0 0 1.15rem;
+        padding-top: clamp(2.75rem, 6vw, 4rem);
+        font-family: var(--font);
+        font-size: clamp(1.15rem, 2vw, 1.35rem);
+        font-weight: 700;
+        color: var(--text);
+        scroll-margin-top: 1.5rem;
+        border-top: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
+      }
+
+      .case-article.ds-page > h2#colors {
+        padding-top: clamp(1.5rem, 4vw, 2.25rem);
+        border-top: none;
+      }
+
+      .case-article.ds-page > h3 {
+        margin: clamp(2rem, 4vw, 2.75rem) 0 0.85rem;
+        font-family: var(--font);
+        font-size: 1.05rem;
+        font-weight: 600;
+        color: var(--text);
+      }
+
+      .case-article.ds-page > h2 + .section__prose,
+      .case-article.ds-page > h2 + h3 {
+        margin-top: 0;
+      }
+
+      .case-article.ds-page > h2 + h3 {
+        margin-top: 0.25rem;
+      }
+
+      .case-article.ds-page #components h3:first-of-type {
+        margin-top: 1rem;
+      }
+      .case-article.ds-page a:not(.btn) {
+        color: var(--accent);
+      }
+      .sg-toc {
+        margin: clamp(1.5rem, 3vw, 2rem) 0 clamp(2.25rem, 5vw, 3.25rem);
+        padding: 1.15rem 1.35rem;
+        border-radius: var(--radius-md);
+        border: 1px solid var(--line);
+        background: color-mix(in srgb, var(--surface) 72%, transparent);
+      }
+      .sg-toc ol {
+        margin: 0;
+        padding-left: 1.25rem;
+        color: var(--text-muted);
+      }
+      .sg-toc li + li {
+        margin-top: 0.35rem;
+      }
+      .sg-toc a {
+        color: var(--accent-text);
+        text-decoration: none;
+      }
+      .sg-toc a:hover,
+      .sg-toc a:focus-visible {
+        text-decoration: underline;
+      }
+
+      .sg-blocks-card {
+        margin: 0 0 2.5rem;
+        padding: 1.15rem 1.35rem;
+        border-radius: var(--radius-md);
+        border: 1px solid var(--line);
+        background: color-mix(in srgb, var(--surface) 72%, transparent);
+      }
+
+      .sg-blocks-card p {
+        margin: 0 0 0.85rem;
+        line-height: 1.65;
+        color: var(--text);
+      }
+
+      .sg-blocks-card p:last-child {
+        margin-bottom: 0;
+      }
+
+      #blocks,
+      #mini-projects {
+        scroll-margin-top: calc(var(--header-offset, 4.25rem) + 0.75rem);
+      }
+      .sg-swatch-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
+        gap: 0.75rem;
+        margin: 1rem 0 1.75rem;
+      }
+      .sg-swatch {
+        border-radius: var(--radius-sm);
+        border: 1px solid var(--line);
+        overflow: hidden;
+      }
+      .sg-swatch__chip {
+        height: 3.25rem;
+      }
+      .sg-swatch__name {
+        display: block;
+        padding: 0.35rem 0.45rem;
+        font-size: 0.68rem;
+        line-height: 1.25;
+        font-family: var(--font);
+        color: var(--text-muted);
+        word-break: break-all;
+      }
+      .sg-stack {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.75rem;
+        margin: 1rem 0 2rem;
+      }
+      .sg-stack--row {
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: center;
+      }
+      .sg-label {
+        margin: 0.35rem 0 0;
+        font-size: 0.78rem;
+        color: var(--text-muted);
+        font-family: var(--font);
+      }
+
+      .case-article.ds-page .sg-label {
+        display: block;
+        margin-bottom: 1.75rem;
+      }
+
+      .sg-table-wrap {
+        overflow-x: auto;
+        margin: 1rem 0 2rem;
+      }
+      .sg-table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: 0.88rem;
+      }
+      .sg-table th,
+      .sg-table td {
+        padding: 0.65rem 0.85rem;
+        border: 1px solid var(--line);
+        text-align: left;
+        vertical-align: top;
+      }
+      .sg-table th {
+        background: color-mix(in srgb, var(--surface) 80%, transparent);
+        color: var(--text);
+        font-weight: 600;
+      }
+      .sg-table td {
+        color: var(--text-muted);
+      }
+      .sg-table code {
+        font-size: 0.82em;
+      }
+      .sg-table--type .sg-type-sample {
+        color: var(--text);
+        min-width: 11rem;
+      }
+      .sg-table--type .sg-type-sample > * {
+        margin: 0;
+      }
+      .sg-table--type td:first-child {
+        white-space: nowrap;
+        vertical-align: top;
+      }
+      .sg-table--type tbody td:last-child {
+        font-size: 0.88rem;
+      }
+      .sg-layout-demo {
+        margin: 1rem 0 2rem;
+        padding: 1.1rem;
+        border-radius: var(--radius-md);
+        border: 1px dashed var(--line);
+        background: color-mix(in srgb, var(--bg-elevated) 55%, transparent);
+      }
+      .sg-layout-demo__hero {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 0.65rem;
+      }
+      @media (min-width: 860px) {
+        .sg-layout-demo__hero {
+          grid-template-columns: 1.15fr 0.85fr;
+        }
+      }
+      .sg-layout-demo__block {
+        min-height: 2.75rem;
+        border-radius: var(--radius-sm);
+        background: color-mix(in srgb, var(--accent) 18%, var(--surface));
+        border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.75rem;
+        color: var(--text-muted);
+      }
+      .sg-contact-demo {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+      .sg-contact-demo .contact-card {
+        pointer-events: none;
+        cursor: default;
+      }
+      /* В компонентах только 2 карточки — без 4-колоночной сетки главной */
+      .sg-contact-components.contact-grid {
+        grid-template-columns: 1fr;
+      }
+      @media (min-width: 560px) {
+        .sg-contact-components.contact-grid {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+      }
+      .sg-portfolio-wrap {
+        max-width: 100%;
+      }
+      .sg-portfolio-wrap .portfolio-card {
+        pointer-events: none;
+      }
+      .sg-section-demo.section {
+        margin: 0.75rem calc(-1 * max(var(--space), env(safe-area-inset-left, 0px))) 2rem;
+        padding: 1.35rem max(var(--space), env(safe-area-inset-right, 0px)) 1.35rem
+          max(var(--space), env(safe-area-inset-left, 0px));
+        border-radius: var(--radius-md);
+        background: var(--surface);
+        border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
+      }
+
+      .sg-section-demo .section__inner {
+        max-width: none;
+        margin: 0;
+      }
+
+      .sg-section-demo .section__title {
+        margin: 0 0 0.65rem;
+        padding: 0;
+        border: none;
+        font-size: clamp(1.02rem, 1.65vw, 1.28rem);
+      }
+
+      .sg-section-demo .section__prose {
+        margin: 0;
+        color: var(--text-muted);
+      }
+
+      .case-article.ds-page pre {
+        margin: 0.75rem 0 2rem;
+      }
+
+      .case-article.ds-page ul.section__prose,
+      .case-article.ds-page ol.section__prose {
+        margin-bottom: 1.5rem;
+      }
+
+      .case-article.ds-page .skill-task-card,
+      .case-article.ds-page .sg-portfolio-wrap {
+        margin-bottom: 0.5rem;
+      }
+
+      .case-article.ds-page .contact-grid {
+        margin-bottom: 0.25rem;
+      }
+    </style>
+    <script>
+      (function () {
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f === "merriweather" || f === "mono" || f === "geologica") {
+            d.dataset.font = f;
+          } else {
+            d.dataset.font = "merriweather";
+          }
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+        } catch (e) {}
+      })();
+    </script>
+  </head>
+  <body>
+    {{> header-minimal}}
+{{> fab-stack-home-contact}}
+<main id="main" class="section section--tight">
+      <div class="section__inner case-article ds-page">
+        <p class="hero__eyebrow">Документация · UI</p>
+        <h1 class="case-page__h1">Design System</h1>
+        <p class="case-page__sub">Токены, типографика, сетка, компоненты и блоки лонгрида кейса</p>
+        <p class="section__prose">
+          Переключайте тему, акцент и шрифт через плавающую панель справа. При глобальных правках стилей (токены,
+          компоненты, блоки лонгрида) обновляйте и эту страницу — живой каталог UI проекта.
+        </p>
+
+        <nav class="sg-toc" aria-label="Оглавление Design System">
+          <ol>
+            <li><a href="#colors">Цвета</a></li>
+            <li><a href="#fonts">Шрифты</a></li>
+            <li><a href="#layout">Сетка и адаптив</a></li>
+            <li><a href="#components">Компоненты</a></li>
+            <li><a href="#blocks">Блоки</a></li>
+            <li><a href="#mini-projects">Активность</a></li>
+          </ol>
+        </nav>
+
+        <h2 id="colors">Цвета</h2>
+        <p class="section__prose">
+          Акцент и «холод/тепло» всего UI задаются тремя числами в модели <strong>HSL</strong> (Hue — оттенок,
+          Saturation — насыщенность, Lightness — светлота) на <code>&lt;html&gt;</code>. Из них собирается
+          <code>--accent</code> и производные токены; нейтральные фоны слегка подмешивают тот же оттенок
+          (<code>--neutral-accent-tint</code>). Светлая/тёмная тема — <code>data-theme</code>, mesh —
+          <code>data-mesh-bg</code>. Меняется в FAB справа.
+        </p>
+        <h3>Что такое <code>--theme-h</code>, <code>--theme-s</code>, <code>--theme-l</code></h3>
+        <ul class="section__prose">
+          <li>
+            <code>--theme-h</code> — <strong>оттенок (Hue)</strong>, позиция на цветовом круге 0–360°. Сдвиг hue
+            перекрашивает кнопки, ссылки, mesh-градиент и квадратные акценты (<code>--accent-square-2</code> …
+            <code>4</code>), не трогая вручную каждый hex.
+          </li>
+          <li>
+            <code>--theme-s</code> — <strong>насыщенность</strong>: насколько «чистый» цвет, а не серый.
+          </li>
+          <li>
+            <code>--theme-l</code> — <strong>светлота</strong> акцента: темнее или ярче основной фирменный тон
+            (в панели обычно ограничен диапазоном, чтобы кнопки оставались читаемыми).
+          </li>
+        </ul>
+        <p class="section__prose">
+          В CSS это выглядит так:
+          <code>--accent: hsl(var(--theme-h) calc(var(--theme-s) * 1%) calc(var(--theme-l) * 1%))</code>.
+          Значения пишутся в <code>localStorage</code> (<code>siteThemeV1</code>) и подставляются inline-скриптом в
+          <code>head</code>, чтобы не было вспышки «чужого» цвета при загрузке.
+        </p>
+        <div class="sg-swatch-grid" aria-label="Палитра токенов">
+          <div class="sg-swatch">
+            <div class="sg-swatch__chip" style="background: var(--bg)"></div>
+            <span class="sg-swatch__name">--bg</span>
+          </div>
+          <div class="sg-swatch">
+            <div class="sg-swatch__chip" style="background: var(--bg-elevated)"></div>
+            <span class="sg-swatch__name">--bg-elevated</span>
+          </div>
+          <div class="sg-swatch">
+            <div class="sg-swatch__chip" style="background: var(--surface)"></div>
+            <span class="sg-swatch__name">--surface</span>
+          </div>
+          <div class="sg-swatch">
+            <div class="sg-swatch__chip" style="background: var(--text)"></div>
+            <span class="sg-swatch__name">--text</span>
+          </div>
+          <div class="sg-swatch">
+            <div class="sg-swatch__chip" style="background: var(--text-muted)"></div>
+            <span class="sg-swatch__name">--text-muted</span>
+          </div>
+          <div class="sg-swatch">
+            <div class="sg-swatch__chip" style="background: var(--line)"></div>
+            <span class="sg-swatch__name">--line</span>
+          </div>
+          <div class="sg-swatch">
+            <div class="sg-swatch__chip" style="background: var(--accent)"></div>
+            <span class="sg-swatch__name">--accent</span>
+          </div>
+          <div class="sg-swatch">
+            <div class="sg-swatch__chip" style="background: var(--accent-text)"></div>
+            <span class="sg-swatch__name">--accent-text</span>
+          </div>
+          <div class="sg-swatch">
+            <div class="sg-swatch__chip" style="background: var(--accent-soft)"></div>
+            <span class="sg-swatch__name">--accent-soft</span>
+          </div>
+        </div>
+        <p class="section__prose sg-label">
+          Дополнительно: квадратичные оттенки mesh — <code>--accent-square-2</code> … <code>4</code>; они зависят от hue.
+        </p>
+
+        <h2 id="fonts">Шрифты</h2>
+        <p class="section__prose">
+          Пара шрифтов — <code>data-font</code> на <code>&lt;html&gt;</code> (FAB «Типографика»): задаёт
+          <code>--font-accent</code> (заголовки) и <code>--font</code> (проза). Шкала в таблицах: класс, пример, назначение.
+        </p>
+        <h3>Семейства</h3>
+        <div class="sg-table-wrap">
+          <table class="sg-table">
+            <thead>
+              <tr>
+                <th scope="col"><code>data-font</code></th>
+                <th scope="col">Стек</th>
+                <th scope="col">Где</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td><code>merriweather</code></td>
+                <td>Merriweather + Alice</td>
+                <td>Пара по умолчанию; Alice — основной текст, Merriweather — акцентные заголовки</td>
+              </tr>
+              <tr>
+                <td><code>mono</code></td>
+                <td>Source Code Pro + PT Mono</td>
+                <td>Моноширинная пара</td>
+              </tr>
+              <tr>
+                <td><code>geologica</code></td>
+                <td>Geologica + PT Sans</td>
+                <td>Гротеск + нейтральная проза</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <h3>Типографическая шкала</h3>
+        <div class="sg-table-wrap">
+          <table class="sg-table sg-table--type" aria-label="Типографическая шкала">
+            <thead>
+              <tr>
+                <th scope="col">Класс</th>
+                <th scope="col">Пример</th>
+                <th scope="col">Назначение</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td><code>.hero__eyebrow</code></td>
+                <td class="sg-type-sample"><p class="hero__eyebrow">Подпись секции</p></td>
+                <td>Hero, ввод кейса</td>
+              </tr>
+              <tr>
+                <td><code>.hero__title</code></td>
+                <td class="sg-type-sample">
+                  <p class="hero__title" style="font-size: clamp(1.5rem, 3.5vw, 2.15rem); line-height: 1.08">
+                    Display заголовок
+                  </p>
+                </td>
+                <td>H1 главной; на DS уменьшен для колонки</td>
+              </tr>
+              <tr>
+                <td><code>.section__title</code></td>
+                <td class="sg-type-sample"><h2 class="section__title">Секция</h2></td>
+                <td>«Навыки», «Портфолио», контакты; основной шрифт, без капса</td>
+              </tr>
+              <tr>
+                <td><code>.case-page__h1</code></td>
+                <td class="sg-type-sample"><p class="case-page__h1">Заголовок страницы</p></td>
+                <td>H1 кейса / Design System</td>
+              </tr>
+              <tr>
+                <td><code>.case-page__sub</code></td>
+                <td class="sg-type-sample"><p class="case-page__sub">Лид под заголовком</p></td>
+                <td>Подзаголовок под H1</td>
+              </tr>
+              <tr>
+                <td><code>.section__prose</code></td>
+                <td class="sg-type-sample"><p class="section__prose">Основной текст абзаца.</p></td>
+                <td>Проза, списки, ссылки в статье</td>
+              </tr>
+              <tr>
+                <td><code>h2</code> в <code>.case-article</code></td>
+                <td class="sg-type-sample"><h2 style="margin: 0">Подсекция H2</h2></td>
+                <td>Разделы лонгрида (как «Цвета»)</td>
+              </tr>
+              <tr>
+                <td><code>h3</code> в <code>.case-article</code></td>
+                <td class="sg-type-sample"><h3 style="margin: 0">Подсекция H3</h3></td>
+                <td>Подразделы внутри H2; отступы в <code>main.css</code>: сверху 3.25rem, снизу 1.5rem, после <code>figure</code> 4rem, <code>h3+h3</code> 3.5rem</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <h3>Ритм и код</h3>
+        <p class="section__prose">Пример ритма:</p>
+        <ul class="section__prose">
+          <li>маркированный список;</li>
+          <li><strong>акцент</strong> и <a href="#fonts">ссылка</a>;</li>
+        </ul>
+        <ol class="section__prose">
+          <li>нумерованный пункт;</li>
+        </ol>
+        <p class="section__prose">Инлайн <code>code</code> и блок:</p>
+        <pre><code>--font: "Alice", system-ui, serif;
+--font-accent: "Merriweather", var(--font);</code></pre>
+        <p class="section__prose sg-label">
+          Заголовки используют <code>clamp()</code> — масштаб от вьюпорта; подробнее в разделе «Сетка».
+        </p>
+
+        <h2 id="layout">Сетка и адаптив</h2>
+        <p class="section__prose">
+          Отдельной 12-колоночной сетки нет: <strong>full-bleed</strong> layout с боковыми полями
+          <code>--space</code> и локальными CSS Grid внутри секций. Контентная колонка DS и кейсов —
+          <code>.case-article</code> (max-width 48rem).
+        </p>
+
+        <h3>Базовый каркас</h3>
+        <ul class="section__prose">
+          <li><code>--space: clamp(1rem, 4vw, 2.75rem)</code> — горизонтальные поля + <code>safe-area-inset</code>.</li>
+          <li><code>--max: none</code> — без фиксированной «коробки» 1200px; ширина = вьюпорт минус padding.</li>
+          <li><code>.section</code> — вертикальные отступы через <code>clamp()</code>; <code>.section__inner</code> центрирует блок.</li>
+          <li><code>.section--tight</code> — компактнее по вертикали (кейсы, эта страница).</li>
+        </ul>
+
+        <h3>Брейкпоинты</h3>
+        <div class="sg-table-wrap">
+          <table class="sg-table">
+            <thead>
+              <tr>
+                <th scope="col">От</th>
+                <th scope="col">Что меняется</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td><code>860px</code></td>
+                <td><code>.hero__grid</code> → 2 колонки <code>1.15fr 0.85fr</code></td>
+              </tr>
+              <tr>
+                <td><code>760px</code> / <code>1180px</code></td>
+                <td><code>.projects-carousel</code>: <code>--projects-visible</code> 1 → 2 → 3 карточки</td>
+              </tr>
+              <tr>
+                <td><code>720px</code></td>
+                <td><code>.skills-category__grid</code> → 2 колонки</td>
+              </tr>
+              <tr>
+                <td><code>1024px</code></td>
+                <td>Навыки: 6-колоночная мозаика (<code>grid-column: span …</code>)</td>
+              </tr>
+              <tr>
+                <td><code>560px</code> / <code>1024px</code></td>
+                <td><code>.contact-grid</code> → 2 → 4 колонки</td>
+              </tr>
+              <tr>
+                <td><code>48rem</code> / <code>28rem</code></td>
+                <td>Галерея кейса: ≤2 col → 1 col</td>
+              </tr>
+              <tr>
+                <td><code>640px</code></td>
+                <td><code>case-media-gallery--wide</code> схлопывается в ширину колонки</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <h3>Hero: одна → две колонки</h3>
+        <p class="section__prose">Схема <code>.hero__grid</code> (сжато до 860px):</p>
+        <div class="sg-layout-demo" aria-hidden="true">
+          <div class="sg-layout-demo__hero">
+            <div class="sg-layout-demo__block">Текст</div>
+            <div class="sg-layout-demo__block">Визуал</div>
+          </div>
+        </div>
+
+        <h3>Контакты: 1 → 2 → 4</h3>
+        <p class="section__prose">Демо <code>.contact-grid</code> (плейсхолдеры, без переходов):</p>
+        <ul class="contact-grid sg-contact-demo" aria-hidden="true">
+          <li>
+            <span class="contact-card contact-card--link contact-card--brand-tg">
+              <span class="contact-card__corner" aria-hidden="true"></span>
+              <span class="contact-card__icon" aria-hidden="true"></span>
+              <span class="contact-card__body">
+                <span class="contact-card__name">1 col</span>
+                <span class="contact-card__hint">&lt; 560px</span>
+              </span>
+            </span>
+          </li>
+          <li>
+            <span class="contact-card contact-card--link contact-card--brand-vk">
+              <span class="contact-card__corner" aria-hidden="true"></span>
+              <span class="contact-card__icon" aria-hidden="true"></span>
+              <span class="contact-card__body">
+                <span class="contact-card__name">2 col</span>
+                <span class="contact-card__hint">≥ 560px</span>
+              </span>
+            </span>
+          </li>
+          <li>
+            <span class="contact-card contact-card--link contact-card--brand-ya">
+              <span class="contact-card__corner" aria-hidden="true"></span>
+              <span class="contact-card__icon" aria-hidden="true"></span>
+              <span class="contact-card__body">
+                <span class="contact-card__name">4 col</span>
+                <span class="contact-card__hint">≥ 1024px</span>
+              </span>
+            </span>
+          </li>
+          <li>
+            <span class="contact-card contact-card--action contact-card--brand-email">
+              <span class="contact-card__corner contact-card__corner--copy" aria-hidden="true"></span>
+              <span class="contact-card__icon contact-card__icon--accent" aria-hidden="true"></span>
+              <span class="contact-card__body">
+                <span class="contact-card__name">Сетка</span>
+                <span class="contact-card__hint">на главной</span>
+              </span>
+            </span>
+          </li>
+        </ul>
+        <p class="section__prose">
+          Навыки: мозаика на широком экране — см.
+          <a href="../index.html#skills">главную, #skills</a>. Портфолио: карусель на
+          <code>100vw</code> с <code>--projects-card-width</code> и JS-прокруткой — на главной
+          <a href="../index.html#projects">#projects</a>.
+        </p>
+
+        <h3>Wide в кейсах</h3>
+        <p class="section__prose">
+          <code>.case-media--wide</code>, <code>.case-media-gallery--wide</code> и <code>.case-callout</code> шире
+          колонки статьи: <code>min(100vw − 2×padding, content + 8rem)</code>, с полями <code>--space</code>. На узком
+          экране (до 640px) wide схлопывается в ширину колонки. Кадры с <code>data-image-viewer</code> — обводка и hover
+          как у <code>.case-video-shell</code> (живые примеры — демо элементов кейса). Подпись под видео —
+          <code>figcaption</code> по центру колонки.
+        </p>
+
+        <h3>Типографика и motion</h3>
+        <p class="section__prose">
+          Fluid type: <code>clamp()</code> на <code>.hero__title</code>, <code>.section__title</code>,
+          <code>.case-page__h1</code>. Скругления (<code>data-radius</code>) сетку не меняют. Для длинных скринов и
+          анимаций учитывается <code>prefers-reduced-motion: reduce</code>.
+        </p>
+
+        <h2 id="components">Компоненты</h2>
+        <p class="section__prose">Живые примеры; оболочка (шапка, FAB, футер, cookie) уже подключена на этой странице.</p>
+
+        <h3>Кнопки</h3>
+        <div class="sg-stack">
+          <a class="btn btn--primary btn--flat" href="#components"><span class="btn__icon" aria-hidden="true"></span><span>Primary flat</span></a>
+          <a class="btn btn--primary btn--raised" href="#components"><span>Primary raised</span></a>
+          <a class="btn btn--secondary btn--flat" href="#components"><span>Secondary flat</span></a>
+          <a class="btn btn--secondary btn--raised" href="#components"><span>Secondary raised</span></a>
+          <button type="button" class="btn btn--ghost btn--flat">Ghost flat</button>
+        </div>
+        <p class="sg-label">.btn .btn--primary | secondary | ghost · .btn--flat | raised · .btn__icon</p>
+
+        <h3>Теги</h3>
+        <ul class="hero__tags" aria-label="Демо тегов">
+          <li class="hero__tag">hero__tag</li>
+          <li class="hero__tag">UX/UI</li>
+        </ul>
+        <p class="sg-label">.hero__tags / .hero__tag</p>
+        <ul class="portfolio-card__tags" style="display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; padding: 0; margin: 0.5rem 0">
+          <li class="portfolio-card__tag">portfolio-card__tag</li>
+          <li class="portfolio-card__tag">Web App</li>
+        </ul>
+        <p class="sg-label">.portfolio-card__tags / .portfolio-card__tag</p>
+
+        <h3>Карточка портфолио</h3>
+        <div class="sg-portfolio-wrap">
+          <a class="portfolio-card" href="#components" tabindex="-1" aria-hidden="true">
+            <div class="portfolio-card__body">
+              <h3 class="portfolio-card__title">portfolio-card</h3>
+              <p class="portfolio-card__summary">Краткое описание проекта в две-три строки для демо Design System.</p>
+              <ul class="portfolio-card__tags" aria-label="Теги">
+                <li class="portfolio-card__tag">Демо</li>
+                <li class="portfolio-card__tag">UI</li>
+              </ul>
+            </div>
+            <div class="portfolio-card__cover" aria-hidden="true">
+              <img
+                class="portfolio-card__image"
+                src="../assets/shared/placeholder.webp"
+                alt=""
+                width="400"
+                height="225"
+                decoding="async"
+              />
+            </div>
+          </a>
+        </div>
+        <p class="sg-label">.portfolio-card и дочерние BEM-классы</p>
+
+        <h3>Заглушка при загрузке изображений</h3>
+        <p class="section__prose">
+          Пока <code>img</code> ещё не загрузился, <code>initImageLoadPlaceholder</code> вешает
+          <code>.is-img-loading</code> на картинку и <code>.has-img-loading</code> на обёртку. Слой фона —
+          <code>::before</code>, один блеск слева направо — <code>::after</code> (<code>img-ph-shine-sweep</code>).
+          Иконки, SVG и мелкие картинки до 40px пропускаются;
+          отключить точечно: <code>data-no-img-placeholder</code>. Ниже — зафиксированное демо (на сайте классы снимаются
+          после <code>load</code>).
+        </p>
+        <div
+          class="case-media case-media--content has-img-loading img-ph-demo"
+          role="img"
+          aria-label="Демо: заглушка при загрузке изображения"
+        ></div>
+        <p class="sg-label">.has-img-loading · .is-img-loading · .img-ph-demo (демо заглушки)</p>
+
+        <h3>Карточка навыка</h3>
+        <article class="skill-task-card">
+          <p class="skill-task-card__task">skill-task-card__task — формулировка задачи от бизнеса.</p>
+          <div class="skill-task-card__solutions">
+            <p class="skill-task-card__solution">skill-task-card__solution — первый подход к решению.</p>
+            <p class="skill-task-card__solution">Второй пункт в зоне решений.</p>
+          </div>
+        </article>
+        <p class="sg-label">.skill-task-card__task · __solutions · __solution</p>
+
+        <h3>Callout</h3>
+        <p class="section__prose">
+          Акцентный блок лонгрида: шире колонки (как wide-медиа), текст в <code>.case-callout__content</code> чуть
+          крупнее основного абзаца.
+        </p>
+        <aside class="case-callout" data-callout>
+          <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">📌</span>
+          <div class="case-callout__content">
+            <p>case-callout — важная мысль или вывод. Слева только цветные emoji (📌 💡 ✨ ✅), не текстовые символы ✎ ✓ ◆; <code>case-callout__emoji--pulse</code> для лёгкой анимации.</p>
+          </div>
+        </aside>
+        <p class="sg-label">.case-callout · .case-callout__emoji · .case-callout__emoji--pulse · .case-callout__content</p>
+
+        <h3>Контактные карточки</h3>
+        <p class="section__prose sg-label" style="margin-top: 0">
+          На главной в сетке четыре карточки (1→2→4 колонки). Здесь два примера — сетка принудительно в две колонки.
+        </p>
+        <ul class="contact-grid sg-contact-components">
+          <li>
+            <a class="contact-card contact-card--link contact-card--brand-tg" href="https://t.me/mamadaevv" rel="noopener noreferrer">
+              <span class="contact-card__corner" aria-hidden="true"></span>
+              <span class="contact-card__icon" aria-hidden="true">
+                <img src="../assets/shared/icons/tg.svg" alt="" width="24" height="24" loading="eager" decoding="async" />
+              </span>
+              <span class="contact-card__body">
+                <span class="contact-card__name">contact-card--link</span>
+                <span class="contact-card__hint">Внешняя ссылка</span>
+              </span>
+            </a>
+          </li>
+          <li>
+            <button
+              type="button"
+              class="contact-card contact-card--action contact-card--brand-email"
+              data-contact-copy
+              data-email-b64="bmlrQG1hbWFkYWV2di5ydQ=="
+              data-hint-default="Скопировать адрес"
+              aria-label="Демо: скопировать email"
+            >
+              <span class="contact-card__corner contact-card__corner--copy" aria-hidden="true"></span>
+              <span class="contact-card__icon contact-card__icon--accent" aria-hidden="true"></span>
+              <span class="contact-card__body">
+                <span class="contact-card__name">contact-card--action</span>
+                <span class="contact-card__hint" data-contact-copy-hint>Скопировать адрес</span>
+              </span>
+            </button>
+          </li>
+        </ul>
+        <p class="sg-label">.contact-card--link · --action · --brand-*</p>
+
+        <h3>Секция с фоном</h3>
+        <p class="section__prose">
+          На главной полоса <code>.section--surface</code> визуально читается через mesh; в кейсах фон страницы
+          ровный — ниже компактное демо с <code>background: var(--surface)</code>.
+        </p>
+        <section class="section section--surface section--tight sg-section-demo" aria-label="Демо секции">
+          <div class="section__inner">
+            <h2 class="section__title">section__title</h2>
+            <p class="section__prose">Фрагмент .section.section--surface + .section__inner</p>
+          </div>
+        </section>
+        <p class="sg-label">.section · .section--surface · .section--tight · .section__inner</p>
+
+        <h2 id="blocks">Блоки</h2>
+        <div class="sg-blocks-card">
+          <p>
+            Разметка лонгрида кейса: медиа и галереи, карточки ссылок, видео, callout, wide-блоки и прочие partials.
+            Живой эталон со всеми вариантами — на отдельной странице; оттуда копируют куски при сборке нового кейса.
+          </p>
+          <p>
+            <a class="btn btn--secondary btn--flat" href="template-elements-demo.html">Демо элементов кейса</a>
+          </p>
+        </div>
+
+        <h2 id="mini-projects">Активность</h2>
+        <div class="sg-blocks-card">
+          <p>
+            На главной в секции <code>#mini-projects</code> карточки <code>mp-card</code> в masonry-сетке. Типы, клетки и живая
+            раскладка вынесены на отдельную страницу.
+          </p>
+          <p>
+            <a class="btn btn--secondary btn--flat" href="mini-projects-showcase.html">Каталог карточек активности</a>
+          </p>
+        </div>
+      </div>
+    </main>
+
+    {{> footer-spacer}}
+    {{> footer}}
+    {{> cookie-notice}}
+    {{> nav-more-floating}}
+
+  </body>
+</html>
diff --git a/src/pages/cases/lunacy.html b/src/pages/cases/lunacy.html
new file mode 100644
index 0000000..8bf6274
--- /dev/null
+++ b/src/pages/cases/lunacy.html
@@ -0,0 +1,376 @@
+<!DOCTYPE html>
+<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta
+      name="description"
+      content="Кейс: работа над интерфейсом Lunacy в Icons8 — сценарии, итерации UI и скриншоты процесса."
+    />
+    <title>Lunacy — кейс</title>
+    {{> head-links}}
+    <style>
+      .case-article {
+        max-width: 48rem;
+        margin: 0 auto;
+      }
+      .case-article h2 {
+        margin: 2rem 0 0.75rem;
+        font-size: clamp(1.15rem, 2vw, 1.35rem);
+        font-weight: 700;
+        color: var(--text);
+      }
+      .case-article h3 {
+        font-size: 1.05rem;
+        font-weight: 600;
+        color: var(--text);
+      }
+      .case-article .section__prose {
+        margin-bottom: 0.75rem;
+        color: var(--text);
+      }
+      .case-article img,
+      .case-article video {
+        display: block;
+        max-width: 100%;
+        height: auto;
+        margin: 0.75rem 0 1rem;
+      }
+      .case-article ul,
+      .case-article ol {
+        margin: 0.5rem 0 1rem 1.25rem;
+        padding: 0;
+      }
+      .case-article li {
+        margin-bottom: 0.35rem;
+      }
+      .case-article a:not(.btn) {
+        color: var(--accent);
+      }
+      .case-media-gallery__item img {
+        margin: 0;
+      }
+    </style>
+    <script>
+      (function () {
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f === "merriweather" || f === "mono" || f === "geologica") {
+            d.dataset.font = f;
+          } else {
+            d.dataset.font = "merriweather";
+          }
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+        } catch (e) {}
+      })();
+    </script>
+  </head>
+  <body>
+    {{> header-case}}
+{{> fab-stack}}
+<main id="case-main" class="section section--tight">
+      <div class="section__inner case-article" data-case-sequential-images>
+        <p class="hero__eyebrow">Icons8 · desktop</p>
+        <h1 class="case-page__h1">Графический редактор Lunacy</h1>
+        <p class="section__prose">
+          Работа над интерфейсом Lunacy в команде Icons8: user flow, прототипы сложных сценариев, доработка функциональности и
+          визуальной логики. Ниже — фрагменты экранов из процесса (порядок кадров ориентирован на имена файлов).
+        </p>
+        <p class="section__prose">
+          Продукт: <a href="https://icons8.com/lunacy" target="_blank" rel="noopener noreferrer">icons8.com/lunacy</a>
+        </p>
+
+        <h2 id="obzor">Обзор</h2>
+        <p class="section__prose">Общий вид приложения — отправная точка для остальных материалов на странице.</p>
+        <figure class="case-media case-media--wide">
+          <img
+            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+            alt="Обзор приложения Lunacy"
+            data-src="../assets/lunacy/Lunacy_app_overview.webp"
+            loading="lazy"
+            decoding="async"
+            data-image-viewer
+          />
+          <figcaption>Обзор окна Lunacy.</figcaption>
+        </figure>
+        <p class="section__prose">Дальше — отдельные сценарии и итерации интерфейса в том порядке, в каком удобнее читать по смыслу и по именам файлов.</p>
+
+        <h2 id="blob-holst">Blob: настройки на холсте</h2>
+        <p class="section__prose">Работа с blob в контексте холста — отдельный сценарий до разборов панели по версиям.</p>
+        <figure class="case-media case-media--wide">
+          <img
+            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+            alt="Настройки blob на холсте"
+            data-src="../assets/lunacy/blob_settings_on_canvas.webp"
+            loading="lazy"
+            decoding="async"
+            data-image-viewer
+          />
+          <figcaption><code>blob_settings_on_canvas</code></figcaption>
+        </figure>
+        <p class="section__prose">Панель настроек для тех же задач развивалась серией макетов v1–v9 — они собраны в сетку ниже.</p>
+
+        <h2 id="compare">Компоненты и сравнение</h2>
+        <p class="section__prose">Сравнение компонентов и индикатор обновлений в панели.</p>
+        <figure class="case-media case-media--wide">
+          <img
+            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+            alt="Модальное окно сравнения компонентов"
+            data-src="../assets/lunacy/compare_components_modal_window.webp"
+            loading="lazy"
+            decoding="async"
+            data-image-viewer
+          />
+          <figcaption><code>compare_components_modal_window</code></figcaption>
+        </figure>
+        <figure class="case-media case-media--wide">
+          <img
+            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+            alt="Индикатор обновления компонентов в панели"
+            data-src="../assets/lunacy/components_update_indicator_location_panel.webp"
+            loading="lazy"
+            decoding="async"
+            data-image-viewer
+          />
+          <figcaption><code>components_update_indicator_location_panel</code></figcaption>
+        </figure>
+        <p class="section__prose">Два связанных экрана: поиск расхождений и отображение статуса обновлений рядом с навигацией по панели.</p>
+
+        <h2 id="prototype">Прототип в панели</h2>
+        <p class="section__prose">Создание прототипа на холсте и состояния панели для режима прототипа.</p>
+        <figure class="case-media case-media--wide">
+          <img
+            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+            alt="Модальное окно: создать прототип на холсте"
+            data-src="../assets/lunacy/modal_window_for_prototype_create_on_canvas.webp"
+            loading="lazy"
+            decoding="async"
+            data-image-viewer
+          />
+          <figcaption><code>modal_window_for_prototype_create_on_canvas</code></figcaption>
+        </figure>
+        <figure class="case-media case-media--wide">
+          <img
+            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+            alt="Модальное окно: состояния панели прототипа"
+            data-src="../assets/lunacy/modal_window_for_prototype_panel_states.webp"
+            loading="lazy"
+            decoding="async"
+            data-image-viewer
+          />
+          <figcaption><code>modal_window_for_prototype_panel_states</code></figcaption>
+        </figure>
+        <p class="section__prose">Оба кадра — про увязку прототипа с холстом и с набором состояний панели.</p>
+
+        <h2 id="shadow-pro">Shadow Pro: настройки</h2>
+        <p class="section__prose">Блок Shadow Pro: панель, идеи, модалки с авто-включением и выключением.</p>
+        <figure class="case-media case-media--wide">
+          <img
+            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+            alt="Shadow Pro: панель настроек"
+            data-src="../assets/lunacy/shadow_pro_settings_panel.webp"
+            loading="lazy"
+            decoding="async"
+            data-image-viewer
+          />
+          <figcaption><code>shadow_pro_settings_panel</code></figcaption>
+        </figure>
+        <figure class="case-media case-media--wide">
+          <img
+            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+            alt="Shadow Pro: идеи"
+            data-src="../assets/lunacy/shadow_pro_settings_ideas.webp"
+            loading="lazy"
+            decoding="async"
+            data-image-viewer
+          />
+          <figcaption><code>shadow_pro_settings_ideas</code></figcaption>
+        </figure>
+        <figure class="case-media case-media--wide">
+          <img
+            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+            alt="Shadow Pro: модалка, авто включено"
+            data-src="../assets/lunacy/shadow_pro_settings_modal_auto_on.webp"
+            loading="lazy"
+            decoding="async"
+            data-image-viewer
+          />
+          <figcaption><code>shadow_pro_settings_modal_auto_on</code></figcaption>
+        </figure>
+        <figure class="case-media case-media--wide">
+          <img
+            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+            alt="Shadow Pro: модалка, авто выключено"
+            data-src="../assets/lunacy/shadow_pro_settings_modal_auto-off.webp"
+            loading="lazy"
+            decoding="async"
+            data-image-viewer
+          />
+          <figcaption><code>shadow_pro_settings_modal_auto-off</code></figcaption>
+        </figure>
+        <p class="section__prose">Четыре кадра подряд показывают развитие одного подпроекта: от панели и набросков к уточнению поведения в модалках.</p>
+
+        <h2 id="blob-panel-versions">Панель настроек blob: версии v1–v9</h2>
+        <p class="section__prose">
+          Итерации панели по именам файлов <code>blob_settings_panel_v1</code> … <code>v9</code>. Сетка на ширине текста, три колонки на
+          широком экране; при сужении окна число колонок уменьшается автоматически.
+        </p>
+        <figure class="case-media case-media-gallery" style="--case-gallery-cols: 3">
+          <div class="case-media-gallery__grid">
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v1" data-src="../assets/lunacy/blob_settings_panel_v1.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v2" data-src="../assets/lunacy/blob_settings_panel_v2.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v3" data-src="../assets/lunacy/blob_settings_panel_v3.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v4" data-src="../assets/lunacy/blob_settings_panel_v4.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v5" data-src="../assets/lunacy/blob_settings_panel_v5.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v6" data-src="../assets/lunacy/blob_settings_panel_v6.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v7" data-src="../assets/lunacy/blob_settings_panel_v7.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v8" data-src="../assets/lunacy/blob_settings_panel_v8.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="blob panel v9" data-src="../assets/lunacy/blob_settings_panel_v9.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+          </div>
+          <figcaption>Девять версий подряд: читать слева направо, сверху вниз.</figcaption>
+        </figure>
+        <p class="section__prose">Сетка удобна для сравнения шага к шагу; для деталей клик по ячейке открывает полноэкранный просмотр.</p>
+
+        <h2 id="slider-versions">Слайдер: версии v1–v18 и кадр 14</h2>
+        <p class="section__prose">
+          Порядок по именам: <code>slider_v1</code> … <code>slider_v13</code>, затем <code>slider_14</code> (в ассете без суффикса <code>v</code>),
+          затем <code>slider_v15</code> … <code>slider_v18</code>.
+        </p>
+        <figure class="case-media case-media-gallery" style="--case-gallery-cols: 4">
+          <div class="case-media-gallery__grid">
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v1" data-src="../assets/lunacy/slider_v1.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v2" data-src="../assets/lunacy/slider_v2.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v3" data-src="../assets/lunacy/slider_v3.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v4" data-src="../assets/lunacy/slider_v4.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v5" data-src="../assets/lunacy/slider_v5.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v6" data-src="../assets/lunacy/slider_v6.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v7" data-src="../assets/lunacy/slider_v7.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v8" data-src="../assets/lunacy/slider_v8.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v9" data-src="../assets/lunacy/slider_v9.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v10" data-src="../assets/lunacy/slider_v10.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v11" data-src="../assets/lunacy/slider_v11.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v12" data-src="../assets/lunacy/slider_v12.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v13" data-src="../assets/lunacy/slider_v13.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider 14" data-src="../assets/lunacy/slider_14.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v15" data-src="../assets/lunacy/slider_v15.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v16" data-src="../assets/lunacy/slider_v16.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v17" data-src="../assets/lunacy/slider_v17.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="slider v18" data-src="../assets/lunacy/slider_v18.webp" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+          </div>
+          <figcaption>Восемнадцать вариантов слайдера плюс отдельный кадр <code>slider_14</code> между v13 и v15.</figcaption>
+        </figure>
+        <p class="section__prose">Такой ряд полезен при разборе эволюции контрола: от ранних раскладок до финальных состояний.</p>
+
+        <h2 id="sliders-all">Слайдеры: общий кадр</h2>
+        <p class="section__prose">Сводный экран по слайдерам — после ряда по версиям.</p>
+        <figure class="case-media case-media--wide">
+          <img
+            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+            alt="Все слайдеры: общий вид"
+            data-src="../assets/lunacy/sliders_all_set.webp"
+            loading="lazy"
+            decoding="async"
+            data-image-viewer
+          />
+          <figcaption><code>sliders_all_set</code></figcaption>
+        </figure>
+        <p class="section__prose">Завершает блок про слайдеры: контекст, как несколько контролов сосуществуют на одном экране.</p>
+      </div>
+    </main>
+
+    {{> projects-section-mp}}{{> projects-section}}
+{{> contact-section}}
+{{> footer-spacer}}
+{{> footer}}
+{{> cookie-notice}}
+{{> nav-more-floating}}
+
+  </body>
+</html>
diff --git a/src/pages/cases/manu-game-maker.html b/src/pages/cases/manu-game-maker.html
new file mode 100644
index 0000000..b793fc6
--- /dev/null
+++ b/src/pages/cases/manu-game-maker.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta
+      name="description"
+      content="Кейс: редизайн и развитие интерфейса игрового движка MANU — визуальная система и сложные пользовательские сценарии."
+    />
+    <title>Игровой движок MANU — кейс</title>
+    {{> head-links}}
+    <style>
+      .case-article {
+        max-width: 48rem;
+        margin: 0 auto;
+      }
+      .case-article h2 {
+        margin: 2rem 0 0.75rem;
+        font-size: clamp(1.15rem, 2vw, 1.35rem);
+        font-weight: 700;
+        color: var(--text);
+      }
+      .case-article .section__prose {
+        margin-bottom: 0.75rem;
+        color: var(--text);
+      }
+      .case-article a:not(.btn) {
+        color: var(--accent);
+      }
+    </style>
+    <script>
+      (function () {
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f === "merriweather" || f === "mono" || f === "geologica") {
+            d.dataset.font = f;
+          } else {
+            d.dataset.font = "merriweather";
+          }
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+        } catch (e) {}
+      })();
+    </script>
+  </head>
+  <body>
+    {{> header-case}}
+{{> fab-stack}}
+<main id="case-main" class="section section--tight">
+      <div class="section__inner case-article">
+        <p class="hero__eyebrow">Product Design · Desktop App</p>
+        <h1 class="case-page__h1">Игровой движок MANU</h1>
+        <p class="case-page__sub">
+          Редизайн и развитие интерфейса: новая концепция работы, обновлённая визуальная система и сотни проработанных пользовательских сценариев.
+        </p>
+        <p class="section__prose">
+          Работа велась вокруг десктопного редактора и связанных панелей: нужно было удержать целостность визуального языка при росте функциональности и не потерять опытные сценарии силовых пользователей.
+        </p>
+        <p class="section__prose">
+          Развёрнутый лонгрид кейса появится на этой странице позже; ниже — обложка для навигации из портфолио.
+        </p>
+        <h2>Обложка</h2>
+        <figure class="case-media case-media--wide">
+          <img
+            src="../assets/manu-game-maker/cover.webp"
+            alt="Интерфейс игрового движка MANU — обложка кейса"
+            width="1200"
+            height="675"
+            loading="lazy"
+            decoding="async"
+            data-image-viewer
+          />
+          <figcaption>Текущее превью для карточки портфолио</figcaption>
+        </figure>
+      </div>
+    </main>
+
+    {{> projects-section-mp}}{{> projects-section}}
+{{> contact-section}}
+{{> footer-spacer}}
+{{> footer}}
+{{> cookie-notice}}
+{{> nav-more-floating}}
+
+  </body>
+</html>
diff --git a/src/pages/cases/mini-projects-showcase.html b/src/pages/cases/mini-projects-showcase.html
new file mode 100644
index 0000000..a37d11f
--- /dev/null
+++ b/src/pages/cases/mini-projects-showcase.html
@@ -0,0 +1,379 @@
+<!DOCTYPE html>
+<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta
+      name="description"
+      content="Каталог карточек секции «Активность»: типы, ширина в клетках и живая masonry-сетка."
+    />
+    <title>Активность — каталог карточек</title>
+    {{> head-links}}
+    <style>
+      #main {
+        padding-bottom: clamp(3.5rem, 8vw, 5.5rem);
+      }
+
+      .case-article.mp-showcase-page {
+        max-width: 56rem;
+        margin: 0 auto;
+      }
+
+      .case-article.mp-showcase-page .case-page__sub {
+        margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
+      }
+
+      .case-article.mp-showcase-page .section__prose {
+        margin-bottom: 1.1rem;
+        line-height: 1.65;
+        color: var(--text);
+      }
+
+      .case-article.mp-showcase-page > h2 {
+        margin: 0 0 1rem;
+        padding-top: clamp(2.5rem, 5vw, 3.5rem);
+        font-family: var(--font);
+        font-size: clamp(1.15rem, 2vw, 1.35rem);
+        font-weight: 700;
+        color: var(--text);
+        scroll-margin-top: 1.5rem;
+        border-top: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
+      }
+
+      .case-article.mp-showcase-page > h2#intro {
+        padding-top: clamp(1.25rem, 3vw, 2rem);
+        border-top: none;
+      }
+
+      .mp-showcase-toc {
+        margin: 0 0 1.75rem;
+        padding: 1rem 1.15rem;
+        border: 1px solid var(--line);
+        border-radius: var(--radius-md);
+        background: var(--surface);
+        font-size: 0.92rem;
+        line-height: 1.55;
+      }
+
+      .mp-showcase-toc ol {
+        margin: 0.35rem 0 0;
+        padding-left: 1.2rem;
+      }
+
+      .mp-showcase-toc a {
+        color: var(--accent-text);
+      }
+
+      .mp-showcase-specimens {
+        display: flex;
+        flex-direction: column;
+        gap: 0;
+        margin: 1.25rem 0 0.5rem;
+      }
+
+      .mp-showcase-specimen-row {
+        display: grid;
+        grid-template-columns: minmax(14rem, 1fr) minmax(12rem, 1.15fr);
+        gap: 1rem 1.75rem;
+        align-items: start;
+        padding-bottom: 2.25rem;
+        margin-bottom: 2.25rem;
+        border-bottom: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
+      }
+
+      .mp-showcase-specimen-row:last-child {
+        padding-bottom: 0;
+        margin-bottom: 0;
+        border-bottom: none;
+      }
+
+      @media (max-width: 719px) {
+        .mp-showcase-specimen-row {
+          grid-template-columns: 1fr;
+        }
+      }
+
+      .mp-showcase-specimen__card {
+        display: flex;
+        flex-direction: column;
+        gap: 0.45rem;
+        min-width: 0;
+      }
+
+      .mp-showcase-specimen__desc .section__prose {
+        margin-bottom: 0;
+      }
+
+      .mp-showcase-specimen__desc .section__prose strong {
+        font-weight: 600;
+        color: var(--text);
+      }
+
+      .mp-showcase-specimen__label {
+        margin: 0;
+        font-size: 0.78rem;
+        line-height: 1.4;
+        color: var(--text-muted);
+      }
+
+      .mp-showcase-specimen__card .mp-card {
+        flex: 1 1 auto;
+      }
+
+      /* На главной тоже, но в узкой колонке демо center давал пустоту над заголовком */
+      .mp-showcase-specimen__card .mp-card--horizontal .mp-card__body {
+        justify-content: flex-start;
+      }
+
+      .mp-showcase-grid-section {
+        padding-top: clamp(2.75rem, 6vw, 4.5rem);
+      }
+
+      .mp-showcase-grid-section .section__title {
+        margin-bottom: 0.85rem;
+      }
+
+      .mp-showcase-grid-section .section__prose {
+        margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
+      }
+
+      .mp-showcase-cells-table {
+        width: 100%;
+        margin: 1rem 0 0.5rem;
+        border-collapse: collapse;
+        font-size: 0.88rem;
+      }
+
+      .mp-showcase-cells-table th,
+      .mp-showcase-cells-table td {
+        padding: 0.55rem 0.65rem;
+        border: 1px solid var(--line);
+        text-align: left;
+        vertical-align: top;
+      }
+
+      .mp-showcase-cells-table th {
+        font-weight: 600;
+        color: var(--text);
+        background: color-mix(in srgb, var(--surface) 88%, var(--accent));
+      }
+
+      .mp-showcase-cells-demo {
+        margin: 1.35rem 0 1.65rem;
+        padding: 1.1rem 1.15rem 1.2rem;
+        border: 1px solid var(--line);
+        border-radius: var(--radius-md);
+        background: color-mix(in srgb, var(--surface) 90%, var(--accent));
+      }
+
+      .mp-showcase-cells-demo__legend {
+        display: grid;
+        grid-template-columns: repeat(6, 1fr);
+        gap: 0.5rem;
+        margin-bottom: 0.85rem;
+        font-size: 0.72rem;
+        color: var(--text-muted);
+        text-align: center;
+      }
+
+      .mp-showcase-cells-demo__legend span {
+        padding: 0.2rem 0;
+        border-radius: var(--radius-sm);
+        background: color-mix(in srgb, var(--line) 35%, transparent);
+      }
+
+      .mp-showcase-cells-demo__row {
+        display: grid;
+        grid-template-columns: repeat(6, 1fr);
+        gap: 0.5rem;
+        margin-bottom: 0.55rem;
+      }
+
+      .mp-showcase-cells-demo__row:last-of-type {
+        margin-bottom: 0;
+      }
+
+      .mp-showcase-cells-demo__block {
+        grid-row: 1;
+        min-height: 2.35rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--radius-sm);
+        border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
+        background: color-mix(in srgb, var(--accent) 14%, var(--surface));
+        font-size: 0.78rem;
+        font-weight: 600;
+        color: var(--accent-text);
+      }
+
+      .mp-showcase-cells-demo__block--1 {
+        grid-column: span 1;
+      }
+
+      .mp-showcase-cells-demo__block--2 {
+        grid-column: span 2;
+      }
+
+      .mp-showcase-cells-demo__block--3 {
+        grid-column: span 3;
+      }
+
+      .mp-showcase-cells-demo__caption {
+        margin: 0.85rem 0 0;
+        font-size: 0.82rem;
+        line-height: 1.45;
+        color: var(--text-muted);
+      }
+
+      .mp-showcase-cells-demo__row-label {
+        margin: 0.65rem 0 0.35rem;
+        font-size: 0.75rem;
+        color: var(--text-muted);
+      }
+
+      .mp-showcase-grid-section .mini-projects-grid {
+        margin-top: 0;
+      }
+    </style>
+    <script>
+      (function () {
+        try {
+          var raw = localStorage.getItem("siteThemeV1");
+          if (!raw) return;
+          var t = JSON.parse(raw);
+          var d = document.documentElement;
+          if (t.mode === "light" || t.mode === "dark") d.dataset.theme = t.mode;
+          if (t.radius === "soft" || t.radius === "medium" || t.radius === "strong") d.dataset.radius = t.radius;
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f === "merriweather" || f === "mono" || f === "geologica") d.dataset.font = f;
+          if (t.meshBg === "off") d.dataset.meshBg = "off";
+        } catch (e) {}
+      })();
+    </script>
+  </head>
+  <body>
+    {{> header-minimal}}
+    {{> fab-stack-home-contact}}
+    <main id="main">
+      <section class="section section--tight">
+        <div class="section__inner">
+          <div class="case-article mp-showcase-page">
+        <p class="hero__eyebrow">Design System · Активность</p>
+        <h1 class="case-page__h1">Карточки активности</h1>
+        <p class="case-page__sub">Все типы карточек и живая сетка для подбора раскладки на главной</p>
+        <p class="section__prose">
+          Страница для верстки и контента: здесь те же классы и скрипты, что в секции на главной. Меняйте шрифт и тему в панели
+          справа, сужайте окно — сетка пересчитается. Подписи в заголовках карточек — подсказки, в проде их убрать.
+        </p>
+
+        <nav class="mp-showcase-toc" aria-label="Оглавление каталога">
+          <p><strong>Разделы</strong></p>
+          <ol>
+            <li><a href="#types">Типы карточек</a></li>
+            <li><a href="#cells">Ширина в клетках</a></li>
+            <li><a href="#grid">Живая сетка masonry</a></li>
+          </ol>
+        </nav>
+
+        <h2 id="intro">Как пользоваться</h2>
+        <p class="section__prose">
+          Сначала выберите <strong>тип</strong> (stack, horizontal, compact, decor), затем <strong>data-mp-cells</strong> (1–3) и
+          порядок <code>li</code> в списке. Карточки с <code>data-mp-extra</code> не влияют на высоту списка до кнопки «Показать все».
+          Подробности — в <code>docs/mini-projects-cards.md</code>.
+        </p>
+
+        <h2 id="types">Типы карточек</h2>
+        <p class="section__prose">
+          Слева пример карточки с текстом, справа название типа и пояснение по классам.
+        </p>
+        {{> mini-projects-showcase-specimens}}
+
+        <h2 id="cells">Ширина в клетках</h2>
+        <p class="section__prose">
+          Атрибут <code>data-mp-cells</code> на <code>li.mini-projects-grid__item</code> задаёт желаемую ширину от 1 до 3 клеток.
+          Скрипт не даст карточке быть шире текущего ряда.
+        </p>
+        <figure class="mp-showcase-cells-demo" aria-label="Схема ширины карточек в клетках">
+          <div class="mp-showcase-cells-demo__legend" aria-hidden="true">
+            <span>1</span>
+            <span>2</span>
+            <span>3</span>
+            <span>4</span>
+            <span>5</span>
+            <span>6</span>
+          </div>
+          <p class="mp-showcase-cells-demo__row-label">Ряд из 6 клеток (широкий экран)</p>
+          <div class="mp-showcase-cells-demo__row">
+            <div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--3">3</div>
+            <div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--3">3</div>
+          </div>
+          <div class="mp-showcase-cells-demo__row">
+            <div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--2">2</div>
+            <div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--2">2</div>
+            <div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--2">2</div>
+          </div>
+          <div class="mp-showcase-cells-demo__row">
+            <div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--1">1</div>
+            <div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--2">2</div>
+            <div class="mp-showcase-cells-demo__block mp-showcase-cells-demo__block--3">3</div>
+          </div>
+          <figcaption class="mp-showcase-cells-demo__caption">
+            Цифра в блоке = значение <code>data-mp-cells</code>. Карточка занимает столько клеток подряд в одном ряду.
+          </figcaption>
+        </figure>
+        <table class="mp-showcase-cells-table">
+          <thead>
+            <tr>
+              <th scope="col">Ширина списка</th>
+              <th scope="col">Клеток в ряду</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>≥ 1180px</td>
+              <td>6</td>
+            </tr>
+            <tr>
+              <td>≥ 880px</td>
+              <td>4</td>
+            </tr>
+            <tr>
+              <td>≥ 520px</td>
+              <td>2</td>
+            </tr>
+            <tr>
+              <td>уже</td>
+              <td>1 (вся строка)</td>
+            </tr>
+          </tbody>
+        </table>
+        <p class="section__prose">
+          На шести клетках пара <code>3 + 3</code> или тройка <code>2 + 2 + 2</code> обычно смотрится ровнее случайного набора.
+          Декор (<code>mp-card--decor</code>) заполняет пустоты в сетке.
+        </p>
+          </div>
+        </div>
+      </section>
+
+      <section id="grid" class="section section--surface mp-showcase-grid-section" aria-labelledby="grid-title">
+        <div class="section__inner">
+          <h2 id="grid-title" class="section__title">Живая сетка masonry</h2>
+          <p class="section__prose">
+            Демо блока «Активность» с главной: здесь все типы карточек в одной живой сетке. В подписях у каждой — тип
+            раскладки и <code>data-mp-cells</code>. Меняйте ширину окна и шрифт в панели темы, смотрите, как сетка
+            перестраивается, и переносите удачный порядок на главную.
+          </p>
+          {{> mini-projects-showcase-grid}}
+        </div>
+      </section>
+    </main>
+
+    {{> footer-spacer}}
+    {{> footer}}
+    {{> cookie-notice}}
+    {{> nav-more-floating}}
+  </body>
+</html>
diff --git a/src/pages/cases/mobile-clinic-app.html b/src/pages/cases/mobile-clinic-app.html
new file mode 100644
index 0000000..f700974
--- /dev/null
+++ b/src/pages/cases/mobile-clinic-app.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta
+      name="description"
+      content="Кейс: мобильное приложение для сети клиник — запись к врачам, медицинские услуги, навигация и быстрые действия."
+    />
+    <title>Мобильное приложение для сети клиник — кейс</title>
+    {{> head-links}}
+    <style>
+      .case-article {
+        max-width: 48rem;
+        margin: 0 auto;
+      }
+      .case-article h2 {
+        margin: 2rem 0 0.75rem;
+        font-size: clamp(1.15rem, 2vw, 1.35rem);
+        font-weight: 700;
+        color: var(--text);
+      }
+      .case-article .section__prose {
+        margin-bottom: 0.75rem;
+        color: var(--text);
+      }
+      .case-article a:not(.btn) {
+        color: var(--accent);
+      }
+    </style>
+    <script>
+      (function () {
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f === "merriweather" || f === "mono" || f === "geologica") {
+            d.dataset.font = f;
+          } else {
+            d.dataset.font = "merriweather";
+          }
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+        } catch (e) {}
+      })();
+    </script>
+  </head>
+  <body>
+    {{> header-case}}
+{{> fab-stack}}
+<main id="case-main" class="section section--tight">
+      <div class="section__inner case-article">
+        <p class="hero__eyebrow">UX/UI · Mobile App</p>
+        <h1 class="case-page__h1">Мобильное приложение для сети клиник</h1>
+        <p class="case-page__sub">
+          Запись к врачам и работа с медицинскими услугами: простой путь пользователя, понятная навигация и быстрый доступ к действиям.
+        </p>
+        <p class="section__prose">
+          Фокус проекта — снять тревожность и лишние шаги у пациента: ясные статусы записи, предсказуемые формы и опора на привычные паттерны мобильных приложений.
+        </p>
+        <p class="section__prose">
+          Полный разбор кейса будет опубликован здесь; пока страница служит точкой входа из блока портфолио на главной.
+        </p>
+        <h2>Обложка</h2>
+        <figure class="case-media case-media--wide">
+          <img
+            src="../assets/mobile-clinic-app/cover.webp"
+            alt="Мобильное приложение для сети клиник — обложка кейса"
+            width="1200"
+            height="675"
+            loading="lazy"
+            decoding="async"
+            data-image-viewer
+          />
+          <figcaption>Текущее превью для карточки портфолио</figcaption>
+        </figure>
+      </div>
+    </main>
+
+    {{> projects-section-mp}}{{> projects-section}}
+{{> contact-section}}
+{{> footer-spacer}}
+{{> footer}}
+{{> cookie-notice}}
+{{> nav-more-floating}}
+
+  </body>
+</html>
diff --git a/src/pages/cases/obsidian-plugin-columns-view.html b/src/pages/cases/obsidian-plugin-columns-view.html
new file mode 100644
index 0000000..a14abc8
--- /dev/null
+++ b/src/pages/cases/obsidian-plugin-columns-view.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta
+      name="description"
+      content="Кейс: плагин колоночного вида для Obsidian — дизайн и UX плагина для заметок."
+    />
+    <title>Колоночный вид для Obsidian — кейс</title>
+    {{> head-links}}
+    {{> head-plyr}}
+    <style>
+      .case-article {
+        max-width: 48rem;
+        margin: 0 auto;
+      }
+      .case-article h2 {
+        margin: 2rem 0 0.75rem;
+        font-size: clamp(1.15rem, 2vw, 1.35rem);
+        font-weight: 700;
+        color: var(--text);
+      }
+      .case-article h3 {
+        font-size: 1.05rem;
+        font-weight: 600;
+        color: var(--text);
+      }
+      .case-article .section__prose {
+        margin-bottom: 0.75rem;
+        color: var(--text);
+      }
+      .case-article a:not(.btn) {
+        color: var(--accent);
+      }
+    </style>
+    <script>
+      (function () {
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f === "merriweather" || f === "mono" || f === "geologica") {
+            d.dataset.font = f;
+          } else {
+            d.dataset.font = "merriweather";
+          }
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+        } catch (e) {}
+      })();
+    </script>
+  </head>
+  <body>
+    {{> header-case}}
+{{> fab-stack}}
+<main id="case-main" class="section section--tight">
+      <div class="section__inner case-article">
+        <p class="hero__eyebrow">Obsidian · Plugin</p>
+        <h1 class="case-page__h1">Колоночный вид — плагин для Obsidian</h1>
+        <p class="case-page__sub">Дизайн и разработка интерфейса для многоколоночной работы с заметками</p>
+
+        <p class="section__prose">
+          <!-- Здесь будет введение -->
+        </p>
+
+        <h2 id="context">Контекст</h2>
+        <p class="section__prose">
+          <!-- Контекст проекта -->
+        </p>
+
+        <h2 id="task">Задача</h2>
+        <p class="section__prose">
+          <!-- Описание задачи -->
+        </p>
+
+        <h2 id="solution">Решение</h2>
+        <p class="section__prose">
+          <!-- Что было сделано -->
+        </p>
+
+        <h3>Фильтр использования</h3>
+        <figure class="case-media">
+          <div class="case-video-shell">
+            <video controls preload="metadata" playsinline poster="../assets/obsidian-plugin-columns-view/filter use.webp" data-case-video-player style="display: block; width: 100%; height: auto">
+              <source src="../assets/obsidian-plugin-columns-view/filter use.webm" type="video/webm" />
+              <source src="../assets/obsidian-plugin-columns-view/filter use.mp4" type="video/mp4" />
+              Ваш браузер не поддерживает видео.
+            </video>
+          </div>
+          <figcaption>Фильтрация заметок в колоночном виде.</figcaption>
+        </figure>
+
+        <h3>Конфигурация отображения</h3>
+        <figure class="case-media">
+          <div class="case-video-shell">
+            <video controls preload="metadata" playsinline poster="../assets/obsidian-plugin-columns-view/view configure.webp" data-case-video-player style="display: block; width: 100%; height: auto">
+              <source src="../assets/obsidian-plugin-columns-view/view configure.webm" type="video/webm" />
+              <source src="../assets/obsidian-plugin-columns-view/view configure.mp4" type="video/mp4" />
+              Ваш браузер не поддерживает видео.
+            </video>
+          </div>
+          <figcaption>Настройка колонок и отображения.</figcaption>
+        </figure>
+
+        <h2 id="result">Результат</h2>
+        <p class="section__prose">
+          <!-- Итоги -->
+        </p>
+      </div>
+    </main>
+
+    {{> projects-section-mp}}{{> projects-section}}
+{{> contact-section}}
+{{> footer-spacer}}
+{{> footer}}
+{{> cookie-notice}}
+{{> nav-more-floating}}
+
+  </body>
+</html>
diff --git a/src/pages/cases/orc-automation-panel.html b/src/pages/cases/orc-automation-panel.html
new file mode 100644
index 0000000..8e0b617
--- /dev/null
+++ b/src/pages/cases/orc-automation-panel.html
@@ -0,0 +1,256 @@
+<!DOCTYPE html>
+<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta
+      name="description"
+      content="Кейс: редизайн веб-панели оркестратора Primo RPA — кураторство дизайна, внедрение Ant Design и Storybook, синхронизация токенов с Figma."
+    />
+    <title>Веб-панель для оркестрации автоматизаций — кейс</title>
+    {{> head-links}}
+    <style>
+      .case-article {
+        max-width: 48rem;
+        margin: 0 auto;
+      }
+      .case-article h2 {
+        margin: 2rem 0 0.75rem;
+        font-size: clamp(1.15rem, 2vw, 1.35rem);
+        font-weight: 700;
+        color: var(--text);
+      }
+      .case-article h3 {
+        font-size: 1.05rem;
+        font-weight: 600;
+        color: var(--text);
+        margin: 1.25rem 0 0.5rem;
+      }
+      .case-article .section__prose {
+        margin-bottom: 0.75rem;
+        color: var(--text);
+      }
+      .case-article img {
+        display: block;
+        max-width: 100%;
+        height: auto;
+        margin: 0.75rem 0 1rem;
+      }
+      .case-article ul {
+        margin: 0.5rem 0 1rem 1.25rem;
+        padding: 0;
+      }
+      .case-article li {
+        margin-bottom: 0.35rem;
+      }
+      .case-article a:not(.btn) {
+        color: var(--accent);
+      }
+    </style>
+    <script>
+      (function () {
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f === "merriweather" || f === "mono" || f === "geologica") {
+            d.dataset.font = f;
+          } else {
+            d.dataset.font = "merriweather";
+          }
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+        } catch (e) {}
+      })();
+    </script>
+  </head>
+  <body>
+    {{> header-case}}
+    {{> fab-stack}}
+    <main id="case-main" class="section section--tight">
+      <div class="section__inner case-article">
+        <p class="hero__eyebrow">Primo RPA · UX/UI · Web App</p>
+        <h1 class="case-page__h1">Веб-панель для оркестрации автоматизаций</h1>
+        <p class="case-page__sub">
+          Оркестратор Primo RPA: запуск роботов, проекты и контроль процессов в веб-кабинете для админов и разработчиков автоматизаций.
+        </p>
+
+        <div class="case-block" id="obzor">
+          <h2>Контекст</h2>
+          <p class="section__prose">
+            В стеке Primo RPA оркестратор отвечает за расписание, очередь и статусы RPA-роботов на инфраструктуре клиента. С ним работают не только из студии разработки, но и из браузера: смотрят проекты, перезапускают задания, разбирают сбои.
+          </p>
+          <p class="section__prose">
+            К тому моменту продукт уже был в эксплуатации, но интерфейс заметно устарел: пользователи сталкивались с неудобствами в навигации, визуальным шумом в таблицах и неочевидными сценариями в некоторых разделах. Задача стояла освежить вид интерфейса, сделать его современным и исправить накопившиеся UX-проблемы.
+          </p>
+        </div>
+
+        <div class="case-block" id="rol">
+          <h2>Роль и подход</h2>
+          <p class="section__prose">
+            Моя роль в этом проекте была скорее кураторской — я не делал дизайн самостоятельно, а выстраивал процесс так, чтобы команда дизайна и разработки работала слаженно.
+          </p>
+          <aside class="case-callout" data-callout>
+            <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">💡</span>
+            <div class="case-callout__content">
+              <p>Я изучил продукт «с нуля»: разобрался с интерфейсом оркестратора, нашёл болевые точки пользователей и сформулировал задачи для обновления.</p>
+            </div>
+          </aside>
+          <p class="section__prose">
+            Параллельно я искал дизайнера, который взял бы на себя основную визуальную работу. Отбор прошла Елизавета — среди более чем 150 заявок она лучше всего подходила под предстоящий фронт работ.
+          </p>
+          <p class="section__prose">
+            В течение трёх месяцев я погружал новую сотрудницу в детали проекта: ставил задачи, давал обратную связь по создаваемым макетам, делился контекстом по пользовательским сценариям. Вместе с командой разработки мы планировали порядок обновления дизайна сервиса — меняли экраны по приоритету, вкладывая изменения в текущие релизы, без «остановить всё и перерисовать».
+          </p>
+        </div>
+
+        <div class="case-block" id="tekhnicheskiy-stek">
+          <h2>Технический стек и инструменты</h2>
+          <p class="section__prose">
+            В качестве фреймворка для интерфейса был выбран <a href="https://ant.design/" target="_blank" rel="noopener noreferrer">Ant Design</a> последней версии. Он уже использовался в проекте, и его свежий релиз предлагал <a href="https://ant.design/theme-editor" target="_blank" rel="noopener noreferrer">Theme Editor</a> — возможность настраивать внешний вид компонентов через дизайн-токены без переопределения стилей вручную. Это давало и дизайнерам, и разработчикам единый язык описания интерфейса.
+          </p>
+          <p class="section__prose">
+            Единым источником правды и мостом между дизайном и разработкой стал <a href="https://storybook.js.org/" target="_blank" rel="noopener noreferrer">Storybook</a>. В нём компоненты были не просто задокументированы, а реально работали в изолированной среде — это позволяло дизайнерам видеть реализацию элементов вживую, а разработчикам — быстрее интегрировать компоненты в панель.
+          </p>
+        </div>
+
+        <div class="case-block" id="dizayn-sistema">
+          <h2>Дизайн-система и синхронизация</h2>
+          <p class="section__prose">
+            Для удобства работы мы синхронизировали токены из Ant Design с токенами в Figma — цвета, отступы, типографика и радиусы скругления были приведены к единым значениям. Работало это так: если в Figma токены обновлялись, их можно было выгрузить в JSON и без проблем сразу загрузить в код — вместо того, чтобы разработчик вручную искал изменения и правил каждый токен индивидуально. Такой подход также позволил смотреть на дизайн более системно.
+          </p>
+          <aside class="case-callout" data-callout>
+            <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">📌</span>
+            <div class="case-callout__content">
+              <p>Основная задача, которую решал подход такого тесного сотрудничества дизайна и разработки, — максимально точно перенести задуманное в прод и не растерять по пути мелочей.</p>
+            </div>
+          </aside>
+          <p class="section__prose">
+            Компоненты в Figma создавались с нуля — по референсам Ant Design, но без использования готовых библиотек. Отказ от готовых решений был осознанным: нам нужна была полная настройка под наш стиль работы и возможность использовать новые функции Figma, которые не поддерживались в библиотеках из сообщества Figma.
+          </p>
+          <p class="section__prose">
+            Для Storybook мы отобрали и настроили плагины, которые были уместны для наших задач — контроль доступности, просмотр состояний компонентов, переключение тем и локалей. Это сделало Storybook не просто витриной компонентов, а полноценным инструментом дизайн-ревью.
+          </p>
+        </div>
+
+        <div class="case-block" id="rabochaya-sreda">
+          <h2>Рабочая среда дизайнера</h2>
+          <p class="section__prose">
+            Мы настроили среду так, чтобы дизайнер мог видеть реализацию компонентов вживую у себя на компьютере, используя локальный Storybook и Git. Это позволяло точнее контролировать, как задуманный дизайн воплощается в коде, и оперативно замечать расхождения на ранних этапах.
+          </p>
+          <p class="section__prose">
+            Обсуждался также шаг ускорить поддержку Storybook тем, чтобы дизайнер сам мог описывать JSX для реализованного компонента — это сокращало путь от макета до документированного компонента в сторибуке.
+          </p>
+          <p class="section__prose">
+            Мы отладили рабочий процесс по передаче иконок в библиотеку. Особенность заключалась в том, чтобы иконки можно было отобразить в Storybook с фильтрацией и сортировкой. При этом дизайнер мог обновлять иконки без привлечения разработчика — просто пушил новые файлы в репозиторий.
+          </p>
+          <p class="section__prose">
+            Увидеть обновлённую иконку сразу в браузере позволяло лучше её оптимизировать и убрать косяки отображения при использовании булевых операций.
+          </p>
+          <p class="section__prose">
+            Для Figma также был разработан подход и правила, которые не только ограничивали дизайнера, но и позволяли гарантированно делать консистентные и рабочие иконки.
+          </p>
+        </div>
+
+        <div class="case-block" id="ux-uluchsheniya">
+          <h2>UX-улучшения</h2>
+          <p class="section__prose">
+            За время обновления интерфейса Елизавета предложила ещё и ряд улучшений пользовательского опыта. Часть из них была успешно внедрена — например, более понятная группировка элементов в сложных формах и переработанные состояния загрузки. Но в приоритете было не ломать старый UX, к которому привыкли пользователи, поэтому многие идеи сохранились в бэклог для следующей итерации.
+          </p>
+        </div>
+
+        <div class="case-block" id="proekty">
+          <h2>Список проектов</h2>
+          <p class="section__prose">
+            Таблица проектов — один из самых частых экранов. На старой версии много колонок, плотная сетка и мелкий текст: статус и имя проекта читаются с трудом, особенно на ноутбуке.
+          </p>
+          <p class="section__prose">В новой версии:</p>
+          <ul>
+            <li>колонки свели к тому, что нужно для ежедневной работы;</li>
+            <li>статусы и действия вынесли в предсказуемые зоны строки;</li>
+            <li>отступы и типографику подтянули под остальную панель на Ant Design.</li>
+          </ul>
+
+          <h3>Было</h3>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/orc-primo-rpa/projects--table-old.webp"
+              alt="Список проектов в оркестраторе — предыдущая версия таблицы"
+              width="1919"
+              height="867"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+          </figure>
+
+          <h3>Стало</h3>
+          <figure class="case-media case-media--wide">
+            <img
+              src="../assets/orc-primo-rpa/projects--table-new.webp"
+              alt="Список проектов в оркестраторе — обновлённая таблица"
+              width="1366"
+              height="768"
+              loading="lazy"
+              decoding="async"
+              data-image-viewer
+            />
+          </figure>
+        </div>
+
+        <div class="case-block" id="itog">
+          <h2>Результаты и рефлексия</h2>
+          <p class="section__prose">
+            Экран проектов стал проще сканировать: меньше визуального шума, быстрее находить нужный проект и его состояние. После раскатывания нового дизайна среди нескольких клиентов мы получили положительные отзывы и множество идей для дальнейших улучшений.
+          </p>
+          <p class="section__prose">
+            Я оставил проект, когда Елизавета уже уверенно чувствовала себя в нём и могла самостоятельно вести дизайнерские задачи. Периодически я отвечал на точечные вопросы, но в целом передача прошла гладко.
+          </p>
+          <p class="section__prose">
+            Спустя год с небольшим процессы в команде заметно изменились. По словам ребят, в создании и передаче дизайна теперь активное участие принимают инструменты с нейросетями — такие как Claude Design. То, что мы начинали выстраивать вручную через токены, Storybook и синхронизацию сред, сейчас в какой-то мере автоматизируется.
+          </p>
+          <p class="section__prose">
+            Считаю, что проделанная работа была выполнена достаточно оперативно и качественно — в условиях постоянных изменений на рынке и внутри компании нам удалось не просто обновить интерфейс, но и выстроить устойчивый процесс, который продолжил работать уже без моего участия.
+          </p>
+        </div>
+      </div>
+    </main>
+
+    {{> projects-section-mp}}{{> projects-section}}
+    {{> contact-section}}
+    {{> footer-spacer}}
+    {{> footer}}
+    {{> cookie-notice}}
+    {{> nav-more-floating}}
+  </body>
+</html>
diff --git a/src/pages/cases/task-distribution-concept.html b/src/pages/cases/task-distribution-concept.html
new file mode 100644
index 0000000..1895489
--- /dev/null
+++ b/src/pages/cases/task-distribution-concept.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta
+      name="description"
+      content="Кейс: концепт сервиса распределения задач — прозрачность процессов и командная работа."
+    />
+    <title>Концепт сервиса распределения задач — кейс</title>
+    {{> head-links}}
+    <style>
+      .case-article {
+        max-width: 48rem;
+        margin: 0 auto;
+      }
+      .case-article h2 {
+        margin: 2rem 0 0.75rem;
+        font-size: clamp(1.15rem, 2vw, 1.35rem);
+        font-weight: 700;
+        color: var(--text);
+      }
+      .case-article .section__prose {
+        margin-bottom: 0.75rem;
+        color: var(--text);
+      }
+      .case-article a:not(.btn) {
+        color: var(--accent);
+      }
+    </style>
+    <script>
+      (function () {
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f === "merriweather" || f === "mono" || f === "geologica") {
+            d.dataset.font = f;
+          } else {
+            d.dataset.font = "merriweather";
+          }
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+        } catch (e) {}
+      })();
+    </script>
+  </head>
+  <body>
+    {{> header-case}}
+{{> fab-stack}}
+<main id="case-main" class="section section--tight">
+      <div class="section__inner case-article">
+        <p class="hero__eyebrow">UX/UI · Analytics</p>
+        <h1 class="case-page__h1">Концепт сервиса распределения задач</h1>
+        <p class="case-page__sub">
+          Продуктовый концепт: постановка, распределение и отслеживание задач с акцентом на прозрачность процессов и удобство командной работы.
+        </p>
+        <p class="section__prose">
+          Задача концепта — показать, как команда видит поток работ без «чёрных ящиков»: кто что взял, где узкие места и какие статусы критичны для следующего шага.
+        </p>
+        <p class="section__prose">
+          Детальный кейс появится здесь позже; страница уже связана с карточкой в портфолио на сайте.
+        </p>
+        <h2>Обложка</h2>
+        <figure class="case-media case-media--wide">
+          <img
+            src="../assets/task-distribution-concept/cover.webp"
+            alt="Концепт сервиса распределения задач — обложка кейса"
+            width="1200"
+            height="675"
+            loading="lazy"
+            decoding="async"
+            data-image-viewer
+          />
+          <figcaption>Текущее превью для карточки портфолио</figcaption>
+        </figure>
+      </div>
+    </main>
+
+    {{> projects-section-mp}}{{> projects-section}}
+{{> contact-section}}
+{{> footer-spacer}}
+{{> footer}}
+{{> cookie-notice}}
+{{> nav-more-floating}}
+
+  </body>
+</html>
diff --git a/src/pages/cases/task-tracker.html b/src/pages/cases/task-tracker.html
new file mode 100644
index 0000000..a695927
--- /dev/null
+++ b/src/pages/cases/task-tracker.html
@@ -0,0 +1,548 @@
+<!DOCTYPE html>
+<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta
+      name="description"
+      content="Интерфейс задач для операционного отдела: вкладки, фильтры, виды отображения, прототипы Figma и сценарии исследований."
+    />
+    <title>Таск-трекер для бек-офис системы — кейс</title>
+    {{> head-links}}
+    {{> head-plyr}}
+    <style>
+      .case-article {
+        max-width: 48rem;
+        margin: 0 auto;
+      }
+      .case-article h2 {
+        margin: 2rem 0 0.75rem;
+        font-size: clamp(1.15rem, 2vw, 1.35rem);
+        font-weight: 700;
+        color: var(--text);
+      }
+      .case-article h3 {
+        font-size: 1.05rem;
+        font-weight: 600;
+        color: var(--text);
+      }
+      .case-article .section__prose {
+        margin-bottom: 0.75rem;
+        color: var(--text);
+      }
+      .case-article img,
+      .case-article video {
+        display: block;
+        max-width: 100%;
+        height: auto;
+        margin: 0.75rem 0 1rem;
+      }
+      .case-article ul,
+      .case-article ol {
+        margin: 0.5rem 0 1rem 1.25rem;
+        padding: 0;
+      }
+      .case-article li {
+        margin-bottom: 0.35rem;
+      }
+      .case-article a:not(.btn) {
+        color: var(--accent);
+      }
+    </style>
+    <script>
+      (function () {
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f === "merriweather" || f === "mono" || f === "geologica") {
+            d.dataset.font = f;
+          } else {
+            d.dataset.font = "merriweather";
+          }
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+        } catch (e) {}
+      })();
+    </script>
+  </head>
+  <body>
+    {{> header-case}}
+{{> fab-stack}}
+<main id="case-main" class="section section--tight">
+      <div class="section__inner case-article">
+        <p class="hero__eyebrow">Тестовое задание · back-office</p>
+        <h1 class="case-page__h1">Таск-трекер для внутренней бек-офис системы</h1>
+        <h2 id="zadanie">Задание</h2>
+        <p class="section__prose">
+          Реализовать интерфейс для планирования и распределения задач между сотрудниками операционного отдела, работающими в некой бек-офис системе. Существует большое количество разноплановых задач, которые можно сгруппировать: Тип-1, Тип-2, Тип-3, Тип-4, Тип-5, Тип-6, Тип-7. У каждой задачи есть свой, выставляемый автоматически, приоритет. Пользователю доступны только задачи из определенных категорий.
+        </p>
+        <p class="section__prose">Нужно реализовать:</p>
+        <ul>
+          <li>
+            Общий экран:
+            <ul>
+              <li>где пользователь может посмотреть все открытые общие задачи и взять какие-то себе.</li>
+              <li>персональный ToDo лист, где отображаются как взятые вручную задачи, так и автоматически назначенные.</li>
+              <li>у взятой задачи есть возможность передать ее другому сотруднику или вернуть в общий список.</li>
+            </ul>
+          </li>
+          <li>Экран, где можно посмотреть, что у кого в работе.</li>
+        </ul>
+
+        <h2 id="vvedenie">Введение</h2>
+        <p class="section__prose">
+          Так как у меня лично есть обширный опыт работы с таск-трекерами, то я опираюсь на свой опыт и опыт моих коллег с учётом требований задания.
+        </p>
+
+        <h2 id="referensy">Референсы</h2>
+        <figure class="case-media case-media--wide">
+          <img src="../assets/task-tracker/refs.webp" alt="Референсы" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
+        </figure>
+        <ul>
+          <li>Таск-трекеры (Trello, Monday, YouTrack и др.)</li>
+          <li>Сервисы для визуальной работы с базами данных (Notion, Airtable и др.)</li>
+        </ul>
+
+        <h2 id="reshenie">Решение</h2>
+
+        <h3 id="skrinkast">Скринкаст</h3>
+        <figure class="case-media" style="margin: 0.85rem 0 1.2rem">
+          <div class="case-video-shell">
+            <video controls preload="metadata" playsinline poster="../assets/task-tracker/full_preview.webp" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
+              <source src="../assets/task-tracker/full_preview.webm" type="video/webm" />
+              <source src="../assets/task-tracker/full_preview.mp4" type="video/mp4" />
+              Ваш браузер не поддерживает видео.
+            </video>
+          </div>
+        </figure>
+        <div class="case-links-grid">
+          <a
+            class="case-link-card"
+            href="https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN-(Factoring)?page-id=0%3A1&amp;node-id=20%3A1291&amp;viewport=-5744%2C876%2C1.35&amp;scaling=contain&amp;starting-point-node-id=20%3A1291"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span class="case-link-card__media">
+              <img src="../assets/task-tracker/tab_all-tasks.webp" alt="Превью прототипа Figma" width="1200" height="800" loading="lazy" decoding="async" />
+            </span>
+            <span class="case-link-card__body">
+              <span class="case-link-card__title">Прототип Figma</span>
+              <span class="case-link-card__meta">Интерактивный сценарий по задачам и представлениям</span>
+              <span class="case-link-card__url">figma.com/proto/.../STENN-(Factoring)</span>
+            </span>
+          </a>
+        </div>
+        <aside class="case-callout" data-callout>
+          <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">📌</span>
+          <div class="case-callout__content">
+            <p>Предполагается, что сотрудник не может создавать задачи, но может их просматривать и частично редактировать, поэтому администратор или менеджер настраивает, какие задачи будут доступны сотруднику.</p>
+          </div>
+        </aside>
+
+        <h3 id="tabs">Вкладки (Tabs)</h3>
+        <p class="section__prose">На вкладке <strong>All tasks</strong> сотрудник может ознакомиться со всеми доступными задачами.</p>
+        <figure class="case-media case-media--wide">
+          <img src="../assets/task-tracker/tab_all-tasks.webp" alt="Untitled" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
+        </figure>
+        <p class="section__prose">
+          На вкладке <strong>My tasks</strong> отображаются только те задачи, что закреплены за текущим сотрудником. Группировка идёт по статусам задач (статус в карточке задачи скрыт).
+        </p>
+        <figure class="case-media case-media--wide">
+          <img src="../assets/task-tracker/tab_my-tasks.webp" alt="Untitled" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
+        </figure>
+        <p class="section__prose">На вкладке <strong>Task by assign</strong> отображены все задачи c разбивкой по исполнителю.</p>
+        <figure class="case-media case-media--wide">
+          <img src="../assets/task-tracker/tab_tasks-by-assign.webp" alt="Untitled" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
+        </figure>
+        <p class="section__prose">В правой части имеются опции для текущей вкладки.</p>
+        <figure class="case-media case-media--natural">
+          <img src="../assets/task-tracker/actions_for_page.webp" alt="Untitled" width="1200" height="800" loading="lazy" decoding="async" />
+        </figure>
+        <p class="section__prose">
+          Все изменения сохраняются после ухода с вкладки и после закрытия всей страницы <strong>Tasks</strong>. Эти настройки индивидуальны и каждый сотрудник может настроить страницу как ему удобно.
+        </p>
+        <ul>
+          <li>Group - позволяет создать дополнительную группировку по свойству таски (категория, приоритет, исполнитель, статус, дата создания, дата изменения).</li>
+          <li>View - позволяет изменить отображение текущих задач на другой вид: доска, список, таблица.</li>
+          <li>Filter - позволяет скрывать задачи по свойствам.</li>
+          <li>
+            Sort - позволяет определять порядок отображения задач по свойствам. Если включена сортировка по статусу High, Medium, Low то можно выбрать либо по алфавиту, либо в обратном порядке, а также можно создать свой порядок. С датами и цифрами работает принцип по возрастанию/убыванию.
+          </li>
+          <li>
+            Search on page - позволяет отобразить только те задачи, в названии или описании которых есть поисковое слово или фраза. (Можно улучшить функционал поиска, добавив поисковые операторы, если исследования докажут эту необходимость)
+          </li>
+        </ul>
+        <p class="section__prose">
+          На странице работает постепенная подгрузка задач. По мере скрола вниз, будут подгружаться новые задачи. Кол-во задач указывается в заголовках, это может быть полезно, чтобы оценить как далеко надо скролить, чтобы все посмотреть. Задач может быть очень много и тогда возможно имеет смысл добавить ещё и переход по страницам.
+        </p>
+
+        <h3 id="views">Варианты отображения (Views)</h3>
+        <p class="section__prose">
+          Разные виды отображения одних и тех же задач могут быть полезны для разных контекстов использования страницы <strong>Tasks</strong> и также в угоду личным предпочтениям сотрудника, что повышает его эффективность. Сотрудник, которого не раздражает интерфейс работает продуктивнее и приносит больше пользы.
+        </p>
+        <figure class="case-media case-media--natural">
+          <img src="../assets/task-tracker/dropdown_menu_for_views.webp" alt="Untitled" width="1200" height="800" loading="lazy" decoding="async" />
+        </figure>
+        <aside class="case-callout" data-callout>
+          <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">💡</span>
+          <div class="case-callout__content">
+            <p>После смены вида также меняется иконка у опции <strong>View</strong>.</p>
+          </div>
+        </aside>
+        <p class="section__prose">
+          Вид <strong>Board</strong> позволяет удобнее работать с функцией Drag&amp;Drop (см. ниже). Также визуально легче определить кол-во задач в категории, подразумеваю что это может быть полезно. В случае использования группировки задач по статусам выполнения, перемещение карточек слева направо создаёт естественное горизонтальное течение задач из точки А в точку Б.
+        </p>
+        <figure class="case-media case-media--wide">
+          <img src="../assets/task-tracker/view_board.webp" alt="Untitled" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
+        </figure>
+        <p class="section__prose">
+          Вид <strong>List</strong> позволяет увидеть больше информации на меньшей площади экрана. При этом этот вид визуально и функционально легче табличного вида, а значит меньше когнитивной нагрузки на пользователя. Также здесь все заголовки задач начинаются в крайнем левом положении, поэтому становится легко <em>пробежаться глазами</em> по списку.
+        </p>
+        <figure class="case-media case-media--wide">
+          <img src="../assets/task-tracker/view_list.webp" alt="Untitled" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
+        </figure>
+        <p class="section__prose">
+          Вид <strong>Table</strong> позволяет сразу же работать со всеми полями задачи, без раскрытия её в модальном окне или отдельной странице. Таблица подразумевает пользовательскую настройку ширины и порядка столбцов, что может быть удобно в некоторых кейсах использования.
+        </p>
+        <figure class="case-media case-media--wide">
+          <img src="../assets/task-tracker/view_table.webp" alt="Untitled" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
+        </figure>
+        <aside class="case-callout" data-callout>
+          <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">💡</span>
+          <div class="case-callout__content">
+            <p>Секции можно сворачивать, чтобы уместить на экране только нужный объём контента. (Может даже имеет смысл сохранять положение свёрнуто/развёрнуто после переключения вида, вкладки и перезагрузки страницы.)</p>
+          </div>
+        </aside>
+        <figure class="case-media" style="margin: 0.85rem 0 1.2rem">
+          <div class="case-video-shell">
+            <video controls preload="metadata" playsinline poster="../assets/task-tracker/expand-collapse_group.webp" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
+              <source src="../assets/task-tracker/expand-collapse_group.webm" type="video/webm" />
+              <source src="../assets/task-tracker/expand-collapse_group.mp4" type="video/mp4" />
+              Ваш браузер не поддерживает видео.
+            </video>
+          </div>
+        </figure>
+        <div class="case-links-grid">
+          <a
+            class="case-link-card"
+            href="https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN-(Task-Tracker)?page-id=0%3A1&amp;node-id=39%3A700&amp;viewport=-1875%2C-125%2C0.55&amp;scaling=min-zoom&amp;starting-point-node-id=20%3A1291&amp;hide-ui=1"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span class="case-link-card__media">
+              <img src="../assets/task-tracker/view_board.webp" alt="Превью прототипа вида Board" width="1200" height="800" loading="lazy" decoding="async" />
+            </span>
+            <span class="case-link-card__body">
+              <span class="case-link-card__title">Прототип в Figma</span>
+              <span class="case-link-card__meta">Варианты отображения: Board, List, Table</span>
+              <span class="case-link-card__url">figma.com/proto/.../STENN-(Task-Tracker)</span>
+            </span>
+          </a>
+        </div>
+
+        <h3 id="drag">Drag&amp;Drop</h3>
+        <p class="section__prose">
+          Во всех видах можно перетаскивать элементы (карточки/элементы списка/строки и столбцы таблицы). Это способствует более продуктивной работе и выглядит естественным для пользователя. Например, если требуется раскидать задачи между сотрудниками (для админа или менеджера), поменять статус для нескольких задач разом или в короткий отрезок времени.
+        </p>
+        <p class="section__prose"><strong>Board view</strong></p>
+        <figure class="case-media" style="margin: 0.85rem 0 1.2rem">
+          <div class="case-video-shell">
+            <video controls preload="metadata" playsinline poster="../assets/task-tracker/drag-drop-item_board-view.webp" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
+              <source src="../assets/task-tracker/drag-drop-item_board-view.webm" type="video/webm" />
+              <source src="../assets/task-tracker/drag-drop-item_board-view.mp4" type="video/mp4" />
+              Ваш браузер не поддерживает видео.
+            </video>
+          </div>
+        </figure>
+        <div class="case-links-grid">
+          <a
+            class="case-link-card"
+            href="https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN-Task-Tracker?node-id=108%3A970&amp;viewport=2248%2C341%2C0.33&amp;scaling=contain&amp;starting-point-node-id=108%3A1968&amp;show-proto-sidebar=1"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span class="case-link-card__media" aria-hidden="true">
+              <img src="../assets/task-tracker/view_board.webp" alt="" width="1200" height="800" loading="lazy" decoding="async" />
+            </span>
+            <span class="case-link-card__body">
+              <span class="case-link-card__title">Прототип в Figma</span>
+              <span class="case-link-card__meta">Drag&amp;Drop, Board view</span>
+              <span class="case-link-card__url">figma.com/proto/.../STENN-Task-Tracker</span>
+            </span>
+          </a>
+        </div>
+        <p class="section__prose"><strong>List view</strong></p>
+        <figure class="case-media" style="margin: 0.85rem 0 1.2rem">
+          <div class="case-video-shell">
+            <video controls preload="metadata" playsinline poster="../assets/task-tracker/drag-drop-item_list-view.webp" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
+              <source src="../assets/task-tracker/drag-drop-item_list-view.webm" type="video/webm" />
+              <source src="../assets/task-tracker/drag-drop-item_list-view.mp4" type="video/mp4" />
+              Ваш браузер не поддерживает видео.
+            </video>
+          </div>
+        </figure>
+        <div class="case-links-grid">
+          <a
+            class="case-link-card"
+            href="https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN-Task-Tracker?node-id=108%3A970&amp;viewport=2248%2C341%2C0.33&amp;scaling=contain&amp;starting-point-node-id=108%3A2607&amp;show-proto-sidebar=1"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span class="case-link-card__media" aria-hidden="true">
+              <img src="../assets/task-tracker/view_list.webp" alt="" width="1200" height="800" loading="lazy" decoding="async" />
+            </span>
+            <span class="case-link-card__body">
+              <span class="case-link-card__title">Прототип в Figma</span>
+              <span class="case-link-card__meta">Drag&amp;Drop, List view</span>
+              <span class="case-link-card__url">figma.com/proto/.../STENN-Task-Tracker</span>
+            </span>
+          </a>
+        </div>
+        <p class="section__prose"><strong>Продвинутый интерактивный прототип в ProtoPie</strong></p>
+        <p class="section__prose">
+          Схематичное представление того как работает Drag&amp;Drop. Такой прототип помогает дизайнеру лучше понять какие нюансы нужно учесть в юзерфлоу, а также и при подготовке спецификации для разработчика. Также попробовав данный прототип можно прийти к тому, что функционал должен работать совсем иначе и переделать его сразу. Это экономит общее время разработки.
+        </p>
+        <figure class="case-media" style="margin: 0.85rem 0 1.2rem">
+          <div class="case-video-shell">
+            <video controls preload="metadata" playsinline poster="../assets/task-tracker/drag-drop-action_example.webp" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
+              <source src="../assets/task-tracker/drag-drop-action_example.webm" type="video/webm" />
+              <source src="../assets/task-tracker/drag-drop-action_example.mp4" type="video/mp4" />
+              Ваш браузер не поддерживает видео.
+            </video>
+          </div>
+        </figure>
+        <div class="case-links-grid">
+          <a
+            class="case-link-card case-link-card--favicon"
+            href="https://cloud.protopie.io/p/e7a45bd3f2?touchHint=false&amp;ui=false&amp;scaleToFit=false&amp;cursorType=arrow&amp;mockup=false&amp;bgColor=%23F5F5F5&amp;playSpeed=1&amp;playerAppPopup=true"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span class="case-link-card__media" aria-hidden="true">
+              <img src="https://www.google.com/s2/favicons?domain=cloud.protopie.io&amp;sz=128" alt="" width="24" height="24" decoding="async" />
+            </span>
+            <span class="case-link-card__body">
+              <span class="case-link-card__title">Прототип | drag_drop | ProtoPie Cloud</span>
+              <span class="case-link-card__meta">Интерактив в облаке ProtoPie</span>
+              <span class="case-link-card__url">cloud.protopie.io/...</span>
+            </span>
+          </a>
+        </div>
+        <p class="section__prose">
+          В прототипе можно перемещать только голубую карточку и не все положения работают корректно. Можно посмотреть запись, которая доступна на той же странице прототипа.
+        </p>
+
+        <h2 id="stil">Стиль</h2>
+        <p class="section__prose">
+          Визуальный стиль может быть любым, не меняя самого <em>каркаса.</em> Например, чуть более красочным и с более выразительными шрифтами.
+        </p>
+        <p class="section__prose">Светлая цветная тема</p>
+        <figure class="case-media case-media--wide">
+          <img src="../assets/task-tracker/light_theme_color.webp" alt="Светлая цветная тема" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
+        </figure>
+        <div class="case-links-grid">
+          <a
+            class="case-link-card case-link-card--favicon"
+            href="https://www.figma.com/file/aFvwvTZuksD0JTo6yFXyUz/STENN-(Task-Tracker)?node-id=174%3A5703"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span class="case-link-card__media" aria-hidden="true">
+              <img src="https://www.google.com/s2/favicons?domain=www.figma.com&amp;sz=128" alt="" width="24" height="24" decoding="async" />
+            </span>
+            <span class="case-link-card__body">
+              <span class="case-link-card__title">Фрэйм в Figma</span>
+              <span class="case-link-card__meta">Светлая цветная тема</span>
+              <span class="case-link-card__url">figma.com/file/.../STENN-(Task-Tracker)</span>
+            </span>
+          </a>
+        </div>
+        <p class="section__prose">Нейтральная тёмная тема</p>
+        <figure class="case-media case-media--wide">
+          <img src="../assets/task-tracker/dark_theme.webp" alt="Нейтральная тёмная тема" width="1200" height="800" loading="lazy" decoding="async" data-image-viewer />
+        </figure>
+        <div class="case-links-grid">
+          <a
+            class="case-link-card case-link-card--favicon"
+            href="https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN--Task-Tracker-?node-id=135-5400&amp;t=BzGQOTE0ty7u2E50-1"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span class="case-link-card__media" aria-hidden="true">
+              <img src="https://www.google.com/s2/favicons?domain=www.figma.com&amp;sz=128" alt="" width="24" height="24" decoding="async" />
+            </span>
+            <span class="case-link-card__body">
+              <span class="case-link-card__title">Фрэйм в Figma</span>
+              <span class="case-link-card__meta">Нейтральная тёмная тема</span>
+              <span class="case-link-card__url">figma.com/proto/.../STENN--Task-Tracker-</span>
+            </span>
+          </a>
+        </div>
+
+        <h2 id="issledovaniya">Исследования</h2>
+        <p class="section__prose">
+          На этапе прототипов Figma можно провести интервью с несколькими сотрудниками, например 5 человек. Предварительно в прототип нужно добавить реальные задачи из текущей системы, порядка 20 должно хватить. Далее можно созвониться по видеосвязи с шэрингом экрана респондента или встретиться лично и задать несколько заданий и вопросов. Во время сессии респондент может тыкать в прототип, но если что-то не сработает интервьюер может зафиксировать попытку и объяснить, что этот функционал пока не работает, а также поинтересоваться что респондент ожидает увидеть дальше.
+        </p>
+        <h3 id="zadania">Задания</h3>
+        <ol>
+          <li>Найти свои актуальные задачи со страницы <strong>Tasks</strong> вкладки <strong>All tasks</strong></li>
+          <li>Назначить себе задачи, чтобы взять в работу</li>
+          <li>Найти задачу про что-то конкретное (интервьюер приводит пример), которую он уже выполнил ранее</li>
+          <li>Показать задачи, которые относятся только к определённой категории и должны быть сделаны до конца недели</li>
+          <li>Попросить поменять приоритет у нескольких задач одновременно</li>
+          <li>Оценить визуальную привлекательность интерфейса по шкале от 1 до 10</li>
+          <li>Оценить общее впечатление от предложенного концепта по шкале от 1 до 10</li>
+          <li>Предложить ещё функции, которые были бы полезны</li>
+        </ol>
+        <h3 id="analitika">Аналитика</h3>
+        <p class="section__prose">Для оценки актуальности реализованного функционала необходимо собирать следующие показатели.</p>
+        <ul>
+          <li>
+            Кол-во просмотров страницы <strong>Tasks</strong> <code>page_views_tasks</code> с возможностью разбиения
+            <ul>
+              <li>
+                по вкладкам
+                <ul>
+                  <li>All tasks <code>all_tasks_tab</code></li>
+                  <li>My tasks <code>my_tasks_tab</code></li>
+                  <li>Tasks by assign <code>tasks_by_assign</code></li>
+                </ul>
+              </li>
+              <li>
+                по ролям
+                <ul>
+                  <li>Admin <code>admin</code></li>
+                  <li>Manager <code>manager</code></li>
+                  <li>User <code>user</code></li>
+                </ul>
+              </li>
+              <li>
+                по попыткам поиска
+                <ul>
+                  <li>Search Used <code>search used</code></li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+          <li>
+            Кол-во включённых пользовательских настроек <strong>Custom Settings</strong> <code>custom_settings</code> с возможностью разбиения
+            <ul>
+              <li>
+                по вкладкам
+                <ul>
+                  <li>All tasks <code>all_tasks_tab</code></li>
+                  <li>My tasks <code>my_tasks_tab</code></li>
+                  <li>Tasks by assign <code>tasks_by_assign</code></li>
+                </ul>
+              </li>
+              <li>
+                по ролям
+                <ul>
+                  <li>Admin <code>admin</code></li>
+                  <li>Manager <code>manager</code></li>
+                  <li>User <code>user</code></li>
+                </ul>
+              </li>
+              <li>
+                по типам
+                <ul>
+                  <li>Group <code>group</code></li>
+                  <li>Filter <code>filter</code></li>
+                  <li>Sort <code>sort</code></li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+          <li>
+            Кол-во включенных видов <strong>View Used</strong> <code>view_used</code> с возможностью разбиения
+            <ul>
+              <li>
+                по вкладкам
+                <ul>
+                  <li>All tasks <code>all_tasks_tab</code></li>
+                  <li>My tasks <code>my_tasks_tab</code></li>
+                  <li>Tasks by assign <code>tasks_by_assign</code></li>
+                </ul>
+              </li>
+              <li>
+                по ролям
+                <ul>
+                  <li>Admin <code>admin</code></li>
+                  <li>Manager <code>manager</code></li>
+                  <li>User <code>user</code></li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+        </ul>
+        <p class="section__prose">
+          Далее в течение полугода (может и раньше, в зависимости от активности пользователей) можно будет увидеть результат и провести исследование (в виде интервью) по функциям, которые используются реже всего и тем на которые есть жалобы, чтобы получить качественные данные и составить полную картину происходящего.
+        </p>
+
+        <h2 id="dop">Дополнительные детали</h2>
+        <p class="section__prose">
+          При создании мокапов в Figma были использованы: возможности автолэаутов; интерактивные компоненты, плагины (<a href="https://www.figma.com/community/plugin/735098390272716381/Iconify">Iconify</a>, <a href="https://www.figma.com/community/plugin/917796239623005893/Fitter">Fitter</a>, <a href="https://www.figma.com/community/plugin/1021879782774011952">Protofly</a>, <a href="https://www.figma.com/community/plugin/889676455045507628/Shadow-Maker">Shadow Maker</a>, <a href="https://www.figma.com/community/plugin/986289377230504703">Dark Side</a> и др.), файл Community (<a href="https://www.figma.com/community/file/831142089959745518">+40 Types of Cursor</a>). Слои названы и организованы для более удобной работы где-то на 60%. Используется сетка 8pt + есть размеры 2pt, 4pt. Имеются цветовые стили для светлой и тёмной темы. Присутствует адаптивность под изменяющиеся размеры окна (мобильной версии нет).
+        </p>
+        <div class="case-links-grid">
+          <a
+            class="case-link-card case-link-card--favicon"
+            href="https://www.figma.com/file/aFvwvTZuksD0JTo6yFXyUz/STENN-(Task-Tracker)"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span class="case-link-card__media" aria-hidden="true">
+              <img src="https://www.google.com/s2/favicons?domain=www.figma.com&amp;sz=128" alt="" width="24" height="24" decoding="async" />
+            </span>
+            <span class="case-link-card__body">
+              <span class="case-link-card__title">Исходный файл в Figma</span>
+              <span class="case-link-card__meta">Проект STENN (Task-Tracker)</span>
+              <span class="case-link-card__url">figma.com/file/.../STENN-(Task-Tracker)</span>
+            </span>
+          </a>
+        </div>
+      </div>
+    </main>
+
+    {{> projects-section-mp}}{{> projects-section}}
+{{> contact-section}}
+{{> footer-spacer}}
+{{> footer}}
+{{> cookie-notice}}
+{{> nav-more-floating}}
+
+  </body>
+</html>
+
+
+
diff --git a/src/pages/cases/template-elements-demo.html b/src/pages/cases/template-elements-demo.html
new file mode 100644
index 0000000..6d8fe3a
--- /dev/null
+++ b/src/pages/cases/template-elements-demo.html
@@ -0,0 +1,282 @@
+<!DOCTYPE html>
+<html lang="ru" data-theme="dark" data-radius="medium" data-font="merriweather">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta name="description" content="Демо-страница кейса со всеми разработанными элементами: карточки ссылок и медиа-блоки." />
+    <title>Демо элементов кейса — template</title>
+    {{> head-links}}
+    {{> head-plyr}}
+    <style>
+      .case-article {
+        max-width: 48rem;
+        margin: 0 auto;
+      }
+      .case-article h2 {
+        margin: 2rem 0 0.75rem;
+        font-size: clamp(1.15rem, 2vw, 1.35rem);
+        font-weight: 700;
+        color: var(--text);
+      }
+      .case-article h3 {
+        font-size: 1.05rem;
+        font-weight: 600;
+        color: var(--text);
+      }
+      .case-article .section__prose {
+        margin-bottom: 0.75rem;
+        color: var(--text);
+      }
+      .case-article a:not(.btn) {
+        color: var(--accent);
+      }
+    </style>
+    <script>
+      (function () {
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f === "merriweather" || f === "mono" || f === "geologica") {
+            d.dataset.font = f;
+          } else {
+            d.dataset.font = "merriweather";
+          }
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+        } catch (e) {}
+      })();
+    </script>
+  </head>
+  <body>
+    {{> header-minimal}}
+{{> fab-stack-home-contact}}
+<main id="main" class="section section--tight">
+      <div class="section__inner case-article">
+        <p class="hero__eyebrow">Демо · template</p>
+        <h1 class="case-page__h1">Пример кейса: демо элементов</h1>
+        <p class="case-page__sub">Рыба-текст и блоки для быстрой сборки лонгрида</p>
+        <p class="section__prose case-page__code">Медиа для демо лежат в <code>public/assets/</code> (сборка страниц их не копирует). См. <code>public/assets/README.md</code>.</p>
+
+        <h2>Контекст</h2>
+        <p class="section__prose">
+          Этот раздел показывает пример рыбы для вступления. Здесь можно коротко описать продукт, аудиторию и ограничения проекта.
+          Текст нейтральный: цель — быстро набросать структуру и проверить визуальный ритм страницы.
+        </p>
+
+        <h2>Задача</h2>
+        <p class="section__prose">
+          Нужно собрать демонстрационный лонгрид с основными UI-элементами: карточками ссылок, медиа-блоками и примерами оформления контента.
+          Дополнительно важно проверить, как блоки ведут себя на узких и широких экранах.
+        </p>
+
+        <h2>Решение</h2>
+        <p class="section__prose">Ниже собраны готовые примеры, которые можно копировать в реальные кейсы.</p>
+
+        <h3>Карточки ссылок</h3>
+        <div class="case-links-grid">
+          <a class="case-link-card" href="https://www.examples.com/" target="_blank" rel="noopener noreferrer">
+            <span class="case-link-card__media" aria-hidden="true">
+              <img src="../assets/template-elements-demo/wallpaper-1.jpg" alt="" loading="lazy" decoding="async" />
+            </span>
+            <span class="case-link-card__body">
+              <span class="case-link-card__title">Источник с превью</span>
+              <span class="case-link-card__meta">Короткая подпись: что пользователь увидит по ссылке</span>
+              <span class="case-link-card__url">www.examples.com</span>
+            </span>
+          </a>
+          <a class="case-link-card case-link-card--favicon" href="https://www.examples.com/docs" target="_blank" rel="noopener noreferrer">
+            <span class="case-link-card__media" aria-hidden="true">
+              <img src="https://www.google.com/s2/favicons?domain=www.examples.com&sz=128" alt="" decoding="async" />
+            </span>
+            <span class="case-link-card__body">
+              <span class="case-link-card__title">Источник с favicon</span>
+              <span class="case-link-card__meta">Вариант для более легких ссылок без скриншота</span>
+              <span class="case-link-card__url">www.examples.com/docs</span>
+            </span>
+          </a>
+        </div>
+
+        <h3>Картинка: 50% от оригинала (без превью)</h3>
+        <figure class="case-media case-media--natural">
+          <img src="../assets/template-elements-demo/hello.gif" alt="Демо GIF в натуральном размере" loading="lazy" decoding="async" />
+          <figcaption>Изображение в уменьшенном натуральном размере, по центру.</figcaption>
+        </figure>
+
+        <h3>Картинка: по ширине контента (с превью)</h3>
+        <figure class="case-media case-media--content">
+          <img src="../assets/template-elements-demo/wallpaper-1.jpg" alt="Демо изображения по ширине контента" loading="lazy" decoding="async" data-image-viewer />
+          <figcaption>Изображение по ширине контента. Клик открывает viewer.</figcaption>
+        </figure>
+
+        <h3>Картинка: чуть шире контента (с превью)</h3>
+        <figure class="case-media case-media--wide">
+          <img src="../assets/template-elements-demo/wallpaper-1.jpg" alt="Демо изображения шире контента" loading="lazy" decoding="async" data-image-viewer />
+          <figcaption>Изображение немного выходит за пределы контентной колонки.</figcaption>
+        </figure>
+
+        <h3>Длинный скрин: свёрнутая высота и кнопка внутри превью</h3>
+        <p class="section__prose">
+          Блок <code>data-case-tall-media</code>: ширина задаётся атрибутом <code>data-case-tall-width="wide"</code> (как «широкая» картинка) или <code>content</code> (по колонке). В свёрнутом виде видна верхняя часть кадра, внизу превью — плотный «туман». Кнопка «Развернуть» / «Свернуть» с иконкой-шевроном поверх нижней части кадра, внутри рамки; после раскрытия туман скрывается, после сворачивания страница прокручивается к превью. Высоту превью — на <code>.case-media-tall__clip</code> через <code>--case-tall-max</code> (по умолчанию <code>min(70vh, 32rem)</code>).
+        </p>
+        <figure class="case-media" data-case-tall-media data-case-tall-width="wide">
+          <div class="case-media-tall" data-case-tall-root>
+            <div class="case-media-tall__clip" id="template-demo-tall-clip" data-case-tall-clip>
+              <img
+                src="../assets/template-elements-demo/img-long.webp"
+                alt="Демо: длинный вертикальный скрин интерфейса"
+                width="1200"
+                loading="lazy"
+                decoding="async"
+                data-image-viewer
+              />
+              <div class="case-media-tall__fog" aria-hidden="true"></div>
+            </div>
+            <div class="case-media-tall__actions">
+              <button
+                type="button"
+                class="case-media-tall__btn btn btn--ghost btn--flat"
+                data-case-tall-toggle
+                aria-expanded="false"
+                aria-controls="template-demo-tall-clip"
+              >
+                <span class="case-media-tall__btn-chev" aria-hidden="true"></span>
+                <span data-case-tall-label-more>Развернуть</span>
+                <span data-case-tall-label-less hidden>Свернуть</span>
+              </button>
+            </div>
+          </div>
+          <figcaption>Длинное изображение <code>img-long.webp</code> (исходник PNG рядом в <code>public/assets/template-elements-demo/</code>).</figcaption>
+        </figure>
+
+        <h3>Галерея: сетка по ширине контента</h3>
+        <p class="section__prose">
+          Колонок на широком экране задаётся на <code>figure</code>: атрибут <code>style="--case-gallery-cols: 3"</code>. Ниже порогов сетка схлопывается до двух и одной колонки. Клик по миниатюре открывает общий viewer кейса.
+        </p>
+        <figure class="case-media case-media-gallery" style="--case-gallery-cols: 3">
+          <div class="case-media-gallery__grid">
+            <div class="case-media-gallery__item">
+              <img src="../assets/template-elements-demo/small-image-1.webp" alt="Демо миниатюра 1" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="../assets/template-elements-demo/small-image-2.webp" alt="Демо миниатюра 2" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="../assets/template-elements-demo/small-image-3.webp" alt="Демо миниатюра 3" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="../assets/template-elements-demo/small-image-4.webp" alt="Демо миниатюра 4" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="../assets/template-elements-demo/small-image-5.webp" alt="Демо миниатюра 5" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="../assets/template-elements-demo/small-image-6.webp" alt="Демо миниатюра 6" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="../assets/template-elements-demo/small-image-7.webp" alt="Демо миниатюра 7" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+          </div>
+          <figcaption>Сетка в колонке статьи; на этом примере три колонки на десктопе.</figcaption>
+        </figure>
+
+        <h3>Галерея: сетка на ширину страницы с боковыми отступами</h3>
+        <p class="section__prose">
+          Класс <code>case-media-gallery--wide</code> — та же логика выхода за колонку, что у одиночного <code>case-media--wide</code>. Здесь две колонки на широком экране (<code>--case-gallery-cols: 2</code>).
+        </p>
+        <figure class="case-media case-media-gallery case-media-gallery--wide" style="--case-gallery-cols: 2">
+          <div class="case-media-gallery__grid">
+            <div class="case-media-gallery__item">
+              <img src="../assets/template-elements-demo/small-image-1.webp" alt="Wide-сетка, кадр 1" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="../assets/template-elements-demo/small-image-2.webp" alt="Wide-сетка, кадр 2" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="../assets/template-elements-demo/small-image-3.webp" alt="Wide-сетка, кадр 3" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="../assets/template-elements-demo/small-image-4.webp" alt="Wide-сетка, кадр 4" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="../assets/template-elements-demo/small-image-5.webp" alt="Wide-сетка, кадр 5" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="../assets/template-elements-demo/small-image-6.webp" alt="Wide-сетка, кадр 6" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+            <div class="case-media-gallery__item">
+              <img src="../assets/template-elements-demo/small-image-7.webp" alt="Wide-сетка, кадр 7" loading="lazy" decoding="async" data-image-viewer />
+            </div>
+          </div>
+          <figcaption>Ширина как у wide-картинки; на узком экране wide-обёртка схлопывается в 100% ширины колонки (см. медиазапросы).</figcaption>
+        </figure>
+
+        <h3>Callout: важный абзац с эмоджи</h3>
+        <aside class="case-callout" data-callout>
+          <span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">📌</span>
+          <div class="case-callout__content">
+            <p>Это пример акцентного callout-блока. Эмоджи вынесен влево и пульсирует, чтобы визуально усилить важную мысль.</p>
+          </div>
+        </aside>
+
+        <h3>Видео: карточка с тенью и фиксированными малыми углами</h3>
+        <figure class="case-media" style="margin: 0.85rem 0 1.2rem">
+          <div class="case-video-shell">
+            <video controls preload="metadata" playsinline poster="../assets/template-elements-demo/video-1.webp" data-case-video-player style="display: block; width: 100%; height: auto">
+              <source src="../assets/template-elements-demo/video-1.webm" type="video/webm" />
+              <source src="../assets/template-elements-demo/video-1.mp4" type="video/mp4" />
+              Ваш браузер не поддерживает видео.
+            </video>
+          </div>
+          <figcaption>Пример видео-карточки в стиле кейса.</figcaption>
+        </figure>
+
+        <h2>Результат</h2>
+        <p class="section__prose">
+          Шаблон готов для копирования в новый кейс: остаётся заменить рыбу на фактический текст, подставить реальные ссылки и медиа проекта.
+        </p>
+      </div>
+    </main>
+
+    {{> projects-section-mp}}{{> projects-section}}
+{{> contact-section}}
+{{> footer-spacer}}
+{{> footer}}
+{{> cookie-notice}}
+{{> nav-more-floating}}
+
+  </body>
+</html>
+
+
+
diff --git a/src/pages/cookie-policy.html b/src/pages/cookie-policy.html
new file mode 100644
index 0000000..3a3dd52
--- /dev/null
+++ b/src/pages/cookie-policy.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="ru" data-theme="dark" data-radius="medium">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta
+      name="description"
+      content="Как на сайте-портфолио Николая Мамадаева используются cookie, localStorage и связанные технологии браузера."
+    />
+    <title>Политика cookie — Николай Мамадаев</title>
+    {{> head-links}}
+    <style>
+      .cookie-policy-doc {
+        max-width: 48rem;
+        margin: 0 auto;
+      }
+      .cookie-policy-doc h2 {
+        margin: 2rem 0 0.75rem;
+        font-size: clamp(1.15rem, 2vw, 1.35rem);
+        font-weight: 700;
+        color: var(--text);
+      }
+      .cookie-policy-doc .section__prose + .section__prose {
+        margin-top: 0.75rem;
+      }
+      .cookie-policy-doc table {
+        width: 100%;
+        border-collapse: collapse;
+        margin: 0.75rem 0 1rem;
+        font-size: 0.92rem;
+        color: var(--text-muted);
+      }
+      .cookie-policy-doc th,
+      .cookie-policy-doc td {
+        border: 1px solid var(--border);
+        padding: 0.5rem 0.65rem;
+        text-align: left;
+        vertical-align: top;
+      }
+      .cookie-policy-doc th {
+        color: var(--text);
+        font-weight: 600;
+        background: color-mix(in srgb, var(--surface-elevated) 80%, transparent);
+      }
+      .cookie-policy-doc code {
+        font-family: var(--font);
+        font-size: 0.88em;
+        color: var(--text);
+      }
+      .cookie-policy-doc .section__prose a {
+        color: var(--accent);
+      }
+    </style>
+
+  </head>
+  <body>
+    {{> header-minimal}}
+{{> fab-stack-home-contact}}
+<main id="main" class="section section--tight">
+      <div class="section__inner cookie-policy-doc">
+        <p class="hero__eyebrow">Юридическая информация</p>
+        <h1 class="case-page__h1">Политика использования файлов cookie и локального хранилища</h1>
+        <p class="section__prose"><strong>Дата последнего обновления:</strong> 9 мая 2026 г.</p>
+        <p class="section__prose">
+          Настоящий документ описывает, как на личном сайте-портфолио Николая Мамадаева (далее — «сайт») используются технологии хранения данных в браузере.
+        </p>
+
+        <h2 id="operator">Кто отвечает за сайт</h2>
+        <p class="section__prose">
+          Оператором сайта является <strong>Николай Мамадаев</strong>. По вопросам обработки данных используйте контакты в блоке «Контакты» на
+          <a href="{{assetPrefix}}index.html#contact">главной странице</a>
+          (Telegram, ВКонтакте, Яндекс и почта через копирование адреса кнопкой).
+        </p>
+
+        <h2 id="http-cookie">Используются ли HTTP cookie</h2>
+        <p class="section__prose">
+          В текущей версии сайта <strong>сторонние рекламные или аналитические HTTP cookie не подключаются</strong>. В разметке страниц нет счётчиков аналитики (например, Яндекс.Метрики или Google Analytics), которые обычно устанавливают собственные cookie.
+        </p>
+        <p class="section__prose">
+          При размещении сайта на хостинге или за прокси технические записи (например, журналы сервера с IP-адресом и временем запроса) могут обрабатываться хостинг-провайдером по его документам — это не настраивается кодом данного сайта.
+        </p>
+
+        <h2 id="local-storage">Local Storage и аналогичные технологии браузера</h2>
+        <p class="section__prose">
+          Для удобства работы сайт сохраняет на вашем устройстве небольшие объёмы данных через <strong>механизм localStorage</strong> в браузере (это не HTTP cookie, но по смыслу близко к ним и также относится к хранению на стороне клиента).
+        </p>
+        <p class="section__prose">Используются следующие ключи:</p>
+        <table>
+          <thead>
+            <tr>
+              <th scope="col">Ключ</th>
+              <th scope="col">Назначение</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>siteThemeV1</code></td>
+              <td>
+                Настройки оформления: тема (светлая/тёмная/системная), оттенок, скругления, шрифт, фон и связанные параметры панели темы.
+              </td>
+            </tr>
+            <tr>
+              <td><code>siteCookieConsentV1</code></td>
+              <td>Значение <code>accepted</code>, если вы нажали «Принять» в уведомлении о cookie; после этого баннер скрывается.</td>
+            </tr>
+          </tbody>
+        </table>
+        <p class="section__prose">
+          Эти данные <strong>не передаются на сервер сайта</strong> автоматически: они остаются только в вашем браузере.
+        </p>
+
+        <h2 id="retention">Срок хранения</h2>
+        <p class="section__prose">
+          Данные в localStorage сохраняются до тех пор, пока вы <strong>не удалите их вручную</strong> (очистка данных сайта / полное удаление данных браузера) или пока браузер не сбросит хранилище по своим правилам.
+        </p>
+
+        <h2 id="consent">Согласие и отказ</h2>
+        <p class="section__prose">
+          Нажимая «Принять» в баннере, вы подтверждаете, что ознакомились с настоящей политикой. Если вы не нажимаете «Принять», баннер остаётся доступным; функциональность сайта при этом по возможности сохраняется, но запись о согласии не создаётся.
+        </p>
+        <p class="section__prose">
+          Вы можете в любой момент <strong>очистить localStorage</strong> для этого сайта в настройках браузера — при этом сбросятся сохранённые тема и отметка о принятии уведомления, и баннер может снова отобразиться.
+        </p>
+
+        <h2 id="changes">Изменения</h2>
+        <p class="section__prose">
+          Текст политики может обновляться при изменении технологий на сайте. Актуальная версия публикуется на странице «Политика cookie» по адресу <a href="{{assetPrefix}}cookie-policy.html">/cookie-policy.html</a> относительно корня сайта.
+        </p>
+      </div>
+    </main>
+
+    {{> footer}}
+{{> cookie-notice}}
+
+
+  </body>
+</html>
diff --git a/src/pages/index.html b/src/pages/index.html
new file mode 100644
index 0000000..3209913
--- /dev/null
+++ b/src/pages/index.html
@@ -0,0 +1,545 @@
+<!DOCTYPE html>
+<html lang="ru" data-theme="dark" data-radius="medium">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta
+      name="description"
+      content="Продуктовый дизайнер и вайбкодер с опытом более 10 лет. Проектирую цифровые продукты, интерфейсы и дизайн‑системы, совмещая UX, no-code и код для аккуратных рабочих решений."
+    />
+    <title>Николай Мамадаев — продуктовый дизайнер</title>
+    {{> head-links}}
+
+  </head>
+  <body>
+    {{> header-home}}
+{{> fab-stack}}
+<main id="main">
+      <section class="hero" aria-labelledby="hero-title">
+        <div class="hero__grid">
+          <div class="hero__text">
+            <p class="hero__eyebrow">Николай Мамадаев</p>
+            <h1 id="hero-title" class="hero__title">
+              Создаю интерфейсы для продуктов
+              <span class="hero-rotator" data-hero-rotator aria-label="web, mobile, desktop">
+                <span class="hero-rotator__word" data-hero-rotator-word>web</span>
+              </span>
+            </h1>
+            <ul class="hero__tags" aria-label="Ключевые компетенции">
+              <li class="hero__tag">UX/UI</li>
+              <li class="hero__tag">10+ лет опыта</li>
+              <li class="hero__tag">Продуктовое мышление</li>
+              <li class="hero__tag">Дизайн-системы</li>
+              <li class="hero__tag">Менторство и наставничество</li>
+              <li class="hero__tag">AI инструменты и вайбкодинг</li>
+            </ul>
+            <div class="hero__actions">
+              <a class="btn btn--primary btn--flat" href="#contact"><span class="btn__icon" aria-hidden="true"></span><span>Написать мне</span></a>
+              <a class="btn btn--secondary btn--flat" href="#projects"><span class="btn__icon" aria-hidden="true"></span><span>Смотреть портфолио</span></a>
+              <a class="btn btn--secondary btn--flat btn--resume" href="assets/mamadaevv_resume.pdf" download><span class="btn__icon" aria-hidden="true"></span><span>Резюме</span></a>
+            </div>
+          </div>
+          <div class="hero__visual" aria-hidden="true">
+            <div class="hero__portrait-shell">
+              <div class="hero__portrait">
+                <div class="hero__portrait-inner">
+                  <div class="hero__portrait-layers">
+                    <div class="hero__portrait-layer hero__portrait-layer--bg">
+                      <img
+                        class="hero__photo-bg"
+                        src="assets/index/me_static.webp"
+                        alt=""
+                        width="320"
+                        height="320"
+                        loading="eager"
+                        decoding="async"
+                      />
+                    </div>
+                    <div class="hero__portrait-layer hero__portrait-layer--motion" data-hero-motion-layer>
+                      <video
+                        class="hero__photo-motion"
+                        data-hero-motion-video
+                        data-src="assets/index/me_motion.webm"
+                        poster="assets/index/me_motion.webp"
+                        muted
+                        loop
+                        playsinline
+                        preload="none"
+                        aria-hidden="true"
+                      ></video>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {{> projects-section-mp}}{{> projects-section}}
+      {{> mini-projects-section}}
+
+      <section id="skills" class="section section--tight" aria-labelledby="skills-title">
+        <div class="section__inner">
+          <h2 id="skills-title" class="section__title">Навыки</h2>
+          <div
+            class="skills-intro skills-intro--chat section__prose"
+            data-skills-intro
+            role="region"
+            aria-labelledby="skills-title"
+          >
+            <div class="skills-msg" data-skills-msg>
+              <div class="skills-msg__body">
+                <p class="skills-msg__author">Николай М:</p>
+                <p class="skills-msg__text">
+                  В моём опыте есть и запуск первых версий продукта с нуля, и развитие уже зрелых решений, где важно не
+                  сломать привычный сценарий, а аккуратно улучшить его.
+                </p>
+                <time class="skills-msg__time" datetime="" data-skills-msg-time></time>
+              </div>
+            </div>
+            <div class="skills-msg" data-skills-msg>
+              <div class="skills-msg__body">
+                <p class="skills-msg__text">
+                  Ниже я собрал примеры задач от бизнеса и то, как я их решал
+                </p>
+                <time class="skills-msg__time" datetime="" data-skills-msg-time></time>
+              </div>
+            </div>
+          </div>
+
+          <div class="skills-categories">
+            <section class="skills-category" aria-labelledby="skills-cat-1-heading">
+              <div class="skills-category__layout">
+              <h3 id="skills-cat-1-heading" class="skills-category__title">
+                <button
+                  class="skills-category__toggle"
+                  type="button"
+                  aria-expanded="false"
+                  aria-controls="skills-cat-1"
+                  data-skills-accordion-toggle
+                >
+                  <span class="skills-category__title-text">Продуктовый подход и логика в интерфейсах</span>
+                  <span class="skills-category__chevron" aria-hidden="true"></span>
+                </button>
+              </h3>
+              <div id="skills-cat-1" class="skills-category__grid skills-category__panel" data-skills-accordion-panel hidden>
+                <article class="skill-task-card">
+                  <p class="skill-task-card__task">
+                    Сделать сложный продукт понятнее, чтобы пользователи доходили до ключевых действий.
+                  </p>
+                  <div class="skill-task-card__solutions">
+                    <p class="skill-task-card__solution">
+                      Анализирую путь пользователя и убираю шаги, которые не помогают ему продвинуться к цели.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Проектирую флоу так, чтобы в каждом шаге было понятно, что происходит и что делать дальше.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Делаю так, чтобы даже сложный функционал выглядел естественно, использовал знакомые паттерны и привычные
+                      элементы интерфейса.
+                    </p>
+                  </div>
+                </article>
+                <article class="skill-task-card">
+                  <p class="skill-task-card__task">Улучшить первые шаги в продукте и подвести человека к первой ценности.</p>
+                  <div class="skill-task-card__solutions">
+                    <p class="skill-task-card__solution">
+                      Убираю всё, что отвлекает от первого результата: лишние шаги, необязательные поля, второстепенные детали.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Заменяю длинные объяснения небольшими подсказками в момент, когда они действительно нужны без
+                      длинных туров и сложных инструкций.
+                    </p>
+                  </div>
+                </article>
+                <article class="skill-task-card">
+                  <p class="skill-task-card__task">Снизить нагрузку на техподдержку за счёт интерфейса.</p>
+                  <div class="skill-task-card__solutions">
+                    <p class="skill-task-card__solution">
+                      Собираю частые обращения и на их основе упрощаю сценарий и интерфейс так, чтобы человек мог решить
+                      вопрос самостоятельно.
+                    </p>
+                  </div>
+                </article>
+                <article class="skill-task-card">
+                  <p class="skill-task-card__task">Связать интерфейс с целями продукта, а не только с набором фич.</p>
+                  <div class="skill-task-card__solutions">
+                    <p class="skill-task-card__solution">
+                      Начинаю с того, какую задачу бизнеса и пользователя мы решаем, и уже под это собираю сценарии и
+                      интерфейс.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Перевожу проблемы в сценариях в понятные гипотезы и помогаю продакту выбрать, что действительно даёт
+                      эффект.
+                    </p>
+                  </div>
+                </article>
+              </div>
+              </div>
+            </section>
+
+            <section class="skills-category" aria-labelledby="skills-cat-2-heading">
+              <div class="skills-category__layout">
+              <h3 id="skills-cat-2-heading" class="skills-category__title">
+                <button
+                  class="skills-category__toggle"
+                  type="button"
+                  aria-expanded="false"
+                  aria-controls="skills-cat-2"
+                  data-skills-accordion-toggle
+                >
+                  <span class="skills-category__title-text">Дизайн‑системы и консистентность</span>
+                  <span class="skills-category__chevron" aria-hidden="true"></span>
+                </button>
+              </h3>
+              <div id="skills-cat-2" class="skills-category__grid skills-category__panel" data-skills-accordion-panel hidden>
+                <article class="skill-task-card">
+                  <p class="skill-task-card__task">
+                    Привести несколько продуктов или модулей к единому виду и логике.
+                  </p>
+                  <div class="skill-task-card__solutions">
+                    <p class="skill-task-card__solution">
+                      Собираю общий UI‑kit и базовые принципы, которые можно использовать во всех продуктах.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Выделяю повторяющиеся паттерны и свожу их к одной системе, вместо десятка похожих решений.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Перевожу разрозненные решения в общую дизайн‑систему, чтобы ей было удобно пользоваться и дизайнерам,
+                      и разработчикам.
+                    </p>
+                  </div>
+                </article>
+                <article class="skill-task-card">
+                  <p class="skill-task-card__task">Сделать интерфейс так, чтобы его можно было спокойно расширять и не городить костыли.</p>
+                  <div class="skill-task-card__solutions">
+                    <p class="skill-task-card__solution">
+                      Формулирую простые дизайн‑принципы и правила использования компонентов.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Настраиваю структуру дизайн‑системы так, чтобы её было реально поддерживать и дополнять новыми паттернами.
+                    </p>
+                  </div>
+                </article>
+                <article class="skill-task-card">
+                  <p class="skill-task-card__task">Навести порядок в интерфейсах, которые долго росли кусками.</p>
+                  <div class="skill-task-card__solutions">
+                    <p class="skill-task-card__solution">
+                      Объединяю похожие решения в общие компоненты и паттерны, убираю дубли и случайные отличия.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Слежу за тем, чтобы интерфейс выглядел аккуратно и современно: читаемая типографика, иерархия, акценты
+                      без визуального шума.
+                    </p>
+                  </div>
+                </article>
+                <article class="skill-task-card">
+                  <p class="skill-task-card__task">Обновить внешний вид продукта, чтобы он не выглядел устаревшим на фоне конкурентов.</p>
+                  <div class="skill-task-card__solutions">
+                    <p class="skill-task-card__solution">
+                      Начинаю с часто используемых экранов и элементов, чтобы эффект был заметен и для пользователей, и для
+                      бизнеса.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Подстраиваю этапы обновления под текущую дорожную карту и работу разработки, чтобы не ломать привычные
+                      сценарии и релизы.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Настраиваю базовый стиль: типографика, цвет, отступы — чтобы интерфейс выглядел аккуратно и современно.
+                    </p>
+                  </div>
+                </article>
+              </div>
+              </div>
+            </section>
+
+            <section class="skills-category" aria-labelledby="skills-cat-3-heading">
+              <div class="skills-category__layout">
+              <h3 id="skills-cat-3-heading" class="skills-category__title">
+                <button
+                  class="skills-category__toggle"
+                  type="button"
+                  aria-expanded="false"
+                  aria-controls="skills-cat-3"
+                  data-skills-accordion-toggle
+                >
+                  <span class="skills-category__title-text">Исследования, метрики и аналитика</span>
+                  <span class="skills-category__chevron" aria-hidden="true"></span>
+                </button>
+              </h3>
+              <div id="skills-cat-3" class="skills-category__grid skills-category__panel" data-skills-accordion-panel hidden>
+                <article class="skill-task-card">
+                  <p class="skill-task-card__task">
+                    Получить реальную картину поведения пользователей, а не полагаться на догадки команды.
+                  </p>
+                  <div class="skill-task-card__solutions">
+                    <p class="skill-task-card__solution">
+                      Общаюсь с пользователями: смотрю, как они решают свои задачи в продукте и что делают на каждом шаге.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Перевожу выводы из исследований в конкретные изменения в интерфейсе и сценариях.
+                    </p>
+                  </div>
+                </article>
+                <article class="skill-task-card">
+                  <p class="skill-task-card__task">Убедиться, что ключевые сценарии работают, прежде чем выкатывать их в прод.</p>
+                  <div class="skill-task-card__solutions">
+                    <p class="skill-task-card__solution">
+                      Готовлю простые сценарии юзабилити‑тестов под реальные задачи пользователей.
+                    </p>
+                  </div>
+                </article>
+                <article class="skill-task-card">
+                  <p class="skill-task-card__task">Понимать, как изменения в интерфейсе влияют на ключевые метрики продукта.</p>
+                  <div class="skill-task-card__solutions">
+                    <p class="skill-task-card__solution">
+                      Помогаю описать ключевые события и воронки, которые отражают реальные шаги пользователя.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Смотрю на метрики вместе с реальными сценариями использования и предлагаю, что в интерфейсе поменять,
+                      чтобы людям было проще и продукт работал лучше.
+                    </p>
+                  </div>
+                </article>
+              </div>
+              </div>
+            </section>
+
+            <section class="skills-category" aria-labelledby="skills-cat-4-heading">
+              <div class="skills-category__layout">
+              <h3 id="skills-cat-4-heading" class="skills-category__title">
+                <button
+                  class="skills-category__toggle"
+                  type="button"
+                  aria-expanded="false"
+                  aria-controls="skills-cat-4"
+                  data-skills-accordion-toggle
+                >
+                  <span class="skills-category__title-text">Развитие команды дизайнеров и наставничество</span>
+                  <span class="skills-category__chevron" aria-hidden="true"></span>
+                </button>
+              </h3>
+              <div id="skills-cat-4" class="skills-category__grid skills-category__panel" data-skills-accordion-panel hidden>
+                <article class="skill-task-card">
+                  <p class="skill-task-card__task">Выстроить понятные процессы внутри дизайн-команды.</p>
+                  <div class="skill-task-card__solutions">
+                    <p class="skill-task-card__solution">
+                      Ввожу регулярные дизайн‑ревью с разбором реализованных задач, где каждый может получить полезную
+                      экологичную обратную связь.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Договариваюсь о шаблоне постановки задачи и прозрачных критериях приёмки, чтобы всем было ясно,
+                      когда задачу считать действительно законченой.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Настраиваю порядок работ, который позволяет выполнять как плановые задачи, так и "горящие".
+                    </p>
+                  </div>
+                </article>
+                <article class="skill-task-card">
+                  <p class="skill-task-card__task">
+                    Сделать так, чтобы дизайн, продукт и разработка работали как одна команда, а не три отдельных лагеря.
+                  </p>
+                  <div class="skill-task-card__solutions">
+                    <p class="skill-task-card__solution">
+                      Беру на себя роль связующего: обсуждаю сценарии с продактом, ограничения — с разработкой и фиксирую
+                      решения в интерфейсе.
+                    </p>
+                  </div>
+                </article>
+                <article class="skill-task-card">
+                  <p class="skill-task-card__task">Нанять и вырастить продуктовых дизайнеров для работы над сложным продуктом.</p>
+                  <div class="skill-task-card__solutions">
+                    <p class="skill-task-card__solution">
+                      Помогаю сформировать необходимые требования к кандидату.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Участвую в отборе: проверяю, как кандидат работает со сценариями, ограничениями и сложными кейсами.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Выстраиваиваю интервью так, чтобы можно было оценить ход мысли и используемые инструменты.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Настраиваю онбординг через реальные задачи и регулярные разборы, чтобы дизайнер быстрее разобрался в
+                      продукте и начал приносить пользу.
+                    </p>
+                    <p class="skill-task-card__solution">
+                      Провожу регулярные созвоны один на один с дизайнерами: разбираем решения, точки роста и следующие шаги.
+                    </p>
+                  </div>
+                </article>
+              </div>
+              </div>
+            </section>
+
+          </div>
+        </div>
+      </section>
+
+      <section id="experience" class="section section--surface" aria-labelledby="experience-title">
+        <div class="section__inner">
+          <h2 id="experience-title" class="section__title">Опыт работы</h2>
+          <ol id="experience-list" class="experience-grid">
+            <li class="experience-grid__item">
+              <a
+                class="exp-card exp-card--link"
+                href="https://primo-rpa.com/"
+                target="_blank"
+                rel="noopener noreferrer"
+                data-exp-order="1"
+                aria-label="Primo RPA — открыть сайт компании"
+              >
+                <div class="exp-card__time-row">
+                  <span class="exp-card__period">Февраль 2023 — Ноябрь 2025</span>
+                  <span class="exp-card__sep" aria-hidden="true">·</span>
+                  <span class="exp-card__duration">2 года 10 месяцев</span>
+                </div>
+                <h3 class="exp-card__company">
+                  Primo RPA
+                  <span class="exp-card__ext" aria-hidden="true"></span>
+                </h3>
+                <p class="exp-card__desc">
+                  Платформа для автоматизации бизнес‑процессов с комплексом продуктов: студией для создания роботов, оркестратором для их управления, Idea Hub для отбора процессов и AI‑серверами для работы с моделями и распознаванием данных.
+                </p>
+              </a>
+            </li>
+            <li class="experience-grid__item">
+              <a
+                class="exp-card exp-card--link"
+                href="https://icons8.com/lunacy"
+                target="_blank"
+                rel="noopener noreferrer"
+                data-exp-order="2"
+                aria-label="Icons8 (Lunacy) — открыть сайт компании"
+              >
+                <div class="exp-card__time-row">
+                  <span class="exp-card__period">Июль 2022 — Январь 2023</span>
+                  <span class="exp-card__sep" aria-hidden="true">·</span>
+                  <span class="exp-card__duration">7 месяцев</span>
+                </div>
+                <h3 class="exp-card__company">
+                  Icons8 (Lunacy)
+                  <span class="exp-card__ext" aria-hidden="true"></span>
+                </h3>
+                <p class="exp-card__desc">
+                  Векторный редактор для UI/UX и веб‑дизайна с поддержкой Sketch‑файлов, встроенной библиотекой иконок/фото/иллюстраций и набором AI‑инструментов для ускорения рутинных задач.
+                </p>
+              </a>
+            </li>
+            <li class="experience-grid__item">
+              <a
+                class="exp-card exp-card--link"
+                href="https://manu.co/"
+                target="_blank"
+                rel="noopener noreferrer"
+                data-exp-order="3"
+                aria-label="MANU Video Game Maker — открыть сайт компании"
+              >
+                <div class="exp-card__time-row">
+                  <span class="exp-card__period">Январь 2019 — Декабрь 2021</span>
+                  <span class="exp-card__sep" aria-hidden="true">·</span>
+                  <span class="exp-card__duration">3 года</span>
+                </div>
+                <h3 class="exp-card__company">
+                  MANU Video Game Maker
+                  <span class="exp-card__ext" aria-hidden="true"></span>
+                </h3>
+                <p class="exp-card__desc">
+                  No-code/low-code платформа для создания 2D и 3D игр без необходимости писать код.
+                </p>
+              </a>
+            </li>
+            <li class="experience-grid__item" data-exp-extra hidden>
+              <a
+                class="exp-card exp-card--link"
+                href="https://aegees.com/"
+                target="_blank"
+                rel="noopener noreferrer"
+                data-exp-order="4"
+                aria-label="AEGEES — открыть сайт компании"
+              >
+                <div class="exp-card__time-row">
+                  <span class="exp-card__period">Октябрь 2017 — Декабрь 2018</span>
+                  <span class="exp-card__sep" aria-hidden="true">·</span>
+                  <span class="exp-card__duration">1 год 3 месяца</span>
+                </div>
+                <h3 class="exp-card__company">
+                  AEGEES
+                  <span class="exp-card__ext" aria-hidden="true"></span>
+                </h3>
+                <p class="exp-card__desc">
+                  Защищённый мессенджер с end‑to‑end шифрованием и отсутствием хранения сообщений на серверах, сфокусированный на максимальной приватности пользователей.
+                </p>
+              </a>
+            </li>
+            <li class="experience-grid__item" data-exp-extra hidden>
+              <a
+                class="exp-card exp-card--link"
+                href="https://www.orioninnovation.com/"
+                target="_blank"
+                rel="noopener noreferrer"
+                data-exp-order="5"
+                aria-label="Orion Innovation (ex MERA) — открыть сайт компании"
+              >
+                <div class="exp-card__time-row">
+                  <span class="exp-card__period">Июль 2016 — Октябрь 2017</span>
+                  <span class="exp-card__sep" aria-hidden="true">·</span>
+                  <span class="exp-card__duration">1 год 4 месяца</span>
+                </div>
+                <h3 class="exp-card__company">
+                  Orion Innovation (ex MERA)
+                  <span class="exp-card__ext" aria-hidden="true"></span>
+                </h3>
+                <p class="exp-card__desc">
+                  Международная технологическая компания, специализирующаяся на заказной разработке и инженерных решениях для крупных корпоративных клиентов.
+                </p>
+              </a>
+            </li>
+            <li class="experience-grid__item" data-exp-extra hidden>
+              <a
+                class="exp-card exp-card--link"
+                href="https://spaceshipapps.ru/"
+                target="_blank"
+                rel="noopener noreferrer"
+                data-exp-order="6"
+                aria-label="SpaceshipApps — открыть сайт компании"
+              >
+                <div class="exp-card__time-row">
+                  <span class="exp-card__period">Июнь 2015 — Июнь 2016</span>
+                  <span class="exp-card__sep" aria-hidden="true">·</span>
+                  <span class="exp-card__duration">1 год 1 месяц</span>
+                </div>
+                <h3 class="exp-card__company">
+                  SpaceshipApps
+                  <span class="exp-card__ext" aria-hidden="true"></span>
+                </h3>
+                <p class="exp-card__desc">
+                  Студия разработки мобильных и веб‑приложений под ключ для бизнеса и предпринимателей.
+                </p>
+              </a>
+            </li>
+          </ol>
+          <div class="experience__actions">
+            <button
+              type="button"
+              class="btn btn--secondary btn--flat experience__toggle"
+              data-exp-toggle
+              aria-expanded="false"
+              aria-controls="experience-list"
+            >
+              Показать все
+            </button>
+          </div>
+        </div>
+      </section>
+
+{{> contact-section}}
+{{> footer-spacer}}
+{{> footer}}
+{{> cookie-notice}}
+{{> nav-more-floating}}
+
+
+  </body>
+</html>
diff --git a/src/partials/contact-section.html b/src/partials/contact-section.html
new file mode 100644
index 0000000..34b76d0
--- /dev/null
+++ b/src/partials/contact-section.html
@@ -0,0 +1,11 @@
+<section id="contact" class="section section--surface section--footerish">
+      <div class="section__inner">
+        <h2 class="section__title">Контакты</h2>
+        <ul class="contact-grid">
+          <li><a class="contact-card contact-card--link contact-card--brand-tg" href="https://t.me/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="{{assetPrefix}}assets/shared/icons/tg.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Telegram</span><span class="contact-card__hint">Отвечу сегодня</span></span></a></li>
+          <li><a class="contact-card contact-card--link contact-card--brand-vk" href="https://vk.com/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="{{assetPrefix}}assets/shared/icons/vk.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">ВКонтакте</span><span class="contact-card__hint">Стабильный коннект</span></span></a></li>
+          <li><a class="contact-card contact-card--link contact-card--brand-ya" href="https://yandex.ru/chat/p/727e71fa-89b5-44a8-90a5-851021631a1c?utm_source=invite" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="{{assetPrefix}}assets/shared/icons/yandex_telemost.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Яндекс</span><span class="contact-card__hint">Да, тут тоже можно</span></span></a></li>
+          <li><button type="button" class="contact-card contact-card--action contact-card--brand-email" data-contact-copy data-email-b64="bmlrQG1hbWFkYWV2di5ydQ==" data-hint-default="Скопировать адрес" aria-label="Скопировать адрес электронной почты в буфер обмена"><span class="contact-card__corner contact-card__corner--copy" aria-hidden="true"></span><span class="contact-card__icon contact-card__icon--accent" aria-hidden="true"></span><span class="contact-card__body"><span class="contact-card__name">Почта</span><span class="contact-card__hint" data-contact-copy-hint>Скопировать адрес</span></span></button></li>
+        </ul>
+      </div>
+    </section>
diff --git a/src/partials/content-edit-fab-stack.html b/src/partials/content-edit-fab-stack.html
new file mode 100644
index 0000000..8f392a0
--- /dev/null
+++ b/src/partials/content-edit-fab-stack.html
@@ -0,0 +1,21 @@
+<div class="content-edit-fab-stack" aria-label="Правки контента" data-content-edit-ui>
+  <button
+    type="button"
+    class="fab fab--secondary glass-neutral content-edit-fab"
+    data-content-edit-mode-toggle
+    hidden
+    aria-pressed="false"
+    aria-label="Режим правок контента"
+    title="Режим правок"
+  >
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <path
+        d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0 0-3L16.5 4.5a2.12 2.12 0 0 0-3 0L3 15v5z"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linejoin="round"
+      />
+    </svg>
+    <span class="content-edit-fab__badge" hidden aria-hidden="true">0</span>
+  </button>
+</div>
diff --git a/src/partials/cookie-notice.html b/src/partials/cookie-notice.html
new file mode 100644
index 0000000..dc058f6
--- /dev/null
+++ b/src/partials/cookie-notice.html
@@ -0,0 +1,12 @@
+<aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
+      <p class="cookie-notice__text">
+        Сайт использует cookie для комфортной работы. Подробнее — в
+        <a href="{{assetPrefix}}cookie-policy.html" data-cookie-policy-link>политике cookie</a>.
+      </p>
+      <button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
+        <span>Принять</span>
+        <span class="cookie-notice__accept-icon" aria-hidden="true">
+          <img src="{{assetPrefix}}assets/shared/icons/сookie.svg" alt="" width="20" height="20" loading="eager" decoding="async" />
+        </span>
+      </button>
+    </aside>
diff --git a/src/partials/fab-stack-home-contact.html b/src/partials/fab-stack-home-contact.html
new file mode 100644
index 0000000..7d3ef02
--- /dev/null
+++ b/src/partials/fab-stack-home-contact.html
@@ -0,0 +1,62 @@
+<div class="fab-stack" aria-label="Быстрые действия">
+      <div class="theme-panel-fab-wrap">
+        <button type="button" class="fab fab--secondary glass-neutral" data-theme-panel-btn aria-expanded="false" aria-controls="theme-panel" aria-label="Настройки стиля">
+          <span class="theme-panel-fab__icon theme-panel-fab__icon--open-hide" aria-hidden="true"></span>
+          <svg class="theme-panel-fab__icon theme-panel-fab__icon--close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          </svg>
+        </button>
+        <div id="theme-panel" class="theme-picker__panel glass-neutral" role="dialog" aria-label="Тема и оформление" hidden data-theme-panel>
+          <div class="theme-picker__stack">
+            <section class="theme-picker__section" aria-labelledby="theme-accent-title">
+              <h3 id="theme-accent-title" class="theme-picker__section-title">Акцентный цвет</h3>
+              <div class="colorpicker" data-colorpicker>
+                <div class="colorpicker__plane-box">
+                  <canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Насыщенность и светлость акцента"></canvas>
+                  <div class="colorpicker__knob" data-sl-knob></div>
+                </div>
+                <div class="colorpicker__hue-wrap">
+                  <label class="colorpicker__hue-sr" for="theme-hue-slider">Оттенок акцента</label>
+                  <input id="theme-hue-slider" class="colorpicker__hue" type="range" min="0" max="360" value="210" data-hue-slider aria-valuemin="0" aria-valuemax="360" />
+                </div>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-mode-title">
+              <h3 id="theme-mode-title" class="theme-picker__section-title">Тема</h3>
+              <div class="radius-seg theme-mode-seg" role="radiogroup" aria-labelledby="theme-mode-title">
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="system" aria-label="Как в системе"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--system"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="light" aria-label="Светлая тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--light"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="dark" aria-label="Тёмная тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--dark"></span></span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-radius-title">
+              <h3 id="theme-radius-title" class="theme-picker__section-title">Скругление углов</h3>
+              <div class="radius-seg" role="radiogroup" aria-labelledby="theme-radius-title">
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="soft" aria-label="Слабое скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--soft"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="medium" aria-label="Среднее скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--medium"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="strong" aria-label="Сильное скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--strong"></span></span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-typography-title">
+              <h3 id="theme-typography-title" class="theme-picker__section-title">Типографика</h3>
+              <div class="radius-seg" role="radiogroup" aria-labelledby="theme-typography-title">
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="geologica" aria-label="Sans"><span class="theme-font-seg__label">Sans</span></button>
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="merriweather" aria-label="Sans Serif"><span class="theme-font-seg__label">Sans Serif</span></button>
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="mono" aria-label="Mono"><span class="theme-font-seg__label">Mono</span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-mesh-bg-title">
+              <h3 id="theme-mesh-bg-title" class="theme-picker__section-title">Фон страницы</h3>
+              <div class="radius-seg radius-seg--two" role="radiogroup" aria-labelledby="theme-mesh-bg-title">
+                <button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="on" aria-label="Показать фоновый градиент"><span class="theme-mesh-bg-seg__label">Вкл</span></button>
+                <button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="off" aria-label="Скрыть фоновый градиент"><span class="theme-mesh-bg-seg__label">Выкл</span></button>
+              </div>
+            </section>
+          </div>
+        </div>
+      </div>
+      <a class="fab fab--primary" href="{{assetPrefix}}index.html#contact" aria-label="Связаться">
+        <span class="fab-primary__ico" aria-hidden="true"></span>
+      </a>
+    </div>
+{{> content-edit-fab-stack}}
diff --git a/src/partials/fab-stack.html b/src/partials/fab-stack.html
new file mode 100644
index 0000000..cc255a0
--- /dev/null
+++ b/src/partials/fab-stack.html
@@ -0,0 +1,62 @@
+<div class="fab-stack" aria-label="Быстрые действия">
+      <div class="theme-panel-fab-wrap">
+        <button type="button" class="fab fab--secondary glass-neutral" data-theme-panel-btn aria-expanded="false" aria-controls="theme-panel" aria-label="Настройки стиля">
+          <span class="theme-panel-fab__icon theme-panel-fab__icon--open-hide" aria-hidden="true"></span>
+          <svg class="theme-panel-fab__icon theme-panel-fab__icon--close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          </svg>
+        </button>
+        <div id="theme-panel" class="theme-picker__panel glass-neutral" role="dialog" aria-label="Тема и оформление" hidden data-theme-panel>
+          <div class="theme-picker__stack">
+            <section class="theme-picker__section" aria-labelledby="theme-accent-title">
+              <h3 id="theme-accent-title" class="theme-picker__section-title">Акцентный цвет</h3>
+              <div class="colorpicker" data-colorpicker>
+                <div class="colorpicker__plane-box">
+                  <canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Насыщенность и светлость акцента"></canvas>
+                  <div class="colorpicker__knob" data-sl-knob></div>
+                </div>
+                <div class="colorpicker__hue-wrap">
+                  <label class="colorpicker__hue-sr" for="theme-hue-slider">Оттенок акцента</label>
+                  <input id="theme-hue-slider" class="colorpicker__hue" type="range" min="0" max="360" value="210" data-hue-slider aria-valuemin="0" aria-valuemax="360" />
+                </div>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-mode-title">
+              <h3 id="theme-mode-title" class="theme-picker__section-title">Тема</h3>
+              <div class="radius-seg theme-mode-seg" role="radiogroup" aria-labelledby="theme-mode-title">
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="system" aria-label="Как в системе"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--system"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="light" aria-label="Светлая тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--light"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="dark" aria-label="Тёмная тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--dark"></span></span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-radius-title">
+              <h3 id="theme-radius-title" class="theme-picker__section-title">Скругление углов</h3>
+              <div class="radius-seg" role="radiogroup" aria-labelledby="theme-radius-title">
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="soft" aria-label="Слабое скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--soft"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="medium" aria-label="Среднее скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--medium"></span></span></button>
+                <button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="strong" aria-label="Сильное скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--strong"></span></span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-typography-title">
+              <h3 id="theme-typography-title" class="theme-picker__section-title">Типографика</h3>
+              <div class="radius-seg" role="radiogroup" aria-labelledby="theme-typography-title">
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="geologica" aria-label="Sans"><span class="theme-font-seg__label">Sans</span></button>
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="merriweather" aria-label="Sans Serif"><span class="theme-font-seg__label">Sans Serif</span></button>
+                <button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="mono" aria-label="Mono"><span class="theme-font-seg__label">Mono</span></button>
+              </div>
+            </section>
+            <section class="theme-picker__section" aria-labelledby="theme-mesh-bg-title">
+              <h3 id="theme-mesh-bg-title" class="theme-picker__section-title">Фон страницы</h3>
+              <div class="radius-seg radius-seg--two" role="radiogroup" aria-labelledby="theme-mesh-bg-title">
+                <button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="on" aria-label="Показать фоновый градиент"><span class="theme-mesh-bg-seg__label">Вкл</span></button>
+                <button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="off" aria-label="Скрыть фоновый градиент"><span class="theme-mesh-bg-seg__label">Выкл</span></button>
+              </div>
+            </section>
+          </div>
+        </div>
+      </div>
+      <a class="fab fab--primary" href="#contact" aria-label="Связаться">
+        <span class="fab-primary__ico" aria-hidden="true"></span>
+      </a>
+    </div>
+{{> content-edit-fab-stack}}
diff --git a/src/partials/footer-spacer.html b/src/partials/footer-spacer.html
new file mode 100644
index 0000000..95d1a74
--- /dev/null
+++ b/src/partials/footer-spacer.html
@@ -0,0 +1,3 @@
+<section class="section section--surface" aria-hidden="true">
+      <div class="section__inner"></div>
+    </section>
diff --git a/src/partials/footer.html b/src/partials/footer.html
new file mode 100644
index 0000000..5c617de
--- /dev/null
+++ b/src/partials/footer.html
@@ -0,0 +1,7 @@
+<footer class="footer">
+      <div class="footer__inner">
+        <span class="footer__chunk footer__chunk--date">© 2026<span class="footer__sep" aria-hidden="true"> · </span></span>
+        <span class="footer__chunk footer__chunk--main">Дизайн и разработка сайта — Николай Мамадаев</span>
+        <span class="footer__chunk footer__chunk--meta footer__attr"><span class="footer__sep" aria-hidden="true"> · </span><a href="{{assetPrefix}}cases/design-system.html">Design System</a><span class="footer__sep" aria-hidden="true"> · </span><a href="{{assetPrefix}}cookie-policy.html">Политика cookie</a></span>
+      </div>
+    </footer>
diff --git a/src/partials/head-links.html b/src/partials/head-links.html
new file mode 100644
index 0000000..c1a886a
--- /dev/null
+++ b/src/partials/head-links.html
@@ -0,0 +1,11 @@
+{{> theme-init-script}}
+    <link rel="icon" type="image/png" sizes="32x32" href="{{assetPrefix}}assets/favicon/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="{{assetPrefix}}assets/favicon/favicon-16x16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="{{assetPrefix}}assets/favicon/apple-touch-icon.png" />
+    <link rel="manifest" href="{{assetPrefix}}assets/favicon/site.webmanifest" />
+    <link rel="preload" href="{{assetPrefix}}assets/fonts/merriweather.css" as="style" />
+    <link rel="preload" href="{{assetPrefix}}css/main.css" as="style" />
+    <link rel="preload" href="{{assetPrefix}}js/skill-connectors.js" as="script" />
+    <link rel="modulepreload" href="{{assetPrefix}}js/main.js" />
+    <link rel="stylesheet" href="{{assetPrefix}}css/main.css" />
+    {{> head-scripts}}
diff --git a/src/partials/head-plyr.html b/src/partials/head-plyr.html
new file mode 100644
index 0000000..52057be
--- /dev/null
+++ b/src/partials/head-plyr.html
@@ -0,0 +1 @@
+    <link rel="stylesheet" href="{{assetPrefix}}vendor/plyr/plyr.css" />
diff --git a/src/partials/head-scripts.html b/src/partials/head-scripts.html
new file mode 100644
index 0000000..f379195
--- /dev/null
+++ b/src/partials/head-scripts.html
@@ -0,0 +1,2 @@
+<script src="{{assetPrefix}}js/skill-connectors.js" defer></script>
+    <script type="module" src="{{assetPrefix}}js/main.js"></script>
diff --git a/src/partials/header-case.html b/src/partials/header-case.html
new file mode 100644
index 0000000..3571e0e
--- /dev/null
+++ b/src/partials/header-case.html
@@ -0,0 +1,12 @@
+<a class="skip-link" href="#case-main">К содержимому кейса</a>
+    <header class="header" data-theme-picker>
+      <div class="header__inner">
+        <a class="logo" href="{{assetPrefix}}index.html" aria-label="На главную">НМ</a>
+        <div class="header__cluster">
+          <nav class="nav" aria-label="Навигация по странице">
+            <a href="#projects">Портфолио</a>
+            <a href="#contact">Контакты</a>
+          </nav>
+        </div>
+      </div>
+    </header>
diff --git a/src/partials/header-home.html b/src/partials/header-home.html
new file mode 100644
index 0000000..e5f53e7
--- /dev/null
+++ b/src/partials/header-home.html
@@ -0,0 +1,25 @@
+<div class="page-mesh-bg" aria-hidden="true"></div>
+    <a class="skip-link" href="#main">К основному содержимому</a>
+
+    <header class="header" data-theme-picker>
+      <div class="header__inner">
+        <a class="logo" href="#" aria-label="На главную">НМ</a>
+        <div class="header__cluster">
+          <nav class="nav" aria-label="Разделы страницы" data-top-nav>
+            <a href="#skills">Навыки</a>
+            <a href="#experience">Опыт работы</a>
+            <a href="#projects">Портфолио</a>
+            <a href="#mini-projects">Активность</a>
+            <a href="#contact">Контакты</a>
+          </nav>
+          <div class="nav-more" hidden data-nav-more>
+            <button type="button" class="nav-more__btn" data-nav-more-btn aria-expanded="false" aria-controls="nav-more-menu-dock nav-more-menu-floating" aria-label="Ещё разделы">
+              <svg viewBox="0 0 12 12" fill="none" aria-hidden="true">
+                <path d="M2.5 4.5L6 8L9.5 4.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
+              </svg>
+            </button>
+            <div id="nav-more-menu-dock" class="nav-more__dock" hidden data-nav-more-menu></div>
+          </div>
+        </div>
+      </div>
+    </header>
diff --git a/src/partials/header-minimal.html b/src/partials/header-minimal.html
new file mode 100644
index 0000000..dd47c4c
--- /dev/null
+++ b/src/partials/header-minimal.html
@@ -0,0 +1,12 @@
+<a class="skip-link" href="#main">К основному содержимому</a>
+
+    <header class="header" data-theme-picker>
+      <div class="header__inner">
+        <a class="logo" href="{{assetPrefix}}index.html" aria-label="На главную">НМ</a>
+        <div class="header__cluster">
+          <nav class="nav" aria-label="Навигация">
+            <a href="{{assetPrefix}}index.html">На главную</a>
+          </nav>
+        </div>
+      </div>
+    </header>
diff --git a/src/partials/mini-projects-section.html b/src/partials/mini-projects-section.html
new file mode 100644
index 0000000..df2317e
--- /dev/null
+++ b/src/partials/mini-projects-section.html
@@ -0,0 +1,113 @@
+      <section id="mini-projects" class="section section--surface" aria-labelledby="mini-projects-title">
+        <div class="section__inner">
+          <h2 id="mini-projects-title" class="section__title">Активность</h2>
+          <div
+            class="skills-intro skills-intro--chat section__prose"
+            data-skills-intro
+            role="region"
+            aria-labelledby="mini-projects-title"
+          >
+            <div class="skills-msg" data-skills-msg>
+              <div class="skills-msg__body">
+                <p class="skills-msg__author">Николай М:</p>
+                <p class="skills-msg__text">
+                  Люблю делать разные мини-проекты или делиться чем-то полезным с миром.
+                </p>
+                <time class="skills-msg__time" datetime="" data-skills-msg-time></time>
+              </div>
+            </div>
+          </div>
+          <ol id="mini-projects-list" class="mini-projects-grid" data-mini-projects-list>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a
+                class="mp-card mp-card--link mp-card--horizontal mp-card--hor-image"
+                href="https://www.figma.com/@mamadaevv"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Figma Community — открыть профиль"
+              >
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="assets/misc/figma_logo.webp"
+                    alt=""
+                    width="800"
+                    height="800"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">
+                    Figma Community
+                    <span class="mp-card__ext" aria-hidden="true"></span>
+                  </h3>
+                  <p class="mp-card__desc">
+                    Выкладываю полезные файлы и плагины для сообщества.
+                  </p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a
+                class="mp-card mp-card--link mp-card--horizontal mp-card--hor-image"
+                href="https://dribbble.com/mamadaevv"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Dribbble — открыть профиль"
+              >
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="assets/misc/dribbble_logo.webp"
+                    alt=""
+                    width="1024"
+                    height="1024"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">
+                    Dribbble
+                    <span class="mp-card__ext" aria-hidden="true"></span>
+                  </h3>
+                  <p class="mp-card__desc">
+                    Красивые картинки с элементами интерфейсов.
+                  </p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a
+                class="mp-card mp-card--link mp-card--horizontal mp-card--hor-image"
+                href="https://t.me/designnotpizza"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Дизайн не пицца — открыть канал в Telegram"
+              >
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="assets/misc/tg-channel-logo-design_not_pizza.webp"
+                    alt=""
+                    width="640"
+                    height="640"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">
+                    Дизайн не пицца
+                    <span class="mp-card__ext" aria-hidden="true"></span>
+                  </h3>
+                  <p class="mp-card__desc">
+                    Мой канал про дизайн. Посты на тему продуктового дизайна и полезные ссылки.
+                  </p>
+                </div>
+              </a>
+            </li>
+          </ol>
+        </div>
+      </section>
diff --git a/src/partials/mini-projects-showcase-grid.html b/src/partials/mini-projects-showcase-grid.html
new file mode 100644
index 0000000..11a6d65
--- /dev/null
+++ b/src/partials/mini-projects-showcase-grid.html
@@ -0,0 +1,190 @@
+        <ol
+          id="mini-projects-showcase-grid"
+          class="mini-projects-grid mp-showcase-grid"
+          data-mini-projects-list
+        >
+          <li class="mini-projects-grid__item" data-mp-cells="2">
+            <a class="mp-card mp-card--link mp-card--stack" href="#" aria-label="[2] stack · ссылка">
+              <div class="mp-card__media" aria-hidden="true">
+                <img
+                  class="mp-card__image"
+                  src="../assets/shared/placeholder.webp"
+                  alt=""
+                  width="560"
+                  height="315"
+                  loading="lazy"
+                  decoding="async"
+                />
+              </div>
+              <div class="mp-card__body">
+                <h3 class="mp-card__title">
+                  [2] stack · ссылка
+                  <span class="mp-card__ext" aria-hidden="true"></span>
+                </h3>
+                <ul class="mp-card__tags" aria-label="Тип проекта">
+                  <li class="mp-card__tag">веб-сайт</li>
+                </ul>
+                <p class="mp-card__desc">Базовая пара в ряду из шести клеток.</p>
+              </div>
+            </a>
+          </li>
+          <li class="mini-projects-grid__item" data-mp-cells="2">
+            <div class="mp-card mp-card--stack">
+              <div class="mp-card__media" aria-hidden="true">
+                <img
+                  class="mp-card__image"
+                  src="../assets/shared/placeholder.webp"
+                  alt=""
+                  width="560"
+                  height="315"
+                  loading="lazy"
+                  decoding="async"
+                />
+              </div>
+              <div class="mp-card__body">
+                <h3 class="mp-card__title">[2] stack</h3>
+                <ul class="mp-card__tags" aria-label="Тип проекта">
+                  <li class="mp-card__tag">заметка</li>
+                </ul>
+                <p class="mp-card__desc">Stack без внешней ссылки.</p>
+              </div>
+            </div>
+          </li>
+          <li class="mini-projects-grid__item" data-mp-cells="2">
+            <div class="mp-card mp-card--horizontal">
+              <div class="mp-card__media" aria-hidden="true">
+                <img
+                  class="mp-card__image"
+                  src="../assets/shared/placeholder.webp"
+                  alt=""
+                  width="360"
+                  height="203"
+                  loading="lazy"
+                  decoding="async"
+                />
+              </div>
+              <div class="mp-card__body">
+                <h3 class="mp-card__title">[2] horizontal</h3>
+                <ul class="mp-card__tags" aria-label="Тип проекта">
+                  <li class="mp-card__tag">утилита</li>
+                </ul>
+                <p class="mp-card__desc">Horizontal на две клетки, без ссылки.</p>
+              </div>
+            </div>
+          </li>
+          <li class="mini-projects-grid__item" data-mp-cells="2">
+            <article class="mp-card mp-card--compact">
+              <div class="mp-card__body">
+                <h3 class="mp-card__title">[2] compact</h3>
+                <ul class="mp-card__tags" aria-label="Тип проекта">
+                  <li class="mp-card__tag">шаблон</li>
+                </ul>
+                <p class="mp-card__desc">Текстовая карточка на две клетки.</p>
+              </div>
+            </article>
+          </li>
+          <li class="mini-projects-grid__item" data-mp-cells="1">
+            <a class="mp-card mp-card--link mp-card--compact" href="#" aria-label="[1] compact · ссылка">
+              <div class="mp-card__body">
+                <h3 class="mp-card__title">
+                  [1] compact · ссылка
+                  <span class="mp-card__ext" aria-hidden="true"></span>
+                </h3>
+                <ul class="mp-card__tags" aria-label="Тип проекта">
+                  <li class="mp-card__tag">cli</li>
+                </ul>
+                <p class="mp-card__desc">Узкая колонка со ссылкой.</p>
+              </div>
+            </a>
+          </li>
+          <li class="mini-projects-grid__item" data-mp-cells="1">
+            <article class="mp-card mp-card--compact">
+              <div class="mp-card__body">
+                <h3 class="mp-card__title">[1] compact</h3>
+                <ul class="mp-card__tags" aria-label="Тип проекта">
+                  <li class="mp-card__tag">документ</li>
+                </ul>
+                <p class="mp-card__desc">Compact на одну клетку.</p>
+              </div>
+            </article>
+          </li>
+          <li class="mini-projects-grid__item" data-mp-cells="2">
+            <div class="mp-card mp-card--decor" aria-hidden="true">
+              <span class="mp-card__decor-pattern" aria-hidden="true"></span>
+            </div>
+          </li>
+          <li class="mini-projects-grid__item" data-mp-cells="3">
+            <a class="mp-card mp-card--link mp-card--stack" href="#" aria-label="[3] stack · ссылка">
+              <div class="mp-card__media" aria-hidden="true">
+                <img
+                  class="mp-card__image"
+                  src="../assets/shared/placeholder.webp"
+                  alt=""
+                  width="560"
+                  height="315"
+                  loading="lazy"
+                  decoding="async"
+                />
+              </div>
+              <div class="mp-card__body">
+                <h3 class="mp-card__title">
+                  [3] stack · ссылка
+                  <span class="mp-card__ext" aria-hidden="true"></span>
+                </h3>
+                <ul class="mp-card__tags" aria-label="Тип проекта">
+                  <li class="mp-card__tag">приложение</li>
+                </ul>
+                <p class="mp-card__desc">
+                  Половина шестиклеточной строки. Длиннее описание, чтобы проверить перенос и высоту после смены шрифта.
+                </p>
+              </div>
+            </a>
+          </li>
+          <li class="mini-projects-grid__item" data-mp-cells="3">
+            <a class="mp-card mp-card--link mp-card--horizontal" href="#" aria-label="[3] horizontal · ссылка">
+              <div class="mp-card__media" aria-hidden="true">
+                <img
+                  class="mp-card__image"
+                  src="../assets/shared/placeholder.webp"
+                  alt=""
+                  width="360"
+                  height="203"
+                  loading="lazy"
+                  decoding="async"
+                />
+              </div>
+              <div class="mp-card__body">
+                <h3 class="mp-card__title">
+                  [3] horizontal · ссылка
+                  <span class="mp-card__ext" aria-hidden="true"></span>
+                </h3>
+                <ul class="mp-card__tags" aria-label="Тип проекта">
+                  <li class="mp-card__tag">плагин</li>
+                </ul>
+                <p class="mp-card__desc">Широкий horizontal: превью и текст в одной полосе.</p>
+              </div>
+            </a>
+          </li>
+          <li class="mini-projects-grid__item" data-mp-cells="3">
+            <div class="mp-card mp-card--horizontal">
+              <div class="mp-card__media" aria-hidden="true">
+                <img
+                  class="mp-card__image"
+                  src="../assets/shared/placeholder.webp"
+                  alt=""
+                  width="360"
+                  height="203"
+                  loading="lazy"
+                  decoding="async"
+                />
+              </div>
+              <div class="mp-card__body">
+                <h3 class="mp-card__title">[3] horizontal</h3>
+                <ul class="mp-card__tags" aria-label="Тип проекта">
+                  <li class="mp-card__tag">виджет</li>
+                </ul>
+                <p class="mp-card__desc">Horizontal на три клетки, без ссылки.</p>
+              </div>
+            </div>
+          </li>
+        </ol>
diff --git a/src/partials/mini-projects-showcase-specimens.html b/src/partials/mini-projects-showcase-specimens.html
new file mode 100644
index 0000000..452d7fa
--- /dev/null
+++ b/src/partials/mini-projects-showcase-specimens.html
@@ -0,0 +1,217 @@
+        <div class="mp-showcase-specimens" aria-label="Типы карточек">
+          <div class="mp-showcase-specimen-row">
+            <div class="mp-showcase-specimen__card">
+              <p class="mp-showcase-specimen__label"><code>mp-card--stack</code> + <code>mp-card--link</code></p>
+              <a
+                class="mp-card mp-card--link mp-card--stack"
+                href="#"
+                aria-label="Stack со ссылкой — пример карточки"
+              >
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/shared/placeholder.webp"
+                    alt=""
+                    width="560"
+                    height="315"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">
+                    Stack со ссылкой
+                    <span class="mp-card__ext" aria-hidden="true"></span>
+                  </h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">веб-сайт</li>
+                  </ul>
+                  <p class="mp-card__desc">
+                    Небольшой скрипт: черновики текстов из ключевых слов, без внешних API.
+                  </p>
+                </div>
+              </a>
+            </div>
+            <div class="mp-showcase-specimen__desc">
+              <p class="section__prose">
+                <strong>Stack со ссылкой.</strong> Превью на всю ширину, текст снизу. Для внешней ссылки:
+                <code>mp-card--link</code> и <code>mp-card__ext</code> в заголовке (как в блоке опыта).
+              </p>
+            </div>
+          </div>
+
+          <div class="mp-showcase-specimen-row">
+            <div class="mp-showcase-specimen__card">
+              <p class="mp-showcase-specimen__label"><code>mp-card--stack</code> без ссылки</p>
+              <div class="mp-card mp-card--stack">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/shared/placeholder.webp"
+                    alt=""
+                    width="560"
+                    height="315"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Stack без ссылки</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">заметка</li>
+                  </ul>
+                  <p class="mp-card__desc">
+                    Связка баз и rollup для недельного обзора, только для личного пользования.
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div class="mp-showcase-specimen__desc">
+              <p class="section__prose">
+                <strong>Stack без ссылки.</strong> Тот же вид. Обёртка <code>div</code> или <code>article</code>, без
+                <code>mp-card--link</code>.
+              </p>
+            </div>
+          </div>
+
+          <div class="mp-showcase-specimen-row">
+            <div class="mp-showcase-specimen__card">
+              <p class="mp-showcase-specimen__label"><code>mp-card--horizontal</code> + <code>mp-card--link</code></p>
+              <a
+                class="mp-card mp-card--link mp-card--horizontal"
+                href="#"
+                aria-label="Horizontal со ссылкой — пример карточки"
+              >
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/shared/placeholder.webp"
+                    alt=""
+                    width="360"
+                    height="203"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">
+                    Horizontal со ссылкой
+                    <span class="mp-card__ext" aria-hidden="true"></span>
+                  </h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">приложение</li>
+                  </ul>
+                  <p class="mp-card__desc">
+                    Локальный таймер с короткими звуками и блокировкой лишних вкладок.
+                  </p>
+                </div>
+              </a>
+            </div>
+            <div class="mp-showcase-specimen__desc">
+              <p class="section__prose">
+                <strong>Horizontal со ссылкой.</strong> Миниатюра слева, текст справа. На узком экране карточка
+                складывается в столбик.
+              </p>
+            </div>
+          </div>
+
+          <div class="mp-showcase-specimen-row">
+            <div class="mp-showcase-specimen__card">
+              <p class="mp-showcase-specimen__label"><code>mp-card--horizontal</code> без ссылки</p>
+              <div class="mp-card mp-card--horizontal">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="../assets/shared/placeholder.webp"
+                    alt=""
+                    width="360"
+                    height="203"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Horizontal без ссылки</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">шаблон</li>
+                  </ul>
+                  <p class="mp-card__desc">
+                    Статический сайт с расписанием и формой заявки на отдельном сервисе.
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div class="mp-showcase-specimen__desc">
+              <p class="section__prose">
+                <strong>Horizontal без ссылки.</strong> Тот же расклад, карточка не ведёт на внешний URL.
+              </p>
+            </div>
+          </div>
+
+          <div class="mp-showcase-specimen-row">
+            <div class="mp-showcase-specimen__card">
+              <p class="mp-showcase-specimen__label"><code>mp-card--compact</code> + <code>mp-card--link</code></p>
+              <a
+                class="mp-card mp-card--link mp-card--compact"
+                href="#"
+                aria-label="Compact со ссылкой — пример карточки"
+              >
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">
+                    Compact со ссылкой
+                    <span class="mp-card__ext" aria-hidden="true"></span>
+                  </h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">скрипт</li>
+                  </ul>
+                  <p class="mp-card__desc">
+                    Префиксы, нумерация и dry-run перед записью файлов на диск.
+                  </p>
+                </div>
+              </a>
+            </div>
+            <div class="mp-showcase-specimen__desc">
+              <p class="section__prose">
+                <strong>Compact со ссылкой.</strong> Только текст, без <code>mp-card__media</code>. В сетке часто с
+                <code>data-mp-cells="1"</code>.
+              </p>
+            </div>
+          </div>
+
+          <div class="mp-showcase-specimen-row">
+            <div class="mp-showcase-specimen__card">
+              <p class="mp-showcase-specimen__label"><code>mp-card--compact</code> без ссылки</p>
+              <article class="mp-card mp-card--compact">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Compact без ссылки</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">документ</li>
+                  </ul>
+                  <p class="mp-card__desc">
+                    Markdown-список проверок перед релизом мелких правок в интерфейсе.
+                  </p>
+                </div>
+              </article>
+            </div>
+            <div class="mp-showcase-specimen__desc">
+              <p class="section__prose">
+                <strong>Compact без ссылки.</strong> Короткая заметка или чеклист без внешней ссылки.
+              </p>
+            </div>
+          </div>
+
+          <div class="mp-showcase-specimen-row">
+            <div class="mp-showcase-specimen__card">
+              <p class="mp-showcase-specimen__label"><code>mp-card--decor</code></p>
+              <div class="mp-card mp-card--decor" aria-hidden="true">
+                <span class="mp-card__decor-pattern" aria-hidden="true"></span>
+              </div>
+            </div>
+            <div class="mp-showcase-specimen__desc">
+              <p class="section__prose">
+                <strong>Декоративная ячейка.</strong> Заглушка в сетке, без проекта и ссылки. Внутри
+                <code>span.mp-card__decor-pattern</code>.
+              </p>
+            </div>
+          </div>
+        </div>
diff --git a/src/partials/nav-more-floating.html b/src/partials/nav-more-floating.html
new file mode 100644
index 0000000..45282dc
--- /dev/null
+++ b/src/partials/nav-more-floating.html
@@ -0,0 +1 @@
+<div id="nav-more-menu-floating" class="nav-more__floating" hidden data-nav-more-menu-floating aria-hidden="true"></div>
diff --git a/src/partials/page-scripts.html b/src/partials/page-scripts.html
new file mode 100644
index 0000000..f379195
--- /dev/null
+++ b/src/partials/page-scripts.html
@@ -0,0 +1,2 @@
+<script src="{{assetPrefix}}js/skill-connectors.js" defer></script>
+    <script type="module" src="{{assetPrefix}}js/main.js"></script>
diff --git a/src/partials/projects-section-mp.html b/src/partials/projects-section-mp.html
new file mode 100644
index 0000000..362dbb5
--- /dev/null
+++ b/src/partials/projects-section-mp.html
@@ -0,0 +1,135 @@
+<section id="projects" class="section section--surface">
+        <div class="section__inner">
+          <h2 class="section__title">Портфолио</h2>
+          <ol class="mini-projects-grid" data-mini-projects-list>
+            <li class="mini-projects-grid__item" data-mp-cells="3">
+              <a class="mp-card mp-card--link mp-card--stack" href="{{casesPrefix}}ai-platform-primo-rpa.html" aria-label="Платформа для работы с AI — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="{{assetPrefix}}assets/ai-platform-primo-rpa/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Платформа для работы с AI</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями автоматизации и Smart OCR.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="3">
+              <a class="mp-card mp-card--link mp-card--stack" href="{{casesPrefix}}lunacy.html" aria-label="Графический редактор Lunacy — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="{{assetPrefix}}assets/lunacy/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Графический редактор Lunacy</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Desktop App</li>
+                  </ul>
+                  <p class="mp-card__desc">Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и интерфейсной логики.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--stack" href="{{casesPrefix}}manu-game-maker.html" aria-label="Игровой движок MANU — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="{{assetPrefix}}assets/manu-game-maker/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Игровой движок MANU</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">Product Design</li>
+                    <li class="mp-card__tag">Desktop App</li>
+                  </ul>
+                  <p class="mp-card__desc">Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и проработка сотен сложных пользовательских сценариев.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--stack" href="{{casesPrefix}}mobile-clinic-app.html" aria-label="Мобильное приложение для сети клиник — открыть кейс">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img
+                    class="mp-card__image"
+                    src="{{assetPrefix}}assets/mobile-clinic-app/cover.webp"
+                    alt=""
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Мобильное приложение для сети клиник</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Mobile App</li>
+                  </ul>
+                  <p class="mp-card__desc">Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом пользовательском пути, понятной навигации и быстром доступе к нужным действиям.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="{{casesPrefix}}orc-automation-panel.html" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Веб-панель для оркестрации автоматизаций</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под продакшен без остановки релизов.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="{{casesPrefix}}task-distribution-concept.html" aria-label="Концепт сервиса распределения задач — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Концепт сервиса распределения задач</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">UX/UI</li>
+                    <li class="mp-card__tag">Analytics</li>
+                  </ul>
+                  <p class="mp-card__desc">Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность процессов и удобство командной работы.</p>
+                </div>
+              </a>
+            </li>
+            <li class="mini-projects-grid__item" data-mp-cells="2">
+              <a class="mp-card mp-card--link mp-card--compact" href="{{casesPrefix}}task-tracker.html" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Таск-трекер для бек-офис системы</h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта">
+                    <li class="mp-card__tag">Product Design</li>
+                    <li class="mp-card__tag">Web App</li>
+                  </ul>
+                  <p class="mp-card__desc">Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по исполнителям; вкладки, фильтры, доска / список / таблица, Drag&amp;Drop.</p>
+                </div>
+              </a>
+            </li>
+          </ol>
+        </div>
+      </section>
\ No newline at end of file
diff --git a/src/partials/projects-section.html b/src/partials/projects-section.html
new file mode 100644
index 0000000..19839f8
--- /dev/null
+++ b/src/partials/projects-section.html
@@ -0,0 +1,243 @@
+<section hidden class="section section--surface" aria-hidden="true">
+        <div class="section__inner">
+          <div class="projects__heading">
+            <h2 class="section__title projects__title">Портфолио</h2>
+            <div class="projects__controls" aria-label="Навигация по карточкам портфолио">
+              <button type="button" class="projects__nav-btn" data-projects-prev aria-label="Прокрутить влево" aria-controls="projects-viewport">
+                <span class="projects__nav-ico projects__nav-ico--left" aria-hidden="true"></span>
+              </button>
+              <button type="button" class="projects__nav-btn" data-projects-next aria-label="Прокрутить вправо" aria-controls="projects-viewport">
+                <span class="projects__nav-ico projects__nav-ico--right" aria-hidden="true"></span>
+              </button>
+            </div>
+          </div>
+          <div class="projects-carousel">
+            <div id="projects-viewport" class="projects-carousel__viewport" data-projects-viewport>
+              <div class="projects-carousel__track">
+                <div class="projects-carousel__spacer" aria-hidden="true"></div>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="{{casesPrefix}}orc-automation-panel.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Веб-панель для оркестрации автоматизаций</h3>
+                      <p class="portfolio-card__summary">
+                        Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под
+                        продакшен без остановки релизов.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Web App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="{{assetPrefix}}assets/orc-primo-rpa/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="{{casesPrefix}}ai-platform-primo-rpa.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Платформа для работы с AI</h3>
+                      <p class="portfolio-card__summary">
+                        Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями
+                        автоматизации и Smart OCR.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Web App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="{{assetPrefix}}assets/ai-platform-primo-rpa/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="{{casesPrefix}}task-tracker.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Таск-трекер для бек-офис системы</h3>
+                      <p class="portfolio-card__summary">
+                        Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по
+                        исполнителям; вкладки, фильтры, виды доска / список / таблица, Drag&amp;Drop.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">Product Design</li>
+                        <li class="portfolio-card__tag">Web App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="{{assetPrefix}}assets/task-tracker/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="{{casesPrefix}}manu-game-maker.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Игровой движок MANU</h3>
+                      <p class="portfolio-card__summary">
+                        Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и
+                        проработка сотен сложных пользовательских сценариев.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">Product Design</li>
+                        <li class="portfolio-card__tag">Desktop App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="{{assetPrefix}}assets/manu-game-maker/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="{{casesPrefix}}lunacy.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Графический редактор Lunacy</h3>
+                      <p class="portfolio-card__summary">
+                        Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и
+                        интерфейсной логики.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Desktop App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="{{assetPrefix}}assets/lunacy/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="{{casesPrefix}}mobile-clinic-app.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Мобильное приложение для сети клиник</h3>
+                      <p class="portfolio-card__summary">
+                        Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом
+                        пользовательском пути, понятной навигации и быстром доступе к нужным действиям.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Mobile App</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="{{assetPrefix}}assets/mobile-clinic-app/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="{{casesPrefix}}task-distribution-concept.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Концепт сервиса распределения задач</h3>
+                      <p class="portfolio-card__summary">
+                        Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность
+                        процессов и удобство командной работы.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Analytics</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="{{assetPrefix}}assets/task-distribution-concept/cover.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <article class="projects-carousel__item">
+                  <a class="portfolio-card" href="{{casesPrefix}}obsidian-plugin-columns-view.html">
+                    <div class="portfolio-card__body">
+                      <h3 class="portfolio-card__title">Колоночный вид — плагин для Obsidian</h3>
+                      <p class="portfolio-card__summary">
+                        Интерфейс для многоколоночной работы с заметками: удобная навигация, фильтрация и настройка
+                        колончатого отображения прямо в редакторе Obsidian.
+                      </p>
+                      <ul class="portfolio-card__tags" aria-label="Ключевые теги">
+                        <li class="portfolio-card__tag">UX/UI</li>
+                        <li class="portfolio-card__tag">Plugin</li>
+                      </ul>
+                    </div>
+                    <div class="portfolio-card__cover" aria-hidden="true">
+                      <img
+                        class="portfolio-card__image"
+                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        data-defer-src="{{assetPrefix}}assets/obsidian-plugin-columns-view/filter use.webp"
+                        alt=""
+                        width="400"
+                        height="225"
+                        decoding="async"
+                      />
+                    </div>
+                  </a>
+                </article>
+                <div class="projects-carousel__spacer" aria-hidden="true"></div>
+              </div>
+            </div>
+            <button
+              type="button"
+              class="projects-carousel__edge-hit projects-carousel__edge-hit--left"
+              data-projects-edge-prev
+              aria-label="Прокрутить портфолио влево"
+            ></button>
+            <button
+              type="button"
+              class="projects-carousel__edge-hit projects-carousel__edge-hit--right"
+              data-projects-edge-next
+              aria-label="Прокрутить портфолио вправо"
+            ></button>
+          </div>
+        </div>
+      </section>
diff --git a/src/partials/theme-init-script.html b/src/partials/theme-init-script.html
new file mode 100644
index 0000000..21340f4
--- /dev/null
+++ b/src/partials/theme-init-script.html
@@ -0,0 +1,56 @@
+<script>
+      (function () {
+        var FONT_CSS = {
+          merriweather: "{{assetPrefix}}assets/fonts/merriweather.css",
+          geologica: "{{assetPrefix}}assets/fonts/geologica.css",
+          mono: "{{assetPrefix}}assets/fonts/mono.css",
+        };
+        try {
+          var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
+          var d = document.documentElement;
+          var m = t.mode;
+          if (m !== "light" && m !== "dark" && m !== "system") m = "system";
+          var eff =
+            m === "system"
+              ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+              : m;
+          d.dataset.theme = eff;
+          var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
+          var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
+          var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
+          if (h !== null) d.style.setProperty("--theme-h", String(h));
+          if (s !== null) d.style.setProperty("--theme-s", String(s));
+          if (l !== null) {
+            var L = Number(l);
+            if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
+          }
+          var rad = t.radius;
+          if (rad === "soft" || rad === "medium" || rad === "strong") {
+            d.dataset.radius = rad;
+          } else {
+            d.dataset.radius = "medium";
+          }
+          var f = t.font;
+          if (f === "onest") f = "geologica";
+          if (f === "anonymous") f = "mono";
+          if (f !== "merriweather" && f !== "mono" && f !== "geologica") f = "merriweather";
+          d.dataset.font = f;
+          var mb = t.meshBg;
+          if (mb === "off") {
+            d.dataset.meshBg = "off";
+          } else {
+            d.dataset.meshBg = "on";
+          }
+          var href = FONT_CSS[f];
+          if (href && !document.querySelector('link[data-theme-font="' + f + '"]')) {
+            var link = document.createElement("link");
+            link.rel = "stylesheet";
+            link.href = href;
+            link.setAttribute("data-theme-font", f);
+            document.head.appendChild(link);
+          }
+        } catch (e) {}
+      })();
+    </script>
diff --git a/texts/cases/ai-platform-primo-rpa.md b/texts/cases/ai-platform-primo-rpa.md
new file mode 100644
index 0000000..c8c99a1
--- /dev/null
+++ b/texts/cases/ai-platform-primo-rpa.md
@@ -0,0 +1,57 @@
+# Разработка интерфейса для Primo RPA AI Server
+
+- **Источник:** `src/pages/cases/ai-platform-primo-rpa.html` (сборка → `public/cases/ai-platform-primo-rpa.html`)
+- **eyebrow:** Product Design · AI
+- **meta description:** Кейс по разработке интерфейса для AI Server в Primo RPA: структура, процесс и ключевые UX/UI-решения.
+
+---
+
+## Обзор (`#obzor`)
+
+- Что это был за продукт и зачем тебя позвали.
+  - Внутри компании разработали новый продукт, который позволял сильно улучшить работу с моделями для распознавания текстов на документах. Можно было загрузить датасет из документов компании разметить там поля и обучить модель. После этого обученная модель уже использовалась в других продуктах компании. Качество распознавания при таком подходе был существенно выше и также соответствовал требованиям безопасности по хранению данных только внутри контура компании. Уже при мне в сервисе появился функционал, который позволял обучать любую базовую нейросеть под конкретные задачи компании. Это был файнтюнинг и работа со скилами: суммаризация, извлечение, генарация и прочие.
+- Роль, сроки, главный итог в двух абзацах.
+  - Меня пригласили в проект как UX/UI дизайнера, потому что проект делали только разработчики своими силами. В резуальтате моей работы у сервиса существенно снизился порог входа и пользоваться продуктом уже могли гараздо больший круг лиц, даже не имея специальных знаний в области ии и OCR.
+- Подсказки в HTML: задача бизнеса, главное достижение, что намеренно не освещаешь.
+  - не понимаю что в этом блоке , напиши сам, я поправлю
+
+## Было и стало (`#bylo-stalo`)
+
+- Как выглядел сервис «до», типовые проблемы.
+  - Сервис был собран на фрэймворке Ant Design под React и использовал визуальную стилизацию от Hope UI (тема для Bootstrap). На тот момент у компании было уже несколько веб-продуктов и была цель унифицировать и освежить интерфейс продуктов. Поэтому в разработке интерфейса применялись компоненты из этих фрэймворков.
+  - Основная проблема сервиса, которую надо было решить это то что настройка проекта крайне сложная задача с большим количеством шагов и мелких задач. А ещё на платформе было три типа проектов и каждый тип настраивался по своему. Таким образом от момента создания проекта и его реального использования проходило много времени и требовалась помощь специалистов самой компании, отдела внедрения. Запутанная навигация внутри проекта и дублирование функцинала существенно снижали продуктивность работы отдела внедрения и не позволяли масштабировать продукт. Также невозможно было продвигать продукт на широкую аудиторию.
+- Что переделано и как это сняло боли.
+  - Я погрузился в продукт. Очень много и подробно обсуждая с командой весь функционал. Мои знания в области ИИ и работы со схожими веб-платформами хорошо мне в этом помогали.
+  - Составил юзерфлоу по тому как выполняются сценарии в текущем продукте и они помогли подсветить команде где есть путаница в интерфейсе и пути пользователя. Также благодаря этой скурпулёзной работе удалось переработать и сами процессы настроек проектов. Часть функций была также автоматизирована и спрятана от пользователя, чтобы уменьшить шанс совершения ошибок и не заставлять пользователя выполнять рутинные дейтсвия.
+  - Новый подход полностью изменил и восприятие продукта и процесс настройки проектов. Теперь интерфейс плавно вёл пользователя по этапам настройки, но в том же время не ломал старые сценарии. Так как тут не получается сделать типичный визард из последовательных шагов и пользователю всё равно надо возвращаться назад и править что-то для улучшения результата.
+- **Вопросы команде:** текущее состояние, живые паттерны, метрики, backlog, что сделали бы иначе.
+  - Сократилось ли кол-во запросов к поддержке 
+  - Получается ли у пользователей самостоятельно настроить проект от начала и до конца
+  - Позволяет ли новый интерфейс создавать новые типы проектов придерживаясь уже заложенных паттернов
+- Слот под медиа: скрин/видео «как было».
+
+## Паттерны (`#patterns`)
+
+- Для каждого паттерна: зачем, сценарий, отличие от старого подхода.
+- Уже вставлены: маппинг полей (видео), датасет/обучение/качество, inference, полноэкранный режим.
+- **Слоты «Медиа позже»:** LLM список/статусы, мастер обучения, OCR/разметка.
+
+## Процесс и передача (`#process`)
+
+- Синки, макеты, спека, handoff во фронт.
+- Поиск и собеседование следующего дизайнера, онбординг.
+- **Вопросы следующему дизайнеру:** первые две недели, полезные артефакты, что пересобрали, UX в трёх предложениях.
+- Слот под медиа: Notion/Figma/timeline.
+
+## Заключение (`#zaklyuchenie`)
+
+- Итог для читателя в сжатом виде.
+
+## Чеклист (`#cheklist`)
+
+- Пользователи, ограничения, сценарии LLM/OCR, исследования, метрики.
+
+## Ассеты (`#media`)
+
+- `public/assets/ai-platform-primo-rpa/` — обложка `cover.webp` и прочие файлы; основные кадры встроены в раздел «Паттерны».
+
diff --git a/texts/cases/lunacy.md b/texts/cases/lunacy.md
new file mode 100644
index 0000000..be97f1d
--- /dev/null
+++ b/texts/cases/lunacy.md
@@ -0,0 +1,59 @@
+# Графический редактор Lunacy
+
+- **Источник (разметка):** `src/pages/cases/lunacy.html` → после сборки `public/cases/lunacy.html`
+- **eyebrow:** Icons8 · desktop
+- **meta description:** Кейс: работа над интерфейсом Lunacy в Icons8 — сценарии, итерации UI и скриншоты процесса.
+
+**Заметка по путям к медиа:** ниже пути от корня сгенерированного сайта (`public/`), папка `assets/lunacy/`. Картинки подгружаются последовательно (`data-case-sequential-images` + `data-src`); `cover.webp` на странице кейса не используется (только обложка карточки на главной).
+
+## Оглавление секций
+
+1. **Ввод** — роль в Icons8, ссылка на продукт.
+2. **Обзор** — `Lunacy_app_overview.webp`.
+3. **Blob на холсте** — `blob_settings_on_canvas.webp`.
+4. **Компоненты и сравнение** — `compare_components_modal_window`, `components_update_indicator_location_panel`.
+5. **Прототип в панели** — `modal_window_for_prototype_create_on_canvas`, `modal_window_for_prototype_panel_states`.
+6. **Shadow Pro** — `shadow_pro_settings_panel`, `shadow_pro_settings_ideas`, модалки auto on/off.
+7. **Панель blob: версии v1–v9** — сетка 3 колонки по ширине контента, файлы `blob_settings_panel_v1` … `v9`.
+8. **Слайдер: версии** — сетка 4 колонки: `slider_v1` … `v13`, `slider_14`, `v15` … `v18`.
+9. **Слайдеры: общий кадр** — `sliders_all_set.webp`.
+
+## Ввод
+
+Работа над интерфейсом Lunacy: user flow, прототипы, доработка функциональности и визуальной логики. Продукт: [icons8.com/lunacy](https://icons8.com/lunacy).
+
+## Обзор
+
+Экран-обзор приложения — отправная точка для материалов кейса.
+
+## Blob на холсте
+
+Сценарий настроек blob в контексте холста; далее в HTML — серия версий панели v1–v9.
+
+## Компоненты и сравнение
+
+Модальное сравнение компонентов и индикатор обновлений в панели.
+
+## Прототип в панели
+
+Создание прототипа на холсте и состояния панели для режима прототипа.
+
+## Shadow Pro
+
+Панель, идеи и модалки с вариантами авто-настройки.
+
+## Панель blob: версии v1–v9
+
+Девять итераций в одной сетке (три колонки на широком экране); клик по ячейке открывает полноэкранный просмотр.
+
+## Слайдер: версии v1–v18 и кадр 14
+
+Порядок по именам файлов; `slider_14` без суффикса `v` стоит между v13 и v15. Сетка на странице — четыре колонки по ширине контента.
+
+## Слайдеры: общий кадр
+
+Сводный экран `sliders_all_set` после ряда по версиям.
+
+---
+
+*Блоки «Контакты» и футер на странице кейса совпадают с главной — см. `texts/main.md`.*
diff --git a/texts/cases/orc-automation-panel.md b/texts/cases/orc-automation-panel.md
new file mode 100644
index 0000000..3226ece
--- /dev/null
+++ b/texts/cases/orc-automation-panel.md
@@ -0,0 +1,22 @@
+# Веб-панель для оркестрации автоматизаций
+
+- **Источник:** `src/pages/cases/orc-automation-panel.html` (сборка → `public/cases/orc-automation-panel.html`)
+- **Ассеты:** `public/assets/orc-primo-rpa/`
+- **meta description:** Кейс: редизайн веб-панели оркестратора Primo RPA — кураторство дизайна, внедрение Ant Design и Storybook, синхронизация токенов с Figma.
+
+## Карточка портфолио
+
+**Заголовок:** Веб-панель для оркестрации автоматизаций  
+**Теги:** UX/UI, Web App  
+**Кратко:** Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов.
+
+## Структура кейса
+
+1. **Контекст** — роль оркестратора, состояние интерфейса до редизайна
+2. **Роль и подход** — кураторство, найм Елизаветы (150+ заявок), онбординг 2–3 мес, планирование с разработкой
+3. **Технический стек и инструменты** — Ant Design (последняя версия, Theme Designer, токены), Storybook
+4. **Дизайн-система и синхронизация** — синхронизация токенов Ant Design ↔ Figma, компоненты Figma с нуля, плагины Storybook
+5. **Рабочая среда дизайнера** — локальный Storybook + Git, JSX-описания, иконки с фильтрацией/сортировкой, обновление без разработчика
+6. **UX-улучшения** — предложения Елизаветы, внедрённые и отложенные
+7. **Список проектов** — было / стало (`projects--table-old`, `projects--table-new`)
+8. **Результаты и рефлексия** — отзывы клиентов, передача проекта, появление AI-инструментов (Claude Design), итоговая оценка
diff --git a/texts/cases/task-tracker.md b/texts/cases/task-tracker.md
new file mode 100644
index 0000000..4c7b357
--- /dev/null
+++ b/texts/cases/task-tracker.md
@@ -0,0 +1,172 @@
+# Таск-трекер для внутренней бек-офис системы
+
+- **Источник:** `public/cases/task-tracker.html`
+- **eyebrow:** Тестовое задание · back-office
+- **meta description:** Интерфейс задач для операционного отдела: вкладки, фильтры, виды отображения, прототипы Figma и сценарии исследований.
+
+---
+
+**Заметка по путям к медиа:** ниже пути от корня сгенерированного сайта (как в `public/`), папка `assets/task-tracker/` (картинки и видео вперемешку).
+
+## Задание
+
+Реализовать интерфейс для планирования и распределения задач между сотрудниками операционного отдела, работающими в некой бек-офис системе. Существует большое количество разноплановых задач, которые можно сгруппировать: Тип-1, Тип-2, Тип-3, Тип-4, Тип-5, Тип-6, Тип-7. У каждой задачи есть свой, выставляемый автоматически, приоритет. Пользователю доступны только задачи из определенных категорий.
+
+Нужно реализовать:
+
+- **Общий экран:**
+  - где пользователь может посмотреть все открытые общие задачи и взять какие-то себе.
+  - персональный ToDo лист, где отображаются как взятые вручную задачи, так и автоматически назначенные.
+  - у взятой задачи есть возможность передать ее другому сотруднику или вернуть в общий список.
+- **Экран**, где можно посмотреть, что у кого в работе.
+
+## Введение
+
+Так как у меня лично есть обширный опыт работы с таск-трекерами, то я опираюсь на свой опыт и опыт моих коллег с учётом требований задания.
+
+## Референсы
+
+Референсы
+
+- Таск-трекеры (Trello, Monday, YouTrack и др.)
+- Сервисы для визуальной работы с базами данных (Notion, Airtable и др.)
+
+## Решение
+
+### Скринкаст
+
+(Видео: `assets/task-tracker/full_preview.webm`)
+
+- **Прототип Figma (интерактив):** [STENN (Factoring) — proto](https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN-(Factoring)?page-id=0%3A1&node-id=20%3A1291&viewport=-5744%2C876%2C1.35&scaling=contain&starting-point-node-id=20%3A1291)  
+Превью: `assets/task-tracker/tab_all-tasks.webp`  
+Подпись: Интерактивный сценарий по задачам и представлениям
+
+> **Примечание:** Предполагается, что сотрудник не может создавать задачи, но может их просматривать и частично редактировать, поэтому администратор или менеджер настраивает, какие задачи будут доступны сотруднику.
+
+### Вкладки (Tabs)
+
+На вкладке **All tasks** сотрудник может ознакомиться со всеми доступными задачами.
+
+All tasks
+
+На вкладке **My tasks** отображаются только те задачи, что закреплены за текущим сотрудником. Группировка идёт по статусам задач (статус в карточке задачи скрыт).
+
+My tasks
+
+На вкладке **Task by assign** отображены все задачи c разбивкой по исполнителю.
+
+Tasks by assign
+
+В правой части имеются опции для текущей вкладки.
+
+Опции страницы
+
+Все изменения сохраняются после ухода с вкладки и после закрытия всей страницы **Tasks**. Эти настройки индивидуальны и каждый сотрудник может настроить страницу как ему удобно.
+
+- **Group** — позволяет создать дополнительную группировку по свойству таски (категория, приоритет, исполнитель, статус, дата создания, дата изменения).
+- **View** — позволяет изменить отображение текущих задач на другой вид: доска, список, таблица.
+- **Filter** — позволяет скрывать задачи по свойствам.
+- **Sort** — позволяет определять порядок отображения задач по свойствам. Если включена сортировка по статусу High, Medium, Low то можно выбрать либо по алфавиту, либо в обратном порядке, а также можно создать свой порядок. С датами и цифрами работает принцип по возрастанию/убыванию.
+- **Search on page** — позволяет отобразить только те задачи, в названии или описании которых есть поисковое слово или фраза. (Можно улучшить функционал поиска, добавив поисковые операторы, если исследования докажут эту необходимость)
+
+На странице работает постепенная подгрузка задач. По мере скрола вниз, будут подгружаться новые задачи. Кол-во задач указывается в заголовках, это может быть полезно, чтобы оценить как далеко надо скролить, чтобы все посмотреть. Задач может быть очень много и тогда возможно имеет смысл добавить ещё и переход по страницам.
+
+### Варианты отображения (Views)
+
+Разные виды отображения одних и тех же задач могут быть полезны для разных контекстов использования страницы **Tasks** и также в угоду личным предпочтениям сотрудника, что повышает его эффективность. Сотрудник, которого не раздражает интерфейс работает продуктивнее и приносит больше пользы.
+
+Меню видов
+
+> **Идея:** После смены вида также меняется иконка у опции **View**.
+
+Вид **Board** позволяет удобнее работать с функцией Drag&Drop (см. ниже). Также визуально легче определить кол-во задач в категории, подразумеваю что это может быть полезно. В случае использования группировки задач по статусам выполнения, перемещение карточек слева направо создаёт естественное горизонтальное течение задач из точки А в точку Б.
+
+Board
+
+Вид **List** позволяет увидеть больше информации на меньшей площади экрана. При этом этот вид визуально и функционально легче табличного вида, а значит меньше когнитивной нагрузки на пользователя. Также здесь все заголовки задач начинаются в крайнем левом положении, поэтому становится легко *пробежаться глазами* по списку.
+
+List
+
+Вид **Table** позволяет сразу же работать со всеми полями задачи, без раскрытия её в модальном окне или отдельной странице. Таблица подразумевает пользовательскую настройку ширины и порядка столбцов, что может быть удобно в некоторых кейсах использования.
+
+Table
+
+> **Идея:** Секции можно сворачивать, чтобы уместить на экране только нужный объём контента. (Может даже имеет смысл сохранять положение свёрнуто/развёрнуто после переключения вида, вкладки и перезагрузки страницы.)
+
+(Видео: `assets/task-tracker/expand-collapse_group.webm`)
+
+- **Прототип Figma (виды):** [STENN (Task-Tracker) — Board, List, Table](https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN-(Task-Tracker)?page-id=0%3A1&node-id=39%3A700&viewport=-1875%2C-125%2C0.55&scaling=min-zoom&starting-point-node-id=20%3A1291&hide-ui=1)
+
+### Drag&Drop
+
+Во всех видах можно перетаскивать элементы (карточки/элементы списка/строки и столбцы таблицы). Это способствует более продуктивной работе и выглядит естественным для пользователя. Например, если требуется раскидать задачи между сотрудниками (для админа или менеджера), поменять статус для нескольких задач разом или в короткий отрезок времени.
+
+**Board view** — видео: `assets/task-tracker/drag-drop-item_board-view.webm`  
+[Figma: Drag&Drop, Board](https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN-Task-Tracker?node-id=108%3A970&viewport=2248%2C341%2C0.33&scaling=contain&starting-point-node-id=108%3A1968&show-proto-sidebar=1)
+
+**List view** — видео: `assets/task-tracker/drag-drop-item_list-view.webm`  
+[Figma: Drag&Drop, List](https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN-Task-Tracker?node-id=108%3A970&viewport=2248%2C341%2C0.33&scaling=contain&starting-point-node-id=108%3A2607&show-proto-sidebar=1)
+
+**Продвинутый интерактивный прототип в ProtoPie**
+
+Схематичное представление того как работает Drag&Drop. Такой прототип помогает дизайнеру лучше понять какие нюансы нужно учесть в юзерфлоу, а также и при подготовке спецификации для разработчика. Также попробовав данный прототип можно прийти к тому, что функционал должен работать совсем иначе и переделать его сразу. Это экономит общее время разработки.
+
+(Видео: `assets/task-tracker/drag-drop-action_example.webm`)
+
+- [Прототип ProtoPie Cloud](https://cloud.protopie.io/p/e7a45bd3f2?touchHint=false&ui=false&scaleToFit=false&cursorType=arrow&mockup=false&bgColor=%23F5F5F5&playSpeed=1&playerAppPopup=true)
+
+В прототипе можно перемещать только голубую карточку и не все положения работают корректно. Можно посмотреть запись, которая доступна на той же странице прототипа.
+
+## Стиль
+
+Визуальный стиль может быть любым, не меняя самого *каркаса.* Например, чуть более красочным и с более выразительными шрифтами.
+
+**Светлая цветная тема**
+
+Светлая цветная тема
+
+- [Фрейм в Figma — светлая цветная тема](https://www.figma.com/file/aFvwvTZuksD0JTo6yFXyUz/STENN-(Task-Tracker)?node-id=174%3A5703)
+
+**Нейтральная тёмная тема**
+
+Нейтральная тёмная тема
+
+- [Фрейм в Figma — нейтральная тёмная тема](https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN--Task-Tracker-?node-id=135-5400&t=BzGQOTE0ty7u2E50-1)
+
+## Исследования
+
+На этапе прототипов Figma можно провести интервью с несколькими сотрудниками, например 5 человек. Предварительно в прототип нужно добавить реальные задачи из текущей системы, порядка 20 должно хватить. Далее можно созвониться по видеосвязи с шэрингом экрана респондента или встретиться лично и задать несколько заданий и вопросов. Во время сессии респондент может тыкать в прототип, но если что-то не сработает интервьюер может зафиксировать попытку и объяснить, что этот функционал пока не работает, а также поинтересоваться что респондент ожидает увидеть дальше.
+
+### Задания
+
+1. Найти свои актуальные задачи со страницы **Tasks** вкладки **All tasks**
+2. Назначить себе задачи, чтобы взять в работу
+3. Найти задачу про что-то конкретное (интервьюер приводит пример), которую он уже выполнил ранее
+4. Показать задачи, которые относятся только к определённой категории и должны быть сделаны до конца недели
+5. Попросить поменять приоритет у нескольких задач одновременно
+6. Оценить визуальную привлекательность интерфейса по шкале от 1 до 10
+7. Оценить общее впечатление от предложенного концепта по шкале от 1 до 10
+8. Предложить ещё функции, которые были бы полезны
+
+### Аналитика
+
+Для оценки актуальности реализованного функционала необходимо собирать следующие показатели.
+
+- Кол-во просмотров страницы **Tasks** `page_views_tasks` с разбиением:
+  - по вкладкам: All tasks `all_tasks_tab`, My tasks `my_tasks_tab`, Tasks by assign `tasks_by_assign`
+  - по ролям: Admin `admin`, Manager `manager`, User `user`
+  - по попыткам поиска: Search Used `search used`
+- Кол-во включённых пользовательских настроек **Custom Settings** `custom_settings` (по вкладкам, ролям, типам: Group `group`, Filter `filter`, Sort `sort`)
+- Кол-во включенных видов **View Used** `view_used` (по вкладкам и ролям)
+
+Далее в течение полугода (может и раньше, в зависимости от активности пользователей) можно будет увидеть результат и провести исследование (в виде интервью) по функциям, которые используются реже всего и тем на которые есть жалобы, чтобы получить качественные данные и составить полную картину происходящего.
+
+## Дополнительные детали
+
+При создании мокапов в Figma были использованы: возможности автолэаутов; интерактивные компоненты, плагины ([Iconify](https://www.figma.com/community/plugin/735098390272716381/Iconify), [Fitter](https://www.figma.com/community/plugin/917796239623005893/Fitter), [Protofly](https://www.figma.com/community/plugin/1021879782774011952), [Shadow Maker](https://www.figma.com/community/plugin/889676455045507628/Shadow-Maker), [Dark Side](https://www.figma.com/community/plugin/986289377230504703) и др.), файл Community ([+40 Types of Cursor](https://www.figma.com/community/file/831142089959745518)). Слои названы и организованы для более удобной работы где-то на 60%. Используется сетка 8pt + есть размеры 2pt, 4pt. Имеются цветовые стили для светлой и тёмной темы. Присутствует адаптивность под изменяющиеся размеры окна (мобильной версии нет).
+
+- [Исходный файл в Figma — STENN (Task-Tracker)](https://www.figma.com/file/aFvwvTZuksD0JTo6yFXyUz/STENN-(Task-Tracker))
+
+---
+
+*Блоки «Контакты» и футер на странице кейса совпадают с главной — см. `texts/main.md`.*
\ No newline at end of file
diff --git a/texts/cases/template-elements-demo.md b/texts/cases/template-elements-demo.md
new file mode 100644
index 0000000..6d02075
--- /dev/null
+++ b/texts/cases/template-elements-demo.md
@@ -0,0 +1,73 @@
+# Пример кейса: демо элементов
+
+- **Источник (разметка):** `src/pages/cases/template-elements-demo.html` → после сборки `public/cases/template-elements-demo.html`
+- **eyebrow:** Демо · template
+- **meta description:** Демо-страница кейса со всеми разработанными элементами: карточки ссылок и медиа-блоки.
+- **Подзаголовок (h1 sub):** Рыба-текст и блоки для быстрой сборки лонгрида
+
+*Источник шаблона (устаревшая ссылка в HTML): можно вести на этот файл — `texts/cases/template-elements-demo.md`.*
+
+## Контекст
+
+Этот раздел показывает пример рыбы для вступления. Здесь можно коротко описать продукт, аудиторию и ограничения проекта. Текст нейтральный: цель — быстро набросать структуру и проверить визуальный ритм страницы.
+
+## Задача
+
+Нужно собрать демонстрационный лонгрид с основными UI-элементами: карточками ссылок, медиа-блоками и примерами оформления контента. Дополнительно важно проверить, как блоки ведут себя на узких и широких экранах.
+
+## Решение
+
+Ниже собраны готовые примеры, которые можно копировать в реальные кейсы.
+
+### Карточки ссылок
+
+- **С превью** — [www.examples.com](https://www.examples.com/)  
+Короткая подпись: что пользователь увидит по ссылке. Превью: `assets/template-elements-demo/wallpaper-1.jpg`
+- **С favicon** — [www.examples.com/docs](https://www.examples.com/docs)  
+Вариант для более лёгких ссылок без скриншота.
+
+### Картинка: 50% от оригинала (без превью)
+
+`assets/template-elements-demo/hello.gif` — демо GIF в натуральном размере, по центру.
+
+*Подпись к figure:* Изображение в уменьшенном натуральном размере, по центру.
+
+### Картинка: по ширине контента (с превью)
+
+`assets/template-elements-demo/wallpaper-1.jpg` — клик открывает viewer (в UI).
+
+*Подпись:* Изображение по ширине контента. Клик открывает viewer.
+
+### Картинка: чуть шире контента (с превью)
+
+Тот же ассет — изображение немного выходит за пределы контентной колонки.
+
+### Длинный скрин: свёрнутая высота + развернуть
+
+Разметка с `data-case-tall-media` и `data-case-tall-width` (`content` / `wide`): туман только в свёрнутом виде; кнопки под картинкой; после раскрытия туман скрывается. Исходник длинного кадра: `public/assets/template-elements-demo/img-long.png` → WebP командой `npm run optimize-images -- public/assets/template-elements-demo`. См. `public/assets/README.md`.
+
+### Галерея: сетка по ширине контента
+
+Семь файлов `assets/template-elements-demo/small-image-1.webp` … `small-image-7.webp` (рядом в той же папке лежат исходные PNG; WebP — `npm run optimize-images -- public/assets/template-elements-demo`). На `figure` задано `--case-gallery-cols: 3` для десктопа; ниже порогов ширины окна число колонок уменьшается (см. `docs/case-page-blocks.md`). Клик по ячейке открывает viewer.
+
+### Галерея: сетка на ширину страницы (wide)
+
+Те же `small-image-*.webp`, класс `case-media-gallery--wide`, `--case-gallery-cols: 2`.
+
+### Callout: важный абзац с эмоджи
+
+> Это пример акцентного callout-блока. Эмоджи вынесен влево и пульсирует, чтобы визуально усилить важную мысль. (в HTML: эмоджи 📌)
+
+### Видео: карточка с тенью
+
+`assets/template-elements-demo/video-1.webm` — пример видео-карточки в стиле кейса.
+
+*Подпись:* Пример видео-карточки в стиле кейса.
+
+## Результат
+
+Шаблон готов для копирования в новый кейс: остаётся заменить рыбу на фактический текст, подставить реальные ссылки и медиа проекта.
+
+---
+
+*Новые картинки для демо и кейсов клади в `public/assets/…` (см. `public/assets/README.md`).*
\ No newline at end of file
diff --git a/texts/content-edits/.gitkeep b/texts/content-edits/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/texts/content-edits/README.md b/texts/content-edits/README.md
new file mode 100644
index 0000000..ce89dd3
--- /dev/null
+++ b/texts/content-edits/README.md
@@ -0,0 +1,57 @@
+# Правки контента (content-edits)
+
+Один файл очереди для агента и режима правок на `http://localhost:4175` (`npm run serve`).
+
+## Файл
+
+**`texts/content-edits/pending.json`** — все страницы, все правки.
+
+Старые файлы `cases--<slug>.json` при первом запросе к API переносятся в `pending.json` и удаляются.
+
+## Формат (version 2)
+
+```json
+{
+  "version": 2,
+  "updatedAt": "2026-05-16T12:00:00.000Z",
+  "items": [
+    {
+      "n": 1,
+      "page": "cases/ai-platform-primo-rpa.html",
+      "instruction": "Перенести «Вид редактора…» ниже «Добавил режим…»",
+      "target": {
+        "selector": "main#case-main #patterns > p.section__prose:nth-of-type(1)",
+        "anchorId": "patterns",
+        "tag": "p",
+        "content": "полный текст основного блока (до ~2000 символов)",
+        "snippet": "первые ~80 символов"
+      },
+      "refs": [
+        {
+          "label": "Вид редактора в режиме «Во весь экран»",
+          "target": {
+            "selector": "main#case-main #zadachi > figure.case-media-gallery:nth-of-type(2)",
+            "anchorId": "zadachi",
+            "tag": "figure",
+            "content": "первые ~200 символов",
+            "snippet": "первые ~80 символов"
+          }
+        }
+      ]
+    }
+  ]
+}
+```
+
+- **`page`** — путь относительно `public/` (как в адресной строке без ведущего `/`).
+- **`n`** — порядок apply по всему файлу (на странице в FAB-списке снова 1, 2, 3… только для текущей страницы).
+- **`target`** — основной блок правки (обычный клик). Для **общей правки страницы** без блока: `"scope": "page"`.
+- **`refs`** — дополнительные блоки (Shift+клик в инструкции). `label` (~50 символов) вставляется в текст как `«…»`; `target.content` у ref короче (~200), чем у основного `target`.
+
+## Apply
+
+В Cursor: **«примени правки»** / **`/apply-edits`** — агент читает `pending.json`, правит `src/pages/`, `humanizer-ru`, `npm run build:pages`.
+
+После apply **`items` не трогаем** — очередь для проверки; удаление пунктов вручную в dock или повторный apply с уточнённой instruction.
+
+См. `.cursor/rules/content-edit-apply.mdc`.
diff --git a/texts/content-edits/pending.json b/texts/content-edits/pending.json
new file mode 100644
index 0000000..d3bede6
--- /dev/null
+++ b/texts/content-edits/pending.json
@@ -0,0 +1,21 @@
+{
+  "version": 2,
+  "updatedAt": "2026-06-06T11:59:34.336Z",
+  "items": [
+    {
+      "instruction": "замени: без ломки базовых сценариев\nна: без больших переделок",
+      "target": {
+        "scope": "page",
+        "selector": "main#case-main",
+        "anchorId": "case-main",
+        "tag": "main",
+        "content": "Общая правка страницы",
+        "snippet": "Общая правка страницы"
+      },
+      "refs": [],
+      "n": 1,
+      "page": "cases/ai-platform-primo-rpa.html"
+    }
+  ],
+  "lastAppliedAt": "2026-06-06T11:54:50.470Z"
+}
diff --git a/texts/cookie-policy.md b/texts/cookie-policy.md
new file mode 100644
index 0000000..01c16c9
--- /dev/null
+++ b/texts/cookie-policy.md
@@ -0,0 +1,42 @@
+# Политика использования файлов cookie и локального хранилища
+
+**Дата последнего обновления:** 9 мая 2026 г.
+
+Настоящий документ описывает, как на личном сайте-портфолио Николая Мамадаева (далее — «сайт») используются технологии хранения данных в браузере.
+
+## Кто отвечает за сайт
+
+Оператором сайта является **Николай Мамадаев**. По вопросам обработки данных используйте контакты в блоке «Контакты» на главной странице сайта (Telegram, ВКонтакте, Яндекс и почта через копирование адреса кнопкой).
+
+## Используются ли HTTP cookie
+
+В текущей версии сайта **сторонние рекламные или аналитические HTTP cookie не подключаются**. В разметке страниц нет счётчиков аналитики (например, Яндекс.Метрики или Google Analytics), которые обычно устанавливают собственные cookie.
+
+При размещении сайта на хостинге или за прокси технические записи (например, журналы сервера с IP-адресом и временем запроса) могут обрабатываться хостинг-провайдером по его документам — это не настраивается кодом данного сайта.
+
+## Local Storage и аналогичные технологии браузера
+
+Для удобства работы сайт сохраняет на вашем устройстве небольшие объёмы данных через **механизм localStorage** в браузере (это не HTTP cookie, но по смыслу близко к ним и также относится к хранению на стороне клиента).
+
+Используются следующие ключи:
+
+| Ключ | Назначение |
+|------|------------|
+| `siteThemeV1` | Настройки оформления: тема (светлая/тёмная/системная), оттенок, скругления, шрифт, фон и связанные параметры панели темы. |
+| `siteCookieConsentV1` | Значение `accepted`, если вы нажали «Принять» в уведомлении о cookie; после этого баннер скрывается. |
+
+Эти данные **не передаются на сервер сайта** автоматически: они остаются только в вашем браузере.
+
+## Срок хранения
+
+Данные в localStorage сохраняются до тех пор, пока вы **не удалите их вручную** (очистка данных сайта / полное удаление данных браузера) или пока браузер не сбросит хранилище по своим правилам.
+
+## Согласие и отказ
+
+Нажимая «Принять» в баннере, вы подтверждаете, что ознакомились с настоящей политикой. Если вы не нажимаете «Принять», баннер остаётся доступным; функциональность сайта при этом по возможности сохраняется, но запись о согласии не создаётся.
+
+Вы можете в любой момент **очистить localStorage** для этого сайта в настройках браузера — при этом сбросятся сохранённые тема и отметка о принятии уведомления, и баннер может снова отобразиться.
+
+## Изменения
+
+Текст политики может обновляться при изменении технологий на сайте. Актуальная версия публикуется на странице «Политика cookie» по адресу, указанному на сайте.
diff --git a/texts/main.md b/texts/main.md
new file mode 100644
index 0000000..0d523f9
--- /dev/null
+++ b/texts/main.md
@@ -0,0 +1,214 @@
+# Главная страница (источник: `public/index.html`)
+
+## Meta
+
+- **title:** Николай Мамадаев — продуктовый дизайнер
+- **description:** Продуктовый дизайнер и вайбкодер с опытом более 10 лет. Проектирую цифровые продукты, интерфейсы и дизайн‑системы, совмещая UX, no-code и код для аккуратных рабочих решений.
+
+## Шапка: навигация
+
+- Навыки → `#skills`
+- Опыт работы → `#experience`
+- Портфолио → `#projects`
+- Мини-проекты → `#mini-projects`
+- Контакты → `#contact`
+
+(Подменю «Ещё разделы» и панель темы — UI, без копирования сюда.)
+
+## Hero
+
+- **eyebrow:** Николай Мамадаев
+- **h1:** Создаю интерфейсы для продуктов
+- **ротатор (подзаголовок):** web, mobile, desktop (смена слов в UI)
+- **теги:** UX/UI · 10+ лет опыта · Продуктовое мышление · Дизайн‑системы · Менторство и наставничество · AI инструменты и вайбкодинг
+- **кнопки:** Написать мне (`#contact`) · Смотреть портфолио (`#projects`)
+
+(Фото: `assets/index/ava-bg-1.webp`, `assets/index/me-transparentBG-1.webp`.)
+
+## Навыки (`#skills`)
+
+**Заголовок секции:** Навыки
+
+**Вступление (чат, два сообщения):**
+
+1. В моём опыте есть и запуск первых версий продукта с нуля, и развитие уже зрелых решений, где важно не сломать привычный сценарий, а аккуратно улучшить его.
+2. Ниже я собрал примеры задач от бизнеса и то, как я их решал
+
+### Продуктовый подход и логика в интерфейсах
+
+
+| Задача                                                                              | Как решаю                                                                                                                                                                                                                                                                                                         |
+| ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Сделать сложный продукт понятнее, чтобы пользователи доходили до ключевых действий. | Анализирую путь пользователя и убираю шаги, которые не помогают ему продвинуться к цели. Проектирую флоу так, чтобы в каждом шаге было понятно, что происходит и что делать дальше. Делаю так, чтобы даже сложный функционал выглядел естественно, использовал знакомые паттерны и привычные элементы интерфейса. |
+| Улучшить первые шаги в продукте и подвести человека к первой ценности.              | Убираю всё, что отвлекает от первого результата: лишние шаги, необязательные поля, второстепенные детали. Заменяю длинные объяснения небольшими подсказками в момент, когда они действительно нужны без длинных туров и сложных инструкций.                                                                       |
+| Снизить нагрузку на техподдержку за счёт интерфейса.                                | Собираю частые обращения и на их основе упрощаю сценарий и интерфейс так, чтобы человек мог решить вопрос самостоятельно.                                                                                                                                                                                         |
+| Связать интерфейс с целями продукта, а не только с набором фич.                     | Начинаю с того, какую задачу бизнеса и пользователя мы решаем, и уже под это собираю сценарии и интерфейс. Перевожу проблемы в сценариях в понятные гипотезы и помогаю продакту выбрать, что действительно даёт эффект.                                                                                           |
+
+
+### Дизайн‑системы и консистентность
+
+
+| Задача                                                                                | Как решаю                                                                                                                                                                                                                                                                                                                                        |
+| ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Привести несколько продуктов или модулей к единому виду и логике.                     | Собираю общий UI‑kit и базовые принципы, которые можно использовать во всех продуктах. Выделяю повторяющиеся паттерны и свожу их к одной системе, вместо десятка похожих решений. Перевожу разрозненные решения в общую дизайн‑систему, чтобы ей было удобно пользоваться и дизайнерам, и разработчикам.                                         |
+| Обновить внешний вид продукта, чтобы он не выглядел устаревшим на фоне конкурентов.   | Начинаю с часто используемых экранов и элементов, чтобы эффект был заметен и для пользователей, и для бизнеса. Подстраиваю этапы обновления под текущую дорожную карту и работу разработки, чтобы не ломать привычные сценарии и релизы. Настраиваю базовый стиль: типографика, цвет, отступы — чтобы интерфейс выглядел аккуратно и современно. |
+| Навести порядок в интерфейсах, которые долго росли кусками.                           | Объединяю похожие решения в общие компоненты и паттерны, убираю дубли и случайные отличия.Слежу за тем, чтобы интерфейс выглядел аккуратно и современно: читаемая типографика, иерархия, акценты без визуального шума.                                                                                                                          |
+| Сделать интерфейс так, чтобы его можно было спокойно расширять и не городить костыли. | Формулирую простые дизайн‑принципы и правила использования компонентов. Настраиваю структуру дизайн‑системы так, чтобы её было реально поддерживать и дополнять новыми паттернами.                                                                                                                                                               |
+
+
+### Исследования, метрики и аналитика
+
+
+| Задача                                                                                 | Как решаю                                                                                                                                                                                                                                      |
+| -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Получить реальную картину поведения пользователей, а не полагаться на догадки команды. | Общаюсь с пользователями: смотрю, как они решают свои задачи в продукте и что делают на каждом шаге. Перевожу выводы из исследований в конкретные изменения в интерфейсе и сценариях.                                                          |
+| Убедиться, что ключевые сценарии работают, прежде чем выкатывать их в прод.            | Готовлю простые сценарии юзабилити‑тестов под реальные задачи пользователей.                                                                                                                                                                   |
+| Понимать, как изменения в интерфейсе влияют на ключевые метрики продукта.              | Помогаю описать ключевые события и воронки, которые отражают реальные шаги пользователя. Смотрю на метрики вместе с реальными сценариями использования и предлагаю, что в интерфейсе поменять, чтобы людям было проще и продукт работал лучше. |
+
+
+### Развитие команды дизайнеров и наставничество
+
+
+| Задача                                                                                                | Как решаю                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Выстроить понятные процессы внутри дизайн-команды.                                                    | Ввожу регулярные дизайн‑ревью с разбором реализованных задач, где каждый может получить полезную экологичную обратную связь. Договариваюсь о шаблоне постановки задачи и прозрачных критериях приёмки, чтобы всем было ясно, когда задачу считать действительно законченой. Настраиваю порядок работ, который позволяет выполнять как плановые задачи, так и "горящие".                                                                                                                                 |
+| Сделать так, чтобы дизайн, продукт и разработка работали как одна команда, а не три отдельных лагеря. | Беру на себя роль связующего: обсуждаю сценарии с продактом, ограничения — с разработкой и фиксирую решения в интерфейсе.                                                                                                                                                                                                                                                                                                                                                                               |
+| Нанять и вырастить продуктовых дизайнеров для работы над сложным продуктом.                           | Помогаю сформировать необходимые требования к кандидату. Участвую в отборе: проверяю, как кандидат работает со сценариями, ограничениями и сложными кейсами. Выстраиваиваю интервью так, чтобы можно было оценить ход мысли и используемые инструменты. Настраиваю онбординг через реальные задачи и регулярные разборы, чтобы дизайнер быстрее разобрался в продукте и начал приносить пользу. Провожу регулярные созвоны один на один с дизайнерами: разбираем решения, точки роста и следующие шаги. |
+
+
+## Опыт работы (`#experience`)
+
+Кнопка «Показать все» раскрывает скрытые карточки (первые три видны сразу).
+
+1. **Primo RPA** — [primo-rpa.com](https://primo-rpa.com/)
+  Февраль 2023 — Ноябрь 2025 · 2 года 10 месяцев  
+   Платформа для автоматизации бизнес‑процессов с комплексом продуктов: студией для создания роботов, оркестратором для их управления, Idea Hub для отбора процессов и AI‑серверами для работы с моделями и распознаванием данных.
+2. **Icons8 (Lunacy)** — [icons8.com/lunacy](https://icons8.com/lunacy)
+  Июль 2022 — Январь 2023 · 7 месяцев  
+   Векторный редактор для UI/UX и веб‑дизайна с поддержкой Sketch‑файлов, встроенной библиотекой иконок/фото/иллюстраций и набором AI‑инструментов для ускорения рутинных задач.
+3. **MANU Video Game Maker** — [manu.co](https://manu.co/)
+  Январь 2019 — Декабрь 2021 · 3 года  
+   No-code/low-code платформа для создания 2D и 3D игр без необходимости писать код.
+4. **AEGEES** — [aegees.com](https://aegees.com/)
+  Октябрь 2017 — Декабрь 2018 · 1 год 3 месяца  
+   Защищённый мессенджер с end‑to‑end шифрованием и отсутствием хранения сообщений на серверах, сфокусированный на максимальной приватности пользователей.
+5. **Orion Innovation (ex MERA)** — [orioninnovation.com](https://www.orioninnovation.com/)
+  Июль 2016 — Октябрь 2017 · 1 год 4 месяца  
+   Международная технологическая компания, специализирующаяся на заказной разработке и инженерных решениях для крупных корпоративных клиентов.
+6. **SpaceshipApps** — [spaceshipapps.ru](https://spaceshipapps.ru/)
+  Июнь 2015 — Июнь 2016 · 1 год 1 месяц  
+   Студия разработки мобильных и веб‑приложений под ключ для бизнеса и предпринимателей.
+
+## Портфолио — карточки (`#projects`)
+
+1. **Мобильное приложение для сети клиник**
+  Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом пользовательском пути, понятной навигации и быстром доступе к нужным действиям.  
+   **Теги:** UX/UI, Mobile App  
+   **Ссылка:** [Подробнее (Notion)](https://mamadaevv.notion.site/7afdbacd178347229d0d73df47428f81)
+2. **Игровой движок MANU**
+  Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и проработка сотен сложных пользовательских сценариев.  
+   **Теги:** Product Design, Desktop App  
+   **Ссылка:** [Подробнее (Notion)](https://mamadaevv.notion.site/7afdbacd178347229d0d73df47428f81)
+3. **Веб-панель для оркестрации автоматизаций**
+  Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под продакшен.  
+   **Теги:** UX/UI, Web App  
+   **Ссылка на сайт:** [Кейс](cases/orc-automation-panel.html) — полный текст: `texts/cases/orc-automation-panel.md`
+4. **Платформа для работы с AI**
+  Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями автоматизации и Smart OCR.  
+   **Теги:** UX/UI, Web‑продукт, Data‑heavy интерфейсы, Figma, Research  
+   **Ссылка на сайт:** [Кейс](cases/ai-platform-primo-rpa.html) — полный текст: `texts/cases/ai-platform-primo-rpa.md`
+5. **Концепт сервиса распределения задач**
+  Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность процессов и удобство командной работы.  
+   **Теги:** UX/UI, Analytics, Web App  
+   **Ссылка:** [Подробнее (Notion)](https://mamadaevv.notion.site/7afdbacd178347229d0d73df47428f81)
+6. **Графический редактор Lunacy**
+  Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и интерфейсной логики.  
+   **Теги:** UX/UI, Desktop App  
+   **Ссылка на сайт:** [Кейс](cases/lunacy.html) — полный текст: `texts/cases/lunacy.md`
+7. **Таск-трекер для бек-офис системы**
+  Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по исполнителям; вкладки, фильтры, виды доска / список / таблица, Drag&Drop. Тестовое задание, прототипы в Figma.  
+   **Теги:** Product Design, Web App  
+   **Ссылка на сайт:** [Кейс](cases/task-tracker.html) — полный текст: `texts/cases/task-tracker.md`
+
+## Мини-проекты (`#mini-projects`)
+
+**Заголовок секции:** Мини-проекты
+
+Сетка карточек: `public/index.html`, превью по умолчанию `assets/shared/placeholder.webp`. Максимальная ширина карточки в сетке — 3 «клетки» (`data-mp-cells`). Подробности разметки — `docs/mini-projects-cards.md`.
+
+**Вступление (чат, два сообщения):**
+
+1. **Николай М:** Параллельно большим кейсам из портфолио я собираю маленькие штуки для себя: утилиты, странички, эксперименты с UI и кодом. Этот блок — чтобы они не терялись в заметках и архивах.
+2. Карточки можно задавать разной ширины и шаблона; сетка сама их упакует. Часть строк по умолчанию свёрнута — остальное открывается кнопкой «Показать все».
+
+Кнопка **«Показать все»** раскрывает карточки, помеченные в разметке как дополнительные (`data-mp-extra`).
+
+### Карточки (видимые в свёрнутом блоке)
+
+1. **Генератор подписей к постам**  
+   **Тип:** скрипт · **Шаблон:** stack, `data-mp-cells="3"` · **Ссылка:** [github.com](https://github.com) (заглушка)  
+   Небольшой скрипт на Python: черновики текстов из ключевых слов и ограничений по длине, без внешних API.
+
+2. **Лендинг для мероприятия**  
+   **Тип:** веб-сайт · **Шаблон:** stack, `data-mp-cells="3"` · **Ссылка:** [example.com](https://example.com) (заглушка)  
+   Статический сайт с расписанием и формой заявки на отдельном сервисе.
+
+3. **Трекер привычек в Notion**  
+   **Тип:** шаблон · **Шаблон:** horizontal, без внешней ссылки, `data-mp-cells="3"`  
+   Связка баз и rollup для недельного обзора — только для личного пользования.
+
+4. **Таймер «помидора»**  
+   **Тип:** приложение · **Шаблон:** stack, `data-mp-cells="2"` · **Ссылка:** [example.com](https://example.com) (заглушка)  
+   Локальный таймер с короткими звуками и блокировкой лишних вкладок в браузере.
+
+5. **Локальный REST‑мок**  
+   **Тип:** утилита · **Шаблон:** compact (только текст), `data-mp-cells="2"` · без ссылки  
+   Поднимает простые эндпоинты из JSON для проверки экранов без бекенда.
+
+6. **Декоративная ячейка**  
+   **Шаблон:** `mp-card--decor`, `data-mp-cells="2"` — визуальная заглушка в сетке, без заголовка и описания.
+
+### Карточки под «Показать все»
+
+7. **Плагин подсветки синтаксиса**  
+   **Тип:** плагин · **Шаблон:** stack, `data-mp-cells="3"` · **Ссылка:** [github.com](https://github.com) (заглушка)  
+   Расширение редактора: подсветка собственного DSL и переход к объявлению по ⌘‑клику.
+
+8. **Тема для редактора**  
+   **Тип:** тема · **Шаблон:** horizontal, `data-mp-cells="3"` · **Ссылка:** [github.com](https://github.com) (заглушка)  
+   Набор цветовых токенов под долгую работу с кодом и заметками.
+
+9. **CLI переименования файлов**  
+   **Тип:** cli · **Шаблон:** stack, `data-mp-cells="3"` · **Ссылка:** [github.com](https://github.com) (заглушка)  
+   Префиксы, нумерация и безопасный dry-run перед записью на диск.
+
+10. **Виджет погоды**  
+    **Тип:** виджет · **Шаблон:** horizontal, `data-mp-cells="2"` · **Ссылка:** [example.com](https://example.com) (заглушка)  
+    Мини‑окно на Electron с почасовым прогнозом и иконками состояния.
+
+11. **Чеклист регресса UI**  
+    **Тип:** документ · **Шаблон:** compact, `data-mp-cells="2"` · без ссылки  
+    Markdown‑список проверок перед релизом мелких правок в интерфейсе.
+
+12. **Сниппеты для DevTools**  
+    **Тип:** расширение · **Шаблон:** compact + ссылка, `data-mp-cells="1"` · **Ссылка:** [github.com](https://github.com) (заглушка)  
+    Заготовки console.log и замеров производительности одним жестом.
+
+13. **Мини‑CRM для себя**  
+    **Тип:** сервис · **Шаблон:** horizontal, `data-mp-cells="3"` · **Ссылка:** [example.com](https://example.com) (заглушка)  
+    Одна таблица контактов, статусы сделок и напоминания в LocalStorage.
+
+## Контакты (`#contact`)
+
+- **Telegram** — [t.me/mamadaevv](https://t.me/mamadaevv) — подпись: Отвечаю быстро
+- **ВКонтакте** — [vk.com/mamadaevv](https://vk.com/mamadaevv) — Удобно для России
+- **Яндекс (чат)** — [приглашение](https://yandex.ru/chat/p/727e71fa-89b5-44a8-90a5-851021631a1c?utm_source=invite) — Да, тут тоже можно
+- **Почта** — копирование в буфер (адрес в JS `data-email-b64`), подпись: Скопировать адрес
+
+## Футер
+
+© 2026 · Дизайн и вёрстка — Николай Мамадаев
+
+## Баннер cookie
+
+Сайт использует cookie для комфортной работы. Подробнее — в политике cookies (ссылка пока `href="#"`). Кнопка: Принять.
\ No newline at end of file
diff --git a/texts/pet-projects/README.md b/texts/pet-projects/README.md
new file mode 100644
index 0000000..887893f
--- /dev/null
+++ b/texts/pet-projects/README.md
@@ -0,0 +1,5 @@
+# Пет- и сайд-проекты
+
+В `public` пока нет отдельных HTML под пет-проекты — тексты сюда добавь, когда появятся страницы или решишь вести материал только в Markdown.
+
+Шаблон нового проекта: `_template.md`.
\ No newline at end of file
diff --git a/texts/pet-projects/_template.md b/texts/pet-projects/_template.md
new file mode 100644
index 0000000..e2b5904
--- /dev/null
+++ b/texts/pet-projects/_template.md
@@ -0,0 +1,13 @@
+---
+
+## slug: project-slug
+
+title: Название пет-проекта
+summary: Краткое описание
+order: 10
+
+## Идея
+
+## Что сделано
+
+## Ссылки
\ No newline at end of file
diff --git a/texts/обязанности.txt b/texts/обязанности.txt
new file mode 100644
index 0000000..1e07c87
--- /dev/null
+++ b/texts/обязанности.txt
@@ -0,0 +1,35 @@
+Задачи
+Совместно с владельцем продукта погружаться в суть задачи: выявлять и формулировать реальные бизнес-метрики и потребности клиентов, переводя их в ясные дизайн-задачи с измеримыми критериями успеха
+Проводить дизайн-исследования: анализировать рынок и аналоги, строить путь клиента, чтобы находить точки роста и вместе с командой формировать обоснованные гипотезы для их решения
+Быстро проверять идеи: создавать интерактивные прототипы для валидации гипотез — от концепций до детализированных сценариев
+Тестировать с реальными пользователями: участвовать в организации и проведении юзабилити-тестов, лично наблюдая за реакцией пользователей, чтобы получать инсайты
+Итеративно улучшать решения: на основе данных тестов и аналитики дорабатывать дизайн, обеспечивая его эффективность и удобство
+Готовить финальный дизайн для разработки: создавать чистые, точные макеты, используя и развивая компоненты масштабной дизайн-системы Банка
+Развивать дизайн-систему: при необходимости — проектировать, создавать и документировать новые компоненты, внося вклад в инструмент, которым пользуются десятки команд
+Работать в комьюнити дизайнеров: проводить дизайн-чек своих макетов и участвовать в ревью работ коллег, поддерживая высокий стандарт качества в команде
+Вести дизайн на этапе разработки: передавать макеты разработчикам, оперативно отвечать на вопросы, чтобы vision продукта была реализована без искажений
+Контролировать результат: проводить дизайн-ревью готовых реализаций, формулировать и приоритизировать замечания для финальной полировки
+Замыкать цикл развития продукта: анализировать метрики и обратную связь после релиза, предлагая и реализуя дальнейшие улучшения
+Влиять на процессы: активно участвовать в оптимизации рабочих процессов внутри дизайн- и продуктовой команд
+
+Опыт работы в веб-дизайне и в проектировании пользовательских интерфейсов не менее 2-х лет;
+Опыт работы в продуктовой команде;
+Свободное владение Figma с использованием инструментов прототипирования;
+Проведение пользовательских исследований, интервью, построение схем сценариев взаимодействия пользователя и системы;
+Проектирование с учётом бизнес-требований, технических ограничений и гайдлайнов;
+Умеете исследовать пользовательские потребности и собирать требования;
+
+Разработка digital-продукта (создание самого продукта, а также его ценности для клиентов);
+Проектирование интерфейсов на основе статистики и метрик в тесном взаимодействии с внутренней командой;
+Отрисовка пользовательского пути в СJM и User Flow, выявление точек роста и внедрение улучшений по нему;
+Анализ решений, построение и проверка гипотез;
+Подготовка макетов для передачи в разработку и контроль качества реализации интерфейсов.
+
+коммерческий опыт работы в сложных продуктах от 3 лет;
+наличие портфолио с реализованными кейсами (интерфейсы и мобильные приложения);
+опыт работы в Figma: работа с UI-библиотеками (компоненты, варианты, стили и пр.), чтение документации, следование гайдам;
+сильный практический уровень в проектировании сложных интерфейсов: таблицы, фильтры, карты, дашборды, многошаговые сценарии;
+умение презентовать свою работу и обосновывать эффективность выбранных решений;
+понимание основ брендинга;
+знание основ композиции, типографики, цвета и визуальной иерархии.
+