diff --git a/css/pseudo-private-custom-property/demos/products-demo/default.html b/css/pseudo-private-custom-property/demos/products-demo/default.html
index 836700613b..055c3ce2de 100644
--- a/css/pseudo-private-custom-property/demos/products-demo/default.html
+++ b/css/pseudo-private-custom-property/demos/products-demo/default.html
@@ -5,6 +5,43 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Базовое решение — Псевдоприватные кастомные свойства — Дока</title>
 
+    <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;
+        }
+      }
+    </style>
+
     <style>
       * {
         box-sizing: border-box;
diff --git a/css/pseudo-private-custom-property/demos/products-demo/index.html b/css/pseudo-private-custom-property/demos/products-demo/index.html
index cb758ee489..5ff67ddb52 100644
--- a/css/pseudo-private-custom-property/demos/products-demo/index.html
+++ b/css/pseudo-private-custom-property/demos/products-demo/index.html
@@ -5,6 +5,43 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Решение с псевдоприватными свойствами — Псевдоприватные кастомные свойства — Дока</title>
 
+    <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;
+        }
+      }
+    </style>
+
     <style>
       * {
         box-sizing: border-box;