diff --git a/src/bun/windows.ts b/src/bun/windows.ts
index b28d355..6c2b5c0 100644
--- a/src/bun/windows.ts
+++ b/src/bun/windows.ts
@@ -51,7 +51,14 @@ export function buildPreload(
  * gtk_window_set_decorated(false).
  */
 export function chromeOptions() {
-	return { titleBarStyle: "hidden" as const };
+	// `transparent` is what lets the Aero frame be a real frame: .window's 6px
+	// radius and its outer drop shadow are drawn by the webview OUTSIDE the
+	// window's own rectangle, so on an opaque surface they are simply clipped —
+	// square corners and no shadow. The UI reserves the shadow's gutter (see
+	// the .window margin in styles.css).
+	// PORTABILITY: on Linux this needs a compositor granting an RGBA visual;
+	// without one the frame still draws, just without the shadow falloff.
+	return { titleBarStyle: "hidden" as const, transparent: true };
 }
 
 /**
diff --git a/ui/src/app/connection-manager/connection-manager.html b/ui/src/app/connection-manager/connection-manager.html
index 5da4792..eee5f9f 100644
--- a/ui/src/app/connection-manager/connection-manager.html
+++ b/ui/src/app/connection-manager/connection-manager.html
@@ -1,5 +1,5 @@
-<div class="flex h-screen flex-col bg-background text-foreground">
-  <!-- win7 skin only: frameless window. Fixed-size modal, so Close only. -->
+<div class="window glass flex h-screen flex-col" [class.active]="windowFocused()">
+  <!-- Frameless window. Fixed-size modal, so Close only. -->
   <app-title-bar
     [title]="i18n.t('connMgr.title')"
     [resizable]="false"
diff --git a/ui/src/app/connection-manager/connection-manager.ts b/ui/src/app/connection-manager/connection-manager.ts
index 4c5bd3f..5d86d8e 100644
--- a/ui/src/app/connection-manager/connection-manager.ts
+++ b/ui/src/app/connection-manager/connection-manager.ts
@@ -78,10 +78,16 @@ function fromDraft(d: Draft): SavedConnection {
   host: {
     '(window:keydown.escape)': 'onEscape()',
     '(window:contextmenu)': 'blockContextMenu($event)',
+    // Aero desaturates an unfocused window's chrome — see .window.active.
+    '(window:focus)': 'windowFocused.set(true)',
+    '(window:blur)': 'windowFocused.set(false)',
   },
 })
 export class ConnectionManager {
   readonly i18n = inject(I18nService);
+
+  /** Drives `.window.active` on this window's Aero frame. */
+  readonly windowFocused = signal(document.hasFocus());
   readonly store = inject(ConnectionsService);
   readonly dialogs = inject(DialogsService);
   private readonly rpc = inject(RpcService);
diff --git a/ui/src/app/editor-window/editor-window.html b/ui/src/app/editor-window/editor-window.html
index fb3bdfe..694340d 100644
--- a/ui/src/app/editor-window/editor-window.html
+++ b/ui/src/app/editor-window/editor-window.html
@@ -1,4 +1,4 @@
-<div class="flex h-screen flex-col bg-background text-foreground">
+<div class="window glass flex h-screen flex-col" [class.active]="windowFocused()">
   @if (!ctx) {
     <div class="flex flex-1 items-center justify-center">
       <div class="max-w-sm rounded-lg border border-border bg-card p-6 text-center shadow-sm">
@@ -10,8 +10,8 @@
       </div>
     </div>
   } @else {
-    <!-- win7 skin only: the window is frameless. The X runs the SAME dirty
-         prompt as ⌘W and the Close button — never a raw window close. -->
+    <!-- The window is frameless. The X runs the SAME dirty prompt as ⌘W and
+         the Close button — never a raw window close. -->
     <app-title-bar [title]="ctx.name + (dirty() ? ' *' : '')" (closeRequested)="requestClose()" />
     <!-- header: on macOS this row IS the titlebar (hiddenInset + drag region),
          elsewhere the native titlebar sits above and this is a compact strip -->
diff --git a/ui/src/app/editor-window/editor-window.ts b/ui/src/app/editor-window/editor-window.ts
index a4e4163..4b98cfa 100644
--- a/ui/src/app/editor-window/editor-window.ts
+++ b/ui/src/app/editor-window/editor-window.ts
@@ -35,12 +35,19 @@ const DRAFT_DEBOUNCE_MS = 400;
   templateUrl: './editor-window.html',
   host: {
     '(window:keydown)': 'onKeydown($event)',
-    '(window:blur)': 'flushDraft()',
     '(window:contextmenu)': 'blockContextMenu($event)',
+    // Aero desaturates an unfocused window's chrome — see .window.active.
+    // blur already had to flush the draft; both run from the one binding
+    // (a duplicated key is a TS1117 build error, not a merge).
+    '(window:focus)': 'windowFocused.set(true)',
+    '(window:blur)': 'flushDraft(); windowFocused.set(false)',
   },
 })
 export class EditorWindow {
   readonly i18n = inject(I18nService);
+
+  /** Drives `.window.active` on this window's Aero frame. */
+  readonly windowFocused = signal(document.hasFocus());
   readonly ctx = EDITOR_CONTEXT;
   readonly modLabel = MOD_LABEL;
   readonly altLabel = ALT_LABEL;
diff --git a/ui/src/index.html b/ui/src/index.html
index 4a2bbaf..bfb813c 100644
--- a/ui/src/index.html
+++ b/ui/src/index.html
@@ -6,24 +6,13 @@
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
-    <!-- Pre-stylesheet paint: the window background must be right BEFORE
-         styles.css parses or new windows flash white/inverted. Only the
-         html background decision lives here — values must stay in sync with
-         the corresponding --background tokens in styles.css. The data-*
-         attributes are baked in by the bun preload (buildPreload in
-         src/bun/windows.ts) so forced themes are correct at first paint. -->
     <style>
-      /* Four theme states, mirroring the .win7 --background values in
-         styles.css. The preload adds the class before any page script, so it is
-         already on <html> here. Omitting this makes every window flash white
-         before styles.css parses. */
-      html.win7 { background: #ffffff; }
-      html.win7[data-theme='dark'] { background: #1f1f1f; }
-      html.win7[data-theme='dark'][data-dark-tone='darker'] { background: #121212; }
-      @media (prefers-color-scheme: dark) {
-        html.win7:not([data-theme='light']) { background: #1f1f1f; }
-        html.win7:not([data-theme='light'])[data-dark-tone='darker'] { background: #121212; }
-      }
+      /* The native window is transparent (chromeOptions), so the page itself
+         must not paint a background — the Aero frame in styles.css is the only
+         opaque surface, and its radius/drop shadow need to fall outside it.
+         Windows are created hidden and revealed on dom-ready, so there is no
+         unthemed flash to guard against here any more. */
+      html.win7, html.win7 body { background: transparent; }
     </style>
   </head>
   <body>
diff --git a/ui/src/styles.css b/ui/src/styles.css
index 58a49c6..11f73ff 100644
--- a/ui/src/styles.css
+++ b/ui/src/styles.css
@@ -639,6 +639,17 @@ body {
     border-color: var(--w7-li-bd-hl);
   }
 
+  /* ---- Window frame ----
+     The native window is transparent (chromeOptions in src/bun/windows.ts), so
+     nothing but .window paints an opaque surface. The margin is the gutter the
+     drop shadow falls into — without it the shadow has no room and the frame
+     reads as square. h-screen (100vh) has to shrink by the same amount or the
+     window overflows into a scrollbar. */
+  .win7 .window {
+    margin: 6px;
+    height: calc(100vh - 12px);
+  }
+
   /* Constant row geometry. 7.css gives ONLY tr.highlighted a 1px border, and
      the table is border-collapse: collapse — so a selected row physically grew
      1px at top and bottom and shoved every row below it down by 2px as the