diff --git a/src/components/Toast/Toast.module.css b/src/components/Toast/Toast.module.css
index 445b0b8b1..837966f42 100644
--- a/src/components/Toast/Toast.module.css
+++ b/src/components/Toast/Toast.module.css
@@ -1,61 +1,69 @@
 .toast {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  border-radius: 16px;
-  color: black;
-  color-scheme: light;
-  background: white;
-  max-width: 100%;
-  width: 350px;
-  box-shadow: var(--shadow-elevation-medium);
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    border-radius: 16px;
+    color: black;
+    color-scheme: light;
+    background: white;
+    max-inline-size: 100%;
+    width: 350px;
+    box-shadow: var(--shadow-elevation-medium);
 }
 
 .content {
-  flex: 1;
-  padding: 12px 0px;
-  font-weight: 600;
+    flex: 1;
+    padding: 12px 0px;
+    font-weight: 600;
 }
 
 .iconContainer {
-  flex-shrink: 0;
-  padding: 16px;
-  padding-right: 0px;
+    flex-shrink: 0;
+    padding: 16px;
+    padding-inline-end: 0px;
 }
+
 .iconContainer svg {
-  display: block;
+    display: block;
 }
 
 .closeButton {
-  flex-shrink: 0;
-  border: none;
-  background: transparent;
-  padding: 16px;
-  cursor: pointer;
+    flex-shrink: 0;
+    border: none;
+    background: transparent;
+    padding: 16px;
+    cursor: pointer;
 }
 
 .notice {
-  background: var(--color-notice-bg);
+    background: var(--color-notice-bg);
 }
+
 .notice .iconContainer {
-  color: var(--color-notice);
+    color: var(--color-notice);
 }
+
 .warning {
-  background: var(--color-warning-bg);
+    background: var(--color-warning-bg);
 }
+
 .warning .iconContainer {
-  color: var(--color-warning);
+    color: var(--color-warning);
 }
+
 .success {
-  background: var(--color-success-bg);
+    background: var(--color-success-bg);
 }
+
 .success .iconContainer {
-  color: var(--color-success);
+    color: var(--color-success);
 }
+
 .error {
-  background: var(--color-error-bg);
+    background: var(--color-error-bg);
 }
+
 .error .iconContainer {
-  color: var(--color-error);
-}
+    color: var(--color-error);
+}
\ No newline at end of file
diff --git a/src/components/ToastPlayground/ToastPlayground.module.css b/src/components/ToastPlayground/ToastPlayground.module.css
index 0b9d27683..1e6e8e966 100644
--- a/src/components/ToastPlayground/ToastPlayground.module.css
+++ b/src/components/ToastPlayground/ToastPlayground.module.css
@@ -1,108 +1,110 @@
 .wrapper {
-  padding: 64px 32px;
-  max-width: 800px;
-  margin: 0 auto;
+    padding: 64px 32px;
+    max-width: 800px;
+    margin: 0 auto;
 }
 
 .wrapper header {
-  position: relative;
-  display: flex;
-  align-items: flex-end;
-  margin-bottom: 64px;
-  min-height: 300px;
+    position: relative;
+    display: flex;
+    align-items: flex-end;
+    margin-bottom: 64px;
+    min-height: 300px;
 }
 
 .wrapper header h1 {
-  position: relative;
-  font-size: 4.25rem;
-  line-height: 1.1;
-  padding-bottom: 32px;
-  color: white;
-  /* prettier-ignore */
-  text-shadow:
-    0px 0px 10px hsl(250deg 40% 16% / 0.5),
-    0px 0px 20px hsl(250deg 40% 16% / 0.5),
-    0px 0px 40px hsl(250deg 40% 16% / 0.5);
+    position: relative;
+    font-size: 4.25rem;
+    line-height: 1.1;
+    padding-bottom: 32px;
+    color: white;
+    /* prettier-ignore */
+    text-shadow:
+        0px 0px 10px hsl(250deg 40% 16% / 0.5),
+        0px 0px 20px hsl(250deg 40% 16% / 0.5),
+        0px 0px 40px hsl(250deg 40% 16% / 0.5);
 }
 
 .wrapper header img {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  display: block;
-  width: 250px;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    display: block;
+    inline-size: 250px;
 }
 
 .controlsWrapper {
-  color-scheme: light;
-  outline: 2px dashed hsl(250deg 80% 80% / 0.6);
-  outline-offset: 4px;
-  border-radius: 4px;
-  background: white;
-  color: black;
-  padding: 16px;
-  margin-top: 32px;
+    color-scheme: light;
+    outline: 2px dashed hsl(250deg 80% 80% / 0.6);
+    outline-offset: 4px;
+    border-radius: 4px;
+    background: white;
+    color: black;
+    padding: 16px;
+    margin-top: 32px;
 }
 
 .row {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 16px;
-  /*
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 16px;
+    /*
     This is the height when a row contains a text input.
     We specify it to prevent a layout shift when `dismiss-after`
     is toggled on/off.
   */
-  min-height: 3rem;
+    min-block-size: 3rem;
 }
 
 .row:not(:last-of-type) {
-  padding-bottom: 16px;
-  border-bottom: 1px dotted hsl(250deg 80% 80% / 0.5);
-  margin-bottom: 16px;
+    padding-block-end: 16px;
+    border-block-end: 1px dotted hsl(250deg 80% 80% / 0.5);
+    margin-block-end: 16px;
 }
 
 .titleMessageWrapper {
-  padding-bottom: 16px;
-  border-bottom: 1px dotted hsl(250deg 80% 80% / 0.5);
-  margin-bottom: 16px;
+    padding-block-end: 16px;
+    border-block-end: 1px dotted hsl(250deg 80% 80% / 0.5);
+    margin-block-end: 16px;
 }
+
 .titleMessageRow {
-  display: flex;
-  align-items: flex-start;
-  flex-wrap: wrap;
-  gap: 16px;
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: 16px;
 }
+
 .titleMessageRow:not(:last-of-type) {
-  margin-bottom: 16px;
+    margin-block-end: 16px;
 }
 
 .label {
-  flex-basis: 160px;
-  text-align: right;
-  font-weight: 700;
+    flex-basis: 160px;
+    text-align: right;
+    font-weight: 700;
 }
 
 .inputWrapper {
-  flex: 1;
+    flex: 1;
 }
 
 .radioWrapper {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 16px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px 16px;
 }
 
 .radioWrapper label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    inline-size: 100px;
 }
 
 .messageInput {
-  display: block;
-  width: 100%;
-  height: 4rem;
-}
+    display: block;
+    inline-size: 100%;
+    block-size: 4rem;
+}
\ No newline at end of file
diff --git a/src/global-styles.css b/src/global-styles.css
index fc3170e9a..0d9b4dc3e 100644
--- a/src/global-styles.css
+++ b/src/global-styles.css
@@ -5,34 +5,38 @@
 *,
 *::before,
 *::after {
-  box-sizing: border-box;
-}
-* {
-  margin: 0;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
 }
+
 html,
 body {
-  height: 100%;
+    block-size: 100%;
 }
+
 body {
-  line-height: 1.5;
-  -webkit-font-smoothing: antialiased;
-  font-family: 'Lato', sans-serif;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    font-family: 'Lato', sans-serif;
 }
+
 img,
 picture,
 video,
 canvas,
 svg {
-  display: block;
-  max-width: 100%;
+    display: block;
+    max-inline-size: 100%;
 }
+
 input,
 button,
 textarea,
 select {
-  font: inherit;
+    font: inherit;
 }
+
 p,
 h1,
 h2,
@@ -40,59 +44,57 @@ h3,
 h4,
 h5,
 h6 {
-  overflow-wrap: break-word;
+    overflow-wrap: break-word;
 }
+
 #root,
 #__next {
-  isolation: isolate;
+    isolation: isolate;
 }
 
 /* Custom global styles */
 html {
-  color-scheme: dark;
-
-  --color-notice: hsl(235deg 100% 50%);
-  --color-notice-bg: hsl(235deg 0% 100%);
-  --color-warning: hsl(35deg 100% 46%);
-  --color-warning-bg: hsl(40deg 100% 94%);
-  --color-success: hsl(120deg 80% 35%);
-  --color-success-bg: hsl(120deg 90% 96%);
-  --color-error: hsl(345deg 100% 50%);
-  --color-error-bg: hsl(350deg 90% 96%);
-
-  --shadow-color: 250deg 35% 11%;
-  /* prettier-ignore */
-  --shadow-elevation-low:
-  0px 0.6px 0.6px hsl(var(--shadow-color) / 0.26),
-  0px 0.8px 0.8px -1.6px hsl(var(--shadow-color) / 0.22),
-  0px 1.8px 1.8px -3.2px hsl(var(--shadow-color) / 0.19);
-  /* prettier-ignore */
-  --shadow-elevation-medium:
-  0px 0.3px 0.6px hsl(var(--shadow-color) / 0.2),
-  0px 0.7px 1.4px -1.1px hsl(var(--shadow-color) / 0.19),
-  0px 1.5px 3.7px -2.1px hsl(var(--shadow-color) / 0.18),
-  0.1px 4px 9.2px -3.2px hsl(var(--shadow-color) / 0.17),
-  0.2px 6px 15px -2.3px hsl(var(--shadow-color) / 0.16);
-  /* prettier-ignore */
-  --shadow-elevation-high:
-    0px 0.6px 0.6px hsl(var(--shadow-color) / 0.26),
-    0px 1.8px 1.8px -0.5px hsl(var(--shadow-color) / 0.24),
-    0px 3.2px 3.3px -0.9px hsl(var(--shadow-color) / 0.23),
-    0.1px 5.4px 5.5px -1.4px hsl(var(--shadow-color) / 0.21),
-    0.1px 9.1px 9.3px -1.8px hsl(var(--shadow-color) / 0.2),
-    0.2px 14.7px 15px -2.3px hsl(var(--shadow-color) / 0.19),
-    0.3px 22.8px 23.3px -2.7px hsl(var(--shadow-color) / 0.17),
-    0.4px 34.2px 34.9px -3.2px hsl(var(--shadow-color) / 0.16);
+    color-scheme: dark;
+    
+    --color-notice: hsl(235deg 100% 50%);
+    --color-notice-bg: hsl(235deg 0% 100%);
+    --color-warning: hsl(35deg 100% 46%);
+    --color-warning-bg: hsl(40deg 100% 94%);
+    --color-success: hsl(120deg 80% 35%);
+    --color-success-bg: hsl(120deg 90% 96%);
+    --color-error: hsl(345deg 100% 50%);
+    --color-error-bg: hsl(350deg 90% 96%);
+    
+    --shadow-color: 250deg 35% 11%;
+    /* prettier-ignore */
+    --shadow-elevation-low:
+        0px 0.6px 0.6px hsl(var(--shadow-color) / 0.26),
+        0px 0.8px 0.8px -1.6px hsl(var(--shadow-color) / 0.22),
+        0px 1.8px 1.8px -3.2px hsl(var(--shadow-color) / 0.19);
+    /* prettier-ignore */
+    --shadow-elevation-medium:
+        0px 0.3px 0.6px hsl(var(--shadow-color) / 0.2),
+        0px 0.7px 1.4px -1.1px hsl(var(--shadow-color) / 0.19),
+        0px 1.5px 3.7px -2.1px hsl(var(--shadow-color) / 0.18),
+        0.1px 4px 9.2px -3.2px hsl(var(--shadow-color) / 0.17),
+        0.2px 6px 15px -2.3px hsl(var(--shadow-color) / 0.16);
+    /* prettier-ignore */
+    --shadow-elevation-high:
+        0px 0.6px 0.6px hsl(var(--shadow-color) / 0.26),
+        0px 1.8px 1.8px -0.5px hsl(var(--shadow-color) / 0.24),
+        0px 3.2px 3.3px -0.9px hsl(var(--shadow-color) / 0.23),
+        0.1px 5.4px 5.5px -1.4px hsl(var(--shadow-color) / 0.21),
+        0.1px 9.1px 9.3px -1.8px hsl(var(--shadow-color) / 0.2),
+        0.2px 14.7px 15px -2.3px hsl(var(--shadow-color) / 0.19),
+        0.3px 22.8px 23.3px -2.7px hsl(var(--shadow-color) / 0.17),
+        0.4px 34.2px 34.9px -3.2px hsl(var(--shadow-color) / 0.16);
 }
 
 body {
-  background-attachment: fixed;
-  background-image: conic-gradient(
-    from 270deg at 50% -20%,
-    hsl(240deg 40% 5%) 50%,
-    hsl(250deg 40% 20%),
-    hsl(250deg 30% 25%),
-    hsl(250deg 40% 20%),
-    hsl(240deg 40% 5%)
-  );
-}
+    background-attachment: fixed;
+    background-image: conic-gradient(from 270deg at 50% -20%,
+            hsl(240deg 40% 5%) 50%,
+            hsl(250deg 40% 20%),
+            hsl(250deg 30% 25%),
+            hsl(250deg 40% 20%),
+            hsl(240deg 40% 5%));
\ No newline at end of file