diff --git a/docs/architecture/ribbon.md b/docs/architecture/ribbon.md
index 987f5ba..a43e772 100644
--- a/docs/architecture/ribbon.md
+++ b/docs/architecture/ribbon.md
@@ -9,7 +9,9 @@ compared. Everything the ribbon drives is the same editor, through the same comm
 `chromeMode: 'modern' | 'ribbon'` lives in `storage/theme.ts` beside the other UI-chrome prefs
 (`edentext-chrome`, default `'ribbon'`). `App.svelte` forks on it: the ribbon docks as a plain
 flex child, the island keeps its absolute overlay. Reachable from both sides — the theme dropdown
-in the modern chrome, the strip's appearance menu in the ribbon.
+in the modern chrome, the strip's appearance menu in the ribbon. The ribbon's menu entry for the
+island is behind `import.meta.env.DEV` until the island catches up — a production build offers no
+way in, but a stored `'modern'` pref still loads it.
 
 `--toolbar-overlay-h` is written **only** in modern mode. `editor.css` reads it as
 `var(--toolbar-overlay-h, 0px)`, so the ribbon's docked layout needs no second rule.
diff --git a/src/lib/components/ribbon/Ribbon.svelte b/src/lib/components/ribbon/Ribbon.svelte
index 68a3a42..b88bad5 100644
--- a/src/lib/components/ribbon/Ribbon.svelte
+++ b/src/lib/components/ribbon/Ribbon.svelte
@@ -319,9 +319,11 @@
           <button class:selected={chromeMode === 'ribbon'} onclick={() => { chromeMode = 'ribbon'; closeMenu(); }}>
             {t().ribbon.chrome.ribbon}<span class="menu-sub">{t().ribbon.chrome.ribbonHint}</span>
           </button>
-          <button class:selected={chromeMode === 'modern'} onclick={() => { chromeMode = 'modern'; closeMenu(); }}>
-            {t().ribbon.chrome.modern}<span class="menu-sub">{t().ribbon.chrome.modernHint}</span>
-          </button>
+          {#if import.meta.env.DEV}
+            <button class:selected={chromeMode === 'modern'} onclick={() => { chromeMode = 'modern'; closeMenu(); }}>
+              {t().ribbon.chrome.modern}<span class="menu-sub">{t().ribbon.chrome.modernHint}</span>
+            </button>
+          {/if}
           <hr />
           <div class="rb-menu-label">{t().appearance.title}</div>
           {#each (['light', 'dark', 'allBlack', 'auto'] as const) as m}