Add configurable native glass window backgrounds

apps/desktop/src/style.css

@@ -949,3 +949,86 @@ aside pre.code-passage {
 aside pre.code-passage {
   line-height: 1.6;
 }
+
+/* Native effects blur the desktop; CSS only supplies its readable shell tint.
+   Never use backdrop-filter as a substitute for an operating-system material. */
+:root[data-background-material="glass"],
+:root[data-background-material="frosted"] {
+  background: transparent;
+}
+:root[data-background-material="glass"] #app {
+  background: rgba(248, 250, 252, var(--window-opacity, 0.9));
+}
+:root[data-background-material="frosted"] #app {
+  background: rgba(
+    248,
+    250,
+    252,
+    calc(0.35 + var(--window-opacity, 0.9) * 0.65)
+  );
+}
+.appearance-settings {
+  padding-bottom: 16px;
+  margin-bottom: 18px;
+  border-bottom: 1px solid var(--line);
+}
+.popover-panel h3 {
+  margin: 0 0 12px;
+  font-size: 13px;
+}
+.appearance-settings > label,
+.appearance-opacity label {
+  font-size: 12px;
+  color: var(--muted);
+}
+#background-material {
+  display: block;
+  width: 100%;
+  margin: 7px 0 15px;
+}
+.appearance-opacity {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+#background-opacity-value {
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+#background-opacity {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin: 9px 0;
+  accent-color: var(--brand);
+}
+@media (prefers-color-scheme: dark) {
+  :root[data-background-material="glass"] #app {
+    background: rgba(11, 15, 20, var(--window-opacity, 0.9));
+  }
+  :root[data-background-material="frosted"] #app {
+    background: rgba(
+      11,
+      15,
+      20,
+      calc(0.35 + var(--window-opacity, 0.9) * 0.65)
+    );
+  }
+}
+@media (forced-colors: active) {
+  :root,
+  :root[data-background-material] #app {
+    background: Canvas;
+  }
+}
+
+/* Strong shell copy remains legible even above an unusually bright/dark desktop.
+   Opaque reading panes retain the quieter secondary-text hierarchy. */
+:root:not([data-background-material="solid"])[data-background-material] header,
+:root:not([data-background-material="solid"])[data-background-material] footer,
+:root:not([data-background-material="solid"])[data-background-material]
+  #semantic-panel
+  > summary {
+  --muted: var(--ink);
+}