nuxt-og-image 2.0.0-beta.3 → 2.0.0-beta.30

package/README.md

@@ -38,7 +38,7 @@ Enlightened OG Image generation for Nuxt 3.
 - ▲ Render using [Satori](https://github.com/vercel/satori): Tailwind classes, Google fonts, emoji support and more!
 - 🤖 Or prerender using the Browser: Supporting painless, complex templates
 - 📸 Feeling lazy? Just generate screenshots for every page: hide elements, wait for animations, and more
-- ⚙️ Works on the edge: Vercel Edge and Cloudflare Workers
+- ⚙️ Works on the edge: Vercel Edge, Netlify Edge and Cloudflare Workers
 
 ## Demos
 
@@ -46,6 +46,25 @@ Enlightened OG Image generation for Nuxt 3.
 - [StackBlitz - Minimal Playground Example](https://stackblitz.com/edit/nuxt-starter-pxs3wk?file=pages/index.vue)
 - [StackBlitz - Alpine Theme](https://stackblitz.com/edit/github-hgunsf?file=package.json)
 
+## Runtime Provider Compatibility
+
+Both Satori and Browser will work in Node based environments. Prerendering is fully supported.
+
+When you want to generate dynamic images at runtime there are certain nitro runtime limitations.
+
+| Provider                           | Satori |  Browser |
+|------------------------------------|-----------------| -- |
+| StackBlitz                         | ✅              | ❌             |
+| Node                                  | ✅              | ✅              |
+| Vercel                             | ✅              | ✅             |
+| Vercel Edge                        | ✅              | ❌              |
+| Cloudflare Workers (requires paid) | ✅            | ❌             |
+| Cloudflare Pages (requires paid)   | ✅            | ❌             |
+| Netlify (TBC)                      | ❌              | ❌             |
+| Netlify Edge (TBC)                 | ❌              | ❌             |
+
+Other providers are yet to be tested. Please create an issue if you have tested one.
+
 ## Install
 
 ```bash
@@ -71,27 +90,6 @@ export default defineNuxtConfig({
 
 This feature uses Nuxt Islands, which requires Nuxt >= 3.1.
 
-### Add your host name
-
-The `og:image` meta tag requires the full URL, so you must provide your site host.
-
-_nuxt.config.ts_
-
-```ts
-export default defineNuxtConfig({
-  // Recommended
-  runtimeConfig: {
-    public: {
-      siteUrl: process.env.NUXT_PUBLIC_SITE_URL || 'https://example.com',
-    }
-  },
-  // OR
-  ogImage: {
-    host: 'https://example.com',
-  },
-})
-```
-
 # Guides
 
 ## Your first Satori `og:image`
@@ -241,6 +239,78 @@ Out of the box, this module provides support for the following:
 
 If you find Satori is too limiting for your needs, you can always use the `browser` provider to capture browser screenshots instead.
 
+## SSG Images
+
+When using `nuxt generate`, you will need to provide some additional configuration.
+
+- You must provide a `siteUrl` so that the meta tags can be generated correctly as absolute URLs.
+
+```ts
+export default defineNuxtConfig({
+  // Recommended
+  runtimeConfig: {
+    public: {
+      siteUrl: process.env.NUXT_PUBLIC_SITE_URL || 'https://example.com',
+    }
+  },
+  // OR
+  ogImage: {
+    host: 'https://example.com',
+  },
+})
+```
+
+- You must prerender all pages that use `og:image`.
+
+```ts
+export default defineNuxtConfig({
+  nitro: {
+    prerender: {
+      crawlLinks: true, // recommended  
+      routes: [
+        '/',
+        // list all routes that use og:image if you're not using crawlLinks
+        '/about',
+        '/blog',
+        '/blog/my-first-post',
+      ]
+    }
+  }
+})
+```
+
+## SSR Images
+
+When using `nuxt build`, you can only use the `browser` provider with the `node` Nitro preset.
+
+If you intend to use the `browser` provider in production, make sure you include the `playwright` dependency.
+
+  ```bash
+  npm i playwright
+  ```
+
+You can get around this by prerendering any pages that use `og:image`. Note that dynamic browser generated images are not supported at all,
+you should use the Satori provider.
+
+
+```ts
+export default defineNuxtConfig({
+  nitro: {
+    prerender: {
+      crawlLinks: true, // recommended  
+      routes: [
+        '/',
+        // list all routes that use og:image if you're not using crawlLinks
+        '/about',
+        '/blog',
+        '/blog/my-first-post',
+      ]
+    }
+  }
+})
+```
+
+
 ## Taking screenshots
 
 If you want to simply take a screenshot of your page, you can use the `OgImageScreenshot` component or `defineOgImageScreenshot` composable.
@@ -282,6 +352,123 @@ _package.json_
 }
 ```
 
+## Custom Fonts / Supporting non-english characters
+
+When creating your OG Image, you'll probably want to use a font custom to your project. 
+
+To make this easier for you, Google Fonts are loaded by default with Inter 400 and Inter 700. 
+
+You can easily load different Google Fonts by using their name+weight. For example:
+
+```ts
+export default defineNuxtConfig({
+  ogImage: {
+    fonts: [
+      // will load the Noto Sans font from Google fonts
+      'Noto+Sans:400'
+    ]
+  }
+})
+```
+
+This also lets you support non-english characters by adding the appropriate font to your config.
+
+For example, to support Hebrew characters, you can use the config:
+
+```ts
+export default defineNuxtConfig({
+  ogImage: {
+      fonts: [
+        // will load this font from Google fonts
+        'Noto+Sans+Hebrew:400'
+      ]
+  }
+})
+````
+
+If you'd like to load a font locally,
+then you can provide the configuration as an object:
+
+```ts
+export default defineNuxtConfig({
+  ogImage: {
+    fonts: [
+      {
+        name: 'optieinstein',
+        weight: 800,
+        // path must point to a public font file
+        path: '/OPTIEinstein-Black.otf',
+      }
+    ],
+  }
+})
+```
+
+Make sure to set the font family in your component to match the font name.
+
+```vue
+<template>
+<div :style="{ fontFamily: 'optieinstein' }">
+  <!-- Your component  -->
+</div>
+</template>
+```
+
+## Caching
+
+It's recommended to cache your images to reduce the load on your server. This can be achieved
+by providing a `runtimeCacheStorage` option to the `ogImage` config.
+
+This `runtimeCacheStorage` option takes the same configuration as the Nuxt `nitro.storage` option. 
+See the [Nitro Storage Layer](https://nitro.unjs.io/guide/storage) documentation for more details.
+
+For example:
+
+```ts
+export default defineNuxtConfig({
+  ogImage: {
+    // cloudflare kv binding example, set your own config
+    runtimeCacheStorage: {
+      driver: 'cloudflare-kv-binding',
+      binding: 'OG_IMAGE_CACHE'
+    }
+  }
+})
+````
+
+By default, images will be cached for 24 hours. You can change the image TTL by providing `cacheTtl` when defining the image.
+
+```ts
+defineOgImageStatic({
+  // ...
+  cacheTtl: 60 * 60 * 24 * 7 // 7 days
+})
+```
+
+Alternatively, you can change the default cacheTtl time in your nuxt.config.
+
+
+```ts
+export default defineNuxtConfig({
+  ogImage: {
+    defaults: {
+      cacheTtl: 60 * 60 * 24 * 7 // 7 days
+    }
+  }
+})
+````
+
+You can also provide a configuration for the `cacheKey`. This gives you control over the cache bursting of the images.
+
+```vue
+<script lang="ts" setup>
+defineOgImageStatic({
+  cacheKey: `${myData.id}:${myData.updatedAt}`,
+})
+</script>
+````
+
+
 # API
 
 The module exposes a composition and component API to implement your `og:image` generation. You should pick
@@ -290,7 +477,7 @@ whichever one you prefer using.
 ## OgImageStatic / defineOgImageStatic
 
 The `OgImageStatic` component and the `defineOgImageStatic` composable creates a static image
-that will be pre-rendered.
+that will be prerendered.
 
 The options follow the [OgImageOptions](#OgImageOptions) interface,
 any additional options will be passed to the `component` as props.
@@ -322,7 +509,7 @@ defineOgImageStatic({
 
 ## OgImageDynamic / defineOgImageDynamic
 
-The `OgImageDynamic` component and the `defineOgImageDynamic` composable creates a dynamic image. They are not pre-rendered and will
+The `OgImageDynamic` component and the `defineOgImageDynamic` composable creates a dynamic image. They are not prerendered and will
 be generated at runtime.
 
 The options follow the [OgImageOptions](#OgImageOptions) interface,
@@ -396,12 +583,14 @@ The name of the component to use as the template. By default, it uses OgImageBas
 - Required: `false`
 
 The provider to use to generate the image. The default provider is `satori`.
-When you use `browser` it will use Puppeteer to generate the image.
+When you use `browser` it will use Playwright to generate the image.
 
-### `prerender`
+### `static`
 
 - Type: `boolean`
-- Default: `true` when static, `false` when dynamic
+- Default: `true` when using `defineOgImageStatic`, `false` when dynamic
+
+Controls the prerendering of the image. A non-static image is one that will be generated at runtime and not cached.
 
 
 ## OgImageScreenshot / defineOgImageScreenshot
@@ -495,13 +684,13 @@ defineOgImageScreenshot({
 
 ## Module Config
 
-### `host`
+### `siteUrl`
 
 - Type: `string`
 - Default: `undefined`
 - Required: `true`
 
-The host of your site. This is required to generate the absolute path of the `og:image`.
+The site URL of your site. This is required when prerendering to generate the absolute path of the `og:image`.
 
 ### `defaults`
 
@@ -511,15 +700,6 @@ The host of your site. This is required to generate the absolute path of the `og
 
 The default options to use when generating images.
 
-### `forcePrerender`
-
-- Type: `boolean`
-- Default: `false`
-- Required: `false`
-
-This is enabled when you run `nuxi generate`. It forces all OG images to be pre-rendered as the server is not available to generate
-runtime images.
-
 ### `fonts`
 
 - Type: ``${string}:${number}`[]`
@@ -546,16 +726,21 @@ export default defineNuxtConfig({
 
 Options to pass to Satori when generating images. See the [Satori docs](https://github.com/vercel/satori).
 
-### `experimentalNitroBrowser` (experimental)
+### `runtimeSatori`
 
 - Type: `boolean`
-- Default: `false`
-- Required: `false`
+- Default: `true`
+
+Whether to use Satori at runtime. This is useful to disable if you're prerendering all your images.
+
+### `runtimeBrowser`
+
+- Type: `boolean`
+- Default: `process.dev`
 
-In a server runtime, the default behaviour is to generate images using Satori. If you'd like to generate runtime images using the a browser instance 
-for screenshots, you can enable this setting.
+Whether to use Playwright at runtime. You will need to enable this for production environments and ensure you are using 
+a supported nitro preset and have the required dependencies.
 
-This is experimental and may not work in all environments.
 
 ## Examples
 

package/dist/client/200.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html >
 <head><meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="modulepreload" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/entry.74018bda.js"><link rel="preload" as="style" href="/__nuxt_og_image__/client/_nuxt/entry.7a8c1ab2.css"><link rel="prefetch" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/error-component.cf7543e5.js"><link rel="stylesheet" href="/__nuxt_og_image__/client/_nuxt/entry.7a8c1ab2.css"><script>"use strict";const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"system";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
+<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="modulepreload" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/entry.ec623b49.js"><link rel="preload" as="style" href="/__nuxt_og_image__/client/_nuxt/entry.0d82ebde.css"><link rel="prefetch" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/error-component.c2f3b155.js"><link rel="stylesheet" href="/__nuxt_og_image__/client/_nuxt/entry.0d82ebde.css"><script>"use strict";const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"system";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
 </script></head>
-<body ><div id="__nuxt"></div><script>window.__NUXT__={serverRendered:false,config:{public:{},app:{baseURL:"\u002F__nuxt_og_image__\u002Fclient",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:""}},data:{},state:{}}</script><script type="module" src="/__nuxt_og_image__/client/_nuxt/entry.74018bda.js" crossorigin></script></body>
+<body ><div id="__nuxt"></div><script>window.__NUXT__={_errors:{},serverRendered:false,data:{},state:{},config:{public:{},app:{baseURL:"\u002F__nuxt_og_image__\u002Fclient",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:""}}}</script><script type="module" src="/__nuxt_og_image__/client/_nuxt/entry.ec623b49.js" crossorigin></script></body>
 </html>

package/dist/client/404.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html >
 <head><meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="modulepreload" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/entry.74018bda.js"><link rel="preload" as="style" href="/__nuxt_og_image__/client/_nuxt/entry.7a8c1ab2.css"><link rel="prefetch" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/error-component.cf7543e5.js"><link rel="stylesheet" href="/__nuxt_og_image__/client/_nuxt/entry.7a8c1ab2.css"><script>"use strict";const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"system";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
+<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="modulepreload" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/entry.ec623b49.js"><link rel="preload" as="style" href="/__nuxt_og_image__/client/_nuxt/entry.0d82ebde.css"><link rel="prefetch" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/error-component.c2f3b155.js"><link rel="stylesheet" href="/__nuxt_og_image__/client/_nuxt/entry.0d82ebde.css"><script>"use strict";const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"system";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
 </script></head>
-<body ><div id="__nuxt"></div><script>window.__NUXT__={serverRendered:false,config:{public:{},app:{baseURL:"\u002F__nuxt_og_image__\u002Fclient",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:""}},data:{},state:{}}</script><script type="module" src="/__nuxt_og_image__/client/_nuxt/entry.74018bda.js" crossorigin></script></body>
+<body ><div id="__nuxt"></div><script>window.__NUXT__={_errors:{},serverRendered:false,data:{},state:{},config:{public:{},app:{baseURL:"\u002F__nuxt_og_image__\u002Fclient",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:""}}}</script><script type="module" src="/__nuxt_og_image__/client/_nuxt/entry.ec623b49.js" crossorigin></script></body>
 </html>

package/dist/client/_nuxt/IconCSS.565f8e72.css

@@ -0,0 +1 @@
+span[data-v-72c2aaaa]{background-color:currentColor;display:inline-block;-webkit-mask-image:var(--6f0cee94);mask-image:var(--6f0cee94);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;vertical-align:middle}

package/dist/client/_nuxt/IconCSS.7e52d29b.js

@@ -0,0 +1 @@
+import{a as p,b as u,e as _,f as t,o as l,h as f,i as m,u as a,j as d}from"./entry.ec623b49.js";const x=p({__name:"IconCSS",props:{name:{type:String,required:!0},size:{type:String,default:""}},setup(c){const s=c;u(e=>({"6f0cee94":a(r)}));const n=_();n?.nuxtIcon?.aliases;const i=t(()=>(n?.nuxtIcon?.aliases||{})[s.name]||s.name),r=t(()=>`url('https://api.iconify.design/${i.value.replace(":","/")}.svg')`),o=t(()=>{if(!s.size&&typeof n.nuxtIcon?.size=="boolean"&&!n.nuxtIcon?.size)return;const e=s.size||n.nuxtIcon?.size||"1em";return String(Number(e))===e?`${e}px`:e});return(e,S)=>(l(),f("span",{style:m({width:a(o),height:a(o)})},null,4))}});const z=d(x,[["__scopeId","data-v-72c2aaaa"]]);export{z as default};

package/dist/client/_nuxt/ImageLoader.7571516f.css

@@ -0,0 +1 @@
+img[data-v-23ec6856]{height:auto!important;margin:0 auto;max-width:100%;transition:.4s ease-in-out;width:auto!important}

package/dist/client/_nuxt/ImageLoader.e52725bc.js

@@ -0,0 +1 @@
+import{a as _,r as c,m,w as r,f as u,s as d,o as g,h as f,i as y,j as v}from"./entry.ec623b49.js";const x=_({__name:"ImageLoader",props:{src:String,aspectRatio:Number,description:String},setup(a){const s=a,n=c(),o=c(0);function i(e){const t=n.value,p=Date.now();t.src="",o.value=0,t.style.opacity="0",t.onload=()=>{t.style.opacity="1",o.value=Date.now()-p},t.src=e}m(()=>{r(()=>s.src,e=>{i(e)},{immediate:!0})});const l=u(()=>s.description.replace("%s",o.value.toString()));return r(l,e=>{d.value=e}),(e,t)=>(g(),f("img",{ref_key:"image",ref:n,class:"max-h-full border-1 border-light-500 rounded",style:y({aspectRatio:a.aspectRatio})},null,4))}});const w=v(x,[["__scopeId","data-v-23ec6856"]]);export{w as _};

package/dist/client/_nuxt/entry.0d82ebde.css

@@ -0,0 +1 @@
+:root{--nui-c-context: 125,125,125}html{background-color:#fff}html.dark{background-color:#151515;color:#fff;color-scheme:dark}*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 transparent;--un-ring-shadow:0 0 transparent;--un-shadow-inset: ;--un-shadow:0 0 transparent;--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 transparent;--un-ring-shadow:0 0 transparent;--un-shadow-inset: ;--un-shadow:0 0 transparent;--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.carbon-sun{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' display='inline-block' vertical-align='middle' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6ZM5.394 6.813L6.81 5.399l3.505 3.506L8.9 10.319zM2 15.005h5v2H2zm3.394 10.193L8.9 21.692l1.414 1.414l-3.505 3.506zM15 25.005h2v5h-2zm6.687-1.9l1.414-1.414l3.506 3.506l-1.414 1.414zm3.313-8.1h5v2h-5zm-3.313-6.101l3.506-3.506l1.414 1.414l-3.506 3.506zM15 2.005h2v5h-2z'/%3E%3C/svg%3E");background-color:currentColor;color:inherit;display:inline-block;height:1.2em;-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;vertical-align:middle;width:1.2em}.carbon\:ibm-cloud-pak-manta-automated-data-lineage{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' display='inline-block' vertical-align='middle' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M30 11V5h-6v2H14V4a2.002 2.002 0 0 0-2-2H4a2.002 2.002 0 0 0-2 2v8a2.002 2.002 0 0 0 2 2h8a2.002 2.002 0 0 0 2-2V9a3.003 3.003 0 0 1 3 3v9h-6v-2H5v6h6v-2h6v2a2.002 2.002 0 0 0 2 2h5v2h6v-6h-6v2h-5v-7h5v2h6v-6h-6v2h-5v-4a4.952 4.952 0 0 0-1.025-3H24v2ZM4 12V4h8v8Zm5 11H7v-2h2Zm17 2h2v2h-2Zm0-9h2v2h-2Zm0-9h2v2h-2Z'/%3E%3C/svg%3E");background-color:currentColor;color:inherit;display:inline-block;height:1.2em;-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;vertical-align:middle;width:1.2em}.carbon\:image-search{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' display='inline-block' vertical-align='middle' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M24 14a5.99 5.99 0 0 0-4.885 9.471L14 28.586L15.414 30l5.115-5.115A5.997 5.997 0 1 0 24 14zm0 10a4 4 0 1 1 4-4a4.005 4.005 0 0 1-4 4zm-7-12a3 3 0 1 0-3-3a3.003 3.003 0 0 0 3 3zm0-4a1 1 0 1 1-1 1a1 1 0 0 1 1-1z'/%3E%3Cpath fill='currentColor' d='M12 24H4v-6.003L9 13l5.586 5.586L16 17.168l-5.586-5.585a2 2 0 0 0-2.828 0L4 15.168V4h20v6h2V4a2.002 2.002 0 0 0-2-2H4a2.002 2.002 0 0 0-2 2v20a2.002 2.002 0 0 0 2 2h8Z'/%3E%3C/svg%3E");background-color:currentColor;color:inherit;display:inline-block;height:1.2em;-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;vertical-align:middle;width:1.2em}.carbon\:laptop{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' display='inline-block' vertical-align='middle' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M26 24.005H6a2.002 2.002 0 0 1-2-2v-14a2.002 2.002 0 0 1 2-2h20a2.002 2.002 0 0 1 2 2v14a2.003 2.003 0 0 1-2 2Zm-20-16v14h20v-14Zm-4 18h28v2H2z'/%3E%3C/svg%3E");background-color:currentColor;color:inherit;display:inline-block;height:1.2em;-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;vertical-align:middle;width:1.2em}.carbon\:mobile{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' display='inline-block' vertical-align='middle' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M22 4H10a2.002 2.002 0 0 0-2 2v22a2.002 2.002 0 0 0 2 2h12a2.003 2.003 0 0 0 2-2V6a2.002 2.002 0 0 0-2-2Zm0 2v2H10V6ZM10 28V10h12v18Z'/%3E%3C/svg%3E");background-color:currentColor;color:inherit;display:inline-block;height:1.2em;-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;vertical-align:middle;width:1.2em}.carbon\:operations-record{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' display='inline-block' vertical-align='middle' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M20 20h10v2H20zm0 4h10v2H20zm0 4h10v2H20zm-4-8a3.912 3.912 0 0 1-4-4a3.912 3.912 0 0 1 4-4a3.912 3.912 0 0 1 4 4h2a6 6 0 1 0-6 6z'/%3E%3Cpath fill='currentColor' d='m29.305 11.044l-2.36-4.088a1.998 1.998 0 0 0-2.374-.895l-2.434.824a11.042 11.042 0 0 0-1.312-.758l-.504-2.52A2 2 0 0 0 18.36 2h-4.72a2 2 0 0 0-1.961 1.608l-.504 2.518a10.967 10.967 0 0 0-1.327.754l-2.42-.819a1.998 1.998 0 0 0-2.372.895l-2.36 4.088a2 2 0 0 0 .411 2.502l1.931 1.697C5.021 15.495 5 15.745 5 16c0 .258.01.513.028.766l-1.92 1.688a2 2 0 0 0-.413 2.502l2.36 4.088a1.998 1.998 0 0 0 2.374.895l2.434-.824a10.974 10.974 0 0 0 1.312.759l.503 2.518A2 2 0 0 0 13.64 30H16v-2h-2.36l-.71-3.55a9.095 9.095 0 0 1-2.695-1.572l-3.447 1.166l-2.36-4.088l2.725-2.395a8.926 8.926 0 0 1-.007-3.128l-2.718-2.39l2.36-4.087l3.427 1.16A9.03 9.03 0 0 1 12.93 7.55L13.64 4h4.72l.71 3.55a9.098 9.098 0 0 1 2.695 1.572l3.447-1.166l2.36 4.088l-2.798 2.452L26.092 16l2.8-2.454a2 2 0 0 0 .413-2.502Z'/%3E%3C/svg%3E");background-color:currentColor;color:inherit;display:inline-block;height:1.2em;-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;vertical-align:middle;width:1.2em}.carbon\:png{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' display='inline-block' vertical-align='middle' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M30 23h-6a2 2 0 0 1-2-2V11a2 2 0 0 1 2-2h6v2h-6v10h4v-4h-2v-2h4zm-12-4L14.32 9H12v14h2V13l3.68 10H20V9h-2v10zM4 23H2V9h6a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H4zm0-7h4v-5H4z'/%3E%3C/svg%3E");background-color:currentColor;color:inherit;display:inline-block;height:1.2em;-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;vertical-align:middle;width:1.2em}.carbon\:svg{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' display='inline-block' vertical-align='middle' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M30 23h-6a2 2 0 0 1-2-2V11a2 2 0 0 1 2-2h6v2h-6v10h4v-4h-2v-2h4zM18 9l-2 13l-2-13h-2l2.52 14h2.96L20 9h-2zM8 23H2v-2h6v-4H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h6v2H4v4h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2z'/%3E%3C/svg%3E");background-color:currentColor;color:inherit;display:inline-block;height:1.2em;-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;vertical-align:middle;width:1.2em}.dark .dark\:carbon-moon{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' display='inline-block' vertical-align='middle' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3Z'/%3E%3C/svg%3E");background-color:currentColor;color:inherit;display:inline-block;height:1.2em;-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;vertical-align:middle;width:1.2em}.n-button-icon{font-size:1.1em;margin-left:-.2em;margin-right:.2em}.n-button-base{grid-gap:.25rem;--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgba(0,0,0,.05));align-items:center;border-color:#9ca3af33;border-radius:.25rem;border-width:1px;box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow);display:inline-flex;gap:.25rem;opacity:.8;outline:2px solid transparent!important;outline-offset:2px!important;padding:.25em 1em;touch-action:manipulation}.n-icon{flex:none}.n-border-base{border-color:#9ca3af33}[n~=borderless]{--un-shadow:0 0 var(--un-shadow-color, transparent) !important;border-color:transparent!important;box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)!important}.hover\:n-button-hover:hover{border-color:rgba(var(--nui-c-context),1)!important;color:rgba(var(--nui-c-context),1);opacity:1}.dark .n-bg-base{--un-bg-opacity:1;background-color:rgba(21,21,21,var(--un-bg-opacity))}.n-bg-base{--un-bg-opacity:1;background-color:rgba(255,255,255,var(--un-bg-opacity))}.active\:n-button-active:active{--un-ring-width:3px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);--un-ring-color:rgba(var(--nui-c-context),.1);background-color:rgba(var(--nui-c-context),.05);box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.focus-visible\:n-focus-base:focus-visible,.focus-within\:n-focus-base:focus-within{--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);--un-ring-color:rgba(var(--nui-c-context),.5);box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.n-transition{transition-duration:.15s;transition-duration:.2s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.fixed{position:fixed}.-bottom-1\/2{bottom:-50%}.left-0{left:0}.right-0{right:0}.z-10{z-index:10}.z-20{z-index:20}.z-5{z-index:5}.grid{display:grid}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.hover\:ml-1:hover{margin-left:.25rem}.mb-16{margin-bottom:4rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-0\.3em{margin-left:.3em}.ml-0\.4em{margin-left:.4em}.mr-0\.1em{margin-right:.1em}.mr-1{margin-right:.25rem}.block{display:block}.inline-block{display:inline-block}.hidden{display:none}.h-1\/2{height:50%}.h-auto{height:auto}.h-full,[h-full=""]{height:100%}.h-screen{height:100vh}.h1{height:.25rem}.max-h-630px{max-height:630px}.max-h-full{max-height:100%}.max-h-screen{max-height:100vh}.max-w-1200px{max-width:1200px}.max-w-520px{max-width:520px}.max-w-full{max-width:100%}.min-h-screen{min-height:100vh}.w-40{width:10rem}.w-full{width:100%}.flex{display:flex}.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.flex-grow{flex-grow:1}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.cursor-pointer{cursor:pointer}.place-content-center{place-content:center}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.space-x-1>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--un-space-x-reverse)));margin-right:calc(.25rem*var(--un-space-x-reverse))}.space-x-5>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(1.25rem*(1 - var(--un-space-x-reverse)));margin-right:calc(1.25rem*var(--un-space-x-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-bottom:calc(.75rem*var(--un-space-y-reverse));margin-top:calc(.75rem*(1 - var(--un-space-y-reverse)))}.of-auto,[of-auto=""]{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.whitespace-nowrap{white-space:nowrap}.border,.border-1{border-width:1px}.border-r-1{border-right-width:1px}.border-light-400{--un-border-opacity:1;border-color:rgba(246,246,246,var(--un-border-opacity))}.border-light-500{--un-border-opacity:1;border-color:rgba(242,242,242,var(--un-border-opacity))}.dark .dark\:border-dark-400{--un-border-opacity:1;border-color:rgba(34,34,34,var(--un-border-opacity))}.focus-within\:border-context:focus-within{border-color:rgba(var(--nui-c-context),1)}.rounded{border-radius:.25rem}.rounded-t-md{border-top-left-radius:.375rem;border-top-right-radius:.375rem}.bg-black\/5{background-color:#0000000d}.bg-light-200{--un-bg-opacity:1;background-color:rgba(250,250,250,var(--un-bg-opacity))}.bg-white{--un-bg-opacity:1;background-color:rgba(255,255,255,var(--un-bg-opacity))}.dark .dark\:bg-black{--un-bg-opacity:1;background-color:rgba(0,0,0,var(--un-bg-opacity))}.dark .dark\:bg-dark-700{--un-bg-opacity:1;background-color:rgba(27,27,27,var(--un-bg-opacity))}.dark .dark\:bg-dark-800{--un-bg-opacity:1;background-color:rgba(24,24,24,var(--un-bg-opacity))}.dark .dark\:bg-dark-900{--un-bg-opacity:1;background-color:rgba(15,15,15,var(--un-bg-opacity))}.dark .dark\:bg-white\/10{background-color:#ffffff1a}.p-0,[p-0=""]{padding:0}.p-3{padding:.75rem}.p-8{padding:2rem}.px,.px-4{padding-left:1rem;padding-right:1rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.py-7{padding-bottom:1.75rem;padding-top:1.75rem}.py-9px{padding-bottom:9px;padding-top:9px}.pl-1{padding-left:.25rem}.pr-2{padding-right:.5rem}.pt-14{padding-top:3.5rem}.text-center{text-align:center}.font-sans{font-family:Avenir,Helvetica,Arial,sans-serif}.text-1\.1em{font-size:1.1em}.text-6xl{font-size:3.75rem;line-height:1}.text-8xl{font-size:6rem;line-height:1}.text-base{font-size:1rem;line-height:1.5rem}.text-sm,[text-sm=""]{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-light{font-weight:300}.font-medium{font-weight:500}.leading-tight{line-height:1.25}.dark .dark\:text-light{--un-text-opacity:1;color:rgba(246,246,246,var(--un-text-opacity))}.dark .dark\:text-white{--un-text-opacity:1;color:rgba(255,255,255,var(--un-text-opacity))}.text-black{--un-text-opacity:1;color:rgba(0,0,0,var(--un-text-opacity))}.text-dark-800{--un-text-opacity:1;color:rgba(24,24,24,var(--un-text-opacity))}.underline{text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:grayscale}.op50,[op50=""]{opacity:.5}.opacity-40{opacity:.4}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-80{opacity:.8}.opacity-90{opacity:.9}.\!outline-none{outline:2px solid transparent!important;outline-offset:2px!important}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}[n~=lg]{font-size:1.125rem;line-height:1.75rem}.n-disabled\:n-disabled[disabled],[disabled] .n-disabled\:n-disabled{filter:saturate(0);opacity:.4;pointer-events:none}@media (min-width:640px){.sm\:px-0{padding-left:0;padding-right:0}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-3{padding-bottom:.75rem;padding-top:.75rem}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-8xl{font-size:6rem;line-height:1}.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:768px){.md\:block{display:block}}@media (min-width:1024px){.lg\:p-10{padding:2.5rem}}.icon[data-v-6e473d0a]{display:inline-block;vertical-align:middle}.tab-panels{width:100%}div[role=tabpanel]{display:flex;width:100%}