diff --git a/packages/@react-spectrum/ai/src/PromptField.tsx b/packages/@react-spectrum/ai/src/PromptField.tsx
index 83958e2f52a..4a244ec1142 100644
--- a/packages/@react-spectrum/ai/src/PromptField.tsx
+++ b/packages/@react-spectrum/ai/src/PromptField.tsx
@@ -520,7 +520,7 @@ export function PromptTokenField(props: PromptTokenFieldProps) {
         },
         transition: 'default',
         transitionDuration: 350,
-        paddingStart: 4,
+        paddingStart: space(5),
         width: 'full',
         '--loader-color': {
           type: 'color',
diff --git a/packages/@react-spectrum/ai/src/PromptFieldContainer.tsx b/packages/@react-spectrum/ai/src/PromptFieldContainer.tsx
index 0b12e55106a..615ea091caf 100644
--- a/packages/@react-spectrum/ai/src/PromptFieldContainer.tsx
+++ b/packages/@react-spectrum/ai/src/PromptFieldContainer.tsx
@@ -350,16 +350,7 @@ export function PromptFieldContainer(props: PropFieldContainerProps) {
       data-variant={variant}
       data-state={isGenerating ? 'generating' : 'idle'}
       data-focused={isFocused || undefined}
-      className={
-        outerBorder +
-        // outline for WHCM
-        style({
-          outlineStyle: 'solid',
-          outlineColor: 'transparent',
-          outlineWidth: 1,
-          containerType: 'inline-size'
-        })
-      }
+      className={outerBorder + style({containerType: 'inline-size'})}
       style={{
         ...props.style,
         // @ts-ignore
@@ -400,7 +391,20 @@ export function PromptFieldContainer(props: PropFieldContainerProps) {
               style({
                 borderRadius: '[24px]',
                 position: 'relative',
-                overflow: 'clip'
+                overflow: 'clip',
+                outlineStyle: 'solid',
+                outlineColor: {
+                  default: 'transparent', // for WHCM
+                  ':has([contenteditable][data-focus-visible])': {
+                    default: 'transparent',
+                    '@media (prefers-contrast: more)': 'gray-1000',
+                    forcedColors: 'Highlight'
+                  }
+                },
+                outlineWidth: {
+                  default: 1,
+                  ':has([contenteditable][data-focus-visible])': 2
+                }
               }),
               styles
             )
diff --git a/packages/@react-spectrum/ai/src/loader/data.ts b/packages/@react-spectrum/ai/src/loader/data.ts
index bde62acf5cd..a71c99406f9 100644
--- a/packages/@react-spectrum/ai/src/loader/data.ts
+++ b/packages/@react-spectrum/ai/src/loader/data.ts
@@ -13,9 +13,9 @@
 export interface Cell {
   cx: number;
   cy: number;
-  // Retained from the source data; no longer affects rendering.
-  outer: boolean;
   stagger: number;
+  adjustX?: number;
+  adjustY?: number;
 }
 
 type StaggerMode = 'individual' | 'grouped' | 'by-row';
@@ -30,18 +30,18 @@ interface BuildOptions {
 // ai-logo: original 12-cell diamond layout with hand-tuned timings.
 // ─────────────────────────────────────────────────────────────
 export const aiLogo: Cell[] = [
-  {cx: 240, cy: 360, outer: true, stagger: 0},
-  {cx: 160, cy: 320, outer: true, stagger: 2},
-  {cx: 320, cy: 320, outer: true, stagger: 4},
-  {cx: 200, cy: 280, outer: false, stagger: 6},
-  {cx: 280, cy: 280, outer: false, stagger: 8},
-  {cx: 120, cy: 240, outer: true, stagger: 10},
-  {cx: 360, cy: 240, outer: true, stagger: 14},
-  {cx: 200, cy: 200, outer: false, stagger: 16},
-  {cx: 280, cy: 200, outer: false, stagger: 18},
-  {cx: 160, cy: 160, outer: true, stagger: 20},
-  {cx: 320, cy: 160, outer: true, stagger: 22},
-  {cx: 240, cy: 120, outer: true, stagger: 24}
+  {cx: 240, cy: 360, adjustY: -0.5, stagger: 0},
+  {cx: 160, cy: 320, stagger: 2},
+  {cx: 320, cy: 320, stagger: 4},
+  {cx: 200, cy: 280, stagger: 6},
+  {cx: 280, cy: 280, stagger: 8},
+  {cx: 120, cy: 240, adjustX: 0.5, stagger: 10},
+  {cx: 360, cy: 240, adjustX: -0.5, stagger: 14},
+  {cx: 200, cy: 200, stagger: 16},
+  {cx: 280, cy: 200, stagger: 18},
+  {cx: 160, cy: 160, stagger: 20},
+  {cx: 320, cy: 160, stagger: 22},
+  {cx: 240, cy: 120, adjustY: 0.5, stagger: 24}
 ];
 
 // ─────────────────────────────────────────────────────────────
diff --git a/packages/@react-spectrum/ai/src/loader/react.tsx b/packages/@react-spectrum/ai/src/loader/react.tsx
index 5f7436e7dcb..86ed43cb817 100644
--- a/packages/@react-spectrum/ai/src/loader/react.tsx
+++ b/packages/@react-spectrum/ai/src/loader/react.tsx
@@ -295,6 +295,7 @@ export function PixelLoader(props: PixelLoaderProps) {
     }
     return matrix;
   }, [cells]);
+  const isHighDPI = window.devicePixelRatio >= 2;
 
   return (
     <div
@@ -332,8 +333,8 @@ export function PixelLoader(props: PixelLoaderProps) {
         let corner = (a, b, diag) => (!a && !b && !diag ? '1px' : '0px');
 
         // Adjust position for outer cells on high DPI displays.
-        let xPx = x * cellSize + offset;
-        let yPx = y * cellSize + offset;
+        let xPx = x * cellSize + offset + (isHighDPI ? (c.adjustX ?? 0) : 0);
+        let yPx = y * cellSize + offset + (isHighDPI ? (c.adjustY ?? 0) : 0);
 
         return (
           <div