diff --git a/css/read-write/demos/basic/index.html b/css/read-write/demos/basic/index.html
new file mode 100644
index 0000000000..da2995724a
--- /dev/null
+++ b/css/read-write/demos/basic/index.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>:read-write — Дока демо</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;
+    }
+
+    body {
+      min-height: 100vh;
+      padding: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+      color: #FFFFFF;
+      font-family: "Roboto", sans-serif;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+    }
+
+    .container {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+      width: 360px;
+    }
+
+    label {
+      font-size: 18px;
+      font-weight: 500;
+    }
+
+    input,
+    textarea {
+      width: 100%;
+      padding: 12px 14px;
+      border-radius: 6px;
+      border: 1px solid #ffffff;
+      background: transparent;
+      color: #fff;
+      font-size: 16px;
+      font-family: inherit;
+      transition: border-color 0.2s, box-shadow 0.2s;
+    }
+
+    input:read-write,
+    textarea:read-write {
+      border-color: #2E9AFF;
+    }
+
+    input:read-write:focus,
+    textarea:read-write:focus {
+      outline: none;
+      box-shadow: 0 0 0 3px rgba(46, 154, 255, 0.25);
+    }
+
+    textarea {
+      min-height: 120px;
+      resize: vertical;
+    }
+
+    .readonly {
+      opacity: 0.5;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="container">
+
+    <div>
+      <label>Редактируемое поле</label>
+      <input type="text" placeholder="Можно менять текст">
+    </div>
+
+    <div>
+      <label>Только для чтения</label>
+      <input type="text" value="Нельзя редактировать" readonly class="readonly">
+    </div>
+
+    <div>
+      <label>Textarea (редактируемое)</label>
+      <textarea placeholder="Пиши сюда..."></textarea>
+    </div>
+
+  </div>
+</body>
+</html>
diff --git a/css/read-write/index.md b/css/read-write/index.md
index e56029199b..a6059b8286 100644
--- a/css/read-write/index.md
+++ b/css/read-write/index.md
@@ -1,8 +1,14 @@
 ---
 title: "`:read-write`"
 description: "Показываем возможность изменения элемента."
+baseline:
+  - group: read-write-pseudos
+    features:
+      - css.selectors.read-write
 authors:
   - delioncourts
+contributors:
+  - drakesbot12
 keywords:
   - псевдокласс
 related:
@@ -11,58 +17,78 @@ related:
   - css/pseudoclasses
 tags:
   - doka
-  - placeholder
 ---
-
 ## Кратко
 
-Псевдокласс `:read-write` показывает что элемент, например, [`<input>`](/html/input/) или [`<textarea>`](/html/textarea/), изменяется.
+Псевдокласс `:read-write` применяется к элементам формы и другим узлам, которые пользователь может редактировать. Он помогает отличать редактируемые поля от тех, которые доступны только для чтения.
+
+К таким элементам относятся, например, `<input>`, `<textarea>` и любые элементы с атрибутом `contenteditable`.
 
 ## Пример
 
-Псевдокласс `:read-write` показывает, что поле ввода можно изменить.
+Покажем базовое использование: выделим редактируемое поле синей рамкой.
 
 ```html
-<form>
-  <label for="input-field">Зима близко</label>
-  <input id="input-field" type="text">
-</form>
+<label>
+  Редактируемое поле
+  <input type="text" placeholder="Можно менять текст">
+</label>
+<label>
+  Только для чтения
+  <input type="text" value="Нельзя редактировать" readonly class="readonly">
+</label>
+<label>
+  Textarea (редактируемое)
+  <textarea placeholder="Пиши сюда..."></textarea>
+</label>
 ```
 
 ```css
-input:read-write {
-  border: 1px solid blue;
+input:read-write,
+textarea:read-write {
+  border-color: #2E9AFF;
 }
 ```
 
-Как и другие селекторы псевдоклассов, `:read-write` может использоваться с другими псевдоэлементами и псевдоклассами.
+<iframe title="Демонстрация работы :read-write" src="demos/basic/" height="420"></iframe>
 
-```css
-textarea:read-write:focus {
-  box-shadow: 0 5px 10px gray;
-}
+## Как пишется
+
+Псевдокласс `:read-write` выбирает элементы, которые можно редактировать.
+
+Это:
 
-textarea:read-write::before {
-  content: "Что-то меняется...";
-  color: #aaa;
+- `<input>` без атрибутов `readonly` и `disabled`
+- `<textarea>` без `readonly` и `disabled`
+- элементы с `contenteditable`
+
+```css
+input:read-write,
+textarea:read-write,
+[contenteditable]:read-write {
+  border: 1px solid #2E9AFF;
 }
 ```
 
-## Как пишется
+## Как понять
 
-Элементы, к которым применяется псевдокласс `:read-write`:
+Браузер автоматически определяет, можно ли изменять содержимое элемента.
 
-- `<input>` — элементы любого типа, с возможностью редактирования и доступные не только для чтения. Это означает что у них не установлены атрибуты `:read-only` или [`disabled`](/html/disabled/).
-- `<textarea>` — элементы доступны для изменения (без атрибутов `:read-only` или `disabled`).
-- Любой элемент не `<input>` и не `<textarea>`, у которого установлен атрибут [contenteditable](/html/global-attrs/).
+Если элемент:
 
-После элемента из списка выше ставим двоеточие и пишем ключевое слово `read-write`.
+- не заблокирован (`disabled`)
+- не только для чтения (`readonly`)
+- или явно редактируем (`contenteditable`)
 
+-> он попадает под `:read-write`.
+
+## Подсказки
+
+💡 Чаще всего `:read-write` не используют напрямую в больших проектах, потому что его поведение почти совпадает с обычными селекторами для input/textarea.
+💡 Но он полезен, если у тебя есть гибкая форма, где состояние элементов меняется динамически через JavaScript.
+💡 В Firefox до сих пор может использоваться префикс:
 ```css
-input:read-write,
 input:-moz-read-write {
-  border: 1px solid red;
+  border-color: #2E9AFF;
 }
 ```
-
-Псевдокласс `:read-write` поддерживается в Chrome, Safari и Opera. Firefox поддерживает псевдокласс со специальным префиксом `-moz-`.
