diff --git a/src/App.tsx b/src/App.tsx
index 2ce4ba8..43b498c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -97,7 +97,7 @@ function App() {
   }, []);
 
   if (!doc) {
-    return <p style={{ padding: 16, fontFamily: 'system-ui, sans-serif' }}>Загрузка диаграммы…</p>;
+    return <div className="diagram-loading">Загрузка диаграммы…</div>;
   }
 
   return (
diff --git a/src/index.css b/src/index.css
index ae2c06e..cc2393a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -21,3 +21,20 @@ body,
 .diagram-breadcrumbs:hover {
   cursor: pointer;
 }
+
+/*
+ * Экран ожидания `diagram:init` от хоста. Занимает ровно высоту вьюпорта и
+ * центрирует надпись. Раньше это был <p> с отступом: его собственный
+ * margin выходил за пределы 100%-высоты предка и давал вертикальный скролл
+ * на пустом экране.
+ */
+.diagram-loading {
+  height: 100%;
+  margin: 0;
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  color: #525a64;
+}