diff --git a/.github/workflows/editorconfig.yml b/.github/workflows/editorconfig.yml
index 0ed5d30ede..d47a1766bc 100644
--- a/.github/workflows/editorconfig.yml
+++ b/.github/workflows/editorconfig.yml
@@ -9,12 +9,12 @@ jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
       - id: files
-        uses: Ana06/get-changed-files@v1.2
+        uses: Ana06/get-changed-files@v2.2.0
       - name: Проверка линтером
         run: |
           npm install editorconfig-checker --global
diff --git a/.github/workflows/featured-articles.yml b/.github/workflows/featured-articles.yml
index d72f62d682..ed228eea27 100644
--- a/.github/workflows/featured-articles.yml
+++ b/.github/workflows/featured-articles.yml
@@ -8,12 +8,12 @@ jobs:
   featured-articles:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           token: ${{ secrets.DOKA_BOT_ACCESS_TOKEN }}
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
       - name: Обработка featured-статей
         run: |
           npm install --global gray-matter
diff --git a/.github/workflows/frontmatter-lint.yml b/.github/workflows/frontmatter-lint.yml
index 9cc010268c..7d0f67c255 100644
--- a/.github/workflows/frontmatter-lint.yml
+++ b/.github/workflows/frontmatter-lint.yml
@@ -1,13 +1,9 @@
 name: Frontmatter Lint
 
 on:
-  workflow_run:
-    workflows:
-      - "YaSpeller All"
+  push:
     branches:
       - main
-    types:
-      - completed
 
 jobs:
   frontmatter-lint:
@@ -16,7 +12,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
       - name: Проверка линтером меты в main
         run: |
           echo "Проверка для всех файлов"
diff --git a/.github/workflows/link-checker-all.yml b/.github/workflows/link-checker-all.yml
index c6660a59b3..eecd70f5af 100644
--- a/.github/workflows/link-checker-all.yml
+++ b/.github/workflows/link-checker-all.yml
@@ -8,7 +8,7 @@ jobs:
   link-check:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Проверка ссылок в собранном сайте
         uses: ruzickap/action-my-broken-link-checker@v2.2.5
         with:
diff --git a/.github/workflows/maintainer-helper.yml b/.github/workflows/maintainer-helper.yml
index 8f2ad245e1..6b13cdc5e1 100644
--- a/.github/workflows/maintainer-helper.yml
+++ b/.github/workflows/maintainer-helper.yml
@@ -9,10 +9,10 @@ jobs:
   update-lists:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
       - name: Формирует список меты файлов
         run: |
           echo '{"type": "module","dependencies": {"@octokit/core": "^5.0.0","node-fetch": "^3.3.2"}}' > package.json
diff --git a/.github/workflows/pr-checks.yml b/.github/workflows/pr-checks.yml
index 19cce1241f..ba4b4d76eb 100644
--- a/.github/workflows/pr-checks.yml
+++ b/.github/workflows/pr-checks.yml
@@ -11,7 +11,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
       - id: files
         if: ${{ github.event_name == 'pull_request' }}
         uses: Ana06/get-changed-files@v2.2.0
@@ -37,7 +37,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
       - id: files
         if: ${{ github.event_name == 'pull_request' }}
         uses: Ana06/get-changed-files@v2.2.0
@@ -77,36 +77,3 @@ jobs:
           markdown: true
           serverRoot: "/home/runner/work/content/content"
           linksToSkip: "https?://(localhost|codepen.io)?(:[0-9]+)?/.*"
-  yaspeller:
-    name: Орфография
-    needs:
-      - link-checker
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 16
-      - id: files
-        if: ${{ github.event_name == 'pull_request' }}
-        uses: Ana06/get-changed-files@v2.2.0
-      - name: Проверяет правописание
-        run: |
-          npm i -g yaspeller
-          config=.yaspeller.json
-          file_list=""
-          echo "Устанавливаю утилиту..."
-          for changed_file in ${{ steps.files.outputs.added_modified }}; do
-            if [[ $changed_file == $config ]]; then
-              echo "Проверяются все файлы..."
-              yaspeller --only-errors --file-extensions ".md,.html" *
-              break
-            elif [[ $changed_file =~ \.(md|html)$ ]]; then
-              file_list="${file_list} ${changed_file}"
-              echo "Файл ${changed_file} добавлен в список для проверки."
-            fi
-          done
-          if ! [[ $file_list == "" ]]; then
-            echo "Проверяются файлы из PR..."
-            yaspeller --only-errors ${file_list}
-          fi
diff --git a/.github/workflows/pr-labels.yml b/.github/workflows/pr-labels.yml
index 9e2964a36d..1b4ef1e621 100644
--- a/.github/workflows/pr-labels.yml
+++ b/.github/workflows/pr-labels.yml
@@ -8,7 +8,7 @@ jobs:
     name: Ярлыки
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           ref: ${{ github.event.pull_request.head.sha }}
       - name: Устанавливает необходимые ярлыки
diff --git a/.github/workflows/pr-preview.yml b/.github/workflows/pr-preview.yml
index 0c0fbc57e2..fb9e70d3f5 100644
--- a/.github/workflows/pr-preview.yml
+++ b/.github/workflows/pr-preview.yml
@@ -30,22 +30,22 @@ jobs:
       PATH_TO_CONTENT: ./content
     steps:
       - name: Загрузка platform
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           repository: doka-guide/platform
       - name: Загрузка контента
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           ref: ${{ github.event.pull_request.head.sha }}
           path: content
       - name: Загрузка кеша
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           repository: doka-guide/cache
           path: cache
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
       - name: Кэширование модулей
         uses: actions/cache@v3
         env:
diff --git a/.github/workflows/product-deploy.yml b/.github/workflows/product-deploy.yml
index d025196582..c0a2d9241a 100644
--- a/.github/workflows/product-deploy.yml
+++ b/.github/workflows/product-deploy.yml
@@ -17,18 +17,23 @@ jobs:
       PATH_TO_CONTENT: ./content
     steps:
       - name: Загрузка platform
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           repository: doka-guide/platform
       - name: Загрузка контента
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           path: content
-      - uses: actions/setup-node@v2
+      - name: Загрузка кеша
+        uses: actions/checkout@v4
         with:
-          node-version: 16
+          repository: doka-guide/cache
+          path: cache
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
       - name: Кэширование модулей
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         env:
           cache-name: cache-node-modules
         with:
@@ -49,6 +54,8 @@ jobs:
           ssh -o StrictHostKeyChecking=no deploy@dev.doka.guide
       - name: Установка модулей
         run: npm ci
+      - name: Копирование кеша
+        run: cp -r ./cache/.cache ./
       - name: Сборка сайта
         run: |
           cp .env.example .env
diff --git a/.github/workflows/social-cards.yml b/.github/workflows/social-cards.yml
index 9ce554f470..7034a157c0 100644
--- a/.github/workflows/social-cards.yml
+++ b/.github/workflows/social-cards.yml
@@ -10,15 +10,15 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Загрузка platform
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           repository: doka-guide/platform
       - name: Загрузка контента
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           path: content
       - name: Кэширование модулей
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         env:
           cache-name: cache-node-modules
         with:
diff --git a/.github/workflows/sort-dictionary.yml b/.github/workflows/sort-dictionary.yml
deleted file mode 100644
index 4a0a777e92..0000000000
--- a/.github/workflows/sort-dictionary.yml
+++ /dev/null
@@ -1,30 +0,0 @@
-name: Sort Dictionary
-
-on:
-  workflow_run:
-    workflows:
-      - "YaSpeller All"
-    branches:
-      - main
-    types:
-      - completed
-
-jobs:
-  sort-dictionary:
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: ['16']
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          token: ${{ secrets.DOKA_BOT_ACCESS_TOKEN }}
-      - name: Сортировка словаря исключений
-        run: node .github/scripts/sort.js
-      - uses: stefanzweifel/git-auto-commit-action@v4
-        with:
-          commit_message: Сортирует словарь исключений
-          file_pattern: .yaspeller.json
-          commit_user_name: Doka Dog
-          commit_user_email: hi@doka.guide
-          commit_author: Doka Dog <hi@doka.guide>
diff --git a/.github/workflows/update-dates.yml b/.github/workflows/update-dates.yml
index fea943c0f1..e12323bfc4 100644
--- a/.github/workflows/update-dates.yml
+++ b/.github/workflows/update-dates.yml
@@ -16,13 +16,13 @@ jobs:
   update-dates:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           token: ${{ secrets.DOKA_BOT_ACCESS_TOKEN }}
           fetch-depth: 2
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
       - name: Правка полей updatedAt и createdAt
         run: node .github/scripts/update-dates.js
       - name: Создание коммита с обновлениями полей
diff --git a/.github/workflows/update-index.yml b/.github/workflows/update-index.yml
index a8c5b3a0a0..01da84d1e4 100644
--- a/.github/workflows/update-index.yml
+++ b/.github/workflows/update-index.yml
@@ -3,7 +3,7 @@ name: Update Index
 on:
   workflow_run:
     workflows:
-      - "YaSpeller All"
+      - "Update Dates"
     branches:
       - main
     types:
@@ -16,7 +16,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
       - name: Установка ключа для пользователя
         run: |
           set -eu
diff --git a/.github/workflows/yaspeller-all.yml b/.github/workflows/yaspeller-all.yml
deleted file mode 100644
index 0f5f362422..0000000000
--- a/.github/workflows/yaspeller-all.yml
+++ /dev/null
@@ -1,19 +0,0 @@
-name: YaSpeller All
-
-on:
-  push:
-    branches:
-      - main
-
-jobs:
-  yaspeller:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 16
-      - name: Проверка правописания в main
-        run: |
-          npm i -g yaspeller
-          yaspeller --only-errors *
diff --git a/CHANGELOG.md b/CHANGELOG.md
index b5bf4e9372..51f1a767e7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -69,7 +69,7 @@
 - 30 июля, [Как создать профиль на GitHub](https://doka.guide/recipes/github-new-profile/), Игорь Коровченко
 - 25 июля, [Как ребейзить ветку и не думать ни о чём](https://doka.guide/recipes/git-rebase-onto/), Полина Гуртовая
 - 24 июля, [`blockquote`](https://doka.guide/a11y/role-blockquote/), Саша Тараскина
-- 19 июля, [image-rendering](https://doka.guide/css/image-rendering), Андрей Сухов
+- 19 июля, [image-rendering](https://doka.guide/css/image-rendering/), Андрей Сухов
 - 15 июля, [Что такое CORS](https://doka.guide/tools/cors/), Денис Путнов
 - 9 июля, [`.lastIndexOf()`](https://doka.guide/js/last-index-of/), Евгения Шевлякова
 
@@ -120,7 +120,7 @@
 - 31 января, [`switch`](https://doka.guide/a11y/role-switch/), Татьяна Фокина
 - 31 января, [`tooltip`](https://doka.guide/a11y/role-tooltip/), Татьяна Фокина
 - 10 января, [`word-wrap`](https://doka.guide/css/word-wrap/), Александр Рассудихин
-- 10 января, [`::first-line`](https://doka.guide/css/first-line/) Александр Рассудихин
+- 10 января, [`::first-line`](https://doka.guide/css/first-line/), Александр Рассудихин
 
 ## Декабрь 2022
 
@@ -139,7 +139,7 @@
 - 22 ноября, [`navigation`](https://doka.guide/a11y/role-navigation/), Данила
 - 22 ноября, [`aria-keyshortcuts`](https://doka.guide/a11y/aria-keyshortcuts/), Татьяна Фокина
 - 18 ноября, [`aria-flowto`](https://doka.guide/a11y/aria-flowto/), Татьяна Фокина
-- 11 ноября, [Как сделать превью проекта на собственном сервере](https://doka.guide/recipes/self-hosted-preview), Игорь Коровченко
+- 11 ноября, [Как сделать превью проекта на собственном сервере](https://doka.guide/recipes/self-hosted-preview/), Игорь Коровченко
 - 5 ноября, [Как скрыть содержимое от скринридеров](https://doka.guide/a11y/content-hidden/), Марианна Минич
 - 4 ноября, [`border-collapse`](https://doka.guide/css/border-collapse/), Антон Капустинский
 - 4 ноября, [`border-spacing`](https://doka.guide/css/border-spacing/), Антон Капустинский
@@ -185,7 +185,7 @@
 ## Август 2022
 
 - 30 августа, [`<map>`](https://doka.guide/html/map/), Алексей Никитченко
-- 30 августа, [`::marker`](https://doka.guide/css/marker), Алексей Степанов
+- 30 августа, [`::marker`](https://doka.guide/css/marker/), Алексей Степанов
 - 25 августа, [Класс `Date`](https://doka.guide/js/date/), Ксения Субботина
 - 24 августа, [Атрибут `for`](https://doka.guide/html/for/), Алексей Никитченко
 - 19 августа, [Событие `submit`](https://doka.guide/js/event-submit/), Алексей Никитченко
@@ -203,117 +203,117 @@
 
 ## Июль 2022
 
-- 29 июля [`repeating-radial-gradient()`](https://doka.guide/css/repeating-radial-gradient/), Алексей Никитченко
+- 29 июля, [`repeating-radial-gradient()`](https://doka.guide/css/repeating-radial-gradient/), Алексей Никитченко
 
 ## Июнь 2022
 
-- 28 июня [Основы работы с ElasticSearch](https://doka.guide/tools/elasticsearch/), Даниил Хлебовский
-- 16 июня [`<output>`](https://doka.guide/html/output), Борис Демченко
-- 16 июня [`min()`](https://doka.guide/css/min/), Илья Космачев
-- 13 июня [`Promise.any`](https://doka.guide/js/promise-any/), Алексей Ярков
-- 12 июня [Дескрипторы](https://doka.guide/js/descriptors/), Антон Горелов
+- 28 июня, [Основы работы с ElasticSearch](https://doka.guide/tools/elasticsearch/), Даниил Хлебовский
+- 16 июня, [`<output>`](https://doka.guide/html/output/), Борис Демченко
+- 16 июня, [`min()`](https://doka.guide/css/min/), Илья Космачев
+- 13 июня, [`Promise.any`](https://doka.guide/js/promise-any/), Алексей Ярков
+- 12 июня, [Дескрипторы](https://doka.guide/js/descriptors/), Антон Горелов
 
 ## Май 2022
 
-- 26 мая [`queueMicrotask()`](https://doka.guide/js/queuemicrotask/), Артём Гусев
-- 15 мая [`FormData`](https://doka.guide/js/form-data/), Виталий Баев
-- 4 мая [Метод `flatMap()`](https://doka.guide/js/array-map/), Антон Горелов
-- 4 мая [`outline-width`](https://doka.guide/css/outline-width/), Владимир
+- 26 мая, [`queueMicrotask()`](https://doka.guide/js/queuemicrotask/), Артём Гусев
+- 15 мая, [`FormData`](https://doka.guide/js/form-data/), Виталий Баев
+- 4 мая, [Метод `flatMap()`](https://doka.guide/js/array-map/), Антон Горелов
+- 4 мая, [`outline-width`](https://doka.guide/css/outline-width/), Владимир
 
 ## Апрель 2022
 
-- 28 апреля [Gulp и его использование](https://doka.guide/tools/gulp/), Борис Демченко
-- 5 апреля [Атрибут `disabled`](https://doka.guide/html/disabled/), Алёна Батицкая
-- 5 апреля [`accent-color`](https://doka.guide/css/accent-color/), Алёна Батицкая
-- 5 апреля [Атрибут `required`](https://doka.guide/html/required/), Алёна Батицкая
-- 5 апреля [Атрибут `value`](https://doka.guide/html/value/), Алёна Батицкая
-- 5 апреля [Атрибуты `defer` и `async`](https://doka.guide/html/defer-async/), Матвей Романов
+- 28 апреля, [Gulp и его использование](https://doka.guide/tools/gulp/), Борис Демченко
+- 5 апреля, [Атрибут `disabled`](https://doka.guide/html/disabled/), Алёна Батицкая
+- 5 апреля, [`accent-color`](https://doka.guide/css/accent-color/), Алёна Батицкая
+- 5 апреля, [Атрибут `required`](https://doka.guide/html/required/), Алёна Батицкая
+- 5 апреля, [Атрибут `value`](https://doka.guide/html/value/), Алёна Батицкая
+- 5 апреля, [Атрибуты `defer` и `async`](https://doka.guide/html/defer-async/), Матвей Романов
 
 ## Март 2022
 
-- 31 марта [Загрузка файла с прогресс-баром](https://doka.guide/recipes/progress/), Борис Демченко
-- 31 марта [Короткие ссылки на NJS](https://doka.guide/recipes/short-links/), Игорь Коровченко
-- 31 марта [Установка сертификатов Let’s Encrypt](https://doka.guide/recipes/lets-encrypt-nginx/), Игорь Коровченко
-- 31 марта [Снежинки](https://doka.guide/recipes/snow/), Алёна Батицкая
-- 20 марта [Событие `beforeunload`](https://doka.guide/js/event-beforeunload/), Антон Субботин
-- 20 марта [Событие `unload`](https://doka.guide/js/event-unload/), Антон Субботин
-- 17 марта [`<samp>`](https://doka.guide/html/samp/), Борис Демченко
-- 17 марта [`<kbd>`](https://doka.guide/html/kbd/), Борис Демченко
-- 16 марта [`outline-color`](https://doka.guide/css/outline-color/), Тимур Билалов
-- 14 марта [Как войти в Vim](https://doka.guide/tools/how-to-enter-to-vim/), Анатолий Коробов
+- 31 марта, [Загрузка файла с прогресс-баром](https://doka.guide/recipes/progress/), Борис Демченко
+- 31 марта, [Короткие ссылки на NJS](https://doka.guide/recipes/short-links/), Игорь Коровченко
+- 31 марта, [Установка сертификатов Let’s Encrypt](https://doka.guide/recipes/lets-encrypt-nginx/), Игорь Коровченко
+- 31 марта, [Снежинки](https://doka.guide/recipes/snow/), Алёна Батицкая
+- 20 марта, [Событие `beforeunload`](https://doka.guide/js/event-beforeunload/), Антон Субботин
+- 20 марта, [Событие `unload`](https://doka.guide/js/event-unload/), Антон Субботин
+- 17 марта, [`<samp>`](https://doka.guide/html/samp/), Борис Демченко
+- 17 марта, [`<kbd>`](https://doka.guide/html/kbd/), Борис Демченко
+- 16 марта, [`outline-color`](https://doka.guide/css/outline-color/), Тимур Билалов
+- 14 марта, [Как войти в Vim](https://doka.guide/tools/how-to-enter-to-vim/), Анатолий Коробов
 
 ## Февраль 2022
 
-- 14 февраля [`:where()`](https://doka.guide/css/where/), Антон Субботин
-- 14 февраля [`counter-set`](https://doka.guide/css/counter-set/), Алексей Степанов
-- 14 февраля [`counter-reset`](https://doka.guide/css/counter-reset/), Алексей Степанов
-- 14 февраля [`counter-increment`](https://doka.guide/css/counter-increment/), Алексей Степанов
-- 14 февраля [Атрибут `placeholder`](https://doka.guide/html/placeholder/), Марианна Минич
-- 14 февраля [Атрибут `inputmode`](https://doka.guide/html/inputmode/), Борис Демченко
-- 8 февраля [Коллекция `Map`](https://doka.guide/js/map/), Виталий Баев
-- 7 февраля [Performance API](https://doka.guide/js/performance/), Владимир Быков
+- 14 февраля, [`:where()`](https://doka.guide/css/where/), Антон Субботин
+- 14 февраля, [`counter-set`](https://doka.guide/css/counter-set/), Алексей Степанов
+- 14 февраля, [`counter-reset`](https://doka.guide/css/counter-reset/), Алексей Степанов
+- 14 февраля, [`counter-increment`](https://doka.guide/css/counter-increment/), Алексей Степанов
+- 14 февраля, [Атрибут `placeholder`](https://doka.guide/html/placeholder/), Марианна Минич
+- 14 февраля, [Атрибут `inputmode`](https://doka.guide/html/inputmode/), Борис Демченко
+- 8 февраля, [Коллекция `Map`](https://doka.guide/js/map/), Виталий Баев
+- 7 февраля, [Performance API](https://doka.guide/js/performance/), Владимир Быков
 
 ## Январь 2022
 
-- 30 января [`flat`](https://doka.guide/js/array-flat/), Рома Агарков
-- 28 января [`caret-color`](https://doka.guide/css/caret-color/), Миша Захаров
-- 25 января [`findIndex`](https://doka.guide/js/array-find-index/), Сергей Минаков
-- 25 января [`text-indent`](https://doka.guide/css/text-indent/), Матвей Романов
-- 19 января [Итератор](https://doka.guide/js/iterator/), Никита Канищев
-- 12 января [`<i>`](https://doka.guide/html/i/), Гаджи Гаджидадаев
+- 30 января, [`flat`](https://doka.guide/js/array-flat/), Рома Агарков
+- 28 января, [`caret-color`](https://doka.guide/css/caret-color/), Миша Захаров
+- 25 января, [`findIndex`](https://doka.guide/js/array-find-index/), Сергей Минаков
+- 25 января, [`text-indent`](https://doka.guide/css/text-indent/), Матвей Романов
+- 19 января, [Итератор](https://doka.guide/js/iterator/), Никита Канищев
+- 12 января, [`<i>`](https://doka.guide/html/i/), Гаджи Гаджидадаев
 
 ## Декабрь 2021
 
-- 29 декабря [`scroll-padding`](https://doka.guide/css/scroll-padding/), Алексей Орлов
-- 27 декабря [`currentColor`](https://doka.guide/css/currentcolor/), Максим Печёрин
-- 24 декабря [GitLab CI/CD](https://doka.guide/tools/gitlab-ci-cd/), Виталий Баев
-- 23 декабря [Переменные `const`, `let` и `var`](https://doka.guide/js/var-let/), Сергей Фомин
-- 22 декабря [Тернарный оператор](https://doka.guide/js/ternary-operator/), Илья Космачев
-- 18 декабря [`<code>`](https://doka.guide/html/code/), Иван Ельцов
-- 14 декабря [`<time>`](https://doka.guide/html/time/), Вячеслав Разум
-- 14 декабря [Подход «Pixel Perfect»](https://doka.guide/css/pixel-perfect/), Иван Ельцов
-- 14 декабря [`::selection`](https://doka.guide/css/selection/), Денис Русаков
-- 7 декабря [Подключение стилей](https://doka.guide/css/adding-styles/), Никита Канищев
-- 7 декабря [`clip`](https://doka.guide/css/clip/), Максим Печёрин
-- 1 декабря [`Promise.race()`](https://doka.guide/js/promise-race/), Рома Агарков
+- 29 декабря, [`scroll-padding`](https://doka.guide/css/scroll-padding/), Алексей Орлов
+- 27 декабря, [`currentColor`](https://doka.guide/css/currentcolor/), Максим Печёрин
+- 24 декабря, [GitLab CI/CD](https://doka.guide/tools/gitlab-ci-cd/), Виталий Баев
+- 23 декабря, [Переменные `const`, `let` и `var`](https://doka.guide/js/var-let/), Сергей Фомин
+- 22 декабря, [Тернарный оператор](https://doka.guide/js/ternary-operator/), Илья Космачев
+- 18 декабря, [`<code>`](https://doka.guide/html/code/), Иван Ельцов
+- 14 декабря, [`<time>`](https://doka.guide/html/time/), Вячеслав Разум
+- 14 декабря, [Подход «Pixel Perfect»](https://doka.guide/css/pixel-perfect/), Иван Ельцов
+- 14 декабря, [`::selection`](https://doka.guide/css/selection/), Денис Русаков
+- 7 декабря, [Подключение стилей](https://doka.guide/css/adding-styles/), Никита Канищев
+- 7 декабря, [`clip`](https://doka.guide/css/clip/), Максим Печёрин
+- 1 декабря, [`Promise.race()`](https://doka.guide/js/promise-race/), Рома Агарков
 
 ## Ноябрь 2021
 
-- 30 ноября [`<mark>`](https://doka.guide/html/mark/), Иван Ельцов
-- 30 ноября [`<u>`](https://doka.guide/html/u/), Иван Ельцов
-- 24 ноября [Свойство `forms`](https://doka.guide/js/forms/), Владислав Чичужко
-- 23 ноября [`filter`](https://doka.guide/css/filter/), Лена Райан
-- 18 ноября [Скринридеры](https://doka.guide/html/screenreaders/), Татьяна Фокина
-- 15 ноября [`conic-gradient()`](https://doka.guide/css/conic-gradient/), Олег Миторун
-- 15 ноября [`<ins>`](https://doka.guide/html/ins/), Иван Ельцов
-- 15 ноября [`<del>`](https://doka.guide/html/del/), Иван Ельцов
-- 15 ноября [`<dfn>`](https://doka.guide/html/dfn/), Иван Ельцов
-- 14 ноября [Markdown](https://doka.guide/tools/markdown/), Сергей Минаков
-- 11 ноября: [`<bdi>`](https://doka.guide/html/bdi/), Иван Ельцов
-- 8 ноября: [`<cite>`](https://doka.guide/html/cite/), Иван Ельцов
-- 7 ноября: [`Promise.allSettled`](https://doka.guide/js/promise-allsettled/), Вадим Стебаков
-- 5 ноября: [`<small>`](https://doka.guide/html/small/), Иван Ельцов
-- 5 ноября: [`border-width`](https://doka.guide/css/border-width/), Максим Печёрин
-- 5 ноября: [`<var>`](https://doka.guide/html/var/), Иван Ельцов
-- 4 ноября: [`column-rule`](https://doka.guide/css/column-rule/), Иван Ельцов
-- 4 ноября: [`column-rule-width`](https://doka.guide/css/column-rule-width/), Иван Ельцов
-- 4 ноября: [`column-rule-style`](https://doka.guide/css/column-rule-style/), Иван Ельцов
-- 4 ноября: [`column-rule-color`](https://doka.guide/css/column-rule-color/), Иван Ельцов
-- 3 ноября: [`var()`](https://doka.guide/css/var/), Ярослав Гюльназарян
-- 2 ноября: [`column-span`](https://doka.guide/css/column-span/), Иван Ельцов
-- 2 ноября: [`column-fill`](https://doka.guide/css/column-fill/), Иван Ельцов
-- 2 ноября: [Атрибут `novalidate`](https://doka.guide/html/novalidate/), Владислав Чичужко
-- 1 ноября: [`text-decoration-skip-ink`](https://doka.guide/css/text-decoration-skip-ink/), Влад Сорокин
+- 30 ноября, [`<mark>`](https://doka.guide/html/mark/), Иван Ельцов
+- 30 ноября, [`<u>`](https://doka.guide/html/u/), Иван Ельцов
+- 24 ноября, [Свойство `forms`](https://doka.guide/js/forms/), Владислав Чичужко
+- 23 ноября, [`filter`](https://doka.guide/css/filter/), Лена Райан
+- 18 ноября, [Скринридеры](https://doka.guide/html/screenreaders/), Татьяна Фокина
+- 15 ноября, [`conic-gradient()`](https://doka.guide/css/conic-gradient/), Олег Миторун
+- 15 ноября, [`<ins>`](https://doka.guide/html/ins/), Иван Ельцов
+- 15 ноября, [`<del>`](https://doka.guide/html/del/), Иван Ельцов
+- 15 ноября, [`<dfn>`](https://doka.guide/html/dfn/), Иван Ельцов
+- 14 ноября, [Markdown](https://doka.guide/tools/markdown/), Сергей Минаков
+- 11 ноября, [`<bdi>`](https://doka.guide/html/bdi/), Иван Ельцов
+- 8 ноября, [`<cite>`](https://doka.guide/html/cite/), Иван Ельцов
+- 7 ноября, [`Promise.allSettled`](https://doka.guide/js/promise-allsettled/), Вадим Стебаков
+- 5 ноября, [`<small>`](https://doka.guide/html/small/), Иван Ельцов
+- 5 ноября, [`border-width`](https://doka.guide/css/border-width/), Максим Печёрин
+- 5 ноября, [`<var>`](https://doka.guide/html/var/), Иван Ельцов
+- 4 ноября, [`column-rule`](https://doka.guide/css/column-rule/), Иван Ельцов
+- 4 ноября, [`column-rule-width`](https://doka.guide/css/column-rule-width/), Иван Ельцов
+- 4 ноября, [`column-rule-style`](https://doka.guide/css/column-rule-style/), Иван Ельцов
+- 4 ноября, [`column-rule-color`](https://doka.guide/css/column-rule-color/), Иван Ельцов
+- 3 ноября, [`var()`](https://doka.guide/css/var/), Ярослав Гюльназарян
+- 2 ноября, [`column-span`](https://doka.guide/css/column-span/), Иван Ельцов
+- 2 ноября, [`column-fill`](https://doka.guide/css/column-fill/), Иван Ельцов
+- 2 ноября, [Атрибут `novalidate`](https://doka.guide/html/novalidate/), Владислав Чичужко
+- 1 ноября, [`text-decoration-skip-ink`](https://doka.guide/css/text-decoration-skip-ink/), Влад Сорокин
 
 ## Октябрь 2021
 
-- 28 октября: [`Array.isArray()`](https://doka.guide/js/array-isarray/), Роман Юрлов
-- 28 октября: [`border-color`](https://doka.guide/css/border-color/), Максим Печёрин
-- 27 октября: [`scroll-behavior`](https://doka.guide/css/scroll-behavior/), Алексей Орлов
-- 25 октября: [`<bdo>`](https://doka.guide/html/bdo/), Илья Космачев
-- 22 октября: [`Promise.all()`](https://doka.guide/js/promise-all/), Роман Юрлов
-- 22 октября: [Объект события `Event`](https://doka.guide/js/event/), Павел Минеев
-- 21 октября: [`:lang`](https://doka.guide/css/lang/), Михаил Чувашов
-- 20 октября: [`tab-size`](https://doka.guide/css/tab-size/), Вадим Макеев
+- 28 октября, [`Array.isArray()`](https://doka.guide/js/array-isarray/), Роман Юрлов
+- 28 октября, [`border-color`](https://doka.guide/css/border-color/), Максим Печёрин
+- 27 октября, [`scroll-behavior`](https://doka.guide/css/scroll-behavior/), Алексей Орлов
+- 25 октября, [`<bdo>`](https://doka.guide/html/bdo/), Илья Космачев
+- 22 октября, [`Promise.all()`](https://doka.guide/js/promise-all/), Роман Юрлов
+- 22 октября, [Объект события `Event`](https://doka.guide/js/event/), Павел Минеев
+- 21 октября, [`:lang`](https://doka.guide/css/lang/), Михаил Чувашов
+- 20 октября, [`tab-size`](https://doka.guide/css/tab-size/), Вадим Макеев
 
 <!-- yaspeller ignore:end -->
diff --git a/a11y/aria-roledescription/demos/presentation-slide/index.html b/a11y/aria-roledescription/demos/presentation-slide/index.html
new file mode 100644
index 0000000000..07bc857db6
--- /dev/null
+++ b/a11y/aria-roledescription/demos/presentation-slide/index.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Слайд презентации — aria-roledescription — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
+  <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
+      font-size: 18px;
+    }
+
+    body {
+      min-height: 100vh;
+      padding: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+      color: #000000;
+      font-family: "Roboto", sans-serif;
+    }
+
+    h1 {
+      margin-bottom: 50px;
+      font-weight: 500;
+      font-size: 1.625rem;
+    }
+
+    ul {
+      list-style-type: none;
+    }
+
+    li {
+      position: relative;
+      padding-left: 25px;
+      line-height: 1.4;
+      font-size: 1.125rem;
+    }
+
+    li::before {
+      content: "";
+      position: absolute;
+      top: 7px;
+      left: 0;
+      width: 14px;
+      height: 14px;
+      background-color: #FFFFFF;
+    }
+
+    li::after {
+      content: ";";
+    }
+
+    li:last-of-type::after {
+      content: ".";
+    }
+
+    .slide {
+      position: relative;
+      width: 75%;
+      padding: 75px 40px 100px;
+      background-color: #F498AD;
+    }
+
+    .number {
+      position: absolute;
+      padding: 15px 5px;
+      bottom: 0;
+      right: 40px;
+      background-color: #10F3AF;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+
+      .slide {
+        width: 100%;
+        padding: 55px 30px;
+      }
+
+      .number {
+        right: 30px;
+      }
+    }
+  </style>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+  <section class="slide" aria-roledescription="Слайд">
+    <h1>Инкунабулы</h1>
+    <ul>
+      <li>от латинского слова <i>incunabula</i> — «колыбель», «начало»</li>
+      <li>европейские книги, изданные от 1440 до 1 января 1501 года</li>
+      <li>термин появился в 1639 году, но стал активно употребляться только в 18 веке</li>
+      <li>известные инкунабулы — Библия Гутенберга (первая половина 1450-х) и «Нюрнбергская хроника» (1493)</li>
+    </ul>
+    <div class="number">10</div>
+  </section>
+</body>
+</html>
diff --git a/a11y/aria-roledescription/index.md b/a11y/aria-roledescription/index.md
index d4aaa12d7d..9dadeedabf 100644
--- a/a11y/aria-roledescription/index.md
+++ b/a11y/aria-roledescription/index.md
@@ -3,7 +3,10 @@ title: "`aria-roledescription`"
 description: "Как дать роли элемента своё название."
 authors:
   - tatianafokina
+contributors:
+  - skorobaeus
 keywords:
+  - a11y
   - доступность
   - ARIA
 related:
@@ -24,15 +27,34 @@ tags:
 
 ```html
 <section
+  class="slide"
   aria-roledescription="Слайд"
   aria-labelledby="heading"
 >
-  <h2 id="heading">Новый роман Франца К.</h2>
-  <!-- Остальное содержимое слайда -->
+  <h1 id="heading">Инкунабулы</h1>
+  <ul>
+    <li>
+      От латинского слова <i>incunabula</i> — «колыбель»,«начало»
+    </li>
+    <li>
+      Европейские книги, изданные от 1440 до 1 января 1501 года
+    </li>
+    <li>
+      Термин появился в 1639 году, но стал активно употребляться только
+      в 18 веке
+    </li>
+    <li>
+      Известные инкунабулы — Библия Гутенберга (первая половина 1450-х)
+      и «Нюрнбергская хроника» (1493)
+    </li>
+  </ul>
+  <div class="number">10</div>
 </section>
 ```
 
-Скринридер прочитает эту разметку примерно так: «Новый роман Франца К., слайд».
+<iframe title="Слайд презентации" src="demos/presentation-slide/" height="600"></iframe>
+
+Скринридер прочитает эту разметку примерно так: «Инкунабулы, слайд».
 
 ## Как пишется
 
diff --git a/css/clip-path/demos/basic-shape-with-geometry-box/index.html b/css/clip-path/demos/basic-shape-with-geometry-box/index.html
new file mode 100644
index 0000000000..4f7d316ce7
--- /dev/null
+++ b/css/clip-path/demos/basic-shape-with-geometry-box/index.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>SVG-источник — clip-path — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap">
+  <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
+    }
+
+    body {
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+      color: #FFFFFF;
+    }
+
+    h1 {
+      font-size: 30px;
+      font-weight: 500;
+      line-height: 1;
+    }
+
+    .option-title {
+      display: block;
+      font-size: 18px;
+    }
+
+    h1, .option-title {
+      width: 250px;
+      text-align: right;
+      text-transform: lowercase;
+    }
+
+    code {
+      font-family: "Roboto Mono", monospace;
+    }
+
+    .option-container {
+      display: flex;
+      align-items: flex-end;
+      gap: 50px;
+      margin-top: 30px;
+    }
+
+    .option {
+      position: relative;
+      width: 140px;
+      height: 100px;
+      border-radius: 20px;
+      border: 10px solid #F498AD;
+      background: #2E9AFF;
+    }
+
+    .option::after {
+      content: "⭐";
+      position: absolute;
+      top: -15px;
+      left: -25px;
+      width: 60px;
+      transform: rotate(-30deg);
+      display: grid;
+      place-items: center;
+      border-radius: 12px;
+      background: #FFFFFF;
+    }
+
+    @media (max-width: 480px) {
+      .option-container {
+        flex-direction: column;
+        gap: 10px;
+      }
+    }
+  </style>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+<div>
+  <h1><code>clip-path</code></h1>
+  <div class="option-container">
+    <code class="option-title">none</code>
+    <div class="option"></div>
+  </div>
+  <div class="option-container">
+    <code class="option-title">padding-box</code>
+    <div class="option" style="clip-path: padding-box"></div>
+  </div>
+  <div class="option-container">
+    <code class="option-title">circle(50%)</code>
+    <div class="option" style="clip-path: circle(50%)"></div>
+  </div>
+  <div class="option-container">
+    <code class="option-title">padding-box circle(50%)</code>
+    <div class="option" style="clip-path: padding-box circle(50%)"></div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/css/clip-path/demos/circle/index.html b/css/clip-path/demos/circle/index.html
new file mode 100644
index 0000000000..784613dae1
--- /dev/null
+++ b/css/clip-path/demos/circle/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>circle() — clip-path — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
+    }
+
+    body {
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+    }
+
+    .before {
+      position: absolute;
+      width: 240px;
+      height: 240px;
+      background-color: #2E9AFF;
+      opacity: 0.2;
+    }
+
+    .clipped {
+      width: 240px;
+      height: 240px;
+      clip-path: circle(75% at 10px 10%);
+      background-color: #2E9AFF;
+    }
+  </style>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+<div class="before"></div>
+<div class="clipped"></div>
+</body>
+</html>
diff --git a/css/clip-path/demos/ellipse/index.html b/css/clip-path/demos/ellipse/index.html
new file mode 100644
index 0000000000..a6ba5fa771
--- /dev/null
+++ b/css/clip-path/demos/ellipse/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>ellipse() — clip-path — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
+    }
+
+    body {
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+    }
+
+    .before {
+      position: absolute;
+      width: 240px;
+      height: 240px;
+      background-color: #2E9AFF;
+      opacity: 0.2;
+    }
+
+    .clipped {
+      width: 240px;
+      height: 240px;
+      clip-path: ellipse(4rem farthest-side at top);
+      background-color: #2E9AFF;
+    }
+  </style>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+<div class="before"></div>
+<div class="clipped"></div>
+</body>
+</html>
diff --git a/css/clip-path/demos/inset/index.html b/css/clip-path/demos/inset/index.html
new file mode 100644
index 0000000000..7225f4923d
--- /dev/null
+++ b/css/clip-path/demos/inset/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>inset() — clip-path — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
+    }
+
+    body {
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+    }
+
+    .before {
+      position: absolute;
+      width: 240px;
+      height: 240px;
+      background-color: #2E9AFF;
+      opacity: 0.2;
+    }
+
+    .clipped {
+      width: 240px;
+      height: 240px;
+      clip-path: inset(10% 50px 5rem round 10px 10%);
+      background-color: #2E9AFF;
+    }
+  </style>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+<div class="before"></div>
+<div class="clipped"></div>
+</body>
+</html>
diff --git a/css/clip-path/demos/path/index.html b/css/clip-path/demos/path/index.html
new file mode 100644
index 0000000000..97f9a13e17
--- /dev/null
+++ b/css/clip-path/demos/path/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>path() — clip-path — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap">
+  <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
+    }
+
+    body {
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+      color: #18191C;
+      font-family: "Roboto Mono", monospace;
+      font-size: 20px;
+    }
+
+    span {
+      width: 110px;
+      height: 82px;
+      display: grid;
+      place-items: center;
+      background-color: #2E9AFF;
+    }
+
+    .before {
+      position: absolute;
+      opacity: 0.2;
+    }
+
+    .clipped {
+      clip-path: path("M94.2271 28.968C88.9828 11.8799 72.9451 0 55.0007 0C37.0549 0 21.0165 11.8806 15.7723 28.968C7.3871 28.3637 0 35.2666 0 43.6714C0 52.8751 8.78756 59.9318 17.7127 58.1115C24.3969 72.644 38.9636 82 55.0013 82C71.0377 82 85.6038 72.644 92.2886 58.1115C101.214 59.9306 110.001 52.8764 110.001 43.6714C110 35.267 102.613 28.3625 94.2271 28.968Z");
+    }
+  </style>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+<span class="before"></span>
+<span class="clipped">&lt;you/&gt;</span>
+</body>
+</html>
diff --git a/css/clip-path/demos/polygon/index.html b/css/clip-path/demos/polygon/index.html
new file mode 100644
index 0000000000..5512e16201
--- /dev/null
+++ b/css/clip-path/demos/polygon/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>polygon() — clip-path — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
+    }
+
+    body {
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+    }
+
+    .before {
+      position: absolute;
+      width: 240px;
+      height: 240px;
+      background-color: #2E9AFF;
+      opacity: 0.2;
+    }
+
+    .clipped {
+      width: 240px;
+      height: 240px;
+      clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+      background-color: #2E9AFF;
+    }
+  </style>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+<div class="before"></div>
+<div class="clipped"></div>
+</body>
+</html>
diff --git a/css/clip-path/demos/svg/images/doka.svg b/css/clip-path/demos/svg/images/doka.svg
new file mode 100644
index 0000000000..c34e973de3
--- /dev/null
+++ b/css/clip-path/demos/svg/images/doka.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 45">
+  <defs>
+    <clipPath id="clip-path">
+      <path d="M28.6892 36.2352C34.6178 36.2352 37.469 32.4614 37.469 26.2778V10.5459C37.469 9.54561 36.8807 9 36.066 9C35.2514 9 34.7083 9.54561 34.7083 10.5459V26.2778C34.7083 31.5066 32.4455 33.6435 28.6892 33.6435C25.0235 33.6435 22.7606 31.5066 22.7606 26.2778V10.5459C22.7606 9.54561 22.1723 9 21.3577 9C20.5431 9 20 9.54561 20 10.5459V26.2778C20 32.4614 22.8512 36.2352 28.6892 36.2352Z"/>
+      <path d="M49.5348 13.5013C46.8646 13.5013 44.6923 15.6838 44.6923 18.3209C44.6923 21.0035 46.8646 23.186 49.5348 23.186C52.1596 23.186 54.332 21.0035 54.332 18.3209C54.332 15.6838 52.1596 13.5013 49.5348 13.5013Z"/>
+      <path d="M63.9716 36.7808C67.049 36.7808 68.8593 34.8712 70.3527 32.8251C71.8462 34.8712 73.6565 36.7808 76.7339 36.7808C77.8653 36.7808 78.8609 36.4625 78.8609 35.4168C78.8609 34.7802 78.3631 34.1892 77.639 34.1892C77.3675 34.1892 76.8697 34.2801 76.5529 34.2801C75.1047 34.2801 73.3849 32.3704 72.4345 31.0064C74.3806 28.9149 76.5076 26.2323 76.5076 23.2769C76.5076 19.8668 73.928 17.457 70.3527 17.457C66.7775 17.457 64.1979 19.8668 64.1979 23.2769C64.1979 26.2323 66.3249 28.9149 68.2709 31.0064C67.3206 32.3704 65.6008 34.2801 64.1526 34.2801C63.8358 34.2801 63.338 34.1892 63.0664 34.1892C62.3423 34.1892 61.8445 34.7802 61.8445 35.4168C61.8445 36.4625 62.8402 36.7808 63.9716 36.7808Z"/>
+      <path d="M91.153 13.5013C88.4829 13.5013 86.3106 15.6838 86.3106 18.3209C86.3106 21.0035 88.4829 23.186 91.153 23.186C93.7779 23.186 95.9502 21.0035 95.9502 18.3209C95.9502 15.6838 93.7779 13.5013 91.153 13.5013Z"/>
+      <path d="M111.926 36.2352C117.854 36.2352 120.705 32.4614 120.705 26.2778V10.5459C120.705 9.54561 120.117 9 119.303 9C118.488 9 117.945 9.54561 117.945 10.5459V26.2778C117.945 31.5066 115.682 33.6435 111.926 33.6435C108.26 33.6435 105.997 31.5066 105.997 26.2778V10.5459C105.997 9.54561 105.409 9 104.594 9C103.78 9 103.236 9.54561 103.236 10.5459V26.2778C103.236 32.4614 106.088 36.2352 111.926 36.2352Z"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/css/clip-path/demos/svg/index.html b/css/clip-path/demos/svg/index.html
new file mode 100644
index 0000000000..52d86e2d84
--- /dev/null
+++ b/css/clip-path/demos/svg/index.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>SVG-источник — clip-path — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap">
+  <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
+    }
+
+    body {
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+      color: #FFFFFF;
+    }
+
+    h1 {
+      font-size: 30px;
+      font-weight: 500;
+      line-height: 1;
+    }
+
+    .option-title {
+      display: block;
+      font-size: 18px;
+    }
+
+    h1, .option-title {
+      width: 250px;
+      text-align: right;
+      text-transform: lowercase;
+    }
+
+    code {
+      font-family: "Roboto Mono", monospace;
+    }
+
+    .option-container {
+      display: flex;
+      align-items: flex-end;
+      gap: 50px;
+      margin-top: 30px;
+    }
+
+    .link {
+      color: #2E9AFF;
+    }
+
+    .option {
+      width: 140px;
+      height: 45px;
+      background-color: #F498AD;
+    }
+
+    .inline-svg {
+      clip-path: url(#clip-path);
+    }
+
+    .external-svg {
+      clip-path: url(images/doka.svg#clip-path);
+    }
+
+    svg {
+      position: absolute;
+      width: 0;
+      height: 0;
+    }
+
+    @media (max-width: 480px) {
+      .option-container {
+        flex-direction: column;
+        gap: 10px;
+      }
+    }
+  </style>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+<div>
+  <h1><code>clip-path</code></h1>
+  <div class="option-container">
+    <code class="option-title">url(<span class="link">#clip-path</span>)</code>
+    <div class="option inline-svg"></div>
+  </div>
+  <div class="option-container">
+    <code class="option-title">url(<span class="link">doka.svg<wbr>#clip-path</span>)</code>
+    <div class="option external-svg"></div>
+  </div>
+</div>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 45" aria-hidden="true">
+  <defs>
+    <clipPath id="clip-path">
+      <path d="M28.6892 36.2352C34.6178 36.2352 37.469 32.4614 37.469 26.2778V10.5459C37.469 9.54561 36.8807 9 36.066 9C35.2514 9 34.7083 9.54561 34.7083 10.5459V26.2778C34.7083 31.5066 32.4455 33.6435 28.6892 33.6435C25.0235 33.6435 22.7606 31.5066 22.7606 26.2778V10.5459C22.7606 9.54561 22.1723 9 21.3577 9C20.5431 9 20 9.54561 20 10.5459V26.2778C20 32.4614 22.8512 36.2352 28.6892 36.2352Z"/>
+      <path d="M49.5348 13.5013C46.8646 13.5013 44.6923 15.6838 44.6923 18.3209C44.6923 21.0035 46.8646 23.186 49.5348 23.186C52.1596 23.186 54.332 21.0035 54.332 18.3209C54.332 15.6838 52.1596 13.5013 49.5348 13.5013Z"/>
+      <path d="M63.9716 36.7808C67.049 36.7808 68.8593 34.8712 70.3527 32.8251C71.8462 34.8712 73.6565 36.7808 76.7339 36.7808C77.8653 36.7808 78.8609 36.4625 78.8609 35.4168C78.8609 34.7802 78.3631 34.1892 77.639 34.1892C77.3675 34.1892 76.8697 34.2801 76.5529 34.2801C75.1047 34.2801 73.3849 32.3704 72.4345 31.0064C74.3806 28.9149 76.5076 26.2323 76.5076 23.2769C76.5076 19.8668 73.928 17.457 70.3527 17.457C66.7775 17.457 64.1979 19.8668 64.1979 23.2769C64.1979 26.2323 66.3249 28.9149 68.2709 31.0064C67.3206 32.3704 65.6008 34.2801 64.1526 34.2801C63.8358 34.2801 63.338 34.1892 63.0664 34.1892C62.3423 34.1892 61.8445 34.7802 61.8445 35.4168C61.8445 36.4625 62.8402 36.7808 63.9716 36.7808Z"/>
+      <path d="M91.153 13.5013C88.4829 13.5013 86.3106 15.6838 86.3106 18.3209C86.3106 21.0035 88.4829 23.186 91.153 23.186C93.7779 23.186 95.9502 21.0035 95.9502 18.3209C95.9502 15.6838 93.7779 13.5013 91.153 13.5013Z"/>
+      <path d="M111.926 36.2352C117.854 36.2352 120.705 32.4614 120.705 26.2778V10.5459C120.705 9.54561 120.117 9 119.303 9C118.488 9 117.945 9.54561 117.945 10.5459V26.2778C117.945 31.5066 115.682 33.6435 111.926 33.6435C108.26 33.6435 105.997 31.5066 105.997 26.2778V10.5459C105.997 9.54561 105.409 9 104.594 9C103.78 9 103.236 9.54561 103.236 10.5459V26.2778C103.236 32.4614 106.088 36.2352 111.926 36.2352Z"/>
+    </clipPath>
+  </defs>
+</svg>
+</body>
+</html>
diff --git a/css/clip-path/index.11tydata.json b/css/clip-path/index.11tydata.json
index 89fe5057f5..3853468bfa 100644
--- a/css/clip-path/index.11tydata.json
+++ b/css/clip-path/index.11tydata.json
@@ -1,4 +1,4 @@
 {
   "createdAt": "2022-11-07T08:59:06.875Z",
-  "updatedAt": "2023-03-08T12:27:28.955Z"
+  "updatedAt": "2023-12-20T07:09:13.643Z"
 }
diff --git a/css/clip-path/index.md b/css/clip-path/index.md
index e0432abdfa..9472d701e5 100644
--- a/css/clip-path/index.md
+++ b/css/clip-path/index.md
@@ -1,24 +1,24 @@
 ---
 title: "`clip-path`"
-description: "Как красиво и быстро задать изображению любую форму при помощи всего одного свойства CSS."
+description: "Красиво и быстро задаём элементу любую форму при помощи всего одного CSS-свойства."
 authors:
   - spheno
+  - starhamster
 related:
-  - css/box-sizing
+  - tools/coordinates
   - css/opacity
   - css/box-model
 tags:
   - doka
-  - placeholder
 ---
 
 ## Кратко
 
-Свойство `clip-path` задаёт видимую область изображения. Всё, что выходит за пределы указанной области скрывается.
+С помощью `clip-path` можно задавать видимую область элемента. Всё, что выходит за её пределы, скрывается.
 
 ## Пример
 
-Обрежем изображение до круга 50%:
+Обрежем изображение до круга:
 
 ```css
 img {
@@ -28,65 +28,127 @@ img {
 
 ## Как пишется
 
-Задавать область можно базовой формой:
+### `url(SVG)`
 
-- `inset` — четырёхугольник,
-- `circle` — круг,
-- `ellipse` — эллипс,
-- `polygon` — многоугольник,
-- `path` — сложная фигура по правилам заполнения SVG.
+Задавать область можно с помощью ссылки на SVG [`url()`](/css/url/). Для большей совместимости лучше всего ссылаться на элемент в разметке, а не на отдельный файл. Ссылки на другие домены не работают ни в одном браузере.
 
-Обрежем изображение до формы ромба:
+```html
+<div style="clip-path: url(#clip-path)"></div>
+<div style="clip-path: url(doka.svg#clip-path)"></div>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 45">
+  <defs>
+    <clipPath id="clip-path">
+        <!-- Тут описание фигуры: path, circle и т. п. -->
+    </clipPath>
+  </defs>
+</svg>
+```
+
+<iframe title="SVG-источник" src="demos/svg/" height="310"></iframe>
+
+### Базовая форма
+
+Задавать область можно с помощью следующих CSS функций:
+
+- `inset()` — четырёхугольник,
+- `circle()` — круг,
+- `ellipse()` — эллипс,
+- `polygon()` — многоугольник,
+- `path()` — сложная фигура по правилам заполнения SVG.
+
+<aside>
+
+👻 В демках ниже для наглядности показан изначальный элемент с полупрозрачностью.
+
+</aside>
+
+#### `inset()`
+
+У функции `inset()` может быть от одного до четырёх аргументов — отступов от краёв. После ключевого слова `round` можно задать скругление углов, которое работает по тем же правилам, что и шорткат [`border-radius`](/css/border-radius/).
 
 ```css
-img {
-  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+div {
+  clip-path: inset(10% 50px 5rem round 10px 10%);
 }
 ```
 
-Можно задать область при помощи SVG-источника:
+<iframe title="inset()" src="demos/inset/" height="320"></iframe>
+
+#### `circle()`
+
+Аргументом функции `circle()` выступает длина радиуса окружности или одно из ключевых слов: `closest-side` (в качестве длины радиуса используется расстояние от центра окружности до ближайшего края) или `farthest-side` (от центра окружности до самого дальнего края). После ключевого слова `at` можно указать центр фигуры (например, `top left` или `10%`).
 
 ```css
-img {
-  clip-path: url(clip.svg#c1);
+div {
+  clip-path: circle(75% at 10px 10%);
 }
 ```
 
-Областью фигуры может стать блоковая модель:
+<iframe title="circle()" src="demos/circle/" height="320"></iframe>
 
-- `margin-box` — включает отступы,
-- `border-box` — по заданной рамке,
-- `padding-box` — по контенту, включая свойство [`padding`](/css/padding/),
-- `content-box` — по содержимому,
-- `fill-box` — по ограничивающей рамке объекта,
-- `stroke-box` — по обводке ограничивающей рамки,
-- `view-box` — по окну просмотра SVG.
+#### `ellipse()`
 
-Обрежем изображение по заданной границе с закруглёнными углами:
+CSS-функция `ellipse()` очень похожа на [`circle()`](#circle) за исключением того, что у эллипса два радиуса.
 
 ```css
-img {
-  border-radius: 15px;
-  clip-path: border-box;
+div {
+  clip-path: ellipse(4rem farthest-side at top);
 }
 ```
 
-Хотя самая частая область применения — это изображения, но свойство `clip-path` может ограничивать и другие HTML-элементы, например заголовок:
+<iframe title="circle()" src="demos/ellipse/" height="320"></iframe>
 
-Обрежет заголовок до вытянутого по горизонтали овала:
+#### `polygon()`
+
+С помощью `polygon()` можно задавать многоугольники.
 
 ```css
-h1 {
-  clip-path: ellipse(50% 10%);
+div {
+  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
 }
 ```
 
-Можно комбинировать все или несколько способов задачи области.
+<iframe title="circle()" src="demos/polygon/" height="320"></iframe>
+
+#### `path()`
+
+Фунция `path()` — ещё один способ задания видимой области. Поддержка браузеров немного хуже, чем у [`url()`](#url-svg).
 
 ```css
-img {
-  clip-path: margin-box circle(50%);
+span {
+  clip-path: path(/* Тут описание фигуры */);
 }
 ```
 
-Свойство  `clip-path` является заменой устаревшему свойству [`clip`](/css/clip/).
+<iframe title="path()" src="demos/path/" height="180"></iframe>
+
+### Блочная модель
+
+Областью фигуры может стать блочная модель:
+
+- `margin-box` — включает отступы,
+- `border-box` — по заданной рамке,
+- `padding-box` — по контенту,
+- `content-box` — по содержимому,
+- `fill-box` — по ограничивающей рамке объекта,
+- `stroke-box` — по обводке ограничивающей рамки,
+- `view-box` — по окну просмотра SVG.
+
+### Блочная модель с базовой формой
+
+Можно комбинировать задание видимой области блочной моделью и базовой формой, их порядок не важен. В этом случае все значения для базовой формы будут рассчитываться от заданной блочной модели.
+
+<iframe title="Сравнение разных значений свойства" src="demos/basic-shape-with-geometry-box/" height="750"></iframe>
+
+## Подсказки
+
+💡 Свойство не наследуется.
+
+💡 Значение по умолчанию — `none`.
+
+💡 Можно анимировать, если область задана с помощью [базовой формы](#bazovaya-forma).
+
+💡 Свойство заменяет устаревшее свойство [`clip`](/css/clip/).
+
+💡 Скрывается не только элемент, к которому применено свойство, но и вложенные в него элементы с псевдоэлементами.
diff --git a/css/grid-guide/demos/mobile-example/index.html b/css/grid-guide/demos/mobile-example/index.html
index 409890f577..6ede9d48ce 100644
--- a/css/grid-guide/demos/mobile-example/index.html
+++ b/css/grid-guide/demos/mobile-example/index.html
@@ -109,88 +109,86 @@
     .cart-product {
       max-width: 1000px;
       margin: auto;
-      margin-top: 10px;
+      margin-top: 50px;
     }
 
     .cart-product > div {
-      padding: 20px;
+      padding: 20px 0;
       text-align: center;
-      border-radius: 10px;
-      border: #f9fafc 2px solid;
       font-size: 18px;
-      color: #fff;
+      color: #000000;
       font-family: Roboto, sans-serif;
     }
 
     .image {
-      background-color: #4f98f6;
+      background-color: #2E9AFF;
     }
 
     .title {
-      background-color: #f64fec;
+      background-color: #C56FFF;
     }
 
     .price {
-      background-color: #f6ad4f;
+      background-color: #FFD829;
     }
 
     .description {
-      background-color: #4ff659;
+      background-color: #41E847;
     }
 
     .rating {
-      background-color: #ed586f;
+      background-color: #F498AD;
     }
 
     .reviews {
-      background-color: #b9ed58;
+      background-color: #10F3AF;
     }
 
     .features {
-      background-color: #58edd6;
+      background-color: #10F3AF;
     }
 
     .availability {
-      background-color: #8c58ed;
+      background-color: #FFD829;
     }
 
     .shipping {
-      background-color: #ee8957;
+      background-color: #FF8630;
     }
 
     .payment {
-      background-color: #70ee57;
+      background-color: #41E847;
     }
 
     .contact {
-      background-color: #57bcee;
+      background-color: #2E9AFF;
     }
 
     .warranty {
-      background-color: #d557ee;
+      background-color: #C56FFF;
     }
 
     .sizes {
-      background-color: #4f98f6;
+      background-color: #F498AD;
     }
 
     .material {
-      background-color: #f64fec;
+      background-color: #C56FFF;
     }
 
     .related {
-      background-color: #f6ad4f;
+      background-color: #FF8630;
     }
 
 
     /*rest*/
     body {
-      background-color: #181A1B;
-      color: #fff;
-      padding: 20px;
-      font-family: Roboto, sans-serif;
       margin: 0px;
+      padding: 50px;
+      font-family: Roboto, sans-serif;
       text-align: center;
+      background-color: #181A1B;
+      color: #FFFFFF;
     }
 
     :checked ~ .cart-product{
@@ -206,12 +204,60 @@
         "warranty     warranty sizes       sizes"
         "material     material material    related";
     }
+
+    .checkbox-label {
+      position: relative;
+      cursor: pointer;
+    }
+
+    .checkbox {
+      width: 24px;
+      height: 24px;
+      opacity: 0;
+      margin-right: 15px;
+    }
+
+    .checkbox + .checkbox-label .checkbox-title::before {
+      content: '';
+      position: absolute;
+      right: calc(100% + 15px);
+      top: calc(50% - 12px);
+      width: 24px;
+      height: 24px;
+      border: 1px solid #FFFFFF;
+      border-radius: 6px;
+    }
+
+    .checkbox:focus + .checkbox-label .checkbox-title::before {
+      border-color: #2E9AFF;
+    }
+
+    .checkbox:checked + .checkbox-label .checkbox-title::after {
+      content: '';
+      position: absolute;
+      right: calc(100% + 20px);
+      top: calc(50% - 7px);
+      width: 14px;
+      height: 14px;
+      border-radius: 3px;
+      background-color: #2E9AFF;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+
+      .cart-product {
+        margin-top: 30px;
+      }
+    }
   </style>
         <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 <body>
-<input type="checkbox"  id="is-mobile">
-<label for="is-mobile">
-  Мобильная версия
+<input type="checkbox"  id="is-mobile" class="checkbox">
+<label for="is-mobile" class="checkbox-label">
+  <span class="checkbox-title">Мобильная версия</span>
 </label>
 <div class="cart-product">
   <div class="image">Изображение</div>
diff --git a/css/grid-guide/images/practice-desktop.png b/css/grid-guide/images/practice-desktop.png
index 13441c57e8..608310c874 100644
Binary files a/css/grid-guide/images/practice-desktop.png and b/css/grid-guide/images/practice-desktop.png differ
diff --git a/css/grid-guide/images/practice-mobile.png b/css/grid-guide/images/practice-mobile.png
index e01056e0ab..1ec5122dbf 100644
Binary files a/css/grid-guide/images/practice-mobile.png and b/css/grid-guide/images/practice-mobile.png differ
diff --git a/css/grid-guide/index.11tydata.json b/css/grid-guide/index.11tydata.json
index 16290837d8..ae88382127 100644
--- a/css/grid-guide/index.11tydata.json
+++ b/css/grid-guide/index.11tydata.json
@@ -1,4 +1,4 @@
 {
-  "updatedAt": "2023-10-25T11:22:12.060Z",
+  "updatedAt": "2023-12-20T10:07:27.936Z",
   "createdAt": "2021-07-07T10:15:27.000Z"
 }
diff --git a/css/grid-guide/index.md b/css/grid-guide/index.md
index 493d99af71..b5b2eb5898 100644
--- a/css/grid-guide/index.md
+++ b/css/grid-guide/index.md
@@ -12,6 +12,7 @@ contributors:
   - corocoto
   - filimonovalexey
   - starhamster
+  - skorobaeus
 editors:
   - tachisis
 keywords:
diff --git a/css/grid-guide/practice/meded90.md b/css/grid-guide/practice/meded90.md
index 18548efb08..df905a81a2 100644
--- a/css/grid-guide/practice/meded90.md
+++ b/css/grid-guide/practice/meded90.md
@@ -40,7 +40,7 @@
 }
 ```
 
-<iframe title="Гибкая сетка на гридах" src="../demos/mobile-example/" height="600"></iframe>
+<iframe title="Гибкая сетка на гридах" src="../demos/mobile-example/" height="680"></iframe>
 
 <!-- yaspeller ignore:start -->
 
diff --git a/css/index.md b/css/index.md
index 5c9cb76c7a..60c4d327bc 100644
--- a/css/index.md
+++ b/css/index.md
@@ -235,6 +235,7 @@ groups:
   - name: 'Флексбоксы'
     items:
       - flexbox-guide
+      - flex-grow-shrink
       - flex
       - flex-basis
       - flex-direction
diff --git a/css/position/demos/general-demo/index.html b/css/position/demos/playground/index.html
similarity index 71%
rename from css/position/demos/general-demo/index.html
rename to css/position/demos/playground/index.html
index 34caab428e..ed1dde5465 100644
--- a/css/position/demos/general-demo/index.html
+++ b/css/position/demos/playground/index.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap">
   <style>
     *,
     *::before,
@@ -21,45 +21,35 @@
     }
 
     body {
-      min-height: 100vh;
-      padding: 50px;
       display: flex;
-      align-items: center;
-      justify-content: center;
+      min-height: 100vh;
+      padding: 0 50px;
       background-color: #18191C;
       color: #FFFFFF;
       font-family: "Roboto", sans-serif;
     }
 
-    @media (max-width: 768px) {
-      body {
-        padding: 30px;
-      }
-    }
-
-    .container {
-      width: 80%;
-      margin: 0 auto;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
+    .playground-wrapper {
+      width: max(300px, calc(100% / 3 * 2));
     }
 
-    .demo {
+    .playground {
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
+      min-width: 300px;
+      max-width: 600px;
+      margin-inline-start: auto;
     }
 
     .circle,
     .chosenOne {
-      width: 200px;
-      height: 200px;
+      width: 90px;
+      height: 90px;
       margin: 5px;
       border-radius: 50%;
     }
 
-
     .circle {
       background-color: #2E9AFF;
     }
@@ -68,80 +58,48 @@
       background-color: #F498AD;
     }
 
-    .heading {
-      border: 1px solid white;
-      margin-bottom: 20px;
+    .dashboard-wrapper {
+      flex-shrink: 0;
+      width: max(370px, calc(100% / 3));
     }
 
     .dashboard {
-      width: 100%;
+      position: fixed;
       display: flex;
       flex-direction: column;
-      align-items: center;
-      margin: 0 auto;
+      justify-content: center;
+      align-items: flex-end;
+      gap: 40px;
+      top: 0;
+      bottom: 0;
+      width: 370px;
+      padding: 50px;
+      background-color: rgb(24 25 28 / 75%);
     }
 
-    .input-radio {
+    .inputs-sides {
+      width: 270px;
       display: flex;
-      justify-content: center;
-      margin-bottom: 12px;
+      flex-wrap: wrap;
+      gap: 10px 0;
     }
 
-    .paragraph {
-      border: 1px solid white;
-      padding: 20px;
+    .inputs-coordinates {
+      width: 270px;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px 0;
     }
 
     .coordinates {
       display: flex;
-      justify-content: center;
+      justify-content: flex-end;
       align-items: baseline;
-      margin-bottom: 5px;
-    }
-
-    .inputs {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .button {
-      margin: 30px;
-      align-self: flex-end;
-      min-width: 210px;
-      color: #000000;
-      font-size: 18px;
-      font-weight: 300;
-      font-family: inherit;
-      transition: background-color 0.2s linear;
-      border: 2px solid transparent;
-      border-radius: 6px;
-      padding: 9px 15px;
-    }
-
-    .button:hover {
-      background-color: #FFFFFF;
-      cursor: pointer;
-      transition: background-color 0.2s linear;
-    }
-
-    .button:focus-visible {
-      border: 2px solid #FFFFFF;
-      outline: none;
-    }
-
-    .button:focus {
-      border: 2px solid #FFFFFF;
-      outline: none;
-    }
-
-    .button-blue {
-      background-color: #2E9AFF;
+      width: 135px;
     }
 
     .coordinate {
-      width: 300px;
+      width: 75px;
       border: 1px solid #FFFFFF;
       border-radius: 6px;
       padding: 10px 15px;
@@ -159,43 +117,23 @@
       outline: none;
     }
 
-    textarea {
-      min-width: 300px;
-      max-width: 300px;
-      min-height: 100px;
-      max-height: 300px;
-      border: 1px solid #FFFFFF;
-      border-radius: 6px;
-      padding: 10px 15px;
-      background-color: transparent;
-      color: #FFFFFF;
-      font-size: 18px;
-      font-weight: 300;
-      font-family: inherit;
-    }
-
-    textarea:focus {
-      border-color: #2E9AFF;
-      outline: none;
-    }
-
     .name {
       margin-right: 7px;
     }
 
-
     .radio-label {
       position: relative;
       display: flex;
       align-items: center;
+      justify-content: flex-end;
+      width: 135px;
       cursor: pointer;
-      margin-right: 20px;
     }
 
     .radio-title::before {
       content: "";
       position: absolute;
-      left: 0;
+      right: 0;
       top: calc(50% - 12px);
       width: 25px;
       height: 25px;
@@ -207,14 +145,14 @@
       width: 25px;
       height: 25px;
       opacity: 0;
-      margin-right: 15px;
+      margin-inline-start: 15px;
     }
 
-    .radio:focus + .radio-title::before {
+    .radio-label:has(.radio:focus) .radio-title::before {
       border-color: #2E9AFF;
     }
 
-    .radio:checked + .radio-title::before {
+    .radio-label:has(.radio:checked) .radio-title::before {
       background-color: #FFFFFF;
       background: radial-gradient(circle,
           #FFFFFF 0%,
@@ -222,74 +160,138 @@
           transparent 50%,
           transparent 100%);
     }
+
+    .button {
+      width: 100%;
+      min-width: 210px;
+      border: 2px solid transparent;
+      border-radius: 6px;
+      margin-block-start: 30px;
+      padding: 9px 15px;
+      color: #000000;
+      font-size: 18px;
+      font-weight: 300;
+      font-family: inherit;
+      transition: background-color 0.2s linear;
+    }
+
+    .button:hover {
+      background-color: #FFFFFF;
+      cursor: pointer;
+      transition: background-color 0.2s linear;
+    }
+
+    .button:focus-visible {
+      border: 2px solid #FFFFFF;
+      outline: none;
+    }
+
+    .button:focus {
+      border: 2px solid #FFFFFF;
+      outline: none;
+    }
+
+    .button-blue {
+      background-color: #2E9AFF;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 0 30px;
+      }
+
+      .playground-wrapper {
+        width: max(300px, 100%);
+      }
+
+      .playground {
+        margin: auto;
+      }
+
+      .dashboard-wrapper {
+        width: 0;
+      }
+
+      .dashboard {
+        align-items: center;
+        gap: 25px;
+        top: auto;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: auto;
+        padding: 30px;
+      }
+
+      .inputs-sides {
+        justify-content: center;
+      }
+
+      .button {
+        margin-block-start: 15px;
+      }
+    }
   </style>
         <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 <body>
-  <div class="container">
+  <div class="playground-wrapper">
+    <div class="playground">
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="chosenOne" id="chosenOne"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+    </div>
+  </div>
+  <div class="dashboard-wrapper">
     <div class="dashboard">
-      <form class="input-radio">
+      <form class="inputs-sides">
         <label class="radio-label">
-          <input class="radio" type="radio" value="relative" name="position">
           <span class="radio-title">relative</span>
+          <input class="radio" type="radio" value="relative" name="position" checked>
         </label>
         <label class="radio-label">
-          <input class="radio" type="radio" value="absolute" name="position">
           <span class="radio-title">absolute</span>
+          <input class="radio" type="radio" value="absolute" name="position">
         </label>
         <label class="radio-label">
-          <input class="radio" type="radio" value="fixed" name="position">
           <span class="radio-title">fixed</span>
+          <input class="radio" type="radio" value="fixed" name="position">
         </label>
         <label class="radio-label">
-          <input class="radio" type="radio" value="sticky" name="position">
           <span class="radio-title">sticky</span>
+          <input class="radio" type="radio" value="sticky" name="position">
         </label>
       </form>
-      <form class="inputs">
+      <form class="inputs-coordinates">
         <div class="coordinates">
           <label class="name" for="coordinate">top</label>
-          <input id="coordinate" class="coordinate" value="0" type="text" name="top"
-            placeholder="координата в пикселях"></input>
+          <input id="coordinate" class="coordinate" value="50" type="text" name="top"
+            placeholder="0"></input>
         </div>
         <div class="coordinates">
           <label class="name" for="coordinate">left</label>
-          <input id="coordinate" class="coordinate" value="0" type="text" name="left"
-            placeholder="координата в пикселях"></input>
+          <input id="coordinate" class="coordinate" value="50" type="text" name="left"
+            placeholder="0"></input>
         </div>
         <div class="coordinates">
           <label class="name" for="coordinate" type="text">bottom</label>
-          <input id="coordinate" class="coordinate" name="bottom" value="0" placeholder="координата в пикселях"></input>
+          <input id="coordinate" class="coordinate" name="bottom" value="0"
+            placeholder="0"></input>
         </div>
         <div class="coordinates">
           <label class="name" for="coordinate">right</label>
           <input id="coordinate" class="coordinate" value="0" type="text" name="right"
-            placeholder="координата в пикселях"></input>
+            placeholder="0"></input>
         </div>
         <button class="button button-blue" type="button" onClick="setPosition()">Попробовать</button>
       </form>
     </div>
-    <div class="demo">
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="chosenOne" id="chosenOne"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-    </div>
   </div>
   <script>
     function setPosition() {
@@ -307,6 +309,14 @@
       chosen.style.bottom = bottomValue ? `${bottomValue}px` : 'auto'
       chosen.style.right = rightValue ? `${rightValue}px` : 'auto'
     }
+
+    // генерация кружков
+    const playground = document.querySelector(".playground")
+    for (let i = 0; i < 104; i++) {
+      let circle = document.createElement("div")
+      circle.classList.add("circle")
+      playground.appendChild(circle)
+    }
   </script>
 </body>
 </html>
diff --git a/css/position/index.11tydata.json b/css/position/index.11tydata.json
index 0dde6d951f..541fcbc2bc 100644
--- a/css/position/index.11tydata.json
+++ b/css/position/index.11tydata.json
@@ -1,4 +1,4 @@
 {
-  "updatedAt": "2023-08-21T10:09:04.838Z",
+  "updatedAt": "2023-12-20T10:07:27.936Z",
   "createdAt": "2021-06-14T19:48:04.000Z"
 }
diff --git a/css/position/index.md b/css/position/index.md
index b36516358b..9f07d18b12 100644
--- a/css/position/index.md
+++ b/css/position/index.md
@@ -119,4 +119,6 @@ tags:
 
 <iframe title="Положение по второй оси при нестатичном позиционировании" src="demos/absolute-sec-axis/" height="495"></iframe>
 
-<iframe title="Общая интерактивная демка по всем стилям позиционирования" src="demos/general-demo" height="700"></iframe>
+💡 Вы можете поэкспериментировать с разными стилями позиционирования и значениями свойств в демке-песочнице ниже:
+
+<iframe title="Общая интерактивная демка по всем стилям позиционирования" src="demos/playground" height="500"></iframe>
diff --git a/css/scrollbar-color/index.11tydata.json b/css/scrollbar-color/index.11tydata.json
index 9ac09da136..31915a1077 100644
--- a/css/scrollbar-color/index.11tydata.json
+++ b/css/scrollbar-color/index.11tydata.json
@@ -1,4 +1,4 @@
 {
   "createdAt": "2022-12-07T09:10:11.203Z",
-  "updatedAt": "2023-05-09T21:47:42.101Z"
+  "updatedAt": "2023-12-20T07:06:30.225Z"
 }
diff --git a/css/scrollbar-color/index.md b/css/scrollbar-color/index.md
index f9ada5164f..6a6800835c 100644
--- a/css/scrollbar-color/index.md
+++ b/css/scrollbar-color/index.md
@@ -21,7 +21,7 @@ tags:
 
 <aside>
 
-🦊 На данный момент `scrollbar-color` очень слабо поддерживается браузерами ([Can I Use](https://caniuse.com/mdn-css_properties_scrollbar-color)). Свойство будет работать только в Firefox.
+🦊 На данный момент `scrollbar-color` очень слабо поддерживается браузерами ([Can I Use](https://caniuse.com/mdn-css_properties_scrollbar-color)). Свойство будет работать только в Firefox и Google Chrome выше 121 версии.
 
 Если вы используете любой другой браузер, то `scrollbar-color` не сработает. Поэтому под каждым демо мы добавим картинку того, как это выглядит в Firefox.
 
diff --git a/css/specificity/index.11tydata.json b/css/specificity/index.11tydata.json
index 781bb5fbe8..72f1ed50f9 100644
--- a/css/specificity/index.11tydata.json
+++ b/css/specificity/index.11tydata.json
@@ -1,4 +1,4 @@
 {
   "createdAt": "2021-08-13T05:46:06.256Z",
-  "updatedAt": "2023-05-09T21:47:42.106Z"
+  "updatedAt": "2023-12-20T06:56:38.271Z"
 }
diff --git a/css/specificity/index.md b/css/specificity/index.md
index ebcc9a3f8b..f0660e0f35 100644
--- a/css/specificity/index.md
+++ b/css/specificity/index.md
@@ -101,7 +101,7 @@ div.element#this {
 }
 ```
 
-У селектора в CSS будет специфичность 1.1.1, потому что там указан один идентификатор, один класс и один селектор тега. Но в итоге текст в блоке будет пурпурным, а рамки не будет совсем. Потому что у тега `style` вес равен 1.0.0.0 🏋️
+У селектора в CSS будет специфичность 1.1.1, потому что там указан один идентификатор, один класс и один селектор тега. Но в итоге текст в блоке будет пурпурным, а рамки не будет совсем. Потому что у атрибута `style` вес равен 1.0.0.0 🏋️
 
 ## `!important`
 
diff --git a/docs/preview.md b/docs/preview.md
index 54b0f513cc..694d6387a3 100644
--- a/docs/preview.md
+++ b/docs/preview.md
@@ -2,25 +2,38 @@
 
 Иногда стандартного предпросмотра маркдауна недостаточно, и нужно посмотреть на статью в оформлении сайта.
 
-Для этого вам необходимо собрать его локально.
+Мы сделали такой предпросмотр удобным с помощью Docker. Для этого необходимо выполнить следующие команды:
+
+1. Установите
+    - на компьютер Windows или Mac: [Docker Desktop](https://www.docker.com/products/docker-desktop);
+    - на Ubuntu Linux: [Docker Engine](https://docs.docker.com/engine/install/ubuntu/);
+        - на других Lunux-дистрибутивах не тестировалось, но найти их можно на [сайте Docker](https://docs.docker.com/engine/install/);
+        - на всех Linux-дистрибутивах, чтобы Docker не требовал прав супер-пользователя, его необходимо добавить в группу с правами после установки ([инструкция](https://docs.docker.com/engine/install/linux-postinstall/)).
+1. Откройте консоль и перейдите в папку с этого репозитория.
+1. Выполните команду `./start.sh` на Mac или Linux, либо `bash -c "./start.sh"` на Windows.
+1. Следуйте инструкциям
+1. Дождитесь, когда в консоли появится заголовок `Access URLs`.
+1. Перейдите по адресу [http://localhost:8080](http://localhost:8080) на вашу локальную копию сайта.
+
+Есть и другой способ без Docker. Для этого вам необходимо собрать сайт локально:
 
 1. Стягиваете себе репозиторий с контентом.
 1. Проверьте, что у вас установлены [Node.js](https://nodejs.org/en/) и NPM. Это можно сделать командами `npm -v` и `node -v`. Если получаете корректный ответ с версией, всё установлено. Когда нет, мы рекомендуем актуальную LTS-версию.
 1. Клонируете [репозиторий с платформой](https://github.com/doka-guide/platform). Папка с платформой и папка с контентом должны лежать рядом.
 
-    ```
-    📁 родительская папка
-    |
-    |- 📁 content
-    |- 📁 platform
-    ```
+```
+📁 родительская папка
+|
+|- 📁 content
+|- 📁 platform
+```
 
 1. В папке с платформой дублируете файл `.env.example` и переименовываете копию в `.env`. Если у папки с контентом другое имя, не _content_, не забудьте изменить значение параметра `PATH_TO_CONTENT` в файле `.env`.
 1. Устанавливаете зависимости командой `npm i`.
 1. Запускаете сборку командой `npm start`.
 
+[Больше информации о локальной сборке в репозитории платформы](https://github.com/doka-guide/platform/blob/main/docs/how-to-run.md).
+
 🧨 Вы можете редактировать статью и видеть все изменения вживую — достаточно не закрывать терминал, в котором запущена сборка. Для коммитов откройте новую вкладку терминала, в котором нужно зайти в папку с контентом. Останавливать и запускать сборку платформы после каждого изменения в контенте не нужно. Все изменения подтянутся автоматически.
 
 Чтобы выключить локальную копию сайта, нажмите <kbd>Ctrl C</kbd> в консоли, где работает сборка платформы.
-
-[Больше информации о сборке в репозитории платформы](https://github.com/doka-guide/platform/blob/main/docs/how-to-run.md).
diff --git a/html/dialog/demos/backdrop-close/index.html b/html/dialog/demos/backdrop-close/index.html
index 5db550cd7a..bad853f3a8 100644
--- a/html/dialog/demos/backdrop-close/index.html
+++ b/html/dialog/demos/backdrop-close/index.html
@@ -43,7 +43,7 @@
 
     .button, .dialog__button {
       display: block;
-      min-width: 210px;
+      min-width: 260px;
       border: 2px solid transparent;
       border-radius: 6px;
       padding: 9px 15px;
diff --git a/html/dialog/demos/basic/index.html b/html/dialog/demos/basic/index.html
index 2db91c364d..67a3e71795 100644
--- a/html/dialog/demos/basic/index.html
+++ b/html/dialog/demos/basic/index.html
@@ -45,7 +45,7 @@
 
     .button, .dialog__button {
       display: block;
-      min-width: 210px;
+      min-width: 260px;
       border: 2px solid transparent;
       border-radius: 6px;
       padding: 9px 15px;
diff --git a/html/dialog/demos/close-dialog-outside/index.html b/html/dialog/demos/close-dialog-outside/index.html
index d51026522f..07664cc4d1 100644
--- a/html/dialog/demos/close-dialog-outside/index.html
+++ b/html/dialog/demos/close-dialog-outside/index.html
@@ -43,7 +43,7 @@
 
     .button, .dialog__button {
       display: block;
-      min-width: 210px;
+      min-width: 260px;
       border: 2px solid transparent;
       border-radius: 6px;
       padding: 9px 15px;
diff --git a/html/dialog/demos/close-variants/index.html b/html/dialog/demos/close-variants/index.html
index 22e52b330a..33934812b6 100644
--- a/html/dialog/demos/close-variants/index.html
+++ b/html/dialog/demos/close-variants/index.html
@@ -45,7 +45,7 @@
 
     .button, .dialog__button {
       display: block;
-      min-width: 210px;
+      min-width: 260px;
       border: 2px solid transparent;
       border-radius: 6px;
       padding: 9px 15px;
@@ -57,6 +57,7 @@
     }
 
     .dialog__button {
+      min-width: 300px;
       margin: 0 auto;
     }
 
@@ -135,6 +136,11 @@
         margin-bottom: 30px;
         bottom: 0;
       }
+
+      .dialog__button {
+        min-width: auto;
+        width: 100%;
+      }
     }
   </style>
         <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
diff --git a/html/dialog/demos/polyfilled/index.html b/html/dialog/demos/polyfilled/index.html
index 716a9251f7..37dea401df 100644
--- a/html/dialog/demos/polyfilled/index.html
+++ b/html/dialog/demos/polyfilled/index.html
@@ -45,7 +45,7 @@
 
     .button, .dialog__button {
       display: block;
-      min-width: 210px;
+      min-width: 260px;
       border: 2px solid transparent;
       border-radius: 6px;
       padding: 9px 15px;
diff --git a/html/dialog/demos/return-value/index.html b/html/dialog/demos/return-value/index.html
index d52ac8dcb7..2ccbc1acb7 100644
--- a/html/dialog/demos/return-value/index.html
+++ b/html/dialog/demos/return-value/index.html
@@ -52,7 +52,7 @@
 
     .button, .dialog__button {
       display: block;
-      min-width: 210px;
+      min-width: 260px;
       border: 2px solid transparent;
       border-radius: 6px;
       padding: 9px 15px;
@@ -103,7 +103,7 @@
 
     .dialog {
       width: calc(100% - 50px);
-      max-width: 550px;
+      max-width: 580px;
       border: none;
       inset: 0;
       transition: transform 0.3s ease-in-out;
diff --git a/html/dialog/demos/scroll-lock/index.html b/html/dialog/demos/scroll-lock/index.html
index 899bfdc5f0..dcfb9d7d39 100644
--- a/html/dialog/demos/scroll-lock/index.html
+++ b/html/dialog/demos/scroll-lock/index.html
@@ -53,7 +53,7 @@
 
     .button, .dialog__button {
       display: block;
-      min-width: 210px;
+      min-width: 260px;
       border: 2px solid transparent;
       border-radius: 6px;
       padding: 9px 15px;
@@ -128,13 +128,13 @@
     }
 
     .mock {
-      border: 1px solid #FFFFFF;
-      border-radius: 4px;
       padding: 20px;
       height: 130vh;
       display: grid;
       gap: 20px;
       place-content: start center;
+      background-color: #282A2E;
+      color: #E6E6E6;
     }
 
     .scroll-lock {
@@ -159,7 +159,7 @@
     <h2 class="dialog__title">Я модальное окно</h2>
     <p>Теперь я не только перекрываю остальной контент, но блокирую скролл.</p>
     <form method="dialog">
-      <button class="dialog__button button-orange">Агась 🫡</button>
+      <button class="dialog__button button-orange">Агась 🙌</button>
     </form>
   </dialog>
 
diff --git a/html/dialog/index.11tydata.json b/html/dialog/index.11tydata.json
index ef2c290fd5..e4df83638e 100644
--- a/html/dialog/index.11tydata.json
+++ b/html/dialog/index.11tydata.json
@@ -1,4 +1,4 @@
 {
   "createdAt": "2022-10-06T08:42:13.158Z",
-  "updatedAt": "2023-11-08T10:21:53.150Z"
+  "updatedAt": "2023-12-28T17:50:42.692Z"
 }
diff --git a/html/dialog/practice/baileys-li.md b/html/dialog/practice/baileys-li.md
index f8e0cb8735..cb847dd836 100644
--- a/html/dialog/practice/baileys-li.md
+++ b/html/dialog/practice/baileys-li.md
@@ -1,6 +1,6 @@
 #### Блокируем скролл
 
-Несмотря на то, что модального окно перекрывает весь остальной контент на странице с помощью псевдоэлемента `::backdrop`, вся остальная страница всё равно доступна для прокрутки. Это может смущать пользователя, если на заднем плане будет что-то мельтешить.
+Несмотря на то, что модальное окно перекрывает весь остальной контент на странице с помощью псевдоэлемента `::backdrop`, вся остальная страница всё равно доступна для прокрутки. Это может смущать пользователя, если на заднем плане будет что-то мельтешить.
 
 Решить эту проблему можно, ставя [`overflow: hidden`](/css/overflow/) на [`<body>`](/html/body/). В демке ниже это реализовано добавлением класса `scroll-lock`.
 
diff --git a/html/index.md b/html/index.md
index b4ea04cc99..e31d97781c 100644
--- a/html/index.md
+++ b/html/index.md
@@ -31,6 +31,7 @@ groups:
       - small
       - pre
       - code
+      - dir
   - name: 'Семантика'
     items:
       - div
@@ -42,6 +43,7 @@ groups:
       - article
       - aside
       - nav
+      - search
       - time
       - data
       - sub
@@ -96,6 +98,7 @@ groups:
       - svg
       - map
       - area
+      - svg-sprite
   - name: 'Ссылки'
     items:
       - a
@@ -139,14 +142,20 @@ groups:
       - defer-async
       - template
       - output
+      - data-attributes
   - name: 'Глобальные атрибуты'
     items:
       - global-attrs
       - class
       - hidden
+      - inert
+      - dir
+      - tabindex
+      - data-attributes
   - name: 'Поисковая оптимизация'
     items:
       - seo-for-beginners
+      - noindex
 ---
 
 HTML — язык разметки для создания структуры веб-страницы и представления контента. Благодаря разметке браузер знает в каком порядке отображать элементы, и что они значат.
diff --git a/html/input/demos/inputs/index.html b/html/input/demos/inputs/index.html
index 7fc35041e2..1bc76480bf 100644
--- a/html/input/demos/inputs/index.html
+++ b/html/input/demos/inputs/index.html
@@ -13,26 +13,32 @@
       box-sizing: border-box;
     }
 
+    html {
+      color-scheme: dark;
+      font-size: 18px;
+    }
+
     body {
+      min-height: 100vh;
       padding: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       background-color: #18191C;
       color: #FFFFFF;
-      font-size: 18px;
       font-family: "Roboto", sans-serif;
     }
 
     form {
-      width: 800px;
-      margin: auto;
+      width: 100%;
+      min-width: 550px;
+      max-width: 800px;
     }
 
     .buttons {
       display: flex;
       justify-content: flex-end;
-    }
-
-    .button + .button {
-      margin-left: 50px;
+      gap: 50px;
     }
 
     .button {
@@ -41,12 +47,16 @@
       border-radius: 6px;
       padding: 8px 15px;
       color: #000000;
-      font-size: 18px;
+      font-size: 1.125rem;
       font-weight: 300;
       font-family: inherit;
       transition: background-color 0.2s linear;
     }
 
+    .button[disabled] {
+      opacity: 0.5;
+    }
+
     .button:hover {
       background-color: #FFFFFF;
       cursor: pointer;
@@ -54,16 +64,16 @@
     }
 
     .button:focus, .button:focus-visible {
-      border: 2px solid #ffffff;
+      border: 2px solid #FFFFFF;
       outline: none;
     }
 
     .button-orange {
-    background-color: #FF8630;
+      background-color: #FF8630;
     }
 
     .button-blue {
-    background-color: #2E9AFF;
+      background-color: #2E9AFF;
     }
 
     .input-label, .radio-set {
@@ -72,17 +82,17 @@
     }
 
     .input-title, .radio-legend {
+      margin-right: 35px;
       font-size: 24px;
       font-weight: 500;
       line-height: 1;
-      margin-right: 35px;
     }
 
     .input {
       flex-shrink: 0;
-      border: 1px solid #ffffff;
-      border-radius: 6px;
       padding: 10px 15px;
+      border: 1px solid #FFFFFF;
+      border-radius: 6px;
       background-color: transparent;
       color: #ffffff;
       font-family: inherit;
@@ -140,12 +150,16 @@
     .radio {
       width: 25px;
       height: 25px;
-      opacity: 0;
       margin-right: 15px;
+      opacity: 0;
+    }
+
+    .radio:focus + .radio-title::before {
+      border-color: #ff8630;
+      border-width: 1px;
     }
 
     .radio:checked + .radio-title::before {
-      background-color: #FFFFFF;
       background: radial-gradient(
         circle,
         #FF8630 0%,
@@ -158,42 +172,90 @@
     .input-label, .radio-set, .radio-legend {
       margin-bottom: 25px;
     }
+
+    .visually-hidden {
+      position: absolute;
+      margin: -1px;
+      -webkit-clip-path: inset(50%);
+      clip-path: inset(50%);
+      clip: rect(0 0 0 0);
+      overflow: hidden;
+      width: 1px;
+      height: 1px;
+      border: 0;
+      padding: 0;
+      white-space: nowrap;
+    }
+
+    @media screen and (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+
+      form {
+        min-width: 100%;
+      }
+
+      .input-label, .radio-set {
+        flex-direction: column;
+      }
+
+      .input-title {
+        margin-bottom: 1em;
+      }
+
+      .input, .radio-container, .input-textarea {
+        width: 100%;
+        min-width: 100%;
+      }
+
+      .buttons {
+        flex-direction: column;
+        gap: 20px;
+      }
+    }
   </style>
         <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 <body>
-  <form name="test" method="post" action="input1.php">
-    <label class="input-label">
-      <span class="input-title">Текстовое поле в одну строчку:</span>
-      <input class="input" type="text" size="40">
-    </label>
-
-    <fieldset class="radio-set">
-      <span class="radio-legend">Радио-кнопки:</span>
-      <div class="radio-container">
-        <label class="radio-label">
-          <input class="radio" type="radio" name="browser" value="ie" id="ie">
-          <span class="radio-title">Вариант 1</span>
-        </label>
-        <label class="radio-label">
-          <input class="radio" type="radio" name="browser" value="opera" id="opera">
-          <span class="radio-title">Вариант 2</span>
-        </label>
-        <label class="radio-label">
-          <input class="radio" type="radio" name="browser" value="firefox" id="firefox">
-          <span class="radio-title">Вариант 3</span>
-        </label>
-      </div>
-    </fieldset>
-
-    <label class="input-label">
-      <span class="input-title">Большое текстовое поле:</span>
-      <textarea class="input input-textarea" name="comment" cols="40" rows="3"></textarea>
-    </label>
-
-    <div class="buttons">
-      <input type="reset" value="Очистить" class="button button-blue">
-      <input type="submit" value="Отправить" class="button button-orange">
+<form method="get" action="../result">
+  <label class="input-label">
+    <span class="input-title">Текстовое поле в одну строчку:</span>
+    <input class="input" type="text" size="40" name="one-line">
+  </label>
+
+  <label class="input-label">
+    <span class="input-title">Поле для пароля:</span>
+    <input class="input" type="password" size="40" name="one-line-password">
+  </label>
+
+  <fieldset class="radio-set">
+    <legend class="visually-hidden">Радиокнопки:</legend>
+    <span class="radio-legend" aria-hidden="true">Радиокнопки:</span>
+    <div class="radio-container">
+      <label class="radio-label">
+        <input class="radio" type="radio" name="browser" value="ie" id="ie">
+        <span class="radio-title">Вариант 1</span>
+      </label>
+      <label class="radio-label">
+        <input class="radio" type="radio" name="browser" value="opera" id="opera">
+        <span class="radio-title">Вариант 2</span>
+      </label>
+      <label class="radio-label">
+        <input class="radio" type="radio" name="browser" value="firefox" id="firefox">
+        <span class="radio-title">Вариант 3</span>
+      </label>
     </div>
-  </form>
+  </fieldset>
+
+  <label class="input-label">
+    <span class="input-title">Большое текстовое поле:</span>
+    <textarea class="input input-textarea" name="comment" cols="40" rows="3"></textarea>
+  </label>
+
+  <div class="buttons">
+    <input type="reset" value="Очистить" class="button button-blue">
+    <input type="submit" value="Отправить" class="button button-orange" disabled>
+  </div>
+</form>
 </body>
 </html>
diff --git a/html/input/images/tel.jpeg b/html/input/images/tel.jpeg
deleted file mode 100644
index ae2ec1f00f..0000000000
Binary files a/html/input/images/tel.jpeg and /dev/null differ
diff --git a/html/input/images/tel.png b/html/input/images/tel.png
new file mode 100644
index 0000000000..ab0a5c570e
Binary files /dev/null and b/html/input/images/tel.png differ
diff --git a/html/input/index.11tydata.json b/html/input/index.11tydata.json
index b3159e6d94..5537e68c38 100644
--- a/html/input/index.11tydata.json
+++ b/html/input/index.11tydata.json
@@ -1,4 +1,4 @@
 {
-  "updatedAt": "2022-01-12T11:35:22.708Z",
+  "updatedAt": "2023-12-20T07:07:43.354Z",
   "createdAt": "2021-07-07T10:15:27.000Z"
 }
diff --git a/html/input/index.md b/html/input/index.md
index 0ccda0c9d8..59dfa94ac8 100644
--- a/html/input/index.md
+++ b/html/input/index.md
@@ -12,6 +12,7 @@ contributors:
   - skorobaeus
   - valeriimakhniuk
   - whyme0
+  - jag-k
 editors:
   - tachisis
 keywords:
@@ -104,7 +105,7 @@ tags:
 
 Большое преимущество установки правильного значения для `type` — в мобильных браузерах будет появляться «специальная» клавиатура, упрощающая и улучшающая пользовательский опыт. Так, для `<input type=tel>` у пользователя отобразится клавиатура, содержащая лишь цифры и специальные символы, нужные для корректного ввода номера телефона. Пример такой клавиатуры можно увидеть на картинке ниже:
 
-![Пример клавиатуры для поля ввода номера телефона](images/tel.jpeg)
+![Пример клавиатуры для поля ввода номера телефона](images/tel.png)
 
 ### `value`
 
@@ -141,38 +142,89 @@ tags:
 Вот так будет выглядеть простая форма, собранная из нескольких элементов `<input>`. Мы поместили их все в контейнер `<form>`, чтобы данные, которые введёт пользователь, можно было отправить на сервер:
 
 ```html
-<form name="test" method="post" action="input1.php">
-  <label>
-    Текстовое поле в одну строчку:
-    <input type="text" size="40">
+<form method="get" action="../result">
+  <label class="input-label">
+    <span class="input-title">Текстовое поле в одну строчку:</span>
+    <input
+      class="input"
+      type="text"
+      size="40"
+      name="one-line"
+    >
   </label>
 
-  <fieldset>
-    Радиокнопки:
-    <label class="radio-label">
-      <input type="radio" name="browser" value="ie" id="ie">
-      Вариант 1
-    </label>
-    <label class="radio-label">
-      <input type="radio" name="browser" value="opera" id="opera">
-      Вариант 2
-    </label>
-    <label class="radio-label">
-      <input type="radio" name="browser" value="firefox" id="firefox">
-      Вариант 3
-    </label>
+  <label class="input-label">
+    <span class="input-title">Поле для пароля:</span>
+    <input
+      class="input"
+      type="password"
+      size="40"
+      name="one-line-password"
+    >
+  </label>
+
+  <fieldset class="radio-set">
+    <legend class="visually-hidden">Радиокнопки:</legend>
+    <span class="radio-legend" aria-hidden="true">Радиокнопки:</span>
+    <div class="radio-container">
+      <label class="radio-label">
+        <input
+          class="radio"
+          type="radio"
+          name="browser"
+          value="ie"
+          id="ie"
+        >
+        <span class="radio-title">Вариант 1</span>
+      </label>
+      <label class="radio-label">
+        <input
+          class="radio"
+          type="radio"
+          name="browser"
+          value="opera"
+          id="opera"
+        >
+        <span class="radio-title">Вариант 2</span>
+      </label>
+      <label class="radio-label">
+        <input
+          class="radio"
+          type="radio"
+          name="browser"
+          value="firefox"
+          id="firefox"
+        >
+        <span class="radio-title">Вариант 3</span>
+      </label>
+    </div>
   </fieldset>
 
-  <label>
-    Большое текстовое поле:
-    <textarea name="comment" cols="40" rows="3"></textarea>
+  <label class="input-label">
+    <span class="input-title">Большое текстовое поле:</span>
+    <textarea
+      class="input input-textarea"
+      name="comment"
+      cols="40"
+      rows="3"
+    >
+    </textarea>
   </label>
 
-  <div>
-    <input type="reset" value="Очистить">
-    <input type="submit" value="Отправить">
+  <div class="buttons">
+    <input
+      type="reset"
+      value="Очистить"
+      class="button button-blue"
+    >
+    <input
+      type="submit"
+      value="Отправить"
+      class="button button-orange"
+      disabled
+    >
   </div>
 </form>
 ```
 
-<iframe title="Различные input" src="demos/inputs/" height="440"></iframe>
+<iframe title="Различные input" src="demos/inputs/" height="550"></iframe>
diff --git a/html/select/demos/attributes/index.html b/html/select/demos/attributes/index.html
index 333ba96138..357676522a 100644
--- a/html/select/demos/attributes/index.html
+++ b/html/select/demos/attributes/index.html
@@ -19,7 +19,7 @@
       align-items: center;
       justify-content: center;
       min-height: 100vh;
-      padding: 10px 50px 100px;
+      padding: 50px;
       background-color: #18191c;
       color: #ffffff;
       font-family: "Roboto", sans-serif;
diff --git a/html/select/index.11tydata.json b/html/select/index.11tydata.json
index 89fb0c167c..3141ea68cb 100644
--- a/html/select/index.11tydata.json
+++ b/html/select/index.11tydata.json
@@ -1,4 +1,4 @@
 {
-  "updatedAt": "2022-11-01T09:06:29.547Z",
+  "updatedAt": "2023-12-20T10:07:27.937Z",
   "createdAt": "2021-07-02T08:50:36.000Z"
 }
diff --git a/js/array-length/index.11tydata.json b/js/array-length/index.11tydata.json
index 84db46192b..59d22cfab3 100644
--- a/js/array-length/index.11tydata.json
+++ b/js/array-length/index.11tydata.json
@@ -1,4 +1,4 @@
 {
   "createdAt": "2021-09-13T20:45:45.776Z",
-  "updatedAt": "2022-07-06T07:03:09.570Z"
+  "updatedAt": "2023-12-19T10:00:33.145Z"
 }
diff --git a/js/array-length/index.md b/js/array-length/index.md
index 79b412bf08..97cb245452 100644
--- a/js/array-length/index.md
+++ b/js/array-length/index.md
@@ -63,7 +63,7 @@ console.log(todos)
 // ['купить молока', 'почитать Доку', <2 пустых ячейки>]
 
 todos.forEach(function(todo, index) {
-  console.log(`${index + 1}. todo`)
+  console.log(`${index + 1}. ${todo}`)
 })
 // 1. купить молока
 // 2. почитать Доку
diff --git a/js/date/index.md b/js/date/index.md
index 3fac44ed65..edc0097bad 100644
--- a/js/date/index.md
+++ b/js/date/index.md
@@ -84,9 +84,9 @@ console.log(utcDate.toISOString())
 
 ## Как пишется
 
-`Date` может немного запутать, часть параметров начинают отчёт с нуля, а часть с 1.
+`Date` может немного запутать, часть параметров начинают отсчёт с нуля, а часть с 1.
 
-Например, при установке месяца, отчёт идёт с 0, где 0 — это январь. При выводе дня недели возвращаемое значение также начинается с 0 и означает воскресенье.
+Например, при установке месяца, отсчёт идёт с 0, где 0 — это январь. При выводе дня недели возвращаемое значение также начинается с 0 и означает воскресенье.
 
 Исключением из этого правила являются параметры, связанные с годом и днём месяца (первое число месяца — 1).
 
diff --git a/js/deal-with-forms/index.11tydata.json b/js/deal-with-forms/index.11tydata.json
index e4175762d7..ae93831536 100644
--- a/js/deal-with-forms/index.11tydata.json
+++ b/js/deal-with-forms/index.11tydata.json
@@ -1,4 +1,4 @@
 {
-  "updatedAt": "2022-07-25T06:41:38.816Z",
+  "updatedAt": "2023-12-27T11:52:12.564Z",
   "createdAt": "2021-07-09T12:54:26.000Z"
 }
diff --git a/js/deal-with-forms/index.md b/js/deal-with-forms/index.md
index db9d7c797b..dee3dc3e7b 100644
--- a/js/deal-with-forms/index.md
+++ b/js/deal-with-forms/index.md
@@ -409,7 +409,7 @@ async function handleFormSubmit(event) {
 </form>
 ```
 
-Прячем мы его, потому что хотим показать только во время запроса. Для этого напишем функцию, которые будут управлять его состоянием — делать лоадер видимым, если он не виден сейчас, и скрывать, если он виден. Так как технически это добавление и удаление класса `hidden`, то можно воспользоваться функцией `toggle` из [`classList` API](/js/element-classlist/):
+Прячем мы его, потому что хотим показать только во время запроса. Для этого напишем функцию, которая будет управлять его состоянием — делать лоадер видимым, если он не виден сейчас, и скрывать, если он виден. Так как технически это добавление и удаление класса `hidden`, то можно воспользоваться функцией `toggle` из [`classList` API](/js/element-classlist):
 
 ```js
 function toggleLoader() {
@@ -444,7 +444,7 @@ function onSuccess(formNode) {
 }
 ```
 
-Мы должны вызвать `onSuccess`, только если форма была отправлена успешна. Для этого добавим проверку на статус ответа сервера — он должен быть 200 в случае успеха (статусы ответа разобраны в [статье про HTTP протокол](/tools/http-protocol/)):
+Мы должны вызвать `onSuccess`, только если форма была отправлена успешно. Для этого добавим проверку на статус ответа сервера — он должен быть 200 в случае успеха (статусы ответа разобраны в [статье про HTTP протокол](/tools/http-protocol/):
 
 ```js
 // Вызовем её вот так:
diff --git a/js/function/demos/basic/index.html b/js/function/demos/basic/index.html
index 0a288ea02d..bdb61d3bc1 100644
--- a/js/function/demos/basic/index.html
+++ b/js/function/demos/basic/index.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap">
   <style>
     *, *::before, *::after {
       margin: 0;
@@ -29,11 +29,11 @@
     form {
       display: flex;
       flex-direction: column;
-      align-items: center;
+      align-items: flex-end;
     }
 
     label {
-      margin-right: 10px;
+      margin-right: 55px;
       font-size: 24px;
       font-weight: 500;
       line-height: 1;
@@ -60,11 +60,11 @@
 
     .button {
       display: block;
-      min-width: 210px;
+      width: 300px;
       border: 2px solid transparent;
       border-radius: 6px;
       padding: 9px 15px;
-      margin-top: 30px;
+      margin-top: 25px;
       color: #000000;
       font-size: 18px;
       font-weight: 300;
@@ -96,6 +96,12 @@
       body {
         padding: 30px;
       }
+
+      label {
+        display: block;
+        margin-right: 0;
+        margin-bottom: 10px;
+      }
     }
   </style>
         <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
diff --git a/js/function/demos/invocation/index.html b/js/function/demos/invocation/index.html
index 26ee9db9db..4da2ca5dbd 100644
--- a/js/function/demos/invocation/index.html
+++ b/js/function/demos/invocation/index.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap">
   <style>
     *, *::before, *::after {
       margin: 0;
@@ -32,7 +32,6 @@
       border: 2px solid transparent;
       border-radius: 6px;
       padding: 9px 15px;
-      margin-top: 30px;
       color: #000000;
       font-size: 18px;
       font-weight: 300;
diff --git a/js/function/index.11tydata.json b/js/function/index.11tydata.json
index 05cb8b5f4a..3141ea68cb 100644
--- a/js/function/index.11tydata.json
+++ b/js/function/index.11tydata.json
@@ -1,4 +1,4 @@
 {
-  "updatedAt": "2022-08-24T19:24:12.807Z",
+  "updatedAt": "2023-12-20T10:07:27.937Z",
   "createdAt": "2021-07-02T08:50:36.000Z"
 }
diff --git a/people/elizavetaa0/index.md b/people/elizavetaa0/index.md
new file mode 100644
index 0000000000..c16956a0e7
--- /dev/null
+++ b/people/elizavetaa0/index.md
@@ -0,0 +1,8 @@
+---
+name: 'Елизавета Курочкина'
+photo: photo.png
+badges:
+  - first-contribution-small
+---
+
+Начинающий frontend-разработчик. Учусь кодить и верстать вместе с [Практикумом](http://practicum.yandex.ru/). Пробую себя в написании статей для [Доки](https://doka.guide).
diff --git a/people/elizavetaa0/photo.png b/people/elizavetaa0/photo.png
new file mode 100644
index 0000000000..6fa995ecd4
Binary files /dev/null and b/people/elizavetaa0/photo.png differ
diff --git a/people/jag-k/index.md b/people/jag-k/index.md
new file mode 100644
index 0000000000..bcd681b53a
--- /dev/null
+++ b/people/jag-k/index.md
@@ -0,0 +1,9 @@
+---
+name: 'Олег Поздняков'
+url: https://github.com/jag-k
+photo: photo.jpg
+badges:
+  - first-contribution-small
+---
+
+Python/JS разработчик. Пере-бекендер/недо-фронтендер. Делаю сайтики, ботов, расширения для VSCode, Figma и Raycast.
diff --git a/people/jag-k/photo.jpg b/people/jag-k/photo.jpg
new file mode 100644
index 0000000000..4822c90216
Binary files /dev/null and b/people/jag-k/photo.jpg differ
diff --git a/recipes/dropdown-animation/demos/final-no-tab/index.html b/recipes/dropdown-animation/demos/final-no-tab/index.html
new file mode 100644
index 0000000000..a3778c38fd
--- /dev/null
+++ b/recipes/dropdown-animation/demos/final-no-tab/index.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Плавное выпадающее меню без скрытия — Рецепты — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
+  <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      height: 100%;
+      color-scheme: dark;
+    }
+
+    body {
+      display: grid;
+      place-items: center;
+      height: inherit;
+      padding: 50px;
+      color: #000000;
+      font-family: Roboto, sans-serif;
+      font-size: 24px;
+      background-color: #18191C;
+    }
+
+    ul {
+      padding: 0;
+      margin: 0;
+      list-style: none;
+    }
+
+    a {
+      text-decoration: none;
+      color: currentColor;
+    }
+
+    .container {
+      height: 50vb;
+    }
+
+    .button {
+      inline-size: 100%;
+      padding: 0.5lh 1.5lh;
+      font: inherit;
+      color: currentColor;
+      border: none;
+      background-color: #C56FFF;
+      transition: background-color 0.2s linear;
+      cursor: pointer;
+    }
+
+    .button:hover,
+    .button:focus-visible {
+      background-color: #FFFFFF;
+    }
+
+    .menu {
+      position: relative;
+      display: grid;
+      margin-block-start: 0.5lh;
+      background-color: #C56FFF;
+
+      overflow: hidden;
+      line-height: 0;
+      color: transparent;
+      transition: line-height 0.5s, color 0.5s;
+    }
+
+    .menu-item {
+      overflow: hidden;
+    }
+
+    .menu-link {
+      display: block;
+      padding: 0.5lh 80px;
+    }
+
+    .menu-link:hover,
+    .menu-link:focus-visible {
+      background-color: #FFFFFF;
+    }
+
+    .button.active ~ .menu {
+      line-height: 1.2;
+      color: currentColor;
+    }
+
+    @media (width <= 768px) {
+      body {
+        padding: 30px;
+      }
+    }
+  </style>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+  <div class="container">
+    <button class="button" aria-expanded="false" aria-controls="list">Меню</button>
+
+    <ul class="menu" id="list">
+      <li class="menu-item">
+        <a href="#" class="menu-link">Винни-Пух</a>
+      </li>
+      <li class="menu-item">
+        <a href="#" class="menu-link">Тигра</a>
+      </li>
+      <li class="menu-item">
+        <a href="#" class="menu-link">Пятачок</a>
+      </li>
+    </ul>
+  </div>
+
+  <script>
+    const button = document.querySelector('.button')
+
+    button.addEventListener('click', (e) => {
+      e.target.classList.toggle('active')
+      e.target.setAttribute('aria-expanded', e.target.classList.contains('active') ? 'true' : 'false')
+    })
+  </script>
+</body>
+</html>
diff --git a/recipes/dropdown-animation/demos/final/index.html b/recipes/dropdown-animation/demos/final/index.html
new file mode 100644
index 0000000000..e731842ee3
--- /dev/null
+++ b/recipes/dropdown-animation/demos/final/index.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Плавное выпадающее меню — Рецепты — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
+  <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      height: 100%;
+      color-scheme: dark;
+    }
+
+    body {
+      display: grid;
+      place-items: center;
+      height: inherit;
+      padding: 50px;
+      color: #000000;
+      font-family: Roboto, sans-serif;
+      font-size: 24px;
+      background-color: #18191C;
+    }
+
+    ul {
+      padding: 0;
+      margin: 0;
+      list-style: none;
+    }
+
+    a {
+      text-decoration: none;
+      color: currentColor;
+    }
+
+    .container {
+      height: 50vb;
+    }
+
+    .button {
+      inline-size: 100%;
+      padding: 0.5lh 1.5lh;
+      font: inherit;
+      color: currentColor;
+      border: none;
+      background-color: #C56FFF;
+      transition: background-color 0.2s linear;
+      cursor: pointer;
+    }
+
+    .button:hover,
+    .button:focus-visible {
+      background-color: #FFFFFF;
+    }
+
+    .menu {
+      position: relative;
+      display: grid;
+      margin-block-start: 0.5lh;
+      background-color: #C56FFF;
+
+      overflow: hidden;
+      line-height: 0;
+      color: transparent;
+      transition: line-height 0.5s, color 0.5s;
+    }
+
+    .menu-item {
+      overflow: hidden;
+    }
+
+    .menu-link {
+      display: block;
+      padding: 0.5lh 80px;
+    }
+
+    .menu-link:hover,
+    .menu-link:focus-visible {
+      background-color: #FFFFFF;
+    }
+
+    .button.active ~ .menu {
+      line-height: 1.2;
+      color: currentColor;
+    }
+
+    @media (width <= 768px) {
+      body {
+        padding: 30px;
+      }
+    }
+  </style>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+  <div class="container">
+    <button class="button" aria-expanded="false" aria-controls="list">Меню</button>
+
+    <ul class="menu" id="list" aria-hidden="true">
+      <li class="menu-item">
+        <a href="#" class="menu-link" tabindex="-1">Винни-Пух</a>
+      </li>
+      <li class="menu-item">
+        <a href="#" class="menu-link" tabindex="-1">Тигра</a>
+      </li>
+      <li class="menu-item">
+        <a href="#" class="menu-link" tabindex="-1">Пятачок</a>
+      </li>
+    </ul>
+  </div>
+
+  <script>
+    const button = document.querySelector('.button')
+    const menu = document.querySelector('.menu')
+    const menuLinks = document.querySelectorAll('.menu-link')
+
+    button.addEventListener('click', (e) => {
+      button.classList.toggle('active')
+
+      if (button.classList.contains('active')) {
+        button.setAttribute('aria-expanded', 'true')
+        menu.setAttribute('aria-hidden', 'false')
+        menuLinks.forEach(link => link.setAttribute('tabindex', '0'))
+      } else {
+        button.setAttribute('aria-expanded', 'false')
+        menu.setAttribute('aria-hidden', 'true')
+        menuLinks.forEach(link => link.setAttribute('tabindex', '-1'))
+      }
+    })
+  </script>
+</body>
+</html>
diff --git a/recipes/dropdown-animation/demos/no-color-transition/index.html b/recipes/dropdown-animation/demos/no-color-transition/index.html
new file mode 100644
index 0000000000..2f1ba1c8f8
--- /dev/null
+++ b/recipes/dropdown-animation/demos/no-color-transition/index.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Плавное выпадающее меню без анимации цвета — Рецепты — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
+  <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      height: 100%;
+      color-scheme: dark;
+    }
+
+    body {
+      display: grid;
+      place-items: center;
+      height: inherit;
+      padding: 50px;
+      color: #000000;
+      font-family: Roboto, sans-serif;
+      font-size: 24px;
+      background-color: #18191C;
+    }
+
+    ul {
+      padding: 0;
+      margin: 0;
+      list-style: none;
+    }
+
+    a {
+      text-decoration: none;
+      color: currentColor;
+    }
+
+    .container {
+      height: 50vb;
+    }
+
+    .button {
+      inline-size: 100%;
+      padding: 0.5lh 1.5lh;
+      font: inherit;
+      color: currentColor;
+      border: none;
+      background-color: #C56FFF;
+      transition: background-color 0.2s linear;
+      cursor: pointer;
+    }
+
+    .button:hover,
+    .button:focus-visible {
+      background-color: #FFFFFF;
+    }
+
+    .menu {
+      position: relative;
+      display: grid;
+      margin-block-start: 0.5lh;
+      background-color: #C56FFF;
+
+      overflow: hidden;
+      line-height: 0;
+      transition: line-height 0.5s;
+    }
+
+    .menu-item {
+      overflow: hidden;
+    }
+
+    .menu-link {
+      display: block;
+      padding: 0.5lh 80px;
+    }
+
+    .menu-link:hover,
+    .menu-link:focus-visible {
+      background-color: #FFFFFF;
+    }
+
+    .button.active ~ .menu {
+      line-height: 1.2;
+    }
+
+    @media (width <= 768px) {
+      body {
+        padding: 30px;
+      }
+    }
+  </style>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+  <div class="container">
+    <button class="button" aria-expanded="false" aria-controls="list">Меню</button>
+
+    <ul class="menu" id="list">
+      <li class="menu-item">
+        <a href="#" class="menu-link">Винни-Пух</a>
+      </li>
+      <li class="menu-item">
+        <a href="#" class="menu-link">Тигра</a>
+      </li>
+      <li class="menu-item">
+        <a href="#" class="menu-link">Пятачок</a>
+      </li>
+    </ul>
+  </div>
+
+  <script>
+    const button = document.querySelector('.button')
+
+    button.addEventListener('click', (e) => {
+      e.target.classList.toggle('active')
+      e.target.setAttribute('aria-expanded', e.target.classList.contains('active') ? 'true' : 'false')
+    })
+  </script>
+</body>
+</html>
diff --git a/recipes/dropdown-animation/index.md b/recipes/dropdown-animation/index.md
new file mode 100644
index 0000000000..271e27b83f
--- /dev/null
+++ b/recipes/dropdown-animation/index.md
@@ -0,0 +1,395 @@
+---
+title: "Плавное раскрытие выпадающего меню"
+description: "Раскрываем меню на чистом CSS без расчёта высоты в JavaScript и знания количества элементов."
+authors:
+  - solarrust
+contributors:
+  - skorobaeus
+related:
+  - css/numeric-types
+  - html/button
+  - css/transition
+tags:
+  - article
+---
+
+## Задача
+
+Иногда встречается задача: создать выпадающее меню, которое будет плавно раскрываться. В этом рецепте будет решение на чистом CSS. Вся магия кроется в единицах измерения [`lh`](/css/numeric-types/). Будем менять высоту строки, тем самым добившись эффекта плавного раскрытия меню.
+
+## Готовое решение
+
+Разметка в этой ситуации не играет особой роли. Вы можете адаптировать её под свои конкретные задачи. Возьмём простой вариант с кнопкой и списком ссылок.
+
+```html
+<div class="container">
+    <button
+      class="button"
+      aria-expanded="false"
+      aria-controls="list"
+    >
+      Меню
+    </button>
+
+    <ul class="menu" id="list" aria-hidden="true">
+      <li class="menu-item">
+        <a href="#" class="menu-link" tabindex="-1">Винни-Пух</a>
+      </li>
+      <li class="menu-item">
+        <a href="#" class="menu-link" tabindex="-1">Тигра</a>
+      </li>
+      <li class="menu-item">
+        <a href="#" class="menu-link" tabindex="-1">Пятачок</a>
+      </li>
+    </ul>
+  </div>
+```
+
+Вся магия будет реализована в CSS. Тут готовый код, а полный разбор стилей будет ниже.
+
+```css
+.button {
+  inline-size: 100%;
+  padding: 0.5lh 1.5lh;
+  font: inherit;
+  color: currentColor;
+  background-color: #f28482;
+  border: none;
+  cursor: pointer;
+}
+
+.button:hover,
+.button:focus-visible {
+  background-color: #f5cac3;
+}
+
+.menu {
+  position: relative;
+  display: grid;
+  margin-block-start: 0.5lh;
+  background-color: #f28482;
+
+  overflow: hidden;
+  line-height: 0;
+  color: transparent;
+  transition: line-height 0.5s, color 0.5s;
+}
+
+.menu-item {
+  overflow: hidden;
+}
+
+.menu-link {
+  display: block;
+  padding: 0.5lh 80px;
+}
+
+.menu-link:hover,
+.menu-link:focus-visible {
+  background-color: #f5cac3;
+}
+
+.button.active ~ .menu {
+  line-height: 1.2;
+  color: currentColor;
+}
+```
+
+JavaScript в этом примере будет только добавлять и удалять класс кнопке по клику или нажатию на <kbd>Enter</kbd>, а ещё менять значения атрибута [`aria-expanded`](/a11y/aria-expanded/).
+
+```js
+const button = document.querySelector('.button')
+const menu = document.querySelector('.menu')
+const menuLinks = document.querySelectorAll('.menu-link')
+
+button.addEventListener('click', (e) => {
+  button.classList.toggle('active')
+
+  if (button.classList.contains('active')) {
+    button.setAttribute('aria-expanded', 'true')
+    menu.setAttribute('aria-hidden', 'false')
+    menuLinks.forEach(link => link.setAttribute('tabindex', '0'))
+  } else {
+    button.setAttribute('aria-expanded', 'false')
+    menu.setAttribute('aria-hidden', 'true')
+    menuLinks.forEach(link => link.setAttribute('tabindex', '-1'))
+  }
+})
+```
+
+<iframe title="Плавное выпадающее меню" src="demos/final/" height="450"></iframe>
+
+## Разбор решения
+
+Чаще всего, чтобы раскрыть выпадающее меню плавно, используют JavaScript для расчёта конечной высоты элемента. Это нужно, чтобы анимировать переход между `height: 0px` и рассчитанной конечной высотой в пикселях.
+
+Обойдёмся без лишних усилий только CSS и его современными возможностями.
+
+### Разметка
+
+Для начала разберём простую разметку примера. Она может быть какой угодно, в зависимости от решаемой вами задачи.
+
+Это могут быть вложенные списки, `<details>` или любой другой элемент. Для демонстрации нам достаточно кнопки и списка со ссылками, который и будет являться выпадающим меню.
+
+Для раскрытия меню лучше всего использовать кнопку [`<button>`](/html/button/). Браузер «из коробки» поддерживает нужные сценарии взаимодействия с этим интерактивным элементом, а [скринридеры](/a11y/screenreaders/) правильно объявят пользователю, что это кнопка. С семантикой тоже всё в порядке. Создадим кнопку без наворотов, нам понадобиться только класс и два ARIA-атрибута — `aria-expanded` и [`aria-controls`](/a11y/aria-controls/). Благодаря `aria-expanded` вспомогательные технологии расскажут, что список со ссылками свёрнут или развёрнут, а `aria-controls` свяжет для них кнопку и список на уровне разметки.
+
+```html
+<button
+  class="button"
+  aria-expanded="false"
+  aria-controls="list"
+>
+    Меню
+</button>
+```
+
+Ниже разместим список со ссылками для меню. Важно чтобы кнопка и меню шли в разметке друг за другом, в стилях используется селектор [последующего элемента](/css/combined-selectors/#posleduyushchie-.element1-~-.element2).
+
+```html
+<ul class="menu" id="list">
+  <li class="menu-item">
+    <a href="#" class="menu-link">Винни-Пух</a>
+  </li>
+  <li class="menu-item">
+    <a href="#" class="menu-link">Тигра</a>
+  </li>
+  <li class="menu-item">
+    <a href="#" class="menu-link">Пятачок</a>
+  </li>
+</ul>
+```
+
+Обернём кнопку и меню в общего родителя исключительно в оформительских целях, чтобы разместить элементы по центру страницы. Обёртка не влияет на работу меню.
+
+```html
+<div class="container">
+  <button
+    class="button"
+    aria-expanded="false"
+    aria-controls="list"
+  >
+    Меню
+  </button>
+
+  <ul class="menu" id="list">
+    <li class="menu-item">
+      <a href="#" class="menu-link">Винни-Пух</a>
+    </li>
+    <li class="menu-item">
+      <a href="#" class="menu-link">Тигра</a>
+    </li>
+    <li class="menu-item">
+      <a href="#" class="menu-link">Пятачок</a>
+    </li>
+  </ul>
+</div>
+```
+
+### JavaScript
+
+Чтобы всё заработало, понадобится пара строк JavaScript-кода. По клику на кнопку к ней должен добавляться класс `.active`, а по второму клику убираться. Конечно, само имя класса можно изменять, но не забудьте поменять его не только в скрипте, но и в стилях. Он важен для работы.
+
+Находим в разметке нужный элемент при помощи [`.querySelector`](/js/query-selector/) и добавляем обработчик события клика с помощью [`.addEventListener`](/js/element-addeventlistener/).
+
+Для переключения класса туда-сюда отлично подходит метод [`classList.toggle()`](/js/element-classlist/#classlist.toggle). А [тернарный оператор](/js/ternary-operator/) поможет переключать значения `aria-expanded` с `true` на `false` и обратно в зависимости от наличия класса у кнопки.
+
+```js
+const button = document.querySelector('.button')
+
+button.addEventListener('click', (e) => {
+  e.target.classList.toggle('active')
+  e.target.setAttribute(
+    'aria-expanded', e.target.classList.contains('active')
+    ? 'true'
+    : 'false'
+  )
+})
+```
+
+### Стили
+
+В текущем решении используем единицу измерения `lh`, которая зависит от текущей высоты строки — свойства [`line-height`](/css/line-height/). В закрытом состоянии у меню будет нулевая высота строки, а в открытом — 1.2.
+
+`1.2` — это значение по умолчанию для этого свойства. Браузер его применит, если не задано другое. Обязательно указывайте для `line-height` именно числовое значение. К сожалению, ключевые слова типа [`initial`](/css/global-keywords/) не дадут нужного эффекта.
+
+Из всех стилей примера для желаемого эффекта важны вот эти строчки:
+
+```css
+.menu {
+  margin-block-start: 0.5lh;
+  overflow: hidden;
+  line-height: 0;
+  transition: line-height 0.5s;
+}
+
+.button.active ~ .menu {
+  line-height: 1.2;
+}
+```
+
+В дефолтном состоянии у `.menu` высота строки равно 0. А если у кнопки `.button` появляется класс `.active`, то следующему за ним `.menu` задаётся высота строки 1.2.
+
+Важно задать для `.menu` [`overflow: hidden`](/css/overflow/), чтобы в закрытом состоянии не был виден текст пунктов меню.
+
+Верхний отступ тоже задан в `lh`, чтобы он плавно вырастал вместе с меню. Но это дело вкуса.
+
+Для плавности используется свойство [`transition`](/css/transition/). С его помощью высота строк меняется не резко, а плавно, за пол секунды.
+
+<iframe title="Плавное выпадающее меню без анимации цвета" src="demos/no-color-transition/" height="450"></iframe>
+
+Сейчас, при закрытии, строки текста наезжают друг на друга и получается грязно. Добавим изменения цвета текста с [`transparent`](/css/web-colors/#transparent) на [`currentColor`](/css/web-colors/#currentcolor) — цвет, заданный родителю. Не забудем указать в свойстве `transition`, что `color` тоже должен меняться за 0.5 секунды. Тогда текст появляется и исчезает плавно вместе с открытием и закрытием меню. Чистота и красота!
+
+```css
+.menu {
+  margin-block-start: 0.5lh;
+  overflow: hidden;
+  line-height: 0;
+  color: transparent;
+  transition: line-height 0.5s, color 0.5s;
+}
+
+.button.active ~ .menu {
+  line-height: 1.2;
+  color: currentColor;
+}
+```
+
+<iframe title="Плавное выпадающее меню без скрытия" src="demos/final-no-tab/" height="450"></iframe>
+
+### Навигация с клавиатуры
+
+Сейчас, даже если меню закрыто, на ссылки из него можно попасть при помощи <kbd>Tab</kbd>. Это не лучшее поведение. Нужно «скрывать» меню от клавиатурной навигации, не только визуально.
+
+Для этого используем атрибуты [`aria-hidden`](/a11y/aria-hidden/) для `.menu` и [`tabindex`](/html/tabindex/) для каждой ссылки. В закрытом состоянии значения будут `true` и `-1` соответственно. Таким образом скринридеры не зачитают содержимое раскрывающегося меню, а на ссылки нельзя будет попасть с клавиатуры.
+
+В открытом состоянии будем менять значения на `fale` и `0` с помощью JavaScript, делая меню доступным для клавиатуры и скринридеров.
+
+```html
+<div class="container">
+  <button class="button" aria-expanded="false" aria-controls="list">Меню</button>
+
+  <ul class="menu" id="list" aria-hidden="true">
+    <li class="menu-item">
+      <a href="#" class="menu-link" tabindex="-1">Винни-Пух</a>
+    </li>
+    <li class="menu-item">
+      <a href="#" class="menu-link" tabindex="-1">Тигра</a>
+    </li>
+    <li class="menu-item">
+      <a href="#" class="menu-link" tabindex="-1">Пятачок</a>
+    </li>
+  </ul>
+</div>
+```
+
+```js
+const button = document.querySelector('.button')
+const menu = document.querySelector('.menu')
+const menuLinks = document.querySelectorAll('.menu-link')
+
+button.addEventListener('click', (e) => {
+  button.classList.toggle('active')
+
+  if (button.classList.contains('active')) {
+    button.setAttribute('aria-expanded', 'true')
+    menu.setAttribute('aria-hidden', 'false')
+    menuLinks.forEach(link => link.setAttribute('tabindex', '0'))
+  } else {
+    button.setAttribute('aria-expanded', 'false')
+    menu.setAttribute('aria-hidden', 'true')
+    menuLinks.forEach(link => link.setAttribute('tabindex', '-1'))
+  }
+})
+```
+
+<iframe title="Плавное выпадающее меню" src="demos/final/" height="450"></iframe>
+
+### Финальный код
+
+```html
+<div class="container">
+  <button class="button" aria-expanded="false" aria-controls="list">Меню</button>
+
+  <ul class="menu" id="list" aria-hidden="true">
+    <li class="menu-item">
+      <a href="#" class="menu-link" tabindex="-1">Винни-Пух</a>
+    </li>
+    <li class="menu-item">
+      <a href="#" class="menu-link" tabindex="-1">Тигра</a>
+    </li>
+    <li class="menu-item">
+      <a href="#" class="menu-link" tabindex="-1">Пятачок</a>
+    </li>
+  </ul>
+</div>
+```
+
+```css
+.button {
+  inline-size: 100%;
+  padding: 0.5lh 1.5lh;
+  font: inherit;
+  color: currentColor;
+  background-color: #f28482;
+  border: none;
+  cursor: pointer;
+}
+
+.button:hover,
+.button:focus-visible {
+  background-color: #f5cac3;
+}
+
+.menu {
+  position: relative;
+  display: grid;
+  margin-block-start: 0.5lh;
+  background-color: #f28482;
+
+  overflow: hidden;
+  line-height: 0;
+  color: transparent;
+  transition: line-height 0.5s, color 0.5s;
+}
+
+.menu-item {
+  overflow: hidden;
+}
+
+.menu-link {
+  display: block;
+  padding: 0.5lh 80px;
+}
+
+.menu-link:hover,
+.menu-link:focus-visible {
+  background-color: #f5cac3;
+}
+
+.button.active ~ .menu {
+  line-height: 1.2;
+  color: currentColor;
+}
+```
+
+```js
+const button = document.querySelector('.button')
+const menu = document.querySelector('.menu')
+const menuLinks = document.querySelectorAll('.menu-link')
+
+button.addEventListener('click', (e) => {
+  button.classList.toggle('active')
+
+  if (button.classList.contains('active')) {
+    button.setAttribute('aria-expanded', 'true')
+    menu.setAttribute('aria-hidden', 'false')
+    menuLinks.forEach(link => link.setAttribute('tabindex', '0'))
+  } else {
+    button.setAttribute('aria-expanded', 'false')
+    menu.setAttribute('aria-hidden', 'true')
+    menuLinks.forEach(link => link.setAttribute('tabindex', '-1'))
+  }
+})
+```
+
+<iframe title="Плавное выпадающее меню" src="demos/final/" height="450"></iframe>
diff --git a/recipes/index.md b/recipes/index.md
index 37387913f3..d99b71686b 100644
--- a/recipes/index.md
+++ b/recipes/index.md
@@ -11,6 +11,7 @@ groups:
       - popup
       - dropdown-menu
       - container
+      - lazy-load-with-preview
   - name: 'На серверной стороне'
     items:
       - lets-encrypt-nginx
@@ -19,6 +20,10 @@ groups:
   - name: 'На клиентской стороне'
     items:
       - array-filling
+      - ajax-form
+  - name: 'Полезное для разработки'
+    items:
+      - git-rebase-onto
   - name: 'Работа с GitHub'
     items:
       - github-new-profile
@@ -43,9 +48,6 @@ groups:
   - name: 'Ради веселья'
     items:
       - snow
-  - name: 'Полезное для разработки'
-    items:
-      - git-rebase-onto
 ---
 
 Сборник решений часто встречающихся задач. В этом разделе собраны рецепты, совмещающие в себе несколько технологий.
diff --git a/recipes/snow/demos/result/index.html b/recipes/snow/demos/result/index.html
index b577e958d7..55995e678d 100644
--- a/recipes/snow/demos/result/index.html
+++ b/recipes/snow/demos/result/index.html
@@ -65,7 +65,7 @@
     }
 
     .snow-toggle__control:focus + .snow-toggle__text::before {
-      border-color: #2E9AFF;
+      border-color: #C56FFF;
     }
 
     .snow-toggle__control:checked + .snow-toggle__text::before {
diff --git a/recipes/snow/index.md b/recipes/snow/index.md
index 7fa86e13cb..47e65c06c2 100644
--- a/recipes/snow/index.md
+++ b/recipes/snow/index.md
@@ -10,6 +10,8 @@ authors:
   - solarrust
 editors:
   - tachisis
+contributors:
+  - skorobaeus
 tags:
   - article
 ---
@@ -113,7 +115,7 @@ body {
 }
 
 .snow-toggle__control:focus + .snow-toggle__text::before {
-  border-color: #2E9AFF;
+  border-color: #C56FFF;
 }
 
 .snow-toggle__control:checked + .snow-toggle__text::before {
diff --git a/settings/featured.md b/settings/featured.md
index 14760bd00f..61c65e2733 100644
--- a/settings/featured.md
+++ b/settings/featured.md
@@ -70,58 +70,58 @@ active:
   - recipes/character-counter
   - js/geolocation-api
   - a11y/content-hidden
-  - html/flow
-  - html/head
-  - tools/agile
-  - recipes/progress
-  - tools/bundlers
-  - tools/static-types
-  - tools/webpack
-  - a11y/screenreaders
-  - css/box-shadow
-  - js/boolean
-  - html/video
-  - html/input
-  - tools/how-the-browser-creates-pages
-  - css/specificity
-  - css/media
-  - css/grid-guide
-  - html/doctype
-  - js/function-context
-  - js/function
+  - html/div
   - html/img
+  - recipes/snow
+  - html/head
+  - tools/docker
+  - js/closures
+  - js/deal-with-forms
+  - js/async-in-js
+  - css/box-model
+  - css/position
   - tools/oop
-  - html/form
   - a11y/aria-hidden
-  - recipes/lets-encrypt-nginx
-  - js/deal-with-forms
-  - css/custom-properties
-  - tools/markdown
-  - html/article
-  - css/flexbox-guide
-  - css/pseudoelements
   - css/transform-function
-  - recipes/snow
-  - tools/clean-architecture
-  - css/position
-  - css/keyframes
+  - tools/bundlers
+  - html/flow
+  - tools/markdown
   - css/display
-  - tools/docker
-  - js/infinite-scroll
   - tools/gitlab-ci-cd
+  - a11y/screenreaders
+  - tools/how-the-browser-creates-pages
+  - tools/ci-cd
+  - html/video
+  - tools/network
+  - css/attr
+  - js/infinite-scroll
+  - tools/how-to-test-and-why
+  - css/keyframes
+  - html/form
   - a11y/aria-intro
   - js/execution-order
-  - css/attr
   - js/var-let
-  - js/async-in-js
-  - tools/how-to-test-and-why
-  - tools/network
-  - css/box-model
-  - tools/cli
-  - js/closures
+  - recipes/lets-encrypt-nginx
+  - css/media
+  - html/article
+  - css/custom-properties
+  - recipes/progress
+  - css/flexbox-guide
+  - tools/agile
+  - html/input
+  - html/doctype
+  - tools/clean-architecture
   - html/section
-  - html/div
+  - js/boolean
   - html/nav
-  - tools/ci-cd
+  - js/function
+  - js/function-context
+  - css/pseudoelements
+  - css/grid-guide
+  - tools/static-types
+  - css/box-shadow
+  - css/specificity
+  - tools/cli
+  - tools/webpack
 ---