diff --git a/apps/desktop/src/settings/DesktopClientSettings.test.ts b/apps/desktop/src/settings/DesktopClientSettings.test.ts
index 1ab9b3159e1f9..58301aafe5aed 100644
--- a/apps/desktop/src/settings/DesktopClientSettings.test.ts
+++ b/apps/desktop/src/settings/DesktopClientSettings.test.ts
@@ -22,6 +22,11 @@ const clientSettings: ClientSettings = {
   notificationMode: "notifications-and-sound",
   inAppNotificationsEnabled: true,
   appearanceContrast: 100,
+  timelineBackgroundImage: "https://example.com/wallpaper.png",
+  timelineBackgroundOpacity: 47,
+  timelineBackgroundBlur: 8,
+  timelineTextShadowOpacity: 72,
+  timelineTextShadowBlur: 4,
   browserDefaultViewport: { _tag: "preset", width: 1024, height: 600, presetId: "nest-hub" },
   browserDefaultZoomFactor: 1.25,
   browserDefaultAppearance: "dark",
diff --git a/apps/web/index.html b/apps/web/index.html
index a7a5e7450b3de..99226beacba60 100644
--- a/apps/web/index.html
+++ b/apps/web/index.html
@@ -185,6 +185,7 @@
             RESERVED_THEME_IDS.includes(value.id) ||
             !isThemeLabel(value.label) ||
             !isThemeAppearance(value.appearance) ||
+            (value.css !== undefined && typeof value.css !== "string") ||
             !isRecord(value.colors)
           ) {
             return false;
@@ -372,6 +373,12 @@
             }
           }
           setThemeColor(chromeColor);
+          if (effectiveCustomTheme?.css) {
+            const style = document.createElement("style");
+            style.dataset.themeCss = "";
+            style.textContent = effectiveCustomTheme.css;
+            document.head.append(style);
+          }
         } catch {
           let prefersDark = true;
           try {
diff --git a/apps/web/src/components/ChatMarkdown.tsx b/apps/web/src/components/ChatMarkdown.tsx
index 06960b273a057..7005b13c73cd1 100644
--- a/apps/web/src/components/ChatMarkdown.tsx
+++ b/apps/web/src/components/ChatMarkdown.tsx
@@ -195,6 +195,7 @@ import { createMarkdownRenderer } from "./chat/markdownRenderer";
 import { splitMarkdownBlocks } from "./chat/markdownStreamBlocks";
 import { MarkdownMermaidCodeBlock } from "./chat/MarkdownMermaidCodeBlock";
 import { MarkdownTable } from "./chat/MarkdownTable";
+import { CHAT_BACKGROUND_GLASS_SURFACE_CLASSES } from "./chat/ChatTimelineBackground";
 import { MarkdownDetails } from "./chat/MarkdownDetails";
 import {
   authoredImageSizeStyle,
@@ -227,6 +228,8 @@ const isAssetNotFoundError = Schema.is(AssetWorkspaceAssetNotFoundError);
 interface ChatMarkdownProps {
   /** Compact markdown transforms remove blocks before rendering inside a label. */
   inline?: boolean;
+  /** Enable translucent containers only when rendering over a timeline wallpaper. */
+  glassSurfaces?: boolean;
   text: string;
   cwd: string | undefined;
   threadRef?: ScopedThreadRef | undefined;
@@ -279,6 +282,7 @@ const ARTIFACT_TEMPLATE_ICON_BY_KIND = {
 function CodexArtifactTemplateCard(props: {
   readonly template: CodexArtifactTemplate;
   readonly onUse?: ((template: CodexArtifactTemplate) => void) | undefined;
+  readonly glass?: boolean;
 }) {
   const Icon = ARTIFACT_TEMPLATE_ICON_BY_KIND[props.template.artifactKind];
   const presentationLabel = codexArtifactTemplatePresentationLabel(props.template.artifactKind);
@@ -288,7 +292,10 @@ function CodexArtifactTemplateCard(props: {
       role="group"
       aria-label={`${props.template.displayName} template`}
       data-chat-markdown-artifact-template
-      className="my-[0.65rem] flex w-full min-w-0 items-center gap-3 rounded-xl border border-border/70 bg-card/60 px-3 py-2.5 text-foreground shadow-xs"
+      className={cn(
+        "my-[0.65rem] flex w-full min-w-0 items-center gap-3 rounded-xl border border-border/70 px-3 py-2.5 text-foreground shadow-xs",
+        props.glass ? CHAT_BACKGROUND_GLASS_SURFACE_CLASSES : "bg-card/60",
+      )}
       data-artifact-kind={props.template.artifactKind}
       data-markdown-copy={`${props.template.displayName} (${presentationLabel})\n\n`}
       data-skill-name={props.template.skillName}
@@ -497,6 +504,7 @@ function useChatMarkdownState({
   onImageExpand,
   renderContextReference,
   headingLevelOffset = 0,
+  glassSurfaces = false,
   sourceControlMedia = false,
   sourceControlMediaRepository,
 }: ChatMarkdownProps) {
@@ -899,6 +907,7 @@ function useChatMarkdownState({
     sourceControlMediaRepository,
     renderContextReference,
     headingLevelOffset,
+    glassSurfaces,
     imageBaseDir,
     workspaceMutationId,
     inlineCodeFileLinkMetaByText,
@@ -968,11 +977,15 @@ const CHAT_MARKDOWN_COMPONENTS = {
   h5: markdownHeadingRenderer(5),
   h6: markdownHeadingRenderer(6),
   div: function MarkdownDiv({ node, children, ...props }) {
-    const { onUseArtifactTemplate } = use(ChatMarkdownRendererContext);
+    const { onUseArtifactTemplate, glassSurfaces } = use(ChatMarkdownRendererContext);
     const artifactTemplate = artifactTemplateFromHastProperties(node?.properties);
     if (artifactTemplate) {
       return (
-        <CodexArtifactTemplateCard template={artifactTemplate} onUse={onUseArtifactTemplate} />
+        <CodexArtifactTemplateCard
+          template={artifactTemplate}
+          onUse={onUseArtifactTemplate}
+          glass={glassSurfaces}
+        />
       );
     }
     return <div {...props}>{children}</div>;
@@ -1564,10 +1577,16 @@ const CHAT_MARKDOWN_COMPONENTS = {
     return <ChatMarkdownImageFallback alt={altText} copyMarkdown={copyMarkdown} kind={kind} />;
   },
   table: function MarkdownTableRenderer({ node: _node, ...props }) {
-    return <MarkdownTable {...props} />;
+    const { glassSurfaces } = use(ChatMarkdownRendererContext);
+    return <MarkdownTable {...props} glass={glassSurfaces} />;
   },
   details: function MarkdownDetailsRenderer({ node: _node, children, open: detailsOpen }) {
-    return <MarkdownDetails open={detailsOpen}>{children}</MarkdownDetails>;
+    const { glassSurfaces } = use(ChatMarkdownRendererContext);
+    return (
+      <MarkdownDetails open={detailsOpen} glass={glassSurfaces}>
+        {children}
+      </MarkdownDetails>
+    );
   },
   pre: function MarkdownPre({ node, children, ...props }) {
     const {
@@ -1578,6 +1597,7 @@ const CHAT_MARKDOWN_COMPONENTS = {
       onRunShellCommand,
       inline,
       mathEnabled,
+      glassSurfaces,
     } = use(ChatMarkdownRendererContext);
     const text = use(ChatMarkdownTextContext);
     const codeBlock = extractCodeBlock(children);
@@ -1647,6 +1667,7 @@ const CHAT_MARKDOWN_COMPONENTS = {
             : undefined
         }
         isStreaming={isStreaming}
+        glass={glassSurfaces}
       >
         {highlightedCode}
       </MarkdownCodeBlock>
diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index 6daf189f7d6df..88c1169a4d48b 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -1,4 +1,13 @@
 import { ChildThreadApprovals } from "./chat/ChildThreadApprovals";
+import { CHAT_LIST_ANCHOR_OFFSET } from "@t3tools/shared/chatList";
+import {
+  ChatTimelineBackground,
+  CHAT_BACKGROUND_TEXT_SHADOW_CLASSES,
+  useHasTimelineBackground,
+  useTimelineTextShadowStyle,
+} from "./chat/ChatTimelineBackground";
+import { ChatTopbarBlur } from "./chat/ChatTopbarBlur";
+import { CHAT_TIMELINE_ANCHOR_OFFSET } from "./chat/timelineScrollAnchoring";
 import { workspaceAreaProps } from "../lib/workspaceFocus";
 import { sourceControlClients } from "@t3tools/client-runtime/source-control-clients";
 import { resolveNewThreadModelSelection } from "@t3tools/shared/usageLimits";
@@ -322,10 +331,7 @@ import {
   latestProviderTurnTokenUsage,
   shouldOfferResumeCompaction,
 } from "@t3tools/client-runtime/state/context-window";
-import {
-  MOBILE_COMPOSER_VIEW_TRANSITION_NAME,
-  MOBILE_DRAFT_HEADLINE_VIEW_TRANSITION_NAME,
-} from "./chat/draftHeroTransition";
+import { MOBILE_DRAFT_HEADLINE_VIEW_TRANSITION_NAME } from "./chat/draftHeroTransition";
 import {
   buildLocalDraftThread,
   deriveCommittedServerUserMessageIds,
@@ -557,6 +563,22 @@ export default function ChatView(props: ChatViewProps) {
     return ids;
   })();
   const settings = useEnvironmentSettings(environmentId);
+  const hasTimelineBackground = useHasTimelineBackground();
+  const timelineTextShadowStyle = useTimelineTextShadowStyle();
+  const [chatHeaderElement, setChatHeaderElement] = useState<HTMLElement | null>(null);
+  const [chatHeaderHeight, setChatHeaderHeight] = useState(0);
+  // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- measures the header DOM element so wallpaper rows can scroll beneath it
+  useLayoutEffect(() => {
+    if (!chatHeaderElement || !hasTimelineBackground) return;
+    return observeResize(chatHeaderElement, () =>
+      setChatHeaderHeight(chatHeaderElement.getBoundingClientRect().height),
+    );
+  }, [chatHeaderElement, hasTimelineBackground]);
+  const timelineUnderHeader = hasTimelineBackground && !embedded;
+  const timelineHeaderInset = timelineUnderHeader ? chatHeaderHeight : 0;
+  const timelineAnchorOffset =
+    (hasTimelineBackground ? CHAT_TIMELINE_ANCHOR_OFFSET : CHAT_LIST_ANCHOR_OFFSET) +
+    timelineHeaderInset;
   const clientSettingsHydrated = useClientSettingsHydrated();
   const timestampFormat = settings.timestampFormat;
   const navigate = useNavigate();
@@ -687,6 +709,10 @@ export default function ChatView(props: ChatViewProps) {
   const isMobileViewport = useMediaQuery("max-sm");
   const [workspaceLayoutElement, setWorkspaceLayoutElement] = useState<HTMLDivElement | null>(null);
   const threadPanelPopoverAnchorRef = useRef<HTMLElement | null>(null);
+  const attachChatHeader = (element: HTMLElement | null) => {
+    threadPanelPopoverAnchorRef.current = element;
+    setChatHeaderElement(element);
+  };
   const [terminalUiLaunchContext, setTerminalUiLaunchContext] =
     useState<TerminalLaunchContext | null>(null);
   // Overrides chosen before a server thread's first turn; they belong to that thread only.
@@ -2103,6 +2129,7 @@ export default function ChatView(props: ChatViewProps) {
     timelineEntries,
     timelineAnchorMessageId,
     setTimelineAnchor,
+    anchorViewOffset: timelineAnchorOffset,
   });
 
   // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- schedules a frame to focus the composer DOM element when a thread opens with the terminal closed
@@ -3271,19 +3298,22 @@ export default function ChatView(props: ChatViewProps) {
       {rightPanelControlsAtRoot && !embedded ? panelLayoutControls : null}
       <div
         className={cn(
-          "flex min-h-0 min-w-0 flex-col overflow-x-hidden",
+          "relative flex min-h-0 min-w-0 flex-col overflow-x-hidden",
           rightPanelMaximized ? "w-0 flex-none" : "flex-1",
         )}
         data-chat-column-maximized-away={rightPanelMaximized ? "true" : "false"}
         data-chat-column
         inert={rightPanelMaximized}
+        style={timelineTextShadowStyle}
       >
+        <ChatTimelineBackground className="z-0" />
+        {timelineUnderHeader ? <ChatTopbarBlur /> : null}
         {embedded ? null : (
           <header
-            ref={threadPanelPopoverAnchorRef}
+            ref={attachChatHeader}
             data-chat-header
             className={cn(
-              "relative bg-background [[data-panel-animations=true]_&]:motion-safe:transition-[padding-left] [[data-panel-animations=true]_&]:motion-safe:duration-(--panel-animation-duration) [[data-panel-animations=true]_&]:motion-safe:ease-out",
+              "relative [[data-panel-animations=true]_&]:motion-safe:transition-[padding-left] [[data-panel-animations=true]_&]:motion-safe:duration-(--panel-animation-duration) [[data-panel-animations=true]_&]:motion-safe:ease-out",
               isElectron
                 ? cn(
                     "drag-region flex h-[var(--workspace-topbar-height)] min-h-[var(--workspace-topbar-height)] shrink-0 items-center px-3 sm:px-5",
@@ -3293,6 +3323,7 @@ export default function ChatView(props: ChatViewProps) {
                   )
                 : "flex h-[var(--workspace-topbar-height)] min-h-[var(--workspace-topbar-height)] shrink-0 items-center pl-(--workspace-gutter-start) pr-(--workspace-gutter-end)",
               COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS,
+              hasTimelineBackground ? "isolate z-10" : "bg-background",
             )}
           >
             {isElectron && rightPanelControlsAtRoot ? (
@@ -3363,7 +3394,11 @@ export default function ChatView(props: ChatViewProps) {
             />
             <div
               {...conversationArea}
-              className="relative flex min-h-0 flex-1 flex-col bg-background"
+              className={cn(
+                "relative isolate flex min-h-0 flex-1 flex-col",
+                !hasTimelineBackground && "bg-background",
+                timelineUnderHeader && "-mt-[var(--workspace-topbar-height)]",
+              )}
             >
               <WorkspaceMutationIdContext value={workspaceMutationId}>
                 <ThreadTimeline
@@ -3460,6 +3495,8 @@ export default function ChatView(props: ChatViewProps) {
                   hideEmptyPlaceholder={isDraftHeroState || threadDetailLoading}
                   emptyPlaceholderInset={composerReservedHeight}
                   topFadeEnabled={!hasTimelineTopBanner}
+                  topFadeMaskEnabled={!hasTimelineBackground}
+                  headerInset={timelineHeaderInset}
                   {...(threadHistoryControls === undefined
                     ? {}
                     : { historyControls: threadHistoryControls })}
@@ -3483,11 +3520,12 @@ export default function ChatView(props: ChatViewProps) {
               }}
               inert={isRevertingCheckpoint}
               data-chat-composer-overlay="true"
-              className={
+              className={cn(
                 isDraftHeroState
-                  ? "pointer-events-none absolute inset-0 z-20 flex items-center [@media(max-height:34rem)]:items-end"
-                  : "pointer-events-none absolute inset-x-0 bottom-0 z-20 pt-1.5 sm:pt-2"
-              }
+                  ? "pointer-events-none absolute inset-0 flex items-center [@media(max-height:34rem)]:items-end"
+                  : "pointer-events-none absolute inset-x-0 bottom-0 pt-1.5 sm:pt-2",
+                hasTimelineBackground ? "z-[1]" : "z-20",
+              )}
             >
               <div ref={draftHeroTransitionGroupRef} className="chat-composer-lane w-full">
                 <div
@@ -3497,7 +3535,10 @@ export default function ChatView(props: ChatViewProps) {
                   {isDraftHeroState ? (
                     <div className="absolute inset-x-0 bottom-full">
                       <div
-                        className="pb-4 group-has-data-[composer-shoulder-tab]/composer-stack:pb-0"
+                        className={cn(
+                          "pb-4 group-has-data-[composer-shoulder-tab]/composer-stack:pb-0",
+                          hasTimelineBackground && CHAT_BACKGROUND_TEXT_SHADOW_CLASSES,
+                        )}
                         style={
                           forceExpandedMobileComposer
                             ? { viewTransitionName: MOBILE_DRAFT_HEADLINE_VIEW_TRANSITION_NAME }
@@ -3515,11 +3556,7 @@ export default function ChatView(props: ChatViewProps) {
                   <div
                     ref={draftHeroComposerAnchorRef}
                     className="relative z-10"
-                    style={
-                      forceExpandedMobileComposer
-                        ? { viewTransitionName: MOBILE_COMPOSER_VIEW_TRANSITION_NAME }
-                        : undefined
-                    }
+                    data-mobile-composer-transition={forceExpandedMobileComposer || undefined}
                   >
                     <ChildThreadApprovals threadRef={activeThreadRef} />
                     <div className="relative">
diff --git a/apps/web/src/components/chat/ChangedFilesTree.tsx b/apps/web/src/components/chat/ChangedFilesTree.tsx
index 6b49b81401f33..e5bd78a23ec77 100644
--- a/apps/web/src/components/chat/ChangedFilesTree.tsx
+++ b/apps/web/src/components/chat/ChangedFilesTree.tsx
@@ -1,6 +1,18 @@
 import { useSyncLayout } from "@legendapp/list/react";
+import {
+  CHAT_BACKGROUND_GLASS_SURFACE_CLASSES,
+  useHasTimelineBackground,
+} from "./ChatTimelineBackground";
 import { type OrchestrationV2CheckpointFileTotals, type RunId } from "@t3tools/contracts";
-import { type MouseEvent, type ReactNode, memo, useLayoutEffect, useRef, useState } from "react";
+import {
+  type MouseEvent,
+  type ReactNode,
+  memo,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
 import { type TurnDiffFileChange } from "../../types";
 import { buildTurnDiffTree, type TurnDiffTreeNode } from "../../lib/turnDiffTree";
 import { ChevronRightIcon, FileDiffIcon } from "lucide-react";
@@ -47,17 +59,54 @@ export const ChangedFilesCard = memo(function ChangedFilesCard(props: {
     onFileContextMenu,
   } = props;
   const syncTimelineLayout = useSyncLayout();
+  const glass = useHasTimelineBackground();
+  const headerRef = useRef<HTMLDivElement>(null);
+  const [headerPinned, setHeaderPinned] = useState(false);
+  // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- follows the scroll container so the sticky header gets a backing only while pinned over rows
+  useEffect(() => {
+    const header = headerRef.current;
+    const card = header?.parentElement;
+    if (!glass || !header || !card) return;
+    let root = card.parentElement;
+    while (root && !/auto|scroll/.test(getComputedStyle(root).overflowY)) {
+      root = root.parentElement;
+    }
+    // One backdrop spans the card. Only a pinned header needs to cover rows beneath it.
+    let frame = 0;
+    const measure = () => {
+      frame = 0;
+      setHeaderPinned(header.getBoundingClientRect().top > card.getBoundingClientRect().top + 0.5);
+    };
+    const scheduleMeasure = () => {
+      if (!frame) frame = requestAnimationFrame(measure);
+    };
+    const scrollTarget = root ?? window;
+    scrollTarget.addEventListener("scroll", scheduleMeasure, { passive: true });
+    scheduleMeasure();
+    return () => {
+      scrollTarget.removeEventListener("scroll", scheduleMeasure);
+      cancelAnimationFrame(frame);
+    };
+  });
   const hiddenFileCount = totals.count - files.length;
   const hasDirectories = files.some((file) => /[/\\]/.test(file.path));
 
   return (
     <div
-      className="@container/changed-files mt-4 rounded-lg bg-secondary dark:bg-input/20"
+      className={cn(
+        "@container/changed-files mt-4 rounded-lg",
+        glass ? CHAT_BACKGROUND_GLASS_SURFACE_CLASSES : "bg-secondary dark:bg-input/20",
+      )}
       data-changed-files-state="tree"
     >
       <div
+        ref={headerRef}
         data-changed-files-header=""
-        className="sticky top-2 z-10 flex items-center justify-between gap-2 rounded-t-lg bg-secondary px-3 py-2 dark:bg-background dark:bg-linear-to-b dark:from-input/20 dark:to-input/20"
+        className={cn(
+          "sticky top-[calc(var(--chat-timeline-header-inset,0px)+0.5rem)] z-10 flex items-center justify-between gap-2 rounded-t-lg px-3 py-2",
+          (!glass || headerPinned) &&
+            "bg-secondary dark:bg-background dark:bg-linear-to-b dark:from-input/20 dark:to-input/20",
+        )}
       >
         <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 text-xs font-medium text-foreground">
           <span>
@@ -108,7 +157,7 @@ export const ChangedFilesCard = memo(function ChangedFilesCard(props: {
                 <Button
                   type="button"
                   size="xs"
-                  variant="ghost-muted"
+                  variant={glass ? "ghost" : "ghost-muted"}
                   aria-label="Open diff"
                   onClick={() => onOpenTurnDiff(runId, files[0]?.path)}
                 />
@@ -121,15 +170,17 @@ export const ChangedFilesCard = memo(function ChangedFilesCard(props: {
           </Tooltip>
         </div>
       </div>
-      <ChangedFilesTree
-        key={`${runId}:${allDirectoriesExpanded}`}
-        runId={runId}
-        files={files}
-        allDirectoriesExpanded={allDirectoriesExpanded}
-        resolvedTheme={resolvedTheme}
-        onOpenTurnDiff={onOpenTurnDiff}
-        onFileContextMenu={onFileContextMenu}
-      />
+      <div className="rounded-b-lg">
+        <ChangedFilesTree
+          key={`${runId}:${allDirectoriesExpanded}`}
+          runId={runId}
+          files={files}
+          allDirectoriesExpanded={allDirectoriesExpanded}
+          resolvedTheme={resolvedTheme}
+          onOpenTurnDiff={onOpenTurnDiff}
+          onFileContextMenu={onFileContextMenu}
+        />
+      </div>
       {hiddenFileCount > 0 && (
         <div className="px-3 pb-2">
           <Button
@@ -163,6 +214,7 @@ const ChangedFilesTree = memo(function ChangedFilesTree(props: {
     overrides: Record<string, boolean>;
   }>({ key: null, overrides: {} });
   const syncTimelineLayout = useSyncLayout();
+  const glass = useHasTimelineBackground();
   const treeNodes = buildTurnDiffTree(files);
   const directoryPathsKey = collectDirectoryPaths(treeNodes).join("\u0000");
   const hasDirectoryNodes = directoryPathsKey.length > 0;
@@ -215,7 +267,12 @@ const ChangedFilesTree = memo(function ChangedFilesTree(props: {
             className="size-3.5 shrink-0 text-muted-foreground/75"
             icon={isExpanded ? Folder : FolderClosed}
           />
-          <span className="truncate font-mono text-2xs text-muted-foreground/90 group-hover:text-foreground/90">
+          <span
+            className={cn(
+              "truncate font-mono text-2xs group-hover:text-foreground/90",
+              glass ? "text-foreground/80" : "text-muted-foreground/90",
+            )}
+          >
             {node.name}
           </span>
           {hasNonZeroStat(node.stat) && (
diff --git a/apps/web/src/components/chat/ChatMarkdownMedia.tsx b/apps/web/src/components/chat/ChatMarkdownMedia.tsx
index c810890ebf96b..8c1494d878dca 100644
--- a/apps/web/src/components/chat/ChatMarkdownMedia.tsx
+++ b/apps/web/src/components/chat/ChatMarkdownMedia.tsx
@@ -26,7 +26,7 @@ const CHAT_MARKDOWN_MEDIA_BOUNDS_CLASS_NAME = cn(
   "max-h-[30rem]",
   CHAT_MARKDOWN_MEDIA_MAX_WIDTH_CLASS_NAME,
 );
-const CHAT_MARKDOWN_MEDIA_LAYOUT_CLASS_NAME = "inline-block!";
+const CHAT_MARKDOWN_MEDIA_LAYOUT_CLASS_NAME = "inline-block! chat-markdown-media-no-shadow";
 const CHAT_MARKDOWN_MEDIA_FRAME_CLASS_NAME = "rounded-lg border border-border/40";
 const CHAT_MARKDOWN_IMAGE_SIZE_CLASS_NAME = cn(
   "h-auto w-auto object-contain",
diff --git a/apps/web/src/components/chat/ChatTimelineBackground.tsx b/apps/web/src/components/chat/ChatTimelineBackground.tsx
new file mode 100644
index 0000000000000..d5f4369b23066
--- /dev/null
+++ b/apps/web/src/components/chat/ChatTimelineBackground.tsx
@@ -0,0 +1,104 @@
+import { useSyncExternalStore, type CSSProperties } from "react";
+import { cn } from "../../lib/utils";
+import { useClientSettings } from "../../hooks/useSettings";
+
+let failedImage: string | null = null;
+const imageListeners = new Set<() => void>();
+
+function setFailedImage(image: string | null) {
+  if (failedImage === image) return;
+  failedImage = image;
+  for (const listener of imageListeners) listener();
+}
+
+function subscribeToImage(listener: () => void) {
+  imageListeners.add(listener);
+  return () => imageListeners.delete(listener);
+}
+
+export function useTimelineBackgroundFailed(image: string) {
+  return useSyncExternalStore(
+    subscribeToImage,
+    () => failedImage === image,
+    () => false,
+  );
+}
+
+export const CHAT_BACKGROUND_GLASS_SURFACE_CLASSES =
+  "surface-glass [--surface-glass-color:var(--secondary)] [text-shadow:none] dark:[--surface-glass-color:color-mix(in_srgb,var(--input)_20%,var(--background))]";
+
+export const CHAT_BACKGROUND_TEXT_SHADOW_CLASSES =
+  "[text-shadow:var(--chat-text-shadow)] [--chat-link-color:color-mix(in_srgb,var(--info-foreground)_80%,var(--contrast-foreground))] [&_:is(button,[role=button],code,.chat-markdown-codeblock,.chat-markdown-file-link,.chat-markdown-artifact-template)]:[text-shadow:none]";
+
+export function timelineTextShadowStyle(opacity: number, blur: number): CSSProperties {
+  return {
+    "--chat-text-shadow":
+      opacity === 0
+        ? "none"
+        : `0 1px ${blur}px color-mix(in oklab, var(--background) ${opacity}%, transparent)`,
+  } as CSSProperties;
+}
+
+export function useTimelineTextShadowStyle() {
+  const opacity = useClientSettings((settings) => settings.timelineTextShadowOpacity);
+  const blur = useClientSettings((settings) => settings.timelineTextShadowBlur);
+  return timelineTextShadowStyle(opacity, blur);
+}
+
+export function TimelineBackgroundImage({
+  image,
+  opacity,
+  blur,
+  className,
+}: {
+  image: string;
+  opacity: number;
+  blur: number;
+  className?: string | undefined;
+}) {
+  if (!image || opacity === 0) return null;
+
+  return (
+    <div
+      aria-hidden="true"
+      className={cn("pointer-events-none absolute inset-0 -z-10 overflow-hidden", className)}
+    >
+      <img
+        key={image}
+        src={image}
+        alt=""
+        draggable={false}
+        onError={(event) => {
+          event.currentTarget.style.visibility = "hidden";
+          setFailedImage(image);
+        }}
+        onLoad={(event) => {
+          event.currentTarget.style.visibility = "";
+          if (failedImage === image) setFailedImage(null);
+        }}
+        className="absolute inset-0 size-full object-cover"
+        style={{
+          opacity: opacity / 100,
+          filter: blur > 0 ? `blur(${blur}px)` : undefined,
+        }}
+      />
+    </div>
+  );
+}
+
+export function ChatTimelineBackground({ className }: { className?: string | undefined }) {
+  const image = useClientSettings((settings) => settings.timelineBackgroundImage);
+  const opacity = useClientSettings((settings) => settings.timelineBackgroundOpacity);
+  const blur = useClientSettings((settings) => settings.timelineBackgroundBlur);
+  return (
+    <TimelineBackgroundImage image={image} opacity={opacity} blur={blur} className={className} />
+  );
+}
+
+/** Timeline cards only pay for backdrop blur when there is a wallpaper to show through. */
+export function useHasTimelineBackground() {
+  const image = useClientSettings((settings) => settings.timelineBackgroundImage);
+  const opacity = useClientSettings((settings) => settings.timelineBackgroundOpacity);
+  const failed = useTimelineBackgroundFailed(image);
+  return Boolean(image) && opacity > 0 && !failed;
+}
diff --git a/apps/web/src/components/chat/ChatTopbarBlur.tsx b/apps/web/src/components/chat/ChatTopbarBlur.tsx
new file mode 100644
index 0000000000000..0a1acb024aa5a
--- /dev/null
+++ b/apps/web/src/components/chat/ChatTopbarBlur.tsx
@@ -0,0 +1,25 @@
+// The marketing redesign's navigation blur: overlapping masks taper each
+// backdrop filter into the next, avoiding a hard edge below the header.
+const BLUR_LAYERS = [32, 16, 8, 4, 2, 1, 0.5].map((blur, index) => {
+  const mask = `linear-gradient(to bottom, ${index === 0 ? "#000 0%" : `transparent ${(index - 1) * 12.5}%`}, #000 ${index * 12.5}%, #000 ${(index + 1) * 12.5}%, transparent ${(index + 2) * 12.5}%)`;
+  return {
+    backdropFilter: `blur(${blur}px)`,
+    WebkitBackdropFilter: `blur(${blur}px)`,
+    maskImage: mask,
+    WebkitMaskImage: mask,
+  };
+});
+
+export function ChatTopbarBlur() {
+  return (
+    <div
+      aria-hidden="true"
+      className="pointer-events-none absolute inset-x-0 top-0 z-[5] h-[calc(var(--workspace-topbar-height)+1.5rem)] overflow-hidden"
+    >
+      {BLUR_LAYERS.map((style) => (
+        <div key={style.backdropFilter} className="absolute inset-0" style={style} />
+      ))}
+      <div className="absolute inset-0 chat-topbar-tint" />
+    </div>
+  );
+}
diff --git a/apps/web/src/components/chat/HtmlRenderFrame.tsx b/apps/web/src/components/chat/HtmlRenderFrame.tsx
index 93764adecfeb3..63984451e513b 100644
--- a/apps/web/src/components/chat/HtmlRenderFrame.tsx
+++ b/apps/web/src/components/chat/HtmlRenderFrame.tsx
@@ -10,6 +10,9 @@ import { useEffect, useState } from "react";
 
 import { useAssetUrlRefresh } from "~/assets/assetUrls";
 import { useLongLivedAssetUrl } from "~/assets/longLivedAssetUrls";
+import { cn } from "~/lib/utils";
+
+import { useHasTimelineBackground } from "./ChatTimelineBackground";
 
 import { HtmlRenderDocument } from "../files/BrowserDocumentFrame";
 import { Button } from "../ui/button";
@@ -27,6 +30,7 @@ export function HtmlRenderFrame(props: {
   readonly onFullscreenChange?: (fullscreen: boolean) => void;
 }) {
   const { attachmentId, title } = props.htmlRender;
+  const glass = useHasTimelineBackground();
   const [width, setWidth] = useState(HTML_RENDER_COLUMN_WIDTH);
   const observeBox = (box: HTMLDivElement) => {
     setWidth(box.clientWidth);
@@ -67,7 +71,11 @@ export function HtmlRenderFrame(props: {
   }, [expanded, onFullscreenChange]);
 
   return (
-    <div ref={observeBox} className="group/html-render relative" style={{ height }}>
+    <div
+      ref={observeBox}
+      className={cn("group/html-render relative", glass && "surface-glass")}
+      style={{ height }}
+    >
       {src !== null ? (
         <>
           <HtmlRenderDocument
diff --git a/apps/web/src/components/chat/MarkdownCodeBlock.tsx b/apps/web/src/components/chat/MarkdownCodeBlock.tsx
index 301843c4ebe36..be2c1e778ee29 100644
--- a/apps/web/src/components/chat/MarkdownCodeBlock.tsx
+++ b/apps/web/src/components/chat/MarkdownCodeBlock.tsx
@@ -13,6 +13,7 @@ import {
 import { LRUCache } from "../../lib/lruCache";
 import { getSyntaxHighlighterPromise } from "../../lib/syntaxHighlighting";
 import { cn } from "../../lib/utils";
+import { CHAT_BACKGROUND_GLASS_SURFACE_CLASSES } from "./ChatTimelineBackground";
 import {
   hasSpecificPierreIconForFileName,
   syntheticFileNameForLanguageId,
@@ -50,6 +51,7 @@ export function MarkdownCodeBlockFrame({
   title,
   actions,
   headerProps,
+  glass = false,
   children,
 }: {
   as?: React.ElementType;
@@ -60,12 +62,17 @@ export function MarkdownCodeBlockFrame({
   title?: React.ReactNode;
   actions?: React.ReactNode;
   headerProps?: React.HTMLAttributes<HTMLDivElement>;
+  /** Glass over a chat wallpaper instead of the opaque secondary tint. */
+  glass?: boolean;
   children: React.ReactNode;
 }) {
   return (
     <Wrapper
       dir="ltr"
-      className="chat-markdown-codeblock my-[0.65rem] text-start overflow-hidden rounded-lg border border-border/70 bg-secondary leading-snug dark:border-transparent dark:bg-input/32"
+      className={cn(
+        "chat-markdown-codeblock my-[0.65rem] text-start overflow-hidden rounded-lg border border-border/70 leading-snug dark:border-transparent",
+        glass ? CHAT_BACKGROUND_GLASS_SURFACE_CLASSES : "bg-secondary dark:bg-input/32",
+      )}
       data-language={language}
       data-wrap={wrapped ? "true" : "false"}
     >
@@ -138,6 +145,7 @@ export function MarkdownCodeBlock({
   viewToggle,
   canWrap = true,
   diagram = false,
+  glass = false,
   children,
 }: {
   code: string;
@@ -149,6 +157,7 @@ export function MarkdownCodeBlock({
   viewToggle?: ReactNode;
   canWrap?: boolean;
   diagram?: boolean;
+  glass?: boolean;
   children: ReactNode;
 }) {
   const { copyToClipboard, isCopied: copied } = useCopyToClipboard({
@@ -218,6 +227,7 @@ export function MarkdownCodeBlock({
       theme={theme}
       wrapped={wrapped}
       headerProps={THREAD_FIND_IGNORE_PROPS}
+      glass={glass}
       actions={
         <span className="flex items-center gap-0.5" role="toolbar" aria-label="Code block actions">
           {canWrap ? (
diff --git a/apps/web/src/components/chat/MarkdownDetails.tsx b/apps/web/src/components/chat/MarkdownDetails.tsx
index b794ce73e513d..a779c8688342c 100644
--- a/apps/web/src/components/chat/MarkdownDetails.tsx
+++ b/apps/web/src/components/chat/MarkdownDetails.tsx
@@ -10,11 +10,14 @@ import {
 
 import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from "../ui/collapsible";
 import { findRevealRef, MarkdownFindContext } from "./markdownFindContext";
+import { cn } from "../../lib/utils";
+import { CHAT_BACKGROUND_GLASS_SURFACE_CLASSES } from "./ChatTimelineBackground";
 
 export function MarkdownDetails({
   children,
   open = false,
-}: Pick<ComponentProps<"details">, "children" | "open">) {
+  glass = false,
+}: Pick<ComponentProps<"details">, "children" | "open"> & { glass?: boolean }) {
   const [isOpen, setIsOpen] = useState(open);
   const searching = use(MarkdownFindContext);
   const expanded = isOpen;
@@ -34,7 +37,12 @@ export function MarkdownDetails({
   const content = childNodes.filter((_, index) => index !== summaryIndex);
 
   return (
-    <div className="my-2 border-y border-border/60">
+    <div
+      className={cn(
+        "my-2 border-y border-border/60",
+        glass && [CHAT_BACKGROUND_GLASS_SURFACE_CLASSES, "rounded-lg px-3"],
+      )}
+    >
       <Collapsible
         open={expanded}
         onOpenChange={setIsOpen}
diff --git a/apps/web/src/components/chat/MarkdownTable.tsx b/apps/web/src/components/chat/MarkdownTable.tsx
index ee1e1825adcd2..57865fcf38e46 100644
--- a/apps/web/src/components/chat/MarkdownTable.tsx
+++ b/apps/web/src/components/chat/MarkdownTable.tsx
@@ -12,8 +12,14 @@ import { Menu, MenuItem, MenuPopup, MenuTrigger } from "../ui/menu";
 import { ScrollArea } from "../ui/scroll-area";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import { reportMarkdownActionFailure } from "./markdownActionFailure";
+import { cn } from "../../lib/utils";
+import { CHAT_BACKGROUND_GLASS_SURFACE_CLASSES } from "./ChatTimelineBackground";
 
-export function MarkdownTable({ children, ...props }: ComponentProps<"table">) {
+export function MarkdownTable({
+  children,
+  glass = false,
+  ...props
+}: ComponentProps<"table"> & { glass?: boolean }) {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const { copyToClipboard, isCopied: copied } = useCopyToClipboard<"markdown" | "csv">({
     timeout: 1200,
@@ -34,7 +40,13 @@ export function MarkdownTable({ children, ...props }: ComponentProps<"table">) {
   };
 
   return (
-    <div ref={containerRef} className="chat-markdown-table-container">
+    <div
+      ref={containerRef}
+      className={cn(
+        "chat-markdown-table-container",
+        glass && [CHAT_BACKGROUND_GLASS_SURFACE_CLASSES, "overflow-hidden rounded-lg"],
+      )}
+    >
       <ScrollArea radius="none" chainVerticalScroll scrollFade className="w-full max-w-full">
         <table {...props}>{children}</table>
       </ScrollArea>
diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index 09f8155c4f9bf..365b421ae9a9a 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -3,6 +3,7 @@ import { useAtomCommand } from "../../state/use-atom-command";
 import type { ToolCallDiffTarget } from "../../diffPanelStore";
 import { AudioPreviewUnmountContext } from "../files/AudioPreview";
 import { ThreadFindTimelineContext } from "./ThreadFindProvider";
+import { useHasTimelineBackground } from "./ChatTimelineBackground";
 import { MarkdownFindContext } from "./markdownFindContext";
 import { useChatCanvas } from "./ChatCanvasContext";
 import { WorkLogBlock } from "./WorkLog";
@@ -42,6 +43,7 @@ import {
   useEffectEvent,
   useRef,
   useState,
+  type CSSProperties,
   type ReactNode,
   type SyntheticEvent,
 } from "react";
@@ -310,6 +312,10 @@ interface MessagesTimelineProps {
   /** Composer space to center the empty state against; held steady through collapse. */
   emptyPlaceholderInset: number;
   topFadeEnabled?: boolean;
+  /** Masks block row backdrop filters from sampling a wallpaper behind the list. */
+  topFadeMaskEnabled?: boolean;
+  /** Reserve header space inside the scrollport so rows can scroll beneath its blur. */
+  headerInset?: number;
   historyControls?: MessagesTimelineHistoryControls | undefined;
   findExpanded?: boolean;
   findQuery?: string;
@@ -404,8 +410,11 @@ const ConversationTimeline = memo(function ConversationTimeline({
   hideEmptyPlaceholder = false,
   emptyPlaceholderInset,
   topFadeEnabled = false,
+  topFadeMaskEnabled = true,
+  headerInset = 0,
   historyControls,
 }: MessagesTimelineProps) {
+  const hasTimelineBackground = useHasTimelineBackground();
   const listIdentityKey = displayThreadKey ?? routeThreadKey;
   // Snapshot restore positions on identity changes; ongoing scroll writes must not move them.
   // Find open at the opening is part of the snapshot: opening find later
@@ -808,7 +817,7 @@ const ConversationTimeline = memo(function ConversationTimeline({
     rows,
     anchorMessageId,
     (row) => (row.kind === "message" && row.message.role === "user" ? row.message.id : null),
-    { anchorOffset: CHAT_TIMELINE_ANCHOR_OFFSET },
+    { anchorOffset: CHAT_TIMELINE_ANCHOR_OFFSET + headerInset },
   );
   const anchoredEndSpace = anchoredEndSpaceConfig
     ? {
@@ -1093,11 +1102,11 @@ const ConversationTimeline = memo(function ConversationTimeline({
       </div>
     );
   const listHeader = (
-    <>
+    <div style={{ paddingTop: headerInset }}>
       {parentThreadLink === null ? listHeaderLeadingContent : null}
       {historyControls ? <TimelineHistoryControl {...historyControls} /> : null}
       {parentThreadLink !== null ? listHeaderLeadingContent : null}
-    </>
+    </div>
   );
 
   const canvas = useChatCanvas();
@@ -1251,7 +1260,11 @@ const ConversationTimeline = memo(function ConversationTimeline({
       return (
         <>
           {activityAnnouncer}
-          <div className="h-full min-h-0 bg-background" data-timeline-loading="true" />
+          {/* The wallpaper, when set, shows through instead of the theme surface. */}
+          <div
+            className={cn("h-full min-h-0", !hasTimelineBackground && "bg-background")}
+            data-timeline-loading="true"
+          />
         </>
       );
     }
@@ -1325,8 +1338,9 @@ const ConversationTimeline = memo(function ConversationTimeline({
               onItemSizeChanged={scheduleMinimapRefresh}
               className={cn(
                 "messages-timeline-scroll scrollbar-gutter-both h-full min-h-0 overflow-x-hidden overscroll-y-contain [overflow-anchor:none]",
-                topFadeEnabled && "topbar-scroll-fade",
+                topFadeEnabled && topFadeMaskEnabled && "topbar-scroll-fade",
               )}
+              style={{ "--chat-timeline-header-inset": `${headerInset}px` } as CSSProperties}
               ListHeaderComponent={listHeader}
               ListFooterComponent={timelineListFooter}
             />
@@ -1342,7 +1356,7 @@ const ConversationTimeline = memo(function ConversationTimeline({
                 void listRef.current?.scrollToIndex({
                   index: item.rowIndex,
                   animated: !window.matchMedia("(prefers-reduced-motion: reduce)").matches,
-                  viewOffset: 24,
+                  viewOffset: CHAT_TIMELINE_ANCHOR_OFFSET + headerInset,
                 });
               }}
             />
@@ -1515,6 +1529,7 @@ function ContextCompactionTimelineRow({
 }: {
   row: Extract<TimelineRow, { kind: "context-compaction" }>;
 }) {
+  const glass = useHasTimelineBackground();
   const label =
     row.title && row.label.startsWith("Context compacted")
       ? row.title + row.label.slice("Context compacted".length)
@@ -1546,7 +1561,7 @@ function ContextCompactionTimelineRow({
       aria-label={row.failure ? `${label}: ${row.failure}` : label}
       className={cn(
         "mx-auto flex w-full max-w-(--chat-content-max-width) items-center gap-3 py-1 text-xs",
-        row.failed ? "text-destructive" : "text-muted-foreground",
+        row.failed ? "text-destructive" : glass ? "text-foreground/80" : "text-muted-foreground",
       )}
     >
       <span className={cn("h-px flex-1", row.failed ? "bg-destructive/30" : "bg-border/70")} />
@@ -1619,6 +1634,7 @@ function WorkHistorySkeleton() {
 
 function TurnFoldTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "turn-fold" }> }) {
   const ctx = use(TimelineRowCtx);
+  const glass = useHasTimelineBackground();
   const { loading, error, toggle } = useDeferredWorkLoading(row, () =>
     ctx.onToggleTurnFold(row.runId),
   );
@@ -1632,7 +1648,10 @@ function TurnFoldTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "turn-
           data-scroll-anchor-ignore
           onClick={toggle}
           aria-busy={loading}
-          className="flex cursor-pointer select-none items-center gap-1 rounded-md px-1 text-sm leading-relaxed text-muted-foreground tabular-nums transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/70"
+          className={cn(
+            "flex cursor-pointer select-none items-center gap-1 rounded-md px-1 text-sm leading-relaxed text-muted-foreground tabular-nums transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/70",
+            glass && "text-foreground/80",
+          )}
         >
           <span>
             {row.label}
diff --git a/apps/web/src/components/chat/ProposedPlanCard.tsx b/apps/web/src/components/chat/ProposedPlanCard.tsx
index 90a4b4950ff09..d0b7218467d46 100644
--- a/apps/web/src/components/chat/ProposedPlanCard.tsx
+++ b/apps/web/src/components/chat/ProposedPlanCard.tsx
@@ -22,6 +22,7 @@ import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 import { Menu, MenuItem, MenuPopup, MenuTrigger } from "../ui/menu";
 import { cn } from "~/lib/utils";
+import { useHasTimelineBackground } from "./ChatTimelineBackground";
 import { Badge } from "../ui/badge";
 import {
   Dialog,
@@ -157,8 +158,14 @@ export const ProposedPlanCard = memo(function ProposedPlanCard({
     })();
   };
 
+  const glass = useHasTimelineBackground();
   return (
-    <div className="rounded-2xl border border-border/80 bg-card/70 p-4 sm:p-5">
+    <div
+      className={cn(
+        "rounded-2xl border border-border/80 p-4 sm:p-5",
+        glass ? "surface-glass chat-wallpaper-plan-surface" : "bg-card/70",
+      )}
+    >
       <div className="flex flex-wrap items-center justify-between gap-3">
         <div className="flex min-w-0 items-center gap-2">
           <Badge variant="secondary">Plan</Badge>
diff --git a/apps/web/src/components/chat/TimelineAssistantRows.tsx b/apps/web/src/components/chat/TimelineAssistantRows.tsx
index 458d84b9e982b..2e3fbae394b99 100644
--- a/apps/web/src/components/chat/TimelineAssistantRows.tsx
+++ b/apps/web/src/components/chat/TimelineAssistantRows.tsx
@@ -1,7 +1,7 @@
 import { shouldPreserveAssistantLineBreaks } from "@t3tools/shared/markdownPipeline";
 import { type RunId } from "@t3tools/contracts";
 import { canForkProjectedAssistantItem } from "@t3tools/client-runtime/state/thread-workflows";
-import { memo, use, useState } from "react";
+import { memo, use, useState, type ReactNode } from "react";
 import { type ChatMessage, type TurnDiffSummary } from "../../types";
 import ChatMarkdown from "../ChatMarkdown";
 import { GitForkIcon } from "lucide-react";
@@ -18,14 +18,23 @@ import { AssistantCitationSource } from "./AssistantCitationSource";
 import { resolveAssistantMessageCopyState } from "./MessagesTimeline.logic";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import { cn } from "~/lib/utils";
+import {
+  CHAT_BACKGROUND_TEXT_SHADOW_CLASSES,
+  useHasTimelineBackground,
+} from "./ChatTimelineBackground";
 import { useUiStateStore } from "~/uiStateStore";
 import { formatChatTimestampTooltip, formatDayAwareTimestamp } from "../../timestampFormat";
 import { useV2ItemSupport } from "../../state/v2ItemSupport";
 import { TimelineRowCtx, TimelineRowActivityCtx, type TimelineRow } from "./timelineRowContext";
 import { MESSAGE_HEADING_LEVEL, MessageAuthorHeading } from "./TimelineRowParts";
 
+export function AssistantMessageSurface({ children }: { children: ReactNode }) {
+  return <div className="relative min-w-0 px-1 py-0.5">{children}</div>;
+}
+
 export function AssistantTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message" }> }) {
   const ctx = use(TimelineRowCtx);
+  const hasTimelineBackground = useHasTimelineBackground();
   // The timeline holds a streaming message's row while only its text grows.
   const liveText = useAssistantMessageText(
     row.message.streaming ? ctx.threadRef : null,
@@ -36,7 +45,7 @@ export function AssistantTimelineRow({ row }: { row: Extract<TimelineRow, { kind
 
   return (
     <>
-      <div className="relative min-w-0 px-1 py-0.5">
+      <AssistantMessageSurface>
         <MessageAuthorHeading>T3 Code</MessageAuthorHeading>
         <div data-thread-find-text="true">
           <AssistantCitationSource
@@ -47,6 +56,8 @@ export function AssistantTimelineRow({ row }: { row: Extract<TimelineRow, { kind
             listRef={ctx.listRef}
           >
             <ChatMarkdown
+              glassSurfaces={hasTimelineBackground}
+              className={cn(hasTimelineBackground && CHAT_BACKGROUND_TEXT_SHADOW_CLASSES)}
               text={messageText}
               cwd={ctx.markdownCwd}
               threadRef={ctx.threadRef ?? undefined}
@@ -77,7 +88,7 @@ export function AssistantTimelineRow({ row }: { row: Extract<TimelineRow, { kind
             copyStreaming={row.assistantCopyStreaming}
           />
         ) : null}
-      </div>
+      </AssistantMessageSurface>
     </>
   );
 }
@@ -164,6 +175,7 @@ function AssistantMessageMeta({
   alwaysVisible?: boolean;
 }) {
   const ctx = use(TimelineRowCtx);
+  const glass = useHasTimelineBackground();
 
   return (
     <div
@@ -190,7 +202,16 @@ function AssistantMessageMeta({
       ) : null}
       {!message.streaming && (
         <Tooltip>
-          <TooltipTrigger render={<p className="text-muted-foreground text-xs tabular-nums" />}>
+          <TooltipTrigger
+            render={
+              <p
+                className={cn(
+                  "text-muted-foreground text-xs tabular-nums",
+                  glass && "text-foreground/80",
+                )}
+              />
+            }
+          >
             {formatDayAwareTimestamp(message.updatedAt, ctx.timestampFormat)}
           </TooltipTrigger>
           <TooltipPopup>
diff --git a/apps/web/src/components/chat/TimelineRowParts.tsx b/apps/web/src/components/chat/TimelineRowParts.tsx
index 549b9c7a422f9..07446d1d7540a 100644
--- a/apps/web/src/components/chat/TimelineRowParts.tsx
+++ b/apps/web/src/components/chat/TimelineRowParts.tsx
@@ -1,6 +1,7 @@
 import { type ReactNode } from "react";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import { cn } from "~/lib/utils";
+import { useHasTimelineBackground } from "./ChatTimelineBackground";
 import { type TimestampFormat } from "@t3tools/contracts/settings";
 import { formatChatTimestampTooltip, formatDayAwareTimestamp } from "../../timestampFormat";
 
@@ -21,6 +22,7 @@ export function TimelineRowTimestamp({
   className?: string;
   alwaysVisible?: boolean;
 }) {
+  const glass = useHasTimelineBackground();
   return (
     <Tooltip>
       <TooltipTrigger
@@ -29,6 +31,7 @@ export function TimelineRowTimestamp({
             className={cn(
               "pointer-events-none absolute me-1 shrink-0 whitespace-nowrap rounded-md text-muted-foreground text-xs tabular-nums opacity-0 group-hover/timeline-row:pointer-events-auto group-hover/timeline-row:static group-hover/timeline-row:opacity-100 group-focus-within/timeline-row:pointer-events-auto group-focus-within/timeline-row:static group-focus-within/timeline-row:opacity-100",
               alwaysVisible && "pointer-events-auto static opacity-100",
+              glass && "text-foreground/80",
               className,
             )}
           />
diff --git a/apps/web/src/components/chat/TimelineToolActivityIcon.tsx b/apps/web/src/components/chat/TimelineToolActivityIcon.tsx
index 26728be44497c..e39ff1c0e7648 100644
--- a/apps/web/src/components/chat/TimelineToolActivityIcon.tsx
+++ b/apps/web/src/components/chat/TimelineToolActivityIcon.tsx
@@ -82,11 +82,11 @@ export function ToolActivityIconView(props: {
   className: string;
   muted: boolean;
 }) {
-  const { resolvedTheme } = use(TimelineRowCtx);
   const fallbackClassName = cn(props.className, props.muted && "opacity-70 light:brightness-60");
   if (!props.icon) {
     return <WorkEntryIcon name={props.fallbackName} className={fallbackClassName} />;
   }
+  const { resolvedTheme } = use(TimelineRowCtx);
   if (props.icon._tag === "website") {
     const src = toolActivityFaviconUrl(props.icon, resolvedTheme, 32);
     return src ? (
diff --git a/apps/web/src/components/chat/TimelineUserMessageRow.tsx b/apps/web/src/components/chat/TimelineUserMessageRow.tsx
index 66bb9b586c679..63bc0774b3184 100644
--- a/apps/web/src/components/chat/TimelineUserMessageRow.tsx
+++ b/apps/web/src/components/chat/TimelineUserMessageRow.tsx
@@ -75,6 +75,7 @@ import {
 import { chatMarkdownClipboardPayload } from "../../markdown-clipboard";
 import type { ChatMarkdownContextReference } from "../ChatMarkdown";
 import { cn } from "~/lib/utils";
+import { useHasTimelineBackground } from "./ChatTimelineBackground";
 import { markdownProseDirection } from "~/textDirection";
 import { useMediaQuery } from "~/hooks/useMediaQuery";
 import { formatChatTimestampTooltip, formatDayAwareTimestamp } from "../../timestampFormat";
@@ -421,8 +422,23 @@ function UserMessageProjectedStatus({ row }: { row: Extract<TimelineRow, { kind:
   );
 }
 
+export function UserMessageBubble({ children }: { children: ReactNode }) {
+  const glass = useHasTimelineBackground();
+  return (
+    <div
+      className={cn(
+        "relative max-w-[80%] rounded-2xl p-3 text-message-foreground",
+        glass ? "surface-glass chat-wallpaper-user-surface" : "bg-message",
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
 function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message" }> }) {
   const ctx = use(TimelineRowCtx);
+  const glass = useHasTimelineBackground();
   const { onImageExpand, onFileOpen } = ctx;
   const coarsePointer = useMediaQuery({ pointer: "coarse" });
   const senderThreadId = row.message.senderThreadId;
@@ -862,7 +878,10 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
           BUBBLE_CHIP_CLASS_NAME,
           userMessage.attribution === "guest"
             ? guestBubbleClassName(false)
-            : !mediaOnly && !fileCardsOnly && !audioOnly && "bg-message",
+            : !mediaOnly &&
+                !fileCardsOnly &&
+                !audioOnly &&
+                (glass ? "surface-glass chat-wallpaper-user-surface" : "bg-message"),
           !folded && !mediaOnly && !fileCardsOnly && !audioOnly && "p-3",
           folded && expanded && "w-full",
         )}
@@ -1181,16 +1200,18 @@ const UserMessageBody = memo(function UserMessageBody(props: {
   markdownCwd: string | undefined;
 }) {
   const ctx = use(TimelineRowCtx);
+  const glass = useHasTimelineBackground();
   if (props.text.length === 0) {
     return null;
   }
   return (
     <ChatMarkdown
+      glassSurfaces={glass}
       text={props.text}
       cwd={props.markdownCwd}
       threadRef={ctx.threadRef ?? undefined}
       skills={props.skills}
-      className="text-foreground"
+      className="text-message-foreground"
       lineBreaks
       parseRawHtml={false}
       renderContextReference={props.renderContextReference}
diff --git a/apps/web/src/components/chat/TimelineV2EventRow.tsx b/apps/web/src/components/chat/TimelineV2EventRow.tsx
index e69ffdbaffdd4..0bb792ebbc8f0 100644
--- a/apps/web/src/components/chat/TimelineV2EventRow.tsx
+++ b/apps/web/src/components/chat/TimelineV2EventRow.tsx
@@ -9,6 +9,10 @@ import {
 import { memo, use, useState } from "react";
 import { ChevronDownIcon } from "lucide-react";
 import { cn } from "~/lib/utils";
+import {
+  CHAT_BACKGROUND_GLASS_SURFACE_CLASSES,
+  useHasTimelineBackground,
+} from "./ChatTimelineBackground";
 import { Collapsible, CollapsibleTrigger, CollapsiblePanel } from "../ui/collapsible";
 import { EnvironmentSubagentAvatar, SubagentElapsed, V2LifecycleRow } from "./V2LifecycleRow";
 import { LinkRequestCard } from "./LinkRequestCard";
@@ -57,6 +61,7 @@ const V2SubagentGroup = memo(function V2SubagentGroup({
   row: Extract<TimelineRow, { kind: "event" }>;
 }) {
   const ctx = use(TimelineRowCtx);
+  const glass = useHasTimelineBackground();
   const groupId = `subagent-group:${row.id}`;
   const [expanded, setExpanded] = useState(() =>
     ctx.workGroupViewState.expandedEntries.has(groupId),
@@ -144,7 +149,12 @@ const V2SubagentGroup = memo(function V2SubagentGroup({
         {/* Virtualized rows must settle before disclosure scroll anchoring resumes. */}
         <CollapsiblePanel animate={false}>
           {expanded ? (
-            <div className="mt-1 mb-1 rounded-lg border border-border/60 bg-card/30 p-1">
+            <div
+              className={cn(
+                "mt-1 mb-1 rounded-lg border border-border/60 p-1",
+                glass ? CHAT_BACKGROUND_GLASS_SURFACE_CLASSES : "bg-card/30",
+              )}
+            >
               {members.map((item) => (
                 <V2LifecycleRow
                   environmentId={ctx.activeThreadEnvironmentId}
diff --git a/apps/web/src/components/chat/TimelineWorkEntryRow.tsx b/apps/web/src/components/chat/TimelineWorkEntryRow.tsx
index 95661d16b9307..5ff15d7ca2628 100644
--- a/apps/web/src/components/chat/TimelineWorkEntryRow.tsx
+++ b/apps/web/src/components/chat/TimelineWorkEntryRow.tsx
@@ -44,6 +44,7 @@ import {
   workEntryReadOutput,
 } from "./MessagesTimeline.logic";
 import { cn } from "~/lib/utils";
+import { useHasTimelineBackground } from "./ChatTimelineBackground";
 import { formatUpcomingTimestamp } from "../../timestampFormat";
 import { FetchedToolOutput, V2ItemInspector } from "./V2ItemInspector";
 import { SubagentNotificationLink } from "./V2LifecycleRow";
@@ -174,6 +175,7 @@ export const SimpleWorkEntryRow = memo(function SimpleWorkEntryRow(props: WorkEn
 function WorkEntryLogRow(props: WorkEntryRowProps) {
   const { workEntry, workspaceRoot, displayLabel } = props;
   const ctx = use(TimelineRowCtx);
+  const glass = useHasTimelineBackground();
   const { threadRef, onImageExpand, timestampFormat } = ctx;
   const { retryableWorkspacePreparationRunIds, onRetryWorkspacePreparation } = ctx;
   const threadTarget = useThreadReadTarget(workEntry, ctx.activeThreadEnvironmentId);
@@ -236,7 +238,11 @@ function WorkEntryLogRow(props: WorkEntryRowProps) {
         }
         label={
           <span
-            className={cn("text-sm font-medium", warning ? "text-warning" : "text-destructive")}
+            className={cn(
+              "text-sm font-medium",
+              warning ? "text-warning" : "text-destructive",
+              warning && glass && "text-foreground/90",
+            )}
           >
             {label}
           </span>
@@ -367,7 +373,9 @@ function WorkEntryLogRow(props: WorkEntryRowProps) {
             : iconConfig.className,
   );
   const headingClass = showWarningIndicator
-    ? "font-medium text-warning"
+    ? glass
+      ? "font-medium text-foreground/90"
+      : "font-medium text-warning"
     : showDestructiveRowStyle
       ? "font-medium text-destructive"
       : workLogEntryIsToolLike(workEntry)
diff --git a/apps/web/src/components/chat/TimelineWorkGroupRows.tsx b/apps/web/src/components/chat/TimelineWorkGroupRows.tsx
index 5a62cde69c375..4c964a65ea78c 100644
--- a/apps/web/src/components/chat/TimelineWorkGroupRows.tsx
+++ b/apps/web/src/components/chat/TimelineWorkGroupRows.tsx
@@ -25,6 +25,7 @@ import { Popover, PopoverPopup, PopoverTrigger } from "../ui/popover";
 import { Spinner } from "../ui/spinner";
 import { WorktreeSetupCard } from "./WorktreeSetupCard";
 import { cn } from "~/lib/utils";
+import { useHasTimelineBackground } from "./ChatTimelineBackground";
 import { type TimestampFormat } from "@t3tools/contracts/settings";
 import {
   TimelineRowCtx,
@@ -278,22 +279,48 @@ const workEntryKey = (entry: TimelineWorkEntry) => entry.id;
 export function WorkingTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "working" }> }) {
   const { isCompacting, isPreparingWorktree, backgroundWorktreeSetup } =
     use(TimelineRowActivityCtx);
-  const compacting = row.compacting === true || isCompacting;
-  const shimmer = isPreparingWorktree || compacting;
+  return (
+    <WorkingIndicator
+      createdAt={row.createdAt}
+      isCompacting={row.compacting === true || isCompacting}
+      isPreparingWorktree={isPreparingWorktree}
+      backgroundWorktreeSetup={backgroundWorktreeSetup}
+    />
+  );
+}
+
+export function WorkingIndicator({
+  createdAt,
+  isCompacting = false,
+  isPreparingWorktree = false,
+  backgroundWorktreeSetup = null,
+}: {
+  createdAt: string | null;
+  isCompacting?: boolean;
+  isPreparingWorktree?: boolean;
+  backgroundWorktreeSetup?: WorktreeSetupSnapshot | null;
+}) {
+  const glass = useHasTimelineBackground();
+  const shimmer = isPreparingWorktree || isCompacting;
   const label = isPreparingWorktree ? (
     "Setting up worktree…"
-  ) : compacting ? (
-    <CompactingLabel createdAt={row.createdAt} />
-  ) : row.createdAt ? (
+  ) : isCompacting ? (
+    <CompactingLabel createdAt={createdAt} />
+  ) : createdAt ? (
     <>
-      Working for <WorkingTimer createdAt={row.createdAt} />
+      Working for <WorkingTimer createdAt={createdAt} />
     </>
   ) : (
     "Working..."
   );
   return (
     <div className="border-b border-border/60 pb-2 pt-1">
-      <div className="flex h-6 min-w-0 items-baseline gap-2 px-1 text-sm leading-relaxed text-muted-foreground tabular-nums">
+      <div
+        className={cn(
+          "flex h-6 min-w-0 items-baseline gap-2 px-1 text-sm leading-relaxed text-muted-foreground tabular-nums",
+          glass && "text-foreground/80",
+        )}
+      >
         <span
           ref={shimmer ? observeVisibleAnimation : undefined}
           className="relative shrink-0 overflow-hidden whitespace-nowrap"
@@ -386,7 +413,7 @@ export function ThinkingTimelineRow({ row }: { row: Extract<TimelineRow, { kind:
   );
 }
 
-function LiveActivityRow({
+export function LiveActivityRow({
   label,
   iconName,
   toolIcon,
diff --git a/apps/web/src/components/chat/WorkLog.tsx b/apps/web/src/components/chat/WorkLog.tsx
index 006e08f04f66b..2ed2c23d7a8b4 100644
--- a/apps/web/src/components/chat/WorkLog.tsx
+++ b/apps/web/src/components/chat/WorkLog.tsx
@@ -1,3 +1,7 @@
+import {
+  CHAT_BACKGROUND_GLASS_SURFACE_CLASSES,
+  useHasTimelineBackground,
+} from "./ChatTimelineBackground";
 import {
   createContext,
   use,
@@ -51,6 +55,7 @@ type RowContent = {
 };
 
 function WorkLogLine({ icon, label, trailing, wrapLabel }: RowContent) {
+  const glass = useHasTimelineBackground();
   return (
     <div
       className={cn(
@@ -69,6 +74,7 @@ function WorkLogLine({ icon, label, trailing, wrapLabel }: RowContent) {
         <div
           className={cn(
             "min-w-0 flex-1 text-secondary-label",
+            glass && "text-foreground/80",
             !wrapLabel && "truncate [&_*]:whitespace-nowrap",
           )}
         >
@@ -137,6 +143,7 @@ export function WorkLogDetails({
 
   followLive?: boolean;
 }) {
+  const glass = useHasTimelineBackground();
   const scrollerRef = useRef<HTMLDivElement>(null);
   const atLiveEdgeRef = useRef(true);
   // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- pins the scroller's scrollTop to the bottom after each commit while following live output
@@ -155,6 +162,7 @@ export function WorkLogDetails({
       }}
       className={cn(
         "cursor-auto",
+        kind === "panel" && glass && CHAT_BACKGROUND_GLASS_SURFACE_CLASSES,
         kind === "text"
           ? "ms-7 flex max-h-96 flex-col gap-3 overflow-auto px-0.5 py-1 select-text"
           : kind === "panel"
diff --git a/apps/web/src/components/chat/draftHeroTransition.ts b/apps/web/src/components/chat/draftHeroTransition.ts
index 7a53a22b2042b..6189b2e004932 100644
--- a/apps/web/src/components/chat/draftHeroTransition.ts
+++ b/apps/web/src/components/chat/draftHeroTransition.ts
@@ -1,6 +1,5 @@
 export const DRAFT_HERO_TRANSITION_ANIMATION_ID = "t3-draft-hero-transition";
 export const DRAFT_HERO_TRANSITION_EASING = "cubic-bezier(0.4, 0, 0.2, 1)";
-export const MOBILE_COMPOSER_VIEW_TRANSITION_NAME = "t3-mobile-composer";
 export const MOBILE_DRAFT_HEADLINE_VIEW_TRANSITION_NAME = "t3-mobile-draft-headline";
 const MOBILE_COMPOSER_TRANSITION_DURATION_PROPERTY = "--mobile-composer-transition-duration";
 
diff --git a/apps/web/src/components/chat/useTimelineFollow.ts b/apps/web/src/components/chat/useTimelineFollow.ts
index 987713bb77102..be7b6fef50c71 100644
--- a/apps/web/src/components/chat/useTimelineFollow.ts
+++ b/apps/web/src/components/chat/useTimelineFollow.ts
@@ -155,6 +155,8 @@ interface TimelineFollowInput {
   readonly timelineEntries: ReadonlyArray<TimelineEntry>;
   readonly timelineAnchorMessageId: MessageId | null;
   readonly setTimelineAnchor: Dispatch<SetStateAction<TimelineAnchor>>;
+  /** Where a newly sent turn settles below the viewport top. */
+  readonly anchorViewOffset?: number;
 }
 
 /**
@@ -177,6 +179,7 @@ export function useTimelineFollow(input: TimelineFollowInput) {
     timelineEntries,
     timelineAnchorMessageId,
     setTimelineAnchor,
+    anchorViewOffset = CHAT_LIST_ANCHOR_OFFSET,
   } = input;
   const [visitState, setVisit] = useState<TimelineFollowVisit>({
     threadKey: activeThreadKey,
@@ -411,7 +414,7 @@ export function useTimelineFollow(input: TimelineFollowInput) {
             index: anchorIndex,
             animated: !window.matchMedia("(prefers-reduced-motion: reduce)").matches,
             viewPosition: 0,
-            viewOffset: CHAT_LIST_ANCHOR_OFFSET,
+            viewOffset: anchorViewOffset,
           })
           .then(() => {
             if (legendListRef.current === list && isPositioning()) {
diff --git a/apps/web/src/components/settings/AppearanceSettingsPanel.tsx b/apps/web/src/components/settings/AppearanceSettingsPanel.tsx
index 00783b085d609..60986aaebdfdf 100644
--- a/apps/web/src/components/settings/AppearanceSettingsPanel.tsx
+++ b/apps/web/src/components/settings/AppearanceSettingsPanel.tsx
@@ -36,6 +36,7 @@ import { AdvancedSettings } from "./AdvancedSettings";
 import { PanelAnimationsPreview } from "./PanelAnimationsPreview";
 import { TypographySection } from "./TypographySettings";
 import { ThreadDetailsItemsRow } from "./ThreadDetailsItemsRow";
+import { TimelineBackgroundSettings } from "./TimelineBackgroundSettings";
 
 const ENVIRONMENT_IDENTIFICATION_LABELS: Record<EnvironmentIdentificationMode, string> = {
   artwork: "Artwork",
@@ -481,6 +482,7 @@ export function AppearanceSettingsPanel() {
       </SettingsSection>
 
       <TypographySection />
+      <TimelineBackgroundSettings />
     </SettingsPageContainer>
   );
 }
diff --git a/apps/web/src/components/settings/SettingsPanels.tsx b/apps/web/src/components/settings/SettingsPanels.tsx
index a37bf1581990e..f933089e4b119 100644
--- a/apps/web/src/components/settings/SettingsPanels.tsx
+++ b/apps/web/src/components/settings/SettingsPanels.tsx
@@ -456,6 +456,13 @@ export function useSettingsRestore(onRestored?: () => void) {
       ? ["Contrast"]
       : []),
     ...(settings.glassOpacity !== DEFAULT_UNIFIED_SETTINGS.glassOpacity ? ["Glass opacity"] : []),
+    ...(settings.timelineBackgroundImage !== DEFAULT_UNIFIED_SETTINGS.timelineBackgroundImage ||
+    settings.timelineBackgroundOpacity !== DEFAULT_UNIFIED_SETTINGS.timelineBackgroundOpacity ||
+    settings.timelineBackgroundBlur !== DEFAULT_UNIFIED_SETTINGS.timelineBackgroundBlur ||
+    settings.timelineTextShadowOpacity !== DEFAULT_UNIFIED_SETTINGS.timelineTextShadowOpacity ||
+    settings.timelineTextShadowBlur !== DEFAULT_UNIFIED_SETTINGS.timelineTextShadowBlur
+      ? ["Wallpaper"]
+      : []),
     ...(settings.diffColorScheme !== DEFAULT_UNIFIED_SETTINGS.diffColorScheme
       ? ["Diff colors"]
       : []),
@@ -636,6 +643,11 @@ export function useSettingsRestore(onRestored?: () => void) {
     }
     updateSettings({
       appearanceContrast: DEFAULT_UNIFIED_SETTINGS.appearanceContrast,
+      timelineBackgroundImage: DEFAULT_UNIFIED_SETTINGS.timelineBackgroundImage,
+      timelineBackgroundOpacity: DEFAULT_UNIFIED_SETTINGS.timelineBackgroundOpacity,
+      timelineBackgroundBlur: DEFAULT_UNIFIED_SETTINGS.timelineBackgroundBlur,
+      timelineTextShadowOpacity: DEFAULT_UNIFIED_SETTINGS.timelineTextShadowOpacity,
+      timelineTextShadowBlur: DEFAULT_UNIFIED_SETTINGS.timelineTextShadowBlur,
       diffColorScheme: DEFAULT_UNIFIED_SETTINGS.diffColorScheme,
       chatWidth: DEFAULT_UNIFIED_SETTINGS.chatWidth,
       effortDisplay: DEFAULT_UNIFIED_SETTINGS.effortDisplay,
diff --git a/apps/web/src/components/settings/ThemeCssEditor.tsx b/apps/web/src/components/settings/ThemeCssEditor.tsx
new file mode 100644
index 0000000000000..8291d50850acc
--- /dev/null
+++ b/apps/web/src/components/settings/ThemeCssEditor.tsx
@@ -0,0 +1,124 @@
+import { useId, useState, type KeyboardEvent } from "react";
+
+import { Button } from "../ui/button";
+
+export function ThemeCssEditor({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  const hintId = useId();
+  const [position, setPosition] = useState({ line: 1, column: 1 });
+  const [tabIndents, setTabIndents] = useState(true);
+
+  function updatePosition(editor: HTMLTextAreaElement) {
+    const preceding = editor.value.slice(0, editor.selectionStart).split("\n");
+    setPosition({ line: preceding.length, column: (preceding.at(-1)?.length ?? 0) + 1 });
+  }
+
+  function replaceSelection(editor: HTMLTextAreaElement, replacement: string) {
+    // Native insertion preserves undo history for indentation as well as typing.
+    if (!document.execCommand("insertText", false, replacement)) {
+      editor.setRangeText(replacement, editor.selectionStart, editor.selectionEnd, "end");
+    }
+    onChange(editor.value);
+    updatePosition(editor);
+  }
+
+  function handleKeyDown(event: KeyboardEvent<HTMLTextAreaElement>) {
+    if (event.nativeEvent.isComposing || event.ctrlKey || event.metaKey || event.altKey) return;
+    const editor = event.currentTarget;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      setTabIndents(false);
+      return;
+    }
+    if (event.key === "Tab" && tabIndents) {
+      event.preventDefault();
+      const start = editor.selectionStart;
+      const end = editor.selectionEnd;
+      const lineStart = start === 0 ? 0 : editor.value.lastIndexOf("\n", start - 1) + 1;
+      if (start === end && !event.shiftKey) {
+        replaceSelection(editor, "  ");
+      } else if (start === end) {
+        const indent = editor.value.slice(lineStart).match(/^(?: {1,2}|\t)/)?.[0] ?? "";
+        if (!indent) return;
+        editor.setSelectionRange(lineStart, lineStart + indent.length);
+        replaceSelection(editor, "");
+        editor.setSelectionRange(
+          Math.max(lineStart, start - indent.length),
+          Math.max(lineStart, end - indent.length),
+        );
+      } else {
+        // A selection ending at a line's start leaves that next line untouched.
+        const blockEnd = end > start && editor.value[end - 1] === "\n" ? end - 1 : end;
+        const selected = editor.value.slice(lineStart, blockEnd);
+        const replacement = selected
+          .split("\n")
+          .map((line) => (event.shiftKey ? line.replace(/^(?: {1,2}|\t)/, "") : `  ${line}`))
+          .join("\n");
+        editor.setSelectionRange(lineStart, blockEnd);
+        replaceSelection(editor, replacement);
+        editor.setSelectionRange(lineStart, lineStart + replacement.length);
+      }
+      updatePosition(editor);
+    } else if (event.key === "Enter" && editor.selectionStart === editor.selectionEnd) {
+      const precedingLine = editor.value.slice(0, editor.selectionStart).split("\n").at(-1) ?? "";
+      const indent = precedingLine.match(/^[\t ]*/)?.[0] ?? "";
+      event.preventDefault();
+      replaceSelection(editor, `\n${indent}${precedingLine.trimEnd().endsWith("{") ? "  " : ""}`);
+    }
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="overflow-hidden rounded-lg border border-input bg-code text-code-foreground focus-within:border-ring focus-within:ring-3 focus-within:ring-inset focus-within:ring-ring/24">
+        <textarea
+          aria-label="Custom CSS"
+          aria-describedby={hintId}
+          autoCapitalize="off"
+          autoComplete="off"
+          autoCorrect="off"
+          spellCheck={false}
+          wrap="off"
+          className="block h-52 min-h-32 w-full resize-y bg-transparent p-3 font-mono text-xs leading-5 outline-none"
+          value={value}
+          onFocus={() => setTabIndents(true)}
+          onChange={(event) => {
+            onChange(event.currentTarget.value);
+            updatePosition(event.currentTarget);
+          }}
+          onSelect={(event) => updatePosition(event.currentTarget)}
+          onKeyDown={handleKeyDown}
+        />
+        <div className="flex items-center justify-between border-t border-input px-3 py-1 font-mono text-xs">
+          <span>CSS</span>
+          <span>
+            Ln {position.line}, Col {position.column}
+          </span>
+        </div>
+      </div>
+      <div className="flex items-start justify-between gap-2">
+        <p id={hintId} className="text-xs text-muted-foreground">
+          {tabIndents
+            ? "Tab indents. Shift+Tab unindents. Press Escape, then Tab to leave."
+            : "Tab moves to the next control."}
+        </p>
+        <Button
+          size="xs"
+          variant="ghost"
+          disabled={!value}
+          onClick={() => {
+            onChange("");
+            setPosition({ line: 1, column: 1 });
+          }}
+        >
+          Clear CSS
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/settings/ThemeEditorPanel.tsx b/apps/web/src/components/settings/ThemeEditorPanel.tsx
index 7b10dab109966..0193b1b0388d1 100644
--- a/apps/web/src/components/settings/ThemeEditorPanel.tsx
+++ b/apps/web/src/components/settings/ThemeEditorPanel.tsx
@@ -31,6 +31,7 @@ import { Switch } from "../ui/switch";
 import { Toggle, ToggleGroup } from "../ui/toggle-group";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import { getThemeRoleLabel, ThemeColorField } from "./ThemeColorPicker";
+import { ThemeCssEditor } from "./ThemeCssEditor";
 import {
   clearThemeInspectorHover,
   clearThemeInspectorHighlights,
@@ -334,6 +335,7 @@ export function ThemeEditorPanel({
 }) {
   const isEditing = editingTheme !== null;
   const [name, setName] = useState("");
+  const [css, setCss] = useState("");
   const [activeAppearance, setActiveAppearance] = useState<ThemeAppearance>(initialAppearance);
   const [isAdvanced, setIsAdvanced] = useState(false);
   const [colorsByAppearance, setColorsByAppearance] = useState<ThemeEditorColorsByAppearance>(() =>
@@ -389,6 +391,7 @@ export function ThemeEditorPanel({
       }
 
       setName(editingTheme?.label ?? seedName ?? "");
+      setCss(sourceTheme?.css ?? "");
       setActiveAppearance(nextAppearance);
       // Open unmanaged themes in advanced mode to preserve imported or hand-tuned colors.
       setIsAdvanced(sourceTheme !== null && sourceTheme.managed !== true);
@@ -439,11 +442,13 @@ export function ThemeEditorPanel({
     }
   }
 
+  const previewCss = css || mergeTarget?.css || "";
+
   // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- applies the edited colors to the document as a live theme preview while the editor is open
   useEffect(() => {
     if (!open) return;
-    applyThemeColorPreview(colorsByAppearance[activeAppearance], activeAppearance);
-  }, [activeAppearance, colorsByAppearance, open]);
+    applyThemeColorPreview(colorsByAppearance[activeAppearance], activeAppearance, previewCss);
+  }, [activeAppearance, colorsByAppearance, open, previewCss]);
 
   // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- restores the document theme when the editor closes or unmounts
   useEffect(() => {
@@ -751,6 +756,10 @@ export function ThemeEditorPanel({
       setError("Name your theme first.");
       return;
     }
+    if (mergeTarget?.css && css && mergeTarget.css !== css) {
+      setError("These themes have different custom CSS. Use the same CSS or pick another name.");
+      return;
+    }
 
     try {
       const colorsForSave = !isAdvanced
@@ -779,6 +788,7 @@ export function ThemeEditorPanel({
           ...parseThemeFile({
             version: THEME_FILE_VERSION,
             id: mergeTarget.id,
+            css: previewCss,
             name: mergeTarget.label,
             appearance: mergeTarget.appearance,
             colors: mergeTarget.colors,
@@ -799,6 +809,7 @@ export function ThemeEditorPanel({
           ...parseThemeFile({
             version: THEME_FILE_VERSION,
             id: editingTheme.id,
+            css,
             name,
             appearance: baseAppearance,
             colors: colorsForSave[baseAppearance],
@@ -821,6 +832,7 @@ export function ThemeEditorPanel({
           ...parseThemeFile({
             version: THEME_FILE_VERSION,
             id: mergeTarget.id,
+            css: previewCss,
             name: mergeTarget.label,
             appearance: mergeTarget.appearance,
             colors: mergeTarget.colors,
@@ -838,6 +850,7 @@ export function ThemeEditorPanel({
             version: THEME_FILE_VERSION,
             name,
             appearance: activeAppearance,
+            css,
             colors: colorsForSave[activeAppearance],
             ...(isAdvanced ? {} : { managed: true }),
           }),
@@ -1202,6 +1215,14 @@ export function ThemeEditorPanel({
               {renderColorsHeader()}
               {renderColorFields()}
             </div>
+            <details className="space-y-2">
+              <summary className="cursor-pointer text-sm font-medium">Custom CSS</summary>
+              <p className="text-xs text-muted-foreground">
+                Saved with this theme and included when you export it. Applies to web and desktop.
+                Use .dark for dark mode overrides.
+              </p>
+              <ThemeCssEditor value={css} onChange={setCss} />
+            </details>
           </div>
           <div className="flex items-center justify-end gap-2 border-t border-border/70 px-3 py-2">
             <Button size="sm" variant="ghost" onClick={() => onOpenChange(false)}>
diff --git a/apps/web/src/components/settings/ThemeImportDialog.tsx b/apps/web/src/components/settings/ThemeImportDialog.tsx
index 5c8911623dfed..d176e98769c84 100644
--- a/apps/web/src/components/settings/ThemeImportDialog.tsx
+++ b/apps/web/src/components/settings/ThemeImportDialog.tsx
@@ -336,6 +336,7 @@ function ThemeImportBody({
         name: preferredName.slice(0, 48),
         appearance: theme.appearance,
         colors: theme.colors,
+        ...(theme.css !== undefined ? { css: theme.css } : {}),
         ...(theme.variants ? { variants: theme.variants } : {}),
         ...(theme.managed ? { managed: true } : {}),
       });
@@ -347,6 +348,7 @@ function ThemeImportBody({
         name: `${theme.label.slice(0, 48 - ` (${copy})`.length)} (${copy})`,
         appearance: theme.appearance,
         colors: theme.colors,
+        ...(theme.css !== undefined ? { css: theme.css } : {}),
         ...(theme.variants ? { variants: theme.variants } : {}),
         ...(theme.managed ? { managed: true } : {}),
       });
diff --git a/apps/web/src/components/settings/TimelineBackgroundSettings.tsx b/apps/web/src/components/settings/TimelineBackgroundSettings.tsx
new file mode 100644
index 0000000000000..713c1cdcc8bcf
--- /dev/null
+++ b/apps/web/src/components/settings/TimelineBackgroundSettings.tsx
@@ -0,0 +1,437 @@
+import { type CSSProperties, useEffect, useRef, useState } from "react";
+import { ArrowRightIcon, ImagePlusIcon, LinkIcon, XIcon } from "lucide-react";
+import { DEFAULT_CLIENT_SETTINGS } from "@t3tools/contracts/settings";
+import {
+  persistClientSettingsUpdate,
+  useClientSettings,
+  useUpdatePrimarySettings,
+} from "../../hooks/useSettings";
+import { compressImageForWallpaper } from "../../lib/imageCompression";
+import {
+  TimelineBackgroundImage,
+  CHAT_BACKGROUND_TEXT_SHADOW_CLASSES,
+  timelineTextShadowStyle,
+  useTimelineBackgroundFailed,
+} from "../chat/ChatTimelineBackground";
+import ChatMarkdown from "../ChatMarkdown";
+import { AssistantMessageSurface } from "../chat/TimelineAssistantRows";
+import { UserMessageBubble } from "../chat/TimelineUserMessageRow";
+import { LiveActivityRow, WorkingIndicator } from "../chat/TimelineWorkGroupRows";
+import { Button } from "../ui/button";
+import { cn } from "../../lib/utils";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "../ui/input-group";
+import { SettingResetButton, SettingsRow, SettingsSection } from "./settingsLayout";
+import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
+
+const MAX_BLUR = 30;
+
+async function resolveWallpaperImage(source: string | File): Promise<string> {
+  let nextImage: string;
+  if (typeof source === "string") {
+    const parsed = new URL(source.trim());
+    if (!["https:", "http:"].includes(parsed.protocol)) {
+      throw new Error("Use an http or https image URL, or choose a local file.");
+    }
+    nextImage = parsed.href;
+  } else {
+    const result = await compressImageForWallpaper(source);
+    if (!result.ok) {
+      throw new Error(
+        result.reason === "too-large"
+          ? "Choose an image no larger than 50 MB and 64 megapixels."
+          : "Could not read this image. Choose a PNG, JPEG, GIF, or WebP file.",
+      );
+    }
+    nextImage = result.image.dataUrl;
+  }
+  await new Promise<void>((resolve, reject) => {
+    const probe = new Image();
+    const timeout = window.setTimeout(() => finish(false), 15000);
+    function finish(loaded: boolean) {
+      window.clearTimeout(timeout);
+      probe.removeEventListener("load", onLoad);
+      probe.removeEventListener("error", onError);
+      if (loaded) resolve();
+      else reject(new Error("Could not load this image. Check the URL or choose another file."));
+    }
+    const onLoad = () => finish(true);
+    const onError = () => finish(false);
+    probe.addEventListener("load", onLoad);
+    probe.addEventListener("error", onError);
+    probe.src = nextImage;
+  });
+  return nextImage;
+}
+
+function wallpaperErrorMessage(cause: unknown): string {
+  if (cause instanceof TypeError) return "Enter a full image URL, or choose a local file.";
+  return cause instanceof Error ? cause.message : "Could not load this image.";
+}
+
+export function TimelineBackgroundSettings() {
+  const image = useClientSettings((settings) => settings.timelineBackgroundImage);
+  const opacity = useClientSettings((settings) => settings.timelineBackgroundOpacity);
+  const blur = useClientSettings((settings) => settings.timelineBackgroundBlur);
+  const shadowOpacity = useClientSettings((settings) => settings.timelineTextShadowOpacity);
+  const shadowBlur = useClientSettings((settings) => settings.timelineTextShadowBlur);
+  const updateSettings = useUpdatePrimarySettings();
+  const [draft, setDraft] = useState({ image, url: image.startsWith("http") ? image : "" });
+  const url = draft.image === image ? draft.url : image.startsWith("http") ? image : "";
+  const setUrl = (value: string) => setDraft({ image, url: value });
+  const [error, setError] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [previewStartedAt] = useState(() => new Date().toISOString());
+  const [opacityDraft, setOpacityDraft] = useState<number | null>(null);
+  const [blurDraft, setBlurDraft] = useState<number | null>(null);
+  const [shadowOpacityDraft, setShadowOpacityDraft] = useState<number | null>(null);
+  const [shadowBlurDraft, setShadowBlurDraft] = useState<number | null>(null);
+  const previewOpacity = opacityDraft ?? opacity;
+  const previewBlur = blurDraft ?? blur;
+  const previewShadowOpacity = shadowOpacityDraft ?? shadowOpacity;
+  const previewShadowBlur = shadowBlurDraft ?? shadowBlur;
+  const imageFailed = useTimelineBackgroundFailed(image);
+  const hasPreviewBackground = Boolean(image) && previewOpacity > 0 && !imageFailed;
+  const fileInput = useRef<HTMLInputElement>(null);
+  const request = useRef(0);
+
+  function saveOpacity(value: number) {
+    setOpacityDraft(null);
+    if (value !== opacity) updateSettings({ timelineBackgroundOpacity: value });
+  }
+
+  function saveBlur(value: number) {
+    setBlurDraft(null);
+    if (value !== blur) updateSettings({ timelineBackgroundBlur: value });
+  }
+
+  function saveShadowOpacity(value: number) {
+    setShadowOpacityDraft(null);
+    if (value !== shadowOpacity) updateSettings({ timelineTextShadowOpacity: value });
+  }
+
+  function saveShadowBlur(value: number) {
+    setShadowBlurDraft(null);
+    if (value !== shadowBlur) updateSettings({ timelineTextShadowBlur: value });
+  }
+
+  // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- invalidates an in-flight image import on unmount so it cannot write settings afterwards
+  useEffect(
+    () => () => {
+      request.current++;
+    },
+    [],
+  );
+
+  async function applyImage(source: string | File) {
+    const generation = ++request.current;
+    setBusy(true);
+    setError("");
+    const resolved = await resolveWallpaperImage(source).then(
+      (nextImage) => ({ nextImage, error: null }),
+      (cause: unknown) => ({ nextImage: null, error: wallpaperErrorMessage(cause) }),
+    );
+    if (generation !== request.current) return;
+    const { nextImage } = resolved;
+    if (nextImage === null) {
+      setError(resolved.error);
+      setBusy(false);
+      return;
+    }
+    const saved = await persistClientSettingsUpdate((current) =>
+      generation === request.current ? { ...current, timelineBackgroundImage: nextImage } : current,
+    ).then(
+      () => true,
+      () => false,
+    );
+    if (generation !== request.current) return;
+    if (!saved) {
+      setError("Could not save this image. Client storage may be full. Try a smaller image.");
+    }
+    setBusy(false);
+  }
+
+  function removeImage() {
+    request.current++;
+    setBusy(false);
+    setError("");
+    setUrl("");
+    updateSettings({
+      timelineBackgroundImage: "",
+      timelineBackgroundOpacity: DEFAULT_CLIENT_SETTINGS.timelineBackgroundOpacity,
+      timelineBackgroundBlur: DEFAULT_CLIENT_SETTINGS.timelineBackgroundBlur,
+    });
+  }
+
+  return (
+    <SettingsSection
+      id="timeline-background"
+      title="Wallpaper"
+      onPaste={(event) => {
+        const file = Array.from(event.clipboardData.files).find((item) =>
+          item.type.startsWith("image/"),
+        );
+        if (!file) return;
+        event.preventDefault();
+        if (busy) return;
+        void applyImage(file);
+      }}
+    >
+      <div
+        className="relative isolate overflow-hidden rounded-t-xl bg-background px-5 py-5"
+        aria-label="Wallpaper preview"
+        style={timelineTextShadowStyle(previewShadowOpacity, previewShadowBlur)}
+      >
+        <TimelineBackgroundImage image={image} opacity={previewOpacity} blur={previewBlur} />
+        <div className="mx-auto max-w-lg space-y-4 text-sm leading-relaxed">
+          <div className="flex justify-end">
+            <UserMessageBubble>Can you give this page a softer look?</UserMessageBubble>
+          </div>
+          <WorkingIndicator createdAt={previewStartedAt} />
+          <AssistantMessageSurface>
+            <ChatMarkdown
+              glassSurfaces={hasPreviewBackground}
+              className={cn(hasPreviewBackground && CHAT_BACKGROUND_TEXT_SHADOW_CLASSES)}
+              cwd={undefined}
+              text="I'll adjust the spacing and colors, then check how it looks."
+            />
+          </AssistantMessageSurface>
+          <LiveActivityRow label="Reading styles.css" iconName="eye" active />
+        </div>
+      </div>
+      <SettingsRow
+        title="Image"
+        description="Enter an image URL, paste an image into the field, or choose a file."
+        resetAction={
+          image || busy ? (
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <Button
+                    size="icon-micro"
+                    variant="ghost-muted"
+                    aria-label={image ? "Remove image" : "Cancel import"}
+                    onClick={removeImage}
+                  >
+                    <XIcon className="size-3" />
+                  </Button>
+                }
+              />
+              <TooltipPopup side="top">{image ? "Remove image" : "Cancel import"}</TooltipPopup>
+            </Tooltip>
+          ) : null
+        }
+        status={
+          busy ? (
+            <span role="status">Loading image…</span>
+          ) : error || imageFailed ? (
+            <span role="alert" className="text-destructive">
+              {error || "This image is unavailable. Choose another image or remove it."}
+            </span>
+          ) : null
+        }
+        control={
+          <form
+            className="flex w-full items-center gap-2 sm:w-96"
+            onSubmit={(event) => {
+              event.preventDefault();
+              void applyImage(url);
+            }}
+          >
+            <InputGroup className="min-w-0 flex-1">
+              <InputGroupAddon>
+                <LinkIcon className="size-3.5 text-muted-foreground" />
+              </InputGroupAddon>
+              <InputGroupInput
+                aria-label="Background image URL"
+                placeholder="Paste an image or URL"
+                value={url}
+                onChange={(event) => setUrl(event.target.value)}
+                size="sm"
+              />
+              <InputGroupAddon align="inline-end">
+                <Button
+                  type="submit"
+                  variant="ghost"
+                  size="icon-xs"
+                  aria-label="Apply image URL"
+                  title="Apply image URL"
+                  disabled={busy || !url.trim()}
+                >
+                  <ArrowRightIcon />
+                </Button>
+              </InputGroupAddon>
+            </InputGroup>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={busy}
+              onClick={() => fileInput.current?.click()}
+            >
+              <ImagePlusIcon />
+              Choose image
+            </Button>
+            <input
+              ref={fileInput}
+              type="file"
+              accept="image/png,image/jpeg,image/gif,image/webp"
+              className="hidden"
+              aria-label="Choose background image"
+              onChange={(event) => {
+                const file = event.currentTarget.files?.[0];
+                event.currentTarget.value = "";
+                if (file) void applyImage(file);
+              }}
+            />
+          </form>
+        }
+      />
+      <WallpaperSlider
+        title="Opacity"
+        description="How strongly the image shows through the chat."
+        setting="timelineBackgroundOpacity"
+        resetLabel="wallpaper opacity"
+        id="timeline-background-opacity"
+        label="Background opacity"
+        value={previewOpacity}
+        savedValue={opacity}
+        max={100}
+        unit="%"
+        disabled={!image}
+        onDraft={setOpacityDraft}
+        onCommit={saveOpacity}
+      />
+      <WallpaperSlider
+        title="Blur"
+        description="Softens the image behind messages."
+        setting="timelineBackgroundBlur"
+        resetLabel="wallpaper blur"
+        id="timeline-background-blur"
+        label="Background blur"
+        value={previewBlur}
+        savedValue={blur}
+        max={MAX_BLUR}
+        unit="px"
+        disabled={!image}
+        onDraft={setBlurDraft}
+        onCommit={saveBlur}
+      />
+      <WallpaperSlider
+        title="Text shadow"
+        description="Strength behind message text and the new-thread heading. Set to 0% to turn it off."
+        setting="timelineTextShadowOpacity"
+        resetLabel="text shadow strength"
+        id="timeline-text-shadow-opacity"
+        label="Text shadow strength"
+        value={previewShadowOpacity}
+        savedValue={shadowOpacity}
+        max={100}
+        unit="%"
+        disabled={!image}
+        onDraft={setShadowOpacityDraft}
+        onCommit={saveShadowOpacity}
+      />
+      <WallpaperSlider
+        title="Shadow blur"
+        description="Softens the text shadow."
+        setting="timelineTextShadowBlur"
+        resetLabel="text shadow blur"
+        id="timeline-text-shadow-blur"
+        label="Text shadow blur"
+        value={previewShadowBlur}
+        savedValue={shadowBlur}
+        max={8}
+        unit="px"
+        disabled={!image}
+        onDraft={setShadowBlurDraft}
+        onCommit={saveShadowBlur}
+      />
+    </SettingsSection>
+  );
+}
+
+function WallpaperSlider({
+  title,
+  description,
+  setting,
+  resetLabel,
+  savedValue,
+  id,
+  label,
+  value,
+  max,
+  unit,
+  disabled,
+  onDraft,
+  onCommit,
+}: {
+  title: string;
+  description: string;
+  setting:
+    | "timelineBackgroundOpacity"
+    | "timelineBackgroundBlur"
+    | "timelineTextShadowOpacity"
+    | "timelineTextShadowBlur";
+  resetLabel: string;
+  savedValue: number;
+  id: string;
+  label: string;
+  value: number;
+  max: number;
+  unit: string;
+  disabled: boolean;
+  onDraft: (value: number | null) => void;
+  onCommit: (value: number) => void;
+}) {
+  const progress = value / max;
+  const updateSettings = useUpdatePrimarySettings();
+  const defaultValue = DEFAULT_CLIENT_SETTINGS[setting];
+  return (
+    <SettingsRow
+      title={title}
+      description={description}
+      aria-disabled={disabled || undefined}
+      resetAction={
+        savedValue !== defaultValue ? (
+          <SettingResetButton
+            label={resetLabel}
+            onClick={() => updateSettings({ [setting]: defaultValue })}
+          />
+        ) : null
+      }
+      control={
+        <div className="flex w-full items-center gap-3 sm:w-52">
+          <output
+            htmlFor={id}
+            className="min-w-12 rounded-md bg-muted px-2 py-1 text-center font-mono text-xs font-medium tabular-nums text-foreground"
+          >
+            {value}
+            {unit}
+          </output>
+          <input
+            id={id}
+            aria-label={label}
+            type="range"
+            min={0}
+            max={max}
+            step={1}
+            value={value}
+            disabled={disabled}
+            className="settings-slider min-w-0 flex-1"
+            style={
+              {
+                "--settings-slider-progress": `${progress * 100}%`,
+                "--settings-slider-fill-offset": `${0.5 - progress}rem`,
+              } as CSSProperties
+            }
+            onChange={(event) => onDraft(Number(event.target.value))}
+            onPointerUp={(event) => onCommit(Number(event.currentTarget.value))}
+            onPointerCancel={() => onDraft(null)}
+            onKeyUp={(event) => onCommit(Number(event.currentTarget.value))}
+            onBlur={(event) => onCommit(Number(event.currentTarget.value))}
+          />
+        </div>
+      }
+    />
+  );
+}
diff --git a/apps/web/src/components/settings/settingsSearch.ts b/apps/web/src/components/settings/settingsSearch.ts
index f7492035874da..2083da7e11e12 100644
--- a/apps/web/src/components/settings/settingsSearch.ts
+++ b/apps/web/src/components/settings/settingsSearch.ts
@@ -314,9 +314,17 @@ export const SETTINGS_SEARCH_ITEMS = [
     id: "theme",
     title: "Themes",
     to: "/settings/appearance",
-    searchTerms: ["appearance colors palette custom import"],
+    searchTerms: ["appearance colors palette custom css stylesheet import"],
     targetId: "appearance",
   },
+  {
+    id: "timeline-background",
+    title: "Wallpaper",
+    to: "/settings/appearance",
+    searchTerms: [
+      "chat background timeline image url file clipboard paste opacity blur text shadow",
+    ],
+  },
   {
     // Prefixed because the slider control already owns the `appearance-contrast` id.
     id: "setting-appearance-contrast",
diff --git a/apps/web/src/hooks/useHtmlRenderTheme.ts b/apps/web/src/hooks/useHtmlRenderTheme.ts
index 99ac26c5724cd..e8aaf191b9e9d 100644
--- a/apps/web/src/hooks/useHtmlRenderTheme.ts
+++ b/apps/web/src/hooks/useHtmlRenderTheme.ts
@@ -5,9 +5,11 @@ import { appearanceFontStack } from "../appearanceFonts";
 import {
   getStandardThemeColors,
   getThemeColorsForMode,
+  getThemeColorVariable,
   getThemeDefinition,
   resolveThemeHalf,
   subscribeToCustomThemes,
+  subscribeToThemePreview,
   themeColorToHex,
   type ThemeAppearance,
   type ThemeHalves,
@@ -27,6 +29,41 @@ function resolveActiveThemeColors(
     : (getThemeColorsForMode(definition, appearance) ?? definition.colors);
 }
 
+const HTML_RENDER_VARIABLES = Object.keys(
+  htmlRenderTheme(getStandardThemeColors("light"), "light").variables,
+).filter((variable) => variable !== "--font-sans" && variable !== "--font-mono");
+
+const HTML_RENDER_APP_ALIASES: Readonly<Record<string, string>> = {
+  "--accent-surface": "--accent",
+  "--accent-surface-foreground": "--accent-foreground",
+  "--destructive-surface": "--error-surface",
+};
+
+/** A primitive snapshot keeps external-store reads stable while tracking the painted CSS. */
+function readPaintedTheme(): string {
+  if (typeof document === "undefined") return "";
+  const root = document.documentElement;
+  const styles = getComputedStyle(root);
+  const variables: Record<string, string> = {};
+  for (const variable of HTML_RENDER_VARIABLES) {
+    // HTML's accent is the brand color; the app's --accent is a hover surface.
+    const appVariable =
+      variable === "--accent" || variable === "--chart-1"
+        ? getThemeColorVariable("accent")
+        : variable === "--accent-foreground"
+          ? getThemeColorVariable("accentForeground")
+          : variable;
+    const value =
+      styles.getPropertyValue(appVariable).trim() ||
+      styles.getPropertyValue(HTML_RENDER_APP_ALIASES[variable] ?? appVariable).trim();
+    if (value) variables[variable] = themeColorToHex(value) ?? value;
+  }
+  return JSON.stringify({
+    appearance: root.classList.contains("dark") ? "dark" : "light",
+    variables,
+  });
+}
+
 export function useHtmlRenderTheme() {
   const { theme, resolvedTheme, themeHalves } = useTheme();
   // Custom and published palettes can be edited in place, under an unchanged preference.
@@ -37,14 +74,27 @@ export function useHtmlRenderTheme() {
   );
   const sans = useClientSettings((settings) => settings.fontFamilySans);
   const mono = useClientSettings((settings) => settings.fontFamilyCode);
-  return htmlRenderTheme(
+  const paintedTheme = useSyncExternalStore(subscribeToThemePreview, readPaintedTheme, () => "");
+  const painted = paintedTheme
+    ? (JSON.parse(paintedTheme) as {
+        appearance: ThemeAppearance;
+        variables: Record<string, string>;
+      })
+    : null;
+  const base = htmlRenderTheme(
     Object.fromEntries(
       Object.entries(colors).map(([role, color]) => [role, themeColorToHex(color) ?? color]),
     ) as typeof colors,
-    resolvedTheme,
+    painted?.appearance ?? resolvedTheme,
     {
       sans: appearanceFontStack(sans, HTML_RENDER_DEFAULT_FONTS.sans),
       mono: appearanceFontStack(mono, HTML_RENDER_DEFAULT_FONTS.mono),
     },
   );
+  if (!painted) return base;
+  return {
+    ...base,
+    appearance: painted.appearance,
+    variables: { ...base.variables, ...painted.variables },
+  };
 }
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index b24265d02197e..8f0b101ce8ab6 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -18,6 +18,11 @@
 
 /* On mobile, morph the expanded hero composer into the compact docked
    composer while it moves; the rest of the app remains visually stationary. */
+/* A persistent transition name prevents the composer glass from sampling its backdrop. */
+html[data-mobile-composer-route-transition="true"] [data-mobile-composer-transition] {
+  view-transition-name: t3-mobile-composer;
+}
+
 html[data-mobile-composer-route-transition="true"]::view-transition-old(root),
 html[data-mobile-composer-route-transition="true"]::view-transition-new(root) {
   animation: none;
@@ -271,6 +276,7 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
   --color-card-foreground: var(--contrast-card-foreground);
   --color-card: var(--card);
   --color-code: var(--code-background);
+  --color-code-foreground: var(--code-foreground);
   --color-foreground: var(--contrast-foreground);
   --color-background: var(--background);
   --color-message: var(--message-surface);
@@ -362,15 +368,55 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
 }
 
 @utility surface-glass {
-  background: color-mix(in srgb, var(--background) var(--glass-opacity), transparent);
+  background: color-mix(
+    in srgb,
+    var(--surface-glass-color, var(--background)) var(--glass-opacity),
+    transparent
+  );
   -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
   backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
 
   @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
-    background: var(--background) !important;
+    background: var(--surface-glass-color, var(--background)) !important;
+  }
+}
+
+@utility chat-topbar-tint {
+  background-image: linear-gradient(
+    to bottom,
+    color-mix(in srgb, var(--background) 82%, transparent),
+    color-mix(in srgb, var(--background) 34%, transparent) 52%,
+    transparent
+  );
+  @variant dark {
+    background-image: linear-gradient(
+      to bottom,
+      color-mix(in srgb, var(--background) 50%, transparent),
+      color-mix(in srgb, var(--background) 12%, transparent) 52%,
+      transparent
+    );
+  }
+}
+
+@utility chat-wallpaper-plan-surface {
+  --surface-glass-color: var(--card);
+  text-shadow: none;
+}
+
+@utility chat-wallpaper-user-surface {
+  --surface-glass-color: var(--message-surface);
+  text-shadow: none;
+  @variant dark {
+    :where(html:not([data-theme-id])) & {
+      --surface-glass-color: var(--card);
+    }
   }
 }
 
+@utility chat-markdown-media-no-shadow {
+  text-shadow: none;
+}
+
 @utility alert-glass {
   --alert-glass-tint: transparent;
   background:
@@ -1520,11 +1566,17 @@ html[data-theme-id] [data-chat-header] [data-slot="separator"] {
    default look keeps its secondary/input tints; themed palettes tint those
    surfaces with the accent, which fights syntax highlighting. */
 html[data-theme-id] :is(.chat-markdown, .composer-tiptap) .chat-markdown-codeblock {
-  background-color: var(--code-background);
+  --surface-glass-color: var(--code-background);
   border-color: var(--contrast-border);
   color: var(--code-foreground);
 }
 
+html[data-theme-id]
+  :is(.chat-markdown, .composer-tiptap)
+  .chat-markdown-codeblock:not(.surface-glass) {
+  background-color: var(--code-background);
+}
+
 html[data-theme-id] .chat-markdown pre {
   background-color: var(--code-background);
   color: var(--code-foreground);
@@ -2039,7 +2091,7 @@ code {
 
 /* File links and context chips own their color and focus ring. */
 .chat-markdown a:not(.chat-markdown-file-link, :has([data-slot="context-chip-label"])) {
-  color: var(--info-foreground);
+  color: var(--chat-link-color, var(--info-foreground));
 }
 
 .chat-markdown
diff --git a/apps/web/src/lib/imageCompression.test.ts b/apps/web/src/lib/imageCompression.test.ts
index 079c52df5d573..63faf8b8491d3 100644
--- a/apps/web/src/lib/imageCompression.test.ts
+++ b/apps/web/src/lib/imageCompression.test.ts
@@ -2,6 +2,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test"
 
 import {
   compressImageForStash,
+  compressImageForWallpaper,
   compressImageToByteLimit,
   createComposerImageThumbnail,
   inheritComposerImageThumbnail,
@@ -141,6 +142,84 @@ afterEach(() => {
   globalThis.OffscreenCanvas = originalOffscreenCanvas;
 });
 
+describe("compressImageForWallpaper", () => {
+  it.each(["image/png", "image/jpeg", "image/gif", "image/webp"])(
+    "rejects excessive %s dimensions before reading the payload or decoding",
+    async (type) => {
+      const bytes = new Uint8Array(30);
+      const view = new DataView(bytes.buffer);
+      if (type === "image/png") {
+        bytes.set([0x89, 0x50, 0x4e, 0x47, 13, 10, 26, 10]);
+        bytes.set(new TextEncoder().encode("IHDR"), 12);
+        view.setUint32(16, 8001);
+        view.setUint32(20, 8000);
+      } else if (type === "image/jpeg") {
+        bytes.set([0xff, 0xd8, 0xff, 0xc0, 0, 17, 8]);
+        view.setUint16(7, 8000);
+        view.setUint16(9, 8001);
+      } else if (type === "image/gif") {
+        bytes.set(new TextEncoder().encode("GIF89a"));
+        view.setUint16(6, 8001, true);
+        view.setUint16(8, 8000, true);
+      } else {
+        bytes.set(new TextEncoder().encode("RIFF"));
+        bytes.set(new TextEncoder().encode("WEBPVP8X"), 8);
+        view.setUint32(24, 8000, true);
+        bytes[27] = 7999 & 0xff;
+        bytes[28] = 7999 >> 8;
+      }
+      const file = new File([bytes], "large-image", { type });
+      const read = vi.spyOn(file, "arrayBuffer");
+      const bitmap = vi.fn();
+      vi.stubGlobal("createImageBitmap", bitmap);
+
+      expect(await compressImageForWallpaper(file)).toEqual({ ok: false, reason: "too-large" });
+      expect(read).not.toHaveBeenCalled();
+      expect(bitmap).not.toHaveBeenCalled();
+    },
+  );
+
+  it("accepts the pixel boundary without decoding a small payload", async () => {
+    const bytes = new Uint8Array(24);
+    bytes.set([0x89, 0x50, 0x4e, 0x47, 13, 10, 26, 10]);
+    bytes.set(new TextEncoder().encode("IHDR"), 12);
+    const view = new DataView(bytes.buffer);
+    view.setUint32(16, 8000);
+    view.setUint32(20, 8000);
+    const bitmap = vi.fn();
+    vi.stubGlobal("createImageBitmap", bitmap);
+
+    const result = await compressImageForWallpaper(
+      new File([bytes], "photo.png", { type: "image/png" }),
+    );
+
+    expect(result.ok).toBe(true);
+    expect(result.ok && result.image.recompressed).toBe(false);
+    expect(bitmap).not.toHaveBeenCalled();
+  });
+
+  it("refuses unknown dimensions after a bounded header read", async () => {
+    const file = makeFile(500_000);
+    const slice = vi.spyOn(file, "slice");
+    const read = vi.spyOn(file, "arrayBuffer");
+    const bitmap = vi.fn();
+    vi.stubGlobal("createImageBitmap", bitmap);
+
+    expect(await compressImageForWallpaper(file)).toEqual({ ok: false, reason: "unreadable" });
+    expect(slice).toHaveBeenCalledWith(0, 256 * 1024);
+    expect(read).not.toHaveBeenCalled();
+    expect(bitmap).not.toHaveBeenCalled();
+  });
+
+  it("rejects excessive source bytes before reading", async () => {
+    const file = makeFile(24);
+    Object.defineProperty(file, "size", { value: MAX_COMPRESSIBLE_SOURCE_BYTES + 1 });
+    const slice = vi.spyOn(file, "slice");
+
+    expect(await compressImageForWallpaper(file)).toEqual({ ok: false, reason: "too-large" });
+    expect(slice).not.toHaveBeenCalled();
+  });
+});
 describe("compressImageForStash", () => {
   it("keeps the exact data URL budget boundary and original bytes", async () => {
     const original = makeFile(3);
@@ -170,7 +249,9 @@ describe("compressImageForStash", () => {
   it("re-encodes an oversized image to WebP within the budget", async () => {
     const { close, fillRect } = stubCanvasPipeline(() => 120_000);
 
-    const result = await compressImageForStash(makeFile(4_000_000));
+    const file = makeFile(4_000_000);
+    const read = vi.spyOn(file, "arrayBuffer");
+    const result = await compressImageForStash(file);
 
     expect(result.ok).toBe(true);
     expect(result.ok && result.image.recompressed).toBe(true);
@@ -179,6 +260,7 @@ describe("compressImageForStash", () => {
     expect(result.ok && result.image.sizeBytes).toBeLessThan(4_000_000);
     expect(fillRect).not.toHaveBeenCalled();
     expect(close).toHaveBeenCalled();
+    expect(read).not.toHaveBeenCalled();
   });
 
   it("falls back to JPEG with a white matte when WebP encoding is unavailable", async () => {
diff --git a/apps/web/src/lib/imageCompression.ts b/apps/web/src/lib/imageCompression.ts
index ed41b9ec45320..c3de69e3ff94c 100644
--- a/apps/web/src/lib/imageCompression.ts
+++ b/apps/web/src/lib/imageCompression.ts
@@ -14,6 +14,7 @@ export const MAX_STASH_IMAGE_DATA_URL_CHARS = 1_300_000;
 export const MAX_COMPRESSIBLE_SOURCE_BYTES = 50 * 1024 * 1024;
 const MAX_HEIC_DECODE_PIXELS = 64_000_000;
 const MAX_HEIC_METADATA_BYTES = 1024 * 1024;
+const MAX_WALLPAPER_IMAGE_PIXELS = 64_000_000;
 const QUALITY_STEPS = [0.92, 0.85, 0.78, 0.68] as const;
 const FALLBACK_SCALE_STEPS = [0.75, 0.55] as const;
 const HEIC_IMAGE_MIME_TYPE = /^image\/hei(?:c|f)$/i;
@@ -389,6 +390,25 @@ export async function compressImageForStash(
   }
 }
 
+/** Check local wallpaper dimensions before even a small compressed file reaches a decoder. */
+export async function compressImageForWallpaper(file: File): Promise<CompressStashImageResult> {
+  if (file.size > MAX_COMPRESSIBLE_SOURCE_BYTES) {
+    return { ok: false, reason: "too-large" };
+  }
+  try {
+    const header = new Uint8Array(await file.slice(0, IMAGE_DIMENSIONS_HEADER_BYTES).arrayBuffer());
+    const dimensions = readImageDimensions(header);
+    // Unknown dimensions cannot safely fall back to decoding the source.
+    if (!dimensions) return { ok: false, reason: "unreadable" };
+    if (dimensions.width > MAX_WALLPAPER_IMAGE_PIXELS / dimensions.height) {
+      return { ok: false, reason: "too-large" };
+    }
+    return await compressImageForStash(file);
+  } catch {
+    return { ok: false, reason: "unreadable" };
+  }
+}
+
 async function fitImageToMaxEdge(file: File): Promise<{ file: File; imageSize: ImageSize } | null> {
   const mimeType = downscalableImageMimeType(file.type);
   if (!mimeType || !canRecompress() || file.size > MAX_COMPRESSIBLE_SOURCE_BYTES) return null;
diff --git a/apps/web/src/themeBoot.test.ts b/apps/web/src/themeBoot.test.ts
index 8341978986bbe..f80aed4745ca5 100644
--- a/apps/web/src/themeBoot.test.ts
+++ b/apps/web/src/themeBoot.test.ts
@@ -34,6 +34,7 @@ type BootResult = {
   backgroundColor: string;
   bootVariables: Record<string, string>;
   metaContent: string | null;
+  customCss: string[];
 };
 
 function runBootScript(options: {
@@ -43,6 +44,7 @@ function runBootScript(options: {
 }): BootResult {
   const classes = new Set<string>();
   const bootVariables: Record<string, string> = {};
+  const customCss: string[] = [];
   const meta = {
     content: null as string | null,
     setAttribute(_name: string, value: string) {
@@ -69,6 +71,8 @@ function runBootScript(options: {
     },
   };
   const fakeDocument = {
+    createElement: () => ({ dataset: {}, textContent: "" }),
+    head: { append: (style: { textContent: string }) => customCss.push(style.textContent) },
     documentElement,
     querySelectorAll: (selector: string) => (selector === 'meta[name="theme-color"]' ? [meta] : []),
   };
@@ -96,6 +100,7 @@ function runBootScript(options: {
     backgroundColor: documentElement.style.backgroundColor,
     bootVariables,
     metaContent: meta.content,
+    customCss,
   };
 }
 
@@ -254,6 +259,32 @@ describe("index.html boot script", () => {
     expect(boot.isDark).toBe(runtimeResolvedAppearance(storage, prefersDark) === "dark");
   });
 
+  it("restores selected custom CSS as text before the runtime mounts", () => {
+    const css = 'body::before { content: "</style><script>alert(1)</script>"; }';
+    const storage = {
+      [THEME_STORAGE_KEY]: "aurora",
+      [CUSTOM_THEMES_STORAGE_KEY]: JSON.stringify([{ ...AURORA_DUAL, css }]),
+    };
+    expect(runBootScript({ storage, prefersDark: true }).customCss).toEqual([css]);
+    expect(
+      runBootScript({
+        storage: { ...storage, [THEME_STORAGE_KEY]: "dark" },
+        prefersDark: true,
+      }).customCss,
+    ).toEqual([]);
+  });
+
+  it("rejects stored themes with non-string CSS before the runtime mounts", () => {
+    const boot = runBootScript({
+      storage: {
+        [THEME_STORAGE_KEY]: "aurora",
+        [CUSTOM_THEMES_STORAGE_KEY]: JSON.stringify([{ ...AURORA_DUAL, css: {} }]),
+      },
+      prefersDark: true,
+    });
+    expect(boot.customCss).toEqual([]);
+    expect(boot.themeId).toBeUndefined();
+  });
   it("accepts exponent-form OKLCH before the runtime mounts", () => {
     const colors = {
       canvas: "oklch(9.5e-1 1e-2 2.8e2)",
diff --git a/apps/web/src/themePalette.test.ts b/apps/web/src/themePalette.test.ts
index 5069cf4f8187b..85770066fbd79 100644
--- a/apps/web/src/themePalette.test.ts
+++ b/apps/web/src/themePalette.test.ts
@@ -261,6 +261,29 @@ describe("theme files", () => {
     expect(themeColorToHex(theme.colors.accent)).toBe("#b5005e");
   });
 
+  it("round-trips theme CSS and rejects non-string CSS", () => {
+    const css = ":root { --radius: 12px; }\n.dark [data-sidebar] { opacity: 0.9; }";
+    const theme = parseThemeFile({
+      version: THEME_FILE_VERSION,
+      name: "Custom CSS",
+      appearance: "dark",
+      colors: { canvas: "#111111" },
+      css,
+    });
+    expect(parseThemeFile(JSON.parse(serializeThemeFile(theme))).css).toBe(css);
+
+    for (const invalid of [null, 42, {}, ["body {}"]]) {
+      expect(() =>
+        parseThemeFile({
+          version: THEME_FILE_VERSION,
+          name: "Custom CSS",
+          appearance: "dark",
+          colors: {},
+          css: invalid,
+        }),
+      ).toThrow("Theme CSS must be a string.");
+    }
+  });
   it("keeps optional light and dark palettes under one theme id", () => {
     const theme = parseThemeFile({
       version: THEME_FILE_VERSION,
@@ -300,6 +323,7 @@ describe("theme files", () => {
                   label: "GitHub Dark",
                   appearance: "dark",
                   colors: { canvas: "#0d1117" },
+                  css: "body { font-size: 15px; }",
                   collection: { id: "open-vsx:github.github-vscode-theme", label: "GitHub Theme" },
                 },
                 {
@@ -316,7 +340,10 @@ describe("theme files", () => {
 
     invalidateCustomThemes();
     expect(getCustomThemes()).toMatchObject([
-      { collection: { id: "open-vsx:github.github-vscode-theme", label: "GitHub Theme" } },
+      {
+        collection: { id: "open-vsx:github.github-vscode-theme", label: "GitHub Theme" },
+        css: "body { font-size: 15px; }",
+      },
       { id: "github-light" },
     ]);
     expect(getCustomThemes()[1]).not.toHaveProperty("collection");
@@ -639,7 +666,9 @@ describe("context chip colors", () => {
     const properties = new Map<string, string>();
     vi.stubGlobal("window", { localStorage: { getItem: () => null } });
     vi.stubGlobal("document", {
+      querySelector: () => null,
       documentElement: {
+        classList: { toggle: vi.fn() },
         dataset: {},
         style: {
           setProperty: (name: string, value: string) => properties.set(name, value),
diff --git a/apps/web/src/themePalette.ts b/apps/web/src/themePalette.ts
index c86d135039157..4e7557525c049 100644
--- a/apps/web/src/themePalette.ts
+++ b/apps/web/src/themePalette.ts
@@ -63,6 +63,7 @@ export type ThemeFile = Readonly<{
   appearance: ThemeAppearance;
   colors: ThemeColorOverrides;
   variants?: ThemeVariantOverrides;
+  css?: string;
   collection?: ThemeCollection;
   managed?: boolean;
 }>;
@@ -95,8 +96,10 @@ export function subscribeToThemePreview(listener: () => void): () => void {
 }
 
 function setThemePreviewAppearance(appearance: ThemeAppearance | null): void {
-  if (themePreviewAppearance === appearance) return;
   themePreviewAppearance = appearance;
+}
+
+function notifyThemePreviewListeners(): void {
   for (const listener of themePreviewListeners) listener();
 }
 
@@ -170,6 +173,7 @@ function parseStoredTheme(value: unknown): ThemeDefinition | null {
   if (!isRecord(value)) return null;
   if (!isThemeId(value.id) || RESERVED_THEME_IDS.has(value.id)) return null;
   if (!isThemeLabel(value.label) || !isThemeAppearance(value.appearance)) return null;
+  if (value.css !== undefined && typeof value.css !== "string") return null;
   const colors = parseStoredThemeColors(value.colors, value.appearance);
   if (!colors) return null;
   const variants = parseStoredThemeVariants(value.variants, value.appearance);
@@ -181,6 +185,7 @@ function parseStoredTheme(value: unknown): ThemeDefinition | null {
     label: value.label.trim(),
     appearance: value.appearance,
     colors,
+    ...(value.css !== undefined ? { css: value.css } : {}),
     ...(variants ? { variants } : {}),
     ...(collection ? { collection } : {}),
     ...(value.managed === true ? { managed: true } : {}),
@@ -276,6 +281,7 @@ function environmentThemeDefinition(theme: EnvironmentTheme): ThemeDefinition {
     label: theme.name,
     appearance: theme.appearance,
     colors: publishedThemeColors(theme, theme.appearance, theme.colors),
+    ...(theme.css !== undefined ? { css: theme.css } : {}),
     ...(Object.keys(variants).length > 0 ? { variants } : {}),
     // Only the pure seeded form is guided-generator output. An exported file,
     // or seeds carrying explicit role overrides, must open Duplicate in the
@@ -1481,6 +1487,9 @@ export function parseThemeFile(value: unknown): ThemeDefinition {
     throw new Error('Theme files need an appearance of "light" or "dark".');
   }
   if (!isRecord(rawColors)) throw new Error("Theme files need a colors object.");
+  if (value.css !== undefined && typeof value.css !== "string") {
+    throw new Error("Theme CSS must be a string.");
+  }
 
   const id = value.id === undefined ? themeIdFromName(name) : value.id;
   if (!isThemeId(id)) {
@@ -1520,6 +1529,7 @@ export function parseThemeFile(value: unknown): ThemeDefinition {
     label: name.trim(),
     appearance,
     colors: { ...fallback, ...overrides },
+    ...(value.css !== undefined ? { css: value.css } : {}),
     ...(Object.keys(variants).length > 0 ? { variants } : {}),
     ...(collection ? { collection } : {}),
     ...(value.managed === true ? { managed: true } : {}),
@@ -1534,6 +1544,7 @@ export function serializeThemeFile(theme: ThemeDefinition): string {
     name: canonicalTheme.label,
     appearance: canonicalTheme.appearance,
     colors: canonicalTheme.colors,
+    ...(canonicalTheme.css !== undefined ? { css: canonicalTheme.css } : {}),
     ...(canonicalTheme.variants ? { variants: canonicalTheme.variants } : {}),
     ...(canonicalTheme.collection ? { collection: canonicalTheme.collection } : {}),
     ...(canonicalTheme.managed ? { managed: true } : {}),
@@ -1611,12 +1622,32 @@ export function getThemeColorVariable(role: ThemeColorRole): string {
 
 export const THEME_PREVIEW_ID = "__preview";
 
+function applyThemeCss(css: string | undefined): void {
+  let customThemeStyle = document.querySelector<HTMLStyleElement>("style[data-theme-css]");
+  if (!css) {
+    customThemeStyle?.remove();
+    return;
+  }
+  if (!customThemeStyle) {
+    customThemeStyle = document.createElement("style");
+    customThemeStyle.dataset.themeCss = "";
+  }
+  if (customThemeStyle.textContent !== css) customThemeStyle.textContent = css;
+  // Boot styles precede the bundled stylesheets; keep custom rules last once mounted.
+  if (document.head.lastChild !== customThemeStyle) document.head.append(customThemeStyle);
+}
+
 /** Callers must restore the stored theme with refreshTheme when the draft closes. */
-export function applyThemeColorPreview(colors: ThemeColors, appearance: ThemeAppearance): void {
+export function applyThemeColorPreview(
+  colors: ThemeColors,
+  appearance: ThemeAppearance,
+  css?: string,
+): void {
   if (typeof document === "undefined") return;
   const root = document.documentElement;
   if (!root?.style) return;
 
+  applyThemeCss(css);
   root.dataset.themeId = THEME_PREVIEW_ID;
   root.classList.toggle("dark", appearance === "dark");
   for (const [role, value] of Object.entries(colors) as Array<[ThemeColorRole, string]>) {
@@ -1624,6 +1655,7 @@ export function applyThemeColorPreview(colors: ThemeColors, appearance: ThemeApp
   }
   applyContextChipVariables(root, colors);
   setThemePreviewAppearance(appearance);
+  notifyThemePreviewListeners();
 }
 
 export function applyThemePalette(theme: ThemePreference, appearance?: ThemeAppearance): void {
@@ -1631,9 +1663,11 @@ export function applyThemePalette(theme: ThemePreference, appearance?: ThemeAppe
 
   const root = document.documentElement;
   if (!root?.style) return;
+  if (appearance) root.classList.toggle("dark", appearance === "dark");
 
   setThemePreviewAppearance(null);
   const palette = getThemeDefinition(theme);
+  applyThemeCss(palette?.css);
 
   if (palette) {
     root.dataset.themeId = palette.id;
@@ -1643,6 +1677,7 @@ export function applyThemePalette(theme: ThemePreference, appearance?: ThemeAppe
       root.style.setProperty(APP_THEME_VARIABLES[role], value);
     }
     applyContextChipVariables(root, colors);
+    notifyThemePreviewListeners();
     return;
   }
 
@@ -1651,6 +1686,7 @@ export function applyThemePalette(theme: ThemePreference, appearance?: ThemeAppe
     root.style.removeProperty(variable);
   }
   applyContextChipVariables(root, getStandardPaintedThemeColors(appearance ?? "light"));
+  notifyThemePreviewListeners();
 }
 
 export function resolveThemeAppearance(
diff --git a/apps/web/src/vscodeThemeImport.test.ts b/apps/web/src/vscodeThemeImport.test.ts
index f0172c2354d03..c4fb926602d5d 100644
--- a/apps/web/src/vscodeThemeImport.test.ts
+++ b/apps/web/src/vscodeThemeImport.test.ts
@@ -466,6 +466,14 @@ describe("VS Code theme import", () => {
     expect(asHex(getThemeColorsForMode(github, "dark")!.canvas)).toBe("#101014");
     expect(asHex(github.colors.canvas)).toBe("#fdfdfd");
     expect(getThemeColorsForMode(themes[2]!, "light")).toBeNull();
+
+    const css = "body { font-size: 15px; }";
+    const light = { ...make("github-light", "light"), css };
+    const dark = make("github-dark", "dark");
+    expect(pairVsCodeThemes([light, dark])[0]?.css).toBe(css);
+    expect(pairVsCodeThemes([light, { ...dark, css }])[0]?.css).toBe(css);
+    const conflictingDark = { ...dark, css: "body { font-size: 16px; }" };
+    expect(pairVsCodeThemes([light, conflictingDark])).toEqual([light, conflictingDark]);
   });
 
   it("does not guess when a family is ambiguous", () => {
@@ -493,14 +501,19 @@ describe("VS Code theme import", () => {
       });
     const themes = resolveThemeLabelCollisions([
       { theme: dracula("#282a36"), sourceName: "dracula.json" },
-      { theme: dracula("#22232e"), sourceName: "dracula-soft.json" },
+      {
+        theme: { ...dracula("#22232e"), css: "body { font-size: 15px; }" },
+        sourceName: "dracula-soft.json",
+      },
     ]);
     expect(themes.map((theme) => theme.label)).toEqual(["Dracula", "Dracula Soft"]);
     expect(themes.map((theme) => theme.id)).toEqual(["dracula", "dracula-soft"]);
+    expect(themes[1]?.css).toBe("body { font-size: 15px; }");
     const numbered = resolveThemeLabelCollisions([
       { theme: dracula("#282a36") },
-      { theme: dracula("#22232e") },
+      { theme: { ...dracula("#22232e"), css: "body { font-size: 15px; }" } },
     ]);
     expect(numbered.map((theme) => theme.label)).toEqual(["Dracula", "Dracula 2"]);
+    expect(numbered[1]?.css).toBe("body { font-size: 15px; }");
   });
 });
diff --git a/apps/web/src/vscodeThemeImport.ts b/apps/web/src/vscodeThemeImport.ts
index 416351b16edfb..76491f0e3ac2c 100644
--- a/apps/web/src/vscodeThemeImport.ts
+++ b/apps/web/src/vscodeThemeImport.ts
@@ -412,17 +412,27 @@ export function pairVsCodeThemes(
 
   const paired: Array<{ theme: ThemeDefinition; order: number }> = [];
   for (const [key, group] of groups) {
-    if (group.light.length === 1 && group.dark.length === 1) {
+    const light = group.light[0];
+    const dark = group.dark[0];
+    if (
+      group.light.length === 1 &&
+      group.dark.length === 1 &&
+      light &&
+      dark &&
+      (!light.css || !dark.css || light.css === dark.css)
+    ) {
       try {
+        const css = light.css || dark.css;
         paired.push({
           order: group.order,
           theme: parseThemeFile({
             version: THEME_FILE_VERSION,
-            ...(options?.pairedId ? { id: options.pairedId(group.light[0]!, group.dark[0]!) } : {}),
+            ...(options?.pairedId ? { id: options.pairedId(light, dark) } : {}),
             name: key,
             appearance: "light",
-            colors: group.light[0]!.colors,
-            variants: { dark: group.dark[0]!.colors },
+            colors: light.colors,
+            variants: { dark: dark.colors },
+            ...(css !== undefined ? { css } : {}),
           }),
         });
         continue;
@@ -446,6 +456,7 @@ export function resolveThemeLabelCollisions(
         name: name.slice(0, 48),
         appearance: theme.appearance,
         colors: theme.colors,
+        ...(theme.css !== undefined ? { css: theme.css } : {}),
         ...(theme.variants ? { variants: theme.variants } : {}),
         ...(theme.managed ? { managed: true } : {}),
       });
diff --git a/docs/user/appearance.md b/docs/user/appearance.md
index b27173dd60ff9..417888e7842ee 100644
--- a/docs/user/appearance.md
+++ b/docs/user/appearance.md
@@ -54,6 +54,11 @@ On web and desktop, choose **Create theme** to adjust a palette, or import a T3
 theme. The theme editor's color picker lets you select an area of the app to find the color to
 change. Export your theme as JSON to share it.
 
+Open **Custom CSS** in the theme editor to style the whole web or desktop app. Changes preview
+as you type; cancel restores your saved theme. CSS is saved with the theme and included in
+JSON exports as `css`. Use `.dark` selectors for dark mode overrides. Native mobile does not
+apply custom CSS. Wallpaper remains a separate setting under **Settings → Appearance**.
+
 ## Environment themes
 
 Environment themes and defaults come from the server serving your web app or the desktop app's
diff --git a/packages/contracts/src/server.ts b/packages/contracts/src/server.ts
index 40a1aa8b2ca86..f3ba5a55a1e2e 100644
--- a/packages/contracts/src/server.ts
+++ b/packages/contracts/src/server.ts
@@ -560,6 +560,8 @@ const environmentThemeFields = {
   canvas: Schema.optional(EnvironmentThemeColor),
   accent: Schema.optional(EnvironmentThemeColor),
   colors: Schema.optional(EnvironmentThemeColors),
+  /** Custom styles for web and desktop clients. */
+  css: Schema.optional(Schema.String),
   variants: Schema.optional(
     Schema.Struct({
       light: Schema.optional(EnvironmentThemeColors),
diff --git a/packages/contracts/src/settings.ts b/packages/contracts/src/settings.ts
index cd112d84bf9f4..afb6db93a0917 100644
--- a/packages/contracts/src/settings.ts
+++ b/packages/contracts/src/settings.ts
@@ -152,6 +152,19 @@ export const AppearanceContrast = Schema.Int.check(
 );
 export type AppearanceContrast = typeof AppearanceContrast.Type;
 const DEFAULT_APPEARANCE_CONTRAST: AppearanceContrast = 100;
+export const TimelineBackgroundImage = Schema.String.check(Schema.isMaxLength(1_500_000));
+export const TimelineBackgroundOpacity = Schema.Int.check(
+  Schema.isBetween({ minimum: 0, maximum: 100 }),
+);
+export const TimelineBackgroundBlur = Schema.Int.check(
+  Schema.isBetween({ minimum: 0, maximum: 30 }),
+);
+export const TimelineTextShadowOpacity = Schema.Int.check(
+  Schema.isBetween({ minimum: 0, maximum: 100 }),
+);
+export const TimelineTextShadowBlur = Schema.Int.check(
+  Schema.isBetween({ minimum: 0, maximum: 8 }),
+);
 export const MIN_PANEL_ANIMATION_DURATION_MS = 0;
 export const MAX_PANEL_ANIMATION_DURATION_MS = 400;
 export const PanelAnimationDurationMs = Schema.Int.check(
@@ -401,6 +414,21 @@ export const ClientSettingsSchema = Schema.Struct({
   appearanceContrast: AppearanceContrast.pipe(
     Schema.withDecodingDefault(Effect.succeed(DEFAULT_APPEARANCE_CONTRAST)),
   ),
+  timelineBackgroundImage: TimelineBackgroundImage.pipe(
+    Schema.withDecodingDefault(Effect.succeed("")),
+  ),
+  timelineBackgroundOpacity: TimelineBackgroundOpacity.pipe(
+    Schema.withDecodingDefault(Effect.succeed(20)),
+  ),
+  timelineBackgroundBlur: TimelineBackgroundBlur.pipe(
+    Schema.withDecodingDefault(Effect.succeed(0)),
+  ),
+  timelineTextShadowOpacity: TimelineTextShadowOpacity.pipe(
+    Schema.withDecodingDefault(Effect.succeed(65)),
+  ),
+  timelineTextShadowBlur: TimelineTextShadowBlur.pipe(
+    Schema.withDecodingDefault(Effect.succeed(2)),
+  ),
   // Zero avoids per-frame layout work from width/height transitions.
   panelAnimationDurationMs: PanelAnimationDurationMs.pipe(
     Schema.withDecodingDefault(Effect.succeed(DEFAULT_PANEL_ANIMATION_DURATION_MS)),
@@ -1982,6 +2010,11 @@ export const ClientSettingsPatch = Schema.Struct({
   loadBalancingEnabled: Schema.optionalKey(Schema.Boolean),
   loadBalancingWeights: Schema.optionalKey(LoadBalancingWeights),
   appearanceContrast: Schema.optionalKey(AppearanceContrast),
+  timelineBackgroundImage: Schema.optionalKey(TimelineBackgroundImage),
+  timelineBackgroundOpacity: Schema.optionalKey(TimelineBackgroundOpacity),
+  timelineBackgroundBlur: Schema.optionalKey(TimelineBackgroundBlur),
+  timelineTextShadowOpacity: Schema.optionalKey(TimelineTextShadowOpacity),
+  timelineTextShadowBlur: Schema.optionalKey(TimelineTextShadowBlur),
   panelAnimationDurationMs: Schema.optionalKey(PanelAnimationDurationMs),
   browserDefaultViewport: Schema.optionalKey(PreviewViewportSetting),
   browserDefaultZoomFactor: Schema.optionalKey(PreviewZoomFactor),
diff --git a/packages/shared/src/themePalettes.ts b/packages/shared/src/themePalettes.ts
index 19e321c5886c3..7c4f20731c4d7 100644
--- a/packages/shared/src/themePalettes.ts
+++ b/packages/shared/src/themePalettes.ts
@@ -100,6 +100,8 @@ export type ThemeDefinition = Readonly<{
   appearance: ThemeAppearance;
   colors: ThemeColors;
   variants?: ThemeVariants;
+  /** Custom browser styles shared by the theme's light and dark appearances. */
+  css?: string;
   collection?: Readonly<{ id: string; label: string }>;
   sidebarArtwork?: boolean;
   managed?: boolean;