diff --git a/.storybook-s2/docs/Icons.jsx b/.storybook-s2/docs/Icons.jsx
index af7554dc0cc..d16eec4f0c6 100644
--- a/.storybook-s2/docs/Icons.jsx
+++ b/.storybook-s2/docs/Icons.jsx
@@ -6,7 +6,7 @@ import {highlight} from './highlight' with {type: 'macro'};
 
 export function Icons() {
   return (
-    <div className={style({marginX: 'auto'})}>
+    <div className={'sb-unstyled ' + style({marginX: 'auto'})}>
       <div className={style({marginX: 48})}>
         <h1 className={style({font: 'heading-2xl', marginBottom: 48})}>
           Workflow icons
diff --git a/.storybook-s2/docs/Illustrations.jsx b/.storybook-s2/docs/Illustrations.jsx
index 506c1ddcc01..9acd33ca2f1 100644
--- a/.storybook-s2/docs/Illustrations.jsx
+++ b/.storybook-s2/docs/Illustrations.jsx
@@ -11,7 +11,7 @@ import { useState } from 'react';
 export function Illustrations() {
   let [gradientStyle, setStyle] = useState('generic1');
   return (
-    <div className={style({marginX: 'auto'})}>
+    <div className={'sb-unstyled ' + style({marginX: 'auto'})}>
       <div className={style({marginX: 48})}>
         <h1 className={style({font: 'heading-2xl', marginBottom: 48})}>
           Illustrations
diff --git a/.storybook-s2/docs/Intro.jsx b/.storybook-s2/docs/Intro.jsx
index 21ee083c1bd..dddcc9e2fae 100644
--- a/.storybook-s2/docs/Intro.jsx
+++ b/.storybook-s2/docs/Intro.jsx
@@ -13,7 +13,7 @@ import {H2, H3, H4, P, Pre, Code, Strong, Link} from './typography';
 
 export function Docs() {
   return (
-    <div className={style({marginX: 'auto', marginY: 48})}>
+    <div className={'sb-unstyled ' + style({marginX: 'auto', marginY: 48})}>
       <header
         style={{
           backgroundImage: `url(${new URL('wallpaper_collaborative_S2_desktop.webp', import.meta.url).toString()})`,
@@ -228,7 +228,7 @@ import {ActionButton} from '@react-spectrum/s2';
         </ul>
         <H3>UNSAFE Style Overrides</H3>
         <P>We highly discourage overriding the styles of React Spectrum components because it may break at any time when we change our implementation, making it difficult for you to update in the future. Consider using <Link href="https://react-spectrum.adobe.com/react-aria/" target="_blank">React Aria Components</Link> with our <Link href="?path=/docs/style-macro--docs" target="_top">style macro</Link> to build a custom component with Spectrum styles instead.</P>
-        <P>That said, just like in React Spectrum v3, the <Code>UNSAFE_className</Code> and <Code>UNSAFE_style</Code> props are supported on Spectrum 2 components as last-resort escape hatches. However, unlike in v3, UNSAFE_classNames must be placed in a special <Code>UNSAFE_overrides</Code> <Link href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers" target="_blank">CSS cascade layer</Link>. This guarentees that your overrides will always win over other styles on the page, no matter the order or specificity of the selector.</P>
+        <P>That said, just like in React Spectrum v3, the <Code>UNSAFE_className</Code> and <Code>UNSAFE_style</Code> props are supported on Spectrum 2 components as last-resort escape hatches.</P>
         <Pre>{highlight(`/* YourComponent.tsx */
 import {Button} from '@react-spectrum/s2';
 import './YourComponent.css';
@@ -237,12 +237,10 @@ function YourComponent() {
   return <Button UNSAFE_className="your-unsafe-class">Button</Button>;
 }`)}</Pre>
         <Pre>{highlight(`/* YourComponent.css */
-@layer UNSAFE_overrides {
-  /* Wrap all UNSAFE_className rules in this layer. */
-  .your-unsafe-class {
-    background: red;
-  }
-}`, 'CSS')}</Pre>
+.your-unsafe-class {
+  background: red;
+}
+`, 'CSS')}</Pre>
       </main>
     </div>
   )
diff --git a/.storybook-s2/docs/MDXLayout.jsx b/.storybook-s2/docs/MDXLayout.jsx
index 79c47bd8322..cf1bf504eef 100644
--- a/.storybook-s2/docs/MDXLayout.jsx
+++ b/.storybook-s2/docs/MDXLayout.jsx
@@ -19,7 +19,7 @@ const mdxComponents = {
 
 export function MDXLayout({children}) {
   return (
-    <div className={style({marginX: 'auto'})}>
+    <div className={'sb-unstyled ' + style({marginX: 'auto'})}>
       <main className={style({marginX: 48})}>
         <MDXProvider components={mdxComponents}>
           {children}
diff --git a/.storybook-s2/docs/Migrating.jsx b/.storybook-s2/docs/Migrating.jsx
index 67eeb348ce2..f4861be1bd7 100644
--- a/.storybook-s2/docs/Migrating.jsx
+++ b/.storybook-s2/docs/Migrating.jsx
@@ -3,7 +3,7 @@ import {P, Code, Pre, H3, H2, Link} from './typography';
 
 export function Migrating() {
   return (
-    <div className={style({marginX: 'auto', fontFamily: 'sans'})}>
+    <div className={'sb-unstyled ' + style({marginX: 'auto', fontFamily: 'sans'})}>
       <div className={style({marginX: 48})}>
         <h1 className={style({font: 'heading-2xl', marginBottom: 48})}>
           Migrating to Spectrum 2
diff --git a/.storybook-s2/docs/StyleMacro.jsx b/.storybook-s2/docs/StyleMacro.jsx
index 8501852a82b..9e242ad6f79 100644
--- a/.storybook-s2/docs/StyleMacro.jsx
+++ b/.storybook-s2/docs/StyleMacro.jsx
@@ -6,7 +6,7 @@ import {Colors} from './Colors';
 
 export function StyleMacro() {
   return (
-    <div className={style({marginX: 'auto'})}>
+    <div className={'sb-unstyled ' + style({marginX: 'auto'})}>
       <header
         className={style({
           paddingX: 48,
diff --git a/packages/@react-spectrum/s2/src/Skeleton.tsx b/packages/@react-spectrum/s2/src/Skeleton.tsx
index 2aa90c23a6b..cad9e7495b3 100644
--- a/packages/@react-spectrum/s2/src/Skeleton.tsx
+++ b/packages/@react-spectrum/s2/src/Skeleton.tsx
@@ -82,7 +82,7 @@ export const loadingStyle = raw(`
   * {
     visibility: hidden;
   }
-`, 'UNSAFE_overrides');
+`, 'L'); // add to a separate layer so it overrides default style macro styles
 
 export function useSkeletonText(children: ReactNode, style: CSSProperties | undefined): [ReactNode, CSSProperties | undefined] {
   let isSkeleton = useContext(SkeletonContext);
diff --git a/packages/@react-spectrum/s2/stories/ActionButton.stories.tsx b/packages/@react-spectrum/s2/stories/ActionButton.stories.tsx
index aaa0979504b..2e9657da02e 100644
--- a/packages/@react-spectrum/s2/stories/ActionButton.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ActionButton.stories.tsx
@@ -176,8 +176,7 @@ export const UnsafeClassName: Story = {
   render: (args) => {
     return (
       <div className={style({display: 'flex', gap: 8, justifyContent: 'center', overflow: 'auto'})}>
-        <ActionButton {...args} UNSAFE_className="unsafe1">Global unsafe does not apply</ActionButton>
-        <ActionButton {...args} UNSAFE_className="unsafe2">@layer UNSAFE_overrides works</ActionButton>
+        <ActionButton {...args} UNSAFE_className="unsafe2">UNSAFE_className works</ActionButton>
       </div>
     );
   },
diff --git a/packages/@react-spectrum/s2/stories/unsafe.css b/packages/@react-spectrum/s2/stories/unsafe.css
index c7673082a12..7e17db078cc 100644
--- a/packages/@react-spectrum/s2/stories/unsafe.css
+++ b/packages/@react-spectrum/s2/stories/unsafe.css
@@ -10,19 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-button {
-  /* This should not apply */
-  background: red;
-}
-
-html body .unsafe1 {
-  /* This should not apply */
-  background: red;
-}
-
-@layer UNSAFE_overrides {
-  .unsafe2 {
-    /* This one should work */
-    background: hotpink;
-  }
+.unsafe2 {
+  /* This one should work */
+  background: hotpink;
 }
diff --git a/packages/@react-spectrum/s2/style/__tests__/style-macro.test.js b/packages/@react-spectrum/s2/style/__tests__/style-macro.test.js
index e3541d10c02..d5d1336adc5 100644
--- a/packages/@react-spectrum/s2/style/__tests__/style-macro.test.js
+++ b/packages/@react-spectrum/s2/style/__tests__/style-macro.test.js
@@ -37,9 +37,7 @@ describe('style-macro', () => {
     });
 
     expect(css).toMatchInlineSnapshot(`
-      ".\\.:not(#a#b) { all: revert-layer }
-
-      @layer _.a, _.b, _.c, UNSAFE_overrides;
+      "@layer _.a, _.b, _.c;
 
       @layer _.b {
         .A-13alit4c {
@@ -72,9 +70,7 @@ describe('style-macro', () => {
     });
 
     expect(css).toMatchInlineSnapshot(`
-      ".\\.:not(#a#b) { all: revert-layer }
-
-      @layer _.a, _.b, UNSAFE_overrides;
+      "@layer _.a, _.b;
 
       @layer _.a {
         .uc {
diff --git a/packages/@react-spectrum/s2/style/style-macro.ts b/packages/@react-spectrum/s2/style/style-macro.ts
index 25d6f2e345a..a871a80afa4 100644
--- a/packages/@react-spectrum/s2/style/style-macro.ts
+++ b/packages/@react-spectrum/s2/style/style-macro.ts
@@ -222,7 +222,7 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
     // The :not(#a#b) raises the specificity of the selector by 2 ids,
     // which can never occur on a real element, and will win over other
     // selectors such as class and element selectors.
-    let css = '.\\.:not(#a#b) { all: revert-layer }\n\n';
+    let css = '';
 
     // Declare layers for each priority ahead of time so the order is always correct.
     css += '@layer ';
@@ -235,7 +235,7 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
       }
       css += layerName(generateName(i, true));
     }
-    css += ', UNSAFE_overrides;\n\n';
+    css += ';\n\n';
 
     // If allowed overrides are provided, generate code to match the input override string and include only allowed classes.
     // Also generate a variable for each overridable property that overlaps with the style definition. If those are defined,
@@ -644,6 +644,12 @@ export function raw(this: MacroContext | void, css: string, layer = '_.a') {
   ${css}
   }
 }`;
+
+  // Ensure layer is always declared after the _ layer used by style macro.
+  if (!layer.startsWith('_.')) {
+    css = `@layer _, ${layer};\n` + css;
+  }
+
   if (this && typeof this.addAsset === 'function') {
     this.addAsset({
       type: 'css',