From 6ccc78aeeab2848d22cf3f930f2bfdbe640ac554 Mon Sep 17 00:00:00 2001
From: Sid Vishnoi <8426945+sidvishnoi@users.noreply.github.com>
Date: Tue, 23 Jun 2026 19:45:05 +0530
Subject: [PATCH] fix(/play): inline styles and prevent unused CSS purge

---
 src/pages/play.astro | 155 +------------------------------------------
 src/styles/play.css  | 153 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 155 insertions(+), 153 deletions(-)
 create mode 100644 src/styles/play.css

diff --git a/src/pages/play.astro b/src/pages/play.astro
index cbc2e712..af4fb9b0 100644
--- a/src/pages/play.astro
+++ b/src/pages/play.astro
@@ -2,6 +2,7 @@
 import { getLangFromUrl, useTranslations } from '../i18n/utils'
 import Base from '../layouts/Base.astro'
 import ToolsHeader from '../components/pages/ToolsHeader.astro'
+import playgroundStyles from '../styles/play.css?raw'
 
 const lang = getLangFromUrl(Astro.url)
 const t = useTranslations(lang)
@@ -56,159 +57,7 @@ const t = useTranslations(lang)
   </section>
 </Base>
 
-<style>
-  p.text {
-    padding-inline: var(--padding-md);
-    margin-bottom: var(--spacing-3xl);
-  }
-  .link-events {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
-    width: 100%;
-    padding-inline: var(--padding-md);
-    margin-top: var(--spacing-md);
-    gap: var(--spacing-md);
-    font: var(--font-small-regular);
-    div[data-wallet-address] {
-      padding: var(--padding-md);
-      background-color: var(--color-mint-50);
-      border-radius: var(--moderate-rounding);
-      border: 1px solid var(--color-green-100);
-      & .log-header {
-        padding-bottom: var(--padding-sm);
-        margin-bottom: var(--spacing-sm);
-        border-bottom: 1px solid var(--color-silver-200);
-        gap: var(--spacing-sm);
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        & p {
-          max-width: 100%;
-          overflow-x: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          text-align: center;
-          color: var(--paragraph-success);
-        }
-
-        .wallet-switch {
-          display: flex;
-          align-items: center;
-          gap: var(--spacing-sm);
-
-          .switch-text {
-            font: var(--font-standard-regular);
-            color: var(--default-font-color);
-          }
-
-          .switch-container {
-            position: relative;
-            display: inline-block;
-            width: 2.75rem;
-            height: 1.5rem;
-          }
-
-          input {
-            width: 100%;
-            height: 100%;
-          }
-
-          .switch-slider {
-            position: absolute;
-            inset: 0;
-            background-color: var(--color-silver-300);
-            border-radius: var(--fully-rounded);
-            cursor: pointer;
-          }
-
-          .switch-slider::before {
-            content: '';
-            position: absolute;
-            width: 1.25rem;
-            height: 1.25rem;
-            top: 0.125rem;
-            left: 0.125rem;
-            background-color: var(--color-white);
-            border-radius: var(--fully-rounded);
-            transition: transform 0.3s;
-          }
-
-          input:checked + .switch-slider {
-            background-color: var(--button-ghost-color);
-          }
-
-          input:checked + .switch-slider::before {
-            transform: translateX(1.25rem);
-          }
-        }
-      }
-
-      & ul.events {
-        font-family: var(--sl-font-system-mono);
-        height: 20rem;
-        margin-block: var(--spacing-sm);
-        padding: var(--padding-sm) 0px var(--padding-sm) var(--padding-sm);
-        list-style: none;
-        overflow-y: auto;
-        white-space: nowrap;
-        border-bottom: 1px solid var(--color-silver-200);
-
-        & li {
-          margin-block-end: var(--spacing-2xs);
-
-          & details {
-            & summary {
-              cursor: pointer;
-
-              & span {
-                text-decoration: underline dotted;
-                text-underline-offset: 2px;
-              }
-            }
-
-            & pre {
-              padding: var(--padding-xs);
-              margin-inline-start: var(--spacing-md);
-            }
-          }
-        }
-      }
-
-      & .log-footer {
-        gap: var(--spacing-sm);
-        display: flex;
-        align-items: center;
-        justify-content: right;
-
-        & button.tools-secondary-btn {
-          background-color: transparent;
-          color: var(--button-ghost-color);
-          border: none;
-          font: var(--font-standard-regular);
-        }
-        & button.tools-secondary-btn:hover,
-        & button.tools-secondary-btn:focus-visible {
-          background-color: var(--surface-hover-color);
-          color: var(--button-hover-color);
-        }
-      }
-    }
-  }
-
-  @media screen and (max-width: 767px) {
-    p.text {
-      margin-bottom: var(--spacing-lg);
-    }
-    .link-events {
-      grid-template-columns: minmax(16.5rem, 1fr);
-      div[data-wallet-address] {
-        & .log-header {
-          flex-wrap: wrap;
-        }
-      }
-    }
-  }
-</style>
+<style is:inline set:html={playgroundStyles}></style>
 
 <script>
   import cleanIcon from '@assets/clean-icon.svg?raw'
diff --git a/src/styles/play.css b/src/styles/play.css
new file mode 100644
index 00000000..49e5e4b0
--- /dev/null
+++ b/src/styles/play.css
@@ -0,0 +1,153 @@
+p.text {
+  padding-inline: var(--padding-md);
+  margin-bottom: var(--spacing-3xl);
+}
+
+.link-events {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
+  width: 100%;
+  padding-inline: var(--padding-md);
+  margin-top: var(--spacing-md);
+  gap: var(--spacing-md);
+  font: var(--font-small-regular);
+
+  div[data-wallet-address] {
+    padding: var(--padding-md);
+    background-color: var(--color-mint-50);
+    border-radius: var(--moderate-rounding);
+    border: 1px solid var(--color-green-100);
+    & .log-header {
+      padding-bottom: var(--padding-sm);
+      margin-bottom: var(--spacing-sm);
+      border-bottom: 1px solid var(--color-silver-200);
+      gap: var(--spacing-sm);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      & p {
+        max-width: 100%;
+        overflow-x: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        text-align: center;
+        color: var(--paragraph-success);
+      }
+
+      .wallet-switch {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-sm);
+
+        .switch-text {
+          font: var(--font-standard-regular);
+          color: var(--default-font-color);
+        }
+
+        .switch-container {
+          position: relative;
+          display: inline-block;
+          width: 2.75rem;
+          height: 1.5rem;
+        }
+
+        input {
+          width: 100%;
+          height: 100%;
+        }
+
+        .switch-slider {
+          position: absolute;
+          inset: 0;
+          background-color: var(--color-silver-300);
+          border-radius: var(--fully-rounded);
+          cursor: pointer;
+        }
+
+        .switch-slider::before {
+          content: '';
+          position: absolute;
+          width: 1.25rem;
+          height: 1.25rem;
+          top: 0.125rem;
+          left: 0.125rem;
+          background-color: var(--color-white);
+          border-radius: var(--fully-rounded);
+          transition: transform 0.3s;
+        }
+
+        input:checked + .switch-slider {
+          background-color: var(--button-ghost-color);
+        }
+
+        input:checked + .switch-slider::before {
+          transform: translateX(1.25rem);
+        }
+      }
+    }
+
+    & ul.events {
+      font-family: var(--sl-font-system-mono);
+      height: 20rem;
+      margin-block: var(--spacing-sm);
+      padding: var(--padding-sm) 0px var(--padding-sm) var(--padding-sm);
+      list-style: none;
+      overflow-y: auto;
+      white-space: nowrap;
+      border-bottom: 1px solid var(--color-silver-200);
+
+      & li {
+        margin-block-end: var(--spacing-2xs);
+
+        & details {
+          & summary {
+            cursor: pointer;
+
+            & span {
+              text-decoration: underline dotted;
+              text-underline-offset: 2px;
+            }
+          }
+
+          & pre {
+            padding: var(--padding-xs);
+            margin-inline-start: var(--spacing-md);
+          }
+        }
+      }
+    }
+
+    & .log-footer {
+      gap: var(--spacing-sm);
+      display: flex;
+      align-items: center;
+      justify-content: right;
+
+      & button.tools-secondary-btn {
+        background-color: transparent;
+        color: var(--button-ghost-color);
+        border: none;
+        font: var(--font-standard-regular);
+      }
+      & button.tools-secondary-btn:hover,
+      & button.tools-secondary-btn:focus-visible {
+        background-color: var(--surface-hover-color);
+        color: var(--button-hover-color);
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  p.text {
+    margin-bottom: var(--spacing-lg);
+  }
+  .link-events {
+    grid-template-columns: minmax(16.5rem, 1fr);
+    div[data-wallet-address] {
+      & .log-header {
+        flex-wrap: wrap;
+      }
+    }
+  }
+}