diff --git a/docs/devnotes.md b/docs/devnotes.md
index 31f8cb9..4d04c08 100644
--- a/docs/devnotes.md
+++ b/docs/devnotes.md
@@ -10,10 +10,6 @@ You can debug on the Safari on iOS only if you have mac (and run macOS). The cer
 - For visual bugs: on you iDevice, redirect the localhost.direct to your dev computer. Now you have the hot reload on you iDevice.
   - You can use network debugging apps like "Shadowrocket" to do such thing.
 
-## Hero Animation won't work (after hot reload)
-
-That's a known issue. Hot reload won't refresh the module sets the hero cache. Refresh the whole page and it should work.
-
 ## The components don't react to the change as I setting the store, until the page reloaded
 
 The `WritableAtom<unknwon>.set` might do an equals check. You must set a different object to ensure the atom sending a notify.
@@ -47,3 +43,9 @@ Ja, the code is weird, but that's the best we know. Anyway, you need new object
 Idk why, but transition on logical directions may not work on WebKit - sometimes they work.
 
 Use physical directions to avoid trouble, like "margin-top, margin-bottom".
+
+## Safe area insets
+
+For isolating control of the UI effect, we already setup css variables `--safe-area-insets-*`. In components, you should use the variables unless you have reasons to use `env()`.
+
+Using `--safe-area-insets-*`, you can control the global value in settings (under dev mode).