diff --git a/content/getting-started/10.accessibility.md b/content/getting-started/10.accessibility.md
index 2116a9d6..134163bf 100644
--- a/content/getting-started/10.accessibility.md
+++ b/content/getting-started/10.accessibility.md
@@ -26,8 +26,6 @@ Read more: https://www.tiny.cloud/docs/tinymce/6/tinymce-and-screenreaders/
 
 ### Things to keep in mind
 
-- Visual Editor is only accessible on the Directus side — not your website. So we always need to click an edit button first, then the
-  overlays are accessible.
 - Manual Sorting is currently not supported/accessible.
 - Once focused, the code interface (Codemirror) cannot be exited using the tab key.
 - The Markdown interface also doesn’t allow you to exit the field. This is because it supports tabs inside the editor’s
diff --git a/content/guides/02.content/8.visual-editor/3.customization.md b/content/guides/02.content/8.visual-editor/3.customization.md
index c9d9883a..2d8f73bf 100644
--- a/content/guides/02.content/8.visual-editor/3.customization.md
+++ b/content/guides/02.content/8.visual-editor/3.customization.md
@@ -39,6 +39,9 @@ The library ships with a number of built in CSS Selectors already applied to its
 .directus-visual-editing-edit-button {
 	/* the edit button */
 }
+.directus-visual-editing-actions-flipped {
+	/* a modifier on the rect that flips the action buttons below it, applied automatically when the rect is near the top of the viewport */
+}
 ```
 
 ## CSS Variables
@@ -48,21 +51,33 @@ The library also ships with a number of predefined CSS variables. These can be o
 ```css
 :root {
 	--directus-visual-editing--overlay--z-index: 999999999;
-	--directus-visual-editing--rect--border-spacing: 9px;
-	--directus-visual-editing--rect--border-width: 2px;
+	--directus-visual-editing--rect--border-spacing: 8px;
+	--directus-visual-editing--rect--border-width: 1px;
 	--directus-visual-editing--rect--border-color: #6644ff;
 	--directus-visual-editing--rect--border-radius: 6px;
-	--directus-visual-editing--rect-hover--opacity: 0.333;
-	--directus-visual-editing--rect-highlight--opacity: 0.333;
-	--directus-visual-editing--edit-btn--width: 28px;
-	--directus-visual-editing--edit-btn--height: 28px;
-	--directus-visual-editing--edit-btn--radius: 50%;
+	--directus-visual-editing--rect-hover--opacity: 0.4;
+	--directus-visual-editing--rect-highlight--opacity: 0.4;
+	--directus-visual-editing--actions--offset: 4px;
+	--directus-visual-editing--actions--focus-ring-color: #6644ff;
+	--directus-visual-editing--actions--focus-ring-width: 2px;
+	--directus-visual-editing--actions--focus-ring-offset: 2px;
+	--directus-visual-editing--edit-btn--width: 24px;
+	--directus-visual-editing--edit-btn--height: 24px;
+	--directus-visual-editing--edit-btn--radius: 6px;
 	--directus-visual-editing--edit-btn--bg-color: #6644ff;
+	--directus-visual-editing--edit-btn-hover--bg-color: color-mix(in srgb, #6644ff, #2e3C43 25%);
 	--directus-visual-editing--edit-btn--icon-bg-image: url('data:image/svg+xml,<svg>…</svg>');
 	--directus-visual-editing--edit-btn--icon-bg-size: 66.6%;
+	--directus-visual-editing--ai-btn--bg-color: #6644ff;
+	--directus-visual-editing--ai-btn-hover--bg-color: color-mix(in srgb, #6644ff, #2e3C43 25%);
 }
 ```
 
+::callout{icon="material-symbols:info-outline"}
+**Defaults inside the Directus Studio**
+When the visual editor runs inside the Directus Studio iframe, defaults for several variables are sourced from the active Studio theme (primary color, border radius, button size, focus-ring width/offset) rather than the compiled-in fallbacks shown above. Your own `:root` or `customClass` overrides still take precedence.
+::
+
 ## Custom Classes
 
 Finally, custom classes can be added to all or a subset of elements defined by the library’s [apply method](/guides/content/visual-editor/frontend-library#api) using the `customClass` property. This class will be applied to the `div.directus-visual-editing-overlay` element within the `div#directus-visual-editing` container.