docs(readme): playground GIF, used-by grid, and docs homepage sync

Add data/used-by.json with build:used-by for README and docs homepage, playground demo capture, and shared home-section layout. Used by lists products with site logos; Financial Support keeps org and individual sponsors.

Co-authored-by: Cursor <[email protected]>

docs/themes/navy/source/css/_partial/index.styl

@@ -126,7 +126,8 @@
     background: var(--color-link-hover)
     color: #fff
 
-#sponsors-wrap, #contributors-wrap
+#used-by-wrap, #sponsors-wrap, #contributors-wrap,
+.home-section
   background: var(--color-navy-lighter)
   border-top: 1px solid #161d24
   border-bottom: 1px solid #161d24
@@ -166,24 +167,40 @@
       &:hover
         color: var(--color-link-hover)
 
-#sponsors-wrap
+.home-section--logos, #sponsors-wrap, #used-by-wrap
   background: var(--color-content-bg)
   .inner
     h3
       color: var(--color-default)
     p
       color: var(--color-gray)
-    .open-collective
-      max-width: 100%
     @media (prefers-color-scheme: dark)
       p
         color: var(--color-default)
 
-#contributors-wrap
+.home-section--people, #contributors-wrap
   border: none
-  overflow: hidden;
+  overflow: hidden
 
 .contributors
+  p
+    margin: 0
+    line-height: 2.5
+    text-align: center
+  a
+    display: inline-block
+    vertical-align: middle
+    margin: 8px
+  a img
+    display: inline-block
+    height: 72px
+    width: auto
+    max-width: 160px
+    vertical-align: middle
+    object-fit: contain
+    background: transparent
+    border-radius: 0
+    margin-bottom: 0
   tr
     display: flex
     flex-wrap: wrap

docs/themes/navy/source/css/_partial/playground.styl

@@ -13,14 +13,6 @@
     margin-bottom: 24px
     color: var(--color-default)
 
-  h2
-    font-size: 0.8125rem
-    font-weight: 600
-    text-transform: uppercase
-    letter-spacing: 0.04em
-    color: var(--color-gray)
-    margin: 0
-
   #editors
     display: grid
     overflow: hidden
@@ -56,25 +48,80 @@
 
   .editor-wrapper
     display: flex
-    gap: 8px
     flex-direction: column
     min-height: 0
     overflow: hidden
-    .editor
-      flex: 1 1 auto
-      min-height: 0
-      position: relative
-      code-block-chrome()
-      overflow: hidden
-      @media mq-mobile
-        min-height: 240px
+
+  .pane-window
+    flex: 1 1 auto
+    min-height: 0
+    position: relative
+    display: flex
+    flex-direction: column
+    playground-window-chrome()
+    overflow: hidden
+    @media mq-mobile
+      min-height: 240px
+
+  .pane-tab
+    position: absolute
+    z-index: 5
+    top: 0
+    left: 0
+    right: 0
+    height: 36px
+    line-height: 36px
+    text-align: center
+    font-size: 0.75rem
+    font-weight: 600
+    letter-spacing: 0.02em
+    color: var(--color-gray)
+    pointer-events: none
+    user-select: none
+
+  .editor
+    flex: 1 1 auto
+    min-height: 0
+    position: relative
+    overflow: hidden
     .ace_editor
-      font-family: font-mono
-      font-size: 14px
-      line-height: 1.5
-      border-radius: 6px
-    .ace_scrollbar
-      z-index: 2
+      top: 0
+      bottom: 0
+      height: auto !important
+
+  .output-preview
+    flex: 1 1 auto
+    min-height: 0
+    cursor: default
+    overflow: auto
+    pre.highlight
+      margin: 0
+      min-height: 100%
+      padding: 16px
+      border: none
+      box-shadow: none
+      border-radius: 0 0 6px 6px
+      background: var(--highlight-background)
+      code
+        display: block
+        font-size: 14px
+        line-height: 1.5
+        background: transparent
+        padding: 0
+        white-space: pre
+
+  .ace_editor
+    font-family: font-mono
+    font-size: 14px
+    line-height: 1.5
+    border-radius: 6px
+  .ace_gutter
+    display: none !important
+    width: 0 !important
+  .ace_scroller
+    left: 0 !important
+  .ace_scrollbar
+    z-index: 2
 
   .version
     font-size: 0.8125rem

docs/themes/navy/source/css/_variables.styl

@@ -102,3 +102,20 @@ code-block-chrome()
   border-radius: 6px
   border: 1px solid var(--code-border)
   box-shadow: var(--code-shadow)
+
+playground-window-chrome()
+  code-block-chrome()
+  padding-top: 36px
+  &:before
+    content: ''
+    position: absolute
+    z-index: 4
+    top: 0
+    left: 0
+    right: 0
+    height: 36px
+    background: var(--highlight-background)
+    border-bottom: 1px solid var(--code-border)
+    border-radius: 6px 6px 0 0
+    pointer-events: none
+    background-image: radial-gradient(circle at 12px 18px, #ff5f57 5px, transparent 5px), radial-gradient(circle at 28px 18px, #febc2e 5px, transparent 5px), radial-gradient(circle at 44px 18px, #28c840 5px, transparent 5px)