@stainless-api/docs-ui 0.1.0-beta.84 → 0.1.0-beta.86

package/dist/styles.css

@@ -1,19 +1,14 @@
-/* Typography - Stainless */
 @layer stl-ui.tokens {
   :root {
-    --stl-typography-font: 'Geist', system-ui, sans-serif;
-    --stl-typography-font-mono: 'Geist Mono', ui-monospace, monospace;
+    --stl-typography-font: "Geist", system-ui, sans-serif;
+    --stl-typography-font-mono: "Geist Mono", ui-monospace, monospace;
     --stl-typography-font-heading: var(--stl-typography-font);
-
     --stl-typography-line-height: 1.5;
     --stl-typography-line-height-heading: 1.2;
-
     --stl-typography-text-body: var(--stl-typography-scale-base);
     --stl-typography-text-body-sm: var(--stl-typography-scale-sm);
     --stl-typography-text-body-xs: var(--stl-typography-scale-xs);
-
-    --stl-typography-text-code: max(0.875em, var(--stl-typography-scale-xs));
-
+    --stl-typography-text-code: max(.875em, var(--stl-typography-scale-xs));
     --stl-typography-text-h1: var(--stl-typography-scale-5xl);
     --stl-typography-text-h2: var(--stl-typography-scale-4xl);
     --stl-typography-text-h3: var(--stl-typography-scale-3xl);
@@ -29,28 +24,177 @@
     --stl-typography-scale-4xl: 35px;
     --stl-typography-scale-5xl: 42px;
     --stl-typography-scale-6xl: 64px;
-
     --stl-color-text-selection-foreground: /* unset by default; text colors are unchanged */;
-    --stl-color-text-selection-background: light-dark(
-      rgb(from var(--stl-color-text-selection) r g b / calc(alpha * 0.15)),
-      rgb(from var(--stl-color-text-selection) r g b / calc(alpha * 0.35))
-    );
+    --stl-color-text-selection-background: light-dark(rgb(from var(--stl-color-text-selection) r g b / calc(alpha * .15)), rgb(from var(--stl-color-text-selection) r g b / calc(alpha * .35)));
+    --stl-ui-layout-border-radius-xs: 4px;
+    --stl-ui-layout-border-radius-sml: 8px;
+    --stl-ui-layout-border-radius: 12px;
+    --stl-ui-layout-border-radius-med: 16px;
+    --stl-ui-layout-border-radius-max: 100vmax;
+    --stl-ui-left-content-indent: 24px;
+    --stl-ui-page-padding-inline: 20px;
+    --stl-opacity-level-080: .8;
+    --stl-opacity-level-040: .4;
+    --stl-opacity-level-016: .16;
+    --stl-opacity-level-008: .08;
+    --stl-opacity-level-004: .04;
+    --stl-color-background: light-dark(#fff, #0a0a0a);
+    --stl-color-background-hover: light-dark(rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-004))), rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))));
+    --stl-color-muted-background: light-dark(rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-muted-background-hover: rgb(from var(--stl-color-muted-background) r g b/calc(alpha * 2));
+    --stl-color-faint-background: rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-004)));
+    --stl-color-faint-background-hover: rgb(from var(--stl-color-faint-background) r g b/calc(alpha * 2));
+    --stl-color-ui-background: light-dark(var(--stl-color-background), rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-004))));
+    --stl-color-ui-background-hover: light-dark(var(--stl-color-background-hover), rgb(from var(--stl-color-ui-background) r g b/calc(alpha * 2)));
+    --stl-color-foreground: light-dark(#262626, #f5f5f5);
+    --stl-color-foreground-reduced: rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-foreground-muted: rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-inverse-background: var(--stl-color-foreground);
+    --stl-color-inverse-background-hover: rgb(from var(--stl-color-inverse-background) r g b/calc(alpha * .9));
+    --stl-color-inverse-foreground: var(--stl-color-background);
+    --stl-color-border: rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-016)));
+    --stl-color-border-faint: rgb(from var(--stl-color-border) r g b/calc(alpha * .5));
+    --stl-color-border-strong: rgb(from var(--stl-color-border) r g b/calc(alpha * 2.5));
+    --stl-color-accent: light-dark(#155dfc, #2b7fff);
+    --stl-color-accent-foreground: var(--stl-color-accent);
+    --stl-color-accent-foreground-reduced: rgb(from var(--stl-color-accent-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-accent-foreground-muted: rgb(from var(--stl-color-accent-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-accent-muted-background: light-dark(rgb(from var(--stl-color-accent-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-accent-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-accent-muted-background-hover: rgb(from var(--stl-color-accent-muted-background) r g b/calc(alpha * 2));
+    --stl-color-accent-border: light-dark(rgb(from var(--stl-color-accent) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-accent) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-accent-border-faint: rgb(from var(--stl-color-accent-border) r g b/calc(alpha * .5));
+    --stl-color-accent-border-strong: var(--stl-color-accent);
+    --stl-color-accent-inverse-background: var(--stl-color-accent);
+    --stl-color-accent-inverse-background-hover: rgb(from var(--stl-color-accent-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-accent-inverse-foreground: #fff;
+    --stl-color-red: light-dark(#d01e22, #e34041);
+    --stl-color-red-foreground: var(--stl-color-red);
+    --stl-color-red-foreground-reduced: rgb(from var(--stl-color-red-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-red-foreground-muted: rgb(from var(--stl-color-red-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-red-muted-background: light-dark(rgb(from var(--stl-color-red-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-red-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-red-muted-background-hover: rgb(from var(--stl-color-red-muted-background) r g b/calc(alpha * 2));
+    --stl-color-red-border: light-dark(rgb(from var(--stl-color-red) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-red) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-red-border-faint: rgb(from var(--stl-color-red-border) r g b/calc(alpha * .5));
+    --stl-color-red-border-strong: var(--stl-color-red);
+    --stl-color-red-inverse-background: var(--stl-color-red);
+    --stl-color-red-inverse-background-hover: rgb(from var(--stl-color-red-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-red-inverse-foreground: #fff;
+    --stl-color-green: light-dark(#16a34a, #22c55e);
+    --stl-color-green-foreground: var(--stl-color-green);
+    --stl-color-green-foreground-reduced: rgb(from var(--stl-color-green-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-green-foreground-muted: rgb(from var(--stl-color-green-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-green-muted-background: light-dark(rgb(from var(--stl-color-green-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-green-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-green-muted-background-hover: rgb(from var(--stl-color-green-muted-background) r g b/calc(alpha * 2));
+    --stl-color-green-border: light-dark(rgb(from var(--stl-color-green) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-green) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-green-border-faint: rgb(from var(--stl-color-green-border) r g b/calc(alpha * .5));
+    --stl-color-green-border-strong: var(--stl-color-green);
+    --stl-color-green-inverse-background: var(--stl-color-green);
+    --stl-color-green-inverse-background-hover: rgb(from var(--stl-color-green-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-green-inverse-foreground: #fff;
+    --stl-color-blue: light-dark(#155dfc, #2b7fff);
+    --stl-color-blue-foreground: var(--stl-color-blue);
+    --stl-color-blue-foreground-reduced: rgb(from var(--stl-color-blue-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-blue-foreground-muted: rgb(from var(--stl-color-blue-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-blue-muted-background: light-dark(rgb(from var(--stl-color-blue-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-blue-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-blue-muted-background-hover: rgb(from var(--stl-color-blue-muted-background) r g b/calc(alpha * 2));
+    --stl-color-blue-border: light-dark(rgb(from var(--stl-color-blue) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-blue) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-blue-border-faint: rgb(from var(--stl-color-blue-border) r g b/calc(alpha * .5));
+    --stl-color-blue-border-strong: var(--stl-color-blue);
+    --stl-color-blue-inverse-background: var(--stl-color-blue);
+    --stl-color-blue-inverse-background-hover: rgb(from var(--stl-color-blue-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-blue-inverse-foreground: #fff;
+    --stl-color-yellow: light-dark(#ca8a04, #eab308);
+    --stl-color-yellow-foreground: var(--stl-color-yellow);
+    --stl-color-yellow-foreground-reduced: rgb(from var(--stl-color-yellow-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-yellow-foreground-muted: rgb(from var(--stl-color-yellow-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-yellow-muted-background: light-dark(rgb(from var(--stl-color-yellow-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-yellow-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-yellow-muted-background-hover: rgb(from var(--stl-color-yellow-muted-background) r g b/calc(alpha * 2));
+    --stl-color-yellow-border: light-dark(rgb(from var(--stl-color-yellow) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-yellow) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-yellow-border-faint: rgb(from var(--stl-color-yellow-border) r g b/calc(alpha * .5));
+    --stl-color-yellow-border-strong: var(--stl-color-yellow);
+    --stl-color-yellow-inverse-background: var(--stl-color-yellow);
+    --stl-color-yellow-inverse-background-hover: rgb(from var(--stl-color-yellow-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-yellow-inverse-foreground: #fff;
+    --stl-color-orange: light-dark(#ea580c, #f97316);
+    --stl-color-orange-foreground: var(--stl-color-orange);
+    --stl-color-orange-foreground-reduced: rgb(from var(--stl-color-orange-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-orange-foreground-muted: rgb(from var(--stl-color-orange-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-orange-muted-background: light-dark(rgb(from var(--stl-color-orange-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-orange-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-orange-muted-background-hover: rgb(from var(--stl-color-orange-muted-background) r g b/calc(alpha * 2));
+    --stl-color-orange-border: light-dark(rgb(from var(--stl-color-orange) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-orange) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-orange-border-faint: rgb(from var(--stl-color-orange-border) r g b/calc(alpha * .5));
+    --stl-color-orange-border-strong: var(--stl-color-orange);
+    --stl-color-orange-inverse-background: var(--stl-color-orange);
+    --stl-color-orange-inverse-background-hover: rgb(from var(--stl-color-orange-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-orange-inverse-foreground: #fff;
+    --stl-color-purple: light-dark(#9333ea, #a855f7);
+    --stl-color-purple-foreground: var(--stl-color-purple);
+    --stl-color-purple-foreground-reduced: rgb(from var(--stl-color-purple-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-purple-foreground-muted: rgb(from var(--stl-color-purple-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-purple-muted-background: light-dark(rgb(from var(--stl-color-purple-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-purple-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-purple-muted-background-hover: rgb(from var(--stl-color-purple-muted-background) r g b/calc(alpha * 2));
+    --stl-color-purple-border: light-dark(rgb(from var(--stl-color-purple) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-purple) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-purple-border-faint: rgb(from var(--stl-color-purple-border) r g b/calc(alpha * .5));
+    --stl-color-purple-border-strong: var(--stl-color-purple);
+    --stl-color-purple-inverse-background: var(--stl-color-purple);
+    --stl-color-purple-inverse-background-hover: rgb(from var(--stl-color-purple-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-purple-inverse-foreground: #fff;
+    --stl-color-cyan: light-dark(#0891b2, #06b6d4);
+    --stl-color-cyan-foreground: var(--stl-color-cyan);
+    --stl-color-cyan-foreground-reduced: rgb(from var(--stl-color-cyan-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-cyan-foreground-muted: rgb(from var(--stl-color-cyan-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-cyan-muted-background: light-dark(rgb(from var(--stl-color-cyan-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-cyan-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-cyan-muted-background-hover: rgb(from var(--stl-color-cyan-muted-background) r g b/calc(alpha * 2));
+    --stl-color-cyan-border: light-dark(rgb(from var(--stl-color-cyan) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-cyan) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-cyan-border-faint: rgb(from var(--stl-color-cyan-border) r g b/calc(alpha * .5));
+    --stl-color-cyan-border-strong: var(--stl-color-cyan);
+    --stl-color-cyan-inverse-background: var(--stl-color-cyan);
+    --stl-color-cyan-inverse-background-hover: rgb(from var(--stl-color-cyan-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-cyan-inverse-foreground: #fff;
+    --stl-color-pink: light-dark(#ec4899, #ec4899);
+    --stl-color-pink-foreground: var(--stl-color-pink);
+    --stl-color-pink-foreground-reduced: rgb(from var(--stl-color-pink-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-pink-foreground-muted: rgb(from var(--stl-color-pink-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-pink-muted-background: light-dark(rgb(from var(--stl-color-pink-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-pink-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-pink-muted-background-hover: rgb(from var(--stl-color-pink-muted-background) r g b/calc(alpha * 2));
+    --stl-color-pink-border: light-dark(rgb(from var(--stl-color-pink) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-pink) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-pink-border-faint: rgb(from var(--stl-color-pink-border) r g b/calc(alpha * .5));
+    --stl-color-pink-border-strong: var(--stl-color-pink);
+    --stl-color-pink-inverse-background: var(--stl-color-pink);
+    --stl-color-pink-inverse-background-hover: rgb(from var(--stl-color-pink-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-pink-inverse-foreground: #fff;
+  }
+
+  :root[data-theme="dark"], .stl-theme-dark {
+    color-scheme: dark;
+    background: var(--stl-color-background);
+    color: var(--stl-color-foreground);
+  }
+
+  :root[data-theme="light"], .stl-theme-light {
+    color-scheme: light;
+    background: var(--stl-color-background);
+    color: var(--stl-color-foreground);
+  }
+
+  :root {
+    --stl-color-link-foreground: var(--stl-color-accent-foreground);
+    --stl-color-text-selection: var(--stl-color-accent-inverse-background);
   }
 }
 
-/* Prose exists in its own sub-layer for easy reverting */
 body {
   font-family: var(--stl-typography-font);
 }
 
 .stl-ui-prose {
-  letter-spacing: -0.01em;
+  letter-spacing: -.01em;
   font-weight: 400;
   line-height: var(--stl-typography-line-height);
   font-size: var(--stl-typography-text-body);
   color: var(--stl-color-foreground-reduced);
 
-  :where(.stl-ui-not-prose) {
+  & :where(.stl-ui-not-prose) {
     letter-spacing: initial;
     font-weight: initial;
     line-height: initial;
@@ -63,67 +207,63 @@ body {
     letter-spacing: normal;
   }
 
-  :where(strong:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose strong) {
+  & :where(strong:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose strong) {
     color: rgb(from currentColor r g b / 1);
   }
 
-  :where(a:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose a) {
+  & :where(a:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose a) {
     color: var(--stl-color-link-foreground);
     text-decoration-color: rgb(from currentColor r g b / calc(alpha * var(--stl-opacity-level-040)));
-    transition: text-decoration-color 0.1s ease-out;
+    transition: text-decoration-color .1s ease-out;
+
     &:hover {
       text-decoration-color: currentColor;
     }
   }
 
-  :where(h1, h2, h3, h4, h5, h6):where(:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose *) {
+  & :where(h1, h2, h3, h4, h5, h6):where(:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose *) {
     color: var(--stl-color-foreground);
     font-weight: 500;
     line-height: var(--stl-typography-line-height-heading);
     font-family: var(--stl-typography-font-heading);
-
     text-wrap: pretty;
+
     &:where(h1, h2, h3) {
       text-wrap: balance;
     }
   }
 
-  :where(h1:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h1) {
-    /* Heading 1/Medium */
+  & :where(h1:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h1) {
     font-size: var(--stl-typography-text-h1);
-    letter-spacing: -0.03em;
+    letter-spacing: -.03em;
     margin-top: 1.5em;
   }
 
-  :where(h2:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h2) {
-    /* Heading 2/Medium */
+  & :where(h2:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h2) {
     font-size: var(--stl-typography-text-h2);
-    letter-spacing: -0.03em;
+    letter-spacing: -.03em;
     margin-top: 1.35em;
   }
 
-  :where(h3:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h3) {
-    /* Heading 3/Medium */
+  & :where(h3:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h3) {
     font-size: var(--stl-typography-text-h3);
-    letter-spacing: -0.02em;
+    letter-spacing: -.02em;
     margin-top: 1.35em;
   }
 
-  :where(h4:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h4) {
-    /* Heading 4/Medium */
+  & :where(h4:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h4) {
     font-size: var(--stl-typography-text-h4);
-    letter-spacing: -0.02em;
+    letter-spacing: -.02em;
     margin-top: 1.35em;
   }
 
-  :where(h5:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h5) {
-    /* Heading 5/Medium */
+  & :where(h5:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h5) {
     font-size: var(--stl-typography-text-h5);
-    letter-spacing: -0.02em;
+    letter-spacing: -.02em;
     margin-top: 1.2em;
   }
 
-  :where(li:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose li) {
+  & :where(li:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose li) {
     &:where(:not(:last-child)) {
       margin-bottom: 8px;
     }
@@ -136,82 +276,74 @@ body {
     --stl-typography-text-h4: var(--stl-typography-scale-lg);
     --stl-typography-text-h5: var(--stl-typography-scale-base);
 
-    :where(h1) {
+    & :where(h1) {
       margin-top: 1.5em;
     }
-    :where(h2, h3, h4) {
+
+    & :where(h2, h3, h4) {
       margin-top: 1.25em;
     }
-    :where(h5) {
+
+    & :where(h5) {
       margin-top: 1em;
     }
   }
 
-  /* code blocks */
-  :where(
-    pre:not(.stl-ui-not-prose *, .expressive-code *),
-    .stl-ui-not-prose .stl-ui-prose pre:not(.expressive-code *)
-  ) {
-    padding: 12px 20px;
+  & :where(pre:not(.stl-ui-not-prose *, .expressive-code *), .stl-ui-not-prose .stl-ui-prose pre:not(.expressive-code *)) {
     border-radius: var(--stl-ui-layout-border-radius-sml);
     border: 1px solid var(--stl-color-border);
     background-color: var(--stl-color-faint-background);
-    overflow: auto;
     margin-bottom: 1rem;
+    padding: 12px 20px;
+    overflow: auto;
   }
 
-  :where(ol, ul) {
+  & :where(ol, ul) {
     &:where(:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose *) {
       padding-left: 26px;
     }
   }
 
-  :where(ol, ul, aside, img, figure, details):where(
-    :not(.stl-ui-not-prose *),
-    .stl-ui-not-prose .stl-ui-prose *
-  ) {
+  & :where(ol, ul, aside, img, figure, details):where(:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose *) {
     margin-top: 16px;
   }
 
-  /* all code (inline + block) */
-  :where(code):where(:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose *) {
+  & :where(code):where(:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose *) {
     font-family: var(--stl-typography-font-mono);
-    font-feature-settings:
-      'ss01' on,
-      'ss03' on,
-      'ss04' on,
-      'ss06' on;
-
+    font-feature-settings: "ss01" on,
+      "ss03" on,
+      "ss04" on,
+      "ss06" on;
     font-size: var(--stl-typography-text-code);
     font-weight: inherit;
     letter-spacing: normal;
     white-space: pre;
 
-    /* inline code */
     &:where(:not(pre > code)) {
       color: var(--stl-color-foreground);
-      padding: 0 0.2em;
-      background-color: rgb(from var(--stl-color-foreground) r g b / 0.1);
-      border-radius: 0.2em;
+      background-color: rgb(from var(--stl-color-foreground) r g b / .1);
+      border-radius: .2em;
+      padding: 0 .2em;
     }
-
-    /* code blocks */
-    /* &:where(pre > &) { } */
   }
 }
 
-/* _direct_ children of stl-ui-prose should get a margin-top by default for spacing. */
 :where(.stl-ui-prose, .stl-ui-prose > .sl-markdown-content) > :where(:not(:first-child)) {
   margin-top: 16px;
 }
 
 @layer starlight.content {
   .stl-ui-prose .sl-markdown-content {
-    a,
-    a:hover {
+    & a, & a:hover {
       color: revert-layer;
     }
   }
+
+  .stl-ui-prose .sl-markdown-content.sl-markdown-content.sl-markdown-content {
+    & details, & summary, & summary:before, & summary::marker {
+      all: revert-layer;
+    }
+  }
 }
 
 ::selection {
@@ -219,222 +351,24 @@ body {
   color: var(--stl-color-text-selection-foreground);
 }
 
-@layer stl-ui.tokens {
-  /* Layout - Stainless */
-  :root {
-    --stl-ui-layout-border-radius-xs: 4px;
-    --stl-ui-layout-border-radius-sml: 8px;
-    --stl-ui-layout-border-radius: 12px;
-    --stl-ui-layout-border-radius-med: 16px;
-    --stl-ui-layout-border-radius-max: 100vmax;
-    --stl-ui-left-content-indent: 24px;
-
-    --stl-ui-page-padding-inline: 20px;
-  }
-}
-
-/* 1. Base colors */
-@layer stl-ui.tokens {
-  :root {
-    --stl-opacity-level-080: 0.80;
-    --stl-opacity-level-040: 0.40;
-    --stl-opacity-level-016: 0.16;
-    --stl-opacity-level-008: 0.08;
-    --stl-opacity-level-004: 0.04;
-    /* background */
-    --stl-color-background: light-dark(rgb(255 255 255), rgb(10 10 10));
-    --stl-color-background-hover: light-dark(rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-004))), rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))));
-    /* background shades */
-    /* muted background */
-    --stl-color-muted-background: light-dark(rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
-    --stl-color-muted-background-hover: rgb(from var(--stl-color-muted-background) r g b/calc(alpha * 2));
-    /* faint background */
-    --stl-color-faint-background: rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-004)));
-    --stl-color-faint-background-hover: rgb(from var(--stl-color-faint-background) r g b/calc(alpha * 2));
-    /* ui elements like cards and buttons match --stl-color-background in light mode, but have a slight tint in dark mode */
-    --stl-color-ui-background: light-dark(
-      var(--stl-color-background),
-      rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-004)))
-    );
-    --stl-color-ui-background-hover: light-dark(
-      var(--stl-color-background-hover),
-      rgb(from var(--stl-color-ui-background) r g b/calc(alpha * 2))
-    );
-    /* foreground */
-    --stl-color-foreground: light-dark(rgb(38 38 38), rgb(245 245 245));
-    --stl-color-foreground-reduced: rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
-    --stl-color-foreground-muted: rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
-    /* inverse */
-    --stl-color-inverse-background: var(--stl-color-foreground);
-    --stl-color-inverse-background-hover: rgb(from var(--stl-color-inverse-background) r g b/calc(alpha * 0.9));
-    --stl-color-inverse-foreground: var(--stl-color-background);
-    /* default border (“foreground border”) */
-    --stl-color-border: rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-016)));
-    --stl-color-border-faint: rgb(from var(--stl-color-border) r g b/calc(alpha * 0.5));
-    --stl-color-border-strong: rgb(from var(--stl-color-border) r g b/calc(alpha * 2.5));
-  }
-}
-/* 2. Color palettes (accent, red, green, etc) */
-@layer stl-ui.tokens {
-  :root {
-    /* accent */
-    --stl-color-accent: light-dark(#155dfc, #2b7fff);
-    --stl-color-accent-foreground: var(--stl-color-accent);
-    --stl-color-accent-foreground-reduced: rgb(from var(--stl-color-accent-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
-    --stl-color-accent-foreground-muted: rgb(from var(--stl-color-accent-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
-    --stl-color-accent-muted-background: light-dark(rgb(from var(--stl-color-accent-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-accent-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
-    --stl-color-accent-muted-background-hover: rgb(from var(--stl-color-accent-muted-background) r g b/calc(alpha * 2));
-    --stl-color-accent-border: light-dark(rgb(from var(--stl-color-accent) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-accent) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
-    --stl-color-accent-border-faint: rgb(from var(--stl-color-accent-border) r g b/calc(alpha * 0.5));
-    --stl-color-accent-border-strong: var(--stl-color-accent);
-    --stl-color-accent-inverse-background: var(--stl-color-accent);
-    --stl-color-accent-inverse-background-hover: rgb(from var(--stl-color-accent-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
-    --stl-color-accent-inverse-foreground: rgb(255, 255, 255);
-    /* red */
-    --stl-color-red: light-dark(#d01e22, #e34041);
-    --stl-color-red-foreground: var(--stl-color-red);
-    --stl-color-red-foreground-reduced: rgb(from var(--stl-color-red-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
-    --stl-color-red-foreground-muted: rgb(from var(--stl-color-red-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
-    --stl-color-red-muted-background: light-dark(rgb(from var(--stl-color-red-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-red-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
-    --stl-color-red-muted-background-hover: rgb(from var(--stl-color-red-muted-background) r g b/calc(alpha * 2));
-    --stl-color-red-border: light-dark(rgb(from var(--stl-color-red) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-red) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
-    --stl-color-red-border-faint: rgb(from var(--stl-color-red-border) r g b/calc(alpha * 0.5));
-    --stl-color-red-border-strong: var(--stl-color-red);
-    --stl-color-red-inverse-background: var(--stl-color-red);
-    --stl-color-red-inverse-background-hover: rgb(from var(--stl-color-red-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
-    --stl-color-red-inverse-foreground: rgb(255, 255, 255);
-    /* green */
-    --stl-color-green: light-dark(#16a34a, #22c55e);
-    --stl-color-green-foreground: var(--stl-color-green);
-    --stl-color-green-foreground-reduced: rgb(from var(--stl-color-green-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
-    --stl-color-green-foreground-muted: rgb(from var(--stl-color-green-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
-    --stl-color-green-muted-background: light-dark(rgb(from var(--stl-color-green-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-green-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
-    --stl-color-green-muted-background-hover: rgb(from var(--stl-color-green-muted-background) r g b/calc(alpha * 2));
-    --stl-color-green-border: light-dark(rgb(from var(--stl-color-green) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-green) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
-    --stl-color-green-border-faint: rgb(from var(--stl-color-green-border) r g b/calc(alpha * 0.5));
-    --stl-color-green-border-strong: var(--stl-color-green);
-    --stl-color-green-inverse-background: var(--stl-color-green);
-    --stl-color-green-inverse-background-hover: rgb(from var(--stl-color-green-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
-    --stl-color-green-inverse-foreground: rgb(255, 255, 255);
-    /* blue */
-    --stl-color-blue: light-dark(#155dfc, #2b7fff);
-    --stl-color-blue-foreground: var(--stl-color-blue);
-    --stl-color-blue-foreground-reduced: rgb(from var(--stl-color-blue-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
-    --stl-color-blue-foreground-muted: rgb(from var(--stl-color-blue-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
-    --stl-color-blue-muted-background: light-dark(rgb(from var(--stl-color-blue-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-blue-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
-    --stl-color-blue-muted-background-hover: rgb(from var(--stl-color-blue-muted-background) r g b/calc(alpha * 2));
-    --stl-color-blue-border: light-dark(rgb(from var(--stl-color-blue) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-blue) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
-    --stl-color-blue-border-faint: rgb(from var(--stl-color-blue-border) r g b/calc(alpha * 0.5));
-    --stl-color-blue-border-strong: var(--stl-color-blue);
-    --stl-color-blue-inverse-background: var(--stl-color-blue);
-    --stl-color-blue-inverse-background-hover: rgb(from var(--stl-color-blue-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
-    --stl-color-blue-inverse-foreground: rgb(255, 255, 255);
-    /* yellow */
-    --stl-color-yellow: light-dark(#ca8a04, #eab308);
-    --stl-color-yellow-foreground: var(--stl-color-yellow);
-    --stl-color-yellow-foreground-reduced: rgb(from var(--stl-color-yellow-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
-    --stl-color-yellow-foreground-muted: rgb(from var(--stl-color-yellow-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
-    --stl-color-yellow-muted-background: light-dark(rgb(from var(--stl-color-yellow-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-yellow-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
-    --stl-color-yellow-muted-background-hover: rgb(from var(--stl-color-yellow-muted-background) r g b/calc(alpha * 2));
-    --stl-color-yellow-border: light-dark(rgb(from var(--stl-color-yellow) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-yellow) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
-    --stl-color-yellow-border-faint: rgb(from var(--stl-color-yellow-border) r g b/calc(alpha * 0.5));
-    --stl-color-yellow-border-strong: var(--stl-color-yellow);
-    --stl-color-yellow-inverse-background: var(--stl-color-yellow);
-    --stl-color-yellow-inverse-background-hover: rgb(from var(--stl-color-yellow-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
-    --stl-color-yellow-inverse-foreground: rgb(255, 255, 255);
-    /* orange */
-    --stl-color-orange: light-dark(#ea580c, #f97316);
-    --stl-color-orange-foreground: var(--stl-color-orange);
-    --stl-color-orange-foreground-reduced: rgb(from var(--stl-color-orange-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
-    --stl-color-orange-foreground-muted: rgb(from var(--stl-color-orange-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
-    --stl-color-orange-muted-background: light-dark(rgb(from var(--stl-color-orange-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-orange-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
-    --stl-color-orange-muted-background-hover: rgb(from var(--stl-color-orange-muted-background) r g b/calc(alpha * 2));
-    --stl-color-orange-border: light-dark(rgb(from var(--stl-color-orange) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-orange) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
-    --stl-color-orange-border-faint: rgb(from var(--stl-color-orange-border) r g b/calc(alpha * 0.5));
-    --stl-color-orange-border-strong: var(--stl-color-orange);
-    --stl-color-orange-inverse-background: var(--stl-color-orange);
-    --stl-color-orange-inverse-background-hover: rgb(from var(--stl-color-orange-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
-    --stl-color-orange-inverse-foreground: rgb(255, 255, 255);
-    /* purple */
-    --stl-color-purple: light-dark(#9333ea, #a855f7);
-    --stl-color-purple-foreground: var(--stl-color-purple);
-    --stl-color-purple-foreground-reduced: rgb(from var(--stl-color-purple-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
-    --stl-color-purple-foreground-muted: rgb(from var(--stl-color-purple-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
-    --stl-color-purple-muted-background: light-dark(rgb(from var(--stl-color-purple-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-purple-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
-    --stl-color-purple-muted-background-hover: rgb(from var(--stl-color-purple-muted-background) r g b/calc(alpha * 2));
-    --stl-color-purple-border: light-dark(rgb(from var(--stl-color-purple) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-purple) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
-    --stl-color-purple-border-faint: rgb(from var(--stl-color-purple-border) r g b/calc(alpha * 0.5));
-    --stl-color-purple-border-strong: var(--stl-color-purple);
-    --stl-color-purple-inverse-background: var(--stl-color-purple);
-    --stl-color-purple-inverse-background-hover: rgb(from var(--stl-color-purple-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
-    --stl-color-purple-inverse-foreground: rgb(255, 255, 255);
-    /* cyan */
-    --stl-color-cyan: light-dark(#0891b2, #06b6d4);
-    --stl-color-cyan-foreground: var(--stl-color-cyan);
-    --stl-color-cyan-foreground-reduced: rgb(from var(--stl-color-cyan-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
-    --stl-color-cyan-foreground-muted: rgb(from var(--stl-color-cyan-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
-    --stl-color-cyan-muted-background: light-dark(rgb(from var(--stl-color-cyan-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-cyan-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
-    --stl-color-cyan-muted-background-hover: rgb(from var(--stl-color-cyan-muted-background) r g b/calc(alpha * 2));
-    --stl-color-cyan-border: light-dark(rgb(from var(--stl-color-cyan) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-cyan) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
-    --stl-color-cyan-border-faint: rgb(from var(--stl-color-cyan-border) r g b/calc(alpha * 0.5));
-    --stl-color-cyan-border-strong: var(--stl-color-cyan);
-    --stl-color-cyan-inverse-background: var(--stl-color-cyan);
-    --stl-color-cyan-inverse-background-hover: rgb(from var(--stl-color-cyan-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
-    --stl-color-cyan-inverse-foreground: rgb(255, 255, 255);
-    /* pink */
-    --stl-color-pink: light-dark(#ec4899, #ec4899);
-    --stl-color-pink-foreground: var(--stl-color-pink);
-    --stl-color-pink-foreground-reduced: rgb(from var(--stl-color-pink-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
-    --stl-color-pink-foreground-muted: rgb(from var(--stl-color-pink-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
-    --stl-color-pink-muted-background: light-dark(rgb(from var(--stl-color-pink-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-pink-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
-    --stl-color-pink-muted-background-hover: rgb(from var(--stl-color-pink-muted-background) r g b/calc(alpha * 2));
-    --stl-color-pink-border: light-dark(rgb(from var(--stl-color-pink) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-pink) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
-    --stl-color-pink-border-faint: rgb(from var(--stl-color-pink-border) r g b/calc(alpha * 0.5));
-    --stl-color-pink-border-strong: var(--stl-color-pink);
-    --stl-color-pink-inverse-background: var(--stl-color-pink);
-    --stl-color-pink-inverse-background-hover: rgb(from var(--stl-color-pink-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
-    --stl-color-pink-inverse-foreground: rgb(255, 255, 255);
-  }
-  :root[data-theme=dark],
-  .stl-theme-dark {
-    color-scheme: dark;
-    background: var(--stl-color-background);
-    color: var(--stl-color-foreground);
-  }
-  :root[data-theme=light],
-  .stl-theme-light {
-    color-scheme: light;
-    background: var(--stl-color-background);
-    color: var(--stl-color-foreground);
-  }
-}
-/* Semantic color roles */
-@layer stl-ui.tokens {
-  :root {
-    --stl-color-link-foreground: var(--stl-color-accent-foreground);
-    --stl-color-text-selection: var(--stl-color-accent-inverse-background);
-  }
-}
 .stl-ui-button {
-  height: 32px;
-  padding: 8px 10px;
   border-radius: var(--stl-ui-layout-border-radius-sml);
-  line-height: 150%;
+  height: 32px;
   font-weight: 500;
+  line-height: 150%;
   font-size: var(--stl-typography-text-body-sm);
   font-family: var(--stl-typography-font);
-
   cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 2px;
   white-space: nowrap;
-  flex-shrink: 0;
-
-  border: 1px solid transparent;
   color: var(--stl-color-inverse-foreground);
   background-color: var(--stl-color-inverse-background);
+  border: 1px solid #0000;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  gap: 2px;
+  padding: 8px 10px;
+  display: inline-flex;
 
   &:hover {
     background-color: var(--stl-color-inverse-background-hover);
@@ -445,11 +379,10 @@ body {
   }
 }
 
-/* --- COLOR VARIANTS ---  */
-
 .stl-ui-button--accent {
   color: var(--stl-color-accent-inverse-foreground);
   background-color: var(--stl-color-accent-inverse-background);
+
   &:hover {
     background-color: var(--stl-color-accent-inverse-background-hover);
   }
@@ -458,9 +391,11 @@ body {
 .stl-ui-button--accent-muted {
   color: var(--stl-color-accent-foreground);
   background-color: var(--stl-color-accent-muted-background);
+
   &:hover {
     background-color: var(--stl-color-accent-muted-background-hover);
   }
+
   &.stl-ui-button--with-border {
     border-color: var(--stl-color-accent-border);
   }
@@ -469,9 +404,11 @@ body {
 .stl-ui-button--muted {
   color: var(--stl-color-foreground);
   background-color: var(--stl-color-muted-background);
+
   &:hover {
     background-color: var(--stl-color-muted-background-hover);
   }
+
   &.stl-ui-button--with-border {
     border-color: var(--stl-color-border);
   }
@@ -481,19 +418,21 @@ body {
   color: var(--stl-color-foreground);
   background-color: var(--stl-color-ui-background);
   border-color: var(--stl-color-border);
+
   &:hover {
-    background:
-      linear-gradient(var(--stl-color-ui-background-hover), var(--stl-color-ui-background-hover)),
+    background: linear-gradient(var(--stl-color-ui-background-hover), var(--stl-color-ui-background-hover)),
       linear-gradient(var(--stl-color-ui-background), var(--stl-color-ui-background));
   }
 }
 
 .stl-ui-button--ghost {
   color: var(--stl-color-foreground);
-  background-color: transparent;
+  background-color: #0000;
+
   &:hover {
     background-color: var(--stl-color-background-hover);
   }
+
   &.stl-ui-button--with-border {
     border-color: var(--stl-color-border);
   }
@@ -502,6 +441,7 @@ body {
 .stl-ui-button--success {
   color: var(--stl-color-green-inverse-foreground);
   background-color: var(--stl-color-green-inverse-background);
+
   &:hover {
     background-color: var(--stl-color-green-inverse-background-hover);
   }
@@ -510,37 +450,31 @@ body {
 .stl-ui-button--destructive {
   color: var(--stl-color-red-inverse-foreground);
   background-color: var(--stl-color-red-inverse-background);
+
   &:hover {
     background-color: var(--stl-color-red-inverse-background-hover);
   }
 }
 
-/* --- LOADING STATE --- */
-
-/**
- * When loading, set aria-disabled="true" and aria-label="<Doing action...>"
- * Don't use disabled, it loses focus.
- */
-
 .stl-ui-button--loading {
   -webkit-text-fill-color: transparent;
   position: relative;
 
   & * {
-    color: transparent;
+    color: #0000;
   }
 
-  &::before {
-    content: '';
-    animation: stl-ui-button--loading-spin 1s linear infinite;
-    position: absolute;
+  &:before {
+    content: "";
+    background: currentColor;
     width: 16px;
     height: 16px;
-    mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWxvYWRlci1jaXJjbGUtaWNvbiBsdWNpZGUtbG9hZGVyLWNpcmNsZSI+PHBhdGggZD0iTTIxIDEyYTkgOSAwIDEgMS02LjIxOS04LjU2Ii8+PC9zdmc+');
-    mask-size: contain;
+    animation: 1s linear infinite stl-ui-button--loading-spin;
+    position: absolute;
+    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWxvYWRlci1jaXJjbGUtaWNvbiBsdWNpZGUtbG9hZGVyLWNpcmNsZSI+PHBhdGggZD0iTTIxIDEyYTkgOSAwIDEgMS02LjIxOS04LjU2Ii8+PC9zdmc+");
     mask-position: center;
+    mask-size: contain;
     mask-repeat: no-repeat;
-    background: currentColor;
   }
 }
 
@@ -550,111 +484,94 @@ body {
   }
 }
 
-/* --- SIZE VARIANTS ---  */
 .stl-ui-button--size-sm {
-  height: 24px;
-  padding: 0 6px;
   border-radius: var(--stl-ui-layout-border-radius-xs);
-  line-height: 100%;
+  height: 24px;
   font-weight: 500;
+  line-height: 100%;
   font-size: var(--stl-typography-text-body-xs);
+  padding: 0 6px;
 }
 
 .stl-ui-button--size-lg {
-  height: 40px;
-  padding: 8px 14px;
   border-radius: var(--stl-ui-layout-border-radius);
-  line-height: 150%;
+  height: 40px;
   font-weight: 500;
+  line-height: 150%;
   font-size: var(--stl-typography-text-body);
+  padding: 8px 14px;
 }
 
-/* --- ICONS ---  */
 .stl-ui-button__icon {
   flex-shrink: 0;
-  display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
+  display: flex;
 
-  svg {
+  & svg {
     margin-top: 0;
   }
 }
 
-/* Left Icon */
 .stl-ui-button:has(.stl-ui-button__icon:first-child) .stl-ui-button__icon {
   margin-left: -4px;
   margin-right: 4px;
 }
 
 .stl-ui-button:has(.stl-ui-button__icon:last-child) .stl-ui-button__icon {
-  /* Right Icon */
-  margin-right: -4px;
   margin-left: 4px;
+  margin-right: -4px;
 
-  /* Right & Left Icon */
   &:first-child {
     margin-left: -4px;
     margin-right: 4px;
   }
 }
 
-/* Only Icon */
-.stl-ui-button:not(:has(.stl-ui-button-label)):has(.stl-ui-button__icon:last-child):has(
-    .stl-ui-button__icon:first-child
-  ) {
-  aspect-ratio: 1 / 1;
+.stl-ui-button:not(:has(.stl-ui-button-label)):has(.stl-ui-button__icon:last-child):has(.stl-ui-button__icon:first-child) {
+  aspect-ratio: 1;
 
-  .stl-ui-button__icon {
+  & .stl-ui-button__icon {
     margin-left: -4px;
     margin-right: -4px;
   }
 }
 
-/* --- LINKS ---  */
-
 a.stl-ui-button {
-  text-decoration: none;
   text-align: center;
+  text-decoration: none;
 }
 
 .stl-ui-dropdown {
   --stl-ui-dropdown-button-color: var(--stl-color-foreground);
   --stl-ui-dropdown-button-background-color: var(--stl-color-ui-background);
   --stl-ui-dropdown-button-border-color: var(--stl-color-border);
-
   --stl-ui-dropdown-button-border-radius: var(--stl-ui-layout-border-radius-sml);
   --stl-ui-dropdown-button-font-size: var(--stl-typography-scale-sm);
-
   --stl-ui-dropdown-button-height: 2rem;
-  --stl-ui-dropdown-button-padding-inline: calc(0.75rem - 1px);
+  --stl-ui-dropdown-button-padding-inline: calc(.75rem - 1px);
   --stl-ui-dropdown-button-line-height: 100%;
   --stl-ui-dropdown-button-font-weight: 500;
-
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-
   color: var(--stl-ui-dropdown-button-color);
-  gap: 0;
   font-size: var(--stl-ui-dropdown-button-font-size);
+  align-items: center;
+  gap: 0;
+  display: inline-flex;
+  position: relative;
 
-  hr {
+  & hr {
     --stl-ui-dropdown-button__divider-height: 1px;
     --stl-ui-dropdown-button__divider-color: var(--stl-color-border);
-
     height: var(--stl-ui-dropdown-button__divider-height);
     background-color: var(--stl-ui-dropdown-button__divider-color);
     border: none;
-
-    margin: 4px 0;
     width: calc(100% + 8px);
+    margin: 4px 0;
     transform: translateX(-4px);
   }
 
-  .stl-ui-dropdown__button {
+  & .stl-ui-dropdown__button {
     background-color: var(--stl-ui-dropdown-button-background-color);
-
     border: 1px solid var(--stl-ui-dropdown-button-border-color);
     border-radius: var(--stl-ui-dropdown-button-border-radius);
     height: var(--stl-ui-dropdown-button-height);
@@ -662,54 +579,52 @@ a.stl-ui-button {
     line-height: var(--stl-ui-dropdown-button-line-height);
     font-weight: var(--stl-ui-dropdown-button-font-weight);
     cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     color: inherit;
+    justify-content: center;
+    align-items: center;
+    display: flex;
 
     &:focus {
-      outline: 1px auto Highlight;
+      outline: 1px auto highlight;
     }
 
     &:hover {
       background-color: var(--stl-color-ui-background-hover);
     }
 
-    .stl-ui-dropdown__trigger-icon {
-      margin-right: -4px;
+    & .stl-ui-dropdown__trigger-icon {
+      justify-content: center;
+      align-items: center;
       margin-left: 4px;
+      margin-right: -4px;
       display: flex;
-      align-items: center;
-      justify-content: center;
     }
   }
 
-  .stl-ui-dropdown__icon {
-    display: flex;
-    align-items: center;
+  & .stl-ui-dropdown__icon {
     justify-content: center;
+    align-items: center;
+    display: flex;
 
-    svg {
+    & svg {
       width: 16px;
       height: 16px;
     }
   }
 
-  /**
-   *  Dropdown Button
-   */
-  .stl-ui-dropdown-button--action {
-    display: flex;
-    align-items: center;
-    gap: 8px;
+  & .stl-ui-dropdown-button--action {
+    border-right-width: 0;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
-    border-right-width: 0;
+    align-items: center;
+    gap: 8px;
+    display: flex;
 
     &:hover {
       background-color: var(--stl-color-ui-background-hover);
       z-index: 1;
       border-right-width: 1px;
+
       & + .stl-ui-dropdown-button__trigger {
         border-left-width: 0;
       }
@@ -721,7 +636,7 @@ a.stl-ui-button {
     }
   }
 
-  .stl-ui-dropdown-button__trigger {
+  & .stl-ui-dropdown-button__trigger {
     border-radius: 0;
     border-top-right-radius: var(--stl-ui-dropdown-button-border-radius);
     border-bottom-right-radius: var(--stl-ui-dropdown-button-border-radius);
@@ -731,128 +646,113 @@ a.stl-ui-button {
     }
   }
 
-  .stl-ui-dropdown__trigger-selected {
-    display: flex;
+  & .stl-ui-dropdown__trigger-selected {
     align-items: center;
     gap: 8px;
+    display: flex;
   }
 
-  /**
-   *  Dropdown Menu
-   */
-  .stl-ui-dropdown-menu {
+  & .stl-ui-dropdown-menu {
     --stl-ui-dropdown-menu-background-color: var(--stl-color-ui-background);
     --stl-ui-dropdown-menu-border-color: var(--stl-color-border);
     --stl-ui-dropdown-menu-box-shadow: 0px 4px 4px -2px #00000014;
     --stl-ui-dropdown-menu-border-radius: var(--stl-ui-layout-border-radius-sml);
-
-    /* opaque background with sometimes-transparent color on top in image layer*/
     background-color: var(--stl-color-background);
-    background-image: linear-gradient(
-      to right,
+    background-image: linear-gradient(to right,
       var(--stl-ui-dropdown-menu-background-color),
-      var(--stl-ui-dropdown-menu-background-color)
-    );
-
+      var(--stl-ui-dropdown-menu-background-color));
     border: 1px solid var(--stl-ui-dropdown-menu-border-color);
     box-shadow: var(--stl-ui-dropdown-menu-box-shadow);
     border-radius: var(--stl-ui-dropdown-menu-border-radius);
-
-    position: absolute;
-    right: 0;
     z-index: 1000;
-    min-width: 100%;
     width: max-content;
+    min-width: 100%;
     padding: 4px;
     display: none;
+    position: absolute;
+    right: 0;
 
     &.stl-ui-dropdown-menu--above {
+      margin-bottom: 4px;
       top: auto;
       bottom: 100%;
-      margin-bottom: 4px;
     }
 
     &.stl-ui-dropdown-menu--below {
+      margin-top: 4px;
       top: 100%;
       bottom: auto;
-      margin-top: 4px;
     }
 
-    &[data-state='open'] {
+    &[data-state="open"] {
       display: block;
     }
 
-    .stl-ui-dropdown-menu__item {
+    & .stl-ui-dropdown-menu__item {
       --stl-ui-dropdown-menu__item-border-radius: var(--stl-ui-dropdown-button-border-radius);
       --stl-ui-dropdown-menu__item-height: var(--stl-ui-dropdown-button-height);
       --stl-ui-dropdown-menu__item-line-height: var(--stl-ui-dropdown-button-line-height);
       --stl-ui-dropdown-menu__item-hover-background-color: var(--stl-color-ui-background-hover);
-
       border-radius: var(--stl-ui-dropdown-menu__item-border-radius);
       height: var(--stl-ui-dropdown-menu__item-height);
       line-height: var(--stl-ui-dropdown-menu__item-line-height);
-
-      background: transparent;
-      border: none;
-
-      padding: 8px;
       cursor: pointer;
-      display: flex;
-      align-items: center;
+      background: none;
+      border: none;
       justify-content: space-between;
+      align-items: center;
       gap: 16px;
       width: 100%;
+      padding: 8px;
+      display: flex;
 
-      &:hover,
-      &:focus-visible {
+      &:hover, &:focus-visible {
         background-color: var(--stl-ui-dropdown-menu__item-hover-background-color);
       }
 
-      &:hover,
-      &:focus-visible,
-      &:focus {
+      &:hover, &:focus-visible, &:focus {
         color: var(--stl-color-foreground);
       }
 
       &.stl-ui-dropdown-menu__item-link {
-        display: flex;
-        align-items: center;
         justify-content: space-between;
+        align-items: center;
         gap: 16px;
         width: 100%;
+        display: flex;
 
         &:hover {
           color: var(--stl-color-foreground);
         }
       }
 
-      .stl-ui-dropdown-menu__item-icon {
+      & .stl-ui-dropdown-menu__item-icon {
         display: flex;
       }
 
-      .stl-ui-dropdown-menu__item-content {
-        display: flex;
+      & .stl-ui-dropdown-menu__item-content {
         align-items: center;
         gap: 8px;
+        display: flex;
       }
 
-      .stl-ui-dropdown-menu__item-text {
+      & .stl-ui-dropdown-menu__item-text {
         white-space: nowrap;
       }
 
-      .stl-ui-dropdown-menu__item-text--subtle {
+      & .stl-ui-dropdown-menu__item-text--subtle {
         color: var(--stl-color-foreground-muted);
       }
 
-      strong {
+      & strong {
         color: var(--stl-color-foreground);
         font-weight: 500;
       }
 
-      .stl-ui-dropdown-menu__item-subtle-icon {
-        --stl-ui-dropdown-menu__item-subtle-icon-color: rgb(from var(--stl-color-foreground) r g b / 0.25);
+      & .stl-ui-dropdown-menu__item-subtle-icon {
+        --stl-ui-dropdown-menu__item-subtle-icon-color: rgb(from var(--stl-color-foreground) r g b / .25);
 
-        svg {
+        & svg {
           color: var(--stl-ui-dropdown-menu__item-subtle-icon-color);
         }
       }
@@ -864,36 +764,33 @@ a.stl-ui-button {
   --stl-ui-callout-background-color: var(--stl-color-faint-background);
   --stl-ui-callout-border-color: var(--stl-color-border);
   --stl-ui-callout-accent-color: var(--stl-color-foreground);
-
   border: 1px solid var(--stl-ui-callout-border-color);
   background-color: var(--stl-ui-callout-background-color);
   border-radius: var(--stl-ui-layout-border-radius);
-  padding: 12px;
   line-height: var(--stl-typography-line-height);
   font-weight: 400;
   font-size: var(--stl-typography-text-body);
   color: var(--stl-color-foreground);
-
-  display: flex;
   align-items: flex-start;
   gap: 8px;
+  padding: 12px;
+  display: flex;
 
-  :where(a, strong) {
+  & :where(a, strong) {
     color: var(--stl-ui-callout-strong-color, var(--stl-ui-callout-accent-color));
   }
-  :where(a) {
-    text-decoration-color: rgba(from currentColor r g b / 0.4);
-    transition: text-decoration-color 0.1s ease;
+
+  & :where(a) {
+    text-decoration-color: rgba(from currentColor r g b / .4);
+    transition: text-decoration-color .1s;
+
     &:hover {
-      text-decoration-color: rgba(from currentColor r g b / 0.8);
+      text-decoration-color: rgba(from currentColor r g b / .8);
     }
   }
 
-  ::selection {
-    background-color: light-dark(
-      rgb(from var(--stl-ui-callout-background-color) r g b / 0.2),
-      rgb(from var(--stl-ui-callout-background-color) r g b / 0.35)
-    );
+  & ::selection {
+    background-color: light-dark(rgb(from var(--stl-ui-callout-background-color) r g b / .2), rgb(from var(--stl-ui-callout-background-color) r g b / .35));
     color: var(--stl-color-foreground);
   }
 }
@@ -940,7 +837,7 @@ a.stl-ui-button {
   flex-shrink: 0;
   width: 1em;
   height: 1em;
-  margin: calc((1lh - 1em) / 2);
+  margin: calc(.5lh - .5em);
 }
 
 .stl-ui-callout__content {
@@ -952,19 +849,6 @@ a.stl-ui-button {
   }
 }
 
-/* revert starlight details styles */
-@layer starlight.content {
-  /* artificially increase specificity to outcompete selectors in the same layer whose styles we want to revert */
-  .stl-ui-prose .sl-markdown-content.sl-markdown-content.sl-markdown-content {
-    details,
-    summary,
-    summary::before,
-    summary::marker {
-      all: revert-layer;
-    }
-  }
-}
-
 .stl-ui-accordion {
   --stl-ui-accordion-padding: 12px;
   --stl-ui-accordion-content-padding-bottom: 4px;
@@ -974,60 +858,42 @@ a.stl-ui-button {
   --stl-ui-accordion-row-gap: 8px;
   --stl-ui-accordion-summary-column-gap: 8px;
   --stl-ui-accordion-border-radius: var(--stl-ui-layout-border-radius);
-  /* left inset to make content line up with summary content (after chevron) */
-  --stl-ui--internal--accordion-padding-start: calc(
-    var(--stl-ui-accordion-padding) + var(--stl-ui-accordion-marker-size) +
-      var(--stl-ui-accordion-marker-margin) * 2 + var(--stl-ui-accordion-summary-column-gap)
-  );
-
+  --stl-ui--internal--accordion-padding-start: calc(var(--stl-ui-accordion-padding) + var(--stl-ui-accordion-marker-size) +
+      var(--stl-ui-accordion-marker-margin) * 2 + var(--stl-ui-accordion-summary-column-gap));
   background-color: var(--stl-color-ui-background);
   border: 1px solid var(--stl-color-border);
   border-radius: var(--stl-ui-accordion-border-radius);
   font-size: var(--stl-typography-text-body);
-
   padding: var(--stl-ui-accordion-padding);
-  /* indent content to line up with left edge of summary content */
   padding-inline-start: var(--stl-ui--internal--accordion-padding-start);
 
   & > .stl-ui-accordion__summary {
-    display: block;
-    list-style: none;
-
-    /* summary extends to the edges of the element in order to increase click target */
     padding: var(--stl-ui-accordion-padding);
-    padding-inline-start: var(--stl-ui--internal--accordion-padding-start);
     margin: calc(-1 * var(--stl-ui-accordion-padding));
-    margin-inline-start: calc(-1 * var(--stl-ui--internal--accordion-padding-start));
-
     cursor: pointer;
-    font-weight: 500;
-
     border-radius: var(--stl-ui-accordion-border-radius);
+    margin-inline-start: calc(-1 * var(--stl-ui--internal--accordion-padding-start));
+    padding-inline-start: var(--stl-ui--internal--accordion-padding-start);
+    font-weight: 500;
+    list-style: none;
+    display: block;
 
-    &::before {
-      content: '';
+    &:before {
+      content: "";
       width: var(--stl-ui-accordion-marker-size);
       height: var(--stl-ui-accordion-marker-size);
       margin: var(--stl-ui-accordion-marker-margin);
       background-color: var(--stl-ui-accordion-marker-color);
-      display: block;
-      position: absolute;
-      --stl-ui-accordion--internal--marker-width: calc(
-        var(--stl-ui-accordion-marker-size) + var(--stl-ui-accordion-marker-margin) * 2
-      );
-      --stl-ui-accordion--internal--summary-marker-transform: translateX(
-        calc(
-          -1 * var(--stl-ui-accordion--internal--marker-width) - var(--stl-ui-accordion-summary-column-gap)
-        )
-      );
+      --stl-ui-accordion--internal--marker-width: calc(var(--stl-ui-accordion-marker-size) + var(--stl-ui-accordion-marker-margin) * 2);
+      --stl-ui-accordion--internal--summary-marker-transform: translateX(calc(-1 * var(--stl-ui-accordion--internal--marker-width) - var(--stl-ui-accordion-summary-column-gap)));
       transform: var(--stl-ui-accordion--internal--summary-marker-transform);
-
-      --lucide-chevron-right: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb24tcmlnaHQtaWNvbiBsdWNpZGUtY2hldnJvbi1yaWdodCI+PHBhdGggZD0ibTkgMTggNi02LTYtNiIvPjwvc3ZnPg==');
+      --lucide-chevron-right: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb24tcmlnaHQtaWNvbiBsdWNpZGUtY2hldnJvbi1yaWdodCI+PHBhdGggZD0ibTkgMTggNi02LTYtNiIvPjwvc3ZnPg==");
       mask-image: var(--lucide-chevron-right);
+      transition: transform .1s ease-out;
+      display: block;
+      position: absolute;
       mask-size: contain;
       mask-repeat: no-repeat;
-
-      transition: transform 0.1s ease-out;
     }
 
     & > :first-child {
@@ -1040,23 +906,20 @@ a.stl-ui-button {
     padding-bottom: calc(var(--stl-ui-accordion-padding) + var(--stl-ui-accordion-content-padding-bottom));
 
     & > .stl-ui-accordion__summary {
-      /* padding-bottom shouldn’t extend beyond the row gap while open, i.e. we shouldn’t be negative-margin-placing content overlapping summary */
-      --stl-ui--internal--summary-padding-bottom: min(
-        var(--stl-ui-accordion-padding),
-        var(--stl-ui-accordion-row-gap)
-      );
+      --stl-ui--internal--summary-padding-bottom: min(var(--stl-ui-accordion-padding),
+        var(--stl-ui-accordion-row-gap));
       padding-bottom: var(--stl-ui--internal--summary-padding-bottom);
       margin-bottom: calc(var(--stl-ui-accordion-row-gap) - var(--stl-ui--internal--summary-padding-bottom));
-      border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
 
-      &::before {
+      &:before {
         transform: var(--stl-ui-accordion--internal--summary-marker-transform) rotate(90deg);
       }
     }
   }
 
-  &:has(> .stl-ui-accordion__summary:hover) {
+  &:has( > .stl-ui-accordion__summary:hover) {
     background-color: var(--stl-color-ui-background-hover);
   }
 
@@ -1065,23 +928,22 @@ a.stl-ui-button {
   }
 }
 
-/* Groups */
-
 .stl-ui-accordion-group {
-  & > .stl-ui-accordion:has(+ .stl-ui-accordion) {
-    border-bottom-left-radius: 0;
+  & > .stl-ui-accordion:has( + .stl-ui-accordion) {
     border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+
     & > .stl-ui-accordion__summary {
-      border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
     }
   }
 
   & > .stl-ui-accordion + .stl-ui-accordion {
-    margin-top: 0;
     border-top-width: 0;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
+    margin-top: 0;
 
     & > .stl-ui-accordion__summary {
       border-top-left-radius: 0;
@@ -1089,20 +951,19 @@ a.stl-ui-button {
     }
   }
 
-  /* Ensure the darker border always extends all the way around the active element, instead of
-   * leaving an inactive border-top */
-
-  .stl-ui-accordion:not(:hover, [open]):has(+ .stl-ui-accordion:hover) {
+  & .stl-ui-accordion:not(:hover, [open]):has( + .stl-ui-accordion:hover) {
     border-bottom-width: 0;
   }
-  .stl-ui-accordion:not(:hover, [open]) + .stl-ui-accordion:hover {
+
+  & .stl-ui-accordion:not(:hover, [open]) + .stl-ui-accordion:hover {
     border-top-width: 1px;
   }
 
-  .stl-ui-accordion:not([open]):has(+ .stl-ui-accordion[open]) {
+  & .stl-ui-accordion:not([open]):has( + .stl-ui-accordion[open]) {
     border-bottom-width: 0;
   }
-  .stl-ui-accordion:not([open]) + .stl-ui-accordion[open] {
+
+  & .stl-ui-accordion:not([open]) + .stl-ui-accordion[open] {
     border-top-width: 1px;
   }
 }
@@ -1114,203 +975,209 @@ a.stl-ui-button {
 .stl-ui-steps__step {
   --step-icon-width: 24px;
   --step-padding: 12px;
-  list-style: none;
-  position: relative;
   padding: var(--step-padding);
-  /* Space for the custom marker */
   padding-left: calc(var(--step-icon-width) + var(--step-padding));
   margin: 0;
+  list-style: none;
+  position: relative;
 
-  &::before {
+  &:before {
     content: counter(list-item);
-    position: absolute;
     left: 0;
     top: var(--step-padding);
     width: var(--step-icon-width);
     height: var(--step-icon-width);
     border: 1px solid var(--stl-color-border);
-    border-radius: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     background: var(--stl-color-bg);
     z-index: 1;
     font-size: var(--stl-typography-text-body-xs);
+    border-radius: 100%;
+    justify-content: center;
+    align-items: center;
     font-style: normal;
     font-weight: 600;
     line-height: 100%;
+    display: flex;
+    position: absolute;
   }
 
-  &::after {
-    content: '';
-    position: absolute;
-    left: calc(var(--step-icon-width) / 2 - 0.5px);
+  &:after {
+    content: "";
+    left: calc(var(--step-icon-width) / 2 - .5px);
     top: calc(var(--step-icon-width) + var(--step-padding));
     bottom: calc(-1 * (var(--step-padding)));
-    width: 1px;
     background: var(--stl-color-border);
+    width: 1px;
+    position: absolute;
   }
 
   &:last-child {
     padding-bottom: 0;
 
-    /* No line after the last step */
-    &::after {
+    &:after {
       display: none;
     }
   }
 }
+
 .stl-ui-steps__step-title {
   font-weight: 600;
 }
 
 .stl-ui-steps__step-content {
-  margin-bottom: 0;
   margin-top: 4px;
+  margin-bottom: 0;
 }
 
 .stl-ui-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.125em;
-
-  font-weight: 500;
   letter-spacing: normal;
-
-  border-width: 1px;
   border-style: solid;
+  border-width: 1px;
+  align-items: center;
+  gap: .125em;
+  font-weight: 500;
+  display: inline-flex;
 
-  /* sizes */
   &.stl-ui-badge--size-sm {
     height: 20px;
     font-size: var(--stl-typography-scale-xs);
-    padding: 0 2px;
     border-radius: var(--stl-ui-layout-border-radius-xs);
     --stl-ui-badge-icon-size: 14px;
+    padding: 0 2px;
   }
-  &,
-  &.stl-ui-badge--size-md {
+
+  &, &.stl-ui-badge--size-md {
     height: 24px;
     font-size: var(--stl-typography-scale-sm);
-    padding: 0 4px;
     border-radius: var(--stl-ui-layout-border-radius-xs);
     --stl-ui-badge-icon-size: 14px;
+    padding: 0 4px;
   }
+
   &.stl-ui-badge--size-lg {
     height: 32px;
     font-size: var(--stl-typography-scale-md);
-    padding: 0 6px;
     border-radius: var(--stl-ui-layout-border-radius-sml);
     --stl-ui-badge-icon-size: 16px;
+    padding: 0 6px;
   }
 
-  /* intents */
   &.stl-ui-badge--intent-none {
     background-color: var(--stl-color-ui-background);
     color: var(--stl-color-foreground-muted);
     --stl-ui-badge-icon-opacity: var(--stl-opacity-level-040);
     border-color: var(--stl-color-border);
   }
+
   &.stl-ui-badge--intent-info {
     background-color: var(--stl-color-muted-background);
     color: var(--stl-color-foreground);
     border-color: var(--stl-color-border);
+
     &.stl-ui-badge--solid {
       background-color: var(--stl-color-inverse-background);
       color: var(--stl-color-inverse-foreground);
       --stl-ui-badge-icon-opacity: 1;
     }
   }
-  &.stl-ui-badge--intent-success,
-  &.stl-ui-badge--http-get {
+
+  &.stl-ui-badge--intent-success, &.stl-ui-badge--http-get {
     background-color: var(--stl-color-green-muted-background);
     color: var(--stl-color-green-foreground);
     border-color: var(--stl-color-green-border);
+
     &.stl-ui-badge--solid {
       background-color: var(--stl-color-green-inverse-background);
       color: var(--stl-color-green-inverse-foreground);
     }
   }
+
   &.stl-ui-badge--intent-warning {
     background-color: var(--stl-color-yellow-muted-background);
     color: var(--stl-color-yellow-foreground);
     border-color: var(--stl-color-yellow-border);
+
     &.stl-ui-badge--solid {
       background-color: var(--stl-color-yellow-inverse-background);
       color: var(--stl-color-yellow-inverse-foreground);
     }
   }
-  &.stl-ui-badge--intent-danger,
-  &.stl-ui-badge--http-delete {
+
+  &.stl-ui-badge--intent-danger, &.stl-ui-badge--http-delete {
     background-color: var(--stl-color-red-muted-background);
     color: var(--stl-color-red-foreground);
     border-color: var(--stl-color-red-border);
+
     &.stl-ui-badge--solid {
       background-color: var(--stl-color-red-inverse-background);
       color: var(--stl-color-red-inverse-foreground);
     }
   }
-  &.stl-ui-badge--intent-note,
-  &.stl-ui-badge--http-post {
+
+  &.stl-ui-badge--intent-note, &.stl-ui-badge--http-post {
     background-color: var(--stl-color-blue-muted-background);
     color: var(--stl-color-blue-foreground);
     border-color: var(--stl-color-blue-border);
+
     &.stl-ui-badge--solid {
       background-color: var(--stl-color-blue-inverse-background);
       color: var(--stl-color-blue-inverse-foreground);
     }
   }
+
   &.stl-ui-badge--intent-tip {
     background-color: var(--stl-color-purple-muted-background);
     color: var(--stl-color-purple-foreground);
     border-color: var(--stl-color-purple-border);
+
     &.stl-ui-badge--solid {
       background-color: var(--stl-color-purple-inverse-background);
       color: var(--stl-color-purple-inverse-foreground);
     }
   }
+
   &.stl-ui-badge--intent-accent {
     background-color: var(--stl-color-accent-muted-background);
     color: var(--stl-color-accent-foreground);
     border-color: var(--stl-color-accent-border);
+
     &.stl-ui-badge--solid {
       background-color: var(--stl-color-accent-inverse-background);
       color: var(--stl-color-accent-inverse-foreground);
     }
   }
-  &.stl-ui-badge--http-put,
-  &.stl-ui-badge--http-patch {
+
+  &.stl-ui-badge--http-put, &.stl-ui-badge--http-patch {
     background-color: var(--stl-color-orange-muted-background);
     color: var(--stl-color-orange-foreground);
     border-color: var(--stl-color-orange-border);
+
     &.stl-ui-badge--solid {
       background-color: var(--stl-color-orange-inverse-background);
       color: var(--stl-color-orange-inverse-foreground);
     }
   }
 
-  /* Text content */
-  .stl-ui-badge__content {
+  & .stl-ui-badge__content {
+    padding: .25em;
     display: inline-block;
-    padding: 0.25em;
   }
 
-  /* Icons */
-  svg {
-    flex-shrink: 0;
-    display: inline-block;
+  & svg {
     color: rgb(from currentColor r g b / 1);
     opacity: var(--stl-ui-badge-icon-opacity, 1);
     width: var(--stl-ui-badge-icon-size);
     height: var(--stl-ui-badge-icon-size);
+    flex-shrink: 0;
+    display: inline-block;
   }
-  &:has(> svg:only-child) {
-    padding: 0;
+
+  &:has( > svg:only-child) {
     aspect-ratio: 1;
     justify-content: center;
+    padding: 0;
   }
 
-  /* HTTP */
   &.stl-ui-badge--http {
     font-family: var(--stl-typography-font-mono);
     font-variant-numeric: tabular-nums;
@@ -1318,45 +1185,34 @@ a.stl-ui-button {
   }
 }
 
-/* design system variables */
-
-/* components */
-
-
-/* Resets */
 .stldocs-root {
+  letter-spacing: -.01em;
   line-height: 1.5;
-  letter-spacing: -0.01em;
 
-  a:not(.stl-ui-callout a) {
+  & a:not(.stl-ui-callout a) {
     color: inherit;
     cursor: pointer;
     text-decoration: none;
   }
 
-  *,
-  *::before,
-  *::after {
+  & *, & :before, & :after {
     box-sizing: border-box;
   }
 
-  /* Markdown content should get prose styling */
-  :where(h1, h2, h3, h4, h5):where(:not(.stldocs-markdown, .stldocs-markdown *)) {
-    display: block;
+  & :where(h1, h2, h3, h4, h5):where(:not(.stldocs-markdown, .stldocs-markdown *)) {
     color: var(--stl-color-foreground);
     font-weight: 500;
     line-height: var(--stl-typography-line-height-heading);
     font-family: var(--stl-typography-font-heading);
+    display: block;
   }
 
-  display: block;
   margin: 0;
+  display: block;
 }
 
 .sl-markdown-content {
-  .stldocs-root
-    :not(a, strong, em, del, span, input, code, br)
-    + :not(a, strong, em, del, span, input, code, br, :where(.not-content *)) {
+  & .stldocs-root :not(a, strong, em, del, span, input, code, br) + :not(a, strong, em, del, span, input, code, br, :where(.not-content *)) {
     margin-top: 0;
   }
 }
@@ -1364,12 +1220,10 @@ a.stl-ui-button {
 :root {
   --stldocs-color-selected: var(--stl-color-muted-background);
   --stldocs-color-bg-inline-code: var(--stl-color-muted-background);
-
   --stldocs-content-width: 720px;
   --stldocs-content-padding: 16px;
   --stldocs-content-padding-inline: var(--stldocs-content-padding);
   --stldocs-content-padding-block: var(--stldocs-content-padding);
-
   --stldocs-color-http-get-bg: var(--stl-color-green-muted-background);
   --stldocs-color-http-get: var(--stl-color-green-foreground);
   --stldocs-color-http-put-bg: var(--stl-color-orange-muted-background);
@@ -1378,156 +1232,137 @@ a.stl-ui-button {
   --stldocs-color-http-post: var(--stl-color-blue-foreground);
   --stldocs-color-http-delete-bg: var(--stl-color-red-muted-background);
   --stldocs-color-http-delete: var(--stl-color-red-foreground);
-
   --stldocs-syntax-color-green: var(--stl-color-green-foreground);
   --stldocs-syntax-color-orange: var(--stl-color-orange-foreground);
   --stldocs-syntax-color-purple: var(--stl-color-purple-foreground);
   --stldocs-syntax-color-blue: var(--stl-color-blue-foreground);
-
   --stldocs-expander-margin-shift: 24px;
   --stldocs-expander-right-margin: 8px;
   --stldocs-title-padding-y: 2.5rem;
   --stldocs-color-backdrop-overlay: var(--stl-color-muted-background);
 }
 
-/* Design System Defaults */
 .stldocs-root {
   font-family: var(--stl-typography-font);
   color: var(--stl-color-foreground);
-  letter-spacing: -0.01em;
+  letter-spacing: -.01em;
 
-  :where(h1) {
+  & :where(h1) {
     font-size: var(--stl-typography-text-h1);
-    letter-spacing: -0.03em;
+    letter-spacing: -.03em;
   }
 
-  :where(h2) {
+  & :where(h2) {
     font-size: var(--stl-typography-text-h2);
-    letter-spacing: -0.03em;
+    letter-spacing: -.03em;
   }
 
-  :where(h3) {
+  & :where(h3) {
     font-size: var(--stl-typography-text-h3);
-    letter-spacing: -0.02em;
+    letter-spacing: -.02em;
   }
 
-  :where(h4) {
+  & :where(h4) {
     font-size: var(--stl-typography-text-h4);
-    letter-spacing: -0.02em;
+    letter-spacing: -.02em;
   }
 
-  :where(h5) {
+  & :where(h5) {
     font-size: var(--stl-typography-text-h5);
-    letter-spacing: -0.02em;
+    letter-spacing: -.02em;
   }
 }
 
-/* Color mapping for types */
 .stldocs-root {
-  .stldocs-text-keyword {
+  & .stldocs-text-keyword {
     color: var(--stl-color-foreground-muted);
   }
 
-  .stldocs-property-type,
-  .stldocs-property-declaration,
-  .stldocs-type:not(.stldocs-property-typename .stldocs-type) {
+  & .stldocs-property-type, & .stldocs-property-declaration, & .stldocs-type:not(.stldocs-property-typename .stldocs-type) {
     font-family: var(--stl-typography-font-mono);
 
-    .stldocs-type-keyword {
+    & .stldocs-type-keyword {
       color: var(--stldocs-syntax-color-orange);
     }
 
-    .stldocs-type-string {
+    & .stldocs-type-string {
       color: var(--stldocs-syntax-color-green);
     }
 
-    .stldocs-type-brace,
-    .stldocs-type-bracket,
-    .stldocs-type-plain,
-    .stldocs-text-operator,
-    .stldocs-text-punctuation,
-    .stldocs-truncation,
-    .stldocs-type-array {
+    & .stldocs-type-brace, & .stldocs-type-bracket, & .stldocs-type-plain, & .stldocs-text-operator, & .stldocs-text-punctuation, & .stldocs-truncation, & .stldocs-type-array {
       color: var(--stl-color-foreground-reduced);
     }
 
-    .stldocs-type-plain {
+    & .stldocs-type-plain {
       font-family: var(--stl-typography-font);
     }
 
-    .stldocs-type-reference {
+    & .stldocs-type-reference {
       color: var(--stldocs-syntax-color-blue);
       font-weight: 600;
-      a:hover {
+
+      & a:hover {
         text-decoration: underline;
       }
     }
 
-    .stldocs-literal-string {
+    & .stldocs-literal-string {
       color: var(--stldocs-syntax-color-green);
     }
 
-    .stldocs-literal-numeric {
+    & .stldocs-literal-numeric {
       color: var(--stldocs-syntax-color-orange);
     }
 
-    .stldocs-text-identifier {
+    & .stldocs-text-identifier {
       font-family: var(--stl-typography-font-mono);
       color: var(--stl-color-foreground);
     }
 
-    .stldocs-type-propertyname .stldocs-text-identifier {
+    & .stldocs-type-propertyname .stldocs-text-identifier {
       font-family: var(--stl-typography-font);
       font-weight: 600;
     }
   }
 
-  [data-stldocs-language='http'],
-  [data-stldocs-language='cli'] {
-    .stldocs-property-type,
-    .stldocs-property-declaration {
-      .stldocs-truncation,
-      .stldocs-type-array,
-      .stldocs-text-punctuation {
+  & [data-stldocs-language="http"], & [data-stldocs-language="cli"] {
+    & .stldocs-property-type, & .stldocs-property-declaration {
+      & .stldocs-truncation, & .stldocs-type-array, & .stldocs-text-punctuation {
         font-family: var(--stl-typography-font);
       }
     }
   }
 }
 
-/* HTTP Method Color Settings */
-.stldocs-root .stldocs-method-route,
-.stldocs-root .stldocs-sidebar-method {
-  [data-method='get'] {
+.stldocs-root .stldocs-method-route, .stldocs-root .stldocs-sidebar-method {
+  & [data-method="get"] {
     background: var(--stldocs-color-http-get-bg);
     color: var(--stldocs-color-http-get);
     border-color: var(--stldocs-color-http-get);
   }
 
-  [data-method='post'] {
+  & [data-method="post"] {
     background: var(--stldocs-color-http-post-bg);
     color: var(--stldocs-color-http-post);
     border-color: var(--stldocs-color-http-post);
   }
 
-  [data-method='patch'],
-  [data-method='put'] {
+  & [data-method="patch"], & [data-method="put"] {
     background: var(--stldocs-color-http-put-bg);
     color: var(--stldocs-color-http-put);
     border-color: var(--stldocs-color-http-put);
   }
 
-  [data-method='delete'] {
+  & [data-method="delete"] {
     background: var(--stldocs-color-http-delete-bg);
     color: var(--stldocs-color-http-delete);
     border-color: var(--stldocs-color-http-delete);
   }
 }
 
-/* Generic expand/collapse button */
 .stldocs-root .stldocs-expander {
-  &[data-stldocs-expander-muted='true'] {
-    .stldocs-expander-summary-icon {
+  &[data-stldocs-expander-muted="true"] {
+    & .stldocs-expander-summary-icon {
       visibility: hidden;
     }
 
@@ -1536,13 +1371,13 @@ a.stl-ui-button {
     }
   }
 
-  .stldocs-expander-summary {
+  & .stldocs-expander-summary {
     cursor: pointer;
     display: flex;
 
     & > .stldocs-expander-summary-icon {
       margin-right: 8px;
-      transform: translateX(-0.5px) translateY(-0.5px);
+      transform: translateX(-.5px) translateY(-.5px);
 
       & > .stldocs-icon {
         vertical-align: middle;
@@ -1556,11 +1391,9 @@ a.stl-ui-button {
     }
   }
 
-  &[open],
-  &[data-open='true'] {
+  &[open], &[data-open="true"] {
     & > .stldocs-expander-summary {
-      .stldocs-type-preview[data-stldocs-type-preview='properties']
-        :is(.stldocs-type-preview-content, .stldocs-type-brace) {
+      & .stldocs-type-preview[data-stldocs-type-preview="properties"] :is(.stldocs-type-preview-content, .stldocs-type-brace) {
         display: none;
       }
 
@@ -1582,13 +1415,14 @@ a.stl-ui-button {
         border-left: 1px solid var(--stl-color-border);
         padding-left: 16px;
 
-        .stldocs-expander {
+        & .stldocs-expander {
           margin-left: calc(-1 * var(--stldocs-expander-margin-shift));
           padding-right: var(--stldocs-expander-right-margin);
         }
-        /* move margin to .stldocs-property parent where possible to fix safari subgrid bug */
-        .stldocs-property:has(> .stldocs-expander) {
+
+        & .stldocs-property:has( > .stldocs-expander) {
           margin-left: calc(-1 * var(--stldocs-expander-margin-shift));
+
           & > .stldocs-expander {
             margin-left: 0;
           }
@@ -1597,65 +1431,62 @@ a.stl-ui-button {
     }
   }
 
-  /* makes a big perf difference in browser calculating layout, even though the UA should do this? */
-  &:not([open], [data-open='true']) .stldocs-expander-content {
+  &:not([open], [data-open="true"]) .stldocs-expander-content {
     display: none;
   }
 }
 
-/* Markdown content */
 .stldocs-root .stldocs-content {
-  a {
+  & a {
     color: var(--stl-color-link-foreground);
   }
 
-  code:not(pre code) {
+  & code:not(pre code) {
     font-family: var(--stl-typography-font-mono);
-    border-radius: 4px;
-    padding: 0 4px;
     background-color: var(--stldocs-color-bg-inline-code);
     word-break: break-all;
-    font-size: 0.84rem;
+    border-radius: 4px;
+    padding: 0 4px;
+    font-size: .84rem;
   }
 
-  strong {
+  & strong {
     font-weight: bold;
   }
 
-  em {
+  & em {
     font-style: italic;
   }
 
-  p {
-    display: block;
+  & p {
     margin: 0 0 1em;
+    display: block;
 
     &:last-child {
       margin: 0;
     }
   }
 
-  li {
-    margin-bottom: 0.25rem;
+  & li {
+    margin-bottom: .25rem;
     display: list-item;
   }
 
-  ol,
-  ul {
-    display: block;
+  & ol, & ul {
     list-style-type: initial;
+    margin-bottom: .8rem;
     margin-left: 2rem;
-    margin-bottom: 0.8rem;
+    display: block;
   }
 
-  ol {
+  & ol {
     list-style-type: decimal;
   }
 
-  hr {
-    margin-bottom: 16px;
+  & hr {
     border: none;
     border-bottom: 1px solid var(--stl-color-border);
+    margin-bottom: 16px;
   }
 }
 
@@ -1670,270 +1501,239 @@ a.stl-ui-button {
   }
 
   &.stldocs-input-disabled {
-    opacity: 0.5;
+    opacity: .5;
   }
 
-  input,
-  .stldocs-masked-input-display {
-    flex-grow: 1;
-    border: none;
-    background-color: transparent;
-    margin: 0.5rem;
-    font-size: 1rem;
+  & input, & .stldocs-masked-input-display {
     letter-spacing: initial;
     white-space: pre;
     contain: content;
+    background-color: #0000;
+    border: none;
+    flex-grow: 1;
+    margin: .5rem;
     padding: 0;
+    font-size: 1rem;
 
     &:focus {
       outline: none;
     }
   }
 
-  .stldocs-masked-input-wrapper {
-    &:focus-within .stldocs-masked-input-display,
-    &:not(:focus-within) input {
+  & .stldocs-masked-input-wrapper {
+    &:focus-within .stldocs-masked-input-display, &:not(:focus-within) input {
       opacity: 0;
     }
   }
 
-  .stldocs-masked-input-obscured {
-    -webkit-text-stroke: currentColor 0.2em;
+  & .stldocs-masked-input-obscured {
+    -webkit-text-stroke: currentColor .2em;
   }
 
-  .stldocs-icon {
-    margin: auto 0.25rem auto 0.75rem;
+  & .stldocs-icon {
+    margin: auto .25rem auto .75rem;
   }
 }
 
 .stldocs-root .stldocs-masked-input-wrapper {
-  display: flex;
+  font-family: var(--stl-typography-font-mono);
   flex-grow: 1;
+  display: flex;
   position: relative;
-  font-family: var(--stl-typography-font-mono);
 }
 
 .stldocs-root .stldocs-masked-input-display {
+  pointer-events: none;
+  align-items: center;
+  display: flex;
   position: absolute;
   inset: 0;
-  display: flex;
-  align-items: center;
-  pointer-events: none; /* so you can click through to the real input */
 }
 
 .stldocs-root .stldocs-listview {
   overflow-y: scroll;
 
-  .stldocs-listview-item:not(:last-child) {
+  & .stldocs-listview-item:not(:last-child) {
     border-bottom: 1px solid var(--stl-color-border);
   }
 
-  [data-stldocs-listview-selected='true'] > :first-child {
-    background:
-      linear-gradient(var(--stl-color-ui-background-hover), var(--stl-color-ui-background-hover)),
+  & [data-stldocs-listview-selected="true"] > :first-child {
+    background: linear-gradient(var(--stl-color-ui-background-hover), var(--stl-color-ui-background-hover)),
       linear-gradient(var(--stl-color-ui-background), var(--stl-color-ui-background));
-    border-radius: 0.5rem;
+    border-radius: .5rem;
   }
 }
 
 .stldocs-root {
-  .stldocs-tooltip-host {
+  & .stldocs-tooltip-host {
     display: inline-block;
   }
 
-  .stldocs-tooltip-content {
+  & .stldocs-tooltip-content {
     border: 1px solid var(--stl-color-border);
     background: var(--stl-color-background);
     border-radius: 8px;
-    padding: 0.2rem 0.4rem;
+    padding: .2rem .4rem;
 
-    * {
-      font-size: 0.8rem !important;
+    & * {
+      font-size: .8rem !important;
     }
 
-    position: absolute;
-
-    transition:
-      opacity 0.3s ease-in-out,
-      visibility 0.3s step-end 0.3s;
     visibility: hidden;
     opacity: 0;
-
     max-width: 400px;
     max-height: 300px;
+    transition: opacity .3s ease-in-out, visibility .3s step-end .3s;
+    position: absolute;
     overflow: auto;
 
-    .stldocs-property-description {
+    & .stldocs-property-description {
       display: none;
     }
   }
 
-  .stldocs-tooltip:hover .stldocs-tooltip-content {
-    transition-delay: 0s, 0s;
+  & .stldocs-tooltip:hover .stldocs-tooltip-content {
     visibility: visible;
     opacity: 1;
+    transition-delay: 0s, 0s;
   }
 }
 
 .stldocs-root {
-  .stldocs-breadcrumbs {
-    display: flex;
+  & .stldocs-breadcrumbs {
     align-items: center;
-    gap: 0.5rem;
+    gap: .5rem;
+    display: flex;
 
-    svg {
+    & svg {
       width: 1rem;
       min-width: 1rem;
       stroke: var(--stl-color-foreground-reduced);
-      opacity: 0.25;
+      opacity: .25;
       margin: 0;
     }
 
-    .stldocs-breadcrumbs-non-link,
-    .stldocs-breadcrumbs-link {
+    & .stldocs-breadcrumbs-non-link, & .stldocs-breadcrumbs-link {
       color: var(--stl-color-foreground-reduced);
       font-size: var(--stl-typography-scale-sm);
       line-height: 150%;
       text-decoration: none;
     }
 
-    .stldocs-breadcrumbs-link:hover {
-      text-decoration: underline;
+    & .stldocs-breadcrumbs-link:hover {
       color: var(--stl-color-foreground);
+      text-decoration: underline;
     }
 
-    .stldocs-breadcrumbs-item {
-      display: flex;
+    & .stldocs-breadcrumbs-item {
       align-items: center;
-      gap: 0.5rem;
+      gap: .5rem;
       margin: 0;
+      display: flex;
     }
   }
 }
 
 .stldocs-root .stldocs-expand-toggle {
   font-size: var(--stl-typography-scale-sm);
-  display: flex;
+  user-select: none;
   flex-grow: 1;
   justify-content: flex-end;
-  user-select: none;
+  display: flex;
 
-  &[data-stldocs-property-toggle-expanded='false'] {
-    .stldocs-expand-toggle-content:last-child {
+  &[data-stldocs-property-toggle-expanded="false"] {
+    & .stldocs-expand-toggle-content:last-child {
       display: none;
     }
   }
 
-  &[data-stldocs-property-toggle-expanded='true'] {
-    .stldocs-expand-toggle-content:first-child {
+  &[data-stldocs-property-toggle-expanded="true"] {
+    & .stldocs-expand-toggle-content:first-child {
       display: none;
     }
   }
 
-  .stldocs-expand-toggle-content {
+  & .stldocs-expand-toggle-content {
     cursor: pointer;
 
-    .stldocs-icon {
+    & .stldocs-icon {
       vertical-align: middle;
     }
   }
 }
 
-/* Deeplink button */
-
-/* Link is not inside <summary> because interactive content in <summary> considered harmful
- * Subgrid must be applied from the top-level .stldocs-property all the way down to where the
- * inline summary content is rendered, so that the link button can be positioned at the “end” of
- * the summary line without actually shrinking the <details> or summary element.
- */
 .stldocs-root .stldocs-property:has(.stldocs-deep-link-button) {
-  display: grid;
-  /* expander  |  summary content  |  deeplink */
-  grid-template-columns: auto minmax(0, max-content) 1fr;
   grid-template-rows: auto auto;
+  grid-template-columns: auto minmax(0, max-content) 1fr;
   gap: 0;
   width: 100%;
+  display: grid;
 
-  /* expander child */
   & > .stldocs-expander {
-    grid-column: 1 / -1;
-    grid-row: 1 / -1;
-
-    display: grid;
+    grid-area: 1 / 1 / -1 / -1;
     grid-template-columns: subgrid;
     grid-template-rows: subgrid;
+    display: grid;
 
     & > .stldocs-expander-summary {
-      grid-column: 1 / -1;
-      grid-row: 1;
-      display: grid;
+      grid-area: 1 / 1 / auto / -1;
       grid-template-columns: subgrid;
       grid-template-rows: subgrid;
+      display: grid;
+
       & > .stldocs-expander-summary-icon {
         grid-column: 1;
       }
+
       & > .stldocs-expander-summary-content {
         grid-column: 2;
       }
     }
 
-    &::details-content,
-    & > .stldocs-expander-content {
-      grid-row: 2;
-      grid-column: 2 / -1;
+    &::details-content, & > .stldocs-expander-content {
+      grid-area: 2 / 2 / auto / -1;
     }
   }
 
-  /* non-expanding child */
   & > .stldocs-property-info {
-    grid-column: 2;
-    grid-row: 1;
+    grid-area: 1 / 2;
   }
 
   & > .stldocs-deep-link-button {
-    grid-column: span 1 / -1;
-    grid-row: 1;
-    align-self: center;
-    justify-self: start;
-    margin-left: 0.25em;
-    display: none;
+    grid-area: 1 / span 1 / auto / -1;
+    place-self: center start;
     margin-top: -1rem;
     margin-bottom: -1rem;
-    animation: stldocs-deep-link-delay-enter 0.2s ease-out;
-    animation-delay: 0.3s;
-    animation-fill-mode: both;
+    margin-left: .25em;
+    animation: .2s ease-out .3s both stldocs-deep-link-delay-enter;
+    display: none;
 
-    svg {
+    & svg {
       width: 1em;
       height: 1em;
     }
   }
 
-  /* show link button when expander summary is hovered */
-  & > .stldocs-expander:has(> .stldocs-expander-summary:hover) + .stldocs-deep-link-button,
-  /* show link button when non-expander rows are hovered */
-  &:not(:has(> .stldocs-expander)):hover > .stldocs-deep-link-button,
-  /* keep it visible when it itself is hovered or focused */
-  & > .stldocs-deep-link-button:is(:hover, :focus) {
+  & > .stldocs-expander:has( > .stldocs-expander-summary:hover) + .stldocs-deep-link-button, &:not(:has( > .stldocs-expander)):hover > .stldocs-deep-link-button, & > .stldocs-deep-link-button:is(:hover, :focus) {
     display: flex;
   }
 }
 
 @keyframes stldocs-deep-link-delay-enter {
   from {
-    display: none;
     opacity: 0;
-    scale: 0.85;
+    display: none;
+    scale: .85;
   }
+
   to {
     opacity: 1;
-    scale: 0.99;
+    scale: .99;
   }
 }
 
-/* Overview page content */
 .stldocs-root .stldocs-overview {
-  .stldocs-overview-header {
+  & .stldocs-overview-header {
     padding: var(--stldocs-title-padding-y) 0;
 
     & > * {
@@ -1941,46 +1741,46 @@ a.stl-ui-button {
       margin: auto 0;
     }
 
-    .stldocs-overview-header-info {
-      margin-top: 16px;
+    & .stldocs-overview-header-info {
+      align-items: center;
       height: 40px;
+      margin-top: 16px;
       display: flex;
-      align-items: center;
 
-      .stldocs-overview-header-info-timestamp {
+      & .stldocs-overview-header-info-timestamp {
         font-size: var(--stl-typography-scale-xs);
         color: var(--stl-color-foreground);
-        opacity: 50%;
+        opacity: .5;
       }
     }
   }
 
-  .stldocs-resource {
+  & .stldocs-resource {
     padding: 2rem 0;
 
-    &:not([data-stl-resource-language='terraform']) .stldocs-resource-content {
+    &:not([data-stl-resource-language="terraform"]) .stldocs-resource-content {
       max-width: var(--stldocs-content-width);
       margin: auto 0;
     }
 
-    .stldocs-resource-header {
-      display: flex;
+    & .stldocs-resource-header {
+      opacity: .85;
       flex-direction: column;
       gap: 16px;
-      opacity: 85%;
+      display: flex;
 
-      .stldocs-resource-title {
-        .stldocs-icon {
-          margin-left: 8px;
+      & .stldocs-resource-title {
+        & .stldocs-icon {
           color: var(--stl-color-foreground-muted);
           vertical-align: middle;
-          display: inline;
           height: 1rem;
+          margin-left: 8px;
+          display: inline;
         }
 
-        .stldocs-resource-title-segment {
-          margin-right: 8px;
+        & .stldocs-resource-title-segment {
           color: var(--stl-color-foreground);
+          margin-right: 8px;
 
           &:not(:last-child) {
             color: var(--stl-color-foreground-reduced);
@@ -1989,263 +1789,255 @@ a.stl-ui-button {
         }
       }
 
-      .stldocs-resource-name {
+      & .stldocs-resource-name {
         font-family: var(--stl-typography-font-mono);
         color: var(--stl-color-foreground);
       }
 
-      .stldocs-resource-description {
+      & .stldocs-resource-description {
         font-size: var(--stl-typography-scale-base);
         color: var(--stl-color-foreground-reduced);
         line-height: 150%;
       }
     }
 
-    .stldocs-resource-content {
-      .stldocs-resource-content-group {
-        display: flex;
+    & .stldocs-resource-content {
+      & .stldocs-resource-content-group {
         flex-direction: column;
+        display: flex;
 
-        .stldocs-resource-content-group-model-title {
+        & .stldocs-resource-content-group-model-title {
           padding-top: var(--stldocs-content-padding-block);
           color: var(--stl-color-foreground-muted);
-          font-weight: normal;
+          padding-bottom: .5rem;
           font-size: 1rem;
-          padding-bottom: 0.5rem;
+          font-weight: normal;
           display: flex;
         }
 
-        .stldocs-resource-content-group-name {
+        & .stldocs-resource-content-group-name {
           color: var(--stl-color-foreground-muted);
         }
 
-        .stldocs-resource-content-properties {
+        & .stldocs-resource-content-properties {
           margin-left: calc(-1 * var(--stldocs-expander-margin-shift));
         }
       }
     }
   }
 
-  > .stldocs-resource:nth-child(2) {
+  & > .stldocs-resource:nth-child(2) {
     padding-top: 0;
   }
 }
 
-/* Overview page method summary */
-.stldocs-root .stldocs-overview .stldocs-method-summary,
-.stldocs-root .stldocs-overview .stldocs-method {
+.stldocs-root .stldocs-overview .stldocs-method-summary, .stldocs-root .stldocs-overview .stldocs-method {
   padding: var(--stldocs-content-padding-block) 0;
 
-  .stldocs-method-header {
-    display: flex;
+  & .stldocs-method-header {
     flex-direction: column;
     gap: 4px;
+    display: flex;
 
-    .stldocs-method-title {
+    & .stldocs-method-title {
       margin-bottom: 2px;
 
-      a:hover {
+      & a:hover {
         text-decoration: underline;
       }
     }
 
-    .stldocs-method-route {
+    & .stldocs-method-route {
       padding-top: 4px;
     }
   }
 
-  .stldocs-method-signature {
+  & .stldocs-method-signature {
     max-width: var(--stldocs-content-width);
-    overflow: hidden;
     text-overflow: ellipsis;
+    overflow: hidden;
   }
 
-  .stldocs-method-description {
+  & .stldocs-method-description {
     color: var(--stl-color-foreground-muted);
     height: 1.7rem;
-    overflow-y: hidden;
-    line-height: 1.7rem;
     padding-bottom: var(--stldocs-content-padding-block);
+    line-height: 1.7rem;
+    overflow-y: hidden;
 
-    .stldocs-content > * {
+    & .stldocs-content > * {
       white-space: nowrap;
-      overflow-x: hidden;
       text-overflow: ellipsis;
+      overflow-x: hidden;
     }
   }
 }
 
-/* Method route rendering is shared between method previews and pages */
 .stldocs-root .stldocs-method-header .stldocs-method-route {
-  display: flex;
   gap: 4px;
   padding: 0;
+  display: flex;
 
-  .stldocs-method-route-endpoint {
+  & .stldocs-method-route-endpoint {
     font-family: var(--stl-typography-font-mono);
     font-size: var(--stl-typography-scale-sm);
     color: var(--stl-color-foreground-reduced);
+    text-overflow: ellipsis;
+    white-space: nowrap;
     align-content: center;
     line-height: 120%;
     overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
   }
 }
 
-/* Models and properties */
-.stldocs-root .stldocs-property,
-.stldocs-root .stldocs-model {
-  display: flex;
-  flex-direction: column;
-  gap: 0.8rem;
-  padding: 0.5rem 0;
+.stldocs-root .stldocs-property, .stldocs-root .stldocs-model {
   font-size: var(--stl-typography-scale-sm);
+  flex-direction: column;
+  gap: .8rem;
+  padding: .5rem 0;
+  display: flex;
 
-  &:has(.stldocs-expander-summary-content .stldocs-property-description)
-    .stldocs-expander-content
-    > .stldocs-property-description {
-    padding-top: 0.75rem;
+  &:has(.stldocs-expander-summary-content .stldocs-property-description) .stldocs-expander-content > .stldocs-property-description {
+    padding-top: .75rem;
   }
 
-  .stldocs-expander-summary-content {
+  & .stldocs-expander-summary-content {
     max-width: 100%;
   }
 
-  .stldocs-property-header {
-    align-items: first baseline;
-    display: flex;
-    gap: 0.5rem;
+  & .stldocs-property-header {
     flex-wrap: wrap;
+    align-items: baseline;
+    gap: .5rem;
+    display: flex;
   }
 
-  .stldocs-property-info {
-    display: flex;
+  & .stldocs-property-info {
     flex-direction: column;
+    display: flex;
 
     & > .stldocs-property-type > .stldocs-text-identifier {
       color: var(--stl-color-foreground);
     }
   }
 
-  .stldocs-property-type {
+  & .stldocs-property-type {
     font-family: var(--stl-typography-font-mono);
     color: var(--stl-color-foreground-muted);
   }
 
-  .stldocs-property-type,
-  .stldocs-property-declaration {
-    .stldocs-type-preview[data-stldocs-type-preview='union']
-      .stldocs-type-preview[data-stldocs-type-preview='properties'] {
+  & .stldocs-property-type, & .stldocs-property-declaration {
+    & .stldocs-type-preview[data-stldocs-type-preview="union"] .stldocs-type-preview[data-stldocs-type-preview="properties"] {
       display: none;
     }
   }
 
-  .stldocs-property-deprecated {
+  & .stldocs-property-deprecated {
     font-family: var(--stl-typography-font);
     color: var(--stl-color-red-foreground);
     font-size: var(--stl-typography-scale-sm);
     font-weight: 600;
   }
 
-  .stldocs-property-deprecated-message {
+  & .stldocs-property-deprecated-message {
     color: var(--stl-color-red-foreground);
     font-size: var(--stl-typography-scale-sm);
   }
-  .stldocs-property-declaration {
+
+  & .stldocs-property-declaration {
     white-space: nowrap;
-    overflow: hidden;
     text-overflow: ellipsis;
+    border-radius: var(--stl-ui-layout-border-radius-xs);
     min-width: 0;
     max-width: max-content;
-    border-radius: var(--stl-ui-layout-border-radius-xs);
     padding-inline: var(--stl-ui-layout-border-radius-xs);
     margin-left: calc(-1 * var(--stl-ui-layout-border-radius-xs));
-    background-color: transparent;
-    transition: 0.1s background-color ease;
+    background-color: #0000;
+    transition: background-color .1s;
+    overflow: hidden;
 
-    .stldocs-property-deprecated {
-      margin-right: 0.44rem;
+    & .stldocs-property-deprecated {
+      margin-right: .44rem;
     }
   }
-  .stldocs-property-info:is(:target, .stldocs-property-highlighted) .stldocs-property-declaration {
+
+  & .stldocs-property-info:is(:target, .stldocs-property-highlighted) .stldocs-property-declaration {
     background-color: var(--stl-color-accent-muted-background);
-    transition: 0.1s background-color ease;
+    transition: background-color .1s;
   }
 
-  .stldocs-property-description,
-  .stldocs-property-title {
+  & .stldocs-property-description, & .stldocs-property-title {
     font-size: var(--stl-typography-scale-sm);
     color: var(--stl-color-foreground-reduced);
 
-    .stldocs-content {
+    & .stldocs-content {
       color: inherit;
       font-size: inherit;
     }
   }
 
-  .stldocs-property-name {
+  & .stldocs-property-name {
     font-family: var(--stl-typography-font-mono);
     color: var(--stl-color-foreground);
     font-weight: 700;
   }
 
-  .stldocs-property-annotation {
+  & .stldocs-property-annotation {
     color: var(--stl-color-foreground-reduced);
   }
 
-  .stldocs-property-typename {
+  & .stldocs-property-typename {
     font-size: var(--stl-typography-scale-xs);
     color: var(--stl-color-foreground-muted);
     line-height: 175%;
 
-    .stldocs-type-reference {
-      font-size: 0.8rem;
+    & .stldocs-type-reference {
       color: var(--stldocs-syntax-color-blue);
+      font-size: .8rem;
       font-weight: 600;
     }
   }
 
-  .stldocs-property-type {
-    .stldocs-truncation {
-      margin-right: 0.2rem;
+  & .stldocs-property-type {
+    & .stldocs-truncation {
       white-space: nowrap;
+      margin-right: .2rem;
     }
   }
 
-  .stldocs-property-badges {
-    display: flex;
-    font-size: 0.85rem;
-    gap: 0.5rem;
+  & .stldocs-property-badges {
     text-transform: lowercase;
+    gap: .5rem;
+    font-size: .85rem;
     line-height: 1.5rem;
+    display: flex;
   }
 
-  .stldocs-property-constraints {
+  & .stldocs-property-constraints {
     display: flex;
   }
 
-  .stldocs-property-constraint {
+  & .stldocs-property-constraint {
     color: var(--stl-color-foreground-reduced);
 
     &:not(:last-child) {
-      &::after {
-        content: ', ';
-        margin-right: 0.4rem;
+      &:after {
+        content: ", ";
         color: var(--stl-color-foreground-reduced);
+        margin-right: .4rem;
       }
     }
 
-    .stldocs-property-constraint-name {
+    & .stldocs-property-constraint-name {
       color: var(--stl-color-foreground-reduced);
 
-      &::after {
-        content: ':';
-        margin-right: 0.4rem;
+      &:after {
+        content: ":";
+        margin-right: .4rem;
       }
     }
 
-    .stldocs-property-constraint-value {
+    & .stldocs-property-constraint-value {
       background-color: var(--stldocs-color-bg-inline-code);
       color: var(--stl-color-foreground-reduced);
       font-family: var(--stl-typography-font-mono);
@@ -2254,25 +2046,21 @@ a.stl-ui-button {
     }
   }
 
-  .stldocs-property-type:not(:first-child) {
-    font-size: 0.8rem;
-  }
-
-  .stldocs-property .stldocs-property-type {
-    font-size: 0.8rem;
+  & .stldocs-property-type:not(:first-child), & .stldocs-property .stldocs-property-type {
+    font-size: .8rem;
   }
 }
 
 .stldocs-root {
-  .stldocs-properties {
-    display: flex;
+  & .stldocs-properties {
     flex-direction: column;
     line-height: 150%;
+    display: flex;
   }
 }
 
 .stldocs-root .stldocs-property {
-  padding: 0.2rem 0;
+  padding: .2rem 0;
 }
 
 .stldocs-root .stldocs-property:not(.stldocs-property .stldocs-property) > .stldocs-property-info {
@@ -2280,33 +2068,31 @@ a.stl-ui-button {
 }
 
 .stldocs-root .stldocs-tooltip-content .stldocs-property {
-  gap: 0.1rem;
-  padding: 0.1rem !important;
   border: 0;
+  gap: .1rem;
+  padding: .1rem !important;
 }
 
 .stldocs-root .stldocs-badge {
-  display: inline-block;
   background-color: var(--stl-color-muted-background);
-  padding: 0 0.5rem;
-  border-radius: 4px;
   font-size: var(--stl-typography-scale-xs);
+  border-radius: 4px;
+  padding: 0 .5rem;
   font-weight: 500;
+  display: inline-block;
 
-  &[data-badge-id='deprecated'] {
+  &[data-badge-id="deprecated"] {
     background-color: var(--stl-color-red-muted-background);
     color: var(--stl-color-red-foreground);
     text-transform: capitalize;
   }
 
-  &[data-badge-id='optional'] {
+  &[data-badge-id="optional"] {
     background-color: var(--stl-color-muted-background);
     text-transform: capitalize;
   }
 }
 
-/* Method Pages */
-
 .stldocs-root .stldocs-method-signature {
   font-family: var(--stl-typography-font-mono);
   font-size: var(--stl-typography-scale-sm);
@@ -2316,383 +2102,370 @@ a.stl-ui-button {
   font-weight: 400;
   line-height: 1.5rem;
 
-  .stldocs-signature-qualified {
+  & .stldocs-signature-qualified {
     color: var(--stl-color-foreground-reduced);
     font-weight: 400;
   }
 
-  .stldocs-signature-name {
+  & .stldocs-signature-name {
     color: var(--stl-color-foreground);
     font-weight: 600;
   }
 
-  .stldoc-signature-params {
-    .stldocs-text-identifier {
+  & .stldoc-signature-params {
+    & .stldocs-text-identifier {
       color: var(--stl-color-foreground);
     }
   }
 
-  .stldocs-type {
+  & .stldocs-type {
     color: var(--stl-color-foreground);
   }
 
-  .stldocs-type-preview[data-stldocs-type-preview='properties'] {
+  & .stldocs-type-preview[data-stldocs-type-preview="properties"] {
     display: none;
   }
 
-  .stldocs-method-badges {
+  & .stldocs-method-badges {
     margin-top: 1rem;
   }
 }
 
 .stldocs-root .stldocs-method {
-  .stldocs-method-content-column {
-    display: contents;
-  }
-
-  .stldocs-method-header {
+  & .stldocs-method-header {
     padding: var(--stldocs-title-padding-y) var(--stldocs-content-padding-inline)
       var(--stldocs-content-padding-block);
 
-    .stldocs-method-title {
+    & .stldocs-method-title {
       font-size: var(--stl-typography-text-h1);
-      letter-spacing: -0.03em;
+      letter-spacing: -.03em;
     }
 
-    .stldocs-method-signature {
-      margin-top: 0.75rem;
+    & .stldocs-method-signature {
+      margin-top: .75rem;
     }
 
-    .stldocs-method-route {
+    & .stldocs-method-route {
       padding-top: 12px;
     }
   }
 
-  .stldocs-method-description {
-    grid-area: 1 / 1 / 2 / 2;
+  & .stldocs-method-description {
     padding-bottom: var(--stldocs-content-padding-block);
+    grid-area: 1 / 1 / 2 / 2;
 
-    code {
+    & code {
+      font-size: .93rem;
       line-height: 150%;
-      font-size: 0.93rem;
     }
   }
 
-  .stldocs-method-example {
-    margin-top: 1rem;
+  & .stldocs-method-example {
     grid-area: 2 / 1 / 3 / 2;
+    margin-top: 1rem;
 
-    .stldocs-snippet-multi-response {
+    & .stldocs-snippet-multi-response {
       display: none;
     }
   }
 
-  .stldocs-snippet-multi-response {
+  & .stldocs-snippet-multi-response {
     border: 1px solid var(--stl-color-border);
     border-radius: 12px;
 
-    .stldocs-snippet {
-      background-color: transparent;
+    & .stldocs-snippet {
+      background-color: #0000;
     }
 
-    .stldocs-snippet-code .shiki {
-      padding: 0.5rem;
+    & .stldocs-snippet-code .shiki {
+      padding: .5rem;
     }
   }
 
-  .stldocs-method-info {
+  & .stldocs-method-info {
     padding: var(--stldocs-content-padding-block) 0;
+    font-size: var(--stl-typography-scale-sm);
+    flex-direction: column;
     grid-area: 3 / 1 / 4 / 2;
-    display: flex;
     gap: 2rem;
-    flex-direction: column;
     margin-top: 2.5rem;
-    font-size: var(--stl-typography-scale-sm);
+    display: flex;
 
-    h5 {
+    & h5 {
       display: flex;
     }
   }
 
-  /* TODO(soon): we shouldn't be copying these styles here. */
-  .stldocs-method-available-languages a {
+  & .stldocs-method-available-languages a {
     color: var(--stl-color-link-foreground);
     text-decoration-color: rgb(from currentColor r g b / calc(alpha * var(--stl-opacity-level-040)));
-    transition: text-decoration-color 0.1s ease-out;
+    transition: text-decoration-color .1s ease-out;
   }
 
-  .stldocs-method-info-section {
-    display: flex;
-    gap: 0.5rem;
+  & .stldocs-method-info-section {
     flex-direction: column;
+    gap: .5rem;
+    display: flex;
 
-    h5 .stl-ui-badge {
+    & h5 .stl-ui-badge {
       vertical-align: bottom;
-      margin-left: 0.5em;
       margin-top: -1px;
+      margin-left: .5em;
       transform: translateY(1px);
     }
   }
 
-  .stldocs-method-content-column {
+  & .stldocs-method-content-column {
     display: contents;
   }
 
-  .stldocs-method-body {
-    display: grid;
-    gap: 2rem;
-    grid-template-columns: minmax(0, 1fr);
-    grid-template-rows: repeat(4, auto);
+  & .stldocs-method-body {
     padding: var(--stldocs-content-padding-block) 0;
+    grid-template-rows: repeat(4, auto);
+    grid-template-columns: minmax(0, 1fr);
+    gap: 2rem;
+    display: grid;
 
-    .stldocs-method-description p {
+    & .stldocs-method-description p {
       color: var(--stl-color-foreground-reduced);
       line-height: 150%;
     }
 
-    h5 {
-      font-weight: 400;
+    & h5 {
       color: var(--stl-color-foreground-muted);
+      font-weight: 400;
       font-size: var(--stl-typography-scale-base);
     }
 
-    .stldocs-method-parameters,
-    .stldocs-method-parameters,
-    .stldocs-method-returns {
+    & .stldocs-method-parameters, & .stldocs-method-parameters, & .stldocs-method-returns {
       margin-left: calc(-1 * var(--stldocs-expander-margin-shift));
     }
 
-    .stldocs-method-parameters {
-      display: flex;
+    & .stldocs-method-parameters {
       flex-direction: column;
-      gap: 0.5rem;
+      gap: .5rem;
+      display: flex;
     }
 
-    .stldocs-method-parameters h5 {
+    & .stldocs-method-parameters h5 {
       margin-left: var(--stldocs-expander-margin-shift);
     }
 
-    .stldocs-terraform-resource-title {
+    & .stldocs-terraform-resource-title {
       font-family: var(--stl-typography-font-mono);
-      font-size: 1.1rem;
       white-space: nowrap;
-      overflow: hidden;
       text-overflow: ellipsis;
+      font-size: 1.1rem;
+      overflow: hidden;
     }
   }
 
-  .stldocs-snippet,
-  .stldocs-snippet-multi {
+  & .stldocs-snippet, & .stldocs-snippet-multi {
     top: calc(var(--sl-nav-height) + 1rem);
-    position: sticky;
     z-index: 5;
+    position: sticky;
   }
 
-  .stldocs-snippet {
+  & .stldocs-snippet {
     font-size: var(--stl-typography-scale-sm);
     font-family: var(--stl-typography-font-mono);
-
-    padding: 0.25rem;
-    border-radius: calc(12px + 0.25rem);
-    display: flex;
-    flex-direction: column;
     background-color: var(--stl-color-faint-background);
     border: 1px solid var(--stl-color-border-faint);
+    border-radius: calc(12px + .25rem);
+    flex-direction: column;
+    padding: .25rem;
+    display: flex;
 
-    .stldocs-snippet-request {
+    & .stldocs-snippet-request {
       background-color: var(--stl-color-background);
       --shiki-background: var(--stl-color-background);
       border: 1px solid var(--stl-color-border);
       border-radius: 12px;
       position: relative;
 
-      .stldocs-snippet-code {
-        border-bottom-left-radius: 12px;
+      & .stldocs-snippet-code {
         border-bottom-right-radius: 12px;
+        border-bottom-left-radius: 12px;
       }
     }
 
-    .stldocs-snippet-request-title {
-      display: flex;
-      justify-content: space-between;
+    & .stldocs-snippet-request-title {
       background-color: var(--stl-color-background);
       color: var(--stl-color-foreground-reduced);
       border-bottom: 1px solid var(--stl-color-border);
-      border-top-right-radius: 12px;
-      border-top-left-radius: 12px;
-      padding: 0.5rem;
-      padding-left: 0.75rem;
-      gap: 0.5rem;
       font-family: var(--stl-typography-font);
+      border-top-left-radius: 12px;
+      border-top-right-radius: 12px;
+      justify-content: space-between;
+      gap: .5rem;
+      padding: .5rem .5rem .5rem .75rem;
+      display: flex;
 
-      .stldocs-snippet-request-title-method {
+      & .stldocs-snippet-request-title-method {
         flex-grow: 1;
         min-width: 0;
       }
 
-      .stldocs-snippet-request-title-method,
-      .stldocs-snippet-request-title-content {
-        display: flex;
-        gap: 0.5rem;
+      & .stldocs-snippet-request-title-method, & .stldocs-snippet-request-title-content {
         align-items: center;
+        gap: .5rem;
+        display: flex;
       }
 
-      h3 {
-        font-weight: 500;
+      & h3 {
         font-style: normal;
+        font-weight: 500;
         line-height: 100%;
         font-size: inherit;
         font-family: var(--stl-typography-font);
         color: var(--stl-color-foreground);
-        margin: 0;
-
-        overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
+        margin: 0;
+        overflow: hidden;
       }
 
-      @media (min-width: 1280px) {
-        .stldocs-snippet-request-title-label {
+      @media (width >= 1280px) {
+        & .stldocs-snippet-request-title-label {
           display: none;
         }
       }
 
-      .stldocs-icon {
+      & .stldocs-icon {
         width: 16px;
       }
 
-      .stldocs-snippet-request-title-content {
+      & .stldocs-snippet-request-title-content {
         font-family: var(--stl-typography-font);
+        gap: .5rem;
         display: flex;
-        gap: 0.5rem;
 
-        .stldocs-snippet-request-title-language {
-          position: relative;
+        & .stldocs-snippet-request-title-language {
           color: var(--stl-color-foreground);
           cursor: pointer;
-          display: flex;
           align-items: center;
           gap: 4px;
+          display: flex;
+          position: relative;
 
-          select {
+          & select {
             z-index: 5;
+            align-items: center;
             padding-right: 25px;
             display: flex;
-            align-items: center;
           }
         }
       }
     }
 
-    .stldocs-snippet-response-pane {
-      padding: 0.5rem;
-      display: none;
+    & .stldocs-snippet-response-pane {
       --shiki-background: var(--stl-color-faint-background);
+      padding: .5rem;
+      display: none;
 
       &.stldocs-snippet-response-pane-active {
         display: block;
       }
 
-      .stldocs-snippet-code {
+      & .stldocs-snippet-code {
         padding: 0;
       }
     }
 
-    .stldocs-snippet-response {
+    & .stldocs-snippet-response {
       margin-top: 1rem;
     }
   }
 
-  .stldocs-method-response-column {
-    display: flex;
+  & .stldocs-method-response-column {
     flex-direction: column;
     gap: 1rem;
     margin-top: 2.5rem;
+    display: flex;
   }
 
-  .stldocs-snippet-code {
+  & .stldocs-snippet-code {
     width: 0;
     min-width: 100%;
-    overflow: auto;
-    display: block;
     white-space: preserve nowrap;
-    padding: 1rem;
     max-height: 560px;
     font-size: var(--stl-typography-scale-sm);
-    line-height: 1.5;
-    transition: height 240ms ease;
     will-change: height;
     scrollbar-color: var(--stl-color-border) transparent;
+    padding: 1rem;
+    line-height: 1.5;
+    transition: height .24s;
+    display: block;
+    overflow: auto;
 
-    pre,
-    .shiki {
-      margin: 0;
-      padding: 0;
+    & pre, & .shiki {
       width: max-content;
       min-width: 100%;
+      margin: 0;
+      padding: 0;
     }
 
-    pre.shiki {
+    & pre.shiki {
       counter-reset: codeblock-line;
 
-      .line {
+      & .line {
         counter-increment: codeblock-line;
 
-        &::before {
+        &:before {
           content: counter(codeblock-line);
           color: var(--stl-color-foreground-muted);
+          opacity: .5;
+          text-align: right;
+          width: 1rem;
           margin-right: 1rem;
-          opacity: 0.5;
           display: inline-flex;
-          width: 1rem;
-          text-align: right;
         }
 
         &.ellipsis {
+          opacity: .5;
           color: var(--stl-color-foreground-muted) !important;
-          opacity: 0.5;
         }
       }
     }
   }
 
-  .stldocs-snippet-footer {
+  & .stldocs-snippet-footer {
     border-top: 1px solid var(--stl-color-border);
-    padding: 0.5rem;
+    padding: .5rem;
   }
 
-  .stldocs-snippet-response-tab {
+  & .stldocs-snippet-response-tab {
+    border-bottom: 1px solid var(--stl-color-border-faint);
+    gap: .5rem;
+    margin-inline: -.5rem;
+    padding-inline: .5rem;
     display: flex;
-    gap: 0.5rem;
     overflow-x: auto;
-    border-bottom: 1px solid var(--stl-color-border-faint);
-    margin-inline: -0.5rem;
-    padding-inline: 0.5rem;
 
-    .stldocs-snippet-response-tab-item {
+    & .stldocs-snippet-response-tab-item {
+      border-bottom: 2px solid #0000;
       flex: 1;
-      border-bottom: 2px solid transparent;
       min-width: 160px;
       height: 40px;
 
-      button {
-        width: 100%;
+      & button {
         white-space: nowrap;
-        overflow: hidden;
         text-overflow: ellipsis;
         vertical-align: middle;
+        width: 100%;
         color: var(--stl-color-foreground-reduced);
+        overflow: hidden;
       }
 
-      button:hover {
+      & button:hover {
         background-color: var(--stl-color-background-hover);
       }
     }
 
-    .stldocs-snippet-response-tab-item-active {
+    & .stldocs-snippet-response-tab-item-active {
       border-color: var(--stl-color-accent-inverse-background);
 
-      button {
+      & button {
         color: var(--stl-color-foreground);
       }
     }
@@ -2702,69 +2475,70 @@ a.stl-ui-button {
       border-top-left-radius: 12px;
       border-top-right-radius: 12px;
 
-      .stldocs-snippet-response-tab-item {
-        border: none;
+      & .stldocs-snippet-response-tab-item {
         color: var(--stl-color-foreground-reduced);
+        border: none;
         font-weight: 400;
         display: flex;
 
-        button {
-          justify-content: flex-start;
+        & button {
           cursor: default;
+          justify-content: flex-start;
           height: auto;
 
           &:hover {
-            background-color: transparent;
+            background-color: #0000;
           }
         }
       }
     }
   }
 
-  .stldocs-markdown {
-    :first-child {
+  & .stldocs-markdown {
+    & :first-child {
       margin-top: 0;
     }
   }
 
-  .stldocs-snippet-multi {
-    .stldocs-snippet-multi-tabs {
+  & .stldocs-snippet-multi {
+    & .stldocs-snippet-multi-tabs {
       background: var(--stl-color-faint-background);
       border: 1px solid var(--stl-color-border-faint);
-      padding: 0.25rem;
-      border-radius: calc(var(--stl-ui-layout-border-radius) + 0.25rem);
-      display: flex;
-      flex-wrap: nowrap;
-      margin-bottom: 0.5rem;
-      overflow-x: scroll;
+      border-radius: calc(var(--stl-ui-layout-border-radius) + .25rem);
       scrollbar-color: var(--stl-color-border) transparent;
-
       font-size: var(--stl-typography-scale-sm);
-      line-height: 1;
-
+      flex-wrap: nowrap;
       max-width: max-content;
+      margin-bottom: .5rem;
+      padding: .25rem;
+      line-height: 1;
+      display: flex;
+      overflow-x: scroll;
 
-      .stldocs-snippet-multi-tab {
+      & .stldocs-snippet-multi-tab {
         border-radius: var(--stl-ui-layout-border-radius);
-        border: 1px solid transparent;
+        color: var(--stl-color-foreground-reduced);
+        border: 1px solid #0000;
+        flex: none;
         padding: 9px 14px;
         font-weight: 400;
-        color: var(--stl-color-foreground-reduced);
-        flex: 0 0 auto;
 
         & > input {
           display: none;
         }
-        &:has(> :checked) {
+
+        &:has( > :checked) {
           background-color: var(--stl-color-ui-background);
           border-color: var(--stl-color-border);
-          font-weight: 500;
           color: var(--stl-color-foreground);
+          font-weight: 500;
         }
       }
     }
-    .stldocs-snippet-multi-pane {
+
+    & .stldocs-snippet-multi-pane {
       display: none;
+
       &.stldocs-snippet-multi-pane-active {
         display: block;
       }
@@ -2776,30 +2550,30 @@ a.stl-ui-button {
   background-color: var(--stl-color-background);
   border: 1px solid var(--stl-color-border);
   border-radius: 8px;
-  padding: 16px;
-  display: flex;
   flex-direction: column;
   gap: 8px;
+  padding: 16px;
+  display: flex;
 
-  .stldocs-language-block-content {
-    display: flex;
+  & .stldocs-language-block-content {
     gap: 12px;
+    display: flex;
 
-    .stldocs-language-block-content-icon {
-      display: inline-flex;
+    & .stldocs-language-block-content-icon {
       border: 1px solid var(--stl-color-border);
+      aspect-ratio: 1;
       border-radius: 4px;
       padding: 12px;
-      aspect-ratio: 1 / 1;
+      display: inline-flex;
     }
 
-    .stldocs-language-block-content-info {
-      .stldocs-language-block-content-info-language {
-        line-height: 120%;
+    & .stldocs-language-block-content-info {
+      & .stldocs-language-block-content-info-language {
         font-weight: 600;
+        line-height: 120%;
       }
 
-      .stldocs-language-block-content-info-version {
+      & .stldocs-language-block-content-info-version {
         font-family: var(--stl-typography-font-mono);
         font-size: var(--stl-typography-scale-sm);
         font-weight: 200;
@@ -2807,8 +2581,7 @@ a.stl-ui-button {
     }
   }
 
-  .stldocs-language-block-install {
-    display: flex;
+  & .stldocs-language-block-install {
     font-family: var(--stl-typography-font-mono);
     font-size: var(--stl-typography-scale-sm);
     background-color: var(--stldocs-color-bg-inline-code);
@@ -2816,25 +2589,26 @@ a.stl-ui-button {
     color: var(--stl-color-foreground-reduced);
     border-radius: 4px;
     padding: 4px 8px;
+    display: flex;
 
-    pre {
-      flex-grow: 1;
+    & pre {
       white-space: nowrap;
-      overflow-x: hidden;
       text-overflow: ellipsis;
-      display: flex;
+      flex-grow: 1;
       align-items: center;
+      display: flex;
+      overflow-x: hidden;
     }
 
-    svg {
+    & svg {
       vertical-align: middle;
       min-width: 16px;
     }
   }
 
-  .stldocs-language-block-links {
-    display: flex;
+  & .stldocs-language-block-links {
     gap: 8px;
+    display: flex;
 
     & > a:last-child {
       flex-grow: 1;
@@ -2842,23 +2616,22 @@ a.stl-ui-button {
   }
 }
 
-@media (min-width: 1280px) {
+@media (width >= 1280px) {
   .stldocs-root .stldocs-method.stldocs-method-double-pane {
-    .stldocs-method-example {
-      flex: 1 1 500px;
-      max-width: 100%;
+    & .stldocs-method-example {
+      flex: 500px;
       width: 100%;
+      max-width: 100%;
     }
 
-    .stldocs-method-body {
+    & .stldocs-method-body {
       flex-direction: row;
       gap: 2rem;
     }
   }
 }
 
-/* Don't put expanders in the margin on mobile */
-@media (max-width: 50rem) {
+@media (width <= 50rem) {
   .stldocs-root .stldocs-method-body {
     padding: 1rem var(--stldocs-content-padding-inline) !important;
   }
@@ -2866,87 +2639,87 @@ a.stl-ui-button {
   .stldocs-root .stldocs-resource .stldocs-resource-content {
     padding: 0 var(--stldocs-content-padding-inline) !important;
 
-    .stldocs-resource-content-properties {
+    & .stldocs-resource-content-properties {
       margin-left: 0 !important;
     }
   }
 }
 
-@media (min-width: 50rem) {
+@media (width >= 50rem) {
   .stldocs-root .stldocs-method {
-    .stldocs-method-header {
+    & .stldocs-method-header {
       padding: var(--stldocs-title-padding-y) 0;
     }
   }
 }
 
-@media (min-width: 1280px) {
+@media (width >= 1280px) {
   .stldocs-root {
-    .stldocs-method.stldocs-method-double-pane .stldocs-method-content-column {
+    & .stldocs-method.stldocs-method-double-pane .stldocs-method-content-column {
       display: block;
     }
 
-    .stldocs-method.stldocs-method-double-pane .stldocs-method-body {
+    & .stldocs-method.stldocs-method-double-pane .stldocs-method-body {
       grid-template-columns: repeat(2, minmax(0, 1fr));
-      grid-template-areas: 'description example';
+      grid-template-areas: "description example";
       grid-template-rows: unset;
 
-      .stldocs-snippet {
-        .stldocs-snippet-response {
+      & .stldocs-snippet {
+        & .stldocs-snippet-response {
           display: block;
         }
 
-        .stldocs-snippet-response-pane {
-          position: relative;
-          padding: 0;
+        & .stldocs-snippet-response-pane {
           --shiki-background: transparent;
+          padding: 0;
+          position: relative;
         }
 
-        .stldocs-snippet-multi-response {
-          display: block;
+        & .stldocs-snippet-multi-response {
           padding: 0;
+          display: block;
         }
       }
 
-      .stldocs-method-response-column {
-        display: none;
+      & .stldocs-method-response-column {
         margin-top: 0;
+        display: none;
       }
 
-      .stldocs-method-content-column {
+      & .stldocs-method-content-column {
         grid-area: description;
       }
 
-      .stldocs-method-example {
-        margin-top: 0;
+      & .stldocs-method-example {
         grid-area: example;
+        margin-top: 0;
 
-        .stldocs-snippet-multi-response {
-          display: block;
+        & .stldocs-snippet-multi-response {
           border: none;
+          display: block;
 
-          .stldocs-snippet {
-            background-color: transparent;
+          & .stldocs-snippet {
+            background-color: #0000;
             border: none;
           }
         }
       }
 
-      .stldocs-method-info {
+      & .stldocs-method-info {
         grid-area: unset;
         margin-top: 0;
       }
 
-      .stldocs-snippet-response-tab {
-        margin-bottom: 0.5rem;
+      & .stldocs-snippet-response-tab {
+        margin-bottom: .5rem;
 
         &.stldocs-snippet-response-tab-single-return {
-          background-color: transparent;
+          background-color: #0000;
 
-          .stldocs-snippet-response-tab-item {
-            button {
+          & .stldocs-snippet-response-tab-item {
+            & button {
               &:hover {
-                background-color: transparent;
+                background-color: #0000;
               }
             }
           }
@@ -2957,105 +2730,91 @@ a.stl-ui-button {
 }
 
 :root {
-  --stldocs-sidebar-item-padding-inline: 0.75rem;
-  --stldocs-sidebar-item-padding-block: 0.375rem;
-  --stldocs-sidebar-indent: 0.75rem;
+  --stldocs-sidebar-item-padding-inline: .75rem;
+  --stldocs-sidebar-item-padding-block: .375rem;
+  --stldocs-sidebar-indent: .75rem;
 }
 
 .stldocs-sidebar {
   font-family: var(--stl-typography-font);
   font-size: var(--stl-typography-scale-sm);
-  /* Remove background color from stldocs-root reset. */
-  background-color: transparent;
+  background-color: #0000;
 
-  ul,
-  summary {
+  & ul, & summary {
     list-style-type: none;
   }
 
-  .stldocs-expander-summary,
-  .stldocs-sidebar-entry-group > a {
+  & .stldocs-expander-summary, & .stldocs-sidebar-entry-group > a {
     font-weight: 500;
   }
 
-  .stldocs-expander-summary {
-    display: flex;
-    align-items: center;
+  & .stldocs-expander-summary {
     user-select: none;
+    align-items: center;
+    display: flex;
 
-    .stldocs-expander-summary-icon {
-      margin-left: 4px;
-      opacity: 0.65;
-      transition:
-        opacity 0.1s ease-out,
-        transform 0.1s ease-out;
+    & .stldocs-expander-summary-icon {
+      opacity: .65;
       border-radius: 4px;
+      margin-left: 4px;
+      transition: opacity .1s ease-out, transform .1s ease-out;
 
       &:hover {
         background-color: var(--stl-color-background-hover);
       }
     }
 
-    span[aria-hidden='true'] {
+    & span[aria-hidden="true"] {
       opacity: 0;
     }
   }
 
-  .stldocs-sidebar-entry-group {
+  & .stldocs-sidebar-entry-group {
     position: relative;
 
-    /* Anchor is positioned over the <details>. */
-    > a {
+    & > a {
+      padding-block: var(--stldocs-sidebar-item-padding-block);
+      padding-inline: var(--stldocs-sidebar-item-padding-inline);
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
-      padding-block: var(--stldocs-sidebar-item-padding-block);
-      padding-inline: var(--stldocs-sidebar-item-padding-inline);
     }
   }
 
-  .stldocs-sidebar-expander[open] > .stldocs-expander-summary .stldocs-expander-summary-icon {
+  & .stldocs-sidebar-expander[open] > .stldocs-expander-summary .stldocs-expander-summary-icon {
     opacity: 1;
     transform: rotate(90deg);
   }
 
-  /* Explicitly prevent collapsed groups from painting.
-     Browsers should not be computing styles/layout on collapsed <details> non-summary children, but Safari still seems to.
-     Applying display: none lowers rendering cost for trees with many items (eg. the CF API which has ~2k+ items)
-     In Arena's testing using dev server, Safari paint time for a CF page went from 10-14 seconds to ~3 seconds.
-  */
-  .stldocs-sidebar-expander:not([open]) > .stldocs-sidebar-list {
+  & .stldocs-sidebar-expander:not([open]) > .stldocs-sidebar-list {
     display: none;
   }
 
-  /* List items. */
-  .stldocs-sidebar-entry,
-  .stldocs-expander-summary {
-    margin: 0;
+  & .stldocs-sidebar-entry, & .stldocs-expander-summary {
     border-radius: 8px;
+    margin: 0;
   }
 
-  .stldocs-expander-summary,
-  .stldocs-sidebar-entry-link a {
+  & .stldocs-expander-summary, & .stldocs-sidebar-entry-link a {
     padding: var(--stldocs-sidebar-item-padding-block) var(--stldocs-sidebar-item-padding-inline);
   }
 
-  summary.stldocs-expander-summary,
-  .stldocs-sidebar-entry-link a {
+  & summary.stldocs-expander-summary, & .stldocs-sidebar-entry-link a {
     cursor: pointer;
   }
 
-  .stldocs-sidebar-entry-link a:hover {
+  & .stldocs-sidebar-entry-link a:hover {
     color: var(--stl-color-foreground);
   }
 
-  .stldocs-sidebar-entry-link a {
+  & .stldocs-sidebar-entry-link a {
     color: var(--stl-color-foreground-reduced);
     font-weight: 400;
-    display: flex;
     text-decoration: none;
-    span {
+    display: flex;
+
+    & span {
       font-weight: inherit;
     }
 
@@ -3063,57 +2822,47 @@ a.stl-ui-button {
       text-decoration: underline;
       text-decoration-color: var(--stl-color-foreground-reduced);
     }
-    &[aria-current='page'] {
-      font-weight: 500;
+
+    &[aria-current="page"] {
       color: var(--stl-color-foreground);
+      font-weight: 500;
     }
   }
 
-  /* When the sidebar entry has a link, disable pointer events on the <details> text
-  so that they pass through to the <a>. */
-  .stldocs-sidebar-entry-group:has(> a) .stldocs-expander-summary > span {
+  & .stldocs-sidebar-entry-group:has( > a) .stldocs-expander-summary > span {
     pointer-events: none;
   }
 
-  .stldocs-sidebar-entry-link:has(> a:is(:hover, [aria-current='page'])),
-  .stldocs-sidebar-entry-group:has(> a:is(:hover, [aria-current='page']))
-    > .stldocs-sidebar-expander
-    > .stldocs-expander-summary,
-  summary.stldocs-expander-summary:hover {
+  & .stldocs-sidebar-entry-link:has( > a:is(:hover, [aria-current="page"])), & .stldocs-sidebar-entry-group:has( > a:is(:hover, [aria-current="page"])) > .stldocs-sidebar-expander > .stldocs-expander-summary, & summary.stldocs-expander-summary:hover {
     background-color: var(--stl-color-background-hover);
   }
 
-  /* Nested list items have flat left edge. */
-  .stldocs-sidebar-list .stldocs-sidebar-list :is(.stldocs-expander-summary, .stldocs-sidebar-entry) {
+  & .stldocs-sidebar-list .stldocs-sidebar-list :is(.stldocs-expander-summary, .stldocs-sidebar-entry) {
     border-start-start-radius: 0;
     border-end-start-radius: 0;
   }
 
-  .stldocs-sidebar-list {
+  & .stldocs-sidebar-list {
     padding: 0;
   }
 
-  .stldocs-sidebar-list .stldocs-sidebar-list .stldocs-sidebar-entry {
+  & .stldocs-sidebar-list .stldocs-sidebar-list .stldocs-sidebar-entry {
     border-inline-start: 1px solid var(--stl-color-border-faint);
     margin-inline-start: var(--stldocs-sidebar-indent);
 
-    > a[aria-current='page'] {
+    & > a[aria-current="page"] {
       border-inline-start: 2px solid var(--stl-color-accent-border-strong);
       margin-left: -1px;
     }
   }
 
-  /* Icon positioning within links/groups. */
-  .stldocs-sidebar-entry-link > a,
-  .stldocs-sidebar-entry-group > a,
-  .stldocs-sidebar-entry-group .stldocs-expander-summary > span {
-    display: flex;
+  & .stldocs-sidebar-entry-link > a, & .stldocs-sidebar-entry-group > a, & .stldocs-sidebar-entry-group .stldocs-expander-summary > span {
     align-items: center;
     gap: 8px;
+    display: flex;
   }
 
-  /* Hover/active states for HTTP badges. */
-  a[aria-current='page'] .stl-ui-badge--http {
+  & a[aria-current="page"] .stl-ui-badge--http {
     &.stl-ui-badge--http-get {
       background-color: var(--stl-color-green-inverse-background);
       color: var(--stl-color-green-inverse-foreground);
@@ -3124,8 +2873,7 @@ a.stl-ui-button {
       color: var(--stl-color-blue-inverse-foreground);
     }
 
-    &.stl-ui-badge--http-patch,
-    &.stl-ui-badge--http-put {
+    &.stl-ui-badge--http-patch, &.stl-ui-badge--http-put {
       background-color: var(--stl-color-orange-inverse-background);
       color: var(--stl-color-orange-inverse-foreground);
     }
@@ -3136,7 +2884,7 @@ a.stl-ui-button {
     }
   }
 
-  a:hover:not([aria-current='page']) .stl-ui-badge--http {
+  & a:hover:not([aria-current="page"]) .stl-ui-badge--http {
     &.stl-ui-badge--http-get {
       background-color: var(--stl-color-green-muted-background-hover);
     }
@@ -3145,8 +2893,7 @@ a.stl-ui-button {
       background-color: var(--stl-color-blue-muted-background-hover);
     }
 
-    &.stl-ui-badge--http-patch,
-    &.stl-ui-badge--http-put {
+    &.stl-ui-badge--http-patch, &.stl-ui-badge--http-put {
       background-color: var(--stl-color-orange-muted-background-hover);
     }
 
@@ -3157,231 +2904,229 @@ a.stl-ui-button {
 }
 
 .stldocs-root .stldocs-search-form {
-  display: flex;
   flex-direction: column;
+  display: flex;
 
-  .stldocs-search-filter {
-    margin-top: 0.5rem;
+  & .stldocs-search-filter {
+    gap: .5rem;
+    margin-top: .5rem;
     display: flex;
-    gap: 0.5rem;
 
-    .stl-ui-button {
-      flex: 1 1 auto;
+    & .stl-ui-button {
+      flex: auto;
+      gap: .5em;
       padding: 0;
       display: flex;
-      gap: 0.5em;
 
-      .stldocs-search-filter-count {
-        font-size: 0.75rem;
+      & .stldocs-search-filter-count {
         background-color: var(--stldocs-color-selected);
+        font-variant-numeric: tabular-nums;
         border-radius: 100vmax;
-        padding: 0 0.35rem;
+        padding: 0 .35rem;
+        font-size: .75rem;
         line-height: 1.5;
-        font-variant-numeric: tabular-nums;
       }
 
-      svg {
-        flex: 0 0 auto;
+      & svg {
+        flex: none;
       }
     }
 
-    @media not (min-width: 50rem) {
-      svg {
+    @media (width < 50rem) {
+      & svg {
         display: block;
       }
-      .stldocs-search-filter-label,
-      .stldocs-search-filter-count {
+
+      & .stldocs-search-filter-label, & .stldocs-search-filter-count {
         display: none;
       }
     }
   }
 
-  .stldocs-search-result {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
+  & .stldocs-search-result {
     cursor: pointer;
-    margin: 0.5rem 0;
-    padding: 0.5rem 0.8rem;
+    flex-direction: column;
+    gap: .5rem;
+    margin: .5rem 0;
+    padding: .5rem .8rem;
+    display: flex;
 
-    mark {
+    & mark {
       color: var(--stl-color-foreground);
       background-color: var(--stl-color-text-selection-background);
       box-shadow: inset 0 -1px rgb(from var(--stl-color-text-selection-background) r g b / 1);
     }
 
-    &[data-stldocs-search-result='resource'] {
-      .stldocs-search-result-resource-info {
+    &[data-stldocs-search-result="resource"] {
+      & .stldocs-search-result-resource-info {
+        gap: .5rem;
         display: flex;
-        gap: 0.5rem;
 
-        .stldocs-search-result-resource-title {
+        & .stldocs-search-result-resource-title {
           font-weight: 600;
         }
 
-        .stldocs-search-result-resource-path {
+        & .stldocs-search-result-resource-path {
           font-family: var(--stl-typography-font-mono);
           color: var(--stl-color-foreground);
-          overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
+          overflow: hidden;
         }
       }
     }
 
-    &[data-stldocs-search-result='http_method'] {
-      h3.stldocs-method-title {
+    &[data-stldocs-search-result="http_method"] {
+      & h3.stldocs-method-title {
         font-size: 1.2rem;
       }
 
-      .stldocs-method-header {
-        display: flex;
+      & .stldocs-method-header {
         flex-direction: column;
-        gap: 0.5rem;
+        gap: .5rem;
+        display: flex;
 
-        .stldocs-method-signature {
+        & .stldocs-method-signature {
           font-family: var(--stl-typography-font-mono);
           color: var(--stl-color-foreground);
           white-space: pre-wrap;
           word-break: break-word;
 
-          .stldocs-text-identifier {
+          & .stldocs-text-identifier {
             color: var(--stl-color-foreground);
           }
         }
 
-        .stldocs-method-route {
-          font-size: 0.8rem;
+        & .stldocs-method-route {
+          font-size: .8rem;
 
-          .stldocs-method-route-endpoint {
+          & .stldocs-method-route-endpoint {
             font-family: var(--stl-typography-font-mono);
             color: var(--stl-color-foreground-muted);
           }
         }
       }
 
-      .stldocs-method-description {
+      & .stldocs-method-description {
         color: var(--stl-color-foreground);
       }
     }
 
-    &[data-stldocs-search-result='property'] {
-      .stldocs-property-info {
-        display: flex;
+    &[data-stldocs-search-result="property"] {
+      & .stldocs-property-info {
         flex-direction: column;
-        gap: 0.5rem;
+        gap: .5rem;
+        display: flex;
       }
 
-      .stldocs-property-header {
+      & .stldocs-property-header {
+        gap: .5rem;
         display: flex;
-        gap: 0.5rem;
 
-        .stldocs-property-name {
+        & .stldocs-property-name {
           font-family: var(--stl-typography-font-mono);
         }
 
-        .stldocs-property-typename {
+        & .stldocs-property-typename {
           color: var(--stl-color-foreground-muted);
         }
       }
 
-      .stldocs-property-description {
+      & .stldocs-property-description {
         color: var(--stl-color-foreground);
       }
     }
 
-    &[data-stldocs-search-result='model'] {
-      .stldocs-property-info {
-        display: flex;
+    &[data-stldocs-search-result="model"] {
+      & .stldocs-property-info {
         flex-direction: column;
-        gap: 0.5rem;
+        gap: .5rem;
+        display: flex;
 
-        .stldocs-property-type {
+        & .stldocs-property-type {
           font-family: var(--stl-typography-font-mono);
           color: var(--stl-color-foreground);
         }
       }
     }
 
-    &[data-stldocs-search-result='guide'] {
-      .stldocs-search-result-guide-title {
+    &[data-stldocs-search-result="guide"] {
+      & .stldocs-search-result-guide-title {
         font-size: 1.2rem;
       }
 
-      .stldocs-search-result-guide-excerpt {
+      & .stldocs-search-result-guide-excerpt {
         color: var(--stl-color-foreground);
       }
 
-      .stldocs-search-breadcrumb-item {
+      & .stldocs-search-breadcrumb-item {
         text-transform: capitalize;
       }
     }
   }
 
-  .stldocs-search-breadcrumb {
-    display: flex;
-    gap: 0.5rem;
-    font-size: 0.8rem;
-    overflow: hidden;
+  & .stldocs-search-breadcrumb {
     text-overflow: ellipsis;
     white-space: nowrap;
+    gap: .5rem;
+    font-size: .8rem;
+    display: flex;
+    overflow: hidden;
 
-    .stldocs-search-breadcrumb-item {
+    & .stldocs-search-breadcrumb-item {
       color: var(--stl-color-foreground-muted);
     }
 
-    .stldocs-icon {
+    & .stldocs-icon {
       margin-top: auto;
       margin-bottom: auto;
     }
   }
 
-  .stldocs-search-disabled-state-container {
-    margin: auto;
+  & .stldocs-search-disabled-state-container {
     text-align: center;
+    margin: auto;
   }
 }
 
 .stldocs-root .stldocs-search-modal {
   height: calc(100svh - var(--sl-nav-height));
-  width: 100%;
-  overflow: hidden;
-  display: none;
-  padding: 1rem 1rem 0;
-  inset: 0;
   background-color: var(--stl-color-background);
+  width: 100%;
   color: var(--stl-color-foreground);
-  gap: 0.5rem;
   border: none;
+  gap: .5rem;
+  padding: 1rem 1rem 0;
+  display: none;
+  inset: 0;
+  overflow: hidden;
 
-  &:popover-open,
-  &[data-stldocs-modal-open='true'] {
-    display: flex;
+  &:popover-open, &[data-stldocs-modal-open="true"] {
+    top: var(--sl-nav-height);
     flex-direction: column;
+    display: flex;
     position: fixed;
-    top: var(--sl-nav-height);
   }
 
-  .stldocs-search-form {
-    height: 100%;
+  & .stldocs-search-form {
     width: 100%;
+    height: 100%;
 
-    .stldocs-listview {
-      margin: 0.8rem 0 0;
+    & .stldocs-listview {
       height: 100%;
+      margin: .8rem 0 0;
       padding-bottom: 1rem;
     }
   }
 
-  .stldocs-search-modal-close-button {
-    display: flex;
+  & .stldocs-search-modal-close-button {
     justify-content: flex-end;
+    display: flex;
   }
 
   &::backdrop {
     background-color: var(--stldocs-color-backdrop-overlay);
-    -webkit-backdrop-filter: blur(0.25rem);
-    backdrop-filter: blur(0.25rem);
+    backdrop-filter: blur(.25rem);
     top: var(--sl-nav-height);
   }
 }
@@ -3392,24 +3137,22 @@ a.stl-ui-button {
   }
 }
 
-@media (min-width: 50rem) {
+@media (width >= 50rem) {
   .stldocs-root {
-    .stldocs-search-modal {
-      height: 100%;
+    & .stldocs-search-modal {
+      border: 1px solid var(--stl-color-border);
+      border-radius: calc(var(--stl-ui-layout-border-radius-sml) + .9rem);
       width: 1024px;
       max-width: calc(100% - 4rem);
+      height: 100%;
       max-height: 80vh;
       margin: 3rem auto;
-      border: 1px solid var(--stl-color-border);
-      /* nest with input that has --stl-ui-layout-border-radius-sml */
-      border-radius: calc(var(--stl-ui-layout-border-radius-sml) + 0.9rem);
 
-      .stldocs-search-modal-close-button {
+      & .stldocs-search-modal-close-button {
         display: none;
       }
 
-      &:popover-open,
-      &[data-stldocs-modal-open='true'] {
+      &:popover-open, &[data-stldocs-modal-open="true"] {
         top: 0;
       }
 
@@ -3419,12 +3162,3 @@ a.stl-ui-button {
     }
   }
 }
-
-/* For standalone usage of docs-ui */
-
-/*
- * TODO: replace with real import once rolldown css support matures further
- * This import gets bundled so this import will should need to be resolved at runtime
- */
-
-