🎨 Apply the brand skin to the docs

docs/dialogs/directory-picker.mdx

@@ -6,6 +6,7 @@ description: 'Let users pick a folder with the native directory dialog'
 
 import { Platforms } from '/snippets/platforms.jsx'
 import DialogResult from '/snippets/dialog-result.mdx'
+import { FileKitDemo } from '/snippets/demo-embed.jsx'
 
 <Platforms scope="dialogs" supported="android ios macos jvm windows" partial={{ linux: 'Needs the XDG Desktop Portal', web: 'Read-only tree; an empty folder returns null' }} anchor="filekit-dialogs" />
 
@@ -35,6 +36,12 @@ val directory: PlatformFile? = FileKit.openDirectoryPicker()
 
 <DialogResult />
 
+## Try it
+
+This is the FileKit sample running in your browser. Pick a folder to browse its contents as a tree, then open a file to inspect its metadata.
+
+<FileKitDemo demo="directory-picker" title="Directory picker" />
+
 ## Options
 
 In Compose, pass these options to `rememberDirectoryPickerLauncher`. `launch()` takes no arguments.

docs/dialogs/gallery-picker.mdx

@@ -6,6 +6,7 @@ description: 'Let users pick photos and videos with the native gallery on Androi
 
 import { Platforms } from '/snippets/platforms.jsx'
 import DialogResult from '/snippets/dialog-result.mdx'
+import { FileKitDemo } from '/snippets/demo-embed.jsx'
 
 <Platforms scope="dialogs" supported="android ios" partial={{ macos: 'File dialog filtered by extension', jvm: 'File dialog filtered by extension', linux: 'File dialog filtered by extension', windows: 'File dialog filtered by extension', web: 'File input filtered by image/* and video/*' }} anchor="filekit-dialogs" />
 
@@ -38,6 +39,12 @@ val image: PlatformFile? = FileKit.openFilePicker(type = FileKitType.Image)
 
 Every [file picker option](/dialogs/file-picker#options) applies, including the state-tracking modes.
 
+## Try it
+
+This is the FileKit sample running in your browser. Choose images, videos, or both, switch the selection mode, then open a file to inspect its metadata. In a browser the picker is a file input filtered to media files.
+
+<FileKitDemo demo="gallery-picker" title="Gallery picker" />
+
 ## What users see
 
 | Platform | Dialog |

docs/docs.json

@@ -7,11 +7,11 @@
   "name": "FileKit",
   "description": "FileKit is a Kotlin Multiplatform library to pick, save, read, and write files on Android, iOS, macOS, JVM desktop, Linux, and Windows with native dialogs, plus browser file pickers and downloads on JS and Wasm.",
   "colors": {
-    "primary": "#0D9373",
-    "light": "#07C983",
-    "dark": "#0D9373"
+    "primary": "#1A7F4B",
+    "light": "#E3C266",
+    "dark": "#1A7F4B"
   },
-  "favicon": "/favicon.svg",
+  "favicon": "/brand/favicon.svg",
   "navigation": {
     "groups": [
       {
@@ -80,8 +80,18 @@
     ]
   },
   "logo": {
-    "light": "/logo/light-0.10.2.svg",
-    "dark": "/logo/dark-0.10.2.svg"
+    "light": "/brand/logo-light.svg",
+    "dark": "/brand/logo-dark.svg"
+  },
+  "seo": {
+    "metatags": {
+      "og:image": "https://filekit.mintlify.app/brand/og.jpg",
+      "og:image:width": "1200",
+      "og:image:height": "630",
+      "og:image:alt": "FileKit: file operations, pickers, and dialogs for Kotlin and Compose Multiplatform",
+      "twitter:card": "summary_large_image",
+      "twitter:image": "https://filekit.mintlify.app/brand/og.jpg"
+    }
   },
   "navbar": {
     "primary": {